@teselagen/ui 0.0.9 → 0.0.12

package/src/DataTable/FilterAndSortMenu.js

@@ -0,0 +1,397 @@
+import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
+import { camelCase } from "lodash";
+import classNames from "classnames";
+import React from "react";
+import {
+  Menu,
+  Intent,
+  MenuDivider,
+  InputGroup,
+  Classes,
+  NumericInput,
+  MenuItem
+} from "@blueprintjs/core";
+import dayjs from "dayjs";
+
+import getDayjsFormatter from "../utils/getDayjsFormatter";
+import { onEnterHelper } from "../utils/handlerHelpers";
+import DialogFooter from "../DialogFooter";
+import TgSelect from "../TgSelect";
+import "@teselagen/react-table/react-table.css";
+import "./style.css";
+import "../toastr";
+
+const isInvalidFilterValue = value => {
+  if (Array.isArray(value) && value.length) {
+    return value.some(item => isInvalidFilterValue(item));
+  }
+  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 => {
+    this.setState({ selectedFilter: camelCase(selectedFilter) });
+  };
+  handleFilterValueChange = filterValue => {
+    this.setState({ filterValue });
+  };
+  handleFilterSubmit = () => {
+    const { filterValue, selectedFilter } = this.state;
+    const { togglePopover, dataType } = this.props;
+    const ccSelectedFilter = camelCase(selectedFilter);
+    let filterValToUse = filterValue;
+    if (ccSelectedFilter === "true" || ccSelectedFilter === "false") {
+      //manually set the filterValue because none is set when type=boolean
+      filterValToUse = ccSelectedFilter;
+    } else if (ccSelectedFilter === "notEmpty") {
+      // manually set filter value (nothing is selected by user)
+      filterValToUse = true;
+    } else if (ccSelectedFilter === "isEmpty") {
+      // manually set filter value (nothing is selected by user)
+      filterValToUse = false;
+    } else if (
+      ccSelectedFilter === "inList" ||
+      ccSelectedFilter === "notInList"
+    ) {
+      if (dataType === "number") {
+        filterValToUse =
+          filterValue &&
+          filterValue.map(val => parseFloat(val.replaceAll(",", "")));
+      }
+    }
+
+    const { filterOn, addFilters, removeSingleFilter } = this.props;
+    if (isInvalidFilterValue(filterValToUse)) {
+      togglePopover();
+      return removeSingleFilter(filterOn);
+    }
+    addFilters([
+      {
+        filterOn,
+        selectedFilter: ccSelectedFilter,
+        filterValue: filterValToUse
+      }
+    ]);
+    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 filterTypesDictionary = {
+      none: "",
+      startsWith: "text",
+      endsWith: "text",
+      contains: "text",
+      notContains: "text",
+      isExactly: "text",
+      isEmpty: "text",
+      notEmpty: "text",
+      inList: "list",
+      notInList: "list",
+      true: "boolean",
+      false: "boolean",
+      dateIs: "date",
+      notBetween: "dateRange",
+      isBetween: "dateRange",
+      isBefore: "date",
+      isAfter: "date",
+      greaterThan: "number",
+      lessThan: "number",
+      inRange: "numberRange",
+      outsideRange: "numberRange",
+      equalTo: "number",
+      regex: "text"
+    };
+    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)]}
+          />
+        </div>
+        <MenuDivider />
+        <DialogFooter
+          secondaryClassName={Classes.POPOVER_DISMISS}
+          onClick={() => {
+            handleFilterSubmit();
+          }}
+          intent={Intent.SUCCESS}
+          text="Filter"
+          secondaryText="Clear"
+          secondaryAction={() => {
+            currentFilter && removeSingleFilter(currentFilter.filterOn);
+          }}
+        />
+      </Menu>
+    );
+  }
+}
+
+const dateMinMaxHelpers = {
+  minDate: dayjs()
+    .subtract(25, "years")
+    .toDate(),
+  maxDate: dayjs()
+    .add(25, "years")
+    .toDate()
+};
+const renderCreateNewOption = (query, active, handleClick) => (
+  <MenuItem
+    icon="add"
+    text={query}
+    active={active}
+    onClick={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 = (
+          <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;
+      default:
+      // to do
+    }
+    return inputGroup;
+  }
+}
+
+function getFilterMenuItems(dataType) {
+  let filterMenuItems = [];
+  if (dataType === "string") {
+    filterMenuItems = [
+      "Contains",
+      "Not Contains",
+      "Starts With",
+      "Ends With",
+      "Is Exactly",
+      "Regex",
+      "In List",
+      "Not In List",
+      "Is Empty",
+      "Not Empty"
+    ];
+  } else if (dataType === "lookup") {
+    filterMenuItems = [
+      "Contains",
+      "Not Contains",
+      "Starts With",
+      "Ends With",
+      "Is Exactly",
+      "Regex"
+    ];
+  } else if (dataType === "boolean") {
+    filterMenuItems = ["True", "False"];
+  } else if (dataType === "number" || dataType === "integer") {
+    // else if (dataType === "lookup") {
+    //   filterMenuItems = ["None"];
+    // }
+    filterMenuItems = [
+      "Greater Than",
+      "Less Than",
+      "In Range",
+      "Outside Range",
+      "Equal To",
+      "In List",
+      "Not In List"
+    ];
+  } else if (dataType === "timestamp") {
+    filterMenuItems = ["Is Between", "Not Between", "Is Before", "Is After"];
+  }
+  return filterMenuItems;
+}

