x-ui-design 0.5.71 → 0.5.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/x-ui-design.yml +14 -0
- package/dist/esm/types/components/DatePicker/DatePicker.d.ts +1 -3
- package/dist/esm/types/components/DatePicker/RangePicker/RangePicker.d.ts +1 -1
- package/dist/index.esm.js +243 -244
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +243 -244
- package/dist/index.js.map +1 -1
- package/lib/components/DatePicker/DatePicker.tsx +1 -6
- package/lib/components/DatePicker/RangePicker/RangePicker.tsx +2 -0
- package/package.json +1 -1
- package/src/app/page.tsx +8 -1
- package/tsconfig.json +1 -1
|
@@ -4,7 +4,5 @@ import './style.css';
|
|
|
4
4
|
export declare const NUMBER_SIX = 6;
|
|
5
5
|
export declare const MONTH_LENGTH = 11;
|
|
6
6
|
export declare const NEXT_DAYS_COUNT_AS_CURRENT_MUNTH = 35;
|
|
7
|
-
declare const DatePicker: (
|
|
8
|
-
RangePicker: ({ prefixCls, value, onChange, placeholder, disabled, error, format, prefix, allowClear, inputReadOnly, size, picker, locale, disabledDate, style, className, separator, defaultValue, bordered }: import("../../types/datepicker").TRangePickerProps) => React.JSX.Element;
|
|
9
|
-
};
|
|
7
|
+
declare const DatePicker: ({ value, onChange, onCalendarChange, disabled, error, placeholder, prefixCls, noStyle, feedbackIcons, locale, placement, defaultValue, size, format, getPopupContainer, showToday, allowClear, disabledDate, suffixIcon, picker, prefix, defaultOpen, inputReadOnly, bordered }: TDatePickerProps) => React.JSX.Element;
|
|
10
8
|
export default DatePicker;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TRangePickerProps } from '../../../types/datepicker';
|
|
3
3
|
import './style.css';
|
|
4
|
-
declare const RangePicker: ({ prefixCls, value, onChange, placeholder, disabled, error, format, prefix, allowClear, inputReadOnly, size, picker, locale, disabledDate, style, className, separator, defaultValue, bordered }: TRangePickerProps) => React.JSX.Element;
|
|
4
|
+
declare const RangePicker: ({ prefixCls, value, onChange, placeholder, disabled, error, format, prefix, allowClear, inputReadOnly, size, picker, locale, disabledDate, onCalendarChange, style, className, separator, defaultValue, bordered }: TRangePickerProps) => React.JSX.Element;
|
|
5
5
|
export default RangePicker;
|
package/dist/index.esm.js
CHANGED
|
@@ -1840,254 +1840,15 @@ var Upload$1 = /*#__PURE__*/Object.freeze({
|
|
|
1840
1840
|
default: Upload
|
|
1841
1841
|
});
|
|
1842
1842
|
|
|
1843
|
-
var css_248z$f = ".xUi-
|
|
1843
|
+
var css_248z$f = ".xUi-datepicker-container{font-family:Arial,sans-serif;height:max-content;position:relative}.xUi-datepicker-input{align-items:center;background-color:transparent;border:1px solid var(--xui-border-color);border-radius:6px;color:var(--xui-text-color);cursor:pointer;display:flex;gap:8px;justify-content:space-between;padding:3px 7px;transition:all .3s}.xUi-datepicker-input.noBordered{border:none!important}.xUi-datepicker-input input{border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-sm);outline:none;padding:0}.xUi-datepicker-input:placeholder-shown{text-overflow:ellipsis}.xUi-datepicker-input:hover{border-color:var(--xui-primary-color)}.xUi-datepicker-icon{color:var(--xui-text-color);cursor:pointer;height:16px;opacity:.6;transition:.3s ease;width:16px}.xUi-datepicker-icon:hover{color:var(--xui-primary-color);opacity:1}.xUi-datepicker-selected-date{border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-md);letter-spacing:.8px;outline:none}.xUi-datepicker-disabled{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color)!important;cursor:not-allowed;opacity:.5}.xUi-datepicker-disabled .xUi-datepicker-selected-date{cursor:not-allowed;opacity:.6}.xUi-datepicker-disabled .xUi-datepicker-icon{cursor:not-allowed}.xUi-datepicker-icon{align-items:center;color:#8c8c8c;display:flex;font-size:16px;gap:6px}.xUi-datepicker-error{border-color:var(--xui-error-color)}.xUi-datepicker-error .error-svg-icon,.xUi-datepicker-error .xUi-datepicker-icon,.xUi-datepicker-icon .error-svg-icon{color:var(--xui-error-color)}.xUi-datepicker-input.sm{font-size:var(--xui-font-size-sm);padding:4px 8px}.xUi-datepicker-input.md{font-size:var(--xui-font-size-md);padding:8px 12px}.xUi-datepicker-input.lg{font-size:var(--xui-font-size-lg);padding:10px 16px}.xUi-datepicker-dropdown-wrapper{opacity:0;pointer-events:none;position:absolute;transform:scale(.95);transition:opacity .2s ease,transform .2s ease;z-index:1000}.xUi-datepicker-dropdown-wrapper.bottomLeft{left:0;margin-top:4px;top:100%}.xUi-datepicker-dropdown-wrapper.bottomRight{margin-top:4px;right:0;top:100%}.xUi-datepicker-dropdown-wrapper.topLeft{bottom:100%;left:0;margin-bottom:4px}.xUi-datepicker-dropdown-wrapper.topRight{bottom:100%;margin-bottom:4px;right:0}.xUi-datepicker-dropdown-wrapper.show{opacity:1;pointer-events:auto;transform:scale(1)}.xUi-datepicker-dropdown{background:var(--xui-background-color);border:1px solid var(--xui-border-color);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);min-width:250px;padding:12px}.xUi-datepicker-header{align-items:center;border-bottom:1px solid var(--xui-border-color);display:flex;gap:8px;justify-content:space-between;margin-bottom:8px;padding-bottom:12px}.xUi-datepicker-day-footer{align-items:center;border-top:1px solid var(--xui-border-color);display:flex;justify-content:center;margin-top:8px;padding-top:12px;width:100%}.xUi-datepicker-nav-buttons{display:flex;gap:4px}.xUi-datepicker-nav-buttons button{background:none;border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;font-size:20px;opacity:.7;padding:2px 6px;transition:all .3s}.xUi-datepicker-nav-buttons button:not(:disabled):hover{color:var(--xui-primary-color)}.xUi-datepicker-dropdown-selects{align-items:center;display:flex;gap:6px}.xUi-datepicker-dropdown-selects button,.xUi-datepicker-select{background:var(--xui-background-color);border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;font-weight:600;padding:4px 8px;transition:all .3s}.xUi-datepicker-dropdown-selects button:hover,.xUi-datepicker-select:not(:disabled):hover{color:var(--xui-primary-color)}.xUi-datepicker-grid{display:grid;gap:2px;grid-template-columns:repeat(3,1fr);text-align:center}.xUi-datepicker-grid.day{grid-template-columns:repeat(7,1fr)}.xUi-datepicker-day-header{color:var(--xui-text-color);font-size:14px;margin:4px 0;user-select:none}.xUi-datepicker-day,.xUi-datepicker-month,.xUi-datepicker-year{background:none;border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;height:30px;line-height:30px;min-width:30px;text-align:center;transition:all .2s}.xUi-datepicker-month,.xUi-datepicker-year{margin:7px}.xUi-datepicker-day:disabled,.xUi-datepicker-month:disabled,.xUi-datepicker-select:disabled,.xUi-datepicker-year:disabled{background-color:var(--xui-color-disabled);cursor:not-allowed;opacity:.5}.xUi-datepicker-day:not(:disabled):hover,.xUi-datepicker-month:not(:disabled):hover,.xUi-datepicker-year:not(:disabled):hover{background:var(--xui-primary-color-light);color:#fff}.xUi-datepicker-selected{background:var(--xui-primary-color)!important;color:#fff!important;font-weight:700}.xUi-datepicker-other-month{color:var(--xui-text-color);opacity:.4}.xUi-datepicker-other-month:not(:disabled):hover{background-color:var(--xui-color-hover);color:var(--xui-text-color);user-select:none}.xUi-datepicker-footer{margin-top:12px;text-align:right}.xUi-datepicker-footer-today-btn{background:none;border:1px solid var(--xui-border-color);border-radius:4px;color:var(--xui-primary-color);cursor:pointer;font-size:13px;padding:4px 8px;transition:all .3s}.xUi-datepicker-footer-today-btn:not(:disabled):hover{background-color:var(--xui-primary-color-light);color:#fff}.xUi-datepicker-large .xUi-datepicker-selected-date{font-size:16px}.xUi-datepicker-large .xUi-datepicker-input{padding:11px}.xUi-datepicker-middle .xUi-datepicker-input{padding:6px 11px}";
|
|
1844
1844
|
styleInject(css_248z$f);
|
|
1845
1845
|
|
|
1846
|
-
const RangePicker = ({
|
|
1847
|
-
prefixCls = prefixClsRangePicker,
|
|
1848
|
-
value,
|
|
1849
|
-
onChange,
|
|
1850
|
-
placeholder = ['Start date', 'End date'],
|
|
1851
|
-
disabled,
|
|
1852
|
-
error,
|
|
1853
|
-
format = 'YYYY-MM-DD',
|
|
1854
|
-
prefix,
|
|
1855
|
-
allowClear = true,
|
|
1856
|
-
inputReadOnly = false,
|
|
1857
|
-
size = 'large',
|
|
1858
|
-
picker = 'date',
|
|
1859
|
-
locale,
|
|
1860
|
-
disabledDate,
|
|
1861
|
-
style = {},
|
|
1862
|
-
className = '',
|
|
1863
|
-
separator,
|
|
1864
|
-
defaultValue,
|
|
1865
|
-
bordered = true
|
|
1866
|
-
}) => {
|
|
1867
|
-
const containerRef = useRef(null);
|
|
1868
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
1869
|
-
const [selectedDates, setSelectedDates] = useState([value?.[0] || defaultValue?.[0] || null, value?.[1] || defaultValue?.[1] || null]);
|
|
1870
|
-
const [hoveredDate, setHoveredDate] = useState(null);
|
|
1871
|
-
const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
|
|
1872
|
-
const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
|
|
1873
|
-
const [viewMode, setViewMode] = useState(picker === 'month' ? 'month' : picker === 'year' ? 'year' : 'day');
|
|
1874
|
-
const localeMonths = locale?.shortMonths || Array.from({
|
|
1875
|
-
length: 12
|
|
1876
|
-
}, (_, i) => new Date(0, i).toLocaleString(locale?.locale || 'default', {
|
|
1877
|
-
month: 'short'
|
|
1878
|
-
}));
|
|
1879
|
-
const localeWeekdays = locale?.shortWeekDays || ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
1880
|
-
useEffect(() => {
|
|
1881
|
-
const handleClickOutside = event => {
|
|
1882
|
-
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
1883
|
-
setIsOpen(false);
|
|
1884
|
-
}
|
|
1885
|
-
};
|
|
1886
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
1887
|
-
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
1888
|
-
}, []);
|
|
1889
|
-
const handleSelect = date => {
|
|
1890
|
-
if (!selectedDates[0] || selectedDates[0] && selectedDates[1]) {
|
|
1891
|
-
setSelectedDates([date, null]);
|
|
1892
|
-
} else {
|
|
1893
|
-
const start = selectedDates[0];
|
|
1894
|
-
const end = date < start ? start : date;
|
|
1895
|
-
const begin = date < start ? date : start;
|
|
1896
|
-
setSelectedDates([begin, end]);
|
|
1897
|
-
onChange?.([begin.toUTCString(), end.toUTCString()], [formatDate(begin), formatDate(end)]);
|
|
1898
|
-
setIsOpen(false);
|
|
1899
|
-
}
|
|
1900
|
-
};
|
|
1901
|
-
const isMonthDisabled = month => {
|
|
1902
|
-
const date = new Date(currentYear, month + 1, 1);
|
|
1903
|
-
return disabledDate?.(date, {
|
|
1904
|
-
from: undefined,
|
|
1905
|
-
to: undefined
|
|
1906
|
-
});
|
|
1907
|
-
};
|
|
1908
|
-
const isYearDisabled = year => {
|
|
1909
|
-
const date = new Date(year + 1, currentMonth, 1);
|
|
1910
|
-
return disabledDate?.(date, {
|
|
1911
|
-
from: undefined,
|
|
1912
|
-
to: undefined
|
|
1913
|
-
});
|
|
1914
|
-
};
|
|
1915
|
-
const formatDate = date => {
|
|
1916
|
-
if (typeof format === 'function') {
|
|
1917
|
-
return format(date);
|
|
1918
|
-
}
|
|
1919
|
-
return `${format}`.replace(/YYYY/, date.getFullYear().toString()).replace(/MM/, (date.getMonth() + 1).toString().padStart(2, '0')).replace(/DD/, date.getDate().toString().padStart(2, '0'));
|
|
1920
|
-
};
|
|
1921
|
-
const isInRange = date => {
|
|
1922
|
-
const [start, end] = selectedDates;
|
|
1923
|
-
return start && end && date > start && date < end;
|
|
1924
|
-
};
|
|
1925
|
-
const renderMonthYearSelector = (monthOffset = 0, all) => {
|
|
1926
|
-
const baseYear = currentYear;
|
|
1927
|
-
const baseMonth = currentMonth + monthOffset;
|
|
1928
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
1929
|
-
className: `${prefixCls}-header`
|
|
1930
|
-
}, all || !monthOffset ? /*#__PURE__*/React.createElement("div", {
|
|
1931
|
-
className: `${prefixCls}-nav-buttons`
|
|
1932
|
-
}, /*#__PURE__*/React.createElement("button", {
|
|
1933
|
-
onClick: () => setCurrentYear(y => y - 1)
|
|
1934
|
-
}, "\xAB"), /*#__PURE__*/React.createElement("button", {
|
|
1935
|
-
onClick: () => setCurrentMonth(m => m === 0 ? (setCurrentYear(y => y - 1), MONTH_LENGTH) : m - 1)
|
|
1936
|
-
}, "\u2039")) : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
|
|
1937
|
-
className: `${prefixCls}-dropdown-selects`
|
|
1938
|
-
}, /*#__PURE__*/React.createElement("button", {
|
|
1939
|
-
type: "button",
|
|
1940
|
-
className: `${prefixCls}-select`,
|
|
1941
|
-
onClick: () => setViewMode('year')
|
|
1942
|
-
}, baseYear), /*#__PURE__*/React.createElement("button", {
|
|
1943
|
-
type: "button",
|
|
1944
|
-
className: `${prefixCls}-select`,
|
|
1945
|
-
onClick: () => setViewMode('month')
|
|
1946
|
-
}, localeMonths[baseMonth])), all || monthOffset ? /*#__PURE__*/React.createElement("div", {
|
|
1947
|
-
className: `${prefixCls}-nav-buttons`
|
|
1948
|
-
}, /*#__PURE__*/React.createElement("button", {
|
|
1949
|
-
onClick: () => setCurrentMonth(m => m === MONTH_LENGTH ? (setCurrentYear(y => y + 1), 0) : m + 1)
|
|
1950
|
-
}, "\u203A"), /*#__PURE__*/React.createElement("button", {
|
|
1951
|
-
onClick: () => setCurrentYear(y => y + 1)
|
|
1952
|
-
}, "\xBB")) : /*#__PURE__*/React.createElement("span", null));
|
|
1953
|
-
};
|
|
1954
|
-
const renderCalendar = (monthOffset = 0, all) => {
|
|
1955
|
-
const baseDate = new Date(currentYear, currentMonth + monthOffset, 1);
|
|
1956
|
-
const year = baseDate.getFullYear();
|
|
1957
|
-
const month = baseDate.getMonth();
|
|
1958
|
-
const firstDay = new Date(year, month, 1).getDay();
|
|
1959
|
-
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
1960
|
-
const prevMonthDays = (() => {
|
|
1961
|
-
const prevMonth = new Date(year, month, 0);
|
|
1962
|
-
const totalDays = prevMonth.getDate();
|
|
1963
|
-
return Array.from({
|
|
1964
|
-
length: firstDay
|
|
1965
|
-
}, (_, i) => new Date(year, month - 1, totalDays - firstDay + i + 1));
|
|
1966
|
-
})();
|
|
1967
|
-
const currentMonthDays = Array.from({
|
|
1968
|
-
length: daysInMonth
|
|
1969
|
-
}, (_, i) => new Date(year, month, i + 1));
|
|
1970
|
-
const totalDisplayed = prevMonthDays.length + currentMonthDays.length;
|
|
1971
|
-
const remaining = NEXT_DAYS_COUNT_AS_CURRENT_MUNTH - totalDisplayed;
|
|
1972
|
-
const nextMonthDays = Array.from({
|
|
1973
|
-
length: remaining
|
|
1974
|
-
}, (_, i) => new Date(year, month + 1, i + 1));
|
|
1975
|
-
const days = [...prevMonthDays, ...currentMonthDays, ...nextMonthDays];
|
|
1976
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
1977
|
-
className: `${prefixCls}-calendar ${viewMode}`
|
|
1978
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
1979
|
-
className: `${prefixCls}-calendar-header`
|
|
1980
|
-
}, renderMonthYearSelector(monthOffset, all)), viewMode === 'day' && /*#__PURE__*/React.createElement("div", {
|
|
1981
|
-
className: `${prefixCls}-days-grid day`
|
|
1982
|
-
}, localeWeekdays.map((day, i) => /*#__PURE__*/React.createElement("div", {
|
|
1983
|
-
key: i,
|
|
1984
|
-
className: `${prefixCls}-weekday`
|
|
1985
|
-
}, day)), days.map((day, i) => {
|
|
1986
|
-
const isSelected = day && selectedDates.some(d => d?.toDateString() === day?.toDateString());
|
|
1987
|
-
const inRange = day && isInRange(day);
|
|
1988
|
-
const isSameMonth = day?.getMonth() === month;
|
|
1989
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
1990
|
-
key: i,
|
|
1991
|
-
disabled: disabledDate?.(day, {
|
|
1992
|
-
from: undefined,
|
|
1993
|
-
to: undefined
|
|
1994
|
-
}),
|
|
1995
|
-
onClick: () => day && handleSelect(day),
|
|
1996
|
-
onMouseEnter: () => day && setHoveredDate(day),
|
|
1997
|
-
className: clsx([`${prefixCls}-day`, {
|
|
1998
|
-
[`${prefixCls}-selected`]: isSelected,
|
|
1999
|
-
[`${prefixCls}-in-range`]: inRange,
|
|
2000
|
-
[`${prefixCls}-hover-end`]: hoveredDate && selectedDates[0] && !selectedDates[1] && hoveredDate > selectedDates[0] && hoveredDate?.toDateString() === day?.toDateString(),
|
|
2001
|
-
[`${prefixCls}-other-month`]: !isSameMonth
|
|
2002
|
-
}])
|
|
2003
|
-
}, day?.getDate());
|
|
2004
|
-
})), viewMode === 'month' && /*#__PURE__*/React.createElement("div", {
|
|
2005
|
-
className: `${prefixCls}-grid`
|
|
2006
|
-
}, localeMonths.map((m, i) => /*#__PURE__*/React.createElement("button", {
|
|
2007
|
-
key: i,
|
|
2008
|
-
className: `${prefixCls}-month`,
|
|
2009
|
-
onClick: () => {
|
|
2010
|
-
setCurrentMonth(i);
|
|
2011
|
-
setViewMode('day');
|
|
2012
|
-
},
|
|
2013
|
-
disabled: isMonthDisabled(i)
|
|
2014
|
-
}, m))), viewMode === 'year' && /*#__PURE__*/React.createElement("div", {
|
|
2015
|
-
className: `${prefixCls}-grid`
|
|
2016
|
-
}, Array.from({
|
|
2017
|
-
length: 12
|
|
2018
|
-
}, (_, i) => {
|
|
2019
|
-
const year = currentYear - NUMBER_SIX + i;
|
|
2020
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
2021
|
-
key: year,
|
|
2022
|
-
className: `${prefixCls}-year`,
|
|
2023
|
-
disabled: isYearDisabled(year),
|
|
2024
|
-
onClick: () => {
|
|
2025
|
-
setCurrentYear(year);
|
|
2026
|
-
setViewMode('month');
|
|
2027
|
-
}
|
|
2028
|
-
}, year);
|
|
2029
|
-
})));
|
|
2030
|
-
};
|
|
2031
|
-
const handleClear = () => {
|
|
2032
|
-
setSelectedDates([null, null]);
|
|
2033
|
-
onChange?.(null, ['', '']);
|
|
2034
|
-
};
|
|
2035
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
2036
|
-
ref: containerRef,
|
|
2037
|
-
style: style,
|
|
2038
|
-
className: clsx([`${prefixCls}-range-container`, {
|
|
2039
|
-
[`${prefixCls}-${size}`]: size,
|
|
2040
|
-
[className]: className
|
|
2041
|
-
}])
|
|
2042
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
2043
|
-
className: `${prefixCls}-range-input-wrapper`
|
|
2044
|
-
}, /*#__PURE__*/React.createElement("button", {
|
|
2045
|
-
type: "button",
|
|
2046
|
-
className: clsx([`${prefixCls}-input`, {
|
|
2047
|
-
noBordered: !bordered,
|
|
2048
|
-
[`${prefixCls}-error`]: error,
|
|
2049
|
-
[`${prefixCls}-disabled`]: disabled
|
|
2050
|
-
}]),
|
|
2051
|
-
disabled: disabled,
|
|
2052
|
-
onClick: () => setIsOpen(!isOpen)
|
|
2053
|
-
}, prefix, /*#__PURE__*/React.createElement("input", {
|
|
2054
|
-
readOnly: inputReadOnly,
|
|
2055
|
-
className: `${prefixCls}-selected-date`,
|
|
2056
|
-
placeholder: placeholder[0],
|
|
2057
|
-
value: selectedDates[0] ? formatDate(selectedDates[0]) : ''
|
|
2058
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
2059
|
-
className: `${prefixCls}-range-separator`
|
|
2060
|
-
}, separator || /*#__PURE__*/React.createElement(DateDistanceIcon, null)), /*#__PURE__*/React.createElement("input", {
|
|
2061
|
-
readOnly: inputReadOnly,
|
|
2062
|
-
className: `${prefixCls}-selected-date`,
|
|
2063
|
-
placeholder: placeholder[1],
|
|
2064
|
-
value: selectedDates[1] ? formatDate(selectedDates[1]) : ''
|
|
2065
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
2066
|
-
className: `${prefixCls}-icon`
|
|
2067
|
-
}, allowClear && (selectedDates[0] || selectedDates[1]) ? /*#__PURE__*/React.createElement("span", {
|
|
2068
|
-
className: `${prefixCls}-clear`,
|
|
2069
|
-
onClick: handleClear
|
|
2070
|
-
}, /*#__PURE__*/React.createElement(ClearIcon, null)) : /*#__PURE__*/React.createElement(CalendarIcon, null)))), isOpen && /*#__PURE__*/React.createElement("div", {
|
|
2071
|
-
className: `${prefixCls}-dropdown-wrapper show`
|
|
2072
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
2073
|
-
className: `${prefixCls}-dropdown-range`
|
|
2074
|
-
}, renderCalendar(0, viewMode !== 'day'), viewMode === 'day' && renderCalendar(1, viewMode !== 'day'))));
|
|
2075
|
-
};
|
|
2076
|
-
|
|
2077
|
-
var RangePicker$1 = /*#__PURE__*/Object.freeze({
|
|
2078
|
-
__proto__: null,
|
|
2079
|
-
default: RangePicker
|
|
2080
|
-
});
|
|
2081
|
-
|
|
2082
|
-
var css_248z$e = ".xUi-datepicker-container{font-family:Arial,sans-serif;height:max-content;position:relative}.xUi-datepicker-input{align-items:center;background-color:transparent;border:1px solid var(--xui-border-color);border-radius:6px;color:var(--xui-text-color);cursor:pointer;display:flex;gap:8px;justify-content:space-between;padding:3px 7px;transition:all .3s}.xUi-datepicker-input.noBordered{border:none!important}.xUi-datepicker-input input{border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-sm);outline:none;padding:0}.xUi-datepicker-input:placeholder-shown{text-overflow:ellipsis}.xUi-datepicker-input:hover{border-color:var(--xui-primary-color)}.xUi-datepicker-icon{color:var(--xui-text-color);cursor:pointer;height:16px;opacity:.6;transition:.3s ease;width:16px}.xUi-datepicker-icon:hover{color:var(--xui-primary-color);opacity:1}.xUi-datepicker-selected-date{border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-md);letter-spacing:.8px;outline:none}.xUi-datepicker-disabled{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color)!important;cursor:not-allowed;opacity:.5}.xUi-datepicker-disabled .xUi-datepicker-selected-date{cursor:not-allowed;opacity:.6}.xUi-datepicker-disabled .xUi-datepicker-icon{cursor:not-allowed}.xUi-datepicker-icon{align-items:center;color:#8c8c8c;display:flex;font-size:16px;gap:6px}.xUi-datepicker-error{border-color:var(--xui-error-color)}.xUi-datepicker-error .error-svg-icon,.xUi-datepicker-error .xUi-datepicker-icon,.xUi-datepicker-icon .error-svg-icon{color:var(--xui-error-color)}.xUi-datepicker-input.sm{font-size:var(--xui-font-size-sm);padding:4px 8px}.xUi-datepicker-input.md{font-size:var(--xui-font-size-md);padding:8px 12px}.xUi-datepicker-input.lg{font-size:var(--xui-font-size-lg);padding:10px 16px}.xUi-datepicker-dropdown-wrapper{opacity:0;pointer-events:none;position:absolute;transform:scale(.95);transition:opacity .2s ease,transform .2s ease;z-index:1000}.xUi-datepicker-dropdown-wrapper.bottomLeft{left:0;margin-top:4px;top:100%}.xUi-datepicker-dropdown-wrapper.bottomRight{margin-top:4px;right:0;top:100%}.xUi-datepicker-dropdown-wrapper.topLeft{bottom:100%;left:0;margin-bottom:4px}.xUi-datepicker-dropdown-wrapper.topRight{bottom:100%;margin-bottom:4px;right:0}.xUi-datepicker-dropdown-wrapper.show{opacity:1;pointer-events:auto;transform:scale(1)}.xUi-datepicker-dropdown{background:var(--xui-background-color);border:1px solid var(--xui-border-color);border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);min-width:250px;padding:12px}.xUi-datepicker-header{align-items:center;border-bottom:1px solid var(--xui-border-color);display:flex;gap:8px;justify-content:space-between;margin-bottom:8px;padding-bottom:12px}.xUi-datepicker-day-footer{align-items:center;border-top:1px solid var(--xui-border-color);display:flex;justify-content:center;margin-top:8px;padding-top:12px;width:100%}.xUi-datepicker-nav-buttons{display:flex;gap:4px}.xUi-datepicker-nav-buttons button{background:none;border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;font-size:20px;opacity:.7;padding:2px 6px;transition:all .3s}.xUi-datepicker-nav-buttons button:not(:disabled):hover{color:var(--xui-primary-color)}.xUi-datepicker-dropdown-selects{align-items:center;display:flex;gap:6px}.xUi-datepicker-dropdown-selects button,.xUi-datepicker-select{background:var(--xui-background-color);border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;font-weight:600;padding:4px 8px;transition:all .3s}.xUi-datepicker-dropdown-selects button:hover,.xUi-datepicker-select:not(:disabled):hover{color:var(--xui-primary-color)}.xUi-datepicker-grid{display:grid;gap:2px;grid-template-columns:repeat(3,1fr);text-align:center}.xUi-datepicker-grid.day{grid-template-columns:repeat(7,1fr)}.xUi-datepicker-day-header{color:var(--xui-text-color);font-size:14px;margin:4px 0;user-select:none}.xUi-datepicker-day,.xUi-datepicker-month,.xUi-datepicker-year{background:none;border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;height:30px;line-height:30px;min-width:30px;text-align:center;transition:all .2s}.xUi-datepicker-month,.xUi-datepicker-year{margin:7px}.xUi-datepicker-day:disabled,.xUi-datepicker-month:disabled,.xUi-datepicker-select:disabled,.xUi-datepicker-year:disabled{background-color:var(--xui-color-disabled);cursor:not-allowed;opacity:.5}.xUi-datepicker-day:not(:disabled):hover,.xUi-datepicker-month:not(:disabled):hover,.xUi-datepicker-year:not(:disabled):hover{background:var(--xui-primary-color-light);color:#fff}.xUi-datepicker-selected{background:var(--xui-primary-color)!important;color:#fff!important;font-weight:700}.xUi-datepicker-other-month{color:var(--xui-text-color);opacity:.4}.xUi-datepicker-other-month:not(:disabled):hover{background-color:var(--xui-color-hover);color:var(--xui-text-color);user-select:none}.xUi-datepicker-footer{margin-top:12px;text-align:right}.xUi-datepicker-footer-today-btn{background:none;border:1px solid var(--xui-border-color);border-radius:4px;color:var(--xui-primary-color);cursor:pointer;font-size:13px;padding:4px 8px;transition:all .3s}.xUi-datepicker-footer-today-btn:not(:disabled):hover{background-color:var(--xui-primary-color-light);color:#fff}.xUi-datepicker-large .xUi-datepicker-selected-date{font-size:16px}.xUi-datepicker-large .xUi-datepicker-input{padding:11px}.xUi-datepicker-middle .xUi-datepicker-input{padding:6px 11px}";
|
|
2083
|
-
styleInject(css_248z$e);
|
|
2084
|
-
|
|
2085
1846
|
const INPUT_SIZE$1 = 12;
|
|
2086
1847
|
const CONTENT_PADDING = 6;
|
|
2087
1848
|
const NUMBER_SIX = 6;
|
|
2088
1849
|
const MONTH_LENGTH = 11;
|
|
2089
1850
|
const NEXT_DAYS_COUNT_AS_CURRENT_MUNTH = 35;
|
|
2090
|
-
const
|
|
1851
|
+
const DatePicker = ({
|
|
2091
1852
|
value,
|
|
2092
1853
|
onChange,
|
|
2093
1854
|
onCalendarChange,
|
|
@@ -2383,9 +2144,6 @@ const DatePickerComponent = ({
|
|
|
2383
2144
|
}
|
|
2384
2145
|
}, locale?.today || 'Today')))));
|
|
2385
2146
|
};
|
|
2386
|
-
const DatePicker = Object.assign(DatePickerComponent, {
|
|
2387
|
-
RangePicker
|
|
2388
|
-
});
|
|
2389
2147
|
|
|
2390
2148
|
var DatePicker$1 = /*#__PURE__*/Object.freeze({
|
|
2391
2149
|
__proto__: null,
|
|
@@ -2395,6 +2153,247 @@ var DatePicker$1 = /*#__PURE__*/Object.freeze({
|
|
|
2395
2153
|
default: DatePicker
|
|
2396
2154
|
});
|
|
2397
2155
|
|
|
2156
|
+
var css_248z$e = ".xUi-rangepicker-range-container{font-size:14px;position:relative;user-select:none}.xUi-rangepicker-range-input-wrapper{background-color:#fff;border-radius:6px;display:flex;transition:all .3s;width:100%}.xUi-rangepicker-range-input-wrapper:hover{border-color:#4096ff}.xUi-rangepicker-range-input{align-items:center;border-right:1px solid var(--xui-border-color);cursor:pointer;display:flex;flex:1;padding:4px 11px}.xUi-rangepicker-range-input:last-child{border-right:none}.xUi-rangepicker-range-input input{background:transparent;border:none;color:#000;cursor:pointer;font-size:14px;outline:none;width:100%}.xUi-rangepicker-range-input input::placeholder{color:#bfbfbf}.xUi-rangepicker-range-clear,.xUi-rangepicker-range-icon{align-items:center;display:flex;margin-left:8px;transition:color .3s}.xUi-rangepicker-range-icon{color:rgba(0,0,0,.25)}.xUi-rangepicker-range-clear{color:rgba(0,0,0,.45);cursor:pointer}.xUi-rangepicker-range-clear:hover{color:#000}.xUi-rangepicker-range-dropdown-wrapper{background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;left:0;margin-top:4px;min-width:560px;opacity:1;padding:8px;position:absolute;top:100%;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;z-index:1050}.xUi-rangepicker-range-dropdown-wrapper.show{display:flex}.xUi-rangepicker-dropdown-range,.xUi-rangepicker-range-dropdown{background-color:#fff;border:1px solid var(--xui-border-color);border-radius:6px;display:flex;margin-top:2px;overflow:hidden}.xUi-rangepicker-calendar{background:#fff;border-radius:6px;margin:12px}.xUi-rangepicker-calendar.month,.xUi-rangepicker-calendar.year{width:280px}.xUi-rangepicker-calendar-header{align-items:center;display:flex;font-weight:500;justify-content:space-between}.xUi-rangepicker-month,.xUi-rangepicker-year{background:none;border:none;border-radius:4px;color:var(--xui-text-color);cursor:pointer;height:30px;line-height:30px;margin:7px;min-width:30px;text-align:center;transition:all .2s}.xUi-rangepicker-day:disabled,.xUi-rangepicker-month:disabled,.xUi-rangepicker-select:disabled,.xUi-rangepicker-year:disabled{background-color:var(--xui-color-disabled);cursor:not-allowed;opacity:.5}.xUi-rangepicker-day:not(:disabled):hover,.xUi-rangepicker-month:not(:disabled):hover,.xUi-rangepicker-year:not(:disabled):hover{background:var(--xui-primary-color-light);color:#fff}.xUi-rangepicker-calendar-header button,.xUi-rangepicker-dropdown-selects button,.xUi-rangepicker-nav-buttons button{background:transparent;border:none;color:#595959;cursor:pointer;font-size:14px;font-weight:600;line-height:1;padding:0 6px;transition:color .2s ease}.xUi-rangepicker-nav-buttons button{font-size:20px;font-weight:400}.xUi-rangepicker-calendar-header button:hover,.xUi-rangepicker-dropdown-selects button:hover,.xUi-rangepicker-nav-buttons button:hover{color:var(--xui-primary-color)}.xUi-rangepicker-input{align-items:center;background-color:transparent;border:1px solid var(--xui-border-color);border-radius:6px;color:var(--xui-text-color);cursor:pointer;display:flex;gap:8px;justify-content:space-between;padding:3px 7px;transition:all .3s}.xUi-rangepicker-input.noBordered{border:none!important}.xUi-rangepicker-input input{border:none;color:var(--xui-text-color);font-size:var(--xui-font-size-sm);outline:none;padding:0}.xUi-rangepicker-input:placeholder-shown{text-overflow:ellipsis}.xUi-rangepicker-input:hover{border-color:var(--xui-primary-color)}.xUi-rangepicker-weekday-row{background-color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.1);display:grid;gap:4px;grid-template-columns:repeat(7,1fr);position:sticky;top:0;z-index:1}.xUi-rangepicker-weekday{align-items:center;color:var(--xui-text-color);display:flex;font-size:12px;font-weight:500;font-weight:600;height:30px;justify-content:center;text-align:center}.xUi-rangepicker-days-grid,.xUi-rangepicker-grid{display:grid;gap:2px;grid-template-columns:repeat(3,1fr)}.xUi-rangepicker-days-grid.day{grid-template-columns:repeat(7,0fr)}.xUi-rangepicker-day{background-color:transparent;border:none;border-radius:4px;cursor:pointer;height:30px;line-height:30px;text-align:center;transition:background-color .3s,color .3s;width:30px}.xUi-rangepicker-day:hover{background-color:var(--xui-primary-color);border-radius:4px;color:#fff}.xUi-rangepicker-day.xUi-rangepicker-other-month:hover{background-color:var(--xui-color-disabled)!important;color:var(--xui-text-color)}.xUi-rangepicker-range-end:not(.xUi-rangepicker-other-month),.xUi-rangepicker-range-start:not(.xUi-rangepicker-other-month),.xUi-rangepicker-selected:not(.xUi-rangepicker-other-month){background-color:var(--xui-primary-color);color:#fff;font-weight:600}.xUi-rangepicker-in-range:not(.xUi-rangepicker-other-month){background-color:#f0f5ff}.xUi-rangepicker-hover-end{background-color:var(--xui-primary-color)!important}.xUi-rangepicker-disabled,.xUi-rangepicker-other-month{color:#ccc}.xUi-rangepicker-disabled{cursor:not-allowed}.xUi-rangepicker-footer{display:flex;grid-column:span 7;justify-content:center;padding-top:6px}.xUi-rangepicker-select{background:none;border:none;color:var(--xui-primary-color);cursor:pointer}.xUi-rangepicker-input.sm{font-size:var(--xui-font-size-sm);padding:4px 8px}.xUi-rangepicker-input.md{font-size:var(--xui-font-size-md);padding:8px 12px}.xUi-rangepicker-input.lg{font-size:var(--xui-font-size-lg);padding:10px 16px}.xUi-rangepicker-dropdown-wrapper{opacity:0;pointer-events:none;position:absolute;transform:scale(.95);transition:opacity .2s ease,transform .2s ease;z-index:1000}.xUi-rangepicker-dropdown-wrapper.bottomLeft{left:0;margin-top:4px;top:100%}.xUi-rangepicker-dropdown-wrapper.bottomRight{margin-top:4px;right:0;top:100%}.xUi-rangepicker-dropdown-wrapper.topLeft{bottom:100%;left:0;margin-bottom:4px}.xUi-rangepicker-dropdown-wrapper.topRight{bottom:100%;margin-bottom:4px;right:0}.xUi-rangepicker-dropdown-wrapper.show{opacity:1;pointer-events:auto;transform:scale(1)}.xUi-rangepicker-large .xUi-rangepicker-selected-date{font-size:16px}.xUi-rangepicker-large .xUi-rangepicker-input{padding:11px}.xUi-rangepicker-middle .xUi-rangepicker-input{padding:6px 11px}.xUi-rangepicker-dropdown-trigger{background-color:#fff;border:1px solid var(--xui-border-color);border-radius:2px;cursor:pointer;line-height:32px;padding:0 8px}.xUi-rangepicker-dropdown-menu{background:#fff;border:1px solid var(--xui-border-color);box-shadow:0 2px 8px rgba(0,0,0,.15);max-height:200px;overflow-y:auto;position:absolute;z-index:1000}.xUi-rangepicker-dropdown-item{cursor:pointer;padding:4px 12px}.xUi-rangepicker-dropdown-item:hover{background:#f5f5f5}.xUi-rangepicker-dropdown-item.active{background-color:#e6f7ff;font-weight:700}.xUi-rangepicker-header{align-items:center;border-bottom:1px solid var(--xui-border-color);display:flex;gap:8px;justify-content:space-between;margin-bottom:8px;padding-bottom:12px;width:100%}";
|
|
2157
|
+
styleInject(css_248z$e);
|
|
2158
|
+
|
|
2159
|
+
const RangePicker = ({
|
|
2160
|
+
prefixCls = prefixClsRangePicker,
|
|
2161
|
+
value,
|
|
2162
|
+
onChange,
|
|
2163
|
+
placeholder = ['Start date', 'End date'],
|
|
2164
|
+
disabled,
|
|
2165
|
+
error,
|
|
2166
|
+
format = 'YYYY-MM-DD',
|
|
2167
|
+
prefix,
|
|
2168
|
+
allowClear = true,
|
|
2169
|
+
inputReadOnly = false,
|
|
2170
|
+
size = 'large',
|
|
2171
|
+
picker = 'date',
|
|
2172
|
+
locale,
|
|
2173
|
+
disabledDate,
|
|
2174
|
+
onCalendarChange,
|
|
2175
|
+
style = {},
|
|
2176
|
+
className = '',
|
|
2177
|
+
separator,
|
|
2178
|
+
defaultValue,
|
|
2179
|
+
bordered = true
|
|
2180
|
+
}) => {
|
|
2181
|
+
const containerRef = useRef(null);
|
|
2182
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
2183
|
+
const [selectedDates, setSelectedDates] = useState([value?.[0] || defaultValue?.[0] || null, value?.[1] || defaultValue?.[1] || null]);
|
|
2184
|
+
const [hoveredDate, setHoveredDate] = useState(null);
|
|
2185
|
+
const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
|
|
2186
|
+
const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
|
|
2187
|
+
const [viewMode, setViewMode] = useState(picker === 'month' ? 'month' : picker === 'year' ? 'year' : 'day');
|
|
2188
|
+
const localeMonths = locale?.shortMonths || Array.from({
|
|
2189
|
+
length: 12
|
|
2190
|
+
}, (_, i) => new Date(0, i).toLocaleString(locale?.locale || 'default', {
|
|
2191
|
+
month: 'short'
|
|
2192
|
+
}));
|
|
2193
|
+
const localeWeekdays = locale?.shortWeekDays || ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
2194
|
+
useEffect(() => {
|
|
2195
|
+
const handleClickOutside = event => {
|
|
2196
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
2197
|
+
setIsOpen(false);
|
|
2198
|
+
}
|
|
2199
|
+
};
|
|
2200
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
2201
|
+
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
2202
|
+
}, []);
|
|
2203
|
+
const handleSelect = date => {
|
|
2204
|
+
if (!selectedDates[0] || selectedDates[0] && selectedDates[1]) {
|
|
2205
|
+
setSelectedDates([date, null]);
|
|
2206
|
+
onCalendarChange?.(date.toUTCString(), formatDate(date), {});
|
|
2207
|
+
} else {
|
|
2208
|
+
const start = selectedDates[0];
|
|
2209
|
+
const end = date < start ? start : date;
|
|
2210
|
+
const begin = date < start ? date : start;
|
|
2211
|
+
setSelectedDates([begin, end]);
|
|
2212
|
+
onChange?.([begin.toUTCString(), end.toUTCString()], [formatDate(begin), formatDate(end)]);
|
|
2213
|
+
setIsOpen(false);
|
|
2214
|
+
}
|
|
2215
|
+
};
|
|
2216
|
+
const isMonthDisabled = month => {
|
|
2217
|
+
const date = new Date(currentYear, month + 1, 1);
|
|
2218
|
+
return disabledDate?.(date, {
|
|
2219
|
+
from: undefined,
|
|
2220
|
+
to: undefined
|
|
2221
|
+
});
|
|
2222
|
+
};
|
|
2223
|
+
const isYearDisabled = year => {
|
|
2224
|
+
const date = new Date(year + 1, currentMonth, 1);
|
|
2225
|
+
return disabledDate?.(date, {
|
|
2226
|
+
from: undefined,
|
|
2227
|
+
to: undefined
|
|
2228
|
+
});
|
|
2229
|
+
};
|
|
2230
|
+
const formatDate = date => {
|
|
2231
|
+
if (typeof format === 'function') {
|
|
2232
|
+
return format(date);
|
|
2233
|
+
}
|
|
2234
|
+
return `${format}`.replace(/YYYY/, date.getFullYear().toString()).replace(/MM/, (date.getMonth() + 1).toString().padStart(2, '0')).replace(/DD/, date.getDate().toString().padStart(2, '0'));
|
|
2235
|
+
};
|
|
2236
|
+
const isInRange = date => {
|
|
2237
|
+
const [start, end] = selectedDates;
|
|
2238
|
+
return start && end && date > start && date < end;
|
|
2239
|
+
};
|
|
2240
|
+
const renderMonthYearSelector = (monthOffset = 0, all) => {
|
|
2241
|
+
const baseYear = currentYear;
|
|
2242
|
+
const baseMonth = currentMonth + monthOffset;
|
|
2243
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2244
|
+
className: `${prefixCls}-header`
|
|
2245
|
+
}, all || !monthOffset ? /*#__PURE__*/React.createElement("div", {
|
|
2246
|
+
className: `${prefixCls}-nav-buttons`
|
|
2247
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
2248
|
+
onClick: () => setCurrentYear(y => y - 1)
|
|
2249
|
+
}, "\xAB"), /*#__PURE__*/React.createElement("button", {
|
|
2250
|
+
onClick: () => setCurrentMonth(m => m === 0 ? (setCurrentYear(y => y - 1), MONTH_LENGTH) : m - 1)
|
|
2251
|
+
}, "\u2039")) : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
|
|
2252
|
+
className: `${prefixCls}-dropdown-selects`
|
|
2253
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
2254
|
+
type: "button",
|
|
2255
|
+
className: `${prefixCls}-select`,
|
|
2256
|
+
onClick: () => setViewMode('year')
|
|
2257
|
+
}, baseYear), /*#__PURE__*/React.createElement("button", {
|
|
2258
|
+
type: "button",
|
|
2259
|
+
className: `${prefixCls}-select`,
|
|
2260
|
+
onClick: () => setViewMode('month')
|
|
2261
|
+
}, localeMonths[baseMonth])), all || monthOffset ? /*#__PURE__*/React.createElement("div", {
|
|
2262
|
+
className: `${prefixCls}-nav-buttons`
|
|
2263
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
2264
|
+
onClick: () => setCurrentMonth(m => m === MONTH_LENGTH ? (setCurrentYear(y => y + 1), 0) : m + 1)
|
|
2265
|
+
}, "\u203A"), /*#__PURE__*/React.createElement("button", {
|
|
2266
|
+
onClick: () => setCurrentYear(y => y + 1)
|
|
2267
|
+
}, "\xBB")) : /*#__PURE__*/React.createElement("span", null));
|
|
2268
|
+
};
|
|
2269
|
+
const renderCalendar = (monthOffset = 0, all) => {
|
|
2270
|
+
const baseDate = new Date(currentYear, currentMonth + monthOffset, 1);
|
|
2271
|
+
const year = baseDate.getFullYear();
|
|
2272
|
+
const month = baseDate.getMonth();
|
|
2273
|
+
const firstDay = new Date(year, month, 1).getDay();
|
|
2274
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
2275
|
+
const prevMonthDays = (() => {
|
|
2276
|
+
const prevMonth = new Date(year, month, 0);
|
|
2277
|
+
const totalDays = prevMonth.getDate();
|
|
2278
|
+
return Array.from({
|
|
2279
|
+
length: firstDay
|
|
2280
|
+
}, (_, i) => new Date(year, month - 1, totalDays - firstDay + i + 1));
|
|
2281
|
+
})();
|
|
2282
|
+
const currentMonthDays = Array.from({
|
|
2283
|
+
length: daysInMonth
|
|
2284
|
+
}, (_, i) => new Date(year, month, i + 1));
|
|
2285
|
+
const totalDisplayed = prevMonthDays.length + currentMonthDays.length;
|
|
2286
|
+
const remaining = NEXT_DAYS_COUNT_AS_CURRENT_MUNTH - totalDisplayed;
|
|
2287
|
+
const nextMonthDays = Array.from({
|
|
2288
|
+
length: remaining
|
|
2289
|
+
}, (_, i) => new Date(year, month + 1, i + 1));
|
|
2290
|
+
const days = [...prevMonthDays, ...currentMonthDays, ...nextMonthDays];
|
|
2291
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2292
|
+
className: `${prefixCls}-calendar ${viewMode}`
|
|
2293
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2294
|
+
className: `${prefixCls}-calendar-header`
|
|
2295
|
+
}, renderMonthYearSelector(monthOffset, all)), viewMode === 'day' && /*#__PURE__*/React.createElement("div", {
|
|
2296
|
+
className: `${prefixCls}-days-grid day`
|
|
2297
|
+
}, localeWeekdays.map((day, i) => /*#__PURE__*/React.createElement("div", {
|
|
2298
|
+
key: i,
|
|
2299
|
+
className: `${prefixCls}-weekday`
|
|
2300
|
+
}, day)), days.map((day, i) => {
|
|
2301
|
+
const isSelected = day && selectedDates.some(d => d?.toDateString() === day?.toDateString());
|
|
2302
|
+
const inRange = day && isInRange(day);
|
|
2303
|
+
const isSameMonth = day?.getMonth() === month;
|
|
2304
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
2305
|
+
key: i,
|
|
2306
|
+
disabled: disabledDate?.(day, {
|
|
2307
|
+
from: undefined,
|
|
2308
|
+
to: undefined
|
|
2309
|
+
}),
|
|
2310
|
+
onClick: () => day && handleSelect(day),
|
|
2311
|
+
onMouseEnter: () => day && setHoveredDate(day),
|
|
2312
|
+
className: clsx([`${prefixCls}-day`, {
|
|
2313
|
+
[`${prefixCls}-selected`]: isSelected,
|
|
2314
|
+
[`${prefixCls}-in-range`]: inRange,
|
|
2315
|
+
[`${prefixCls}-hover-end`]: hoveredDate && selectedDates[0] && !selectedDates[1] && hoveredDate > selectedDates[0] && hoveredDate?.toDateString() === day?.toDateString(),
|
|
2316
|
+
[`${prefixCls}-other-month`]: !isSameMonth
|
|
2317
|
+
}])
|
|
2318
|
+
}, day?.getDate());
|
|
2319
|
+
})), viewMode === 'month' && /*#__PURE__*/React.createElement("div", {
|
|
2320
|
+
className: `${prefixCls}-grid`
|
|
2321
|
+
}, localeMonths.map((m, i) => /*#__PURE__*/React.createElement("button", {
|
|
2322
|
+
key: i,
|
|
2323
|
+
className: `${prefixCls}-month`,
|
|
2324
|
+
onClick: () => {
|
|
2325
|
+
setCurrentMonth(i);
|
|
2326
|
+
setViewMode('day');
|
|
2327
|
+
},
|
|
2328
|
+
disabled: isMonthDisabled(i)
|
|
2329
|
+
}, m))), viewMode === 'year' && /*#__PURE__*/React.createElement("div", {
|
|
2330
|
+
className: `${prefixCls}-grid`
|
|
2331
|
+
}, Array.from({
|
|
2332
|
+
length: 12
|
|
2333
|
+
}, (_, i) => {
|
|
2334
|
+
const year = currentYear - NUMBER_SIX + i;
|
|
2335
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
2336
|
+
key: year,
|
|
2337
|
+
className: `${prefixCls}-year`,
|
|
2338
|
+
disabled: isYearDisabled(year),
|
|
2339
|
+
onClick: () => {
|
|
2340
|
+
setCurrentYear(year);
|
|
2341
|
+
setViewMode('month');
|
|
2342
|
+
}
|
|
2343
|
+
}, year);
|
|
2344
|
+
})));
|
|
2345
|
+
};
|
|
2346
|
+
const handleClear = () => {
|
|
2347
|
+
setSelectedDates([null, null]);
|
|
2348
|
+
onChange?.(null, ['', '']);
|
|
2349
|
+
};
|
|
2350
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
2351
|
+
ref: containerRef,
|
|
2352
|
+
style: style,
|
|
2353
|
+
className: clsx([`${prefixCls}-range-container`, {
|
|
2354
|
+
[`${prefixCls}-${size}`]: size,
|
|
2355
|
+
[className]: className
|
|
2356
|
+
}])
|
|
2357
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2358
|
+
className: `${prefixCls}-range-input-wrapper`
|
|
2359
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
2360
|
+
type: "button",
|
|
2361
|
+
className: clsx([`${prefixCls}-input`, {
|
|
2362
|
+
noBordered: !bordered,
|
|
2363
|
+
[`${prefixCls}-error`]: error,
|
|
2364
|
+
[`${prefixCls}-disabled`]: disabled
|
|
2365
|
+
}]),
|
|
2366
|
+
disabled: disabled,
|
|
2367
|
+
onClick: () => setIsOpen(!isOpen)
|
|
2368
|
+
}, prefix, /*#__PURE__*/React.createElement("input", {
|
|
2369
|
+
readOnly: inputReadOnly,
|
|
2370
|
+
className: `${prefixCls}-selected-date`,
|
|
2371
|
+
placeholder: placeholder[0],
|
|
2372
|
+
value: selectedDates[0] ? formatDate(selectedDates[0]) : ''
|
|
2373
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
2374
|
+
className: `${prefixCls}-range-separator`
|
|
2375
|
+
}, separator || /*#__PURE__*/React.createElement(DateDistanceIcon, null)), /*#__PURE__*/React.createElement("input", {
|
|
2376
|
+
readOnly: inputReadOnly,
|
|
2377
|
+
className: `${prefixCls}-selected-date`,
|
|
2378
|
+
placeholder: placeholder[1],
|
|
2379
|
+
value: selectedDates[1] ? formatDate(selectedDates[1]) : ''
|
|
2380
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
2381
|
+
className: `${prefixCls}-icon`
|
|
2382
|
+
}, allowClear && (selectedDates[0] || selectedDates[1]) ? /*#__PURE__*/React.createElement("span", {
|
|
2383
|
+
className: `${prefixCls}-clear`,
|
|
2384
|
+
onClick: handleClear
|
|
2385
|
+
}, /*#__PURE__*/React.createElement(ClearIcon, null)) : /*#__PURE__*/React.createElement(CalendarIcon, null)))), isOpen && /*#__PURE__*/React.createElement("div", {
|
|
2386
|
+
className: `${prefixCls}-dropdown-wrapper show`
|
|
2387
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2388
|
+
className: `${prefixCls}-dropdown-range`
|
|
2389
|
+
}, renderCalendar(0, viewMode !== 'day'), viewMode === 'day' && renderCalendar(1, viewMode !== 'day'))));
|
|
2390
|
+
};
|
|
2391
|
+
|
|
2392
|
+
var RangePicker$1 = /*#__PURE__*/Object.freeze({
|
|
2393
|
+
__proto__: null,
|
|
2394
|
+
default: RangePicker
|
|
2395
|
+
});
|
|
2396
|
+
|
|
2398
2397
|
var css_248z$d = ".xUi-timepicker-wrapper{display:inline-block;font-size:14px;position:relative}.xUi-timepicker-input-wrapper{position:relative;width:100%}.xUi-timepicker-input{border:1px solid var(--xui-border-color);border-radius:6px;box-sizing:border-box;font-size:14px;height:32px;line-height:32px;padding:4px 11px;transition:all .3s;width:100%}.xUi-timepicker-input:focus,.xUi-timepicker-input:hover{border-color:var(--xui-primary-color-light)}.xUi-timepicker-input:focus{outline:none}.xUi-timepicker-input::placeholder{opacity:.6}.xUi-timepicker-clear{color:rgba(0,0,0,.45);cursor:pointer;font-size:12px;position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2}.xUi-timepicker-clear:hover{color:rgba(0,0,0,.75)}.xUi-timepicker-popup{background:#fff;border:1px solid var(--xui-border-color);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;left:0;margin-top:4px;padding:8px 4px;position:absolute;top:100%;z-index:1}.xUi-timepicker-panel{display:flex;width:100%}.xUi-timepicker-column{align-items:center;display:flex;flex:1;flex-direction:column;margin-bottom:5px;max-height:169px;overflow-y:auto;padding-left:4px;width:45px}.xUi-timepicker-column::-webkit-scrollbar,.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{align-items:center;border-radius:4px;cursor:pointer;display:flex;font-size:14px;justify-content:center;padding:6px 0;text-align:center;transition:background .3s;width:44px}.xUi-timepicker-cell:hover{background-color:#e9e9e9}.xUi-timepicker-cell-selected{background-color:#e6f4ff;font-weight:500}.xUi-timepicker-cell-disabled{color:rgba(0,0,0,.25);pointer-events:none;user-select:none}.xUi-timepicker-now-btn{color:#4096ff;cursor:pointer;font-weight:500;margin-top:10px;padding:0 0 4px;text-align:center;transition:background .3s}.xUi-timepicker-icons{align-items:center;display:flex;gap:4px;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.xUi-timepicker-suffix{align-items:center;cursor:pointer;display:flex;justify-content:center}.xUi-timepicker-suffix svg{color:#999;height:14px;width:14px}.xUi-timepicker-clear{right:0;top:1px}.xUi-timepicker-actions{align-items:center;border-top:1px solid var(--xui-border-color);display:flex;justify-content:space-between;padding:0 4px}.xUi-timepicker-ok-btn{background-color:var(--xui-primary-color);border:none;border-radius:4px;color:#fff;cursor:pointer;margin-top:7px;outline:none;padding:4px 8px;transition:.3s ease}.xUi-timepicker-ok-btn:disabled{background-color:var(--xui-color-disabled);color:grey;font-size:13px}.xUi-timepicker-ok-btn:not(:disabled):hover{background-color:var(--xui-primary-color-light)}";
|
|
2399
2398
|
styleInject(css_248z$d);
|
|
2400
2399
|
|