import * as React from 'react'; import { render } from 'react-dom'; import styled from 'styled-components'; import { resolve as urlResolve } from 'url'; import { RedocStandalone } from '../src'; import ComboBox from './ComboBox'; const DEFAULT_SPEC = 'openapi.yaml'; const NEW_VERSION_SPEC = 'openapi-3-1.yaml'; const demos = [ { value: NEW_VERSION_SPEC, label: 'Petstore OpenAPI 3.1' }, { value: 'https://api.apis.guru/v2/specs/instagram.com/1.0.0/swagger.yaml', label: 'Instagram' }, { value: 'https://api.apis.guru/v2/specs/googleapis.com/calendar/v3/openapi.yaml', label: 'Google Calendar', }, { value: 'https://api.apis.guru/v2/specs/slack.com/1.5.0/openapi.yaml', label: 'Slack' }, { value: 'https://api.apis.guru/v2/specs/zoom.us/2.0.0/openapi.yaml', label: 'Zoom.us' }, { value: 'https://docs.graphhopper.com/openapi.json', label: 'GraphHopper' }, ]; class DemoApp extends React.Component< {}, { specUrl: string; dropdownOpen: boolean; cors: boolean } > { constructor(props) { super(props); let parts = window.location.search.match(/url=([^&]+)/); let url = DEFAULT_SPEC; if (parts && parts.length > 1) { url = decodeURIComponent(parts[1]); } parts = window.location.search.match(/[?&]nocors(&|#|$)/); let cors = true; if (parts && parts.length > 1) { cors = false; } this.state = { specUrl: url, dropdownOpen: false, cors, }; } handleChange = (url: string) => { if (url === NEW_VERSION_SPEC) { this.setState({ cors: false }) } this.setState({ specUrl: url, }); window.history.pushState( undefined, '', updateQueryStringParameter(location.search, 'url', url), ); }; toggleCors = (e: React.ChangeEvent) => { const cors = e.currentTarget.checked; this.setState({ cors, }); window.history.pushState( undefined, '', updateQueryStringParameter(location.search, 'nocors', cors ? undefined : ''), ); }; render() { const { specUrl, cors } = this.state; let proxiedUrl = specUrl; if (specUrl !== DEFAULT_SPEC) { proxiedUrl = cors ? '\\\\cors.apis.guru/' + urlResolve(window.location.href, specUrl) : specUrl; } return ( <>