@zohodesk/components 1.0.0-alpha-250 → 1.0.0-alpha-252

package/es/Responsive/sizeObservers.js

@@ -4,39 +4,34 @@ const breakPointKeys = {
   minWidth: true,
   maxWidth: true
 };
-
 function isValideBreakPoint(breakPoint) {
   return Object.keys(breakPoint).every(key => breakPointKeys[key]);
 }
-
 function rangeCheck(minValue, maxValue, screenValue) {
   if (minValue === undefined) {
     if (maxValue === undefined) {
       return undefined;
     }
-
     return maxValue >= screenValue;
   }
-
   if (maxValue === undefined) {
     return minValue <= screenValue;
   }
-
   return minValue <= screenValue && maxValue >= screenValue;
 }
-
 function isTouchDeviceFunc() {
   // return window.matchMedia("(pointer: coarse)").matches
   return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
-} // export const isTouchDevice =
-//   'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
-
+}
 
+// export const isTouchDevice =
+//   'ontouchstart' in window && navigator.userAgent.match(/mobi/i) ? true : false;
 export const isTouchDevice = isTouchDeviceFunc();
 export function isBreackPointMatched(object, screen) {
   if (!isValideBreakPoint(object)) {
     // eslint-disable-next-line no-console
-    console.error('only minHeight,maxHeight,minWidth,maxWidth these keys are allowed, your object', JSON.stringify(object)); // return;
+    console.error('only minHeight,maxHeight,minWidth,maxWidth these keys are allowed, your object', JSON.stringify(object));
+    // return;
   }
 
   const {
@@ -60,59 +55,46 @@ export class Subscribale {
   constructor() {
     this.subscribers = [];
   }
-
   connect() {}
-
   disconnect() {}
-
   subscribe(func) {
     this.subscribers.length && this.connect();
     this.subscribers.push(func);
   }
-
   unsubscribe(func) {
     this.subscribers = this.subscribers.filter(s => s !== func);
     this.subscribers.length && this.disconnect();
   }
-
   dispatch() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     this.subscribers.forEach(subscriber => {
       subscriber(...args);
     });
   }
-
 }
-
 class InitSubscribale extends Subscribale {
   // must be OverWrite
-  connect() {} // must be OverWrite
-
+  connect() {}
 
+  // must be OverWrite
   disconnect() {}
-
   subscribe(func) {
     !this.subscribers.length && this.connect();
     super.subscribe(func);
   }
-
   unsubscribe(func) {
     super.unsubscribe(func);
     !this.subscribers.length && this.disconnect();
   }
-
 }
-
 export const windowResizeObserver = (() => {
   const subscribaleInstance = new InitSubscribale();
   let size = {
     heigth: window.innerHeight,
     width: window.innerWidth
   };
-
   function handleResize() {
     const newSize = {
       height: window.innerHeight,
@@ -121,16 +103,13 @@ export const windowResizeObserver = (() => {
     size = newSize;
     subscribaleInstance.dispatch(newSize);
   }
-
   function addResizeListener() {
     window.addEventListener('resize', handleResize);
     handleResize();
   }
-
   function removeResizeListener() {
     window.removeEventListener('resize', handleResize);
   }
-
   subscribaleInstance.connect = addResizeListener;
   subscribaleInstance.disconnect = removeResizeListener;
   return {

package/es/Responsive/utils/index.js

@@ -11,6 +11,7 @@ export const breakPoints = {
   //1024
   LAPTOP: 90,
   //1440
+
   // other break points
   MOBILE_XS: 20,
   //320
@@ -25,28 +26,25 @@ export const breakPoints = {
   MONITOR_M: 100,
   //1600
   MONITOR: 120 //1920
-
 };
+
 export function getBreakPointValue(breakPoint) {
-  return breakPoints[breakPoint] * getHTMLFontSize(); // return breakPoints[breakPoint] * 16;
+  return breakPoints[breakPoint] * getHTMLFontSize();
+  // return breakPoints[breakPoint] * 16;
 }
+
 export const sortedBreackPointKey = Object.keys(breakPoints).sort((a, b) => breakPoints[a] - breakPoints[b]);
 export function defaultMatcher(size) {
   let currentSize = '';
-
   if (!size) {
     return currentSize;
   }
-
   let key;
-
   for (let i = 0; i < sortedBreackPointKey.length; i++) {
     key = sortedBreackPointKey[i];
-
     if (getBreakPointValue(key) >= size.width) {
       break;
     }
   }
-
   return key;
 }

package/es/Responsive/utils/shallowCompare.js

@@ -1,7 +1,6 @@
 function isSame(a, b) {
   return a === b;
 }
-
 const {
   hasOwnProperty
 } = Object.prototype;
@@ -9,20 +8,16 @@ export default function shallowCompare(objA, objB) {
   if (objA && objB && typeof objA === 'object' && typeof objB === 'object') {
     const keysA = Object.keys(objA);
     const keysB = Object.keys(objB);
-
     if (keysA.length !== keysB.length) {
       return false;
-    } // Test for A's keys different from B.
-
-
+    }
+    // Test for A's keys different from B.
     for (let key of keysA) {
       if (!hasOwnProperty.call(objB, key) || !isSame(objA[key], objB[key])) {
         return false;
       }
     }
-
     return true;
   }
-
   return isSame(objA, objB);
 }

package/es/Responsive/windowResizeObserver.js

@@ -6,7 +6,6 @@ export const windowResizeObserver = (() => {
     width: 0
   };
   let breackPoint = null;
-
   function handleResize() {
     const newSize = {
       height: window.innerHeight,
@@ -14,32 +13,26 @@ export const windowResizeObserver = (() => {
     };
     size = newSize;
     const newBreackPoint = defaultMatcher(size);
-
     if (newBreackPoint !== breackPoint) {
       breackPoint = newBreackPoint;
       listeners.forEach(listener => listener(newBreackPoint));
     }
   }
-
   function addResizeListener() {
     window.addEventListener('resize', handleResize);
     handleResize();
   }
-
   function removeResizeListener() {
     window.removeEventListener('resize', handleResize);
   }
-
   return {
     observe: function (listener) {
       listeners.push(listener);
       listener.length === 1 && addResizeListener();
     },
-
     getBreackPoint() {
       return breackPoint;
     },
-
     getSize: function () {
       return size;
     },

package/es/ResponsiveDropBox/ResponsiveDropBox.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -12,7 +11,6 @@ export default class ResponsiveDropBox extends Component {
     super(props);
     this.responsiveFunc = this.responsiveFunc.bind(this);
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -23,7 +21,6 @@ export default class ResponsiveDropBox extends Component {
       }])
     };
   }
-
   render() {
     const {
       children,
@@ -61,7 +58,6 @@ export default class ResponsiveDropBox extends Component {
       }, children);
     }));
   }
-
 }
 ResponsiveDropBox.propTypes = propTypes;
 ResponsiveDropBox.defaultProps = defaultProps;

package/es/Ribbon/Ribbon.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [default, flag, plain, ribbon, box, stamp, sticker, small, medium, large, xlarge, palette_default, palette_danger, palette_primary, palette_secondary, palette_info, palette_dark, plain_default, plain_danger, plain_primary, plain_secondary, plain_info, plain_dark, tag] }] */
-
 import style from './Ribbon.module.css';
 export default class Ribbon extends React.Component {
   render() {
@@ -29,11 +28,9 @@ export default class Ribbon extends React.Component {
       className: style.before
     }) : null);
   }
-
 }
 Ribbon.propTypes = propTypes;
 Ribbon.defaultProps = defaultProps;
