@zohodesk/dot 1.0.0-test.239 → 1.0.0

package/es/FormAction/FormAction.module.css

@@ -13,70 +13,70 @@
   border-top: solid 1px var(--footerBorder);
 }
 .largeFooter {
-  padding-top: var(--zd_size24);
-  padding-bottom: var(--zd_size24);
+  padding-top: var(--zd_size24) ;
+  padding-bottom: var(--zd_size24) ;
 }
 .mediumFooter {
-  padding-top: var(--zd_size20);
-  padding-bottom: var(--zd_size20);
+  padding-top: var(--zd_size20) ;
+  padding-bottom: var(--zd_size20) ;
 }
 .smallFooter {
-  padding-top: var(--zd_size10);
-  padding-bottom: var(--zd_size10);
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
 }
 
 [dir=ltr] .largePadding {
-  padding-left: var(--zd_size60);
+  padding-left: var(--zd_size60) ;
 }
 
 [dir=rtl] .largePadding {
-  padding-right: var(--zd_size60);
+  padding-right: var(--zd_size60) ;
 }
 [dir=ltr] .mediumPadding {
-  padding-left: var(--zd_size50);
+  padding-left: var(--zd_size50) ;
 }
 [dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50);
+  padding-right: var(--zd_size50) ;
 }
 [dir=ltr] .xmediumPadding {
-  padding-left: var(--zd_size30);
+  padding-left: var(--zd_size30) ;
 }
 [dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30);
+  padding-right: var(--zd_size30) ;
 }
 [dir=ltr] .smallPadding {
-  padding-left: var(--zd_size25);
+  padding-left: var(--zd_size25) ;
 }
 [dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25);
+  padding-right: var(--zd_size25) ;
 }
 [dir=ltr] .xsmallPadding {
-  padding-left: var(--zd_size20);
+  padding-left: var(--zd_size20) ;
 }
 [dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20);
+  padding-right: var(--zd_size20) ;
 }
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
-  margin-right: var(--zd_size15);
+  margin-right: var(--zd_size15) ;
 }
 [dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15);
+  margin-left: var(--zd_size15) ;
 }
 [dir=ltr] .smallFooter .marginRight {
-  margin-right: var(--zd_size12);
+  margin-right: var(--zd_size12) ;
 }
 [dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12);
+  margin-left: var(--zd_size12) ;
 }
 
 [dir=ltr] .marginRight:last-child {
-  margin-right: 0;
+  margin-right: 0 ;
 }
 
 [dir=rtl] .marginRight:last-child {
-  margin-left: 0;
+  margin-left: 0 ;
 }

package/es/FormAction/props/defaultProps.js

@@ -1,4 +1,5 @@
 export const defaultProps = {
   size: 'medium',
-  paddingRightClass: ''
+  paddingRightClass: '',
+  dataSelectorId: 'formAction'
 };

package/es/FormAction/props/propTypes.js

@@ -3,5 +3,6 @@ export const propTypes = {
   children: PropTypes.node,
   paddingLeftSize: PropTypes.oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
   paddingRightClass: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'medium', 'small'])
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  dataSelectorId: PropTypes.string
 };

package/es/FreezeLayer/FreezeLayer.js

