dynamic-mui 0.1.7 → 1.0.0

package/README.md

@@ -2,25 +2,32 @@ Build dynamic forms using Material UI
 
 ## Installation
 
-`npm install @material-ui/core@next @emotion/react @emotion/styled`
+`npm install @mui/material @emotion/react @emotion/styled`
 `npm install dynamic-mui --save`
 
 ##Usage 
-
+```
 `import { FormGenerator } from 'dynamic-mui/dist-modules/components/FormGenerator'`;
-`import * as MUI from '@material-ui/core';`
 
-`<FormGenerator
-data={[{
-type: 'textfield',
-props: { MuiAttributes: { placeholder: 'Standard', fullWidth: true, variant: 'standard' } },
-layout: {
-row: 1,
-xs: 4,
-sm: 4,
-},
-},
-]}
-guid="Testing"
-library={MUI}
-/>`
+export default function DynamicForm() {
+  return (
+    <FormGenerator
+      data={[
+        {
+          type: 'textfield',
+          props: {
+            MuiAttributes: { placeholder: 'Standard', fullWidth: true, variant: 'standard' },
+          },
+          layout: {
+            row: 1,
+            xs: 4,
+            sm: 4,
+          },
+        },
+      ]}
+      guid="Testing"
+      library={MUI}
+    />
+  );
+}     
+```

package/dist-modules/App.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _logo = _interopRequireDefault(require("./logo.svg"));
-
 require("./App.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function App() {
   return /*#__PURE__*/React.createElement("div", {
     className: "App"
@@ -27,6 +23,4 @@ function App() {
     rel: "noopener noreferrer"
   }, "Learn React")));
 }
-
-var _default = App;
-exports.default = _default;
+var _default = exports.default = App;

package/dist-modules/App.test.js

