sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2026-01-20 10:06:07 +07:00
Code Issues Releases Wiki Activity

fix: refactor/116 RegistryInfoContent is converted to functional component (#229)

Browse Source 
* refactor:116[PackageList] component is converted to functional

* Refactor:#116 - Registry info content is converted to functional component

* refactor/116 - fix lint error

* refactor:116 - more lint errors

* refactor/116 - lint error

* refactor:116 - remove snapshot

* refactor: address code review comments #116

* refactor: fix lint error

* refactor: code review changes

* refactor add missed file

* refactor: lint error

* refactor: lint

* refactor: lint

* refactor: fix lint error
This commit is contained in:
Alfonso Austin
2019-11-02 12:53:21 -04:00
committed by Juan Picado @jotadeveloper
parent 803da1c532
commit b74ca2285e
4 changed files with 89 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/RegistryInfoContent/RegistryInfoContent.tsx
View File

@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { useState } from 'react';
import { css } from 'emotion';
import CopyToClipBoard from '../CopyToClipBoard';
@@ -11,86 +11,77 @@ 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) => {
const RegistryInfoContent: React.FC<Props> = props => {
const [tabPosition, setTabPosition] = useState<State['tabPosition']>(0);
const handleChange = (event: React.ChangeEvent<{}>, tabPosition: number): void => {
event.preventDefault();
this.setState({ tabPosition });
setTabPosition(tabPosition);
};
private renderTabs(): JSX.Element {
const { scope, registryUrl } = this.props;
const { tabPosition } = this.state;
const renderNpmTab = (scope: string, registryUrl: string): JSX.Element => {
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 {
const 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>
</>
);
}
};
const renderYarnTab = (scope: string, registryUrl: string): JSX.Element => {
return <CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)} />;
};
const renderTabs = (): JSX.Element => {
const { scope, registryUrl } = props;
private renderYarnTab(scope: string, registryUrl: string): JSX.Element {
return (
<React.Fragment>
<CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)} />
</React.Fragment>
<>
<Tabs
data-testid={'tabs-el'}
indicatorColor="primary"
onChange={handleChange}
textColor="primary"
value={tabPosition}
variant="fullWidth">
<Tab data-testid={'npm-tab'} label={NODE_MANAGER.npm} />
<Tab data-testid={'pnpm-tab'} label={NODE_MANAGER.pnpm} />
<Tab data-testid={'yarn-tab'} label={NODE_MANAGER.yarn} />
</Tabs>
{tabPosition === 0 && <TabContainer>{renderNpmTab(scope, registryUrl)}</TabContainer>}
{tabPosition === 1 && <TabContainer>{renderPnpmTab(scope, registryUrl)}</TabContainer>}
{tabPosition === 2 && <TabContainer>{renderYarnTab(scope, registryUrl)}</TabContainer>}
</>
);
}
}
};
/* eslint react/prop-types:0 */
const TabContainer = ({ children }): JSX.Element => {
return (
<CommandContainer>
<Typography
className={css`
padding: 0;
min-height: 170;
`}
component="div">
{children}
</Typography>
</CommandContainer>
);
};
return <div>{renderTabs()}</div>;
};
export default RegistryInfoContent;