@redsift/design-system-legacy 8.0.0-alpha.8 → 8.0.1

package/src/components/Table/TableComponents.jsx

@@ -0,0 +1,239 @@
+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

@@ -0,0 +1,23 @@
+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 };