feat(instances): CI - Responsive behavior for tags #1121
This commit is contained in:
parent
c268d88a4d
commit
2f9d135319
@ -10,7 +10,7 @@ import { reset } from 'redux-form';
|
||||
import { destroy } from 'redux-form';
|
||||
import get from 'lodash.get';
|
||||
import remcalc from 'remcalc';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
|
||||
import Step, {
|
||||
Header as StepHeader,
|
||||
@ -55,7 +55,8 @@ const Tag = ({ name, value, onRemoveClick }) => (
|
||||
</Margin>
|
||||
);
|
||||
|
||||
const TagsContainer = ({
|
||||
const TagsContainer = withTheme(
|
||||
({
|
||||
handleValidate,
|
||||
handleGetValue,
|
||||
preview = [],
|
||||
@ -67,8 +68,11 @@ const TagsContainer = ({
|
||||
handleChangeAddOpen,
|
||||
handleRemoveTag,
|
||||
handleCancelEdit,
|
||||
theme = {},
|
||||
...props
|
||||
}) => (
|
||||
}) => {
|
||||
const mobile = theme.screen === 'mobile';
|
||||
return (
|
||||
<Step name="tags" getValue={handleGetValue} {...props}>
|
||||
<StepHeader icon={<TagsIcon />}>Tags</StepHeader>
|
||||
<StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags">
|
||||
@ -133,14 +137,15 @@ const TagsContainer = ({
|
||||
</Fragment>
|
||||
) : (
|
||||
<Margin top="5">
|
||||
<Flex>
|
||||
<Flex column={mobile}>
|
||||
<FlexItem>
|
||||
<Margin right="1">
|
||||
<Margin right={mobile ? '0' : '1'}>
|
||||
<Button
|
||||
id="add-tag-button"
|
||||
type="button"
|
||||
onClick={() => handleChangeAddOpen(true)}
|
||||
secondary
|
||||
fluid={mobile}
|
||||
>
|
||||
Add Tag
|
||||
</Button>
|
||||
@ -152,6 +157,7 @@ const TagsContainer = ({
|
||||
type="button"
|
||||
component={Link}
|
||||
to={next}
|
||||
fluid={mobile}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
@ -164,6 +170,8 @@ const TagsContainer = ({
|
||||
</StepOutlet>
|
||||
</Step>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default compose(
|
||||
connect(({ values }, ownProps) => {
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Margin, Padding } from 'styled-components-spacing';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import { Row, Col as BaseCol } from 'joyent-react-styled-flexboxgrid';
|
||||
import { Field } from 'redux-form';
|
||||
import remcalc from 'remcalc';
|
||||
@ -198,7 +198,8 @@ const InputKeyValue = ({
|
||||
</Flex>
|
||||
);
|
||||
|
||||
export const KeyValue = ({
|
||||
export const KeyValue = withTheme(
|
||||
({
|
||||
id = null,
|
||||
disabled = false,
|
||||
input = 'input',
|
||||
@ -223,7 +224,8 @@ export const KeyValue = ({
|
||||
shadow = true,
|
||||
customHeader,
|
||||
headless = false,
|
||||
noActions = false
|
||||
noActions = false,
|
||||
theme = {}
|
||||
}) => {
|
||||
const handleHeaderClick = method === 'edit' && onToggleExpanded;
|
||||
const mobile = theme.screen === 'mobile';
|
||||
@ -346,25 +348,6 @@ export const KeyValue = ({
|
||||
<span>{method === 'add' ? 'Create' : 'Save'}</span>
|
||||
</Button>
|
||||
</Col>
|
||||
{!noRemove && (
|
||||
<Col xs={method === 'add' ? false : '5'}>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={disabled || submitting}
|
||||
secondary
|
||||
>
|
||||
<span>Cancel</span>
|
||||
</MarginalButton>
|
||||
<Button
|
||||
id={id ? 'kv-submit-button-' + id : null}
|
||||
type="submit"
|
||||
disabled={pristine || invalid}
|
||||
loading={submitting && !removing}
|
||||
>
|
||||
<span>{method === 'add' ? 'Create' : 'Save'}</span>
|
||||
</Button>
|
||||
</Col>
|
||||
{!noRemove && (
|
||||
<Col xs={method === 'add' ? false : '5'}>
|
||||
<Button
|
||||
@ -378,7 +361,7 @@ export const KeyValue = ({
|
||||
error
|
||||
id={id ? 'kv-remove-button-' + id : null}
|
||||
>
|
||||
<Margin right="2">
|
||||
<Margin right={2}>
|
||||
<DeleteIcon
|
||||
disabled={disabled || submitting}
|
||||
fill={disabled || submitting ? undefined : 'red'}
|
||||
@ -396,7 +379,8 @@ export const KeyValue = ({
|
||||
) : null}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
KeyValue.propTypes = {
|
||||
input: PropTypes.oneOf(['input', 'textarea']).isRequired,
|
||||
|
Loading…
Reference in New Issue
Block a user