chowa
Version:
UI component library based on React
49 lines (48 loc) • 2.9 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 CascaderCard = (props) => {
const { options, optionTitles, selectedOptions, onSelect, optionsTier, activeOption, onKeyDown, onOptionMouseEnter, onOptionMouseLeave } = props;
const renderOptions = selectedOptions.length === 0
? options
: selectedOptions[selectedOptions.length === optionsTier
? optionsTier - 2
: selectedOptions.length - 1].children || [];
return (React.createElement("div", { className: utils_1.preClass('cascader-card'), tabIndex: 0, onKeyDown: onKeyDown },
React.createElement("ul", { className: utils_1.preClass('cascader-card-tier-title') }, Array.isArray(optionTitles) &&
optionTitles.map((title, key) => {
const disabled = selectedOptions.length < key;
const active = selectedOptions.length === key
|| (selectedOptions.length === optionsTier
&& selectedOptions.length - 1 === key);
const titleClass = classnames_1.default({
[utils_1.preClass('cascader-card-title')]: true,
[utils_1.preClass('cascader-card-disabled')]: disabled,
[utils_1.preClass('cascader-card-active')]: active
});
return (React.createElement("li", { key: key, onClick: disabled ? null : onSelect.bind(this, undefined, key + 1), className: titleClass }, title));
})),
React.createElement("dl", { className: utils_1.preClass('cascader-card-selector') }, renderOptions.map((option, key) => {
const { value, label, disabled } = option;
const selected = selectedOptions.some((item) => item.value === value);
const optionClass = classnames_1.default({
[utils_1.preClass('cascader-card-option')]: true,
[utils_1.preClass('cascader-card-active')]: utils_1.isExist(activeOption)
&& activeOption.value === value,
[utils_1.preClass('cascader-card-selected')]: selected,
[utils_1.preClass('cascader-card-disabled')]: disabled
});
return (React.createElement("dd", { className: optionClass, key: key, onMouseEnter: disabled ? null : onOptionMouseEnter.bind(this, option), onMouseLeave: disabled ? null : onOptionMouseLeave, onClick: disabled ? null : onSelect.bind(this, option, selectedOptions.length + 1) }, label));
}))));
};
exports.default = CascaderCard;