package/src/DataTable/PagingTool.js

@@ -0,0 +1,232 @@
+import React, { useState, useEffect, useRef } from "react";
+import { withProps, withHandlers, compose } from "recompose";
+import classNames from "classnames";
+import { noop, get, toInteger } from "lodash";
+import { Button, Classes } from "@blueprintjs/core";
+import { onEnterOrBlurHelper } from "../utils/handlerHelpers";
+import { defaultPageSizes } from "./utils/queryParams";
+import getIdOrCodeOrIndex from "./utils/getIdOrCodeOrIndex";
+
+function PagingInput({ disabled, onBlur, defaultPage }) {
+  const [page, setPage] = useState(defaultPage);
+  const defaultValue = useRef(defaultPage);
+
+  useEffect(() => {
+    if (page !== defaultPage && defaultValue.current !== defaultPage) {
+      setPage(defaultPage);
+    }
+    defaultValue.current = defaultPage;
+  }, [page, defaultPage]);
+
+  return (
+    <input
+      style={{
+        marginLeft: 5,
+        width: page > 999 ? 65 : page > 99 ? 45 : 35,
+        marginRight: 8
+      }}
+      value={page}
+      disabled={disabled}
+      onChange={e => {
+        setPage(e.target.value);
+      }}
+      {...onEnterOrBlurHelper(onBlur)}
+      className={Classes.INPUT}
+    />
+  );
+}
+
+// Define the functional component and its props
+const PagingTool = ({
+  onPageChange = noop,
+  onRefresh,
+  setPage,
+  setPageSize,
+  persistPageSize = noop,
+  paging: { pageSize, page, total },
+  hideTotalPages,
+  disabled,
+  controlled_hasNextPage,
+  disableSetPageSize,
+  hideSetPageSize
+}) => {
+  // Define local state
+  const [refetching, setRefetching] = useState(false);
+
+  // Initialize additional page sizes
+  useEffect(() => {
+    const additionalPageSize =
+      window.frontEndConfig && window.frontEndConfig.additionalPageSize
+        ? [toInteger(window.frontEndConfig.additionalPageSize)]
+        : [];
+    window.tgPageSizes = [...defaultPageSizes, ...additionalPageSize];
+  }, []);
+
+  // Define event handlers for the component
+  const onRefreshHandler = async () => {
+    setRefetching(true);
+    await onRefresh();
+    setRefetching(false);
+  };
+
+  const setPageHandler = page => {
+    setPage(page);
+    onPageChange(page);
+  };
+
+  const setPageSizeHandler = e => {
+    const newPageSize = parseInt(e.target.value, 10);
+    setPageSize(newPageSize);
+    persistPageSize(newPageSize);
+  };
+
+  const pageBackHandler = () => {
+    setPageHandler(parseInt(page, 10) - 1);
+  };
+
+  const pageForwardHandler = () => {
+    setPageHandler(parseInt(page, 10) + 1);
+  };
+
+  const pageInputBlurHandler = e => {
+    const lastPage = Math.ceil(total / pageSize);
+    const pageValue = parseInt(e.target.value, 10);
+    const selectedPage =
+      pageValue > lastPage
+        ? lastPage
+        : pageValue < 1 || isNaN(pageValue)
+        ? 1
+        : pageValue;
+    setPageHandler(selectedPage);
+  };
+
+  // Define rendering logic
+  const pageStart = (page - 1) * pageSize + 1;
+  if (pageStart < 0) throw new Error("We should never have page be <0");
+  const backEnabled = page - 1 > 0;
+  const forwardEnabled = page * pageSize < total;
+  const lastPage = Math.ceil(total / pageSize);
+  const options = [...(window.tgPageSizes || defaultPageSizes)];
+  if (!options.includes(pageSize)) {
+    options.push(pageSize);
+  }
+
+  return (
+    <div className="paging-toolbar-container">
+      {onRefresh && (
+        <Button
+          minimal
+          loading={refetching}
+          icon="refresh"
+          disabled={disabled}
+          onClick={onRefreshHandler}
+        />
+      )}
+      {!hideSetPageSize && (
+        <div
+          title="Set Page Size"
+          className={classNames(Classes.SELECT, Classes.MINIMAL)}
+        >
+          <select
+            className="paging-page-size"
+            onChange={setPageSizeHandler}
+            disabled={disabled || disableSetPageSize}
+            value={pageSize}
+          >
+            {[
+              <option key="page-size-placeholder" disabled value="fake">
+                Size
+              </option>,
+              ...options.map(size => {
+                return (
+                  <option key={size} value={size}>
+                    {size}
+                  </option>
+                );
+              })
+            ]}
+          </select>
+        </div>
+      )}
+      <Button
+        onClick={pageBackHandler}
+        disabled={!backEnabled || disabled}
+        minimal
+        className="paging-arrow-left"
+        icon="chevron-left"
+      />
+      <div>
+        {hideTotalPages ? (
+          page
+        ) : total ? (
+          <div>
+            <PagingInput
+              disabled={disabled}
+              onBlur={pageInputBlurHandler}
+              defaultPage={page}
+              lastPage={lastPage}
+            />
+            of {lastPage}
+          </div>
+        ) : (
+          "No Rows"
+        )}
+      </div>
+      <Button
+        style={{ marginLeft: 5 }}
+        disabled={
+          (controlled_hasNextPage === undefined
+            ? !forwardEnabled
+            : !controlled_hasNextPage) || disabled
+        }
+        icon="chevron-right"
+        minimal
+        className="paging-arrow-right"
+        onClick={pageForwardHandler}
+      />
+    </div>
+  );
+};
+
+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);

