Merge pull request #36 from webzard-io/form

add tabs component

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

@@ -303,6 +303,8 @@ export const exampleProperties: Static<typeof TablePropsSchema> = {
   size: "default",
   pagePosition: "bottomCenter",
   rowSelectionType: "radio",
+  border:true,
+  loading:false
 };
 
 export const Table = implementRuntimeComponent({

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

@@ -0,0 +1,76 @@
+import { Tabs as BaseTabs } from "@arco-design/web-react";
+import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
+import { css } from "@emotion/css";
+import { Type, Static } from "@sinclair/typebox";
+import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
+import { TabsPropsSchema as BaseTabsPropsSchema } from "../generated/types/Tabs";
+import React, { useEffect, useRef, useState } from "react";
+const TabsPropsSchema = Type.Object(BaseTabsPropsSchema);
+const TabsStateSchema = Type.Object({
+  activeTab: Type.String(),
+});
+const TabPane = BaseTabs.TabPane;
+
+const TabsImpl: ComponentImpl<Static<typeof TabsPropsSchema>> = (props) => {
+  const { defaultActiveTab, tabNames, ...cProps } = getComponentProps(props);
+  const { getElement, customStyle, mergeState, slotsElements } = props;
+  const ref = useRef<{ current: HTMLDivElement }>(null);
+  const [activeTab, setActiveTab] = useState<string>(String(defaultActiveTab));
+
+  useEffect(() => {
+    const ele = ref.current?.current;
+    if (getElement && ele) {
+      getElement(ele);
+    }
+  }, [getElement, ref]);
+
+  return (
+    <BaseTabs
+      className={css(customStyle?.content)}
+      onChange={(key) => {
+        setActiveTab(key);
+        mergeState({ activeTab: key });
+      }}
+      {...cProps}
+      activeTab={activeTab}
+      ref={ref}
+    >
+      {tabNames.map((tabName, idx) => (
+        <TabPane key={String(idx)} title={tabName}>
+          {([] as React.ReactElement[]).concat(slotsElements.content)[idx]}
+        </TabPane>
+      ))}
+    </BaseTabs>
+  );
+};
+
+const exampleProperties: Static<typeof TabsPropsSchema> = {
+  type: "capsule",
+  defaultActiveTab: "1",
+  tabPosition: "bottom",
+  size: "default",
+  tabNames: ["Tab1", "Tab2", "Tab3"],
+};
+
+const options = {
+  version: "arco/v1",
+  metadata: {
+    ...FALLBACK_METADATA,
+    name: "tabs",
+    displayName: "Tabs",
+    exampleProperties,
+    annotations: {
+      category: "Display",
+    },
+  },
+  spec: {
+    properties: TabsPropsSchema,
+    state: TabsStateSchema,
+    methods: {},
+    slots: ["content"],
+    styleSlots: ["content"],
+    events: [],
+  },
+};
+
+export const Tabs = implementRuntimeComponent(options)(TabsImpl);

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

@@ -0,0 +1,27 @@
+
+import { Type } from "@sinclair/typebox";
+import { StringUnion } from '../../sunmao-helper';
+import { PRESET_PROPERTY_CATEGORY } from '@sunmao-ui/editor'
+
+export const TabsPropsSchema = {
+  tabNames:Type.Array(
+  Type.String(),{
+    title:'Tab Names',
+  }),
+  defaultActiveTab: Type.String({
+    title: 'Default Active Tab',
+    category:PRESET_PROPERTY_CATEGORY.Basic
+  }),
+  tabPosition: StringUnion(['left', 'right', 'top', 'bottom'],{
+    title:'Tab Position',
+    category:PRESET_PROPERTY_CATEGORY.Layout
+  }),
+  size: StringUnion(['mini', 'small', 'default', 'large'],{
+    title:'Size',
+    category:PRESET_PROPERTY_CATEGORY.Style
+  }),
+  type: StringUnion(['line', 'card', 'card-gutter', 'text', 'rounded', 'capsule'],{
+    title:'Type',
+    category:PRESET_PROPERTY_CATEGORY.Style
+  }),
+};

packages/arco-lib/src/lib.ts

@@ -33,6 +33,7 @@ import { Link } from "./components/Link";
 import { Switch } from "./components/Switch";
 import { PasswordInput } from "./components/PasswordInput";
 import { TextArea } from "./components/TextArea";
+import { Tabs } from "./components/Tabs";
 
 type Component = Parameters<Registry["registerComponent"]>[0];
 type Trait = Parameters<Registry["registerTrait"]>[0];
@@ -73,6 +74,7 @@ export const components: Component[] = [
   Switch,
   PasswordInput,
   TextArea,
+  Tabs
 ];
 export const traits: Trait[] = [];
 export const modules: Module[] = [];

packages/arco-lib/src/sunmao-helper.ts

@@ -17,8 +17,7 @@ export function StringUnion<T extends string[]>(values: [...T], options?: any) {
       }, {} as Record<T[number], any>)
     ), {
     title: options?.title,
-    widget: 'mulitiSelectInput',
-    description: options?.descrition,
+    description: options?.description,
     category: options?.category,
     weight: options?.weight
   }