feat(my-joy-beta): revise Tags to use new KeyValue
This commit is contained in:
Sérgio Ramos
parent
2538453d98
commit
8f7694f7f4
10
package.json
10
package.json
@ -69,15 +69,9 @@
|
||||
},
|
||||
"workspaces": ["packages/*", "prototypes/*"],
|
||||
"resolutions": {
|
||||
"graphql": "0.12.3",
|
||||
"lodash": "4.17.4",
|
||||
"lodash.keys": "4.2.0",
|
||||
"lodash.defaults": "4.2.0",
|
||||
"lodash.assign": "4.2.0",
|
||||
"isarray": "'2.0.2",
|
||||
"codemirror": "5.32.0",
|
||||
"hoist-non-react-statics": "2.3.1",
|
||||
"react": "16.2.0",
|
||||
"react-dom": "16.2.0",
|
||||
"hoist-non-react-statics": "2.3.1"
|
||||
"styled-components": "2.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,16 +6,13 @@
|
||||
"repository": "github:yldio/joyent-portal",
|
||||
"main": "build/",
|
||||
"scripts": {
|
||||
"dev":
|
||||
"REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
|
||||
"dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
|
||||
"start": "PORT=3069 joyent-react-scripts start",
|
||||
"build": "NODE_ENV=production joyent-react-scripts build",
|
||||
"lint-ci":
|
||||
"eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||
"lint":
|
||||
"eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||
"lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||
"lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||
"test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
|
||||
"test-ci": "echo 0",
|
||||
"test-ci": "npm run test",
|
||||
"prepublish": "echo 0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,86 +1,64 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { reduxForm } from 'redux-form';
|
||||
import 'jest-styled-components';
|
||||
import Theme from '@mocks/theme';
|
||||
|
||||
import Store from '@mocks/store';
|
||||
import KeyValue from '../key-value';
|
||||
import { KeyValue } from '../key-value';
|
||||
|
||||
const KeyValueForm = reduxForm()(KeyValue);
|
||||
// KeyValue.propTypes = {
|
||||
// input: PropTypes.oneOf(['input', 'textarea']).isRequired,
|
||||
// type: PropTypes.string.isRequired,
|
||||
// method: PropTypes.oneOf(['add', 'edit']).isRequired,
|
||||
// removing: PropTypes.bool.isRequired,
|
||||
// expanded: PropTypes.bool.isRequired,
|
||||
// onToggleExpanded: PropTypes.func,
|
||||
// onCancel: PropTypes.func,
|
||||
// onRemove: PropTypes.func
|
||||
// };
|
||||
|
||||
it('renders <KeyValue /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Store>
|
||||
<KeyValueForm />
|
||||
</Store>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders <KeyValue textarea /> with textareas', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Store>
|
||||
<KeyValueForm textarea />
|
||||
</Store>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders <KeyValue /> without throwing', () => expect(renderer.create(<Theme><KeyValue /></Theme>).toJSON()).toMatchSnapshot());
|
||||
|
||||
it('renders <KeyValue expanded /> expanded', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Store>
|
||||
<KeyValueForm expanded />
|
||||
</Store>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders <KeyValue input="input" /> without throwing', () =>
|
||||
expect(
|
||||
renderer.create(<Theme><KeyValue input="input" /></Theme>).toJSON()
|
||||
).toMatchSnapshot());
|
||||
|
||||
it('renders <KeyValue submitting /> with loader', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Store>
|
||||
<KeyValueForm submitting />
|
||||
</Store>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders <KeyValue input="textarea" /> without throwing', () =>
|
||||
expect(
|
||||
renderer.create(<Theme><KeyValue input="textarea" /></Theme>).toJSON()
|
||||
).toMatchSnapshot());
|
||||
|
||||
it('renders <KeyValue first /> without top margin', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Store>
|
||||
<KeyValueForm first />
|
||||
</Store>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders <KeyValue type="tag" /> without throwing', () =>
|
||||
expect(renderer.create(<Theme><KeyValue type="tag" /></Theme>).toJSON()).toMatchSnapshot());
|
||||
|
||||
it('renders <KeyValue last /> with bottom border', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Store>
|
||||
<KeyValueForm last />
|
||||
</Store>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders <KeyValue method="add" /> without throwing', () =>
|
||||
expect(
|
||||
renderer.create(<Theme><KeyValue method="add" /></Theme>).toJSON()
|
||||
).toMatchSnapshot());
|
||||
|
||||
it('renders <KeyValue label /> with proper label', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Store>
|
||||
<KeyValueForm label="Label" />
|
||||
</Store>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
it('renders <KeyValue method="edit" /> without throwing', () =>
|
||||
expect(
|
||||
renderer.create(<Theme><KeyValue method="edit" /></Theme>).toJSON()
|
||||
).toMatchSnapshot());
|
||||
|
||||
it('renders <KeyValue removing /> without throwing', () =>
|
||||
expect(renderer.create(<Theme><KeyValue removing /></Theme>).toJSON()).toMatchSnapshot());
|
||||
|
||||
it('renders <KeyValue submitting removing /> without throwing', () =>
|
||||
expect(
|
||||
renderer.create(<Theme><KeyValue submitting removing /></Theme>).toJSON()
|
||||
).toMatchSnapshot());
|
||||
|
||||
it('renders <KeyValue expanded /> without throwing', () =>
|
||||
expect(renderer.create(<Theme><KeyValue expanded /></Theme>).toJSON()).toMatchSnapshot());
|
||||
|
||||
it('renders <KeyValue expanded removing /> without throwing', () =>
|
||||
expect(
|
||||
renderer.create(<Theme><KeyValue expanded removing /></Theme>).toJSON()
|
||||
).toMatchSnapshot());
|
||||
|
||||
it('renders <KeyValue expanded submitting removing /> without throwing', () =>
|
||||
expect(
|
||||
renderer.create(<Theme><KeyValue expanded submitting removing /></Theme>).toJSON()
|
||||
).toMatchSnapshot());
|
||||
|
||||
@ -2,12 +2,11 @@ import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withTheme } from 'styled-components';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
import Value from 'react-redux-values';
|
||||
import { Field } from 'redux-form';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import titleCase from 'title-case';
|
||||
import { Margin, Padding } from 'styled-components-spacing';
|
||||
import { Padding } from 'styled-components-spacing';
|
||||
import Flex, { FlexItem } from 'styled-flex-component';
|
||||
import Editor from 'joyent-ui-toolkit/dist/es/editor';
|
||||
|
||||
@ -19,16 +18,13 @@ import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardHeaderMeta,
|
||||
CardHeaderBox,
|
||||
CardOutlet,
|
||||
ChevronIcon,
|
||||
FormGroup,
|
||||
FormLabel,
|
||||
Input,
|
||||
FormMeta,
|
||||
Button,
|
||||
Textarea,
|
||||
Editor,
|
||||
Divider,
|
||||
DeleteIcon
|
||||
} from 'joyent-ui-toolkit';
|
||||
@ -44,7 +40,7 @@ const CollapsedKeyValue = styled.span`
|
||||
|
||||
class ValueTextareaField extends PureComponent {
|
||||
render() {
|
||||
const { input, submitting } = this.props;
|
||||
const { input = {}, submitting } = this.props;
|
||||
|
||||
return input.value === 'user-script' ? (
|
||||
<Field name="value" component={Editor} />
|
||||
@ -57,7 +53,7 @@ class ValueTextareaField extends PureComponent {
|
||||
const TextareaKeyValue = ({ type, submitting }) => [
|
||||
<Row key="key">
|
||||
<Col xs={12}>
|
||||
<FormGroup name="name" reduxForm fluid>
|
||||
<FormGroup name="name" field={Field} fluid>
|
||||
<FormLabel>{titleCase(type)} key</FormLabel>
|
||||
<Input type="text" disabled={submitting} />
|
||||
<FormMeta />
|
||||
@ -67,7 +63,7 @@ const TextareaKeyValue = ({ type, submitting }) => [
|
||||
</Row>,
|
||||
<Row key="value">
|
||||
<Col xs={12}>
|
||||
<FormGroup name="value" reduxForm fluid>
|
||||
<FormGroup name="value" field={Field} fluid>
|
||||
<FormLabel>{titleCase(type)} value</FormLabel>
|
||||
<Field
|
||||
name="name"
|
||||
@ -85,14 +81,15 @@ const TextareaKeyValue = ({ type, submitting }) => [
|
||||
const InputKeyValue = ({ type, submitting }) => (
|
||||
<Flex full justifyStart contentStretch>
|
||||
<FlexItem basis="auto">
|
||||
<FormGroup name="name" reduxForm fluid>
|
||||
<FormGroup name="name" field={Field} fluid>
|
||||
<FormLabel>{titleCase(type)} key</FormLabel>
|
||||
<Input type="text" disabled={submitting} />
|
||||
<FormMeta />
|
||||
</FormGroup>
|
||||
</FlexItem>
|
||||
<FlexItem basis={remcalc(12)} />
|
||||
<FlexItem basis="auto">
|
||||
<FormGroup name="value" reduxForm fluid>
|
||||
<FormGroup name="value" field={Field} fluid>
|
||||
<FormLabel>{titleCase(type)} value</FormLabel>
|
||||
<Input disabled={submitting} />
|
||||
<FormMeta />
|
||||
@ -101,123 +98,114 @@ const InputKeyValue = ({ type, submitting }) => (
|
||||
</Flex>
|
||||
);
|
||||
|
||||
const KeyValue = withTheme(
|
||||
({
|
||||
input = 'input',
|
||||
type = 'metadata',
|
||||
method = 'add',
|
||||
error = null,
|
||||
expanded = true,
|
||||
submitting = false,
|
||||
pristine = true,
|
||||
removing = false,
|
||||
handleSubmit,
|
||||
onToggleExpanded = () => null,
|
||||
onCancel = () => null,
|
||||
onRemove = () => null,
|
||||
theme
|
||||
}) => {
|
||||
const handleHeaderClick = method === 'edit' && onToggleExpanded;
|
||||
export const KeyValue = ({
|
||||
input = 'input',
|
||||
type = 'metadata',
|
||||
method = 'add',
|
||||
error = null,
|
||||
expanded = true,
|
||||
submitting = false,
|
||||
pristine = true,
|
||||
removing = false,
|
||||
handleSubmit,
|
||||
onToggleExpanded = () => null,
|
||||
onCancel = () => null,
|
||||
onRemove = () => null,
|
||||
theme = {}
|
||||
}) => {
|
||||
const handleHeaderClick = method === 'edit' && onToggleExpanded;
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Card collapsed={!expanded} actionable={!expanded} shadow>
|
||||
<CardHeader
|
||||
secondary={false}
|
||||
transparent={false}
|
||||
actionable={Boolean(handleHeaderClick)}
|
||||
onClick={handleHeaderClick}
|
||||
>
|
||||
<CardHeaderMeta>
|
||||
{method === 'add' ? (
|
||||
<H4>{`${titleCase(method)} ${type}`}</H4>
|
||||
) : (
|
||||
<CollapsedKeyValue>
|
||||
<Field
|
||||
name="name"
|
||||
type="text"
|
||||
component={({ input }) =>
|
||||
expanded ? (
|
||||
`${input.value}: `
|
||||
) : (
|
||||
<b>{`${input.value}: `}</b>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Field
|
||||
name="value"
|
||||
type="text"
|
||||
component={({ input }) => input.value}
|
||||
/>
|
||||
</CollapsedKeyValue>
|
||||
)}
|
||||
</CardHeaderMeta>
|
||||
</CardHeader>
|
||||
<CardOutlet>
|
||||
<Padding all={1}>
|
||||
{error && !submitting ? (
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<Message error>
|
||||
<MessageTitle>Ooops!</MessageTitle>
|
||||
<MessageDescription>{error}</MessageDescription>
|
||||
</Message>
|
||||
</Col>
|
||||
</Row>
|
||||
) : null}
|
||||
{input === 'input' ? (
|
||||
<InputKeyValue type={type} submitting={submitting} />
|
||||
) : (
|
||||
<TextareaKeyValue type={type} submitting={submitting} />
|
||||
)}
|
||||
<Row between="xs" middle="xs">
|
||||
<Col xs={method === 'add' ? 12 : 7}>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={submitting}
|
||||
secondary
|
||||
marginless
|
||||
>
|
||||
<span>Cancel</span>
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={pristine}
|
||||
loading={submitting && !removing}
|
||||
marginless
|
||||
>
|
||||
<span>{method === 'add' ? 'Create' : 'Save'}</span>
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={method === 'add' ? false : 5}>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
disabled={submitting}
|
||||
loading={removing}
|
||||
secondary
|
||||
right
|
||||
icon
|
||||
error
|
||||
marginless
|
||||
>
|
||||
<DeleteIcon
|
||||
disabled={submitting}
|
||||
fill={submitting ? undefined : theme.red}
|
||||
/>
|
||||
<span>Delete</span>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Padding>
|
||||
</CardOutlet>
|
||||
</Card>
|
||||
<Divider height={remcalc(13)} transparent />
|
||||
</form>
|
||||
);
|
||||
}
|
||||
);
|
||||
return (
|
||||
<Card collapsed={!expanded} actionable={!expanded} shadow>
|
||||
<CardHeader
|
||||
secondary={false}
|
||||
transparent={false}
|
||||
actionable={Boolean(handleHeaderClick)}
|
||||
onClick={handleHeaderClick}
|
||||
>
|
||||
<CardHeaderMeta>
|
||||
{method === 'add' ? (
|
||||
<H4>{`${titleCase(method)} ${type}`}</H4>
|
||||
) : (
|
||||
<CollapsedKeyValue>
|
||||
<Field
|
||||
name="name"
|
||||
type="text"
|
||||
component={({ input = {} }) =>
|
||||
expanded ? `${input.value}: ` : <b>{`${input.value}: `}</b>
|
||||
}
|
||||
/>
|
||||
<Field
|
||||
name="value"
|
||||
type="text"
|
||||
component={({ input = {} }) => input.value}
|
||||
/>
|
||||
</CollapsedKeyValue>
|
||||
)}
|
||||
</CardHeaderMeta>
|
||||
</CardHeader>
|
||||
<CardOutlet>
|
||||
<Padding all={1}>
|
||||
{error && !submitting ? (
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<Message error>
|
||||
<MessageTitle>Ooops!</MessageTitle>
|
||||
<MessageDescription>{error}</MessageDescription>
|
||||
</Message>
|
||||
</Col>
|
||||
</Row>
|
||||
) : null}
|
||||
{input === 'input' ? (
|
||||
<InputKeyValue type={type} submitting={submitting} />
|
||||
) : (
|
||||
<TextareaKeyValue type={type} submitting={submitting} />
|
||||
)}
|
||||
<Row between="xs" middle="xs">
|
||||
<Col xs={method === 'add' ? 12 : 7}>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={submitting}
|
||||
secondary
|
||||
marginless
|
||||
>
|
||||
<span>Cancel</span>
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={pristine}
|
||||
loading={submitting && !removing}
|
||||
marginless
|
||||
>
|
||||
<span>{method === 'add' ? 'Create' : 'Save'}</span>
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={method === 'add' ? false : 5}>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
disabled={submitting}
|
||||
loading={removing}
|
||||
secondary
|
||||
right
|
||||
icon
|
||||
error
|
||||
marginless
|
||||
>
|
||||
<DeleteIcon
|
||||
disabled={submitting}
|
||||
fill={submitting ? undefined : theme.red}
|
||||
/>
|
||||
<span>Delete</span>
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Padding>
|
||||
</CardOutlet>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
KeyValue.propTypes = {
|
||||
input: PropTypes.oneOf(['input', 'textarea']).isRequired,
|
||||
@ -230,4 +218,9 @@ KeyValue.propTypes = {
|
||||
onRemove: PropTypes.func
|
||||
};
|
||||
|
||||
export default props => <KeyValue {...props} />;
|
||||
export default withTheme(({ handleSubmit, ...rest }) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<KeyValue {...rest} />
|
||||
<Divider height={remcalc(13)} transparent />
|
||||
</form>
|
||||
));
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Field } from 'redux-form';
|
||||
import KeyValue from './key-value';
|
||||
|
||||
import {
|
||||
@ -14,7 +15,7 @@ export const MenuForm = ({ searchable, onAdd }) => (
|
||||
<form>
|
||||
<Row>
|
||||
<Col xs={7} sm={5}>
|
||||
<FormGroup name="filter" fluid reduxForm>
|
||||
<FormGroup name="filter" field={Field} fluid>
|
||||
<FormLabel>Filter</FormLabel>
|
||||
<Input disabled={!searchable} fluid />
|
||||
</FormGroup>
|
||||
|
||||
@ -1,180 +1,75 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
import Value from 'react-redux-values';
|
||||
import ReduxForm from 'declarative-redux-form';
|
||||
import { KeyValue } from '@components/instances';
|
||||
import { withTheme } from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import { Field } from 'redux-form';
|
||||
|
||||
import {
|
||||
H3,
|
||||
H4,
|
||||
Divider,
|
||||
FormGroup,
|
||||
FormLabel,
|
||||
Input,
|
||||
Button,
|
||||
StatusLoader,
|
||||
CloseIcon,
|
||||
TagItem,
|
||||
TagList,
|
||||
TagItemContainer
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const FlexEnd = styled(Col)`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
const CloseIconActionable = styled(CloseIcon)`
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const Tags = ({
|
||||
handleRemove,
|
||||
addKey,
|
||||
handleCreate,
|
||||
handleClear,
|
||||
theme,
|
||||
toggleEdit,
|
||||
removeTag,
|
||||
filterTags,
|
||||
state,
|
||||
edit,
|
||||
tags
|
||||
}) => {
|
||||
const _filterTags = (
|
||||
<Col md={4} xs={12}>
|
||||
<FormGroup fluid>
|
||||
<FormLabel>Filter</FormLabel>
|
||||
<Input fluid type="text" onChange={filterTags} />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
);
|
||||
|
||||
const _addTag = (
|
||||
<Value name={`${addKey}-expanded`}>
|
||||
{({ value: expanded, onValueChange }) =>
|
||||
!expanded ? (
|
||||
<FlexEnd mdOffset={4} md={4} xs={12}>
|
||||
<Button secondary onClick={toggleEdit}>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => onValueChange(!expanded)}
|
||||
disabled={edit}
|
||||
>
|
||||
Add tag
|
||||
</Button>
|
||||
</FlexEnd>
|
||||
) : (
|
||||
[
|
||||
<FlexEnd mdOffset={4} md={4} xs={12}>
|
||||
<Button disabled secondary onClick={toggleEdit}>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => onValueChange(!expanded)}
|
||||
disabled
|
||||
>
|
||||
Add tag
|
||||
</Button>
|
||||
</FlexEnd>,
|
||||
<Col xs={12}>
|
||||
<ReduxForm
|
||||
form={addKey}
|
||||
onSubmit={handleCreate}
|
||||
id={addKey}
|
||||
onClear={() => handleClear(addKey)}
|
||||
onToggleExpanded={() => onValueChange(!expanded)}
|
||||
onRemove={() => handleRemove(addKey)}
|
||||
expanded={expanded}
|
||||
label="tag"
|
||||
create
|
||||
>
|
||||
{KeyValue}
|
||||
</ReduxForm>
|
||||
</Col>
|
||||
]
|
||||
)
|
||||
}
|
||||
</Value>
|
||||
);
|
||||
|
||||
const _title = (
|
||||
<Margin bottom={3} key="tag-title">
|
||||
<H3>
|
||||
{tags.length} {tags.length === 1 ? 'Tag' : 'Tags'}
|
||||
</H3>
|
||||
</Margin>
|
||||
);
|
||||
|
||||
const _noTags =
|
||||
!tags ||
|
||||
(tags.length === 0 && <H4 key="no-tags">No tags have been added yet</H4>);
|
||||
|
||||
const _list = tags.length > 0 && (
|
||||
<TagList key="tag-list">
|
||||
{tags
|
||||
.sort(
|
||||
(a, b) =>
|
||||
a.initialValues.name.toLowerCase() <
|
||||
b.initialValues.name.toLowerCase()
|
||||
? -1
|
||||
: 1
|
||||
)
|
||||
.map(tag => (
|
||||
<Margin
|
||||
right={1}
|
||||
bottom={1}
|
||||
key={`${tag.initialValues.name}-${tag.initialValues.value}`}
|
||||
export const MenuForm = ({ addable = true, searchable, onAdd }) => (
|
||||
<form>
|
||||
<Row>
|
||||
<Col xs={7} sm={5}>
|
||||
<FormGroup name="filter" field={Field} fluid>
|
||||
<FormLabel>Filter</FormLabel>
|
||||
<Input disabled={!searchable} fluid />
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col xs={5} sm={7}>
|
||||
<FormGroup right>
|
||||
<FormLabel>⁣</FormLabel>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={!searchable || !addable}
|
||||
onClick={onAdd}
|
||||
small
|
||||
icon
|
||||
fluid
|
||||
>
|
||||
<TagItem>
|
||||
{state[
|
||||
`${tag.initialValues.name}-${tag.initialValues.value}-deleting`
|
||||
] ? (
|
||||
<StatusLoader small />
|
||||
) : (
|
||||
<TagItemContainer>
|
||||
{tag.initialValues.name}: {tag.initialValues.value}
|
||||
{edit && (
|
||||
<Margin left={2}>
|
||||
<CloseIconActionable
|
||||
onClick={() =>
|
||||
removeTag(
|
||||
tag.initialValues.name,
|
||||
tag.initialValues.value
|
||||
)
|
||||
}
|
||||
fill={theme.grey}
|
||||
height={remcalc(9)}
|
||||
/>
|
||||
</Margin>
|
||||
)}
|
||||
</TagItemContainer>
|
||||
)}
|
||||
</TagItem>
|
||||
</Margin>
|
||||
))}
|
||||
</TagList>
|
||||
);
|
||||
Add tag
|
||||
</Button>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
</form>
|
||||
);
|
||||
|
||||
return [
|
||||
<Row bottom="md" key="tag-row">
|
||||
{_filterTags}
|
||||
{_addTag}
|
||||
</Row>,
|
||||
<Margin key="tag-divider" bottom={4} top={2}>
|
||||
<Divider height="1px" />
|
||||
</Margin>,
|
||||
_title,
|
||||
_list,
|
||||
_noTags
|
||||
];
|
||||
};
|
||||
export const AddForm = props => (
|
||||
<KeyValue {...props} method="add" input="input" type="tag" expanded />
|
||||
);
|
||||
|
||||
export default withTheme(Tags);
|
||||
export const EditForm = props => (
|
||||
<KeyValue {...props} method="edit" input="input" type="tag" expanded />
|
||||
);
|
||||
|
||||
const Tag = ({ name, value, onClick }) => (
|
||||
<Margin right={1} bottom={1} key={`${name}-${value}`}>
|
||||
<TagItem onClick={onClick}>
|
||||
<TagItemContainer>
|
||||
{name}: {value}
|
||||
</TagItemContainer>
|
||||
</TagItem>
|
||||
</Margin>
|
||||
);
|
||||
|
||||
export default ({ values, onToggleEditing, ...rest }) => (
|
||||
<TagList {...rest}>
|
||||
{values.map(({ id, name, ...tag }) => (
|
||||
<Tag
|
||||
key={id}
|
||||
id={id}
|
||||
name={name}
|
||||
{...tag}
|
||||
onClick={onToggleEditing && (() => onToggleEditing(name))}
|
||||
/>
|
||||
))}
|
||||
</TagList>
|
||||
);
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import paramCase from 'param-case';
|
||||
import Value, { set } from 'react-redux-values';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
import { set } from 'react-redux-values';
|
||||
import { compose, graphql } from 'react-apollo';
|
||||
import { connect } from 'react-redux';
|
||||
import { SubmissionError, reset, startSubmit, stopSubmit } from 'redux-form';
|
||||
@ -12,12 +13,10 @@ import remcalc from 'remcalc';
|
||||
|
||||
import {
|
||||
ViewContainer,
|
||||
Title,
|
||||
StatusLoader,
|
||||
Message,
|
||||
MessageDescription,
|
||||
MessageTitle,
|
||||
Button,
|
||||
Divider,
|
||||
H3
|
||||
} from 'joyent-ui-toolkit';
|
||||
@ -25,7 +24,6 @@ import {
|
||||
import GetMetadata from '@graphql/list-metadata.gql';
|
||||
import UpdateMetadata from '@graphql/update-metadata.gql';
|
||||
import DeleteMetadata from '@graphql/delete-metadata.gql';
|
||||
import { KeyValue } from '@components/instances';
|
||||
import parseError from '@state/parse-error';
|
||||
|
||||
import {
|
||||
@ -71,9 +69,9 @@ const Metadata = ({
|
||||
: null;
|
||||
|
||||
const _count = !_loading ? (
|
||||
<H3 marginBottom={remcalc(24)} marginTop={addOpen && remcalc(24)}>
|
||||
{metadata.length} key:value pair
|
||||
</H3>
|
||||
<Margin bottom={4} top={addOpen && 4}>
|
||||
<H3>{metadata.length} key:value pair</H3>
|
||||
</Margin>
|
||||
) : null;
|
||||
|
||||
const _metadata =
|
||||
|
||||
@ -1,126 +1,110 @@
|
||||
import React, { Component } from 'react';
|
||||
import React from 'react';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
import paramCase from 'param-case';
|
||||
import { compose, graphql } from 'react-apollo';
|
||||
import { set } from 'react-redux-values';
|
||||
import { SubmissionError, reset, stopSubmit } from 'redux-form';
|
||||
import { SubmissionError, reset, stopSubmit, startSubmit } from 'redux-form';
|
||||
import ReduxForm from 'declarative-redux-form';
|
||||
import { connect } from 'react-redux';
|
||||
import find from 'lodash.find';
|
||||
import get from 'lodash.get';
|
||||
import intercept from 'apr-intercept';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import { ViewContainer, StatusLoader, Divider, H3 } from 'joyent-ui-toolkit';
|
||||
|
||||
import {
|
||||
ViewContainer,
|
||||
StatusLoader,
|
||||
Message,
|
||||
MessageDescription,
|
||||
MessageTitle
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
import TagsComponent from '@components/instances/tags';
|
||||
default as TagList,
|
||||
MenuForm as TagsMenuForm,
|
||||
AddForm as TagsAddForm,
|
||||
EditForm as TagsEditForm
|
||||
} from '@components/instances/tags';
|
||||
|
||||
import GetTags from '@graphql/list-tags.gql';
|
||||
import UpdateTags from '@graphql/update-tags.gql';
|
||||
import DeleteTag from '@graphql/delete-tag.gql';
|
||||
import Index from '@state/gen-index';
|
||||
import parseError from '@state/parse-error';
|
||||
|
||||
const TAG_FORM_KEY = (name, field) => `instance-tag-${name}-${field}`;
|
||||
const CREATE_TAG_FORM_KEY = name => `instance-create-tag-${name}`;
|
||||
const MENU_FORM_NAME = 'instance-tags-list-menu';
|
||||
const ADD_FORM_NAME = 'instance-tags-add-new';
|
||||
const EDIT_FORM_KEY = field => `instance-tags-${paramCase(field)}`;
|
||||
|
||||
class Tags extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { values: tags } = props;
|
||||
this.state = {
|
||||
tags,
|
||||
edit: false
|
||||
};
|
||||
}
|
||||
const Tags = ({
|
||||
tags = [],
|
||||
addOpen,
|
||||
editing,
|
||||
loading,
|
||||
handleToggleAddOpen,
|
||||
handleToggleEditing,
|
||||
handleCancel,
|
||||
handleEdit,
|
||||
handleRemove,
|
||||
handleCreate
|
||||
}) => {
|
||||
const _loading = !(loading && !tags.length) ? null : <StatusLoader />;
|
||||
|
||||
componentWillReceiveProps = ({ values: tags }) => {
|
||||
this.setState({
|
||||
tags
|
||||
});
|
||||
};
|
||||
const _add = addOpen ? (
|
||||
<ReduxForm
|
||||
form={ADD_FORM_NAME}
|
||||
onSubmit={handleCreate}
|
||||
onCancel={() => handleToggleAddOpen(false)}
|
||||
>
|
||||
{TagsAddForm}
|
||||
</ReduxForm>
|
||||
) : null;
|
||||
|
||||
filterTags = e => {
|
||||
const value = e.target.value;
|
||||
const { values: tags } = this.props;
|
||||
const _line = !_loading
|
||||
? [
|
||||
<Divider key="line" height={remcalc(1)} />,
|
||||
<Divider key="after-line-space" height={remcalc(24)} transparent />
|
||||
]
|
||||
: null;
|
||||
|
||||
this.setState({
|
||||
tags: tags.filter(
|
||||
tag =>
|
||||
tag.initialValues.value.includes(value) ||
|
||||
tag.initialValues.name.includes(value)
|
||||
)
|
||||
});
|
||||
};
|
||||
const _count = !_loading ? (
|
||||
<Margin bottom={4} top={addOpen && 4}>
|
||||
<H3>{tags.length} tags</H3>
|
||||
</Margin>
|
||||
) : null;
|
||||
|
||||
removeTag = (name, value) => {
|
||||
const { handleRemove } = this.props;
|
||||
const _tags = !_loading ? (
|
||||
<TagList values={tags} onToggleEditing={!editing && handleToggleEditing} />
|
||||
) : null;
|
||||
|
||||
handleRemove(name);
|
||||
const _edit = editing ? (
|
||||
<ReduxForm
|
||||
form={editing.form}
|
||||
initialValues={{ name: editing.name, value: editing.value }}
|
||||
onSubmit={handleEdit}
|
||||
onCancel={() => handleToggleEditing(false)}
|
||||
onToggleExpanded={() => handleToggleEditing(false)}
|
||||
onRemove={() => handleRemove(editing.form, editing)}
|
||||
removing={editing.removing}
|
||||
>
|
||||
{TagsEditForm}
|
||||
</ReduxForm>
|
||||
) : null;
|
||||
|
||||
this.setState({
|
||||
[`${name}-${value}-deleting`]: true
|
||||
});
|
||||
};
|
||||
|
||||
toggleEdit = () => {
|
||||
const { edit } = this.state;
|
||||
|
||||
this.setState({
|
||||
edit: !edit
|
||||
});
|
||||
};
|
||||
|
||||
render = () => {
|
||||
const {
|
||||
instance,
|
||||
values = [],
|
||||
loading,
|
||||
error,
|
||||
handleRemove,
|
||||
handleClear,
|
||||
handleCreate
|
||||
} = this.props;
|
||||
const _loading = !(loading && !values.length) ? null : <StatusLoader />;
|
||||
const _addKey = instance && CREATE_TAG_FORM_KEY(instance.name);
|
||||
const { edit, tags } = this.state;
|
||||
|
||||
// tags items forms
|
||||
const _tags = !_loading && (
|
||||
<TagsComponent
|
||||
toggleEdit={this.toggleEdit}
|
||||
removeTag={this.removeTag}
|
||||
filterTags={this.filterTags}
|
||||
state={this.state}
|
||||
edit={edit}
|
||||
handleCreate={handleCreate}
|
||||
handleClear={handleClear}
|
||||
addKey={_addKey}
|
||||
tags={tags}
|
||||
handleRemove={handleRemove}
|
||||
/>
|
||||
);
|
||||
|
||||
// fetching error
|
||||
const _error =
|
||||
error && !values.length && !_loading ? (
|
||||
<Message error>
|
||||
<MessageTitle>Ooops!</MessageTitle>
|
||||
<MessageDescription>
|
||||
An error occurred while loading your instance tags
|
||||
</MessageDescription>
|
||||
</Message>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<ViewContainer center={Boolean(_loading)} main>
|
||||
{_loading}
|
||||
{_error}
|
||||
{_tags}
|
||||
</ViewContainer>
|
||||
);
|
||||
};
|
||||
}
|
||||
return (
|
||||
<ViewContainer main>
|
||||
<ReduxForm
|
||||
form={MENU_FORM_NAME}
|
||||
searchable={!_loading}
|
||||
addable={!editing}
|
||||
onAdd={() => handleToggleAddOpen(!addOpen)}
|
||||
>
|
||||
{TagsMenuForm}
|
||||
</ReduxForm>
|
||||
<Divider height={remcalc(11)} transparent />
|
||||
{_line}
|
||||
{_loading}
|
||||
{_add}
|
||||
{_edit}
|
||||
{_count}
|
||||
{_tags}
|
||||
</ViewContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(
|
||||
graphql(UpdateTags, { name: 'updateTags' }),
|
||||
@ -138,84 +122,152 @@ export default compose(
|
||||
const instance = find(get(rest, 'machines', []), ['name', name]);
|
||||
const tags = get(instance, 'tags', []);
|
||||
|
||||
const values = tags.map(({ name, value }) => {
|
||||
const field = paramCase(name);
|
||||
const form = TAG_FORM_KEY(name, field);
|
||||
|
||||
return {
|
||||
form,
|
||||
initialValues: {
|
||||
name,
|
||||
value
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
values,
|
||||
tags,
|
||||
instance,
|
||||
index: Index(tags),
|
||||
loading,
|
||||
error,
|
||||
refetch
|
||||
};
|
||||
}
|
||||
}),
|
||||
connect(null, (dispatch, ownProps) => {
|
||||
const { instance, refetch, updateTags, deleteTag } = ownProps;
|
||||
connect(
|
||||
({ values, form }, { tags, index, ...ownProps }) => {
|
||||
// get search value
|
||||
const filter = get(form, `${MENU_FORM_NAME}.values.filter`, false);
|
||||
// if user is searching something, get items that match that query
|
||||
const filtered = filter
|
||||
? index.search(filter).map(({ ref }) => find(tags, ['id', ref]))
|
||||
: tags;
|
||||
|
||||
return {
|
||||
// reset sets values to initialValues
|
||||
handleClear: form => dispatch(reset(form)),
|
||||
handleRemove: name =>
|
||||
Promise.resolve(
|
||||
// set removing=true (so that we can have a specific removing spinner)
|
||||
// because remove button is not a submit button, we have to manually flip that flag
|
||||
dispatch([set({ name: `${name}-removing`, value: true })])
|
||||
)
|
||||
.then(() =>
|
||||
// call mutation
|
||||
const editingTagName = get(values, 'editing-tag', null);
|
||||
const removingTagName = get(values, 'removing-tag', null);
|
||||
const editingTag =
|
||||
editingTagName && find(filtered, ['name', editingTagName]);
|
||||
const removingTag = editingTagName === removingTagName;
|
||||
|
||||
return {
|
||||
...ownProps,
|
||||
tags: filtered,
|
||||
addOpen: get(values, 'add-tags-open', false),
|
||||
editing: editingTag && {
|
||||
...editingTag,
|
||||
removing: Boolean(removingTag),
|
||||
form: EDIT_FORM_KEY(editingTag.name)
|
||||
}
|
||||
};
|
||||
},
|
||||
(dispatch, ownProps) => {
|
||||
return {
|
||||
handleToggleAddOpen: value =>
|
||||
dispatch(set({ name: `add-tags-open`, value })),
|
||||
handleToggleEditing: value =>
|
||||
dispatch(set({ name: `editing-tag`, value })),
|
||||
handleEdit: async ({ name, value }, _, { form, initialValues }) => {
|
||||
const { tags, instance, deleteTag, updateTags, refetch } = ownProps;
|
||||
|
||||
// call mutations
|
||||
const [err] = await intercept(
|
||||
Promise.all([
|
||||
deleteTag({
|
||||
variables: {
|
||||
id: instance.id,
|
||||
name: initialValues.name
|
||||
}
|
||||
}),
|
||||
updateTags({
|
||||
variables: {
|
||||
id: instance.id,
|
||||
tags: [{ name, value }]
|
||||
}
|
||||
})
|
||||
])
|
||||
);
|
||||
|
||||
if (err) {
|
||||
// show mutation error
|
||||
throw new SubmissionError({
|
||||
_error: parseError(err)
|
||||
});
|
||||
}
|
||||
|
||||
dispatch([
|
||||
set({ name: `editing-tag`, value: false }),
|
||||
reset(form),
|
||||
startSubmit(form)
|
||||
]);
|
||||
|
||||
// fetch tags again (even though we are polling)
|
||||
return refetch();
|
||||
},
|
||||
handleRemove: async (form, { name }) => {
|
||||
const { instance, deleteTag, refetch } = ownProps;
|
||||
|
||||
dispatch([
|
||||
set({ name: `removing-tag`, value: name }),
|
||||
startSubmit(form)
|
||||
]);
|
||||
|
||||
// call mutation
|
||||
const [err] = await intercept(
|
||||
deleteTag({
|
||||
variables: {
|
||||
id: instance.id,
|
||||
name
|
||||
}
|
||||
})
|
||||
)
|
||||
// fetch tags again
|
||||
.then(() => refetch())
|
||||
// we only flip removing and submitting when there is an error.
|
||||
// the reason for that is that tags is updated asyncronously and
|
||||
// it takes longer to have an efect than the mutation
|
||||
.catch(error =>
|
||||
dispatch([
|
||||
set({ name: `${name}-removing`, value: false }),
|
||||
stopSubmit(name, {
|
||||
_error: error.graphQLErrors
|
||||
.map(({ message }) => message)
|
||||
.join('\n')
|
||||
})
|
||||
])
|
||||
),
|
||||
handleCreate: ({ name, value }) =>
|
||||
// call mutation
|
||||
updateTags({
|
||||
variables: {
|
||||
id: instance.id,
|
||||
tags: [{ name, value }]
|
||||
}
|
||||
})
|
||||
// fetch tags again
|
||||
.then(() => refetch())
|
||||
// reset create new tags form
|
||||
.then(() => dispatch(reset(CREATE_TAG_FORM_KEY(instance.name))))
|
||||
// submit is flipped once the promise is resolved
|
||||
.catch(error => {
|
||||
);
|
||||
|
||||
if (err) {
|
||||
// show mutation error
|
||||
throw new SubmissionError({
|
||||
_error: error.graphQLErrors
|
||||
.map(({ message }) => message)
|
||||
.join('\n')
|
||||
_error: parseError(err)
|
||||
});
|
||||
})
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
dispatch([
|
||||
set({ name: `editing-tag`, value: false }),
|
||||
set({ name: `removing-tag`, value: false }),
|
||||
reset(form),
|
||||
startSubmit(form)
|
||||
]);
|
||||
|
||||
// fetch tags again (even though we are polling)
|
||||
return refetch();
|
||||
},
|
||||
handleCreate: async ({ name, value }) => {
|
||||
const { updateTags, instance, refetch } = ownProps;
|
||||
|
||||
// call mutation
|
||||
const [err] = await intercept(
|
||||
updateTags({
|
||||
variables: {
|
||||
id: instance.id,
|
||||
tags: [{ name, value }]
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
if (err) {
|
||||
// show mutation error
|
||||
throw new SubmissionError({
|
||||
_error: parseError(err)
|
||||
});
|
||||
}
|
||||
|
||||
dispatch([
|
||||
// reset create new tags form
|
||||
reset(ADD_FORM_NAME),
|
||||
stopSubmit(ADD_FORM_NAME),
|
||||
// close add form
|
||||
set({ name: `add-tags-open`, value: false })
|
||||
]);
|
||||
|
||||
// fetch tags again (even though we are polling)
|
||||
return refetch();
|
||||
}
|
||||
};
|
||||
}
|
||||
)
|
||||
)(Tags);
|
||||
|
||||
4
packages/my-joy-beta/src/mocks/__aliases__.js
Normal file
4
packages/my-joy-beta/src/mocks/__aliases__.js
Normal file
@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
'^joyent-ui-toolkit/dist/es/editor$': '<rootDir>/src/mocks/editor',
|
||||
'^redux-form$': '<rootDir>/src/mocks/redux-form'
|
||||
};
|
||||
1
packages/my-joy-beta/src/mocks/editor.js
Normal file
1
packages/my-joy-beta/src/mocks/editor.js
Normal file
@ -0,0 +1 @@
|
||||
export default () => <span>joyent-maifest-editor</span>
|
||||
3
packages/my-joy-beta/src/mocks/redux-form.js
Normal file
3
packages/my-joy-beta/src/mocks/redux-form.js
Normal file
@ -0,0 +1,3 @@
|
||||
import React from 'react';
|
||||
|
||||
export const Field = ({ component = "input", children, ...rest }) => React.createElement(component, rest, children);
|
||||
@ -11,6 +11,7 @@ class ManifestEditorBundle extends Component {
|
||||
|
||||
this.handleRender = this.handleRender.bind(this);
|
||||
}
|
||||
|
||||
handleRender(ManifestEditor) {
|
||||
if (ManifestEditor) {
|
||||
setTimeout(() => {
|
||||
@ -20,6 +21,7 @@ class ManifestEditorBundle extends Component {
|
||||
|
||||
return <Loader />;
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.state.ManifestEditor) {
|
||||
return (
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import is from 'styled-is';
|
||||
|
||||
export default styled.li`
|
||||
border: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
@ -10,4 +11,8 @@ export default styled.li`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
${is('onClick')`
|
||||
cursor: pointer;
|
||||
`};
|
||||
`;
|
||||
|
||||
43
yarn.lock
43
yarn.lock
@ -2273,9 +2273,9 @@ code-point-at@^1.0.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
|
||||
|
||||
codemirror@5.32.0, codemirror@^5.18.2, codemirror@^5.32.0:
|
||||
version "5.32.0"
|
||||
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.32.0.tgz#cb6ff5d8ef36d0b10f031130e2d9ebeee92c902e"
|
||||
codemirror@^5.18.2, codemirror@^5.32.0:
|
||||
version "5.33.0"
|
||||
resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.33.0.tgz#462ad9a6fe8d38b541a9536a3997e1ef93b40c6a"
|
||||
|
||||
coleman-liau@^1.0.0:
|
||||
version "1.0.2"
|
||||
@ -6566,10 +6566,6 @@ lodash._reinterpolate@~3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
|
||||
|
||||
lodash.assign@4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
|
||||
|
||||
lodash.camelcase@^4.3.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
|
||||
@ -6582,7 +6578,7 @@ lodash.debounce@^4.0.8:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
||||
|
||||
lodash.defaults@4.2.0, lodash.defaults@^4.2.0:
|
||||
lodash.defaults@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
|
||||
|
||||
@ -6654,7 +6650,7 @@ lodash.isundefined@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz#23ef3d9535565203a66cefd5b830f848911afb48"
|
||||
|
||||
lodash.keys@4.2.0, lodash.keys@^4.2.0:
|
||||
lodash.keys@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-4.2.0.tgz#a08602ac12e4fb83f91fc1fb7a360a4d9ba35205"
|
||||
|
||||
@ -6699,10 +6695,18 @@ lodash.uniq@^4.5.0:
|
||||
version "4.5.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
|
||||
|
||||
lodash@4.17.2, lodash@4.17.4, "lodash@>=3.5 <5", lodash@^3.10.1, lodash@^3.3.1, lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
|
||||
lodash@4.17.2:
|
||||
version "4.17.2"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.2.tgz#34a3055babe04ce42467b607d700072c7ff6bf42"
|
||||
|
||||
"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
|
||||
version "4.17.4"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
|
||||
|
||||
lodash@^3.10.1, lodash@^3.3.1:
|
||||
version "3.10.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
|
||||
|
||||
log-symbols@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
|
||||
@ -10118,9 +10122,9 @@ styled-components-spacing@^2.1.3:
|
||||
react-create-component-from-tag-prop "^1.2.1"
|
||||
styled-components-breakpoint "^1.0.0-preview.3"
|
||||
|
||||
styled-components@2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.4.tgz#dd87fd3dafd359e7a0d570aec1bd07d691c0b5a2"
|
||||
styled-components@2.2.4, styled-components@2.3.0, styled-components@^2.2.3, styled-components@^2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.3.0.tgz#d9cf4574e140fea6426e48632ed0ca4494537718"
|
||||
dependencies:
|
||||
buffer "^5.0.3"
|
||||
css-to-react-native "^2.0.3"
|
||||
@ -10132,19 +10136,6 @@ styled-components@2.2.4:
|
||||
stylis "^3.4.0"
|
||||
supports-color "^3.2.3"
|
||||
|
||||
styled-components@^2.2.3, styled-components@^2.3.0:
|
||||
version "2.3.3"
|
||||
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.3.3.tgz#351d0be84699db750c73d95617e4334157421f71"
|
||||
dependencies:
|
||||
buffer "^5.0.3"
|
||||
css-to-react-native "^2.0.3"
|
||||
fbjs "^0.8.9"
|
||||
hoist-non-react-statics "^1.2.0"
|
||||
is-plain-object "^2.0.1"
|
||||
prop-types "^15.5.4"
|
||||
stylis "^3.4.0"
|
||||
supports-color "^3.2.3"
|
||||
|
||||
styled-flex-component@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/styled-flex-component/-/styled-flex-component-2.1.0.tgz#b1efab209965288a9e1d6dbe981692693568cca2"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user