From 2f9d135319b67c389ff89abe9fef3d3681aba25a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Moreira?= Date: Wed, 30 May 2018 14:30:11 +0100 Subject: [PATCH] feat(instances): CI - Responsive behavior for tags #1121 --- packages/instance-steps/src/tags/index.js | 216 ++++++------ .../resource-widgets/src/key-value/index.js | 310 +++++++++--------- 2 files changed, 259 insertions(+), 267 deletions(-) diff --git a/packages/instance-steps/src/tags/index.js b/packages/instance-steps/src/tags/index.js index 499e6e86..24d2ccf8 100644 --- a/packages/instance-steps/src/tags/index.js +++ b/packages/instance-steps/src/tags/index.js @@ -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,114 +55,122 @@ const Tag = ({ name, value, onRemoveClick }) => ( ); -const TagsContainer = ({ - handleValidate, - handleGetValue, - preview = [], - tags = [], - addOpen = true, - shouldAsyncValidate, - handleAddTag, - handleAsyncValidate, - handleChangeAddOpen, - handleRemoveTag, - handleCancelEdit, - ...props -}) => ( - - }>Tags - - Tags can be used to identify your instances, group multiple instances - together, define firewall and affinity rules, and more. - - - - - - {preview.map(({ name, value }, index) => ( - - ))} - - - - - {({ next }) => ( - - {tags.length ? ( - - - - {tags.map(({ name, value }, index) => ( - handleRemoveTag(index)} - id={`tag-${index}`} - /> - ))} - - - ) : null} - {addOpen ? ( +const TagsContainer = withTheme( + ({ + handleValidate, + handleGetValue, + preview = [], + tags = [], + addOpen = true, + shouldAsyncValidate, + handleAddTag, + handleAsyncValidate, + handleChangeAddOpen, + handleRemoveTag, + handleCancelEdit, + theme = {}, + ...props + }) => { + const mobile = theme.screen === 'mobile'; + return ( + + }>Tags + + Tags can be used to identify your instances, group multiple instances + together, define firewall and affinity rules, and more. + + + + + + {preview.map(({ name, value }, index) => ( + + ))} + + + + + {({ next }) => ( - - - {props => ( - - handleChangeAddOpen(false)} + {tags.length ? ( + + + + {tags.map(({ name, value }, index) => ( + handleRemoveTag(index)} + id={`tag-${index}`} /> - - )} - - - - ) : ( - - - - - + {props => ( + + handleChangeAddOpen(false)} + /> + + )} + - - - - - - + + ) : ( + + + + + + + + + + + + + )} + )} - - )} - - + + + ); + } ); export default compose( diff --git a/packages/resource-widgets/src/key-value/index.js b/packages/resource-widgets/src/key-value/index.js index 6b33b8d8..a8d44b92 100644 --- a/packages/resource-widgets/src/key-value/index.js +++ b/packages/resource-widgets/src/key-value/index.js @@ -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,169 +198,152 @@ const InputKeyValue = ({ ); -export const KeyValue = ({ - id = null, - disabled = false, - input = 'input', - type = 'metadata', - typeLabel = 'key', - method = 'add', - initialValues = {}, - error = null, - expanded = true, - submitting = false, - pristine = true, - invalid = false, - removing = false, - onToggleExpanded, - onCancel = () => null, - onRemove = () => null, - editor = null, - onlyName = false, - onlyValue = false, - noRemove = false, - borderless = false, - shadow = true, - customHeader, - headless = false, - noActions = false -}) => { - const handleHeaderClick = method === 'edit' && onToggleExpanded; - const mobile = theme.screen === 'mobile'; +export const KeyValue = withTheme( + ({ + id = null, + disabled = false, + input = 'input', + type = 'metadata', + typeLabel = 'key', + method = 'add', + initialValues = {}, + error = null, + expanded = true, + submitting = false, + pristine = true, + invalid = false, + removing = false, + onToggleExpanded, + onCancel = () => null, + onRemove = () => null, + editor = null, + onlyName = false, + onlyValue = false, + noRemove = false, + borderless = false, + shadow = true, + customHeader, + headless = false, + noActions = false, + theme = {} + }) => { + const handleHeaderClick = method === 'edit' && onToggleExpanded; + const mobile = theme.screen === 'mobile'; - return ( - - {headless ? null : ( -
- + {headless ? null : ( +
- - - {method === 'add' || method === 'create' ? ( -

{`${titleCase(method)} ${type}`}

- ) : ( - - {customHeader ? customHeader : null} - {initialValues.name ? ( - - {expanded ? ( - {`${initialValues.name}${': '}`} - ) : ( - {`${initialValues.name}${': '}`} - )} - {initialValues.value} - - ) : null} - - )} - - {handleHeaderClick ? ( - + + + {method === 'add' || method === 'create' ? ( +

{`${titleCase(method)} ${type}`}

+ ) : ( + + {customHeader ? customHeader : null} + {initialValues.name ? ( + + {expanded ? ( + {`${initialValues.name}${': '}`} + ) : ( + {`${initialValues.name}${': '}`} + )} + {initialValues.value} + + ) : null} + + )} + + {handleHeaderClick ? ( + + ) : null} +
+ +
+ )} + {expanded ? ( + + + {error && !submitting ? ( + + + + + Ooops! + {error} + + + + + ) : null} + {input === 'input' ? ( + ) : null} - -
-
- )} - {expanded ? ( - - - {error && !submitting ? ( - - - - - Ooops! - {error} - - - - - ) : null} - {input === 'input' ? ( - - ) : null} - {input === 'textarea' ? ( - - ) : null} - {input !== 'textarea' && input !== 'input' - ? input(submitting) - : null} - - - - - - Cancel - - - - - {!noRemove && ( - - @@ -378,7 +361,7 @@ export const KeyValue = ({ error id={id ? 'kv-remove-button-' + id : null} > - + - )} - - - ) : null} -
- ); -}; + )} + + + ) : null} + + ); + } +); KeyValue.propTypes = { input: PropTypes.oneOf(['input', 'textarea']).isRequired,