import * as React from 'react'; import RcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from 'rc-tree-select'; import classNames from 'classnames'; import { TreeSelectProps, TreeNodeValue } from './interface'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import warning from '../_util/warning'; import Icon from '../icon'; import { AntTreeNodeProps } from '../tree'; import omit from 'omit.js'; export { TreeNode, TreeSelectProps } from './interface'; export default class TreeSelect extends React.Component< TreeSelectProps, any > { static TreeNode = TreeNode; static SHOW_ALL = SHOW_ALL; static SHOW_PARENT = SHOW_PARENT; static SHOW_CHILD = SHOW_CHILD; static defaultProps = { transitionName: 'slide-up', choiceTransitionName: 'zoom', }; private rcTreeSelect: any; constructor(props: TreeSelectProps) { super(props); warning( props.multiple !== false || !props.treeCheckable, 'TreeSelect', '`multiple` will alway be `true` when `treeCheckable` is true', ); } focus() { this.rcTreeSelect.focus(); } blur() { this.rcTreeSelect.blur(); } saveTreeSelect = (node: typeof RcTreeSelect) => { this.rcTreeSelect = node; }; renderSwitcherIcon = (prefixCls: string, { isLeaf, loading }: AntTreeNodeProps) => { if (loading) { return ; } if (isLeaf) { return null; } return ; }; renderTreeSelect = ({ getPopupContainer: getContextPopupContainer, getPrefixCls, renderEmpty, }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className, size, notFoundContent, dropdownStyle, dropdownClassName, suffixIcon, getPopupContainer, ...restProps } = this.props; const rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'switcherIcon']); const prefixCls = getPrefixCls('select', customizePrefixCls); const cls = classNames( { [`${prefixCls}-lg`]: size === 'large', [`${prefixCls}-sm`]: size === 'small', }, className, ); // showSearch: single - false, multiple - true let { showSearch } = restProps; if (!('showSearch' in restProps)) { showSearch = !!(restProps.multiple || restProps.treeCheckable); } let checkable = rest.treeCheckable; if (checkable) { checkable = ; } const inputIcon = (suffixIcon && (React.isValidElement<{ className?: string }>(suffixIcon) ? React.cloneElement(suffixIcon) : suffixIcon)) || ; const removeIcon = ; const clearIcon = ( ); return ( this.renderSwitcherIcon(prefixCls, nodeProps) } inputIcon={inputIcon} removeIcon={removeIcon} clearIcon={clearIcon} {...rest} showSearch={showSearch} getPopupContainer={getPopupContainer || getContextPopupContainer} dropdownClassName={classNames(dropdownClassName, `${prefixCls}-tree-dropdown`)} prefixCls={prefixCls} className={cls} dropdownStyle={{ maxHeight: '100vh', overflow: 'auto', ...dropdownStyle }} treeCheckable={checkable} notFoundContent={notFoundContent || renderEmpty('Select')} ref={this.saveTreeSelect} /> ); }; render() { return {this.renderTreeSelect}; } }