From 9359ac61df8aa153f45e62d0f5b9422755b79741 Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Mon, 17 Aug 2020 17:42:57 +0800 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EfunctionSetter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/events-setter/index.tsx | 6 +- .../src/function-setter/index.scss | 36 +++++++++++ .../src/function-setter/index.tsx | 59 +++++++++++++++++++ packages/editor-setters/src/index.tsx | 2 + .../plugin-event-bind-dialog/src/index.tsx | 11 +++- 5 files changed, 110 insertions(+), 4 deletions(-) create mode 100644 packages/editor-setters/src/function-setter/index.scss create mode 100644 packages/editor-setters/src/function-setter/index.tsx diff --git a/packages/editor-setters/src/events-setter/index.tsx b/packages/editor-setters/src/events-setter/index.tsx index 1b2ade2fe..775917a7f 100644 --- a/packages/editor-setters/src/events-setter/index.tsx +++ b/packages/editor-setters/src/events-setter/index.tsx @@ -18,6 +18,8 @@ const DEFINITION_EVENT_TYPE = { LIFE_CYCLE_EVENT: 'lifeCycleEvent', }; +const SETTER_NAME = 'event-setter' + export default class EventsSetter extends Component<{ value: any[]; onChange: (eventList: any[]) => void; @@ -61,7 +63,7 @@ export default class EventsSetter extends Component<{ const {editor} = this.props.field; this.initEventBtns(); this.initEventList(); - editor.on('event-setter.bindEvent',(relatedEventName)=>{ + editor.on(`${SETTER_NAME}.bindEvent`,(relatedEventName)=>{ this.bindEvent(relatedEventName); }) @@ -328,7 +330,7 @@ export default class EventsSetter extends Component<{ openDialog = (bindEventName: String) => { const {editor} = this.props.field; this.bindEventName = bindEventName; - editor.emit('eventBindDialog.openDialog',bindEventName); + editor.emit('eventBindDialog.openDialog',bindEventName,SETTER_NAME); }; diff --git a/packages/editor-setters/src/function-setter/index.scss b/packages/editor-setters/src/function-setter/index.scss new file mode 100644 index 000000000..3638caf78 --- /dev/null +++ b/packages/editor-setters/src/function-setter/index.scss @@ -0,0 +1,36 @@ +.lc-icon-setter{ + .next-input{ + width: auto !important; + } + i { + min-width: 12px; + } + i:hover { + cursor: pointer; + } + input:hover { + cursor: pointer; + } +} + + +.lowcode-icon-setter-popup{ + max-width: 354px; + .lowcode-icon-list{ + + overflow: auto; + li{ + float: left; + margin-bottom: 10px; + width: 40px; + color: #666; + cursor: pointer; + text-align: center; + + &:hover{ + color: #000; + } + } + } +} + diff --git a/packages/editor-setters/src/function-setter/index.tsx b/packages/editor-setters/src/function-setter/index.tsx new file mode 100644 index 000000000..021d85878 --- /dev/null +++ b/packages/editor-setters/src/function-setter/index.tsx @@ -0,0 +1,59 @@ +import React, { PureComponent } from 'react'; +// import PropTypes from 'prop-types'; +import { Button } from '@alifd/next'; + +import './index.scss'; + +const SETTER_NAME = 'function-setter' + +interface FunctionSetterProps { + value: string; + type: string; + defaultValue: string; + placeholder: string; + hasClear: boolean; + onChange: (icon: string | object) => undefined; + icons: string[]; +} +export default class FunctionSetter extends PureComponent { + static defaultProps = { + value: undefined, + type: 'string', + defaultValue: '', + hasClear: true, + placeholder: '请点击选择 Icon', + onChange: (icon: string | object) => undefined, + }; + + state = { + firstLoad: true, + }; + + componentDidMount() { + const {editor} = this.props.field; + editor.on(`${SETTER_NAME}.bindEvent`,(eventName)=>{ + this.bindEventCallback(eventName); + }) + + } + + bindFunction = () =>{ + const {field,value} = this.props; + field.editor.emit('eventBindDialog.openDialog',field.name,SETTER_NAME); + } + + bindEventCallback = (eventName) => { + const {onChange} = this.props; + onChange({ + type: 'JSFunction', + value: `function(){ this.${eventName}() }`, + }); + } + + render() { + const { icons, value, defaultValue, onChange, placeholder, hasClear, type } = this.props; + const { firstLoad } = this.state; + + return
; + } +} diff --git a/packages/editor-setters/src/index.tsx b/packages/editor-setters/src/index.tsx index cb4d38e6e..2a923d42f 100644 --- a/packages/editor-setters/src/index.tsx +++ b/packages/editor-setters/src/index.tsx @@ -8,6 +8,7 @@ import JsonSetter from './json-setter'; import EventsSetter from './events-setter'; import StyleSetter from './style-setter'; import IconSetter from './icon-setter'; +// import FunctionSetter from './function-setter'; // import MixedSetter from './mixed-setter'; export const StringSetter = { @@ -109,6 +110,7 @@ const builtinSetters: any = { JsonSetter, StyleSetter, IconSetter, + FunctionSetter }; registerSetter(builtinSetters); diff --git a/packages/plugin-event-bind-dialog/src/index.tsx b/packages/plugin-event-bind-dialog/src/index.tsx index 63d1a788d..56be0b22a 100644 --- a/packages/plugin-event-bind-dialog/src/index.tsx +++ b/packages/plugin-event-bind-dialog/src/index.tsx @@ -24,6 +24,7 @@ export default class EventBindDialog extends Component { state: any = { visiable: false, + setterName:'event-setter', selectedEventName: '', eventName: '', }; @@ -46,8 +47,11 @@ export default class EventBindDialog extends Component { componentDidMount() { const { editor, config } = this.props; - editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String) => { + editor.on(`${config.pluginKey}.openDialog`, (bindEventName: String,setterName:String) => { this.openDialog(bindEventName); + this.setState({ + setterName + }) let schema = editor.get('designer').project.getSchema(); let pageNode = schema.componentsTree[0]; @@ -102,7 +106,10 @@ export default class EventBindDialog extends Component { onOk = () => { const { editor } = this.props; - editor.emit('event-setter.bindEvent', this.state.eventName); + const {setterName,eventName} = this.state; + + editor.emit(`${setterName}.bindEvent`, eventName); + // 选中的是新建事件 if (this.state.selectedEventName == '') { // 判断面板是否处于激活状态 From 48b24d2c1acae1abca8f99b4c5681e380200bab2 Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Mon, 17 Aug 2020 17:46:08 +0800 Subject: [PATCH 2/7] fix bug --- packages/editor-setters/src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor-setters/src/index.tsx b/packages/editor-setters/src/index.tsx index 2a923d42f..5d2bf11ec 100644 --- a/packages/editor-setters/src/index.tsx +++ b/packages/editor-setters/src/index.tsx @@ -8,7 +8,7 @@ import JsonSetter from './json-setter'; import EventsSetter from './events-setter'; import StyleSetter from './style-setter'; import IconSetter from './icon-setter'; -// import FunctionSetter from './function-setter'; +import FunctionSetter from './function-setter'; // import MixedSetter from './mixed-setter'; export const StringSetter = { From 114b6b06ad1c2cd7003d2317784d964e8ef75e32 Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Tue, 18 Aug 2020 17:54:51 +0800 Subject: [PATCH 3/7] feat: add function setter --- .../src/function-setter/index.scss | 46 ++++------ .../src/function-setter/index.tsx | 91 ++++++++++++++++--- 2 files changed, 97 insertions(+), 40 deletions(-) diff --git a/packages/editor-setters/src/function-setter/index.scss b/packages/editor-setters/src/function-setter/index.scss index 3638caf78..c11b6beb9 100644 --- a/packages/editor-setters/src/function-setter/index.scss +++ b/packages/editor-setters/src/function-setter/index.scss @@ -1,36 +1,30 @@ -.lc-icon-setter{ - .next-input{ - width: auto !important; +.lc-function-setter{ + + .function-container{ + position: relative; + } - i { - min-width: 12px; + + .funtion-icon{ + float: left; + width: 25px; + height: 25px; } - i:hover { + + .function-name{ + font-size: 14px; + color:#5584FF; + margin-left:5px; cursor: pointer; + } - input:hover { + + .funtion-operate-icon{ + font-size: 16px; + margin-left:5px; cursor: pointer; } } -.lowcode-icon-setter-popup{ - max-width: 354px; - .lowcode-icon-list{ - - overflow: auto; - li{ - float: left; - margin-bottom: 10px; - width: 40px; - color: #666; - cursor: pointer; - text-align: center; - - &:hover{ - color: #000; - } - } - } -} diff --git a/packages/editor-setters/src/function-setter/index.tsx b/packages/editor-setters/src/function-setter/index.tsx index 021d85878..0e5954a8d 100644 --- a/packages/editor-setters/src/function-setter/index.tsx +++ b/packages/editor-setters/src/function-setter/index.tsx @@ -1,8 +1,9 @@ import React, { PureComponent } from 'react'; // import PropTypes from 'prop-types'; -import { Button } from '@alifd/next'; +import { Button, Icon } from '@alifd/next'; import './index.scss'; +import { timingSafeEqual } from 'crypto'; const SETTER_NAME = 'function-setter' @@ -25,25 +26,85 @@ export default class FunctionSetter extends PureComponent undefined, }; + private emitEventName = ''; + state = { firstLoad: true, }; componentDidMount() { - const {editor} = this.props.field; - editor.on(`${SETTER_NAME}.bindEvent`,(eventName)=>{ - this.bindEventCallback(eventName); - }) + const { editor } = this.props.field; + this.emitEventName = `${SETTER_NAME}-${this.props.field.id}`; + editor.on(`${this.emitEventName}.bindEvent`, this.bindEvent) + } + + bindEvent = (eventName) => { + this.bindEventCallback(eventName); + } + + + componentWillUnmount() { + const { editor } = this.props.field; + editor.off(`${this.emitEventName}.bindEvent`, this.bindEvent) + } + + + bindFunction = () => { + const { field, value } = this.props; + field.editor.emit('eventBindDialog.openDialog', field.name, this.emitEventName); + } + + removeFunctionBind = () => { + const { field ,onChange} = this.props; + field.parent.clearPropValue(field.name); + } + + parseFunctionName = (functionString: String) => { + // 因为函数格式是固定的，所以可以按照字符换去匹配获取函数名 + let funNameStr = functionString.split('.')[1]; + let endIndex = functionString.indexOf('('); + return funNameStr.substr(0, endIndex); } - bindFunction = () =>{ - const {field,value} = this.props; - field.editor.emit('eventBindDialog.openDialog',field.name,SETTER_NAME); + /** + * 渲染按钮(初始状态) + */ + renderButton = () => { + return } - bindEventCallback = (eventName) => { - const {onChange} = this.props; + focusFunctionName = (functionName) => { + const { editor } = this.props.field; + + editor.get('skeleton').getPanel('sourceEditor').show(); + + setTimeout(() => { + editor.emit('sourceEditor.focusByFunction', { + functionName + }) + }, 300) + } + + /** + * 渲染绑定函数 + */ + renderBindFunction = () => { + const { value } = this.props; + // 解析函数名 + let functionName = this.parseFunctionName(value.value); + // let functionName = 'onClick'; + return
+ + this.focusFunctionName(functionName)}>{functionName} + + +
+ } + + + bindEventCallback = (eventName: String) => { + const { onChange } = this.props; onChange({ type: 'JSFunction', value: `function(){ this.${eventName}() }`, @@ -51,9 +112,11 @@ export default class FunctionSetter extends PureComponent; + const { value } = this.props; + return
+ { + value ? this.renderBindFunction() : this.renderButton() + } +
; } } From 8fd77df2a0b970c4c79f2e7ea2c0f210950591ab Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Tue, 18 Aug 2020 21:52:07 +0800 Subject: [PATCH 4/7] fix: fix function-setter bug --- packages/editor-setters/src/function-setter/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor-setters/src/function-setter/index.tsx b/packages/editor-setters/src/function-setter/index.tsx index 0e5954a8d..c2541051d 100644 --- a/packages/editor-setters/src/function-setter/index.tsx +++ b/packages/editor-setters/src/function-setter/index.tsx @@ -62,7 +62,8 @@ export default class FunctionSetter extends PureComponent { // 因为函数格式是固定的，所以可以按照字符换去匹配获取函数名 let funNameStr = functionString.split('.')[1]; - let endIndex = functionString.indexOf('('); + let endIndex = funNameStr.indexOf('('); + return funNameStr.substr(0, endIndex); } From b97c80746c2173569088c0482c0201f26ed317f1 Mon Sep 17 00:00:00 2001 From: "zude.hzd" Date: Wed, 19 Aug 2020 11:05:33 +0800 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20setting-pane=20=E6=96=B0=E5=A2=9Ere?= =?UTF-8?q?moveProp=20=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor-setters/src/function-setter/index.tsx | 4 ++-- .../editor-skeleton/src/components/settings/settings-pane.tsx | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/editor-setters/src/function-setter/index.tsx b/packages/editor-setters/src/function-setter/index.tsx index c2541051d..a14ec6186 100644 --- a/packages/editor-setters/src/function-setter/index.tsx +++ b/packages/editor-setters/src/function-setter/index.tsx @@ -55,8 +55,8 @@ export default class FunctionSetter extends PureComponent { - const { field ,onChange} = this.props; - field.parent.clearPropValue(field.name); + const { field ,removeProp} = this.props; + removeProp(); } parseFunctionName = (functionString: String) => { diff --git a/packages/editor-skeleton/src/components/settings/settings-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-pane.tsx index 0db2f2257..95b554e89 100644 --- a/packages/editor-skeleton/src/components/settings/settings-pane.tsx +++ b/packages/editor-skeleton/src/components/settings/settings-pane.tsx @@ -142,6 +142,10 @@ class SettingFieldView extends Component<{ field: SettingField }> { }); field.setValue(value); }, + + removeProp:()=>{ + field.parent.clearPropValue(field.name); + } }), extraProps.forceInline ? 'plain' : extraProps.display, ); From c682cc50d5b513878df78a6c7a2549dfb7175f25 Mon Sep 17 00:00:00 2001 From: "peipei.xpp" Date: Wed, 19 Aug 2020 14:51:05 +0800 Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Collapse=20component?= =?UTF-8?q?=20update?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/public/assets.json | 103 ++++++++++++------------------- 1 file changed, 41 insertions(+), 62 deletions(-) diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index f60a34342..e9b44add2 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -3831,38 +3831,24 @@ "subName": "" }, "props": [ - { - "name": "prefix", - "propType": "string", - "description": "样式前缀", - "defaultValue": "next-" - }, - { - "name": "style", - "propType": "object", - "description": "组件接受行内样式" - }, { "name": "dataSource", - "propType": { - "type": "instanceOf", - "value": "array" - }, + "propType": "Json", "description": "使用数据模型构建" }, { "name": "defaultExpandedKeys", "propType": { - "type": "instanceOf", - "value": "array" + "type": "arrayOf", + "value": "string" }, "description": "默认展开keys" }, { "name": "expandedKeys", "propType": { - "type": "instanceOf", - "value": "array" + "type": "arrayOf", + "value": "string" }, "description": "受控展开keys" }, @@ -3881,32 +3867,31 @@ "propType": "string", "description": "扩展class" }, + { + "name": "style", + "propType": "object", + "description": "组件接受行内样式" + }, { "name": "accordion", "propType": "bool", "description": "手风琴模式，一次只能打开一个", "defaultValue": false }, - { - "name": "children", - "propType": { - "type": "instanceOf", - "value": "node" - } - }, - { - "name": "id", - "propType": "string" - }, { "name": "rtl", "propType": "bool" } - ] + ], + "configure": { + "component": { + "isContainer": true + } + } }, { - "componentName": "Panel", - "title": "Panel", + "componentName": "Collapse.Panel", + "title": "Collapse.Panel", "docUrl": "", "screenshot": "", "npm": { @@ -3919,25 +3904,14 @@ }, "props": [ { - "name": "prefix", - "propType": "string", - "description": "样式类名的品牌前缀", - "defaultValue": "next-" + "name": "children", + "propType": "any" }, { "name": "style", "propType": "object", "description": "子组件接受行内样式" }, - { - "name": "children", - "propType": "any" - }, - { - "name": "isExpanded", - "propType": "bool", - "defaultValue": false - }, { "name": "disabled", "propType": "bool", @@ -3950,19 +3924,6 @@ "value": "node" }, "description": "标题" - }, - { - "name": "className", - "propType": "string", - "description": "扩展class" - }, - { - "name": "onClick", - "propType": "func" - }, - { - "name": "id", - "propType": "string" } ] }, @@ -14073,10 +14034,8 @@ "prefix": "next-" }, "children": [{ - "componentName": "Panel", + "componentName": "Collapse.Panel", "props": { - "prefix": "next-", - "isExpanded": true, "title": "面板标题" } }] @@ -14084,6 +14043,26 @@ } ] }, + { + "componentName": "Collapse.Panel", + "title": "折叠面板Panel", + "icon": "", + "package": "@alifd/next", + "library": "Next", + "snippets": [ + { + "title": "折叠面板Panel", + "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_collapse.png", + "schema": { + "componentName": "Collapse.Panel", + "props": { + "prefix": "next-", + "title": "面板标题" + } + } + } + ] + }, { "componentName": "List", "title": "列表", From d4d41e4000de36fd201182bea8ef1498f12762c7 Mon Sep 17 00:00:00 2001 From: "peipei.xpp" Date: Wed, 19 Aug 2020 14:57:46 +0800 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Collapse.panel=20has?= =?UTF-8?q?=20drop=20in=20Collapse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/public/assets.json | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index e9b44add2..61d6d848e 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -3925,7 +3925,14 @@ }, "description": "标题" } - ] + ], + "configure": { + "component": { + "nestingRule": { + "parentWhitelist": ["Collapse"] + } + } + } }, { "componentName": "ErrorBoundary",