@ilo-org/react 0.7.7 → 0.8.0

package/src/components/Checkbox/Checkbox.props.ts

@@ -1,13 +1,5 @@
-export interface CheckboxProps {
-  callback?: (e: React.ChangeEvent<HTMLInputElement>) => any;
-  className?: string;
-  disabled?: boolean;
-  error?: string | false;
-  grouped?: boolean;
-  helper?: string;
-  id?: string;
-  label?: string;
-  name: string;
-  required?: boolean;
-  tooltip?: string;
-}
+import { ChoiceFieldProps } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
+export type CheckboxProps = ChoiceFieldProps<HTMLInputElement>;
+
+export type LabelledCheckboxProps = LabelledFormFieldProps<CheckboxProps>;

package/src/components/Checkbox/Checkbox.tsx

@@ -1,92 +1,94 @@
-import { FC, useState } from "react";
+import React, { useEffect, forwardRef } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { CheckboxProps } from "./Checkbox.props";
-import { Fieldset } from "../Fieldset";
-import { FormElement } from "../FormElement";
+import { CheckboxProps, LabelledCheckboxProps } from "./Checkbox.props";
+import { useFieldsetError } from "../Fieldset/Fieldset";
+import FormControl, { useFormControl } from "../FormControl/FormControl";
+import usePrevious from "../../hooks/usePrevious";
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
+  const {
+    onChange,
+    onBlur,
+    disabled = false,
+    error,
+    id,
+    name,
+    required,
+    defaultChecked = false,
+    checked,
+    value,
+  } = props;
 
-const Checkbox: FC<CheckboxProps> = ({
-  callback,
-  disabled = false,
-  error,
-  grouped,
-  helper,
-  id,
-  label,
-  name,
-  required,
-  tooltip,
-}) => {
   const { prefix } = useGlobalSettings();
+  const { setHasError } = useFieldsetError();
+  const formControlCtx = useFormControl();
+  const { ariaDescribedBy } = formControlCtx;
+
   const baseClass = `${prefix}--checkbox`;
+  const errorClass = `${baseClass}__error`;
 
-  const CheckboxClasses = classNames("", {
-    [baseClass]: true,
-    [`error`]: error,
+  const CheckboxClasses = classNames(baseClass, {
+    [errorClass]: error,
   });
 
-  const [checked, setChecked] = useState(false);
+  const prevError = usePrevious(error);
 
-  /**
-   * On change, if there is a callback, call it
-   */
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(e.target.checked);
+  useEffect(() => {
+    if (error !== prevError) {
+      setHasError(!!error);
+    }
+  }, [error, prevError, setHasError]);
 
-    if (callback) {
-      callback(e);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(e);
     }
   };
 
   return (
-    <>
-      {grouped && (
-        <FormElement
-          elemid={id as any}
-          label={label}
-          helper={helper as any}
-          error={error as any}
-          required={required as any}
-          tooltip={tooltip}
-        >
-          <input
-            id={id}
-            name={name}
-            onChange={handleChange}
-            disabled={disabled}
-            required={required as any}
-            type={"checkbox"}
-            className={CheckboxClasses}
-            checked={checked}
-          />
-        </FormElement>
-      )}
-      {!grouped && (
-        <Fieldset>
-          <FormElement
-            elemid={id as any}
-            label={label}
-            helper={helper as any}
-            error={error as any}
-            required={required as any}
-            tooltip={tooltip}
-            type={"checkbox"}
-          >
-            <input
-              id={id}
-              name={name}
-              onChange={handleChange}
-              disabled={disabled}
-              required={required as any}
-              type={"checkbox"}
-              className={CheckboxClasses}
-              checked={checked}
-            />
-          </FormElement>
-        </Fieldset>
-      )}
-    </>
+    <input
+      ref={ref}
+      id={id ? id : name}
+      name={name}
+      onChange={handleChange}
+      onBlur={onBlur}
+      disabled={disabled}
+      required={required}
+      type="checkbox"
+      className={CheckboxClasses}
+      defaultChecked={defaultChecked}
+      aria-describedby={ariaDescribedBy}
+      checked={checked}
+      value={value}
+    />
   );
-};
+});
+
+const LabelledCheckbox = forwardRef<HTMLInputElement, LabelledCheckboxProps>(
+  (props, ref) => {
+    const fieldId = props.id ? props.id : props.name;
+    const {
+      style,
+      inputStyle,
+      className,
+      labelPlacement = "end",
+      labelSize = "small",
+      ...rest
+    } = props;
+    return (
+      <FormControl
+        fieldId={fieldId}
+        style={style}
+        className={className}
+        labelPlacement={labelPlacement}
+        labelSize={labelSize}
+        {...rest}
+      >
+        <Checkbox ref={ref} style={inputStyle} {...rest} />
+      </FormControl>
+    );
+  }
+);
 
