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

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

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useContext, useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import classNames from 'classnames';
import { $l } from '../../../../pro/es/locale-context';
import Icon from '../../../icon';
import TabsContext from '../../TabsContext';
import ItemTitle from './ItemTitle';

var Item = function Item(props) {
  var _useContext = useContext(TabsContext),
      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 = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isHover = _useState2[0],
      setIsHover = _useState2[1];

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

  function getIcon() {
    if (tabDraggable) {
      var iconProps = _objectSpread(_objectSpread({}, provided.dragHandleProps), {}, {
        style: {
          cursor: 'move'
        }
      });

      return /*#__PURE__*/React.createElement(Icon, _extends({
        className: "".concat(selfPrefixCls, "-drag-icon"),
        type: "baseline-drag_indicator"
      }, iconProps));
    }
  }

  var divProps = tabDraggable ? _objectSpread(_objectSpread({
    ref: provided.innerRef
  }, provided.draggableProps), {}, {
    className: classNames(_defineProperty({}, "".concat(selfPrefixCls, "-dragging"), isDragging))
  }) : {};
  return /*#__PURE__*/React.createElement("div", _extends({}, divProps), /*#__PURE__*/React.createElement("div", {
    className: classNames(selfPrefixCls, _defineProperty({}, "".concat(selfPrefixCls, "-hover"), isHover)),
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(selfPrefixCls, "-content")
  }, getIcon(), /*#__PURE__*/React.createElement("div", {
    className: "".concat(selfPrefixCls, "-title")
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(selfPrefixCls, "-title-text")
  }, /*#__PURE__*/React.createElement(ItemTitle, {
    record: record,
    provided: tabDraggable ? provided : undefined
  }), defaultChangeable && defaultKey === record.get('key') && /*#__PURE__*/React.createElement("span", {
    className: "".concat(selfPrefixCls, "-title-default")
  }, $l('Tabs', 'default')))), suffix(record, index, records))));
};

Item.displayName = 'Item';
export default observer(Item);
//# sourceMappingURL=Item.js.map