Добавлен компонент "Кнопка с всплывающей формой"

2022-02-22 15:29:50 +05:00 · 2022-02-22 15:29:50 +05:00 · 7a33c5ef2f
commit 7a33c5ef2f
parent 168c2320ab
1 changed files with 50 additions and 0 deletions
--- a/src/components/Poprompt.tsx
+++ b/src/components/Poprompt.tsx
@ -0,0 +1,50 @@
+import { memo, ReactNode, useState } from 'react'
+import { Button, ButtonProps, Form, FormProps, Popover, PopoverProps } from 'antd'
+
+export type PopromptProps = PopoverProps & {
+    children?: ReactNode
+    footer?: ReactNode
+    text?: string
+    onDone?: (values: any) => void
+    formProps?: FormProps
+    buttonProps?: ButtonProps
+}
+
+export const Poprompt = memo<PopromptProps>(({ formProps, buttonProps, footer, children, onDone, text, ...other }) => {
+    const [visible, setVisible] = useState<boolean>(false)
+
+    const onFormFinish = (values: any) => {
+        setVisible(false)
+        onDone?.(values)
+    }
+
+    return (
+        <Popover
+            content={(
+                <Form
+                    onFinish={onFormFinish}
+                    autoComplete={'off'}
+                    {...formProps}
+                >
+                    {children}
+                    <Form.Item style={{ marginBottom: 0 }}>
+                        {footer ?? (
+                            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                                <Button htmlType={'reset'} onClick={() => setVisible(false)}>Отмена</Button>
+                                <Button type={'primary'} htmlType={'submit'} style={{ marginLeft: '8px' }}>ОК</Button>
+                            </div>
+                        )}
+                    </Form.Item>
+                </Form>
+            )}
+            trigger={'click'}
+            {...other}
+            visible={visible}
+            onVisibleChange={(visible) => setVisible(visible)}
+        >
+            <Button {...buttonProps}>{text}</Button>
+        </Popover>
+    )
+})
+
+export default Poprompt