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

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

@@ -1,497 +0,0 @@
-'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

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

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

@@ -1,197 +0,0 @@
-.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

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