diff --git a/package.json b/package.json index b89f28c7..bd8f411a 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "react-moment": "^0.7.6", "react-redux": "^5.0.7", "react-router-dom": "^4.2.2", - "react-tag-autocomplete": "^5.5.1", + "react-tagsinput": "^3.19.0", "reactstrap": "^6.0.1", "redux": "^4.0.0", "redux-thunk": "^2.3.0", diff --git a/src/common/react-tagsinput.scss b/src/common/react-tagsinput.scss new file mode 100644 index 00000000..2bddbf33 --- /dev/null +++ b/src/common/react-tagsinput.scss @@ -0,0 +1,54 @@ +.react-tagsinput { + background-color: #fff; + border: 1px solid #ccc; + border-radius: .25rem; + overflow: hidden; + min-height: calc(2.6rem + 2px); + padding: 6px 0 0 6px; +} + +.react-tagsinput--focused { + border-color: #80bdff; + -webkit-box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); + box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); + -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; + transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; + -o-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; +} + +.react-tagsinput-tag { + font-size: 1rem; + background-color: #f1f1f1; + border-radius: 2px; + border: 1px solid #d1d1d1; + display: inline-block; + font-weight: 400; + margin: 0 5px 6px 0; + padding: 6px 8px; + line-height: 1; +} +.react-tagsinput-tag:hover { + border-color: #b1b1b1; +} + +.react-tagsinput-remove { + cursor: pointer; + font-weight: bold; + margin-left: 8px; +} + +.react-tagsinput-tag a::before { + content: "\2715"; + color: #aaa; +} + +.react-tagsinput-input { + background: transparent; + border: 0; + outline: none; + padding: 3px 5px; + width: 155px; + margin-bottom: 6px; +} diff --git a/src/index.js b/src/index.js index df2b7293..32082499 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,9 @@ import { BrowserRouter } from 'react-router-dom'; import { applyMiddleware, compose, createStore } from 'redux'; import ReduxThunk from 'redux-thunk'; +import '../node_modules/react-datepicker/dist/react-datepicker.css'; +import './common/react-tagsinput.scss'; + import App from './App'; import './index.scss'; import ScrollToTop from './common/ScrollToTop' diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js index 3f7782e4..4102a67b 100644 --- a/src/short-urls/CreateShortUrl.js +++ b/src/short-urls/CreateShortUrl.js @@ -1,12 +1,11 @@ import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown'; import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp'; import FontAwesomeIcon from '@fortawesome/react-fontawesome'; -import { assoc, dissoc, isNil, pick, pipe, pluck, replace } from 'ramda'; +import { assoc, dissoc, isNil, pick, pipe, replace, trim } from 'ramda'; import React from 'react'; import { connect } from 'react-redux'; -import ReactTags from 'react-tag-autocomplete'; +import TagsInput from 'react-tagsinput' import { Collapse } from 'reactstrap'; -import '../../node_modules/react-datepicker/dist/react-datepicker.css'; import DateInput from '../common/DateInput'; import './CreateShortUrl.scss'; import CreateShortUrlResult from './helpers/CreateShortUrlResult'; @@ -26,14 +25,7 @@ export class CreateShortUrl extends React.Component { render() { const { createShortUrl, shortUrlCreationResult, resetCreateShortUrl } = this.props; - const addTag = tag => this.setState({ - tags: [].concat(this.state.tags, assoc('name', replace(/ /g, '-', tag.name), tag)) - }); - const removeTag = i => { - const tags = this.state.tags.slice(0); - tags.splice(i, 1); - this.setState({ tags }); - }; + const changeTags = tags => this.setState({ tags: tags.map(pipe(trim, replace(/ /g, '-'))) }); const renderOptionalInput = (id, placeholder, type = 'text', props = {}) =>