diff --git a/packages/dooringx-example/src/plugin/formComponents/switch.tsx b/packages/dooringx-example/src/plugin/formComponents/switch.tsx new file mode 100644 index 0000000..5d7eb23 --- /dev/null +++ b/packages/dooringx-example/src/plugin/formComponents/switch.tsx @@ -0,0 +1,51 @@ +/* + * @Author: yehuozhili + * @Date: 2021-08-03 10:45:06 + * @LastEditors: yehuozhili + * @LastEditTime: 2021-08-03 10:45:07 + * @FilePath: \dooringx\packages\dooringx-example\src\plugin\formComponents\switch.tsx + */ +import React, { useMemo, memo } from 'react'; +import { Switch, Row, Col } from 'antd'; +import { deepCopy, UserConfig } from 'dooringx-lib'; +import { FormMap } from '../formTypes'; +import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes'; +import { IBlockType } from 'dooringx-lib/dist/core/store/storetype'; + +interface MSwitchProps { + data: CreateOptionsRes; + current: IBlockType; + config: UserConfig; +} + +const MSwitch = (props: MSwitchProps) => { + const option = useMemo(() => { + return props.data?.option || {}; + }, [props.data]); + const store = props.config.getStore(); + return ( + + + {(option as any)?.label || '文字'}: + + + { + const receive = (option as any).receive; + const clonedata = deepCopy(store.getData()); + const newblock = clonedata.block.map((v: IBlockType) => { + if (v.id === props.current.id) { + v.props[receive] = checked; + } + return v; + }); + store.setData({ ...clonedata, block: [...newblock] }); + }} + > + + + ); +}; + +export default memo(MSwitch); diff --git a/packages/dooringx-example/src/plugin/formTypes.ts b/packages/dooringx-example/src/plugin/formTypes.ts index 4d9728b..7526054 100644 --- a/packages/dooringx-example/src/plugin/formTypes.ts +++ b/packages/dooringx-example/src/plugin/formTypes.ts @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-07-07 14:31:20 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-10 17:21:04 + * @LastEditTime: 2021-08-03 10:45:52 * @FilePath: \dooringx\packages\dooringx-example\src\plugin\formTypes.ts */ export interface FormBaseType { @@ -14,8 +14,14 @@ export interface FormInputType extends FormBaseType { } export interface FormActionButtonType {} export interface FormAnimateControlType {} + +export interface FormSwitchType extends FormBaseType { + label: string; + value: boolean; +} export interface FormMap { input: FormInputType; actionButton: FormActionButtonType; animateControl: FormAnimateControlType; + switch: FormSwitchType; } diff --git a/packages/dooringx-example/src/plugin/index.tsx b/packages/dooringx-example/src/plugin/index.tsx index 51dc9fe..73d6653 100644 --- a/packages/dooringx-example/src/plugin/index.tsx +++ b/packages/dooringx-example/src/plugin/index.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-02-27 21:33:36 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-10 19:32:16 + * @LastEditTime: 2021-08-03 11:05:24 * @FilePath: \dooringx\packages\dooringx-example\src\plugin\index.tsx */ @@ -14,16 +14,6 @@ import { functionMap } from './functionMap'; import { Formmodules } from './formComponentModules'; const LeftRegistMap: LeftRegistComponentMapItem[] = [ - // build 时如果用代码分割会生成多个文件,这样就不能生成多类型文件。 - // 建议基础包全部不分割。后面插件包可以用webpack的特性,所以插件包用新脚手架制作 - // 基础包不独立出去的原因是部分左侧分类起始值最好规定住 - // { - // type: 'xxa', - // component: 'asyncCo', - // img: '', - // urlFn: () => import('./registComponents/asyncCo'), - // displayName:'xxx' - // }, { type: 'basic', component: 'button', @@ -66,6 +56,14 @@ export const defaultConfig: Partial = { ), }, + { + type: 'fn', + icon: ( +
+ 函数 +
+ ), + }, { type: 'actions', icon: ( diff --git a/packages/dooringx-example/src/plugin/registComponents/button.tsx b/packages/dooringx-example/src/plugin/registComponents/button.tsx index 8eac169..649949d 100644 --- a/packages/dooringx-example/src/plugin/registComponents/button.tsx +++ b/packages/dooringx-example/src/plugin/registComponents/button.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-07-07 14:35:38 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-27 10:46:07 + * @LastEditTime: 2021-08-03 11:01:06 * @FilePath: \dooringx\packages\dooringx-example\src\plugin\registComponents\button.tsx */ @@ -25,7 +25,6 @@ function ButtonTemp(pr: ComponentRenderConfigProps) { useDynamicAddEventCenter(pr, `${pr.data.id}-init`, '初始渲染时机'); //注册名必须带id 约定! useDynamicAddEventCenter(pr, `${pr.data.id}-click`, '点击执行时机'); - useEffect(() => { // 模拟抛出事件 if (pr.context === 'preview') { @@ -34,38 +33,42 @@ function ButtonTemp(pr: ComponentRenderConfigProps) { }, [eventCenter, pr.config, pr.context, pr.data.id]); const [text, setText] = useState(''); + const op1 = props.op1; useEffect(() => { - const functionCenter = eventCenter.getFunctionCenter(); - const unregist = functionCenter.register( - `${pr.data.id}+改变文本函数`, - async (ctx, next, config, args: any, _eventList, iname) => { - const userSelect = iname.data; - const ctxVal = changeUserValue( - userSelect['改变文本数据源'], - args, - '_changeval', - config, - ctx - ); - const text = ctxVal[0]; - setText(text); - next(); - }, - [ - { - name: '改变文本数据源', - data: ['ctx', 'input', 'dataSource'], - options: { - receive: '_changeval', - multi: false, - }, + let unregist = () => {}; + if (op1) { + const functionCenter = eventCenter.getFunctionCenter(); + unregist = functionCenter.register( + `${pr.data.id}+改变文本函数`, + async (ctx, next, config, args: any, _eventList, iname) => { + const userSelect = iname.data; + const ctxVal = changeUserValue( + userSelect['改变文本数据源'], + args, + '_changeval', + config, + ctx + ); + const text = ctxVal[0]; + setText(text); + next(); }, - ] - ); + [ + { + name: '改变文本数据源', + data: ['ctx', 'input', 'dataSource'], + options: { + receive: '_changeval', + multi: false, + }, + }, + ] + ); + } return () => { unregist(); }; - }, []); + }, [op1]); return (