@hh.ru/magritte-ui-date-picker 6.1.108 → 6.1.110
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/AsyncDataContext.d.ts +1 -1
- package/AsyncDataContext.js.map +1 -1
- package/AsyncDataLoader.js +35 -31
- package/AsyncDataLoader.js.map +1 -1
- package/AsyncDataStore.d.ts +1 -1
- package/AsyncDataStore.js +42 -44
- package/AsyncDataStore.js.map +1 -1
- package/DatePicker/DatePicker.d.ts +1 -1
- package/DatePicker/DatePicker.js +108 -18
- package/DatePicker/DatePicker.js.map +1 -1
- package/DatePicker/DayPicker.d.ts +1 -1
- package/DatePicker/DayPicker.js +92 -47
- package/DatePicker/DayPicker.js.map +1 -1
- package/DatePicker/MobileDatePickerWithScroll.d.ts +1 -1
- package/DatePicker/MobileDatePickerWithScroll.js +128 -32
- package/DatePicker/MobileDatePickerWithScroll.js.map +1 -1
- package/DatePicker/UncontrolledDatePicker.d.ts +1 -1
- package/DatePicker/UncontrolledDatePicker.js +39 -13
- package/DatePicker/UncontrolledDatePicker.js.map +1 -1
- package/Header.d.ts +1 -1
- package/Header.js +76 -14
- package/Header.js.map +1 -1
- package/InfiniteScroll.js +331 -361
- package/InfiniteScroll.js.map +1 -1
- package/InfoDatePicker/InfoDatePicker.d.ts +1 -1
- package/InfoDatePicker/InfoDatePicker.js +80 -16
- package/InfoDatePicker/InfoDatePicker.js.map +1 -1
- package/InfoDatePicker/InfoDayPicker.d.ts +1 -1
- package/InfoDatePicker/InfoDayPicker.js +89 -45
- package/InfoDatePicker/InfoDayPicker.js.map +1 -1
- package/InfoDatePicker/MobileInfoDatePickerWithScroll.d.ts +1 -1
- package/InfoDatePicker/MobileInfoDatePickerWithScroll.js +104 -17
- package/InfoDatePicker/MobileInfoDatePickerWithScroll.js.map +1 -1
- package/InfoDatePicker/UncontrolledInfoDatePicker.d.ts +1 -1
- package/InfoDatePicker/UncontrolledInfoDatePicker.js +18 -11
- package/InfoDatePicker/UncontrolledInfoDatePicker.js.map +1 -1
- package/IntervalDatePicker/DesktopMultiLayoutIntervalDatePicker.d.ts +1 -1
- package/IntervalDatePicker/DesktopMultiLayoutIntervalDatePicker.js +133 -17
- package/IntervalDatePicker/DesktopMultiLayoutIntervalDatePicker.js.map +1 -1
- package/IntervalDatePicker/IntervalDatePicker.d.ts +1 -1
- package/IntervalDatePicker/IntervalDatePicker.js +20 -16
- package/IntervalDatePicker/IntervalDatePicker.js.map +1 -1
- package/IntervalDatePicker/IntervalDayPicker.d.ts +1 -1
- package/IntervalDatePicker/IntervalDayPicker.js +148 -75
- package/IntervalDatePicker/IntervalDayPicker.js.map +1 -1
- package/IntervalDatePicker/MobileMultiLayoutIntervalDatePicker.d.ts +1 -1
- package/IntervalDatePicker/MobileMultiLayoutIntervalDatePicker.js +107 -33
- package/IntervalDatePicker/MobileMultiLayoutIntervalDatePicker.js.map +1 -1
- package/IntervalDatePicker/MobileSingleLayoutIntervalDatePicker.d.ts +1 -1
- package/IntervalDatePicker/MobileSingleLayoutIntervalDatePicker.js +141 -34
- package/IntervalDatePicker/MobileSingleLayoutIntervalDatePicker.js.map +1 -1
- package/IntervalDatePicker/SingleLayoutIntervalDatePicker.d.ts +1 -1
- package/IntervalDatePicker/SingleLayoutIntervalDatePicker.js +110 -15
- package/IntervalDatePicker/SingleLayoutIntervalDatePicker.js.map +1 -1
- package/IntervalDatePicker/UncontrolledIntervalDatePicker.d.ts +1 -1
- package/IntervalDatePicker/UncontrolledIntervalDatePicker.js +46 -18
- package/IntervalDatePicker/UncontrolledIntervalDatePicker.js.map +1 -1
- package/MonthPicker.d.ts +1 -1
- package/MonthPicker.js +111 -50
- package/MonthPicker.js.map +1 -1
- package/StatusDatePicker/MobileStatusDatePickerWithScroll.d.ts +1 -1
- package/StatusDatePicker/MobileStatusDatePickerWithScroll.js +104 -17
- package/StatusDatePicker/MobileStatusDatePickerWithScroll.js.map +1 -1
- package/StatusDatePicker/StatusDatePicker.d.ts +1 -1
- package/StatusDatePicker/StatusDatePicker.js +87 -16
- package/StatusDatePicker/StatusDatePicker.js.map +1 -1
- package/StatusDatePicker/StatusDayPicker.d.ts +1 -1
- package/StatusDatePicker/StatusDayPicker.js +87 -46
- package/StatusDatePicker/StatusDayPicker.js.map +1 -1
- package/StatusDatePicker/UncontrolledStatusDatePicker.d.ts +1 -1
- package/StatusDatePicker/UncontrolledStatusDatePicker.js +18 -11
- package/StatusDatePicker/UncontrolledStatusDatePicker.js.map +1 -1
- package/Weekdays.js +2 -2
- package/Weekdays.js.map +1 -1
- package/WithArrowNavigationHOC.js +19 -23
- package/WithArrowNavigationHOC.js.map +1 -1
- package/YearPicker.d.ts +1 -1
- package/YearPicker.js +95 -40
- package/YearPicker.js.map +1 -1
- package/date-picker-5L5YywN3.js +5 -0
- package/date-picker-5L5YywN3.js.map +1 -0
- package/index.css +329 -329
- package/index.d.ts +13 -13
- package/index.js +1 -1
- package/package.json +19 -18
- package/useDatePickerControls.d.ts +1 -1
- package/useDatePickerControls.js +47 -41
- package/useDatePickerControls.js.map +1 -1
- package/useIntervalPicker.d.ts +1 -1
- package/useIntervalPicker.js +299 -304
- package/useIntervalPicker.js.map +1 -1
- package/useMobileHorizontalScroll.d.ts +1 -1
- package/useMobileHorizontalScroll.js +29 -25
- package/useMobileHorizontalScroll.js.map +1 -1
- package/useModifierDates.d.ts +1 -1
- package/useModifierDates.js +21 -21
- package/useModifierDates.js.map +1 -1
- package/useModifierDatesFunc.d.ts +1 -1
- package/useModifierDatesFunc.js +48 -42
- package/useModifierDatesFunc.js.map +1 -1
- package/utils.d.ts +1 -1
- package/utils.js +43 -44
- package/utils.js.map +1 -1
- package/date-picker-q91q_We0.js +0 -5
- package/date-picker-q91q_We0.js.map +0 -1
package/AsyncDataContext.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { DateType, ModifierDatesMap } from '
|
|
1
|
+
import { DateType, ModifierDatesMap } from './types';
|
|
2
2
|
export interface AsyncDataContextProps {
|
|
3
3
|
modifierDatesMap: ModifierDatesMap;
|
|
4
4
|
hasData: (startDate: DateType, endDate: DateType) => boolean;
|
package/AsyncDataContext.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AsyncDataContext.js","sources":["src/AsyncDataContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { DateType, ModifierDatesMap } from '@hh.ru/magritte-ui-date-picker/types';\n\nexport interface AsyncDataContextProps {\n modifierDatesMap: ModifierDatesMap;\n hasData: (startDate: DateType, endDate: DateType) => boolean;\n startAsyncLoading: (startDate: DateType, endDate: DateType) => void;\n awaitAsyncLoading: (startDate: DateType, endDate: DateType) => Promise<void>;\n isLoading: () => boolean;\n isLimitExceeded: () => boolean;\n}\n\nexport const AsyncDataContext = createContext<AsyncDataContextProps | null>(null);\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"AsyncDataContext.js","sources":["src/AsyncDataContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { DateType, ModifierDatesMap } from '@hh.ru/magritte-ui-date-picker/types';\n\nexport interface AsyncDataContextProps {\n modifierDatesMap: ModifierDatesMap;\n hasData: (startDate: DateType, endDate: DateType) => boolean;\n startAsyncLoading: (startDate: DateType, endDate: DateType) => void;\n awaitAsyncLoading: (startDate: DateType, endDate: DateType) => Promise<void>;\n isLoading: () => boolean;\n isLimitExceeded: () => boolean;\n}\n\nexport const AsyncDataContext = createContext<AsyncDataContextProps | null>(null);\n"],"names":[],"mappings":";;AAaa,MAAA,gBAAA,GAAmB,cAA4C,IAAI;;;;"}
|
package/AsyncDataLoader.js
CHANGED
|
@@ -4,39 +4,43 @@ import { useContext, useState, useMemo } from 'react';
|
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { AsyncDataContext } from './AsyncDataContext.js';
|
|
6
6
|
import { Loader } from '@hh.ru/magritte-ui-loader';
|
|
7
|
-
import { s as styles } from './date-picker-
|
|
7
|
+
import { s as styles } from './date-picker-5L5YywN3.js';
|
|
8
8
|
|
|
9
|
-
/**
|
|
10
|
-
* Отображает лоадер поверх контента во время загрузки асинхронных данных.
|
|
11
|
-
* В multi-лейауте каждый календарь должен быть обернут в свой лоадер,
|
|
12
|
-
* чтобы календари с уже загруженными данными рендерили их, а не анимацию лоадера
|
|
13
|
-
*/
|
|
14
9
|
const AsyncDataLoader = ({ children, stretched }) => {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
10
|
+
const asyncDataContext = useContext(AsyncDataContext);
|
|
11
|
+
const [isLoading, setLoading] = useState(false);
|
|
12
|
+
const value = useMemo(() => {
|
|
13
|
+
if (!asyncDataContext) {
|
|
14
|
+
return null;
|
|
15
|
+
}
|
|
16
|
+
return {
|
|
17
|
+
...asyncDataContext,
|
|
18
|
+
startAsyncLoading: (startDate, endDate) => {
|
|
19
|
+
setLoading(true);
|
|
20
|
+
void (async () => {
|
|
21
|
+
try {
|
|
22
|
+
await asyncDataContext.awaitAsyncLoading(startDate, endDate);
|
|
23
|
+
} finally {
|
|
24
|
+
setLoading(false);
|
|
25
|
+
}
|
|
26
|
+
})();
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
}, [asyncDataContext, setLoading]);
|
|
30
|
+
return /* @__PURE__ */ jsxs(
|
|
31
|
+
"div",
|
|
32
|
+
{
|
|
33
|
+
className: classnames(styles.datePicker, {
|
|
34
|
+
[styles.datePickerLoading]: isLoading,
|
|
35
|
+
[styles.stretched]: stretched
|
|
36
|
+
}),
|
|
37
|
+
"data-qa": "date-picker",
|
|
38
|
+
children: [
|
|
39
|
+
isLoading && /* @__PURE__ */ jsx("div", { className: styles.loader, children: /* @__PURE__ */ jsx(Loader, {}) }),
|
|
40
|
+
/* @__PURE__ */ jsx("div", { className: classnames({ [styles.loading]: isLoading }), children: /* @__PURE__ */ jsx(AsyncDataContext.Provider, { value, children }) })
|
|
41
|
+
]
|
|
42
|
+
}
|
|
43
|
+
);
|
|
40
44
|
};
|
|
41
45
|
|
|
42
46
|
export { AsyncDataLoader };
|
package/AsyncDataLoader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AsyncDataLoader.js","sources":["src/AsyncDataLoader.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useContext, useMemo, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { AsyncDataContext, AsyncDataContextProps } from '@hh.ru/magritte-ui-date-picker/AsyncDataContext';\nimport { DateType } from '@hh.ru/magritte-ui-date-picker/types';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\n\nimport styles from './date-picker.less';\n\n/**\n * Отображает лоадер поверх контента во время загрузки асинхронных данных.\n * В multi-лейауте каждый календарь должен быть обернут в свой лоадер,\n * чтобы календари с уже загруженными данными рендерили их, а не анимацию лоадера\n */\nexport const AsyncDataLoader: FC<PropsWithChildren<{ stretched?: boolean }>> = ({ children, stretched }) => {\n const asyncDataContext = useContext(AsyncDataContext);\n const [isLoading, setLoading] = useState(false);\n\n const value = useMemo<AsyncDataContextProps | null>(() => {\n if (!asyncDataContext) {\n return null;\n }\n\n return {\n ...asyncDataContext,\n startAsyncLoading: (startDate: DateType, endDate: DateType) => {\n setLoading(true);\n\n void (async () => {\n try {\n await asyncDataContext.awaitAsyncLoading(startDate, endDate);\n } finally {\n setLoading(false);\n }\n })();\n },\n };\n }, [asyncDataContext, setLoading]);\n\n return (\n <div\n className={classnames(styles.datePicker, {\n [styles.datePickerLoading]: isLoading,\n [styles.stretched]: stretched,\n })}\n data-qa=\"date-picker\"\n >\n {isLoading && (\n <div className={styles.loader}>\n <Loader />\n </div>\n )}\n <div className={classnames({ [styles.loading]: isLoading })}>\n <AsyncDataContext.Provider value={value}>{children}</AsyncDataContext.Provider>\n </div>\n </div>\n );\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"AsyncDataLoader.js","sources":["src/AsyncDataLoader.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useContext, useMemo, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { AsyncDataContext, AsyncDataContextProps } from '@hh.ru/magritte-ui-date-picker/AsyncDataContext';\nimport { DateType } from '@hh.ru/magritte-ui-date-picker/types';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\n\nimport styles from './date-picker.less';\n\n/**\n * Отображает лоадер поверх контента во время загрузки асинхронных данных.\n * В multi-лейауте каждый календарь должен быть обернут в свой лоадер,\n * чтобы календари с уже загруженными данными рендерили их, а не анимацию лоадера\n */\nexport const AsyncDataLoader: FC<PropsWithChildren<{ stretched?: boolean }>> = ({ children, stretched }) => {\n const asyncDataContext = useContext(AsyncDataContext);\n const [isLoading, setLoading] = useState(false);\n\n const value = useMemo<AsyncDataContextProps | null>(() => {\n if (!asyncDataContext) {\n return null;\n }\n\n return {\n ...asyncDataContext,\n startAsyncLoading: (startDate: DateType, endDate: DateType) => {\n setLoading(true);\n\n void (async () => {\n try {\n await asyncDataContext.awaitAsyncLoading(startDate, endDate);\n } finally {\n setLoading(false);\n }\n })();\n },\n };\n }, [asyncDataContext, setLoading]);\n\n return (\n <div\n className={classnames(styles.datePicker, {\n [styles.datePickerLoading]: isLoading,\n [styles.stretched]: stretched,\n })}\n data-qa=\"date-picker\"\n >\n {isLoading && (\n <div className={styles.loader}>\n <Loader />\n </div>\n )}\n <div className={classnames({ [styles.loading]: isLoading })}>\n <AsyncDataContext.Provider value={value}>{children}</AsyncDataContext.Provider>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAcO,MAAM,eAAkE,GAAA,CAAC,EAAE,QAAA,EAAU,WAAgB,KAAA;AACxG,EAAM,MAAA,gBAAA,GAAmB,WAAW,gBAAgB,CAAA,CAAA;AACpD,EAAA,MAAM,CAAC,SAAA,EAAW,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE9C,EAAM,MAAA,KAAA,GAAQ,QAAsC,MAAM;AACtD,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACnB,MAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAEA,IAAO,OAAA;AAAA,MACH,GAAG,gBAAA;AAAA,MACH,iBAAA,EAAmB,CAAC,SAAA,EAAqB,OAAsB,KAAA;AAC3D,QAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAEf,QAAA,KAAA,CAAM,YAAY;AACd,UAAI,IAAA;AACA,YAAM,MAAA,gBAAA,CAAiB,iBAAkB,CAAA,SAAA,EAAW,OAAO,CAAA,CAAA;AAAA,WAC7D,SAAA;AACE,YAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,WACpB;AAAA,SACD,GAAA,CAAA;AAAA,OACP;AAAA,KACJ,CAAA;AAAA,GACD,EAAA,CAAC,gBAAkB,EAAA,UAAU,CAAC,CAAA,CAAA;AAEjC,EACI,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAW,UAAW,CAAA,MAAA,CAAO,UAAY,EAAA;AAAA,QACrC,CAAC,MAAO,CAAA,iBAAiB,GAAG,SAAA;AAAA,QAC5B,CAAC,MAAO,CAAA,SAAS,GAAG,SAAA;AAAA,OACvB,CAAA;AAAA,MACD,SAAQ,EAAA,aAAA;AAAA,MAEP,QAAA,EAAA;AAAA,QAAA,SAAA,wBACI,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,MACnB,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAO,CACZ,EAAA,CAAA;AAAA,4BAEH,KAAI,EAAA,EAAA,SAAA,EAAW,WAAW,EAAE,CAAC,OAAO,OAAO,GAAG,SAAU,EAAC,GACtD,QAAC,kBAAA,GAAA,CAAA,gBAAA,CAAiB,UAAjB,EAA0B,KAAA,EAAe,UAAS,CACvD,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACJ,CAAA;AAER;;;;"}
|
package/AsyncDataStore.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC, PropsWithChildren } from 'react';
|
|
2
|
-
import { ModifiersFunc } from '
|
|
2
|
+
import { ModifiersFunc } from './types';
|
|
3
3
|
interface AsyncDataStoreProps {
|
|
4
4
|
modifierDatesFunc?: ModifiersFunc;
|
|
5
5
|
parallelLoadersLimit?: number | null;
|
package/AsyncDataStore.js
CHANGED
|
@@ -8,52 +8,50 @@ import './utils.js';
|
|
|
8
8
|
import 'date-fns/constants';
|
|
9
9
|
|
|
10
10
|
const makeKey = (startDate, endDate) => {
|
|
11
|
-
|
|
11
|
+
return `${new Date(startDate).getTime()}-${new Date(endDate).getTime()}`;
|
|
12
12
|
};
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
const AsyncDataStore = ({
|
|
14
|
+
children,
|
|
15
|
+
modifierDatesFunc,
|
|
16
|
+
parallelLoadersLimit = null
|
|
17
|
+
}) => {
|
|
18
|
+
const asyncDataState = useRef({});
|
|
19
|
+
const [modifierDatesMap, setModifierDatesMap] = useState(/* @__PURE__ */ new Map());
|
|
20
|
+
const value = useMemo(() => {
|
|
21
|
+
if (!modifierDatesFunc) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
return {
|
|
25
|
+
modifierDatesMap,
|
|
26
|
+
hasAsyncFunc: true,
|
|
27
|
+
hasData: (startDate, endDate) => makeKey(startDate, endDate) in asyncDataState.current,
|
|
28
|
+
startAsyncLoading: () => void 0,
|
|
29
|
+
awaitAsyncLoading: (startDate, endDate) => {
|
|
30
|
+
const key = makeKey(startDate, endDate);
|
|
31
|
+
if (!(key in asyncDataState.current)) {
|
|
32
|
+
asyncDataState.current[key] = {
|
|
33
|
+
promise: new Promise(async (resolve) => {
|
|
34
|
+
try {
|
|
35
|
+
const _modifierDates = await modifierDatesFunc(startDate, endDate);
|
|
36
|
+
setModifierDatesMap((oldMap) => {
|
|
37
|
+
updateModifierDatesMap(oldMap, _modifierDates);
|
|
38
|
+
return new Map(oldMap);
|
|
39
|
+
});
|
|
40
|
+
} finally {
|
|
41
|
+
asyncDataState.current[key].state = "done";
|
|
42
|
+
resolve();
|
|
43
|
+
}
|
|
44
|
+
}),
|
|
45
|
+
state: "loading"
|
|
46
|
+
};
|
|
22
47
|
}
|
|
23
|
-
return
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
if (!(key in asyncDataState.current)) {
|
|
31
|
-
asyncDataState.current[key] = {
|
|
32
|
-
promise: new Promise(async (resolve) => {
|
|
33
|
-
try {
|
|
34
|
-
const _modifierDates = await modifierDatesFunc(startDate, endDate);
|
|
35
|
-
setModifierDatesMap((oldMap) => {
|
|
36
|
-
updateModifierDatesMap(oldMap, _modifierDates);
|
|
37
|
-
return new Map(oldMap);
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
finally {
|
|
41
|
-
asyncDataState.current[key].state = 'done';
|
|
42
|
-
resolve();
|
|
43
|
-
}
|
|
44
|
-
}),
|
|
45
|
-
state: 'loading',
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
return asyncDataState.current[key].promise;
|
|
49
|
-
},
|
|
50
|
-
isLoading: () => Object.values(asyncDataState.current).some(({ state }) => state === 'loading'),
|
|
51
|
-
isLimitExceeded: () => parallelLoadersLimit !== null &&
|
|
52
|
-
Object.values(asyncDataState.current).filter(({ state }) => state === 'loading').length >=
|
|
53
|
-
parallelLoadersLimit,
|
|
54
|
-
};
|
|
55
|
-
}, [modifierDatesFunc, setModifierDatesMap, parallelLoadersLimit, modifierDatesMap]);
|
|
56
|
-
return jsx(AsyncDataContext.Provider, { value: value, children: children });
|
|
48
|
+
return asyncDataState.current[key].promise;
|
|
49
|
+
},
|
|
50
|
+
isLoading: () => Object.values(asyncDataState.current).some(({ state }) => state === "loading"),
|
|
51
|
+
isLimitExceeded: () => parallelLoadersLimit !== null && Object.values(asyncDataState.current).filter(({ state }) => state === "loading").length >= parallelLoadersLimit
|
|
52
|
+
};
|
|
53
|
+
}, [modifierDatesFunc, setModifierDatesMap, parallelLoadersLimit, modifierDatesMap]);
|
|
54
|
+
return /* @__PURE__ */ jsx(AsyncDataContext.Provider, { value, children });
|
|
57
55
|
};
|
|
58
56
|
|
|
59
57
|
export { AsyncDataStore };
|
package/AsyncDataStore.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AsyncDataStore.js","sources":["src/AsyncDataStore.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useMemo, useRef, useState } from 'react';\n\nimport { AsyncDataContext, AsyncDataContextProps } from '@hh.ru/magritte-ui-date-picker/AsyncDataContext';\nimport { DateType, ModifierDatesMap, ModifiersFunc } from '@hh.ru/magritte-ui-date-picker/types';\nimport { updateModifierDatesMap } from '@hh.ru/magritte-ui-date-picker/useModifierDates';\n\ninterface AsyncDataStoreProps {\n modifierDatesFunc?: ModifiersFunc;\n parallelLoadersLimit?: number | null;\n}\n\nconst makeKey = (startDate: DateType, endDate: DateType) => {\n return `${new Date(startDate).getTime()}-${new Date(endDate).getTime()}`;\n};\n\n/**\n * Хранит данные, загруженные всеми вложенными AsyncDataLoader-ами, и предоставляет методы для загрузки данных\n */\nexport const AsyncDataStore: FC<PropsWithChildren<AsyncDataStoreProps>> = ({\n children,\n modifierDatesFunc,\n parallelLoadersLimit = null,\n}) => {\n const asyncDataState = useRef<Record<string, { promise: Promise<void>; state: 'loading' | 'done' }>>({});\n const [modifierDatesMap, setModifierDatesMap] = useState<ModifierDatesMap>(new Map());\n\n const value = useMemo<AsyncDataContextProps | null>(() => {\n if (!modifierDatesFunc) {\n return null;\n }\n\n return {\n modifierDatesMap,\n hasAsyncFunc: true,\n hasData: (startDate: DateType, endDate: DateType) => makeKey(startDate, endDate) in asyncDataState.current,\n startAsyncLoading: () => void 0,\n awaitAsyncLoading: (startDate: DateType, endDate: DateType) => {\n const key = makeKey(startDate, endDate);\n if (!(key in asyncDataState.current)) {\n asyncDataState.current[key] = {\n promise: new Promise<void>(async (resolve) => {\n try {\n const _modifierDates = await modifierDatesFunc(startDate, endDate);\n setModifierDatesMap((oldMap) => {\n updateModifierDatesMap(oldMap, _modifierDates);\n return new Map(oldMap);\n });\n } finally {\n asyncDataState.current[key].state = 'done';\n resolve();\n }\n }),\n state: 'loading',\n };\n }\n return asyncDataState.current[key].promise;\n },\n isLoading: () => Object.values(asyncDataState.current).some(({ state }) => state === 'loading'),\n isLimitExceeded: () =>\n parallelLoadersLimit !== null &&\n Object.values(asyncDataState.current).filter(({ state }) => state === 'loading').length >=\n parallelLoadersLimit,\n };\n }, [modifierDatesFunc, setModifierDatesMap, parallelLoadersLimit, modifierDatesMap]);\n\n return <AsyncDataContext.Provider value={value}>{children}</AsyncDataContext.Provider>;\n};\n"],"names":[
|
|
1
|
+
{"version":3,"file":"AsyncDataStore.js","sources":["src/AsyncDataStore.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useMemo, useRef, useState } from 'react';\n\nimport { AsyncDataContext, AsyncDataContextProps } from '@hh.ru/magritte-ui-date-picker/AsyncDataContext';\nimport { DateType, ModifierDatesMap, ModifiersFunc } from '@hh.ru/magritte-ui-date-picker/types';\nimport { updateModifierDatesMap } from '@hh.ru/magritte-ui-date-picker/useModifierDates';\n\ninterface AsyncDataStoreProps {\n modifierDatesFunc?: ModifiersFunc;\n parallelLoadersLimit?: number | null;\n}\n\nconst makeKey = (startDate: DateType, endDate: DateType) => {\n return `${new Date(startDate).getTime()}-${new Date(endDate).getTime()}`;\n};\n\n/**\n * Хранит данные, загруженные всеми вложенными AsyncDataLoader-ами, и предоставляет методы для загрузки данных\n */\nexport const AsyncDataStore: FC<PropsWithChildren<AsyncDataStoreProps>> = ({\n children,\n modifierDatesFunc,\n parallelLoadersLimit = null,\n}) => {\n const asyncDataState = useRef<Record<string, { promise: Promise<void>; state: 'loading' | 'done' }>>({});\n const [modifierDatesMap, setModifierDatesMap] = useState<ModifierDatesMap>(new Map());\n\n const value = useMemo<AsyncDataContextProps | null>(() => {\n if (!modifierDatesFunc) {\n return null;\n }\n\n return {\n modifierDatesMap,\n hasAsyncFunc: true,\n hasData: (startDate: DateType, endDate: DateType) => makeKey(startDate, endDate) in asyncDataState.current,\n startAsyncLoading: () => void 0,\n awaitAsyncLoading: (startDate: DateType, endDate: DateType) => {\n const key = makeKey(startDate, endDate);\n if (!(key in asyncDataState.current)) {\n asyncDataState.current[key] = {\n promise: new Promise<void>(async (resolve) => {\n try {\n const _modifierDates = await modifierDatesFunc(startDate, endDate);\n setModifierDatesMap((oldMap) => {\n updateModifierDatesMap(oldMap, _modifierDates);\n return new Map(oldMap);\n });\n } finally {\n asyncDataState.current[key].state = 'done';\n resolve();\n }\n }),\n state: 'loading',\n };\n }\n return asyncDataState.current[key].promise;\n },\n isLoading: () => Object.values(asyncDataState.current).some(({ state }) => state === 'loading'),\n isLimitExceeded: () =>\n parallelLoadersLimit !== null &&\n Object.values(asyncDataState.current).filter(({ state }) => state === 'loading').length >=\n parallelLoadersLimit,\n };\n }, [modifierDatesFunc, setModifierDatesMap, parallelLoadersLimit, modifierDatesMap]);\n\n return <AsyncDataContext.Provider value={value}>{children}</AsyncDataContext.Provider>;\n};\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,OAAA,GAAU,CAAC,SAAA,EAAqB,OAAsB,KAAA;AACxD,EAAA,OAAO,CAAG,EAAA,IAAI,IAAK,CAAA,SAAS,CAAE,CAAA,OAAA,EAAS,CAAA,CAAA,EAAI,IAAI,IAAA,CAAK,OAAO,CAAA,CAAE,SAAS,CAAA,CAAA,CAAA;AAC1E,CAAA,CAAA;AAKO,MAAM,iBAA6D,CAAC;AAAA,EACvE,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,oBAAuB,GAAA,IAAA;AAC3B,CAAM,KAAA;AACF,EAAM,MAAA,cAAA,GAAiB,MAA8E,CAAA,EAAE,CAAA,CAAA;AACvG,EAAA,MAAM,CAAC,gBAAkB,EAAA,mBAAmB,IAAI,QAA2B,iBAAA,IAAI,KAAK,CAAA,CAAA;AAEpF,EAAM,MAAA,KAAA,GAAQ,QAAsC,MAAM;AACtD,IAAA,IAAI,CAAC,iBAAmB,EAAA;AACpB,MAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAEA,IAAO,OAAA;AAAA,MACH,gBAAA;AAAA,MACA,YAAc,EAAA,IAAA;AAAA,MACd,OAAA,EAAS,CAAC,SAAqB,EAAA,OAAA,KAAsB,QAAQ,SAAW,EAAA,OAAO,KAAK,cAAe,CAAA,OAAA;AAAA,MACnG,mBAAmB,MAAM,KAAA,CAAA;AAAA,MACzB,iBAAA,EAAmB,CAAC,SAAA,EAAqB,OAAsB,KAAA;AAC3D,QAAM,MAAA,GAAA,GAAM,OAAQ,CAAA,SAAA,EAAW,OAAO,CAAA,CAAA;AACtC,QAAI,IAAA,EAAE,GAAO,IAAA,cAAA,CAAe,OAAU,CAAA,EAAA;AAClC,UAAe,cAAA,CAAA,OAAA,CAAQ,GAAG,CAAI,GAAA;AAAA,YAC1B,OAAS,EAAA,IAAI,OAAc,CAAA,OAAO,OAAY,KAAA;AAC1C,cAAI,IAAA;AACA,gBAAA,MAAM,cAAiB,GAAA,MAAM,iBAAkB,CAAA,SAAA,EAAW,OAAO,CAAA,CAAA;AACjE,gBAAA,mBAAA,CAAoB,CAAC,MAAW,KAAA;AAC5B,kBAAA,sBAAA,CAAuB,QAAQ,cAAc,CAAA,CAAA;AAC7C,kBAAO,OAAA,IAAI,IAAI,MAAM,CAAA,CAAA;AAAA,iBACxB,CAAA,CAAA;AAAA,eACH,SAAA;AACE,gBAAe,cAAA,CAAA,OAAA,CAAQ,GAAG,CAAA,CAAE,KAAQ,GAAA,MAAA,CAAA;AACpC,gBAAQ,OAAA,EAAA,CAAA;AAAA,eACZ;AAAA,aACH,CAAA;AAAA,YACD,KAAO,EAAA,SAAA;AAAA,WACX,CAAA;AAAA,SACJ;AACA,QAAO,OAAA,cAAA,CAAe,OAAQ,CAAA,GAAG,CAAE,CAAA,OAAA,CAAA;AAAA,OACvC;AAAA,MACA,SAAW,EAAA,MAAM,MAAO,CAAA,MAAA,CAAO,cAAe,CAAA,OAAO,CAAE,CAAA,IAAA,CAAK,CAAC,EAAE,KAAM,EAAA,KAAM,UAAU,SAAS,CAAA;AAAA,MAC9F,iBAAiB,MACb,oBAAA,KAAyB,IACzB,IAAA,MAAA,CAAO,OAAO,cAAe,CAAA,OAAO,CAAE,CAAA,MAAA,CAAO,CAAC,EAAE,KAAA,OAAY,KAAU,KAAA,SAAS,EAAE,MAC7E,IAAA,oBAAA;AAAA,KACZ,CAAA;AAAA,KACD,CAAC,iBAAA,EAAmB,mBAAqB,EAAA,oBAAA,EAAsB,gBAAgB,CAAC,CAAA,CAAA;AAEnF,EAAA,uBAAQ,GAAA,CAAA,gBAAA,CAAiB,QAAjB,EAAA,EAA0B,OAAe,QAAS,EAAA,CAAA,CAAA;AAC9D;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { DatePickerProps } from '
|
|
1
|
+
import { DatePickerProps } from '../types';
|
|
2
2
|
export declare const DatePicker: import("react").ComponentType<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
|
package/DatePicker/DatePicker.js
CHANGED
|
@@ -6,7 +6,7 @@ import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
|
6
6
|
import { AsyncDataLoader } from '../AsyncDataLoader.js';
|
|
7
7
|
import { AsyncDataStore } from '../AsyncDataStore.js';
|
|
8
8
|
import { DayPicker } from './DayPicker.js';
|
|
9
|
-
import
|
|
9
|
+
import MobileDatePickerWithScroll_default from './MobileDatePickerWithScroll.js';
|
|
10
10
|
import { Header } from '../Header.js';
|
|
11
11
|
import { MonthPicker } from '../MonthPicker.js';
|
|
12
12
|
import { Weekdays } from '../Weekdays.js';
|
|
@@ -16,7 +16,7 @@ import { useDatePickerControls } from '../useDatePickerControls.js';
|
|
|
16
16
|
import { useModifierDates } from '../useModifierDates.js';
|
|
17
17
|
import { useDisplayDate } from '../utils.js';
|
|
18
18
|
import { Divider } from '@hh.ru/magritte-ui-divider';
|
|
19
|
-
import { s as styles } from '../date-picker-
|
|
19
|
+
import { s as styles } from '../date-picker-5L5YywN3.js';
|
|
20
20
|
import '../AsyncDataContext.js';
|
|
21
21
|
import '@hh.ru/magritte-ui-loader';
|
|
22
22
|
import 'date-fns';
|
|
@@ -35,27 +35,117 @@ import '@hh.ru/magritte-common-use-multiple-refs';
|
|
|
35
35
|
import 'date-fns/constants';
|
|
36
36
|
|
|
37
37
|
const DatePickerRenderFunc = forwardRef((props, ref) => {
|
|
38
|
-
|
|
38
|
+
const {
|
|
39
39
|
// настройки функциональности
|
|
40
|
-
modifierDates,
|
|
40
|
+
modifierDates,
|
|
41
|
+
modifierDatesFunc,
|
|
42
|
+
displayDate: _displayDate,
|
|
43
|
+
enabledCalendars,
|
|
44
|
+
minDate,
|
|
45
|
+
maxDate,
|
|
46
|
+
selectedDate,
|
|
41
47
|
// колбеки
|
|
42
|
-
onDisplayDateChange,
|
|
48
|
+
onDisplayDateChange,
|
|
49
|
+
onDateSelect,
|
|
43
50
|
// настройки внешнего вида
|
|
44
|
-
stretched,
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
+
stretched,
|
|
52
|
+
activeHeader,
|
|
53
|
+
alignHeader,
|
|
54
|
+
headerMonthFormat,
|
|
55
|
+
locale,
|
|
56
|
+
showAdjacentDays = true,
|
|
57
|
+
showControls,
|
|
58
|
+
showHeader = true,
|
|
59
|
+
showHeaderDate,
|
|
60
|
+
showDivider = true,
|
|
61
|
+
showWeekdays = true,
|
|
62
|
+
fixedWeeks,
|
|
63
|
+
mobileScrollHorizontal,
|
|
64
|
+
paddingsHorizontalDesktop,
|
|
65
|
+
renderDay
|
|
66
|
+
} = props;
|
|
67
|
+
const displayDate = useDisplayDate(_displayDate, selectedDate);
|
|
68
|
+
const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } = useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);
|
|
69
|
+
const { isMobile } = useBreakpoint();
|
|
70
|
+
const modifierDatesMap = useModifierDates(modifierDates);
|
|
71
|
+
if (isMobile && mobileScrollHorizontal) {
|
|
72
|
+
return /* @__PURE__ */ jsx(
|
|
73
|
+
MobileDatePickerWithScroll_default,
|
|
74
|
+
{
|
|
75
|
+
...props,
|
|
76
|
+
displayDate,
|
|
77
|
+
modifierDatesMap,
|
|
78
|
+
ref
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
return /* @__PURE__ */ jsx(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
className: classnames(styles.layout, { [styles.stretched]: stretched }),
|
|
86
|
+
ref,
|
|
87
|
+
style: {
|
|
88
|
+
...!isMobile && typeof paddingsHorizontalDesktop !== "undefined" ? { "--magritte-date-picker-padding-horizontal": `${paddingsHorizontalDesktop}px` } : {}
|
|
89
|
+
},
|
|
90
|
+
children: /* @__PURE__ */ jsx(AsyncDataStore, { modifierDatesFunc, children: /* @__PURE__ */ jsxs(AsyncDataLoader, { stretched, children: [
|
|
91
|
+
showHeader && /* @__PURE__ */ jsx(
|
|
92
|
+
Header,
|
|
93
|
+
{
|
|
94
|
+
calendar,
|
|
95
|
+
displayDate,
|
|
96
|
+
stretched,
|
|
97
|
+
activeHeader,
|
|
98
|
+
alignHeader,
|
|
99
|
+
goToNextPeriod,
|
|
100
|
+
goToPrevPeriod,
|
|
101
|
+
headerMonthFormat,
|
|
102
|
+
locale,
|
|
103
|
+
showControls,
|
|
104
|
+
showHeaderDate,
|
|
105
|
+
switchCalendar
|
|
106
|
+
}
|
|
107
|
+
),
|
|
108
|
+
showWeekdays && calendar === "day" && /* @__PURE__ */ jsx(Weekdays, { locale, stretched }),
|
|
109
|
+
showDivider && (showHeader || showWeekdays) && /* @__PURE__ */ jsx(Divider, {}),
|
|
110
|
+
calendar === "day" && /* @__PURE__ */ jsx(
|
|
111
|
+
DayPicker,
|
|
112
|
+
{
|
|
113
|
+
displayDate,
|
|
114
|
+
selectedDate,
|
|
115
|
+
onDateSelect,
|
|
116
|
+
showAdjacentDays,
|
|
117
|
+
minDate,
|
|
118
|
+
maxDate,
|
|
119
|
+
stretched,
|
|
120
|
+
fixedWeeks,
|
|
121
|
+
modifierDatesMap,
|
|
122
|
+
renderDay
|
|
123
|
+
}
|
|
124
|
+
),
|
|
125
|
+
calendar === "month" && /* @__PURE__ */ jsx(
|
|
126
|
+
MonthPicker,
|
|
127
|
+
{
|
|
128
|
+
locale,
|
|
129
|
+
displayDate,
|
|
130
|
+
selectedDate,
|
|
131
|
+
stretched,
|
|
132
|
+
onDateSelect: enabledCalendars.startsWith("dd") ? zoomIntoMonth : onDateSelect
|
|
133
|
+
}
|
|
134
|
+
),
|
|
135
|
+
calendar === "year" && /* @__PURE__ */ jsx(
|
|
136
|
+
YearPicker,
|
|
137
|
+
{
|
|
138
|
+
displayDate,
|
|
139
|
+
selectedDate,
|
|
140
|
+
stretched,
|
|
141
|
+
onDateSelect: zoomIntoYear
|
|
142
|
+
}
|
|
143
|
+
)
|
|
144
|
+
] }) })
|
|
51
145
|
}
|
|
52
|
-
|
|
53
|
-
...(!isMobile && typeof paddingsHorizontalDesktop !== 'undefined'
|
|
54
|
-
? { '--magritte-date-picker-padding-horizontal': `${paddingsHorizontalDesktop}px` }
|
|
55
|
-
: {}),
|
|
56
|
-
}, children: jsx(AsyncDataStore, { modifierDatesFunc: modifierDatesFunc, children: jsxs(AsyncDataLoader, { stretched: stretched, children: [showHeader && (jsx(Header, { calendar: calendar, displayDate: displayDate, stretched: stretched, activeHeader: activeHeader, alignHeader: alignHeader, goToNextPeriod: goToNextPeriod, goToPrevPeriod: goToPrevPeriod, headerMonthFormat: headerMonthFormat, locale: locale, showControls: showControls, showHeaderDate: showHeaderDate, switchCalendar: switchCalendar })), showWeekdays && calendar === 'day' && jsx(Weekdays, { locale: locale, stretched: stretched }), showDivider && (showHeader || showWeekdays) && jsx(Divider, {}), calendar === 'day' && (jsx(DayPicker, { displayDate: displayDate, selectedDate: selectedDate, onDateSelect: onDateSelect, showAdjacentDays: showAdjacentDays, minDate: minDate, maxDate: maxDate, stretched: stretched, fixedWeeks: fixedWeeks, modifierDatesMap: modifierDatesMap, renderDay: renderDay })), calendar === 'month' && (jsx(MonthPicker, { locale: locale, displayDate: displayDate, selectedDate: selectedDate, stretched: stretched, onDateSelect: enabledCalendars.startsWith('dd') ? zoomIntoMonth : onDateSelect })), calendar === 'year' && (jsx(YearPicker, { displayDate: displayDate, selectedDate: selectedDate, stretched: stretched, onDateSelect: zoomIntoYear }))] }) }) }));
|
|
146
|
+
);
|
|
57
147
|
});
|
|
58
|
-
DatePickerRenderFunc.displayName =
|
|
148
|
+
DatePickerRenderFunc.displayName = "DatePickerRenderFunc";
|
|
59
149
|
const DatePicker = WithArrowNavigationHOC(DatePickerRenderFunc);
|
|
60
150
|
|
|
61
151
|
export { DatePicker };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { CSSProperties, forwardRef } from 'react';\nimport classnames from 'classnames';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { AsyncDataLoader } from '@hh.ru/magritte-ui-date-picker/AsyncDataLoader';\nimport { AsyncDataStore } from '@hh.ru/magritte-ui-date-picker/AsyncDataStore';\nimport { DayPicker } from '@hh.ru/magritte-ui-date-picker/DatePicker/DayPicker';\nimport MobileDatePickerWithScroll from '@hh.ru/magritte-ui-date-picker/DatePicker/MobileDatePickerWithScroll';\nimport { Header } from '@hh.ru/magritte-ui-date-picker/Header';\nimport { MonthPicker } from '@hh.ru/magritte-ui-date-picker/MonthPicker';\nimport { Weekdays } from '@hh.ru/magritte-ui-date-picker/Weekdays';\nimport { WithArrowNavigationHOC } from '@hh.ru/magritte-ui-date-picker/WithArrowNavigationHOC';\nimport { YearPicker } from '@hh.ru/magritte-ui-date-picker/YearPicker';\nimport { DatePickerProps } from '@hh.ru/magritte-ui-date-picker/types';\nimport { useDatePickerControls } from '@hh.ru/magritte-ui-date-picker/useDatePickerControls';\nimport { useModifierDates } from '@hh.ru/magritte-ui-date-picker/useModifierDates';\nimport { useDisplayDate } from '@hh.ru/magritte-ui-date-picker/utils';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\n\nimport styles from '../date-picker.less';\n\nconst DatePickerRenderFunc = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {\n const {\n // настройки функциональности\n modifierDates,\n modifierDatesFunc,\n displayDate: _displayDate,\n enabledCalendars,\n minDate,\n maxDate,\n selectedDate,\n // колбеки\n onDisplayDateChange,\n onDateSelect,\n // настройки внешнего вида\n stretched,\n activeHeader,\n alignHeader,\n headerMonthFormat,\n locale,\n showAdjacentDays = true,\n showControls,\n showHeader = true,\n showHeaderDate,\n showDivider = true,\n showWeekdays = true,\n fixedWeeks,\n mobileScrollHorizontal,\n paddingsHorizontalDesktop,\n renderDay,\n } = props;\n const displayDate = useDisplayDate(_displayDate, selectedDate);\n const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } =\n useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);\n const { isMobile } = useBreakpoint();\n\n const modifierDatesMap = useModifierDates(modifierDates);\n\n if (isMobile && mobileScrollHorizontal) {\n return (\n <MobileDatePickerWithScroll\n {...props}\n displayDate={displayDate}\n modifierDatesMap={modifierDatesMap}\n ref={ref}\n />\n );\n }\n\n return (\n <div\n className={classnames(styles.layout, { [styles.stretched]: stretched })}\n ref={ref}\n style={\n {\n ...(!isMobile && typeof paddingsHorizontalDesktop !== 'undefined'\n ? { '--magritte-date-picker-padding-horizontal': `${paddingsHorizontalDesktop}px` }\n : {}),\n } as CSSProperties\n }\n >\n <AsyncDataStore modifierDatesFunc={modifierDatesFunc}>\n <AsyncDataLoader stretched={stretched}>\n {showHeader && (\n <Header\n calendar={calendar}\n displayDate={displayDate}\n stretched={stretched}\n activeHeader={activeHeader}\n alignHeader={alignHeader}\n goToNextPeriod={goToNextPeriod}\n goToPrevPeriod={goToPrevPeriod}\n headerMonthFormat={headerMonthFormat}\n locale={locale}\n showControls={showControls}\n showHeaderDate={showHeaderDate}\n switchCalendar={switchCalendar}\n />\n )}\n {showWeekdays && calendar === 'day' && <Weekdays locale={locale} stretched={stretched} />}\n {showDivider && (showHeader || showWeekdays) && <Divider />}\n {calendar === 'day' && (\n <DayPicker\n displayDate={displayDate}\n selectedDate={selectedDate}\n onDateSelect={onDateSelect}\n showAdjacentDays={showAdjacentDays}\n minDate={minDate}\n maxDate={maxDate}\n stretched={stretched}\n fixedWeeks={fixedWeeks}\n modifierDatesMap={modifierDatesMap}\n renderDay={renderDay}\n />\n )}\n {calendar === 'month' && (\n <MonthPicker\n locale={locale}\n displayDate={displayDate}\n selectedDate={selectedDate}\n stretched={stretched}\n onDateSelect={enabledCalendars.startsWith('dd') ? zoomIntoMonth : onDateSelect}\n />\n )}\n {calendar === 'year' && (\n <YearPicker\n displayDate={displayDate}\n selectedDate={selectedDate}\n stretched={stretched}\n onDateSelect={zoomIntoYear}\n />\n )}\n </AsyncDataLoader>\n </AsyncDataStore>\n </div>\n );\n});\n\nDatePickerRenderFunc.displayName = 'DatePickerRenderFunc';\n\nexport const DatePicker = WithArrowNavigationHOC(DatePickerRenderFunc);\n"],"names":["
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { CSSProperties, forwardRef } from 'react';\nimport classnames from 'classnames';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { AsyncDataLoader } from '@hh.ru/magritte-ui-date-picker/AsyncDataLoader';\nimport { AsyncDataStore } from '@hh.ru/magritte-ui-date-picker/AsyncDataStore';\nimport { DayPicker } from '@hh.ru/magritte-ui-date-picker/DatePicker/DayPicker';\nimport MobileDatePickerWithScroll from '@hh.ru/magritte-ui-date-picker/DatePicker/MobileDatePickerWithScroll';\nimport { Header } from '@hh.ru/magritte-ui-date-picker/Header';\nimport { MonthPicker } from '@hh.ru/magritte-ui-date-picker/MonthPicker';\nimport { Weekdays } from '@hh.ru/magritte-ui-date-picker/Weekdays';\nimport { WithArrowNavigationHOC } from '@hh.ru/magritte-ui-date-picker/WithArrowNavigationHOC';\nimport { YearPicker } from '@hh.ru/magritte-ui-date-picker/YearPicker';\nimport { DatePickerProps } from '@hh.ru/magritte-ui-date-picker/types';\nimport { useDatePickerControls } from '@hh.ru/magritte-ui-date-picker/useDatePickerControls';\nimport { useModifierDates } from '@hh.ru/magritte-ui-date-picker/useModifierDates';\nimport { useDisplayDate } from '@hh.ru/magritte-ui-date-picker/utils';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\n\nimport styles from '../date-picker.less';\n\nconst DatePickerRenderFunc = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {\n const {\n // настройки функциональности\n modifierDates,\n modifierDatesFunc,\n displayDate: _displayDate,\n enabledCalendars,\n minDate,\n maxDate,\n selectedDate,\n // колбеки\n onDisplayDateChange,\n onDateSelect,\n // настройки внешнего вида\n stretched,\n activeHeader,\n alignHeader,\n headerMonthFormat,\n locale,\n showAdjacentDays = true,\n showControls,\n showHeader = true,\n showHeaderDate,\n showDivider = true,\n showWeekdays = true,\n fixedWeeks,\n mobileScrollHorizontal,\n paddingsHorizontalDesktop,\n renderDay,\n } = props;\n const displayDate = useDisplayDate(_displayDate, selectedDate);\n const { calendar, switchCalendar, zoomIntoMonth, zoomIntoYear, goToNextPeriod, goToPrevPeriod } =\n useDatePickerControls(enabledCalendars, displayDate, onDisplayDateChange);\n const { isMobile } = useBreakpoint();\n\n const modifierDatesMap = useModifierDates(modifierDates);\n\n if (isMobile && mobileScrollHorizontal) {\n return (\n <MobileDatePickerWithScroll\n {...props}\n displayDate={displayDate}\n modifierDatesMap={modifierDatesMap}\n ref={ref}\n />\n );\n }\n\n return (\n <div\n className={classnames(styles.layout, { [styles.stretched]: stretched })}\n ref={ref}\n style={\n {\n ...(!isMobile && typeof paddingsHorizontalDesktop !== 'undefined'\n ? { '--magritte-date-picker-padding-horizontal': `${paddingsHorizontalDesktop}px` }\n : {}),\n } as CSSProperties\n }\n >\n <AsyncDataStore modifierDatesFunc={modifierDatesFunc}>\n <AsyncDataLoader stretched={stretched}>\n {showHeader && (\n <Header\n calendar={calendar}\n displayDate={displayDate}\n stretched={stretched}\n activeHeader={activeHeader}\n alignHeader={alignHeader}\n goToNextPeriod={goToNextPeriod}\n goToPrevPeriod={goToPrevPeriod}\n headerMonthFormat={headerMonthFormat}\n locale={locale}\n showControls={showControls}\n showHeaderDate={showHeaderDate}\n switchCalendar={switchCalendar}\n />\n )}\n {showWeekdays && calendar === 'day' && <Weekdays locale={locale} stretched={stretched} />}\n {showDivider && (showHeader || showWeekdays) && <Divider />}\n {calendar === 'day' && (\n <DayPicker\n displayDate={displayDate}\n selectedDate={selectedDate}\n onDateSelect={onDateSelect}\n showAdjacentDays={showAdjacentDays}\n minDate={minDate}\n maxDate={maxDate}\n stretched={stretched}\n fixedWeeks={fixedWeeks}\n modifierDatesMap={modifierDatesMap}\n renderDay={renderDay}\n />\n )}\n {calendar === 'month' && (\n <MonthPicker\n locale={locale}\n displayDate={displayDate}\n selectedDate={selectedDate}\n stretched={stretched}\n onDateSelect={enabledCalendars.startsWith('dd') ? zoomIntoMonth : onDateSelect}\n />\n )}\n {calendar === 'year' && (\n <YearPicker\n displayDate={displayDate}\n selectedDate={selectedDate}\n stretched={stretched}\n onDateSelect={zoomIntoYear}\n />\n )}\n </AsyncDataLoader>\n </AsyncDataStore>\n </div>\n );\n});\n\nDatePickerRenderFunc.displayName = 'DatePickerRenderFunc';\n\nexport const DatePicker = WithArrowNavigationHOC(DatePickerRenderFunc);\n"],"names":["MobileDatePickerWithScroll"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,oBAAuB,GAAA,UAAA,CAA4C,CAAC,KAAA,EAAO,GAAQ,KAAA;AACrF,EAAM,MAAA;AAAA;AAAA,IAEF,aAAA;AAAA,IACA,iBAAA;AAAA,IACA,WAAa,EAAA,YAAA;AAAA,IACb,gBAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA;AAAA,IAEA,mBAAA;AAAA,IACA,YAAA;AAAA;AAAA,IAEA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,MAAA;AAAA,IACA,gBAAmB,GAAA,IAAA;AAAA,IACnB,YAAA;AAAA,IACA,UAAa,GAAA,IAAA;AAAA,IACb,cAAA;AAAA,IACA,WAAc,GAAA,IAAA;AAAA,IACd,YAAe,GAAA,IAAA;AAAA,IACf,UAAA;AAAA,IACA,sBAAA;AAAA,IACA,yBAAA;AAAA,IACA,SAAA;AAAA,GACA,GAAA,KAAA,CAAA;AACJ,EAAM,MAAA,WAAA,GAAc,cAAe,CAAA,YAAA,EAAc,YAAY,CAAA,CAAA;AAC7D,EAAM,MAAA,EAAE,QAAU,EAAA,cAAA,EAAgB,aAAe,EAAA,YAAA,EAAc,cAAgB,EAAA,cAAA,EAC3E,GAAA,qBAAA,CAAsB,gBAAkB,EAAA,WAAA,EAAa,mBAAmB,CAAA,CAAA;AAC5E,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA,CAAA;AAEnC,EAAM,MAAA,gBAAA,GAAmB,iBAAiB,aAAa,CAAA,CAAA;AAEvD,EAAA,IAAI,YAAY,sBAAwB,EAAA;AACpC,IACI,uBAAA,GAAA;AAAA,MAACA,kCAAA;AAAA,MAAA;AAAA,QACI,GAAG,KAAA;AAAA,QACJ,WAAA;AAAA,QACA,gBAAA;AAAA,QACA,GAAA;AAAA,OAAA;AAAA,KACJ,CAAA;AAAA,GAER;AAEA,EACI,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAW,UAAW,CAAA,MAAA,CAAO,MAAQ,EAAA,EAAE,CAAC,MAAO,CAAA,SAAS,GAAG,SAAA,EAAW,CAAA;AAAA,MACtE,GAAA;AAAA,MACA,KACI,EAAA;AAAA,QACI,GAAI,CAAC,QAAY,IAAA,OAAO,yBAA8B,KAAA,WAAA,GAChD,EAAE,2CAAA,EAA6C,CAAG,EAAA,yBAAyB,CAAK,EAAA,CAAA,EAAA,GAChF,EAAC;AAAA,OACX;AAAA,MAGJ,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAe,iBACZ,EAAA,QAAA,kBAAA,IAAA,CAAC,mBAAgB,SACZ,EAAA,QAAA,EAAA;AAAA,QACG,UAAA,oBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACG,QAAA;AAAA,YACA,WAAA;AAAA,YACA,SAAA;AAAA,YACA,YAAA;AAAA,YACA,WAAA;AAAA,YACA,cAAA;AAAA,YACA,cAAA;AAAA,YACA,iBAAA;AAAA,YACA,MAAA;AAAA,YACA,YAAA;AAAA,YACA,cAAA;AAAA,YACA,cAAA;AAAA,WAAA;AAAA,SACJ;AAAA,QAEH,gBAAgB,QAAa,KAAA,KAAA,oBAAU,GAAA,CAAA,QAAA,EAAA,EAAS,QAAgB,SAAsB,EAAA,CAAA;AAAA,QACtF,WAAgB,KAAA,UAAA,IAAc,YAAiB,CAAA,oBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,CAAA;AAAA,QACxD,aAAa,KACV,oBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACG,WAAA;AAAA,YACA,YAAA;AAAA,YACA,YAAA;AAAA,YACA,gBAAA;AAAA,YACA,OAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,YACA,gBAAA;AAAA,YACA,SAAA;AAAA,WAAA;AAAA,SACJ;AAAA,QAEH,aAAa,OACV,oBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACG,MAAA;AAAA,YACA,WAAA;AAAA,YACA,YAAA;AAAA,YACA,SAAA;AAAA,YACA,YAAc,EAAA,gBAAA,CAAiB,UAAW,CAAA,IAAI,IAAI,aAAgB,GAAA,YAAA;AAAA,WAAA;AAAA,SACtE;AAAA,QAEH,aAAa,MACV,oBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACG,WAAA;AAAA,YACA,YAAA;AAAA,YACA,SAAA;AAAA,YACA,YAAc,EAAA,YAAA;AAAA,WAAA;AAAA,SAClB;AAAA,OAAA,EAER,CACJ,EAAA,CAAA;AAAA,KAAA;AAAA,GACJ,CAAA;AAER,CAAC,CAAA,CAAA;AAED,oBAAA,CAAqB,WAAc,GAAA,sBAAA,CAAA;AAEtB,MAAA,UAAA,GAAa,uBAAuB,oBAAoB;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { DayPickerProps, DayProps } from '
|
|
2
|
+
import { DayPickerProps, DayProps } from '../types';
|
|
3
3
|
export declare const DayDefault: import("react").ForwardRefExoticComponent<DayProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
4
4
|
export declare const DayPicker: FC<DayPickerProps>;
|