@@ -1,127 +1,74 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container } from '@zohodesk/components/lib/Layout';
+import { mergeStyle } from '@zohodesk/components/es/utils/';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import style from './FreezeLayer.module.css';
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import { getDotLibraryConfig } from '../Provider/Config';
-export default class FreezeLayer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isActive: props.isActive,
-      isChildActive: false
-    };
-    this.getNextIndex = getZIndex(this);
-    this.isFreezeLayerEnabled = false;
-  }
-  enableFreeze() {
-    if (!this.isFreezeLayerEnabled) {
-      this.isFreezeLayerEnabled = true;
-      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
-      freezeLayerEnable && freezeLayerEnable();
-    }
-  }
-  disableFreeze() {
-    if (this.isFreezeLayerEnabled) {
-      this.isFreezeLayerEnabled = false;
-      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
-      freezeLayerDisable && freezeLayerDisable();
-    }
-  }
-  componentDidMount() {
-    let {
-      isActive
-    } = this.props;
-    if (isActive) {
-      this.setState({
-        isChildActive: true
-      });
-      this.enableFreeze();
-    }
-  }
-  componentDidUpdate(prevProps) {
-    let {
-      isActive
-    } = this.props;
-    if (isActive != prevProps.isActive) {
-      if (isActive) {
-        this.enableFreeze();
-        this.setState({
-          isActive: true
-        }, () => {
-          this.setState({
-            isChildActive: true
-          });
-        });
-      } else {
-        this.disableFreeze();
-        this.setState({
-          isChildActive: false
-        }, () => {
-          this.setState({
-            isActive: false
-          });
-        });
-      }
-    }
-  }
-  componentWillUnmount() {
-    this.disableFreeze();
-  }
-  render() {
-    let {
-      children,
-      align,
-      childAnimationName,
-      palette,
-      onClick,
-      animationName,
-      zIndex,
-      runOnMount,
-      forwardRef,
-      isSvgMask,
-      customClass,
-      needAutoZindex
-    } = this.props;
-    let {
-      isActive,
-      isChildActive
-    } = this.state;
-    return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: animationName && animationName,
-      isActive: isActive,
-      runOnMount: runOnMount
-    }, /*#__PURE__*/React.createElement("div", {
-      style: isActive && needAutoZindex ? {
-        zIndex: `${this.getNextIndex()}`
-      } : {},
-      className: `
-              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''}
-            `,
-      onClick: onClick ? onClick : null,
-      ref: forwardRef
-    }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: childAnimationName,
-      isActive: isChildActive,
-      enterDelay: palette === 'plain' ? 0 : 300,
-      component: Container,
-      alignBox: "row",
-      align: align,
-      dataId: "reactFreezeLayer"
-    }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: align,
-      dataId: "reactFreezeLayer"
-    }, children))));
-  }
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import cssJSLogic from './css/cssJSLogic';
+import useFreezeLayer from './useFreezeLayer';
+import style from './css/FreezeLayer.module.css';
+export default function FreezeLayer(props) {
+  let {
+    isActive: propsActive,
+    children,
+    align,
+    childAnimationName,
+    palette,
+    onClick,
+    animationName,
+    runOnMount,
+    forwardRef,
+    isSvgMask,
+    needAutoZindex,
+    customStyle
+  } = props;
+  const finalStyle = mergeStyle(style, customStyle);
+  const {
+    freezeClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  const getNextIndex = useZIndex();
+  const {
+    isActive,
+    isChildActive,
+    handleClick
+  } = useFreezeLayer({
+    isActive: propsActive,
+    onClick
+  });
+  return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: animationName && animationName,
+    isActive: isActive,
+    runOnMount: runOnMount
+  }, /*#__PURE__*/React.createElement("div", {
+    style: isActive && needAutoZindex ? {
+      zIndex: `${getNextIndex()}`
+    } : {},
+    className: freezeClass,
+    onClick: handleClick,
+    "data-drag-parent": true,
+    ref: forwardRef
+  }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: childAnimationName,
+    isActive: isChildActive,
+    enterDelay: palette === 'plain' ? 0 : 300,
+    component: Container,
+    alignBox: "row",
+    align: align,
+    dataId: "reactFreezeLayer"
+  }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: align,
+    dataId: "reactFreezeLayer"
+  }, children))));
 }
 FreezeLayer.propTypes = propTypes;
-FreezeLayer.defaultProps = defaultProps;
-if (false) {
-  FreezeLayer.docs = {
-    componentGroup: 'Atom',
-    folderName: 'General'
-  };
-}
+FreezeLayer.defaultProps = defaultProps; // if (__DOCS__) {
+//   FreezeLayer.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'General'
+//   };
+// }

package/es/FreezeLayer/{FreezeLayer.module.css → css/FreezeLayer.module.css}

