@zealicsolutions/web-ui 0.3.13 → 0.3.15
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.js +27 -27
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/src/atoms/Input/Input.d.ts +3 -1
- package/dist/cjs/src/atoms/Input/Input.stories.d.ts +1 -1
- package/dist/cjs/src/atoms/Input/helpers.d.ts +18 -0
- package/dist/cjs/src/atoms/Select/Select.d.ts +3 -1
- package/dist/cjs/src/fieldsConfiguration/types.d.ts +1 -1
- package/dist/cjs/src/helpers/validations.d.ts +7 -0
- package/dist/cjs/src/molecules/PdfDocument/PdfDocument.d.ts +0 -1
- package/dist/esm/index.js +27 -27
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/src/atoms/Input/Input.d.ts +3 -1
- package/dist/esm/src/atoms/Input/Input.stories.d.ts +1 -1
- package/dist/esm/src/atoms/Input/helpers.d.ts +18 -0
- package/dist/esm/src/atoms/Select/Select.d.ts +3 -1
- package/dist/esm/src/fieldsConfiguration/types.d.ts +1 -1
- package/dist/esm/src/helpers/validations.d.ts +7 -0
- package/dist/esm/src/molecules/PdfDocument/PdfDocument.d.ts +0 -1
- package/dist/index.d.ts +63 -54
- package/package.json +9 -5
@@ -3,6 +3,7 @@ import { InputFieldTypes } from 'fieldsConfiguration/types';
|
|
3
3
|
import React from 'react';
|
4
4
|
import { ThemeColors } from 'theme/types';
|
5
5
|
import type { Callback, StylesType } from 'typescript';
|
6
|
+
import { MaskConfig } from './helpers';
|
6
7
|
export declare type InputFieldInternalConfigProps = Partial<{
|
7
8
|
textColor: ThemeColors | string;
|
8
9
|
textFontSize: number;
|
@@ -31,5 +32,6 @@ export declare type InputProps = {
|
|
31
32
|
onChange?: (value: string) => void;
|
32
33
|
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
33
34
|
internalConfig?: InputFieldInternalConfigProps;
|
35
|
+
config?: MaskConfig;
|
34
36
|
};
|
35
|
-
export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
|
37
|
+
export declare const Input: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;
|
@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/react';
|
|
3
3
|
import { InputProps } from './Input';
|
4
4
|
declare const _default: {
|
5
5
|
title: string;
|
6
|
-
component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, ...rest }: InputProps) => JSX.Element;
|
6
|
+
component: ({ value, leftIcon, rightIcon, onChange, onBlur, disabled, isError, placeholder, isEditMode, type, internalConfig, config, ...rest }: InputProps) => JSX.Element;
|
7
7
|
};
|
8
8
|
export default _default;
|
9
9
|
export declare const Input: StoryFn<InputProps>;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { MaskedInputProps } from 'react-text-mask';
|
2
|
+
import { HTMLInputTypeAttribute } from 'react';
|
3
|
+
import { ThemeColors } from 'theme';
|
4
|
+
import { InputProps } from 'atoms';
|
5
|
+
import { InputFieldTypes } from '../../fieldsConfiguration';
|
6
|
+
export declare type MaskConfig = Partial<{
|
7
|
+
maskPlaceholder: string;
|
8
|
+
dataModelFieldType: InputFieldTypes;
|
9
|
+
maskPattern: Array<string | RegExp>;
|
10
|
+
}>;
|
11
|
+
export declare const getSpecificInputProps: (type: InputFieldTypes) => {
|
12
|
+
type?: HTMLInputTypeAttribute | undefined;
|
13
|
+
inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
14
|
+
};
|
15
|
+
export declare const getMaskInputProps: (type?: InputFieldTypes, config?: MaskConfig) => Pick<MaskedInputProps, 'pipe' | 'mask' | 'placeholder' | 'keepCharPositions'>;
|
16
|
+
export declare const getInputIconColor: ({ isEditMode, isFocused, isError, disabled, }: Pick<InputProps, "disabled" | "isError" | "isEditMode"> & {
|
17
|
+
isFocused: boolean;
|
18
|
+
}) => ThemeColors;
|
@@ -1,10 +1,12 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { ThemeColors } from 'theme';
|
3
|
-
import type { Callback, StylesType } from 'typescript';
|
3
|
+
import type { AnyObject, Callback, StylesType } from 'typescript';
|
4
4
|
import { RefCallBack } from 'react-hook-form/dist/types';
|
5
5
|
export declare type SelectOption = {
|
6
6
|
id: string;
|
7
7
|
label: string;
|
8
|
+
value?: string;
|
9
|
+
config?: AnyObject;
|
8
10
|
};
|
9
11
|
export declare type SelectInternalConfigurationOptions = {
|
10
12
|
placeholderTextColor: ThemeColors | string;
|
@@ -2,7 +2,7 @@
|
|
2
2
|
import { ControllerProps } from 'react-hook-form';
|
3
3
|
import { SelectOption } from 'atoms';
|
4
4
|
import { InputFieldProps, SelectFieldProps } from 'molecules';
|
5
|
-
export declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'any';
|
5
|
+
export declare type InputFieldTypes = 'phone-number' | 'text' | 'email' | 'password' | 'numerical' | 'month_year_date' | 'day_month_year_date' | 'month_day_year_date' | 'us_zip_code' | 'any';
|
6
6
|
export declare type FieldTypes = 'input' | 'select' | 'checkbox';
|
7
7
|
export declare type UIField<T = string> = (UIInputField & UISelectField & UICheckboxField) & {
|
8
8
|
name: T;
|
@@ -5,4 +5,11 @@ export declare const phoneNumberValidation: RegExp;
|
|
5
5
|
export declare const numberValidation: RegExp;
|
6
6
|
export declare const emailValidation: RegExp;
|
7
7
|
export declare const textValidation: RegExp;
|
8
|
+
export declare const dateValidation: RegExp;
|
9
|
+
export declare const usZipCode: RegExp;
|
8
10
|
export declare const getInputValidation: (type?: InputFieldTypes) => ValidationRule<RegExp> | undefined;
|
11
|
+
export declare const postCodeMask: RegExp[];
|
12
|
+
export declare const dayMonthYearDateMask: (string | RegExp)[];
|
13
|
+
export declare const monthYearDateMask: (string | RegExp)[];
|
14
|
+
export declare const phoneNumberMask: (string | RegExp)[];
|
15
|
+
export declare const removeMaskFromString: (inputString: string) => string;
|