@oliasoft-open-source/react-ui-library 2.4.8 → 3.0.0

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

@@ -1,621 +0,0 @@
-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 (
-    <div className={styles.inputWrapper}>
-      <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.staticCellContent,
-            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>
-    </div>
-  );
-};
-
-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.staticCellContent,
-        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 (
-    <div className={styles.inputWrapper}>
-      <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>
-    </div>
-  );
-};
-
-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.type === 'Static' || cell.type === 'Link' || !cell.type
-      ? styles.staticCell
-      : '',
-    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,
-};