choerodon-ui/pro/lib/board/kanban-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 _mobx = require("mobx");

var _mobxReactLite = require("mobx-react-lite");

var _classnames = _interopRequireDefault(require("classnames"));

var _reactBeautifulDnd = require("react-beautiful-dnd");

var _utils = require("choerodon-ui/pro/lib/table/utils");

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

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

var _BoardContext = _interopRequireDefault(require("../../BoardContext"));

var _Switch = _interopRequireDefault(require("../../../switch/Switch"));

var TreeNode = function TreeNode(props) {
  var _useContext = (0, _react.useContext)(_BoardContext["default"]),
      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 = (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'
        }
      });
      return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
        className: "".concat(selfPrefixCls, "-drag-icon"),
        type: "baseline-drag_indicator"
      }, iconProps));
    }
  }

  var header = (0, _utils.getHeader)({
    name: record.get('name'),
    title: record.get('title'),
    header: record.get('header'),
    dataSet: dataSet
  });
  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")
  }, /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, provided && provided.dragHandleProps, {
    style: provided ? {
      cursor: 'move'
    } : undefined
  }), (0, _mobx.toJS)(header))), /*#__PURE__*/_react["default"].createElement("span", {
    className: (0, _classnames["default"])("".concat(selfPrefixCls, "-switcher"), (0, _defineProperty2["default"])({}, "".concat(selfPrefixCls, "-switcher-noop"), isLeaf))
  }, renderSwitcherIcon())), /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
    record: record,
    disabled: record.get('hideable') === false || record.parent && record.parent.get('hidden'),
    name: "hidden",
    value: false,
    unCheckedValue: true
  }))), true ? /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
    droppableId: "treenode__--__".concat(record.key),
    key: "treenode"
  }, 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