-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
43 changed files
with
1,577 additions
and
293 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import type { DrawerPropType } from '.'; | ||
|
|
||
| export const DrawerPropTypeApi: React.FC<DrawerPropType> = () => null; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import RhDrawer from '.'; | ||
| import { useRef } from 'react'; | ||
| import type { RhDrawerProps } from '.'; | ||
| import { message } from 'antd'; | ||
| import { ProFormText } from '@ant-design/pro-form'; | ||
|
|
||
| function Demo() { | ||
| // const [currentRow, setCurrentRow] = useState(); | ||
|
|
||
| const rhDrawerRef = useRef<any>(); | ||
|
|
||
| const DrawerProps: RhDrawerProps = { | ||
| text: '新建自定义参数', | ||
| title: '创建自定义参数', | ||
| // initialValues: currentRow, | ||
| onFinish: async (values) => { | ||
| console.log(values); | ||
| return await new Promise((resolve) => { | ||
| setTimeout(() => { | ||
| message.success('创建成功'); | ||
| resolve(true); | ||
| }, 1000); | ||
| }); | ||
| }, | ||
| }; | ||
| return ( | ||
| <div> | ||
| <RhDrawer ref={rhDrawerRef} {...DrawerProps}> | ||
| <ProFormText name="name" label="名称" /> | ||
| <ProFormText name="age" label="年龄" /> | ||
| </RhDrawer> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Demo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| --- | ||
| title: RhDrawer | ||
| sidemenu: false | ||
| --- | ||
|
|
||
| # RhDrawer | ||
|
|
||
| Drawer 组件，简易封装 | ||
|
|
||
| ## Demo | ||
|
|
||
| <code src="./demo.tsx"/> | ||
|
|
||
| <API src="./api.ts"/> | ||
|
|
||
| 其他 Api 见 [DrawerForm](https://procomponents.ant.design/components/modal-form) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| import type { DrawerFormProps } from '@ant-design/pro-form'; | ||
| import { DrawerForm } from '@ant-design/pro-form'; | ||
| import type { FormInstance } from 'antd'; | ||
| import { Button } from 'antd'; | ||
| import type { ReactNode } from 'react'; | ||
| import React, { | ||
| forwardRef, | ||
| useEffect, | ||
| useImperativeHandle, | ||
| useRef, | ||
| useState, | ||
| } from 'react'; | ||
|
|
||
| type RhDrawRef = React.Ref<{ | ||
| formRef: React.MutableRefObject<FormInstance<any> | undefined>; | ||
| setVisible: React.Dispatch<React.SetStateAction<boolean>>; | ||
| }>; | ||
|
|
||
| export type DrawerPropType = { | ||
| /** | ||
| * 抽屉的标题 | ||
| */ | ||
| text?: ReactNode; | ||
| /** | ||
| * 关闭回调 | ||
| */ | ||
| onCloseCallback?: (e: any) => any; | ||
| /** | ||
| * 提交数据时触发，内部校验了数据。 | ||
| */ | ||
| onFinish?: (e: any) => Promise<boolean>; | ||
| }; | ||
|
|
||
| export type RhDrawerProps = Omit<DrawerFormProps, 'onFinish'> & DrawerPropType; | ||
|
|
||
| function RhDrawer( | ||
| { | ||
| text, | ||
| children = '', | ||
| layout = 'vertical', | ||
| width = 480, | ||
| initialValues, | ||
| onFinish = () => Promise.resolve(false), | ||
| onCloseCallback = () => {}, | ||
| ...restProps | ||
| }: RhDrawerProps, | ||
| ref: RhDrawRef | ||
| ) { | ||
| const [visible, setVisible] = useState<boolean>(false); | ||
| const [loading, setLoading] = useState<boolean>(false); | ||
| const formRef = useRef<FormInstance>(); | ||
|
|
||
| useImperativeHandle(ref, () => { | ||
| return { | ||
| formRef, | ||
| setVisible, | ||
| }; | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (initialValues) { | ||
| formRef.current?.setFieldsValue(initialValues); | ||
| } | ||
| }, [initialValues]); | ||
|
|
||
| const open = () => { | ||
| formRef.current?.resetFields(); // 保证每次都能清空 | ||
| setVisible(true); | ||
| }; | ||
|
|
||
| const trigger: JSX.Element = | ||
| text && typeof text === 'string' ? ( | ||
| <Button type="primary" ghost onClick={open}> | ||
| {text} | ||
| </Button> | ||
| ) : ( | ||
| <div | ||
| style={{ display: 'inline-block', cursor: 'pointer' }} | ||
| onClick={open} | ||
| > | ||
| {text} | ||
| </div> | ||
| ); | ||
|
|
||
| // eslint-disable-next-line no-param-reassign | ||
| restProps.drawerProps = { | ||
| ...restProps.drawerProps, | ||
| maskClosable: false, | ||
| onClose: (e) => { | ||
| setVisible(false); | ||
| formRef.current?.resetFields(); | ||
| onCloseCallback(e); | ||
| }, | ||
| }; | ||
| const drawerFormProps: DrawerFormProps = { | ||
| formRef, | ||
| visible, | ||
| layout, | ||
| width, | ||
| labelCol: { span: 6 }, | ||
| trigger, | ||
| submitter: { | ||
| render: () => [ | ||
| <Button | ||
| key="close" | ||
| onClick={() => { | ||
| setVisible(false); | ||
| onCloseCallback(false); | ||
| formRef.current?.resetFields(); | ||
| }} | ||
| > | ||
| 取消 | ||
| </Button>, | ||
| <Button | ||
| key="save" | ||
| type="primary" | ||
| onClick={async () => { | ||
| formRef.current?.submit(); | ||
| }} | ||
| loading={loading} | ||
| > | ||
| 确定 | ||
| </Button>, | ||
| ], | ||
| }, | ||
| onFinish: async () => { | ||
| const values = await formRef.current?.validateFields(); | ||
| setLoading(true); | ||
| try { | ||
| const canClose = await onFinish(values); | ||
| // 操作成功才会清除 | ||
| if (canClose) { | ||
| formRef.current?.resetFields(); | ||
| setVisible(false); | ||
| } | ||
| setLoading(false); | ||
| } catch { | ||
| // formRef.current?.resetFields(); | ||
| setLoading(false); | ||
| } | ||
| }, | ||
| ...restProps, | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <DrawerForm | ||
| {...drawerFormProps} | ||
| onVisibleChange={(v) => { | ||
| if (!v) { | ||
| formRef.current?.resetFields(); | ||
| onCloseCallback(v); | ||
| } | ||
| }} | ||
| > | ||
| {children} | ||
| </DrawerForm> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default forwardRef(RhDrawer); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { useState } from 'react'; | ||
| import RhEditableLabel from '.'; | ||
|
|
||
| function Demo() { | ||
| const [value, setValue] = useState('LeekHub'); | ||
| return ( | ||
| <div> | ||
| <RhEditableLabel | ||
| value={value} | ||
| beforeUpdate={async () => { | ||
| return Promise.resolve(true); | ||
| }} | ||
| onChange={(v) => { | ||
| setValue(v); | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Demo; |
Oops, something went wrong.