@zohodesk/components 1.2.23 → 1.2.25

package/es/v1/Responsive/ResizeObserver.js

@@ -4,30 +4,33 @@ const mutationObserverOptions = {
   // childList: true,
   attributes: true
 };
+
 function getSize(element) {
   let {
     offsetHeight,
     offsetWidth
-  } = element;
-  // const { height, width } = element.getBoundingClientRect();
+  } = element; // const { height, width } = element.getBoundingClientRect();
+
   return {
     height: offsetHeight,
     width: offsetWidth
   };
 }
+
 function dispatch() {
   let resizeResponsive = new Event('resizeResponsive');
   window.dispatchEvent(resizeResponsive);
 }
+
 if (!hasResizeObserver) {
   let interval = null;
   window.addEventListener('resize', () => {
     clearTimeout(interval);
     interval = setTimeout(dispatch, 100);
   });
-}
+} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
+
 
-// NOTE: this is not full polyfill , we just wrote what types of changes wlli
 export default class ResizeObserverPolyfill {
   constructor(onResize) {
     // method finding
@@ -42,57 +45,70 @@ export default class ResizeObserverPolyfill {
       height: 0,
       width: 0
     };
+
     if (hasResizeObserver) {
       this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
     } else {
       this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
     }
   }
+
   replaceResizeHandler(onResize) {
     this.onResize = onResize;
   }
+
   resizeHandler() {
     if (!this.targetNode) {
       return;
     }
-    const currentSize = getSize(this.targetNode);
-    // if (this.size && shallowCompare(currentSize, this.size)) {
+
+    const currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+
     if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
       return;
     }
+
     this.size = currentSize;
     this.onResize(this.size, this.targetNode);
     return true;
   }
+
   resizeHandlerDispatch() {
     if (!this.resizeHandler() || hasResizeObserver) {
       return;
     }
+
     dispatch();
   }
+
   debounce() {
     clearTimeout(this.interval);
     this.interval = setTimeout(this.resizeHandler, 100);
   }
+
   transitionEndHandler(event) {
     if (event.propertyName.indexOf('color') === -1) {
       this.resizeHandlerDispatch();
     }
   }
+
   addEventListeners(targetNode) {
     targetNode.addEventListener('transitionend', this.transitionEndHandler);
     window.addEventListener('resizeResponsive', this.debounce);
     targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
     targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
   }
+
   removeEventListeners(targetNode) {
     targetNode.removeEventListener('transitionend', this.transitionEndHandler);
     window.removeEventListener('resizeResponsive', this.debounce);
     targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
     targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
   }
+
   observe(targetNode) {
     this.targetNode = targetNode;
+
     if (hasResizeObserver) {
       this.resizeObserverInstance.observe(targetNode);
     } else {
@@ -100,14 +116,17 @@ export default class ResizeObserverPolyfill {
       this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
     }
   }
+
   replaceObservationElement(targetNode) {
     if (this.targetNode === targetNode) {
       return;
     }
+
     this.targetNode && this.disconnect();
     targetNode && this.observe(targetNode);
     targetNode && this.resizeHandlerDispatch();
   }
+
   disconnect() {
     this.targetNode && this.removeEventListeners(this.targetNode);
     hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
@@ -117,4 +136,5 @@ export default class ResizeObserverPolyfill {
       width: 0
     };
   }
+
 }

package/es/v1/Responsive/Responsive.js

@@ -1,42 +1,41 @@
-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 '../../Responsive/windowResizeObserver';
-import { getBreakPointValue, defaultMatcher } from '../../Responsive/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 '../../Responsive/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);
+    super(props); // method binding
 
-    // 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,21 +43,25 @@ 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 {
@@ -68,9 +71,10 @@ 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;
@@ -85,9 +89,9 @@ export class ResponsiveSender extends React.Component {
       ref: this.containerRef
     }, children));
   }
+
 }
-ResponsiveSender.defaultProps = {
-  ...ResponsiveSender_defaultProps,
+ResponsiveSender.defaultProps = { ...ResponsiveSender_defaultProps,
   responsiveId: defaultResponsiveId
 };
 ResponsiveSender.contextType = ResponsiveContext;
@@ -97,17 +101,20 @@ 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
@@ -117,37 +124,45 @@ 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 ? (
@@ -173,8 +188,7 @@ 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/v1/Responsive/index.js

@@ -1,8 +1,6 @@
 export { ResponsiveSender as CustomResponsiveSender, ResponsiveReceiver as CustomResponsiveReceiver, useResponsiveReceiver as useCustomResponsiveReceiver } from './CustomResponsive';
 export { ResponsiveSender, ResponsiveReceiver, useResponsiveReceiver } from './Responsive';
-export { default as ResizeComponent } from './ResizeComponent';
-
-// let Responsive = {
+export { default as ResizeComponent } from './ResizeComponent'; // let Responsive = {
 //   docs: {
 //     componentGroup: 'Layout',
 //     folderName: 'Style Guide'

package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js

@@ -1,4 +1,5 @@
 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, { useCallback } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';

package/es/v1/ResponsiveDropBox/props/propTypes.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import { DropBoxPropTypes } from './../../DropBox/props/propTypes';
-export const propTypes = {
-  ...DropBoxPropTypes,
+export const propTypes = { ...DropBoxPropTypes,
   children: PropTypes.element,
   customClass: PropTypes.object,
   isResponsivePadding: PropTypes.bool,

package/es/v1/RippleEffect/RippleEffect.js

@@ -12,12 +12,13 @@ export default function RippleEffect(props) {
     hoverType,
     isNeedEffect,
     needBorder,
-    isCopyTextEnabled
+    isCopyTextEnabled,
+    cssClassPropOfChild
   } = props;
   let className = isNeedEffect ? `${style.effect} ${style[palette]} ${needBorder ? style.border : ''} ${style[`${hoverType}Hover`] ? style[`${hoverType}Hover`] : ''} ${isActive && !isDisabled ? style.active : ''} ${isDisabled ? '' : style.hoverEffect} ${isCopyTextEnabled ? style.notAllowed : isDisabled ? CssProvider('isDisabled') : ''}` : '';
   let child = React.Children.only(children);
   return /*#__PURE__*/React.cloneElement(child, {
-    className: `${child.props.className || ''} ${className}`
+    [cssClassPropOfChild]: `${child.props[cssClassPropOfChild] || ''} ${className}`
   });
 }
 RippleEffect.defaultProps = defaultProps;

package/es/v1/RippleEffect/props/defaultProps.js

@@ -5,5 +5,6 @@ export const defaultProps = {
   needBorder: true,
   hoverType: 'default',
   palette: 'default',
+  cssClassPropOfChild: 'className',
   isCopyTextEnabled: false
 };

package/es/v1/RippleEffect/props/propTypes.js

@@ -7,5 +7,6 @@ export const propTypes = {
   isNeedEffect: PropTypes.bool,
   needBorder: PropTypes.bool,
   palette: PropTypes.oneOf(['default', 'primary', 'primaryLight', 'primaryFilled', 'primaryDark', 'green', 'danger']),
+  cssClassPropOfChild: PropTypes.string,
   isCopyTextEnabled: PropTypes.bool
 };