@uimkit/uikit-react/dist/cjs/components/UIGroupPreview/UIGroupPreviewContent.js

<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
require('tslib');
require('../../types/models.js');
require('../../types/events.js');
var Avatar = require('../Avatar/Avatar.js');
var Icon = require('../Icon/Icon.js');
var type = require('../Icon/type.js');
var index = require('../Plugins/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function UIGroupPreviewContent(props) {
    var group = props.group, _a = props.Avatar, Avatar$1 = _a === void 0 ? Avatar.Avatar : _a, displayImage = props.displayImage, displayTitle = props.displayTitle, active = props.active, activeGroup = props.activeGroup, setActiveGroup = props.setActiveGroup;
    var groupPreviewButton = React.useRef(null);
    var activeClass = active ? 'group-preview-content--active' : '';
    var _b = React.useState(false), isHover = _b[0], setIsHover = _b[1];
    var onSelectGroup = function () {
        if (setActiveGroup) {
            setActiveGroup(group);
        }
        if (groupPreviewButton === null || groupPreviewButton === void 0 ? void 0 : groupPreviewButton.current) {
            groupPreviewButton.current.blur();
        }
    };
    var handleMouseEnter = function () {
        setIsHover(true);
    };
    var handleMouseLeave = function () {
        setIsHover(false);
    };
    var moreHandle = function (type) {
        group.id;
        switch (type) {
            case 'delete':
                if (group.id === activeGroup.id) {
                    setActiveGroup(null);
                }
                break;
        }
    };
    return (React__default["default"].createElement("button", { type: "button", "aria-selected": active, role: "option", className: "group-preview-container ".concat(activeClass), onClick: onSelectGroup, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: groupPreviewButton },
        React__default["default"].createElement("div", { className: "avatar" },
            React__default["default"].createElement(Avatar$1, { image: displayImage, name: group.name, size: 40 })),
        React__default["default"].createElement("div", { className: "content" },
            React__default["default"].createElement("div", { className: "title" }, displayTitle)),
        React__default["default"].createElement("div", { className: "external" }, !isHover
            ? (React__default["default"].createElement(React__default["default"].Fragment, null))
            : (React__default["default"].createElement("div", { className: "".concat(isHover ? 'more--hover' : 'more') },
                React__default["default"].createElement(index.Plugins, { customClass: "more-handle-box", plugins: [
                        React__default["default"].createElement("div", { className: "more-handle-item", style: { color: '#FF584C' }, onClick: function (e) {
                                e.stopPropagation();
                                moreHandle('delete');
                            }, role: "presentation" }, "\u5220\u9664"),
                    ], showNumber: 0, MoreIcon: (React__default["default"].createElement(Icon.Icon, { className: "icon-more", width: 16, height: 16, type: type.IconTypes.MORE })) }))))));
}

exports.UIGroupPreviewContent = UIGroupPreviewContent;
//# sourceMappingURL=UIGroupPreviewContent.js.map