From c49c1d220e6ebb6d6ddec576ef018fc71f540b75 Mon Sep 17 00:00:00 2001 From: huangying11 Date: Tue, 21 Jun 2022 18:40:20 +0800 Subject: [PATCH] amis-saas-4742 fix: input-range Change-Id: Icc1dcaad13d02c71fb0998773000f035dd4afab6 --- packages/amis-editor/package.json | 8 +-- .../src/plugin/Form/InputRange.tsx | 14 +++-- .../src/renderer/RangePartsControl.tsx | 53 +++++++++++-------- 3 files changed, 44 insertions(+), 31 deletions(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index c630fd314..14e0c5d61 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -52,10 +52,10 @@ "@types/sortablejs": "^1.10.7", "@types/tinycolor2": "^1.4.3", "ajv": "^8.8.2", - "amis": "^2.0.0-rc.10", - "amis-core": "^2.0.0-rc.10", - "amis-formula": "^2.0.0-rc.10", - "amis-ui": "^2.0.0-rc.10", + "amis": "^2.0.0-rc.14", + "amis-core": "^2.0.0-rc.14", + "amis-formula": "^2.0.0-rc.14", + "amis-ui": "^2.0.0-rc.14", "axios": "0.21.1", "concurrently": "^6.2.0", "css-loader": "^6.2.0", diff --git a/packages/amis-editor/src/plugin/Form/InputRange.tsx b/packages/amis-editor/src/plugin/Form/InputRange.tsx index 37625ed96..2525ea162 100644 --- a/packages/amis-editor/src/plugin/Form/InputRange.tsx +++ b/packages/amis-editor/src/plugin/Form/InputRange.tsx @@ -149,8 +149,10 @@ export class RangeControlPlugin extends BasePlugin { }, getSchemaTpl('valueFormula', { + name: 'value', rendererSchema: { ...context?.schema, + value: context?.schema.min || 0, type: 'input-number' }, valueType: 'number', // 期望数值类型 @@ -161,7 +163,7 @@ export class RangeControlPlugin extends BasePlugin { name: 'min', rendererSchema: { ...context?.schema, - value: context?.schema.min, + value: context?.schema.min || 0, type: 'input-number' }, needDeleteProps: ['min'], // 避免自我限制 @@ -176,7 +178,7 @@ export class RangeControlPlugin extends BasePlugin { name: 'max', rendererSchema: { ...context?.schema, - value: context?.schema.max, + value: context?.schema.max || 100, type: 'input-number' }, needDeleteProps: ['max'], // 避免自我限制 @@ -217,7 +219,10 @@ export class RangeControlPlugin extends BasePlugin { label: '步长', name: 'step', type: 'input-number', - value: 1 + value: 1, + pipeOut: (value?: number) => { + return value || 1; + } }, { @@ -284,7 +289,8 @@ export class RangeControlPlugin extends BasePlugin { }, { type: 'ae-marksControl', - mode: 'normal' + mode: 'normal', + name: 'marks' } ] }, diff --git a/packages/amis-editor/src/renderer/RangePartsControl.tsx b/packages/amis-editor/src/renderer/RangePartsControl.tsx index d5488fdf5..92d0711df 100644 --- a/packages/amis-editor/src/renderer/RangePartsControl.tsx +++ b/packages/amis-editor/src/renderer/RangePartsControl.tsx @@ -57,6 +57,20 @@ const MarksSourceOptions = [ {label: '自定义', value: MarksSourceEnum.CUSTOM} ]; +// 根据滑块配置获取分块方式 +const getPartsSource = (parts: number | number[], showSteps?: boolean) => { + if (Array.isArray(parts)) { + return PartsSourceEnum.CUSTOM; + } + if (parts > 1) { + return PartsSourceEnum.AVERAGE; + } + if (showSteps) { + return PartsSourceEnum.STEPS; + } + return PartsSourceEnum.NO_BLOCK; +} + /** * 分块 */ @@ -67,26 +81,14 @@ export class PartsControl extends React.Component< constructor(props: PartsControlProps) { super(props); - const {partsSource = PartsSourceEnum.NO_BLOCK, parts = 1} = props.data; + const {parts = 1, showSteps} = props.data; this.state = { - options: this.transformOptionValue(partsSource, parts), - source: this.getPartsSource(parts), + options: this.transformOptionValue(getPartsSource(parts), parts), + source: getPartsSource(parts, showSteps), parts }; } - // 根据滑块配置获取分块方式 - @autobind - getPartsSource(parts: number | number[]) { - if (Array.isArray(parts)) { - return PartsSourceEnum.CUSTOM; - } - if (parts > 1) { - return PartsSourceEnum.AVERAGE; - } - return PartsSourceEnum.NO_BLOCK; - } - @autobind transformOptionValue(source: string, parts: number | number[]) { if (source === PartsSourceEnum.CUSTOM && Array.isArray(parts)) { @@ -274,17 +276,21 @@ export class MarksControl extends React.Component< } componentDidUpdate(prevProps: MarksControlProps) { - const {parts, partsSource, unit} = prevProps.data; + const {parts, unit, max, min, showSteps} = prevProps.data; const { parts: nextParts, - partsSource: nextPartsSource, - unit: nextUnit + unit: nextUnit, + max: nextMax, + min: nextMin, + showSteps: nextShowSteps } = this.props.data; const {source} = this.state; if ( parts !== nextParts || - partsSource !== nextPartsSource || - unit !== nextUnit + unit !== nextUnit || + max !== nextMax || + min !== nextMin || + showSteps !== nextShowSteps ) { // 与分块保持一致，当分块、单位发生变换同步时，同步下标 source === MarksSourceEnum.PARKS && this.onSynchronismParts(); @@ -310,14 +316,14 @@ export class MarksControl extends React.Component< @autobind onChange() { const {options} = this.state; - const {onBulkChange} = this.props; + const {onChange} = this.props; const marks: {[index: number]: any} = {}; if (options && !!options.length) { options.forEach((item: MarksOptionControlItem) => { marks[item.number] = item.label || item.number; }); } - onBulkChange && onBulkChange({marks}); + onChange && onChange(marks); } /** @@ -326,9 +332,10 @@ export class MarksControl extends React.Component< @autobind onSynchronismParts() { const { - data: {parts, partsSource, max, min, step = 1, unit = ''} + data: {parts, max, min, step = 1, unit = '', showSteps} } = this.props; const options = []; + const partsSource = getPartsSource(parts, showSteps); switch (partsSource) { case PartsSourceEnum.AVERAGE: const len = (max - min) / parts;