@jobber/components-native 0.35.0 → 0.36.0

package/src/Checkbox/CheckboxGroup.test.tsx

@@ -0,0 +1,341 @@
+import React from "react";
+import {
+  RenderAPI,
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+} from "@testing-library/react-native";
+import { FormProvider, useForm } from "react-hook-form";
+import { CheckboxGroup } from "./CheckboxGroup";
+import { Checkbox } from "./Checkbox";
+import { CheckboxGroupState } from "./types";
+import { Button } from "../Button";
+
+const onSubmitMock = jest.fn();
+
+const parentCheckboxLabel = "all condiments";
+const firstCheckboxLabel = "relish";
+const secondCheckboxLabel = "ketchup";
+const thirdCheckboxLabel = "mustard";
+const saveButtonText = "Save";
+
+interface CheckboxGroupFormData {
+  [key: string]: CheckboxGroupState;
+}
+
+interface CheckboxGroupFormOnChangeHandlers {
+  relish?: (data: boolean) => void;
+  mustard?: (data: boolean) => void;
+  ketchup?: (data: boolean) => void;
+  all?: (data: CheckboxGroupState) => void;
+}
+
+afterEach(cleanup);
+
+function setup(
+  label: string | undefined,
+  disabled?: boolean,
+  childDisabled?: boolean,
+) {
+  const checkboxGroup = render(
+    <CheckboxGroup
+      name="condimentsGroupCheckbox"
+      label={label}
+      accessibilityLabel={parentCheckboxLabel}
+      disabled={disabled}
+    >
+      <Checkbox
+        label="Relish"
+        name="relish"
+        accessibilityLabel={firstCheckboxLabel}
+      />
+      <Checkbox
+        label="Ketchup"
+        name="ketchup"
+        accessibilityLabel={secondCheckboxLabel}
+        disabled={childDisabled}
+      />
+      <Checkbox
+        label="Mustard"
+        name="mustard"
+        accessibilityLabel={thirdCheckboxLabel}
+      />
+    </CheckboxGroup>,
+  );
+
+  return { checkboxGroup };
+}
+
+function SetupWithForm({
+  initialValues,
+  onChangeHandlers,
+}: {
+  initialValues: CheckboxGroupFormData;
+  onChangeHandlers?: CheckboxGroupFormOnChangeHandlers;
+}): JSX.Element {
+  const formMethods = useForm({ defaultValues: initialValues });
+
+  return (
+    <FormProvider {...formMethods}>
+      <CheckboxGroup
+        name="condiments"
+        label="All Condiments"
+        accessibilityLabel={parentCheckboxLabel}
+        onChange={onChangeHandlers?.all}
+      >
+        <Checkbox
+          label="Relish"
+          name="relish"
+          accessibilityLabel={firstCheckboxLabel}
+          onChange={onChangeHandlers?.relish}
+        />
+        <Checkbox
+          label="Ketchup"
+          name="ketchup"
+          accessibilityLabel={secondCheckboxLabel}
+          onChange={onChangeHandlers?.ketchup}
+        />
+        <Checkbox
+          label="Mustard"
+          name="mustard"
+          accessibilityLabel={thirdCheckboxLabel}
+          onChange={onChangeHandlers?.mustard}
+        />
+      </CheckboxGroup>
+      <Button
+        onPress={formMethods.handleSubmit(values => onSubmitMock(values))}
+        label={saveButtonText}
+        accessibilityLabel={saveButtonText}
+      />
+    </FormProvider>
+  );
+}
+
+describe("when none of the checkboxes in a group are checked", () => {
+  it("the parent checkbox should be in the unchecked state", () => {
+    const { checkboxGroup } = setup("All Condiments");
+    const parentCheckbox = checkboxGroup.getByLabelText(parentCheckboxLabel);
+    expect(parentCheckbox.props.accessibilityState.checked).toEqual(false);
+  });
+
+  describe("when the parent checkbox is pressed", () => {
+    it("should check all the checkboxes within the group", () => {
+      const { checkboxGroup } = setup("All Condiments");
+      fireEvent.press(checkboxGroup.getByLabelText(parentCheckboxLabel));
+      [firstCheckboxLabel, secondCheckboxLabel, thirdCheckboxLabel].forEach(
+        checkboxLabel => {
+          const checkboxElement = checkboxGroup.getByLabelText(checkboxLabel);
+          expect(checkboxElement.props.accessibilityState.checked).toEqual(
+            true,
+          );
+        },
+      );
+    });
+  });
+});
+
+describe("when one of the checkboxes in a group are checked", () => {
+  it("the parent checkbox should be in the indeterminate state", () => {
+    const { checkboxGroup } = setup("All Condiments");
+    fireEvent.press(checkboxGroup.getByLabelText(secondCheckboxLabel));
+    const parentCheckbox = checkboxGroup.getByLabelText(parentCheckboxLabel);
+    expect(parentCheckbox.props.accessibilityState.checked).toEqual("mixed");
+  });
+});
+
+describe("when all of the checkboxes in a group are checked", () => {
+  function pressAllCheckboxes(checkboxGroup: RenderAPI) {
+    fireEvent.press(checkboxGroup.getByLabelText(firstCheckboxLabel));
+    fireEvent.press(checkboxGroup.getByLabelText(secondCheckboxLabel));
+    fireEvent.press(checkboxGroup.getByLabelText(thirdCheckboxLabel));
+  }
+
+  it("the parent checkbox should be in the checked state", () => {
+    const { checkboxGroup } = setup("All Condiments");
+    pressAllCheckboxes(checkboxGroup);
+    const parentCheckbox = checkboxGroup.getByLabelText(parentCheckboxLabel);
+    expect(parentCheckbox.props.accessibilityState.checked).toEqual(true);
+  });
+
+  describe("when the parent checkbox is pressed", () => {
+    it("should uncheck all the checkboxes within the group", () => {
+      const { checkboxGroup } = setup("All Condiments");
+      pressAllCheckboxes(checkboxGroup);
+      fireEvent.press(checkboxGroup.getByLabelText(parentCheckboxLabel));
+      [firstCheckboxLabel, secondCheckboxLabel, thirdCheckboxLabel].forEach(
+        checkboxLabel => {
+          const checkboxElement = checkboxGroup.getByLabelText(checkboxLabel);
+          expect(checkboxElement.props.accessibilityState.checked).toEqual(
+            false,
+          );
+        },
+      );
+    });
+  });
+});
+
+describe("when the parent checkbox does not have a label", () => {
+  it("does not render the parent checkbox", async () => {
+    const { checkboxGroup } = setup(undefined);
+    const findParentCheckbox = () => {
+      checkboxGroup.getByLabelText(parentCheckboxLabel);
+    };
+    expect(findParentCheckbox).toThrow(
+      "Unable to find an element with accessibilityLabel: all condiments",
+    );
+  });
+});
+
+describe("when the parent checkbox is disabled", () => {
+  it("disabled all the children checkboxes", () => {
+    const { checkboxGroup } = setup("All Condiments", true);
+    fireEvent.press(checkboxGroup.getByLabelText(parentCheckboxLabel));
+    [firstCheckboxLabel, secondCheckboxLabel, thirdCheckboxLabel].forEach(
+      checkboxLabel => {
+        const checkboxElement = checkboxGroup.getByLabelText(checkboxLabel);
+        expect(checkboxElement.props.accessibilityState.disabled).toEqual(true);
+      },
+    );
+  });
+});
+
+describe("when one of the checkboxes in a group are disabled", () => {
+  it("the parent shouldn't modify the disabled checkbox's state", () => {
+    const parentDisabled = false;
+    const childDisabled = true;
+    const { checkboxGroup } = setup(
+      "All Condiments",
+      parentDisabled,
+      childDisabled,
+    );
+    fireEvent.press(checkboxGroup.getByLabelText(parentCheckboxLabel));
+
+    [firstCheckboxLabel, thirdCheckboxLabel].forEach(checkboxLabel => {
+      const checkboxElement = checkboxGroup.getByLabelText(checkboxLabel);
+      expect(checkboxElement.props.accessibilityState.checked).toEqual(true);
+    });
+    const parentCheckbox = checkboxGroup.getByLabelText(parentCheckboxLabel);
+    expect(parentCheckbox.props.accessibilityState.checked).toEqual("mixed");
+  });
+  it("the parent should update the non disabled checkboxes", () => {
+    const parentDisabled = false;
+    const childDisabled = true;
+    const { checkboxGroup } = setup(
+      "All Condiments",
+      parentDisabled,
+      childDisabled,
+    );
+    fireEvent.press(checkboxGroup.getByLabelText(parentCheckboxLabel));
+
+    const secondCheckbox = checkboxGroup.getByLabelText(secondCheckboxLabel);
+    const parentCheckbox = checkboxGroup.getByLabelText(parentCheckboxLabel);
+    expect(secondCheckbox.props.accessibilityState.checked).toEqual(false);
+    expect(parentCheckbox.props.accessibilityState.checked).toEqual("mixed");
+  });
+});
+
+describe("when one of the checkbox has no name", () => {
+  it("should throw an error", () => {
+    expect(() =>
+      render(
+        <CheckboxGroup
+          name="condimentsGroupCheckbox"
+          label="test"
+          accessibilityLabel={parentCheckboxLabel}
+        >
+          <Checkbox
+            label="Relish"
+            name="relish"
+            accessibilityLabel={firstCheckboxLabel}
+          />
+          <Checkbox
+            label="Ketchup"
+            name="ketchup"
+            accessibilityLabel={secondCheckboxLabel}
+          />
+          <Checkbox onChange={jest.fn} checked={false} />
+        </CheckboxGroup>,
+      ),
+    ).toThrow("You must provide a name to checkboxes in a checkbox group");
+  });
+});
+
+describe("when controlled by a form", () => {
+  describe("when a checkbox is pressed", () => {
+    it("should update the form values", async () => {
+      const initialValues = {
+        condiments: {
+          parentChecked: false,
+          childrenChecked: { relish: false, ketchup: false, mustard: false },
+        },
+      };
+      const expectedValues = {
+        condiments: {
+          parentChecked: false,
+          childrenChecked: { relish: false, ketchup: true, mustard: false },
+        },
+      };
+      const { getByLabelText } = render(
+        <SetupWithForm initialValues={initialValues} />,
+      );
+      fireEvent.press(getByLabelText(secondCheckboxLabel));
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+      expect(onSubmitMock).toHaveBeenCalledWith(expectedValues);
+    });
+    it("should call the onChange handler for child checkbox", async () => {
+      const initialValues = {
+        condiments: {
+          parentChecked: false,
+          childrenChecked: { relish: false, ketchup: false, mustard: false },
+        },
+      };
+      const relishHandler = jest.fn();
+      const onChangeHandlers: CheckboxGroupFormOnChangeHandlers = {
+        relish: relishHandler,
+      };
+
+      const { getByLabelText } = render(
+        <SetupWithForm
+          initialValues={initialValues}
+          onChangeHandlers={onChangeHandlers}
+        />,
+      );
+      fireEvent.press(getByLabelText(firstCheckboxLabel));
+
+      expect(relishHandler).toHaveBeenCalledWith(true);
+    });
+    it("should call the onChange handler for parent checkbox", async () => {
+      const initialValues = {
+        condiments: {
+          parentChecked: false,
+          childrenChecked: { relish: false, ketchup: false, mustard: false },
+        },
+      };
+      const allHandler = jest.fn();
+      const onChangeHandlers: CheckboxGroupFormOnChangeHandlers = {
+        all: allHandler,
+      };
+
+      const { getByLabelText } = render(
+        <SetupWithForm
+          initialValues={initialValues}
+          onChangeHandlers={onChangeHandlers}
+        />,
+      );
+      fireEvent.press(getByLabelText(parentCheckboxLabel));
+
+      expect(allHandler).toHaveBeenCalledWith({
+        parentChecked: true,
+        childrenChecked: {
+          relish: true,
+          ketchup: true,
+          mustard: true,
+        },
+      });
+    });
+  });
+});

