diff --git a/js/src/modals/EditMeta/editMeta.js b/js/src/modals/EditMeta/editMeta.js index 103208945..aef0232a6 100644 --- a/js/src/modals/EditMeta/editMeta.js +++ b/js/src/modals/EditMeta/editMeta.js @@ -36,7 +36,7 @@ export default class EditMeta extends Component { } state = { - meta: this.props.account.meta, + meta: Object.assign({}, this.props.account.meta), metaErrors: {}, name: this.props.account.name, nameError: null @@ -102,20 +102,55 @@ export default class EditMeta extends Component { renderTags () { const { meta } = this.state; const { tags } = meta || []; - const onChange = (chips) => this.onMetaChange('tags', chips); return ( ); } + onAddTag = (tag) => { + const { meta } = this.state; + const { tags } = meta || []; + + this.onMetaChange('tags', [].concat(tags, tag)); + } + + onDeleteTag = (tag) => { + const { meta } = this.state; + const { tags } = meta || []; + + const newTags = tags + .filter(t => t !== tag); + + this.onMetaChange('tags', newTags); + } + + onTagsInputChange = (value) => { + const { meta } = this.state; + const { tags } = meta || []; + + const tokens = value.split(/[\s,;]+/); + + const newTokens = tokens + .slice(0, -1) + .filter(t => t.length > 0); + + const inputValue = tokens.slice(-1)[0].trim(); + + this.onMetaChange('tags', [].concat(tags, newTokens)); + this.refs.tagsInput.setState({ inputValue }); + } + onNameChange = (name) => { this.setState(validateName(name)); } diff --git a/js/src/ui/Actionbar/Search/search.css b/js/src/ui/Actionbar/Search/search.css index 956a9e2e3..58365d03b 100644 --- a/js/src/ui/Actionbar/Search/search.css +++ b/js/src/ui/Actionbar/Search/search.css @@ -41,3 +41,11 @@ width: 0; height: 0; } + +.chip > svg { + width: 1.2rem !important; + height: 1.2rem !important; + margin: initial !important; + margin-right: 4px !important; + padding: 4px 0 !important; +} diff --git a/js/src/ui/Actionbar/Search/search.js b/js/src/ui/Actionbar/Search/search.js index 79fabebc8..e00fd433f 100644 --- a/js/src/ui/Actionbar/Search/search.js +++ b/js/src/ui/Actionbar/Search/search.js @@ -15,6 +15,8 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; +import { Chip } from 'material-ui'; +import { blue300 } from 'material-ui/styles/colors'; // import ChipInput from 'material-ui-chip-input'; import ChipInput from 'material-ui-chip-input/src/ChipInput'; import ActionSearch from 'material-ui/svg-icons/action/search'; @@ -43,6 +45,10 @@ export default class ActionbarSearch extends Component { if (tokens.length > 0 && this.props.tokens.length === 0) { this.handleOpenSearch(true, true); } + + if (tokens.length !== this.props.tokens.length) { + this.handleSearchChange(tokens); + } } componentWillUnmount () { @@ -71,16 +77,26 @@ export default class ActionbarSearch extends Component { + onUpdateInput={ this.handleInputChange } + hintStyle={ { + bottom: 16, + left: 2, + transition: 'none' + } } + inputStyle={ { + marginBottom: 18 + } } + textFieldStyle={ { + height: 42 + } } + />