fix position startTop* bug on pageYOffset > 0, fix onClickOutside ani…

…mated keypad (still need to fix the double call on setShow), small update stories
gpietro · Nov 8, 2019 · dc42ea6 · dc42ea6
1 parent 74aa6f2
commit dc42ea6
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 189 deletions.
diff --git a/lib/components/NumPad.js b/lib/components/NumPad.js
@@ -61,17 +61,16 @@ const NumPad = ({
     setValue(formatInputValue(valueFromProps));
   }
 
-  const toggleKeyPad = () => setShow(!show);
+  const toggleKeyPad = () => {
+    setShow(!show);
+  };
 
-  const confirm = useCallback(
-    val => {
-      if (show) {
-        onChange(displayRule(val));
-      }
-      setShow(!show);
-    },
-    [show]
-  );
+  const confirm = val => {
+    if (show) {
+      toggleKeyPad();
+      onChange(displayRule(val));
+    }
+  };
 
   // Update internal state, if sync is true call the external onChange callback on each change
   const update = useCallback(
@@ -100,14 +99,15 @@ const NumPad = ({
           right: `${Math.min(innerWidth - right + pageXOffset, innerWidth - width)}px`,
         },
         startTopLeft: {
-          top: `${Math.max(top + pageYOffset - height, 0)}px`,
+          top: `${Math.max(top + pageYOffset - height, pageYOffset)}px`,
           left: `${Math.min(innerWidth - width, left + pageXOffset)}px`,
         },
         startTopRight: {
-          top: `${Math.max(top + pageYOffset - height, 0)}px`,
+          top: `${Math.max(top + pageYOffset - height, pageYOffset)}px`,
           right: `${Math.min(innerWidth - right + pageXOffset, innerWidth - width)}px`,
         },
       }[position];
+
       setCustomTheme({ ...customTheme, coords: newCoords });
     } else {
       const newTheme = typeof theme === 'object' ? theme : styles(theme);
@@ -120,7 +120,7 @@ const NumPad = ({
 
   return (
     <>
-      <GlobalStyle />
+      <GlobalStyle display={display} />
       <ThemeProvider theme={customTheme}>
         <InputField
           placeholder={placeholder}
@@ -136,7 +136,7 @@ const NumPad = ({
         {display &&
           React.createElement(
             transition,
-            transitionProps,
+            { ...transitionProps },
             <ThemeProvider theme={customTheme}>
               <Wrapper show position={position}>
                 {React.cloneElement(children, {

diff --git a/lib/elements/KeyPad.js b/lib/elements/KeyPad.js
@@ -99,7 +99,7 @@ const KeyPad = forwardRef(function KeyPad(
     }
   }
 
-  useOnClickOutside(ref, () => {
+  useOnClickOutside(ref, e => {
     if (validation(inputValue)) {
       confirm(inputValue);
     } else {

diff --git a/lib/styles/global-css.js b/lib/styles/global-css.js
@@ -2,8 +2,18 @@ import { createGlobalStyle } from 'styled-components';
 
 const GlobalStyle = createGlobalStyle`
 html {
-  touch-action: manipulation;      
+  touch-action: manipulation;
 }
+${props =>
+  props.display
+    ? `
+body {
+overflow-y: hidden;
+-webkit-overflow-scrolling: touch;
+ 
+}
+`
+    : ``}
 `;
 
 export default GlobalStyle;
diff --git a/package.json b/package.json
@@ -105,4 +105,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}
diff --git a/stories/Demo.js b/stories/Demo.js
@@ -14,6 +14,7 @@ import {
   IconButton,
   Link,
 } from '@material-ui/core';
+import { appointmentDates } from './data';
 import NumPad from '../lib';
 
 const useStyles = makeStyles({
@@ -33,140 +34,6 @@ const useStyles = makeStyles({
   },
 });
 
-const appointmentDates = {
-  [moment().format('DD.MM.YYYY')]: [
-    '08:00',
-    '08:30',
-    '09:00',
-    '09:30',
-    '10:00',
-    '11:00',
-    '12:00',
-    '13:00',
-    '14:00',
-    '15:00',
-  ],
-  [moment()
-    .add(1, 'days')
-    .format('DD.MM.YYYY')]: [
-    '08:00',
-    '08:30',
-    '09:00',
-    '09:30',
-    '10:00',
-    '11:00',
-    '12:00',
-    '13:00',
-    '14:00',
-    '15:00',
-  ],
-  [moment()
-    .add(3, 'days')
-    .format('DD.MM.YYYY')]: [
-    '08:00',
-    '08:30',
-    '09:00',
-    '09:30',
-    '10:00',
-    '10:30',
-    '11:00',
-    '12:00',
-    '13:00',
-    '13:30',
-    '14:00',
-    '15:00',
-  ],
-  [moment()
-    .add(4, 'days')
-    .format('DD.MM.YYYY')]: ['08:00', '08:30', '09:00', '09:30'],
-  [moment()
-    .add(6, 'days')
-    .format('DD.MM.YYYY')]: ['08:00', '08:30', '09:00', '09:30', '10:00', '11:00'],
-  [moment()
-    .add(10, 'days')
-    .format('DD.MM.YYYY')]: [
-    '08:00',
-    '08:30',
-    '09:00',
-    '09:30',
-    '10:00',
-    '10:30',
-    '11:00',
-    '12:00',
-    '13:00',
-    '14:00',
-    '15:00',
-  ],
-  [moment()
-    .add(11, 'days')
-    .format('DD.MM.YYYY')]: ['08:00', '08:30', '09:00', '09:30'],
-  [moment()
-    .add(12, 'days')
-    .format('DD.MM.YYYY')]: [
-    '08:00',
-    '08:30',
-    '09:00',
-    '09:30',
-    '10:00',
-    '11:00',
-    '12:00',
-    '13:00',
-    '13:30',
-    '14:00',
-    '15:00',
-  ],
-  [moment()
-    .add(13, 'days')
-    .format('DD.MM.YYYY')]: ['08:00', '08:30', '09:00', '09:30', '10:00', '11:00'],
-  [moment()
-    .add(18, 'days')
-    .format('DD.MM.YYYY')]: ['08:00', '08:30', '09:00', '09:30'],
-  [moment()
-    .add(20, 'days')
-    .format('DD.MM.YYYY')]: [
-    '08:00',
-    '08:30',
-    '09:00',
-    '09:30',
-    '10:00',
-    '11:00',
-    '12:00',
-    '13:00',
-    '14:00',
-    '15:00',
-  ],
-  [moment()
-    .add(21, 'days')
-    .format('DD.MM.YYYY')]: [
-    '08:00',
-    '08:30',
-    '09:00',
-    '09:30',
-    '10:00',
-    '10:30',
-    '11:00',
-    '12:00',
-    '13:00',
-    '13:30',
-    '14:00',
-    '15:00',
-  ],
-  [moment()
-    .add(31, 'days')
-    .format('DD.MM.YYYY')]: [
-    '08:00',
-    '08:30',
-    '09:00',
-    '09:30',
-    '10:00',
-    '11:00',
-    '12:00',
-    '13:00',
-    '14:00',
-    '15:00',
-  ],
-};
-
 const initialState = {};
 
 const reducer = (state, action) => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -105,4 +105,4 @@ @@
           "pre-commit": "lint-staged"
         }
       }
-    }
+    }