index.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. "use client";
  2. var __rest = this && this.__rest || function (s, e) {
  3. var t = {};
  4. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  6. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  7. }
  8. return t;
  9. };
  10. import * as React from 'react';
  11. import classNames from 'classnames';
  12. import { devUseWarning } from '../_util/warning';
  13. import { useComponentConfig } from '../config-provider/context';
  14. import useSize from '../config-provider/hooks/useSize';
  15. import useStyle from './style';
  16. const sizeClassNameMap = {
  17. small: 'sm',
  18. middle: 'md'
  19. };
  20. const Divider = props => {
  21. const {
  22. getPrefixCls,
  23. direction,
  24. className: dividerClassName,
  25. style: dividerStyle
  26. } = useComponentConfig('divider');
  27. const {
  28. prefixCls: customizePrefixCls,
  29. type = 'horizontal',
  30. orientation = 'center',
  31. orientationMargin,
  32. className,
  33. rootClassName,
  34. children,
  35. dashed,
  36. variant = 'solid',
  37. plain,
  38. style,
  39. size: customSize
  40. } = props,
  41. restProps = __rest(props, ["prefixCls", "type", "orientation", "orientationMargin", "className", "rootClassName", "children", "dashed", "variant", "plain", "style", "size"]);
  42. const prefixCls = getPrefixCls('divider', customizePrefixCls);
  43. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
  44. const sizeFullName = useSize(customSize);
  45. const sizeCls = sizeClassNameMap[sizeFullName];
  46. const hasChildren = !!children;
  47. const mergedOrientation = React.useMemo(() => {
  48. if (orientation === 'left') {
  49. return direction === 'rtl' ? 'end' : 'start';
  50. }
  51. if (orientation === 'right') {
  52. return direction === 'rtl' ? 'start' : 'end';
  53. }
  54. return orientation;
  55. }, [direction, orientation]);
  56. const hasMarginStart = mergedOrientation === 'start' && orientationMargin != null;
  57. const hasMarginEnd = mergedOrientation === 'end' && orientationMargin != null;
  58. const classString = classNames(prefixCls, dividerClassName, hashId, cssVarCls, `${prefixCls}-${type}`, {
  59. [`${prefixCls}-with-text`]: hasChildren,
  60. [`${prefixCls}-with-text-${mergedOrientation}`]: hasChildren,
  61. [`${prefixCls}-dashed`]: !!dashed,
  62. [`${prefixCls}-${variant}`]: variant !== 'solid',
  63. [`${prefixCls}-plain`]: !!plain,
  64. [`${prefixCls}-rtl`]: direction === 'rtl',
  65. [`${prefixCls}-no-default-orientation-margin-start`]: hasMarginStart,
  66. [`${prefixCls}-no-default-orientation-margin-end`]: hasMarginEnd,
  67. [`${prefixCls}-${sizeCls}`]: !!sizeCls
  68. }, className, rootClassName);
  69. const memoizedOrientationMargin = React.useMemo(() => {
  70. if (typeof orientationMargin === 'number') {
  71. return orientationMargin;
  72. }
  73. if (/^\d+$/.test(orientationMargin)) {
  74. return Number(orientationMargin);
  75. }
  76. return orientationMargin;
  77. }, [orientationMargin]);
  78. const innerStyle = {
  79. marginInlineStart: hasMarginStart ? memoizedOrientationMargin : undefined,
  80. marginInlineEnd: hasMarginEnd ? memoizedOrientationMargin : undefined
  81. };
  82. // Warning children not work in vertical mode
  83. if (process.env.NODE_ENV !== 'production') {
  84. const warning = devUseWarning('Divider');
  85. process.env.NODE_ENV !== "production" ? warning(!children || type !== 'vertical', 'usage', '`children` not working in `vertical` mode.') : void 0;
  86. }
  87. return wrapCSSVar(/*#__PURE__*/React.createElement("div", Object.assign({
  88. className: classString,
  89. style: Object.assign(Object.assign({}, dividerStyle), style)
  90. }, restProps, {
  91. role: "separator"
  92. }), children && type !== 'vertical' && (/*#__PURE__*/React.createElement("span", {
  93. className: `${prefixCls}-inner-text`,
  94. style: innerStyle
  95. }, children))));
  96. };
  97. if (process.env.NODE_ENV !== 'production') {
  98. Divider.displayName = 'Divider';
  99. }
  100. export default Divider;