122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
/*
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
import React from "react";
|
|
|
|
export interface IComponents {
|
|
[key: string]: React.Component;
|
|
}
|
|
|
|
export interface ISkinObject {
|
|
components: IComponents;
|
|
}
|
|
|
|
export class Skinner {
|
|
public components: IComponents = null;
|
|
|
|
public getComponent(name: string): React.Component {
|
|
if (!name) throw new Error(`Invalid component name: ${name}`);
|
|
if (this.components === null) {
|
|
throw new Error(
|
|
`Attempted to get a component (${name}) before a skin has been loaded.`+
|
|
" This is probably because either:"+
|
|
" a) Your app has not called sdk.loadSkin(), or"+
|
|
" b) A component has called getComponent at the root level",
|
|
);
|
|
}
|
|
|
|
const doLookup = (components: IComponents): React.Component => {
|
|
if (!components) return null;
|
|
let comp = components[name];
|
|
// XXX: Temporarily also try 'views.' as we're currently
|
|
// leaving the 'views.' off views.
|
|
if (!comp) {
|
|
comp = components['views.' + name];
|
|
}
|
|
return comp;
|
|
};
|
|
|
|
// Check the skin first
|
|
const comp = doLookup(this.components);
|
|
|
|
// Just return nothing instead of erroring - the consumer should be smart enough to
|
|
// handle this at this point.
|
|
if (!comp) {
|
|
return null;
|
|
}
|
|
|
|
// components have to be functions or forwardRef objects with a render function.
|
|
const validType = typeof comp === 'function' || comp.render;
|
|
if (!validType) {
|
|
throw new Error(`Not a valid component: ${name} (type = ${typeof(comp)}).`);
|
|
}
|
|
return comp;
|
|
}
|
|
|
|
public load(skinObject: ISkinObject): void {
|
|
if (this.components !== null) {
|
|
throw new Error(
|
|
"Attempted to load a skin while a skin is already loaded"+
|
|
"If you want to change the active skin, call resetSkin first");
|
|
}
|
|
this.components = {};
|
|
const compKeys = Object.keys(skinObject.components);
|
|
for (let i = 0; i < compKeys.length; ++i) {
|
|
const comp = skinObject.components[compKeys[i]];
|
|
this.addComponent(compKeys[i], comp);
|
|
}
|
|
|
|
// Now that we have a skin, load our components too
|
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
|
const idx = require("./component-index");
|
|
if (!idx || !idx.components) throw new Error("Invalid react-sdk component index");
|
|
for (const c in idx.components) {
|
|
if (!this.components[c]) this.components[c] = idx.components[c];
|
|
}
|
|
}
|
|
|
|
public addComponent(name: string, comp: any) {
|
|
let slot = name;
|
|
if (comp.replaces !== undefined) {
|
|
if (comp.replaces.indexOf('.') > -1) {
|
|
slot = comp.replaces;
|
|
} else {
|
|
slot = name.substr(0, name.lastIndexOf('.') + 1) + comp.replaces.split('.').pop();
|
|
}
|
|
}
|
|
this.components[slot] = comp;
|
|
}
|
|
|
|
public reset(): void {
|
|
this.components = null;
|
|
}
|
|
}
|
|
|
|
// We define one Skinner globally, because the intention is
|
|
// very much that it is a singleton. Relying on there only being one
|
|
// copy of the module can be dicey and not work as browserify's
|
|
// behaviour with multiple copies of files etc. is erratic at best.
|
|
// XXX: We can still end up with the same file twice in the resulting
|
|
// JS bundle which is nonideal.
|
|
// See https://derickbailey.com/2016/03/09/creating-a-true-singleton-in-node-js-with-es6-symbols/
|
|
// or https://nodejs.org/api/modules.html#modules_module_caching_caveats
|
|
// ("Modules are cached based on their resolved filename")
|
|
if (window.mxSkinner === undefined) {
|
|
window.mxSkinner = new Skinner();
|
|
}
|
|
export default window.mxSkinner;
|
|
|