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

package/es/Responsive/Responsive.js

@@ -1,42 +1,42 @@
-import "core-js/modules/es.array.includes";
-import React, { useContext, useEffect, useState, useMemo } from 'react'; // import React, { useState, useMemo, useCallback, useContext } from 'react';
-
+import React, { useContext, useEffect, useState, useMemo } from 'react';
+// import React, { useState, useMemo, useCallback, useContext } from 'react';
 import { ResponsiveSender_defaultProps, ResponsiveReceiver_defaultProps } from './props/defaultProps';
 import { ResponsiveSender_propTypes, ResponsiveReceiver_propTypes } from './props/propTypes';
 import ResizeObserver from './ResizeObserver';
 import DOMRefWrapper from './RefWrapper';
 import { windowResizeObserver } from './windowResizeObserver';
-import { getBreakPointValue, defaultMatcher } from './utils/'; // const sortedBreackPointKey = [  'MOBILE_XS',  'MOBILE_S',  'MOBILE_M',  'MOBILE',  'TABLET_S',  'TABLET_M',  'TABLET',  'LAPTOP_S',  'LAPTOP_M',  'LAPTOP',  'MONITOR_M',  'MONITOR'];
+import { getBreakPointValue, defaultMatcher } from './utils/';
+
+// const sortedBreackPointKey = [  'MOBILE_XS',  'MOBILE_S',  'MOBILE_M',  'MOBILE',  'TABLET_S',  'TABLET_M',  'TABLET',  'LAPTOP_S',  'LAPTOP_M',  'LAPTOP',  'MONITOR_M',  'MONITOR'];
 
 export const ResponsiveContext = /*#__PURE__*/React.createContext({});
 const defaultResponsiveId = 'parentReceiver';
 export class ResponsiveSender extends React.Component {
   constructor(props) {
-    super(props); // method binding
+    super(props);
 
+    // method binding
     this.onResize = this.onResize.bind(this);
     this.containerRef = this.containerRef.bind(this);
     this.getWidth = this.getWidth.bind(this);
     this.state = {
       breakPoint: null,
       getWidth: this.getWidth
-    }; // variables
+    };
 
+    // variables
     this.observer = new ResizeObserver(this.onResize);
     this.size = null;
   }
-
   getWidth() {
     if (!this.size) {
       return 0;
     }
-
     const {
       width
     } = this.size;
     return width;
   }
-
   onResize(size) {
     // const { matcher } = this.props;
     const {
@@ -44,25 +44,21 @@ export class ResponsiveSender extends React.Component {
     } = this.state;
     const newBreakPoint = defaultMatcher(size);
     this.size = size;
-
     if (breakPoint !== newBreakPoint) {
       this.setState({
         breakPoint: newBreakPoint
       });
     }
   }
-
   containerRef(node) {
     this.observer.replaceObservationElement(node);
   }
-
   isChanged(data, key) {
     this.memo = this.memo || {};
     const changed = this.memo[key] !== data;
     this.memo[key] = data;
     return changed;
   }
-
   render() {
     const parentContext = this.context;
     const {
@@ -72,10 +68,9 @@ export class ResponsiveSender extends React.Component {
     } = this.props;
     let {
       childContext
-    } = this; // NOTE: this method called here ,Because of we must update local memo.
-
+    } = this;
+    // NOTE: this method called here ,Because of we must update local memo.
     const isStateChanged = this.isChanged(this.state, 'state');
-
     if (this.isChanged(this.context, 'context') || isStateChanged) {
       childContext = Object.assign({}, parentContext);
       childContext[responsiveId] = this.state;
@@ -90,9 +85,9 @@ export class ResponsiveSender extends React.Component {
       ref: this.containerRef
     }, children));
   }
-
 }
