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

Saagie UI from Saagie Design System

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

const propTypes = {
  /**
   * You can use simple value like 'left' or 'top'.
   * You can also use combined values like 'top left' or 'left top'.
   * You can also use responsive values like 'top left middle@md center@md'.
   */
  align: PropTypes.oneOfType([
    PropTypes.oneOf(['left', 'center', 'right', 'top', 'middle', 'bottom']),
    PropTypes.string,
  ]),
  children: PropTypes.node,
  className: PropTypes.string,
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  /**
   * You can use simple value like '1' or '2'.
   * You can also use responsive values like '1 2@md 3@lg'.
   */
  grow: PropTypes.oneOfType([
    PropTypes.oneOf(['1', '2', '3', '4', '5', '6', '7', '8']),
    PropTypes.string,
    PropTypes.number,
  ]),
  /**
   * Dimmed the column until hover
   */
  isDimmed: PropTypes.bool,
  /**
   * Display the text in the column as link at hover
   */
  isLink: PropTypes.bool,
  /**
   * Display a label above value on mobile.
   * By default it will get the value from the `headerLabels` props on the `Datalist` component.
   */
  isIndex: PropTypes.bool,
  /**
   * Display the column as a secondary level index
   */
  label: PropTypes.node,
  /**
   * You can use simple value like 'primary' or 'secondary'.
   */
  level: PropTypes.oneOf(['none', 'primary', 'secondary']),
  /**
   * You can use simple value like 'sm' or 'lg'.
   * You can also use responsive values like 'xs sm@md md@lg'
   */
  size: PropTypes.oneOfType([
    PropTypes.oneOf(['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
    PropTypes.string,
  ]),
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
};

const defaultProps = {
  align: '',
  children: '',
  className: '',
  defaultClassName: 'sui-o-datalist__col',
  grow: '',
  isDimmed: false,
  isLink: false,
  isIndex: false,
  label: null,
  level: 'secondary',
  size: '',
  tag: 'div',
};

export const DatalistCol = (props) => {
  const {
    align, // Drop property
    grow, // Drop property
    isDimmed, // Drop property
    isLink, // Drop property
    isIndex, // Drop property
    level, // Drop property
    size, // Drop property
    defaultClassName,
    label,
    tag: Tag,
    ...attributes
  } = props;

  const classes = getColumnClasses(props);

  return (
    <Tag {...attributes} className={classes} data-label={label} />
  );
};

DatalistCol.propTypes = propTypes;
DatalistCol.defaultProps = defaultProps;