useClosable.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = useClosable;
  8. exports.pickClosable = pickClosable;
  9. var _react = _interopRequireDefault(require("react"));
  10. var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
  11. var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
  12. var _locale = require("../../locale");
  13. var _en_US = _interopRequireDefault(require("../../locale/en_US"));
  14. var _extendsObject = _interopRequireDefault(require("../extendsObject"));
  15. function pickClosable(context) {
  16. if (!context) {
  17. return undefined;
  18. }
  19. const {
  20. closable,
  21. closeIcon
  22. } = context;
  23. return {
  24. closable,
  25. closeIcon
  26. };
  27. }
  28. /** Convert `closable` and `closeIcon` to config object */
  29. function useClosableConfig(closableCollection) {
  30. const {
  31. closable,
  32. closeIcon
  33. } = closableCollection || {};
  34. return _react.default.useMemo(() => {
  35. if (
  36. // If `closable`, whatever rest be should be true
  37. !closable && (closable === false || closeIcon === false || closeIcon === null)) {
  38. return false;
  39. }
  40. if (closable === undefined && closeIcon === undefined) {
  41. return null;
  42. }
  43. let closableConfig = {
  44. closeIcon: typeof closeIcon !== 'boolean' && closeIcon !== null ? closeIcon : undefined
  45. };
  46. if (closable && typeof closable === 'object') {
  47. closableConfig = Object.assign(Object.assign({}, closableConfig), closable);
  48. }
  49. return closableConfig;
  50. }, [closable, closeIcon]);
  51. }
  52. /** Use same object to support `useMemo` optimization */
  53. const EmptyFallbackCloseCollection = {};
  54. function useClosable(propCloseCollection, contextCloseCollection, fallbackCloseCollection = EmptyFallbackCloseCollection) {
  55. // Align the `props`, `context` `fallback` to config object first
  56. const propCloseConfig = useClosableConfig(propCloseCollection);
  57. const contextCloseConfig = useClosableConfig(contextCloseCollection);
  58. const [contextLocale] = (0, _locale.useLocale)('global', _en_US.default.global);
  59. const closeBtnIsDisabled = typeof propCloseConfig !== 'boolean' ? !!(propCloseConfig === null || propCloseConfig === void 0 ? void 0 : propCloseConfig.disabled) : false;
  60. const mergedFallbackCloseCollection = _react.default.useMemo(() => Object.assign({
  61. closeIcon: /*#__PURE__*/_react.default.createElement(_CloseOutlined.default, null)
  62. }, fallbackCloseCollection), [fallbackCloseCollection]);
  63. // Use fallback logic to fill the config
  64. const mergedClosableConfig = _react.default.useMemo(() => {
  65. // ================ Props First ================
  66. // Skip if prop is disabled
  67. if (propCloseConfig === false) {
  68. return false;
  69. }
  70. if (propCloseConfig) {
  71. return (0, _extendsObject.default)(mergedFallbackCloseCollection, contextCloseConfig, propCloseConfig);
  72. }
  73. // =============== Context Second ==============
  74. // Skip if context is disabled
  75. if (contextCloseConfig === false) {
  76. return false;
  77. }
  78. if (contextCloseConfig) {
  79. return (0, _extendsObject.default)(mergedFallbackCloseCollection, contextCloseConfig);
  80. }
  81. // ============= Fallback Default ==============
  82. return !mergedFallbackCloseCollection.closable ? false : mergedFallbackCloseCollection;
  83. }, [propCloseConfig, contextCloseConfig, mergedFallbackCloseCollection]);
  84. // Calculate the final closeIcon
  85. return _react.default.useMemo(() => {
  86. var _a, _b;
  87. if (mergedClosableConfig === false) {
  88. return [false, null, closeBtnIsDisabled, {}];
  89. }
  90. const {
  91. closeIconRender
  92. } = mergedFallbackCloseCollection;
  93. const {
  94. closeIcon
  95. } = mergedClosableConfig;
  96. let mergedCloseIcon = closeIcon;
  97. // Wrap the closeIcon with aria props
  98. const ariaOrDataProps = (0, _pickAttrs.default)(mergedClosableConfig, true);
  99. if (mergedCloseIcon !== null && mergedCloseIcon !== undefined) {
  100. // Wrap the closeIcon if needed
  101. if (closeIconRender) {
  102. mergedCloseIcon = closeIconRender(closeIcon);
  103. }
  104. mergedCloseIcon = /*#__PURE__*/_react.default.isValidElement(mergedCloseIcon) ? (/*#__PURE__*/_react.default.cloneElement(mergedCloseIcon, Object.assign(Object.assign(Object.assign({}, mergedCloseIcon.props), {
  105. 'aria-label': (_b = (_a = mergedCloseIcon.props) === null || _a === void 0 ? void 0 : _a['aria-label']) !== null && _b !== void 0 ? _b : contextLocale.close
  106. }), ariaOrDataProps))) : (/*#__PURE__*/_react.default.createElement("span", Object.assign({
  107. "aria-label": contextLocale.close
  108. }, ariaOrDataProps), mergedCloseIcon));
  109. }
  110. return [true, mergedCloseIcon, closeBtnIsDisabled, ariaOrDataProps];
  111. }, [mergedClosableConfig, mergedFallbackCloseCollection]);
  112. }