From f0bf8f973b5e4940f75ffe2daf9b74534a108f93 Mon Sep 17 00:00:00 2001 From: hzd822 Date: Tue, 8 Mar 2022 11:45:15 +0800 Subject: [PATCH 01/95] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9jsExpression=20?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=BA=90state=E5=BC=95=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/setter/expression-setter/index.tsx | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 8117a1d..eeda3b2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-engine-ext", - "version": "1.0.2-beta.1", + "version": "1.0.2-beta.2", "description": "", "files": [ "dist", diff --git a/src/setter/expression-setter/index.tsx b/src/setter/expression-setter/index.tsx index 5a5c8c3..2d2605d 100644 --- a/src/setter/expression-setter/index.tsx +++ b/src/setter/expression-setter/index.tsx @@ -132,10 +132,19 @@ export default class ExpressionView extends PureComponent { const stateMap = schema.componentsTree[0].state; const dataSource = []; + const datasourceMap = schema.componentsTree[0]?.dataSource; + const list = datasourceMap?.list || []; + for (const key in stateMap) { dataSource.push(`this.state.${key}`); } + for (const item of list) { + if (item && item.id) { + dataSource.push(`this.state.${item.id}`); + } + } + return dataSource; } From 13ef4b31680ddf5971d843c52885fc97b59d645f Mon Sep 17 00:00:00 2001 From: mark Date: Tue, 29 Mar 2022 18:37:40 +0800 Subject: [PATCH 02/95] feat: add title setter and behavior setter --- src/index.tsx | 3 + .../behavior-setter/actions/dialog-action.tsx | 65 ++++++++ .../behavior-setter/actions/link-action.tsx | 139 ++++++++++++++++ .../actions/message-action.tsx | 81 ++++++++++ .../actions/tooltip-action.tsx | 115 +++++++++++++ src/setter/behavior-setter/index.scss | 92 +++++++++++ src/setter/behavior-setter/index.tsx | 153 ++++++++++++++++++ src/setter/behavior-setter/types.ts | 19 +++ src/setter/title-setter/index.scss | 22 +++ src/setter/title-setter/index.tsx | 38 +++++ 10 files changed, 727 insertions(+) create mode 100644 src/setter/behavior-setter/actions/dialog-action.tsx create mode 100644 src/setter/behavior-setter/actions/link-action.tsx create mode 100644 src/setter/behavior-setter/actions/message-action.tsx create mode 100644 src/setter/behavior-setter/actions/tooltip-action.tsx create mode 100644 src/setter/behavior-setter/index.scss create mode 100644 src/setter/behavior-setter/index.tsx create mode 100644 src/setter/behavior-setter/types.ts create mode 100644 src/setter/title-setter/index.scss create mode 100644 src/setter/title-setter/index.tsx diff --git a/src/index.tsx b/src/index.tsx index 52d0520..9f30512 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -23,6 +23,7 @@ import TextAreaSetter from './setter/textarea-setter'; import ArraySetter from './setter/array-setter'; import ObjectSetter from './setter/object-setter'; import VariableSetter from './setter/variable-setter'; +import TitleSetter from './setter/title-setter'; import EventBindDialog from './plugin/plugin-event-bind-dialog'; import VariableBindDialog from './plugin/plugin-variable-bind-dialog'; import './index.less'; @@ -191,6 +192,7 @@ const engineExt = { SlotSetter: DataSlotSetter, ArraySetter: DataArraySetter, ObjectSetter: DataObjectSetter, + TitleSetter, }, setterMap: { @@ -219,6 +221,7 @@ const engineExt = { SlotSetter: DataSlotSetter, ArraySetter: DataArraySetter, ObjectSetter: DataObjectSetter, + TitleSetter, }, pluginMap: { diff --git a/src/setter/behavior-setter/actions/dialog-action.tsx b/src/setter/behavior-setter/actions/dialog-action.tsx new file mode 100644 index 0000000..b807164 --- /dev/null +++ b/src/setter/behavior-setter/actions/dialog-action.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; +import { useEffect, useState } from 'react'; +import { SettingTarget } from '@alilc/lowcode-types'; +import { Select, Box } from '@alifd/next'; +import { BehaviorActionProps, BehaviorAction } from '../types'; + +interface DialogActionValue { + id?: string; +} + +const getDialogList = (field: SettingTarget) => { + const node = (field as any).getNode(); + const nodeDocument = node.document || node.page; + let nodeList = nodeDocument?.modalNodesManager?.getModalNodes?.(); + if (!nodeList || !nodeList.length) { + nodeDocument?.modalNodesManager?.setNodes?.(); + nodeList = nodeDocument?.modalNodesManager?.getModalNodes?.(); + } + + return (nodeList || []) + .filter((x: any) => x && x.propsData) + .map((x: any) => ({ + label: + x.propsData && x.propsData.title + ? `${x.propsData.title}(${x.id})` + : `${x.id}(${x.componentName})`, + value: x.propsData.ref, + })); +}; + +const DialogContent: React.FC = ({ value = {}, onChange, field }) => { + const [dialogList, setDialogList] = useState([]); + useEffect(() => { + setDialogList(getDialogList(field)); + }, [field]); + return ( + + 绑定弹窗 + + { + onChange({ + type: value.type || 'internal', + url: val, + }); + }} + /> + ) : ( + { + onChange({ + ...value, + type: val, + }); + }} + /> + + + + 通知内容 + + { + onChange({ + ...value, + content, + }); + }} + /> + + + + ); +}; + +export const messageBehaviorAction: BehaviorAction = { + name: 'message', + title: '提示', + render: (props) => , + toActionValue: (value, options) => { + const { library, component, defaultType } = options; + return { + type: 'JSExpression', + value: `function() {${library}.${component}.${value.type || defaultType}('${value.content}')}`, + }; + }, +}; diff --git a/src/setter/behavior-setter/actions/tooltip-action.tsx b/src/setter/behavior-setter/actions/tooltip-action.tsx new file mode 100644 index 0000000..9d06a9d --- /dev/null +++ b/src/setter/behavior-setter/actions/tooltip-action.tsx @@ -0,0 +1,115 @@ +import * as React from 'react'; +import { Box, Input, Radio } from '@alifd/next'; +import { BehaviorActionProps, BehaviorAction } from '../types'; + +const findReact = (id: string, traverseUp = 0) => { + const dom = document.querySelector(`#${id}`); + if (!dom) return; + const key = Object.keys(dom).find((item) => { + return ( + item.startsWith('__reactFiber$') || // react 17+ + item.startsWith('__reactInternalInstance$') + ); // react <17 + }); + const domFiber = dom[key]; + if (domFiber == null) return null; + + // react <16 + if (domFiber._currentElement) { + let compFiber = domFiber._currentElement._owner; + for (let i = 0; i < traverseUp; i++) { + compFiber = compFiber._currentElement._owner; + } + return compFiber._instance; + } + + // react 16+ + const GetCompFiber = (fiber) => { + // return fiber._debugOwner; // this also works, but is __DEV__ only + let parentFiber = fiber.return; + while (typeof parentFiber.type === 'string') { + parentFiber = parentFiber.return; + } + return parentFiber; + }; + let compFiber = GetCompFiber(domFiber); + for (let i = 0; i < traverseUp; i++) { + compFiber = GetCompFiber(compFiber); + } + return compFiber.stateNode; +} + +interface TooltipActionValue { + content?: string; + triggerType?: 'click' | 'hover'; +} +interface TooltipActionOptions { + id: string; +} + +const TooltipActionContent: React.FC> = ({ + value = {}, onChange, +}) => { + + return ( + + + 触发方式 + + { + onChange({ + ...value, + triggerType, + }); + }} + /> + + + + 通知内容 + + { + onChange({ + ...value, + content, + }); + }} + /> + + + + ); +}; + +export const tooltipBehaviorAction: BehaviorAction = { + name: 'tooltip', + title: 'Tooltip', + render: (props) => , + toActionValue: (value, options) => ({ + type: 'JSExpression', + value: `function() { + const id = '${options.id}'; + const findReact = ${findReact}; + const node = findReact(id); + if (!node) return; + if (typeof node.enableTooltip === 'function') { + node.enableTooltip('${value.triggerType}', '${value.content}'); + } else if (typeof node.toggleTip === 'function') { + node.toggleTip('${value.content}'); + } + }`, + }), +}; diff --git a/src/setter/behavior-setter/index.scss b/src/setter/behavior-setter/index.scss new file mode 100644 index 0000000..aa52148 --- /dev/null +++ b/src/setter/behavior-setter/index.scss @@ -0,0 +1,92 @@ +.behavior-item { + padding: 5px 0; + .behavior-radio { + flex: 1; + .next-input { + width: 100%; + } + .next-radio-group { + white-space: nowrap; + display: flex; + flex-wrap: wrap; + flex: 1; + label { + flex: 1; + span { + text-align: center; + } + } + } + } +} + +:root { + --min-input-light-height: max(var(--form-element-small-height), 28px); +} + +.next-btn-ghost.next-btn-light { + background: #fff; + border-color: transparent; + border-color: var(--btn-ghost-light-border-color, transparent); +} + +.next-btn-text.next-medium { + border-radius: 0; + padding: 0; + height: var(--btn-text-size-m-height, 20px); + font-size: var(--btn-text-size-m-font, 14px); + border-width: 0; +} + +.next-btn-ghost.next-btn-light.active, .next-btn-ghost.next-btn-light.hover, .next-btn-ghost.next-btn-light:active, .next-btn-ghost.next-btn-light:focus, .next-btn-ghost.next-btn-light:hover { + color: #000; + color: var(--btn-ghost-light-color-hover,#000); + background: hsla(0,0%,96%,.92); + border-color: transparent; + border-color: var(--btn-ghost-light-border-color-hover,transparent); + text-decoration: none; +} + +.next-btn.next-small { + border-radius: var(--btn-size-s-corner,3px); + padding: 0 var(--btn-size-s-padding,4px); + height: var(--btn-size-s-height,28px); + font-size: var(--btn-size-s-font,12px); + border-width: var(--btn-size-s-border-width,1px); +} + +.next-input.next-small { + height: var(--min-input-light-height, 28px); + min-height: 28px; + border-radius: var(--form-element-small-corner, 3px); +} + +.next-input.next-small input { + height: calc(var(--min-input-light-height, 28px) - var(--input-border-width, 1px) * 2); + min-height: 26px; + line-height: calc(var(--min-input-light-height, 28px) - var(--input-border-width, 1px) * 2); + padding: 0 var(--input-s-padding, 8px); + font-size: var(--form-element-small-font-size, 12px); +} + +.next-input.next-small .next-input-text-field { + padding: 0 4px; + font-size: 12px; + height: calc(var(--min-input-light-height, 28px) - var(--input-border-width, 1px) * 2); + min-height: 26px; + line-height: calc(var(--min-input-light-height, 28px) - var(--input-border-width, 1px) * 2); +} + +.next-radio-button-small>label { + padding: 0 var(--radio-button-padding-small,8px); + height: var(--radio-button-height-small, 28px); + min-height: 28px; + line-height: var(--radio-button-height-small, 28px); +} + +.next-radio-button-small .next-radio-label { + height: calc(var(--radio-button-height-small, 28px) - 2px); + min-height: 26px; + line-height: calc(var(--radio-button-height-small, 28px) - 2px); + font-size: var(--radio-button-font-size-small,12px); +} diff --git a/src/setter/behavior-setter/index.tsx b/src/setter/behavior-setter/index.tsx new file mode 100644 index 0000000..bcc09db --- /dev/null +++ b/src/setter/behavior-setter/index.tsx @@ -0,0 +1,153 @@ +import * as React from 'react'; +import { useState, ErrorInfo, useMemo } from 'react'; +import { Radio, Select, Box } from '@alifd/next'; +import { SettingTarget, CustomView } from '@alilc/lowcode-types'; + +import './index.scss'; +import { BehaviorAction } from './types'; +import { linkBehaviorAction } from './actions/link-action'; +import { dialogBehaviorAction } from './actions/dialog-action'; +import { messageBehaviorAction } from './actions/message-action'; +import { tooltipBehaviorAction } from './actions/tooltip-action'; + +interface BehaviorSetterProps { + field?: SettingTarget; + // 兼容 vision engine + prop?: SettingTarget; + onChange: Function; + actions: string[]; + type?: 'dialog' | 'link' | undefined; + value: Record; + url?: 'string'; + responseFormatter?: Function; + extraBehaviorActions?: BehaviorAction[]; + extendedOptions?: Record; + enableMessageAction?: boolean; + enableTooltipAction?: boolean; +} + +const defaultActionMap = { + dialog: dialogBehaviorAction, + link: linkBehaviorAction, + tooltip: tooltipBehaviorAction, + message: messageBehaviorAction, +}; +const BehaviorSetter: CustomView = ({ + value: behaviors = {}, + onChange, + field: propsField, + prop, + actions, + type: propsType, + extraBehaviorActions: propsBehaviorActions = [], + extendedOptions = {}, + url, + responseFormatter, + enableMessageAction, + enableTooltipAction, +}: BehaviorSetterProps) => { + const field = propsField || prop; + + const [currentEvent, setCurrentEvent] = useState(actions[0]); + /** 当前的行为集合 */ + + const currentBehavior = behaviors[currentEvent] || {}; + const currentBehaviorType = currentBehavior.type || propsType || 'dialog'; + const defaultActions: any = []; + defaultActions.push(defaultActionMap.dialog, defaultActionMap.link); + if (enableMessageAction) { + defaultActions.push(defaultActionMap.message); + } + if (enableTooltipAction) { + defaultActions.push(defaultActionMap.tooltip); + } + const behaviorActions = useMemo(() => [ + ...defaultActions, + ...propsBehaviorActions, + ], [propsBehaviorActions]); + + const updateCurrentEventBehavior = (type: string, newVal: any) => { + onChange({ + ...behaviors, + [currentEvent]: { + type, + [type]: newVal, + }, + }); + }; + const behaviorOption = behaviorActions.find((vo) => vo.name === currentBehaviorType); + + return ( +
+ + 事件列表 + + } + + ); +}; + +export default TitleSetter; From 57c3b8b3cb3dd8c62c67c3b6ed6c5323944dbfa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8B=AC=E5=AF=92?= Date: Fri, 13 May 2022 17:20:45 +0800 Subject: [PATCH 03/95] =?UTF-8?q?:bugfix:=20:=E7=BB=91=E5=AE=9A=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E6=97=B6=EF=BC=8C=E5=A6=82=E6=9E=9C=E5=BC=80=E5=90=AF?= =?UTF-8?q?=E6=89=A9=E5=B1=95=E5=8F=82=E6=95=B0=EF=BC=8C=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=90=8E=E7=9A=84=E5=87=BD=E6=95=B0=E5=AF=B9=E6=89=A9=E5=B1=95?= =?UTF-8?q?=E5=8F=82=E6=95=B0=E5=A4=84=E7=90=86=E6=9C=89=E9=97=AE=E9=A2=98?= =?UTF-8?q?=EF=BC=8C=E5=AF=BC=E8=87=B4JS=E9=9D=A2=E6=9D=BF=E6=8A=A5?= =?UTF-8?q?=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugin/plugin-event-bind-dialog/index.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/plugin/plugin-event-bind-dialog/index.tsx b/src/plugin/plugin-event-bind-dialog/index.tsx index d474589..22f05b8 100644 --- a/src/plugin/plugin-event-bind-dialog/index.tsx +++ b/src/plugin/plugin-event-bind-dialog/index.tsx @@ -9,6 +9,8 @@ import './index.less'; const defaultParams = '{\n \t "testKey":123 \n}'; // 模板变量占位 const tempPlaceHolder = '${extParams}'; +const tempPlaceHolderReg = /\$\{extParams\}/g; + const defaultEditorOption = { style: { width: '100%', height: '319px' }, readOnly: false, @@ -179,7 +181,7 @@ export default class EventBindDialog extends Component { onSearchEvent = () => {}; - onChange = (checked) => { + onChange = (checked: boolean) => { this.setState({ useParams: checked, }); @@ -196,22 +198,23 @@ export default class EventBindDialog extends Component { } }; - pickupFunctionName = (codeStr) => { + pickupFunctionName = (codeStr: string) => { return codeStr.substr(0, codeStr.indexOf('(')); }; - removeSpace = (str) => { + removeSpace = (str: string) => { return str.replace(/\s*/g, ''); }; - formatTemplate = (template, eventName, useParams) => { + formatTemplate = (template: string, eventName: string, useParams: boolean) => { let formatTemp; if (template) { const functionName = this.pickupFunctionName(template); formatTemp = template.replace(new RegExp('^s*' + functionName), eventName); if (useParams) { - formatTemp = formatTemp.replace(/tempPlaceHolder/g, 'extParams'); + formatTemp = formatTemp.replace(tempPlaceHolderReg, 'extParams'); + } else { const leftIndex = formatTemp.indexOf('('); const rightIndex = formatTemp.indexOf(')'); @@ -240,7 +243,7 @@ export default class EventBindDialog extends Component { return formatTemp; }; - formatEventName = (eventName) => { + formatEventName = (eventName: string) => { const newEventNameArr = eventName.split(''); const index = eventName.indexOf('.'); if (index >= 0) { @@ -283,7 +286,7 @@ export default class EventBindDialog extends Component { this.closeDialog(); }; - onChangeEditor = (paramStr) => { + onChangeEditor = (paramStr: string) => { this.setState({ paramStr, }); @@ -370,7 +373,7 @@ export default class EventBindDialog extends Component { value={paramStr} {...defaultEditorOption} {...{ language: 'json' }} - onChange={(newCode) => this.onChangeEditor(newCode)} + onChange={(newCode: string) => this.onChangeEditor(newCode)} /> {!useParams &&
}
From 99b0d8eaf122d80fd7ac8fda41fa22b613c7c5a7 Mon Sep 17 00:00:00 2001 From: hzd822 Date: Thu, 9 Jun 2022 11:59:10 +0800 Subject: [PATCH 04/95] =?UTF-8?q?fix:=20=E5=85=88=E6=9A=82=E6=97=B6?= =?UTF-8?q?=E5=A4=84=E7=90=86=E4=B8=8B,=E8=AE=A9object=E8=83=BD=E6=AF=8F?= =?UTF-8?q?=E6=AC=A1=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/object-setter/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/setter/object-setter/index.tsx b/src/setter/object-setter/index.tsx index 2b763e3..89c515e 100644 --- a/src/setter/object-setter/index.tsx +++ b/src/setter/object-setter/index.tsx @@ -123,12 +123,12 @@ class RowSetter extends Component { }); } - shouldComponentUpdate(_: any, nextState: any) { - if (this.state.descriptor !== nextState.descriptor) { - return true; - } - return false; - } + // shouldComponentUpdate(_: any, nextState: any) { + // if (this.state.descriptor !== nextState.descriptor) { + // return true; + // } + // return false; + // } private pipe: any; render() { From 888bab9a2727d23fdf7dac0a675df5d4b02eab35 Mon Sep 17 00:00:00 2001 From: hzd822 Date: Thu, 9 Jun 2022 12:01:20 +0800 Subject: [PATCH 05/95] =?UTF-8?q?fix:=20=E6=9B=B4=E6=94=B9=E7=89=88?= =?UTF-8?q?=E6=9C=AC=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index eeda3b2..e47a048 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-engine-ext", - "version": "1.0.2-beta.2", + "version": "1.0.4-beta.2", "description": "", "files": [ "dist", From 3a0b1d09dcf667ce8384465c36112383f1c999f1 Mon Sep 17 00:00:00 2001 From: wukidy Date: Wed, 15 Jun 2022 15:10:29 +0800 Subject: [PATCH 06/95] feat: array-setter custom footer --- src/setter/array-setter/index.tsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index bc8820d..4771a9e 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -22,6 +22,7 @@ interface ArraySetterProps { multiValue?: boolean; hideDescription?: boolean; onChange?: Function; + extraProps: {renderFooter?: (options: ArraySetterProps & {onAdd: (val?: {}) => any}) => any} } export class ListSetter extends Component { @@ -110,12 +111,12 @@ export class ListSetter extends Component { this.setState({ items: newItems }); } - onAdd() { + onAdd(newValue?: {[key: string]: any}) { const { items = [] } = this.state; const { itemSetter, field } = this.props; const values = field.getValue() || []; const { initialValue } = itemSetter; - const defaultValue = typeof initialValue === 'function' ? initialValue(field) : initialValue; + const defaultValue = newValue ? newValue : (typeof initialValue === 'function' ? initialValue(field) : initialValue); const item = field.createField({ name: items.length, setter: itemSetter, @@ -158,7 +159,8 @@ export class ListSetter extends Component { } render() { - const { hideDescription } = this.props; + const { hideDescription, extraProps = {} } = this.props; + const { renderFooter } = extraProps; let columns: any = null; const { items } = this.state; const { scrollToLast } = this; @@ -204,9 +206,15 @@ export class ListSetter extends Component { ) : null} {content}
- + { + !renderFooter ? ( + + ) : renderFooter({...this.props, onAdd: this.onAdd.bind(this),}) + }
); From 6e2d95a7cc92d33eb75b48d64eb217ea9b6e2d6d Mon Sep 17 00:00:00 2001 From: wukidy Date: Fri, 17 Jun 2022 17:02:38 +0800 Subject: [PATCH 07/95] fix: save mixed used setter --- package.json | 4 ++-- src/setter/mixed-setter/index.tsx | 28 ++++++++++++++++++++++++++-- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index eeda3b2..85958e3 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "module": "es/index.js", "stylePath": "style.js", "scripts": { - "start": "build-scripts start --config build.cloud.json", + "start": "build-scripts start --config build.cloud.json --port 4008", "build": "build-scripts build && build-scripts build --config build.cloud.json", "cloud-build": "build-scripts build --config build.cloud.json", "test": "build-scripts test", @@ -70,5 +70,5 @@ "registry": "https://registry.npmjs.org/" }, "license": "MIT", - "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.2-beta.1/build/index.html" + "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.2-beta.2/build/index.html" } diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index 32a72dd..682737c 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -31,6 +31,12 @@ export interface SetterItem { valueType: string[]; } +const dash = '_'; +function getMixedSelect(field) { + const path = field.path || []; + return `_unsafe_MixedSetter${dash}${path.join(dash)}${dash}select`; +} + function nomalizeSetters( setters?: Array, ): SetterItem[] { @@ -154,6 +160,15 @@ export default class MixedSetter extends Component<{ } return firstMatched || firstDefault || this.setters[0]; } + constructor(props) { + super(props); + // TODO: use engine ext.props + const mixedKey = getMixedSelect(this.props.field); + const usedSetter = this.props.field.node.getPropValue(mixedKey); + if(usedSetter) { + this.used = usedSetter + } + } // dirty fix vision variable setter logic private hasVariableSetter = this.setters.some((item) => item.name === 'VariableSetter'); @@ -164,7 +179,7 @@ export default class MixedSetter extends Component<{ const setterComponent = getSetter('VariableSetter')?.component as any; if (setterComponent && setterComponent.isPopup) { setterComponent.show({ prop: field }); - this.used = name; + this.syncSelectSetter(name); return; } } @@ -193,12 +208,21 @@ export default class MixedSetter extends Component<{ // reset value field.setValue(undefined); - this.used = name; + this.syncSelectSetter(name); + if (setter) { this.handleInitial(setter, fieldValue); } }; + private syncSelectSetter(name) { + // TODO: sync into engine ext.props + const { field } = this.props; + this.used = name; + const mixedKey = getMixedSelect(field); + field.node.setPropValue(mixedKey, name); + } + private handleInitial({ initialValue }: SetterItem, fieldValue: string) { const { field, onChange } = this.props; let newValue: any = initialValue; From 2563a0faa13b554a17017f9da39e5a02052b1005 Mon Sep 17 00:00:00 2001 From: hzd822 Date: Wed, 22 Jun 2022 15:51:05 +0800 Subject: [PATCH 08/95] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E4=BE=9D?= =?UTF-8?q?=E8=B5=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1783f2e..1fbfe78 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-engine-ext", - "version": "1.0.4-beta.2", + "version": "1.0.4-beta.3", "description": "", "files": [ "dist", @@ -35,7 +35,7 @@ "classnames": "^2.2.6", "cssjson": "^2.1.3", "js-beautify": "^1.13.0", - "@alilc/lowcode-plugin-base-monaco-editor": "1.0.0" + "@alilc/lowcode-plugin-base-monaco-editor": "1.1.0" }, "devDependencies": { "@alib/build-scripts": "^0.1.3", From b9cbaa3a898a082f87e0bd54536959e7176c3aea Mon Sep 17 00:00:00 2001 From: zyy136807 Date: Wed, 22 Jun 2022 16:32:31 +0800 Subject: [PATCH 09/95] feat: fromMixedSetterSelect --- .eslintrc.js | 4 ++++ src/setter/mixed-setter/index.tsx | 9 +++++++-- src/setter/object-setter/index.tsx | 13 +++++++------ 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index c9ab2ce..e2fece9 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -5,4 +5,8 @@ module.exports = { 'prettier/@typescript-eslint', 'prettier/react', ], + rules: { + 'react/no-multi-comp': 0, + '@typescript-eslint/member-ordering': 0, + }, }; diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index 682737c..d12cc1d 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -133,6 +133,8 @@ export default class MixedSetter extends Component<{ value?: any; className?: string; }> { + private fromMixedSetterSelect = false; + private setters = nomalizeSetters(this.props.setters); // set name ,used in setting Transducer @@ -160,13 +162,14 @@ export default class MixedSetter extends Component<{ } return firstMatched || firstDefault || this.setters[0]; } + constructor(props) { super(props); // TODO: use engine ext.props const mixedKey = getMixedSelect(this.props.field); const usedSetter = this.props.field.node.getPropValue(mixedKey); - if(usedSetter) { - this.used = usedSetter + if (usedSetter) { + this.used = usedSetter; } } @@ -174,6 +177,7 @@ export default class MixedSetter extends Component<{ private hasVariableSetter = this.setters.some((item) => item.name === 'VariableSetter'); private useSetter = (name: string, usedName: string) => { + this.fromMixedSetterSelect = true; const { field } = this.props; if (name === 'VariableSetter') { const setterComponent = getSetter('VariableSetter')?.component as any; @@ -288,6 +292,7 @@ export default class MixedSetter extends Component<{ } return createSetterContent(setterType, { + fromMixedSetterSelect: this.fromMixedSetterSelect, ...shallowIntl(setterProps), field, ...restProps, diff --git a/src/setter/object-setter/index.tsx b/src/setter/object-setter/index.tsx index 89c515e..e132ea7 100644 --- a/src/setter/object-setter/index.tsx +++ b/src/setter/object-setter/index.tsx @@ -123,12 +123,13 @@ class RowSetter extends Component { }); } - // shouldComponentUpdate(_: any, nextState: any) { - // if (this.state.descriptor !== nextState.descriptor) { - // return true; - // } - // return false; - // } + shouldComponentUpdate(_: any, nextState: any) { + if (this.state.descriptor !== nextState.descriptor) { + return true; + } + return false; + } + private pipe: any; render() { From 729ffe38475d53d138a748f22174917a71e40b01 Mon Sep 17 00:00:00 2001 From: zyy136807 Date: Thu, 23 Jun 2022 15:22:52 +0800 Subject: [PATCH 10/95] feat: refine array-setter onItemChange --- src/setter/array-setter/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index 4771a9e..86cfe4d 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -60,13 +60,13 @@ export class ListSetter extends Component { /** * onItemChange 用于 ArraySetter 的单个 index 下的数据发生变化， - * 因此 target.path 的数据格式必定为 [propName, arrayIndex, key?]。 + * 因此 target.path 的数据格式必定为 [propName1, propName2, arrayIndex, key?]。 * * @param target * @param value */ onItemChange = (target: SettingField) => { - const targetPath: (string | number)[] = target?.path; + const targetPath: Array = target?.path; if (!targetPath || targetPath.length < 2) { console.warn( `[ArraySetter] onItemChange 接收的 target.path <${ @@ -77,7 +77,7 @@ export class ListSetter extends Component { } const { field } = this.props; const { items } = this.state; - const path = field.path; + const { path } = field; if (path[0] !== targetPath[0]) { console.warn( `[ArraySetter] field.path[0] !== target.path[0] <${path[0]} !== ${targetPath[0]}>`, @@ -86,7 +86,7 @@ export class ListSetter extends Component { } const fieldValue = field.getValue(); try { - const index = +targetPath[1]; + const index = +targetPath[targetPath.length - 2]; fieldValue[index] = items[index].getValue(); field?.extraProps?.setValue?.call(field, field, fieldValue); } catch (e) { From 1fe195d0357e86930ad85fed4f5a07a6e1a94ce1 Mon Sep 17 00:00:00 2001 From: zyy136807 Date: Fri, 24 Jun 2022 17:49:34 +0800 Subject: [PATCH 11/95] fix: array-setter onRemove after add an empty item --- src/setter/array-setter/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index 86cfe4d..70d7e05 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -137,7 +137,7 @@ export class ListSetter extends Component { onRemove(removed: SettingField) { const { field } = this.props; const { items } = this.state; - const values = field.getValue(); + const values = field.getValue() || []; let i = items.indexOf(removed); items.splice(i, 1); values.splice(i, 1); From dcd84b3c69cb14d11b775d17b7b2b9bf218fe73f Mon Sep 17 00:00:00 2001 From: zyy136807 Date: Tue, 28 Jun 2022 11:04:15 +0800 Subject: [PATCH 12/95] feat: add SelectProps to SelectSetter --- src/setter/select-setter/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/setter/select-setter/index.tsx b/src/setter/select-setter/index.tsx index d025cb2..c8615bd 100644 --- a/src/setter/select-setter/index.tsx +++ b/src/setter/select-setter/index.tsx @@ -7,6 +7,10 @@ interface SelectSetterProps { mode?: 'single' | 'multiple' | 'tag'; defaultValue?: any; options: any[]; + /** + * 展开后是否能搜索 + */ + showSearch?: boolean; } interface SelectSetterState { @@ -52,7 +56,7 @@ export default class SelectSetter extends PureComponent ); } From 8e03c191f25ae90ef66fcaa2b83269cba0ac1b43 Mon Sep 17 00:00:00 2001 From: hzd822 Date: Fri, 1 Jul 2022 10:28:21 +0800 Subject: [PATCH 13/95] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E7=89=88?= =?UTF-8?q?=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 1fbfe78..aac8ff2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-engine-ext", - "version": "1.0.4-beta.3", + "version": "1.0.4", "description": "", "files": [ "dist", @@ -35,7 +35,7 @@ "classnames": "^2.2.6", "cssjson": "^2.1.3", "js-beautify": "^1.13.0", - "@alilc/lowcode-plugin-base-monaco-editor": "1.1.0" + "@alilc/lowcode-plugin-base-monaco-editor": "1.1.1" }, "devDependencies": { "@alib/build-scripts": "^0.1.3", @@ -70,5 +70,5 @@ "registry": "https://registry.npmjs.org/" }, "license": "MIT", - "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.2-beta.2/build/index.html" + "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.4/build/index.html" } From c11fd696630eb4ec866f42c1c1f7723ac0cfba00 Mon Sep 17 00:00:00 2001 From: liurui <499960698@qq.com> Date: Wed, 6 Jul 2022 17:18:43 +0800 Subject: [PATCH 14/95] fix: date-picker onChange null --- src/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 9f30512..225ac89 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -55,7 +55,7 @@ class StringDateSetter extends Component { value={moment(value)} showTime={showTime} onChange={(val) => { - onChange(val.format()); + onChange(val ? val.format() : val); }} /> ); @@ -70,7 +70,7 @@ class StringTimePicker extends Component { { - onChange(val.format('HH:mm:ss')); + onChange(val ? val.format('HH:mm:ss') : val); }} /> ); From cde9c41cc823eb79fcf3914fc56d81474daec9c5 Mon Sep 17 00:00:00 2001 From: wukidy Date: Wed, 13 Jul 2022 21:03:41 +0800 Subject: [PATCH 15/95] fix: reset value when mixed setter change --- src/plugin/plugin-event-bind-dialog/index.tsx | 4 +--- src/setter/events-setter/index.tsx | 2 +- src/setter/expression-setter/index.tsx | 1 - src/setter/i18n-setter/index.tsx | 2 +- src/setter/mixed-setter/index.tsx | 4 ++-- src/setter/number-setter/index.tsx | 5 +---- 6 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/plugin/plugin-event-bind-dialog/index.tsx b/src/plugin/plugin-event-bind-dialog/index.tsx index 22f05b8..f2d035b 100644 --- a/src/plugin/plugin-event-bind-dialog/index.tsx +++ b/src/plugin/plugin-event-bind-dialog/index.tsx @@ -236,7 +236,6 @@ export default class EventBindDialog extends Component { paramList.join(',') + ')' + formatTemp.substr(rightIndex + 1, formatTemp.length); - console.log(formatTemp); } } @@ -290,12 +289,11 @@ export default class EventBindDialog extends Component { this.setState({ paramStr, }); - // console.log(newCode); }; render() { const { selectedEventName, eventName, visiable, paramStr, useParams } = this.state; - console.log('selectedEventName:' + selectedEventName); + // console.log('selectedEventName:' + selectedEventName); return ( 0 ? lifeCycleEventList : eventList; - console.log('eventDataList', eventDataList); + // console.log('eventDataList', eventDataList); return (
diff --git a/src/setter/expression-setter/index.tsx b/src/setter/expression-setter/index.tsx index 2d2605d..9bcec19 100644 --- a/src/setter/expression-setter/index.tsx +++ b/src/setter/expression-setter/index.tsx @@ -175,7 +175,6 @@ export default class ExpressionView extends PureComponent { */ getContextKeys(keys: []) { const { editor } = this.props.field; - console.log(editor); const limitKeys = ['schema', 'utils', 'constants']; if (keys.length === 0) return limitKeys; if (!limitKeys.includes(keys[0])) return []; diff --git a/src/setter/i18n-setter/index.tsx b/src/setter/i18n-setter/index.tsx index c3c9c6d..6f9cecd 100644 --- a/src/setter/i18n-setter/index.tsx +++ b/src/setter/i18n-setter/index.tsx @@ -65,7 +65,7 @@ class I18nSetter extends Component { }; onSearch(value, filterValue) { - console.log('onSearch', value, filterValue); + // console.log('onSearch', value, filterValue); } showSearchPopUp = () => { diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index d12cc1d..de7900f 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -179,6 +179,8 @@ export default class MixedSetter extends Component<{ private useSetter = (name: string, usedName: string) => { this.fromMixedSetterSelect = true; const { field } = this.props; + // reset value + field.setValue(undefined); if (name === 'VariableSetter') { const setterComponent = getSetter('VariableSetter')?.component as any; if (setterComponent && setterComponent.isPopup) { @@ -210,8 +212,6 @@ export default class MixedSetter extends Component<{ return usedItem; }); - // reset value - field.setValue(undefined); this.syncSelectSetter(name); if (setter) { diff --git a/src/setter/number-setter/index.tsx b/src/setter/number-setter/index.tsx index 365aea9..c58d9bc 100644 --- a/src/setter/number-setter/index.tsx +++ b/src/setter/number-setter/index.tsx @@ -27,14 +27,12 @@ export default class NumberSetter extends React.PureComponent< onChange, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, - step, + step = 1, units = '', precision = 0, value, } = this.props; - console.log('value', value); - return ( { - console.log('val', val); onChange(val); }} /> From 784fab3f621808921196b45f82f135afbf635b0a Mon Sep 17 00:00:00 2001 From: hzd822 Date: Sun, 24 Jul 2022 15:04:30 +0800 Subject: [PATCH 16/95] =?UTF-8?q?feat:=20=E6=96=B0=E5=83=A7style-setter?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugin/plugin-event-bind-dialog/index.tsx | 3 +- .../plugin-variable-bind-dialog/index.tsx | 3 +- src/setter/function-setter/index.tsx | 3 +- src/setter/json-setter/index.tsx | 2 +- .../components/css-code/index.tsx | 3 +- .../components/radio-group/index.tsx | 57 +++++- .../style-setter/components/row/index.tsx | 6 +- src/setter/style-setter/index.tsx | 98 +++++++--- src/setter/style-setter/pro/font/index.tsx | 24 ++- src/setter/style-setter/pro/layout/index.less | 4 +- src/setter/style-setter/pro/layout/index.tsx | 76 +++++--- .../style-setter/pro/layout/layoutBox.tsx | 177 ++++++++++-------- .../style-setter/pro/position/index.tsx | 37 ++-- 13 files changed, 333 insertions(+), 160 deletions(-) diff --git a/src/plugin/plugin-event-bind-dialog/index.tsx b/src/plugin/plugin-event-bind-dialog/index.tsx index f2d035b..96dd9e7 100644 --- a/src/plugin/plugin-event-bind-dialog/index.tsx +++ b/src/plugin/plugin-event-bind-dialog/index.tsx @@ -12,7 +12,8 @@ const tempPlaceHolder = '${extParams}'; const tempPlaceHolderReg = /\$\{extParams\}/g; const defaultEditorOption = { - style: { width: '100%', height: '319px' }, + height:'319px', + width:'100%', readOnly: false, automaticLayout: true, folding: true, // 默认开启折叠代码功能 diff --git a/src/plugin/plugin-variable-bind-dialog/index.tsx b/src/plugin/plugin-variable-bind-dialog/index.tsx index 3b20e0f..8747513 100644 --- a/src/plugin/plugin-variable-bind-dialog/index.tsx +++ b/src/plugin/plugin-variable-bind-dialog/index.tsx @@ -20,7 +20,8 @@ field: '表单Field对象' `; const defaultEditorProps = { - style: { width: '100%', height: '200px' }, + width: '100%', + height:'200px' }; const defaultEditorOption = { diff --git a/src/setter/function-setter/index.tsx b/src/setter/function-setter/index.tsx index 75596d6..be636f6 100644 --- a/src/setter/function-setter/index.tsx +++ b/src/setter/function-setter/index.tsx @@ -8,7 +8,8 @@ import './index.less'; const SETTER_NAME = 'function-setter'; const defaultEditorOption = { - style: { width: '100%', height: '95%' }, + width:'100%', + height:'95%', options: { readOnly: false, automaticLayout: true, diff --git a/src/setter/json-setter/index.tsx b/src/setter/json-setter/index.tsx index 2c648ce..5cb07fc 100644 --- a/src/setter/json-setter/index.tsx +++ b/src/setter/json-setter/index.tsx @@ -7,7 +7,7 @@ import { js_beautify } from 'js-beautify'; const defaultEditorOption = { width: '100%', - height: 400, + height: '400px', readOnly: false, automaticLayout: true, folding: true, // 默认开启折叠代码功能 diff --git a/src/setter/style-setter/components/css-code/index.tsx b/src/setter/style-setter/components/css-code/index.tsx index 742439e..9d8bb7e 100644 --- a/src/setter/style-setter/components/css-code/index.tsx +++ b/src/setter/style-setter/components/css-code/index.tsx @@ -20,6 +20,7 @@ const defaultEditorOption = { lineNumbers: 'on', wordWrap: 'off', formatOnPaste: true, + height:'100%', fontSize: 12, tabSize: 2, scrollBeyondLastLine: false, @@ -87,7 +88,7 @@ export default class CssCode extends React.Component { this.setState({ cssCode: newCode, }); - let newStyleData = parseToStyleData(newCode); + const newStyleData = parseToStyleData(newCode); // 检查是否和原来的styleData完全相同 newStyleData && onStyleDataChange(newStyleData); }; diff --git a/src/setter/style-setter/components/radio-group/index.tsx b/src/setter/style-setter/components/radio-group/index.tsx index e80db04..b57a36f 100644 --- a/src/setter/style-setter/components/radio-group/index.tsx +++ b/src/setter/style-setter/components/radio-group/index.tsx @@ -27,20 +27,40 @@ export default (props: radioProps) => { ]); }; + const onRadioItemClick = (key: string, val: string | number | boolean, value: string) => { + if (value == val) { + onStyleChange([ + { + styleKey: key, + value: null, + }, + ]); + } + }; + return (
- {value ? ( + {/* {value ? ( onRadioChange(styleKey, val)} + // onClick={(event) => { + // onRadioClick(event, styleKey, value); + // }} aria-labelledby="groupId" > {dataList && dataList.map((item: RadioItem) => ( + { + onRadioItemClick(styleKey, e.currentTarget.id, value); + }} + > {item.icon ? : item.title} } @@ -74,7 +94,38 @@ export default (props: radioProps) => { ))} - )} + )} */} + onRadioChange(styleKey, val)} + // onClick={(event) => { + // onRadioClick(event, styleKey, value); + // }} + aria-labelledby="groupId" + > + {dataList && + dataList.map((item: RadioItem) => ( + { + onRadioItemClick(styleKey, e.currentTarget.id, value); + }} + > + {item.icon ? : item.title} + + } + triggerType="hover" + closable={false} + align="t" + > + {item.tips} + + ))} +
); }; diff --git a/src/setter/style-setter/components/row/index.tsx b/src/setter/style-setter/components/row/index.tsx index bc8889d..6105196 100644 --- a/src/setter/style-setter/components/row/index.tsx +++ b/src/setter/style-setter/components/row/index.tsx @@ -16,8 +16,7 @@ interface rowProps { } export default (props: rowProps) => { - const { title, dataList, styleKey, children, styleData, contentStyle = {} } = props; - + const { title, dataList, styleKey, children, styleData, contentStyle = {}, value } = props; return (
{title && ( @@ -39,7 +38,8 @@ export default (props: rowProps) => { )}
diff --git a/src/setter/style-setter/index.tsx b/src/setter/style-setter/index.tsx index b9f40c8..9992257 100644 --- a/src/setter/style-setter/index.tsx +++ b/src/setter/style-setter/index.tsx @@ -15,6 +15,8 @@ interface StyleSetterProps { placeholder: string; field: any; onChange: (val: any) => void; + isShowCssCode: boolean; + showModuleList: string[]; } export default class StyleSetterV2 extends React.PureComponent { @@ -23,6 +25,33 @@ export default class StyleSetterV2 extends React.PureComponent unit: 'px', // 默认计算尺寸缩放 placeholderScale: 1, + // 展示板块 + showModuleList: ['background', 'border', 'font', 'layout', 'position'], + // 是否展示css源码编辑面板 + isShowCssCode: true, + // layout 配置面板 + layoutPropsConfig: { + // display 展示列表 + showDisPlayList: ['inline', 'flex', 'block', 'inline-block', 'none'], + isShowPadding: true, + isShowMargin: true, + isShowWidthHeight: true, + }, + + fontPropsConfig: { + // fontFamily列表 + fontFamilyList: [ + { value: 'Helvetica', label: 'Helvetica' }, + { value: 'Arial', label: 'Arial' }, + { value: 'serif', label: 'serif' }, + ], + }, + + // position 配置面板 + positionPropsConfig: { + isShowFloat: true, + isShowClear: true, + }, }; state = { styleData: {}, cssCodeVisiable: false, initFlag: false }; @@ -81,33 +110,60 @@ export default class StyleSetterV2 extends React.PureComponent }; render() { + const { isShowCssCode, showModuleList } = this.props; const { styleData, cssCodeVisiable, initFlag } = this.state; console.log('styleData', styleData); + return (
-
-
this.changeCssCodeVisiable(false)} - className={cssCodeVisiable ? 'top-icon-active' : 'top-icon'} - > - + {isShowCssCode && ( +
+
this.changeCssCodeVisiable(false)} + className={cssCodeVisiable ? 'top-icon-active' : 'top-icon'} + > + +
-
- - - - - - + )} + + {showModuleList.filter((item) => item == 'layout').length > 0 && ( + + )} + + {showModuleList.filter((item) => item == 'font').length > 0 && ( + + )} + + {showModuleList.filter((item) => item == 'background').length > 0 && ( + + )} + + {showModuleList.filter((item) => item == 'position').length > 0 && ( + + )} + + {showModuleList.filter((item) => item == 'border').length > 0 && ( + + )} + {initFlag && ( { - const { styleData, onStyleChange } = props; + const { styleData, onStyleChange, fontPropsConfig } = props; + const defaultFontPropsConfig = { + // display 展示列表 + fontFamilyList: [ + { value: 'Helvetica', label: 'Helvetica' }, + { value: 'Arial', label: 'Arial' }, + { value: 'serif', label: 'serif' }, + ], + }; + + // 配置合并 + const propsConfig = { ...defaultFontPropsConfig, ...fontPropsConfig }; + const { fontWeight, textAlign } = fontConfig; const onNumberChange = (styleKey: string, value: number, unit?: string) => { @@ -63,6 +76,15 @@ export default (props: fontProps) => { onChange={(val) => onStyleChange([{ styleKey: 'fontWeight', value: val }])} /> + + onInputChange('marginTop', val)} - onKeyDown={(e) => onInputKeyDown(e.key, 'marginTop')} - > -
-
- onInputChange('marginRight', val)} - onKeyDown={(e) => onInputKeyDown(e.key, 'marginRight')} - > -
-
- MARGIN - onInputChange('marginBottom', val)} - onKeyDown={(e) => onInputKeyDown(e.key, 'marginBottom')} - > -
-
- onInputChange('marginLeft', val)} - onKeyDown={(e) => onInputKeyDown(e.key, 'marginLeft')} - > -
-
- onInputChange('paddingTop', val)} - onKeyDown={(e) => onInputKeyDown(e.key, 'paddingTop')} - > -
-
- onInputChange('paddingRight', val)} - onKeyDown={(e) => onInputKeyDown(e.key, 'paddingRight')} - > -
-
- PADDING - onInputChange('paddingBottom', val)} - onKeyDown={(e) => onInputKeyDown(e.key, 'paddingBottom')} - > -
-
- onInputChange('paddingLeft', val)} - onKeyDown={(e) => onInputKeyDown(e.key, 'paddingLeft')} - > -
+ {layoutPropsConfig.isShowMargin && ( + <> +
+ onInputChange('marginTop', val)} + onKeyDown={(e) => onInputKeyDown(e.key, 'marginTop')} + > +
+
+ onInputChange('marginRight', val)} + onKeyDown={(e) => onInputKeyDown(e.key, 'marginRight')} + > +
+
+ MARGIN + onInputChange('marginBottom', val)} + onKeyDown={(e) => onInputKeyDown(e.key, 'marginBottom')} + > +
+
+ onInputChange('marginLeft', val)} + onKeyDown={(e) => onInputKeyDown(e.key, 'marginLeft')} + > +
+ + )} + + {layoutPropsConfig.isShowPadding && ( + <> +
+ onInputChange('paddingTop', val)} + onKeyDown={(e) => onInputKeyDown(e.key, 'paddingTop')} + > +
+
+ onInputChange('paddingRight', val)} + onKeyDown={(e) => onInputKeyDown(e.key, 'paddingRight')} + > +
+
+ PADDING + onInputChange('paddingBottom', val)} + onKeyDown={(e) => onInputKeyDown(e.key, 'paddingBottom')} + > +
+
+ onInputChange('paddingLeft', val)} + onKeyDown={(e) => onInputKeyDown(e.key, 'paddingLeft')} + > +
+ + )}
); }; diff --git a/src/setter/style-setter/pro/position/index.tsx b/src/setter/style-setter/pro/position/index.tsx index e274a16..7fe6b9e 100644 --- a/src/setter/style-setter/pro/position/index.tsx +++ b/src/setter/style-setter/pro/position/index.tsx @@ -10,12 +10,15 @@ const Panel = Collapse.Panel; interface layoutProps { styleData: StyleData | any; onStyleChange?: onStyleChange; + positionPropsConfig?: any; } export default (props: layoutProps) => { const { float, clear, position } = positionConfig; - const { onStyleChange, styleData } = props; + const { onStyleChange, styleData, positionPropsConfig } = props; + + const { isShowFloat, isShowClear } = positionPropsConfig; const onZIndexChange = (zIndex: number) => { onStyleChange([{ styleKey: 'zIndex', value: zIndex }]); @@ -52,20 +55,24 @@ export default (props: layoutProps) => { /> - - + {isShowFloat && ( + + )} + {isShowClear && ( + + )} ); From 08bdaa361608528765ca903ebb2868c52edaaab0 Mon Sep 17 00:00:00 2001 From: hzd822 Date: Tue, 26 Jul 2022 22:41:51 +0800 Subject: [PATCH 17/95] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E7=A7=BB?= =?UTF-8?q?=E9=99=A4=E6=95=B0=E7=BB=84=E6=97=B6,=E5=AD=90=E5=85=83?= =?UTF-8?q?=E7=B4=A0=E6=98=AF=E5=AD=97=E7=AC=A6=E4=B8=B2=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/array-setter/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index 70d7e05..3c9a9b9 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -147,7 +147,7 @@ export class ListSetter extends Component { i++; } removed.remove(); - const pureValues = values.map((item: any) => Object.assign({}, item)); + const pureValues = values.map((item: any) => typeof(item) === 'object' ? Object.assign({}, item):item); field?.setValue(pureValues); this.setState({ items }); } From df450729634873bb472b63ec8e0c7c721079a25c Mon Sep 17 00:00:00 2001 From: "shuogui.lin" Date: Thu, 11 Aug 2022 18:11:14 +0800 Subject: [PATCH 18/95] fix: value not found --- src/setter/mixed-setter/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index de7900f..65a7e81 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -360,7 +360,7 @@ export default class MixedSetter extends Component<{ setterComponent.show({ prop: field }); }} > - {intlNode('Binded: {expr}', { expr: field.getValue().value })} + {intlNode('Binded: {expr}', { expr: field.getValue()?.value ?? '-' })} ); } else { From e6026af5a9beffabdc5bc607d21cdf814305314e Mon Sep 17 00:00:00 2001 From: dingzhilei <1070504604@qq.com> Date: Wed, 17 Aug 2022 15:32:10 +0800 Subject: [PATCH 19/95] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89icon=20onload=E6=B2=A1=E6=9C=89=E6=89=A7?= =?UTF-8?q?=E8=A1=8C=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/custom-icon.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/custom-icon.tsx b/src/components/custom-icon.tsx index f7f12ac..ff31036 100644 --- a/src/components/custom-icon.tsx +++ b/src/components/custom-icon.tsx @@ -1,5 +1,6 @@ import { Icon } from '@alifd/next'; import * as React from 'react'; +import { useEffect } from 'react'; const ICON_URL = '//at.alicdn.com/t/font_2761185_gdpwg9vnz7.js'; @@ -18,8 +19,18 @@ interface IconProps { style?: any; } + + export default (props: IconProps) => { const { type, size, className = '', style = {} } = props; + useEffect(() => { + if(!CustomIcon){ + CustomIcon = Icon.createFromIconfontCN({ + scriptUrl: ICON_URL, + }); + } + + }, []); return ( <>{CustomIcon && } ); From 2b8f9444488158a99ee1da934b79a70f1f28456e Mon Sep 17 00:00:00 2001 From: hzd822 Date: Wed, 17 Aug 2022 17:12:44 +0800 Subject: [PATCH 20/95] =?UTF-8?q?fix:=20classname-setter=20list=20?= =?UTF-8?q?=E5=88=A4=E7=A9=BA,icon=E7=9A=84onload=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E6=8D=A2=E4=BA=86=E4=B8=80=E4=B8=AA=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- src/components/custom-icon.tsx | 5 +++-- src/setter/classname-setter/index.tsx | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index aac8ff2..3839dd1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-engine-ext", - "version": "1.0.4", + "version": "1.0.5-beta.2", "description": "", "files": [ "dist", @@ -70,5 +70,5 @@ "registry": "https://registry.npmjs.org/" }, "license": "MIT", - "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.4/build/index.html" + "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.5-beta.2/build/index.html" } diff --git a/src/components/custom-icon.tsx b/src/components/custom-icon.tsx index ff31036..e75efbf 100644 --- a/src/components/custom-icon.tsx +++ b/src/components/custom-icon.tsx @@ -6,11 +6,12 @@ const ICON_URL = '//at.alicdn.com/t/font_2761185_gdpwg9vnz7.js'; let CustomIcon: any; -window.onload = function () { +document.addEventListener('DOMContentLoaded', function () { + // console.log('3 seconds passed'); CustomIcon = Icon.createFromIconfontCN({ scriptUrl: ICON_URL, }); -}; +}); interface IconProps { type: string; diff --git a/src/setter/classname-setter/index.tsx b/src/setter/classname-setter/index.tsx index 53d60b0..bbebc4a 100644 --- a/src/setter/classname-setter/index.tsx +++ b/src/setter/classname-setter/index.tsx @@ -28,7 +28,7 @@ export default class ClassNameView extends PureComponent { if (css) { const re = /\.?\w+[^{]+\{[^}]*\}/g; const list = css.match(re); - list.map((item) => { + list?.map((item) => { if (item[0] === '.') { let className = item.substring(1, item.indexOf('{')); if (className.indexOf(':') >= 0) { From 64641688893edb67a55aab4d51fff322115e2f9e Mon Sep 17 00:00:00 2001 From: hzd822 Date: Thu, 18 Aug 2022 16:24:27 +0800 Subject: [PATCH 21/95] =?UTF-8?q?feat:=20=E7=BB=91=E5=AE=9A=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E7=9A=84=E6=97=B6=E5=80=99=E5=8F=AF=E4=BB=A5=E5=AE=9A?= =?UTF-8?q?=E5=88=B6getSchema=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugin/plugin-variable-bind-dialog/index.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/plugin/plugin-variable-bind-dialog/index.tsx b/src/plugin/plugin-variable-bind-dialog/index.tsx index 8747513..aba9243 100644 --- a/src/plugin/plugin-variable-bind-dialog/index.tsx +++ b/src/plugin/plugin-variable-bind-dialog/index.tsx @@ -73,6 +73,11 @@ export default class VariableBindDialog extends Component { }); } + exportSchema = () => { + // 可以定制getSchema方法 + return this.props.config?.props?.getSchema() || project.exportSchema(); + } + initCode = () => { const { field } = this.state; const fieldValue = field.getValue(); @@ -96,7 +101,7 @@ export default class VariableBindDialog extends Component { * @return {Array} */ getMethods(): any[] { - const schema = project.exportSchema(); + const schema = this.exportSchema(); const methodsMap = schema.componentsTree[0]?.methods; const methods = []; @@ -116,7 +121,7 @@ export default class VariableBindDialog extends Component { * @return {Array} */ getVarableList(): any[] { - const schema = project.exportSchema(); + const schema = this.exportSchema(); const stateMap = schema.componentsTree[0]?.state; const dataSource = []; @@ -136,7 +141,7 @@ export default class VariableBindDialog extends Component { * @return {Array} */ getDataSource(): any[] { - const schema = project.exportSchema(); + const schema = this.exportSchema(); const stateMap = schema.componentsTree[0]?.dataSource; const list = stateMap?.list || []; const dataSource = []; From f7c9fb9e56da7397791b9748ca5c946e72451083 Mon Sep 17 00:00:00 2001 From: hzd822 Date: Sun, 21 Aug 2022 21:52:09 +0800 Subject: [PATCH 22/95] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E4=BB=A3?= =?UTF-8?q?=E7=90=86=E8=B0=83=E8=AF=95=E7=9A=84=E6=97=B6=E5=80=99sourcemap?= =?UTF-8?q?=E4=B8=8D=E8=83=BD=E6=98=A0=E5=B0=84=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build.plugin.js | 8 +++++++- package.json | 4 ++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/build.plugin.js b/build.plugin.js index b931776..bd2137e 100644 --- a/build.plugin.js +++ b/build.plugin.js @@ -1,6 +1,6 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); -module.exports = ({ onGetWebpackConfig }) => { +module.exports = ({ context,onGetWebpackConfig }) => { onGetWebpackConfig((config) => { config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [ { @@ -19,5 +19,11 @@ module.exports = ({ onGetWebpackConfig }) => { */ config.plugins.delete('hot'); config.devServer.hot(false); + if (context.command === 'start') { + config.devtool('inline-source-map'); + } + // console.log('====context',context.command) + + // config.devtool('inline-source-map'); }); }; diff --git a/package.json b/package.json index 3839dd1..efc2e4e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-engine-ext", - "version": "1.0.5-beta.2", + "version": "1.0.5-beta.6", "description": "", "files": [ "dist", @@ -70,5 +70,5 @@ "registry": "https://registry.npmjs.org/" }, "license": "MIT", - "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.5-beta.2/build/index.html" + "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.5-beta.5/build/index.html" } From 94c223bebf1e8d9cff78a4611d063ea23fb3f957 Mon Sep 17 00:00:00 2001 From: zyy136807 Date: Wed, 24 Aug 2022 10:43:17 +0800 Subject: [PATCH 23/95] feat: fix variable dialog container --- src/plugin/plugin-variable-bind-dialog/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/plugin/plugin-variable-bind-dialog/index.tsx b/src/plugin/plugin-variable-bind-dialog/index.tsx index aba9243..1e0b1f9 100644 --- a/src/plugin/plugin-variable-bind-dialog/index.tsx +++ b/src/plugin/plugin-variable-bind-dialog/index.tsx @@ -75,7 +75,7 @@ export default class VariableBindDialog extends Component { exportSchema = () => { // 可以定制getSchema方法 - return this.props.config?.props?.getSchema() || project.exportSchema(); + return this.props.config?.props?.getSchema?.() || project.exportSchema(); } initCode = () => { @@ -390,6 +390,9 @@ export default class VariableBindDialog extends Component { title={this.renderTitle()} onClose={this.closeDialog} footer={this.renderBottom()} + popupContainer={ + document.getElementById('engine-popup-container') ? 'engine-popup-container' : undefined + } >
From 67f9c537e14d1899482708b77f1ae7efc544e41a Mon Sep 17 00:00:00 2001 From: zyy136807 Date: Mon, 29 Aug 2022 11:45:40 +0800 Subject: [PATCH 24/95] feat: refine array item onchange when nested --- src/setter/array-setter/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index 3c9a9b9..5f124ec 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -87,8 +87,10 @@ export class ListSetter extends Component { const fieldValue = field.getValue(); try { const index = +targetPath[targetPath.length - 2]; - fieldValue[index] = items[index].getValue(); - field?.extraProps?.setValue?.call(field, field, fieldValue); + if (typeof index === 'number' && !isNaN(index)) { + fieldValue[index] = items[index].getValue(); + field?.extraProps?.setValue?.call(field, field, fieldValue); + } } catch (e) { console.warn('[ArraySetter] extraProps.setValue failed :', e); } From c7ed6d322778878ac49b9b8c96ba69d7f3adbb11 Mon Sep 17 00:00:00 2001 From: hzd822 Date: Wed, 14 Sep 2022 14:43:49 +0800 Subject: [PATCH 25/95] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=9C=86?= =?UTF-8?q?=E8=A7=92=E7=9A=84=E9=80=89=E4=B8=AD=E7=8A=B6=E6=80=81=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../style-setter/components/number/index.tsx | 4 +- src/setter/style-setter/pro/border/index.tsx | 113 +++++++++++++----- 2 files changed, 85 insertions(+), 32 deletions(-) diff --git a/src/setter/style-setter/components/number/index.tsx b/src/setter/style-setter/components/number/index.tsx index 17f450e..c2dcbd3 100644 --- a/src/setter/style-setter/components/number/index.tsx +++ b/src/setter/style-setter/components/number/index.tsx @@ -15,6 +15,7 @@ interface numberProps { field?: any; placeholderScale?: number; useComputedStyle?: boolean; + onChange?:any; } export default (props: numberProps) => { @@ -28,6 +29,7 @@ export default (props: numberProps) => { style = {}, className = '', placeholderScale, + onChange, } = props; const [placeholder, setPlaceholder] = useState(null); @@ -65,7 +67,7 @@ export default (props: numberProps) => { value={unit ? removeUnit(styleData[styleKey]) : styleData[styleKey]} min={isEmptyValue(min) ? Number.MIN_SAFE_INTEGER : min} max={isEmptyValue(max) ? Number.MAX_SAFE_INTEGER : max} - onChange={(val) => onNumberChange(styleKey, val, unit)} + onChange={(val) => onChange ? onChange(styleKey, val, unit):onNumberChange(styleKey, val, unit)} innerAfter={unit ? unit : ''} placeholder={placeholder} > diff --git a/src/setter/style-setter/pro/border/index.tsx b/src/setter/style-setter/pro/border/index.tsx index 3e61b70..3538a44 100644 --- a/src/setter/style-setter/pro/border/index.tsx +++ b/src/setter/style-setter/pro/border/index.tsx @@ -14,14 +14,27 @@ const Panel = Collapse.Panel; const BORDER_MAX = 30; +enum BorderRadiusType { + fixedBorder = "fixedBorder", + partBorder = "partBorder", +} + const BorderDirectionMap = { borderLeft: 'borderLeft', borderRight: 'borderRight', borderTop: 'borderTop', borderBottom: 'borderBottom', - border: 'border', + // border:'border' }; +const borderRadiusMap = { + borderRadius:'borderRadius', + borderTopLeftRadius:'borderTopLeftRadius', + borderTopRightRadius:'borderTopRightRadius', + borderBottomLeftRadius:'borderBottomLeftRadius', + borderBottomRightRadius:'borderBottomRightRadius', +} + interface fontProps { styleData: StyleData | any; onStyleChange?: onStyleChange; @@ -35,46 +48,63 @@ export default (props: fontProps) => { useEffect(() => { if (!borderDirection) { + debugger; for (let key in styleData) { for (let borderDirectionKey in BorderDirectionMap) { if (key.indexOf(borderDirectionKey) >= 0) { setBorderDirection(borderDirectionKey); - return; + break; + } + if (styleData['border']){ + setBorderDirection('border'); + break; } } - - // if (key.indexOf(BorderDirectionMap.borderLeft)>=0){ - // setBorderDirection('borderLeft'); - // return; - // }else if (key.indexOf('borderRight')>=0){ - // setBorderDirection('borderRight'); - // return; - // }else if (key.indexOf('borderTop')>=0){ - // setBorderDirection('borderTop'); - // return; - // }else if (key.indexOf('borderBottom')>=0){ - // setBorderDirection('borderBottom'); - // return; - // }else if (key.indexOf('border')>=0){ - // setBorderDirection('border'); - // return; - // } } } + + // 判断圆角类型 + if (styleData[borderRadiusMap.borderRadius]){ + setSelBorderType(BorderRadiusType.fixedBorder); + }else if (styleData[borderRadiusMap.borderBottomLeftRadius] || styleData[borderRadiusMap.borderBottomRightRadius] || styleData[borderRadiusMap.borderTopLeftRadius] || styleData[borderRadiusMap.borderTopRightRadius]){ + setSelBorderType(BorderRadiusType.partBorder); + } + }, [styleData]); const onChangeBorderType = (styleDataList: Array) => { + if (styleDataList) { - setSelBorderType(styleDataList[0].value); + const styleKey = styleDataList[0].value; + setSelBorderType(styleKey); } }; const onRangeChange = (styleKey: string, value: string, unit?: string) => { + + // 需要清除partBorder的圆角设置，不然会冲突，容易遗漏 + onStyleChange([ { styleKey, value: unit ? addUnit(value, unit) : value, }, + { + styleKey:borderRadiusMap.borderBottomLeftRadius, + value: null + }, + { + styleKey:borderRadiusMap.borderBottomRightRadius, + value: null + }, + { + styleKey:borderRadiusMap.borderTopLeftRadius, + value: null + }, + { + styleKey:borderRadiusMap.borderTopRightRadius, + value: null + }, ]); }; @@ -82,6 +112,23 @@ export default (props: fontProps) => { setBorderDirection(styleKey); }; + const onPartBorderRadiusChange = (styleKey: string, value: number, unit: string,styleData:any) => { + let styleDataList = [ + { + styleKey, + value: unit ? addUnit(value, unit) : value, + }, + ]; + if (styleData['borderRadius']){ + styleDataList.push({ + styleKey:'borderRadius', + value:null + }) + } + onStyleChange(styleDataList); + } + + const onBorderTypeChange = (styleKey: string, value: string) => { onStyleChange([ { @@ -114,7 +161,7 @@ export default (props: fontProps) => { @@ -135,18 +182,20 @@ export default (props: fontProps) => { onPartBorderRadiusChange(styleKey, val, unit,styleData)} />
onPartBorderRadiusChange(styleKey, val, unit,styleData)} />
@@ -160,25 +209,27 @@ export default (props: fontProps) => { onPartBorderRadiusChange(styleKey, val, unit,styleData)} />
onPartBorderRadiusChange(styleKey, val, unit,styleData)} + style={{ width: '68px' }} />
)} - +
@@ -207,7 +258,7 @@ export default (props: fontProps) => {
Date: Fri, 16 Sep 2022 14:33:33 +0800 Subject: [PATCH 26/95] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0Number=E7=9A=84o?= =?UTF-8?q?nchange=E9=97=AE=E9=A2=98,=E5=90=8C=E6=97=B6=E6=9B=B4=E6=94=B9?= =?UTF-8?q?=E4=BA=86input=E5=AE=BD=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- src/setter/style-setter/components/number/index.tsx | 9 ++++++--- src/setter/style-setter/components/row/index.less | 2 +- src/setter/style-setter/pro/background/config.json | 2 +- src/setter/style-setter/pro/border/index.tsx | 9 ++++----- src/setter/style-setter/pro/position/config.json | 2 +- src/setter/style-setter/pro/position/index.tsx | 2 +- 7 files changed, 16 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index efc2e4e..614c127 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-engine-ext", - "version": "1.0.5-beta.6", + "version": "1.0.5-beta.10", "description": "", "files": [ "dist", @@ -70,5 +70,5 @@ "registry": "https://registry.npmjs.org/" }, "license": "MIT", - "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.5-beta.5/build/index.html" + "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.5-beta.9/build/index.html" } diff --git a/src/setter/style-setter/components/number/index.tsx b/src/setter/style-setter/components/number/index.tsx index c2dcbd3..5e1bd8c 100644 --- a/src/setter/style-setter/components/number/index.tsx +++ b/src/setter/style-setter/components/number/index.tsx @@ -15,7 +15,7 @@ interface numberProps { field?: any; placeholderScale?: number; useComputedStyle?: boolean; - onChange?:any; + onChangeFunction?:any; } export default (props: numberProps) => { @@ -29,9 +29,12 @@ export default (props: numberProps) => { style = {}, className = '', placeholderScale, - onChange, + onChangeFunction, } = props; + console.log('props',props); + + const [placeholder, setPlaceholder] = useState(null); const onNumberChange = (styleKey: string, value: number, unit?: string) => { @@ -67,7 +70,7 @@ export default (props: numberProps) => { value={unit ? removeUnit(styleData[styleKey]) : styleData[styleKey]} min={isEmptyValue(min) ? Number.MIN_SAFE_INTEGER : min} max={isEmptyValue(max) ? Number.MAX_SAFE_INTEGER : max} - onChange={(val) => onChange ? onChange(styleKey, val, unit):onNumberChange(styleKey, val, unit)} + onChange={(val) => onChangeFunction ? onChangeFunction(styleKey, val, unit):onNumberChange(styleKey, val, unit)} innerAfter={unit ? unit : ''} placeholder={placeholder} > diff --git a/src/setter/style-setter/components/row/index.less b/src/setter/style-setter/components/row/index.less index 0558b48..b811ddb 100644 --- a/src/setter/style-setter/components/row/index.less +++ b/src/setter/style-setter/components/row/index.less @@ -5,7 +5,7 @@ margin-bottom: 10px; .title-contaienr { - width: 60px; + width: 46px; flex-direction: row; } diff --git a/src/setter/style-setter/pro/background/config.json b/src/setter/style-setter/pro/background/config.json index f5d4e80..1c7c4b4 100644 --- a/src/setter/style-setter/pro/background/config.json +++ b/src/setter/style-setter/pro/background/config.json @@ -1,6 +1,6 @@ { "backgroundType": { - "title": "背景类型", + "title": "背景", "dataList": [ { "value": "color", diff --git a/src/setter/style-setter/pro/border/index.tsx b/src/setter/style-setter/pro/border/index.tsx index 3538a44..b8472df 100644 --- a/src/setter/style-setter/pro/border/index.tsx +++ b/src/setter/style-setter/pro/border/index.tsx @@ -48,7 +48,6 @@ export default (props: fontProps) => { useEffect(() => { if (!borderDirection) { - debugger; for (let key in styleData) { for (let borderDirectionKey in BorderDirectionMap) { if (key.indexOf(borderDirectionKey) >= 0) { @@ -185,7 +184,7 @@ export default (props: fontProps) => { styleKey={borderRadiusMap.borderTopLeftRadius} {...props} style={{ width: '68px' }} - onChange = {(styleKey, val, unit)=>onPartBorderRadiusChange(styleKey, val, unit,styleData)} + onChangeFunction = {(styleKey, val, unit)=>onPartBorderRadiusChange(styleKey, val, unit,styleData)} />
@@ -195,7 +194,7 @@ export default (props: fontProps) => { styleKey={borderRadiusMap.borderTopRightRadius} {...props} style={{ width: '68px' }} - onChange = {(styleKey, val, unit)=>onPartBorderRadiusChange(styleKey, val, unit,styleData)} + onChangeFunction = {(styleKey, val, unit)=>onPartBorderRadiusChange(styleKey, val, unit,styleData)} />
@@ -212,7 +211,7 @@ export default (props: fontProps) => { styleKey={borderRadiusMap.borderBottomLeftRadius} {...props} style={{ width: '68px' }} - onChange = {(styleKey, val, unit)=>onPartBorderRadiusChange(styleKey, val, unit,styleData)} + onChangeFunction = {(styleKey, val, unit)=>onPartBorderRadiusChange(styleKey, val, unit,styleData)} />
@@ -221,7 +220,7 @@ export default (props: fontProps) => { max={BORDER_MAX} styleKey={borderRadiusMap.borderBottomRightRadius} {...props} - onChange = {(styleKey:string, val:number, unit:string)=>onPartBorderRadiusChange(styleKey, val, unit,styleData)} + onChangeFunction = {(styleKey:string, val:number, unit:string)=>onPartBorderRadiusChange(styleKey, val, unit,styleData)} style={{ width: '68px' }} />
diff --git a/src/setter/style-setter/pro/position/config.json b/src/setter/style-setter/pro/position/config.json index 5cf7345..3130599 100644 --- a/src/setter/style-setter/pro/position/config.json +++ b/src/setter/style-setter/pro/position/config.json @@ -1,6 +1,6 @@ { "position": { - "title": "定位类型", + "title": "定位", "dataList": [ { "value": "static", diff --git a/src/setter/style-setter/pro/position/index.tsx b/src/setter/style-setter/pro/position/index.tsx index 7fe6b9e..62f7b01 100644 --- a/src/setter/style-setter/pro/position/index.tsx +++ b/src/setter/style-setter/pro/position/index.tsx @@ -46,7 +46,7 @@ export default (props: layoutProps) => { )} - + Date: Mon, 19 Sep 2022 15:12:28 +0800 Subject: [PATCH 27/95] fix: mixed used setter save in same level with prop --- src/setter/mixed-setter/index.tsx | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index 65a7e81..81869b0 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -34,7 +34,25 @@ export interface SetterItem { const dash = '_'; function getMixedSelect(field) { const path = field.path || []; - return `_unsafe_MixedSetter${dash}${path.join(dash)}${dash}select`; + if(path.length) { + const key = `_unsafe_MixedSetter${dash}${path.at(-1)}${dash}select` + const newPath = [...path]; + newPath.splice(path.length - 1, 1, key); + const newKey = field.node.getPropValue(newPath.join('.')) + if(newKey) return newKey; + // 兼容下以前的问题情况 + const oldUnsafeKey = `_unsafe_MixedSetter${dash}${path.join(dash)}${dash}select`; + return field.node.getPropValue(oldUnsafeKey); + } + return undefined; +} +function setMixedSelect(field, usedSetter) { + const path = field.path || []; + if(path.length) { + const key = `_unsafe_MixedSetter${dash}${path.at(-1)}${dash}select` + path.splice(path.length - 1, 1, key); + field.node.setPropValue(path.join('.'), usedSetter) + } } function nomalizeSetters( @@ -166,8 +184,7 @@ export default class MixedSetter extends Component<{ constructor(props) { super(props); // TODO: use engine ext.props - const mixedKey = getMixedSelect(this.props.field); - const usedSetter = this.props.field.node.getPropValue(mixedKey); + const usedSetter = getMixedSelect(this.props.field); if (usedSetter) { this.used = usedSetter; } @@ -223,8 +240,7 @@ export default class MixedSetter extends Component<{ // TODO: sync into engine ext.props const { field } = this.props; this.used = name; - const mixedKey = getMixedSelect(field); - field.node.setPropValue(mixedKey, name); + setMixedSelect(field, name); } private handleInitial({ initialValue }: SetterItem, fieldValue: string) { From f10110bb87e1ce47b0d58ac6b8f9cc3a333b9734 Mon Sep 17 00:00:00 2001 From: taozq Date: Tue, 20 Sep 2022 10:55:25 +0800 Subject: [PATCH 28/95] fix:fix event parameter error of new function --- src/plugin/plugin-event-bind-dialog/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugin/plugin-event-bind-dialog/index.tsx b/src/plugin/plugin-event-bind-dialog/index.tsx index 96dd9e7..4ed62f5 100644 --- a/src/plugin/plugin-event-bind-dialog/index.tsx +++ b/src/plugin/plugin-event-bind-dialog/index.tsx @@ -278,7 +278,7 @@ export default class EventBindDialog extends Component { setTimeout(() => { event.emit('codeEditor.addFunction', { functionName: formatEventName, - templete: formatTemp, + template: formatTemp, }); }, 200); } From adf427d3b584453ce8aad2382acba806300a30b3 Mon Sep 17 00:00:00 2001 From: wukidy Date: Tue, 20 Sep 2022 14:19:00 +0800 Subject: [PATCH 29/95] fix: mixed setter save old unsafe key when open --- src/setter/mixed-setter/index.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index 81869b0..9fa0b37 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -40,9 +40,14 @@ function getMixedSelect(field) { newPath.splice(path.length - 1, 1, key); const newKey = field.node.getPropValue(newPath.join('.')) if(newKey) return newKey; - // 兼容下以前的问题情况 + // 兼容下以前的问题情况，如果捕获到，获取 oldUnsafeKey 取值并将其直接置空 const oldUnsafeKey = `_unsafe_MixedSetter${dash}${path.join(dash)}${dash}select`; - return field.node.getPropValue(oldUnsafeKey); + const oldUsedSetter = field.node.getPropValue(oldUnsafeKey); + if(oldUsedSetter) { + field.node.setPropValue(newPath.join('.'), oldUsedSetter); + field.node.setPropValue(oldUnsafeKey, undefined); + } + return oldUsedSetter; } return undefined; } From 256e8c9b689cfe46699ba58f9148347bcb89c427 Mon Sep 17 00:00:00 2001 From: liujuping Date: Fri, 30 Sep 2022 15:42:19 +0800 Subject: [PATCH 30/95] feat: dependency version unlocked --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 614c127..2f1a92c 100644 --- a/package.json +++ b/package.json @@ -29,13 +29,13 @@ "component" ], "dependencies": { - "@alilc/lowcode-types": "1.0.0", - "@alilc/lowcode-utils": "1.0.0", + "@alilc/lowcode-types": "^1.0.0", + "@alilc/lowcode-utils": "^1.0.0", "react-color": "^2.19.3", "classnames": "^2.2.6", "cssjson": "^2.1.3", "js-beautify": "^1.13.0", - "@alilc/lowcode-plugin-base-monaco-editor": "1.1.1" + "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.1" }, "devDependencies": { "@alib/build-scripts": "^0.1.3", @@ -47,7 +47,7 @@ "build-plugin-fusion": "^0.1.0", "build-plugin-fusion-css": "1.0.3", "build-plugin-moment-locales": "^0.1.0", - "@alilc/lowcode-editor-skeleton": "1.0.0", + "@alilc/lowcode-editor-skeleton": "^1.0.0", "build-plugin-react-app": "^1.1.2", "enzyme": "^3.10.0", "enzyme-adapter-react-16": "^1.14.0", From cf463710a2e480a46c33b76aaa9b5759f70f17c0 Mon Sep 17 00:00:00 2001 From: hzd822 Date: Thu, 10 Nov 2022 14:09:23 +0800 Subject: [PATCH 31/95] =?UTF-8?q?feat:=20stylesetter=20csscode=E4=BC=98?= =?UTF-8?q?=E5=8C=96,=E4=B8=8D=E5=86=8D=E9=9C=80=E8=A6=81=E5=BC=B9?= =?UTF-8?q?=E5=87=BA,=E5=8F=AF=E4=BB=A5=E7=9B=B4=E6=8E=A5=E7=BC=96?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 + .../components/css-code/index.tsx | 122 ++++++------------ .../style-setter/components/row/index.less | 5 + .../style-setter/components/row/index.tsx | 7 +- src/setter/style-setter/index.tsx | 15 ++- src/setter/style-setter/pro/layout/index.tsx | 6 +- 6 files changed, 69 insertions(+), 89 deletions(-) diff --git a/package.json b/package.json index 2f1a92c..591643f 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,9 @@ "classnames": "^2.2.6", "cssjson": "^2.1.3", "js-beautify": "^1.13.0", + "@uiw/react-codemirror":"4.12.4", + "codemirror":"6.0.1", + "@codemirror/lang-css":"6.0.0", "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.1" }, "devDependencies": { diff --git a/src/setter/style-setter/components/css-code/index.tsx b/src/setter/style-setter/components/css-code/index.tsx index 9d8bb7e..f126f92 100644 --- a/src/setter/style-setter/components/css-code/index.tsx +++ b/src/setter/style-setter/components/css-code/index.tsx @@ -1,57 +1,22 @@ import * as React from 'react'; -import { Drawer } from '@alifd/next'; +import { Button} from '@alifd/next'; import { StyleData } from '../../utils/types'; import { parseToCssCode, parseToStyleData } from '../../utils'; -import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor'; - +import CodeMirror from '@uiw/react-codemirror'; +import { css } from '@codemirror/lang-css'; +import Icon from '../../components/icon'; interface CodeProps { - visible: boolean; styleData: StyleData | any; onStyleDataChange: (val: any) => void; - changeCssCodeVisiable: { - (visable: boolean): void; - }; } -const defaultEditorOption = { - readOnly: false, - automaticLayout: true, - folding: true, // 默认开启折叠代码功能 - lineNumbers: 'on', - wordWrap: 'off', - formatOnPaste: true, - height:'100%', - fontSize: 12, - tabSize: 2, - scrollBeyondLastLine: false, - fixedOverflowWidgets: false, - snippetSuggestions: 'top', - minimap: { - enabled: false, - }, - scrollbar: { - vertical: 'auto', - horizontal: 'auto', - }, -}; - +const extensions = [css()]; export default class CssCode extends React.Component { state = { - offsetX: -300, - defaultEditorProps: {}, cssCode: '', + isCanSave:true, }; - shouldComponentUpdate(nextProps: CodeProps, nextState: any) { - if ( - nextProps.visible != this.props.visible || - (this.state.cssCode == '' && nextState.cssCode != '') - ) { - return true; - } - - return false; - } componentWillReceiveProps(nextProps: CodeProps) { const cssCode = parseToCssCode(nextProps.styleData); @@ -62,60 +27,57 @@ export default class CssCode extends React.Component { componentDidMount() { const { styleData } = this.props; - - if (document.body.clientWidth >= 1860) { - this.setState({ - offsetX: -400, - }); - } - const cssCode = parseToCssCode(styleData); - console.log('cssCode', cssCode); - this.setState({ - defaultEditorProps: { - style: { - width: '100%', - height: document.body.clientHeight - 90 + 'px', - }, - }, cssCode, }); } - updateCode = (newCode: string) => { + + savaStyle = () => { const { onStyleDataChange } = this.props; + const {cssCode} = this.state; + const newStyleData = parseToStyleData(cssCode); + // 检查是否和原来的styleData完全相同 + newStyleData && onStyleDataChange(newStyleData); + this.setState({ + isCanSave:true + }) + } + + + updateCode = (newCode: string) => { this.setState({ cssCode: newCode, }); const newStyleData = parseToStyleData(newCode); - // 检查是否和原来的styleData完全相同 - newStyleData && onStyleDataChange(newStyleData); + if (newStyleData){ + this.setState({ + isCanSave:false + }) + } + }; render() { - const { offsetX, cssCode, defaultEditorProps } = this.state; - const { visible, changeCssCodeVisiable } = this.props; - + const { cssCode,isCanSave } = this.state; return ( - { - changeCssCodeVisiable(true); - }} - > - this.updateCode(newCode)} - /> - +
+
+ + +
+ this.updateCode(value)} + extensions={extensions} + basicSetup={{ + foldGutter: false, + lineNumbers:false + }} + + /> +
); } } diff --git a/src/setter/style-setter/components/row/index.less b/src/setter/style-setter/components/row/index.less index b811ddb..51a185c 100644 --- a/src/setter/style-setter/components/row/index.less +++ b/src/setter/style-setter/components/row/index.less @@ -9,6 +9,11 @@ flex-direction: row; } + .title-contaienr-long { + width: 55px; + flex-direction: row; + } + .title-text { color: rgba(0, 0, 0, 0.6); font-size: 12px; diff --git a/src/setter/style-setter/components/row/index.tsx b/src/setter/style-setter/components/row/index.tsx index 6105196..8c74903 100644 --- a/src/setter/style-setter/components/row/index.tsx +++ b/src/setter/style-setter/components/row/index.tsx @@ -13,18 +13,19 @@ interface rowProps { onStyleChange?: onStyleChange; value?: string; contentStyle?: any; + longTitle?: boolean } export default (props: rowProps) => { - const { title, dataList, styleKey, children, styleData, contentStyle = {}, value } = props; + const { title, dataList, styleKey, children, styleData, contentStyle = {}, value, longTitle } = props; return (
{title && (
{title} diff --git a/src/setter/style-setter/index.tsx b/src/setter/style-setter/index.tsx index 9992257..0f1d423 100644 --- a/src/setter/style-setter/index.tsx +++ b/src/setter/style-setter/index.tsx @@ -6,7 +6,6 @@ import Border from './pro/border'; import Background from './pro/background'; import CssCode from './components/css-code'; import { StyleData } from './utils/types'; -import Icon from './components/icon'; import { ConfigProvider } from '@alifd/next'; import './index.less'; interface StyleSetterProps { @@ -119,12 +118,18 @@ export default class StyleSetterV2 extends React.PureComponent
{isShowCssCode && (
-
this.changeCssCodeVisiable(false)} className={cssCodeVisiable ? 'top-icon-active' : 'top-icon'} > -
+
*/} + + +
)} @@ -164,14 +169,14 @@ export default class StyleSetterV2 extends React.PureComponent > )} - {initFlag && ( + {/* {initFlag && ( - )} + )} */}
); diff --git a/src/setter/style-setter/pro/layout/index.tsx b/src/setter/style-setter/pro/layout/index.tsx index 8910c31..a13bc27 100644 --- a/src/setter/style-setter/pro/layout/index.tsx +++ b/src/setter/style-setter/pro/layout/index.tsx @@ -39,7 +39,7 @@ export default (props: layoutProps) => { return ( - + {styleData['display'] === 'flex' && ( <> @@ -47,24 +47,28 @@ export default (props: layoutProps) => { title={flexDirection.title} dataList={flexDirection.dataList} styleKey="flexDirection" + longTitle={true} {...props} /> From ffdf7e155c25d1e541610ea45e92af89cbbf7e87 Mon Sep 17 00:00:00 2001 From: hzd822 Date: Thu, 10 Nov 2022 17:42:20 +0800 Subject: [PATCH 32/95] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4codemirror?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 - .../components/css-code/index.tsx | 97 ++++++++++++++----- 2 files changed, 72 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 591643f..2f1a92c 100644 --- a/package.json +++ b/package.json @@ -35,9 +35,6 @@ "classnames": "^2.2.6", "cssjson": "^2.1.3", "js-beautify": "^1.13.0", - "@uiw/react-codemirror":"4.12.4", - "codemirror":"6.0.1", - "@codemirror/lang-css":"6.0.0", "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.1" }, "devDependencies": { diff --git a/src/setter/style-setter/components/css-code/index.tsx b/src/setter/style-setter/components/css-code/index.tsx index f126f92..c1399b3 100644 --- a/src/setter/style-setter/components/css-code/index.tsx +++ b/src/setter/style-setter/components/css-code/index.tsx @@ -2,21 +2,61 @@ import * as React from 'react'; import { Button} from '@alifd/next'; import { StyleData } from '../../utils/types'; import { parseToCssCode, parseToStyleData } from '../../utils'; -import CodeMirror from '@uiw/react-codemirror'; -import { css } from '@codemirror/lang-css'; +import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor'; import Icon from '../../components/icon'; interface CodeProps { styleData: StyleData | any; onStyleDataChange: (val: any) => void; } -const extensions = [css()]; + +const defaultEditorOption = { + readOnly: false, + //automaticLayout: true, + folding: true, // 默认开启折叠代码功能 + wordWrap: 'off', + formatOnPaste: true, + //height:'100%', + fontSize: 12, + tabSize: 2, + scrollBeyondLastLine: false, + fixedOverflowWidgets: false, + snippetSuggestions: 'top', + minimap: { + enabled: false, + }, + options : { + lineNumbers: 'off', + fixedOverflowWidgets:true, + automaticLayout:true, + glyphMargin: false, + folding: false, + lineDecorationsWidth: 0, + lineNumbersMinChars: 0 + }, + scrollbar: { + vertical: 'auto', + horizontal: 'auto', + } +}; + export default class CssCode extends React.Component { state = { + defaultEditorProps: {}, cssCode: '', isCanSave:true, }; + // shouldComponentUpdate(nextProps: CodeProps, nextState: any) { + // if ( + // // nextProps.visible != this.props.visible || + // this.state.cssCode == '' && nextState.cssCode != '' + // ) { + // return true; + // } + + // return false; + // } componentWillReceiveProps(nextProps: CodeProps) { const cssCode = parseToCssCode(nextProps.styleData); @@ -27,22 +67,32 @@ export default class CssCode extends React.Component { componentDidMount() { const { styleData } = this.props; + + if (document.body.clientWidth >= 1860) { + this.setState({ + offsetX: -400, + }); + } + const cssCode = parseToCssCode(styleData); + // console.log('cssCode', cssCode); + this.setState({ cssCode, }); } - - savaStyle = () => { + styleSave = () => { + const { cssCode } = this.state; const { onStyleDataChange } = this.props; - const {cssCode} = this.state; const newStyleData = parseToStyleData(cssCode); - // 检查是否和原来的styleData完全相同 - newStyleData && onStyleDataChange(newStyleData); - this.setState({ - isCanSave:true - }) + // 检查是否和原来的styleData完全相同 + if (newStyleData){ + onStyleDataChange(newStyleData); + this.setState({ + isCanSave:true + }) + } } @@ -60,23 +110,20 @@ export default class CssCode extends React.Component { }; render() { - const { cssCode,isCanSave } = this.state; + const { cssCode, defaultEditorProps, isCanSave } = this.state; return (
- - -
- this.updateCode(value)} - extensions={extensions} - basicSetup={{ - foldGutter: false, - lineNumbers:false - }} - - /> + + +
+ this.updateCode(newCode)} + />
); } From 9750f64fb727671d1d6e10ff37a5a62965c613ea Mon Sep 17 00:00:00 2001 From: hzd822 Date: Thu, 10 Nov 2022 17:46:33 +0800 Subject: [PATCH 33/95] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E5=A4=A7=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../style-setter/components/css-code/index.tsx | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/src/setter/style-setter/components/css-code/index.tsx b/src/setter/style-setter/components/css-code/index.tsx index c1399b3..98b8996 100644 --- a/src/setter/style-setter/components/css-code/index.tsx +++ b/src/setter/style-setter/components/css-code/index.tsx @@ -47,17 +47,6 @@ export default class CssCode extends React.Component { isCanSave:true, }; - // shouldComponentUpdate(nextProps: CodeProps, nextState: any) { - // if ( - // // nextProps.visible != this.props.visible || - // this.state.cssCode == '' && nextState.cssCode != '' - // ) { - // return true; - // } - - // return false; - // } - componentWillReceiveProps(nextProps: CodeProps) { const cssCode = parseToCssCode(nextProps.styleData); this.setState({ @@ -115,7 +104,7 @@ export default class CssCode extends React.Component {
- +
Date: Mon, 21 Nov 2022 10:45:06 +0800 Subject: [PATCH 34/95] fix: the slot setter switch state is lost after refreshing the page --- src/setter/slot-setter/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/setter/slot-setter/index.tsx b/src/setter/slot-setter/index.tsx index e38ff57..ecfe5a5 100644 --- a/src/setter/slot-setter/index.tsx +++ b/src/setter/slot-setter/index.tsx @@ -116,6 +116,7 @@ export default class SlotSetter extends Component<{ switchComponent = ( this.onChangeSwitch(checked)} size="small" From 9591bfd4517f2c7df9cc52b6b1b6a135e205816a Mon Sep 17 00:00:00 2001 From: hzd822 Date: Fri, 2 Dec 2022 09:52:44 +0800 Subject: [PATCH 35/95] =?UTF-8?q?fix:=20css=E4=BB=A3=E7=A0=81=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF=E7=A7=BB=E9=99=A4hover?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/style-setter/components/css-code/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/setter/style-setter/components/css-code/index.tsx b/src/setter/style-setter/components/css-code/index.tsx index 98b8996..287003a 100644 --- a/src/setter/style-setter/components/css-code/index.tsx +++ b/src/setter/style-setter/components/css-code/index.tsx @@ -32,7 +32,10 @@ const defaultEditorOption = { glyphMargin: false, folding: false, lineDecorationsWidth: 0, - lineNumbersMinChars: 0 + lineNumbersMinChars: 0, + hover:{ + enabled:false + }, }, scrollbar: { vertical: 'auto', From ff997aed61672d1961588867b0b50bdd7e81a39e Mon Sep 17 00:00:00 2001 From: hzd822 Date: Thu, 8 Dec 2022 11:32:35 +0800 Subject: [PATCH 36/95] feat: treenode --- package.json | 4 +- .../plugin-variable-bind-dialog/index.less | 9 ++ .../plugin-variable-bind-dialog/index.tsx | 118 ++++++++++++++++-- 3 files changed, 119 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 2f1a92c..97b0c4e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-engine-ext", - "version": "1.0.5-beta.10", + "version": "1.0.6-beta.4", "description": "", "files": [ "dist", @@ -70,5 +70,5 @@ "registry": "https://registry.npmjs.org/" }, "license": "MIT", - "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.5-beta.9/build/index.html" + "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.6-beta.4/build/index.html" } diff --git a/src/plugin/plugin-variable-bind-dialog/index.less b/src/plugin/plugin-variable-bind-dialog/index.less index cbecf8a..2bf3040 100644 --- a/src/plugin/plugin-variable-bind-dialog/index.less +++ b/src/plugin/plugin-variable-bind-dialog/index.less @@ -36,6 +36,10 @@ margin: 0; padding: 0; } + .tree-container{ + padding-left: 10px; + } + .vs-variable-selector-ul { li { height: 28px; @@ -182,3 +186,8 @@ width: 12px; } } + +.next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label { + color: #fff; + background-color: #4576f5; +} \ No newline at end of file diff --git a/src/plugin/plugin-variable-bind-dialog/index.tsx b/src/plugin/plugin-variable-bind-dialog/index.tsx index 1e0b1f9..3356c7d 100644 --- a/src/plugin/plugin-variable-bind-dialog/index.tsx +++ b/src/plugin/plugin-variable-bind-dialog/index.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Dialog, Input, Button, Icon } from '@alifd/next'; +import { Dialog, Input, Button, Icon ,Tree} from '@alifd/next'; import { PluginProps } from '@alilc/lowcode-types'; import { event, project } from '@alilc/lowcode-engine'; import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor'; @@ -57,6 +57,7 @@ export default class VariableBindDialog extends Component { selParentVariable: null, // 选中的父级变量 childrenVariableList: [], // 子级变量列表 field: {}, // 编辑器全局变量 + treeList:[], minimize: false, // 是否最小化 }; @@ -102,13 +103,15 @@ export default class VariableBindDialog extends Component { */ getMethods(): any[] { const schema = this.exportSchema(); - const methodsMap = schema.componentsTree[0]?.methods; const methods = []; - for (const key in methodsMap) { if (Object.prototype.hasOwnProperty.call(methodsMap, key) && key) { - methods.push(`${key}()`); + // methods.push(`${key}()`); + methods.push({ + label:`${key}`, + key, + }) } } @@ -124,15 +127,45 @@ export default class VariableBindDialog extends Component { const schema = this.exportSchema(); const stateMap = schema.componentsTree[0]?.state; + const dataSourceMap = {}; const dataSource = []; for (const key in stateMap) { if (Object.prototype.hasOwnProperty.call(stateMap, key) && key) { dataSource.push(`this.state.${key}`); + const valueString = stateMap[key].value; + let value; + try{ + value = eval('('+valueString+')'); + }catch(e){} + + if (value){ + dataSourceMap[key] = value; + } } } + let treeList = []; + this.walkNode(dataSourceMap,-1,treeList); + // this.setState({ + // treeList + // }) + return treeList; + } - return dataSource; + walkNode (dataSourceMap,deepNum,treeList){ + deepNum++; + let index = 0 + for (let key in dataSourceMap){ + let treeData = {}; + treeData.label = key; + treeData.key = deepNum+'_'+index; + if (typeof(dataSourceMap[key])=='object'){ + treeData.children = []; + this.walkNode(dataSourceMap[key],deepNum,treeData.children); + } + index++; + treeList.push(treeData); + } } /** @@ -148,7 +181,11 @@ export default class VariableBindDialog extends Component { for (const item of list) { if (item && item.id) { - dataSource.push(`this.state.${item.id}`); + // dataSource.push(`this.state.${item.id}`); + dataSource.push({ + label:`${item.id}`, + key:item.id + }) } } @@ -190,6 +227,7 @@ export default class VariableBindDialog extends Component { const methods = this.getMethods(); const stateVaroableList = this.getVarableList(); const dataSource = this.getDataSource(); + this.setState({ variableListMap: { stateVaroableList: { @@ -318,7 +356,6 @@ export default class VariableBindDialog extends Component { if (!selectedVariable) { return; } - let newChildrenVariableList = []; newChildrenVariableList = selectedVariable.childrens.filter((item) => item.indexOf(val) > -1); this.setState({ @@ -341,6 +378,25 @@ export default class VariableBindDialog extends Component { }); }; + onSelectTreeNode = (selectedKeys,extra) => { + debugger + const {selParentVariable} = this.state; + const isLeaf = extra.selectedNodes[0]?.props?.isLeaf; + if (isLeaf){ + const label = extra.selectedNodes[0]?.props?.label; + let selectLabel; + if (selParentVariable == 'stateVaroableList'){ + selectLabel = `this.state.${label}` + }else if (selParentVariable == 'methods'){ + selectLabel = `${label}()`; + }else if (selParentVariable == 'dataSource'){ + selectLabel = `this.state.${label}` + } + this.onSelectItem(selectLabel); + } + } + + renderTitle = () => { return (
@@ -365,6 +421,42 @@ export default class VariableBindDialog extends Component { searchValue, minimize, } = this.state; + + const data = [ + { + label: 'Component', + key: '1', + children: [ + { + label: 'Form', + key: '2', + selectable: false, + children: [ + { + label: 'Input', + key: '4', + }, + { + label: 'Select', + key: '5', + disabled: true, + }, + ], + }, + { + label: 'Display', + key: '3', + children: [ + { + label: 'Table', + key: '6', + }, + ], + }, + ], + }, + ]; + return (
{minimize ? ( @@ -411,6 +503,9 @@ export default class VariableBindDialog extends Component { ); })} + + +
@@ -423,13 +518,16 @@ export default class VariableBindDialog extends Component { onChange={this.onVariableSearchChange} />
-
    - {childrenVariableList && + {/*
      */} +
        + {/* {childrenVariableList && childrenVariableList.map((item) => (
      • this.onSelectItem(item)} key={item}> {item}
        • - ))} + ))} */} + +
From f7a0ecd7ad4ccfd31f68302ca5dcf404a0b42f0f Mon Sep 17 00:00:00 2001 From: hzd822 Date: Thu, 8 Dec 2022 11:37:51 +0800 Subject: [PATCH 37/95] =?UTF-8?q?fix:=20path.at=20=E5=85=BC=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/mixed-setter/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index 9fa0b37..b18eb9d 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -35,7 +35,7 @@ const dash = '_'; function getMixedSelect(field) { const path = field.path || []; if(path.length) { - const key = `_unsafe_MixedSetter${dash}${path.at(-1)}${dash}select` + const key = `_unsafe_MixedSetter${dash}${path[path.length-1]}${dash}select` const newPath = [...path]; newPath.splice(path.length - 1, 1, key); const newKey = field.node.getPropValue(newPath.join('.')) @@ -54,7 +54,7 @@ function getMixedSelect(field) { function setMixedSelect(field, usedSetter) { const path = field.path || []; if(path.length) { - const key = `_unsafe_MixedSetter${dash}${path.at(-1)}${dash}select` + const key = `_unsafe_MixedSetter${dash}${path[path.length-1]}${dash}select` path.splice(path.length - 1, 1, key); field.node.setPropValue(path.join('.'), usedSetter) } From fc5992ac7b8912da86748f211987b4eb0353d108 Mon Sep 17 00:00:00 2001 From: hzd822 Date: Sat, 10 Dec 2022 20:42:26 +0800 Subject: [PATCH 38/95] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=91?= =?UTF-8?q?=E5=AE=9A=E5=8F=98=E9=87=8F=E6=94=AF=E6=8C=81=E6=A0=91=E5=BD=A2?= =?UTF-8?q?=E7=BB=93=E6=9E=84=E5=B1=95=E5=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- .../plugin-variable-bind-dialog/index.less | 3 +- .../plugin-variable-bind-dialog/index.tsx | 168 ++++++++++++------ 3 files changed, 115 insertions(+), 60 deletions(-) diff --git a/package.json b/package.json index 97b0c4e..8ef610b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-engine-ext", - "version": "1.0.6-beta.4", + "version": "1.0.6-beta.8", "description": "", "files": [ "dist", @@ -70,5 +70,5 @@ "registry": "https://registry.npmjs.org/" }, "license": "MIT", - "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.6-beta.4/build/index.html" + "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.6-beta.7/build/index.html" } diff --git a/src/plugin/plugin-variable-bind-dialog/index.less b/src/plugin/plugin-variable-bind-dialog/index.less index 2bf3040..5aa73a0 100644 --- a/src/plugin/plugin-variable-bind-dialog/index.less +++ b/src/plugin/plugin-variable-bind-dialog/index.less @@ -63,7 +63,8 @@ overflow: auto; } .vs-variable-selector-items-container { - width: 157px; + width: 197px; + overflow-y: auto; .ve-search-control { height: 28px; margin: 10px; diff --git a/src/plugin/plugin-variable-bind-dialog/index.tsx b/src/plugin/plugin-variable-bind-dialog/index.tsx index 3356c7d..29a1328 100644 --- a/src/plugin/plugin-variable-bind-dialog/index.tsx +++ b/src/plugin/plugin-variable-bind-dialog/index.tsx @@ -59,12 +59,16 @@ export default class VariableBindDialog extends Component { field: {}, // 编辑器全局变量 treeList:[], minimize: false, // 是否最小化 + autoExpandParent: true, + expandedKeys:[], }; private editorJsRef = React.createRef(); private monocoEditor: any; + private matchedKeys:null; + componentDidMount() { event.on('common:variableBindDialog.openDialog', ({ field }) => { this.setState({ field }, () => { @@ -152,14 +156,42 @@ export default class VariableBindDialog extends Component { return treeList; } + /** + * 通过子节点id查找节点path + * @param tree + * @param func + * @param field + * @param path + * @returns + */ + treeFindPath(tree, func, field = "", path = []) { + if (!tree) return [] + for (const data of tree) { + field === "" ? path.push(data) : path.push(data[field]); + if (func(data)) return path + if (data.children) { + const findChildren = this.treeFindPath(data.children, func, field, path) + if (findChildren.length) return findChildren + } + path.pop() + } + return [] + } + + /** + * 循环遍历节点 + * @param dataSourceMap + * @param deepNum + * @param treeList + */ walkNode (dataSourceMap,deepNum,treeList){ deepNum++; let index = 0 for (let key in dataSourceMap){ let treeData = {}; treeData.label = key; - treeData.key = deepNum+'_'+index; - if (typeof(dataSourceMap[key])=='object'){ + //treeData.key = deepNum+'_'+index; + if (typeof(dataSourceMap[key])=='object' && !(dataSourceMap[key] instanceof Array)){ treeData.children = []; this.walkNode(dataSourceMap[key],deepNum,treeData.children); } @@ -346,9 +378,17 @@ export default class VariableBindDialog extends Component { ); }; - onVariableSearchChange = (val) => { + handleExpand = (keys) =>{ + this.setState({ + expandedKeys: keys, + autoExpandParent: false + }); + } + + + onVariableSearchChange = (value) => { this.setState({ - searchValue: val, + searchValue: value, }); const { variableListMap, selParentVariable } = this.state; @@ -356,18 +396,51 @@ export default class VariableBindDialog extends Component { if (!selectedVariable) { return; } - let newChildrenVariableList = []; - newChildrenVariableList = selectedVariable.childrens.filter((item) => item.indexOf(val) > -1); + value = value.trim(); + if (!value) { + this.matchedKeys = null; + return; + } + + const matchedKeys = []; + const loop = data => + data.forEach(item => { + if (item.label.indexOf(value) > -1) { + matchedKeys.push(item.key); + } + if (item.children && item.children.length) { + loop(item.children); + } + }); + loop(selectedVariable.childrens); this.setState({ - childrenVariableList: newChildrenVariableList, + expandedKeys: [...matchedKeys], + autoExpandParent: true }); + this.matchedKeys = matchedKeys; + }; onVariableItemClick = (key: string) => { const { variableListMap } = this.state; + + const childrenVariableList = variableListMap[key].childrens; + // const matchedKeys = []; + // const loop = data => + // data.forEach(item => { + // if (item.label.indexOf(value) > -1) { + // matchedKeys.push(item.key); + // } + // if (item.children && item.children.length) { + // loop(item.children); + // } + // }); + // loop(childrenVariableList); + this.setState({ selParentVariable: key, - childrenVariableList: variableListMap[key].childrens, + childrenVariableList, + // matchedKeys }); }; @@ -379,21 +452,21 @@ export default class VariableBindDialog extends Component { }; onSelectTreeNode = (selectedKeys,extra) => { - debugger - const {selParentVariable} = this.state; - const isLeaf = extra.selectedNodes[0]?.props?.isLeaf; - if (isLeaf){ - const label = extra.selectedNodes[0]?.props?.label; - let selectLabel; - if (selParentVariable == 'stateVaroableList'){ - selectLabel = `this.state.${label}` - }else if (selParentVariable == 'methods'){ - selectLabel = `${label}()`; - }else if (selParentVariable == 'dataSource'){ - selectLabel = `this.state.${label}` - } - this.onSelectItem(selectLabel); + const {selParentVariable,childrenVariableList} = this.state; + + const label = extra.selectedNodes[0]?.props?.label; + const key = extra.selectedNodes[0]?.key; + let selectLabel; + if (selParentVariable == 'stateVaroableList'){ + const pathList = this.treeFindPath(childrenVariableList,data=>(data.key==key),'label'); + selectLabel = `this.state.${pathList.join('.')}` + }else if (selParentVariable == 'methods'){ + selectLabel = `${label}()`; + }else if (selParentVariable == 'dataSource'){ + selectLabel = `this.state.${label}` } + this.onSelectItem(selectLabel); + } @@ -420,42 +493,15 @@ export default class VariableBindDialog extends Component { jsCode, searchValue, minimize, + expandedKeys, + autoExpandParent } = this.state; - const data = [ - { - label: 'Component', - key: '1', - children: [ - { - label: 'Form', - key: '2', - selectable: false, - children: [ - { - label: 'Input', - key: '4', - }, - { - label: 'Select', - key: '5', - disabled: true, - }, - ], - }, - { - label: 'Display', - key: '3', - children: [ - { - label: 'Table', - key: '6', - }, - ], - }, - ], - }, - ]; + const filterTreeNode = node => { + return ( + this.matchedKeys && this.matchedKeys.indexOf(node.props.eventKey) > -1 + ); + }; return (
@@ -527,7 +573,15 @@ export default class VariableBindDialog extends Component { ))} */} - +
From 883ac6e3da6200c1d69e449cca93cda6363c61c5 Mon Sep 17 00:00:00 2001 From: slb Date: Tue, 13 Dec 2022 18:41:47 +0800 Subject: [PATCH 39/95] =?UTF-8?q?feat:=20=E5=A4=B1=E7=84=A6=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E5=8F=8A=E9=AB=98=E5=BA=A6=E8=87=AA=E9=80=82=E5=BA=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/css-code/index.tsx | 92 ++++++++++++------- 1 file changed, 60 insertions(+), 32 deletions(-) diff --git a/src/setter/style-setter/components/css-code/index.tsx b/src/setter/style-setter/components/css-code/index.tsx index 287003a..484b146 100644 --- a/src/setter/style-setter/components/css-code/index.tsx +++ b/src/setter/style-setter/components/css-code/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Button} from '@alifd/next'; +import { Button } from '@alifd/next'; import { StyleData } from '../../utils/types'; import { parseToCssCode, parseToStyleData } from '../../utils'; import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor'; @@ -9,14 +9,13 @@ interface CodeProps { onStyleDataChange: (val: any) => void; } - const defaultEditorOption = { readOnly: false, //automaticLayout: true, folding: true, // 默认开启折叠代码功能 wordWrap: 'off', formatOnPaste: true, - //height:'100%', + height: '100px', fontSize: 12, tabSize: 2, scrollBeyondLastLine: false, @@ -25,29 +24,28 @@ const defaultEditorOption = { minimap: { enabled: false, }, - options : { + options: { lineNumbers: 'off', - fixedOverflowWidgets:true, - automaticLayout:true, + fixedOverflowWidgets: true, + automaticLayout: true, glyphMargin: false, folding: false, lineDecorationsWidth: 0, lineNumbersMinChars: 0, - hover:{ - enabled:false + hover: { + enabled: false, }, }, scrollbar: { - vertical: 'auto', horizontal: 'auto', - } + }, }; export default class CssCode extends React.Component { state = { defaultEditorProps: {}, cssCode: '', - isCanSave:true, + isCanSave: true, }; componentWillReceiveProps(nextProps: CodeProps) { @@ -79,44 +77,74 @@ export default class CssCode extends React.Component { const { onStyleDataChange } = this.props; const newStyleData = parseToStyleData(cssCode); // 检查是否和原来的styleData完全相同 - if (newStyleData){ + if (newStyleData) { onStyleDataChange(newStyleData); this.setState({ - isCanSave:true - }) + isCanSave: true, + }); } - } - + }; updateCode = (newCode: string) => { this.setState({ cssCode: newCode, }); const newStyleData = parseToStyleData(newCode); - if (newStyleData){ + if (newStyleData) { this.setState({ - isCanSave:false - }) + isCanSave: false, + }); } - }; - + public prevHeight = 100; render() { const { cssCode, defaultEditorProps, isCanSave } = this.state; + // 高度缓存 + const handleEditorMount = (monaco: any, editor: any) => { + editor.onDidBlurEditorWidget(() => { + this.styleSave(); + }); + editor.onDidChangeModelDecorations(() => { + updateEditorHeight(); + // 控制刷新频率 + requestAnimationFrame(updateEditorHeight); + }); + const updateEditorHeight = () => { + const padding = 20; + const lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight); + const lineCount = editor.getModel()?.getLineCount() || 1; + const height = lineCount * lineHeight + padding; + if (this.prevHeight !== height) { + this.prevHeight = height; + defaultEditorOption.height = `${height}px`; + editor.layout(); + } + }; + }; return ( -
-
+
+
- -
- this.updateCode(newCode)} - /> +
+ this.updateCode(newCode)} + editorDidMount={handleEditorMount} + /> +
); } } From 793710833ea7a0396049555be9007cfc34952ab9 Mon Sep 17 00:00:00 2001 From: slb Date: Tue, 13 Dec 2022 18:50:53 +0800 Subject: [PATCH 40/95] =?UTF-8?q?style:=20=E5=8F=98=E9=87=8F=E5=AE=9A?= =?UTF-8?q?=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/style-setter/components/css-code/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/setter/style-setter/components/css-code/index.tsx b/src/setter/style-setter/components/css-code/index.tsx index 484b146..430c988 100644 --- a/src/setter/style-setter/components/css-code/index.tsx +++ b/src/setter/style-setter/components/css-code/index.tsx @@ -11,7 +11,7 @@ interface CodeProps { const defaultEditorOption = { readOnly: false, - //automaticLayout: true, + // automaticLayout: true, folding: true, // 默认开启折叠代码功能 wordWrap: 'off', formatOnPaste: true, @@ -96,7 +96,7 @@ export default class CssCode extends React.Component { }); } }; - public prevHeight = 100; + prevHeight = 100; render() { const { cssCode, defaultEditorProps, isCanSave } = this.state; // 高度缓存 From 5180b370d795c9523db56e4b02b4d2aa178f5dbb Mon Sep 17 00:00:00 2001 From: wddslb <925083989@qq.com> Date: Tue, 13 Dec 2022 19:59:26 +0800 Subject: [PATCH 41/95] =?UTF-8?q?feat:=20=E9=AB=98=E5=BA=A6=E8=87=AA?= =?UTF-8?q?=E9=80=82=E5=BA=94=E5=92=8C=E5=A4=B1=E7=84=A6=E4=BF=9D=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/style-setter/components/css-code/index.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/setter/style-setter/components/css-code/index.tsx b/src/setter/style-setter/components/css-code/index.tsx index 430c988..0e8eaf8 100644 --- a/src/setter/style-setter/components/css-code/index.tsx +++ b/src/setter/style-setter/components/css-code/index.tsx @@ -15,7 +15,6 @@ const defaultEditorOption = { folding: true, // 默认开启折叠代码功能 wordWrap: 'off', formatOnPaste: true, - height: '100px', fontSize: 12, tabSize: 2, scrollBeyondLastLine: false, @@ -46,6 +45,7 @@ export default class CssCode extends React.Component { defaultEditorProps: {}, cssCode: '', isCanSave: true, + height: '100px', }; componentWillReceiveProps(nextProps: CodeProps) { @@ -96,10 +96,10 @@ export default class CssCode extends React.Component { }); } }; - prevHeight = 100; + prevHeight = 80; render() { - const { cssCode, defaultEditorProps, isCanSave } = this.state; - // 高度缓存 + const { cssCode, defaultEditorProps, isCanSave, height } = this.state; + // 高度缓存 const handleEditorMount = (monaco: any, editor: any) => { editor.onDidBlurEditorWidget(() => { this.styleSave(); @@ -116,7 +116,7 @@ export default class CssCode extends React.Component { const height = lineCount * lineHeight + padding; if (this.prevHeight !== height) { this.prevHeight = height; - defaultEditorOption.height = `${height}px`; + this.setState({height: `${height}px`}) editor.layout(); } }; @@ -143,6 +143,7 @@ export default class CssCode extends React.Component { {...{ language: 'css' }} onChange={(newCode: string) => this.updateCode(newCode)} editorDidMount={handleEditorMount} + height={height} />
); From 378103382a88dd63c64bc45f5af1f9dc25c8778e Mon Sep 17 00:00:00 2001 From: liujuping Date: Wed, 14 Dec 2022 23:06:27 +0800 Subject: [PATCH 42/95] fix: array setter make variable lose --- src/setter/array-setter/index.tsx | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index 5f124ec..d396a1b 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -38,7 +38,7 @@ export class ListSetter extends Component { } init() { - const { value, field } = this.props; + const { value, field, onChange } = this.props; const items: SettingField[] = []; const valueLength = value && Array.isArray(value) ? value.length : 0; @@ -54,7 +54,7 @@ export class ListSetter extends Component { }); items.push(item); } - field.setValue(value); + onChange?.(value); this.state = { items }; } @@ -75,7 +75,7 @@ export class ListSetter extends Component { ); return; } - const { field } = this.props; + const { field, value: fieldValue } = this.props; const { items } = this.state; const { path } = field; if (path[0] !== targetPath[0]) { @@ -84,7 +84,6 @@ export class ListSetter extends Component { ); return; } - const fieldValue = field.getValue(); try { const index = +targetPath[targetPath.length - 2]; if (typeof index === 'number' && !isNaN(index)) { @@ -97,10 +96,9 @@ export class ListSetter extends Component { }; onSort(sortedIds: Array) { - const { field } = this.props; + const { onChange, value: oldValues } = this.props; const { items } = this.state; const values: any[] = []; - const oldValues = field.getValue(); const newItems: SettingField[] = []; sortedIds.map((id, index) => { const item = items[+id]; @@ -109,15 +107,15 @@ export class ListSetter extends Component { newItems[index] = item; return id; }); - field.setValue(values); + onChange?.(values); this.setState({ items: newItems }); } onAdd(newValue?: {[key: string]: any}) { const { items = [] } = this.state; - const { itemSetter, field } = this.props; - const values = field.getValue() || []; - const { initialValue } = itemSetter; + const { itemSetter, field, onChange, value = [] } = this.props; + const values = value || []; + const initialValue = (itemSetter as any)?.initialValue; const defaultValue = newValue ? newValue : (typeof initialValue === 'function' ? initialValue(field) : initialValue); const item = field.createField({ name: items.length, @@ -128,18 +126,17 @@ export class ListSetter extends Component { setValue: this.onItemChange, }, }); - values.push(defaultValue); - items.push(item); + values.push(defaultValue); this.scrollToLast = true; - field?.setValue(values); + onChange?.(values); this.setState({ items }); } onRemove(removed: SettingField) { - const { field } = this.props; + const { onChange, value } = this.props; const { items } = this.state; - const values = field.getValue() || []; + const values = value || []; let i = items.indexOf(removed); items.splice(i, 1); values.splice(i, 1); @@ -150,7 +147,7 @@ export class ListSetter extends Component { } removed.remove(); const pureValues = values.map((item: any) => typeof(item) === 'object' ? Object.assign({}, item):item); - field?.setValue(pureValues); + onChange?.(pureValues); this.setState({ items }); } From 65ace4c6bd83ab114ca243585c33de870dafc714 Mon Sep 17 00:00:00 2001 From: JackLian Date: Wed, 21 Dec 2022 10:07:01 +0800 Subject: [PATCH 43/95] chore: add new cdn support --- README.md | 27 +++++++++++++++++++++---- package.json | 8 +++++--- scripts/sync-oss.js | 48 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 76 insertions(+), 7 deletions(-) create mode 100644 scripts/sync-oss.js diff --git a/README.md b/README.md index f4eb1a3..dfe49f8 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,25 @@ -#### @alilc/lowcode-engine-ext +### @alilc/lowcode-engine-ext -#### 简介 -lowcode-engine-ext 是阿里低代码引擎官方提供的setter和setter必须依赖的插件集合 +### 简介 +lowcode-engine-ext 是阿里低代码引擎官方提供的 setter 和 setter 必须依赖的插件集合 -setter(设置器)是用来展示每个物料的属性，[setter使用说明手册](https://www.yuque.com/lce/doc/cl03wo_nmhznb) [官方setter列表说明](https://www.yuque.com/lce/doc/oc220p#fl46) \ No newline at end of file +setter(设置器) 是用来展示每个物料的属性，[setter使用说明手册](https://www.yuque.com/lce/doc/cl03wo_nmhznb) [官方setter列表说明](https://www.yuque.com/lce/doc/oc220p#fl46) + +### 使用方式 + +使用 CDN 方式引用，下方是官方提供的两个稳定 CDN + +#### 方式 1：alifd cdn + 1: alifd cdn +```html +https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/css/engine-ext.css + +https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/js/engine-ext.js +``` + +#### 方式 2: uipaas cdn +```html +https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css + +https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js +``` \ No newline at end of file diff --git a/package.json b/package.json index 8ef610b..024edde 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "stylelint": "stylelint \"**/*.{css,scss,less}\"", "lint": "npm run eslint && npm run stylelint", "f2elint-scan": "f2elint scan -q", - "f2elint-fix": "f2elint fix" + "f2elint-fix": "f2elint fix", + "syncOss": "node ./scripts/sync-oss.js" }, "keywords": [ "ice", @@ -70,5 +71,6 @@ "registry": "https://registry.npmjs.org/" }, "license": "MIT", - "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.6-beta.7/build/index.html" -} + "homepage": "https://unpkg.com/@alilc/lowcode-engine-ext@1.0.6-beta.7/build/index.html", + "repository": "git@github.com:alibaba/lowcode-engine-ext.git" +} \ No newline at end of file diff --git a/scripts/sync-oss.js b/scripts/sync-oss.js new file mode 100644 index 0000000..407f113 --- /dev/null +++ b/scripts/sync-oss.js @@ -0,0 +1,48 @@ +#!/usr/bin/env node +const http = require('http'); +const package = require('../package.json'); +const { version, name } = package; +const options = { + method: 'PUT', + // 暂时使用 日常环境的 uipaas-node，上线后可切换成线上环境 https://uipaas-node.alibaba-inc.com + hostname: 'uipaas-node.alibaba.net', + path: '/staticAssets/cdn/packages', + headers: { + 'Content-Type': 'application/json', + Cookie: 'locale=en-us', + }, + maxRedirects: 20, +}; + +const onResponse = function (res) { + const chunks = []; + res.on('data', (chunk) => { + chunks.push(chunk); + }); + + res.on('end', (chunk) => { + const body = Buffer.concat(chunks); + console.table(JSON.stringify(JSON.parse(body.toString()), null, 2)); + }); + + res.on('error', (error) => { + console.error(error); + }); +}; + +const req = http.request(options, onResponse); + +const postData = JSON.stringify({ + packages: [ + { + packageName: name, + version, + }, + ], + // 可以发布指定源的 npm 包，默认公网 npm + useTnpm: false, +}); + +req.write(postData); + +req.end(); \ No newline at end of file From cd22008b8109d57dd669e08550873481d8040a89 Mon Sep 17 00:00:00 2001 From: wddslb <925083989@qq.com> Date: Wed, 28 Dec 2022 15:06:59 +0800 Subject: [PATCH 44/95] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dneedle=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E9=AB=98=E5=BA=A6=E9=BB=98=E8=AE=A4=E4=B8=8D=E8=87=AA?= =?UTF-8?q?=E9=80=82=E5=BA=94=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/style-setter/components/css-code/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/setter/style-setter/components/css-code/index.tsx b/src/setter/style-setter/components/css-code/index.tsx index 0e8eaf8..c66d764 100644 --- a/src/setter/style-setter/components/css-code/index.tsx +++ b/src/setter/style-setter/components/css-code/index.tsx @@ -96,10 +96,10 @@ export default class CssCode extends React.Component { }); } }; + // 高度缓存 prevHeight = 80; render() { const { cssCode, defaultEditorProps, isCanSave, height } = this.state; - // 高度缓存 const handleEditorMount = (monaco: any, editor: any) => { editor.onDidBlurEditorWidget(() => { this.styleSave(); @@ -120,6 +120,8 @@ export default class CssCode extends React.Component { editor.layout(); } }; + // 挂载时先适配高度 + updateEditorHeight() }; return (
From 1d26288573f33078c64a1d801ba696f248b10620 Mon Sep 17 00:00:00 2001 From: wddslb <925083989@qq.com> Date: Tue, 31 Jan 2023 19:58:49 +0800 Subject: [PATCH 45/95] =?UTF-8?q?feat:=20=E8=83=8C=E6=99=AFsetter=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/custom-icon.tsx | 2 +- .../style-setter/components/number/index.tsx | 38 ++- .../style-setter/components/row/index.less | 2 +- src/setter/style-setter/index.tsx | 6 +- .../style-setter/pro/background/config.json | 59 ++++ .../style-setter/pro/background/constant.tsx | 5 + .../style-setter/pro/background/index.less | 55 +++ .../style-setter/pro/background/index.tsx | 313 +++++++++++++++--- src/setter/style-setter/utils/index.tsx | 28 ++ 9 files changed, 449 insertions(+), 59 deletions(-) create mode 100644 src/setter/style-setter/pro/background/constant.tsx create mode 100644 src/setter/style-setter/pro/background/index.less diff --git a/src/components/custom-icon.tsx b/src/components/custom-icon.tsx index e75efbf..0664bf8 100644 --- a/src/components/custom-icon.tsx +++ b/src/components/custom-icon.tsx @@ -2,7 +2,7 @@ import { Icon } from '@alifd/next'; import * as React from 'react'; import { useEffect } from 'react'; -const ICON_URL = '//at.alicdn.com/t/font_2761185_gdpwg9vnz7.js'; +const ICON_URL = '//at.alicdn.com/t/a/font_2761185_fefq6opmyv4.js'; let CustomIcon: any; diff --git a/src/setter/style-setter/components/number/index.tsx b/src/setter/style-setter/components/number/index.tsx index 5e1bd8c..083e07b 100644 --- a/src/setter/style-setter/components/number/index.tsx +++ b/src/setter/style-setter/components/number/index.tsx @@ -2,7 +2,13 @@ import * as React from 'react'; import { useEffect, useState } from 'react'; import { NumberPicker } from '@alifd/next'; import { StyleData, onStyleChange } from '../../utils/types'; -import { addUnit, removeUnit, isEmptyValue, getPlaceholderPropertyValue } from '../../utils'; +import { + addUnit, + removeUnit, + isEmptyValue, + getPlaceholderPropertyValue, + unifyStyle, +} from '../../utils'; interface numberProps { styleKey: string; styleData: StyleData | any; @@ -14,8 +20,10 @@ interface numberProps { className?: string; field?: any; placeholderScale?: number; + defaultPlaceholder?: string; useComputedStyle?: boolean; - onChangeFunction?:any; + onChangeFunction?: any; + multiProp?: any; //属性值包含多项是的项序号 } export default (props: numberProps) => { @@ -30,12 +38,13 @@ export default (props: numberProps) => { className = '', placeholderScale, onChangeFunction, + multiProp, + defaultPlaceholder, } = props; - console.log('props',props); - + console.log('props', props); - const [placeholder, setPlaceholder] = useState(null); + const [placeholder, setPlaceholder] = useState(defaultPlaceholder); const onNumberChange = (styleKey: string, value: number, unit?: string) => { onStyleChange([ @@ -62,15 +71,28 @@ export default (props: numberProps) => { useEffect(() => { initData(props); }, []); - + let value = unit ? removeUnit(styleData[styleKey]) : styleData[styleKey]; + // 不加multiprop一样，加了单独处理 + if (typeof multiProp === 'number') { + value = unifyStyle(styleData[styleKey])?.split(' ')?.[multiProp]; + if (value === null || value === undefined || value === 'auto') { + value = null; + } else { + value = unit ? removeUnit(value) : value; + } + } return ( onChangeFunction ? onChangeFunction(styleKey, val, unit):onNumberChange(styleKey, val, unit)} + onChange={(val) => + onChangeFunction + ? onChangeFunction(styleKey, val, unit) + : onNumberChange(styleKey, val, unit) + } innerAfter={unit ? unit : ''} placeholder={placeholder} > diff --git a/src/setter/style-setter/components/row/index.less b/src/setter/style-setter/components/row/index.less index 51a185c..66edbcd 100644 --- a/src/setter/style-setter/components/row/index.less +++ b/src/setter/style-setter/components/row/index.less @@ -5,7 +5,7 @@ margin-bottom: 10px; .title-contaienr { - width: 46px; + width: 50px; flex-direction: row; } diff --git a/src/setter/style-setter/index.tsx b/src/setter/style-setter/index.tsx index 0f1d423..651514d 100644 --- a/src/setter/style-setter/index.tsx +++ b/src/setter/style-setter/index.tsx @@ -125,11 +125,7 @@ export default class StyleSetterV2 extends React.PureComponent
*/} - - +
)} diff --git a/src/setter/style-setter/pro/background/config.json b/src/setter/style-setter/pro/background/config.json index 1c7c4b4..60578fd 100644 --- a/src/setter/style-setter/pro/background/config.json +++ b/src/setter/style-setter/pro/background/config.json @@ -13,5 +13,64 @@ "icon": "icon-beijingtupian" } ] + }, + "backgroundSize": { + "title": "尺寸", + "dataList": [ + { + "value": "default", + "tips": "默认", + "title": "默认" + }, + { + "value": "contain", + "tips": "等比填充contain", + "title": "等比填充" + }, + { + "value": "cover", + "tips": "等比覆盖cover", + "title": "等比覆盖" + } + ] + }, + "backgroundPosition": { + "title": "定位", + "dataList": [ + { "title": "leftTop", "position": "0 0", "icon": "icon-zuoshangjiao" }, + { "title": "midTop", "position": "50% 0", "icon": "icon-dingbu" }, + { "title": "rightTop", "position": "100% 0", "icon": "icon-youshangjiao" }, + { "title": "leftMid", "position": "0 50%", "icon": "icon-kaozuo" }, + { "title": "mid", "position": "50% 50%", "icon": "icon--quanbubiankuang" }, + { "title": "rightMid", "position": "100% 50%", "icon": "icon-kaoyou" }, + { "title": "leftBottom", "position": "0 100%", "icon": "icon-zuoxiajiao" }, + { "title": "midBottom", "position": "50% 100%", "icon": "icon-dibu" }, + { "title": "rightBottom", "position": "100% 100%", "icon": "icon-youxiajiao" } + ] + }, + "backgroundRepeat": { + "title": "重复显示", + "dataList": [ + { + "value": "repeat", + "tips": "垂直方向和水平方向重复 repeat", + "icon": "icon-jiugongge" + }, + { + "value": "repeat-x", + "tips": "水平方向重复 reapeat-x", + "icon": "icon-hengxiangpingfen" + }, + { + "value": "repeat-y", + "tips": "垂直方向重复 repeat-y", + "icon": "icon-zongxiangpingfen" + }, + { + "value": "no-repeat", + "tips": "不重复 no-repeat", + "icon": "icon-shanchu2" + } + ] } } diff --git a/src/setter/style-setter/pro/background/constant.tsx b/src/setter/style-setter/pro/background/constant.tsx new file mode 100644 index 0000000..e46d921 --- /dev/null +++ b/src/setter/style-setter/pro/background/constant.tsx @@ -0,0 +1,5 @@ +export const backgroundSizeMap = { + "contain": "contain", + "cover": "cover", + "default": "default" +} \ No newline at end of file diff --git a/src/setter/style-setter/pro/background/index.less b/src/setter/style-setter/pro/background/index.less new file mode 100644 index 0000000..a2a6b50 --- /dev/null +++ b/src/setter/style-setter/pro/background/index.less @@ -0,0 +1,55 @@ +.inner-row-contaienr-bgsize { + display: flex; + flex-direction: row; + margin-top: 10px; + margin-bottom: 10px; + margin-left: 46px; + .row-item { + display: flex; + flex-direction: row; + align-items: center; + } + + .row-item-title { + margin-right: 4px; + } +} +.background-position-container { + display: flex; + align-items: center; + justify-content: space-between; + .background-position-container-left { + display: flex; + flex-direction: row; + align-items: center; + flex: 0 0 auto; + justify-content: space-between; + flex-wrap: wrap; + width: 60px; + height: 64px; + margin-right: 30px; + .sel-icon { + ::before { + margin-top: 2px; + background-color: #2077ff; + position: absolute; + opacity: 0.3; + width: 16px; + height: 16px; + content: ''; + } + } + .background-position-icon { + width: 16px; + height: 16px; + } + } + .background-position-container-right { + .background-position-left { + margin-top: 3px; + } + .background-position-top { + margin-top: 4px; + } + } +} diff --git a/src/setter/style-setter/pro/background/index.tsx b/src/setter/style-setter/pro/background/index.tsx index e5e795d..b90834b 100644 --- a/src/setter/style-setter/pro/background/index.tsx +++ b/src/setter/style-setter/pro/background/index.tsx @@ -1,14 +1,16 @@ -import * as React from 'react'; -import { useState, useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; import Row from '../../components/row'; import Icon from '../../components/icon'; +import Number from '../../components/number'; import ColorInput from '../../components/color-input'; import { StyleData, onStyleChange } from '../../utils/types'; -import { Collapse, Input } from '@alifd/next'; -import borderConfig from './config.json'; -// import "./index.scss"; -const Panel = Collapse.Panel; +import { Collapse, Input, NumberPicker, Range } from '@alifd/next'; +import backgroundConfig from './config.json'; +import { addUnit, isEmptyValue, parseValue, unifyStyle } from '../../utils'; +import './index.less'; +import { backgroundSizeMap } from './constant'; +const Panel = Collapse.Panel; interface fontProps { styleData: StyleData | any; onStyleChange?: onStyleChange; @@ -16,15 +18,166 @@ interface fontProps { } export default (props: fontProps) => { const { onStyleChange, styleData } = props; - const { backgroundType } = borderConfig; + const { backgroundType, backgroundSize, backgroundPosition, backgroundRepeat } = backgroundConfig; const [bgType, setBgType] = useState(null); - + const [bgSizeType, setBgSizeType] = useState(null); + const [bgRepeatType, setBgRepeatType] = useState(null); + const [bgPositionType, setBgPositionType] = useState(''); + // 背景类型切换 const onBgTypeChange = (styleDataList: Array) => { if (styleDataList) { setBgType(styleDataList[0].value); } }; + // 背景图片切换 + const onBgImageChange = (value: string) => { + onStyleChange([ + { + styleKey: 'backgroundImage', + value: formatBgImgUrl(value), + }, + ]); + }; + // backgroundSize类型切换 + const onBgSizeTypeChange = (styleDataList: Array) => { + const backgroundSize = 'backgroundSize'; + onStyleChange([ + { + styleKey: backgroundSize, + value: null, + }, + ]); + if (styleDataList) { + const value = styleDataList[0]?.value; + setBgSizeType(value); + if (value != backgroundSizeMap.default) { + onStyleChange([ + { + styleKey: backgroundSize, + value, + }, + ]); + } + } + }; + // backgroundSize值切换 + const onBgSizeChange = ( + styleKey: string, + value: number, + unit: string, + styleData: any, + direction: string, + ) => { + const bgSizeArray = styleData[styleKey] + ? unifyStyle(styleData[styleKey])?.split(' ') + : ['auto', 'auto']; + const [width = 'auto', height = 'auto'] = bgSizeArray; + let styleDataList; + if (styleData) { + let unifiedValue = unit ? addUnit(value, unit) : value; + if (unifiedValue === null || unifiedValue === undefined) unifiedValue = 'auto'; //空样式默认为auto + if (direction === 'width') { + styleDataList = [ + { + styleKey, + value: + unifiedValue !== 'auto' || height !== 'auto' ? unifiedValue + ' ' + height : null, // 都为auto则删除样式 + }, + ]; + } else { + styleDataList = [ + { + styleKey, + value: unifiedValue !== 'auto' || width !== 'auto' ? width + ' ' + unifiedValue : null, + }, + ]; + } + onStyleChange(styleDataList); + } + }; + // backgroundRepeat切换 + const onBgRepeatChange = (styleDataList: Array) => { + if (styleDataList) { + const value = styleDataList[0]?.value; + setBgRepeatType(value); + onStyleChange([ + { + styleKey: 'backgroundRepeat', + value, + }, + ]); + } + }; + + // backgroundPosition切换 + const onBgPositionChange = (value, direction) => { + const unit = 'px'; + const styleKey = 'backgroundPosition'; + const bgSizeArray = styleData[styleKey] + ? unifyStyle(styleData[styleKey]).split(' ') + : ['auto', 'auto']; + const [width = 'auto', height = 'auto'] = bgSizeArray; + let styleDataList; + if (styleData) { + let unifiedValue = /^-?[1-9]\d*$/.test(value) ? value + unit : value; //正则匹配非0数字并加单位 + if ( + unifiedValue === null || + unifiedValue === undefined || + unifiedValue.replace(/\s*/g, '') === '' //空格和空字符串也为空值 + ) + unifiedValue = 'auto'; + if (direction === 'horizontal') { + styleDataList = [ + { + styleKey, + value: + unifiedValue !== 'auto' || height !== 'auto' ? unifiedValue + ' ' + height : null, + }, + ]; + } else { + styleDataList = [ + { + styleKey, + value: unifiedValue !== 'auto' || width !== 'auto' ? width + ' ' + unifiedValue : null, + }, + ]; + } + onStyleChange(styleDataList); + } + }; + // 透明度切换 + const onOpacityChange = (styleKey: string, value: number, unit?: string) => { + onStyleChange([ + { + styleKey, + value: unit ? addUnit(value, unit) : value, + }, + ]); + }; + const initData = () => { + if (styleData.backgroundColor) { + setBgType('color'); + } else if (styleData.backgroundImage) { + setBgType('bgImg'); + } else { + setBgType(null); + } + setBgRepeatType(styleData.backgroundRepeat); + const bgSizeType = + styleData.backgroundSize === backgroundSizeMap.contain || + styleData.backgroundSize === backgroundSizeMap.cover + ? styleData.backgroundSize + : backgroundSizeMap.default; + setBgSizeType(bgSizeType); + const chosenItem = backgroundPosition.dataList.find((item) => { + return item.position === styleData.backgroundPosition; + }); + setBgPositionType(chosenItem?.title); + }; + useEffect(() => { + initData(); + }, [styleData]); const formatBgImgUrl = (url: string) => { if (url && url != '') { return 'url(' + url + ')'; @@ -48,28 +201,6 @@ export default (props: fontProps) => { return ''; } }; - - const initData = () => { - if (styleData.backgroundColor) { - setBgType('backgroundColor'); - } else if (styleData.backgroundImage) { - setBgType('backgroundImage'); - } - }; - - useEffect(() => { - initData(); - }, []); - - const onInputChange = (value: string) => { - onStyleChange([ - { - styleKey: 'backgroundImage', - value: formatBgImgUrl(value), - }, - ]); - }; - return ( @@ -95,34 +226,128 @@ export default (props: fontProps) => { placeholder="输入图片url" style={{ width: '100%' }} value={backToBgImgUrl(styleData['backgroundImage'])} - onChange={onInputChange} + onChange={onBgImageChange} /> )} + {bgType == 'bgImg' && ( + <> + + {bgSizeType == backgroundSizeMap.default && ( +
+
+ 宽 + + onBgSizeChange(styleKey, val, unit, styleData, 'width') + } + multiProp={0} + defaultPlaceholder={'auto'} + /> +
+
+ 高 + + onBgSizeChange(styleKey, val, unit, styleData, 'height') + } + multiProp={1} + defaultPlaceholder={'auto'} + /> +
+
+ )} + +
+
+ {backgroundPosition.dataList.map((item) => { + return ( +
{ + setBgPositionType(item.title); + onStyleChange([ + { + styleKey: 'backgroundPosition', + value: item.position, + }, + ]); + }} + > + +
+ ); + })} +
+ +
+
+ 左 + { + onBgPositionChange(value, 'horizontal'); + }} + value={parseValue(styleData['backgroundPosition'], 0)} + > +
+
+ 顶 + { + onBgPositionChange(value, 'verticle'); + }} + value={parseValue(styleData['backgroundPosition'], 1)} + > +
+
+
+ + + + )} - {/* +
onNumberChange("opacity", parseInt(val) / 100)} + style={{ marginLeft: '10px', marginRight: '10px', width: '104px' }} + value={!isEmptyValue(styleData.opacity) ? styleData.opacity * 100 : 0} + onChange={(val) => onOpacityChange('opacity', parseInt(val) / 100)} /> - onNumberChange("opacity", isEmptyValue(val) ? null : val / 100) - } + onChange={(val) => onOpacityChange('opacity', isEmptyValue(val) ? null : val / 100)} + innerAfter={'%'} >
- */} + ); diff --git a/src/setter/style-setter/utils/index.tsx b/src/setter/style-setter/utils/index.tsx index 391b3d7..0f3a239 100644 --- a/src/setter/style-setter/utils/index.tsx +++ b/src/setter/style-setter/utils/index.tsx @@ -124,3 +124,31 @@ export function parseToStyleData(cssCode: string) { return styleData; } +// 多参数样式解析单个参数 +export const parseValue = (styleValue: String, valueIndex: number) => { + if (!styleValue) return; + const styleArray = styleValue?.split(' ') || []; + const value = styleArray[valueIndex]; + const unifiedValue = unifyValue(value); + return unifiedValue === 'auto' ? null : unifiedValue; +}; + +// 去除一下单位 +export const unifyValue = (value: string) => { + if (/^-?\d+px$/.test(value)) { + return value.replace('px', ''); + } + return value; +}; + +// 规范手动输入的css样式 +export const unifyStyle = (value: string) => { + if (!value) return; + //首部空格去除 + if (value.substring(0, 1) === ' ') { + value.replace(/\s+/, ''); + } + //多属性间重复字符串去除 + value.replace(/\s+/g, ' '); + return value; +}; From 672df14da338bcf33081688e742f4bf1b2815854 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=97=E4=BA=AC-=E9=87=91=E5=BB=BA=E6=96=B0?= Date: Tue, 21 Feb 2023 11:34:07 +0800 Subject: [PATCH 46/95] fix: optimize mixed setter, only reset value when setter is switched, and add initial value to update UI when the setter was changed to variable setter --- src/setter/mixed-setter/index.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index b18eb9d..708f99a 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -201,10 +201,17 @@ export default class MixedSetter extends Component<{ private useSetter = (name: string, usedName: string) => { this.fromMixedSetterSelect = true; const { field } = this.props; - // reset value - field.setValue(undefined); + if (name !== this.used) { + // reset value + field.setValue(undefined); + } if (name === 'VariableSetter') { const setterComponent = getSetter('VariableSetter')?.component as any; + if (name !== this.used) { + field.setValue({ + type: 'JSExpression' + }); + } if (setterComponent && setterComponent.isPopup) { setterComponent.show({ prop: field }); this.syncSelectSetter(name); From a3d64e3983d3f9eb11d823c9627572ccb2cc9a4b Mon Sep 17 00:00:00 2001 From: slb Date: Wed, 1 Mar 2023 20:16:28 +0800 Subject: [PATCH 47/95] =?UTF-8?q?feat:=20stylesetter=E4=BC=98=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=E6=95=B0=E5=AD=97=E9=80=89=E6=8B=A9=E5=99=A8=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E8=87=AA=E9=80=89=E5=8D=95=E4=BD=8D=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 +- .../style-setter/components/number/index.less | 7 +++ .../style-setter/components/number/index.tsx | 53 ++++++++++++++--- .../style-setter/pro/background/index.tsx | 57 ++++++++++++------- src/setter/style-setter/pro/layout/index.tsx | 2 + src/setter/style-setter/utils/index.tsx | 7 +++ 6 files changed, 100 insertions(+), 31 deletions(-) create mode 100644 src/setter/style-setter/components/number/index.less diff --git a/package.json b/package.json index 8ef610b..3ab307f 100644 --- a/package.json +++ b/package.json @@ -29,13 +29,14 @@ "component" ], "dependencies": { + "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.1", "@alilc/lowcode-types": "^1.0.0", "@alilc/lowcode-utils": "^1.0.0", - "react-color": "^2.19.3", + "antd": "^5.2.3", "classnames": "^2.2.6", "cssjson": "^2.1.3", "js-beautify": "^1.13.0", - "@alilc/lowcode-plugin-base-monaco-editor": "^1.1.1" + "react-color": "^2.19.3" }, "devDependencies": { "@alib/build-scripts": "^0.1.3", diff --git a/src/setter/style-setter/components/number/index.less b/src/setter/style-setter/components/number/index.less new file mode 100644 index 0000000..1c548cf --- /dev/null +++ b/src/setter/style-setter/components/number/index.less @@ -0,0 +1,7 @@ +.ant-select>.ant-select-selector { + padding: 0 2px !important; + height: 27px !important; + .ant-select-selection-item { + line-height: 25px !important; + } + } diff --git a/src/setter/style-setter/components/number/index.tsx b/src/setter/style-setter/components/number/index.tsx index 083e07b..b60df06 100644 --- a/src/setter/style-setter/components/number/index.tsx +++ b/src/setter/style-setter/components/number/index.tsx @@ -1,19 +1,22 @@ import * as React from 'react'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, useMemo } from 'react'; import { NumberPicker } from '@alifd/next'; import { StyleData, onStyleChange } from '../../utils/types'; +import { Select } from 'antd'; import { addUnit, removeUnit, isEmptyValue, getPlaceholderPropertyValue, unifyStyle, + getUnit, } from '../../utils'; +import './index.less'; interface numberProps { styleKey: string; styleData: StyleData | any; onStyleChange?: onStyleChange; - unit?: string; + unit?: string | Array; min?: number; max?: number; style?: any; @@ -42,15 +45,13 @@ export default (props: numberProps) => { defaultPlaceholder, } = props; - console.log('props', props); const [placeholder, setPlaceholder] = useState(defaultPlaceholder); - const onNumberChange = (styleKey: string, value: number, unit?: string) => { onStyleChange([ { styleKey, - value: unit ? addUnit(value, unit) : value, + value: unit ? addUnit(value, unit) : String(value), }, ]); }; @@ -72,15 +73,51 @@ export default (props: numberProps) => { initData(props); }, []); let value = unit ? removeUnit(styleData[styleKey]) : styleData[styleKey]; + let curUnit = unit ? getUnit(styleData[styleKey])||'px' : ''; // 不加multiprop一样，加了单独处理 if (typeof multiProp === 'number') { value = unifyStyle(styleData[styleKey])?.split(' ')?.[multiProp]; if (value === null || value === undefined || value === 'auto') { value = null; + curUnit = 'px'; } else { + curUnit = unit ? getUnit(value)||'px' : ''; value = unit ? removeUnit(value) : value; } } + if(isNaN(value)){ + value = 0 + } + const getInnerAfter = useMemo(() => { + if (typeof unit === 'string') { + return unit; + } + if (!unit) { + return ''; + } + const options = unit?.map((item) => { + return { + value: item, + label: item, + }; + }); + return ( + { - onBgPositionChange(value, 'horizontal'); - }} - value={parseValue(styleData['backgroundPosition'], 0)} - > + + onBgPositionChange(styleKey, val, unit, styleData, 'horizontal') + } + multiProp={0} + defaultPlaceholder={'auto'} + />
顶 - { - onBgPositionChange(value, 'verticle'); - }} - value={parseValue(styleData['backgroundPosition'], 1)} - > + + onBgPositionChange(styleKey, val, unit, styleData, 'verticle') + } + multiProp={1} + defaultPlaceholder={'auto'} + /> +
diff --git a/src/setter/style-setter/pro/layout/index.tsx b/src/setter/style-setter/pro/layout/index.tsx index a13bc27..65e853b 100644 --- a/src/setter/style-setter/pro/layout/index.tsx +++ b/src/setter/style-setter/pro/layout/index.tsx @@ -89,6 +89,7 @@ export default (props: layoutProps) => { min={0} styleKey="width" {...props} + unit = {['px','%']} useComputedStyle={true} /> @@ -99,6 +100,7 @@ export default (props: layoutProps) => { min={0} {...props} style={{ width: '100%' }} + unit = {['px','%']} useComputedStyle={true} /> diff --git a/src/setter/style-setter/utils/index.tsx b/src/setter/style-setter/utils/index.tsx index 0f3a239..224ef98 100644 --- a/src/setter/style-setter/utils/index.tsx +++ b/src/setter/style-setter/utils/index.tsx @@ -152,3 +152,10 @@ export const unifyStyle = (value: string) => { value.replace(/\s+/g, ' '); return value; }; + +export const getUnit = (value: string) => { + if(typeof value !== 'string') return '' + if (value != undefined && value != null){ + return value.replace(/^-?[0-9]\d*/g, '') + } +} From 1dc7bab18863a1c666101d5868eff2ef800735a1 Mon Sep 17 00:00:00 2001 From: slb Date: Thu, 2 Mar 2023 19:25:08 +0800 Subject: [PATCH 48/95] =?UTF-8?q?feat:=20stylesetter=E4=BC=98=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9Eboarder=E8=AE=BE=E7=BD=AE=E6=9B=B4?= =?UTF-8?q?=E5=A4=9A=E5=8F=AF=E8=A7=86=E5=8C=96=E9=80=89=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/custom-icon.tsx | 2 +- .../components/color-input/index.tsx | 9 +- .../style-setter/pro/border/config.json | 16 ++ src/setter/style-setter/pro/border/index.less | 58 +++++++ src/setter/style-setter/pro/border/index.tsx | 141 +++++++++++++++++- 5 files changed, 215 insertions(+), 11 deletions(-) diff --git a/src/components/custom-icon.tsx b/src/components/custom-icon.tsx index 0664bf8..9407b4e 100644 --- a/src/components/custom-icon.tsx +++ b/src/components/custom-icon.tsx @@ -2,7 +2,7 @@ import { Icon } from '@alifd/next'; import * as React from 'react'; import { useEffect } from 'react'; -const ICON_URL = '//at.alicdn.com/t/a/font_2761185_fefq6opmyv4.js'; +const ICON_URL = '//at.alicdn.com/t/a/font_2761185_ccl8ob63gmj.js'; let CustomIcon: any; diff --git a/src/setter/style-setter/components/color-input/index.tsx b/src/setter/style-setter/components/color-input/index.tsx index 5c59147..77468c7 100644 --- a/src/setter/style-setter/components/color-input/index.tsx +++ b/src/setter/style-setter/components/color-input/index.tsx @@ -9,6 +9,7 @@ interface ColorInputProps { styleData: StyleData | any; onStyleChange?: onStyleChange; inputWidth?: string; + color?:any } interface state { @@ -79,15 +80,15 @@ export default class ColorSetter extends React.Component }; render() { - const { styleKey, styleData, inputWidth = '108px' } = this.props; + const { styleKey, styleData, inputWidth = '108px',color } = this.props; const InputTarget = ( } + innerBefore={
} onChange={this.inputChange} - value={styleData[styleKey]} + value={color?color:styleData[styleKey]} /> ); return ( @@ -100,7 +101,7 @@ export default class ColorSetter extends React.Component triggerType="click" closable={false} > - + ); } diff --git a/src/setter/style-setter/pro/border/config.json b/src/setter/style-setter/pro/border/config.json index f4b26cd..8d626ed 100644 --- a/src/setter/style-setter/pro/border/config.json +++ b/src/setter/style-setter/pro/border/config.json @@ -15,6 +15,22 @@ ] }, + "shadowType": { + "title": "阴影", + "dataList": [ + { + "value": "outerShadow", + "tips": "外阴影", + "icon": "icon-yinying" + }, + { + "value": "insetShadow", + "tips": "内阴影", + "icon": "icon-yinying-outside" + } + ] + }, + "borderStyle": { "title": "边框样式", "dataList": [ diff --git a/src/setter/style-setter/pro/border/index.less b/src/setter/style-setter/pro/border/index.less index 6a5c6db..6f17c89 100644 --- a/src/setter/style-setter/pro/border/index.less +++ b/src/setter/style-setter/pro/border/index.less @@ -53,3 +53,61 @@ } } } +.shadow-container { + .shadow-color-container{ + margin-left: 70px; + .shadow-color-title{ + margin-right: 16px; + } + } + .shadow-size-container { + display: flex; + flex-direction: row; + margin-top: 10px; + margin-bottom: 10px; + margin-left: 30px; + .shadow-size-x { + display: flex; + flex-direction: row; + align-items: center; + .shadow-size-x-title { + width: 15px; + margin-right: 4px; + } + } + .shadow-size-y { + display: flex; + flex-direction: row; + align-items: center; + .shadow-size-y-title { + width: 18px; + margin-left: 9px; + } + } + } + .shadow-config-container { + display: flex; + flex-direction: row; + margin-top: 10px; + margin-bottom: 10px; + margin-left: 20px; + .shadow-blur-container { + display: flex; + flex-direction: row; + align-items: center; + .shadow-blur-container-title { + width: 24px; + margin-right: 4px; + } + } + .shadow-extend-container { + display: flex; + flex-direction: row; + align-items: center; + .shadow-extend-container-title { + margin-right: 4px; + width: 24px; + } + } + } +} diff --git a/src/setter/style-setter/pro/border/index.tsx b/src/setter/style-setter/pro/border/index.tsx index b8472df..77ad634 100644 --- a/src/setter/style-setter/pro/border/index.tsx +++ b/src/setter/style-setter/pro/border/index.tsx @@ -7,7 +7,7 @@ import ColorInput from '../../components/color-input'; import { StyleData, onStyleChange } from '../../utils/types'; import { Collapse, Range, Select } from '@alifd/next'; import fontConfig from './config.json'; -import { addUnit, removeUnit } from '../../utils'; +import { addUnit, removeUnit, unifyStyle } from '../../utils'; import './index.less'; const Option = Select.Option; const Panel = Collapse.Panel; @@ -42,10 +42,10 @@ interface fontProps { } export default (props: fontProps) => { const { styleData, onStyleChange, unit } = props; - const { borderType, borderStyle } = fontConfig; + const { borderType, borderStyle, shadowType} = fontConfig; const [selBorderType, setSelBorderType] = useState(null); const [borderDirection, setBorderDirection] = useState(null); - + const [shadow, setShadow] = useState('') useEffect(() => { if (!borderDirection) { for (let key in styleData) { @@ -68,11 +68,20 @@ export default (props: fontProps) => { }else if (styleData[borderRadiusMap.borderBottomLeftRadius] || styleData[borderRadiusMap.borderBottomRightRadius] || styleData[borderRadiusMap.borderTopLeftRadius] || styleData[borderRadiusMap.borderTopRightRadius]){ setSelBorderType(BorderRadiusType.partBorder); } - + // 初始绑定样式 + if(styleData['boxShadow']){ + const bgSizeArray = unifyStyle(styleData['boxShadow'])?.split(' ') + if(bgSizeArray?.[0]==='inset'){ + setShadow('insetShadow') + }else{ + setShadow('outerShadow') + } + }else{ + setShadow('') + } }, [styleData]); const onChangeBorderType = (styleDataList: Array) => { - if (styleDataList) { const styleKey = styleDataList[0].value; setSelBorderType(styleKey); @@ -136,7 +145,48 @@ export default (props: fontProps) => { }, ]); }; - + const onBoxShadowChange = (styleKey: string, value: any, index?:number, unit?:string,shadowPosition?:string,isColor?:boolean) => { + const bgSizeArray = styleData[styleKey] + ? unifyStyle(styleData[styleKey])?.split(' ') + : ['0', '0', '0', '0', '#000']; + if(shadowPosition==='outerShadow'){ + if(bgSizeArray?.[0]==='inset'){ + bgSizeArray.shift() + } + }else if(shadowPosition==='insetShadow'){ + if(bgSizeArray?.[0]!=='inset'){ + bgSizeArray?.unshift('inset') + } + } + if(bgSizeArray?.[0]==='inset'){ + setShadow('insetShadow') + }else{ + setShadow('outerShadow') + } + let unifiedValue = value + if(!value&&isColor){ + unifiedValue = '#000' + } + if(unifiedValue===null||unifiedValue===undefined||!bgSizeArray) return + unifiedValue = unit? addUnit(unifiedValue,unit): String(unifiedValue) + if(index!==undefined&&index!==null){ + bgSizeArray[index] = unifiedValue + } + let curValue: String ='' + bgSizeArray.forEach((item)=>{ + curValue = curValue+item+' ' + }) + curValue=curValue.substring(0,curValue.length-1) + const styleDataList = [ + { + styleKey, + value:curValue + }, + ]; + onStyleChange(styleDataList); + } + //insetShadow会在第一位插入inset字符串，使所有阴影样式的序号+1 + const insetBoxShadowShift = shadow==='insetShadow' ? 1 : 0 return ( @@ -318,6 +368,85 @@ export default (props: fontProps) => {
+ { + onBoxShadowChange('boxShadow', type?.[0].value, undefined, undefined ,type?.[0].value ) + }} + value={shadow} + > + +
+
+ 阴影颜色 + { + onBoxShadowChange('boxShadow', color?.[0].value, insetBoxShadowShift+4,undefined,undefined,true ) + }} + /> +
+
+
+ x + + onBoxShadowChange(styleKey, val, insetBoxShadowShift+0, unit ) + } + multiProp={insetBoxShadowShift+0} + defaultPlaceholder={'0'} + /> +
+
+ y + + onBoxShadowChange(styleKey, val, insetBoxShadowShift+1, unit ) + } + multiProp={insetBoxShadowShift+1} + defaultPlaceholder={'0'} + /> +
+
+
+
+
模糊
+ + onBoxShadowChange(styleKey, val, insetBoxShadowShift+2, unit ) + } + multiProp={insetBoxShadowShift+2} + defaultPlaceholder={'0'} + /> +
+
+
扩展
+ + onBoxShadowChange(styleKey, val, insetBoxShadowShift+3, unit ) + } + multiProp={insetBoxShadowShift+3} + defaultPlaceholder={'0'} + /> +
+
+
); From 4b645e9d881373515cea9408d1ef607393f478a5 Mon Sep 17 00:00:00 2001 From: wddslb <925083989@qq.com> Date: Thu, 2 Mar 2023 19:25:08 +0800 Subject: [PATCH 49/95] =?UTF-8?q?feat:=20stylesetter=E4=BC=98=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9Eboarder=E8=AE=BE=E7=BD=AE=E6=9B=B4?= =?UTF-8?q?=E5=A4=9A=E5=8F=AF=E8=A7=86=E5=8C=96=E9=80=89=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/custom-icon.tsx | 2 +- .../components/color-input/index.tsx | 9 +- .../style-setter/pro/border/config.json | 16 ++ src/setter/style-setter/pro/border/index.less | 58 +++++++ src/setter/style-setter/pro/border/index.tsx | 141 +++++++++++++++++- 5 files changed, 215 insertions(+), 11 deletions(-) diff --git a/src/components/custom-icon.tsx b/src/components/custom-icon.tsx index 0664bf8..9407b4e 100644 --- a/src/components/custom-icon.tsx +++ b/src/components/custom-icon.tsx @@ -2,7 +2,7 @@ import { Icon } from '@alifd/next'; import * as React from 'react'; import { useEffect } from 'react'; -const ICON_URL = '//at.alicdn.com/t/a/font_2761185_fefq6opmyv4.js'; +const ICON_URL = '//at.alicdn.com/t/a/font_2761185_ccl8ob63gmj.js'; let CustomIcon: any; diff --git a/src/setter/style-setter/components/color-input/index.tsx b/src/setter/style-setter/components/color-input/index.tsx index 5c59147..77468c7 100644 --- a/src/setter/style-setter/components/color-input/index.tsx +++ b/src/setter/style-setter/components/color-input/index.tsx @@ -9,6 +9,7 @@ interface ColorInputProps { styleData: StyleData | any; onStyleChange?: onStyleChange; inputWidth?: string; + color?:any } interface state { @@ -79,15 +80,15 @@ export default class ColorSetter extends React.Component }; render() { - const { styleKey, styleData, inputWidth = '108px' } = this.props; + const { styleKey, styleData, inputWidth = '108px',color } = this.props; const InputTarget = ( } + innerBefore={
} onChange={this.inputChange} - value={styleData[styleKey]} + value={color?color:styleData[styleKey]} /> ); return ( @@ -100,7 +101,7 @@ export default class ColorSetter extends React.Component triggerType="click" closable={false} > - + ); } diff --git a/src/setter/style-setter/pro/border/config.json b/src/setter/style-setter/pro/border/config.json index f4b26cd..8d626ed 100644 --- a/src/setter/style-setter/pro/border/config.json +++ b/src/setter/style-setter/pro/border/config.json @@ -15,6 +15,22 @@ ] }, + "shadowType": { + "title": "阴影", + "dataList": [ + { + "value": "outerShadow", + "tips": "外阴影", + "icon": "icon-yinying" + }, + { + "value": "insetShadow", + "tips": "内阴影", + "icon": "icon-yinying-outside" + } + ] + }, + "borderStyle": { "title": "边框样式", "dataList": [ diff --git a/src/setter/style-setter/pro/border/index.less b/src/setter/style-setter/pro/border/index.less index 6a5c6db..6f17c89 100644 --- a/src/setter/style-setter/pro/border/index.less +++ b/src/setter/style-setter/pro/border/index.less @@ -53,3 +53,61 @@ } } } +.shadow-container { + .shadow-color-container{ + margin-left: 70px; + .shadow-color-title{ + margin-right: 16px; + } + } + .shadow-size-container { + display: flex; + flex-direction: row; + margin-top: 10px; + margin-bottom: 10px; + margin-left: 30px; + .shadow-size-x { + display: flex; + flex-direction: row; + align-items: center; + .shadow-size-x-title { + width: 15px; + margin-right: 4px; + } + } + .shadow-size-y { + display: flex; + flex-direction: row; + align-items: center; + .shadow-size-y-title { + width: 18px; + margin-left: 9px; + } + } + } + .shadow-config-container { + display: flex; + flex-direction: row; + margin-top: 10px; + margin-bottom: 10px; + margin-left: 20px; + .shadow-blur-container { + display: flex; + flex-direction: row; + align-items: center; + .shadow-blur-container-title { + width: 24px; + margin-right: 4px; + } + } + .shadow-extend-container { + display: flex; + flex-direction: row; + align-items: center; + .shadow-extend-container-title { + margin-right: 4px; + width: 24px; + } + } + } +} diff --git a/src/setter/style-setter/pro/border/index.tsx b/src/setter/style-setter/pro/border/index.tsx index b8472df..77ad634 100644 --- a/src/setter/style-setter/pro/border/index.tsx +++ b/src/setter/style-setter/pro/border/index.tsx @@ -7,7 +7,7 @@ import ColorInput from '../../components/color-input'; import { StyleData, onStyleChange } from '../../utils/types'; import { Collapse, Range, Select } from '@alifd/next'; import fontConfig from './config.json'; -import { addUnit, removeUnit } from '../../utils'; +import { addUnit, removeUnit, unifyStyle } from '../../utils'; import './index.less'; const Option = Select.Option; const Panel = Collapse.Panel; @@ -42,10 +42,10 @@ interface fontProps { } export default (props: fontProps) => { const { styleData, onStyleChange, unit } = props; - const { borderType, borderStyle } = fontConfig; + const { borderType, borderStyle, shadowType} = fontConfig; const [selBorderType, setSelBorderType] = useState(null); const [borderDirection, setBorderDirection] = useState(null); - + const [shadow, setShadow] = useState('') useEffect(() => { if (!borderDirection) { for (let key in styleData) { @@ -68,11 +68,20 @@ export default (props: fontProps) => { }else if (styleData[borderRadiusMap.borderBottomLeftRadius] || styleData[borderRadiusMap.borderBottomRightRadius] || styleData[borderRadiusMap.borderTopLeftRadius] || styleData[borderRadiusMap.borderTopRightRadius]){ setSelBorderType(BorderRadiusType.partBorder); } - + // 初始绑定样式 + if(styleData['boxShadow']){ + const bgSizeArray = unifyStyle(styleData['boxShadow'])?.split(' ') + if(bgSizeArray?.[0]==='inset'){ + setShadow('insetShadow') + }else{ + setShadow('outerShadow') + } + }else{ + setShadow('') + } }, [styleData]); const onChangeBorderType = (styleDataList: Array) => { - if (styleDataList) { const styleKey = styleDataList[0].value; setSelBorderType(styleKey); @@ -136,7 +145,48 @@ export default (props: fontProps) => { }, ]); }; - + const onBoxShadowChange = (styleKey: string, value: any, index?:number, unit?:string,shadowPosition?:string,isColor?:boolean) => { + const bgSizeArray = styleData[styleKey] + ? unifyStyle(styleData[styleKey])?.split(' ') + : ['0', '0', '0', '0', '#000']; + if(shadowPosition==='outerShadow'){ + if(bgSizeArray?.[0]==='inset'){ + bgSizeArray.shift() + } + }else if(shadowPosition==='insetShadow'){ + if(bgSizeArray?.[0]!=='inset'){ + bgSizeArray?.unshift('inset') + } + } + if(bgSizeArray?.[0]==='inset'){ + setShadow('insetShadow') + }else{ + setShadow('outerShadow') + } + let unifiedValue = value + if(!value&&isColor){ + unifiedValue = '#000' + } + if(unifiedValue===null||unifiedValue===undefined||!bgSizeArray) return + unifiedValue = unit? addUnit(unifiedValue,unit): String(unifiedValue) + if(index!==undefined&&index!==null){ + bgSizeArray[index] = unifiedValue + } + let curValue: String ='' + bgSizeArray.forEach((item)=>{ + curValue = curValue+item+' ' + }) + curValue=curValue.substring(0,curValue.length-1) + const styleDataList = [ + { + styleKey, + value:curValue + }, + ]; + onStyleChange(styleDataList); + } + //insetShadow会在第一位插入inset字符串，使所有阴影样式的序号+1 + const insetBoxShadowShift = shadow==='insetShadow' ? 1 : 0 return ( @@ -318,6 +368,85 @@ export default (props: fontProps) => {
+ { + onBoxShadowChange('boxShadow', type?.[0].value, undefined, undefined ,type?.[0].value ) + }} + value={shadow} + > + +
+
+ 阴影颜色 + { + onBoxShadowChange('boxShadow', color?.[0].value, insetBoxShadowShift+4,undefined,undefined,true ) + }} + /> +
+
+
+ x + + onBoxShadowChange(styleKey, val, insetBoxShadowShift+0, unit ) + } + multiProp={insetBoxShadowShift+0} + defaultPlaceholder={'0'} + /> +
+
+ y + + onBoxShadowChange(styleKey, val, insetBoxShadowShift+1, unit ) + } + multiProp={insetBoxShadowShift+1} + defaultPlaceholder={'0'} + /> +
+
+
+
+
模糊
+ + onBoxShadowChange(styleKey, val, insetBoxShadowShift+2, unit ) + } + multiProp={insetBoxShadowShift+2} + defaultPlaceholder={'0'} + /> +
+
+
扩展
+ + onBoxShadowChange(styleKey, val, insetBoxShadowShift+3, unit ) + } + multiProp={insetBoxShadowShift+3} + defaultPlaceholder={'0'} + /> +
+
+
); From d2fdb006d3988e2fdec6ed6920d23f73e3c1a5e8 Mon Sep 17 00:00:00 2001 From: jingyu Date: Mon, 6 Mar 2023 20:05:01 +0800 Subject: [PATCH 50/95] =?UTF-8?q?feat:=20=E4=BA=8B=E4=BB=B6=E7=BB=91?= =?UTF-8?q?=E5=AE=9A=E6=94=AF=E6=8C=81=E7=BB=91=E5=AE=9A=20props=20?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugin/plugin-event-bind-dialog/index.tsx | 29 +++++++++++++------ src/setter/events-setter/index.tsx | 4 +++ 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/plugin/plugin-event-bind-dialog/index.tsx b/src/plugin/plugin-event-bind-dialog/index.tsx index 4ed62f5..10f6673 100644 --- a/src/plugin/plugin-event-bind-dialog/index.tsx +++ b/src/plugin/plugin-event-bind-dialog/index.tsx @@ -79,8 +79,8 @@ export default class EventBindDialog extends Component { // }, ]; - private relatedEventName: string = ''; - private bindEventName: string = ''; + private relatedEventName = ''; + private bindEventName = ''; state: any = { visiable: false, @@ -212,7 +212,7 @@ export default class EventBindDialog extends Component { if (template) { const functionName = this.pickupFunctionName(template); - formatTemp = template.replace(new RegExp('^s*' + functionName), eventName); + formatTemp = template.replace(new RegExp(`^s*${ functionName}`), eventName); if (useParams) { formatTemp = formatTemp.replace(tempPlaceHolderReg, 'extParams'); @@ -232,11 +232,11 @@ export default class EventBindDialog extends Component { // 重新join进去 formatTemp = - formatTemp.substr(0, leftIndex) + - '(' + - paramList.join(',') + - ')' + - formatTemp.substr(rightIndex + 1, formatTemp.length); + `${formatTemp.substr(0, leftIndex) + }(${ + paramList.join(',') + })${ + formatTemp.substr(rightIndex + 1, formatTemp.length)}`; } } @@ -244,6 +244,10 @@ export default class EventBindDialog extends Component { }; formatEventName = (eventName: string) => { + // 支持绑定this.props.xxxx + if (/(this\.)?props\.[a-zA-Z\-_]/.test(eventName)) { + return eventName.replace(/(this\.)|(\s+)/, ''); + } const newEventNameArr = eventName.split(''); const index = eventName.indexOf('.'); if (index >= 0) { @@ -346,7 +350,14 @@ export default class EventBindDialog extends Component {
-
事件名称
+
+ 事件名称 + {(window as any).lowcodeSetterSwitch?.enablePropsEvents && ( + + 如需绑定 props 属性，可通过 props.xxx 进行绑定 + + )} +
diff --git a/src/setter/events-setter/index.tsx b/src/setter/events-setter/index.tsx index 887e5df..4eac0f0 100644 --- a/src/setter/events-setter/index.tsx +++ b/src/setter/events-setter/index.tsx @@ -319,6 +319,10 @@ export default class EventsSetter extends Component<{ }; onRelatedEventNameClick = (eventName: string) => { + // props 事件，不需要跳转 + if (/(this\.)?props\./.test(eventName)) { + return; + } skeleton.showPanel('codeEditor'); setTimeout(() => { event.emit('codeEditor.focusByFunction', { From 7b9db1760409203337e55e56aeb87bb6a4dc6435 Mon Sep 17 00:00:00 2001 From: wddslb <925083989@qq.com> Date: Thu, 9 Mar 2023 22:02:26 +0800 Subject: [PATCH 51/95] =?UTF-8?q?feat:=20next=E7=BB=84=E4=BB=B6=E6=9B=BF?= =?UTF-8?q?=E6=8D=A2antd=E7=9A=84Select=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../style-setter/components/number/index.less | 16 +++++--- .../style-setter/components/number/index.tsx | 41 +++++++++---------- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/src/setter/style-setter/components/number/index.less b/src/setter/style-setter/components/number/index.less index 1c548cf..ba0bfbb 100644 --- a/src/setter/style-setter/components/number/index.less +++ b/src/setter/style-setter/components/number/index.less @@ -1,7 +1,11 @@ -.ant-select>.ant-select-selector { - padding: 0 2px !important; - height: 27px !important; - .ant-select-selection-item { - line-height: 25px !important; - } + + .next-select-trigger{ + min-width: 1px; } + .next-select-inner{ + min-width: 1px !important + } + .next-input-text-field{ + padding: 0 2px !important + } + diff --git a/src/setter/style-setter/components/number/index.tsx b/src/setter/style-setter/components/number/index.tsx index b60df06..a0e4429 100644 --- a/src/setter/style-setter/components/number/index.tsx +++ b/src/setter/style-setter/components/number/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { useEffect, useState, useMemo } from 'react'; -import { NumberPicker } from '@alifd/next'; +import { NumberPicker, Select } from '@alifd/next'; import { StyleData, onStyleChange } from '../../utils/types'; -import { Select } from 'antd'; +//import { Select } from 'antd'; import { addUnit, removeUnit, @@ -45,7 +45,6 @@ export default (props: numberProps) => { defaultPlaceholder, } = props; - const [placeholder, setPlaceholder] = useState(defaultPlaceholder); const onNumberChange = (styleKey: string, value: number, unit?: string) => { onStyleChange([ @@ -73,7 +72,7 @@ export default (props: numberProps) => { initData(props); }, []); let value = unit ? removeUnit(styleData[styleKey]) : styleData[styleKey]; - let curUnit = unit ? getUnit(styleData[styleKey])||'px' : ''; + let curUnit = unit ? getUnit(styleData[styleKey]) || 'px' : ''; // 不加multiprop一样，加了单独处理 if (typeof multiProp === 'number') { value = unifyStyle(styleData[styleKey])?.split(' ')?.[multiProp]; @@ -81,12 +80,12 @@ export default (props: numberProps) => { value = null; curUnit = 'px'; } else { - curUnit = unit ? getUnit(value)||'px' : ''; + curUnit = unit ? getUnit(value) || 'px' : ''; value = unit ? removeUnit(value) : value; } } - if(isNaN(value)){ - value = 0 + if (isNaN(value)) { + value = 0; } const getInnerAfter = useMemo(() => { if (typeof unit === 'string') { @@ -102,20 +101,20 @@ export default (props: numberProps) => { }; }); return ( - + onChangeFunction + ? onChangeFunction(styleKey, value, val) + : onNumberChange(styleKey, value, val) + } + dataSource={options} + /> ); }, [unit]); return ( From 3a3ff2d0218c3ec32a397d6a4be0202db5b1b645 Mon Sep 17 00:00:00 2001 From: wddslb <925083989@qq.com> Date: Thu, 9 Mar 2023 22:02:26 +0800 Subject: [PATCH 52/95] =?UTF-8?q?feat:=20next=E7=BB=84=E4=BB=B6=E6=9B=BF?= =?UTF-8?q?=E6=8D=A2antd=E7=9A=84Select=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../style-setter/components/number/index.less | 16 +++++--- .../style-setter/components/number/index.tsx | 41 +++++++++---------- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/src/setter/style-setter/components/number/index.less b/src/setter/style-setter/components/number/index.less index 1c548cf..ba0bfbb 100644 --- a/src/setter/style-setter/components/number/index.less +++ b/src/setter/style-setter/components/number/index.less @@ -1,7 +1,11 @@ -.ant-select>.ant-select-selector { - padding: 0 2px !important; - height: 27px !important; - .ant-select-selection-item { - line-height: 25px !important; - } + + .next-select-trigger{ + min-width: 1px; } + .next-select-inner{ + min-width: 1px !important + } + .next-input-text-field{ + padding: 0 2px !important + } + diff --git a/src/setter/style-setter/components/number/index.tsx b/src/setter/style-setter/components/number/index.tsx index b60df06..a0e4429 100644 --- a/src/setter/style-setter/components/number/index.tsx +++ b/src/setter/style-setter/components/number/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { useEffect, useState, useMemo } from 'react'; -import { NumberPicker } from '@alifd/next'; +import { NumberPicker, Select } from '@alifd/next'; import { StyleData, onStyleChange } from '../../utils/types'; -import { Select } from 'antd'; +//import { Select } from 'antd'; import { addUnit, removeUnit, @@ -45,7 +45,6 @@ export default (props: numberProps) => { defaultPlaceholder, } = props; - const [placeholder, setPlaceholder] = useState(defaultPlaceholder); const onNumberChange = (styleKey: string, value: number, unit?: string) => { onStyleChange([ @@ -73,7 +72,7 @@ export default (props: numberProps) => { initData(props); }, []); let value = unit ? removeUnit(styleData[styleKey]) : styleData[styleKey]; - let curUnit = unit ? getUnit(styleData[styleKey])||'px' : ''; + let curUnit = unit ? getUnit(styleData[styleKey]) || 'px' : ''; // 不加multiprop一样，加了单独处理 if (typeof multiProp === 'number') { value = unifyStyle(styleData[styleKey])?.split(' ')?.[multiProp]; @@ -81,12 +80,12 @@ export default (props: numberProps) => { value = null; curUnit = 'px'; } else { - curUnit = unit ? getUnit(value)||'px' : ''; + curUnit = unit ? getUnit(value) || 'px' : ''; value = unit ? removeUnit(value) : value; } } - if(isNaN(value)){ - value = 0 + if (isNaN(value)) { + value = 0; } const getInnerAfter = useMemo(() => { if (typeof unit === 'string') { @@ -102,20 +101,20 @@ export default (props: numberProps) => { }; }); return ( - + onChangeFunction + ? onChangeFunction(styleKey, value, val) + : onNumberChange(styleKey, value, val) + } + dataSource={options} + /> ); }, [unit]); return ( From 1aab8796d5b43bcad1cffa708eae98770ab0be92 Mon Sep 17 00:00:00 2001 From: wddslb <925083989@qq.com> Date: Fri, 10 Mar 2023 11:33:36 +0800 Subject: [PATCH 53/95] =?UTF-8?q?style:=20=E5=88=A0=E9=99=A4=E5=86=97?= =?UTF-8?q?=E4=BD=99=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/style-setter/components/number/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/setter/style-setter/components/number/index.tsx b/src/setter/style-setter/components/number/index.tsx index a0e4429..feda94d 100644 --- a/src/setter/style-setter/components/number/index.tsx +++ b/src/setter/style-setter/components/number/index.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { useEffect, useState, useMemo } from 'react'; import { NumberPicker, Select } from '@alifd/next'; import { StyleData, onStyleChange } from '../../utils/types'; -//import { Select } from 'antd'; import { addUnit, removeUnit, From 51c791b005a282fe335a04d94feabb95d442ad89 Mon Sep 17 00:00:00 2001 From: jingyu Date: Tue, 14 Mar 2023 16:26:41 +0800 Subject: [PATCH 54/95] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0props=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E8=87=AA=E5=8A=A8=E6=89=93=E5=BC=80js=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugin/plugin-event-bind-dialog/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/plugin/plugin-event-bind-dialog/index.tsx b/src/plugin/plugin-event-bind-dialog/index.tsx index 10f6673..1302b5a 100644 --- a/src/plugin/plugin-event-bind-dialog/index.tsx +++ b/src/plugin/plugin-event-bind-dialog/index.tsx @@ -11,6 +11,8 @@ const defaultParams = '{\n \t "testKey":123 \n}'; const tempPlaceHolder = '${extParams}'; const tempPlaceHolderReg = /\$\{extParams\}/g; +const propEventsReg = /(this\.)?props\.[a-zA-Z0-9\-_]+/; + const defaultEditorOption = { height:'319px', width:'100%', @@ -245,7 +247,7 @@ export default class EventBindDialog extends Component { formatEventName = (eventName: string) => { // 支持绑定this.props.xxxx - if (/(this\.)?props\.[a-zA-Z\-_]/.test(eventName)) { + if (propEventsReg.test(eventName)) { return eventName.replace(/(this\.)|(\s+)/, ''); } const newEventNameArr = eventName.split(''); @@ -275,7 +277,7 @@ export default class EventBindDialog extends Component { ); // 选中的是新建事件 && 注册了sourceEditor面板 - if (this.state.selectedEventName == '') { + if (this.state.selectedEventName == '' && !propEventsReg.test(formatEventName)) { // 判断面板是否处于激活状态 skeleton.showPanel('codeEditor'); const formatTemp = this.formatTemplate(configEventData.template, formatEventName, useParams); From 0a57dcbee915434ba86c4832d5ae8437c7fd7a4d Mon Sep 17 00:00:00 2001 From: liujuping Date: Thu, 16 Mar 2023 15:38:35 +0800 Subject: [PATCH 55/95] fix: array setter component not change when data was modified using field setValue api --- src/setter/array-setter/index.tsx | 108 ++++++++++++++---------------- 1 file changed, 49 insertions(+), 59 deletions(-) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index d396a1b..894dc99 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -14,6 +14,43 @@ interface ArraySetterState { items: SettingField[]; } +/** + * onItemChange 用于 ArraySetter 的单个 index 下的数据发生变化， + * 因此 target.path 的数据格式必定为 [propName1, propName2, arrayIndex, key?]。 + * + * @param target + * @param value + */ +function onItemChange (target: SettingField, items: SettingField[], props: ArraySetterProps) { + const targetPath: Array = target?.path; + if (!targetPath || targetPath.length < 2) { + console.warn( + `[ArraySetter] onItemChange 接收的 target.path <${ + targetPath || 'undefined' + }> 格式非法需为 [propName, arrayIndex, key?]`, + ); + return; + } + const { field, value: fieldValue } = props; + // const { items } = this.state; + const { path } = field; + if (path[0] !== targetPath[0]) { + console.warn( + `[ArraySetter] field.path[0] !== target.path[0] <${path[0]} !== ${targetPath[0]}>`, + ); + return; + } + try { + const index = +targetPath[targetPath.length - 2]; + if (typeof index === 'number' && !isNaN(index)) { + fieldValue[index] = items[index].getValue(); + field?.extraProps?.setValue?.call(field, field, fieldValue); + } + } catch (e) { + console.warn('[ArraySetter] extraProps.setValue failed :', e); + } +}; + interface ArraySetterProps { value: any[]; field: SettingField; @@ -34,66 +71,33 @@ export class ListSetter extends Component { constructor(props: ArraySetterProps) { super(props); - this.init(); } - init() { - const { value, field, onChange } = this.props; + static getDerivedStateFromProps(props: ArraySetterProps, state: ArraySetterState) { const items: SettingField[] = []; + const { value, field } = props; const valueLength = value && Array.isArray(value) ? value.length : 0; for (let i = 0; i < valueLength; i++) { const item = field.createField({ - name: i, - setter: this.props.itemSetter, + name: i.toString(), + setter: props.itemSetter, forceInline: 1, + type: 'field', extraProps: { defaultValue: value[i], - setValue: this.onItemChange, + setValue: (target: SettingField) => { + onItemChange(target, items, props); + }, }, }); items.push(item); } - onChange?.(value); - this.state = { items }; - } - /** - * onItemChange 用于 ArraySetter 的单个 index 下的数据发生变化， - * 因此 target.path 的数据格式必定为 [propName1, propName2, arrayIndex, key?]。 - * - * @param target - * @param value - */ - onItemChange = (target: SettingField) => { - const targetPath: Array = target?.path; - if (!targetPath || targetPath.length < 2) { - console.warn( - `[ArraySetter] onItemChange 接收的 target.path <${ - targetPath || 'undefined' - }> 格式非法需为 [propName, arrayIndex, key?]`, - ); - return; - } - const { field, value: fieldValue } = this.props; - const { items } = this.state; - const { path } = field; - if (path[0] !== targetPath[0]) { - console.warn( - `[ArraySetter] field.path[0] !== target.path[0] <${path[0]} !== ${targetPath[0]}>`, - ); - return; - } - try { - const index = +targetPath[targetPath.length - 2]; - if (typeof index === 'number' && !isNaN(index)) { - fieldValue[index] = items[index].getValue(); - field?.extraProps?.setValue?.call(field, field, fieldValue); - } - } catch (e) { - console.warn('[ArraySetter] extraProps.setValue failed :', e); - } - }; + return { + items, + }; + } onSort(sortedIds: Array) { const { onChange, value: oldValues } = this.props; @@ -108,29 +112,16 @@ export class ListSetter extends Component { return id; }); onChange?.(values); - this.setState({ items: newItems }); } onAdd(newValue?: {[key: string]: any}) { - const { items = [] } = this.state; const { itemSetter, field, onChange, value = [] } = this.props; const values = value || []; const initialValue = (itemSetter as any)?.initialValue; const defaultValue = newValue ? newValue : (typeof initialValue === 'function' ? initialValue(field) : initialValue); - const item = field.createField({ - name: items.length, - setter: itemSetter, - forceInline: 1, - extraProps: { - defaultValue, - setValue: this.onItemChange, - }, - }); - items.push(item); values.push(defaultValue); this.scrollToLast = true; onChange?.(values); - this.setState({ items }); } onRemove(removed: SettingField) { @@ -148,7 +139,6 @@ export class ListSetter extends Component { removed.remove(); const pureValues = values.map((item: any) => typeof(item) === 'object' ? Object.assign({}, item):item); onChange?.(pureValues); - this.setState({ items }); } componentWillUnmount() { From d47a1d285d8779982928fd3af5affcb43fb74489 Mon Sep 17 00:00:00 2001 From: jingyu Date: Tue, 21 Mar 2023 16:50:02 +0800 Subject: [PATCH 56/95] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E6=8B=93?= =?UTF-8?q?=E5=B1=95=E5=8F=98=E9=87=8F=E7=BB=91=E5=AE=9A=E9=9D=A2=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 37 +++++++++++- .../plugin-variable-bind-dialog/index.tsx | 59 ++++++++++++------- .../style-setter/components/number/index.tsx | 9 ++- src/setter/style-setter/index.tsx | 18 +++--- 4 files changed, 87 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index dfe49f8..b4f7da2 100644 --- a/README.md +++ b/README.md @@ -22,4 +22,39 @@ https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/js/engine-ext. https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js -``` \ No newline at end of file +``` + +#### 拓展变量绑定面板 + +通过传入extraDataMap拓展属性绑定面板 + +```typescript +ctx.skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.VariableBindDialog, + name: 'variableBindDialog', + props: { + getSchema: () => editorController.getSchema(), + // 拓展变量绑定 + extraDataMap: { + props: { + name: 'Props', // 变量组展示名 + key: 'props', // 属性名，例如 this.props + getChildren: () => [ + { + label: 'prop1', + value: 'value1', + }, + { + label: 'prop2', + children: [ + { label: 'propxxx', value: 1 } + ] + } + ], + } + } + }, +}); +``` diff --git a/src/plugin/plugin-variable-bind-dialog/index.tsx b/src/plugin/plugin-variable-bind-dialog/index.tsx index 29a1328..1340e83 100644 --- a/src/plugin/plugin-variable-bind-dialog/index.tsx +++ b/src/plugin/plugin-variable-bind-dialog/index.tsx @@ -69,6 +69,10 @@ export default class VariableBindDialog extends Component { private matchedKeys:null; + get extraDataMap() { + return this.props.config.props?.extraDataMap; + } + componentDidMount() { event.on('common:variableBindDialog.openDialog', ({ field }) => { this.setState({ field }, () => { @@ -140,15 +144,15 @@ export default class VariableBindDialog extends Component { const valueString = stateMap[key].value; let value; try{ - value = eval('('+valueString+')'); + value = eval(`(${valueString})`); }catch(e){} - + if (value){ dataSourceMap[key] = value; } } } - let treeList = []; + const treeList = []; this.walkNode(dataSourceMap,-1,treeList); // this.setState({ // treeList @@ -158,11 +162,11 @@ export default class VariableBindDialog extends Component { /** * 通过子节点id查找节点path - * @param tree - * @param func - * @param field - * @param path - * @returns + * @param tree + * @param func + * @param field + * @param path + * @returns */ treeFindPath(tree, func, field = "", path = []) { if (!tree) return [] @@ -180,18 +184,18 @@ export default class VariableBindDialog extends Component { /** * 循环遍历节点 - * @param dataSourceMap - * @param deepNum - * @param treeList + * @param dataSourceMap + * @param deepNum + * @param treeList */ walkNode (dataSourceMap,deepNum,treeList){ deepNum++; let index = 0 - for (let key in dataSourceMap){ - let treeData = {}; + for (const key in dataSourceMap){ + const treeData = {}; treeData.label = key; - //treeData.key = deepNum+'_'+index; - if (typeof(dataSourceMap[key])=='object' && !(dataSourceMap[key] instanceof Array)){ + // treeData.key = deepNum+'_'+index; + if (typeof(dataSourceMap[key])==='object' && !(dataSourceMap[key] instanceof Array)){ treeData.children = []; this.walkNode(dataSourceMap[key],deepNum,treeData.children); } @@ -274,6 +278,7 @@ export default class VariableBindDialog extends Component { name: '数据源', childrens: dataSource, }, + ...this.extraDataMap, }, }); }, @@ -424,7 +429,13 @@ export default class VariableBindDialog extends Component { onVariableItemClick = (key: string) => { const { variableListMap } = this.state; - const childrenVariableList = variableListMap[key].childrens; + let childrenVariableList; + if (this.extraDataMap?.[key] && this.extraDataMap[key]?.getChildren?.()) { + childrenVariableList = this.extraDataMap[key].getChildren(); + } else { + childrenVariableList = variableListMap[key].childrens; + } + // const matchedKeys = []; // const loop = data => // data.forEach(item => { @@ -464,9 +475,15 @@ export default class VariableBindDialog extends Component { selectLabel = `${label}()`; }else if (selParentVariable == 'dataSource'){ selectLabel = `this.state.${label}` + } else { + const fondKey = Object.keys(this.extraDataMap || {}).find(k => k === selParentVariable); + if (fondKey) { + const propKey = this.extraDataMap[fondKey].key; + const pathList = this.treeFindPath(childrenVariableList, (data: any) => data.key === key,'label'); + selectLabel = `this.${propKey}.${pathList.join('.')}`; + } } this.onSelectItem(selectLabel); - } @@ -573,10 +590,10 @@ export default class VariableBindDialog extends Component { ))} */} - { @@ -42,8 +43,6 @@ export default (props: numberProps) => { defaultPlaceholder, } = props; - console.log('props', props); - const [placeholder, setPlaceholder] = useState(defaultPlaceholder); const onNumberChange = (styleKey: string, value: number, unit?: string) => { @@ -93,8 +92,8 @@ export default (props: numberProps) => { ? onChangeFunction(styleKey, val, unit) : onNumberChange(styleKey, val, unit) } - innerAfter={unit ? unit : ''} + innerAfter={unit || ''} placeholder={placeholder} - > + /> ); }; diff --git a/src/setter/style-setter/index.tsx b/src/setter/style-setter/index.tsx index 651514d..c5287e3 100644 --- a/src/setter/style-setter/index.tsx +++ b/src/setter/style-setter/index.tsx @@ -8,6 +8,7 @@ import CssCode from './components/css-code'; import { StyleData } from './utils/types'; import { ConfigProvider } from '@alifd/next'; import './index.less'; + interface StyleSetterProps { value: StyleData; defaultValue: string; @@ -79,9 +80,9 @@ export default class StyleSetterV2 extends React.PureComponent * @param styleKey * @param value */ - onStyleChange = (styleDataList: Array) => { + onStyleChange = (styleDataList: StyleData[]) => { const { onChange } = this.props; - let styleData: StyleData | any = Object.assign({}, this.state.styleData); + const styleData: StyleData | any = Object.assign({}, this.state.styleData); styleDataList && styleDataList.map((item) => { if (item.value == undefined || item.value == null) { @@ -111,7 +112,6 @@ export default class StyleSetterV2 extends React.PureComponent render() { const { isShowCssCode, showModuleList } = this.props; const { styleData, cssCodeVisiable, initFlag } = this.state; - console.log('styleData', styleData); return ( @@ -125,7 +125,7 @@ export default class StyleSetterV2 extends React.PureComponent
*/} - + )} @@ -134,11 +134,11 @@ export default class StyleSetterV2 extends React.PureComponent onStyleChange={this.onStyleChange} styleData={styleData} {...this.props} - > + /> )} {showModuleList.filter((item) => item == 'font').length > 0 && ( - + )} {showModuleList.filter((item) => item == 'background').length > 0 && ( @@ -146,7 +146,7 @@ export default class StyleSetterV2 extends React.PureComponent onStyleChange={this.onStyleChange} styleData={styleData} {...this.props} - > + /> )} {showModuleList.filter((item) => item == 'position').length > 0 && ( @@ -154,7 +154,7 @@ export default class StyleSetterV2 extends React.PureComponent onStyleChange={this.onStyleChange} styleData={styleData} {...this.props} - > + /> )} {showModuleList.filter((item) => item == 'border').length > 0 && ( @@ -162,7 +162,7 @@ export default class StyleSetterV2 extends React.PureComponent onStyleChange={this.onStyleChange} styleData={styleData} {...this.props} - > + /> )} {/* {initFlag && ( From 1046ac24a9ba18f0b133578df786cb284995275b Mon Sep 17 00:00:00 2001 From: liujuping Date: Mon, 27 Mar 2023 14:32:04 +0800 Subject: [PATCH 57/95] fix: fix array setter input error --- src/setter/array-setter/index.tsx | 58 +++++++++++++++++-------------- 1 file changed, 31 insertions(+), 27 deletions(-) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index 894dc99..57adc66 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { Component, Fragment } from 'react'; -import { common, SettingField } from '@alilc/lowcode-engine'; +import { common } from '@alilc/lowcode-engine'; import { Button, Message } from '@alifd/next'; -import { SetterType, FieldConfig, SetterConfig } from '@alilc/lowcode-types'; +import { IPublicModelSettingField, IPublicTypeSetterType, IPublicTypeFieldConfig, IPublicTypeSetterConfig } from '@alilc/lowcode-types'; import CustomIcon from '../../components/custom-icon'; import Sortable from './sortable'; import './style.less'; @@ -11,7 +11,7 @@ const { Title } = editorCabin; const { createSettingFieldView, PopupContext } = skeletonCabin; interface ArraySetterState { - items: SettingField[]; + items: IPublicModelSettingField[]; } /** @@ -21,7 +21,7 @@ interface ArraySetterState { * @param target * @param value */ -function onItemChange (target: SettingField, items: SettingField[], props: ArraySetterProps) { +function onItemChange (target: IPublicModelSettingField, items: IPublicModelSettingField[], props: ArraySetterProps) { const targetPath: Array = target?.path; if (!targetPath || targetPath.length < 2) { console.warn( @@ -53,9 +53,9 @@ function onItemChange (target: SettingField, items: SettingField[], props: Array interface ArraySetterProps { value: any[]; - field: SettingField; - itemSetter?: SetterType; - columns?: FieldConfig[]; + field: IPublicModelSettingField; + itemSetter?: IPublicTypeSetterType; + columns?: IPublicTypeFieldConfig[]; multiValue?: boolean; hideDescription?: boolean; onChange?: Function; @@ -74,23 +74,27 @@ export class ListSetter extends Component { } static getDerivedStateFromProps(props: ArraySetterProps, state: ArraySetterState) { - const items: SettingField[] = []; + const items: IPublicModelSettingField[] = []; const { value, field } = props; const valueLength = value && Array.isArray(value) ? value.length : 0; for (let i = 0; i < valueLength; i++) { - const item = field.createField({ - name: i.toString(), - setter: props.itemSetter, - forceInline: 1, - type: 'field', - extraProps: { - defaultValue: value[i], - setValue: (target: SettingField) => { - onItemChange(target, items, props); + let item = state.items[i]; + if (!item) { + item = field.createField({ + name: i.toString(), + setter: props.itemSetter, + forceInline: 1, + type: 'field', + extraProps: { + defaultValue: value[i], + setValue: (target: IPublicModelSettingField) => { + onItemChange(target, items, props); + }, }, - }, - }); + }); + } + item.setValue(value[i]) items.push(item); } @@ -103,7 +107,7 @@ export class ListSetter extends Component { const { onChange, value: oldValues } = this.props; const { items } = this.state; const values: any[] = []; - const newItems: SettingField[] = []; + const newItems: IPublicModelSettingField[] = []; sortedIds.map((id, index) => { const item = items[+id]; item.setKey(index); @@ -124,7 +128,7 @@ export class ListSetter extends Component { onChange?.(values); } - onRemove(removed: SettingField) { + onRemove(removed: IPublicModelSettingField) { const { onChange, value } = this.props; const { items } = this.state; const values = value || []; @@ -210,7 +214,7 @@ export class ListSetter extends Component { } } class ArrayItem extends Component<{ - field: SettingField; + field: IPublicModelSettingField; onRemove: () => void; scrollIntoView: boolean; }> { @@ -253,8 +257,8 @@ class TableSetter extends ListSetter { export default class ArraySetter extends Component<{ value: any[]; - field: SettingField; - itemSetter?: SetterType; + field: IPublicModelSettingField; + itemSetter?: IPublicTypeSetterType; mode?: 'popup' | 'list'; forceInline?: boolean; multiValue?: boolean; @@ -266,9 +270,9 @@ export default class ArraySetter extends Component<{ render() { const { mode, forceInline, ...props } = this.props; const { field, itemSetter } = props; - let columns: FieldConfig[] | undefined; - if ((itemSetter as SetterConfig)?.componentName === 'ObjectSetter') { - const items: FieldConfig[] = (itemSetter as any).props?.config?.items; + let columns: IPublicTypeFieldConfig[] | undefined; + if ((itemSetter as IPublicTypeSetterConfig)?.componentName === 'ObjectSetter') { + const items: IPublicTypeFieldConfig[] = (itemSetter as any).props?.config?.items; if (items && Array.isArray(items)) { columns = items.filter( (item) => item.isRequired || item.important || (item.setter as any)?.isRequired, From 928056ff75331571343acb9d51eeb9ef594faa16 Mon Sep 17 00:00:00 2001 From: liujuping Date: Wed, 29 Mar 2023 17:01:34 +0800 Subject: [PATCH 58/95] fix: fix array stter change slot render config error --- src/setter/array-setter/index.tsx | 1 - src/setter/object-setter/index.tsx | 36 +++++++++++++++++------------- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index 57adc66..6ed7d13 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -94,7 +94,6 @@ export class ListSetter extends Component { }, }); } - item.setValue(value[i]) items.push(item); } diff --git a/src/setter/object-setter/index.tsx b/src/setter/object-setter/index.tsx index e132ea7..d782e31 100644 --- a/src/setter/object-setter/index.tsx +++ b/src/setter/object-setter/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { Component, Fragment } from 'react'; import { Button } from '@alifd/next'; -import { common, SettingField } from '@alilc/lowcode-engine'; -import { SetterType, FieldConfig, CustomView, TitleContent } from '@alilc/lowcode-types'; +import { common } from '@alilc/lowcode-engine'; +import { IPublicTypeSetterType, IPublicModelSettingField, IPublicTypeFieldConfig, IPublicTypeCustomView, IPublicTypeTitleContent } from '@alilc/lowcode-types'; import CustomIcon from '../../components/custom-icon'; import './index.less'; @@ -12,8 +12,8 @@ const { isSettingField } = designerCabin; const { createSettingFieldView, PopupContext } = skeletonCabin; export default class ObjectSetter extends Component<{ - field: SettingField; - descriptor?: TitleContent; + field: IPublicModelSettingField; + descriptor?: IPublicTypeTitleContent; config: ObjectSetterConfig; mode?: 'popup' | 'form'; // 1: in tablerow 2: in listrow 3: in column-cell @@ -36,27 +36,28 @@ export default class ObjectSetter extends Component<{ } interface ObjectSetterConfig { - items?: FieldConfig[]; - extraSetter?: SetterType; + items?: IPublicTypeFieldConfig[]; + extraSetter?: IPublicTypeSetterType; } interface RowSetterProps { - field: SettingField; - descriptor?: TitleContent; + value: any; + field: IPublicModelSettingField; + descriptor?: IPublicTypeTitleContent; config: ObjectSetterConfig; columns?: number; primaryButton?: boolean; } interface RowSetterState { - items: SettingField[]; - descriptor?: TitleContent; + items: IPublicModelSettingField[]; + descriptor?: IPublicTypeTitleContent; } function getItemsFromProps(props: RowSetterProps) { const { config, field, columns } = props; const { extraProps } = field; - const items: SettingField[] = []; + const items: IPublicModelSettingField[] = []; if (columns && config?.items) { const l = Math.min(config.items.length, columns); for (let i = 0; i < l; i++) { @@ -98,7 +99,7 @@ class RowSetter extends Component { constructor(props: RowSetterProps) { super(props); const { descriptor, field } = props; - const items: SettingField[] = getItemsFromProps(props); + const items: IPublicModelSettingField[] = getItemsFromProps(props); this.state = { items }; let firstRun = true; @@ -123,10 +124,13 @@ class RowSetter extends Component { }); } - shouldComponentUpdate(_: any, nextState: any) { + shouldComponentUpdate(nextProps: any, nextState: any) { if (this.state.descriptor !== nextState.descriptor) { return true; } + if (this.props.value !== nextProps.value) { + return true; + } return false; } @@ -187,11 +191,11 @@ class RowSetter extends Component { } interface FormSetterProps { - field: SettingField; + field: IPublicModelSettingField; config: ObjectSetterConfig; } class FormSetter extends Component { - private items: (SettingField | CustomView)[]; + private items: (IPublicModelSettingField | IPublicTypeCustomView)[]; constructor(props: RowSetterProps) { super(props); @@ -199,7 +203,7 @@ class FormSetter extends Component { const { extraProps } = field; if (Array.isArray(field.items) && field.items.length > 0) { - field.items.forEach((item: SettingField | CustomView) => { + field.items.forEach((item: IPublicModelSettingField | IPublicTypeCustomView) => { if (isSettingField(item)) { const originalSetValue = item.extraProps.setValue; item.extraProps.setValue = (...args) => { From efe4878d3009c356119fed306f11f1511668d38e Mon Sep 17 00:00:00 2001 From: liujuping Date: Thu, 30 Mar 2023 16:10:23 +0800 Subject: [PATCH 59/95] fix: fix object-setter always create new field --- src/setter/object-setter/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/setter/object-setter/index.tsx b/src/setter/object-setter/index.tsx index d782e31..baeb1c3 100644 --- a/src/setter/object-setter/index.tsx +++ b/src/setter/object-setter/index.tsx @@ -54,7 +54,7 @@ interface RowSetterState { descriptor?: IPublicTypeTitleContent; } -function getItemsFromProps(props: RowSetterProps) { +function getItemsFromProps(props: RowSetterProps, state?: RowSetterState) { const { config, field, columns } = props; const { extraProps } = field; const items: IPublicModelSettingField[] = []; @@ -63,7 +63,7 @@ function getItemsFromProps(props: RowSetterProps) { for (let i = 0; i < l; i++) { const conf = config.items[i]; if (conf.isRequired || conf.important || (conf.setter as any)?.isRequired) { - const item = field.createField({ + const item = state?.items?.filter(d => d.name === conf.name)?.[0] || field.createField({ ...conf, // in column-cell forceInline: 3, @@ -90,9 +90,9 @@ class RowSetter extends Component { items: [], }; - static getDerivedStateFromProps(props: RowSetterProps) { + static getDerivedStateFromProps(props: RowSetterProps, state: RowSetterState) { return { - items: getItemsFromProps(props), + items: getItemsFromProps(props, state), }; } From 1893aa56d9a863dc0608be432c1cdef0cd4e2607 Mon Sep 17 00:00:00 2001 From: jingyu Date: Tue, 4 Apr 2023 15:32:34 +0800 Subject: [PATCH 60/95] =?UTF-8?q?fix:=20css=20=E6=92=A4=E9=94=80=E4=B8=A2?= =?UTF-8?q?=E5=A4=B1=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/css-code/index.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/setter/style-setter/components/css-code/index.tsx b/src/setter/style-setter/components/css-code/index.tsx index c66d764..856fc64 100644 --- a/src/setter/style-setter/components/css-code/index.tsx +++ b/src/setter/style-setter/components/css-code/index.tsx @@ -4,6 +4,7 @@ import { StyleData } from '../../utils/types'; import { parseToCssCode, parseToStyleData } from '../../utils'; import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor'; import Icon from '../../components/icon'; + interface CodeProps { styleData: StyleData | any; onStyleDataChange: (val: any) => void; @@ -123,6 +124,7 @@ export default class CssCode extends React.Component { // 挂载时先适配高度 updateEditorHeight() }; + return (
{ justifyContent: 'space-between', }} > - +
- this.updateCode(newCode)} - editorDidMount={handleEditorMount} - height={height} - /> + {this.state.cssCode && ( + this.updateCode(newCode)} + editorDidMount={handleEditorMount} + height={height} + /> + )}
); } From 40dbaea709bcdf03bcbca33beea0ec31043fa5f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=97=E4=BA=AC-=E9=87=91=E5=BB=BA=E6=96=B0?= Date: Mon, 10 Apr 2023 15:40:30 +0800 Subject: [PATCH 61/95] fix: fix get items error in row setter --- src/setter/object-setter/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/setter/object-setter/index.tsx b/src/setter/object-setter/index.tsx index baeb1c3..e86085a 100644 --- a/src/setter/object-setter/index.tsx +++ b/src/setter/object-setter/index.tsx @@ -60,7 +60,7 @@ function getItemsFromProps(props: RowSetterProps, state?: RowSetterState) { const items: IPublicModelSettingField[] = []; if (columns && config?.items) { const l = Math.min(config.items.length, columns); - for (let i = 0; i < l; i++) { + for (let i = 0; i < config.items.length; i++) { const conf = config.items[i]; if (conf.isRequired || conf.important || (conf.setter as any)?.isRequired) { const item = state?.items?.filter(d => d.name === conf.name)?.[0] || field.createField({ @@ -77,6 +77,9 @@ function getItemsFromProps(props: RowSetterProps, state?: RowSetterState) { }; items.push(item); } + if (items.length >= l) { + break; + } } } return items; From ec4d8adcaaadc371553acd3a64dd0564b8454968 Mon Sep 17 00:00:00 2001 From: jingyu Date: Thu, 13 Apr 2023 11:54:09 +0800 Subject: [PATCH 62/95] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81css=E5=8F=98?= =?UTF-8?q?=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../style-setter/components/number/index.less | 28 +++++---- .../style-setter/components/number/index.tsx | 11 +++- .../style-setter/pro/background/index.tsx | 45 +++++++------- .../style-setter/pro/layout/LayoutInput.tsx | 14 +++++ src/setter/style-setter/pro/layout/index.less | 9 +++ .../style-setter/pro/layout/layoutBox.tsx | 59 +++++++++++-------- src/setter/style-setter/utils/index.tsx | 20 ++++--- 7 files changed, 120 insertions(+), 66 deletions(-) create mode 100644 src/setter/style-setter/pro/layout/LayoutInput.tsx diff --git a/src/setter/style-setter/components/number/index.less b/src/setter/style-setter/components/number/index.less index ba0bfbb..a3e02ce 100644 --- a/src/setter/style-setter/components/number/index.less +++ b/src/setter/style-setter/components/number/index.less @@ -1,11 +1,19 @@ +.next-select-trigger { + min-width: 1px; +} +.next-select-inner { + min-width: 1px !important; +} +.next-input-text-field { + padding: 0 2px !important; +} - .next-select-trigger{ - min-width: 1px; - } - .next-select-inner{ - min-width: 1px !important - } - .next-input-text-field{ - padding: 0 2px !important - } - +.ext-css-variable-ghost { + width: 70px; + line-height: 42px; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 12px; + color: #666; + overflow: hidden; +} diff --git a/src/setter/style-setter/components/number/index.tsx b/src/setter/style-setter/components/number/index.tsx index fd2dc69..babc142 100644 --- a/src/setter/style-setter/components/number/index.tsx +++ b/src/setter/style-setter/components/number/index.tsx @@ -9,13 +9,15 @@ import { getPlaceholderPropertyValue, unifyStyle, getUnit, + isCssVarBind, } from '../../utils'; import './index.less'; + interface numberProps { styleKey: string; styleData: StyleData | any; onStyleChange?: onStyleChange; - unit?: string | Array; + unit?: string | string[]; min?: number; max?: number; style?: any; @@ -70,6 +72,7 @@ export default (props: numberProps) => { useEffect(() => { initData(props); }, []); + let value = unit ? removeUnit(styleData[styleKey]) : styleData[styleKey]; let curUnit = unit ? getUnit(styleData[styleKey]) || 'px' : ''; // 不加multiprop一样，加了单独处理 @@ -116,6 +119,12 @@ export default (props: numberProps) => { /> ); }, [unit]); + const originValue = styleData[styleKey] + if (isCssVarBind(originValue)) { + return
+ {originValue} +
; + } return ( { const [bgRepeatType, setBgRepeatType] = useState(null); const [bgPositionType, setBgPositionType] = useState(''); // 背景类型切换 - const onBgTypeChange = (styleDataList: Array) => { + const onBgTypeChange = (styleDataList: StyleData[]) => { if (styleDataList) { setBgType(styleDataList[0].value); } @@ -39,7 +39,7 @@ export default (props: fontProps) => { ]); }; // backgroundSize类型切换 - const onBgSizeTypeChange = (styleDataList: Array) => { + const onBgSizeTypeChange = (styleDataList: StyleData[]) => { const backgroundSize = 'backgroundSize'; onStyleChange([ { @@ -75,20 +75,20 @@ export default (props: fontProps) => { let styleDataList; if (styleData) { let unifiedValue = unit ? addUnit(value, unit) : value; - if (unifiedValue === null || unifiedValue === undefined) unifiedValue = 'auto'; //空样式默认为auto + if (unifiedValue === null || unifiedValue === undefined) unifiedValue = 'auto'; // 空样式默认为auto if (direction === 'width') { styleDataList = [ { styleKey, value: - unifiedValue !== 'auto' || height !== 'auto' ? unifiedValue + ' ' + height : null, // 都为auto则删除样式 + unifiedValue !== 'auto' || height !== 'auto' ? `${unifiedValue } ${ height}` : null, // 都为auto则删除样式 }, ]; } else { styleDataList = [ { styleKey, - value: unifiedValue !== 'auto' || width !== 'auto' ? width + ' ' + unifiedValue : null, + value: unifiedValue !== 'auto' || width !== 'auto' ? `${width } ${ unifiedValue}` : null, }, ]; } @@ -96,7 +96,7 @@ export default (props: fontProps) => { } }; // backgroundRepeat切换 - const onBgRepeatChange = (styleDataList: Array) => { + const onBgRepeatChange = (styleDataList: StyleData[]) => { if (styleDataList) { const value = styleDataList[0]?.value; setBgRepeatType(value); @@ -123,11 +123,11 @@ export default (props: fontProps) => { const [width = 'auto', height = 'auto'] = bgSizeArray; let styleDataList; if (styleData) { - let unifiedValue = /^-?[0-9]\d*$/.test(value) ? value + unit : value; //正则匹配非0数字并加单位 + let unifiedValue = /^-?[0-9]\d*$/.test(value) ? value + unit : value; // 正则匹配非0数字并加单位 if ( unifiedValue === null || unifiedValue === undefined || - unifiedValue.replace(/\s*/g, '') === '' //空格和空字符串也为空值 + unifiedValue.replace(/\s*/g, '') === '' // 空格和空字符串也为空值 ){ unifiedValue = 'auto'; } @@ -136,14 +136,14 @@ export default (props: fontProps) => { { styleKey, value: - unifiedValue !== 'auto' || height !== 'auto' ? unifiedValue + ' ' + height : null, + unifiedValue !== 'auto' || height !== 'auto' ? `${unifiedValue } ${ height}` : null, }, ]; } else { styleDataList = [ { styleKey, - value: unifiedValue !== 'auto' || width !== 'auto' ? width + ' ' + unifiedValue : null, + value: unifiedValue !== 'auto' || width !== 'auto' ? `${width } ${ unifiedValue}` : null, }, ]; } @@ -185,7 +185,7 @@ export default (props: fontProps) => { }, [styleData]); const formatBgImgUrl = (url: string) => { if (url && url != '') { - return 'url(' + url + ')'; + return `url(${ url })`; } else { return null; } @@ -195,7 +195,7 @@ export default (props: fontProps) => { if (styleUrl) { // const reg = /^url\(.*\)/; // var result = styleUrl.match(reg); - let newUrl = styleUrl.substring(styleUrl.indexOf('(') + 1, styleUrl.indexOf(')')); + const newUrl = styleUrl.substring(styleUrl.indexOf('(') + 1, styleUrl.indexOf(')')); return newUrl; // return styleUrl.substring( @@ -216,11 +216,11 @@ export default (props: fontProps) => { {...props} onStyleChange={onBgTypeChange} value={bgType} - > + /> {bgType == 'color' && ( - + )} @@ -230,7 +230,7 @@ export default (props: fontProps) => { innerBefore={} placeholder="输入图片url" style={{ width: '100%' }} - value={backToBgImgUrl(styleData['backgroundImage'])} + value={backToBgImgUrl(styleData.backgroundImage)} onChange={onBgImageChange} /> @@ -243,7 +243,7 @@ export default (props: fontProps) => { {...props} onStyleChange={onBgSizeTypeChange} value={bgSizeType} - > + /> {bgSizeType == backgroundSizeMap.default && (
@@ -329,7 +329,7 @@ export default (props: fontProps) => { multiProp={1} defaultPlaceholder={'auto'} /> - +
@@ -341,7 +341,7 @@ export default (props: fontProps) => { {...props} onStyleChange={onBgRepeatChange} value={bgRepeatType} - > + /> )} @@ -354,13 +354,14 @@ export default (props: fontProps) => { /> onOpacityChange('opacity', isEmptyValue(val) ? null : val / 100)} innerAfter={'%'} - > + /> diff --git a/src/setter/style-setter/pro/layout/LayoutInput.tsx b/src/setter/style-setter/pro/layout/LayoutInput.tsx new file mode 100644 index 0000000..34dade9 --- /dev/null +++ b/src/setter/style-setter/pro/layout/LayoutInput.tsx @@ -0,0 +1,14 @@ +import { Input } from '@alifd/next'; +import { InputProps } from '@alifd/next/types/input'; +import React, { FC } from 'react'; +import { isCssVarBind } from '../../utils'; + +const LayoutInput: FC = (props) => { + const { value } = props; + if (isCssVarBind(value)) { + return null + } + return ; +}; + +export default LayoutInput; diff --git a/src/setter/style-setter/pro/layout/index.less b/src/setter/style-setter/pro/layout/index.less index 7ed0e70..37d025d 100644 --- a/src/setter/style-setter/pro/layout/index.less +++ b/src/setter/style-setter/pro/layout/index.less @@ -319,3 +319,12 @@ } } } + + +.ext-css-layout-input { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; +} diff --git a/src/setter/style-setter/pro/layout/layoutBox.tsx b/src/setter/style-setter/pro/layout/layoutBox.tsx index b1bd27d..5576017 100644 --- a/src/setter/style-setter/pro/layout/layoutBox.tsx +++ b/src/setter/style-setter/pro/layout/layoutBox.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import './index.less'; -import { Input } from '@alifd/next'; import { StyleData, onStyleChange } from '../../utils/types'; -import { addUnit, removeUnit } from '../../utils'; +import { addUnit, isCssVarBind, removeUnit as originRemoveUnit } from '../../utils'; +import LayoutInput from './LayoutInput'; const KEY_ARROW_DOWN = 'ArrowDown'; const KEY_ARROW_UP = 'ArrowUp'; @@ -14,6 +14,13 @@ interface layoutBoxProps { layoutPropsConfig: any; } +const removeUnit = (value: any) => { + if (isCssVarBind(value)) { + return value; + } + return originRemoveUnit(value); +} + export default (props: layoutBoxProps) => { const { onStyleChange, unit = 'px', styleData, layoutPropsConfig } = props; @@ -63,45 +70,45 @@ export default (props: layoutBoxProps) => { {layoutPropsConfig.isShowMargin && ( <>
- onInputChange('marginTop', val)} onKeyDown={(e) => onInputKeyDown(e.key, 'marginTop')} - > + />
- onInputChange('marginRight', val)} onKeyDown={(e) => onInputKeyDown(e.key, 'marginRight')} - > + />
MARGIN - onInputChange('marginBottom', val)} onKeyDown={(e) => onInputKeyDown(e.key, 'marginBottom')} - > + />
- onInputChange('marginLeft', val)} onKeyDown={(e) => onInputKeyDown(e.key, 'marginLeft')} - > + />
)} @@ -109,45 +116,45 @@ export default (props: layoutBoxProps) => { {layoutPropsConfig.isShowPadding && ( <>
- onInputChange('paddingTop', val)} onKeyDown={(e) => onInputKeyDown(e.key, 'paddingTop')} - > + />
- onInputChange('paddingRight', val)} onKeyDown={(e) => onInputKeyDown(e.key, 'paddingRight')} - > + />
PADDING - onInputChange('paddingBottom', val)} onKeyDown={(e) => onInputKeyDown(e.key, 'paddingBottom')} - > + />
- onInputChange('paddingLeft', val)} onKeyDown={(e) => onInputKeyDown(e.key, 'paddingLeft')} - > + />
)} diff --git a/src/setter/style-setter/utils/index.tsx b/src/setter/style-setter/utils/index.tsx index 224ef98..6653208 100644 --- a/src/setter/style-setter/utils/index.tsx +++ b/src/setter/style-setter/utils/index.tsx @@ -64,7 +64,7 @@ export function toLine(styleKey: string) { } export function toHump(name: String) { - return name.replace(/\-(\w)/g, function (all, letter) { + return name.replace(/\-(\w)/g, (all, letter) => { return letter.toUpperCase(); }); } @@ -84,10 +84,10 @@ export function hexify(color: string) { const g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255); const b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255); return ( - '#' + - ('0' + r.toString(16)).slice(-2) + - ('0' + g.toString(16)).slice(-2) + - ('0' + b.toString(16)).slice(-2) + `#${ + ('0' + r.toString(16)).slice(-2) + }${('0' + g.toString(16)).slice(-2) + }${('0' + b.toString(16)).slice(-2)}` ); } @@ -144,11 +144,11 @@ export const unifyValue = (value: string) => { // 规范手动输入的css样式 export const unifyStyle = (value: string) => { if (!value) return; - //首部空格去除 + // 首部空格去除 if (value.substring(0, 1) === ' ') { value.replace(/\s+/, ''); } - //多属性间重复字符串去除 + // 多属性间重复字符串去除 value.replace(/\s+/g, ' '); return value; }; @@ -159,3 +159,9 @@ export const getUnit = (value: string) => { return value.replace(/^-?[0-9]\d*/g, '') } } + +export function isCssVarBind(value: any) { + if (typeof value === 'string') { + return /\$var\(/.test(value); + } +} From 5cb101b7fba5e19c1869a603f25a5c7d11c86d50 Mon Sep 17 00:00:00 2001 From: jingyu Date: Thu, 13 Apr 2023 13:50:22 +0800 Subject: [PATCH 63/95] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9css=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E5=8C=B9=E9=85=8D=E8=A7=84=E5=88=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/style-setter/utils/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/setter/style-setter/utils/index.tsx b/src/setter/style-setter/utils/index.tsx index 6653208..bb35d5e 100644 --- a/src/setter/style-setter/utils/index.tsx +++ b/src/setter/style-setter/utils/index.tsx @@ -85,9 +85,9 @@ export function hexify(color: string) { const b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255); return ( `#${ - ('0' + r.toString(16)).slice(-2) - }${('0' + g.toString(16)).slice(-2) - }${('0' + b.toString(16)).slice(-2)}` + (`0${ r.toString(16)}`).slice(-2) + }${(`0${ g.toString(16)}`).slice(-2) + }${(`0${ b.toString(16)}`).slice(-2)}` ); } @@ -162,6 +162,6 @@ export const getUnit = (value: string) => { export function isCssVarBind(value: any) { if (typeof value === 'string') { - return /\$var\(/.test(value); + return /var\(/.test(value); } } From 7ac3b1bde29f7478070748f181ad1e3a8a3776d3 Mon Sep 17 00:00:00 2001 From: liujuping Date: Thu, 13 Apr 2023 17:12:52 +0800 Subject: [PATCH 64/95] fix: fix array setter sort error --- src/setter/array-setter/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index 6ed7d13..c99851b 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -114,6 +114,9 @@ export class ListSetter extends Component { newItems[index] = item; return id; }); + this.setState({ + items: newItems, + }); onChange?.(values); } From 51407878a633aff11833053033e33aa1871fc5cd Mon Sep 17 00:00:00 2001 From: ylfeng250 <1119030015@qq.com> Date: Mon, 17 Apr 2023 00:34:14 +0800 Subject: [PATCH 65/95] fix: start value has mixed support, consider using flex-start instead --- src/setter/slot-setter/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/setter/slot-setter/index.less b/src/setter/slot-setter/index.less index b3a28fa..f6bbfcb 100644 --- a/src/setter/slot-setter/index.less +++ b/src/setter/slot-setter/index.less @@ -1,6 +1,6 @@ .lc-setter-slot { display: flex; - align-items: start; + align-items: flex-start; .lc-slot-params { margin-top: 5px; } From 9533dc4b560ec8b804fd47eea5bf3cfdc20bdba6 Mon Sep 17 00:00:00 2001 From: jingyu Date: Mon, 17 Apr 2023 16:32:23 +0800 Subject: [PATCH 66/95] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BA=A4?= =?UTF-8?q?=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../style-setter/pro/background/index.tsx | 1 + src/setter/style-setter/pro/layout/index.less | 27 +++++++++++++++++++ .../style-setter/pro/layout/layoutBox.tsx | 17 ++++++------ .../style-setter/pro/position/index.tsx | 11 +++++--- 4 files changed, 44 insertions(+), 12 deletions(-) diff --git a/src/setter/style-setter/pro/background/index.tsx b/src/setter/style-setter/pro/background/index.tsx index d92fc95..ce61156 100644 --- a/src/setter/style-setter/pro/background/index.tsx +++ b/src/setter/style-setter/pro/background/index.tsx @@ -348,6 +348,7 @@ export default (props: fontProps) => {
onOpacityChange('opacity', parseInt(val) / 100)} diff --git a/src/setter/style-setter/pro/layout/index.less b/src/setter/style-setter/pro/layout/index.less index 37d025d..9bfc217 100644 --- a/src/setter/style-setter/pro/layout/index.less +++ b/src/setter/style-setter/pro/layout/index.less @@ -1,3 +1,5 @@ +@bindColor: #bcd1fa; + .layout-style-container { .inner-row-contaienr { display: flex; @@ -44,6 +46,10 @@ -webkit-transition: all 0.3s ease; transition: all 0.3s ease; + &.css-var-bind { + border-top: 20px solid @bindColor; + } + .next-input.next-medium { position: absolute; left: 0; @@ -77,6 +83,9 @@ border-right: 20px solid #d6e4ff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; + &.css-var-bind { + border-right: 20px solid @bindColor; + } .next-input.next-medium { position: absolute; top: 0; @@ -116,6 +125,9 @@ border-bottom: 20px solid #d6e4ff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; + &.css-var-bind { + border-bottom: 20px solid @bindColor; + } .next-input.next-medium { position: absolute; left: 0; @@ -147,6 +159,9 @@ border-left: 20px solid #d6e4ff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; + &.css-var-bind { + border-left: 20px solid @bindColor; + } .next-input.next-medium { position: absolute; top: 0; @@ -186,6 +201,9 @@ border-top: 20px solid #d6e4ff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; + &.css-var-bind { + border-top: 20px solid @bindColor; + } .next-input.next-medium { position: absolute; left: 0; @@ -219,6 +237,9 @@ border-bottom: 20px solid #d6e4ff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; + &.css-var-bind { + border-bottom: 20px solid @bindColor; + } .next-input.next-medium { position: absolute; left: 0; @@ -252,6 +273,9 @@ border-right: 20px solid #d6e4ff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; + &.css-var-bind { + border-right: 20px solid @bindColor; + } .next-input.next-medium { position: absolute; top: 0; @@ -291,6 +315,9 @@ border-left: 20px solid #d6e4ff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; + &.css-var-bind { + border-left: 20px solid @bindColor; + } .next-input.next-medium { position: absolute; top: 0; diff --git a/src/setter/style-setter/pro/layout/layoutBox.tsx b/src/setter/style-setter/pro/layout/layoutBox.tsx index 5576017..08e52ba 100644 --- a/src/setter/style-setter/pro/layout/layoutBox.tsx +++ b/src/setter/style-setter/pro/layout/layoutBox.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import cls from 'classnames'; import './index.less'; import { StyleData, onStyleChange } from '../../utils/types'; import { addUnit, isCssVarBind, removeUnit as originRemoveUnit } from '../../utils'; @@ -69,7 +70,7 @@ export default (props: layoutBoxProps) => {
{layoutPropsConfig.isShowMargin && ( <> -
+
{ onKeyDown={(e) => onInputKeyDown(e.key, 'marginTop')} />
-
+
{ onKeyDown={(e) => onInputKeyDown(e.key, 'marginRight')} />
-
+
MARGIN { onKeyDown={(e) => onInputKeyDown(e.key, 'marginBottom')} />
-
+
{ {layoutPropsConfig.isShowPadding && ( <> -
+
{ onKeyDown={(e) => onInputKeyDown(e.key, 'paddingTop')} />
-
+
{ onKeyDown={(e) => onInputKeyDown(e.key, 'paddingRight')} />
-
+
PADDING { onKeyDown={(e) => onInputKeyDown(e.key, 'paddingBottom')} />
-
+
{ { this.fromMixedSetterSelect = true; const { field } = this.props; - if (name !== this.used) { - // reset value - field.setValue(undefined); - } + if (name === 'VariableSetter') { const setterComponent = getSetter('VariableSetter')?.component as any; - if (name !== this.used) { - field.setValue({ - type: 'JSExpression' - }); - } if (setterComponent && setterComponent.isPopup) { setterComponent.show({ prop: field }); this.syncSelectSetter(name); return; } + } else { + // 变量类型直接设undefined会引起初始值变化 + if (name !== this.used ) { + // reset value + field.setValue(undefined); + } } if (name === this.used) { return; diff --git a/src/setter/select-setter/index.tsx b/src/setter/select-setter/index.tsx index c8615bd..a7b266e 100644 --- a/src/setter/select-setter/index.tsx +++ b/src/setter/select-setter/index.tsx @@ -11,6 +11,8 @@ interface SelectSetterProps { * 展开后是否能搜索 */ showSearch?: boolean; + // 是否可以清除 + hasClear?:boolean } interface SelectSetterState { @@ -56,7 +58,7 @@ export default class SelectSetter extends PureComponent ); } From bdd5ade4c321cd9f8cdab4033acc9d14e97ff691 Mon Sep 17 00:00:00 2001 From: liujuping Date: Thu, 28 Sep 2023 14:28:11 +0800 Subject: [PATCH 79/95] style: suport engine css varible --- .../plugin-variable-bind-dialog/index.less | 39 +++++++++---------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/src/plugin/plugin-variable-bind-dialog/index.less b/src/plugin/plugin-variable-bind-dialog/index.less index a4f4443..494b2e8 100644 --- a/src/plugin/plugin-variable-bind-dialog/index.less +++ b/src/plugin/plugin-variable-bind-dialog/index.less @@ -5,11 +5,11 @@ .dialog-small-title { font-weight: 700; margin-bottom: 8px; - color: rgb(0, 0, 0); + color: var(--color-title, rgb(0, 0, 0)); display: flex; justify-content: space-between; .error-message{ - color:rgba(255,97,96); + color:var(--color-function-error, rgba(255,97,96)); font-weight: 400; } } @@ -17,7 +17,7 @@ .dialog-help-tip-input { height: 180px; - border: 1px solid rgba(31, 56, 88, 0.3); + border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.3)); border-top: none; border-radius: 0 0 3px 3px; padding: 8px; @@ -35,7 +35,7 @@ float: left; .vs-variable-selector-inner { - border: 1px solid rgba(31, 56, 88, 0.3); + border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.3)); display: flex; height: 389px; border-radius: 3px; @@ -57,16 +57,16 @@ position: relative; white-space: nowrap; &:hover { - background: rgba(128, 128, 128, 0.15); + background: var(--color-block-background-light, rgba(128, 128, 128, 0.15)); } } .active { - background: rgba(128, 128, 128, 0.15); + background: var(--color-block-background-light, rgba(128, 128, 128, 0.15)); } } .vs-variable-selector-category { width: 110px; - border-right: 1px solid rgba(31, 56, 88, 0.3); + border-right: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.3)); height: 100%; overflow: auto; } @@ -88,7 +88,7 @@ .dialog-left-context { width: 270px; height: 392px; - border: 1px solid rgba(31, 56, 88, 0.3); + border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.3)); border-radius: 3px; .variable-type-container { @@ -110,7 +110,7 @@ } .select-item-active { - background: rgba(128, 128, 128, 0.15); + background: var(--color-block-background-light, rgba(128, 128, 128, 0.15)); } .event-select-container { @@ -139,7 +139,7 @@ } .variable-item:hover { - background-color: rgba(31, 56, 88, 0.06); + background-color: var(--color-block-background-light, rgba(31, 56, 88, 0.06)); } } } @@ -161,7 +161,7 @@ .editor-type-tag { width: 18px; height: 18px; - background-color: rgba(17, 105, 247, 0.18); + background-color: var(--color-layer-mask-background, rgba(17, 105, 247, 0.18)); border-radius: 2px; display: flex; justify-content: center; @@ -173,16 +173,15 @@ } .editor-context{ - border: 1px solid rgba(31, 56, 88, 0.3) ; + border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.3)); padding: 5px 5px 0px 15px; border-top-right-radius: 3px; border-top-left-radius: 3px; } .editor-context-error{ - border-color:rgba(255,97,96,0.7); + border-color:var(--color-function-error, rgba(255,97,96,0.7)); } - } } @@ -210,10 +209,10 @@ bottom: 10px; right: 286px; z-index: 100; - background: #fff; + background: var(--color-block-background-normal, #fff); padding: 8px 12px; border-radius: 3px; - border: 1px solid #ddd; + border: 1px solid var(--color-field-border, #ddd); box-shadow: 0 0 8px #aaa; font-size: 14px; font-weight: 700; @@ -224,14 +223,14 @@ } .next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label { - color: #fff; - background-color: #4576f5; + color: var(--color-text-reverse, #fff); + background-color: var(--color-brand, #4576f5); } .lc-code-control:hover { - border-color: rgba(0, 0, 0, 0); + border-color: transparent; } .lc-code-control.ve-focused { - border-color: rgba(0, 0, 0, 0); + border-color: transparent; } From 84e55ce68cd62782d42c2a7bb7db00063d678f59 Mon Sep 17 00:00:00 2001 From: Kuangsong <519089437@qq.com> Date: Wed, 18 Oct 2023 11:21:10 +0800 Subject: [PATCH 80/95] =?UTF-8?q?feat:=20style-setter=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=A4=9A=E8=AF=AD=E8=A8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/css-code/index.tsx | 5 +- .../components/css-code/locale/en-US.json | 3 + .../components/css-code/locale/index.ts | 16 ++ .../components/css-code/locale/zh-CN.json | 3 + .../style-setter/components/row/index.less | 2 + src/setter/style-setter/index.tsx | 12 +- .../style-setter/pro/background/index.tsx | 18 ++- .../pro/background/locale/en-US.json | 83 +++++++++++ .../pro/background/locale/index.ts | 16 ++ .../{config.json => locale/zh-CN.json} | 7 + src/setter/style-setter/pro/border/index.tsx | 16 +- .../style-setter/pro/border/locale/en-US.json | 63 ++++++++ .../style-setter/pro/border/locale/index.ts | 16 ++ .../border/{config.json => locale/zh-CN.json} | 12 +- src/setter/style-setter/pro/font/index.tsx | 18 ++- .../style-setter/pro/font/locale/en-US.json | 75 ++++++++++ .../style-setter/pro/font/locale/index.ts | 16 ++ .../font/{config.json => locale/zh-CN.json} | 15 +- src/setter/style-setter/pro/layout/index.tsx | 10 +- .../style-setter/pro/layout/locale/en-US.json | 140 ++++++++++++++++++ .../style-setter/pro/layout/locale/index.ts | 16 ++ .../layout/{config.json => locale/zh-CN.json} | 47 +++--- .../style-setter/pro/position/index.tsx | 6 +- .../pro/position/locale/en-US.json | 103 +++++++++++++ .../style-setter/pro/position/locale/index.ts | 16 ++ .../{config.json => locale/zh-CN.json} | 25 ++-- .../style-setter/pro/position/positionBox.tsx | 4 +- 27 files changed, 688 insertions(+), 75 deletions(-) create mode 100644 src/setter/style-setter/components/css-code/locale/en-US.json create mode 100644 src/setter/style-setter/components/css-code/locale/index.ts create mode 100644 src/setter/style-setter/components/css-code/locale/zh-CN.json create mode 100644 src/setter/style-setter/pro/background/locale/en-US.json create mode 100644 src/setter/style-setter/pro/background/locale/index.ts rename src/setter/style-setter/pro/background/{config.json => locale/zh-CN.json} (92%) create mode 100644 src/setter/style-setter/pro/border/locale/en-US.json create mode 100644 src/setter/style-setter/pro/border/locale/index.ts rename src/setter/style-setter/pro/border/{config.json => locale/zh-CN.json} (82%) create mode 100644 src/setter/style-setter/pro/font/locale/en-US.json create mode 100644 src/setter/style-setter/pro/font/locale/index.ts rename src/setter/style-setter/pro/font/{config.json => locale/zh-CN.json} (79%) create mode 100644 src/setter/style-setter/pro/layout/locale/en-US.json create mode 100644 src/setter/style-setter/pro/layout/locale/index.ts rename src/setter/style-setter/pro/layout/{config.json => locale/zh-CN.json} (69%) create mode 100644 src/setter/style-setter/pro/position/locale/en-US.json create mode 100644 src/setter/style-setter/pro/position/locale/index.ts rename src/setter/style-setter/pro/position/{config.json => locale/zh-CN.json} (78%) diff --git a/src/setter/style-setter/components/css-code/index.tsx b/src/setter/style-setter/components/css-code/index.tsx index 856fc64..88af18d 100644 --- a/src/setter/style-setter/components/css-code/index.tsx +++ b/src/setter/style-setter/components/css-code/index.tsx @@ -4,12 +4,15 @@ import { StyleData } from '../../utils/types'; import { parseToCssCode, parseToStyleData } from '../../utils'; import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor'; import Icon from '../../components/icon'; +import { intlLocal } from './locale'; interface CodeProps { styleData: StyleData | any; onStyleDataChange: (val: any) => void; } +const cssConfig = intlLocal(); + const defaultEditorOption = { readOnly: false, // automaticLayout: true, @@ -137,7 +140,7 @@ export default class CssCode extends React.Component { >
{this.state.cssCode && ( diff --git a/src/setter/style-setter/components/css-code/locale/en-US.json b/src/setter/style-setter/components/css-code/locale/en-US.json new file mode 100644 index 0000000..d144d87 --- /dev/null +++ b/src/setter/style-setter/components/css-code/locale/en-US.json @@ -0,0 +1,3 @@ +{ + "save": "Save" +} diff --git a/src/setter/style-setter/components/css-code/locale/index.ts b/src/setter/style-setter/components/css-code/locale/index.ts new file mode 100644 index 0000000..55bea7e --- /dev/null +++ b/src/setter/style-setter/components/css-code/locale/index.ts @@ -0,0 +1,16 @@ +import { common } from '@alilc/lowcode-engine'; +import enUS from './en-US.json'; +import zhCN from './zh-CN.json'; + +const intlLocal = () => { + const { getLocale } = common.utils.createIntl(); + const locale: string = getLocale() || 'zh-CN'; + const localeSource: any = { + 'en-US': enUS, + 'zh-CN': zhCN, + }; + return localeSource[locale]; +} + + +export { intlLocal }; diff --git a/src/setter/style-setter/components/css-code/locale/zh-CN.json b/src/setter/style-setter/components/css-code/locale/zh-CN.json new file mode 100644 index 0000000..50fb480 --- /dev/null +++ b/src/setter/style-setter/components/css-code/locale/zh-CN.json @@ -0,0 +1,3 @@ +{ + "save": "保存" +} diff --git a/src/setter/style-setter/components/row/index.less b/src/setter/style-setter/components/row/index.less index 66edbcd..eb0ed45 100644 --- a/src/setter/style-setter/components/row/index.less +++ b/src/setter/style-setter/components/row/index.less @@ -7,11 +7,13 @@ .title-contaienr { width: 50px; flex-direction: row; + line-height: 1; } .title-contaienr-long { width: 55px; flex-direction: row; + line-height: 1; } .title-text { diff --git a/src/setter/style-setter/index.tsx b/src/setter/style-setter/index.tsx index c5287e3..d447004 100644 --- a/src/setter/style-setter/index.tsx +++ b/src/setter/style-setter/index.tsx @@ -7,8 +7,18 @@ import Background from './pro/background'; import CssCode from './components/css-code'; import { StyleData } from './utils/types'; import { ConfigProvider } from '@alifd/next'; +import enUS from '@alifd/next/lib/locale/en-us'; +import zhCN from '@alifd/next/lib/locale/zh-cn'; +import { common } from '@alilc/lowcode-engine'; import './index.less'; +const { getLocale } = common.utils.createIntl(); +const locale: string = getLocale() || 'zh-CN'; +const localeSource: any = { + 'en-US': enUS, + 'zh-CN': zhCN, +}; + interface StyleSetterProps { value: StyleData; defaultValue: string; @@ -114,7 +124,7 @@ export default class StyleSetterV2 extends React.PureComponent const { styleData, cssCodeVisiable, initFlag } = this.state; return ( - +
{isShowCssCode && (
diff --git a/src/setter/style-setter/pro/background/index.tsx b/src/setter/style-setter/pro/background/index.tsx index ce61156..72a2652 100644 --- a/src/setter/style-setter/pro/background/index.tsx +++ b/src/setter/style-setter/pro/background/index.tsx @@ -5,11 +5,13 @@ import Number from '../../components/number'; import ColorInput from '../../components/color-input'; import { StyleData, onStyleChange } from '../../utils/types'; import { Collapse, Input, NumberPicker, Range } from '@alifd/next'; -import backgroundConfig from './config.json'; import { addUnit, isCssVarBind, isEmptyValue, parseValue, unifyStyle } from '../../utils'; +import { intlLocal } from './locale'; import './index.less'; import { backgroundSizeMap } from './constant'; +const backgroundConfig = intlLocal(); + const {Panel} = Collapse; interface fontProps { styleData: StyleData | any; @@ -208,7 +210,7 @@ export default (props: fontProps) => { }; return ( - + { } - placeholder="输入图片url" + placeholder={backgroundConfig.inputPlaceholder} style={{ width: '100%' }} value={backToBgImgUrl(styleData.backgroundImage)} onChange={onBgImageChange} @@ -247,7 +249,7 @@ export default (props: fontProps) => { {bgSizeType == backgroundSizeMap.default && (
- 宽 + {backgroundConfig.width} { />
- 高 + {backgroundConfig.height} {
- 左 + {backgroundConfig.left} { />
- 顶 + {backgroundConfig.top} { )} - +
{ + const { getLocale } = common.utils.createIntl(); + const locale: string = getLocale() || 'zh-CN'; + const localeSource: any = { + 'en-US': enUS, + 'zh-CN': zhCN, + }; + return localeSource[locale]; +} + + +export { intlLocal }; diff --git a/src/setter/style-setter/pro/background/config.json b/src/setter/style-setter/pro/background/locale/zh-CN.json similarity index 92% rename from src/setter/style-setter/pro/background/config.json rename to src/setter/style-setter/pro/background/locale/zh-CN.json index 60578fd..a59cb01 100644 --- a/src/setter/style-setter/pro/background/config.json +++ b/src/setter/style-setter/pro/background/locale/zh-CN.json @@ -1,4 +1,11 @@ { + "title": "背景", + "inputPlaceholder": "输入图片url", + "width": "宽", + "height": "高", + "left": "左", + "top": "顶", + "opacity": "透明度", "backgroundType": { "title": "背景", "dataList": [ diff --git a/src/setter/style-setter/pro/border/index.tsx b/src/setter/style-setter/pro/border/index.tsx index 77ad634..95c1949 100644 --- a/src/setter/style-setter/pro/border/index.tsx +++ b/src/setter/style-setter/pro/border/index.tsx @@ -6,12 +6,14 @@ import Number from '../../components/number'; import ColorInput from '../../components/color-input'; import { StyleData, onStyleChange } from '../../utils/types'; import { Collapse, Range, Select } from '@alifd/next'; -import fontConfig from './config.json'; +import { intlLocal } from './locale'; import { addUnit, removeUnit, unifyStyle } from '../../utils'; import './index.less'; const Option = Select.Option; const Panel = Collapse.Panel; +const borderConfig = intlLocal(); + const BORDER_MAX = 30; enum BorderRadiusType { @@ -42,7 +44,7 @@ interface fontProps { } export default (props: fontProps) => { const { styleData, onStyleChange, unit } = props; - const { borderType, borderStyle, shadowType} = fontConfig; + const { borderType, borderStyle, shadowType} = borderConfig; const [selBorderType, setSelBorderType] = useState(null); const [borderDirection, setBorderDirection] = useState(null); const [shadow, setShadow] = useState('') @@ -189,7 +191,7 @@ export default (props: fontProps) => { const insetBoxShadowShift = shadow==='insetShadow' ? 1 : 0 return ( - + { )} - +
@@ -381,7 +383,7 @@ export default (props: fontProps) => {
- 阴影颜色 + {borderConfig.shadowColor} {
-
模糊
+
{borderConfig.blur}
{ />
-
扩展
+
{borderConfig.spread}
{ + const { getLocale } = common.utils.createIntl(); + const locale: string = getLocale() || 'zh-CN'; + const localeSource: any = { + 'en-US': enUS, + 'zh-CN': zhCN, + }; + return localeSource[locale]; +} + + +export { intlLocal }; diff --git a/src/setter/style-setter/pro/border/config.json b/src/setter/style-setter/pro/border/locale/zh-CN.json similarity index 82% rename from src/setter/style-setter/pro/border/config.json rename to src/setter/style-setter/pro/border/locale/zh-CN.json index 8d626ed..bcafc08 100644 --- a/src/setter/style-setter/pro/border/config.json +++ b/src/setter/style-setter/pro/border/locale/zh-CN.json @@ -1,4 +1,8 @@ { + "title": "边框", + "shadowColor": "阴影颜色", + "blur": "模糊", + "spread": "扩展", "borderType": { "title": "圆角", "dataList": [ @@ -36,22 +40,22 @@ "dataList": [ { "value": "none", - "tips": "无样式 none", + "tips": "无样式", "icon": "icon-close" }, { "value": "solid", - "tips": "实线 solid", + "tips": "实线", "icon": "icon-shixian" }, { "value": "dashed", - "tips": "虚线 dashed", + "tips": "虚线", "icon": "icon-xuxian" }, { "value": "dotted", - "tips": "点线 dotted", + "tips": "点线", "icon": "icon-dianxian" } ] diff --git a/src/setter/style-setter/pro/font/index.tsx b/src/setter/style-setter/pro/font/index.tsx index 301a5ee..593aff8 100644 --- a/src/setter/style-setter/pro/font/index.tsx +++ b/src/setter/style-setter/pro/font/index.tsx @@ -4,11 +4,13 @@ import Number from '../../components/number'; import { StyleData, onStyleChange } from '../../utils/types'; import { Collapse, NumberPicker, Select, Range } from '@alifd/next'; import ColorInput from '../../components/color-input'; -import fontConfig from './config.json'; +import { intlLocal } from './locale'; import { addUnit, isEmptyValue } from '../../utils'; import './index.less'; const Panel = Collapse.Panel; +const fontConfig = intlLocal(); + interface fontProps { styleData: StyleData | any; onStyleChange?: onStyleChange; @@ -42,10 +44,10 @@ export default (props: fontProps) => { return ( - +
- 字号 + {fontConfig.fontSize} { />
- 行高 + {fontConfig.lineHeight} {
- + { /> - + @@ -97,7 +99,7 @@ export default (props: fontProps) => { {...props} /> - +
{ + const { getLocale } = common.utils.createIntl(); + const locale: string = getLocale() || 'zh-CN'; + const localeSource: any = { + 'en-US': enUS, + 'zh-CN': zhCN, + }; + return localeSource[locale]; +} + + +export { intlLocal }; diff --git a/src/setter/style-setter/pro/font/config.json b/src/setter/style-setter/pro/font/locale/zh-CN.json similarity index 79% rename from src/setter/style-setter/pro/font/config.json rename to src/setter/style-setter/pro/font/locale/zh-CN.json index 95cfd6c..668c9ba 100644 --- a/src/setter/style-setter/pro/font/config.json +++ b/src/setter/style-setter/pro/font/locale/zh-CN.json @@ -1,4 +1,10 @@ { + "title": "文字", + "fontSize": "字号", + "lineHeight": "行高", + "fontFamily": "字体", + "color": "文字颜色", + "opacity": "透明度", "fontWeight": { "title": "字重", "dataList": [ @@ -41,28 +47,27 @@ } ] }, - "textAlign": { "title": "对齐", "dataList": [ { "value": "left", - "tips": "左对齐 left", + "tips": "左对齐", "icon": "icon-align-left" }, { "value": "center", - "tips": "居中对齐 center", + "tips": "居中对齐", "icon": "icon-align-middle" }, { "value": "right", - "tips": "右对齐 center", + "tips": "右对齐", "icon": "icon-align-right" }, { "value": "justify", - "tips": "两端对齐 justify", + "tips": "两端对齐", "icon": "icon-justify" } ] diff --git a/src/setter/style-setter/pro/layout/index.tsx b/src/setter/style-setter/pro/layout/index.tsx index 161350b..06b4ad2 100644 --- a/src/setter/style-setter/pro/layout/index.tsx +++ b/src/setter/style-setter/pro/layout/index.tsx @@ -4,7 +4,7 @@ import LayoutBox from './layoutBox'; import { Collapse } from '@alifd/next'; import Number from '../../components/number'; import { StyleData, onStyleChange } from '../../utils/types'; -import layoutConfig from './config.json'; +import { intlLocal } from './locale'; const Panel = Collapse.Panel; interface layoutProps { @@ -14,6 +14,8 @@ interface layoutProps { unit?: string } +const layoutConfig = intlLocal(); + const defaultLayoutPropsConfig = { // display 展示列表 showDisPlayList: ['inline', 'flex', 'block', 'inline-block', 'none'], @@ -39,7 +41,7 @@ export default (props: layoutProps) => { return ( - + {styleData['display'] === 'flex' && ( @@ -85,7 +87,7 @@ export default (props: layoutProps) => { {isShowWidthHeight && (
- 宽度 + {layoutConfig.width} { />
- 高度 + {layoutConfig.height} { + const { getLocale } = common.utils.createIntl(); + const locale: string = getLocale() || 'zh-CN'; + const localeSource: any = { + 'en-US': enUS, + 'zh-CN': zhCN, + }; + return localeSource[locale]; +} + + +export { intlLocal }; diff --git a/src/setter/style-setter/pro/layout/config.json b/src/setter/style-setter/pro/layout/locale/zh-CN.json similarity index 69% rename from src/setter/style-setter/pro/layout/config.json rename to src/setter/style-setter/pro/layout/locale/zh-CN.json index f892272..d01d3dc 100644 --- a/src/setter/style-setter/pro/layout/config.json +++ b/src/setter/style-setter/pro/layout/locale/zh-CN.json @@ -1,30 +1,33 @@ { + "title": "布局", + "width": "宽度", + "height": "高度", "display": { "title": "布局模式", "dataList": [ { "value": "inline", - "tips": "内联布局 inline", + "tips": "内联布局", "icon": "icon-a-Displayinline" }, { "value": "flex", - "tips": "弹性布局 flex", + "tips": "弹性布局", "icon": "icon-a-Displayflex" }, { "value": "block", - "tips": "块级布局 block", + "tips": "块级布局", "icon": "icon-a-Displayblock" }, { "value": "inline-block", - "tips": "内联块布局 inline-block", + "tips": "内联块布局", "icon": "icon-a-Displayinline-block" }, { "value": "none", - "tips": "隐藏 none", + "tips": "隐藏", "icon": "icon-yincang" } ] @@ -34,22 +37,22 @@ "dataList": [ { "value": "row", - "tips": "水平方向，起点在左侧 row", + "tips": "水平方向，起点在左侧", "icon": "icon-a-Directionrow" }, { "value": "row-reverse", - "tips": "水平方向，起点在右侧 row-reverse", + "tips": "水平方向，起点在右侧", "icon": "icon-a-Directionrow-reverse" }, { "value": "column", - "tips": "垂直方向，起点在上沿 column", + "tips": "垂直方向，起点在上沿", "icon": "icon-a-Directioncolumn" }, { "value": "column-reverse", - "tips": "垂直方向，起点在下沿 column-reverse", + "tips": "垂直方向，起点在下沿", "icon": "icon-a-Directioncolumn-reverse" } ] @@ -59,27 +62,27 @@ "dataList": [ { "value": "flex-start", - "tips": "左对齐 flex-start", + "tips": "左对齐", "icon": "icon-a-Justifyflex-startrow" }, { "value": "flex-end", - "tips": "右对齐 flex-end", + "tips": "右对齐", "icon": "icon-a-Justifyflex-endrow" }, { "value": "center", - "tips": "水平居中 center", + "tips": "水平居中", "icon": "icon-a-Justifycenterrow" }, { "value": "space-between", - "tips": "两端对齐 space-between", + "tips": "两端对齐", "icon": "icon-a-Justifyspace-betweenrow" }, { "value": "space-around", - "tips": "横向平分 space-around", + "tips": "横向平分", "icon": "icon-a-Justifyspace-aroundrow" } ] @@ -89,27 +92,27 @@ "dataList": [ { "value": "flex-start", - "tips": "起点对齐 flex-start", + "tips": "起点对齐", "icon": "icon-a-Alignflex-startrow" }, { "value": "flex-end", - "tips": "终点对齐 flex-end", + "tips": "终点对齐", "icon": "icon-a-Alignflex-endrow" }, { "value": "center", - "tips": "水平居中 center", + "tips": "水平居中", "icon": "icon-a-Aligncenterrow" }, { "value": "baseline", - "tips": "项目第一行文字的基线对齐 baseline", + "tips": "项目第一行文字的基线对齐", "icon": "icon-a-Alignbaselinerow" }, { "value": "stretch", - "tips": "沾满整个容器的高度 stretch", + "tips": "沾满整个容器的高度", "icon": "icon-a-Alignstretchrow" } ] @@ -119,17 +122,17 @@ "dataList": [ { "value": "nowrap", - "tips": "不换行 nowrap", + "tips": "不换行", "title": "不换行" }, { "value": "wrap", - "tips": "第一行在上方 wrap", + "tips": "第一行在上方", "title": "正换行" }, { "value": "wrap-reverse", - "tips": "第一行在下方 wrap-reverse", + "tips": "第一行在下方", "title": "逆换行" } ] diff --git a/src/setter/style-setter/pro/position/index.tsx b/src/setter/style-setter/pro/position/index.tsx index 201d873..5ca8d8d 100644 --- a/src/setter/style-setter/pro/position/index.tsx +++ b/src/setter/style-setter/pro/position/index.tsx @@ -4,7 +4,7 @@ import { Collapse, NumberPicker, Select } from '@alifd/next'; import { useEffect } from 'react'; import PositionBox from '../position/positionBox'; import { StyleData, onStyleChange } from '../../utils/types'; -import positionConfig from './config.json'; +import { intlLocal } from './locale'; import { isCssVarBind } from '../../utils'; const {Panel} = Collapse; @@ -15,6 +15,8 @@ interface layoutProps { positionPropsConfig?: any; } +const positionConfig = intlLocal(); + export default (props: layoutProps) => { const { float, clear, position } = positionConfig; @@ -34,7 +36,7 @@ export default (props: layoutProps) => { return ( - + { val = val.trim(); From 1be01e3eb6eb8a66a9dad86983236f138266c4d9 Mon Sep 17 00:00:00 2001 From: tianjun <373119611@qq.com> Date: Tue, 20 Feb 2024 17:49:37 +0800 Subject: [PATCH 82/95] =?UTF-8?q?feat(object-setter):=20=E5=AF=B9=E8=B1=A1?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E8=AE=BE=E7=BD=AE=20popup=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E6=8E=A7=E5=88=B6=20canCloseByOutSideClick?= =?UTF-8?q?=EF=BC=8C=E5=AF=B9=E8=B1=A1=E5=B1=9E=E6=80=A7=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E4=BC=9A=E5=94=A4=E8=B5=B7=E8=87=AA=E5=B7=B1=E5=BC=80=E5=8F=91?= =?UTF-8?q?=E7=9A=84plugin=E7=AD=89=E6=93=8D=E4=BD=9C=EF=BC=8C=E8=BF=99?= =?UTF-8?q?=E6=97=B6=E4=B8=8D=E5=B8=8C=E6=9C=9B=E7=82=B9=E5=87=BBpopup?= =?UTF-8?q?=E5=A4=96=E9=83=A8=E6=97=B6=E5=85=B3=E9=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/object-setter/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/setter/object-setter/index.tsx b/src/setter/object-setter/index.tsx index e86085a..12e1b1f 100644 --- a/src/setter/object-setter/index.tsx +++ b/src/setter/object-setter/index.tsx @@ -38,6 +38,7 @@ export default class ObjectSetter extends Component<{ interface ObjectSetterConfig { items?: IPublicTypeFieldConfig[]; extraSetter?: IPublicTypeSetterType; + canCloseByOutSideClick: boolean; } interface RowSetterProps { @@ -144,7 +145,10 @@ class RowSetter extends Component { const { field, config } = this.props; if (!this.pipe) { - this.pipe = (this.context as PopupPipe).create({ width: 320 }); + this.pipe = (this.context as PopupPipe).create({ + width: 320, + canCloseByOutSideClick: config.canCloseByOutSideClick + }); } const title = ( From ae59ce3014757f3c561f2fbcf9c6f75344aae103 Mon Sep 17 00:00:00 2001 From: jiangtao <2155745+jiangtao@users.noreply.github.com> Date: Mon, 4 Mar 2024 15:54:32 +0800 Subject: [PATCH 83/95] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E7=BB=91=E5=AE=9A=E7=9A=84=E7=BC=BA=E5=A4=B1this.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugin/plugin-variable-bind-dialog/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugin/plugin-variable-bind-dialog/index.tsx b/src/plugin/plugin-variable-bind-dialog/index.tsx index d464f5c..84aba0e 100644 --- a/src/plugin/plugin-variable-bind-dialog/index.tsx +++ b/src/plugin/plugin-variable-bind-dialog/index.tsx @@ -496,7 +496,7 @@ export default class VariableBindDialog extends Component { const pathList = this.treeFindPath(childrenVariableList, (data) => data.key == key, 'label'); selectLabel = `this.state.${pathList.join('.')}`; } else if (selParentVariable == 'methods') { - selectLabel = `${label}()`; + selectLabel = `this.${label}()`; } else if (selParentVariable == 'dataSource') { selectLabel = `this.state.${label}`; } else { From b44175b9528b1af530d9df85e5454c67c8fea552 Mon Sep 17 00:00:00 2001 From: "lizhi.lzp" Date: Mon, 15 Apr 2024 16:29:59 +0800 Subject: [PATCH 84/95] chore: focus code chore: focus code --- src/setter/mixed-setter/config.ts | 16 +++++++++++++++ src/setter/mixed-setter/index.less | 18 ++++++++++++++--- src/setter/mixed-setter/index.tsx | 20 ++++++++++++++++--- .../components/css-code/locale/index.ts | 4 ++-- src/setter/style-setter/index.tsx | 4 ++-- .../pro/background/locale/index.ts | 4 ++-- .../style-setter/pro/border/locale/index.ts | 4 ++-- .../style-setter/pro/font/locale/index.ts | 4 ++-- .../style-setter/pro/layout/locale/index.ts | 4 ++-- .../style-setter/pro/position/locale/index.ts | 4 ++-- 10 files changed, 62 insertions(+), 20 deletions(-) create mode 100644 src/setter/mixed-setter/config.ts diff --git a/src/setter/mixed-setter/config.ts b/src/setter/mixed-setter/config.ts new file mode 100644 index 0000000..8662fbd --- /dev/null +++ b/src/setter/mixed-setter/config.ts @@ -0,0 +1,16 @@ +import { ReactNode } from "react" +import { SettingField } from '@alilc/lowcode-engine'; + +class MixedSetterConfig { + config: { + renderSlot?: (props: {bindCode?: string, field?: SettingField}) => ReactNode + } = {} + + setConfig(config: { + renderSlot?: (props: {bindCode?: string, field?: SettingField}) => ReactNode + }) { + this.config = config; + } +} + +export const MixedSetterController = new MixedSetterConfig() \ No newline at end of file diff --git a/src/setter/mixed-setter/index.less b/src/setter/mixed-setter/index.less index 95cca5f..b4a1cae 100644 --- a/src/setter/mixed-setter/index.less +++ b/src/setter/mixed-setter/index.less @@ -1,9 +1,9 @@ .lc-setter-mixed { min-width: 0; - margin-right: 26px; + margin-right: 40px; display: block; position: relative; - width: 100%; + width: calc(100% - 20px); > .lc-setter-actions { position: absolute; right: -4px; @@ -33,6 +33,13 @@ } } } + >.lc-action-slot { + position: absolute; + display: flex; + right: -24px; + top: 50%; + transform: translate(100%, -50%); + } .next-input, .next-date-picker, .next-month-picker { @@ -57,6 +64,11 @@ height: 32px; transform: none; } + >.lc-action-slot { + right: 12px; + top: 44px; + transform: none; + } } .lc-block-field > .lc-field-body > .lc-setter-mixed { @@ -69,4 +81,4 @@ top: 4px; transform: none; } -} +} \ No newline at end of file diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index 05c58e8..020a3a8 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -1,4 +1,4 @@ -import React, { Component, ComponentClass, ReactNode } from 'react'; +import React, { Component, ComponentClass } from 'react'; import classNames from 'classnames'; import { Dropdown, Menu } from '@alifd/next'; import { common, setters, SettingField } from '@alilc/lowcode-engine'; @@ -13,6 +13,7 @@ import { } from '@alilc/lowcode-types'; import { IconConvert } from './icons/convert'; import { intlNode } from './locale'; +import { MixedSetterController } from './config' import './index.less'; import { IconVariable } from './icons/variable'; @@ -148,7 +149,7 @@ interface VariableSetter extends ComponentClass { } @observer -export default class MixedSetter extends Component<{ +class MixedSetter extends Component<{ field: SettingField; setters?: Array; onSetterChange?: (field: SettingField, name: string) => void; @@ -436,7 +437,7 @@ export default class MixedSetter extends Component<{ } render() { - const { className } = this.props; + const { className, field } = this.props; let contents: | { setterContent: ReactNode; @@ -468,7 +469,20 @@ export default class MixedSetter extends Component<{ > {contents.setterContent}
{contents.actions}
+ {!!MixedSetterController.config.renderSlot && +
+ {MixedSetterController.config.renderSlot?.({ + field, + bindCode: field.getValue()?.value, + })} +
+ }
); } } +interface MixedSetterType extends ComponentClass { + controller: typeof MixedSetterController; +} +export default MixedSetter as unknown as MixedSetterType +(MixedSetter as unknown as MixedSetterType).controller = MixedSetterController; diff --git a/src/setter/style-setter/components/css-code/locale/index.ts b/src/setter/style-setter/components/css-code/locale/index.ts index 55bea7e..2c5b1d0 100644 --- a/src/setter/style-setter/components/css-code/locale/index.ts +++ b/src/setter/style-setter/components/css-code/locale/index.ts @@ -3,8 +3,8 @@ import enUS from './en-US.json'; import zhCN from './zh-CN.json'; const intlLocal = () => { - const { getLocale } = common.utils.createIntl(); - const locale: string = getLocale() || 'zh-CN'; + const { getLocale } = common.utils.createIntl?.() || {}; + const locale: string = getLocale?.() || 'zh-CN'; const localeSource: any = { 'en-US': enUS, 'zh-CN': zhCN, diff --git a/src/setter/style-setter/index.tsx b/src/setter/style-setter/index.tsx index d447004..40135db 100644 --- a/src/setter/style-setter/index.tsx +++ b/src/setter/style-setter/index.tsx @@ -12,8 +12,8 @@ import zhCN from '@alifd/next/lib/locale/zh-cn'; import { common } from '@alilc/lowcode-engine'; import './index.less'; -const { getLocale } = common.utils.createIntl(); -const locale: string = getLocale() || 'zh-CN'; +const { getLocale } = common.utils.createIntl?.() || {}; +const locale: string = getLocale?.() || 'zh-CN'; const localeSource: any = { 'en-US': enUS, 'zh-CN': zhCN, diff --git a/src/setter/style-setter/pro/background/locale/index.ts b/src/setter/style-setter/pro/background/locale/index.ts index 55bea7e..2c5b1d0 100644 --- a/src/setter/style-setter/pro/background/locale/index.ts +++ b/src/setter/style-setter/pro/background/locale/index.ts @@ -3,8 +3,8 @@ import enUS from './en-US.json'; import zhCN from './zh-CN.json'; const intlLocal = () => { - const { getLocale } = common.utils.createIntl(); - const locale: string = getLocale() || 'zh-CN'; + const { getLocale } = common.utils.createIntl?.() || {}; + const locale: string = getLocale?.() || 'zh-CN'; const localeSource: any = { 'en-US': enUS, 'zh-CN': zhCN, diff --git a/src/setter/style-setter/pro/border/locale/index.ts b/src/setter/style-setter/pro/border/locale/index.ts index 55bea7e..2c5b1d0 100644 --- a/src/setter/style-setter/pro/border/locale/index.ts +++ b/src/setter/style-setter/pro/border/locale/index.ts @@ -3,8 +3,8 @@ import enUS from './en-US.json'; import zhCN from './zh-CN.json'; const intlLocal = () => { - const { getLocale } = common.utils.createIntl(); - const locale: string = getLocale() || 'zh-CN'; + const { getLocale } = common.utils.createIntl?.() || {}; + const locale: string = getLocale?.() || 'zh-CN'; const localeSource: any = { 'en-US': enUS, 'zh-CN': zhCN, diff --git a/src/setter/style-setter/pro/font/locale/index.ts b/src/setter/style-setter/pro/font/locale/index.ts index 55bea7e..2c5b1d0 100644 --- a/src/setter/style-setter/pro/font/locale/index.ts +++ b/src/setter/style-setter/pro/font/locale/index.ts @@ -3,8 +3,8 @@ import enUS from './en-US.json'; import zhCN from './zh-CN.json'; const intlLocal = () => { - const { getLocale } = common.utils.createIntl(); - const locale: string = getLocale() || 'zh-CN'; + const { getLocale } = common.utils.createIntl?.() || {}; + const locale: string = getLocale?.() || 'zh-CN'; const localeSource: any = { 'en-US': enUS, 'zh-CN': zhCN, diff --git a/src/setter/style-setter/pro/layout/locale/index.ts b/src/setter/style-setter/pro/layout/locale/index.ts index 55bea7e..2c5b1d0 100644 --- a/src/setter/style-setter/pro/layout/locale/index.ts +++ b/src/setter/style-setter/pro/layout/locale/index.ts @@ -3,8 +3,8 @@ import enUS from './en-US.json'; import zhCN from './zh-CN.json'; const intlLocal = () => { - const { getLocale } = common.utils.createIntl(); - const locale: string = getLocale() || 'zh-CN'; + const { getLocale } = common.utils.createIntl?.() || {}; + const locale: string = getLocale?.() || 'zh-CN'; const localeSource: any = { 'en-US': enUS, 'zh-CN': zhCN, diff --git a/src/setter/style-setter/pro/position/locale/index.ts b/src/setter/style-setter/pro/position/locale/index.ts index 55bea7e..2c5b1d0 100644 --- a/src/setter/style-setter/pro/position/locale/index.ts +++ b/src/setter/style-setter/pro/position/locale/index.ts @@ -3,8 +3,8 @@ import enUS from './en-US.json'; import zhCN from './zh-CN.json'; const intlLocal = () => { - const { getLocale } = common.utils.createIntl(); - const locale: string = getLocale() || 'zh-CN'; + const { getLocale } = common.utils.createIntl?.() || {}; + const locale: string = getLocale?.() || 'zh-CN'; const localeSource: any = { 'en-US': enUS, 'zh-CN': zhCN, From 91e7e32ea0640a81468f78dddd7132d4d82aca68 Mon Sep 17 00:00:00 2001 From: "lizhi.lzp" Date: Mon, 6 May 2024 15:37:47 +0800 Subject: [PATCH 85/95] =?UTF-8?q?fix:=20=E7=B1=BB=E5=90=8D=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E5=90=8E=E6=97=A0=E6=B3=95=E7=A7=BB=E9=99=A4=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/classname-setter/index.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/setter/classname-setter/index.tsx b/src/setter/classname-setter/index.tsx index 66279cc..34ffaa1 100644 --- a/src/setter/classname-setter/index.tsx +++ b/src/setter/classname-setter/index.tsx @@ -74,6 +74,15 @@ export default class ClassNameView extends PureComponent { selectValue = value.split(' '); } + selectValue.forEach(current => { + if(!classnameList.some(cls => cls === current)) { + dataSource.push({ + value: current, + label: current, + }); + } + }) + this.setState({ dataSource, selectValue, From 6f64c77bfcbe242fc55d131c8c0bf7677f304d53 Mon Sep 17 00:00:00 2001 From: "lizhi.lzp" Date: Wed, 10 Jul 2024 10:12:48 +0800 Subject: [PATCH 86/95] chore: simple-bind-var --- src/index.tsx | 2 + .../plugin-simple-bind-popup/index.less | 95 +++++++ src/plugin/plugin-simple-bind-popup/index.tsx | 257 ++++++++++++++++++ src/setter/mixed-setter/index.tsx | 33 ++- src/setter/variable-setter/index.tsx | 5 +- 5 files changed, 375 insertions(+), 17 deletions(-) create mode 100644 src/plugin/plugin-simple-bind-popup/index.less create mode 100644 src/plugin/plugin-simple-bind-popup/index.tsx diff --git a/src/index.tsx b/src/index.tsx index 225ac89..6b3685c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -26,6 +26,7 @@ import VariableSetter from './setter/variable-setter'; import TitleSetter from './setter/title-setter'; import EventBindDialog from './plugin/plugin-event-bind-dialog'; import VariableBindDialog from './plugin/plugin-variable-bind-dialog'; +import SimpleVariableBindPopup from './plugin/plugin-simple-bind-popup' import './index.less'; import packagesInfo from '../package.json'; // suggest: 做成 StringSetter 的一个参数， @@ -227,6 +228,7 @@ const engineExt = { pluginMap: { EventBindDialog, VariableBindDialog, + SimpleVariableBindPopup, }, }; engineExt.version = packagesInfo.version; diff --git a/src/plugin/plugin-simple-bind-popup/index.less b/src/plugin/plugin-simple-bind-popup/index.less new file mode 100644 index 0000000..41796b4 --- /dev/null +++ b/src/plugin/plugin-simple-bind-popup/index.less @@ -0,0 +1,95 @@ +.simple-dialog-body { + background-color: white; + padding: 12px; + box-shadow: 0 2px 5px rgba(0,0,0,.05); + border-radius: 4px; + + .dialog-small-title { + font-weight: 700; + margin-bottom: 8px; + color: var(--color-title, rgb(0, 0, 0)); + display: flex; + justify-content: space-between; + .error-message{ + color:var(--color-function-error, rgba(255,97,96)); + font-weight: 400; + } + } + + .dialog-right-container { + width: 400px; + position: relative; + + .event-input-container { + margin-bottom: 20px; + } + textarea { + height: 100%; + } + + .editor-type-tag { + width: 18px; + height: 18px; + background-color: var(--color-layer-mask-background, rgba(17, 105, 247, 0.18)); + border-radius: 2px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: 35px; + z-index: 100; + left: 6px; + } + + .editor-context{ + border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.3)); + padding: 5px 5px 0px 15px; + border-top-right-radius: 3px; + border-top-left-radius: 3px; + } + + .editor-context-error{ + border-color:var(--color-function-error, rgba(255,97,96,0.7)); + } + } +} + +.simple-bind-dialog-bottom { + margin-top: 12px; + .bottom-left-container { + float: left; + } + .bottom-right-container { + float: right; + } +} + +.vs-variable-minimize { + width: 120px; + display: flex; + justify-content: space-between; + align-items: center; + position: absolute; + bottom: 10px; + right: 286px; + z-index: 100; + background: var(--color-block-background-normal, #fff); + padding: 8px 12px; + border-radius: 3px; + border: 1px solid var(--color-field-border, #ddd); + box-shadow: 0 0 8px #aaa; + font-size: 14px; + font-weight: 700; + cursor: pointer; + img { + width: 12px; + } +} + +.lc-code-control:hover { + border-color: transparent; +} + +.lc-code-control.ve-focused { + border-color: transparent; +} diff --git a/src/plugin/plugin-simple-bind-popup/index.tsx b/src/plugin/plugin-simple-bind-popup/index.tsx new file mode 100644 index 0000000..7a9b2af --- /dev/null +++ b/src/plugin/plugin-simple-bind-popup/index.tsx @@ -0,0 +1,257 @@ +import React, { Component } from 'react'; +import { Button, Overlay } from '@alifd/next'; +import { PluginProps } from '@alilc/lowcode-types'; +import { event } from '@alilc/lowcode-engine'; +import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor'; +import './index.less'; + + +const defaultEditorProps = { + width: '100%', + height: '200px', +}; + +const defaultEditorOption = { + options:{ + readOnly: false, + automaticLayout: true, + folding: false, // 默认开启折叠代码功能 + lineNumbers: 'off', + wordWrap: 'on', + formatOnPaste: true, + fontSize: 12, + tabSize: 2, + scrollBeyondLastLine: false, + fixedOverflowWidgets: false, + snippetSuggestions: 'top', + minimap: { + enabled: false, + }, + scrollbar: { + vertical: 'auto', + horizontal: 'auto', + verticalScrollbarSize:0 + }, + } +}; + +export default class SimpleVariableBindPopup extends Component { + state = { + visiable: false, + isOverFlowMaxSize:false, + jsCode: '', + field: {}, // 编辑器全局变量 + treeList: [], + minimize: false, // 是否最小化 + autoExpandParent: true, + maxTextSize:0, // 绑定变量最大字符数 + node: null as any as HTMLElement, // 触发的节点 + }; + + private editorJsRef = React.createRef(); + + componentDidMount() { + event.on('common:variableBindDialog.openDialog', ({ field, node }) => { + this.setState({ field, node }, () => { + this.initCode(); + this.openDialog(); + }); + }); + } + + initCode = () => { + const { field } = this.state; + const fieldValue = field.getValue(); + const jsCode = fieldValue?.value; + + const {maxTextSize} = this.props.config?.props || {} + + this.setState({ + jsCode, + // fullScreenStatus: false, + minimize: false, // 是否最小化 + isOverFlowMaxSize:false, + // 配置的最大文本长度，默认为0，不控制 + maxTextSize:maxTextSize?maxTextSize:0 + }); + }; + + openDialog = () => { + this.setState({ visiable: true }); + }; + + closeDialog = () => { + this.setState({ + visiable: false, + minimize: false, + }); + }; + + updateCode = (newCode) => { + let isOverFlowMaxSize = false; + if (this.state.maxTextSize){ + isOverFlowMaxSize = newCode?.length>this.state.maxTextSize + } + + this.setState( + { + jsCode: newCode, + isOverFlowMaxSize + }, + this.autoSave, + ); + console.log('size====',newCode?.length); + }; + + autoSave = () => { + const { autoSave } = this.props; + if (autoSave) { + this.onOk(true); + } + }; + + editorDidMount = () => { + setTimeout(() => { + this.editorNode = this.editorJsRef.current; // 记录当前dom节点； + }, 0); + }; + + onOk = (autoSave) => { + const { field, jsCode } = this.state; + if(jsCode === undefined || jsCode?.length == 0) { + return this.removeTheBinding() + } + + const fieldValue = field.getValue(); + field.setValue({ + type: 'JSExpression', + value: jsCode, + mock: + Object.prototype.toString.call(fieldValue) === '[object Object]' + ? fieldValue.mock + : fieldValue, + }); + if (autoSave !== true) { + this.closeDialog(); + } + }; + + removeTheBinding = () => { + const { field } = this.state; + const fieldValue = field.getValue(); + const value = + Object.prototype.toString.call(fieldValue) === '[object Object]' + ? fieldValue.mock + : fieldValue; + console.debug('value', value, 'fieldValue', fieldValue, field) + field.setValue(value); + this.closeDialog(); + }; + + renderBottom = () => { + const { jsCode } = this.state; + return ( +
+
+ {jsCode && jsCode.length > 0 && ( + + )} +
+ +
+ +    + +
+
+ ); + }; + + minimizeClick = (state) => { + this.setState({ + minimize: state, + visiable: !state, + }); + }; + + renderErrorMessage = () => { + const {isOverFlowMaxSize,maxTextSize} = this.state; + return ( + isOverFlowMaxSize ? 表达式文本不能超过{maxTextSize}个字符，请换成函数调用 :null + ) + } + + isBtnDisable = () => { + const { isOverFlowMaxSize } = this.state; + return isOverFlowMaxSize; + } + + + render() { + const { + visiable, + jsCode, + minimize, + isOverFlowMaxSize, + } = this.state; + + return ( +
+ {minimize ? ( +
+ this.minimizeClick(false)} + src="https://img.alicdn.com/imgextra/i2/O1CN01HzeCND1vl948xPEWm_!!6000000006212-55-tps-200-200.svg" + /> + this.minimizeClick(false)} className="vs-variable-minimize-title"> + 变量绑定 + + +
+ ) : ( + '' + )} + {this.state.node && + this.state.node} + offset={[-380, 10]} + > +
+
+
绑定 {this.renderErrorMessage()}
+
+
=
+ this.updateCode(newCode)} + editorDidMount={(useMonaco, editor) => { + this.editorDidMount.call(this, editor, useMonaco); + }} + /> +
+
+ {this.renderBottom()} +
+ + } +
+ ); + } +} diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index 020a3a8..4c586e4 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -206,7 +206,7 @@ class MixedSetter extends Component<{ if (name === 'VariableSetter') { const setterComponent = getSetter('VariableSetter')?.component as any; if (setterComponent && setterComponent.isPopup) { - setterComponent.show({ prop: field }); + setterComponent.show({ prop: field, node: this.triggerNodeRef }); this.syncSelectSetter(name); return; } @@ -266,6 +266,7 @@ class MixedSetter extends Component<{ } private shell: HTMLDivElement | null = null; + private triggerNodeRef: HTMLDivElement | null = null; private checkIsBlockField() { if (this.shell) { @@ -346,8 +347,8 @@ class MixedSetter extends Component<{ // =1: 原地展示<当前绑定的值，点击调用 VariableSetter.show>，icon 高亮是否->isUseVaiable，点击 VariableSetter.show setterContent = ( { - setterComponent.show({ prop: field }); + onClick={(e) => { + setterComponent.show({ prop: field, node: e.target }); }} > {tipContent} @@ -369,8 +370,8 @@ class MixedSetter extends Component<{ icon: , tip: tipContent, }} - onClick={() => { - setterComponent.show({ prop: field }); + onClick={(e: any) => { + setterComponent.show({ prop: field, node: e.target.parentNode }); }} /> ); @@ -383,8 +384,8 @@ class MixedSetter extends Component<{ if (currentSetter?.name === 'VariableSetter') { setterContent = ( { - setterComponent.show({ prop: field }); + onClick={(e) => { + setterComponent.show({ prop: field, node: e.target }); }} > {intlNode('Binded: {expr}', { expr: field.getValue()?.value ?? '-' })} @@ -405,14 +406,16 @@ class MixedSetter extends Component<{ private renderSwitchAction(currentSetter?: SetterItem) { const usedName = currentSetter?.name || this.used; const triggerNode = ( - , - }} - className="lc-switch-trigger" - /> + <div ref={ref => this.triggerNodeRef = ref}> + <Title + title={{ + tip: intlNode('Switch Setter'), + // FIXME: got a beautiful icon + icon: <IconConvert size={24} />, + }} + className="lc-switch-trigger" + /> + </div> ); return ( <Dropdown trigger={triggerNode} triggerType="click" align="tr br"> diff --git a/src/setter/variable-setter/index.tsx b/src/setter/variable-setter/index.tsx index a5092a6..84823f3 100644 --- a/src/setter/variable-setter/index.tsx +++ b/src/setter/variable-setter/index.tsx @@ -6,8 +6,9 @@ export default class SetterVariable extends PureComponent { static displayName = 'SetterVariable'; static isPopup = true; - static show({ prop: field }) { - event.emit('variableBindDialog.openDialog', { field }); + static show(params: any) { + const { prop: field, ...res } = params; + event.emit('variableBindDialog.openDialog', { field, ...res }); } render() { From f5c50248e9b98d3e0b60ffc82f663e9ea3eaa467 Mon Sep 17 00:00:00 2001 From: "lizhi.lzp" <lizhi.lzp@antgroup.com> Date: Thu, 11 Jul 2024 17:05:36 +0800 Subject: [PATCH 87/95] chore: uniq setter & ref location --- src/plugin/plugin-simple-bind-popup/index.tsx | 4 +++- src/setter/mixed-setter/index.tsx | 8 ++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/plugin/plugin-simple-bind-popup/index.tsx b/src/plugin/plugin-simple-bind-popup/index.tsx index 7a9b2af..d8491e2 100644 --- a/src/plugin/plugin-simple-bind-popup/index.tsx +++ b/src/plugin/plugin-simple-bind-popup/index.tsx @@ -49,10 +49,11 @@ export default class SimpleVariableBindPopup extends Component<PluginProps> { }; private editorJsRef = React.createRef(); + private nodeRef: HTMLDivElement | null = null; componentDidMount() { event.on('common:variableBindDialog.openDialog', ({ field, node }) => { - this.setState({ field, node }, () => { + this.setState({ field, node: node || this.nodeRef }, () => { this.initCode(); this.openDialog(); }); @@ -220,6 +221,7 @@ export default class SimpleVariableBindPopup extends Component<PluginProps> { ) : ( '' )} + <div style={{ position: 'absolute', top: 0, right: 100 }} ref={ref => this.nodeRef = ref} /> {this.state.node && <Overlay v2 diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index 4c586e4..e4fd5bc 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -132,10 +132,15 @@ function nomalizeSetters( } return config; }); + const uniqSetters = formattedSetters.reduce((map, s) => { + map.set(s.name, s); + return map; + }, new Map<string, any>()) + const hasComplexSetter = formattedSetters.filter((item) => ['ArraySetter', 'ObjectSetter'].includes(item.setter), ).length; - return formattedSetters.map((item) => { + return [...uniqSetters.values()].map((item) => { if (item.setter === 'VariableSetter' && hasComplexSetter) { item.setter = 'ExpressionSetter'; item.name = 'ExpressionSetter'; @@ -334,7 +339,6 @@ class MixedSetter extends Component<{ private contentsFromPolyfill(setterComponent: VariableSetter) { const { field } = this.props; - const n = this.setters.length; let setterContent: any; From 9c5b0a9b85f978c3b8d13cea481e1e48611be627 Mon Sep 17 00:00:00 2001 From: "lizhi.lzp" <lizhi.lzp@antgroup.com> Date: Wed, 18 Sep 2024 14:38:25 +0800 Subject: [PATCH 88/95] =?UTF-8?q?fix:=20=E7=AE=80=E5=8D=95=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E7=BB=91=E5=AE=9A=E9=9D=A2=E6=9D=BF=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E8=B6=85=E5=87=BA=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugin/plugin-simple-bind-popup/index.tsx | 11 ++++-- src/plugin/plugin-simple-bind-popup/utils.ts | 34 +++++++++++++++++++ 2 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 src/plugin/plugin-simple-bind-popup/utils.ts diff --git a/src/plugin/plugin-simple-bind-popup/index.tsx b/src/plugin/plugin-simple-bind-popup/index.tsx index d8491e2..79237a7 100644 --- a/src/plugin/plugin-simple-bind-popup/index.tsx +++ b/src/plugin/plugin-simple-bind-popup/index.tsx @@ -4,11 +4,12 @@ import { PluginProps } from '@alilc/lowcode-types'; import { event } from '@alilc/lowcode-engine'; import MonacoEditor from '@alilc/lowcode-plugin-base-monaco-editor'; import './index.less'; +import { adjustOverlayPosition } from './utils'; const defaultEditorProps = { width: '100%', - height: '200px', + height: '150px', }; const defaultEditorOption = { @@ -50,6 +51,7 @@ export default class SimpleVariableBindPopup extends Component<PluginProps> { private editorJsRef = React.createRef(); private nodeRef: HTMLDivElement | null = null; + private overlayRef = React.createRef<HTMLDivElement>(); componentDidMount() { event.on('common:variableBindDialog.openDialog', ({ field, node }) => { @@ -230,9 +232,12 @@ export default class SimpleVariableBindPopup extends Component<PluginProps> { onRequestClose={this.closeDialog} safeNode={[document.querySelector('.lc-left-area'), document.querySelector('.lc-left-fixed-pane')]} target={() => this.state.node} - offset={[-380, 10]} + offset={[-380, 0]} + onPosition={() => { + adjustOverlayPosition(this.overlayRef.current!, [20]) + }} > - <div className="simple-dialog-body"> + <div className="simple-dialog-body" ref={this.overlayRef}> <div className="dialog-right-container"> <div className="dialog-small-title">绑定 {this.renderErrorMessage()}</div> <div id="jsEditorDom" className={isOverFlowMaxSize?"editor-context editor-context-error":"editor-context"} ref={this.editorJsRef}> diff --git a/src/plugin/plugin-simple-bind-popup/utils.ts b/src/plugin/plugin-simple-bind-popup/utils.ts new file mode 100644 index 0000000..7615caf --- /dev/null +++ b/src/plugin/plugin-simple-bind-popup/utils.ts @@ -0,0 +1,34 @@ +export function adjustOverlayPosition(overlay: HTMLElement, padding: any[]) { + const rect = overlay.getBoundingClientRect(); + const style = getComputedStyle(overlay); + const windowWidth = window.innerWidth; + const [paddingTop = 0] = padding || [0]; + const [, paddingRight = paddingTop, paddingBottom = paddingTop] = padding || [0]; + const [,,, paddingLeft = paddingRight || paddingTop] = padding || [0]; + + let newTop = rect.top; + let newLeft = rect.left; + + // 检查并修正左侧和右侧 + if (rect.left < 0) { + newLeft = paddingLeft; + console.debug('超出可视区域', 'left'); + } else if (rect.right > windowWidth) { + console.debug('超出可视区域', 'right'); + newLeft = windowWidth - rect.width - paddingRight; + } + + // 检查并修正顶部和底部 + if (rect.top < 0) { + newTop = paddingTop; + console.debug('超出可视区域', 'top'); + } else if (style.bottom.includes('-')) { + console.debug('超出可视区域', 'bottom'); + // 下方超出的话则反转展示在上方。 + newTop -= parseFloat(style.height) + paddingBottom; + } + + // 应用修正后的位置 + overlay.style.left = `${newLeft}px`; + overlay.style.top = `${newTop}px`; +} \ No newline at end of file From a6405a82eb2f1624f73957cf0987e7a60b4a9580 Mon Sep 17 00:00:00 2001 From: hakuna-tata <610578197@qq.com> Date: Tue, 29 Oct 2024 17:37:09 +0800 Subject: [PATCH 89/95] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20classnameset?= =?UTF-8?q?ter=20&&=20arraysetter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/array-setter/index.tsx | 47 +++++++-------- src/setter/array-setter/style.less | 7 +++ src/setter/classname-setter/index.less | 29 +++++++--- src/setter/classname-setter/index.tsx | 79 +++++++++----------------- 4 files changed, 79 insertions(+), 83 deletions(-) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index acba144..ef782d0 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -52,6 +52,7 @@ interface ArraySetterProps { value: any[]; field: IPublicModelSettingField; itemSetter?: IPublicTypeSetterType; + itemMaxLength?: number; columns?: IPublicTypeFieldConfig[]; multiValue?: boolean; hideDescription?: boolean; @@ -148,17 +149,11 @@ export class ListSetter extends Component<ArraySetterProps, ArraySetterState> { } render() { - const { hideDescription, extraProps = {} } = this.props; + const { hideDescription, extraProps = {}, itemMaxLength, columns } = this.props; const { renderFooter } = extraProps; - let columns: any = null; const { items } = this.state; const { scrollToLast } = this; this.scrollToLast = false; - if (this.props.columns) { - columns = this.props.columns.map((column) => ( - <Title key={column.name} title={column.title || (column.name as string)} /> - )); - } const lastIndex = items.length - 1; @@ -191,18 +186,26 @@ export class ListSetter extends Component<ArraySetterProps, ArraySetterState> { return ( <div className="lc-setter-list lc-block-setter"> {!hideDescription && columns && items.length > 0 ? ( - <div className="lc-setter-list-columns">{columns}</div> + <div className="lc-setter-list-columns">{ + columns.map((column) => ( + <Title key={column.name} title={column.title || (column.name as string)} /> + )) + }</div> ) : null} {content} <div className="lc-setter-list-add"> { - !renderFooter ? ( - <Button text type="primary" onClick={() => { - this.onAdd() - }}> - <span>添加一项 +</span> - </Button> - ) : renderFooter({...this.props, onAdd: this.onAdd.bind(this),}) + !renderFooter + ? (itemMaxLength && items.length >= Number(itemMaxLength) + ? null + :( + <Button text type="primary" onClick={() => { + this.onAdd() + }}> + <span>添加一项 +</span> + </Button> + )) + : renderFooter({...this.props, onAdd: this.onAdd.bind(this),}) } </div> </div> @@ -245,16 +248,13 @@ class ArrayItem extends Component<{ } } -class TableSetter extends ListSetter { - // todo: - // forceInline = 1 - // has more actions -} +class TableSetter extends ListSetter {} export default class ArraySetter extends Component<{ value: any[]; field: IPublicModelSettingField; itemSetter?: IPublicTypeSetterType; + itemMaxLength?: number; mode?: 'popup' | 'list'; forceInline?: boolean; multiValue?: boolean; @@ -272,10 +272,7 @@ export default class ArraySetter extends Component<{ if (items && Array.isArray(items)) { columns = items.filter( (item) => item.isRequired || item.important || (item.setter as any)?.isRequired, - ); - if (columns.length > 4) { - columns = columns.slice(0, 4); - } + )?.slice(0, 4); } } @@ -311,7 +308,7 @@ export default class ArraySetter extends Component<{ </Button> ); } else { - return <ListSetter {...props} columns={columns?.slice(0, 4)} />; + return <ListSetter {...props} columns={columns} />; } } } diff --git a/src/setter/array-setter/style.less b/src/setter/array-setter/style.less index a9f4eb4..2f86847 100644 --- a/src/setter/array-setter/style.less +++ b/src/setter/array-setter/style.less @@ -102,6 +102,13 @@ display: block; width: 100%; } + .lc-setter-mixed { + width: 100%; + + .lc-setter-actions, .lc-action-slot { + display: none; + } + } } .lc-listitem-handler { margin-left: 0; diff --git a/src/setter/classname-setter/index.less b/src/setter/classname-setter/index.less index 52dbf8d..5e47a4f 100644 --- a/src/setter/classname-setter/index.less +++ b/src/setter/classname-setter/index.less @@ -1,8 +1,23 @@ -.next-select-trigger-search { - position: static; - display: inline-block; - vertical-align: top; - overflow: hidden; - width: 100%; - max-width: 100%; +.ClassNameSetter_Select { + display: flex; + align-items: center; +} + +.ClassNameSetter_Select .next-select-inner { + padding: 2px 0; +} + +.ClassNameSetter_Select .next-select-inner .next-input-text-field { + display: flex; + flex-wrap: wrap; + align-items: center; + margin-bottom: 0; +} + +.ClassNameSetter_Select .next-select-inner .next-tag { + margin-bottom: 1px; +} + +.ClassNameSetter_Select .next-select-trigger-search { + height: 0; } diff --git a/src/setter/classname-setter/index.tsx b/src/setter/classname-setter/index.tsx index 34ffaa1..f05d6d3 100644 --- a/src/setter/classname-setter/index.tsx +++ b/src/setter/classname-setter/index.tsx @@ -1,5 +1,4 @@ import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; import { Select } from '@alifd/next'; import { project } from '@alilc/lowcode-engine'; import './index.less'; @@ -12,55 +11,25 @@ export interface PluginProps { export default class ClassNameView extends PureComponent<PluginProps> { static display = 'ClassName'; - static propTypes = { - onChange: PropTypes.func, - value: PropTypes.string, - }; + static defaultProps = {}; - static defaultProps = { - onChange: () => {}, - value: '', + state = { + dataSource: [], + selectValue: '', }; getClassNameList = () => { - const schema = project.exportSchema(); - const css = schema.componentsTree[0].css; - const classNameList = []; - if (css) { - const re = /\.?\w+[^{]+\{[^}]*\}/g; - const list = css.match(re); - list?.map((item) => { - if (item[0] === '.') { - let className = item.substring(1, item.indexOf('{')); - if (className.indexOf(':') >= 0) { - className = item.substring(1, item.indexOf(':')); - } - // 移除左右两边空格 - className = className.replace(/^\s*|\s*$/g, ''); - classNameList.push(className); - } - - return item; - }); - } - - return classNameList; - }; + const schema = ClassNameView?.defaultProps?.getSchema?.() || project.exportSchema(); - handleChange = (value) => { - const { onChange } = this.props; - onChange(value.join(' ')); - this.setState({ - selectValue: value, - }); + const css = schema.componentsTree[0].css; + return css?.match(/(?<=\.)\w+(?=\s*[{,])/g) || []; }; - // eslint-disable-next-line react/no-deprecated - componentWillMount() { + setClassNameSetterData = () => { const { value } = this.props; - const classnameList = this.getClassNameList(); - const dataSource = []; - classnameList.map((item) => { + const classNameList = this.getClassNameList(); + const dataSource: { label: string; value : string}[] = []; + classNameList.map((item: string) => { dataSource.push({ value: item, label: item, @@ -69,13 +38,9 @@ export default class ClassNameView extends PureComponent<PluginProps> { return item; }); - let selectValue = []; - if (value && value !== '') { - selectValue = value.split(' '); - } - + const selectValue = value?.split?.(' ') || []; selectValue.forEach(current => { - if(!classnameList.some(cls => cls === current)) { + if(!classNameList.some((cls: string) => cls === current)) { dataSource.push({ value: current, label: current, @@ -87,17 +52,29 @@ export default class ClassNameView extends PureComponent<PluginProps> { dataSource, selectValue, }); + }; + + handleChange = (value: string[]) => { + const { onChange } = this.props; + onChange(value.join(' ')); + this.setState({ + selectValue: value, + }); + }; + + componentWillMount() { + this.setClassNameSetterData(); } render() { const { dataSource, selectValue } = this.state; return ( <Select - size="small" + className='ClassNameSetter_Select' style={{ width: '100%' }} - aria-label="tag mode" - mode="tag" + mode="multiple" dataSource={dataSource} + onFocus={this.setClassNameSetterData} onChange={this.handleChange} value={selectValue} /> From 8c3758b46819f2a983478fc1ff8c5fc57f9b0a87 Mon Sep 17 00:00:00 2001 From: "jiushi.ljf" <jiushi.ljf@antgroup.com> Date: Wed, 30 Oct 2024 15:31:47 +0800 Subject: [PATCH 90/95] =?UTF-8?q?feat:=20arraySetter=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E7=BB=91=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/array-setter/index.tsx | 2 ++ src/setter/mixed-setter/index.tsx | 11 +++++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/setter/array-setter/index.tsx b/src/setter/array-setter/index.tsx index ef782d0..ef04b57 100644 --- a/src/setter/array-setter/index.tsx +++ b/src/setter/array-setter/index.tsx @@ -53,6 +53,7 @@ interface ArraySetterProps { field: IPublicModelSettingField; itemSetter?: IPublicTypeSetterType; itemMaxLength?: number; + variableBind?: boolean; columns?: IPublicTypeFieldConfig[]; multiValue?: boolean; hideDescription?: boolean; @@ -255,6 +256,7 @@ export default class ArraySetter extends Component<{ field: IPublicModelSettingField; itemSetter?: IPublicTypeSetterType; itemMaxLength?: number; + variableBind?: boolean; mode?: 'popup' | 'list'; forceInline?: boolean; multiValue?: boolean; diff --git a/src/setter/mixed-setter/index.tsx b/src/setter/mixed-setter/index.tsx index e4fd5bc..2ceeeb3 100644 --- a/src/setter/mixed-setter/index.tsx +++ b/src/setter/mixed-setter/index.tsx @@ -135,11 +135,14 @@ function nomalizeSetters( const uniqSetters = formattedSetters.reduce((map, s) => { map.set(s.name, s); return map; - }, new Map<string, any>()) + }, new Map<string, any>()); - const hasComplexSetter = formattedSetters.filter((item) => - ['ArraySetter', 'ObjectSetter'].includes(item.setter), - ).length; + const hasComplexSetter = formattedSetters.filter((item) => { + // 变量绑定，非切换设置器 + if (item.props?.variableBind) return false; + + return ['ArraySetter', 'ObjectSetter'].includes(item.setter); + })?.length; return [...uniqSetters.values()].map((item) => { if (item.setter === 'VariableSetter' && hasComplexSetter) { item.setter = 'ExpressionSetter'; From 841cb4a959aab6cf28558f861f4fb0ec2116e848 Mon Sep 17 00:00:00 2001 From: jingyu <jingyu.wsh@antgroup.com> Date: Mon, 18 Nov 2024 14:55:30 +0800 Subject: [PATCH 91/95] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E6=89=93?= =?UTF-8?q?=E5=BC=80=E9=9D=A2=E6=9D=BF=E6=97=B6=E4=BC=A0=E5=85=A5=E6=9C=80?= =?UTF-8?q?=E5=A4=A7=E9=95=BF=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugin/plugin-simple-bind-popup/index.tsx | 16 +++++----- .../plugin-variable-bind-dialog/index.tsx | 29 +++++++------------ 2 files changed, 19 insertions(+), 26 deletions(-) diff --git a/src/plugin/plugin-simple-bind-popup/index.tsx b/src/plugin/plugin-simple-bind-popup/index.tsx index 79237a7..f53f68f 100644 --- a/src/plugin/plugin-simple-bind-popup/index.tsx +++ b/src/plugin/plugin-simple-bind-popup/index.tsx @@ -54,8 +54,13 @@ export default class SimpleVariableBindPopup extends Component<PluginProps> { private overlayRef = React.createRef<HTMLDivElement>(); componentDidMount() { - event.on('common:variableBindDialog.openDialog', ({ field, node }) => { - this.setState({ field, node: node || this.nodeRef }, () => { + event.on('common:variableBindDialog.openDialog', ({ field, node, maxTextSize }) => { + const finalMaxTextSize = maxTextSize && typeof maxTextSize === 'number' ? maxTextSize : this.props.config?.props?.maxTextSize, + this.setState({ + field, + node: node || this.nodeRef, + maxTextSize: finalMaxTextSize, + }, () => { this.initCode(); this.openDialog(); }); @@ -67,15 +72,11 @@ export default class SimpleVariableBindPopup extends Component<PluginProps> { const fieldValue = field.getValue(); const jsCode = fieldValue?.value; - const {maxTextSize} = this.props.config?.props || {} - this.setState({ jsCode, // fullScreenStatus: false, minimize: false, // 是否最小化 isOverFlowMaxSize:false, - // 配置的最大文本长度，默认为0，不控制 - maxTextSize:maxTextSize?maxTextSize:0 }); }; @@ -93,7 +94,7 @@ export default class SimpleVariableBindPopup extends Component<PluginProps> { updateCode = (newCode) => { let isOverFlowMaxSize = false; if (this.state.maxTextSize){ - isOverFlowMaxSize = newCode?.length>this.state.maxTextSize + isOverFlowMaxSize = newCode?.length > this.state.maxTextSize } this.setState( @@ -103,7 +104,6 @@ export default class SimpleVariableBindPopup extends Component<PluginProps> { }, this.autoSave, ); - console.log('size====',newCode?.length); }; autoSave = () => { diff --git a/src/plugin/plugin-variable-bind-dialog/index.tsx b/src/plugin/plugin-variable-bind-dialog/index.tsx index 84aba0e..06c7381 100644 --- a/src/plugin/plugin-variable-bind-dialog/index.tsx +++ b/src/plugin/plugin-variable-bind-dialog/index.tsx @@ -65,7 +65,7 @@ export default class VariableBindDialog extends Component<PluginProps> { minimize: false, // 是否最小化 autoExpandParent: true, expandedKeys: [], - maxTextSize:0, // 绑定变量最大字符数 + maxTextSize: this.props.config?.props?.maxTextSize || 0, // 绑定变量最大字符数 }; private editorJsRef = React.createRef(); @@ -79,15 +79,17 @@ export default class VariableBindDialog extends Component<PluginProps> { } componentDidMount() { - event.on('common:variableBindDialog.openDialog', ({ field }) => { - this.setState({ field }, () => { + event.on('common:variableBindDialog.openDialog', ({ field, maxTextSize }) => { + // 在触发事件时指定最大长度，根据传入的长度重置一下 + const finalMaxTextSize = maxTextSize && typeof maxTextSize ? maxTextSize : this.props.config?.props?.maxTextSize || 0; + this.setState({ + field, + maxTextSize: finalMaxTextSize, + }, () => { this.initCode(); this.openDialog(); }); }); - - - } exportSchema = () => { @@ -100,8 +102,6 @@ export default class VariableBindDialog extends Component<PluginProps> { const fieldValue = field.getValue(); const jsCode = fieldValue?.value; - const {maxTextSize} = this.props.config?.props || {} - this.setState({ jsCode, // fullScreenStatus: false, @@ -112,8 +112,6 @@ export default class VariableBindDialog extends Component<PluginProps> { childrenVariableList: [], // 子级变量列表 minimize: false, // 是否最小化 isOverFlowMaxSize:false, - // 配置的最大文本长度，默认为0，不控制 - maxTextSize:maxTextSize?maxTextSize:0 }); }; @@ -324,11 +322,10 @@ export default class VariableBindDialog extends Component<PluginProps> { updateCode = (newCode) => { let isOverFlowMaxSize = false; - if (this.state.maxTextSize){ - isOverFlowMaxSize = newCode?.length>this.state.maxTextSize + if (this.state.maxTextSize) { + isOverFlowMaxSize = newCode?.length > this.state.maxTextSize } - this.setState( { jsCode: newCode, @@ -336,10 +333,6 @@ export default class VariableBindDialog extends Component<PluginProps> { }, this.autoSave, ); - - - - console.log('size====',newCode?.length); }; autoSave = () => { @@ -531,7 +524,7 @@ export default class VariableBindDialog extends Component<PluginProps> { const {isOverFlowMaxSize,maxTextSize} = this.state; return ( isOverFlowMaxSize ? <span className='error-message'>表达式文本不能超过{maxTextSize}个字符，请换成函数调用</span> :null - + ) } From 469d552f6f19fb8a3d84ed5754f26c1b45e8353b Mon Sep 17 00:00:00 2001 From: jingyu <jingyu.wsh@antgroup.com> Date: Mon, 18 Nov 2024 16:45:31 +0800 Subject: [PATCH 92/95] =?UTF-8?q?fix:=20JsonSetter=20=E7=BB=91=E5=AE=9A?= =?UTF-8?q?=E7=A9=BA=E5=80=BC=E6=97=B6=E6=84=8F=E5=A4=96=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E7=BB=91=E5=AE=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/json-setter/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/setter/json-setter/index.tsx b/src/setter/json-setter/index.tsx index 447c040..87b5b5d 100644 --- a/src/setter/json-setter/index.tsx +++ b/src/setter/json-setter/index.tsx @@ -59,7 +59,7 @@ export default class JsonSetter extends PureComponent<JsonSetterProps> { }; componentWillReceiveProps(nextProps) { - let nextValue = JSON.stringify(nextProps.value); + const nextValue = JSON.stringify(nextProps.value); if (nextValue !== this.state.value) { this.setState({ value: nextValue, @@ -106,7 +106,8 @@ export default class JsonSetter extends PureComponent<JsonSetterProps> { }); } } else { - removeProp(); + onChange(undefined); + // removeProp(); this.closeDialog(); } }; From 0d01b060257debf52e4bcbdb44b902e9e5dfda59 Mon Sep 17 00:00:00 2001 From: jingyu <jingyu.wsh@antgroup.com> Date: Mon, 18 Nov 2024 16:45:47 +0800 Subject: [PATCH 93/95] =?UTF-8?q?fix:=20=E7=B1=BB=E5=90=8D=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E4=B8=8D=E5=85=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/classname-setter/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/setter/classname-setter/index.tsx b/src/setter/classname-setter/index.tsx index f05d6d3..486b8b7 100644 --- a/src/setter/classname-setter/index.tsx +++ b/src/setter/classname-setter/index.tsx @@ -21,14 +21,14 @@ export default class ClassNameView extends PureComponent<PluginProps> { getClassNameList = () => { const schema = ClassNameView?.defaultProps?.getSchema?.() || project.exportSchema(); - const css = schema.componentsTree[0].css; - return css?.match(/(?<=\.)\w+(?=\s*[{,])/g) || []; + const {css} = schema.componentsTree[0]; + return css?.match(/(?<=((?<!([\d\w_-]+))\.))[\w-_\d]+(?=\s*([{,])?)/g) || []; }; setClassNameSetterData = () => { const { value } = this.props; const classNameList = this.getClassNameList(); - const dataSource: { label: string; value : string}[] = []; + const dataSource: Array<{ label: string; value : string}> = []; classNameList.map((item: string) => { dataSource.push({ value: item, @@ -70,6 +70,7 @@ export default class ClassNameView extends PureComponent<PluginProps> { const { dataSource, selectValue } = this.state; return ( <Select + inputMode='' className='ClassNameSetter_Select' style={{ width: '100%' }} mode="multiple" From e14b46457f87481b153a999238b823dc344223e3 Mon Sep 17 00:00:00 2001 From: jingyu <jingyu.wsh@antgroup.com> Date: Tue, 19 Nov 2024 19:05:57 +0800 Subject: [PATCH 94/95] =?UTF-8?q?fix:=20=E5=8F=98=E9=87=8F=E7=BB=91?= =?UTF-8?q?=E5=AE=9A=E6=9C=80=E5=A4=A7=E9=95=BF=E5=BA=A6=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugin/plugin-simple-bind-popup/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugin/plugin-simple-bind-popup/index.tsx b/src/plugin/plugin-simple-bind-popup/index.tsx index f53f68f..aa3bc62 100644 --- a/src/plugin/plugin-simple-bind-popup/index.tsx +++ b/src/plugin/plugin-simple-bind-popup/index.tsx @@ -55,7 +55,7 @@ export default class SimpleVariableBindPopup extends Component<PluginProps> { componentDidMount() { event.on('common:variableBindDialog.openDialog', ({ field, node, maxTextSize }) => { - const finalMaxTextSize = maxTextSize && typeof maxTextSize === 'number' ? maxTextSize : this.props.config?.props?.maxTextSize, + const finalMaxTextSize = maxTextSize && typeof maxTextSize === 'number' ? maxTextSize : this.props.config?.props?.maxTextSize; this.setState({ field, node: node || this.nodeRef, From dd011ab40c8046597c34ac8db24734649fb95a53 Mon Sep 17 00:00:00 2001 From: wenrongyun <wenr880@163.com> Date: Mon, 2 Dec 2024 10:56:12 +0800 Subject: [PATCH 95/95] =?UTF-8?q?fix:selectSetter=E7=9A=84options=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E6=96=B9=E6=B3=95stringSetter=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=92=8C=E5=8E=BB=E9=99=A4=E8=BE=B9=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/setter/select-setter/index.tsx | 9 ++++++--- src/setter/string-setter/index.tsx | 6 +++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/setter/select-setter/index.tsx b/src/setter/select-setter/index.tsx index a7b266e..f7df64f 100644 --- a/src/setter/select-setter/index.tsx +++ b/src/setter/select-setter/index.tsx @@ -6,20 +6,23 @@ interface SelectSetterProps { value?: any; mode?: 'single' | 'multiple' | 'tag'; defaultValue?: any; - options: any[]; + options: any[] | Function; /** * 展开后是否能搜索 */ showSearch?: boolean; // 是否可以清除 - hasClear?:boolean + hasClear?: boolean } interface SelectSetterState { setterValue: string | null; } -const formateOptions = (options: any[]) => { +const formateOptions = (options: any[] | Function) => { + if (typeof options === 'function') { + return options(); + } return options.map((item: any) => { if (item.children) { const children = item.children.map((child: any) => { diff --git a/src/setter/string-setter/index.tsx b/src/setter/string-setter/index.tsx index 349bebc..f030483 100644 --- a/src/setter/string-setter/index.tsx +++ b/src/setter/string-setter/index.tsx @@ -3,6 +3,8 @@ import { Input } from '@alifd/next'; import './index.less'; interface StringSetterProps { + isPreview?: boolean; + hasBorder?: boolean; value: string; defaultValue: string; placeholder: string; @@ -13,9 +15,11 @@ export default class StringSetter extends React.PureComponent<StringSetterProps, static displayName = 'StringSetter'; render() { - const { onChange, placeholder, value } = this.props; + const { onChange, placeholder, value, isPreview = false, hasBorder = true } = this.props; return ( <Input + isPreview={isPreview} + hasBorder={hasBorder} size="small" value={value} placeholder={placeholder || ''}