chowa
Version:
UI component library based on React
64 lines (63 loc) • 3.48 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const icon_1 = require("../icon");
class CascaderList extends React.PureComponent {
componentDidUpdate(preProps) {
if (!utils_1.isEqual(preProps.activeOption, this.props.activeOption) && utils_1.isExist(this.props.activeOption)) {
this.computedActiveOptionInVisible();
}
}
computedActiveOptionInVisible() {
const activeEle = this.wrapperEle.querySelector(`.${utils_1.preClass('cascader-list-active')}`);
const parentEle = activeEle.parentElement;
const { height: clientHeight } = utils_1.doms.rect(parentEle);
const { offsetTop, offsetHeight } = activeEle;
const viewHeight = offsetHeight + offsetTop;
const scrollTop = parentEle.scrollTop;
if (offsetTop < scrollTop) {
parentEle.scrollTop = offsetTop;
}
else if (clientHeight + scrollTop < viewHeight) {
parentEle.scrollTop = viewHeight - clientHeight;
}
}
renderListItem(tier, option, key) {
const { label, disabled, children, value } = option;
const { activeOption, onOptionMouseEnter, onOptionMouseLeave, onSelect, selectedOptions } = this.props;
const optionClass = classnames_1.default({
[utils_1.preClass('cascader-list-option')]: true,
[utils_1.preClass('cascader-list-active')]: utils_1.isExist(activeOption) && activeOption.value === value,
[utils_1.preClass('cascader-list-selected')]: selectedOptions.some((item) => item.value === value),
[utils_1.preClass('cascader-list-disabled')]: disabled
});
return (React.createElement("li", { key: key, onClick: disabled ? null : onSelect.bind(this, option, tier), onMouseEnter: disabled ? null : onOptionMouseEnter.bind(this, option), onMouseLeave: disabled ? null : onOptionMouseLeave, className: optionClass },
React.createElement("span", { className: utils_1.preClass('cascader-label') }, label),
children &&
React.createElement("span", { className: utils_1.preClass('cascader-list-arrow') },
React.createElement(icon_1.default, { type: 'arrow-right' }))));
}
render() {
const { options, onKeyDown, selectedOptions } = this.props;
return (React.createElement("div", { className: utils_1.preClass('cascader-list'), tabIndex: 0, onKeyDown: onKeyDown, ref: (ele) => {
this.wrapperEle = ele;
} },
React.createElement("ul", { className: utils_1.preClass('cascader-list-selector') }, options.map((option, key) => this.renderListItem(1, option, key))),
selectedOptions.map((option, level) => {
if (Array.isArray(option.children) && option.children.length > 0) {
return (React.createElement("ul", { key: level, className: utils_1.preClass('cascader-list-selector') }, option.children.map((nextOption, nextKey) => (this.renderListItem(level + 2, nextOption, nextKey)))));
}
})));
}
}
exports.default = CascaderList;