Merge pull request #19 from webzard-io/component-improve

refactor: improve some components

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

@@ -66,9 +66,18 @@ const CascaderImpl: ComponentImpl<Static<typeof CascaderPropsSchema>> = (
   props
 ) => {
   const { multiple, placeholder, ...cProps } = getComponentProps(props);
-  const { mergeState, slotsElements, customStyle, className, options } = props;
+  const {
+    mergeState,
+    callbackMap,
+    slotsElements,
+    customStyle,
+    className,
+    options,
+  } = props;
 
-  const content = isArray(slotsElements.content) ? slotsElements.content[0] : slotsElements.content;
+  const content = isArray(slotsElements.content)
+    ? slotsElements.content[0]
+    : slotsElements.content;
 
   const mode: "multiple" | undefined = multiple ? "multiple" : undefined;
 
@@ -92,6 +101,7 @@ const CascaderImpl: ComponentImpl<Static<typeof CascaderPropsSchema>> = (
 
   const onChange = (value: (string | string[])[]) => {
     _setValue(value);
+    callbackMap?.onChange?.();
   };
 
   return (
@@ -155,7 +165,7 @@ const options = {
     methods: {},
     slots: ["content"],
     styleSlots: ["content"],
-    events: [],
+    events: ["onChange"],
   },
 };
 

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

@@ -14,7 +14,7 @@ const PaginationStateSchema = Type.Object({
 const PaginationImpl: ComponentImpl<Static<typeof PaginationPropsSchema>> = (
   props
 ) => {
-  const { defaultCurrent, ...cProps } = getComponentProps(props);
+  const { callbackMap, defaultCurrent, ...cProps } = getComponentProps(props);
   const { customStyle, className, mergeState } = props;
 
   const [current, setCurrent] = useState<number>(defaultCurrent || 0);
@@ -23,12 +23,10 @@ const PaginationImpl: ComponentImpl<Static<typeof PaginationPropsSchema>> = (
     Reflect.deleteProperty(cProps, "pageSize");
   }
 
-  useEffect(() => {
-    mergeState({ currentPage: current });
-  }, [current, mergeState]);
-
   const handleChange = (pageNum: number) => {
     setCurrent(pageNum);
+    mergeState({ currentPage: current });
+    callbackMap?.onChange?.();
   };
 
   return (
@@ -70,7 +68,7 @@ const options = {
     methods: {},
     slots: [],
     styleSlots: ["content"],
-    events: [],
+    events: ["onChange"],
   },
 };
 

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

@@ -4,44 +4,23 @@ import { css, cx } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
 import { TooltipPropsSchema as BaseTooltipPropsSchema } from "../generated/types/Tooltip";
-import { useEffect, useState } from "react";
 import { isArray } from "lodash-es";
 
 const TooltipPropsSchema = Type.Object(BaseTooltipPropsSchema);
-const TooltipStateSchema = Type.Object({
-  visible: Type.String(),
-});
+const TooltipStateSchema = Type.Object({});
 
 const TooltipImpl: ComponentImpl<Static<typeof TooltipPropsSchema>> = (
   props
 ) => {
-  const { controlled, ...cProps } = getComponentProps(props);
-  const {
-    mergeState,
-    subscribeMethods,
-    slotsElements,
-    customStyle,
-    className,
-  } = props;
-
-  const [popupVisible, _setPopupVisible] = useState(false);
-
-  useEffect(() => {
-    subscribeMethods({
-      setPopupVisible({ visible }) {
-        _setPopupVisible(!!visible);
-      },
-    });
-  }, [subscribeMethods]);
-
-  useEffect(() => {
-    mergeState({ visible: popupVisible });
-  }, [mergeState, popupVisible]);
+  const { controlled, popupVisible, ...cProps } = getComponentProps(props);
+  const { slotsElements, customStyle, className } = props;
 
   // two components in the array will be wrapped by span respectively
   // and arco does not support `array.length===1` think it is a bug
   // TODO only support arco componets slot now
-  const content = isArray(slotsElements.content) ? slotsElements.content[0] : slotsElements.content;
+  const content = isArray(slotsElements.content)
+    ? slotsElements.content[0]
+    : slotsElements.content;
 
   return controlled ? (
     <BaseTooltip
@@ -66,7 +45,7 @@ const exampleProperties: Static<typeof TooltipPropsSchema> = {
   position: "bottom",
   mini: false,
   unmountOnExit: true,
-  defaultPopupVisible: false,
+  popupVisible: false,
   popupHoverStay: true,
   blurToHide: true,
   disabled: false,
@@ -86,9 +65,7 @@ const options = {
   spec: {
     properties: TooltipPropsSchema,
     state: TooltipStateSchema,
-    methods: {
-      setPopupVisible: Type.String(),
-    } as Record<string, any>,
+    methods: {} as Record<string, any>,
     slots: ["content"],
     styleSlots: ["content"],
     events: [],

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

@@ -7,8 +7,8 @@ export const TooltipPropsSchema = {
     color: Type.Optional(Type.String()),
     position: Type.Optional(StringUnion(['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb'])),
     mini: Type.Optional(Type.Boolean()),
+    popupVisible:Type.Optional(Type.Boolean()),
     unmountOnExit: Type.Optional(Type.Boolean()),
-    defaultPopupVisible: Type.Optional(Type.Boolean()),
     popupHoverStay: Type.Boolean(),
     blurToHide: Type.Optional(Type.Boolean()),
     disabled: Type.Optional(Type.Boolean()),