tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
291 lines (289 loc) • 11.1 kB
JavaScript
;
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.FIX_LABEL = void 0;
exports["default"] = Column;
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _commonUtil = require("../utils/commonUtil");
var _context = _interopRequireDefault(require("../context"));
var _Checkbox = _interopRequireDefault(require("./Checkbox"));
var _useSearchOptions = require("../hooks/useSearchOptions");
var _rcVirtualList = _interopRequireDefault(require("rc-virtual-list"));
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
"default": e
};
}
function _getRequireWildcardCache(e) {
if ("function" != typeof WeakMap) return null;
var r = new WeakMap(),
t = new WeakMap();
return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
return e ? t : r;
})(e);
}
function _interopRequireWildcard(e, r) {
if (!r && e && e.__esModule) return e;
if (null === e || "object" != _typeof(e) && "function" != typeof e) return {
"default": e
};
var t = _getRequireWildcardCache(r);
if (t && t.has(e)) return t.get(e);
var n = {
__proto__: null
},
a = Object.defineProperty && Object.getOwnPropertyDescriptor;
for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {
var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
}
return n["default"] = e, t && t.set(e, n), n;
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
} // @ts-nocheck
var FIX_LABEL = exports.FIX_LABEL = '__cascader_fix_label__';
function Column(_ref) {
var prefixCls = _ref.prefixCls,
multiple = _ref.multiple,
options = _ref.options,
activeValue = _ref.activeValue,
prevValuePath = _ref.prevValuePath,
onToggleOpen = _ref.onToggleOpen,
onSelect = _ref.onSelect,
onActive = _ref.onActive,
checkedSet = _ref.checkedSet,
halfCheckedSet = _ref.halfCheckedSet,
loadingKeys = _ref.loadingKeys,
isSelectable = _ref.isSelectable,
renderItem = _ref.renderItem,
searchValue = _ref.searchValue,
level = _ref.level,
dropdownVisible = _ref.dropdownVisible,
_ref$optionHeight = _ref.optionHeight,
optionHeight = _ref$optionHeight === void 0 ? 32 : _ref$optionHeight,
isEmpty = _ref.isEmpty,
_ref$optionsNum = _ref.optionsNum,
optionsNum = _ref$optionsNum === void 0 ? 7 : _ref$optionsNum;
var ref = React.useRef(null);
var menuPrefixCls = "".concat(prefixCls, "-menu ").concat(prefixCls, "-menu-").concat(level);
var menuItemPrefixCls = "".concat(prefixCls, "-menu-item");
var listHeight = React.useMemo(function () {
if (optionsNum) {
return Math.ceil((optionHeight || 36) * optionsNum) || 180;
}
return 180;
}, [optionsNum, optionHeight]);
var initDropRenderRef = React.useRef(dropdownVisible);
var _React$useContext = React.useContext(_context["default"]),
fieldNames = _React$useContext.fieldNames,
changeOnSelect = _React$useContext.changeOnSelect,
expandTrigger = _React$useContext.expandTrigger,
expandIcon = _React$useContext.expandIcon,
loadingIcon = _React$useContext.loadingIcon,
dropdownMenuColumnStyle = _React$useContext.dropdownMenuColumnStyle;
var hoverOpen = expandTrigger === 'hover';
// 将drop展示赋值给ref
React.useEffect(function () {
initDropRenderRef.current = dropdownVisible;
}, [dropdownVisible]);
/** 单选情况下滚动到相应的位置 */
React.useEffect(function () {
var timer = null;
if (ref.current && ref.current.scrollTo && !multiple && dropdownVisible && initDropRenderRef.current) {
var index = options.findIndex(function (it) {
return it[fieldNames.value] === activeValue;
});
if (index > 0 && !isNaN(index)) {
timer = window.setTimeout(function () {
ref.current.scrollTo((optionHeight || 36) * index);
}, 5);
}
}
return function () {
if (timer) {
window.clearTimeout(timer);
}
timer = null;
};
}, [multiple, activeValue, options, fieldNames, dropdownVisible, optionHeight]);
// ============================ Option ============================
var optionInfoList = React.useMemo(function () {
return options.map(function (option) {
var _a;
var disabled = option.disabled;
var searchOptions = option[_useSearchOptions.SEARCH_MARK];
var label = (_a = option[FIX_LABEL]) !== null && _a !== void 0 ? _a : option[fieldNames.label];
var value = option[fieldNames.value];
var isMergedLeaf = (0, _commonUtil.isLeaf)(option, fieldNames);
// Get real value of option. Search option is different way.
var fullPath = searchOptions ?
// @ts-ignore
searchOptions.map(function (opt) {
return opt[fieldNames.value];
}) : [].concat(_toConsumableArray(prevValuePath), [value]);
var fullPathKey = (0, _commonUtil.toPathKey)(fullPath);
var isLoading = loadingKeys.includes(fullPathKey);
// >>>>> checked
var checked = checkedSet.has(fullPathKey);
// >>>>> halfChecked
var halfChecked = halfCheckedSet.has(fullPathKey);
return {
disabled: disabled,
label: label,
value: value,
isLeaf: isMergedLeaf,
isLoading: isLoading,
checked: checked,
halfChecked: halfChecked,
option: option,
fullPath: fullPath,
fullPathKey: fullPathKey
};
});
}, [options, checkedSet, fieldNames, halfCheckedSet, loadingKeys, prevValuePath]);
// ============================ Render ============================
return React.createElement("ul", {
className: menuPrefixCls,
role: "menu",
style: !isEmpty ? {
height: listHeight + 'px'
} : {}
}, React.createElement(_rcVirtualList["default"], {
className: optionInfoList[0].fullPathKey === '__EMPTY__' || !!searchValue ? 'rc-virtual-list-full' : '',
data: optionInfoList,
height: isEmpty ? 'auto' : listHeight,
itemHeight: optionHeight || 36,
itemKey: "fullPathKey",
ref: ref
}, function (_ref2) {
var disabled = _ref2.disabled,
label = _ref2.label,
value = _ref2.value,
isMergedLeaf = _ref2.isLeaf,
isLoading = _ref2.isLoading,
checked = _ref2.checked,
halfChecked = _ref2.halfChecked,
option = _ref2.option,
fullPath = _ref2.fullPath,
fullPathKey = _ref2.fullPathKey;
// >>>>> Open
var triggerOpenPath = function triggerOpenPath() {
if (!disabled && (!hoverOpen || !isMergedLeaf)) {
onActive(fullPath);
}
};
// >>>>> Selection
var triggerSelect = function triggerSelect() {
initDropRenderRef.current = false;
if (isSelectable(option)) {
onSelect(fullPath, isMergedLeaf);
}
};
// >>>>> Title
var title;
if (typeof option.title === 'string') {
title = option.title;
} else if (typeof label === 'string') {
title = label;
}
return React.createElement("li", {
key: fullPathKey,
className: (0, _classnames["default"])(menuItemPrefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(menuItemPrefixCls, "-expand"), !isMergedLeaf), "".concat(menuItemPrefixCls, "-active"), activeValue === value), "".concat(menuItemPrefixCls, "-disabled"), disabled), "".concat(menuItemPrefixCls, "-loading"), isLoading)),
style: dropdownMenuColumnStyle,
role: "menuitemcheckbox",
// @ts-ignore
title: title,
"aria-checked": checked,
"data-path-key": fullPathKey,
onClick: function onClick() {
triggerOpenPath();
if (!multiple || isMergedLeaf) {
triggerSelect();
}
},
onDoubleClick: function onDoubleClick() {
if (changeOnSelect) {
onToggleOpen(false);
}
},
onMouseEnter: function onMouseEnter() {
if (hoverOpen) {
triggerOpenPath();
}
},
onMouseDown: function onMouseDown(e) {
// Prevent selector from blurring
e.preventDefault();
}
}, multiple && React.createElement(_Checkbox["default"], {
prefixCls: "".concat(prefixCls, "-checkbox"),
checked: checked,
halfChecked: halfChecked,
disabled: disabled,
onClick: function onClick(e) {
e.stopPropagation();
triggerSelect();
}
}), React.createElement("div", {
className: "".concat(menuItemPrefixCls, "-content")
}, optionInfoList[0].fullPathKey !== '__EMPTY__' && renderItem ? renderItem(option, level) : label), !isLoading && expandIcon && !isMergedLeaf && React.createElement("div", {
className: "".concat(menuItemPrefixCls, "-expand-icon")
}, expandIcon), isLoading && loadingIcon && React.createElement("div", {
className: "".concat(menuItemPrefixCls, "-loading-icon")
}, loadingIcon));
}));
}