feat: use new Context API for options

2024-11-22 08:36:33 +03:00 · 2018-03-17 22:04:37 +02:00 · 2018-03-17 22:04:37 +02:00 · e0223494c2
commit e0223494c2
parent ebb9b7ee52
9 changed files with 163 additions and 150 deletions
--- a/package.json
+++ b/package.json
@ -67,8 +67,8 @@
    "prettier-eslint": "^8.8.1",
    "puppeteer": "^1.2.0",
    "raf": "^3.4.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.0-alpha.2",
+    "react-dom": "^16.3.0-alpha.2",
    "rimraf": "^2.6.2",
    "shelljs": "^0.8.1",
    "source-map-loader": "^0.2.1",
@ -158,8 +158,14 @@
    "collectCoverageFrom": [
      "src/**/*.{ts,tsx}"
    ],
-    "coverageReporters": ["json", "lcov", "text-summary"],
-    "coveragePathIgnorePatterns": ["\\.d\\.ts$"]
+    "coverageReporters": [
+      "json",
+      "lcov",
+      "text-summary"
+    ],
+    "coveragePathIgnorePatterns": [
+      "\\.d\\.ts$"
+    ]
  },
  "prettier": {
    "singleQuote": true,
--- a/src/components/Endpoint/Endpoint.tsx
+++ b/src/components/Endpoint/Endpoint.tsx
@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ShelfIcon } from '../../common-elements';
 import { OperationModel } from '../../services';
