{"size": 5432, "ext": "js", "max_stars_repo_path": "client/components/operations/item.js", "max_stars_repo_name": "OliCSADoerr/kresus_pod", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/components/operations/item.js", "max_issues_repo_name": "OliCSADoerr/kresus_pod", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/components/operations/item.js", "max_forks_repo_name": "OliCSADoerr/kresus_pod", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 32.7228915663, "max_line_length": 97, "alphanum_fraction": 0.5454712813}
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import { formatDate, NONE_CATEGORY_ID, translate as $t } from '../../helpers';
import { get, actions } from '../../store';

import LabelComponent from './label';
import { MODAL_SLUG } from './details';
import DisplayIf, { IfNotMobile } from '../ui/display-if';
import OperationTypeSelect from './editable-type-select';
import CategorySelect from './editable-category-select';

import withLongPress from '../ui/longpress';

const OpenDetailsModalButton = connect(null, (dispatch, props) => {
    return {
        handleClick() {
            actions.showModal(dispatch, MODAL_SLUG, props.operationId);
        },
    };
})(props => {
    return (
        <button
            className="fa fa-plus-square"
            title={$t('client.operations.show_details')}
            onClick={props.handleClick}
        />
    );
});

OpenDetailsModalButton.propTypes = {
    // The unique id of the operation for which the details have to be shown.
    operationId: PropTypes.number.isRequired,
};

const BudgetIcon = props => {
    if (+props.budgetDate === +props.date) {
        return null;
    }
    let budgetIcon, budgetTitle;
    if (+props.budgetDate < +props.date) {
        budgetIcon = 'fa-calendar-minus-o';
        budgetTitle = $t('client.operations.previous_month_budget');
    } else {
        budgetIcon = 'fa-calendar-plus-o';
        budgetTitle = $t('client.operations.following_month_budget');
    }

    return <i className={`operation-assigned-to-budget fa ${budgetIcon}`} title={budgetTitle} />;
};

// As the Operation component is meant to be passed to the withLongPress HOC,
// it has to be non functional.
/* eslint-disable react/prefer-stateless-function */
class Operation extends React.PureComponent {
    handleToggleBulkEdit = () => {
        this.props.toggleBulkItem(this.props.operationId);
    };

    render() {
        let op = this.props.operation;

        let rowClassName = op.amount > 0 ? 'income' : '';

        let maybeBorder = this.props.categoryColor
            ? { borderRight: `5px solid ${this.props.categoryColor}` }
            : null;

        return (
            <tr style={maybeBorder} className={rowClassName}>
                <IfNotMobile>
                    <td className="modale-button">
                        <DisplayIf condition={!this.props.inBulkEditMode}>
                            <OpenDetailsModalButton operationId={op.id} />
                        </DisplayIf>
                        <DisplayIf condition={this.props.inBulkEditMode}>
                            <input
                                onChange={this.handleToggleBulkEdit}
                                checked={this.props.bulkEditStatus}
                                type="checkbox"
                            />
                        </DisplayIf>
                    </td>
                </IfNotMobile>
                <td className="date">
                    <span>{formatDate.toShortDayMonthString(op.date)}</span>
                    <IfNotMobile>
                        <BudgetIcon budgetDate={op.budgetDate} date={op.date} />
                    </IfNotMobile>
                </td>
                <IfNotMobile>
                    <td className="type">
                        <OperationTypeSelect
                            operationId={op.id}
                            value={op.type}
                            className="light"
                        />
                    </td>
                </IfNotMobile>

                <td>
                    <LabelComponent item={op} inputClassName="light" />
                </td>
                <td className="amount">{this.props.formatCurrency(op.amount)}</td>
                <IfNotMobile>
                    <td className="category">
                        <CategorySelect
                            operationId={op.id}
                            value={op.categoryId}
                            className="light"
                        />
                    </td>
                </IfNotMobile>
            </tr>
        );
    }
}

const ConnectedOperation = connect(
    (state, props) => {
        let operation = get.operationById(state, props.operationId);
        let categoryColor =
            operation.categoryId !== NONE_CATEGORY_ID
                ? get.categoryById(state, operation.categoryId).color
                : null;
        return {
            operation,
            categoryColor,
            isMobile: props.isMobile,
        };
    },
    null,
    null,
    { forwardRef: true }
)(Operation);
/* eslint-enable react/prefer-stateless-function */

ConnectedOperation.propTypes = {
    // The operation's unique identifier this item is representing.
    operationId: PropTypes.number.isRequired,

    // A method to compute the currency.
    formatCurrency: PropTypes.func.isRequired,

    // Is on mobile view.
    isMobile: PropTypes.bool,

    // Is this operation checked for bulk edit.
    bulkEditStatus: PropTypes.bool,
};

ConnectedOperation.defaultProps = {
    isMobile: false,
};

export const OperationItem = ConnectedOperation;

export const PressableOperationItem = connect(null, (dispatch, props) => {
    return {
        onLongPress() {
            actions.showModal(dispatch, MODAL_SLUG, props.operationId);
        },
    };
})(withLongPress(ConnectedOperation));
