hidden field

CHANGELOG.md

@@ -1,11 +1,12 @@
 # LetsForm Changelog
 
-## Next
+## 0.7.19
 - fixed RSuite radio-group missing required icon
 - fixed RSuite fullWidth / Width params in select
 - added time component for MUI, RSuite, Mantine
 - fixed required icon for MUI for all components
 - cleanup and more properties for MUI Date and MUI Datime
+- Hidden field for all frameworks
 
 ## v0.7.18
 - added React Upload component

common/hidden/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { lfLog } from '../../helpers/lf-log';
+
+const Hidden = ({ name }) => (
+  <div
+    className="lf-control-hidden"
+    style={{ padding: '10px' }}
+  >Hidden field: <em>{name}</em></div>
+);
+lfLog('Loaded RSuite5.Hidden');
+
+export default Hidden;

generator/index.js

@@ -50,7 +50,8 @@ const GenerateGenerator = ({ Forms, Fields }) => {
     prependView
   }) => {
     const renderedFields = (fields || [])
-      .filter(field => Wrapper || field.hidden !== true)
+      .filter(field => Wrapper || field.component !== 'hidden') // skip hidden type field (not in design mode)
+      .filter(field => Wrapper || field.hidden !== true) // skip fields with "hidden" attribute (not in design mode)
       .map((field, index) => {
         let Component;
         if (Components[field.component] && Components[field.component][framework]) {

react-antd/index.js

@@ -81,6 +81,9 @@ const Fields = {
   },
   'steps': {
     'react-antd': lazy(() => import('./steps'))
+  },
+  'hidden': {
+    'react-antd': lazy(() => import('./../common/hidden'))
   }
 };
 

react-bootstrap/index.js

@@ -66,6 +66,9 @@ const Fields = {
   },
   'button': {
     'react-bootstrap': lazy(() => import('./button'))
+  },
+  'hidden': {
+    'react-bootstrap': lazy(() => import('./../common/hidden'))
   }
 };
 

react-mantine/index.js

@@ -81,6 +81,9 @@ const Fields = {
   },
   'time': {
     'react-mantine': lazy(() => import('./time'))
+  },
+  'hidden': {
+    'react-mantine': lazy(() => import('./../common/hidden'))
   }
 };
 

react-material-ui/index.js

@@ -78,6 +78,9 @@ const Fields = {
   },
   'time': {
     'react-material-ui': lazy(() => import('./time'))
+  },
+  'hidden': {
+    'react-material-ui': lazy(() => import('./../common/hidden'))
   }
 };
 

react-rsuite5/index.js

@@ -102,6 +102,9 @@ const Fields = {
   },
   'time': {
     'react-rsuite5': lazy(() => import('./time'))
+  },
+  'hidden': {
+    'react-rsuite5': lazy(() => import('./../common/hidden'))
   }
 };
 

react/index.js

@@ -57,6 +57,9 @@ const Fields = {
   },
   'upload': {
     'react': lazy(() => import('./upload'))
+  },
+  'hidden': {
+    'react': lazy(() => import('./../common/hidden'))
   }
   // Removed, doesn't work
   /*'toggle': {