impl simple select

packages/arco-lib/src/components/Select.tsx

@@ -0,0 +1,75 @@
+import { Select as BaseSelect } from "@arco-design/web-react";
+import { ComponentImplementation } from "@sunmao-ui/runtime";
+import { createComponent } from "@sunmao-ui/core";
+import { css } from "@emotion/css";
+import { Type, Static } from "@sinclair/typebox";
+import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
+import { SelectPropsSchema as BaseSelectPropsSchema } from "../generated/types/Select";
+import { useEffect, useState } from "react";
+
+const SelectPropsSchema = Type.Object({
+  ...BaseSelectPropsSchema,
+  options: Type.Optional(
+    Type.Array(
+      Type.Object({
+        text: Type.String(),
+        disabled: Type.Optional(Type.Boolean()),
+      })
+    )
+  ),
+  defaultValue: Type.Optional(Type.String()),
+});
+const SelectStateSchema = Type.Object({
+  value: Type.String(),
+});
+
+const SelectImpl: ComponentImplementation<Static<typeof SelectPropsSchema>> = (
+  props
+) => {
+  const { customStyle, callbackMap, mergeState, defaultValue = "" } = props;
+  const { options = [], ...cProps } = getComponentProps(props);
+  const [value, setValue] = useState<string>(defaultValue);
+  useEffect(() => {
+    console.log({ value });
+    mergeState({
+      value,
+    });
+  }, [value]);
+
+  return (
+    <BaseSelect
+      className={css(customStyle?.content)}
+      onChange={(v) => {
+        setValue(v);
+        callbackMap?.onChange();
+      }}
+      value={value}
+      {...cProps}
+    >
+      {options.map((o) => (
+        <BaseSelect.Option key={o.text} value={o.text} disabled={o.disabled}>
+          {o.text}
+        </BaseSelect.Option>
+      ))}
+    </BaseSelect>
+  );
+};
+
+export const Select = {
+  ...createComponent({
+    version: "arco/v1",
+    metadata: {
+      ...FALLBACK_METADATA,
+      name: "select",
+    },
+    spec: {
+      properties: SelectPropsSchema,
+      state: SelectStateSchema,
+      methods: [],
+      slots: [],
+      styleSlots: ["content"],
+      events: ["onClick"],
+    },
+  }),
+  impl: SelectImpl,
+};

packages/arco-lib/src/generated/types/Select.ts

@@ -0,0 +1,27 @@
+
+import { Type, TUnion, TLiteral } from "@sinclair/typebox";
+
+type IntoStringUnion<T> = {[K in keyof T]: T[K] extends string ? TLiteral<T[K]>: never }
+
+function StringUnion<T extends string[]>(values: [...T]): TUnion<IntoStringUnion<T>> {
+    return { enum: values } as any
+}
+
+export const SelectPropsSchema = {
+  'inputValue': Type.Optional(Type.String()),
+  'mode': Type.Optional(StringUnion(['multiple', 'tags'])),
+  'labelInValue': Type.Optional(Type.Boolean()),
+  'defaultActiveFirstOption': Type.Optional(Type.Boolean()),
+  'unmountOnExit': Type.Optional(Type.Boolean()),
+  'defaultPopupVisible': Type.Optional(Type.Boolean()),
+  'popupVisible': Type.Optional(Type.Boolean()),
+  'placeholder': Type.Optional(Type.String()),
+  'bordered': Type.Optional(Type.Boolean()),
+  'size': Type.Optional(StringUnion(['default', 'mini', 'small', 'large'])),
+  'disabled': Type.Optional(Type.Boolean()),
+  'error': Type.Optional(Type.Boolean()),
+  'loading': Type.Optional(Type.Boolean()),
+  'allowClear': Type.Optional(Type.Boolean()),
+  'allowCreate': Type.Optional(Type.Boolean()),
+  'animation': Type.Optional(Type.Boolean())
+};

packages/arco-lib/src/lib.ts

@@ -3,6 +3,7 @@ import { Registry } from "@sunmao-ui/runtime/lib/services/registry";
 import { Button } from "./components/Button";
 import { Header, Content, Footer, Sider, Layout } from "./components/Layout";
 import { Image } from "./components/Image";
+import { Select } from "./components/Select";
 
 type Component = Parameters<Registry["registerComponent"]>[0];
 type Trait = Parameters<Registry["registerTrait"]>[0];
@@ -16,6 +17,7 @@ const components: Component[] = [
   Sider,
   Layout,
   Image,
+  Select,
 ];
 const traits: Trait[] = [];
 const modules: Module[] = [];

packages/arco-lib/src/main.tsx

@@ -140,6 +140,36 @@ ReactDOM.render(
               },
             ],
           },
+          {
+            id: "nav_menu",
+            type: "arco/v1/select",
+            properties: {
+              defaultValue: "IAM",
+              options: [
+                {
+                  text: "IAM",
+                },
+              ],
+            },
+            traits: [
+              {
+                type: "core/v1/slot",
+                properties: {
+                  container: {
+                    id: "header",
+                    slot: "content",
+                  },
+                },
+              },
+              {
+                type: "core/v1/style",
+                properties: {
+                  styleSlot: "content",
+                  style: "margin-left: 54px; width: 154px;",
+                },
+              },
+            ],
+          },
           {
             id: "text_2",
             type: "core/v1/text",

packages/arco-lib/tools/typegen.js

@@ -133,4 +133,7 @@ ${Object.keys(props)
   {
     component: "Image",
   },
+  {
+    component: "Select",
+  },
 ].forEach(generate);