@zohodesk/components 1.2.9 → 1.2.11

package/es/v1/PopOver/PopOver.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useRef } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
 import { PopOver_defaultProps, PopOverContainer_defaultProps } from '../../PopOver/props/defaultProps';
 import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes } from '../../PopOver/props/propTypes';
 import Popup from '../Popup/Popup';
@@ -6,55 +7,60 @@ import { Box } from '../Layout';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import style from '../../PopOver/PopOver.module.css';
 
-class PopOver extends React.Component {
-  constructor(props) {
-    super(props);
-    this.popOverTargetRef = this.popOverTargetRef.bind(this);
-    this.popOverContainerRef = this.popOverContainerRef.bind(this);
-    this.togglePopup = this.togglePopup.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    let {
-      isPopupOpen,
-      onPopupOpen,
-      onPopupClose
-    } = this.props;
-
-    if (prevProps.isPopupOpen !== isPopupOpen) {
-      isPopupOpen && onPopupOpen && onPopupOpen();
-      !isPopupOpen && onPopupClose && onPopupClose();
-    }
-  }
-
-  popOverTargetRef(el) {
-    this.popOverTarget = el;
-    let {
-      getTargetRef
-    } = this.props;
+function PopOver(props) {
+  let {
+    children,
+    isPopupOpen,
+    removeClose,
+    right,
+    left,
+    top,
+    bottom,
+    arrowRight,
+    arrowLeft,
+    arrowTop,
+    arrowBottom,
+    isAnimate,
+    isArrow,
+    arrowPosition,
+    position,
+    size,
+    onClick,
+    isPopupReady,
+    getTargetRef,
+    getContainerRef,
+    boxPosition,
+    onPopupOpen,
+    onPopupClose
+  } = props;
+  const popOverTarget = useRef(null);
+  const popOverContainer = useRef(null);
+
+  const popOverTargetRef = el => {
+    popOverTarget.current = el;
     getTargetRef(el);
-  }
+  };
 
-  popOverContainerRef(el) {
-    this.popOverContainer = el;
-    let {
-      getContainerRef
-    } = this.props;
+  const popOverContainerRef = el => {
+    popOverContainer.current = el;
     getContainerRef(el);
-  }
+  };
 
-  togglePopup(e) {
+  const togglePopup = e => {
     let {
-      togglePopup,
-      boxPosition
-    } = this.props;
+      togglePopup
+    } = props;
     togglePopup(e, boxPosition);
-  }
-
-  render() {
-    let {
-      children,
+  };
+
+  useEffectCallOnlyAfterState(() => {
+    isPopupOpen && onPopupOpen && onPopupOpen();
+    !isPopupOpen && onPopupClose && onPopupClose();
+  }, [isPopupOpen]);
+  let childrens = React.Children.map(children, (child, index) => {
+    let element = index === 1 ? /*#__PURE__*/React.cloneElement(child, {
       isPopupOpen,
+      togglePopup: togglePopup,
       removeClose,
       right,
       left,
@@ -64,148 +70,107 @@ class PopOver extends React.Component {
       arrowLeft,
       arrowTop,
       arrowBottom,
+      boxPosition: position,
       isAnimate,
       isArrow,
       arrowPosition,
-      position,
       size,
       onClick,
+      getRef: popOverContainerRef,
       isPopupReady
-    } = this.props;
-    let childrens = React.Children.map(children, (child, index) => {
-      let element = index === 1 ? /*#__PURE__*/React.cloneElement(child, {
-        isPopupOpen,
-        togglePopup: this.togglePopup,
-        removeClose,
-        right,
-        left,
-        top,
-        bottom,
-        arrowRight,
-        arrowLeft,
-        arrowTop,
-        arrowBottom,
-        boxPosition: position,
-        isAnimate,
-        isArrow,
-        arrowPosition,
-        size,
-        onClick,
-        getRef: this.popOverContainerRef,
-        isPopupReady
-      }) : /*#__PURE__*/React.cloneElement(child, {
-        isPopupOpen,
-        togglePopup: this.togglePopup,
-        removeClose,
-        getRef: this.popOverTargetRef
-      });
-      return element;
+    }) : /*#__PURE__*/React.cloneElement(child, {
+      isPopupOpen,
+      togglePopup: togglePopup,
+      removeClose,
+      getRef: popOverTargetRef
     });
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.popup
-    }, childrens);
-  }
-
+    return element;
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.popup
+  }, childrens);
 }
 
 PopOver.defaultProps = PopOver_defaultProps;
 PopOver.propTypes = PopOver_propTypes;
 export default Popup(PopOver);
-export class PopOverTarget extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getRef = this.getRef.bind(this);
-  }
+export function PopOverTarget(props) {
+  let {
+    children,
+    togglePopup
+  } = props;
 
-  getRef(el) {
+  const getRef = el => {
     let {
       getRef
-    } = this.props;
+    } = props;
     getRef(el);
-  }
-
-  render() {
-    let {
-      children,
-      togglePopup
-    } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: style.target,
-      onClick: togglePopup,
-      ref: this.getRef
-    }, children);
-  }
+  };
 
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.target,
+    onClick: togglePopup,
+    ref: getRef
+  }, children);
 }
 PopOverTarget.propTypes = PopOverTarget_propTypes;
