IMPROVE performance & typing of lib/api Consumer

storybookjs · Feb 14, 2020 · 79c9c43 · 79c9c43
1 parent 7b9cd15
commit 79c9c43
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 24 deletions.
diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx
@@ -271,12 +271,12 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
 
 interface ManagerConsumerProps<P = unknown> {
   filter?: (combo: Combo) => P;
-  children: ReactNode | FunctionComponent<P>;
+  children: FunctionComponent<P> | ReactNode;
 }
 
 const defaultFilter = (c: Combo) => c;
 
-function ManagerConsumerFunc<P = unknown>({
+function ManagerConsumerFunc<P = Combo>({
   // @ts-ignore
   filter = defaultFilter,
   children,

diff --git a/lib/ui/src/components/preview/preview.tsx b/lib/ui/src/components/preview/preview.tsx
@@ -63,14 +63,7 @@ const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): A
   render: p => {
     return (
       <Consumer filter={mapper}>
-        {({
-          customCanvas,
-          storyId,
-          viewMode,
-          queryParams,
-          getElements,
-          isLoading,
-        }: ReturnType<typeof mapper>) => (
+        {({ customCanvas, storyId, viewMode, queryParams, getElements, isLoading }) => (
           <ZoomConsumer>
             {({ value: scale }) => {
               const wrappers = [...defaultWrappers, ...getWrapper(getElements)];

diff --git a/lib/ui/src/components/preview/toolbar.tsx b/lib/ui/src/components/preview/toolbar.tsx
@@ -39,7 +39,7 @@ export const fullScreenTool: Addon = {
   match: p => p.viewMode === 'story',
   render: () => (
     <Consumer filter={fullScreenMapper}>
-      {({ toggle, value }: ReturnType<typeof fullScreenMapper>) => (
+      {({ toggle, value }) => (
         <S.DesktopOnly>
           <IconButton
             key="full"
@@ -67,7 +67,7 @@ export const copyTool: Addon = {
   match: p => p.viewMode === 'story',
   render: () => (
     <Consumer filter={copyMapper}>
-      {({ baseUrl, storyId, origin, pathname, queryParams }: ReturnType<typeof copyMapper>) => (
+      {({ baseUrl, storyId, origin, pathname, queryParams }) => (
         <IconButton
           key="copy"
           onClick={() =>
@@ -93,7 +93,7 @@ export const ejectTool: Addon = {
   match: p => p.viewMode === 'story',
   render: () => (
     <Consumer filter={ejectMapper}>
-      {({ baseUrl, storyId, queryParams }: ReturnType<typeof ejectMapper>) => (
+      {({ baseUrl, storyId, queryParams }) => (
         <IconButton
           key="opener"
           href={`${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`}
@@ -133,7 +133,7 @@ export const createTabsTool = (tabs: Addon[]): Addon => ({
   title: 'title',
   render: () => (
     <Consumer filter={tabsMapper}>
-      {({ viewMode, storyId, path, location }: ReturnType<typeof tabsMapper>) => (
+      {({ viewMode, storyId, path, location }) => (
         <Fragment>
           <TabBar key="tabs">
             {tabs

diff --git a/lib/ui/src/containers/notifications.tsx b/lib/ui/src/containers/notifications.tsx
@@ -13,9 +13,7 @@ export const mapper = ({ state }: Combo) => {
 };
 
 const NotificationConnect: FunctionComponent<any> = props => (
-  <Consumer filter={mapper}>
-    {(fromState: ReturnType<typeof mapper>) => <Notifications {...props} {...fromState} />}
-  </Consumer>
+  <Consumer filter={mapper}>{fromState => <Notifications {...props} {...fromState} />}</Consumer>
 );
 
 export default NotificationConnect;
diff --git a/lib/ui/src/containers/panel.tsx b/lib/ui/src/containers/panel.tsx
@@ -18,9 +18,7 @@ const mapper = ({ state, api }: Combo) => ({
 });
 
 const Panel: FunctionComponent<any> = props => (
-  <Consumer filter={mapper}>
-    {(customProps: ReturnType<typeof mapper>) => <AddonPanel {...props} {...customProps} />}
-  </Consumer>
+  <Consumer filter={mapper}>{customProps => <AddonPanel {...props} {...customProps} />}</Consumer>
 );
 
 export default Panel;
diff --git a/lib/ui/src/containers/preview.tsx b/lib/ui/src/containers/preview.tsx
@@ -50,7 +50,7 @@ function getBaseUrl(): string {
 
 const PreviewConnected = React.memo<{ id: string; withLoader: boolean }>(props => (
   <Consumer filter={mapper}>
-    {(fromState: ReturnType<typeof mapper>) => {
+    {fromState => {
       const p = {
         ...props,
         baseUrl: getBaseUrl(),

diff --git a/lib/ui/src/containers/sidebar.tsx b/lib/ui/src/containers/sidebar.tsx
@@ -248,9 +248,7 @@ export const mapper = ({ state, api }: Combo) => {
 };
 
 const Sidebar: FunctionComponent<any> = props => (
-  <Consumer filter={mapper}>
-    {(fromState: ReturnType<typeof mapper>) => <SidebarComponent {...props} {...fromState} />}
-  </Consumer>
+  <Consumer filter={mapper}>{fromState => <SidebarComponent {...props} {...fromState} />}</Consumer>
 );
 
 export default Sidebar;