@gen-epix/ui-core-form 4.0.2 → 4.1.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/dist/_chunks/FileUpload.js +73 -0
- package/dist/_chunks/FileUpload.js.map +1 -0
- package/dist/_chunks/RichTextEditor.js.map +1 -1
- package/dist/components/fields/{UploadButton/UploadButton.d.ts → FileUpload/FileUpload.d.ts} +2 -2
- package/dist/components/fields/FileUpload/index.d.ts +1 -0
- package/dist/components/fields/FileUpload/index.js +2 -0
- package/dist/components/helpers/GenericForm/index.js +1 -1
- package/dist/components/helpers/GenericForm/index.js.map +1 -1
- package/dist/models/form.d.ts +3 -2
- package/dist/models/form.js.map +1 -1
- package/package.json +9 -7
- package/dist/_chunks/UploadButton.js +0 -91
- package/dist/_chunks/UploadButton.js.map +0 -1
- package/dist/components/fields/UploadButton/index.d.ts +0 -1
- package/dist/components/fields/UploadButton/index.js +0 -2
package/dist/components/fields/{UploadButton/UploadButton.d.ts → FileUpload/FileUpload.d.ts}
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { FieldValues, Path } from 'react-hook-form';
|
|
3
|
-
export type
|
|
3
|
+
export type FileUploadProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {
|
|
4
4
|
readonly accept: string;
|
|
5
5
|
readonly disabled?: boolean;
|
|
6
6
|
readonly infoMessage?: string;
|
|
@@ -12,4 +12,4 @@ export type UploadButtonProps<TFieldValues extends FieldValues, TName extends Pa
|
|
|
12
12
|
readonly required?: boolean;
|
|
13
13
|
readonly warningMessage?: string;
|
|
14
14
|
};
|
|
15
|
-
export declare const
|
|
15
|
+
export declare const FileUpload: <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({ accept, disabled, infoMessage, label, multiple, name, onChange: onChangeProp, required, warningMessage, }: FileUploadProps<TFieldValues, TName>) => ReactElement;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './FileUpload';
|
|
@@ -9,7 +9,7 @@ import { Select as s } from "../../fields/Select/index.js";
|
|
|
9
9
|
import { TextField as c } from "../../fields/TextField/index.js";
|
|
10
10
|
import { NumberField as l } from "../../fields/NumberField/index.js";
|
|
11
11
|
import { t as u } from "../../../_chunks/DatePicker.js";
|
|
12
|
-
import { t as d } from "../../../_chunks/
|
|
12
|
+
import { t as d } from "../../../_chunks/FileUpload.js";
|
|
13
13
|
import { RadioGroup as f } from "../../fields/RadioGroup/index.js";
|
|
14
14
|
import { Switch as p } from "../../fields/Switch/index.js";
|
|
15
15
|
import { Fragment as m, useCallback as h, useMemo as g } from "react";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/helpers/GenericForm/GenericForm.tsx"],"sourcesContent":["import type {\n ReactElement,\n SubmitEventHandler,\n} from 'react';\nimport {\n Fragment,\n useCallback,\n useMemo,\n} from 'react';\nimport { useTranslation } from 'react-i18next';\nimport type {\n FieldValues,\n Path,\n UseFormReturn,\n} from 'react-hook-form';\nimport { FormProvider } from 'react-hook-form';\nimport {\n Alert,\n AlertTitle,\n Box,\n Button,\n Typography,\n} from '@mui/material';\nimport type { ObjectSchema } from 'yup';\n\nimport type {\n FormFieldDefinition,\n FormGroupDefinition,\n} from '../../../models/form';\nimport { FORM_FIELD_DEFINITION_TYPE } from '../../../models/form';\nimport { FormUtil } from '../../../utils/FormUtil';\nimport { RichTextEditor } from '../../fields/RichTextEditor';\nimport { TransferList } from '../../fields/TransferList';\nimport type { AutocompleteProps } from '../../fields/Autocomplete';\nimport { Autocomplete } from '../../fields/Autocomplete';\nimport type { SelectProps } from '../../fields/Select';\nimport { Select } from '../../fields/Select';\nimport { TextField } from '../../fields/TextField';\nimport { NumberField } from '../../fields/NumberField';\nimport { DatePicker } from '../../fields/DatePicker';\nimport { UploadButton } from '../../fields/UploadButton/UploadButton';\nimport { RadioGroup } from '../../fields/RadioGroup';\nimport { Switch } from '../../fields/Switch';\nimport { useIsFormFieldRequiredFromSchema } from '../../../hooks/useIsFormFieldRequiredFromSchema';\n\nexport type GenericFormProps<TFormFields extends FieldValues> = {\n readonly defaultFormValues?: Partial<TFormFields>;\n readonly disableAll?: boolean;\n readonly formFieldDefinitions: FormFieldDefinition<TFormFields>[];\n readonly formGroupDefinitions?: FormGroupDefinition[];\n readonly formId?: string;\n readonly formMethods: UseFormReturn<TFormFields>;\n readonly onSubmit?: SubmitEventHandler<HTMLFormElement>;\n readonly renderField?: (definition: FormFieldDefinition<TFormFields>, element: ReactElement) => ReactElement;\n readonly renderGroup?: (definition: FormGroupDefinition, children: ReactElement) => ReactElement;\n readonly schema: ObjectSchema<TFormFields, TFormFields>;\n readonly wrapForm?: (children: ReactElement) => ReactElement;\n};\n\nexport const GenericForm = <TFormFields extends FieldValues>({\n disableAll,\n formFieldDefinitions,\n formGroupDefinitions,\n formId,\n formMethods,\n onSubmit,\n renderField,\n renderGroup,\n schema,\n wrapForm,\n}: GenericFormProps<TFormFields>) => {\n const { t } = useTranslation();\n\n const booleanOptions = useMemo(() => FormUtil.createBooleanOptions(t), [t]);\n\n const isFormFieldRequired = useIsFormFieldRequiredFromSchema(schema, formMethods.getValues);\n\n const renderFormFieldDefinition = useCallback((formFieldDefinition: FormFieldDefinition<TFormFields>) => {\n switch (formFieldDefinition.definition) {\n case FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE:\n return (\n <Autocomplete\n {...formFieldDefinition as AutocompleteProps<TFormFields, Path<TFormFields>, false>}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.BOOLEAN:\n return (\n <Select\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n options={booleanOptions}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.BOOLEAN_SWITCH:\n return (\n <Switch\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.DATE:\n return (\n <DatePicker\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.FILE:\n return (\n <UploadButton\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.NUMBER:\n return (\n <NumberField\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.RADIO_GROUP:\n return (\n <RadioGroup\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.RICH_TEXT:\n return (\n <RichTextEditor\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.SELECT:\n return (\n <Select\n {...formFieldDefinition as SelectProps<TFormFields, Path<TFormFields>, false>}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.SWITCH:\n return (\n <Switch\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.TEXTFIELD:\n return (\n <TextField\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.TRANSFER_LIST:\n return (\n <TransferList\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n default:\n throw Error(`Unsupported form field definition: ${formFieldDefinition.definition}`);\n }\n }, [booleanOptions, disableAll, isFormFieldRequired]);\n\n\n const renderSingleField = useCallback((formFieldDefinition: FormFieldDefinition<TFormFields>) => {\n if (renderField) {\n return (\n <Fragment key={formFieldDefinition.name}>\n {renderField(formFieldDefinition, renderFormFieldDefinition(formFieldDefinition))}\n </Fragment>\n );\n }\n return (\n <Box\n key={formFieldDefinition.name}\n sx={{\n marginY: 1,\n }}\n >\n {renderFormFieldDefinition(formFieldDefinition)}\n </Box>\n );\n }, [renderField, renderFormFieldDefinition]);\n\n const formFieldsContent = useMemo(() => {\n if (!formGroupDefinitions?.length) {\n return (\n <>\n {formFieldDefinitions.map(renderSingleField)}\n </>\n );\n }\n\n const groupFieldsMap = new Map<string, FormFieldDefinition<TFormFields>[]>();\n for (const group of formGroupDefinitions) {\n groupFieldsMap.set(group.groupKey, []);\n }\n\n const ungroupedFields: FormFieldDefinition<TFormFields>[] = [];\n for (const field of formFieldDefinitions) {\n if (field.groupKey && groupFieldsMap.has(field.groupKey)) {\n groupFieldsMap.get(field.groupKey)?.push(field);\n } else {\n ungroupedFields.push(field);\n }\n }\n\n return (\n <>\n {formGroupDefinitions.map(group => {\n const groupFields = groupFieldsMap.get(group.groupKey) ?? [];\n if (!groupFields.length) {\n return null;\n }\n const groupContent = (\n <>\n {groupFields.map(renderSingleField)}\n </>\n );\n if (renderGroup) {\n return (\n <Fragment key={group.groupKey}>\n {renderGroup(group, groupContent)}\n </Fragment>\n );\n }\n return (\n <Box\n key={group.groupKey}\n sx={{ marginY: 2 }}\n >\n <Typography variant={'subtitle1'}>\n {group.label}\n </Typography>\n {group.description && (\n <Typography\n color={'text.secondary'}\n variant={'body2'}\n >\n {group.description}\n </Typography>\n )}\n {group.messages?.map((msg) => (\n <Alert\n key={msg.message}\n severity={msg.severity}\n sx={{ '& .MuiAlert-message': { width: '100%' } }}\n >\n <AlertTitle>\n {msg.message}\n </AlertTitle>\n {msg.buttonLabel && msg.onButtonClick && (\n <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>\n <Button\n color={'inherit'}\n onClick={msg.onButtonClick}\n size={'small'}\n variant={'text'}\n >\n {msg.buttonLabel}\n </Button>\n </Box>\n )}\n </Alert>\n ))}\n {groupContent}\n </Box>\n );\n })}\n {ungroupedFields.map(renderSingleField)}\n </>\n );\n }, [formFieldDefinitions, formGroupDefinitions, renderGroup, renderSingleField]);\n\n return (\n <FormProvider {...formMethods}>\n <Box\n autoComplete={'off'}\n component={'form'}\n id={formId}\n onSubmit={onSubmit}\n >\n {wrapForm ? wrapForm(formFieldsContent) : formFieldsContent}\n </Box>\n </FormProvider>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/helpers/GenericForm/GenericForm.tsx"],"sourcesContent":["import type {\n ReactElement,\n SubmitEventHandler,\n} from 'react';\nimport {\n Fragment,\n useCallback,\n useMemo,\n} from 'react';\nimport { useTranslation } from 'react-i18next';\nimport type {\n FieldValues,\n Path,\n UseFormReturn,\n} from 'react-hook-form';\nimport { FormProvider } from 'react-hook-form';\nimport {\n Alert,\n AlertTitle,\n Box,\n Button,\n Typography,\n} from '@mui/material';\nimport type { ObjectSchema } from 'yup';\n\nimport type {\n FormFieldDefinition,\n FormGroupDefinition,\n} from '../../../models/form';\nimport { FORM_FIELD_DEFINITION_TYPE } from '../../../models/form';\nimport { FormUtil } from '../../../utils/FormUtil';\nimport { RichTextEditor } from '../../fields/RichTextEditor';\nimport { TransferList } from '../../fields/TransferList';\nimport type { AutocompleteProps } from '../../fields/Autocomplete';\nimport { Autocomplete } from '../../fields/Autocomplete';\nimport type { SelectProps } from '../../fields/Select';\nimport { Select } from '../../fields/Select';\nimport { TextField } from '../../fields/TextField';\nimport { NumberField } from '../../fields/NumberField';\nimport { DatePicker } from '../../fields/DatePicker';\nimport { FileUpload } from '../../fields/FileUpload/FileUpload';\nimport { RadioGroup } from '../../fields/RadioGroup';\nimport { Switch } from '../../fields/Switch';\nimport { useIsFormFieldRequiredFromSchema } from '../../../hooks/useIsFormFieldRequiredFromSchema';\n\nexport type GenericFormProps<TFormFields extends FieldValues> = {\n readonly defaultFormValues?: Partial<TFormFields>;\n readonly disableAll?: boolean;\n readonly formFieldDefinitions: FormFieldDefinition<TFormFields>[];\n readonly formGroupDefinitions?: FormGroupDefinition[];\n readonly formId?: string;\n readonly formMethods: UseFormReturn<TFormFields>;\n readonly onSubmit?: SubmitEventHandler<HTMLFormElement>;\n readonly renderField?: (definition: FormFieldDefinition<TFormFields>, element: ReactElement) => ReactElement;\n readonly renderGroup?: (definition: FormGroupDefinition, children: ReactElement) => ReactElement;\n readonly schema: ObjectSchema<TFormFields, TFormFields>;\n readonly wrapForm?: (children: ReactElement) => ReactElement;\n};\n\nexport const GenericForm = <TFormFields extends FieldValues>({\n disableAll,\n formFieldDefinitions,\n formGroupDefinitions,\n formId,\n formMethods,\n onSubmit,\n renderField,\n renderGroup,\n schema,\n wrapForm,\n}: GenericFormProps<TFormFields>) => {\n const { t } = useTranslation();\n\n const booleanOptions = useMemo(() => FormUtil.createBooleanOptions(t), [t]);\n\n const isFormFieldRequired = useIsFormFieldRequiredFromSchema(schema, formMethods.getValues);\n\n const renderFormFieldDefinition = useCallback((formFieldDefinition: FormFieldDefinition<TFormFields>) => {\n switch (formFieldDefinition.definition) {\n case FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE:\n return (\n <Autocomplete\n {...formFieldDefinition as AutocompleteProps<TFormFields, Path<TFormFields>, false>}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.BOOLEAN:\n return (\n <Select\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n options={booleanOptions}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.BOOLEAN_SWITCH:\n return (\n <Switch\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.DATE:\n return (\n <DatePicker\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.FILE:\n return (\n <FileUpload\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.NUMBER:\n return (\n <NumberField\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.RADIO_GROUP:\n return (\n <RadioGroup\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.RICH_TEXT:\n return (\n <RichTextEditor\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.SELECT:\n return (\n <Select\n {...formFieldDefinition as SelectProps<TFormFields, Path<TFormFields>, false>}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.SWITCH:\n return (\n <Switch\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.TEXTFIELD:\n return (\n <TextField\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n case FORM_FIELD_DEFINITION_TYPE.TRANSFER_LIST:\n return (\n <TransferList\n {...formFieldDefinition}\n disabled={formFieldDefinition.disabled || disableAll}\n required={isFormFieldRequired(formFieldDefinition.name)}\n />\n );\n default:\n throw Error(`Unsupported form field definition: ${formFieldDefinition.definition}`);\n }\n }, [booleanOptions, disableAll, isFormFieldRequired]);\n\n\n const renderSingleField = useCallback((formFieldDefinition: FormFieldDefinition<TFormFields>) => {\n if (renderField) {\n return (\n <Fragment key={formFieldDefinition.name}>\n {renderField(formFieldDefinition, renderFormFieldDefinition(formFieldDefinition))}\n </Fragment>\n );\n }\n return (\n <Box\n key={formFieldDefinition.name}\n sx={{\n marginY: 1,\n }}\n >\n {renderFormFieldDefinition(formFieldDefinition)}\n </Box>\n );\n }, [renderField, renderFormFieldDefinition]);\n\n const formFieldsContent = useMemo(() => {\n if (!formGroupDefinitions?.length) {\n return (\n <>\n {formFieldDefinitions.map(renderSingleField)}\n </>\n );\n }\n\n const groupFieldsMap = new Map<string, FormFieldDefinition<TFormFields>[]>();\n for (const group of formGroupDefinitions) {\n groupFieldsMap.set(group.groupKey, []);\n }\n\n const ungroupedFields: FormFieldDefinition<TFormFields>[] = [];\n for (const field of formFieldDefinitions) {\n if (field.groupKey && groupFieldsMap.has(field.groupKey)) {\n groupFieldsMap.get(field.groupKey)?.push(field);\n } else {\n ungroupedFields.push(field);\n }\n }\n\n return (\n <>\n {formGroupDefinitions.map(group => {\n const groupFields = groupFieldsMap.get(group.groupKey) ?? [];\n if (!groupFields.length) {\n return null;\n }\n const groupContent = (\n <>\n {groupFields.map(renderSingleField)}\n </>\n );\n if (renderGroup) {\n return (\n <Fragment key={group.groupKey}>\n {renderGroup(group, groupContent)}\n </Fragment>\n );\n }\n return (\n <Box\n key={group.groupKey}\n sx={{ marginY: 2 }}\n >\n <Typography variant={'subtitle1'}>\n {group.label}\n </Typography>\n {group.description && (\n <Typography\n color={'text.secondary'}\n variant={'body2'}\n >\n {group.description}\n </Typography>\n )}\n {group.messages?.map((msg) => (\n <Alert\n key={msg.message}\n severity={msg.severity}\n sx={{ '& .MuiAlert-message': { width: '100%' } }}\n >\n <AlertTitle>\n {msg.message}\n </AlertTitle>\n {msg.buttonLabel && msg.onButtonClick && (\n <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>\n <Button\n color={'inherit'}\n onClick={msg.onButtonClick}\n size={'small'}\n variant={'text'}\n >\n {msg.buttonLabel}\n </Button>\n </Box>\n )}\n </Alert>\n ))}\n {groupContent}\n </Box>\n );\n })}\n {ungroupedFields.map(renderSingleField)}\n </>\n );\n }, [formFieldDefinitions, formGroupDefinitions, renderGroup, renderSingleField]);\n\n return (\n <FormProvider {...formMethods}>\n <Box\n autoComplete={'off'}\n component={'form'}\n id={formId}\n onSubmit={onSubmit}\n >\n {wrapForm ? wrapForm(formFieldsContent) : formFieldsContent}\n </Box>\n </FormProvider>\n );\n};\n"],"mappings":"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"}
|
package/dist/models/form.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { AutocompleteProps } from '../components/fields/Autocomplete';
|
|
|
5
5
|
import { TextFieldProps } from '../components/fields/TextField';
|
|
6
6
|
import { SelectProps } from '../components/fields/Select';
|
|
7
7
|
import { DatePickerProps } from '../components/fields/DatePicker';
|
|
8
|
-
import {
|
|
8
|
+
import { FileUploadProps } from '../components/fields/FileUpload/FileUpload';
|
|
9
9
|
import { RadioGroupProps } from '../components/fields/RadioGroup';
|
|
10
10
|
import { NumberFieldProps } from '../components/fields/NumberField';
|
|
11
11
|
import { SwitchProps } from '../components/fields/Switch';
|
|
@@ -56,7 +56,7 @@ export type FormFieldDefinitionDate<TFormFields extends FieldValues> = {
|
|
|
56
56
|
} & DatePickerProps<TFormFields, Path<TFormFields>> & FormFieldGrouping;
|
|
57
57
|
export type FormFieldDefinitionFile<TFormFields extends FieldValues> = {
|
|
58
58
|
definition: FORM_FIELD_DEFINITION_TYPE.FILE;
|
|
59
|
-
} &
|
|
59
|
+
} & FileUploadProps<TFormFields, Path<TFormFields>> & FormFieldGrouping;
|
|
60
60
|
export type FormFieldDefinitionHidden<TFormFields extends FieldValues> = {
|
|
61
61
|
definition: FORM_FIELD_DEFINITION_TYPE.HIDDEN;
|
|
62
62
|
} & FormFieldGrouping & TextFieldProps<TFormFields, Path<TFormFields>>;
|
|
@@ -104,6 +104,7 @@ export type FormGroupMessage = {
|
|
|
104
104
|
export interface OptionBase<TValue> {
|
|
105
105
|
disabled?: boolean;
|
|
106
106
|
label?: string;
|
|
107
|
+
secondaryLabel?: string;
|
|
107
108
|
value?: TValue;
|
|
108
109
|
}
|
|
109
110
|
export type RadioButtonOption<TValue = void> = OptionBase<TValue extends void ? (boolean | number | string) : TValue>;
|
package/dist/models/form.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.js","names":[],"sources":["../../src/models/form.ts"],"sourcesContent":["import type {\n FieldValues,\n Path,\n} from 'react-hook-form';\n\nimport type { RichTextEditorProps } from '../components/fields/RichTextEditor';\nimport type { TransferListProps } from '../components/fields/TransferList';\nimport type { AutocompleteProps } from '../components/fields/Autocomplete';\nimport type { TextFieldProps } from '../components/fields/TextField';\nimport type { SelectProps } from '../components/fields/Select';\nimport type { DatePickerProps } from '../components/fields/DatePicker';\nimport type {
|
|
1
|
+
{"version":3,"file":"form.js","names":[],"sources":["../../src/models/form.ts"],"sourcesContent":["import type {\n FieldValues,\n Path,\n} from 'react-hook-form';\n\nimport type { RichTextEditorProps } from '../components/fields/RichTextEditor';\nimport type { TransferListProps } from '../components/fields/TransferList';\nimport type { AutocompleteProps } from '../components/fields/Autocomplete';\nimport type { TextFieldProps } from '../components/fields/TextField';\nimport type { SelectProps } from '../components/fields/Select';\nimport type { DatePickerProps } from '../components/fields/DatePicker';\nimport type { FileUploadProps } from '../components/fields/FileUpload/FileUpload';\nimport type { RadioGroupProps } from '../components/fields/RadioGroup';\nimport type { NumberFieldProps } from '../components/fields/NumberField';\nimport type { SwitchProps } from '../components/fields/Switch';\n\nexport enum FORM_FIELD_DEFINITION_TYPE {\n AUTOCOMPLETE = 'AUTOCOMPLETE',\n BOOLEAN = 'BOOLEAN',\n BOOLEAN_SWITCH = 'BOOLEAN_SWITCH',\n DATE = 'DATE',\n FILE = 'FILE',\n HIDDEN = 'HIDDEN',\n NUMBER = 'NUMBER',\n RADIO_GROUP = 'RADIO_GROUP',\n RICH_TEXT = 'RICH_TEXT',\n SELECT = 'SELECT',\n SWITCH = 'SWITCH',\n TEXTFIELD = 'TEXTFIELD',\n TRANSFER_LIST = 'TRANSFER_LIST',\n}\n\nexport interface AutoCompleteOption<TValue = void> extends OptionBase<TValue extends void ? (number | string) : TValue> {\n groupBySortOrderValue?: number;\n groupByValue?: string;\n}\n\nexport type AutocompleteSelectAllContextData = {\n currentValues: AutocompleteValue[];\n enabledOptionValues: AutocompleteValue[];\n handleSelectAll: (isCurrentlyAll: boolean, currentValues: AutocompleteValue[]) => void;\n selectAllLabel: string;\n};\nexport type AutocompleteValue = number | string;\nexport type CheckboxOption = OptionBase<number | string>;\n\nexport type FormFieldDefinition<TFormFields extends FieldValues> =\n FormFieldDefinitionAutocomplete<TFormFields> |\n FormFieldDefinitionAutocompleteMultiple<TFormFields> |\n FormFieldDefinitionBoolean<TFormFields> |\n FormFieldDefinitionBooleanSwitch<TFormFields> |\n FormFieldDefinitionDate<TFormFields> |\n FormFieldDefinitionFile<TFormFields> |\n FormFieldDefinitionHidden<TFormFields> |\n FormFieldDefinitionNumber<TFormFields> |\n FormFieldDefinitionRadioGroup<TFormFields> |\n FormFieldDefinitionRichText<TFormFields> |\n FormFieldDefinitionSelect<TFormFields> |\n FormFieldDefinitionSelectMultiple<TFormFields> |\n FormFieldDefinitionSwitch<TFormFields> |\n FormFieldDefinitionTextField<TFormFields> |\n FormFieldDefinitionTransferList<TFormFields>;\n\nexport type FormFieldDefinitionAutocomplete<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE; multiple?: false } & AutocompleteProps<TFormFields, Path<TFormFields>, false> & FormFieldGrouping;\n\nexport type FormFieldDefinitionAutocompleteMultiple<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.AUTOCOMPLETE; multiple?: true } & AutocompleteProps<TFormFields, Path<TFormFields>, true> & FormFieldGrouping;\nexport type FormFieldDefinitionBoolean<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.BOOLEAN } & FormFieldGrouping & Omit<SelectProps<TFormFields, Path<TFormFields>, false>, 'options'>;\nexport type FormFieldDefinitionBooleanSwitch<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.BOOLEAN_SWITCH } & FormFieldGrouping & Omit<SwitchProps<TFormFields, Path<TFormFields>>, 'options'>;\nexport type FormFieldDefinitionDate<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.DATE } & DatePickerProps<TFormFields, Path<TFormFields>> & FormFieldGrouping;\nexport type FormFieldDefinitionFile<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.FILE } & FileUploadProps<TFormFields, Path<TFormFields>> & FormFieldGrouping;\nexport type FormFieldDefinitionHidden<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.HIDDEN } & FormFieldGrouping & TextFieldProps<TFormFields, Path<TFormFields>>;\nexport type FormFieldDefinitionNumber<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.NUMBER } & FormFieldGrouping & NumberFieldProps<TFormFields, Path<TFormFields>>;\nexport type FormFieldDefinitionRadioGroup<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.RADIO_GROUP } & FormFieldGrouping & RadioGroupProps<TFormFields, Path<TFormFields>>;\nexport type FormFieldDefinitionRichText<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.RICH_TEXT } & FormFieldGrouping & RichTextEditorProps<TFormFields, Path<TFormFields>>;\nexport type FormFieldDefinitionSelect<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.SELECT; multiple?: false } & FormFieldGrouping & SelectProps<TFormFields, Path<TFormFields>, false>;\nexport type FormFieldDefinitionSelectMultiple<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.SELECT; multiple?: true } & FormFieldGrouping & SelectProps<TFormFields, Path<TFormFields>, true>;\nexport type FormFieldDefinitionSwitch<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.SWITCH } & FormFieldGrouping & SwitchProps<TFormFields, Path<TFormFields>>;\nexport type FormFieldDefinitionTextField<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.TEXTFIELD } & FormFieldGrouping & TextFieldProps<TFormFields, Path<TFormFields>>;\nexport type FormFieldDefinitionTransferList<TFormFields extends FieldValues> = { definition: FORM_FIELD_DEFINITION_TYPE.TRANSFER_LIST } & FormFieldGrouping & TransferListProps<TFormFields, Path<TFormFields>>;\nexport type FormFieldGrouping = {\n groupKey?: string;\n};\nexport type FormGroupDefinition = {\n description?: string;\n groupKey: string;\n label: string;\n messages?: FormGroupMessage[];\n};\nexport type FormGroupMessage = {\n buttonLabel?: string;\n message: string;\n onButtonClick?: () => void;\n severity: 'error' | 'info' | 'warning';\n};\nexport interface OptionBase<TValue> {\n disabled?: boolean;\n label?: string;\n secondaryLabel?: string;\n value?: TValue;\n}\nexport type RadioButtonOption<TValue = void> = OptionBase<TValue extends void ? (boolean | number | string) : TValue>;\nexport type SelectOption<TValue = void> = OptionBase<TValue extends void ? (boolean | number | string) : TValue>;\nexport type ToggleButtonOption<TValue = void> = OptionBase<TValue extends void ? (boolean | number | string) : TValue>;\n\nexport type TransferListOption = OptionBase<string>;\n"],"mappings":";AAgBA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,eAAA,gBACA,EAAA,UAAA,WACA,EAAA,iBAAA,kBACA,EAAA,OAAA,QACA,EAAA,OAAA,QACA,EAAA,SAAA,UACA,EAAA,SAAA,UACA,EAAA,cAAA,eACA,EAAA,YAAA,aACA,EAAA,SAAA,UACA,EAAA,SAAA,UACA,EAAA,YAAA,aACA,EAAA,gBAAA;AACF,EAAA,CAAA,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gen-epix/ui-core-form",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -39,6 +39,10 @@
|
|
|
39
39
|
"types": "./dist/components/fields/DateRangePicker/index.d.ts",
|
|
40
40
|
"import": "./dist/components/fields/DateRangePicker/index.js"
|
|
41
41
|
},
|
|
42
|
+
"./components/fields/FileUpload": {
|
|
43
|
+
"types": "./dist/components/fields/FileUpload/index.d.ts",
|
|
44
|
+
"import": "./dist/components/fields/FileUpload/index.js"
|
|
45
|
+
},
|
|
42
46
|
"./components/fields/NumberField": {
|
|
43
47
|
"types": "./dist/components/fields/NumberField/index.d.ts",
|
|
44
48
|
"import": "./dist/components/fields/NumberField/index.js"
|
|
@@ -75,10 +79,6 @@
|
|
|
75
79
|
"types": "./dist/components/fields/TransferList/index.d.ts",
|
|
76
80
|
"import": "./dist/components/fields/TransferList/index.js"
|
|
77
81
|
},
|
|
78
|
-
"./components/fields/UploadButton": {
|
|
79
|
-
"types": "./dist/components/fields/UploadButton/index.d.ts",
|
|
80
|
-
"import": "./dist/components/fields/UploadButton/index.js"
|
|
81
|
-
},
|
|
82
82
|
"./components/helpers/FormFieldHelperText": {
|
|
83
83
|
"types": "./dist/components/helpers/FormFieldHelperText/index.d.ts",
|
|
84
84
|
"import": "./dist/components/helpers/FormFieldHelperText/index.js"
|
|
@@ -113,7 +113,8 @@
|
|
|
113
113
|
}
|
|
114
114
|
},
|
|
115
115
|
"peerDependencies": {
|
|
116
|
-
"@gen-epix/ui-core": "^3.0
|
|
116
|
+
"@gen-epix/ui-core": "^3.1.0",
|
|
117
|
+
"@gen-epix/ui-core-components": "^4.1.0",
|
|
117
118
|
"@mui/icons-material": "*",
|
|
118
119
|
"@mui/material": "*",
|
|
119
120
|
"@mui/x-date-pickers": "*",
|
|
@@ -170,7 +171,8 @@
|
|
|
170
171
|
},
|
|
171
172
|
"devDependencies": {
|
|
172
173
|
"@gen-epix/eslint-config": "0.5.0",
|
|
173
|
-
"@gen-epix/ui-core": "^3.0
|
|
174
|
+
"@gen-epix/ui-core": "^3.1.0",
|
|
175
|
+
"@gen-epix/ui-core-components": "^4.1.0",
|
|
174
176
|
"@gen-epix/translation-util": "0.2.0",
|
|
175
177
|
"@mui/icons-material": "9.4.0",
|
|
176
178
|
"@mui/material": "9.4.0",
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { t as e } from "./FormUtil.js";
|
|
2
|
-
import { i as t, t as n } from "./index.esm.js";
|
|
3
|
-
import { FormFieldHelperText as r } from "../components/helpers/FormFieldHelperText/index.js";
|
|
4
|
-
import { useCallback as i, useId as a, useRef as o } from "react";
|
|
5
|
-
import { useTranslation as s } from "react-i18next";
|
|
6
|
-
import { Box as c, Button as l, FormControl as u, FormHelperText as d, FormLabel as f, styled as p } from "@mui/material";
|
|
7
|
-
import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
|
|
8
|
-
import { TestIdUtil as _ } from "@gen-epix/ui-core/utils/TestIdUtil";
|
|
9
|
-
import v from "@mui/icons-material/CloudUpload";
|
|
10
|
-
import { WindowService as y } from "@gen-epix/ui-core/classes/services/WindowService";
|
|
11
|
-
//#region src/components/fields/UploadButton/UploadButton.tsx
|
|
12
|
-
var b = p("input")({
|
|
13
|
-
bottom: 0,
|
|
14
|
-
clip: "rect(0 0 0 0)",
|
|
15
|
-
clipPath: "inset(50%)",
|
|
16
|
-
height: 1,
|
|
17
|
-
left: 0,
|
|
18
|
-
overflow: "hidden",
|
|
19
|
-
position: "absolute",
|
|
20
|
-
whiteSpace: "nowrap",
|
|
21
|
-
width: 1
|
|
22
|
-
}), x = ({ accept: p, disabled: x, infoMessage: S, label: C, multiple: w = !1, name: T, onChange: E, required: D, warningMessage: O }) => {
|
|
23
|
-
let { t: k } = s(), A = a(), j = a(), { control: M, formState: { errors: N } } = t(), P = e.getFieldErrorMessage(N, T), F = o(null), I = !!P, L = i((e) => (t) => {
|
|
24
|
-
E && E(t.target.files), e(t.target.files);
|
|
25
|
-
}, [E]), R = i(({ field: { onBlur: e, onChange: t, ref: n, value: r } }) => {
|
|
26
|
-
n({ focus: () => {
|
|
27
|
-
F?.current?.focus();
|
|
28
|
-
} });
|
|
29
|
-
let i = y.getInstance().document.getElementById(j);
|
|
30
|
-
return !r && i && (i.value = ""), /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g(l, {
|
|
31
|
-
component: "label",
|
|
32
|
-
disabled: x,
|
|
33
|
-
onBlur: e,
|
|
34
|
-
role: void 0,
|
|
35
|
-
size: "large",
|
|
36
|
-
startIcon: /* @__PURE__ */ h(v, {}),
|
|
37
|
-
sx: { height: (e) => e.spacing(7) },
|
|
38
|
-
tabIndex: -1,
|
|
39
|
-
variant: "outlined",
|
|
40
|
-
children: [k(w ? "Upload files ({{accept}})" : "Upload file ({{accept}})", { accept: p.split(",").join(", ") }), /* @__PURE__ */ h(b, {
|
|
41
|
-
accept: p,
|
|
42
|
-
id: j,
|
|
43
|
-
multiple: w,
|
|
44
|
-
onChange: L(t),
|
|
45
|
-
type: "file"
|
|
46
|
-
})]
|
|
47
|
-
}), r && /* @__PURE__ */ h(c, { children: Array.from(r).map((e) => e.name).join(", ") })] });
|
|
48
|
-
}, [
|
|
49
|
-
p,
|
|
50
|
-
x,
|
|
51
|
-
j,
|
|
52
|
-
w,
|
|
53
|
-
L,
|
|
54
|
-
k
|
|
55
|
-
]);
|
|
56
|
-
return /* @__PURE__ */ g(u, {
|
|
57
|
-
error: I,
|
|
58
|
-
..._.createAttributes("UploadButton", {
|
|
59
|
-
label: C,
|
|
60
|
-
name: T
|
|
61
|
-
}),
|
|
62
|
-
fullWidth: !0,
|
|
63
|
-
children: [
|
|
64
|
-
/* @__PURE__ */ h(f, {
|
|
65
|
-
component: "legend",
|
|
66
|
-
id: A,
|
|
67
|
-
required: D,
|
|
68
|
-
children: C
|
|
69
|
-
}),
|
|
70
|
-
/* @__PURE__ */ h(n, {
|
|
71
|
-
control: M,
|
|
72
|
-
defaultValue: null,
|
|
73
|
-
name: T,
|
|
74
|
-
render: R
|
|
75
|
-
}),
|
|
76
|
-
/* @__PURE__ */ h(d, {
|
|
77
|
-
sx: { ml: 0 },
|
|
78
|
-
children: /* @__PURE__ */ h(r, {
|
|
79
|
-
errorMessage: P,
|
|
80
|
-
infoMessage: S,
|
|
81
|
-
noIndent: !0,
|
|
82
|
-
warningMessage: O
|
|
83
|
-
})
|
|
84
|
-
})
|
|
85
|
-
]
|
|
86
|
-
});
|
|
87
|
-
};
|
|
88
|
-
//#endregion
|
|
89
|
-
export { x as t };
|
|
90
|
-
|
|
91
|
-
//# sourceMappingURL=UploadButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"UploadButton.js","names":[],"sources":["../../src/components/fields/UploadButton/UploadButton.tsx"],"sourcesContent":["import type {\n ChangeEvent,\n ReactElement,\n} from 'react';\nimport {\n useCallback,\n useId,\n useRef,\n} from 'react';\nimport {\n Box,\n Button,\n FormControl,\n FormHelperText,\n FormLabel,\n styled,\n} from '@mui/material';\nimport {\n Controller,\n useFormContext,\n} from 'react-hook-form';\nimport type {\n ControllerRenderProps,\n FieldValues,\n Path,\n UseControllerReturn,\n} from 'react-hook-form';\nimport CloudUploadIcon from '@mui/icons-material/CloudUpload';\nimport { useTranslation } from 'react-i18next';\nimport { TestIdUtil } from '@gen-epix/ui-core/utils/TestIdUtil';\nimport { WindowService } from '@gen-epix/ui-core/classes/services/WindowService';\n\nimport { FormUtil } from '../../../utils/FormUtil';\nimport { FormFieldHelperText } from '../../helpers/FormFieldHelperText';\n\nexport type UploadButtonProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {\n readonly accept: string;\n readonly disabled?: boolean;\n readonly infoMessage?: string;\n readonly label: string;\n readonly loading?: boolean; // NOT implemented\n readonly multiple?: boolean;\n readonly name: TName;\n readonly onChange?: (value: FileList) => void;\n readonly required?: boolean;\n readonly warningMessage?: string;\n};\n\nconst VisuallyHiddenInput = styled('input')({\n bottom: 0,\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n height: 1,\n left: 0,\n overflow: 'hidden',\n position: 'absolute',\n whiteSpace: 'nowrap',\n width: 1,\n});\n\nexport const UploadButton = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({\n accept,\n disabled,\n infoMessage,\n label,\n multiple = false,\n name,\n onChange: onChangeProp,\n required,\n warningMessage,\n}: UploadButtonProps<TFieldValues, TName>): ReactElement => {\n const { t } = useTranslation();\n const id = useId();\n const inputId = useId();\n const { control, formState: { errors } } = useFormContext<TFieldValues>();\n const errorMessage = FormUtil.getFieldErrorMessage(errors, name);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const hasError = !!errorMessage;\n\n const onInputChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>\n (event: ChangeEvent<HTMLInputElement>) => {\n if (onChangeProp) {\n onChangeProp(event.target.files);\n }\n onChange(event.target.files);\n }\n , [onChangeProp]);\n\n const renderController = useCallback(({ field: { onBlur, onChange, ref, value } }: UseControllerReturn<TFieldValues, TName>) => {\n ref({\n focus: () => {\n buttonRef?.current?.focus();\n },\n });\n const inputElement = WindowService.getInstance().document.getElementById(inputId) as HTMLInputElement | null;\n if (!value && inputElement) {\n inputElement.value = '';\n }\n return (\n <>\n <Button\n component={'label'}\n // ref={buttonRef}\n disabled={disabled}\n onBlur={onBlur}\n role={undefined}\n size={'large'}\n startIcon={<CloudUploadIcon />}\n sx={{\n height: theme => theme.spacing(7),\n }}\n tabIndex={-1}\n variant={'outlined'}\n >\n {multiple ? t('Upload files ({{accept}})', { accept: accept.split(',').join(', ') }) : t('Upload file ({{accept}})', { accept: accept.split(',').join(', ') })}\n <VisuallyHiddenInput\n accept={accept}\n id={inputId}\n multiple={multiple}\n onChange={onInputChange(onChange)}\n type={'file'}\n />\n </Button>\n {value && (\n <Box>\n {Array.from(value as unknown as FileList).map((file) => file.name).join(', ')}\n </Box>\n )}\n </>\n );\n }, [accept, disabled, inputId, multiple, onInputChange, t]);\n\n return (\n <FormControl\n error={hasError}\n {...TestIdUtil.createAttributes('UploadButton', { label, name })}\n fullWidth\n >\n <FormLabel\n component={'legend'}\n id={id}\n required={required}\n >\n {label}\n </FormLabel>\n <Controller\n control={control}\n defaultValue={null}\n name={name}\n render={renderController}\n />\n <FormHelperText sx={{ ml: 0 }}>\n <FormFieldHelperText\n errorMessage={errorMessage}\n infoMessage={infoMessage}\n noIndent\n warningMessage={warningMessage}\n />\n </FormHelperText>\n </FormControl>\n );\n};\n"],"mappings":";;;;;;;;;;;AAgDA,IAAM,IAAsB,EAAO,OAAO,CAAC,CAAC;CAC1C,QAAQ;CACR,MAAM;CACN,UAAU;CACV,QAAQ;CACR,MAAM;CACN,UAAU;CACV,UAAU;CACV,YAAY;CACZ,OAAO;AACT,CAAC,GAEY,KAAyG,EACpH,WACA,aACA,gBACA,UACA,cAAW,IACX,SACA,UAAU,GACV,aACA,wBAC0D;CAC1D,IAAM,EAAE,SAAM,EAAe,GACvB,IAAK,EAAM,GACX,IAAU,EAAM,GAChB,EAAE,YAAS,WAAW,EAAE,gBAAa,EAA6B,GAClE,IAAe,EAAS,qBAAqB,GAAQ,CAAI,GAEzD,IAAY,EAA0B,IAAI,GAC1C,IAAW,CAAC,CAAC,GAEb,IAAgB,GAAa,OAChC,MAAyC;EAIxC,AAHI,KACF,EAAa,EAAM,OAAO,KAAK,GAEjC,EAAS,EAAM,OAAO,KAAK;CAC7B,GACA,CAAC,CAAY,CAAC,GAEV,IAAmB,GAAa,EAAE,OAAO,EAAE,WAAQ,aAAU,QAAK,iBAAwD;EAC9H,EAAI,EACF,aAAa;GACX,GAAW,SAAS,MAAM;EAC5B,EACF,CAAC;EACD,IAAM,IAAe,EAAc,YAAY,CAAC,CAAC,SAAS,eAAe,CAAO;EAIhF,OAHI,CAAC,KAAS,MACZ,EAAa,QAAQ,KAGrB,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,WAAW;GAED;GACF;GACR,MAAM,KAAA;GACN,MAAM;GACN,WAAW,kBAAC,GAAD,CAAkB,CAAA;GAC7B,IAAI,EACF,SAAQ,MAAS,EAAM,QAAQ,CAAC,EAClC;GACA,UAAU;GACV,SAAS;GAZX,UAAA,CAcc,EAAX,IAAa,8BAA2E,4BAA9C,EAAE,QAAQ,EAAO,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,EAAE,CAA2E,GAC7J,kBAAC,GAAD;IACU;IACR,IAAI;IACM;IACV,UAAU,EAAc,CAAQ;IAChC,MAAM;GACP,CAAA,CACK;EACP,CAAA,GAAA,KACC,kBAAC,GAAD,EAAA,UACG,MAAM,KAAK,CAA4B,CAAC,CAAC,KAAK,MAAS,EAAK,IAAI,CAAC,CAAC,KAAK,IAAI,EACzE,CAAA,CAEP,EAAA,CAAA;CAEN,GAAG;EAAC;EAAQ;EAAU;EAAS;EAAU;EAAe;CAAC,CAAC;CAE1D,OACE,kBAAC,GAAD;EACE,OAAO;EACP,GAAI,EAAW,iBAAiB,gBAAgB;GAAE;GAAO;EAAK,CAAC;EAC/D,WAAA;EAHF,UAAA;GAKE,kBAAC,GAAD;IACE,WAAW;IACP;IACM;IAET,UAAA;GACQ,CAAA;GACX,kBAAC,GAAD;IACW;IACT,cAAc;IACR;IACN,QAAQ;GACT,CAAA;GACD,kBAAC,GAAD;IAAgB,IAAI,EAAE,IAAI,EAAE;IAC1B,UAAA,kBAAC,GAAD;KACgB;KACD;KACb,UAAA;KACgB;IACjB,CAAA;GACa,CAAA;EACL;;AAEjB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './UploadButton';
|