✨added background panel for imagery, carousel or other.

mayteio · Apr 7, 2020 · 2db5b0e · 2db5b0e
1 parent de64bbb
commit 2db5b0e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 20 deletions.
diff --git a/src/BottomSheet.tsx b/src/BottomSheet.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { a, useSpring, config, interpolate } from 'react-spring';
+import { a, useSpring, config } from 'react-spring';
 import { useDrag } from 'react-use-gesture';
 import useMeasure from 'react-use-measure';
 import { ResizeObserver } from '@juggle/resize-observer';
@@ -68,7 +68,7 @@ export const BottomSheet: React.FC<BottomSheetProps> = props => {
       right: 0,
       top: 0,
       zIndex: 1198,
-      backgroundColor: 'rgba(0,0,0,0.2)',
+      backgroundColor: 'rgba(0,0,0,0.3)',
     },
     background: {
       position: 'fixed' as React.CSSProperties['position'],
@@ -78,7 +78,7 @@ export const BottomSheet: React.FC<BottomSheetProps> = props => {
       width: '100%',
     },
     root: {
-      background: '#eee',
+      background: '#fff',
       boxShadow: '0 -10px 20px rgba(0,0,0,0.3)',
       width: '100%',
       minHeight: defaultHeight,
@@ -208,11 +208,7 @@ export const BottomSheet: React.FC<BottomSheetProps> = props => {
     .find(n => n !== defaultPosition && n < defaultPosition);
   const backdropStyle = {
     /** backdrop should only begin to fade in after first stop */
-    opacity: y.to(
-      [backdropActiveAt as number, defaultPosition],
-      [1, 0],
-      'clamp'
-    ),
+    opacity: y.to([backdropActiveAt as number, defaultPosition], [1, 0]),
     /** Set display none when backdrop isn't show so you can interact with the page */
     display: y.to(py => (py < defaultPosition && backdrop ? 'block' : 'none')),
   };
@@ -226,7 +222,7 @@ export const BottomSheet: React.FC<BottomSheetProps> = props => {
     y: y.to(
       [...stops].reverse(),
       stops.map((_stop, i, arr) =>
-        i === arr.length - 1 || i === arr.length - 2 ? defaultPosition : 0
+        i === arr.length - 1 || i === arr.length - 2 ? window.innerHeight : 0
       ),
       'clamp'
     ),

diff --git a/stories/BottomSheet.stories.tsx b/stories/BottomSheet.stories.tsx
@@ -11,18 +11,20 @@ export default {
 export const Default = (
   props?: Partial<PropsWithChildren<BottomSheetProps>>
 ) => (
-  <>
-    can interact
+  <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
+    Map will go here
     <BottomSheet
       background={
-        <div style={{ backgroundColor: '#f00', height: '100%' }}>
-          background
+        <div style={{ backgroundColor: '#eee', height: '100%', padding: 24 }}>
+          Location image sliders can go here
         </div>
       }
       peekHeights={[250, 400]}
       {...props}
     >
-      <div style={{ height: 900, width: 20, border: '2px dotted #aaa' }} />
+      <div style={{ height: 900, width: '100%', padding: 24 }}>
+        Waypoint information carousel here
+      </div>
     </BottomSheet>
-  </>
+  </div>
 );
diff --git a/test/BottomSheet.test.tsx b/test/BottomSheet.test.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { Default as BottomSheet } from '../stories/ABottomSheet.stories';
-import { defaultOptions } from '../src/BottomSheet2';
+import { Default as BottomSheet } from '../stories/BottomSheet.stories';
+import { defaultOptions } from '../src/BottomSheet';
 
 describe('<BottomSheet />', () => {
   // setup, put here so we re-use the element.
-  const { getByText, debug, rerender } = render(<BottomSheet>el</BottomSheet>);
-  const el = getByText('el');
+  const { getByText, debug } = render(<BottomSheet>el</BottomSheet>);
+  const el = getByText(/waypoint/i);
 
-  test('should render', () => {
+  test.only('should render', () => {
     expect(el).toBeInTheDocument();
   });