index.tsx 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import React, { CSSProperties, ReactNode } from 'react';
  2. import cls from 'classnames';
  3. import { cssClasses } from '@douyinfe/semi-foundation/divider/constants';
  4. import '@douyinfe/semi-foundation/divider/divider.scss';
  5. const prefixCls = cssClasses.PREFIX;
  6. export interface DividerProps {
  7. /** The position of title inside divider */
  8. align?: 'left' | 'right' | 'center';
  9. /** space between divider and surroundings **/
  10. margin?: number | string
  11. /** The wrapped title */
  12. children?: ReactNode;
  13. /** Style class name */
  14. className?: string;
  15. /** Whether line is dashed */
  16. dashed?: boolean;
  17. /** The direction type of divider */
  18. layout?: 'horizontal' | 'vertical';
  19. /** Divider inline style */
  20. style?: CSSProperties;
  21. }
  22. const Divider: React.FC<DividerProps> = props => {
  23. const {
  24. layout = 'horizontal',
  25. dashed,
  26. align = 'center',
  27. className,
  28. margin,
  29. style,
  30. children,
  31. ...rest
  32. } = props;
  33. const dividerClassNames = cls(`${prefixCls}-divider`, className, {
  34. [`${prefixCls}-divider-horizontal`]: layout === 'horizontal',
  35. [`${prefixCls}-divider-vertical`]: layout === 'vertical',
  36. [`${prefixCls}-divider-dashed`]: !!dashed,
  37. [`${prefixCls}-divider-with-text`]: children && layout === 'horizontal',
  38. [`${prefixCls}-divider-with-text-${align}`]: children && layout === 'horizontal',
  39. });
  40. let overrideDefaultStyle: CSSProperties = {};
  41. if (margin !== undefined) {
  42. if (layout === 'vertical') {
  43. overrideDefaultStyle = {
  44. 'marginLeft': margin,
  45. 'marginRight': margin
  46. };
  47. } else if (layout === 'horizontal') {
  48. overrideDefaultStyle = {
  49. 'marginTop': margin,
  50. 'marginBottom': margin,
  51. };
  52. }
  53. }
  54. return (
  55. <div {...rest} className={dividerClassNames} style={{ ...overrideDefaultStyle, ...style }}>
  56. {children && layout === 'horizontal' ? (
  57. typeof children === 'string' ? (
  58. <span className={`${prefixCls}-divider_inner-text`} x-semi-prop="children">
  59. {children}
  60. </span>
  61. ) : (
  62. children
  63. )
  64. ) : null}
  65. </div>
  66. );
  67. };
  68. export default Divider;