@zohodesk/dot/es/Separator/Separator.js

In this Library, we Provide Some Basic Components to Build Your Application

import React from 'react';
import { Container, Box } from '@zohodesk/components/lib/Layout';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import style from "./Separator.module.css";
export default class Separator extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      children,
      type,
      customSeparatorType,
      palette,
      wrap,
      shrink,
      aligndirection,
      customClass
    } = this.props;
    const {
      customWrapper,
      customSeparator,
      customChildren
    } = customClass;
    const data = children.filter(el => el !== null && el !== undefined && el !== false);
    return /*#__PURE__*/React.createElement(Container, {
      alignBox: aligndirection,
      align: aligndirection === 'row' ? 'vertical' : '',
      wrap: wrap,
      isCover: false,
      className: `${style.varClass} ${customWrapper}`
    }, data.map((child, i) => {
      if (child) {
        if (data.length - 1 == i || aligndirection == 'column') {
          return child && /*#__PURE__*/React.createElement(Box, {
            shrink: shrink,
            key: i,
            className: customChildren
          }, child);
        }

        return child && /*#__PURE__*/React.createElement(React.Fragment, {
          key: i
        }, /*#__PURE__*/React.createElement(Box, {
          shrink: shrink,
          key: i,
          className: customChildren
        }, child), /*#__PURE__*/React.createElement(Box, {
          className: `${style.separator} ${style[palette]} ${customSeparatorType ? '' : style[type]} ${customSeparator} `,
          key: i
        }, customSeparatorType ? customSeparatorType : type == 'slash' ? '/' : type == 'arrow' ? '>' : type == 'comma' ? ',' : '\u2022'));
      }
    }));
  }

}
Separator.defaultProps = defaultProps;
Separator.propTypes = propTypes;