choerodon-ui/pro/lib/performance-table/customization-settings/tree/TreeNode.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

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 _reactBeautifulDnd = require("react-beautiful-dnd");

var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

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

var _TableContext = _interopRequireDefault(require("../../TableContext"));

var TreeNode = function TreeNode(props) {
  var _useContext = (0, _react.useContext)(_TableContext["default"]),
      _useContext$tableStor = _useContext.tableStore,
      dataSet = _useContext$tableStor.dataSet,
      columnDraggable = _useContext$tableStor.columnDraggable,
      _useContext$tableStor2 = _useContext$tableStor.node.props.columnsDragRender,
      columnsDragRender = _useContext$tableStor2 === void 0 ? {} : _useContext$tableStor2,
      prefixCls = _useContext$tableStor.proPrefixCls;

  var droppableProps = columnsDragRender.droppableProps,
      renderClone = columnsDragRender.renderClone,
      renderIcon = columnsDragRender.renderIcon;
  var selfPrefixCls = "".concat(prefixCls, "-customization-tree-treenode");
  var renderer = props.renderer,
      suffix = props.suffix,
      children = props.children,
      className = props.className,
      isLeaf = props.isLeaf,
      hidden = props.hidden,
      record = props.record,
      index = props.index,
      records = props.records,
      provided = props.provided,
      snapshot = props.snapshot;
  var sort = record.get('sort');
  var isExpanded = (0, _defaultTo["default"])(record.getState('expanded'), true);

  var _useState = (0, _react.useState)(isExpanded),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      expended = _useState2[0],
      setExpanded = _useState2[1];

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

  var toggleExpanded = (0, _react.useCallback)(function () {
    record.setState('expanded', !isExpanded);

    if (!expended) {
      setExpanded(true);
    }
  }, [record, isExpanded, expended]);
  var handleMouseEnter = (0, _react.useCallback)(function () {
    return setIsHover(true);
  }, []);
  var handleMouseLeave = (0, _react.useCallback)(function () {
    return setIsHover(false);
  }, []);

  var _ref = snapshot || {},
      isDragging = _ref.isDragging;

  (0, _react.useEffect)(function () {
    setIsHover(false);
  }, [sort]);

  function renderSwitcherIcon() {
    return !isLeaf && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "expand_more",
      className: (0, _classnames["default"])("".concat(selfPrefixCls, "-switcher-icon"), (0, _defineProperty2["default"])({}, "".concat(selfPrefixCls, "-switcher-icon-close"), !isExpanded)),
      onClick: toggleExpanded
    });
  }

  function renderChildren() {
    return _react.Children.map(children, function (child) {
      return /*#__PURE__*/(0, _react.isValidElement)(child) ? /*#__PURE__*/(0, _react.cloneElement)(child, {
        hidden: hidden || !isExpanded
      }) : child;
    });
  }

  function getIcon() {
    if (provided) {
      var iconProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, provided.dragHandleProps), {}, {
        style: {
          cursor: 'move'
        }
      });

      if ((0, _isFunction["default"])(renderIcon)) {
        var icon = renderIcon({
          dataSet: dataSet,
          column: record.toData(),
          snapshot: snapshot
        });

        if ( /*#__PURE__*/(0, _react.isValidElement)(icon)) {
          return /*#__PURE__*/(0, _react.cloneElement)(icon, iconProps);
        }

        return icon;
      }

      return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
        className: "".concat(selfPrefixCls, "-drag-icon"),
        type: "baseline-drag_indicator"
      }, iconProps));
    }
  }

  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
    ref: provided && provided.innerRef
  }, provided && provided.draggableProps, {
    className: (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(selfPrefixCls, "-dragging"), isDragging))
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _classnames["default"])(selfPrefixCls, className, (0, _defineProperty2["default"])({}, "".concat(selfPrefixCls, "-hover"), isHover)),
    style: {
      display: hidden ? 'none' : ''
    },
    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")
  }, renderer(record, provided)), /*#__PURE__*/_react["default"].createElement("span", {
    className: (0, _classnames["default"])("".concat(selfPrefixCls, "-switcher"), (0, _defineProperty2["default"])({}, "".concat(selfPrefixCls, "-switcher-noop"), isLeaf))
  }, renderSwitcherIcon())), suffix(record, index, records))), columnDraggable ? /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, (0, _extends2["default"])({
    droppableId: "treenode__--__".concat(record.key),
    key: "treenode",
    renderClone: renderClone
  }, droppableProps), function (droppableProvided) {
    return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
      style: {
        paddingLeft: 15
      },
      ref: droppableProvided && droppableProvided.innerRef
    }, droppableProvided && droppableProvided.droppableProps), expended && renderChildren(), droppableProvided && droppableProvided.placeholder);
  }) : /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      paddingLeft: 15
    }
  }, expended && renderChildren()));
};

TreeNode.displayName = 'TreeNode';

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

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