@scenid/react-formulator 0.4.1 → 0.4.3

package/dist/index.cjs.js

@@ -18,8 +18,8 @@ var cx = require('classnames');
 var styles$o = require('@material-ui/styles');
 var AutorenewIcon = require('@material-ui/icons/Autorenew');
 var _TextField = require('@material-ui/core/esm/TextField');
-var luxon = require('luxon');
 var _CircularProgress = require('@material-ui/core/esm/CircularProgress');
+var luxon = require('luxon');
 var Popper = require('@material-ui/core/Popper');
 var ListSubheader = require('@material-ui/core/ListSubheader');
 var Paper = require('@material-ui/core/Paper');
@@ -31773,7 +31773,7 @@ var useFetchOptions = function useFetchOptions(arg) {
       loading = _useState2[0],
       setLoading = _useState2[1];
 
-  var _useState3 = React.useState(Array.isArray(arg) || []),
+  var _useState3 = React.useState(),
       _useState4 = _slicedToArray(_useState3, 2),
       options = _useState4[0],
       setOptions = _useState4[1];
@@ -31896,6 +31896,11 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
       }
     });
   }, [onChange]);
+  React.useEffect(function () {
+    if (!readOnly) {
+      fetch();
+    }
+  }, []);
 
   if (readOnly) {
     return /*#__PURE__*/React__default["default"].createElement(FormField$1, {
@@ -31907,6 +31912,28 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
     });
   }
 
+  if (!options) {
+    return /*#__PURE__*/React__default["default"].createElement(_FormControl__default["default"], {
+      error: dirty && hasErrors,
+      margin: "dense",
+      fullWidth: true,
+      required: required
+    }, /*#__PURE__*/React__default["default"].createElement(_TextField__default["default"], {
+      label: label,
+      variant: variant,
+      value: value,
+      disabled: true,
+      InputProps: {
+        endAdornment: /*#__PURE__*/React__default["default"].createElement(_InputAdornment__default["default"], {
+          position: "end"
+        }, /*#__PURE__*/React__default["default"].createElement(_CircularProgress__default["default"], {
+          size: 20,
+          thickness: 4
+        }))
+      }
+    }));
+  }
+
   return /*#__PURE__*/React__default["default"].createElement(_FormControl__default["default"], {
     error: dirty && hasErrors,
     margin: "dense",

package/dist/index.esm.js

@@ -16,8 +16,8 @@ import cx from 'classnames';
 import { makeStyles as makeStyles$1 } from '@material-ui/styles';
 import AutorenewIcon from '@material-ui/icons/Autorenew';
 import _TextField from '@material-ui/core/esm/TextField';
-import { DateTime } from 'luxon';
 import _CircularProgress from '@material-ui/core/esm/CircularProgress';
+import { DateTime } from 'luxon';
 import Popper from '@material-ui/core/Popper';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import Paper from '@material-ui/core/Paper';
@@ -31704,7 +31704,7 @@ var useFetchOptions = function useFetchOptions(arg) {
       loading = _useState2[0],
       setLoading = _useState2[1];
 
-  var _useState3 = useState(Array.isArray(arg) || []),
+  var _useState3 = useState(),
       _useState4 = _slicedToArray(_useState3, 2),
       options = _useState4[0],
       setOptions = _useState4[1];
@@ -31827,6 +31827,11 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
       }
     });
   }, [onChange]);
+  useEffect(function () {
+    if (!readOnly) {
+      fetch();
+    }
+  }, []);
 
   if (readOnly) {
     return /*#__PURE__*/React__default.createElement(FormField$1, {
@@ -31838,6 +31843,28 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
     });
   }
 
+  if (!options) {
+    return /*#__PURE__*/React__default.createElement(_FormControl, {
+      error: dirty && hasErrors,
+      margin: "dense",
+      fullWidth: true,
+      required: required
+    }, /*#__PURE__*/React__default.createElement(_TextField, {
+      label: label,
+      variant: variant,
+      value: value,
+      disabled: true,
+      InputProps: {
+        endAdornment: /*#__PURE__*/React__default.createElement(_InputAdornment, {
+          position: "end"
+        }, /*#__PURE__*/React__default.createElement(_CircularProgress, {
+          size: 20,
+          thickness: 4
+        }))
+      }
+    }));
+  }
+
   return /*#__PURE__*/React__default.createElement(_FormControl, {
     error: dirty && hasErrors,
     margin: "dense",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",

package/src/Editable/FormAutocomplete/FormAutocomplete.jsx

@@ -1,7 +1,15 @@
-import React, { useCallback } from 'react'
+import React, { useEffect, useCallback } from 'react'
 import PropTypes from 'prop-types'
 
-import { Box, Typography, FormControl, FormHelperText } from '@material-ui/core'
+import {
+  Box,
+  Typography,
+  FormControl,
+  FormHelperText,
+  TextField,
+  InputAdornment,
+  CircularProgress
+} from '@material-ui/core'
 
 import FormField from '../FormField'
 import FormReadOnlyText from '../../ReadOnly/FormReadOnlyText'
@@ -29,6 +37,12 @@ const FormAutocomplete = ({
 
   const changeValue = useCallback(newValue => { onChange({ target: { name, value: newValue?.entry || '' } }) }, [onChange])
 
+  useEffect(() => {
+    if (!readOnly) {
+      fetch()
+    }
+  }, [])
+
   if (readOnly) {
     return (
       <FormField
@@ -41,6 +55,34 @@ const FormAutocomplete = ({
     )
   }
 
+  if (!options) {
+    return (
+      <FormControl
+        error={dirty && hasErrors}
+        margin="dense"
+        fullWidth
+        required={required}
+      >
+        <TextField
+          label={label}
+          variant={variant}
+          value={value}
+          disabled
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <CircularProgress
+                  size={20}
+                  thickness={4}
+                />
+              </InputAdornment>
+            )
+          }}
+        />
+      </FormControl>
+    )
+  }
+
   return (
     <FormControl
       error={dirty && hasErrors}

package/src/Editable/FormAutocomplete/useFetchOptions.js

@@ -35,7 +35,7 @@ const useFetchOptions = (arg, fetchOptions = {}) => {
   const controller = useRef()
 
   const [loading, setLoading] = useState(false)
-  const [options, setOptions] = useState(Array.isArray(arg) || [])
+  const [options, setOptions] = useState()
 
   const fetch = useCallback(async () => {
     if (Array.isArray(arg)) return setOptions(arg)

package/stories/Forms.stories.jsx

@@ -141,7 +141,8 @@ Types.args = {
     hiddenGroupInput1: 'sensitive data',
     hiddenGroupInput2: 'non-public information',
     hiddenGroupInput3: 'top secret value',
-    autocompleteField1: catBreeds[5].entry
+    autocompleteField1: catBreeds[5].entry,
+    autocompleteField2: catBreeds[10].entry
   }
 }