@zohodesk/components 1.2.23 → 1.2.24

package/es/v1/ListItem/ListItemWithCheckBox.js

@@ -1,4 +1,5 @@
 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 from 'react';
 import ListContainer from './ListContainer';
 import { ListItemWithCheckBoxDefaultProps } from './props/defaultProps';
@@ -6,6 +7,7 @@ import { ListItemWithCheckBox_Props } from './props/propTypes';
 import CheckBox from '../CheckBox/CheckBox';
 import { Box } from '../Layout';
 import style from '../../ListItem/ListItem.module.css';
+
 const ListItemWithCheckBox = props => {
   let {
     size,
@@ -30,15 +32,19 @@ const ListItemWithCheckBox = props => {
     onClick,
     getRef
   } = props;
+
   function handleRef(ele) {
     getRef && getRef(ele, index);
   }
+
   function handleClick(e) {
     onClick && onClick(id, value, index, e);
   }
+
   function handleHover(e) {
     onHover && onHover(id, value, index, e);
   }
+
   const listA11y = {
     role: 'option',
     ...a11y
@@ -87,10 +93,10 @@ const ListItemWithCheckBox = props => {
     className: needMultiLineText ? style.multiLineValue : style.value
   }, value));
 };
+
 export default ListItemWithCheckBox;
 ListItemWithCheckBox.defaultProps = ListItemWithCheckBoxDefaultProps;
-ListItemWithCheckBox.propTypes = ListItemWithCheckBox_Props;
-// if (__DOCS__) {
+ListItemWithCheckBox.propTypes = ListItemWithCheckBox_Props; // if (__DOCS__) {
 //   ListItemWithCheckBox.docs = {
 //     componentGroup: 'Molecule',
 //     folderName: 'Style Guide'

package/es/v1/ListItem/ListItemWithIcon.js

@@ -1,4 +1,5 @@
 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); }
+
 /**** Libraries ****/
 import React from 'react';
 import { Box } from '../Layout';
@@ -7,7 +8,9 @@ import ListContainer from './ListContainer';
 import { ListItemWithIconDefaultProps } from './props/defaultProps';
 import { ListItemWithIcon_Props } from './props/propTypes';
 /**** CSS ****/
+
 import style from '../../ListItem/ListItem.module.css';
+
 const ListItemWithIcon = props => {
   let {
     size,
@@ -39,15 +42,19 @@ const ListItemWithIcon = props => {
     index,
     id
   } = props;
+
   function handleRef(ele) {
     getRef && getRef(ele, index, id);
   }
+
   function handleClick(e) {
     onClick && onClick(id, value, index, e);
   }
+
   function handleMouseEnter(e) {
     onMouseEnter && onMouseEnter(id, value, index, e);
   }
+
   let {
     ListItemProps = {},
     ContainerProps = {}
@@ -109,11 +116,10 @@ const ListItemWithIcon = props => {
     size: "8"
   })) : null);
 };
+
 export default ListItemWithIcon;
 ListItemWithIcon.defaultProps = ListItemWithIconDefaultProps;
-ListItemWithIcon.propTypes = ListItemWithIcon_Props;
-
-// if (__DOCS__) {
+ListItemWithIcon.propTypes = ListItemWithIcon_Props; // if (__DOCS__) {
 //   ListItemWithIcon.docs = {
 //     componentGroup: 'Molecule',
 //     folderName: 'Style Guide'

package/es/v1/ListItem/ListItemWithRadio.js

@@ -1,4 +1,5 @@
 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 from 'react';
 import Radio from '../Radio/Radio';
 import { Box } from '../Layout';
@@ -6,6 +7,7 @@ import ListContainer from './ListContainer';
 import { ListItemWithRadioDefaultProps } from './props/defaultProps';
 import { ListItemWithRadio_Props } from './props/propTypes';
 import style from '../../ListItem/ListItem.module.css';
