@progressiveui/react 1.22.0

package/src/components/Input/useInput.tsx

@@ -0,0 +1,189 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import classNames from 'classnames';
+import useSettings from '../../hooks/useSettings';
+
+export interface UseInputProps {
+  /**
+   * Specify an optional className to be applied to the <input> node
+   */
+  className?: string;
+
+  /**
+   * Optionally provide the default value of the <input>
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the <input> should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify an optional className to be applied to the input node
+   */
+  inputClassName?: string;
+
+  /**
+   * Specify an optional className to be applied to the input wrapper node
+   */
+  inputWrapperClassName?: string;
+
+  /**
+   * Specify a custom `id` for the <input>
+   */
+  id?: string;
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText?: React.ReactNode;
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever <input>
+   * is updated
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * <input> is clicked
+   */
+  onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+
+  /**
+   * Specify the placeholder attribute for the <input>
+   */
+  placeholder?: string;
+
+  /**
+   * Specify the type of the <input>
+   */
+  type?: string;
+
+  /**
+   * Specify the value of the <input>
+   */
+  value?: string | number | readonly string[] | undefined; //string | number | object;
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel?: boolean;
+
+  /**
+   * 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?: boolean | object;
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText?: string | React.ReactNode;
+
+  /**
+   * Provide additional component that is used alongside the input for customization
+   */
+  additional?: React.ReactNode;
+  //TODO
+  addonAfter?: React.ReactNode;
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText?: React.ReactNode;
+
+  /**
+   * `true` to use the light version.
+   */
+  light?: boolean;
+  readOnly?: boolean;
+  name?: string;
+}
+
+/**
+ * Input is a wrapper for custom inputs providing the label, helperText and errors. */
+export const useInput = ({
+  addonAfter,
+  className,
+  inputClassName = 'wfp--input',
+  id,
+  placeholder,
+  type = 'text',
+  onChange = () => {},
+  onClick = () => {},
+  hideLabel,
+  name,
+  invalid,
+  invalidText,
+  labelText,
+  helperText,
+  light,
+  value = undefined,
+  //required,
+  ...other
+}: UseInputProps) => {
+  const { prefix } = useSettings();
+
+  const calculatedId = id ? id : name;
+
+  const inputClasses = classNames(`${prefix}--input`, inputClassName, {
+    [`${prefix}--input--light`]: light,
+    [`${prefix}--input--invalid`]: invalid, // legacy className
+  });
+
+  const inputProps = {
+    id: calculatedId,
+    name,
+    className: inputClasses,
+    ...other,
+    onChange: (evt) => {
+      if (!other.disabled && !other.readOnly) {
+        onChange(evt);
+      }
+    },
+    onClick: (evt) => {
+      if (!other.disabled && !other.readOnly) {
+        onClick(evt);
+      }
+    },
+    placeholder,
+    value,
+    type,
+  };
+
+  const wrapperProps = {
+    className,
+    addonAfter,
+    labelText,
+    helperText,
+    hideLabel,
+    invalid,
+    invalidText,
+  };
+
+  const errorId = calculatedId + '-error-msg';
+
+  /*const labelClasses = classNames(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel || !labelText,
+    [`${prefix}--label--disabled`]: other.disabled,
+  });*/
+
+  /* const label = (
+    <label htmlFor={calculatedId} className={labelClasses}>
+      {labelText && labelText}
+      {required && '*'}
+    </label>
+  );*/
+
+  if (invalid) {
+    inputProps['data-invalid'] = true;
+    inputProps['aria-invalid'] = true;
+    inputProps['aria-describedby'] = errorId;
+  }
+  return { inputProps, wrapperProps };
+};
+
+export default useInput;

package/src/components/InputGroup/InputGroup-old.js