package/src/DataTable/SearchBar.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { Button, Classes, Spinner } from "@blueprintjs/core";
+import classNames from "classnames";
+import { onEnterHelper } from "../utils/handlerHelpers";
+import { InputField } from "../FormComponents";
+
+const SearchBar = ({
+  reduxFormSearchInput,
+  setSearchTerm,
+  loading,
+  searchMenuButton,
+  disabled,
+  autoFocusSearch
+}) => {
+  let rightElement;
+  // need to always render searchMenuButton so it doesn't close
+  if (searchMenuButton) {
+    rightElement = (
+      <div style={{ display: "flex" }}>
+        {loading && <Spinner size="18" />}
+        {searchMenuButton}
+      </div>
+    );
+  } else {
+    rightElement = loading ? (
+      <Spinner size="18" />
+    ) : (
+      <Button
+        minimal
+        icon="search"
+        onClick={() => {
+          setSearchTerm(reduxFormSearchInput);
+        }}
+      />
+    );
+  }
+  return (
+    <InputField
+      autoFocus={autoFocusSearch}
+      disabled={disabled}
+      loading={loading}
+      type="search"
+      name="reduxFormSearchInput"
+      className={classNames("datatable-search-input", Classes.ROUND)}
+      placeholder="Search..."
+      {...onEnterHelper(e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setSearchTerm(reduxFormSearchInput);
+        e.nativeEvent.stopImmediatePropagation();
+      })}
+      rightElement={rightElement}
+    />
+  );
+};
+
+export default SearchBar;