@progressiveui/react 2.0.3 → 2.0.5

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

@@ -1,255 +0,0 @@
-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

@@ -1,330 +0,0 @@
-// 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

@@ -1,79 +0,0 @@
-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" },
-};