-export class PopOverContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-    this.getRef = this.getRef.bind(this);
-  }
-
-  getRef(el) {
+export function PopOverContainer(props) {
+  let {
+    children,
+    isPopupOpen,
+    isAnimate,
+    isArrow,
+    size,
+    arrowPosition,
+    boxPosition,
+    right,
+    left,
+    top,
+    bottom,
+    arrowRight,
+    arrowLeft,
+    arrowTop,
+    arrowBottom,
+    animationStyle,
+    onClick,
+    removeClose
+  } = props;
+
+  const getRef = el => {
     let {
       getRef
-    } = this.props;
+    } = props;
     getRef && getRef(el);
-  }
+  };
 
-  handleClick(e) {
-    let {
-      onClick,
-      removeClose
-    } = this.props;
+  const handleClick = e => {
     removeClose && removeClose(e);
     onClick && onClick();
-  }
-
-  render() {
-    let {
-      children,
-      isPopupOpen,
-      isAnimate,
-      isArrow,
-      size,
-      arrowPosition,
-      boxPosition,
-      right,
-      left,
-      top,
-      bottom,
-      arrowRight,
-      arrowLeft,
-      arrowTop,
-      arrowBottom,
-      animationStyle,
-      getRef
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-      animationStyle: animationStyle,
-      arrowBottom: arrowBottom,
-      arrowLeft: arrowLeft,
-      arrowPosition: arrowPosition,
-      arrowRight: arrowRight,
-      arrowTop: arrowTop,
-      bottom: bottom,
-      boxPosition: boxPosition,
-      getRef: getRef,
-      isActive: isPopupOpen,
-      isAnimate: isAnimate,
-      isArrow: isArrow,
-      left: left,
-      right: right,
-      size: size,
-      top: top,
-      alignBox: "row"
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      shrink: true,
-      scroll: "vertical"
-    }, children));
-  }
-
+  };
+
+  return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+    animationStyle: animationStyle,
+    arrowBottom: arrowBottom,
+    arrowLeft: arrowLeft,
+    arrowPosition: arrowPosition,
+    arrowRight: arrowRight,
+    arrowTop: arrowTop,
+    bottom: bottom,
+    boxPosition: boxPosition,
+    getRef: getRef,
+    isActive: isPopupOpen,
+    isAnimate: isAnimate,
+    isArrow: isArrow,
+    left: left,
+    right: right,
+    size: size,
+    top: top,
+    alignBox: "row"
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    scroll: "vertical"
+  }, children));
 }
 PopOverContainer.defaultProps = PopOverContainer_defaultProps;
 PopOverContainer.propTypes = PopOverContainer_propTypes;

