refactor(collapse): remove collapseItem component & make type safe

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

@@ -1,49 +1,33 @@
 import { Collapse as BaseCollapse } from '@arco-design/web-react';
-import { ComponentImpl, implementRuntimeComponent } from '@sunmao-ui/runtime';
+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 {
-  CollapsePropsSpec as BaseCollapsePropsSpec,
-  CollapseItemPropsSpec as BaseCollapseItemPropsSpec,
-} from '../generated/types/Collapse';
+import { CollapsePropsSpec as BaseCollapsePropsSpec } from '../generated/types/Collapse';
 import { useEffect, useState } from 'react';
+import { EmptyPlaceholder } from './Form/EmptyPlaceholder';
 
 const CollapsePropsSpec = Type.Object(BaseCollapsePropsSpec);
 const CollapseStateSpec = Type.Object({
   activeKey: Type.Array(Type.String()),
 });
 
-const CollapseImpl: ComponentImpl<Static<typeof CollapsePropsSpec>> = props => {
-  const { defaultActiveKey, ...cProps } = getComponentProps(props);
-  const { elementRef, mergeState, slotsElements, customStyle, callbackMap } = props;
-
-  const [activeKey, setActiveKey] = useState<string[]>(defaultActiveKey.map(String));
-
-  useEffect(() => {
-    mergeState({ activeKey });
-  }, [activeKey, mergeState]);
-
-  const onChange = (currentOperateKey: string, activeKey: string[]) => {
-    setActiveKey(activeKey);
-    callbackMap?.onChange?.();
-  };
-
-  return (
-    <BaseCollapse
-      ref={elementRef}
-      className={css(customStyle?.content)}
-      {...cProps}
-      defaultActiveKey={defaultActiveKey}
-      activeKey={activeKey}
-      onChange={onChange}
-    >
-      {slotsElements.collapseItems && slotsElements.collapseItems}
-    </BaseCollapse>
-  );
-};
 const exampleProperties: Static<typeof CollapsePropsSpec> = {
   defaultActiveKey: ['1'],
+  options: [
+    {
+      key: '1',
+      header: 'header 1',
+      disabled: false,
+      showExpandIcon: true,
+    },
+    {
+      key: '2',
+      header: 'header 2',
+      disabled: false,
+      showExpandIcon: true,
+    },
+  ],
   accordion: false,
   expandIconPosition: 'left',
   bordered: false,
@@ -63,55 +47,52 @@ const options = {
     methods: {
       setActiveKey: Type.String(),
     },
-    slots: ['collapseItems'],
-    styleSlots: ['content'],
-    events: [],
-  },
-};
-
-export const Collapse = implementRuntimeComponent(options)(
-  CollapseImpl as typeof CollapseImpl & undefined
-);
-
-const CollapseItemPropsSpec = Type.Object(BaseCollapseItemPropsSpec);
-const CollapseItemStateSpec = Type.Object({});
-
-const CollapseItemImpl: ComponentImpl<Static<typeof CollapseItemPropsSpec>> = props => {
-  const { elementRef, name, ...cProps } = getComponentProps(props);
-  const { slotsElements, customStyle } = props;
-
-  return (
-    <BaseCollapse.Item
-      ref={elementRef}
-      name={String(name)}
-      className={css(customStyle?.content)}
-      {...cProps}
-    >
-      {slotsElements.content}
-    </BaseCollapse.Item>
-  );
-};
-
-export const CollapseItem = implementRuntimeComponent({
-  version: 'arco/v1',
-  metadata: {
-    ...FALLBACK_METADATA,
-    name: 'CollapseItem',
-    displayName: 'CollapseItem',
-    exampleProperties: {
-      name: '1',
-      disabled: false,
-      showExpandIcon: true,
-      destroyOnHide: true,
-      header: 'header',
-    },
-  },
-  spec: {
-    properties: CollapseItemPropsSpec,
-    state: CollapseItemStateSpec,
-    methods: {},
     slots: ['content'],
     styleSlots: ['content'],
     events: ['onChange'],
   },
-})(CollapseItemImpl);
+};
+
+export const Collapse = implementRuntimeComponent(options)(props => {
+  const { defaultActiveKey, options, ...cProps } = getComponentProps(props);
+  const { elementRef, mergeState, slotsElements, customStyle, callbackMap } = props;
+
+  const [activeKey, setActiveKey] = useState<string[]>(defaultActiveKey.map(String));
+
+  useEffect(() => {
+    mergeState({ activeKey });
+  }, [activeKey, mergeState]);
+
+  const onChange = (currentOperateKey: string, activeKey: string[]) => {
+    setActiveKey(activeKey);
+    callbackMap?.onChange?.();
+  };
+
+  const collapseItems = slotsElements.content
+    ? ([] as React.ReactElement[]).concat(slotsElements.content)
+    : [];
+
+  return (
+    <BaseCollapse
+      ref={elementRef}
+      className={css(customStyle?.content)}
+      {...cProps}
+      activeKey={activeKey}
+      onChange={onChange}
+    >
+      {options.map((o, idx) => {
+        const { key, ...props } = o;
+        return (
+          <BaseCollapse.Item key={key} name={String(key)} {...props}>
+            {collapseItems.length ? (
+              collapseItems[idx]
+            ) : (
+              <EmptyPlaceholder componentName="" />
+            )}
+          </BaseCollapse.Item>
+        );
+      })}
+    </BaseCollapse>
+  );
+});
+

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

