cascader-select.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { polyfill } from 'react-lifecycles-compat';
import classNames from 'classnames';
import Select from '../select';
import Cascader from '../cascader';
import Menu from '../menu';
import { func, obj, dom, KEYCODE } from '../util';

const { bindCtx } = func;
const { pickOthers } = obj;
const { getStyle } = dom;

const normalizeValue = value => {
    if (value) {
        if (Array.isArray(value)) {
            return value;
        }

        return [value];
    }

    return [];
};

/**
 * CascaderSelect
 */
class CascaderSelect extends Component {
    static propTypes = {
        prefix: PropTypes.string,
        pure: PropTypes.bool,
        className: PropTypes.string,
        /**
         * 选择框大小
         */
        size: PropTypes.oneOf(['small', 'medium', 'large']),
        /**
         * 选择框占位符
         */
        placeholder: PropTypes.string,
        /**
         * 是否禁用
         */
        disabled: PropTypes.bool,
        /**
         * 是否有下拉箭头
         */
        hasArrow: PropTypes.bool,
        /**
         * 是否有边框
         */
        hasBorder: PropTypes.bool,
        /**
         * 是否有清除按钮
         */
        hasClear: PropTypes.bool,
        /**
         * 自定义内联 label
         */
        label: PropTypes.node,
        /**
         * 是否只读，只读模式下可以展开弹层但不能选
         */
        readOnly: PropTypes.bool,
        /**
         * 数据源，结构可参考下方说明
         */
        dataSource: PropTypes.arrayOf(PropTypes.object),
        /**
         * （非受控）默认值
         */
        defaultValue: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.arrayOf(PropTypes.string),
        ]),
        /**
         * （受控）当前值
         */
        value: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.arrayOf(PropTypes.string),
        ]),
        /**
         * 选中值改变时触发的回调函数
         * @param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组
         * @param {Object|Array} data 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点
         * @param {Object} extra 额外参数
         * @param {Array} extra.selectedPath 单选时选中的数据的路径
         * @param {Boolean} extra.checked 多选时当前的操作是选中还是取消选中
         * @param {Object} extra.currentData 多选时当前操作的数据
         * @param {Array} extra.checkedData 多选时所有被选中的数据
         * @param {Array} extra.indeterminateData 多选时半选的数据
         */
        onChange: PropTypes.func,
        /**
         * 默认展开值，如果不设置，组件内部会根据 defaultValue/value 进行自动设置
         */
        defaultExpandedValue: PropTypes.arrayOf(PropTypes.string),
        /**
         * （受控）当前展开值
         */
        expandedValue: PropTypes.arrayOf(PropTypes.string),
        /**
         * 展开触发的方式
         */
        expandTriggerType: PropTypes.oneOf(['click', 'hover']),
        onExpand: PropTypes.func,
        /**
         * 是否开启虚拟滚动
         */
        useVirtual: PropTypes.bool,
        /**
         * 是否多选
         */
        multiple: PropTypes.bool,
        /**
         * 是否选中即发生改变, 该属性仅在单选模式下有效
         */
        changeOnSelect: PropTypes.bool,
        /**
         * 是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效
         */
        canOnlyCheckLeaf: PropTypes.bool,
        /**
         * 父子节点是否选中不关联
         */
        checkStrictly: PropTypes.bool,
        /**
         * 每列列表样式对象
         */
        listStyle: PropTypes.object,
        /**
         * 每列列表类名
         */
        listClassName: PropTypes.string,
        /**
         * 选择框单选时展示结果的自定义渲染函数
         * @param {Array} label 选中路径的文本数组
         * @return {ReactNode} 渲染在选择框中的内容
         * @default 单选时：labelPath => labelPath.join(' / ')；多选时：labelPath => labelPath[labelPath.length - 1]
         */
        displayRender: PropTypes.func,
        /**
         * 渲染 item 内容的方法
         * @param {Object} item 渲染节点的item
         * @return {ReactNode} item node
         */
        itemRender: PropTypes.func,
        /**
         * 是否显示搜索框
         */
        showSearch: PropTypes.bool,
        /**
         * 自定义搜索函数
         * @param {String} searchValue 搜索的关键字
         * @param {Array} path 节点路径
         * @return {Boolean} 是否匹配
         * @default 根据路径所有节点的文本值模糊匹配
         */
        filter: PropTypes.func,
        /**
         * 搜索结果自定义渲染函数
         * @param {String} searchValue 搜索的关键字
         * @param {Array} path 匹配到的节点路径
         * @return {ReactNode} 渲染的内容
         * @default 按照节点文本 a / b / c 的模式渲染
         */
        resultRender: PropTypes.func,
        /**
         * 搜索结果列表是否和选择框等宽
         */
        resultAutoWidth: PropTypes.bool,
        /**
         * 无数据时显示内容
         */
        notFoundContent: PropTypes.node,
        /**
         * 异步加载数据函数
         * @param {Object} data 当前点击异步加载的数据
         */
        loadData: PropTypes.func,
        /**
         * 自定义下拉框头部
         */
        header: PropTypes.node,
        /**
         * 自定义下拉框底部
         */
        footer: PropTypes.node,
        /**
         * 初始下拉框是否显示
         */
        defaultVisible: PropTypes.bool,
        /**
         * 当前下拉框是否显示
         */
        visible: PropTypes.bool,
        /**
         * 下拉框显示或关闭时触发事件的回调函数
         * @param {Boolean} visible 是否显示
         * @param {String} type 触发显示关闭的操作类型, fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发
         */
        onVisibleChange: PropTypes.func,
        /**
         * 下拉框自定义样式对象
         */
        popupStyle: PropTypes.object,
        /**
         * 下拉框样式自定义类名
         */
        popupClassName: PropTypes.string,
        /**
         * 下拉框挂载的容器节点
         */
        popupContainer: PropTypes.any,
        /**
         * 透传到 Popup 的属性对象
         */
        popupProps: PropTypes.object,
        /**
         * 是否跟随滚动
         */
        followTrigger: PropTypes.bool,
        /**
         * 是否为预览态
         */
        isPreview: PropTypes.bool,
        /**
         * 预览态模式下渲染的内容
         * @param {Array<data>} value 选择值 { label: , value:}
         */
        renderPreview: PropTypes.func,
    };

    static defaultProps = {
        prefix: 'next-',
        pure: false,
        size: 'medium',
        disabled: false,
        hasArrow: true,
        hasBorder: true,
        hasClear: false,
        dataSource: [],
        defaultValue: null,
        expandTriggerType: 'click',
        onExpand: () => {},
        useVirtual: false,
        multiple: false,
        changeOnSelect: false,
        canOnlyCheckLeaf: false,
        checkStrictly: false,
        showSearch: false,
        filter: (searchValue, path) => {
            return path.some(item => item.label.indexOf(searchValue) > -1);
        },
        resultRender: (searchValue, path) => {
            const parts = [];
            path.forEach((item, i) => {
                const others = item.label.split(searchValue);
                others.forEach((other, j) => {
                    if (other) {
                        parts.push(other);
                    }
                    if (j < others.length - 1) {
                        parts.push(<em key={`${i}-${j}`}>{searchValue}</em>);
                    }
                });
                if (i < path.length - 1) {
                    parts.push(' / ');
                }
            });
            return <span>{parts}</span>;
        },
        resultAutoWidth: true,
        notFoundContent: 'Not Found',
        defaultVisible: false,
        onVisibleChange: () => {},
        popupProps: {},
    };

    constructor(props, context) {
        super(props, context);

        this.state = {
            value: normalizeValue(
                'value' in props ? props.value : props.defaultValue
            ),
            searchValue: '',
            visible:
                typeof props.visible === 'undefined'
                    ? props.defaultVisible
                    : props.visible,
        };

        bindCtx(this, [
            'handleVisibleChange',
            'handleAfterOpen',
            'handleSelect',
            'handleChange',
            'handleClear',
            'handleRemove',
            'handleSearch',
            'getPopup',
            'saveSelectRef',
            'saveCascaderRef',
            'handleKeyDown',
        ]);
    }

    static getDerivedStateFromProps(props) {
        const st = {};

        if ('value' in props) {
            st.value = normalizeValue(props.value);
        }
        if ('visible' in props) {
            st.visible = props.visible;
        }

        return st;
    }

    updateCache(dataSource) {
        this._v2n = {};
        this._p2n = {};
        const loop = (data, prefix = '0') =>
            data.forEach((item, index) => {
                const { value, children } = item;
                const pos = `${prefix}-${index}`;
                this._v2n[value] = this._p2n[pos] = { ...item, pos };

                if (children && children.length) {
                    loop(children, pos);
                }
            });

        loop(dataSource);
    }

    flatValue(value) {
        const getDepth = v => {
            const pos = this.getPos(v);
            if (!pos) {
                return 0;
            }
            return pos.split('-').length;
        };
        const newValue = value.slice(0).sort((prev, next) => {
            return getDepth(prev) - getDepth(next);
        });

        for (let i = 0; i < newValue.length; i++) {
            for (let j = 0; j < newValue.length; j++) {
                if (
                    i !== j &&
                    this.isDescendantOrSelf(
                        this.getPos(newValue[i]),
                        this.getPos(newValue[j])
                    )
                ) {
                    newValue.splice(j, 1);
                    j--;
                }
            }
        }

        return newValue;
    }

    isDescendantOrSelf(currentPos, targetPos) {
        if (!currentPos || !targetPos) {
            return false;
        }

        const currentNums = currentPos.split('-');
        const targetNums = targetPos.split('-');

        return (
            currentNums.length <= targetNums.length &&
            currentNums.every((num, index) => {
                return num === targetNums[index];
            })
        );
    }

    getValue(pos) {
        return this._p2n[pos] ? this._p2n[pos].value : null;
    }

    getPos(value) {
        return this._v2n[value] ? this._v2n[value].pos : null;
    }

    getData(value) {
        return value.map(v => this._v2n[v]);
    }

    getLabelPath(data) {
        const nums = data.pos.split('-');
        return nums.slice(1).reduce((ret, num, index) => {
            const p = nums.slice(0, index + 2).join('-');
            ret.push(this._p2n[p].label);
            return ret;
        }, []);
    }

    getSignleData(value) {
        if (!value.length) {
            return null;
        }

        if (Array.isArray(value)) value = value[0];

        const data = this._v2n[value];
        if (!data) {
            return {
                value,
            };
        }

        const labelPath = this.getLabelPath(data);
        const displayRender =
            this.props.displayRender || (labels => labels.join(' / '));

        return {
            ...data,
            label: displayRender(labelPath, data),
        };
    }

    getMultipleData(value) {
        if (!value.length) {
            return null;
        }

        const { checkStrictly, canOnlyCheckLeaf, displayRender } = this.props;
        let data = (checkStrictly || canOnlyCheckLeaf
            ? value
            : this.flatValue(value)
        ).map(v => this._v2n[v] || { value: v });

        if (displayRender) {
            data = data.map(item => {
                if (!item.pos) {
                    return item;
                }
                const labelPath = this.getLabelPath(item);

                return {
                    ...item,
                    label: displayRender(labelPath, item),
                };
            });
        }

        return data;
    }

    getIndeterminate(value) {
        const indeterminate = [];

        const positions = value.map(this.getPos.bind(this));
        positions.forEach(pos => {
            if (!pos) {
                return false;
            }
            const nums = pos.split('-');
            for (let i = nums.length; i > 2; i--) {
                const parentPos = nums.slice(0, i - 1).join('-');
                const parentValue = this.getValue(parentPos);
                if (indeterminate.indexOf(parentValue) === -1) {
                    indeterminate.push(parentValue);
                }
            }
        });

        return indeterminate;
    }

    saveSelectRef(ref) {
        this.select = ref;
    }

    saveCascaderRef(ref) {
        this.cascader = ref;
    }

    completeValue(value) {
        const newValue = [];

        const flatValue = this.flatValue(value).reverse();
        const ps = Object.keys(this._p2n);
        for (let i = 0; i < ps.length; i++) {
            for (let j = 0; j < flatValue.length; j++) {
                const v = flatValue[j];
                if (this.isDescendantOrSelf(this.getPos(v), ps[i])) {
                    newValue.push(this.getValue(ps[i]));
                    ps.splice(i, 1);
                    i--;
                    break;
                }
            }
        }

        return newValue;
    }

    isLeaf(data) {
        return !(
            (data.children && data.children.length) ||
            (!!this.props.loadData && !data.isLeaf)
        );
    }

    handleVisibleChange(visible, type) {
        const { searchValue } = this.state;
        if (!('visible' in this.props)) {
            this.setState({
                visible,
            });
        }

        if (!visible && searchValue) {
            this.setState({
                searchValue: '',
            });
        }

        if (['fromCascader', 'keyboard'].indexOf(type) !== -1 && !visible) {
            this.select.focusInput();
        }

        this.props.onVisibleChange(visible, type);
    }

    handleKeyDown(e) {
        const { onKeyDown } = this.props;
        const { visible } = this.state;

        if (onKeyDown) {
            onKeyDown(e);
        }

        if (!visible) {
            return;
        }

        switch (e.keyCode) {
            case KEYCODE.UP:
            case KEYCODE.DOWN:
                this.cascader.setFocusValue();
                e.preventDefault();
                break;
            default:
                break;
        }
    }

    getPopup(ref) {
        this.popup = ref;
        if (typeof this.props.popupProps.ref === 'function') {
            this.props.popupProps.ref(ref);
        }
    }

    handleAfterOpen() {
        if (!this.popup) {
            return;
        }

        const { prefix, popupProps } = this.props;
        const dropDownNode = this.popup
            .getInstance()
            .overlay.getInstance()
            .getContentNode();
        const cascaderNode = dropDownNode.querySelector(`.${prefix}cascader`);
        if (cascaderNode) {
            this.cascaderHeight = getStyle(cascaderNode, 'height');
        }

        if (typeof popupProps.afterOpen === 'function') {
            popupProps.afterOpen();
        }
    }

    handleSelect(value, data) {
        const { multiple, changeOnSelect } = this.props;
        const { visible, searchValue } = this.state;

        if (
            !multiple &&
            (!changeOnSelect || this.isLeaf(data) || !!searchValue)
        ) {
            this.handleVisibleChange(!visible, 'fromCascader');
        }
    }

    handleChange(value, data, extra) {
        const { multiple, onChange } = this.props;
        const { searchValue, value: stateValue } = this.state;

        const st = {};

        if (multiple && stateValue && Array.isArray(stateValue)) {
            value = [...stateValue.filter(v => !this._v2n[v]), ...value];
        }

        if (!('value' in this.props)) {
            st.value = value;
        }
        if (!multiple && searchValue) {
            st.searchValue = '';
        }
        if (Object.keys(st).length) {
            this.setState(st);
        }

        if (onChange) {
            onChange(value, data, extra);
        }

        if (searchValue && this.select) {
            this.select.handleSearchClear();
        }
    }

    handleClear() {
        // 单选时点击清空按钮
        const { hasClear, multiple, treeCheckable } = this.props;
        if (hasClear && (!multiple || !treeCheckable)) {
            if (!('value' in this.props)) {
                this.setState({
                    value: [],
                });
            }

            this.props.onChange(null, null);
        }
    }

    handleRemove(currentData) {
        const { value: currentValue } = currentData;
        let value;

        const { multiple, checkStrictly, onChange } = this.props;
        if (multiple) {
            value = [...this.state.value];
            value.splice(value.indexOf(currentValue), 1);

            if (this.props.onChange) {
                const data = this.getData(value);
                const checked = false;

                if (checkStrictly) {
                    this.props.onChange(value, data, {
                        checked,
                        currentData,
                        checkedData: data,
                    });
                } else {
                    const checkedValue = this.completeValue(value);
                    const checkedData = this.getData(checkedValue);
                    const indeterminateValue = this.getIndeterminate(value);
                    const indeterminateData = this.getData(indeterminateValue);
                    this.props.onChange(value, data, {
                        checked,
                        currentData,
                        checkedData,
                        indeterminateData,
                    });
                }
            }
        } else {
            value = [];
            onChange(null, null);
        }

        if (!('value' in this.props)) {
            this.setState({
                value,
            });
        }
    }

    handleSearch(searchValue) {
        this.setState({
            searchValue,
        });
    }

    getPath(pos) {
        const items = [];

        const nums = pos.split('-');
        if (nums === 2) {
            items.push(this._p2n[pos]);
        } else {
            for (let i = 1; i < nums.length; i++) {
                const p = nums.slice(0, i + 1).join('-');
                items.push(this._p2n[p]);
            }
        }

        return items;
    }

    filterItems() {
        const {
            multiple,
            changeOnSelect,
            canOnlyCheckLeaf,
            filter,
        } = this.props;
        const { searchValue } = this.state;
        let items = Object.keys(this._p2n).map(p => this._p2n[p]);
        if ((!multiple && !changeOnSelect) || (multiple && canOnlyCheckLeaf)) {
            items = items.filter(
                item => !item.children || !item.children.length
            );
        }

        return items
            .map(item => this.getPath(item.pos))
            .filter(path => filter(searchValue, path));
    }

    renderNotFound() {
        const { prefix, notFoundContent } = this.props;

        return (
            <Menu className={`${prefix}cascader-select-not-found`}>
                <Menu.Item>{notFoundContent}</Menu.Item>
            </Menu>
        );
    }

    renderCascader() {
        const { dataSource } = this.props;
        if (dataSource.length === 0) {
            return this.renderNotFound();
        }

        const { searchValue } = this.state;
        let filteredPaths = [];
        if (searchValue) {
            filteredPaths = this.filterItems();
            if (filteredPaths.length === 0) {
                return this.renderNotFound();
            }
        }

        const {
            multiple,
            useVirtual,
            changeOnSelect,
            checkStrictly,
            canOnlyCheckLeaf,
            defaultExpandedValue,
            expandTriggerType,
            onExpand,
            listStyle,
            listClassName,
            loadData,
            showSearch,
            resultRender,
            readOnly,
            itemRender,
        } = this.props;
        const { value } = this.state;

        const props = {
            dataSource,
            value,
            multiple,
            useVirtual,
            canOnlySelectLeaf: !changeOnSelect,
            checkStrictly,
            canOnlyCheckLeaf,
            defaultExpandedValue,
            expandTriggerType,
            ref: this.saveCascaderRef,
            onExpand,
            listStyle,
            listClassName,
            loadData,
            itemRender,
        };

        if ('expandedValue' in this.props) {
            props.expandedValue = this.props.expandedValue;
        }

        if (!readOnly) {
            props.onChange = this.handleChange;
            props.onSelect = this.handleSelect;
        }
        if (showSearch) {
            props.searchValue = searchValue;
            props.filteredPaths = filteredPaths;
            props.resultRender = resultRender;
            props.filteredListStyle = { height: this.cascaderHeight };
        }

        return <Cascader {...props} />;
    }

    renderPopupContent() {
        const { prefix, header, footer } = this.props;
        return (
            <div className={`${prefix}cascader-select-dropdown`}>
                {header}
                {this.renderCascader()}
                {footer}
            </div>
        );
    }

    renderPreview(others) {
        const { prefix, multiple, className, renderPreview } = this.props;
        const { value } = this.state;
        const previewCls = classNames(className, `${prefix}form-preview`);
        let items =
            (multiple
                ? this.getMultipleData(value)
                : this.getSignleData(value)) || [];

        if (!Array.isArray(items)) {
            items = [items];
        }

        if (typeof renderPreview === 'function') {
            return (
                <div {...others} className={previewCls}>
                    {renderPreview(items, this.props)}
                </div>
            );
        }

        return (
            <p {...others} className={previewCls}>
                {items.map(({ label }) => label).join(', ')}
            </p>
        );
    }

    render() {
        const {
            prefix,
            size,
            hasArrow,
            hasBorder,
            hasClear,
            label,
            readOnly,
            placeholder,
            dataSource,
            disabled,
            multiple,
            className,
            showSearch,
            popupStyle,
            popupClassName,
            popupContainer,
            popupProps,
            followTrigger,
            isPreview,
            resultAutoWidth,
        } = this.props;
        const { value, searchValue, visible } = this.state;
        const others = pickOthers(
            Object.keys(CascaderSelect.propTypes),
            this.props
        );

        this.updateCache(dataSource);

        if (isPreview) {
            return this.renderPreview(others);
        }

        const popupContent = this.renderPopupContent();

        const props = {
            prefix,
            className,
            size,
            placeholder,
            disabled,
            hasArrow,
            hasBorder,
            hasClear,
            label,
            readOnly,
            ref: this.saveSelectRef,
            autoWidth: false,
            mode: multiple ? 'multiple' : 'single',
            value: multiple
                ? this.getMultipleData(value)
                : this.getSignleData(value),
            onChange: this.handleClear,
            onRemove: this.handleRemove,
            visible,
            onVisibleChange: this.handleVisibleChange,
            showSearch,
            // searchValue,
            onSearch: this.handleSearch,
            onKeyDown: this.handleKeyDown,
            popupContent,
            popupStyle,
            popupClassName,
            popupContainer,
            popupProps,
            followTrigger,
        };

        if (showSearch) {
            props.popupProps = {
                ...popupProps,
                ref: this.getPopup,
                afterOpen: this.handleAfterOpen,
            };
            props.autoWidth = resultAutoWidth && !!searchValue;
        }

        return <Select {...props} {...others} />;
    }
}

export default polyfill(CascaderSelect);