@uniai-fe/uds-primitives 0.6.15 → 0.7.0

package/src/components/input/markup/time/Picker.tsx

@@ -0,0 +1,363 @@
+"use client";
+
+import { TimePicker as MantineTimePicker } from "@mantine/dates";
+import { useUncontrolled } from "@mantine/hooks";
+import clsx from "clsx";
+import type { CSSProperties, ChangeEvent, FocusEvent, MouseEvent } from "react";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import type { TimePickerStylesNames } from "@mantine/dates";
+import {
+  getFormFieldWidthAttr,
+  getFormFieldWidthValue,
+} from "../../../form/utils/form-field";
+import type { InputTimePickerProps } from "../../types";
+import ClockIcon from "../../img/clock.svg";
+import ResetIcon from "../../img/reset.svg";
+
+const INPUT_TIME_CLASS_NAMES = {
+  input: "input-time-input",
+  wrapper: "input-time-wrapper",
+  section: "input-time-section",
+  fieldsRoot: "input-time-fields-root",
+  fieldsGroup: "input-time-fields-group",
+  field: "input-time-field",
+  dropdown: "input-time-dropdown",
+  controlsListGroup: "input-time-controls-list-group",
+  controlsList: "input-time-controls-list",
+  control: "input-time-option",
+  presetControl: "input-time-preset-option",
+  presetsGroup: "input-time-presets-group",
+  presetsGroupLabel: "input-time-presets-group-label",
+  scrollarea: "input-time-scrollarea",
+} satisfies Partial<Record<TimePickerStylesNames, string>>;
+
+/**
+ * Input Time Picker; Mantine TimePicker 기반 UDS adapter.
+ * `Input.Time.Picker` public namespace에서 사용하며 Calendar/date 하위에 속하지 않는다.
+ * @component
+ * @param {InputTimePickerProps} props
+ * @param {string} [props.value] 제어형 시간 값
+ * @param {string} [props.defaultValue] 비제어 초기 시간 값
+ * @param {(value:string)=>void} [props.onChange] 값 변경 핸들러
+ * @param {(value:string)=>void} [props.onValueChange] 값 변경 별칭
+ * @param {UseFormRegisterReturn} [props.register] react-hook-form register 결과
+ * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority="primary"] input priority
+ * @param {"small" | "medium" | "large"} [props.size="medium"] input size
+ * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] input state
+ * @param {"12h" | "24h"} [props.format="24h"] 표시/입력 시간 포맷
+ * @param {boolean} [props.withSeconds=false] seconds 입력 노출 여부
+ * @param {boolean} [props.withDropdown=false] dropdown 노출 여부
+ * @param {boolean} [props.clearable=true] clear 버튼 노출 여부
+ * @param {"left" | "right"} [props.iconPosition] clock icon 위치
+ */
+const InputTimePicker = forwardRef<HTMLDivElement, InputTimePickerProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onChange,
+      onValueChange,
+      name,
+      form,
+      register,
+      priority = "primary",
+      size = "medium",
+      state: stateProp = "default",
+      block = false,
+      width,
+      className,
+      disabled,
+      readOnly,
+      required,
+      id,
+      format = "24h",
+      withSeconds = false,
+      withDropdown = false,
+      clearable = true,
+      min,
+      max,
+      hoursStep,
+      minutesStep,
+      secondsStep,
+      icon,
+      iconPosition,
+      iconLabel = "시간 선택",
+      clearButtonLabel = "시간 지우기",
+      popoverProps,
+      hiddenInputProps,
+      hoursInputLabel,
+      minutesInputLabel,
+      secondsInputLabel,
+      amPmInputLabel,
+      amPmLabels,
+      hoursPlaceholder,
+      minutesPlaceholder,
+      secondsPlaceholder,
+      pasteSplit,
+      presets,
+      maxDropdownContentHeight,
+      scrollAreaProps,
+      reverseTimeControlsList,
+      onFocus,
+      onBlur,
+    },
+    ref,
+  ) => {
+    const hoursInputRef = useRef<HTMLInputElement | null>(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [timeValue, setTimeValue] = useUncontrolled<string>({
+      value,
+      defaultValue,
+      finalValue: "",
+      onChange: nextValue => {
+        onChange?.(nextValue);
+        onValueChange?.(nextValue);
+      },
+    });
+
+    const emitRegisterChange = useCallback(
+      (nextValue: string) => {
+        if (!register?.onChange) {
+          return;
+        }
+        const syntheticEvent = {
+          target: {
+            name: register.name,
+            value: nextValue,
+          },
+          currentTarget: {
+            name: register.name,
+            value: nextValue,
+          },
+        } as unknown as ChangeEvent<HTMLInputElement>;
+        register.onChange(syntheticEvent);
+      },
+      [register],
+    );
+
+    const emitRegisterBlur = useCallback(
+      (nextValue: string) => {
+        if (!register?.onBlur) {
+          return;
+        }
+        const syntheticEvent = {
+          target: {
+            name: register.name,
+            value: nextValue,
+          },
+          currentTarget: {
+            name: register.name,
+            value: nextValue,
+          },
+        } as unknown as FocusEvent<HTMLInputElement>;
+        register.onBlur(syntheticEvent);
+      },
+      [register],
+    );
+
+    const currentState = disabled ? "disabled" : stateProp;
+    const isDisabled =
+      currentState === "disabled" || currentState === "loading";
+    const visualState =
+      priority === "tertiary"
+        ? isDisabled
+          ? "disabled"
+          : "default"
+        : !isDisabled && isFocused
+          ? "active"
+          : currentState;
+    const resolvedIconPosition =
+      iconPosition ?? (priority === "table" ? "left" : "right");
+    const resolvedBlock =
+      block || (priority === "table" && width === undefined);
+    const widthAttr =
+      width !== undefined
+        ? getFormFieldWidthAttr(width)
+        : resolvedBlock
+          ? "full"
+          : undefined;
+    const widthValue =
+      width !== undefined ? getFormFieldWidthValue(width) : undefined;
+    const containerStyle: CSSProperties | undefined =
+      widthValue !== undefined
+        ? ({ ["--input-time-width" as const]: widthValue } as CSSProperties)
+        : undefined;
+    const resolvedIcon = icon === undefined ? <ClockIcon /> : icon;
+    const showClearButton = Boolean(
+      clearable && timeValue && !isDisabled && !readOnly,
+    );
+    const reserveClearSpace = Boolean(clearable && !isDisabled && !readOnly);
+    const rightSectionWidth =
+      resolvedIconPosition === "right"
+        ? reserveClearSpace
+          ? "var(--input-time-section-width-with-clear)"
+          : "var(--input-time-section-width)"
+        : showClearButton
+          ? "var(--input-time-section-width)"
+          : undefined;
+
+    const handleChange = (nextValue: string) => {
+      setTimeValue(nextValue);
+      emitRegisterChange(nextValue);
+    };
+
+    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+      setIsFocused(true);
+      onFocus?.(event);
+    };
+
+    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
+      setIsFocused(false);
+      emitRegisterBlur(timeValue);
+      onBlur?.(event);
+    };
+
+    const handleIconClick = (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      if (isDisabled || readOnly) {
+        return;
+      }
+      hoursInputRef.current?.focus();
+    };
+
+    const handleClearClick = (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      if (isDisabled || readOnly) {
+        return;
+      }
+      handleChange("");
+      hoursInputRef.current?.focus();
+    };
+
+    const iconButton = resolvedIcon ? (
+      <button
+        type="button"
+        className="input-time-section-button input-time-icon-button"
+        tabIndex={-1}
+        aria-label={iconLabel}
+        aria-disabled={isDisabled || readOnly ? true : undefined}
+        onMouseDown={event => event.preventDefault()}
+        onClick={handleIconClick}
+      >
+        <span className="input-time-icon-graphic" aria-hidden="true">
+          {resolvedIcon}
+        </span>
+      </button>
+    ) : null;
+
+    const clearButton = showClearButton ? (
+      <button
+        type="button"
+        className="input-time-section-button input-time-clear-button"
+        tabIndex={-1}
+        aria-label={clearButtonLabel}
+        onMouseDown={event => event.preventDefault()}
+        onClick={handleClearClick}
+      >
+        <ResetIcon aria-hidden="true" />
+      </button>
+    ) : null;
+
+    const rightSection =
+      resolvedIconPosition === "right" ? (
+        <span className="input-time-section-group">
+          {clearButton}
+          {iconButton}
+        </span>
+      ) : (
+        clearButton
+      );
+
+    return (
+      <div
+        id={id}
+        className={clsx("input-time", className)}
+        data-priority={priority}
+        data-size={size}
+        data-state={visualState}
+        data-readonly={readOnly ? "true" : undefined}
+        data-block={resolvedBlock ? "true" : undefined}
+        data-icon-position={resolvedIconPosition}
+        data-has-value={timeValue ? "true" : "false"}
+        data-clearable={reserveClearSpace ? "true" : undefined}
+        data-has-clear={showClearButton ? "true" : undefined}
+        data-width={widthAttr}
+        style={containerStyle}
+      >
+        <MantineTimePicker
+          ref={ref}
+          className="input-time-picker"
+          classNames={INPUT_TIME_CLASS_NAMES}
+          value={timeValue}
+          onChange={handleChange}
+          name={register ? undefined : name}
+          form={register ? undefined : form}
+          required={required}
+          disabled={isDisabled}
+          readOnly={readOnly}
+          format={format}
+          withSeconds={withSeconds}
+          withDropdown={withDropdown}
+          clearable={false}
+          min={min}
+          max={max}
+          hoursStep={hoursStep}
+          minutesStep={minutesStep}
+          secondsStep={secondsStep}
+          hoursInputLabel={hoursInputLabel}
+          minutesInputLabel={minutesInputLabel}
+          secondsInputLabel={secondsInputLabel}
+          amPmInputLabel={amPmInputLabel}
+          amPmLabels={amPmLabels}
+          hoursPlaceholder={hoursPlaceholder}
+          minutesPlaceholder={minutesPlaceholder}
+          secondsPlaceholder={secondsPlaceholder}
+          pasteSplit={pasteSplit}
+          presets={presets}
+          maxDropdownContentHeight={maxDropdownContentHeight}
+          scrollAreaProps={scrollAreaProps}
+          reverseTimeControlsList={reverseTimeControlsList}
+          popoverProps={{
+            width: "target",
+            withinPortal: false,
+            ...popoverProps,
+          }}
+          hiddenInputProps={register ? undefined : hiddenInputProps}
+          size="sm"
+          variant="unstyled"
+          withErrorStyles={false}
+          aria-invalid={visualState === "error" ? true : undefined}
+          leftSection={resolvedIconPosition === "left" ? iconButton : undefined}
+          rightSection={rightSection}
+          leftSectionWidth={
+            resolvedIconPosition === "left"
+              ? "var(--input-time-left-section-width)"
+              : undefined
+          }
+          rightSectionWidth={rightSectionWidth}
+          leftSectionPointerEvents={
+            resolvedIconPosition === "left" ? "auto" : undefined
+          }
+          rightSectionPointerEvents={rightSection ? "auto" : undefined}
+          hoursRef={hoursInputRef}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+        {register ? (
+          <input
+            {...hiddenInputProps}
+            {...register}
+            type="hidden"
+            name={register.name}
+            form={form ?? hiddenInputProps?.form}
+            value={timeValue}
+          />
+        ) : null}
+      </div>
+    );
+  },
+);
+
+InputTimePicker.displayName = "InputTimePicker";
+
+export default InputTimePicker;

package/src/components/input/markup/time/index.tsx

@@ -0,0 +1,6 @@
+import "../../styles/time.scss";
+import InputTimePicker from "./Picker";
+
+export const InputTime = {
+  Picker: InputTimePicker,
+};