@@ -1,15 +1,10 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _App = _interopRequireDefault(require("./App"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 test('renders learn react link', function () {
   (0, _react.render)( /*#__PURE__*/React.createElement(_App.default, null));
-
   var linkElement = _react.screen.getByText(/learn react/i);
-
   expect(linkElement).toBeInTheDocument();
 });

package/dist-modules/components/DynamicComponent.js

@@ -1,30 +1,21 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = DynamicComponent;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var Controls = _interopRequireWildcard(require("./controls/index"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function DynamicComponent(props) {
   var map = props.map;
   var CustomComponent = Controls.default[map];
   return /*#__PURE__*/_react.default.createElement(CustomComponent, props);
 }
-
 DynamicComponent.propTypes = process.env.NODE_ENV !== "production" ? {
   map: _propTypes.default.string.isRequired
 } : {};

package/dist-modules/components/FormGenerator.js

@@ -3,41 +3,60 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.FormGenerator = void 0;
-
+exports.FormGenerator = FormGenerator;
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _mui = _interopRequireDefault(require("../config/mui"));
-
 var _DynamicComponent = _interopRequireDefault(require("./DynamicComponent"));
-
 var _helper = require("../util/helper");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var LIBMap = {
   MUI: {
     map: _mui.default
   }
 };
-/** FormGenerator */
+var response = {};
+var handleSubmit = function handleSubmit(callback, data) {
+  if (typeof callback === 'function') {
+    callback(response, null, data);
+  }
+};
 
-var FormGenerator = function FormGenerator(props) {
+/** FormGenerator */
+function FormGenerator(props) {
   try {
     var _props$data = props.data,
-        data = _props$data === void 0 ? [] : _props$data,
-        _props$patch = props.patch,
-        patch = _props$patch === void 0 ? {} : _props$patch,
-        guid = props.guid;
+      data = _props$data === void 0 ? [] : _props$data,
+      _props$patch = props.patch,
+      patch = _props$patch === void 0 ? {} : _props$patch,
+      guid = props.guid,
+      formRef = props.formRef,
+      onSubmit = props.onSubmit,
+      onChange = props.onChange;
     var config = LIBMap.MUI;
     var dataObj = JSON.parse(JSON.stringify(data));
     var layout = (0, _helper.generateLayout)((0, _helper.updatePatchData)(JSON.parse(JSON.stringify(dataObj)), patch, guid));
+    var onUpdate = function onUpdate(_ref) {
+      var id = _ref.id,
+        value = _ref.value;
+      try {
+        if ((0, _isEmpty.default)(response[guid])) response[guid] = patch;
+        response[guid][id] = value;
+        if (typeof onChange === 'function') {
+          onChange({
+            id: id,
+            value: value
+          });
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.log(e);
+      }
+    };
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
       key: (0, _helper.generateKey)('layout-grid'),
       container: true,
@@ -45,20 +64,20 @@ var FormGenerator = function FormGenerator(props) {
     }, layout.wrows.map(function (row) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, row.map(function (field, index) {
         var _field$type = field.type,
-            type = _field$type === void 0 ? '' : _field$type,
-            _field$style = field.style,
-            style = _field$style === void 0 ? {} : _field$style,
-            _field$className = field.className,
-            className = _field$className === void 0 ? '' : _field$className,
-            _field$visible = field.visible,
-            visible = _field$visible === void 0 ? false : _field$visible,
-            _field$rules = field.rules,
-            rules = _field$rules === void 0 ? {} : _field$rules;
+          type = _field$type === void 0 ? '' : _field$type,
+          _field$style = field.style,
+          style = _field$style === void 0 ? {} : _field$style,
+          _field$className = field.className,
+          className = _field$className === void 0 ? '' : _field$className,
+          _field$visible = field.visible,
+          visible = _field$visible === void 0 ? false : _field$visible,
+          _field$rules = field.rules,
+          rules = _field$rules === void 0 ? {} : _field$rules;
         var cProps = field.props || {};
         var cLayout = field.layout || {};
         var configObj = config.map[type] || {};
         var _configObj$options = configObj.options,
-            options = _configObj$options === void 0 ? {} : _configObj$options;
+          options = _configObj$options === void 0 ? {} : _configObj$options;
         return /*#__PURE__*/_react.default.createElement(_Grid.default, _extends({
           key: (0, _helper.generateKey)('layout-comp', index),
           item: true,
@@ -66,61 +85,76 @@ var FormGenerator = function FormGenerator(props) {
         }, cLayout, {
           className: "".concat(className, " ").concat(visible === false ? 'hidden' : 'show')
         }), /*#__PURE__*/_react.default.createElement(_DynamicComponent.default, {
+          key: (0, _helper.generateKey)('dynamic-comp', index),
           map: configObj.map,
           option: options.type || '',
           control: field,
           attributes: cProps,
-          rules: rules
+          rules: rules,
+          onChange: onUpdate
         }));
       }));
     })), layout.worows.map(function (field, index) {
       var _field$type2 = field.type,
-          type = _field$type2 === void 0 ? '' : _field$type2,
-          _field$style2 = field.style,
-          style = _field$style2 === void 0 ? {} : _field$style2,
-          _field$className2 = field.className,
-          className = _field$className2 === void 0 ? '' : _field$className2,
-          _field$visible2 = field.visible,
-          visible = _field$visible2 === void 0 ? false : _field$visible2,
-          _field$rules2 = field.rules,
-          rules = _field$rules2 === void 0 ? {} : _field$rules2;
+        type = _field$type2 === void 0 ? '' : _field$type2,
+        _field$style2 = field.style,
+        style = _field$style2 === void 0 ? {} : _field$style2,
+        _field$className2 = field.className,
+        className = _field$className2 === void 0 ? '' : _field$className2,
+        _field$visible2 = field.visible,
+        visible = _field$visible2 === void 0 ? false : _field$visible2,
+        _field$rules2 = field.rules,
+        rules = _field$rules2 === void 0 ? {} : _field$rules2;
       var configObj = config.map[type] || {};
       var cProps = field.props;
       var _configObj$options2 = configObj.options,
-          options = _configObj$options2 === void 0 ? {} : _configObj$options2;
+        options = _configObj$options2 === void 0 ? {} : _configObj$options2;
       return /*#__PURE__*/_react.default.createElement("div", {
         key: (0, _helper.generateKey)('layout-comp', index),
         style: style,
         className: "".concat(className, " ").concat(visible === false ? 'hidden' : 'show')
       }, /*#__PURE__*/_react.default.createElement(_DynamicComponent.default, {
+        key: (0, _helper.generateKey)('dynamic-comp', index),
         map: configObj.map,
         option: options.type || '',
         control: field,
         attributes: cProps,
-        rules: rules
+        rules: rules,
+        onChange: onUpdate
       }));
+    }), /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      ref: formRef,
+      onClick: function onClick() {
+        handleSubmit(onSubmit, data, guid);
+      },
+      style: {
+        display: 'none'
+      }
     }));
   } catch (e) {
     return /*#__PURE__*/_react.default.createElement("div", null, "Error");
   }
-};
-
-exports.FormGenerator = FormGenerator;
+}
 FormGenerator.propTypes = process.env.NODE_ENV !== "production" ? {
   /** Component name */
   guid: _propTypes.default.string.isRequired,
-
   /** Component json data */
   data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-
   /** Json data to assign value */
-  patch: _propTypes.default.objectOf(_propTypes.default.object)
+  patch: _propTypes.default.objectOf(_propTypes.default.object),
+  /** Component Ref */
+  formRef: _propTypes.default.objectOf(_propTypes.default.object),
+  /** Component Submit Function */
+  onSubmit: _propTypes.default.func,
+  /** Component On Change Function */
+  onChange: _propTypes.default.func
 } : {};
 FormGenerator.defaultProps = {
   patch: {}
-}; // eslint-disable-next-line import/no-anonymous-default-export
+};
 
