增加autoFill功能
This commit is contained in:
parent
fd217dbacd
commit
ee92008e01
|
@ -134,6 +134,7 @@
|
|||
&-content {
|
||||
min-height: 0.01%;
|
||||
overflow-x: auto;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&-table {
|
||||
|
|
|
@ -19,6 +19,8 @@ import Checkbox from './Checkbox';
|
|||
import {value2array, OptionProps, Option} from './Checkboxes';
|
||||
import chunk = require('lodash/chunk');
|
||||
import {ClassNamesFn, themeable} from '../theme';
|
||||
import {isEmpty} from '../utils/helper';
|
||||
import {dataMapping} from '../utils/tpl-builtin';
|
||||
|
||||
interface RadioProps extends OptionProps {
|
||||
id?: string;
|
||||
|
@ -29,6 +31,10 @@ interface RadioProps extends OptionProps {
|
|||
inline?: boolean;
|
||||
disabled?: boolean;
|
||||
onChange?: Function;
|
||||
autoFill?: {
|
||||
[propName:string]: string
|
||||
};
|
||||
onBulkChange?: Function;
|
||||
columnsCount: number;
|
||||
itemClassName?: string;
|
||||
classPrefix: string;
|
||||
|
@ -43,7 +49,18 @@ export class Radios extends React.Component<RadioProps, any> {
|
|||
};
|
||||
|
||||
toggleOption(option: Option) {
|
||||
const {value, onChange, joinValues, extractValue, valueField, clearable, delimiter, options} = this.props;
|
||||
const {
|
||||
value,
|
||||
onChange,
|
||||
joinValues,
|
||||
extractValue,
|
||||
valueField,
|
||||
clearable,
|
||||
delimiter,
|
||||
options,
|
||||
autoFill,
|
||||
onBulkChange
|
||||
} = this.props;
|
||||
|
||||
let valueArray = value2array(value, {
|
||||
multiple: false,
|
||||
|
@ -61,6 +78,9 @@ export class Radios extends React.Component<RadioProps, any> {
|
|||
|
||||
let newValue = valueArray[0];
|
||||
|
||||
const sendTo = autoFill && !isEmpty(autoFill) && dataMapping(autoFill, newValue as Option);
|
||||
sendTo && onBulkChange && onBulkChange(sendTo);
|
||||
|
||||
if (newValue && (joinValues || extractValue)) {
|
||||
newValue = newValue[valueField || 'value'];
|
||||
}
|
||||
|
|
|
@ -44,6 +44,7 @@ export interface OptionProps {
|
|||
delimiter?: string;
|
||||
clearable?: boolean;
|
||||
placeholder?: string;
|
||||
autoFill?: {[propName:string]: any}
|
||||
}
|
||||
|
||||
export type OptionValue = string | number | null | undefined | Option;
|
||||
|
|
|
@ -55,7 +55,7 @@ const defaultSchema = {
|
|||
<% } %>
|
||||
<% } else if (data.hasOwnProperty('html')) { %>
|
||||
<%= data.html %>
|
||||
<% } else if (data.hasOwnproperty('item')) { %>
|
||||
<% } else if (data.hasOwnProperty('item')) { %>
|
||||
<%= data.item %>
|
||||
<% } else { %>
|
||||
<%= '未找到渲染数据' %>
|
||||
|
|
|
@ -2,12 +2,14 @@ import React from 'react';
|
|||
import cx from 'classnames';
|
||||
import {
|
||||
OptionsControl,
|
||||
OptionsControlProps
|
||||
OptionsControlProps,
|
||||
Option
|
||||
} from './Options';
|
||||
import {
|
||||
Button
|
||||
} from '../../types';
|
||||
import { getLevelFromClassName } from '../../utils/helper';
|
||||
import { getLevelFromClassName, autobind, isEmpty} from '../../utils/helper';
|
||||
import { dataMapping } from '../../utils/tpl-builtin';
|
||||
|
||||
export interface ButtonGroupProps extends OptionsControlProps {
|
||||
buttons?: Array<Button>;
|
||||
|
@ -26,6 +28,20 @@ export default class ButtonGroupControl extends React.Component<ButtonGroupProps
|
|||
vertical: false
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleToggle(option: Option) {
|
||||
const {
|
||||
onToggle,
|
||||
multiple,
|
||||
autoFill,
|
||||
onBulkChange
|
||||
} = this.props;
|
||||
|
||||
const sendTo = !multiple && autoFill && !isEmpty(autoFill) && dataMapping(autoFill, option as Option);
|
||||
sendTo && onBulkChange(sendTo);
|
||||
onToggle(option)
|
||||
}
|
||||
|
||||
render(props = this.props) {
|
||||
const {
|
||||
render,
|
||||
|
@ -38,7 +54,6 @@ export default class ButtonGroupControl extends React.Component<ButtonGroupProps
|
|||
placeholder,
|
||||
btnClassName,
|
||||
btnActiveClassName,
|
||||
onToggle,
|
||||
selectedOptions,
|
||||
buttons,
|
||||
size,
|
||||
|
@ -69,7 +84,7 @@ export default class ButtonGroupControl extends React.Component<ButtonGroupProps
|
|||
className: cx(option.className, btnClassName),
|
||||
disabled: option.disabled || disabled,
|
||||
onClick: (e:React.UIEvent<any>) => {
|
||||
onToggle(option);
|
||||
this.handleToggle(option);
|
||||
e.preventDefault(); // 禁止 onAction 触发
|
||||
}
|
||||
});
|
||||
|
|
|
@ -7,7 +7,8 @@ import {
|
|||
import cx from 'classnames';
|
||||
import Checkbox from '../../components/Checkbox';
|
||||
import chunk = require('lodash/chunk');
|
||||
import { autobind } from '../../utils/helper';
|
||||
import {autobind, isEmpty} from '../../utils/helper';
|
||||
import {dataMapping} from '../../utils/tpl-builtin';
|
||||
|
||||
export interface CheckboxesProps extends OptionsControlProps {
|
||||
placeholder?: any;
|
||||
|
@ -32,6 +33,20 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
|
|||
defaultCheckAll && onToggleAll();
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleToggle(option: Option) {
|
||||
const {
|
||||
onToggle,
|
||||
multiple,
|
||||
autoFill,
|
||||
onBulkChange
|
||||
} = this.props;
|
||||
|
||||
const sendTo = !multiple && autoFill && !isEmpty(autoFill) && dataMapping(autoFill, option as Option);
|
||||
sendTo && onBulkChange(sendTo);
|
||||
onToggle(option);
|
||||
}
|
||||
|
||||
renderGroup(option:Option, index:number) {
|
||||
const {
|
||||
classnames: cx
|
||||
|
@ -67,7 +82,7 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
|
|||
<Checkbox
|
||||
className={itemClassName}
|
||||
key={index}
|
||||
onChange={() => onToggle(option)}
|
||||
onChange={() => this.handleToggle(option)}
|
||||
checked={!!~selectedOptions.indexOf(option)}
|
||||
disabled={disabled || option.disabled}
|
||||
inline={inline}
|
||||
|
|
|
@ -6,7 +6,8 @@ import {
|
|||
} from './Options';
|
||||
import { Item } from 'react-bootstrap/lib/Breadcrumb';
|
||||
import { Schema } from '../../types';
|
||||
import { createObject } from '../../utils/helper';
|
||||
import { createObject, isEmpty } from '../../utils/helper';
|
||||
import {dataMapping} from '../../utils/tpl-builtin';
|
||||
|
||||
export interface ListProps extends OptionsControlProps {
|
||||
imageClassName: string;
|
||||
|
@ -38,7 +39,17 @@ export default class ListControl extends React.Component<ListProps, any> {
|
|||
return;
|
||||
}
|
||||
|
||||
this.props.onToggle(option);
|
||||
const {
|
||||
onToggle,
|
||||
multiple,
|
||||
autoFill,
|
||||
onBulkChange
|
||||
} = this.props;
|
||||
|
||||
const sendTo = !multiple && autoFill && !isEmpty(autoFill) && dataMapping(autoFill, option as Option);
|
||||
sendTo && onBulkChange(sendTo);
|
||||
|
||||
onToggle(option);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
@ -6,7 +6,8 @@ import Checkbox from '../../components/Checkbox';
|
|||
import PopOver from '../../components/PopOver';
|
||||
import {RootCloseWrapper} from 'react-overlays';
|
||||
import {closeIcon, rightArrowIcon} from '../../components/icons';
|
||||
import {autobind, flattenTree} from '../../utils/helper'
|
||||
import {autobind, flattenTree, isEmpty} from '../../utils/helper';
|
||||
import {dataMapping} from '../../utils/tpl-builtin';
|
||||
|
||||
import {
|
||||
OptionsControl,
|
||||
|
@ -102,10 +103,16 @@ export default class NestedSelectControl extends React.Component<NestedSelectPro
|
|||
onChange,
|
||||
joinValues,
|
||||
extractValue,
|
||||
valueField
|
||||
valueField,
|
||||
autoFill,
|
||||
onBulkChange
|
||||
} = this.props;
|
||||
|
||||
e.stopPropagation();
|
||||
|
||||
const sendTo = !multiple && autoFill && !isEmpty(autoFill) && dataMapping(autoFill, option);
|
||||
sendTo && onBulkChange(sendTo);
|
||||
|
||||
onChange(joinValues ? option[valueField || 'value'] : extractValue ? option[valueField || 'value'] : option);
|
||||
!multiple && this.close();
|
||||
}
|
||||
|
|
|
@ -17,6 +17,8 @@ import findIndex = require('lodash/findIndex');
|
|||
import Html from '../../components/Html';
|
||||
import { filter } from '../../utils/tpl';
|
||||
import { closeIcon } from '../../components/icons';
|
||||
import {isEmpty} from '../../utils/helper';
|
||||
import {dataMapping} from '../../utils/tpl-builtin';
|
||||
|
||||
export interface PickerProps extends OptionsControlProps {
|
||||
modalMode: 'dialog' | 'drawer';
|
||||
|
@ -127,7 +129,9 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
|
|||
multiple,
|
||||
options,
|
||||
setOptions,
|
||||
onChange
|
||||
onChange,
|
||||
autoFill,
|
||||
onBulkChange
|
||||
} = this.props;
|
||||
|
||||
let value: any = items;
|
||||
|
@ -148,6 +152,8 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
|
|||
});
|
||||
|
||||
additionalOptions.length && setOptions(options.concat(additionalOptions));
|
||||
const sendTo = !multiple && !joinValues && !extractValue && autoFill && !isEmpty(autoFill) && dataMapping(autoFill, value as Option);
|
||||
sendTo && onBulkChange(sendTo);
|
||||
onChange(value);
|
||||
}
|
||||
|
||||
|
|
|
@ -37,7 +37,9 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
|
|||
formMode,
|
||||
columnsCount,
|
||||
classPrefix,
|
||||
itemClassName
|
||||
itemClassName,
|
||||
autoFill,
|
||||
onBulkChange
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
|
@ -46,6 +48,8 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
|
|||
className={cx(`${ns}RadiosControl`, className)}
|
||||
value={(typeof value === 'undefined' || value === null) ? '' : value}
|
||||
disabled={disabled}
|
||||
autoFill={autoFill}
|
||||
onBulkChange={onBulkChange}
|
||||
onChange={onChange}
|
||||
joinValues={joinValues}
|
||||
extractValue={extractValue}
|
||||
|
|
|
@ -10,6 +10,8 @@ import find = require('lodash/find');
|
|||
import debouce = require('lodash/debounce');
|
||||
import {Api} from '../../types';
|
||||
import {isEffectiveApi} from '../../utils/api';
|
||||
import {isEmpty} from '../../utils/helper';
|
||||
import {dataMapping} from '../../utils/tpl-builtin';
|
||||
|
||||
export interface SelectProps extends OptionsControlProps {
|
||||
autoComplete?: Api;
|
||||
|
@ -55,7 +57,9 @@ export default class SelectControl extends React.Component<SelectProps, any> {
|
|||
type,
|
||||
onChange,
|
||||
setOptions,
|
||||
options
|
||||
options,
|
||||
autoFill,
|
||||
onBulkChange
|
||||
} = this.props;
|
||||
|
||||
let newValue: string | Option | Array<Option> | void = value;
|
||||
|
@ -83,6 +87,8 @@ export default class SelectControl extends React.Component<SelectProps, any> {
|
|||
// 不设置没法回显
|
||||
additonalOptions.length && setOptions(options.concat(additonalOptions));
|
||||
|
||||
const sendTo = !multiple && autoFill && !isEmpty(autoFill) && dataMapping(autoFill, value as Option);
|
||||
sendTo && onBulkChange(sendTo);
|
||||
onChange(newValue);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue