lml-main/packages/core-ui/dist/couriers/components/search/courier-by-id.js

This is now a mono repository published into many standalone packages.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_redux_1 = require("react-redux");
const cosmo_redux_api_1 = require("@lml/cosmo-redux-api");
const components_1 = require("../../../couriers/components");
const actions_1 = require("../../actions");
const constants_1 = require("../../../couriers/constants");
const cosmoui_1 = require("cosmoui");
const findCouriersImage = require('../../assets/find_couriers.png');
const bodyStyles = { overflow: 'auto', backgroundColor: 'white' };
class CourierByIdComponent extends cosmoui_1.StylableComponent {
    constructor() {
        super(...arguments);
        this.renderResult = () => {
            const { courier, searchValue, submitted } = this.props;
            if (!submitted || !searchValue)
                return this.noSearchQuery();
            if (!courier)
                return this.noResult();
            return (React.createElement(cosmoui_1.Column, null,
                React.createElement(cosmoui_1.Text, { bold: true, size: 'xl', marginless: true }, "Search Result(s)"),
                React.createElement(cosmoui_1.Text, { size: 'sm' },
                    "Total couriers: ",
                    React.createElement("strong", null, 1)),
                React.createElement(components_1.CouriersTable, { couriers: [courier] })));
        };
        this.noResult = () => (React.createElement(cosmoui_1.Column, { fullWidth: true, fullHeight: true, align: "center", justify: "center" },
            React.createElement(cosmoui_1.Image, { url: findCouriersImage, height: "128px", width: "128px" }),
            React.createElement(cosmoui_1.Text, { warning: true }, "Your search returned no matches")));
        this.noSearchQuery = () => (React.createElement(cosmoui_1.Column, { fullWidth: true, fullHeight: true, align: "center", justify: "center" },
            React.createElement(cosmoui_1.Image, { url: findCouriersImage, height: "128px", width: "128px" }),
            React.createElement(cosmoui_1.Text, { primary: true }, "Search for courier by ID")));
        this.headerStyles = () => ({
            minHeight: 'max-content',
            marginBottom: this.margin(200),
            backgroundColor: this.gray(100),
            paddingBottom: 0,
        });
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.submitted && nextProps.courier) {
            this.props.showCourierDetails(nextProps.courier.refId);
        }
    }
    render() {
        return (React.createElement(cosmoui_1.Column, { fullWidth: true, fullHeight: true },
            React.createElement(cosmoui_1.Paper, { fullWidth: true, style: this.headerStyles(), align: "space-between" },
                React.createElement(cosmoui_1.Header, { bold: true }, "Find Courier"),
                React.createElement(components_1.CourierIdForm, null)),
            React.createElement(cosmoui_1.Paper, { fullWidth: true, fullHeight: true, style: bodyStyles }, this.renderResult())));
    }
}
const mapStateToProps = (state, ownProps) => {
    const searchValue = cosmoui_1.getFormFieldValue(state, constants_1.COURIER_ID_FORM_KEY, constants_1.SEARCH_COURIER_ID_INPUT_KEY);
    const courier = cosmo_redux_api_1.getCourierById(state, searchValue);
    return {
        courier,
        searchValue,
        submitted: cosmoui_1.isFormFieldSubmitted(state, constants_1.COURIER_ID_FORM_KEY, constants_1.SEARCH_COURIER_ID_INPUT_KEY),
    };
};
const mapDispatchToProps = {
    showCourierDetails: actions_1.showCourierDetails,
};
exports.CourierById = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(CourierByIdComponent);
//# sourceMappingURL=courier-by-id.js.map