From 6670b899b1be123f870601b20346a50ade472bcf Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Thu, 9 Jan 2020 16:25:41 +0800 Subject: [PATCH] =?UTF-8?q?combo=20=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scss/components/form/_combo.scss | 4 ++-- scss/components/form/_image.scss | 23 +++++++++++++---------- src/renderers/Form/Combo.tsx | 13 +++++++------ src/renderers/Form/Group.tsx | 21 ++++----------------- src/renderers/Form/index.tsx | 2 ++ src/renderers/Images.tsx | 11 +++++------ 6 files changed, 33 insertions(+), 41 deletions(-) diff --git a/scss/components/form/_combo.scss b/scss/components/form/_combo.scss index d3ad66ee..3ed47fab 100644 --- a/scss/components/form/_combo.scss +++ b/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; diff --git a/scss/components/form/_image.scss b/scss/components/form/_image.scss index bd225436..2979933f 100644 --- a/scss/components/form/_image.scss +++ b/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; } -} \ No newline at end of file +} diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx index fc83209e..98c05f8d 100644 --- a/src/renderers/Form/Combo.tsx +++ b/src/renderers/Form/Combo.tsx @@ -365,7 +365,6 @@ export default class ComboControl extends React.Component { handleFormInit(values: any, {index}: any) { const { syncDefaultValue, - disabled, flat, joinValues, delimiter, @@ -381,7 +380,7 @@ export default class ComboControl extends React.Component { 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 { className={cx( `Combo Combo--multi`, multiLine ? `Combo--ver` : `Combo--hor`, - noBorder ? `Combo--noBorder` : '' + noBorder ? `Combo--noBorder` : '', + disabled ? 'is-disabled' : '' )} >
@@ -1050,7 +1050,7 @@ export default class ComboControl extends React.Component { canAccessSuperData, noBorder, disabled, - typeSwitchable + typeSwitchable, } = this.props; let controls = this.props.controls; @@ -1067,7 +1067,8 @@ export default class ComboControl extends React.Component { className={cx( `Combo Combo--single`, multiLine ? `Combo--ver` : `Combo--hor`, - noBorder ? `Combo--noBorder` : '' + noBorder ? `Combo--noBorder` : '', + disabled ? 'is-disabled' : '' )} >
@@ -1119,7 +1120,7 @@ export default class ComboControl extends React.Component { } render() { - const {multiple, className, classPrefix: ns, classnames: cx} = this.props; + const {multiple, className, classPrefix: ns, classnames: cx, disabled} = this.props; return (
diff --git a/src/renderers/Form/Group.tsx b/src/renderers/Form/Group.tsx index 06c74226..026e98c6 100644 --- a/src/renderers/Form/Group.tsx +++ b/src/renderers/Form/Group.tsx @@ -27,28 +27,15 @@ export class ControlGroupRenderer extends React.Component { } 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 }); } diff --git a/src/renderers/Form/index.tsx b/src/renderers/Form/index.tsx index 04fea8f0..c1c83010 100644 --- a/src/renderers/Form/index.tsx +++ b/src/renderers/Form/index.tsx @@ -190,6 +190,7 @@ export default class Form extends React.Component { 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 { addHook: this.addHook, removeHook: this.removeHook, renderFormItems: this.renderFormItems, + renderControl: this.renderControl, formPristine: form.pristine }; diff --git a/src/renderers/Images.tsx b/src/renderers/Images.tsx index ec446ba7..9a359cc6 100644 --- a/src/renderers/Images.tsx +++ b/src/renderers/Images.tsx @@ -65,7 +65,7 @@ export class ImagesField extends React.Component { : (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 { 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)}