-ResponsiveSender.defaultProps = { ...ResponsiveSender_defaultProps,
+ResponsiveSender.defaultProps = {
+  ...ResponsiveSender_defaultProps,
   responsiveId: defaultResponsiveId
 };
 ResponsiveSender.contextType = ResponsiveContext;
@@ -102,20 +97,17 @@ export function useResponsiveReceiver() {
   const [_, forceUpdate] = useState();
   let totalContextData = useContext(ResponsiveContext);
   let contextData = totalContextData[responsiveId] || totalContextData[defaultResponsiveId]; // NOTE: this for fallback of if responsive receiver id wrong
-
   let data = contextData;
   useEffect(() => {
     !contextData && windowResizeObserver.observe(forceUpdate);
     return () => !contextData && windowResizeObserver.unobserve(forceUpdate);
   }, [!!contextData]);
-
   if (!contextData) {
     data = {
       breakPoint: windowResizeObserver.getBreackPoint(),
       getWidth: () => windowResizeObserver.getSize().width
     };
   }
-
   const {
     breakPoint,
     getWidth
@@ -125,45 +117,37 @@ export function useResponsiveReceiver() {
     return {
       breakPoint,
       isTouchDevice,
-
       deviceBetween(breakPoint1, breakPoint2) {
         const width = getWidth();
-
         if (!width) {
           return false;
-        } // const smallBreakPointIndex = sortedBreackPointKey.indexOf(breakPoint1);
+        }
+        // const smallBreakPointIndex = sortedBreackPointKey.indexOf(breakPoint1);
         // const value1 = smallBreakPointIndex < 1 ?  0 : getBreakPointValue(sortedBreackPointKey[smallBreakPointIndex-1]);
-
-
         const value1 = getBreakPointValue(breakPoint1);
         const value2 = getBreakPointValue(breakPoint2);
-
         if (value1 > value2) {
           return this.deviceBetween(breakPoint2, breakPoint1);
         }
-
         return value1 <= width && value2 >= width || breakPoint1 === breakPoint || breakPoint2 === breakPoint;
       },
-
       deviceOnly() {
         let breakPoints = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
         return breakPoints.includes(breakPoint);
       },
-
       deviceUpto(breakPoint) {
         const width = getWidth();
-
         if (!width) {
           return false;
         }
-
         return width <= getBreakPointValue(breakPoint);
       }
-
     };
   }, [breakPoint, getWidth]);
   return childArg;
-} // function ResponsiveReceiverFunc({ children, hiddenSizes }, ref) {
+}
+
+// function ResponsiveReceiverFunc({ children, hiddenSizes }, ref) {
 //   const { breakPoint, methods } = useResponsiveReceiver();
 //   console.log(hiddenSizes);
 //   return hiddenSizes.indexOf(breakPoint) === -1 ? (
@@ -189,7 +173,8 @@ export function ResponsiveReceiver(_ref) {
     ref: eleRef
   }, child) : child : null;
 }
-ResponsiveReceiver.defaultProps = { ...ResponsiveReceiver_defaultProps,
+ResponsiveReceiver.defaultProps = {
+  ...ResponsiveReceiver_defaultProps,
   responsiveId: defaultResponsiveId
 };
 ResponsiveReceiver.propTypes = ResponsiveReceiver_propTypes;

package/es/Responsive/docs/Responsive__Custom.docs.js

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { ResponsiveSender, ResponsiveReceiver } from '../CustomResponsive';
 import { Container, Box } from '../../Layout';
-import Radio from '../../Radio/Radio'; // eslint-disable-next-line css-modules/no-unused-class
-
-import style from './style.module.css'; // eslint-disable-next-line react/prop-types
+import Radio from '../../Radio/Radio';
+// eslint-disable-next-line css-modules/no-unused-class
+import style from './style.module.css';
 
+// eslint-disable-next-line react/prop-types
 function WindowSizeBar(_ref) {
   let {
     isTouchDevice
@@ -23,16 +24,14 @@ function WindowSizeBar(_ref) {
         windowHeight: window.innerHeight
       });
     }
-
     window.addEventListener('resize', handler);
     return () => window.removeEventListener('resize', handler);
   });
   return /*#__PURE__*/React.createElement(Box, {
     className: style.header
   }, ` Width: ${windowWidth} * Height: ${windowHeight} * isTouchDevice: ${isTouchDevice} `);
