oolib 2.129.2 → 2.129.4

package/dist/components/PercentBarChart/index.js

@@ -130,22 +130,22 @@ 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: labelPath }),
+                    react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: 'name' }),
                     react_1.default.createElement(recharts_1.Bar, __assign({ radius: [2, 4, 4, 2], style: onClick ? { cursor: "pointer" } : {}, dataKey: "percentage" }, (onClick
                         ? {
-                            onMouseOver: function (args) { return setActiveBar(args[labelPath]); },
+                            onMouseOver: function (args) { return setActiveBar(args['name']); },
                             onMouseOut: function () { return setActiveBar(undefined); },
                             onMouseDown: function (args) {
-                                setActiveBar(args[labelPath]);
-                                onClick(args[labelPath]);
+                                setActiveBar(args['name']);
+                                onClick(args['name']);
                             },
                         }
                         : {})),
-                        react_1.default.createElement(recharts_1.LabelList, { dataKey: labelPath, position: "top", content: function (props) {
+                        react_1.default.createElement(recharts_1.LabelList, { dataKey: 'name', position: "top", content: function (props) {
                                 return renderCustomizedLabel({
                                     y: props.y,
                                     value: props.value,
-                                    opacity: changeBarOpacityFn(props[labelPath]),
+                                    opacity: changeBarOpacityFn(props['name']),
                                 });
                             } }),
                         react_1.default.createElement(recharts_1.LabelList, { dataKey: "percentage_count", offset: 0, content: function (props) {
@@ -157,9 +157,9 @@ var PercentBarChart = function (_a) {
                                     value: props.value, //here value is the percentage
                                     showCount: showCount,
                                     suffix: valueSuffix,
-                                    opacity: changeBarOpacityFn(props[labelPath]),
+                                    opacity: changeBarOpacityFn(props['name']),
                                 });
                             } }),
-                        data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(entry[labelPath]), key: "cell-".concat(index), height: configs.barHeight, fill: entry.color })); })))))));
+                        data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(entry['name']), key: "cell-".concat(index), height: configs.barHeight, fill: entry.color })); })))))));
 };
 exports.PercentBarChart = PercentBarChart;

package/dist/components/TextInputs/index.js

@@ -92,6 +92,7 @@ var _EXPORTS_1 = require("../../utils/_EXPORTS");
 var LoadersAndProgress_1 = require("../LoadersAndProgress");
 var OKELink_1 = require("../OKELink");
 var utilsOolib_1 = require("../../utilsOolib");
+var styled_components_1 = require("styled-components");
 var DisplayIcon = function (_a) {
     var icon = _a.icon, onClick = _a.onClick, size = _a.size;
     var IconComp = icons_1.icons[icon];
@@ -102,7 +103,8 @@ var TextInput = function (props) {
     actionBtn = props.actionBtn, clearBtn = props.clearBtn, className = props.className, maxLength = props.maxLength, DEPRECATED_maxNumLimiter = props.maxNumLimiter, forceFocus = props.forceFocus, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
     _d = props.validateOnlyOnBlur, //sometimes, when some other elem is clicked, we wanna trigger focus on the textinput. eg. when on mobile, the search icon is clicked on the listingpage
     validateOnlyOnBlur = _d === void 0 ? false : _d, //for example, in the login form we want validation to only run, once the text input is blurred. else it can be irritating
-    _validationStatus = props.validationStatus, _e = props.displayValidationMsg, displayValidationMsg = _e === void 0 ? true : _e;
+    _validationStatus = props.validationStatus, _e = props.displayValidationMsg, displayValidationMsg = _e === void 0 ? true : _e, content = props.content, passValidationErrorToFormValidation = props.passValidationErrorToFormValidation;
+    var theme = (0, styled_components_1.useTheme)();
     var _f = (0, react_1.useState)(_validationStatus), validationStatus = _f[0], setValidationStatus = _f[1];
     (0, react_1.useEffect)(function () {
         setValidationStatus(_validationStatus);
@@ -112,9 +114,10 @@ var TextInput = function (props) {
     var actionBtnEnabaled = !!value && (type !== "url" ? true : (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success");
     var clearBtnEnabled = !!value && (type !== "url" ? true : (validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type) === "success");
     var handleValidate = function (e, onBlur) { return __awaiter(void 0, void 0, void 0, function () {
-        var value, res;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var value, res, validationPlugin, pluginResponse;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
                     onBlur && onBlur(e);
                     value = e.target.value;
@@ -125,10 +128,27 @@ var TextInput = function (props) {
                     if (!handleValidation) return [3 /*break*/, 2];
                     return [4 /*yield*/, handleValidation(value)];
                 case 1:
-                    res = _a.sent();
+                    res = _c.sent();
                     setValidationStatus(res);
-                    _a.label = 2;
-                case 2: return [2 /*return*/];
+                    _c.label = 2;
+                case 2:
+                    validationPlugin = (theme.componentPluginConfigs &&
+                        theme.getTenant &&
+                        ((_b = (_a = theme.componentPluginConfigs[getTenant()]) === null || _a === void 0 ? void 0 : _a.TextInput) === null || _b === void 0 ? void 0 : _b.validationPlugin));
+                    if (!validationPlugin) return [3 /*break*/, 4];
+                    setValidationStatus('loading');
+                    return [4 /*yield*/, validationPlugin({
+                            value: value,
+                            content: content,
+                            passValidationErrorToFormValidation: passValidationErrorToFormValidation,
+                        })];
+                case 3:
+                    pluginResponse = _c.sent();
+                    console.log({ pluginResponse: pluginResponse });
+                    if (pluginResponse)
+                        return [2 /*return*/, pluginResponse];
+                    _c.label = 4;
+                case 4: return [2 /*return*/];
             }
         });
     }); };

package/dist/stories/PercentBarChart.stories.js

@@ -10,16 +10,16 @@ exports.default = {
     title: "Components/PercentBarChart",
 };
 var data = [
-    { name: "Great food", value: 72.3, Type: 0 },
-    { name: "Great Ambience", value: 10.1, Type: 1 },
-    { name: "Great Music", value: 9.87, Type: 2 },
-    { name: "Great Cocktails", value: 5.63, Type: 3 },
+    { display: "Great food", value: 72, },
+    { display: "Great Ambience", value: 10, },
+    { display: "Great Music", value: 9, },
+    { display: "Great Cocktails", value: 5, },
 ];
 var PercentBarChart_ = function (args) {
     var handleBarClick = function (name) {
         console.log("Bar clicked: ".concat(name));
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, labelPath: "name", valuePath: "value", title: "This is PercentBarChart representing the data" })));
+        react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, labelPath: "display", valuePath: "value", title: "This is PercentBarChart representing the data" })));
 };
 exports.PercentBarChart_ = PercentBarChart_;

package/package.json

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