@agilemotion/oui-react-js 1.3.2 → 1.3.4

package/dist/components/form/ImageEditor.js

@@ -0,0 +1,461 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageEditor = exports.ImageEditorComponent = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _BaseField = require("./BaseField");
+
+var _styles = require("@material-ui/core/styles");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _ApplicationContext = _interopRequireDefault(require("./../../ApplicationContext"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _reactPromiseTracker = require("react-promise-tracker");
+
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  button: {
+    margin: theme.spacing(1)
+  },
+  input: {
+    display: 'none'
+  },
+  errorMessageDisplay: {
+    color: 'red'
+  }
+}));
+
+const status = response => {
+  if (response.ok) {
+    return Promise.resolve(response);
+  } else {
+    let error = new Error(response.statusText);
+    error.code = response.status;
+    return Promise.reject(error);
+  }
+};
+
+const json = response => {
+  return response.text();
+};
+
+const location = window.location.protocol + "//" + window.location.hostname;
+
+const ImageEditorComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState = _react.default.useState(props.multiple === true),
+        _React$useState2 = _slicedToArray(_React$useState, 1),
+        multiple = _React$useState2[0];
+
+  const _React$useState3 = _react.default.useState(0),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        angle = _React$useState4[0],
+        setAngle = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(null),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        zoomDepth = _React$useState6[0],
+        setZoomDepth = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState(null),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        originalImageWidth = _React$useState8[0],
+        setOriginalImageWidth = _React$useState8[1];
+
+  const _React$useState9 = _react.default.useState(null),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        originalImageHeight = _React$useState10[0],
+        setOriginalImageHeight = _React$useState10[1];
+
+  const classes = useStyles();
+
+  const width = _Utils.default.getComponentAttribute(props.config, 'width', '320px');
+
+  const height = _Utils.default.getComponentAttribute(props.config, 'height', '320px');
+
+  const base = props.base;
+
+  _react.default.useEffect(() => {}, [props.initialFile]);
+
+  function getFetchConfig(data) {
+    const accessToken = sessionStorage.getItem("accessToken");
+    const idToken = sessionStorage.getItem("idToken");
+    return {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': 'Bearer ' + accessToken,
+        'idToken': idToken
+      },
+      body: data
+    };
+  }
+
+  function getRotateAngle(action) {
+    let rotateAngle = null;
+
+    if ("rotateLeft" === action) {
+      rotateAngle = -90;
+    } else if ("rotateRight" === action) {
+      rotateAngle = 90;
+    }
+
+    return rotateAngle;
+  }
+
+  function process(callback, data, action) {
+    let fetchConfig = getFetchConfig(data);
+
+    let url = location + _ApplicationContext.default.getBaseApiUrl() + _Utils.default.getComponentAttribute(props.config, 'processingUrl', null) + "/" + action + "/" + _Utils.default.getComponentAttribute(props.config, "mode", "DOC");
+
+    let rotateAngle = getRotateAngle(action);
+
+    if (rotateAngle) {
+      url += "/" + rotateAngle;
+    }
+
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+      callback(data);
+    }).catch(e => {
+      if (e.code === 401) {
+        _ApplicationContext.default.clear();
+
+        _ApplicationContext.default.getApplicationHistory().push('/login');
+      }
+    }));
+  }
+
+  const handleChange = () => event => {
+    let files = event.target.files;
+    let file = files[0];
+    let reader = new FileReader();
+    reader.readAsDataURL(file);
+
+    reader.onload = () => {
+      if (!_Utils.default.isNull(file)) {
+        let fileMetaData = {};
+        fileMetaData.name = file.name;
+        fileMetaData.type = file.type;
+        fileMetaData.size = file.size;
+
+        if (base.value) {
+          fileMetaData.id = base.value.id;
+        }
+
+        if (_Utils.default.getComponentAttribute(props.config, 'autoRemoveBackground', false)) {
+          process(data => {
+            fileMetaData.url = data;
+            base.handleValueChange(fileMetaData);
+          }, reader.result, 'removeBackground');
+        } else {
+          fileMetaData.url = file.base64;
+          base.handleValueChange(fileMetaData);
+        }
+      }
+    };
+
+    reader.onloadend = () => {};
+  };
+
+  _react.default.useEffect(() => {
+    let container = document.getElementById("__image_container");
+    let image = document.getElementById("__image");
+
+    if (container) {
+      let ratio = 10 * zoomDepth / 100;
+      container.style.width = originalImageWidth + originalImageWidth * ratio + "px";
+      container.style.height = originalImageHeight + originalImageHeight * ratio + "px";
+      image.style.width = container.style.width;
+      image.style.height = container.style.height;
+    }
+  }, [zoomDepth]);
+
+  const zoom = direction => {
+    if (originalImageWidth === null) {
+      setOriginalImageWidth(document.getElementById("__image").width);
+      setOriginalImageHeight(document.getElementById("__image").height);
+    }
+
+    let depth = direction === "In" ? zoomDepth + 1 : zoomDepth - 1;
+
+    if (depth <= 0) {
+      depth = 1;
+    }
+
+    setZoomDepth(depth);
+  };
+
+  const rotate = direction => {
+    let rotateMode = _Utils.default.getComponentAttribute(props.config, "rotateMode", null);
+
+    if (rotateMode === null || rotateMode === 'SERVER') {
+      process(data => {
+        base.handleValueChange(_objectSpread(_objectSpread({}, base.value), {}, {
+          url: data
+        }));
+      }, base.value.url, 'rotate' + direction);
+    } else {
+      let rotateAngle = angle + getRotateAngle("rotate" + direction);
+      document.getElementById("__image_container").style.transform = "rotate(" + rotateAngle + "deg)";
+      setAngle(rotateAngle);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      margin: '8px',
+      width: width
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("label", null, _Utils.default.getComponentAttribute(props.config, 'label', '')))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    accept: "image/jpeg,image/gif,image/png,image/x-eps",
+    className: classes.input,
+    id: "contained-button-file-".concat(props.config.id),
+    disabled: base.disabled,
+    required: base.required,
+    multiple: multiple,
+    onChange: handleChange(),
+    type: "file"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "contained-button-file-".concat(props.config.id)
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    component: "span",
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '120px',
+      height: '40px',
+      border: base.hasError ? "1px solid #f44336" : null,
+      color: base.hasError ? "#f44336" : null
+    },
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'UPLOAD'
+    })
+  }, "UPLOAD")), base.hasError ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      color: "#f44336",
+      padding: "8px 0"
+    }
+  }, base.errorMessage)) : null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => rotate('Left'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ROTATE_LEFT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    ref: ref,
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => rotate('Right'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ROTATE_RIGHT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => zoom('Out'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ZOOM_OUT'
+    })
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*",
+    style: {
+      marginLeft: '4px'
+    }
+  }, base.value ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    ref: ref,
+    style: {
+      width: '40px',
+      height: '40px'
+    },
+    onClick: () => zoom('In'),
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'ZOOM_IN'
+    })
+  }) : null)), !_Utils.default.isNull(base.value) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "row",
+    style: {
+      padding: "8px 0"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "__image_parent",
+    style: {
+      width: "100%",
+      height: height,
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      backgroundColor: 'transparent',
+      backgroundImage: "url(".concat(require('./transparent.jpeg'), ")"),
+      border: '4px solid #e1e1e1',
+      borderRadius: '4px'
+    },
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.button,
+    style: {
+      width: width,
+      height: parseFloat(height.replace('px', '')) - 20 + 'px',
+      maxHeight: parseFloat(height.replace('px', '')) - 20 + 'px',
+      textAlign: 'center',
+      overflow: 'auto',
+      position: 'absolute',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "__image_container",
+    style: {
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    id: "__image",
+    src: base.value.url,
+    alt: '',
+    style: {
+      height: height
+    }
+  }))))) : null);
+}));
+
+exports.ImageEditorComponent = ImageEditorComponent;
+
+const ImageEditor = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const _React$useState11 = _react.default.useState(null),
+        _React$useState12 = _slicedToArray(_React$useState11, 2),
+        file = _React$useState12[0],
+        setFile = _React$useState12[1];
+
+  const _React$useState13 = _react.default.useState(false),
+        _React$useState14 = _slicedToArray(_React$useState13, 2),
+        clearTrigger = _React$useState14[0],
+        setClearTrigger = _React$useState14[1];
+
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    handle: props.handle,
+    valueParser: (value, inbound) => {
+      if (inbound) {
+        setClearTrigger(!clearTrigger);
+
+        if (!_Utils.default.isNull(value)) {
+          let val = value; // TODO : Support multiple file upload
+
+          if (_Utils.default.getComponentAttribute(props.config, 'multiple', false)) {
+            if (typeof value.length !== 'undefined' && value.length > 0) {
+              val = value[0];
+            } else {
+              if (value.documentRepositoryId) {
+                return value;
+              }
+
+              return null;
+            }
+          }
+
+          if (val.map) {
+            val = val.map;
+          }
+
+          let fileMetaData = {};
+          fileMetaData.name = !_Utils.default.isNull(val.label) ? val.label : val.name;
+          fileMetaData.id = val.id;
+          fileMetaData.type = val.type;
+          fileMetaData.size = val.size;
+          fileMetaData.documentRepositoryId = !_Utils.default.isNull(val.key) ? val.key : val.documentRepositoryId;
+          fileMetaData.documentRepositoryCacheId = val.documentRepositoryCacheId;
+          fileMetaData.url = val.url;
+
+          if (!_Utils.default.isNull(val.url)) {
+            let file = {};
+            file.base64 = val.url;
+            setFile(file);
+          }
+
+          return fileMetaData;
+        }
+      }
+
+      return value;
+    },
+    valueChangeCallback: value => {
+      if (_Utils.default.isNull(value)) {
+        setClearTrigger(!clearTrigger);
+      }
+    }
+  }), base => /*#__PURE__*/_react.default.createElement(ImageEditorComponent, _extends({
+    ref: ref,
+    base: base,
+    initialFile: file,
+    clearTrigger: clearTrigger
+  }, props)));
+}));
+
+exports.ImageEditor = ImageEditor;
+var _default = ImageEditor;
+exports.default = _default;

