@teselagen/ui 0.6.6 → 0.7.1

package/src/DataTable/FilterAndSortMenu.js

@@ -1,7 +1,7 @@
+import React, { useState } from "react";
 import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
 import { camelCase } from "lodash-es";
 import classNames from "classnames";
-import React from "react";
 import {
   Menu,
   Intent,
@@ -54,42 +54,40 @@ const isInvalidFilterValue = value => {
   return value === "" || value === undefined || value.length === 0;
 };
 
-export default class FilterAndSortMenu extends React.Component {
-  constructor(props) {
-    super(props);
-    const selectedFilter = camelCase(getFilterMenuItems(props.dataType)[0]);
-    this.state = {
-      selectedFilter,
-      filterValue: "",
-      ...this.props.currentFilter
-    };
-  }
-  handleFilterChange = selectedFilter => {
-    const { filterValue } = this.state;
+const FilterAndSortMenu = ({
+  dataType,
+  togglePopover,
+  filterOn,
+  addFilters,
+  removeSingleFilter,
+  currentFilter
+}) => {
+  const [selectedFilter, setSelectedFilter] = useState(
+    currentFilter?.selectedFilter ?? camelCase(getFilterMenuItems(dataType)[0])
+  );
+  const [filterValue, setFilterValue] = useState(
+    currentFilter?.filterValue ?? ""
+  );
+
+  const handleFilterChange = selectedFilter => {
     if (
       filterValue &&
       !Array.isArray(filterValue) &&
       filterTypesDictionary[selectedFilter] === "list"
     ) {
-      this.setState({
-        filterValue: filterValue?.split(" ") || []
-      });
+      setFilterValue(filterValue?.split(" ") || []);
     } else if (
       filterTypesDictionary[selectedFilter] === "text" &&
       Array.isArray(filterValue)
     ) {
-      this.setState({
-        filterValue: filterValue.join(" ")
-      });
+      setFilterValue(filterValue.join(" "));
     }
-    this.setState({ selectedFilter: camelCase(selectedFilter) });
-  };
-  handleFilterValueChange = filterValue => {
-    this.setState({ filterValue });
+    setSelectedFilter(camelCase(selectedFilter));
   };
-  handleFilterSubmit = () => {
-    const { filterValue, selectedFilter } = this.state;
-    const { togglePopover, dataType } = this.props;
+
+  const handleFilterValueChange = filterValue => setFilterValue(filterValue);
+
+  const handleFilterSubmit = () => {
     const ccSelectedFilter = camelCase(selectedFilter);
     let filterValToUse = filterValue;
     if (ccSelectedFilter === "true" || ccSelectedFilter === "false") {
@@ -112,7 +110,6 @@ export default class FilterAndSortMenu extends React.Component {
       }
     }
 
-    const { filterOn, addFilters, removeSingleFilter } = this.props;
     if (isInvalidFilterValue(filterValToUse)) {
       togglePopover();
       return removeSingleFilter(filterOn);
@@ -126,76 +123,68 @@ export default class FilterAndSortMenu extends React.Component {
     ]);
     togglePopover();
   };
-  // handleSubmit(event) {
-  //   alert('A name was submitted: ' + this.state.value);
-  //   event.preventDefault();
-  // }
 
-  render() {
-    const { selectedFilter, filterValue } = this.state;
-    const { dataType, currentFilter, removeSingleFilter } = this.props;
-    const { handleFilterChange, handleFilterValueChange, handleFilterSubmit } =
-      this;
+  const filterMenuItems = getFilterMenuItems(dataType);
+  const ccSelectedFilter = camelCase(selectedFilter);
+  const requiresValue = ccSelectedFilter && ccSelectedFilter !== "none";
 
-    const filterMenuItems = getFilterMenuItems(dataType);
-    const ccSelectedFilter = camelCase(selectedFilter);
-    const requiresValue = ccSelectedFilter && ccSelectedFilter !== "none";
-
-    return (
-      <Menu className="data-table-header-menu">
-        <div className="custom-menu-item">
-          <div className={classNames(Classes.SELECT, Classes.FILL)}>
-            <select
-              onChange={function (e) {
-                const ccSelectedFilter = camelCase(e.target.value);
-                handleFilterChange(ccSelectedFilter);
-              }}
-              value={ccSelectedFilter}
-            >
-              {filterMenuItems.map(function (menuItem, index) {
-                return (
-                  <option key={index} value={camelCase(menuItem)}>
-                    {menuItem}
-                  </option>
-                );
-              })}
-            </select>
-          </div>
-        </div>
-        <div className="custom-menu-item">
-          <FilterInput
-            dataType={dataType}
-            requiresValue={requiresValue}
-            handleFilterSubmit={handleFilterSubmit}
-            filterValue={filterValue}
-            handleFilterValueChange={handleFilterValueChange}
-            filterSubType={camelCase(selectedFilter)}
-            filterType={filterTypesDictionary[camelCase(selectedFilter)]}
-          />
+  return (
+    <Menu className="data-table-header-menu">
+      <div className="custom-menu-item">
+        <div className={classNames(Classes.SELECT, Classes.FILL)}>
+          <select
+            onChange={function (e) {
+              const ccSelectedFilter = camelCase(e.target.value);
+              handleFilterChange(ccSelectedFilter);
+            }}
+            value={ccSelectedFilter}
+          >
+            {filterMenuItems.map(function (menuItem, index) {
+              return (
+                <option key={index} value={camelCase(menuItem)}>
+                  {menuItem}
+                </option>
+              );
+            })}
+          </select>
         </div>
-        <MenuDivider />
-        <DialogFooter
-          secondaryClassName={Classes.POPOVER_DISMISS}
-          onClick={() => {
-            handleFilterSubmit();
-          }}
-          intent={Intent.SUCCESS}
-          text="Filter"
-          secondaryText="Clear"
-          secondaryIntent={Intent.DANGER}
-          secondaryAction={() => {
-            currentFilter && removeSingleFilter(currentFilter.filterOn);
-          }}
+      </div>
+      <div className="custom-menu-item">
+        <FilterInput
+          dataType={dataType}
+          requiresValue={requiresValue}
+          handleFilterSubmit={handleFilterSubmit}
+          filterValue={filterValue}
+          handleFilterValueChange={handleFilterValueChange}
+          filterSubType={camelCase(selectedFilter)}
+          filterType={filterTypesDictionary[camelCase(selectedFilter)]}
         />
-      </Menu>
-    );
-  }
-}
+      </div>
+      <MenuDivider />
+      <DialogFooter
+        secondaryClassName={Classes.POPOVER_DISMISS}
+        onClick={() => {
+          handleFilterSubmit();
+        }}
+        intent={Intent.SUCCESS}
+        text="Filter"
+        secondaryText="Clear"
+        secondaryIntent={Intent.DANGER}
+        secondaryAction={() => {
+          if (currentFilter) removeSingleFilter(currentFilter.filterOn);
+        }}
+      />
+    </Menu>
+  );
+};
+
+export default FilterAndSortMenu;
 
 const dateMinMaxHelpers = {
   minDate: dayjs().subtract(25, "years").toDate(),
   maxDate: dayjs().add(25, "years").toDate()
 };
+
 const renderCreateNewOption = (query, active, handleClick) => (
   <MenuItem
     icon="add"
@@ -205,69 +194,28 @@ const renderCreateNewOption = (query, active, handleClick) => (
     shouldDismissPopover={false}
   />
 );
-class FilterInput extends React.Component {
-  render() {
-    const {
-      handleFilterValueChange,
-      handleFilterSubmit,
-      filterValue,
-      filterSubType,
-      filterType
-    } = this.props;
-    //Options: Text, Single number (before, after, equals), 2 numbers (range),
-    //Single Date (before, after, on), 2 dates (range)
-    let inputGroup = <div />;
-    switch (filterType) {
-      case "text":
-        inputGroup =
-          filterSubType === "notEmpty" || filterSubType === "isEmpty" ? (
-            <div />
-          ) : (
-            <div className="custom-menu-item">
-              <InputGroup
-                placeholder="Value"
-                onChange={function (e) {
-                  handleFilterValueChange(e.target.value);
-                }}
-                autoFocus
-                {...onEnterHelper(handleFilterSubmit)}
-                value={filterValue}
-              />
-            </div>
-          );
-        break;
-      case "list":
-        inputGroup = (
-          <div className="custom-menu-item">
-            <TgSelect
-              placeholder="Add item"
-              renderCreateNewOption={renderCreateNewOption}
-              noResults={null}
-              multi={true}
-              creatable={true}
-              value={(filterValue || []).map(val => ({
-                label: val,
-                value: val
-              }))}
-              onChange={selectedOptions => {
-                selectedOptions.some(opt => opt.value === "")
-                  ? handleFilterSubmit()
-                  : handleFilterValueChange(
-                      selectedOptions.map(opt => opt.value)
-                    );
-              }}
-              options={[]}
-            />
-          </div>
-        );
-        break;
-      case "number":
-        inputGroup = (
+
+const FilterInput = ({
+  handleFilterValueChange,
+  handleFilterSubmit,
+  filterValue,
+  filterSubType,
+  filterType
+}) => {
+  //Options: Text, Single number (before, after, equals), 2 numbers (range),
+  //Single Date (before, after, on), 2 dates (range)
+  let inputGroup = <div />;
+  switch (filterType) {
+    case "text":
+      inputGroup =
+        filterSubType === "notEmpty" || filterSubType === "isEmpty" ? (
+          <div />
+        ) : (
           <div className="custom-menu-item">
-            <NumericInput
+            <InputGroup
               placeholder="Value"
-              onValueChange={function (numVal) {
-                handleFilterValueChange(isNaN(numVal) ? 0 : numVal);
+              onChange={function (e) {
+                handleFilterValueChange(e.target.value);
               }}
               autoFocus
               {...onEnterHelper(handleFilterSubmit)}
@@ -275,94 +223,127 @@ class FilterInput extends React.Component {
             />
           </div>
         );
-        break;
-      case "numberRange":
-        inputGroup = (
-          <div className="custom-menu-item">
-            <NumericInput
-              placeholder="Low"
-              onValueChange={function (numVal) {
-                handleFilterValueChange([
-                  isNaN(numVal) ? 0 : numVal,
-                  filterValue[1]
-                ]);
-              }}
-              {...onEnterHelper(handleFilterSubmit)}
-              value={filterValue && filterValue[0]}
-            />
-            <NumericInput
-              placeholder="High"
-              onValueChange={function (numVal) {
-                handleFilterValueChange([
-                  filterValue[0],
-                  isNaN(numVal) ? 0 : numVal
-                ]);
-              }}
-              {...onEnterHelper(handleFilterSubmit)}
-              value={filterValue && filterValue[1]}
-            />
-          </div>
-        );
-        break;
-      case "date":
-        inputGroup = (
-          <div className="custom-menu-item">
-            <DateInput
-              value={filterValue ? dayjs(filterValue).toDate() : undefined}
-              {...getDayjsFormatter("L")}
-              {...dateMinMaxHelpers}
-              onChange={selectedDates => {
+      break;
+    case "list":
+      inputGroup = (
+        <div className="custom-menu-item">
+          <TgSelect
+            placeholder="Add item"
+            renderCreateNewOption={renderCreateNewOption}
+            noResults={null}
+            multi={true}
+            creatable={true}
+            value={(filterValue || []).map(val => ({
+              label: val,
+              value: val
+            }))}
+            onChange={selectedOptions => {
+              selectedOptions.some(opt => opt.value === "")
+                ? handleFilterSubmit()
+                : handleFilterValueChange(
+                    selectedOptions.map(opt => opt.value)
+                  );
+            }}
+            options={[]}
+          />
+        </div>
+      );
+      break;
+    case "number":
+      inputGroup = (
+        <div className="custom-menu-item">
+          <NumericInput
+            placeholder="Value"
+            onValueChange={function (numVal) {
+              handleFilterValueChange(isNaN(numVal) ? 0 : numVal);
+            }}
+            autoFocus
+            {...onEnterHelper(handleFilterSubmit)}
+            value={filterValue}
+          />
+        </div>
+      );
+      break;
+    case "numberRange":
+      inputGroup = (
+        <div className="custom-menu-item">
+          <NumericInput
+            placeholder="Low"
+            onValueChange={function (numVal) {
+              handleFilterValueChange([
+                isNaN(numVal) ? 0 : numVal,
+                filterValue[1]
+              ]);
+            }}
+            {...onEnterHelper(handleFilterSubmit)}
+            value={filterValue && filterValue[0]}
+          />
+          <NumericInput
+            placeholder="High"
+            onValueChange={function (numVal) {
+              handleFilterValueChange([
+                filterValue[0],
+                isNaN(numVal) ? 0 : numVal
+              ]);
+            }}
+            {...onEnterHelper(handleFilterSubmit)}
+            value={filterValue && filterValue[1]}
+          />
+        </div>
+      );
+      break;
+    case "date":
+      inputGroup = (
+        <div className="custom-menu-item">
+          <DateInput
+            value={filterValue ? dayjs(filterValue).toDate() : undefined}
+            {...getDayjsFormatter("L")}
+            {...dateMinMaxHelpers}
+            onChange={selectedDates => {
+              handleFilterValueChange(selectedDates);
+            }}
+          />
+        </div>
+      );
+      break;
+    case "dateRange":
+      // eslint-disable-next-line no-case-declarations
+      let filterValueToUse;
+      if (Array.isArray(filterValue)) {
+        filterValueToUse = filterValue;
+      } else {
+        filterValueToUse =
+          filterValue && filterValue.split && filterValue.split(";");
+      }
+      inputGroup = (
+        <div className="custom-menu-item">
+          <DateRangeInput
+            value={
+              filterValueToUse && filterValueToUse[0] && filterValueToUse[1]
+                ? [new Date(filterValueToUse[0]), new Date(filterValueToUse[1])]
+                : undefined
+            }
+            popoverProps={{
+              captureDismiss: true
+            }}
+            formatDate={date => (date == null ? "" : date.toLocaleDateString())}
+            parseDate={str => new Date(Date.parse(str))}
+            placeholder="JS Date"
+            {...dateMinMaxHelpers}
+            onChange={selectedDates => {
+              if (selectedDates[0] && selectedDates[1]) {
                 handleFilterValueChange(selectedDates);
-              }}
-            />
-          </div>
-        );
-        break;
-      case "dateRange":
-        // eslint-disable-next-line no-case-declarations
-        let filterValueToUse;
-        if (Array.isArray(filterValue)) {
-          filterValueToUse = filterValue;
-        } else {
-          filterValueToUse =
-            filterValue && filterValue.split && filterValue.split(";");
-        }
-        inputGroup = (
-          <div className="custom-menu-item">
-            <DateRangeInput
-              value={
-                filterValueToUse && filterValueToUse[0] && filterValueToUse[1]
-                  ? [
-                      new Date(filterValueToUse[0]),
-                      new Date(filterValueToUse[1])
-                    ]
-                  : undefined
               }
-              popoverProps={{
-                captureDismiss: true
-              }}
-              {...{
-                formatDate: date =>
-                  date == null ? "" : date.toLocaleDateString(),
-                parseDate: str => new Date(Date.parse(str)),
-                placeholder: "JS Date"
-              }}
-              {...dateMinMaxHelpers}
-              onChange={selectedDates => {
-                if (selectedDates[0] && selectedDates[1]) {
-                  handleFilterValueChange(selectedDates);
-                }
-              }}
-            />
-          </div>
-        );
-        break;
-      default:
-      // to do
-    }
-    return inputGroup;
+            }}
+          />
+        </div>
+      );
+      break;
+    default:
+    // to do
   }
-}
+  return inputGroup;
+};
 
 function getFilterMenuItems(dataType) {
   let filterMenuItems = [];

package/src/DataTable/PagingTool.js

@@ -1,11 +1,10 @@
-import React, { useState, useEffect, useRef } from "react";
-import { withProps, withHandlers, compose } from "recompose";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import classNames from "classnames";
 import { noop, get, toInteger } from "lodash-es";
 import { Button, Classes } from "@blueprintjs/core";
 import { onEnterOrBlurHelper } from "../utils/handlerHelpers";
 import { defaultPageSizes } from "./utils/queryParams";
-import getIdOrCodeOrIndex from "./utils/getIdOrCodeOrIndex";
+import { getIdOrCodeOrIndex } from "./utils";
 
 function PagingInput({ disabled, onBlur, defaultPage }) {
   const [page, setPage] = useState(defaultPage);
@@ -20,6 +19,7 @@ function PagingInput({ disabled, onBlur, defaultPage }) {
 
   return (
     <input
+      name="page"
       style={{
         marginLeft: 5,
         width: page > 999 ? 65 : page > 99 ? 45 : 35,
@@ -38,18 +38,51 @@ function PagingInput({ disabled, onBlur, defaultPage }) {
 
 // Define the functional component and its props
 const PagingTool = ({
-  onPageChange = noop,
-  onRefresh,
-  setPage,
-  setPageSize,
-  persistPageSize = noop,
-  paging: { pageSize, page, total },
-  hideTotalPages,
-  disabled,
   controlled_hasNextPage,
+  controlled_onRefresh,
+  controlled_page,
+  controlled_setPage,
+  controlled_setPageSize,
+  controlled_total,
+  disabled: _disabled,
   disableSetPageSize,
-  hideSetPageSize
+  entities,
+  entityCount,
+  hideSetPageSize,
+  hideTotalPages,
+  keepSelectionOnPageChange,
+  onRefresh: _onRefresh,
+  page: _page,
+  pageSize,
+  pagingDisabled,
+  persistPageSize = noop,
+  scrollToTop,
+  setPage: _setPage,
+  setPageSize: _setPageSize,
+  setSelectedEntityIdMap
 }) => {
+  const page = controlled_page || _page;
+  const total = controlled_total || entityCount;
+  const disabled = _disabled || pagingDisabled;
+  const onRefresh = controlled_onRefresh || _onRefresh;
+  const setPage = controlled_setPage || _setPage;
+  const setPageSize = controlled_setPageSize || _setPageSize;
+
+  const onPageChange = useCallback(() => {
+    const record = get(entities, "[0]");
+    if (
+      !keepSelectionOnPageChange &&
+      (!record || !getIdOrCodeOrIndex(record))
+    ) {
+      setSelectedEntityIdMap({});
+    }
+    scrollToTop();
+  }, [
+    entities,
+    keepSelectionOnPageChange,
+    scrollToTop,
+    setSelectedEntityIdMap
+  ]);
   // Define local state
   const [refetching, setRefetching] = useState(false);
 
@@ -128,6 +161,7 @@ const PagingTool = ({
           className={classNames(Classes.SELECT, Classes.MINIMAL)}
         >
           <select
+            name="page-size"
             className="paging-page-size"
             onChange={setPageSizeHandler}
             disabled={disabled || disableSetPageSize}
@@ -188,47 +222,4 @@ const PagingTool = ({
   );
 };
 
-export default compose(
-  withProps(props => {
-    const {
-      entityCount,
-      page,
-      pageSize,
-      disabled,
-      pagingDisabled,
-      onRefresh,
-      controlled_setPage,
-      controlled_setPageSize,
-      controlled_page,
-
-      controlled_total,
-      controlled_onRefresh,
-      setPage,
-      setPageSize
-    } = props;
-    return {
-      paging: {
-        total: controlled_total || entityCount,
-        page: controlled_page || page,
-        pageSize
-      },
-      disabled: disabled || pagingDisabled,
-      onRefresh: controlled_onRefresh || onRefresh,
-      setPage: controlled_setPage || setPage,
-      setPageSize: controlled_setPageSize || setPageSize
-    };
-  }),
-  withHandlers({
-    onPageChange:
-      ({ entities, keepSelectionOnPageChange, change }) =>
-      () => {
-        const record = get(entities, "[0]");
-        if (
-          !keepSelectionOnPageChange &&
-          (!record || !getIdOrCodeOrIndex(record))
-        ) {
-          change("reduxFormSelectedEntityIdMap", {});
-        }
-      }
-  })
-)(PagingTool);
+export default PagingTool;