├── docs ├── core │ ├── hooks.md │ ├── types │ │ ├── CategoryType.md │ │ └── ConfigTypes.md │ ├── actions.md │ └── componets.md ├── brick-design │ └── index.md ├── bricks-web │ └── index.md ├── QQ.jpeg └── index.md ├── packages ├── core │ ├── .npmignore │ ├── README.md │ ├── src │ │ ├── components │ │ │ ├── LegoContext.ts │ │ │ └── LegoProvider.ts │ │ ├── types │ │ │ ├── index.ts │ │ │ ├── CategoryTypes.ts │ │ │ ├── ConfigTypes.ts │ │ │ └── StateTypes.ts │ │ ├── index.ts │ │ ├── __tests__ │ │ │ ├── configs │ │ │ │ ├── HTML │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── h.ts │ │ │ │ │ ├── p.ts │ │ │ │ │ ├── div.ts │ │ │ │ │ ├── span.ts │ │ │ │ │ ├── img.ts │ │ │ │ │ └── a.ts │ │ │ │ └── index.ts │ │ │ ├── reducers │ │ │ │ ├── handlePlatform.test.ts │ │ │ │ ├── handleHover.test.ts │ │ │ │ └── handleRedoUndo.test.ts │ │ │ ├── store.test.ts │ │ │ ├── utils │ │ │ │ └── index.test.ts │ │ │ └── hooks │ │ │ │ └── useSelector.test.tsx │ │ ├── actions │ │ │ ├── produceActions │ │ │ │ ├── redoUndo.ts │ │ │ │ ├── platform.ts │ │ │ │ ├── hover.ts │ │ │ │ ├── selectedComponent.ts │ │ │ │ ├── styles.ts │ │ │ │ ├── dragDrop.ts │ │ │ │ ├── componentConfig.ts │ │ │ │ └── props.ts │ │ │ ├── index.ts │ │ │ └── actionTypes.ts │ │ ├── reducers │ │ │ ├── handlePlatform.ts │ │ │ ├── handleHover.ts │ │ │ ├── handleRedoUndo.ts │ │ │ └── handleStyles.ts │ │ ├── store.ts │ │ └── hooks │ │ │ └── useSelector.ts │ ├── rollup.config.js │ ├── tsconfig.json │ ├── package.json │ └── LICENSE ├── brick-design │ ├── typing.d.ts │ ├── .npmignore │ ├── src │ │ ├── common │ │ │ ├── constants.ts │ │ │ ├── style.less │ │ │ └── events.ts │ │ ├── index.ts │ │ ├── __tests__ │ │ │ └── configs │ │ │ │ ├── HTML │ │ │ │ ├── index.ts │ │ │ │ ├── h.ts │ │ │ │ ├── p.ts │ │ │ │ ├── div.ts │ │ │ │ ├── span.ts │ │ │ │ ├── img.ts │ │ │ │ └── a.ts │ │ │ │ ├── index.ts │ │ │ │ └── htmlCategory.ts │ │ ├── components │ │ │ ├── ActionSheet │ │ │ │ ├── index.less │ │ │ │ ├── svgs │ │ │ │ │ ├── clear.svg │ │ │ │ │ ├── copy.svg │ │ │ │ │ └── delete.svg │ │ │ │ ├── configs.ts │ │ │ │ └── index.tsx │ │ │ ├── Guidelines │ │ │ │ └── index.less │ │ │ ├── Distances │ │ │ │ └── index.less │ │ │ ├── BrickTree │ │ │ │ ├── index.less │ │ │ │ ├── index.tsx │ │ │ │ └── ReactSortable.tsx │ │ │ └── Resize │ │ │ │ ├── index.less │ │ │ │ └── Item.tsx │ │ ├── global.less │ │ ├── hooks │ │ │ ├── useChildNodes.ts │ │ │ ├── useDragDrop.ts │ │ │ └── useSelect.ts │ │ └── warppers │ │ │ └── NoneContainer.ts │ ├── rollup.config.js │ ├── tsconfig.json │ ├── README.md │ ├── LICENSE │ └── package.json ├── brickd-render │ ├── src │ │ └── index.ts │ ├── README.md │ ├── rollup.config.js │ ├── tsconfig.json │ └── package.json └── bricks-web │ ├── .npmignore │ ├── typing.d.ts │ ├── rollup.config.js │ ├── src │ ├── global.less │ ├── PropComponent │ │ ├── StringArray.tsx │ │ ├── FunctionComponent.tsx │ │ ├── index.ts │ │ ├── NumberArray.tsx │ │ ├── JsonTextArea.tsx │ │ ├── EnumComponent.tsx │ │ ├── ObjectArrayComponent │ │ │ └── SortComponent.tsx │ │ ├── ObjectComponent │ │ │ └── SelectAddProps.tsx │ │ └── StringComponent.tsx │ ├── index.ts │ ├── BrickPreview │ │ ├── DragAbleItem.tsx │ │ └── index.less │ └── utils │ │ └── index.ts │ ├── tsconfig.json │ ├── README.md │ ├── package.json │ └── LICENSE ├── scripts ├── clean_package.sh ├── go_no_go.js └── create.rollup.config.js ├── .eslintignore ├── example ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── typings.d.ts ├── src │ ├── configs │ │ ├── componentConfigs │ │ │ ├── index.ts │ │ │ ├── HTML │ │ │ │ ├── index.ts │ │ │ │ ├── div.ts │ │ │ │ ├── span.ts │ │ │ │ ├── img.ts │ │ │ │ └── a.ts │ │ │ └── Ant │ │ │ │ ├── Tag.ts │ │ │ │ ├── Spin.ts │ │ │ │ ├── Alert.ts │ │ │ │ ├── Divider.ts │ │ │ │ ├── BackTop.ts │ │ │ │ ├── Affix.ts │ │ │ │ ├── Progress.ts │ │ │ │ ├── Icon.ts │ │ │ │ ├── Transfer.ts │ │ │ │ ├── Avatar.ts │ │ │ │ ├── Carousel.ts │ │ │ │ ├── Collapse.ts │ │ │ │ ├── PageHeader.ts │ │ │ │ ├── Switch.ts │ │ │ │ ├── Row.ts │ │ │ │ ├── Anchor.ts │ │ │ │ ├── Badge.ts │ │ │ │ ├── Timeline.ts │ │ │ │ ├── Tooltip.ts │ │ │ │ ├── Rate.ts │ │ │ │ ├── TimePicker.ts │ │ │ │ ├── InputNumber.ts │ │ │ │ ├── Popover.ts │ │ │ │ ├── Calendar.ts │ │ │ │ ├── Tree.ts │ │ │ │ ├── Checkbox.ts │ │ │ │ ├── Button.ts │ │ │ │ ├── Drawer.ts │ │ │ │ ├── Col.ts │ │ │ │ ├── Breadcrumb.ts │ │ │ │ └── index.ts │ │ ├── htmlCategory.ts │ │ └── index.ts │ ├── index.tsx │ ├── settingsPanel │ │ ├── styleSettings │ │ │ ├── styleConfigs │ │ │ │ ├── looks.ts │ │ │ │ ├── index.ts │ │ │ │ ├── margin.ts │ │ │ │ ├── position.ts │ │ │ │ └── float.ts │ │ │ ├── config │ │ │ │ └── index.ts │ │ │ └── NumberComponent.tsx │ │ ├── propsSettings │ │ │ ├── config │ │ │ │ └── index.ts │ │ │ ├── index.less │ │ │ └── Animate │ │ │ │ └── index.less │ │ └── index.tsx │ ├── DesignPanel.tsx │ ├── global.less │ ├── ComponentsPreview.tsx │ ├── index.less │ ├── toolBar │ │ ├── style.less │ │ └── component │ │ │ ├── SwitchPlatform.tsx │ │ │ └── GenerateTemplate.tsx │ └── App.tsx ├── config │ ├── jest │ │ ├── cssTransform.js │ │ └── fileTransform.js │ ├── pnpTs.js │ ├── getHttpsConfig.js │ └── paths.js ├── tsconfig.json ├── scripts │ └── test.js └── README.md ├── .prettierignore ├── .umirc.ts ├── .gitignore ├── lerna.json ├── tsconfig.jest.json ├── .prettierrc ├── .travis.yml ├── babel.config.js ├── tsconfig.base.json ├── commitlint.config.js ├── tsconfig.json ├── .github └── FUNDING.yml ├── .eslintrc ├── LICENSE └── README.md /docs/core/hooks.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/brick-design/index.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/bricks-web/index.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/core/types/CategoryType.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/core/.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | tsconfig.json 3 | rollup.config.js 4 | -------------------------------------------------------------------------------- /scripts/clean_package.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | set -e 3 | rimraf lib dist 4 | -------------------------------------------------------------------------------- /docs/QQ.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MisakiKata/react-visual-editor/master/docs/QQ.jpeg -------------------------------------------------------------------------------- /packages/brick-design/typing.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.less'; 2 | declare module '*.svg'; 3 | -------------------------------------------------------------------------------- /packages/brickd-render/src/index.ts: -------------------------------------------------------------------------------- 1 | export function f() { 2 | console.log('test') 3 | } 4 | -------------------------------------------------------------------------------- /packages/bricks-web/.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | tsconfig.json 3 | typing.d.ts 4 | rollup.config.js 5 | -------------------------------------------------------------------------------- /packages/brick-design/.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | tsconfig.json 3 | typing.d.ts 4 | rollup.config.js 5 | 6 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules/ 2 | **/lib/ 3 | **/dist/ 4 | **/public/ 5 | **/static/ 6 | packages/docs/ 7 | -------------------------------------------------------------------------------- /example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.md 2 | **/*.svg 3 | **/*.ejs 4 | **/*.html 5 | package.json 6 | .umi 7 | .umi-production 8 | -------------------------------------------------------------------------------- /packages/brick-design/src/common/constants.ts: -------------------------------------------------------------------------------- 1 | export const selectClassTarget='brickd-select-class-target' 2 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MisakiKata/react-visual-editor/master/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MisakiKata/react-visual-editor/master/example/public/logo192.png -------------------------------------------------------------------------------- /example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MisakiKata/react-visual-editor/master/example/public/logo512.png -------------------------------------------------------------------------------- /example/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.less'; 2 | declare module "*.png"; 3 | declare module "*.jpg"; 4 | declare module "*.json"; 5 | -------------------------------------------------------------------------------- /packages/bricks-web/typing.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.less'; 2 | declare module "*.png"; 3 | declare module "*.jpg"; 4 | declare module "*.json"; 5 | -------------------------------------------------------------------------------- /.umirc.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'dumi'; 2 | 3 | export default defineConfig({ 4 | mode:'site', 5 | title: 'Brick Design', 6 | hash: true, 7 | }); 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /yarn.lock 2 | /package-lock.json 3 | node_modules 4 | /pages 5 | .umi 6 | .umi-production 7 | .idea 8 | dist 9 | lib 10 | .jest-cache 11 | coverage 12 | -------------------------------------------------------------------------------- /example/src/configs/componentConfigs/index.ts: -------------------------------------------------------------------------------- 1 | import * as HTML from './HTML'; 2 | import Ant from './Ant'; 3 | 4 | export default { 5 | ...HTML, 6 | ...Ant, 7 | }; 8 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "version": "1.0.0-alpha.10", 4 | "useWorkspaces": true, 5 | "packages": [ 6 | "packages/*", 7 | "example" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /packages/brickd-render/README.md: -------------------------------------------------------------------------------- 1 | # `core` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const core = require('core'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/bricks-web/rollup.config.js: -------------------------------------------------------------------------------- 1 | import {createConfig} from '../../scripts/create.rollup.config' 2 | import pakg from './package.json' 3 | export default createConfig(pakg,'BricksWeb') 4 | -------------------------------------------------------------------------------- /packages/core/README.md: -------------------------------------------------------------------------------- 1 | # brickd-core 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const core = require('core'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /packages/core/src/components/LegoContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | import { Store } from 'redux'; 3 | 4 | export const LegoContext = createContext(null); 5 | -------------------------------------------------------------------------------- /packages/core/rollup.config.js: -------------------------------------------------------------------------------- 1 | import {createConfig} from '../../scripts/create.rollup.config' 2 | import pakg from './package.json' 3 | 4 | 5 | export default createConfig(pakg,'BrickdCore') 6 | -------------------------------------------------------------------------------- /tsconfig.jest.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "allowSyntheticDefaultImports": true, 5 | "esModuleInterop": true, 6 | "allowJs": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/brick-design/rollup.config.js: -------------------------------------------------------------------------------- 1 | import {createConfig} from '../../scripts/create.rollup.config' 2 | import pakg from './package.json' 3 | 4 | 5 | export default createConfig(pakg,'BrickDesign') 6 | -------------------------------------------------------------------------------- /packages/brickd-render/rollup.config.js: -------------------------------------------------------------------------------- 1 | import {createConfig} from '../../scripts/create.rollup.config' 2 | import pakg from './package.json' 3 | 4 | 5 | export default createConfig(pakg,'BrickdRender') 6 | -------------------------------------------------------------------------------- /packages/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "./lib", 5 | "baseUrl": "./src" 6 | }, 7 | "include": ["./src/index.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/core/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ConfigTypes'; 2 | export * from './ComponentConfigTypes'; 3 | export * from './ConfigTypes'; 4 | export * from './StateTypes'; 5 | export * from './CategoryTypes'; 6 | -------------------------------------------------------------------------------- /packages/bricks-web/src/global.less: -------------------------------------------------------------------------------- 1 | @content-height: calc(100vh - 120px); 2 | .rotate180 { 3 | transform: rotate(180deg); 4 | } 5 | 6 | .rotate90 { 7 | transform: rotate(90deg); 8 | } 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /example/src/configs/componentConfigs/HTML/index.ts: -------------------------------------------------------------------------------- 1 | export { default as div } from './div'; 2 | export { default as a } from './a'; 3 | export { default as span } from './span'; 4 | export { default as img } from './img'; 5 | -------------------------------------------------------------------------------- /packages/bricks-web/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "./lib", 5 | "baseUrl": "./src" 6 | }, 7 | "include": ["./src/index.ts","typing.d.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /example/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | 5 | import App from './App'; 6 | 7 | 8 | ReactDOM.render( 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /packages/brickd-render/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "./lib", 5 | "baseUrl": "./src" 6 | }, 7 | "include": [ 8 | "./src/index.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all", 4 | "printWidth": 100, 5 | "overrides": [ 6 | { 7 | "files": ".prettierrc", 8 | "options": { "parser": "json" } 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /packages/brick-design/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "./lib", 5 | "baseUrl": "./src" 6 | }, 7 | "include": [ 8 | "./src/index.ts","typing.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /docs/core/actions.md: -------------------------------------------------------------------------------- 1 | #### actions 2 | 3 | #### addComponent() 4 | 添加组件方法 5 | #### copyComponent() 6 | 复制组件，需要选中组件才可以执行复制，复制的组件会放到当前容器的最后一个。 7 | #### onLayoutSortChange(payload) 8 | 更新容器中组件顺序。 9 | 参数 playload={ 10 | sortKeys:string[], 11 | dragInfo:{key:string} 12 | } 13 | -------------------------------------------------------------------------------- /packages/brick-design/src/common/style.less: -------------------------------------------------------------------------------- 1 | @import "../global"; 2 | 3 | .forbid-event{ 4 | pointer-events: none; 5 | } 6 | 7 | .allow-event{ 8 | pointer-events: auto; 9 | } 10 | .hidden-component { 11 | display: none; 12 | transition: all 700ms; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /packages/core/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './types'; 2 | export * from './actions'; 3 | export * from './hooks/useSelector'; 4 | export * from './store'; 5 | export * from './components/LegoProvider'; 6 | export * from './utils'; 7 | export { produce, original } from 'immer'; 8 | -------------------------------------------------------------------------------- /packages/brick-design/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './common/events'; 2 | export * from './utils' 3 | export {default as BrickDesign } from './BrickDesign' 4 | export {default as BrickTree} from './components/BrickTree' 5 | export {default as ReactSortable} from './components/BrickTree/ReactSortable' 6 | -------------------------------------------------------------------------------- /packages/core/src/__tests__/configs/HTML/index.ts: -------------------------------------------------------------------------------- 1 | export { default as div } from './div'; 2 | export { default as a } from './a'; 3 | export { default as span } from './span'; 4 | export { default as img } from './img'; 5 | export { default as p } from './p'; 6 | export { default as h } from './h'; 7 | -------------------------------------------------------------------------------- /packages/core/src/actions/produceActions/redoUndo.ts: -------------------------------------------------------------------------------- 1 | import ACTION_TYPES from '../actionTypes'; 2 | import { createActions } from '../../store'; 3 | 4 | export const undo = () => createActions({ type: ACTION_TYPES.undo }); 5 | export const redo = () => createActions({ type: ACTION_TYPES.redo }); 6 | -------------------------------------------------------------------------------- /packages/brick-design/src/__tests__/configs/HTML/index.ts: -------------------------------------------------------------------------------- 1 | export { default as div } from './div'; 2 | export { default as a } from './a'; 3 | export { default as span } from './span'; 4 | export { default as img } from './img'; 5 | export { default as p } from './p'; 6 | export { default as h } from './h'; 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | #指定运行环境 2 | language: node_js 3 | #指定nodejs版本，可以指定多个 4 | node_js: node 5 | install: 6 | - npm install -g yarn 7 | - yarn install 8 | #运行的脚本命令 9 | after_success: 10 | - bash <(curl -s https://codecov.io/bash) 11 | 12 | #指定分支，只有指定的分支提交时才会运行脚本 13 | branches: 14 | only: 15 | - master 16 | -------------------------------------------------------------------------------- /example/src/configs/componentConfigs/Ant/Tag.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const Tag: ComponentConfigTypes = { 4 | propsConfig: { 5 | color: { 6 | label: '标签色', 7 | type: PROPS_TYPES.string, 8 | }, 9 | }, 10 | }; 11 | 12 | export default Tag; 13 | -------------------------------------------------------------------------------- /example/src/configs/componentConfigs/HTML/div.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const div: ComponentConfigTypes = { 4 | propsConfig: { 5 | children: { 6 | label: '文本内容', 7 | type: PROPS_TYPES.string, 8 | }, 9 | }, 10 | }; 11 | 12 | export default div; 13 | -------------------------------------------------------------------------------- /example/src/configs/componentConfigs/HTML/span.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const span: ComponentConfigTypes = { 4 | propsConfig: { 5 | children: { 6 | label: '文本内容', 7 | type: PROPS_TYPES.string, 8 | }, 9 | }, 10 | }; 11 | 12 | export default span; 13 | -------------------------------------------------------------------------------- /packages/core/src/actions/produceActions/platform.ts: -------------------------------------------------------------------------------- 1 | import ACTION_TYPES from '../actionTypes'; 2 | import { PlatformInfoType } from '../../types'; 3 | import { createActions } from '../../store'; 4 | 5 | export const changePlatform = (payload: PlatformInfoType) => createActions({ 6 | type: ACTION_TYPES.changePlatform, 7 | payload, 8 | }); 9 | -------------------------------------------------------------------------------- /packages/core/src/reducers/handlePlatform.ts: -------------------------------------------------------------------------------- 1 | import { PlatformInfoType, StateType } from '../types'; 2 | 3 | /** 4 | * 更改平台 5 | * @param state 6 | * @param payload 7 | */ 8 | export function changePlatform(state: StateType, payload: PlatformInfoType):StateType { 9 | return { 10 | ...state, 11 | platformInfo: payload, 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/__tests__/configs/index.ts: -------------------------------------------------------------------------------- 1 | import * as AllComponentConfigs from './HTML'; 2 | 3 | /** 4 | * 设计面板iframe 模板，如果集成到项目中，需要将拖拽组件所依赖的样式在模板中设置， 5 | * 否则设计面板渲染的页面将是无样式的效果 6 | */ 7 | const config: any = { 8 | OriginalComponents: {}, 9 | AllComponentConfigs, 10 | containers: ['div','a','p','span','h'], 11 | }; 12 | 13 | export default config; 14 | -------------------------------------------------------------------------------- /packages/core/src/__tests__/configs/HTML/h.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, PROPS_TYPES } from '../../../types'; 2 | 3 | const h: ComponentConfigTypes = { 4 | childNodesRule: ['img'], 5 | isRequired: true, 6 | propsConfig: { 7 | children: { 8 | label: '文本内容', 9 | type: PROPS_TYPES.string, 10 | }, 11 | }, 12 | }; 13 | 14 | export default h; 15 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', 5 | { 6 | modules: false, 7 | targets: { 8 | browsers: ['>0.25%, not dead'], 9 | }, 10 | }, 11 | ], 12 | '@babel/preset-typescript' 13 | ], 14 | plugins: [ 15 | '@babel/proposal-class-properties', 16 | '@babel/proposal-object-rest-spread', 17 | ], 18 | } 19 | -------------------------------------------------------------------------------- /example/src/settingsPanel/styleSettings/styleConfigs/looks.ts: -------------------------------------------------------------------------------- 1 | import { CSS_TYPE } from '../config'; 2 | 3 | export default { 4 | backgroundColor: { 5 | label: '背景色', 6 | span: 24, 7 | type: CSS_TYPE.string, 8 | props: { 9 | inputProps: { placeholder: '请输入或在右侧选择' }, 10 | isFont: false, 11 | isShowColor: true, 12 | }, 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /packages/brick-design/src/__tests__/configs/HTML/h.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const h: ComponentConfigTypes = { 4 | childNodesRule: ['img'], 5 | isRequired: true, 6 | propsConfig: { 7 | children: { 8 | label: '文本内容', 9 | type: PROPS_TYPES.string, 10 | }, 11 | }, 12 | }; 13 | 14 | export default h; 15 | -------------------------------------------------------------------------------- /example/config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/en/webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /packages/core/src/actions/index.ts: -------------------------------------------------------------------------------- 1 | export * from './produceActions/componentConfig'; 2 | export * from './produceActions/dragDrop'; 3 | export * from './produceActions/hover'; 4 | export * from './produceActions/platform'; 5 | export * from './produceActions/props'; 6 | export * from './produceActions/redoUndo'; 7 | export * from './produceActions/selectedComponent'; 8 | export * from './produceActions/styles'; 9 | 10 | -------------------------------------------------------------------------------- /packages/core/src/actions/produceActions/hover.ts: -------------------------------------------------------------------------------- 1 | import ACTION_TYPES from '../actionTypes'; 2 | import { createActions } from '../../store'; 3 | 4 | export const clearHovered = () => createActions({ type: ACTION_TYPES.clearHovered }); 5 | export type OverTargetPayload = { 6 | hoverKey: string 7 | } 8 | export const overTarget = (payload: OverTargetPayload) => createActions({ 9 | type: ACTION_TYPES.overTarget, 10 | payload, 11 | }); 12 | -------------------------------------------------------------------------------- /packages/core/src/__tests__/configs/HTML/p.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from '../../../types'; 2 | 3 | const p: ComponentConfigTypes = { 4 | nodePropsConfig: { 5 | children: { 6 | type: NODE_PROPS_TYPES.reactNode, 7 | }, 8 | }, 9 | propsConfig: { 10 | children: { 11 | label: '文本内容', 12 | type: PROPS_TYPES.string, 13 | }, 14 | }, 15 | }; 16 | 17 | export default p; 18 | -------------------------------------------------------------------------------- /packages/brick-design/src/__tests__/configs/HTML/p.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const p: ComponentConfigTypes = { 4 | nodePropsConfig: { 5 | children: { 6 | type: NODE_PROPS_TYPES.reactNode, 7 | }, 8 | }, 9 | propsConfig: { 10 | children: { 11 | label: '文本内容', 12 | type: PROPS_TYPES.string, 13 | }, 14 | }, 15 | }; 16 | 17 | export default p; 18 | -------------------------------------------------------------------------------- /example/src/settingsPanel/styleSettings/config/index.ts: -------------------------------------------------------------------------------- 1 | import { TYPES_TO_COMPONENT } from 'bricks-web'; 2 | import NumberComponent from '../NumberComponent'; 3 | 4 | /** 5 | * 样式类型定义 6 | */ 7 | export enum CSS_TYPE { 8 | string = 'string', 9 | enum = 'enum', 10 | number = 'number', 11 | }; 12 | 13 | 14 | export const CSS_TYPE_TO_COMPONENT:any = { 15 | ...TYPES_TO_COMPONENT, 16 | [CSS_TYPE.number]:NumberComponent 17 | }; 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "incremental": true, 4 | "target": "esnext", 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "lib": ["esnext", "dom"], 8 | "strict": false, 9 | "experimentalDecorators": true, 10 | "noUnusedLocals": true, 11 | "jsx": "react", 12 | "forceConsistentCasingInFileNames": true, 13 | "declaration": true, 14 | "allowSyntheticDefaultImports": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /scripts/go_no_go.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires, no-console */ 2 | const inquirer = require('inquirer') 3 | inquirer 4 | .prompt([ 5 | { 6 | type: 'input', 7 | default: false, 8 | name: 'go', 9 | message: 'Is everything ready for publication?', 10 | }, 11 | ]) 12 | .then(answers => { 13 | if (answers.go === 'true') { 14 | console.log('🚀') 15 | } else { 16 | console.log('💥') 17 | process.exit(1) 18 | } 19 | }) 20 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'], 3 | rules: { 4 | // 72 is too constricting, especially with a required subject 5 | 'header-max-length': [2, 'always', '120'], 6 | }, 7 | }; 8 | 9 | // config-conventional defines the following subjects: 10 | // 'build', 11 | // 'chore', 12 | // 'ci', 13 | // 'docs', 14 | // 'feat', 15 | // 'fix', 16 | // 'perf', 17 | // 'refactor', 18 | // 'revert', 19 | // 'style', 20 | // 'test' 21 | -------------------------------------------------------------------------------- /packages/brick-design/src/__tests__/configs/index.ts: -------------------------------------------------------------------------------- 1 | import { htmlContainers, htmlNonContainers } from './htmlCategory'; 2 | import * as AllComponentConfigs from './HTML'; 3 | 4 | /** 5 | * 设计面板iframe 模板，如果集成到项目中，需要将拖拽组件所依赖的样式在模板中设置， 6 | * 否则设计面板渲染的页面将是无样式的效果 7 | */ 8 | const config: any = { 9 | OriginalComponents: {}, 10 | AllComponentConfigs, 11 | CONTAINER_CATEGORY: htmlContainers, 12 | NON_CONTAINER_CATEGORY: htmlNonContainers, 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "importHelpers": true, 7 | "jsx": "react", 8 | "esModuleInterop": true, 9 | "sourceMap": true, 10 | "baseUrl": "./", 11 | "strict": true, 12 | "paths": { 13 | "@/*": ["src/*"] 14 | }, 15 | "allowSyntheticDefaultImports": true 16 | }, 17 | "exclude": ["node_modules", "dist", 18 | "typings","__tests__"] 19 | } 20 | -------------------------------------------------------------------------------- /packages/core/src/__tests__/reducers/handlePlatform.test.ts: -------------------------------------------------------------------------------- 1 | import { reducer } from '../../reducers'; 2 | import ACTION_TYPES from '../../actions/actionTypes'; 3 | import { legoState } from '../../store'; 4 | import { PlatformInfoType } from '../../types'; 5 | 6 | test('更改平台信息', () => { 7 | const payload: PlatformInfoType = { size: [1, 3], isMobile: true }; 8 | const state = reducer(legoState, { type: ACTION_TYPES.changePlatform, payload }); 9 | expect(state.platformInfo).toBe(payload); 10 | }); 11 | -------------------------------------------------------------------------------- /packages/core/src/__tests__/configs/HTML/div.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from '../../../types'; 2 | 3 | const div: ComponentConfigTypes = { 4 | fatherNodesRule: ['div.children'], 5 | nodePropsConfig: { 6 | children: { 7 | type: NODE_PROPS_TYPES.reactNode, 8 | childNodesRule: ['img', 'div', 'span'], 9 | }, 10 | }, 11 | propsConfig: { 12 | children: { 13 | label: '文本内容', 14 | type: PROPS_TYPES.string, 15 | }, 16 | }, 17 | }; 18 | 19 | export default div; 20 | -------------------------------------------------------------------------------- /packages/brick-design/src/__tests__/configs/HTML/div.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const div: ComponentConfigTypes = { 4 | fatherNodesRule: ['div.children'], 5 | nodePropsConfig: { 6 | children: { 7 | type: NODE_PROPS_TYPES.reactNode, 8 | childNodesRule: ['img', 'div', 'span'], 9 | }, 10 | }, 11 | propsConfig: { 12 | children: { 13 | label: '文本内容', 14 | type: PROPS_TYPES.string, 15 | }, 16 | }, 17 | }; 18 | 19 | export default div; 20 | -------------------------------------------------------------------------------- /example/src/DesignPanel.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './index.less'; 3 | import { BrickDesign } from 'brickd'; 4 | import { useSelector } from 'brickd-core'; 5 | export default function DesignPanel(){ 6 | const {platformInfo}=useSelector(['platformInfo']) 7 | const {size} = platformInfo; 8 | 9 | const style = {width: size[0], maxHeight: size[1], transition: 'all 700ms'}; 10 | 11 | return (
12 | 13 |
) 14 | } 15 | -------------------------------------------------------------------------------- /packages/bricks-web/src/PropComponent/StringArray.tsx: -------------------------------------------------------------------------------- 1 | import React, { forwardRef, memo } from 'react'; 2 | import { Select } from 'antd'; 3 | import { SelectProps } from 'antd/es/select'; 4 | import { propsAreEqual } from '../utils'; 5 | 6 | function StringArray(props: SelectProps, ref: any) { 7 | return { 14 | const { value } = e.target; 15 | const result: any = value && `this.${value}`; 16 | onChange && onChange(result); 17 | }} 18 | value={resultValue} 19 | allowClear 20 | {...rest} />); 21 | } 22 | 23 | export default memo(forwardRef(FunctionComponent), propsAreEqual); 24 | -------------------------------------------------------------------------------- /packages/core/src/components/LegoProvider.ts: -------------------------------------------------------------------------------- 1 | import { createElement } from 'react'; 2 | import { LegoContext } from './LegoContext'; 3 | import { createLegStore, LEGO_BRIDGE } from '../store'; 4 | import { ConfigType, StateType } from '../types'; 5 | import { ReducerType } from '../reducers'; 6 | 7 | export interface LegoProviderProps { 8 | children?: any, 9 | initState?: Partial, 10 | config?: ConfigType, 11 | reduce?:ReducerType 12 | } 13 | 14 | export function LegoProvider({ children, initState, config,reduce }: LegoProviderProps = {}) { 15 | if (!LEGO_BRIDGE.config && !config) { 16 | throw Error('config未初始化'); 17 | } else if (!LEGO_BRIDGE.config) { 18 | LEGO_BRIDGE.config = config; 19 | } 20 | return createElement(LegoContext.Provider, { value: createLegStore(initState,reduce) }, children); 21 | } 22 | -------------------------------------------------------------------------------- /packages/brick-design/src/components/ActionSheet/configs.ts: -------------------------------------------------------------------------------- 1 | import { clearChildNodes, copyComponent, deleteComponent } from 'brickd-core'; 2 | import deleteSvg from './svgs/delete.svg'; 3 | import copySvg from './svgs/copy.svg'; 4 | import clearSvg from './svgs/clear.svg'; 5 | 6 | interface ActionSheetConfig{ 7 | icon:any, 8 | action:()=>{}, 9 | type:string 10 | } 11 | 12 | export const ACTIONS={ 13 | delete:'delete', 14 | copy:'copy', 15 | clear:'clear' 16 | } 17 | const configs:ActionSheetConfig[]= [ 18 | { 19 | type:ACTIONS.delete, 20 | action:deleteComponent, 21 | icon:deleteSvg 22 | }, 23 | { 24 | type:ACTIONS.copy, 25 | action:copyComponent, 26 | icon:copySvg 27 | }, 28 | { 29 | type:ACTIONS.clear, 30 | action:clearChildNodes, 31 | icon:clearSvg 32 | } 33 | ] 34 | 35 | export default configs 36 | -------------------------------------------------------------------------------- /example/src/configs/componentConfigs/Ant/BackTop.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const BackTop: ComponentConfigTypes = { 4 | 5 | propsConfig: { 6 | target: { 7 | label: '监听滚动事件元素', 8 | tip: '设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数', 9 | type: PROPS_TYPES.function, 10 | placeholder: '(window)=> {}', 11 | }, 12 | children: { 13 | label: '回到顶部按钮', 14 | type: PROPS_TYPES.string, 15 | }, 16 | visibilityHeight: { 17 | label: '滚动高度', 18 | tip: ' 滚动高度达到此参数值才出现 BackTop', 19 | type: PROPS_TYPES.number, 20 | defaultValue: 400, 21 | }, 22 | onClick: { 23 | label: '点击回调', 24 | tip: '点击按钮的回调函数', 25 | type: PROPS_TYPES.function, 26 | placeholder: '() => {}', 27 | }, 28 | }, 29 | }; 30 | 31 | export default BackTop; 32 | -------------------------------------------------------------------------------- /example/src/configs/componentConfigs/Ant/Affix.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const Affix: ComponentConfigTypes = { 4 | propsConfig: { 5 | offsetBottom: { 6 | label: '达到偏移量后触发', 7 | tip: '距离窗口底部达到指定偏移量后触发', 8 | type: PROPS_TYPES.number, 9 | }, 10 | offsetTop: { 11 | label: '达到偏移量后触发', 12 | tip: '距离窗口顶部达到指定偏移量后触发', 13 | type: PROPS_TYPES.number, 14 | }, 15 | target: { 16 | label: '监听滚动事件的元素', 17 | tip: '设置 Affix 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数', 18 | type: PROPS_TYPES.function, 19 | placeholder: '() => window', 20 | }, 21 | onChange: { 22 | label: '状态改变时触发', 23 | tip: '固定状态改变时触发的回调函数', 24 | type: PROPS_TYPES.function, 25 | placeholder: '(affixed)=>{}', 26 | }, 27 | }, 28 | }; 29 | 30 | export default Affix; 31 | -------------------------------------------------------------------------------- /packages/brick-design/src/components/Distances/index.less: -------------------------------------------------------------------------------- 1 | @import "../../global"; 2 | .distances-common{ 3 | position: absolute; 4 | z-index: 30000; 5 | display: none; 6 | justify-content: center; 7 | align-items: center; 8 | pointer-events: none; 9 | .animate(); 10 | 11 | } 12 | 13 | 14 | .distances-v{ 15 | .distances-common(); 16 | width: 1px; 17 | height: 100%; 18 | background-color: @selectColor; 19 | &:before{ 20 | .distances-tip(); 21 | content: attr(data-distance); 22 | pointer-events: none; 23 | left: 5px; 24 | } 25 | } 26 | 27 | 28 | .distances-h{ 29 | .distances-common(); 30 | height: 1px; 31 | width: 100%; 32 | background-color: @selectColor; 33 | 34 | &:before{ 35 | .distances-tip(); 36 | content: attr(data-distance); 37 | pointer-events: none; 38 | top: -20px; 39 | } 40 | 41 | } 42 | 43 | -------------------------------------------------------------------------------- /example/src/settingsPanel/styleSettings/styleConfigs/index.ts: -------------------------------------------------------------------------------- 1 | import font from './font'; 2 | import margin from './margin'; 3 | import looks from './looks'; 4 | import float from './float'; 5 | import position from './position'; 6 | import { CSS_TYPE } from '../config'; 7 | 8 | export interface CssConfigType { 9 | [cssName: string]: { 10 | label: string, 11 | span: number, 12 | labelSpan: number, 13 | valueSpan: number, 14 | type: CSS_TYPE, 15 | props: any 16 | } 17 | } 18 | 19 | 20 | const className = { 21 | classNameSelf: { 22 | label: '字体', 23 | labelSpan: 0, 24 | valueSpan: 24, 25 | span: 24, 26 | type: CSS_TYPE.string, 27 | props: { isShowColor: false, inputColProps: { span: 24 } }, 28 | }, 29 | }; 30 | 31 | export default { 32 | className, 33 | font, 34 | margin, 35 | looks, 36 | float, 37 | position, 38 | }; 39 | -------------------------------------------------------------------------------- /packages/core/src/__tests__/utils/index.test.ts: -------------------------------------------------------------------------------- 1 | import { getComponentConfig, isContainer } from '../../utils'; 2 | import { LEGO_BRIDGE } from '../../store'; 3 | import config from '../configs'; 4 | 5 | describe('getComponentConfig', ()=>{ 6 | 7 | it('如果没有配置组件配置信息集报错',()=>{ 8 | console.error=jest.fn() 9 | expect(getComponentConfig).toThrow() 10 | }) 11 | 12 | it('未找到指定组件的配置信息',()=>{ 13 | LEGO_BRIDGE.config=config 14 | console.warn=jest.fn() 15 | getComponentConfig('table') 16 | expect(console.warn).toBeCalled() 17 | }) 18 | }) 19 | 20 | describe('isContainer', ()=>{ 21 | it('如果没有配置容器信息集报错',()=>{ 22 | LEGO_BRIDGE.config=undefined 23 | console.error=jest.fn() 24 | expect(isContainer).toThrow() 25 | }) 26 | 27 | it('未找到指定组件的配置信息',()=>{ 28 | LEGO_BRIDGE.config=config 29 | expect(isContainer('a')).toBeTruthy() 30 | }) 31 | }) 32 | 33 | -------------------------------------------------------------------------------- /packages/core/src/actions/produceActions/componentConfig.ts: -------------------------------------------------------------------------------- 1 | import ACTION_TYPES from '../actionTypes'; 2 | import { createActions } from '../../store'; 3 | import { ParentNodeInfo } from '../../types'; 4 | 5 | export const addComponent = () => createActions({ type: ACTION_TYPES.addComponent }); 6 | export const copyComponent = () => createActions({ type: ACTION_TYPES.copyComponent }); 7 | 8 | export type DragInfoType = ParentNodeInfo & { key: string } 9 | export type LayoutSortPayload = ParentNodeInfo & { sortKeys: string[], dragInfo?: DragInfoType } 10 | 11 | export const onLayoutSortChange = (payload: LayoutSortPayload) => createActions({ 12 | type: ACTION_TYPES.onLayoutSortChange, 13 | payload, 14 | }); 15 | export const deleteComponent = () => createActions({ type: ACTION_TYPES.deleteComponent }); 16 | export const clearChildNodes = () => createActions({ type: ACTION_TYPES.clearChildNodes }); 17 | -------------------------------------------------------------------------------- /example/src/configs/componentConfigs/Ant/Progress.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const Progress: ComponentConfigTypes = { 4 | propsConfig: { 5 | percent: { 6 | label: '百分比', 7 | tip: '百分比', 8 | type: PROPS_TYPES.number, 9 | defaultValue: 50, 10 | }, 11 | showInfo: { 12 | label: '进度数值显示', 13 | tip: '是否显示进度数值或状态图标', 14 | type: PROPS_TYPES.boolean, 15 | defaultValue: true, 16 | }, 17 | status: { 18 | label: '状态', 19 | tip: ' 状态，可选：success exception active', 20 | type: PROPS_TYPES.enum, 21 | enumData: ['success', 'exception', 'active'], 22 | }, 23 | type: { 24 | label: '类型', 25 | tip: '类型，可选 line circle dashboard', 26 | type: PROPS_TYPES.enum, 27 | enumData: ['line', 'circle', 'dashboard'], 28 | }, 29 | }, 30 | }; 31 | 32 | export default Progress; 33 | -------------------------------------------------------------------------------- /packages/brick-design/src/components/BrickTree/index.less: -------------------------------------------------------------------------------- 1 | @import "../../global"; 2 | 3 | .sort-container { 4 | height: 100%; 5 | overflow: auto; 6 | background: #fff; 7 | 8 | :global{ 9 | .rc-collapse { 10 | background-color: #f7f7f7; 11 | } 12 | .rc-collapse-anim-active { 13 | transition: height 0.15s ease-out; 14 | } 15 | 16 | .rc-collapse-content { 17 | overflow: hidden; 18 | color: #666; 19 | background-color: #fff; 20 | } 21 | 22 | .rc-collapse-content-inactive { 23 | display: none; 24 | } 25 | 26 | } 27 | 28 | } 29 | 30 | .header-container { 31 | display: flex; 32 | flex: 1; 33 | justify-content: space-between; 34 | align-items: center; 35 | padding: 5px 15px 5px 10px; 36 | } 37 | 38 | .item-background { 39 | background-color: #d9d9d9; 40 | } 41 | 42 | 43 | .sort-item { 44 | position: relative; 45 | 46 | } 47 | 48 | -------------------------------------------------------------------------------- /packages/bricks-web/src/index.ts: -------------------------------------------------------------------------------- 1 | import { PROPS_TYPES } from 'brickd-core'; 2 | import { InputNumber, Switch } from 'antd'; 3 | import { 4 | EnumComponent, 5 | FunctionComponent, 6 | JsonTextArea, 7 | NumberArray, 8 | ObjectArrayComponent, 9 | ObjectComponent, 10 | StringArray, 11 | StringComponent, 12 | } from './PropComponent'; 13 | 14 | export {default as BrickPreview} from './BrickPreview' 15 | export * from './PropComponent' 16 | 17 | 18 | export const TYPES_TO_COMPONENT:any={ 19 | [PROPS_TYPES.object]: ObjectComponent, 20 | [PROPS_TYPES.objectArray]: ObjectArrayComponent, 21 | [PROPS_TYPES.string]: StringComponent, 22 | [PROPS_TYPES.function]: FunctionComponent, 23 | [PROPS_TYPES.numberArray]: NumberArray, 24 | [PROPS_TYPES.stringArray]: StringArray, 25 | [PROPS_TYPES.enum]: EnumComponent, 26 | [PROPS_TYPES.json]: JsonTextArea, 27 | [PROPS_TYPES.boolean]: Switch, 28 | [PROPS_TYPES.number]:InputNumber 29 | } 30 | -------------------------------------------------------------------------------- /packages/brick-design/src/components/ActionSheet/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react'; 2 | import styles from './index.less'; 3 | import configs, { ACTIONS } from './configs'; 4 | 5 | interface ActionSheetProps { 6 | isOut: boolean, 7 | hasChildNodes: boolean, 8 | isRoot: boolean 9 | } 10 | 11 | function ActionSheet(props: ActionSheetProps) { 12 | const { isOut, isRoot, hasChildNodes } = props; 13 | 14 | return (
15 | {configs.map((config) => { 16 | const { icon, action, type } = config; 17 | if (isRoot && type === ACTIONS.copy) return null; 18 | if (!hasChildNodes && type === ACTIONS.clear) return null; 19 | return (
20 | 21 |
); 22 | })} 23 |
); 24 | } 25 | 26 | export default memo(ActionSheet) 27 | -------------------------------------------------------------------------------- /packages/brick-design/src/components/ActionSheet/svgs/copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "brickd-core", 3 | "version": "1.0.0-alpha.10", 4 | "description": "> TODO: description", 5 | "author": "anye931123 <1278998669@qq.com>", 6 | "license": "MIT", 7 | "main": "./dist/cjs/index.js", 8 | "module": "./dist/esm/index.js", 9 | "types": "./lib/index.d.ts", 10 | "sideEffects": false, 11 | "scripts": { 12 | "build": "tsc && rollup -c rollup.config.js", 13 | "clean": "../../scripts/clean_package.sh", 14 | "dev": "tsc -w && rollup -c rollup.config.js -w" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/brick-design/react-visual-editor.git" 19 | }, 20 | "dependencies": { 21 | "immer": "^6.0.5", 22 | "lodash": "^4.17.15", 23 | "react": "^16.8.0", 24 | "redux": "^4.0.5" 25 | }, 26 | "devDependencies": { 27 | "@types/lodash": "^4.14.149", 28 | "@types/react": "^16.9.35" 29 | }, 30 | "peerDependencies": { 31 | "react": ">= 16.8" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/bricks-web/src/PropComponent/index.ts: -------------------------------------------------------------------------------- 1 | import { Modal } from 'antd'; 2 | 3 | export { default as ObjectComponent } from './ObjectComponent/ObjectComponent'; 4 | export { default as ObjectArrayComponent } from './ObjectArrayComponent/ObjectArrayComponent'; 5 | export { default as SortComponent } from './ObjectArrayComponent/SortComponent'; 6 | export { default as StringArray } from './StringArray'; 7 | export { default as JsonTextArea } from './JsonTextArea'; 8 | export { default as NumberArray } from './NumberArray'; 9 | export { default as FunctionComponent } from './FunctionComponent'; 10 | export {default as StringComponent} from './StringComponent'; 11 | export {default as EnumComponent} from './EnumComponent'; 12 | export {default as SwitchMultiTypes} from './SwitchMultiTypes' 13 | 14 | export const confirmModal = (fnBsn: () => void) => 15 | Modal.confirm({ 16 | title: '你确定要删除此项吗?', 17 | onOk() { 18 | fnBsn(); 19 | }, 20 | }); 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /packages/core/src/__tests__/reducers/handleHover.test.ts: -------------------------------------------------------------------------------- 1 | import { reducer } from '../../reducers'; 2 | import ACTION_TYPES from '../../actions/actionTypes'; 3 | import { OverTargetPayload } from '../../actions'; 4 | import { legoState } from '../../store'; 5 | import { StateType } from '../../types'; 6 | import { ROOT } from '../../utils'; 7 | 8 | describe('hover 状态', () => { 9 | const payload: OverTargetPayload = { hoverKey: '1' }; 10 | const action = { type: ACTION_TYPES.overTarget, payload }; 11 | it('hover一个新组件', () => { 12 | const state = reducer(legoState, action); 13 | expect(state.hoverKey).toBe('1'); 14 | }); 15 | it('重复hover一个组件', () => { 16 | const prevState: StateType = { ...legoState, hoverKey: '1' }; 17 | const nextState = reducer(prevState, action); 18 | expect(nextState).toBe(prevState); 19 | }); 20 | }); 21 | test('清除hover状态', () => { 22 | const state = reducer({ ...legoState, hoverKey: ROOT }, { type: ACTION_TYPES.clearHovered }); 23 | expect(state.hoverKey).toBeNull(); 24 | }); 25 | -------------------------------------------------------------------------------- /example/src/configs/index.ts: -------------------------------------------------------------------------------- 1 | import { htmlContainers, htmlNonContainers } from './htmlCategory'; 2 | import { reactContainers, reactNonContainers } from './reactCategory'; 3 | import * as Ants from 'antd/es'; 4 | import AllComponentConfigs from './componentConfigs'; 5 | import { CategoryType, ConfigType } from 'brickd-core'; 6 | import { flattenDeepArray } from '../utils'; 7 | import { message } from 'antd'; 8 | 9 | /** 10 | * 容器组件分类 11 | */ 12 | export const CONTAINER_CATEGORY = { ...reactContainers, ...htmlContainers }; 13 | /** 14 | * 非容器组件分类 15 | * @type {{Input, InputNumber, Slider, Checkbox, Rate, Radio, Icon, Typography}} 16 | */ 17 | export const NON_CONTAINER_CATEGORY = { ...reactNonContainers, ...htmlNonContainers }; 18 | 19 | /** 20 | * 设计面板iframe 模板，如果集成到项目中，需要将拖拽组件所依赖的样式在模板中设置， 21 | * 否则设计面板渲染的页面将是无样式的效果 22 | */ 23 | const config: ConfigType = { 24 | OriginalComponents:Ants, 25 | AllComponentConfigs, 26 | containers:flattenDeepArray(CONTAINER_CATEGORY), 27 | warn:(msg:string)=>{message.warning(msg)} 28 | }; 29 | 30 | export default config; 31 | -------------------------------------------------------------------------------- /packages/brick-design/src/components/Resize/index.less: -------------------------------------------------------------------------------- 1 | @import "../../global"; 2 | .border-container{ 3 | position: absolute; 4 | z-index: 20000; 5 | border: 1px @selectColor solid; 6 | pointer-events: none; 7 | display: none; 8 | justify-content: center; 9 | align-items: center; 10 | transition: all 100ms; 11 | 12 | } 13 | 14 | .baseboard{ 15 | position:absolute; 16 | z-index: 10000; 17 | top: 0; 18 | left: 0; 19 | height: 100%; 20 | width: 100%; 21 | background-color: @transparent; 22 | display: none; 23 | pointer-events: auto; 24 | } 25 | 26 | 27 | .size-tip-width{ 28 | .distances-tip(); 29 | pointer-events: auto; 30 | top: 5px; 31 | 32 | 33 | } 34 | .size-tip-height{ 35 | .distances-tip(); 36 | pointer-events: auto; 37 | left: 5px; 38 | } 39 | 40 | .tip-hidden{ 41 | display: none; 42 | } 43 | 44 | .resize-item{ 45 | position: absolute; 46 | height: 7px; 47 | width: 7px; 48 | border-radius: 50%; 49 | background-color: white; 50 | border: 1px @selectColor solid; 51 | pointer-events: auto; 52 | 53 | 54 | } 55 | -------------------------------------------------------------------------------- /packages/bricks-web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bricks-web", 3 | "version": "1.0.0-alpha.10", 4 | "description": "> TODO: description", 5 | "author": "anye931123 <1278998669@qq.com>", 6 | "license": "MIT", 7 | "main": "./dist/cjs/index.js", 8 | "module": "./dist/esm/index.js", 9 | "types": "./lib/index.d.ts", 10 | "sideEffects": false, 11 | "scripts": { 12 | "build": "tsc && rollup -c rollup.config.js", 13 | "clean": "../../scripts/clean_package.sh", 14 | "dev": "tsc -w && rollup -c rollup.config.js -w" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/brick-design/react-visual-editor.git" 19 | }, 20 | "dependencies": { 21 | "antd": "3.26.16", 22 | "brickd": "^1.0.0-alpha.10", 23 | "brickd-core": "^1.0.0-alpha.10", 24 | "lodash": "^4.17.15", 25 | "react": "^16.8.0", 26 | "react-color": "^2.18.0", 27 | "sortablejs": "^1.10.2" 28 | }, 29 | "peerDependencies": { 30 | "react": ">=16.8.0" 31 | }, 32 | "devDependencies": { 33 | "@types/sortablejs": "^1.10.4" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/core/src/types/ConfigTypes.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes } from './ComponentConfigTypes'; 2 | 3 | /** 4 | * 属性类型定义 5 | */ 6 | export enum PROPS_TYPES { 7 | object = 'object', 8 | objectArray = 'objectArray', 9 | function = 'function', 10 | number = 'number', 11 | numberArray = 'numberArray', 12 | string = 'string', 13 | stringArray = 'stringArray', 14 | enum = 'enum', 15 | json = 'json', 16 | boolean = 'boolean' 17 | } 18 | 19 | export enum NODE_PROPS_TYPES { 20 | reactNode = 'reactNode', 21 | functionReactNode = 'functionReactNode', 22 | } 23 | 24 | export type ALL_TYPE = PROPS_TYPES | NODE_PROPS_TYPES 25 | 26 | /** 27 | * 全局配置类型定义 28 | */ 29 | interface OriginalComponentsType { 30 | [componentName: string]: any 31 | } 32 | 33 | export type AllComponentConfigsType={ [componentName: string]: ComponentConfigTypes } 34 | 35 | export interface ConfigType { 36 | OriginalComponents: OriginalComponentsType, //所有的React原始组件 37 | //所有的组件配置汇总 38 | AllComponentConfigs: AllComponentConfigsType, 39 | containers:string[], 40 | warn?: (msg: string) => void 41 | } 42 | -------------------------------------------------------------------------------- /example/src/configs/componentConfigs/Ant/Icon.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const Icon: ComponentConfigTypes = { 4 | propsConfig: { 5 | type: { 6 | label: '图标类型', 7 | tip: '图标类型。遵循图标的命名规范', 8 | type: PROPS_TYPES.string, 9 | }, 10 | style: { 11 | label: '图标样式', 12 | tip: '设置图标的样式，例如 fontSize 和 color', 13 | type: PROPS_TYPES.object, 14 | childPropsConfig: {}, 15 | }, 16 | theme: { 17 | label: '图标风格', 18 | tip: '图标主题风格', 19 | type: PROPS_TYPES.enum, 20 | enumData: ['filled', 'outlined', 'twoTone'], 21 | }, 22 | spin: { 23 | label: '旋转动画', 24 | tip: '是否有旋转动画', 25 | type: PROPS_TYPES.boolean, 26 | }, 27 | rotate: { 28 | label: '图标旋转角度', 29 | tip: '图标旋转角度（3.13.0 后新增，IE9 无效）', 30 | type: PROPS_TYPES.number, 31 | }, 32 | twoToneColor: { 33 | label: '双色图标颜色', 34 | tip: '仅适用双色图标。设置双色图标的主要颜色', 35 | type: PROPS_TYPES.string, 36 | isShowColor: true, 37 | }, 38 | }, 39 | }; 40 | 41 | export default Icon; 42 | -------------------------------------------------------------------------------- /packages/core/src/actions/produceActions/props.ts: -------------------------------------------------------------------------------- 1 | import ACTION_TYPES from '../actionTypes'; 2 | import { createActions } from '../../store'; 3 | import { PROPS_TYPES, PropsConfigType } from '../../types'; 4 | 5 | export type AddPropsConfigPayload = { 6 | newPropField?: string, 7 | fatherFieldLocation: string, 8 | childPropsConfig?: PropsConfigType[], 9 | propType?: PROPS_TYPES 10 | } 11 | export const addPropsConfig = (payload: AddPropsConfigPayload) => createActions({ 12 | type: ACTION_TYPES.addPropsConfig, 13 | payload, 14 | }); 15 | export type DeletePropsConfigPayload = { 16 | fatherFieldLocation: string, 17 | field: string 18 | } 19 | export const deletePropsConfig = (payload: DeletePropsConfigPayload) => createActions({ 20 | type: ACTION_TYPES.deletePropsConfig, 21 | payload, 22 | }); 23 | export type ChangePropsPayload = { 24 | props: any 25 | } 26 | export const changeProps = (payload: ChangePropsPayload) => createActions({ 27 | type: ACTION_TYPES.changeProps, 28 | payload, 29 | }); 30 | 31 | export const resetProps = () => createActions({ type: ACTION_TYPES.resetProps }); 32 | -------------------------------------------------------------------------------- /example/src/configs/componentConfigs/Ant/Transfer.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const Transfer: ComponentConfigTypes = { 4 | propsConfig: { 5 | render: { 6 | label: '行元素渲染', 7 | tip: 8 | '每行数据渲染函数，该函数的入参为 dataSource 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 label 字段为 ReactElement，value 字段为 title', 9 | type: PROPS_TYPES.function, 10 | placeholder: '(record) => {}', 11 | rules: [ 12 | { 13 | required: true, 14 | message: '请输入render方法名称', 15 | }, 16 | ], 17 | }, 18 | showSearch: { 19 | label: '是否显示搜索框', 20 | type: PROPS_TYPES.boolean, 21 | defaultValue: false, 22 | }, 23 | titles: { 24 | label: '标题集合', 25 | tip: '标题集合，顺序从左至右', 26 | type: PROPS_TYPES.stringArray, 27 | stringCount: 2, 28 | }, 29 | onChange: { 30 | label: '数据切换函数', 31 | tip: '选项在两栏之间转移时的回调函数', 32 | type: PROPS_TYPES.function, 33 | placeholder: '(targetKeys, direction, moveKeys) => {}', 34 | }, 35 | }, 36 | }; 37 | 38 | export default Transfer; 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | MIT License 3 | 4 | Copyright (c) 2020 anye 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /packages/core/src/reducers/handleRedoUndo.ts: -------------------------------------------------------------------------------- 1 | import { each, get } from 'lodash'; 2 | import { StateType } from '../types'; 3 | 4 | /** 5 | * 撤销 6 | * @param state 7 | * @returns {(*&void&{undo: *, redo: *})|(*&T&{undo: *, redo: *})} 8 | */ 9 | export function undo(state: StateType) { 10 | const { undo, redo } = state; 11 | if (undo.length == 0) return state; 12 | const nextState = undo.pop(); 13 | const prevState: any = {}; 14 | each(nextState, (_, key) => prevState[key] = get(state, key)); 15 | redo.push(prevState); 16 | return { 17 | ...state, 18 | ...nextState, 19 | undo, 20 | redo, 21 | }; 22 | } 23 | 24 | /** 25 | * 重做 26 | * @param state 27 | * @returns {(*&void&{undo: *, redo: *})|(*&T&{undo: *, redo: *})} 28 | */ 29 | export function redo(state: StateType) { 30 | const { undo, redo } = state; 31 | if (redo.length == 0) return state; 32 | const nextState = redo.pop(); 33 | const prevState: any = {}; 34 | each(nextState, (_, key) => prevState[key] = get(state, key)); 35 | undo.push(prevState); 36 | return { 37 | ...state, 38 | ...nextState, 39 | undo, 40 | redo, 41 | }; 42 | } 43 | -------------------------------------------------------------------------------- /example/src/configs/componentConfigs/Ant/Avatar.ts: -------------------------------------------------------------------------------- 1 | import { ComponentConfigTypes, NODE_PROPS_TYPES, PROPS_TYPES } from 'brickd-core'; 2 | 3 | const Avatar: ComponentConfigTypes = { 4 | nodePropsConfig: { 5 | icon: { 6 | type: NODE_PROPS_TYPES.reactNode, 7 | }, 8 | }, 9 | propsConfig: { 10 | icon: { 11 | label: '设置头像的图标类型', 12 | tip: '设置头像的图标类型，参考 Icon 组件', 13 | type: PROPS_TYPES.string, 14 | }, 15 | shape: { 16 | label: '指定头像的形状', 17 | type: PROPS_TYPES.enum, 18 | enumData: ['circle', 'square'], 19 | defaultValue: 'circle', 20 | }, 21 | 22 | src: { 23 | label: '上传图像', 24 | type: PROPS_TYPES.string, 25 | }, 26 | alt: { 27 | label: '替代文本', 28 | tip: '图像未显示时的替代文本', 29 | type: PROPS_TYPES.string, 30 | }, 31 | size: { 32 | label: '头像大小', 33 | type: PROPS_TYPES.number, 34 | }, 35 | onError: { 36 | label: '图片加载失败的事件', 37 | tip: '图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为', 38 | type: PROPS_TYPES.function, 39 | placeholder: '(boolean) => {}', 40 | }, 41 | }, 42 | }; 43 | 44 | export default Avatar; 45 | -------------------------------------------------------------------------------- /packages/brick-design/src/hooks/useChildNodes.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useMemo } from 'react'; 2 | import { ChildNodesType, getComponentConfig, SelectedInfoBaseType } from 'brickd-core'; 3 | import { handleSelectedStatus } from '../common/events'; 4 | 5 | export interface UseChildNodeType { 6 | specialProps: SelectedInfoBaseType, 7 | childNodes?: ChildNodesType, 8 | componentName: string 9 | } 10 | 11 | export function useChildNodes({ specialProps, childNodes, componentName }: UseChildNodeType) { 12 | const { nodePropsConfig, isRequired } = useMemo(() => getComponentConfig(componentName), []); 13 | useEffect(() => { 14 | if (!childNodes) return; 15 | if (!Array.isArray(childNodes)) { 16 | for (const prop of Object.keys(nodePropsConfig!)) { 17 | const { isRequired } = nodePropsConfig![prop]; 18 | if (isRequired && childNodes[prop]!.length === 0) { 19 | handleSelectedStatus(null, false, specialProps, prop); 20 | break; 21 | } 22 | } 23 | } else if (isRequired && childNodes.length === 0) { 24 | handleSelectedStatus(null, false, specialProps); 25 | } 26 | }, [childNodes]); 27 | } 28 | -------------------------------------------------------------------------------- /packages/core/LICENSE: -------------------------------------------------------------------------------- 1 | 2 | MIT License 3 | 4 | Copyright (c) 2020 anye 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /packages/brick-design/LICENSE: -------------------------------------------------------------------------------- 1 | 2 | MIT License 3 | 4 | Copyright (c) 2020 anye 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /packages/brick-design/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "brickd", 3 | "version": "1.0.0-alpha.10", 4 | "description": "> TODO: description", 5 | "author": "anye931123 <1278998669@qq.com>", 6 | "license": "MIT", 7 | "main": "./dist/cjs/index.js", 8 | "module": "./dist/esm/index.js", 9 | "types": "./lib/index.d.ts", 10 | "sideEffects": false, 11 | "scripts": { 12 | "build": "tsc && rollup -c rollup.config.js", 13 | "clean": "../../scripts/clean_package.sh", 14 | "dev": "tsc -w && rollup -c rollup.config.js -w" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/brick-design/react-visual-editor.git" 19 | }, 20 | "dependencies": { 21 | "brickd-core": "^1.0.0-alpha.10", 22 | "lodash": "^4.17.15", 23 | "react": "^16.8.0", 24 | "react-dom": "^16.8.0", 25 | "rc-collapse": "^2.0.0", 26 | "sortablejs": "^1.10.2" 27 | }, 28 | "devDependencies": { 29 | "@types/lodash": "^4.14.149", 30 | "@types/react": "^16.9.35", 31 | "@types/sortablejs": "^1.10.4" 32 | 33 | }, 34 | "peerDependencies": { 35 | "react": ">=16.8.0", 36 | "react-dom": ">=16.8.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/bricks-web/LICENSE: -------------------------------------------------------------------------------- 1 | 2 | MIT License 3 | 4 | Copyright (c) 2020 anye 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /packages/bricks-web/src/PropComponent/NumberArray.tsx: -------------------------------------------------------------------------------- 1 | import React, { forwardRef, memo } from 'react'; 2 | import { Select } from 'antd'; 3 | import { SelectProps } from 'antd/es/select'; 4 | import { propsAreEqual } from '../utils'; 5 | 6 | interface NumberArrayPropsType extends SelectProps { 7 | maxTagCount: number, 8 | onChange: (value: any) => void 9 | } 10 | 11 | 12 | function NumberArray(props: NumberArrayPropsType, ref: any) { 13 | function onNumberChange(value: string) { 14 | const { onChange, maxTagCount = 10000 } = props; 15 | const numberArray = []; 16 | if (value.length <= maxTagCount) { 17 | for (const v of value) { 18 | if (Number.isNaN(Number.parseFloat(v))) { 19 | break; 20 | } 21 | numberArray.push(Number.parseFloat(v)); 22 | } 23 | onChange && onChange(numberArray); 24 | } 25 | } 26 | 27 | return (