phx-react
Version:
PHX REACT
30 lines • 4.14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXEmptyRecord = PHXEmptyRecord;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const EmptySvg_1 = tslib_1.__importDefault(require("./EmptySvg"));
const Button_1 = require("../Button");
const Loading_1 = require("../Loading");
function PHXEmptyRecord({ border, className, description = 'Dữ liệu đang trống.', icon, loading, primaryAction, secondaryAction, title = 'Trống', type = 'default', }) {
const renderActionComponent = () => (react_1.default.createElement("div", { className: 'flex flex-row-reverse flex-wrap items-center justify-center gap-2 pt-3' },
primaryAction && (react_1.default.createElement(Button_1.PHXButton, { className: 'font-semibold', disabled: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.disabled, loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading, onClick: primaryAction.onClick, primary: true, size: 'small' }, primaryAction.content)),
secondaryAction && (react_1.default.createElement(Button_1.PHXButton, { className: 'font-semibold', disabled: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.disabled, loading: secondaryAction === null || secondaryAction === void 0 ? void 0 : secondaryAction.loading, onClick: secondaryAction.onClick, secondary: true, size: 'small' }, secondaryAction.content))));
return (react_1.default.createElement("div", { className: className },
type === 'default' && (react_1.default.createElement("div", { className: `flex min-w-full flex-col items-center bg-white px-4 py-2 pb-14 pt-16 text-center align-middle sm:rounded-lg md:px-6 md:pr-0 lg:px-8 ${border ? 'border shadow' : ''}` }, !loading ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(EmptySvg_1.default, { icon: icon }),
react_1.default.createElement("p", { className: ' mt-3 text-sm font-semibold text-gray-900' }, title),
react_1.default.createElement("span", { className: 'mt-1 text-[12px] font-medium text-gray-500' }, description),
primaryAction || secondaryAction ? renderActionComponent() : react_1.default.createElement(react_1.default.Fragment, null))) : (react_1.default.createElement(Loading_1.PHXSpinner, null)))),
type === 'small' && (react_1.default.createElement("div", { className: `flex min-w-full flex-col items-center bg-white px-4 py-2 pb-10 pt-10 text-center align-middle sm:rounded-lg md:px-6 md:pr-0 lg:px-8 ${border ? 'border shadow' : ''}` }, !loading ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(EmptySvg_1.default, { icon: icon }),
react_1.default.createElement("p", { className: 'text-sm font-semibold text-gray-900' }, title),
react_1.default.createElement("span", { className: 'mt-1 text-[12px] font-medium text-gray-500' }, description),
primaryAction || secondaryAction ? renderActionComponent() : react_1.default.createElement(react_1.default.Fragment, null))) : (react_1.default.createElement(Loading_1.PHXSpinner, null)))),
type === 'micro' && (react_1.default.createElement("div", { className: `flex min-w-full flex-col items-center bg-white px-4 py-2 pb-5 pt-8 text-center align-middle sm:rounded-lg md:px-6 md:pr-0 lg:px-8 ${border ? 'border shadow' : ''}` }, !loading ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(EmptySvg_1.default, { icon: icon }),
react_1.default.createElement("p", { className: 'text-sm font-semibold text-gray-900' }, title),
react_1.default.createElement("span", { className: 'mt-1 text-[12px] font-medium text-gray-500' }, description),
primaryAction || secondaryAction ? renderActionComponent() : react_1.default.createElement(react_1.default.Fragment, null))) : (react_1.default.createElement(Loading_1.PHXSpinner, null))))));
}
//# sourceMappingURL=EmptyRecord.js.map