choerodon-ui/pro/es/board/kanban-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 { toJS } from 'mobx';
import { observer } from 'mobx-react-lite';
import classNames from 'classnames';
import { Droppable } from 'react-beautiful-dnd';
import { getHeader } from 'choerodon-ui/pro/lib/table/utils';
import defaultTo from 'lodash/defaultTo';
import Icon from '../../../icon';
import BoardContext from '../../BoardContext';
import Switch from '../../../switch/Switch';

var TreeNode = function TreeNode(props) {
  var _useContext = useContext(BoardContext),
      dataSet = _useContext.dataSet,
      prefixCls = _useContext.prefixCls;

  var selfPrefixCls = "".concat(prefixCls, "-customization-tree-treenode");
  var children = props.children,
      className = props.className,
      isLeaf = props.isLeaf,
      hidden = props.hidden,
      record = props.record,
      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'
        }
      });

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

  var header = getHeader({
    name: record.get('name'),
    title: record.get('title'),
    header: record.get('header'),
    dataSet: dataSet
  });
  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")
  }, /*#__PURE__*/React.createElement("span", _extends({}, provided && provided.dragHandleProps, {
    style: provided ? {
      cursor: 'move'
    } : undefined
  }), toJS(header))), /*#__PURE__*/React.createElement("span", {
    className: classNames("".concat(selfPrefixCls, "-switcher"), _defineProperty({}, "".concat(selfPrefixCls, "-switcher-noop"), isLeaf))
  }, renderSwitcherIcon())), /*#__PURE__*/React.createElement(Switch, {
    record: record,
    disabled: record.get('hideable') === false || record.parent && record.parent.get('hidden'),
    name: "hidden",
    value: false,
    unCheckedValue: true
  }))), true ? /*#__PURE__*/React.createElement(Droppable, {
    droppableId: "treenode__--__".concat(record.key),
    key: "treenode"
  }, 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