@utahdts/utah-design-system 0.0.1

package/react/components/table/TableFilterNone.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+};
+const defaultProps = {
+  className: null,
+  innerRef: null,
+  id: null,
+};
+
+function TableFilter({
+  children,
+  className,
+  innerRef,
+  id,
+  ...rest
+}) {
+  return (
+    <th className={joinClassNames('some-TableFilter-classname', className)} id={id} ref={innerRef} {...rest}>
+      {children}
+    </th>
+  );
+}
+
+TableFilter.propTypes = propTypes;
+TableFilter.defaultProps = defaultProps;
+
+export default TableFilter;

package/react/components/table/TableFilterSelect.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+};
+const defaultProps = {
+  className: null,
+  innerRef: null,
+  id: null,
+};
+
+function TableFilter({
+  children,
+  className,
+  innerRef,
+  id,
+  ...rest
+}) {
+  return (
+    <th className={joinClassNames('some-TableFilter-classname', className)} id={id} ref={innerRef} {...rest}>
+      {children}
+    </th>
+  );
+}
+
+TableFilter.propTypes = propTypes;
+TableFilter.defaultProps = defaultProps;
+
+export default TableFilter;

package/react/components/table/TableFilterSelectOption.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+};
+const defaultProps = {
+  className: null,
+  innerRef: null,
+  id: null,
+};
+
+function TableFilter({
+  children,
+  className,
+  innerRef,
+  id,
+  ...rest
+}) {
+  return (
+    <th className={joinClassNames('some-TableFilter-classname', className)} id={id} ref={innerRef} {...rest}>
+      {children}
+    </th>
+  );
+}
+
+TableFilter.propTypes = propTypes;
+TableFilter.defaultProps = defaultProps;
+
+export default TableFilter;

package/react/components/table/TableFilterTextInput.jsx

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+import TextInput from '../forms/TextInput';
+import TableContext from './TableContext';
+import useCurrentValuesFromStateContext from './useCurrentValuesFromStateContext';
+
+const propTypes = {
+  className: PropTypes.string,
+  defaultValue: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+  onChange: PropTypes.func,
+  recordFieldPath: PropTypes.string.isRequired,
+  value: PropTypes.string,
+};
+const defaultProps = {
+  className: null,
+  defaultValue: null,
+  innerRef: null,
+  id: null,
+  onChange: null,
+  value: null,
+};
+
+function TableFilter({
+  className,
+  defaultValue,
+  innerRef,
+  id,
+  onChange,
+  recordFieldPath,
+  value,
+  ...rest
+}) {
+  const {
+    currentOnChange,
+    currentValue,
+  } = useCurrentValuesFromStateContext({
+    context: TableContext,
+    contextStatePath: recordFieldPath,
+    defaultOnChange: (e) => e.target.value,
+    defaultValue,
+    onChange,
+    value,
+  });
+  return (
+    <th className={joinClassNames('some-TableFilter-className', className)} id={id} ref={innerRef}>
+      <TextInput
+        id={`table-filter-text-input-${recordFieldPath}`}
+        label={`filter ${recordFieldPath}`}
+        onChange={currentOnChange}
+        value={currentValue}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest}
+      />
+    </th>
+  );
+}
+
+TableFilter.propTypes = propTypes;
+TableFilter.defaultProps = defaultProps;
+
+export default TableFilter;

package/react/components/table/TableFilters.jsx

