wini-web-components 2.2.6 → 2.2.8
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.
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React, { CSSProperties, ReactNode } from "react";
|
|
2
|
+
interface Props {
|
|
3
|
+
id?: string;
|
|
4
|
+
onChange?: (value: string, target: HTMLDivElement) => void;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
value?: string;
|
|
7
|
+
length?: number;
|
|
8
|
+
inputStyle?: CSSProperties;
|
|
9
|
+
style?: CSSProperties;
|
|
10
|
+
className?: string;
|
|
11
|
+
helperText?: string;
|
|
12
|
+
helperTextColor?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare class InputOpt extends React.Component<Props> {
|
|
15
|
+
private containerRef;
|
|
16
|
+
constructor(props: Props | Readonly<Props>);
|
|
17
|
+
getValue: () => string;
|
|
18
|
+
componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<{}>, snapshot?: any): void;
|
|
19
|
+
render(): ReactNode;
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
|
3
|
+
var extendStatics = function (d, b) {
|
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
+
return extendStatics(d, b);
|
|
8
|
+
};
|
|
9
|
+
return function (d, b) {
|
|
10
|
+
if (typeof b !== "function" && b !== null)
|
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
+
extendStatics(d, b);
|
|
13
|
+
function __() { this.constructor = d; }
|
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
+
};
|
|
16
|
+
})();
|
|
17
|
+
var __assign = (this && this.__assign) || function () {
|
|
18
|
+
__assign = Object.assign || function(t) {
|
|
19
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
20
|
+
s = arguments[i];
|
|
21
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
22
|
+
t[p] = s[p];
|
|
23
|
+
}
|
|
24
|
+
return t;
|
|
25
|
+
};
|
|
26
|
+
return __assign.apply(this, arguments);
|
|
27
|
+
};
|
|
28
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
29
|
+
if (k2 === undefined) k2 = k;
|
|
30
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
31
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
32
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
33
|
+
}
|
|
34
|
+
Object.defineProperty(o, k2, desc);
|
|
35
|
+
}) : (function(o, m, k, k2) {
|
|
36
|
+
if (k2 === undefined) k2 = k;
|
|
37
|
+
o[k2] = m[k];
|
|
38
|
+
}));
|
|
39
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
40
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
41
|
+
}) : function(o, v) {
|
|
42
|
+
o["default"] = v;
|
|
43
|
+
});
|
|
44
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
45
|
+
if (mod && mod.__esModule) return mod;
|
|
46
|
+
var result = {};
|
|
47
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
48
|
+
__setModuleDefault(result, mod);
|
|
49
|
+
return result;
|
|
50
|
+
};
|
|
51
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
52
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
53
|
+
if (ar || !(i in from)) {
|
|
54
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
55
|
+
ar[i] = from[i];
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
59
|
+
};
|
|
60
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
61
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
62
|
+
};
|
|
63
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
64
|
+
exports.InputOpt = void 0;
|
|
65
|
+
var react_1 = __importStar(require("react"));
|
|
66
|
+
var input_opt_module_css_1 = __importDefault(require("./input-opt.module.css"));
|
|
67
|
+
var InputOpt = /** @class */ (function (_super) {
|
|
68
|
+
__extends(InputOpt, _super);
|
|
69
|
+
function InputOpt(props) {
|
|
70
|
+
var _this = _super.call(this, props) || this;
|
|
71
|
+
_this.containerRef = (0, react_1.createRef)();
|
|
72
|
+
_this.getValue = function () {
|
|
73
|
+
var _a;
|
|
74
|
+
if (_this.containerRef.current)
|
|
75
|
+
return __spreadArray([], _this.containerRef.current.querySelectorAll("input"), true).map(function (v) { return v.value; }).join("");
|
|
76
|
+
else
|
|
77
|
+
return (_a = _this.props.value) !== null && _a !== void 0 ? _a : "";
|
|
78
|
+
};
|
|
79
|
+
_this.getValue = _this.getValue.bind(_this);
|
|
80
|
+
return _this;
|
|
81
|
+
}
|
|
82
|
+
InputOpt.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
|
|
83
|
+
var _a;
|
|
84
|
+
if (prevProps.value !== this.props.value && this.containerRef.current) {
|
|
85
|
+
var inputList = __spreadArray([], this.containerRef.current.querySelectorAll("input"), true);
|
|
86
|
+
if ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.length) {
|
|
87
|
+
for (var i = 0; i < inputList.length; i++)
|
|
88
|
+
inputList[i].value = this.props.value[i];
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
for (var i = 0; i < inputList.length; i++)
|
|
92
|
+
inputList[i].value = "";
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
InputOpt.prototype.render = function () {
|
|
97
|
+
var _this = this;
|
|
98
|
+
var _a, _b, _c, _d, _e;
|
|
99
|
+
return react_1.default.createElement("div", { id: this.props.id, ref: this.containerRef, "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_a = this.props.helperTextColor) !== null && _a !== void 0 ? _a : '#e14337' }), this.props.style) : { '--helper-text-color': (_b = this.props.helperTextColor) !== null && _b !== void 0 ? _b : '#e14337' }, className: "row body-1 ".concat(input_opt_module_css_1.default['input-opt-container'], " ").concat(((_c = this.props.helperText) === null || _c === void 0 ? void 0 : _c.length) && 'helper-text', " ").concat((_d = this.props.className) !== null && _d !== void 0 ? _d : ''), onMouseDown: function (ev) {
|
|
100
|
+
ev.stopPropagation();
|
|
101
|
+
ev.preventDefault();
|
|
102
|
+
var inputList = __spreadArray([], ev.target.closest("div").childNodes, true);
|
|
103
|
+
for (var _i = 0, _a = inputList.entries(); _i < _a.length; _i++) {
|
|
104
|
+
var _b = _a[_i], index = _b[0], input = _b[1];
|
|
105
|
+
if (!input.value.length || index === (inputList.length - 1)) {
|
|
106
|
+
input.focus();
|
|
107
|
+
break;
|
|
108
|
+
}
|
|
109
|
+
continue;
|
|
110
|
+
}
|
|
111
|
+
} }, Array.from({ length: (_e = this.props.length) !== null && _e !== void 0 ? _e : 6 }).map(function (_, i) { return react_1.default.createElement("input", { key: "opt-" + i, disabled: _this.props.disabled, onKeyDown: function (ev) {
|
|
112
|
+
var _a, _b;
|
|
113
|
+
var key = ev.key.toLowerCase();
|
|
114
|
+
switch (key) {
|
|
115
|
+
case "backspace":
|
|
116
|
+
if (ev.target.value.length)
|
|
117
|
+
ev.target.value = "";
|
|
118
|
+
else if (((_a = ev.target.previousSibling) === null || _a === void 0 ? void 0 : _a.localName) === "input")
|
|
119
|
+
ev.target.previousSibling.focus();
|
|
120
|
+
else
|
|
121
|
+
ev.target.blur();
|
|
122
|
+
break;
|
|
123
|
+
case "delete":
|
|
124
|
+
ev.target.value = "";
|
|
125
|
+
break;
|
|
126
|
+
default:
|
|
127
|
+
var numberCheck = /[0-9]/g;
|
|
128
|
+
if (numberCheck.test(key)) {
|
|
129
|
+
if (!ev.target.value.length)
|
|
130
|
+
ev.target.value = key;
|
|
131
|
+
if (((_b = ev.target.nextSibling) === null || _b === void 0 ? void 0 : _b.localName) === "input" && !ev.target.nextSibling.value.length)
|
|
132
|
+
ev.target.nextSibling.focus();
|
|
133
|
+
else
|
|
134
|
+
ev.target.blur();
|
|
135
|
+
}
|
|
136
|
+
else
|
|
137
|
+
ev.preventDefault();
|
|
138
|
+
break;
|
|
139
|
+
}
|
|
140
|
+
}, onBlur: function () {
|
|
141
|
+
if (_this.props.onChange)
|
|
142
|
+
_this.props.onChange(_this.getValue(), _this.containerRef.current);
|
|
143
|
+
} }); }));
|
|
144
|
+
};
|
|
145
|
+
return InputOpt;
|
|
146
|
+
}(react_1.default.Component));
|
|
147
|
+
exports.InputOpt = InputOpt;
|
package/dist/form/login/view.js
CHANGED
|
@@ -50,14 +50,16 @@ function WLoginView(props) {
|
|
|
50
50
|
react_1.default.createElement("div", { className: 'row', style: { justifyContent: "center", gap: "0.4rem" } },
|
|
51
51
|
react_1.default.createElement(index_1.Text, { className: 'label-4' }, (_t = props.registerPrefixText) !== null && _t !== void 0 ? _t : "Don't have an account?"),
|
|
52
52
|
react_1.default.createElement(index_1.Text, { className: "button-text-3 ".concat(view_module_css_1.default['register-btn']), onClick: props.onRegister }, (_u = props.registerText) !== null && _u !== void 0 ? _u : "Sign up for Wini"))),
|
|
53
|
-
|
|
54
|
-
react_1.default.createElement(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
53
|
+
(props.loginWithGoogle || props.loginWithFacebook || props.loginWithApple || props.loginWithMicrosoft) ?
|
|
54
|
+
react_1.default.createElement(react_1.default.Fragment, null,
|
|
55
|
+
react_1.default.createElement("div", { className: "row ".concat(view_module_css_1.default['or-spacing']) },
|
|
56
|
+
react_1.default.createElement("div", null),
|
|
57
|
+
react_1.default.createElement(index_1.Text, { className: "label-4" }, (_v = props.orText) !== null && _v !== void 0 ? _v : "Or"),
|
|
58
|
+
react_1.default.createElement("div", null)),
|
|
59
|
+
react_1.default.createElement("div", { className: "row ".concat(view_module_css_1.default['login-social-media']) },
|
|
60
|
+
props.loginWithGoogle && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithGoogle, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/social media/google', size: "2rem" }), label: "Google" }),
|
|
61
|
+
props.loginWithFacebook && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithFacebook, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/social media/logo-facebook', size: "2rem" }), label: "Facebook" }),
|
|
62
|
+
props.loginWithApple && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithApple, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/development/apple', size: "2rem" }), label: "Apple" }),
|
|
63
|
+
props.loginWithMicrosoft && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithMicrosoft, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/development/microsoft', size: "2rem" }), label: "Microsoft" }))) : null)));
|
|
62
64
|
}
|
|
63
65
|
exports.WLoginView = WLoginView;
|
package/dist/index.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ import { Button } from './component/button/button';
|
|
|
25
25
|
import { Tag } from './component/tag/tag';
|
|
26
26
|
import { Winicon } from './component/wini-icon/winicon';
|
|
27
27
|
import { NumberPicker } from './component/number-picker/number-picker';
|
|
28
|
+
import { InputOpt } from './component/input-opt/input-opt';
|
|
28
29
|
import { WLoginView } from './form/login/view';
|
|
29
|
-
export { Calendar, CalendarType, ComponentStatus, getStatusIcon, Checkbox, Select1, Switch, Popup, showPopup, closePopup, Dialog, showDialog, DialogAlignment, DatePicker, SelectMultiple, ProgressBar, Text, Pagination, Table, TbCell, TbHeader, TbBody, TbRow, CellAlignItems, TextField, RadioButton, TextArea, ImportFile, ToastMessage, InfiniteScroll, Rating, ProgressCircle, CustomSlider, ToastContainer, Button, Tag, Winicon, NumberPicker, WLoginView };
|
|
30
|
+
export { Calendar, CalendarType, ComponentStatus, getStatusIcon, Checkbox, Select1, Switch, Popup, showPopup, closePopup, Dialog, showDialog, DialogAlignment, DatePicker, SelectMultiple, ProgressBar, Text, Pagination, Table, TbCell, TbHeader, TbBody, TbRow, CellAlignItems, TextField, RadioButton, TextArea, ImportFile, ToastMessage, InfiniteScroll, Rating, ProgressCircle, CustomSlider, ToastContainer, Button, Tag, Winicon, NumberPicker, InputOpt, WLoginView };
|
|
30
31
|
export type { OptionsItem };
|