@alilc/lowcode-plugin-components-pane/lib/components/Category/index.js

低代码组件面板

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _animate = _interopRequireDefault(require("@alifd/next/lib/animate"));
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _indexModule = _interopRequireDefault(require("./index.module.scss"));
var cx = _bind["default"].bind(_indexModule["default"]);
var Category = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(Category, _React$Component);
  function Category() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      expand: true
    };
    _this.height = 0;
    _this.handleToggle = function () {
      _this.setState(function (state) {
        return {
          expand: !state.expand
        };
      });
    };
    _this.beforeEnter = function (node) {
      _this.height = node.offsetHeight;
      node.style.height = '0px';
    };
    _this.onEnter = function (node) {
      node.style.height = _this.height + "px";
    };
    _this.afterEnter = function (node) {
      _this.height = null;
      node.style.height = null;
    };
    _this.beforeLeave = function (node) {
      node.style.height = node.offsetHeight + "px";
    };
    _this.onLeave = function (node) {
      node.style.height = '0px';
    };
    _this.afterLeave = function (node) {
      node.style.height = null;
    };
    return _this;
  }
  var _proto = Category.prototype;
  _proto.render = function render() {
    var _this$props = this.props,
      children = _this$props.children,
      name = _this$props.name;
    var expand = this.state.expand;
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: cx('category')
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: cx('header')
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: cx('title')
    }, name), /*#__PURE__*/_react["default"].createElement("div", {
      className: cx('icon', {
        expand: expand
      }),
      onClick: this.handleToggle
    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "arrow-down",
      size: "xxs"
    }))), /*#__PURE__*/_react["default"].createElement(_animate["default"], {
      animation: "expand",
      beforeEnter: this.beforeEnter,
      onEnter: this.onEnter,
      afterEnter: this.afterEnter,
      beforeLeave: this.beforeLeave,
      onLeave: this.onLeave,
      afterLeave: this.afterLeave
    }, expand ? children : null));
  };
  return Category;
}(_react["default"].Component);
exports["default"] = Category;