diff --git a/packages/amis-core/src/renderers/Form.tsx b/packages/amis-core/src/renderers/Form.tsx index de7ee80f525..69623a7601b 100644 --- a/packages/amis-core/src/renderers/Form.tsx +++ b/packages/amis-core/src/renderers/Form.tsx @@ -1814,22 +1814,33 @@ export default class Form extends React.Component { return (
- {children.map((control, key) => - ~['hidden', 'formula'].indexOf((control as any).type) || - (control as any).mode === 'inline' ? ( + {children.map((control, key) => { + const split = control.colSize?.split('/'); + const colSize = + split?.[0] && split?.[1] + ? (split[0] / split[1]) * 100 + '%' + : control.colSize; + return ~['hidden', 'formula'].indexOf((control as any).type) || + (control as any).mode === 'inline' ? ( this.renderChild(control, key, otherProps) ) : (
{this.renderChild(control, '', { ...otherProps, mode: 'row' })}
- ) - )} + ); + })}
); } diff --git a/packages/amis-editor/src/plugin/Form/Checkbox.tsx b/packages/amis-editor/src/plugin/Form/Checkbox.tsx index f71b69fe5a8..1f425965e5e 100644 --- a/packages/amis-editor/src/plugin/Form/Checkbox.tsx +++ b/packages/amis-editor/src/plugin/Form/Checkbox.tsx @@ -231,7 +231,6 @@ export class CheckboxControlPlugin extends BasePlugin { body: [ getSchemaTpl('collapseGroup', [ getSchemaTpl('theme:formItem', { - hidSize: true, schema: [ { type: 'select', diff --git a/packages/amis-editor/src/plugin/Form/Checkboxes.tsx b/packages/amis-editor/src/plugin/Form/Checkboxes.tsx index ece890dd000..2e7e0ad05ff 100644 --- a/packages/amis-editor/src/plugin/Form/Checkboxes.tsx +++ b/packages/amis-editor/src/plugin/Form/Checkboxes.tsx @@ -238,7 +238,6 @@ export class CheckboxesControlPlugin extends BasePlugin { body: [ getSchemaTpl('collapseGroup', [ getSchemaTpl('theme:formItem', { - hidSize: true, schema: [ getSchemaTpl('switch', { label: '一行选项显示', diff --git a/packages/amis-editor/src/plugin/Form/Radios.tsx b/packages/amis-editor/src/plugin/Form/Radios.tsx index c5b526dad29..4572ebd2d3f 100644 --- a/packages/amis-editor/src/plugin/Form/Radios.tsx +++ b/packages/amis-editor/src/plugin/Form/Radios.tsx @@ -168,7 +168,6 @@ export class RadiosControlPlugin extends BasePlugin { body: [ getSchemaTpl('collapseGroup', [ getSchemaTpl('theme:formItem', { - hidSize: true, schema: [ getSchemaTpl('switch', { label: '一行选项显示', @@ -298,14 +297,14 @@ export class RadiosControlPlugin extends BasePlugin { { label: '隐藏勾选框', type: 'switch', - name: 'themeCss.radiosShowClassName.display', + name: 'themeCss?.radiosShowClassName.display', trueValue: 'none' }, ...inputStateTpl('themeCss.radiosClassName', '', { hideFont: true, hideMargin: true, hidePadding: true, - hiddenOn: 'themeCss.radiosShowClassName.display === "none"', + hiddenOn: 'themeCss?.radiosShowClassName.display === "none"', backgroundToken: (state: string) => { const s = state.split('-'); if (s[0] === 'checked' && s[1] !== 'disabled') { diff --git a/packages/amis-editor/src/renderer/style-control/ColSize.tsx b/packages/amis-editor/src/renderer/style-control/ColSize.tsx index 727d99f5833..34076ab465c 100644 --- a/packages/amis-editor/src/renderer/style-control/ColSize.tsx +++ b/packages/amis-editor/src/renderer/style-control/ColSize.tsx @@ -37,11 +37,17 @@ const ColSize: React.FC = props => { const parent = store.getNodeById(node.parentId); const isFlex = parent?.schema?.mode === 'flex'; - const value = isFlex ? props.data.colSize : props.data.size; + // combo的row模式 + const type = parent?.schema?.type; + const multiLine = parent?.schema?.multiLine; + const tabsMode = parent?.schema?.tabsMode; + const isComboRow = type === 'combo' && !multiLine && !tabsMode; + + const value = isFlex || isComboRow ? props.data.colSize : props.data.size; function handleColSizeChange(value: string) { if ( - !colSizeMap[length].includes(value) || + !colSizeMap[length]?.includes(value) || node?.schema?.$$dragMode === 'hv' ) { return; @@ -77,6 +83,14 @@ const ColSize: React.FC = props => { return item; }); } + } else if (isComboRow) { + const colSize = getColSize(value, length - 1); + list = list.map((item: any) => { + if (item.$$id !== node.id) { + item.colSize = colSize; + } + return item; + }); } const schema = JSONUpdate(store.schema, node.parentId, { @@ -91,22 +105,29 @@ const ColSize: React.FC = props => { props.setValue(value, 'size'); } - return isFlex ? ( + return isFlex || isComboRow ? (
- {baseColSize.map(n => ( -
handleColSizeChange(n)} - > - {n} -
- ))} + {baseColSize + .filter(n => { + if (type === 'combo' && !multiLine && n === '1') { + return false; + } + return true; + }) + .map(n => ( +
handleColSizeChange(n)} + > + {n} +
+ ))}
) : ( props.render('size', { diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/combo.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/combo.test.tsx.snap index a59c9a1036e..172a0c91f80 100644 --- a/packages/amis/__tests__/renderers/Form/__snapshots__/combo.test.tsx.snap +++ b/packages/amis/__tests__/renderers/Form/__snapshots__/combo.test.tsx.snap @@ -93,6 +93,7 @@ exports[`Renderer:combo with addable & addattop & addBtn & addButtonText & addBu >