versacall-dashboards-library-react 2.0.44 → 2.0.45

package/dist/components/DashboardsCellGlobalConditions/DashboardsCellGlobalConditions.js

@@ -5,31 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _versacallCoreLibraryReact = require("versacall-core-library-react");
-var _reactBeautifulDnd = require("react-beautiful-dnd");
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-var _reactIntl = require("react-intl");
-var _CallSplit = _interopRequireDefault(require("@material-ui/icons/CallSplit"));
-var _FileCopy = _interopRequireDefault(require("@material-ui/icons/FileCopy"));
-var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@material-ui/core/styles");
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-var _OpenWith = _interopRequireDefault(require("@material-ui/icons/OpenWith"));
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
 var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
-var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
 var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
-var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
 var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
 var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
 var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
-var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _ArrowDownward = _interopRequireDefault(require("@material-ui/icons/ArrowDownward"));
+var _ArrowUpward = _interopRequireDefault(require("@material-ui/icons/ArrowUpward"));
+var _FileCopy = _interopRequireDefault(require("@material-ui/icons/FileCopy"));
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
+var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
+var _OpenWith = _interopRequireDefault(require("@material-ui/icons/OpenWith"));
+var _CallSplit = _interopRequireDefault(require("@material-ui/icons/CallSplit"));
+var _reactBeautifulDnd = require("react-beautiful-dnd");
+var _reactIntl = require("react-intl");
+var _versacallCoreLibraryReact = require("versacall-core-library-react");
 var _DashboardsCellGlobalStyles = _interopRequireDefault(require("../DashboardsCellGlobalStyles"));
 var _DashboardsCellContent = _interopRequireDefault(require("../DashboardsCellContent"));
 var _DashboardsCellStyle = _interopRequireDefault(require("../DashboardsCellStyle"));
@@ -39,11 +40,26 @@ require("react-nestable-fork/dist/Nestable/Nestable.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// Constants
+const OPERATOR_OPTIONS = [{
+  value: '===',
+  label: '='
+}, {
+  value: '>',
+  label: '>'
+}, {
+  value: '<',
+  label: '<'
+}, {
+  value: '!==',
+  label: `${String.fromCharCode(0x2260)}`
+}, {
+  value: '>=',
+  label: `${String.fromCharCode(0x2265)}`
+}, {
+  value: '<=',
+  label: `${String.fromCharCode(0x2264)}`
+}];
 const muiStyles = () => ({
   dialog: {
     backgroundColor: '#eff4f8'
@@ -133,27 +149,6 @@ const style = {
     textTransform: 'uppercase'
   }
 };
-
-// Constants
-const OPERATOR_OPTIONS = [{
-  value: '===',
-  label: '='
-}, {
-  value: '>',
-  label: '>'
-}, {
-  value: '<',
-  label: '<'
-}, {
-  value: '!==',
-  label: "".concat(String.fromCharCode(0x2260))
-}, {
-  value: '>=',
-  label: "".concat(String.fromCharCode(0x2265))
-}, {
-  value: '<=',
-  label: "".concat(String.fromCharCode(0x2264))
-}];
 const formatCondition = original => {
   let formatted = original;
   formatted = formatted.replace('===', '=');
@@ -191,10 +186,11 @@ const contentPreviewCustomCell = _ref => {
     }
   })));
 };
-const getItemStyle = (isDragging, draggableStyle) => _objectSpread({
+const getItemStyle = (isDragging, draggableStyle) => ({
   userSelect: 'none',
-  marginBottom: 10
-}, draggableStyle);
+  marginBottom: 10,
+  ...draggableStyle
+});
 const getListStyle = () => ({
   // Empty object for now, can be extended if needed
 });
@@ -225,43 +221,120 @@ class DashboardsCellGlobalConditions extends _react.Component {
       conditionIndex: null,
       menuIndex: null,
       menuAnchorEl: null,
-      advanced: false,
-      conditionMenuAdvanced: null,
-      conditionMenuOne: null,
-      conditionMenuTwo: null
+      advanced: false
     };
   }
