@progressiveui/react 1.22.0

package/src/components/NumberInput/NumberInput.js.legacy

@@ -0,0 +1,255 @@
+import PropTypes from 'prop-types';
+import React, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+import Input from '../Input';
+
+function PropTypeEmptyString(props, propName, componentName) {
+  componentName = componentName || 'ANONYMOUS';
+  if (props[propName]) {
+    let value = props[propName];
+    if (typeof value === 'string' && value !== '') {
+      return new Error(
+        propName + ' in ' + componentName + ' is not an empty string'
+      );
+    }
+  }
+  return null;
+}
+
+const countDecimals = (value) => {
+  if (Math.floor(value) === value) 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.forwardRef((props, ref) => {
+  const {
+    additional,
+    className,
+    disabled,
+    formItemClassName,
+    id,
+    hideLabel,
+    hideControls,
+    labelText,
+    max,
+    min,
+    step = 1,
+    invalid,
+    invalidText,
+    onChange = () => {},
+    onClick = () => {},
+    helperText,
+    light,
+    allowEmpty,
+    inputRef = ref,
+    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(null);
+  var _inputRef = inputRef ? inputRef : 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;
+
+    valueState =
+      direction === 'down' ? valueState - step : valueState + parseFloat(step);
+    valueState = capMax(max, capMin(min, valueState));
+    valueState = parseFloat(valueState.toFixed(countDecimals(step)));
+
+    if (!disabled && conditional) {
+      evt.persist();
+      evt.imaginaryTarget = _inputRef;
+      evt.target.value = parseFloat(valueState);
+      onClick(evt, direction);
+      setValue(valueState);
+      onChange(valueState, evt, 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 buttonProps = {
+    disabled,
+    type: 'button',
+  };
+
+  return (
+    <Input {...props} formItemClassName={numberInputClasses}>
+      {() => {
+        return (
+          <div className={`${prefix}--number__controls`}>
+            <button
+              className={`${prefix}--number__control-btn up-icon`}
+              {...buttonProps}
+              onClick={(evt) => handleArrowClick(evt, 'up')}>
+              +
+            </button>
+            <button
+              className={`${prefix}--number__control-btn down-icon`}
+              {...buttonProps}
+              onClick={(evt) => handleArrowClick(evt, 'down')}>
+              −
+            </button>
+            <input
+              type="number"
+              pattern={pattern}
+              {...other}
+              {...newProps}
+              ref={_inputRef}
+            />
+          </div>
+        );
+      }}
+    </Input>
+  );
+});
+
+NumberInput.propTypes = {
+  /**
+   * Specify an optional className to be applied to the wrapper node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify an optional className to be applied to the form-item node
+   */
+  formItemClassName: PropTypes.string,
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  labelText: PropTypes.node,
+
+  /**
+   * The maximum value.
+   */
+  max: PropTypes.number,
+
+  /**
+   * The minimum value.
+   */
+  min: PropTypes.number,
+
+  /**
+   * The new value is available in 'imaginaryTarget.value'
+   * i.e. to get the value: evt.imaginaryTarget.value
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide an optional function to be called when the up/down button is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify how much the valus should increase/decrease upon clicking on up/down button
+   */
+  step: PropTypes.number,
+
+  /**
+   * Specify the value of the input, if undefined or null the value is empty
+   */
+  value: PropTypes.oneOfType([PropTypeEmptyString, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently invalid.
+   * Either a boolean in combination with `invalidText` or an `object`( eg. { message: "Message", …otherErrorProperties }) can be passed.
+   */
+  invalid: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /**
+   * Provide additional component that is used alongside the input for customization
+   */
+  additional: PropTypes.node,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: PropTypes.bool,
+
+  /**
+   * `true` to allow empty string.
+   */
+  allowEmpty: PropTypes.bool,
+};
+
+export default NumberInput;

package/src/components/NumberInput/NumberInput.legacy.js

@@ -0,0 +1,330 @@
+// import PropTypes from 'prop-types';
+// import React, { Component } from 'react';
+// import { iconCaretUp, iconCaretDown } from '@progressiveui/icons-react';
+// import Icon from '../Icon';
+// import FormItem from '../FormItem';
+// import classNames from 'classnames';
+// import useSettings from '../../hooks/useSettings';
+// const { prefix } = useSettings();
+
+// function PropTypeEmptyString(props, propName, componentName) {
+//   componentName = componentName || 'ANONYMOUS';
+//   if (props[propName]) {
+//     let value = props[propName];
+//     if (typeof value === 'string' && value !== '') {
+//       return new Error(
+//         propName + ' in ' + componentName + ' is not an empty string'
+//       );
+//     }
+//   }
+//   return null;
+// }
+
+// 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);
+
+// export default class NumberInput extends Component {
+//   constructor(props) {
+//     super(props);
+
+//     const value = capMax(props.max, capMin(props.min, props.value));
+//     this.state = { value };
+//   }
+
+//   static propTypes = {
+//     /**
+//      * Specify an optional className to be applied to the wrapper node
+//      */
+//     className: PropTypes.string,
+
+//     /**
+//      * Specify an optional className to be applied to the form-item node
+//      */
+//     formItemClassName: PropTypes.string,
+
+//     /**
+//      * Specify if the control should be disabled, or not
+//      */
+//     disabled: PropTypes.bool,
+
+//     /**
+//      * Specify whether you want the underlying label to be visually hidden
+//      */
+//     hideLabel: PropTypes.bool,
+
+//     /**
+//      * Provide a description for up/down icons that can be read by screen readers
+//      */
+//     iconDescription: PropTypes.string.isRequired,
+
+//     /**
+//      * Specify a custom `id` for the input
+//      */
+//     id: PropTypes.string.isRequired,
+
+//     /**
+//      * Generic `label` that will be used as the textual representation of what
+//      * this field is for
+//      */
+//     labelText: PropTypes.node,
+
+//     /**
+//      * The maximum value.
+//      */
+//     max: PropTypes.number,
+
+//     /**
+//      * The minimum value.
+//      */
+//     min: PropTypes.number,
+
+//     /**
+//      * The new value is available in 'imaginaryTarget.value'
+//      * i.e. to get the value: evt.imaginaryTarget.value
+//      */
+//     onChange: PropTypes.func,
+
+//     /**
+//      * Provide an optional function to be called when the up/down button is clicked
+//      */
+//     onClick: PropTypes.func,
+
+//     /**
+//      * Specify how much the valus should increase/decrease upon clicking on up/down button
+//      */
+//     step: PropTypes.number,
+
+//     /**
+//      * Specify the value of the input, if undefined or null the value is empty
+//      */
+//     value: PropTypes.oneOfType([PropTypeEmptyString, PropTypes.number]),
+
+//     /**
+//      * Specify whether the control is currently invalid.
+//      * Either a boolean in combination with `invalidText` or an `object`( eg. { message: "Message", …otherErrorProperties }) can be passed.
+//      */
+//     invalid: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+
+//     /**
+//      * Message which is displayed if the value is invalid.
+//      */
+//     invalidText: PropTypes.string,
+
+//     /**
+//      * Provide additional component that is used alongside the input for customization
+//      */
+//     additional: PropTypes.node,
+
+//     /**
+//      * Provide text that is used alongside the control label for additional help
+//      */
+//     helperText: PropTypes.node,
+
+//     /**
+//      * `true` to use the light version.
+//      */
+//     light: PropTypes.bool,
+
+//     /**
+//      * `true` to allow empty string.
+//      */
+//     allowEmpty: PropTypes.bool,
+//   };
+
+//   static defaultProps = {
+//     disabled: false,
+//     hideLabel: false,
+//     iconDescription: 'choose a number',
+//     labelText: ' ',
+//     onChange: () => {},
+//     onClick: () => {},
+//     step: 1,
+//     value: undefined,
+//     invalid: false,
+//     invalidText: 'Provide invalidText',
+//     helperText: '',
+//     light: false,
+//     allowEmpty: true,
+//   };
+
+//   /**
+//    * The DOM node refernce to the `<input>`.
+//    * @type {HTMLInputElement}
+//    */
+//   _inputRef = null;
+
+//   static getDerivedStateFromProps({ min, max, value = 0 }, state) {
+//     const { prevValue } = state;
+//     return prevValue === value
+//       ? null
+//       : {
+//           value: capMax(max, capMin(min, value)),
+//           prevValue: value,
+//         };
+//   }
+
+//   handleChange = (evt) => {
+//     if (!this.props.disabled) {
+//       evt.persist();
+//       evt.imaginaryTarget = this._inputRef;
+//       this.setState(
+//         {
+//           value: evt.target.value,
+//         },
+//         () => {
+//           this.props.onChange(evt);
+//         }
+//       );
+//     }
+//   };
+
+//   handleArrowClick = (evt, direction) => {
+//     let value =
+//       typeof this.state.value === 'string'
+//         ? Number(this.state.value)
+//         : this.state.value;
+//     const { disabled, min, max, step } = this.props;
+//     const conditional =
+//       direction === 'down'
+//         ? (min !== undefined && value > min) || min === undefined
+//         : (max !== undefined && value < max) || max === undefined;
+
+//     if (!disabled && conditional) {
+//       value = direction === 'down' ? value - step : value + step;
+//       evt.persist();
+//       evt.imaginaryTarget = this._inputRef;
+//       this.setState(
+//         {
+//           value,
+//         },
+//         () => {
+//           this.props.onClick(evt, direction);
+//           this.props.onChange(value, evt, direction);
+//         }
+//       );
+//     }
+//   };
+
+//   /**
+//    * Preserves the DOM node ref of `<input>`.
+//    * @param {HTMLInputElement} ref The DOM node ref of `<input>`.
+//    */
+//   _handleInputRef = (ref) => {
+//     this._inputRef = ref;
+//   };
+
+//   render() {
+//     const {
+//       additional,
+//       className,
+//       disabled,
+//       formItemClassName,
+//       iconDescription, // eslint-disable-line
+//       id,
+//       hideLabel,
+//       labelText,
+//       max,
+//       min,
+//       step,
+//       invalid,
+//       invalidText,
+//       helperText,
+//       light,
+//       allowEmpty,
+//       ...other
+//     } = this.props;
+
+//     const numberInputClasses = classNames(`${prefix}--number`, className, {
+//       [`${prefix}--number--light`]: light,
+//       [`${prefix}--number--helpertext`]: helperText,
+//       [`${prefix}--number--nolabel`]: hideLabel,
+//     });
+
+//     const props = {
+//       disabled,
+//       id,
+//       max,
+//       min,
+//       step,
+//       onChange: this.handleChange,
+//       value: this.state.value,
+//     };
+
+//     const buttonProps = {
+//       disabled,
+//       type: 'button',
+//     };
+
+//     const inputWrapperProps = {};
+//     let error = null;
+//     if (invalid || (!allowEmpty && this.state.value === '')) {
+//       inputWrapperProps['data-invalid'] = true;
+//       error = (
+//         <div className={`${prefix}--form-requirement`}>{invalidText}</div>
+//       );
+//     }
+
+//     const helper = helperText ? (
+//       <div className={`${prefix}--form__helper-text`}>{helperText}</div>
+//     ) : null;
+
+//     const labelClasses = classNames(`${prefix}--label`, {
+//       [`${prefix}--visually-hidden`]: hideLabel,
+//       [`${prefix}--label--disabled`]: other.disabled,
+//     });
+
+//     const labelTextComponent = labelText ? (
+//       <label htmlFor={id} className={labelClasses}>
+//         {labelText}
+//       </label>
+//     ) : null;
+
+//     return (
+//       <FormItem className={formItemClassName}>
+//         <div className={numberInputClasses} {...inputWrapperProps}>
+//           <div className={`${prefix}--number__controls`}>
+//             <button
+//               className={`${prefix}--number__control-btn up-icon`}
+//               {...buttonProps}
+//               onClick={(evt) => this.handleArrowClick(evt, 'up')}>
+//               <Icon
+//                 className="up-icon"
+//                 icon={iconCaretUp}
+//                 description={this.props.iconDescription}
+//                 viewBox="0 0 10 5"
+//               />
+//             </button>
+//             <button
+//               className={`${prefix}--number__control-btn down-icon`}
+//               {...buttonProps}
+//               onClick={(evt) => this.handleArrowClick(evt, 'down')}>
+//               <Icon
+//                 className="down-icon"
+//                 icon={iconCaretDown}
+//                 viewBox="0 0 10 5"
+//                 description={this.props.iconDescription}
+//               />
+//             </button>
+//           </div>
+//           {labelTextComponent}
+//           {additional}
+//           <input
+//             type="number"
+//             pattern="[0-9]*"
+//             {...other}
+//             {...props}
+//             ref={this._handleInputRef}
+//           />
+//           {error}
+//           {helper}
+//         </div>
+//       </FormItem>
+//     );
+//   }
+// }

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import markdown from "./README.mdx";
+import NumberInput from ".";
+
+export default {
+  title: "Components/Forms/NumberInput",
+  component: NumberInput,
+  parameters: {
+    componentSubtitle: "Component",
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const NumberInputDefault: Story = {
+  render: (args) => <NumberInput {...args} />,
+  args: {
+    name: "inputname",
+    helperText: "Optional helperText",
+    labelText: "The labelText",
+    pattern: "[0-9]+([.,][0-9]+)?",
+    step: 0.01,
+  },
+};
+
+export const disabled = (args) => <NumberInput {...args} />;
+
+disabled.story = {
+  parameters: {
+    docs: {
+      storyDescription: `\`disabled\` property specify the input to be disabled or not. Set \`disabled\` to true to make input non-interative `,
+    },
+  },
+};
+
+disabled.args = {
+  name: "inputname",
+  helperText: "Optional helperText",
+  labelText: "The labelText",
+  disabled: true,
+};
+
+export const hideLabel = (args) => <NumberInput {...args} />;
+
+hideLabel.story = {
+  parameters: {
+    docs: {
+      storyDescription: `\`hideLabel\` property specify hides the label text specified to describe the input`,
+    },
+  },
+};
+
+hideLabel.args = {
+  name: "inputname",
+  helperText: "Optional helperText",
+  labelText: "The labelText",
+  hideLabel: true,
+};
+
+export const invalid = (args) => <NumberInput {...args} />;
+
+const description = `
+\`invalid\` property is applied to the \`NumberInput\` when the value expected is invalid.
+`;
+
+invalid.story = {
+  parameters: {
+    docs: {
+      storyDescription: description,
+    },
+  },
+};
+
+invalid.args = {
+  name: "inputname",
+  helperText: "Optional helperText",
+  labelText: "The labelText",
+  invalid: { message: "Please enter your number" },
+};