diff --git a/package.json b/package.json index 9f8d8fd..12403d8 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,6 @@ "dependencies": { "@ant-design/icons": "^4.2.1", "@antv/f2": "^3.7.7", - "@types/node": "^14.6.2", "@umijs/plugin-sass": "^1.1.1", "@umijs/preset-react": "1.x", "@umijs/test": "^3.2.19", @@ -82,6 +81,7 @@ }, "license": "MIT", "devDependencies": { + "@types/qrcode.react": "^1.0.1", "@types/classnames": "^2.2.10", "@types/codemirror": "^0.0.98", "@types/events": "^3.0.0", @@ -90,6 +90,7 @@ "@types/react-color": "^3.0.4", "@types/react-grid-layout": "^1.1.0", "@types/redux-logger": "^3.0.8", + "@types/xlsx": "^0.0.36", "@typescript-eslint/eslint-plugin": "4.1.1", "@typescript-eslint/parser": "4.1.1", "babel-eslint": "10.x", diff --git a/src/components/BasicShop/BasicComponents/Carousel/index.tsx b/src/components/BasicShop/BasicComponents/Carousel/index.tsx index a2a5ee9..de08983 100644 --- a/src/components/BasicShop/BasicComponents/Carousel/index.tsx +++ b/src/components/BasicShop/BasicComponents/Carousel/index.tsx @@ -1,13 +1,9 @@ -import React, { memo, PropsWithChildren } from 'react'; +import React, { memo } from 'react'; import { Carousel } from 'zarm'; import styles from './index.less'; import { ICarouselConfig } from './schema'; -interface CarouselTypes extends ICarouselConfig { - isTpl: boolean; -} - -const XCarousel = memo((props: PropsWithChildren) => { +const XCarousel = memo((props: ICarouselConfig) => { const { direction, swipeable, autoPlay, isTpl, imgList, tplImg } = props; const contentRender = () => { return imgList.map((item, i) => { @@ -19,25 +15,38 @@ const XCarousel = memo((props: PropsWithChildren) => { }); }; return ( -
+ <> {isTpl ? (
) : ( - { - // console.log(`onChange: ${index}`); +
- {contentRender()} - + { + // console.log(`onChange: ${index}`); + }} + direction={direction} + swipeable={swipeable} + autoPlay={autoPlay} + loop + > + {contentRender()} + +
)} -
+ ); }); diff --git a/src/components/BasicShop/BasicComponents/Carousel/schema.ts b/src/components/BasicShop/BasicComponents/Carousel/schema.ts index a8ade45..e04cad0 100644 --- a/src/components/BasicShop/BasicComponents/Carousel/schema.ts +++ b/src/components/BasicShop/BasicComponents/Carousel/schema.ts @@ -1,18 +1,23 @@ import { IDataListConfigType, + INumberConfigType, IRadioConfigType, ISwitchConfigType, TDataListDefaultType, TRadioDefaultType, TSwitchDefaultType, } from '@/components/PanelComponents/FormEditor/types'; +import { baseConfig, baseDefault, ICommonBaseType } from '../../common'; export type CarouselDirectionKeyType = 'down' | 'left'; export type TCarouselEditData = Array< - IRadioConfigType | ISwitchConfigType | IDataListConfigType + | INumberConfigType + | IRadioConfigType + | ISwitchConfigType + | IDataListConfigType >; -export interface ICarouselConfig { +export interface ICarouselConfig extends ICommonBaseType { direction: TRadioDefaultType; swipeable: TSwitchDefaultType; autoPlay: TSwitchDefaultType; @@ -27,6 +32,8 @@ export interface ICarouselSchema { const Carousel: ICarouselSchema = { editData: [ + ...baseConfig, + { key: 'direction', name: '方向', @@ -92,6 +99,7 @@ const Carousel: ICarouselSchema = { ], }, ], + ...baseDefault, tplImg: 'http://io.nainor.com/uploads/carousal_17442e1420f.png', }, }; diff --git a/src/components/BasicShop/BasicComponents/Footer/index.tsx b/src/components/BasicShop/BasicComponents/Footer/index.tsx index 70197d5..bb9911e 100644 --- a/src/components/BasicShop/BasicComponents/Footer/index.tsx +++ b/src/components/BasicShop/BasicComponents/Footer/index.tsx @@ -2,19 +2,51 @@ import React, { memo } from 'react'; import { IFooterConfig } from './schema'; const Footer = memo((props: IFooterConfig) => { const { bgColor, text, color, align, fontSize, height } = props; + console.log(props); return ( -
- {text} -
+ <> + {props.isTpl && ( +
+ {text} +
+ )} + {!props.isTpl && ( +
+
+ {text} +
+
+ )} + ); }); diff --git a/src/components/BasicShop/BasicComponents/Footer/schema.ts b/src/components/BasicShop/BasicComponents/Footer/schema.ts index 457c819..7cf9700 100644 --- a/src/components/BasicShop/BasicComponents/Footer/schema.ts +++ b/src/components/BasicShop/BasicComponents/Footer/schema.ts @@ -8,13 +8,14 @@ import { TSelectDefaultType, TTextDefaultType, } from '@/components/PanelComponents/FormEditor/types'; +import { baseConfig, baseDefault, ICommonBaseType } from '../../common'; export type TfooterSelectKeyType = 'left' | 'center' | 'right'; export type TFooterEditData = Array< IColorConfigType | INumberConfigType | ITextConfigType | ISelectConfigType >; -export interface IFooterConfig { +export interface IFooterConfig extends ICommonBaseType { bgColor: TColorDefaultType; text: TTextDefaultType; color: TColorDefaultType; @@ -30,6 +31,7 @@ export interface IFooterSchema { const Footer: IFooterSchema = { editData: [ + ...baseConfig, { key: 'bgColor', name: '背景色', @@ -82,6 +84,7 @@ const Footer: IFooterSchema = { align: 'center', fontSize: 16, height: 48, + ...baseDefault, }, }; export default Footer; diff --git a/src/components/BasicShop/BasicComponents/Form/index.tsx b/src/components/BasicShop/BasicComponents/Form/index.tsx index 2ded63c..482a38a 100644 --- a/src/components/BasicShop/BasicComponents/Form/index.tsx +++ b/src/components/BasicShop/BasicComponents/Form/index.tsx @@ -31,30 +31,73 @@ const FormComponent = (props: IFormConfig) => { } }; return ( -
- {title && ( -
- {title} + <> + {props.isTpl && ( +
+ {title && ( +
+ {title} +
+ )} +
+ {formControls.map(item => { + const FormItem = BaseForm[item.type]; + return ; + })} +
+ +
+
)} -
- {formControls.map(item => { - const FormItem = BaseForm[item.type]; - return ; - })} -
- + {!props.isTpl && ( +
+ {title && ( +
+ {title} +
+ )} +
+ {formControls.map(item => { + const FormItem = BaseForm[item.type]; + return ; + })} +
+ +
+
-
-
+ )} + ); }; diff --git a/src/components/BasicShop/BasicComponents/Form/schema.ts b/src/components/BasicShop/BasicComponents/Form/schema.ts index 4bf7f90..1e71fe5 100644 --- a/src/components/BasicShop/BasicComponents/Form/schema.ts +++ b/src/components/BasicShop/BasicComponents/Form/schema.ts @@ -8,11 +8,12 @@ import { TNumberDefaultType, TTextDefaultType, } from '@/components/PanelComponents/FormEditor/types'; +import { baseConfig, baseDefault, ICommonBaseType } from '../../common'; export type TFormEditData = Array< ITextConfigType | INumberConfigType | IColorConfigType | ITextConfigType | IFormItemsConfigType >; -export interface IFormConfig { +export interface IFormConfig extends ICommonBaseType { title: TTextDefaultType; fontSize: TNumberDefaultType; titColor: TColorDefaultType; @@ -30,6 +31,7 @@ export interface IFormSchema { const Form: IFormSchema = { editData: [ + ...baseConfig, { key: 'title', name: '标题', @@ -103,6 +105,7 @@ const Form: IFormSchema = { ], }, ], + ...baseDefault, }, }; export default Form; diff --git a/src/components/BasicShop/BasicComponents/Header/index.tsx b/src/components/BasicShop/BasicComponents/Header/index.tsx index 126d473..6e5dbdd 100644 --- a/src/components/BasicShop/BasicComponents/Header/index.tsx +++ b/src/components/BasicShop/BasicComponents/Header/index.tsx @@ -6,14 +6,41 @@ import { IHeaderConfig } from './schema'; const Header = memo((props: IHeaderConfig) => { const { bgColor, logo, logoText, fontSize, color } = props; return ( -
-
- {logoText} -
-
- {logoText} -
-
+ <> + {props.isTpl && ( +
+
+ {logoText} +
+
+ {logoText} +
+
+ )} + {!props.isTpl && ( +
+
+ {logoText} +
+
+ {logoText} +
+
+ )} + ); }); diff --git a/src/components/BasicShop/BasicComponents/Header/schema.ts b/src/components/BasicShop/BasicComponents/Header/schema.ts index d9ebd8f..a9d664c 100644 --- a/src/components/BasicShop/BasicComponents/Header/schema.ts +++ b/src/components/BasicShop/BasicComponents/Header/schema.ts @@ -8,11 +8,12 @@ import { TTextDefaultType, TUploadDefaultType, } from '@/components/PanelComponents/FormEditor/types'; +import { baseConfig, baseDefault, ICommonBaseType } from '../../common'; export type THeaderEditData = Array< IColorConfigType | INumberConfigType | IUploadConfigType | ITextConfigType >; -export interface IHeaderConfig { +export interface IHeaderConfig extends ICommonBaseType { bgColor: TColorDefaultType; logo: TUploadDefaultType; logoText: TTextDefaultType; @@ -28,6 +29,7 @@ export interface IHeaderSchema { const Header: IHeaderSchema = { editData: [ + ...baseConfig, { key: 'bgColor', name: '背景色', @@ -75,6 +77,7 @@ const Header: IHeaderSchema = { fontSize: 20, color: 'rgba(255,255,255,1)', height: 50, + ...baseDefault, }, }; diff --git a/src/components/BasicShop/BasicComponents/Image/index.tsx b/src/components/BasicShop/BasicComponents/Image/index.tsx index 822fa34..d0c98ce 100644 --- a/src/components/BasicShop/BasicComponents/Image/index.tsx +++ b/src/components/BasicShop/BasicComponents/Image/index.tsx @@ -3,7 +3,15 @@ import { IImageConfig } from './schema'; const Image = memo((props: IImageConfig) => { const { imgUrl, round = 0 } = props; return ( -
+
); diff --git a/src/components/BasicShop/BasicComponents/Image/schema.ts b/src/components/BasicShop/BasicComponents/Image/schema.ts index a8d1f68..eb8dc61 100644 --- a/src/components/BasicShop/BasicComponents/Image/schema.ts +++ b/src/components/BasicShop/BasicComponents/Image/schema.ts @@ -4,9 +4,10 @@ import { TNumberDefaultType, TUploadDefaultType, } from '@/components/PanelComponents/FormEditor/types'; +import { baseConfig, baseDefault, ICommonBaseType } from '../../common'; export type TImageEditData = Array; -export interface IImageConfig { +export interface IImageConfig extends ICommonBaseType { imgUrl: TUploadDefaultType; round: TNumberDefaultType; } @@ -18,6 +19,7 @@ export interface IImageSchema { const Image: IImageSchema = { editData: [ + ...baseConfig, { key: 'imgUrl', name: '上传', @@ -40,6 +42,7 @@ const Image: IImageSchema = { }, ], round: 0, + ...baseDefault, }, }; diff --git a/src/components/BasicShop/BasicComponents/List/index.tsx b/src/components/BasicShop/BasicComponents/List/index.tsx index 720a1a8..48cbeaf 100644 --- a/src/components/BasicShop/BasicComponents/List/index.tsx +++ b/src/components/BasicShop/BasicComponents/List/index.tsx @@ -4,47 +4,106 @@ import { IListConfig } from './schema'; const List = memo((props: IListConfig) => { const { round, sourceData, imgSize, fontSize, color } = props; return ( -
- + )} + {!props.isTpl && ( +
+
+ {sourceData.map((item, i) => { + return ( + + ); + })} +
+
+ )} + ); }); diff --git a/src/components/BasicShop/BasicComponents/List/schema.ts b/src/components/BasicShop/BasicComponents/List/schema.ts index 9611ea6..8f15d7b 100644 --- a/src/components/BasicShop/BasicComponents/List/schema.ts +++ b/src/components/BasicShop/BasicComponents/List/schema.ts @@ -8,11 +8,12 @@ import { TNumberDefaultType, TSelectDefaultType, } from '@/components/PanelComponents/FormEditor/types'; +import { baseConfig, baseDefault, ICommonBaseType } from '../../common'; export type TListSelectKeyType = '60' | '80' | '100' | '120' | '150'; export type TListEditData = Array< IColorConfigType | IDataListConfigType | INumberConfigType | ISelectConfigType >; -export interface IListConfig { +export interface IListConfig extends ICommonBaseType { sourceData: TDataListDefaultType; round: TNumberDefaultType; imgSize: TSelectDefaultType; @@ -27,6 +28,7 @@ export interface IListSchema { const List: IListSchema = { editData: [ + ...baseConfig, { key: 'sourceData', name: '数据源', @@ -110,6 +112,7 @@ const List: IListSchema = { imgSize: '80', fontSize: 16, color: 'rgba(153,153,153,1)', + ...baseDefault, }, }; diff --git a/src/components/BasicShop/common.ts b/src/components/BasicShop/common.ts new file mode 100644 index 0000000..e225d6c --- /dev/null +++ b/src/components/BasicShop/common.ts @@ -0,0 +1,63 @@ +import { INumberConfigType, TNumberDefaultType } from '../PanelComponents/FormEditor/types'; + +///提取所有公用设置，传来时加到这里，约定公用类型 +//公用配置需满足条件，所有组件初始值统一，否则不放公用设置 + +export interface ICommonBaseType { + baseTop: TNumberDefaultType; + baseLeft: TNumberDefaultType; + baseRadius: TNumberDefaultType; + baseRotate: TNumberDefaultType; + baseScale: TNumberDefaultType; + baseHeight: TNumberDefaultType; + baseWidth: TNumberDefaultType; + isTpl?: boolean; +} + +export const baseConfig: INumberConfigType[] = [ + { + key: 'baseTop', + name: '纵向位移', + type: 'Number', + }, + { + key: 'baseLeft', + name: '横向位移', + type: 'Number', + }, + { + key: 'baseRadius', + name: '圆角', + type: 'Number', + }, + { + key: 'baseRotate', + name: '旋转', + type: 'Number', + }, + { + key: 'baseScale', + name: '缩放', + type: 'Number', + }, + { + key: 'baseHeight', + name: '容器高度%', + type: 'Number', + }, + { + key: 'baseWidth', + name: '容器宽度%', + type: 'Number', + }, +]; + +export const baseDefault = { + baseTop: 0, + baseLeft: 0, + baseRadius: 0, + baseRotate: 0, + baseScale: 100, + baseHeight: 100, + baseWidth: 100, +}; diff --git a/src/components/Calibration/index.tsx b/src/components/Calibration/index.tsx index bb7b9c4..78908c8 100644 --- a/src/components/Calibration/index.tsx +++ b/src/components/Calibration/index.tsx @@ -7,8 +7,9 @@ export interface calibrationTypes { height: number; } export type CalibrationTypes = { - direction: 'up' | 'left'; + direction: 'up' | 'left' | 'right'; multiple: number; + id: string; }; export default function Calibration(props: CalibrationTypes) { diff --git a/src/components/DynamicEngine/index.tsx b/src/components/DynamicEngine/index.tsx index 1a78a80..9ae8448 100644 --- a/src/components/DynamicEngine/index.tsx +++ b/src/components/DynamicEngine/index.tsx @@ -6,7 +6,7 @@ import React from 'react'; export type componentsType = 'media' | 'base' | 'visible'; -const DynamicFunc = (type: any, componentsType: componentsType) => +const DynamicFunc = (type: any, componentsType: string) => dynamic({ loader: async function() { let Component: FC<{ isTpl: boolean }>; @@ -37,7 +37,7 @@ type DynamicType = { config: { [key: string]: any }; type: any; componentsType: componentsType; - category: componentsType; + category: string; }; const DynamicEngine = memo((props: DynamicType) => { const { type, config, category } = props; diff --git a/src/components/PanelComponents/FormEditor/index.tsx b/src/components/PanelComponents/FormEditor/index.tsx index c9996fa..f1055e3 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, useEffect, useMemo } from 'react'; import { Form, Select, InputNumber, Input, Switch, Radio, Button } from 'antd'; import Upload from '../Upload'; import DataList from '../DataList'; @@ -36,7 +36,6 @@ interface FormEditorProps { const FormEditor = (props: FormEditorProps) => { const { config, defaultValue, onSave, onDel, uid } = props; - console.log(defaultValue, config); const onFinish = (values: Store) => { onSave && onSave(values); }; @@ -65,7 +64,7 @@ const FormEditor = (props: FormEditorProps) => { {item.type === 'Number' && ( - + )} {item.type === 'Text' && ( diff --git a/src/components/PanelComponents/FormItems/EditorModal.tsx b/src/components/PanelComponents/FormItems/EditorModal.tsx index b145b3c..9140f6a 100644 --- a/src/components/PanelComponents/FormItems/EditorModal.tsx +++ b/src/components/PanelComponents/FormItems/EditorModal.tsx @@ -1,7 +1,6 @@ import React, { FC, memo, useEffect } from 'react'; import { Form, Select, Input, Modal } from 'antd'; -import { baseFormOptionsType, baseFormUnion } from '../FormEditor/types'; -import { Store } from 'antd/lib/form/interface'; +import { baseFormOptionsType } from '../FormEditor/types'; const { Option } = Select; diff --git a/src/components/PanelComponents/Table/index.tsx b/src/components/PanelComponents/Table/index.tsx index 8221a8b..7c61b45 100644 --- a/src/components/PanelComponents/Table/index.tsx +++ b/src/components/PanelComponents/Table/index.tsx @@ -265,6 +265,7 @@ class EditableTable extends React.Component { _this.props.onChange && _this.props.onChange(sourceData); }; reader.readAsBinaryString(file); + return true; }, }; return ( diff --git a/src/global.css b/src/global.css index 08a8694..b2a3947 100644 --- a/src/global.css +++ b/src/global.css @@ -38,3 +38,7 @@ body { @import '~codemirror/lib/codemirror.css'; @import '~codemirror/theme/material.css'; + +.react-grid-item{ + overflow: hidden; +} \ No newline at end of file diff --git a/src/pages/editor/Container.js b/src/pages/editor/Container.tsx similarity index 88% rename from src/pages/editor/Container.js rename to src/pages/editor/Container.tsx index a382521..303821b 100644 --- a/src/pages/editor/Container.js +++ b/src/pages/editor/Container.tsx @@ -12,23 +12,23 @@ import HeaderComponent from './components/Header'; import SourceBox from './SourceBox'; import TargetBox from './TargetBox'; import Calibration from 'components/Calibration'; -import DynamicEngine from 'components/DynamicEngine'; +import DynamicEngine, { componentsType } from 'components/DynamicEngine'; import FormEditor from 'components/PanelComponents/FormEditor'; import template from 'components/BasicShop/BasicComponents/template'; import mediaTpl from 'components/BasicShop/MediaComponents/template'; import graphTpl from 'components/BasicShop/VisualComponents/template'; import schema from 'components/BasicShop/schema'; import { ActionCreators } from 'redux-undo'; - +import { StateWithHistory } from 'redux-undo'; import styles from './index.less'; const { TabPane } = Tabs; -const Container = props => { +const Container = (props: { history?: any; location?: any; pstate?: any; dispatch?: any }) => { const [scaleNum, setScale] = useState(1); const { pstate, dispatch } = props; - + console.log(props); const pointData = pstate ? pstate.pointData : {}; const curPoint = pstate ? pstate.curPoint : {}; // 指定画布的id @@ -44,7 +44,7 @@ const Container = props => { visible: , }; - const generateHeader = (type, text) => { + const generateHeader = (type: componentsType, text: string) => { return (
{CpIcon[type]} {text} @@ -52,18 +52,18 @@ const Container = props => { ); }; - const handleSliderChange = v => { + const handleSliderChange = (v: number) => { setScale(prev => (v >= 150 ? 1.5 : v / 100)); }; - const handleSlider = type => { + const handleSlider = (type: any) => { if (type) { setScale(prev => (prev >= 1.5 ? 1.5 : prev + 0.1)); } else { setScale(prev => (prev <= 0.5 ? 0.5 : prev - 0.1)); } }; - const handleFormSave = data => { + const handleFormSave = (data: any) => { dispatch({ type: 'editorModal/modPointData', payload: { ...curPoint, item: { ...curPoint.item, config: data } }, @@ -74,7 +74,7 @@ const Container = props => { dispatch({ type: 'editorModal/clearAll' }); }; - const handleDel = id => { + const handleDel = (id: any) => { dispatch({ type: 'editorModal/delPointData', payload: { id }, @@ -94,7 +94,7 @@ const Container = props => { }, []); const allType = useMemo(() => { - let arr = []; + let arr: string[] = []; template.forEach(v => { arr.push(v.type); }); @@ -138,7 +138,7 @@ const Container = props => { @@ -151,7 +151,7 @@ const Container = props => { @@ -163,8 +163,8 @@ const Container = props => { @@ -229,6 +229,6 @@ const Container = props => { ); }; -export default connect(state => { +export default connect((state: StateWithHistory) => { return { pstate: state.present.editorModal }; })(Container); diff --git a/src/pages/editor/SourceBox.js b/src/pages/editor/SourceBox.tsx similarity index 76% rename from src/pages/editor/SourceBox.js rename to src/pages/editor/SourceBox.tsx index 73996cb..c08c68c 100644 --- a/src/pages/editor/SourceBox.js +++ b/src/pages/editor/SourceBox.tsx @@ -1,27 +1,37 @@ import React, { memo, useEffect, useState } from 'react'; import { useDrop } from 'react-dnd'; import Draggable from 'react-draggable'; -import GridLayout from 'react-grid-layout'; +import GridLayout, { ItemCallback } from 'react-grid-layout'; import { Tooltip } from 'antd'; import { connect } from 'dva'; import DynamicEngine from 'components/DynamicEngine'; import styles from './index.less'; import { uuid } from '@/utils/tool'; +import { Dispatch } from 'umi'; +import { StateWithHistory } from 'redux-undo'; -const SourceBox = memo(props => { +interface SourceBoxProps { + pstate: { pointData: { id: string; item: any; point: any }[] }; + scaleNum: number; + canvasId: string; + allType: string[]; + dispatch: Dispatch; +} + +const SourceBox = memo((props: SourceBoxProps) => { const { pstate, scaleNum, canvasId, allType, dispatch } = props; - const pointData = pstate ? pstate.pointData : {}; - const [canvasRect, setCanvasRect] = useState([]); + const pointData = pstate ? pstate.pointData : []; + const [canvasRect, setCanvasRect] = useState([]); const [isShowTip, setIsShowTip] = useState(true); const [{ isOver }, drop] = useDrop({ accept: allType, - drop: (item, monitor) => { + drop: (item: { h: number; type: string }, monitor) => { let parentDiv = document.getElementById(canvasId), - pointRect = parentDiv.getBoundingClientRect(), + pointRect = parentDiv!.getBoundingClientRect(), top = pointRect.top, pointEnd = monitor.getSourceClientOffset(), - y = pointEnd.y < top ? 0 : pointEnd.y - top, + y = pointEnd!.y < top ? 0 : pointEnd!.y - top, col = 24, // 网格列数 cellHeight = 2, w = item.type === 'Icon' ? 3 : col; @@ -43,7 +53,7 @@ const SourceBox = memo(props => { }), }); - const dragStop = (layout, oldItem, newItem, placeholder, e, element) => { + const dragStop: ItemCallback = (layout, oldItem, newItem, placeholder, e, element) => { const curPointData = pointData.filter(item => item.id === newItem.i)[0]; dispatch({ type: 'editorModal/modPointData', @@ -51,7 +61,7 @@ const SourceBox = memo(props => { }); }; - const onDragStart = (layout, oldItem, newItem, placeholder, e, element) => { + const onDragStart: ItemCallback = (layout, oldItem, newItem, placeholder, e, element) => { const curPointData = pointData.filter(item => item.id === newItem.i)[0]; dispatch({ type: 'editorModal/modPointData', @@ -59,7 +69,7 @@ const SourceBox = memo(props => { }); }; - const onResizeStop = (layout, oldItem, newItem, placeholder, e, element) => { + const onResizeStop: ItemCallback = (layout, oldItem, newItem, placeholder, e, element) => { const curPointData = pointData.filter(item => item.id === newItem.i)[0]; dispatch({ type: 'editorModal/modPointData', @@ -68,7 +78,7 @@ const SourceBox = memo(props => { }; useEffect(() => { - let { width, height } = document.getElementById(canvasId).getBoundingClientRect(); + let { width, height } = document.getElementById(canvasId)!.getBoundingClientRect(); setCanvasRect([width, height]); }, [canvasId]); @@ -81,7 +91,7 @@ const SourceBox = memo(props => { }; }, []); const opacity = isOver ? 0.7 : 1; - const backgroundColor = isOver ? 1 : 0.7; + // const backgroundColor = isOver ? 1 : 0.7; return (
@@ -98,7 +108,6 @@ const SourceBox = memo(props => { className={styles.canvas} style={{ opacity, - backgroundColor, }} ref={drop} > @@ -144,4 +153,6 @@ const SourceBox = memo(props => { ); }); -export default connect(state => ({ pstate: state.present.editorModal }))(SourceBox); +export default connect((state: StateWithHistory) => ({ pstate: state.present.editorModal }))( + SourceBox, +); diff --git a/src/pages/editor/TargetBox.js b/src/pages/editor/TargetBox.tsx similarity index 66% rename from src/pages/editor/TargetBox.js rename to src/pages/editor/TargetBox.tsx index ca5f2aa..978503b 100644 --- a/src/pages/editor/TargetBox.js +++ b/src/pages/editor/TargetBox.tsx @@ -1,16 +1,22 @@ -import React, { useMemo, memo } from 'react'; +import React, { useMemo, memo, ReactNode } from 'react'; import { useDrag } from 'react-dnd'; import schema from 'components/BasicShop/schema'; import styles from './index.less'; -const TargetBox = memo(props => { +interface TargetBoxProps { + item: any; + children: ReactNode; + canvasId: string; +} + +const TargetBox = memo((props: TargetBoxProps) => { const { item } = props; const [{ isDragging }, drag] = useDrag({ item: { type: item.type, - config: schema[item.type].config, + config: schema[item.type as keyof typeof schema].config, h: item.h, - editableEl: schema[item.type].editData, + editableEl: schema[item.type as keyof typeof schema].editData, category: item.category, }, collect: monitor => ({ diff --git a/src/pages/editor/components/Header/index.js b/src/pages/editor/components/Header/index.tsx similarity index 95% rename from src/pages/editor/components/Header/index.js rename to src/pages/editor/components/Header/index.tsx index 1020f17..32dedd6 100644 --- a/src/pages/editor/components/Header/index.js +++ b/src/pages/editor/components/Header/index.tsx @@ -22,9 +22,17 @@ const { confirm } = Modal; const isDev = process.env.NODE_ENV === 'development'; -const HeaderComponent = memo(props => { +interface HeaderComponentProps { + pointData: any; + location: any; + clearData: any; + undohandler: any; + redohandler: any; +} + +const HeaderComponent = memo((props: HeaderComponentProps) => { const { pointData, location, clearData, undohandler, redohandler } = props; - const iptRef = useRef(null); + const iptRef = useRef(null); const toPreview = () => { localStorage.setItem('pointData', JSON.stringify(pointData)); @@ -65,7 +73,7 @@ const HeaderComponent = memo(props => { okText: '保存', cancelText: '取消', onOk() { - let name = iptRef.current.state.value; + let name = iptRef.current!.state.value; req.post('/visible/tpl/save', { name, tpl: pointData }).then(res => { console.log(res); }); diff --git a/src/utils/tool.ts b/src/utils/tool.ts index f4711cb..e8bdeaa 100644 --- a/src/utils/tool.ts +++ b/src/utils/tool.ts @@ -58,7 +58,6 @@ export function useGetScrollBarWidth(ref: RefObject) { useLayoutEffect(() => { if (ref.current) { const diff = ref.current.offsetWidth - ref.current.clientWidth; - console.log(diff); setWidth(diff); } }, [ref]); diff --git a/yarn.lock b/yarn.lock index 2a92633..a735d29 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2192,6 +2192,13 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24" integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug== +"@types/qrcode.react@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@types/qrcode.react/-/qrcode.react-1.0.1.tgz#0904e7a075a6274a5258f19567b4f64013c159d8" + integrity sha512-PcVCjpsiT2KFKfJibOgTQtkt0QQT/6GbQUp1Np/hMPhwUzMJ2DRUkR9j7tXN9Q8X06qukw+RbaJ8lJ22SBod+Q== + dependencies: + "@types/react" "*" + "@types/qs@*": version "6.9.5" resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.5.tgz#434711bdd49eb5ee69d90c1d67c354a9a8ecb18b" @@ -2432,6 +2439,13 @@ "@types/webpack-sources" "*" source-map "^0.6.0" +"@types/xlsx@^0.0.36": + version "0.0.36" + resolved "https://registry.yarnpkg.com/@types/xlsx/-/xlsx-0.0.36.tgz#b5062003e5c5374ab4f08fdd3bf69da4d4013af8" + integrity sha512-mvfrKiKKMErQzLMF8ElYEH21qxWCZtN59pHhWGmWCWFJStYdMWjkDSAy6mGowFxHXaXZWe5/TW7pBUiWclIVOw== + dependencies: + xlsx "*" + "@types/yargs-parser@*", "@types/yargs-parser@15.0.0": version "15.0.0" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d" @@ -14540,7 +14554,7 @@ ws@~6.1.0: dependencies: async-limiter "~1.0.0" -xlsx@^0.16.7: +xlsx@*, xlsx@^0.16.7: version "0.16.7" resolved "https://registry.yarnpkg.com/xlsx/-/xlsx-0.16.7.tgz#62fd6590addac7c4419daaaa2b0c5388015d5f69" integrity sha512-Xc4NRjci2Grbh9NDk/XoaWycJurxEug1wwn0aJCmB0NvIMyQuHYq2muWLWGidYNZPf94aUbqm6K8Fbjd7gKTZg==