@zohodesk/dot 1.0.0-temp-187.24 → 1.0.0-temp-225

package/es/FlipCard/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  size: 'medium',
+  needTitle: true,
+  customProps: {}
+};

package/es/FlipCard/props/propTypes.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  action: PropTypes.string,
+  channel: PropTypes.string,
+  channelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  className: PropTypes.string,
+  customTextClass: PropTypes.string,
+  dataId: PropTypes.string,
+  frontClass: PropTypes.string,
+  icon: PropTypes.string,
+  iconClass: PropTypes.string,
+  iconColor: PropTypes.string,
+  iconSize: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  initial: PropTypes.string,
+  isChecked: PropTypes.bool,
+  isFilledCheckbox: PropTypes.bool,
+  isPaidUser: PropTypes.bool,
+  isPortalUser: PropTypes.bool,
+  name: PropTypes.string,
+  needTitle: PropTypes.bool,
+  noNeedFlip: PropTypes.bool,
+  onChange: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'secondary', 'info', 'default']),
+  size: PropTypes.string,
+  src: PropTypes.string,
+  textPalette: PropTypes.oneOf(['white', 'black']),
+  ticList: PropTypes.string,
+  ticListContainer: PropTypes.string,
+  tourId: PropTypes.string,
+  customProps: PropTypes.shape({
+    CheckBoxProps: PropTypes.object,
+    ChannelIconProps: PropTypes.object,
+    AvatarIconProps: PropTypes.object,
+    AvatarUserProps: PropTypes.object
+  })
+};

package/es/FormAction/FormAction.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "./FormAction.module.css";
+import { Container, Box } from '@zohodesk/components/es/Layout';
+export const LeftSide = props => {
+  props.children;
+};
+export const RightSide = props => {
+  props.children;
+};
+export const Center = props => {
+  props.children;
+};
+export default class FormAction extends React.Component {
+  render() {
+    let {
+      size,
+      children,
+      paddingLeftSize,
+      paddingRightClass,
+      dataSelectorId
+    } = this.props;
+    let leftbuttonGroup = [],
+        rightbuttonGroup = [],
+        centerbuttonGroup = [];
+    React.Children.map(children, child => {
+      if (!child) {
+        return child;
+      } else if (child.type === LeftSide) {
+        leftbuttonGroup = leftbuttonGroup.concat(child.props.children);
+      } else if (child.type === RightSide) {
+        rightbuttonGroup = rightbuttonGroup.concat(child.props.children);
+      } else if (child.type === Center) {
+        centerbuttonGroup = centerbuttonGroup.concat(child.props.children);
+      } else {
+        leftbuttonGroup.push(child);
+      }
+    });
+    let hasLeftChild = leftbuttonGroup.length > 0;
+    let hasRightChild = rightbuttonGroup.length > 0;
+    let hasCenterChild = centerbuttonGroup.length > 0;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.wrapperDiv,
+      "data-selector-id": dataSelectorId
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      isCover: false,
+      align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
+      className: `
+                        ${`${style.footerParent} ${hasCenterChild ? '' : style[`${paddingLeftSize ? paddingLeftSize : size}Padding`]} ${paddingRightClass}`}
+
+                        ${style[`${size}Footer`]}
+                    `
+    }, hasLeftChild ? /*#__PURE__*/React.createElement(Box, {
+      flexible: hasRightChild ? true : false,
+      shrink: !hasRightChild && hasLeftChild ? true : false
+    }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight,
+      key: index
+    }, item)) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/React.createElement(Box, {
+      shrink: hasRightChild && !hasLeftChild ? true : false
+    }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight,
+      key: index
+    }, item)) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/React.createElement(Box, null, centerbuttonGroup.length > 1 ? centerbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight,
+      key: index
+    }, item)) : centerbuttonGroup[0]) : null));
+  }
+
+}
+FormAction.propTypes = propTypes;
+FormAction.defaultProps = defaultProps; // if (__DOCS__) {
+//   FormAction.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/FormAction/FormAction.module.css