-} // eslint-disable-next-line camelcase
-
-
+}
+// eslint-disable-next-line camelcase
 export default class Responsive__Custom extends React.Component {
   constructor(props) {
     super(props);
@@ -44,7 +43,6 @@ export default class Responsive__Custom extends React.Component {
     this.switchToAnd = this.handleMethodChange.bind(this, 'AndFunction');
     this.switchToOr = this.handleMethodChange.bind(this, 'orFunction');
   }
-
   customQuery(_ref2) {
     let {
       mediaQueryOR,
@@ -62,12 +60,15 @@ export default class Responsive__Custom extends React.Component {
       }, {
         minWidth: 700,
         maxWidth: 800
-      } // {
+      }
+
+      // {
       //   minWidth: 700
       // },
       // {
       //   minHeight: 700
       // }
+
       // {
       //   minHeight: 700,
       //   minWidth: 700
@@ -76,21 +77,25 @@ export default class Responsive__Custom extends React.Component {
       //   maxHeight: 600,
       //   maxWidth: 600
       // }
+
       // {
       //   minHeight: 700,
       //   maxHeight: 800,
       //   minWidth: 700,
       //   maxWidth: 800
       // }
+
       // {
       //   minWidth: 700,
       //   minHeight: 700
       // }
+
       // {
       //   minWidth: 700,
       //   minHeight: 700,
       //   maxHeight: 800
       // }
+
       // {
       //   minWidth: 700,
       //   maxWidth: 800,
@@ -103,12 +108,15 @@ export default class Responsive__Custom extends React.Component {
       }, {
         minWidth: 700,
         maxWidth: 800
-      } // {
+      }
+
+      // {
       //   minWidth: 700
       // },
       // {
       //   minHeight: 700
       // }
+
       // {
       //   minHeight: 700,
       //   minWidth: 700
@@ -117,21 +125,25 @@ export default class Responsive__Custom extends React.Component {
       //   maxHeight: 600,
       //   maxWidth: 600
       // }
+
       // {
       //   minHeight: 700,
       //   maxHeight: 800,
       //   minWidth: 700,
       //   maxWidth: 800
       // }
+
       // {
       //   minWidth: 700,
       //   minHeight: 700
       // }
+
       // {
       //   minWidth: 700,
       //   minHeight: 700,
       //   maxHeight: 800
       // }
+
       // {
       //   minWidth: 700,
       //   maxWidth: 800,
@@ -141,13 +153,11 @@ export default class Responsive__Custom extends React.Component {
       ]) : ''
     };
   }
-
   handleMethodChange(value) {
     this.setState({
       method: value
     });
   }
-
   render() {
     let {
       method
@@ -194,9 +204,7 @@ export default class Responsive__Custom extends React.Component {
       }, "minWidth: 700, maxWidth: 800 ||  minHeight: 700, maxHeight: 800"))));
     })));
   }
-
 }
-
 if (false) {
   // eslint-disable-next-line camelcase
   Responsive__Custom.docs = {

package/es/Responsive/docs/Responsive__default.docs.js

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
-
 /* eslint-disable react/forbid-component-props */
 // Example1.js
+
 import React from 'react';
 import { ResponsiveReceiver } from '..';
 import { Container, Box } from '../../Layout';
@@ -86,9 +86,7 @@ export default class Responsive__default extends React.Component {
       }, "MOBILE"))));
     }));
   }
-
 }
-
 if (false) {
   Responsive__default.docs = {
     componentGroup: 'Layout',

package/es/Responsive/docs/style.module.css

@@ -1,18 +1,21 @@
 .header{
-  background-color: #c60000;
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
   color: #fff;
   font-size: 24px;
+  background-color: #c60000;
   padding: 10px;
   text-align: center;
   margin: 10px 6px;
+}[dir=ltr] .header{
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+}[dir=rtl] .header{
+  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
 }
 .box{
   height: 80px;
-  background-color: #ffbb11;
-  text-align: center;
   line-height: 80px;
   min-width: 300px;
+  background-color: #ffbb11;
+  text-align: center;
   margin:6px;
   padding: 0 100x;
 }
@@ -20,10 +23,10 @@
   background-color: #60de55
 }
 .subHeading{
-  text-align: center;
-  padding: 10px;
   position: sticky;
   top: 0;
+  text-align: center;
+  padding: 10px;
   background-color: #fff
 }
 
@@ -37,11 +40,17 @@
   position: absolute;
   width: 60%;
   top: 50%;
-  transform: translate(-50%,-50%);
-  left: 50%;
   border: 1px solid #aaa;
   border-radius: 4px
 }
+[dir=ltr] .wrapper{
+  transform: translate(-50%,-50%);
+  left: 50%
+}
+[dir=rtl] .wrapper{
+  transform: translate(50%,-50%);
+  right: 50%
+}
 .avatar{
   margin:20px auto
 }

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 || 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); }
-
+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',