package/src/Checkbox/CheckboxGroup.tsx

@@ -0,0 +1,228 @@
+import React, { Fragment, useReducer } from "react";
+import { View } from "react-native";
+import isEmpty from "lodash/isEmpty";
+import reduce from "lodash/reduce";
+import { XOR } from "ts-xor";
+import { styles } from "./CheckboxGroup.style";
+import { Checkbox, CheckboxProps } from "./Checkbox";
+import { CheckboxElement, CheckboxGroupState } from "./types";
+import {
+  checkboxGroupReducer,
+  initCheckboxGroupState,
+} from "./CheckboxGroupReducer";
+import { FormField } from "../FormField";
+import { Divider } from "../Divider";
+
+interface CommonCheckboxGroupProps extends Omit<CheckboxProps, "onChange"> {
+  /**
+   * Checkbox items
+   */
+  children: CheckboxElement[];
+
+  state?: CheckboxGroupState;
+
+  onChange?(groupChecks: CheckboxGroupState): void;
+}
+interface ControlledCheckboxGroupProps extends CommonCheckboxGroupProps {
+  state: CheckboxGroupState;
+  onChange(groupChecks: CheckboxGroupState): void;
+}
+interface UncontrolledCheckboxGroupProps extends CommonCheckboxGroupProps {
+  name: string;
+}
+interface ChildCheckboxObject {
+  [key: string]: React.ReactElement<CheckboxProps>;
+}
+
+export type CheckboxGroupProps = XOR<
+  UncontrolledCheckboxGroupProps,
+  ControlledCheckboxGroupProps
+>;
+export function CheckboxGroup({
+  children,
+  state,
+  onChange,
+  name,
+  ...rest
+}: CheckboxGroupProps): JSX.Element {
+  if (state !== undefined && onChange !== undefined) {
+    return (
+      <CheckboxGroupInternal
+        state={state}
+        onChange={onChange}
+        name={name}
+        {...rest}
+      >
+        {children}
+      </CheckboxGroupInternal>
+    );
+  }
+  if (name) {
+    return (
+      <FormField name={name}>
+        {field => {
+          return (
+            <CheckboxGroupInternal
+              name={field.name}
+              state={field.value}
+              onChange={newValue => {
+                onChange?.(newValue);
+                field.onChange(newValue);
+              }}
+              {...rest}
+            >
+              {children}
+            </CheckboxGroupInternal>
+          );
+        }}
+      </FormField>
+    );
+  }
+  throw new Error("CheckboxGroup passed invalid props");
+}
+
+function CheckboxGroupInternal({
+  label,
+  disabled,
+  children,
+  state,
+  accessibilityLabel,
+  onChange,
+  name: parentName,
+}: ControlledCheckboxGroupProps): JSX.Element {
+  const childrenNames = React.Children.map(children, child => {
+    const name = throwErrorIfItHasNoName(child.props.name);
+
+    return name;
+  });
+  const isNested = !!label;
+  const [internalCheckedValues, dispatch] = useReducer(
+    checkboxGroupReducer,
+    childrenNames,
+    initCheckboxGroupState,
+  );
+  const actualCheckedValues = !isEmpty(state) ? state : internalCheckedValues;
+
+  const handleChange = (data: CheckboxGroupState) => {
+    dispatch({ type: "Update", data });
+    onChange?.(data);
+  };
+  const indeterminate = checkIndeterminateStatus(actualCheckedValues);
+
+  function cloneChildCheckbox(
+    checkbox: React.ReactElement<CheckboxProps>,
+  ): React.ReactElement<CheckboxProps> {
+    const name = throwErrorIfItHasNoName(checkbox.props.name);
+    const childDisabled = disabled || checkbox.props.disabled;
+    const childrenHandleChange = (checked: boolean) => {
+      const childrenNextValue = {
+        ...actualCheckedValues.childrenChecked,
+        [name]: checked,
+      };
+      const parentNextValue = reduce(childrenNextValue, getParentChecked, true);
+      checkbox.props.onChange?.(checked);
+      handleChange({
+        childrenChecked: childrenNextValue,
+        parentChecked: parentNextValue,
+      });
+    };
+    return React.cloneElement(checkbox, {
+      onChange: childrenHandleChange,
+      checked: actualCheckedValues.childrenChecked[name],
+      disabled: childDisabled,
+    });
+  }
+
+  const checkboxObject: ChildCheckboxObject = React.Children.toArray(
+    children,
+  ).reduce((childCheckboxObject: ChildCheckboxObject, child) => {
+    if (!React.isValidElement<CheckboxProps>(child)) {
+      return childCheckboxObject;
+    }
+
+    const name = throwErrorIfItHasNoName(child.props.name);
+    return {
+      ...childCheckboxObject,
+      [name]: cloneChildCheckbox(child),
+    };
+  }, {});
+
+  function getParentChecked(
+    acc: boolean,
+    value: boolean,
+    childName: string,
+  ): boolean {
+    const currentCheckbox = checkboxObject[childName];
+    if (currentCheckbox?.props?.disabled) {
+      return acc;
+    }
+    return acc && value;
+  }
+
+  return (
+    <View>
+      {isNested ? (
+        <>
+          <Checkbox
+            name={parentName}
+            label={label}
+            accessibilityLabel={accessibilityLabel || label}
+            indeterminate={indeterminate}
+            checked={actualCheckedValues.parentChecked || false}
+            onChange={value => {
+              const newValues = reduce(
+                actualCheckedValues.childrenChecked,
+                (acc, currentCheckboxValue, childName) => {
+                  const currentCheckbox = checkboxObject[childName];
+                  return currentCheckbox?.props?.disabled
+                    ? {
+                        ...acc,
+                        [childName]: currentCheckboxValue,
+                      }
+                    : {
+                        ...acc,
+                        [childName]: value,
+                      };
+                },
+                {},
+              );
+              const parentChecked = reduce(newValues, getParentChecked, value);
+              onChange({ childrenChecked: newValues, parentChecked });
+            }}
+            disabled={disabled}
+          />
+          <Divider />
+        </>
+      ) : undefined}
+      <View />
+      <View style={isNested ? styles.nestedCheckboxes : {}}>
+        {Object.values(checkboxObject).map((checkbox, index) => {
+          return (
+            <Fragment key={index}>
+              {checkbox}
+              {index !== children.length - 1 && <Divider />}
+            </Fragment>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+function throwErrorIfItHasNoName(name?: string): string {
+  if (!name) {
+    throw new Error(
+      "You must provide a name to checkboxes in a checkbox group",
+    );
+  }
+  return name;
+}
+
+function checkIndeterminateStatus(checkedValues: CheckboxGroupState): boolean {
+  const checkedValuesAsArray = Object.values(checkedValues.childrenChecked);
+  if (checkedValuesAsArray.length === 1) {
+    return false;
+  }
+
+  return !checkedValuesAsArray.every((value, i, arr) => value === arr[0]);
+}

package/src/Checkbox/CheckboxGroupReducer.test.ts

@@ -0,0 +1,41 @@
+import {
+  checkboxGroupReducer,
+  initCheckboxGroupState,
+} from "./CheckboxGroupReducer";
+import { CheckboxGroupState } from "./types";
+
+let state: CheckboxGroupState;
+const checkbox1 = "checkbox1";
+const checkbox2 = "checkbox2";
+const checkbox3 = "checkbox3";
+const childrenNames = [checkbox1, checkbox2, checkbox3];
+
+describe("update", () => {
+  beforeEach(() => {
+    state = initCheckboxGroupState(childrenNames);
+  });
+
+  it("should update childrenChecked", () => {
+    const result = checkboxGroupReducer(state, {
+      type: "Update",
+      data: { childrenChecked: { [checkbox1]: true } },
+    });
+    expect(result).toEqual({
+      ...state,
+      childrenChecked: {
+        ...state.childrenChecked,
+        [checkbox1]: true,
+      },
+    });
+  });
+  it("should update parentChecked", () => {
+    const result = checkboxGroupReducer(state, {
+      type: "Update",
+      data: { parentChecked: true },
+    });
+    expect(result).toEqual({
+      ...state,
+      parentChecked: true,
+    });
+  });
+});

package/src/Checkbox/CheckboxGroupReducer.ts

@@ -0,0 +1,32 @@
+import deepmerge from "deepmerge";
+import { CheckboxGroupState, CheckboxGroupStateInitializer } from "./types";
+
+interface UpdateAction {
+  type: "Update";
+  data: Partial<CheckboxGroupState>;
+}
+
+type CheckboxGroupAction = UpdateAction;
+
+export function initCheckboxGroupState(
+  childNames: CheckboxGroupStateInitializer,
+): CheckboxGroupState {
+  return {
+    parentChecked: false,
+    childrenChecked: childNames.reduce((acc, name) => {
+      return { ...acc, [name]: false };
+    }, {}),
+  };
+}
+
+export function checkboxGroupReducer(
+  state: CheckboxGroupState,
+  action: CheckboxGroupAction,
+): CheckboxGroupState {
+  switch (action.type) {
+    case "Update":
+      return deepmerge(state, action.data);
+    default:
+      return state;
+  }
+}

package/src/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export { CheckboxGroup } from "./CheckboxGroup";

package/src/Checkbox/types.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+import { Checkbox, CheckboxProps } from "./Checkbox";
+
+export interface CheckboxGroupChildrenState {
+  [key: string]: boolean;
+}
+
+export interface CheckboxGroupState {
+  parentChecked?: boolean;
+  childrenChecked: CheckboxGroupChildrenState;
+}
+export type CheckboxGroupStateInitializer = string[];
+export type CheckboxElement = ReactElement<CheckboxProps, typeof Checkbox>;

package/src/index.ts

@@ -7,6 +7,7 @@ export * from "./BottomSheet";
 export * from "./Button";
 export * from "./ButtonGroup";
 export * from "./Card";
+export * from "./Checkbox";
 export * from "./Chip";
 export * from "./Content";
 export * from "./Divider";