@laerdal/life-react-components 3.1.1-dev.1 → 3.1.1-dev.2.full
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/Image/ImageWithFallbacks.cjs +7 -5
- package/dist/Image/ImageWithFallbacks.cjs.map +1 -1
- package/dist/Image/ImageWithFallbacks.d.ts +3 -3
- package/dist/Image/ImageWithFallbacks.js +7 -5
- package/dist/Image/ImageWithFallbacks.js.map +1 -1
- package/dist/InputFields/Checkbox.cjs +2 -5
- package/dist/InputFields/Checkbox.cjs.map +1 -1
- package/dist/InputFields/Checkbox.js +2 -5
- package/dist/InputFields/Checkbox.js.map +1 -1
- package/dist/Modals/ModalContent.cjs +83 -27
- package/dist/Modals/ModalContent.cjs.map +1 -1
- package/dist/Modals/ModalContent.d.ts +4 -2
- package/dist/Modals/ModalContent.js +84 -28
- package/dist/Modals/ModalContent.js.map +1 -1
- package/dist/Modals/ModalTypes.cjs.map +1 -1
- package/dist/Modals/ModalTypes.d.ts +13 -3
- package/dist/Modals/ModalTypes.js.map +1 -1
- package/dist/Modals/index.cjs.map +1 -1
- package/dist/Modals/index.d.ts +1 -1
- package/dist/Modals/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -25,13 +25,14 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
25
25
|
(0, _inherits2.default)(ImageWithFallbacks, _React$Component);
|
|
26
26
|
var _super = _createSuper(ImageWithFallbacks);
|
|
27
27
|
function ImageWithFallbacks(props) {
|
|
28
|
+
var _this$props$fallbacks, _this$props$fallbacks2;
|
|
28
29
|
var _this;
|
|
29
30
|
(0, _classCallCheck2.default)(this, ImageWithFallbacks);
|
|
30
31
|
_this = _super.call(this, props);
|
|
31
32
|
_this.state = {
|
|
32
33
|
src: props.src,
|
|
33
34
|
fallbackIndex: 0,
|
|
34
|
-
fallbacks: _this.props.fallbacks.split('|'),
|
|
35
|
+
fallbacks: (_this$props$fallbacks = (_this$props$fallbacks2 = _this.props.fallbacks) === null || _this$props$fallbacks2 === void 0 ? void 0 : _this$props$fallbacks2.split('|')) !== null && _this$props$fallbacks !== void 0 ? _this$props$fallbacks : [],
|
|
35
36
|
loaded: false
|
|
36
37
|
};
|
|
37
38
|
return _this;
|
|
@@ -40,10 +41,11 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
40
41
|
key: "componentDidUpdate",
|
|
41
42
|
value: function componentDidUpdate(prevProps) {
|
|
42
43
|
if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {
|
|
44
|
+
var _this$props$fallbacks3, _this$props$fallbacks4;
|
|
43
45
|
this.setState({
|
|
44
46
|
src: this.props.src,
|
|
45
47
|
fallbackIndex: 0,
|
|
46
|
-
fallbacks: this.props.fallbacks.split('|'),
|
|
48
|
+
fallbacks: (_this$props$fallbacks3 = (_this$props$fallbacks4 = this.props.fallbacks) === null || _this$props$fallbacks4 === void 0 ? void 0 : _this$props$fallbacks4.split('|')) !== null && _this$props$fallbacks3 !== void 0 ? _this$props$fallbacks3 : [],
|
|
47
49
|
loaded: false
|
|
48
50
|
});
|
|
49
51
|
}
|
|
@@ -100,10 +102,10 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
100
102
|
return ImageWithFallbacks;
|
|
101
103
|
}(_react.default.Component);
|
|
102
104
|
(0, _defineProperty2.default)(ImageWithFallbacks, "propTypes", {
|
|
103
|
-
fallbacks: _propTypes.default.string
|
|
105
|
+
fallbacks: _propTypes.default.string,
|
|
104
106
|
src: _propTypes.default.string.isRequired,
|
|
105
|
-
alt: _propTypes.default.string
|
|
106
|
-
loader: _propTypes.default.bool
|
|
107
|
+
alt: _propTypes.default.string,
|
|
108
|
+
loader: _propTypes.default.bool
|
|
107
109
|
});
|
|
108
110
|
var _default = ImageWithFallbacks;
|
|
109
111
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageWithFallbacks.cjs","names":["ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","loader","loading","rest","onError","onLoad","React","Component"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\n fallbacks
|
|
1
|
+
{"version":3,"file":"ImageWithFallbacks.cjs","names":["ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","loader","loading","rest","onError","onLoad","React","Component"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\n fallbacks?: string;\n src: string;\n alt?: string;\n loader?: boolean;\n}\n\ntype ImageWithFallbacksState = {\n src: string;\n fallbackIndex: number;\n fallbacks: string[];\n loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n constructor(props: ImageWithFallbacksProps) {\n super(props);\n this.state = {\n src: props.src,\n fallbackIndex: 0,\n fallbacks: this.props.fallbacks?.split('|') ?? [],\n loaded: false,\n };\n }\n componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n this.setState({\n src: this.props.src,\n fallbackIndex: 0,\n fallbacks: this.props.fallbacks?.split('|') ?? [],\n loaded: false,\n });\n }\n }\n onError() {\n if (this.state.fallbackIndex > this.state.fallbacks.length) {\n return;\n }\n this.setState({\n src: this.state.fallbacks[this.state.fallbackIndex],\n fallbackIndex: this.state.fallbackIndex + 1,\n fallbacks: this.state.fallbacks,\n });\n }\n onLoad() {\n this.setState({ ...this.state, loaded: true });\n }\n render() {\n const {src, alt, fallbacks, loader, loading, ...rest} = this.props;\n return (\n <>\n <img src={this.state.src}\n onError={() => this.onError()}\n onChange={() => this.onLoad()}\n onLoad={() => this.onLoad()}\n alt={this.props.alt}\n {...rest}/>\n {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\n </>\n );\n }\n}\n\nexport default ImageWithFallbacks;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AACA;AAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBpBA,kBAAkB;EAAA;EAAA;EACtB,4BAAYC,KAA8B,EAAE;IAAA;IAAA;IAAA;IAC1C,0BAAMA,KAAK;IACX,MAAKC,KAAK,GAAG;MACXC,GAAG,EAAEF,KAAK,CAACE,GAAG;MACdC,aAAa,EAAE,CAAC;MAChBC,SAAS,qDAAE,MAAKJ,KAAK,CAACI,SAAS,2DAApB,uBAAsBC,KAAK,CAAC,GAAG,CAAC,yEAAI,EAAE;MACjDC,MAAM,EAAE;IACV,CAAC;IAAC;EACJ;EAAC;IAAA;IAAA,OACD,4BAAmBC,SAAkC,EAAE;MACrD,IAAIA,SAAS,CAACL,GAAG,KAAK,IAAI,CAACF,KAAK,CAACE,GAAG,IAAIK,SAAS,CAACH,SAAS,KAAK,IAAI,CAACJ,KAAK,CAACI,SAAS,EAAE;QAAA;QACpF,IAAI,CAACI,QAAQ,CAAC;UACZN,GAAG,EAAE,IAAI,CAACF,KAAK,CAACE,GAAG;UACnBC,aAAa,EAAE,CAAC;UAChBC,SAAS,sDAAE,IAAI,CAACJ,KAAK,CAACI,SAAS,2DAApB,uBAAsBC,KAAK,CAAC,GAAG,CAAC,2EAAI,EAAE;UACjDC,MAAM,EAAE;QACV,CAAC,CAAC;MACJ;IACF;EAAC;IAAA;IAAA,OACD,mBAAU;MACR,IAAI,IAAI,CAACL,KAAK,CAACE,aAAa,GAAG,IAAI,CAACF,KAAK,CAACG,SAAS,CAACK,MAAM,EAAE;QAC1D;MACF;MACA,IAAI,CAACD,QAAQ,CAAC;QACZN,GAAG,EAAE,IAAI,CAACD,KAAK,CAACG,SAAS,CAAC,IAAI,CAACH,KAAK,CAACE,aAAa,CAAC;QACnDA,aAAa,EAAE,IAAI,CAACF,KAAK,CAACE,aAAa,GAAG,CAAC;QAC3CC,SAAS,EAAE,IAAI,CAACH,KAAK,CAACG;MACxB,CAAC,CAAC;IACJ;EAAC;IAAA;IAAA,OACD,kBAAS;MACP,IAAI,CAACI,QAAQ,iCAAM,IAAI,CAACP,KAAK;QAAEK,MAAM,EAAE;MAAI,GAAG;IAChD;EAAC;IAAA;IAAA,OACD,kBAAS;MAAA;MACP,kBAAwD,IAAI,CAACN,KAAK;QAA3DE,GAAG,eAAHA,GAAG;QAAEQ,GAAG,eAAHA,GAAG;QAAEN,SAAS,eAATA,SAAS;QAAEO,MAAM,eAANA,MAAM;QAAEC,OAAO,eAAPA,OAAO;QAAKC,IAAI;MACpD,oBACE;QAAA,wBACE;UAAK,GAAG,EAAE,IAAI,CAACZ,KAAK,CAACC,GAAI;UACpB,OAAO,EAAE;YAAA,OAAM,MAAI,CAACY,OAAO,EAAE;UAAA,CAAC;UAC9B,QAAQ,EAAE;YAAA,OAAM,MAAI,CAACC,MAAM,EAAE;UAAA,CAAC;UAC9B,MAAM,EAAE;YAAA,OAAM,MAAI,CAACA,MAAM,EAAE;UAAA,CAAC;UAC5B,GAAG,EAAE,IAAI,CAACf,KAAK,CAACU;QAAI,GAChBG,IAAI,EAAG,EACf,IAAI,CAACb,KAAK,CAACW,MAAM,IAAI,CAAC,IAAI,CAACV,KAAK,CAACK,MAAM,iBAAI,qBAAC,kBAAgB;UAAC,EAAE,EAAC;QAAiC,EAAoB;MAAA,EACrH;IAEP;EAAC;EAAA;AAAA,EA9C8BU,cAAK,CAACC,SAAS;AAAA,8BAA1ClB,kBAAkB;EAbtBK,SAAS;EACTF,GAAG;EACHQ,GAAG;EACHC,MAAM;AAAA;AAAA,eA2DOZ,kBAAkB;AAAA"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'> {
|
|
3
|
-
fallbacks
|
|
3
|
+
fallbacks?: string;
|
|
4
4
|
src: string;
|
|
5
|
-
alt
|
|
6
|
-
loader
|
|
5
|
+
alt?: string;
|
|
6
|
+
loader?: boolean;
|
|
7
7
|
}
|
|
8
8
|
type ImageWithFallbacksState = {
|
|
9
9
|
src: string;
|
|
@@ -20,13 +20,14 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
20
20
|
_inherits(ImageWithFallbacks, _React$Component);
|
|
21
21
|
var _super = _createSuper(ImageWithFallbacks);
|
|
22
22
|
function ImageWithFallbacks(props) {
|
|
23
|
+
var _this$props$fallbacks, _this$props$fallbacks2;
|
|
23
24
|
var _this;
|
|
24
25
|
_classCallCheck(this, ImageWithFallbacks);
|
|
25
26
|
_this = _super.call(this, props);
|
|
26
27
|
_this.state = {
|
|
27
28
|
src: props.src,
|
|
28
29
|
fallbackIndex: 0,
|
|
29
|
-
fallbacks: _this.props.fallbacks.split('|'),
|
|
30
|
+
fallbacks: (_this$props$fallbacks = (_this$props$fallbacks2 = _this.props.fallbacks) === null || _this$props$fallbacks2 === void 0 ? void 0 : _this$props$fallbacks2.split('|')) !== null && _this$props$fallbacks !== void 0 ? _this$props$fallbacks : [],
|
|
30
31
|
loaded: false
|
|
31
32
|
};
|
|
32
33
|
return _this;
|
|
@@ -35,10 +36,11 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
35
36
|
key: "componentDidUpdate",
|
|
36
37
|
value: function componentDidUpdate(prevProps) {
|
|
37
38
|
if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {
|
|
39
|
+
var _this$props$fallbacks3, _this$props$fallbacks4;
|
|
38
40
|
this.setState({
|
|
39
41
|
src: this.props.src,
|
|
40
42
|
fallbackIndex: 0,
|
|
41
|
-
fallbacks: this.props.fallbacks.split('|'),
|
|
43
|
+
fallbacks: (_this$props$fallbacks3 = (_this$props$fallbacks4 = this.props.fallbacks) === null || _this$props$fallbacks4 === void 0 ? void 0 : _this$props$fallbacks4.split('|')) !== null && _this$props$fallbacks3 !== void 0 ? _this$props$fallbacks3 : [],
|
|
42
44
|
loaded: false
|
|
43
45
|
});
|
|
44
46
|
}
|
|
@@ -95,10 +97,10 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
95
97
|
return ImageWithFallbacks;
|
|
96
98
|
}(React.Component);
|
|
97
99
|
_defineProperty(ImageWithFallbacks, "propTypes", {
|
|
98
|
-
fallbacks: _pt.string
|
|
100
|
+
fallbacks: _pt.string,
|
|
99
101
|
src: _pt.string.isRequired,
|
|
100
|
-
alt: _pt.string
|
|
101
|
-
loader: _pt.bool
|
|
102
|
+
alt: _pt.string,
|
|
103
|
+
loader: _pt.bool
|
|
102
104
|
});
|
|
103
105
|
export default ImageWithFallbacks;
|
|
104
106
|
//# sourceMappingURL=ImageWithFallbacks.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageWithFallbacks.js","names":["LoadingIndicator","React","ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","loader","loading","rest","onError","onLoad","Component"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\n fallbacks
|
|
1
|
+
{"version":3,"file":"ImageWithFallbacks.js","names":["LoadingIndicator","React","ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","loader","loading","rest","onError","onLoad","Component"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\n fallbacks?: string;\n src: string;\n alt?: string;\n loader?: boolean;\n}\n\ntype ImageWithFallbacksState = {\n src: string;\n fallbackIndex: number;\n fallbacks: string[];\n loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n constructor(props: ImageWithFallbacksProps) {\n super(props);\n this.state = {\n src: props.src,\n fallbackIndex: 0,\n fallbacks: this.props.fallbacks?.split('|') ?? [],\n loaded: false,\n };\n }\n componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n this.setState({\n src: this.props.src,\n fallbackIndex: 0,\n fallbacks: this.props.fallbacks?.split('|') ?? [],\n loaded: false,\n });\n }\n }\n onError() {\n if (this.state.fallbackIndex > this.state.fallbacks.length) {\n return;\n }\n this.setState({\n src: this.state.fallbacks[this.state.fallbackIndex],\n fallbackIndex: this.state.fallbackIndex + 1,\n fallbacks: this.state.fallbacks,\n });\n }\n onLoad() {\n this.setState({ ...this.state, loaded: true });\n }\n render() {\n const {src, alt, fallbacks, loader, loading, ...rest} = this.props;\n return (\n <>\n <img src={this.state.src}\n onError={() => this.onError()}\n onChange={() => this.onLoad()}\n onLoad={() => this.onLoad()}\n alt={this.props.alt}\n {...rest}/>\n {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\n </>\n );\n }\n}\n\nexport default ImageWithFallbacks;\n"],"mappings":";;;;;;;;;;;;;AAAA,SAASA,gBAAgB,QAAQ,IAAI;AACrC,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA;AAAA;AAAA,IAgBpBC,kBAAkB;EAAA;EAAA;EACtB,4BAAYC,KAA8B,EAAE;IAAA;IAAA;IAAA;IAC1C,0BAAMA,KAAK;IACX,MAAKC,KAAK,GAAG;MACXC,GAAG,EAAEF,KAAK,CAACE,GAAG;MACdC,aAAa,EAAE,CAAC;MAChBC,SAAS,qDAAE,MAAKJ,KAAK,CAACI,SAAS,2DAApB,uBAAsBC,KAAK,CAAC,GAAG,CAAC,yEAAI,EAAE;MACjDC,MAAM,EAAE;IACV,CAAC;IAAC;EACJ;EAAC;IAAA;IAAA,OACD,4BAAmBC,SAAkC,EAAE;MACrD,IAAIA,SAAS,CAACL,GAAG,KAAK,IAAI,CAACF,KAAK,CAACE,GAAG,IAAIK,SAAS,CAACH,SAAS,KAAK,IAAI,CAACJ,KAAK,CAACI,SAAS,EAAE;QAAA;QACpF,IAAI,CAACI,QAAQ,CAAC;UACZN,GAAG,EAAE,IAAI,CAACF,KAAK,CAACE,GAAG;UACnBC,aAAa,EAAE,CAAC;UAChBC,SAAS,sDAAE,IAAI,CAACJ,KAAK,CAACI,SAAS,2DAApB,uBAAsBC,KAAK,CAAC,GAAG,CAAC,2EAAI,EAAE;UACjDC,MAAM,EAAE;QACV,CAAC,CAAC;MACJ;IACF;EAAC;IAAA;IAAA,OACD,mBAAU;MACR,IAAI,IAAI,CAACL,KAAK,CAACE,aAAa,GAAG,IAAI,CAACF,KAAK,CAACG,SAAS,CAACK,MAAM,EAAE;QAC1D;MACF;MACA,IAAI,CAACD,QAAQ,CAAC;QACZN,GAAG,EAAE,IAAI,CAACD,KAAK,CAACG,SAAS,CAAC,IAAI,CAACH,KAAK,CAACE,aAAa,CAAC;QACnDA,aAAa,EAAE,IAAI,CAACF,KAAK,CAACE,aAAa,GAAG,CAAC;QAC3CC,SAAS,EAAE,IAAI,CAACH,KAAK,CAACG;MACxB,CAAC,CAAC;IACJ;EAAC;IAAA;IAAA,OACD,kBAAS;MACP,IAAI,CAACI,QAAQ,iCAAM,IAAI,CAACP,KAAK;QAAEK,MAAM,EAAE;MAAI,GAAG;IAChD;EAAC;IAAA;IAAA,OACD,kBAAS;MAAA;MACP,kBAAwD,IAAI,CAACN,KAAK;QAA3DE,GAAG,eAAHA,GAAG;QAAEQ,GAAG,eAAHA,GAAG;QAAEN,SAAS,eAATA,SAAS;QAAEO,MAAM,eAANA,MAAM;QAAEC,OAAO,eAAPA,OAAO;QAAKC,IAAI;MACpD,oBACE;QAAA,wBACE;UAAK,GAAG,EAAE,IAAI,CAACZ,KAAK,CAACC,GAAI;UACpB,OAAO,EAAE;YAAA,OAAM,MAAI,CAACY,OAAO,EAAE;UAAA,CAAC;UAC9B,QAAQ,EAAE;YAAA,OAAM,MAAI,CAACC,MAAM,EAAE;UAAA,CAAC;UAC9B,MAAM,EAAE;YAAA,OAAM,MAAI,CAACA,MAAM,EAAE;UAAA,CAAC;UAC5B,GAAG,EAAE,IAAI,CAACf,KAAK,CAACU;QAAI,GAChBG,IAAI,EAAG,EACf,IAAI,CAACb,KAAK,CAACW,MAAM,IAAI,CAAC,IAAI,CAACV,KAAK,CAACK,MAAM,iBAAI,KAAC,gBAAgB;UAAC,EAAE,EAAC;QAAiC,EAAoB;MAAA,EACrH;IAEP;EAAC;EAAA;AAAA,EA9C8BR,KAAK,CAACkB,SAAS;AAAA,gBAA1CjB,kBAAkB;EAbtBK,SAAS;EACTF,GAAG;EACHQ,GAAG;EACHC,MAAM;AAAA;AA2DR,eAAeZ,kBAAkB"}
|
|
@@ -52,14 +52,11 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
52
52
|
select && select(!selected);
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
|
-
var handleClick = function handleClick(
|
|
55
|
+
var handleClick = function handleClick() {
|
|
56
56
|
if (disabled || readOnly) {
|
|
57
57
|
return;
|
|
58
58
|
}
|
|
59
|
-
|
|
60
|
-
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
61
|
-
select(!selected);
|
|
62
|
-
}
|
|
59
|
+
select && select(!selected);
|
|
63
60
|
};
|
|
64
61
|
size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
|
|
65
62
|
var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {SystemIcons} from '../icons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n\n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .checkbox-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n }\n }\n\n .checkbox-label {\n user-select: none;\n cursor: inherit;\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):not(.readonly):focus {\n ${focusStyles}\n }\n\n &:not(.disabled):not(.readonly):hover {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):not(.readonly):active {\n .checkbox-icon {\n background: ${COLORS.primary_100};\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.readonly {\n cursor: inherit;\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n\n .checkbox-icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n\n &.dropdown-hover:not(.disabled) {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n id,\n selected,\n select,\n label,\n invalid,\n iconPointerEventsTransparent,\n disabled,\n margin,\n size,\n semiSelected,\n children,\n readOnly,\n tabIndexVal,\n dataTestId,\n className,\n ...rest\n }, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled && !readOnly) {\n select && select(!selected);\n }\n };\n\n const handleClick = () => {\n if (disabled || readOnly) {\n return;\n }\n select && select(!selected);\n };\n\n size = size ?? Size.Medium;\n\n const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n return (\n <StyledCheckBox key={id}\n ref={ref}\n disabled={disabled}\n className={cls}\n aria-checked={selected}\n selected={selected}\n tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n invalid={invalid}\n margin={margin}\n onClick={handleClick}\n onKeyDown={onKeyPress}\n onMouseDown={defaultOnMouseDownHandler}\n {...rest}>\n <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\n {\n selected\n ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n : semiSelected\n ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n }\n </div>\n {\n label &&\n (\n <label className={'checkbox-label'}\n htmlFor={id}>\n {label}\n </label>\n )\n }\n {\n !label &&\n <label className={'checkbox-label'}\n htmlFor={id}>\n {children}\n </label>\n }\n </StyledCheckBox>\n );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
|
|
@@ -42,14 +42,11 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
42
42
|
select && select(!selected);
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
|
-
var handleClick = function handleClick(
|
|
45
|
+
var handleClick = function handleClick() {
|
|
46
46
|
if (disabled || readOnly) {
|
|
47
47
|
return;
|
|
48
48
|
}
|
|
49
|
-
|
|
50
|
-
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
51
|
-
select(!selected);
|
|
52
|
-
}
|
|
49
|
+
select && select(!selected);
|
|
53
50
|
};
|
|
54
51
|
size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
|
|
55
52
|
var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {SystemIcons} from '../icons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n\n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .checkbox-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n }\n }\n\n .checkbox-label {\n user-select: none;\n cursor: inherit;\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n .checkbox-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):not(.readonly):focus {\n ${focusStyles}\n }\n\n &:not(.disabled):not(.readonly):hover {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):not(.readonly):active {\n .checkbox-icon {\n background: ${COLORS.primary_100};\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.readonly {\n cursor: inherit;\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .checkbox-icon,\n .checkbox-label {\n pointer-events: none;\n }\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n\n .checkbox-icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n\n &.dropdown-hover:not(.disabled) {\n .checkbox-icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n id,\n selected,\n select,\n label,\n invalid,\n iconPointerEventsTransparent,\n disabled,\n margin,\n size,\n semiSelected,\n children,\n readOnly,\n tabIndexVal,\n dataTestId,\n className,\n ...rest\n }, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled && !readOnly) {\n select && select(!selected);\n }\n };\n\n const handleClick = () => {\n if (disabled || readOnly) {\n return;\n }\n select && select(!selected);\n };\n\n size = size ?? Size.Medium;\n\n const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n return (\n <StyledCheckBox key={id}\n ref={ref}\n disabled={disabled}\n className={cls}\n aria-checked={selected}\n selected={selected}\n tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n invalid={invalid}\n margin={margin}\n onClick={handleClick}\n onKeyDown={onKeyPress}\n onMouseDown={defaultOnMouseDownHandler}\n {...rest}>\n <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\n {\n selected\n ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n : semiSelected\n ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n }\n </div>\n {\n label &&\n (\n <label className={'checkbox-label'}\n htmlFor={id}>\n {label}\n </label>\n )\n }\n {\n !label &&\n <label className={'checkbox-label'}\n htmlFor={id}>\n {children}\n </label>\n }\n </StyledCheckBox>\n );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
|
|
@@ -18,26 +18,32 @@ var _Tooltips = require("../Tooltips");
|
|
|
18
18
|
var _Button = require("../Button");
|
|
19
19
|
var _icons = require("../icons");
|
|
20
20
|
var _HyperLink = require("../HyperLink");
|
|
21
|
+
var _Dropdown = require("../Dropdown");
|
|
22
|
+
var _Toggles = require("../Toggles");
|
|
23
|
+
var _Image = require("../Image");
|
|
21
24
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
22
|
-
var _excluded = ["icon"],
|
|
23
|
-
_excluded2 = ["
|
|
24
|
-
_excluded3 = ["
|
|
25
|
-
_excluded4 = ["
|
|
26
|
-
|
|
25
|
+
var _excluded = ["icon", "componentType"],
|
|
26
|
+
_excluded2 = ["componentType"],
|
|
27
|
+
_excluded3 = ["componentType"],
|
|
28
|
+
_excluded4 = ["text", "variant", "action"],
|
|
29
|
+
_excluded5 = ["text", "variant", "action"],
|
|
30
|
+
_excluded6 = ["action", "text"];
|
|
31
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
27
32
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
28
33
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
29
|
-
var HeaderText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n
|
|
34
|
+
var HeaderText = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n &:not(:first-child) {\n padding-left: 0 !important;\n }\n\n"])));
|
|
30
35
|
var HeaderTitle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.black));
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
var
|
|
37
|
-
var
|
|
38
|
-
var
|
|
39
|
-
var
|
|
40
|
-
var
|
|
36
|
+
var HeaderActions = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n"])));
|
|
37
|
+
var HeaderWithImageActions = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n position: absolute;\n\n button:only-child {\n justify-self: flex-end;\n }\n\n top: 4px;\n left: 4px;\n right: 4px;\n\n .medium & {\n top: 12px;\n left: 12px;\n right: 12px;\n }\n\n .large & {\n top: 20px;\n left: 20px;\n right: 20px;\n }\n"])));
|
|
38
|
+
var HeaderWithImage = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n\n img {\n object-fit: cover;\n width: 100%;\n height: 160px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n }\n\n .medium & {\n img {\n height: 200px;\n }\n }\n\n .large & {\n img {\n height: 240px;\n }\n }\n"])));
|
|
39
|
+
var Header = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ", " {\n height: max-content;\n }\n"])), _Tooltips.TooltipContainer);
|
|
40
|
+
var Content = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ", "\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
|
|
41
|
+
var FooterLeftContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n"])));
|
|
42
|
+
var FooterLeftNote = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ", "\n"])), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
|
|
43
|
+
var FooterLeftLink = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.primary_500));
|
|
44
|
+
var FooterRightContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n gap: 8px;\n margin-left: auto;\n"])));
|
|
45
|
+
var Footer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n"])));
|
|
46
|
+
var Wrapper = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: max-content;\n\n max-height: calc(100vh - 32px);\n max-width: calc(100vw - 32px);\n\n &.medium {\n max-height: calc(100vh - 64px);\n max-width: calc(100vw - 64px);\n\n ", " {\n padding: 12px 12px 4px 12px;\n\n ", " {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ", " {\n ", "\n }\n }\n }\n\n ", " {\n padding: 0 16px 0 24px;\n }\n\n ", " {\n padding: 12px 24px 20px 24px;\n\n ", " {\n ", "\n gap: 6px;\n }\n\n ", " {\n a {\n gap: 6px;\n }\n\n ", "\n }\n\n ", " {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ", " {\n padding: 20px 20px 4px 20px;\n\n ", " {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ", " {\n ", "\n }\n }\n }\n\n ", " {\n padding: 0 24px 0 32px;\n }\n\n ", " {\n padding: 16px 32px 32px 32px;\n\n ", " {\n ", "\n gap: 8px;\n }\n\n ", " {\n a {\n gap: 8px;\n }\n\n ", "\n }\n\n ", " {\n gap: 16px;\n }\n }\n }\n"])), Header, HeaderText, HeaderTitle, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null), FooterLeftLink, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), FooterRightContainer, Header, HeaderText, HeaderTitle, (0, _styles.ComponentXLStyling)(_styles.ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), FooterLeftLink, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null), FooterRightContainer);
|
|
41
47
|
var ModalContent = function ModalContent(props) {
|
|
42
48
|
var _props$size, _props$footerActions;
|
|
43
49
|
var tooltip = function tooltip() {
|
|
@@ -65,11 +71,32 @@ var ModalContent = function ModalContent(props) {
|
|
|
65
71
|
var headerActions = function headerActions() {
|
|
66
72
|
var _props$headerActions;
|
|
67
73
|
return (_props$headerActions = props.headerActions) === null || _props$headerActions === void 0 ? void 0 : _props$headerActions.map(function (action, index) {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
74
|
+
switch (action.componentType) {
|
|
75
|
+
case 'icon':
|
|
76
|
+
{
|
|
77
|
+
var icon = action.icon,
|
|
78
|
+
componentType = action.componentType,
|
|
79
|
+
rest = (0, _objectWithoutProperties2.default)(action, _excluded);
|
|
80
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, _objectSpread(_objectSpread({}, rest), {}, {
|
|
81
|
+
children: icon
|
|
82
|
+
}), action.id || index);
|
|
83
|
+
}
|
|
84
|
+
case 'dropdown':
|
|
85
|
+
{
|
|
86
|
+
var _componentType = action.componentType,
|
|
87
|
+
_rest = (0, _objectWithoutProperties2.default)(action, _excluded2);
|
|
88
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownButton, _objectSpread({
|
|
89
|
+
type: 'icon',
|
|
90
|
+
size: props.size
|
|
91
|
+
}, _rest));
|
|
92
|
+
}
|
|
93
|
+
case 'toggle':
|
|
94
|
+
{
|
|
95
|
+
var _componentType2 = action.componentType,
|
|
96
|
+
_rest2 = (0, _objectWithoutProperties2.default)(action, _excluded3);
|
|
97
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggles.ToggleButton, _objectSpread({}, _rest2));
|
|
98
|
+
}
|
|
99
|
+
}
|
|
73
100
|
});
|
|
74
101
|
};
|
|
75
102
|
var getLeftActionIconElement = function getLeftActionIconElement() {
|
|
@@ -87,7 +114,7 @@ var ModalContent = function ModalContent(props) {
|
|
|
87
114
|
text = _ref.text,
|
|
88
115
|
variant = _ref.variant,
|
|
89
116
|
action = _ref.action,
|
|
90
|
-
rest = (0, _objectWithoutProperties2.default)(_ref,
|
|
117
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded4);
|
|
91
118
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({}, rest), {}, {
|
|
92
119
|
size: props.size,
|
|
93
120
|
onClick: action,
|
|
@@ -101,9 +128,9 @@ var ModalContent = function ModalContent(props) {
|
|
|
101
128
|
_text = _ref2.text,
|
|
102
129
|
_variant = _ref2.variant,
|
|
103
130
|
_action = _ref2.action,
|
|
104
|
-
|
|
131
|
+
_rest3 = (0, _objectWithoutProperties2.default)(_ref2, _excluded5);
|
|
105
132
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterLeftLink, {
|
|
106
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HyperLink.HyperLink, _objectSpread(_objectSpread({},
|
|
133
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HyperLink.HyperLink, _objectSpread(_objectSpread({}, _rest3), {}, {
|
|
107
134
|
variant: _variant !== null && _variant !== void 0 ? _variant : 'default',
|
|
108
135
|
onClick: function onClick(e) {
|
|
109
136
|
if (_action) {
|
|
@@ -131,7 +158,36 @@ var ModalContent = function ModalContent(props) {
|
|
|
131
158
|
closeModal: props.closeAction,
|
|
132
159
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
|
|
133
160
|
className: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : _types.Size.Medium,
|
|
134
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
161
|
+
children: [props.image && /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderWithImage, {
|
|
162
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.ImageWithFallbacks, _objectSpread({}, props.image)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderWithImageActions, {
|
|
163
|
+
children: [props.onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
164
|
+
variant: "secondary",
|
|
165
|
+
shape: "circular",
|
|
166
|
+
action: props.onBack,
|
|
167
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowLineLeft, {})
|
|
168
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
169
|
+
dataTestId: 'content-modal-close-button',
|
|
170
|
+
id: 'content-modal-close-button',
|
|
171
|
+
variant: "secondary",
|
|
172
|
+
shape: "circular",
|
|
173
|
+
action: props.closeAction,
|
|
174
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Close, {
|
|
175
|
+
size: "24px",
|
|
176
|
+
color: _styles.COLORS.neutral_600
|
|
177
|
+
})
|
|
178
|
+
})]
|
|
179
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
|
|
180
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderText, {
|
|
181
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderTitle, {
|
|
182
|
+
children: props.title
|
|
183
|
+
}), !!props.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Note, {
|
|
184
|
+
children: props.note
|
|
185
|
+
})]
|
|
186
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderActions, {
|
|
187
|
+
children: [tooltip(), headerActions()]
|
|
188
|
+
})]
|
|
189
|
+
})]
|
|
190
|
+
}), !props.image && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
|
|
135
191
|
children: [props.onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
|
|
136
192
|
variant: "secondary",
|
|
137
193
|
shape: "circular",
|
|
@@ -140,7 +196,7 @@ var ModalContent = function ModalContent(props) {
|
|
|
140
196
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderText, {
|
|
141
197
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderTitle, {
|
|
142
198
|
children: props.title
|
|
143
|
-
}), !!props.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
199
|
+
}), !!props.note && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Note, {
|
|
144
200
|
children: props.note
|
|
145
201
|
})]
|
|
146
202
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(HeaderActions, {
|
|
@@ -165,7 +221,7 @@ var ModalContent = function ModalContent(props) {
|
|
|
165
221
|
children: (_props$footerActions = props.footerActions) === null || _props$footerActions === void 0 ? void 0 : _props$footerActions.map(function (item, index) {
|
|
166
222
|
var action = item.action,
|
|
167
223
|
text = item.text,
|
|
168
|
-
rest = (0, _objectWithoutProperties2.default)(item,
|
|
224
|
+
rest = (0, _objectWithoutProperties2.default)(item, _excluded6);
|
|
169
225
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({}, rest), {}, {
|
|
170
226
|
onClick: action,
|
|
171
227
|
size: props.size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderNote","ComponentXXSStyling","Regular","neutral_600","HeaderActions","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","React","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n \n &:not(:first-child) {\n padding-left: 0 !important;\n }\n \n`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n width: max-content;\n\n max-height: calc(100vh - 32px);\n max-width: calc(100vw - 32px);\n\n &.medium {\n max-height: calc(100vh - 64px);\n max-width: calc(100vw - 64px);\n\n ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n headerActions?: IconButtonAction[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n const {icon, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {getLeftActionIconElement()}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderActions","HeaderWithImageActions","HeaderWithImage","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","ComponentXXSStyling","neutral_600","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","componentType","icon","rest","id","size","getLeftActionIconElement","leftFooterAction","React","cloneElement","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","image","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {\n ButtonAction,\n ModalHeaderIconButton,\n LeftFooterAction,\n LeftFooterButton,\n LeftFooterHyperlink,\n ModalHeaderButtons\n} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling, Note,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\nimport {ImageWithFallbacksProps} from \"../Image/ImageWithFallbacks\";\nimport {DropdownButton} from \"../Dropdown\";\nimport {ToggleButton} from \"../Toggles\";\nimport {ImageWithFallbacks} from \"../Image\";\n\nconst HeaderText = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n &:not(:first-child) {\n padding-left: 0 !important;\n }\n\n`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst HeaderWithImageActions = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n position: absolute;\n\n button:only-child {\n justify-self: flex-end;\n }\n\n top: 4px;\n left: 4px;\n right: 4px;\n\n .medium & {\n top: 12px;\n left: 12px;\n right: 12px;\n }\n\n .large & {\n top: 20px;\n left: 20px;\n right: 20px;\n }\n`;\n\nconst HeaderWithImage = styled.div`\n position: relative;\n display: flex;\n flex-direction: column;\n\n img {\n object-fit: cover;\n width: 100%;\n height: 160px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n }\n\n .medium & {\n img {\n height: 200px;\n }\n }\n\n .large & {\n img {\n height: 240px;\n }\n }\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n width: max-content;\n\n max-height: calc(100vh - 32px);\n max-width: calc(100vw - 32px);\n\n &.medium {\n max-height: calc(100vh - 64px);\n max-width: calc(100vw - 64px);\n\n ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n image?: ImageWithFallbacksProps;\n headerActions?: ModalHeaderButtons[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n switch (action.componentType) {\n case 'icon': {\n const {icon, componentType, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n case 'dropdown': {\n const {componentType, ...rest} = action;\n return <DropdownButton type={'icon'} size={props.size} {...rest}/>\n }\n case 'toggle': {\n const {componentType, ...rest} = action;\n return <ToggleButton {...rest}/>\n }\n }\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {getLeftActionIconElement()}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n {\n props.image &&\n <HeaderWithImage>\n <ImageWithFallbacks {...props.image}/>\n <HeaderWithImageActions>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n\n }\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderWithImageActions>\n\n <Header>\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n </HeaderActions>\n </Header>\n </HeaderWithImage>\n }\n {\n !props.image &&\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n }\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Size } from '../types';
|
|
3
|
-
import { ButtonAction,
|
|
3
|
+
import { ButtonAction, LeftFooterAction, ModalHeaderButtons } from './ModalTypes';
|
|
4
|
+
import { ImageWithFallbacksProps } from "../Image/ImageWithFallbacks";
|
|
4
5
|
interface ModalContentProps {
|
|
5
6
|
size?: Size.Small | Size.Medium | Size.Large;
|
|
6
7
|
isModalOpen: boolean;
|
|
@@ -8,7 +9,8 @@ interface ModalContentProps {
|
|
|
8
9
|
onBack?: () => void;
|
|
9
10
|
title: string;
|
|
10
11
|
note?: string;
|
|
11
|
-
|
|
12
|
+
image?: ImageWithFallbacksProps;
|
|
13
|
+
headerActions?: ModalHeaderButtons[];
|
|
12
14
|
footerActions?: ButtonAction[];
|
|
13
15
|
leftFooterAction?: LeftFooterAction;
|
|
14
16
|
tooltip?: string;
|
|
@@ -2,36 +2,42 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
3
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
4
4
|
import _pt from "prop-types";
|
|
5
|
-
var _excluded = ["icon"],
|
|
6
|
-
_excluded2 = ["
|
|
7
|
-
_excluded3 = ["
|
|
8
|
-
_excluded4 = ["
|
|
9
|
-
|
|
5
|
+
var _excluded = ["icon", "componentType"],
|
|
6
|
+
_excluded2 = ["componentType"],
|
|
7
|
+
_excluded3 = ["componentType"],
|
|
8
|
+
_excluded4 = ["text", "variant", "action"],
|
|
9
|
+
_excluded5 = ["text", "variant", "action"],
|
|
10
|
+
_excluded6 = ["action", "text"];
|
|
11
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
10
12
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
11
13
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
12
14
|
import React from 'react';
|
|
13
15
|
import { Size } from '../types';
|
|
14
16
|
import { ModalContainer } from './index';
|
|
15
17
|
import styled from 'styled-components';
|
|
16
|
-
import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXLStyling, ComponentXSStyling, ComponentXXSStyling, scrollBarStyling } from '../styles';
|
|
18
|
+
import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXLStyling, ComponentXSStyling, ComponentXXSStyling, Note, scrollBarStyling } from '../styles';
|
|
17
19
|
import { TooltipContainer, TooltipWrapper } from '../Tooltips';
|
|
18
20
|
import { Button, IconButton } from '../Button';
|
|
19
21
|
import { SystemIcons } from '../icons';
|
|
20
22
|
import { HyperLink } from '../HyperLink';
|
|
23
|
+
import { DropdownButton } from "../Dropdown";
|
|
24
|
+
import { ToggleButton } from "../Toggles";
|
|
25
|
+
import { ImageWithFallbacks } from "../Image";
|
|
21
26
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
22
27
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
23
|
-
var HeaderText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n
|
|
28
|
+
var HeaderText = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n &:not(:first-child) {\n padding-left: 0 !important;\n }\n\n"])));
|
|
24
29
|
var HeaderTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n"])), ComponentMStyling(ComponentTextStyle.Bold, COLORS.black));
|
|
25
|
-
var
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
30
|
+
var HeaderActions = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n"])));
|
|
31
|
+
var HeaderWithImageActions = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n position: absolute;\n\n button:only-child {\n justify-self: flex-end;\n }\n\n top: 4px;\n left: 4px;\n right: 4px;\n\n .medium & {\n top: 12px;\n left: 12px;\n right: 12px;\n }\n\n .large & {\n top: 20px;\n left: 20px;\n right: 20px;\n }\n"])));
|
|
32
|
+
var HeaderWithImage = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n flex-direction: column;\n\n img {\n object-fit: cover;\n width: 100%;\n height: 160px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n }\n\n .medium & {\n img {\n height: 200px;\n }\n }\n\n .large & {\n img {\n height: 240px;\n }\n }\n"])));
|
|
33
|
+
var Header = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ", " {\n height: max-content;\n }\n"])), TooltipContainer);
|
|
34
|
+
var Content = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ", "\n"])), scrollBarStyling(Size.Small));
|
|
35
|
+
var FooterLeftContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
|
|
36
|
+
var FooterLeftNote = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ", "\n"])), ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
|
|
37
|
+
var FooterLeftLink = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500));
|
|
38
|
+
var FooterRightContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n gap: 8px;\n margin-left: auto;\n"])));
|
|
39
|
+
var Footer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n"])));
|
|
40
|
+
var Wrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n width: max-content;\n\n max-height: calc(100vh - 32px);\n max-width: calc(100vw - 32px);\n\n &.medium {\n max-height: calc(100vh - 64px);\n max-width: calc(100vw - 64px);\n\n ", " {\n padding: 12px 12px 4px 12px;\n\n ", " {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ", " {\n ", "\n }\n }\n }\n\n ", " {\n padding: 0 16px 0 24px;\n }\n\n ", " {\n padding: 12px 24px 20px 24px;\n\n ", " {\n ", "\n gap: 6px;\n }\n\n ", " {\n a {\n gap: 6px;\n }\n\n ", "\n }\n\n ", " {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ", " {\n padding: 20px 20px 4px 20px;\n\n ", " {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ", " {\n ", "\n }\n }\n }\n\n ", " {\n padding: 0 24px 0 32px;\n }\n\n ", " {\n padding: 16px 32px 32px 32px;\n\n ", " {\n ", "\n gap: 8px;\n }\n\n ", " {\n a {\n gap: 8px;\n }\n\n ", "\n }\n\n ", " {\n gap: 16px;\n }\n }\n }\n"])), Header, HeaderText, HeaderTitle, ComponentLStyling(ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, ComponentXSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentMStyling(ComponentTextStyle.Bold, null), FooterRightContainer, Header, HeaderText, HeaderTitle, ComponentXLStyling(ComponentTextStyle.Bold, null), Content, Footer, FooterLeftNote, ComponentSStyling(ComponentTextStyle.Bold, null), FooterLeftLink, ComponentLStyling(ComponentTextStyle.Bold, null), FooterRightContainer);
|
|
35
41
|
var ModalContent = function ModalContent(props) {
|
|
36
42
|
var _props$size, _props$footerActions;
|
|
37
43
|
var tooltip = function tooltip() {
|
|
@@ -59,11 +65,32 @@ var ModalContent = function ModalContent(props) {
|
|
|
59
65
|
var headerActions = function headerActions() {
|
|
60
66
|
var _props$headerActions;
|
|
61
67
|
return (_props$headerActions = props.headerActions) === null || _props$headerActions === void 0 ? void 0 : _props$headerActions.map(function (action, index) {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
68
|
+
switch (action.componentType) {
|
|
69
|
+
case 'icon':
|
|
70
|
+
{
|
|
71
|
+
var icon = action.icon,
|
|
72
|
+
componentType = action.componentType,
|
|
73
|
+
rest = _objectWithoutProperties(action, _excluded);
|
|
74
|
+
return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({}, rest), {}, {
|
|
75
|
+
children: icon
|
|
76
|
+
}), action.id || index);
|
|
77
|
+
}
|
|
78
|
+
case 'dropdown':
|
|
79
|
+
{
|
|
80
|
+
var _componentType = action.componentType,
|
|
81
|
+
_rest = _objectWithoutProperties(action, _excluded2);
|
|
82
|
+
return /*#__PURE__*/_jsx(DropdownButton, _objectSpread({
|
|
83
|
+
type: 'icon',
|
|
84
|
+
size: props.size
|
|
85
|
+
}, _rest));
|
|
86
|
+
}
|
|
87
|
+
case 'toggle':
|
|
88
|
+
{
|
|
89
|
+
var _componentType2 = action.componentType,
|
|
90
|
+
_rest2 = _objectWithoutProperties(action, _excluded3);
|
|
91
|
+
return /*#__PURE__*/_jsx(ToggleButton, _objectSpread({}, _rest2));
|
|
92
|
+
}
|
|
93
|
+
}
|
|
67
94
|
});
|
|
68
95
|
};
|
|
69
96
|
var getLeftActionIconElement = function getLeftActionIconElement() {
|
|
@@ -81,7 +108,7 @@ var ModalContent = function ModalContent(props) {
|
|
|
81
108
|
text = _ref.text,
|
|
82
109
|
variant = _ref.variant,
|
|
83
110
|
action = _ref.action,
|
|
84
|
-
rest = _objectWithoutProperties(_ref,
|
|
111
|
+
rest = _objectWithoutProperties(_ref, _excluded4);
|
|
85
112
|
return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, rest), {}, {
|
|
86
113
|
size: props.size,
|
|
87
114
|
onClick: action,
|
|
@@ -95,9 +122,9 @@ var ModalContent = function ModalContent(props) {
|
|
|
95
122
|
_text = _ref2.text,
|
|
96
123
|
_variant = _ref2.variant,
|
|
97
124
|
_action = _ref2.action,
|
|
98
|
-
|
|
125
|
+
_rest3 = _objectWithoutProperties(_ref2, _excluded5);
|
|
99
126
|
return /*#__PURE__*/_jsx(FooterLeftLink, {
|
|
100
|
-
children: /*#__PURE__*/_jsxs(HyperLink, _objectSpread(_objectSpread({},
|
|
127
|
+
children: /*#__PURE__*/_jsxs(HyperLink, _objectSpread(_objectSpread({}, _rest3), {}, {
|
|
101
128
|
variant: _variant !== null && _variant !== void 0 ? _variant : 'default',
|
|
102
129
|
onClick: function onClick(e) {
|
|
103
130
|
if (_action) {
|
|
@@ -125,7 +152,36 @@ var ModalContent = function ModalContent(props) {
|
|
|
125
152
|
closeModal: props.closeAction,
|
|
126
153
|
children: /*#__PURE__*/_jsxs(Wrapper, {
|
|
127
154
|
className: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : Size.Medium,
|
|
128
|
-
children: [/*#__PURE__*/_jsxs(
|
|
155
|
+
children: [props.image && /*#__PURE__*/_jsxs(HeaderWithImage, {
|
|
156
|
+
children: [/*#__PURE__*/_jsx(ImageWithFallbacks, _objectSpread({}, props.image)), /*#__PURE__*/_jsxs(HeaderWithImageActions, {
|
|
157
|
+
children: [props.onBack && /*#__PURE__*/_jsx(IconButton, {
|
|
158
|
+
variant: "secondary",
|
|
159
|
+
shape: "circular",
|
|
160
|
+
action: props.onBack,
|
|
161
|
+
children: /*#__PURE__*/_jsx(SystemIcons.ArrowLineLeft, {})
|
|
162
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
|
163
|
+
dataTestId: 'content-modal-close-button',
|
|
164
|
+
id: 'content-modal-close-button',
|
|
165
|
+
variant: "secondary",
|
|
166
|
+
shape: "circular",
|
|
167
|
+
action: props.closeAction,
|
|
168
|
+
children: /*#__PURE__*/_jsx(SystemIcons.Close, {
|
|
169
|
+
size: "24px",
|
|
170
|
+
color: COLORS.neutral_600
|
|
171
|
+
})
|
|
172
|
+
})]
|
|
173
|
+
}), /*#__PURE__*/_jsxs(Header, {
|
|
174
|
+
children: [/*#__PURE__*/_jsxs(HeaderText, {
|
|
175
|
+
children: [/*#__PURE__*/_jsx(HeaderTitle, {
|
|
176
|
+
children: props.title
|
|
177
|
+
}), !!props.note && /*#__PURE__*/_jsx(Note, {
|
|
178
|
+
children: props.note
|
|
179
|
+
})]
|
|
180
|
+
}), /*#__PURE__*/_jsxs(HeaderActions, {
|
|
181
|
+
children: [tooltip(), headerActions()]
|
|
182
|
+
})]
|
|
183
|
+
})]
|
|
184
|
+
}), !props.image && /*#__PURE__*/_jsxs(Header, {
|
|
129
185
|
children: [props.onBack && /*#__PURE__*/_jsx(IconButton, {
|
|
130
186
|
variant: "secondary",
|
|
131
187
|
shape: "circular",
|
|
@@ -134,7 +190,7 @@ var ModalContent = function ModalContent(props) {
|
|
|
134
190
|
}), /*#__PURE__*/_jsxs(HeaderText, {
|
|
135
191
|
children: [/*#__PURE__*/_jsx(HeaderTitle, {
|
|
136
192
|
children: props.title
|
|
137
|
-
}), !!props.note && /*#__PURE__*/_jsx(
|
|
193
|
+
}), !!props.note && /*#__PURE__*/_jsx(Note, {
|
|
138
194
|
children: props.note
|
|
139
195
|
})]
|
|
140
196
|
}), /*#__PURE__*/_jsxs(HeaderActions, {
|
|
@@ -159,7 +215,7 @@ var ModalContent = function ModalContent(props) {
|
|
|
159
215
|
children: (_props$footerActions = props.footerActions) === null || _props$footerActions === void 0 ? void 0 : _props$footerActions.map(function (item, index) {
|
|
160
216
|
var action = item.action,
|
|
161
217
|
text = item.text,
|
|
162
|
-
rest = _objectWithoutProperties(item,
|
|
218
|
+
rest = _objectWithoutProperties(item, _excluded6);
|
|
163
219
|
return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, rest), {}, {
|
|
164
220
|
onClick: action,
|
|
165
221
|
size: props.size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","HeaderText","div","HeaderTitle","Bold","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","Content","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n \n &:not(:first-child) {\n padding-left: 0 !important;\n }\n \n`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n width: max-content;\n\n max-height: calc(100vh - 32px);\n max-width: calc(100vw - 32px);\n\n &.medium {\n max-height: calc(100vh - 64px);\n max-width: calc(100vw - 64px);\n\n ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${HeaderNote} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n headerActions?: IconButtonAction[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n const {icon, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {getLeftActionIconElement()}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAE7B,SAAQC,cAAc,QAAO,SAAS;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EAAEC,iBAAiB,EACpCC,kBAAkB,EAAEC,kBAAkB,EACtCC,kBAAkB,EAClBC,mBAAmB,EACnBC,gBAAgB,QACX,WAAW;AAClB,SAAQC,gBAAgB,EAAEC,cAAc,QAAO,aAAa;AAC5D,SAAQC,MAAM,EAAEC,UAAU,QAAO,WAAW;AAC5C,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,SAAS,QAAO,cAAc;AAAC;AAAA;AAEvC,IAAMC,UAAU,GAAGhB,MAAM,CAACiB,GAAG,gRAa5B;AACD,IAAMC,WAAW,GAAGlB,MAAM,CAACiB,GAAG,kFAC1Bd,iBAAiB,CAACE,kBAAkB,CAACc,IAAI,EAAElB,MAAM,CAACmB,KAAK,CAAC,CAC3D;AACD,IAAMC,UAAU,GAAGrB,MAAM,CAACiB,GAAG,kFACzBT,mBAAmB,CAACH,kBAAkB,CAACiB,OAAO,EAAErB,MAAM,CAACsB,WAAW,CAAC,CACtE;AAED,IAAMC,aAAa,GAAGxB,MAAM,CAACiB,GAAG,mHAG/B;AAED,IAAMQ,MAAM,GAAGzB,MAAM,CAACiB,GAAG,gLAKrBP,gBAAgB,CAGnB;AAED,IAAMgB,OAAO,GAAG1B,MAAM,CAACiB,GAAG,uJAKtBR,gBAAgB,CAACX,IAAI,CAAC6B,KAAK,CAAC,CAC/B;AAED,IAAMC,mBAAmB,GAAG5B,MAAM,CAACiB,GAAG,mHAGrC;AAED,IAAMY,cAAc,GAAG7B,MAAM,CAACiB,GAAG,mKAM7BT,mBAAmB,CAACH,kBAAkB,CAACc,IAAI,EAAElB,MAAM,CAACsB,WAAW,CAAC,CACnE;AAED,IAAMO,cAAc,GAAG9B,MAAM,CAACiB,GAAG,qLAC7Bb,iBAAiB,CAACC,kBAAkB,CAACc,IAAI,EAAElB,MAAM,CAAC8B,WAAW,CAAC,CAOjE;AAED,IAAMC,oBAAoB,GAAGhC,MAAM,CAACiB,GAAG,8GAGtC;AAED,IAAMgB,MAAM,GAAGjC,MAAM,CAACiB,GAAG,2IAIxB;AAGD,IAAMiB,OAAO,GAAGlC,MAAM,CAACiB,GAAG,+6CAYpBQ,MAAM,EAGJT,UAAU,EAIRE,WAAW,EACThB,iBAAiB,CAACG,kBAAkB,CAACc,IAAI,EAAE,IAAI,CAAC,EAGlDE,UAAU,EACRd,kBAAkB,CAACF,kBAAkB,CAACiB,OAAO,EAAE,IAAI,CAAC,EAK1DI,OAAO,EAIPO,MAAM,EAGJJ,cAAc,EACZtB,kBAAkB,CAACF,kBAAkB,CAACc,IAAI,EAAE,IAAI,CAAC,EAInDW,cAAc,EAKZ3B,iBAAiB,CAACE,kBAAkB,CAACc,IAAI,EAAE,IAAI,CAAC,EAGlDa,oBAAoB,EAUtBP,MAAM,EAGJT,UAAU,EAIRE,WAAW,EACTZ,kBAAkB,CAACD,kBAAkB,CAACc,IAAI,EAAE,IAAI,CAAC,EAGnDE,UAAU,EACRjB,iBAAiB,CAACC,kBAAkB,CAACiB,OAAO,EAAE,IAAI,CAAC,EAKzDI,OAAO,EAIPO,MAAM,EAGJJ,cAAc,EACZzB,iBAAiB,CAACC,kBAAkB,CAACc,IAAI,EAAE,IAAI,CAAC,EAIlDW,cAAc,EAKZ5B,iBAAiB,CAACG,kBAAkB,CAACc,IAAI,EAAE,IAAI,CAAC,EAGlDa,oBAAoB,CAK3B;AAkBD,IAAMG,YAAyC,GAAG,SAA5CA,YAAyC,CAAIC,KAAK,EAAK;EAAA;EAE3D,IAAMC,OAAO,GAAG,SAAVA,OAAO;IAAA,OACX,CAAC,CAACD,KAAK,CAACC,OAAO,iBACf,KAAC,cAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAEvC,IAAI,CAACwC,MAAO;MAAC,KAAK,EAAC,QAAQ;MAAC,QAAQ,EAAC,QAAQ;MAAC,SAAS,EAAE,KAAM;MAChF,KAAK,EAAEF,KAAK,CAACC,OAAQ;MAAA,uBACnC,KAAC,UAAU;QAAC,OAAO,EAAC,WAAW;QAAC,KAAK,EAAC,UAAU;QAAC,KAAK,EAAE;UAACE,MAAM,EAAE;QAAM,CAAE;QAAC,MAAM,EAAE,kBAAM,CACxF,CAAE;QAAA,uBACA,KAAC,WAAW,CAAC,IAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAEtC,MAAM,CAACsB;QAAY;MAAE;IAC/C,EACE;EAAA;EAEnB,IAAMiB,aAAa,GAAG,SAAhBA,aAAa;IAAA;IAAA,+BAASJ,KAAK,CAACI,aAAa,yDAAnB,qBAAqBC,GAAG,CAAC,UAACC,MAAM,EAAEC,KAAK,EAAK;MACpE,IAAOC,IAAI,GAAaF,MAAM,CAAvBE,IAAI;QAAKC,IAAI,4BAAIH,MAAM;MAC9B,oBAAO,KAAC,UAAU,kCACKG,IAAI;QAAA,UACxBD;MAAI,IAFiBF,MAAM,CAACI,EAAE,IAAIH,KAAK,CAG7B;IACf,CAAC,CACF;EAAA;EAED,IAAMI,wBAAwB,GAAG,SAA3BA,wBAAwB;IAAA;IAAA,OAC5B,CAAC,2BAACX,KAAK,CAACY,gBAAgB,kDAAtB,sBAAwBJ,IAAI,kBAC9B/C,KAAK,CAACoD,YAAY,2BAACb,KAAK,CAACY,gBAAgB,2DAAtB,uBAAwBJ,IAAI,EAAwB;MACrEM,IAAI,EACFd,KAAK,CAACc,IAAI,KAAKpD,IAAI,CAAC6B,KAAK,GACrB,MAAM,GACNS,KAAK,CAACc,IAAI,KAAKpD,IAAI,CAACqD,KAAK,GACvB,MAAM,GACN;IACV,CAAC,CAAC;EAAA;EAEJ,IAAMH,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;IAC7B,IAAI,CAACZ,KAAK,CAACY,gBAAgB,EAAE,OAAO,IAAI;IAExC,QAAQZ,KAAK,CAACY,gBAAgB,CAACI,UAAU;MACvC,KAAK,QAAQ;QAAE;UACb,WAAyChB,KAAK,CAACY,gBAAgB;YAAxDK,IAAI,QAAJA,IAAI;YAAEC,OAAO,QAAPA,OAAO;YAAEZ,MAAM,QAANA,MAAM;YAAKG,IAAI;UACrC,oBACE,KAAC,MAAM,kCAAIA,IAAI;YACR,IAAI,EAAET,KAAK,CAACc,IAAK;YACjB,OAAO,EAAER,MAAO;YAChB,OAAO,EAAEY,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,WAAY;YAAA,UACpCD;UAAI,GACE;QAEb;MACA,KAAK,WAAW;QAAE;UAChB,YAAyCjB,KAAK,CAACY,gBAAgB;YAAxDK,KAAI,SAAJA,IAAI;YAAEC,QAAO,SAAPA,OAAO;YAAEZ,OAAM,SAANA,MAAM;YAAKG,KAAI;UACrC,oBACE,KAAC,cAAc;YAAA,uBACb,MAAC,SAAS,kCAAKA,KAAI;cACR,OAAO,EAAES,QAAO,aAAPA,QAAO,cAAPA,QAAO,GAAI,SAAU;cAC9B,OAAO,EAAE,iBAACC,CAAC,EAAK;gBACd,IAAIb,OAAM,EAAE;kBACVa,CAAC,CAACC,cAAc,EAAE;kBAClBd,OAAM,CAACa,CAAC,CAAC;gBACX;cACF,CAAE;cAAA,WACVF,KAAI,EACJN,wBAAwB,EAAE;YAAA;UACjB,EACG;QAGrB;MACA,KAAK,MAAM;QAAE;UACX,IAAOM,MAAI,GAAIjB,KAAK,CAACY,gBAAgB,CAA9BK,IAAI;UACX,oBACE,MAAC,cAAc;YAAA,WACZN,wBAAwB,EAAE,eAC3B;cAAA,UAAOM;YAAI,EAAQ;UAAA,EACJ;QAErB;IAAC;EAEL,CAAC;EAGD,oBACE,KAAC,cAAc;IAAC,SAAS,EAAEjB,KAAK,CAACqB,WAAY;IAAC,UAAU,EAAErB,KAAK,CAACsB,WAAY;IAAA,uBAC1E,MAAC,OAAO;MAAC,SAAS,iBAAEtB,KAAK,CAACc,IAAI,qDAAIpD,IAAI,CAAC6D,MAAO;MAAA,wBAC5C,MAAC,MAAM;QAAA,WAEHvB,KAAK,CAACwB,MAAM,iBACZ,KAAC,UAAU;UAAC,OAAO,EAAC,WAAW;UAAC,KAAK,EAAC,UAAU;UAAC,MAAM,EAAExB,KAAK,CAACwB,MAAO;UAAA,uBACpE,KAAC,WAAW,CAAC,aAAa;QAAE,EACjB,eAEf,MAAC,UAAU;UAAA,wBACT,KAAC,WAAW;YAAA,UAAExB,KAAK,CAACyB;UAAK,EAAe,EACvC,CAAC,CAACzB,KAAK,CAAC0B,IAAI,iBAAI,KAAC,UAAU;YAAA,UAAE1B,KAAK,CAAC0B;UAAI,EAAc;QAAA,EAC3C,eACb,MAAC,aAAa;UAAA,WACXzB,OAAO,EAAE,EACTG,aAAa,EAAE,eAChB,KAAC,UAAU;YAAC,UAAU,EAAE,4BAA6B;YAAC,EAAE,EAAE,4BAA6B;YAAC,OAAO,EAAC,WAAW;YAAC,KAAK,EAAC,UAAU;YAChH,MAAM,EAAEJ,KAAK,CAACsB,WAAY;YAAA,uBACpC,KAAC,WAAW,CAAC,KAAK;cAAC,IAAI,EAAC,MAAM;cAAC,KAAK,EAAEzD,MAAM,CAACsB;YAAY;UAAE,EAChD;QAAA,EACC;MAAA,EACT,eACT,KAAC,OAAO;QAAA,UACLa,KAAK,CAAC2B;MAAQ,EACP,eACV,MAAC,MAAM;QAAA,wBACL,KAAC,mBAAmB;UAAA,UACjBf,gBAAgB;QAAE,EACC,eACtB,KAAC,oBAAoB;UAAA,kCAClBZ,KAAK,CAAC4B,aAAa,yDAAnB,qBAAqBvB,GAAG,CAAC,UAACwB,IAAI,EAAEtB,KAAK,EAAK;YACvC,IAAOD,MAAM,GAAmBuB,IAAI,CAA7BvB,MAAM;cAAEW,IAAI,GAAaY,IAAI,CAArBZ,IAAI;cAAKR,IAAI,4BAAIoB,IAAI;YACpC,oBAAO,KAAC,MAAM,kCACKpB,IAAI;cACR,OAAO,EAAEH,MAAO;cAChB,IAAI,EAAEN,KAAK,CAACc,IAAK;cACjB,SAAS,EAAE,mBAAAgB,CAAC;gBAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKzB,MAAM,CAAEwB,CAAC,CAAC;cAAA,CAAC;cAAA,UAC/Eb;YAAI,IALaR,IAAI,CAACC,EAAE,IAAIH,KAAK,CAM3B;UACX,CAAC;QACF,EACoB;MAAA,EAChB;IAAA;EACD,EACK;AAErB,CAAC;AAAC;EA3IAc,WAAW;EACXC,WAAW;EACXE,MAAM;EACNC,KAAK;EACLC,IAAI;EACJtB,aAAa;EACbwB,aAAa;EAEb3B,OAAO;EACP+B,MAAM;EACNL,QAAQ;AAAA;AAmIV,eAAe5B,YAAY"}
|
|
1
|
+
{"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","Note","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","DropdownButton","ToggleButton","ImageWithFallbacks","HeaderText","div","HeaderTitle","Bold","black","HeaderActions","HeaderWithImageActions","HeaderWithImage","Header","Content","Small","FooterLeftContainer","FooterLeftNote","neutral_600","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","componentType","icon","rest","id","size","getLeftActionIconElement","leftFooterAction","cloneElement","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","image","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {\n ButtonAction,\n ModalHeaderIconButton,\n LeftFooterAction,\n LeftFooterButton,\n LeftFooterHyperlink,\n ModalHeaderButtons\n} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n COLORS,\n ComponentLStyling,\n ComponentMStyling, ComponentSStyling,\n ComponentTextStyle, ComponentXLStyling,\n ComponentXSStyling,\n ComponentXXSStyling, Note,\n scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\nimport {ImageWithFallbacksProps} from \"../Image/ImageWithFallbacks\";\nimport {DropdownButton} from \"../Dropdown\";\nimport {ToggleButton} from \"../Toggles\";\nimport {ImageWithFallbacks} from \"../Image\";\n\nconst HeaderText = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n &:not(:first-child) {\n padding-left: 0 !important;\n }\n\n`;\nconst HeaderTitle = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\n\nconst HeaderActions = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst HeaderWithImageActions = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n position: absolute;\n\n button:only-child {\n justify-self: flex-end;\n }\n\n top: 4px;\n left: 4px;\n right: 4px;\n\n .medium & {\n top: 12px;\n left: 12px;\n right: 12px;\n }\n\n .large & {\n top: 20px;\n left: 20px;\n right: 20px;\n }\n`;\n\nconst HeaderWithImage = styled.div`\n position: relative;\n display: flex;\n flex-direction: column;\n\n img {\n object-fit: cover;\n width: 100%;\n height: 160px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n }\n\n .medium & {\n img {\n height: 200px;\n }\n }\n\n .large & {\n img {\n height: 240px;\n }\n }\n`;\n\nconst Header = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px;\n\n ${TooltipContainer} {\n height: max-content;\n }\n`;\n\nconst Content = styled.div`\n margin-right: 8px;\n padding: 0 8px 0 16px;\n overflow: auto;\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n a {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n }\n`;\n\nconst FooterRightContainer = styled.div`\n gap: 8px;\n margin-left: auto;\n`\n\nconst Footer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n width: max-content;\n\n max-height: calc(100vh - 32px);\n max-width: calc(100vw - 32px);\n\n &.medium {\n max-height: calc(100vh - 64px);\n max-width: calc(100vw - 64px);\n\n ${Header} {\n padding: 12px 12px 4px 12px;\n\n ${HeaderText} {\n padding: 12px 0 12px 12px;\n gap: 4px;\n\n ${HeaderTitle} {\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 16px 0 24px;\n }\n\n ${Footer} {\n padding: 12px 24px 20px 24px;\n\n ${FooterLeftNote} {\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n gap: 6px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 6px;\n }\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 8px;\n }\n }\n }\n\n &.large {\n max-height: calc(100vh - 112px);\n max-width: calc(100vw - 112px);\n\n ${Header} {\n padding: 20px 20px 4px 20px;\n\n ${HeaderText} {\n padding: 10px 0 10px 12px;\n gap: 8px;\n\n ${HeaderTitle} {\n ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n }\n }\n }\n\n ${Content} {\n padding: 0 24px 0 32px;\n }\n\n ${Footer} {\n padding: 16px 32px 32px 32px;\n\n ${FooterLeftNote} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n gap: 8px;\n }\n\n ${FooterLeftLink} {\n a {\n gap: 8px;\n }\n\n ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n }\n\n ${FooterRightContainer} {\n gap: 16px;\n }\n }\n }\n`;\n\n\ninterface ModalContentProps {\n size?: Size.Small | Size.Medium | Size.Large;\n isModalOpen: boolean;\n closeAction: () => void;\n onBack?: () => void;\n title: string;\n note?: string;\n image?: ImageWithFallbacksProps;\n headerActions?: ModalHeaderButtons[];\n footerActions?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n zIndex?: number;\n children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n const tooltip = () =>\n !!props.tooltip &&\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n label={props.tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n }}>\n <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </TooltipWrapper>;\n\n const headerActions = () => props.headerActions?.map((action, index) => {\n switch (action.componentType) {\n case 'icon': {\n const {icon, componentType, ...rest} = action;\n return <IconButton key={action.id || index}\n {...rest}>\n {icon}\n </IconButton>\n }\n case 'dropdown': {\n const {componentType, ...rest} = action;\n return <DropdownButton type={'icon'} size={props.size} {...rest}/>\n }\n case 'toggle': {\n const {componentType, ...rest} = action;\n return <ToggleButton {...rest}/>\n }\n }\n }\n );\n\n const getLeftActionIconElement = () =>\n !!props.leftFooterAction?.icon &&\n React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n size:\n props.size === Size.Small\n ? '20px'\n : props.size === Size.Large\n ? '28px'\n : '24px'\n });\n\n const leftFooterAction = () => {\n if (!props.leftFooterAction) return null;\n\n switch (props.leftFooterAction.actionType) {\n case 'button': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n return (\n <Button{...rest}\n size={props.size}\n onClick={action}\n variant={variant ?? 'secondary'}>\n {text}\n </Button>\n );\n }\n case 'hyperlink': {\n const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n return (\n <FooterLeftLink>\n <HyperLink {...rest}\n variant={variant ?? 'default'}\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {text}\n {getLeftActionIconElement()}\n </HyperLink>\n </FooterLeftLink>\n );\n\n }\n case 'note': {\n const {text} = props.leftFooterAction;\n return (\n <FooterLeftNote>\n {getLeftActionIconElement()}\n <span>{text}</span>\n </FooterLeftNote>\n );\n }\n }\n };\n\n\n return (\n <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n <Wrapper className={props.size ?? Size.Medium}>\n {\n props.image &&\n <HeaderWithImage>\n <ImageWithFallbacks {...props.image}/>\n <HeaderWithImageActions>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n\n }\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderWithImageActions>\n\n <Header>\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n </HeaderActions>\n </Header>\n </HeaderWithImage>\n }\n {\n !props.image &&\n <Header>\n {\n props.onBack &&\n <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n <SystemIcons.ArrowLineLeft/>\n </IconButton>\n }\n <HeaderText>\n <HeaderTitle>{props.title}</HeaderTitle>\n {!!props.note && <Note>{props.note}</Note>}\n </HeaderText>\n <HeaderActions>\n {tooltip()}\n {headerActions()}\n <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'}\n variant=\"secondary\"\n shape=\"circular\"\n action={props.closeAction}>\n <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n </IconButton>\n </HeaderActions>\n </Header>\n }\n <Content>\n {props.children}\n </Content>\n <Footer>\n <FooterLeftContainer>\n {leftFooterAction()}\n </FooterLeftContainer>\n <FooterRightContainer>\n {props.footerActions?.map((item, index) => {\n const {action, text, ...rest} = item;\n return <Button key={rest.id || index}\n {...rest}\n onClick={action}\n size={props.size}\n onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n {text}\n </Button>\n }\n )}\n </FooterRightContainer>\n </Footer>\n </Wrapper>\n </ModalContainer>\n );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalTypes.cjs","names":[],"sources":["../../src/Modals/ModalTypes.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ModalTypes.cjs","names":[],"sources":["../../src/Modals/ModalTypes.ts"],"sourcesContent":["import {ButtonProps} from '../Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {IconButtonProps} from '../Button';\nimport React from 'react';\nimport {IconDropdownButtonProps} from \"../Dropdown/DropdownButtonTypes\";\nimport {ToggleButtonProps} from \"../Toggles/ToggleButton\";\n\nexport interface ModalHeaderIconButton extends Omit<IconButtonProps, 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'focusOnClick'> {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps, 'size' | 'type'> {\n componentType: 'dropdown';\n}\n\nexport interface ModalHeaderToggleButton extends ToggleButtonProps {\n componentType: 'toggle';\n}\n\nexport type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;\n\n\nexport interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n action?: (() => void) | ((e: any) => void);\n text: string;\n}\n\nexport interface LeftFooterActionBase {\n actionType: 'hyperlink' | 'note' | 'button';\n text: string;\n icon?: React.ReactNode;\n action?: (() => void) | ((e: any) => void);\n}\n\nexport interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {\n}\n\nexport interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {\n text: string;\n}\n\nexport type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;\n"],"mappings":""}
|
|
@@ -1,10 +1,20 @@
|
|
|
1
|
-
import { ButtonProps } from '../Button
|
|
1
|
+
import { ButtonProps } from '../Button';
|
|
2
2
|
import { HyperlinkProps } from '../HyperLink/HyperLink';
|
|
3
|
-
import { IconButtonProps } from '../Button
|
|
3
|
+
import { IconButtonProps } from '../Button';
|
|
4
4
|
import React from 'react';
|
|
5
|
-
|
|
5
|
+
import { IconDropdownButtonProps } from "../Dropdown/DropdownButtonTypes";
|
|
6
|
+
import { ToggleButtonProps } from "../Toggles/ToggleButton";
|
|
7
|
+
export interface ModalHeaderIconButton extends Omit<IconButtonProps, 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'focusOnClick'> {
|
|
8
|
+
componentType: 'icon';
|
|
6
9
|
icon: React.ReactNode;
|
|
7
10
|
}
|
|
11
|
+
export interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps, 'size' | 'type'> {
|
|
12
|
+
componentType: 'dropdown';
|
|
13
|
+
}
|
|
14
|
+
export interface ModalHeaderToggleButton extends ToggleButtonProps {
|
|
15
|
+
componentType: 'toggle';
|
|
16
|
+
}
|
|
17
|
+
export type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;
|
|
8
18
|
export interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {
|
|
9
19
|
action?: (() => void) | ((e: any) => void);
|
|
10
20
|
text: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalTypes.js","names":[],"sources":["../../src/Modals/ModalTypes.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ModalTypes.js","names":[],"sources":["../../src/Modals/ModalTypes.ts"],"sourcesContent":["import {ButtonProps} from '../Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {IconButtonProps} from '../Button';\nimport React from 'react';\nimport {IconDropdownButtonProps} from \"../Dropdown/DropdownButtonTypes\";\nimport {ToggleButtonProps} from \"../Toggles/ToggleButton\";\n\nexport interface ModalHeaderIconButton extends Omit<IconButtonProps, 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'focusOnClick'> {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport interface ModalHeaderDropdownButton extends Omit<IconDropdownButtonProps, 'size' | 'type'> {\n componentType: 'dropdown';\n}\n\nexport interface ModalHeaderToggleButton extends ToggleButtonProps {\n componentType: 'toggle';\n}\n\nexport type ModalHeaderButtons = ModalHeaderIconButton | ModalHeaderDropdownButton | ModalHeaderToggleButton;\n\n\nexport interface ButtonAction extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'> {\n action?: (() => void) | ((e: any) => void);\n text: string;\n}\n\nexport interface LeftFooterActionBase {\n actionType: 'hyperlink' | 'note' | 'button';\n text: string;\n icon?: React.ReactNode;\n action?: (() => void) | ((e: any) => void);\n}\n\nexport interface LeftFooterHyperlink extends HyperlinkProps, LeftFooterActionBase {\n}\n\nexport interface LeftFooterButton extends Pick<ButtonProps, 'variant' | 'id' | 'loading' | 'disabled' | 'icon' | 'type'>, LeftFooterActionBase {\n text: string;\n}\n\nexport type LeftFooterAction = LeftFooterButton | LeftFooterHyperlink;\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Modals/index.tsx"],"sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\nimport ModalContent from './ModalContent';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\n\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton,
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Modals/index.tsx"],"sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\nimport ModalContent from './ModalContent';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\n\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, ModalHeaderIconButton} from './ModalTypes';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA0C;AAAA"}
|
package/dist/Modals/index.d.ts
CHANGED
|
@@ -4,4 +4,4 @@ import { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';
|
|
|
4
4
|
import ModalDialog from './ModalDialog';
|
|
5
5
|
import ModalContent from './ModalContent';
|
|
6
6
|
export { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };
|
|
7
|
-
export type { LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton,
|
|
7
|
+
export type { LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, ModalHeaderIconButton } from './ModalTypes';
|
package/dist/Modals/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Modal","ModalCloseButton","ModalContainer","ModalHeader","ModalTitle","ModalBody","ModalFooter","ModalDialog","ModalContent"],"sources":["../../src/Modals/index.tsx"],"sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\nimport ModalContent from './ModalContent';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\n\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton,
|
|
1
|
+
{"version":3,"file":"index.js","names":["Modal","ModalCloseButton","ModalContainer","ModalHeader","ModalTitle","ModalBody","ModalFooter","ModalDialog","ModalContent"],"sources":["../../src/Modals/index.tsx"],"sourcesContent":["import Modal, { ModalCloseButton } from './Modal';\nimport ModalContainer from './ModalContainer';\nimport { ModalHeader, ModalTitle, ModalBody, ModalFooter } from './ModalStyles';\nimport ModalDialog from './ModalDialog';\nimport ModalContent from './ModalContent';\n\nexport { Modal, ModalContainer, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalCloseButton, ModalDialog, ModalContent };\n\nexport type {LeftFooterAction, LeftFooterHyperlink, LeftFooterActionBase, LeftFooterButton, ModalHeaderIconButton} from './ModalTypes';\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,gBAAgB,QAAQ,SAAS;AACjD,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,SAASC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,WAAW,QAAQ,eAAe;AAC/E,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,YAAY,MAAM,gBAAgB;AAEzC,SAASR,KAAK,EAAEE,cAAc,EAAEC,WAAW,EAAEE,SAAS,EAAEC,WAAW,EAAEF,UAAU,EAAEH,gBAAgB,EAAEM,WAAW,EAAEC,YAAY"}
|