tntd
Version:
tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
279 lines (277 loc) • 11.6 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["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _LocaleReceiver = _interopRequireDefault(require("antd/lib/locale-provider/LocaleReceiver"));
var _toArray = _interopRequireDefault(require("rc-util/es/Children/toArray"));
var _icon = _interopRequireDefault(require("../icon"));
var _popconfirm = _interopRequireDefault(require("../popconfirm"));
var _divider = _interopRequireDefault(require("../divider"));
var _dropdown = _interopRequireDefault(require("../dropdown"));
var _tooltip = _interopRequireDefault(require("../tooltip"));
var _ellipsis = _interopRequireDefault(require("../ellipsis"));
var _menu = _interopRequireDefault(require("../menu"));
var _utils = require("../utils");
require("./index.less");
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;
}
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
// 数组拍平
var _flattenChildren = function flattenChildren(children) {
if (!children) {
return [];
}
return (0, _toArray["default"])(children).reduce(function (flatChildren, child) {
if (child && child.type === _react["default"].Fragment) {
return flatChildren.concat(_flattenChildren(child.props.children));
}
flatChildren.push(child);
return flatChildren;
}, []);
};
var HandleIcon = function HandleIcon(props) {
var _a = props || {},
_a$children = _a.children,
children = _a$children === void 0 ? [] : _a$children,
_a$num = _a.num,
num = _a$num === void 0 ? 5 : _a$num,
_a$divider = _a.divider,
divider = _a$divider === void 0 ? false : _a$divider,
_a$stopPropagation = _a.stopPropagation,
stopPropagation = _a$stopPropagation === void 0 ? true : _a$stopPropagation,
_a$size = _a.size,
size = _a$size === void 0 ? 'large' : _a$size,
rest = __rest(_a, ["children", "num", "divider", "stopPropagation", "size"]);
var decoratePopconfirm = (0, _react.useCallback)(function (element, parentElement) {
if (_react["default"].isValidElement(element)) {
var type = element.type,
_props = element.props;
if (type === _popconfirm["default"]) {
var placement = {
placement: 'left'
};
var _ref = (parentElement === null || parentElement === void 0 ? void 0 : parentElement.props) || {},
disabled = _ref.disabled;
var disableProps = {};
if (disabled) {
disableProps = {
disabled: disabled,
onConfirm: function onConfirm() {}
};
}
return _react["default"].cloneElement(element, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _props || {}), {
overlayStyle: Object.assign({
minWidth: "200px",
maxWidth: "600px",
zIndex: 1055
}, _props.overlayStyle || {}),
onClick: function onClick(e) {
return e.stopPropagation();
}
}), placement), {
trigger: 'hover'
}), disableProps || {}));
}
if (_props && _props.children) {
var modifiedChildren = _react["default"].Children.map(_props.children, function (child) {
return decoratePopconfirm(child, element);
});
return _react["default"].cloneElement(element, _props, modifiedChildren);
}
}
return element;
}, []);
var _useMemo = (0, _react.useMemo)(function () {
var newChildren = [];
if (Array.isArray(children)) {
newChildren = (children === null || children === void 0 ? void 0 : children.filter(function (item) {
return !!item;
})) || [];
} else if (children) {
newChildren.push(children);
}
if (Array.isArray(newChildren)) {
newChildren = _flattenChildren(newChildren);
}
var preChildPart = newChildren,
lastChildPart = null;
// 只有1个时不适配
if (newChildren.length - num === 1) {
preChildPart = newChildren;
} else if (newChildren && num && !isNaN(num) && newChildren.length > num) {
preChildPart = newChildren.slice(0, num);
lastChildPart = newChildren.slice(num);
}
if (divider && preChildPart) {
preChildPart = preChildPart === null || preChildPart === void 0 ? void 0 : preChildPart.map(function (dom, i) {
return _react["default"].createElement(_react["default"].Fragment, null, dom, !(i === (preChildPart === null || preChildPart === void 0 ? void 0 : preChildPart.length) - 1 && !(lastChildPart === null || lastChildPart === void 0 ? void 0 : lastChildPart.length) // 没有更多 且 是最后一个时 不显示 Divider
) && _react["default"].createElement(_divider["default"], {
type: "vertical"
}));
});
}
// 对更多的popConfirm
if (lastChildPart === null || lastChildPart === void 0 ? void 0 : lastChildPart.length) {
lastChildPart === null || lastChildPart === void 0 ? void 0 : lastChildPart.forEach(function (v, i) {
v = decoratePopconfirm(v);
lastChildPart[i] = _react["default"].cloneElement(v, Object.assign(Object.assign({}, (v === null || v === void 0 ? void 0 : v.props) || {}), {
inMore: true
}));
});
}
return {
preChildPart: preChildPart,
lastChildPart: lastChildPart
};
}, [children, num, divider, decoratePopconfirm]),
preChildPart = _useMemo.preChildPart,
lastChildPart = _useMemo.lastChildPart;
var menu = (0, _react.useMemo)(function () {
return _react["default"].createElement(_menu["default"], {
className: "menu-handle-icon-more tnt-handle-icon-".concat(size)
}, lastChildPart === null || lastChildPart === void 0 ? void 0 : lastChildPart.map(function (child, i) {
return _react["default"].createElement(_menu["default"].Item, {
key: i
}, child);
}));
}, [lastChildPart, size]);
return _react["default"].createElement(_LocaleReceiver["default"], {
componentName: "HandleIcon"
}, function () {
return _react["default"].createElement("div", Object.assign({
onClick: function onClick(e) {
if (stopPropagation) {
e.stopPropagation();
}
}
}, rest, {
className: "tnt-handle-icon-wrap tnt-handle-icon-".concat(size, " ").concat((rest === null || rest === void 0 ? void 0 : rest.className) || '')
}), preChildPart, !!(lastChildPart === null || lastChildPart === void 0 ? void 0 : lastChildPart.length) && _react["default"].createElement(_dropdown["default"], {
overlay: menu,
arrow: true,
onClick: function onClick(e) {
stopPropagation && e.stopPropagation();
}
}, _react["default"].createElement(_icon["default"], {
type: "more",
className: 'tnt-handle-icon-more'
})));
});
};
var HandleItem = function HandleItem(props) {
var children = props.children,
title = props.title,
desc = props.desc,
_props$tooltip = props.tooltip,
tooltip = _props$tooltip === void 0 ? true : _props$tooltip,
inMore = props.inMore,
disabled = props.disabled,
_props$upperCaseIgnor = props.upperCaseIgnore,
upperCaseIgnore = _props$upperCaseIgnor === void 0 ? [] : _props$upperCaseIgnor,
localeCode = props.localeCode,
rest = __rest(props, ["children", "title", "desc", "tooltip", "inMore", "disabled", "upperCaseIgnore", "localeCode"]);
var upTitle = (0, _utils.doUpperTitle)(title, upperCaseIgnore, localeCode);
var _replaceIconWithText = function replaceIconWithText(element) {
if (_react["default"].isValidElement(element)) {
var type = element.type,
eleProps = element.props;
var disabledProps = {};
if (disabled) {
disabledProps = {
disabled: disabled,
onClick: function onClick(e) {
e.stopPropagation();
},
className: ((eleProps === null || eleProps === void 0 ? void 0 : eleProps.className) || "") + (disabled ? ' disabled' : "")
};
}
// 如果是更多需要替换文字
if (type === _icon["default"] || type === 'img') {
if (inMore) {
return _react["default"].createElement("a", Object.assign({}, eleProps, disabledProps), _react["default"].createElement(_ellipsis["default"], {
title: upTitle
}));
}
}
if (disabled && (type === _icon["default"] || ['img', 'a'].includes(type))) {
return _react["default"].cloneElement(element, Object.assign(Object.assign({}, (element === null || element === void 0 ? void 0 : element.props) || {}), disabledProps || {}));
}
if (eleProps && eleProps.children) {
var modifiedChildren = _react["default"].Children.map(eleProps.children, function (child) {
return _replaceIconWithText(child);
});
return _react["default"].cloneElement(element, eleProps, modifiedChildren);
}
}
return element;
};
var newChildren = children;
if (Array.isArray(newChildren)) {
newChildren = children === null || children === void 0 ? void 0 : children.map(function (child) {
return _replaceIconWithText(child);
});
} else {
newChildren = _replaceIconWithText(children);
}
if ((inMore && desc && disabled || !inMore) && tooltip) {
return _react["default"].createElement(_tooltip["default"], Object.assign({
title: disabled ? desc || upTitle : upTitle
}, rest || {}), newChildren);
}
return newChildren;
};
HandleIcon.Item = function (props) {
return _react["default"].createElement(_LocaleReceiver["default"], {
componentName: "HandleIcon"
}, function (locale, localeCode) {
return _react["default"].createElement(HandleItem, Object.assign({}, props, {
localeCode: localeCode
}));
});
};
var _default = exports["default"] = HandleIcon;