mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-02 23:37:04 +00:00
878 lines
29 KiB
JavaScript
878 lines
29 KiB
JavaScript
import _extends from 'babel-runtime/helpers/extends';
|
||
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
||
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
||
import _inherits from 'babel-runtime/helpers/inherits';
|
||
|
||
var _class, _temp;
|
||
|
||
import React, { Component } from 'react';
|
||
import PropTypes from 'prop-types';
|
||
import cx from 'classnames';
|
||
import Menu from '../menu';
|
||
import { func, obj, dom } from '../util';
|
||
import CascaderMenu from './menu';
|
||
import CascaderMenuItem from './item';
|
||
import { filterChildValue, getAllCheckedValues, forEachEnableNode, isSiblingOrSelf, isNodeChecked } from './utils';
|
||
|
||
var bindCtx = func.bindCtx;
|
||
var pickOthers = obj.pickOthers;
|
||
var addClass = dom.addClass,
|
||
removeClass = dom.removeClass,
|
||
setStyle = dom.setStyle,
|
||
getStyle = dom.getStyle;
|
||
|
||
/**
|
||
* Cascader
|
||
*/
|
||
|
||
var Cascader = (_temp = _class = function (_Component) {
|
||
_inherits(Cascader, _Component);
|
||
|
||
function Cascader(props, context) {
|
||
_classCallCheck(this, Cascader);
|
||
|
||
var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
|
||
|
||
var defaultValue = props.defaultValue,
|
||
value = props.value,
|
||
defaultExpandedValue = props.defaultExpandedValue,
|
||
expandedValue = props.expandedValue,
|
||
dataSource = props.dataSource,
|
||
multiple = props.multiple,
|
||
checkStrictly = props.checkStrictly,
|
||
canOnlyCheckLeaf = props.canOnlyCheckLeaf,
|
||
loadData = props.loadData;
|
||
|
||
|
||
_this.updateCache(dataSource);
|
||
|
||
var normalizedValue = _this.normalizeValue(typeof value === 'undefined' ? defaultValue : value);
|
||
if (!loadData) {
|
||
normalizedValue = normalizedValue.filter(function (v) {
|
||
return _this._v2n[v];
|
||
});
|
||
}
|
||
// TODO loadData
|
||
var realExpandedValue = typeof expandedValue === 'undefined' ? typeof defaultExpandedValue === 'undefined' ? _this.getExpandedValue(normalizedValue[0]) : _this.normalizeValue(defaultExpandedValue) : _this.normalizeValue(expandedValue);
|
||
var st = {
|
||
value: normalizedValue,
|
||
expandedValue: realExpandedValue
|
||
};
|
||
if (multiple && !checkStrictly && !canOnlyCheckLeaf) {
|
||
st.value = _this.completeValue(props.dataSource, st.value);
|
||
}
|
||
|
||
_this.state = st;
|
||
|
||
_this.lastExpandedValue = [].concat(_this.state.expandedValue);
|
||
|
||
bindCtx(_this, ['handleMouseLeave', 'handleFocus', 'handleFold', 'getCascaderNode', 'onBlur']);
|
||
return _this;
|
||
}
|
||
|
||
Cascader.prototype.componentDidMount = function componentDidMount() {
|
||
this.setCascaderInnerWidth();
|
||
};
|
||
|
||
Cascader.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||
var _this2 = this;
|
||
|
||
this.updateCache(nextProps.dataSource);
|
||
|
||
var state = {};
|
||
if ('value' in nextProps) {
|
||
state.value = this.normalizeValue(nextProps.value);
|
||
if (!nextProps.loadData) {
|
||
state.value = state.value.filter(function (v) {
|
||
return _this2._v2n[v];
|
||
});
|
||
}
|
||
|
||
var multiple = nextProps.multiple,
|
||
checkStrictly = nextProps.checkStrictly,
|
||
canOnlyCheckLeaf = nextProps.canOnlyCheckLeaf;
|
||
|
||
if (multiple && !checkStrictly && !canOnlyCheckLeaf) {
|
||
state.value = this.completeValue(nextProps.dataSource, state.value);
|
||
}
|
||
if (!this.state.expandedValue.length && !('expandedValue' in nextProps)) {
|
||
state.expandedValue = this.getExpandedValue(state.value[0]);
|
||
}
|
||
}
|
||
if ('expandedValue' in nextProps) {
|
||
state.expandedValue = this.normalizeValue(nextProps.expandedValue);
|
||
}
|
||
if (Object.keys(state).length) {
|
||
this.setState(state);
|
||
}
|
||
};
|
||
|
||
Cascader.prototype.componentDidUpdate = function componentDidUpdate() {
|
||
this.setCascaderInnerWidth();
|
||
};
|
||
|
||
Cascader.prototype.getCascaderNode = function getCascaderNode(ref) {
|
||
this.cascader = ref;
|
||
if (this.cascader) {
|
||
this.cascaderInner = this.cascader.querySelector('.' + this.props.prefix + 'cascader-inner');
|
||
}
|
||
};
|
||
|
||
Cascader.prototype.setCascaderInnerWidth = function setCascaderInnerWidth() {
|
||
if (!this.cascaderInner) {
|
||
return;
|
||
}
|
||
var menus = [].slice.call(this.cascaderInner.querySelectorAll('.' + this.props.prefix + 'cascader-menu-wrapper'));
|
||
if (menus.length === 0) {
|
||
return;
|
||
}
|
||
|
||
var menusWidth = Math.ceil(menus.reduce(function (ret, menu) {
|
||
return ret + getStyle(menu, 'width');
|
||
}, 0));
|
||
|
||
if (getStyle(this.cascaderInner, 'width') !== menusWidth) {
|
||
setStyle(this.cascaderInner, 'width', menusWidth);
|
||
}
|
||
|
||
if (getStyle(this.cascader, 'display') === 'inline-block') {
|
||
var hasRightBorderClass = this.props.prefix + 'has-right-border';
|
||
menus.forEach(function (menu) {
|
||
return removeClass(menu, hasRightBorderClass);
|
||
});
|
||
if (this.cascader.clientWidth > menusWidth) {
|
||
addClass(menus[menus.length - 1], hasRightBorderClass);
|
||
}
|
||
}
|
||
};
|
||
|
||
Cascader.prototype.setCache = function setCache(data) {
|
||
var _this3 = this;
|
||
|
||
var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0';
|
||
|
||
data.forEach(function (item, index) {
|
||
var value = item.value,
|
||
children = item.children;
|
||
|
||
var pos = prefix + '-' + index;
|
||
var newValue = String(value);
|
||
item.value = newValue;
|
||
_this3._v2n[newValue] = _this3._p2n[pos] = _extends({}, item, {
|
||
pos: pos,
|
||
_source: item
|
||
});
|
||
|
||
if (children && children.length) {
|
||
_this3.setCache(children, pos);
|
||
}
|
||
});
|
||
};
|
||
|
||
Cascader.prototype.updateCache = function updateCache(dataSource) {
|
||
this._v2n = {};
|
||
this._p2n = {};
|
||
this.setCache(dataSource);
|
||
};
|
||
|
||
Cascader.prototype.normalizeValue = function normalizeValue(value) {
|
||
if (value) {
|
||
if (Array.isArray(value)) {
|
||
return value;
|
||
}
|
||
|
||
return [value];
|
||
}
|
||
|
||
return [];
|
||
};
|
||
|
||
Cascader.prototype.getExpandedValue = function getExpandedValue(v) {
|
||
var _this4 = this;
|
||
|
||
if (!v || !this._v2n[v]) {
|
||
return [];
|
||
}
|
||
|
||
var pos = this._v2n[v].pos;
|
||
if (pos.split('-').length === 2) {
|
||
return [];
|
||
}
|
||
|
||
var expandedMap = {};
|
||
Object.keys(this._p2n).forEach(function (p) {
|
||
if (_this4.isDescendantOrSelf(p, pos) && p !== pos) {
|
||
expandedMap[_this4._p2n[p].value] = p;
|
||
}
|
||
});
|
||
|
||
return Object.keys(expandedMap).sort(function (prev, next) {
|
||
return expandedMap[prev].split('-').length - expandedMap[next].split('-').length;
|
||
});
|
||
};
|
||
/*eslint-disable max-statements*/
|
||
|
||
|
||
Cascader.prototype.completeValue = function completeValue(dataSource, value) {
|
||
return getAllCheckedValues(value, this._v2n, this._p2n);
|
||
};
|
||
/*eslint-enable*/
|
||
|
||
|
||
Cascader.prototype.flatValue = function flatValue(value) {
|
||
return filterChildValue(value, this._v2n, this._p2n);
|
||
};
|
||
|
||
Cascader.prototype.getValue = function getValue(pos) {
|
||
return this._p2n[pos] ? this._p2n[pos].value : null;
|
||
};
|
||
|
||
Cascader.prototype.getPos = function getPos(value) {
|
||
return this._v2n[value] ? this._v2n[value].pos : null;
|
||
};
|
||
|
||
Cascader.prototype.getData = function getData(value) {
|
||
var _this5 = this;
|
||
|
||
return value.map(function (v) {
|
||
return _this5._v2n[v];
|
||
});
|
||
};
|
||
|
||
Cascader.prototype.isDescendantOrSelf = function isDescendantOrSelf(currentPos, targetPos) {
|
||
if (!currentPos || !targetPos) {
|
||
return false;
|
||
}
|
||
|
||
var currentNums = currentPos.split('-');
|
||
var targetNums = targetPos.split('-');
|
||
|
||
return currentNums.length <= targetNums.length && currentNums.every(function (num, index) {
|
||
return num === targetNums[index];
|
||
});
|
||
};
|
||
|
||
Cascader.prototype.processValue = function processValue(value, v, checked) {
|
||
var index = value.indexOf(v);
|
||
if (checked && index === -1) {
|
||
value.push(v);
|
||
} else if (!checked && index > -1) {
|
||
value.splice(index, 1);
|
||
}
|
||
};
|
||
|
||
Cascader.prototype.handleSelect = function handleSelect(v, canExpand) {
|
||
var _this6 = this;
|
||
|
||
if (!(this.props.canOnlySelectLeaf && canExpand)) {
|
||
var data = this._v2n[v];
|
||
var nums = data.pos.split('-');
|
||
var selectedPath = nums.slice(1).reduce(function (ret, num, index) {
|
||
var p = nums.slice(0, index + 2).join('-');
|
||
ret.push(_this6._p2n[p]);
|
||
return ret;
|
||
}, []);
|
||
|
||
if (this.state.value[0] !== v) {
|
||
if (!('value' in this.props)) {
|
||
this.setState({
|
||
value: [v]
|
||
});
|
||
}
|
||
|
||
if ('onChange' in this.props) {
|
||
this.props.onChange(v, data, {
|
||
selectedPath: selectedPath
|
||
});
|
||
}
|
||
}
|
||
|
||
if ('onSelect' in this.props) {
|
||
this.props.onSelect(v, data, {
|
||
selectedPath: selectedPath
|
||
});
|
||
}
|
||
}
|
||
|
||
if (canExpand) {
|
||
if (!this.props.canOnlySelectLeaf) {
|
||
this.lastExpandedValue = this.state.expandedValue.slice(0, -1);
|
||
}
|
||
} else {
|
||
this.lastExpandedValue = [].concat(this.state.expandedValue);
|
||
}
|
||
};
|
||
/*eslint-disable max-statements*/
|
||
|
||
|
||
Cascader.prototype.handleCheck = function handleCheck(v, checked) {
|
||
var _this7 = this;
|
||
|
||
var _props = this.props,
|
||
checkStrictly = _props.checkStrictly,
|
||
canOnlyCheckLeaf = _props.canOnlyCheckLeaf;
|
||
|
||
var value = [].concat(this.state.value);
|
||
|
||
if (checkStrictly || canOnlyCheckLeaf) {
|
||
this.processValue(value, v, checked);
|
||
} else {
|
||
var pos = this.getPos(v);
|
||
|
||
var ps = Object.keys(this._p2n);
|
||
|
||
forEachEnableNode(this._v2n[v], function (node) {
|
||
if (node.checkable === false) return;
|
||
_this7.processValue(value, node.value, checked);
|
||
});
|
||
|
||
var currentPos = pos;
|
||
var nums = pos.split('-');
|
||
for (var i = nums.length; i > 2; i--) {
|
||
var parentCheck = true;
|
||
|
||
var parentPos = nums.slice(0, i - 1).join('-');
|
||
if (this._p2n[parentPos].disabled || this._p2n[parentPos].checkboxDisabled || this._p2n[parentPos].checkable === false) {
|
||
currentPos = parentPos;
|
||
continue;
|
||
}
|
||
|
||
var parentValue = this._p2n[parentPos].value;
|
||
var parentChecked = value.indexOf(parentValue) > -1;
|
||
if (!checked && !parentChecked) {
|
||
break;
|
||
}
|
||
|
||
for (var j = 0; j < ps.length; j++) {
|
||
var p = ps[j];
|
||
var pnode = this._p2n[p];
|
||
if (isSiblingOrSelf(currentPos, p) && !pnode.disabled && !pnode.checkboxDisabled) {
|
||
var k = pnode.value;
|
||
// eslint-disable-next-line max-depth
|
||
if (pnode.checkable === false) {
|
||
// eslint-disable-next-line max-depth
|
||
if (!pnode.children || pnode.children.length === 0) {
|
||
continue;
|
||
}
|
||
// eslint-disable-next-line max-depth
|
||
for (var m = 0; m < pnode.children.length; m++) {
|
||
// eslint-disable-next-line max-depth
|
||
if (!pnode.children.every(function (child) {
|
||
return isNodeChecked(child, value);
|
||
})) {
|
||
parentCheck = false;
|
||
break;
|
||
}
|
||
}
|
||
} else if (value.indexOf(k) === -1) {
|
||
parentCheck = false;
|
||
}
|
||
|
||
if (!parentCheck) break;
|
||
}
|
||
}
|
||
|
||
this.processValue(value, parentValue, parentCheck);
|
||
|
||
currentPos = parentPos;
|
||
}
|
||
}
|
||
|
||
if (!('value' in this.props)) {
|
||
this.setState({
|
||
value: value
|
||
});
|
||
}
|
||
|
||
if ('onChange' in this.props) {
|
||
if (checkStrictly || canOnlyCheckLeaf) {
|
||
var data = this.getData(value);
|
||
this.props.onChange(value, data, {
|
||
checked: checked,
|
||
currentData: this._v2n[v],
|
||
checkedData: data
|
||
});
|
||
} else {
|
||
var flatValue = this.flatValue(value);
|
||
var flatData = this.getData(flatValue);
|
||
var checkedData = this.getData(value);
|
||
var indeterminateValue = this.getIndeterminate(value);
|
||
var indeterminateData = this.getData(indeterminateValue);
|
||
this.props.onChange(flatValue, flatData, {
|
||
checked: checked,
|
||
currentData: this._v2n[v],
|
||
checkedData: checkedData,
|
||
indeterminateData: indeterminateData
|
||
});
|
||
}
|
||
}
|
||
|
||
this.lastExpandedValue = [].concat(this.state.expandedValue);
|
||
};
|
||
|
||
Cascader.prototype.handleExpand = function handleExpand(value, level, canExpand, focusedFirstChild) {
|
||
var _this8 = this;
|
||
|
||
var expandedValue = this.state.expandedValue;
|
||
|
||
|
||
if (canExpand || expandedValue.length > level) {
|
||
if (canExpand) {
|
||
expandedValue.splice(level, expandedValue.length - level, value);
|
||
} else {
|
||
expandedValue.splice(level);
|
||
}
|
||
|
||
var callback = function callback() {
|
||
_this8.setExpandValue(expandedValue);
|
||
|
||
if (focusedFirstChild) {
|
||
var endExpandedValue = expandedValue[expandedValue.length - 1];
|
||
_this8.setState({
|
||
focusedValue: _this8._v2n[endExpandedValue].children[0].value
|
||
});
|
||
}
|
||
};
|
||
|
||
var loadData = this.props.loadData;
|
||
|
||
if (canExpand && loadData) {
|
||
var data = this._v2n[value];
|
||
return loadData(data, data._source).then(callback);
|
||
} else {
|
||
return callback();
|
||
}
|
||
}
|
||
};
|
||
|
||
Cascader.prototype.handleMouseLeave = function handleMouseLeave() {
|
||
this.setExpandValue([].concat(this.lastExpandedValue));
|
||
};
|
||
|
||
Cascader.prototype.setExpandValue = function setExpandValue(expandedValue) {
|
||
if (!('expandedValue' in this.props)) {
|
||
this.setState({
|
||
expandedValue: expandedValue
|
||
});
|
||
}
|
||
|
||
if ('onExpand' in this.props) {
|
||
this.props.onExpand(expandedValue);
|
||
}
|
||
};
|
||
|
||
Cascader.prototype.getFirstFocusKeyByDataSource = function getFirstFocusKeyByDataSource(dataSource) {
|
||
if (!dataSource || dataSource.length === 0) {
|
||
return '';
|
||
}
|
||
|
||
for (var i = 0; i < dataSource.length; i++) {
|
||
if (dataSource[i] && !dataSource[i].disabled) {
|
||
return dataSource[i].value;
|
||
}
|
||
}
|
||
|
||
return '';
|
||
};
|
||
|
||
Cascader.prototype.getFirstFocusKeyByFilteredPaths = function getFirstFocusKeyByFilteredPaths(filteredPaths) {
|
||
if (!filteredPaths || filteredPaths.length === 0) {
|
||
return '';
|
||
}
|
||
|
||
for (var i = 0; i < filteredPaths.length; i++) {
|
||
var path = filteredPaths[i];
|
||
if (!path.some(function (item) {
|
||
return item.disabled;
|
||
})) {
|
||
var lastItem = path[path.length - 1];
|
||
return lastItem.value;
|
||
}
|
||
}
|
||
|
||
return '';
|
||
};
|
||
|
||
Cascader.prototype.getFirstFocusKey = function getFirstFocusKey() {
|
||
var _props2 = this.props,
|
||
dataSource = _props2.dataSource,
|
||
searchValue = _props2.searchValue,
|
||
filteredPaths = _props2.filteredPaths;
|
||
|
||
|
||
return !searchValue ? this.getFirstFocusKeyByDataSource(dataSource) : this.getFirstFocusKeyByFilteredPaths(filteredPaths);
|
||
};
|
||
|
||
Cascader.prototype.setFocusValue = function setFocusValue() {
|
||
this.setState({
|
||
focusedValue: this.getFirstFocusKey()
|
||
});
|
||
};
|
||
|
||
Cascader.prototype.handleFocus = function handleFocus(focusedValue) {
|
||
this.setState({
|
||
focusedValue: focusedValue
|
||
});
|
||
};
|
||
|
||
Cascader.prototype.handleFold = function handleFold() {
|
||
var expandedValue = this.state.expandedValue;
|
||
|
||
if (expandedValue.length > 0) {
|
||
this.setExpandValue(expandedValue.slice(0, -1));
|
||
}
|
||
|
||
this.setState({
|
||
focusedValue: expandedValue[expandedValue.length - 1]
|
||
});
|
||
};
|
||
|
||
Cascader.prototype.getIndeterminate = function getIndeterminate(value) {
|
||
var _this9 = this;
|
||
|
||
var indeterminateValues = [];
|
||
|
||
var poss = filterChildValue(value.filter(function (v) {
|
||
return !!_this9._v2n[v];
|
||
}).filter(function (v) {
|
||
return !_this9._v2n[v].disabled && !_this9._v2n[v].checkboxDisabled && _this9._v2n[v].checkable !== false;
|
||
}), this._v2n, this._p2n).map(function (v) {
|
||
return _this9._v2n[v].pos;
|
||
});
|
||
poss.forEach(function (pos) {
|
||
var nums = pos.split('-');
|
||
for (var i = nums.length; i > 2; i--) {
|
||
var parentPos = nums.slice(0, i - 1).join('-');
|
||
var parent = _this9._p2n[parentPos];
|
||
if (parent.disabled || parent.checkboxDisabled) break;
|
||
var parentValue = parent.value;
|
||
if (indeterminateValues.indexOf(parentValue) === -1) {
|
||
indeterminateValues.push(parentValue);
|
||
}
|
||
}
|
||
});
|
||
|
||
return indeterminateValues;
|
||
};
|
||
|
||
Cascader.prototype.onBlur = function onBlur(e) {
|
||
this.setState({
|
||
focusedValue: undefined
|
||
});
|
||
|
||
this.props.onBlur && this.props.onBlur(e);
|
||
};
|
||
|
||
Cascader.prototype.renderMenu = function renderMenu(data, level) {
|
||
var _this10 = this;
|
||
|
||
var _props3 = this.props,
|
||
prefix = _props3.prefix,
|
||
multiple = _props3.multiple,
|
||
useVirtual = _props3.useVirtual,
|
||
checkStrictly = _props3.checkStrictly,
|
||
expandTriggerType = _props3.expandTriggerType,
|
||
loadData = _props3.loadData,
|
||
canOnlyCheckLeaf = _props3.canOnlyCheckLeaf,
|
||
listClassName = _props3.listClassName,
|
||
listStyle = _props3.listStyle,
|
||
itemRender = _props3.itemRender;
|
||
var _state = this.state,
|
||
value = _state.value,
|
||
expandedValue = _state.expandedValue,
|
||
focusedValue = _state.focusedValue;
|
||
|
||
|
||
return React.createElement(
|
||
CascaderMenu,
|
||
{
|
||
key: level,
|
||
prefix: prefix,
|
||
useVirtual: useVirtual,
|
||
className: listClassName,
|
||
style: listStyle,
|
||
ref: this.saveMenuRef,
|
||
focusedKey: focusedValue,
|
||
onItemFocus: this.handleFocus,
|
||
onBlur: this.onBlur
|
||
},
|
||
data.map(function (item) {
|
||
var disabled = !!item.disabled;
|
||
var canExpand = !!item.children && !!item.children.length || !!loadData && !item.isLeaf;
|
||
var expanded = expandedValue[level] === item.value;
|
||
var props = {
|
||
prefix: prefix,
|
||
disabled: disabled,
|
||
canExpand: canExpand,
|
||
expanded: expanded,
|
||
expandTriggerType: expandTriggerType,
|
||
onExpand: _this10.handleExpand.bind(_this10, item.value, level, canExpand),
|
||
onFold: _this10.handleFold
|
||
};
|
||
|
||
if (multiple) {
|
||
props.checkable = !(canOnlyCheckLeaf && canExpand);
|
||
props.checked = value.indexOf(item.value) > -1 || !!item.checked;
|
||
props.indeterminate = (checkStrictly || canOnlyCheckLeaf ? false : _this10.indeterminate.indexOf(item.value) > -1) || !!item.indeterminate;
|
||
props.checkboxDisabled = !!item.checkboxDisabled;
|
||
props.onCheck = _this10.handleCheck.bind(_this10, item.value);
|
||
} else {
|
||
props.selected = value[0] === item.value;
|
||
props.onSelect = _this10.handleSelect.bind(_this10, item.value, canExpand);
|
||
}
|
||
|
||
return React.createElement(
|
||
CascaderMenuItem,
|
||
_extends({ key: item.value }, props),
|
||
itemRender(item)
|
||
);
|
||
})
|
||
);
|
||
};
|
||
|
||
Cascader.prototype.renderMenus = function renderMenus() {
|
||
var dataSource = this.props.dataSource;
|
||
var expandedValue = this.state.expandedValue;
|
||
|
||
|
||
var menus = [];
|
||
var data = dataSource;
|
||
|
||
for (var i = 0; i <= expandedValue.length; i++) {
|
||
if (!data) {
|
||
break;
|
||
}
|
||
|
||
menus.push(this.renderMenu(data, i));
|
||
|
||
var expandedItem = void 0;
|
||
for (var j = 0; j < data.length; j++) {
|
||
if (data[j].value === expandedValue[i]) {
|
||
expandedItem = data[j];
|
||
break;
|
||
}
|
||
}
|
||
data = expandedItem ? expandedItem.children : null;
|
||
}
|
||
|
||
return menus;
|
||
};
|
||
|
||
Cascader.prototype.renderFilteredItem = function renderFilteredItem(path) {
|
||
var _props4 = this.props,
|
||
prefix = _props4.prefix,
|
||
resultRender = _props4.resultRender,
|
||
searchValue = _props4.searchValue,
|
||
multiple = _props4.multiple;
|
||
var value = this.state.value;
|
||
|
||
var lastItem = path[path.length - 1];
|
||
|
||
var Item = void 0;
|
||
var props = {
|
||
key: lastItem.value,
|
||
className: prefix + 'cascader-filtered-item',
|
||
disabled: path.some(function (item) {
|
||
return item.disabled;
|
||
}),
|
||
children: resultRender(searchValue, path)
|
||
};
|
||
|
||
if (multiple) {
|
||
Item = Menu.CheckboxItem;
|
||
var _props5 = this.props,
|
||
checkStrictly = _props5.checkStrictly,
|
||
canOnlyCheckLeaf = _props5.canOnlyCheckLeaf;
|
||
|
||
props.checked = value.indexOf(lastItem.value) > -1;
|
||
props.indeterminate = !checkStrictly && !canOnlyCheckLeaf && this.indeterminate.indexOf(lastItem.value) > -1;
|
||
props.checkboxDisabled = lastItem.checkboxDisabled;
|
||
props.onChange = this.handleCheck.bind(this, lastItem.value);
|
||
} else {
|
||
Item = Menu.Item;
|
||
props.selected = value[0] === lastItem.value;
|
||
props.onSelect = this.handleSelect.bind(this, lastItem.value, false);
|
||
}
|
||
|
||
return React.createElement(Item, props);
|
||
};
|
||
|
||
Cascader.prototype.renderFilteredList = function renderFilteredList() {
|
||
var _this11 = this;
|
||
|
||
var _props6 = this.props,
|
||
prefix = _props6.prefix,
|
||
filteredListStyle = _props6.filteredListStyle,
|
||
filteredPaths = _props6.filteredPaths;
|
||
var focusedValue = this.state.focusedValue;
|
||
|
||
return React.createElement(
|
||
Menu,
|
||
{
|
||
focusedKey: focusedValue,
|
||
onItemFocus: this.handleFocus,
|
||
className: prefix + 'cascader-filtered-list',
|
||
style: filteredListStyle
|
||
},
|
||
filteredPaths.map(function (path) {
|
||
return _this11.renderFilteredItem(path);
|
||
})
|
||
);
|
||
};
|
||
|
||
Cascader.prototype.render = function render() {
|
||
var _cx;
|
||
|
||
var _props7 = this.props,
|
||
prefix = _props7.prefix,
|
||
rtl = _props7.rtl,
|
||
className = _props7.className,
|
||
expandTriggerType = _props7.expandTriggerType,
|
||
multiple = _props7.multiple,
|
||
dataSource = _props7.dataSource,
|
||
checkStrictly = _props7.checkStrictly,
|
||
canOnlyCheckLeaf = _props7.canOnlyCheckLeaf,
|
||
searchValue = _props7.searchValue;
|
||
|
||
var others = pickOthers(Object.keys(Cascader.propTypes), this.props);
|
||
var value = this.state.value;
|
||
|
||
|
||
if (rtl) {
|
||
others.dir = 'rtl';
|
||
}
|
||
|
||
var props = _extends({
|
||
className: cx((_cx = {}, _cx[prefix + 'cascader'] = true, _cx.multiple = multiple, _cx[className] = !!className, _cx)),
|
||
ref: 'cascader'
|
||
}, others);
|
||
if (expandTriggerType === 'hover') {
|
||
props.onMouseLeave = this.handleMouseLeave;
|
||
}
|
||
|
||
if (multiple && !checkStrictly && !canOnlyCheckLeaf) {
|
||
this.indeterminate = this.getIndeterminate(value);
|
||
}
|
||
|
||
return React.createElement(
|
||
'div',
|
||
_extends({}, props, { ref: this.getCascaderNode }),
|
||
!searchValue ? React.createElement(
|
||
'div',
|
||
{ className: prefix + 'cascader-inner' },
|
||
dataSource && dataSource.length ? this.renderMenus() : null
|
||
) : this.renderFilteredList()
|
||
);
|
||
};
|
||
|
||
return Cascader;
|
||
}(Component), _class.propTypes = {
|
||
prefix: PropTypes.string,
|
||
rtl: PropTypes.bool,
|
||
pure: PropTypes.bool,
|
||
className: PropTypes.string,
|
||
/**
|
||
* 数据源，结构可参考下方说明
|
||
*/
|
||
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,
|
||
onSelect: PropTypes.func,
|
||
/**
|
||
* （非受控）默认展开值，如果不设置，组件内部会根据 defaultValue/value 进行自动设置
|
||
*/
|
||
defaultExpandedValue: PropTypes.arrayOf(PropTypes.string),
|
||
/**
|
||
* （受控）当前展开值
|
||
*/
|
||
expandedValue: PropTypes.arrayOf(PropTypes.string),
|
||
/**
|
||
* 展开触发的方式
|
||
*/
|
||
expandTriggerType: PropTypes.oneOf(['click', 'hover']),
|
||
/**
|
||
* 展开时触发的回调函数
|
||
* @param {Array} expandedValue 各列展开值的数组
|
||
*/
|
||
onExpand: PropTypes.func,
|
||
/**
|
||
* 是否开启虚拟滚动
|
||
*/
|
||
useVirtual: PropTypes.bool,
|
||
/**
|
||
* 是否多选
|
||
*/
|
||
multiple: PropTypes.bool,
|
||
/**
|
||
* 单选时是否只能选中叶子节点
|
||
*/
|
||
canOnlySelectLeaf: PropTypes.bool,
|
||
/**
|
||
* 多选时是否只能选中叶子节点
|
||
*/
|
||
canOnlyCheckLeaf: PropTypes.bool,
|
||
/**
|
||
* 父子节点是否选中不关联
|
||
*/
|
||
checkStrictly: PropTypes.bool,
|
||
/**
|
||
* 每列列表样式对象
|
||
*/
|
||
listStyle: PropTypes.object,
|
||
/**
|
||
* 每列列表类名
|
||
*/
|
||
listClassName: PropTypes.string,
|
||
/**
|
||
* 每列列表项渲染函数
|
||
* @param {Object} data 数据
|
||
* @return {ReactNode} 列表项内容
|
||
*/
|
||
itemRender: PropTypes.func,
|
||
/**
|
||
* 异步加载数据函数
|
||
* @param {Object} data 当前点击异步加载的数据
|
||
* @param {Object} source 当前点击数据，source是原始对象
|
||
*/
|
||
loadData: PropTypes.func,
|
||
searchValue: PropTypes.string,
|
||
onBlur: PropTypes.func,
|
||
filteredPaths: PropTypes.array,
|
||
filteredListStyle: PropTypes.object,
|
||
resultRender: PropTypes.func
|
||
}, _class.defaultProps = {
|
||
prefix: 'next-',
|
||
rtl: false,
|
||
pure: false,
|
||
dataSource: [],
|
||
defaultValue: null,
|
||
canOnlySelectLeaf: false,
|
||
canOnlyCheckLeaf: false,
|
||
expandTriggerType: 'click',
|
||
multiple: false,
|
||
useVirtual: false,
|
||
checkStrictly: false,
|
||
itemRender: function itemRender(item) {
|
||
return item.label;
|
||
}
|
||
}, _temp);
|
||
Cascader.displayName = 'Cascader';
|
||
export { Cascader as default }; |