diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx new file mode 100644 index 00000000..c8b6c4a5 --- /dev/null +++ b/src/components/Loading/Loading.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import styled, { withProps } from '../../styled-components'; + +import { Spinner } from './Spinner.svg'; + +const LoadingMessage = withProps<{ color: string }>(styled.div)` + font-family: helvetica, sans; + width: 100%; + text-align: center; + font-size: 25px; + margin: 30px 0 20px 0; + color: ${props => props.color}; +`; + +export interface LoadingProps { + color: string; +} + +export class Loading extends React.PureComponent { + render() { + console.log('loading'); + return ( +
+ Loading ... + +
+ ); + } +} diff --git a/src/components/LoadingWrap/Spinner.svg.tsx b/src/components/Loading/Spinner.svg.tsx similarity index 95% rename from src/components/LoadingWrap/Spinner.svg.tsx rename to src/components/Loading/Spinner.svg.tsx index 0361720b..fd9d73d8 100644 --- a/src/components/LoadingWrap/Spinner.svg.tsx +++ b/src/components/Loading/Spinner.svg.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled, { keyframes } from '../../styled-components'; -const _Spinner = (props: { className?: string }) => ( +const _Spinner = (props: { className?: string; color: string }) => ( @@ -31,6 +31,6 @@ export const Spinner = styled(_Spinner)` margin-left: -25px; path { - fill: black; + fill: ${props => props.color}; } `; diff --git a/src/components/LoadingWrap/LoadingWrap.tsx b/src/components/LoadingWrap/LoadingWrap.tsx deleted file mode 100644 index 6c34f3f9..00000000 --- a/src/components/LoadingWrap/LoadingWrap.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import { Children } from 'react'; -import styled from '../../styled-components'; - -import { Spinner } from './Spinner.svg'; - -const LoadingMessage = styled.div` - font-family: black; - width: 100%; - text-align: center; - font-size: 25px; - margin: 30px 0 20px 0; - color: black; -`; - -export class LoadingWrap extends React.Component<{ loading: boolean }> { - render() { - if (!this.props.loading) { - return Children.only(this.props.children); - } - return ( -
- Loading ... - -
- ); - } -} diff --git a/src/components/RedocStandalone.tsx b/src/components/RedocStandalone.tsx index 2c805e7f..2c2923bf 100644 --- a/src/components/RedocStandalone.tsx +++ b/src/components/RedocStandalone.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import { LoadingWrap } from './LoadingWrap/LoadingWrap'; +import { Loading } from './Loading/Loading'; import { StoreProvider } from './StoreProvider'; import { ErrorBoundary } from './ErrorBoundary'; import { Redoc } from './Redoc/Redoc'; -import { RedocRawOptions } from '../services/RedocNormalizedOptions'; +import { RedocNormalizedOptions, RedocRawOptions } from '../services/RedocNormalizedOptions'; export interface RedocStandaloneProps { spec?: object; @@ -34,16 +34,21 @@ export class RedocStandalone extends React.Component { }; render() { - const { spec, specUrl, options } = this.props; + const { spec, specUrl, options = {} } = this.props; + const hideLoading = options.hideLoading !== undefined; + + const normalizedOpts = new RedocNormalizedOptions(options); return ( - {({ loading, store }) => ( - - - - )} + {({ loading, store }) => + !loading ? ( + + ) : hideLoading ? null : ( + + ) + } ); diff --git a/src/components/StoreProvider.ts b/src/components/StoreProvider.ts index 103c8192..441c6527 100644 --- a/src/components/StoreProvider.ts +++ b/src/components/StoreProvider.ts @@ -4,26 +4,26 @@ import { AppStore } from '../services/'; import { loadAndBundleSpec } from '../utils'; import { RedocRawOptions } from '../services/RedocNormalizedOptions'; -interface SpecProps { +interface StoreProviderProps { specUrl?: string; spec?: object; store?: AppStore; options?: RedocRawOptions; - children?: any; + children: (props: { loading: boolean; store?: AppStore }) => any; } -interface SpecState { +interface StoreProviderState { error?: Error; loading: boolean; store?: AppStore; } -export class StoreProvider extends Component { +export class StoreProvider extends Component { store: AppStore; - constructor(props: SpecProps) { + constructor(props: StoreProviderProps) { super(props); this.state = { diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts index 83b271cd..70428ed9 100644 --- a/src/services/RedocNormalizedOptions.ts +++ b/src/services/RedocNormalizedOptions.ts @@ -11,6 +11,7 @@ export interface RedocRawOptions { noAutoAuth?: boolean | string; nativeScrollbars?: boolean | string; pathInMiddlePanel?: boolean | string; + hideLoading?: boolean | string; } function argValueToBoolean(val?: string | boolean): boolean {