@scenid/react-formulator 0.4.4 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "0.4.4",
+  "version": "0.5.1",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",
@@ -46,7 +46,7 @@
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@scenid/cloud-icons": "^2.6.0",
-    "@scenid/formulator": "^2.0.2",
+    "@scenid/formulator": "^2.2.0",
     "@storybook/addon-actions": "^6.4.22",
     "@storybook/addon-essentials": "^6.4.22",
     "@storybook/addon-interactions": "^6.4.22",

package/src/Editable/FormRepeater.jsx

@@ -12,9 +12,9 @@ import {
   IconButton,
   InputAdornment,
   FormControl,
-  InputLabel,
-  Select,
-  MenuItem
+  Typography,
+  MenuItem,
+  ClickAwayListener
 } from '@material-ui/core'
 
 import {
@@ -28,10 +28,11 @@ const getValue = (value, catalog) => {
   return value
 }
 
-const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
+const FormRepeater = ({ variant, name, label, value, options, onChange }) => {
   const [entries, setEntries] = useState(value || [])
   const [inEdit, setInEdit] = useState(false)
   const [inputValue, setInputValue] = useState('')
+  const [catalogSelectValue, setCatalogSelectValue] = useState('')
 
   const handleEntryAdd = () => {
     if (inputValue.length > 0) {
@@ -43,6 +44,7 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
   const handleCancelNewEntry = () => {
     setInEdit(false)
     setInputValue('')
+    setCatalogSelectValue('')
   }
 
   const handleEntryDel = delIndex => {
@@ -57,18 +59,31 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
   }, [entries])
 
   let blockedOptions = []
-  if (catalog) {
-    blockedOptions = Object.entries(catalog).filter(e => value.includes(e[0])).map(e => e[0])
+  if (options) {
+    blockedOptions = Object.entries(options).filter(e => Array.isArray(value) && value.includes(e[0])).map(e => e[0])
   }
 
   return (
     <Box>
+      <Typography variant="body1">
+        {label}
+      </Typography>
+      {
+        (!entries || entries?.length === 0)
+          && (
+            <Box mt={1} pl={2}>
+              <Typography variant="body2" color="textSecondary">
+                Keine Einträge vorhanden
+              </Typography>
+            </Box>
+          )
+      }
       <List dense>
         {
           entries.map((entry, index) => (
             // eslint-disable-next-line react/no-array-index-key
             <ListItem key={`entry-${index}`}>
-              <ListItemText primary={getValue(entry, catalog)} />
+              <ListItemText primary={getValue(entry, options)} />
               <ListItemSecondaryAction>
                 <IconButton
                   edge="end"
@@ -92,53 +107,61 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
                 variant="outlined"
                 onClick={() => setInEdit(true)}
               >
-                Eintrag hinzufügen
+                Einträge hinzufügen
               </Button>
             </Box>
           )
       }
       {
-        (inEdit && !catalog)
+        (inEdit && !options)
           && (
             <Box
               width="100%"
               display="flex"
               alignItems="center"
             >
-              <FormControl
-                variant="filled"
-                fullWidth
+              <ClickAwayListener
+                onClickAway={() => {
+                  if (inputValue === '') {
+                    setInEdit(false)
+                  }
+                }}
               >
-                <TextField
-                  label="Neuer Eintrag"
-                  variant={variant}
-                  value={inputValue}
-                  InputProps={{
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <Box mr={1}>
-                          <IconButton size="small" onClick={handleEntryAdd}>
-                            <SaveIcon fontSize="small" />
+                <FormControl
+                  variant="filled"
+                  fullWidth
+                >
+                  <TextField
+                    label="Neuer Eintrag"
+                    variant={variant}
+                    value={inputValue}
+                    InputProps={{
+                      endAdornment: (
+                        <InputAdornment position="end">
+                          <Box mr={1}>
+                            <IconButton size="small" onClick={handleEntryAdd}>
+                              <SaveIcon fontSize="small" />
+                            </IconButton>
+                          </Box>
+                          <IconButton size="small" onClick={handleCancelNewEntry}>
+                            <ClearIcon fontSize="small" />
                           </IconButton>
-                        </Box>
-                        <IconButton size="small" onClick={handleCancelNewEntry}>
-                          <ClearIcon fontSize="small" />
-                        </IconButton>
-                      </InputAdornment>
-                    )
-                  }}
-                  onKeyDown={e => {
-                    if (e.key === 'Enter') handleEntryAdd()
-                    if (e.key === 'Escape') handleCancelNewEntry()
-                  }}
-                  onChange={e => setInputValue(e.target.value)}
-                />
-              </FormControl>
+                        </InputAdornment>
+                      )
+                    }}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') handleEntryAdd()
+                      if (e.key === 'Escape') handleCancelNewEntry()
+                    }}
+                    onChange={e => setInputValue(e.target.value)}
+                  />
+                </FormControl>
+              </ClickAwayListener>
             </Box>
           )
       }
       {
-        (inEdit && catalog)
+        (inEdit && options)
           && (
             <Box
               width="100%"
@@ -149,17 +172,20 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
                 variant="filled"
                 fullWidth
               >
-                <InputLabel>Neuer Eintrag</InputLabel>
-                <Select
-                  defaultValue="please-select"
-                  onChange={e => setEntries([...entries, e.target.value])}
+                <TextField
+                  label="Eintrag auswählen"
+                  select
+                  variant={variant}
+                  value={catalogSelectValue}
+                  onBlur={handleCancelNewEntry}
+                  onChange={e => {
+                    setCatalogSelectValue('')
+                    setEntries([...entries, e.target.value])
+                  }}
                 >
-                  <MenuItem value="please-select" disabled>
-                    Eintrag hinzufügen
-                  </MenuItem>
                   {
                     Object
-                      .entries(catalog)
+                      .entries(options)
                       .sort((a, b) => a[1].localeCompare(b[1]))
                       .map(e => (
                         <MenuItem
@@ -171,7 +197,7 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
                         </MenuItem>
                       ))
                   }
-                </Select>
+                </TextField>
               </FormControl>
             </Box>
           )
@@ -182,9 +208,10 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
 
 FormRepeater.propTypes = {
   variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  label: PropTypes.string,
   value: PropTypes.any,
-  catalog: PropTypes.object,
+  options: PropTypes.object,
   onChange: PropTypes.func.isRequired
 }
 

package/src/FormulatorFormSection.jsx

@@ -110,14 +110,21 @@ class FormulatorFormSection extends React.Component {
     const mapEntry = isRender ? renderComponentMap[field] : componentMap[mapKey]
     let component = mapEntry, props = {}
 
+    console.log(schema.properties, fieldEntry)
+    if (mapKey === 'array' && schema.properties[fieldEntry].options) {
+      props.options = (
+        schema.properties[fieldEntry].options
+          .reduce((l, r) => ({
+            ...l,
+            [r]: translations?.[fieldEntry]?.[r] || r
+          }), {})
+      )
+    }
+
     if (mapKey === 'select') {
       props.options = (
         type.map(value => ({
-          label: (
-            translations[field]
-            && translations[field][value]
-          )
-          || value,
+          label: translations?.field?.value || value,
           value
         }))
       )

package/stories/Forms.stories.jsx

@@ -135,7 +135,15 @@ Types.args = {
       />
     )
   },
-  translations: typesTranslations,
+  translations: {
+    ...typesTranslations,
+    arrayCatalogRepeater: {
+      cat: 'Mieze',
+      dog: 'Doggo',
+      fish: 'Fishy',
+      horse: 'Horsy'
+    }
+  },
   data: {
     hiddenDataInput: 'Data we do not want to show in Video Calls',
     hiddenGroupInput1: 'sensitive data',

package/stories/forms/types.schemas.js

@@ -171,6 +171,21 @@ const inputs = [
     render: ['arrayRepeater'],
     validation: { type: 'array' }
   },
+  {
+    label: 'Repeater with Catalog',
+    key: 'arrayCatalogRepeater',
+    render: ['arrayCatalogRepeater'],
+    validation: {
+      type: 'array',
+      validator: 'In',
+      options: [
+        'cat',
+        'dog',
+        'fish',
+        'horse'
+      ]
+    }
+  },
   {
     label: 'Autocomplete Field',
     desc: 'You can supply an array of options or an async function to fetch options on the fly.',