oolib 2.119.0 → 2.119.2

package/dist/components/PercentBarChart/index.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-export declare const PercentBarChart: ({ data: _data, title, valuePath, display, onClick, colors }: {
+export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors }: {
     data: any;
     valuePath: string;
+    labelPath: string;
     title?: string;
-    display: string;
     onClick?: (name: string) => void;
     colors?: string[];
 }) => React.JSX.Element;

package/dist/components/PercentBarChart/index.js

@@ -78,15 +78,15 @@ var _dataSample = [
     { name: "AA+", value: 5.63, Type: 3 },
 ];
 var PercentBarChart = function (_a) {
-    var _b = _a.data, _data = _b === void 0 ? _dataSample : _b, title = _a.title, _c = _a.valuePath, valuePath = _c === void 0 ? "value" : _c, _d = _a.display, display = _d === void 0 ? "name" : _d, onClick = _a.onClick, _e = _a.colors, colors = _e === void 0 ? chartColors : _e;
+    var _b = _a.data, _data = _b === void 0 ? _dataSample : _b, title = _a.title, _c = _a.valuePath, valuePath = _c === void 0 ? "value" : _c, _d = _a.labelPath, labelPath = _d === void 0 ? "name" : _d, onClick = _a.onClick, _e = _a.colors, colors = _e === void 0 ? chartColors : _e;
     var data = (0, react_1.useMemo)(function () {
         var finalData = __spreadArray([], _data, true);
-        finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: d[valuePath], name: d[display], color: (colors)[i % (colors).length] })); });
+        finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: d[valuePath], name: d[labelPath], color: (colors)[i % (colors).length] })); });
         finalData.sort(function (a, b) {
             return Number(b.value || 0) - Number(a.value || 0);
         });
         return finalData;
-    }, [_data, display, valuePath]);
+    }, [_data, labelPath, valuePath]);
     var _f = (0, react_1.useState)(undefined), activeBar = _f[0], setActiveBar = _f[1];
     var changeBarOpacityFn = function (name) {
         return activeBar && activeBar !== name ? 0.4 : 1;
@@ -102,16 +102,16 @@ var PercentBarChart = function (_a) {
                         bottom: 0,
                     } },
                     react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
-                    react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: display }),
-                    react_1.default.createElement(recharts_1.Bar, { style: { cursor: "pointer" }, dataKey: "value", unit: "%", onMouseOver: function (args) { return setActiveBar(args[display]); }, onMouseOut: function () { return setActiveBar(undefined); }, onMouseDown: function (args) {
-                            setActiveBar(args[display]);
-                            onClick(args[display]);
+                    react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: labelPath }),
+                    react_1.default.createElement(recharts_1.Bar, { style: { cursor: "pointer" }, dataKey: "value", unit: "%", onMouseOver: function (args) { return setActiveBar(args[labelPath]); }, onMouseOut: function () { return setActiveBar(undefined); }, onMouseDown: function (args) {
+                            setActiveBar(args[labelPath]);
+                            onClick(args[labelPath]);
                         } },
-                        react_1.default.createElement(recharts_1.LabelList, { dataKey: display, position: "top", content: function (props) {
+                        react_1.default.createElement(recharts_1.LabelList, { dataKey: labelPath, position: "top", content: function (props) {
                                 return renderCustomizedLabel({
                                     y: props.y,
                                     value: props.value,
-                                    opacity: changeBarOpacityFn(props[display]),
+                                    opacity: changeBarOpacityFn(props[labelPath]),
                                 });
                             } }),
                         react_1.default.createElement(recharts_1.LabelList, { dataKey: "value", offset: 0, content: function (props) {
@@ -121,9 +121,9 @@ var PercentBarChart = function (_a) {
                                     height: props.height,
                                     value: props.value,
                                     suffix: "%",
-                                    opacity: changeBarOpacityFn(props[display]),
+                                    opacity: changeBarOpacityFn(props[labelPath]),
                                 });
                             } }),
-                        data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(entry[display]), key: "cell-".concat(index), height: 30, fill: entry.color })); })))))));
+                        data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(entry[labelPath]), key: "cell-".concat(index), height: 30, fill: entry.color })); })))))));
 };
 exports.PercentBarChart = PercentBarChart;

package/dist/components/RadioAndCheckbox/comps/CheckboxList/comps/CheckboxInput/index.js

@@ -25,10 +25,11 @@ var CheckboxInput = function (_a) {
         return (react_1.default.createElement(CheckboxButton_1.CheckboxButton, { isSelected: isSelected, disabled: disabled, invert: invert, S: S, className: 'btn',
             disabled: options.disabled || disabled }));
     };
-    var genCheckSquare = function () { return (react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: invert ? invertGreen : green, style: {
-            margin: '-7px -2.8px -7px -3.2px',
-            flexShrink: 0
-        } })); };
+    var genCheckSquare = function () { return (react_1.default.createElement("div", { style: { flexShrink: 0 } },
+        react_1.default.createElement(CheckSquare, { size: S ? 22.5 : 26, color: invert ? invertGreen : green, style: {
+                margin: '-7px -2.8px -7px -3.2px',
+                flexShrink: 0
+            } }))); };
     var genXSquare = function () { return (react_1.default.createElement(XSquare, { size: S ? 21.5 : 26, color: invert ? invertRed : red, style: {
             margin: '-7px -2.8px -7px -3.2px',
             flexShrink: 0
@@ -36,14 +37,14 @@ var CheckboxInput = function (_a) {
     return option.loading
         ? react_1.default.createElement(TextLoader_1.TextLoader, { style: { width: "8rem", height: "1.5rem" } })
         : inputStyle === 'tagSelect' ? (react_1.default.createElement(Tags_1.TagSelect, { isSelected: isSelected, invert: invert, disabled: disabled, onClick: function () { return !disabled && onClick(isSelected, option); }, display: option.display, value: option.value, style: { alignSelf: 'flex-start' } })) : (react_1.default.createElement(styled_1.StyledOption, { rightWrongResult: rightWrongResult, isSelected: isSelected, disabled: disabled, invert: invert, S: S, onClick: function () { return !rightWrongResult && !disabled && onClick && onClick(isSelected, option); } },
-            rightWrongResult
+            react_1.default.createElement("div", { style: { flexShrink: 0 } }, rightWrongResult
                 ? ["markCorrect", "revealCorrect"].includes(markingCommand)
                     ? genCheckSquare()
                     : markingCommand === 'markWrong'
                         ? genXSquare()
                         : genCheckboxButton({ disabled: true }) //else rightWrongResult has come in, but this doesnt have to be marked right or wrong
                 : genCheckboxButton() // rightWrongResult has not come in. so gen normal radio button
-        ,
+            ),
             react_1.default.createElement(SuitableTypo, { bold: rightWrongResult && isSelected, color: disabled && greyColor40, invert: invert }, option.display)));
 };
 exports.CheckboxInput = CheckboxInput;

package/dist/stories/PercentBarChart.stories.js

@@ -20,6 +20,6 @@ var PercentBarChart_ = function (args) {
         console.log("Bar clicked: ".concat(name));
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, display: "name", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
+        react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, labelPath: "name", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
 };
 exports.PercentBarChart_ = PercentBarChart_;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.119.0",
+  "version": "2.119.2",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",