@zohodesk/dot 1.0.0-beta.26 → 1.0.0-beta.260

package/es/FormAction/props/defaultProps.js

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

package/es/FormAction/props/propTypes.js

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  paddingLeftSize: PropTypes.oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
+  paddingRightClass: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  dataSelectorId: PropTypes.string
+};

package/es/FreezeLayer/FreezeLayer.js

@@ -1,144 +1,87 @@
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { useRef } 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 { Shortcut } from '../utils/KeyboardApi';
-
-var FreezeLayer = function (_Component) {
-  _inherits(FreezeLayer, _Component);
-
-  function FreezeLayer(props) {
-    _classCallCheck(this, FreezeLayer);
-
-    var _this = _possibleConstructorReturn(this, (FreezeLayer.__proto__ || _Object$getPrototypeOf(FreezeLayer)).call(this, props));
-
-    _this.state = { isActive: props.isActive, isChildActive: false };
-    return _this;
-  }
-
-  // componentDidMount(){
-  //   Shortcut && Shortcut.setState(false);
-  // }
-  //
-  // componentWillUnmount(){
-  //   Shortcut && Shortcut.setState(true);
-  // }
-
-  _createClass(FreezeLayer, [{
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(prevProps) {
-      var isActive = this.props.isActive;
-
-      if (isActive != prevProps.isActive) {
-        if (isActive) {
-          Shortcut && Shortcut.setState(false);
-        } else {
-          Shortcut && Shortcut.setState(true);
-        }
-      }
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import cssJSLogic from './css/cssJSLogic';
+import useFreezeLayer from './useFreezeLayer';
+import style from './css/FreezeLayer.module.css';
+import useDragger from '../Hooks/Dragger/useDragger';
+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 dragRef = useRef(null);
+  const {
+    freezeClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  const getNextIndex = useZIndex();
+  const {
+    isActive,
+    isChildActive,
+    handleClick
+  } = useFreezeLayer({
+    isActive: propsActive,
+    onClick
+  });
+  let refEle = forwardRef || dragRef;
+  useDragger({
+    ParentRef: refEle,
+    boundaryLimit: {
+      top: 0,
+      left: 50,
+      right: 50,
+      bottom: 50
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props,
-          children = _props.children,
-          align = _props.align,
-          childAnimationName = _props.childAnimationName,
-          palette = _props.palette,
-          onClick = _props.onClick,
-          animationName = _props.animationName,
-          zIndex = _props.zIndex,
-          isActive = _props.isActive,
-          runOnMount = _props.runOnMount,
-          forwardRef = _props.forwardRef,
-          isSvgMask = _props.isSvgMask;
-
-      return React.createElement(
-        VelocityAnimationGroup,
-        {
-          name: animationName && animationName,
-          isActive: isActive,
-          runOnMount: runOnMount
-        },
-        React.createElement(
-          'div',
-          {
-            className: '\n              ' + style.container + ' ' + style['index' + zIndex] + '  ' + (!isSvgMask ? style[palette] : '') + '\n            ',
-            onClick: onClick ? onClick : null,
-            ref: forwardRef
-          },
-          children && React.createElement(
-            React.Fragment,
-            null,
-            childAnimationName ? React.createElement(
-              VelocityAnimationGroup,
-              {
-                name: childAnimationName,
-                isActive: true,
-                runOnMount: true,
-                enterDelay: palette === 'plain' ? 0 : 300,
-                component: Container,
-                alignBox: 'row',
-                align: align,
-                dataId: 'reactFreezeLayer'
-              },
-              children
-            ) : isSvgMask ? React.createElement(
-              React.Fragment,
-              null,
-              children
-            ) : React.createElement(
-              Container,
-              {
-                alignBox: 'row',
-                align: align,
-                dataId: 'reactFreezeLayer'
-              },
-              children
-            )
-          )
-        )
-      );
-    }
-  }]);
-
-  return FreezeLayer;
-}(Component);
-
-export default FreezeLayer;
-
-
-var animationValues = ['fade', 'shrink', 'expand', 'slideRight', 'slideDown', 'flyDown'];
-
-FreezeLayer.propTypes = {
-  align: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
-  animationName: PropTypes.oneOf(animationValues),
-  childAnimationName: PropTypes.oneOf(animationValues),
-  children: PropTypes.node,
-  forwardRef: PropTypes.object,
-  isActive: PropTypes.bool,
-  onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
-  runOnMount: PropTypes.bool,
-  zIndex: PropTypes.oneOf(['3', '5', '7', '10']),
-  isSvgMask: PropTypes.bool
-};
-FreezeLayer.defaultProps = {
-  isActive: false,
-  palette: 'default',
-  zIndex: '5',
-  isSvgMask: false
-};
+  });
+  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,
+    ref: refEle
+  }, 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'
-  };
-}
+// if (__DOCS__) {
+//   FreezeLayer.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'General'
+//   };
+// }

