combo 样式优化

scss/components/form/_combo.scss

@@ -159,8 +159,8 @@
       // opacity: 1;
     }
 
-    > .#{$ns}Combo-item:hover,
-    > .#{$ns}Combo-items > .#{$ns}Combo-item:hover {
+    &:not(.is-disabled) > .#{$ns}Combo-item:hover,
+    &:not(.is-disabled) > .#{$ns}Combo-items > .#{$ns}Combo-item:hover {
       border-color: $Combo--vertical-item-onHover-borderColor;
       // border-style: solid;
 

scss/components/form/_image.scss

@@ -14,8 +14,10 @@
     align-items: center;
     border: $borderWidth solid $borderColor;
     cursor: pointer;
+    margin-right: $gap-base;
 
-    @include button-variant($ImageControl-addBtn-bg,
+    @include button-variant(
+      $ImageControl-addBtn-bg,
       $ImageControl-addBtn-border,
       $ImageControl-addBtn-color,
       $ImageControl-addBtn-onHover-bg,
@@ -23,9 +25,10 @@
       $ImageControl-addBtn-onHover-color,
       $ImageControl-addBtn-onActive-bg,
       $ImageControl-addBtn-onActive-border,
-      $ImageControl-addBtn-onActive-color);
+      $ImageControl-addBtn-onActive-color
+    );
 
-    >svg {
+    > svg {
       width: px2rem(50px);
       height: px2rem(50px);
       top: 0;
@@ -99,13 +102,13 @@
     flex-wrap: wrap;
     color: #fff;
 
-    >div {
+    > div {
       width: 100%;
       text-align: center;
       margin-bottom: 5px;
     }
 
-    >a {
+    > a {
       cursor: pointer;
       color: #fff;
       display: inline-block;
@@ -128,7 +131,7 @@
     right: 5px;
     line-height: 1;
 
-    >svg {
+    > svg {
       top: 0;
       width: 10px;
       height: 10px;
@@ -144,7 +147,7 @@
     align-content: center;
     flex-wrap: wrap;
 
-    >p {
+    > p {
       width: 100%;
       text-align: center;
       font-size: 12px;
@@ -191,7 +194,7 @@
       text-decoration: none;
     }
 
-    >p {
+    > p {
       width: 100%;
       text-align: center;
       color: $danger;
@@ -226,7 +229,7 @@
     flex-direction: column;
     align-items: flex-end;
 
-    >a {
+    > a {
       color: #fff;
       padding: 2px 5px;
       cursor: pointer;
@@ -249,4 +252,4 @@
     line-height: 120px;
     text-align: center;
   }
-}
+}

src/renderers/Form/Combo.tsx

@@ -365,7 +365,6 @@ export default class ComboControl extends React.Component<ComboProps> {
   handleFormInit(values: any, {index}: any) {
     const {
       syncDefaultValue,
-      disabled,
       flat,
       joinValues,
       delimiter,
@@ -381,7 +380,7 @@ export default class ComboControl extends React.Component<ComboProps> {
       setted: false
     });
 
-    if (syncDefaultValue === false || disabled || this.subFormDefaultValues.length !== this.subForms.length) {
+    if (syncDefaultValue === false  || this.subFormDefaultValues.length !== this.subForms.length) {
       return;
     }
 
@@ -863,7 +862,8 @@ export default class ComboControl extends React.Component<ComboProps> {
         className={cx(
           `Combo Combo--multi`,
           multiLine ? `Combo--ver` : `Combo--hor`,
-          noBorder ? `Combo--noBorder` : ''
+          noBorder ? `Combo--noBorder` : '',
+          disabled ? 'is-disabled' : ''
         )}
       >
         <div className={cx(`Combo-items`)}>
@@ -1050,7 +1050,7 @@ export default class ComboControl extends React.Component<ComboProps> {
       canAccessSuperData,
       noBorder,
       disabled,
-      typeSwitchable
+      typeSwitchable,
     } = this.props;
 
     let controls = this.props.controls;
@@ -1067,7 +1067,8 @@ export default class ComboControl extends React.Component<ComboProps> {
         className={cx(
           `Combo Combo--single`,
           multiLine ? `Combo--ver` : `Combo--hor`,
-          noBorder ? `Combo--noBorder` : ''
+          noBorder ? `Combo--noBorder` : '',
+          disabled ? 'is-disabled' : ''
         )}
       >
         <div className={cx(`Combo-item`)}>
@@ -1119,7 +1120,7 @@ export default class ComboControl extends React.Component<ComboProps> {
   }
 
   render() {
-    const {multiple, className, classPrefix: ns, classnames: cx} = this.props;
+    const {multiple, className, classPrefix: ns, classnames: cx, disabled} = this.props;
 
     return (
       <div className={cx(`ComboControl`, className)}>

src/renderers/Form/Group.tsx

@@ -27,28 +27,15 @@ export class ControlGroupRenderer extends React.Component<InputGroupProps> {
   }
 
   renderControl(control: any, index: any, otherProps?: any) {
-    const {render} = this.props;
+    const {renderControl, disabled} = this.props;
 
     if (!control) {
       return null;
     }
 
-    const subSchema: any =
-      control && (control as Schema).type === 'control'
-        ? control
-        : {
-            type: 'control',
-            control
-          };
-
-    if (subSchema.control) {
-      let control = subSchema.control as Schema;
-      control.hiddenOn && (subSchema.hiddenOn = control.hiddenOn);
-      control.visibleOn && (subSchema.visibleOn = control.visibleOn);
-    }
-
-    return render(`${index}`, subSchema, {
-      ...otherProps
+    return renderControl(control, index, {
+      ...otherProps,
+      disabled
     });
   }
 

src/renderers/Form/index.tsx

@@ -190,6 +190,7 @@ export default class Form extends React.Component<FormProps, object> {
     this.removeHook = this.removeHook.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.renderFormItems = this.renderFormItems.bind(this);
+    this.renderControl = this.renderControl.bind(this);
     this.reload = this.reload.bind(this);
     this.silentReload = this.silentReload.bind(this);
     this.initInterval = this.initInterval.bind(this);
@@ -959,6 +960,7 @@ export default class Form extends React.Component<FormProps, object> {
       addHook: this.addHook,
       removeHook: this.removeHook,
       renderFormItems: this.renderFormItems,
+      renderControl: this.renderControl,
       formPristine: form.pristine
     };
 

src/renderers/Images.tsx

@@ -65,7 +65,7 @@ export class ImagesField extends React.Component<ImagesProps> {
               : (item && item.image) || item,
             originalSrc: originalSrc
               ? filter(originalSrc, item, '| raw')
-              : item && item.src,
+              : (item && item.src) || item,
             title: item && (item.enlargeTitle || item.title),
             caption:
               item && (item.enlargeCaption || item.description || item.caption)
@@ -121,14 +121,13 @@ export class ImagesField extends React.Component<ImagesProps> {
                 className={cx('Images-item')}
                 key={index}
                 src={
-                  src
-                    ? filter(src, item, '| raw')
-                    : (item && item.image) || item
+                  (src ? filter(src, item, '| raw') : item && item.image) ||
+                  item
                 }
                 originalSrc={
-                  originalSrc
+                  (originalSrc
                     ? filter(originalSrc, item, '| raw')
-                    : item && item.src
+                    : item && item.src) || item
                 }
                 title={item && item.title}
                 caption={item && (item.description || item.caption)}