saagie-ui/src/react/core/organisms/datalist/DatalistRow.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { getModifierClasses } from '../../../helpers';

const propTypes = {
  /**
   * You can use simple value like 'middle' or 'bottom'.
   * You can also use responsive values like 'middle top@md middle@lg'.
   */
  align: PropTypes.oneOfType([
    PropTypes.oneOf(['top', 'middle', 'bottom']),
    PropTypes.string,
  ]),
  children: PropTypes.oneOfType([
    PropTypes.element,
    PropTypes.arrayOf(PropTypes.element),
  ]).isRequired,
  className: PropTypes.string,
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  isActive: PropTypes.bool,
  isDisabled: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.node,
  ]),
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
};

const defaultProps = {
  align: '',
  className: '',
  defaultClassName: 'sui-o-datalist__row',
  isActive: false,
  isDisabled: false,
  tag: 'div',
};

export const DatalistRow = (props) => {
  const {
    align,
    children,
    className,
    defaultClassName,
    isActive,
    isDisabled,
    tag: Tag,
    ...attributes
  } = props;

  const classes = classnames(
    defaultClassName,
    className,
    getModifierClasses({
      value: align,
      prefix: 'align',
      isResponsive: true,
      allowed: ['top', 'middle', 'bottom'],
    }),
    {
      'as--active': isActive,
      'as--disabled': isDisabled,
    },
  );

  return (
    <Tag {...attributes} className={classes}>
      {!!isDisabled && isDisabled !== true && (
        <span className="sui-o-datalist__disabled-overlay">
          { isDisabled }
        </span>
      )}
      {children}
    </Tag>
  );
};

DatalistRow.propTypes = propTypes;
DatalistRow.defaultProps = defaultProps;