From f78ce70b4a1f5aae90a9cc8511cda7f83da9ccab Mon Sep 17 00:00:00 2001 From: MrWindlike Date: Wed, 9 Feb 2022 11:50:31 +0800 Subject: [PATCH] Merge pull request #19 from webzard-io/component-improve refactor: improve some components --- packages/arco-lib/src/components/Cascader.tsx | 16 ++++++-- .../arco-lib/src/components/Pagination.tsx | 10 ++--- packages/arco-lib/src/components/Tooltip.tsx | 39 ++++--------------- .../arco-lib/src/generated/types/Tooltip.ts | 2 +- 4 files changed, 26 insertions(+), 41 deletions(-) diff --git a/packages/arco-lib/src/components/Cascader.tsx b/packages/arco-lib/src/components/Cascader.tsx index 17211488..e3e7b5c8 100644 --- a/packages/arco-lib/src/components/Cascader.tsx +++ b/packages/arco-lib/src/components/Cascader.tsx @@ -66,9 +66,18 @@ const CascaderImpl: ComponentImpl> = ( 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> = ( const onChange = (value: (string | string[])[]) => { _setValue(value); + callbackMap?.onChange?.(); }; return ( @@ -155,7 +165,7 @@ const options = { methods: {}, slots: ["content"], styleSlots: ["content"], - events: [], + events: ["onChange"], }, }; diff --git a/packages/arco-lib/src/components/Pagination.tsx b/packages/arco-lib/src/components/Pagination.tsx index da1c13fc..c39cea79 100644 --- a/packages/arco-lib/src/components/Pagination.tsx +++ b/packages/arco-lib/src/components/Pagination.tsx @@ -14,7 +14,7 @@ const PaginationStateSchema = Type.Object({ const PaginationImpl: ComponentImpl> = ( props ) => { - const { defaultCurrent, ...cProps } = getComponentProps(props); + const { callbackMap, defaultCurrent, ...cProps } = getComponentProps(props); const { customStyle, className, mergeState } = props; const [current, setCurrent] = useState(defaultCurrent || 0); @@ -23,12 +23,10 @@ const PaginationImpl: ComponentImpl> = ( 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"], }, }; diff --git a/packages/arco-lib/src/components/Tooltip.tsx b/packages/arco-lib/src/components/Tooltip.tsx index 03427d63..8ba03310 100644 --- a/packages/arco-lib/src/components/Tooltip.tsx +++ b/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> = ( 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 ? ( = { 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, + methods: {} as Record, slots: ["content"], styleSlots: ["content"], events: [], diff --git a/packages/arco-lib/src/generated/types/Tooltip.ts b/packages/arco-lib/src/generated/types/Tooltip.ts index 6fce4c69..f92706c6 100644 --- a/packages/arco-lib/src/generated/types/Tooltip.ts +++ b/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()),