-  onDragEnd(result) {
-    const {
-      value
-    } = this.props;
+  stylePreviewCustomCell = _ref2 => {
+    let {
+      row
+    } = _ref2;
+    const newCell = {
+      ...row
+    };
+    newCell.custom = {
+      viewWidth: 120,
+      viewHeight: 120,
+      style: {}
+    };
+    if (this.props.styles.length > 0 && row.styleIds && row.styleIds.length > 0) {
+      for (let i = 0; i < newCell.styleIds.length; i++) {
+        const findStyle = this.props.styles.find(searchStyle => searchStyle.id === newCell.styleIds[i]);
+        if (findStyle) {
+          newCell.custom.style = {
+            ...newCell.custom.style,
+            ...findStyle.options
+          };
+        }
+      }
+    }
+    newCell.custom.style = {
+      ...newCell.custom.style,
+      ...newCell.style
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        width: 120
+      }
+    }, /*#__PURE__*/_react.default.createElement(_DashboardsPreview.default, {
+      width: "120px",
+      height: "100px",
+      padding: "10px"
+    }, /*#__PURE__*/_react.default.createElement(_DashboardsCell.default, {
+      cell: {
+        content: {
+          type: 'text',
+          text: 'Hello'
+        },
+        custom: newCell.custom
+      }
+    })));
+  };
+  contentTypeCustomCell = _ref3 => {
+    let {
+      row
+    } = _ref3;
+    return /*#__PURE__*/_react.default.createElement("span", null, this.props.intl.formatMessage({
+      id: `__${row.content.type}`
+    }));
+  };
+  actionsCustomCell = _ref4 => {
+    let {
+      row
+    } = _ref4;
     const {
       tabIndex
     } = this.state;
-    if (!result.destination) {
-      return;
-    }
-    const items = reorder(tabIndex === 0 ? value.styleConditions : value.contentConditions, result.source.index, result.destination.index);
-    const newConditions = _objectSpread({}, value);
-    if (tabIndex === 0) {
-      newConditions.styleConditions = items;
-    } else {
-      newConditions.contentConditions = items;
-    }
-    this.props.updateValue({
-      styleConditions: newConditions.styleConditions,
-      contentConditions: newConditions.contentConditions
-    });
-    this.setState({
-      conditionIndex: result.destination.index
-    });
-  }
-  updateCondition(change) {
+    const conditions = tabIndex === 0 ? this.props.value.styleConditions : this.props.value.contentConditions;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, row.index !== 0 && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      onClick: e => {
+        e.stopPropagation();
+        this.moveCondition(row.index, -1);
+      },
+      "aria-label": this.props.intl.formatMessage({
+        id: '__move_up'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_ArrowUpward.default, null)), row.index !== String(conditions.length - 1) && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      onClick: e => {
+        e.stopPropagation();
+        this.moveCondition(row.index, 1);
+      },
+      "aria-label": this.props.intl.formatMessage({
+        id: '__move_down'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_ArrowDownward.default, null)), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      onClick: e => {
+        e.stopPropagation();
+        this.copyCondition(row);
+      },
+      "aria-label": this.props.intl.formatMessage({
+        id: '__copy'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      title: this.props.intl.formatMessage({
+        id: '__copy'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_FileCopy.default, null))), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      onClick: e => {
+        e.stopPropagation();
+        this.deleteCondition(row.index);
+      },
+      "aria-label": this.props.intl.formatMessage({
+        id: '__delete'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      title: this.props.intl.formatMessage({
+        id: '__delete'
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Delete.default, null))));
+  };
+  updateCondition = change => {
     const {
       conditionIndex,
       tabIndex
     } = this.state;
-    const updatedValue = _objectSpread({}, this.props.value);
+    const updatedValue = {
+      ...this.props.value
+    };
     const conditions = tabIndex === 1 ? updatedValue.contentConditions : updatedValue.styleConditions;
     if (this.state.advanced) {
       conditions[conditionIndex].condition = change.value;
@@ -272,16 +345,16 @@ class DashboardsCellGlobalConditions extends _react.Component {
       const segment3 = split.length > 2 ? split[2] : '0';
       switch (change.stringIndex) {
         case 0:
-          conditions[conditionIndex].condition = "".concat(change.value, " ").concat(segment2, " ").concat(segment3);
+          conditions[conditionIndex].condition = `${change.value} ${segment2} ${segment3}`;
           break;
         case 1:
-          conditions[conditionIndex].condition = "".concat(segment1, " ").concat(change.value, " ").concat(segment3);
+          conditions[conditionIndex].condition = `${segment1} ${change.value} ${segment3}`;
           break;
         case 2:
-          conditions[conditionIndex].condition = "".concat(segment1, " ").concat(segment2, " ").concat(change.value);
+          conditions[conditionIndex].condition = `${segment1} ${segment2} ${change.value}`;
           break;
         default:
-          conditions[conditionIndex].condition = "".concat(segment1, " ").concat(segment2, " ").concat(segment3);
+          conditions[conditionIndex].condition = `${segment1} ${segment2} ${segment3}`;
           break;
       }
     }
@@ -289,18 +362,21 @@ class DashboardsCellGlobalConditions extends _react.Component {
       styleConditions: updatedValue.styleConditions,
       contentConditions: updatedValue.contentConditions
     });
-  }
-  updateStyleIds(value) {
+  };
+  updateStyleIds = value => {
     const styleConditions = [...this.props.value.styleConditions];
     styleConditions[this.state.conditionIndex].styleIds = value.styleIds;
     this.props.updateValue({
-      styleConditions: styleConditions
+      styleConditions
     });
-  }
-  updateStyle(value) {
+  };
+  updateStyle = value => {
     const styleConditions = [...this.props.value.styleConditions];
     if (Object.keys(value.style).length > 0) {
-      styleConditions[this.state.conditionIndex].style = _objectSpread(_objectSpread({}, styleConditions[this.state.conditionIndex].style), value.style);
+      styleConditions[this.state.conditionIndex].style = {
+        ...styleConditions[this.state.conditionIndex].style,
+        ...value.style
+      };
       Object.keys(styleConditions[this.state.conditionIndex].style).forEach(key => {
         if (styleConditions[this.state.conditionIndex].style[key] === 'delete') {
           delete styleConditions[this.state.conditionIndex].style[key];
@@ -310,18 +386,20 @@ class DashboardsCellGlobalConditions extends _react.Component {
       styleConditions[this.state.conditionIndex].style = {};
     }
     this.props.updateValue({
-      styleConditions: styleConditions
+      styleConditions
     });
-  }
-  updateContent(value) {
+  };
+  updateContent = value => {
     const contentConditions = [...this.props.value.contentConditions];
     contentConditions[this.state.conditionIndex].content = value.content;
     this.props.updateValue({
-      contentConditions: contentConditions
+      contentConditions
     });
-  }
-  addCondition() {
-    const conditions = _objectSpread({}, this.props.value);
+  };
+  addCondition = () => {
+    const conditions = {
+      ...this.props.value
+    };
     let index = null;
     if (this.state.tabIndex === 0) {
       conditions.styleConditions.push({
@@ -348,10 +426,14 @@ class DashboardsCellGlobalConditions extends _react.Component {
       conditionIndex: index,
       advanced: false
     });
-  }
-  copyCondition(condition) {
-    const newValue = _objectSpread({}, this.props.value);
-    const newCondition = _objectSpread({}, condition);
+  };
+  copyCondition = condition => {
+    const newValue = {
+      ...this.props.value
+    };
+    const newCondition = {
+      ...condition
+    };
     delete newCondition.index;
     const conditions = newValue[this.state.tabIndex === 0 ? 'styleConditions' : 'contentConditions'];
     conditions.push(newCondition);
@@ -360,12 +442,12 @@ class DashboardsCellGlobalConditions extends _react.Component {
       styleConditions: newValue.styleConditions,
       contentConditions: newValue.contentConditions
     });
-    this.setState(() => ({
+    this.setState(prevState => ({
       conditionIndex: conditions.length - 1,
-      advanced: advanced
+      advanced
     }));
-  }
-  duplicateCondition(index) {
+  };
+  duplicateCondition = index => {
     const {
       value
     } = this.props;
@@ -374,9 +456,11 @@ class DashboardsCellGlobalConditions extends _react.Component {
     } = this.state;
     const condition = value[tabIndex === 0 ? 'styleConditions' : 'contentConditions'][index];
     this.copyCondition(condition);
-  }
-  deleteCondition(index) {
-    const conditions = _objectSpread({}, this.props.value);
+  };
+  deleteCondition = index => {
+    const conditions = {
+      ...this.props.value
+    };
     conditions[this.state.tabIndex === 0 ? 'styleConditions' : 'contentConditions'].splice(Number(index), 1);
     this.props.updateValue({
       styleConditions: conditions.styleConditions,
@@ -386,9 +470,11 @@ class DashboardsCellGlobalConditions extends _react.Component {
       conditionIndex: null,
       advanced: false
     });
-  }
-  moveCondition(index, direction) {
-    const conditions = _objectSpread({}, this.props.value);
+  };
+  moveCondition = (index, direction) => {
+    const conditions = {
+      ...this.props.value
+    };
     const conditionArray = conditions[this.state.tabIndex === 0 ? 'styleConditions' : 'contentConditions'];
     const [removed] = conditionArray.splice(Number(index), 1);
     conditionArray.splice(Number(index) + direction, 0, removed);
@@ -400,45 +486,35 @@ class DashboardsCellGlobalConditions extends _react.Component {
       conditionIndex: null,
       advanced: false
     });
-  }
-  stylePreviewCustomCell(_ref2) {
-    let {
-      row
-    } = _ref2;
-    const newCell = _objectSpread({}, row);
-    newCell.custom = {
-      viewWidth: 120,
-      viewHeight: 120,
-      style: {}
+  };
+  onDragEnd = result => {
+    const {
+      value
+    } = this.props;
+    const {
+      tabIndex
+    } = this.state;
+    if (!result.destination) {
+      return;
+    }
+    const items = reorder(tabIndex === 0 ? value.styleConditions : value.contentConditions, result.source.index, result.destination.index);
+    const newConditions = {
+      ...value
     };
-    if (this.props.styles.length > 0 && row.styleIds && row.styleIds.length > 0) {
-      for (let i = 0; i < newCell.styleIds.length; i++) {
-        const findStyle = this.props.styles.find(searchStyle => searchStyle.id === newCell.styleIds[i]);
-        if (findStyle) {
-          newCell.custom.style = _objectSpread(_objectSpread({}, newCell.custom.style), findStyle.options);
-        }
-      }
+    if (tabIndex === 0) {
+      newConditions.styleConditions = items;
+    } else {
+      newConditions.contentConditions = items;
     }
-    newCell.custom.style = _objectSpread(_objectSpread({}, newCell.custom.style), newCell.style);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        width: 120
-      }
-    }, /*#__PURE__*/_react.default.createElement(_DashboardsPreview.default, {
-      width: "120px",
-      height: "100px",
-      padding: "10px"
-    }, /*#__PURE__*/_react.default.createElement(_DashboardsCell.default, {
-      cell: {
-        content: {
-          type: 'text',
-          text: 'Hello'
-        },
-        custom: newCell.custom
-      }
-    })));
-  }
-  selectCondition(index) {
+    this.props.updateValue({
+      styleConditions: newConditions.styleConditions,
+      contentConditions: newConditions.contentConditions
+    });
+    this.setState({
+      conditionIndex: result.destination.index
+    });
+  };
+  selectCondition = index => {
     const {
       value
     } = this.props;
@@ -450,10 +526,10 @@ class DashboardsCellGlobalConditions extends _react.Component {
     const advanced = determineIfAdvanced(condition.condition);
     this.setState({
       conditionIndex: index,
-      advanced: advanced
+      advanced
     });
-  }
-  renderConditionCard(obj) {
+  };
+  renderConditionCard = obj => {
     const {
       item,
       handler
@@ -479,14 +555,7 @@ class DashboardsCellGlobalConditions extends _react.Component {
       "aria-selected": item.index === conditionIndex,
       style: divStyle,
       className: classes.selectable,
-      onClick: () => this.selectCondition(item.index),
-      onKeyDown: event => {
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault();
-          this.selectCondition(item.index);
-        }
-      },
-      tabIndex: 0
+      onClick: () => this.selectCondition(item.index)
     }, /*#__PURE__*/_react.default.createElement("span", {
       style: {
         marginRight: 20,
@@ -503,7 +572,7 @@ class DashboardsCellGlobalConditions extends _react.Component {
         marginRight: 10
       }
     }, intl.formatMessage({
-      id: "__".concat(item.content.type)
+      id: `__${item.content.type}`
     })), contentPreviewCustomCell({
       row: item
     })), handler, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
@@ -518,7 +587,7 @@ class DashboardsCellGlobalConditions extends _react.Component {
         id: '__more_options'
       })
     }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, null)));
-  }
+  };
   render() {
     const {
       classes,
@@ -536,10 +605,7 @@ class DashboardsCellGlobalConditions extends _react.Component {
       conditionIndex,
       menuIndex,
       menuAnchorEl,
-      advanced,
-      conditionMenuAdvanced,
-      conditionMenuOne,
-      conditionMenuTwo
+      advanced
     } = this.state;
     let currentCondition = null;
     if (conditionIndex !== null) {
@@ -549,17 +615,19 @@ class DashboardsCellGlobalConditions extends _react.Component {
     const nestItems = [];
     if (tabIndex === 0) {
       value.styleConditions.forEach((condition, index) => {
-        nestItems.push(_objectSpread(_objectSpread({}, condition), {}, {
-          index: index,
+        nestItems.push({
+          ...condition,
+          index,
           id: String(index)
-        }));
+        });
       });
     } else {
       value.contentConditions.forEach((condition, index) => {
-        nestItems.push(_objectSpread(_objectSpread({}, condition), {}, {
-          index: index,
+        nestItems.push({
+          ...condition,
+          index,
           id: String(index)
-        }));
+        });
       });
     }
     return /*#__PURE__*/_react.default.createElement(_Grid.default, {
@@ -579,9 +647,9 @@ class DashboardsCellGlobalConditions extends _react.Component {
       style: {
         marginRight: 10
       }
-    }), "".concat(intl.formatMessage({
+    }), `${intl.formatMessage({
       id: '__conditions'
-    })).concat(totalConditions > 0 ? " (".concat(totalConditions, ")") : '')), open && /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    })}${totalConditions > 0 ? ` (${totalConditions})` : ''}`), open && /*#__PURE__*/_react.default.createElement(_Dialog.default, {
       maxWidth: "xl",
       onClose: () => this.setState({
         open: false,
@@ -605,7 +673,7 @@ class DashboardsCellGlobalConditions extends _react.Component {
     }, /*#__PURE__*/_react.default.createElement(_Button.default, {
       variant: "outlined",
       color: "primary",
-      onClick: () => this.addCondition(),
+      onClick: this.addCondition,
       style: {
         marginRight: 10
       }
@@ -623,15 +691,15 @@ class DashboardsCellGlobalConditions extends _react.Component {
       centered: true
     }, /*#__PURE__*/_react.default.createElement(_Tab.default, {
       id: "style",
-      label: "".concat(intl.formatMessage({
+      label: `${intl.formatMessage({
         id: '__style'
-      }), " (").concat(value.styleConditions.length, ")"),
+      })} (${value.styleConditions.length})`,
       style: tabStyle(tabIndex === 0)
     }), /*#__PURE__*/_react.default.createElement(_Tab.default, {
       id: "content",
-      label: "".concat(intl.formatMessage({
+      label: `${intl.formatMessage({
         id: '__content'
-      }), " (").concat(value.contentConditions.length, ")"),
+      })} (${value.contentConditions.length})`,
       style: tabStyle(tabIndex === 1)
     }))), /*#__PURE__*/_react.default.createElement("div", {
       style: style.root
@@ -643,9 +711,15 @@ class DashboardsCellGlobalConditions extends _react.Component {
       xs: 7,
       item: true
     }, /*#__PURE__*/_react.default.createElement("div", {
-      style: _objectSpread(_objectSpread({}, style.paper), style.fullHeight)
+      style: {
+        ...style.paper,
+        ...style.fullHeight
+      }
     }, /*#__PURE__*/_react.default.createElement("div", {
-      style: _objectSpread(_objectSpread({}, style.block), style.scrollHolder)
+      style: {
+        ...style.block,
+        ...style.scrollHolder
+      }
     }, /*#__PURE__*/_react.default.createElement("div", {
       style: style.scroll,
       className: _versacallCoreLibraryReact.ScrollbarStyles.scroll
@@ -665,7 +739,7 @@ class DashboardsCellGlobalConditions extends _react.Component {
     }, dragProvided.draggableProps, {
       style: getItemStyle(dragSnapshot.isDragging, dragProvided.draggableProps.style)
     }), this.renderConditionCard({
-      item: item,
+      item,
       handler: /*#__PURE__*/_react.default.createElement("div", dragProvided.dragHandleProps, /*#__PURE__*/_react.default.createElement(_OpenWith.default, {
         className: classes.anchor
       }))
@@ -673,9 +747,15 @@ class DashboardsCellGlobalConditions extends _react.Component {
       xs: 5,
       item: true
     }, /*#__PURE__*/_react.default.createElement("div", {
-      style: _objectSpread(_objectSpread({}, style.paper), style.fullHeight)
+      style: {
+        ...style.paper,
+        ...style.fullHeight
+      }
     }, /*#__PURE__*/_react.default.createElement("div", {
-      style: _objectSpread(_objectSpread({}, style.block), style.scrollHolder)
+      style: {
+        ...style.block,
+        ...style.scrollHolder
+      }
     }, currentCondition && /*#__PURE__*/_react.default.createElement(_Paper.default, {
       style: style.scroll,
       className: _versacallCoreLibraryReact.ScrollbarStyles.scroll
@@ -693,86 +773,23 @@ class DashboardsCellGlobalConditions extends _react.Component {
         paddingTop: 26,
         textAlign: 'center'
       }
-    }, "IF"), advanced ? /*#__PURE__*/_react.default.createElement(_Grid.default, {
-      xs: 9,
-      item: true
-    }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-      id: "advanced-condition",
-      variant: "outlined",
-      fullWidth: true,
-      label: intl.formatMessage({
-        id: '__advanced'
-      }),
-      value: currentCondition.condition,
-      onChange: event => this.updateCondition({
-        value: event.target.value
-      }),
-      InputProps: {
-        endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-          position: "end"
-        }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-          onClick: event => {
-            this.setState({
-              conditionMenuAdvanced: event.currentTarget
-            });
-          }
-        }, /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null)))
-      }
-    }), /*#__PURE__*/_react.default.createElement(_Menu.default, {
-      open: !!conditionMenuAdvanced,
-      anchorEl: conditionMenuAdvanced,
-      onClose: () => this.setState({
-        conditionMenuAdvanced: null
-      })
-    }, variables.map((variable, index) => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-      key: String([index]),
-      onClick: () => {
-        this.updateCondition({
-          value: "~".concat(variable.name)
-        });
-        this.setState({
-          conditionMenuAdvanced: null
-        });
-      }
-    }, "~".concat(variable.name))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    }, "IF"), !advanced && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.default, {
       xs: 4,
       item: true
-    }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-      variant: "outlined",
+    }, /*#__PURE__*/_react.default.createElement(_versacallCoreLibraryReact.CoreTextField, {
+      id: "condition-variable",
+      options: variables,
+      fullWidth: true,
       value: currentCondition.condition.split(/[ ,]+/)[0],
-      onChange: event => this.updateCondition({
-        value: event.target.value,
+      updateValue: e => this.updateCondition({
+        value: e,
         stringIndex: 0
       }),
-      InputProps: {
-        endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-          position: "end"
-        }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-          onClick: event => {
-            this.setState({
-              conditionMenuOne: event.currentTarget
-            });
-          }
-        }, /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null)))
-      }
-    }), /*#__PURE__*/_react.default.createElement(_Menu.default, {
-      open: !!conditionMenuOne,
-      anchorEl: conditionMenuOne,
-      onClose: () => this.setState({
-        conditionMenuOne: null
+      selectOption: e => this.updateCondition({
+        value: `~${e.name}`,
+        stringIndex: 0
       })
-    }, variables.map((variable, index) => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-      key: String([index]),
-      onClick: () => {
-        this.updateCondition({
-          value: "~".concat(variable.name),
-          stringIndex: 0
-        });
-        this.setState({
-          conditionMenuOne: null
-        });
-      }
-    }, "~".concat(variable.name))))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
       xs: 2,
       item: true
     }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
@@ -781,8 +798,8 @@ class DashboardsCellGlobalConditions extends _react.Component {
         native: true
       },
       value: currentCondition.condition.split(/[ ,]+/)[1],
-      onChange: event => this.updateCondition({
-        value: event.target.value,
+      onChange: e => this.updateCondition({
+        value: e.target.value,
         stringIndex: 1
       }),
       fullWidth: true,
@@ -793,42 +810,37 @@ class DashboardsCellGlobalConditions extends _react.Component {
     }, operatorOption.label)))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
       xs: 3,
       item: true
-    }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-      variant: "outlined",
+    }, /*#__PURE__*/_react.default.createElement(_versacallCoreLibraryReact.CoreTextField, {
+      id: "condition-value",
+      options: variables,
+      fullWidth: true,
       value: currentCondition.condition.split(/[ ,]+/)[2],
-      onChange: event => this.updateCondition({
-        value: event.target.value,
+      updateValue: e => this.updateCondition({
+        value: e,
         stringIndex: 2
       }),
-      InputProps: {
-        endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-          position: "end"
-        }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-          onClick: event => {
-            this.setState({
-              conditionMenuTwo: event.currentTarget
-            });
-          }
-        }, /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null)))
-      }
-    }), /*#__PURE__*/_react.default.createElement(_Menu.default, {
-      open: !!conditionMenuTwo,
-      anchorEl: conditionMenuTwo,
-      onClose: () => this.setState({
-        conditionMenuTwo: null
+      selectOption: e => this.updateCondition({
+        value: `~${e.name}`,
+        stringIndex: 2
       })
-    }, variables.map((variable, index) => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-      key: String([index]),
-      onClick: () => {
-        this.updateCondition({
-          value: "~".concat(variable.name),
-          stringIndex: 2
-        });
-        this.setState({
-          conditionMenuTwo: null
-        });
-      }
-    }, "~".concat(variable.name)))))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    }))), advanced && /*#__PURE__*/_react.default.createElement(_Grid.default, {
+      xs: 9,
+      item: true
+    }, /*#__PURE__*/_react.default.createElement(_versacallCoreLibraryReact.CoreTextField, {
+      id: "advanced-condition",
+      options: variables,
+      label: intl.formatMessage({
+        id: '__advanced'
+      }),
+      fullWidth: true,
+      value: currentCondition.condition,
+      updateValue: e => this.updateCondition({
+        value: e
+      }),
+      selectOption: e => this.updateCondition({
+        value: `~${e.name}`
+      })
+    })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
       align: "center",
       xs: 2,
       item: true
@@ -845,8 +857,8 @@ class DashboardsCellGlobalConditions extends _react.Component {
       control: /*#__PURE__*/_react.default.createElement(_Switch.default, {
         color: "primary",
         checked: advanced,
-        onChange: event => this.setState({
-          advanced: event.target.checked
+        onChange: e => this.setState({
+          advanced: e.target.checked
         })
       })
     }))), tabIndex === 0 && currentCondition && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -916,16 +928,45 @@ class DashboardsCellGlobalConditions extends _react.Component {
   }
 }
 DashboardsCellGlobalConditions.propTypes = {
-  contentConditions: _propTypes.default.arrayOf(_propTypes.default.shape()).isRequired,
+  classes: _propTypes.default.shape({
+    dialog: _propTypes.default.string.isRequired,
+    icon: _propTypes.default.string.isRequired,
+    anchor: _propTypes.default.string.isRequired,
+    selectable: _propTypes.default.string.isRequired,
+    menuPaper: _propTypes.default.string.isRequired,
+    menuList: _propTypes.default.string.isRequired
+  }).isRequired,
+  intl: _propTypes.default.shape({
+    formatMessage: _propTypes.default.func.isRequired
+  }).isRequired,
+  value: _propTypes.default.shape({
+    styleConditions: _propTypes.default.arrayOf(_propTypes.default.shape({
+      condition: _propTypes.default.string.isRequired,
+      style: _propTypes.default.object,
+      styleIds: _propTypes.default.arrayOf(_propTypes.default.string)
+    })).isRequired,
+    contentConditions: _propTypes.default.arrayOf(_propTypes.default.shape({
+      condition: _propTypes.default.string.isRequired,
+      content: _propTypes.default.object
+    })).isRequired
+  }).isRequired,
   updateValue: _propTypes.default.func.isRequired,
-  classes: _propTypes.default.shape().isRequired,
-  value: _propTypes.default.shape().isRequired,
-  intl: _propTypes.default.shape().isRequired,
-  variables: _propTypes.default.arrayOf(_propTypes.default.shape()),
-  widgets: _propTypes.default.arrayOf(_propTypes.default.shape()),
-  images: _propTypes.default.arrayOf(_propTypes.default.shape()),
-  styles: _propTypes.default.arrayOf(_propTypes.default.shape()),
-  tags: _propTypes.default.shape()
+  images: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    fileName: _propTypes.default.string.isRequired
+  })),
+  styles: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    options: _propTypes.default.object
+  })),
+  tags: _propTypes.default.object,
+  widgets: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string.isRequired
+  })),
+  variables: _propTypes.default.arrayOf(_propTypes.default.shape({
+    name: _propTypes.default.string.isRequired
+  }))
 };
 DashboardsCellGlobalConditions.defaultProps = {
   images: [],