wini-web-components 2.1.0 → 2.1.2

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.
Files changed (6) hide show
  1. package/dist/component/text-field/text-field.d.ts +1 -0
  2. package/dist/component/text-field/text-field.js +2 -2
  3. package/dist/form/login/view.d.ts +3 -2
  4. package/dist/form/login/view.js +19 -15
  5. package/dist/index.js +1 -1
  6. package/package.json +1 -1
package/dist/component/text-field/text-field.d.ts CHANGED
@@ -22,6 +22,7 @@ interface TextFieldProps {
22
22
  style?: CSSProperties;
23
23
  type?: React.HTMLInputTypeAttribute;
24
24
  autoFocus?: boolean;
25
+ autoComplete?: React.HTMLInputAutoCompleteAttribute;
25
26
  register?: UseFormRegister<{}>;
26
27
  }
27
28
  export declare class TextField extends React.Component<TextFieldProps> {
package/dist/component/text-field/text-field.js CHANGED
@@ -69,7 +69,7 @@ var TextField = /** @class */ (function (_super) {
69
69
  return react_1.default.createElement("div", { ref: this.containerRef, id: this.props.id, className: "text-field-container row ".concat((_a = this.props.className) !== null && _a !== void 0 ? _a : 'body-3', " ").concat(((_b = this.props.helperText) === null || _b === void 0 ? void 0 : _b.length) && 'helper-text'), "helper-text": this.props.helperText, style: this.props.style ? __assign(__assign({}, { '--helper-text-color': (_c = this.props.helperTextColor) !== null && _c !== void 0 ? _c : '#e14337' }), this.props.style) : { '--helper-text-color': (_d = this.props.helperTextColor) !== null && _d !== void 0 ? _d : '#e14337' } },
70
70
  this.props.prefix,
71
71
  this.props.register ?
72
- react_1.default.createElement("input", __assign({}, this.props.register, { autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, type: (_e = this.props.type) !== null && _e !== void 0 ? _e : 'text', placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onFocus: this.props.onFocus, onKeyDown: this.props.onComplete ? function (ev) {
72
+ react_1.default.createElement("input", __assign({}, this.props.register, { autoComplete: this.props.autoComplete, autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, type: (_e = this.props.type) !== null && _e !== void 0 ? _e : 'text', placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onFocus: this.props.onFocus, onKeyDown: this.props.onComplete ? function (ev) {
73
73
  if (_this.props.onComplete) {
74
74
  switch (ev.key.toLowerCase()) {
75
75
  case "enter":
@@ -79,7 +79,7 @@ var TextField = /** @class */ (function (_super) {
79
79
  break;
80
80
  }
81
81
  }
82
- } : undefined })) : react_1.default.createElement("input", { autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, type: (_f = this.props.type) !== null && _f !== void 0 ? _f : 'text', defaultValue: this.props.defaultValue, value: this.props.value, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onChange: this.props.onChange, onFocus: this.props.onFocus, onBlur: this.props.onBlur, onKeyDown: this.props.onComplete ? function (ev) {
82
+ } : undefined })) : react_1.default.createElement("input", { autoComplete: this.props.autoComplete, autoFocus: this.props.autoFocus, maxLength: this.props.maxLength, name: this.props.name, type: (_f = this.props.type) !== null && _f !== void 0 ? _f : 'text', defaultValue: this.props.defaultValue, value: this.props.value, placeholder: this.props.placeholder, readOnly: this.props.readOnly, disabled: this.props.disabled, onChange: this.props.onChange, onFocus: this.props.onFocus, onBlur: this.props.onBlur, onKeyDown: this.props.onComplete ? function (ev) {
83
83
  if (_this.props.onComplete) {
84
84
  switch (ev.key.toLowerCase()) {
85
85
  case "enter":
package/dist/form/login/view.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { CSSProperties } from 'react';
2
- import { FieldValues, SubmitHandler } from 'react-hook-form';
2
+ import { FieldValues, UseFormReturn } from 'react-hook-form';
3
3
  interface Props {
4
4
  logo: React.ReactNode | string;
5
5
  formData: {
@@ -18,9 +18,10 @@ interface Props {
18
18
  maxLength?: number;
19
19
  };
20
20
  };
21
- onSubmit?: SubmitHandler<FieldValues>;
21
+ onSubmit?: (data: FieldValues, methods?: UseFormReturn<any>) => void;
22
22
  title?: string;
23
23
  orText?: string;
24
+ methods?: UseFormReturn<any>;
24
25
  buttonLoginLabel?: string;
25
26
  loginWithGoogle?: React.MouseEventHandler<HTMLButtonElement>;
26
27
  loginWithFacebook?: React.MouseEventHandler<HTMLButtonElement>;
package/dist/form/login/view.js CHANGED
@@ -10,9 +10,13 @@ var view_module_css_1 = __importDefault(require("./view.module.css"));
10
10
  var react_hook_form_1 = require("react-hook-form");
11
11
  var react_2 = require("react");
12
12
  function WLoginView(props) {
13
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
13
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
14
14
  var methods = (0, react_hook_form_1.useForm)({ shouldFocusError: false });
15
- var _p = (0, react_2.useState)(false), isShowPass = _p[0], setShowPass = _p[1];
15
+ var _w = (0, react_2.useState)(false), isShowPass = _w[0], setShowPass = _w[1];
16
+ var _onSubmit = function (ev) {
17
+ if (props.onSubmit)
18
+ props.onSubmit(ev, methods);
19
+ };
16
20
  return react_1.default.createElement("form", { id: props.id, className: "col login-view-container ".concat(view_module_css_1.default['login-view-container'], " ").concat((_a = props.className) !== null && _a !== void 0 ? _a : ''), style: props.style },
17
21
  typeof props.logo === "string" ? react_1.default.createElement("img", { alt: 'logo', src: props.logo, height: "36rem" }) : props.logo,
18
22
  react_1.default.createElement("div", { className: "col login-view-form-container ".concat(view_module_css_1.default['login-view-form-container']) },
@@ -20,35 +24,35 @@ function WLoginView(props) {
20
24
  react_1.default.createElement("div", { className: 'col' },
21
25
  react_1.default.createElement("div", { className: 'col', style: { gap: "0.8rem" } },
22
26
  react_1.default.createElement(index_1.Text, { className: 'label-3' }, props.formData.username.label),
23
- react_1.default.createElement(index_1.TextField, { className: "placeholder-2", placeholder: props.formData.username.label, style: { height: "4.8rem" }, prefix: props.formData.username.prefix, name: props.formData.username.name, register: methods.register(props.formData.username.name, {
27
+ react_1.default.createElement(index_1.TextField, { autoComplete: 'username', className: "placeholder-2", placeholder: props.formData.username.label, style: { height: "4.8rem" }, prefix: props.formData.username.prefix, name: props.formData.username.name, register: ((_c = props.methods) !== null && _c !== void 0 ? _c : methods).register(props.formData.username.name, {
24
28
  onChange: function (ev) { ev.target.value = ev.target.value.trim(); },
25
29
  onBlur: props.formData.username.onValidate
26
- }), onComplete: function (ev) { ev.target.blur(); }, helperText: (_d = (_c = methods.formState.errors) === null || _c === void 0 ? void 0 : _c[props.formData.username.name]) === null || _d === void 0 ? void 0 : _d.message })),
30
+ }), onComplete: function (ev) { ev.target.blur(); }, helperText: (_f = (_e = ((_d = props.methods) !== null && _d !== void 0 ? _d : methods).formState.errors) === null || _e === void 0 ? void 0 : _e[props.formData.username.name]) === null || _f === void 0 ? void 0 : _f.message })),
27
31
  react_1.default.createElement("div", { className: 'col', style: { gap: "0.8rem" } },
28
32
  react_1.default.createElement(index_1.Text, { className: 'label-3' }, props.formData.password.label),
29
- react_1.default.createElement(index_1.TextField, { className: "placeholder-2", placeholder: props.formData.password.label, style: { height: "4.8rem" }, prefix: props.formData.password.prefix, suffix: react_1.default.createElement("button", { type: 'button', onClick: function () { setShowPass(!isShowPass); } },
30
- react_1.default.createElement(index_1.Winicon, { src: "outline/user interface/".concat(isShowPass ? "view" : "hide"), size: "1.6rem" })), name: props.formData.password.name, type: isShowPass ? "text" : "password", register: methods.register(props.formData.password.name, {
33
+ react_1.default.createElement(index_1.TextField, { autoComplete: 'current-password', className: "placeholder-2", placeholder: props.formData.password.label, style: { height: "4.8rem" }, prefix: props.formData.password.prefix, suffix: react_1.default.createElement("button", { type: 'button', onClick: function () { setShowPass(!isShowPass); } },
34
+ react_1.default.createElement(index_1.Winicon, { src: "outline/user interface/".concat(isShowPass ? "view" : "hide"), size: "1.6rem" })), name: props.formData.password.name, type: isShowPass ? "text" : "password", register: ((_g = props.methods) !== null && _g !== void 0 ? _g : methods).register(props.formData.password.name, {
31
35
  onChange: function (ev) { ev.target.value = ev.target.value.trim(); },
32
36
  onBlur: props.formData.password.onValidate
33
37
  }), onComplete: function (ev) {
34
- var _a;
35
- if ((_a = methods.watch(props.formData.password.name)) === null || _a === void 0 ? void 0 : _a.length) {
38
+ var _a, _b, _c;
39
+ if ((_b = ((_a = props.methods) !== null && _a !== void 0 ? _a : methods).watch(props.formData.password.name)) === null || _b === void 0 ? void 0 : _b.length) {
36
40
  ev.target.blur();
37
41
  if (!props.formData.password.onValidate && props.onSubmit)
38
- props.onSubmit(methods.getValues());
42
+ _onSubmit(((_c = props.methods) !== null && _c !== void 0 ? _c : methods).getValues());
39
43
  }
40
44
  else
41
45
  ev.target.blur();
42
- }, helperText: (_f = (_e = methods.formState.errors) === null || _e === void 0 ? void 0 : _e[props.formData.password.name]) === null || _f === void 0 ? void 0 : _f.message })),
43
- react_1.default.createElement(index_1.Text, { className: "button-text-3 ".concat(view_module_css_1.default['forgot-password-btn']), onClick: props.onForgotPassword }, (_g = props.forgotPasswordText) !== null && _g !== void 0 ? _g : "Forgot your password?"),
46
+ }, helperText: (_k = (_j = ((_h = props.methods) !== null && _h !== void 0 ? _h : methods).formState.errors) === null || _j === void 0 ? void 0 : _j[props.formData.password.name]) === null || _k === void 0 ? void 0 : _k.message })),
47
+ react_1.default.createElement(index_1.Text, { className: "button-text-3 ".concat(view_module_css_1.default['forgot-password-btn']), onClick: props.onForgotPassword }, (_l = props.forgotPasswordText) !== null && _l !== void 0 ? _l : "Forgot your password?"),
44
48
  react_1.default.createElement("div", { className: 'col', style: { gap: "1.6rem" } },
45
- react_1.default.createElement(index_1.Button, { disabled: ((_h = methods.watch(props.formData.username.name)) === null || _h === void 0 ? void 0 : _h.length) && ((_j = methods.watch(props.formData.password.name)) === null || _j === void 0 ? void 0 : _j.length) ? false : true, className: "button-text-1 ".concat(view_module_css_1.default['login-btn']), onClick: props.onSubmit && methods.handleSubmit(props.onSubmit), label: (_k = props.buttonLoginLabel) !== null && _k !== void 0 ? _k : "Log In" }),
49
+ react_1.default.createElement(index_1.Button, { disabled: ((_o = ((_m = props.methods) !== null && _m !== void 0 ? _m : methods).watch(props.formData.username.name)) === null || _o === void 0 ? void 0 : _o.length) && ((_q = ((_p = props.methods) !== null && _p !== void 0 ? _p : methods).watch(props.formData.password.name)) === null || _q === void 0 ? void 0 : _q.length) ? false : true, className: "button-text-1 ".concat(view_module_css_1.default['login-btn']), onClick: props.onSubmit && ((_r = props.methods) !== null && _r !== void 0 ? _r : methods).handleSubmit(_onSubmit), label: (_s = props.buttonLoginLabel) !== null && _s !== void 0 ? _s : "Log In" }),
46
50
  react_1.default.createElement("div", { className: 'row', style: { justifyContent: "center", gap: "0.4rem" } },
47
- react_1.default.createElement(index_1.Text, { className: 'label-4' }, (_l = props.registerPrefixText) !== null && _l !== void 0 ? _l : "Don't have an account?"),
48
- react_1.default.createElement(index_1.Text, { className: "button-text-3 ".concat(view_module_css_1.default['register-btn']), onClick: props.onRegister }, (_m = props.registerText) !== null && _m !== void 0 ? _m : "Sign up for Wini"))),
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
+ 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"))),
49
53
  react_1.default.createElement("div", { className: "row ".concat(view_module_css_1.default['or-spacing']) },
50
54
  react_1.default.createElement("div", null),
51
- react_1.default.createElement(index_1.Text, { className: "label-4" }, (_o = props.orText) !== null && _o !== void 0 ? _o : "Or"),
55
+ react_1.default.createElement(index_1.Text, { className: "label-4" }, (_v = props.orText) !== null && _v !== void 0 ? _v : "Or"),
52
56
  react_1.default.createElement("div", null)),
53
57
  react_1.default.createElement("div", { className: "row ".concat(view_module_css_1.default['login-social-media']) },
54
58
  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" }),