@up-group-ui/react-controls
Version:
Up shared react controls
107 lines • 5.05 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SubItems = exports.SubMenu = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var typestyle_1 = require("typestyle");
var UpTreeView = (function (_super) {
(0, tslib_1.__extends)(UpTreeView, _super);
function UpTreeView(p, c) {
var _this = _super.call(this, p, c) || this;
_this.onBranchClick = function (data, branchId) {
_this.setState({ selectedBranchId: branchId });
if (_this.props.onBranchClick) {
_this.props.onBranchClick(data);
}
};
_this.state = {
selectedBranchId: '',
};
return _this;
}
UpTreeView.prototype.render = function () {
return ((0, jsx_runtime_1.jsx)(SubMenu, { showInvisible: this.props.showInvisible, selectedBranchId: this.state.selectedBranchId, childMenuItems: this.props.childMenuItems, onBranchClick: this.onBranchClick }, void 0));
};
return UpTreeView;
}(react_1.default.Component));
exports.default = UpTreeView;
var SubMenu = (function (_super) {
(0, tslib_1.__extends)(SubMenu, _super);
function SubMenu(p, c) {
var _this = _super.call(this, p, c) || this;
_this.state = {};
return _this;
}
SubMenu.prototype.render = function () {
var _this = this;
if (this.props.childMenuItems == null || this.props.childMenuItems.length == 0) {
return null;
}
var localId = this.props.branchId != null ? this.props.branchId + '-' : '';
var lis = this.props.childMenuItems.map(function (v, i) {
return ((0, jsx_runtime_1.jsx)(SubItems, { showInvisible: _this.props.showInvisible, branchId: localId + i.toString(), selectedBranchId: _this.props.selectedBranchId, id: v.id, onBranchClick: _this.props.onBranchClick, text: v.text, isVisible: v.isVisible, isSelected: v.isSelected, childMenuItems: v.childMenuItems }, i));
});
var s = {
listStyle: 'none',
marginTop: 0,
};
return (0, jsx_runtime_1.jsx)("ul", (0, tslib_1.__assign)({ style: s }, { children: lis }), void 0);
};
return SubMenu;
}(react_1.default.Component));
exports.SubMenu = SubMenu;
var SubItems = (function (_super) {
(0, tslib_1.__extends)(SubItems, _super);
function SubItems(p, c) {
var _this = _super.call(this, p, c) || this;
_this.onExpandClick = function (e) {
_this.setState({ expand: !_this.state.expand });
e.preventDefault();
e.stopPropagation();
return false;
};
_this.onClickA = function (e) {
var data = {
id: _this.props.id,
text: _this.props.text,
isSelected: _this.props.isSelected,
isVisible: _this.props.isVisible,
childMenuItems: _this.props.childMenuItems,
};
_this.props.onBranchClick(data, _this.props.branchId);
};
_this.state = {
expand: false,
};
return _this;
}
Object.defineProperty(SubItems.prototype, "anyChild", {
get: function () {
return this.props.childMenuItems != null && this.props.childMenuItems.length != 0;
},
enumerable: false,
configurable: true
});
SubItems.prototype.render = function () {
var styleBranch = (0, typestyle_1.style)({
display: this.props.isVisible === false && this.props.showInvisible !== true ? 'none' : 'inherit',
$nest: {
'&>span': {
color: this.props.isVisible === false ? '#7F7F7F' : 'inherit',
border: this.props.branchId == this.props.selectedBranchId ? '1px solid #116FAA' : '',
borderRadius: 5,
},
'&>span:hover': {
border: '1px solid #116FAA',
},
},
});
return ((0, jsx_runtime_1.jsxs)("li", (0, tslib_1.__assign)({ className: styleBranch }, { children: [(0, jsx_runtime_1.jsx)("i", { className: this.state.expand ? 'pe-7s-angle-down' : 'pe-7s-angle-right', style: {
visibility: this.anyChild ? 'visible' : 'hidden',
}, onClick: this.onExpandClick }, void 0), (0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ onClick: this.onClickA }, { children: this.props.text }), void 0), this.anyChild === true && this.state.expand === true ? ((0, jsx_runtime_1.jsx)(SubMenu, { showInvisible: this.props.showInvisible, selectedBranchId: this.props.selectedBranchId, branchId: this.props.branchId, onBranchClick: this.props.onBranchClick, childMenuItems: this.props.childMenuItems }, void 0)) : null] }), void 0));
};
return SubItems;
}(react_1.default.Component));
exports.SubItems = SubItems;
//# sourceMappingURL=UpTreeView.js.map