@scenid/react-formulator 0.5.6 → 0.5.8

package/README.md

@@ -1,29 +1,29 @@
-# README #
-
-This README would normally document whatever steps are necessary to get your application up and running.
-
-### What is this repository for? ###
-
-* Quick summary
-* Version
-* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)
-
-### How do I get set up? ###
-
-* Summary of set up
-* Configuration
-* Dependencies
-* Database configuration
-* How to run tests
-* Deployment instructions
-
-### Contribution guidelines ###
-
-* Writing tests
-* Code review
-* Other guidelines
-
-### Who do I talk to? ###
-
-* Repo owner or admin
+# README #
+
+This README would normally document whatever steps are necessary to get your application up and running.
+
+### What is this repository for? ###
+
+* Quick summary
+* Version
+* [Learn Markdown](https://bitbucket.org/tutorials/markdowndemo)
+
+### How do I get set up? ###
+
+* Summary of set up
+* Configuration
+* Dependencies
+* Database configuration
+* How to run tests
+* Deployment instructions
+
+### Contribution guidelines ###
+
+* Writing tests
+* Code review
+* Other guidelines
+
+### Who do I talk to? ###
+
+* Repo owner or admin
 * Other community or team contact

package/dist/index.cjs.js

@@ -29179,6 +29179,7 @@ var FormGroupHeader = function FormGroupHeader(_ref) {
       desc = _ref.desc,
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign;
+  if (!label && !desc) return false;
   return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     style: {
       width: '100%',
@@ -29201,13 +29202,13 @@ var FormGroupHeader = function FormGroupHeader(_ref) {
 FormGroupHeader.propTypes = {
   label: PropTypes__default["default"].string,
   labelVariant: PropTypes__default["default"].oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'button', 'caption', 'overline']),
-  text: PropTypes__default["default"].string,
-  textVariant: PropTypes__default["default"].oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'button', 'caption', 'overline']),
+  desc: PropTypes__default["default"].string,
+  descVariant: PropTypes__default["default"].oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'button', 'caption', 'overline']),
   textAlign: PropTypes__default["default"].oneOf(['left', 'center', 'right'])
 };
 FormGroupHeader.defaultProps = {
   labelVariant: 'h5',
-  textVariant: 'body2',
+  descVariant: 'body2',
   textAlign: 'left'
 };
 
@@ -29242,7 +29243,7 @@ FormSectionCard.propTypes = {
   children: PropTypes__default["default"].node
 };
 
