nestiq-component-library 1.0.5 → 1.0.7
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/components/Button/Button.js +6 -0
- package/dist/components/ImageListPopup/ImageListPopup.js +26 -0
- package/dist/components/Popup/Popup.js +12 -0
- package/dist/index.es.js +1 -2
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +1 -2
- package/dist/index.js.map +1 -1
- package/package.json +35 -36
- package/rollup.config.mjs +31 -40
- package/src/components/ImageListPopup/ImageListPopup.tsx +62 -62
- package/src/components/Popup/Popup.tsx +28 -28
- package/src/index.tsx +3 -3
- package/dist/assets/images/icon_close 2.png +0 -0
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import "bootstrap/dist/css/bootstrap.min.css";
|
|
3
|
+
import "./ImageListPopup.css";
|
|
4
|
+
var ImageListPopup = function (_a) {
|
|
5
|
+
var images = _a.images, onClose = _a.onClose;
|
|
6
|
+
var _b = useState(0), currentIndex = _b[0], setCurrentIndex = _b[1];
|
|
7
|
+
var handlePrevious = function () {
|
|
8
|
+
setCurrentIndex(function (prevIndex) { return (prevIndex > 0 ? prevIndex - 1 : prevIndex); });
|
|
9
|
+
};
|
|
10
|
+
var handleNext = function () {
|
|
11
|
+
setCurrentIndex(function (prevIndex) {
|
|
12
|
+
return prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex;
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
return (React.createElement("div", { className: "popup-overlay" },
|
|
16
|
+
React.createElement("div", { className: "popup-container" },
|
|
17
|
+
React.createElement("div", { className: "popup-header" },
|
|
18
|
+
React.createElement("span", null, images[currentIndex].title),
|
|
19
|
+
React.createElement("button", { className: "btn-close", onClick: onClose })),
|
|
20
|
+
React.createElement("div", { className: "popup-body" },
|
|
21
|
+
React.createElement("img", { src: images[currentIndex].src, alt: images[currentIndex].title, className: "img-fluid" })),
|
|
22
|
+
React.createElement("div", { className: "popup-footer" }, images.length > 1 && (React.createElement(React.Fragment, null,
|
|
23
|
+
React.createElement("button", { className: "btn btn-secondary me-2", onClick: handlePrevious }, "Previous"),
|
|
24
|
+
React.createElement("button", { className: "btn btn-secondary", onClick: handleNext }, "Next")))))));
|
|
25
|
+
};
|
|
26
|
+
export default ImageListPopup;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import closeIcon from "src/assets/images/icon_close 2.png";
|
|
3
|
+
import "./Popup.css";
|
|
4
|
+
var Popup = function (_a) {
|
|
5
|
+
var onCloseClick = _a.onCloseClick, children = _a.children;
|
|
6
|
+
return (React.createElement("div", { className: "popup-overlay" },
|
|
7
|
+
React.createElement("div", { className: "shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
|
|
8
|
+
React.createElement("div", { className: "end-0 top-0 position-absolute " },
|
|
9
|
+
React.createElement("img", { src: closeIcon, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
|
|
10
|
+
children)));
|
|
11
|
+
};
|
|
12
|
+
export default Popup;
|
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
|
+
import closeIcon from 'src/assets/images/icon_close 2.png';
|
|
2
3
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
3
4
|
|
|
4
5
|
var Button = function (_a) {
|
|
@@ -6,8 +7,6 @@ var Button = function (_a) {
|
|
|
6
7
|
return React.createElement("button", null, label);
|
|
7
8
|
};
|
|
8
9
|
|
|
9
|
-
var closeIcon = "icon_close 2.png";
|
|
10
|
-
|
|
11
10
|
function styleInject(css, ref) {
|
|
12
11
|
if ( ref === void 0 ) ref = {};
|
|
13
12
|
var insertAt = ref.insertAt;
|
package/dist/index.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
+
var closeIcon = require('src/assets/images/icon_close 2.png');
|
|
4
5
|
require('bootstrap/dist/css/bootstrap.min.css');
|
|
5
6
|
|
|
6
7
|
var Button = function (_a) {
|
|
@@ -8,8 +9,6 @@ var Button = function (_a) {
|
|
|
8
9
|
return React.createElement("button", null, label);
|
|
9
10
|
};
|
|
10
11
|
|
|
11
|
-
var closeIcon = "icon_close 2.png";
|
|
12
|
-
|
|
13
12
|
function styleInject(css, ref) {
|
|
14
13
|
if ( ref === void 0 ) ref = {};
|
|
15
14
|
var insertAt = ref.insertAt;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
|
package/package.json
CHANGED
|
@@ -1,36 +1,35 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "nestiq-component-library",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"type": "module",
|
|
5
|
-
"description": "",
|
|
6
|
-
"main": "dist/index.js",
|
|
7
|
-
"module": "dist/index.es.js",
|
|
8
|
-
"scripts": {
|
|
9
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
10
|
-
"build": "rollup -c"
|
|
11
|
-
},
|
|
12
|
-
"keywords": [],
|
|
13
|
-
"author": "",
|
|
14
|
-
"license": "ISC",
|
|
15
|
-
"dependencies": {
|
|
16
|
-
"react": "^18.3.1",
|
|
17
|
-
"react-dom": "^18.3.1"
|
|
18
|
-
},
|
|
19
|
-
"devDependencies": {
|
|
20
|
-
"@rollup/plugin-commonjs": "^26.0.1",
|
|
21
|
-
"@rollup/plugin-image": "^3.0.3",
|
|
22
|
-
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
23
|
-
"@rollup/plugin-url": "^8.0.2",
|
|
24
|
-
"@types/react": "^18.3.3",
|
|
25
|
-
"@types/react-dom": "^18.3.0",
|
|
26
|
-
"rollup": "^4.18.0",
|
|
27
|
-
"rollup-plugin-
|
|
28
|
-
"rollup-plugin-
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"react": "^18.3.1"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "nestiq-component-library",
|
|
3
|
+
"version": "1.0.7",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"module": "dist/index.es.js",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
10
|
+
"build": "rollup -c"
|
|
11
|
+
},
|
|
12
|
+
"keywords": [],
|
|
13
|
+
"author": "",
|
|
14
|
+
"license": "ISC",
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"react": "^18.3.1",
|
|
17
|
+
"react-dom": "^18.3.1"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@rollup/plugin-commonjs": "^26.0.1",
|
|
21
|
+
"@rollup/plugin-image": "^3.0.3",
|
|
22
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
23
|
+
"@rollup/plugin-url": "^8.0.2",
|
|
24
|
+
"@types/react": "^18.3.3",
|
|
25
|
+
"@types/react-dom": "^18.3.0",
|
|
26
|
+
"rollup": "^4.18.0",
|
|
27
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
28
|
+
"rollup-plugin-typescript2": "^0.36.0",
|
|
29
|
+
"typescript": "^5.4.5"
|
|
30
|
+
},
|
|
31
|
+
"peerDependencies": {
|
|
32
|
+
"react": "^18.3.1",
|
|
33
|
+
"react-dom": "^18.3.1"
|
|
34
|
+
}
|
|
35
|
+
}
|
package/rollup.config.mjs
CHANGED
|
@@ -1,40 +1,31 @@
|
|
|
1
|
-
import typescript from "rollup-plugin-typescript2";
|
|
2
|
-
import url from "@rollup/plugin-url";
|
|
3
|
-
import postcss from "rollup-plugin-postcss";
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
],
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
destDir: 'dist/assets/images',
|
|
33
|
-
}),
|
|
34
|
-
copy({
|
|
35
|
-
targets: [
|
|
36
|
-
{ src: 'src/assets/images/*', dest: 'dist/assets/images' }
|
|
37
|
-
]
|
|
38
|
-
})
|
|
39
|
-
],
|
|
40
|
-
};
|
|
1
|
+
import typescript from "rollup-plugin-typescript2";
|
|
2
|
+
import url from "@rollup/plugin-url";
|
|
3
|
+
import postcss from "rollup-plugin-postcss";
|
|
4
|
+
import pkg from "./package.json" assert { type: "json" };
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
input: "src/index.tsx",
|
|
8
|
+
output: [
|
|
9
|
+
{
|
|
10
|
+
file: pkg.main,
|
|
11
|
+
format: "cjs",
|
|
12
|
+
sourcemap: true,
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
file: pkg.module,
|
|
16
|
+
format: "es",
|
|
17
|
+
sourcemap: true,
|
|
18
|
+
},
|
|
19
|
+
],
|
|
20
|
+
external: ["react", "react-dom"],
|
|
21
|
+
plugins: [
|
|
22
|
+
typescript(),
|
|
23
|
+
postcss({
|
|
24
|
+
extensions: [".css"],
|
|
25
|
+
}),
|
|
26
|
+
url({
|
|
27
|
+
include: ["**/*.svg", "**/*.png", "**/*.jpg", "**/*.jpeg", "**/*.gif"],
|
|
28
|
+
limit: 0,
|
|
29
|
+
}),
|
|
30
|
+
],
|
|
31
|
+
};
|
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import "bootstrap/dist/css/bootstrap.min.css";
|
|
3
|
-
import "./ImageListPopup.css";
|
|
4
|
-
|
|
5
|
-
interface Image {
|
|
6
|
-
src: string;
|
|
7
|
-
title: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
interface ImageListPopupProps {
|
|
11
|
-
images: Image[];
|
|
12
|
-
onClose: () => void;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
|
|
16
|
-
const [currentIndex, setCurrentIndex] = useState(0);
|
|
17
|
-
|
|
18
|
-
const handlePrevious = () => {
|
|
19
|
-
setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const handleNext = () => {
|
|
23
|
-
setCurrentIndex((prevIndex) =>
|
|
24
|
-
prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
|
|
25
|
-
);
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
return (
|
|
29
|
-
<div className="popup-overlay">
|
|
30
|
-
<div className="popup-container">
|
|
31
|
-
<div className="popup-header">
|
|
32
|
-
<span>{images[currentIndex].title}</span>
|
|
33
|
-
<button className="btn-close" onClick={onClose}></button>
|
|
34
|
-
</div>
|
|
35
|
-
<div className="popup-body">
|
|
36
|
-
<img
|
|
37
|
-
src={images[currentIndex].src}
|
|
38
|
-
alt={images[currentIndex].title}
|
|
39
|
-
className="img-fluid"
|
|
40
|
-
/>
|
|
41
|
-
</div>
|
|
42
|
-
<div className="popup-footer">
|
|
43
|
-
{images.length > 1 && (
|
|
44
|
-
<>
|
|
45
|
-
<button
|
|
46
|
-
className="btn btn-secondary me-2"
|
|
47
|
-
onClick={handlePrevious}
|
|
48
|
-
>
|
|
49
|
-
Previous
|
|
50
|
-
</button>
|
|
51
|
-
<button className="btn btn-secondary" onClick={handleNext}>
|
|
52
|
-
Next
|
|
53
|
-
</button>
|
|
54
|
-
</>
|
|
55
|
-
)}
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
export default ImageListPopup;
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import "bootstrap/dist/css/bootstrap.min.css";
|
|
3
|
+
import "./ImageListPopup.css";
|
|
4
|
+
|
|
5
|
+
interface Image {
|
|
6
|
+
src: string;
|
|
7
|
+
title: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
interface ImageListPopupProps {
|
|
11
|
+
images: Image[];
|
|
12
|
+
onClose: () => void;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const ImageListPopup: React.FC<ImageListPopupProps> = ({ images, onClose }) => {
|
|
16
|
+
const [currentIndex, setCurrentIndex] = useState(0);
|
|
17
|
+
|
|
18
|
+
const handlePrevious = () => {
|
|
19
|
+
setCurrentIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : prevIndex));
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const handleNext = () => {
|
|
23
|
+
setCurrentIndex((prevIndex) =>
|
|
24
|
+
prevIndex < images.length - 1 ? prevIndex + 1 : prevIndex,
|
|
25
|
+
);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<div className="popup-overlay">
|
|
30
|
+
<div className="popup-container">
|
|
31
|
+
<div className="popup-header">
|
|
32
|
+
<span>{images[currentIndex].title}</span>
|
|
33
|
+
<button className="btn-close" onClick={onClose}></button>
|
|
34
|
+
</div>
|
|
35
|
+
<div className="popup-body">
|
|
36
|
+
<img
|
|
37
|
+
src={images[currentIndex].src}
|
|
38
|
+
alt={images[currentIndex].title}
|
|
39
|
+
className="img-fluid"
|
|
40
|
+
/>
|
|
41
|
+
</div>
|
|
42
|
+
<div className="popup-footer">
|
|
43
|
+
{images.length > 1 && (
|
|
44
|
+
<>
|
|
45
|
+
<button
|
|
46
|
+
className="btn btn-secondary me-2"
|
|
47
|
+
onClick={handlePrevious}
|
|
48
|
+
>
|
|
49
|
+
Previous
|
|
50
|
+
</button>
|
|
51
|
+
<button className="btn btn-secondary" onClick={handleNext}>
|
|
52
|
+
Next
|
|
53
|
+
</button>
|
|
54
|
+
</>
|
|
55
|
+
)}
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
);
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
export default ImageListPopup;
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import closeIcon from "
|
|
3
|
-
import "./Popup.css";
|
|
4
|
-
|
|
5
|
-
interface PopupProps {
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
onCloseClick: () => void;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
|
|
11
|
-
return (
|
|
12
|
-
<div className="popup-overlay">
|
|
13
|
-
<div className="shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
|
|
14
|
-
<div className="end-0 top-0 position-absolute ">
|
|
15
|
-
<img
|
|
16
|
-
src={closeIcon}
|
|
17
|
-
alt="close"
|
|
18
|
-
className="closeIcon me-2"
|
|
19
|
-
onClick={onCloseClick}
|
|
20
|
-
/>
|
|
21
|
-
</div>
|
|
22
|
-
{children}
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
);
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
export default Popup;
|
|
1
|
+
import React from "react";
|
|
2
|
+
import closeIcon from "src/assets/images/icon_close 2.png";
|
|
3
|
+
import "./Popup.css";
|
|
4
|
+
|
|
5
|
+
interface PopupProps {
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
onCloseClick: () => void;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const Popup: React.FC<PopupProps> = ({ onCloseClick, children }) => {
|
|
11
|
+
return (
|
|
12
|
+
<div className="popup-overlay">
|
|
13
|
+
<div className="shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4">
|
|
14
|
+
<div className="end-0 top-0 position-absolute ">
|
|
15
|
+
<img
|
|
16
|
+
src={closeIcon}
|
|
17
|
+
alt="close"
|
|
18
|
+
className="closeIcon me-2"
|
|
19
|
+
onClick={onCloseClick}
|
|
20
|
+
/>
|
|
21
|
+
</div>
|
|
22
|
+
{children}
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export default Popup;
|
package/src/index.tsx
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { default as Button } from "./components/Button/Button";
|
|
2
|
-
export { default as Popup } from "./components/Popup/Popup";
|
|
3
|
-
export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
|
|
1
|
+
export { default as Button } from "./components/Button/Button";
|
|
2
|
+
export { default as Popup } from "./components/Popup/Popup";
|
|
3
|
+
export { default as ImageListPopup } from "./components/ImageListPopup/ImageListPopup";
|
|
Binary file
|