filter-material-ui/lib/TextFilter.js

A material-ui component which allows to edit a user defined set of fields representing a filter and display it as a text or a form

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var lodash_1 = require("lodash");
var react_1 = __importStar(require("react"));
var styles = {
    container: {
        textAlign: 'center',
        width: '100%',
    },
    icon: {
        fill: '#3f51b5',
        height: '1em',
        width: '1em',
    },
    iconContainer: {
        backgroundColor: 'aqua',
        borderRadius: '100%',
        cursor: 'pointer',
        display: 'inline-flex',
        padding: '1ch',
        marginLeft: 5,
    },
    text: {
        lineHeight: '2em',
    },
};
function TextFilter(props) {
    var data = props.data, fields = props.fields, id = props.id, onEdit = props.onEdit, textPrefix = props.textPrefix, textSuffix = props.textSuffix;
    var getValue = (0, react_1.useCallback)(function (label) {
        if ((0, lodash_1.isEmpty)(data)) {
            return '';
        }
        return data[label];
    }, [data]);
    var renderField = (0, react_1.useCallback)(function (field, index) {
        var and = renderAnd(index !== 0);
        var name = field.name;
        var value = getValue(name);
        var descr = getItems(field, value);
        return " ".concat(and).concat(descr);
    }, [getValue]);
    var fieldsText = (0, react_1.useMemo)(function () { return fields.map(renderField); }, [fields, renderField]);
    var text = (0, react_1.useMemo)(function () { return "".concat(textPrefix).concat(fieldsText).concat(textSuffix); }, [fieldsText, textPrefix, textSuffix]);
    return (react_1.default.createElement("div", { id: id, style: styles.container },
        react_1.default.createElement("div", null,
            react_1.default.createElement("span", { style: styles.text }, text),
            react_1.default.createElement("div", { style: styles.iconContainer, onClick: onEdit },
                react_1.default.createElement("svg", { style: styles.icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 20" },
                    react_1.default.createElement("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }))))));
}
function renderAnd(yes) {
    return yes ? 'and ' : '';
}
function getItems(field, value) {
    if ((0, lodash_1.isEmpty)(value)) {
        return field.text.all;
    }
    if ((0, lodash_1.isArray)(value) === false) {
        return "".concat(field.text.singular, " '").concat(value, "'");
    }
    if ((0, lodash_1.size)(value) === 1) {
        return "".concat(field.text.singular, " '").concat(value[0], "'");
    }
    var values = (0, lodash_1.join)(value, "', '");
    return "".concat(field.text.plural, " '").concat(values, "'");
}
exports.default = TextFilter;