oolib 2.48.0 → 2.49.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -78,8 +78,7 @@ var HeaderStyle2 = function (_a) {
|
|
|
78
78
|
react_1.default.createElement("div", null,
|
|
79
79
|
label && (react_1.default.createElement(Typo_1.LABEL, { style: { color: (0, utilsOolib_1.getPrimaryColor100)(colors_1.colors) } }, label)),
|
|
80
80
|
react_1.default.createElement(styled_1.StyledTitleWrapper, null,
|
|
81
|
-
react_1.default.createElement(Typo_1.SERIF_5_6, null,
|
|
82
|
-
react_1.default.createElement(styled_1.StyledTitleSpan, { className: 'StyledTitleSpan' }, title)),
|
|
81
|
+
react_1.default.createElement(Typo_1.SERIF_5_6, null, title),
|
|
83
82
|
infoTooltip && (react_1.default.createElement(Tooltip_1.Tooltip, { text: infoTooltip.text || infoTooltip, position: infoTooltip.position || 'right', invert: invert, popOutOfOverflowHiddenParent: infoTooltip.popOutOfOverflowHiddenParent, presetTarget: 'infoIcon' }))))),
|
|
84
83
|
react_1.default.createElement(Buttons_1.ButtonGhost, { icon: expand ? 'Minus' : 'Plus' })));
|
|
85
84
|
};
|
|
@@ -3,6 +3,5 @@ export const StyledHeaderStyle1Wrapper: any;
|
|
|
3
3
|
export const StyledHeaderStyle2Wrapper: any;
|
|
4
4
|
export const StyledHeaderStyle3Wrapper: any;
|
|
5
5
|
export const NormalizedButton: any;
|
|
6
|
-
export const StyledTitleSpan: any;
|
|
7
6
|
export const StyledTitleWrapper: any;
|
|
8
7
|
export const StyledTitleHeaderStyle2Wrapper: any;
|
|
@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.StyledTitleHeaderStyle2Wrapper = exports.StyledTitleWrapper = exports.
|
|
10
|
+
exports.StyledTitleHeaderStyle2Wrapper = exports.StyledTitleWrapper = exports.NormalizedButton = exports.StyledHeaderStyle3Wrapper = exports.StyledHeaderStyle2Wrapper = exports.StyledHeaderStyle1Wrapper = exports.StyledAccordionContentsWrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var framer_motion_1 = require("framer-motion");
|
|
13
13
|
var themes_1 = require("../../themes");
|
|
@@ -15,10 +15,9 @@ var mixins_1 = require("../../themes/mixins");
|
|
|
15
15
|
var greyColor100 = themes_1.colors.greyColor100;
|
|
16
16
|
exports.StyledAccordionContentsWrapper = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n overflow: hidden;\n \n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n overflow: hidden;\n \n"])));
|
|
17
17
|
exports.StyledHeaderStyle1Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex; \n align-items: center; \n justify-content: space-between; \n padding: 1rem 2rem; \n background-color: ", ";\n border-bottom: 2px solid ", ";\n cursor: pointer;\n ", ";\n &:hover{\n background-color: ", ";\n }\n"], ["\n display: flex; \n align-items: center; \n justify-content: space-between; \n padding: 1rem 2rem; \n background-color: ", ";\n border-bottom: 2px solid ", ";\n cursor: pointer;\n ", ";\n &:hover{\n background-color: ", ";\n }\n"])), themes_1.colors.greyColor5, themes_1.colors.greyColor10, (0, mixins_1.transition)('background-color'), themes_1.colors.greyColor10);
|
|
18
|
-
exports.StyledHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex; \n align-items: center; \n justify-content: space-between; \n padding: 1rem 2rem; \n background-color: ", ";\n border-bottom: 2px solid ", ";\n cursor: pointer;\n ", ";\n
|
|
18
|
+
exports.StyledHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex; \n align-items: center; \n justify-content: space-between; \n padding: 1rem 2rem; \n background-color: ", ";\n border-bottom: 2px solid ", ";\n cursor: pointer;\n ", ";\n"], ["\n display: flex; \n align-items: center; \n justify-content: space-between; \n padding: 1rem 2rem; \n background-color: ", ";\n border-bottom: 2px solid ", ";\n cursor: pointer;\n ", ";\n"])), themes_1.colors.white, themes_1.colors.greyColor10, (0, mixins_1.transition)('background-color'));
|
|
19
19
|
exports.StyledHeaderStyle3Wrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex; \n align-items: center; \n justify-content: space-between; \n padding: 1rem 2rem; \n\n background-color: ", ";\n border: 1px solid ", ";\n cursor: pointer;\n ", ";\n &:hover{\n background-color: ", ";\n }\n"], ["\n display: flex; \n align-items: center; \n justify-content: space-between; \n padding: 1rem 2rem; \n\n background-color: ", ";\n border: 1px solid ", ";\n cursor: pointer;\n ", ";\n &:hover{\n background-color: ", ";\n }\n"])), themes_1.colors.none, themes_1.colors.greyColor15, (0, mixins_1.transition)('background-color'), themes_1.colors.greyColor3);
|
|
20
20
|
exports.NormalizedButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: none;\n background-color: ", ";\n"], ["\n border: none;\n background-color: ", ";\n"])), themes_1.colors.none);
|
|
21
|
-
exports.
|
|
22
|
-
exports.
|
|
23
|
-
|
|
24
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
21
|
+
exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 1rem;\n"], ["\n display: flex;\n align-items: center;\n gap: 1rem;\n"])));
|
|
22
|
+
exports.StyledTitleHeaderStyle2Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 1rem;\n"], ["\n display: flex;\n align-items: center;\n gap: 1rem;\n"])));
|
|
23
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
export function TextInput(props: any): any;
|
|
2
|
-
export function PasswordInput({
|
|
2
|
+
export function PasswordInput({ ...props }: {
|
|
3
3
|
[x: string]: any;
|
|
4
|
-
enableValidation?: boolean;
|
|
5
4
|
}): any;
|
|
6
5
|
export function EmailInput({ passValidationErrorToFormValidation, ...props }: {
|
|
7
6
|
[x: string]: any;
|
|
@@ -94,31 +94,33 @@ var OKELink_1 = require("../OKELink");
|
|
|
94
94
|
var DisplayIcon = function (_a) {
|
|
95
95
|
var icon = _a.icon, onClick = _a.onClick, size = _a.size;
|
|
96
96
|
var IconComp = icons_1.icons[icon];
|
|
97
|
-
return (react_1.default.createElement("div", { style: { cursor: onClick ?
|
|
97
|
+
return (react_1.default.createElement("div", { style: { cursor: onClick ? "pointer" : "", display: "flex" }, onMouseDown: onClick || null }, IconComp && react_1.default.createElement(IconComp, { size: size, weight: "bold" })));
|
|
98
98
|
};
|
|
99
99
|
var TextInput = function (props) {
|
|
100
|
-
var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, _a = props.placeholder, placeholder = _a === void 0 ?
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
var
|
|
104
|
-
var
|
|
105
|
-
var
|
|
106
|
-
var
|
|
107
|
-
var
|
|
100
|
+
var id = props.id, invert = props.invert, disabled = props.disabled, icon = props.icon, type = props.type, _a = props.placeholder, placeholder = _a === void 0 ? "Enter Text..." : _a, _b = props.value, value = _b === void 0 ? "" : _b, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, readOnly = props.readOnly, iconOnClick = props.iconOnClick, eyeIcon = props.eyeIcon, S = props.S, handleValidation = props.handleValidation, validateOnMount = props.validateOnMount, 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
|
|
101
|
+
_c = 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
|
|
102
|
+
validateOnlyOnBlur = _c === void 0 ? false : _c;
|
|
103
|
+
var _d = (0, react_1.useState)(""), validationStatus = _d[0], setValidationStatus = _d[1];
|
|
104
|
+
var composition = icon && !eyeIcon ? "icon+text" : "textOnly";
|
|
105
|
+
var size = S ? "S" : "M";
|
|
106
|
+
var actionBtnEnabaled = !!value && (type !== "url" ? true : validationStatus.type === "success");
|
|
107
|
+
var clearBtnEnabled = !!value && (type !== "url" ? true : validationStatus.type === "success");
|
|
108
|
+
var handleValidate = function (e, onBlur) { return __awaiter(void 0, void 0, void 0, function () {
|
|
108
109
|
var value, res;
|
|
109
110
|
return __generator(this, function (_a) {
|
|
110
111
|
switch (_a.label) {
|
|
111
112
|
case 0:
|
|
113
|
+
onBlur && onBlur(e);
|
|
112
114
|
value = e.target.value;
|
|
113
115
|
if (!value)
|
|
114
116
|
return [2 /*return*/];
|
|
115
|
-
if (type ===
|
|
116
|
-
|
|
117
|
-
if (!
|
|
118
|
-
return [4 /*yield*/,
|
|
117
|
+
if (type === "url")
|
|
118
|
+
setValidationStatus("loading");
|
|
119
|
+
if (!handleValidation) return [3 /*break*/, 2];
|
|
120
|
+
return [4 /*yield*/, handleValidation(value)];
|
|
119
121
|
case 1:
|
|
120
122
|
res = _a.sent();
|
|
121
|
-
|
|
123
|
+
setValidationStatus(res);
|
|
122
124
|
_a.label = 2;
|
|
123
125
|
case 2: return [2 /*return*/];
|
|
124
126
|
}
|
|
@@ -131,72 +133,55 @@ var TextInput = function (props) {
|
|
|
131
133
|
}, [validateOnMount]);
|
|
132
134
|
var handleOnChange = function (e) {
|
|
133
135
|
onChange(id, e.target.value);
|
|
134
|
-
if (
|
|
135
|
-
|
|
136
|
-
|
|
136
|
+
if (!e.target.value)
|
|
137
|
+
setValidationStatus('');
|
|
138
|
+
if (!validateOnlyOnBlur) {
|
|
137
139
|
handleValidate(e);
|
|
138
140
|
}
|
|
141
|
+
else {
|
|
142
|
+
/**
|
|
143
|
+
* basically if an error has already been set then, run validation in realtime on change
|
|
144
|
+
*/
|
|
145
|
+
if (validationStatus) {
|
|
146
|
+
if (type === "url")
|
|
147
|
+
return setValidationStatus("");
|
|
148
|
+
handleValidate(e);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
139
151
|
};
|
|
140
152
|
var inputRef = (0, react_1.useRef)(null);
|
|
141
153
|
(0, react_1.useEffect)(function () {
|
|
142
|
-
forceFocus &&
|
|
143
|
-
inputRef.current &&
|
|
144
|
-
inputRef.current.focus();
|
|
154
|
+
forceFocus && inputRef.current && inputRef.current.focus();
|
|
145
155
|
}, [forceFocus]);
|
|
146
156
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
147
157
|
react_1.default.createElement("div", { className: className },
|
|
148
158
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, _EXPORTS_1.getBlockLabelProps)(props))),
|
|
149
|
-
readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type ===
|
|
150
|
-
react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status:
|
|
159
|
+
readOnly ? (react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, type === "password" ? "********" : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
160
|
+
react_1.default.createElement(index_styled_1.InputContainerStyled, { invert: invert, type: type, disabled: disabled, status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type, eyeIcon: eyeIcon, composition: composition, onClick: function () { return inputRef.current.focus(); } },
|
|
151
161
|
icon && (react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20, onClick: iconOnClick || null })),
|
|
152
|
-
react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: size ===
|
|
153
|
-
|
|
162
|
+
react_1.default.createElement(index_styled_1.InputStyled, { ref: inputRef, className: size === "S" ? "SANS_2" : "SANS_3", id: id, type: type, name: type, placeholder: placeholder, value: value, onChange: handleOnChange, maxLength: maxLength || DEPRECATED_maxNumLimiter, onBlur: validateOnlyOnBlur
|
|
163
|
+
? function (e) { return handleValidate(e, onBlur); }
|
|
164
|
+
: onBlur, onFocus: onFocus, size: size, autoComplete: "off" }),
|
|
165
|
+
validationStatus === "loading" && (react_1.default.createElement("div", null,
|
|
154
166
|
react_1.default.createElement(LoadersAndProgress_1.LoaderCircle, { S: true, invert: invert }))),
|
|
155
|
-
clearBtn && (react_1.default.createElement(Buttons_1.ButtonGhost, { M: true, value: clearBtn.text, invert: clearBtn.invert, onClick: function () { return onChange(props.id,
|
|
156
|
-
actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { M: true, value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight:
|
|
157
|
-
(
|
|
167
|
+
clearBtn && (react_1.default.createElement(Buttons_1.ButtonGhost, { M: true, value: clearBtn.text, invert: clearBtn.invert, onClick: function () { return onChange(props.id, ""); }, disabled: !clearBtnEnabled, style: { marginRight: actionBtn ? "-1rem" : "-2rem" }, icon: clearBtn.icon })),
|
|
168
|
+
actionBtn && (react_1.default.createElement(Buttons_1.ButtonPrimary, { M: true, value: actionBtn.text, invert: actionBtn.invert, onClick: actionBtnEnabaled && actionBtn.onClick, disabled: !actionBtnEnabaled, style: { marginRight: "-2rem" }, icon: actionBtn.icon }))),
|
|
169
|
+
(validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.msg) && (react_1.default.createElement(index_styled_1.MsgContainer, { invert: invert, status: validationStatus === null || validationStatus === void 0 ? void 0 : validationStatus.type },
|
|
158
170
|
react_1.default.createElement(Typo_1.SANS_3, null,
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
react_1.default.createElement(OKELink_1.OKELink, { style: { marginLeft: '1rem' }, to: inputStatus.link.to }, inputStatus.link.text)))))))));
|
|
171
|
+
validationStatus.msg,
|
|
172
|
+
validationStatus.link && (react_1.default.createElement(OKELink_1.OKELink, { style: { marginLeft: "1rem" }, to: validationStatus.link.to }, validationStatus.link.text))))))))));
|
|
162
173
|
};
|
|
163
174
|
exports.TextInput = TextInput;
|
|
164
175
|
//passValidationErrorToFormValidation is not being handled by PasswordInput, cuz i dont think we will need it here..
|
|
165
176
|
var PasswordInput = function (_a) {
|
|
166
|
-
var
|
|
167
|
-
var
|
|
168
|
-
var icon = showPassword ?
|
|
177
|
+
var props = __rest(_a, []);
|
|
178
|
+
var _b = (0, react_1.useState)(false), showPassword = _b[0], setShowPassword = _b[1];
|
|
179
|
+
var icon = showPassword ? "Eye" : "EyeClosed";
|
|
169
180
|
var toggleShowPassword = function (e) {
|
|
170
181
|
e.preventDefault();
|
|
171
182
|
setShowPassword(function (prev) { return !prev; });
|
|
172
183
|
};
|
|
173
|
-
|
|
174
|
-
if (value.length < 8) {
|
|
175
|
-
return { type: 'error', msg: 'Password cannot be less than 8 characters' };
|
|
176
|
-
}
|
|
177
|
-
if (!/[A-Z]/g.test(value)) {
|
|
178
|
-
return {
|
|
179
|
-
type: 'error',
|
|
180
|
-
msg: 'Password must contain a uppercase character',
|
|
181
|
-
};
|
|
182
|
-
}
|
|
183
|
-
if (!/[\d]/g.test(value)) {
|
|
184
|
-
return {
|
|
185
|
-
type: 'error',
|
|
186
|
-
msg: 'Password must contain a digit',
|
|
187
|
-
};
|
|
188
|
-
}
|
|
189
|
-
if (!/[a-z]/g.test(value)) {
|
|
190
|
-
return {
|
|
191
|
-
type: 'error',
|
|
192
|
-
msg: 'Password must contain a lowercase character',
|
|
193
|
-
};
|
|
194
|
-
}
|
|
195
|
-
if (!/\W|_/g.test(value)) {
|
|
196
|
-
return { type: 'error', msg: 'Password must contain a special character' };
|
|
197
|
-
}
|
|
198
|
-
};
|
|
199
|
-
return (react_1.default.createElement(exports.TextInput, __assign({ placeholder: 'Enter password...', type: showPassword ? 'text' : 'password', iconOnClick: toggleShowPassword, eyeIcon: true, icon: icon, validateOnBlur: enableValidation && handleValidation }, props)));
|
|
184
|
+
return (react_1.default.createElement(exports.TextInput, __assign({ placeholder: "Enter password...", type: showPassword ? "text" : "password", iconOnClick: toggleShowPassword, eyeIcon: true, icon: icon }, props)));
|
|
200
185
|
};
|
|
201
186
|
exports.PasswordInput = PasswordInput;
|
|
202
187
|
var EmailInput = function (_a) {
|
|
@@ -204,14 +189,14 @@ var EmailInput = function (_a) {
|
|
|
204
189
|
var handleValidation = function (value) {
|
|
205
190
|
var regEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
|
206
191
|
var errorObj = regEx.test(value)
|
|
207
|
-
?
|
|
208
|
-
: { type:
|
|
192
|
+
? ""
|
|
193
|
+
: { type: "error", msg: "Enter a valid email address" };
|
|
209
194
|
if (passValidationErrorToFormValidation) {
|
|
210
|
-
passValidationErrorToFormValidation((errorObj === null || errorObj === void 0 ? void 0 : errorObj.type) ||
|
|
195
|
+
passValidationErrorToFormValidation((errorObj === null || errorObj === void 0 ? void 0 : errorObj.type) || "success");
|
|
211
196
|
}
|
|
212
197
|
return errorObj;
|
|
213
198
|
};
|
|
214
|
-
return (react_1.default.createElement(exports.TextInput, __assign({ type: "email", placeholder:
|
|
199
|
+
return (react_1.default.createElement(exports.TextInput, __assign({ type: "email", placeholder: "Enter email...", handleValidation: handleValidation }, props)));
|
|
215
200
|
};
|
|
216
201
|
exports.EmailInput = EmailInput;
|
|
217
202
|
var PhoneInput = function (_a) {
|
|
@@ -219,22 +204,22 @@ var PhoneInput = function (_a) {
|
|
|
219
204
|
var handleValidation = function (value) {
|
|
220
205
|
var errorObj;
|
|
221
206
|
if (isNaN(value)) {
|
|
222
|
-
errorObj = { type:
|
|
207
|
+
errorObj = { type: "error", msg: "Enter a valid phone number" };
|
|
223
208
|
if (passValidationErrorToFormValidation)
|
|
224
209
|
passValidationErrorToFormValidation(errorObj.type);
|
|
225
210
|
return errorObj;
|
|
226
211
|
}
|
|
227
212
|
if (value.length < 10) {
|
|
228
|
-
errorObj = { type:
|
|
213
|
+
errorObj = { type: "error", msg: "Enter a valid phone number" };
|
|
229
214
|
if (passValidationErrorToFormValidation)
|
|
230
215
|
passValidationErrorToFormValidation(errorObj.type);
|
|
231
216
|
return errorObj;
|
|
232
217
|
}
|
|
233
218
|
//else
|
|
234
219
|
if (passValidationErrorToFormValidation)
|
|
235
|
-
passValidationErrorToFormValidation(
|
|
220
|
+
passValidationErrorToFormValidation("success");
|
|
236
221
|
};
|
|
237
|
-
return (react_1.default.createElement(exports.TextInput, __assign({ type: "tel", placeholder:
|
|
222
|
+
return (react_1.default.createElement(exports.TextInput, __assign({ type: "tel", placeholder: "Enter Phone...", handleValidation: handleValidation, maxLength: 10 }, props)));
|
|
238
223
|
};
|
|
239
224
|
exports.PhoneInput = PhoneInput;
|
|
240
225
|
var URLInput = function (_a) {
|
|
@@ -246,7 +231,11 @@ var URLInput = function (_a) {
|
|
|
246
231
|
switch (_a.label) {
|
|
247
232
|
case 0:
|
|
248
233
|
if (!validationPlugin) return [3 /*break*/, 2];
|
|
249
|
-
return [4 /*yield*/, validationPlugin({
|
|
234
|
+
return [4 /*yield*/, validationPlugin({
|
|
235
|
+
value: value,
|
|
236
|
+
content: content,
|
|
237
|
+
passValidationErrorToFormValidation: passValidationErrorToFormValidation,
|
|
238
|
+
})];
|
|
250
239
|
case 1:
|
|
251
240
|
pluginResponse = _a.sent();
|
|
252
241
|
if (pluginResponse)
|
|
@@ -255,15 +244,15 @@ var URLInput = function (_a) {
|
|
|
255
244
|
case 2:
|
|
256
245
|
//else
|
|
257
246
|
//if routesAreValidInputs, then first validate for a route
|
|
258
|
-
if (routesAreValidInputs && value.substring(0, 1) ===
|
|
259
|
-
successObj = { type:
|
|
247
|
+
if (routesAreValidInputs && value.substring(0, 1) === "/") {
|
|
248
|
+
successObj = { type: "success", msg: "valid route" };
|
|
260
249
|
if (passValidationErrorToFormValidation)
|
|
261
250
|
passValidationErrorToFormValidation(successObj.type);
|
|
262
251
|
return [2 /*return*/, successObj];
|
|
263
252
|
}
|
|
264
253
|
//else validate for a url
|
|
265
254
|
if (!/^https?:\/\//i.test(value)) {
|
|
266
|
-
value =
|
|
255
|
+
value = "https://" + value;
|
|
267
256
|
}
|
|
268
257
|
_a.label = 3;
|
|
269
258
|
case 3:
|
|
@@ -272,20 +261,20 @@ var URLInput = function (_a) {
|
|
|
272
261
|
case 4:
|
|
273
262
|
response = _a.sent();
|
|
274
263
|
if (response.status !== 200)
|
|
275
|
-
throw new Error(
|
|
276
|
-
successObj = { type:
|
|
264
|
+
throw new Error("");
|
|
265
|
+
successObj = { type: "success", msg: "valid url" };
|
|
277
266
|
if (passValidationErrorToFormValidation)
|
|
278
267
|
passValidationErrorToFormValidation(successObj.type);
|
|
279
268
|
return [2 /*return*/, successObj];
|
|
280
269
|
case 5:
|
|
281
270
|
err_1 = _a.sent();
|
|
282
|
-
if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/
|
|
283
|
-
successObj = { type:
|
|
271
|
+
if (/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi.test(value)) {
|
|
272
|
+
successObj = { type: "success", msg: "valid url" };
|
|
284
273
|
if (passValidationErrorToFormValidation)
|
|
285
274
|
passValidationErrorToFormValidation(successObj.type);
|
|
286
275
|
return [2 /*return*/, successObj];
|
|
287
276
|
}
|
|
288
|
-
errorObj = { type:
|
|
277
|
+
errorObj = { type: "error", msg: "Enter a valid url..." };
|
|
289
278
|
if (passValidationErrorToFormValidation)
|
|
290
279
|
passValidationErrorToFormValidation(errorObj.type);
|
|
291
280
|
return [2 /*return*/, errorObj];
|
|
@@ -293,7 +282,7 @@ var URLInput = function (_a) {
|
|
|
293
282
|
}
|
|
294
283
|
});
|
|
295
284
|
}); };
|
|
296
|
-
return (react_1.default.createElement(exports.TextInput, __assign({ type: "url",
|
|
285
|
+
return (react_1.default.createElement(exports.TextInput, __assign({ type: "url", handleValidation: handleValidation, placeholder: "Enter a valid url..." }, props)));
|
|
297
286
|
};
|
|
298
287
|
exports.URLInput = URLInput;
|
|
299
288
|
var NumberInput = function (_a) {
|
|
@@ -302,31 +291,37 @@ var NumberInput = function (_a) {
|
|
|
302
291
|
var handleValidation = function (value) {
|
|
303
292
|
var errorObj;
|
|
304
293
|
if (isNaN(value)) {
|
|
305
|
-
errorObj = { type:
|
|
294
|
+
errorObj = { type: "error", msg: "Enter a number" };
|
|
306
295
|
if (passValidationErrorToFormValidation)
|
|
307
296
|
passValidationErrorToFormValidation(errorObj.type);
|
|
308
297
|
return errorObj;
|
|
309
298
|
}
|
|
310
299
|
if (min && value < min) {
|
|
311
|
-
errorObj = {
|
|
300
|
+
errorObj = {
|
|
301
|
+
type: "error",
|
|
302
|
+
msg: "Enter value greater than or equal to ".concat(min),
|
|
303
|
+
};
|
|
312
304
|
if (passValidationErrorToFormValidation)
|
|
313
305
|
passValidationErrorToFormValidation(errorObj.type);
|
|
314
306
|
return errorObj;
|
|
315
307
|
}
|
|
316
308
|
if (max && value > max) {
|
|
317
|
-
errorObj = {
|
|
309
|
+
errorObj = {
|
|
310
|
+
type: "error",
|
|
311
|
+
msg: "Enter value less than or equal to ".concat(max),
|
|
312
|
+
};
|
|
318
313
|
if (passValidationErrorToFormValidation)
|
|
319
314
|
passValidationErrorToFormValidation(errorObj.type);
|
|
320
315
|
return errorObj;
|
|
321
316
|
}
|
|
322
317
|
//else
|
|
323
318
|
if (passValidationErrorToFormValidation)
|
|
324
|
-
passValidationErrorToFormValidation(
|
|
319
|
+
passValidationErrorToFormValidation("success");
|
|
325
320
|
};
|
|
326
321
|
return (react_1.default.createElement(exports.TextInput
|
|
327
322
|
// type="number"
|
|
328
323
|
, __assign({
|
|
329
324
|
// type="number"
|
|
330
|
-
|
|
325
|
+
handleValidation: handleValidation, placeholder: "Enter Number..." }, props)));
|
|
331
326
|
};
|
|
332
327
|
exports.NumberInput = NumberInput;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oolib",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.49.1",
|
|
4
4
|
"description": " OKE Component Library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -12,9 +12,26 @@
|
|
|
12
12
|
"build": "npx tsc",
|
|
13
13
|
"prebuild": "rm -rf dist",
|
|
14
14
|
"postbuild": "npm run copy-files",
|
|
15
|
-
"semantic-release": "semantic-release
|
|
15
|
+
"semantic-release": "semantic-release",
|
|
16
16
|
"chromatic": "npx chromatic --project-token=0db95ae1f8d9"
|
|
17
17
|
},
|
|
18
|
+
"release": {
|
|
19
|
+
"branches": [
|
|
20
|
+
"main"
|
|
21
|
+
],
|
|
22
|
+
"plugins": [
|
|
23
|
+
"@semantic-release/commit-analyzer",
|
|
24
|
+
"@semantic-release/release-notes-generator",
|
|
25
|
+
"@semantic-release/npm",
|
|
26
|
+
[
|
|
27
|
+
"@semantic-release/github",
|
|
28
|
+
{
|
|
29
|
+
"successComment": false,
|
|
30
|
+
"failComment": false
|
|
31
|
+
}
|
|
32
|
+
]
|
|
33
|
+
]
|
|
34
|
+
},
|
|
18
35
|
"repository": {
|
|
19
36
|
"type": "git",
|
|
20
37
|
"url": "https://github.com/ooloi-labs/oolib.git"
|