@purpurds/toggle 3.0.0

package/src/toggle.tsx

@@ -0,0 +1,155 @@
+import React, { ForwardedRef, forwardRef, useState } from "react";
+import { checkmarkBold, Icon } from "@purpurds/icon";
+import { Label } from "@purpurds/label";
+import { Paragraph } from "@purpurds/paragraph";
+import * as Switch from "@radix-ui/react-switch";
+import c from "classnames";
+
+import styles from "./toggle.module.scss";
+import { DraggableX } from "./DraggableX";
+import { useToggleDrag } from "./useToggleDrag";
+
+export type ToggleProps = {
+  /**
+   * To use when no label is given.
+   * */
+  ["aria-label"]?: string;
+  /**
+   * To use with custom label (not recommended).
+   * */
+  ["aria-labelledby"]?: string;
+  ["data-testid"]?: string;
+  /**
+   * The controlled state of the toggle. Must be used in conjunction with `onChange`.
+   * */
+  checked?: boolean;
+  className?: string;
+  /**
+   * The state of the toggle when it is initially rendered. Use when you do not need to control its state.
+   * */
+  defaultChecked?: boolean;
+  /**
+   * When `true`, prevents the user from interacting with the toggle.
+   * */
+  disabled?: boolean;
+  /**
+   * When `true`, the toggle isn't draggable.
+   * */
+  disableDrag?: boolean;
+  /**
+   * ID of the toggle.
+   * */
+  id: string;
+  /**
+   * The label of the toggle.
+   * */
+  label?: string;
+  /**
+   * Set to decide which side of the toggle the label should be rendered.
+   * */
+  labelPosition?: "left" | "right";
+  /**
+   * The name of the toggle. Submitted with its owning form as part of a name/value pair, when wrapped in a form.
+   * */
+  name?: string;
+  /**
+   * Event handler called when the toggle is toggled.
+   * */
+  onChange?: (checked: boolean) => void;
+  /**
+   * When `true`, indicates that the user must check the toggle before the owning form can be submitted..
+   * */
+  required?: boolean;
+  /**
+   * The value given as data when wrapped with a form and submitted with a name.
+   * */
+  value?: string;
+};
+
+const rootClassName = "purpur-toggle";
+
+const ToggleComponent = (
+  {
+    ["data-testid"]: dataTestId,
+    className,
+    label,
+    onChange,
+    labelPosition = "right",
+    checked,
+    disableDrag,
+    defaultChecked,
+    ...props
+  }: ToggleProps,
+  ref: ForwardedRef<HTMLButtonElement>
+) => {
+  const [internalChecked, setInternalChecked] = useState(
+    typeof checked === "boolean" ? checked : !!defaultChecked
+  );
+  const isChecked = Boolean(typeof checked === "boolean" ? checked : internalChecked);
+  const { thumbRef, trackRef, isDragging, onChangeWithDrag, ...draggableXProps } = useToggleDrag({
+    checked: isChecked,
+    onChange: (value) => {
+      if (!props.disabled) {
+        onChange?.(value);
+        setInternalChecked(value);
+      }
+    },
+  });
+
+  const renderLabel = () => (
+    <Label
+      htmlFor={props.id}
+      data-testid={dataTestId && `${dataTestId}-label`}
+      disabled={props.disabled}
+      className={c(
+        styles[`${rootClassName}__label`],
+        styles[`${rootClassName}__label--${labelPosition}`]
+      )}
+    >
+      <Paragraph variant="paragraph-100" disabled={props.disabled}>
+        {label}
+      </Paragraph>
+    </Label>
+  );
+
+  return (
+    <div className={c([className, styles[`${rootClassName}__container`]])}>
+      {label && labelPosition === "left" && renderLabel()}
+      <Switch.Root
+        {...props}
+        ref={ref}
+        id={props.id}
+        data-testid={dataTestId}
+        className={styles[rootClassName]}
+        onCheckedChange={onChangeWithDrag}
+        checked={isChecked}
+      >
+        <span ref={trackRef} className={styles[`${rootClassName}__track`]}>
+          <span className={styles[`${rootClassName}__checkmark-container`]}>
+            <Icon
+              className={styles[`${rootClassName}__checkmark`]}
+              svg={checkmarkBold}
+              size="xxs"
+            />
+          </span>
+          <DraggableX disabled={disableDrag} {...draggableXProps}>
+            <Switch.Thumb
+              ref={thumbRef}
+              data-testid={dataTestId && `${dataTestId}-thumb`}
+              className={c([
+                styles[`${rootClassName}__thumb`],
+                {
+                  [styles[`${rootClassName}__thumb--dragging`]]: isDragging,
+                },
+              ])}
+            />
+          </DraggableX>
+        </span>
+      </Switch.Root>
+      {label && labelPosition === "right" && renderLabel()}
+    </div>
+  );
+};
+
+export const Toggle = forwardRef(ToggleComponent);
+Toggle.displayName = "Toggle";

package/src/useToggleDrag.ts

@@ -0,0 +1,58 @@
+import { MutableRefObject, useRef, useState, useLayoutEffect } from "react";
+import { ToggleProps } from "./toggle";
+
+export const useToggleDrag = ({ checked, onChange }: Pick<ToggleProps, "checked" | "onChange">) => {
+  const trackRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
+  const thumbRef = useRef<HTMLSpanElement>(null);
+  const [dragX, setDragX] = useState<number | undefined>(undefined);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStopped, setDragStopped] = useState(0);
+  const [thumbHeight, setThumbHeight] = useState(0);
+  const [switchHeight, setSwitchHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    setThumbHeight(thumbRef.current?.clientHeight || 0);
+    setSwitchHeight(trackRef.current?.clientHeight || 0);
+  }, [thumbRef.current?.clientHeight, trackRef.current?.clientHeight]);
+
+  const switchThumbHeightDelta = (switchHeight || 0) - thumbHeight;
+  const maxDragRange = thumbHeight + switchThumbHeightDelta;
+  const minDragRange = switchThumbHeightDelta / 2;
+  const halfMaxDragRange = maxDragRange / 2;
+  const isDraggedHalfway =
+    typeof dragX === "number" && (checked ? dragX < halfMaxDragRange : dragX > halfMaxDragRange);
+
+  const onDrag = ({ x }: { x: number }) => {
+    setDragX(x);
+    const dragDelta = Math.abs((checked ? maxDragRange : minDragRange) - x);
+
+    // Add a threshold here for then accidentally dragging when clicking/touching
+    dragDelta > 2 && setIsDragging(true);
+  };
+
+  const onStop = () => {
+    setIsDragging(false);
+    isDragging && setDragStopped(Date.now());
+    if (isDraggedHalfway) {
+      onChange?.(!checked);
+    }
+  };
+
+  const onChangeWithDrag = () => {
+    if (Date.now() - dragStopped > 50) {
+      onChange?.(!checked);
+    }
+    setDragX(undefined);
+  };
+
+  return {
+    trackRef,
+    thumbRef,
+    isDragging,
+    bounds: { left: minDragRange, right: maxDragRange },
+    position: checked ? maxDragRange : minDragRange,
+    onDrag,
+    onStop,
+    onChangeWithDrag,
+  };
+};