@progressiveui/react 1.22.0

package/src/components/NumberInput/NumberInput.tsx

@@ -0,0 +1,215 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import useSettings from "../../hooks/useSettings";
+import Input, { InputProps } from "../Input";
+import useInput, { UseInputProps } from "../Input/useInput";
+
+interface NumberInputProps
+  extends InputProps,
+    Omit<React.ComponentPropsWithRef<"input">, "onChange" | "value"> {
+  /**
+   * The maximum value.
+   */
+  max?: string | number;
+  /**
+   * The minimum value.
+   */
+  min?: string | number;
+  /**
+   * Specify how much the valus should increase/decrease upon clicking on up/down button
+   */
+  step?: number;
+  /**
+   * `true` to allow empty string.
+   */
+  allowEmpty?: boolean;
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled?: boolean;
+  /**
+   * Specify a custom `id` for the input
+   */
+  id?: string;
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText?: string;
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel?: boolean;
+  /**
+   * Specify whether you want the up/down buttons to be hidden
+   */
+  hideControls?: boolean;
+  /**
+   * `true` to use the light version.
+   */
+  light?: boolean;
+  /**
+   * Specify the regular expression that the value should match using the html pattern attribute
+   */
+  pattern?: string;
+  /**
+   * The new value is available in 'imaginaryTarget.value'
+   * i.e. to get the value: evt.imaginaryTarget.value or in th second argument provided to the onChange prop
+   */
+  onChange?: (
+    evt?: React.ChangeEvent | any,
+    value?: number,
+    direction?: string
+  ) => void;
+  /**
+   * Provide an optional function to be called when the up/down button is clicked
+   */
+  onClick?: (
+    evt?: React.MouseEvent,
+    value?: number,
+    direction?: string
+  ) => void;
+  /**
+   * Specify the value of the input, if undefined or null the value is empty
+   */
+  value?: "" | number | string;
+}
+
+const countDecimals = (value: string) => {
+  const valueFloat = parseFloat(value);
+  if (Math.floor(valueFloat) === valueFloat) return 0;
+  return value.split(".")[1].length || 0;
+};
+
+const capMin = (min, value) =>
+  isNaN(min) || (!min && min !== 0) || isNaN(value) || (!value && value !== 0)
+    ? value
+    : Math.max(min, value);
+const capMax = (max, value) =>
+  isNaN(max) || (!max && max !== 0) || isNaN(value) || (!value && value !== 0)
+    ? value
+    : Math.min(max, value);
+
+/** The number input component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value */
+
+const NumberInput: React.FC<NumberInputProps> = React.forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      disabled,
+      id,
+      hideLabel,
+      hideControls,
+      max,
+      min,
+      step = 1,
+      onChange = () => {},
+      onClick = () => {},
+      helperText,
+      light,
+      //allowEmpty,
+      pattern = "[0-9]*",
+      // ...other
+    } = props;
+    const { prefix } = useSettings();
+
+    const initialValue = capMax(max, capMin(min, props.value));
+    const [value, setValue] = useState(initialValue);
+
+    useEffect(() => {
+      setValue(props.value);
+    }, [props.value]);
+
+    const newInputRef = useRef<HTMLInputElement>(null);
+    const _inputRef = ref ? ref : newInputRef;
+
+    const handleChange = (evt) => {
+      if (!disabled) {
+        evt.persist();
+        evt.imaginaryTarget = _inputRef;
+
+        setValue(evt.target.value);
+        onChange(evt, parseFloat(evt.target.value));
+      }
+    };
+
+    const handleArrowClick = (evt, direction) => {
+      let valueState = typeof value === "string" ? Number(value) : value;
+      valueState = isNaN(valueState) ? 0 : valueState;
+
+      const conditional =
+        direction === "down"
+          ? (min !== undefined && valueState > min) || min === undefined
+          : (max !== undefined && valueState < max) || max === undefined;
+
+      const stepString = step.toString();
+      valueState =
+        direction === "down"
+          ? valueState - step
+          : valueState + parseFloat(stepString);
+      valueState = capMax(max, capMin(min, valueState));
+      valueState = parseFloat(valueState.toFixed(countDecimals(stepString)));
+
+      if (!disabled && conditional) {
+        evt.persist();
+        evt.imaginaryTarget = _inputRef;
+        evt.target.value = parseFloat(valueState);
+        onClick(evt, direction);
+        setValue(valueState);
+        onChange(evt, valueState, direction);
+      }
+    };
+
+    const numberInputClasses = classNames(`${prefix}--number`, className, {
+      [`${prefix}--number--light`]: light,
+      [`${prefix}--number--helpertext`]: helperText,
+      [`${prefix}--number--nolabel`]: hideLabel,
+      [`${prefix}--number--nocontrols`]: hideControls,
+    });
+
+    const newProps = {
+      disabled,
+      id,
+      max,
+      min,
+      step,
+      onChange: handleChange,
+      value: value,
+    };
+
+    const useInputProps = props as UseInputProps;
+    const { inputProps, wrapperProps } = useInput({
+      ...useInputProps,
+      type: "number",
+    });
+
+    return (
+      <Input {...wrapperProps} inputWrapperClassName={numberInputClasses}>
+        <div className={`${prefix}--number__controls`}>
+          <button
+            className={`${prefix}--number__control-btn up-icon`}
+            type="button"
+            disabled={disabled}
+            onClick={(evt) => handleArrowClick(evt, "up")}
+          >
+            +
+          </button>
+          <button
+            className={`${prefix}--number__control-btn down-icon`}
+            type="button"
+            disabled={disabled}
+            onClick={(evt) => handleArrowClick(evt, "down")}
+          >
+            −
+          </button>
+          <input pattern={pattern} {...inputProps} {...newProps} ref={ref} />
+        </div>
+      </Input>
+    );
+  }
+);
+
+NumberInput.displayName = "NumberInput";
+
+export default NumberInput;

