2019-11-02 23:53:21 +07:00
|
|
|
import React, { useState } from 'react';
|
2019-11-23 19:41:14 +07:00
|
|
|
import { css } from '@emotion/core';
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-10-08 03:19:18 +07:00
|
|
|
import CopyToClipBoard from '../CopyToClipBoard';
|
2019-02-03 17:23:33 +07:00
|
|
|
import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
|
|
|
|
import { NODE_MANAGER } from '../../utils/constants';
|
2019-10-13 02:41:42 +07:00
|
|
|
import { default as Typography } from '../../muiComponents/Heading';
|
2019-10-31 14:12:18 +07:00
|
|
|
import Tabs from '../../muiComponents/Tabs';
|
|
|
|
import Tab from '../../muiComponents/Tab';
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-10-08 03:19:18 +07:00
|
|
|
import { CommandContainer } from './styles';
|
|
|
|
import { Props, State } from './types';
|
|
|
|
|
2019-11-02 23:53:21 +07:00
|
|
|
const RegistryInfoContent: React.FC<Props> = props => {
|
|
|
|
const [tabPosition, setTabPosition] = useState<State['tabPosition']>(0);
|
|
|
|
const handleChange = (event: React.ChangeEvent<{}>, tabPosition: number): void => {
|
|
|
|
event.preventDefault();
|
|
|
|
setTabPosition(tabPosition);
|
|
|
|
};
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-11-02 23:53:21 +07:00
|
|
|
const renderNpmTab = (scope: string, registryUrl: string): JSX.Element => {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)} />
|
|
|
|
<CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)} />
|
|
|
|
<CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} />
|
|
|
|
</>
|
|
|
|
);
|
2019-02-03 17:23:33 +07:00
|
|
|
};
|
|
|
|
|
2019-11-02 23:53:21 +07:00
|
|
|
const renderPnpmTab = (scope: string, registryUrl: string): JSX.Element => {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)} />
|
|
|
|
<CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)} />
|
|
|
|
<CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)} />
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-11-02 23:53:21 +07:00
|
|
|
const renderYarnTab = (scope: string, registryUrl: string): JSX.Element => {
|
|
|
|
return <CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)} />;
|
2019-06-25 05:01:13 +07:00
|
|
|
};
|
|
|
|
|
2019-11-02 23:53:21 +07:00
|
|
|
const renderTabs = (): JSX.Element => {
|
|
|
|
const { scope, registryUrl } = props;
|
2019-02-03 17:23:33 +07:00
|
|
|
|
|
|
|
return (
|
2019-11-02 23:53:21 +07:00
|
|
|
<>
|
2019-10-27 21:49:30 +07:00
|
|
|
<Tabs
|
2019-11-02 23:53:21 +07:00
|
|
|
data-testid={'tabs-el'}
|
2019-10-27 21:49:30 +07:00
|
|
|
indicatorColor="primary"
|
2019-11-02 23:53:21 +07:00
|
|
|
onChange={handleChange}
|
2019-10-27 21:49:30 +07:00
|
|
|
textColor="primary"
|
|
|
|
value={tabPosition}
|
|
|
|
variant="fullWidth">
|
2019-11-02 23:53:21 +07:00
|
|
|
<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} />
|
2019-02-03 17:23:33 +07:00
|
|
|
</Tabs>
|
2019-11-02 23:53:21 +07:00
|
|
|
{tabPosition === 0 && <TabContainer>{renderNpmTab(scope, registryUrl)}</TabContainer>}
|
|
|
|
{tabPosition === 1 && <TabContainer>{renderPnpmTab(scope, registryUrl)}</TabContainer>}
|
|
|
|
{tabPosition === 2 && <TabContainer>{renderYarnTab(scope, registryUrl)}</TabContainer>}
|
|
|
|
</>
|
2019-02-03 17:23:33 +07:00
|
|
|
);
|
2019-11-02 23:53:21 +07:00
|
|
|
};
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-11-02 23:53:21 +07:00
|
|
|
/* eslint react/prop-types:0 */
|
|
|
|
const TabContainer = ({ children }): JSX.Element => {
|
2019-02-03 17:23:33 +07:00
|
|
|
return (
|
2019-11-02 23:53:21 +07:00
|
|
|
<CommandContainer>
|
|
|
|
<Typography
|
2019-11-23 19:41:14 +07:00
|
|
|
// className={css`
|
|
|
|
// padding: 0;
|
|
|
|
// min-height: 170;
|
|
|
|
// `}
|
2019-11-02 23:53:21 +07:00
|
|
|
component="div">
|
|
|
|
{children}
|
|
|
|
</Typography>
|
|
|
|
</CommandContainer>
|
2019-02-03 17:23:33 +07:00
|
|
|
);
|
2019-11-02 23:53:21 +07:00
|
|
|
};
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-11-02 23:53:21 +07:00
|
|
|
return <div>{renderTabs()}</div>;
|
|
|
|
};
|
2019-02-03 17:23:33 +07:00
|
|
|
|
|
|
|
export default RegistryInfoContent;
|