@@ -0,0 +1,166 @@
+import PropTypes from "prop-types";
+import React from "react";
+import classNames from "classnames";
+import RadioButton from "../RadioButton";
+import warning from "warning";
+import { withWFPCoreSettings } from "../WFPCoreSettings";
+
+/**
+ * InputGroup allows you to organize and arange multiple input elements.
+ */
+
+class InputGroup extends React.Component {
+  state = { selected: this.props.valueSelected || this.props.defaultSelected };
+
+  static propTypes = {
+    prefix: PropTypes.string.isRequired,
+    /**
+     * Provide a collection of <RadioButton> components to render in the group
+     */
+    children: PropTypes.node,
+
+    /**
+     * Provide an optional className to be applied to the container node
+     */
+    className: PropTypes.string,
+
+    /**
+     * Specify the <RadioButton> to be selected by default
+     */
+    defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    /**
+     * Specify the name of the underlying `input` nodes
+     */
+    name: PropTypes.string,
+
+    /**
+     * Provide an optional `onChange` hook that is called whenever the value of
+     * the group changes
+     */
+    onChange: PropTypes.func,
+
+    /**
+     * Specify the value that is currently selected in the group
+     */
+    valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    /**
+     * Specify whether the elements should be displayed vertically.
+     */
+
+    vertical: PropTypes.bool,
+
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+
+    hideLabel: PropTypes.bool,
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+
+    helperText: PropTypes.node,
+
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: PropTypes.node,
+  };
+
+  static defaultProps = {
+    onChange: /* istanbul ignore next */ () => {},
+    controlled: false,
+  };
+
+  static getDerivedStateFromProps({ valueSelected, defaultSelected }, state) {
+    const { prevValueSelected } = state;
+    return prevValueSelected === valueSelected
+      ? null
+      : {
+          selected: valueSelected || defaultSelected,
+          prevValueSelected: valueSelected,
+        };
+  }
+
+  getRadioButtons = () => {
+    const children = React.Children.map(this.props.children, (radioButton) => {
+      const { value, ...other } = radioButton.props;
+      /* istanbul ignore if */
+      if (radioButton.props.hasOwnProperty("checked")) {
+        warning(
+          false,
+          `Instead of using the checked property on the RadioButton, set
+            the defaultSelected property or valueSelected property on the InputGroup.`
+        );
+      }
+
+      return (
+        <RadioButton
+          {...other}
+          name={this.props.name}
+          key={value}
+          value={value}
+          onChange={this.handleChange}
+          checked={value === this.state.selected}
+        />
+      );
+    });
+
+    return children;
+  };
+
+  handleChange = (newSelection, value, evt) => {
+    if (newSelection !== this.state.selected) {
+      this.setState({ selected: newSelection });
+      this.props.onChange(newSelection, this.props.name, evt);
+    }
+  };
+
+  render() {
+    const {
+      prefix,
+      children,
+      disabled,
+      labelText,
+      helperText,
+      controlled,
+      vertical,
+      hideLabel,
+      className = `${prefix}--input-group`,
+      wrapperClassName,
+    } = this.props;
+
+    const labelClasses = classNames(`${prefix}--label`, {
+      [`${prefix}--visually-hidden`]: hideLabel,
+    });
+
+    const wrapperClasses = classNames(`${prefix}--form-item`, {
+      [`${prefix}--input-group__vertical`]: vertical,
+      wrapperClassName,
+    });
+
+    const label = labelText ? (
+      <span className={labelClasses}>{labelText}</span>
+    ) : null;
+
+    const helper = helperText ? (
+      <div className={`${prefix}--form__helper-text`}>{helperText}</div>
+    ) : null;
+
+    return (
+      <div className={wrapperClasses}>
+        <div className={className} disabled={disabled}>
+          {label}
+          {helper}
+          <div className={`${prefix}--input-group-inside`}>
+            {controlled ? this.getRadioButtons() : children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withWFPCoreSettings(InputGroup);

package/src/components/InputGroup/InputGroup-test.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import InputGroup from './InputGroup';
+import RadioButton from '../RadioButton';
+
+describe('InputGroup', () => {
+  describe('renders as expected', () => {
+    const wrapper = mount(
+      <InputGroup defaultSelected="female" name="gender">
+        <RadioButton labelText="Male" value="male" />
+        <RadioButton labelText="Female" value="female" />
+      </InputGroup>
+    );
+
+    describe('wrapping div', () => {
+      const div = wrapper.first('div');
+
+      it('renders a div', () => {
+        expect(div.length).toEqual(1);
+      });
+
+      it('sets classes that are passed via className prop', () => {
+        wrapper.setProps({ className: 'extra-class' });
+        expect(div.hasClass('extra-class'));
+      });
+
+      it('sets disabled attribute if disabled prop is set', () => {
+        wrapper.setProps({ disabled: true });
+        expect(wrapper.first().props().disabled).toEqual(true);
+      });
+
+      it('should set checked property based on defaultSelected prop', () => {
+        expect(wrapper.props().defaultSelected).toEqual('female');
+      });
+    });
+
+    describe('children', () => {
+      const radioButton = () => wrapper.find(RadioButton);
+
+      it('renders expected number of children', () => {
+        expect(radioButton().length).toEqual(2);
+      });
+
+      // it('should set checked property based on valueSelected prop', () => {
+      //   wrapper.setProps({ valueSelected: 'male' });
+      //   console.log(radioButton().first().props());
+      //   expect(radioButton().first().props().checked).toEqual(true);
+      //   wrapper.setProps({ valueSelected: 'female' });
+      //   expect(radioButton().last().props().checked).toEqual(true);
+      // });
+
+      it('should set expected props on children', () => {
+        const firstChild = radioButton().first();
+        expect(wrapper.props().name).toEqual('gender');
+        expect(firstChild.props().value).toEqual('male');
+      });
+    });
+  });
+
+  describe('onChange event', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <InputGroup onChange={onChange} name="gender">
+        <RadioButton
+          labelText="Male"
+          value="male"
+          checked={false}
+          onChange={() => {}}
+        />
+        <RadioButton labelText="Female" value="female" onChange={() => {}} />
+      </InputGroup>
+    );
+
+    const firstRadio = wrapper.find(RadioButton).first();
+    const args = ['male', 'gender', { test: 'test event' }];
+
+    it('first child should not have checked set initially', () => {
+      expect(firstRadio.props().checked).toEqual(false);
+    });
+
+    it('calling onChange with same args should not call onChange prop', () => {
+      onChange.mockClear();
+      firstRadio.props().onChange(...args);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+/*
+  describe('Getting derived state from props', () => {
+    const wrapper = mount(
+      <InputGroup valueSelected="male" defaultSelected="female" name="gender">
+        <RadioButton labelText="Male" value="male" />
+        <RadioButton labelText="Female" value="female" />
+      </InputGroup>
+    );
+
+    it('should initialize the current selection from props', () => {
+      expect(wrapper.state().selected).toEqual('male');
+    });
+
+    it('should change the current selection upon change in props', () => {
+      wrapper.setProps({ valueSelected: 'male' });
+      wrapper.setState({ selected: 'male' });
+      wrapper.setProps({ valueSelected: undefined });
+      expect(wrapper.state().selected).toEqual('female');
+    });
+
+    it('should avoid change the current selection upon setting props, unless there the value actually changes', () => {
+      wrapper.setProps({ valueSelected: 'female' });
+      wrapper.setState({ selected: 'male' });
+      wrapper.setProps({ valueSelected: 'female' });
+      expect(wrapper.state().selected).toEqual('male');
+    });
+  });*/
+});