forked from sombochea/verdaccio-ui
b56e43846b
* refactor(162): added forwardRef Card * refactor(162): introduced forwardRefDivider * refactor(162): introduced forwardRef MuiComponents * refactor(162): introducing forwardRef * refactor(162): introduced forwardRef * refactor(162): introduced forwardRef * fix(162): fixed link * fix: fixed port number * fix: fixed duplicated id * fix: fixed ref iconbutton * fix: updated snaps * fix: fixed port * fix: fixed eslint errors * fix: the item should be a button * fix: fixed eslint errors
97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
import React, { Component } from 'react';
|
|
import { css } from 'emotion';
|
|
|
|
import CopyToClipBoard from '../CopyToClipBoard';
|
|
import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
|
|
import { NODE_MANAGER } from '../../utils/constants';
|
|
import { default as Typography } from '../../muiComponents/Heading';
|
|
import Tabs from '../../muiComponents/Tabs';
|
|
import Tab from '../../muiComponents/Tab';
|
|
|
|
import { CommandContainer } from './styles';
|
|
import { Props, State } from './types';
|
|
|
|
/* eslint react/prop-types:0 */
|
|
function TabContainer({ children }): JSX.Element {
|
|
return (
|
|
<CommandContainer>
|
|
<Typography
|
|
className={css`
|
|
padding: 0;
|
|
min-height: 170;
|
|
`}
|
|
component="div">
|
|
{children}
|
|
</Typography>
|
|
</CommandContainer>
|
|
);
|
|
}
|
|
|
|
class RegistryInfoContent extends Component<Props, State> {
|
|
public state = {
|
|
tabPosition: 0,
|
|
};
|
|
|
|
public render(): JSX.Element {
|
|
return <div>{this.renderTabs()}</div>;
|
|
}
|
|
|
|
private handleChange = (event: React.ChangeEvent<{}>, tabPosition: number) => {
|
|
event.preventDefault();
|
|
this.setState({ tabPosition });
|
|
};
|
|
|
|
private renderTabs(): JSX.Element {
|
|
const { scope, registryUrl } = this.props;
|
|
const { tabPosition } = this.state;
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Tabs
|
|
indicatorColor="primary"
|
|
onChange={this.handleChange}
|
|
textColor="primary"
|
|
value={tabPosition}
|
|
variant="fullWidth">
|
|
<Tab label={NODE_MANAGER.npm} />
|
|
<Tab label={NODE_MANAGER.pnpm} />
|
|
<Tab label={NODE_MANAGER.yarn} />
|
|
</Tabs>
|
|
{tabPosition === 0 && <TabContainer>{this.renderNpmTab(scope, registryUrl)}</TabContainer>}
|
|
{tabPosition === 1 && <TabContainer>{this.renderPNpmTab(scope, registryUrl)}</TabContainer>}
|
|
{tabPosition === 2 && <TabContainer>{this.renderYarnTab(scope, registryUrl)}</TabContainer>}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
private renderNpmTab(scope: string, registryUrl: string): JSX.Element {
|
|
return (
|
|
<React.Fragment>
|
|
<CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)} />
|
|
<CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)} />
|
|
<CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} />
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
private renderPNpmTab(scope: string, registryUrl: string): JSX.Element {
|
|
return (
|
|
<React.Fragment>
|
|
<CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)} />
|
|
<CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)} />
|
|
<CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)} />
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
private renderYarnTab(scope: string, registryUrl: string): JSX.Element {
|
|
return (
|
|
<React.Fragment>
|
|
<CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)} />
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default RegistryInfoContent;
|