phx-react/dist/cjs/components/SortItem/SortItem.js

PHX REACT

"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var image_1 = tslib_1.__importDefault(require("next/image"));
var react_1 = tslib_1.__importDefault(require("react"));
var icon_1 = require("../../assets/icon");
var Dropdown_1 = require("../Dropdown");
var types_1 = require("../types");
function SortItem(_a) {
    var children = _a.children, title = _a.title, subTitle = _a.subTitle, content = _a.content, actions = _a.actions, _b = _a.enableBorder, enableBorder = _b === void 0 ? false : _b, className = _a.className, _c = _a.originActionDropdown, originActionDropdown = _c === void 0 ? 'left' : _c, _d = _a.dragIconPosition, dragIconPosition = _d === void 0 ? 'left' : _d;
    var border = 'shadow-xs rounded-lg bg-white border border-gray-200';
    var dragIcon = (react_1["default"].createElement("div", { className: 'w-5 h-5 cursor-move drag-item flex-shrink-0' },
        react_1["default"].createElement(image_1["default"], { src: icon_1.PHXIcons.DRAG, alt: 'drag', width: 20, height: 20 })));
    return (react_1["default"].createElement("div", { className: (0, types_1.classNames)(enableBorder ? border : '', className) },
        react_1["default"].createElement("div", { className: 'flex flex-col p-4 justify-center' },
            react_1["default"].createElement("div", { className: 'flex justify-between items-start gap-2' },
                react_1["default"].createElement("div", { className: 'flex items-center gap-2 flex-1 min-w-0' },
                    dragIconPosition === 'left' && dragIcon,
                    react_1["default"].createElement("div", { className: 'flex flex-col gap-1 min-w-0 flex-1 ' },
                        react_1["default"].createElement("div", { className: 'flex items-start gap-1 flex-wrap' },
                            typeof title === 'string' ? (react_1["default"].createElement("div", { className: 'text-sm text-gray-800 font-semibold max-w-lg' }, title)) : (react_1["default"].createElement("div", { className: 'w-full' }, title)),
                            !!subTitle && react_1["default"].createElement("div", { className: 'flex-shrink-0' }, subTitle)))),
                !!(actions === null || actions === void 0 ? void 0 : actions.length) && (react_1["default"].createElement("div", { className: 'flex items-center gap-2 flex-shrink-0' },
                    react_1["default"].createElement(Dropdown_1.PHXDropdown, { options: actions, type: 'ellipsis-icon', origin: originActionDropdown }))),
                dragIconPosition === 'right' && dragIcon),
            !!content &&
                (typeof content === 'string' ? react_1["default"].createElement("div", { className: 'mt-2 text-sm ml-7 text-gray-600' }, content) : content)),
        children));
}
exports["default"] = SortItem;
//# sourceMappingURL=SortItem.js.map