@scenid/react-formulator 0.5.2 → 0.5.3

package/dist/index.cjs.js

@@ -29237,7 +29237,7 @@ FormSectionCard.propTypes = {
   children: PropTypes__default["default"].node
 };
 
-var useStyles$1 = styles$n.makeStyles(function (theme) {
+var useStyles$2 = styles$n.makeStyles(function (theme) {
   return {
     formSectionBlock: {
       '&:not(:last-child)': {
@@ -29254,7 +29254,7 @@ var FormSectionBlock = function FormSectionBlock(_ref) {
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign,
       children = _ref.children;
-  var styles = useStyles$1();
+  var styles = useStyles$2();
   return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     className: styles.formSectionBlock
   }, /*#__PURE__*/React__default["default"].createElement(FormGroupHeader, {
@@ -29280,7 +29280,7 @@ var _excluded$6 = ["prepend", "append", "componentProps"];
 function ownKeys$4(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; }
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useStyles = styles$o.makeStyles(function (theme) {
+var useStyles$1 = styles$o.makeStyles(function (theme) {
   return {
     error: {
       color: theme.palette.error.main
@@ -29305,7 +29305,7 @@ var FormControlField$1 = function FormControlField(_ref) {
       validating = _ref.validating,
       dirty = _ref.dirty,
       onChange = _ref.onChange;
-  var styles = useStyles();
+  var styles = useStyles$1();
 
   var finalProps = _objectSpread$4(_objectSpread$4({
     name: name,
@@ -36537,7 +36537,8 @@ function friendlyDateTime(dateTimeish) {
 var FormReadOnlyText = function FormReadOnlyText(_ref) {
   var value = _ref.value,
       type = _ref.type,
-      renderFormat = _ref.renderFormat;
+      renderFormat = _ref.renderFormat,
+      multiline = _ref.multiline;
   var finalValue = value;
 
   if (type === 'date' || type === 'datetime-local') {
@@ -36551,14 +36552,18 @@ var FormReadOnlyText = function FormReadOnlyText(_ref) {
   }
 
   return /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
-    variant: "body1"
+    variant: "body1",
+    style: {
+      whiteSpace: multiline ? 'pre-line' : 'inherit'
+    }
   }, finalValue);
 };
 
 FormReadOnlyText.propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   type: PropTypes__default["default"].string,
-  renderFormat: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object])
+  renderFormat: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object]),
+  multiline: PropTypes__default["default"].bool
 };
 
 function toVal(mix) {
@@ -38905,7 +38910,7 @@ var useFetchOptions = function useFetchOptions(arg) {
           case 18:
             _context2.prev = 18;
             _context2.t0 = _context2["catch"](8);
-            console.log(_context2.t0);
+            setLoading(false);
 
           case 21:
             setLoading(false);
@@ -38972,10 +38977,7 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
   }, []);
 
   if (readOnly) {
-    return /*#__PURE__*/React__default["default"].createElement(FormField$1, {
-      component: FormReadOnlyText,
-      type: "text",
-      componentProps: {},
+    return /*#__PURE__*/React__default["default"].createElement(FormReadOnlyText, {
       name: name,
       value: value
     });
@@ -77759,6 +77761,15 @@ FormReadOnlyBoolean.propTypes = {
   defaultValue: PropTypes__default["default"].bool
 };
 
+var useStyles = styles$n.makeStyles(function () {
+  return {
+    formRepeater: {
+      padding: 0,
+      margin: 0
+    }
+  };
+});
+
 var getValue = function getValue(value, catalog) {
   if (catalog && catalog[value] !== undefined) return catalog[value];
   return value;
@@ -77766,8 +77777,10 @@ var getValue = function getValue(value, catalog) {
 
 var FormReadOnlyRepeater = function FormReadOnlyRepeater(_ref) {
   var value = _ref.value,
-      catalog = _ref.catalog;
-  return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], null, /*#__PURE__*/React__default["default"].createElement(_List__default["default"], {
+      options = _ref.options;
+  var styles = useStyles();
+  return /*#__PURE__*/React__default["default"].createElement(_List__default["default"], {
+    className: styles.formRepeater,
     dense: true
   }, value && value.map(function (entry, index) {
     return (
@@ -77776,15 +77789,18 @@ var FormReadOnlyRepeater = function FormReadOnlyRepeater(_ref) {
       React__default["default"].createElement(_ListItem__default["default"], {
         key: "entry-".concat(index)
       }, /*#__PURE__*/React__default["default"].createElement(_ListItemText__default["default"], {
-        primary: getValue(entry, catalog)
+        primary: getValue(entry, options),
+        style: {
+          margin: 0
+        }
       }))
     );
-  })));
+  }));
 };
 
 FormReadOnlyRepeater.propTypes = {
   value: PropTypes__default["default"].array,
-  catalog: PropTypes__default["default"].object
+  options: PropTypes__default["default"].object
 };
 
 /**
@@ -83185,7 +83201,6 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
       var mapEntry = isRender ? renderComponentMap[field] : componentMap[mapKey];
       var component = mapEntry,
           props = {};
-      console.log(schema.properties, fieldEntry);
 
       if (mapKey === 'array' && schema.properties[fieldEntry].options) {
         props.options = schema.properties[fieldEntry].options.reduce(function (l, r) {
@@ -83200,7 +83215,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           var _translations$field;
 
           return {
-            label: (translations === null || translations === void 0 ? void 0 : (_translations$field = translations.field) === null || _translations$field === void 0 ? void 0 : _translations$field.value) || value,
+            label: (translations === null || translations === void 0 ? void 0 : (_translations$field = translations[field]) === null || _translations$field === void 0 ? void 0 : _translations$field[value]) || value,
             value: value
           };
         });

package/dist/index.esm.js

@@ -29169,7 +29169,7 @@ FormSectionCard.propTypes = {
   children: PropTypes__default.node
 };
 
-var useStyles$1 = makeStyles(function (theme) {
+var useStyles$2 = makeStyles(function (theme) {
   return {
     formSectionBlock: {
       '&:not(:last-child)': {
@@ -29186,7 +29186,7 @@ var FormSectionBlock = function FormSectionBlock(_ref) {
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign,
       children = _ref.children;
-  var styles = useStyles$1();
+  var styles = useStyles$2();
   return /*#__PURE__*/React__default.createElement(_Box, {
     className: styles.formSectionBlock
   }, /*#__PURE__*/React__default.createElement(FormGroupHeader, {
@@ -29212,7 +29212,7 @@ var _excluded$6 = ["prepend", "append", "componentProps"];
 function ownKeys$4(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; }
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var useStyles = makeStyles$1(function (theme) {
+var useStyles$1 = makeStyles$1(function (theme) {
   return {
     error: {
       color: theme.palette.error.main
@@ -29237,7 +29237,7 @@ var FormControlField$1 = function FormControlField(_ref) {
       validating = _ref.validating,
       dirty = _ref.dirty,
       onChange = _ref.onChange;
-  var styles = useStyles();
+  var styles = useStyles$1();
 
   var finalProps = _objectSpread$4(_objectSpread$4({
     name: name,
@@ -36469,7 +36469,8 @@ function friendlyDateTime(dateTimeish) {
 var FormReadOnlyText = function FormReadOnlyText(_ref) {
   var value = _ref.value,
       type = _ref.type,
-      renderFormat = _ref.renderFormat;
+      renderFormat = _ref.renderFormat,
+      multiline = _ref.multiline;
   var finalValue = value;
 
   if (type === 'date' || type === 'datetime-local') {
@@ -36483,14 +36484,18 @@ var FormReadOnlyText = function FormReadOnlyText(_ref) {
   }
 
   return /*#__PURE__*/React__default.createElement(_Typography, {
-    variant: "body1"
+    variant: "body1",
+    style: {
+      whiteSpace: multiline ? 'pre-line' : 'inherit'
+    }
   }, finalValue);
 };
 
 FormReadOnlyText.propTypes = {
   value: PropTypes__default.oneOfType([PropTypes__default.number, PropTypes__default.string]),
   type: PropTypes__default.string,
-  renderFormat: PropTypes__default.oneOfType([PropTypes__default.string, PropTypes__default.object])
+  renderFormat: PropTypes__default.oneOfType([PropTypes__default.string, PropTypes__default.object]),
+  multiline: PropTypes__default.bool
 };
 
 function toVal(mix) {
@@ -38837,7 +38842,7 @@ var useFetchOptions = function useFetchOptions(arg) {
           case 18:
             _context2.prev = 18;
             _context2.t0 = _context2["catch"](8);
-            console.log(_context2.t0);
+            setLoading(false);
 
           case 21:
             setLoading(false);
@@ -38904,10 +38909,7 @@ var FormAutocomplete = function FormAutocomplete(_ref) {
   }, []);
 
   if (readOnly) {
-    return /*#__PURE__*/React__default.createElement(FormField$1, {
-      component: FormReadOnlyText,
-      type: "text",
-      componentProps: {},
+    return /*#__PURE__*/React__default.createElement(FormReadOnlyText, {
       name: name,
       value: value
     });
@@ -77691,6 +77693,15 @@ FormReadOnlyBoolean.propTypes = {
   defaultValue: PropTypes__default.bool
 };
 
+var useStyles = makeStyles(function () {
+  return {
+    formRepeater: {
+      padding: 0,
+      margin: 0
+    }
+  };
+});
+
 var getValue = function getValue(value, catalog) {
   if (catalog && catalog[value] !== undefined) return catalog[value];
   return value;
@@ -77698,8 +77709,10 @@ var getValue = function getValue(value, catalog) {
 
 var FormReadOnlyRepeater = function FormReadOnlyRepeater(_ref) {
   var value = _ref.value,
-      catalog = _ref.catalog;
-  return /*#__PURE__*/React__default.createElement(_Box, null, /*#__PURE__*/React__default.createElement(_List, {
+      options = _ref.options;
+  var styles = useStyles();
+  return /*#__PURE__*/React__default.createElement(_List, {
+    className: styles.formRepeater,
     dense: true
   }, value && value.map(function (entry, index) {
     return (
@@ -77708,15 +77721,18 @@ var FormReadOnlyRepeater = function FormReadOnlyRepeater(_ref) {
       React__default.createElement(_ListItem, {
         key: "entry-".concat(index)
       }, /*#__PURE__*/React__default.createElement(_ListItemText, {
-        primary: getValue(entry, catalog)
+        primary: getValue(entry, options),
+        style: {
+          margin: 0
+        }
       }))
     );
-  })));
+  }));
 };
 
 FormReadOnlyRepeater.propTypes = {
   value: PropTypes__default.array,
-  catalog: PropTypes__default.object
+  options: PropTypes__default.object
 };
 
 /**
@@ -83117,7 +83133,6 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
       var mapEntry = isRender ? renderComponentMap[field] : componentMap[mapKey];
       var component = mapEntry,
           props = {};
-      console.log(schema.properties, fieldEntry);
 
       if (mapKey === 'array' && schema.properties[fieldEntry].options) {
         props.options = schema.properties[fieldEntry].options.reduce(function (l, r) {
@@ -83132,7 +83147,7 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           var _translations$field;
 
           return {
-            label: (translations === null || translations === void 0 ? void 0 : (_translations$field = translations.field) === null || _translations$field === void 0 ? void 0 : _translations$field.value) || value,
+            label: (translations === null || translations === void 0 ? void 0 : (_translations$field = translations[field]) === null || _translations$field === void 0 ? void 0 : _translations$field[value]) || value,
             value: value
           };
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "0.5.2",
+  "version": "0.5.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

@@ -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',