https://github.com/eightfeet/grid
https://github.com/eightfeet/grid
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/eightfeet/grid
- Owner: eightfeet
- Created: 2020-11-22T23:28:18.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-09T00:40:21.000Z (over 4 years ago)
- Last Synced: 2025-03-05T22:37:19.968Z (7 months ago)
- Language: TypeScript
- Size: 804 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## react app
### To do list
- [x] 删格布局
- [x] css编译
- [x] display 编辑模块
- [x] font 编辑模块
- [x] backgroundCommon 编辑模块
- [x] backgroundGradient 编辑模块
- [x] border 编辑模块
- [x] boxShadow 编辑模块
- [x] textShadow 编辑模块
- [x] transform 编辑模块
- [x] hooks - useCssPicker
- [x] hooks - useMergeAppData
- [ ] 组件测试
- [ ] 事件与统计
- [ ] Api对接
- [ ] 修改编辑器相互干扰
```typescript
import React, { Suspense, lazy, useEffect } from 'react';
import { connect } from 'react-redux';
import { RootState, Dispatch } from '~/redux/store';
import { AppDataElementsTypes } from './../../types/appData';
type StateProps = ReturnType;
type DispatchProps = ReturnType;
/**
* To do list !!!
* step1: 元件按需加载处理
* step2: 元件框架与数据结构定义
* step3: 测试元件
*
* @interface ElementsProps
* @extends {AppDataElementsTypes}
*/
interface ElementsProps extends AppDataElementsTypes {
id: string;
layout: {
[keys: string]: any;
};
}
const Elements: React.FC = ({
layout,
updateAppData,
...props
}) => {
useEffect(() => {
updateAppData([
{
moduleId: 'c',
layout: {
w: 10,
h: 11,
x: 1,
y: 0,
i: 'c',
moved: false,
static: false,
},
style: {
basic: {
display: {
width: 100,
height: 100,
},
backgroundCommon: {
backgroundColor: 'yellow',
},
},
},
content: { text: 'c' },
event: {},
type: 'Conterner',
},
]);
}, []);
const { type } = props;
const Comp = lazy(() => import(`~/modules/${type}`));
return (
Loading...}>
);
};
const mapState = (state: RootState) => ({
appData: state.appData,
});
const mapDispatch = (dispatch: Dispatch) => ({
updateAppData: dispatch.appData.updateAppData,
});
export default connect(mapState, mapDispatch)(Elements);
```