@uniai-fe/uds-primitives 0.11.0 → 0.12.0

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

@@ -0,0 +1,289 @@
+"use client";
+
+import clsx from "clsx";
+import type {
+  ChangeEvent,
+  ComponentPropsWithoutRef,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+} from "react";
+import { forwardRef, useRef } from "react";
+import { Calendar } from "../../../calendar";
+import type {
+  TimePickerFormat,
+  TimePickerPeriod,
+  TimePickerUnit,
+} from "../../../time-picker/types";
+import type { InputPriority, InputSize, InputState } from "../../types";
+
+interface InputTimeTriggerFields {
+  hours: string;
+  minutes: string;
+  seconds: string;
+}
+
+interface InputTimeTriggerProps extends Omit<
+  ComponentPropsWithoutRef<"div">,
+  "onBlur" | "onFocus"
+> {
+  fields: InputTimeTriggerFields;
+  period: TimePickerPeriod;
+  activeUnit: TimePickerUnit | null;
+  priority: InputPriority;
+  size: InputSize;
+  state: InputState;
+  format: TimePickerFormat;
+  withSeconds: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  icon: ReactNode;
+  iconPosition: "left" | "right";
+  iconLabel: string;
+  hoursInputLabel: string;
+  minutesInputLabel: string;
+  secondsInputLabel: string;
+  amPmInputLabel: string;
+  hoursPlaceholder: string;
+  minutesPlaceholder: string;
+  secondsPlaceholder: string;
+  onFieldChange: (unit: TimePickerUnit, value: string) => void;
+  onFieldFocus: (
+    unit: TimePickerUnit,
+    event: FocusEvent<HTMLInputElement>,
+  ) => void;
+  onFieldBlur: (unit: TimePickerUnit) => void;
+  onFieldKeyDown: (
+    unit: TimePickerUnit,
+    event: KeyboardEvent<HTMLInputElement>,
+  ) => void;
+  onPeriodChange: (period: TimePickerPeriod) => void;
+  onStep: (amount: 1 | -1) => void;
+  onRootBlur: (event: FocusEvent<HTMLDivElement>) => void;
+}
+
+/**
+ * Input Time trigger; 시·분·초 field와 focus 단위 stepper를 렌더한다.
+ * @component
+ * @param {InputTimeTriggerProps} props
+ * @returns {ReactNode} 시간 입력 trigger
+ */
+const InputTimeTrigger = forwardRef<HTMLDivElement, InputTimeTriggerProps>(
+  (
+    {
+      fields,
+      period,
+      activeUnit,
+      priority,
+      size,
+      state,
+      format,
+      withSeconds,
+      disabled,
+      readOnly,
+      icon,
+      iconPosition,
+      iconLabel,
+      hoursInputLabel,
+      minutesInputLabel,
+      secondsInputLabel,
+      amPmInputLabel,
+      hoursPlaceholder,
+      minutesPlaceholder,
+      secondsPlaceholder,
+      onFieldChange,
+      onFieldFocus,
+      onFieldBlur,
+      onFieldKeyDown,
+      onPeriodChange,
+      onStep,
+      onRootBlur,
+      className,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const hoursRef = useRef<HTMLInputElement | null>(null);
+    const onChange =
+      (unit: TimePickerUnit) => (event: ChangeEvent<HTMLInputElement>) => {
+        onFieldChange(unit, event.currentTarget.value);
+      };
+    const onFocus =
+      (unit: TimePickerUnit) => (event: FocusEvent<HTMLInputElement>) => {
+        onFieldFocus(unit, event);
+      };
+    const onBlur = (unit: TimePickerUnit) => () => onFieldBlur(unit);
+    const onKeyDown =
+      (unit: TimePickerUnit) => (event: KeyboardEvent<HTMLInputElement>) => {
+        onFieldKeyDown(unit, event);
+      };
+    const onStepperMouseDown = (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+    };
+    const onInteractiveClick = (event: MouseEvent<HTMLElement>) => {
+      event.stopPropagation();
+    };
+    const onClockClick = () => {
+      hoursRef.current?.focus();
+    };
+
+    return (
+      <div
+        {...restProps}
+        ref={ref}
+        className={clsx("input-time input-time-picker", className)}
+        data-priority={priority}
+        data-size={size}
+        data-state={state}
+        data-readonly={readOnly ? "true" : undefined}
+        data-active-unit={activeUnit ?? undefined}
+        data-icon-position={iconPosition}
+        onBlur={onRootBlur}
+      >
+        <div className="input-time-trigger-input">
+          {iconPosition === "left" ? (
+            <button
+              type="button"
+              className="input-time-icon-button"
+              tabIndex={-1}
+              aria-label={iconLabel}
+              disabled={disabled}
+              onMouseDown={onStepperMouseDown}
+              onClick={onClockClick}
+            >
+              {icon}
+            </button>
+          ) : null}
+          <div className="input-time-fields-group">
+            <input
+              ref={hoursRef}
+              className="input-time-field"
+              type="text"
+              inputMode="numeric"
+              autoComplete="off"
+              maxLength={2}
+              value={fields.hours}
+              placeholder={hoursPlaceholder}
+              aria-label={hoursInputLabel}
+              aria-invalid={state === "error" ? true : undefined}
+              disabled={disabled}
+              readOnly={readOnly}
+              onChange={onChange("hours")}
+              onClick={onInteractiveClick}
+              onFocus={onFocus("hours")}
+              onBlur={onBlur("hours")}
+              onKeyDown={onKeyDown("hours")}
+            />
+            <span aria-hidden="true">:</span>
+            <input
+              className="input-time-field"
+              type="text"
+              inputMode="numeric"
+              autoComplete="off"
+              maxLength={2}
+              value={fields.minutes}
+              placeholder={minutesPlaceholder}
+              aria-label={minutesInputLabel}
+              aria-invalid={state === "error" ? true : undefined}
+              disabled={disabled}
+              readOnly={readOnly}
+              onChange={onChange("minutes")}
+              onClick={onInteractiveClick}
+              onFocus={onFocus("minutes")}
+              onBlur={onBlur("minutes")}
+              onKeyDown={onKeyDown("minutes")}
+            />
+            {withSeconds ? (
+              <>
+                <span aria-hidden="true">:</span>
+                <input
+                  className="input-time-field"
+                  type="text"
+                  inputMode="numeric"
+                  autoComplete="off"
+                  maxLength={2}
+                  value={fields.seconds}
+                  placeholder={secondsPlaceholder}
+                  aria-label={secondsInputLabel}
+                  aria-invalid={state === "error" ? true : undefined}
+                  disabled={disabled}
+                  readOnly={readOnly}
+                  onChange={onChange("seconds")}
+                  onClick={onInteractiveClick}
+                  onFocus={onFocus("seconds")}
+                  onBlur={onBlur("seconds")}
+                  onKeyDown={onKeyDown("seconds")}
+                />
+              </>
+            ) : null}
+            {format === "12h" ? (
+              <select
+                className="input-time-period-field"
+                value={period}
+                aria-label={amPmInputLabel}
+                disabled={disabled}
+                onClick={onInteractiveClick}
+                onChange={event =>
+                  onPeriodChange(
+                    event.currentTarget.value === "pm" ? "pm" : "am",
+                  )
+                }
+              >
+                <option value="am">오전</option>
+                <option value="pm">오후</option>
+              </select>
+            ) : null}
+          </div>
+          {iconPosition === "right" ? (
+            <button
+              type="button"
+              className="input-time-icon-button"
+              tabIndex={-1}
+              aria-label={iconLabel}
+              disabled={disabled}
+              onMouseDown={onStepperMouseDown}
+              onClick={onClockClick}
+            >
+              {icon}
+            </button>
+          ) : null}
+        </div>
+        {activeUnit && !disabled && !readOnly ? (
+          <div className="input-time-stepper" aria-label="시간 값 조절">
+            <button
+              type="button"
+              className="input-time-stepper-button"
+              tabIndex={-1}
+              aria-label={`${activeUnit} 증가`}
+              onMouseDown={onStepperMouseDown}
+              onClick={event => {
+                onInteractiveClick(event);
+                onStep(1);
+              }}
+            >
+              <Calendar.Icon.Chevron.up aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              className="input-time-stepper-button"
+              tabIndex={-1}
+              aria-label={`${activeUnit} 감소`}
+              onMouseDown={onStepperMouseDown}
+              onClick={event => {
+                onInteractiveClick(event);
+                onStep(-1);
+              }}
+            >
+              <Calendar.Icon.Chevron.down aria-hidden="true" />
+            </button>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+InputTimeTrigger.displayName = "InputTimeTrigger";
+
+export default InputTimeTrigger;

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

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