@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import { useContext, useEffect } from 'react';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+import TableContext from './TableContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  defaultValue: PropTypes.shape({}),
+  className: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+  // fires when any filter changes; ie ({ recordFieldPath, value }) => { ... do something ... }
+  onChange: PropTypes.func,
+  // make sure to useMemo() before passing value in here
+  value: PropTypes.shape({}),
+};
+const defaultProps = {
+  className: null,
+  defaultValue: null,
+  innerRef: null,
+  id: null,
+  onChange: null,
+  value: null,
+};
+
+function TableFilters({
+  children,
+  className,
+  defaultValue,
+  innerRef,
+  id,
+  onChange,
+  value,
+  ...rest
+}) {
+  const { setState, state } = useContext(TableContext);
+
+  useEffect(
+    () => {
+      if (
+        state.filterValues.defaultValue
+        || state.filterValues.onChange
+        || state.filterValues.value
+      ) {
+        // if you want to do more than one Filters section, then you'll want to update the context's
+        // filterValues.onChange to be an array... and maybe some other changes... ymmv
+        console.warn('defaultValue, onChange, or value were already set for Filters. There should only be one <TableFilters/> section in a table.');
+      }
+
+      setState((draftState) => {
+        draftState.filterValues.defaultValue = defaultValue;
+        draftState.filterValues.onChange = onChange;
+        draftState.filterValues.value = value || draftState.filterValues.value;
+      });
+
+      return () => {
+        setState((draftState) => {
+          draftState.filterValues.defaultValue = null;
+          draftState.filterValues.onChange = null;
+          draftState.filterValues.value = null;
+        });
+      };
+    },
+    []
+  );
+
+  // when value changes, update state...
+  useEffect(
+    () => {
+      setState((draftState) => {
+        draftState.filterValues.value = value || draftState.filterValues.value;
+      });
+    },
+    [value]
+  );
+
+  return (
+    <tr className={joinClassNames('some-TableFilters-classname', className)} id={id} ref={innerRef} {...rest}>
+      {children}
+    </tr>
+  );
+}
+
+TableFilters.propTypes = propTypes;
+TableFilters.defaultProps = defaultProps;
+
+export default TableFilters;

package/react/components/table/TableFoot.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+};
+const defaultProps = {
+  className: null,
+  innerRef: null,
+  id: null,
+};
+
+function TableFoot({
+  children,
+  className,
+  innerRef,
+  id,
+  ...rest
+}) {
+  return (
+    <tfoot className={joinClassNames('some-TableFoot-classname', className)} id={id} ref={innerRef} {...rest}>
+      {children}
+    </tfoot>
+  );
+}
+
+TableFoot.propTypes = propTypes;
+TableFoot.defaultProps = defaultProps;
+
+export default TableFoot;

package/react/components/table/TableFootCell.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+};
+const defaultProps = {
+  className: null,
+  innerRef: null,
+  id: null,
+};
+
+function TableFootCell({
+  children,
+  className,
+  innerRef,
+  id,
+  ...rest
+}) {
+  return (
+    <td className={joinClassNames('some-TableFootCell-classname', className)} id={id} ref={innerRef} {...rest}>
+      {children}
+    </td>
+  );
+}
+
+TableFootCell.propTypes = propTypes;
+TableFootCell.defaultProps = defaultProps;
+
+export default TableFootCell;

package/react/components/table/TableFootRow.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+};
+const defaultProps = {
+  className: null,
+  innerRef: null,
+  id: null,
+};
+
+function TableFootRow({
+  children,
+  className,
+  innerRef,
+  id,
+  ...rest
+}) {
+  return (
+    <tr className={joinClassNames('some-TableFootRow-classname', className)} id={id} ref={innerRef} {...rest}>
+      {children}
+    </tr>
+  );
+}
+
+TableFootRow.propTypes = propTypes;
+TableFootRow.defaultProps = defaultProps;
+
+export default TableFootRow;

package/react/components/table/TableHead.jsx

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+};
+const defaultProps = {
+  className: null,
+  innerRef: null,
+  id: null,
+};
+
+function TableHead({
+  children,
+  className,
+  innerRef,
+  id,
+  ...rest
+}) {
+  return (
+    <thead
+      className={joinClassNames('some-TableHead-classname', className)}
+      id={id}
+      ref={innerRef}
+      {...rest}
+    >
+      {children}
+    </thead>
+  );
+}
+
+TableHead.propTypes = propTypes;
+TableHead.defaultProps = defaultProps;
+
+export default TableHead;