@@ -1,14 +1,14 @@
 .container {
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   position: absolute;
   overflow: hidden;
 }[dir=ltr] .container {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }[dir=rtl] .container {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 .default {
   background-color: var(--zdt_freezelayer_default_bg);

package/es/FreezeLayer/css/cssJSLogic.js

@@ -0,0 +1,23 @@
+import { compileClassNames } from '@zohodesk/components/es/utils';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  let {
+    zIndex,
+    palette,
+    isSvgMask,
+    customClass
+  } = props;
+  let zIndexClass = `index${zIndex}`;
+  let freezeClass = compileClassNames({
+    [style.container]: true,
+    [customClass]: !!customClass,
+    [style[zIndexClass]]: !!zIndex,
+    [style[palette]]: !isSvgMask && !!palette
+  });
+  return {
+    freezeClass
+  };
+}

package/es/FreezeLayer/index.js

@@ -0,0 +1,2 @@
+export { default as FreezeLayer } from './FreezeLayer';
+export { default as FreezeLayerPropTypes } from './props/propTypes';

package/es/FreezeLayer/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   zIndex: '5',
   isSvgMask: false,
   customClass: '',
+  customStyle: {},
   needAutoZindex: true
 };

package/es/FreezeLayer/props/propTypes.js

@@ -13,5 +13,7 @@ export const propTypes = {
   onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
   runOnMount: PropTypes.bool,
+  customStyle: PropTypes.object,
   zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
-};
+};
+export default propTypes;

package/es/FreezeLayer/useFreezeLayer.js

@@ -0,0 +1,55 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { isTextSelected, cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
+import { getDotLibraryConfig } from '../Provider/Config';
+export default function useFreezeLayer(_ref) {
+  let {
+    isActive: propsActive,
+    onClick
+  } = _ref;
+  const [isActive, setActive] = useState(propsActive);
+  const [isChildActive, setChildActive] = useState(false);
+  let isFreezeLayerEnabled = useRef(false);
+
+  function handleClick(e) {
+    if (onClick && !isTextSelected()) {
+      onClick(e);
+    }
+  }
+
+  function enableFreeze() {
+    if (!isFreezeLayerEnabled.current) {
+      isFreezeLayerEnabled.current = true;
+      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
+      freezeLayerEnable && freezeLayerEnable();
+    }
+  }
+
+  function disableFreeze() {
+    if (isFreezeLayerEnabled.current) {
+      isFreezeLayerEnabled.current = false;
+      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
+      freezeLayerDisable && freezeLayerDisable();
+    }
+  }
+
+  useEffect(() => {
+    if (propsActive) {
+      enableFreeze();
+      setActive(true);
+      setTimeout(() => setChildActive(true));
+    } else {
+      disableFreeze();
+      setChildActive(false);
+      setTimeout(() => setActive(false));
+    }
+
+    return () => {
+      disableFreeze();
+    };
+  }, [propsActive]);
+  return {
+    isActive,
+    isChildActive,
+    handleClick
+  };
+}

package/es/Hooks/Dragger/css/Dragger.module.css

@@ -0,0 +1,3 @@
+.dragCursor{
+    cursor: move !important;
+}

package/es/Hooks/Dragger/props/defaultProps.js

@@ -0,0 +1,10 @@
+export default {
+  isActive: false,
+  childRef: null,
+  boundaryLimit: {
+    top: 0,
+    left: 50,
+    right: 50,
+    bottom: 50
+  }
+};

package/es/Hooks/Dragger/props/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export default {
+  isActive: PropTypes.bool,
+  childRef: PropTypes.object,
+  boundaryLimit: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    bottom: PropTypes.number
+  })
+};

package/es/Hooks/Dragger/useDragger.js