+
 const ListItemWithRadio = props => {
   let {
     size,
@@ -38,15 +40,19 @@ const ListItemWithRadio = props => {
     role: 'option',
     ...a11y
   };
+
   function handleRef(ele) {
     getRef && getRef(ele, index);
   }
+
   function handleClick(e) {
     onClick && onClick(id, value, index, e);
   }
+
   function handleHover(e) {
     onHover && onHover(id, value, index, e);
   }
+
   let {
     customListItem = '',
     customRadio = '',
@@ -88,11 +94,10 @@ const ListItemWithRadio = props => {
     className: needMultiLineText ? style.multiLineValue : style.value
   }, value));
 };
+
 export default ListItemWithRadio;
 ListItemWithRadio.defaultProps = ListItemWithRadioDefaultProps;
-ListItemWithRadio.propTypes = ListItemWithRadio_Props;
-
-// if (__DOCS__) {
+ListItemWithRadio.propTypes = ListItemWithRadio_Props; // if (__DOCS__) {
 //   ListItemWithRadio.docs = {
 //     componentGroup: 'Molecule',
 //     folderName: 'Style Guide'

package/es/v1/Modal/Modal.js

@@ -1,4 +1,5 @@
 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, { useState, useRef, useEffect, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
@@ -24,16 +25,20 @@ export default function Modal(props) {
   const newModalRoot = useRef();
   const containerDiv = useRef();
   const portalDiv = useRef(); // document.createDocumentFragment()
+
   const isCustomPortalId = useRef();
   const setRef = useCallback(ele => {
     ref.current = ele;
+
     if (isZIndexAppendNeeded.current) {
       ref.current.style.zIndex = zIndex.current;
       isZIndexAppendNeeded.current = false;
     }
   }, []);
+
   function getPortalDiv() {
     modalRoot.current = propPortalId ? document.querySelector(`[data-portal=${propPortalId}]`) : "";
+
     if (!modalRoot.current) {
       portalId.current = handleAddPortalId();
       newModalRoot.current = document.createElement('div');
@@ -42,8 +47,10 @@ export default function Modal(props) {
       containerDiv.current && containerDiv.current.appendChild(newModalRoot.current);
       modalRoot.current = newModalRoot.current;
     }
+
     return modalRoot.current;
   }
+
   useEffect(() => {
     containerDiv.current = document.getElementsByTagName("desk")[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
     portalDiv.current = getPortalDiv();
@@ -57,6 +64,7 @@ export default function Modal(props) {
         containerDiv.current && containerDiv.current.removeChild(newModalRoot.current);
         handleRemovePortalId();
       }
+
       if (zIndex.current && portalChildrenTopIndexValues === zIndex.current) {
         portalChildrenTopIndexValues -= 1;
       }
@@ -69,11 +77,13 @@ export default function Modal(props) {
       portalChildrenTopIndexValues -= 1;
     }
   }, [isActive]);
+
   function handleInsertPortalDiv() {
     if (autoZIndexNeeded && isActive) {
       let newHighValue = Number(portalChildrenTopIndexValues || 10) + 1;
       portalChildrenTopIndexValues = newHighValue;
       zIndex.current = newHighValue;
+
       if (ref.current) {
         ref.current.style.zIndex = newHighValue;
       } else {
@@ -81,6 +91,7 @@ export default function Modal(props) {
       }
     }
   }
+
   function handleAddPortalId() {
     let createdPortalIdsLen = createdPortalIds.length;
     let newPortalId = createdPortalIdsLen ? createdPortalIds[createdPortalIdsLen - 1] + 1 : 1;
@@ -89,21 +100,26 @@ export default function Modal(props) {
     isCustomPortalId.current = true;
     return `${newPortalPrefix}${newPortalId}`;
   }
+
   function handleRemovePortalId() {
     if (isCustomPortalId.current) {
       createdPortalIds = createdPortalIds.filter(id => id !== portalId.current);
     }
   }
+
   let Element = children.type,
-    elementProps = children.props;
+      elementProps = children.props;
+
   if (isMounted) {
     if (Element) {
       return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, _extends({
         ref: setRef
       }, elementProps)), portalDiv.current);
     }
+
     return null;
   }
+
   return null;
 }
 Modal.defaultProps = defaultProps;