@toptal/picasso-forms 36.0.0 → 38.0.0
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.
- package/FieldWrapper/FieldWrapper.d.ts +4 -0
- package/FieldWrapper/FieldWrapper.js +6 -3
- package/FieldWrapper/FieldWrapper.js.map +1 -1
- package/Form/Form.d.ts +13 -0
- package/Form/Form.js +4 -1
- package/Form/Form.js.map +1 -1
- package/PasswordInput/PasswordInput.d.ts +4 -2
- package/PasswordInput/PasswordInput.js +71 -4
- package/PasswordInput/PasswordInput.js.map +1 -1
- package/PasswordInput/validators.d.ts +8 -0
- package/PasswordInput/validators.js +24 -0
- package/PasswordInput/validators.js.map +1 -0
- package/package.json +2 -2
|
@@ -13,6 +13,10 @@ export declare type Props<TInputValue, TWrappedComponentProps> = TWrappedCompone
|
|
|
13
13
|
hideLabelRequiredDecoration?: boolean;
|
|
14
14
|
fieldType?: string;
|
|
15
15
|
children: (props: any) => React.ReactNode;
|
|
16
|
+
renderFieldRequirements?: (props: {
|
|
17
|
+
value?: TInputValue;
|
|
18
|
+
error?: boolean;
|
|
19
|
+
}) => React.ReactNode;
|
|
16
20
|
};
|
|
17
21
|
declare const FieldWrapper: {
|
|
18
22
|
<TWrappedComponentProps extends {
|
|
@@ -67,11 +67,11 @@ const getRequiredDecoration = (hideLabelRequiredDecoration, required, requiredVa
|
|
|
67
67
|
}
|
|
68
68
|
};
|
|
69
69
|
const FieldWrapper = (props) => {
|
|
70
|
-
const { type, hideFieldLabel, hideLabelRequiredDecoration, hint, label, required, enableReset, onResetClick, 'data-testid': dataTestId,
|
|
70
|
+
const { type, hideFieldLabel, hideLabelRequiredDecoration, hint, label, required, enableReset, onResetClick, 'data-testid': dataTestId, renderFieldRequirements,
|
|
71
71
|
// FieldProps - https://final-form.org/docs/react-final-form/types/FieldProps
|
|
72
72
|
afterSubmit, allowNull, beforeSubmit, children, data, defaultValue, format, formatOnBlur, initialValue, isEqual, name, id = name, parse, subscription, validate, validateFields, value, titleCase } = props,
|
|
73
73
|
//
|
|
74
|
-
rest = __rest(props, ["type", "hideFieldLabel", "hideLabelRequiredDecoration", "hint", "label", "required", "enableReset", "onResetClick", 'data-testid', "afterSubmit", "allowNull", "beforeSubmit", "children", "data", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "name", "id", "parse", "subscription", "validate", "validateFields", "value", "titleCase"]);
|
|
74
|
+
rest = __rest(props, ["type", "hideFieldLabel", "hideLabelRequiredDecoration", "hint", "label", "required", "enableReset", "onResetClick", 'data-testid', "renderFieldRequirements", "afterSubmit", "allowNull", "beforeSubmit", "children", "data", "defaultValue", "format", "formatOnBlur", "initialValue", "isEqual", "name", "id", "parse", "subscription", "validate", "validateFields", "value", "titleCase"]);
|
|
75
75
|
const formConfig = useFormConfig();
|
|
76
76
|
const { setValidators, clearValidators } = useFormContext();
|
|
77
77
|
const validators = getValidators(required, validate);
|
|
@@ -136,7 +136,10 @@ const FieldWrapper = (props) => {
|
|
|
136
136
|
childProps.enableReset = enableReset;
|
|
137
137
|
}
|
|
138
138
|
const requiredDecoration = getRequiredDecoration(hideLabelRequiredDecoration, required, formConfig.requiredVariant);
|
|
139
|
-
return (React.createElement(PicassoForm.Field, { error: error, hint: hint, "data-testid": dataTestId
|
|
139
|
+
return (React.createElement(PicassoForm.Field, { error: error, hint: hint, "data-testid": dataTestId, fieldRequirements: renderFieldRequirements === null || renderFieldRequirements === void 0 ? void 0 : renderFieldRequirements({
|
|
140
|
+
value: input.value,
|
|
141
|
+
error: error
|
|
142
|
+
}) },
|
|
140
143
|
!hideFieldLabel && label && (React.createElement(PicassoForm.Label, { requiredDecoration: requiredDecoration, htmlFor: id, disabled: rest.disabled, titleCase: titleCase }, label)),
|
|
141
144
|
children(childProps)));
|
|
142
145
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldWrapper.js","sourceRoot":"","sources":["../../src/FieldWrapper/FieldWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAA2B,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,EACL,QAAQ,EAIT,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,IAAI,IAAI,WAAW,EAGpB,MAAM,iBAAiB,CAAA;AAKxB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAoC,MAAM,eAAe,CAAA;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,MAAM,EAAE,iBAAiB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,GAAG,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"FieldWrapper.js","sourceRoot":"","sources":["../../src/FieldWrapper/FieldWrapper.tsx"],"names":[],"mappings":"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"}
|
package/Form/Form.d.ts
CHANGED
|
@@ -94,5 +94,18 @@ export declare const Form: {
|
|
|
94
94
|
defaultProps: {};
|
|
95
95
|
displayName: string;
|
|
96
96
|
};
|
|
97
|
+
PasswordInput: {
|
|
98
|
+
({ validate, hideRequirements, ...rest }: import("../PasswordInput/PasswordInput").Props): JSX.Element;
|
|
99
|
+
displayName: string;
|
|
100
|
+
};
|
|
101
|
+
FieldRequirements: {
|
|
102
|
+
<TValueType>({ value, description, open, error, timeout, requirements, className, style, testIds }: import("@toptal/picasso/src/FieldRequirements/FieldRequirements").Props<TValueType>): JSX.Element;
|
|
103
|
+
defaultProps: {
|
|
104
|
+
open: boolean;
|
|
105
|
+
timeout: number;
|
|
106
|
+
value: string;
|
|
107
|
+
};
|
|
108
|
+
displayName: string;
|
|
109
|
+
};
|
|
97
110
|
};
|
|
98
111
|
export default Form;
|
package/Form/Form.js
CHANGED
|
@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
import React, { useMemo, useRef } from 'react';
|
|
22
22
|
import { Form as FinalForm } from 'react-final-form';
|
|
23
23
|
import { getIn, setIn } from 'final-form';
|
|
24
|
-
import { Form as PicassoForm, Container } from '@toptal/picasso';
|
|
24
|
+
import { Form as PicassoForm, Container, FieldRequirements } from '@toptal/picasso';
|
|
25
25
|
import { useNotifications } from '@toptal/picasso/utils';
|
|
26
26
|
import Autocomplete from '../Autocomplete';
|
|
27
27
|
import Input from '../Input';
|
|
@@ -44,6 +44,7 @@ import Dropzone from '../Dropzone';
|
|
|
44
44
|
import { FormConfigContext } from '../FormConfig';
|
|
45
45
|
import { createScrollToErrorDecorator } from '../utils';
|
|
46
46
|
import { FormContext, createFormContext } from './FormContext';
|
|
47
|
+
import PasswordInput from '../PasswordInput';
|
|
47
48
|
const getValidationErrors = (validators, formValues, form) => {
|
|
48
49
|
let errors;
|
|
49
50
|
Object.entries(validators).forEach(([key, validator]) => {
|
|
@@ -121,5 +122,7 @@ Form.ConfigProvider = FormConfigContext.Provider;
|
|
|
121
122
|
Form.Switch = Switch;
|
|
122
123
|
Form.Rating = Rating;
|
|
123
124
|
Form.Dropzone = Dropzone;
|
|
125
|
+
Form.PasswordInput = PasswordInput;
|
|
126
|
+
Form.FieldRequirements = FieldRequirements;
|
|
124
127
|
export default Form;
|
|
125
128
|
//# sourceMappingURL=Form.js.map
|
package/Form/Form.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/Form/Form.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAa,MAAM,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EACL,IAAI,IAAI,SAAS,EAElB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAA6B,KAAK,EAAE,KAAK,EAAa,MAAM,YAAY,CAAA;AAC/E,OAAO,
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/Form/Form.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAa,MAAM,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EACL,IAAI,IAAI,SAAS,EAElB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAA6B,KAAK,EAAE,KAAK,EAAa,MAAM,YAAY,CAAA;AAC/E,OAAO,EACL,IAAI,IAAI,WAAW,EACnB,SAAS,EACT,iBAAiB,EAClB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,MAAM,UAAU,CAAA;AAC5B,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,KAAK,MAAM,UAAU,CAAA;AAC5B,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAC5C,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAA;AACvD,OAAO,EACL,WAAW,EAGX,iBAAiB,EAClB,MAAM,eAAe,CAAA;AACtB,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAW5C,MAAM,mBAAmB,GAAG,CAC1B,UAAsB,EACtB,UAAe,EACf,IAAkB,EACO,EAAE;IAC3B,IAAI,MAAwB,CAAA;IAE5B,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,EAAE;QACtD,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QACzC,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;QAE9C,IAAI,CAAC,SAAS,EAAE;YACd,OAAM;SACP;QAED,MAAM,KAAK,GAAG,SAAS,CAAC,UAAU,EAAE,UAAU,EAAE,cAAc,CAAC,CAAA;QAE/D,IAAI,KAAK,EAAE;YACT,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;SACzC;IACH,CAAC,CAAC,CAAA;IAEF,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAA4B,KAAe,EAAE,EAAE;IACjE,MAAM,EACJ,QAAQ,EACR,YAAY,EACZ,oBAAoB,EACpB,QAAQ,EACR,oBAAoB,EACpB,mBAAmB,EACnB,UAAU,GAAG,EAAE,EACf,aAAa,EAAE,UAAU,KAEvB,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,4IAUL,CAAQ,CAAA;IACT,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAA;IACrD,MAAM,sBAAsB,GAAG,OAAO,CACpC,GAAG,EAAE,CACH,4BAA4B,CAAC;QAC3B,oBAAoB;KACrB,CAAC,EACJ,CAAC,oBAAoB,CAAC,CACvB,CAAA;IAED,MAAM,gBAAgB,GAAG,MAAM,CAAmB,iBAAiB,EAAE,CAAC,CAAA;IAEtE,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACnC,IAAI,CAAC,oBAAoB,EAAE;YACzB,OAAM;SACP;QAED,WAAW,CAAC,oBAAoB,CAAC,CAAA;IACnC,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,CAAC,MAAwB,EAAE,EAAE;QACzD,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;YAC9B,SAAS,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;YAE/C,OAAM;SACP;QAED,IAAI,CAAC,mBAAmB,EAAE;YACxB,OAAM;SACP;QAED,SAAS,CAAC,mBAAmB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;IAC9D,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CACnB,MAAS,EACT,IAAgB,EAChB,QAA8C,EAC9C,EAAE;QACF,MAAM,gBAAgB,GAAG,mBAAmB,CAC1C,gBAAgB,CAAC,OAAO,CAAC,aAAa,EAAE,EACxC,MAAM,EACN,IAAI,CACL,CAAA;QAED,IAAI,gBAAgB,EAAE;YACpB,OAAO,gBAAgB,CAAA;SACxB;QAED,MAAM,gBAAgB,GAAG,MAAM,QAAQ,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAA;QAE/D,IAAI,CAAC,gBAAgB,EAAE;YACrB,uBAAuB,EAAE,CAAA;SAC1B;aAAM;YACL,qBAAqB,CAAC,gBAAgB,CAAC,CAAA;SACxC;QAED,OAAO,gBAAgB,CAAA;IACzB,CAAC,CAAA,CAAA;IAED,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB;QAC3C,oBAAC,SAAS,kBACR,MAAM,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAC5B,oBAAC,SAAS;gBACR,oBAAC,WAAW,IACV,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,YAAY,iBACT,UAAU,IAEtB,QAAQ,CACG,CACJ,CACb,EACD,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,CAAC,GAAG,UAAU,EAAE,sBAAsB,CAAC,IAC/C,IAAI,EACR,CACmB,CACxB,CAAA;AACH,CAAC,CAAA;AAED,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA;AAEtB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;AAChC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;AAClB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;AACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;AAClB,IAAI,CAAC,WAAW,GAAG,WAAW,CAAA;AAC9B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;AAC5B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;AACxB,IAAI,CAAC,cAAc,GAAG,cAAc,CAAA;AACpC,IAAI,CAAC,aAAa,GAAG,aAAa,CAAA;AAClC,IAAI,CAAC,WAAW,GAAG,WAAW,CAAA;AAC9B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;AAC1B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;AAC5B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;AAC5B,IAAI,CAAC,WAAW,GAAG,WAAW,CAAA;AAC9B,IAAI,CAAC,YAAY,GAAG,YAAY,CAAA;AAChC,IAAI,CAAC,cAAc,GAAG,iBAAiB,CAAC,QAAQ,CAAA;AAChD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;AACpB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;AACpB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;AACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAA;AAClC,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAA;AAE1C,eAAe,IAAI,CAAA"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { PasswordInputProps } from '@toptal/picasso';
|
|
2
2
|
import { FieldProps } from '../FieldWrapper';
|
|
3
|
-
export declare type Props = PasswordInputProps & FieldProps<PasswordInputProps['value']
|
|
3
|
+
export declare type Props = PasswordInputProps & FieldProps<PasswordInputProps['value']> & {
|
|
4
|
+
hideRequirements?: boolean;
|
|
5
|
+
};
|
|
4
6
|
export declare const PasswordInput: {
|
|
5
|
-
(
|
|
7
|
+
({ validate, hideRequirements, ...rest }: Props): JSX.Element;
|
|
6
8
|
displayName: string;
|
|
7
9
|
};
|
|
8
10
|
export default PasswordInput;
|
|
@@ -1,9 +1,76 @@
|
|
|
1
|
-
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React, { useState } from 'react';
|
|
2
13
|
import { PasswordInput as PicassoPasswordInput } from '@toptal/picasso';
|
|
14
|
+
import { validators } from '../utils';
|
|
3
15
|
import FieldWrapper from '../FieldWrapper';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
16
|
+
import passwordValidators from './validators';
|
|
17
|
+
import Form from '../Form';
|
|
18
|
+
const { composeValidators } = validators;
|
|
19
|
+
const ANIMATION_TIMEOUT = 500; // same as in Picasso/FieldRequirements
|
|
20
|
+
const validatePassword = (value) => {
|
|
21
|
+
if (!value) {
|
|
22
|
+
return undefined;
|
|
23
|
+
}
|
|
24
|
+
const isValidPassword = passwordValidators.atLeastEightCharacters(value) &&
|
|
25
|
+
passwordValidators.atLeastOneNumber(value) &&
|
|
26
|
+
passwordValidators.atLeastOneUpperCaseCharacter(value) &&
|
|
27
|
+
passwordValidators.atLeastOneLowerCaseCharacter(value) &&
|
|
28
|
+
passwordValidators.atLeastOneSpecialCharacter(value);
|
|
29
|
+
return isValidPassword ? undefined : 'Invalid password';
|
|
30
|
+
};
|
|
31
|
+
export const PasswordInput = (_a) => {
|
|
32
|
+
var { validate, hideRequirements } = _a, rest = __rest(_a, ["validate", "hideRequirements"]);
|
|
33
|
+
const [showContent, setShowContent] = useState(false);
|
|
34
|
+
const validationsObject = hideRequirements
|
|
35
|
+
? validate
|
|
36
|
+
: composeValidators([validatePassword, validate]);
|
|
37
|
+
const renderFieldRequirements = ({ value, error }) => (React.createElement(Form.FieldRequirements, { value: value, open: showContent, error: error, description: 'Please make sure that your password contains:', timeout: ANIMATION_TIMEOUT, requirements: [
|
|
38
|
+
{
|
|
39
|
+
message: 'At least 8 characters',
|
|
40
|
+
validator: passwordValidators.atLeastEightCharacters
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
message: '1 number',
|
|
44
|
+
validator: passwordValidators.atLeastOneNumber
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
message: '1 uppercase character',
|
|
48
|
+
validator: passwordValidators.atLeastOneUpperCaseCharacter
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
message: '1 special character',
|
|
52
|
+
validator: passwordValidators.atLeastOneSpecialCharacter
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
message: '1 lowercase character',
|
|
56
|
+
validator: passwordValidators.atLeastOneLowerCaseCharacter
|
|
57
|
+
}
|
|
58
|
+
] }));
|
|
59
|
+
return (React.createElement(FieldWrapper, Object.assign({}, rest, { validate: validationsObject, renderFieldRequirements: !hideRequirements ? renderFieldRequirements : undefined }), (inputProps) => {
|
|
60
|
+
const handleFocus = (event) => {
|
|
61
|
+
var _a;
|
|
62
|
+
(_a = inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
|
|
63
|
+
setShowContent(true);
|
|
64
|
+
};
|
|
65
|
+
const handleBlur = (event) => {
|
|
66
|
+
var _a;
|
|
67
|
+
(_a = inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
|
|
68
|
+
// Hide the requirements after a short delay
|
|
69
|
+
setTimeout(() => {
|
|
70
|
+
setShowContent(false);
|
|
71
|
+
}, ANIMATION_TIMEOUT);
|
|
72
|
+
};
|
|
73
|
+
return (React.createElement(PicassoPasswordInput, Object.assign({}, inputProps, { onFocus: handleFocus, onBlur: handleBlur })));
|
|
7
74
|
}));
|
|
8
75
|
};
|
|
9
76
|
PasswordInput.displayName = 'PasswordInput';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["../../src/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["../../src/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
atLeastEightCharacters: (value: string) => boolean;
|
|
3
|
+
atLeastOneUpperCaseCharacter: (value: string) => boolean;
|
|
4
|
+
atLeastOneLowerCaseCharacter: (value: string) => boolean;
|
|
5
|
+
atLeastOneNumber: (value: string) => boolean;
|
|
6
|
+
atLeastOneSpecialCharacter: (value: string) => boolean;
|
|
7
|
+
};
|
|
8
|
+
export default _default;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
const atLeastEightCharacters = (value) => {
|
|
2
|
+
return value.length >= 8;
|
|
3
|
+
};
|
|
4
|
+
const atLeastOneUpperCaseCharacter = (value) => {
|
|
5
|
+
return /[A-Z]/.test(value);
|
|
6
|
+
};
|
|
7
|
+
const atLeastOneLowerCaseCharacter = (value) => {
|
|
8
|
+
return /[a-z]/.test(value);
|
|
9
|
+
};
|
|
10
|
+
const atLeastOneNumber = (value) => {
|
|
11
|
+
return /[0-9]/.test(value);
|
|
12
|
+
};
|
|
13
|
+
const atLeastOneSpecialCharacter = (value) => {
|
|
14
|
+
// eslint-disable-next-line no-useless-escape
|
|
15
|
+
return /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value);
|
|
16
|
+
};
|
|
17
|
+
export default {
|
|
18
|
+
atLeastEightCharacters,
|
|
19
|
+
atLeastOneUpperCaseCharacter,
|
|
20
|
+
atLeastOneLowerCaseCharacter,
|
|
21
|
+
atLeastOneNumber,
|
|
22
|
+
atLeastOneSpecialCharacter
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=validators.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"validators.js","sourceRoot":"","sources":["../../src/PasswordInput/validators.ts"],"names":[],"mappings":"AAAA,MAAM,sBAAsB,GAAG,CAAC,KAAa,EAAE,EAAE;IAC/C,OAAO,KAAK,CAAC,MAAM,IAAI,CAAC,CAAA;AAC1B,CAAC,CAAA;AAED,MAAM,4BAA4B,GAAG,CAAC,KAAa,EAAE,EAAE;IACrD,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC5B,CAAC,CAAA;AAED,MAAM,4BAA4B,GAAG,CAAC,KAAa,EAAE,EAAE;IACrD,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC5B,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE;IACzC,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC5B,CAAC,CAAA;AAED,MAAM,0BAA0B,GAAG,CAAC,KAAa,EAAE,EAAE;IACnD,6CAA6C;IAC7C,OAAO,uCAAuC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC5D,CAAC,CAAA;AAED,eAAe;IACb,sBAAsB;IACtB,4BAA4B;IAC5B,4BAA4B;IAC5B,gBAAgB;IAChB,0BAA0B;CAC3B,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-forms",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "38.0.0",
|
|
4
4
|
"description": "Picasso form components",
|
|
5
5
|
"author": "Toptal",
|
|
6
6
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-forms#readme",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"url": "https://github.com/toptal/picasso/issues"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"@toptal/picasso": "^18.
|
|
26
|
+
"@toptal/picasso": "^18.13.0",
|
|
27
27
|
"@toptal/picasso-shared": "^7.2.3",
|
|
28
28
|
"react": "^16.12.0",
|
|
29
29
|
"react-dom": "^16.12.0"
|