@@ -0,0 +1,121 @@
+//Hooks from React
+import { useEffect, useRef, useCallback } from 'react'; //CustomFunction
+
+import { DragPosCalc } from './utils/DraggerUtil'; //GlobalConfig
+
+import { getDotLibraryConfig } from '../../Provider/Config'; //Props
+
+import defaultProps from './props/defaultProps';
+import propTypes from './props/propTypes'; //CSS
+
+import style from './css/Dragger.module.css';
+export default function useDragger(_ref) {
+  let {
+    isActive,
+    ChildRef,
+    boundaryLimit = getDotLibraryConfig('boundaryLimit')
+  } = _ref;
+  const draggableEle = useRef(null);
+  const parentEle = useRef(null);
+  const offset = useRef({
+    x: 0,
+    y: 0
+  });
+  const draggable = useRef(false);
+  useEffect(() => {
+    parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || getDotLibraryConfig('draggerBoundary') || document.body;
+  }, []); //did Mount
+  //calculateDragPosition --> To sperate Dom action
+
+  const calculateDragPosition = useCallback((x, y) => {
+    if (parentEle.current && draggableEle.current) {
+      return DragPosCalc({
+        x,
+        y,
+        dragWrapper: parentEle.current,
+        element: draggableEle.current,
+        boundaryLimit
+      });
+    } else {
+      return {
+        x,
+        y
+      };
+    }
+  }, []);
+  const elementDrag = useCallback(e => {
+    e = e || window.event;
+    e.preventDefault();
+
+    if (draggable.current) {
+      const left = offset.current.x + e.clientX;
+      const top = offset.current.y + e.clientY;
+      const {
+        x,
+        y
+      } = calculateDragPosition(left, top);
+      draggableEle.current.style.left = x + 'px';
+      draggableEle.current.style.top = y + 'px';
+    }
+  }, [calculateDragPosition]);
+  const closeDragElement = useCallback(() => {
+    document.removeEventListener('mouseup', closeDragElement);
+    document.removeEventListener('mousemove', elementDrag);
+  }, []);
+  const dragMouseDown = useCallback(e => {
+    e = e || window.event;
+    e.preventDefault();
+    const draggableEleRect = draggableEle.current.getBoundingClientRect();
+    const style = draggableEle.current.style;
+    const {
+      width
+    } = draggableEleRect;
+    const parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
+      left: 0,
+      top: 0
+    };
+    const relativeRect = {
+      left: draggableEleRect.left - parentEleRect.left,
+      top: draggableEleRect.top - parentEleRect.top
+    };
+    const {
+      top,
+      left
+    } = relativeRect;
+    style.top = `${top}px`;
+    style.left = `${left}px`;
+    style.width = `${width}px`;
+    style.position = 'fixed';
+    offset.current.x = draggableEle.current.offsetLeft - e.clientX;
+    offset.current.y = draggableEle.current.offsetTop - e.clientY;
+    draggable.current = true;
+    document.addEventListener('mouseup', closeDragElement);
+    document.addEventListener('mousemove', elementDrag);
+  }, []);
+  const removeListener = useCallback(draggableEle => {
+    let dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
+
+    if (dragController) {
+      dragController.removeEventListener('mousedown', dragMouseDown);
+      draggableEle.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    if (isActive) {
+      draggableEle.current = ChildRef.current.closest('[data-drag-container=true]');
+      let dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
+      dragController && dragController.addEventListener('mousedown', dragMouseDown);
+      dragController && dragController.classList.add(style.dragCursor);
+    } else {
+      removeListener(draggableEle);
+    }
+
+    return () => {
+      removeListener(draggableEle);
+    };
+  }, [ChildRef.current, isActive]);
+  return null;
+} //Props
+
+useDragger.propTypes = propTypes;
+useDragger.defaultProps = defaultProps;

package/es/Hooks/Dragger/utils/DraggerUtil.js

@@ -0,0 +1,27 @@
+export function DragPosCalc(_ref) {
+  let {
+    x,
+    y,
+    element,
+    dragWrapper,
+    boundaryLimit
+  } = _ref;
+  let {
+    top,
+    left,
+    right,
+    bottom
+  } = boundaryLimit;
+  const offsetWidth = element ? element.offsetWidth : 0;
+  const offsetHeight = element ? element.offsetHeight : 0;
+  const topOffset = top ? offsetHeight - top : 0;
+  const leftOffset = left ? offsetWidth - left : 0;
+  const rightOffset = right ? offsetWidth - right : 0;
+  const bottomOffset = bottom ? offsetHeight - bottom : 0;
+  x = Math.max(-leftOffset, Math.min(x, dragWrapper.offsetWidth - element.offsetWidth + rightOffset));
+  y = Math.max(-topOffset, Math.min(y, dragWrapper.offsetHeight - element.offsetHeight + bottomOffset));
+  return {
+    x,
+    y
+  };
+}