-var _default = {
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = exports.default = {
   FormGenerator: FormGenerator
-};
-exports.default = _default;
+};

package/dist-modules/components/controls/CheckBox/checkbox.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CheckBox;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/** CheckBox Component */
+function CheckBox(_ref) {
+  var attributes = _ref.attributes,
+    onChange = _ref.onChange;
+  var _attributes$MuiAttrib = attributes.MuiAttributes,
+    MuiAttributes = _attributes$MuiAttrib === void 0 ? {} : _attributes$MuiAttrib,
+    _attributes$MuiFCLAtt = attributes.MuiFCLAttributes,
+    MuiFCLAttributes = _attributes$MuiFCLAtt === void 0 ? {} : _attributes$MuiFCLAtt,
+    _attributes$id = attributes.id,
+    id = _attributes$id === void 0 ? '' : _attributes$id;
+  var _React$useState = _react.default.useState(MuiAttributes.defaultChecked || false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    checked = _React$useState2[0],
+    setChecked = _React$useState2[1];
+  var handleChange = function handleChange(event) {
+    setChecked(event.target.checked);
+    onChange({
+      id: id,
+      value: event.target.checked
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, _extends({}, MuiFCLAttributes, {
+    control: /*#__PURE__*/_react.default.createElement(_Checkbox.default, _extends({
+      checked: checked,
+      onChange: handleChange
+    }, MuiAttributes, {
+      inputProps: {
+        'aria-label': 'controlled'
+      }
+    }))
+  }));
+}
+CheckBox.propTypes = process.env.NODE_ENV !== "production" ? {
+  /** Attributes for Typography */
+  attributes: _propTypes.default.objectOf(_propTypes.default.object),
+  /** Function */
+  onChange: _propTypes.default.func
+} : {};
+CheckBox.defaultProps = {
+  attributes: {},
+  onChange: null
+};

package/dist-modules/components/controls/DataTable/datatable.js

@@ -1,33 +1,24 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = DataTable;
-
 var React = _interopRequireWildcard(require("react"));
-
-var _dataGrid = require("@material-ui/data-grid");
-
+var _xDataGrid = require("@mui/x-data-grid");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function DataTable(props) {
   var attributes = props.attributes;
   var _attributes$MuiAttrib = attributes.MuiAttributes,
-      MuiAttributes = _attributes$MuiAttrib === void 0 ? {} : _attributes$MuiAttrib,
-      _attributes$container = attributes.container,
-      container = _attributes$container === void 0 ? {} : _attributes$container;
-  return /*#__PURE__*/React.createElement("div", container, /*#__PURE__*/React.createElement(_dataGrid.DataGrid, MuiAttributes));
+    MuiAttributes = _attributes$MuiAttrib === void 0 ? {} : _attributes$MuiAttrib,
+    _attributes$container = attributes.container,
+    container = _attributes$container === void 0 ? {} : _attributes$container;
+  return /*#__PURE__*/React.createElement("div", container, /*#__PURE__*/React.createElement(_xDataGrid.DataGrid, MuiAttributes));
 }
-
 DataTable.propTypes = process.env.NODE_ENV !== "production" ? {
   /** Attributes for TextField */
   attributes: _propTypes.default.objectOf(_propTypes.default.object)

package/dist-modules/components/controls/DateTime/datetime.js

@@ -4,54 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = DateTime;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-
-var _AdapterDateFns = _interopRequireDefault(require("@material-ui/lab/AdapterDateFns"));
-
-var _LocalizationProvider = _interopRequireDefault(require("@material-ui/lab/LocalizationProvider"));
-
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
+var _xDatePickers = require("@mui/x-date-pickers");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _helper = require("../../../util/helper");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function DateTime(_ref) {
-  var attributes = _ref.attributes;
+  var attributes = _ref.attributes,
+    _onChange = _ref.onChange;
   var _attributes$MuiAttrib = attributes.MuiAttributes,
-      MuiAttributes = _attributes$MuiAttrib === void 0 ? {} : _attributes$MuiAttrib,
-      _attributes$name = attributes.name,
-      name = _attributes$name === void 0 ? 'DatePicker' : _attributes$name;
-
+    MuiAttributes = _attributes$MuiAttrib === void 0 ? {} : _attributes$MuiAttrib,
+    _attributes$name = attributes.name,
+    name = _attributes$name === void 0 ? 'DatePicker' : _attributes$name,
+    _attributes$id = attributes.id,
+    id = _attributes$id === void 0 ? '' : _attributes$id;
   var _React$useState = _react.default.useState(new Date()),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      value = _React$useState2[0],
-      setValue = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
   var MuiDateTime = (0, _helper.DateComponent)(name);
-  return /*#__PURE__*/_react.default.createElement(_LocalizationProvider.default, {
-    dateAdapter: _AdapterDateFns.default
+  return /*#__PURE__*/_react.default.createElement(_xDatePickers.LocalizationProvider, {
+    dateAdapter: _AdapterDateFns.AdapterDateFns
   }, /*#__PURE__*/_react.default.createElement(MuiDateTime, _extends({
     value: value,
     onChange: function onChange(newValue) {
       setValue(newValue);
+      _onChange({
+        id: id,
+        value: newValue
+      });
     }
   }, MuiAttributes, {
     renderInput: function renderInput(params) {
@@ -59,11 +49,13 @@ function DateTime(_ref) {
     }
   })));
 }
-
 DateTime.propTypes = process.env.NODE_ENV !== "production" ? {
   /** Attributes for DateTime */
-  attributes: _propTypes.default.objectOf(_propTypes.default.object)
+  attributes: _propTypes.default.objectOf(_propTypes.default.object),
+  /** Function */
+  onChange: _propTypes.default.func
 } : {};
 DateTime.defaultProps = {
-  attributes: {}
+  attributes: {},
+  onChange: null
 };

package/dist-modules/components/controls/DateTimePicker/datetimepicker.js

@@ -4,54 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = DateTimePicker;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-
-var _AdapterDateFns = _interopRequireDefault(require("@material-ui/lab/AdapterDateFns"));
-
-var _LocalizationProvider = _interopRequireDefault(require("@material-ui/lab/LocalizationProvider"));
-
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _AdapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
+var _xDatePickers = require("@mui/x-date-pickers");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _helper = require("../../../util/helper");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function DateTimePicker(_ref) {
-  var attributes = _ref.attributes;
+  var attributes = _ref.attributes,
+    _onChange = _ref.onChange;
   var _attributes$MuiAttrib = attributes.MuiAttributes,
-      MuiAttributes = _attributes$MuiAttrib === void 0 ? {} : _attributes$MuiAttrib,
-      _attributes$name = attributes.name,
-      name = _attributes$name === void 0 ? 'DateTimePicker' : _attributes$name;
-
+    MuiAttributes = _attributes$MuiAttrib === void 0 ? {} : _attributes$MuiAttrib,
+    _attributes$name = attributes.name,
+    name = _attributes$name === void 0 ? 'DateTimePicker' : _attributes$name,
+    _attributes$id = attributes.id,
+    id = _attributes$id === void 0 ? '' : _attributes$id;
   var _React$useState = _react.default.useState(new Date()),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      value = _React$useState2[0],
-      setValue = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
   var MuiDateTimePicker = (0, _helper.DateComponent)(name);
-  return /*#__PURE__*/_react.default.createElement(_LocalizationProvider.default, {
-    dateAdapter: _AdapterDateFns.default
+  return /*#__PURE__*/_react.default.createElement(_xDatePickers.LocalizationProvider, {
+    dateAdapter: _AdapterDateFns.AdapterDateFns
   }, /*#__PURE__*/_react.default.createElement(MuiDateTimePicker, _extends({
     value: value,
     onChange: function onChange(newValue) {
       setValue(newValue);
+      _onChange({
+        id: id,
+        value: newValue
+      });
     }
   }, MuiAttributes, {
     renderInput: function renderInput(params) {
@@ -59,11 +49,13 @@ function DateTimePicker(_ref) {
     }
   })));
 }
-
 DateTimePicker.propTypes = process.env.NODE_ENV !== "production" ? {
   /** Attributes for DateTimePicker */
-  attributes: _propTypes.default.objectOf(_propTypes.default.object)
+  attributes: _propTypes.default.objectOf(_propTypes.default.object),
+  /** Function */
+  onChange: _propTypes.default.func
 } : {};
 DateTimePicker.defaultProps = {
-  attributes: {}
+  attributes: {},
+  onChange: null
 };