SocialAttachments.js

import React from 'react';
import PropTypes from 'prop-types';

class SocialAttachments extends React.Component {

    constructor(props) {
        super(props);
    }

    state = {
        lastLinkAttached: null
    };

    static propTypes = {
        attachments: PropTypes.object.isRequired,
        updateAttachments: PropTypes.func.isRequired
    };


    componentWillReceiveProps(nextProps) {

        if (nextProps.links.length) {

            // If there's already an attachment, don't attempt to add a link
            const attachmentKeys = Object.keys(this.props.attachments);
            if (attachmentKeys.length) return;


            // pick off the first link in the array
            const link = nextProps.links[0];

            if (link !== this.state.lastLinkAttached) {

                this.setState({
                    lastLinkAttached: link
                });

                this.addAttachment('link', link);
            }

        }

    }


    uploadFile = () => {

        alert('upload file');

    }


    insertFromMediaManager = () => {

        aw.mm.show({ callback: this.selectedFromMediaManager, type: '1' });

    };


    selectedFromMediaManager = (obj) => {

        this.addAttachment('image', obj.url, 'Media Manager', obj.file);

    };


    /**
     * @param type image/link
     * @param url
     * @param source
     * @param name
     */
    addAttachment = (type, url, source, name) => {

        let attachments = {...this.props.attachments};


        /**
         * If adding a non-link, and we already have a link attachment, remove it first
         */
        if (type !== 'link') {
            for (const key of Object.keys(attachments)) {
                if (this.props.attachments[key].type === 'link') {
                    attachments = {};
                    break;
                }
            }
        }


        /**
         * Ensure URLs start with http:// https:// or {{website_url}}
         */
        const websiteUrlVar = '{{website_url}}';

        if (url.substr(0, 4) !== 'http'
            && url.substr(0, websiteUrlVar.length) !== websiteUrlVar) {
            url = 'http://' + url;
        }


        /**
         * If no name supplied, use the URL
         */
        if (!name) name = url;


        /**
         * Add to attachments object
         */
        const timestamp = Date.now();

        attachments[`a-${timestamp}`] = {
            url,
            name,
            source,
            type
        };

        this.props.updateAttachments(attachments);

    };


    removeAttachment = (id) => {

        const attachments = {...this.props.attachments};

        delete attachments[id];

        this.props.updateAttachments(attachments);

    };

    renderAttachment = (key) => {

        const attachment = this.props.attachments[key];

        let imagePreview = null;

        if (attachment.type === 'image') {
            imagePreview = <div className="aiir-sp-attachment__preview">
                <img src={attachment.url} alt="" className="aiir-sp-attachment__preview-img" />
            </div>;
        }

        let description = null;

        if (attachment.type === 'image') {
            description = <span className="aiir-sp-attachment__description">
                From {attachment.source}
            </span>;
        }

        return (
            <div className="aiir-sp-attachment">
                <input type="hidden" name="attachment[url][]" value={attachment.url} />
                <input type="hidden" name="attachment[type][]" value={attachment.type} />

                {imagePreview}

                <div className="aiir-sp-attachment__meta">
                    {attachment.name}
                    {description}
                </div>

                <div className="aiir-sp-attachment__controls">
                    <button type="button" className="icon-btn" onClick={(e) => this.removeAttachment(key)}>
                        <i className="icon icon--cross" />
                    </button>
                </div>
            </div>
        )

    };

    render() {
        return (
            <div className="control-group">
                <label className="control-label" htmlFor="attachments">Attachments</label>
                <div className="controls">
                    <div className="aiir-alert">
                        <p>
                            Drag and drop files here or select an existing file:
                        </p>
                        <button className="btn" type="button">
                            <i className="icon icon--screen" onClick={this.uploadFile} /> Upload new file
                        </button>
                        <button className="btn" type="button" onClick={this.insertFromMediaManager}>
                            <i className="icon icon--folder--upload" /> Insert from Media Manager
                        </button>
                    </div>

                    <div className="aiir-sp-attachment-wrapper">

                        {Object
                            .keys(this.props.attachments)
                            .map(this.renderAttachment)}

                    </div>
                </div>
            </div>
        )
    }

}

export default SocialAttachments;