joyent-portal/packages/my-joy-instances/src/components/create-instance/image.js

116 lines
2.8 KiB
JavaScript
Raw Normal View History

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';
2018-02-05 17:12:47 +02:00
import pascalCase from 'pascal-case';
import titleCase from 'title-case';
2018-02-05 17:12:47 +02:00
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}`;
2018-02-05 17:12:47 +02:00
const handleCardClick = ev => {
return ev.target.id === id ? onClick(image) : null;
};
const handleLogoClick = ev => {
return onClick(image);
};
2018-02-05 17:12:47 +02:00
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>
2018-02-27 17:23:29 +02:00
<SectionListAnchor active={vms} onClick={() => setImageType(true)}>
Hardware virtual machine
</SectionListAnchor>
</SectionListItem>
<SectionListItem>
2018-02-27 17:23:29 +02:00
<SectionListAnchor active={!vms} onClick={() => setImageType(false)}>
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>
);