feat: add image group & optimise dropdown

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

@@ -11,7 +11,6 @@ import { DropdownPropsSpec as BaseDropdownPropsSpec } from '../generated/types/D
 const DropdownPropsSpec = Type.Object(BaseDropdownPropsSpec);
 const DropdownStateSpec = Type.Object({
   selectedItemKey: Type.String(),
-  keyPath: Type.Optional(Type.Array(Type.String())),
   visible: Type.Boolean(),
 });
 
@@ -27,6 +26,7 @@ const exampleProperties: Static<typeof DropdownPropsSpec> = {
     { key: '3', label: 'tencent' },
   ],
   autoAlignPopupWidth: true,
+  unmountOnExit: false,
 };
 
 const options = {
@@ -59,10 +59,9 @@ export const Dropdown = implementRuntimeComponent(options)(props => {
     button: BaseDropdown.Button,
   };
 
-  const onClickMenuItem = (key: string, event: any, keyPath: string[]) => {
+  const onClickMenuItem = (key: string) => {
     mergeState({
       selectedItemKey: key,
-      keyPath: keyPath || [],
     });
     callbackMap?.onClickMenuItem?.();
   };
@@ -89,7 +88,6 @@ export const Dropdown = implementRuntimeComponent(options)(props => {
       onVisibleChange={onVisibleChange}
       onClick={callbackMap?.onButtonClick}
       triggerProps={{ autoAlignPopupMinWidth: autoAlignPopupWidth }}
-      unmountOnExit={false}
     >
       <div ref={elementRef}>{slotsElements.trigger || <Button>Click</Button>}</div>
     </Dropdown>

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

@@ -5,8 +5,12 @@ import { Type } from '@sinclair/typebox';
 import { FALLBACK_METADATA } from '../sunmao-helper';
 
 const IconPropsSpec = Type.Object({
-  name: Type.KeyOf(Type.Object(Icons as Record<keyof typeof Icons, any>)),
-  spin: Type.Boolean(),
+  name: Type.KeyOf(Type.Object(Icons as Record<keyof typeof Icons, any>), {
+    title: 'Name',
+  }),
+  spin: Type.Boolean({
+    title: 'Spin',
+  }),
 });
 
 export const Icon = implementRuntimeComponent({

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

@@ -1,9 +1,12 @@
-import { Image as BaseImage } from '@arco-design/web-react';
+import { Image as BaseImage, Space } from '@arco-design/web-react';
 import { implementRuntimeComponent } from '@sunmao-ui/runtime';
 import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
-import { ImagePropsSpec as BaseImagePropsSpec } from '../generated/types/Image';
+import {
+  ImageGroupPropsSpec,
+  ImagePropsSpec as BaseImagePropsSpec,
+} from '../generated/types/Image';
 
 const ImagePropsSpec = Type.Object(BaseImagePropsSpec);
 const ImageStateSpec = Type.Object({});
@@ -15,6 +18,9 @@ const exampleProperties: Static<typeof ImagePropsSpec> = {
   footerPosition: 'inner',
   simple: false,
   preview: false,
+  width: 200,
+  height: 200,
+  error:''
 };
 
 const options = {
@@ -50,3 +56,79 @@ export const Image = implementRuntimeComponent(options)(props => {
     />
   );
 });
+
+export const ImageGroup = implementRuntimeComponent({
+  version: 'arco/v1',
+  metadata: {
+    ...FALLBACK_METADATA,
+    name: 'imageGroup',
+    displayName: 'Image Group',
+    exampleProperties: {
+      imageItems: [
+        {
+          src: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
+          width: 200,
+          height: 200,
+        },
+        {
+          src: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',
+          width: 200,
+          height: 200,
+        },
+        {
+          src: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
+          width: 200,
+          height: 200,
+        },
+        {
+          src: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp',
+          width: 200,
+          height: 200,
+        },
+      ],
+      src: '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp',
+      infinite: true,
+      maskClosable: true,
+      closable: false,
+    },
+    annotations: {
+      category: 'Display',
+    },
+  },
+  spec: {
+    properties: Type.Object(ImageGroupPropsSpec),
+    state: Type.Object({
+      current: Type.Number(),
+    }),
+    methods: {},
+    slots: [],
+    styleSlots: ['content'],
+    events: ['onChange'],
+  },
+})(props => {
+  const { elementRef, customStyle, mergeState, callbackMap } = props;
+  const { imageItems, ...cProps } = getComponentProps(props);
+
+  return (
+    <div ref={elementRef}>
+      <BaseImage.PreviewGroup
+        {...cProps}
+        className={css`
+          ${customStyle?.content}
+        `}
+        onChange={idx => {
+          mergeState({
+            current: idx,
+          });
+          callbackMap?.onChange?.();
+        }}
+      >
+        {imageItems.map((item, idx) => (
+          <Space key={idx}>
+            <BaseImage {...item} />
+          </Space>
+        ))}
+      </BaseImage.PreviewGroup>
+    </div>
+  );
+});

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

@@ -9,7 +9,7 @@ import { RefTreeSelectType } from '@arco-design/web-react/es/TreeSelect';
 
 const TreeSelectPropsSpec = Type.Object(BaseTreeSelectPropsSpec);
 const TreeSelectStateSpec = Type.Object({
-  selectedOptions: Type.String(),
+  selectedOptions: Type.Array(Type.String()),
 });
 
 const exampleProperties: Static<typeof TreeSelectPropsSpec> = {

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

@@ -27,6 +27,10 @@ export const DropdownPropsSpec = {
     title:'Auto Align Popup Width',
     category: Category.Basic,
   }),
+  unmountOnExit:Type.Boolean({
+    title:'Unmount On Exit',
+    category: Category.Basic
+  }),
   list: Type.Array(
     Type.Object({
       key: Type.String({
@@ -39,6 +43,7 @@ export const DropdownPropsSpec = {
     {
       title: 'List',
       category: Category.Basic,
+      widget:'core/v1/expression',
       weight: 10,
     }
   ),

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

@@ -15,6 +15,19 @@ export const ImagePropsSpec = {
     title: 'Description',
     category: Category.Basic,
   }),
+  width: Type.Number({
+    title: 'Width',
+    category: Category.Basic,
+  }),
+  height: Type.Number({
+    title: 'Height',
+    category: Category.Basic,
+  }),
+  error: Type.String({
+    title: 'Error',
+    description: 'Content displayed in error state',
+    category: Category.Basic,
+  }),
   footerPosition: StringUnion(['inner', 'outer'], {
     title: 'Footer Position',
     category: Category.Layout,
@@ -28,3 +41,37 @@ export const ImagePropsSpec = {
     category: Category.Basic,
   }),
 };
+
+const ImageItemsPropsSpec = Type.Object({
+  src: Type.String({
+    title: 'Src'
+  }),
+  width: Type.Number({
+    title: 'Width'
+  }),
+  height: Type.Number({
+    title: 'Height'
+  }),
+});
+export const ImageGroupPropsSpec = {
+  imageItems: Type.Array(ImageItemsPropsSpec, {
+    title: 'Image Items',
+    category: Category.Basic,
+  }),
+  infinite: Type.Boolean({
+    title: 'Infinite',
+    description: 'Whether to loop infinitely',
+    category: Category.Basic,
+  }),
+  maskClosable: Type.Boolean({
+    title: 'Mask Closable',
+    description: 'Whether click mask to close',
+    category: Category.Basic,
+  }),
+  closable: Type.Boolean({
+    title: 'Closable',
+    description: 'Whether display close button',
+    category: Category.Basic,
+  })
+}
+

packages/arco-lib/src/lib.ts

@@ -1,7 +1,7 @@
 import { SunmaoLib } from '@sunmao-ui/runtime';
 import { Button } from './components/Button';
 import { Layout } from './components/Layout';
-import { Image } from './components/Image';
+import { Image, ImageGroup } from './components/Image';
 import { Select } from './components/Select';
 import { Menu } from './components/Menu';
 import { Dropdown } from './components/Dropdown';
@@ -49,6 +49,7 @@ export const components: SunmaoLib['components'] = [
   Button,
   Layout,
   Image,
+  ImageGroup,
   Select,
   Menu,
   Dropdown,