@codeperate/app-asset
Version:
Codeperate App Asset
77 lines (76 loc) • 3.2 kB
JavaScript
import { Component, Element, h, Host, State, Watch, Prop } from '@stencil/core';
import { mapStateToProps } from '../../../utils/map-state-to-props';
export class CdpModalRematch {
constructor() {
this.modals = [];
this.markedClear = [];
}
componentWillLoad() {
this.unsubscribe = mapStateToProps(this.config.store, this, (state) => ({
modals: state.CdpModalModel.modals,
}));
}
disconnectedCallback() {
if (this.unsubscribe)
this.unsubscribe();
}
markedClearHandler() {
if (this.markedClear.length > 0) {
this.config.store.dispatch.CdpModalModel.clear(this.markedClear);
this.markedClear.splice(0, this.markedClear.length);
}
}
async componentDidUpdate() { }
render() {
const hostClass = 'absolute block top-0 left-0 w-full' + (this.modals.length > 0 ? ' h-full' : '');
const containerClass = 'sticky w-full top-0 left-0' + (this.modals.length > 0 ? ' h-screen' : '');
return (h(Host, { class: hostClass },
h("div", { class: containerClass }, this.modals.map((modal, i) => {
var _a, _b;
return (h("cdp-modal", { props: { display: modal.close ? false : true }, config: (_a = modal.config) !== null && _a !== void 0 ? _a : (_b = this.config) === null || _b === void 0 ? void 0 : _b.defaultModalConfig, onClosed: e => {
this.markedClear = [...this.markedClear, i];
if (modal.onClosed)
modal.onClosed(e);
}, onOpened: e => {
if (modal.onOpened)
modal.onOpened(e);
} }, modal.content));
}))));
}
static get is() { return "cdp-modal-rematch"; }
static get properties() { return {
"config": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "{\r\n defaultModalConfig?: CdpModalConfig;\r\n store: RematchStore<{ CdpModalModel: typeof CdpModalModel }>;\r\n }",
"resolved": "{ defaultModalConfig?: any; store: RematchStore<{ CdpModalModel: { state: CdpModalState; reducers: { clear(state: CdpModalState, payload: number[]): CdpModalState; pushModal(state: CdpModalState, payload: IModal): CdpModalState; popModal(state: CdpModalState): CdpModalState; popAllModal(state: CdpModalState): CdpModalState; closeModal(state: CdpModalState): CdpModalState; closeAllModal(state: CdpModalState): CdpModalState; popModalByTag(state: CdpModalState, payload: string): CdpModalState; }; }; }, Record<string, any>>; }",
"references": {
"CdpModalConfig": {
"location": "import",
"path": "@codeperate/cdp-ui-library/dist"
},
"RematchStore": {
"location": "import",
"path": "@rematch/core"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
}
}; }
static get states() { return {
"modals": {},
"markedClear": {}
}; }
static get elementRef() { return "rootEl"; }
static get watchers() { return [{
"propName": "markedClear",
"methodName": "markedClearHandler"
}]; }
}