-export default Checkbox;
+export default LabelledCheckbox;

package/src/components/Checkbox/index.ts

@@ -1 +1,2 @@
 export { default as Checkbox } from "./Checkbox";
+export { default as CheckboxArgs } from "./Checkbox.args";

package/src/components/DatePicker/DatePicker.args.ts

@@ -1,76 +1,50 @@
 import { DatePickerProps } from "./DatePicker.props";
 
 const basic: DatePickerProps = {
-  callback: () => {},
+  id: "datepicker",
   disabled: false,
   error: false,
-  helper: false,
-  label: "Date Picker Field Label",
   name: "datepicker",
   placeholder: "MM/DD/YYYY",
   required: false,
 };
 
 const hashelper: DatePickerProps = {
-  callback: () => {},
+  id: "datepicker",
   disabled: false,
   error: false,
-  helper: "here is helper text",
-  label: "Date Picker Field Label",
   name: "datepicker",
   placeholder: "MM/DD/YYYY",
   required: false,
 };
 
 const haserror: DatePickerProps = {
-  callback: () => {},
+  id: "datepicker",
   disabled: false,
-  error: "this one has an error",
-  helper: false,
-  label: "Date Picker Field Label",
+  error: true,
   name: "datepicker",
   placeholder: "MM/DD/YYYY",
   required: false,
 };
 
 const hastooltip: DatePickerProps = {
-  callback: () => {},
+  id: "datepicker",
   disabled: false,
   error: false,
-  helper: false,
-  label: "Date Picker Field Label",
   name: "datepicker",
   placeholder: "MM/DD/YYYY",
   required: false,
-  tooltip: "This is the tooltip",
 };
 
 const hasrange: DatePickerProps = {
-  callback: () => {},
+  id: "datepicker",
   disabled: false,
-  enddata: {
-    callback: () => {},
-    disabled: false,
-    error: false,
-    helper: "this is an end date range",
-    label: "Date Picker End Field Label",
-    name: "datepickerend",
-    placeholder: "MM/DD/YYYY",
-    range: false,
-    required: false,
-  },
   error: false,
-  helper: false,
-  label: "Date Picker Field Label",
   name: "datepicker",
   placeholder: "MM/DD/YYYY",
-  range: true,
   required: false,
 };
 
