import {
LitElement,
property,
html,
customElement,
TemplateResult,
internalProperty,
} from 'lit-element';
import { WccDashboard } from './wcc-dashboard';
export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
export type TTheme = 'bright' | 'dark';
let environment: TEnvironment = 'native';
export const setEnvironment = (envArg) => {
environment = envArg;
};
@customElement('wcc-properties')
export class WccProperties extends LitElement {
@property()
dashboardRef: WccDashboard;
@property()
public selectedItem: TemplateResult | LitElement;
@property()
public selectedViewport: TEnvironment = 'native';
@property()
public selectedTheme: TTheme = 'dark';
@property()
public warning: string = null;
@internalProperty()
propertyContent: TemplateResult[] = [];
public render(): TemplateResult {
return html`
Properties
${this.propertyContent}
Docs
${this.warning ? html`${this.warning}
` : null}
`;
}
public async createProperties() {
console.log('creating properties');
const isEnumeration = (propertyArg): boolean => {
const keys = Object.keys(propertyArg.type);
const values = [];
for (const key of keys) {
let value = propertyArg.type[key];
if (typeof value === 'number') {
value = value.toString();
}
values.push(value);
}
for (const key of keys) {
if (values.indexOf(key) < 0) {
return false;
}
}
return true;
};
const getEnumValues = (propertyArg): any[] => {
console.log(JSON.stringify(propertyArg));
const enumValues : any[] = [];
Object.keys(propertyArg.type).forEach((valueArg: string) => {
enumValues.push(valueArg);
});
return enumValues;
};
const determinePropertyType = (propertyArg: any): TPropertyType => {
const typeName: any | undefined = propertyArg.type.name;
if (typeName) {
return typeName;
} else {
return Array.isArray(propertyArg)
? 'Array'
: isEnumeration(propertyArg)
? 'Enum'
: 'Object';
}
};
if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
const anonItem: any = this.selectedItem;
if (!anonItem._classProperties) {
return html`You have selected a page!`;
}
const wccFrame = await this.dashboardRef.wccFrame;
let selectedElement: HTMLElement;
for (const element of Array.from(wccFrame.children)) {
if (element instanceof (this.selectedItem as any)) {
selectedElement = element as HTMLElement;
break;
}
}
console.log(selectedElement);
const classProperties: Map = anonItem._classProperties;
const propertyArray: TemplateResult[] = [];
for (const key of classProperties.keys()) {
if (key === 'goBright' || key === 'domtools') {
continue;
}
const property = classProperties.get(key);
const propertyTypeString = determinePropertyType(property);
propertyArray.push(
html`
${key} / ${propertyTypeString}
${(() => {
switch (propertyTypeString) {
case 'Boolean':
return html` {
selectedElement[key] = eventArg.target.checked;
}}"
/>`;
case 'String':
return html` {
selectedElement[key] = eventArg.target.value;
}}"
/>`;
case 'Number':
return html` {
selectedElement[key] = eventArg.target.value;
}}"
/>`;
case 'Enum':
const enumValues: any[] = getEnumValues(property);
return html``;
}
})()}
`
);
}
this.propertyContent = propertyArray;
} else {
return null;
}
}
public selectTheme(themeArg: TTheme) {
this.selectedTheme = themeArg;
this.dispatchEvent(
new CustomEvent('selectedTheme', {
detail: themeArg,
})
);
console.log(this.dashboardRef.selectedType);
this.dashboardRef.buildUrl();
}
public async performUpdate() {
await this.createProperties();
super.performUpdate();
}
public selectViewport(viewport: TEnvironment) {
this.selectedViewport = viewport;
setEnvironment(viewport);
this.dispatchEvent(
new CustomEvent('selectedViewport', {
detail: viewport,
})
);
this.dashboardRef.buildUrl();
}
}