116 lines
2.8 KiB
JavaScript
116 lines
2.8 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import styled from 'styled-components';
|
|
import { Field } from 'redux-form';
|
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
|
import { Margin } from 'styled-components-spacing';
|
|
import pascalCase from 'pascal-case';
|
|
import titleCase from 'title-case';
|
|
import remcalc from 'remcalc';
|
|
|
|
import * as Assets from 'joyent-logo-assets';
|
|
|
|
import {
|
|
H3,
|
|
P,
|
|
FormGroup,
|
|
SectionList,
|
|
SectionListItem,
|
|
SectionListAnchor,
|
|
H4,
|
|
Select,
|
|
Card
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
const Version = styled(Select)`
|
|
min-width: 100%;
|
|
width: ${remcalc(144)};
|
|
|
|
select {
|
|
margin: 0;
|
|
border-bottom-width: 0;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
`;
|
|
|
|
export const Preview = ({ name, version, isVm }) => (
|
|
<Fragment>
|
|
<Margin bottom={2} top={3}>
|
|
<H3>
|
|
{name} - {version}
|
|
</H3>
|
|
<P>{isVm ? 'Hardware Virtual Machine' : 'Infrastructure Container'} </P>
|
|
</Margin>
|
|
</Fragment>
|
|
);
|
|
|
|
const Image = ({ onClick, active, ...image }) => {
|
|
const { imageName = '', versions = [] } = image;
|
|
|
|
const id = `image-card-${imageName}`;
|
|
|
|
const handleCardClick = ev => {
|
|
return ev.target.id === id ? onClick(image) : null;
|
|
};
|
|
|
|
const handleLogoClick = ev => {
|
|
return onClick(image);
|
|
};
|
|
|
|
const Logo = Assets[pascalCase(imageName)] || Assets.Placeholder;
|
|
|
|
return (
|
|
<Col md={2} sm={3}>
|
|
<Margin bottom={3}>
|
|
<Card id={id} onClick={handleCardClick} active={active} preview>
|
|
<Logo onClick={handleLogoClick} width="42" height="42" />
|
|
<H4>{titleCase(imageName)}</H4>
|
|
<FormGroup name="image" field={Field}>
|
|
<Version onBlur={null}>
|
|
<option selected>Version</option>
|
|
{versions.map(({ name, version, id }) => (
|
|
<option
|
|
key={`${name} - ${version}`}
|
|
value={id}
|
|
>{`${name} - ${version}`}</option>
|
|
))}
|
|
</Version>
|
|
</FormGroup>
|
|
</Card>
|
|
</Margin>
|
|
</Col>
|
|
);
|
|
};
|
|
|
|
export const ImageType = ({ setImageType, vms }) => (
|
|
<Margin bottom={4}>
|
|
<SectionList>
|
|
<SectionListItem>
|
|
<SectionListAnchor active={!vms} onClick={() => setImageType(false)}>
|
|
Hardware virtual machine
|
|
</SectionListAnchor>
|
|
</SectionListItem>
|
|
<SectionListItem>
|
|
<SectionListAnchor active={vms} onClick={() => setImageType(true)}>
|
|
Infrastructure container
|
|
</SectionListAnchor>
|
|
</SectionListItem>
|
|
</SectionList>
|
|
</Margin>
|
|
);
|
|
|
|
export default ({ images = [], onSelectLatest }) => (
|
|
<form>
|
|
<Row>
|
|
{images.map(({ imageName, ...image }) => (
|
|
<Image
|
|
{...image}
|
|
key={imageName}
|
|
imageName={imageName}
|
|
onClick={onSelectLatest}
|
|
/>
|
|
))}
|
|
</Row>
|
|
</form>
|
|
);
|