-/**
- * Sample prop definitions DatePicker's enumerable properties (imported in stories and test)
- */
 const DatePickerArgs = {
   basic,
   hasrange,

package/src/components/DatePicker/DatePicker.props.ts

@@ -1,66 +1,26 @@
-export interface DatePickerProps {
-  /**
-   * The input's onChange callback.
-   */
-  callback?: (e: React.ChangeEvent<HTMLInputElement>, picker?: string) => any;
-
-  /**
-   * Specify an optional className to be added to your input.
-   */
-  className?: string;
-
-  /**
-   * Is the input disabled?
-   */
-  disabled?: boolean;
-
-  /**
-   * If this is a range, the data for the second field
-   */
-  enddata?: DatePickerProps;
-
-  /**
-   * Does the input have an error?
-   */
-  error?: string | false;
+import { FormFieldProps } from "../../types";
+import { LabelledFormFieldProps } from "../../types";
 
+export interface DatePickerProps extends FormFieldProps<HTMLInputElement> {
   /**
-   * The input's helper text
+   * The latest date to accept
    */
-  helper: string | false;
+  max?: string | number;
 
   /**
-   * The input's id attribute
+   * The earliest date to accept.
    */
-  id?: string;
+  min?: string | number;
 
   /**
-   * Does this input have a label?
+   * The granularity of the date picker
    */
-  label: string;
-
-  /**
-   * The input's name attribute
-   */
-  name?: Required<string>;
+  step?: number;
 
   /**
    * Specify an optional className to be added to your DatePicker component.
    */
   placeholder?: string;
-
-  /**
-   * Specify whether this is a date range
-   */
-  range?: boolean;
-
-  /**
-   * Specify whether this input is required
-   */
-  required?: boolean;
-
-  /**
-   * Does this DatePicker have a tooltip?
-   */
-  tooltip?: string;
 }
+
+export type LabelledDatePickerProps = LabelledFormFieldProps<DatePickerProps>;

package/src/components/DatePicker/DatePicker.tsx

@@ -1,119 +1,80 @@
-import { FC } from "react";
+import { forwardRef } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
-import { DatePickerProps } from "./DatePicker.props";
-import { Fieldset } from "../Fieldset";
-import { FormElement } from "../FormElement";
+import FormControl, { useFormControl } from "../FormControl/FormControl";
+import { DatePickerProps, LabelledDatePickerProps } from "./DatePicker.props";
 
-const DatePicker: FC<DatePickerProps> = ({
-  callback,
-  disabled = false,
-  enddata,
-  error,
-  helper,
-  id,
-  label,
-  name,
-  placeholder,
-  range,
-  required,
-  tooltip,
-}) => {
-  const { prefix } = useGlobalSettings();
-  const baseClass = `${prefix}--datepicker`;
+const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
+  (props, ref) => {
+    const {
+      onChange,
+      onBlur,
+      disabled = false,
+      error,
+      id,
+      name,
+      placeholder,
+      required,
+      max,
+      min,
+      step,
+    } = props;
 
-  const DatePickerClasses = classNames("", {
-    [baseClass]: true,
-    [`error`]: error,
-  });
+    const { prefix } = useGlobalSettings();
+    const formControlCtx = useFormControl();
+    const { ariaDescribedBy } = formControlCtx;
 
-  /**
-   * On change, if there is a callback, call it
-   */
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
-    picker?: string
-  ) => {
-    if (callback) {
-      callback(e, picker);
-    }
-  };
+    const inputClass = `${prefix}--input`;
+    const baseClass = `${prefix}--datepicker`;
+
+    const datePickerClasses = classNames(inputClass, baseClass, {
+      [`error`]: error,
+    });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onChange) {
+        onChange(e);
+      }
+    };
+
+    return (
+      <input
+        ref={ref}
+        type="date"
+        id={id ? id : name}
+        name={name}
+        onChange={handleChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        placeholder={placeholder}
+        required={required}
+        className={datePickerClasses}
+        max={max}
+        min={min}
+        step={step}
+        aria-describedby={ariaDescribedBy}
+      />
+    );
+  }
+);
+
+const LabelledDatePicker = forwardRef<
+  HTMLInputElement,
+  LabelledDatePickerProps
+>((props, ref) => {
+  const { style, inputStyle, className, ...rest } = props;
+  const fieldId = props.id ? props.id : props.name;
 
   return (
-    <>
-      {!range && (
-        <Fieldset>
-          <FormElement
-            elemid={name as any}
-            label={label}
-            helper={helper as any}
-            error={error as any}
-            required={required as any}
-            tooltip={tooltip}
-          >
-            <input
-              id={`${id ? id : name}`}
-              name={`${name}`}
-              onChange={handleChange}
-              disabled={disabled}
-              placeholder={placeholder}
-              required={required as any}
-              type={"date"}
-              className={`${DatePickerClasses} ${prefix}--input`}
-            />
-          </FormElement>
-        </Fieldset>
-      )}
-      {range && (
-        <div className={`${baseClass}--range`}>
-          <Fieldset>
-            <FormElement
-              elemid={name as any}
-              label={label}
-              helper={helper as any}
-              error={error as any}
-              required={required as any}
-              tooltip={tooltip}
-              type={"date"}
-            >
-              <input
-                id={`${id ? id : name}`}
-                name={`${name}`}
-                onChange={handleChange}
-                disabled={disabled}
-                placeholder={placeholder}
-                required={required as any}
-                type={"date"}
-                className={`${DatePickerClasses} ${prefix}--input`}
-              />
-            </FormElement>
-          </Fieldset>
-          <Fieldset>
-            <FormElement
-              elemid={enddata?.name as any}
-              label={enddata?.label as any}
-              helper={enddata?.helper as any}
-              error={enddata?.error as any}
-              required={enddata?.required as any}
-              tooltip={enddata?.tooltip as any}
-              type={"date"}
-            >
-              <input
-                id={enddata?.id ? enddata?.id : enddata?.name}
-                name={enddata?.name}
-                onChange={(e) => handleChange(e, "end")}
-                disabled={enddata?.disabled}
-                placeholder={enddata?.placeholder}
-                required={enddata?.required as any}
-                type={"date"}
-                className={`${DatePickerClasses} ${prefix}--input`}
-              />
-            </FormElement>
-          </Fieldset>
-        </div>
-      )}
-    </>
+    <FormControl
+      fieldId={fieldId}
+      style={style}
+      className={className}
+      {...rest}
+    >
+      <DatePicker ref={ref} style={inputStyle} {...rest} />
+    </FormControl>
   );
-};
+});
 
-export default DatePicker;
+export default LabelledDatePicker;