package/es/FreezeLayer/css/FreezeLayer.module.css

@@ -0,0 +1,42 @@
+.container {
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  overflow: hidden;
+}[dir=ltr] .container {
+  left: 0;
+  right: 0;
+}[dir=rtl] .container {
+  right: 0;
+  left: 0;
+}
+.default {
+  background-color: var(--zdt_freezelayer_default_bg);
+}
+.dark {
+  background-color: var(--zdt_freezelayer_dark_bg);
+}
+.darkLight {
+  background-color: var(--zdt_freezelayer_darklight_bg);
+}
+.plain {
+  background-color: var(--zdt_freezelayer_plain_bg);
+}
+.snow {
+  background-color: var(--zdt_freezelayer_snow_bg);
+}
+.index3 {
+  z-index: 3;
+}
+.index5 {
+  z-index: 5;
+}
+.index7 {
+  z-index: 7;
+}
+.index10 {
+  z-index: 10;
+}
+.delay {
+  transition-delay: var(--zd_transition2);
+}

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

@@ -0,0 +1,9 @@
+export const defaultProps = {
+  isActive: false,
+  palette: 'default',
+  zIndex: '5',
+  isSvgMask: false,
+  customClass: '',
+  customStyle: {},
+  needAutoZindex: true
+};

package/es/FreezeLayer/props/propTypes.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+let animationValues = ['fade', 'shrink', 'expand', 'slideRight', 'slideDown', 'flyDown'];
+export const propTypes = {
+  align: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
+  animationName: PropTypes.oneOf(animationValues),
+  childAnimationName: PropTypes.oneOf(animationValues),
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  forwardRef: PropTypes.object,
+  isActive: PropTypes.bool,
+  isSvgMask: PropTypes.bool,
+  needAutoZindex: PropTypes.bool,
+  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,50 @@
+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/useDragger.js

@@ -0,0 +1,82 @@
+import { useEffect, useRef } from 'react';
+import { getDotLibraryConfig } from '../../Provider/Config';
+import { elementFinder, DragPosCalc } from './utils/DraggerUtil';
+import style from './css/Dragger.module.css';
+export default function useDragger(_ref) {
+  let {
+    ParentRef,
+    boundaryLimit = getDotLibraryConfig('boundaryLimit')
+  } = _ref;
+  let draggableEle = useRef(null); //To set the Draggable Element
+  let parentEle = useRef(null); // To set the Parent Boundary Element
+  let offset = useRef({
+    x: 0,
+    y: 0
+  }); //To set the x and y Positions
+  let draggable = useRef(false); // To get track of draggable
+
+  useEffect(() => {
+    parentEle.current = ParentRef.current || getDotLibraryConfig('draggerBoundary') || document.body;
+  }, [ParentRef.current]);
+  const elementDrag = e => {
+    e = e || window.event;
+    e.preventDefault();
+    if (draggable.current) {
+      const left = offset.current.x + e.clientX;
+      const top = offset.current.y + e.clientY;
+      if (parentEle.current) {
+        const calcValue = DragPosCalc({
+          x: left,
+          y: top,
+          dragWrapper: parentEle.current,
+          element: draggableEle.current,
+          boundaryLimit
+        });
+        draggableEle.current.style.left = calcValue.x + 'px';
+        draggableEle.current.style.top = calcValue.y + 'px';
+      } else {
+        draggableEle.current.style.left = left + 'px';
+        draggableEle.current.style.top = top + 'px';
+      }
+    }
+  };
+  const closeDragElement = () => {
+    document.removeEventListener('mouseup', closeDragElement);
+    document.removeEventListener('mousemove', elementDrag);
+  };
+  const dragMouseDown = e => {
+    //Initial position
+    requestAnimationFrame(() => {
+      let draggableEleRect = draggableEle.current.getBoundingClientRect();
+      let parentEleRect = parentEle.current.getBoundingClientRect();
+      const relativeRect = {
+        left: draggableEleRect.left - parentEleRect.left,
+        top: draggableEleRect.top - parentEleRect.top
+      };
+      e = e || window.event;
+      e.preventDefault();
+      draggableEle.current.style.top = relativeRect.top + 'px';
+      draggableEle.current.style.left = relativeRect.left + 'px';
+      draggableEle.current.style.width = draggableEleRect.width + 'px';
+      draggableEle.current.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);
+    });
+  };
+  useEffect(() => {
+    elementFinder(parentEle.current, '[data-drag-container=true]').then(draggableElement => {
+      draggableEle.current = draggableElement;
+      let dragController = draggableEle.current && draggableEle.current.querySelector('[data-drag-hook=true]');
+      // ? draggableEle.current.querySelector("[data-drag-hook=true]")
+      // : draggableEle.current;
+      dragController && dragController.addEventListener('mousedown', dragMouseDown);
+      dragController && dragController.classList.add(style.dragCursor);
+    });
+  }, [parentEle.current]);
+}
+
+//data-drag-container =>  To Mention Draggable Element
+//data-drag-hook =>To Mention Draggable target element

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

