(cherry picked from commit 09347f79c5c486ccb88d732c1bac1cacc668536c)pull/1923/head
parent
416104f05d
commit
f8f857376a
@ -0,0 +1,102 @@
|
|||||||
|
import _ from 'lodash';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import TagInput from './TagInput';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
(state, { value }) => value,
|
||||||
|
(state, { values }) => values,
|
||||||
|
(tags, tagList) => {
|
||||||
|
const sortedTags = _.sortBy(tagList, 'value');
|
||||||
|
|
||||||
|
return {
|
||||||
|
tags: tags.reduce((acc, tag) => {
|
||||||
|
const matchingTag = _.find(tagList, { key: tag });
|
||||||
|
|
||||||
|
if (matchingTag) {
|
||||||
|
acc.push({
|
||||||
|
id: tag,
|
||||||
|
name: matchingTag.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, []),
|
||||||
|
|
||||||
|
tagList: sortedTags.map(({ key: id, value: name }) => {
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
name
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
|
||||||
|
allTags: sortedTags
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
class TagSelectInputConnector extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onTagAdd = (tag) => {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
allTags
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const existingTag =_.some(allTags, { key: tag.id });
|
||||||
|
|
||||||
|
const newValue = value.slice();
|
||||||
|
|
||||||
|
if (existingTag) {
|
||||||
|
newValue.push(tag.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.onChange({ name, value: newValue });
|
||||||
|
}
|
||||||
|
|
||||||
|
onTagDelete = ({ index }) => {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
value
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const newValue = value.slice();
|
||||||
|
newValue.splice(index, 1);
|
||||||
|
|
||||||
|
this.props.onChange({
|
||||||
|
name,
|
||||||
|
value: newValue
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<TagInput
|
||||||
|
onTagAdd={this.onTagAdd}
|
||||||
|
onTagDelete={this.onTagDelete}
|
||||||
|
{...this.props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
TagSelectInputConnector.propTypes = {
|
||||||
|
name: PropTypes.string.isRequired,
|
||||||
|
value: PropTypes.arrayOf(PropTypes.number).isRequired,
|
||||||
|
values: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
allTags: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
|
onChange: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default connect(createMapStateToProps)(TagSelectInputConnector);
|
Loading…
Reference in new issue