@@ -0,0 +1,101 @@
+.varClass {
+  --footerBg: var(--zdt_formAction_bg);
+  --footerBorder: var(--zdt_formAction_border);
+}
+
+.wrapperDiv {
+  position: relative;
+  z-index: 1;
+  composes: varClass;
+}
+
+.footerParent {
+  position: relative;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+  background-color: var(--footerBg);
+  border-top: solid 1px var(--footerBorder);
+}
+
+.largeFooter {
+  padding-top: var(--zd_size24) ;
+  padding-bottom: var(--zd_size24) ;
+}
+
+.mediumFooter {
+  padding-top: var(--zd_size20) ;
+  padding-bottom: var(--zd_size20) ;
+}
+
+.smallFooter {
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
+}
+
+[dir=ltr] .largePadding {
+  padding-left: var(--zd_size60) ;
+}
+
+[dir=rtl] .largePadding {
+  padding-right: var(--zd_size60) ;
+}
+
+[dir=ltr] .mediumPadding {
+  padding-left: var(--zd_size50) ;
+}
+
+[dir=rtl] .mediumPadding {
+  padding-right: var(--zd_size50) ;
+}
+
+[dir=ltr] .xmediumPadding {
+  padding-left: var(--zd_size30) ;
+}
+
+[dir=rtl] .xmediumPadding {
+  padding-right: var(--zd_size30) ;
+}
+
+[dir=ltr] .smallPadding {
+  padding-left: var(--zd_size25) ;
+}
+
+[dir=rtl] .smallPadding {
+  padding-right: var(--zd_size25) ;
+}
+
+[dir=ltr] .xsmallPadding {
+  padding-left: var(--zd_size20) ;
+}
+
+[dir=rtl] .xsmallPadding {
+  padding-right: var(--zd_size20) ;
+}
+
+.marginRight {
+  composes: dinblk from '~@zohodesk/components/es/common/common.module.css';
+}
+
+[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
+  margin-left: var(--zd_size15) ;
+}
+
+[dir=ltr] .smallFooter .marginRight {
+  margin-right: var(--zd_size12) ;
+}
+
+[dir=rtl] .smallFooter .marginRight {
+  margin-left: var(--zd_size12) ;
+}
+
+[dir=ltr] .marginRight:last-child {
+  margin-right: 0 ;
+}
+
+[dir=rtl] .marginRight:last-child {
+  margin-left: 0 ;
+}

package/es/FormAction/__tests__/FormAction.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormAction from "../FormAction";
+describe('FormAction', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FormAction, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/FormAction/__tests__/__snapshots__/FormAction.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormAction rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapperDiv"
+    data-selector-id="formAction"
+  >
+    <div
+      class="footerParent mediumPadding 
+
+                        mediumFooter
+                     flex rowdir"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    />
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { Container } from '@zohodesk/components/es/Layout';
+import { mergeStyle } from '@zohodesk/utils';
+import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
+import cssJSLogic from "./css/cssJSLogic";
+import useFreezeLayer from "../Hooks/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,
+    onAnimateEnter,
+    postAnimateStyles,
+    onAnimateExit
+  } = 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",
+    onEnterComplete: onAnimateEnter,
+    postEnterStyles: postAnimateStyles,
+    onExitComplete: onAnimateExit
+  }, 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 (__DOCS__) {
+//   FreezeLayer.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'General'
+//   };
+// }

package/es/FreezeLayer/__tests__/FreezeLayer.spec.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FreezeLayer from "../FreezeLayer";
+describe('FreezeLayer', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FreezeLayer, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering isActive is true', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(FreezeLayer, {
+      isActive: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/FreezeLayer/__tests__/__snapshots__/FreezeLayer.spec.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FreezeLayer rendering isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    class="container index5 default"
+    data-drag-parent="true"
+    style="z-index: 4;"
+  />
+</DocumentFragment>
+`;
+
+exports[`FreezeLayer rendering the defult props 1`] = `<DocumentFragment />`;

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/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,22 @@
+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']),
+  onAnimateEnter: PropTypes.func,
+  postAnimateStyles: PropTypes.object,
+  onAnimateExit: PropTypes.func
+};
+export default propTypes;

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,143 @@
+//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);
+  const dragStarted = useRef(false);
+  const initialMouse = useRef({
+    x: 0,
+    y: 0
+  });
+  const DRAG_DISTANCE_THRESHOLD = 4;
+  useEffect(() => {
+    if (isActive) {
+      parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || getDotLibraryConfig('draggerBoundary') || document.body;
+    }
+  }, [isActive]); //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) {
+      return;
+    }
+
+    if (!dragStarted.current) {
+      const dx = Math.abs(e.clientX - initialMouse.current.x);
+      const dy = Math.abs(e.clientY - initialMouse.current.y);
+
+      if (dx < DRAG_DISTANCE_THRESHOLD && dy < DRAG_DISTANCE_THRESHOLD) {
+        return;
+      }
+
+      const draggableEleRect = draggableEle.current.getBoundingClientRect();
+      const parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
+        left: 0,
+        top: 0
+      };
+      offset.current.x = draggableEleRect.left - e.clientX;
+      offset.current.y = draggableEleRect.top - e.clientY;
+      const relativeRect = {
+        left: draggableEleRect.left - parentEleRect.left,
+        top: draggableEleRect.top - parentEleRect.top
+      };
+      const styleRef = draggableEle.current.style;
+      styleRef.top = `${relativeRect.top}px`;
+      styleRef.left = `${relativeRect.left}px`;
+      styleRef.width = `${draggableEleRect.width}px`;
+      styleRef.position = "fixed";
+      styleRef.bottom = "initial";
+      styleRef.right = "initial";
+      dragStarted.current = true;
+    }
+
+    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);
+    dragStarted.current = false;
+    draggable.current = false;
+  }, []);
+  const dragMouseDown = useCallback(e => {
+    e = e || window.event; // e.preventDefault();
+
+    initialMouse.current = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    dragStarted.current = false;
+    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;