122 lines
4.5 KiB
JavaScript
122 lines
4.5 KiB
JavaScript
"use strict";
|
|
"use client";
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = useClosable;
|
|
exports.pickClosable = pickClosable;
|
|
var _react = _interopRequireDefault(require("react"));
|
|
var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
|
|
var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
|
|
function pickClosable(context) {
|
|
if (!context) {
|
|
return undefined;
|
|
}
|
|
return {
|
|
closable: context.closable,
|
|
closeIcon: context.closeIcon
|
|
};
|
|
}
|
|
/** Convert `closable` and `closeIcon` to config object */
|
|
function useClosableConfig(closableCollection) {
|
|
const {
|
|
closable,
|
|
closeIcon
|
|
} = closableCollection || {};
|
|
return _react.default.useMemo(() => {
|
|
if (
|
|
// If `closable`, whatever rest be should be true
|
|
!closable && (closable === false || closeIcon === false || closeIcon === null)) {
|
|
return false;
|
|
}
|
|
if (closable === undefined && closeIcon === undefined) {
|
|
return null;
|
|
}
|
|
let closableConfig = {
|
|
closeIcon: typeof closeIcon !== 'boolean' && closeIcon !== null ? closeIcon : undefined
|
|
};
|
|
if (closable && typeof closable === 'object') {
|
|
closableConfig = Object.assign(Object.assign({}, closableConfig), closable);
|
|
}
|
|
return closableConfig;
|
|
}, [closable, closeIcon]);
|
|
}
|
|
/**
|
|
* Assign object without `undefined` field. Will skip if is `false`.
|
|
* This helps to handle both closableConfig or false
|
|
*/
|
|
function assignWithoutUndefined() {
|
|
const target = {};
|
|
for (var _len = arguments.length, objList = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
objList[_key] = arguments[_key];
|
|
}
|
|
objList.forEach(obj => {
|
|
if (obj) {
|
|
Object.keys(obj).forEach(key => {
|
|
if (obj[key] !== undefined) {
|
|
target[key] = obj[key];
|
|
}
|
|
});
|
|
}
|
|
});
|
|
return target;
|
|
}
|
|
/** Use same object to support `useMemo` optimization */
|
|
const EmptyFallbackCloseCollection = {};
|
|
function useClosable(propCloseCollection, contextCloseCollection) {
|
|
let fallbackCloseCollection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EmptyFallbackCloseCollection;
|
|
// Align the `props`, `context` `fallback` to config object first
|
|
const propCloseConfig = useClosableConfig(propCloseCollection);
|
|
const contextCloseConfig = useClosableConfig(contextCloseCollection);
|
|
const mergedFallbackCloseCollection = _react.default.useMemo(() => Object.assign({
|
|
closeIcon: /*#__PURE__*/_react.default.createElement(_CloseOutlined.default, null)
|
|
}, fallbackCloseCollection), [fallbackCloseCollection]);
|
|
// Use fallback logic to fill the config
|
|
const mergedClosableConfig = _react.default.useMemo(() => {
|
|
// ================ Props First ================
|
|
// Skip if prop is disabled
|
|
if (propCloseConfig === false) {
|
|
return false;
|
|
}
|
|
if (propCloseConfig) {
|
|
return assignWithoutUndefined(mergedFallbackCloseCollection, contextCloseConfig, propCloseConfig);
|
|
}
|
|
// =============== Context Second ==============
|
|
// Skip if context is disabled
|
|
if (contextCloseConfig === false) {
|
|
return false;
|
|
}
|
|
if (contextCloseConfig) {
|
|
return assignWithoutUndefined(mergedFallbackCloseCollection, contextCloseConfig);
|
|
}
|
|
// ============= Fallback Default ==============
|
|
return !mergedFallbackCloseCollection.closable ? false : mergedFallbackCloseCollection;
|
|
}, [propCloseConfig, contextCloseConfig, mergedFallbackCloseCollection]);
|
|
// Calculate the final closeIcon
|
|
return _react.default.useMemo(() => {
|
|
if (mergedClosableConfig === false) {
|
|
return [false, null];
|
|
}
|
|
const {
|
|
closeIconRender
|
|
} = mergedFallbackCloseCollection;
|
|
const {
|
|
closeIcon
|
|
} = mergedClosableConfig;
|
|
let mergedCloseIcon = closeIcon;
|
|
if (mergedCloseIcon !== null && mergedCloseIcon !== undefined) {
|
|
// Wrap the closeIcon if needed
|
|
if (closeIconRender) {
|
|
mergedCloseIcon = closeIconRender(closeIcon);
|
|
}
|
|
// Wrap the closeIcon with aria props
|
|
const ariaProps = (0, _pickAttrs.default)(mergedClosableConfig, true);
|
|
if (Object.keys(ariaProps).length) {
|
|
mergedCloseIcon = /*#__PURE__*/_react.default.isValidElement(mergedCloseIcon) ? ( /*#__PURE__*/_react.default.cloneElement(mergedCloseIcon, ariaProps)) : ( /*#__PURE__*/_react.default.createElement("span", Object.assign({}, ariaProps), mergedCloseIcon));
|
|
}
|
|
}
|
|
return [true, mergedCloseIcon];
|
|
}, [mergedClosableConfig, mergedFallbackCloseCollection]);
|
|
} |