diff --git a/examples/components/Form/Full.jsx b/examples/components/Form/Full.jsx index e87038d7..4bfd3dc2 100644 --- a/examples/components/Form/Full.jsx +++ b/examples/components/Form/Full.jsx @@ -65,7 +65,9 @@ export default { label: '标签', placeholder: '', clearable: true, - inline: true, + // dropdown: false, 保留原来的展现方式。 + // size: 'md', + // inline: true, options: [ { label: '诸葛亮', diff --git a/scss/components/form/_tag.scss b/scss/components/form/_tag.scss index 1890517b..ba786937 100644 --- a/scss/components/form/_tag.scss +++ b/scss/components/form/_tag.scss @@ -10,7 +10,7 @@ } > .#{$ns}TagControl-popover { - box-shadow: none; + // box-shadow: none; padding: 0; border: none; width: 100%; @@ -25,6 +25,51 @@ bottom: 100% !important; } } + + &-sug { + margin-top: $Form-input-marginBottom; + + &Tip { + color: $TagControl-sugTip-color; + margin-bottom: $Form-input-marginBottom; + } + + &Item { + margin-right: $gap-sm; + margin-bottom: $gap-sm; + display: inline-block; + font-size: $TagControl-sugBtn-fontSize; + cursor: pointer; + user-select: none; + border: $TagControl-sugBtn-borderWidth solid transparent; + + @include button-size( + $TagControl-sugBtn-paddingY, + $TagControl-sugBtn-paddingX, + $TagControl-sugBtn-fontSize, + $TagControl-sugBtn-lineHeight, + $TagControl-sugBtn-borderRadius, + $TagControl-sugBtn-height + ); + + @include button-variant( + $TagControl-sugBtn-bg, + $TagControl-sugBtn-border, + $TagControl-sugBtn-color, + $TagControl-sugBtn-onHover-bg, + $TagControl-sugBtn-onHover-border, + $TagControl-sugBtn-onHover-color, + $TagControl-sugBtn-onActive-bg, + $TagControl-sugBtn-onActive-border, + $TagControl-sugBtn-onActive-color + ); + + &.is-disabled { + pointer-events: none; + opacity: $Button-onDisabled-opacity; + } + } + } } .#{$ns}TagControl-popover { diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx index 5aef9ed9..cb2d4628 100644 --- a/src/components/Transfer.tsx +++ b/src/components/Transfer.tsx @@ -99,7 +99,8 @@ export class Transfer extends React.Component { } @autobind - handleSearch(text: string) { + handleSearch(e: React.ChangeEvent) { + const text = e.currentTarget.value; this.setState( { inputValue: text diff --git a/src/renderers/Form/Tag.tsx b/src/renderers/Form/Tag.tsx index c6c694b0..b7e0b08f 100644 --- a/src/renderers/Form/Tag.tsx +++ b/src/renderers/Form/Tag.tsx @@ -1,13 +1,7 @@ import React from 'react'; import {OptionsControl, OptionsControlProps, Option} from './Options'; -import cx from 'classnames'; -import {Action} from '../../types'; import Downshift from 'downshift'; -import matchSorter from 'match-sorter'; -import debouce from 'lodash/debounce'; import find from 'lodash/find'; -import {Icon} from '../../components/icons'; -import {Portal} from 'react-overlays'; import {findDOMNode} from 'react-dom'; import ResultBox from '../../components/ResultBox'; import {autobind, filterTree} from '../../utils/helper'; @@ -15,7 +9,6 @@ import Spinner from '../../components/Spinner'; import Overlay from '../../components/Overlay'; import PopOver from '../../components/PopOver'; import ListMenu from '../../components/ListMenu'; -import {Options} from '../../components/Select'; // declare function matchSorter(items:Array, input:any, options:any): Array; @@ -24,6 +17,7 @@ export interface TagProps extends OptionsControlProps { clearable: boolean; resetValue?: any; optionsTip: string; + dropdown?: boolean; } export interface TagState { @@ -43,7 +37,8 @@ export default class TagControl extends React.PureComponent< labelField: 'label', valueField: 'value', multiple: true, - placeholder: '暂无标签' + placeholder: '暂无标签', + optionsTip: '最近您使用的标签' }; state = { @@ -97,7 +92,7 @@ export default class TagControl extends React.PureComponent< isOpened: true }); - this.props.onFocus && this.props.onFocus(e); + this.props.onFocus?.(e); } @autobind @@ -112,7 +107,7 @@ export default class TagControl extends React.PureComponent< } = this.props; const value = this.state.inputValue.trim(); - this.props.onBlur && this.props.onBlur(e); + this.props.onBlur?.(e); this.setState( { isFocused: false, @@ -260,7 +255,7 @@ export default class TagControl extends React.PureComponent< reload() { const reload = this.props.reloadOptions; - reload && reload(); + reload?.(); } render() { @@ -274,7 +269,9 @@ export default class TagControl extends React.PureComponent< selectedOptions, loading, popOverContainer, - options + dropdown, + options, + optionsTip } = this.props; const finnalOptions = Array.isArray(options) @@ -321,31 +318,51 @@ export default class TagControl extends React.PureComponent< {loading ? : undefined} - - - ({ - ...getItemProps({ - index, - item, - disabled: item.disabled - }) - })} - /> - - + + ({ + ...getItemProps({ + index, + item, + disabled: item.disabled + }) + })} + /> + + + ) : ( + // 保留原来的展现方式,不推荐 +
+ {optionsTip ? ( +
{optionsTip}
+ ) : null} + {options.map((item, index) => ( +
+ {item.label} +
+ ))} +
+ )} ); }}