react-gldn-kit 0.1.31 → 0.1.33

package/dist/lib/components/Scratch/index.js

@@ -55,11 +55,12 @@ var types_1 = require("./types");
 var styles = __importStar(require("./Scratch.module.css"));
 // TODO: rewrite this code
 var Scratch = function (props) {
-    var backgroundPath = props.backgroundPath, backgroundScratchDone = props.backgroundScratchDone, scratchPath = props.scratchPath, slotNamePath = props.slotNamePath, audioFirstPath = props.audioFirstPath, audioSecondPath = props.audioSecondPath, textOne = props.textOne, textTwo = props.textTwo, callback = props.callback;
-    var _a = (0, react_1.useState)([]), scratchedBoxes = _a[0], setScratchedBoxes = _a[1];
-    var _b = (0, react_1.useState)({}), scratchedBoxesOpacity = _b[0], setScratchedBoxesOpacity = _b[1];
+    var backgroundPath = props.backgroundPath, backgroundScratchDone = props.backgroundScratchDone, scratchPath = props.scratchPath, slotNamePath = props.slotNamePath, audioFirstPath = props.audioFirstPath, audioSecondPath = props.audioSecondPath, textOne = props.textOne, textTwo = props.textTwo, callback = props.callback, _a = props.boxesAmount, boxesAmount = _a === void 0 ? 9 : _a;
+    var _b = (0, react_1.useState)([]), scratchedBoxes = _b[0], setScratchedBoxes = _b[1];
+    var _c = (0, react_1.useState)({}), scratchedBoxesOpacity = _c[0], setScratchedBoxesOpacity = _c[1];
     var audio1 = new Audio(audioFirstPath);
     var audio2 = new Audio(audioSecondPath);
+    var BOXES = new Array(boxesAmount).fill(0).map(function (_, idx) { return idx; });
     var handleScratch = function (idx) { return function () {
         var _a, _b;
         if (scratchedBoxes.includes(idx)) {
@@ -97,12 +98,12 @@ var Scratch = function (props) {
             }
         };
     }, [scratchedBoxes]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: styles.scratch, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.scratch, 'KIT_Scratch_scratch'), style: {
             background: backgroundPath,
             backgroundSize: '100% 100%',
             backgroundPosition: 'center',
             backgroundRepeat: 'no-repeat',
-        } }, { children: [types_1.BOXES.map(function (value) {
+        } }, { children: [BOXES.map(function (value) {
                 var _a;
                 return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.box, (_a = {},
                         _a[styles.scratched] = scratchedBoxes.includes(value),
@@ -113,7 +114,7 @@ var Scratch = function (props) {
                         backgroundRepeat: 'no-repeat',
                     }, onClick: handleScratch(value) }, { children: [(0, jsx_runtime_1.jsx)("img", { className: styles.image, src: scratchedBoxes.includes(value) ? scratchPath[0] : scratchPath[1], style: {
                                 opacity: scratchedBoxesOpacity[value],
-                            }, alt: "" }), scratchedBoxes.includes(value) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: styles.scratchText }, { children: scratchedBoxes[0] === value ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { idT: textOne })) : ((0, jsx_runtime_1.jsx)(Text_1.Text, { idT: textTwo })) })))] }), value));
-            }), (0, jsx_runtime_1.jsx)("img", { src: slotNamePath, className: styles.slotName })] })));
+                            }, alt: "" }), scratchedBoxes.includes(value) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.scratchText, 'KIT_Scratch_box_scratchText') }, { children: scratchedBoxes[0] === value ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { idT: textOne })) : ((0, jsx_runtime_1.jsx)(Text_1.Text, { idT: textTwo })) })))] }), value));
+            }), (0, jsx_runtime_1.jsx)("img", { src: slotNamePath, className: (0, classnames_1.default)(styles.slotName, 'KIT_Scratch_slotName') })] })));
 };
 exports.Scratch = Scratch;

package/dist/lib/components/Scratch/types.d.ts

@@ -8,7 +8,7 @@ export type ScratchProps = {
     audioSecondPath: string;
     textOne: string;
     textTwo: string;
+    boxesAmount?: number;
 };
-export declare const BOXES: number[];
 export declare const OPEN_BOX_COUNT = 2;
 export declare const TIMER = 1000;

package/dist/lib/components/Scratch/types.js

@@ -1,8 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TIMER = exports.OPEN_BOX_COUNT = exports.BOXES = void 0;
-var BOXES_AMOUNT = 9; // TODO remove it
-// Need to pass content with flexible data
-exports.BOXES = new Array(BOXES_AMOUNT).fill(0).map(function (_, idx) { return idx; });
+exports.TIMER = exports.OPEN_BOX_COUNT = void 0;
 exports.OPEN_BOX_COUNT = 2; // TODO: we can open only two boxes
 exports.TIMER = 1000; // REMOVE IT _ BAD CODE FLOW

package/dist/lib/components/ui/Inputs/CheckBox/index.js

@@ -44,9 +44,11 @@ var Text_1 = require("components/Text");
 var styles = __importStar(require("./CheckBox.module.css"));
 var CheckBox = function (props) {
     var value = props.value, onChange = props.onChange, text = props.text, classes = props.classes, handleText = props.handleText, classesText = props.classesText;
-    var handleToggle = function () {
+    var handleToggle = function (e) {
+        e.stopPropagation();
+        e.preventDefault();
         onChange(!value);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.checkboxWrapper, classes) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.checkboxWrapperBig, onClick: handleToggle }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: styles.switch }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value, readOnly: true }), (0, jsx_runtime_1.jsx)("div", { className: styles.slider })] })) })), text && ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.checkboxText, classesText), onClick: handleText }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: text }) })))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(styles.checkboxWrapper, classes) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: styles.checkboxWrapperBig }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: styles.switch }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value, onChange: handleToggle }), (0, jsx_runtime_1.jsx)("div", { className: styles.slider })] })) })), text && ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)(styles.checkboxText, classesText), onClick: handleText }, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { idT: text }) })))] })));
 };
 exports.CheckBox = CheckBox;

package/dist/main.css

@@ -3393,16 +3393,13 @@
 .KIT__Scratch-module__scratch___n0TBg {
   width: 100%;
   height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
 
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: var(--indent-m);
+  gap: var(--indent-m);
   padding: var(--indent-l);
-  z-index: 1;
+  position: relative;
 }
 
 .KIT__Scratch-module__scratchText___jISwD {
@@ -3424,8 +3421,6 @@
 }
 
 .KIT__Scratch-module__box___NjFhi {
-  width: 32%;
-  height: 32%;
   position: relative;
   cursor: pointer;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-gldn-kit",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "description": "",
   "main": "./dist/index.js",
   "keywords": [],