From b78098db44eced254041ef890ede30a85f557f16 Mon Sep 17 00:00:00 2001 From: mengshang918 Date: Wed, 2 Mar 2022 13:10:04 +0800 Subject: [PATCH] feat: viewportConfig support function type --- .../components/Viewport/ActiveTools/index.tsx | 10 +++- .../Viewport/DripFormDragHoc/index.tsx | 6 +-- .../src/store/globalOptions/index.ts | 48 +++++++++++++++---- website/docs/generator/api/viewportConfig.md | 20 +++++++- .../generator\344\273\213\347\273\215.md" | 41 ++++++++-------- 5 files changed, 87 insertions(+), 38 deletions(-) diff --git a/packages/generator/src/components/Viewport/ActiveTools/index.tsx b/packages/generator/src/components/Viewport/ActiveTools/index.tsx index e0d61f7e..5cebcb6b 100644 --- a/packages/generator/src/components/Viewport/ActiveTools/index.tsx +++ b/packages/generator/src/components/Viewport/ActiveTools/index.tsx @@ -1,7 +1,13 @@ +/* + * @Author: jiangxiaowei + * @Date: 2022-03-02 13:04:51 + * @Last Modified by: jiangxiaowei + * @Last Modified time: 2022-03-02 13:04:51 + */ import React, { memo } from 'react' import { useRecoilValue } from 'recoil' import { useDeleteField } from '@generator/hooks' -import { viewportConfigAtom } from '@generator/store' +import { viewportConfigSelector } from '@generator/store' import Item from './Item' import cx from 'classnames' import style from './index.module.css' @@ -11,7 +17,7 @@ const ActiveTools = memo<{ isFirst: boolean }>(({ isFirst = false }) => { const deleteField = useDeleteField() - const { showDeleteIcon } = useRecoilValue(viewportConfigAtom) + const { showDeleteIcon } = useRecoilValue(viewportConfigSelector) return (
diff --git a/packages/generator/src/components/Viewport/DripFormDragHoc/index.tsx b/packages/generator/src/components/Viewport/DripFormDragHoc/index.tsx index 804d3225..f23e71de 100644 --- a/packages/generator/src/components/Viewport/DripFormDragHoc/index.tsx +++ b/packages/generator/src/components/Viewport/DripFormDragHoc/index.tsx @@ -3,7 +3,7 @@ * @Author: jiangxiaowei * @Date: 2021-10-09 14:28:24 * @Last Modified by: jiangxiaowei - * @Last Modified time: 2022-02-24 14:35:23 + * @Last Modified time: 2022-03-02 13:04:29 */ import React, { memo, useCallback, useMemo, useEffect, useState } from 'react' import { createPortal } from 'react-dom' @@ -16,7 +16,7 @@ import { closestEdgeAtom, allFieldAtom, curTypeAtom, - viewportConfigAtom, + viewportConfigSelector, } from '@generator/store' // import Placeholder from '../CustomComponents/Placeholder' import { useCanDrop } from '@generator/hooks' @@ -125,7 +125,7 @@ const DripFormDragHoc: FC = memo( [setDropRef] ) - const viewportConfig = useRecoilValue(viewportConfigAtom) + const viewportConfig = useRecoilValue(viewportConfigSelector) return ( <> diff --git a/packages/generator/src/store/globalOptions/index.ts b/packages/generator/src/store/globalOptions/index.ts index 6a32ea01..904f61c9 100644 --- a/packages/generator/src/store/globalOptions/index.ts +++ b/packages/generator/src/store/globalOptions/index.ts @@ -3,10 +3,10 @@ * @Author: jiangxiaowei * @Date: 2021-12-17 11:22:05 * @Last Modified by: jiangxiaowei - * @Last Modified time: 2022-02-24 14:39:07 + * @Last Modified time: 2022-03-02 13:05:11 */ -import { atom } from 'recoil' - +import { atom, selector } from 'recoil' +import { curTypeAtom, selectedAtom } from '../unclassified' // form-generator支持的配置 export type HeaderConfig = { // 是否展示header区域 @@ -29,12 +29,15 @@ export type HeaderConfig = { renderLeftHeader?: () => JSX.Element } -export type ViewportConfig = { - // 是否展示操作栏 默认true - showActionBar?: boolean - // 是否展示删除 默认true - showDeleteIcon?: boolean -} +export type ViewportConfigItem = + | boolean + | ((param: { type: string; selectedFieldKey: string | null }) => boolean) + +type ViewportConfigKey = 'showActionBar' | 'showDeleteIcon' + +export type ViewportConfig = Partial< + Record +> // 头部自定义配置 export const headerConfigAtom = atom({ @@ -50,11 +53,36 @@ export const headerConfigAtom = atom({ }, }) -// vieport区域配置 +// vieport区域配置（可能为函数或布尔值） export const viewportConfigAtom = atom({ key: 'viewportOptions', default: { + // 是否展示操作栏 默认true showActionBar: true, + // 是否展示删除 默认true showDeleteIcon: true, }, }) + +// vieport区域配置（布尔值） +export const viewportConfigSelector = selector< + Partial> +>({ + key: 'viewporConfigValue', + get: ({ get }) => { + const type = get(curTypeAtom) + const selectedFieldKey = get(selectedAtom) + const viewportConfig = get(viewportConfigAtom) + const viewportConfigValue: Record = {} + const getBoolean = (param: ViewportConfigItem): boolean => { + if (typeof param === 'function') { + return param({ selectedFieldKey, type }) + } + return param + } + Object.entries(viewportConfig).map(([key, value]) => { + viewportConfigValue[key] = getBoolean(value) + }) + return viewportConfigValue + }, +}) diff --git a/website/docs/generator/api/viewportConfig.md b/website/docs/generator/api/viewportConfig.md index ff3f17da..8094e58b 100644 --- a/website/docs/generator/api/viewportConfig.md +++ b/website/docs/generator/api/viewportConfig.md @@ -10,12 +10,23 @@ name: viewportConfig ```tsx type ViewportConfig = { // 是否展示操作栏 默认true - showActionBar?: boolean + showActionBar?: ViewportConfigItem // 是否展示删除 默认true - showDeleteIcon?: boolean + showDeleteIcon?: ViewportConfigItem } ``` +```tsx +type ViewportConfigItem = + | boolean + | ((param: { + //当前控件类型 + type: string + //当前选中的表单fieldkey + selectedFieldKey: string | null + }) => boolean) +``` + ## 例子 ```tsx @@ -28,6 +39,11 @@ const App = memo(() => { { + return type !== 'text' + }, + */ }} /> ) diff --git "a/website/docs/generator/start/generator\344\273\213\347\273\215.md" "b/website/docs/generator/start/generator\344\273\213\347\273\215.md" index 9ded25c4..2ff1c2d0 100644 --- "a/website/docs/generator/start/generator\344\273\213\347\273\215.md" +++ "b/website/docs/generator/start/generator\344\273\213\347\273\215.md" @@ -3,67 +3,66 @@ id: generator title: 介绍 --- -`@jdfed/form-generator`是drip-form的快速生成界面。 +`@jdfed/form-generator`是 drip-form 的快速生成界面。 ## 功能介绍 -* 快速搭建表单 -* 生成表单JSON数据 -* 导入JSON数据，预览表单 -* 配置校验 -* 自定义业务组件 +- 快速搭建 drip-form 表单 +- 生成表单 JSON 数据 +- 导入 JSON 数据，预览表单 +- 可扩展（头部配置、组件配置、viewport 配置、属性配置、校验配置） ## 区域介绍 -generator生成器分四个区域： +generator 生成器分四个区域： -* header +- header - header区可以导入json、编辑json、预览表单、导出json + header 区可以导入 json、编辑 json、预览表单、导出 json -* 组件区 +- 组件区 - 组件区包含generator支持拖拽的表单控件。 + 组件区包含 generator 支持拖拽的表单控件。 - * 表单组件 + - 表单组件 常见表单控件 - * 辅助组件 + - 辅助组件 非常见表单控件，用于展示文字等 - * 容器组件 + - 容器组件 根据数据类型选择对应容器 - * 数组容器 + - 数组容器 支持自增、元祖 - * 对象容器 + - 对象容器 支持折叠、分类展示表单 - * 业务组件 + - 业务组件 业务自定义组件，可根据业务自定义 -* 可视区 +- 可视区 实时查看组件区拖拽 -* 编辑区 +- 编辑区 编辑区可以编辑表单样式、表单校验 - * 属性配置 + - 属性配置 分为全局配置和表单配置 点击可视区空白区域为全局配置；点击选中可视区表单为表单配置 - * 校验配置 + - 校验配置 根据当前表单数据类型，配置数据校验