zotero-web-library/lib/libraryUi/widgets/RecentItems.js

Web library from zotero.org

'use strict';

var log = require('libzotero/lib/Log').Logger('zotero-web-library:recentItems');

var React = require('react');

var RecentItems = React.createClass({
    displayName: 'RecentItems',

    componentWillMount: function componentWillMount() {
        var reactInstance = this;
        var library = reactInstance.props.library;
        reactInstance.setState({ loading: true });
        library.loadItems({
            'limit': 10,
            'order': 'dateModified'
        }).then(function (response) {
            reactInstance.setState({ loading: false, items: response.loadedItems });
        });
    },
    getDefaultProps: function getDefaultProps() {
        return {
            displayFields: ['title', 'creatorSummary', 'dateModified'],
            item: {}
        };
    },
    getInitialState: function getInitialState() {
        return {
            loading: false,
            items: []
        };
    },
    render: function render() {
        var reactInstance = this;
        var itemRows = this.state.items.map(function (item) {
            return React.createElement(RecentItemRow, { key: item.get('key'), item: item });
        });

        var headers = this.props.displayFields.map(function (header) {
            return React.createElement(
                'th',
                { key: header, className: 'field-table-header' },
                Zotero.Item.prototype.fieldMap[header] ? Zotero.Item.prototype.fieldMap[header] : header
            );
        });

        return React.createElement(
            'table',
            { id: 'field-table', ref: 'itemsTable', className: 'wide-items-table table table-striped' },
            React.createElement(
                'thead',
                null,
                React.createElement(
                    'tr',
                    null,
                    headers
                )
            ),
            React.createElement(
                'tbody',
                null,
                itemRows
            )
        );
    }
});

var RecentItemRow = React.createClass({
    displayName: 'RecentItemRow',

    getDefaultProps: function getDefaultProps() {
        return {
            displayFields: ['title', 'creatorSummary', 'dateModified'],
            item: {}
        };
    },
    render: function render() {
        var reactInstance = this;
        var item = this.props.item;
        var fields = this.props.displayFields.map(function (field) {
            return React.createElement(
                'td',
                { key: field, className: field, 'data-itemkey': item.get('key') },
                React.createElement(
                    'a',
                    { 'data-itemkey': item.get('key'), href: Zotero.url.itemHref(item), title: item.get(field) },
                    Zotero.format.itemField(field, item, true)
                )
            );
        });
        return React.createElement(
            'tr',
            null,
            fields
        );
    }
});

module.exports = RecentItems;