Merge pull request #58 from lvlsgroup/fix-react-datepicker-api

created a url base modal to account for mobile back button and fixed …

Author: oskarleonard

package.json

@@ -5,7 +5,7 @@
   "name": "react-component-lib",
   "author": "lvlsgroup",
   "description": "A component library for react",
-  "version": "0.9.32",
+  "version": "0.9.33",
   "main": "src/server/server.js",
   "license": "MIT",
   "scripts": {

src/client/components/dialogs/defaultDialog/DefaultDialog.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Button from '@rc-lib-client/components/inputs/button/Button';
+import Flex from '@rc-lib-client/components/flex/Flex';
+import CrossIcon from '@rc-lib-client/components/icons/crossIcon/CrossIcon';
+import Image from '@rc-lib-client/components/images/image/Image';
+import styles from './defaultDialog.scss';
+
+const DefaultDialog = ({
+  className,
+  title,
+  description,
+  onConfirm,
+  toggleModal,
+  btnContainerClassName,
+  confirmBtnClassName,
+  labelBtnConfirm = 'Yes',
+  cancelBtnClassName,
+  labelBtnCancel = 'No',
+  closeImgClassName,
+  closeImgIcon,
+  passBackData,
+}) => {
+  function handleConfirm() {
+    onConfirm(toggleModal, passBackData);
+  }
+
+  return (
+    <div className={classNames(styles.defaultDialog, className)}>
+      {closeImgIcon ? (
+        <Image
+          className={classNames(closeImgClassName)}
+          src={closeImgIcon}
+          alt="Close"
+        />
+      ) : (
+        <CrossIcon
+          className={classNames(styles.btnCross)}
+          onClick={toggleModal}
+          crossColor="black"
+          mdCross
+        />
+      )}
+      {title && <h3 className={styles.title}>{title}</h3>}
+      {description && <p className={styles.description}>{description}</p>}
+      {(onConfirm || toggleModal) && (
+        <Flex
+          className={classNames(styles.btnContainer, btnContainerClassName)}
+        >
+          {onConfirm && (
+            <Button
+              className={classNames(styles.buttonConfirm, confirmBtnClassName)}
+              label={labelBtnConfirm}
+              onClick={handleConfirm}
+            />
+          )}
+          {toggleModal && (
+            <Button
+              className={classNames(styles.btnCancel, cancelBtnClassName)}
+              label={labelBtnCancel}
+              onClick={toggleModal}
+            />
+          )}
+        </Flex>
+      )}
+    </div>
+  );
+};
+
+DefaultDialog.propTypes = {
+  className: PropTypes.string,
+  title: PropTypes.string,
+  CustomClose: PropTypes.any,
+  description: PropTypes.string,
+  onConfirm: PropTypes.func,
+  toggleModal: PropTypes.func,
+  btnContainerClassName: PropTypes.string,
+  confirmBtnClassName: PropTypes.string,
+  labelBtnConfirm: PropTypes.string,
+  cancelBtnClassName: PropTypes.string,
+  labelBtnCancel: PropTypes.string,
+  closeImgClassName: PropTypes.string,
+  closeImgIcon: PropTypes.string,
+  passBackData: PropTypes.any,
+};
+
+export default DefaultDialog;

src/client/components/dialogs/defaultDialog/defaultDialog.scss

@@ -0,0 +1,43 @@
+.defaultDialog {
+  width: 632px;
+  background-color: $color-white;
+  padding: 16px 16px 72px 16px;
+
+  @include bpMobileLandscape(){
+    box-shadow: 0 -1px 20px 0 rgba(0, 0, 0, 0.19);
+  }
+
+  .btnCross {
+    margin-left: auto;
+  }
+
+  .title {
+    margin: 24px auto 0 auto;
+    text-align: center;
+    max-width: 415px;
+  }
+
+  .description {
+    margin: 16px auto 0 auto;
+    text-align: center;
+    max-width: 415px;
+  }
+
+  .btnContainer {
+    margin: 56px auto 0 auto;
+    width: 262px;
+
+    .buttonConfirm {
+      flex: 1;
+    }
+
+    .btnCancel {
+      margin-left: 16px;
+      flex: 1;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}

src/client/components/flex/Flex.js

@@ -14,7 +14,6 @@ const RES_COL_SYSTEM = [
   'col222s1616',
   'col12_s1616',
   'col12_s88',
-  'col12_s1616',
   'col12_s2424',
 ];
 

src/client/components/icons/crossIcon/CrossIcon.js

@@ -1,22 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { DivOrButton } from '@rc-lib-client/shared/utils/dom/dom';
 import styles from './crossIcon.scss';
 
-const CrossIcon = React.memo(({ onClick, crossColor, style }) => {
+const CrossIcon = ({
+  className,
+  onClick,
+  crossColor,
+  style,
+  lgCross,
+  mdCross,
+  expandXonHover = true,
+}) => {
   return (
     <DivOrButton
-      className={`${styles.crossIcon} ${styles[crossColor]}`}
+      className={classNames(
+        className,
+        styles.crossIcon,
+        styles[crossColor],
+        lgCross && styles.lgCross,
+        mdCross && styles.mdCross,
+        expandXonHover && styles.expandCrossOnHover
+      )}
       onClick={onClick}
       style={style}
     />
   );
-});
+};
 
 CrossIcon.propTypes = {
+  className: PropTypes.string,
   onClick: PropTypes.func,
   crossColor: PropTypes.string,
   style: PropTypes.object,
+  lgCross: PropTypes.bool,
+  mdCross: PropTypes.bool,
+  expandXonHover: PropTypes.bool,
 };
 
-export default CrossIcon;
+export default React.memo(CrossIcon);

src/client/components/icons/crossIcon/crossIcon.scss

@@ -15,6 +15,18 @@
     width: 3px;
   }
 
+  &.mdCross {
+    &:before, &:after {
+      height: 60%;
+    }
+  }
+
+  &.lgCross {
+    &:before, &:after {
+      height: 80%;
+    }
+  }
+
   &:before {
     transform: rotate(45deg);
   }
@@ -41,9 +53,27 @@ button.crossIcon {
   border: none;
   cursor: pointer;
 
-  &:hover {
-    &:before, &:after {
-      height: 60%;
+  &.expandCrossOnHover {
+    &:hover {
+      &:before, &:after {
+        height: 56%;
+      }
+    }
+
+    &.mdCross {
+      &:hover {
+        &:before, &:after {
+          height: 72%;
+        }
+      }
+    }
+
+    &.lgCross {
+      &:hover {
+        &:before, &:after {
+          height: 92%;
+        }
+      }
     }
   }
 }

src/client/components/modals/modalFixedCentered/modalUtils.js

@@ -0,0 +1,78 @@
+import React, { useEffect } from 'react';
+import classNames from 'classnames';
+import { toggleFixedBody } from '@rc-lib-client/shared/utils/dom/dom';
+import styles from './modalUtils.scss';
+
+export const ModalFixedCentered = React.memo(
+  ({
+    ModalContent,
+    modalClassName,
+    toggleModal,
+    isModalOpen,
+    stopBackgroundScroll,
+  }) => {
+    const onMountAndUnMount = () => {
+      if (stopBackgroundScroll && isModalOpen) {
+        toggleFixedBody();
+      }
+
+      const closeOnEscapeKey = (e) => {
+        if (e.keyCode === 27) {
+          toggleModal();
+        }
+      };
+
+      window.addEventListener('keyup', closeOnEscapeKey, false);
+
+      return () => {
+        if (stopBackgroundScroll && isModalOpen) {
+          toggleFixedBody();
+        }
+        window.removeEventListener('keyup', closeOnEscapeKey, false);
+      };
+    };
+
+    useEffect(onMountAndUnMount, []);
+
+    const isDiv = ModalContent && ModalContent.type === 'div';
+
+    return (
+      <div className={classNames(styles.modal, modalClassName)}>
+        {React.cloneElement(
+          ModalContent,
+          !isDiv && { toggleModal, isModalOpen }
+        )}
+      </div>
+    );
+  }
+);
+
+export const OverLay = React.memo(({ overlayClassName, onClick }) => {
+  return (
+    <div
+      className={classNames(styles.overLay, overlayClassName)}
+      onClick={onClick}
+    />
+  );
+});
+
+export const Trigger = React.memo(
+  ({
+    TriggerElement,
+    triggerPropKey,
+    shouldTriggerReceiveState,
+    isTriggerOpen,
+    onClick,
+  }) => {
+    return (
+      <>
+        {React.cloneElement(TriggerElement, {
+          [triggerPropKey]: onClick,
+          ...(shouldTriggerReceiveState && {
+            isTriggerOpen: isTriggerOpen,
+          }),
+        })}
+      </>
+    );
+  }
+);

src/client/components/modals/modalQuick/modalTrigger.scss renamed to src/client/components/modals/modalFixedCentered/modalUtils.scss

@@ -13,10 +13,11 @@
 }
 
 .modal {
+  max-width: 100%;
+  max-height: 100%;
   position: fixed;
   top: 50%;
   left: 50%;
-  max-height: 80%;
   transform: translate(-50%, -50%);
   z-index: 981;
   display: flex;