feat: combo row模式组件支持选择宽度

baidu · Dec 4, 2024 · 4897f39 · 4897f39
1 parent 0a9527f
commit 4897f39
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 27 deletions.
diff --git 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<FormProps, object> {
 
       return (
         <div className={cx('Form-row')}>
-          {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)
             ) : (
               <div
                 key={key}
                 className={cx(`Form-col`, (control as Schema).columnClassName)}
+                style={{
+                  flex:
+                    colSize && !['1', 'auto'].includes(colSize)
+                      ? `0 0 ${colSize}`
+                      : '1'
+                }}
               >
                 {this.renderChild(control, '', {
                   ...otherProps,
                   mode: 'row'
                 })}
               </div>
-            )
-          )}
+            );
+          })}
         </div>
       );
     }

diff --git 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
@@ -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
@@ -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
@@ -37,11 +37,17 @@ const ColSize: React.FC<FormControlProps> = 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<FormControlProps> = 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<FormControlProps> = props => {
     props.setValue(value, 'size');
   }
 
-  return isFlex ? (
+  return isFlex || isComboRow ? (
     <div className="ColSize">
-      {baseColSize.map(n => (
-        <div
-          className={cx(
-            'ColSize-item',
-            value === n && 'is-active',
-            !colSizeMap[length]?.includes(n) && 'is-disabled',
-            node.schema.$$dragMode === 'hv' && 'is-disabled'
-          )}
-          key={n}
-          onClick={() => handleColSizeChange(n)}
-        >
-          {n}
-        </div>
-      ))}
+      {baseColSize
+        .filter(n => {
+          if (type === 'combo' && !multiLine && n === '1') {
+            return false;
+          }
+          return true;
+        })
+        .map(n => (
+          <div
+            className={cx(
+              'ColSize-item',
+              value === n && 'is-active',
+              !colSizeMap[length]?.includes(n) && 'is-disabled',
+              node.schema.$$dragMode === 'hv' && 'is-disabled'
+            )}
+            key={n}
+            onClick={() => handleColSizeChange(n)}
+          >
+            {n}
+          </div>
+        ))}
     </div>
   ) : (
     props.render('size', {