Implement new version dropdown and remove it from nestedTopBar
This commit is contained in:
Fabio Berger
parent
e0e011eb66
commit
6baadc746e
@ -8,15 +8,11 @@ import { colors } from '../utils/colors';
|
||||
import { utils } from '../utils/utils';
|
||||
|
||||
import { Link } from './link';
|
||||
import { VersionDropDown } from './version_drop_down';
|
||||
|
||||
export interface NestedSidebarMenuProps {
|
||||
sectionNameToLinks: ObjectMap<ALink[]>;
|
||||
sidebarHeader?: React.ReactNode;
|
||||
shouldDisplaySectionHeaders?: boolean;
|
||||
selectedVersion?: string;
|
||||
versions?: string[];
|
||||
onVersionSelected?: (semver: string) => void;
|
||||
shouldReformatMenuItemNames?: boolean;
|
||||
}
|
||||
|
||||
@ -59,21 +55,9 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
|
||||
return <div key={`section-${sectionName}`}>{this._renderMenuItems(links)}</div>;
|
||||
}
|
||||
});
|
||||
const maxWidthWithScrollbar = 307;
|
||||
return (
|
||||
<div>
|
||||
{this.props.sidebarHeader}
|
||||
{!_.isUndefined(this.props.versions) &&
|
||||
!_.isUndefined(this.props.selectedVersion) &&
|
||||
!_.isUndefined(this.props.onVersionSelected) && (
|
||||
<div style={{ maxWidth: maxWidthWithScrollbar }}>
|
||||
<VersionDropDown
|
||||
selectedVersion={this.props.selectedVersion}
|
||||
versions={this.props.versions}
|
||||
onVersionSelected={this.props.onVersionSelected}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="pl1">{navigation}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import Select from '@material-ui/core/Select';
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
|
||||
export interface VersionDropDownProps {
|
||||
selectedVersion: string;
|
||||
versions: string[];
|
||||
onVersionSelected: (semver: string) => void;
|
||||
}
|
||||
|
||||
export interface VersionDropDownState {}
|
||||
|
||||
export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
|
||||
public render(): React.ReactNode {
|
||||
return (
|
||||
<div className="mx-auto" style={{ width: 120 }}>
|
||||
<Select value={this.props.selectedVersion} onChange={this._updateSelectedVersion.bind(this)}>
|
||||
{this._renderDropDownItems()}
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
private _renderDropDownItems(): React.ReactNode[] {
|
||||
const items = _.map(this.props.versions, version => {
|
||||
return (
|
||||
<MenuItem key={version} value={version}>
|
||||
v{version}
|
||||
</MenuItem>
|
||||
);
|
||||
});
|
||||
return items;
|
||||
}
|
||||
private _updateSelectedVersion(event: React.ChangeEvent<HTMLSelectElement>): void {
|
||||
this.props.onVersionSelected(event.target.value);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,83 @@
|
||||
import { ALink, colors, Link } from '@0xproject/react-shared';
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { Button } from 'ts/components/ui/button';
|
||||
import { Container } from 'ts/components/ui/container';
|
||||
import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
|
||||
import { Text } from 'ts/components/ui/text';
|
||||
import { styled } from 'ts/style/theme';
|
||||
import { Deco, Key, WebsitePaths } from 'ts/types';
|
||||
import { constants } from 'ts/utils/constants';
|
||||
import { Translate } from 'ts/utils/translate';
|
||||
|
||||
interface ActiveNodeProps {
|
||||
className?: string;
|
||||
selectedVersion: string;
|
||||
}
|
||||
|
||||
const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className, selectedVersion }) => (
|
||||
<Container className={className} width="70px">
|
||||
<Container className="flex justify-center">
|
||||
<Text fontColor={colors.grey700} fontSize="12px">
|
||||
v {selectedVersion}
|
||||
</Text>
|
||||
<Container paddingLeft="6px">
|
||||
<i className="zmdi zmdi-chevron-down" style={{ fontSize: 17, color: 'rgba(153, 153, 153, 0.8)' }} />
|
||||
</Container>
|
||||
</Container>
|
||||
</Container>
|
||||
);
|
||||
|
||||
const ActiveNode = styled(PlainActiveNode)`
|
||||
cursor: pointer;
|
||||
border: 2px solid ${colors.beigeWhite};
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px 4px 8px;
|
||||
`;
|
||||
|
||||
interface VersionDropDownProps {
|
||||
selectedVersion: string;
|
||||
versions: string[];
|
||||
onVersionSelected: (semver: string) => void;
|
||||
}
|
||||
|
||||
interface VersionDropDownState {}
|
||||
|
||||
export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
|
||||
public render(): React.ReactNode {
|
||||
const activeNode = <ActiveNode selectedVersion={this.props.selectedVersion} />;
|
||||
return (
|
||||
<DropDown
|
||||
activateEvent={DropdownMouseEvent.Click}
|
||||
activeNode={activeNode}
|
||||
popoverContent={this._renderDropdownMenu()}
|
||||
anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
|
||||
targetOrigin={{ horizontal: 'left', vertical: 'top' }}
|
||||
popoverStyle={{ borderRadius: 4 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
private _renderDropdownMenu(): React.ReactNode {
|
||||
const items = _.map(this.props.versions, version => {
|
||||
const isSelected = version === this.props.selectedVersion;
|
||||
return (
|
||||
<Container>
|
||||
<Button
|
||||
borderRadius="0px"
|
||||
padding="0.8em 0em"
|
||||
width="100%"
|
||||
isDisabled={isSelected}
|
||||
onClick={this._onClick.bind(this, version)}
|
||||
>
|
||||
v {version}
|
||||
</Button>
|
||||
</Container>
|
||||
);
|
||||
});
|
||||
const dropdownMenu = <Container width="88px">{items}</Container>;
|
||||
return dropdownMenu;
|
||||
}
|
||||
private _onClick(selectedVersion: string): void {
|
||||
this.props.onVersionSelected(selectedVersion);
|
||||
}
|
||||
}
|
||||
@ -10,6 +10,7 @@ export interface ButtonProps {
|
||||
fontFamily?: string;
|
||||
backgroundColor?: string;
|
||||
borderColor?: string;
|
||||
borderRadius?: string;
|
||||
width?: string;
|
||||
padding?: string;
|
||||
type?: string;
|
||||
@ -29,7 +30,7 @@ export const Button = styled(PlainButton)`
|
||||
color: ${props => props.fontColor};
|
||||
transition: background-color, opacity 0.5s ease;
|
||||
padding: ${props => props.padding};
|
||||
border-radius: 6px;
|
||||
border-radius: ${props => props.borderRadius};
|
||||
font-weight: 500;
|
||||
outline: none;
|
||||
font-family: ${props => props.fontFamily};
|
||||
@ -52,6 +53,7 @@ export const Button = styled(PlainButton)`
|
||||
|
||||
Button.defaultProps = {
|
||||
fontSize: '12px',
|
||||
borderRadius: '6px',
|
||||
backgroundColor: colors.white,
|
||||
width: 'auto',
|
||||
fontFamily: 'Roboto',
|
||||
|
||||
@ -6,12 +6,15 @@ import {
|
||||
SupportedDocJson,
|
||||
TypeDocUtils,
|
||||
} from '@0xproject/react-docs';
|
||||
import { NestedSidebarMenu } from '@0xproject/react-shared';
|
||||
import { colors, NestedSidebarMenu } from '@0xproject/react-shared';
|
||||
import findVersions = require('find-versions');
|
||||
import * as _ from 'lodash';
|
||||
import CircularProgress from 'material-ui/CircularProgress';
|
||||
import * as React from 'react';
|
||||
import semverSort = require('semver-sort');
|
||||
import { VersionDropDown } from 'ts/components/documentation/version_drop_down';
|
||||
import { Container } from 'ts/components/ui/container';
|
||||
import { Text } from 'ts/components/ui/text';
|
||||
import { DevelopersPage } from 'ts/pages/documentation/developers_page';
|
||||
import { Dispatcher } from 'ts/redux/dispatcher';
|
||||
import { DocPackages, ScreenWidths } from 'ts/types';
|
||||
@ -89,7 +92,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
|
||||
/>
|
||||
);
|
||||
const sidebar = (
|
||||
<NestedSidebarMenu sectionNameToLinks={sectionNameToLinks} shouldReformatMenuItemNames={false} />
|
||||
<NestedSidebarMenu sidebarHeader={this._renderSidebarHeader()} sectionNameToLinks={sectionNameToLinks} />
|
||||
);
|
||||
return (
|
||||
<DevelopersPage
|
||||
@ -102,16 +105,43 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
|
||||
/>
|
||||
);
|
||||
}
|
||||
private _renderSidebarHeader(): React.ReactNode {
|
||||
return (
|
||||
<Container>
|
||||
<Container className="clearfix relative">
|
||||
<Container className="pl1 absolute" bottom="0">
|
||||
<Text fontColor={colors.lightLinkBlue} fontSize="22px" fontWeight="bold">
|
||||
0x.js
|
||||
</Text>
|
||||
</Container>
|
||||
<Container className="right">
|
||||
<VersionDropDown
|
||||
selectedVersion={this.props.docsVersion}
|
||||
versions={this.props.availableDocVersions}
|
||||
onVersionSelected={this._onVersionSelected.bind(this)}
|
||||
/>
|
||||
</Container>
|
||||
</Container>
|
||||
<Container
|
||||
width={'100%'}
|
||||
height={'1px'}
|
||||
backgroundColor={colors.grey300}
|
||||
marginTop="20px"
|
||||
marginBottom="27px"
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
private _renderLoading(): React.ReactNode {
|
||||
return (
|
||||
<div className="pt4">
|
||||
<div className="center pb2">
|
||||
<Container className="pt4">
|
||||
<Container className="center pb2">
|
||||
<CircularProgress size={40} thickness={5} />
|
||||
</div>
|
||||
<div className="center pt2" style={{ paddingBottom: 11 }}>
|
||||
</Container>
|
||||
<Container className="center pt2" paddingBottom="11px">
|
||||
Loading documentation...
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise<void> {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user