@laerdal/life-react-components 1.5.1-dev.1 → 1.5.1-dev.4
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.
|
@@ -275,7 +275,8 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
275
275
|
};
|
|
276
276
|
|
|
277
277
|
_react.default.useEffect(function () {
|
|
278
|
-
var yPos =
|
|
278
|
+
var yPos = window.scrollY;
|
|
279
|
+
console.log('yPos:' + yPos);
|
|
279
280
|
|
|
280
281
|
if (isModalOpen) {
|
|
281
282
|
document.body.setAttribute('style', "position: fixed;\n left: 0; right: 0;\n top: -".concat(yPos, "px"));
|
|
@@ -287,14 +288,14 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
287
288
|
};
|
|
288
289
|
}, [isModalOpen]);
|
|
289
290
|
|
|
290
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
|
291
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalContainer.default, {
|
|
291
292
|
showModal: isModalOpen,
|
|
292
293
|
closeModal: closeModalAndClearInput,
|
|
293
294
|
minWidth: getMinWidth(),
|
|
294
295
|
maxWidth: getMaxWidth(),
|
|
295
296
|
modalHeight: "auto",
|
|
296
297
|
padding: getPadding(),
|
|
297
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.Column, {
|
|
298
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.Column, {
|
|
298
299
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
|
|
299
300
|
onSubmit: submitAction,
|
|
300
301
|
children: [topImage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.StyledModalHeader, {
|
|
@@ -338,7 +339,9 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
338
339
|
})]
|
|
339
340
|
})]
|
|
340
341
|
})
|
|
341
|
-
})
|
|
342
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
343
|
+
children: "we changed something....123"
|
|
344
|
+
})]
|
|
342
345
|
});
|
|
343
346
|
};
|
|
344
347
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n yOffset?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n yOffset\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const ModalTitle = (title: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n React.useEffect(()=>{\n let yPos = yOffset ? yOffset : 0;\n if(isModalOpen){ \n document.body.setAttribute('style', `position: fixed;\n left: 0; right: 0;\n top: -${yPos}px`);\n }\n return ()=>{\n document.body.setAttribute('style','');\n window.scrollTo(0,yPos);\n }\n },[isModalOpen]);\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","window","scrollY","console","log","document","body","setAttribute","scrollTo","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n yOffset?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n yOffset\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const ModalTitle = (title: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n React.useEffect(()=>{\n let yPos = window.scrollY;\n console.log('yPos:' + yPos);\n if(isModalOpen){ \n document.body.setAttribute('style', `position: fixed;\n left: 0; right: 0;\n top: -${yPos}px`);\n }\n return ()=>{\n document.body.setAttribute('style','');\n window.scrollTo(0,yPos);\n }\n },[isModalOpen]);\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n <p>we changed something....123</p>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}
|
|
@@ -255,7 +255,8 @@ export var ModalDialog = function ModalDialog(_ref) {
|
|
|
255
255
|
};
|
|
256
256
|
|
|
257
257
|
React.useEffect(function () {
|
|
258
|
-
var yPos =
|
|
258
|
+
var yPos = window.scrollY;
|
|
259
|
+
console.log('yPos:' + yPos);
|
|
259
260
|
|
|
260
261
|
if (isModalOpen) {
|
|
261
262
|
document.body.setAttribute('style', "position: fixed;\n left: 0; right: 0;\n top: -".concat(yPos, "px"));
|
|
@@ -266,14 +267,14 @@ export var ModalDialog = function ModalDialog(_ref) {
|
|
|
266
267
|
window.scrollTo(0, yPos);
|
|
267
268
|
};
|
|
268
269
|
}, [isModalOpen]);
|
|
269
|
-
return /*#__PURE__*/
|
|
270
|
+
return /*#__PURE__*/_jsxs(ModalContainer, {
|
|
270
271
|
showModal: isModalOpen,
|
|
271
272
|
closeModal: closeModalAndClearInput,
|
|
272
273
|
minWidth: getMinWidth(),
|
|
273
274
|
maxWidth: getMaxWidth(),
|
|
274
275
|
modalHeight: "auto",
|
|
275
276
|
padding: getPadding(),
|
|
276
|
-
children: /*#__PURE__*/_jsx(Column, {
|
|
277
|
+
children: [/*#__PURE__*/_jsx(Column, {
|
|
277
278
|
children: /*#__PURE__*/_jsxs("form", {
|
|
278
279
|
onSubmit: submitAction,
|
|
279
280
|
children: [topImage && /*#__PURE__*/_jsxs(StyledModalHeader, {
|
|
@@ -317,7 +318,9 @@ export var ModalDialog = function ModalDialog(_ref) {
|
|
|
317
318
|
})]
|
|
318
319
|
})]
|
|
319
320
|
})
|
|
320
|
-
})
|
|
321
|
+
}), /*#__PURE__*/_jsx("p", {
|
|
322
|
+
children: "we changed something....123"
|
|
323
|
+
})]
|
|
321
324
|
});
|
|
322
325
|
};
|
|
323
326
|
ModalDialog.propTypes = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","document","body","setAttribute","window","scrollTo","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n yOffset?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n yOffset\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const ModalTitle = (title: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n React.useEffect(()=>{\n let yPos = yOffset ? yOffset : 0;\n if(isModalOpen){ \n document.body.setAttribute('style', `position: fixed;\n left: 0; right: 0;\n top: -${yPos}px`);\n }\n return ()=>{\n document.body.setAttribute('style','');\n window.scrollTo(0,yPos);\n }\n },[isModalOpen]);\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ModalNote","TooltipWrapper","HyperLink","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","yOffset","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","useEffect","yPos","window","scrollY","console","log","document","body","setAttribute","scrollTo","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink } from '..';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string;\n topImage?: any;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n yOffset?: number;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n yOffset\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const ModalTitle = (title: string, size?: Size) => {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n React.useEffect(()=>{\n let yPos = window.scrollY;\n console.log('yPos:' + yPos);\n if(isModalOpen){ \n document.body.setAttribute('style', `position: fixed;\n left: 0; right: 0;\n top: -${yPos}px`);\n }\n return ()=>{\n document.body.setAttribute('style','');\n window.scrollTo(0,yPos);\n }\n },[isModalOpen]);\n\n return (\n <ModalContainer showModal={isModalOpen} closeModal={closeModalAndClearInput} minWidth={getMinWidth()} maxWidth={getMaxWidth()} modalHeight=\"auto\" padding={getPadding()}>\n <Column>\n <form onSubmit={submitAction}>\n {topImage && (\n <StyledModalHeader size={size} height={getImageHeight()} marginBottom={getMarginBottom()}>\n <img src={topImage} alt=\"Modal top\" />\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!topImage && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!topImage && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size}>{children}</ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n <p>we changed something....123</p>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
|