x-ui-design 1.0.31-gamma.1 → 1.0.33

package/lib/components/DatePicker/TimePicker/TimePicker.tsx

@@ -0,0 +1,497 @@
+'use client';
+
+import React, {
+  ChangeEvent,
+  FC,
+  FocusEvent,
+  MouseEvent as ReactMouseEvent,
+  ReactNode,
+  RefObject,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { clsx } from '../../../helpers';
+import { RuleType } from '../../../types';
+import { TimePickerProps } from '../../../types/datepicker';
+import { prefixClsTimePicker } from '../../../utils';
+import { ClearIcon, TimeIcon } from '../../Icons/Icons';
+import { ConditionalWrapper } from '../../../components/ConditionalWrapper';
+import { createPortal } from 'react-dom';
+import { usePosition } from '../../../hooks/usePosition';
+import './style.css';
+
+const HOURS = 24;
+const INPUT_SIZE = 13;
+const TIME_OPTION_PADDING = 4;
+const MINUTES_AND_SECONDS = 60;
+const ADD_EMPTY_SECTION_COUNT = 5;
+
+const pad = (num: number): string => String(num).padStart(2, '0');
+
+const TimePicker: FC<TimePickerProps> = ({
+  prefixCls = prefixClsTimePicker,
+  style = {},
+  className = '',
+  disabledTime,
+  inputReadOnly = false,
+  format = 'HH:mm:ss',
+  defaultValue = null,
+  value: propValue = null,
+  onChange,
+  onBlur,
+  onSelect,
+  showNow = true,
+  clearIcon = <ClearIcon />,
+  suffixIcon = <TimeIcon />,
+  placeholder = 'Select time',
+  getPopupContainer,
+  placement
+}) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const [innerValue, setInnerValue] = useState<Date | null>(
+    propValue || defaultValue ? new Date(propValue || defaultValue) : null
+  );
+
+  const [[showHour, showMinutes, showSeconds]] = useState(`${format}`.split(':'))
+
+  const [tempValue, setTempValue] = useState<Date | null>(null);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const hourRef = useRef<HTMLDivElement>(null);
+  const minuteRef = useRef<HTMLDivElement>(null);
+  const secondRef = useRef<HTMLDivElement>(null);
+
+  const { dropdownPosition } = usePosition({
+    popupRef,
+    placement,
+    isOpen: open,
+    triggerRef: inputRef,
+    getPopupContainer: getPopupContainer?.(inputRef.current as HTMLElement)
+  });
+
+
+  useEffect(() => {
+    setInnerValue(propValue || defaultValue ? new Date(propValue || defaultValue) : null);
+  }, [propValue])
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        popupRef.current &&
+        !popupRef.current.contains(e.target as Node) &&
+        inputRef.current &&
+        !inputRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+        setTempValue(null);
+
+        if (!innerValue) {
+          onChange?.(null as RuleType, '');
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [innerValue, onChange]);
+
+  useEffect(() => {
+    if (open) {
+      setTempValue(innerValue ? new Date(innerValue) : null);
+
+      const { hour = 0, minute = 0, second = 0 } = getTimeParts(innerValue);
+      scrollToTop(hourRef as { current: HTMLDivElement }, hour || 0);
+      scrollToTop(minuteRef as { current: HTMLDivElement }, minute || 0);
+      scrollToTop(secondRef as { current: HTMLDivElement }, second || 0);
+    }
+  }, [open, innerValue]);
+
+  useEffect(() => {
+    onSelect?.(tempValue);
+  }, [tempValue, onSelect]);
+
+  useEffect(() => {
+    if (open) {
+      setTempValue(innerValue ? new Date(innerValue) : null);
+    }
+  }, [open, innerValue]);
+
+  const formatDate = (date: Date | null): string => {
+    if (!date) {
+      return '';
+    }
+
+    return `${format}`
+      .replace(/HH|hh/, pad(date.getHours()))
+      .replace(/MM|mm/, pad(date.getMinutes()))
+      .replace(/SS|ss/, pad(date.getSeconds()));
+  };
+
+  const getTimeParts = (date: Date | null) => ({
+    hour: date?.getHours() ?? null,
+    minute: date?.getMinutes() ?? null,
+    second: date?.getSeconds() ?? null
+  });
+
+  const getDisabled = (
+    type: 'hour' | 'minute' | 'second',
+    hour = 0,
+    minute = 0
+  ): number[] => {
+    const disabled = disabledTime?.(tempValue || new Date());
+
+    if (!disabled) {
+      return [];
+    }
+
+    if (type === 'hour') {
+      return disabled.disabledHours?.() || [];
+    }
+
+    if (type === 'minute') {
+      return disabled.disabledMinutes?.(hour) || [];
+    }
+
+    if (type === 'second') {
+      return disabled.disabledSeconds?.(hour, minute) || [];
+    }
+
+    return [];
+  };
+
+  const scrollToTop = (
+    ref: RefObject<HTMLDivElement>,
+    selectedIndex: number
+  ): void => {
+    const el = ref.current?.querySelectorAll('div')[selectedIndex];
+
+    if (el && ref.current) {
+      ref.current.scrollTo({
+        top: el.offsetTop - TIME_OPTION_PADDING * 2,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  const updateTempValue = (hour: number, minute: number, second: number) => {
+    const newDate = new Date();
+    newDate.setHours(hour, minute, second, 0);
+    setTempValue(newDate);
+  };
+
+  const onSelectHour = (h: number, auto?: boolean): void => {
+    const { minute = 0, second = 0 } = getTimeParts(tempValue);
+
+    if (!auto) {
+      if (!minute) {
+        onSelectMinute(0, true);
+      }
+
+      if (!second) {
+        onSelectSecond(0, true);
+      }
+    }
+
+    updateTempValue(h, minute || 0, second || 0);
+    scrollToTop(hourRef as { current: HTMLDivElement }, h);
+  };
+
+  const onSelectMinute = (m: number, auto?: boolean): void => {
+    const { hour = 0, second = 0 } = getTimeParts(tempValue);
+
+    if (!auto) {
+      if (!hour) {
+        onSelectHour(0, true);
+      }
+
+      if (!second) {
+        onSelectSecond(0, true);
+      }
+    }
+
+    updateTempValue(hour || 0, m, second || 0);
+    scrollToTop(minuteRef as { current: HTMLDivElement }, m);
+  };
+
+  const onSelectSecond = (s: number, auto?: boolean): void => {
+    const { hour = 0, minute = 0 } = getTimeParts(tempValue);
+
+    if (!auto) {
+      if (!hour) {
+        onSelectHour(0, true);
+      }
+
+      if (!minute) {
+        onSelectMinute(0, true);
+      }
+    }
+
+    updateTempValue(hour || 0, minute || 0, s);
+    scrollToTop(secondRef as { current: HTMLDivElement }, s);
+  };
+
+  const handleClear = (e?: ReactMouseEvent<HTMLSpanElement>): void => {
+    e?.stopPropagation();
+    setInnerValue(null);
+    setTempValue(null);
+    onChange?.(null as RuleType, '');
+  };
+
+  const handleShowNow = (): void => {
+    const now = new Date();
+    setTempValue(now);
+    setInnerValue(now);
+    onChange?.(now, formatDate(now));
+    onSelect?.(now);
+    setOpen(false);
+  };
+
+  const handleOkButton = (): void => {
+    if (tempValue) {
+      setInnerValue(tempValue);
+      onChange?.(tempValue, formatDate(tempValue));
+      onSelect?.(tempValue);
+    }
+
+    setOpen(false);
+  };
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const inputVal = e.target.value.trim();
+    const timeRegex = /^(\d{2}):(\d{2}):(\d{2})$/;
+    const match = inputVal.match(timeRegex);
+
+    if (match) {
+      const [, hStr, mStr, sStr] = match;
+      const h = parseInt(hStr, 10);
+      const m = parseInt(mStr, 10);
+      const s = parseInt(sStr, 10);
+
+      if (
+        h >= 0 &&
+        h < HOURS &&
+        m >= 0 &&
+        m < MINUTES_AND_SECONDS &&
+        s >= 0 &&
+        s < MINUTES_AND_SECONDS &&
+        !getDisabled('hour').includes(h) &&
+        !getDisabled('minute', h).includes(m) &&
+        !getDisabled('second', h, m).includes(s)
+      ) {
+        onSelectHour(h);
+        onSelectMinute(m);
+        onSelectSecond(s);
+      }
+    }
+  };
+
+  const renderOptions = (): ReactNode => {
+    const hours = Array.from(
+      { length: HOURS + ADD_EMPTY_SECTION_COUNT },
+      (_, i) => (i < HOURS ? i : false)
+    );
+
+    const minutesSeconds = Array.from(
+      { length: MINUTES_AND_SECONDS + ADD_EMPTY_SECTION_COUNT },
+      (_, i) => (i < MINUTES_AND_SECONDS ? i : false)
+    );
+
+    const {
+      hour: selectedHour,
+      minute: selectedMinute,
+      second: selectedSecond
+    } = getTimeParts(tempValue);
+
+    const currentHour = selectedHour ?? 0;
+    const currentMinute = selectedMinute ?? 0;
+
+    return (
+      <div>
+        <div className={`${prefixCls}-panel`}>
+          {showHour ? <div ref={hourRef} className={`${prefixCls}-column`}>
+            {hours.map((h, index) =>
+              h === false ? (
+                <div
+                  key={`${h}_${index}`}
+                  className={`${prefixCls}-cell`}
+                  style={{ opacity: 0, userSelect: 'none', cursor: 'inherit' }}
+                >
+                  0
+                </div>
+              ) : (
+                <div
+                  key={h}
+                  className={clsx([
+                    `${prefixCls}-cell`,
+                    {
+                      [`${prefixCls}-cell-disabled`]:
+                        getDisabled('hour').includes(h),
+                      [`${prefixCls}-cell-selected`]: selectedHour === h
+                    }
+                  ])}
+                  onClick={() =>
+                    !getDisabled('hour').includes(h) && onSelectHour(h)
+                  }
+                >
+                  {pad(h)}
+                </div>
+              )
+            )}
+          </div> : null}
+
+          {showMinutes ? <div ref={minuteRef} className={`${prefixCls}-column`}>
+            {minutesSeconds.map((m, index) =>
+              m === false ? (
+                <div
+                  key={`${m}_${index}`}
+                  className={`${prefixCls}-cell`}
+                  style={{ opacity: 0, userSelect: 'none', cursor: 'inherit' }}
+                >
+                  0
+                </div>
+              ) : (
+                <div
+                  key={m}
+                  className={clsx([
+                    `${prefixCls}-cell`,
+                    {
+                      [`${prefixCls}-cell-disabled`]: getDisabled(
+                        'minute',
+                        currentHour
+                      ).includes(m),
+                      [`${prefixCls}-cell-selected`]: selectedMinute === m
+                    }
+                  ])}
+                  onClick={() =>
+                    !getDisabled('minute', currentHour).includes(m) &&
+                    onSelectMinute(m)
+                  }
+                >
+                  {pad(m)}
+                </div>
+              )
+            )}
+          </div> : null}
+
+          {showSeconds ? <div ref={secondRef} className={`${prefixCls}-column`}>
+            {minutesSeconds.map((s, index) =>
+              s === false ? (
+                <div
+                  key={`${s}_${index}`}
+                  className={`${prefixCls}-cell`}
+                  style={{ opacity: 0, userSelect: 'none', cursor: 'inherit' }}
+                >
+                  0
+                </div>
+              ) : (
+                <div
+                  key={s}
+                  className={clsx([
+                    `${prefixCls}-cell`,
+                    {
+                      [`${prefixCls}-cell-disabled`]: getDisabled(
+                        'second',
+                        currentHour,
+                        currentMinute
+                      ).includes(s),
+                      [`${prefixCls}-cell-selected`]: selectedSecond === s
+                    }
+                  ])}
+                  onClick={() =>
+                    !getDisabled('second', currentHour, currentMinute).includes(
+                      s
+                    ) && onSelectSecond(s)
+                  }
+                >
+                  {pad(s)}
+                </div>
+              )
+            )}
+          </div> : null}
+        </div>
+        <div className={`${prefixCls}-actions`}>
+          {showNow ? (
+            <div className={`${prefixCls}-now-btn`} onClick={handleShowNow}>
+              Now
+            </div>
+          ) : (
+            <span />
+          )}
+          <button
+            className={`${prefixCls}-ok-btn`}
+            disabled={
+              selectedHour === null ||
+              selectedMinute === null ||
+              selectedSecond === null
+            }
+            onClick={handleOkButton}
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={clsx([`${prefixCls}-wrapper`, className])} style={style}>
+      <div
+        className={`${prefixCls}-input-wrapper`}
+        onClick={() => setOpen(true)}
+      >
+        <input
+          ref={inputRef}
+          size={INPUT_SIZE}
+          placeholder={placeholder}
+          className={`${prefixCls}-input`}
+          readOnly={inputReadOnly}
+          onChange={handleOnChange}
+          // {...(open ? {} : { value: formatDate(innerValue) })}
+          value={open ? formatDate(tempValue) : formatDate(innerValue) || ''}
+          onBlur={(e: FocusEvent<HTMLInputElement>) => {
+            onBlur?.(e, { source: 'input' });
+          }}
+        />
+        <div className={`${prefixCls}-icons`}>
+          {clearIcon && innerValue ? (
+            <span className={`${prefixCls}-clear`} onClick={handleClear}>
+              {clearIcon}
+            </span>
+          ) : (
+            suffixIcon && (
+              <span
+                className={`${prefixCls}-suffix`}
+                onClick={e => {
+                  e.stopPropagation();
+                  setOpen(true);
+                }}
+              >
+                {suffixIcon}
+              </span>
+            )
+          )}
+        </div>
+      </div>
+
+      {open && (
+        <ConditionalWrapper
+          condition={getPopupContainer !== undefined}
+          wrapper={(element) => getPopupContainer ? createPortal(element, getPopupContainer(popupRef.current as HTMLElement)) : <>{element}</>}>
+          <div
+            ref={popupRef}
+            style={dropdownPosition}
+            className={`${prefixCls}-popup`}>
+            {renderOptions()}
+          </div>
+        </ConditionalWrapper>
+      )}
+    </div>
+  );
+};
+
+export default TimePicker;

package/lib/components/DatePicker/TimePicker/index.ts

@@ -0,0 +1 @@
+export { default as TimePicker } from '../TimePicker/TimePicker'

package/lib/components/DatePicker/TimePicker/style.css

@@ -0,0 +1,197 @@
+.xUi-timepicker-wrapper {
+    position: relative;
+    display: inline-block;
+    font-size: 14px;
+}
+
+.xUi-timepicker-input-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.xUi-timepicker-input {
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    padding: 4px 11px;
+    border: 1px solid var(--xui-border-color);
+    border-radius: 6px;
+    transition: all 0.3s;
+    box-sizing: border-box;
+    font-size: 14px;
+}
+
+.xUi-timepicker-input:hover {
+    border-color: var(--xui-primary-color-light);
+}
+
+.xUi-timepicker-input:focus {
+    border-color: var(--xui-primary-color-light);
+    outline: none;
+}
+
+.xUi-timepicker-input::placeholder {
+    opacity: 0.6;
+}
+
+.xUi-timepicker-clear {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+    cursor: pointer;
+    z-index: 2;
+}
+
+.xUi-timepicker-clear:hover {
+    color: rgba(0, 0, 0, 0.75);
+}
+
+.xUi-timepicker-popup {
+    display: flex;
+    min-width: max-content;
+    background: #fff;
+    border: 1px solid var(--xui-border-color);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border-radius: 8px;
+    margin-top: 4px;
+    padding: 8px 0;
+    z-index: 1;
+    position: absolute;
+    top: 100%;
+    left: 0;
+}
+
+.xUi-timepicker-panel {
+    display: flex;
+    width: 100%;
+}
+
+.xUi-timepicker-column {
+    flex: 1;
+    max-height: 169px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 52px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-left: 4px;
+    margin-bottom: 5px;
+}
+
+.xUi-timepicker-column::-webkit-scrollbar,
+.xUi-timepicker-column::-webkit-scrollbar-thumb,
+.xUi-timepicker-column::-webkit-scrollbar-thumb {
+    width: 4px;
+}
+
+.xUi-timepicker-column:nth-child(2) {
+    border-left: 1px solid var(--xui-border-color);
+    border-right: 1px solid var(--xui-border-color);
+}
+
+.xUi-timepicker-cell {
+    padding: 6px 0;
+    text-align: center;
+    cursor: pointer;
+    transition: background 0.3s;
+    border-radius: 4px;
+    font-size: 14px;
+    width: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 2px;
+}
+
+.xUi-timepicker-cell:hover {
+    background-color: #e6f4ff;
+}
+
+.xUi-timepicker-cell-selected {
+    background-color: #e6f4ff;
+    font-weight: 500;
+}
+
+.xUi-timepicker-cell-disabled {
+    color: rgba(0, 0, 0, 0.25);
+    pointer-events: none;
+    user-select: none;
+}
+
+.xUi-timepicker-now-btn {
+    margin-top: 10px;
+    text-align: center;
+    padding: 0 0 4px;
+    cursor: pointer;
+    color: #4096ff;
+    font-weight: 500;
+    transition: background 0.3s;
+}
+
+.xUi-timepicker-icons {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.xUi-timepicker-suffix {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.xUi-timepicker-suffix svg {
+    width: 14px;
+    height: 14px;
+    color: #999;
+}
+
+.xUi-timepicker-clear {
+    right: 0;
+    top: 1px;
+}
+
+.xUi-timepicker-actions {
+    display: flex;
+    padding: 0 8px;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid var(--xui-border-color);
+}
+
+.xUi-timepicker-ok-btn {
+    border: none;
+    outline: none;
+    margin-top: 7px;
+    border-radius: 4px;
+    color: #fff;
+    cursor: pointer;
+    padding: 4px 8px;
+    transition: 0.3s ease;
+    background-color: var(--xui-primary-color);
+}
+
+.xUi-timepicker-ok-btn:disabled {
+    color: grey;
+    font-size: 13px;
+    background-color: var(--xui-color-disabled);
+}
+
+.xUi-timepicker-ok-btn:not(:disabled):hover {
+    background-color: var(--xui-primary-color-light);
+}
+
+.xUi-timepicker-popup {
+    position: absolute;
+    top: 100%;
+    margin-top: 4px;
+}

package/lib/components/DatePicker/index.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from '../DatePicker/DatePicker'