@apia/components 2.0.12 → 2.0.14
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.
|
@@ -2,6 +2,7 @@ import { jsx } from '@apia/theme/jsx-runtime';
|
|
|
2
2
|
import { usePrevious } from '@apia/util';
|
|
3
3
|
import { useModal } from '../../../components/modals/hooks/useModal.js';
|
|
4
4
|
import { Modal } from '../../../components/modals/Modal.js';
|
|
5
|
+
import { Box } from '@apia/theme';
|
|
5
6
|
import { Confirm } from '../../../components/modals/layout/Confirm.js';
|
|
6
7
|
|
|
7
8
|
const OpenModal = (props) => {
|
|
@@ -26,11 +27,18 @@ const OpenModal = (props) => {
|
|
|
26
27
|
onCancel: () => {
|
|
27
28
|
modalProps.hide();
|
|
28
29
|
},
|
|
29
|
-
children: props.children
|
|
30
|
+
children: props.html ? /* @__PURE__ */ jsx(Box, { dangerouslySetInnerHTML: { __html: props.html } }) : props.children
|
|
30
31
|
}
|
|
31
32
|
) });
|
|
32
33
|
}
|
|
33
|
-
return /* @__PURE__ */ jsx(
|
|
34
|
+
return /* @__PURE__ */ jsx(
|
|
35
|
+
Modal,
|
|
36
|
+
{
|
|
37
|
+
...props,
|
|
38
|
+
...modalProps,
|
|
39
|
+
children: props.html ? /* @__PURE__ */ jsx(Box, { dangerouslySetInnerHTML: { __html: props.html } }) : props.children
|
|
40
|
+
}
|
|
41
|
+
);
|
|
34
42
|
};
|
|
35
43
|
|
|
36
44
|
export { OpenModal };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OpenModal.js","sources":["../../../../src/objects/ApiaUtil/modals/OpenModal.tsx"],"sourcesContent":["import { usePrevious } from '@apia/util';\r\nimport { useModal } from '../../../components/modals/hooks/useModal';\r\nimport { Modal, TModal } from '../../../components/modals/Modal';\r\nimport { Confirm, IConfirm } from '../../../components';\r\nimport React from 'react';\r\n\r\nexport type TOpenModal = Pick<\r\n TModal,\r\n | 'NavBar'\r\n | 'Portal'\r\n | 'children'\r\n | 'className'\r\n | 'hideCloseButton'\r\n | 'initialFocusGetter'\r\n | 'initialFocusConfiguration'\r\n | 'maxWidth'\r\n | 'noHeader'\r\n | 'onExited'\r\n | 'shouldCloseOnEsc'\r\n | 'shouldCloseOnOverlayClick'\r\n | 'size'\r\n | 'stretch'\r\n | 'title'\r\n | 'variant'\r\n | 'draggable'\r\n | 'onClose'\r\n | 'onDragStart'\r\n | 'defaultPosition'\r\n> & {\r\n id?: string;\r\n children?: React.ReactNode;\r\n confirmProps?: Omit<IConfirm, 'onConfirmOk' | 'onConfirmCancel' | 'children'>;\r\n /**\r\n * Determina si el modal debe abrirse al ser montado o no.\r\n */\r\n isDefaultOpen?: boolean;\r\n /**\r\n * El método onConfirm permite pasar un callback que devuelva una promesa. En\r\n * caso de ser así, si esta promesa resuelve a true, el modal será cerrado o\r\n * en caso contrario permanecerá abierto. Es útil en situaciones en donde es\r\n * necesario corroborar una condición antes de cerrar el modal. En la\r\n * situación en que se decida mantener el modal abierto, está a cargo del\r\n * usuario del componente realizar las indicaciones visuales correspondientes\r\n * para indicar al usuario el motivo por el cual el modal no fue cerrado.\r\n */\r\n onConfirm?: () => Promise<boolean> | boolean | void;\r\n /**\r\n * El método onCancel será llamado siempre que un usuario cierre el modal,\r\n * excepto cuando haya presionado en onConfirm.\r\n */\r\n onCancel?: () => void;\r\n /**\r\n * Permite introducir html directamente dentro del contenedor del modal.\r\n */\r\n html?: string;\r\n};\r\n\r\nexport const OpenModal = (props: TOpenModal & { isOpen: boolean }) => {\r\n const modalProps = useModal({\r\n isDefaultOpen: true,\r\n onExited: props.onExited,\r\n });\r\n\r\n const previousOpenProp = usePrevious(props.isOpen);\r\n if (previousOpenProp.current !== props.isOpen && !props.isOpen) {\r\n modalProps.hide();\r\n }\r\n\r\n const confirmProps = props.confirmProps;\r\n if (props.onConfirm || props.onCancel) {\r\n return (\r\n <Modal {...props} {...modalProps}>\r\n <Confirm\r\n {...confirmProps}\r\n onConfirm={() => {\r\n props.onConfirm?.();\r\n modalProps.hide();\r\n }}\r\n onCancel={() => {\r\n props.onCancel;\r\n modalProps.hide();\r\n }}\r\n children={props.children}\r\n />\r\n </Modal>\r\n );\r\n }\r\n\r\n return <Modal
|
|
1
|
+
{"version":3,"file":"OpenModal.js","sources":["../../../../src/objects/ApiaUtil/modals/OpenModal.tsx"],"sourcesContent":["import { usePrevious } from '@apia/util';\r\nimport { useModal } from '../../../components/modals/hooks/useModal';\r\nimport { Modal, TModal } from '../../../components/modals/Modal';\r\nimport { Confirm, IConfirm } from '../../../components';\r\nimport React from 'react';\r\nimport { Box } from '@apia/theme';\r\n\r\nexport type TOpenModal = Pick<\r\n TModal,\r\n | 'NavBar'\r\n | 'Portal'\r\n | 'children'\r\n | 'className'\r\n | 'hideCloseButton'\r\n | 'initialFocusGetter'\r\n | 'initialFocusConfiguration'\r\n | 'maxWidth'\r\n | 'noHeader'\r\n | 'onExited'\r\n | 'shouldCloseOnEsc'\r\n | 'shouldCloseOnOverlayClick'\r\n | 'size'\r\n | 'stretch'\r\n | 'title'\r\n | 'variant'\r\n | 'draggable'\r\n | 'onClose'\r\n | 'onDragStart'\r\n | 'defaultPosition'\r\n> & {\r\n id?: string;\r\n children?: React.ReactNode;\r\n confirmProps?: Omit<IConfirm, 'onConfirmOk' | 'onConfirmCancel' | 'children'>;\r\n /**\r\n * Determina si el modal debe abrirse al ser montado o no.\r\n */\r\n isDefaultOpen?: boolean;\r\n /**\r\n * El método onConfirm permite pasar un callback que devuelva una promesa. En\r\n * caso de ser así, si esta promesa resuelve a true, el modal será cerrado o\r\n * en caso contrario permanecerá abierto. Es útil en situaciones en donde es\r\n * necesario corroborar una condición antes de cerrar el modal. En la\r\n * situación en que se decida mantener el modal abierto, está a cargo del\r\n * usuario del componente realizar las indicaciones visuales correspondientes\r\n * para indicar al usuario el motivo por el cual el modal no fue cerrado.\r\n */\r\n onConfirm?: () => Promise<boolean> | boolean | void;\r\n /**\r\n * El método onCancel será llamado siempre que un usuario cierre el modal,\r\n * excepto cuando haya presionado en onConfirm.\r\n */\r\n onCancel?: () => void;\r\n /**\r\n * Permite introducir html directamente dentro del contenedor del modal.\r\n */\r\n html?: string;\r\n};\r\n\r\nexport const OpenModal = (props: TOpenModal & { isOpen: boolean }) => {\r\n const modalProps = useModal({\r\n isDefaultOpen: true,\r\n onExited: props.onExited,\r\n });\r\n\r\n const previousOpenProp = usePrevious(props.isOpen);\r\n if (previousOpenProp.current !== props.isOpen && !props.isOpen) {\r\n modalProps.hide();\r\n }\r\n\r\n const confirmProps = props.confirmProps;\r\n if (props.onConfirm || props.onCancel) {\r\n return (\r\n <Modal {...props} {...modalProps}>\r\n <Confirm\r\n {...confirmProps}\r\n onConfirm={() => {\r\n props.onConfirm?.();\r\n modalProps.hide();\r\n }}\r\n onCancel={() => {\r\n props.onCancel;\r\n modalProps.hide();\r\n }}\r\n children={\r\n props.html ? (\r\n <Box dangerouslySetInnerHTML={{ __html: props.html }} />\r\n ) : (\r\n props.children\r\n )\r\n }\r\n />\r\n </Modal>\r\n );\r\n }\r\n\r\n return (\r\n <Modal\r\n {...props}\r\n {...modalProps}\r\n children={\r\n props.html ? (\r\n <Box dangerouslySetInnerHTML={{ __html: props.html }} />\r\n ) : (\r\n props.children\r\n )\r\n }\r\n />\r\n );\r\n};\r\n"],"names":[],"mappings":";;;;;;;AA0Da,MAAA,SAAA,GAAY,CAAC,KAA4C,KAAA;AACpE,EAAA,MAAM,aAAa,QAAS,CAAA;AAAA,IAC1B,aAAe,EAAA,IAAA;AAAA,IACf,UAAU,KAAM,CAAA,QAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAM,MAAA,gBAAA,GAAmB,WAAY,CAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AACjD,EAAA,IAAI,iBAAiB,OAAY,KAAA,KAAA,CAAM,MAAU,IAAA,CAAC,MAAM,MAAQ,EAAA;AAC9D,IAAA,UAAA,CAAW,IAAK,EAAA,CAAA;AAAA,GAClB;AAEA,EAAA,MAAM,eAAe,KAAM,CAAA,YAAA,CAAA;AAC3B,EAAI,IAAA,KAAA,CAAM,SAAa,IAAA,KAAA,CAAM,QAAU,EAAA;AACrC,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAO,GAAG,KAAA,EAAQ,GAAG,UACpB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,WAAW,MAAM;AACf,UAAA,KAAA,CAAM,SAAY,IAAA,CAAA;AAClB,UAAA,UAAA,CAAW,IAAK,EAAA,CAAA;AAAA,SAClB;AAAA,QACA,UAAU,MAAM;AAEd,UAAA,UAAA,CAAW,IAAK,EAAA,CAAA;AAAA,SAClB;AAAA,QACA,QACE,EAAA,KAAA,CAAM,IACJ,mBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,uBAAA,EAAyB,EAAE,MAAA,EAAQ,KAAM,CAAA,IAAA,EAAQ,EAAA,CAAA,GAEtD,KAAM,CAAA,QAAA;AAAA,OAAA;AAAA,KAId,EAAA,CAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,QACE,EAAA,KAAA,CAAM,IACJ,mBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,uBAAA,EAAyB,EAAE,MAAA,EAAQ,KAAM,CAAA,IAAA,EAAQ,EAAA,CAAA,GAEtD,KAAM,CAAA,QAAA;AAAA,KAAA;AAAA,GAGZ,CAAA;AAEJ;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apia/components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.14",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"author": "Alexis Leite <alexisleite@live.com>",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,12 +13,12 @@
|
|
|
13
13
|
"libWatch": "rollup --watch --config ../../config/rollup.common.mjs --environment MODE:development,ENTRY:index.tsx,WATCH:true"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@apia/dom-store": "^2.0.
|
|
17
|
-
"@apia/icons": "^2.0.
|
|
18
|
-
"@apia/notifications": "^2.0.
|
|
19
|
-
"@apia/store": "^2.0.
|
|
20
|
-
"@apia/theme": "^2.0.
|
|
21
|
-
"@apia/util": "^2.0.
|
|
16
|
+
"@apia/dom-store": "^2.0.14",
|
|
17
|
+
"@apia/icons": "^2.0.14",
|
|
18
|
+
"@apia/notifications": "^2.0.14",
|
|
19
|
+
"@apia/store": "^2.0.14",
|
|
20
|
+
"@apia/theme": "^2.0.14",
|
|
21
|
+
"@apia/util": "^2.0.14",
|
|
22
22
|
"@theme-ui/color": "0.16.2",
|
|
23
23
|
"@theme-ui/match-media": "0.16.2",
|
|
24
24
|
"react-animate-height": "^3.2.2",
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"access": "public",
|
|
48
48
|
"registry": "https://registry.npmjs.org/"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "1a3720a5981722143d4a2e9a8d5e8d148e3bba0f"
|
|
51
51
|
}
|