@zohodesk/dot 1.0.0-temp-38 → 1.0.0-temp-39

package/src/Provider.js

@@ -1,249 +1,200 @@
-import React from 'react';
-import { I18NProvider } from '@zohodesk/i18n';
-import { Container } from '@zohodesk/components/lib/Layout';
-import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
-import datetime from '@zohodesk/datetimejs';
-import i18n from './i18n';
-/* component pkg - default mode & themes */
-import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css';
-/* component pkg - dark mode & themes */
-import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css';
-/* component pkg - pure dark mode & themes */
-import '@zohodesk/components/lib/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
-import '@zohodesk/components/lib/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css';
-import '@zohodesk/components/lib/Appearance/pureDark/mode/pureDarkMode.module.css';
-/* svg pkg - default mode & themes */
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/default/mode/defaultEmptyStates.module.css';
-/* svg pkg - dark mode & themes */
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/dark/mode/darkEmptyStates.module.css';
-/* svg pkg - pure dark mode & themes */
-import '@zohodesk/svg/lib/svg/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
-import '@zohodesk/svg/lib/svg/Appearance/pureDark/mode/pureDarkEmptyStates.module.css';
-import { setGlobalIdPrefix } from '@zohodesk/components/lib/Provider/IdProvider';
-import { setInitialZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-/* dot pkg - default mode & themes */
-import './Appearance/default/themes/blue/blueDefaultDotTheme.module.css';
-import './Appearance/default/themes/green/greenDefaultDotTheme.module.css';
-import './Appearance/default/themes/orange/orangeDefaultDotTheme.module.css';
-import './Appearance/default/themes/red/redDefaultDotTheme.module.css';
-import './Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css';
-import './Appearance/default/mode/dotDefaultMode.module.css';
-/* dot pkg - dark mode & themes */
-import './Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
-import './Appearance/dark/themes/green/greenDarkDotTheme.module.css';
-import './Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
-import './Appearance/dark/themes/red/redDarkDotTheme.module.css';
-import './Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
-import './Appearance/dark/mode/dotDarkMode.module.css';
-/* dot pkg - pure dark mode & themes */
-import './Appearance/pureDark/themes/blue/bluePureDarkDotTheme.module.css';
-import './Appearance/pureDark/themes/green/greenPureDarkDotTheme.module.css';
-import './Appearance/pureDark/themes/orange/orangePureDarkDotTheme.module.css';
-import './Appearance/pureDark/themes/red/redPureDarkDotTheme.module.css';
-import './Appearance/pureDark/themes/yellow/yellowPureDarkDotTheme.module.css';
-import './Appearance/pureDark/mode/dotPureDarkMode.module.css';
-
-datetime.tz.set({
-  timezone: 'Asia/Kolkata',
-  _packed:
-    '-5R.s -5R.k -5l.a -5u -6u|01234343|-4Fg5R.s BKo0.8 1rDcw.a 1r2LP.a 1un0 HB0 7zX0|15e6',
-  _default: 'Asia/Kolkata'
-});
-
-export default class Provider extends React.Component {
-  constructor(props) {
-    super(props);
-    setGlobalIdPrefix('ZD');
-    setInitialZIndex('10');
-    this.state = {
-      appearanceName: 'default',
-      themeName: 'blue'
-    };
-
-    this.setTheme = this.setTheme.bind(this);
-  }
-
-  setAppearance(mode) {
-    this.setState({
-      appearanceName: mode
-    });
-  }
-
-  setTheme(theme) {
-    this.setState({
-      themeName: theme
-    });
-  }
-
-  render() {
-    let { 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 (
-      <I18NProvider
-        i18n={i18n}
-        timeZone='Asia/Kolkata'
-        datePattern={''}
-        dateTimeFormat={''}
-        timeFormat={''}
-        direction={'ltr'}
-      >
-        <AppContainer
-          customProps={{ExtraProps:{'data-mode':appearanceName,'data-theme':themeName}}}
-        >
-          <Container scroll='vertical'>{this.props.children}</Container>
-          <div
-            style={Object.assign({}, fixedPosition, {
-              left: '20%',
-              transform: 'translate(-20%)'
-            })}
-          >
-            <div style={{color: '#fff'}}>
-              Appearance: 
-            </div>
-            <div style={{ display: 'flex' }}>
-              <span
-                title='Light Mode'
-                style={Object.assign({}, themeClass, light)}
-                onClick={() => this.setAppearance('default')}
-              ></span>
-              <span
-                title='Night Mode'
-                style={Object.assign({}, themeClass, night)}
-                onClick={() => this.setAppearance('dark')}
-              ></span>
-              <span
-                title='Dark Mode'
-                style={Object.assign({}, themeClass, dark)}
-                onClick={() => this.setAppearance('pureDark')}
-              ></span>
-            </div>
-          </div>
-          <div
-            style={Object.assign({}, fixedPosition, {
-              left: '80%',
-              transform: 'translate(-80%)'
-            })}
-          >
-            <div style={{color: '#fff'}}>
-              Themes: 
-            </div>
-            <div style={{display: 'flex'}}>
-              <span 
-                title='Blue Theme' 
-                style={themeClass}
-                onClick={() => this.setTheme('blue')}
-              ></span>
-              <span 
-                title='Green Theme' 
-                style={Object.assign({}, themeClass, green)}
-                onClick={() => this.setTheme('green')}
-              ></span>
-              <span 
-                title='Red Theme' 
-                style={Object.assign({}, themeClass, red)}
-                onClick={() => this.setTheme('red')}
-              ></span>
-              <span 
-                title='Orange Theme' 
-                style={Object.assign({}, themeClass, orange)}
-                onClick={() => this.setTheme('orange')}
-              ></span>
-              <span 
-                title='Yellow Theme' 
-                style={Object.assign({}, themeClass, yellow)}
-                onClick={() => this.setTheme('yellow')}
-              ></span>
-            </div>
-          </div>
-        </AppContainer>
-      </I18NProvider>
-    );
-  }
-}
+import React from 'react';
+import { I18NProvider } from '@zohodesk/i18n';
+import { Container } from '@zohodesk/components/lib/Layout';
+import AppContainer from '@zohodesk/components/lib/AppContainer/AppContainer';
+import datetime from '@zohodesk/datetimejs';
+import i18n from './i18n';
+/* component pkg - default mode & themes */
+import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css';
+/* component pkg - dark mode & themes */
+import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
+import '@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css';
+/* svg pkg - default mode & themes */
+import '@zohodesk/svg/lib/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/default/mode/defaultEmptyStates.module.css';
+/* svg pkg - dark mode & themes */
+import '@zohodesk/svg/lib/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/svg/lib/svg/Appearance/dark/mode/darkEmptyStates.module.css';
+import { setGlobalIdPrefix } from '@zohodesk/components/lib/Provider/IdProvider';
+import { setInitialZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import Switch from '@zohodesk/components/lib/Switch/Switch';
+/* dot pkg - default mode & themes */
+import './Appearance/default/themes/blue/blueDefaultDotTheme.module.css';
+import './Appearance/default/themes/green/greenDefaultDotTheme.module.css';
+import './Appearance/default/themes/orange/orangeDefaultDotTheme.module.css';
+import './Appearance/default/themes/red/redDefaultDotTheme.module.css';
+import './Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css';
+import './Appearance/default/mode/dotDefaultMode.module.css';
+/* dot pkg - dark mode & themes */
+import './Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
+import './Appearance/dark/themes/green/greenDarkDotTheme.module.css';
+import './Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
+import './Appearance/dark/themes/red/redDarkDotTheme.module.css';
+import './Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
+import './Appearance/dark/mode/dotDarkMode.module.css';
+
+datetime.tz.set({
+  timezone: 'Asia/Kolkata',
+  _packed:
+    '-5R.s -5R.k -5l.a -5u -6u|01234343|-4Fg5R.s BKo0.8 1rDcw.a 1r2LP.a 1un0 HB0 7zX0|15e6',
+  _default: 'Asia/Kolkata'
+});
+
+export default class Provider extends React.Component {
+  constructor(props) {
+    super(props);
+    setGlobalIdPrefix('ZD');
+    setInitialZIndex('10');
+    this.state = {
+      appearanceName: 'default',
+      themeName: 'blue'
+    };
+
+    this.switchMode = this.switchMode.bind(this);
+    this.setTheme = this.setTheme.bind(this);
+  }
+
+  switchMode() {
+    let appearanceName = this.state.appearanceName;
+    if (appearanceName == 'default') {
+      this.setState({
+        appearanceName: 'dark'
+      });
+    } else {
+      this.setState({
+        appearanceName: 'default'
+      });
+    }
+  }
+
+  setTheme(theme) {
+    this.setState({
+      themeName: theme
+    });
+  }
+
+  render() {
+    let { 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'
+    };
+
+    return (
+      <I18NProvider
+        i18n={i18n}
+        timeZone='Asia/Kolkata'
+        datePattern={''}
+        dateTimeFormat={''}
+        timeFormat={''}
+        direction={'ltr'}
+      >
+        <AppContainer
+          customProps={{ExtraProps:{'data-mode':appearanceName,'data-theme':themeName}}}
+        >
+          <Container scroll='vertical'>{this.props.children}</Container>
+          <div
+            style={{
+              position: 'fixed',
+              bottom: '0',
+              backgroundColor: '#272727',
+              padding: '10px',
+              borderRadius: '15px 15px 0 0',
+              minWidth: '100px',
+              textAlign: 'center',
+              left: '50%',
+              transform: 'translate(-50%)',
+              boxShadow: '0 0 3px #000',
+              fontSize: '12px',
+              zIndex: '1000',
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <div>
+              <Switch
+                id='switchMode'
+                text='Light/Night Mode'
+                labelSize='small'
+                onChange={this.switchMode}
+                checked={appearanceName == 'dark'}
+              />
+            </div>
+            <div style={{display: 'flex'}}>
+              <span 
+                title='Blue Theme' 
+                style={themeClass}
+                onClick={() => this.setTheme('blue')}
+              ></span>
+              <span 
+                title='Green Theme' 
+                style={Object.assign({}, themeClass, green)}
+                onClick={() => this.setTheme('green')}
+              ></span>
+              <span 
+                title='Red Theme' 
+                style={Object.assign({}, themeClass, red)}
+                onClick={() => this.setTheme('red')}
+              ></span>
+              <span 
+                title='Orange Theme' 
+                style={Object.assign({}, themeClass, orange)}
+                onClick={() => this.setTheme('orange')}
+              ></span>
+              <span 
+                title='Yellow Theme' 
+                style={Object.assign({}, themeClass, yellow)}
+                onClick={() => this.setTheme('yellow')}
+              ></span>
+            </div>
+          </div>
+        </AppContainer>
+      </I18NProvider>
+    );
+  }
+}