@scenid/react-formulator 0.1.9 → 0.1.11

package/dist/index.cjs.js

@@ -9,6 +9,7 @@ var cx = require('classnames');
 var styles$n = require('@material-ui/styles');
 var AutorenewIcon = require('@material-ui/icons/Autorenew');
 var icons = require('@material-ui/icons');
+var luxon = require('luxon');
 var path$3 = require('path');
 var proc = require('process');
 var url = require('url');
@@ -29170,7 +29171,6 @@ var useStyles = styles$n.makeStyles(function (theme) {
 var FormControlField$1 = function FormControlField(_ref) {
   var variant = _ref.variant,
       type = _ref.type,
-      isRender = _ref.isRender,
       name = _ref.name,
       label = _ref.label,
       component = _ref.component,
@@ -29199,6 +29199,8 @@ var FormControlField$1 = function FormControlField(_ref) {
     onChange: onChange
   });
 
+  var isRender = type === 'render';
+
   if (validating) {
     finalProps.endAdornment = [/*#__PURE__*/React__default["default"].createElement(core$1.InputAdornment, {
       position: "end"
@@ -29248,7 +29250,6 @@ var FormControlField$1 = function FormControlField(_ref) {
 
 FormControlField$1.propTypes = {
   variant: PropTypes__default["default"].oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes__default["default"].bool,
   component: PropTypes__default["default"].any.isRequired,
   componentProps: PropTypes__default["default"].object,
   type: PropTypes__default["default"].string.isRequired,
@@ -29292,7 +29293,6 @@ var FormField = function FormField(_ref2) {
 
 FormField.propTypes = {
   variant: PropTypes__default["default"].oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes__default["default"].bool,
   component: PropTypes__default["default"].any.isRequired,
   componentProps: PropTypes__default["default"].object,
   type: PropTypes__default["default"].string.isRequired,
@@ -29399,11 +29399,12 @@ FormNumber.propTypes = {
   onChange: PropTypes__default["default"].func.isRequired
 };
 
-var _excluded$3 = ["options", "required"];
+var _excluded$3 = ["options", "required", "value"];
 
 var FormSelect = function FormSelect(_ref) {
   var options = _ref.options,
       required = _ref.required,
+      value = _ref.value,
       props = _objectWithoutProperties(_ref, _excluded$3);
 
   var unselectOption = [];
@@ -29419,7 +29420,9 @@ var FormSelect = function FormSelect(_ref) {
     return l.label.localeCompare(r.label);
   })));
   return /*#__PURE__*/React__default["default"].createElement(core$1.TextField, _extends({
-    select: true
+    select: true,
+    required: required,
+    value: value === undefined ? '' : value
   }, props), allOptions.map(function (_ref2) {
     var itemLabel = _ref2.label,
         itemValue = _ref2.value;
@@ -29701,7 +29704,7 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var FormControlField = function FormControlField(_ref) {
-  var isRender = _ref.isRender,
+  var type = _ref.type,
       name = _ref.name,
       label = _ref.label,
       component = _ref.component,
@@ -29724,7 +29727,7 @@ var FormControlField = function FormControlField(_ref) {
   }
 
   var control;
-  if (isRender) control = /*#__PURE__*/React__default["default"].cloneElement(component, finalProps);else control = /*#__PURE__*/React__default["default"].createElement(component, finalProps);
+  if (type === 'render') control = /*#__PURE__*/React__default["default"].cloneElement(component, finalProps);else control = /*#__PURE__*/React__default["default"].createElement(component, finalProps);
   return /*#__PURE__*/React__default["default"].createElement(core$1.Box, {
     width: "100%",
     display: "flex",
@@ -29737,10 +29740,10 @@ var FormControlField = function FormControlField(_ref) {
 };
 
 FormControlField.propTypes = {
-  isRender: PropTypes__default["default"].bool,
   component: PropTypes__default["default"].any.isRequired,
   componentProps: PropTypes__default["default"].object,
   name: PropTypes__default["default"].string.isRequired,
+  type: PropTypes__default["default"].string.isRequired,
   label: PropTypes__default["default"].string.isRequired,
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].bool, PropTypes__default["default"].array]),
   options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
@@ -29799,14 +29802,21 @@ FormReadOnlyField.propTypes = {
 };
 var FormReadOnlyField$1 = /*#__PURE__*/React__default["default"].memo(FormReadOnlyField);
 
-var ReadOnlyText = function ReadOnlyText(_ref) {
-  var value = _ref.value;
+var FormReadOnlyText = function FormReadOnlyText(_ref) {
+  var value = _ref.value,
+      type = _ref.type;
+  var finalValue = value;
+
+  if (type === 'date' || type === 'datetime-local') {
+    finalValue = luxon.DateTime.fromISO(value).toLocaleString(luxon.DateTime.DATE_MED_WITH_WEEKDAY);
+  }
+
   return /*#__PURE__*/React__default["default"].createElement(core$1.Typography, {
     variant: "body1"
-  }, value);
+  }, finalValue);
 };
 
-ReadOnlyText.propTypes = {
+FormReadOnlyText.propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
 };
 
@@ -68021,7 +68031,7 @@ FormReadOnlyMarkdown.propTypes = {
 
 var FormReadOnlyNumber = function FormReadOnlyNumber(_ref) {
   var value = _ref.value;
-  return /*#__PURE__*/React__default["default"].createElement(ReadOnlyText, {
+  return /*#__PURE__*/React__default["default"].createElement(FormReadOnlyText, {
     value: castToNumber(value)
   });
 };
@@ -68035,7 +68045,7 @@ var FormReadOnlySelect = function FormReadOnlySelect(_ref) {
 
   var value = _ref.value,
       options = _ref.options;
-  return /*#__PURE__*/React__default["default"].createElement(ReadOnlyText, {
+  return /*#__PURE__*/React__default["default"].createElement(FormReadOnlyText, {
     value: (_options$find = options.find(function (o) {
       return o.value === value;
     })) === null || _options$find === void 0 ? void 0 : _options$find.label
@@ -75447,9 +75457,9 @@ function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeRefl
 
 function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var formReadOnlyComponentMap = {
-  "default": ReadOnlyText,
+  "default": FormReadOnlyText,
   markdown: FormReadOnlyMarkdown,
-  string: ReadOnlyText,
+  string: FormReadOnlyText,
   number: FormReadOnlyNumber,
   select: FormReadOnlySelect,
   "boolean": FormReadOnlyBoolean,
@@ -75491,17 +75501,23 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           errorMessages = _this$props.errorMessages,
           results = _this$props.results,
           data = _this$props.data,
-          fieldStates = _this$props.fieldStates;
+          fieldStates = _this$props.fieldStates,
+          renderComponentMap = _this$props.renderComponentMap;
       var field = fieldEntry,
           specialProps = {};
 
       if (Array.isArray(fieldEntry)) {
         if (fieldEntry[0] === '@@render') {
           field = fieldEntry[1];
-          specialProps = _objectSpread$1({
-            isRender: true
-          }, fieldEntry[2] || {});
-        } else if (fieldEntry[0] === '@@markdown') {
+          return {
+            type: 'render',
+            name: field,
+            component: renderComponentMap[field],
+            componentProps: fieldEntry[2] || {}
+          };
+        }
+
+        if (fieldEntry[0] === '@@markdown') {
           return {
             type: 'markdown',
             name: fieldEntry[1],
@@ -75510,10 +75526,11 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
               content: fieldEntry[2]
             }
           };
-        } else {
-          field = fieldEntry[0];
-          specialProps = fieldEntry[1];
         }
+
+        field = fieldEntry[0];
+        if (!fieldEntry[1]) throw new Error("field \"".concat(field, "\" is defined in an array, but has no props definition"));
+        specialProps = fieldEntry[1];
       }
 
       var _specialProps = specialProps,
@@ -75534,8 +75551,8 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           type = _schema$properties$fi.type,
           defaultValue = _schema$properties$fi["default"];
       var mapKey;
-      if (specialProps.isRender) mapKey = type;else if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
-      var mapEntry = specialProps.isRender ? '@@render' : componentMap[mapKey];
+      if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
+      var mapEntry = componentMap[mapKey];
       var component = mapEntry,
           props = {};
 
@@ -75639,7 +75656,6 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
             type: _type,
             label: _label,
             value: _value,
-            isRender: true,
             required: _required,
             hasErrors: _hasErrors,
             errors: _errors,
@@ -76439,7 +76455,7 @@ exports.FormReadOnlyMarkdown = FormReadOnlyMarkdown;
 exports.FormReadOnlyNumber = FormReadOnlyNumber;
 exports.FormReadOnlyRepeater = FormReadOnlyRepeater;
 exports.FormReadOnlySelect = FormReadOnlySelect;
-exports.FormReadOnlyText = ReadOnlyText;
+exports.FormReadOnlyText = FormReadOnlyText;
 exports.FormRepeater = FormRepeater;
 exports.FormSelect = FormSelect;
 exports.FormText = FormText;

package/dist/index.esm.js

@@ -7,6 +7,7 @@ import cx from 'classnames';
 import { makeStyles as makeStyles$1 } from '@material-ui/styles';
 import AutorenewIcon from '@material-ui/icons/Autorenew';
 import { Delete, Save, Clear } from '@material-ui/icons';
+import { DateTime } from 'luxon';
 import path$3 from 'path';
 import proc from 'process';
 import { fileURLToPath } from 'url';
@@ -29126,7 +29127,6 @@ var useStyles = makeStyles$1(function (theme) {
 var FormControlField$1 = function FormControlField(_ref) {
   var variant = _ref.variant,
       type = _ref.type,
-      isRender = _ref.isRender,
       name = _ref.name,
       label = _ref.label,
       component = _ref.component,
@@ -29155,6 +29155,8 @@ var FormControlField$1 = function FormControlField(_ref) {
     onChange: onChange
   });
 
+  var isRender = type === 'render';
+
   if (validating) {
     finalProps.endAdornment = [/*#__PURE__*/React__default.createElement(InputAdornment, {
       position: "end"
@@ -29204,7 +29206,6 @@ var FormControlField$1 = function FormControlField(_ref) {
 
 FormControlField$1.propTypes = {
   variant: PropTypes__default.oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes__default.bool,
   component: PropTypes__default.any.isRequired,
   componentProps: PropTypes__default.object,
   type: PropTypes__default.string.isRequired,
@@ -29248,7 +29249,6 @@ var FormField = function FormField(_ref2) {
 
 FormField.propTypes = {
   variant: PropTypes__default.oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes__default.bool,
   component: PropTypes__default.any.isRequired,
   componentProps: PropTypes__default.object,
   type: PropTypes__default.string.isRequired,
@@ -29355,11 +29355,12 @@ FormNumber.propTypes = {
   onChange: PropTypes__default.func.isRequired
 };
 
-var _excluded$3 = ["options", "required"];
+var _excluded$3 = ["options", "required", "value"];
 
 var FormSelect = function FormSelect(_ref) {
   var options = _ref.options,
       required = _ref.required,
+      value = _ref.value,
       props = _objectWithoutProperties(_ref, _excluded$3);
 
   var unselectOption = [];
@@ -29375,7 +29376,9 @@ var FormSelect = function FormSelect(_ref) {
     return l.label.localeCompare(r.label);
   })));
   return /*#__PURE__*/React__default.createElement(TextField, _extends({
-    select: true
+    select: true,
+    required: required,
+    value: value === undefined ? '' : value
   }, props), allOptions.map(function (_ref2) {
     var itemLabel = _ref2.label,
         itemValue = _ref2.value;
@@ -29657,7 +29660,7 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var FormControlField = function FormControlField(_ref) {
-  var isRender = _ref.isRender,
+  var type = _ref.type,
       name = _ref.name,
       label = _ref.label,
       component = _ref.component,
@@ -29680,7 +29683,7 @@ var FormControlField = function FormControlField(_ref) {
   }
 
   var control;
-  if (isRender) control = /*#__PURE__*/React__default.cloneElement(component, finalProps);else control = /*#__PURE__*/React__default.createElement(component, finalProps);
+  if (type === 'render') control = /*#__PURE__*/React__default.cloneElement(component, finalProps);else control = /*#__PURE__*/React__default.createElement(component, finalProps);
   return /*#__PURE__*/React__default.createElement(Box, {
     width: "100%",
     display: "flex",
@@ -29693,10 +29696,10 @@ var FormControlField = function FormControlField(_ref) {
 };
 
 FormControlField.propTypes = {
-  isRender: PropTypes__default.bool,
   component: PropTypes__default.any.isRequired,
   componentProps: PropTypes__default.object,
   name: PropTypes__default.string.isRequired,
+  type: PropTypes__default.string.isRequired,
   label: PropTypes__default.string.isRequired,
   value: PropTypes__default.oneOfType([PropTypes__default.string, PropTypes__default.number, PropTypes__default.bool, PropTypes__default.array]),
   options: PropTypes__default.arrayOf(PropTypes__default.shape({
@@ -29755,14 +29758,21 @@ FormReadOnlyField.propTypes = {
 };
 var FormReadOnlyField$1 = /*#__PURE__*/React__default.memo(FormReadOnlyField);
 
-var ReadOnlyText = function ReadOnlyText(_ref) {
-  var value = _ref.value;
+var FormReadOnlyText = function FormReadOnlyText(_ref) {
+  var value = _ref.value,
+      type = _ref.type;
+  var finalValue = value;
+
+  if (type === 'date' || type === 'datetime-local') {
+    finalValue = DateTime.fromISO(value).toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY);
+  }
+
   return /*#__PURE__*/React__default.createElement(Typography, {
     variant: "body1"
-  }, value);
+  }, finalValue);
 };
 
-ReadOnlyText.propTypes = {
+FormReadOnlyText.propTypes = {
   value: PropTypes__default.oneOfType([PropTypes__default.number, PropTypes__default.string])
 };
 
@@ -67977,7 +67987,7 @@ FormReadOnlyMarkdown.propTypes = {
 
 var FormReadOnlyNumber = function FormReadOnlyNumber(_ref) {
   var value = _ref.value;
-  return /*#__PURE__*/React__default.createElement(ReadOnlyText, {
+  return /*#__PURE__*/React__default.createElement(FormReadOnlyText, {
     value: castToNumber(value)
   });
 };
@@ -67991,7 +68001,7 @@ var FormReadOnlySelect = function FormReadOnlySelect(_ref) {
 
   var value = _ref.value,
       options = _ref.options;
-  return /*#__PURE__*/React__default.createElement(ReadOnlyText, {
+  return /*#__PURE__*/React__default.createElement(FormReadOnlyText, {
     value: (_options$find = options.find(function (o) {
       return o.value === value;
     })) === null || _options$find === void 0 ? void 0 : _options$find.label
@@ -75403,9 +75413,9 @@ function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeRefl
 
 function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var formReadOnlyComponentMap = {
-  "default": ReadOnlyText,
+  "default": FormReadOnlyText,
   markdown: FormReadOnlyMarkdown,
-  string: ReadOnlyText,
+  string: FormReadOnlyText,
   number: FormReadOnlyNumber,
   select: FormReadOnlySelect,
   "boolean": FormReadOnlyBoolean,
@@ -75447,17 +75457,23 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           errorMessages = _this$props.errorMessages,
           results = _this$props.results,
           data = _this$props.data,
-          fieldStates = _this$props.fieldStates;
+          fieldStates = _this$props.fieldStates,
+          renderComponentMap = _this$props.renderComponentMap;
       var field = fieldEntry,
           specialProps = {};
 
       if (Array.isArray(fieldEntry)) {
         if (fieldEntry[0] === '@@render') {
           field = fieldEntry[1];
-          specialProps = _objectSpread$1({
-            isRender: true
-          }, fieldEntry[2] || {});
-        } else if (fieldEntry[0] === '@@markdown') {
+          return {
+            type: 'render',
+            name: field,
+            component: renderComponentMap[field],
+            componentProps: fieldEntry[2] || {}
+          };
+        }
+
+        if (fieldEntry[0] === '@@markdown') {
           return {
             type: 'markdown',
             name: fieldEntry[1],
@@ -75466,10 +75482,11 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
               content: fieldEntry[2]
             }
           };
-        } else {
-          field = fieldEntry[0];
-          specialProps = fieldEntry[1];
         }
+
+        field = fieldEntry[0];
+        if (!fieldEntry[1]) throw new Error("field \"".concat(field, "\" is defined in an array, but has no props definition"));
+        specialProps = fieldEntry[1];
       }
 
       var _specialProps = specialProps,
@@ -75490,8 +75507,8 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
           type = _schema$properties$fi.type,
           defaultValue = _schema$properties$fi["default"];
       var mapKey;
-      if (specialProps.isRender) mapKey = type;else if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
-      var mapEntry = specialProps.isRender ? '@@render' : componentMap[mapKey];
+      if (componentMap[field] !== undefined) mapKey = field;else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type;else if (Array.isArray(type)) mapKey = 'select';else if (componentMap["default"] !== undefined) mapKey = 'default';else throw new Error("Could not find a Component to render for \"".concat(field, "\""));
+      var mapEntry = componentMap[mapKey];
       var component = mapEntry,
           props = {};
 
@@ -75595,7 +75612,6 @@ var FormulatorFormSection = /*#__PURE__*/function (_React$Component) {
             type: _type,
             label: _label,
             value: _value,
-            isRender: true,
             required: _required,
             hasErrors: _hasErrors,
             errors: _errors,
@@ -76386,4 +76402,4 @@ FormulatorForm.defaultProps = {
   errorMessages: {}
 };
 
-export { FormBoolean, FormField$1 as FormField, FormNumber, FormReadOnlyBoolean, FormReadOnlyField$1 as FormReadOnlyField, FormReadOnlyMarkdown, FormReadOnlyNumber, FormReadOnlyRepeater, FormReadOnlySelect, ReadOnlyText as FormReadOnlyText, FormRepeater, FormSelect, FormText, FormulatorForm };
+export { FormBoolean, FormField$1 as FormField, FormNumber, FormReadOnlyBoolean, FormReadOnlyField$1 as FormReadOnlyField, FormReadOnlyMarkdown, FormReadOnlyNumber, FormReadOnlyRepeater, FormReadOnlySelect, FormReadOnlyText, FormRepeater, FormSelect, FormText, FormulatorForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",
@@ -21,6 +21,7 @@
     "@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"
@@ -46,6 +47,7 @@
     "@storybook/testing-library": "^0.0.11",
     "babel-loader": "^8.2.5",
     "classnames": "^2.3.1",
+    "luxon": "^2.3.2",
     "cross-env": "^7.0.3",
     "eslint": "^7.11.0",
     "eslint-config-airbnb": "^18.0.1",

package/src/Editable/FormField.jsx

@@ -21,7 +21,6 @@ const useStyles = makeStyles(theme => ({ error: { color: theme.palette.error.mai
 const FormControlField = ({
   variant,
   type,
-  isRender,
   name,
   label,
   component,
@@ -51,6 +50,8 @@ const FormControlField = ({
     onChange
   }
 
+  const isRender = type === 'render'
+
   if (validating) {
     finalProps.endAdornment = [(
       <InputAdornment position="end">
@@ -127,7 +128,6 @@ const FormControlField = ({
 
 FormControlField.propTypes = {
   variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes.bool,
   component: PropTypes.any.isRequired,
   componentProps: PropTypes.object,
   type: PropTypes.string.isRequired,
@@ -190,7 +190,6 @@ const FormField = ({
 
 FormField.propTypes = {
   variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
-  isRender: PropTypes.bool,
   component: PropTypes.any.isRequired,
   componentProps: PropTypes.object,
   type: PropTypes.string.isRequired,

package/src/Editable/FormSelect.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { TextField, MenuItem } from '@material-ui/core'
 
-const FormSelect = ({ options, required, ...props }) => {
+const FormSelect = ({ options, required, value, ...props }) => {
   let unselectOption = []
 
   if (!required) {
@@ -18,6 +18,8 @@ const FormSelect = ({ options, required, ...props }) => {
   return (
     <TextField
       select
+      required={required}
+      value={value === undefined ? '' : value}
       {...props}
     >
       {

package/src/FormulatorFormSection.jsx

@@ -60,18 +60,23 @@ class FormulatorFormSection extends React.Component {
       errorMessages,
       results,
       data,
-      fieldStates
+      fieldStates,
+      renderComponentMap
     } = this.props
 
     let field = fieldEntry, specialProps = {}
     if (Array.isArray(fieldEntry)) {
       if (fieldEntry[0] === '@@render') {
         field = fieldEntry[1]
-        specialProps = {
-          isRender: true,
-          ...(fieldEntry[2] || {})
-        }
-      } else if (fieldEntry[0] === '@@markdown') {
+        return ({
+          type: 'render',
+          name: field,
+          component: renderComponentMap[field],
+          componentProps: fieldEntry[2] || {}
+        })
+      }
+
+      if (fieldEntry[0] === '@@markdown') {
         return ({
           type: 'markdown',
           name: fieldEntry[1],
@@ -80,10 +85,12 @@ class FormulatorFormSection extends React.Component {
             content: fieldEntry[2]
           }
         })
-      } else {
-        field = fieldEntry[0]
-        specialProps = fieldEntry[1]
       }
+
+
+      field = fieldEntry[0]
+      if (!fieldEntry[1]) throw new Error(`field "${field}" is defined in an array, but has no props definition`)
+      specialProps = fieldEntry[1]
     }
 
     const { hidden, hideLabel, ...extraProps } = specialProps
@@ -97,14 +104,13 @@ class FormulatorFormSection extends React.Component {
     const { type, default: defaultValue } = schema.properties[field]
 
     let mapKey
-    if (specialProps.isRender) mapKey = type
-    else if (componentMap[field] !== undefined) mapKey = field
+    if (componentMap[field] !== undefined) mapKey = field
     else if (typeof type === 'string' && componentMap[type] !== undefined) mapKey = type
     else if (Array.isArray(type)) mapKey = 'select'
     else if (componentMap.default !== undefined) mapKey = 'default'
     else throw new Error(`Could not find a Component to render for "${field}"`)
 
-    const mapEntry = specialProps.isRender ? '@@render' : componentMap[mapKey]
+    const mapEntry = componentMap[mapKey]
     let component = mapEntry, props = {}
 
     if (mapKey === 'select') {
@@ -218,7 +224,6 @@ class FormulatorFormSection extends React.Component {
                   type,
                   label,
                   value,
-                  isRender: true,
                   required,
                   hasErrors,
                   errors,

package/src/ReadOnly/FormReadOnlyField.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { Typography, Box } from '@material-ui/core'
 
 const FormControlField = ({
-  isRender,
+  type,
   name,
   label,
   component,
@@ -28,7 +28,7 @@ const FormControlField = ({
   }
 
   let control
-  if (isRender) control = React.cloneElement(component, finalProps)
+  if (type === 'render') control = React.cloneElement(component, finalProps)
   else control = React.createElement(component, finalProps)
 
   return (
@@ -55,10 +55,10 @@ const FormControlField = ({
 }
 
 FormControlField.propTypes = {
-  isRender: PropTypes.bool,
   component: PropTypes.any.isRequired,
   componentProps: PropTypes.object,
   name: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([
     PropTypes.string,

package/src/ReadOnly/FormReadOnlyText.jsx

@@ -3,17 +3,27 @@ import PropTypes from 'prop-types'
 
 import { Typography } from '@material-ui/core'
 
-const ReadOnlyText = ({ value }) => (
-  <Typography variant="body1">
-    {value}
-  </Typography>
-)
+import { DateTime } from 'luxon'
 
-ReadOnlyText.propTypes = {
+const FormReadOnlyText = ({ value, type }) => {
+  let finalValue = value
+
+  if (type === 'date' || type === 'datetime-local') {
+    finalValue = DateTime.fromISO(value).toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY)
+  }
+
+  return (
+    <Typography variant="body1">
+      {finalValue}
+    </Typography>
+  )
+}
+
+FormReadOnlyText.propTypes = {
   value: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.string
   ])
 }
 
-export default ReadOnlyText
+export default FormReadOnlyText