@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/table/cell/cell.jsx

@@ -0,0 +1,614 @@
+import React, { useRef, useContext } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { CgSortAz, CgSortZa } from 'react-icons/cg';
+import { FaBook, FaQuestionCircle } from 'react-icons/fa';
+import styles from './cell.module.less';
+import { CheckBox } from '../../check-box/check-box';
+import { Select } from '../../select/select';
+import { selectOptionShape } from '../../select/custom-select/custom-select';
+import { Input } from '../../input/input';
+import { Text } from '../../text/text';
+import { Actions } from '../../actions/actions';
+import { actionsShape } from '../../actions/actions.shape';
+import { Tooltip } from '../../tooltip/tooltip';
+import { Popover } from '../../popover/popover';
+import { Slider } from '../../slider/slider';
+import { Icon } from '../../icon/icon';
+import { isStringNumberOrNode } from '../../../helpers/types';
+import { DisabledContext } from '../../../helpers/disabled-context';
+import { getCellAlignment } from '../helper';
+
+const InputCell = (props) => {
+  const { cell, columnAlignment, testId } = props;
+  return (
+    <Input
+      name={cell.name}
+      value={cell.value}
+      onChange={(ev) => cell.onChange(ev)}
+      placeholder={cell.placeholder}
+      error={cell.error}
+      warning={cell.warning}
+      disabled={cell.disabled}
+      isInTable
+      maxTooltipWidth={cell.maxTooltipWidth}
+      right={columnAlignment === 'right'}
+      testId={testId}
+      tabIndex={cell.disabled ? -1 : 0}
+    />
+  );
+};
+
+const SelectCell = (props) => {
+  const { cell, columnAlignment, testId } = props;
+
+  return (
+    <Select
+      name={cell.name}
+      borderRadius={0}
+      menu={cell.menu} //deprecated
+      options={cell.options}
+      onChange={(ev) => cell.onChange(ev)}
+      onCreate={cell.onCreate ? (ev) => cell.onCreate(ev) : undefined}
+      error={cell.error}
+      warning={cell.warning}
+      disabled={cell.disabled}
+      placeholder={cell.placeholder}
+      isInTable
+      value={cell.value}
+      native={cell.native}
+      clearable={cell.clearable}
+      searchable={cell.searchable}
+      deprecatedEventHandler={cell.deprecatedEventHandler}
+      maxTooltipWidth={cell.maxTooltipWidth}
+      width={cell.width}
+      autoLayerWidth={cell.autoLayerWidth}
+      right={columnAlignment === 'right'}
+      testId={testId}
+      tabIndex={cell.disabled ? -1 : 0}
+    />
+  );
+};
+
+const LinkCell = (props) => {
+  const disabledContext = useContext(DisabledContext);
+
+  const { cell, testId } = props;
+  const { error, warning, tooltip, maxTooltipWidth } = cell;
+  return (
+    <Tooltip
+      error={!!error}
+      warning={!!warning}
+      text={tooltip || error || warning}
+      enabled={
+        (tooltip && isStringNumberOrNode(tooltip)) ||
+        (error && isStringNumberOrNode(error)) ||
+        (warning && isStringNumberOrNode(warning)) ||
+        false
+      }
+      maxWidth={maxTooltipWidth}
+      placement="bottom-center"
+    >
+      <div
+        className={cx(
+          styles.staticCell,
+          error ? styles.error : warning ? styles.warning : '',
+        )}
+      >
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <a
+          className={cx(
+            (cell.disabled || disabledContext) && styles.disabledLink,
+          )}
+          onClick={
+            cell.disabled || disabledContext
+              ? () => {}
+              : (evt) => {
+                  evt.stopPropagation();
+                  cell.onClick(evt);
+                }
+          }
+          data-testid={testId}
+        >
+          {cell.value}
+        </a>
+      </div>
+    </Tooltip>
+  );
+};
+
+const CheckBoxCell = (props) => {
+  const { cell, testId } = props;
+  return (
+    <CheckBox
+      label={cell.label}
+      checked={cell.checked}
+      isInTable
+      disabled={cell.disabled}
+      onChange={(ev) => cell.onChange(ev)}
+      testId={testId}
+      tabIndex={cell.disabled ? -1 : 0}
+    />
+  );
+};
+
+const SliderCell = (props) => {
+  const { cell } = props;
+  return (
+    <div className={styles.inputWrapper}>
+      <Slider
+        label={cell.label}
+        value={cell.value}
+        min={cell.min}
+        max={cell.max}
+        step={cell.step}
+        marks={cell.marks}
+        onChange={(ev) => cell.onChange(ev)}
+        showArrows={cell.showArrows}
+        showToolTop={cell.showTooltip}
+        tooltipFormatter={cell.tooltipFormatter}
+        disabled={cell.disabled}
+      />
+    </div>
+  );
+};
+
+const Sort = (props) => {
+  const { cell } = props;
+  const { hasSort, sort, sortPriority } = cell;
+  return hasSort ? (
+    <span className={styles.sortingCellIcon}>
+      {sort === 'down' ? (
+        <Text link>
+          <CgSortAz />
+        </Text>
+      ) : sort === 'up' ? (
+        <Text link>
+          <CgSortZa />
+        </Text>
+      ) : (
+        <Text faint>
+          <CgSortZa />
+        </Text>
+      )}
+      {sortPriority && sort ? <sup>{sortPriority}</sup> : null}
+    </span>
+  ) : null;
+};
+
+const HelpIcon = (props) => {
+  const { cell } = props;
+  const { helpIcon } = cell;
+  return helpIcon ? (
+    <span
+      className={cx(styles.icon, helpIcon.onClick ? styles.clickable : '')}
+      onClick={helpIcon.onClick}
+    >
+      <Tooltip display="flex" text={helpIcon.tooltip ?? ''}>
+        <FaQuestionCircle />
+      </Tooltip>
+    </span>
+  ) : null;
+};
+
+const LibraryIcon = (props) => {
+  const { cell } = props;
+  const { libraryIcon } = cell;
+  return libraryIcon ? (
+    <span
+      className={cx(styles.icon, libraryIcon.onClick ? styles.clickable : '')}
+      onClick={libraryIcon.onClick}
+    >
+      <Tooltip display="flex" text={libraryIcon?.tooltip ?? ''}>
+        <FaBook />
+      </Tooltip>
+    </span>
+  ) : null;
+};
+
+const IconCell = (props) => {
+  const { cell } = props;
+  return (
+    <div className={styles.iconWrapper}>
+      <Icon icon={cell.icon} />
+    </div>
+  );
+};
+
+const ActionsCell = (props) => {
+  const { cell } = props;
+  return <Actions actions={cell.actions} />;
+};
+
+const StaticCell = (props) => {
+  const { cell, isHeader, testId } = props;
+  const { error, warning, tooltip, maxTooltipWidth, hasSort, onSort, type } =
+    cell;
+  const field = (
+    <div
+      className={cx(
+        styles.staticCell,
+        type === 'Unit' ? styles.unit : '',
+        error ? styles.error : warning ? styles.warning : '',
+      )}
+      onClick={hasSort ? (evt) => onSort(evt) : () => {}}
+      data-testid={testId}
+    >
+      {cell.value}
+      {isHeader ? (
+        <>
+          <HelpIcon cell={cell} />
+          <LibraryIcon cell={cell} />
+          <Sort cell={cell} />
+        </>
+      ) : null}
+    </div>
+  );
+  return (
+    <Tooltip
+      error={!!error}
+      warning={!!warning}
+      text={tooltip || error || warning}
+      enabled={
+        (tooltip && isStringNumberOrNode(tooltip)) ||
+        (error && isStringNumberOrNode(error)) ||
+        (warning && isStringNumberOrNode(warning)) ||
+        false
+      }
+      maxWidth={maxTooltipWidth}
+      display="block"
+      placement="bottom-center"
+    >
+      {field}
+    </Tooltip>
+  );
+};
+
+const PopoverCell = (props) => {
+  const { cell, testId } = props;
+  const { content, fullWidth, closeOnOutsideClick, disabled } = cell;
+
+  return (
+    <Popover
+      content={content}
+      fullWidth={fullWidth}
+      closeOnOutsideClick={closeOnOutsideClick}
+      disabled={disabled}
+    >
+      <div className={styles.popover}>
+        <StaticCell cell={cell} testId={testId} />
+      </div>
+    </Popover>
+  );
+};
+
+const InputCellWrapper = (props) => {
+  const { cell, columnAlignment, testId } = props;
+
+  return (
+    <div className={styles.inputWrapper}>
+      {cell.type === 'Input' ? (
+        <InputCell
+          cell={cell}
+          columnAlignment={columnAlignment}
+          testId={testId}
+        />
+      ) : cell.type === 'Select' ? (
+        <SelectCell
+          cell={cell}
+          columnAlignment={columnAlignment}
+          testId={testId}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+const CellWrapper = (props) => {
+  const { cell, isHeader, columnAlignment, testId } = props;
+  if (cell) {
+    switch (cell.type) {
+      case 'Input':
+      case 'Select':
+        return (
+          <InputCellWrapper
+            cell={cell}
+            columnAlignment={columnAlignment}
+            testId={testId}
+          />
+        );
+      case 'Link':
+        return <LinkCell cell={cell} testId={testId} />;
+      case 'CheckBox':
+        return <CheckBoxCell cell={cell} testId={testId} />;
+      case 'Slider':
+        return <SliderCell cell={cell} />;
+      case 'Icon':
+        return <IconCell cell={cell} />;
+      case 'Actions':
+        return <ActionsCell cell={cell} />;
+      case 'Popover':
+        return <PopoverCell cell={cell} />;
+      default:
+        return <StaticCell cell={cell} isHeader={isHeader} testId={testId} />;
+    }
+  }
+};
+
+export const Cell = (props) => {
+  const {
+    cell,
+    isHeader,
+    columnHeaderAlignment,
+    columnAlignment,
+    width,
+    snapshot,
+    testId,
+  } = props;
+  const { style, colSpan } = cell;
+  const ref = useRef(null);
+  const alignment = {
+    bodyAlignment: columnAlignment,
+    headerAlignment: columnHeaderAlignment,
+    isHeader,
+  };
+  const cellAlignmentStyle = getCellAlignment(alignment, styles);
+  const cellAlignmentText = getCellAlignment(alignment, styles, true);
+
+  const className = cx(
+    styles.cellWrapper,
+    cell.type === 'Input' || cell.type === 'Select' || cell.type === 'Popover'
+      ? styles.inputCell
+      : '',
+    cell.type === 'Slider' ? styles.sliderCell : '',
+    cell.type === 'CheckBox' ? styles.checkBoxCell : '',
+    cell.type === 'Actions' ? styles.actionsCell : '',
+    cell.type === 'Icon' ? styles.iconCell : '',
+    cell.hasSort ? styles.sortingCell : null,
+    cellAlignmentStyle,
+    cell.breakWord ? styles.breakWord : '',
+  );
+
+  const isWidthCustomSelect =
+    cell.type === 'Select' && cell.native !== true && cell.width !== undefined;
+
+  return isHeader ? (
+    <th
+      className={className}
+      style={{
+        ...style,
+        ...(isWidthCustomSelect ? { width: '1%' } : {}),
+        ...(width && !colSpan ? { minWidth: width } : {}),
+      }}
+      colSpan={colSpan}
+    >
+      <CellWrapper
+        cell={cell}
+        columnAlignment={cellAlignmentText}
+        isHeader={isHeader}
+        testId={testId}
+      />
+    </th>
+  ) : (
+    <td
+      ref={ref}
+      className={className}
+      style={{
+        ...style,
+        ...(isWidthCustomSelect ? { width: '1%' } : {}),
+        ...(width && !colSpan ? { minWidth: width } : {}),
+        ...(snapshot?.isDragging
+          ? { width: ref.current ? ref.current.offsetWidth : 0 }
+          : {}),
+      }}
+      colSpan={colSpan}
+    >
+      <CellWrapper
+        cell={cell}
+        columnAlignment={cellAlignmentText}
+        isHeader={isHeader}
+        testId={testId}
+      />
+    </td>
+  );
+};
+
+const cellType = PropTypes.oneOf([
+  'Static',
+  'Icon',
+  'Select',
+  'Input',
+  'Popover',
+  'CheckBox',
+  'Actions',
+  'Link',
+  'Unit',
+]);
+
+export const cellShape = PropTypes.oneOfType([
+  PropTypes.shape({
+    //Static
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    type: cellType,
+    colSpan: PropTypes.number,
+    error: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    warning: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    tooltip: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    maxTooltipWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    breakWord: PropTypes.bool,
+    libraryIcon: PropTypes.shape({
+      onClick: PropTypes.func,
+      tooltip: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.node,
+      ]),
+    }),
+    helpIcon: PropTypes.shape({
+      onClick: PropTypes.func,
+      tooltip: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.node,
+      ]),
+    }),
+    testId: PropTypes.string,
+  }),
+  PropTypes.shape({
+    //Icon
+    type: cellType.isRequired,
+    icon: PropTypes.string.isRequired,
+    colSpan: PropTypes.number,
+  }),
+  PropTypes.shape({
+    //Select
+    name: PropTypes.string,
+    options: PropTypes.arrayOf(selectOptionShape),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    type: cellType.isRequired,
+    onChange: PropTypes.func,
+    onCreate: PropTypes.func,
+    error: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    warning: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    tooltip: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    colSpan: PropTypes.number,
+    clearable: PropTypes.bool,
+    native: PropTypes.bool,
+    searchable: PropTypes.bool,
+    deprecatedEventHandler: PropTypes.bool,
+    maxTooltipWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    width: PropTypes.string,
+    autoLayerWidth: PropTypes.bool,
+    testId: PropTypes.string,
+  }),
+  PropTypes.shape({
+    //Input
+    name: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    type: cellType.isRequired,
+    onChange: PropTypes.func,
+    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    error: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    warning: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    tooltip: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    hasSort: PropTypes.bool,
+    sort: PropTypes.oneOf(['', 'up', 'down']), //only for header cells
+    sortPriority: PropTypes.number, //only for header cells
+    onSort: PropTypes.func, //only for header cells
+    colSpan: PropTypes.number,
+    maxTooltipWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    testId: PropTypes.string,
+  }),
+  PropTypes.shape({
+    //CheckBox
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    checked: PropTypes.bool,
+    type: cellType.isRequired,
+    onClick: PropTypes.func,
+    colSpan: PropTypes.number,
+    testId: PropTypes.string,
+  }),
+  PropTypes.shape({
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    value: PropTypes.number.isRequired,
+    min: PropTypes.number.isRequired,
+    max: PropTypes.number.isRequired,
+    step: PropTypes.number,
+    marks: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+    showArrows: PropTypes.bool,
+    showToolTop: PropTypes.bool,
+    tooltipFormatter: PropTypes.func,
+    disabled: PropTypes.bool,
+  }),
+  PropTypes.shape({
+    //Actions
+    actions: PropTypes.arrayOf(actionsShape),
+    type: cellType.isRequired,
+    colSpan: PropTypes.number,
+  }),
+  PropTypes.shape({
+    //Link
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    type: cellType.isRequired,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    colSpan: PropTypes.number,
+    testId: PropTypes.string,
+    error: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    warning: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+    tooltip: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.node,
+    ]),
+  }),
+  PropTypes.shape({
+    //JSX / sub-component
+    value: PropTypes.node, //React component
+    onClick: PropTypes.func,
+    colSpan: PropTypes.number,
+  }),
+]);
+
+Cell.defaultProps = {
+  isHeader: false,
+  style: {},
+  cell: {},
+  testId: '',
+};
+
+Cell.propTypes = {
+  isHeader: PropTypes.bool,
+  style: PropTypes.object,
+  cell: cellShape,
+  testId: PropTypes.string,
+};