@zohodesk/components 1.0.0-alpha-198 → 1.0.0-alpha-199

package/es/Responsive/CustomResponsive.js

@@ -1,88 +1,92 @@
-import React, { useContext, useEffect, useState, useRef } from 'react';
+import React, { useContext, useEffect, useState, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import ResizeObserver from './ResizeObserver';
 import DOMRefWrapper from './RefWrapper';
 import shallowCompare from './utils/shallowCompare';
-import { isBreackPointMatched, Subscribale, isTouchDevice, windowResizeObserver } from './sizeObservers'; // const commonBreakPoints = [ 480, 640, 768, 1024, 1440 ];
+import { isBreackPointMatched, Subscribale, isTouchDevice, windowResizeObserver } from './sizeObservers';
+import { ContextOptimizer } from '../utils/ContextOptimizer'; // const commonBreakPoints = [ 480, 640, 768, 1024, 1440 ];
 // const otherBreakPoints = [320, 360, 375, 720, 1280, 1600, 1920];
+// defaultResponsiveId means if ResponsiveSender do not recive id This will be id
 
-export const ResponsiveContext = /*#__PURE__*/React.createContext({});
-const defaultResponsiveId = 'parent_sender';
-const validSizeResponsiveId = 'valid_sender';
-export class ResponsiveSender extends React.Component {
-  constructor(props) {
-    super(props); // method binding
-
-    this.onResize = this.onResize.bind(this);
-    this.containerRef = this.containerRef.bind(this);
-    this.getSize = this.getSize.bind(this); // variables
+const defaultResponsiveId = 'parent_sender'; // validSizeResponsiveId means in some parent's height and with is caluclated ( readed )
 
-    this.observer = new ResizeObserver(this.onResize);
-    this.size = {
+const validSizeResponsiveId = 'valid_sender';
+const ResponsiveContext = /*#__PURE__*/React.createContext({
+  [validSizeResponsiveId]: windowResizeObserver
+});
+export function ResponsiveSender(props) {
+  // variables
+  const {
+    children,
+    domRefKey,
+    responsiveId
+  } = props;
+
+  function init() {
+    let size = {
       height: 0,
       width: 0
     };
-    this.childContext = {
+
+    function getSize() {
+      return size;
+    }
+
+    const childContext = {
       resize: new Subscribale(),
-      getSize: this.getSize,
+      getSize,
+      // TODO: rename isParentSize ==> isSizeReaded (or) isMySize (or) isOriginalSize
       isParentSize: false
     };
-  }
 
-  getSize() {
-    return this.size;
-  }
+    function onResize(newSize) {
+      childContext.isParentSize = true;
+      size = newSize;
+      setTimeout(() => {
+        childContext.resize.dispatch(newSize);
+      });
+    }
 
-  onResize(size) {
-    this.childContext.isParentSize = true;
-    this.size = size;
-    setTimeout(() => {
-      this.childContext.resize.dispatch(size);
-    });
-  }
+    const observer = new ResizeObserver(onResize);
 
-  containerRef(node) {
-    this.observer.replaceObservationElement(node);
-  }
+    function containerRef(node) {
+      observer.replaceObservationElement(node);
+    }
 
-  getContext() {
-    const {
-      responsiveId
-    } = this.props;
-    let totalContext = this.context;
-    let prevContext = totalContext[responsiveId];
-    let {
+    return {
+      containerRef,
       childContext
-    } = this;
+    };
+  }
 
-    if (!prevContext || !shallowCompare(prevContext, childContext)) {
-      totalContext = Object.assign({}, totalContext);
-      totalContext[responsiveId] = childContext; // NOTE: this for fallback of if responsive receiver id wrong or not avelable Responcive id
+  const {
+    containerRef,
+    childContext
+  } = useMemo(init, []);
 
-      totalContext[defaultResponsiveId] = childContext;
+  function contextSelector(context) {
+    const totalContext = { ...context
+    };
+    totalContext[responsiveId] = childContext; // NOTE: this for fallback of if responsive receiver id wrong or not avelable Responcive id
 
-      if (this.childContext.isParentSize) {
-        totalContext[validSizeResponsiveId] = childContext;
-      }
+    totalContext[defaultResponsiveId] = childContext;
+
+    if (childContext.isParentSize) {
+      totalContext[validSizeResponsiveId] = childContext;
     }
 
     return totalContext;
   }
 
-  render() {
-    const {
-      children,
-      domRefKey
-    } = this.props;
-    const childContext = this.getContext();
-    return /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
-      value: childContext
-    }, /*#__PURE__*/React.createElement(DOMRefWrapper, {
-      domRefKey: domRefKey,
-      ref: this.containerRef
-    }, children));
-  }
-
+  return /*#__PURE__*/React.createElement(ContextOptimizer, {
+    Context: ResponsiveContext,
+    calculation: contextSelector
+  }, totalContext => /*#__PURE__*/React.createElement(ResponsiveContext.Provider, {
+    value: totalContext
+  }, /*#__PURE__*/React.createElement(DOMRefWrapper, {
+    domRefKey: domRefKey,
+    ref: containerRef
+  }, children)));
 }
 ResponsiveSender.defaultProps = {
   responsiveId: defaultResponsiveId,
@@ -96,23 +100,23 @@ ResponsiveSender.propTypes = {
 };
 export function useResponsiveReceiver(responsiveId = defaultResponsiveId, query) {
   const [, forceUpdate] = useState();
-  let totalContextData = useContext(ResponsiveContext);
-  let validSizeContextData = totalContextData[validSizeResponsiveId];
-  let contextData = totalContextData[responsiveId] || totalContextData[defaultResponsiveId]; // NOTE: this for fallback of if responsive receiver id wrong
+  const totalContextData = useContext(ResponsiveContext);
+  const validSizeContextData = totalContextData[validSizeResponsiveId];
+  const contextData = totalContextData[responsiveId] || totalContextData[defaultResponsiveId] || validSizeContextData; // NOTE: this for fallback of if responsive receiver id wrong
 
   const resizeHandlerRef = useRef();
   const data = useRef();
 
   function updateLatestData() {
-    const size = contextData ? contextData.isParentSize ? contextData.getSize() : validSizeContextData ? validSizeContextData.getSize() : windowResizeObserver.getSize() : windowResizeObserver.getSize();
+    const size = contextData.isParentSize ? contextData.getSize() : validSizeContextData.getSize();
     data.current = query({
       isTouchDevice,
-      isParentSize: contextData ? contextData.isParentSize : true,
+      isParentSize: contextData.isParentSize,
       currentScreenSize: size,
 
       mediaQueryOR(breakPointArray) {
         return breakPointArray.some(breakPoint => {
-          let {
+          const {
             isHeight,
             isWidth
           } = isBreackPointMatched(breakPoint, size);
@@ -122,7 +126,7 @@ export function useResponsiveReceiver(responsiveId = defaultResponsiveId, query)
 
       mediaQueryAND(breakPointArray) {
         return breakPointArray.every(breakPoint => {
-          let {
+          const {
             isHeight,
             isWidth
           } = isBreackPointMatched(breakPoint, size);
@@ -142,13 +146,8 @@ export function useResponsiveReceiver(responsiveId = defaultResponsiveId, query)
       !isSameValues && forceUpdate({});
     }
 
-    if (contextData) {
-      contextData.resize.subscribe(handleResize);
-      return () => contextData.resize.unsubscribe(handleResize);
-    }
-
-    windowResizeObserver.observe(handleResize);
-    return () => windowResizeObserver.unobserve(handleResize);
+    contextData.resize.subscribe(handleResize);
+    return () => contextData.resize.unsubscribe(handleResize);
   }, [contextData]); // const prevContextDataRef = useRef();
   // function handleResize(size) {
   //   const prevData = data.current;
@@ -166,7 +165,7 @@ export function useResponsiveReceiver(responsiveId = defaultResponsiveId, query)
   //     windowResizeObserver.observe(handleResize);
   //   }
   // }
-  //NOTE: this call for we must give updated value
+  // NOTE: this call for we must give updated value
 
   updateLatestData();
   return data.current;

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

@@ -1,21 +1,18 @@
 .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;
-  line-height: 80px;
-  min-width: 300px;
   background-color: #ffbb11;
   text-align: center;
+  line-height: 80px;
+  min-width: 300px;
   margin:6px;
   padding: 0 100x;
 }
@@ -23,10 +20,10 @@
   background-color: #60de55
 }
 .subHeading{
-  position: sticky;
-  top: 0;
   text-align: center;
   padding: 10px;
+  position: sticky;
+  top: 0;
   background-color: #fff
 }
 
@@ -40,17 +37,11 @@
   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

@@ -54,12 +54,18 @@ export class Subscribale {
     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(...args) {
@@ -69,9 +75,28 @@ export class Subscribale {
   }
 
 }
+
+class InitSubscribale extends Subscribale {
+  // 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 = (() => {
-  let subscribaleInstance = new Subscribale();
-  let isListenersAdded = false;
+  const subscribaleInstance = new InitSubscribale();
   let size = {
     heigth: window.innerHeight,
     width: window.innerWidth
@@ -95,18 +120,11 @@ export const windowResizeObserver = (() => {
     window.removeEventListener('resize', handleResize);
   }
 
+  subscribaleInstance.connect = addResizeListener;
+  subscribaleInstance.disconnect = removeResizeListener;
   return {
-    observe(listener) {
-      subscribaleInstance.subscribe(listener);
-      !isListenersAdded && addResizeListener();
-    },
-
     getSize: () => size,
-
-    unobserve(listener) {
-      subscribaleInstance.unsubscribe(listener);
-      subscribaleInstance.subscribers.length === 0 && removeResizeListener();
-    }
-
+    resize: subscribaleInstance,
+    isParentSize: true
   };
 })();

package/es/Ribbon/Ribbon.module.css

@@ -11,35 +11,31 @@
   --ribbon_line_height: normal;
 
   /* flag ribbon default variable */
+  --ribbon_flag_border_width: var(--zd_size14) var(--zd_size12) var(--zd_size14) 0/*rtl: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12)*/;
 
   /* tag ribbon default variables */
   --ribbon_tag_before_top: var(--zd_size3);
+  --ribbon_tag_before_border_width: 1px 0 0 1px/*rtl: 1px 1px 0 0*/;
   --ribbon_tag_before_border_style: solid;
   --ribbon_tag_before_border_color: var(--zdt_ribbon_default_tag_border);
   --ribbon_tag_before_width: var(--zd_size20);
   --ribbon_tag_before_height: var(--zd_size20);
   --ribbon_tag_before_left: calc(var(--zd_size10) * -1);
   --ribbon_tag_before_border_radius: 3px 0 0 0;
-}[dir=ltr] .varClass {
-  --ribbon_flag_border_width: var(--zd_size14) var(--zd_size12) var(--zd_size14) 0/*rtl: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12)*/;
-  --ribbon_tag_before_border_width: 1px 0 0 1px/*rtl: 1px 1px 0 0*/;
-}[dir=rtl] .varClass {
-  --ribbon_flag_border_width: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12);
-  --ribbon_tag_before_border_width: 1px 1px 0 0;
 }
 .basic {
   composes: varClass;
   position: relative;
+  padding: var(--ribbon_padding);
   color: var(--ribbon_text_color);
   text-transform: var(--ribbon_text_transform);
   font-size: var(--ribbon_font_size);
-  line-height: var(--ribbon_line_height);
-  padding: var(--ribbon_padding);
   background-color: var(--ribbon_bg_color);
   box-shadow: var(--ribbon_box_shadow);
   border-width: var(--ribbon_border_width);
   border-style: solid;
   border-color: var(--ribbon_border_color);
+  line-height: var(--ribbon_line_height);
 }
 .default,
 .flag,
@@ -53,11 +49,11 @@
 
 .default {
   composes: semibold from '../common/common.module.css';
+  text-align: center;
   display: block;
   --ribbon_padding: var(--zd_size5) var(--zd_size20);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  text-align: center;
 }
 .small {
   --ribbon_font_size: var(--zd_font_size9);
@@ -172,36 +168,23 @@
 .flag {
   composes: dotted from '../common/common.module.css';
   display: block;
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6)/*rtl: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24)*/;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_line_height: var(--zd_size20);
   --ribbon_text_transform: uppercase;
 }
-
-[dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6)/*rtl: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24)*/;
-}
-
-[dir=rtl] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24);
-}
 .flag::after {
   position: absolute;
   top: -1px;
+  right: -1px;
   bottom: -1px;
   content: '';
   width: var(--zd_size12);
   border-style: solid;
-  transform: translateZ(0);
-  border-width: var(--ribbon_flag_border_width);
-}
-[dir=ltr] .flag::after {
-  right: -1px;
   border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border)
     var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border);
-}
-[dir=rtl] .flag::after {
-  left: -1px;
-  border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border)    var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border);
+  transform: translateZ(0);
+  border-width: var(--ribbon_flag_border_width);
 }
 .plain {
   display: inline-block;
@@ -210,11 +193,11 @@
 .ribbon {
   composes: semibold from '../common/common.module.css';
   display: block;
+  text-align: center;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   --ribbon_padding: var(--zd_size6) var(--zd_size10);
   --ribbon_line_height: var(--zd_size20);
-  text-align: center;
 }
 .ribbon::after,
 .ribbon::before {
@@ -223,81 +206,51 @@
   top: 100%;
   height: var(--zd_size10);
   width: var(--zd_size10);
-}
-.ribbon::after, .ribbon::before {
   border-style: solid;
   border-width: 5px;
-  background-color: inherit;
-}
-[dir=ltr] .ribbon::after, [dir=ltr] .ribbon::before {
   border-color: transparent transparent var(--zdt_ribbon_flag_white_border)
     var(--zdt_ribbon_flag_white_border);
+  background-color: inherit;
 }
-[dir=rtl] .ribbon::after, [dir=rtl] .ribbon::before {
-  border-color: transparent var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_white_border)    transparent;
-}
-[dir=ltr] .ribbon::after {
+.ribbon::after {
   right: 0;
 }
-[dir=rtl] .ribbon::after {
-  left: 0;
-}
-[dir=ltr] .ribbon::before {
+.ribbon::before {
   left: 0;
   transform: rotateY(180deg);
 }
-[dir=rtl] .ribbon::before {
-  right: 0;
-  transform: rotateY(-180deg);
-}
 
 .tag {
   composes: semibold from '../common/common.module.css';
   display: inline-block;
-  height: var(--zd_size28);
   border-style: solid;
   border-color: var(--zdt_ribbon_default_tag_border);
-}
-
-[dir=ltr] .tag {
   border-width: 1px 1px 1px 0/*rtl: 1px 0 1px 1px*/;
   border-radius: 0 3px 3px 0/*rtl: 3px 0 0 3px*/;
   margin-left: var(--zd_size13);
+  height: var(--zd_size28);
   padding: var(--zd_size6) var(--zd_size8) var(--zd_size6) var(--zd_size5)/*rtl: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8)*/;
 }
-
-[dir=rtl] .tag {
-  border-width: 1px 0 1px 1px;
-  border-radius: 3px 0 0 3px;
-  margin-right: var(--zd_size13);
-  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8);
-}
 .tag::before {
   position: absolute;
   content: '';
-  top: var(--ribbon_tag_before_top);
-  width: var(--ribbon_tag_before_width);
-  height: var(--ribbon_tag_before_height);
+  transform: rotate(-45deg);
   background-color: inherit;
+  top: var(--ribbon_tag_before_top);
   border-style: var(--ribbon_tag_before_border_style);
   border-color: var(--ribbon_tag_before_border_color);
   border-width: var(--ribbon_tag_before_border_width);
-  border-radius: var(--ribbon_tag_before_border_radius);
-}
-[dir=ltr] .tag::before {
-  transform: rotate(-45deg);
+  width: var(--ribbon_tag_before_width);
+  height: var(--ribbon_tag_before_height);
   left: var(--ribbon_tag_before_left);
-}
-[dir=rtl] .tag::before {
-  transform: rotate(45deg);
-  right: var(--ribbon_tag_before_left);
+  border-radius: var(--ribbon_tag_before_border_radius);
 }
 
 .box {
   display: inline-block;
+  border-radius: 3px;
   --ribbon_bg_color: var(--zdt_ribbon_white_bg);
   --ribbon_padding: var(--zd_size5) var(--zd_size8);
-  border-radius: 3px;
 }
 .stamp {
   display: inline-block;
@@ -306,15 +259,15 @@
 }
 .sticker {
   display: block;
-  height: var(--zd_size18);
-  line-height: var(--zd_size11);
-  --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_text_transform: uppercase;
   text-align: center;
   border-width: 1px 0;
   border-style: solid;
   border-color: var(--zdt_ribbon_flag_white_border);
+  height: var(--zd_size18);
   padding: var(--zd_size3) var(--zd_size10);
+  line-height: var(--zd_size11);
+  --ribbon_text_color: var(--zdt_ribbon_white_text);
+  --ribbon_text_transform: uppercase;
 }
 .after,
 .before {
@@ -323,18 +276,12 @@
   bottom: 0;
   width: var(--zd_size10);
 }
-[dir=ltr] .after {
+.after {
   right: calc(var(--zd_size2) * -1);
 }
-[dir=rtl] .after {
-  left: calc(var(--zd_size2) * -1);
-}
-[dir=ltr] .before {
+.before {
   left: calc(var(--zd_size8) * -1);
 }
-[dir=rtl] .before {
-  right: calc(var(--zd_size8) * -1);
-}
 .after::after,
 .after::before,
 .before::after,
@@ -343,15 +290,8 @@
   height: var(--zd_size7);
   width: var(--zd_size7);
   content: '';
-}
-.after::after, .after::before, .before::after, .before::before {
-  background-color: var(--zdt_ribbon_white_bg);
-}
-[dir=ltr] .after::after, [dir=ltr] .after::before, [dir=ltr] .before::after, [dir=ltr] .before::before {
   transform: rotate(45deg);
-}
-[dir=rtl] .after::after, [dir=rtl] .after::before, [dir=rtl] .before::after, [dir=rtl] .before::before {
-  transform: rotate(-45deg);
+  background-color: var(--zdt_ribbon_white_bg);
 }
 .after::after,
 .before::after {
@@ -363,15 +303,10 @@
 }
 .children {
   display: inline-block;
+  margin-right: var(--zd_size4);
   vertical-align: top;
   line-height: 0;
 }
-[dir=ltr] .children {
-  margin-right: var(--zd_size4);
-}
-[dir=rtl] .children {
-  margin-left: var(--zd_size4);
-}
 .childText {
   position: relative;
 }