package/react/components/table/TableHeadCell.jsx

@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+import { useContext } from 'react';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+import TableContext from './TableContext';
+
+const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  // The field related to this column. CellTemplate and RowTemplate can define a field. This field is used for determining sorting and filtering.
+  recordFieldPath: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+  onClick: PropTypes.func,
+  tableSortingFieldPaths: PropTypes.arrayOf(PropTypes.string),
+};
+const defaultProps = {
+  children: null,
+  className: null,
+  recordFieldPath: null,
+  innerRef: null,
+  id: null,
+  onClick: null,
+  tableSortingFieldPaths: null,
+};
+
+function TableHeadCell({
+  children,
+  className,
+  recordFieldPath,
+  innerRef,
+  id,
+  onClick,
+  tableSortingFieldPaths,
+  ...rest
+}) {
+  const { setState, state: { currentSortingOrderIsDefault, sortingRules, tableSortingFieldPath } } = useContext(TableContext);
+  return (
+    <th
+      className={joinClassNames(
+        'some-TableHeadCell-classname',
+        className,
+        (sortingRules[recordFieldPath] || tableSortingFieldPaths) && 'this-td-is-sortable!-by-clicking-on-the-th!',
+        (tableSortingFieldPath === recordFieldPath) && 'i-am-a-bad-classname-denoting-that-this-th-is-currently-the-sorted-column',
+        (tableSortingFieldPath === recordFieldPath) && (
+          currentSortingOrderIsDefault
+            ? 'another-bad-classname-saying-that-this-column-is-sorting-by-default-order'
+            : 'another-bad-classname-saying-that-this-column-is-sorting-by-not-default-/-opposite-order'
+        )
+      )}
+      id={id}
+      onClick={(e) => {
+        if (onClick) {
+          onClick(e);
+        } else if (tableSortingFieldPath === recordFieldPath) {
+          setState((draftState) => {
+            draftState.currentSortingOrderIsDefault = !draftState.currentSortingOrderIsDefault;
+          });
+        } else if (sortingRules[recordFieldPath] || tableSortingFieldPaths) {
+          setState((draftState) => {
+            // still need fieldPath to identify which head cell this is, but tableSortingFieldPaths determines sorting
+            draftState.tableSortingFieldPath = recordFieldPath;
+            draftState.tableSortingFieldPaths = tableSortingFieldPaths;
+            draftState.currentSortingOrderIsDefault = true;
+          });
+        }
+      }}
+      ref={innerRef}
+      {...rest}
+    >
+      {children}
+    </th>
+  );
+}
+
+TableHeadCell.propTypes = propTypes;
+TableHeadCell.defaultProps = defaultProps;
+
+export default TableHeadCell;

package/react/components/table/TableHeadRow.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+};
+const defaultProps = {
+  className: null,
+  innerRef: null,
+  id: null,
+};
+
+function TableHeadRow({
+  children,
+  className,
+  innerRef,
+  id,
+  ...rest
+}) {
+  return (
+    <tr className={joinClassNames('some-TableHeadRow-classname', className)} id={id} ref={innerRef} {...rest}>
+      {children}
+    </tr>
+  );
+}
+
+TableHeadRow.propTypes = propTypes;
+TableHeadRow.defaultProps = defaultProps;
+
+export default TableHeadRow;

package/react/components/table/TableRow.jsx

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import RefShape from '../../propTypesShapes/RefShape';
+import joinClassNames from '../../util/joinClassNames';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  innerRef: RefShape,
+  id: PropTypes.string,
+  // (e) => { ... do something ... }
+  onClick: PropTypes.func,
+  // (e) => { ... do something ... }
+  onDoubleClick: PropTypes.func,
+};
+const defaultProps = {
+  className: null,
+  innerRef: null,
+  id: null,
+  onClick: null,
+  onDoubleClick: null,
+};
+
+function TableRow({
+  children,
+  className,
+  innerRef,
+  id,
+  onClick,
+  onDoubleClick,
+  ...rest
+}) {
+  return (
+    <tr
+      className={joinClassNames('some-TableRow-classname', className)}
+      id={id}
+      ref={innerRef}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      {...rest}
+    >
+      {children}
+    </tr>
+  );
+}
+
+TableRow.propTypes = propTypes;
+TableRow.defaultProps = defaultProps;
+
+export default TableRow;

