choerodon-ui/pro/es/table/customization-settings/tree/TreeNode.js

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

import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { Children, cloneElement, isValidElement, useCallback, useContext, useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import classNames from 'classnames';
import { Droppable } from 'react-beautiful-dnd';
import defaultTo from 'lodash/defaultTo';
import isFunction from 'lodash/isFunction';
import Icon from '../../../icon';
import TableContext from '../../TableContext';

var TreeNode = function TreeNode(props) {
  var _useContext = useContext(TableContext),
      dataSet = _useContext.dataSet,
      prefixCls = _useContext.prefixCls,
      _useContext$columnsDr = _useContext.columnsDragRender,
      columnsDragRender = _useContext$columnsDr === void 0 ? {} : _useContext$columnsDr,
      columnDraggable = _useContext.tableStore.columnDraggable;

  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 = defaultTo(record.getState('expanded'), true);

  var _useState = useState(isExpanded),
      _useState2 = _slicedToArray(_useState, 2),
      expended = _useState2[0],
      setExpanded = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      isHover = _useState4[0],
      setIsHover = _useState4[1];

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

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

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

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

  function renderSwitcherIcon() {
    return !isLeaf && /*#__PURE__*/React.createElement(Icon, {
      type: "expand_more",
      className: classNames("".concat(selfPrefixCls, "-switcher-icon"), _defineProperty({}, "".concat(selfPrefixCls, "-switcher-icon-close"), !isExpanded)),
      onClick: toggleExpanded
    });
  }

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

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

      if (isFunction(renderIcon)) {
        var icon = renderIcon({
          dataSet: dataSet,
          column: record.toData(),
          snapshot: snapshot
        });

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

        return icon;
      }

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

  return /*#__PURE__*/React.createElement("div", _extends({
    ref: provided && provided.innerRef
  }, provided && provided.draggableProps, {
    className: classNames(_defineProperty({}, "".concat(selfPrefixCls, "-dragging"), isDragging))
  }), /*#__PURE__*/React.createElement("div", {
    className: classNames(selfPrefixCls, className, _defineProperty({}, "".concat(selfPrefixCls, "-hover"), isHover)),
    style: {
      display: hidden ? 'none' : ''
    },
    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")
  }, renderer(record, provided)), /*#__PURE__*/React.createElement("span", {
    className: classNames("".concat(selfPrefixCls, "-switcher"), _defineProperty({}, "".concat(selfPrefixCls, "-switcher-noop"), isLeaf))
  }, renderSwitcherIcon())), suffix(record, index, records))), columnDraggable ? /*#__PURE__*/React.createElement(Droppable, _extends({
    droppableId: "treenode__--__".concat(record.key),
    key: "treenode",
    renderClone: renderClone ? function (cloneProvided, cloneSnapshot, rubric) {
      return renderClone({
        provided: cloneProvided,
        snapshot: cloneSnapshot,
        rubric: rubric
      });
    } : undefined
  }, droppableProps), function (droppableProvided) {
    return /*#__PURE__*/React.createElement("div", _extends({
      style: {
        paddingLeft: 15
      },
      ref: droppableProvided && droppableProvided.innerRef
    }, droppableProvided && droppableProvided.droppableProps), expended && renderChildren(), droppableProvided && droppableProvided.placeholder);
  }) : /*#__PURE__*/React.createElement("div", {
    style: {
      paddingLeft: 15
    }
  }, expended && renderChildren()));
};

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