@zohodesk/layout/es/Flex/Flex.js

Unified Component Library - Layout

import React from 'react';
import { mergeStyle } from '@zohodesk/utils';
import defaultProps from './props/defaultProps';
import propTypes from './props/propTypes';
import cssJSLogic from './css/cssJSLogic';
import defaultStyle from './css/Flex.module.css';
const Flex = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    $ui_tagName,
    customStyle,
    testId,
    customId,
    children,
    $event_onClick,
    $tagAttributes_container,
    $a11yAttributes_container
  } = props;
  /* external customization - need memorize?*/

  const style = mergeStyle(defaultStyle, customStyle);
  /* css classname added based on logic */

  const {
    flexClass
  } = cssJSLogic({
    props,
    style
  });
  return /*#__PURE__*/React.createElement($ui_tagName, {
    'data-test-id': testId,
    'data-id': customId,
    className: flexClass,
    ref,
    onClick: $event_onClick,
    ...$tagAttributes_container,
    ...$a11yAttributes_container
  }, children);
});
Flex.displayName = 'Flex';
Flex.defaultProps = defaultProps;
Flex.propTypes = propTypes;
export default Flex;