package/react/components/table/TableSortingRule.jsx

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import { useContext, useEffect } from 'react';
+import tableSortingRuleFieldType from '../../enums/tableSortingRuleFieldType';
+import TableContext from './TableContext';
+
+const propTypes = {
+  // should be a function that does sorting
+  // ({ fieldValueA, fieldValueB, recordA, recordB, records }) => (a < b ? -1 : a > b ? 1 : 0)
+  customSort: PropTypes.func,
+  // should the field sort ascending by default
+  defaultIsAscending: PropTypes.bool,
+  // what type of data is in this field so it knows how to sort it
+  fieldType: PropTypes.oneOf(Object.values(tableSortingRuleFieldType)),
+  // recordFieldPath should match with a recordFieldPath for a <TableHeadCell> in the table
+  // OR as one of the tableSortingFieldPaths in a<TableHeadCell>
+  // if your records need a calculated field, it is suggested to calculate the value and store it on the record and set this path to the
+  // calculated value's path. This way the value does not have to be recalculatd on every render.
+  recordFieldPath: PropTypes.string.isRequired,
+};
+const defaultProps = {
+  customSort: null,
+  defaultIsAscending: true,
+  fieldType: 'string',
+};
+
+function TableSortingRule({
+  customSort,
+  defaultIsAscending,
+  fieldType,
+  recordFieldPath,
+}) {
+  const { registerSortingRule, unregisterSortingRule } = useContext(TableContext);
+
+  // register this sorting rule with the context
+  useEffect(
+    () => {
+      registerSortingRule({
+        customSort,
+        defaultIsAscending,
+        fieldType,
+        recordFieldPath,
+      });
+      return () => unregisterSortingRule(recordFieldPath);
+    },
+    []
+  );
+
+  // this component does not render anything
+  return null;
+}
+
+TableSortingRule.propTypes = propTypes;
+TableSortingRule.defaultProps = defaultProps;
+
+export default TableSortingRule;

package/react/components/table/TableSortingRules.jsx

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import { useContext, useEffect } from 'react';
+import TableContext from './TableContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  defaultValue: PropTypes.string,
+  // ({ recordFieldPath }) => { ... do something ... }
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+};
+const defaultProps = {
+  defaultValue: null,
+  onChange: null,
+  value: undefined,
+};
+
+function TableSortingRules({
+  children,
+  defaultValue,
+  onChange,
+  value,
+}) {
+  const { setState, state } = useContext(TableContext);
+  useEffect(
+    () => {
+      if ((onChange && state.tableSortingOnChange) || (defaultValue && state.tableSortingFieldPath)) {
+        console.error('A TableWrapper should only have one TableSortingRules section.');
+      } else {
+        if (onChange) {
+          setState((draftState) => { draftState.tableSortingOnChange = onChange; });
+        }
+        if (defaultValue) {
+          setState((draftState) => { draftState.tableSortingFieldPath = defaultValue; });
+        }
+      }
+
+      // unset the onChange if this component gets unmounted
+      return () => {
+        if (onChange === state.tableSortingOnChange) {
+          setState((draftState) => { draftState.tableSortingOnChange = null; });
+        }
+      };
+    },
+    []
+  );
+
+  // controlled by parent, so set value to current value
+  useEffect(
+    () => {
+      if (value !== undefined) {
+        setState((draftState) => { draftState.tableSortingFieldPath = value; });
+      }
+    },
+    [value]
+  );
+
+  return children;
+}
+
+TableSortingRules.propTypes = propTypes;
+TableSortingRules.defaultProps = defaultProps;
+
+export default TableSortingRules;