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

Merge pull request #49 from catchonme/master

Browse Source 
select支持全选，range支持范围选择
This commit is contained in:
liaoxuezhi 2019-05-27 14:22:23 +08:00 committed by GitHub
commit 5277eb50e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 359 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/renderers/Range.md
View File

@ -6,6 +6,9 @@
- `min` 最小值
- `max` 最大值
- `step` 步长
- `multiple` 支持选择范围，默认为`false`
- `joinValuse` 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交，开启`multiple`时有效
- `delimiter` 默认为 `,`
```schema:height="400" scope="form-item"
{

3
docs/renderers/Select.md
View File

@ -16,6 +16,9 @@
- `delimiter` 默认为 `,`
- `clearable` 默认为 `false`, 当设置为 `true` 时，已选中的选项右侧会有个小 `X` 用来取消设置。
- `searchable` 默认为 `false`，表示可以通过输入部分内容检索出选项。
- `checkall` 默认为 `false` 开启后支持全选
- `checkAllLabel` 默认为 `全选`, 全选的文字
- `defaultCheckAll` 是否默认全选，默认为`false`
- 更多配置请参考 [FormItem](./FormItem.md)
单选

1
scss/_variables.scss
View File

@ -675,6 +675,7 @@ $Form-select-menu-onActive-color: $info !default;
$Form-select-menu-onActive-bg: transparent !default;
$Form-select-menu-onDisabled-color: $text--muted-color !default;
$Form-select-menu-onDisabled-bg: transparent !default;
$Form-select-checkall-bottomBorder: #eceff8 !default;
// InputGroup
$InputGroup-height: $Form-input-height !default;

18
scss/components/form/_range.scss
View File

@ -13,12 +13,17 @@
.#{$ns}InputRange-label--mid {
left: calc(50% - 60px);
}
&.is-multiple {
.#{$ns}InputRange {
width: calc(100% - 210px);
}
}
}
.#{$ns}InputRange {
&-input {
font-size: $fontSizeSm;
width: px2rem(74px);
position: absolute;
right: px2rem(26px);
top: px2rem(12px);
@ -26,7 +31,7 @@
input {
padding: px2rem(10px);
width: 100%;
width: px2rem(74px);
height: 100%;
&:focus {
@ -34,6 +39,11 @@
border: $borderWidth solid $info;
}
}
&-separator {
display: inline-block;
padding: 0 5px;
}
}
&-unit {
@ -167,6 +177,10 @@
.#{$ns}InputRange.is-disabled & {
background: $InputRange-track-onDisabled-bg;
}
&.is-active {
background: $InputRange-track-onActive-bg;
}
}
&-track--background {

14
scss/components/form/_select.scss
View File

@ -156,7 +156,21 @@
user-select: none;
}
&-checkAll {
padding: (
$Form-select-menu-height - $Form-input-lineHeight *
$Form-input-fontSize - px2rem(2px)
)/2 $Form-select-paddingX;
border-bottom: px2rem(1px) solid $Form-select-checkall-bottomBorder;
min-width: px2rem(100px);
label {
display: block;
}
}
&-option {
min-width: px2rem(100px);
padding: (
$Form-select-menu-height - $Form-input-lineHeight *
$Form-input-fontSize - px2rem(2px)

14
src/components/Checkbox.tsx
View File

@ -6,6 +6,7 @@
import * as React from 'react';
import * as cx from 'classnames';
import {ClassNamesFn, themeable} from '../theme';
import {autobind} from '../utils/helper';
const sizeMap = {
sm: 'i-checks-sm',
@ -44,13 +45,8 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
type: 'checkbox',
};
constructor(props: CheckboxProps) {
super(props);
this.hanldeCheck = this.hanldeCheck.bind(this);
}
hanldeCheck(e: React.ChangeEvent<any>) {
@autobind
handleCheck(e: React.ChangeEvent<any>) {
const {trueValue, falseValue, onChange} = this.props;
if (!onChange) {
@ -98,7 +94,7 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
? value
: value == trueValue
}
onChange={this.hanldeCheck}
onChange={this.handleCheck}
disabled={disabled}
readOnly={readOnly}
name={name}
@ -110,4 +106,4 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
}
}
export default themeable(Checkbox);
export default themeable(Checkbox);

12
src/components/Range.tsx
View File

@ -16,7 +16,10 @@ interface RangeProps extends RendererProps {
className?: string;
min: number;
max: number;
value?: number;
value: {
min: number,
max: number
} | number;
classPrefix: string;
classnames: ClassNamesFn;
}
@ -28,10 +31,10 @@ export class Range extends React.Component<RangeProps, any> {
};
render() {
const {min, max, value, className, classPrefix: ns} = this.props;
const {min, max, value, className, classPrefix: ns, multiple} = this.props;
const classNames = {
activeTrack: `${ns}InputRange-track is-active`,
activeTrack: multiple ? `${ns}InputRange-track is-active` : `${ns}InputRange-track`,
disabledInputRange: `${ns}InputRange is-disabled`,
inputRange: `${ns}InputRange`,
labelContainer: `${ns}InputRange-labelContainer`,
@ -50,7 +53,8 @@ export class Range extends React.Component<RangeProps, any> {
classNames={classNames}
minValue={min}
maxValue={max}
value={typeof value === 'number' ? value : min}
value={value}
multiple={multiple}
/>
);
}

147
src/components/Select.tsx
View File

@ -14,12 +14,14 @@ import Downshift, {ControllerStateAndHelpers} from 'downshift';
import * as cx from 'classnames';
import {closeIcon} from './icons';
import * as matchSorter from 'match-sorter';
import {noop, anyChanged} from '../utils/helper';
import {noop} from '../utils/helper';
import find = require('lodash/find');
import isPlainObject = require('lodash/isPlainObject');
import union = require('lodash/union');
import {highlight} from '../renderers/Form/Options';
import {findDOMNode} from 'react-dom';
import {ClassNamesFn, themeable} from '../theme';
import Checkbox from './Checkbox';
export interface Option {
label?: string;
@ -64,7 +66,7 @@ export function value2array(value: OptionValue | Array<OptionValue>, props: Part
} else if (Array.isArray(value)) {
value = value[0];
}
let expandedValue = expandValue(value as OptionValue, props);
return expandedValue ? [expandedValue] : [];
}
@ -148,6 +150,9 @@ interface SelectProps {
onNewOptionClick: (value: Option) => void;
onFocus?: Function;
onBlur?: Function;
checkAll?: boolean;
checkAllLabel?: string;
defaultCheckAll?: boolean;
}
interface SelectState {
@ -176,10 +181,14 @@ export class Select extends React.Component<SelectProps, SelectState> {
onNewOptionClick: noop,
inline: false,
disabled: false,
checkAll: false,
checkAllLabel: '全选',
defaultCheckAll: false
};
input: HTMLInputElement;
target: HTMLElement;
menu: React.RefObject<HTMLDivElement> = React.createRef();
constructor(props: SelectProps) {
super(props);
@ -196,6 +205,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
this.handleStateChange = this.handleStateChange.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
this.getTarget = this.getTarget.bind(this);
this.toggleCheckAll = this.toggleCheckAll.bind(this);
this.state = {
isOpen: false,
@ -207,7 +217,15 @@ export class Select extends React.Component<SelectProps, SelectState> {
}
componentDidMount() {
const {loadOptions} = this.props;
const {loadOptions, options, multiple, checkAll, defaultCheckAll, onChange} = this.props;
let {selection} = this.state;
if (multiple && checkAll && defaultCheckAll && options.length) {
selection = union(options, selection);
this.setState({
selection: selection
}, () => onChange(selection));
}
loadOptions && loadOptions('');
}
@ -235,7 +253,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
});
}
toggle() {
toggle(e?: React.MouseEvent<HTMLDivElement>) {
if (e && this.menu.current && this.menu.current.contains(e.target as HTMLElement)) {
return;
}
this.props.disabled ||
this.setState({
isOpen: !this.state.isOpen,
@ -282,13 +304,28 @@ export class Select extends React.Component<SelectProps, SelectState> {
this.input = ref;
}
toggleCheckAll() {
const {options, onChange} = this.props;
let {selection} = this.state;
const optionsValues = options.map(option => option.value);
const selectionValues = selection.map(select => select.value);
const checkedAll = optionsValues.every(option => selectionValues.indexOf(option) > -1);
selection = checkedAll ? [] : options;
this.setState({
selection: selection
});
onChange(selection);
}
removeItem(index: number, e?: React.MouseEvent<HTMLElement>) {
let value = this.props.value;
const onChange = this.props.onChange;
const {onChange} = this.props;
let {selection: value} = this.state;
e && e.stopPropagation();
value = Array.isArray(value) ? value.concat() : [value];
value.splice(index, 1);
onChange(value);
}
@ -305,8 +342,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
handleChange(selectItem: any) {
const {onChange, multiple, onNewOptionClick} = this.props;
let selection = this.state.selection;
let {selection} = this.state;
if (selectItem.isNew) {
delete selectItem.isNew;
@ -328,6 +364,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
}
handleStateChange(changes: any) {
const {multiple, checkAll} = this.props;
let update: any = {};
const loadOptions = this.props.loadOptions;
let doLoad = false;
@ -346,8 +383,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
update = {
...update,
inputValue: '',
isOpen: false,
isFocused: false,
isOpen: multiple && checkAll ? true : false,
isFocused: multiple && checkAll ? true : false
};
doLoad = true;
break;
@ -419,8 +456,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
promptTextCreator,
multiple,
classnames: cx,
checkAll,
checkAllLabel,
} = this.props;
const {selection} = this.state;
let checkedAll = false;
let checkedPartial = false;
let filtedOptions: Array<Option> =
inputValue && isOpen && !loadOptions
? matchSorter(options, inputValue, {
@ -429,7 +471,14 @@ export class Select extends React.Component<SelectProps, SelectState> {
: options.concat();
if (multiple) {
filtedOptions = filtedOptions.filter((option: any) => !~selectedItem.indexOf(option));
if (checkAll) {
const optionsValues = options.map(option => option.value);
const selectionValues = selection.map(select => select.value);
checkedAll = optionsValues.every(option => selectionValues.indexOf(option) > -1);
checkedPartial = optionsValues.some(option => selectionValues.indexOf(option) > -1);
} else {
filtedOptions = filtedOptions.filter((option: any) => !~selectedItem.indexOf(option));
}
}
if (
@ -450,31 +499,59 @@ export class Select extends React.Component<SelectProps, SelectState> {
}
const menu = (
<div className={cx('Select-menu')}>
{filtedOptions.length ? (
filtedOptions.map((item, index) => (
<div
{...getItemProps({
key: index,
index,
item,
disabled: item.disabled,
})}
className={cx(`Select-option`, {
'is-disabled': item.disabled,
'is-highlight': highlightedIndex === index,
'is-active':
selectedItem === item ||
(Array.isArray(selectedItem) && ~selectedItem.indexOf(item)),
})}
<div ref={this.menu} className={cx('Select-menu')}>
{multiple && checkAll ? (
<div className={cx('Select-checkAll')}>
<Checkbox
checked={checkedPartial}
partial={checkedPartial && !checkedAll}
onChange={this.toggleCheckAll}
>
{item.isNew
? promptTextCreator(item.label as string)
: item.disabled
? item[labelField]
: highlight(item[labelField], inputValue as string, cx('Select-option-hl'))}
</div>
))
{checkAllLabel}
</Checkbox>
</div>
) : null}
{filtedOptions.length ? (
filtedOptions.map((item, index) => {
const checked = checkAll ? selection.some((o:Option) => o.value == item.value) : false;
return (
<div
{...getItemProps({
key: index,
index,
item,
disabled: item.disabled,
})}
className={cx(`Select-option`, {
'is-disabled': item.disabled,
'is-highlight': highlightedIndex === index,
'is-active':
selectedItem === item ||
(Array.isArray(selectedItem) && ~selectedItem.indexOf(item)),
})}
>
{checkAll ? (
<Checkbox
checked={checked}
trueValue={item.value}
onChange={() => this.handleChange(item)}
>
{item.isNew
? promptTextCreator(item.label as string)
: item.disabled
? item[labelField]
: highlight(item[labelField], inputValue as string, cx('Select-option-hl'))}
</Checkbox>
) : (
item.isNew
? promptTextCreator(item.label as string)
: item.disabled
? item[labelField]
: highlight(item[labelField], inputValue as string, cx('Select-option-hl'))
)}
</div>
)})
) : (
<div className={cx('Select-option Select-option--placeholder')}>{noResultsText}</div>
)}

254
src/renderers/Form/Range.tsx
View File

@ -1,4 +1,7 @@
import * as React from 'react';
import isNumber = require('lodash/isNumber');
import isObject = require('lodash/isObject');
import isEqual = require('lodash/isEqual');
import {
FormItem,
FormControlProps
@ -17,7 +20,11 @@ export interface RangeProps extends FormControlProps {
disabled?: boolean;
showInput?: boolean;
className?: string;
onChange: (value: number) => void;
value: any;
onChange: (value: any) => void;
multiple?: boolean;
joinValues?: boolean;
delimiter?: string;
};
export interface DefaultProps {
@ -28,12 +35,38 @@ export interface DefaultProps {
clearable: boolean;
disabled: boolean;
showInput: boolean;
multiple: boolean;
joinValues: boolean;
delimiter: string;
};
export function formatValue(value: string | number | {min: number, max: number}, props: Partial<RangeProps>) {
if (props.multiple) {
if (typeof value === 'string') {
const [minValue, maxValue] = value.split(props.delimiter || ',').map(v => Number(v));
return {
min: props.min && minValue < props.min && props.min || minValue || props.min,
max: props.max && maxValue > props.max && props.max || maxValue || props.max
}
} else if (typeof value === 'object') {
return {
min: props.min && value.min < props.min && props.min || value.min || props.min,
max: props.max && value.max > props.max && props.max || value.max || props.max
}
}
}
return value || props.min;
}
type PropsWithDefaults = RangeProps & DefaultProps;
export interface RangeState {
value: any;
value: {
min?: number,
max?: number
} | number | string | undefined;
minValue?: any;
maxValue?: any;
};
export default class RangeControl extends React.PureComponent<RangeProps, RangeState> {
@ -46,27 +79,53 @@ export default class RangeControl extends React.PureComponent<RangeProps, RangeS
unit: '',
clearable: true,
disabled: false,
showInput: false
showInput: false,
multiple: false,
joinValues: true,
delimiter: ','
}
constructor(props: RangeProps) {
super(props);
this.state = {
value: parseFloat(props.value) || 0
};
const {value: propsValue, multiple, delimiter, min, max} = this.props;
const value = formatValue(propsValue, {
multiple,
delimiter,
min,
max
});
this.state = {
value: value,
minValue: isObject(value) ? value.min : min,
maxValue: isObject(value) ? value.max : max
};
this.handleChange = this.handleChange.bind(this);
this.handleEnd = this.handleEnd.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
this.rangeValue = this.rangeValue.bind(this);
this.midLabelRef = this.midLabelRef.bind(this);
this.clearValue = this.clearValue.bind(this);
this.handleMinInputBlur = this.handleMinInputBlur.bind(this);
this.handleMaxInputBlur = this.handleMaxInputBlur.bind(this);
this.handleMinInputChange = this.handleMinInputChange.bind(this);
this.handleMaxInputChange = this.handleMaxInputChange.bind(this);
}
componentWillReceiveProps(nextProps: RangeProps) {
const { value } = this.props;
if (value !== nextProps.value) {
const {value} = this.props;
const {value: nextPropsValue, multiple, delimiter, min, max} = nextProps;
if (value !== nextPropsValue) {
const value = formatValue(nextPropsValue, {
multiple,
delimiter,
min,
max
});
this.setState({
value: parseFloat(nextProps.value) || 0
value: value,
minValue: isObject(value) ? value.min : min,
maxValue: isObject(value) ? value.max : max
});
}
}
@ -102,17 +161,42 @@ export default class RangeControl extends React.PureComponent<RangeProps, RangeS
handleChange(value: any) {
this.setState({
value: this.getValue(value)
value: value,
minValue: value.min,
maxValue: value.max
});
}
clearValue() {
const {multiple, min, max} = this.props;
if (multiple) {
this.setState({
value: {
min: min,
max: max
},
minValue: min,
maxValue: max
});
} else {
this.setState({
value: min
});
}
}
handleEnd(value: any) {
const {multiple, joinValues, delimiter} = this.props;
let endValue = value;
if (multiple && joinValues) {
endValue = [value.min, value.max].join(delimiter || ',');
}
const {
onChange
} = this.props;
this.setState({
value
}, () => onChange(value));
}, () => onChange(endValue));
}
getStepPrecision() {
@ -125,25 +209,39 @@ export default class RangeControl extends React.PureComponent<RangeProps, RangeS
: step.toString().split(".")[1].length;
}
getValue(value: any) {
getValue(value: any, type?: string) {
const {
max,
min,
step
} = this.props as PropsWithDefaults;
const {value: stateValue} = this.state;
if (value === '' || value === '-' || new RegExp('^[-]?\\d+[.]{1}[0]{0,' + this.getStepPrecision() + '}$').test(value)) {
return value;
}
// if (!value || value === '00') {
// return min;
// }
value = Math.round(parseFloat(value) / step) * step;
value = (step < 1) ? parseFloat(value.toFixed(this.getStepPrecision())) : ~~value;
return (value < min && min) || (value > max && max) || value;
switch(type) {
case 'min':
{
if (isObject(stateValue) && isNumber(stateValue.max)) {
if (value >= stateValue.max && (min <= stateValue.max - step)) {
return stateValue.max - step;
}
if (value < stateValue.max - step) {
return value;
}
}
return min;
}
case 'max':
return isObject(stateValue) && isNumber(stateValue.min) ? (value > max && max) || (value <= stateValue.min && (stateValue.min + step)) || value : max;
default:
return (value < min && min) || (value > max && max) || value;
}
}
handleInputChange(evt: React.ChangeEvent<HTMLInputElement>) {
@ -152,12 +250,44 @@ export default class RangeControl extends React.PureComponent<RangeProps, RangeS
});
}
rangeValue() {
let { value } = this.state;
// if (/^\d+[.]{1}$/.test(value)) {
// return this.props.min;
// }
return parseFloat(value);
handleMinInputBlur(evt: React.ChangeEvent<HTMLInputElement>) {
const minValue = this.getValue(evt.target.value, 'min');
const {value} = this.state;
isObject(value) ?
this.setState({
value: {
min: minValue,
max: value.max
},
minValue: minValue
})
: null;
}
handleMaxInputBlur(evt: React.ChangeEvent<HTMLInputElement>) {
const maxValue = this.getValue(evt.target.value, 'max');
const {value} = this.state;
isObject(value) ?
this.setState({
value: {
min: value.min,
max: maxValue
},
maxValue: maxValue
})
: null;
}
handleMinInputChange(evt: React.ChangeEvent<HTMLInputElement>) {
this.setState({
minValue: evt.target.value
});
}
handleMaxInputChange(evt: React.ChangeEvent<HTMLInputElement>) {
this.setState({
maxValue: evt.target.value
});
}
render() {
@ -170,8 +300,8 @@ export default class RangeControl extends React.PureComponent<RangeProps, RangeS
name,
disabled,
className,
onChange,
showInput,
multiple,
classnames: cx,
classPrefix: ns,
} = this.props as PropsWithDefaults;
@ -180,10 +310,11 @@ export default class RangeControl extends React.PureComponent<RangeProps, RangeS
<div className={cx("RangeControl", {
'RangeControl--withInput': showInput,
'RangeControl--clearable': clearable,
'is-multiple': multiple
}, className)}>
<InputRange
classPrefix={ns}
value={this.rangeValue()}
value={this.state.value}
disabled={disabled}
onChange={this.handleChange}
onChangeComplete={this.handleEnd}
@ -191,6 +322,7 @@ export default class RangeControl extends React.PureComponent<RangeProps, RangeS
min={min}
step={step}
formatLabel={(value: any) => value + unit}
multiple={multiple}
/>
<span className={cx("InputRange-label InputRange-label--mid")} ref={this.midLabelRef}>
@ -199,38 +331,46 @@ export default class RangeControl extends React.PureComponent<RangeProps, RangeS
</span>
</span>
{showInput ? (
<div className={cx("InputRange-input")}>
<input
className={this.state.value !== min ? 'is-active' : ''}
type="text"
name={name}
value={this.state.value}
disabled={disabled}
onChange={this.handleInputChange}
/>
{/* <span
className={cx("InputRange-unit", this.state.value !== min ? 'is-active' : '')}
>
{unit}
</span> */}
</div>
) : null}
{showInput ?
multiple && isObject(this.state.value) ? (
<div className={cx("InputRange-input is-multiple")}>
<input
className={this.state.value.min !== min ? 'is-active' : ''}
type="text"
name={name}
value={this.state.minValue}
disabled={disabled}
onChange={this.handleMinInputChange}
onBlur={this.handleMinInputBlur}
/>
<span className={cx("InputRange-input-separator")}> - </span>
<input
className={this.state.value.max !== max ? 'is-active' : ''}
type="text"
name={name}
value={this.state.maxValue}
disabled={disabled}
onChange={this.handleMaxInputChange}
onBlur={this.handleMaxInputBlur}
/>
</div>
) : (
<div className={cx("InputRange-input")}>
<input
className={this.state.value !== min ? 'is-active' : ''}
type="text"
name={name}
value={!isObject(this.state.value) ? this.state.value : 0}
disabled={disabled}
onChange={this.handleInputChange}
/>
</div>
)
: null}
{/* {clearable && this.sliderValue() ? (
<span
className={cx('icon icon-clear', {
'active': (this.state.value !== min)
})}
onClick={() => this.handleChange(0)}
>
<i className="iconfont icon-x"></i>
</span>
) : null} */}
{clearable && this.rangeValue() !== min && showInput ? (
<a onClick={() => this.handleChange(min)} className={cx("InputRange-clear", {
'is-active': (this.state.value !== min)
{clearable && showInput ? (
<a onClick={() => this.clearValue()} className={cx("InputRange-clear", {
'is-active': (multiple ? isEqual(this.state.value, {min: min, max: max}) : this.state.value !== min)
})}>{closeIcon}</a>
) : null}
</div >