package/es/v1/Popup/Popup.js

@@ -7,7 +7,7 @@ import hoistStatics from 'hoist-non-react-statics';
 /**** Methods ****/
 
 import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from '../../utils/Common.js';
-import viewPort from './viewPort';
+import viewPort from '../../Popup/viewPort';
 import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from '../../Popup/PositionMapping.json';
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
 let lastOpenedGroup = [];

package/es/v1/Provider/AvatarSize.js

@@ -0,0 +1,13 @@
+import style from '../../common/avatarsizes.module.css';
+let styleList = {
+  small: style.small,
+  xsmall: style.xsmall,
+  xxsmall: style.xxsmall,
+  medium: style.medium,
+  xmedium: style.xmedium,
+  large: style.large,
+  xlarge: style.xlarge
+};
+export default function CssProvider(name) {
+  return styleList[name] || '';
+}

package/es/v1/Provider/Config.js

@@ -0,0 +1,18 @@
+let id = {
+  mobileWidth: 640,
+  zindexCounter: 3,
+  idCounter: 0,
+  idPrefix: 'ZD',
+  scrollFetchLimit: 80,
+  isReducedMotion: false,
+  direction: 'ltr',
+  tooltipDebounce: 175,
+  getTooltipContainer: () => {},
+  autoComplete: false
+};
+export function getLibraryConfig(key) {
+  return id[key];
+}
+export function setLibraryConfig(configObj) {
+  id = Object.assign({}, id, configObj);
+}

package/es/v1/Provider/CssProvider.js

@@ -0,0 +1,16 @@
+import style from '../common/common.module.css';
+let styleList = {
+  hide: style.hide,
+  isDisabled: style.disabled,
+  isDisable: style.disable,
+  isBlock: style.blockEvent,
+  isFlexible: style.flexgrow,
+  dotted: style.dotted,
+  vMiddle: style.yMiddle,
+  hMiddle: style.xMiddle,
+  smooth: style.ftsmooth,
+  clamp: style.clamp
+};
+export default function CssProvider(name) {
+  return styleList[name] || '';
+}

package/es/v1/Provider/IdProvider.js

@@ -0,0 +1,66 @@
+import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
+import { getLibraryConfig } from './Config';
+let globalId = getLibraryConfig('idCounter'),
+    deletedIndexes = [],
+    globalPrefix;
+export function setGlobalIdPrefix(value) {
+  globalPrefix = value;
+}
+export function removeGlobalIdPrefix() {
+  globalPrefix = undefined;
+}
+
+function getGlobalIdPrefix() {
+  return globalPrefix;
+}
+
+function setGlobalId(id) {
+  globalId = id;
+}
+
+function getGlobalId() {
+  return globalId;
+}
+
+function setDeletedIndexes(array) {
+  deletedIndexes = array;
+}
+
+function getDeletedIndexes() {
+  return deletedIndexes;
+}
+
+function callback(_ref) {
+  let {
+    globalId,
+    deletedIndexes
+  } = _ref;
+  setGlobalId(globalId);
+  setDeletedIndexes(deletedIndexes);
+}
+
+export function useUniqueId(prefix) {
+  return useNumberGenerator({
+    getGlobalId,
+    prefix,
+    getGlobalPrefix: getGlobalIdPrefix,
+    getDeletedIndexes,
+    callback
+  });
+}
+export function getUniqueId(Component, prefix) {
+  return getNumberGenerators({
+    Component,
+    prefix,
+    getGlobalPrefix: getGlobalIdPrefix,
+    getGlobalId,
+    getDeletedIndexes,
+    callback
+  });
+} // let Provider = {
+//   docs: {
+//     componentGroup: 'Provider',
+//     folderName: 'Functions'
+//   }
+// };
+// export { Provider };

