chore: replace zoom component

ccontrols · Apr 1, 2020 · 6660ded · 6660ded
1 parent 5c9108b
commit 6660ded
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 176 deletions.
diff --git a/ui/blocks/package.json b/ui/blocks/package.json
@@ -43,7 +43,6 @@
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-table": "^7.0.0",
-    "react-zoom-pan-pinch": "^1.6.1",
     "theme-ui": "^0.3.1"
   },
   "devDependencies": {

diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx
@@ -1,6 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
 import Octicon, { Plus, Dash, Sync } from '@primer/octicons-react';
-import { Global, css } from '@emotion/core';
 import {
   Collapsible,
   Tab,
@@ -12,62 +11,21 @@ import {
   ActionItem,
   ActionContainer,
   ActionContainerProps,
+  Zoom,
 } from '@component-controls/components';
 
 import { Button } from 'theme-ui';
-import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import {
   StoryBlockContainer,
   StoryBlockContainerProps,
 } from '../BlockContainer';
 import { StorySource } from '../StorySource';
 
-export interface TransformOptions {
-  limitToBounds?: boolean;
-  transformEnabled?: boolean;
-  disabled?: boolean;
-  limitToWrapper?: boolean;
-}
-
-export interface PanOptions {
-  disabled?: boolean;
-  lockAxisX?: boolean;
-  lockAxisY?: boolean;
-  velocityEqualToMove?: boolean;
-  velocity?: boolean;
-}
-
-export interface PinchOptions {
-  disabled?: boolean;
-}
-export interface DoubleClickOptions {
-  disabled?: boolean;
-}
-
-export interface WheelOptions {
-  wheelEnabled?: boolean;
-  touchPadEnabled?: boolean;
-  limitsOnWheel?: boolean;
-}
-export interface PlaygroundZoomProps {
-  zoomPanEnabled?: boolean;
-
-  pinchEnabled?: boolean;
-  dbClickEnabled?: boolean;
-  enableWheel?: boolean;
-  enableTouchPadPinch?: boolean;
-  limitsOnWheel?: boolean;
-}
-
-export interface PlaygroundTransformOptions {
-  options?: TransformOptions;
-  pan?: PanOptions;
-  pinch?: PinchOptions;
-  doubleClick?: DoubleClickOptions;
-  wheel?: WheelOptions;
-}
 export interface PlaygroundOwnProps {
-  transform?: PlaygroundTransformOptions;
+  /**
+   * whether to enable the zoom functionality in playground.
+   */
+  zoomEnabled?: boolean;
   /**
    * by default, which tab to have open.
    */
@@ -88,17 +46,15 @@ export const Playground: FC<PlaygroundProps> = ({
   name,
   collapsible,
   dark,
-  transform,
   actions: userActions = [],
   children,
   openTab,
+  zoomEnabled = true,
 }) => {
   const [tabsIndex, setTabsIndex] = React.useState<number | undefined>(
     undefined,
   );
-
-  const childStories = <>{children}</>;
-  const zoomEnabled = !transform?.options?.disabled;
+  const [scale, setScale] = React.useState(1);
 
   let storyId: string;
   const childArr = React.Children.toArray(children);
@@ -152,137 +108,78 @@ export const Playground: FC<PlaygroundProps> = ({
       : panel;
   });
 
-  const panelsElement = (
-    <Collapsible isOpen={tabsIndex !== undefined}>
-      {panels.length === 1 ? (
-        panels[0].panel
-      ) : (
-        <Tabs
-          selectedIndex={tabsIndex || 0}
-          onSelect={(index: number) => setTabsIndex(index)}
-        >
-          <TabList
-            style={{
-              textAlign: 'right',
-            }}
-          >
-            {panels.map((panel: ActionItem) => (
-              <Tab key={`playground_tab_${panel.title}`}>{panel.title}</Tab>
-            ))}
-          </TabList>
-          {panels.map((panel: ActionItem) => (
-            <TabPanel key={`playground_panel_${panel.title}`}>
-              {panel.panel}
-            </TabPanel>
-          ))}
-        </Tabs>
-      )}
-    </Collapsible>
-  );
+  const zoomActions = [
+    {
+      title: (
+        <Button onClick={() => setScale(1)} aria-label="reset zoom">
+          <Octicon icon={Sync} />
+        </Button>
+      ),
+      id: 'zoomreset',
+      group: 'zoom',
+    },
+    {
+      title: (
+        <Button onClick={() => setScale(scale / 2)} aria-label="zoom out">
+          <Octicon icon={Dash} />
+        </Button>
+      ),
+      id: 'zoomout',
+      group: 'zoom',
+    },
+    {
+      title: (
+        <Button onClick={() => setScale(scale * 2)} aria-label="zoom in">
+          <Octicon icon={Plus} />
+        </Button>
+      ),
+      id: 'zoomin',
+      group: 'zoom',
+    },
+  ];
+  const actions: ActionItem[] = [];
+  actions.push.apply(actions, panelActions);
+
+  const actionsItems = zoomEnabled ? [...zoomActions, ...actions] : actions;
   return (
     <StoryBlockContainer
       name={name}
       title={title}
       id={id}
       collapsible={collapsible}
     >
-      {() =>
-        !zoomEnabled ? (
-          <ActionContainer actions={panelActions}>
-            {children}
-            {panelsElement}
-          </ActionContainer>
-        ) : (
-          <div>
-            <Global
-              styles={css`
-                .react-transform-component,
-                .react-transform-element {
-                  width: 100%;
-                }
-              `}
-            />
-            <TransformWrapper {...transform}>
-              {({ zoomIn, zoomOut, resetTransform }: any) => {
-                const zoomActions = [
-                  {
-                    title: (
-                      <Button onClick={resetTransform} aria-label="reset zoom">
-                        <Octicon icon={Sync} />
-                      </Button>
-                    ),
-                    id: 'zoomreset',
-                    group: 'zoom',
-                  },
-                  {
-                    title: (
-                      <Button onClick={zoomOut} aria-label="zoom out">
-                        <Octicon icon={Dash} />
-                      </Button>
-                    ),
-                    id: 'zoomout',
-                    group: 'zoom',
-                  },
-                  {
-                    title: (
-                      <Button
-                        onClick={e => {
-                          zoomIn(e);
-                        }}
-                        aria-label="zoom in"
-                      >
-                        <Octicon icon={Plus} />
-                      </Button>
-                    ),
-                    id: 'zoomin',
-                    group: 'zoom',
-                  },
-                ];
-                const actions: ActionItem[] = [];
-                actions.push.apply(actions, panelActions);
-                const actionsItems = zoomEnabled
-                  ? [...zoomActions, ...actions]
-                  : actions;
-                return (
-                  <ActionContainer plain={false} actions={actionsItems}>
-                    <TransformComponent>{childStories}</TransformComponent>
-                  </ActionContainer>
-                );
-              }}
-            </TransformWrapper>
-            {panelsElement}
-          </div>
-        )
-      }
+      {() => (
+        <ActionContainer plain={false} actions={actionsItems}>
+          <Zoom scale={scale}>{children}</Zoom>
+          <Collapsible isOpen={tabsIndex !== undefined}>
+            {panels.length === 1 ? (
+              panels[0].panel
+            ) : (
+              <Tabs
+                selectedIndex={tabsIndex || 0}
+                onSelect={(index: number) => setTabsIndex(index)}
+              >
+                <TabList
+                  style={{
+                    textAlign: 'right',
+                  }}
+                >
+                  {panels.map((panel: ActionItem) => (
+                    <Tab key={`playground_tab_${panel.title}`}>
+                      {panel.title}
+                    </Tab>
+                  ))}
+                </TabList>
+                {panels.map((panel: ActionItem) => (
+                  <TabPanel key={`playground_panel_${panel.title}`}>
+                    {panel.panel}
+                  </TabPanel>
+                ))}
+              </Tabs>
+            )}
+          </Collapsible>
+        </ActionContainer>
+      )}
     </StoryBlockContainer>
   );
 };
-
-Playground.defaultProps = {
-  transform: {
-    options: {
-      limitToBounds: true,
-      transformEnabled: true,
-      disabled: false,
-      limitToWrapper: false,
-    },
-    pan: {
-      disabled: false,
-      lockAxisX: false,
-      lockAxisY: false,
-      velocityEqualToMove: true,
-      velocity: true,
-    },
-    pinch: {
-      disabled: false,
-    },
-    doubleClick: {
-      disabled: false,
-    },
-    wheel: {
-      wheelEnabled: true,
-      touchPadEnabled: true,
-      limitsOnWheel: false,
-    },
-  },
-};
diff --git a/ui/components/src/Zoom/Zoom.stories.tsx b/ui/components/src/Zoom/Zoom.stories.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Zoom } from './Zoom';
+import { Donut } from 'theme-ui';
+import { ActionContainer } from '../ActionContainer';
+
+export default {
+  title: 'Components/Zoom',
+  component: Zoom,
+};
+
+export const overview = () => {
+  const [scale, setScale] = React.useState(1);
+  return (
+    <ActionContainer
+      actions={[
+        {
+          title: 'reset',
+          onClick: () => setScale(1),
+        },
+        {
+          title: 'zoom out',
+          onClick: () => setScale(scale / 2),
+        },
+        {
+          title: 'zoom in',
+          onClick: () => setScale(scale * 2),
+        },
+      ]}
+    >
+      <Zoom scale={scale}>
+        <Donut value={1 / 2} />
+      </Zoom>
+    </ActionContainer>
+  );
+};
diff --git a/ui/components/src/Zoom/Zoom.tsx b/ui/components/src/Zoom/Zoom.tsx
@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import { Box } from 'theme-ui';
+
+export interface ZoomProps {
+  /**
+   * default scale
+   */
+  scale?: number;
+}
+
+/**
+ * zooming transform component
+ */
+export const Zoom: FC<ZoomProps> = ({ scale = 1, children }) => {
+  return (
+    <Box
+      css={{
+        overflow: scale === 1 ? 'inherit' : 'hidden',
+      }}
+    >
+      <Box
+        css={{
+          position: 'relative',
+          transform: `scale(${scale})`,
+          transformOrigin: 'top left',
+          transition: 'transform .2s',
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+};
diff --git a/ui/components/src/Zoom/index.ts b/ui/components/src/Zoom/index.ts
@@ -0,0 +1 @@
+export * from './Zoom';
diff --git a/ui/components/src/index.ts b/ui/components/src/index.ts
@@ -12,3 +12,4 @@ export * from './Tabs';
 export * from './ThemeContext';
 export * from './Title';
 export * from './Toggle';
+export * from './Zoom';