@@ -2,6 +2,28 @@ import { Type } from '@sinclair/typebox';
 import { Category } from '../../constants/category';
 import { StringUnion } from '../../sunmao-helper';
 
+
+export const CollapseItemPropsSpec = {
+  key: Type.String({
+    title: 'Key',
+    category: Category.Basic,
+    weight: 2,
+  }),
+  header: Type.String({
+    title: 'Header',
+    category: Category.Basic,
+    weight: 1,
+  }),
+  disabled: Type.Boolean({
+    title: 'Disabled',
+    category: Category.Basic,
+  }),
+  showExpandIcon: Type.Boolean({
+    title: 'Show Expand Icon',
+    category: Category.Basic,
+  }),
+};
+
 export const CollapsePropsSpec = {
   defaultActiveKey: Type.Array(Type.String(), {
     title: 'Default Active Key',
@@ -19,25 +41,12 @@ export const CollapsePropsSpec = {
     title: 'Bordered',
     category: Category.Style,
   }),
+  options: Type.Array(Type.Object(CollapseItemPropsSpec), {
+    title: 'Options',
+    category: Category.Basic,
+    widgetOptions: {
+      displayedKeys: ['header'],
+    }
+  })
 };
 
-export const CollapseItemPropsSpec = {
-  name: Type.String({
-    title: 'Name',
-    category: Category.Basic,
-    weight: 2,
-  }),
-  disabled: Type.Boolean({
-    title: 'Disabled',
-    category: Category.Basic,
-  }),
-  showExpandIcon: Type.Boolean({
-    title: 'Show Expand Icon',
-    category: Category.Basic,
-  }),
-  header: Type.String({
-    title: 'Header',
-    category: Category.Basic,
-    weight: 1,
-  }),
-};

packages/arco-lib/src/lib.ts

@@ -15,7 +15,7 @@ import { Progress } from './components/Progress';
 import { Badge } from './components/Badge';
 import { Tooltip } from './components/Tooltip';
 import { Popover } from './components/Popover';
-import { Collapse, CollapseItem } from './components/Collapse';
+import { Collapse } from './components/Collapse';
 import { Cascader } from './components/Cascader';
 import { Skeleton } from './components/Skeleton';
 import { Timeline } from './components/Timeline';
@@ -62,7 +62,6 @@ export const components: SunmaoLib['components'] = [
   Tooltip,
   Popover,
   Collapse,
-  CollapseItem,
   Cascader,
   Skeleton,
   Timeline,