react-better-html 1.1.286 → 1.1.288
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/dist/index.d.mts +103 -97
- package/dist/index.d.ts +103 -97
- package/dist/index.js +142 -150
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +142 -150
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig,
|
|
1
|
+
import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, PartialRecord, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PickValue } from 'react-better-core';
|
|
2
2
|
export { API, APIConfigItem, APIEndpointConfig, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ComponentProps, ReactNode } from 'react';
|
|
@@ -104,6 +104,7 @@ type InputFieldProps = {
|
|
|
104
104
|
labelGap?: React.CSSProperties["gap"];
|
|
105
105
|
errorText?: string;
|
|
106
106
|
infoText?: string;
|
|
107
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
107
108
|
leftIcon?: IconName | AnyOtherString;
|
|
108
109
|
rightIcon?: IconName | AnyOtherString;
|
|
109
110
|
prefix?: React.ReactNode;
|
|
@@ -319,6 +320,7 @@ type DropdownProps<Value = unknown, Data = unknown> = {
|
|
|
319
320
|
labelGap?: React.CSSProperties["gap"];
|
|
320
321
|
errorText?: string;
|
|
321
322
|
infoText?: string;
|
|
323
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
322
324
|
/** @default false */
|
|
323
325
|
required?: boolean;
|
|
324
326
|
name?: string;
|
|
@@ -387,6 +389,7 @@ type InternalToggleInputProps<Value> = {
|
|
|
387
389
|
textAdvanced?: React.ReactNode;
|
|
388
390
|
errorText?: string;
|
|
389
391
|
infoText?: string;
|
|
392
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
390
393
|
/** @default 26 */
|
|
391
394
|
size?: number;
|
|
392
395
|
value?: Value;
|
|
@@ -466,6 +469,102 @@ declare const _default$2: ImageComponent & {
|
|
|
466
469
|
profileImage: typeof Image.profileImage;
|
|
467
470
|
};
|
|
468
471
|
|
|
472
|
+
declare function usePageResize(): {
|
|
473
|
+
width: number;
|
|
474
|
+
height: number;
|
|
475
|
+
};
|
|
476
|
+
declare function usePageScroll(): {
|
|
477
|
+
scrollX: number;
|
|
478
|
+
scrollY: number;
|
|
479
|
+
};
|
|
480
|
+
declare function useMediaQuery(): {
|
|
481
|
+
screenWidth: number;
|
|
482
|
+
size320: boolean;
|
|
483
|
+
size400: boolean;
|
|
484
|
+
size500: boolean;
|
|
485
|
+
size600: boolean;
|
|
486
|
+
size700: boolean;
|
|
487
|
+
size800: boolean;
|
|
488
|
+
size900: boolean;
|
|
489
|
+
size1000: boolean;
|
|
490
|
+
size1100: boolean;
|
|
491
|
+
size1200: boolean;
|
|
492
|
+
size1300: boolean;
|
|
493
|
+
size1400: boolean;
|
|
494
|
+
size1500: boolean;
|
|
495
|
+
size1600: boolean;
|
|
496
|
+
};
|
|
497
|
+
type FormFieldValue = string | number | boolean;
|
|
498
|
+
declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
|
|
499
|
+
defaultValues: FormFields;
|
|
500
|
+
requiredFields?: (keyof FormFields)[];
|
|
501
|
+
onSubmit?: (values: FormFields) => void | Promise<void>;
|
|
502
|
+
validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
503
|
+
}): {
|
|
504
|
+
values: FormFields;
|
|
505
|
+
errors: Partial<Record<keyof FormFields, string>>;
|
|
506
|
+
isSubmitting: boolean;
|
|
507
|
+
setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
|
|
508
|
+
setFieldsValue: (values: Partial<FormFields>) => void;
|
|
509
|
+
getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
|
|
510
|
+
getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
|
|
511
|
+
getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
|
|
512
|
+
getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
513
|
+
getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
514
|
+
getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
515
|
+
focusField: (field: keyof FormFields) => void;
|
|
516
|
+
inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
|
|
517
|
+
textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
|
|
518
|
+
dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
|
|
519
|
+
toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
|
|
520
|
+
validate: () => {};
|
|
521
|
+
onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
522
|
+
reset: () => void;
|
|
523
|
+
requiredFields: (keyof FormFields)[] | undefined;
|
|
524
|
+
isDirty: boolean;
|
|
525
|
+
isValid: boolean;
|
|
526
|
+
canSubmit: boolean;
|
|
527
|
+
};
|
|
528
|
+
declare function useUrlQuery(): {
|
|
529
|
+
setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
|
|
530
|
+
getQuery: (name: string) => string | null;
|
|
531
|
+
removeQuery: (name: string, keepHistory?: boolean) => void;
|
|
532
|
+
};
|
|
533
|
+
|
|
534
|
+
type FormProps = {
|
|
535
|
+
form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
|
|
536
|
+
name?: string;
|
|
537
|
+
submitButtonText?: string;
|
|
538
|
+
submitButtonLoaderName?: LoaderName | AnyOtherString;
|
|
539
|
+
submitButtonIsLoading?: boolean;
|
|
540
|
+
submitButtonId?: string;
|
|
541
|
+
/** @default false */
|
|
542
|
+
submitButtonIsDisabled?: boolean;
|
|
543
|
+
cancelButtonText?: string;
|
|
544
|
+
cancelButtonLoaderName?: LoaderName | AnyOtherString;
|
|
545
|
+
cancelButtonIsLoading?: boolean;
|
|
546
|
+
cancelButtonId?: string;
|
|
547
|
+
/** @default false */
|
|
548
|
+
cancelButtonIsDisabled?: boolean;
|
|
549
|
+
/** @default "right" */
|
|
550
|
+
actionButtonsLocation?: "left" | "center" | "right";
|
|
551
|
+
gap?: React.CSSProperties["gap"];
|
|
552
|
+
/** @default false */
|
|
553
|
+
isDestructive?: boolean;
|
|
554
|
+
/** @default false */
|
|
555
|
+
withDividers?: boolean;
|
|
556
|
+
renderActionButtons?: React.ReactNode;
|
|
557
|
+
onClickCancel?: () => void;
|
|
558
|
+
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
559
|
+
id?: React.ComponentProps<"form">["id"];
|
|
560
|
+
children?: React.ReactNode;
|
|
561
|
+
} & ComponentMarginProps;
|
|
562
|
+
type FormComponentType = {
|
|
563
|
+
(props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
|
|
564
|
+
};
|
|
565
|
+
declare const FormComponent: FormComponentType;
|
|
566
|
+
declare const Form: typeof FormComponent & {};
|
|
567
|
+
|
|
469
568
|
type ComponentStyleConfig<ComponentProps, Subcomponents extends string> = {
|
|
470
569
|
[key in Subcomponents]?: Partial<ComponentProps>;
|
|
471
570
|
};
|
|
@@ -515,6 +614,9 @@ type BetterHtmlConfig = {
|
|
|
515
614
|
chip?: {
|
|
516
615
|
style?: ComponentStyleConfig<ChipProps, "default" | "colored">;
|
|
517
616
|
};
|
|
617
|
+
form?: {
|
|
618
|
+
style?: ComponentStyleConfig<FormProps, "default">;
|
|
619
|
+
};
|
|
518
620
|
};
|
|
519
621
|
};
|
|
520
622
|
|
|
@@ -595,68 +697,6 @@ declare const isMobileDevice: boolean;
|
|
|
595
697
|
|
|
596
698
|
type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
|
|
597
699
|
|
|
598
|
-
declare function usePageResize(): {
|
|
599
|
-
width: number;
|
|
600
|
-
height: number;
|
|
601
|
-
};
|
|
602
|
-
declare function usePageScroll(): {
|
|
603
|
-
scrollX: number;
|
|
604
|
-
scrollY: number;
|
|
605
|
-
};
|
|
606
|
-
declare function useMediaQuery(): {
|
|
607
|
-
screenWidth: number;
|
|
608
|
-
size320: boolean;
|
|
609
|
-
size400: boolean;
|
|
610
|
-
size500: boolean;
|
|
611
|
-
size600: boolean;
|
|
612
|
-
size700: boolean;
|
|
613
|
-
size800: boolean;
|
|
614
|
-
size900: boolean;
|
|
615
|
-
size1000: boolean;
|
|
616
|
-
size1100: boolean;
|
|
617
|
-
size1200: boolean;
|
|
618
|
-
size1300: boolean;
|
|
619
|
-
size1400: boolean;
|
|
620
|
-
size1500: boolean;
|
|
621
|
-
size1600: boolean;
|
|
622
|
-
};
|
|
623
|
-
type FormFieldValue = string | number | boolean;
|
|
624
|
-
declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
|
|
625
|
-
defaultValues: FormFields;
|
|
626
|
-
requiredFields?: (keyof FormFields)[];
|
|
627
|
-
onSubmit?: (values: FormFields) => void | Promise<void>;
|
|
628
|
-
validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
629
|
-
}): {
|
|
630
|
-
values: FormFields;
|
|
631
|
-
errors: Partial<Record<keyof FormFields, string>>;
|
|
632
|
-
isSubmitting: boolean;
|
|
633
|
-
setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
|
|
634
|
-
setFieldsValue: (values: Partial<FormFields>) => void;
|
|
635
|
-
getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
|
|
636
|
-
getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
|
|
637
|
-
getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
|
|
638
|
-
getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
639
|
-
getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
640
|
-
getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
641
|
-
focusField: (field: keyof FormFields) => void;
|
|
642
|
-
inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
|
|
643
|
-
textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
|
|
644
|
-
dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
|
|
645
|
-
toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
|
|
646
|
-
validate: () => {};
|
|
647
|
-
onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
648
|
-
reset: () => void;
|
|
649
|
-
requiredFields: (keyof FormFields)[] | undefined;
|
|
650
|
-
isDirty: boolean;
|
|
651
|
-
isValid: boolean;
|
|
652
|
-
canSubmit: boolean;
|
|
653
|
-
};
|
|
654
|
-
declare function useUrlQuery(): {
|
|
655
|
-
setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
|
|
656
|
-
getQuery: (name: string) => string | null;
|
|
657
|
-
removeQuery: (name: string, keepHistory?: boolean) => void;
|
|
658
|
-
};
|
|
659
|
-
|
|
660
700
|
declare const getBrowser: () => BrowserName | undefined;
|
|
661
701
|
declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
662
702
|
|
|
@@ -839,40 +879,6 @@ declare const PageHolder: typeof PageHolderComponent & {
|
|
|
839
879
|
center: typeof PageHolderComponent.center;
|
|
840
880
|
};
|
|
841
881
|
|
|
842
|
-
type FormProps = {
|
|
843
|
-
form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
|
|
844
|
-
name?: string;
|
|
845
|
-
submitButtonText?: string;
|
|
846
|
-
submitButtonLoaderName?: LoaderName | AnyOtherString;
|
|
847
|
-
submitButtonIsLoading?: boolean;
|
|
848
|
-
submitButtonId?: string;
|
|
849
|
-
/** @default false */
|
|
850
|
-
submitButtonIsDisabled?: boolean;
|
|
851
|
-
cancelButtonText?: string;
|
|
852
|
-
cancelButtonLoaderName?: LoaderName | AnyOtherString;
|
|
853
|
-
cancelButtonIsLoading?: boolean;
|
|
854
|
-
cancelButtonId?: string;
|
|
855
|
-
/** @default false */
|
|
856
|
-
cancelButtonIsDisabled?: boolean;
|
|
857
|
-
/** @default "right" */
|
|
858
|
-
actionButtonsLocation?: "left" | "center" | "right";
|
|
859
|
-
gap?: React.CSSProperties["gap"];
|
|
860
|
-
/** @default false */
|
|
861
|
-
isDestructive?: boolean;
|
|
862
|
-
/** @default false */
|
|
863
|
-
withDividers?: boolean;
|
|
864
|
-
renderActionButtons?: React.ReactNode;
|
|
865
|
-
onClickCancel?: () => void;
|
|
866
|
-
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
867
|
-
id?: React.ComponentProps<"form">["id"];
|
|
868
|
-
children?: React.ReactNode;
|
|
869
|
-
} & ComponentMarginProps;
|
|
870
|
-
type FormComponentType = {
|
|
871
|
-
(props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
|
|
872
|
-
};
|
|
873
|
-
declare const FormComponent: FormComponentType;
|
|
874
|
-
declare const Form: typeof FormComponent & {};
|
|
875
|
-
|
|
876
882
|
type FormRowProps = {
|
|
877
883
|
oneItemOnly?: boolean;
|
|
878
884
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig,
|
|
1
|
+
import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, PartialRecord, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PickValue } from 'react-better-core';
|
|
2
2
|
export { API, APIConfigItem, APIEndpointConfig, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ComponentProps, ReactNode } from 'react';
|
|
@@ -104,6 +104,7 @@ type InputFieldProps = {
|
|
|
104
104
|
labelGap?: React.CSSProperties["gap"];
|
|
105
105
|
errorText?: string;
|
|
106
106
|
infoText?: string;
|
|
107
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
107
108
|
leftIcon?: IconName | AnyOtherString;
|
|
108
109
|
rightIcon?: IconName | AnyOtherString;
|
|
109
110
|
prefix?: React.ReactNode;
|
|
@@ -319,6 +320,7 @@ type DropdownProps<Value = unknown, Data = unknown> = {
|
|
|
319
320
|
labelGap?: React.CSSProperties["gap"];
|
|
320
321
|
errorText?: string;
|
|
321
322
|
infoText?: string;
|
|
323
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
322
324
|
/** @default false */
|
|
323
325
|
required?: boolean;
|
|
324
326
|
name?: string;
|
|
@@ -387,6 +389,7 @@ type InternalToggleInputProps<Value> = {
|
|
|
387
389
|
textAdvanced?: React.ReactNode;
|
|
388
390
|
errorText?: string;
|
|
389
391
|
infoText?: string;
|
|
392
|
+
infoTextColor?: React.CSSProperties["color"];
|
|
390
393
|
/** @default 26 */
|
|
391
394
|
size?: number;
|
|
392
395
|
value?: Value;
|
|
@@ -466,6 +469,102 @@ declare const _default$2: ImageComponent & {
|
|
|
466
469
|
profileImage: typeof Image.profileImage;
|
|
467
470
|
};
|
|
468
471
|
|
|
472
|
+
declare function usePageResize(): {
|
|
473
|
+
width: number;
|
|
474
|
+
height: number;
|
|
475
|
+
};
|
|
476
|
+
declare function usePageScroll(): {
|
|
477
|
+
scrollX: number;
|
|
478
|
+
scrollY: number;
|
|
479
|
+
};
|
|
480
|
+
declare function useMediaQuery(): {
|
|
481
|
+
screenWidth: number;
|
|
482
|
+
size320: boolean;
|
|
483
|
+
size400: boolean;
|
|
484
|
+
size500: boolean;
|
|
485
|
+
size600: boolean;
|
|
486
|
+
size700: boolean;
|
|
487
|
+
size800: boolean;
|
|
488
|
+
size900: boolean;
|
|
489
|
+
size1000: boolean;
|
|
490
|
+
size1100: boolean;
|
|
491
|
+
size1200: boolean;
|
|
492
|
+
size1300: boolean;
|
|
493
|
+
size1400: boolean;
|
|
494
|
+
size1500: boolean;
|
|
495
|
+
size1600: boolean;
|
|
496
|
+
};
|
|
497
|
+
type FormFieldValue = string | number | boolean;
|
|
498
|
+
declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
|
|
499
|
+
defaultValues: FormFields;
|
|
500
|
+
requiredFields?: (keyof FormFields)[];
|
|
501
|
+
onSubmit?: (values: FormFields) => void | Promise<void>;
|
|
502
|
+
validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
503
|
+
}): {
|
|
504
|
+
values: FormFields;
|
|
505
|
+
errors: Partial<Record<keyof FormFields, string>>;
|
|
506
|
+
isSubmitting: boolean;
|
|
507
|
+
setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
|
|
508
|
+
setFieldsValue: (values: Partial<FormFields>) => void;
|
|
509
|
+
getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
|
|
510
|
+
getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
|
|
511
|
+
getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
|
|
512
|
+
getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
513
|
+
getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
514
|
+
getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
515
|
+
focusField: (field: keyof FormFields) => void;
|
|
516
|
+
inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
|
|
517
|
+
textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
|
|
518
|
+
dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
|
|
519
|
+
toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
|
|
520
|
+
validate: () => {};
|
|
521
|
+
onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
522
|
+
reset: () => void;
|
|
523
|
+
requiredFields: (keyof FormFields)[] | undefined;
|
|
524
|
+
isDirty: boolean;
|
|
525
|
+
isValid: boolean;
|
|
526
|
+
canSubmit: boolean;
|
|
527
|
+
};
|
|
528
|
+
declare function useUrlQuery(): {
|
|
529
|
+
setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
|
|
530
|
+
getQuery: (name: string) => string | null;
|
|
531
|
+
removeQuery: (name: string, keepHistory?: boolean) => void;
|
|
532
|
+
};
|
|
533
|
+
|
|
534
|
+
type FormProps = {
|
|
535
|
+
form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
|
|
536
|
+
name?: string;
|
|
537
|
+
submitButtonText?: string;
|
|
538
|
+
submitButtonLoaderName?: LoaderName | AnyOtherString;
|
|
539
|
+
submitButtonIsLoading?: boolean;
|
|
540
|
+
submitButtonId?: string;
|
|
541
|
+
/** @default false */
|
|
542
|
+
submitButtonIsDisabled?: boolean;
|
|
543
|
+
cancelButtonText?: string;
|
|
544
|
+
cancelButtonLoaderName?: LoaderName | AnyOtherString;
|
|
545
|
+
cancelButtonIsLoading?: boolean;
|
|
546
|
+
cancelButtonId?: string;
|
|
547
|
+
/** @default false */
|
|
548
|
+
cancelButtonIsDisabled?: boolean;
|
|
549
|
+
/** @default "right" */
|
|
550
|
+
actionButtonsLocation?: "left" | "center" | "right";
|
|
551
|
+
gap?: React.CSSProperties["gap"];
|
|
552
|
+
/** @default false */
|
|
553
|
+
isDestructive?: boolean;
|
|
554
|
+
/** @default false */
|
|
555
|
+
withDividers?: boolean;
|
|
556
|
+
renderActionButtons?: React.ReactNode;
|
|
557
|
+
onClickCancel?: () => void;
|
|
558
|
+
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
559
|
+
id?: React.ComponentProps<"form">["id"];
|
|
560
|
+
children?: React.ReactNode;
|
|
561
|
+
} & ComponentMarginProps;
|
|
562
|
+
type FormComponentType = {
|
|
563
|
+
(props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
|
|
564
|
+
};
|
|
565
|
+
declare const FormComponent: FormComponentType;
|
|
566
|
+
declare const Form: typeof FormComponent & {};
|
|
567
|
+
|
|
469
568
|
type ComponentStyleConfig<ComponentProps, Subcomponents extends string> = {
|
|
470
569
|
[key in Subcomponents]?: Partial<ComponentProps>;
|
|
471
570
|
};
|
|
@@ -515,6 +614,9 @@ type BetterHtmlConfig = {
|
|
|
515
614
|
chip?: {
|
|
516
615
|
style?: ComponentStyleConfig<ChipProps, "default" | "colored">;
|
|
517
616
|
};
|
|
617
|
+
form?: {
|
|
618
|
+
style?: ComponentStyleConfig<FormProps, "default">;
|
|
619
|
+
};
|
|
518
620
|
};
|
|
519
621
|
};
|
|
520
622
|
|
|
@@ -595,68 +697,6 @@ declare const isMobileDevice: boolean;
|
|
|
595
697
|
|
|
596
698
|
type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
|
|
597
699
|
|
|
598
|
-
declare function usePageResize(): {
|
|
599
|
-
width: number;
|
|
600
|
-
height: number;
|
|
601
|
-
};
|
|
602
|
-
declare function usePageScroll(): {
|
|
603
|
-
scrollX: number;
|
|
604
|
-
scrollY: number;
|
|
605
|
-
};
|
|
606
|
-
declare function useMediaQuery(): {
|
|
607
|
-
screenWidth: number;
|
|
608
|
-
size320: boolean;
|
|
609
|
-
size400: boolean;
|
|
610
|
-
size500: boolean;
|
|
611
|
-
size600: boolean;
|
|
612
|
-
size700: boolean;
|
|
613
|
-
size800: boolean;
|
|
614
|
-
size900: boolean;
|
|
615
|
-
size1000: boolean;
|
|
616
|
-
size1100: boolean;
|
|
617
|
-
size1200: boolean;
|
|
618
|
-
size1300: boolean;
|
|
619
|
-
size1400: boolean;
|
|
620
|
-
size1500: boolean;
|
|
621
|
-
size1600: boolean;
|
|
622
|
-
};
|
|
623
|
-
type FormFieldValue = string | number | boolean;
|
|
624
|
-
declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
|
|
625
|
-
defaultValues: FormFields;
|
|
626
|
-
requiredFields?: (keyof FormFields)[];
|
|
627
|
-
onSubmit?: (values: FormFields) => void | Promise<void>;
|
|
628
|
-
validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
629
|
-
}): {
|
|
630
|
-
values: FormFields;
|
|
631
|
-
errors: Partial<Record<keyof FormFields, string>>;
|
|
632
|
-
isSubmitting: boolean;
|
|
633
|
-
setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
|
|
634
|
-
setFieldsValue: (values: Partial<FormFields>) => void;
|
|
635
|
-
getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
|
|
636
|
-
getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
|
|
637
|
-
getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
|
|
638
|
-
getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
639
|
-
getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
640
|
-
getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
|
|
641
|
-
focusField: (field: keyof FormFields) => void;
|
|
642
|
-
inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
|
|
643
|
-
textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
|
|
644
|
-
dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
|
|
645
|
-
toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
|
|
646
|
-
validate: () => {};
|
|
647
|
-
onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
|
648
|
-
reset: () => void;
|
|
649
|
-
requiredFields: (keyof FormFields)[] | undefined;
|
|
650
|
-
isDirty: boolean;
|
|
651
|
-
isValid: boolean;
|
|
652
|
-
canSubmit: boolean;
|
|
653
|
-
};
|
|
654
|
-
declare function useUrlQuery(): {
|
|
655
|
-
setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
|
|
656
|
-
getQuery: (name: string) => string | null;
|
|
657
|
-
removeQuery: (name: string, keepHistory?: boolean) => void;
|
|
658
|
-
};
|
|
659
|
-
|
|
660
700
|
declare const getBrowser: () => BrowserName | undefined;
|
|
661
701
|
declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
|
|
662
702
|
|
|
@@ -839,40 +879,6 @@ declare const PageHolder: typeof PageHolderComponent & {
|
|
|
839
879
|
center: typeof PageHolderComponent.center;
|
|
840
880
|
};
|
|
841
881
|
|
|
842
|
-
type FormProps = {
|
|
843
|
-
form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
|
|
844
|
-
name?: string;
|
|
845
|
-
submitButtonText?: string;
|
|
846
|
-
submitButtonLoaderName?: LoaderName | AnyOtherString;
|
|
847
|
-
submitButtonIsLoading?: boolean;
|
|
848
|
-
submitButtonId?: string;
|
|
849
|
-
/** @default false */
|
|
850
|
-
submitButtonIsDisabled?: boolean;
|
|
851
|
-
cancelButtonText?: string;
|
|
852
|
-
cancelButtonLoaderName?: LoaderName | AnyOtherString;
|
|
853
|
-
cancelButtonIsLoading?: boolean;
|
|
854
|
-
cancelButtonId?: string;
|
|
855
|
-
/** @default false */
|
|
856
|
-
cancelButtonIsDisabled?: boolean;
|
|
857
|
-
/** @default "right" */
|
|
858
|
-
actionButtonsLocation?: "left" | "center" | "right";
|
|
859
|
-
gap?: React.CSSProperties["gap"];
|
|
860
|
-
/** @default false */
|
|
861
|
-
isDestructive?: boolean;
|
|
862
|
-
/** @default false */
|
|
863
|
-
withDividers?: boolean;
|
|
864
|
-
renderActionButtons?: React.ReactNode;
|
|
865
|
-
onClickCancel?: () => void;
|
|
866
|
-
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
867
|
-
id?: React.ComponentProps<"form">["id"];
|
|
868
|
-
children?: React.ReactNode;
|
|
869
|
-
} & ComponentMarginProps;
|
|
870
|
-
type FormComponentType = {
|
|
871
|
-
(props: ComponentPropWithRef<HTMLFormElement, FormProps>): React.ReactElement;
|
|
872
|
-
};
|
|
873
|
-
declare const FormComponent: FormComponentType;
|
|
874
|
-
declare const Form: typeof FormComponent & {};
|
|
875
|
-
|
|
876
882
|
type FormRowProps = {
|
|
877
883
|
oneItemOnly?: boolean;
|
|
878
884
|
/**
|