@@ -0,0 +1,66 @@
+export function DragPosCalc(_ref) {
+  let {
+    x,
+    y,
+    element,
+    dragWrapper,
+    boundaryLimit
+  } = _ref;
+  //percent = 50%
+  // const percentobj = { top: 0, left: 10, right: 2, bottom: 90 };
+  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;
+  if (x < -leftOffset) {
+    //LEFT
+    x = -leftOffset;
+  }
+  if (x > dragWrapper.offsetWidth - element.offsetWidth + rightOffset) {
+    //RIGHT
+    x = dragWrapper.offsetWidth - element.offsetWidth + rightOffset;
+  }
+  if (y < -topOffset) {
+    //TOP
+    y = -topOffset;
+  }
+  if (y > dragWrapper.offsetHeight - element.offsetHeight + bottomOffset) {
+    //BOTTOM
+    y = dragWrapper.offsetHeight - element.offsetHeight + bottomOffset;
+  }
+  return {
+    x,
+    y
+  };
+}
+
+// export const elementFinder = async (Parent, selector) => {
+//   while (Parent && Parent.querySelector(selector) === null) {
+//     await new Promise((resolve) => requestAnimationFrame(resolve));
+//   }
+//   return Parent && Parent.querySelector(selector);
+// };
+
+export const elementFinder = (Parent, selector) => {
+  return new Promise(resolve => {
+    const observer = new MutationObserver(mutations => {
+      const element = Parent.querySelector(selector);
+      if (element) {
+        observer.disconnect();
+        resolve(element);
+      }
+    });
+    observer.observe(Parent, {
+      childList: true,
+      subtree: true
+    });
+  });
+};