-
 if (false) {
   Ribbon.docs = {
     componentGroup: 'Atom',

package/es/Ribbon/docs/Ribbon__custom.docs.js

@@ -5,17 +5,17 @@ import styles from '../../common/docStyle.module.css';
 export default class Ribbon__custom extends React.Component {
   render() {
     let style = {
-      margin: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      padding: '15px 0',
-      textTransform: 'upperCase'
-    },
-        spanStyle = {
-      display: 'inline-block',
-      margin: '10px 10px 10px 0'
-    };
+        margin: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        padding: '15px 0',
+        textTransform: 'upperCase'
+      },
+      spanStyle = {
+        display: 'inline-block',
+        margin: '10px 10px 10px 0'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -324,7 +324,8 @@ export default class Ribbon__custom extends React.Component {
       style: spanStyle
     }, /*#__PURE__*/React.createElement(Ribbon, {
       customClass: styles.ribbon,
-      palette: "primary" // size='medium'
+      palette: "primary"
+      // size='medium'
       ,
       type: "sticker",
       text: "Flag Primary"
@@ -374,9 +375,7 @@ export default class Ribbon__custom extends React.Component {
       text: "Flag Info"
     })))));
   }
-
 }
-
 if (false) {
   Ribbon__custom.docs = {
     componentGroup: 'Atom',

package/es/Ribbon/docs/Ribbon__default.docs.js

@@ -4,17 +4,17 @@ import Icon from '@zohodesk/icons/lib/Icon';
 export default class Ribbon__default extends React.Component {
   render() {
     let style = {
-      margin: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      padding: '15px 0',
-      textTransform: 'upperCase'
-    },
-        spanStyle = {
-      display: 'inline-block',
-      margin: '10px 10px 10px 0'
-    };
+        margin: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        padding: '15px 0',
+        textTransform: 'upperCase'
+      },
+      spanStyle = {
+        display: 'inline-block',
+        margin: '10px 10px 10px 0'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -285,7 +285,8 @@ export default class Ribbon__default extends React.Component {
     }))), /*#__PURE__*/React.createElement("span", {
       style: spanStyle
     }, /*#__PURE__*/React.createElement(Ribbon, {
-      palette: "primary" // size='medium'
+      palette: "primary"
+      // size='medium'
       ,
       type: "sticker",
       text: "Flag Primary"
@@ -330,9 +331,7 @@ export default class Ribbon__default extends React.Component {
       text: "Flag Info"
     })))));
   }
-
 }
-
 if (false) {
   Ribbon__default.docs = {
     componentGroup: 'Atom',

package/es/RippleEffect/RippleEffect.js

@@ -22,7 +22,6 @@ export default function RippleEffect(props) {
 }
 RippleEffect.defaultProps = defaultProps;
 RippleEffect.propTypes = propTypes;
-
 if (false) {
   RippleEffect.docs = {
     componentGroup: 'RippleEffect',

package/es/RippleEffect/docs/RippleEffect__default.docs.js

@@ -3,18 +3,18 @@ import RippleEffect from '../RippleEffect';
 export default class RippleEffect__default extends React.Component {
   render() {
     let style = {
-      margin: '20px 20px 0'
-    },
-        boxStyle = {
-      border: '1px solid #e3e6eb',
-      padding: '15px 20px 25px',
-      marginBottom: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      paddingBottom: '25px',
-      textTransform: 'upperCase'
-    };
+        margin: '20px 20px 0'
+      },
+      boxStyle = {
+        border: '1px solid #e3e6eb',
+        padding: '15px 20px 25px',
+        marginBottom: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        paddingBottom: '25px',
+        textTransform: 'upperCase'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", {
@@ -424,9 +424,7 @@ export default class RippleEffect__default extends React.Component {
       }
     }, "Primary Dark")))));
   }
-
 }
-
 if (false) {
   RippleEffect__default.docs = {
     componentGroup: 'RippleEffect',