-import { ComponentWithOptions } from '../OptionsProvider';
+import { OptionsContext } from '../OptionsProvider';
 import { SelectOnClick } from '../SelectOnClick/SelectOnClick';

 import {
@ -25,7 +25,7 @@ export interface EndpointState {
  expanded: boolean;
 }

-export class Endpoint extends ComponentWithOptions<EndpointProps, EndpointState> {
+export class Endpoint extends React.Component<EndpointProps, EndpointState> {
  constructor(props) {
    super(props);
    this.state = {
@ -38,39 +38,41 @@ export class Endpoint extends ComponentWithOptions<EndpointProps, EndpointState>
  };

  render() {
-    const { operation, inverted } = this.props;
+    const { operation, inverted, hideHostname } = this.props;
    const { expanded } = this.state;

-    const hideHostname = this.props.hideHostname || this.options.hideHostname;
-
    // TODO: highlight server variables, e.g. https://{user}.test.com
    return (
-      <OperationEndpointWrap>
-        <EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
-          <HttpVerb type={operation.httpVerb}> {operation.httpVerb}</HttpVerb>{' '}
-          <ServerRelativeURL>{operation.path}</ServerRelativeURL>
-          <ShelfIcon
-            float={'right'}
-            color={inverted ? 'black' : 'white'}
-            size={'20px'}
-            direction={expanded ? 'up' : 'down'}
-            style={{ marginRight: '-25px' }}
-          />
-        </EndpointInfo>
-        <ServersOverlay expanded={expanded}>
-          {operation.servers.map(server => (
-            <ServerItem key={server.url}>
-              <div>{server.description}</div>
-              <SelectOnClick>
-                <ServerUrl>
-                  {!hideHostname && <span>{server.url}</span>}
-                  {operation.path}
-                </ServerUrl>
-              </SelectOnClick>
-            </ServerItem>
-          ))}
-        </ServersOverlay>
-      </OperationEndpointWrap>
+      <OptionsContext.Consumer>
+        {options => (
+          <OperationEndpointWrap>
+            <EndpointInfo onClick={this.toggle} expanded={expanded} inverted={inverted}>
+              <HttpVerb type={operation.httpVerb}> {operation.httpVerb}</HttpVerb>{' '}
+              <ServerRelativeURL>{operation.path}</ServerRelativeURL>
+              <ShelfIcon
+                float={'right'}
+                color={inverted ? 'black' : 'white'}
+                size={'20px'}
+                direction={expanded ? 'up' : 'down'}
+                style={{ marginRight: '-25px' }}
+              />
+            </EndpointInfo>
+            <ServersOverlay expanded={expanded}>
+              {operation.servers.map(server => (
+                <ServerItem key={server.url}>
+                  <div>{server.description}</div>
+                  <SelectOnClick>
+                    <ServerUrl>
+                      {!(hideHostname || options.hideHostname) && <span>{server.url}</span>}
+                      {operation.path}
+                    </ServerUrl>
+                  </SelectOnClick>
+                </ServerItem>
+              ))}
+            </ServersOverlay>
+          </OperationEndpointWrap>
+        )}
+      </OptionsContext.Consumer>
    );
  }
 }
--- a/src/components/Markdown/Markdown.tsx
+++ b/src/components/Markdown/Markdown.tsx
@ -3,7 +3,7 @@ import styled from '../../styled-components';

 import * as DOMPurify from 'dompurify';
 import { AppStore, MarkdownRenderer } from '../../services';
-import { ComponentWithOptions } from '../OptionsProvider';
+import { OptionsContext } from '../OptionsProvider';

 import { markdownCss } from './styles';

@ -24,7 +24,7 @@ export interface MarkdownProps {
  store?: AppStore;
 }

-class InternalMarkdown extends ComponentWithOptions<MarkdownProps> {
+class InternalMarkdown extends React.Component<MarkdownProps> {
  constructor(props: MarkdownProps) {
    super(props);

@ -40,10 +40,7 @@ class InternalMarkdown extends ComponentWithOptions<MarkdownProps> {
      throw new Error('When using components with Markdwon in ReDoc, store prop must be provided');
    }

-    const sanitize =
-      this.props.sanitize || this.options.untrustedSpec
-        ? (html: string) => DOMPurify.sanitize(html)
-        : (html: string) => html;
+    const sanitize = (untrustedSpec, html) => (untrustedSpec ? DOMPurify.sanitize(html) : html);

    const renderer = new MarkdownRenderer();
    const parts = components
@ -62,26 +59,36 @@ class InternalMarkdown extends ComponentWithOptions<MarkdownProps> {
      appendClass += ' -inline';
    }

-    if (inline) {
-      return (
-        <span
-          className={className + appendClass}
-          dangerouslySetInnerHTML={{ __html: sanitize(parts[0] as string) }}
-        />
-      );
-    }
-
    return (
-      <div className={className + appendClass}>
-        {parts.map(
-          (part, idx) =>
-            typeof part === 'string' ? (
-              <div key={idx} dangerouslySetInnerHTML={{ __html: sanitize(part) }} />
-            ) : (
-              <part.component key={idx} {...{ ...part.attrs, ...part.propsSelector(store) }} />
-            ),
-        )}
-      </div>
+      <OptionsContext.Consumer>
+        {options =>
+          inline ? (
+            <span
+              className={className + appendClass}
+              dangerouslySetInnerHTML={{
+                __html: sanitize(options.untrustedSpec, parts[0] as string),
+              }}
+            />
+          ) : (
+            <div className={className + appendClass}>
+              {parts.map(
+                (part, idx) =>
+                  typeof part === 'string' ? (
+                    <div
+                      key={idx}
+                      dangerouslySetInnerHTML={{ __html: sanitize(options.untrustedSpec, part) }}
+                    />
+                  ) : (
+                    <part.component
+                      key={idx}
+                      {...{ ...part.attrs, ...part.propsSelector(store) }}
+                    />
+                  ),
+              )}
+            </div>
+          )
+        }
+      </OptionsContext.Consumer>
    );
  }
 }
--- a/src/components/Operation/Operation.tsx
+++ b/src/components/Operation/Operation.tsx
@ -6,7 +6,7 @@ import { observer } from 'mobx-react';

 import { Badge, DarkRightPanel, H2, MiddlePanel, Row } from '../../common-elements';

-import { ComponentWithOptions } from '../OptionsProvider';
+import { OptionsContext } from '../OptionsProvider';

 import { ShareLink } from '../../common-elements/linkify';
 import { Endpoint } from '../Endpoint/Endpoint';
@ -40,31 +40,34 @@ interface OperationProps {
 }

@observer
-export class Operation extends ComponentWithOptions<OperationProps> {
+export class Operation extends React.Component<OperationProps> {
  render() {
    const { operation } = this.props;

    const { name: summary, description, deprecated } = operation;
-    const pathInMiddle = this.options.pathInMiddlePanel;
    return (
-      <OperationRow>
-        <MiddlePanel>
-          <H2>
-            <ShareLink href={'#' + operation.getHash()} />
-            {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
-          </H2>
-          {pathInMiddle && <Endpoint operation={operation} inverted={true} />}
-          {description !== undefined && <Markdown source={description} />}
-          <SecurityRequirements securities={operation.security} />
-          <Parameters parameters={operation.parameters} body={operation.requestBody} />
-          <ResponsesList responses={operation.responses} />
-        </MiddlePanel>
-        <DarkRightPanel>
-          {!pathInMiddle && <Endpoint operation={operation} />}
-          <RequestSamples operation={operation} />
-          <ResponseSamples operation={operation} />
-        </DarkRightPanel>
-      </OperationRow>
+      <OptionsContext.Consumer>
+        {options => (
+          <OperationRow>
+            <MiddlePanel>
+              <H2>
+                <ShareLink href={'#' + operation.getHash()} />
+                {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
+              </H2>
+              {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}
+              {description !== undefined && <Markdown source={description} />}
+              <SecurityRequirements securities={operation.security} />
+              <Parameters parameters={operation.parameters} body={operation.requestBody} />
+              <ResponsesList responses={operation.responses} />
+            </MiddlePanel>
+            <DarkRightPanel>
+              {!options.pathInMiddlePanel && <Endpoint operation={operation} />}
+              <RequestSamples operation={operation} />
+              <ResponseSamples operation={operation} />
+            </DarkRightPanel>
+          </OperationRow>
+        )}
+      </OptionsContext.Consumer>
    );
  }
 }
--- a/src/components/OptionsProvider.ts
+++ b/src/components/OptionsProvider.ts
@ -3,32 +3,19 @@ import * as React from 'react';

 import { RedocNormalizedOptions } from '../services/RedocNormalizedOptions';

-export interface OptionsProviderProps {
-  options: RedocNormalizedOptions;
+// TODO: contribute declarations to @types/react once 16.3 is released
+type ReactProviderComponent<T> = React.ComponentType<{ value: T }>;
+type ReactConsumerComponent<T> = React.ComponentType<{ children: ((value: T) => React.ReactNode) }>;
+
+interface ReactContext<T> {
+  Provider: ReactProviderComponent<T>;
+  Consumer: ReactConsumerComponent<T>;
 }

-export class OptionsProvider extends React.Component<OptionsProviderProps> {
-  static childContextTypes = {
-    redocOptions: PropTypes.object.isRequired,
-  };
-
-  getChildContext() {
-    return {
-      redocOptions: this.props.options,
-    };
-  }
-
-  render() {
-    return React.Children.only(this.props.children);
-  }
+declare module 'react' {
+  function createContext<T>(defatulValue: T): ReactContext<T>;
 }

-export class ComponentWithOptions<P = {}, S = {}> extends React.Component<P, S> {
-  static contextTypes = {
-    redocOptions: PropTypes.object,
-  };
-
-  get options(): RedocNormalizedOptions {
-    return this.context.redocOptions || {};
-  }
-}
+export const OptionsContext = React.createContext(new RedocNormalizedOptions({}));
+export const OptionsProvider = OptionsContext.Provider;
+export const OptionsConsumer = OptionsContext.Consumer;
--- a/src/components/Redoc/Redoc.tsx
+++ b/src/components/Redoc/Redoc.tsx
@ -36,7 +36,7 @@ export class Redoc extends React.Component<RedocProps> {
    const store = this.props.store;
    return (
      <ThemeProvider theme={options.theme}>
-        <OptionsProvider options={options}>
+        <OptionsProvider value={options}>
          <RedocWrap className="redoc-wrap">
            <StickyResponsiveSidebar menu={menu} className="menu-content">
              <ApiLogo info={spec.info} />
--- a/src/components/SideMenu/SideMenu.tsx
+++ b/src/components/SideMenu/SideMenu.tsx
@ -1,6 +1,6 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { ComponentWithOptions } from '../OptionsProvider';
+import { OptionsContext } from '../OptionsProvider';

 import { IMenuItem, MenuStore } from '../../services/MenuStore';
 import { MenuItems } from './MenuItems';
@ -8,25 +8,30 @@ import { MenuItems } from './MenuItems';
 import { PerfectScrollbar } from '../../common-elements/perfect-scrollbar';

@observer
-export class SideMenu extends ComponentWithOptions<{ menu: MenuStore }> {
+export class SideMenu extends React.Component<{ menu: MenuStore }> {
  private _updateScroll?: () => void;

  render() {
    const store = this.props.menu;
-    const nativeScrollbars = this.options.nativeScrollbars;
-    return nativeScrollbars ? (
-      <MenuItems
-        style={{
-          overflow: 'auto',
-          msOverflowStyle: '-ms-autohiding-scrollbar',
-        }}
-        items={store.items}
-        onActivate={this.activate}
-      />
-    ) : (
-      <PerfectScrollbar updateFn={this.saveScrollUpdate}>
-        <MenuItems items={store.items} onActivate={this.activate} />
-      </PerfectScrollbar>
+    return (
+      <OptionsContext.Consumer>
+        {options =>
+          options.nativeScrollbars ? (
+            <MenuItems
+              style={{
+                overflow: 'auto',
+                msOverflowStyle: '-ms-autohiding-scrollbar',
+              }}
+              items={store.items}
+              onActivate={this.activate}
+            />
+          ) : (
+            <PerfectScrollbar updateFn={this.saveScrollUpdate}>
+              <MenuItems items={store.items} onActivate={this.activate} />
+            </PerfectScrollbar>
+          )
+        }
+      </OptionsContext.Consumer>
    );
  }

--- a/src/components/StickySidebar/StickyResponsiveSidebar.tsx
+++ b/src/components/StickySidebar/StickyResponsiveSidebar.tsx
@ -4,7 +4,7 @@ import * as React from 'react';
 import { MenuStore } from '../../services/MenuStore';
 import { RedocNormalizedOptions, RedocRawOptions } from '../../services/RedocNormalizedOptions';
 import styled, { media, withProps } from '../../styled-components';
-import { ComponentWithOptions } from '../OptionsProvider';
+import { OptionsContext } from '../OptionsProvider';
 import { AnimatedChevronButton } from './ChevronSvg';

 let Stickyfill;
@ -67,7 +67,7 @@ const FloatingButton = styled.div`
 `;

@observer
-export class StickyResponsiveSidebar extends ComponentWithOptions<StickySidebarProps> {
+export class StickyResponsiveSidebar extends React.Component<StickySidebarProps> {
  stickyElement: Element;

  componentDidMount() {
@ -82,39 +82,42 @@ export class StickyResponsiveSidebar extends ComponentWithOptions<StickySidebarP
    }
  }

-  get scrollYOffset() {
+  getScrollYOffset(options) {
    let top;
    if (this.props.scrollYOffset !== undefined) {
      top = RedocNormalizedOptions.normalizeScrollYOffset(this.props.scrollYOffset)();
    } else {
-      top = this.options.scrollYOffset();
+      top = options.scrollYOffset();
    }
    return top + 'px';
  }

  render() {
-    const top = this.scrollYOffset;
    const open = this.props.menu.sideBarOpened;

    const height = `calc(100vh - ${top})`;

    return (
-      <>
-        <StyledStickySidebar
-          open={open}
-          className={this.props.className}
-          style={{ top, height }}
-          // tslint:disable-next-line
-          innerRef={el => {
-            this.stickyElement = el;
-          }}
-        >
-          {this.props.children}
-        </StyledStickySidebar>
-        <FloatingButton onClick={this.toggleNavMenu}>
-          <AnimatedChevronButton open={open} />
-        </FloatingButton>
-      </>
+      <OptionsContext.Consumer>
+        {options => (
+          <>
+            <StyledStickySidebar
+              open={open}
+              className={this.props.className}
+              style={{ top: this.getScrollYOffset(options), height }}
+              // tslint:disable-next-line
+              innerRef={el => {
+                this.stickyElement = el;
+              }}
+            >
+              {this.props.children}
+            </StyledStickySidebar>
+            <FloatingButton onClick={this.toggleNavMenu}>
+              <AnimatedChevronButton open={open} />
+            </FloatingButton>
+          </>
+        )}
+      </OptionsContext.Consumer>
    );
  }

--- a/yarn.lock
+++ b/yarn.lock
@ -7547,9 +7547,9 @@ rc@^1.1.7:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

-react-dom@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
+react-dom@^16.3.0-alpha.2:
+  version "16.3.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.0-alpha.2.tgz#a970b6185684941e89a568c09321d22643457cb6"
  dependencies:
    fbjs "^0.8.16"
    loose-envify "^1.1.0"
@ -7596,9 +7596,9 @@ react-test-renderer@^16.0.0-0:
    object-assign "^4.1.1"
    prop-types "^15.6.0"

-react@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+react@^16.3.0-alpha.2:
+  version "16.3.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.3.0-alpha.2.tgz#91e2b82bb985b23e7b6555f810e1fd94894afce2"
  dependencies:
    fbjs "^0.8.16"
    loose-envify "^1.1.0"