package/dist/components/form/LabelField.js

@@ -20,13 +20,13 @@ const LabelFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.
 
   let displayTemplate = _Utils.default.getComponentAttribute(props.config, 'displayTemplate', null);
 
-  let style = _Utils.default.getComponentAttribute(props.config, 'style', null);
+  let className = _Utils.default.getComponentAttribute(props.config, 'className', null);
 
   let emptyValue = _Utils.default.getComponentAttribute(props.config, 'emptyValue', '');
 
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    className: style
+    className: className
   }, !_Utils.default.isNull(displayTemplate) ? displayTemplate.replace('@{value}', _Utils.default.isNull(base.value) ? emptyValue : base.value) : base.value);
 }));
 

package/dist/components/form/LookupField.js

@@ -27,6 +27,8 @@ var _DataGrid = require("../DataGrid");
 
 var _Observable = _interopRequireDefault(require("../../event/Observable"));
 
+var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+
 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); }
@@ -68,6 +70,16 @@ const LookupFieldComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_rea
     _Observable.default.clearComponentEventListeners(props.gridHandle.api.id);
   };
 
+  _react.default.useEffect(() => {
+    if (props.config && props.config.grid) {
+      if (!props.config.grid.attributes) {
+        props.config.grid.attributes = {};
+      }
+
+      props.config.grid.attributes['margin'] = _Utils.default.getComponentAttribute(props.config.grid, 'margin', '16px');
+    }
+  });
+
   const setSelectionAsValue = () => {
     if (currentSelection.length > 0) {
       let row = currentSelection[0];
@@ -146,15 +158,15 @@ const LookupFieldComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_rea
     style: {
       overflow: "hidden",
       margin: "8px",
-      border: "1px solid #e1e1e1",
       borderRadius: "4px"
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
+    id: "alert-dialog-title"
+  }, !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['label']) ? props.config.attributes['label'] : null), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: "auto",
       overflow: "auto",
