test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 19:08:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

InputBox 小调整

Browse Source
This commit is contained in:
2betop 2020-05-14 15:39:43 +08:00
parent ebb7a49d28
commit d9b08ce183
6 changed files with 88 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/components/Form/Full.jsx
View File

@ -746,6 +746,9 @@ export default {
name: 'textarea',
label: '多行文本'
},
{
type: 'divider'
},
{
label: '穿梭器',
name: 'a',

7
scss/components/form/_text.scss
View File

@ -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 {

17
src/components/InputBox.tsx
View File

@ -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<InputBoxProps, InputBoxState> {
classPrefix,
clearable,
disabled,
hasError,
value,
placeholder,
result,
children,
...rest
} = this.props;
const isFocused = this.state.isFocused;
return (
<div className={cx('InputBox', className, isFocused ? 'is-focused' : '')}>
<div
className={cx(
'InputBox',
className,
isFocused ? 'is-focused' : '',
disabled ? 'is-disabled' : '',
hasError ? 'is-error' : ''
)}
>
{result}
<Input
{...rest}
value={value || ''}
@ -84,6 +98,7 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
onFocus={this.handleFocus}
onBlur={this.handleBlur}
/>
{clearable && !disabled && value ? (
<a onClick={this.clearValue} className={cx('InputBox-clear')}>
<Icon icon="close" className="icon" />

3
src/renderers/CRUD.tsx
View File

@ -477,9 +477,6 @@ export default class CRUD extends React.Component<CRUDProps, any> {
store.updateData({
items: options || []
});
// 只执行一次。
this.handleFilterInit = noop;
}
handleFilterReset(values: object) {

6
src/renderers/Form/Text.tsx
View File

@ -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'
? {

124
src/renderers/Form/index.tsx
View File

@ -600,71 +600,69 @@ export default class Form extends React.Component<FormProps, object> {
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;