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

package/es/MultiSelect/MultiSelect.module.css

@@ -15,9 +15,9 @@
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
+  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
@@ -52,16 +52,16 @@
 }
 
 .container.xmedium {
-  min-height: var(--zd_size30);
   padding-bottom: var(--zd_size3);
+  min-height: var(--zd_size30);
 }
 
 .delete {
-  font: inherit;
   padding: var(--zd_size2) var(--zd_size6);
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
+  font: inherit;
 }
 .delete,
 .defaultDelete {
@@ -91,22 +91,14 @@
   max-width: 100%;
 }
 
-[dir=ltr] .container.xmedium .tag {
+.container.xmedium .tag {
   margin: var(--zd_size2) var(--zd_size10) 0 0;
 }
 
-[dir=rtl] .container.xmedium .tag {
-  margin: var(--zd_size2) 0 0 var(--zd_size10);
-}
-
-[dir=ltr] .container.medium .tag {
+.container.medium .tag {
   margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
 
-[dir=rtl] .container.medium .tag {
-  margin: var(--zd_size5) 0 0 var(--zd_size10);
-}
-
 .box {
   background: var(--zdt_multiselect_box_bg);
 }
@@ -142,10 +134,8 @@
 }
 .dark,
 .darkBox {
-  color: var(--zdt_multiselect_darkmsg_text);
-}
-.dark, .darkBox {
   background: var(--zdt_multiselect_darkmsg_bg);
+  color: var(--zdt_multiselect_darkmsg_text);
 }
 
 .hide {
@@ -170,13 +160,8 @@
 .custmInputWrapper {
   position: absolute;
   top: 0;
-  width: 100%;
-}
-[dir=ltr] .custmInputWrapper {
   left: 0;
-}
-[dir=rtl] .custmInputWrapper {
-  right: 0;
+  width: 100%;
 }
 .title {
   margin-bottom: var(--zd_size6);
@@ -190,9 +175,6 @@
 .iconContainer {
   padding-top: var(--zd_size3)
 }
-[dir=ltr] .clearIconSpace {
+.clearIconSpace {
   padding-right: var(--zd_size37)
 }
-[dir=rtl] .clearIconSpace {
-  padding-left: var(--zd_size37)
-}

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,9 @@
 .tag {
   max-width: 100%;
 }
-[dir=ltr] .xmedium {
+.xmedium {
   margin: 0 var(--zd_size10) var(--zd_size2) 0;
 }
-[dir=rtl] .xmedium {
-  margin: 0 0 var(--zd_size2) var(--zd_size10);
-}
-[dir=ltr] .medium {
+.medium {
   margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
-[dir=rtl] .medium {
-  margin: var(--zd_size5) 0 0 var(--zd_size10);
-}

package/es/PopOver/PopOver.module.css

@@ -3,6 +3,6 @@
   background-color: var(--dot_bg_white);
 }
 .target {
-  composes: offSelection from '../common/common.module.css';
   cursor: pointer;
+  composes: offSelection from '../common/common.module.css';
 }

package/es/Popup/Popup.js

@@ -362,8 +362,8 @@ const Popup = function (Component, group = 'global', needResizeHandling = true,
 
           if (!isDropBoxChild && !isTargetChild // && isPopupMassUpdateChild
           ) {
-              needPrevent = true;
-            }
+            needPrevent = true;
+          }
         }
       }
 

package/es/Radio/Radio.module.css

@@ -7,10 +7,7 @@
   --radio_stroke_color: var(--zdt_radio_default_stroke);
   --radio_fill: none;
   --radio_inner_stroke_width: 0;
-}[dir=ltr] .varClass {
   --radio_label_margin: 0 0 0 var(--zd_size6)/*rtl: 0 var(--zd_size6) 0 0*/;
-}[dir=rtl] .varClass {
-  --radio_label_margin: 0 var(--zd_size6) 0 0;
 }
 .container {
   composes: varClass;
@@ -25,9 +22,9 @@
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
-  stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;
+  stroke: var(--radio_stroke_color);
 }
 .radio,
 .centerPath {
@@ -57,13 +54,10 @@
 }
 .centerPath {
   --radio_fill: inherit;
-  stroke-width: var(--radio_inner_stroke_width);
   transform-origin: center;
+  stroke-width: var(--radio_inner_stroke_width);
 }
-[dir=ltr] .checked .centerPath {
-  animation: circleAnimate 0.3s ease forwards;
-}
-[dir=rtl] .checked .centerPath {
+.checked .centerPath {
   animation: circleAnimate 0.3s ease forwards;
 }
 .rdBoxprimary,

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
   };
 })();