ming-demo3
Version:
mdf metaui web
288 lines (245 loc) • 9.36 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _baseui = require("@mdf/baseui");
var _classnames = _interopRequireDefault(require("classnames"));
var _basic = require("../basic");
var _Group = _interopRequireDefault(require("./Group"));
var _util = require("@mdf/cube/lib/helpers/util");
var GroupContainer = function (_Component) {
(0, _inherits2["default"])(GroupContainer, _Component);
function GroupContainer(props) {
var _this;
(0, _classCallCheck2["default"])(this, GroupContainer);
_this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(GroupContainer).call(this, props));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toTop", function () {
var topEle = (0, _util.parentsUntil)(_this.refs.groupContainerTop, '.meta-container', false);
if (topEle) {
topEle.scrollTop = 0;
}
});
var cStyle = props.meta.cStyle;
var config = null;
if (cStyle) {
try {
config = JSON.parse(cStyle);
} catch (e) {}
}
_this.state = Object.assign({
collapse: true,
visible: true,
anchorVisible: []
}, config);
_this._hash = '';
return _this;
}
(0, _createClass2["default"])(GroupContainer, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
var _this$props = this.props,
viewModel = _this$props.viewModel,
meta = _this$props.meta;
viewModel.on('updateViewMeta', function (args) {
var code = args.code,
visible = args.visible;
if (code !== meta.cGroupCode) return;
_this2.setState({
visible: visible
});
});
this.height = (0, _reactDom.findDOMNode)(this.refs.GroupContainer) ? (0, _reactDom.findDOMNode)(this.refs.GroupContainer).clientHeight : 0;
if (this.height) viewModel.execute('groupContainerHeightUpdate', {
'height': this.height,
'cGroupCode': meta.cGroupCode
});
}
}, {
key: "handleClick",
value: function handleClick() {
this.setState({
collapse: !this.state.collapse
});
}
}, {
key: "handleAnchorVisible",
value: function handleAnchorVisible(args) {
var anchorVisible = this.state.anchorVisible;
var code = args.code,
visible = args.visible;
if (!visible) {
!anchorVisible.includes(code) && anchorVisible.push(code);
} else {
anchorVisible = anchorVisible.filter(function (v) {
return v !== code;
});
}
this.setState({
anchorVisible: anchorVisible
});
}
}, {
key: "renderButton",
value: function renderButton() {
var _this3 = this;
return this.state.collapse ? _react["default"].createElement(_baseui.Button, {
type: "ghost",
onClick: function onClick() {
return _this3.handleClick();
},
className: "putAway no-border"
}, "\u5C55\u5F00\u66F4\u591A", _react["default"].createElement(_baseui.Icon, {
type: "down-circle"
})) : _react["default"].createElement(_baseui.Button, {
type: "ghost",
onClick: function onClick() {
return _this3.handleClick();
},
className: "putAway no-border"
}, "\u6536\u8D77", _react["default"].createElement(_baseui.Icon, {
type: "up-circle"
}));
}
}, {
key: "renderControl",
value: function renderControl(containers) {
var _this4 = this;
var _this$props2 = this.props,
viewModel = _this$props2.viewModel,
width = _this$props2.width,
height = _this$props2.height,
index = _this$props2.index;
var items = [];
containers && containers.forEach(function (container) {
items.push(_react["default"].createElement(_Group["default"], {
key: container.groupId,
meta: container,
handleAnchorVisible: function handleAnchorVisible(args) {
return _this4.handleAnchorVisible(args);
},
viewModel: viewModel,
width: width,
height: height,
index: index,
id: container.cCode ? container.cCode + container.groupId : container.cGroupCode
}));
});
return items;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._hash = '';
location.hash = '';
(typeof history === "undefined" ? "undefined" : (0, _typeof2["default"])(history)) === "object" && history.replaceState(null, '', location.pathname + location.search);
}
}, {
key: "gotoHash",
value: function gotoHash(groupId) {
this._hash = groupId;
if (groupId) {
document.location.hash = groupId;
}
this.setState({});
}
}, {
key: "getAnchor",
value: function getAnchor(containers) {
var _this5 = this;
var anchorVisible = this.state.anchorVisible;
var items = [];
var _firstgroupId = null;
var isIncludeHash = false;
this._hash = this._hash || location.hash;
containers && containers.forEach(function (container, index) {
if (!anchorVisible.includes(container.cGroupCode) && (container.controls && container.controls.length || container.containers)) {
var groupId = container.cCode ? '#' + container.cCode + container.groupId : container.cGroupCode;
_firstgroupId = _firstgroupId || groupId;
isIncludeHash = isIncludeHash || _this5._hash.includes(groupId);
items.push(_react["default"].createElement("p", {
onClick: function onClick() {
return _this5.gotoHash(groupId);
},
className: _this5._hash.includes(groupId) ? 'anchor-item anchor-item-on' : 'anchor-item'
}, _react["default"].createElement("a", {
href: groupId
}, container.cName)));
}
});
if (!isIncludeHash && items.length) {
this.gotoHash(_firstgroupId);
return;
}
items.length && items.push(_react["default"].createElement("p", {
className: "anchor-item-last",
onClick: function onClick() {
return _this5.toTop();
}
}, _react["default"].createElement("a", {
href: "javascript:;"
}, _react["default"].createElement(_baseui.Icon, {
type: "anticon anticon-fanhuidingbu"
}))));
return items.length > 2 ? _react["default"].createElement("div", {
className: "group-container-anchor"
}, _react["default"].createElement("div", {
className: "anchor-item-list"
}, items)) : null;
}
}, {
key: "render",
value: function render() {
var _this$props3 = this.props,
config = _this$props3.config,
meta = _this$props3.meta;
var showAnchor = this.state.showAnchor;
var hasButton = false;
if (config) {
try {
config = JSON.parse(config);
} catch (e) {
config = {};
}
if (config.button) hasButton = true;
}
var controlClassName = null;
var button = null;
if (hasButton) {
if (this.state.collapse) controlClassName = 'group-container-collapse';
var buttonClassName = 'group-container-button';
button = _react["default"].createElement(_basic.Row, {
className: buttonClassName
}, this.renderButton());
}
var control = _react["default"].createElement(_basic.Row, {
className: controlClassName
}, this.renderControl(meta.containers));
var anchor = this.getAnchor(meta.containers);
return _react["default"].createElement(_basic.Row, {
ref: "GroupContainer",
className: (0, _classnames["default"])('group-container', {
hide: !this.state.visible
}, this.state.classname)
}, showAnchor ? _react["default"].createElement("span", {
ref: "groupContainerTop"
}) : null, showAnchor ? anchor : null, control, button);
}
}]);
return GroupContainer;
}(_react.Component);
exports["default"] = GroupContainer;
//# sourceMappingURL=GroupContainer.js.map