diff --git a/src/components/Carousel/index.less b/src/components/BasicShop/BasicComponents/Carousel/index.less similarity index 98% rename from src/components/Carousel/index.less rename to src/components/BasicShop/BasicComponents/Carousel/index.less index 054a30a..44c9f46 100644 --- a/src/components/Carousel/index.less +++ b/src/components/BasicShop/BasicComponents/Carousel/index.less @@ -7,4 +7,4 @@ img { width: 100%; } -} \ No newline at end of file +} diff --git a/src/components/Carousel/index.tsx b/src/components/BasicShop/BasicComponents/Carousel/index.tsx similarity index 94% rename from src/components/Carousel/index.tsx rename to src/components/BasicShop/BasicComponents/Carousel/index.tsx index 7140293..fc173dc 100644 --- a/src/components/Carousel/index.tsx +++ b/src/components/BasicShop/BasicComponents/Carousel/index.tsx @@ -1,7 +1,7 @@ +import { CarouselConfigType } from '@/components/DynamicEngine/schema'; import React, { memo, PropsWithChildren } from 'react'; import { Carousel } from 'zarm'; import styles from './index.less'; -import { CarouselConfigType } from '../DynamicEngine/schema'; interface CarouselTypes extends CarouselConfigType { isTpl: boolean; diff --git a/src/components/BasicShop/BasicComponents/Carousel/schema.ts b/src/components/BasicShop/BasicComponents/Carousel/schema.ts new file mode 100644 index 0000000..0d55d43 --- /dev/null +++ b/src/components/BasicShop/BasicComponents/Carousel/schema.ts @@ -0,0 +1,71 @@ +const Carousel = { + editData: [ + { + key: 'direction', + name: '方向', + type: 'Radio', + range: [ + { + key: 'down', + text: '从上到下', + }, + { + key: 'left', + text: '从左到右', + }, + ], + }, + { + key: 'swipeable', + name: '是否可拖拽', + type: 'Switch', + }, + { + key: 'autoPlay', + name: '是否自动播放', + type: 'Switch', + }, + { + key: 'imgList', + name: '图片列表', + type: 'DataList', + }, + ], + config: { + direction: 'left', + swipeable: false, + autoPlay: false, + imgList: [ + { + id: '1', + title: '趣谈小课1', + desc: '致力于打造优质小课程', + link: 'xxxxx', + imgUrl: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/1_1740bd7c3dc.png', + }, + ], + }, + { + id: '2', + title: '趣谈小课1', + desc: '致力于打造优质小课程', + link: 'xxxxx', + imgUrl: [ + { + uid: '001', + name: 'image.png', + status: 'done', + url: 'http://io.nainor.com/uploads/2_1740bd8d525.png', + }, + ], + }, + ], + tplImg: 'http://io.nainor.com/uploads/carousal_17442e1420f.png', + }, +}; +export default Carousel; diff --git a/src/components/BasicShop/BasicComponents/Footer/index.tsx b/src/components/BasicShop/BasicComponents/Footer/index.tsx new file mode 100644 index 0000000..898457f --- /dev/null +++ b/src/components/BasicShop/BasicComponents/Footer/index.tsx @@ -0,0 +1,21 @@ +import { FooterConfigType } from '@/components/DynamicEngine/schema'; +import React, { memo } from 'react'; +const Footer = memo((props: FooterConfigType) => { + const { bgColor, text, color, align, fontSize, height } = props; + return ( + + ); +}); + +export default Footer; diff --git a/src/components/Form/BaseForm.js b/src/components/BasicShop/BasicComponents/Form/BaseForm.js similarity index 98% rename from src/components/Form/BaseForm.js rename to src/components/BasicShop/BasicComponents/Form/BaseForm.js index 277dd07..dd63d0b 100644 --- a/src/components/Form/BaseForm.js +++ b/src/components/BasicShop/BasicComponents/Form/BaseForm.js @@ -1,6 +1,6 @@ import { Input, Cell, DateSelect, Radio, Select } from 'zarm'; import styles from './baseForm.less'; - +import React from 'react'; // 维护表单控件， 提高form渲染性能 const BaseForm = { Text: props => { diff --git a/src/components/Form/EditorModal.js b/src/components/BasicShop/BasicComponents/Form/EditorModal.js similarity index 100% rename from src/components/Form/EditorModal.js rename to src/components/BasicShop/BasicComponents/Form/EditorModal.js diff --git a/src/components/Form/FormItems.js b/src/components/BasicShop/BasicComponents/Form/FormItems.js similarity index 100% rename from src/components/Form/FormItems.js rename to src/components/BasicShop/BasicComponents/Form/FormItems.js diff --git a/src/components/Form/baseForm.less b/src/components/BasicShop/BasicComponents/Form/baseForm.less similarity index 100% rename from src/components/Form/baseForm.less rename to src/components/BasicShop/BasicComponents/Form/baseForm.less diff --git a/src/components/Form/formItems.less b/src/components/BasicShop/BasicComponents/Form/formItems.less similarity index 100% rename from src/components/Form/formItems.less rename to src/components/BasicShop/BasicComponents/Form/formItems.less diff --git a/src/components/Form/index.js b/src/components/BasicShop/BasicComponents/Form/index.js similarity index 100% rename from src/components/Form/index.js rename to src/components/BasicShop/BasicComponents/Form/index.js diff --git a/src/components/Form/index.less b/src/components/BasicShop/BasicComponents/Form/index.less similarity index 100% rename from src/components/Form/index.less rename to src/components/BasicShop/BasicComponents/Form/index.less diff --git a/src/components/BasicShop/BasicComponents/Header/index.less b/src/components/BasicShop/BasicComponents/Header/index.less new file mode 100644 index 0000000..0abe64b --- /dev/null +++ b/src/components/BasicShop/BasicComponents/Header/index.less @@ -0,0 +1,23 @@ +.header { + box-sizing: content-box; + padding: 3px 12px; + display: flex; + align-items: center; + height: 50px; + background-color: #000; + .logo { + margin-right: 10px; + max-width: 160px; + max-height: 46px; + height: 46px; + overflow: hidden; + img { + height: 100%; + object-fit: contain; + } + } + .title { + font-size: 20px; + color: #fff; + } +} diff --git a/src/components/BasicShop/BasicComponents/Header/index.tsx b/src/components/BasicShop/BasicComponents/Header/index.tsx new file mode 100644 index 0000000..16badd3 --- /dev/null +++ b/src/components/BasicShop/BasicComponents/Header/index.tsx @@ -0,0 +1,20 @@ +import { memo } from 'react'; +import styles from './index.less'; +import React from 'react'; +import { HeaderConfigType } from '@/components/DynamicEngine/schema'; + +const Header = memo((props: HeaderConfigType) => { + const { bgColor, logo, logoText, fontSize, color } = props; + return ( +
+
+ {logoText} +
+
+ {logoText} +
+
+ ); +}); + +export default Header; diff --git a/src/components/Icon/icon.ts b/src/components/BasicShop/BasicComponents/Icon/icon.ts similarity index 100% rename from src/components/Icon/icon.ts rename to src/components/BasicShop/BasicComponents/Icon/icon.ts diff --git a/src/components/Icon/index.tsx b/src/components/BasicShop/BasicComponents/Icon/index.tsx similarity index 100% rename from src/components/Icon/index.tsx rename to src/components/BasicShop/BasicComponents/Icon/index.tsx diff --git a/src/components/BasicShop/BasicComponents/Icon/schema.ts b/src/components/BasicShop/BasicComponents/Icon/schema.ts new file mode 100644 index 0000000..75e5569 --- /dev/null +++ b/src/components/BasicShop/BasicComponents/Icon/schema.ts @@ -0,0 +1,42 @@ +export type IconTypes = + | 'AccountBookTwoTone' + | 'AlertTwoTone' + | 'ApiTwoTone' + | 'AppstoreTwoTone' + | 'AudioTwoTone' + | 'BankTwoTone' + | 'BellTwoTone' + | 'BookTwoTone' + | 'BugTwoTone' + | 'BuildTwoTone' + | 'BulbTwoTone' + | 'CalculatorTwoTone' + | 'CalendarTwoTone' + | 'CameraTwoTone' + | 'CarTwoTone' + | 'CarryOutTwoTone' + | 'CiCircleTwoTone' + | 'CloudTwoTone' + | 'CodeTwoTone' + | 'CrownTwoTone' + | 'CustomerServiceTwoTone' + | 'DollarCircleTwoTone' + | 'EnvironmentTwoTone' + | 'ExperimentTwoTone' + | 'FireTwoTone' + | 'GiftTwoTone' + | 'InsuranceTwoTone' + | 'LikeTwoTone' + | 'LockTwoTone' + | 'MailTwoTone' + | 'MessageTwoTone' + | 'PhoneTwoTone' + | 'PictureTwoTone' + | 'PlaySquareTwoTone' + | 'RedEnvelopeTwoTone' + | 'ShopTwoTone' + | 'TrademarkCircleTwoTone' + | 'StarTwoTone' + | 'SafetyCertificateTwoTone' + | 'SettingTwoTone' + | 'RocketTwoTone'; diff --git a/src/components/BasicShop/BasicComponents/Image/index.tsx b/src/components/BasicShop/BasicComponents/Image/index.tsx new file mode 100644 index 0000000..054b369 --- /dev/null +++ b/src/components/BasicShop/BasicComponents/Image/index.tsx @@ -0,0 +1,12 @@ +import { ImageConfigType } from '@/components/DynamicEngine/schema'; +import React, { memo } from 'react'; +const Image = memo((props: ImageConfigType) => { + const { imgUrl, round = 0 } = props; + return ( +
+ +
+ ); +}); + +export default Image; diff --git a/src/components/BasicShop/BasicComponents/List/index.less b/src/components/BasicShop/BasicComponents/List/index.less new file mode 100644 index 0000000..e75a0a3 --- /dev/null +++ b/src/components/BasicShop/BasicComponents/List/index.less @@ -0,0 +1,19 @@ +.list { + margin: 20px auto; + width: 94%; + .sourceList { + .sourceItem { + display: flex; + align-items: center; + margin-bottom: 16px; + .imgWrap { + } + .content { + margin-left: 12px; + .tit { + line-height: 2; + } + } + } + } +} diff --git a/src/components/BasicShop/BasicComponents/List/index.tsx b/src/components/BasicShop/BasicComponents/List/index.tsx new file mode 100644 index 0000000..5cd0cf0 --- /dev/null +++ b/src/components/BasicShop/BasicComponents/List/index.tsx @@ -0,0 +1,51 @@ +import { ListConfigType } from '@/components/DynamicEngine/schema'; +import React, { memo } from 'react'; +import styles from './index.less'; +const List = memo((props: ListConfigType) => { + const { round, sourceData, imgSize, fontSize, color } = props; + return ( +
+
+ {sourceData.map((item, i) => { + return ( +
+
+ {item.desc} +
+
+ + {item.title} +
+ {item.desc} +
+ +
+
+ ); + })} +
+
+ ); +}); + +export default List; diff --git a/src/components/Color/index.less b/src/components/BasicShop/BasicComponents/LongText/index.less similarity index 100% rename from src/components/Color/index.less rename to src/components/BasicShop/BasicComponents/LongText/index.less diff --git a/src/components/BasicShop/BasicComponents/LongText/index.tsx b/src/components/BasicShop/BasicComponents/LongText/index.tsx new file mode 100644 index 0000000..f8f6d8f --- /dev/null +++ b/src/components/BasicShop/BasicComponents/LongText/index.tsx @@ -0,0 +1,15 @@ +import { LongTextConfigType } from '@/components/DynamicEngine/schema'; +import React, { memo } from 'react'; +import styles from './index.less'; +const LongText = memo((props: LongTextConfigType) => { + const { text, fontSize, color, indent, lineHeight, textAlign } = props; + return ( +
+ {text} +
+ ); +}); +export default LongText; diff --git a/src/components/BasicShop/BasicComponents/Notice/index.tsx b/src/components/BasicShop/BasicComponents/Notice/index.tsx new file mode 100644 index 0000000..ee84910 --- /dev/null +++ b/src/components/BasicShop/BasicComponents/Notice/index.tsx @@ -0,0 +1,13 @@ +import { NoticeBar } from 'zarm'; +import React, { memo } from 'react'; +import { NoticeConfigType } from '@/components/DynamicEngine/schema'; +const Notice = memo((props: NoticeConfigType) => { + const { text, speed, theme, isClose = false } = props; + return ( + + {text} + + ); +}); + +export default Notice; diff --git a/src/components/BasicShop/BasicComponents/Qrcode/index.tsx b/src/components/BasicShop/BasicComponents/Qrcode/index.tsx new file mode 100644 index 0000000..466443f --- /dev/null +++ b/src/components/BasicShop/BasicComponents/Qrcode/index.tsx @@ -0,0 +1,14 @@ +import { QRCodeConfigType } from '@/components/DynamicEngine/schema'; +import React, { memo } from 'react'; + +const Qrcode = memo((props: QRCodeConfigType) => { + const { qrcode, text, color, fontSize = 14 } = props; + return ( +
+ {text} +
{text}
+
+ ); +}); + +export default Qrcode; diff --git a/src/components/Tab/index.less b/src/components/BasicShop/BasicComponents/Tab/index.less similarity index 99% rename from src/components/Tab/index.less rename to src/components/BasicShop/BasicComponents/Tab/index.less index 0c25d03..1583925 100644 --- a/src/components/Tab/index.less +++ b/src/components/BasicShop/BasicComponents/Tab/index.less @@ -24,4 +24,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/components/Tab/index.tsx b/src/components/BasicShop/BasicComponents/Tab/index.tsx similarity index 95% rename from src/components/Tab/index.tsx rename to src/components/BasicShop/BasicComponents/Tab/index.tsx index 94ab138..1f0f6d4 100644 --- a/src/components/Tab/index.tsx +++ b/src/components/BasicShop/BasicComponents/Tab/index.tsx @@ -1,7 +1,7 @@ +import { TabConfigType } from '@/components/DynamicEngine/schema'; import React, { useEffect, useRef } from 'react'; import { Tabs } from 'zarm'; import styles from './index.less'; -import { TabConfigType } from '../DynamicEngine/schema'; const { Panel } = Tabs; @@ -22,7 +22,7 @@ const XTab = (props: TabConfigType) => { return (
{ console.log(i); }} diff --git a/src/components/FormEditor/index.less b/src/components/BasicShop/BasicComponents/Text/index.less similarity index 100% rename from src/components/FormEditor/index.less rename to src/components/BasicShop/BasicComponents/Text/index.less diff --git a/src/components/BasicShop/BasicComponents/Text/index.tsx b/src/components/BasicShop/BasicComponents/Text/index.tsx new file mode 100644 index 0000000..b5ee5c8 --- /dev/null +++ b/src/components/BasicShop/BasicComponents/Text/index.tsx @@ -0,0 +1,13 @@ +import { TextConfigType } from '@/components/DynamicEngine/schema'; +import React, { memo } from 'react'; +import styles from './index.less'; + +const Text = memo((props: TextConfigType) => { + const { align, text, fontSize, color, lineHeight } = props; + return ( +
+ {text} +
+ ); +}); +export default Text; diff --git a/src/components/Video/index.css b/src/components/BasicShop/MediaComponents/Video/index.css similarity index 100% rename from src/components/Video/index.css rename to src/components/BasicShop/MediaComponents/Video/index.css diff --git a/src/components/Video/index.tsx b/src/components/BasicShop/MediaComponents/Video/index.tsx similarity index 87% rename from src/components/Video/index.tsx rename to src/components/BasicShop/MediaComponents/Video/index.tsx index c9424dc..7c94f49 100644 --- a/src/components/Video/index.tsx +++ b/src/components/BasicShop/MediaComponents/Video/index.tsx @@ -1,7 +1,7 @@ +import { VideoConfigType } from '@/components/DynamicEngine/schema'; import React, { memo } from 'react'; import { Player, BigPlayButton } from 'video-react'; import './index.css'; -import { VideoConfigType } from '../DynamicEngine/schema'; const VideoPlayer = memo((props: VideoConfigType) => { const { poster, url } = props; diff --git a/src/components/Chart/index.less b/src/components/BasicShop/VisualComponents/Chart/index.less similarity index 100% rename from src/components/Chart/index.less rename to src/components/BasicShop/VisualComponents/Chart/index.less diff --git a/src/components/Chart/index.tsx b/src/components/BasicShop/VisualComponents/Chart/index.tsx similarity index 100% rename from src/components/Chart/index.tsx rename to src/components/BasicShop/VisualComponents/Chart/index.tsx diff --git a/src/components/BasicShop/VisualComponents/XProgress/index.less b/src/components/BasicShop/VisualComponents/XProgress/index.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/BasicShop/VisualComponents/XProgress/index.tsx b/src/components/BasicShop/VisualComponents/XProgress/index.tsx new file mode 100644 index 0000000..f0f6ae2 --- /dev/null +++ b/src/components/BasicShop/VisualComponents/XProgress/index.tsx @@ -0,0 +1,21 @@ +import { XProgressConfigType } from '@/components/DynamicEngine/schema'; +import React, { memo } from 'react'; +import { Progress } from 'zarm'; +import styles from './index.less'; + +const XProgress = memo((props: XProgressConfigType) => { + const { theme, size, shape, percent, strokeWidth } = props; + return ( +
+ +
+ ); +}); + +export default XProgress; diff --git a/src/components/DynamicEngine/index.tsx b/src/components/DynamicEngine/index.tsx index 7fe97b1..f60c5f0 100644 --- a/src/components/DynamicEngine/index.tsx +++ b/src/components/DynamicEngine/index.tsx @@ -3,20 +3,22 @@ import Loading from '../LoadingCp'; import { useMemo, memo, FC } from 'react'; import React from 'react'; import { AllTemplateType } from './schema'; -const needList = ['Tab', 'Carousel', 'Upload', 'Video', 'Icon', 'Chart']; -const DynamicFunc = (type: AllTemplateType) => +export type componentsType = 'media' | 'base' | 'visible'; + +const DynamicFunc = (type: AllTemplateType, componentsType: componentsType) => dynamic({ loader: async function() { let Component: FC<{ isTpl: boolean }>; - if (needList.includes(type)) { - const { default: Graph } = await import(`@/components/${type}`); + if (componentsType === 'base') { + const { default: Graph } = await import(`@/components/BasicShop/BasicComponents/${type}`); + Component = Graph; + } else if (componentsType === 'media') { + const { default: Graph } = await import(`@/components/BasicShop/MediaComponents/${type}`); Component = Graph; } else { - const Components = ((await import(`@/components/DynamicEngine/components`)) as unknown) as { - [key: string]: FC; - }; - Component = Components[type]; + const { default: Graph } = await import(`@/components/BasicShop/VisualComponents/${type}`); + Component = Graph; } return (props: DynamicType) => { @@ -35,14 +37,15 @@ type DynamicType = { isTpl: boolean; config: { [key: string]: any }; type: AllTemplateType; + componentsType: componentsType; }; const DynamicEngine = memo((props: DynamicType) => { - const { type, config, isTpl } = props; + const { type, config, isTpl, componentsType } = props; const Dynamic = useMemo(() => { - return (DynamicFunc(type) as unknown) as FC; + return (DynamicFunc(type, componentsType) as unknown) as FC; // eslint-disable-next-line react-hooks/exhaustive-deps }, [type, config]); - return ; + return ; }); export default DynamicEngine; diff --git a/src/components/CardPicker/index.less b/src/components/PanelComponents/CardPicker/index.less similarity index 100% rename from src/components/CardPicker/index.less rename to src/components/PanelComponents/CardPicker/index.less diff --git a/src/components/CardPicker/index.tsx b/src/components/PanelComponents/CardPicker/index.tsx similarity index 89% rename from src/components/CardPicker/index.tsx rename to src/components/PanelComponents/CardPicker/index.tsx index 991c453..267b727 100644 --- a/src/components/CardPicker/index.tsx +++ b/src/components/PanelComponents/CardPicker/index.tsx @@ -1,8 +1,8 @@ import { useState, useEffect, memo } from 'react'; import classnames from 'classnames'; -import Icon from '../Icon/'; +import Icon from '../../BasicShop/BasicComponents/Icon'; import styles from './index.less'; -import { IconTypes } from '../DynamicEngine/schema'; +import { IconTypes } from '../../DynamicEngine/schema'; import React from 'react'; interface CardPickerType { diff --git a/src/components/PanelComponents/Color/index.less b/src/components/PanelComponents/Color/index.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Color/index.tsx b/src/components/PanelComponents/Color/index.tsx similarity index 92% rename from src/components/Color/index.tsx rename to src/components/PanelComponents/Color/index.tsx index 8f64749..b446bcd 100644 --- a/src/components/Color/index.tsx +++ b/src/components/PanelComponents/Color/index.tsx @@ -3,10 +3,12 @@ import { SketchPicker, ColorResult } from 'react-color'; import { rgba2Obj } from '@/utils/tool'; // import styles from './index.less' +export type ColorConfigType = string; + +//value 初始值传来，onchange item给的回调 interface ColorProps { - value?: string; - id?: string; - onChange?: (v: string) => void; + value?: ColorConfigType; + onChange?: (v: ColorConfigType) => void; } class colorPicker extends React.Component { diff --git a/src/components/DataList/editorModal.tsx b/src/components/PanelComponents/DataList/editorModal.tsx similarity index 96% rename from src/components/DataList/editorModal.tsx rename to src/components/PanelComponents/DataList/editorModal.tsx index d0fe5f4..945fc50 100644 --- a/src/components/DataList/editorModal.tsx +++ b/src/components/PanelComponents/DataList/editorModal.tsx @@ -1,7 +1,7 @@ import React, { memo, useEffect, FC } from 'react'; import { Form, Select, Input, Modal } from 'antd'; -import Upload from '@/components/Upload'; -import { BasicDataSource } from '../DynamicEngine/schema'; +import Upload from '../Upload'; +import { BasicDataSource } from '../../DynamicEngine/schema'; import { Store } from 'antd/lib/form/interface'; // import styles from './index.less'; diff --git a/src/components/DataList/index.less b/src/components/PanelComponents/DataList/index.less similarity index 99% rename from src/components/DataList/index.less rename to src/components/PanelComponents/DataList/index.less index f2e1284..ab6c4eb 100644 --- a/src/components/DataList/index.less +++ b/src/components/PanelComponents/DataList/index.less @@ -39,4 +39,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/components/DataList/index.tsx b/src/components/PanelComponents/DataList/index.tsx similarity index 98% rename from src/components/DataList/index.tsx rename to src/components/PanelComponents/DataList/index.tsx index 64e571a..3b2cf08 100644 --- a/src/components/DataList/index.tsx +++ b/src/components/PanelComponents/DataList/index.tsx @@ -18,7 +18,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend'; import EditorModal from './editorModal'; import { uuid } from '@/utils/tool'; import styles from './index.less'; -import { BasicDataSource } from '../DynamicEngine/schema'; +import { BasicDataSource } from '../../DynamicEngine/schema'; type ListItemProps = DndItemProps & { isDragging: boolean; @@ -31,9 +31,6 @@ function ListItem(props: ListItemProps) { const { title, desc, - link, - imgUrl, - type, onDel, onEdit, // 这些 props 由 React DnD注入，参考`collect`函数定义 @@ -73,7 +70,6 @@ type DndItemProps = BasicDataSource & { onDel: Function; onEdit: Function; key: number; - id: string; find: Function; move: Function; type?: number; diff --git a/src/components/PanelComponents/FormEditor/index.less b/src/components/PanelComponents/FormEditor/index.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/FormEditor/index.tsx b/src/components/PanelComponents/FormEditor/index.tsx similarity index 98% rename from src/components/FormEditor/index.tsx rename to src/components/PanelComponents/FormEditor/index.tsx index 667bbd5..2296093 100644 --- a/src/components/FormEditor/index.tsx +++ b/src/components/PanelComponents/FormEditor/index.tsx @@ -7,7 +7,7 @@ import Color from '../Color'; import CardPicker from '../CardPicker'; import Table from '../Table'; import { Store } from 'antd/lib/form/interface'; -import { BasicRangeType, IconSchema } from '../DynamicEngine/schema'; +import { BasicRangeType, IconSchema } from '../../DynamicEngine/schema'; // import styles from './index.less'; const normFile = (e: any) => { console.log('Upload event:', e); diff --git a/src/components/MutiText/index.less b/src/components/PanelComponents/MutiText/index.less similarity index 98% rename from src/components/MutiText/index.less rename to src/components/PanelComponents/MutiText/index.less index 027d987..b13ba5d 100644 --- a/src/components/MutiText/index.less +++ b/src/components/PanelComponents/MutiText/index.less @@ -8,4 +8,4 @@ cursor: pointer; } } -} \ No newline at end of file +} diff --git a/src/components/MutiText/index.tsx b/src/components/PanelComponents/MutiText/index.tsx similarity index 97% rename from src/components/MutiText/index.tsx rename to src/components/PanelComponents/MutiText/index.tsx index f423440..952e637 100644 --- a/src/components/MutiText/index.tsx +++ b/src/components/PanelComponents/MutiText/index.tsx @@ -2,7 +2,7 @@ import React, { memo, useState, useEffect } from 'react'; import { Input, Button, Popconfirm } from 'antd'; import { MinusCircleOutlined } from '@ant-design/icons'; import styles from './index.less'; -import { TabConfigType } from '../DynamicEngine/schema'; +import { TabConfigType } from '../../DynamicEngine/schema'; type MultiTextProps = { onChange?: (v: TabConfigType['tabs']) => void; diff --git a/src/components/Table/index.less b/src/components/PanelComponents/Table/index.less similarity index 100% rename from src/components/Table/index.less rename to src/components/PanelComponents/Table/index.less diff --git a/src/components/Table/index.tsx b/src/components/PanelComponents/Table/index.tsx similarity index 80% rename from src/components/Table/index.tsx rename to src/components/PanelComponents/Table/index.tsx index 066ae67..e7d660c 100644 --- a/src/components/Table/index.tsx +++ b/src/components/PanelComponents/Table/index.tsx @@ -1,9 +1,10 @@ -import React, { useContext, useState, useEffect, useRef, memo } from 'react'; +import React, { useContext, useState, useEffect, useRef, memo, RefObject } from 'react'; import { Table, Input, Button, Popconfirm, Form, Modal } from 'antd'; // 下方样式主要为全局样式，暂时不可删 import styles from './index.less'; +import { ColumnsType } from 'antd/lib/table'; -const EditableContext = React.createContext(); +const EditableContext = React.createContext(null); interface Item { key: string; @@ -32,7 +33,7 @@ interface EditableCellProps { editable: boolean; children: React.ReactNode; dataIndex: string; - record: Item; + record: any; handleSave: (record: Item) => void; } @@ -46,12 +47,12 @@ const EditableCell: React.FC = ({ ...restProps }) => { const [editing, setEditing] = useState(false); - const inputRef = useRef(); + const inputRef = useRef(null); const form = useContext(EditableContext); useEffect(() => { if (editing) { - inputRef.current.focus(); + inputRef.current?.focus(); } }, [editing]); @@ -60,10 +61,9 @@ const EditableCell: React.FC = ({ form.setFieldsValue({ [dataIndex]: record[dataIndex] }); }; - const save = async e => { + const save = async () => { try { const values = await form.validateFields(); - toggleEdit(); handleSave({ ...record, ...values }); } catch (errInfo) { @@ -85,7 +85,11 @@ const EditableCell: React.FC = ({ }, ]} > - + RefObject} + onPressEnter={save} + onBlur={save} + /> ) : (
@@ -97,8 +101,19 @@ const EditableCell: React.FC = ({ return {childNode}; }; -class EditableTable extends React.Component { - constructor(props) { +class EditableTable extends React.Component { + columns: ( + | { title: string; dataIndex: string; width: string; editable: boolean; render?: undefined } + | { + title: string; + dataIndex: string; + render: (text: string, record: any) => JSX.Element | null; + width?: undefined; + editable?: undefined; + } + )[]; + + constructor(props: any) { super(props); this.columns = [ { @@ -119,13 +134,13 @@ class EditableTable extends React.Component { render: (text: string, record) => this.state.dataSource.length >= 1 ? ( this.handleDelete(record.key)}> - 删除 + 删除 ) : null, }, ]; - const dataSource = props.data.map((item, i: number) => ({ key: i + '', ...item })); + const dataSource = props.data.map((item: any, i: number) => ({ key: i + '', ...item })); this.state = { dataSource: dataSource, @@ -156,7 +171,7 @@ class EditableTable extends React.Component { this.props.onChange && this.props.onChange(newDataSource); }; - handleSave = row => { + handleSave = (row: any) => { const newData = [...this.state.dataSource]; const index = newData.findIndex(item => row.key === item.key); const item = newData[index]; @@ -174,14 +189,14 @@ class EditableTable extends React.Component { }); }; - handleOk = e => { + handleOk = (e: React.MouseEvent) => { console.log(e); this.setState({ visible: false, }); }; - handleCancel = e => { + handleCancel = (e: React.MouseEvent) => { console.log(e); this.setState({ visible: false, @@ -196,7 +211,7 @@ class EditableTable extends React.Component { cell: EditableCell, }, }; - const columns = this.columns.map(col => { + const columns: ColumnsType = this.columns.map(col => { if (!col.editable) { return col; } diff --git a/src/components/Upload/index.less b/src/components/PanelComponents/Upload/index.less similarity index 98% rename from src/components/Upload/index.less rename to src/components/PanelComponents/Upload/index.less index 9ba5161..fc82a15 100644 --- a/src/components/Upload/index.less +++ b/src/components/PanelComponents/Upload/index.less @@ -6,4 +6,4 @@ :global(.ant-upload-select-picture-card .ant-upload-text) { margin-top: 8px; color: #666; -} \ No newline at end of file +} diff --git a/src/components/Upload/index.tsx b/src/components/PanelComponents/Upload/index.tsx similarity index 100% rename from src/components/Upload/index.tsx rename to src/components/PanelComponents/Upload/index.tsx diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index bc049ff..aed9628 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -14,7 +14,7 @@ library.push( text: ( ), useReg: /(.*?)作者是谁(.*?)/, diff --git a/src/pages/editor/Container.js b/src/pages/editor/Container.js index 1ca174c..c83c085 100644 --- a/src/pages/editor/Container.js +++ b/src/pages/editor/Container.js @@ -13,7 +13,7 @@ import SourceBox from './SourceBox'; import TargetBox from './TargetBox'; import Calibration from 'components/Calibration'; import DynamicEngine from 'components/DynamicEngine'; -import FormEditor from 'components/FormEditor'; +import FormEditor from 'components/PanelComponents/FormEditor'; import template from 'components/DynamicEngine/template'; import mediaTpl from 'components/DynamicEngine/mediaTpl'; import graphTpl from 'components/DynamicEngine/graphTpl'; @@ -137,21 +137,36 @@ const Container = props => { {template.map((value, i) => ( - + ))} {mediaTpl.map((value, i) => ( - + ))} {graphTpl.map((value, i) => ( - + ))}