@zohodesk/components 1.0.0-alpha-240 → 1.0.0-alpha-241

package/README.md

@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-241
+
+- Added unobserve element condition for Tooltip.
+
 # 1.0.0-alpha-240
 
 - DateWidget input selection color variable removed
@@ -59,9 +63,9 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-235
 
--Tooltip 
-    => data-title-wrap prop added
-    => tooltip calculation based on root or window case added
+-Tooltip
+=> data-title-wrap prop added
+=> tooltip calculation based on root or window case added
 
 # 1.0.0-alpha-234
 
@@ -74,6 +78,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-232
 
 - ListContainer => Mobile Responsive Implemented
+
 # 1.0.0-alpha-231
 
 - DropBox - Position Undefined Issue Solved
@@ -81,7 +86,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-230
 
 - Avatar, AdvancedGroupMultiSelect, AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar, GroupSelect, Select, SelectWithAvatar, SelectWithIcon, TextBoxIcon => Tooltip undefined case solved
-- Select  , MultiSelect => boxSize prop added
+- Select , MultiSelect => boxSize prop added
 
 # 1.0.0-alpha-229
 
@@ -89,7 +94,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 
 # 1.0.0-alpha-228
 
-- Button =>  danger, primary loader color issue solved
+- Button => danger, primary loader color issue solved
 
 # 1.0.0-alpha-227
 
@@ -124,7 +129,7 @@ In this Package, we Provide Some Basic Components to Build Web App
 # 1.0.0-alpha-222
 
 - Tabs=> isResponsive condition handled properly
-- Select, MultiSelect => on press tab, choose selected value then move focus to next focuable element flow implemented 
+- Select, MultiSelect => on press tab, choose selected value then move focus to next focuable element flow implemented
 
 # 1.0.0-alpha-221
 

package/es/Provider.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import AppContainer from './AppContainer/AppContainer';
 import { Container } from './Layout';
+import ThemeTool from '../../common/lib/ThemeTool/ThemeTool';
 /* default mode & theme css */
 
 import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
@@ -51,6 +52,7 @@ export default class Provider extends React.Component {
       themeName: 'blue'
     };
     this.setTheme = this.setTheme.bind(this);
+    this.setAppearance = this.setAppearance.bind(this);
   }
 
   setAppearance(mode) {
@@ -70,51 +72,6 @@ export default class Provider extends React.Component {
       appearanceName,
       themeName
     } = this.state;
-    let themeClass = {
-      width: '20px',
-      height: '20px',
-      borderRadius: '3px',
-      display: 'flex',
-      border: '1px solid #ccc',
-      margin: '0 5px',
-      cursor: 'pointer',
-      backgroundColor: '#0a73eb'
-    };
-    let green = {
-      backgroundColor: '#26a942'
-    };
-    let red = {
-      backgroundColor: '#de3535'
-    };
-    let orange = {
-      backgroundColor: '#e57717'
-    };
-    let yellow = {
-      backgroundColor: '#e8b923'
-    };
-    let light = {
-      backgroundColor: '#fff'
-    };
-    let night = {
-      backgroundColor: '#232b38'
-    };
-    let dark = {
-      backgroundColor: '#212121'
-    };
-    let 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.createElement(LibraryContext.Provider, {
       value: {
         isReducedMotion: false,
@@ -129,66 +86,9 @@ export default class Provider extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Container, {
       scroll: "vertical"
-    }, this.props.children), /*#__PURE__*/React.createElement("div", {
-      style: Object.assign({}, fixedPosition, {
-        left: '20%',
-        transform: 'translate(-20%)'
-      })
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        color: '#fff'
-      }
-    }, "Appearance:"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      title: "Light Mode",
-      style: Object.assign({}, themeClass, light),
-      onClick: () => this.setAppearance('default')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Night Mode",
-      style: Object.assign({}, themeClass, night),
-      onClick: () => this.setAppearance('dark')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Dark Mode",
-      style: Object.assign({}, themeClass, dark),
-      onClick: () => this.setAppearance('pureDark')
-    }))), /*#__PURE__*/React.createElement("div", {
-      style: Object.assign({}, fixedPosition, {
-        left: '80%',
-        transform: 'translate(-80%)'
-      })
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        color: '#fff'
-      }
-    }, "Themes:"), /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement("span", {
-      title: "Blue Theme",
-      style: themeClass,
-      onClick: () => this.setTheme('blue')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Green Theme",
-      style: Object.assign({}, themeClass, green),
-      onClick: () => this.setTheme('green')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Red Theme",
-      style: Object.assign({}, themeClass, red),
-      onClick: () => this.setTheme('red')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Orange Theme",
-      style: Object.assign({}, themeClass, orange),
-      onClick: () => this.setTheme('orange')
-    }), /*#__PURE__*/React.createElement("span", {
-      title: "Yellow Theme",
-      style: Object.assign({}, themeClass, yellow),
-      onClick: () => this.setTheme('yellow')
-    }))), /*#__PURE__*/React.createElement("div", {
-      "data-portal": "portal1"
+    }, this.props.children), /*#__PURE__*/React.createElement(ThemeTool, {
+      onThemeChange: this.setTheme,
+      onAppearanceChange: this.setAppearance
     })));
   }
 

package/es/Tooltip/Tooltip.js

@@ -36,7 +36,7 @@ export default class Tooltip extends React.Component {
   }
 
   unObserveElement() {
-    this.observer.unobserve(this.tooltipContainerEl);
+    this.observer.disconnect();
   }
 
   getClientRectOfContEl(el) {

package/lib/Provider.js

@@ -13,6 +13,8 @@ var _AppContainer = _interopRequireDefault(require("./AppContainer/AppContainer"
 
 var _Layout = require("./Layout");
 
+var _ThemeTool = _interopRequireDefault(require("../../common/lib/ThemeTool/ThemeTool"));
+
 require("../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
 require("../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
@@ -122,6 +124,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;
   }
 
@@ -142,56 +145,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(_LibraryContextInit["default"].Provider, {
         value: {
           isReducedMotion: false,
@@ -206,82 +162,9 @@ 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');
-        }
-      }))), /*#__PURE__*/_react["default"].createElement("div", {
-        "data-portal": "portal1"
+      }, this.props.children), /*#__PURE__*/_react["default"].createElement(_ThemeTool["default"], {
+        onThemeChange: this.setTheme,
+        onAppearanceChange: this.setAppearance
       })));
     }
   }]);

package/lib/Tooltip/Tooltip.js

@@ -85,7 +85,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "unObserveElement",
     value: function unObserveElement() {
-      this.observer.unobserve(this.tooltipContainerEl);
+      this.observer.disconnect();
     }
   }, {
     key: "getClientRectOfContEl",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-240",
+  "version": "1.0.0-alpha-241",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",