@tcn/ui-time-selector 1.0.0 → 2.0.0
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time_selector.d.ts","sourceRoot":"","sources":["../../../src/components/time_selector/time_selector.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"time_selector.d.ts","sourceRoot":"","sources":["../../../src/components/time_selector/time_selector.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IAC5C,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;AAErD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAAU,EACV,SAAS,GACV,EAAE,iBAAiB,2CAqEnB"}
|
|
@@ -1,27 +1,29 @@
|
|
|
1
|
-
import { jsxs as r, Fragment as
|
|
2
|
-
import { useSignalValue as
|
|
1
|
+
import { jsxs as r, Fragment as y, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { useSignalValue as n } from "@tcn/state";
|
|
3
3
|
import { ElementPopper as S } from "@tcn/ui/overlay";
|
|
4
|
-
import { HStack as p, VStack as
|
|
4
|
+
import { HStack as p, VStack as z } from "@tcn/ui/stacks";
|
|
5
5
|
import { BodyText as m } from "@tcn/ui/typography";
|
|
6
|
+
import { ChevronDownIcon as _ } from "@tcn/icons/chevron_down_icon.js";
|
|
7
|
+
import { ChevronUpIcon as w } from "@tcn/icons/chevron_up_icon.js";
|
|
6
8
|
import { useState as x, useRef as A } from "react";
|
|
7
9
|
import { TimeSelectorPresenter as R } from "./time_selector_presenter.js";
|
|
8
10
|
import { PresetPanel as T } from "../preset_panel/preset_panel.js";
|
|
9
11
|
import { DateRangePanel as k } from "../date_range_panel/date_range_panel.js";
|
|
10
|
-
import { TimezoneFooter as
|
|
11
|
-
import '../../time_selector.css';const
|
|
12
|
-
function
|
|
12
|
+
import { TimezoneFooter as D } from "../timezone_footer/timezone_footer.js";
|
|
13
|
+
import '../../time_selector.css';const F = "_trigger-abbreviation_8e22c20", V = "_trigger_1096f0b", C = "_popper-content_9403264", a = { "trigger-abbreviation": F, trigger: V, "popper-content": C };
|
|
14
|
+
function J({
|
|
13
15
|
onChange: l,
|
|
14
16
|
onTimezoneChange: d,
|
|
15
17
|
startDateMin: g,
|
|
16
18
|
startDateMax: f,
|
|
17
|
-
endDateMin:
|
|
18
|
-
endDateMax:
|
|
19
|
+
endDateMin: h,
|
|
20
|
+
endDateMax: b,
|
|
19
21
|
timezones: u
|
|
20
22
|
}) {
|
|
21
|
-
const [e] = x(() => new R()), c = A(null),
|
|
23
|
+
const [e] = x(() => new R()), c = A(null), o = n(e.broadcasts.isOpen), s = n(e.broadcasts.selectedPreset), P = n(e.broadcasts.displayValue), v = n(
|
|
22
24
|
e.timezoneFooterPresenter.broadcasts.timezoneAbbreviation
|
|
23
25
|
);
|
|
24
|
-
return /* @__PURE__ */ r(
|
|
26
|
+
return /* @__PURE__ */ r(y, { children: [
|
|
25
27
|
/* @__PURE__ */ t(
|
|
26
28
|
"div",
|
|
27
29
|
{
|
|
@@ -39,9 +41,10 @@ function q({
|
|
|
39
41
|
selectable: !1,
|
|
40
42
|
style: { fontWeight: 700 },
|
|
41
43
|
className: a["trigger-abbreviation"],
|
|
42
|
-
children:
|
|
44
|
+
children: v
|
|
43
45
|
}
|
|
44
|
-
)
|
|
46
|
+
),
|
|
47
|
+
o ? /* @__PURE__ */ t(w, { size: "sm" }) : /* @__PURE__ */ t(_, { size: "sm" })
|
|
45
48
|
] })
|
|
46
49
|
}
|
|
47
50
|
),
|
|
@@ -49,11 +52,11 @@ function q({
|
|
|
49
52
|
S,
|
|
50
53
|
{
|
|
51
54
|
anchorElement: c,
|
|
52
|
-
open:
|
|
55
|
+
open: o,
|
|
53
56
|
onDismissal: () => e.close(),
|
|
54
57
|
dismissals: [],
|
|
55
58
|
children: /* @__PURE__ */ r(
|
|
56
|
-
|
|
59
|
+
z,
|
|
57
60
|
{
|
|
58
61
|
className: a["popper-content"],
|
|
59
62
|
height: "auto",
|
|
@@ -66,11 +69,11 @@ function q({
|
|
|
66
69
|
k,
|
|
67
70
|
{
|
|
68
71
|
presenter: e.dateRangePanelPresenter,
|
|
69
|
-
focused:
|
|
72
|
+
focused: o && s == null,
|
|
70
73
|
startDateMin: g,
|
|
71
74
|
startDateMax: f,
|
|
72
|
-
endDateMin:
|
|
73
|
-
endDateMax:
|
|
75
|
+
endDateMin: h,
|
|
76
|
+
endDateMax: b,
|
|
74
77
|
onApply: () => e.applyTimeRange(l)
|
|
75
78
|
}
|
|
76
79
|
),
|
|
@@ -79,13 +82,13 @@ function q({
|
|
|
79
82
|
{
|
|
80
83
|
presenter: e.presetPanelPresenter,
|
|
81
84
|
selectedPreset: s,
|
|
82
|
-
focused:
|
|
85
|
+
focused: o && s != null,
|
|
83
86
|
onSelect: (i) => e.handlePresetSelect(i, l)
|
|
84
87
|
}
|
|
85
88
|
)
|
|
86
89
|
] }),
|
|
87
90
|
/* @__PURE__ */ t(
|
|
88
|
-
|
|
91
|
+
D,
|
|
89
92
|
{
|
|
90
93
|
presenter: e.timezoneFooterPresenter,
|
|
91
94
|
timezones: u,
|
|
@@ -100,6 +103,6 @@ function q({
|
|
|
100
103
|
] });
|
|
101
104
|
}
|
|
102
105
|
export {
|
|
103
|
-
|
|
106
|
+
J as TimeSelector
|
|
104
107
|
};
|
|
105
108
|
//# sourceMappingURL=time_selector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"time_selector.js","sources":["../../../src/components/time_selector/time_selector.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { ElementPopper } from '@tcn/ui/overlay';\nimport { HStack, VStack } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { useRef, useState } from 'react';\nimport { TimeSelectorPresenter } from './time_selector_presenter.js';\nimport { PresetPanel } from '../preset_panel/preset_panel.js';\nimport { DateRangePanel } from '../date_range_panel/date_range_panel.js';\nimport { TimezoneFooter } from '../timezone_footer/timezone_footer.js';\nimport styles from './time_selector.module.css';\n\nexport interface TimeSelectorOwnProps {\n onChange?: (start: Date, end: Date) => void;\n onTimezoneChange?: (timezone: string) => void;\n startDateMin?: Date | null;\n startDateMax?: Date | null;\n endDateMin?: Date | null;\n endDateMax?: Date | null;\n timezones?: string[];\n}\n\nexport type TimeSelectorProps = TimeSelectorOwnProps;\n\nexport function TimeSelector({\n onChange,\n onTimezoneChange,\n startDateMin,\n startDateMax,\n endDateMin,\n endDateMax,\n timezones,\n}: TimeSelectorProps) {\n const [presenter] = useState(() => new TimeSelectorPresenter());\n const anchorRef = useRef<HTMLDivElement>(null);\n\n const isOpen = useSignalValue(presenter.broadcasts.isOpen);\n const selectedPreset = useSignalValue(presenter.broadcasts.selectedPreset);\n const displayValue = useSignalValue(presenter.broadcasts.displayValue);\n const displayAbbreviation = useSignalValue(\n presenter.timezoneFooterPresenter.broadcasts.timezoneAbbreviation\n );\n\n return (\n <>\n <div\n ref={anchorRef}\n className={styles.trigger}\n onClick={() => presenter.toggleOpen()}\n >\n <HStack height=\"auto\" width=\"auto\" gap=\"4px\">\n <BodyText selectable={false}>{displayValue},</BodyText>\n <BodyText\n selectable={false}\n style={{ fontWeight: 700 }}\n className={styles['trigger-abbreviation']}\n >\n {displayAbbreviation}\n </BodyText>\n </HStack>\n </div>\n <ElementPopper\n anchorElement={anchorRef}\n open={isOpen}\n onDismissal={() => presenter.close()}\n dismissals={[]}\n >\n <VStack\n className={styles['popper-content']}\n height=\"auto\"\n onKeyDown={e => {\n if (e.key === 'Escape') presenter.close();\n }}\n >\n <HStack height=\"auto\" width=\"100%\" vAlign=\"start\">\n <DateRangePanel\n presenter={presenter.dateRangePanelPresenter}\n focused={isOpen && selectedPreset == null}\n startDateMin={startDateMin}\n startDateMax={startDateMax}\n endDateMin={endDateMin}\n endDateMax={endDateMax}\n onApply={() => presenter.applyTimeRange(onChange)}\n />\n <PresetPanel\n presenter={presenter.presetPanelPresenter}\n selectedPreset={selectedPreset}\n focused={isOpen && selectedPreset != null}\n onSelect={item => presenter.handlePresetSelect(item, onChange)}\n />\n </HStack>\n <TimezoneFooter\n presenter={presenter.timezoneFooterPresenter}\n timezones={timezones}\n onTimezoneChange={onTimezoneChange}\n />\n </VStack>\n </ElementPopper>\n </>\n );\n}\n"],"names":["TimeSelector","onChange","onTimezoneChange","startDateMin","startDateMax","endDateMin","endDateMax","timezones","presenter","useState","TimeSelectorPresenter","anchorRef","useRef","isOpen","useSignalValue","selectedPreset","displayValue","displayAbbreviation","jsxs","Fragment","jsx","styles","HStack","BodyText","ElementPopper","VStack","e","DateRangePanel","PresetPanel","item","TimezoneFooter"],"mappings":"
|
|
1
|
+
{"version":3,"file":"time_selector.js","sources":["../../../src/components/time_selector/time_selector.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { ElementPopper } from '@tcn/ui/overlay';\nimport { HStack, VStack } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { ChevronDownIcon } from '@tcn/icons/chevron_down_icon.js';\nimport { ChevronUpIcon } from '@tcn/icons/chevron_up_icon.js';\nimport { useRef, useState } from 'react';\nimport { TimeSelectorPresenter } from './time_selector_presenter.js';\nimport { PresetPanel } from '../preset_panel/preset_panel.js';\nimport { DateRangePanel } from '../date_range_panel/date_range_panel.js';\nimport { TimezoneFooter } from '../timezone_footer/timezone_footer.js';\nimport styles from './time_selector.module.css';\n\nexport interface TimeSelectorOwnProps {\n onChange?: (start: Date, end: Date) => void;\n onTimezoneChange?: (timezone: string) => void;\n startDateMin?: Date | null;\n startDateMax?: Date | null;\n endDateMin?: Date | null;\n endDateMax?: Date | null;\n timezones?: string[];\n}\n\nexport type TimeSelectorProps = TimeSelectorOwnProps;\n\nexport function TimeSelector({\n onChange,\n onTimezoneChange,\n startDateMin,\n startDateMax,\n endDateMin,\n endDateMax,\n timezones,\n}: TimeSelectorProps) {\n const [presenter] = useState(() => new TimeSelectorPresenter());\n const anchorRef = useRef<HTMLDivElement>(null);\n\n const isOpen = useSignalValue(presenter.broadcasts.isOpen);\n const selectedPreset = useSignalValue(presenter.broadcasts.selectedPreset);\n const displayValue = useSignalValue(presenter.broadcasts.displayValue);\n const displayAbbreviation = useSignalValue(\n presenter.timezoneFooterPresenter.broadcasts.timezoneAbbreviation\n );\n\n return (\n <>\n <div\n ref={anchorRef}\n className={styles.trigger}\n onClick={() => presenter.toggleOpen()}\n >\n <HStack height=\"auto\" width=\"auto\" gap=\"4px\">\n <BodyText selectable={false}>{displayValue},</BodyText>\n <BodyText\n selectable={false}\n style={{ fontWeight: 700 }}\n className={styles['trigger-abbreviation']}\n >\n {displayAbbreviation}\n </BodyText>\n {isOpen ? <ChevronUpIcon size=\"sm\" /> : <ChevronDownIcon size=\"sm\" />}\n </HStack>\n </div>\n <ElementPopper\n anchorElement={anchorRef}\n open={isOpen}\n onDismissal={() => presenter.close()}\n dismissals={[]}\n >\n <VStack\n className={styles['popper-content']}\n height=\"auto\"\n onKeyDown={e => {\n if (e.key === 'Escape') presenter.close();\n }}\n >\n <HStack height=\"auto\" width=\"100%\" vAlign=\"start\">\n <DateRangePanel\n presenter={presenter.dateRangePanelPresenter}\n focused={isOpen && selectedPreset == null}\n startDateMin={startDateMin}\n startDateMax={startDateMax}\n endDateMin={endDateMin}\n endDateMax={endDateMax}\n onApply={() => presenter.applyTimeRange(onChange)}\n />\n <PresetPanel\n presenter={presenter.presetPanelPresenter}\n selectedPreset={selectedPreset}\n focused={isOpen && selectedPreset != null}\n onSelect={item => presenter.handlePresetSelect(item, onChange)}\n />\n </HStack>\n <TimezoneFooter\n presenter={presenter.timezoneFooterPresenter}\n timezones={timezones}\n onTimezoneChange={onTimezoneChange}\n />\n </VStack>\n </ElementPopper>\n </>\n );\n}\n"],"names":["TimeSelector","onChange","onTimezoneChange","startDateMin","startDateMax","endDateMin","endDateMax","timezones","presenter","useState","TimeSelectorPresenter","anchorRef","useRef","isOpen","useSignalValue","selectedPreset","displayValue","displayAbbreviation","jsxs","Fragment","jsx","styles","HStack","BodyText","ChevronUpIcon","ChevronDownIcon","ElementPopper","VStack","e","DateRangePanel","PresetPanel","item","TimezoneFooter"],"mappings":";;;;;;;;;;;;;AAyBO,SAASA,EAAa;AAAA,EAC3B,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAM,CAACC,CAAS,IAAIC,EAAS,MAAM,IAAIC,GAAuB,GACxDC,IAAYC,EAAuB,IAAI,GAEvCC,IAASC,EAAeN,EAAU,WAAW,MAAM,GACnDO,IAAiBD,EAAeN,EAAU,WAAW,cAAc,GACnEQ,IAAeF,EAAeN,EAAU,WAAW,YAAY,GAC/DS,IAAsBH;AAAA,IAC1BN,EAAU,wBAAwB,WAAW;AAAA,EAAA;AAG/C,SACE,gBAAAU,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,WAAWU,EAAO;AAAA,QAClB,SAAS,MAAMb,EAAU,WAAA;AAAA,QAEzB,4BAACc,GAAA,EAAO,QAAO,QAAO,OAAM,QAAO,KAAI,OACrC,UAAA;AAAA,UAAA,gBAAAJ,EAACK,GAAA,EAAS,YAAY,IAAQ,UAAA;AAAA,YAAAP;AAAA,YAAa;AAAA,UAAA,GAAC;AAAA,UAC5C,gBAAAI;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,YAAY;AAAA,cACZ,OAAO,EAAE,YAAY,IAAA;AAAA,cACrB,WAAWF,EAAO,sBAAsB;AAAA,cAEvC,UAAAJ;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFJ,sBAAUW,GAAA,EAAc,MAAK,MAAK,IAAK,gBAAAJ,EAACK,GAAA,EAAgB,MAAK,KAAA,CAAK;AAAA,QAAA,EAAA,CACrE;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,eAAef;AAAA,QACf,MAAME;AAAA,QACN,aAAa,MAAML,EAAU,MAAA;AAAA,QAC7B,YAAY,CAAA;AAAA,QAEZ,UAAA,gBAAAU;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,WAAWN,EAAO,gBAAgB;AAAA,YAClC,QAAO;AAAA,YACP,WAAW,CAAAO,MAAK;AACd,cAAIA,EAAE,QAAQ,YAAUpB,EAAU,MAAA;AAAA,YACpC;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAU,EAACI,KAAO,QAAO,QAAO,OAAM,QAAO,QAAO,SACxC,UAAA;AAAA,gBAAA,gBAAAF;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACC,WAAWrB,EAAU;AAAA,oBACrB,SAASK,KAAUE,KAAkB;AAAA,oBACrC,cAAAZ;AAAA,oBACA,cAAAC;AAAA,oBACA,YAAAC;AAAA,oBACA,YAAAC;AAAA,oBACA,SAAS,MAAME,EAAU,eAAeP,CAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAElD,gBAAAmB;AAAA,kBAACU;AAAA,kBAAA;AAAA,oBACC,WAAWtB,EAAU;AAAA,oBACrB,gBAAAO;AAAA,oBACA,SAASF,KAAUE,KAAkB;AAAA,oBACrC,UAAU,CAAAgB,MAAQvB,EAAU,mBAAmBuB,GAAM9B,CAAQ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC/D,GACF;AAAA,cACA,gBAAAmB;AAAA,gBAACY;AAAA,gBAAA;AAAA,kBACC,WAAWxB,EAAU;AAAA,kBACrB,WAAAD;AAAA,kBACA,kBAAAL;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tcn/ui-time-selector",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React time selector component",
|
|
6
6
|
"author": "TCN",
|
|
@@ -37,17 +37,17 @@
|
|
|
37
37
|
"**/*.css"
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@tcn/
|
|
41
|
-
"@tcn/
|
|
40
|
+
"@tcn/state": "1.3.4",
|
|
41
|
+
"@tcn/icons": "2.4.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "^18.2.0",
|
|
45
45
|
"react-dom": "^18.2.0",
|
|
46
|
-
"@tcn/ui": "^0.
|
|
46
|
+
"@tcn/ui": "^0.19.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@types/react-color": "^3.0.13",
|
|
50
|
-
"@tcn/ui": "0.
|
|
50
|
+
"@tcn/ui": "0.19.0"
|
|
51
51
|
},
|
|
52
52
|
"scripts": {
|
|
53
53
|
"start": "pnpm storybook",
|
|
@@ -2,6 +2,8 @@ import { useSignalValue } from '@tcn/state';
|
|
|
2
2
|
import { ElementPopper } from '@tcn/ui/overlay';
|
|
3
3
|
import { HStack, VStack } from '@tcn/ui/stacks';
|
|
4
4
|
import { BodyText } from '@tcn/ui/typography';
|
|
5
|
+
import { ChevronDownIcon } from '@tcn/icons/chevron_down_icon.js';
|
|
6
|
+
import { ChevronUpIcon } from '@tcn/icons/chevron_up_icon.js';
|
|
5
7
|
import { useRef, useState } from 'react';
|
|
6
8
|
import { TimeSelectorPresenter } from './time_selector_presenter.js';
|
|
7
9
|
import { PresetPanel } from '../preset_panel/preset_panel.js';
|
|
@@ -56,6 +58,7 @@ export function TimeSelector({
|
|
|
56
58
|
>
|
|
57
59
|
{displayAbbreviation}
|
|
58
60
|
</BodyText>
|
|
61
|
+
{isOpen ? <ChevronUpIcon size="sm" /> : <ChevronDownIcon size="sm" />}
|
|
59
62
|
</HStack>
|
|
60
63
|
</div>
|
|
61
64
|
<ElementPopper
|