package/src/components/NumberInput/README.mdx

@@ -0,0 +1,16 @@
+## Usage
+
+**NumberInput** are used to let the user enter a number. They include built-in validation to reject non-numerical entries. They provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.
+
+- Enable the user to also choose to type a number in the field.
+- Ensure that a default value is shown within the field.
+- Use a clear and concise label for the number input.
+- Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) for the label.
+
+#### When not to use
+
+- Do not use number inputs when large value changes are expected. They work best for making small, incremental changes that require only a few clicks.
+
+## Reference
+
+[Carbon Design System Usage for number input](https://www.carbondesignsystem.com/components/number-input/usage)

package/src/components/NumberInput/index.ts

@@ -0,0 +1,2 @@
+export * from './NumberInput.Skeleton';
+export { default } from './NumberInput';

package/src/components/Pagination/Pagination-fc.js

@@ -0,0 +1,217 @@
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+import classnames from "classnames";
+import { ChevronLeft, ChevronRight } from "@progressiveui/icons-react";
+import Select from "../Select";
+import SelectItem from "../SelectItem";
+import { equals } from "../../tools/array";
+
+let instanceId = 0;
+
+function Pagination(props) {
+  const {
+    backwardText,
+    className,
+    forwardText,
+    id,
+    itemsPerPageText,
+    itemsPerPageFollowsText,
+    itemRangeText,
+    pageRangeText,
+    pageSize,
+    pageSizesDisabled,
+    pageSizes,
+    itemText,
+    pageText,
+    pageNumberText,
+    pagesUnknown,
+    isLastPage,
+    pageInputDisabled,
+    totalItems,
+    onChange,
+    page: pageNumber,
+    ...other
+  } = props;
+
+  const [page, setPage] = useState(pageNumber);
+  const [pageSizeState, setPageSize] = useState(
+    props.pageSize ? props.pageSize : pageSizes[0]
+  );
+  const uniqueId = useState(() => ++instanceId)[0];
+
+  const handleSizeChange = (evt) => {
+    const pageSize = Number(evt.target.value);
+    setPage(1);
+    setPageSize(pageSize);
+    onChange({ page: 1, pageSize });
+  };
+
+  const handlePageChange = (evt) => {
+    setPage(evt.target.value);
+  };
+
+  const handlePageInputChange = (evt) => {
+    const page = Number(evt.target.value);
+    if (
+      page > 0 &&
+      page <= Math.max(Math.ceil(totalItems / pageSizeState), 1)
+    ) {
+      setPage(page);
+      onChange({ page, pageSize: pageSizeState });
+    }
+  };
+
+  const incrementPage = () => {
+    const newPage = page + 1;
+    setPage(newPage);
+    onChange({ page: newPage, pageSize: pageSizeState });
+  };
+
+  const decrementPage = () => {
+    const newPage = page - 1;
+    setPage(newPage);
+    onChange({ page: newPage, pageSize: pageSizeState });
+  };
+
+  const renderSelectItems = (total) => {
+    let counter = 1;
+    let itemArr = [];
+    while (counter <= total) {
+      itemArr.push(
+        <SelectItem key={counter} value={counter} text={String(counter)} />
+      );
+      counter++;
+    }
+    return itemArr;
+  };
+
+  const classNames = classnames("wfp--pagination", className);
+  const backButtonClasses = classnames(
+    "wfp--pagination__button",
+    "wfp--pagination__button--backward",
+    {
+      "wfp--pagination__button--no-index": pageInputDisabled,
+    }
+  );
+  const inputId = id || uniqueId;
+  const totalPages = Math.max(Math.ceil(totalItems / pageSizeState), 1);
+  const selectItems = renderSelectItems(totalPages);
+
+  return (
+    <div className={classNames} {...other}>
+      <div className="wfp--pagination__left">
+        {!pageSizesDisabled && (
+          <React.Fragment>
+            <span className="wfp--pagination__text">
+              {itemsPerPageFollowsText || itemsPerPageText}
+            </span>
+            <Select
+              id={`wfp-pagination-select-${inputId}`}
+              labelText={itemsPerPageText}
+              hideLabel
+              inline
+              onChange={handleSizeChange}
+              value={pageSizeState}
+            >
+              {pageSizes.map((size) => (
+                <SelectItem key={size} value={size} text={String(size)} />
+              ))}
+            </Select>
+            <span className="wfp--pagination__text">
+              {" "}
+              &nbsp;&nbsp;|&nbsp;&nbsp;
+            </span>
+          </React.Fragment>
+        )}
+        <span className="wfp--pagination__text">
+          {pagesUnknown
+            ? itemText(pageSizeState * (page - 1) + 1, page * pageSizeState)
+            : itemRangeText(
+                Math.min(pageSizeState * (page - 1) + 1, totalItems),
+                Math.min(page * pageSizeState, totalItems),
+                totalItems
+              )}
+        </span>
+      </div>
+      <div className="wfp--pagination__right wfp--pagination--inline">
+        <span className="wfp--pagination__text">
+          {pagesUnknown ? pageText(page) : pageRangeText(page, totalPages)}
+        </span>
+        <button
+          className={backButtonClasses}
+          onClick={decrementPage}
+          disabled={props.disabled || page === 1}
+        >
+          <ChevronLeft
+            className="wfp--pagination__button-icon"
+            description={backwardText}
+          />
+        </button>
+        {pageInputDisabled ? null : (
+          <Select
+            id={`wfp-pagination-select-${inputId + 2}`}
+            labelText={itemsPerPageText}
+            hideLabel
+            inline
+            onChange={handlePageInputChange}
+            value={page}
+          >
+            {selectItems}
+          </Select>
+        )}
+        <button
+          className="wfp--pagination__button wfp--pagination__button--forward"
+          onClick={incrementPage}
+          disabled={props.disabled || page === totalPages || isLastPage}
+        >
+          <ChevronRight
+            className="wfp--pagination__button-icon"
+            description={forwardText}
+          />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+Pagination.propTypes = {
+  backwardText: PropTypes.string,
+  className: PropTypes.string,
+  itemRangeText: PropTypes.func,
+  forwardText: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  itemsPerPageText: PropTypes.string,
+  itemsPerPageFollowsText: PropTypes.string,
+  itemText: PropTypes.func,
+  onChange: PropTypes.func,
+  pageRangeText: PropTypes.func,
+  pageText: PropTypes.func,
+  pageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+  pageSizesDisabled: PropTypes.bool,
+  totalItems: PropTypes.number,
+  disabled: PropTypes.bool,
+  page: PropTypes.number,
+  pageSize: PropTypes.number,
+  pagesUnknown: PropTypes.bool,
+  isLastPage: PropTypes.bool,
+  pageInputDisabled: PropTypes.bool,
+};
+
+Pagination.defaultProps = {
+  backwardText: "Backward",
+  itemRangeText: (min, max, total) => `${min}-${max} of ${total} items`,
+  forwardText: "Forward",
+  itemsPerPageText: "Items per page:",
+  pageNumberText: "Page Number",
+  pageRangeText: (current, total) => `${current} of ${total} pages`,
+  disabled: false,
+  page: 1,
+  pagesUnknown: false,
+  pageSizes: [10, 20, 50],
+  isLastPage: false,
+  pageInputDisabled: false,
+  itemText: (min, max) => `${min}-${max} items`,
+  pageText: (page) => `page ${page}`,
+};
+
+export default Pagination;