package/es/v1/Provider/LibraryContext.js

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import LibraryContextInit from './LibraryContextInit';
+import { getLibraryConfig } from './Config';
+
+const LibraryContextProvider = _ref => {
+  let {
+    isReducedMotion = getLibraryConfig('isReducedMotion'),
+    direction = getLibraryConfig('direction'),
+    children
+  } = _ref;
+  const [value, setValue] = useState({
+    isReducedMotion,
+    direction
+  });
+
+  function setGlobalContext(key, data) {
+    if (value[key] != data) {
+      setValue({ ...value,
+        [key]: data
+      });
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(LibraryContextInit.Provider, {
+    value: { ...value,
+      setGlobalContext
+    }
+  }, children);
+};
+
+LibraryContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  isReducedMotion: PropTypes.bool,
+  direction: PropTypes.string
+};
+export default LibraryContextProvider;

package/es/v1/Provider/LibraryContextInit.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const LibraryContext = /*#__PURE__*/React.createContext();
+export default LibraryContext;

package/es/v1/Provider/NumberGenerator/NumberGenerator.js

@@ -0,0 +1,136 @@
+import React, { useRef, useEffect } from 'react';
+export function addGlobalId(globalId) {
+  if (Number.isSafeInteger(Number(globalId)) && Number.isSafeInteger(Number(globalId) + 1)) {
+    globalId = Number(globalId) + 1;
+  } else {
+    globalId = `${globalId}1`;
+  }
+
+  return globalId;
+}
+
+function decreaseGlobalId(number, globalId) {
+  if (`${number}` == `${globalId}`) {
+    if (Number.isSafeInteger(Number(globalId)) && Number.isSafeInteger(Number(globalId) - 1)) {
+      globalId = Number(globalId) - 1;
+    } else {
+      globalId = `${globalId}`;
+      globalId = globalId.substring(0, globalId.length - 1);
+    }
+
+    return {
+      isDeleted: true,
+      globalId
+    };
+  }
+
+  return {
+    isDeleted: false,
+    globalId
+  };
+}
+
+export function decreaseGlobalIds(numbers, deletedIndexes, globalId) {
+  deletedIndexes = [...deletedIndexes];
+  [...numbers].reverse().map(number => {
+    let result = decreaseGlobalId(number, globalId);
+    globalId = result.globalId;
+    !result.isDeleted && deletedIndexes.push(number);
+  });
+
+  for (; deletedIndexes.indexOf(globalId) != -1;) {
+    let presentHighValue = globalId;
+    let result = decreaseGlobalId(globalId, globalId);
+    globalId = result.globalId;
+    deletedIndexes = deletedIndexes.filter(ele => `${ele}` != `${presentHighValue}`);
+  }
+
+  return {
+    globalId,
+    deletedIndexes
+  };
+}
+export function useNumberGenerator(_ref) {
+  let {
+    getGlobalId,
+    prefix,
+    getGlobalPrefix,
+    getDeletedIndexes,
+    callback
+  } = _ref;
+  let presentValues = useRef([]),
+      presentIndex = useRef(0);
+  prefix = typeof prefix === 'undefined' ? '' : `${prefix}_`;
+  let globalPrefix = typeof getGlobalPrefix() === 'undefined' ? '' : `${getGlobalPrefix()}_`;
+
+  function getNextId() {
+    presentIndex.current = presentIndex.current + 1;
+    let currentIndex = presentIndex.current;
+    let isValuePresent = typeof presentValues.current[currentIndex] !== 'undefined';
+    let result = isValuePresent ? presentValues.current[currentIndex] : presentValues.current[currentIndex] = addGlobalId(getGlobalId());
+    !isValuePresent && callback({
+      globalId: result,
+      deletedIndexes: getDeletedIndexes()
+    });
+    return `${globalPrefix}${prefix}${presentValues.current[currentIndex]}`;
+  }
+
+  useEffect(() => {
+    presentValues.current = presentValues.current.filter((value, index) => index <= presentIndex.current);
+  });
+  useEffect(() => () => {
+    callback(decreaseGlobalIds(presentValues.current, getDeletedIndexes(), getGlobalId()));
+  }, []);
+  presentIndex.current = -1;
+  return getNextId;
+}
+export function getNumberGenerators(_ref2) {
+  let {
+    Component,
+    prefix,
+    getGlobalPrefix,
+    getGlobalId,
+    getDeletedIndexes,
+    callback
+  } = _ref2;
+  let presentIndex = 0,
+      presentValues = [],
+      {
+    name
+  } = Component.props;
+  let didUpdateRef = Component.componentDidUpdate ? Component.componentDidUpdate.bind(Component) : undefined,
+      renderRef = Component.render.bind(Component),
+      willUnMountRef = Component.componentWillUnmount ? Component.componentWillUnmount.bind(Component) : undefined;
+  prefix = typeof prefix !== 'undefined' ? `${prefix}_` : '';
+
+  Component.componentDidUpdate = function () {
+    didUpdateRef && didUpdateRef(...arguments);
+    presentValues = presentValues.filter((value, index) => index <= presentIndex);
+  };
+
+  Component.componentWillUnmount = function () {
+    callback(decreaseGlobalIds(presentValues, getDeletedIndexes(), getGlobalId()));
+    willUnMountRef && willUnMountRef();
+    didUpdateRef = null, renderRef = null, willUnMountRef = null;
+  };
+
+  Component.render = function () {
+    presentIndex = -1;
+    return renderRef();
+  };
+
+  function getNextId() {
+    presentIndex += 1;
+    let isValuePresent = typeof presentValues[presentIndex] !== 'undefined';
+    let result = isValuePresent ? presentValues[presentIndex] : presentValues[presentIndex] = addGlobalId(getGlobalId(getGlobalId()));
+    let globalPrefix = getGlobalPrefix();
+    globalPrefix = typeof globalPrefix === 'undefined' ? '' : `${globalPrefix}_`;
+    !isValuePresent && callback({
+      globalId: result,
+      deletedIndexes: getDeletedIndexes()
+    });
+    return `${globalPrefix}${prefix}${result}`;
+  }
+
+  return getNextId;
+}

package/es/v1/Provider/ZindexProvider.js

@@ -0,0 +1,57 @@
+import { useNumberGenerator, getNumberGenerators } from './NumberGenerator/NumberGenerator';
+import { getLibraryConfig } from './Config';
+let globalId = getLibraryConfig('zindexCounter'),
+    deletedIndexes = [],
+    globalPrefix;
+export function removeGlobalZIndexPrefix() {
+  globalPrefix = undefined;
+}
+
+function getGlobalZIndexPrefix() {
+  return globalPrefix;
+}
+
+export function setInitialZIndex(id) {
+  globalId = id;
+}
+
+function getGlobalId() {
+  return globalId;
+}
+
+function setDeletedIndexes(array) {
+  deletedIndexes = array;
+}
+
+function getDeletedIndexes() {
+  return deletedIndexes;
+}
+
+function callback(_ref) {
+  let {
+    globalId,
+    deletedIndexes
+  } = _ref;
+  setInitialZIndex(globalId);
+  setDeletedIndexes(deletedIndexes);
+}
+
+export function useZIndex(prefix) {
+  return useNumberGenerator({
+    getGlobalId,
+    prefix,
+    getGlobalPrefix: getGlobalZIndexPrefix,
+    getDeletedIndexes,
+    callback
+  });
+}
+export function getZIndex(Component, prefix) {
+  return getNumberGenerators({
+    Component,
+    prefix,
+    getGlobalPrefix: getGlobalZIndexPrefix,
+    getGlobalId,
+    getDeletedIndexes,
+    callback
+  });
+}