EditableTagsField.js

import React, {Component} from 'react'
import {CommonInput} from "./MyFields";
import Spinner from "reactstrap/lib/Spinner";
import Label from "reactstrap/lib/Label";
import {Button} from "reactstrap";
import TagsInput from 'react-tagsinput';
import {get_keywords} from "../../services/app";
import enums from "../../helpers/enums";
import Badge from "reactstrap/lib/Badge";
import numberAbbreviate from 'number-abbreviate';
import {isDroidMobileApp, isIOSMobileApp, isMobile} from "../../helpers/helper";

export default class EditableTagsField extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            isEditMode: false,
            keywords: []
        };
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit() {
        let {keywords} = this.state;
        let {callAction} = this.props;

        if (keywords && callAction) {
            this.setState({
                isLoading: true
            }, () => {
                callAction(keywords, response => {
                    this.setState({
                        isLoading: false,
                        isEditMode: false
                    });
                });
            })
        }
    }

    render() {
        const {isLoading, isEditMode, keywords} = this.state;
        const {tags, canAddOrEdit, maxTagsAllowed, hideTagHits} = this.props;

        return (
            <React.Fragment>
                {
                    !isLoading
                    &&
                    (
                        <React.Fragment>
                            {
                                !isEditMode
                                &&
                                (
                                    <React.Fragment>
                                        {
                                            canAddOrEdit
                                            &&
                                            (
                                                <div className='d-flex flex-row justify-content-start'>
                                                    <Button
                                                        onClick={() => {
                                                            this.setState({
                                                                keywords: [...tags].map(tag => {
                                                                    return tag.keyword
                                                                }),
                                                                isEditMode: true
                                                            });
                                                        }}
                                                        color='primary'
                                                        className='btn-sm'>
                                                        <i className={'fas fa-' + (tags.length === maxTagsAllowed ? 'edit' : 'plus')}/><span>{tags.length === 0 ? (maxTagsAllowed ? 'Add upto ' + maxTagsAllowed + ' Keywords' : 'Add Keywords') : (tags.length < maxTagsAllowed ? 'Add Keywords' : 'Edit')}</span>
                                                    </Button>
                                                </div>
                                            )
                                        }
                                        {
                                            (!tags || tags.length === 0)
                                            &&
                                            (
                                                <React.Fragment>
                                                    No keywords
                                                </React.Fragment>
                                            )
                                        }
                                        {
                                            (tags && tags.length > 0)
                                            &&
                                            (
                                                <React.Fragment>
                                                    <div className='d-flex flex-wrap align-items-start mt-3'>
                                                        {
                                                            tags.map((tag, index) => {
                                                                return (
                                                                    <div
                                                                        className={'mt-1 d-flex flex-row align-items-center' + (index > 0 ? ' ml-1' : '')}>
                                                                        <Badge
                                                                            style={{
                                                                                height: '38px',
                                                                                fontSize: '1rem',
                                                                                borderRadius: '0'
                                                                            }}
                                                                            className='d-flex align-items-center'
                                                                            color='success'>{tag.keyword}</Badge>
                                                                        {
                                                                            !hideTagHits
                                                                            &&
                                                                            (
                                                                                <Badge
                                                                                    style={{
                                                                                        height: '38px',
                                                                                        fontSize: '1rem',
                                                                                        borderRadius: '0'
                                                                                    }}
                                                                                    className='d-flex align-items-center'
                                                                                    color='danger'>{tag.hits ? numberAbbreviate(tag.hits, 1) : 0}</Badge>
                                                                            )
                                                                        }
                                                                    </div>
                                                                );
                                                            })
                                                        }
                                                    </div>
                                                    {
                                                        !hideTagHits
                                                        &&
                                                        (
                                                            <div className='mt-2'>
                                                            <span className='text-muted'>*Red numbers represent the number of times the keyword was
                                                            searched for</span>
                                                            </div>
                                                        )
                                                    }
                                                </React.Fragment>
                                            )
                                        }
                                    </React.Fragment>
                                )
                            }
                            {
                                isEditMode
                                &&
                                (
                                    <div className='d-flex flex-column'>
                                        <div className='d-flex flex-row'>
                                            <TagsInput className='react-tagsinput flex-grow-1' value={keywords}
                                                       maxTags={maxTagsAllowed}
                                                       renderTag={(props) => {
                                                           let {tag, key, disabled, onRemove, classNameRemove, getTagDisplayValue, ...other} = props;
                                                           return (
                                                               <span key={key} {...other}>
                                                                   <span style={{
                                                                       overflow: 'hidden',
                                                                       whiteSpace: 'nowrap',
                                                                       textOverflow: 'ellipsis',
                                                                       maxWidth: '180px'
                                                                   }}>{getTagDisplayValue(tag)}</span>
                                                                   {
                                                                       !disabled &&
                                                                       <a className={classNameRemove + ' ml-1'}
                                                                          onClick={(e) => onRemove(key)}/>
                                                                   }
                                                               </span>
                                                           )
                                                       }}
                                                       onChange={(tags) => {
                                                           this.setState({
                                                               keywords: tags.filter(tag => {
                                                                   return tag.length > 1
                                                               })
                                                           });
                                                       }} onlyUnique={true} addKeys={[isMobile() ? 13 : 188]}
                                                       inputProps={{placeholder: 'Keywords'}}/>
                                            <Button size='sm' style={{height: '43px'}} color='primary'
                                                    className='d-flex flex-row align-items-center ml-2'
                                                    onClick={() => {
                                                        this.onSubmit();
                                                    }}>
                                                <i className={'fas fa fa-save'}
                                                   style={{
                                                       color: 'white',
                                                       fontSize: '18px'
                                                   }}/>
                                                {
                                                    !isMobile()
                                                    &&
                                                    (
                                                        <React.Fragment>
                                                            &nbsp;Save
                                                        </React.Fragment>
                                                    )
                                                }
                                            </Button>
                                            <Button size='sm' style={{height: '43px'}} color='danger'
                                                    className='d-flex flex-row align-items-center'
                                                    onClick={() => {
                                                        this.setState({
                                                            isEditMode: false
                                                        });
                                                    }}>
                                                <i className={'fas fa fa-close'}
                                                   style={{
                                                       color: 'white',
                                                       fontSize: '18px'
                                                   }}/>
                                                {
                                                    !isMobile()
                                                    &&
                                                    (
                                                        <React.Fragment>
                                                            &nbsp;Cancel
                                                        </React.Fragment>
                                                    )
                                                }
                                            </Button>
                                        </div>
                                        <span>{isMobile() ? 'Press ENTER to add a keyword' : 'Enter comma separated keywords'}</span>
                                    </div>
                                )
                            }
                        </React.Fragment>
                    )
                }
                {
                    isLoading
                    &&
                    (
                        <React.Fragment>
                            <div className='d-flex flex-row align-items-center'>
                                <Spinner color='primary'/>
                                <Label size='lg' className='mb-0 ml-2'>Saving Keywords...</Label>
                            </div>
                        </React.Fragment>
                    )
                }
            </React.Fragment>
        );
    }
}