forked from p96170835/amis
Select 多选模式 tip 没显示
This commit is contained in:
2betop
parent
0513a65659
commit
ac216279ca
|
|
@ -5,24 +5,24 @@
|
|||
* @date 2017-11-07
|
||||
*/
|
||||
|
||||
import uncontrollable = require("uncontrollable");
|
||||
import React from "react";
|
||||
import "react-datetime/css/react-datetime.css";
|
||||
import Overlay from "./Overlay";
|
||||
import PopOver from "./PopOver";
|
||||
import Downshift, { ControllerStateAndHelpers } from "downshift";
|
||||
import { closeIcon, Icon } from "./icons";
|
||||
import uncontrollable = require('uncontrollable');
|
||||
import React from 'react';
|
||||
import 'react-datetime/css/react-datetime.css';
|
||||
import Overlay from './Overlay';
|
||||
import PopOver from './PopOver';
|
||||
import Downshift, {ControllerStateAndHelpers} from 'downshift';
|
||||
import {closeIcon, Icon} from './icons';
|
||||
// @ts-ignore
|
||||
import matchSorter from "match-sorter";
|
||||
import { noop, isObject } 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";
|
||||
import Input from "./Input";
|
||||
import matchSorter from 'match-sorter';
|
||||
import {noop, isObject} 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';
|
||||
import Input from './Input';
|
||||
|
||||
export interface Option {
|
||||
label?: string;
|
||||
|
|
@ -46,7 +46,7 @@ export interface OptionProps {
|
|||
delimiter?: string;
|
||||
clearable?: boolean;
|
||||
placeholder?: string;
|
||||
autoFill?: { [propName: string]: any };
|
||||
autoFill?: {[propName: string]: any};
|
||||
creatable?: boolean;
|
||||
onAdd?: (
|
||||
idx?: number | Array<number>,
|
||||
|
|
@ -68,8 +68,8 @@ export function value2array(
|
|||
props: Partial<OptionProps>
|
||||
): Array<Option> {
|
||||
if (props.multi || props.multiple) {
|
||||
if (typeof value === "string") {
|
||||
value = value.split(props.delimiter || ",");
|
||||
if (typeof value === 'string') {
|
||||
value = value.split(props.delimiter || ',');
|
||||
}
|
||||
|
||||
if (!Array.isArray(value)) {
|
||||
|
|
@ -98,14 +98,14 @@ export function expandValue(
|
|||
const valueType = typeof value;
|
||||
|
||||
if (
|
||||
valueType !== "string" &&
|
||||
valueType !== "number" &&
|
||||
valueType !== "boolean"
|
||||
valueType !== 'string' &&
|
||||
valueType !== 'number' &&
|
||||
valueType !== 'boolean'
|
||||
) {
|
||||
return value as Option;
|
||||
}
|
||||
|
||||
let { options } = props;
|
||||
let {options} = props;
|
||||
|
||||
if (!options) {
|
||||
return null;
|
||||
|
|
@ -113,38 +113,38 @@ export function expandValue(
|
|||
|
||||
return find(
|
||||
options,
|
||||
optionValueCompare(value, props.valueField || "value")
|
||||
optionValueCompare(value, props.valueField || 'value')
|
||||
) as Option;
|
||||
}
|
||||
|
||||
export function matchOptionValue(
|
||||
a: OptionValue,
|
||||
b: Option,
|
||||
valueField: string = "value"
|
||||
valueField: string = 'value'
|
||||
) {
|
||||
return isObject(a)
|
||||
? a === b[valueField || "value"]
|
||||
: String(b[valueField || "value"]) === String(a);
|
||||
? a === b[valueField || 'value']
|
||||
: String(b[valueField || 'value']) === String(a);
|
||||
}
|
||||
|
||||
export function optionValueCompare(
|
||||
a: OptionValue,
|
||||
valueField: string = "value"
|
||||
valueField: string = 'value'
|
||||
) {
|
||||
return (b: Option) => matchOptionValue(a, b, valueField);
|
||||
}
|
||||
|
||||
export function normalizeOptions(
|
||||
options: string | { [propName: string]: string } | Array<string> | Options
|
||||
options: string | {[propName: string]: string} | Array<string> | Options
|
||||
): Options {
|
||||
if (typeof options === "string") {
|
||||
return options.split(",").map(item => ({
|
||||
if (typeof options === 'string') {
|
||||
return options.split(',').map(item => ({
|
||||
label: item,
|
||||
value: item
|
||||
}));
|
||||
} else if (
|
||||
Array.isArray(options as Array<string>) &&
|
||||
typeof (options as Array<string>)[0] === "string"
|
||||
typeof (options as Array<string>)[0] === 'string'
|
||||
) {
|
||||
return (options as Array<string>).map(item => ({
|
||||
label: item,
|
||||
|
|
@ -157,7 +157,7 @@ export function normalizeOptions(
|
|||
value: item && item.value
|
||||
};
|
||||
|
||||
if (typeof option.children !== "undefined") {
|
||||
if (typeof option.children !== 'undefined') {
|
||||
option.children = normalizeOptions(option.children);
|
||||
}
|
||||
|
||||
|
|
@ -165,7 +165,7 @@ export function normalizeOptions(
|
|||
});
|
||||
} else if (isPlainObject(options)) {
|
||||
return Object.keys(options).map(key => ({
|
||||
label: (options as { [propName: string]: string })[key] as string,
|
||||
label: (options as {[propName: string]: string})[key] as string,
|
||||
value: key
|
||||
}));
|
||||
}
|
||||
|
|
@ -224,22 +224,22 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
multiple: false,
|
||||
clearable: true,
|
||||
creatable: false,
|
||||
createBtnLabel: "新增选项",
|
||||
searchPromptText: "输入内容进行检索",
|
||||
loadingPlaceholder: "加载中..",
|
||||
noResultsText: "未找到任何结果",
|
||||
clearAllText: "移除所有",
|
||||
clearValueText: "移除",
|
||||
placeholder: "请选择",
|
||||
valueField: "value",
|
||||
labelField: "label",
|
||||
spinnerClassName: "fa fa-spinner fa-spin fa-1x fa-fw",
|
||||
createBtnLabel: '新增选项',
|
||||
searchPromptText: '输入内容进行检索',
|
||||
loadingPlaceholder: '加载中..',
|
||||
noResultsText: '未找到任何结果',
|
||||
clearAllText: '移除所有',
|
||||
clearValueText: '移除',
|
||||
placeholder: '请选择',
|
||||
valueField: 'value',
|
||||
labelField: 'label',
|
||||
spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw',
|
||||
inline: false,
|
||||
disabled: false,
|
||||
checkAll: false,
|
||||
checkAllLabel: "全选",
|
||||
checkAllLabel: '全选',
|
||||
defaultCheckAll: false,
|
||||
overlayPlacement: "auto"
|
||||
overlayPlacement: 'auto'
|
||||
};
|
||||
|
||||
input: HTMLInputElement;
|
||||
|
|
@ -269,7 +269,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
this.state = {
|
||||
isOpen: props.defaultOpen || false,
|
||||
isFocused: false,
|
||||
inputValue: "",
|
||||
inputValue: '',
|
||||
highlightedIndex: -1,
|
||||
selection: value2array(props.value, props)
|
||||
};
|
||||
|
|
@ -284,7 +284,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
onChange,
|
||||
simpleValue
|
||||
} = this.props;
|
||||
let { selection } = this.state;
|
||||
let {selection} = this.state;
|
||||
|
||||
if (multiple && defaultCheckAll && options.length) {
|
||||
selection = union(options, selection);
|
||||
|
|
@ -298,7 +298,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
onChange(simpleValue ? selection.map(item => item.value) : selection);
|
||||
}
|
||||
|
||||
loadOptions && loadOptions("");
|
||||
loadOptions && loadOptions('');
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: SelectProps) {
|
||||
|
|
@ -395,8 +395,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
}
|
||||
|
||||
toggleCheckAll() {
|
||||
const { options, onChange, simpleValue } = this.props;
|
||||
let { selection } = this.state;
|
||||
const {options, onChange, simpleValue} = this.props;
|
||||
let {selection} = this.state;
|
||||
const optionsValues = options.map(option => option.value);
|
||||
const selectionValues = selection.map(select => select.value);
|
||||
const checkedAll = optionsValues.every(
|
||||
|
|
@ -408,11 +408,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
}
|
||||
|
||||
removeItem(index: number, e?: React.MouseEvent<HTMLElement>) {
|
||||
const { onChange, simpleValue, disabled } = this.props;
|
||||
const {onChange, simpleValue, disabled} = this.props;
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
let { selection: value } = this.state;
|
||||
let {selection: value} = this.state;
|
||||
|
||||
e && e.stopPropagation();
|
||||
value = Array.isArray(value) ? value.concat() : [value];
|
||||
|
|
@ -422,7 +422,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
}
|
||||
|
||||
handleInputChange(evt: React.ChangeEvent<HTMLInputElement>) {
|
||||
const { loadOptions } = this.props;
|
||||
const {loadOptions} = this.props;
|
||||
|
||||
this.setState(
|
||||
{
|
||||
|
|
@ -433,8 +433,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
}
|
||||
|
||||
handleChange(selectItem: any) {
|
||||
const { onChange, multiple, simpleValue } = this.props;
|
||||
let { selection } = this.state;
|
||||
const {onChange, multiple, simpleValue} = this.props;
|
||||
let {selection} = this.state;
|
||||
|
||||
if (multiple) {
|
||||
const selectionValues = selection.map(item => item.value);
|
||||
|
|
@ -452,7 +452,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
}
|
||||
|
||||
handleStateChange(changes: any) {
|
||||
const { multiple, checkAll } = this.props;
|
||||
const {multiple, checkAll} = this.props;
|
||||
let update: any = {};
|
||||
const loadOptions = this.props.loadOptions;
|
||||
let doLoad = false;
|
||||
|
|
@ -482,13 +482,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
if (Object.keys(update).length) {
|
||||
this.setState(
|
||||
update,
|
||||
doLoad && loadOptions ? () => loadOptions("") : undefined
|
||||
doLoad && loadOptions ? () => loadOptions('') : undefined
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyPress(e: React.KeyboardEvent) {
|
||||
if (e.key === " ") {
|
||||
if (e.key === ' ') {
|
||||
this.toggle();
|
||||
}
|
||||
}
|
||||
|
|
@ -497,29 +497,29 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
const onChange = this.props.onChange;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onChange("");
|
||||
onChange('');
|
||||
}
|
||||
|
||||
handleAddClick() {
|
||||
const { onAdd } = this.props;
|
||||
const {onAdd} = this.props;
|
||||
onAdd && onAdd();
|
||||
}
|
||||
|
||||
handleEditClick(e: Event, item: any) {
|
||||
const { onEdit } = this.props;
|
||||
const {onEdit} = this.props;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onEdit && onEdit(item);
|
||||
}
|
||||
|
||||
handleDeleteClick(e: Event, item: any) {
|
||||
const { onDelete } = this.props;
|
||||
const {onDelete} = this.props;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onDelete && onDelete(item);
|
||||
}
|
||||
|
||||
renderValue({ inputValue, isOpen }: ControllerStateAndHelpers<any>) {
|
||||
renderValue({inputValue, isOpen}: ControllerStateAndHelpers<any>) {
|
||||
const {
|
||||
multiple,
|
||||
placeholder,
|
||||
|
|
@ -542,18 +542,18 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
multiple ? (
|
||||
<div className={`${ns}Select-value`} key={index}>
|
||||
<span
|
||||
className={`${ns}Select-valueIcon ${disabled ? "is-disabled" : ""}`}
|
||||
className={`${ns}Select-valueIcon ${disabled ? 'is-disabled' : ''}`}
|
||||
onClick={this.removeItem.bind(this, index)}
|
||||
>
|
||||
×
|
||||
</span>
|
||||
<span className={`${ns}Select-valueLabel`}>
|
||||
{item[labelField || "label"]}
|
||||
{item[labelField || 'label']}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className={`${ns}Select-value`} key={index}>
|
||||
{item[labelField || "label"]}
|
||||
{item[labelField || 'label']}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
|
@ -588,14 +588,14 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
removable,
|
||||
overlayPlacement
|
||||
} = this.props;
|
||||
const { selection } = this.state;
|
||||
const {selection} = this.state;
|
||||
|
||||
let checkedAll = false;
|
||||
let checkedPartial = false;
|
||||
let filtedOptions: Array<Option> =
|
||||
inputValue && isOpen && !loadOptions
|
||||
? matchSorter(options, inputValue, {
|
||||
keys: [labelField || "label", valueField || "value"]
|
||||
keys: [labelField || 'label', valueField || 'value']
|
||||
})
|
||||
: options.concat();
|
||||
|
||||
|
|
@ -612,11 +612,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
}
|
||||
|
||||
const menu = (
|
||||
<div ref={this.menu} className={cx("Select-menu")}>
|
||||
<div ref={this.menu} className={cx('Select-menu')}>
|
||||
{searchable ? (
|
||||
<div
|
||||
className={cx(`Select-input`, {
|
||||
"is-focused": this.state.isFocused
|
||||
'is-focused': this.state.isFocused
|
||||
})}
|
||||
>
|
||||
<Icon icon="search" className="icon" />
|
||||
|
|
@ -634,7 +634,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
) : null}
|
||||
|
||||
{multiple && checkAll && filtedOptions.length ? (
|
||||
<div className={cx("Select-option")}>
|
||||
<div className={cx('Select-option')}>
|
||||
<Checkbox
|
||||
checked={checkedPartial}
|
||||
partial={checkedPartial && !checkedAll}
|
||||
|
|
@ -654,7 +654,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
<div
|
||||
{...getItemProps({
|
||||
key:
|
||||
typeof item.value === "string"
|
||||
typeof item.value === 'string'
|
||||
? `${item.label}-${item.value}`
|
||||
: index,
|
||||
index,
|
||||
|
|
@ -662,9 +662,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
disabled: item.disabled
|
||||
})}
|
||||
className={cx(`Select-option`, {
|
||||
"is-disabled": item.disabled,
|
||||
"is-highlight": highlightedIndex === index,
|
||||
"is-active": checked
|
||||
'is-disabled': item.disabled,
|
||||
'is-highlight': highlightedIndex === index,
|
||||
'is-active': checked
|
||||
})}
|
||||
>
|
||||
{removable ? (
|
||||
|
|
@ -699,8 +699,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
: highlight(
|
||||
item[labelField],
|
||||
inputValue as string,
|
||||
cx("Select-option-hl")
|
||||
cx('Select-option-hl')
|
||||
)}
|
||||
|
||||
{item.tip}
|
||||
</Checkbox>
|
||||
) : (
|
||||
<span>
|
||||
|
|
@ -709,7 +711,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
: highlight(
|
||||
item[labelField],
|
||||
inputValue as string,
|
||||
cx("Select-option-hl")
|
||||
cx('Select-option-hl')
|
||||
)}
|
||||
{item.tip}
|
||||
</span>
|
||||
|
|
@ -718,11 +720,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
);
|
||||
})
|
||||
) : (
|
||||
<div className={cx("Select-noResult")}>{noResultsText}</div>
|
||||
<div className={cx('Select-noResult')}>{noResultsText}</div>
|
||||
)}
|
||||
|
||||
{creatable && !disabled ? (
|
||||
<a className={cx("Select-addBtn")} onClick={this.handleAddClick}>
|
||||
<a className={cx('Select-addBtn')} onClick={this.handleAddClick}>
|
||||
<Icon icon="plus" className="icon" />
|
||||
{createBtnLabel}
|
||||
</a>
|
||||
|
|
@ -739,8 +741,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
>
|
||||
<PopOver
|
||||
overlay
|
||||
className={cx("Select-popover")}
|
||||
style={{ minWidth: this.target ? this.target.offsetWidth : "auto" }}
|
||||
className={cx('Select-popover')}
|
||||
style={{minWidth: this.target ? this.target.offsetWidth : 'auto'}}
|
||||
onHide={this.close}
|
||||
>
|
||||
{menu}
|
||||
|
|
@ -781,10 +783,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
: this.handleChange
|
||||
}
|
||||
onStateChange={this.handleStateChange}
|
||||
itemToString={item => (item ? item[labelField] : "")}
|
||||
itemToString={item => (item ? item[labelField] : '')}
|
||||
>
|
||||
{(options: ControllerStateAndHelpers<any>) => {
|
||||
const { isOpen } = options;
|
||||
const {isOpen} = options;
|
||||
return (
|
||||
<div
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
|
|
@ -798,9 +800,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
[`Select--multi`]: multiple,
|
||||
[`Select--inline`]: inline,
|
||||
[`Select--searchable`]: searchable,
|
||||
"is-opened": isOpen,
|
||||
"is-focused": this.state.isFocused,
|
||||
"is-disabled": disabled
|
||||
'is-opened': isOpen,
|
||||
'is-focused': this.state.isFocused,
|
||||
'is-disabled': disabled
|
||||
},
|
||||
className
|
||||
)}
|
||||
|
|
@ -809,17 +811,17 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
{this.renderValue(options)}
|
||||
</div>
|
||||
{clearable && !disabled && value && value.length ? (
|
||||
<a onClick={this.clearValue} className={cx("Select-clear")}>
|
||||
<a onClick={this.clearValue} className={cx('Select-clear')}>
|
||||
<Icon icon="close" className="icon" />
|
||||
</a>
|
||||
) : null}
|
||||
{loading ? (
|
||||
<span className={cx("Select-spinner")}>
|
||||
<span className={cx('Select-spinner')}>
|
||||
<i className={spinnerClassName} />
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
<span className={cx("Select-arrow")} />
|
||||
<span className={cx('Select-arrow')} />
|
||||
{isOpen ? this.renderOuter(options) : null}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -831,6 +833,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
|
|||
|
||||
export default themeable(
|
||||
uncontrollable(Select, {
|
||||
value: "onChange"
|
||||
value: 'onChange'
|
||||
})
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,8 +12,6 @@ import {RootCloseWrapper} from 'react-overlays';
|
|||
import PopOver, {Offset} from '../components/PopOver';
|
||||
import Overlay from '../components/Overlay';
|
||||
|
||||
const allowedPositions = ['center', 'top'];
|
||||
|
||||
export interface PopOverConfig {
|
||||
saveImmediately?: boolean;
|
||||
mode?: 'dialog' | 'drawer' | 'popOver';
|
||||
|
|
@ -30,8 +28,8 @@ export interface PopOverConfig {
|
|||
| 'fixed-right-top'
|
||||
| 'fixed-left-bottom'
|
||||
| 'fixed-right-bottom';
|
||||
offset?: Offset;
|
||||
[propName: string]: any;
|
||||
offset: Offset;
|
||||
}
|
||||
|
||||
export interface PopOverProps extends RendererProps {
|
||||
|
|
@ -159,6 +157,7 @@ export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
|
|||
const isFixed = /^fixed\-/.test(position);
|
||||
|
||||
return isFixed ? (
|
||||
// @ts-ignore
|
||||
<RootCloseWrapper
|
||||
disabled={!this.state.isOpened}
|
||||
onRootClose={this.closePopOver}
|
||||
|
|
@ -179,7 +178,7 @@ export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
|
|||
<PopOver
|
||||
classPrefix={ns}
|
||||
className={cx('PopOverAble-popover')}
|
||||
offset={popOver.offset}
|
||||
offset={(popOver as PopOverConfig).offset}
|
||||
>
|
||||
{content}
|
||||
</PopOver>
|
||||
|
|
@ -189,13 +188,11 @@ export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
|
|||
|
||||
render() {
|
||||
const {
|
||||
onQuickChange,
|
||||
popOver,
|
||||
popOverEnabled,
|
||||
className,
|
||||
noHoc,
|
||||
classnames: cx,
|
||||
render
|
||||
classnames: cx
|
||||
} = this.props;
|
||||
|
||||
if (!popOver || popOverEnabled === false || noHoc) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue