@alilc/lowcode-plugin-components-pane
Version:
81 lines • 2.57 kB
JavaScript
import _Animate from "@alifd/next/es/animate";
import _Icon from "@alifd/next/es/icon";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from 'react';
import cls from 'classnames/bind';
import style from './index.module.scss';
var cx = cls.bind(style);
var Category = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(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.createElement("div", {
className: cx('category')
}, /*#__PURE__*/React.createElement("div", {
className: cx('header')
}, /*#__PURE__*/React.createElement("div", {
className: cx('title')
}, name), /*#__PURE__*/React.createElement("div", {
className: cx('icon', {
expand: expand
}),
onClick: this.handleToggle
}, /*#__PURE__*/React.createElement(_Icon, {
type: "arrow-down",
size: "xxs"
}))), /*#__PURE__*/React.createElement(_Animate, {
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.Component);
export { Category as default };