chowa
Version:
UI component library based on React
72 lines (71 loc) • 3.71 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 = require("classnames");
const utils_1 = require("../utils");
const tool_1 = require("./tool");
class AutoCompleteSelector extends React.PureComponent {
componentDidUpdate(preProps) {
if (utils_1.isExist(this.props.activeValue) && preProps.activeValue !== this.props.searchValue) {
const { height: clientHeight } = utils_1.doms.rect(this.wrapperEle);
const activeEle = this.wrapperEle.querySelector(`.${utils_1.preClass('auto-complete-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;
}
}
}
renderOption(option, key) {
const { formatter, mode, activeValue, searchValue, onSelectValue, updateActiveValue } = this.props;
const value = typeof option !== 'object' ? option : option.value;
const displayValue = mode === 'concat' ? `${searchValue}${value}` : value;
const optionClass = classNames({
[utils_1.preClass('auto-complete-option')]: true,
[utils_1.preClass('auto-complete-option-active')]: value === activeValue
});
return (React.createElement("li", { key: key, className: optionClass, onClick: onSelectValue.bind(this, displayValue), onMouseLeave: updateActiveValue.bind(this, undefined), onMouseEnter: updateActiveValue.bind(this, value) }, utils_1.isExist(formatter) ? formatter(option, searchValue) : displayValue));
}
renderOptionGroup(option, key) {
const { title, extra, children } = option;
return (React.createElement("ul", { key: key, className: utils_1.preClass('auto-complete-option-group') },
React.createElement("div", { className: utils_1.preClass('auto-complete-option-group-title-wrapper') },
React.createElement("span", { className: utils_1.preClass('auto-complete-option-group-title') }, title),
utils_1.isExist(extra) &&
React.createElement("span", { className: utils_1.preClass('auto-complete-option-group-extra') }, extra)),
Array.isArray(children) && children.map((childOption, childKey) => {
if (tool_1.isOptionGroup(childOption)) {
return this.renderOptionGroup(childOption, childKey);
}
return this.renderOption(childOption, childKey);
})));
}
render() {
const { options, size } = this.props;
const wrappClass = classNames({
[utils_1.preClass('auto-complete-selector')]: true,
[utils_1.preClass(`auto-complete-selector-${size}`)]: size !== 'default'
});
return (React.createElement("ul", { className: wrappClass, ref: (ele) => {
this.wrapperEle = ele;
} }, options.map((option, key) => {
if (tool_1.isOptionGroup(option)) {
return this.renderOptionGroup(option, key);
}
return this.renderOption(option, key);
})));
}
}
exports.default = AutoCompleteSelector;