diff --git a/package.json b/package.json index f5bfe38..3980335 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "umi": "^3.2.19", "video-react": "^0.14.1", "xlsx": "^0.16.7", + "yh-react-popover": "^0.2.0", "yorkie": "^2.0.0", "zarm": "^2.5.1" }, diff --git a/src/components/PanelComponents/FormEditor/index.tsx b/src/components/PanelComponents/FormEditor/index.tsx index 0d326cc..3fddb5c 100644 --- a/src/components/PanelComponents/FormEditor/index.tsx +++ b/src/components/PanelComponents/FormEditor/index.tsx @@ -1,4 +1,4 @@ -import React, { memo, useEffect } from 'react'; +import React, { memo, RefObject, useEffect } from 'react'; import { Form, Select, InputNumber, Input, Switch, Radio, Button } from 'antd'; import Upload from '../Upload'; import DataList from '../DataList'; @@ -33,10 +33,11 @@ interface FormEditorProps { onDel: Function; defaultValue: { [key: string]: any }; config: Array; + rightPannelRef: RefObject; } const FormEditor = (props: FormEditorProps) => { - const { config, defaultValue, onSave, onDel, uid } = props; + const { config, defaultValue, onSave, onDel, uid, rightPannelRef } = props; const onFinish = (values: Store) => { onSave && onSave(values); }; @@ -157,7 +158,7 @@ const FormEditor = (props: FormEditorProps) => { )} {item.type === 'FormItems' && ( - + )} diff --git a/src/components/PanelComponents/FormItems/FormItems.tsx b/src/components/PanelComponents/FormItems/FormItems.tsx index 52afbc0..4b1b97e 100644 --- a/src/components/PanelComponents/FormItems/FormItems.tsx +++ b/src/components/PanelComponents/FormItems/FormItems.tsx @@ -1,4 +1,4 @@ -import React, { memo, useState } from 'react'; +import React, { memo, RefObject, useCallback, useEffect, useState } from 'react'; import BaseForm from '../../BasicShop/BasicComponents/Form/BaseForm'; import BasePopoverForm from '../../BasicShop/BasicComponents/Form/BasePopoverForm'; import EditorModal from './EditorModal'; @@ -6,8 +6,8 @@ import { MinusCircleFilled, EditFilled, PlusOutlined } from '@ant-design/icons'; import styles from './formItems.less'; import { baseFormUnion, TFormItemsDefaultType } from '../FormEditor/types'; import { uuid } from '@/utils/tool'; -import { Button, Popover } from 'antd'; - +import { Button } from 'antd'; +import MyPopover from 'yh-react-popover'; // import { Popconfirm } from 'antd'; const formTpl: TFormItemsDefaultType = [ @@ -60,24 +60,27 @@ interface FormItemsProps { formList?: TFormItemsDefaultType; onChange?: (v: TFormItemsDefaultType) => void; data: any; + rightPannelRef: RefObject; } const FormItems = (props: FormItemsProps) => { - const { formList, onChange } = props; + const { formList, onChange, rightPannelRef } = props; const [formData, setFormData] = useState(formList || []); const [visible, setVisible] = useState(false); const [curItem, setCurItem] = useState(); - const [isFormTplVisible, setFormTplVisible] = useState(false); + const [force, setforce] = useState<{ force: Function }>({ + force: () => {}, + }); const handleAddItem = (item: baseFormUnion) => { let tpl = formTpl.find(v => v.type === item.type); let newData = [...formData, { ...tpl!, id: uuid(6, 10) }]; setFormData(newData); onChange && onChange(newData); + force.force(); }; const handleEditItem = (item: baseFormUnion) => { - console.log(item); setVisible(true); setCurItem(item); }; @@ -94,9 +97,28 @@ const FormItems = (props: FormItemsProps) => { onChange && onChange(newData); setVisible(false); }; - const handleVisibleChange = (visible: boolean) => { - setFormTplVisible(visible); - }; + + const callback = useCallback((v: Function) => { + console.log(v); + setforce({ force: v }); + }, []); + + useEffect(() => { + let listenner: (e: Event) => void; + if (rightPannelRef.current) { + listenner = () => { + force.force(); + }; + rightPannelRef.current.addEventListener('scroll', listenner); + } + return () => { + if (rightPannelRef.current) { + // eslint-disable-next-line react-hooks/exhaustive-deps + rightPannelRef.current.removeEventListener('scroll', listenner); + } + }; + }, [force, rightPannelRef]); + return (
表单控件
@@ -122,7 +144,7 @@ const FormItems = (props: FormItemsProps) => { ); })}
-
@@ -148,19 +170,15 @@ const FormItems = (props: FormItemsProps) => { {/* setFormTplVisible(false)}>Close */} } - color="#4A4A4A" - overlayStyle={{ width: '200px' }} - // title="表单模板" - trigger="click" - placement="left" - visible={isFormTplVisible} - autoAdjustOverflow - onVisibleChange={handleVisibleChange} + directions={'LB'} + innerConstDomStyle={{ display: 'block' }} + constDomStyle={{ display: 'block' }} + callback={callback} > - - +
diff --git a/src/pages/editor/Container.tsx b/src/pages/editor/Container.tsx index 19138f5..b6ab871 100644 --- a/src/pages/editor/Container.tsx +++ b/src/pages/editor/Container.tsx @@ -223,11 +223,12 @@ const Container = (props: { // ratioSpeed: { x: 1.2, y: 1.2 }, // intervalDelay: 5, // }); - + const ref = useRef(null); const renderRight = useMemo(() => { if (context.theme === 'h5') { return (
{/*
@@ -277,6 +279,7 @@ const Container = (props: { defaultValue={curPoint.item.config} onSave={handleFormSave} onDel={handleDel} + rightPannelRef={ref} /> ) : ( diff --git a/src/pages/editor/components/Header/index.tsx b/src/pages/editor/components/Header/index.tsx index f5847c7..22240ae 100644 --- a/src/pages/editor/components/Header/index.tsx +++ b/src/pages/editor/components/Header/index.tsx @@ -1,5 +1,5 @@ import React, { useRef, memo, useContext, useState, useEffect } from 'react'; -import { Button, Input, Popover, Modal, Select } from 'antd'; +import { Button, Input, Modal, Select } from 'antd'; import { ArrowLeftOutlined, MobileOutlined, @@ -19,6 +19,7 @@ import req from '@/utils/req'; import Code from '@/assets/code.png'; import styles from './index.less'; import { dooringContext } from '@/layouts'; +import MyPopover from 'yh-react-popover'; const { confirm } = Modal; @@ -216,7 +217,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => { > - + - +