@apia/dashboard-controller 2.0.8 → 2.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +409 -23
- package/dist/index.js +2201 -22
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/dist/actions/basicAction.d.ts +0 -15
- package/dist/actions/basicAction.d.ts.map +0 -1
- package/dist/actions/basicAction.js +0 -40
- package/dist/actions/basicAction.js.map +0 -1
- package/dist/actions/externalFirePanelAction.d.ts +0 -6
- package/dist/actions/externalFirePanelAction.d.ts.map +0 -1
- package/dist/actions/externalFirePanelAction.js +0 -12
- package/dist/actions/externalFirePanelAction.js.map +0 -1
- package/dist/actions/firePanelAction.d.ts +0 -6
- package/dist/actions/firePanelAction.d.ts.map +0 -1
- package/dist/actions/firePanelAction.js +0 -75
- package/dist/actions/firePanelAction.js.map +0 -1
- package/dist/actions/usePanelActions.d.ts +0 -63
- package/dist/actions/usePanelActions.d.ts.map +0 -1
- package/dist/actions/usePanelActions.js +0 -55
- package/dist/actions/usePanelActions.js.map +0 -1
- package/dist/actions/usePanelIsLoading.d.ts +0 -4
- package/dist/actions/usePanelIsLoading.d.ts.map +0 -1
- package/dist/actions/usePanelIsLoading.js +0 -14
- package/dist/actions/usePanelIsLoading.js.map +0 -1
- package/dist/actions/usePanelNetworkState.d.ts +0 -8
- package/dist/actions/usePanelNetworkState.d.ts.map +0 -1
- package/dist/actions/usePanelNetworkState.js +0 -21
- package/dist/actions/usePanelNetworkState.js.map +0 -1
- package/dist/common/usePanelIdentity.d.ts +0 -10
- package/dist/common/usePanelIdentity.d.ts.map +0 -1
- package/dist/common/usePanelIdentity.js +0 -12
- package/dist/common/usePanelIdentity.js.map +0 -1
- package/dist/config/parametersStore.d.ts +0 -15
- package/dist/config/parametersStore.d.ts.map +0 -1
- package/dist/config/parametersStore.js +0 -25
- package/dist/config/parametersStore.js.map +0 -1
- package/dist/config/saveParameters.d.ts +0 -11
- package/dist/config/saveParameters.d.ts.map +0 -1
- package/dist/config/saveParameters.js +0 -16
- package/dist/config/saveParameters.js.map +0 -1
- package/dist/config/usePanelConfig.js +0 -22
- package/dist/config/usePanelConfig.js.map +0 -1
- package/dist/config/usePanelParametersSelector.d.ts +0 -25
- package/dist/config/usePanelParametersSelector.d.ts.map +0 -1
- package/dist/config/usePanelParametersSelector.js +0 -17
- package/dist/config/usePanelParametersSelector.js.map +0 -1
- package/dist/dashboard/DashboardContext.d.ts +0 -6
- package/dist/dashboard/DashboardContext.d.ts.map +0 -1
- package/dist/dashboard/DashboardContext.js +0 -12
- package/dist/dashboard/DashboardContext.js.map +0 -1
- package/dist/dashboard/DashboardPanel.d.ts +0 -45
- package/dist/dashboard/DashboardPanel.d.ts.map +0 -1
- package/dist/dashboard/DashboardPanel.js +0 -236
- package/dist/dashboard/DashboardPanel.js.map +0 -1
- package/dist/dashboard/DashboardPanelContext.d.ts +0 -6
- package/dist/dashboard/DashboardPanelContext.d.ts.map +0 -1
- package/dist/dashboard/DashboardPanelContext.js +0 -12
- package/dist/dashboard/DashboardPanelContext.js.map +0 -1
- package/dist/dashboard/DashboardPanelsBootstraper.d.ts +0 -33
- package/dist/dashboard/DashboardPanelsBootstraper.d.ts.map +0 -1
- package/dist/dashboard/DashboardPanelsBootstraper.js +0 -135
- package/dist/dashboard/DashboardPanelsBootstraper.js.map +0 -1
- package/dist/dashboard/DashboardRouter.d.ts +0 -30
- package/dist/dashboard/DashboardRouter.d.ts.map +0 -1
- package/dist/dashboard/DashboardRouter.js +0 -74
- package/dist/dashboard/DashboardRouter.js.map +0 -1
- package/dist/dashboard/PanelNotFound.js +0 -14
- package/dist/dashboard/PanelNotFound.js.map +0 -1
- package/dist/dashboard/dashboard.d.ts +0 -26
- package/dist/dashboard/dashboard.d.ts.map +0 -1
- package/dist/dashboard/dashboard.js +0 -167
- package/dist/dashboard/dashboard.js.map +0 -1
- package/dist/eventsController/eventsController.d.ts +0 -11
- package/dist/eventsController/eventsController.d.ts.map +0 -1
- package/dist/eventsController/eventsController.js +0 -57
- package/dist/eventsController/eventsController.js.map +0 -1
- package/dist/eventsController/types.d.ts +0 -21
- package/dist/eventsController/types.d.ts.map +0 -1
- package/dist/eventsController/usePanelFireEvent.d.ts +0 -13
- package/dist/eventsController/usePanelFireEvent.d.ts.map +0 -1
- package/dist/eventsController/usePanelFireEvent.js +0 -21
- package/dist/eventsController/usePanelFireEvent.js.map +0 -1
- package/dist/eventsController/usePanelOnEvent.d.ts +0 -12
- package/dist/eventsController/usePanelOnEvent.d.ts.map +0 -1
- package/dist/eventsController/usePanelOnEvent.js +0 -14
- package/dist/eventsController/usePanelOnEvent.js.map +0 -1
- package/dist/panelsStore/createPanelStore.d.ts +0 -16
- package/dist/panelsStore/createPanelStore.d.ts.map +0 -1
- package/dist/panelsStore/createPanelStore.js +0 -58
- package/dist/panelsStore/createPanelStore.js.map +0 -1
- package/dist/panelsStore/panelsStore.js +0 -59
- package/dist/panelsStore/panelsStore.js.map +0 -1
- package/dist/panelsStore/usePanelSelector.js +0 -32
- package/dist/panelsStore/usePanelSelector.js.map +0 -1
- package/dist/panelsUtil/usePanelChangeTitle.d.ts +0 -5
- package/dist/panelsUtil/usePanelChangeTitle.d.ts.map +0 -1
- package/dist/panelsUtil/usePanelChangeTitle.js +0 -23
- package/dist/panelsUtil/usePanelChangeTitle.js.map +0 -1
- package/dist/panelsUtil/usePanelTitleAction.js +0 -34
- package/dist/panelsUtil/usePanelTitleAction.js.map +0 -1
- package/dist/position/usePanelPosition.d.ts +0 -13
- package/dist/position/usePanelPosition.d.ts.map +0 -1
- package/dist/position/usePanelPosition.js +0 -40
- package/dist/position/usePanelPosition.js.map +0 -1
- package/dist/splash/events/Dragleave.js +0 -15
- package/dist/splash/events/Dragleave.js.map +0 -1
- package/dist/splash/events/Dragover.js +0 -120
- package/dist/splash/events/Dragover.js.map +0 -1
- package/dist/splash/events/Dragstart.js +0 -65
- package/dist/splash/events/Dragstart.js.map +0 -1
- package/dist/splash/events/Drop.js +0 -60
- package/dist/splash/events/Drop.js.map +0 -1
- package/dist/splash/panels/DefaultPanelWrapper/NetworkState.js +0 -28
- package/dist/splash/panels/DefaultPanelWrapper/NetworkState.js.map +0 -1
- package/dist/splash/panels/DefaultPanelWrapper/PanelButtons.js +0 -16
- package/dist/splash/panels/DefaultPanelWrapper/PanelButtons.js.map +0 -1
- package/dist/splash/panels/DefaultPanelWrapper/RefreshButton.js +0 -35
- package/dist/splash/panels/DefaultPanelWrapper/RefreshButton.js.map +0 -1
- package/dist/splash/panels/DefaultPanelWrapper/SettingsButton.js +0 -45
- package/dist/splash/panels/DefaultPanelWrapper/SettingsButton.js.map +0 -1
- package/dist/splash/panels/DefaultPanelWrapper/defaultPanelWrapperStyles.js +0 -103
- package/dist/splash/panels/DefaultPanelWrapper/defaultPanelWrapperStyles.js.map +0 -1
- package/dist/splash/panels/DefaultPanelWrapper/index.js +0 -57
- package/dist/splash/panels/DefaultPanelWrapper/index.js.map +0 -1
- package/dist/splash/panels/LandingPagePanelWrapper.d.ts +0 -6
- package/dist/splash/panels/LandingPagePanelWrapper.d.ts.map +0 -1
- package/dist/splash/panels/LandingPagePanelWrapper.js +0 -52
- package/dist/splash/panels/LandingPagePanelWrapper.js.map +0 -1
- package/dist/splash/panels/PanelContext/PanelFooter.js +0 -70
- package/dist/splash/panels/PanelContext/PanelFooter.js.map +0 -1
- package/dist/splash/panels/PanelContext/index.d.ts +0 -26
- package/dist/splash/panels/PanelContext/index.d.ts.map +0 -1
- package/dist/splash/panels/PanelContext/index.js +0 -73
- package/dist/splash/panels/PanelContext/index.js.map +0 -1
- package/dist/splash/panels/PanelContext/usePanelContextLayout.d.ts +0 -6
- package/dist/splash/panels/PanelContext/usePanelContextLayout.d.ts.map +0 -1
- package/dist/splash/panels/PanelContext/usePanelContextLayout.js +0 -38
- package/dist/splash/panels/PanelContext/usePanelContextLayout.js.map +0 -1
- package/dist/splash/panels/PanelContext/usePanelFooter.js +0 -38
- package/dist/splash/panels/PanelContext/usePanelFooter.js.map +0 -1
- package/dist/splash/panels/PanelContext/useYieldPanelIsReady.d.ts +0 -45
- package/dist/splash/panels/PanelContext/useYieldPanelIsReady.d.ts.map +0 -1
- package/dist/splash/panels/PanelContext/useYieldPanelIsReady.js +0 -12
- package/dist/splash/panels/PanelContext/useYieldPanelIsReady.js.map +0 -1
- package/dist/splash/panels/PanelErrorBoundary.js +0 -53
- package/dist/splash/panels/PanelErrorBoundary.js.map +0 -1
- package/dist/splash/panels/PanelIdentifier.d.ts +0 -16
- package/dist/splash/panels/PanelIdentifier.d.ts.map +0 -1
- package/dist/splash/panels/PanelIdentifier.js +0 -19
- package/dist/splash/panels/PanelIdentifier.js.map +0 -1
- package/dist/splash/util/DragAndDrop.js +0 -243
- package/dist/splash/util/DragAndDrop.js.map +0 -1
- package/dist/splash/util/getColumnAreas.js +0 -19
- package/dist/splash/util/getColumnAreas.js.map +0 -1
- package/dist/splash/util/isCursorInArea.js +0 -13
- package/dist/splash/util/isCursorInArea.js.map +0 -1
- package/dist/types.d.ts +0 -27
- package/dist/types.d.ts.map +0 -1
- package/dist/util.d.ts +0 -8
- package/dist/util.d.ts.map +0 -1
- package/dist/util.js +0 -30
- package/dist/util.js.map +0 -1
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import { spacing, responsive, getSpacingLayouts } from '@apia/theme';
|
|
2
|
-
|
|
3
|
-
const defaultPanelWrapperStyles = {
|
|
4
|
-
pb: spacing(6),
|
|
5
|
-
"&:last-child": {
|
|
6
|
-
pb: 0
|
|
7
|
-
},
|
|
8
|
-
".panel__container": {
|
|
9
|
-
background: "palette.background.paper",
|
|
10
|
-
border: "1px solid",
|
|
11
|
-
borderColor: "palette.gray.800",
|
|
12
|
-
display: "flex",
|
|
13
|
-
flexDirection: "column",
|
|
14
|
-
borderRadius: "panel",
|
|
15
|
-
boxShadow: "panel"
|
|
16
|
-
},
|
|
17
|
-
".panel__header": {
|
|
18
|
-
alignItems: "center",
|
|
19
|
-
cursor: "grab",
|
|
20
|
-
display: "flex",
|
|
21
|
-
flexWrap: "nowrap",
|
|
22
|
-
fontWeight: "bold",
|
|
23
|
-
justifyContent: "space-between",
|
|
24
|
-
maxWidth: "100%",
|
|
25
|
-
overflow: "hidden",
|
|
26
|
-
backgroundColor: "palette.secondary.light",
|
|
27
|
-
borderBottomRightRadius: "0px !important",
|
|
28
|
-
borderBottomLeftRadius: "0px !important",
|
|
29
|
-
pl: 4,
|
|
30
|
-
py: 4,
|
|
31
|
-
borderRadius: "panel",
|
|
32
|
-
".panel__header__left": {
|
|
33
|
-
alignItems: "center",
|
|
34
|
-
display: "flex",
|
|
35
|
-
gap: 2,
|
|
36
|
-
svg: {
|
|
37
|
-
color: "palette.error.dark"
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
"& > *": {
|
|
41
|
-
flexShrink: 0
|
|
42
|
-
},
|
|
43
|
-
".panel__header__buttons": {
|
|
44
|
-
alignSelf: "end",
|
|
45
|
-
display: "flex",
|
|
46
|
-
flexGrow: 1,
|
|
47
|
-
fontWeight: "normal",
|
|
48
|
-
gap: 2,
|
|
49
|
-
justifyContent: "end",
|
|
50
|
-
right: 0,
|
|
51
|
-
background: "transparent",
|
|
52
|
-
pr: 3,
|
|
53
|
-
opacity: responsive({ 0: 1, 3: 0 }),
|
|
54
|
-
alignItems: "center",
|
|
55
|
-
pl: 3,
|
|
56
|
-
height: "24px",
|
|
57
|
-
button: {
|
|
58
|
-
width: "30px",
|
|
59
|
-
height: "30px"
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
".panel__content": {
|
|
64
|
-
...getSpacingLayouts()
|
|
65
|
-
},
|
|
66
|
-
".panel__container:hover, .panel__container:focus, .panel__container:focus-within, .panel__container.isLoading": {
|
|
67
|
-
".panel__header__buttons, .lastUpdate__wrapper": {
|
|
68
|
-
opacity: responsive({ 0: 1 })
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
".panel__footer": {
|
|
72
|
-
display: "flex",
|
|
73
|
-
justifyContent: "space-between",
|
|
74
|
-
gap: spacing(3),
|
|
75
|
-
background: "palette.secondary.light",
|
|
76
|
-
px: 4,
|
|
77
|
-
py: 3,
|
|
78
|
-
color: "palette.text.primary",
|
|
79
|
-
borderRadius: "panel",
|
|
80
|
-
borderTopRightRadius: "0px",
|
|
81
|
-
borderTopLeftRadius: "0px",
|
|
82
|
-
overflow: "hidden",
|
|
83
|
-
alignItems: "center"
|
|
84
|
-
},
|
|
85
|
-
".panel__iconButton, .lastUpdate__wrapper": {
|
|
86
|
-
transition: "opacity 300ms"
|
|
87
|
-
},
|
|
88
|
-
".lastUpdate__wrapper": {
|
|
89
|
-
fontSize: 14,
|
|
90
|
-
opacity: 0,
|
|
91
|
-
flexShrink: 0
|
|
92
|
-
},
|
|
93
|
-
".panel__footer__text": {
|
|
94
|
-
overflow: "hidden",
|
|
95
|
-
flexShrink: 1
|
|
96
|
-
},
|
|
97
|
-
"span.panel__title": {
|
|
98
|
-
flexShrink: "1 !important"
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
export { defaultPanelWrapperStyles };
|
|
103
|
-
//# sourceMappingURL=defaultPanelWrapperStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"defaultPanelWrapperStyles.js","sources":["../../../../src/splash/panels/DefaultPanelWrapper/defaultPanelWrapperStyles.ts"],"sourcesContent":["import {\r\n responsive,\r\n spacing,\r\n ThemeUICSSObject,\r\n getSpacingLayouts,\r\n} from '@apia/theme';\r\n\r\nexport const defaultPanelWrapperStyles: ThemeUICSSObject = {\r\n pb: spacing(6),\r\n\r\n '&:last-child': {\r\n pb: 0,\r\n },\r\n '.panel__container': {\r\n background: 'palette.background.paper',\r\n border: '1px solid',\r\n borderColor: 'palette.gray.800',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n borderRadius: 'panel',\r\n boxShadow: 'panel',\r\n },\r\n\r\n '.panel__header': {\r\n alignItems: 'center',\r\n cursor: 'grab',\r\n display: 'flex',\r\n flexWrap: 'nowrap',\r\n fontWeight: 'bold',\r\n justifyContent: 'space-between',\r\n maxWidth: '100%',\r\n overflow: 'hidden',\r\n backgroundColor: 'palette.secondary.light',\r\n borderBottomRightRadius: '0px !important',\r\n borderBottomLeftRadius: '0px !important',\r\n pl: 4,\r\n py: 4,\r\n\r\n borderRadius: 'panel',\r\n\r\n '.panel__header__left': {\r\n alignItems: 'center',\r\n display: 'flex',\r\n gap: 2,\r\n\r\n svg: {\r\n color: 'palette.error.dark',\r\n },\r\n },\r\n\r\n '& > *': {\r\n flexShrink: 0,\r\n },\r\n\r\n '.panel__header__buttons': {\r\n alignSelf: 'end',\r\n display: 'flex',\r\n flexGrow: 1,\r\n fontWeight: 'normal',\r\n gap: 2,\r\n justifyContent: 'end',\r\n right: 0,\r\n background: 'transparent',\r\n pr: 3,\r\n opacity: responsive({ 0: 1, 3: 0 }),\r\n alignItems: 'center',\r\n pl: 3,\r\n height: '24px',\r\n button: {\r\n width: '30px',\r\n height: '30px',\r\n },\r\n },\r\n },\r\n\r\n '.panel__content': {\r\n ...getSpacingLayouts(),\r\n },\r\n\r\n '.panel__container:hover, .panel__container:focus, .panel__container:focus-within, .panel__container.isLoading':\r\n {\r\n '.panel__header__buttons, .lastUpdate__wrapper': {\r\n opacity: responsive({ 0: 1 }),\r\n },\r\n },\r\n\r\n '.panel__footer': {\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n gap: spacing(3),\r\n background: 'palette.secondary.light',\r\n px: 4,\r\n py: 3,\r\n color: 'palette.text.primary',\r\n borderRadius: 'panel',\r\n borderTopRightRadius: '0px',\r\n borderTopLeftRadius: '0px',\r\n overflow: 'hidden',\r\n alignItems: 'center',\r\n },\r\n\r\n '.panel__iconButton, .lastUpdate__wrapper': {\r\n transition: 'opacity 300ms',\r\n },\r\n\r\n '.lastUpdate__wrapper': {\r\n fontSize: 14,\r\n opacity: 0,\r\n flexShrink: 0,\r\n },\r\n\r\n '.panel__footer__text': {\r\n overflow: 'hidden',\r\n flexShrink: 1,\r\n },\r\n\r\n 'span.panel__title': {\r\n flexShrink: '1 !important',\r\n },\r\n};\r\n"],"names":[],"mappings":";;AAOO,MAAM,yBAA8C,GAAA;AAAA,EACzD,EAAA,EAAI,QAAQ,CAAC,CAAA;AAAA,EAEb,cAAgB,EAAA;AAAA,IACd,EAAI,EAAA,CAAA;AAAA,GACN;AAAA,EACA,mBAAqB,EAAA;AAAA,IACnB,UAAY,EAAA,0BAAA;AAAA,IACZ,MAAQ,EAAA,WAAA;AAAA,IACR,WAAa,EAAA,kBAAA;AAAA,IACb,OAAS,EAAA,MAAA;AAAA,IACT,aAAe,EAAA,QAAA;AAAA,IACf,YAAc,EAAA,OAAA;AAAA,IACd,SAAW,EAAA,OAAA;AAAA,GACb;AAAA,EAEA,gBAAkB,EAAA;AAAA,IAChB,UAAY,EAAA,QAAA;AAAA,IACZ,MAAQ,EAAA,MAAA;AAAA,IACR,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,QAAA;AAAA,IACV,UAAY,EAAA,MAAA;AAAA,IACZ,cAAgB,EAAA,eAAA;AAAA,IAChB,QAAU,EAAA,MAAA;AAAA,IACV,QAAU,EAAA,QAAA;AAAA,IACV,eAAiB,EAAA,yBAAA;AAAA,IACjB,uBAAyB,EAAA,gBAAA;AAAA,IACzB,sBAAwB,EAAA,gBAAA;AAAA,IACxB,EAAI,EAAA,CAAA;AAAA,IACJ,EAAI,EAAA,CAAA;AAAA,IAEJ,YAAc,EAAA,OAAA;AAAA,IAEd,sBAAwB,EAAA;AAAA,MACtB,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,CAAA;AAAA,MAEL,GAAK,EAAA;AAAA,QACH,KAAO,EAAA,oBAAA;AAAA,OACT;AAAA,KACF;AAAA,IAEA,OAAS,EAAA;AAAA,MACP,UAAY,EAAA,CAAA;AAAA,KACd;AAAA,IAEA,yBAA2B,EAAA;AAAA,MACzB,SAAW,EAAA,KAAA;AAAA,MACX,OAAS,EAAA,MAAA;AAAA,MACT,QAAU,EAAA,CAAA;AAAA,MACV,UAAY,EAAA,QAAA;AAAA,MACZ,GAAK,EAAA,CAAA;AAAA,MACL,cAAgB,EAAA,KAAA;AAAA,MAChB,KAAO,EAAA,CAAA;AAAA,MACP,UAAY,EAAA,aAAA;AAAA,MACZ,EAAI,EAAA,CAAA;AAAA,MACJ,SAAS,UAAW,CAAA,EAAE,GAAG,CAAG,EAAA,CAAA,EAAG,GAAG,CAAA;AAAA,MAClC,UAAY,EAAA,QAAA;AAAA,MACZ,EAAI,EAAA,CAAA;AAAA,MACJ,MAAQ,EAAA,MAAA;AAAA,MACR,MAAQ,EAAA;AAAA,QACN,KAAO,EAAA,MAAA;AAAA,QACP,MAAQ,EAAA,MAAA;AAAA,OACV;AAAA,KACF;AAAA,GACF;AAAA,EAEA,iBAAmB,EAAA;AAAA,IACjB,GAAG,iBAAkB,EAAA;AAAA,GACvB;AAAA,EAEA,+GACE,EAAA;AAAA,IACE,+CAAiD,EAAA;AAAA,MAC/C,OAAS,EAAA,UAAA,CAAW,EAAE,CAAA,EAAG,GAAG,CAAA;AAAA,KAC9B;AAAA,GACF;AAAA,EAEF,gBAAkB,EAAA;AAAA,IAChB,OAAS,EAAA,MAAA;AAAA,IACT,cAAgB,EAAA,eAAA;AAAA,IAChB,GAAA,EAAK,QAAQ,CAAC,CAAA;AAAA,IACd,UAAY,EAAA,yBAAA;AAAA,IACZ,EAAI,EAAA,CAAA;AAAA,IACJ,EAAI,EAAA,CAAA;AAAA,IACJ,KAAO,EAAA,sBAAA;AAAA,IACP,YAAc,EAAA,OAAA;AAAA,IACd,oBAAsB,EAAA,KAAA;AAAA,IACtB,mBAAqB,EAAA,KAAA;AAAA,IACrB,QAAU,EAAA,QAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,GACd;AAAA,EAEA,0CAA4C,EAAA;AAAA,IAC1C,UAAY,EAAA,eAAA;AAAA,GACd;AAAA,EAEA,sBAAwB,EAAA;AAAA,IACtB,QAAU,EAAA,EAAA;AAAA,IACV,OAAS,EAAA,CAAA;AAAA,IACT,UAAY,EAAA,CAAA;AAAA,GACd;AAAA,EAEA,sBAAwB,EAAA;AAAA,IACtB,QAAU,EAAA,QAAA;AAAA,IACV,UAAY,EAAA,CAAA;AAAA,GACd;AAAA,EAEA,mBAAqB,EAAA;AAAA,IACnB,UAAY,EAAA,cAAA;AAAA,GACd;AACF;;;;"}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from '@apia/theme/jsx-runtime';
|
|
2
|
-
import { makeStyledComponent } from '@apia/theme';
|
|
3
|
-
import { defaultPanelWrapperStyles } from './defaultPanelWrapperStyles.js';
|
|
4
|
-
import { usePanelIdentity } from '../../../common/usePanelIdentity.js';
|
|
5
|
-
import { NetworkState } from './NetworkState.js';
|
|
6
|
-
import { PanelButtons } from './PanelButtons.js';
|
|
7
|
-
import { usePanelIsLoading } from '../../../actions/usePanelIsLoading.js';
|
|
8
|
-
import { useMakePanelContext, PanelContextProvider } from '../PanelContext/index.js';
|
|
9
|
-
import { PanelFooter } from '../PanelContext/PanelFooter.js';
|
|
10
|
-
import { usePanelTitleDescription } from '../../../panelsUtil/usePanelTitleAction.js';
|
|
11
|
-
|
|
12
|
-
const DefaultPanelWrapper = makeStyledComponent(
|
|
13
|
-
"DefaultPanelWrapper",
|
|
14
|
-
"layout.common.dashboards.panel",
|
|
15
|
-
defaultPanelWrapperStyles,
|
|
16
|
-
({ children, ...props }) => {
|
|
17
|
-
const { panelId, panelName, panelType } = usePanelIdentity();
|
|
18
|
-
const { contextValue, title, ref, ...footerProps } = useMakePanelContext(
|
|
19
|
-
panelId,
|
|
20
|
-
props
|
|
21
|
-
);
|
|
22
|
-
const panelTitleDescription = usePanelTitleDescription();
|
|
23
|
-
const showHeader = props.showTitle || props.isConfigurable || props.isRefreshable;
|
|
24
|
-
const isLoading = usePanelIsLoading();
|
|
25
|
-
return /* @__PURE__ */ jsx(PanelContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
|
|
26
|
-
"div",
|
|
27
|
-
{
|
|
28
|
-
ref,
|
|
29
|
-
className: `panel__container ${isLoading ? "isLoading" : ""}`,
|
|
30
|
-
"data-panelname": panelName,
|
|
31
|
-
"data-paneltype": panelType,
|
|
32
|
-
"data-panelid": panelId,
|
|
33
|
-
children: [
|
|
34
|
-
showHeader && /* @__PURE__ */ jsxs("div", { draggable: props.canMove, className: `panel__header`, children: [
|
|
35
|
-
/* @__PURE__ */ jsxs("div", { className: "panel__header__left", children: [
|
|
36
|
-
props.showTitle && /* @__PURE__ */ jsx(
|
|
37
|
-
"span",
|
|
38
|
-
{
|
|
39
|
-
className: "panel__title",
|
|
40
|
-
title: panelTitleDescription ?? title,
|
|
41
|
-
children: title
|
|
42
|
-
}
|
|
43
|
-
),
|
|
44
|
-
/* @__PURE__ */ jsx(NetworkState, { title })
|
|
45
|
-
] }),
|
|
46
|
-
/* @__PURE__ */ jsx("div", { className: `panel__header__buttons`, children: /* @__PURE__ */ jsx(PanelButtons, { ...props, id: panelId }) })
|
|
47
|
-
] }),
|
|
48
|
-
/* @__PURE__ */ jsx("div", { className: "panel__content", children }),
|
|
49
|
-
/* @__PURE__ */ jsx(PanelFooter, { isRefreshable: props.isRefreshable, ...footerProps })
|
|
50
|
-
]
|
|
51
|
-
}
|
|
52
|
-
) });
|
|
53
|
-
}
|
|
54
|
-
);
|
|
55
|
-
|
|
56
|
-
export { DefaultPanelWrapper };
|
|
57
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/splash/panels/DefaultPanelWrapper/index.tsx"],"sourcesContent":["import { makeStyledComponent } from '@apia/theme';\r\nimport { PanelContainer } from '../../../types';\r\nimport { defaultPanelWrapperStyles } from './defaultPanelWrapperStyles';\r\nimport { usePanelIdentity } from '../../../common';\r\nimport { NetworkState } from './NetworkState';\r\nimport { PanelButtons } from './PanelButtons';\r\nimport { usePanelIsLoading } from '../../../actions';\r\nimport { PanelContextProvider, useMakePanelContext } from '../PanelContext';\r\nimport { PanelFooter } from '../PanelContext/PanelFooter';\r\nimport { usePanelTitleDescription } from '../../../panelsUtil/usePanelTitleAction';\r\n\r\nexport const DefaultPanelWrapper: PanelContainer = makeStyledComponent(\r\n 'DefaultPanelWrapper',\r\n 'layout.common.dashboards.panel',\r\n defaultPanelWrapperStyles,\r\n ({ children, ...props }) => {\r\n const { panelId, panelName, panelType } = usePanelIdentity();\r\n\r\n const { contextValue, title, ref, ...footerProps } = useMakePanelContext(\r\n panelId,\r\n props,\r\n );\r\n\r\n const panelTitleDescription = usePanelTitleDescription();\r\n\r\n const showHeader =\r\n props.showTitle || props.isConfigurable || props.isRefreshable;\r\n const isLoading = usePanelIsLoading();\r\n return (\r\n <PanelContextProvider value={contextValue}>\r\n <div\r\n ref={ref}\r\n className={`panel__container ${isLoading ? 'isLoading' : ''}`}\r\n data-panelname={panelName}\r\n data-paneltype={panelType}\r\n data-panelid={panelId}\r\n >\r\n {showHeader && (\r\n <div draggable={props.canMove} className={`panel__header`}>\r\n <div className=\"panel__header__left\">\r\n {props.showTitle && (\r\n <span\r\n className=\"panel__title\"\r\n title={panelTitleDescription ?? title}\r\n >\r\n {title}\r\n </span>\r\n )}\r\n <NetworkState title={title} />\r\n </div>\r\n <div className={`panel__header__buttons`}>\r\n <PanelButtons {...props} id={panelId} />\r\n </div>\r\n </div>\r\n )}\r\n <div className=\"panel__content\">{children}</div>\r\n <PanelFooter isRefreshable={props.isRefreshable} {...footerProps} />\r\n </div>\r\n </PanelContextProvider>\r\n );\r\n },\r\n);\r\n"],"names":[],"mappings":";;;;;;;;;;;AAWO,MAAM,mBAAsC,GAAA,mBAAA;AAAA,EACjD,qBAAA;AAAA,EACA,gCAAA;AAAA,EACA,yBAAA;AAAA,EACA,CAAC,EAAE,QAAU,EAAA,GAAG,OAAY,KAAA;AAC1B,IAAA,MAAM,EAAE,OAAA,EAAS,SAAW,EAAA,SAAA,KAAc,gBAAiB,EAAA,CAAA;AAE3D,IAAA,MAAM,EAAE,YAAc,EAAA,KAAA,EAAO,GAAK,EAAA,GAAG,aAAgB,GAAA,mBAAA;AAAA,MACnD,OAAA;AAAA,MACA,KAAA;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,wBAAwB,wBAAyB,EAAA,CAAA;AAEvD,IAAA,MAAM,UACJ,GAAA,KAAA,CAAM,SAAa,IAAA,KAAA,CAAM,kBAAkB,KAAM,CAAA,aAAA,CAAA;AACnD,IAAA,MAAM,YAAY,iBAAkB,EAAA,CAAA;AACpC,IACE,uBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC3B,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,CAAA,iBAAA,EAAoB,SAAY,GAAA,WAAA,GAAc,EAAE,CAAA,CAAA;AAAA,QAC3D,gBAAgB,EAAA,SAAA;AAAA,QAChB,gBAAgB,EAAA,SAAA;AAAA,QAChB,cAAc,EAAA,OAAA;AAAA,QAEb,QAAA,EAAA;AAAA,UAAA,UAAA,yBACE,KAAI,EAAA,EAAA,SAAA,EAAW,KAAM,CAAA,OAAA,EAAS,WAAW,CACxC,aAAA,CAAA,EAAA,QAAA,EAAA;AAAA,4BAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,qBACZ,EAAA,QAAA,EAAA;AAAA,cAAA,KAAA,CAAM,SACL,oBAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAU,EAAA,cAAA;AAAA,kBACV,OAAO,qBAAyB,IAAA,KAAA;AAAA,kBAE/B,QAAA,EAAA,KAAA;AAAA,iBAAA;AAAA,eACH;AAAA,8BAEF,GAAA,CAAC,gBAAa,KAAc,EAAA,CAAA;AAAA,aAC9B,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CACd,sBAAA,CAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,gBAAc,GAAG,KAAA,EAAO,EAAI,EAAA,OAAA,EAAS,CACxC,EAAA,CAAA;AAAA,WACF,EAAA,CAAA;AAAA,0BAED,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,gBAAA,EAAkB,QAAS,EAAA,CAAA;AAAA,8BACzC,WAAY,EAAA,EAAA,aAAA,EAAe,KAAM,CAAA,aAAA,EAAgB,GAAG,WAAa,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KAEtE,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LandingPagePanelWrapper.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from '@apia/theme/jsx-runtime';
|
|
2
|
-
import { NetworkState } from './DefaultPanelWrapper/NetworkState.js';
|
|
3
|
-
import { usePanelIdentity } from '../../common/usePanelIdentity.js';
|
|
4
|
-
import { useMakePanelContext, PanelContextProvider } from './PanelContext/index.js';
|
|
5
|
-
import { PanelFooter } from './PanelContext/PanelFooter.js';
|
|
6
|
-
import { usePanelTitleAction, usePanelTitleDescription } from '../../panelsUtil/usePanelTitleAction.js';
|
|
7
|
-
import { useDashboardContext } from '../../dashboard/DashboardContext.js';
|
|
8
|
-
|
|
9
|
-
const LandingPagePanelWrapper = ({
|
|
10
|
-
children,
|
|
11
|
-
...props
|
|
12
|
-
}) => {
|
|
13
|
-
const { panelId, panelName, panelType } = usePanelIdentity();
|
|
14
|
-
const { contextValue, title, ref, ...footerProps } = useMakePanelContext(
|
|
15
|
-
panelId,
|
|
16
|
-
props
|
|
17
|
-
);
|
|
18
|
-
const panelTitleAction = usePanelTitleAction();
|
|
19
|
-
const panelTitleDescription = usePanelTitleDescription();
|
|
20
|
-
const dashboard = useDashboardContext();
|
|
21
|
-
if (dashboard.getPanel(panelId).props.hasRss)
|
|
22
|
-
console.log(dashboard.getPanel(panelId).props);
|
|
23
|
-
return /* @__PURE__ */ jsx(PanelContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(
|
|
24
|
-
"div",
|
|
25
|
-
{
|
|
26
|
-
className: "panel__container",
|
|
27
|
-
"data-panelname": panelName,
|
|
28
|
-
"data-paneltype": panelType,
|
|
29
|
-
"data-panelid": panelId,
|
|
30
|
-
ref,
|
|
31
|
-
children: [
|
|
32
|
-
/* @__PURE__ */ jsx("div", { className: "panel__header", children: /* @__PURE__ */ jsxs("div", { className: "panel__header__left", children: [
|
|
33
|
-
props.showTitle && /* @__PURE__ */ jsx("span", { className: "panel__title", children: panelTitleAction ? /* @__PURE__ */ jsx(
|
|
34
|
-
"a",
|
|
35
|
-
{
|
|
36
|
-
title: panelTitleDescription,
|
|
37
|
-
className: "panel__title__link",
|
|
38
|
-
href: panelTitleAction,
|
|
39
|
-
children: title
|
|
40
|
-
}
|
|
41
|
-
) : title }),
|
|
42
|
-
/* @__PURE__ */ jsx(NetworkState, { title })
|
|
43
|
-
] }) }),
|
|
44
|
-
/* @__PURE__ */ jsx("div", { className: "panel__content", children }),
|
|
45
|
-
/* @__PURE__ */ jsx(PanelFooter, { isRefreshable: false, ...footerProps })
|
|
46
|
-
]
|
|
47
|
-
}
|
|
48
|
-
) });
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
export { LandingPagePanelWrapper };
|
|
52
|
-
//# sourceMappingURL=LandingPagePanelWrapper.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LandingPagePanelWrapper.js","sources":["../../../src/splash/panels/LandingPagePanelWrapper.tsx"],"sourcesContent":["import { PanelContainer } from '../../types';\r\nimport { NetworkState } from './DefaultPanelWrapper/NetworkState';\r\nimport { usePanelIdentity } from '../../common';\r\nimport { PanelContextProvider, useMakePanelContext } from './PanelContext';\r\nimport { PanelFooter } from './PanelContext/PanelFooter';\r\nimport {\r\n usePanelTitleAction,\r\n usePanelTitleDescription,\r\n} from '../../panelsUtil/usePanelTitleAction';\r\nimport { useDashboardContext } from '../../dashboard/DashboardContext';\r\n\r\nexport const LandingPagePanelWrapper: PanelContainer = ({\r\n children,\r\n ...props\r\n}) => {\r\n const { panelId, panelName, panelType } = usePanelIdentity();\r\n\r\n const { contextValue, title, ref, ...footerProps } = useMakePanelContext(\r\n panelId,\r\n props,\r\n );\r\n\r\n const panelTitleAction = usePanelTitleAction();\r\n const panelTitleDescription = usePanelTitleDescription();\r\n\r\n const dashboard = useDashboardContext();\r\n\r\n if (dashboard.getPanel(panelId).props.hasRss)\r\n console.log(dashboard.getPanel(panelId).props);\r\n\r\n return (\r\n <PanelContextProvider value={contextValue}>\r\n <div\r\n className=\"panel__container\"\r\n data-panelname={panelName}\r\n data-paneltype={panelType}\r\n data-panelid={panelId}\r\n ref={ref}\r\n >\r\n <div className=\"panel__header\">\r\n <div className=\"panel__header__left\">\r\n {props.showTitle && (\r\n <span className=\"panel__title\">\r\n {panelTitleAction ? (\r\n <a\r\n title={panelTitleDescription}\r\n className=\"panel__title__link\"\r\n href={panelTitleAction}\r\n >\r\n {title}\r\n </a>\r\n ) : (\r\n title\r\n )}\r\n </span>\r\n )}\r\n <NetworkState title={title} />\r\n </div>\r\n </div>\r\n <div className=\"panel__content\">{children}</div>\r\n <PanelFooter isRefreshable={false} {...footerProps} />\r\n </div>\r\n </PanelContextProvider>\r\n );\r\n};\r\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,0BAA0C,CAAC;AAAA,EACtD,QAAA;AAAA,EACA,GAAG,KAAA;AACL,CAAM,KAAA;AACJ,EAAA,MAAM,EAAE,OAAA,EAAS,SAAW,EAAA,SAAA,KAAc,gBAAiB,EAAA,CAAA;AAE3D,EAAA,MAAM,EAAE,YAAc,EAAA,KAAA,EAAO,GAAK,EAAA,GAAG,aAAgB,GAAA,mBAAA;AAAA,IACnD,OAAA;AAAA,IACA,KAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,mBAAmB,mBAAoB,EAAA,CAAA;AAC7C,EAAA,MAAM,wBAAwB,wBAAyB,EAAA,CAAA;AAEvD,EAAA,MAAM,YAAY,mBAAoB,EAAA,CAAA;AAEtC,EAAA,IAAI,SAAU,CAAA,QAAA,CAAS,OAAO,CAAA,CAAE,KAAM,CAAA,MAAA;AACpC,IAAA,OAAA,CAAQ,GAAI,CAAA,SAAA,CAAU,QAAS,CAAA,OAAO,EAAE,KAAK,CAAA,CAAA;AAE/C,EACE,uBAAA,GAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC3B,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,kBAAA;AAAA,MACV,gBAAgB,EAAA,SAAA;AAAA,MAChB,gBAAgB,EAAA,SAAA;AAAA,MAChB,cAAc,EAAA,OAAA;AAAA,MACd,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,SAAU,EAAA,eAAA,EACb,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,qBACZ,EAAA,QAAA,EAAA;AAAA,UAAA,KAAA,CAAM,SACL,oBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,gBACb,QACC,EAAA,gBAAA,mBAAA,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,KAAO,EAAA,qBAAA;AAAA,cACP,SAAU,EAAA,oBAAA;AAAA,cACV,IAAM,EAAA,gBAAA;AAAA,cAEL,QAAA,EAAA,KAAA;AAAA,aAAA;AAAA,cAGH,KAEJ,EAAA,CAAA;AAAA,0BAEF,GAAA,CAAC,gBAAa,KAAc,EAAA,CAAA;AAAA,SAAA,EAC9B,CACF,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,gBAAA,EAAkB,QAAS,EAAA,CAAA;AAAA,wBACzC,GAAA,CAAA,WAAA,EAAA,EAAY,aAAe,EAAA,KAAA,EAAQ,GAAG,WAAa,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAExD,EAAA,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { jsx, Fragment, jsxs } from '@apia/theme/jsx-runtime';
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { usePanelActions } from '../../../actions/usePanelActions.js';
|
|
4
|
-
import { AutoEllipsis, SimpleButton } from '@apia/components';
|
|
5
|
-
import { Box } from '@apia/theme';
|
|
6
|
-
|
|
7
|
-
const PanelFooter = ({
|
|
8
|
-
isRefreshable,
|
|
9
|
-
footer,
|
|
10
|
-
handleFooterClick
|
|
11
|
-
}) => {
|
|
12
|
-
const [lastUpdate, setLastUpdate] = useState(0);
|
|
13
|
-
usePanelActions({
|
|
14
|
-
refresh() {
|
|
15
|
-
setLastUpdate(Date.now());
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
return /* @__PURE__ */ jsx(Fragment, { children: (isRefreshable || footer) && /* @__PURE__ */ jsxs("div", { className: "panel__footer", children: [
|
|
19
|
-
footer && (!footer.action || footer.actionBehavior === "DO_NOTHING") && /* @__PURE__ */ jsx("div", { className: "panel__footer__text", children: /* @__PURE__ */ jsx(
|
|
20
|
-
AutoEllipsis,
|
|
21
|
-
{
|
|
22
|
-
overrideStyles: (el) => {
|
|
23
|
-
const styles = window.getComputedStyle(
|
|
24
|
-
el.closest(".panel__footer")
|
|
25
|
-
);
|
|
26
|
-
const width = Number.parseInt(styles.width, 10);
|
|
27
|
-
const padding = Number.parseInt(styles.paddingLeft, 10) + Number.parseInt(styles.paddingRight, 10);
|
|
28
|
-
return {
|
|
29
|
-
width: `${width - padding}px`
|
|
30
|
-
};
|
|
31
|
-
},
|
|
32
|
-
children: footer.text
|
|
33
|
-
}
|
|
34
|
-
) }),
|
|
35
|
-
footer?.action && footer.actionBehavior !== "DO_NOTHING" && /* @__PURE__ */ jsx(
|
|
36
|
-
SimpleButton,
|
|
37
|
-
{
|
|
38
|
-
onClick: handleFooterClick,
|
|
39
|
-
onDoubleClick: handleFooterClick,
|
|
40
|
-
variant: "link",
|
|
41
|
-
className: "panel__footer__text",
|
|
42
|
-
children: /* @__PURE__ */ jsx(
|
|
43
|
-
AutoEllipsis,
|
|
44
|
-
{
|
|
45
|
-
overrideStyles: (el) => {
|
|
46
|
-
const styles = window.getComputedStyle(
|
|
47
|
-
el.closest(".panel__footer")
|
|
48
|
-
);
|
|
49
|
-
const width = Number.parseInt(styles.width, 10);
|
|
50
|
-
const padding = Number.parseInt(styles.paddingLeft, 10) + Number.parseInt(styles.paddingRight, 10);
|
|
51
|
-
return {
|
|
52
|
-
width: `${width - padding}px`
|
|
53
|
-
};
|
|
54
|
-
},
|
|
55
|
-
children: footer.text
|
|
56
|
-
}
|
|
57
|
-
)
|
|
58
|
-
}
|
|
59
|
-
),
|
|
60
|
-
!footer && /* @__PURE__ */ jsx("div", {}),
|
|
61
|
-
lastUpdate > 0 && /* @__PURE__ */ jsxs(Box, { className: "lastUpdate__wrapper", children: [
|
|
62
|
-
new Date(lastUpdate).toLocaleDateString(),
|
|
63
|
-
" ",
|
|
64
|
-
new Date(lastUpdate).toLocaleTimeString()
|
|
65
|
-
] })
|
|
66
|
-
] }) });
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
export { PanelFooter };
|
|
70
|
-
//# sourceMappingURL=PanelFooter.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PanelFooter.js","sources":["../../../../src/splash/panels/PanelContext/PanelFooter.tsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { usePanelActions } from '../../../actions';\r\nimport { TUsePanelFooter } from './usePanelFooter';\r\nimport { AutoEllipsis, SimpleButton } from '@apia/components';\r\nimport { Box } from '@apia/theme';\r\n\r\nexport const PanelFooter = ({\r\n isRefreshable,\r\n footer,\r\n handleFooterClick,\r\n}: TUsePanelFooter & { isRefreshable: boolean }) => {\r\n const [lastUpdate, setLastUpdate] = useState<number>(0);\r\n\r\n usePanelActions({\r\n refresh() {\r\n setLastUpdate(Date.now());\r\n },\r\n });\r\n\r\n return (\r\n <>\r\n {(isRefreshable || footer) && (\r\n <div className=\"panel__footer\">\r\n {footer &&\r\n (!footer.action || footer.actionBehavior === 'DO_NOTHING') && (\r\n <div className=\"panel__footer__text\">\r\n <AutoEllipsis\r\n overrideStyles={(el) => {\r\n const styles = window.getComputedStyle(\r\n el.closest('.panel__footer') as HTMLElement,\r\n );\r\n const width = Number.parseInt(styles.width, 10);\r\n const padding =\r\n Number.parseInt(styles.paddingLeft, 10) +\r\n Number.parseInt(styles.paddingRight, 10);\r\n return {\r\n width: `${width - padding}px`,\r\n };\r\n }}\r\n >\r\n {footer.text}\r\n </AutoEllipsis>\r\n </div>\r\n )}\r\n {footer?.action && footer.actionBehavior !== 'DO_NOTHING' && (\r\n <SimpleButton\r\n onClick={handleFooterClick}\r\n onDoubleClick={handleFooterClick}\r\n variant=\"link\"\r\n className=\"panel__footer__text\"\r\n >\r\n <AutoEllipsis\r\n overrideStyles={(el) => {\r\n const styles = window.getComputedStyle(\r\n el.closest('.panel__footer') as HTMLElement,\r\n );\r\n const width = Number.parseInt(styles.width, 10);\r\n const padding =\r\n Number.parseInt(styles.paddingLeft, 10) +\r\n Number.parseInt(styles.paddingRight, 10);\r\n return {\r\n width: `${width - padding}px`,\r\n };\r\n }}\r\n >\r\n {footer.text}\r\n </AutoEllipsis>\r\n </SimpleButton>\r\n )}\r\n {!footer && <div></div>}\r\n {lastUpdate > 0 && (\r\n <Box className=\"lastUpdate__wrapper\">\r\n {new Date(lastUpdate).toLocaleDateString()}{' '}\r\n {new Date(lastUpdate).toLocaleTimeString()}\r\n </Box>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n );\r\n};\r\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,cAAc,CAAC;AAAA,EAC1B,aAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAA;AACF,CAAoD,KAAA;AAClD,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAiB,CAAC,CAAA,CAAA;AAEtD,EAAgB,eAAA,CAAA;AAAA,IACd,OAAU,GAAA;AACR,MAAc,aAAA,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAAA,KAC1B;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uCAEM,QAAiB,EAAA,CAAA,aAAA,IAAA,MAAA,qBAChB,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,eACZ,EAAA,QAAA,EAAA;AAAA,IACE,MAAA,KAAA,CAAC,OAAO,MAAU,IAAA,MAAA,CAAO,mBAAmB,YAC3C,CAAA,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qBACb,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,cAAA,EAAgB,CAAC,EAAO,KAAA;AACtB,UAAA,MAAM,SAAS,MAAO,CAAA,gBAAA;AAAA,YACpB,EAAA,CAAG,QAAQ,gBAAgB,CAAA;AAAA,WAC7B,CAAA;AACA,UAAA,MAAM,KAAQ,GAAA,MAAA,CAAO,QAAS,CAAA,MAAA,CAAO,OAAO,EAAE,CAAA,CAAA;AAC9C,UAAM,MAAA,OAAA,GACJ,MAAO,CAAA,QAAA,CAAS,MAAO,CAAA,WAAA,EAAa,EAAE,CAAA,GACtC,MAAO,CAAA,QAAA,CAAS,MAAO,CAAA,YAAA,EAAc,EAAE,CAAA,CAAA;AACzC,UAAO,OAAA;AAAA,YACL,KAAA,EAAO,CAAG,EAAA,KAAA,GAAQ,OAAO,CAAA,EAAA,CAAA;AAAA,WAC3B,CAAA;AAAA,SACF;AAAA,QAEC,QAAO,EAAA,MAAA,CAAA,IAAA;AAAA,OAAA;AAAA,KAEZ,EAAA,CAAA;AAAA,IAEH,MAAQ,EAAA,MAAA,IAAU,MAAO,CAAA,cAAA,KAAmB,YAC3C,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,iBAAA;AAAA,QACT,aAAe,EAAA,iBAAA;AAAA,QACf,OAAQ,EAAA,MAAA;AAAA,QACR,SAAU,EAAA,qBAAA;AAAA,QAEV,QAAA,kBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,cAAA,EAAgB,CAAC,EAAO,KAAA;AACtB,cAAA,MAAM,SAAS,MAAO,CAAA,gBAAA;AAAA,gBACpB,EAAA,CAAG,QAAQ,gBAAgB,CAAA;AAAA,eAC7B,CAAA;AACA,cAAA,MAAM,KAAQ,GAAA,MAAA,CAAO,QAAS,CAAA,MAAA,CAAO,OAAO,EAAE,CAAA,CAAA;AAC9C,cAAM,MAAA,OAAA,GACJ,MAAO,CAAA,QAAA,CAAS,MAAO,CAAA,WAAA,EAAa,EAAE,CAAA,GACtC,MAAO,CAAA,QAAA,CAAS,MAAO,CAAA,YAAA,EAAc,EAAE,CAAA,CAAA;AACzC,cAAO,OAAA;AAAA,gBACL,KAAA,EAAO,CAAG,EAAA,KAAA,GAAQ,OAAO,CAAA,EAAA,CAAA;AAAA,eAC3B,CAAA;AAAA,aACF;AAAA,YAEC,QAAO,EAAA,MAAA,CAAA,IAAA;AAAA,WAAA;AAAA,SACV;AAAA,OAAA;AAAA,KACF;AAAA,IAED,CAAC,MAAU,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,CAAA;AAAA,IAChB,UAAa,GAAA,CAAA,oBACX,IAAA,CAAA,GAAA,EAAA,EAAI,WAAU,qBACZ,EAAA,QAAA,EAAA;AAAA,MAAI,IAAA,IAAA,CAAK,UAAU,CAAA,CAAE,kBAAmB,EAAA;AAAA,MAAG,GAAA;AAAA,MAC3C,IAAI,IAAA,CAAK,UAAU,CAAA,CAAE,kBAAmB,EAAA;AAAA,KAC3C,EAAA,CAAA;AAAA,GAAA,EAEJ,CAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { TPanelProps } from '../../../types.js';
|
|
2
|
-
import { TPanelLayout } from './usePanelContextLayout.js';
|
|
3
|
-
|
|
4
|
-
type TPanelContext = {
|
|
5
|
-
/**
|
|
6
|
-
* setLayout es una función que permite decidir en qué formato se muestran
|
|
7
|
-
* los contenidos del panel.
|
|
8
|
-
*
|
|
9
|
-
* dense: No hay paddings
|
|
10
|
-
* clever: Hay paddings grandes
|
|
11
|
-
*/
|
|
12
|
-
setLayout: (newLayout: TPanelLayout) => void;
|
|
13
|
-
setTitle: (newTitle: string) => void;
|
|
14
|
-
panelProps: Omit<TPanelProps, 'children'>;
|
|
15
|
-
/**
|
|
16
|
-
* Cuando un panel renderiza sus hijos en pantalla, debe setear el ref de
|
|
17
|
-
* modo que se pueda continuar con el flujo normal del panel. Este ref puede
|
|
18
|
-
* estar en cualquier nivel, cuando sea instanciado, se llamará al refresh
|
|
19
|
-
* inicial.
|
|
20
|
-
*/
|
|
21
|
-
setRef: (el: HTMLElement | null) => void;
|
|
22
|
-
};
|
|
23
|
-
declare function usePanelContext(): TPanelContext;
|
|
24
|
-
|
|
25
|
-
export { type TPanelContext, usePanelContext };
|
|
26
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@apia/theme/jsx-runtime';
|
|
2
|
-
import { createContext, useContext, useCallback, useState, useRef, useMemo } from 'react';
|
|
3
|
-
import { usePanelOnEvent } from '../../../eventsController/usePanelOnEvent.js';
|
|
4
|
-
import { usePanelContextLayout } from './usePanelContextLayout.js';
|
|
5
|
-
import { usePanelFooter } from './usePanelFooter.js';
|
|
6
|
-
import { usePanelActions } from '../../../actions/usePanelActions.js';
|
|
7
|
-
import { useDashboardContext } from '../../../dashboard/DashboardContext.js';
|
|
8
|
-
import { changePanelTitle } from '../../../panelsUtil/usePanelChangeTitle.js';
|
|
9
|
-
|
|
10
|
-
const PanelContext = createContext(null);
|
|
11
|
-
function usePanelContext() {
|
|
12
|
-
const context = useContext(PanelContext);
|
|
13
|
-
if (!context)
|
|
14
|
-
throw new Error("No panel wrapper context defined");
|
|
15
|
-
return context;
|
|
16
|
-
}
|
|
17
|
-
const PanelContextProvider = ({
|
|
18
|
-
children,
|
|
19
|
-
value
|
|
20
|
-
}) => {
|
|
21
|
-
return /* @__PURE__ */ jsx(PanelContext.Provider, { value, children });
|
|
22
|
-
};
|
|
23
|
-
function useMakePanelContext(panelId, panelProps) {
|
|
24
|
-
const setTitle = useCallback(
|
|
25
|
-
(newTitle) => {
|
|
26
|
-
changePanelTitle(panelId, newTitle);
|
|
27
|
-
},
|
|
28
|
-
[panelId]
|
|
29
|
-
);
|
|
30
|
-
const { ref, setLayout } = usePanelContextLayout();
|
|
31
|
-
const [title, setTitleState] = useState(panelProps.title);
|
|
32
|
-
usePanelOnEvent(
|
|
33
|
-
{ eventType: "changeTitle", panelId },
|
|
34
|
-
(ev) => {
|
|
35
|
-
setTitleState(ev.payload);
|
|
36
|
-
}
|
|
37
|
-
);
|
|
38
|
-
const { footer, handleFooterClick } = usePanelFooter(
|
|
39
|
-
panelId,
|
|
40
|
-
panelProps.initialData
|
|
41
|
-
);
|
|
42
|
-
const dispatch = usePanelActions();
|
|
43
|
-
const hasRefreshedOnStartup = useRef(false);
|
|
44
|
-
const dashboard = useDashboardContext();
|
|
45
|
-
const setRef = useCallback(
|
|
46
|
-
(el) => {
|
|
47
|
-
if (el && !hasRefreshedOnStartup.current) {
|
|
48
|
-
hasRefreshedOnStartup.current = true;
|
|
49
|
-
if (panelProps.refreshOnStart) {
|
|
50
|
-
void dispatch({ action: "refresh" }).then(() => {
|
|
51
|
-
dashboard.bootstrapper.setPanelHasLoaded(panelId);
|
|
52
|
-
});
|
|
53
|
-
} else {
|
|
54
|
-
dashboard.bootstrapper.setPanelHasLoaded(panelId);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
[dashboard.bootstrapper, dispatch, panelId, panelProps.refreshOnStart]
|
|
59
|
-
);
|
|
60
|
-
const contextValue = useMemo(
|
|
61
|
-
() => ({
|
|
62
|
-
setTitle,
|
|
63
|
-
setLayout,
|
|
64
|
-
panelProps,
|
|
65
|
-
setRef
|
|
66
|
-
}),
|
|
67
|
-
[setTitle, setLayout, panelProps, setRef]
|
|
68
|
-
);
|
|
69
|
-
return { title, footer, handleFooterClick, contextValue, ref };
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export { PanelContext, PanelContextProvider, useMakePanelContext, usePanelContext };
|
|
73
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/splash/panels/PanelContext/index.tsx"],"sourcesContent":["import {\r\n ReactNode,\r\n createContext,\r\n useCallback,\r\n useContext,\r\n useMemo,\r\n useRef,\r\n useState,\r\n} from 'react';\r\nimport { changePanelTitle } from '../../../panelsUtil';\r\nimport { TPanelEvent, usePanelOnEvent } from '../../../eventsController';\r\nimport { TPanelLayout, usePanelContextLayout } from './usePanelContextLayout';\r\nimport { usePanelFooter } from './usePanelFooter';\r\nimport { TPanelProps } from '../../../types';\r\nimport { usePanelActions } from '../../../actions';\r\nimport { useYieldPanelIsReady } from './useYieldPanelIsReady';\r\nimport { useDashboardContext } from '../../../dashboard/DashboardContext';\r\n\r\nexport const PanelContext = createContext<TPanelContext | null>(null);\r\nexport { useYieldPanelIsReady };\r\n\r\nexport type TPanelContext = {\r\n /**\r\n * setLayout es una función que permite decidir en qué formato se muestran\r\n * los contenidos del panel.\r\n *\r\n * dense: No hay paddings\r\n * clever: Hay paddings grandes\r\n */\r\n setLayout: (newLayout: TPanelLayout) => void;\r\n setTitle: (newTitle: string) => void;\r\n panelProps: Omit<TPanelProps, 'children'>;\r\n /**\r\n * Cuando un panel renderiza sus hijos en pantalla, debe setear el ref de\r\n * modo que se pueda continuar con el flujo normal del panel. Este ref puede\r\n * estar en cualquier nivel, cuando sea instanciado, se llamará al refresh\r\n * inicial.\r\n */\r\n setRef: (el: HTMLElement | null) => void;\r\n};\r\n\r\nexport function usePanelContext() {\r\n const context = useContext(PanelContext);\r\n if (!context) throw new Error('No panel wrapper context defined');\r\n return context;\r\n}\r\nexport const PanelContextProvider = ({\r\n children,\r\n value,\r\n}: {\r\n children: ReactNode;\r\n value: TPanelContext;\r\n}) => {\r\n return (\r\n <PanelContext.Provider value={value}>{children}</PanelContext.Provider>\r\n );\r\n};\r\n\r\nexport function useMakePanelContext(\r\n panelId: string,\r\n panelProps: Omit<TPanelProps, 'children'>,\r\n) {\r\n const setTitle = useCallback(\r\n (newTitle: string) => {\r\n changePanelTitle(panelId, newTitle);\r\n },\r\n [panelId],\r\n );\r\n\r\n const { ref, setLayout } = usePanelContextLayout();\r\n\r\n const [title, setTitleState] = useState(panelProps.title);\r\n usePanelOnEvent(\r\n { eventType: 'changeTitle', panelId },\r\n (ev: TPanelEvent<string>) => {\r\n setTitleState(ev.payload);\r\n },\r\n );\r\n const { footer, handleFooterClick } = usePanelFooter(\r\n panelId,\r\n panelProps.initialData,\r\n );\r\n\r\n const dispatch = usePanelActions();\r\n const hasRefreshedOnStartup = useRef(false);\r\n const dashboard = useDashboardContext();\r\n\r\n const setRef = useCallback(\r\n (el: HTMLElement | null) => {\r\n if (el && !hasRefreshedOnStartup.current) {\r\n hasRefreshedOnStartup.current = true;\r\n if (panelProps.refreshOnStart) {\r\n void dispatch({ action: 'refresh' }).then(() => {\r\n dashboard.bootstrapper.setPanelHasLoaded(panelId);\r\n });\r\n } else {\r\n dashboard.bootstrapper.setPanelHasLoaded(panelId);\r\n }\r\n }\r\n },\r\n [dashboard.bootstrapper, dispatch, panelId, panelProps.refreshOnStart],\r\n );\r\n\r\n const contextValue = useMemo<TPanelContext>(\r\n () => ({\r\n setTitle,\r\n setLayout,\r\n panelProps,\r\n setRef,\r\n }),\r\n [setTitle, setLayout, panelProps, setRef],\r\n );\r\n\r\n return { title, footer, handleFooterClick, contextValue, ref };\r\n}\r\n"],"names":[],"mappings":";;;;;;;;;AAkBa,MAAA,YAAA,GAAe,cAAoC,IAAI,EAAA;AAuB7D,SAAS,eAAkB,GAAA;AAChC,EAAM,MAAA,OAAA,GAAU,WAAW,YAAY,CAAA,CAAA;AACvC,EAAA,IAAI,CAAC,OAAA;AAAS,IAAM,MAAA,IAAI,MAAM,kCAAkC,CAAA,CAAA;AAChE,EAAO,OAAA,OAAA,CAAA;AACT,CAAA;AACO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,KAAA;AACF,CAGM,KAAA;AACJ,EAAA,uBACG,GAAA,CAAA,YAAA,CAAa,QAAb,EAAA,EAAsB,OAAe,QAAS,EAAA,CAAA,CAAA;AAEnD,EAAA;AAEgB,SAAA,mBAAA,CACd,SACA,UACA,EAAA;AACA,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,QAAqB,KAAA;AACpB,MAAA,gBAAA,CAAiB,SAAS,QAAQ,CAAA,CAAA;AAAA,KACpC;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,EAAE,GAAA,EAAK,SAAU,EAAA,GAAI,qBAAsB,EAAA,CAAA;AAEjD,EAAA,MAAM,CAAC,KAAO,EAAA,aAAa,CAAI,GAAA,QAAA,CAAS,WAAW,KAAK,CAAA,CAAA;AACxD,EAAA,eAAA;AAAA,IACE,EAAE,SAAW,EAAA,aAAA,EAAe,OAAQ,EAAA;AAAA,IACpC,CAAC,EAA4B,KAAA;AAC3B,MAAA,aAAA,CAAc,GAAG,OAAO,CAAA,CAAA;AAAA,KAC1B;AAAA,GACF,CAAA;AACA,EAAM,MAAA,EAAE,MAAQ,EAAA,iBAAA,EAAsB,GAAA,cAAA;AAAA,IACpC,OAAA;AAAA,IACA,UAAW,CAAA,WAAA;AAAA,GACb,CAAA;AAEA,EAAA,MAAM,WAAW,eAAgB,EAAA,CAAA;AACjC,EAAM,MAAA,qBAAA,GAAwB,OAAO,KAAK,CAAA,CAAA;AAC1C,EAAA,MAAM,YAAY,mBAAoB,EAAA,CAAA;AAEtC,EAAA,MAAM,MAAS,GAAA,WAAA;AAAA,IACb,CAAC,EAA2B,KAAA;AAC1B,MAAI,IAAA,EAAA,IAAM,CAAC,qBAAA,CAAsB,OAAS,EAAA;AACxC,QAAA,qBAAA,CAAsB,OAAU,GAAA,IAAA,CAAA;AAChC,QAAA,IAAI,WAAW,cAAgB,EAAA;AAC7B,UAAA,KAAK,SAAS,EAAE,MAAA,EAAQ,WAAW,CAAA,CAAE,KAAK,MAAM;AAC9C,YAAU,SAAA,CAAA,YAAA,CAAa,kBAAkB,OAAO,CAAA,CAAA;AAAA,WACjD,CAAA,CAAA;AAAA,SACI,MAAA;AACL,UAAU,SAAA,CAAA,YAAA,CAAa,kBAAkB,OAAO,CAAA,CAAA;AAAA,SAClD;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,SAAU,CAAA,YAAA,EAAc,QAAU,EAAA,OAAA,EAAS,WAAW,cAAc,CAAA;AAAA,GACvE,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,OAAA;AAAA,IACnB,OAAO;AAAA,MACL,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,QAAA,EAAU,SAAW,EAAA,UAAA,EAAY,MAAM,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAA,OAAO,EAAE,KAAA,EAAO,MAAQ,EAAA,iBAAA,EAAmB,cAAc,GAAI,EAAA,CAAA;AAC/D;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"usePanelContextLayout.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { spacingLayouts } from '@apia/theme';
|
|
2
|
-
import { useRef, useCallback } from 'react';
|
|
3
|
-
|
|
4
|
-
function usePanelContextLayout() {
|
|
5
|
-
const elRef = useRef(null);
|
|
6
|
-
const layoutRef = useRef("clever");
|
|
7
|
-
const clearClassNames = useCallback(() => {
|
|
8
|
-
spacingLayouts.forEach(
|
|
9
|
-
(current) => elRef.current?.querySelector(".panel__content")?.classList.remove(current)
|
|
10
|
-
);
|
|
11
|
-
}, []);
|
|
12
|
-
const setRef = useCallback(
|
|
13
|
-
(el) => {
|
|
14
|
-
if (el instanceof HTMLDivElement) {
|
|
15
|
-
elRef.current = el;
|
|
16
|
-
clearClassNames();
|
|
17
|
-
(el?.querySelector(".panel__content")).classList.add(
|
|
18
|
-
layoutRef.current
|
|
19
|
-
);
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
[clearClassNames]
|
|
23
|
-
);
|
|
24
|
-
const setLayout = useCallback(
|
|
25
|
-
(layout) => {
|
|
26
|
-
if (layoutRef.current === layout)
|
|
27
|
-
return;
|
|
28
|
-
layoutRef.current = layout;
|
|
29
|
-
clearClassNames();
|
|
30
|
-
elRef.current?.querySelector(".panel__content")?.classList.add(layoutRef.current);
|
|
31
|
-
},
|
|
32
|
-
[clearClassNames]
|
|
33
|
-
);
|
|
34
|
-
return { ref: setRef, setLayout };
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export { usePanelContextLayout };
|
|
38
|
-
//# sourceMappingURL=usePanelContextLayout.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"usePanelContextLayout.js","sources":["../../../../src/splash/panels/PanelContext/usePanelContextLayout.ts"],"sourcesContent":["import { spacingLayouts, TSpacingLayout } from '@apia/theme';\r\nimport { useCallback, useRef } from 'react';\r\n\r\nexport type TPanelLayout = TSpacingLayout;\r\n\r\nexport function usePanelContextLayout() {\r\n const elRef = useRef<HTMLDivElement | null>(null);\r\n const layoutRef = useRef<TPanelLayout>('clever');\r\n\r\n const clearClassNames = useCallback(() => {\r\n spacingLayouts.forEach((current) =>\r\n (\r\n elRef.current?.querySelector('.panel__content') as HTMLElement\r\n )?.classList.remove(current),\r\n );\r\n }, []);\r\n\r\n const setRef = useCallback(\r\n (el: HTMLDivElement) => {\r\n if (el instanceof HTMLDivElement) {\r\n elRef.current = el;\r\n clearClassNames();\r\n (el?.querySelector('.panel__content') as HTMLElement).classList.add(\r\n layoutRef.current,\r\n );\r\n }\r\n },\r\n [clearClassNames],\r\n );\r\n\r\n const setLayout = useCallback(\r\n (layout: TPanelLayout) => {\r\n if (layoutRef.current === layout) return;\r\n\r\n layoutRef.current = layout;\r\n clearClassNames();\r\n (\r\n elRef.current?.querySelector('.panel__content') as HTMLElement\r\n )?.classList.add(layoutRef.current);\r\n },\r\n [clearClassNames],\r\n );\r\n\r\n return { ref: setRef, setLayout };\r\n}\r\n"],"names":[],"mappings":";;;AAKO,SAAS,qBAAwB,GAAA;AACtC,EAAM,MAAA,KAAA,GAAQ,OAA8B,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,SAAA,GAAY,OAAqB,QAAQ,CAAA,CAAA;AAE/C,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAe,cAAA,CAAA,OAAA;AAAA,MAAQ,CAAC,YAEpB,KAAM,CAAA,OAAA,EAAS,cAAc,iBAAiB,CAAA,EAC7C,SAAU,CAAA,MAAA,CAAO,OAAO,CAAA;AAAA,KAC7B,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,MAAS,GAAA,WAAA;AAAA,IACb,CAAC,EAAuB,KAAA;AACtB,MAAA,IAAI,cAAc,cAAgB,EAAA;AAChC,QAAA,KAAA,CAAM,OAAU,GAAA,EAAA,CAAA;AAChB,QAAgB,eAAA,EAAA,CAAA;AAChB,QAAA,CAAC,EAAI,EAAA,aAAA,CAAc,iBAAiB,CAAA,EAAkB,SAAU,CAAA,GAAA;AAAA,UAC9D,SAAU,CAAA,OAAA;AAAA,SACZ,CAAA;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,eAAe,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,MAAyB,KAAA;AACxB,MAAA,IAAI,UAAU,OAAY,KAAA,MAAA;AAAQ,QAAA,OAAA;AAElC,MAAA,SAAA,CAAU,OAAU,GAAA,MAAA,CAAA;AACpB,MAAgB,eAAA,EAAA,CAAA;AAChB,MACE,KAAA,CAAM,SAAS,aAAc,CAAA,iBAAiB,GAC7C,SAAU,CAAA,GAAA,CAAI,UAAU,OAAO,CAAA,CAAA;AAAA,KACpC;AAAA,IACA,CAAC,eAAe,CAAA;AAAA,GAClB,CAAA;AAEA,EAAO,OAAA,EAAE,GAAK,EAAA,MAAA,EAAQ,SAAU,EAAA,CAAA;AAClC;;;;"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { useState, useCallback } from 'react';
|
|
2
|
-
import { eventsController } from '../../../eventsController/eventsController.js';
|
|
3
|
-
import { usePanelOnEvent } from '../../../eventsController/usePanelOnEvent.js';
|
|
4
|
-
import { handleAction } from '../../../actions/basicAction.js';
|
|
5
|
-
|
|
6
|
-
function changePanelFooter(panelId, footer) {
|
|
7
|
-
eventsController.fireEvent(
|
|
8
|
-
{ panelId },
|
|
9
|
-
"changeFooter",
|
|
10
|
-
footer
|
|
11
|
-
);
|
|
12
|
-
}
|
|
13
|
-
function usePanelFooter(panelId, { initialData }) {
|
|
14
|
-
const [footer, setFooter] = useState(
|
|
15
|
-
initialData?.footer?.footer?.text ? initialData?.footer?.footer : null
|
|
16
|
-
);
|
|
17
|
-
const handleFooterClick = useCallback(
|
|
18
|
-
(ev) => {
|
|
19
|
-
console.log(ev.type);
|
|
20
|
-
if (footer)
|
|
21
|
-
handleAction(panelId, ev, footer);
|
|
22
|
-
},
|
|
23
|
-
[footer, panelId]
|
|
24
|
-
);
|
|
25
|
-
usePanelOnEvent(
|
|
26
|
-
{ eventType: "changeFooter", panelId },
|
|
27
|
-
(ev) => {
|
|
28
|
-
if (!ev.payload.text)
|
|
29
|
-
setFooter(null);
|
|
30
|
-
else
|
|
31
|
-
setFooter(ev.payload);
|
|
32
|
-
}
|
|
33
|
-
);
|
|
34
|
-
return { footer, handleFooterClick };
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export { changePanelFooter, usePanelFooter };
|
|
38
|
-
//# sourceMappingURL=usePanelFooter.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"usePanelFooter.js","sources":["../../../../src/splash/panels/PanelContext/usePanelFooter.tsx"],"sourcesContent":["import { KeyboardEvent, MouseEvent, useCallback, useState } from 'react';\r\nimport {\r\n TPanelEvent,\r\n TPanelIdentifier,\r\n eventsController,\r\n usePanelOnEvent,\r\n} from '../../../eventsController';\r\nimport { TFooter } from '../../../actions/usePanelActions';\r\nimport { handleAction } from '../../../actions/basicAction';\r\n\r\nexport function changePanelFooter(panelId: string, footer: TFooter | null) {\r\n eventsController.fireEvent(\r\n { panelId } as TPanelIdentifier,\r\n 'changeFooter',\r\n footer,\r\n );\r\n}\r\n\r\nexport type TUsePanelFooter = {\r\n footer: TFooter | null;\r\n handleFooterClick: (ev: MouseEvent | KeyboardEvent) => void;\r\n};\r\n\r\nexport function usePanelFooter(\r\n panelId: string,\r\n { initialData }: { initialData: unknown },\r\n): TUsePanelFooter {\r\n const [footer, setFooter] = useState<TFooter | null>(\r\n (initialData as { footer: { footer: TFooter } })?.footer?.footer?.text\r\n ? (initialData as { footer: { footer: TFooter } })?.footer?.footer\r\n : null,\r\n );\r\n\r\n const handleFooterClick = useCallback(\r\n (ev: MouseEvent | KeyboardEvent) => {\r\n console.log(ev.type);\r\n if (footer) handleAction(panelId, ev, footer);\r\n },\r\n [footer, panelId],\r\n );\r\n\r\n usePanelOnEvent(\r\n { eventType: 'changeFooter', panelId },\r\n (ev: TPanelEvent<TFooter>) => {\r\n if (!ev.payload.text) setFooter(null);\r\n else setFooter(ev.payload);\r\n },\r\n );\r\n\r\n return { footer, handleFooterClick };\r\n}\r\n"],"names":[],"mappings":";;;;;AAUgB,SAAA,iBAAA,CAAkB,SAAiB,MAAwB,EAAA;AACzE,EAAiB,gBAAA,CAAA,SAAA;AAAA,IACf,EAAE,OAAQ,EAAA;AAAA,IACV,cAAA;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AACF,CAAA;AAOO,SAAS,cACd,CAAA,OAAA,EACA,EAAE,WAAA,EACe,EAAA;AACjB,EAAM,MAAA,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA;AAAA,IACzB,aAAiD,MAAQ,EAAA,MAAA,EAAQ,IAC7D,GAAA,WAAA,EAAiD,QAAQ,MAC1D,GAAA,IAAA;AAAA,GACN,CAAA;AAEA,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,EAAmC,KAAA;AAClC,MAAQ,OAAA,CAAA,GAAA,CAAI,GAAG,IAAI,CAAA,CAAA;AACnB,MAAI,IAAA,MAAA;AAAQ,QAAa,YAAA,CAAA,OAAA,EAAS,IAAI,MAAM,CAAA,CAAA;AAAA,KAC9C;AAAA,IACA,CAAC,QAAQ,OAAO,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,eAAA;AAAA,IACE,EAAE,SAAW,EAAA,cAAA,EAAgB,OAAQ,EAAA;AAAA,IACrC,CAAC,EAA6B,KAAA;AAC5B,MAAI,IAAA,CAAC,GAAG,OAAQ,CAAA,IAAA;AAAM,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA;AAC/B,QAAA,SAAA,CAAU,GAAG,OAAO,CAAA,CAAA;AAAA,KAC3B;AAAA,GACF,CAAA;AAEA,EAAO,OAAA,EAAE,QAAQ,iBAAkB,EAAA,CAAA;AACrC;;;;"}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* **Favor de leer con cuidado el siguiente contenido, es muy importante para
|
|
3
|
-
* la performance**
|
|
4
|
-
*
|
|
5
|
-
* El hook useYieldPanelIsReady es una parte muy importante del flujo de
|
|
6
|
-
* trabajo de los dashboards. **El no reportar la carga de un panel tiene
|
|
7
|
-
* penalizaciones graves en el tiempo de renderizado inicial**, esto es porque
|
|
8
|
-
* el dashboard espera que todos los paneles hayan terminado la carga
|
|
9
|
-
* estructural básica antes de empezar con los refresh iniciales, y esto termina
|
|
10
|
-
* impactando en el tiempo que demora en bajar la cortina.
|
|
11
|
-
*
|
|
12
|
-
* **Aclaración:** Actualmente se espera las cargas estructurales para lanzar
|
|
13
|
-
* los refresh iniciales por motivos de arquitectura. Esa restricción será
|
|
14
|
-
* eliminada probablemente en el corto plazo, pero eso no cambia la necesidad de
|
|
15
|
-
* reportar las estructuras ya que esta información es igualmente utilizada para
|
|
16
|
-
* el bajado de la cortina de Skeletons.
|
|
17
|
-
*
|
|
18
|
-
* Por ejemplo, si todos los paneles están optimizados para lograr cargas
|
|
19
|
-
* iniciales rápidas pero el logo de la aplicación no reporta que su estructura
|
|
20
|
-
* está pronta, el dashboard va a bajar su cortina solamente luego de que expire
|
|
21
|
-
* el timeout **DASH_COURTAIN_TRESHOLD**, que por defecto viene establecido en 5
|
|
22
|
-
* segundos.
|
|
23
|
-
*
|
|
24
|
-
* Esto significa que aún cuando la cortina se hubiera podido bajar quizás a
|
|
25
|
-
* los pocos ms de cargado el html inicial, no lo hará porque supone que el
|
|
26
|
-
* panel Logo aún no terminó su carga estructural.
|
|
27
|
-
*
|
|
28
|
-
* Siempre que un panel esté presente en un dashboard, deberá reportar cuando
|
|
29
|
-
* la carga estructural esté pronta. Esto puede ser hecho de dos formas:
|
|
30
|
-
*
|
|
31
|
-
* - Usando { setRef } = usePanelContext(): En el elemento crucial de HTML del
|
|
32
|
-
* elemento hacer ref={setRef}. Esta es la forma más óptima ya que nos garantiza
|
|
33
|
-
* que el panel se reporte cuando su estructura HTML ya esté disponible,
|
|
34
|
-
* evitando ninguna demora.
|
|
35
|
-
*
|
|
36
|
-
* - Usando useYieldPanelIsReady(): Este hook es una alternativa disponible
|
|
37
|
-
* para las situaciones en las que no tenemos ningún elemento HTML de
|
|
38
|
-
* importancia o cuando ese elemento no está disponible hasta después de la
|
|
39
|
-
* carga inicial. Al usar este hook el panel se reportará automáticamente una
|
|
40
|
-
* vez que haya hecho el renderizado inicial.
|
|
41
|
-
*/
|
|
42
|
-
declare function useYieldPanelIsReady(): void;
|
|
43
|
-
|
|
44
|
-
export { useYieldPanelIsReady };
|
|
45
|
-
//# sourceMappingURL=useYieldPanelIsReady.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useYieldPanelIsReady.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { useMount } from '@apia/util';
|
|
2
|
-
import { usePanelContext } from './index.js';
|
|
3
|
-
|
|
4
|
-
function useYieldPanelIsReady() {
|
|
5
|
-
const { setRef } = usePanelContext();
|
|
6
|
-
useMount(() => {
|
|
7
|
-
setRef({});
|
|
8
|
-
});
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export { useYieldPanelIsReady };
|
|
12
|
-
//# sourceMappingURL=useYieldPanelIsReady.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useYieldPanelIsReady.js","sources":["../../../../src/splash/panels/PanelContext/useYieldPanelIsReady.ts"],"sourcesContent":["import { useMount } from '@apia/util';\r\nimport { usePanelContext } from '.';\r\n\r\n/**\r\n * **Favor de leer con cuidado el siguiente contenido, es muy importante para\r\n * la performance**\r\n *\r\n * El hook useYieldPanelIsReady es una parte muy importante del flujo de\r\n * trabajo de los dashboards. **El no reportar la carga de un panel tiene\r\n * penalizaciones graves en el tiempo de renderizado inicial**, esto es porque\r\n * el dashboard espera que todos los paneles hayan terminado la carga\r\n * estructural básica antes de empezar con los refresh iniciales, y esto termina\r\n * impactando en el tiempo que demora en bajar la cortina.\r\n *\r\n * **Aclaración:** Actualmente se espera las cargas estructurales para lanzar\r\n * los refresh iniciales por motivos de arquitectura. Esa restricción será\r\n * eliminada probablemente en el corto plazo, pero eso no cambia la necesidad de\r\n * reportar las estructuras ya que esta información es igualmente utilizada para\r\n * el bajado de la cortina de Skeletons.\r\n *\r\n * Por ejemplo, si todos los paneles están optimizados para lograr cargas\r\n * iniciales rápidas pero el logo de la aplicación no reporta que su estructura\r\n * está pronta, el dashboard va a bajar su cortina solamente luego de que expire\r\n * el timeout **DASH_COURTAIN_TRESHOLD**, que por defecto viene establecido en 5\r\n * segundos.\r\n *\r\n * Esto significa que aún cuando la cortina se hubiera podido bajar quizás a\r\n * los pocos ms de cargado el html inicial, no lo hará porque supone que el\r\n * panel Logo aún no terminó su carga estructural.\r\n *\r\n * Siempre que un panel esté presente en un dashboard, deberá reportar cuando\r\n * la carga estructural esté pronta. Esto puede ser hecho de dos formas:\r\n *\r\n * - Usando { setRef } = usePanelContext(): En el elemento crucial de HTML del\r\n * elemento hacer ref={setRef}. Esta es la forma más óptima ya que nos garantiza\r\n * que el panel se reporte cuando su estructura HTML ya esté disponible,\r\n * evitando ninguna demora.\r\n *\r\n * - Usando useYieldPanelIsReady(): Este hook es una alternativa disponible\r\n * para las situaciones en las que no tenemos ningún elemento HTML de\r\n * importancia o cuando ese elemento no está disponible hasta después de la\r\n * carga inicial. Al usar este hook el panel se reportará automáticamente una\r\n * vez que haya hecho el renderizado inicial.\r\n */\r\nexport function useYieldPanelIsReady() {\r\n const { setRef } = usePanelContext();\r\n\r\n useMount(() => {\r\n setRef({} as HTMLElement);\r\n });\r\n}\r\n"],"names":[],"mappings":";;;AA4CO,SAAS,oBAAuB,GAAA;AACrC,EAAM,MAAA,EAAE,MAAO,EAAA,GAAI,eAAgB,EAAA,CAAA;AAEnC,EAAA,QAAA,CAAS,MAAM;AACb,IAAA,MAAA,CAAO,EAAiB,CAAA,CAAA;AAAA,GACzB,CAAA,CAAA;AACH;;;;"}
|