prehistoric-systems/security-checklist
1
0
Fork 0
mirror of https://github.com/brianlovin/security-checklist.git synced 2026-03-11 08:55:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use hooks!

Browse source
This commit is contained in:
Brian Lovin 2019-01-16 17:52:09 -08:00
parent 69f4798ce1
commit b486bb8e7f
1 changed files with 30 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
components/ChecklistItem/Apps.js
View file

@ -1,5 +1,6 @@
// @flow
import React from 'react';
// $FlowIssue
import React, { useState } from 'react';
import { AppsContainer, SectionHeading, ExpandContainer } from './style';
import { Button } from '../Button';
import type { ChecklistResource } from '../../types';
@ -9,45 +10,34 @@ type Props = {
resource: ChecklistResource,
};
type State = {
overflowExpanded: boolean,
};
export const Apps = ({ resource }: Props) => {
const [overflowExpanded, setOverflowExpanded] = useState(false);
export class Apps extends React.Component<Props, State> {
state = { overflowExpanded: false };
if (!resource.apps) return null;
expand = () => this.setState({ overflowExpanded: true });
render() {
const { resource } = this.props;
const { overflowExpanded } = this.state;
if (!resource.apps) return null;
let appList = resource.apps;
let overflowAppList;
if (appList.length > 3) {
overflowAppList = appList.slice(3, appList.length);
appList = appList.slice(0, 3);
}
return (
<AppsContainer overflowExpanded={overflowExpanded}>
<SectionHeading>Apps</SectionHeading>
{appList.map(app => (
<AppRow key={app.name} app={app} />
))}
{overflowAppList && !overflowExpanded && (
<ExpandContainer onClick={this.expand}>
<Button>Show more choices</Button>
</ExpandContainer>
)}
{overflowAppList &&
overflowExpanded &&
overflowAppList.map(app => <AppRow key={app.name} app={app} />)}
</AppsContainer>
);
let appList = resource.apps;
let overflowAppList;
if (appList.length > 3) {
overflowAppList = appList.slice(3, appList.length);
appList = appList.slice(0, 3);
}
}
return (
<AppsContainer overflowExpanded={overflowExpanded}>
<SectionHeading>Apps</SectionHeading>
{appList.map(app => (
<AppRow key={app.name} app={app} />
))}
{overflowAppList && !overflowExpanded && (
<ExpandContainer onClick={() => setOverflowExpanded(true)}>
<Button>Show more choices</Button>
</ExpandContainer>
)}
{overflowAppList &&
overflowExpanded &&
overflowAppList.map(app => <AppRow key={app.name} app={app} />)}
</AppsContainer>
);
};