@oneblink/apps-react 4.3.0-beta.7 → 4.3.0-beta.8
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.
|
@@ -60,7 +60,7 @@ const AutocompleteFetch = React.memo(function AutocompleteFetch({ id, element, v
|
|
|
60
60
|
throw new Error(text);
|
|
61
61
|
}
|
|
62
62
|
const data = await response.json();
|
|
63
|
-
return formElementsService.
|
|
63
|
+
return formElementsService.parseDynamicFormElementOptions(data);
|
|
64
64
|
}, [searchQuerystringParameter, searchUrl]);
|
|
65
65
|
// Ensure the label is set if the value is set outside of this component
|
|
66
66
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementAutocomplete.js","sourceRoot":"","sources":["../../src/form-elements/FormElementAutocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formElementsService } from '@oneblink/sdk-core'\nimport { generateHeaders } from '@oneblink/apps/dist/services/fetch'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes } from '@oneblink/types'\nimport {\n FormElementValueChangeHandler,\n FormElementConditionallyShownElement,\n IsDirtyProps,\n UpdateFormElementsHandler,\n} from '../types/form'\n\ntype _BaseProps = {\n id: string\n element: FormTypes.AutoCompleteElement\n value: unknown | undefined\n displayValidationMessage: boolean\n validationMessage: string | undefined\n onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\ntype _AutocompleteChangeHandlerProps = _BaseProps & {\n onChange: (newValue: unknown | undefined) => void\n}\n\ntype _AutocompleteConditionallyShowOptionProps = {\n conditionallyShownOptionsElement:\n | FormElementConditionallyShownElement\n | undefined\n}\n\ntype AutocompleteFilterProps = _AutocompleteChangeHandlerProps &\n _AutocompleteConditionallyShowOptionProps\n\ntype AutocompleteFetchProps = _AutocompleteChangeHandlerProps & {\n searchUrl: string\n searchQuerystringParameter: string\n}\n\ntype Props = _BaseProps &\n _AutocompleteConditionallyShowOptionProps & {\n onChange: FormElementValueChangeHandler<string>\n }\n\nconst AutocompleteFilter = React.memo(function AutocompleteFilter({\n id,\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n validationMessage,\n displayValidationMessage,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n}: AutocompleteFilterProps) {\n const [label, setLabel] = React.useState('')\n\n const onFilter = React.useCallback(\n (option: FormTypes.ChoiceElementOption) => {\n // If the user has typed nothing in, display all options\n if (!label) {\n return true\n }\n\n const lowerCase = label.toLowerCase()\n\n return option.label.toLowerCase().includes(lowerCase)\n },\n [label],\n )\n\n const handleChange = React.useCallback(\n //useFormElementOptions expects the first arg to be the element\n (element: FormTypes.FormElement, newValue: unknown) => onChange(newValue),\n [onChange],\n )\n\n const filteredOptions = useFormElementOptions({\n element,\n value,\n onChange: handleChange,\n conditionallyShownOptionsElement,\n onFilter,\n onUpdateFormElements,\n })\n\n const handleSearch = React.useCallback(async () => {\n return filteredOptions\n }, [filteredOptions])\n\n // Ensure the label matches the value selected\n React.useEffect(() => {\n if (!Array.isArray(element.options)) {\n return\n }\n\n const option = element.options.find((option) => option.value === value)\n if (option && label !== option.label) {\n setLabel(option.label)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [element.options, value])\n\n return (\n <div className=\"cypress-autocomplete-filter-element\">\n <FormElementLabelContainer\n className=\"ob-autocomplete\"\n element={element}\n id={id}\n required={element.required}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n <AutocompleteDropdown\n id={id}\n label={label}\n disabled={element.readOnly}\n placeholder={element.placeholderValue}\n required={element.required}\n value={value}\n validationMessage={validationMessage}\n displayValidationMessage={displayValidationMessage}\n onChangeValue={onChange}\n onChangeLabel={setLabel}\n onSearch={handleSearch}\n searchDebounceMs={0}\n searchMinCharacters={0}\n isDirty={isDirty}\n setIsDirty={setIsDirty}\n />\n </FormElementOptions>\n </FormElementLabelContainer>\n </div>\n )\n})\n\nconst AutocompleteFetch = React.memo(function AutocompleteFetch({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n searchUrl,\n searchQuerystringParameter,\n isDirty,\n setIsDirty,\n}: AutocompleteFetchProps) {\n const [label, setLabel] = React.useState('')\n\n const handleSearch = React.useCallback(\n async (search: string, abortSignal: AbortSignal) => {\n const headers = await generateHeaders()\n const url = new URL(searchUrl)\n url.searchParams.append(searchQuerystringParameter, search)\n const response = await fetch(url.href, {\n headers,\n signal: abortSignal,\n })\n\n if (!response.ok) {\n const text = await response.text()\n throw new Error(text)\n }\n\n const data = await response.json()\n return formElementsService.parseFormElementOptionsSet(data)\n },\n [searchQuerystringParameter, searchUrl],\n )\n\n // Ensure the label is set if the value is set outside of this component\n React.useEffect(() => {\n if (!label && typeof value === 'string') {\n setLabel(value)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value])\n\n return (\n <div className=\"cypress-autocomplete-search-element\">\n <FormElementLabelContainer\n className=\"ob-autocomplete\"\n element={element}\n id={id}\n required={element.required}\n >\n <AutocompleteDropdown\n id={id}\n label={label}\n disabled={element.readOnly}\n placeholder={element.placeholderValue}\n required={element.required}\n value={value}\n validationMessage={validationMessage}\n displayValidationMessage={displayValidationMessage}\n onChangeValue={onChange}\n onChangeLabel={setLabel}\n searchDebounceMs={750}\n searchMinCharacters={1}\n onSearch={handleSearch}\n isDirty={isDirty}\n setIsDirty={setIsDirty}\n />\n </FormElementLabelContainer>\n </div>\n )\n})\n\nfunction FormElementAutocomplete({\n conditionallyShownOptionsElement,\n onChange,\n ...props\n}: Props) {\n const handleChange = React.useCallback(\n (newValue: unknown) => {\n onChange(props.element, newValue as string | undefined)\n },\n [onChange, props.element],\n )\n if (props.element.optionsType === 'SEARCH' && props.element.searchUrl) {\n return (\n <AutocompleteFetch\n {...props}\n onChange={handleChange}\n searchUrl={props.element.searchUrl}\n searchQuerystringParameter={\n props.element.searchQuerystringParameter || 'value'\n }\n />\n )\n }\n\n return (\n <AutocompleteFilter\n {...props}\n onChange={handleChange}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n />\n )\n}\n\nexport default React.memo(FormElementAutocomplete)\n"]}
|
|
1
|
+
{"version":3,"file":"FormElementAutocomplete.js","sourceRoot":"","sources":["../../src/form-elements/FormElementAutocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formElementsService } from '@oneblink/sdk-core'\nimport { generateHeaders } from '@oneblink/apps/dist/services/fetch'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes } from '@oneblink/types'\nimport {\n FormElementValueChangeHandler,\n FormElementConditionallyShownElement,\n IsDirtyProps,\n UpdateFormElementsHandler,\n} from '../types/form'\n\ntype _BaseProps = {\n id: string\n element: FormTypes.AutoCompleteElement\n value: unknown | undefined\n displayValidationMessage: boolean\n validationMessage: string | undefined\n onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\ntype _AutocompleteChangeHandlerProps = _BaseProps & {\n onChange: (newValue: unknown | undefined) => void\n}\n\ntype _AutocompleteConditionallyShowOptionProps = {\n conditionallyShownOptionsElement:\n | FormElementConditionallyShownElement\n | undefined\n}\n\ntype AutocompleteFilterProps = _AutocompleteChangeHandlerProps &\n _AutocompleteConditionallyShowOptionProps\n\ntype AutocompleteFetchProps = _AutocompleteChangeHandlerProps & {\n searchUrl: string\n searchQuerystringParameter: string\n}\n\ntype Props = _BaseProps &\n _AutocompleteConditionallyShowOptionProps & {\n onChange: FormElementValueChangeHandler<string>\n }\n\nconst AutocompleteFilter = React.memo(function AutocompleteFilter({\n id,\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n validationMessage,\n displayValidationMessage,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n}: AutocompleteFilterProps) {\n const [label, setLabel] = React.useState('')\n\n const onFilter = React.useCallback(\n (option: FormTypes.ChoiceElementOption) => {\n // If the user has typed nothing in, display all options\n if (!label) {\n return true\n }\n\n const lowerCase = label.toLowerCase()\n\n return option.label.toLowerCase().includes(lowerCase)\n },\n [label],\n )\n\n const handleChange = React.useCallback(\n //useFormElementOptions expects the first arg to be the element\n (element: FormTypes.FormElement, newValue: unknown) => onChange(newValue),\n [onChange],\n )\n\n const filteredOptions = useFormElementOptions({\n element,\n value,\n onChange: handleChange,\n conditionallyShownOptionsElement,\n onFilter,\n onUpdateFormElements,\n })\n\n const handleSearch = React.useCallback(async () => {\n return filteredOptions\n }, [filteredOptions])\n\n // Ensure the label matches the value selected\n React.useEffect(() => {\n if (!Array.isArray(element.options)) {\n return\n }\n\n const option = element.options.find((option) => option.value === value)\n if (option && label !== option.label) {\n setLabel(option.label)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [element.options, value])\n\n return (\n <div className=\"cypress-autocomplete-filter-element\">\n <FormElementLabelContainer\n className=\"ob-autocomplete\"\n element={element}\n id={id}\n required={element.required}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n <AutocompleteDropdown\n id={id}\n label={label}\n disabled={element.readOnly}\n placeholder={element.placeholderValue}\n required={element.required}\n value={value}\n validationMessage={validationMessage}\n displayValidationMessage={displayValidationMessage}\n onChangeValue={onChange}\n onChangeLabel={setLabel}\n onSearch={handleSearch}\n searchDebounceMs={0}\n searchMinCharacters={0}\n isDirty={isDirty}\n setIsDirty={setIsDirty}\n />\n </FormElementOptions>\n </FormElementLabelContainer>\n </div>\n )\n})\n\nconst AutocompleteFetch = React.memo(function AutocompleteFetch({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n searchUrl,\n searchQuerystringParameter,\n isDirty,\n setIsDirty,\n}: AutocompleteFetchProps) {\n const [label, setLabel] = React.useState('')\n\n const handleSearch = React.useCallback(\n async (search: string, abortSignal: AbortSignal) => {\n const headers = await generateHeaders()\n const url = new URL(searchUrl)\n url.searchParams.append(searchQuerystringParameter, search)\n const response = await fetch(url.href, {\n headers,\n signal: abortSignal,\n })\n\n if (!response.ok) {\n const text = await response.text()\n throw new Error(text)\n }\n\n const data = await response.json()\n return formElementsService.parseDynamicFormElementOptions(data)\n },\n [searchQuerystringParameter, searchUrl],\n )\n\n // Ensure the label is set if the value is set outside of this component\n React.useEffect(() => {\n if (!label && typeof value === 'string') {\n setLabel(value)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value])\n\n return (\n <div className=\"cypress-autocomplete-search-element\">\n <FormElementLabelContainer\n className=\"ob-autocomplete\"\n element={element}\n id={id}\n required={element.required}\n >\n <AutocompleteDropdown\n id={id}\n label={label}\n disabled={element.readOnly}\n placeholder={element.placeholderValue}\n required={element.required}\n value={value}\n validationMessage={validationMessage}\n displayValidationMessage={displayValidationMessage}\n onChangeValue={onChange}\n onChangeLabel={setLabel}\n searchDebounceMs={750}\n searchMinCharacters={1}\n onSearch={handleSearch}\n isDirty={isDirty}\n setIsDirty={setIsDirty}\n />\n </FormElementLabelContainer>\n </div>\n )\n})\n\nfunction FormElementAutocomplete({\n conditionallyShownOptionsElement,\n onChange,\n ...props\n}: Props) {\n const handleChange = React.useCallback(\n (newValue: unknown) => {\n onChange(props.element, newValue as string | undefined)\n },\n [onChange, props.element],\n )\n if (props.element.optionsType === 'SEARCH' && props.element.searchUrl) {\n return (\n <AutocompleteFetch\n {...props}\n onChange={handleChange}\n searchUrl={props.element.searchUrl}\n searchQuerystringParameter={\n props.element.searchQuerystringParameter || 'value'\n }\n />\n )\n }\n\n return (\n <AutocompleteFilter\n {...props}\n onChange={handleChange}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n />\n )\n}\n\nexport default React.memo(FormElementAutocomplete)\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneblink/apps-react",
|
|
3
3
|
"description": "Helper functions for OneBlink apps in ReactJS.",
|
|
4
|
-
"version": "4.3.0-beta.
|
|
4
|
+
"version": "4.3.0-beta.8",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"@emotion/react": "^11.10.6",
|
|
12
12
|
"@emotion/styled": "^11.10.6",
|
|
13
13
|
"@mui/icons-material": "^5.11.11",
|
|
14
|
-
"@oneblink/sdk-core": "^
|
|
14
|
+
"@oneblink/sdk-core": "^4.0.0-beta.1",
|
|
15
15
|
"@react-google-maps/api": "2.18.1",
|
|
16
16
|
"blueimp-load-image": "^5.16.0",
|
|
17
17
|
"bulma": "^0.9.3",
|