@redsift/design-system-legacy 8.0.1 → 8.0.3

package/src/components/Table/TableComponents.jsx

@@ -1,239 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import styled from 'styled-components';
-import { Button } from '../Button';
-import { Typography } from '../Typography';
-import { ArrowIcon, DeleteIcon, ClearIcon, EditOutline } from '../icons';
-import {
-  ActionIcon,
-  Cell,
-  DeleteConfirmButton,
-  Row,
-  GreyButton,
-} from "./TableStyles";
-
-const BlankRows = ({
-  onDelete,
-  showDeleteColumn,
-  onSelectionChange,
-  staticPageSize,
-  noPagination,
-  headerGroups,
-  rowSubComponent,
-  editRowEnabled,
-  bordered,
-  rows,
-  page,
-}) => {
-  const brows =
-    staticPageSize &&
-    staticPageSize - (noPagination ? rows.length : page.length) > 0
-      ? [
-          ...Array(
-            staticPageSize - (noPagination ? rows.length : page.length)
-          ).keys(),
-        ]
-      : (noPagination ? rows.length : page.length) < 1
-      ? ["0"]
-      : [];
-  return (
-    <Fragment>
-      {brows.map((id) => {
-        return (
-          <Row bordered={bordered} key={`emptyrow-${id}`} isEmpty>
-            {onSelectionChange && <Cell />}
-            {headerGroups[headerGroups.length - 1].headers.map(
-              (header, idx) => {
-                return <Cell key={`emptycell-${idx}`} />;
-              }
-            )}
-            {editRowEnabled || (onDelete && showDeleteColumn) ? (
-              <Cell
-                size={editRowEnabled && onDelete && showDeleteColumn ? 90 : 80}
-              />
-            ) : null}
-            {rowSubComponent && !editRowEnabled && <Cell size={50} />}
-          </Row>
-        );
-      })}
-    </Fragment>
-  );
-};
-
-const ClearSearchButton = ({ title, handleClearSearch }) => {
-  return (
-    <Button aria-label={title} onClick={handleClearSearch} flatIcon>
-      <ClearIcon alt={title} />
-    </Button>
-  );
-};
-
-const EditButton = ({ title, ...props }) => {
-  let onClick = props.onClick;
-  if (props.customOnEdit) {
-    onClick = () => {
-      props.customOnEdit(props.row);
-    };
-  }
-
-  return (
-    <ActionIcon
-      title={title}
-      aria-label={title}
-      icon={EditOutline}
-      unPadded
-      {...props}
-      onClick={onClick}
-    />
-  );
-};
-
-const ButtonsRowContainer = ({ size = 80, children }) => {
-  return <Cell size={size}>{children}</Cell>;
-};
-
-const ActionButtons = ({
-  row,
-  disabled,
-  onDelete,
-  editButtonProps,
-  customOnEdit,
-  locales,
-}) => {
-  const [confirm, setConfirm] = useState(false);
-
-  const handleOnDelete = (row) => {
-    if (!("_id" in row.original)) {
-      return;
-    }
-    const { _id } = row.original;
-    onDelete([_id]);
-    setConfirm(false);
-  };
-
-  const ConfirmButtons = () => {
-    return (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <DeleteConfirmButton confirm onClick={() => handleOnDelete(row)}>
-          {locales["remove"] || "Remove"}
-        </DeleteConfirmButton>
-        <DeleteConfirmButton flat onClick={() => setConfirm(false)}>
-          {locales["cancel"] || "Cancel"}
-        </DeleteConfirmButton>
-      </div>
-    );
-  };
-  if (confirm) {
-    return <ConfirmButtons />;
-  }
-  if (editButtonProps) {
-    return (
-      <Fragment>
-        <EditButton
-          row={row}
-          customOnEdit={customOnEdit}
-          {...editButtonProps}
-        />
-        <ActionIcon
-          title={locales["delete"] || "Delete"}
-          aria-label={locales["delete"] || "Delete"}
-          onClick={() => setConfirm(true)}
-          icon={DeleteIcon}
-          disabled={disabled}
-          unPadded
-          style={{ opacity: !disabled ? "1" : "0.2" }}
-        />
-      </Fragment>
-    );
-  }
-  return (
-    <ActionIcon
-      title={locales["delete"] || "Delete"}
-      aria-label={locales["delete"] || "Delete"}
-      onClick={() => setConfirm(true)}
-      icon={DeleteIcon}
-      disabled={disabled}
-      style={{ opacity: !disabled ? "1" : "0.2" }}
-    />
-  );
-};
-
-const DeleteConfirmBanner = ({ onDelete, onCancel, locales }) => {
-  const Banner = styled.div`
-    display: flex;
-    background: rgb(255, 227, 224);
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 10px;
-    border: 1px solid rgb(235, 237, 244);
-    border-style: solid;
-    border-color: rgb(235, 237, 244);
-    border-radius: 5px;
-    padding: 20px;
-    @media (max-width:480px) {
-      flex-direction: column;
-      span {
-        margin-bottom: 16px;
-      }
-    }
-  `;
-
-  const ButtonContainer = styled.div`
-    display: flex;
-    button:first-child {
-      margin-right: 10px;
-    }
-    @media (max-width:480px) {
-      width: 100%;
-      justify-content: center;
-      button {
-        padding: 6px 32px;
-      }
-    }
-  `;
-  return (
-    <Banner>
-      <Typography component="span">
-        {locales["delete-select-are-you-sure"] ||
-          "Are you sure you wish to delete all selected items?"}
-      </Typography>
-      <ButtonContainer>
-        <Button outlined color={"#333"} onClick={onCancel}>
-          {locales["cancel"] || "Cancel"}
-        </Button>
-        <Button danger onClick={onDelete}>
-          {locales["confirm"] || "Confirm"}
-        </Button>
-      </ButtonContainer>
-    </Banner>
-  );
-};
-
-const SortButton = ({ onSort, action, row, rowSpacing }) => {
-  return (
-    <GreyButton
-      action={action}
-      title={action}
-      aria-label={action}
-      rowSpacing={rowSpacing}
-      onClick={() => onSort(action, row)}
-    >
-      <ArrowIcon title={action} />
-    </GreyButton>
-  );
-};
-export {
-  BlankRows,
-  ClearSearchButton,
-  ActionButtons,
-  DeleteConfirmBanner,
-  ButtonsRowContainer,
-  EditButton,
-  SortButton,
-};

package/src/components/Table/TableFilters.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { matchSorter } from "match-sorter";
-import { Input } from '../Input';
-
-const DefaultColumnFilter = ({ column: { filterValue, setFilter } }) => {
-  return (
-    <Input
-      value={filterValue || ""}
-      onChange={(e) => {
-        setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
-      }}
-      showClear
-    />
-  );
-};
-
-const fuzzyTextFilterFn = (rows, id, filterValue) => {
-  return matchSorter(rows, filterValue, { keys: [(row) => row.values[id]] });
-};
-// Let the table remove the filter if the string is empty
-fuzzyTextFilterFn.autoRemove = (val) => !val;
-
-export { DefaultColumnFilter, fuzzyTextFilterFn };