@ahmedkira/custom-view/dist/index.esm.js

A customizable React component for displaying field data in a grid layout

import React from 'react';
import { useMediaQuery, Box, Typography, Link } from '@mui/material';

function CustomView(_a) {
    var values = _a.values, tableProps = _a.tableProps;
    var isMobile = useMediaQuery('(max-width:600px)');
    var usedTableProps = tableProps
        .filter(function (field) { return field.id !== 'operations'; })
        .filter(function (field) { return field.view & 1; })
        .filter(function (field) { return field.viewFn === undefined || field.viewFn(values); });
    return (React.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', margin: '-8px' } }, usedTableProps.map(function (field) {
        var _a;
        if (!field.prop) {
            console.warn("Field with id \"".concat(field.id, "\" is missing 'prop' property."));
            return null; // Skip rendering if prop is missing
        }
        if (values[field.prop] && typeof values[field.prop] === 'object' && field.type !== 'lang') {
            console.warn("Field with id \"".concat(field.id, "\" has an object value for prop \"").concat(field.prop, "\" but is not of type 'lang'."));
            // return null; // Skip rendering if value is an object but not of type 'lang'
            values[field.prop] = JSON.stringify(values[field.prop], null, 2); // Convert object to string for display
        }
        var value = values[field.prop];
        return (React.createElement("div", { key: field.id, style: {
                // width: 'calc(50% - 16px)',
                width: isMobile ? '100%' : 'calc(50% - 16px)',
                padding: '8px',
                boxSizing: 'border-box'
            } },
            React.createElement(Box, null,
                React.createElement(Typography, { variant: "subtitle2", color: "textSecondary" }, field.label),
                field.type === 'lang' && value && typeof value === 'object' ? (React.createElement(React.Fragment, null,
                    React.createElement(Typography, { variant: "body1" },
                        "EN: ",
                        value.en),
                    React.createElement(Typography, { variant: "body1" },
                        "AR: ",
                        value.ar))) : field.type === 'url' && value ? (
                // URL Field
                React.createElement(Link, { href: value, target: "_blank", rel: "noopener", underline: "hover" }, value.length > 50 ? "".concat(value.slice(0, 50), "...") : value)) : field.type === 'select' && field.options ? (React.createElement(Typography, { variant: "body1" }, ((_a = field.options.find(function (opt) { return opt.value === value; })) === null || _a === void 0 ? void 0 : _a.label) || value || '—')) : field.type === 'date' && value ? (
                // Date Field
                React.createElement(Typography, { variant: "body1" }, new Date(value).toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                }))) : field.type === 'boolean' ? (
                // Boolean Field
                React.createElement(Typography, { variant: "body1" }, value ? 'Yes' : 'No')) : (
                // Generic display
                React.createElement(Typography, { variant: "body1" }, typeof value === 'boolean' ? (value ? 'Yes' : 'No') : value || '—')))));
    })));
}

export { CustomView as default };
//# sourceMappingURL=index.esm.js.map