Moved tag helper components from utils to tags/helpers folder

src/utils/Tag.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import colorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
-import './Tag.scss';
-
-const propTypes = {
-  colorGenerator: colorGeneratorType,
-  text: PropTypes.string,
-  children: PropTypes.node,
-  clearable: PropTypes.bool,
-  onClick: PropTypes.func,
-  onClose: PropTypes.func,
-};
-const defaultProps = {
-  colorGenerator,
-};
-
-export default function Tag(
-  {
-    colorGenerator,
-    text,
-    children,
-    clearable,
-    onClick = () => ({}),
-    onClose = () => ({}),
-  }
-) {
-  return (
-    <span
-      className="badge tag"
-      style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable ? 'auto' : 'pointer' }}
-      onClick={onClick}
-    >
-      {children || text}
-      {clearable && <span className="close tag__close-selected-tag" onClick={onClose}>&times;</span>}
-    </span>
-  );
-}
-
-Tag.defaultProps = defaultProps;
-Tag.propTypes = propTypes;

src/utils/Tag.scss

@@ -1,21 +0,0 @@
-.tag {
-  color: #fff;
-  cursor: pointer;
-}
-
-.tag:not(:last-child) {
-  margin-right: 3px;
-}
-
-.tag__close-selected-tag.tag__close-selected-tag {
-  font-size: inherit;
-  color: inherit;
-  opacity: 1;
-  cursor: pointer;
-  margin-left: 5px;
-}
-
-.tag__close-selected-tag.tag__close-selected-tag:hover {
-  color: inherit !important;
-  opacity: 1 !important;
-}

src/utils/TagBullet.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import * as PropTypes from 'prop-types';
-import colorGenerator, { colorGeneratorType } from './ColorGenerator';
-import './TagBullet.scss';
-
-const propTypes = {
-  tag: PropTypes.string.isRequired,
-  colorGenerator: colorGeneratorType,
-};
-const defaultProps = {
-  colorGenerator,
-};
-
-export default function TagBullet({ tag, colorGenerator }) {
-  return (
-    <div
-      style={{ backgroundColor: colorGenerator.getColorForKey(tag) }}
-      className="tag-bullet"
-    />
-  );
-}
-
-TagBullet.propTypes = propTypes;
-TagBullet.defaultProps = defaultProps;

src/utils/TagBullet.scss

@@ -1,10 +0,0 @@
-.tag-bullet {
-  $width: 20px;
-
-  border-radius: 50%;
-  width: $width;
-  height: $width;
-  display: inline-block;
-  vertical-align: -4px;
-  margin-right: 7px;
-}

src/utils/TagsSelector.js

@@ -1,93 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import TagsInput from 'react-tagsinput';
-import PropTypes from 'prop-types';
-import Autosuggest from 'react-autosuggest';
-import { pick, identity } from 'ramda';
-import { listTags } from '../tags/reducers/tagsList';
-import colorGenerator, { colorGeneratorType } from './ColorGenerator';
-import './TagsSelector.scss';
-import TagBullet from './TagBullet';
-
-export class TagsSelectorComponent extends React.Component {
-  static propTypes = {
-    tags: PropTypes.arrayOf(PropTypes.string).isRequired,
-    onChange: PropTypes.func.isRequired,
-    placeholder: PropTypes.string,
-    colorGenerator: colorGeneratorType,
-    tagsList: PropTypes.shape({
-      tags: PropTypes.arrayOf(PropTypes.string),
-    }),
-  };
-  static defaultProps = {
-    colorGenerator,
-    placeholder: 'Add tags to the URL',
-  };
-
-  componentDidMount() {
-    const { listTags } = this.props;
-
-    listTags();
-  }
-
-  render() {
-    const { tags, onChange, placeholder, colorGenerator, tagsList } = this.props;
-    const renderTag = ({ tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other }) => (
-      <span key={key} style={{ backgroundColor: colorGenerator.getColorForKey(tag) }} {...other}>
-        {getTagDisplayValue(tag)}
-        {!disabled && <span className={classNameRemove} onClick={() => onRemove(key)} />}
-      </span>
-    );
-    const renderAutocompleteInput = (data) => {
-      const { addTag, ...otherProps } = data;
-      const handleOnChange = (e, { method }) => {
-        method === 'enter' ? e.preventDefault() : otherProps.onChange(e);
-      };
-
-      // eslint-disable-next-line no-extra-parens
-      const inputValue = (otherProps.value && otherProps.value.trim().toLowerCase()) || '';
-      const inputLength = inputValue.length;
-      const suggestions = tagsList.tags.filter((state) => state.toLowerCase().slice(0, inputLength) === inputValue);
-
-      return (
-        <Autosuggest
-          ref={otherProps.ref}
-          suggestions={suggestions}
-          inputProps={{ ...otherProps, onChange: handleOnChange }}
-          highlightFirstSuggestion
-          shouldRenderSuggestions={(value) => value && value.trim().length > 0}
-          getSuggestionValue={(suggestion) => suggestion}
-          renderSuggestion={(suggestion) => (
-            <React.Fragment>
-              <TagBullet tag={suggestion} />
-              {suggestion}
-            </React.Fragment>
-          )}
-          onSuggestionSelected={(e, { suggestion }) => {
-            addTag(suggestion);
-          }}
-          onSuggestionsClearRequested={identity}
-          onSuggestionsFetchRequested={identity}
-        />
-      );
-    };
-
-    return (
-      <TagsInput
-        value={tags}
-        inputProps={{ placeholder }}
-        onlyUnique
-        renderTag={renderTag}
-        renderInput={renderAutocompleteInput}
-
-        // FIXME Workaround to be able to add tags on Android
-        addOnBlur
-        onChange={onChange}
-      />
-    );
-  }
-}
-
-const TagsSelector = connect(pick([ 'tagsList' ]), { listTags })(TagsSelectorComponent);
-
-export default TagsSelector;

src/utils/TagsSelector.scss

@@ -1,16 +0,0 @@
-@import './base';
-
-.react-autosuggest__suggestions-list {
-  list-style-type: none;
-  padding: 0;
-  margin-bottom: 6px;
-}
-
-.react-autosuggest__suggestion {
-  margin-left: -6px;
-  padding: 5px 8px;
-}
-
-.react-autosuggest__suggestion--highlighted {
-  background-color: $lightGrey;
-}