-      minHeight: "300px",
-      paddingTop: "8px"
+      minHeight: "250px"
     }
   }, /*#__PURE__*/_react.default.createElement(_DataGrid.DataGrid, {
     config: props.config.grid,

package/dist/components/form/RadioGroup.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
+
+var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
+
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+
+var _FormLabel = _interopRequireDefault(require("@material-ui/core/FormLabel"));
+
+var _BaseField = require("./BaseField");
+
+var _Utils = _interopRequireDefault(require("../../Utils"));
+
+var _TextField = _interopRequireDefault(require("./TextField"));
+
+var _Observable = _interopRequireDefault(require("../../event/Observable"));
+
+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 _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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const RadioGroupWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const base = props.base;
+
+  const label = _Utils.default.getComponentAttribute(props.config, 'label', null); // TODO : Support calling a rest end-point to get options
+
+
+  const options = _Utils.default.getComponentAttribute(props.config, 'options', []);
+
+  const _React$useState = _react.default.useState(true),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        initializing = _React$useState2[0],
+        setInitializing = _React$useState2[1];
+
+  _react.default.useEffect(() => {
+    if (initializing) {
+      base.handleValueChange(props.defaultValue);
+      setInitializing(false);
+    }
+  });
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '16px'
+    }
+  }, label !== null ? /*#__PURE__*/_react.default.createElement(_FormLabel.default, {
+    component: "legend"
+  }, label) : null, /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
+    row: true,
+    defaultValue: props.defaultValue,
+    "aria-label": "gender",
+    name: "radios",
+    required: base.required,
+    onChange: e => {
+      base.handleValueChange(e.target.value);
+    },
+    error: base.hasError
+  }, options.map(option => {
+    return /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
+      value: option.value,
+      control: /*#__PURE__*/_react.default.createElement(_Radio.default, null),
+      label: option.label
+    });
+  })));
+}));
+
+const RadioGroup = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const defaultValue = _Utils.default.getComponentAttribute(props.config, 'defaultValue', null);
+
+  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
+    handle: props.handle,
+    valueParser: value => {
+      if (_Utils.default.isNull(value)) {
+        return defaultValue;
+      }
+
+      return value;
+    }
+  }), base => /*#__PURE__*/_react.default.createElement(RadioGroupWrapper, _extends({
+    ref: ref,
+    base: base,
+    defaultValue: defaultValue
+  }, props)));
+}));
+
+var _default = RadioGroup;
+exports.default = _default;