@zohodesk/components 1.0.0-alpha-263 → 1.0.0-alpha-264

package/README.md

@@ -32,6 +32,11 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+
+# 1.0.0-alpha-264
+
+- **DropBox** - customStyle renamed to customInlineStyle and migrarted to functional UCL component
+
 # 1.0.0-alpha-263
 
 - **ListItem, ListItemWithAvatar, ListItemWithCheckbox, ListItemWithIcon, ListItemWithRadio**  - Line height changed 20px and Padding also changed.

package/css_error.log

@@ -0,0 +1 @@
+Component Package error log:

package/es/DropBox/DropBox.js

@@ -1,251 +1,77 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { Fragment } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { remConvert } from '../utils/Common';
+import React, { useRef, Fragment, useContext } from 'react';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 import Modal from '../Modal/Modal';
-import style from './DropBox.module.css';
-import { positionMapping } from './DropBoxPositionMapping.json';
-import { getZIndex } from '../Provider/ZindexProvider';
 import { getLibraryConfig } from '../Provider/Config';
 import LibraryContext from '../Provider/LibraryContextInit';
-import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-export class DropBoxElement extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getRef = this.getRef.bind(this);
-  }
-  getRef(ele) {
-    const {
-      getRef,
-      forwardRef
-    } = this.props;
-    getRef && getRef(ele);
-    if (forwardRef) {
-      forwardRef.current = ele;
-    }
-  }
-  render() {
-    let {
-      children,
-      isAnimate,
-      isArrow,
-      arrowPosition,
-      boxPosition,
-      size,
-      right,
-      left,
-      top,
-      arrowRight,
-      arrowLeft,
-      arrowTop,
-      arrowBottom,
-      bottom,
-      onClick,
-      isRadius,
-      animationStyle,
-      isActive,
-      dataId,
-      dataSelectorId,
-      isModel,
-      isAbsolutePositioningNeeded,
-      tourId,
-      isBoxPaddingNeed,
-      isPadding,
-      customClass,
-      htmlId,
-      a11y,
-      direction,
-      tabIndex,
-      palette,
-      positionsOffset,
-      targetOffset,
-      zIndexStyle,
-      customStyle,
-      subContainerRef
-    } = this.props;
-    let {
-      isReducedMotion
-    } = this.context || {};
-    if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
-      isAbsolutePositioningNeeded = true;
-    }
-    const {
-      role,
-      ariaMultiselectable,
-      ariaLabelledby
-    } = a11y;
-    const {
-      customDropBox = '',
-      customMobileDropBox = '',
-      customDropBoxWrap = '',
-      customMobileDropBoxWrap = ''
-    } = customClass;
-    const unit = 'rem';
-    let boxstyle = {};
-    let arrowstyle = {};
-    const needBoxStyle = right || left || top || bottom;
-    const needArrowStyle = arrowLeft || arrowRight || arrowTop || arrowBottom;
-    if (needBoxStyle) {
-      boxstyle = !isModel ? direction === 'rtl' ? {
-        right: [remConvert(left)] + unit,
-        left: [remConvert(right)] + unit,
-        top: [remConvert(top)] + unit,
-        bottom: [remConvert(bottom)] + unit
-      } : {
-        right: [remConvert(right)] + unit,
-        left: [remConvert(left)] + unit,
-        top: [remConvert(top)] + unit,
-        bottom: [remConvert(bottom)] + unit
-      } : {};
-    }
-    if (needArrowStyle) {
-      arrowstyle = !isModel ? direction === 'rtl' ? {
-        right: [remConvert(arrowLeft)] + unit,
-        left: [remConvert(arrowRight)] + unit,
-        top: [remConvert(arrowTop)] + unit,
-        bottom: [remConvert(arrowBottom)] + unit
-      } : {
-        right: [remConvert(arrowRight)] + unit,
-        left: [remConvert(arrowLeft)] + unit,
-        top: [remConvert(arrowTop)] + unit,
-        bottom: [remConvert(arrowBottom)] + unit
-      } : {};
-    }
-    boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
-    const boxDirection = positionMapping[boxPosition].direction; /*getting box direction*/
-    if (isAbsolutePositioningNeeded) {
-      arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
-      boxPosition = positionMapping[boxPosition].positionStyle;
-    } else {
-      arrowPosition = positionMapping[boxPosition].arrowPosition;
-    }
-    const boxClassName = `${style.main} ${!isActive ? style.hidden : ''} ${isModel ? `${style.responsive} ${customMobileDropBoxWrap}` : `${customDropBoxWrap} ${size ? style[size] : ''} ${isActive ? `${isArrow ? `${style[boxDirection]} ${isAbsolutePositioningNeeded ? style[`arrow${boxDirection}`] : ''}` : isPadding ? style[`paddingSpace_${boxDirection}`] : ''}` : ''} ${isAbsolutePositioningNeeded ? `${style.container} ${style[boxPosition]}` : style.fixedContainer}`}`;
-    const subContainerClass = `${style.subContainer} ${isModel ? ` ${customMobileDropBox} ${style.mobRadius} ${isActive ? style.slideUp : ''} ` : `${customDropBox} ${style[`${boxDirection}_shadow`]} ${isRadius ? style.radius : ''} ${isAnimate && !isReducedMotion && isActive ? animationStyle === 'default' ? style.fadeIn : style.bounce : ''} ${isBoxPaddingNeed ? style.boxPadding : ''}`}`;
-
-    // setting inlineStyle for dropbox
-    let inlineStyle = !isModel ? isAbsolutePositioningNeeded ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
-    if (zIndexStyle) {
-      inlineStyle = Object.assign({}, inlineStyle, zIndexStyle);
-    }
-    if (!isModel && !isAbsolutePositioningNeeded && size === 'default' && targetOffset && isActive) {
-      inlineStyle = Object.assign({}, inlineStyle, {
-        width: targetOffset.width
-      });
-    }
-    if (customStyle) {
-      inlineStyle = Object.assign({}, inlineStyle, customStyle);
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      className: boxClassName,
-      "data-id": `${dataId}`,
-      "data-selector-id": dataSelectorId,
-      ref: this.getRef,
-      style: inlineStyle,
-      "data-tour": tourId,
-      "data-position": boxPosition,
-      id: htmlId,
-      role: role,
-      "aria-multiselectable": ariaMultiselectable,
-      "aria-labelledby": ariaLabelledby,
-      tabIndex: tabIndex
-    }, /*#__PURE__*/React.createElement("div", {
-      tabIndex: "-1",
-      className: `${subContainerClass} ${style[`${palette}Palette`]}`,
-      onClick: onClick,
-      "data-id": `${dataId}_subcontainer`,
-      "data-selector-id": `${dataSelectorId}_subcontainer`,
-      ref: subContainerRef
-    }, isModel ? /*#__PURE__*/React.createElement("div", {
-      className: style.closeBar
-    }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
-      className: style[arrowPosition],
-      style: needArrowStyle && arrowstyle,
-      "data-id": `${dataId}_arrow`,
-      "data-selector-id": `${dataSelectorId}_arrow`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.arrowShape
-    })), children));
-  }
-}
-export default class DropBox extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getNextIndex = getZIndex(this);
-    this.onFreezeClick = this.onFreezeClick.bind(this);
-    this.createRef = /*#__PURE__*/React.createRef();
-  }
-  onFreezeClick(e) {
+import cssJSLogic from './css/cssJSLogic';
+import DropBoxElement from './DropBoxElement/DropBoxElement';
+import { DropBoxDefaultProps } from './props/defaultProps';
+import { DropBoxPropTypes } from './props/propTypes';
+import style from './css/DropBox.module.css';
+export default function DropBox(props) {
+  const focusRef = useRef(null);
+  const DropBoxContext = useContext(LibraryContext);
+  const onFreezeClick = e => {
     e && e.stopPropagation();
-  }
-  render() {
-    const {
-      needResponsive,
-      portalId,
-      isActive,
-      isAbsolutePositioningNeeded,
-      needAutoZindex,
-      isRestrictScroll,
-      needFocusScope,
-      onClose
-    } = this.props;
-    let windowWidth,
-      mobileWidth = getLibraryConfig('mobileWidth'),
-      isModel = false;
-    if (needResponsive) {
-      windowWidth = window.innerWidth;
-      if (windowWidth <= mobileWidth) {
-        isModel = true;
-      }
+  };
+  const {
+    needResponsive,
+    portalId,
+    isActive,
+    isAbsolutePositioningNeeded,
+    isRestrictScroll,
+    needFocusScope,
+    onClose
+  } = props;
+  const {
+    direction
+  } = DropBoxContext || {};
+  let windowWidth,
+    mobileWidth = getLibraryConfig('mobileWidth'),
+    isModel = false;
+  if (needResponsive) {
+    windowWidth = window.innerWidth;
+    if (windowWidth <= mobileWidth) {
+      isModel = true;
     }
-    const zIndexStyle = isActive && needAutoZindex ? {
-      zIndex: this.getNextIndex()
-    } : {};
-    const {
-      direction
-    } = this.context || {};
-    const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
-      focusClose: onClose,
-      elementRef: this.createRef,
-      autoFocus: true,
-      restoreFocus: true,
-      focusArrowLoop: true,
-      enableEnterAction: true
-    }, /*#__PURE__*/React.createElement(DropBoxElement, _extends({
-      isModel: isModel,
-      direction: direction
-    }, this.props, {
-      zIndexStyle: zIndexStyle,
-      subContainerRef: this.createRef
-    }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
-      isModel: isModel,
-      direction: direction
-    }, this.props, {
-      zIndexStyle: zIndexStyle
-    }));
-    return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
-      portalId: portalId
-    }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.freezeLayer} ${style.freeze}`,
-      style: zIndexStyle,
-      onClick: this.onFreezeClick
-    }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Modal, {
-      portalId: portalId
-    }, /*#__PURE__*/React.createElement(Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
-      className: style.freezeLayer,
-      style: zIndexStyle,
-      onClick: this.onFreezeClick
-    }) : null, dropBoxEle)) : dropBoxEle;
   }
+  const {
+    zIndexStyle
+  } = cssJSLogic(props);
+  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+    focusClose: onClose,
+    elementRef: focusRef,
+    autoFocus: true,
+    restoreFocus: true,
+    focusArrowLoop: true,
+    enableEnterAction: true
+  }, /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+    isModel: isModel,
+    direction: direction
+  }, props, {
+    zIndexStyle: zIndexStyle,
+    subContainerRef: focusRef
+  }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+    isModel: isModel,
+    subContainerRef: focusRef,
+    direction: direction
+  }, props, {
+    zIndexStyle: zIndexStyle
+  }));
+  return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
+    portalId: portalId
+  }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `${style.freezeLayer} ${style.freeze}`,
+    style: zIndexStyle,
+    onClick: onFreezeClick
+  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Modal, {
+    portalId: portalId
+  }, /*#__PURE__*/React.createElement(Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
+    className: style.freezeLayer,
+    style: zIndexStyle,
+    onClick: onFreezeClick
+  }) : null, dropBoxEle)) : dropBoxEle;
 }
-DropBox.propTypes = propTypes;
-DropBox.contextType = LibraryContext;
-DropBox.defaultProps = defaultProps;
-// if (__DOCS__) {
-//   DropBox.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
+DropBox.propTypes = DropBoxPropTypes;
+DropBox.defaultProps = DropBoxDefaultProps;

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import useDropboxPosCalc from './useDropboxPosCalc';
+import cssJSLogic from './css/cssJSLogic';
+import { positionMapping } from '../DropBoxPositionMapping.json';
+import { DropBoxElementDefaultProps } from './props/defaultProps';
+import { DropBoxElementPropTypes } from './props/propTypes';
+import { mergeStyle } from '../../utils';
+import style from './css/DropBoxElement.module.css';
+export default function DropBoxElement(props) {
+  let {
+    children,
+    isAnimate,
+    isArrow,
+    arrowPosition,
+    boxPosition,
+    size,
+    onClick,
+    isActive,
+    dataId,
+    dataSelectorId,
+    isModel,
+    isAbsolutePositioningNeeded,
+    tourId,
+    htmlId,
+    a11y,
+    tabIndex,
+    palette,
+    subContainerRef,
+    customStyle
+  } = props;
+  const FireOnAnimationEnd = () => {
+    let element = subContainerRef && subContainerRef.current.classList;
+    (isAnimate ? style.fadeIn : style.bounce).split(' ').map(rmStyle => {
+      if (element && element.contains(rmStyle)) {
+        element.remove(rmStyle);
+      }
+    });
+  };
+  const getRef = ele => {
+    const {
+      getRef,
+      forwardRef
+    } = props;
+    getRef && getRef(ele);
+    if (forwardRef) {
+      forwardRef.current = ele;
+    }
+  };
+  if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
+    isAbsolutePositioningNeeded = true;
+  }
+  const {
+    role,
+    ariaMultiselectable,
+    ariaLabelledby
+  } = a11y;
+  boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
+  const boxDirection = positionMapping[boxPosition].direction;
+  if (isAbsolutePositioningNeeded) {
+    arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
+    boxPosition = positionMapping[boxPosition].positionStyle;
+  } else {
+    arrowPosition = positionMapping[boxPosition].arrowPosition;
+  }
+  const {
+    arrowstyle,
+    boxstyle,
+    needBoxStyle
+  } = useDropboxPosCalc(props);
+  const mergedStyle = mergeStyle(style, customStyle);
+  const {
+    boxClassName,
+    subContainerClass,
+    inlineStyle
+  } = cssJSLogic({
+    props,
+    style: mergedStyle,
+    customState: {
+      boxPosition,
+      boxDirection,
+      boxstyle,
+      needBoxStyle
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: boxClassName,
+    "data-id": `${dataId}`,
+    "data-selector-id": dataSelectorId,
+    ref: getRef,
+    style: inlineStyle,
+    "data-tour": tourId,
+    "data-position": boxPosition,
+    id: htmlId,
+    role: role,
+    "aria-multiselectable": ariaMultiselectable,
+    "aria-labelledby": ariaLabelledby,
+    tabIndex: tabIndex,
+    onAnimationEnd: FireOnAnimationEnd
+  }, /*#__PURE__*/React.createElement("div", {
+    tabIndex: "-1",
+    className: `${subContainerClass} ${style[`${palette}Palette`]}`,
+    onClick: onClick,
+    "data-id": `${dataId}_subcontainer`,
+    "data-selector-id": `${dataSelectorId}_subcontainer`,
+    ref: subContainerRef
+  }, isModel ? /*#__PURE__*/React.createElement("div", {
+    className: style.closeBar
+  }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
+    className: style[arrowPosition],
+    style: arrowstyle,
+    "data-id": `${dataId}_arrow`,
+    "data-selector-id": `${dataSelectorId}_arrow`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.arrowShape
+  })), children));
+}
+DropBoxElement.propTypes = DropBoxElementPropTypes;
+DropBoxElement.defaultProps = DropBoxElementDefaultProps;