chowa
Version:
UI component library based on React
60 lines (59 loc) • 3.16 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 utils_1 = require("../utils");
const classnames_1 = require("classnames");
const tool_1 = require("./tool");
class CascaderFilterOptions extends React.PureComponent {
componentDidUpdate(preProps) {
if (!utils_1.isEqual(preProps.activeOptions, this.props.activeOptions) && utils_1.isExist(this.props.activeOptions)) {
this.computedActiveOptionInVisible();
}
}
computedActiveOptionInVisible() {
const { height: clientHeight } = utils_1.doms.rect(this.wrapperEle);
const activeEle = this.wrapperEle.querySelector(`.${utils_1.preClass('cascader-list-active')}`);
const { offsetTop, offsetHeight } = activeEle;
const viewHeight = offsetHeight + offsetTop;
const scrollTop = this.wrapperEle.scrollTop;
if (offsetTop < scrollTop) {
this.wrapperEle.scrollTop = offsetTop;
}
else if (clientHeight + scrollTop < viewHeight) {
this.wrapperEle.scrollTop = viewHeight - clientHeight;
}
}
render() {
const { options, onSelect, onKeyDown, separator, activeOptions, selectedOptions, onOptionMouseEnter, onOptionMouseLeave } = this.props;
const renderSpreadOptions = tool_1.spreadOptions(options);
const activeValue = activeOptions === undefined
? undefined
: activeOptions.reduce((pre, cur) => pre + cur.value.toString(), '');
const selectedValue = selectedOptions.reduce((pre, cur) => pre + cur.value.toString(), '');
return (React.createElement("ul", { className: utils_1.preClass('cascader-filter-selector'), tabIndex: 0, onKeyDown: onKeyDown, ref: (ele) => {
this.wrapperEle = ele;
} }, renderSpreadOptions.map((spread, key) => {
const disabled = spread.some((option) => option.disabled === true);
const label = spread.map((option) => option.label);
const spreadValue = spread.reduce((pre, cur) => pre + cur.value.toString(), '');
const active = activeValue === spreadValue;
const selected = selectedValue === spreadValue;
const optionClass = classnames_1.default({
[utils_1.preClass('cascader-filter-option')]: true,
[utils_1.preClass('cascader-list-active')]: active,
[utils_1.preClass('cascader-list-selected')]: selected,
[utils_1.preClass('cascader-list-disabled')]: disabled
});
return (React.createElement("li", { key: key, className: optionClass, onClick: disabled ? null : onSelect.bind(this, spread), onMouseLeave: disabled ? null : onOptionMouseLeave, onMouseEnter: disabled ? null : onOptionMouseEnter.bind(this, spread) }, label.join(` ${separator} `)));
})));
}
}
exports.default = CascaderFilterOptions;