x-ui-design 0.7.58 → 0.7.60
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/dist/esm/types/hooks/usePossition.d.ts +13 -0
- package/dist/esm/types/types/datepicker.d.ts +1 -1
- package/dist/index.esm.js +139 -180
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +139 -180
- package/dist/index.js.map +1 -1
- package/lib/components/DatePicker/DatePicker.tsx +202 -230
- package/lib/components/DatePicker/RangePicker/RangePicker.tsx +20 -106
- package/lib/components/DatePicker/TimePicker/TimePicker.tsx +9 -103
- package/lib/components/DatePicker/TimePicker/style.css +1 -1
- package/lib/components/DatePicker/style.css +0 -9
- package/lib/hooks/usePossition.ts +147 -0
- package/lib/types/datepicker.ts +1 -1
- package/package.json +1 -1
- package/src/app/page.tsx +4 -4
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { CSSProperties, RefObject } from "react";
|
|
2
|
+
type TPossition = {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
popupHeight: number;
|
|
5
|
+
popupRef: RefObject<HTMLDivElement | null>;
|
|
6
|
+
containerRef: RefObject<HTMLDivElement | null>;
|
|
7
|
+
getPopupContainer?: (node: HTMLElement) => HTMLElement;
|
|
8
|
+
placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
|
|
9
|
+
};
|
|
10
|
+
export declare const usePossition: ({ isOpen, popupRef, popupHeight, containerRef, getPopupContainer }: TPossition) => {
|
|
11
|
+
dropdownPosition: CSSProperties;
|
|
12
|
+
};
|
|
13
|
+
export {};
|
|
@@ -14,7 +14,7 @@ export type TDatePickerProps = DefaultProps & {
|
|
|
14
14
|
error?: boolean;
|
|
15
15
|
feedbackIcons?: boolean;
|
|
16
16
|
locale?: Locale;
|
|
17
|
-
placement?:
|
|
17
|
+
placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
|
|
18
18
|
defaultOpen?: boolean;
|
|
19
19
|
allowClear?: boolean | {
|
|
20
20
|
clearIcon?: ReactNode;
|
package/dist/index.esm.js
CHANGED
|
@@ -1944,11 +1944,96 @@ var Upload$1 = /*#__PURE__*/Object.freeze({
|
|
|
1944
1944
|
default: Upload
|
|
1945
1945
|
});
|
|
1946
1946
|
|
|
1947
|
-
|
|
1947
|
+
const ConditionalWrapper = ({
|
|
1948
|
+
condition,
|
|
1949
|
+
wrapper,
|
|
1950
|
+
children
|
|
1951
|
+
}) => condition ? wrapper(children) : children;
|
|
1952
|
+
|
|
1953
|
+
function getScrollParent(el, includeSelf = false) {
|
|
1954
|
+
if (!el) return null;
|
|
1955
|
+
let current = includeSelf ? el : el.parentElement;
|
|
1956
|
+
while (current) {
|
|
1957
|
+
const style = getComputedStyle(current);
|
|
1958
|
+
const overflowY = style.overflowY;
|
|
1959
|
+
const overflowX = style.overflowX;
|
|
1960
|
+
const canScroll = overflowY === 'auto' || overflowY === 'scroll' || overflowX === 'auto' || overflowX === 'scroll';
|
|
1961
|
+
if (canScroll) {
|
|
1962
|
+
return current;
|
|
1963
|
+
}
|
|
1964
|
+
current = current.parentElement;
|
|
1965
|
+
}
|
|
1966
|
+
return document.scrollingElement;
|
|
1967
|
+
}
|
|
1968
|
+
const usePossition = ({
|
|
1969
|
+
isOpen,
|
|
1970
|
+
popupRef,
|
|
1971
|
+
// placement,
|
|
1972
|
+
popupHeight,
|
|
1973
|
+
containerRef,
|
|
1974
|
+
getPopupContainer
|
|
1975
|
+
}) => {
|
|
1976
|
+
const [dropdownPosition, setDropdownPosition] = useState({});
|
|
1977
|
+
const dropdownPossition = useCallback(() => {
|
|
1978
|
+
if (!containerRef.current) return {};
|
|
1979
|
+
const inputRect = containerRef.current.getBoundingClientRect();
|
|
1980
|
+
const popupEl = popupRef.current;
|
|
1981
|
+
const dropdownHeight = popupEl?.offsetHeight || popupHeight;
|
|
1982
|
+
const popupContainer = getPopupContainer ? getPopupContainer(document.body) : getScrollParent(containerRef.current, true) || document.body;
|
|
1983
|
+
const containerRect = popupContainer.getBoundingClientRect();
|
|
1984
|
+
const spaceAbove = inputRect.top - containerRect.top;
|
|
1985
|
+
const spaceBelow = containerRect.bottom - inputRect.bottom;
|
|
1986
|
+
const shouldShowAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
|
|
1987
|
+
if (getPopupContainer) {
|
|
1988
|
+
if (shouldShowAbove) {
|
|
1989
|
+
setDropdownPosition({
|
|
1990
|
+
top: (containerRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop - popupHeight,
|
|
1991
|
+
left: (containerRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
|
|
1992
|
+
});
|
|
1993
|
+
} else {
|
|
1994
|
+
setDropdownPosition({
|
|
1995
|
+
top: (containerRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop + (containerRef.current?.offsetHeight || 0),
|
|
1996
|
+
left: (containerRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
|
|
1997
|
+
});
|
|
1998
|
+
}
|
|
1999
|
+
} else {
|
|
2000
|
+
setDropdownPosition({
|
|
2001
|
+
top: shouldShowAbove ? containerRef.current.offsetTop - (popupEl?.offsetHeight || dropdownHeight) - 8 : containerRef.current.offsetTop + containerRef.current.offsetHeight,
|
|
2002
|
+
left: containerRef.current.offsetLeft
|
|
2003
|
+
});
|
|
2004
|
+
}
|
|
2005
|
+
}, [popupRef, popupHeight, containerRef, getPopupContainer]);
|
|
2006
|
+
useEffect(() => {
|
|
2007
|
+
if (!isOpen) return;
|
|
2008
|
+
const _dropdownPossition = () => dropdownPossition();
|
|
2009
|
+
_dropdownPossition();
|
|
2010
|
+
const controller = new AbortController();
|
|
2011
|
+
const scrollableParents = getScrollParent(containerRef.current, true);
|
|
2012
|
+
scrollableParents?.addEventListener('scroll', _dropdownPossition, {
|
|
2013
|
+
passive: true,
|
|
2014
|
+
signal: controller.signal
|
|
2015
|
+
});
|
|
2016
|
+
window.addEventListener('scroll', _dropdownPossition, {
|
|
2017
|
+
passive: true,
|
|
2018
|
+
signal: controller.signal
|
|
2019
|
+
});
|
|
2020
|
+
window.addEventListener('resize', _dropdownPossition, {
|
|
2021
|
+
signal: controller.signal
|
|
2022
|
+
});
|
|
2023
|
+
return () => {
|
|
2024
|
+
controller.abort();
|
|
2025
|
+
};
|
|
2026
|
+
}, [isOpen, containerRef, getPopupContainer, dropdownPossition]);
|
|
2027
|
+
return {
|
|
2028
|
+
dropdownPosition
|
|
2029
|
+
};
|
|
2030
|
+
// ...(placement.includes('Left') ? {} : { right: (containerRef.current?.offsetWidth || 0) - picker.offsetWidth })
|
|
2031
|
+
};
|
|
2032
|
+
|
|
2033
|
+
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{position:absolute;transition:opacity .3s ease,transform .01s 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{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}";
|
|
1948
2034
|
styleInject(css_248z$f);
|
|
1949
2035
|
|
|
1950
2036
|
const INPUT_SIZE$1 = 12;
|
|
1951
|
-
const CONTENT_PADDING = 6;
|
|
1952
2037
|
const NUMBER_SIX = 6;
|
|
1953
2038
|
const MONTH_LENGTH = 11;
|
|
1954
2039
|
const NEXT_DAYS_COUNT_AS_CURRENT_MUNTH = 35;
|
|
@@ -1981,8 +2066,8 @@ const DatePicker = ({
|
|
|
1981
2066
|
}) => {
|
|
1982
2067
|
const containerRef = useRef(null);
|
|
1983
2068
|
const initialDate = value || defaultValue;
|
|
2069
|
+
const popupRef = useRef(null);
|
|
1984
2070
|
const popupContainerRef = useRef(null);
|
|
1985
|
-
const [placementPossition, setPlacementPossition] = useState({});
|
|
1986
2071
|
const DateNow = new Date();
|
|
1987
2072
|
const [selectedDate, setSelectedDate] = useState(initialDate);
|
|
1988
2073
|
const [selectedDatePlaceholder, setSelectedDatePlaceholder] = useState(initialDate ? formatDate(initialDate) : undefined);
|
|
@@ -1996,21 +2081,27 @@ const DatePicker = ({
|
|
|
1996
2081
|
month: 'short'
|
|
1997
2082
|
}));
|
|
1998
2083
|
const localeWeekdays = locale?.shortWeekDays || ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
2084
|
+
const {
|
|
2085
|
+
dropdownPosition
|
|
2086
|
+
} = usePossition({
|
|
2087
|
+
isOpen,
|
|
2088
|
+
popupRef,
|
|
2089
|
+
placement,
|
|
2090
|
+
containerRef,
|
|
2091
|
+
popupHeight: 305,
|
|
2092
|
+
getPopupContainer
|
|
2093
|
+
});
|
|
1999
2094
|
useEffect(() => {
|
|
2000
2095
|
setSelectedDate(value || defaultValue);
|
|
2001
2096
|
}, [value]);
|
|
2002
2097
|
useEffect(() => {
|
|
2003
2098
|
const handleClickOutside = event => {
|
|
2004
|
-
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
2099
|
+
if (popupRef.current && !popupRef.current.contains(event.target) && containerRef.current && !containerRef.current.contains(event.target)) {
|
|
2005
2100
|
setIsOpen(false);
|
|
2006
2101
|
}
|
|
2007
2102
|
};
|
|
2008
2103
|
const controller = new AbortController();
|
|
2009
2104
|
if (isOpen) {
|
|
2010
|
-
calculateDatePickerPopupPossition();
|
|
2011
|
-
document.addEventListener('scroll', calculateDatePickerPopupPossition, {
|
|
2012
|
-
signal: controller.signal
|
|
2013
|
-
});
|
|
2014
2105
|
document.addEventListener('mousedown', handleClickOutside, {
|
|
2015
2106
|
signal: controller.signal
|
|
2016
2107
|
});
|
|
@@ -2077,23 +2168,6 @@ const DatePicker = ({
|
|
|
2077
2168
|
to: undefined
|
|
2078
2169
|
});
|
|
2079
2170
|
};
|
|
2080
|
-
function calculateDatePickerPopupPossition() {
|
|
2081
|
-
const datePickerContainerHeight = (containerRef.current?.clientHeight || 0) + CONTENT_PADDING;
|
|
2082
|
-
const datePickerPossitionFromTop = containerRef.current?.getBoundingClientRect().top || 0;
|
|
2083
|
-
const datePickerPossitionFromBottom = window.innerHeight - (containerRef.current?.getBoundingClientRect().bottom || 0);
|
|
2084
|
-
const datePickerContainerPopupHeight = containerRef.current?.querySelector(`.${prefixCls}-dropdown`)?.clientHeight || 0;
|
|
2085
|
-
const picker = containerRef.current?.querySelector(`.${prefixCls}-input`);
|
|
2086
|
-
setPlacementPossition(['topLeft', 'topRight'].includes(placement) ? {
|
|
2087
|
-
position: 'absolute',
|
|
2088
|
-
top: datePickerPossitionFromTop - datePickerContainerPopupHeight < 0 ? datePickerContainerHeight : -datePickerContainerPopupHeight
|
|
2089
|
-
} : {
|
|
2090
|
-
position: 'absolute',
|
|
2091
|
-
top: datePickerPossitionFromBottom > datePickerContainerPopupHeight ? 0 : -(datePickerContainerPopupHeight + datePickerContainerHeight),
|
|
2092
|
-
...(placement.includes('Left') ? {} : {
|
|
2093
|
-
right: (containerRef.current?.offsetWidth || 0) - picker.offsetWidth
|
|
2094
|
-
})
|
|
2095
|
-
});
|
|
2096
|
-
}
|
|
2097
2171
|
const prevMonth = currentMonth === 0 ? MONTH_LENGTH : currentMonth - 1;
|
|
2098
2172
|
const nextMonth = currentMonth === MONTH_LENGTH ? 0 : currentMonth + 1;
|
|
2099
2173
|
const prevMonthYear = currentMonth === 0 ? currentYear - 1 : currentYear;
|
|
@@ -2125,13 +2199,13 @@ const DatePicker = ({
|
|
|
2125
2199
|
year: nextMonthYear
|
|
2126
2200
|
}))];
|
|
2127
2201
|
return /*#__PURE__*/React.createElement("div", {
|
|
2128
|
-
ref: containerRef,
|
|
2129
2202
|
className: clsx([`${prefixCls}-container`, {
|
|
2130
2203
|
noStyle,
|
|
2131
2204
|
[`${prefixCls}-${size}`]: size
|
|
2132
2205
|
}])
|
|
2133
2206
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2134
|
-
className: `${prefixCls}-input-wrapper
|
|
2207
|
+
className: `${prefixCls}-input-wrapper`,
|
|
2208
|
+
ref: containerRef
|
|
2135
2209
|
}, /*#__PURE__*/React.createElement("button", {
|
|
2136
2210
|
type: "button",
|
|
2137
2211
|
className: clsx([`${prefixCls}-input ${className}`, {
|
|
@@ -2162,16 +2236,18 @@ const DatePicker = ({
|
|
|
2162
2236
|
}, allowClear && selectedDate ? /*#__PURE__*/React.createElement("span", {
|
|
2163
2237
|
className: `${prefixCls}-clear`,
|
|
2164
2238
|
onClick: clearSelection
|
|
2165
|
-
}, typeof allowClear === 'object' && allowClear.clearIcon ? allowClear.clearIcon : /*#__PURE__*/React.createElement(ClearIcon, null)) : suffixIcon || /*#__PURE__*/React.createElement(CalendarIcon, null), error && feedbackIcons ? /*#__PURE__*/React.createElement(ErrorIcon, null) : null))), /*#__PURE__*/React.createElement(
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2239
|
+
}, typeof allowClear === 'object' && allowClear.clearIcon ? allowClear.clearIcon : /*#__PURE__*/React.createElement(ClearIcon, null)) : suffixIcon || /*#__PURE__*/React.createElement(CalendarIcon, null), error && feedbackIcons ? /*#__PURE__*/React.createElement(ErrorIcon, null) : null))), isOpen && /*#__PURE__*/React.createElement(ConditionalWrapper, {
|
|
2240
|
+
condition: getPopupContainer !== undefined,
|
|
2241
|
+
wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(popupRef.current)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
|
|
2242
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2243
|
+
ref: popupRef,
|
|
2244
|
+
className: `${prefixCls}-dropdown-wrapper`,
|
|
2245
|
+
style: {
|
|
2246
|
+
...dropdownPosition,
|
|
2247
|
+
opacity: Object.keys(dropdownPosition).length ? 1 : 0
|
|
2248
|
+
}
|
|
2249
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
2250
|
+
className: `${prefixCls}-dropdown`
|
|
2175
2251
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2176
2252
|
className: `${prefixCls}-header`
|
|
2177
2253
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -2293,7 +2369,7 @@ const DatePicker = ({
|
|
|
2293
2369
|
e.stopPropagation();
|
|
2294
2370
|
handleSelect(DateNow.getDate(), DateNow.getMonth(), DateNow.getFullYear());
|
|
2295
2371
|
}
|
|
2296
|
-
}, locale?.today || 'Today')))));
|
|
2372
|
+
}, locale?.today || 'Today'))))));
|
|
2297
2373
|
};
|
|
2298
2374
|
|
|
2299
2375
|
var DatePicker$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -2304,12 +2380,6 @@ var DatePicker$1 = /*#__PURE__*/Object.freeze({
|
|
|
2304
2380
|
default: DatePicker
|
|
2305
2381
|
});
|
|
2306
2382
|
|
|
2307
|
-
const ConditionalWrapper = ({
|
|
2308
|
-
condition,
|
|
2309
|
-
wrapper,
|
|
2310
|
-
children
|
|
2311
|
-
}) => condition ? wrapper(children) : children;
|
|
2312
|
-
|
|
2313
2383
|
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:1px solid transparent;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)!important;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;color:#fff}.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%}.xUi-rangepicker-in-hover-range:not(.xUi-rangepicker-other-month){background-color:#f0f5ff;border:1px dashed var(--xui-primary-color);border-radius:4px}";
|
|
2314
2384
|
styleInject(css_248z$e);
|
|
2315
2385
|
|
|
@@ -2348,7 +2418,15 @@ const RangePicker = ({
|
|
|
2348
2418
|
const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
|
|
2349
2419
|
const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
|
|
2350
2420
|
const [viewMode, setViewMode] = useState(picker === 'month' ? 'month' : picker === 'year' ? 'year' : 'day');
|
|
2351
|
-
const
|
|
2421
|
+
const {
|
|
2422
|
+
dropdownPosition
|
|
2423
|
+
} = usePossition({
|
|
2424
|
+
isOpen,
|
|
2425
|
+
popupRef,
|
|
2426
|
+
containerRef,
|
|
2427
|
+
popupHeight: 295,
|
|
2428
|
+
getPopupContainer
|
|
2429
|
+
});
|
|
2352
2430
|
const localeMonths = locale?.shortMonths || Array.from({
|
|
2353
2431
|
length: 12
|
|
2354
2432
|
}, (_, i) => new Date(0, i).toLocaleString(locale?.locale || 'default', {
|
|
@@ -2365,71 +2443,6 @@ const RangePicker = ({
|
|
|
2365
2443
|
document.addEventListener('mousedown', handleClickOutside);
|
|
2366
2444
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
2367
2445
|
}, []);
|
|
2368
|
-
const dropdownPossition = useCallback(() => {
|
|
2369
|
-
if (!containerRef.current) return {};
|
|
2370
|
-
const inputRect = containerRef.current.getBoundingClientRect();
|
|
2371
|
-
const popupEl = popupRef.current;
|
|
2372
|
-
const dropdownHeight = popupEl?.offsetHeight || 290;
|
|
2373
|
-
const popupContainer = getPopupContainer ? getPopupContainer(document.body) : getScrollParent(containerRef.current, true) || document.body;
|
|
2374
|
-
const containerRect = popupContainer.getBoundingClientRect();
|
|
2375
|
-
const spaceAbove = inputRect.top - containerRect.top;
|
|
2376
|
-
const spaceBelow = containerRect.bottom - inputRect.bottom;
|
|
2377
|
-
const shouldShowAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
|
|
2378
|
-
if (getPopupContainer) {
|
|
2379
|
-
if (shouldShowAbove) {
|
|
2380
|
-
setDropdownPosition({
|
|
2381
|
-
top: (containerRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop - 290,
|
|
2382
|
-
left: (containerRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
|
|
2383
|
-
});
|
|
2384
|
-
} else {
|
|
2385
|
-
setDropdownPosition({
|
|
2386
|
-
top: (containerRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop + (containerRef.current?.offsetHeight || 0),
|
|
2387
|
-
left: (containerRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
|
|
2388
|
-
});
|
|
2389
|
-
}
|
|
2390
|
-
} else {
|
|
2391
|
-
setDropdownPosition({
|
|
2392
|
-
top: shouldShowAbove ? containerRef.current.offsetTop - (popupEl?.offsetHeight || dropdownHeight) - 8 : containerRef.current.offsetTop + containerRef.current.offsetHeight,
|
|
2393
|
-
left: containerRef.current.offsetLeft
|
|
2394
|
-
});
|
|
2395
|
-
}
|
|
2396
|
-
}, [isOpen, getPopupContainer]);
|
|
2397
|
-
function getScrollParent(el, includeSelf = false) {
|
|
2398
|
-
if (!el) return null;
|
|
2399
|
-
let current = includeSelf ? el : el.parentElement;
|
|
2400
|
-
while (current) {
|
|
2401
|
-
const style = getComputedStyle(current);
|
|
2402
|
-
const overflowY = style.overflowY;
|
|
2403
|
-
const overflowX = style.overflowX;
|
|
2404
|
-
const canScroll = overflowY === 'auto' || overflowY === 'scroll' || overflowX === 'auto' || overflowX === 'scroll';
|
|
2405
|
-
if (canScroll) {
|
|
2406
|
-
return current;
|
|
2407
|
-
}
|
|
2408
|
-
current = current.parentElement;
|
|
2409
|
-
}
|
|
2410
|
-
return document.scrollingElement;
|
|
2411
|
-
}
|
|
2412
|
-
useEffect(() => {
|
|
2413
|
-
if (!isOpen) return;
|
|
2414
|
-
const _dropdownPossition = () => dropdownPossition();
|
|
2415
|
-
_dropdownPossition();
|
|
2416
|
-
const controller = new AbortController();
|
|
2417
|
-
const scrollableParents = getScrollParent(containerRef.current, true);
|
|
2418
|
-
scrollableParents?.addEventListener('scroll', _dropdownPossition, {
|
|
2419
|
-
passive: true,
|
|
2420
|
-
signal: controller.signal
|
|
2421
|
-
});
|
|
2422
|
-
window.addEventListener('scroll', _dropdownPossition, {
|
|
2423
|
-
passive: true,
|
|
2424
|
-
signal: controller.signal
|
|
2425
|
-
});
|
|
2426
|
-
window.addEventListener('resize', _dropdownPossition, {
|
|
2427
|
-
signal: controller.signal
|
|
2428
|
-
});
|
|
2429
|
-
return () => {
|
|
2430
|
-
controller.abort();
|
|
2431
|
-
};
|
|
2432
|
-
}, [isOpen, getPopupContainer, dropdownPossition]);
|
|
2433
2446
|
const isInHoverRange = date => {
|
|
2434
2447
|
const [start, end] = selectedDates;
|
|
2435
2448
|
if (!start || end || !hoveredDate) return false;
|
|
@@ -2643,8 +2656,10 @@ const RangePicker = ({
|
|
|
2643
2656
|
onClick: e => {
|
|
2644
2657
|
e.preventDefault();
|
|
2645
2658
|
e.stopPropagation();
|
|
2646
|
-
|
|
2647
|
-
|
|
2659
|
+
if (!isOpen) {
|
|
2660
|
+
setIsOpen(!isOpen);
|
|
2661
|
+
onOpenChange?.(!isOpen);
|
|
2662
|
+
}
|
|
2648
2663
|
}
|
|
2649
2664
|
}, prefix, /*#__PURE__*/React.createElement("input", {
|
|
2650
2665
|
readOnly: inputReadOnly,
|
|
@@ -2672,7 +2687,8 @@ const RangePicker = ({
|
|
|
2672
2687
|
ref: popupRef,
|
|
2673
2688
|
className: `${prefixCls}-dropdown-wrapper show`,
|
|
2674
2689
|
style: {
|
|
2675
|
-
...dropdownPosition
|
|
2690
|
+
...dropdownPosition,
|
|
2691
|
+
opacity: Object.keys(dropdownPosition).length ? 1 : 0
|
|
2676
2692
|
}
|
|
2677
2693
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2678
2694
|
className: `${prefixCls}-dropdown-range`
|
|
@@ -2684,7 +2700,7 @@ var RangePicker$1 = /*#__PURE__*/Object.freeze({
|
|
|
2684
2700
|
default: RangePicker
|
|
2685
2701
|
});
|
|
2686
2702
|
|
|
2687
|
-
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;padding:8px 0;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-x:hidden;overflow-y:auto;padding-left:4px;width:52px}.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;margin-bottom:2px;padding:6px 0;text-align:center;transition:background .3s;width:44px}.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,.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
|
|
2703
|
+
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;padding:8px 0;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-x:hidden;overflow-y:auto;padding-left:4px;width:52px}.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;margin-bottom:2px;padding:6px 0;text-align:center;transition:background .3s;width:44px}.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,.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 8px}.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)}.xUi-timepicker-popup{margin-top:4px;position:absolute;top:100%}";
|
|
2688
2704
|
styleInject(css_248z$d);
|
|
2689
2705
|
|
|
2690
2706
|
const HOURS = 24;
|
|
@@ -2720,7 +2736,15 @@ const TimePicker = ({
|
|
|
2720
2736
|
const hourRef = useRef(null);
|
|
2721
2737
|
const minuteRef = useRef(null);
|
|
2722
2738
|
const secondRef = useRef(null);
|
|
2723
|
-
const
|
|
2739
|
+
const {
|
|
2740
|
+
dropdownPosition
|
|
2741
|
+
} = usePossition({
|
|
2742
|
+
popupRef,
|
|
2743
|
+
isOpen: open,
|
|
2744
|
+
popupHeight: 235,
|
|
2745
|
+
getPopupContainer,
|
|
2746
|
+
containerRef: inputRef
|
|
2747
|
+
});
|
|
2724
2748
|
useEffect(() => {
|
|
2725
2749
|
setInnerValue(propValue || defaultValue ? new Date(propValue || defaultValue) : null);
|
|
2726
2750
|
}, [propValue]);
|
|
@@ -2887,71 +2911,6 @@ const TimePicker = ({
|
|
|
2887
2911
|
}
|
|
2888
2912
|
}
|
|
2889
2913
|
};
|
|
2890
|
-
const dropdownPossition = useCallback(() => {
|
|
2891
|
-
if (!inputRef.current) return {};
|
|
2892
|
-
const inputRect = inputRef.current.getBoundingClientRect();
|
|
2893
|
-
const popupEl = popupRef.current;
|
|
2894
|
-
const dropdownHeight = popupEl?.offsetHeight || 230;
|
|
2895
|
-
const popupContainer = getPopupContainer ? getPopupContainer(document.body) : getScrollParent(inputRef.current, true) || document.body;
|
|
2896
|
-
const containerRect = popupContainer.getBoundingClientRect();
|
|
2897
|
-
const spaceAbove = inputRect.top - containerRect.top;
|
|
2898
|
-
const spaceBelow = containerRect.bottom - inputRect.bottom;
|
|
2899
|
-
const shouldShowAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
|
|
2900
|
-
if (getPopupContainer) {
|
|
2901
|
-
if (shouldShowAbove) {
|
|
2902
|
-
setDropdownPosition({
|
|
2903
|
-
top: (inputRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop - 230,
|
|
2904
|
-
left: (inputRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
|
|
2905
|
-
});
|
|
2906
|
-
} else {
|
|
2907
|
-
setDropdownPosition({
|
|
2908
|
-
top: (inputRef.current?.getBoundingClientRect().top || 0) + document.documentElement.scrollTop + (inputRef.current?.offsetHeight || 0),
|
|
2909
|
-
left: (inputRef.current?.getBoundingClientRect().left || 0) + document.documentElement.scrollLeft
|
|
2910
|
-
});
|
|
2911
|
-
}
|
|
2912
|
-
} else {
|
|
2913
|
-
setDropdownPosition({
|
|
2914
|
-
top: shouldShowAbove ? inputRef.current.offsetTop - (popupEl?.offsetHeight || dropdownHeight) - 8 : inputRef.current.offsetTop + inputRef.current.offsetHeight,
|
|
2915
|
-
left: inputRef.current.offsetLeft
|
|
2916
|
-
});
|
|
2917
|
-
}
|
|
2918
|
-
}, [open, getPopupContainer]);
|
|
2919
|
-
function getScrollParent(el, includeSelf = false) {
|
|
2920
|
-
if (!el) return null;
|
|
2921
|
-
let current = includeSelf ? el : el.parentElement;
|
|
2922
|
-
while (current) {
|
|
2923
|
-
const style = getComputedStyle(current);
|
|
2924
|
-
const overflowY = style.overflowY;
|
|
2925
|
-
const overflowX = style.overflowX;
|
|
2926
|
-
const canScroll = overflowY === 'auto' || overflowY === 'scroll' || overflowX === 'auto' || overflowX === 'scroll';
|
|
2927
|
-
if (canScroll) {
|
|
2928
|
-
return current;
|
|
2929
|
-
}
|
|
2930
|
-
current = current.parentElement;
|
|
2931
|
-
}
|
|
2932
|
-
return document.scrollingElement;
|
|
2933
|
-
}
|
|
2934
|
-
useEffect(() => {
|
|
2935
|
-
if (!open) return;
|
|
2936
|
-
const _dropdownPossition = () => dropdownPossition();
|
|
2937
|
-
_dropdownPossition();
|
|
2938
|
-
const controller = new AbortController();
|
|
2939
|
-
const scrollableParents = getScrollParent(inputRef.current, true);
|
|
2940
|
-
scrollableParents?.addEventListener('scroll', _dropdownPossition, {
|
|
2941
|
-
passive: true,
|
|
2942
|
-
signal: controller.signal
|
|
2943
|
-
});
|
|
2944
|
-
window.addEventListener('scroll', _dropdownPossition, {
|
|
2945
|
-
passive: true,
|
|
2946
|
-
signal: controller.signal
|
|
2947
|
-
});
|
|
2948
|
-
window.addEventListener('resize', _dropdownPossition, {
|
|
2949
|
-
signal: controller.signal
|
|
2950
|
-
});
|
|
2951
|
-
return () => {
|
|
2952
|
-
controller.abort();
|
|
2953
|
-
};
|
|
2954
|
-
}, [open, getPopupContainer, dropdownPossition]);
|
|
2955
2914
|
const renderOptions = () => {
|
|
2956
2915
|
const hours = Array.from({
|
|
2957
2916
|
length: HOURS + ADD_EMPTY_SECTION_COUNT
|