From b94b6d40e07e78cd713c21a4d882fab4cfa46698 Mon Sep 17 00:00:00 2001 From: rickcole Date: Mon, 3 Jun 2019 16:42:09 +0800 Subject: [PATCH 1/4] =?UTF-8?q?Picker=E6=B7=BB=E5=8A=A0embed=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderers/CRUD.tsx | 3 +- src/renderers/Form/Picker.tsx | 143 +++++++++++++++++----------------- src/renderers/Table.tsx | 3 +- 3 files changed, 75 insertions(+), 74 deletions(-) diff --git a/src/renderers/CRUD.tsx b/src/renderers/CRUD.tsx index 86a773f52..6e2aa5f7e 100644 --- a/src/renderers/CRUD.tsx +++ b/src/renderers/CRUD.tsx @@ -773,7 +773,7 @@ export default class CRUD extends React.Component { } handleSelect(items: Array, unSelectedItems: Array) { - const {store, keepItemSelectionOnPageChange, primaryField, multiple, pickerMode} = this.props; + const {store, keepItemSelectionOnPageChange, primaryField, multiple, pickerMode, onSelect} = this.props; let newItems = items; let newUnSelectedItems = unSelectedItems; @@ -796,6 +796,7 @@ export default class CRUD extends React.Component { store.setSelectedItems(newItems); store.setUnSelectedItems(newUnSelectedItems); + (pickerMode && onSelect) && onSelect(newItems); } handleChildPopOverOpen(popOver: any) { diff --git a/src/renderers/Form/Picker.tsx b/src/renderers/Form/Picker.tsx index 17cafbce4..4636ce15a 100644 --- a/src/renderers/Form/Picker.tsx +++ b/src/renderers/Form/Picker.tsx @@ -12,7 +12,7 @@ import { Action } from '../../types'; import find = require('lodash/find'); -import { anyChanged } from '../../utils/helper'; +import {anyChanged, autobind} from '../../utils/helper'; import findIndex = require('lodash/findIndex'); export interface PickerProps extends OptionsControlProps { @@ -35,9 +35,10 @@ export default class PickerControl extends React.PureComponent "options", "value", "inline", - "multiple" + "multiple", + "embed", ]; - static defaultProps:Partial = { + static defaultProps: Partial = { modalMode: 'dialog', multiple: false, pickerSchema: { @@ -45,24 +46,16 @@ export default class PickerControl extends React.PureComponent listItem: { title: '${label}' } - } + }, + embed: false } - state:PickerState = { + state: PickerState = { isOpened: false, schema: this.buildSchema(this.props) }; - constructor(props:PickerProps) { - super(props); - - this.open = this.open.bind(this); - this.close = this.close.bind(this); - this.handleModalConfirm = this.handleModalConfirm.bind(this); - this.renderBody = this.renderBody.bind(this); - } - - componentWillReceiveProps(nextProps:PickerProps) { + componentWillReceiveProps(nextProps: PickerProps) { const props = this.props; if (anyChanged([ @@ -76,7 +69,7 @@ export default class PickerControl extends React.PureComponent } } - buildSchema(props:PickerProps) { + buildSchema(props: PickerProps) { return { ...props.pickerSchema, type: 'crud', @@ -87,38 +80,47 @@ export default class PickerControl extends React.PureComponent valueField: props.valueField, labelField: props.labelField, checkOnItemClick: true, - + // 不支持批量操作，会乱套 - bulkActions: props.multiple ? (props.pickerSchema as Schema).bulkActions : [], + bulkActions: props.multiple ? (props.pickerSchema as Schema).bulkActions : [], } } + @autobind open() { this.setState({ isOpened: true }); } + @autobind close() { this.setState({ isOpened: false }); } - handleModalConfirm(values: Array, action:Action, ctx:any, components:Array) { + @autobind + handleModalConfirm(values: Array, action: Action, ctx: any, components: Array) { + const idx = findIndex(components, (item: any) => item.props.type === "crud"); + this.handleChange(values[idx].items); + this.close(); + } + + @autobind + handleChange(items: Array) { const { joinValues, - extractValue, valueField, delimiter, - setOptions, + extractValue, + multiple, options, - onChange, - multiple + setOptions, + onChange } = this.props; - const idx = findIndex(components, (item:any) => item.props.type === "crud"); - const items:Array = values[idx].items; - let value:any = items; + + let value: any = items; if (joinValues) { value = items.map((item: any) => item[valueField || 'value']).join(delimiter || ','); @@ -128,7 +130,7 @@ export default class PickerControl extends React.PureComponent value = multiple ? items : items[0]; } - let additionalOptions:Array = []; + let additionalOptions: Array = []; items.forEach(item => { if (!find(options, option => item[valueField || 'value'] == option[valueField || 'value'])) { additionalOptions.push(item); @@ -136,12 +138,10 @@ export default class PickerControl extends React.PureComponent }); additionalOptions.length && setOptions(options.concat(additionalOptions)); - onChange(value); - this.close(); } - removeItem(index:number) { + removeItem(index: number) { const { selectedOptions, joinValues, @@ -154,7 +154,7 @@ export default class PickerControl extends React.PureComponent const items = selectedOptions.concat(); items.splice(index, 1); - let value:any = items; + let value: any = items; if (joinValues) { value = items.map((item: any) => item[valueField || 'value']).join(delimiter || ','); @@ -164,14 +164,6 @@ export default class PickerControl extends React.PureComponent value = multiple ? items : items[0]; } - // if (joinValues) { - // value = items.map((item: any) => item[valueField || 'value']).join(delimiter || ','); - // } else if (extractValue) { - // value = items.map((item: any) => item[valueField || 'value']); - // } else if (!multiple) { - // value = value[0]; - // } - onChange(value); } @@ -189,27 +181,30 @@ export default class PickerControl extends React.PureComponent 'is-disabled': disabled })}> × - {item[labelField||'label']} + {item[labelField || 'label']} ))} ); } + @autobind renderBody() { const { render, selectedOptions, options, multiple, - valueField + valueField, + embed } = this.props; return render('modal-body', this.state.schema, { value: selectedOptions, valueField, options: options, - multiple + multiple, + onSelect: embed ? this.handleChange : undefined }) as JSX.Element; } @@ -220,45 +215,49 @@ export default class PickerControl extends React.PureComponent disabled, render, modalMode, - pickerSchema, source, size, - env + env, + embed } = this.props; return (
- {this.renderValues()} + {embed ? this.renderBody() : ( +
+ {this.renderValues()} - + - {render('modal', { - title: '请选择', - size: size, - type: modalMode, - body: { - children: this.renderBody - } - }, { - key: 'modal', - lazyRender: !!source, - onConfirm: this.handleModalConfirm, - onClose: this.close, - show: this.state.isOpened - })} + {render('modal', { + title: '请选择', + size: size, + type: modalMode, + body: { + children: this.renderBody + } + }, { + key: 'modal', + lazyRender: !!source, + onConfirm: this.handleModalConfirm, + onClose: this.close, + show: this.state.isOpened + })} +
+ )}
); diff --git a/src/renderers/Table.tsx b/src/renderers/Table.tsx index 9c10182ab..4314f535b 100644 --- a/src/renderers/Table.tsx +++ b/src/renderers/Table.tsx @@ -1432,7 +1432,8 @@ class TableRow extends React.Component { if ( !e.currentTarget.contains(target) || ~['INPUT', 'TEXTAREA'].indexOf(target.tagName) || - target.closest(`button, a, .${ns}Form-item`) + // target.closest(`button, a, .${ns}Form-item`) + target.closest(`button, a`) // 兼容Picker的embed模式，所以去掉了.${ns}Form-item ) { return; } From afabe2934f004e5884face43dd4da5ee5675c17d Mon Sep 17 00:00:00 2001 From: rickcole Date: Mon, 3 Jun 2019 16:43:24 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E9=94=99=E5=88=AB=E5=AD=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/validations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/validations.ts b/src/utils/validations.ts index 936ba9ce4..dfb1cf302 100644 --- a/src/utils/validations.ts +++ b/src/utils/validations.ts @@ -148,7 +148,7 @@ export const validateMessages: { isEmail: 'Email 格式不正确', isRequired: '这是必填项', isUrl: 'Url 格式不正确', - isInt: '请输入整形数字', + isInt: '请输入整型数字', isAlpha: '请输入字母', isNumeric: '请输入数字', isAlphanumeric: '请输入字母或者数字', From ec32dd61563527d1aff47387e48629311ecf1cee Mon Sep 17 00:00:00 2001 From: rickcole Date: Mon, 3 Jun 2019 16:54:52 +0800 Subject: [PATCH 3/4] update --- src/renderers/CRUD.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderers/CRUD.tsx b/src/renderers/CRUD.tsx index 6e2aa5f7e..6f0fb2de3 100644 --- a/src/renderers/CRUD.tsx +++ b/src/renderers/CRUD.tsx @@ -796,7 +796,7 @@ export default class CRUD extends React.Component { store.setSelectedItems(newItems); store.setUnSelectedItems(newUnSelectedItems); - (pickerMode && onSelect) && onSelect(newItems); + onSelect && onSelect(newItems); } handleChildPopOverOpen(popOver: any) { From 74e12df358aaf6a33143a5223e87e8e09f6e45a5 Mon Sep 17 00:00:00 2001 From: rickcole Date: Mon, 3 Jun 2019 17:10:40 +0800 Subject: [PATCH 4/4] fix --- src/renderers/Form/Picker.tsx | 69 ++++++++++++++++++----------------- 1 file changed, 35 insertions(+), 34 deletions(-) diff --git a/src/renderers/Form/Picker.tsx b/src/renderers/Form/Picker.tsx index 4636ce15a..37bb127fc 100644 --- a/src/renderers/Form/Picker.tsx +++ b/src/renderers/Form/Picker.tsx @@ -220,45 +220,46 @@ export default class PickerControl extends React.PureComponent env, embed } = this.props; - return (
-
- {embed ? this.renderBody() : ( -
- {this.renderValues()} + {embed ? ( +
+ {this.renderBody()} +
+ ) : ( +
+ {this.renderValues()} - + - {render('modal', { - title: '请选择', - size: size, - type: modalMode, - body: { - children: this.renderBody - } - }, { - key: 'modal', - lazyRender: !!source, - onConfirm: this.handleModalConfirm, - onClose: this.close, - show: this.state.isOpened - })} -
+ {render('modal', { + title: '请选择', + size: size, + type: modalMode, + body: { + children: this.renderBody + } + }, { + key: 'modal', + lazyRender: !!source, + onConfirm: this.handleModalConfirm, + onClose: this.close, + show: this.state.isOpened + })} +
)} -
); }