@apia/dashboard-controller 2.0.11 → 3.0.2
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 +414 -23
- package/dist/index.js +2238 -22
- package/dist/index.js.map +1 -1
- package/package.json +8 -8
- 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 -71
- package/dist/splash/panels/PanelContext/PanelFooter.js.map +0 -1
- package/dist/splash/panels/PanelContext/index.d.ts +0 -31
- package/dist/splash/panels/PanelContext/index.d.ts.map +0 -1
- package/dist/splash/panels/PanelContext/index.js +0 -69
- 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 -29
- 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":"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"}
|
|
@@ -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,71 +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
|
-
footerContent,
|
|
9
|
-
isRefreshable,
|
|
10
|
-
footer,
|
|
11
|
-
handleFooterClick
|
|
12
|
-
}) => {
|
|
13
|
-
const [lastUpdate, setLastUpdate] = useState(0);
|
|
14
|
-
usePanelActions({
|
|
15
|
-
refresh() {
|
|
16
|
-
setLastUpdate(Date.now());
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
return /* @__PURE__ */ jsx(Fragment, { children: (isRefreshable || footer) && /* @__PURE__ */ jsxs("div", { className: "panel__footer", children: [
|
|
20
|
-
footerContent ?? (footer && (!footer.action || footer.actionBehavior === "DO_NOTHING") && /* @__PURE__ */ jsx("div", { className: "panel__footer__text", children: /* @__PURE__ */ jsx(
|
|
21
|
-
AutoEllipsis,
|
|
22
|
-
{
|
|
23
|
-
overrideStyles: (el) => {
|
|
24
|
-
const styles = window.getComputedStyle(
|
|
25
|
-
el.closest(".panel__footer")
|
|
26
|
-
);
|
|
27
|
-
const width = Number.parseInt(styles.width, 10);
|
|
28
|
-
const padding = Number.parseInt(styles.paddingLeft, 10) + Number.parseInt(styles.paddingRight, 10);
|
|
29
|
-
return {
|
|
30
|
-
width: `${width - padding}px`
|
|
31
|
-
};
|
|
32
|
-
},
|
|
33
|
-
children: footer.text
|
|
34
|
-
}
|
|
35
|
-
) })),
|
|
36
|
-
footer?.action && footer.actionBehavior !== "DO_NOTHING" && /* @__PURE__ */ jsx(
|
|
37
|
-
SimpleButton,
|
|
38
|
-
{
|
|
39
|
-
onClick: handleFooterClick,
|
|
40
|
-
onDoubleClick: handleFooterClick,
|
|
41
|
-
variant: "link",
|
|
42
|
-
className: "panel__footer__text",
|
|
43
|
-
children: /* @__PURE__ */ jsx(
|
|
44
|
-
AutoEllipsis,
|
|
45
|
-
{
|
|
46
|
-
overrideStyles: (el) => {
|
|
47
|
-
const styles = window.getComputedStyle(
|
|
48
|
-
el.closest(".panel__footer")
|
|
49
|
-
);
|
|
50
|
-
const width = Number.parseInt(styles.width, 10);
|
|
51
|
-
const padding = Number.parseInt(styles.paddingLeft, 10) + Number.parseInt(styles.paddingRight, 10);
|
|
52
|
-
return {
|
|
53
|
-
width: `${width - padding}px`
|
|
54
|
-
};
|
|
55
|
-
},
|
|
56
|
-
children: footer.text
|
|
57
|
-
}
|
|
58
|
-
)
|
|
59
|
-
}
|
|
60
|
-
),
|
|
61
|
-
!footer && /* @__PURE__ */ jsx("div", {}),
|
|
62
|
-
lastUpdate > 0 && /* @__PURE__ */ jsxs(Box, { className: "lastUpdate__wrapper", children: [
|
|
63
|
-
new Date(lastUpdate).toLocaleDateString(),
|
|
64
|
-
" ",
|
|
65
|
-
new Date(lastUpdate).toLocaleTimeString()
|
|
66
|
-
] })
|
|
67
|
-
] }) });
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
export { PanelFooter };
|
|
71
|
-
//# 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 footerContent,\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 {footerContent ??\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":"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"}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { TPanelProps } from '../../../types.js';
|
|
3
|
-
import { TPanelLayout } from './usePanelContextLayout.js';
|
|
4
|
-
|
|
5
|
-
type TPanelContext = {
|
|
6
|
-
/**
|
|
7
|
-
* Permite establecer contenido arbitrario en el footer del panel.
|
|
8
|
-
*/
|
|
9
|
-
setFooterContent(content: ReactNode): void;
|
|
10
|
-
/**
|
|
11
|
-
* setLayout es una función que permite decidir en qué formato se muestran
|
|
12
|
-
* los contenidos del panel.
|
|
13
|
-
*
|
|
14
|
-
* dense: No hay paddings
|
|
15
|
-
* clever: Hay paddings grandes
|
|
16
|
-
*/
|
|
17
|
-
setLayout: (newLayout: TPanelLayout) => void;
|
|
18
|
-
setTitle: (newTitle: string) => void;
|
|
19
|
-
panelProps: Omit<TPanelProps, 'children'>;
|
|
20
|
-
/**
|
|
21
|
-
* Cuando un panel renderiza sus hijos en pantalla, debe setear el ref de
|
|
22
|
-
* modo que se pueda continuar con el flujo normal del panel. Este ref puede
|
|
23
|
-
* estar en cualquier nivel, cuando sea instanciado, se llamará al refresh
|
|
24
|
-
* inicial.
|
|
25
|
-
*/
|
|
26
|
-
setRef: (el: HTMLElement | null) => void;
|
|
27
|
-
};
|
|
28
|
-
declare function usePanelContext(): TPanelContext;
|
|
29
|
-
|
|
30
|
-
export { type TPanelContext, usePanelContext };
|
|
31
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,69 +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 [footerContent, setFooterContent] = useState(null);
|
|
43
|
-
const dispatch = usePanelActions();
|
|
44
|
-
const hasRefreshedOnStartup = useRef(false);
|
|
45
|
-
const dashboard = useDashboardContext();
|
|
46
|
-
const setRef = useCallback(
|
|
47
|
-
(el) => {
|
|
48
|
-
if (el && !hasRefreshedOnStartup.current) {
|
|
49
|
-
hasRefreshedOnStartup.current = true;
|
|
50
|
-
if (panelProps.refreshOnStart) {
|
|
51
|
-
void dispatch({ action: "refresh" }).then(() => {
|
|
52
|
-
dashboard.bootstrapper.setPanelHasLoaded(panelId);
|
|
53
|
-
});
|
|
54
|
-
} else {
|
|
55
|
-
dashboard.bootstrapper.setPanelHasLoaded(panelId);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
[dashboard.bootstrapper, dispatch, panelId, panelProps.refreshOnStart]
|
|
60
|
-
);
|
|
61
|
-
const contextValue = useMemo(
|
|
62
|
-
() => ({ setFooterContent, setTitle, setLayout, panelProps, setRef }),
|
|
63
|
-
[setTitle, setLayout, panelProps, setRef]
|
|
64
|
-
);
|
|
65
|
-
return { footerContent, title, footer, handleFooterClick, contextValue, ref };
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export { PanelContext, PanelContextProvider, useMakePanelContext, usePanelContext };
|
|
69
|
-
//# 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 * Permite establecer contenido arbitrario en el footer del panel.\r\n */\r\n setFooterContent(content: ReactNode): void;\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 [footerContent, setFooterContent] = useState<ReactNode>(null);\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 () => ({ setFooterContent, setTitle, setLayout, panelProps, setRef }),\r\n [setTitle, setLayout, panelProps, setRef],\r\n );\r\n\r\n return { footerContent, title, footer, handleFooterClick, contextValue, ref };\r\n}\r\n"],"names":[],"mappings":";;;;;;;;;AAkBa,MAAA,YAAA,GAAe,cAAoC,IAAI,EAAA;AA2B7D,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,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAoB,IAAI,CAAA,CAAA;AAElE,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,EAAE,gBAAA,EAAkB,QAAU,EAAA,SAAA,EAAW,YAAY,MAAO,EAAA,CAAA;AAAA,IACnE,CAAC,QAAA,EAAU,SAAW,EAAA,UAAA,EAAY,MAAM,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAA,OAAO,EAAE,aAAe,EAAA,KAAA,EAAO,MAAQ,EAAA,iBAAA,EAAmB,cAAc,GAAI,EAAA,CAAA;AAC9E;;;;"}
|
|
@@ -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 {\r\n KeyboardEvent,\r\n MouseEvent,\r\n ReactNode,\r\n useCallback,\r\n useState,\r\n} 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 footerContent?: ReactNode;\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":";;;;;AAgBgB,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;AAQO,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
|