@apia/dashboard-controller 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/actions/basicAction.d.ts +15 -0
- package/dist/actions/basicAction.d.ts.map +1 -0
- package/dist/actions/basicAction.js +40 -0
- package/dist/actions/basicAction.js.map +1 -0
- package/dist/actions/externalFirePanelAction.d.ts +6 -0
- package/dist/actions/externalFirePanelAction.d.ts.map +1 -0
- package/dist/actions/externalFirePanelAction.js +12 -0
- package/dist/actions/externalFirePanelAction.js.map +1 -0
- package/dist/actions/firePanelAction.d.ts +6 -0
- package/dist/actions/firePanelAction.d.ts.map +1 -0
- package/dist/actions/firePanelAction.js +75 -0
- package/dist/actions/firePanelAction.js.map +1 -0
- package/dist/actions/usePanelActions.d.ts +63 -0
- package/dist/actions/usePanelActions.d.ts.map +1 -0
- package/dist/actions/usePanelActions.js +55 -0
- package/dist/actions/usePanelActions.js.map +1 -0
- package/dist/actions/usePanelIsLoading.d.ts +4 -0
- package/dist/actions/usePanelIsLoading.d.ts.map +1 -0
- package/dist/actions/usePanelIsLoading.js +14 -0
- package/dist/actions/usePanelIsLoading.js.map +1 -0
- package/dist/actions/usePanelNetworkState.d.ts +8 -0
- package/dist/actions/usePanelNetworkState.d.ts.map +1 -0
- package/dist/actions/usePanelNetworkState.js +21 -0
- package/dist/actions/usePanelNetworkState.js.map +1 -0
- package/dist/common/usePanelIdentity.d.ts +10 -0
- package/dist/common/usePanelIdentity.d.ts.map +1 -0
- package/dist/common/usePanelIdentity.js +12 -0
- package/dist/common/usePanelIdentity.js.map +1 -0
- package/dist/config/parametersStore.d.ts +15 -0
- package/dist/config/parametersStore.d.ts.map +1 -0
- package/dist/config/parametersStore.js +25 -0
- package/dist/config/parametersStore.js.map +1 -0
- package/dist/config/saveParameters.d.ts +11 -0
- package/dist/config/saveParameters.d.ts.map +1 -0
- package/dist/config/saveParameters.js +16 -0
- package/dist/config/saveParameters.js.map +1 -0
- package/dist/config/usePanelConfig.js +22 -0
- package/dist/config/usePanelConfig.js.map +1 -0
- package/dist/config/usePanelParametersSelector.d.ts +25 -0
- package/dist/config/usePanelParametersSelector.d.ts.map +1 -0
- package/dist/config/usePanelParametersSelector.js +17 -0
- package/dist/config/usePanelParametersSelector.js.map +1 -0
- package/dist/dashboard/DashboardContext.d.ts +6 -0
- package/dist/dashboard/DashboardContext.d.ts.map +1 -0
- package/dist/dashboard/DashboardContext.js +12 -0
- package/dist/dashboard/DashboardContext.js.map +1 -0
- package/dist/dashboard/DashboardPanel.d.ts +45 -0
- package/dist/dashboard/DashboardPanel.d.ts.map +1 -0
- package/dist/dashboard/DashboardPanel.js +236 -0
- package/dist/dashboard/DashboardPanel.js.map +1 -0
- package/dist/dashboard/DashboardPanelContext.d.ts +6 -0
- package/dist/dashboard/DashboardPanelContext.d.ts.map +1 -0
- package/dist/dashboard/DashboardPanelContext.js +12 -0
- package/dist/dashboard/DashboardPanelContext.js.map +1 -0
- package/dist/dashboard/DashboardPanelsBootstraper.d.ts +33 -0
- package/dist/dashboard/DashboardPanelsBootstraper.d.ts.map +1 -0
- package/dist/dashboard/DashboardPanelsBootstraper.js +135 -0
- package/dist/dashboard/DashboardPanelsBootstraper.js.map +1 -0
- package/dist/dashboard/DashboardRouter.d.ts +30 -0
- package/dist/dashboard/DashboardRouter.d.ts.map +1 -0
- package/dist/dashboard/DashboardRouter.js +74 -0
- package/dist/dashboard/DashboardRouter.js.map +1 -0
- package/dist/dashboard/PanelNotFound.js +14 -0
- package/dist/dashboard/PanelNotFound.js.map +1 -0
- package/dist/dashboard/dashboard.d.ts +26 -0
- package/dist/dashboard/dashboard.d.ts.map +1 -0
- package/dist/dashboard/dashboard.js +167 -0
- package/dist/dashboard/dashboard.js.map +1 -0
- package/dist/eventsController/eventsController.d.ts +11 -0
- package/dist/eventsController/eventsController.d.ts.map +1 -0
- package/dist/eventsController/eventsController.js +57 -0
- package/dist/eventsController/eventsController.js.map +1 -0
- package/dist/eventsController/types.d.ts +21 -0
- package/dist/eventsController/types.d.ts.map +1 -0
- package/dist/eventsController/usePanelFireEvent.d.ts +13 -0
- package/dist/eventsController/usePanelFireEvent.d.ts.map +1 -0
- package/dist/eventsController/usePanelFireEvent.js +21 -0
- package/dist/eventsController/usePanelFireEvent.js.map +1 -0
- package/dist/eventsController/usePanelOnEvent.d.ts +12 -0
- package/dist/eventsController/usePanelOnEvent.d.ts.map +1 -0
- package/dist/eventsController/usePanelOnEvent.js +14 -0
- package/dist/eventsController/usePanelOnEvent.js.map +1 -0
- package/dist/index.d.ts +24 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +23 -0
- package/dist/index.js.map +1 -0
- package/dist/panelsStore/createPanelStore.d.ts +16 -0
- package/dist/panelsStore/createPanelStore.d.ts.map +1 -0
- package/dist/panelsStore/createPanelStore.js +58 -0
- package/dist/panelsStore/createPanelStore.js.map +1 -0
- package/dist/panelsStore/panelsStore.js +59 -0
- package/dist/panelsStore/panelsStore.js.map +1 -0
- package/dist/panelsStore/usePanelSelector.js +32 -0
- package/dist/panelsStore/usePanelSelector.js.map +1 -0
- package/dist/panelsUtil/usePanelChangeTitle.d.ts +5 -0
- package/dist/panelsUtil/usePanelChangeTitle.d.ts.map +1 -0
- package/dist/panelsUtil/usePanelChangeTitle.js +23 -0
- package/dist/panelsUtil/usePanelChangeTitle.js.map +1 -0
- package/dist/panelsUtil/usePanelTitleAction.js +34 -0
- package/dist/panelsUtil/usePanelTitleAction.js.map +1 -0
- package/dist/position/usePanelPosition.d.ts +13 -0
- package/dist/position/usePanelPosition.d.ts.map +1 -0
- package/dist/position/usePanelPosition.js +40 -0
- package/dist/position/usePanelPosition.js.map +1 -0
- package/dist/splash/events/Dragleave.js +15 -0
- package/dist/splash/events/Dragleave.js.map +1 -0
- package/dist/splash/events/Dragover.js +120 -0
- package/dist/splash/events/Dragover.js.map +1 -0
- package/dist/splash/events/Dragstart.js +65 -0
- package/dist/splash/events/Dragstart.js.map +1 -0
- package/dist/splash/events/Drop.js +60 -0
- package/dist/splash/events/Drop.js.map +1 -0
- package/dist/splash/panels/DefaultPanelWrapper/NetworkState.js +28 -0
- package/dist/splash/panels/DefaultPanelWrapper/NetworkState.js.map +1 -0
- package/dist/splash/panels/DefaultPanelWrapper/PanelButtons.js +16 -0
- package/dist/splash/panels/DefaultPanelWrapper/PanelButtons.js.map +1 -0
- package/dist/splash/panels/DefaultPanelWrapper/RefreshButton.js +35 -0
- package/dist/splash/panels/DefaultPanelWrapper/RefreshButton.js.map +1 -0
- package/dist/splash/panels/DefaultPanelWrapper/SettingsButton.js +45 -0
- package/dist/splash/panels/DefaultPanelWrapper/SettingsButton.js.map +1 -0
- package/dist/splash/panels/DefaultPanelWrapper/defaultPanelWrapperStyles.js +103 -0
- package/dist/splash/panels/DefaultPanelWrapper/defaultPanelWrapperStyles.js.map +1 -0
- package/dist/splash/panels/DefaultPanelWrapper/index.js +57 -0
- package/dist/splash/panels/DefaultPanelWrapper/index.js.map +1 -0
- package/dist/splash/panels/LandingPagePanelWrapper.d.ts +6 -0
- package/dist/splash/panels/LandingPagePanelWrapper.d.ts.map +1 -0
- package/dist/splash/panels/LandingPagePanelWrapper.js +52 -0
- package/dist/splash/panels/LandingPagePanelWrapper.js.map +1 -0
- package/dist/splash/panels/PanelContext/PanelFooter.js +70 -0
- package/dist/splash/panels/PanelContext/PanelFooter.js.map +1 -0
- package/dist/splash/panels/PanelContext/index.d.ts +26 -0
- package/dist/splash/panels/PanelContext/index.d.ts.map +1 -0
- package/dist/splash/panels/PanelContext/index.js +73 -0
- package/dist/splash/panels/PanelContext/index.js.map +1 -0
- package/dist/splash/panels/PanelContext/usePanelContextLayout.d.ts +6 -0
- package/dist/splash/panels/PanelContext/usePanelContextLayout.d.ts.map +1 -0
- package/dist/splash/panels/PanelContext/usePanelContextLayout.js +38 -0
- package/dist/splash/panels/PanelContext/usePanelContextLayout.js.map +1 -0
- package/dist/splash/panels/PanelContext/usePanelFooter.js +38 -0
- package/dist/splash/panels/PanelContext/usePanelFooter.js.map +1 -0
- package/dist/splash/panels/PanelContext/useYieldPanelIsReady.d.ts +45 -0
- package/dist/splash/panels/PanelContext/useYieldPanelIsReady.d.ts.map +1 -0
- package/dist/splash/panels/PanelContext/useYieldPanelIsReady.js +12 -0
- package/dist/splash/panels/PanelContext/useYieldPanelIsReady.js.map +1 -0
- package/dist/splash/panels/PanelErrorBoundary.js +53 -0
- package/dist/splash/panels/PanelErrorBoundary.js.map +1 -0
- package/dist/splash/panels/PanelIdentifier.d.ts +16 -0
- package/dist/splash/panels/PanelIdentifier.d.ts.map +1 -0
- package/dist/splash/panels/PanelIdentifier.js +19 -0
- package/dist/splash/panels/PanelIdentifier.js.map +1 -0
- package/dist/splash/util/DragAndDrop.js +243 -0
- package/dist/splash/util/DragAndDrop.js.map +1 -0
- package/dist/splash/util/getColumnAreas.js +19 -0
- package/dist/splash/util/getColumnAreas.js.map +1 -0
- package/dist/splash/util/isCursorInArea.js +13 -0
- package/dist/splash/util/isCursorInArea.js.map +1 -0
- package/dist/types.d.ts +27 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/util.d.ts +8 -0
- package/dist/util.d.ts.map +1 -0
- package/dist/util.js +30 -0
- package/dist/util.js.map +1 -0
- package/package.json +41 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Drop.js","sources":["../../../src/splash/events/Drop.ts"],"sourcesContent":["/* eslint-disable no-param-reassign */\nimport { getSpecificParent } from '@apia/util';\nimport { updatePanelPosition } from '../../position/usePanelPosition';\nimport { DragAndDrop } from '../util/DragAndDrop';\n\nexport function Drop(event: Event, DragAndDrop: DragAndDrop) {\n if (DragAndDrop.body) {\n const ev = event as DragEvent;\n const data = ev?.dataTransfer?.getData('text');\n\n const sections = DragAndDrop.body?.querySelectorAll('[data-locationid]');\n\n sections.forEach((sec) => {\n sec.setAttribute('style', '');\n });\n\n const draggingPanel = DragAndDrop.body.querySelector(\n `[data-panel][data-id=\"${DragAndDrop.draggingPanelId}\"]:not(.apia_panel_falseDiv)`,\n );\n\n if (draggingPanel) {\n draggingPanel.setAttribute('style', '');\n }\n const falseDiv = document.querySelector('.apia_panel_falseDiv');\n\n if (data) {\n const child = document.querySelector(\n `[data-panel][data-id=\"${data}\"]:not(.apia_panel_falseDiv)`,\n );\n sections.forEach((sec) => {\n if (sec.children.length === 1) {\n sec.setAttribute('style', '');\n }\n });\n if (falseDiv) {\n const newSection = getSpecificParent(\n falseDiv as HTMLElement,\n (current) => !!current.dataset.locationid,\n );\n\n if (newSection) {\n const panelsArray = Array.from(newSection.children);\n const childId = (child as HTMLElement).dataset.id;\n\n if (childId) {\n const index = panelsArray.findIndex(\n (panel) => (panel as HTMLElement).dataset.id === childId,\n );\n\n if (typeof index === 'number' && newSection.dataset.locationid) {\n void updatePanelPosition(\n childId,\n newSection.dataset.locationid,\n index + 1,\n );\n }\n }\n }\n falseDiv.replaceWith(child as Node);\n }\n }\n\n DragAndDrop.draggingPanelId = '';\n DragAndDrop.panelData = [];\n DragAndDrop.drawMinimap();\n\n DragAndDrop.removePlaceholder();\n }\n}\n"],"names":["DragAndDrop"],"mappings":";;;AAKgB,SAAA,IAAA,CAAK,OAAcA,YAA0B,EAAA;AAC3D,EAAA,IAAIA,aAAY,IAAM,EAAA;AACpB,IAAA,MAAM,EAAK,GAAA,KAAA,CAAA;AACX,IAAA,MAAM,IAAO,GAAA,EAAA,EAAI,YAAc,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAE7C,IAAA,MAAM,QAAWA,GAAAA,YAAAA,CAAY,IAAM,EAAA,gBAAA,CAAiB,mBAAmB,CAAA,CAAA;AAEvE,IAAS,QAAA,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACxB,MAAI,GAAA,CAAA,YAAA,CAAa,SAAS,EAAE,CAAA,CAAA;AAAA,KAC7B,CAAA,CAAA;AAED,IAAM,MAAA,aAAA,GAAgBA,aAAY,IAAK,CAAA,aAAA;AAAA,MACrC,CAAA,sBAAA,EAAyBA,aAAY,eAAe,CAAA,4BAAA,CAAA;AAAA,KACtD,CAAA;AAEA,IAAA,IAAI,aAAe,EAAA;AACjB,MAAc,aAAA,CAAA,YAAA,CAAa,SAAS,EAAE,CAAA,CAAA;AAAA,KACxC;AACA,IAAM,MAAA,QAAA,GAAW,QAAS,CAAA,aAAA,CAAc,sBAAsB,CAAA,CAAA;AAE9D,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,MAAM,QAAQ,QAAS,CAAA,aAAA;AAAA,QACrB,yBAAyB,IAAI,CAAA,4BAAA,CAAA;AAAA,OAC/B,CAAA;AACA,MAAS,QAAA,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACxB,QAAI,IAAA,GAAA,CAAI,QAAS,CAAA,MAAA,KAAW,CAAG,EAAA;AAC7B,UAAI,GAAA,CAAA,YAAA,CAAa,SAAS,EAAE,CAAA,CAAA;AAAA,SAC9B;AAAA,OACD,CAAA,CAAA;AACD,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,MAAM,UAAa,GAAA,iBAAA;AAAA,UACjB,QAAA;AAAA,UACA,CAAC,OAAA,KAAY,CAAC,CAAC,QAAQ,OAAQ,CAAA,UAAA;AAAA,SACjC,CAAA;AAEA,QAAA,IAAI,UAAY,EAAA;AACd,UAAA,MAAM,WAAc,GAAA,KAAA,CAAM,IAAK,CAAA,UAAA,CAAW,QAAQ,CAAA,CAAA;AAClD,UAAM,MAAA,OAAA,GAAW,MAAsB,OAAQ,CAAA,EAAA,CAAA;AAE/C,UAAA,IAAI,OAAS,EAAA;AACX,YAAA,MAAM,QAAQ,WAAY,CAAA,SAAA;AAAA,cACxB,CAAC,KAAA,KAAW,KAAsB,CAAA,OAAA,CAAQ,EAAO,KAAA,OAAA;AAAA,aACnD,CAAA;AAEA,YAAA,IAAI,OAAO,KAAA,KAAU,QAAY,IAAA,UAAA,CAAW,QAAQ,UAAY,EAAA;AAC9D,cAAK,KAAA,mBAAA;AAAA,gBACH,OAAA;AAAA,gBACA,WAAW,OAAQ,CAAA,UAAA;AAAA,gBACnB,KAAQ,GAAA,CAAA;AAAA,eACV,CAAA;AAAA,aACF;AAAA,WACF;AAAA,SACF;AACA,QAAA,QAAA,CAAS,YAAY,KAAa,CAAA,CAAA;AAAA,OACpC;AAAA,KACF;AAEA,IAAAA,aAAY,eAAkB,GAAA,EAAA,CAAA;AAC9B,IAAAA,YAAAA,CAAY,YAAY,EAAC,CAAA;AACzB,IAAAA,aAAY,WAAY,EAAA,CAAA;AAExB,IAAAA,aAAY,iBAAkB,EAAA,CAAA;AAAA,GAChC;AACF;;;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx, Fragment } from '@apia/theme/jsx-runtime';
|
|
2
|
+
import { Icon } from '@apia/icons';
|
|
3
|
+
import { getLabel } from '@apia/util';
|
|
4
|
+
import { usePanelNetworkState } from '../../../actions/usePanelNetworkState.js';
|
|
5
|
+
|
|
6
|
+
const NetworkState = ({ title }) => {
|
|
7
|
+
const isConnected = usePanelNetworkState();
|
|
8
|
+
return /* @__PURE__ */ jsx(Fragment, { children: !isConnected && /* @__PURE__ */ jsx(
|
|
9
|
+
Icon,
|
|
10
|
+
{
|
|
11
|
+
tabIndex: 0,
|
|
12
|
+
title: getLabel("lblTestDBNoOk", {
|
|
13
|
+
text: {
|
|
14
|
+
TOK1: title
|
|
15
|
+
}
|
|
16
|
+
}).text,
|
|
17
|
+
"aria-label": getLabel("lblTestDBNoOk", {
|
|
18
|
+
text: {
|
|
19
|
+
TOK1: title
|
|
20
|
+
}
|
|
21
|
+
}).text,
|
|
22
|
+
name: "Alert"
|
|
23
|
+
}
|
|
24
|
+
) });
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { NetworkState };
|
|
28
|
+
//# sourceMappingURL=NetworkState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NetworkState.js","sources":["../../../../src/splash/panels/DefaultPanelWrapper/NetworkState.tsx"],"sourcesContent":["import { Icon } from '@apia/icons';\nimport { getLabel } from '@apia/util';\nimport { usePanelNetworkState } from '../../../actions';\n\nexport const NetworkState = ({ title }: { title: string }) => {\n const isConnected = usePanelNetworkState();\n return (\n <>\n {!isConnected && (\n <Icon\n tabIndex={0}\n title={\n getLabel('lblTestDBNoOk', {\n text: {\n TOK1: title,\n },\n }).text\n }\n aria-label={\n getLabel('lblTestDBNoOk', {\n text: {\n TOK1: title,\n },\n }).text\n }\n name=\"Alert\"\n />\n )}\n </>\n );\n};\n"],"names":[],"mappings":";;;;;AAIO,MAAM,YAAe,GAAA,CAAC,EAAE,KAAA,EAA+B,KAAA;AAC5D,EAAA,MAAM,cAAc,oBAAqB,EAAA,CAAA;AACzC,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA,EACG,WAAC,WACA,oBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,CAAA;AAAA,MACV,KAAA,EACE,SAAS,eAAiB,EAAA;AAAA,QACxB,IAAM,EAAA;AAAA,UACJ,IAAM,EAAA,KAAA;AAAA,SACR;AAAA,OACD,CAAE,CAAA,IAAA;AAAA,MAEL,YAAA,EACE,SAAS,eAAiB,EAAA;AAAA,QACxB,IAAM,EAAA;AAAA,UACJ,IAAM,EAAA,KAAA;AAAA,SACR;AAAA,OACD,CAAE,CAAA,IAAA;AAAA,MAEL,IAAK,EAAA,OAAA;AAAA,KAAA;AAAA,GAGX,EAAA,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
|
|
2
|
+
import { makeImperativeComponent } from '@apia/util';
|
|
3
|
+
import { RefreshButton } from './RefreshButton.js';
|
|
4
|
+
import { SettingsButton } from './SettingsButton.js';
|
|
5
|
+
|
|
6
|
+
const [, panelButtonsActions, PanelButtons] = makeImperativeComponent()({
|
|
7
|
+
Component: (props) => {
|
|
8
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
9
|
+
props.isRefreshable && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(RefreshButton, { ...props }) }),
|
|
10
|
+
props.isConfigurable && /* @__PURE__ */ jsx(SettingsButton, { title: props.title })
|
|
11
|
+
] });
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
export { PanelButtons, panelButtonsActions };
|
|
16
|
+
//# sourceMappingURL=PanelButtons.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PanelButtons.js","sources":["../../../../src/splash/panels/DefaultPanelWrapper/PanelButtons.tsx"],"sourcesContent":["import { makeImperativeComponent } from '@apia/util';\nimport { RefreshButton } from './RefreshButton';\nimport { SettingsButton } from './SettingsButton';\nimport { TPanelProps } from '../../../types';\n\nexport const [, panelButtonsActions, PanelButtons] = makeImperativeComponent<\n Omit<TPanelProps, 'initialData' | 'children'>,\n {\n disable: boolean;\n }\n>()({\n Component: (props) => {\n return (\n <>\n {props.isRefreshable && (\n <>\n <RefreshButton {...props} />\n </>\n )}\n {props.isConfigurable && <SettingsButton title={props.title} />}\n </>\n );\n },\n});\n"],"names":[],"mappings":";;;;;AAKO,MAAM,GAAG,mBAAA,EAAqB,YAAY,CAAA,GAAI,yBAKjD,CAAA;AAAA,EACF,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,IAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,KAAA,CAAM,iCAEH,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,aAAe,EAAA,EAAA,GAAG,OAAO,CAC5B,EAAA,CAAA;AAAA,MAED,MAAM,cAAkB,oBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,KAAA,EAAO,MAAM,KAAO,EAAA,CAAA;AAAA,KAC/D,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,CAAC;;;;"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { jsx } from '@apia/theme/jsx-runtime';
|
|
2
|
+
import { IconButton } from '@apia/components';
|
|
3
|
+
import { useImperativeComponentEvents, getLabel } from '@apia/util';
|
|
4
|
+
import { useState, useCallback } from 'react';
|
|
5
|
+
import { usePanelActions } from '../../../actions/usePanelActions.js';
|
|
6
|
+
import { usePanelIsLoading } from '../../../actions/usePanelIsLoading.js';
|
|
7
|
+
|
|
8
|
+
const RefreshButton = (props) => {
|
|
9
|
+
const [isDisabled, setIsDisabled] = useState(false);
|
|
10
|
+
const isLoading = usePanelIsLoading();
|
|
11
|
+
const dispatch = usePanelActions();
|
|
12
|
+
useImperativeComponentEvents({
|
|
13
|
+
disable(newDisabledValue) {
|
|
14
|
+
setIsDisabled(newDisabledValue);
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
return /* @__PURE__ */ jsx(
|
|
18
|
+
IconButton,
|
|
19
|
+
{
|
|
20
|
+
icon: "Refresh",
|
|
21
|
+
variant: "buttons.icon-outline",
|
|
22
|
+
className: "panel__iconButton",
|
|
23
|
+
size: "Md",
|
|
24
|
+
onClick: useCallback(() => {
|
|
25
|
+
void dispatch({ action: "refresh" });
|
|
26
|
+
}, [dispatch]),
|
|
27
|
+
title: getLabel("lblRefreshPnl", { text: { TOK1: props.title } }).text,
|
|
28
|
+
isLoading,
|
|
29
|
+
disabled: isDisabled
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export { RefreshButton };
|
|
35
|
+
//# sourceMappingURL=RefreshButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RefreshButton.js","sources":["../../../../src/splash/panels/DefaultPanelWrapper/RefreshButton.tsx"],"sourcesContent":["import { IconButton } from '@apia/components';\nimport { getLabel, useImperativeComponentEvents } from '@apia/util';\nimport { useCallback, useState } from 'react';\nimport { usePanelActions, usePanelIsLoading } from '../../../actions';\n\nexport const RefreshButton = (props: {\n refreshOnStart: boolean;\n refreshOnHome: boolean;\n title: string;\n}) => {\n const [isDisabled, setIsDisabled] = useState(false);\n\n const isLoading = usePanelIsLoading();\n const dispatch = usePanelActions();\n\n useImperativeComponentEvents({\n disable(newDisabledValue: boolean) {\n setIsDisabled(newDisabledValue);\n },\n });\n\n return (\n <IconButton\n icon=\"Refresh\"\n variant=\"buttons.icon-outline\"\n className=\"panel__iconButton\"\n size=\"Md\"\n onClick={useCallback(() => {\n void dispatch({ action: 'refresh' });\n }, [dispatch])}\n title={getLabel('lblRefreshPnl', { text: { TOK1: props.title } }).text}\n isLoading={isLoading}\n disabled={isDisabled}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;;AAKa,MAAA,aAAA,GAAgB,CAAC,KAIxB,KAAA;AACJ,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAElD,EAAA,MAAM,YAAY,iBAAkB,EAAA,CAAA;AACpC,EAAA,MAAM,WAAW,eAAgB,EAAA,CAAA;AAEjC,EAA6B,4BAAA,CAAA;AAAA,IAC3B,QAAQ,gBAA2B,EAAA;AACjC,MAAA,aAAA,CAAc,gBAAgB,CAAA,CAAA;AAAA,KAChC;AAAA,GACD,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,SAAA;AAAA,MACL,OAAQ,EAAA,sBAAA;AAAA,MACR,SAAU,EAAA,mBAAA;AAAA,MACV,IAAK,EAAA,IAAA;AAAA,MACL,OAAA,EAAS,YAAY,MAAM;AACzB,QAAA,KAAK,QAAS,CAAA,EAAE,MAAQ,EAAA,SAAA,EAAW,CAAA,CAAA;AAAA,OACrC,EAAG,CAAC,QAAQ,CAAC,CAAA;AAAA,MACb,KAAA,EAAO,QAAS,CAAA,eAAA,EAAiB,EAAE,IAAA,EAAM,EAAE,IAAA,EAAM,KAAM,CAAA,KAAA,EAAQ,EAAC,CAAE,CAAA,IAAA;AAAA,MAClE,SAAA;AAAA,MACA,QAAU,EAAA,UAAA;AAAA,KAAA;AAAA,GACZ,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { jsx } from '@apia/theme/jsx-runtime';
|
|
2
|
+
import { IconButton } from '@apia/components';
|
|
3
|
+
import { useImperativeComponentEvents, getLabel } from '@apia/util';
|
|
4
|
+
import { useState, useCallback } from 'react';
|
|
5
|
+
import { usePanelConfig } from '../../../config/usePanelConfig.js';
|
|
6
|
+
import { usePanelActions } from '../../../actions/usePanelActions.js';
|
|
7
|
+
import { panelButtonsActions } from './PanelButtons.js';
|
|
8
|
+
import { usePanelIdentity } from '../../../common/usePanelIdentity.js';
|
|
9
|
+
|
|
10
|
+
const SettingsButton = (props) => {
|
|
11
|
+
const { panelId } = usePanelIdentity();
|
|
12
|
+
const configure = usePanelConfig();
|
|
13
|
+
const [isDisabled, setIsDisabled] = useState(false);
|
|
14
|
+
useImperativeComponentEvents({
|
|
15
|
+
disable(newDisabledValue) {
|
|
16
|
+
setIsDisabled(newDisabledValue);
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
usePanelActions({
|
|
20
|
+
refresh() {
|
|
21
|
+
panelButtonsActions(panelId, "disable", false);
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
const openSettings = useCallback(() => {
|
|
25
|
+
try {
|
|
26
|
+
configure();
|
|
27
|
+
} catch (e) {
|
|
28
|
+
}
|
|
29
|
+
}, [configure]);
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
IconButton,
|
|
32
|
+
{
|
|
33
|
+
icon: "Settings",
|
|
34
|
+
size: "Md",
|
|
35
|
+
variant: "buttons.icon-outline",
|
|
36
|
+
className: "panel__iconButton",
|
|
37
|
+
onClick: openSettings,
|
|
38
|
+
title: getLabel("lblOpenPnlConf", { text: { TOK1: props.title } }).text,
|
|
39
|
+
disabled: isDisabled
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export { SettingsButton };
|
|
45
|
+
//# sourceMappingURL=SettingsButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SettingsButton.js","sources":["../../../../src/splash/panels/DefaultPanelWrapper/SettingsButton.tsx"],"sourcesContent":["import { IconButton } from '@apia/components';\nimport { getLabel, useImperativeComponentEvents } from '@apia/util';\nimport { useCallback, useState } from 'react';\nimport { usePanelConfig } from '../../../config/usePanelConfig';\nimport { usePanelActions } from '../../../actions';\nimport { panelButtonsActions } from './PanelButtons';\nimport { usePanelIdentity } from '../../../common';\n\nexport const SettingsButton = (props: { title: string }) => {\n const { panelId } = usePanelIdentity();\n const configure = usePanelConfig();\n\n const [isDisabled, setIsDisabled] = useState(false);\n useImperativeComponentEvents({\n disable(newDisabledValue: boolean) {\n setIsDisabled(newDisabledValue);\n },\n });\n\n usePanelActions({\n refresh() {\n panelButtonsActions(panelId, 'disable', false);\n },\n });\n\n const openSettings = useCallback(() => {\n try {\n configure();\n } catch (e) {}\n }, [configure]);\n\n return (\n <IconButton\n icon=\"Settings\"\n size=\"Md\"\n variant=\"buttons.icon-outline\"\n className=\"panel__iconButton\"\n onClick={openSettings}\n title={getLabel('lblOpenPnlConf', { text: { TOK1: props.title } }).text}\n disabled={isDisabled}\n />\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAQa,MAAA,cAAA,GAAiB,CAAC,KAA6B,KAAA;AAC1D,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,gBAAiB,EAAA,CAAA;AACrC,EAAA,MAAM,YAAY,cAAe,EAAA,CAAA;AAEjC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAClD,EAA6B,4BAAA,CAAA;AAAA,IAC3B,QAAQ,gBAA2B,EAAA;AACjC,MAAA,aAAA,CAAc,gBAAgB,CAAA,CAAA;AAAA,KAChC;AAAA,GACD,CAAA,CAAA;AAED,EAAgB,eAAA,CAAA;AAAA,IACd,OAAU,GAAA;AACR,MAAoB,mBAAA,CAAA,OAAA,EAAS,WAAW,KAAK,CAAA,CAAA;AAAA,KAC/C;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAI,IAAA;AACF,MAAU,SAAA,EAAA,CAAA;AAAA,aACH,CAAG,EAAA;AAAA,KAAC;AAAA,GACf,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,UAAA;AAAA,MACL,IAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA,sBAAA;AAAA,MACR,SAAU,EAAA,mBAAA;AAAA,MACV,OAAS,EAAA,YAAA;AAAA,MACT,KAAA,EAAO,QAAS,CAAA,gBAAA,EAAkB,EAAE,IAAA,EAAM,EAAE,IAAA,EAAM,KAAM,CAAA,KAAA,EAAQ,EAAC,CAAE,CAAA,IAAA;AAAA,MACnE,QAAU,EAAA,UAAA;AAAA,KAAA;AAAA,GACZ,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,103 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaultPanelWrapperStyles.js","sources":["../../../../src/splash/panels/DefaultPanelWrapper/defaultPanelWrapperStyles.ts"],"sourcesContent":["import {\n responsive,\n spacing,\n ThemeUICSSObject,\n getSpacingLayouts,\n} from '@apia/theme';\n\nexport const defaultPanelWrapperStyles: ThemeUICSSObject = {\n pb: spacing(6),\n\n '&:last-child': {\n pb: 0,\n },\n '.panel__container': {\n background: 'palette.background.paper',\n border: '1px solid',\n borderColor: 'palette.gray.800',\n display: 'flex',\n flexDirection: 'column',\n borderRadius: 'panel',\n boxShadow: 'panel',\n },\n\n '.panel__header': {\n alignItems: 'center',\n cursor: 'grab',\n display: 'flex',\n flexWrap: 'nowrap',\n fontWeight: 'bold',\n justifyContent: 'space-between',\n maxWidth: '100%',\n overflow: 'hidden',\n backgroundColor: 'palette.secondary.light',\n borderBottomRightRadius: '0px !important',\n borderBottomLeftRadius: '0px !important',\n pl: 4,\n py: 4,\n\n borderRadius: 'panel',\n\n '.panel__header__left': {\n alignItems: 'center',\n display: 'flex',\n gap: 2,\n\n svg: {\n color: 'palette.error.dark',\n },\n },\n\n '& > *': {\n flexShrink: 0,\n },\n\n '.panel__header__buttons': {\n alignSelf: 'end',\n display: 'flex',\n flexGrow: 1,\n fontWeight: 'normal',\n gap: 2,\n justifyContent: 'end',\n right: 0,\n background: 'transparent',\n pr: 3,\n opacity: responsive({ 0: 1, 3: 0 }),\n alignItems: 'center',\n pl: 3,\n height: '24px',\n button: {\n width: '30px',\n height: '30px',\n },\n },\n },\n\n '.panel__content': {\n ...getSpacingLayouts(),\n },\n\n '.panel__container:hover, .panel__container:focus, .panel__container:focus-within, .panel__container.isLoading':\n {\n '.panel__header__buttons, .lastUpdate__wrapper': {\n opacity: responsive({ 0: 1 }),\n },\n },\n\n '.panel__footer': {\n display: 'flex',\n justifyContent: 'space-between',\n gap: spacing(3),\n background: 'palette.secondary.light',\n px: 4,\n py: 3,\n color: 'palette.text.primary',\n borderRadius: 'panel',\n borderTopRightRadius: '0px',\n borderTopLeftRadius: '0px',\n overflow: 'hidden',\n alignItems: 'center',\n },\n\n '.panel__iconButton, .lastUpdate__wrapper': {\n transition: 'opacity 300ms',\n },\n\n '.lastUpdate__wrapper': {\n fontSize: 14,\n opacity: 0,\n flexShrink: 0,\n },\n\n '.panel__footer__text': {\n overflow: 'hidden',\n flexShrink: 1,\n },\n\n 'span.panel__title': {\n flexShrink: '1 !important',\n },\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,57 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/splash/panels/DefaultPanelWrapper/index.tsx"],"sourcesContent":["import { makeStyledComponent } from '@apia/theme';\nimport { PanelContainer } from '../../../types';\nimport { defaultPanelWrapperStyles } from './defaultPanelWrapperStyles';\nimport { usePanelIdentity } from '../../../common';\nimport { NetworkState } from './NetworkState';\nimport { PanelButtons } from './PanelButtons';\nimport { usePanelIsLoading } from '../../../actions';\nimport { PanelContextProvider, useMakePanelContext } from '../PanelContext';\nimport { PanelFooter } from '../PanelContext/PanelFooter';\nimport { usePanelTitleDescription } from '../../../panelsUtil/usePanelTitleAction';\n\nexport const DefaultPanelWrapper: PanelContainer = makeStyledComponent(\n 'DefaultPanelWrapper',\n 'layout.common.dashboards.panel',\n defaultPanelWrapperStyles,\n ({ children, ...props }) => {\n const { panelId, panelName, panelType } = usePanelIdentity();\n\n const { contextValue, title, ref, ...footerProps } = useMakePanelContext(\n panelId,\n props,\n );\n\n const panelTitleDescription = usePanelTitleDescription();\n\n const showHeader =\n props.showTitle || props.isConfigurable || props.isRefreshable;\n const isLoading = usePanelIsLoading();\n return (\n <PanelContextProvider value={contextValue}>\n <div\n ref={ref}\n className={`panel__container ${isLoading ? 'isLoading' : ''}`}\n data-panelname={panelName}\n data-paneltype={panelType}\n data-panelid={panelId}\n >\n {showHeader && (\n <div draggable={props.canMove} className={`panel__header`}>\n <div className=\"panel__header__left\">\n {props.showTitle && (\n <span\n className=\"panel__title\"\n title={panelTitleDescription ?? title}\n >\n {title}\n </span>\n )}\n <NetworkState title={title} />\n </div>\n <div className={`panel__header__buttons`}>\n <PanelButtons {...props} id={panelId} />\n </div>\n </div>\n )}\n <div className=\"panel__content\">{children}</div>\n <PanelFooter isRefreshable={props.isRefreshable} {...footerProps} />\n </div>\n </PanelContextProvider>\n );\n },\n);\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;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LandingPagePanelWrapper.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,52 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LandingPagePanelWrapper.js","sources":["../../../src/splash/panels/LandingPagePanelWrapper.tsx"],"sourcesContent":["import { PanelContainer } from '../../types';\nimport { NetworkState } from './DefaultPanelWrapper/NetworkState';\nimport { usePanelIdentity } from '../../common';\nimport { PanelContextProvider, useMakePanelContext } from './PanelContext';\nimport { PanelFooter } from './PanelContext/PanelFooter';\nimport {\n usePanelTitleAction,\n usePanelTitleDescription,\n} from '../../panelsUtil/usePanelTitleAction';\nimport { useDashboardContext } from '../../dashboard/DashboardContext';\n\nexport const LandingPagePanelWrapper: PanelContainer = ({\n children,\n ...props\n}) => {\n const { panelId, panelName, panelType } = usePanelIdentity();\n\n const { contextValue, title, ref, ...footerProps } = useMakePanelContext(\n panelId,\n props,\n );\n\n const panelTitleAction = usePanelTitleAction();\n const panelTitleDescription = usePanelTitleDescription();\n\n const dashboard = useDashboardContext();\n\n if (dashboard.getPanel(panelId).props.hasRss)\n console.log(dashboard.getPanel(panelId).props);\n\n return (\n <PanelContextProvider value={contextValue}>\n <div\n className=\"panel__container\"\n data-panelname={panelName}\n data-paneltype={panelType}\n data-panelid={panelId}\n ref={ref}\n >\n <div className=\"panel__header\">\n <div className=\"panel__header__left\">\n {props.showTitle && (\n <span className=\"panel__title\">\n {panelTitleAction ? (\n <a\n title={panelTitleDescription}\n className=\"panel__title__link\"\n href={panelTitleAction}\n >\n {title}\n </a>\n ) : (\n title\n )}\n </span>\n )}\n <NetworkState title={title} />\n </div>\n </div>\n <div className=\"panel__content\">{children}</div>\n <PanelFooter isRefreshable={false} {...footerProps} />\n </div>\n </PanelContextProvider>\n );\n};\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;;;;"}
|
|
@@ -0,0 +1,70 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PanelFooter.js","sources":["../../../../src/splash/panels/PanelContext/PanelFooter.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { usePanelActions } from '../../../actions';\nimport { TUsePanelFooter } from './usePanelFooter';\nimport { AutoEllipsis, SimpleButton } from '@apia/components';\nimport { Box } from '@apia/theme';\n\nexport const PanelFooter = ({\n isRefreshable,\n footer,\n handleFooterClick,\n}: TUsePanelFooter & { isRefreshable: boolean }) => {\n const [lastUpdate, setLastUpdate] = useState<number>(0);\n\n usePanelActions({\n refresh() {\n setLastUpdate(Date.now());\n },\n });\n\n return (\n <>\n {(isRefreshable || footer) && (\n <div className=\"panel__footer\">\n {footer &&\n (!footer.action || footer.actionBehavior === 'DO_NOTHING') && (\n <div className=\"panel__footer__text\">\n <AutoEllipsis\n overrideStyles={(el) => {\n const styles = window.getComputedStyle(\n el.closest('.panel__footer') as HTMLElement,\n );\n const width = Number.parseInt(styles.width, 10);\n const padding =\n Number.parseInt(styles.paddingLeft, 10) +\n Number.parseInt(styles.paddingRight, 10);\n return {\n width: `${width - padding}px`,\n };\n }}\n >\n {footer.text}\n </AutoEllipsis>\n </div>\n )}\n {footer?.action && footer.actionBehavior !== 'DO_NOTHING' && (\n <SimpleButton\n onClick={handleFooterClick}\n onDoubleClick={handleFooterClick}\n variant=\"link\"\n className=\"panel__footer__text\"\n >\n <AutoEllipsis\n overrideStyles={(el) => {\n const styles = window.getComputedStyle(\n el.closest('.panel__footer') as HTMLElement,\n );\n const width = Number.parseInt(styles.width, 10);\n const padding =\n Number.parseInt(styles.paddingLeft, 10) +\n Number.parseInt(styles.paddingRight, 10);\n return {\n width: `${width - padding}px`,\n };\n }}\n >\n {footer.text}\n </AutoEllipsis>\n </SimpleButton>\n )}\n {!footer && <div></div>}\n {lastUpdate > 0 && (\n <Box className=\"lastUpdate__wrapper\">\n {new Date(lastUpdate).toLocaleDateString()}{' '}\n {new Date(lastUpdate).toLocaleTimeString()}\n </Box>\n )}\n </div>\n )}\n </>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,73 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/splash/panels/PanelContext/index.tsx"],"sourcesContent":["import {\n ReactNode,\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { changePanelTitle } from '../../../panelsUtil';\nimport { TPanelEvent, usePanelOnEvent } from '../../../eventsController';\nimport { TPanelLayout, usePanelContextLayout } from './usePanelContextLayout';\nimport { usePanelFooter } from './usePanelFooter';\nimport { TPanelProps } from '../../../types';\nimport { usePanelActions } from '../../../actions';\nimport { useYieldPanelIsReady } from './useYieldPanelIsReady';\nimport { useDashboardContext } from '../../../dashboard/DashboardContext';\n\nexport const PanelContext = createContext<TPanelContext | null>(null);\nexport { useYieldPanelIsReady };\n\nexport type TPanelContext = {\n /**\n * setLayout es una función que permite decidir en qué formato se muestran\n * los contenidos del panel.\n *\n * dense: No hay paddings\n * clever: Hay paddings grandes\n */\n setLayout: (newLayout: TPanelLayout) => void;\n setTitle: (newTitle: string) => void;\n panelProps: Omit<TPanelProps, 'children'>;\n /**\n * Cuando un panel renderiza sus hijos en pantalla, debe setear el ref de\n * modo que se pueda continuar con el flujo normal del panel. Este ref puede\n * estar en cualquier nivel, cuando sea instanciado, se llamará al refresh\n * inicial.\n */\n setRef: (el: HTMLElement | null) => void;\n};\n\nexport function usePanelContext() {\n const context = useContext(PanelContext);\n if (!context) throw new Error('No panel wrapper context defined');\n return context;\n}\nexport const PanelContextProvider = ({\n children,\n value,\n}: {\n children: ReactNode;\n value: TPanelContext;\n}) => {\n return (\n <PanelContext.Provider value={value}>{children}</PanelContext.Provider>\n );\n};\n\nexport function useMakePanelContext(\n panelId: string,\n panelProps: Omit<TPanelProps, 'children'>,\n) {\n const setTitle = useCallback(\n (newTitle: string) => {\n changePanelTitle(panelId, newTitle);\n },\n [panelId],\n );\n\n const { ref, setLayout } = usePanelContextLayout();\n\n const [title, setTitleState] = useState(panelProps.title);\n usePanelOnEvent(\n { eventType: 'changeTitle', panelId },\n (ev: TPanelEvent<string>) => {\n setTitleState(ev.payload);\n },\n );\n const { footer, handleFooterClick } = usePanelFooter(\n panelId,\n panelProps.initialData,\n );\n\n const dispatch = usePanelActions();\n const hasRefreshedOnStartup = useRef(false);\n const dashboard = useDashboardContext();\n\n const setRef = useCallback(\n (el: HTMLElement | null) => {\n if (el && !hasRefreshedOnStartup.current) {\n hasRefreshedOnStartup.current = true;\n if (panelProps.refreshOnStart) {\n void dispatch({ action: 'refresh' }).then(() => {\n dashboard.bootstrapper.setPanelHasLoaded(panelId);\n });\n } else {\n dashboard.bootstrapper.setPanelHasLoaded(panelId);\n }\n }\n },\n [dashboard.bootstrapper, dispatch, panelId, panelProps.refreshOnStart],\n );\n\n const contextValue = useMemo<TPanelContext>(\n () => ({\n setTitle,\n setLayout,\n panelProps,\n setRef,\n }),\n [setTitle, setLayout, panelProps, setRef],\n );\n\n return { title, footer, handleFooterClick, contextValue, ref };\n}\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;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePanelContextLayout.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|