@dnb/eufemia 10.40.0 → 10.41.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/CHANGELOG.md +29 -0
- package/cjs/components/upload/Upload.d.ts +1 -0
- package/cjs/components/upload/Upload.js.map +1 -1
- package/cjs/components/upload/UploadDocs.d.ts +3 -0
- package/cjs/components/upload/UploadDocs.js +58 -0
- package/cjs/components/upload/UploadDocs.js.map +1 -0
- package/cjs/components/upload/UploadDropzone.js +22 -19
- package/cjs/components/upload/UploadDropzone.js.map +1 -1
- package/cjs/components/upload/UploadInfo.js +5 -4
- package/cjs/components/upload/UploadInfo.js.map +1 -1
- package/cjs/components/upload/UploadVerify.d.ts +1 -0
- package/cjs/components/upload/UploadVerify.js +2 -0
- package/cjs/components/upload/UploadVerify.js.map +1 -1
- package/cjs/components/upload/types.d.ts +2 -1
- package/cjs/components/upload/types.js.map +1 -1
- package/cjs/components/upload/useUpload.js +9 -8
- package/cjs/components/upload/useUpload.js.map +1 -1
- package/cjs/extensions/forms/Field/ArraySelection/ArraySelection.js +3 -3
- package/cjs/extensions/forms/Field/ArraySelection/ArraySelection.js.map +1 -1
- package/cjs/extensions/forms/Field/Composition/Composition.d.ts +2 -2
- package/cjs/extensions/forms/Field/Composition/Composition.js.map +1 -1
- package/cjs/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.d.ts +2 -2
- package/cjs/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js +2 -2
- package/cjs/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js.map +1 -1
- package/cjs/extensions/forms/Field/Selection/Selection.d.ts +4 -4
- package/cjs/extensions/forms/Field/Selection/Selection.js +3 -3
- package/cjs/extensions/forms/Field/Selection/Selection.js.map +1 -1
- package/cjs/extensions/forms/Field/Slider/Slider.js +2 -2
- package/cjs/extensions/forms/Field/Slider/Slider.js.map +1 -1
- package/cjs/extensions/forms/Field/String/String.js +2 -2
- package/cjs/extensions/forms/Field/String/String.js.map +1 -1
- package/cjs/extensions/forms/Field/Toggle/Toggle.js +6 -6
- package/cjs/extensions/forms/Field/Toggle/Toggle.js.map +1 -1
- package/cjs/extensions/forms/Field/Toggle/ToggleDocs.js +5 -0
- package/cjs/extensions/forms/Field/Toggle/ToggleDocs.js.map +1 -1
- package/cjs/extensions/forms/Field/Upload/Upload.d.ts +12 -0
- package/cjs/extensions/forms/Field/Upload/Upload.js +132 -0
- package/cjs/extensions/forms/Field/Upload/Upload.js.map +1 -0
- package/cjs/extensions/forms/Field/Upload/UploadDocs.d.ts +3 -0
- package/cjs/extensions/forms/Field/Upload/UploadDocs.js +20 -0
- package/cjs/extensions/forms/Field/Upload/UploadDocs.js.map +1 -0
- package/cjs/extensions/forms/Field/Upload/index.d.ts +2 -0
- package/cjs/extensions/forms/Field/Upload/index.js +27 -0
- package/cjs/extensions/forms/Field/Upload/index.js.map +1 -0
- package/cjs/extensions/forms/Field/index.d.ts +1 -0
- package/cjs/extensions/forms/Field/index.js +7 -0
- package/cjs/extensions/forms/Field/index.js.map +1 -1
- package/cjs/extensions/forms/FieldBlock/FieldBlock.d.ts +2 -0
- package/cjs/extensions/forms/FieldBlock/FieldBlock.js +4 -2
- package/cjs/extensions/forms/FieldBlock/FieldBlock.js.map +1 -1
- package/cjs/extensions/forms/FieldBlock/FieldBlockDocs.js +5 -0
- package/cjs/extensions/forms/FieldBlock/FieldBlockDocs.js.map +1 -1
- package/cjs/extensions/forms/Form/Section/Section.d.ts +2 -2
- package/cjs/extensions/forms/Form/Section/Section.js.map +1 -1
- package/cjs/extensions/forms/constants/locales/en-GB.d.ts +4 -0
- package/cjs/extensions/forms/constants/locales/en-GB.js +4 -0
- package/cjs/extensions/forms/constants/locales/en-GB.js.map +1 -1
- package/cjs/extensions/forms/constants/locales/en-US.d.ts +4 -0
- package/cjs/extensions/forms/constants/locales/index.d.ts +8 -0
- package/cjs/extensions/forms/constants/locales/nb-NO.d.ts +4 -0
- package/cjs/extensions/forms/constants/locales/nb-NO.js +4 -0
- package/cjs/extensions/forms/constants/locales/nb-NO.js.map +1 -1
- package/cjs/extensions/forms/hooks/useFieldProps.d.ts +3 -1
- package/cjs/extensions/forms/hooks/useFieldProps.js +14 -9
- package/cjs/extensions/forms/hooks/useFieldProps.js.map +1 -1
- package/cjs/extensions/forms/types.d.ts +8 -3
- package/cjs/extensions/forms/types.js.map +1 -1
- package/cjs/fragments/drawer-list/DrawerList.js +1 -1
- package/cjs/fragments/drawer-list/DrawerList.js.map +1 -1
- package/cjs/shared/Eufemia.d.ts +1 -1
- package/cjs/shared/Eufemia.js +2 -2
- package/cjs/shared/Eufemia.js.map +1 -1
- package/cjs/shared/Translation.d.ts +1 -1
- package/cjs/shared/Translation.js +5 -3
- package/cjs/shared/Translation.js.map +1 -1
- package/cjs/style/core/scopes.scss +1 -1
- package/cjs/style/dnb-ui-basis.css +1 -1
- package/cjs/style/dnb-ui-basis.min.css +1 -1
- package/cjs/style/dnb-ui-body.css +1 -1
- package/cjs/style/dnb-ui-body.min.css +1 -1
- package/cjs/style/dnb-ui-core.css +1 -1
- package/cjs/style/dnb-ui-core.min.css +1 -1
- package/components/upload/Upload.d.ts +1 -0
- package/components/upload/Upload.js.map +1 -1
- package/components/upload/UploadDocs.d.ts +3 -0
- package/components/upload/UploadDocs.js +50 -0
- package/components/upload/UploadDocs.js.map +1 -0
- package/components/upload/UploadDropzone.js +21 -19
- package/components/upload/UploadDropzone.js.map +1 -1
- package/components/upload/UploadInfo.js +5 -4
- package/components/upload/UploadInfo.js.map +1 -1
- package/components/upload/UploadVerify.d.ts +1 -0
- package/components/upload/UploadVerify.js +1 -1
- package/components/upload/UploadVerify.js.map +1 -1
- package/components/upload/types.d.ts +2 -1
- package/components/upload/types.js.map +1 -1
- package/components/upload/useUpload.js +9 -8
- package/components/upload/useUpload.js.map +1 -1
- package/es/components/upload/Upload.d.ts +1 -0
- package/es/components/upload/Upload.js.map +1 -1
- package/es/components/upload/UploadDocs.d.ts +3 -0
- package/es/components/upload/UploadDocs.js +50 -0
- package/es/components/upload/UploadDocs.js.map +1 -0
- package/es/components/upload/UploadDropzone.js +21 -19
- package/es/components/upload/UploadDropzone.js.map +1 -1
- package/es/components/upload/UploadInfo.js +5 -4
- package/es/components/upload/UploadInfo.js.map +1 -1
- package/es/components/upload/UploadVerify.d.ts +1 -0
- package/es/components/upload/UploadVerify.js +1 -1
- package/es/components/upload/UploadVerify.js.map +1 -1
- package/es/components/upload/types.d.ts +2 -1
- package/es/components/upload/types.js.map +1 -1
- package/es/components/upload/useUpload.js +9 -8
- package/es/components/upload/useUpload.js.map +1 -1
- package/es/extensions/forms/Field/ArraySelection/ArraySelection.js +3 -3
- package/es/extensions/forms/Field/ArraySelection/ArraySelection.js.map +1 -1
- package/es/extensions/forms/Field/Composition/Composition.d.ts +2 -2
- package/es/extensions/forms/Field/Composition/Composition.js.map +1 -1
- package/es/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.d.ts +2 -2
- package/es/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js +2 -2
- package/es/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js.map +1 -1
- package/es/extensions/forms/Field/Selection/Selection.d.ts +4 -4
- package/es/extensions/forms/Field/Selection/Selection.js +3 -3
- package/es/extensions/forms/Field/Selection/Selection.js.map +1 -1
- package/es/extensions/forms/Field/Slider/Slider.js +2 -2
- package/es/extensions/forms/Field/Slider/Slider.js.map +1 -1
- package/es/extensions/forms/Field/String/String.js +2 -2
- package/es/extensions/forms/Field/String/String.js.map +1 -1
- package/es/extensions/forms/Field/Toggle/Toggle.js +6 -6
- package/es/extensions/forms/Field/Toggle/Toggle.js.map +1 -1
- package/es/extensions/forms/Field/Toggle/ToggleDocs.js +5 -0
- package/es/extensions/forms/Field/Toggle/ToggleDocs.js.map +1 -1
- package/es/extensions/forms/Field/Upload/Upload.d.ts +12 -0
- package/es/extensions/forms/Field/Upload/Upload.js +118 -0
- package/es/extensions/forms/Field/Upload/Upload.js.map +1 -0
- package/es/extensions/forms/Field/Upload/UploadDocs.d.ts +3 -0
- package/es/extensions/forms/Field/Upload/UploadDocs.js +10 -0
- package/es/extensions/forms/Field/Upload/UploadDocs.js.map +1 -0
- package/es/extensions/forms/Field/Upload/index.d.ts +2 -0
- package/es/extensions/forms/Field/Upload/index.js +3 -0
- package/es/extensions/forms/Field/Upload/index.js.map +1 -0
- package/es/extensions/forms/Field/index.d.ts +1 -0
- package/es/extensions/forms/Field/index.js +1 -0
- package/es/extensions/forms/Field/index.js.map +1 -1
- package/es/extensions/forms/FieldBlock/FieldBlock.d.ts +2 -0
- package/es/extensions/forms/FieldBlock/FieldBlock.js +4 -2
- package/es/extensions/forms/FieldBlock/FieldBlock.js.map +1 -1
- package/es/extensions/forms/FieldBlock/FieldBlockDocs.js +5 -0
- package/es/extensions/forms/FieldBlock/FieldBlockDocs.js.map +1 -1
- package/es/extensions/forms/Form/Section/Section.d.ts +2 -2
- package/es/extensions/forms/Form/Section/Section.js.map +1 -1
- package/es/extensions/forms/constants/locales/en-GB.d.ts +4 -0
- package/es/extensions/forms/constants/locales/en-GB.js +4 -0
- package/es/extensions/forms/constants/locales/en-GB.js.map +1 -1
- package/es/extensions/forms/constants/locales/en-US.d.ts +4 -0
- package/es/extensions/forms/constants/locales/index.d.ts +8 -0
- package/es/extensions/forms/constants/locales/nb-NO.d.ts +4 -0
- package/es/extensions/forms/constants/locales/nb-NO.js +4 -0
- package/es/extensions/forms/constants/locales/nb-NO.js.map +1 -1
- package/es/extensions/forms/hooks/useFieldProps.d.ts +3 -1
- package/es/extensions/forms/hooks/useFieldProps.js +14 -10
- package/es/extensions/forms/hooks/useFieldProps.js.map +1 -1
- package/es/extensions/forms/types.d.ts +8 -3
- package/es/extensions/forms/types.js.map +1 -1
- package/es/fragments/drawer-list/DrawerList.js +1 -1
- package/es/fragments/drawer-list/DrawerList.js.map +1 -1
- package/es/shared/Eufemia.d.ts +1 -1
- package/es/shared/Eufemia.js +2 -2
- package/es/shared/Eufemia.js.map +1 -1
- package/es/shared/Translation.d.ts +1 -1
- package/es/shared/Translation.js +3 -3
- package/es/shared/Translation.js.map +1 -1
- package/es/style/core/scopes.scss +1 -1
- package/es/style/dnb-ui-basis.css +1 -1
- package/es/style/dnb-ui-basis.min.css +1 -1
- package/es/style/dnb-ui-body.css +1 -1
- package/es/style/dnb-ui-body.min.css +1 -1
- package/es/style/dnb-ui-core.css +1 -1
- package/es/style/dnb-ui-core.min.css +1 -1
- package/esm/dnb-ui-basis.min.mjs +1 -1
- package/esm/dnb-ui-components.min.mjs +1 -1
- package/esm/dnb-ui-elements.min.mjs +1 -1
- package/esm/dnb-ui-extensions.min.mjs +5 -5
- package/esm/dnb-ui-lib.min.mjs +1 -1
- package/extensions/forms/Field/ArraySelection/ArraySelection.js +3 -3
- package/extensions/forms/Field/ArraySelection/ArraySelection.js.map +1 -1
- package/extensions/forms/Field/Composition/Composition.d.ts +2 -2
- package/extensions/forms/Field/Composition/Composition.js.map +1 -1
- package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.d.ts +2 -2
- package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js +2 -2
- package/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js.map +1 -1
- package/extensions/forms/Field/Selection/Selection.d.ts +4 -4
- package/extensions/forms/Field/Selection/Selection.js +3 -3
- package/extensions/forms/Field/Selection/Selection.js.map +1 -1
- package/extensions/forms/Field/Slider/Slider.js +2 -2
- package/extensions/forms/Field/Slider/Slider.js.map +1 -1
- package/extensions/forms/Field/String/String.js +2 -2
- package/extensions/forms/Field/String/String.js.map +1 -1
- package/extensions/forms/Field/Toggle/Toggle.js +6 -6
- package/extensions/forms/Field/Toggle/Toggle.js.map +1 -1
- package/extensions/forms/Field/Toggle/ToggleDocs.js +5 -0
- package/extensions/forms/Field/Toggle/ToggleDocs.js.map +1 -1
- package/extensions/forms/Field/Upload/Upload.d.ts +12 -0
- package/extensions/forms/Field/Upload/Upload.js +120 -0
- package/extensions/forms/Field/Upload/Upload.js.map +1 -0
- package/extensions/forms/Field/Upload/UploadDocs.d.ts +3 -0
- package/extensions/forms/Field/Upload/UploadDocs.js +10 -0
- package/extensions/forms/Field/Upload/UploadDocs.js.map +1 -0
- package/extensions/forms/Field/Upload/index.d.ts +2 -0
- package/extensions/forms/Field/Upload/index.js +3 -0
- package/extensions/forms/Field/Upload/index.js.map +1 -0
- package/extensions/forms/Field/index.d.ts +1 -0
- package/extensions/forms/Field/index.js +1 -0
- package/extensions/forms/Field/index.js.map +1 -1
- package/extensions/forms/FieldBlock/FieldBlock.d.ts +2 -0
- package/extensions/forms/FieldBlock/FieldBlock.js +4 -2
- package/extensions/forms/FieldBlock/FieldBlock.js.map +1 -1
- package/extensions/forms/FieldBlock/FieldBlockDocs.js +5 -0
- package/extensions/forms/FieldBlock/FieldBlockDocs.js.map +1 -1
- package/extensions/forms/Form/Section/Section.d.ts +2 -2
- package/extensions/forms/Form/Section/Section.js.map +1 -1
- package/extensions/forms/constants/locales/en-GB.d.ts +4 -0
- package/extensions/forms/constants/locales/en-GB.js +4 -0
- package/extensions/forms/constants/locales/en-GB.js.map +1 -1
- package/extensions/forms/constants/locales/en-US.d.ts +4 -0
- package/extensions/forms/constants/locales/index.d.ts +8 -0
- package/extensions/forms/constants/locales/nb-NO.d.ts +4 -0
- package/extensions/forms/constants/locales/nb-NO.js +4 -0
- package/extensions/forms/constants/locales/nb-NO.js.map +1 -1
- package/extensions/forms/hooks/useFieldProps.d.ts +3 -1
- package/extensions/forms/hooks/useFieldProps.js +14 -9
- package/extensions/forms/hooks/useFieldProps.js.map +1 -1
- package/extensions/forms/types.d.ts +8 -3
- package/extensions/forms/types.js.map +1 -1
- package/fragments/drawer-list/DrawerList.js +1 -1
- package/fragments/drawer-list/DrawerList.js.map +1 -1
- package/package.json +1 -1
- package/shared/Eufemia.d.ts +1 -1
- package/shared/Eufemia.js +2 -2
- package/shared/Eufemia.js.map +1 -1
- package/shared/Translation.d.ts +1 -1
- package/shared/Translation.js +3 -3
- package/shared/Translation.js.map +1 -1
- package/style/core/scopes.scss +1 -1
- package/style/dnb-ui-basis.css +1 -1
- package/style/dnb-ui-basis.min.css +1 -1
- package/style/dnb-ui-body.css +1 -1
- package/style/dnb-ui-body.min.css +1 -1
- package/style/dnb-ui-core.css +1 -1
- package/style/dnb-ui-core.min.css +1 -1
- package/umd/dnb-ui-basis.min.js +1 -1
- package/umd/dnb-ui-components.min.js +1 -1
- package/umd/dnb-ui-elements.min.js +1 -1
- package/umd/dnb-ui-extensions.min.js +5 -5
- package/umd/dnb-ui-lib.min.js +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","classnames","HelpButton","Input","Textarea","InputMasked","FieldBlockContext","FieldBlock","useFieldProps","pickSpacingProps","toCapitalized","useErrorMessage","useTranslation","StringComponent","props","_props$width","_value$toString","fieldBlockContext","translations","errorMessages","path","required","Field","errorRequired","minLength","StringField","errorMinLength","maxLength","errorMaxLength","pattern","errorPattern","schema","_props$schema","type","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transform","transformValue","capitalize","String","preparedProps","_objectSpread","width","composition","id","name","className","innerRef","inputClassName","layout","placeholder","label","labelDescription","info","warning","error","hasError","disabled","help","multiline","mask","leftIcon","rightIcon","htmlAttributes","submitElement","clear","align","size","selectall","keepPlaceholder","rows","autoresizeMaxRows","autoresize","characterCounter","autoComplete","inputMode","autoCorrect","spellCheck","autoFocus","autoCapitalize","handleFocus","handleBlur","transformInstantly","cn","sharedProps","suffix","createElement","title","content","undefined","on_focus","on_blur","on_change","stretch","Boolean","inner_ref","status","toString","textareaProps","autoresize_max_rows","inputProps","icon","icon_position","submit_element","keep_placeholder","fieldSectionProps","forId","contentWidth","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport { TextareaProps } from '../../../../components/Textarea'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\nimport type { TextCounterProps } from '../../../../fragments/TextCounter'\nimport type {\n FieldProps,\n FieldHelpProps,\n CustomErrorMessages,\n AllJSONSchemaVersions,\n FieldBlockWidth,\n} from '../../types'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\n\ninterface ErrorMessages extends CustomErrorMessages {\n required?: string\n schema?: string\n minLength?: string\n maxLength?: string\n pattern?: string\n}\nexport type Props = FieldHelpProps &\n FieldProps<string, undefined | string, ErrorMessages> & {\n // - Shared props\n multiline?: boolean\n inputClassName?: string\n innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n width?: FieldBlockWidth\n size?: InputProps['size'] | TextareaProps['size']\n keepPlaceholder?: InputProps['keep_placeholder']\n\n // - Validation\n minLength?: number\n maxLength?: number\n pattern?: string\n\n // - Input props\n type?: InputProps['type']\n align?: InputProps['align']\n selectall?: InputProps['selectall']\n clear?: boolean\n mask?: InputMaskedProps['mask']\n leftIcon?: string\n rightIcon?: string\n submitElement?: InputProps['submit_element']\n capitalize?: boolean\n trim?: boolean\n\n // - Textarea props\n rows?: TextareaProps['rows']\n autoresizeMaxRows?: TextareaProps['autoresize_max_rows']\n autoresize?: TextareaProps['autoresize']\n characterCounter?: Omit<TextCounterProps, 'text'> | number\n\n // - Html props\n autoComplete?: HTMLInputElement['autocomplete']\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect']\n spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck']\n autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus']\n autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize']\n }\n\nfunction StringComponent(props: Props) {\n const fieldBlockContext = useContext(FieldBlockContext)\n const translations = useTranslation()\n\n const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n required: translations.Field.errorRequired,\n minLength: translations.StringField.errorMinLength,\n maxLength: translations.StringField.errorMaxLength,\n pattern: translations.Field.errorPattern,\n })\n\n const schema = useMemo<AllJSONSchemaVersions>(\n () =>\n props.schema ?? {\n type: 'string',\n minLength: props.minLength,\n maxLength: props.maxLength,\n pattern: props.pattern,\n },\n [props.schema, props.minLength, props.maxLength, props.pattern]\n )\n const fromInput = useCallback(\n (event: { value: string; cleanedValue?: string }) => {\n if (typeof event === 'string') {\n event = { value: event }\n }\n if (event?.value === '') {\n return props.emptyValue\n }\n // Cleaned value for masked\n return event?.cleanedValue ?? event?.value\n },\n [props.emptyValue]\n )\n const toEvent = useCallback(\n (value: string, type: string) => {\n if (props.trim && type === 'onBlur') {\n const spaces = '[\\\\s ]'\n if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n value = value.replace(\n new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n ''\n )\n handleChange(value)\n }\n }\n return value\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [props.trim]\n )\n const transform = props.transformValue\n const transformValue = useCallback(\n (value: string) => {\n if (props.capitalize) {\n value = toCapitalized(String(value || ''))\n }\n return transform?.(value) || value\n },\n [props.capitalize, transform]\n )\n\n const preparedProps: Props = {\n ...props,\n errorMessages,\n schema,\n fromInput,\n toEvent,\n transformValue,\n width:\n props.width ??\n (fieldBlockContext?.composition ? 'stretch' : 'large'),\n }\n\n const {\n id,\n name,\n className,\n innerRef,\n inputClassName,\n layout,\n placeholder,\n label,\n labelDescription,\n value,\n info,\n warning,\n error,\n hasError,\n disabled,\n help,\n multiline,\n mask,\n leftIcon,\n rightIcon,\n width,\n htmlAttributes,\n submitElement,\n\n // - Input props\n type,\n clear,\n align,\n size,\n selectall,\n keepPlaceholder,\n\n // - Textarea props\n rows,\n autoresizeMaxRows = 6,\n autoresize = true,\n characterCounter,\n\n // - Html props\n autoComplete,\n inputMode,\n autoCorrect,\n spellCheck,\n autoFocus,\n autoCapitalize,\n\n // - Events\n handleFocus,\n handleBlur,\n handleChange,\n } = useFieldProps(preparedProps)\n\n const transformInstantly = useCallback(\n (value: string) => (props.capitalize ? toCapitalized(value) : value),\n [props.capitalize]\n )\n\n const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n const sharedProps: InputProps & TextareaProps = {\n id,\n name,\n autoComplete,\n autoCorrect,\n spellCheck,\n autoFocus,\n autoCapitalize,\n inputMode,\n className: cn,\n placeholder,\n suffix: help ? (\n <HelpButton title={help.title}>{help.content}</HelpButton>\n ) : undefined,\n on_focus: handleFocus,\n on_blur: handleBlur,\n on_change: handleChange,\n disabled,\n ...htmlAttributes,\n stretch: Boolean(\n width !== undefined || fieldBlockContext?.composition\n ),\n inner_ref: innerRef,\n status: hasError ? 'error' : undefined,\n value: transformInstantly(value?.toString() ?? ''),\n }\n\n const textareaProps: TextareaProps = {\n keepPlaceholder,\n rows,\n autoresize_max_rows: autoresizeMaxRows,\n autoresize,\n characterCounter,\n }\n\n const inputProps: InputProps = {\n type: type,\n clear: clear,\n size: size,\n align: align,\n selectall: selectall,\n icon: leftIcon ?? rightIcon,\n icon_position: rightIcon && !leftIcon ? 'right' : undefined,\n submit_element: submitElement,\n keep_placeholder: keepPlaceholder,\n }\n\n const fieldSectionProps = {\n className: classnames('dnb-forms-field-string', className),\n forId: id,\n layout,\n label,\n labelDescription,\n info,\n warning,\n error,\n disabled,\n width:\n width === 'stretch' || fieldBlockContext?.composition\n ? width\n : undefined,\n contentWidth: width !== false ? width : undefined,\n ...pickSpacingProps(props),\n }\n\n return (\n <FieldBlock {...fieldSectionProps}>\n {multiline ? (\n <Textarea {...sharedProps} {...textareaProps} />\n ) : mask ? (\n <InputMasked {...sharedProps} {...inputProps} mask={mask} />\n ) : (\n <Input {...sharedProps} {...inputProps} />\n )}\n </FieldBlock>\n )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AAC/D,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,wBAAwB;AAEpE,OAAOC,WAAW,MAEX,oCAAoC;AAE3C,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAC3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,SAASC,aAAa,QAAQ,qCAAqC;AASnE,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,cAAc,MAAM,4BAA4B;AAmDvD,SAASC,eAAeA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA,EAAAC,eAAA;EACrC,MAAMC,iBAAiB,GAAGnB,UAAU,CAACQ,iBAAiB,CAAC;EACvD,MAAMY,YAAY,GAAGN,cAAc,CAAC,CAAC;EAErC,MAAMO,aAAa,GAAGR,eAAe,CAACG,KAAK,CAACM,IAAI,EAAEN,KAAK,CAACK,aAAa,EAAE;IACrEE,QAAQ,EAAEH,YAAY,CAACI,KAAK,CAACC,aAAa;IAC1CC,SAAS,EAAEN,YAAY,CAACO,WAAW,CAACC,cAAc;IAClDC,SAAS,EAAET,YAAY,CAACO,WAAW,CAACG,cAAc;IAClDC,OAAO,EAAEX,YAAY,CAACI,KAAK,CAACQ;EAC9B,CAAC,CAAC;EAEF,MAAMC,MAAM,GAAGhC,OAAO,CACpB;IAAA,IAAAiC,aAAA;IAAA,QAAAA,aAAA,GACElB,KAAK,CAACiB,MAAM,cAAAC,aAAA,cAAAA,aAAA,GAAI;MACdC,IAAI,EAAE,QAAQ;MACdT,SAAS,EAAEV,KAAK,CAACU,SAAS;MAC1BG,SAAS,EAAEb,KAAK,CAACa,SAAS;MAC1BE,OAAO,EAAEf,KAAK,CAACe;IACjB,CAAC;EAAA,GACH,CAACf,KAAK,CAACiB,MAAM,EAAEjB,KAAK,CAACU,SAAS,EAAEV,KAAK,CAACa,SAAS,EAAEb,KAAK,CAACe,OAAO,CAChE,CAAC;EACD,MAAMK,SAAS,GAAGlC,WAAW,CAC1BmC,KAA+C,IAAK;IAAA,IAAAC,MAAA,EAAAC,mBAAA,EAAAC,OAAA,EAAAC,OAAA;IACnD,IAAI,OAAOJ,KAAK,KAAK,QAAQ,EAAE;MAC7BA,KAAK,GAAG;QAAEK,KAAK,EAAEL;MAAM,CAAC;IAC1B;IACA,IAAI,EAAAC,MAAA,GAAAD,KAAK,cAAAC,MAAA,uBAALA,MAAA,CAAOI,KAAK,MAAK,EAAE,EAAE;MACvB,OAAO1B,KAAK,CAAC2B,UAAU;IACzB;IAEA,QAAAJ,mBAAA,IAAAC,OAAA,GAAOH,KAAK,cAAAG,OAAA,uBAALA,OAAA,CAAOI,YAAY,cAAAL,mBAAA,cAAAA,mBAAA,IAAAE,OAAA,GAAIJ,KAAK,cAAAI,OAAA,uBAALA,OAAA,CAAOC,KAAK;EAC5C,CAAC,EACD,CAAC1B,KAAK,CAAC2B,UAAU,CACnB,CAAC;EACD,MAAME,OAAO,GAAG3C,WAAW,CACzB,CAACwC,KAAa,EAAEP,IAAY,KAAK;IAC/B,IAAInB,KAAK,CAAC8B,IAAI,IAAIX,IAAI,KAAK,QAAQ,EAAE;MACnC,MAAMY,MAAM,GAAG,QAAQ;MACvB,IAAI,IAAIC,MAAM,CAAE,IAAGD,MAAO,IAAGA,MAAO,GAAE,CAAC,CAACE,IAAI,CAACP,KAAK,CAAC,EAAE;QACnDA,KAAK,GAAGA,KAAK,CAACQ,OAAO,CACnB,IAAIF,MAAM,CAAE,IAAGD,MAAO,KAAIA,MAAO,IAAG,EAAE,GAAG,CAAC,EAC1C,EACF,CAAC;QACDI,YAAY,CAACT,KAAK,CAAC;MACrB;IACF;IACA,OAAOA,KAAK;EACd,CAAC,EAED,CAAC1B,KAAK,CAAC8B,IAAI,CACb,CAAC;EACD,MAAMM,SAAS,GAAGpC,KAAK,CAACqC,cAAc;EACtC,MAAMA,cAAc,GAAGnD,WAAW,CAC/BwC,KAAa,IAAK;IACjB,IAAI1B,KAAK,CAACsC,UAAU,EAAE;MACpBZ,KAAK,GAAG9B,aAAa,CAAC2C,MAAM,CAACb,KAAK,IAAI,EAAE,CAAC,CAAC;IAC5C;IACA,OAAO,CAAAU,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAGV,KAAK,CAAC,KAAIA,KAAK;EACpC,CAAC,EACD,CAAC1B,KAAK,CAACsC,UAAU,EAAEF,SAAS,CAC9B,CAAC;EAED,MAAMI,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBzC,KAAK;IACRK,aAAa;IACbY,MAAM;IACNG,SAAS;IACTS,OAAO;IACPQ,cAAc;IACdK,KAAK,GAAAzC,YAAA,GACHD,KAAK,CAAC0C,KAAK,cAAAzC,YAAA,cAAAA,YAAA,GACVE,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEwC,WAAW,GAAG,SAAS,GAAG;EAAQ,EACzD;EAED,MAAM;IACJC,EAAE;IACFC,IAAI;IACJC,SAAS;IACTC,QAAQ;IACRC,cAAc;IACdC,MAAM;IACNC,WAAW;IACXC,KAAK;IACLC,gBAAgB;IAChB1B,KAAK;IACL2B,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,IAAI;IACJC,QAAQ;IACRC,SAAS;IACTpB,KAAK;IACLqB,cAAc;IACdC,aAAa;IAGb7C,IAAI;IACJ8C,KAAK;IACLC,KAAK;IACLC,IAAI;IACJC,SAAS;IACTC,eAAe;IAGfC,IAAI;IACJC,iBAAiB,GAAG,CAAC;IACrBC,UAAU,GAAG,IAAI;IACjBC,gBAAgB;IAGhBC,YAAY;IACZC,SAAS;IACTC,WAAW;IACXC,UAAU;IACVC,SAAS;IACTC,cAAc;IAGdC,WAAW;IACXC,UAAU;IACV9C;EACF,CAAC,GAAGzC,aAAa,CAAC8C,aAAa,CAAC;EAEhC,MAAM0C,kBAAkB,GAAGhG,WAAW,CACnCwC,KAAa,IAAM1B,KAAK,CAACsC,UAAU,GAAG1C,aAAa,CAAC8B,KAAK,CAAC,GAAGA,KAAM,EACpE,CAAC1B,KAAK,CAACsC,UAAU,CACnB,CAAC;EAED,MAAM6C,EAAE,GAAGhG,UAAU,CAAC,+BAA+B,EAAE6D,cAAc,CAAC;EAEtE,MAAMoC,WAAuC,GAAA3C,aAAA,CAAAA,aAAA;IAC3CG,EAAE;IACFC,IAAI;IACJ6B,YAAY;IACZE,WAAW;IACXC,UAAU;IACVC,SAAS;IACTC,cAAc;IACdJ,SAAS;IACT7B,SAAS,EAAEqC,EAAE;IACbjC,WAAW;IACXmC,MAAM,EAAE3B,IAAI,GACV3E,KAAA,CAAAuG,aAAA,CAAClG,UAAU;MAACmG,KAAK,EAAE7B,IAAI,CAAC6B;IAAM,GAAE7B,IAAI,CAAC8B,OAAoB,CAAC,GACxDC,SAAS;IACbC,QAAQ,EAAEV,WAAW;IACrBW,OAAO,EAAEV,UAAU;IACnBW,SAAS,EAAEzD,YAAY;IACvBsB;EAAQ,GACLM,cAAc;IACjB8B,OAAO,EAAEC,OAAO,CACdpD,KAAK,KAAK+C,SAAS,KAAItF,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEwC,WAAW,CACvD,CAAC;IACDoD,SAAS,EAAEhD,QAAQ;IACnBiD,MAAM,EAAExC,QAAQ,GAAG,OAAO,GAAGiC,SAAS;IACtC/D,KAAK,EAAEwD,kBAAkB,EAAAhF,eAAA,GAACwB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEuE,QAAQ,CAAC,CAAC,cAAA/F,eAAA,cAAAA,eAAA,GAAI,EAAE;EAAC,EACnD;EAED,MAAMgG,aAA4B,GAAG;IACnC7B,eAAe;IACfC,IAAI;IACJ6B,mBAAmB,EAAE5B,iBAAiB;IACtCC,UAAU;IACVC;EACF,CAAC;EAED,MAAM2B,UAAsB,GAAG;IAC7BjF,IAAI,EAAEA,IAAI;IACV8C,KAAK,EAAEA,KAAK;IACZE,IAAI,EAAEA,IAAI;IACVD,KAAK,EAAEA,KAAK;IACZE,SAAS,EAAEA,SAAS;IACpBiC,IAAI,EAAExC,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIC,SAAS;IAC3BwC,aAAa,EAAExC,SAAS,IAAI,CAACD,QAAQ,GAAG,OAAO,GAAG4B,SAAS;IAC3Dc,cAAc,EAAEvC,aAAa;IAC7BwC,gBAAgB,EAAEnC;EACpB,CAAC;EAED,MAAMoC,iBAAiB,GAAAhE,aAAA;IACrBK,SAAS,EAAE3D,UAAU,CAAC,wBAAwB,EAAE2D,SAAS,CAAC;IAC1D4D,KAAK,EAAE9D,EAAE;IACTK,MAAM;IACNE,KAAK;IACLC,gBAAgB;IAChBC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLE,QAAQ;IACRf,KAAK,EACHA,KAAK,KAAK,SAAS,IAAIvC,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEwC,WAAW,GACjDD,KAAK,GACL+C,SAAS;IACfkB,YAAY,EAAEjE,KAAK,KAAK,KAAK,GAAGA,KAAK,GAAG+C;EAAS,GAC9C9F,gBAAgB,CAACK,KAAK,CAAC,CAC3B;EAED,OACEjB,KAAA,CAAAuG,aAAA,CAAC7F,UAAU,EAAKgH,iBAAiB,EAC9B9C,SAAS,GACR5E,KAAA,CAAAuG,aAAA,CAAChG,QAAQ,EAAAsH,QAAA,KAAKxB,WAAW,EAAMc,aAAa,CAAG,CAAC,GAC9CtC,IAAI,GACN7E,KAAA,CAAAuG,aAAA,CAAC/F,WAAW,EAAAqH,QAAA,KAAKxB,WAAW,EAAMgB,UAAU;IAAExC,IAAI,EAAEA;EAAK,EAAE,CAAC,GAE5D7E,KAAA,CAAAuG,aAAA,CAACjG,KAAK,EAAAuH,QAAA,KAAKxB,WAAW,EAAMgB,UAAU,CAAG,CAEjC,CAAC;AAEjB;AAEArG,eAAe,CAAC8G,qBAAqB,GAAG,IAAI;AAC5C,eAAe9G,eAAe"}
|
|
1
|
+
{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","classnames","HelpButton","Input","Textarea","InputMasked","FieldBlockContext","FieldBlock","useFieldProps","pickSpacingProps","toCapitalized","useErrorMessage","useTranslation","StringComponent","props","_props$width","_value$toString","fieldBlockContext","translations","errorMessages","path","required","Field","errorRequired","minLength","StringField","errorMinLength","maxLength","errorMaxLength","pattern","errorPattern","schema","_props$schema","type","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transform","transformValue","capitalize","String","preparedProps","_objectSpread","width","composition","id","name","className","innerRef","inputClassName","layout","placeholder","label","labelDescription","info","warning","error","hasError","disabled","help","multiline","mask","leftIcon","rightIcon","htmlAttributes","submitElement","clear","align","size","selectall","keepPlaceholder","rows","autoresizeMaxRows","autoresize","characterCounter","autoComplete","inputMode","autoCorrect","spellCheck","autoFocus","autoCapitalize","handleFocus","handleBlur","transformInstantly","cn","sharedProps","suffix","createElement","title","content","undefined","on_focus","on_blur","on_change","stretch","Boolean","inner_ref","status","toString","textareaProps","autoresize_max_rows","inputProps","icon","icon_position","submit_element","keep_placeholder","fieldBlockProps","forId","contentWidth","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport { TextareaProps } from '../../../../components/Textarea'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\nimport type { TextCounterProps } from '../../../../fragments/TextCounter'\nimport type {\n FieldProps,\n FieldHelpProps,\n CustomErrorMessages,\n AllJSONSchemaVersions,\n FieldBlockWidth,\n} from '../../types'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\n\ninterface ErrorMessages extends CustomErrorMessages {\n required?: string\n schema?: string\n minLength?: string\n maxLength?: string\n pattern?: string\n}\nexport type Props = FieldHelpProps &\n FieldProps<string, undefined | string, ErrorMessages> & {\n // - Shared props\n multiline?: boolean\n inputClassName?: string\n innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n width?: FieldBlockWidth\n size?: InputProps['size'] | TextareaProps['size']\n keepPlaceholder?: InputProps['keep_placeholder']\n\n // - Validation\n minLength?: number\n maxLength?: number\n pattern?: string\n\n // - Input props\n type?: InputProps['type']\n align?: InputProps['align']\n selectall?: InputProps['selectall']\n clear?: boolean\n mask?: InputMaskedProps['mask']\n leftIcon?: string\n rightIcon?: string\n submitElement?: InputProps['submit_element']\n capitalize?: boolean\n trim?: boolean\n\n // - Textarea props\n rows?: TextareaProps['rows']\n autoresizeMaxRows?: TextareaProps['autoresize_max_rows']\n autoresize?: TextareaProps['autoresize']\n characterCounter?: Omit<TextCounterProps, 'text'> | number\n\n // - Html props\n autoComplete?: HTMLInputElement['autocomplete']\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect']\n spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck']\n autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus']\n autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize']\n }\n\nfunction StringComponent(props: Props) {\n const fieldBlockContext = useContext(FieldBlockContext)\n const translations = useTranslation()\n\n const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n required: translations.Field.errorRequired,\n minLength: translations.StringField.errorMinLength,\n maxLength: translations.StringField.errorMaxLength,\n pattern: translations.Field.errorPattern,\n })\n\n const schema = useMemo<AllJSONSchemaVersions>(\n () =>\n props.schema ?? {\n type: 'string',\n minLength: props.minLength,\n maxLength: props.maxLength,\n pattern: props.pattern,\n },\n [props.schema, props.minLength, props.maxLength, props.pattern]\n )\n const fromInput = useCallback(\n (event: { value: string; cleanedValue?: string }) => {\n if (typeof event === 'string') {\n event = { value: event }\n }\n if (event?.value === '') {\n return props.emptyValue\n }\n // Cleaned value for masked\n return event?.cleanedValue ?? event?.value\n },\n [props.emptyValue]\n )\n const toEvent = useCallback(\n (value: string, type: string) => {\n if (props.trim && type === 'onBlur') {\n const spaces = '[\\\\s ]'\n if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n value = value.replace(\n new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n ''\n )\n handleChange(value)\n }\n }\n return value\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [props.trim]\n )\n const transform = props.transformValue\n const transformValue = useCallback(\n (value: string) => {\n if (props.capitalize) {\n value = toCapitalized(String(value || ''))\n }\n return transform?.(value) || value\n },\n [props.capitalize, transform]\n )\n\n const preparedProps: Props = {\n ...props,\n errorMessages,\n schema,\n fromInput,\n toEvent,\n transformValue,\n width:\n props.width ??\n (fieldBlockContext?.composition ? 'stretch' : 'large'),\n }\n\n const {\n id,\n name,\n className,\n innerRef,\n inputClassName,\n layout,\n placeholder,\n label,\n labelDescription,\n value,\n info,\n warning,\n error,\n hasError,\n disabled,\n help,\n multiline,\n mask,\n leftIcon,\n rightIcon,\n width,\n htmlAttributes,\n submitElement,\n\n // - Input props\n type,\n clear,\n align,\n size,\n selectall,\n keepPlaceholder,\n\n // - Textarea props\n rows,\n autoresizeMaxRows = 6,\n autoresize = true,\n characterCounter,\n\n // - Html props\n autoComplete,\n inputMode,\n autoCorrect,\n spellCheck,\n autoFocus,\n autoCapitalize,\n\n // - Events\n handleFocus,\n handleBlur,\n handleChange,\n } = useFieldProps(preparedProps)\n\n const transformInstantly = useCallback(\n (value: string) => (props.capitalize ? toCapitalized(value) : value),\n [props.capitalize]\n )\n\n const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n const sharedProps: InputProps & TextareaProps = {\n id,\n name,\n autoComplete,\n autoCorrect,\n spellCheck,\n autoFocus,\n autoCapitalize,\n inputMode,\n className: cn,\n placeholder,\n suffix: help ? (\n <HelpButton title={help.title}>{help.content}</HelpButton>\n ) : undefined,\n on_focus: handleFocus,\n on_blur: handleBlur,\n on_change: handleChange,\n disabled,\n ...htmlAttributes,\n stretch: Boolean(\n width !== undefined || fieldBlockContext?.composition\n ),\n inner_ref: innerRef,\n status: hasError ? 'error' : undefined,\n value: transformInstantly(value?.toString() ?? ''),\n }\n\n const textareaProps: TextareaProps = {\n keepPlaceholder,\n rows,\n autoresize_max_rows: autoresizeMaxRows,\n autoresize,\n characterCounter,\n }\n\n const inputProps: InputProps = {\n type: type,\n clear: clear,\n size: size,\n align: align,\n selectall: selectall,\n icon: leftIcon ?? rightIcon,\n icon_position: rightIcon && !leftIcon ? 'right' : undefined,\n submit_element: submitElement,\n keep_placeholder: keepPlaceholder,\n }\n\n const fieldBlockProps = {\n className: classnames('dnb-forms-field-string', className),\n forId: id,\n layout,\n label,\n labelDescription,\n info,\n warning,\n error,\n disabled,\n width:\n width === 'stretch' || fieldBlockContext?.composition\n ? width\n : undefined,\n contentWidth: width !== false ? width : undefined,\n ...pickSpacingProps(props),\n }\n\n return (\n <FieldBlock {...fieldBlockProps}>\n {multiline ? (\n <Textarea {...sharedProps} {...textareaProps} />\n ) : mask ? (\n <InputMasked {...sharedProps} {...inputProps} mask={mask} />\n ) : (\n <Input {...sharedProps} {...inputProps} />\n )}\n </FieldBlock>\n )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}
|
|
@@ -48,7 +48,7 @@ function Toggle(props) {
|
|
|
48
48
|
handleChange === null || handleChange === void 0 ? void 0 : handleChange(value === 'on' ? valueOn : valueOff);
|
|
49
49
|
}, [handleChange, valueOn, valueOff]);
|
|
50
50
|
const cn = classnames('dnb-forms-field-toggle', className);
|
|
51
|
-
const
|
|
51
|
+
const fieldBlockPropsWithoutLabel = _objectSpread(_objectSpread({
|
|
52
52
|
forId: id,
|
|
53
53
|
className: cn
|
|
54
54
|
}, pickSpacingProps(props)), {}, {
|
|
@@ -57,7 +57,7 @@ function Toggle(props) {
|
|
|
57
57
|
error,
|
|
58
58
|
disabled
|
|
59
59
|
});
|
|
60
|
-
const
|
|
60
|
+
const fieldBlockProps = _objectSpread(_objectSpread({}, fieldBlockPropsWithoutLabel), {}, {
|
|
61
61
|
layout,
|
|
62
62
|
label,
|
|
63
63
|
labelDescription,
|
|
@@ -71,7 +71,7 @@ function Toggle(props) {
|
|
|
71
71
|
switch (variant) {
|
|
72
72
|
default:
|
|
73
73
|
case 'checkbox':
|
|
74
|
-
return React.createElement(FieldBlock,
|
|
74
|
+
return React.createElement(FieldBlock, fieldBlockPropsWithoutLabel, React.createElement(Checkbox, _extends({
|
|
75
75
|
id: id,
|
|
76
76
|
className: cn,
|
|
77
77
|
label: label !== null && label !== void 0 ? label : isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
|
|
@@ -82,7 +82,7 @@ function Toggle(props) {
|
|
|
82
82
|
onChange: handleCheckboxChange
|
|
83
83
|
}, htmlAttributes)));
|
|
84
84
|
case 'button':
|
|
85
|
-
return React.createElement(FieldBlock,
|
|
85
|
+
return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButton, _extends({
|
|
86
86
|
id: id,
|
|
87
87
|
text: isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
|
|
88
88
|
checked: isOn,
|
|
@@ -93,7 +93,7 @@ function Toggle(props) {
|
|
|
93
93
|
on_change: handleCheckboxChange
|
|
94
94
|
}, htmlAttributes)));
|
|
95
95
|
case 'buttons':
|
|
96
|
-
return React.createElement(FieldBlock, _extends({},
|
|
96
|
+
return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
|
|
97
97
|
asFieldset: true,
|
|
98
98
|
labelDescription: React.createElement(React.Fragment, null, labelDescription, help ? React.createElement(HelpButton, {
|
|
99
99
|
size: "small",
|
|
@@ -117,7 +117,7 @@ function Toggle(props) {
|
|
|
117
117
|
value: "off"
|
|
118
118
|
}, htmlAttributes)))));
|
|
119
119
|
case 'checkbox-button':
|
|
120
|
-
return React.createElement(FieldBlock,
|
|
120
|
+
return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButton, _extends({
|
|
121
121
|
id: id,
|
|
122
122
|
variant: "checkbox",
|
|
123
123
|
text: isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.js","names":["React","useCallback","classnames","Checkbox","HelpButton","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","BooleanField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","help","info","warning","error","hasError","htmlAttributes","handleChange","handleCheckboxChange","checked","handleToggleChange","cn","fieldSectionPropsWithoutLabel","forId","fieldSectionProps","suffix","createElement","title","content","undefined","isOn","isOff","_extends","yes","no","status","onChange","text","on_change","asFieldset","Fragment","size","left","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\n\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type ToggleProps = {\n valueOn: unknown\n valueOff: unknown\n variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n textOn?: string\n textOff?: string\n}\n\nexport type Props = FieldHelpProps & FieldProps<unknown> & ToggleProps\n\nfunction Toggle(props: Props) {\n const translations = useTranslation().BooleanField\n\n const preparedProps: Props = {\n ...props,\n errorMessages: props.errorMessages,\n }\n\n const {\n id,\n className,\n valueOn,\n valueOff,\n layout,\n variant,\n disabled,\n label,\n labelDescription,\n textOn,\n textOff,\n value,\n help,\n info,\n warning,\n error,\n hasError,\n htmlAttributes,\n handleChange,\n } = useFieldProps(preparedProps)\n\n const handleCheckboxChange = useCallback(\n ({ checked }) => {\n handleChange?.(checked ? valueOn : valueOff)\n },\n [handleChange, valueOn, valueOff]\n )\n const handleToggleChange = useCallback(\n ({ value }) => {\n handleChange?.(value === 'on' ? valueOn : valueOff)\n },\n [handleChange, valueOn, valueOff]\n )\n\n const cn = classnames('dnb-forms-field-toggle', className)\n\n const fieldSectionPropsWithoutLabel = {\n forId: id,\n className: cn,\n ...pickSpacingProps(props),\n info,\n warning,\n error,\n disabled,\n }\n\n const fieldSectionProps = {\n ...fieldSectionPropsWithoutLabel,\n layout,\n label,\n labelDescription,\n disabled,\n }\n\n const suffix = help ? (\n <HelpButton title={help.title}>{help.content}</HelpButton>\n ) : undefined\n\n const isOn = value === valueOn\n const isOff = value === valueOff\n\n switch (variant) {\n default:\n case 'checkbox':\n return (\n <FieldBlock {...fieldSectionPropsWithoutLabel}>\n <Checkbox\n id={id}\n className={cn}\n label={\n label ??\n (isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no)\n }\n checked={isOn}\n disabled={disabled}\n status={hasError ? 'error' : undefined}\n suffix={suffix}\n onChange={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n case 'button':\n return (\n <FieldBlock {...fieldSectionProps}>\n <ToggleButton\n id={id}\n text={\n isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no\n }\n checked={isOn}\n disabled={disabled}\n status={hasError ? 'error' : undefined}\n suffix={suffix}\n value={value ? 'true' : 'false'}\n on_change={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n case 'buttons':\n return (\n <FieldBlock\n {...fieldSectionProps}\n asFieldset\n labelDescription={\n <>\n {labelDescription}\n {help ? (\n <HelpButton\n size=\"small\"\n left={labelDescription ? 'x-small' : false}\n title={help.title}\n >\n {help.content}\n </HelpButton>\n ) : undefined}\n </>\n }\n >\n <ButtonRow bottom=\"x-small\">\n <ToggleButtonGroupContext.Provider\n value={{\n value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n onChange: handleToggleChange,\n status: hasError ? 'error' : undefined,\n disabled,\n }}\n >\n <ToggleButton\n text={textOn ?? translations.yes}\n value=\"on\"\n {...htmlAttributes}\n />\n <ToggleButton\n text={textOff ?? translations.no}\n value=\"off\"\n {...htmlAttributes}\n />\n </ToggleButtonGroupContext.Provider>\n </ButtonRow>\n </FieldBlock>\n )\n case 'checkbox-button':\n return (\n <FieldBlock {...fieldSectionProps}>\n <ToggleButton\n id={id}\n variant=\"checkbox\"\n text={\n isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no\n }\n checked={isOn}\n disabled={disabled}\n status={hasError ? 'error' : undefined}\n suffix={suffix}\n value={value ? 'true' : 'false'}\n on_change={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Toggle.js","names":["React","useCallback","classnames","Checkbox","HelpButton","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","BooleanField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","help","info","warning","error","hasError","htmlAttributes","handleChange","handleCheckboxChange","checked","handleToggleChange","cn","fieldBlockPropsWithoutLabel","forId","fieldBlockProps","suffix","createElement","title","content","undefined","isOn","isOff","_extends","yes","no","status","onChange","text","on_change","asFieldset","Fragment","size","left","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\n\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type ToggleProps = {\n valueOn: unknown\n valueOff: unknown\n variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n textOn?: string\n textOff?: string\n}\n\nexport type Props = FieldHelpProps & FieldProps<unknown> & ToggleProps\n\nfunction Toggle(props: Props) {\n const translations = useTranslation().BooleanField\n\n const preparedProps: Props = {\n ...props,\n errorMessages: props.errorMessages,\n }\n\n const {\n id,\n className,\n valueOn,\n valueOff,\n layout,\n variant,\n disabled,\n label,\n labelDescription,\n textOn,\n textOff,\n value,\n help,\n info,\n warning,\n error,\n hasError,\n htmlAttributes,\n handleChange,\n } = useFieldProps(preparedProps)\n\n const handleCheckboxChange = useCallback(\n ({ checked }) => {\n handleChange?.(checked ? valueOn : valueOff)\n },\n [handleChange, valueOn, valueOff]\n )\n const handleToggleChange = useCallback(\n ({ value }) => {\n handleChange?.(value === 'on' ? valueOn : valueOff)\n },\n [handleChange, valueOn, valueOff]\n )\n\n const cn = classnames('dnb-forms-field-toggle', className)\n\n const fieldBlockPropsWithoutLabel = {\n forId: id,\n className: cn,\n ...pickSpacingProps(props),\n info,\n warning,\n error,\n disabled,\n }\n\n const fieldBlockProps = {\n ...fieldBlockPropsWithoutLabel,\n layout,\n label,\n labelDescription,\n disabled,\n }\n\n const suffix = help ? (\n <HelpButton title={help.title}>{help.content}</HelpButton>\n ) : undefined\n\n const isOn = value === valueOn\n const isOff = value === valueOff\n\n switch (variant) {\n default:\n case 'checkbox':\n return (\n <FieldBlock {...fieldBlockPropsWithoutLabel}>\n <Checkbox\n id={id}\n className={cn}\n label={\n label ??\n (isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no)\n }\n checked={isOn}\n disabled={disabled}\n status={hasError ? 'error' : undefined}\n suffix={suffix}\n onChange={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n case 'button':\n return (\n <FieldBlock {...fieldBlockProps}>\n <ToggleButton\n id={id}\n text={\n isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no\n }\n checked={isOn}\n disabled={disabled}\n status={hasError ? 'error' : undefined}\n suffix={suffix}\n value={value ? 'true' : 'false'}\n on_change={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n case 'buttons':\n return (\n <FieldBlock\n {...fieldBlockProps}\n asFieldset\n labelDescription={\n <>\n {labelDescription}\n {help ? (\n <HelpButton\n size=\"small\"\n left={labelDescription ? 'x-small' : false}\n title={help.title}\n >\n {help.content}\n </HelpButton>\n ) : undefined}\n </>\n }\n >\n <ButtonRow bottom=\"x-small\">\n <ToggleButtonGroupContext.Provider\n value={{\n value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n onChange: handleToggleChange,\n status: hasError ? 'error' : undefined,\n disabled,\n }}\n >\n <ToggleButton\n text={textOn ?? translations.yes}\n value=\"on\"\n {...htmlAttributes}\n />\n <ToggleButton\n text={textOff ?? translations.no}\n value=\"off\"\n {...htmlAttributes}\n />\n </ToggleButtonGroupContext.Provider>\n </ButtonRow>\n </FieldBlock>\n )\n case 'checkbox-button':\n return (\n <FieldBlock {...fieldBlockProps}>\n <ToggleButton\n id={id}\n variant=\"checkbox\"\n text={\n isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no\n }\n checked={isOn}\n disabled={disabled}\n status={hasError ? 'error' : undefined}\n suffix={suffix}\n value={value ? 'true' : 'false'}\n on_change={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,YAAY,QAAQ,wBAAwB;AAC3E,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAE3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,wBAAwB,MAAM,+DAA+D;AACpG,OAAOC,cAAc,MAAM,4BAA4B;AAYvD,SAASC,MAAMA,CAACC,KAAY,EAAE;EAC5B,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACI,YAAY;EAElD,MAAMC,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBJ,KAAK;IACRK,aAAa,EAAEL,KAAK,CAACK;EAAa,EACnC;EAED,MAAM;IACJC,EAAE;IACFC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,KAAK;IACLC,gBAAgB;IAChBC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,IAAI;IACJC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC,cAAc;IACdC;EACF,CAAC,GAAG7B,aAAa,CAACQ,aAAa,CAAC;EAEhC,MAAMsB,oBAAoB,GAAGrC,WAAW,CACtC,CAAC;IAAEsC;EAAQ,CAAC,KAAK;IACfF,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGE,OAAO,GAAGlB,OAAO,GAAGC,QAAQ,CAAC;EAC9C,CAAC,EACD,CAACe,YAAY,EAAEhB,OAAO,EAAEC,QAAQ,CAClC,CAAC;EACD,MAAMkB,kBAAkB,GAAGvC,WAAW,CACpC,CAAC;IAAE6B;EAAM,CAAC,KAAK;IACbO,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGP,KAAK,KAAK,IAAI,GAAGT,OAAO,GAAGC,QAAQ,CAAC;EACrD,CAAC,EACD,CAACe,YAAY,EAAEhB,OAAO,EAAEC,QAAQ,CAClC,CAAC;EAED,MAAMmB,EAAE,GAAGvC,UAAU,CAAC,wBAAwB,EAAEkB,SAAS,CAAC;EAE1D,MAAMsB,2BAA2B,GAAAzB,aAAA,CAAAA,aAAA;IAC/B0B,KAAK,EAAExB,EAAE;IACTC,SAAS,EAAEqB;EAAE,GACVhC,gBAAgB,CAACI,KAAK,CAAC;IAC1BmB,IAAI;IACJC,OAAO;IACPC,KAAK;IACLT;EAAQ,EACT;EAED,MAAMmB,eAAe,GAAA3B,aAAA,CAAAA,aAAA,KAChByB,2BAA2B;IAC9BnB,MAAM;IACNG,KAAK;IACLC,gBAAgB;IAChBF;EAAQ,EACT;EAED,MAAMoB,MAAM,GAAGd,IAAI,GACjB/B,KAAA,CAAA8C,aAAA,CAAC1C,UAAU;IAAC2C,KAAK,EAAEhB,IAAI,CAACgB;EAAM,GAAEhB,IAAI,CAACiB,OAAoB,CAAC,GACxDC,SAAS;EAEb,MAAMC,IAAI,GAAGpB,KAAK,KAAKT,OAAO;EAC9B,MAAM8B,KAAK,GAAGrB,KAAK,KAAKR,QAAQ;EAEhC,QAAQE,OAAO;IACb;IACA,KAAK,UAAU;MACb,OACExB,KAAA,CAAA8C,aAAA,CAACvC,UAAU,EAAKmC,2BAA2B,EACzC1C,KAAA,CAAA8C,aAAA,CAAC3C,QAAQ,EAAAiD,QAAA;QACPjC,EAAE,EAAEA,EAAG;QACPC,SAAS,EAAEqB,EAAG;QACdf,KAAK,EACHA,KAAK,aAALA,KAAK,cAALA,KAAK,GACJwB,IAAI,GACDtB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAId,YAAY,CAACuC,GAAG,GAC1BxB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIf,YAAY,CAACwC,EAC7B;QACDf,OAAO,EAAEW,IAAK;QACdzB,QAAQ,EAAEA,QAAS;QACnB8B,MAAM,EAAEpB,QAAQ,GAAG,OAAO,GAAGc,SAAU;QACvCJ,MAAM,EAAEA,MAAO;QACfW,QAAQ,EAAElB;MAAqB,GAC3BF,cAAc,CACnB,CACS,CAAC;IAEjB,KAAK,QAAQ;MACX,OACEpC,KAAA,CAAA8C,aAAA,CAACvC,UAAU,EAAKqC,eAAe,EAC7B5C,KAAA,CAAA8C,aAAA,CAACzC,YAAY,EAAA+C,QAAA;QACXjC,EAAE,EAAEA,EAAG;QACPsC,IAAI,EACFP,IAAI,GACAtB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAId,YAAY,CAACuC,GAAG,GAC1BxB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIf,YAAY,CAACwC,EAC7B;QACDf,OAAO,EAAEW,IAAK;QACdzB,QAAQ,EAAEA,QAAS;QACnB8B,MAAM,EAAEpB,QAAQ,GAAG,OAAO,GAAGc,SAAU;QACvCJ,MAAM,EAAEA,MAAO;QACff,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChC4B,SAAS,EAAEpB;MAAqB,GAC5BF,cAAc,CACnB,CACS,CAAC;IAEjB,KAAK,SAAS;MACZ,OACEpC,KAAA,CAAA8C,aAAA,CAACvC,UAAU,EAAA6C,QAAA,KACLR,eAAe;QACnBe,UAAU;QACVhC,gBAAgB,EACd3B,KAAA,CAAA8C,aAAA,CAAA9C,KAAA,CAAA4D,QAAA,QACGjC,gBAAgB,EAChBI,IAAI,GACH/B,KAAA,CAAA8C,aAAA,CAAC1C,UAAU;UACTyD,IAAI,EAAC,OAAO;UACZC,IAAI,EAAEnC,gBAAgB,GAAG,SAAS,GAAG,KAAM;UAC3CoB,KAAK,EAAEhB,IAAI,CAACgB;QAAM,GAEjBhB,IAAI,CAACiB,OACI,CAAC,GACXC,SACJ;MACH,IAEDjD,KAAA,CAAA8C,aAAA,CAACxC,SAAS;QAACyD,MAAM,EAAC;MAAS,GACzB/D,KAAA,CAAA8C,aAAA,CAACpC,wBAAwB,CAACsD,QAAQ;QAChClC,KAAK,EAAE;UACLA,KAAK,EAAEoB,IAAI,GAAG,IAAI,GAAGC,KAAK,GAAG,KAAK,GAAG,IAAI;UACzCK,QAAQ,EAAEhB,kBAAkB;UAC5Be,MAAM,EAAEpB,QAAQ,GAAG,OAAO,GAAGc,SAAS;UACtCxB;QACF;MAAE,GAEFzB,KAAA,CAAA8C,aAAA,CAACzC,YAAY,EAAA+C,QAAA;QACXK,IAAI,EAAE7B,MAAM,aAANA,MAAM,cAANA,MAAM,GAAId,YAAY,CAACuC,GAAI;QACjCvB,KAAK,EAAC;MAAI,GACNM,cAAc,CACnB,CAAC,EACFpC,KAAA,CAAA8C,aAAA,CAACzC,YAAY,EAAA+C,QAAA;QACXK,IAAI,EAAE5B,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIf,YAAY,CAACwC,EAAG;QACjCxB,KAAK,EAAC;MAAK,GACPM,cAAc,CACnB,CACgC,CAC1B,CACD,CAAC;IAEjB,KAAK,iBAAiB;MACpB,OACEpC,KAAA,CAAA8C,aAAA,CAACvC,UAAU,EAAKqC,eAAe,EAC7B5C,KAAA,CAAA8C,aAAA,CAACzC,YAAY,EAAA+C,QAAA;QACXjC,EAAE,EAAEA,EAAG;QACPK,OAAO,EAAC,UAAU;QAClBiC,IAAI,EACFP,IAAI,GACAtB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAId,YAAY,CAACuC,GAAG,GAC1BxB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIf,YAAY,CAACwC,EAC7B;QACDf,OAAO,EAAEW,IAAK;QACdzB,QAAQ,EAAEA,QAAS;QACnB8B,MAAM,EAAEpB,QAAQ,GAAG,OAAO,GAAGc,SAAU;QACvCJ,MAAM,EAAEA,MAAO;QACff,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChC4B,SAAS,EAAEpB;MAAqB,GAC5BF,cAAc,CACnB,CACS,CAAC;EAEnB;AACF;AAEAxB,MAAM,CAACqD,qBAAqB,GAAG,IAAI;AACnC,eAAerD,MAAM"}
|
|
@@ -23,6 +23,11 @@ export const ToggleProperties = {
|
|
|
23
23
|
doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',
|
|
24
24
|
type: 'string',
|
|
25
25
|
status: 'optional'
|
|
26
|
+
},
|
|
27
|
+
help: {
|
|
28
|
+
doc: 'Provide a help button. Object consisting of `title` and `content`.',
|
|
29
|
+
type: 'object',
|
|
30
|
+
status: 'optional'
|
|
26
31
|
}
|
|
27
32
|
};
|
|
28
33
|
//# sourceMappingURL=ToggleDocs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleDocs.js","names":["ToggleProperties","valueOn","doc","type","status","valueOff","textOn","textOff","variant"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/ToggleDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ToggleProperties: PropertiesTableProps = {\n valueOn: {\n doc: 'Source data value when the toggle is in the \"on-state\" (varies based on UI variant).',\n type: ['string', 'number', 'boolean'],\n status: 'required',\n },\n valueOff: {\n doc: 'Source data value when the toggle is in the \"off-state\".',\n type: ['string', 'number', 'boolean'],\n status: 'required',\n },\n textOn: {\n doc: 'Text to show in the UI when in the \"on-state\".',\n type: 'string',\n status: 'optional',\n },\n textOff: {\n doc: 'Text to show in the UI when in the \"off-state\".',\n type: 'string',\n status: 'optional',\n },\n variant: {\n doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',\n type: 'string',\n status: 'optional',\n },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,OAAO,EAAE;IACPC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"ToggleDocs.js","names":["ToggleProperties","valueOn","doc","type","status","valueOff","textOn","textOff","variant","help"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/ToggleDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ToggleProperties: PropertiesTableProps = {\n valueOn: {\n doc: 'Source data value when the toggle is in the \"on-state\" (varies based on UI variant).',\n type: ['string', 'number', 'boolean'],\n status: 'required',\n },\n valueOff: {\n doc: 'Source data value when the toggle is in the \"off-state\".',\n type: ['string', 'number', 'boolean'],\n status: 'required',\n },\n textOn: {\n doc: 'Text to show in the UI when in the \"on-state\".',\n type: 'string',\n status: 'optional',\n },\n textOff: {\n doc: 'Text to show in the UI when in the \"off-state\".',\n type: 'string',\n status: 'optional',\n },\n variant: {\n doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',\n type: 'string',\n status: 'optional',\n },\n help: {\n doc: 'Provide a help button. Object consisting of `title` and `content`.',\n type: 'object',\n status: 'optional',\n },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,OAAO,EAAE;IACPC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FieldBlockWidth, FieldHelpProps, FieldProps } from '../../types';
|
|
2
|
+
import { UploadFile, UploadProps } from '../../../../components/Upload';
|
|
3
|
+
import { SpacingProps } from '../../../../shared/types';
|
|
4
|
+
export type UploadValue = Array<UploadFile>;
|
|
5
|
+
export type Props = FieldHelpProps & Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> & SpacingProps & {
|
|
6
|
+
width?: Omit<FieldBlockWidth, 'medium' | 'small'>;
|
|
7
|
+
} & Pick<Partial<UploadProps>, 'title' | 'text' | 'acceptedFileTypes' | 'filesAmountLimit' | 'fileMaxSize' | 'onFileDelete' | 'skeleton'>;
|
|
8
|
+
declare function UploadComponent(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare namespace UploadComponent {
|
|
10
|
+
var _supportsSpacingProps: boolean;
|
|
11
|
+
}
|
|
12
|
+
export default UploadComponent;
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
6
|
+
const _excluded = ["id", "className", "width", "layout", "value", "label", "labelDescription", "disabled", "help", "info", "warning", "error", "htmlAttributes", "handleChange", "handleFocus", "handleBlur"];
|
|
7
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
8
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
9
|
+
import React, { useCallback, useEffect } from 'react';
|
|
10
|
+
import FieldBlock from '../../FieldBlock';
|
|
11
|
+
import { useFieldProps, useTranslation as useFormsTranslation } from '../../hooks';
|
|
12
|
+
import { FormError } from '../../types';
|
|
13
|
+
import Upload from '../../../../components/Upload';
|
|
14
|
+
import useUpload from '../../../../components/upload/useUpload';
|
|
15
|
+
import { pickSpacingProps } from '../../../../components/flex/utils';
|
|
16
|
+
import { HelpButton } from '../../../../components';
|
|
17
|
+
import { useTranslation as useSharedTranslation } from '../../../../shared';
|
|
18
|
+
function UploadComponent(props) {
|
|
19
|
+
const validateRequired = useCallback((value, {
|
|
20
|
+
required,
|
|
21
|
+
isChanged,
|
|
22
|
+
error
|
|
23
|
+
}) => {
|
|
24
|
+
const hasError = value === null || value === void 0 ? void 0 : value.some(file => file.errorMessage);
|
|
25
|
+
if (hasError) {
|
|
26
|
+
return new FormError(error.message, {
|
|
27
|
+
validationRule: 'invalid'
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
if (required && (!isChanged || !(value.length > 0))) {
|
|
31
|
+
return error;
|
|
32
|
+
}
|
|
33
|
+
return undefined;
|
|
34
|
+
}, []);
|
|
35
|
+
const sharedTr = useSharedTranslation().Upload;
|
|
36
|
+
const formsTr = useFormsTranslation().Upload;
|
|
37
|
+
const preparedProps = _objectSpread({
|
|
38
|
+
errorMessages: {
|
|
39
|
+
required: formsTr.errorRequired,
|
|
40
|
+
invalid: formsTr.errorInvalidFiles
|
|
41
|
+
},
|
|
42
|
+
validateRequired
|
|
43
|
+
}, props);
|
|
44
|
+
const _useFieldProps = useFieldProps(preparedProps, {
|
|
45
|
+
executeOnChangeRegardlessOfError: true
|
|
46
|
+
}),
|
|
47
|
+
{
|
|
48
|
+
id,
|
|
49
|
+
className,
|
|
50
|
+
width: widthProp = 'stretch',
|
|
51
|
+
layout,
|
|
52
|
+
value,
|
|
53
|
+
label,
|
|
54
|
+
labelDescription,
|
|
55
|
+
disabled,
|
|
56
|
+
help,
|
|
57
|
+
info,
|
|
58
|
+
warning,
|
|
59
|
+
error,
|
|
60
|
+
htmlAttributes,
|
|
61
|
+
handleChange,
|
|
62
|
+
handleFocus,
|
|
63
|
+
handleBlur
|
|
64
|
+
} = _useFieldProps,
|
|
65
|
+
rest = _objectWithoutProperties(_useFieldProps, _excluded);
|
|
66
|
+
const {
|
|
67
|
+
title = sharedTr.title,
|
|
68
|
+
text = sharedTr.text,
|
|
69
|
+
acceptedFileTypes = ['pdf', 'png', 'jpg', 'jpeg'],
|
|
70
|
+
filesAmountLimit = 100,
|
|
71
|
+
fileMaxSize = 5,
|
|
72
|
+
skeleton,
|
|
73
|
+
onFileDelete
|
|
74
|
+
} = rest;
|
|
75
|
+
const {
|
|
76
|
+
setFiles
|
|
77
|
+
} = useUpload(id);
|
|
78
|
+
useEffect(() => {
|
|
79
|
+
setFiles(value);
|
|
80
|
+
}, [handleBlur, setFiles, value]);
|
|
81
|
+
const changeHandler = useCallback(({
|
|
82
|
+
files
|
|
83
|
+
}) => {
|
|
84
|
+
handleBlur();
|
|
85
|
+
handleFocus();
|
|
86
|
+
handleChange(files);
|
|
87
|
+
}, [handleBlur, handleChange, handleFocus]);
|
|
88
|
+
const width = widthProp;
|
|
89
|
+
const fieldBlockProps = _objectSpread({
|
|
90
|
+
forId: id,
|
|
91
|
+
layout,
|
|
92
|
+
label,
|
|
93
|
+
labelSrOnly: true,
|
|
94
|
+
info,
|
|
95
|
+
warning,
|
|
96
|
+
error,
|
|
97
|
+
className,
|
|
98
|
+
disabled,
|
|
99
|
+
width
|
|
100
|
+
}, pickSpacingProps(props));
|
|
101
|
+
return React.createElement(FieldBlock, fieldBlockProps, React.createElement(Upload, _extends({
|
|
102
|
+
id: id,
|
|
103
|
+
acceptedFileTypes: acceptedFileTypes,
|
|
104
|
+
filesAmountLimit: filesAmountLimit,
|
|
105
|
+
fileMaxSize: fileMaxSize,
|
|
106
|
+
skeleton: skeleton,
|
|
107
|
+
onChange: changeHandler,
|
|
108
|
+
onFileDelete: onFileDelete,
|
|
109
|
+
title: label !== null && label !== void 0 ? label : title,
|
|
110
|
+
text: help ? React.createElement(React.Fragment, null, labelDescription !== null && labelDescription !== void 0 ? labelDescription : text, React.createElement(HelpButton, {
|
|
111
|
+
left: text ? 'x-small' : false,
|
|
112
|
+
title: help.title
|
|
113
|
+
}, help.content)) : labelDescription !== null && labelDescription !== void 0 ? labelDescription : text
|
|
114
|
+
}, htmlAttributes)));
|
|
115
|
+
}
|
|
116
|
+
export default UploadComponent;
|
|
117
|
+
UploadComponent._supportsSpacingProps = true;
|
|
118
|
+
//# sourceMappingURL=Upload.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Upload.js","names":["React","useCallback","useEffect","FieldBlock","useFieldProps","useTranslation","useFormsTranslation","FormError","Upload","useUpload","pickSpacingProps","HelpButton","useSharedTranslation","UploadComponent","props","validateRequired","value","required","isChanged","error","hasError","some","file","errorMessage","message","validationRule","length","undefined","sharedTr","formsTr","preparedProps","_objectSpread","errorMessages","errorRequired","invalid","errorInvalidFiles","_useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","layout","label","labelDescription","disabled","help","info","warning","htmlAttributes","handleChange","handleFocus","handleBlur","rest","_objectWithoutProperties","_excluded","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","setFiles","changeHandler","files","fieldBlockProps","forId","labelSrOnly","createElement","_extends","onChange","Fragment","left","content","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Upload/Upload.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport {\n useFieldProps,\n useTranslation as useFormsTranslation,\n} from '../../hooks'\nimport {\n FieldBlockWidth,\n FieldHelpProps,\n FieldProps,\n FormError,\n} from '../../types'\nimport Upload, {\n UploadFile,\n UploadProps,\n} from '../../../../components/Upload'\nimport useUpload from '../../../../components/upload/useUpload'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { HelpButton } from '../../../../components'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport { SpacingProps } from '../../../../shared/types'\n\nexport type UploadValue = Array<UploadFile>\nexport type Props = FieldHelpProps &\n Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> &\n SpacingProps & {\n width?: Omit<FieldBlockWidth, 'medium' | 'small'>\n } & Pick<\n Partial<UploadProps>,\n | 'title'\n | 'text'\n | 'acceptedFileTypes'\n | 'filesAmountLimit'\n | 'fileMaxSize'\n | 'onFileDelete'\n | 'skeleton'\n >\n\nfunction UploadComponent(props: Props) {\n const validateRequired = useCallback(\n (value: UploadValue, { required, isChanged, error }) => {\n const hasError = value?.some((file) => file.errorMessage)\n if (hasError) {\n return new FormError(error.message, {\n validationRule: 'invalid',\n })\n }\n\n if (required && (!isChanged || !(value.length > 0))) {\n return error\n }\n\n return undefined\n },\n []\n )\n\n const sharedTr = useSharedTranslation().Upload\n const formsTr = useFormsTranslation().Upload\n\n const preparedProps = {\n errorMessages: {\n required: formsTr.errorRequired,\n invalid: formsTr.errorInvalidFiles,\n },\n validateRequired,\n ...props,\n }\n\n const {\n id,\n className,\n width: widthProp = 'stretch',\n layout,\n value,\n label,\n labelDescription,\n disabled,\n help,\n info,\n warning,\n error,\n htmlAttributes,\n handleChange,\n handleFocus,\n handleBlur,\n ...rest\n } = useFieldProps(preparedProps, {\n executeOnChangeRegardlessOfError: true,\n })\n\n // Upload props\n const {\n title = sharedTr.title,\n text = sharedTr.text,\n acceptedFileTypes = ['pdf', 'png', 'jpg', 'jpeg'],\n filesAmountLimit = 100,\n fileMaxSize = 5,\n skeleton,\n onFileDelete,\n } = rest\n\n const { setFiles } = useUpload(id)\n\n useEffect(() => {\n setFiles(value)\n }, [handleBlur, setFiles, value])\n\n const changeHandler = useCallback(\n ({ files }: { files: UploadValue }) => {\n // Prevents the form-status from showing up\n handleBlur()\n handleFocus()\n handleChange(files)\n },\n [handleBlur, handleChange, handleFocus]\n )\n\n const width = widthProp as FieldBlockWidth\n const fieldBlockProps: FieldBlockProps = {\n forId: id,\n layout,\n label,\n labelSrOnly: true,\n info,\n warning,\n error,\n className,\n disabled,\n width,\n ...pickSpacingProps(props),\n }\n\n return (\n <FieldBlock {...fieldBlockProps}>\n <Upload\n id={id}\n acceptedFileTypes={acceptedFileTypes}\n filesAmountLimit={filesAmountLimit}\n fileMaxSize={fileMaxSize}\n skeleton={skeleton}\n onChange={changeHandler}\n onFileDelete={onFileDelete}\n title={label ?? title}\n text={\n help ? (\n <>\n {labelDescription ?? text}\n <HelpButton\n left={text ? 'x-small' : false}\n title={help.title}\n >\n {help.content}\n </HelpButton>\n </>\n ) : (\n labelDescription ?? text\n )\n }\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n}\n\nexport default UploadComponent\n\nUploadComponent._supportsSpacingProps = true\n"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
import { UploadEvents, UploadProperties } from '../../../../components/upload/UploadDocs';
|
|
5
|
+
export const UploadFieldProperties = _objectSpread(_objectSpread({}, UploadProperties), {}, {
|
|
6
|
+
title: undefined,
|
|
7
|
+
text: undefined
|
|
8
|
+
});
|
|
9
|
+
export const UploadFieldEvents = _objectSpread({}, UploadEvents);
|
|
10
|
+
//# sourceMappingURL=UploadDocs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UploadDocs.js","names":["UploadEvents","UploadProperties","UploadFieldProperties","_objectSpread","title","undefined","text","UploadFieldEvents"],"sources":["../../../../../../src/extensions/forms/Field/Upload/UploadDocs.ts"],"sourcesContent":["import {\n UploadEvents,\n UploadProperties,\n} from '../../../../components/upload/UploadDocs'\nimport { PropertiesTableProps } from '../../../../shared/types'\n\nexport const UploadFieldProperties: PropertiesTableProps = {\n ...UploadProperties,\n title: undefined,\n text: undefined,\n}\n\nexport const UploadFieldEvents: PropertiesTableProps = {\n ...UploadEvents,\n}\n"],"mappings":";;;AAAA,SACEA,YAAY,EACZC,gBAAgB,QACX,0CAA0C;AAGjD,OAAO,MAAMC,qBAA2C,GAAAC,aAAA,CAAAA,aAAA,KACnDF,gBAAgB;EACnBG,KAAK,EAAEC,SAAS;EAChBC,IAAI,EAAED;AAAS,EAChB;AAED,OAAO,MAAME,iBAAuC,GAAAJ,aAAA,KAC/CH,YAAY,CAChB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../../src/extensions/forms/Field/Upload/index.ts"],"sourcesContent":["export { default } from './Upload'\nexport * from './Upload'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,UAAU;AAClC,cAAc,UAAU"}
|
|
@@ -20,4 +20,5 @@ export { default as BankAccountNumber } from './BankAccountNumber';
|
|
|
20
20
|
export { default as Expiry } from './Expiry';
|
|
21
21
|
export { default as Password } from './Password';
|
|
22
22
|
export { default as Slider } from './Slider';
|
|
23
|
+
export { default as Upload } from './Upload';
|
|
23
24
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default","Composition","String","Number","Toggle","Indeterminate","Boolean","Currency","Date","Email","Name","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Expiry","Password","Slider"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["export { default as Composition } from './Composition'\nexport { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Toggle } from './Toggle'\nexport { default as Indeterminate } from './Indeterminate'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as Name } from './Name'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as Selection } from './Selection'\nexport { default as ArraySelection } from './ArraySelection'\nexport { default as Option } from './Option'\nexport { default as SelectCountry } from './SelectCountry'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as Expiry } from './Expiry'\nexport { default as Password } from './Password'\nexport { default as Slider } from './Slider'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAAW,QAAQ,eAAe;AACtD,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,MAAM,QAAQ,UAAU;AAC5C,SAASH,OAAO,IAAII,MAAM,QAAQ,UAAU;AAC5C,SAASJ,OAAO,IAAIK,aAAa,QAAQ,iBAAiB;AAC1D,SAASL,OAAO,IAAIM,OAAO,QAAQ,WAAW;AAC9C,SAASN,OAAO,IAAIO,QAAQ,QAAQ,YAAY;AAChD,SAASP,OAAO,IAAIQ,IAAI,QAAQ,QAAQ;AACxC,SAASR,OAAO,IAAIS,KAAK,QAAQ,SAAS;AAC1C,SAAST,OAAO,IAAIU,IAAI,QAAQ,QAAQ;AACxC,SAASV,OAAO,IAAIW,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASX,OAAO,IAAIY,WAAW,QAAQ,eAAe;AACtD,SAASZ,OAAO,IAAIa,kBAAkB,QAAQ,sBAAsB;AACpE,SAASb,OAAO,IAAIc,iBAAiB,QAAQ,qBAAqB;AAClE,SAASd,OAAO,IAAIe,SAAS,QAAQ,aAAa;AAClD,SAASf,OAAO,IAAIgB,cAAc,QAAQ,kBAAkB;AAC5D,SAAShB,OAAO,IAAIiB,MAAM,QAAQ,UAAU;AAC5C,SAASjB,OAAO,IAAIkB,aAAa,QAAQ,iBAAiB;AAC1D,SAASlB,OAAO,IAAImB,iBAAiB,QAAQ,qBAAqB;AAClE,SAASnB,OAAO,IAAIoB,MAAM,QAAQ,UAAU;AAC5C,SAASpB,OAAO,IAAIqB,QAAQ,QAAQ,YAAY;AAChD,SAASrB,OAAO,IAAIsB,MAAM,QAAQ,UAAU"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","Composition","String","Number","Toggle","Indeterminate","Boolean","Currency","Date","Email","Name","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Expiry","Password","Slider","Upload"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["export { default as Composition } from './Composition'\nexport { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Toggle } from './Toggle'\nexport { default as Indeterminate } from './Indeterminate'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as Name } from './Name'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as Selection } from './Selection'\nexport { default as ArraySelection } from './ArraySelection'\nexport { default as Option } from './Option'\nexport { default as SelectCountry } from './SelectCountry'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as Expiry } from './Expiry'\nexport { default as Password } from './Password'\nexport { default as Slider } from './Slider'\nexport { default as Upload } from './Upload'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAAW,QAAQ,eAAe;AACtD,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,MAAM,QAAQ,UAAU;AAC5C,SAASH,OAAO,IAAII,MAAM,QAAQ,UAAU;AAC5C,SAASJ,OAAO,IAAIK,aAAa,QAAQ,iBAAiB;AAC1D,SAASL,OAAO,IAAIM,OAAO,QAAQ,WAAW;AAC9C,SAASN,OAAO,IAAIO,QAAQ,QAAQ,YAAY;AAChD,SAASP,OAAO,IAAIQ,IAAI,QAAQ,QAAQ;AACxC,SAASR,OAAO,IAAIS,KAAK,QAAQ,SAAS;AAC1C,SAAST,OAAO,IAAIU,IAAI,QAAQ,QAAQ;AACxC,SAASV,OAAO,IAAIW,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASX,OAAO,IAAIY,WAAW,QAAQ,eAAe;AACtD,SAASZ,OAAO,IAAIa,kBAAkB,QAAQ,sBAAsB;AACpE,SAASb,OAAO,IAAIc,iBAAiB,QAAQ,qBAAqB;AAClE,SAASd,OAAO,IAAIe,SAAS,QAAQ,aAAa;AAClD,SAASf,OAAO,IAAIgB,cAAc,QAAQ,kBAAkB;AAC5D,SAAShB,OAAO,IAAIiB,MAAM,QAAQ,UAAU;AAC5C,SAASjB,OAAO,IAAIkB,aAAa,QAAQ,iBAAiB;AAC1D,SAASlB,OAAO,IAAImB,iBAAiB,QAAQ,qBAAqB;AAClE,SAASnB,OAAO,IAAIoB,MAAM,QAAQ,UAAU;AAC5C,SAASpB,OAAO,IAAIqB,QAAQ,QAAQ,YAAY;AAChD,SAASrB,OAAO,IAAIsB,MAAM,QAAQ,UAAU;AAC5C,SAAStB,OAAO,IAAIuB,MAAM,QAAQ,UAAU"}
|
|
@@ -7,6 +7,8 @@ export type Props = Pick<FieldProps, keyof ComponentProps | 'layout' | 'label' |
|
|
|
7
7
|
forId?: string;
|
|
8
8
|
/** Use true if you have more than one form element */
|
|
9
9
|
asFieldset?: boolean;
|
|
10
|
+
/** use `true` to make the label only readable by screen readers. */
|
|
11
|
+
labelSrOnly?: boolean;
|
|
10
12
|
/** Defines the layout of nested fields */
|
|
11
13
|
composition?: FieldBlockContextProps['composition'];
|
|
12
14
|
/** Width of outer block element */
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
4
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
5
5
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
6
|
-
const _excluded = ["className", "forId", "layout", "composition", "label", "labelDescription", "asFieldset", "info", "warning", "error", "fieldState", "disabled", "width", "contentWidth", "align", "labelSize", "contentClassName", "children"];
|
|
6
|
+
const _excluded = ["className", "forId", "layout", "composition", "label", "labelDescription", "labelSrOnly", "asFieldset", "info", "warning", "error", "fieldState", "disabled", "width", "contentWidth", "align", "labelSize", "contentClassName", "children"];
|
|
7
7
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
8
8
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
9
9
|
import React, { useMemo, useContext, useCallback, useRef, useReducer, useEffect } from 'react';
|
|
@@ -24,7 +24,7 @@ export const states = ['error', 'info', 'warning'];
|
|
|
24
24
|
function FieldBlock(props) {
|
|
25
25
|
const dataContext = useContext(DataContext);
|
|
26
26
|
const nestedFieldBlockContext = useContext(FieldBlockContext);
|
|
27
|
-
const sharedData = createSharedState(props.forId || props.id);
|
|
27
|
+
const sharedData = createSharedState('field-block-props-' + (props.forId || props.id));
|
|
28
28
|
const _Object$assign = Object.assign({}, sharedData.data, props),
|
|
29
29
|
{
|
|
30
30
|
className,
|
|
@@ -33,6 +33,7 @@ function FieldBlock(props) {
|
|
|
33
33
|
composition,
|
|
34
34
|
label: labelProp,
|
|
35
35
|
labelDescription,
|
|
36
|
+
labelSrOnly,
|
|
36
37
|
asFieldset,
|
|
37
38
|
info,
|
|
38
39
|
warning,
|
|
@@ -228,6 +229,7 @@ function FieldBlock(props) {
|
|
|
228
229
|
const labelProps = {
|
|
229
230
|
element: enableFieldset ? 'legend' : 'label',
|
|
230
231
|
forId: enableFieldset ? undefined : forId,
|
|
232
|
+
srOnly: labelSrOnly,
|
|
231
233
|
space: {
|
|
232
234
|
top: 0,
|
|
233
235
|
bottom: 'x-small'
|