@scenid/react-formulator 0.5.1 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",
@@ -23,7 +23,6 @@
     "@material-ui/icons": "^4.11.3",
     "@material-ui/styles": "^4.11.5",
     "classnames": "^2.3.1",
-    "luxon": "^2.3.2",
     "prop-types": "^15.8.1",
     "react": "16.11.0",
     "react-dom": "16.11.0"

package/src/Editable/FormAutocomplete/FormAutocomplete.jsx

@@ -11,7 +11,6 @@ import {
   CircularProgress
 } from '@material-ui/core'
 
-import FormField from '../FormField'
 import FormReadOnlyText from '../../ReadOnly/FormReadOnlyText'
 import SelectOrCreate from '../../Components/SelectOrCreate'
 
@@ -44,15 +43,7 @@ const FormAutocomplete = ({
   }, [])
 
   if (readOnly) {
-    return (
-      <FormField
-        component={FormReadOnlyText}
-        type="text"
-        componentProps={{}}
-        name={name}
-        value={value}
-      />
-    )
+    return <FormReadOnlyText name={name} value={value} />
   }
 
   if (!options) {

package/src/Editable/FormAutocomplete/useFetchOptions.js

@@ -57,7 +57,7 @@ const useFetchOptions = (arg, fetchOptions = {}) => {
 
       setOptions(r)
     } catch (e) {
-      console.log(e)
+      setLoading(false)
     }
 
     setLoading(false)

package/src/FormulatorFormSection.jsx

@@ -110,7 +110,6 @@ 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
@@ -124,7 +123,7 @@ class FormulatorFormSection extends React.Component {
     if (mapKey === 'select') {
       props.options = (
         type.map(value => ({
-          label: translations?.field?.value || value,
+          label: translations?.[field]?.[value] || value,
           value
         }))
       )

package/src/ReadOnly/FormReadOnlyRepeater.jsx

@@ -2,35 +2,51 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import {
-  Box,
   List,
   ListItem,
   ListItemText
 } from '@material-ui/core'
 
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles(() => ({
+  formRepeater: {
+    padding: 0,
+    margin: 0
+  }
+}))
+
 const getValue = (value, catalog) => {
   if (catalog && catalog[value] !== undefined) return catalog[value]
   return value
 }
 
-const FormReadOnlyRepeater = ({ value, catalog }) => (
-  <Box>
-    <List dense>
+const FormReadOnlyRepeater = ({ value, options }) => {
+  const styles = useStyles()
+
+  return (
+    <List
+      className={styles.formRepeater}
+      dense
+    >
       {
         value && value.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)}
+              style={{ margin: 0 }}
+            />
           </ListItem>
         ))
       }
     </List>
-  </Box>
-)
+  )
+}
 
 FormReadOnlyRepeater.propTypes = {
   value: PropTypes.array,
-  catalog: PropTypes.object
+  options: PropTypes.object
 }
 
 export default FormReadOnlyRepeater

package/src/ReadOnly/FormReadOnlyText.jsx

@@ -5,7 +5,7 @@ import { Typography } from '@material-ui/core'
 
 import { DateTime } from 'luxon'
 
-const FormReadOnlyText = ({ value, type, renderFormat }) => {
+const FormReadOnlyText = ({ value, type, renderFormat, multiline }) => {
   let finalValue = value
 
   if (type === 'date' || type === 'datetime-local') {
@@ -20,7 +20,10 @@ const FormReadOnlyText = ({ value, type, renderFormat }) => {
   }
 
   return (
-    <Typography variant="body1">
+    <Typography
+      variant="body1"
+      style={{ whiteSpace: multiline ? 'pre-line' : 'inherit' }}
+    >
       {finalValue}
     </Typography>
   )
@@ -35,7 +38,8 @@ FormReadOnlyText.propTypes = {
   renderFormat: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.object
-  ])
+  ]),
+  multiline: PropTypes.bool
 }
 
 export default FormReadOnlyText

package/stories/Forms.stories.jsx

@@ -137,6 +137,12 @@ Types.args = {
   },
   translations: {
     ...typesTranslations,
+    simpleSelect: {
+      Citrus: 'Zitrone',
+      Banana: 'Banane',
+      Apple: 'Apfel',
+      Date: 'Dattel'
+    },
     arrayCatalogRepeater: {
       cat: 'Mieze',
       dog: 'Doggo',
@@ -145,6 +151,16 @@ Types.args = {
     }
   },
   data: {
+    simpleText: 'My first input text',
+    multilineText: 'A lot of lines\nin my input\nare fun!',
+    simpleSwitch: true,
+    simpleCheckbox: true,
+    booleanLabelPlace: false,
+    simpleNumber: 5,
+    advancedNumber: 1.25,
+    simpleSelect: 'Banana',
+    arrayRepeater: ['First Entry', 'Second Entry', 'And a third one'],
+    arrayCatalogRepeater: ['cat', 'dog', 'fish'],
     hiddenDataInput: 'Data we do not want to show in Video Calls',
     hiddenGroupInput1: 'sensitive data',
     hiddenGroupInput2: 'non-public information',