From ed3249b79e6a69333a5ae73c2eeca57c013ba363 Mon Sep 17 00:00:00 2001 From: aslampangestu Date: Wed, 20 Apr 2022 08:26:37 +0700 Subject: [PATCH 01/10] add counter --- src/ReactSimpleImageViewer.tsx | 41 +++++++++++++++++++++++++--------- src/styles.module.css | 8 +++++++ 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/src/ReactSimpleImageViewer.tsx b/src/ReactSimpleImageViewer.tsx index 86b3585..e60c6c2 100644 --- a/src/ReactSimpleImageViewer.tsx +++ b/src/ReactSimpleImageViewer.tsx @@ -1,4 +1,10 @@ -import React, { CSSProperties, useCallback, useEffect, useState } from "react"; +import React, { + CSSProperties, + useCallback, + useEffect, + useState, + useMemo, +} from "react"; import styles from "./styles.module.css"; interface IProps { @@ -11,15 +17,19 @@ interface IProps { closeComponent?: JSX.Element; leftArrowComponent?: JSX.Element; rightArrowComponent?: JSX.Element; + showCounter?: boolean; + counterComponent?: JSX.Element; } const ReactSimpleImageViewer = (props: IProps) => { const [currentIndex, setCurrentIndex] = useState(props.currentIndex ?? 0); + const dataLength = useMemo(() => props.src.length, [props.src]); + const changeImage = useCallback( (delta: number) => { - let nextIndex = (currentIndex + delta) % props.src.length; - if (nextIndex < 0) nextIndex = props.src.length - 1; + let nextIndex = (currentIndex + delta) % dataLength; + if (nextIndex < 0) nextIndex = dataLength - 1; setCurrentIndex(nextIndex); }, [currentIndex] @@ -31,8 +41,10 @@ const ReactSimpleImageViewer = (props: IProps) => { return; } - const checkId = event.target.id === 'ReactSimpleImageViewer'; - const checkClass = event.target.classList.contains('react-simple-image-viewer__slide'); + const checkId = event.target.id === "ReactSimpleImageViewer"; + const checkClass = event.target.classList.contains( + "react-simple-image-viewer__slide" + ); if (checkId || checkClass) { event.stopPropagation(); @@ -98,24 +110,24 @@ const ReactSimpleImageViewer = (props: IProps) => { className={`${styles.close} react-simple-image-viewer__close`} onClick={() => props.onClose?.()} > - { props.closeComponent || "×" } + {props.closeComponent || "×"} - {props.src.length > 1 && ( + {dataLength > 1 && ( changeImage(-1)} > - { props.leftArrowComponent || "❮" } + {props.leftArrowComponent || "❮"} )} - {props.src.length > 1 && ( + {dataLength > 1 && ( changeImage(1)} > - { props.rightArrowComponent || "❯" } + {props.rightArrowComponent || "❯"} )} @@ -127,6 +139,15 @@ const ReactSimpleImageViewer = (props: IProps) => { + + {props.showCounter && ( +
changeImage(-1)} + > + {props.counterComponent ||
{currentIndex} / {dataLength}
} +
+ )} ); }; diff --git a/src/styles.module.css b/src/styles.module.css index 9f8bb0a..ff1e93b 100644 --- a/src/styles.module.css +++ b/src/styles.module.css @@ -10,6 +10,7 @@ height: 100%; background-color: black; box-sizing: border-box; + overflow: hidden; } .content { @@ -91,3 +92,10 @@ padding: 0; } } + +.counter { + color: white; + background-color: #777777; + border-radius: 4px; + opacity: 0.5; +} \ No newline at end of file From 878efc5a2712873d65c287d2377dfab3c99bf33d Mon Sep 17 00:00:00 2001 From: aslampangestu Date: Wed, 20 Apr 2022 08:33:28 +0700 Subject: [PATCH 02/10] update --- src/ReactSimpleImageViewer.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/ReactSimpleImageViewer.tsx b/src/ReactSimpleImageViewer.tsx index e60c6c2..33560d6 100644 --- a/src/ReactSimpleImageViewer.tsx +++ b/src/ReactSimpleImageViewer.tsx @@ -142,8 +142,7 @@ const ReactSimpleImageViewer = (props: IProps) => { {props.showCounter && (
changeImage(-1)} + className={`react-simple-image-viewer__counter`} > {props.counterComponent ||
{currentIndex} / {dataLength}
}
From 7550f25d976073b93421ba5bf21fbef260e55e4a Mon Sep 17 00:00:00 2001 From: aslampangestu Date: Wed, 20 Apr 2022 08:41:40 +0700 Subject: [PATCH 03/10] build --- build/index.cjs.js | 108 ++ build/index.cjs.js.map | 1 + build/index.esm.js | 102 ++ build/index.esm.js.map | 1 + build/types/ReactSimpleImageViewer.d.ts | 16 + build/types/index.d.ts | 2 + package-lock.json | 1861 +---------------------- tsconfig.json | 2 +- 8 files changed, 240 insertions(+), 1853 deletions(-) create mode 100644 build/index.cjs.js create mode 100644 build/index.cjs.js.map create mode 100644 build/index.esm.js create mode 100644 build/index.esm.js.map create mode 100644 build/types/ReactSimpleImageViewer.d.ts create mode 100644 build/types/index.d.ts diff --git a/build/index.cjs.js b/build/index.cjs.js new file mode 100644 index 0000000..e96a403 --- /dev/null +++ b/build/index.cjs.js @@ -0,0 +1,108 @@ +'use strict'; + +var React = require('react'); + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + +var React__default = /*#__PURE__*/_interopDefaultLegacy(React); + +function styleInject(css, ref) { + if ( ref === void 0 ) ref = {}; + var insertAt = ref.insertAt; + + if (!css || typeof document === 'undefined') { return; } + + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement('style'); + style.type = 'text/css'; + + if (insertAt === 'top') { + if (head.firstChild) { + head.insertBefore(style, head.firstChild); + } else { + head.appendChild(style); + } + } else { + head.appendChild(style); + } + + if (style.styleSheet) { + style.styleSheet.cssText = css; + } else { + style.appendChild(document.createTextNode(css)); + } +} + +var css_248z = ".styles-module_wrapper__1I_qj {\n z-index: 1;\n display: flex;\n align-items: center;\n position: fixed;\n padding: 0px 60px 0px 60px;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: black;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.styles-module_content__2jwZj {\n margin: auto;\n padding: 0;\n width: 90%;\n height: 100%;\n max-height: 100%;\n text-align: center;\n}\n\n.styles-module_slide__1zrfk {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.styles-module_image__2hdkJ {\n max-height: 100%;\n max-width: 100%;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n}\n\n.styles-module_close__2I1sI {\n color: white;\n position: absolute;\n top: 15px;\n right: 15px;\n font-size: 40px;\n font-weight: bold;\n opacity: 0.2;\n cursor: pointer;\n}\n\n.styles-module_close__2I1sI:hover {\n opacity: 1;\n}\n\n.styles-module_navigation__1pqAE {\n height: 80%;\n color: white;\n cursor: pointer;\n position: absolute;\n font-size: 60px;\n line-height: 60px;\n font-weight: bold;\n display: flex;\n align-items: center;\n opacity: 0.2;\n padding: 0 15px;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n}\n\n.styles-module_navigation__1pqAE:hover {\n opacity: 1;\n}\n\n@media (hover: none) {\n .styles-module_navigation__1pqAE:hover {\n opacity: 0.2;\n }\n}\n\n.styles-module_prev__KqFRp {\n left: 0;\n}\n\n.styles-module_next__1uQwZ {\n right: 0;\n}\n\n@media (max-width: 900px) {\n .styles-module_wrapper__1I_qj {\n padding: 0;\n }\n}\n\n.styles-module_counter__1MOur {\n color: white;\n background-color: #777777;\n border-radius: 4px;\n opacity: 0.5;\n}"; +var styles = {"wrapper":"styles-module_wrapper__1I_qj","content":"styles-module_content__2jwZj","slide":"styles-module_slide__1zrfk","image":"styles-module_image__2hdkJ","close":"styles-module_close__2I1sI","navigation":"styles-module_navigation__1pqAE","prev":"styles-module_prev__KqFRp","next":"styles-module_next__1uQwZ","counter":"styles-module_counter__1MOur"}; +styleInject(css_248z); + +const ReactSimpleImageViewer = (props) => { + var _a; + const [currentIndex, setCurrentIndex] = React.useState((_a = props.currentIndex) !== null && _a !== void 0 ? _a : 0); + const dataLength = React.useMemo(() => props.src.length, [props.src]); + const changeImage = React.useCallback((delta) => { + let nextIndex = (currentIndex + delta) % dataLength; + if (nextIndex < 0) + nextIndex = dataLength - 1; + setCurrentIndex(nextIndex); + }, [currentIndex]); + const handleClick = React.useCallback((event) => { + var _a; + if (!event.target || !props.closeOnClickOutside) { + return; + } + const checkId = event.target.id === "ReactSimpleImageViewer"; + const checkClass = event.target.classList.contains("react-simple-image-viewer__slide"); + if (checkId || checkClass) { + event.stopPropagation(); + (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); + } + }, [props.onClose]); + const handleKeyDown = React.useCallback((event) => { + var _a; + if (event.key === "Escape") { + (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); + } + if (["ArrowLeft", "h"].includes(event.key)) { + changeImage(-1); + } + if (["ArrowRight", "l"].includes(event.key)) { + changeImage(1); + } + }, [props.onClose, changeImage]); + const handleWheel = React.useCallback((event) => { + if (event.wheelDeltaY > 0) { + changeImage(-1); + } + else { + changeImage(1); + } + }, [changeImage]); + React.useEffect(() => { + document.addEventListener("keydown", handleKeyDown); + if (!props.disableScroll) { + document.addEventListener("wheel", handleWheel); + } + return () => { + document.removeEventListener("keydown", handleKeyDown); + if (!props.disableScroll) { + document.removeEventListener("wheel", handleWheel); + } + }; + }, [handleKeyDown, handleWheel]); + return (React__default['default'].createElement("div", { id: "ReactSimpleImageViewer", className: `${styles.wrapper} react-simple-image-viewer__modal`, onKeyDown: handleKeyDown, onClick: handleClick, style: props.backgroundStyle }, + React__default['default'].createElement("span", { className: `${styles.close} react-simple-image-viewer__close`, onClick: () => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); } }, props.closeComponent || "×"), + dataLength > 1 && (React__default['default'].createElement("span", { className: `${styles.navigation} ${styles.prev} react-simple-image-viewer__previous`, onClick: () => changeImage(-1) }, props.leftArrowComponent || "❮")), + dataLength > 1 && (React__default['default'].createElement("span", { className: `${styles.navigation} ${styles.next} react-simple-image-viewer__next`, onClick: () => changeImage(1) }, props.rightArrowComponent || "❯")), + React__default['default'].createElement("div", { className: `${styles.content} react-simple-image-viewer__modal-content`, onClick: handleClick }, + React__default['default'].createElement("div", { className: `${styles.slide} react-simple-image-viewer__slide` }, + React__default['default'].createElement("img", { className: styles.image, src: props.src[currentIndex], alt: "" }))), + props.showCounter && (React__default['default'].createElement("div", { className: `react-simple-image-viewer__counter` }, props.counterComponent || React__default['default'].createElement("div", { className: styles.counter }, + currentIndex, + " / ", + dataLength))))); +}; + +module.exports = ReactSimpleImageViewer; +//# sourceMappingURL=index.cjs.js.map diff --git a/build/index.cjs.js.map b/build/index.cjs.js.map new file mode 100644 index 0000000..8157791 --- /dev/null +++ b/build/index.cjs.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.cjs.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/ReactSimpleImageViewer.tsx"],"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","import React, {\n CSSProperties,\n useCallback,\n useEffect,\n useState,\n useMemo,\n} from \"react\";\nimport styles from \"./styles.module.css\";\n\ninterface IProps {\n src: string[];\n currentIndex?: number;\n backgroundStyle?: CSSProperties;\n disableScroll?: boolean;\n closeOnClickOutside?: boolean;\n onClose?: () => void;\n closeComponent?: JSX.Element;\n leftArrowComponent?: JSX.Element;\n rightArrowComponent?: JSX.Element;\n showCounter?: boolean;\n counterComponent?: JSX.Element;\n}\n\nconst ReactSimpleImageViewer = (props: IProps) => {\n const [currentIndex, setCurrentIndex] = useState(props.currentIndex ?? 0);\n\n const dataLength = useMemo(() => props.src.length, [props.src]);\n\n const changeImage = useCallback(\n (delta: number) => {\n let nextIndex = (currentIndex + delta) % dataLength;\n if (nextIndex < 0) nextIndex = dataLength - 1;\n setCurrentIndex(nextIndex);\n },\n [currentIndex]\n );\n\n const handleClick = useCallback(\n (event: any) => {\n if (!event.target || !props.closeOnClickOutside) {\n return;\n }\n\n const checkId = event.target.id === \"ReactSimpleImageViewer\";\n const checkClass = event.target.classList.contains(\n \"react-simple-image-viewer__slide\"\n );\n\n if (checkId || checkClass) {\n event.stopPropagation();\n props.onClose?.();\n }\n },\n [props.onClose]\n );\n\n const handleKeyDown = useCallback(\n (event: any) => {\n if (event.key === \"Escape\") {\n props.onClose?.();\n }\n\n if ([\"ArrowLeft\", \"h\"].includes(event.key)) {\n changeImage(-1);\n }\n\n if ([\"ArrowRight\", \"l\"].includes(event.key)) {\n changeImage(1);\n }\n },\n [props.onClose, changeImage]\n );\n\n const handleWheel = useCallback(\n (event: any) => {\n if (event.wheelDeltaY > 0) {\n changeImage(-1);\n } else {\n changeImage(1);\n }\n },\n [changeImage]\n );\n\n useEffect(() => {\n document.addEventListener(\"keydown\", handleKeyDown);\n\n if (!props.disableScroll) {\n document.addEventListener(\"wheel\", handleWheel);\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n\n if (!props.disableScroll) {\n document.removeEventListener(\"wheel\", handleWheel);\n }\n };\n }, [handleKeyDown, handleWheel]);\n\n return (\n \n props.onClose?.()}\n >\n {props.closeComponent || \"×\"}\n \n\n {dataLength > 1 && (\n changeImage(-1)}\n >\n {props.leftArrowComponent || \"❮\"}\n \n )}\n\n {dataLength > 1 && (\n changeImage(1)}\n >\n {props.rightArrowComponent || \"❯\"}\n \n )}\n\n \n
\n \"\"\n
\n \n\n {props.showCounter && (\n \n {props.counterComponent ||
{currentIndex} / {dataLength}
}\n \n )}\n \n );\n};\n\nexport default ReactSimpleImageViewer;\n"],"names":["useState","useMemo","useCallback","useEffect","React"],"mappings":"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"} \ No newline at end of file diff --git a/build/index.esm.js b/build/index.esm.js new file mode 100644 index 0000000..37f42f7 --- /dev/null +++ b/build/index.esm.js @@ -0,0 +1,102 @@ +import React, { useState, useMemo, useCallback, useEffect } from 'react'; + +function styleInject(css, ref) { + if ( ref === void 0 ) ref = {}; + var insertAt = ref.insertAt; + + if (!css || typeof document === 'undefined') { return; } + + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement('style'); + style.type = 'text/css'; + + if (insertAt === 'top') { + if (head.firstChild) { + head.insertBefore(style, head.firstChild); + } else { + head.appendChild(style); + } + } else { + head.appendChild(style); + } + + if (style.styleSheet) { + style.styleSheet.cssText = css; + } else { + style.appendChild(document.createTextNode(css)); + } +} + +var css_248z = ".styles-module_wrapper__1I_qj {\n z-index: 1;\n display: flex;\n align-items: center;\n position: fixed;\n padding: 0px 60px 0px 60px;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: black;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.styles-module_content__2jwZj {\n margin: auto;\n padding: 0;\n width: 90%;\n height: 100%;\n max-height: 100%;\n text-align: center;\n}\n\n.styles-module_slide__1zrfk {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.styles-module_image__2hdkJ {\n max-height: 100%;\n max-width: 100%;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n}\n\n.styles-module_close__2I1sI {\n color: white;\n position: absolute;\n top: 15px;\n right: 15px;\n font-size: 40px;\n font-weight: bold;\n opacity: 0.2;\n cursor: pointer;\n}\n\n.styles-module_close__2I1sI:hover {\n opacity: 1;\n}\n\n.styles-module_navigation__1pqAE {\n height: 80%;\n color: white;\n cursor: pointer;\n position: absolute;\n font-size: 60px;\n line-height: 60px;\n font-weight: bold;\n display: flex;\n align-items: center;\n opacity: 0.2;\n padding: 0 15px;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n}\n\n.styles-module_navigation__1pqAE:hover {\n opacity: 1;\n}\n\n@media (hover: none) {\n .styles-module_navigation__1pqAE:hover {\n opacity: 0.2;\n }\n}\n\n.styles-module_prev__KqFRp {\n left: 0;\n}\n\n.styles-module_next__1uQwZ {\n right: 0;\n}\n\n@media (max-width: 900px) {\n .styles-module_wrapper__1I_qj {\n padding: 0;\n }\n}\n\n.styles-module_counter__1MOur {\n color: white;\n background-color: #777777;\n border-radius: 4px;\n opacity: 0.5;\n}"; +var styles = {"wrapper":"styles-module_wrapper__1I_qj","content":"styles-module_content__2jwZj","slide":"styles-module_slide__1zrfk","image":"styles-module_image__2hdkJ","close":"styles-module_close__2I1sI","navigation":"styles-module_navigation__1pqAE","prev":"styles-module_prev__KqFRp","next":"styles-module_next__1uQwZ","counter":"styles-module_counter__1MOur"}; +styleInject(css_248z); + +const ReactSimpleImageViewer = (props) => { + var _a; + const [currentIndex, setCurrentIndex] = useState((_a = props.currentIndex) !== null && _a !== void 0 ? _a : 0); + const dataLength = useMemo(() => props.src.length, [props.src]); + const changeImage = useCallback((delta) => { + let nextIndex = (currentIndex + delta) % dataLength; + if (nextIndex < 0) + nextIndex = dataLength - 1; + setCurrentIndex(nextIndex); + }, [currentIndex]); + const handleClick = useCallback((event) => { + var _a; + if (!event.target || !props.closeOnClickOutside) { + return; + } + const checkId = event.target.id === "ReactSimpleImageViewer"; + const checkClass = event.target.classList.contains("react-simple-image-viewer__slide"); + if (checkId || checkClass) { + event.stopPropagation(); + (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); + } + }, [props.onClose]); + const handleKeyDown = useCallback((event) => { + var _a; + if (event.key === "Escape") { + (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); + } + if (["ArrowLeft", "h"].includes(event.key)) { + changeImage(-1); + } + if (["ArrowRight", "l"].includes(event.key)) { + changeImage(1); + } + }, [props.onClose, changeImage]); + const handleWheel = useCallback((event) => { + if (event.wheelDeltaY > 0) { + changeImage(-1); + } + else { + changeImage(1); + } + }, [changeImage]); + useEffect(() => { + document.addEventListener("keydown", handleKeyDown); + if (!props.disableScroll) { + document.addEventListener("wheel", handleWheel); + } + return () => { + document.removeEventListener("keydown", handleKeyDown); + if (!props.disableScroll) { + document.removeEventListener("wheel", handleWheel); + } + }; + }, [handleKeyDown, handleWheel]); + return (React.createElement("div", { id: "ReactSimpleImageViewer", className: `${styles.wrapper} react-simple-image-viewer__modal`, onKeyDown: handleKeyDown, onClick: handleClick, style: props.backgroundStyle }, + React.createElement("span", { className: `${styles.close} react-simple-image-viewer__close`, onClick: () => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); } }, props.closeComponent || "×"), + dataLength > 1 && (React.createElement("span", { className: `${styles.navigation} ${styles.prev} react-simple-image-viewer__previous`, onClick: () => changeImage(-1) }, props.leftArrowComponent || "❮")), + dataLength > 1 && (React.createElement("span", { className: `${styles.navigation} ${styles.next} react-simple-image-viewer__next`, onClick: () => changeImage(1) }, props.rightArrowComponent || "❯")), + React.createElement("div", { className: `${styles.content} react-simple-image-viewer__modal-content`, onClick: handleClick }, + React.createElement("div", { className: `${styles.slide} react-simple-image-viewer__slide` }, + React.createElement("img", { className: styles.image, src: props.src[currentIndex], alt: "" }))), + props.showCounter && (React.createElement("div", { className: `react-simple-image-viewer__counter` }, props.counterComponent || React.createElement("div", { className: styles.counter }, + currentIndex, + " / ", + dataLength))))); +}; + +export default ReactSimpleImageViewer; +//# sourceMappingURL=index.esm.js.map diff --git a/build/index.esm.js.map b/build/index.esm.js.map new file mode 100644 index 0000000..334985f --- /dev/null +++ b/build/index.esm.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/ReactSimpleImageViewer.tsx"],"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","import React, {\n CSSProperties,\n useCallback,\n useEffect,\n useState,\n useMemo,\n} from \"react\";\nimport styles from \"./styles.module.css\";\n\ninterface IProps {\n src: string[];\n currentIndex?: number;\n backgroundStyle?: CSSProperties;\n disableScroll?: boolean;\n closeOnClickOutside?: boolean;\n onClose?: () => void;\n closeComponent?: JSX.Element;\n leftArrowComponent?: JSX.Element;\n rightArrowComponent?: JSX.Element;\n showCounter?: boolean;\n counterComponent?: JSX.Element;\n}\n\nconst ReactSimpleImageViewer = (props: IProps) => {\n const [currentIndex, setCurrentIndex] = useState(props.currentIndex ?? 0);\n\n const dataLength = useMemo(() => props.src.length, [props.src]);\n\n const changeImage = useCallback(\n (delta: number) => {\n let nextIndex = (currentIndex + delta) % dataLength;\n if (nextIndex < 0) nextIndex = dataLength - 1;\n setCurrentIndex(nextIndex);\n },\n [currentIndex]\n );\n\n const handleClick = useCallback(\n (event: any) => {\n if (!event.target || !props.closeOnClickOutside) {\n return;\n }\n\n const checkId = event.target.id === \"ReactSimpleImageViewer\";\n const checkClass = event.target.classList.contains(\n \"react-simple-image-viewer__slide\"\n );\n\n if (checkId || checkClass) {\n event.stopPropagation();\n props.onClose?.();\n }\n },\n [props.onClose]\n );\n\n const handleKeyDown = useCallback(\n (event: any) => {\n if (event.key === \"Escape\") {\n props.onClose?.();\n }\n\n if ([\"ArrowLeft\", \"h\"].includes(event.key)) {\n changeImage(-1);\n }\n\n if ([\"ArrowRight\", \"l\"].includes(event.key)) {\n changeImage(1);\n }\n },\n [props.onClose, changeImage]\n );\n\n const handleWheel = useCallback(\n (event: any) => {\n if (event.wheelDeltaY > 0) {\n changeImage(-1);\n } else {\n changeImage(1);\n }\n },\n [changeImage]\n );\n\n useEffect(() => {\n document.addEventListener(\"keydown\", handleKeyDown);\n\n if (!props.disableScroll) {\n document.addEventListener(\"wheel\", handleWheel);\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n\n if (!props.disableScroll) {\n document.removeEventListener(\"wheel\", handleWheel);\n }\n };\n }, [handleKeyDown, handleWheel]);\n\n return (\n \n props.onClose?.()}\n >\n {props.closeComponent || \"×\"}\n \n\n {dataLength > 1 && (\n changeImage(-1)}\n >\n {props.leftArrowComponent || \"❮\"}\n \n )}\n\n {dataLength > 1 && (\n changeImage(1)}\n >\n {props.rightArrowComponent || \"❯\"}\n \n )}\n\n \n
\n \"\"\n
\n \n\n {props.showCounter && (\n \n {props.counterComponent ||
{currentIndex} / {dataLength}
}\n \n )}\n \n );\n};\n\nexport default ReactSimpleImageViewer;\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/build/types/ReactSimpleImageViewer.d.ts b/build/types/ReactSimpleImageViewer.d.ts new file mode 100644 index 0000000..24998cb --- /dev/null +++ b/build/types/ReactSimpleImageViewer.d.ts @@ -0,0 +1,16 @@ +import { CSSProperties } from "react"; +interface IProps { + src: string[]; + currentIndex?: number; + backgroundStyle?: CSSProperties; + disableScroll?: boolean; + closeOnClickOutside?: boolean; + onClose?: () => void; + closeComponent?: JSX.Element; + leftArrowComponent?: JSX.Element; + rightArrowComponent?: JSX.Element; + showCounter?: boolean; + counterComponent?: JSX.Element; +} +declare const ReactSimpleImageViewer: (props: IProps) => JSX.Element; +export default ReactSimpleImageViewer; diff --git a/build/types/index.d.ts b/build/types/index.d.ts new file mode 100644 index 0000000..3f88866 --- /dev/null +++ b/build/types/index.d.ts @@ -0,0 +1,2 @@ +import ReactSimpleImageViewer from "./ReactSimpleImageViewer"; +export default ReactSimpleImageViewer; diff --git a/package-lock.json b/package-lock.json index 4c8bb97..7361440 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,1843 +1,8 @@ { "name": "react-simple-image-viewer", "version": "1.2.1", - "lockfileVersion": 2, + "lockfileVersion": 1, "requires": true, - "packages": { - "": { - "name": "react-simple-image-viewer", - "version": "1.2.1", - "license": "MIT", - "devDependencies": { - "@rollup/plugin-typescript": "^8.2.1", - "@types/css-modules": "^1.0.2", - "@types/react": "^17.0.9", - "@types/react-dom": "^17.0.6", - "postcss": "^8.3.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "rollup": "^2.51.0", - "rollup-plugin-postcss": "^4.0.2", - "tslib": "^2.2.0", - "typescript": "^4.3.2" - }, - "peerDependencies": { - "react": "^17.0.0", - "react-dom": "^17.0.0" - } - }, - "node_modules/@babel/code-frame": { - "version": "7.10.4", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", - "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", - "dev": true, - "dependencies": { - "@babel/highlight": "^7.10.4" - } - }, - "node_modules/@babel/helper-validator-identifier": { - "version": "7.10.4", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", - "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==", - "dev": true - }, - "node_modules/@babel/highlight": { - "version": "7.10.4", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", - "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.10.4", - "chalk": "^2.0.0", - "js-tokens": "^4.0.0" - } - }, - "node_modules/@rollup/plugin-typescript": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.2.1.tgz", - "integrity": "sha512-Qd2E1pleDR4bwyFxqbjt4eJf+wB0UKVMLc7/BAFDGVdAXQMCsD4DUv5/7/ww47BZCYxWtJqe1Lo0KVNswBJlRw==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "^3.1.0", - "resolve": "^1.17.0" - }, - "engines": { - "node": ">=8.0.0" - }, - "peerDependencies": { - "rollup": "^2.14.0", - "tslib": "*", - "typescript": ">=3.7.0" - } - }, - "node_modules/@rollup/pluginutils": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", - "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", - "dev": true, - "dependencies": { - "@types/estree": "0.0.39", - "estree-walker": "^1.0.1", - "picomatch": "^2.2.2" - }, - "engines": { - "node": ">= 8.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0" - } - }, - "node_modules/@trysound/sax": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", - "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", - "dev": true, - "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/@types/css-modules": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@types/css-modules/-/css-modules-1.0.2.tgz", - "integrity": "sha512-tyqlt2GtEBdsxJylh78zSxI/kOJK5Iz8Ta4Fxr8KLTP8mD/IgMa84D8EKPS/AWCp+MDoctgJyikrVWY28GKmcg==", - "dev": true - }, - "node_modules/@types/estree": { - "version": "0.0.39", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", - "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", - "dev": true - }, - "node_modules/@types/parse-json": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", - "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", - "dev": true - }, - "node_modules/@types/prop-types": { - "version": "15.7.3", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", - "dev": true - }, - "node_modules/@types/react": { - "version": "17.0.9", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.9.tgz", - "integrity": "sha512-2Cw7FvevpJxQrCb+k5t6GH1KIvmadj5uBbjPaLlJB/nZWUj56e1ZqcD6zsoMFB47MsJUTFl9RJ132A7hb3QFJA==", - "dev": true, - "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, - "node_modules/@types/react-dom": { - "version": "17.0.6", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.6.tgz", - "integrity": "sha512-MGTI+TudxAnGTj8aco8mogaPSJGK2Whje7OZh1CxNLRyhJpTZg/pGQpIbCT0eCVFQyH7UFpdvCqQEThHIp/gsA==", - "dev": true, - "dependencies": { - "@types/react": "*" - } - }, - "node_modules/@types/scheduler": { - "version": "0.16.1", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz", - "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==", - "dev": true - }, - "node_modules/ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/big.js": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", - "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", - "dev": true, - "engines": { - "node": "*" - } - }, - "node_modules/boolbase": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", - "dev": true - }, - "node_modules/browserslist": { - "version": "4.19.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz", - "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==", - "dev": true, - "dependencies": { - "caniuse-lite": "^1.0.30001286", - "electron-to-chromium": "^1.4.17", - "escalade": "^3.1.1", - "node-releases": "^2.0.1", - "picocolors": "^1.0.0" - }, - "bin": { - "browserslist": "cli.js" - }, - "engines": { - "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - } - }, - "node_modules/caniuse-api": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", - "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==", - "dev": true, - "dependencies": { - "browserslist": "^4.0.0", - "caniuse-lite": "^1.0.0", - "lodash.memoize": "^4.1.2", - "lodash.uniq": "^4.5.0" - } - }, - "node_modules/caniuse-lite": { - "version": "1.0.30001312", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz", - "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==", - "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - } - }, - "node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true - }, - "node_modules/colord": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz", - "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==", - "dev": true - }, - "node_modules/colorette": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz", - "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==", - "dev": true - }, - "node_modules/commander": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", - "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", - "dev": true, - "engines": { - "node": ">= 10" - } - }, - "node_modules/concat-with-sourcemaps": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz", - "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==", - "dev": true, - "dependencies": { - "source-map": "^0.6.1" - } - }, - "node_modules/css-declaration-sorter": { - "version": "6.1.4", - "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.4.tgz", - "integrity": "sha512-lpfkqS0fctcmZotJGhnxkIyJWvBXgpyi2wsFd4J8VB7wzyrT6Ch/3Q+FMNJpjK4gu1+GN5khOnpU2ZVKrLbhCw==", - "dev": true, - "dependencies": { - "timsort": "^0.3.0" - }, - "engines": { - "node": ">= 10" - }, - "peerDependencies": { - "postcss": "^8.0.9" - } - }, - "node_modules/css-select": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz", - "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==", - "dev": true, - "dependencies": { - "boolbase": "^1.0.0", - "css-what": "^5.1.0", - "domhandler": "^4.3.0", - "domutils": "^2.8.0", - "nth-check": "^2.0.1" - }, - "funding": { - "url": "https://github.com/sponsors/fb55" - } - }, - "node_modules/css-tree": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", - "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", - "dev": true, - "dependencies": { - "mdn-data": "2.0.14", - "source-map": "^0.6.1" - }, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/css-what": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz", - "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==", - "dev": true, - "engines": { - "node": ">= 6" - }, - "funding": { - "url": "https://github.com/sponsors/fb55" - } - }, - "node_modules/cssesc": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", - "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", - "dev": true, - "bin": { - "cssesc": "bin/cssesc" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/cssnano": { - "version": "5.0.17", - "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.17.tgz", - "integrity": "sha512-fmjLP7k8kL18xSspeXTzRhaFtRI7DL9b8IcXR80JgtnWBpvAzHT7sCR/6qdn0tnxIaINUN6OEQu83wF57Gs3Xw==", - "dev": true, - "dependencies": { - "cssnano-preset-default": "^5.1.12", - "lilconfig": "^2.0.3", - "yaml": "^1.10.2" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/cssnano" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/cssnano-preset-default": { - "version": "5.1.12", - "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.12.tgz", - "integrity": "sha512-rO/JZYyjW1QNkWBxMGV28DW7d98UDLaF759frhli58QFehZ+D/LSmwQ2z/ylBAe2hUlsIWTq6NYGfQPq65EF9w==", - "dev": true, - "dependencies": { - "css-declaration-sorter": "^6.0.3", - "cssnano-utils": "^3.0.2", - "postcss-calc": "^8.2.0", - "postcss-colormin": "^5.2.5", - "postcss-convert-values": "^5.0.4", - "postcss-discard-comments": "^5.0.3", - "postcss-discard-duplicates": "^5.0.3", - "postcss-discard-empty": "^5.0.3", - "postcss-discard-overridden": "^5.0.4", - "postcss-merge-longhand": "^5.0.6", - "postcss-merge-rules": "^5.0.6", - "postcss-minify-font-values": "^5.0.4", - "postcss-minify-gradients": "^5.0.6", - "postcss-minify-params": "^5.0.5", - "postcss-minify-selectors": "^5.1.3", - "postcss-normalize-charset": "^5.0.3", - "postcss-normalize-display-values": "^5.0.3", - "postcss-normalize-positions": "^5.0.4", - "postcss-normalize-repeat-style": "^5.0.4", - "postcss-normalize-string": "^5.0.4", - "postcss-normalize-timing-functions": "^5.0.3", - "postcss-normalize-unicode": "^5.0.4", - "postcss-normalize-url": "^5.0.5", - "postcss-normalize-whitespace": "^5.0.4", - "postcss-ordered-values": "^5.0.5", - "postcss-reduce-initial": "^5.0.3", - "postcss-reduce-transforms": "^5.0.4", - "postcss-svgo": "^5.0.4", - "postcss-unique-selectors": "^5.0.4" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/cssnano-utils": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.0.2.tgz", - "integrity": "sha512-KhprijuQv2sP4kT92sSQwhlK3SJTbDIsxcfIEySB0O+3m9esFOai7dP9bMx5enHAh2MwarVIcnwiWoOm01RIbQ==", - "dev": true, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/csso": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz", - "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==", - "dev": true, - "dependencies": { - "css-tree": "^1.1.2" - }, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/csstype": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==", - "dev": true - }, - "node_modules/dom-serializer": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", - "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==", - "dev": true, - "dependencies": { - "domelementtype": "^2.0.1", - "domhandler": "^4.2.0", - "entities": "^2.0.0" - }, - "funding": { - "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" - } - }, - "node_modules/domelementtype": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", - "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/fb55" - } - ] - }, - "node_modules/domhandler": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz", - "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==", - "dev": true, - "dependencies": { - "domelementtype": "^2.2.0" - }, - "engines": { - "node": ">= 4" - }, - "funding": { - "url": "https://github.com/fb55/domhandler?sponsor=1" - } - }, - "node_modules/domutils": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", - "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", - "dev": true, - "dependencies": { - "dom-serializer": "^1.0.1", - "domelementtype": "^2.2.0", - "domhandler": "^4.2.0" - }, - "funding": { - "url": "https://github.com/fb55/domutils?sponsor=1" - } - }, - "node_modules/electron-to-chromium": { - "version": "1.4.68", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.68.tgz", - "integrity": "sha512-cId+QwWrV8R1UawO6b9BR1hnkJ4EJPCPAr4h315vliHUtVUJDk39Sg1PMNnaWKfj5x+93ssjeJ9LKL6r8LaMiA==", - "dev": true - }, - "node_modules/emojis-list": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", - "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", - "dev": true, - "engines": { - "node": ">= 4" - } - }, - "node_modules/entities": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", - "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", - "dev": true, - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, - "node_modules/error-ex": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", - "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "dev": true, - "dependencies": { - "is-arrayish": "^0.2.1" - } - }, - "node_modules/escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", - "dev": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true, - "engines": { - "node": ">=0.8.0" - } - }, - "node_modules/estree-walker": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", - "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==", - "dev": true - }, - "node_modules/eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", - "dev": true - }, - "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, - "node_modules/function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", - "dev": true - }, - "node_modules/generic-names": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-2.0.1.tgz", - "integrity": "sha512-kPCHWa1m9wGG/OwQpeweTwM/PYiQLrUIxXbt/P4Nic3LbGjCP0YwrALHW1uNLKZ0LIMg+RF+XRlj2ekT9ZlZAQ==", - "dev": true, - "dependencies": { - "loader-utils": "^1.1.0" - } - }, - "node_modules/has": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", - "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dev": true, - "dependencies": { - "function-bind": "^1.1.1" - }, - "engines": { - "node": ">= 0.4.0" - } - }, - "node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/icss-replace-symbols": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz", - "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=", - "dev": true - }, - "node_modules/icss-utils": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "dev": true, - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/import-cwd": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz", - "integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==", - "dev": true, - "dependencies": { - "import-from": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/import-from": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz", - "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==", - "dev": true, - "dependencies": { - "resolve-from": "^5.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/import-from/node_modules/resolve-from": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", - "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/is-arrayish": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", - "dev": true - }, - "node_modules/is-core-module": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz", - "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==", - "dev": true, - "dependencies": { - "has": "^1.0.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true - }, - "node_modules/json-parse-even-better-errors": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", - "dev": true - }, - "node_modules/json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", - "dev": true, - "dependencies": { - "minimist": "^1.2.0" - }, - "bin": { - "json5": "lib/cli.js" - } - }, - "node_modules/lilconfig": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.4.tgz", - "integrity": "sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==", - "dev": true, - "engines": { - "node": ">=10" - } - }, - "node_modules/lines-and-columns": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz", - "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=", - "dev": true - }, - "node_modules/loader-utils": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", - "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", - "dev": true, - "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^1.0.1" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/lodash.camelcase": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", - "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=", - "dev": true - }, - "node_modules/lodash.memoize": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", - "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=", - "dev": true - }, - "node_modules/lodash.uniq": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", - "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=", - "dev": true - }, - "node_modules/loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, - "dependencies": { - "js-tokens": "^3.0.0 || ^4.0.0" - }, - "bin": { - "loose-envify": "cli.js" - } - }, - "node_modules/mdn-data": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", - "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", - "dev": true - }, - "node_modules/minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true - }, - "node_modules/nanoid": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz", - "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==", - "dev": true, - "bin": { - "nanoid": "bin/nanoid.cjs" - }, - "engines": { - "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" - } - }, - "node_modules/node-releases": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz", - "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==", - "dev": true - }, - "node_modules/normalize-url": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz", - "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/nth-check": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz", - "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==", - "dev": true, - "dependencies": { - "boolbase": "^1.0.0" - }, - "funding": { - "url": "https://github.com/fb55/nth-check?sponsor=1" - } - }, - "node_modules/object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/p-finally": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", - "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/p-queue": { - "version": "6.6.2", - "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz", - "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==", - "dev": true, - "dependencies": { - "eventemitter3": "^4.0.4", - "p-timeout": "^3.2.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/p-timeout": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz", - "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==", - "dev": true, - "dependencies": { - "p-finally": "^1.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/parent-module": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", - "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", - "dev": true, - "dependencies": { - "callsites": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/parent-module/node_modules/callsites": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", - "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "dev": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/path-parse": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", - "dev": true - }, - "node_modules/path-type": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", - "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true - }, - "node_modules/picomatch": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", - "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==", - "dev": true, - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/pify": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz", - "integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/postcss": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz", - "integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==", - "dev": true, - "dependencies": { - "colorette": "^1.2.2", - "nanoid": "^3.1.23", - "source-map-js": "^0.6.2" - }, - "engines": { - "node": "^10 || ^12 || >=14" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - } - }, - "node_modules/postcss-calc": { - "version": "8.2.4", - "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz", - "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==", - "dev": true, - "dependencies": { - "postcss-selector-parser": "^6.0.9", - "postcss-value-parser": "^4.2.0" - }, - "peerDependencies": { - "postcss": "^8.2.2" - } - }, - "node_modules/postcss-colormin": { - "version": "5.2.5", - "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.5.tgz", - "integrity": "sha512-+X30aDaGYq81mFqwyPpnYInsZQnNpdxMX0ajlY7AExCexEFkPVV+KrO7kXwayqEWL2xwEbNQ4nUO0ZsRWGnevg==", - "dev": true, - "dependencies": { - "browserslist": "^4.16.6", - "caniuse-api": "^3.0.0", - "colord": "^2.9.1", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-convert-values": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.4.tgz", - "integrity": "sha512-bugzSAyjIexdObovsPZu/sBCTHccImJxLyFgeV0MmNBm/Lw5h5XnjfML6gzEmJ3A6nyfCW7hb1JXzcsA4Zfbdw==", - "dev": true, - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-discard-comments": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.3.tgz", - "integrity": "sha512-6W5BemziRoqIdAKT+1QjM4bNcJAQ7z7zk073730NHg4cUXh3/rQHHj7pmYxUB9aGhuRhBiUf0pXvIHkRwhQP0Q==", - "dev": true, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-discard-duplicates": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.3.tgz", - "integrity": "sha512-vPtm1Mf+kp7iAENTG7jI1MN1lk+fBqL5y+qxyi4v3H+lzsXEdfS3dwUZD45KVhgzDEgduur8ycB4hMegyMTeRw==", - "dev": true, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-discard-empty": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.3.tgz", - "integrity": "sha512-xGJugpaXKakwKI7sSdZjUuN4V3zSzb2Y0LOlmTajFbNinEjTfVs9PFW2lmKBaC/E64WwYppfqLD03P8l9BuueA==", - "dev": true, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-discard-overridden": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.4.tgz", - "integrity": "sha512-3j9QH0Qh1KkdxwiZOW82cId7zdwXVQv/gRXYDnwx5pBtR1sTkU4cXRK9lp5dSdiM0r0OICO/L8J6sV1/7m0kHg==", - "dev": true, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-load-config": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.0.1.tgz", - "integrity": "sha512-/pDHe30UYZUD11IeG8GWx9lNtu1ToyTsZHnyy45B4Mrwr/Kb6NgYl7k753+05CJNKnjbwh4975amoPJ+TEjHNQ==", - "dev": true, - "dependencies": { - "cosmiconfig": "^7.0.0", - "import-cwd": "^3.0.0" - }, - "engines": { - "node": ">= 10" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - } - }, - "node_modules/postcss-load-config/node_modules/cosmiconfig": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", - "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==", - "dev": true, - "dependencies": { - "@types/parse-json": "^4.0.0", - "import-fresh": "^3.2.1", - "parse-json": "^5.0.0", - "path-type": "^4.0.0", - "yaml": "^1.10.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/postcss-load-config/node_modules/import-fresh": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", - "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", - "dev": true, - "dependencies": { - "parent-module": "^1.0.0", - "resolve-from": "^4.0.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/postcss-load-config/node_modules/parse-json": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", - "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.0.0", - "error-ex": "^1.3.1", - "json-parse-even-better-errors": "^2.3.0", - "lines-and-columns": "^1.1.6" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/postcss-load-config/node_modules/resolve-from": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", - "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/postcss-merge-longhand": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.6.tgz", - "integrity": "sha512-rkmoPwQO6ymJSmWsX6l2hHeEBQa7C4kJb9jyi5fZB1sE8nSCv7sqchoYPixRwX/yvLoZP2y6FA5kcjiByeJqDg==", - "dev": true, - "dependencies": { - "postcss-value-parser": "^4.2.0", - "stylehacks": "^5.0.3" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-merge-rules": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.6.tgz", - "integrity": "sha512-nzJWJ9yXWp8AOEpn/HFAW72WKVGD2bsLiAmgw4hDchSij27bt6TF+sIK0cJUBAYT3SGcjtGGsOR89bwkkMuMgQ==", - "dev": true, - "dependencies": { - "browserslist": "^4.16.6", - "caniuse-api": "^3.0.0", - "cssnano-utils": "^3.0.2", - "postcss-selector-parser": "^6.0.5" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-minify-font-values": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.4.tgz", - "integrity": "sha512-RN6q3tyuEesvyCYYFCRGJ41J1XFvgV+dvYGHr0CeHv8F00yILlN8Slf4t8XW4IghlfZYCeyRrANO6HpJ948ieA==", - "dev": true, - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-minify-gradients": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.6.tgz", - "integrity": "sha512-E/dT6oVxB9nLGUTiY/rG5dX9taugv9cbLNTFad3dKxOO+BQg25Q/xo2z2ddG+ZB1CbkZYaVwx5blY8VC7R/43A==", - "dev": true, - "dependencies": { - "colord": "^2.9.1", - "cssnano-utils": "^3.0.2", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-minify-params": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.5.tgz", - "integrity": "sha512-YBNuq3Rz5LfLFNHb9wrvm6t859b8qIqfXsWeK7wROm3jSKNpO1Y5e8cOyBv6Acji15TgSrAwb3JkVNCqNyLvBg==", - "dev": true, - "dependencies": { - "browserslist": "^4.16.6", - "cssnano-utils": "^3.0.2", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-minify-selectors": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.3.tgz", - "integrity": "sha512-9RJfTiQEKA/kZhMaEXND893nBqmYQ8qYa/G+uPdVnXF6D/FzpfI6kwBtWEcHx5FqDbA79O9n6fQJfrIj6M8jvQ==", - "dev": true, - "dependencies": { - "postcss-selector-parser": "^6.0.5" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-modules": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-4.1.3.tgz", - "integrity": "sha512-dBT39hrXe4OAVYJe/2ZuIZ9BzYhOe7t+IhedYeQ2OxKwDpAGlkEN/fR0fGnrbx4BvgbMReRX4hCubYK9cE/pJQ==", - "dev": true, - "dependencies": { - "generic-names": "^2.0.1", - "icss-replace-symbols": "^1.1.0", - "lodash.camelcase": "^4.3.0", - "postcss-modules-extract-imports": "^3.0.0", - "postcss-modules-local-by-default": "^4.0.0", - "postcss-modules-scope": "^3.0.0", - "postcss-modules-values": "^4.0.0", - "string-hash": "^1.1.1" - }, - "peerDependencies": { - "postcss": "^8.0.0" - } - }, - "node_modules/postcss-modules-extract-imports": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "dev": true, - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/postcss-modules-local-by-default": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz", - "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==", - "dev": true, - "dependencies": { - "icss-utils": "^5.0.0", - "postcss-selector-parser": "^6.0.2", - "postcss-value-parser": "^4.1.0" - }, - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/postcss-modules-scope": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz", - "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==", - "dev": true, - "dependencies": { - "postcss-selector-parser": "^6.0.4" - }, - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/postcss-modules-values": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", - "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", - "dev": true, - "dependencies": { - "icss-utils": "^5.0.0" - }, - "engines": { - "node": "^10 || ^12 || >= 14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/postcss-normalize-charset": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.3.tgz", - "integrity": "sha512-iKEplDBco9EfH7sx4ut7R2r/dwTnUqyfACf62Unc9UiyFuI7uUqZZtY+u+qp7g8Qszl/U28HIfcsI3pEABWFfA==", - "dev": true, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-normalize-display-values": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.0.3.tgz", - "integrity": "sha512-FIV5FY/qs4Ja32jiDb5mVj5iWBlS3N8tFcw2yg98+8MkRgyhtnBgSC0lxU+16AMHbjX5fbSJgw5AXLMolonuRQ==", - "dev": true, - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-normalize-positions": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.4.tgz", - "integrity": "sha512-qynirjBX0Lc73ROomZE3lzzmXXTu48/QiEzKgMeqh28+MfuHLsuqC9po4kj84igZqqFGovz8F8hf44hA3dPYmQ==", - "dev": true, - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-normalize-repeat-style": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.4.tgz", - "integrity": "sha512-Innt+wctD7YpfeDR7r5Ik6krdyppyAg2HBRpX88fo5AYzC1Ut/l3xaxACG0KsbX49cO2n5EB13clPwuYVt8cMA==", - "dev": true, - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-normalize-string": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.4.tgz", - "integrity": "sha512-Dfk42l0+A1CDnVpgE606ENvdmksttLynEqTQf5FL3XGQOyqxjbo25+pglCUvziicTxjtI2NLUR6KkxyUWEVubQ==", - "dev": true, - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-normalize-timing-functions": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.0.3.tgz", - "integrity": "sha512-QRfjvFh11moN4PYnJ7hia4uJXeFotyK3t2jjg8lM9mswleGsNw2Lm3I5wO+l4k1FzK96EFwEVn8X8Ojrp2gP4g==", - "dev": true, - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-normalize-unicode": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.4.tgz", - "integrity": "sha512-W79Regn+a+eXTzB+oV/8XJ33s3pDyFTND2yDuUCo0Xa3QSy1HtNIfRVPXNubHxjhlqmMFADr3FSCHT84ITW3ig==", - "dev": true, - "dependencies": { - "browserslist": "^4.16.6", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-normalize-url": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.5.tgz", - "integrity": "sha512-Ws3tX+PcekYlXh+ycAt0wyzqGthkvVtZ9SZLutMVvHARxcpu4o7vvXcNoiNKyjKuWecnjS6HDI3fjBuDr5MQxQ==", - "dev": true, - "dependencies": { - "normalize-url": "^6.0.1", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-normalize-whitespace": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.4.tgz", - "integrity": "sha512-wsnuHolYZjMwWZJoTC9jeI2AcjA67v4UuidDrPN9RnX8KIZfE+r2Nd6XZRwHVwUiHmRvKQtxiqo64K+h8/imaw==", - "dev": true, - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-ordered-values": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.5.tgz", - "integrity": "sha512-mfY7lXpq+8bDEHfP+muqibDPhZ5eP9zgBEF9XRvoQgXcQe2Db3G1wcvjbnfjXG6wYsl+0UIjikqq4ym1V2jGMQ==", - "dev": true, - "dependencies": { - "cssnano-utils": "^3.0.2", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-reduce-initial": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.0.3.tgz", - "integrity": "sha512-c88TkSnQ/Dnwgb4OZbKPOBbCaauwEjbECP5uAuFPOzQ+XdjNjRH7SG0dteXrpp1LlIFEKK76iUGgmw2V0xeieA==", - "dev": true, - "dependencies": { - "browserslist": "^4.16.6", - "caniuse-api": "^3.0.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-reduce-transforms": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.4.tgz", - "integrity": "sha512-VIJB9SFSaL8B/B7AXb7KHL6/GNNbbCHslgdzS9UDfBZYIA2nx8NLY7iD/BXFSO/1sRUILzBTfHCoW5inP37C5g==", - "dev": true, - "dependencies": { - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-selector-parser": { - "version": "6.0.9", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz", - "integrity": "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==", - "dev": true, - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/postcss-svgo": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.4.tgz", - "integrity": "sha512-yDKHvULbnZtIrRqhZoA+rxreWpee28JSRH/gy9727u0UCgtpv1M/9WEWY3xySlFa0zQJcqf6oCBJPR5NwkmYpg==", - "dev": true, - "dependencies": { - "postcss-value-parser": "^4.2.0", - "svgo": "^2.7.0" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-unique-selectors": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.4.tgz", - "integrity": "sha512-5ampwoSDJCxDPoANBIlMgoBcYUHnhaiuLYJR5pj1DLnYQvMRVyFuTA5C3Bvt+aHtiqWpJkD/lXT50Vo1D0ZsAQ==", - "dev": true, - "dependencies": { - "postcss-selector-parser": "^6.0.5" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/postcss-value-parser": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true - }, - "node_modules/promise.series": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/promise.series/-/promise.series-0.2.0.tgz", - "integrity": "sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=", - "dev": true, - "engines": { - "node": ">=0.12" - } - }, - "node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "dev": true, - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "dev": true, - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" - }, - "peerDependencies": { - "react": "17.0.2" - } - }, - "node_modules/resolve": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", - "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", - "dev": true, - "dependencies": { - "is-core-module": "^2.2.0", - "path-parse": "^1.0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/rollup": { - "version": "2.51.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.51.0.tgz", - "integrity": "sha512-ITLt9sScNCBVspSHauw/W49lEZ0vjN8LyCzSNsNaqT67vTss2lYEfOyxltX8hjrhr1l/rQwmZ2wazzEqhZ/fUg==", - "dev": true, - "bin": { - "rollup": "dist/bin/rollup" - }, - "engines": { - "node": ">=10.0.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.1" - } - }, - "node_modules/rollup-plugin-postcss": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz", - "integrity": "sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==", - "dev": true, - "dependencies": { - "chalk": "^4.1.0", - "concat-with-sourcemaps": "^1.1.0", - "cssnano": "^5.0.1", - "import-cwd": "^3.0.0", - "p-queue": "^6.6.2", - "pify": "^5.0.0", - "postcss-load-config": "^3.0.0", - "postcss-modules": "^4.0.0", - "promise.series": "^0.2.0", - "resolve": "^1.19.0", - "rollup-pluginutils": "^2.8.2", - "safe-identifier": "^0.4.2", - "style-inject": "^0.3.0" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "postcss": "8.x" - } - }, - "node_modules/rollup-plugin-postcss/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/rollup-plugin-postcss/node_modules/chalk": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", - "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/rollup-plugin-postcss/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/rollup-plugin-postcss/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/rollup-plugin-postcss/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/rollup-plugin-postcss/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/rollup-pluginutils": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", - "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==", - "dev": true, - "dependencies": { - "estree-walker": "^0.6.1" - } - }, - "node_modules/rollup-pluginutils/node_modules/estree-walker": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz", - "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==", - "dev": true - }, - "node_modules/safe-identifier": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.4.2.tgz", - "integrity": "sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==", - "dev": true - }, - "node_modules/scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, - "node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/source-map-js": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz", - "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/stable": { - "version": "0.1.8", - "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz", - "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==", - "dev": true - }, - "node_modules/string-hash": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz", - "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=", - "dev": true - }, - "node_modules/style-inject": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/style-inject/-/style-inject-0.3.0.tgz", - "integrity": "sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==", - "dev": true - }, - "node_modules/stylehacks": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.3.tgz", - "integrity": "sha512-ENcUdpf4yO0E1rubu8rkxI+JGQk4CgjchynZ4bDBJDfqdy+uhTRSWb8/F3Jtu+Bw5MW45Po3/aQGeIyyxgQtxg==", - "dev": true, - "dependencies": { - "browserslist": "^4.16.6", - "postcss-selector-parser": "^6.0.4" - }, - "engines": { - "node": "^10 || ^12 || >=14.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "dependencies": { - "has-flag": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/svgo": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", - "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==", - "dev": true, - "dependencies": { - "@trysound/sax": "0.2.0", - "commander": "^7.2.0", - "css-select": "^4.1.3", - "css-tree": "^1.1.3", - "csso": "^4.2.0", - "picocolors": "^1.0.0", - "stable": "^0.1.8" - }, - "bin": { - "svgo": "bin/svgo" - }, - "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/timsort": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", - "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", - "dev": true - }, - "node_modules/tslib": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz", - "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==", - "dev": true - }, - "node_modules/typescript": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz", - "integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==", - "dev": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, - "node_modules/util-deprecate": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", - "dev": true - }, - "node_modules/yaml": { - "version": "1.10.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", - "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "dev": true, - "engines": { - "node": ">= 6" - } - } - }, "dependencies": { "@babel/code-frame": { "version": "7.10.4", @@ -2143,8 +308,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.0.2.tgz", "integrity": "sha512-KhprijuQv2sP4kT92sSQwhlK3SJTbDIsxcfIEySB0O+3m9esFOai7dP9bMx5enHAh2MwarVIcnwiWoOm01RIbQ==", - "dev": true, - "requires": {} + "dev": true }, "csso": { "version": "4.2.0", @@ -2296,8 +460,7 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "dev": true, - "requires": {} + "dev": true }, "import-cwd": { "version": "3.0.0", @@ -2574,29 +737,25 @@ "version": "5.0.3", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.3.tgz", "integrity": "sha512-6W5BemziRoqIdAKT+1QjM4bNcJAQ7z7zk073730NHg4cUXh3/rQHHj7pmYxUB9aGhuRhBiUf0pXvIHkRwhQP0Q==", - "dev": true, - "requires": {} + "dev": true }, "postcss-discard-duplicates": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.3.tgz", "integrity": "sha512-vPtm1Mf+kp7iAENTG7jI1MN1lk+fBqL5y+qxyi4v3H+lzsXEdfS3dwUZD45KVhgzDEgduur8ycB4hMegyMTeRw==", - "dev": true, - "requires": {} + "dev": true }, "postcss-discard-empty": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.3.tgz", "integrity": "sha512-xGJugpaXKakwKI7sSdZjUuN4V3zSzb2Y0LOlmTajFbNinEjTfVs9PFW2lmKBaC/E64WwYppfqLD03P8l9BuueA==", - "dev": true, - "requires": {} + "dev": true }, "postcss-discard-overridden": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.4.tgz", "integrity": "sha512-3j9QH0Qh1KkdxwiZOW82cId7zdwXVQv/gRXYDnwx5pBtR1sTkU4cXRK9lp5dSdiM0r0OICO/L8J6sV1/7m0kHg==", - "dev": true, - "requires": {} + "dev": true }, "postcss-load-config": { "version": "3.0.1", @@ -2733,8 +892,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "dev": true, - "requires": {} + "dev": true }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -2769,8 +927,7 @@ "version": "5.0.3", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.3.tgz", "integrity": "sha512-iKEplDBco9EfH7sx4ut7R2r/dwTnUqyfACf62Unc9UiyFuI7uUqZZtY+u+qp7g8Qszl/U28HIfcsI3pEABWFfA==", - "dev": true, - "requires": {} + "dev": true }, "postcss-normalize-display-values": { "version": "5.0.3", diff --git a/tsconfig.json b/tsconfig.json index f69d143..848933d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "outDir": "./dist", + "outDir": "build", "target": "es2016", "module": "esnext", "declaration": true, From 3c92de424f51522771b9a3f6f7c59dca5c4226e9 Mon Sep 17 00:00:00 2001 From: aslampangestu Date: Wed, 20 Apr 2022 08:42:55 +0700 Subject: [PATCH 04/10] remove build --- build/index.cjs.js | 108 ------------------------ build/index.cjs.js.map | 1 - build/index.esm.js | 102 ---------------------- build/index.esm.js.map | 1 - build/types/ReactSimpleImageViewer.d.ts | 16 ---- build/types/index.d.ts | 2 - 6 files changed, 230 deletions(-) delete mode 100644 build/index.cjs.js delete mode 100644 build/index.cjs.js.map delete mode 100644 build/index.esm.js delete mode 100644 build/index.esm.js.map delete mode 100644 build/types/ReactSimpleImageViewer.d.ts delete mode 100644 build/types/index.d.ts diff --git a/build/index.cjs.js b/build/index.cjs.js deleted file mode 100644 index e96a403..0000000 --- a/build/index.cjs.js +++ /dev/null @@ -1,108 +0,0 @@ -'use strict'; - -var React = require('react'); - -function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } - -var React__default = /*#__PURE__*/_interopDefaultLegacy(React); - -function styleInject(css, ref) { - if ( ref === void 0 ) ref = {}; - var insertAt = ref.insertAt; - - if (!css || typeof document === 'undefined') { return; } - - var head = document.head || document.getElementsByTagName('head')[0]; - var style = document.createElement('style'); - style.type = 'text/css'; - - if (insertAt === 'top') { - if (head.firstChild) { - head.insertBefore(style, head.firstChild); - } else { - head.appendChild(style); - } - } else { - head.appendChild(style); - } - - if (style.styleSheet) { - style.styleSheet.cssText = css; - } else { - style.appendChild(document.createTextNode(css)); - } -} - -var css_248z = ".styles-module_wrapper__1I_qj {\n z-index: 1;\n display: flex;\n align-items: center;\n position: fixed;\n padding: 0px 60px 0px 60px;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: black;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.styles-module_content__2jwZj {\n margin: auto;\n padding: 0;\n width: 90%;\n height: 100%;\n max-height: 100%;\n text-align: center;\n}\n\n.styles-module_slide__1zrfk {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.styles-module_image__2hdkJ {\n max-height: 100%;\n max-width: 100%;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n}\n\n.styles-module_close__2I1sI {\n color: white;\n position: absolute;\n top: 15px;\n right: 15px;\n font-size: 40px;\n font-weight: bold;\n opacity: 0.2;\n cursor: pointer;\n}\n\n.styles-module_close__2I1sI:hover {\n opacity: 1;\n}\n\n.styles-module_navigation__1pqAE {\n height: 80%;\n color: white;\n cursor: pointer;\n position: absolute;\n font-size: 60px;\n line-height: 60px;\n font-weight: bold;\n display: flex;\n align-items: center;\n opacity: 0.2;\n padding: 0 15px;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n}\n\n.styles-module_navigation__1pqAE:hover {\n opacity: 1;\n}\n\n@media (hover: none) {\n .styles-module_navigation__1pqAE:hover {\n opacity: 0.2;\n }\n}\n\n.styles-module_prev__KqFRp {\n left: 0;\n}\n\n.styles-module_next__1uQwZ {\n right: 0;\n}\n\n@media (max-width: 900px) {\n .styles-module_wrapper__1I_qj {\n padding: 0;\n }\n}\n\n.styles-module_counter__1MOur {\n color: white;\n background-color: #777777;\n border-radius: 4px;\n opacity: 0.5;\n}"; -var styles = {"wrapper":"styles-module_wrapper__1I_qj","content":"styles-module_content__2jwZj","slide":"styles-module_slide__1zrfk","image":"styles-module_image__2hdkJ","close":"styles-module_close__2I1sI","navigation":"styles-module_navigation__1pqAE","prev":"styles-module_prev__KqFRp","next":"styles-module_next__1uQwZ","counter":"styles-module_counter__1MOur"}; -styleInject(css_248z); - -const ReactSimpleImageViewer = (props) => { - var _a; - const [currentIndex, setCurrentIndex] = React.useState((_a = props.currentIndex) !== null && _a !== void 0 ? _a : 0); - const dataLength = React.useMemo(() => props.src.length, [props.src]); - const changeImage = React.useCallback((delta) => { - let nextIndex = (currentIndex + delta) % dataLength; - if (nextIndex < 0) - nextIndex = dataLength - 1; - setCurrentIndex(nextIndex); - }, [currentIndex]); - const handleClick = React.useCallback((event) => { - var _a; - if (!event.target || !props.closeOnClickOutside) { - return; - } - const checkId = event.target.id === "ReactSimpleImageViewer"; - const checkClass = event.target.classList.contains("react-simple-image-viewer__slide"); - if (checkId || checkClass) { - event.stopPropagation(); - (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); - } - }, [props.onClose]); - const handleKeyDown = React.useCallback((event) => { - var _a; - if (event.key === "Escape") { - (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); - } - if (["ArrowLeft", "h"].includes(event.key)) { - changeImage(-1); - } - if (["ArrowRight", "l"].includes(event.key)) { - changeImage(1); - } - }, [props.onClose, changeImage]); - const handleWheel = React.useCallback((event) => { - if (event.wheelDeltaY > 0) { - changeImage(-1); - } - else { - changeImage(1); - } - }, [changeImage]); - React.useEffect(() => { - document.addEventListener("keydown", handleKeyDown); - if (!props.disableScroll) { - document.addEventListener("wheel", handleWheel); - } - return () => { - document.removeEventListener("keydown", handleKeyDown); - if (!props.disableScroll) { - document.removeEventListener("wheel", handleWheel); - } - }; - }, [handleKeyDown, handleWheel]); - return (React__default['default'].createElement("div", { id: "ReactSimpleImageViewer", className: `${styles.wrapper} react-simple-image-viewer__modal`, onKeyDown: handleKeyDown, onClick: handleClick, style: props.backgroundStyle }, - React__default['default'].createElement("span", { className: `${styles.close} react-simple-image-viewer__close`, onClick: () => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); } }, props.closeComponent || "×"), - dataLength > 1 && (React__default['default'].createElement("span", { className: `${styles.navigation} ${styles.prev} react-simple-image-viewer__previous`, onClick: () => changeImage(-1) }, props.leftArrowComponent || "❮")), - dataLength > 1 && (React__default['default'].createElement("span", { className: `${styles.navigation} ${styles.next} react-simple-image-viewer__next`, onClick: () => changeImage(1) }, props.rightArrowComponent || "❯")), - React__default['default'].createElement("div", { className: `${styles.content} react-simple-image-viewer__modal-content`, onClick: handleClick }, - React__default['default'].createElement("div", { className: `${styles.slide} react-simple-image-viewer__slide` }, - React__default['default'].createElement("img", { className: styles.image, src: props.src[currentIndex], alt: "" }))), - props.showCounter && (React__default['default'].createElement("div", { className: `react-simple-image-viewer__counter` }, props.counterComponent || React__default['default'].createElement("div", { className: styles.counter }, - currentIndex, - " / ", - dataLength))))); -}; - -module.exports = ReactSimpleImageViewer; -//# sourceMappingURL=index.cjs.js.map diff --git a/build/index.cjs.js.map b/build/index.cjs.js.map deleted file mode 100644 index 8157791..0000000 --- a/build/index.cjs.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.cjs.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/ReactSimpleImageViewer.tsx"],"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","import React, {\n CSSProperties,\n useCallback,\n useEffect,\n useState,\n useMemo,\n} from \"react\";\nimport styles from \"./styles.module.css\";\n\ninterface IProps {\n src: string[];\n currentIndex?: number;\n backgroundStyle?: CSSProperties;\n disableScroll?: boolean;\n closeOnClickOutside?: boolean;\n onClose?: () => void;\n closeComponent?: JSX.Element;\n leftArrowComponent?: JSX.Element;\n rightArrowComponent?: JSX.Element;\n showCounter?: boolean;\n counterComponent?: JSX.Element;\n}\n\nconst ReactSimpleImageViewer = (props: IProps) => {\n const [currentIndex, setCurrentIndex] = useState(props.currentIndex ?? 0);\n\n const dataLength = useMemo(() => props.src.length, [props.src]);\n\n const changeImage = useCallback(\n (delta: number) => {\n let nextIndex = (currentIndex + delta) % dataLength;\n if (nextIndex < 0) nextIndex = dataLength - 1;\n setCurrentIndex(nextIndex);\n },\n [currentIndex]\n );\n\n const handleClick = useCallback(\n (event: any) => {\n if (!event.target || !props.closeOnClickOutside) {\n return;\n }\n\n const checkId = event.target.id === \"ReactSimpleImageViewer\";\n const checkClass = event.target.classList.contains(\n \"react-simple-image-viewer__slide\"\n );\n\n if (checkId || checkClass) {\n event.stopPropagation();\n props.onClose?.();\n }\n },\n [props.onClose]\n );\n\n const handleKeyDown = useCallback(\n (event: any) => {\n if (event.key === \"Escape\") {\n props.onClose?.();\n }\n\n if ([\"ArrowLeft\", \"h\"].includes(event.key)) {\n changeImage(-1);\n }\n\n if ([\"ArrowRight\", \"l\"].includes(event.key)) {\n changeImage(1);\n }\n },\n [props.onClose, changeImage]\n );\n\n const handleWheel = useCallback(\n (event: any) => {\n if (event.wheelDeltaY > 0) {\n changeImage(-1);\n } else {\n changeImage(1);\n }\n },\n [changeImage]\n );\n\n useEffect(() => {\n document.addEventListener(\"keydown\", handleKeyDown);\n\n if (!props.disableScroll) {\n document.addEventListener(\"wheel\", handleWheel);\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n\n if (!props.disableScroll) {\n document.removeEventListener(\"wheel\", handleWheel);\n }\n };\n }, [handleKeyDown, handleWheel]);\n\n return (\n \n props.onClose?.()}\n >\n {props.closeComponent || \"×\"}\n \n\n {dataLength > 1 && (\n changeImage(-1)}\n >\n {props.leftArrowComponent || \"❮\"}\n \n )}\n\n {dataLength > 1 && (\n changeImage(1)}\n >\n {props.rightArrowComponent || \"❯\"}\n \n )}\n\n \n
\n \"\"\n
\n \n\n {props.showCounter && (\n \n {props.counterComponent ||
{currentIndex} / {dataLength}
}\n \n )}\n \n );\n};\n\nexport default ReactSimpleImageViewer;\n"],"names":["useState","useMemo","useCallback","useEffect","React"],"mappings":"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"} \ No newline at end of file diff --git a/build/index.esm.js b/build/index.esm.js deleted file mode 100644 index 37f42f7..0000000 --- a/build/index.esm.js +++ /dev/null @@ -1,102 +0,0 @@ -import React, { useState, useMemo, useCallback, useEffect } from 'react'; - -function styleInject(css, ref) { - if ( ref === void 0 ) ref = {}; - var insertAt = ref.insertAt; - - if (!css || typeof document === 'undefined') { return; } - - var head = document.head || document.getElementsByTagName('head')[0]; - var style = document.createElement('style'); - style.type = 'text/css'; - - if (insertAt === 'top') { - if (head.firstChild) { - head.insertBefore(style, head.firstChild); - } else { - head.appendChild(style); - } - } else { - head.appendChild(style); - } - - if (style.styleSheet) { - style.styleSheet.cssText = css; - } else { - style.appendChild(document.createTextNode(css)); - } -} - -var css_248z = ".styles-module_wrapper__1I_qj {\n z-index: 1;\n display: flex;\n align-items: center;\n position: fixed;\n padding: 0px 60px 0px 60px;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: black;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.styles-module_content__2jwZj {\n margin: auto;\n padding: 0;\n width: 90%;\n height: 100%;\n max-height: 100%;\n text-align: center;\n}\n\n.styles-module_slide__1zrfk {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.styles-module_image__2hdkJ {\n max-height: 100%;\n max-width: 100%;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n}\n\n.styles-module_close__2I1sI {\n color: white;\n position: absolute;\n top: 15px;\n right: 15px;\n font-size: 40px;\n font-weight: bold;\n opacity: 0.2;\n cursor: pointer;\n}\n\n.styles-module_close__2I1sI:hover {\n opacity: 1;\n}\n\n.styles-module_navigation__1pqAE {\n height: 80%;\n color: white;\n cursor: pointer;\n position: absolute;\n font-size: 60px;\n line-height: 60px;\n font-weight: bold;\n display: flex;\n align-items: center;\n opacity: 0.2;\n padding: 0 15px;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n}\n\n.styles-module_navigation__1pqAE:hover {\n opacity: 1;\n}\n\n@media (hover: none) {\n .styles-module_navigation__1pqAE:hover {\n opacity: 0.2;\n }\n}\n\n.styles-module_prev__KqFRp {\n left: 0;\n}\n\n.styles-module_next__1uQwZ {\n right: 0;\n}\n\n@media (max-width: 900px) {\n .styles-module_wrapper__1I_qj {\n padding: 0;\n }\n}\n\n.styles-module_counter__1MOur {\n color: white;\n background-color: #777777;\n border-radius: 4px;\n opacity: 0.5;\n}"; -var styles = {"wrapper":"styles-module_wrapper__1I_qj","content":"styles-module_content__2jwZj","slide":"styles-module_slide__1zrfk","image":"styles-module_image__2hdkJ","close":"styles-module_close__2I1sI","navigation":"styles-module_navigation__1pqAE","prev":"styles-module_prev__KqFRp","next":"styles-module_next__1uQwZ","counter":"styles-module_counter__1MOur"}; -styleInject(css_248z); - -const ReactSimpleImageViewer = (props) => { - var _a; - const [currentIndex, setCurrentIndex] = useState((_a = props.currentIndex) !== null && _a !== void 0 ? _a : 0); - const dataLength = useMemo(() => props.src.length, [props.src]); - const changeImage = useCallback((delta) => { - let nextIndex = (currentIndex + delta) % dataLength; - if (nextIndex < 0) - nextIndex = dataLength - 1; - setCurrentIndex(nextIndex); - }, [currentIndex]); - const handleClick = useCallback((event) => { - var _a; - if (!event.target || !props.closeOnClickOutside) { - return; - } - const checkId = event.target.id === "ReactSimpleImageViewer"; - const checkClass = event.target.classList.contains("react-simple-image-viewer__slide"); - if (checkId || checkClass) { - event.stopPropagation(); - (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); - } - }, [props.onClose]); - const handleKeyDown = useCallback((event) => { - var _a; - if (event.key === "Escape") { - (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); - } - if (["ArrowLeft", "h"].includes(event.key)) { - changeImage(-1); - } - if (["ArrowRight", "l"].includes(event.key)) { - changeImage(1); - } - }, [props.onClose, changeImage]); - const handleWheel = useCallback((event) => { - if (event.wheelDeltaY > 0) { - changeImage(-1); - } - else { - changeImage(1); - } - }, [changeImage]); - useEffect(() => { - document.addEventListener("keydown", handleKeyDown); - if (!props.disableScroll) { - document.addEventListener("wheel", handleWheel); - } - return () => { - document.removeEventListener("keydown", handleKeyDown); - if (!props.disableScroll) { - document.removeEventListener("wheel", handleWheel); - } - }; - }, [handleKeyDown, handleWheel]); - return (React.createElement("div", { id: "ReactSimpleImageViewer", className: `${styles.wrapper} react-simple-image-viewer__modal`, onKeyDown: handleKeyDown, onClick: handleClick, style: props.backgroundStyle }, - React.createElement("span", { className: `${styles.close} react-simple-image-viewer__close`, onClick: () => { var _a; return (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props); } }, props.closeComponent || "×"), - dataLength > 1 && (React.createElement("span", { className: `${styles.navigation} ${styles.prev} react-simple-image-viewer__previous`, onClick: () => changeImage(-1) }, props.leftArrowComponent || "❮")), - dataLength > 1 && (React.createElement("span", { className: `${styles.navigation} ${styles.next} react-simple-image-viewer__next`, onClick: () => changeImage(1) }, props.rightArrowComponent || "❯")), - React.createElement("div", { className: `${styles.content} react-simple-image-viewer__modal-content`, onClick: handleClick }, - React.createElement("div", { className: `${styles.slide} react-simple-image-viewer__slide` }, - React.createElement("img", { className: styles.image, src: props.src[currentIndex], alt: "" }))), - props.showCounter && (React.createElement("div", { className: `react-simple-image-viewer__counter` }, props.counterComponent || React.createElement("div", { className: styles.counter }, - currentIndex, - " / ", - dataLength))))); -}; - -export default ReactSimpleImageViewer; -//# sourceMappingURL=index.esm.js.map diff --git a/build/index.esm.js.map b/build/index.esm.js.map deleted file mode 100644 index 334985f..0000000 --- a/build/index.esm.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/ReactSimpleImageViewer.tsx"],"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","import React, {\n CSSProperties,\n useCallback,\n useEffect,\n useState,\n useMemo,\n} from \"react\";\nimport styles from \"./styles.module.css\";\n\ninterface IProps {\n src: string[];\n currentIndex?: number;\n backgroundStyle?: CSSProperties;\n disableScroll?: boolean;\n closeOnClickOutside?: boolean;\n onClose?: () => void;\n closeComponent?: JSX.Element;\n leftArrowComponent?: JSX.Element;\n rightArrowComponent?: JSX.Element;\n showCounter?: boolean;\n counterComponent?: JSX.Element;\n}\n\nconst ReactSimpleImageViewer = (props: IProps) => {\n const [currentIndex, setCurrentIndex] = useState(props.currentIndex ?? 0);\n\n const dataLength = useMemo(() => props.src.length, [props.src]);\n\n const changeImage = useCallback(\n (delta: number) => {\n let nextIndex = (currentIndex + delta) % dataLength;\n if (nextIndex < 0) nextIndex = dataLength - 1;\n setCurrentIndex(nextIndex);\n },\n [currentIndex]\n );\n\n const handleClick = useCallback(\n (event: any) => {\n if (!event.target || !props.closeOnClickOutside) {\n return;\n }\n\n const checkId = event.target.id === \"ReactSimpleImageViewer\";\n const checkClass = event.target.classList.contains(\n \"react-simple-image-viewer__slide\"\n );\n\n if (checkId || checkClass) {\n event.stopPropagation();\n props.onClose?.();\n }\n },\n [props.onClose]\n );\n\n const handleKeyDown = useCallback(\n (event: any) => {\n if (event.key === \"Escape\") {\n props.onClose?.();\n }\n\n if ([\"ArrowLeft\", \"h\"].includes(event.key)) {\n changeImage(-1);\n }\n\n if ([\"ArrowRight\", \"l\"].includes(event.key)) {\n changeImage(1);\n }\n },\n [props.onClose, changeImage]\n );\n\n const handleWheel = useCallback(\n (event: any) => {\n if (event.wheelDeltaY > 0) {\n changeImage(-1);\n } else {\n changeImage(1);\n }\n },\n [changeImage]\n );\n\n useEffect(() => {\n document.addEventListener(\"keydown\", handleKeyDown);\n\n if (!props.disableScroll) {\n document.addEventListener(\"wheel\", handleWheel);\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n\n if (!props.disableScroll) {\n document.removeEventListener(\"wheel\", handleWheel);\n }\n };\n }, [handleKeyDown, handleWheel]);\n\n return (\n \n props.onClose?.()}\n >\n {props.closeComponent || \"×\"}\n \n\n {dataLength > 1 && (\n changeImage(-1)}\n >\n {props.leftArrowComponent || \"❮\"}\n \n )}\n\n {dataLength > 1 && (\n changeImage(1)}\n >\n {props.rightArrowComponent || \"❯\"}\n \n )}\n\n \n
\n \"\"\n
\n \n\n {props.showCounter && (\n \n {props.counterComponent ||
{currentIndex} / {dataLength}
}\n \n )}\n \n );\n};\n\nexport default ReactSimpleImageViewer;\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/build/types/ReactSimpleImageViewer.d.ts b/build/types/ReactSimpleImageViewer.d.ts deleted file mode 100644 index 24998cb..0000000 --- a/build/types/ReactSimpleImageViewer.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { CSSProperties } from "react"; -interface IProps { - src: string[]; - currentIndex?: number; - backgroundStyle?: CSSProperties; - disableScroll?: boolean; - closeOnClickOutside?: boolean; - onClose?: () => void; - closeComponent?: JSX.Element; - leftArrowComponent?: JSX.Element; - rightArrowComponent?: JSX.Element; - showCounter?: boolean; - counterComponent?: JSX.Element; -} -declare const ReactSimpleImageViewer: (props: IProps) => JSX.Element; -export default ReactSimpleImageViewer; diff --git a/build/types/index.d.ts b/build/types/index.d.ts deleted file mode 100644 index 3f88866..0000000 --- a/build/types/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -import ReactSimpleImageViewer from "./ReactSimpleImageViewer"; -export default ReactSimpleImageViewer; From a769f457572ed316173fc1d82e98d35f6956e604 Mon Sep 17 00:00:00 2001 From: aslampangestu Date: Wed, 20 Apr 2022 08:53:48 +0700 Subject: [PATCH 05/10] update position --- src/styles.module.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/styles.module.css b/src/styles.module.css index ff1e93b..36cfda2 100644 --- a/src/styles.module.css +++ b/src/styles.module.css @@ -1,8 +1,8 @@ .wrapper { - z-index: 1; + z-index: 10; display: flex; align-items: center; - position: fixed; + position: absolute; padding: 0px 60px 0px 60px; left: 0; top: 0; @@ -94,6 +94,10 @@ } .counter { + position: absolute; + margin:0 auto; + bottom: 15px; + font-size: 40px; color: white; background-color: #777777; border-radius: 4px; From 9a1336e9ce00946f2473a089045bc760042654a8 Mon Sep 17 00:00:00 2001 From: aslampangestu Date: Wed, 20 Apr 2022 09:11:52 +0700 Subject: [PATCH 06/10] update container --- src/ReactSimpleImageViewer.tsx | 12 ++++++++---- src/styles.module.css | 13 ++++++++----- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/ReactSimpleImageViewer.tsx b/src/ReactSimpleImageViewer.tsx index 33560d6..4fd6f62 100644 --- a/src/ReactSimpleImageViewer.tsx +++ b/src/ReactSimpleImageViewer.tsx @@ -141,10 +141,14 @@ const ReactSimpleImageViewer = (props: IProps) => { {props.showCounter && ( -
- {props.counterComponent ||
{currentIndex} / {dataLength}
} +
+ {props.counterComponent || ( +
+ + {currentIndex} / {dataLength} + +
+ )}
)}
diff --git a/src/styles.module.css b/src/styles.module.css index 36cfda2..d9a2365 100644 --- a/src/styles.module.css +++ b/src/styles.module.css @@ -10,7 +10,6 @@ height: 100%; background-color: black; box-sizing: border-box; - overflow: hidden; } .content { @@ -93,13 +92,17 @@ } } -.counter { +.counterContainer { position: absolute; - margin:0 auto; bottom: 15px; - font-size: 40px; + left: 50%; + transform: translate(-50%, -50%); +} + +.counter { + font-size: 16px; color: white; background-color: #777777; border-radius: 4px; opacity: 0.5; -} \ No newline at end of file +} From d18fd14fa6012beb6792a64a34875025bf31713b Mon Sep 17 00:00:00 2001 From: aslampangestu Date: Wed, 20 Apr 2022 09:13:49 +0700 Subject: [PATCH 07/10] remove scrolling --- src/ReactSimpleImageViewer.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ReactSimpleImageViewer.tsx b/src/ReactSimpleImageViewer.tsx index 4fd6f62..066599e 100644 --- a/src/ReactSimpleImageViewer.tsx +++ b/src/ReactSimpleImageViewer.tsx @@ -84,6 +84,7 @@ const ReactSimpleImageViewer = (props: IProps) => { useEffect(() => { document.addEventListener("keydown", handleKeyDown); + document.body.style.overflow = 'hidden'; if (!props.disableScroll) { document.addEventListener("wheel", handleWheel); @@ -91,6 +92,7 @@ const ReactSimpleImageViewer = (props: IProps) => { return () => { document.removeEventListener("keydown", handleKeyDown); + document.body.style.overflow = ''; if (!props.disableScroll) { document.removeEventListener("wheel", handleWheel); From 7db9371430bd215935d50deca928f1e3c36e1f4a Mon Sep 17 00:00:00 2001 From: aslampangestu Date: Wed, 20 Apr 2022 09:20:01 +0700 Subject: [PATCH 08/10] add padding --- src/styles.module.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles.module.css b/src/styles.module.css index d9a2365..8528ad1 100644 --- a/src/styles.module.css +++ b/src/styles.module.css @@ -2,7 +2,7 @@ z-index: 10; display: flex; align-items: center; - position: absolute; + position: fixed; padding: 0px 60px 0px 60px; left: 0; top: 0; @@ -105,4 +105,5 @@ background-color: #777777; border-radius: 4px; opacity: 0.5; + padding: 2px 4px; } From 2fc401fa20e018ceb960e6acd989a7a9944858be Mon Sep 17 00:00:00 2001 From: aslampangestu Date: Wed, 20 Apr 2022 09:29:21 +0700 Subject: [PATCH 09/10] fix counter from 1 --- src/ReactSimpleImageViewer.tsx | 2 +- src/styles.module.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ReactSimpleImageViewer.tsx b/src/ReactSimpleImageViewer.tsx index 066599e..3ad6544 100644 --- a/src/ReactSimpleImageViewer.tsx +++ b/src/ReactSimpleImageViewer.tsx @@ -147,7 +147,7 @@ const ReactSimpleImageViewer = (props: IProps) => { {props.counterComponent || (
- {currentIndex} / {dataLength} + {currentIndex + 1} / {dataLength}
)} diff --git a/src/styles.module.css b/src/styles.module.css index 8528ad1..a806d8d 100644 --- a/src/styles.module.css +++ b/src/styles.module.css @@ -105,5 +105,5 @@ background-color: #777777; border-radius: 4px; opacity: 0.5; - padding: 2px 4px; + padding: 4px 8px; } From 17bb0b0c8f473156b4fc68f297d0b18d36c5f98c Mon Sep 17 00:00:00 2001 From: aslampangestu Date: Wed, 20 Apr 2022 16:18:42 +0700 Subject: [PATCH 10/10] fix colide close button --- src/styles.module.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/styles.module.css b/src/styles.module.css index a806d8d..3c734ba 100644 --- a/src/styles.module.css +++ b/src/styles.module.css @@ -39,9 +39,8 @@ .close { color: white; position: absolute; - top: 15px; + top: 10px; right: 15px; - font-size: 40px; font-weight: bold; opacity: 0.2; cursor: pointer;