@platform/ui.datagrid
Version:
Isolated tabular DataGrid.
121 lines (120 loc) • 4.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var rxjs_1 = require("rxjs");
var operators_1 = require("rxjs/operators");
var common_1 = require("../common");
var CSS = common_1.constants.CSS;
var DataGridOverlay = (function (_super) {
tslib_1.__extends(DataGridOverlay, _super);
function DataGridOverlay() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {};
_this.state$ = new rxjs_1.Subject();
_this.unmounted$ = new rxjs_1.Subject();
return _this;
}
DataGridOverlay.prototype.componentDidMount = function () {
var _this = this;
var grid = this.props.grid;
this.state$.pipe(operators_1.takeUntil(this.unmounted$)).subscribe(function (e) { return _this.setState(e); });
var events$ = grid.events$.pipe(operators_1.takeUntil(this.unmounted$));
var command$ = events$.pipe(operators_1.filter(function (e) { return e.type === 'GRID/command'; }), operators_1.map(function (e) { return e.payload; }));
command$
.pipe(operators_1.filter(function (e) { return e.command === 'OVERLAY/show'; }), operators_1.map(function (e) { return e; }), operators_1.filter(function (e) { return !common_1.R.equals(e.props.screen, _this.state.screen); }))
.subscribe(function (e) {
var key = e.props.cell;
var screen = e.props.screen;
if (key && screen) {
_this.show({ key: key, screen: screen });
}
});
command$
.pipe(operators_1.filter(function (e) { return e.command === 'OVERLAY/hide'; }), operators_1.filter(function () { return _this.isShowing; }))
.subscribe(function (e) { return _this.hide(); });
};
DataGridOverlay.prototype.componentWillUnmount = function () {
this.unmounted$.next();
this.unmounted$.complete();
};
Object.defineProperty(DataGridOverlay.prototype, "isShowing", {
get: function () {
return Boolean(this.state.screen);
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataGridOverlay.prototype, "key", {
get: function () {
return this.state.key;
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataGridOverlay.prototype, "data", {
get: function () {
return this.getData(this.key);
},
enumerable: true,
configurable: true
});
Object.defineProperty(DataGridOverlay.prototype, "request", {
get: function () {
var screen = this.state.screen;
var key = this.key;
var data = this.data;
if (!screen || !data || !key) {
return undefined;
}
else {
var props = common_1.util.toGridCellProps(data.props);
var view = props.view;
var req = {
type: 'SCREEN',
grid: this.props.grid,
cell: { key: key, data: data, props: props },
view: view,
};
return req;
}
},
enumerable: true,
configurable: true
});
DataGridOverlay.prototype.getData = function (key) {
return this.props.grid.data.cells[key] || {};
};
DataGridOverlay.prototype.show = function (args) {
var key = args.key, screen = args.screen, Provider = args.Provider;
this.state$.next({ key: key, screen: screen, Provider: Provider });
};
DataGridOverlay.prototype.hide = function () {
this.state$.next({
key: undefined,
screen: undefined,
Provider: undefined,
});
};
DataGridOverlay.prototype.render = function () {
var req = this.request;
var _a = this.state, screen = _a.screen, Provider = _a.Provider;
var factory = this.props.factory;
if (!req || !screen || !Provider) {
return null;
}
var styles = {
base: common_1.css({
Absolute: 0,
display: 'flex',
backgroundColor: 'rgba(0, 0, 0, 0)',
zIndex: 9999,
}),
};
var className = CSS.CLASS.SCREEN.BASE + " " + (screen.className || '');
return (React.createElement("div", tslib_1.__assign({}, common_1.css(styles.base, this.props.style), { className: className }),
React.createElement(Provider, null, factory(req))));
};
return DataGridOverlay;
}(React.PureComponent));
exports.DataGridOverlay = DataGridOverlay;