-var useStyles$3 = styles$n.makeStyles(function (theme) {
+var useStyles$4 = styles$n.makeStyles(function (theme) {
   return {
     formSectionBlock: {
       '&:not(:last-child)': {
@@ -29259,7 +29260,7 @@ var FormSectionBlock = function FormSectionBlock(_ref) {
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign,
       children = _ref.children;
-  var styles = useStyles$3();
+  var styles = useStyles$4();
   return /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     className: styles.formSectionBlock
   }, /*#__PURE__*/React__default["default"].createElement(FormGroupHeader, {
@@ -29285,7 +29286,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$2 = styles$o.makeStyles(function (theme) {
+var useStyles$3 = styles$o.makeStyles(function (theme) {
   return {
     error: {
       color: theme.palette.error.main
@@ -29311,7 +29312,7 @@ var FormControlField$1 = function FormControlField(_ref) {
       validating = _ref.validating,
       dirty = _ref.dirty,
       onChange = _ref.onChange;
-  var styles = useStyles$2();
+  var styles = useStyles$3();
 
   var finalProps = _objectSpread$4(_objectSpread$4({
     formVariant: formVariant,
@@ -39394,6 +39395,19 @@ var _excluded$2 = ["prepend", "append", "componentProps"];
 function ownKeys$2(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$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 useStyles$2 = styles$n.makeStyles(function (theme) {
+  return {
+    readOnlyField: {
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      marginBottom: theme.spacing(1.5),
+      '&:last-child': {
+        marginBottom: 0
+      }
+    }
+  };
+});
 
 var FormControlField = function FormControlField(_ref) {
   var formVariant = _ref.formVariant,
@@ -39416,6 +39430,7 @@ var FormControlField = function FormControlField(_ref) {
     readOnly: true
   });
 
+  var styles = useStyles$2();
   var isSwitch = type === 'boolean';
 
   if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.readOnlyHidden) === true) {
@@ -39425,10 +39440,7 @@ var FormControlField = function FormControlField(_ref) {
   var control;
   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(_Box__default["default"], {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    mb: 1.5
+    className: styles.readOnlyField
   }, label && !isSwitch && /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
     variant: "caption",
     color: "textSecondary"
@@ -84092,18 +84104,27 @@ FormulatorForm.defaultProps = {
 var useStyles = styles$o.makeStyles(function (theme) {
   return {
     "default": {
-      margin: 0
+      margin: 0,
+      userSelect: 'none',
+      '&.clickable': {
+        cursor: 'pointer'
+      }
     },
     sharpEdges: {
       borderRadius: 0
     },
-    spanToCard: {
+    spanSolitaryToCard: {
       margin: theme.spacing(2) * -1
     },
-    editable: {
+    spanBannerToCard: {
+      marginRight: theme.spacing(2) * -1,
+      marginBottom: theme.spacing(0.5) * -1,
+      marginLeft: theme.spacing(2) * -1
+    },
+    checked: {
       backgroundColor: colorManipulator.alpha(theme.palette.primary.main, 0.12)
     },
-    disabled: {
+    unchecked: {
       backgroundColor: theme.palette.grey[200]
     }
   };
@@ -84142,10 +84163,23 @@ var FormPrimaryToggle = function FormPrimaryToggle(_ref) {
     });
   };
 
+  var handleToggleChange = function handleToggleChange() {
+    var newValue = Boolean(!value);
+    onChange({
+      target: {
+        name: name,
+        value: newValue
+      }
+    });
+  };
+
   var checked = isChecked(value, defaultValue);
   return /*#__PURE__*/React__default["default"].createElement(_Paper__default["default"], {
     elevation: 0,
-    className: cx__default["default"](styles["default"], (_cx = {}, _defineProperty(_cx, styles.spanToCard, formVariant === 'card'), _defineProperty(_cx, styles.sharpEdges, !solitary), _defineProperty(_cx, styles.editable, !readOnly), _defineProperty(_cx, styles.disabled, readOnly), _cx))
+    className: cx__default["default"](styles["default"], (_cx = {
+      clickable: !readOnly
+    }, _defineProperty(_cx, styles.spanSolitaryToCard, solitary && formVariant === 'card'), _defineProperty(_cx, styles.spanBannerToCard, !solitary && formVariant === 'card'), _defineProperty(_cx, styles.sharpEdges, !solitary), _defineProperty(_cx, styles.checked, checked), _defineProperty(_cx, styles.unchecked, !checked), _cx)),
+    onClick: handleToggleChange
   }, /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
     display: "flex",
     flexDirection: "row",
@@ -84153,17 +84187,19 @@ var FormPrimaryToggle = function FormPrimaryToggle(_ref) {
     alignItems: "center",
     padding: 2
   }, readOnly && checked && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
+    pt: 1,
     mr: 2
   }, /*#__PURE__*/React__default["default"].createElement(_Check__default["default"], {
-    fontSize: "large",
+    fontSize: solitary ? 'large' : 'medium',
     htmlColor: theme.palette.text.secondary
   })), readOnly && !checked && /*#__PURE__*/React__default["default"].createElement(_Box__default["default"], {
+    pt: 1,
     mr: 2
   }, /*#__PURE__*/React__default["default"].createElement(_Close__default["default"], {
-    fontSize: "large",
+    fontSize: solitary ? 'large' : 'medium',
     htmlColor: theme.palette.text.secondary
   })), /*#__PURE__*/React__default["default"].createElement(_Typography__default["default"], {
-    variant: "h5",
+    variant: solitary ? 'h5' : 'body1',
     color: checked && !readOnly ? 'primary' : 'textSecondary'
   }, checked ? checkedLabel : uncheckedLabel), !readOnly && /*#__PURE__*/React__default["default"].createElement(_Switch__default["default"], {
     color: "primary",

package/dist/index.esm.js

@@ -29109,6 +29109,7 @@ var FormGroupHeader = function FormGroupHeader(_ref) {
       desc = _ref.desc,
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign;
+  if (!label && !desc) return false;
   return /*#__PURE__*/React__default.createElement(_Box, {
     style: {
       width: '100%',
@@ -29131,13 +29132,13 @@ var FormGroupHeader = function FormGroupHeader(_ref) {
 FormGroupHeader.propTypes = {
   label: PropTypes__default.string,
   labelVariant: PropTypes__default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'button', 'caption', 'overline']),
-  text: PropTypes__default.string,
-  textVariant: PropTypes__default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'button', 'caption', 'overline']),
+  desc: PropTypes__default.string,
+  descVariant: PropTypes__default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'button', 'caption', 'overline']),
   textAlign: PropTypes__default.oneOf(['left', 'center', 'right'])
 };
 FormGroupHeader.defaultProps = {
   labelVariant: 'h5',
-  textVariant: 'body2',
+  descVariant: 'body2',
   textAlign: 'left'
 };
 
@@ -29172,7 +29173,7 @@ FormSectionCard.propTypes = {
   children: PropTypes__default.node
 };
 
-var useStyles$3 = makeStyles(function (theme) {
+var useStyles$4 = makeStyles(function (theme) {
   return {
     formSectionBlock: {
       '&:not(:last-child)': {
@@ -29189,7 +29190,7 @@ var FormSectionBlock = function FormSectionBlock(_ref) {
       descVariant = _ref.descVariant,
       textAlign = _ref.textAlign,
       children = _ref.children;
-  var styles = useStyles$3();
+  var styles = useStyles$4();
   return /*#__PURE__*/React__default.createElement(_Box, {
     className: styles.formSectionBlock
   }, /*#__PURE__*/React__default.createElement(FormGroupHeader, {
@@ -29215,7 +29216,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$2 = makeStyles$1(function (theme) {
+var useStyles$3 = makeStyles$1(function (theme) {
   return {
     error: {
       color: theme.palette.error.main
@@ -29241,7 +29242,7 @@ var FormControlField$1 = function FormControlField(_ref) {
       validating = _ref.validating,
       dirty = _ref.dirty,
       onChange = _ref.onChange;
-  var styles = useStyles$2();
+  var styles = useStyles$3();
 
   var finalProps = _objectSpread$4(_objectSpread$4({
     formVariant: formVariant,
@@ -39324,6 +39325,19 @@ var _excluded$2 = ["prepend", "append", "componentProps"];
 function ownKeys$2(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$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 useStyles$2 = makeStyles(function (theme) {
+  return {
+    readOnlyField: {
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      marginBottom: theme.spacing(1.5),
+      '&:last-child': {
+        marginBottom: 0
+      }
+    }
+  };
+});
 
 var FormControlField = function FormControlField(_ref) {
   var formVariant = _ref.formVariant,
@@ -39346,6 +39360,7 @@ var FormControlField = function FormControlField(_ref) {
     readOnly: true
   });
 
+  var styles = useStyles$2();
   var isSwitch = type === 'boolean';
 
   if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.readOnlyHidden) === true) {
@@ -39355,10 +39370,7 @@ var FormControlField = function FormControlField(_ref) {
   var control;
   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",
-    flexDirection: "column",
-    mb: 1.5
+    className: styles.readOnlyField
   }, label && !isSwitch && /*#__PURE__*/React__default.createElement(_Typography, {
     variant: "caption",
     color: "textSecondary"
@@ -84022,18 +84034,27 @@ FormulatorForm.defaultProps = {
 var useStyles = makeStyles$1(function (theme) {
   return {
     "default": {
-      margin: 0
+      margin: 0,
+      userSelect: 'none',
+      '&.clickable': {
+        cursor: 'pointer'
+      }
     },
     sharpEdges: {
       borderRadius: 0
     },
-    spanToCard: {
+    spanSolitaryToCard: {
       margin: theme.spacing(2) * -1
     },
-    editable: {
+    spanBannerToCard: {
+      marginRight: theme.spacing(2) * -1,
+      marginBottom: theme.spacing(0.5) * -1,
+      marginLeft: theme.spacing(2) * -1
+    },
+    checked: {
       backgroundColor: alpha$2(theme.palette.primary.main, 0.12)
     },
-    disabled: {
+    unchecked: {
       backgroundColor: theme.palette.grey[200]
     }
   };
@@ -84072,10 +84093,23 @@ var FormPrimaryToggle = function FormPrimaryToggle(_ref) {
     });
   };
 
+  var handleToggleChange = function handleToggleChange() {
+    var newValue = Boolean(!value);
+    onChange({
+      target: {
+        name: name,
+        value: newValue
+      }
+    });
+  };
+
   var checked = isChecked(value, defaultValue);
   return /*#__PURE__*/React__default.createElement(_Paper, {
     elevation: 0,
-    className: cx(styles["default"], (_cx = {}, _defineProperty(_cx, styles.spanToCard, formVariant === 'card'), _defineProperty(_cx, styles.sharpEdges, !solitary), _defineProperty(_cx, styles.editable, !readOnly), _defineProperty(_cx, styles.disabled, readOnly), _cx))
+    className: cx(styles["default"], (_cx = {
+      clickable: !readOnly
+    }, _defineProperty(_cx, styles.spanSolitaryToCard, solitary && formVariant === 'card'), _defineProperty(_cx, styles.spanBannerToCard, !solitary && formVariant === 'card'), _defineProperty(_cx, styles.sharpEdges, !solitary), _defineProperty(_cx, styles.checked, checked), _defineProperty(_cx, styles.unchecked, !checked), _cx)),
+    onClick: handleToggleChange
   }, /*#__PURE__*/React__default.createElement(_Box, {
     display: "flex",
     flexDirection: "row",
@@ -84083,17 +84117,19 @@ var FormPrimaryToggle = function FormPrimaryToggle(_ref) {
     alignItems: "center",
     padding: 2
   }, readOnly && checked && /*#__PURE__*/React__default.createElement(_Box, {
+    pt: 1,
     mr: 2
   }, /*#__PURE__*/React__default.createElement(_Check, {
-    fontSize: "large",
+    fontSize: solitary ? 'large' : 'medium',
     htmlColor: theme.palette.text.secondary
   })), readOnly && !checked && /*#__PURE__*/React__default.createElement(_Box, {
+    pt: 1,
     mr: 2
   }, /*#__PURE__*/React__default.createElement(_Close, {
-    fontSize: "large",
+    fontSize: solitary ? 'large' : 'medium',
     htmlColor: theme.palette.text.secondary
   })), /*#__PURE__*/React__default.createElement(_Typography, {
-    variant: "h5",
+    variant: solitary ? 'h5' : 'body1',
     color: checked && !readOnly ? 'primary' : 'textSecondary'
   }, checked ? checkedLabel : uncheckedLabel), !readOnly && /*#__PURE__*/React__default.createElement(_Switch, {
     color: "primary",

package/package.json

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