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");

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

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 = (0, _mobxReactLite.observer)(function TreeNode(props) {
  var _useContext = (0, _react.useContext)(_TabsContext["default"]),
      prefixCls = _useContext.prefixCls;

  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() {
    var iconProps = (0, _objectSpread2["default"])({}, provided.dragHandleProps, {
      style: {
        cursor: 'move'
      }
    });
    return _react["default"].createElement(_icon["default"], (0, _extends2["default"])({
      className: "".concat(selfPrefixCls, "-drag-icon"),
      type: "baseline-drag_indicator"
    }, iconProps));
  }

  return _react["default"].createElement("div", (0, _extends2["default"])({
    ref: provided.innerRef
  }, provided.draggableProps, {
    className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(selfPrefixCls, "-dragging"), isDragging))
  }), _react["default"].createElement("div", {
    className: (0, _classnames["default"])(selfPrefixCls, (0, _defineProperty2["default"])({}, "".concat(selfPrefixCls, "-hover"), isHover)),
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave
  }, _react["default"].createElement("div", {
    className: "".concat(selfPrefixCls, "-content")
  }, getIcon(), _react["default"].createElement("div", {
    className: "".concat(selfPrefixCls, "-title")
  }, _react["default"].createElement("span", {
    className: "".concat(selfPrefixCls, "-title-text")
  }, _react["default"].createElement(_ItemTitle["default"], {
    record: record,
    provided: provided
  }), defaultKey === record.get('key') && _react["default"].createElement("span", {
    className: "".concat(selfPrefixCls, "-title-default")
  }, (0, _localeContext.$l)('Tabs', 'default')))), suffix(record, index, records))));
});
Item.displayName = 'TreeNode';
var _default = Item;
exports["default"] = _default;
//# sourceMappingURL=Item.js.map