layout.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. "use strict";
  2. "use client";
  3. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  4. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = exports.Header = exports.Footer = exports.Content = void 0;
  9. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  10. var React = _interopRequireWildcard(require("react"));
  11. var _classnames = _interopRequireDefault(require("classnames"));
  12. var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
  13. var _configProvider = require("../config-provider");
  14. var _context = require("../config-provider/context");
  15. var _context2 = require("./context");
  16. var _useHasSider = _interopRequireDefault(require("./hooks/useHasSider"));
  17. var _style = _interopRequireDefault(require("./style"));
  18. var __rest = void 0 && (void 0).__rest || function (s, e) {
  19. var t = {};
  20. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  21. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  22. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  23. }
  24. return t;
  25. };
  26. function generator({
  27. suffixCls,
  28. tagName,
  29. displayName
  30. }) {
  31. return BasicComponent => {
  32. const Adapter = /*#__PURE__*/React.forwardRef((props, ref) => (/*#__PURE__*/React.createElement(BasicComponent, Object.assign({
  33. ref: ref,
  34. suffixCls: suffixCls,
  35. tagName: tagName
  36. }, props))));
  37. if (process.env.NODE_ENV !== 'production') {
  38. Adapter.displayName = displayName;
  39. }
  40. return Adapter;
  41. };
  42. }
  43. const Basic = /*#__PURE__*/React.forwardRef((props, ref) => {
  44. const {
  45. prefixCls: customizePrefixCls,
  46. suffixCls,
  47. className,
  48. tagName: TagName
  49. } = props,
  50. others = __rest(props, ["prefixCls", "suffixCls", "className", "tagName"]);
  51. const {
  52. getPrefixCls
  53. } = React.useContext(_configProvider.ConfigContext);
  54. const prefixCls = getPrefixCls('layout', customizePrefixCls);
  55. const [wrapSSR, hashId, cssVarCls] = (0, _style.default)(prefixCls);
  56. const prefixWithSuffixCls = suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls;
  57. return wrapSSR(/*#__PURE__*/React.createElement(TagName, Object.assign({
  58. className: (0, _classnames.default)(customizePrefixCls || prefixWithSuffixCls, className, hashId, cssVarCls),
  59. ref: ref
  60. }, others)));
  61. });
  62. const BasicLayout = /*#__PURE__*/React.forwardRef((props, ref) => {
  63. const {
  64. direction
  65. } = React.useContext(_configProvider.ConfigContext);
  66. const [siders, setSiders] = React.useState([]);
  67. const {
  68. prefixCls: customizePrefixCls,
  69. className,
  70. rootClassName,
  71. children,
  72. hasSider,
  73. tagName: Tag,
  74. style
  75. } = props,
  76. others = __rest(props, ["prefixCls", "className", "rootClassName", "children", "hasSider", "tagName", "style"]);
  77. const passedProps = (0, _omit.default)(others, ['suffixCls']);
  78. const {
  79. getPrefixCls,
  80. className: contextClassName,
  81. style: contextStyle
  82. } = (0, _context.useComponentConfig)('layout');
  83. const prefixCls = getPrefixCls('layout', customizePrefixCls);
  84. const mergedHasSider = (0, _useHasSider.default)(siders, children, hasSider);
  85. const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls);
  86. const classString = (0, _classnames.default)(prefixCls, {
  87. [`${prefixCls}-has-sider`]: mergedHasSider,
  88. [`${prefixCls}-rtl`]: direction === 'rtl'
  89. }, contextClassName, className, rootClassName, hashId, cssVarCls);
  90. const contextValue = React.useMemo(() => ({
  91. siderHook: {
  92. addSider: id => {
  93. setSiders(prev => [].concat((0, _toConsumableArray2.default)(prev), [id]));
  94. },
  95. removeSider: id => {
  96. setSiders(prev => prev.filter(currentId => currentId !== id));
  97. }
  98. }
  99. }), []);
  100. return wrapCSSVar(/*#__PURE__*/React.createElement(_context2.LayoutContext.Provider, {
  101. value: contextValue
  102. }, /*#__PURE__*/React.createElement(Tag, Object.assign({
  103. ref: ref,
  104. className: classString,
  105. style: Object.assign(Object.assign({}, contextStyle), style)
  106. }, passedProps), children)));
  107. });
  108. const Layout = generator({
  109. tagName: 'div',
  110. displayName: 'Layout'
  111. })(BasicLayout);
  112. const Header = exports.Header = generator({
  113. suffixCls: 'header',
  114. tagName: 'header',
  115. displayName: 'Header'
  116. })(Basic);
  117. const Footer = exports.Footer = generator({
  118. suffixCls: 'footer',
  119. tagName: 'footer',
  120. displayName: 'Footer'
  121. })(Basic);
  122. const Content = exports.Content = generator({
  123. suffixCls: 'content',
  124. tagName: 'main',
  125. displayName: 'Content'
  126. })(Basic);
  127. var _default = exports.default = Layout;