@dreamcommerce/aurora 2.4.3 → 2.4.4
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/build/cjs/packages/aurora/src/components/controls/hoc/control_cell_selector/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_checkbox/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_checkbox_switch/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_color_picker/index.js +3 -3
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_date_picker/index.js +4 -4
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_file_picker/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_input/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_multi_select/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_radio/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_radio_group/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_range/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_select/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_tags_selector/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_textarea/index.js +2 -2
- package/build/cjs/packages/aurora/src/components/date_picker/components/common_ranges.js +1 -1
- package/build/cjs/packages/aurora/src/components/date_picker/components/days_grid.js +1 -1
- package/build/cjs/packages/aurora/src/components/date_picker/components/label.js +2 -2
- package/build/cjs/packages/aurora/src/components/date_picker/components/month_controller.js +3 -3
- package/build/cjs/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_view.js +2 -2
- package/build/cjs/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_year_controller.js +1 -1
- package/build/cjs/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_year_picker_context_manager.js +1 -1
- package/build/cjs/packages/aurora/src/components/date_picker/components/month_year_picker/components/years_view.js +2 -2
- package/build/cjs/packages/aurora/src/components/date_picker/components/pure_date_picker.js +2 -2
- package/build/cjs/packages/aurora/src/components/date_picker/components/single_day.js +2 -2
- package/build/cjs/packages/aurora/src/components/date_picker/hoc/range_picker.js +2 -2
- package/build/cjs/packages/aurora/src/components/date_picker/hoc/single_date_picker.js +1 -1
- package/build/cjs/packages/aurora/src/components/date_picker/index.js +1 -1
- package/build/cjs/packages/aurora/src/components/dropdown/components/content.js +8 -10
- package/build/cjs/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/dropdown/components/option_multiple.js +1 -1
- package/build/cjs/packages/aurora/src/components/dropdown/components/select.js +1 -1
- package/build/cjs/packages/aurora/src/components/dropdown/css_classes.js +6 -2
- package/build/cjs/packages/aurora/src/components/dropdown/css_classes.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/hint/index.js +19 -15
- package/build/cjs/packages/aurora/src/components/hint/index.js.map +1 -1
- package/build/cjs/packages/aurora/src/css/date_picker/main.module.less.js +2 -2
- package/build/cjs/packages/aurora/src/css/dropdown/main.module.less.js +2 -2
- package/build/cjs/packages/aurora/src/css/hint/main.module.less.js +3 -3
- package/build/cjs/packages/aurora/src/index.js +10 -10
- package/build/esm/packages/aurora/src/components/controls/hoc/control_cell_selector/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_checkbox/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_checkbox_switch/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker/index.js +3 -3
- package/build/esm/packages/aurora/src/components/controls/hoc/control_date_picker/index.js +4 -4
- package/build/esm/packages/aurora/src/components/controls/hoc/control_file_picker/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_input/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_multi_select/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_radio/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_radio_group/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_range/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_select/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_tags_selector/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_textarea/index.js +2 -2
- package/build/esm/packages/aurora/src/components/controls/types.d.ts +1 -5
- package/build/esm/packages/aurora/src/components/controls/types.js +1 -1
- package/build/esm/packages/aurora/src/components/controls/types.js.map +1 -1
- package/build/esm/packages/aurora/src/components/date_picker/components/common_ranges.js +2 -2
- package/build/esm/packages/aurora/src/components/date_picker/components/days_grid.js +4 -4
- package/build/esm/packages/aurora/src/components/date_picker/components/label.js +3 -3
- package/build/esm/packages/aurora/src/components/date_picker/components/month_controller.js +7 -7
- package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_view.js +3 -3
- package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_year_controller.js +5 -5
- package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/month_year_picker_context_manager.js +1 -1
- package/build/esm/packages/aurora/src/components/date_picker/components/month_year_picker/components/years_view.js +3 -3
- package/build/esm/packages/aurora/src/components/date_picker/components/pure_date_picker.js +4 -4
- package/build/esm/packages/aurora/src/components/date_picker/components/single_day.js +4 -4
- package/build/esm/packages/aurora/src/components/date_picker/hoc/range_picker.js +4 -4
- package/build/esm/packages/aurora/src/components/date_picker/hoc/single_date_picker.js +2 -2
- package/build/esm/packages/aurora/src/components/date_picker/index.js +1 -1
- package/build/esm/packages/aurora/src/components/dropdown/components/content.js +8 -11
- package/build/esm/packages/aurora/src/components/dropdown/components/content.js.map +1 -1
- package/build/esm/packages/aurora/src/components/dropdown/components/option_multiple.js +1 -1
- package/build/esm/packages/aurora/src/components/dropdown/components/select.js +1 -1
- package/build/esm/packages/aurora/src/components/dropdown/css_classes.d.ts +2 -0
- package/build/esm/packages/aurora/src/components/dropdown/css_classes.js +5 -3
- package/build/esm/packages/aurora/src/components/dropdown/css_classes.js.map +1 -1
- package/build/esm/packages/aurora/src/components/hint/index.d.ts +3 -3
- package/build/esm/packages/aurora/src/components/hint/index.js +21 -17
- package/build/esm/packages/aurora/src/components/hint/index.js.map +1 -1
- package/build/esm/packages/aurora/src/css/date_picker/main.module.less.js +2 -2
- package/build/esm/packages/aurora/src/css/dropdown/main.module.less.js +2 -2
- package/build/esm/packages/aurora/src/css/hint/main.module.less.js +3 -3
- package/build/esm/packages/aurora/src/hooks/use_fixed_child_position.js +31 -34
- package/build/esm/packages/aurora/src/hooks/use_fixed_child_position.js.map +1 -1
- package/build/esm/packages/aurora/src/index.js +5 -5
- package/package.json +1 -1
- package/build/cjs/packages/aurora/src/hooks/use_fixed_child_position.js +0 -40
- package/build/cjs/packages/aurora/src/hooks/use_fixed_child_position.js.map +0 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React, { useContext, useRef } from 'react';
|
|
2
2
|
import Dropdown from '../../dropdown/index.js';
|
|
3
|
-
import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
|
|
4
|
-
import { cssDatePickerController, cssDatePickerControllerArrow, cssDatePickerControllerArrowLeft, cssDatePickerControllerTitle, cssDatePickerControllerArrowRight } from '../css_classes.js';
|
|
5
|
-
import cssClasses from '../../../css/date_picker/main.module.less.js';
|
|
6
3
|
import { DATE_PICKER_TEST_ID } from '../constants.js';
|
|
4
|
+
import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
|
|
7
5
|
import { useKeyboardNavigation } from '../hooks/use_keyboard_navigation.js';
|
|
6
|
+
import styles from '../../../css/date_picker/main.module.less.js';
|
|
7
|
+
import { cssDatePickerController, cssDatePickerControllerArrow, cssDatePickerControllerArrowLeft, cssDatePickerControllerTitle, cssDatePickerControllerArrowRight } from '../css_classes.js';
|
|
8
8
|
import useDateNames from '../hooks/use_date_names.js';
|
|
9
9
|
import MonthYearPicker from './month_year_picker/index.js';
|
|
10
10
|
|
|
@@ -13,14 +13,14 @@ const MonthController = ({ month, year }) => {
|
|
|
13
13
|
const { monthNames } = useDateNames();
|
|
14
14
|
const controllerRef = useRef(null);
|
|
15
15
|
useKeyboardNavigation();
|
|
16
|
-
return (React.createElement("div", { className: `${
|
|
17
|
-
React.createElement("div", { onClick: previousMonth, className: `${
|
|
18
|
-
React.createElement("div", { className:
|
|
16
|
+
return (React.createElement("div", { className: `${styles[cssDatePickerController]}`, ref: controllerRef, "data-test-id": DATE_PICKER_TEST_ID.controller },
|
|
17
|
+
React.createElement("div", { onClick: previousMonth, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowLeft]}`, "data-test-id": DATE_PICKER_TEST_ID.arrowLeft }),
|
|
18
|
+
React.createElement("div", { className: styles[cssDatePickerControllerTitle] },
|
|
19
19
|
React.createElement(Dropdown, null,
|
|
20
20
|
React.createElement(Dropdown.Label, { cssClass: animationClassName, label: `${monthNames[month]} ${year}` }),
|
|
21
21
|
React.createElement(Dropdown.Content, { portalContainer: controllerRef },
|
|
22
22
|
React.createElement(MonthYearPicker, { month: month, year: year })))),
|
|
23
|
-
React.createElement("div", { onClick: nextMonth, className: `${
|
|
23
|
+
React.createElement("div", { onClick: nextMonth, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowRight]}`, "data-test-id": DATE_PICKER_TEST_ID.arrowRight })));
|
|
24
24
|
};
|
|
25
25
|
|
|
26
26
|
export default MonthController;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
2
|
import { DropdownContext } from '../../../../dropdown/context/index.js';
|
|
3
|
+
import { MONTHS_IN_YEAR } from '../../../constants.js';
|
|
3
4
|
import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
|
|
5
|
+
import styles from '../../../../../css/date_picker/main.module.less.js';
|
|
4
6
|
import { cssDatePickerMonthTable, cssDatePickerMonthTableItem, cssDatePickerMonthTableItemSelected } from '../../../css_classes.js';
|
|
5
|
-
import cssClasses from '../../../../../css/date_picker/main.module.less.js';
|
|
6
|
-
import { MONTHS_IN_YEAR } from '../../../constants.js';
|
|
7
7
|
import useDateNames from '../../../hooks/use_date_names.js';
|
|
8
8
|
|
|
9
9
|
const MonthView = () => {
|
|
@@ -14,7 +14,7 @@ const MonthView = () => {
|
|
|
14
14
|
setMonth(monthIndex);
|
|
15
15
|
toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
|
|
16
16
|
};
|
|
17
|
-
return (React.createElement("div", { className:
|
|
17
|
+
return (React.createElement("div", { className: styles[cssDatePickerMonthTable] }, Array.from(Array(MONTHS_IN_YEAR).keys()).map((index) => (React.createElement("span", { key: `month-picker-month-${index}`, onClick: onMonthClick(index), className: `${styles[cssDatePickerMonthTableItem]} ${index === month ? styles[cssDatePickerMonthTableItemSelected] : ''}` }, monthNameShortcuts[index])))));
|
|
18
18
|
};
|
|
19
19
|
|
|
20
20
|
export default MonthView;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
|
+
import styles from '../../../../../css/date_picker/main.module.less.js';
|
|
2
3
|
import { cssDatePickerController, cssDatePickerControllerArrow, cssDatePickerControllerArrowLeft, cssDatePickerControllerTitle, cssDatePickerControllerArrowRight } from '../../../css_classes.js';
|
|
3
|
-
import cssClasses from '../../../../../css/date_picker/main.module.less.js';
|
|
4
4
|
import { MonthYearPickerContext } from '../context.js';
|
|
5
5
|
|
|
6
6
|
const MonthYearPickerController = () => {
|
|
7
7
|
const { onArrowLeft, onArrowRight, monthPickerTitle, toggleView } = useContext(MonthYearPickerContext);
|
|
8
|
-
return (React.createElement("div", { className:
|
|
9
|
-
React.createElement("div", { "data-test-id": "month-year-left-arrow", onClick: onArrowLeft, className: `${
|
|
10
|
-
React.createElement("div", { onClick: toggleView, className:
|
|
11
|
-
React.createElement("div", { "data-test-id": "month-year-right-arrow", onClick: onArrowRight, className: `${
|
|
8
|
+
return (React.createElement("div", { className: styles[cssDatePickerController] },
|
|
9
|
+
React.createElement("div", { "data-test-id": "month-year-left-arrow", onClick: onArrowLeft, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowLeft]}` }),
|
|
10
|
+
React.createElement("div", { onClick: toggleView, className: styles[cssDatePickerControllerTitle] }, monthPickerTitle),
|
|
11
|
+
React.createElement("div", { "data-test-id": "month-year-right-arrow", onClick: onArrowRight, className: `${styles[cssDatePickerControllerArrow]} ${styles[cssDatePickerControllerArrowRight]}` })));
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
export default MonthYearPickerController;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useContext, useState } from 'react';
|
|
2
|
-
import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
|
|
3
2
|
import { YEARS_IN_VIEW } from '../../../constants.js';
|
|
3
|
+
import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
|
|
4
4
|
import { MonthYearPickerContext } from '../context.js';
|
|
5
5
|
import { MONTH_VIEW, YEARS_VIEW } from '../constants.js';
|
|
6
6
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
|
+
import { YEARS_IN_VIEW } from '../../../constants.js';
|
|
2
3
|
import MonthYearNavigationContext from '../../../context/month_year_navigation_context.js';
|
|
4
|
+
import styles from '../../../../../css/date_picker/main.module.less.js';
|
|
3
5
|
import { cssDatePickerMonthTable, cssDatePickerMonthTableItem, cssDatePickerMonthTableItemSelected } from '../../../css_classes.js';
|
|
4
|
-
import cssClasses from '../../../../../css/date_picker/main.module.less.js';
|
|
5
|
-
import { YEARS_IN_VIEW } from '../../../constants.js';
|
|
6
6
|
import { MonthYearPickerContext } from '../context.js';
|
|
7
7
|
import { MONTH_VIEW } from '../constants.js';
|
|
8
8
|
|
|
@@ -13,7 +13,7 @@ const YearView = () => {
|
|
|
13
13
|
setYear(yearRange + yearIndex);
|
|
14
14
|
setView(MONTH_VIEW);
|
|
15
15
|
};
|
|
16
|
-
return (React.createElement("div", { className:
|
|
16
|
+
return (React.createElement("div", { className: styles[cssDatePickerMonthTable] }, Array.from(Array(YEARS_IN_VIEW).keys()).map((index) => (React.createElement("span", { key: `month-picker-month-${index}`, onClick: onYearClick(index), className: `${styles[cssDatePickerMonthTableItem]} ${yearRange + index === year ? styles[cssDatePickerMonthTableItemSelected] : ''}` }, yearRange + index)))));
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
export default YearView;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
|
|
3
|
-
import { cssDatePickerContainer } from '../css_classes.js';
|
|
4
|
-
import cssClasses from '../../../css/date_picker/main.module.less.js';
|
|
5
2
|
import { MAX_MONTH, MIN_MONTH } from '../constants.js';
|
|
3
|
+
import MonthYearNavigationContext from '../context/month_year_navigation_context.js';
|
|
4
|
+
import styles from '../../../css/date_picker/main.module.less.js';
|
|
6
5
|
import useAnimation from '../hooks/use_animation.js';
|
|
6
|
+
import { cssDatePickerContainer } from '../css_classes.js';
|
|
7
7
|
import DaysGrid from './days_grid.js';
|
|
8
8
|
import MonthController from './month_controller.js';
|
|
9
9
|
|
|
@@ -38,7 +38,7 @@ const PureDatepicker = ({ className = '', setMonthYear, month, year }) => {
|
|
|
38
38
|
setMonthYearWithDelay(({ year }) => ({ month, year }));
|
|
39
39
|
};
|
|
40
40
|
const setYear = (year) => setMonthYearWithDelay(({ month }) => ({ month, year }));
|
|
41
|
-
return (React.createElement("div", { className: `${className} ${
|
|
41
|
+
return (React.createElement("div", { className: `${className} ${styles[cssDatePickerContainer]}` },
|
|
42
42
|
React.createElement(MonthYearNavigationContext.Provider, { value: {
|
|
43
43
|
previousMonth: prevMonthWithAnimation,
|
|
44
44
|
nextMonth: nextMonthWithAnimation,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { useContext, useMemo } from 'react';
|
|
2
2
|
import { classNames } from '../../../utilities/styles/classNames.js';
|
|
3
|
+
import { DATE_PICKER_TEST_ID } from '../constants.js';
|
|
3
4
|
import DatepickerContext from '../context/value_controller_context.js';
|
|
5
|
+
import styles from '../../../css/date_picker/main.module.less.js';
|
|
4
6
|
import { cssDatePickerDay, cssDatePickerDayNavigation, cssDatePickerDaySelected, cssDatePickerDayBlocked, cssDatePickerDayProposed, cssDatePickerDayRangeEndLeft, cssDatePickerDayRangeEndLeftProposed, cssDatePickerDayRangeEndRight, cssDatePickerDayRangeEndRightProposed, cssDatePickerDayInRange, cssDatePickerDayText, cssDatePickerDayTextRoundedBorders, cssDatePickerDayTextNavigation, cssDatePickerDayTextToday, cssDatePickerDayTextSelected } from '../css_classes.js';
|
|
5
|
-
import cssClasses from '../../../css/date_picker/main.module.less.js';
|
|
6
|
-
import { DATE_PICKER_TEST_ID } from '../constants.js';
|
|
7
7
|
|
|
8
8
|
const SingleDay = ({ date, month, year }) => {
|
|
9
9
|
const { updateDate, isSelected, isInRange, isNavigation, isBlocked, isToday, setHoverDate, isProposed } = useContext(DatepickerContext);
|
|
@@ -32,7 +32,7 @@ const SingleDay = ({ date, month, year }) => {
|
|
|
32
32
|
lastRangeDay && proposed && cssDatePickerDayRangeEndRightProposed,
|
|
33
33
|
oneDayRange && cssDatePickerDaySelected,
|
|
34
34
|
inRange && cssDatePickerDayInRange
|
|
35
|
-
],
|
|
35
|
+
], styles), [navigation, selected, blocked, proposed, inRange, firstRangeDay, lastRangeDay, oneDayRange]);
|
|
36
36
|
const dayTextClassName = useMemo(() => classNames([
|
|
37
37
|
cssDatePickerDayText,
|
|
38
38
|
roundedBorders && cssDatePickerDayTextRoundedBorders,
|
|
@@ -40,7 +40,7 @@ const SingleDay = ({ date, month, year }) => {
|
|
|
40
40
|
today && navigation && cssDatePickerDayTextNavigation,
|
|
41
41
|
today && cssDatePickerDayTextToday,
|
|
42
42
|
selected && cssDatePickerDayTextSelected
|
|
43
|
-
],
|
|
43
|
+
], styles), [roundedBorders, selected, navigation, today]);
|
|
44
44
|
return (React.createElement("div", { className: dayClassName, onClick: () => updateDate(new Date(year, month, date)), onMouseOver: () => {
|
|
45
45
|
setHoverDate(new Date(year, month, date));
|
|
46
46
|
} },
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { useContext, useState, useEffect } from 'react';
|
|
2
2
|
import DatepickerContext from '../context/value_controller_context.js';
|
|
3
|
-
import { cssRangePicker, cssRangePickerContainer } from '../css_classes.js';
|
|
4
|
-
import cssClasses from '../../../css/date_picker/main.module.less.js';
|
|
5
3
|
import { useKeyboardNavigation } from '../hooks/use_keyboard_navigation.js';
|
|
4
|
+
import styles from '../../../css/date_picker/main.module.less.js';
|
|
5
|
+
import { cssRangePicker, cssRangePickerContainer } from '../css_classes.js';
|
|
6
6
|
import { PureDatepicker } from '../components/pure_date_picker.js';
|
|
7
7
|
import CommonRanges from '../components/common_ranges.js';
|
|
8
8
|
import Buttons from '../components/buttons.js';
|
|
@@ -36,9 +36,9 @@ const RangePicker = ({ className = '', showButtons, showDefaultRanges }) => {
|
|
|
36
36
|
//eslint-disable-next-line
|
|
37
37
|
}, [setEarlierMonthYear, laterMonthYear.year, laterMonthYear.month]);
|
|
38
38
|
useKeyboardNavigation();
|
|
39
|
-
return (React.createElement("div", { className:
|
|
39
|
+
return (React.createElement("div", { className: styles[cssRangePicker] },
|
|
40
40
|
showDefaultRanges && React.createElement(CommonRanges, null),
|
|
41
|
-
React.createElement("div", { className:
|
|
41
|
+
React.createElement("div", { className: styles[cssRangePickerContainer] },
|
|
42
42
|
React.createElement(PureDatepicker, { setMonthYear: setEarlierMonthYear, ...earlierMonthYear, className: className }),
|
|
43
43
|
React.createElement(PureDatepicker, { setMonthYear: setLaterMonthYear, ...laterMonthYear, className: className })),
|
|
44
44
|
showButtons && React.createElement(Buttons, null)));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useContext, useState } from 'react';
|
|
2
2
|
import DatepickerContext from '../context/value_controller_context.js';
|
|
3
|
+
import styles from '../../../css/date_picker/main.module.less.js';
|
|
3
4
|
import { cssDatePicker } from '../css_classes.js';
|
|
4
|
-
import cssClasses from '../../../css/date_picker/main.module.less.js';
|
|
5
5
|
import { PureDatepicker } from '../components/pure_date_picker.js';
|
|
6
6
|
import Buttons from '../components/buttons.js';
|
|
7
7
|
|
|
@@ -13,7 +13,7 @@ const SingleDatepicker = ({ className, showButtons }) => {
|
|
|
13
13
|
year: currentDate.getFullYear()
|
|
14
14
|
});
|
|
15
15
|
return (React.createElement(React.Fragment, null,
|
|
16
|
-
React.createElement("div", { className:
|
|
16
|
+
React.createElement("div", { className: styles[cssDatePicker] },
|
|
17
17
|
React.createElement(PureDatepicker, { setMonthYear: setMonthYear, month: month, year: year, className: className }),
|
|
18
18
|
showButtons && React.createElement(Buttons, null))));
|
|
19
19
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
|
-
import DatepickerContext from './context/value_controller_context.js';
|
|
3
2
|
import useValueController from './hooks/use_value_controller.js';
|
|
3
|
+
import DatepickerContext from './context/value_controller_context.js';
|
|
4
4
|
import { RangePicker } from './hoc/range_picker.js';
|
|
5
5
|
export { RangePicker } from './hoc/range_picker.js';
|
|
6
6
|
import { SingleDatepicker } from './hoc/single_date_picker.js';
|
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import React, { useRef, useState, useEffect } from 'react';
|
|
2
2
|
import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
|
-
import cssClasses$
|
|
4
|
+
import cssClasses$2 from '../../../css/icons/main.module.less.js';
|
|
5
|
+
import classnames from 'classnames';
|
|
5
6
|
import { useDropdownContext } from '../context/index.js';
|
|
6
7
|
import { SCREEN_XS } from '../../../constants/responsive_breakpoints.js';
|
|
7
8
|
import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
|
|
8
9
|
import withTranslation from '../../../utilities/translation/with_translation.js';
|
|
9
|
-
import { classNames } from '../../../utilities/styles/classNames.js';
|
|
10
10
|
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
11
11
|
import { DROPDOWN_Z_INDEX, DROPDOWN_ON_MODAL_Z_INDEX } from '../constants.js';
|
|
12
|
-
import { cssDropdownContent, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
|
|
12
|
+
import { cssDropdownContent, cssDropdownContentOnTop, cssDropdownContentOnBottom, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
|
|
13
13
|
import cssClasses from '../../../css/dropdown/main.module.less.js';
|
|
14
14
|
import { getBounding, getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities.js';
|
|
15
15
|
import { useClickOutside } from '../../../hooks/use_click_outside.js';
|
|
16
16
|
import IconArrow from '../../../assets/icon_arrow.js';
|
|
17
17
|
import { UiDomUtils } from '@dreamcommerce/utilities';
|
|
18
|
+
import cssClasses$1 from '../../../css/hint/main.module.less.js';
|
|
18
19
|
|
|
19
20
|
/**
|
|
20
21
|
* Dropdown.Content component. This togglable part of dropdown.
|
|
@@ -49,13 +50,9 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
|
|
|
49
50
|
};
|
|
50
51
|
const dropdownIsOutsideTopViewport = checkIfIsOutsideTopViewport();
|
|
51
52
|
const dropdownIsOutsideBottomViewport = checkIfIsOutsideBottomViewport();
|
|
52
|
-
const
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
(dropdownIsOutsideBottomViewport || (verticalPosition === 'top' && !dropdownIsOutsideTopViewport)) &&
|
|
56
|
-
cssDropdownArrowVerticalDirectionBottom,
|
|
57
|
-
cssClass
|
|
58
|
-
], cssClasses);
|
|
53
|
+
const contentShouldAppearOnTop = dropdownIsOutsideBottomViewport || (verticalPosition === 'top' && !dropdownIsOutsideTopViewport);
|
|
54
|
+
const contentShouldAppearOnBottom = dropdownIsOutsideTopViewport || (verticalPosition === 'bottom' && !dropdownIsOutsideBottomViewport);
|
|
55
|
+
const contentClassName = classnames(cssClasses[cssDropdownContent], contentShouldAppearOnTop && cssClasses$1[cssDropdownContentOnTop], contentShouldAppearOnBottom && cssClasses$1[cssDropdownContentOnBottom], arrowSide === 'right' && cssClasses[cssDropdownArrowHorizontalDirectionRight], contentShouldAppearOnTop && cssClasses[cssDropdownArrowVerticalDirectionBottom], cssClass);
|
|
59
56
|
const screenWidthName = useScreenDetect();
|
|
60
57
|
const refs = [contentRef];
|
|
61
58
|
if (wrapperRef) {
|
|
@@ -137,7 +134,7 @@ const Content = ({ headerComponent, headerGoBackText, headerGoBackIcon, children
|
|
|
137
134
|
React.createElement("div", { ref: contentRef, style: styles, className: contentClassName },
|
|
138
135
|
React.createElement("div", { className: cssClasses[cssDropdownHeader] },
|
|
139
136
|
React.createElement("div", { onClick: () => typeof toggleDropdown === 'function' && toggleDropdown() }, headerComponent !== null && headerComponent !== void 0 ? headerComponent : (React.createElement("div", { className: cssClasses[cssDropdownHeaderContent] },
|
|
140
|
-
headerGoBackIcon || React.createElement(IconArrow, { className: cssClasses$
|
|
137
|
+
headerGoBackIcon || React.createElement(IconArrow, { className: cssClasses$2['icon_rotate-180'] }),
|
|
141
138
|
React.createElement("span", { className: cssClasses[cssDropdownHeaderTitle] }, headerGoBackText !== null && headerGoBackText !== void 0 ? headerGoBackText : t('Go back')))))),
|
|
142
139
|
children))) : null), (portalContainer === null || portalContainer === void 0 ? void 0 : portalContainer.current) || document.body);
|
|
143
140
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import classnames from 'classnames';
|
|
3
|
-
import ControlCheckbox from '../../controls/hoc/control_checkbox/index.js';
|
|
4
3
|
import { cssDropdownListItem, cssDropdownListItemSelected, cssDropdownListItemDisabled, cssDropdownListItemReadonly } from '../css_classes.js';
|
|
5
4
|
import cssClasses from '../../../css/dropdown/main.module.less.js';
|
|
6
5
|
import Item from './item.js';
|
|
6
|
+
import ControlCheckbox from '../../controls/hoc/control_checkbox/index.js';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Dropdown.OptionMultiple component. Should be only used within Dropdown.List
|
|
@@ -2,10 +2,10 @@ import React, { useRef } from 'react';
|
|
|
2
2
|
import { useDropdownContext } from '../context/index.js';
|
|
3
3
|
import { cssControlInputRemoveButton } from '../../controls/css_classes.js';
|
|
4
4
|
import inputCssClasses from '../../../css/input/main.module.less.js';
|
|
5
|
-
import InputWrapper from '../../controls/components/input_wrapper.js';
|
|
6
5
|
import cssClasses from '../../../css/dropdown/main.module.less.js';
|
|
7
6
|
import { useKeyboardOpenClose } from '../hooks/use_keyboard_open_close.js';
|
|
8
7
|
import IconClose from '../../../assets/icon_close.js';
|
|
8
|
+
import InputWrapper from '../../controls/components/input_wrapper.js';
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Dropdown.Select component. Displays select like control. Use it only if you have selectable values.
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export declare const cssDropdown = "dropdown";
|
|
2
2
|
export declare const cssDropdownContent: string;
|
|
3
|
+
export declare const cssDropdownContentOnTop: string;
|
|
4
|
+
export declare const cssDropdownContentOnBottom: string;
|
|
3
5
|
export declare const cssDropdownArrowHorizontalDirectionRight: string;
|
|
4
6
|
export declare const cssDropdownArrowVerticalDirectionBottom: string;
|
|
5
7
|
export declare const cssDropdownHeader: string;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
const cssDropdown = 'dropdown';
|
|
2
2
|
const cssDropdownContent = `${cssDropdown}__content`;
|
|
3
|
-
const
|
|
4
|
-
const
|
|
3
|
+
const cssDropdownContentOnTop = `${cssDropdownContent}_top`;
|
|
4
|
+
const cssDropdownContentOnBottom = `${cssDropdownContent}_bottom`;
|
|
5
|
+
const cssDropdownArrowHorizontalDirectionRight = `${cssDropdownContent}_arrow-right`;
|
|
6
|
+
const cssDropdownArrowVerticalDirectionBottom = `${cssDropdownContent}_arrow-bottom`;
|
|
5
7
|
const cssDropdownHeader = `${cssDropdown}__header`;
|
|
6
8
|
const cssDropdownHeaderTitle = `${cssDropdown}__header-title`;
|
|
7
9
|
const cssDropdownHeaderContent = `${cssDropdown}__header-content`;
|
|
@@ -16,5 +18,5 @@ const cssDropdownListItemSelected = `${cssDropdown}__list-item_selected`;
|
|
|
16
18
|
const cssDropdownListItemDisabled = `${cssDropdown}__list-item_disabled`;
|
|
17
19
|
const cssDropdownListItemReadonly = `${cssDropdown}__list-item_readonly`;
|
|
18
20
|
|
|
19
|
-
export { cssDropdown, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownContent, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle, cssDropdownItemWithHover, cssDropdownList, cssDropdownListHead, cssDropdownListItem, cssDropdownListItemDisabled, cssDropdownListItemReadonly, cssDropdownListItemSelected, cssDropdownListWithGroup, cssDropdownSearch, cssDropdownWithScroll };
|
|
21
|
+
export { cssDropdown, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownContent, cssDropdownContentOnBottom, cssDropdownContentOnTop, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle, cssDropdownItemWithHover, cssDropdownList, cssDropdownListHead, cssDropdownListItem, cssDropdownListItemDisabled, cssDropdownListItemReadonly, cssDropdownListItemSelected, cssDropdownListWithGroup, cssDropdownSearch, cssDropdownWithScroll };
|
|
20
22
|
//# sourceMappingURL=css_classes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React, { ReactElement } from 'react';
|
|
2
|
-
|
|
2
|
+
import { IDropdownProps } from "../dropdown/types";
|
|
3
|
+
export interface IHint extends IDropdownProps {
|
|
3
4
|
hint: string | ReactElement;
|
|
4
5
|
vPosition?: 'top' | 'bottom';
|
|
5
|
-
hPosition?: 'left' | 'right'
|
|
6
|
+
hPosition?: 'left' | 'right';
|
|
6
7
|
spacingLeft?: boolean;
|
|
7
8
|
spacingRight?: boolean;
|
|
8
9
|
iconClass?: string;
|
|
@@ -10,7 +11,6 @@ export interface IHint {
|
|
|
10
11
|
Icon?: React.FC<{
|
|
11
12
|
className?: string;
|
|
12
13
|
}>;
|
|
13
|
-
fixed?: boolean;
|
|
14
14
|
}
|
|
15
15
|
declare const Hint: React.FC<IHint>;
|
|
16
16
|
export default Hint;
|
|
@@ -1,25 +1,29 @@
|
|
|
1
1
|
import React, { useRef } from 'react';
|
|
2
|
+
import { DropdownContext } from '../dropdown/context/index.js';
|
|
2
3
|
import { classNames } from '../../utilities/styles/classNames.js';
|
|
3
|
-
import
|
|
4
|
+
import cssClasses from '../../css/hint/main.module.less.js';
|
|
5
|
+
import { useToggle } from '../dropdown/hooks/use_toggle.js';
|
|
6
|
+
import Dropdown from '../dropdown/index.js';
|
|
4
7
|
import IconHint from '../../assets/icon_hint.js';
|
|
5
|
-
import { useFixedChildPosition } from '../../hooks/use_fixed_child_position.js';
|
|
6
8
|
|
|
7
|
-
const Hint = ({ hint,
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
hPosition === 'center' && 'hint_horizontal-center',
|
|
14
|
-
vPosition === 'top' && 'hint_top'
|
|
15
|
-
], styles);
|
|
16
|
-
const hintContentRef = useRef(null);
|
|
17
|
-
const { onMouseEnter, style } = useFixedChildPosition({ useFixed: fixed, vPosition, hPosition, childRef: hintContentRef });
|
|
18
|
-
const contentClassName = classNames(['hint__content', yellow && 'hint__content_yellow'], styles);
|
|
9
|
+
const Hint = ({ hint, vPosition = 'top', yellow, hPosition = 'right', spacingLeft, spacingRight, iconClass, Icon, onToggle }) => {
|
|
10
|
+
const wrapperRef = useRef(null);
|
|
11
|
+
const [isOpen, toggleDropdown] = useToggle(false, onToggle);
|
|
12
|
+
const value = React.useMemo(() => ({ wrapperRef, isOpen, toggleDropdown }), [isOpen, toggleDropdown]);
|
|
13
|
+
const containerClassName = classNames(['hint', spacingLeft && 'hint_spacing-left', spacingRight && 'hint_spacing-right'], cssClasses);
|
|
14
|
+
const contentClassName = classNames(['hint__content', yellow && 'hint__content_yellow'], cssClasses);
|
|
19
15
|
const IconComponent = Icon || IconHint;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
const handleOnMouseEnter = () => {
|
|
17
|
+
toggleDropdown();
|
|
18
|
+
};
|
|
19
|
+
const handleOnMouseLeave = () => {
|
|
20
|
+
toggleDropdown();
|
|
21
|
+
};
|
|
22
|
+
return (React.createElement(DropdownContext.Provider, { value: value },
|
|
23
|
+
React.createElement("span", { className: containerClassName, ref: wrapperRef, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
|
|
24
|
+
React.createElement(IconComponent, { className: iconClass }),
|
|
25
|
+
React.createElement(Dropdown.Content, { cssClass: contentClassName, headerComponent: "", arrowSide: hPosition === 'left' ? 'right' : 'left', horizontalPosition: hPosition === 'right' ? 'left' : 'right', verticalPosition: vPosition === 'top' ? 'top' : 'bottom' },
|
|
26
|
+
React.createElement("span", null, hint)))));
|
|
23
27
|
};
|
|
24
28
|
|
|
25
29
|
export default Hint;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
3
|
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@media screen and (min-width: 577px) {\n .main-module_date-picker__ZqlVj {\n max-width: 16rem;\n }\n}\n@media screen and (max-width: 576px) {\n .main-module_date-picker__ZqlVj,\n .main-module_range-picker__2nqS6 {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n }\n .main-module_date-picker__container__3Jt5v {\n flex-grow: 1;\n }\n .main-module_range-picker__2nqS6 .main-module_date-picker__container__3Jt5v:nth-child(1) {\n flex-grow: 1;\n }\n .main-module_range-picker__2nqS6 .main-module_date-picker__container__3Jt5v:nth-child(2) {\n display: none;\n }\n}\n.main-module_date-picker__container__3Jt5v {\n width: 100%;\n background: #ffffff;\n}\n.main-module_date-picker__common-ranges__3aEeE {\n margin: 0 1rem;\n}\n.main-module_date-picker__controller__1csI7 {\n display: flex;\n align-items: center;\n margin: 0.5rem 1rem;\n}\n.main-module_date-picker__controller-arrow__2ip9A {\n border-color: #135cc8;\n border-style: solid;\n width: 0.5rem;\n height: 0.5rem;\n cursor: pointer;\n border-bottom-width: 1px;\n border-right-width: 1px;\n border-top-width: 0;\n border-left-width: 0;\n}\n.main-module_date-picker__controller-arrow_left__1FemM {\n transform: rotate(135deg);\n}\n.main-module_date-picker__controller-arrow_right__2e84W {\n transform: rotate(-45deg);\n}\n.main-module_date-picker__controller-title__3wWrg {\n cursor: pointer;\n text-transform: capitalize;\n text-align: center;\n color: #135cc8;\n flex-grow: 1;\n display: block;\n}\n.main-module_date-picker__label-icon__38IQW {\n height: 1.5rem;\n fill: #135cc8;\n}\n.main-module_date-picker__days-grid__3VC3X {\n width: 100%;\n}\n.main-module_date-picker__days-grid-row__32HHK {\n display: -ms-grid;\n display: grid;\n margin: auto;\n padding: 0.5rem 1rem 0;\n -ms-grid-columns: auto auto auto auto auto auto auto;\n grid-template-columns: auto auto auto auto auto auto auto;\n}\n.main-module_date-picker__days-grid-week-name__k47gT {\n text-align: center;\n text-transform: capitalize;\n color: #abb4cd;\n}\n.main-module_date-picker__day-text_today__2dJSg {\n color: #2d3748;\n background-color: rgba(245, 245, 245, 0.5);\n border-radius: 1rem;\n}\n.main-module_date-picker__day-text_selected__2shDu {\n background: white;\n border: 2px solid #3c83ec;\n color: #5c657e;\n transition: 0.1s color;\n}\n.main-module_date-picker__day-text_rounded-borders__3JVfx {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: 2rem;\n height: calc(2rem - 4px);\n border-radius: 1rem;\n}\n.main-module_date-picker__day-text_navigation__nAkfO {\n background: #5c657e;\n color: #ffffff;\n}\n.main-module_date-picker__day__2qClw {\n width: 2rem;\n height: 2rem;\n justify-content: center;\n -ms-grid-column-align: center;\n justify-self: center;\n align-items: center;\n display: inline-flex;\n color: #5c657e;\n text-align: center;\n cursor: pointer;\n}\n.main-module_date-picker__day_blocked__1reCa {\n color: #cccccc;\n}\n.main-module_date-picker__day_in-range__sRkO_ {\n transition: 0.3s background-color, 0.2s color;\n background: #3c83ec;\n color: #ffffff;\n}\n.main-module_date-picker__day_proposed__3Wv7O {\n background-color: #6fb9f7;\n}\n.main-module_date-picker__day_navigation__39Z6G {\n background: #5c657e;\n color: #ffffff;\n}\n.main-module_date-picker__day_range-end-left__2nlsF {\n background: linear-gradient(to left, #3c83ec, #3c83ec 50%, #ffffff 50%);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n}\n.main-module_date-picker__day_range-end-left-proposed__38kpH {\n background: linear-gradient(to left, #6fb9f7, #6fb9f7 50%, #ffffff 50%);\n}\n.main-module_date-picker__day_range-end-right__1137l {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n background: linear-gradient(to right, #3c83ec, #3c83ec 50%, #ffffff 50%);\n}\n.main-module_date-picker__day_range-end-right-proposed__HBi_C {\n background: linear-gradient(to right, #6fb9f7, #6fb9f7 50%, #ffffff 50%);\n}\n.main-module_date-picker__month-table__1Edhl {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: 4fr 4fr 4fr;\n grid-template-columns: 4fr 4fr 4fr;\n}\n.main-module_date-picker__month-table-item__1nkBu {\n text-align: center;\n padding: 0.5rem;\n color: #5c657e;\n text-transform: capitalize;\n cursor: pointer;\n}\n.main-module_date-picker__month-table-item_selected__2kb5V {\n font-weight: 600;\n color: #3c83ec;\n border-radius: 1.5rem;\n}\n.main-module_range-picker__2nqS6 {\n flex-grow: 1;\n}\n.main-module_range-picker__container__Z23eL {\n display: flex;\n flex-grow: 1;\n}\n";
|
|
4
|
-
var
|
|
4
|
+
var styles = {"date-picker":"main-module_date-picker__ZqlVj","range-picker":"main-module_range-picker__2nqS6","date-picker__container":"main-module_date-picker__container__3Jt5v","date-picker__common-ranges":"main-module_date-picker__common-ranges__3aEeE","date-picker__controller":"main-module_date-picker__controller__1csI7","date-picker__controller-arrow":"main-module_date-picker__controller-arrow__2ip9A","date-picker__controller-arrow_left":"main-module_date-picker__controller-arrow_left__1FemM","date-picker__controller-arrow_right":"main-module_date-picker__controller-arrow_right__2e84W","date-picker__controller-title":"main-module_date-picker__controller-title__3wWrg","date-picker__label-icon":"main-module_date-picker__label-icon__38IQW","date-picker__days-grid":"main-module_date-picker__days-grid__3VC3X","date-picker__days-grid-row":"main-module_date-picker__days-grid-row__32HHK","date-picker__days-grid-week-name":"main-module_date-picker__days-grid-week-name__k47gT","date-picker__day-text_today":"main-module_date-picker__day-text_today__2dJSg","date-picker__day-text_selected":"main-module_date-picker__day-text_selected__2shDu","date-picker__day-text_rounded-borders":"main-module_date-picker__day-text_rounded-borders__3JVfx","date-picker__day-text_navigation":"main-module_date-picker__day-text_navigation__nAkfO","date-picker__day":"main-module_date-picker__day__2qClw","date-picker__day_blocked":"main-module_date-picker__day_blocked__1reCa","date-picker__day_in-range":"main-module_date-picker__day_in-range__sRkO_","date-picker__day_proposed":"main-module_date-picker__day_proposed__3Wv7O","date-picker__day_navigation":"main-module_date-picker__day_navigation__39Z6G","date-picker__day_range-end-left":"main-module_date-picker__day_range-end-left__2nlsF","date-picker__day_range-end-left-proposed":"main-module_date-picker__day_range-end-left-proposed__38kpH","date-picker__day_range-end-right":"main-module_date-picker__day_range-end-right__1137l","date-picker__day_range-end-right-proposed":"main-module_date-picker__day_range-end-right-proposed__HBi_C","date-picker__month-table":"main-module_date-picker__month-table__1Edhl","date-picker__month-table-item":"main-module_date-picker__month-table-item__1nkBu","date-picker__month-table-item_selected":"main-module_date-picker__month-table-item_selected__2kb5V","range-picker__container":"main-module_range-picker__container__Z23eL"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
|
-
export default
|
|
7
|
+
export default styles;
|
|
8
8
|
//# sourceMappingURL=main.module.less.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** Form Variables */\n/** Errors */\n@media (max-width: 576px) {\n .main-module_dropdown__content__X9kz_ {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n .main-module_dropdown__header__kvhNn {\n display: block;\n }\n .main-module_dropdown__header-title__7NXxw {\n margin-left: 0.5rem;\n }\n}\n@media (min-width: 576px) {\n .main-module_dropdown__header__kvhNn {\n display: none;\n }\n}\n.main-module_dropdown__36KKf {\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.main-module_dropdown__content__X9kz_ {\n flex: 0 0 auto;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1200;\n width: auto;\n padding: 0.5rem 0;\n background-color: #ffffff;\n border-radius: 3px;\n box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.main-module_dropdown__content__X9kz_::before {\n content: '';\n display: block;\n position: absolute;\n top: -14px;\n left: 7px;\n border-width: 7px;\n border-style: solid;\n border-color: transparent transparent #ffffff transparent;\n}\n.main-
|
|
4
|
-
var cssClasses = {"dropdown__content":"main-module_dropdown__content__X9kz_","dropdown__header":"main-module_dropdown__header__kvhNn","dropdown__header-title":"main-module_dropdown__header-title__7NXxw","dropdown":"main-module_dropdown__36KKf","
|
|
3
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** Form Variables */\n/** Errors */\n@media (max-width: 576px) {\n .main-module_dropdown__content__X9kz_ {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n .main-module_dropdown__header__kvhNn {\n display: block;\n }\n .main-module_dropdown__header-title__7NXxw {\n margin-left: 0.5rem;\n }\n}\n@media (min-width: 576px) {\n .main-module_dropdown__header__kvhNn {\n display: none;\n }\n}\n.main-module_dropdown__36KKf {\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.main-module_dropdown__content__X9kz_ {\n flex: 0 0 auto;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1200;\n width: auto;\n padding: 0.5rem 0;\n background-color: #ffffff;\n border-radius: 3px;\n box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.main-module_dropdown__content__X9kz_::before {\n content: '';\n display: block;\n position: absolute;\n top: -14px;\n left: 7px;\n border-width: 7px;\n border-style: solid;\n border-color: transparent transparent #ffffff transparent;\n}\n.main-module_dropdown__content_arrow-right__2dhyy::before {\n right: 7px;\n left: auto;\n}\n.main-module_dropdown__content_arrow-bottom__mY8R9::before {\n top: auto;\n bottom: -14px;\n border-color: #ffffff transparent transparent transparent;\n}\n.main-module_dropdown__item-with-hover__3g-Za {\n pointer-events: all;\n}\n.main-module_dropdown__item-with-hover__3g-Za:hover {\n background-color: #f5f7ff;\n}\n.main-module_dropdown__list__2bd_r {\n flex: 0 0 auto;\n padding: 0;\n width: 100%;\n min-width: 20rem;\n text-align: left;\n font-size: 14px;\n font-size: 1rem;\n}\n.main-module_dropdown__list__2bd_r > li {\n list-style: none;\n}\n.main-module_dropdown__list-head__2Uyb0 {\n padding: 0.5rem 0 0.5rem 1rem;\n}\n.main-module_dropdown__list_with-scroll__KP9yO {\n scrollbar-color: #79829c #ffffff;\n scrollbar-width: thin;\n max-height: 280px;\n overflow-y: auto;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar {\n width: 7px;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track {\n background-color: #ffffff;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-track:hover {\n background-color: #f3f4f8;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb {\n background-color: #5c657e;\n}\n.main-module_dropdown__list_with-scroll__KP9yO::-webkit-scrollbar-thumb:hover {\n background-color: #2d3748;\n}\n.main-module_dropdown__list-item__1u185 {\n display: block;\n padding: 0.5rem 1rem;\n cursor: default;\n}\n.main-module_dropdown__list-item__1u185:hover {\n background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_selected__2GYQr {\n background-color: #f5f7ff;\n}\n.main-module_dropdown__list-item_disabled__1Psh7 {\n color: #abb4cd;\n}\n.main-module_dropdown__list-item_readonly__3bbj0 {\n color: #abb4cd;\n}\n.main-module_dropdown__search__1Moob {\n padding: 0.5rem 1rem 0.5rem;\n}\n.main-module_dropdown__header__kvhNn {\n margin: calc(1rem * 0.5) 1rem;\n}\n.main-module_dropdown__header-content__10Zg9 {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.main-module_dropdown__header-icon__30vfb {\n margin-right: 1rem;\n color: #abb4cd;\n font-size: 10px;\n font-size: 0.7142857142857143rem;\n}\n.main-module_dropdown__header-title__7NXxw {\n font-weight: 600;\n color: #5c657e;\n}\n.main-module_dropdown__error__1oS0H {\n display: flex;\n align-items: center;\n color: #e60c54;\n gap: 6px;\n padding: 0.5rem 1rem;\n}\n.main-module_dropdown__error-icon__3OLzE {\n fill: #e60c54;\n}\n.main-module_dropdown__additional-info__1aTtM {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 0.5rem 1rem;\n}\n.main-module_select__1ocPo {\n position: relative;\n display: flex;\n flex: 0 2 auto;\n align-items: center;\n width: 100%;\n}\n.main-module_select__1ocPo::after {\n content: '';\n position: absolute;\n display: block;\n right: 0.715em;\n width: 7px;\n height: 7px;\n transform: translateY(-25%) rotate(-45deg);\n border-width: 0 0 1px 1px;\n border-style: solid;\n border-color: #3c83ec;\n}\n.main-module_select__1ocPo input {\n width: 100%;\n text-overflow: ellipsis;\n}\n.main-module_dropdown-enter__2RGtd,\n.main-module_modal-enter__I5ELD {\n opacity: 0;\n transform: translate3d(0, -2rem, 0);\n}\n.main-module_mask-enter__32s5F {\n opacity: 0;\n}\n.main-module_dropdown-enter-active__ob1fb,\n.main-module_modal-enter-active__3BMYq {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-enter-active__1WgVf {\n opacity: 1;\n transition: opacity 0.1s;\n}\n.main-module_dropdown-exit__3b2wX,\n.main-module_modal-exit__y2N_F {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n.main-module_mask-exit__325a4 {\n opacity: 1;\n}\n.main-module_dropdown-exit-active__22rth,\n.main-module_modal-exit-active__ID7ce {\n opacity: 0;\n transform: translate3d(0, -2rem, 0);\n transition: transform 0.2s, opacity 0.2s;\n}\n.main-module_mask-exit-active__2qs-r {\n opacity: 0;\n transition: opacity 0.1s;\n}\n";
|
|
4
|
+
var cssClasses = {"dropdown__content":"main-module_dropdown__content__X9kz_","dropdown__header":"main-module_dropdown__header__kvhNn","dropdown__header-title":"main-module_dropdown__header-title__7NXxw","dropdown":"main-module_dropdown__36KKf","dropdown__content_arrow-right":"main-module_dropdown__content_arrow-right__2dhyy","dropdown__content_arrow-bottom":"main-module_dropdown__content_arrow-bottom__mY8R9","dropdown__item-with-hover":"main-module_dropdown__item-with-hover__3g-Za","dropdown__list":"main-module_dropdown__list__2bd_r","dropdown__list-head":"main-module_dropdown__list-head__2Uyb0","dropdown__list_with-scroll":"main-module_dropdown__list_with-scroll__KP9yO","dropdown__list-item":"main-module_dropdown__list-item__1u185","dropdown__list-item_selected":"main-module_dropdown__list-item_selected__2GYQr","dropdown__list-item_disabled":"main-module_dropdown__list-item_disabled__1Psh7","dropdown__list-item_readonly":"main-module_dropdown__list-item_readonly__3bbj0","dropdown__search":"main-module_dropdown__search__1Moob","dropdown__header-content":"main-module_dropdown__header-content__10Zg9","dropdown__header-icon":"main-module_dropdown__header-icon__30vfb","dropdown__error":"main-module_dropdown__error__1oS0H","dropdown__error-icon":"main-module_dropdown__error-icon__3OLzE","dropdown__additional-info":"main-module_dropdown__additional-info__1aTtM","select":"main-module_select__1ocPo","dropdown-enter":"main-module_dropdown-enter__2RGtd","modal-enter":"main-module_modal-enter__I5ELD","mask-enter":"main-module_mask-enter__32s5F","dropdown-enter-active":"main-module_dropdown-enter-active__ob1fb","modal-enter-active":"main-module_modal-enter-active__3BMYq","mask-enter-active":"main-module_mask-enter-active__1WgVf","dropdown-exit":"main-module_dropdown-exit__3b2wX","modal-exit":"main-module_modal-exit__y2N_F","mask-exit":"main-module_mask-exit__325a4","dropdown-exit-active":"main-module_dropdown-exit-active__22rth","modal-exit-active":"main-module_modal-exit-active__ID7ce","mask-exit-active":"main-module_mask-exit-active__2qs-r"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export default cssClasses;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_hint__3cahT {\n
|
|
4
|
-
var
|
|
3
|
+
var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_hint__3cahT {\n vertical-align: middle;\n}\n.main-module_hint_spacing-left__1dKcO {\n margin-left: 1rem;\n}\n.main-module_hint_spacing-right__2dV0Q {\n margin-right: 1rem;\n}\n.main-module_hint__3cahT:hover span {\n color: #3c83ec;\n}\n.main-module_hint__content__IIh3W {\n min-width: 258px;\n max-width: 500px;\n padding: 1rem !important;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2) !important;\n}\n.main-module_hint__content_yellow__3NyBP {\n background-color: #fff6cc;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_top__1bZPH::before {\n border-color: #fff6cc transparent transparent transparent;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_bottom__10hXS::before {\n border-color: transparent transparent #fff6cc transparent;\n}\n";
|
|
4
|
+
var cssClasses = {"hint":"main-module_hint__3cahT","hint_spacing-left":"main-module_hint_spacing-left__1dKcO","hint_spacing-right":"main-module_hint_spacing-right__2dV0Q","hint__content":"main-module_hint__content__IIh3W","hint__content_yellow":"main-module_hint__content_yellow__3NyBP","dropdown__content_top":"main-module_dropdown__content_top__1bZPH","dropdown__content_bottom":"main-module_dropdown__content_bottom__10hXS"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
|
-
export default
|
|
7
|
+
export default cssClasses;
|
|
8
8
|
//# sourceMappingURL=main.module.less.js.map
|
|
@@ -1,36 +1,33 @@
|
|
|
1
1
|
import { useState } from 'react';
|
|
2
|
-
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
};
|
|
2
|
+
export const useFixedChildPosition = ({ useFixed, childRef, vPosition, hPosition }) => {
|
|
3
|
+
const [position, setPosition] = useState({ top: 0, left: 0 });
|
|
4
|
+
if (!useFixed) {
|
|
5
|
+
return {
|
|
6
|
+
style: {},
|
|
7
|
+
onMouseEnter: () => { }
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
const onMouseEnter = (event) => {
|
|
11
|
+
var _a;
|
|
12
|
+
const $hoveredElement = event.target;
|
|
13
|
+
const parentBoundingRect = $hoveredElement.getBoundingClientRect();
|
|
14
|
+
const childBoundingRect = ((_a = childRef === null || childRef === void 0 ? void 0 : childRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { width: 0, height: 0 };
|
|
15
|
+
const top = vPosition === 'top'
|
|
16
|
+
? parentBoundingRect.top - 0.5 * parentBoundingRect.height - childBoundingRect.height
|
|
17
|
+
: parentBoundingRect.top + parentBoundingRect.height;
|
|
18
|
+
const left = hPosition === 'left' ? parentBoundingRect.left + parentBoundingRect.width - childBoundingRect.width : parentBoundingRect.left;
|
|
19
|
+
setPosition({ top, left });
|
|
20
|
+
};
|
|
21
|
+
const style = {
|
|
22
|
+
position: 'fixed',
|
|
23
|
+
top: position.top,
|
|
24
|
+
left: position.left,
|
|
25
|
+
bottom: 'unset',
|
|
26
|
+
right: 'unset'
|
|
27
|
+
};
|
|
28
|
+
return {
|
|
29
|
+
style,
|
|
30
|
+
onMouseEnter
|
|
31
|
+
};
|
|
33
32
|
};
|
|
34
|
-
|
|
35
|
-
export { useFixedChildPosition };
|
|
36
|
-
//# sourceMappingURL=use_fixed_child_position.js.map
|
|
33
|
+
//# sourceMappingURL=use_fixed_child_position.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":
|
|
1
|
+
{"version":3,"file":"use_fixed_child_position.js","sourceRoot":"","sources":["../../../../../../src/hooks/use_fixed_child_position.ts"],"names":[],"mappings":"AAAA,OAAc,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAClC,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EAMZ,EAAmF,EAAE;IAClF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;IAE9D,IAAI,CAAC,QAAQ,EAAE;QACX,OAAO;YACH,KAAK,EAAE,EAAE;YACT,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;SACzB,CAAC;KACL;IAED,MAAM,YAAY,GAAG,CAAC,KAAuB,EAAE,EAAE;;QAC7C,MAAM,eAAe,GAAG,KAAK,CAAC,MAAqB,CAAC;QAEpD,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,EAAE,CAAC;QACnE,MAAM,iBAAiB,GAAG,CAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,0CAAE,qBAAqB,EAAE,KAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;QAChG,MAAM,GAAG,GACL,SAAS,KAAK,KAAK;YACf,CAAC,CAAC,kBAAkB,CAAC,GAAG,GAAG,GAAG,GAAG,kBAAkB,CAAC,MAAM,GAAG,iBAAiB,CAAC,MAAM;YACrF,CAAC,CAAC,kBAAkB,CAAC,GAAG,GAAG,kBAAkB,CAAC,MAAM,CAAC;QAC7D,MAAM,IAAI,GACN,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,GAAG,kBAAkB,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC;QAElI,WAAW,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG;QACV,QAAQ,EAAE,OAAgB;QAC1B,GAAG,EAAE,QAAQ,CAAC,GAAG;QACjB,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,OAAO;KACjB,CAAC;IAEF,OAAO;QACH,KAAK;QACL,YAAY;KACf,CAAC;AACN,CAAC,CAAC"}
|