choerodon-ui/lib/tabs/customization-settings/tab-groups/Item.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _mobxReactLite = require("mobx-react-lite");

var _classnames = _interopRequireDefault(require("classnames"));

var _localeContext = require("../../../../pro/lib/locale-context");

var _icon = _interopRequireDefault(require("../../../icon"));

var _TabsContext = _interopRequireDefault(require("../../TabsContext"));

var _ItemTitle = _interopRequireDefault(require("./ItemTitle"));

var Item = function Item(props) {
  var _useContext = (0, _react.useContext)(_TabsContext["default"]),
      prefixCls = _useContext.prefixCls,
      tabDraggable = _useContext.tabDraggable,
      defaultChangeable = _useContext.defaultChangeable;

  var selfPrefixCls = "".concat(prefixCls, "-customization-group-item");
  var suffix = props.suffix,
      record = props.record,
      index = props.index,
      records = props.records,
      provided = props.provided,
      snapshot = props.snapshot,
      defaultKey = props.defaultKey;
  var sort = record.get('sort');

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      isHover = _useState2[0],
      setIsHover = _useState2[1];

  var handleMouseEnter = (0, _react.useCallback)(function () {
    return setIsHover(true);
  }, []);
  var handleMouseLeave = (0, _react.useCallback)(function () {
    return setIsHover(false);
  }, []);
  var isDragging = snapshot.isDragging;
  (0, _react.useEffect)(function () {
    setIsHover(false);
  }, [sort]);

  function getIcon() {
    if (tabDraggable) {
      var iconProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, provided.dragHandleProps), {}, {
        style: {
          cursor: 'move'
        }
      });
      return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
        className: "".concat(selfPrefixCls, "-drag-icon"),
        type: "baseline-drag_indicator"
      }, iconProps));
    }
  }

  var divProps = tabDraggable ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    ref: provided.innerRef
  }, provided.draggableProps), {}, {
    className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(selfPrefixCls, "-dragging"), isDragging))
  }) : {};
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, divProps), /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(selfPrefixCls, (0, _defineProperty2["default"])({}, "".concat(selfPrefixCls, "-hover"), isHover)),
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(selfPrefixCls, "-content")
  }, getIcon(), /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(selfPrefixCls, "-title")
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "".concat(selfPrefixCls, "-title-text")
  }, /*#__PURE__*/_react["default"].createElement(_ItemTitle["default"], {
    record: record,
    provided: tabDraggable ? provided : undefined
  }), defaultChangeable && defaultKey === record.get('key') && /*#__PURE__*/_react["default"].createElement("span", {
    className: "".concat(selfPrefixCls, "-title-default")
  }, (0, _localeContext.$l)('Tabs', 'default')))), suffix(record, index, records))));
};

Item.displayName = 'Item';

var _default = (0, _mobxReactLite.observer)(Item);

exports["default"] = _default;
//# sourceMappingURL=Item.js.map