update(ImageViewer): Add dropdownAbove prop (#398)

* Add dropdownAbove prop to ImageViewer * comment update
airbnb · Aug 26, 2020 · 8aa31dd · 8aa31dd
1 parent d45fefc
commit 8aa31dd
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/packages/core/src/components/ImageViewer/ZoomControls.tsx b/packages/core/src/components/ImageViewer/ZoomControls.tsx
@@ -46,13 +46,15 @@ export type ZoomControlsProps = {
   iconSize?: number | string;
   /** Custom style sheet. */
   styleSheet?: StyleSheet;
+  /** Place dropdown menu above */
+  dropdownAbove?: boolean;
 };
 
 /** Zoom controls that can be used with an image viewer component */
 export default function ZoomControls({ styleSheet, ...props }: ZoomControlsProps) {
   const [styles, cx] = useStyles(styleSheet ?? styleSheetZoomControls);
   const [visible, setVisible] = useState(false);
-  const { onScale, scale = 1, iconSize = '2em' } = props;
+  const { onScale, scale = 1, iconSize = '2em', dropdownAbove } = props;
 
   const zoomOptions = ZOOM_OPTIONS.map((zoom: { label: string; scale: number }) => ({
     ...zoom,
@@ -89,7 +91,13 @@ export default function ZoomControls({ styleSheet, ...props }: ZoomControlsProps
       </ButtonGroup>
 
       {visible && (
-        <Dropdown visible={visible} left="0" zIndex={5} onClickOutside={toggleZoomMenu}>
+        <Dropdown
+          visible={visible}
+          bottom={dropdownAbove ? '100%' : undefined}
+          left="0"
+          zIndex={5}
+          onClickOutside={toggleZoomMenu}
+        >
           <Menu accessibilityLabel={T.phrase('lunar.image.zoomMenu', 'Zoom dropdown menu')}>
             {zoomOptions.map((zoom) => (
               <Item key={zoom.scale} onClick={zoom.handleOnClick}>

diff --git a/packages/core/src/components/ImageViewer/story.tsx b/packages/core/src/components/ImageViewer/story.tsx
@@ -6,13 +6,32 @@ import Row from '../Row';
 type ImageViewerDemoProps = {
   width?: string;
   height?: string;
+  controlsBottom?: boolean;
 };
 
-function ImageViewerDemo({ width, height }: ImageViewerDemoProps) {
+function ImageViewerDemo({ width, height, controlsBottom }: ImageViewerDemoProps) {
   const [scale, setScale] = useState(1);
   const [rotation, setRotation] = useState(0);
 
-  return (
+  return controlsBottom ? (
+    <>
+      <ImageViewer
+        alt="Testing"
+        scale={scale}
+        src={space}
+        rotation={rotation}
+        height={height}
+        width={width}
+      />
+      <Row
+        before={
+          <RotateControls rotation={rotation} onRotation={(value: number) => setRotation(value)} />
+        }
+      >
+        <ZoomControls dropdownAbove scale={scale} onScale={(value: number) => setScale(value)} />
+      </Row>
+    </>
+  ) : (
     <>
       <Row
         before={
@@ -63,3 +82,11 @@ export function withSetWidthAndHeightPortrait() {
 withSetWidthAndHeightPortrait.story = {
   name: 'With set width and height, portrait.',
 };
+
+export function withControlsBottom() {
+  return <ImageViewerDemo controlsBottom />;
+}
+
+withControlsBottom.story = {
+  name: 'With dropdownAbove set.',
+};