chowa
Version:
UI component library based on React
101 lines (100 loc) • 5.39 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.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const tool_1 = require("./tool");
const no_data_1 = require("../no-data");
const i18n_1 = require("../i18n");
class SelectSelector extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
renderOptions: tool_1.filterOptions(props.options, props.searchValue, props.onFilter)
};
}
componentDidUpdate(preProps) {
if (preProps.searchValue !== this.props.searchValue
|| !utils_1.isEqual(preProps.options, this.props.options)) {
this.setState({
renderOptions: tool_1.filterOptions(this.props.options, this.props.searchValue, this.props.onFilter)
});
}
if (utils_1.isExist(this.props.activeOption) && !utils_1.isEqual(preProps.activeOption, this.props.activeOption)) {
this.computedActiveOptionInVisible();
}
}
computedActiveOptionInVisible() {
const { height: clientHeight } = utils_1.doms.rect(this.wrapperEle);
const activeEle = this.wrapperEle.querySelector(`.${utils_1.preClass('select-option-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;
}
}
renderOptionGroup(option, key) {
const { options, className, title } = option;
const groupClass = classnames_1.default({
[utils_1.preClass('select-option-group')]: true,
[className]: utils_1.isExist(className)
});
return (React.createElement("li", { className: groupClass, key: key },
React.createElement("div", { className: utils_1.preClass('select-option-group-title') }, title),
React.createElement("ul", { className: utils_1.preClass('select-option-selector') }, options.map((nextOption, childKey) => {
if (utils_1.hasProperty(nextOption, 'options')) {
return this.renderOptionGroup(nextOption, childKey);
}
return this.renderOption(nextOption, childKey);
}))));
}
renderOption(option, key) {
const { multiple, selectedOptions, deSelectHandler, selectHandler, activeOption, onOptionMouseEnter, onOptionMouseLeave } = this.props;
const { value, className, disabled } = option;
const selected = selectedOptions.some((item) => utils_1.isEqual(item.value, value));
const clickHandler = multiple
? selected ? deSelectHandler : selectHandler
: selectHandler;
const optionClass = classnames_1.default({
[utils_1.preClass('select-option')]: true,
[utils_1.preClass('select-option-multiple')]: multiple,
[utils_1.preClass('select-option-selected')]: selected,
[utils_1.preClass('select-option-active')]: activeOption && utils_1.isEqual(activeOption.value, value),
[utils_1.preClass('select-option-disabled')]: disabled,
[className]: utils_1.isExist(className)
});
return (React.createElement("li", { className: optionClass, key: key, onClick: disabled ? null : clickHandler.bind(this, option), onMouseEnter: disabled ? null : onOptionMouseEnter.bind(this, option), onMouseLeave: disabled ? null : onOptionMouseLeave },
React.createElement("span", { className: utils_1.preClass('select-option-label') }, tool_1.getOptionLabel(option))));
}
render() {
const { searchable, searchValue, noDataDescription, noDataImg, noDataImgStyle, onKeyDown } = this.props;
const { renderOptions } = this.state;
return (React.createElement("div", { className: utils_1.preClass('select-selector-wrapper'), onKeyDown: onKeyDown, tabIndex: 0, ref: (ele) => {
this.wrapperEle = ele;
} },
React.createElement("ul", { className: utils_1.preClass('select-option-selector') },
renderOptions.length === 0 && searchable && searchValue &&
React.createElement("li", { className: utils_1.preClass('select-not-found') },
React.createElement(i18n_1.I18nReceiver, { module: 'Select' }, (i18n) => (React.createElement(no_data_1.default, { description: noDataDescription || i18n.noDataDescription, img: noDataImg, imgStyle: noDataImgStyle })))),
renderOptions.length > 0 &&
renderOptions.map((option, key) => {
if (utils_1.hasProperty(option, 'options')) {
return this.renderOptionGroup(option, key);
}
return this.renderOption(option, key);
}))));
}
}
exports.default = SelectSelector;