From 5e5aebd2bfc6c12086b3c4913e2ca30ecf22c2e6 Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Thu, 14 May 2020 15:39:43 +0800 Subject: [PATCH] =?UTF-8?q?InputBox=20=E5=B0=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/components/Form/Full.jsx | 3 + scss/components/form/_text.scss | 7 +- src/components/InputBox.tsx | 17 +++- src/renderers/CRUD.tsx | 3 - src/renderers/Form/Text.tsx | 6 +- src/renderers/Form/index.tsx | 124 +++++++++++++++--------------- 6 files changed, 88 insertions(+), 72 deletions(-) diff --git a/examples/components/Form/Full.jsx b/examples/components/Form/Full.jsx index d09d4d56c..3f03982e9 100644 --- a/examples/components/Form/Full.jsx +++ b/examples/components/Form/Full.jsx @@ -746,6 +746,9 @@ export default { name: 'textarea', label: '多行文本' }, + { + type: 'divider' + }, { label: '穿梭器', name: 'a', diff --git a/scss/components/form/_text.scss b/scss/components/form/_text.scss index 99b3ad44e..b5530cde4 100644 --- a/scss/components/form/_text.scss +++ b/scss/components/form/_text.scss @@ -26,8 +26,11 @@ line-height: $Form-input-lineHeight; padding: $Form-input-paddingY $Form-input-paddingX; font-size: $Form-input-fontSize; + flex-wrap: wrap; input { + flex-basis: px2rem(80px); + flex-grow: 1; outline: none; background: transparent; border: none; @@ -40,10 +43,6 @@ user-select: none; } } - - > input { - flex-grow: 1; - } } @mixin input-text { diff --git a/src/components/InputBox.tsx b/src/components/InputBox.tsx index 9a19e1782..d2279a86b 100644 --- a/src/components/InputBox.tsx +++ b/src/components/InputBox.tsx @@ -12,7 +12,9 @@ export interface InputBoxProps onChange?: (value: string) => void; clearable?: boolean; disabled?: boolean; + hasError?: boolean; placeholder?: string; + result: JSX.Element; children?: JSX.Element; } @@ -67,15 +69,27 @@ export class InputBox extends React.Component { classPrefix, clearable, disabled, + hasError, value, placeholder, + result, children, ...rest } = this.props; const isFocused = this.state.isFocused; return ( -
+
+ {result} + { onFocus={this.handleFocus} onBlur={this.handleBlur} /> + {clearable && !disabled && value ? ( diff --git a/src/renderers/CRUD.tsx b/src/renderers/CRUD.tsx index a399ccd6b..77e9947eb 100644 --- a/src/renderers/CRUD.tsx +++ b/src/renderers/CRUD.tsx @@ -477,9 +477,6 @@ export default class CRUD extends React.Component { store.updateData({ items: options || [] }); - - // 只执行一次。 - this.handleFilterInit = noop; } handleFilterReset(values: object) { diff --git a/src/renderers/Form/Text.tsx b/src/renderers/Form/Text.tsx index 90db02199..ed9d924f5 100644 --- a/src/renderers/Form/Text.tsx +++ b/src/renderers/Form/Text.tsx @@ -451,7 +451,7 @@ export default class TextControl extends React.PureComponent< filtedOptions.push({ [labelField || 'label']: this.state.inputValue, [valueField || 'value']: this.state.inputValue, - 'isNew': true + isNew: true }); } @@ -626,6 +626,10 @@ export default class TextControl extends React.PureComponent< inputOnly } = this.props; + if (this.props.name === 'query') { + console.log('Text'); + } + const addOn: any = typeof addOnRaw === 'string' ? { diff --git a/src/renderers/Form/index.tsx b/src/renderers/Form/index.tsx index d77009965..d3c26dafa 100644 --- a/src/renderers/Form/index.tsx +++ b/src/renderers/Form/index.tsx @@ -600,71 +600,69 @@ export default class Form extends React.Component { action.actionType === 'confirm' ) { store.setCurrentAction(action); - return this.submit( - (values): any => { - if (onSubmit && onSubmit(values, action) === false) { - return Promise.resolve(values); - } - - if (target) { - this.submitToTarget(target, values); - } else if (action.actionType === 'reload') { - action.target && this.reloadTarget(action.target, values); - } else if (action.actionType === 'dialog') { - store.openDialog(data); - } else if (action.actionType === 'drawer') { - store.openDrawer(data); - } else if (isEffectiveApi(action.api || api, values)) { - let finnalAsyncApi = action.asyncApi || asyncApi; - - isEffectiveApi(finnalAsyncApi, store.data) && - store.updateData({ - [finishedField || 'finished']: false - }); - - return store - .saveRemote(action.api || (api as Api), values, { - successMessage: saveSuccess, - errorMessage: saveFailed, - onSuccess: () => { - if ( - !isEffectiveApi(finnalAsyncApi, store.data) || - store.data[finishedField || 'finished'] - ) { - return; - } - - return until( - () => store.checkRemote(finnalAsyncApi as Api, store.data), - (ret: any) => ret && ret[finishedField || 'finished'], - cancel => (this.asyncCancel = cancel), - checkInterval - ); - } - }) - .then(async response => { - onSaved && onSaved(values, response); - - // submit 也支持 feedback - if (action.feedback && isVisible(action.feedback, store.data)) { - const confirmed = await this.openFeedback( - action.feedback, - store.data - ); - - // 如果 feedback 配置了，取消就跳过原有逻辑。 - if (action.feedback.skipRestOnCancel && !confirmed) { - throw new SkipOperation(); - } - } - - return values; - }); - } - + return this.submit((values): any => { + if (onSubmit && onSubmit(values, action) === false) { return Promise.resolve(values); } - ) + + if (target) { + this.submitToTarget(target, values); + } else if (action.actionType === 'reload') { + action.target && this.reloadTarget(action.target, values); + } else if (action.actionType === 'dialog') { + store.openDialog(data); + } else if (action.actionType === 'drawer') { + store.openDrawer(data); + } else if (isEffectiveApi(action.api || api, values)) { + let finnalAsyncApi = action.asyncApi || asyncApi; + + isEffectiveApi(finnalAsyncApi, store.data) && + store.updateData({ + [finishedField || 'finished']: false + }); + + return store + .saveRemote(action.api || (api as Api), values, { + successMessage: saveSuccess, + errorMessage: saveFailed, + onSuccess: () => { + if ( + !isEffectiveApi(finnalAsyncApi, store.data) || + store.data[finishedField || 'finished'] + ) { + return; + } + + return until( + () => store.checkRemote(finnalAsyncApi as Api, store.data), + (ret: any) => ret && ret[finishedField || 'finished'], + cancel => (this.asyncCancel = cancel), + checkInterval + ); + } + }) + .then(async response => { + onSaved && onSaved(values, response); + + // submit 也支持 feedback + if (action.feedback && isVisible(action.feedback, store.data)) { + const confirmed = await this.openFeedback( + action.feedback, + store.data + ); + + // 如果 feedback 配置了，取消就跳过原有逻辑。 + if (action.feedback.skipRestOnCancel && !confirmed) { + throw new SkipOperation(); + } + } + + return values; + }); + } + + return Promise.resolve(values); + }) .then(values => { if (onFinished && onFinished(values, action) === false) { return values;