wix-style-react/src/TableToolbar/Compounds.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import Heading from '../Heading';
import Text from '../Text';

import { st, classes } from './TableToolbar.st.css';

export const Title = ({ dataHook, className, children }) => (
  <Heading dataHook={dataHook} className={className} appearance="H3">
    {children}
  </Heading>
);

Title.propTypes = {
  dataHook: PropTypes.string,
  className: PropTypes.string,
};

Title.displayName = 'TableToolbar.Title';

export const SelectedCount = ({ dataHook, className, children }) => (
  <Text dataHook={dataHook} className={className} weight="normal" size="medium">
    {children}
  </Text>
);

SelectedCount.propTypes = {
  dataHook: PropTypes.string,
  className: PropTypes.string,
};

SelectedCount.displayName = 'TableToolbar.SelectedCount';

export const ItemGroup = ({ dataHook, position, children, className }) => (
  <div
    data-hook={dataHook}
    className={st(classes.itemGroup, { position }, className)}
  >
    {children}
  </div>
);

ItemGroup.propTypes = {
  dataHook: PropTypes.string,
  className: PropTypes.string,
  position: PropTypes.oneOf(['start', 'end']),
};

ItemGroup.defaultProps = {
  position: 'start',
};

ItemGroup.displayName = 'Toolbar.ItemGroup';

export const Item = ({ children, layout, className, dataHook }) => (
  <span
    data-hook={dataHook}
    className={st(classes.item, { layout }, className)}
  >
    {children}
  </span>
);

Item.propTypes = {
  dataHook: PropTypes.string,
  className: PropTypes.string,
  layout: PropTypes.oneOf(['button']),
};

Item.displayName = 'Toolbar.Item';

export const Label = ({ children, className, ...rest }) => (
  <Text
    tagName="label"
    {...rest}
    className={st(classes.itemLabel, {}, className)}
  >
    {React.Children.toArray(children).map((c, index) => {
      return typeof c === 'string' ? <span key={index}>{c}</span> : c;
    })}
  </Text>
);

Label.propTypes = {
  dataHook: PropTypes.string,
  className: PropTypes.string,
};

Label.displayName = 'Toolbar.Label';

export const Divider = ({ className, dataHook }) => (
  <span data-hook={dataHook} className={st(classes.divider, {}, className)} />
);

Divider.propTypes = {
  dataHook: PropTypes.string,
  className: PropTypes.string,
};

Divider.displayName = 'Toolbar.Divider';