@zohodesk/dot 1.0.0-temp-87 → 1.0.0-temp-90

package/lib/Provider.js

@@ -19,6 +19,8 @@ var _LibraryContextInit = _interopRequireDefault(require("@zohodesk/components/l
 
 var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
 
+var _ThemeTool = _interopRequireDefault(require("../../common/lib/ThemeTool/ThemeTool"));
+
 var _i18n2 = _interopRequireDefault(require("./i18n"));
 
 require("@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
@@ -209,6 +211,7 @@ var Provider = /*#__PURE__*/function (_React$Component) {
       themeName: 'blue'
     };
     _this.setTheme = _this.setTheme.bind(_assertThisInitialized(_this));
+    _this.setAppearance = _this.setAppearance.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -229,56 +232,9 @@ var Provider = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$state = this.state,
           appearanceName = _this$state.appearanceName,
           themeName = _this$state.themeName;
-      var themeClass = {
-        width: '20px',
-        height: '20px',
-        borderRadius: '3px',
-        display: 'flex',
-        border: '1px solid #ccc',
-        margin: '0 5px',
-        cursor: 'pointer',
-        backgroundColor: '#0a73eb'
-      };
-      var green = {
-        backgroundColor: '#26a942'
-      };
-      var red = {
-        backgroundColor: '#de3535'
-      };
-      var orange = {
-        backgroundColor: '#e57717'
-      };
-      var yellow = {
-        backgroundColor: '#e8b923'
-      };
-      var light = {
-        backgroundColor: '#fff'
-      };
-      var night = {
-        backgroundColor: '#232b38'
-      };
-      var dark = {
-        backgroundColor: '#212121'
-      };
-      var fixedPosition = {
-        position: 'fixed',
-        bottom: '0',
-        backgroundColor: '#272727',
-        padding: '10px',
-        borderRadius: '15px 15px 0 0',
-        minWidth: '100px',
-        textAlign: 'center',
-        boxShadow: '0 0 3px #000',
-        fontSize: '12px',
-        zIndex: '3',
-        display: 'flex',
-        alignItems: 'center'
-      };
       return /*#__PURE__*/_react["default"].createElement(_i18n.I18NProvider, {
         i18n: _i18n2["default"],
         timeZone: "Asia/Kolkata",
@@ -300,81 +256,10 @@ var Provider = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         scroll: "vertical"
-      }, this.props.children), /*#__PURE__*/_react["default"].createElement("div", {
-        style: Object.assign({}, fixedPosition, {
-          left: '20%',
-          transform: 'translate(-20%)'
-        })
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          color: '#fff'
-        }
-      }, "Appearance:"), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Light Mode",
-        style: Object.assign({}, themeClass, light),
-        onClick: function onClick() {
-          return _this2.setAppearance('default');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Night Mode",
-        style: Object.assign({}, themeClass, night),
-        onClick: function onClick() {
-          return _this2.setAppearance('dark');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Dark Mode",
-        style: Object.assign({}, themeClass, dark),
-        onClick: function onClick() {
-          return _this2.setAppearance('pureDark');
-        }
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        style: Object.assign({}, fixedPosition, {
-          left: '80%',
-          transform: 'translate(-80%)'
-        })
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          color: '#fff'
-        }
-      }, "Themes:"), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          display: 'flex'
-        }
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Blue Theme",
-        style: themeClass,
-        onClick: function onClick() {
-          return _this2.setTheme('blue');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Green Theme",
-        style: Object.assign({}, themeClass, green),
-        onClick: function onClick() {
-          return _this2.setTheme('green');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Red Theme",
-        style: Object.assign({}, themeClass, red),
-        onClick: function onClick() {
-          return _this2.setTheme('red');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Orange Theme",
-        style: Object.assign({}, themeClass, orange),
-        onClick: function onClick() {
-          return _this2.setTheme('orange');
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Yellow Theme",
-        style: Object.assign({}, themeClass, yellow),
-        onClick: function onClick() {
-          return _this2.setTheme('yellow');
-        }
-      }))))));
+      }, this.props.children), /*#__PURE__*/_react["default"].createElement(_ThemeTool["default"], {
+        onThemeChange: this.setTheme,
+        onAppearanceChange: this.setAppearance
+      }))));
     }
   }]);