@salutejs/plasma-new-hope 0.194.0-canary.1562.11852874401.0 → 0.194.0-canary.1565.11870784206.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Combobox/ComboboxNew/Combobox.js +1 -0
- package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +2 -1
- package/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js.map +1 -1
- package/cjs/components/Combobox/ComboboxOld/Combobox.css +4 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +4 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +4 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +4 -5
- package/cjs/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +4 -5
- package/cjs/components/Dropdown/Dropdown.css +4 -5
- package/cjs/components/Dropdown/Dropdown.js +2 -4
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.css +4 -5
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +2 -3
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +1 -7
- package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/cjs/components/Dropdown/ui/DropdownItem/{DropdownItem.styles_14yih1y.css → DropdownItem.styles_1b439rx.css} +0 -1
- package/cjs/components/Select/Select.js +1 -0
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/ui/Inner/ui/Item/Item.js +2 -1
- package/cjs/components/Select/ui/Inner/ui/Item/Item.js.map +1 -1
- package/cjs/components/TextField/TextField.js +27 -3
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/hooks/useValidation.js +273 -0
- package/cjs/components/TextField/hooks/useValidation.js.map +1 -0
- package/cjs/index.css +4 -5
- package/cjs/utils/constants.js +4 -0
- package/cjs/utils/constants.js.map +1 -1
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +1 -0
- package/emotion/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +2 -1
- package/emotion/cjs/components/Dropdown/Dropdown.js +2 -4
- package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +2 -3
- package/emotion/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +11 -15
- package/emotion/cjs/components/Select/Select.js +1 -0
- package/emotion/cjs/components/Select/ui/Inner/ui/Item/Item.js +2 -1
- package/emotion/cjs/components/TextField/TextField.js +27 -4
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +330 -0
- package/emotion/cjs/components/TextField/hooks/index.js +8 -1
- package/emotion/cjs/components/TextField/hooks/useValidation.js +276 -0
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +253 -1
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +252 -0
- package/emotion/cjs/utils/constants.js +4 -2
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +1 -0
- package/emotion/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +2 -1
- package/emotion/es/components/Dropdown/Dropdown.js +2 -4
- package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +3 -4
- package/emotion/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +11 -15
- package/emotion/es/components/Select/Select.js +1 -0
- package/emotion/es/components/Select/ui/Inner/ui/Item/Item.js +2 -1
- package/emotion/es/components/TextField/TextField.js +28 -5
- package/emotion/es/components/TextField/TextField.template-doc.mdx +330 -0
- package/emotion/es/components/TextField/hooks/index.js +2 -1
- package/emotion/es/components/TextField/hooks/useValidation.js +270 -0
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +253 -1
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +252 -0
- package/emotion/es/utils/constants.js +3 -1
- package/es/components/Combobox/ComboboxNew/Combobox.js +1 -0
- package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +2 -1
- package/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js.map +1 -1
- package/es/components/Combobox/ComboboxOld/Combobox.css +4 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.css +4 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.css +4 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.css +4 -5
- package/es/components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.css +4 -5
- package/es/components/Dropdown/Dropdown.css +4 -5
- package/es/components/Dropdown/Dropdown.js +2 -4
- package/es/components/Dropdown/Dropdown.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.css +4 -5
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +3 -4
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +2 -7
- package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
- package/es/components/Dropdown/ui/DropdownItem/{DropdownItem.styles_14yih1y.css → DropdownItem.styles_1b439rx.css} +0 -1
- package/es/components/Select/Select.js +1 -0
- package/es/components/Select/Select.js.map +1 -1
- package/es/components/Select/ui/Inner/ui/Item/Item.js +2 -1
- package/es/components/Select/ui/Inner/ui/Item/Item.js.map +1 -1
- package/es/components/TextField/TextField.js +27 -3
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/hooks/useValidation.js +269 -0
- package/es/components/TextField/hooks/useValidation.js.map +1 -0
- package/es/index.css +4 -5
- package/es/utils/constants.js +3 -1
- package/es/utils/constants.js.map +1 -1
- package/package.json +2 -3
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +1 -0
- package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +2 -1
- package/styled-components/cjs/components/Dropdown/Dropdown.js +2 -4
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +2 -3
- package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +2 -5
- package/styled-components/cjs/components/Select/Select.js +1 -0
- package/styled-components/cjs/components/Select/ui/Inner/ui/Item/Item.js +2 -1
- package/styled-components/cjs/components/TextField/TextField.js +26 -3
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +330 -0
- package/styled-components/cjs/components/TextField/hooks/index.js +8 -1
- package/styled-components/cjs/components/TextField/hooks/useValidation.js +276 -0
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +253 -1
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +252 -0
- package/styled-components/cjs/utils/constants.js +4 -2
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +1 -0
- package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js +2 -1
- package/styled-components/es/components/Dropdown/Dropdown.js +2 -4
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +3 -4
- package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +2 -5
- package/styled-components/es/components/Select/Select.js +1 -0
- package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.js +2 -1
- package/styled-components/es/components/TextField/TextField.js +27 -4
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +330 -0
- package/styled-components/es/components/TextField/hooks/index.js +2 -1
- package/styled-components/es/components/TextField/hooks/useValidation.js +270 -0
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +253 -1
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +252 -0
- package/styled-components/es/utils/constants.js +3 -1
- package/types/components/Autocomplete/Autocomplete.types.d.ts +2 -2
- package/types/components/Autocomplete/Autocomplete.types.d.ts.map +1 -1
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts +1676 -92
- package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +2 -1
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts +1676 -92
- package/types/components/Combobox/ComboboxNew/ui/Target/Target.styles.d.ts.map +1 -1
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts +1676 -92
- package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.d.ts +2 -50
- package/types/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.types.d.ts +6 -11
- package/types/components/Dropdown/Dropdown.types.d.ts.map +1 -1
- package/types/components/Dropdown/index.d.ts +0 -1
- package/types/components/Dropdown/index.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts.map +1 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts +0 -1
- package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts.map +1 -1
- package/types/components/Range/Range.styles.d.ts +1676 -92
- package/types/components/Range/Range.styles.d.ts.map +1 -1
- package/types/components/Select/Select.d.ts.map +1 -1
- package/types/components/Select/Select.types.d.ts +2 -1
- package/types/components/Select/Select.types.d.ts.map +1 -1
- package/types/components/Select/ui/Inner/ui/Item/Item.d.ts.map +1 -1
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts +1676 -92
- package/types/components/Select/ui/Target/ui/Textfield/Textfield.styles.d.ts.map +1 -1
- package/types/components/Slider/components/Double/Double.styles.d.ts +1676 -92
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +51 -1
- package/types/components/TextField/TextField.types.d.ts.map +1 -1
- package/types/components/TextField/hooks/index.d.ts +1 -0
- package/types/components/TextField/hooks/index.d.ts.map +1 -1
- package/types/components/TextField/hooks/useValidation.d.ts +7 -0
- package/types/components/TextField/hooks/useValidation.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Autocomplete/Autocomplete.d.ts +64 -2
- package/types/examples/plasma_b2c/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts +1 -25
- package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Mask/Mask.d.ts +2732 -92
- package/types/examples/plasma_b2c/components/Mask/Mask.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +1676 -92
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Autocomplete/Autocomplete.d.ts +64 -2
- package/types/examples/plasma_web/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts +1 -25
- package/types/examples/plasma_web/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Mask/Mask.d.ts +2732 -92
- package/types/examples/plasma_web/components/Mask/Mask.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +1676 -92
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- package/types/utils/constants.d.ts +2 -0
- package/types/utils/constants.d.ts.map +1 -1
@@ -5,6 +5,9 @@ title: TextField
|
|
5
5
|
|
6
6
|
import { PropsTable, Description } from '@site/src/components';
|
7
7
|
|
8
|
+
import Tabs from '@theme/Tabs';
|
9
|
+
import TabItem from '@theme/TabItem';
|
10
|
+
|
8
11
|
# TextField
|
9
12
|
<Description name="TextField" />
|
10
13
|
<PropsTable name="TextField" exclude={['$isFocused']} />
|
@@ -198,3 +201,330 @@ export function App() {
|
|
198
201
|
);
|
199
202
|
}
|
200
203
|
```
|
204
|
+
|
205
|
+
### Валидация
|
206
|
+
Поддерживается валидация почты и пароля:
|
207
|
+
|
208
|
+
<Tabs>
|
209
|
+
<TabItem value="email" label="Email" default>
|
210
|
+
Свойства доступные при валидации почты:
|
211
|
+
```tsx
|
212
|
+
type ValidationProps = {
|
213
|
+
/*
|
214
|
+
* Тип валидации
|
215
|
+
*/
|
216
|
+
validationType: 'email';
|
217
|
+
/*
|
218
|
+
* Опции валидации
|
219
|
+
*/
|
220
|
+
options?: EmailValidationOptions;
|
221
|
+
/*
|
222
|
+
* Функция, вызываемая при валидации значения.
|
223
|
+
* Вызывается при событии onBlur и по нажатию Enter, когда фокус на поле ввода
|
224
|
+
*/
|
225
|
+
onValidate?: (args: OnValidateArgs) => void;
|
226
|
+
}
|
227
|
+
```
|
228
|
+
Свойство `options` имеет следующий вид:
|
229
|
+
```tsx
|
230
|
+
type EmailValidationOptions = {
|
231
|
+
/*
|
232
|
+
* Пользовательское регулярное выражение, для проверки почты на валидность
|
233
|
+
*/
|
234
|
+
customEmailRegex?: {
|
235
|
+
value?: RegExp;
|
236
|
+
errorMessage?: string;
|
237
|
+
};
|
238
|
+
/*
|
239
|
+
* Минимальная длина почты
|
240
|
+
*/
|
241
|
+
minLength?: {
|
242
|
+
value?: number;
|
243
|
+
errorMessage?: string;
|
244
|
+
};
|
245
|
+
/*
|
246
|
+
* Максимальная длина почты
|
247
|
+
*/
|
248
|
+
maxLength?: {
|
249
|
+
value?: number;
|
250
|
+
errorMessage?: string;
|
251
|
+
};
|
252
|
+
/*
|
253
|
+
* Минимальная длина хоста (часть почты до `@`)
|
254
|
+
*/
|
255
|
+
minHostLength?: {
|
256
|
+
value?: number;
|
257
|
+
errorMessage?: string;
|
258
|
+
};
|
259
|
+
/*
|
260
|
+
* Максимальная длина хоста (часть почты до `@`)
|
261
|
+
*/
|
262
|
+
maxHostLength?: {
|
263
|
+
value?: number;
|
264
|
+
errorMessage?: string;
|
265
|
+
};
|
266
|
+
/*
|
267
|
+
* Минимальная длина домена (часть почты от `@` до `.` перед доменной зоной)
|
268
|
+
*/
|
269
|
+
minDomainLength?: {
|
270
|
+
value?: number;
|
271
|
+
errorMessage?: string;
|
272
|
+
};
|
273
|
+
/*
|
274
|
+
* Максимальная длина домена (часть почты от `@` до `.` перед доменной зоной)
|
275
|
+
*/
|
276
|
+
maxDomainLength?: {
|
277
|
+
value?: number;
|
278
|
+
errorMessage?: string;
|
279
|
+
};
|
280
|
+
/*
|
281
|
+
* Минимальная длина доменной зоны (часть почты от `.`; например `ru`, `com`...)
|
282
|
+
*/
|
283
|
+
minZoneLength?: {
|
284
|
+
value?: number;
|
285
|
+
errorMessage?: string;
|
286
|
+
};
|
287
|
+
/*
|
288
|
+
* Максимальная длина доменной зоны (часть почты от `.`; например `ru`, `com`...)
|
289
|
+
*/
|
290
|
+
maxZoneLength?: {
|
291
|
+
value?: number;
|
292
|
+
errorMessage?: string;
|
293
|
+
};
|
294
|
+
/*
|
295
|
+
* Список разрешенных доменов (например `['mail.ru', 'yahoo.ru', 'gmail.com']`)
|
296
|
+
*/
|
297
|
+
whitelistDomains?: {
|
298
|
+
value?: string[];
|
299
|
+
errorMessage?: string;
|
300
|
+
};
|
301
|
+
/*
|
302
|
+
* Список запрещенных доменов (например `['org.biz', 'expressmail.com']`)
|
303
|
+
*/
|
304
|
+
blacklistDomains?: {
|
305
|
+
value?: string[];
|
306
|
+
errorMessage?: string;
|
307
|
+
};
|
308
|
+
};
|
309
|
+
```
|
310
|
+
|
311
|
+
```tsx live
|
312
|
+
import React, { useState } from 'react';
|
313
|
+
import { TextField } from '@salutejs/{{ package }}';
|
314
|
+
|
315
|
+
export function App() {
|
316
|
+
const options = {
|
317
|
+
minLength: {
|
318
|
+
value: 7,
|
319
|
+
errorMessage: 'Почта слишком короткая',
|
320
|
+
},
|
321
|
+
maxLength: {
|
322
|
+
value: 30,
|
323
|
+
errorMessage: 'Почта слишком длинная',
|
324
|
+
},
|
325
|
+
minHostLength: {
|
326
|
+
value: 2,
|
327
|
+
errorMessage: 'Хост слишком короткий',
|
328
|
+
},
|
329
|
+
maxHostLength: {
|
330
|
+
value: 12,
|
331
|
+
errorMessage: 'Хост слишком длинный',
|
332
|
+
},
|
333
|
+
minDomainLength: {
|
334
|
+
value: 3,
|
335
|
+
errorMessage: 'Домен слишком короткий',
|
336
|
+
},
|
337
|
+
maxDomainLength: {
|
338
|
+
value: 6,
|
339
|
+
errorMessage: 'Домен слишком длинный',
|
340
|
+
},
|
341
|
+
minZoneLength: {
|
342
|
+
value: 2,
|
343
|
+
errorMessage: 'Доменная зона слишком короткая',
|
344
|
+
},
|
345
|
+
maxZoneLength: {
|
346
|
+
value: 5,
|
347
|
+
errorMessage: 'Доменная зона слишком длинная',
|
348
|
+
},
|
349
|
+
whitelistDomains: {
|
350
|
+
value: ['plasma.ru', 'gmail.com', 'mail.ru'],
|
351
|
+
errorMessage: 'Домен не разрешен',
|
352
|
+
},
|
353
|
+
blacklistDomains: {
|
354
|
+
value: ['hah.ah', 'heh.eh'],
|
355
|
+
errorMessage: 'Домен запрещен',
|
356
|
+
},
|
357
|
+
};
|
358
|
+
|
359
|
+
const [error, setError] = useState('');
|
360
|
+
|
361
|
+
const handleOnChange = () => {
|
362
|
+
setError('');
|
363
|
+
};
|
364
|
+
|
365
|
+
const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
|
366
|
+
setError(errorMessage || '');
|
367
|
+
};
|
368
|
+
|
369
|
+
return (
|
370
|
+
<div>
|
371
|
+
<TextField
|
372
|
+
label="Валидация почты"
|
373
|
+
placeholder="Заполните поле"
|
374
|
+
validationType="email"
|
375
|
+
options={options}
|
376
|
+
view={error ? 'negative' : 'default}
|
377
|
+
helperText={error || 'Валидация почты'}
|
378
|
+
onChange={handleOnChange}
|
379
|
+
onValidate={handleOnValidate}
|
380
|
+
/>
|
381
|
+
</div>
|
382
|
+
);
|
383
|
+
}
|
384
|
+
```
|
385
|
+
</TabItem>
|
386
|
+
|
387
|
+
<TabItem value="password" label="Password" default>
|
388
|
+
Свойства доступные при валидации пароля:
|
389
|
+
```tsx
|
390
|
+
type ValidationProps = {
|
391
|
+
/*
|
392
|
+
* Тип валидации
|
393
|
+
*/
|
394
|
+
validationType: 'password';
|
395
|
+
/*
|
396
|
+
* Опции валидации
|
397
|
+
*/
|
398
|
+
options?: PasswordValidationOptions;
|
399
|
+
/*
|
400
|
+
* Состояние сокрытия оригинального пароля
|
401
|
+
*/
|
402
|
+
passwordHidden?: boolean;
|
403
|
+
/*
|
404
|
+
* Функция, вызываемая при валидации значения.
|
405
|
+
* Вызывается при событии onBlur и по нажатию Enter, когда фокус на поле ввода
|
406
|
+
*/
|
407
|
+
onValidate?: (args: OnValidateArgs) => void;
|
408
|
+
}
|
409
|
+
```
|
410
|
+
Свойство `options` имеет следующий вид:
|
411
|
+
```tsx
|
412
|
+
type PasswordValidationOptions = {
|
413
|
+
/*
|
414
|
+
* Минимальная длина пароля
|
415
|
+
*/
|
416
|
+
minLength?: {
|
417
|
+
value?: number;
|
418
|
+
errorMessage?: string;
|
419
|
+
};
|
420
|
+
/*
|
421
|
+
* Максимальная длина пароля
|
422
|
+
*/
|
423
|
+
maxLength?: {
|
424
|
+
value?: number;
|
425
|
+
errorMessage?: string;
|
426
|
+
};
|
427
|
+
/*
|
428
|
+
* Должны ли быть буквы верхнего регистра в пароле
|
429
|
+
*/
|
430
|
+
includeUppercase?: {
|
431
|
+
value?: boolean;
|
432
|
+
errorMessage?: string;
|
433
|
+
};
|
434
|
+
/*
|
435
|
+
* Должны ли быть буквы нижнего регистра в пароле
|
436
|
+
*/
|
437
|
+
includeLowercase?: {
|
438
|
+
value?: boolean;
|
439
|
+
errorMessage?: string;
|
440
|
+
};
|
441
|
+
/*
|
442
|
+
* Должны ли быть цифры в пароле
|
443
|
+
*/
|
444
|
+
includeDigits?: {
|
445
|
+
value?: boolean;
|
446
|
+
errorMessage?: string;
|
447
|
+
};
|
448
|
+
/*
|
449
|
+
* Должны ли быть специальные символы в пароле
|
450
|
+
*/
|
451
|
+
includeSpecialSymbols?: {
|
452
|
+
value?: boolean;
|
453
|
+
errorMessage?: string;
|
454
|
+
};
|
455
|
+
};
|
456
|
+
```
|
457
|
+
|
458
|
+
```tsx live
|
459
|
+
import React, { useState } from 'react';
|
460
|
+
import { TextField, IconButton } from '@salutejs/{{ package }}';
|
461
|
+
import { IconEyeFill, IconEyeClosedFill } from '@salutejs/plasma-icons';
|
462
|
+
|
463
|
+
export function App() {
|
464
|
+
const options = {
|
465
|
+
minLength: {
|
466
|
+
value: 5,
|
467
|
+
errorMessage: 'Пароль слишком короткий',
|
468
|
+
},
|
469
|
+
maxLength: {
|
470
|
+
value: 20,
|
471
|
+
errorMessage: 'Пароль слишком длинный',
|
472
|
+
},
|
473
|
+
includeUppercase: {
|
474
|
+
value: true,
|
475
|
+
errorMessage: 'Пароль должен содержать хотя бы одну заглавную букву',
|
476
|
+
},
|
477
|
+
includeLowercase: {
|
478
|
+
value: true,
|
479
|
+
errorMessage: 'Пароль должен содержать хотя бы одну строчную букву',
|
480
|
+
},
|
481
|
+
includeDigits: {
|
482
|
+
value: true,
|
483
|
+
errorMessage: 'Пароль должен содержать хотя бы одну цифру',
|
484
|
+
},
|
485
|
+
includeSpecialSymbols: {
|
486
|
+
value: true,
|
487
|
+
errorMessage: 'Пароль должен содержать хотя бы один специальный символ',
|
488
|
+
},
|
489
|
+
};
|
490
|
+
|
491
|
+
const [error, setError] = useState('');
|
492
|
+
const [hidden, setHidden] = useState(false);
|
493
|
+
|
494
|
+
const handleOnChange = () => {
|
495
|
+
setError('');
|
496
|
+
};
|
497
|
+
|
498
|
+
const handleOnValidate = ({ errorMessage }: { errorMessage?: string }) => {
|
499
|
+
setError(errorMessage || '');
|
500
|
+
};
|
501
|
+
|
502
|
+
const toggleShowPassword = () => setHidden(!hidden);
|
503
|
+
|
504
|
+
const HideButton = () => (
|
505
|
+
<IconButton size="s" view="clear" onClick={toggleShowPassword}>
|
506
|
+
{hidden ? <IconEyeClosedFill size="xs" color="inherit" /> : <IconEyeFill size="xs" color="inherit" />}
|
507
|
+
</IconButton>
|
508
|
+
)
|
509
|
+
|
510
|
+
return (
|
511
|
+
<div>
|
512
|
+
<TextField
|
513
|
+
label="Валидация пароля"
|
514
|
+
placeholder="Заполните поле"
|
515
|
+
validationType="password"
|
516
|
+
options={options}
|
517
|
+
view={error ? 'negative' : 'default'}
|
518
|
+
leftHelper={error || 'Валидация пароля'}
|
519
|
+
onChange={handleOnChange}
|
520
|
+
onValidate={handleOnValidate}
|
521
|
+
passwordHidden={hidden}
|
522
|
+
contentLeft={<HideButton />}
|
523
|
+
/>
|
524
|
+
</div>
|
525
|
+
);
|
526
|
+
}
|
527
|
+
```
|
528
|
+
</TabItem>
|
529
|
+
</Tabs>
|
530
|
+
|
@@ -9,4 +9,11 @@ Object.defineProperty(exports, "useKeyNavigation", {
|
|
9
9
|
return _useKeyNavigation.useKeyNavigation;
|
10
10
|
}
|
11
11
|
});
|
12
|
-
|
12
|
+
Object.defineProperty(exports, "useValidation", {
|
13
|
+
enumerable: true,
|
14
|
+
get: function get() {
|
15
|
+
return _useValidation.useValidation;
|
16
|
+
}
|
17
|
+
});
|
18
|
+
var _useKeyNavigation = /*#__PURE__*/require("./useKeyNavigation");
|
19
|
+
var _useValidation = /*#__PURE__*/require("./useValidation");
|
@@ -0,0 +1,276 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useValidation = void 0;
|
7
|
+
var _react = /*#__PURE__*/require("react");
|
8
|
+
var _utils = /*#__PURE__*/require("../../../utils");
|
9
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
10
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
11
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
12
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
13
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
14
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
15
|
+
var getUniqueKeys = function getUniqueKeys(lengthOptions) {
|
16
|
+
return lengthOptions.map(function (option) {
|
17
|
+
return option.replace(/min|max|Length/g, '');
|
18
|
+
});
|
19
|
+
};
|
20
|
+
var validateLenghtOptions = function validateLenghtOptions(options) {
|
21
|
+
var _options$minLength, _options$maxLength;
|
22
|
+
if (!options) {
|
23
|
+
return;
|
24
|
+
}
|
25
|
+
var minHash = Object.keys(options).filter(function (key) {
|
26
|
+
return key.startsWith('min');
|
27
|
+
});
|
28
|
+
var maxHash = Object.keys(options).filter(function (key) {
|
29
|
+
return key.startsWith('max');
|
30
|
+
});
|
31
|
+
var minMaxUniqueKeys = (minHash === null || minHash === void 0 ? void 0 : minHash.length) >= (maxHash === null || maxHash === void 0 ? void 0 : maxHash.length) ? getUniqueKeys(minHash) : getUniqueKeys(maxHash);
|
32
|
+
var globalMinValue = Number(options === null || options === void 0 || (_options$minLength = options.minLength) === null || _options$minLength === void 0 ? void 0 : _options$minLength.value);
|
33
|
+
var globalMaxValue = Number(options === null || options === void 0 || (_options$maxLength = options.maxLength) === null || _options$maxLength === void 0 ? void 0 : _options$maxLength.value);
|
34
|
+
if (globalMinValue <= 0) {
|
35
|
+
console.error('minLength must be more than 0');
|
36
|
+
}
|
37
|
+
if (globalMaxValue <= 0) {
|
38
|
+
console.error('maxLength must be more than 0');
|
39
|
+
}
|
40
|
+
if (globalMaxValue <= globalMinValue) {
|
41
|
+
console.error('maxLength must be more than minLength');
|
42
|
+
}
|
43
|
+
minMaxUniqueKeys.forEach(function (key) {
|
44
|
+
var _options$optionMinKey, _options$optionMaxKey;
|
45
|
+
var optionMinKey = "min".concat(key, "Length");
|
46
|
+
var optionMaxKey = "max".concat(key, "Length");
|
47
|
+
var minValue = Number(options === null || options === void 0 || (_options$optionMinKey = options[optionMinKey]) === null || _options$optionMinKey === void 0 ? void 0 : _options$optionMinKey.value);
|
48
|
+
var maxValue = Number(options === null || options === void 0 || (_options$optionMaxKey = options[optionMaxKey]) === null || _options$optionMaxKey === void 0 ? void 0 : _options$optionMaxKey.value);
|
49
|
+
if (!minValue || minValue <= 0) {
|
50
|
+
console.error("".concat(optionMinKey, " must be more than 0"));
|
51
|
+
}
|
52
|
+
if (!maxValue || maxValue <= 0) {
|
53
|
+
console.error("".concat(optionMaxKey, " must be more than 0"));
|
54
|
+
}
|
55
|
+
if (maxValue <= minValue) {
|
56
|
+
console.error("".concat(optionMaxKey, " must be more than ").concat(optionMinKey));
|
57
|
+
}
|
58
|
+
});
|
59
|
+
};
|
60
|
+
var validateWithLengthOptions = function validateWithLengthOptions(value, options, optionKey) {
|
61
|
+
var _options$optionMinKey2, _options$optionMaxKey2;
|
62
|
+
var optionMinKey = "min".concat(optionKey, "Length");
|
63
|
+
var optionMaxKey = "max".concat(optionKey, "Length");
|
64
|
+
var minValue = Number((_options$optionMinKey2 = options[optionMinKey]) === null || _options$optionMinKey2 === void 0 ? void 0 : _options$optionMinKey2.value);
|
65
|
+
var maxValue = Number((_options$optionMaxKey2 = options[optionMaxKey]) === null || _options$optionMaxKey2 === void 0 ? void 0 : _options$optionMaxKey2.value);
|
66
|
+
if (minValue && value.length < minValue) {
|
67
|
+
var _options$optionMinKey3;
|
68
|
+
return {
|
69
|
+
isValid: false,
|
70
|
+
errorMessage: ((_options$optionMinKey3 = options[optionMinKey]) === null || _options$optionMinKey3 === void 0 ? void 0 : _options$optionMinKey3.errorMessage) || "".concat(optionMinKey, " is too short")
|
71
|
+
};
|
72
|
+
}
|
73
|
+
if (maxValue && value.length > maxValue) {
|
74
|
+
var _options$optionMaxKey3;
|
75
|
+
return {
|
76
|
+
isValid: false,
|
77
|
+
errorMessage: ((_options$optionMaxKey3 = options[optionMaxKey]) === null || _options$optionMaxKey3 === void 0 ? void 0 : _options$optionMaxKey3.errorMessage) || "".concat(optionMaxKey, " is too long")
|
78
|
+
};
|
79
|
+
}
|
80
|
+
return {
|
81
|
+
isValid: true
|
82
|
+
};
|
83
|
+
};
|
84
|
+
var validateEmailDomainsLists = function validateEmailDomainsLists(blacklistDomains, whitelistDomains) {
|
85
|
+
if (!(blacklistDomains !== null && blacklistDomains !== void 0 && blacklistDomains.length) || !(whitelistDomains !== null && whitelistDomains !== void 0 && whitelistDomains.length)) {
|
86
|
+
return;
|
87
|
+
}
|
88
|
+
var uniqueDomains = new Set([].concat(_toConsumableArray(blacklistDomains), _toConsumableArray(whitelistDomains)));
|
89
|
+
if (uniqueDomains.size !== blacklistDomains.length + whitelistDomains.length) {
|
90
|
+
console.error('Blacklisted domains must not overlap whitelisted domains');
|
91
|
+
}
|
92
|
+
};
|
93
|
+
var validateWithDomainsLists = function validateWithDomainsLists(domainWithZone, options) {
|
94
|
+
var _options$whitelistDom, _options$blacklistDom, _options$blacklistDom2, _options$whitelistDom2;
|
95
|
+
if (!((_options$whitelistDom = options.whitelistDomains) !== null && _options$whitelistDom !== void 0 && (_options$whitelistDom = _options$whitelistDom.value) !== null && _options$whitelistDom !== void 0 && _options$whitelistDom.length) && !((_options$blacklistDom = options.blacklistDomains) !== null && _options$blacklistDom !== void 0 && (_options$blacklistDom = _options$blacklistDom.value) !== null && _options$blacklistDom !== void 0 && _options$blacklistDom.length)) {
|
96
|
+
return {
|
97
|
+
isValid: true
|
98
|
+
};
|
99
|
+
}
|
100
|
+
if (options !== null && options !== void 0 && (_options$blacklistDom2 = options.blacklistDomains) !== null && _options$blacklistDom2 !== void 0 && (_options$blacklistDom2 = _options$blacklistDom2.value) !== null && _options$blacklistDom2 !== void 0 && _options$blacklistDom2.includes(domainWithZone)) {
|
101
|
+
var _options$blacklistDom3;
|
102
|
+
return {
|
103
|
+
isValid: false,
|
104
|
+
errorMessage: ((_options$blacklistDom3 = options.blacklistDomains) === null || _options$blacklistDom3 === void 0 ? void 0 : _options$blacklistDom3.errorMessage) || 'Domain is blacklisted'
|
105
|
+
};
|
106
|
+
}
|
107
|
+
if (!(options !== null && options !== void 0 && (_options$whitelistDom2 = options.whitelistDomains) !== null && _options$whitelistDom2 !== void 0 && (_options$whitelistDom2 = _options$whitelistDom2.value) !== null && _options$whitelistDom2 !== void 0 && _options$whitelistDom2.includes(domainWithZone))) {
|
108
|
+
var _options$whitelistDom3;
|
109
|
+
return {
|
110
|
+
isValid: false,
|
111
|
+
errorMessage: ((_options$whitelistDom3 = options.whitelistDomains) === null || _options$whitelistDom3 === void 0 ? void 0 : _options$whitelistDom3.errorMessage) || 'Domain is not whitelisted'
|
112
|
+
};
|
113
|
+
}
|
114
|
+
return {
|
115
|
+
isValid: true
|
116
|
+
};
|
117
|
+
};
|
118
|
+
var validateEmail = function validateEmail(email, options) {
|
119
|
+
var _options$customEmailR, _options$minLength2, _options$maxLength2;
|
120
|
+
if (!email) {
|
121
|
+
return {
|
122
|
+
isValid: true
|
123
|
+
};
|
124
|
+
}
|
125
|
+
var emailRegex = (options === null || options === void 0 || (_options$customEmailR = options.customEmailRegex) === null || _options$customEmailR === void 0 ? void 0 : _options$customEmailR.value) || _utils.constants.emailPattern;
|
126
|
+
if (!emailRegex.test(email)) {
|
127
|
+
var _options$customEmailR2;
|
128
|
+
return {
|
129
|
+
isValid: false,
|
130
|
+
errorMessage: (options === null || options === void 0 || (_options$customEmailR2 = options.customEmailRegex) === null || _options$customEmailR2 === void 0 ? void 0 : _options$customEmailR2.errorMessage) || 'Invalid email'
|
131
|
+
};
|
132
|
+
}
|
133
|
+
if (!options) {
|
134
|
+
return {
|
135
|
+
isValid: true
|
136
|
+
};
|
137
|
+
}
|
138
|
+
if ((_options$minLength2 = options.minLength) !== null && _options$minLength2 !== void 0 && _options$minLength2.value && email.length < options.minLength.value) {
|
139
|
+
var _options$minLength3;
|
140
|
+
return {
|
141
|
+
isValid: false,
|
142
|
+
errorMessage: ((_options$minLength3 = options.minLength) === null || _options$minLength3 === void 0 ? void 0 : _options$minLength3.errorMessage) || 'Email is too short'
|
143
|
+
};
|
144
|
+
}
|
145
|
+
if ((_options$maxLength2 = options.maxLength) !== null && _options$maxLength2 !== void 0 && _options$maxLength2.value && email.length > options.maxLength.value) {
|
146
|
+
var _options$maxLength3;
|
147
|
+
return {
|
148
|
+
isValid: false,
|
149
|
+
errorMessage: ((_options$maxLength3 = options.maxLength) === null || _options$maxLength3 === void 0 ? void 0 : _options$maxLength3.errorMessage) || 'Email is too long'
|
150
|
+
};
|
151
|
+
}
|
152
|
+
var emailHost = email.split('@')[0];
|
153
|
+
var emailDomainWithZone = email.split('@')[1];
|
154
|
+
var emailZone = emailDomainWithZone.split('.').pop();
|
155
|
+
if (!(emailZone !== null && emailZone !== void 0 && emailZone.length)) {
|
156
|
+
var _options$customEmailR3;
|
157
|
+
return {
|
158
|
+
isValid: false,
|
159
|
+
errorMessage: ((_options$customEmailR3 = options.customEmailRegex) === null || _options$customEmailR3 === void 0 ? void 0 : _options$customEmailR3.errorMessage) || 'Invalid email'
|
160
|
+
};
|
161
|
+
}
|
162
|
+
var emailDomain = emailDomainWithZone.substring(0, emailDomainWithZone.length - (emailZone.length + 1));
|
163
|
+
var hostValidation = validateWithLengthOptions(emailHost, options, 'Host');
|
164
|
+
if (!hostValidation.isValid) {
|
165
|
+
return hostValidation;
|
166
|
+
}
|
167
|
+
var domainValidation = validateWithLengthOptions(emailDomain, options, 'Domain');
|
168
|
+
if (!domainValidation.isValid) {
|
169
|
+
return domainValidation;
|
170
|
+
}
|
171
|
+
var zoneValidation = validateWithLengthOptions(emailZone, options, 'Zone');
|
172
|
+
if (!zoneValidation.isValid) {
|
173
|
+
return zoneValidation;
|
174
|
+
}
|
175
|
+
var domainWithZoneValidation = validateWithDomainsLists(emailDomainWithZone, options);
|
176
|
+
if (!domainWithZoneValidation.isValid) {
|
177
|
+
return domainWithZoneValidation;
|
178
|
+
}
|
179
|
+
return {
|
180
|
+
isValid: true
|
181
|
+
};
|
182
|
+
};
|
183
|
+
var validatePassword = function validatePassword(password, options) {
|
184
|
+
var _options$minLength4, _options$maxLength4, _options$includeUpper, _options$includeLower, _options$includeDigit, _options$includeSpeci;
|
185
|
+
if (!password || !options) {
|
186
|
+
return {
|
187
|
+
isValid: true
|
188
|
+
};
|
189
|
+
}
|
190
|
+
if ((_options$minLength4 = options.minLength) !== null && _options$minLength4 !== void 0 && _options$minLength4.value && password.length < options.minLength.value) {
|
191
|
+
var _options$minLength5;
|
192
|
+
return {
|
193
|
+
isValid: false,
|
194
|
+
errorMessage: ((_options$minLength5 = options.minLength) === null || _options$minLength5 === void 0 ? void 0 : _options$minLength5.errorMessage) || 'Password is too short'
|
195
|
+
};
|
196
|
+
}
|
197
|
+
if ((_options$maxLength4 = options.maxLength) !== null && _options$maxLength4 !== void 0 && _options$maxLength4.value && password.length > options.maxLength.value) {
|
198
|
+
var _options$maxLength5;
|
199
|
+
return {
|
200
|
+
isValid: false,
|
201
|
+
errorMessage: ((_options$maxLength5 = options.maxLength) === null || _options$maxLength5 === void 0 ? void 0 : _options$maxLength5.errorMessage) || 'Password is too long'
|
202
|
+
};
|
203
|
+
}
|
204
|
+
var lowercasedPassword = password.toLowerCase();
|
205
|
+
var uppercasedPassword = password.toUpperCase();
|
206
|
+
if ((_options$includeUpper = options.includeUppercase) !== null && _options$includeUpper !== void 0 && _options$includeUpper.value && password === lowercasedPassword) {
|
207
|
+
var _options$includeUpper2;
|
208
|
+
return {
|
209
|
+
isValid: false,
|
210
|
+
errorMessage: ((_options$includeUpper2 = options.includeUppercase) === null || _options$includeUpper2 === void 0 ? void 0 : _options$includeUpper2.errorMessage) || 'Password must contain at least one uppercase letter'
|
211
|
+
};
|
212
|
+
}
|
213
|
+
if ((_options$includeLower = options.includeLowercase) !== null && _options$includeLower !== void 0 && _options$includeLower.value && password === uppercasedPassword) {
|
214
|
+
var _options$includeLower2;
|
215
|
+
return {
|
216
|
+
isValid: false,
|
217
|
+
errorMessage: ((_options$includeLower2 = options.includeLowercase) === null || _options$includeLower2 === void 0 ? void 0 : _options$includeLower2.errorMessage) || 'Password must contain at least one lowercase letter'
|
218
|
+
};
|
219
|
+
}
|
220
|
+
if ((_options$includeDigit = options.includeDigits) !== null && _options$includeDigit !== void 0 && _options$includeDigit.value && !/\d/.test(password)) {
|
221
|
+
var _options$includeDigit2;
|
222
|
+
return {
|
223
|
+
isValid: false,
|
224
|
+
errorMessage: ((_options$includeDigit2 = options.includeDigits) === null || _options$includeDigit2 === void 0 ? void 0 : _options$includeDigit2.errorMessage) || 'Password must contain digits'
|
225
|
+
};
|
226
|
+
}
|
227
|
+
if ((_options$includeSpeci = options.includeSpecialSymbols) !== null && _options$includeSpeci !== void 0 && _options$includeSpeci.value && !_utils.constants.specialCharacters.test(password)) {
|
228
|
+
var _options$includeSpeci2;
|
229
|
+
return {
|
230
|
+
isValid: false,
|
231
|
+
errorMessage: ((_options$includeSpeci2 = options.includeSpecialSymbols) === null || _options$includeSpeci2 === void 0 ? void 0 : _options$includeSpeci2.errorMessage) || 'Password must contain special characters'
|
232
|
+
};
|
233
|
+
}
|
234
|
+
return {
|
235
|
+
isValid: true
|
236
|
+
};
|
237
|
+
};
|
238
|
+
var validationVariants = {
|
239
|
+
email: validateEmail,
|
240
|
+
password: validatePassword
|
241
|
+
};
|
242
|
+
var useValidation = exports.useValidation = function useValidation(_ref) {
|
243
|
+
var validationType = _ref.validationType,
|
244
|
+
options = _ref.options,
|
245
|
+
onValidate = _ref.onValidate;
|
246
|
+
var handleValidationBlur = function handleValidationBlur(event) {
|
247
|
+
if (!validationType) {
|
248
|
+
return;
|
249
|
+
}
|
250
|
+
var validationResult = validationVariants[validationType](event.target.value, options);
|
251
|
+
onValidate === null || onValidate === void 0 || onValidate(validationResult);
|
252
|
+
};
|
253
|
+
var handleValidationKeyDown = function handleValidationKeyDown(event) {
|
254
|
+
if (!validationType) {
|
255
|
+
return;
|
256
|
+
}
|
257
|
+
if (event.keyCode === _utils.constants.keyCodes.Enter) {
|
258
|
+
event.preventDefault();
|
259
|
+
var _ref2 = event.target,
|
260
|
+
value = _ref2.value;
|
261
|
+
var validationResult = validationVariants[validationType](value, options);
|
262
|
+
onValidate === null || onValidate === void 0 || onValidate(validationResult);
|
263
|
+
}
|
264
|
+
};
|
265
|
+
(0, _react.useEffect)(function () {
|
266
|
+
validateLenghtOptions(options);
|
267
|
+
if (validationType === 'email') {
|
268
|
+
var _whitelistDomains, _blacklistDomains;
|
269
|
+
validateEmailDomainsLists(options === null || options === void 0 || (_whitelistDomains = options.whitelistDomains) === null || _whitelistDomains === void 0 ? void 0 : _whitelistDomains.value, (_blacklistDomains = options.blacklistDomains) === null || _blacklistDomains === void 0 ? void 0 : _blacklistDomains.value);
|
270
|
+
}
|
271
|
+
}, []);
|
272
|
+
return {
|
273
|
+
handleValidationBlur: handleValidationBlur,
|
274
|
+
handleValidationKeyDown: handleValidationKeyDown
|
275
|
+
};
|
276
|
+
};
|