zarm-web/es/tree/TreeNode.js

基于 React 的桌面端UI库

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component } from 'react';
import Animate from 'rc-animate';
import classnames from 'classnames';
import Checkbox from '../checkbox';
import animation from './openAnimation';
import { isCheckDisabled } from './utils';
const ICON_OPEN = 'open';
const ICON_CLOSE = 'close';
const ICON_NOOP = 'noop';

class TreeNode extends Component {
  constructor(...args) {
    super(...args);

    this.isLeaf = () => {
      const {
        isLeaf
      } = this.props;

      if (isLeaf) {
        return true;
      }

      return false;
    };

    this.getNodeState = () => {
      const {
        expanded
      } = this.props;
      let nodeState;

      if (this.isLeaf()) {
        nodeState = ICON_NOOP;
      } else {
        nodeState = expanded ? ICON_OPEN : ICON_CLOSE;
      }

      return nodeState;
    };

    this.renderSwitcher = () => {
      const {
        prefixCls
      } = this.props;
      const switcherState = this.getNodeState();
      return React.createElement("span", {
        className: classnames(`${prefixCls}-switcher`, `${prefixCls}-switcher-${switcherState}`),
        onClick: this.onExpand
      });
    };

    this.renderCheckbox = () => {
      const {
        checkDisabled,
        canCheck,
        checked,
        prefixCls,
        halfChecked
      } = this.props;
      const isHalfChecked = checkDisabled ? false : halfChecked;

      if (!canCheck) {
        return null;
      }

      return React.createElement("span", {
        className: classnames(`${prefixCls}-checkbox`)
      }, React.createElement(Checkbox, {
        onChange: e => this.onCheck(e),
        disabled: checkDisabled,
        checked: checked || isHalfChecked,
        indeterminate: isHalfChecked
      }));
    };

    this.renderContent = () => {
      const {
        prefixCls,
        title
      } = this.props;
      const nodeState = this.getNodeState();
      const wrapClass = `${prefixCls}-node-content-wrapper ${prefixCls}-node-content-wrapper-${nodeState}`;
      return React.createElement("span", {
        className: wrapClass,
        title: typeof title === 'string' ? title : ''
      }, React.createElement("span", {
        className: `${prefixCls}-title`
      }, title));
    };

    this.renderChildren = () => {
      const {
        children,
        expanded,
        prefixCls = ''
      } = this.props;

      if (this.isLeaf()) {
        return null;
      }

      let $children;

      if (expanded) {
        $children = React.createElement("ul", {
          className: classnames(`${prefixCls}-child-tree`, expanded && `${prefixCls}-child-tree-open`),
          "data-expanded": expanded
        }, children);
      }

      const animateProps = {
        animation: {}
      };

      if (typeof animation === 'object') {
        animateProps.animation = _objectSpread({}, animation);
      }

      return React.createElement(Animate, _extends({}, animateProps, {
        showProp: "data-expanded"
      }), $children);
    };

    this.onCheck = e => {
      const {
        checked,
        onNodeCheck
      } = this.props;
      const targetChecked = !checked;

      if (!isCheckDisabled(this) && onNodeCheck) {
        onNodeCheck(this, targetChecked, e);
      }
    };

    this.onExpand = e => {
      const {
        expanded,
        onNodeExpand
      } = this.props;
      const targetExpanded = !expanded;

      if (onNodeExpand) {
        onNodeExpand(this, targetExpanded, e);
      }
    };
  }

  render() {
    const {
      keys
    } = this.props;
    return React.createElement("li", {
      "data-keys": keys
    }, this.renderSwitcher(), this.renderCheckbox(), this.renderContent(), this.renderChildren());
  }

}

TreeNode.defaultProps = {
  prefixCls: 'ui-tree',
  title: ''
};
export default TreeNode;