@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.
@@ -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;
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
3
2
  import { ThemeColors } from 'theme';
4
3
  export declare type PdfDocumentProps = {
5
4
  source: string;