From a49e7d0d53c66095e196aa6b5b7e965f791e9a0e Mon Sep 17 00:00:00 2001 From: xzdry Date: Sun, 24 Apr 2022 18:42:08 +0800 Subject: [PATCH] feat: add events to mentions & add defaultOpen property to modal --- packages/arco-lib/src/components/Mentions.tsx | 5 ++- packages/arco-lib/src/components/Menu.tsx | 16 +------- packages/arco-lib/src/components/Modal.tsx | 5 ++- packages/arco-lib/src/generated/types/Link.ts | 1 + packages/arco-lib/src/generated/types/Menu.ts | 41 ++++++++++++++++--- .../arco-lib/src/generated/types/Modal.ts | 4 ++ 6 files changed, 47 insertions(+), 25 deletions(-) diff --git a/packages/arco-lib/src/components/Mentions.tsx b/packages/arco-lib/src/components/Mentions.tsx index 43cc893a..82d78c70 100644 --- a/packages/arco-lib/src/components/Mentions.tsx +++ b/packages/arco-lib/src/components/Mentions.tsx @@ -37,7 +37,7 @@ const options = { methods: {}, slots: [], styleSlots: ['content'], - events: ['onChange', 'onClear', 'onPressEnter'], + events: ['onChange', 'onClear', 'onPressEnter', 'onFocus', 'onBlur'], }, }; @@ -61,7 +61,6 @@ export const Mentions = implementRuntimeComponent(options)(props => { }; const onPressEnter = () => { - // TODO complete onPressEnter methods callbackMap?.onPressEnter?.(); }; @@ -71,6 +70,8 @@ export const Mentions = implementRuntimeComponent(options)(props => { onPressEnter={onPressEnter} onClear={onClear} className={css(customStyle?.content)} + onBlur={() => callbackMap?.onBlur?.()} + onFocus={() => callbackMap?.onFocus?.()} onChange={onChange} {...cProps} value={value} diff --git a/packages/arco-lib/src/components/Menu.tsx b/packages/arco-lib/src/components/Menu.tsx index f5b4c2a2..bbad40d0 100644 --- a/packages/arco-lib/src/components/Menu.tsx +++ b/packages/arco-lib/src/components/Menu.tsx @@ -5,24 +5,9 @@ import { Type, Static } from '@sinclair/typebox'; import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper'; import { MenuPropsSpec as BaseMenuPropsSpec } from '../generated/types/Menu'; import { useEffect, useState } from 'react'; -import { Category } from '../constants/category'; const MenuPropsSpec = Type.Object({ ...BaseMenuPropsSpec, - defaultActiveKey: Type.String({ - title: 'Default Active Key', - category: Category.Basic, - }), - items: Type.Array( - Type.Object({ - key: Type.String(), - text: Type.String(), - disabled: Type.Optional(Type.Boolean()), - }), - { - category: Category.Basic, - } - ), }); const MenuStateSpec = Type.Object({ activeKey: Type.Optional(Type.String()), @@ -38,6 +23,7 @@ const exampleProperties: Static = { { key: 'key1', text: 'item1' }, { key: 'key2', text: 'item2' }, ], + ellipsis:false, defaultActiveKey: 'key1', }; diff --git a/packages/arco-lib/src/components/Modal.tsx b/packages/arco-lib/src/components/Modal.tsx index dc7e9ca2..97cccdb7 100644 --- a/packages/arco-lib/src/components/Modal.tsx +++ b/packages/arco-lib/src/components/Modal.tsx @@ -18,6 +18,7 @@ const exampleProperties: Static = { closable: true, maskClosable: true, confirmLoading: false, + defaultOpen:true }; export const Modal = implementRuntimeComponent({ version: 'arco/v1', @@ -43,8 +44,8 @@ export const Modal = implementRuntimeComponent({ }, })(props => { const { subscribeMethods, slotsElements, customStyle, callbackMap } = props; - const { getElement, title, ...cProps } = getComponentProps(props); - const [visible, setVisible] = useState(true); + const { getElement, title, defaultOpen, ...cProps } = getComponentProps(props); + const [visible, setVisible] = useState(defaultOpen); const contentRef = useRef(null); const afterOpen = () => { diff --git a/packages/arco-lib/src/generated/types/Link.ts b/packages/arco-lib/src/generated/types/Link.ts index 9fc72d92..e65ae3f4 100644 --- a/packages/arco-lib/src/generated/types/Link.ts +++ b/packages/arco-lib/src/generated/types/Link.ts @@ -16,6 +16,7 @@ export const LinkPropsSpec = { hoverable: Type.Boolean({ title: 'Hoverable', category: Category.Style, + description: 'Whether to hide background when hover' }), status: StringUnion(['success', 'warning', 'error'], { title: 'Status', diff --git a/packages/arco-lib/src/generated/types/Menu.ts b/packages/arco-lib/src/generated/types/Menu.ts index b290d5fa..7f509ea3 100644 --- a/packages/arco-lib/src/generated/types/Menu.ts +++ b/packages/arco-lib/src/generated/types/Menu.ts @@ -8,19 +8,48 @@ export const MenuPropsSpec = { // title: 'theme', // category: Category.Style, // }), - mode: StringUnion(['vertical', 'horizontal']), + mode: StringUnion(['vertical', 'horizontal'], { + title: 'Mode', + category: Category.Basic + }), + items: Type.Array( + Type.Object({ + key: Type.String(), + text: Type.String(), + disabled: Type.Optional(Type.Boolean()), + }), + { + title:'Items', + category: Category.Basic, + } + ), + defaultActiveKey: Type.String({ + title: 'Default Active Key', + category: Category.Basic, + }), autoOpen: Type.Boolean({ + title: 'Auto Open', description: 'Whether to expand all multi-level menus by default', + category: Category.Basic }), collapse: Type.Boolean({ + title: 'Collapse', category: Category.Style, }), // accordion: Type.Boolean({ // category: Category.Style, // }), - // ellipsis: Type.Boolean({ - // description: 'Whether the horizontal menu automatically collapses when it overflows', - // }), - autoScrollIntoView: Type.Boolean(), - hasCollapseButton: Type.Boolean(), + ellipsis: Type.Boolean({ + title: 'Ellipsis', + description: 'Whether the horizontal menu automatically collapses when it overflows', + category: Category.Basic + }), + autoScrollIntoView: Type.Boolean({ + title: 'Auto Scroll Into View', + category: Category.Basic + }), + hasCollapseButton: Type.Boolean({ + title: 'Collapse Button', + category: Category.Basic + }), }; diff --git a/packages/arco-lib/src/generated/types/Modal.ts b/packages/arco-lib/src/generated/types/Modal.ts index 385b0198..2f447e80 100644 --- a/packages/arco-lib/src/generated/types/Modal.ts +++ b/packages/arco-lib/src/generated/types/Modal.ts @@ -7,6 +7,10 @@ export const ModalPropsSpec = { category: Category.Basic, weight: 10, }), + defaultOpen:Type.Boolean({ + title:'Default Open', + category: Category.Behavior, + }), mask: Type.Boolean({ title: 'Mask', category: Category.Style,