From 87c979d7b9ab05597537150c1ca61490c5f80017 Mon Sep 17 00:00:00 2001 From: Martin Oppitz Date: Fri, 18 Sep 2020 16:00:42 +0200 Subject: [PATCH] fix: remove a lot of type annotation hint inside the templates --- .../angular/template/src/angular.main.ts | 21 ++++++++++ .../src/components/app/component.angular.ts | 6 +-- .../series/edit/component.angular.ts | 20 +++++----- .../frameworks/angular/template/src/main.ts | 18 +-------- .../cli/frameworks/angularjs/package.json | 1 + .../angularjs/template/src/angularjs.main.ts | 27 +++++++++++++ .../template/src/angularjs.module.ts | 2 +- .../src/components/app/component.angularjs.ts | 8 ++-- .../series/edit/component.angularjs.ts | 3 +- .../series/list/component.angularjs.ts | 6 ++- .../frameworks/angularjs/template/src/main.ts | 26 +------------ .../aurelia/template/src/aurelia.main.ts | 36 ++++++++++++++++++ .../src/components/app/component.aurelia.ts | 6 +-- .../series/edit/component.aurelia.ts | 5 ++- .../frameworks/aurelia/template/src/main.ts | 24 +----------- .../src/components/app/component.inferno.tsx | 38 +++++++++++++------ .../src/components/component.inferno.ts | 22 ----------- .../components/input/component.inferno.tsx | 17 ++++++--- .../series/create/component.inferno.tsx | 18 +++++---- .../series/edit/component.inferno.tsx | 25 ++++++++---- .../series/editor/component.inferno.tsx | 19 +++++++--- .../series/list/component.inferno.tsx | 28 +++++++------- .../inferno/template/src/inferno.main.tsx | 8 ++-- .../src/components/app/component.preact.tsx | 13 +++---- .../src/components/input/component.preact.tsx | 2 +- .../series/create/component.preact.tsx | 4 +- .../series/edit/component.preact.tsx | 4 +- .../series/editor/component.preact.tsx | 5 +-- .../series/list/component.preact.tsx | 2 +- .../preact/template/src/preact.main.tsx | 6 ++- .../frameworks/react/template/package.json | 1 + .../src/components/app/component.react.tsx | 25 ++++++------ .../src/components/component.react.ts | 22 ----------- .../src/components/input/component.react.tsx | 15 +++++--- .../series/create/component.react.tsx | 17 +++++---- .../series/edit/component.react.tsx | 25 ++++++++---- .../series/editor/component.react.tsx | 19 +++++++--- .../series/list/component.react.tsx | 28 +++++++------- .../react/template/src/react.main.tsx | 6 ++- 39 files changed, 318 insertions(+), 260 deletions(-) create mode 100644 packages/cli/frameworks/angular/template/src/angular.main.ts create mode 100644 packages/cli/frameworks/angularjs/template/src/angularjs.main.ts create mode 100644 packages/cli/frameworks/aurelia/template/src/aurelia.main.ts delete mode 100644 packages/cli/frameworks/inferno/template/src/components/component.inferno.ts delete mode 100644 packages/cli/frameworks/react/template/src/components/component.react.ts diff --git a/packages/cli/frameworks/angular/template/src/angular.main.ts b/packages/cli/frameworks/angular/template/src/angular.main.ts new file mode 100644 index 0000000000..ef75e1a2a0 --- /dev/null +++ b/packages/cli/frameworks/angular/template/src/angular.main.ts @@ -0,0 +1,21 @@ +// Polyfills +import 'core-js/features/reflect'; +import 'zone.js/dist/zone'; + +import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './angular.module'; + +const ENVs = { + NODE_ENV: '$$NODE_ENV$$', +}; +if (ENVs.NODE_ENV === 'production') { + enableProdMode(); +} + +platformBrowserDynamic() + .bootstrapModule(AppModule) + .then(() => {}) + .catch(() => {}) + .finally(() => {}); diff --git a/packages/cli/frameworks/angular/template/src/components/app/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/app/component.angular.ts index 1692fd42c7..2aab22b9e6 100644 --- a/packages/cli/frameworks/angular/template/src/components/app/component.angular.ts +++ b/packages/cli/frameworks/angular/template/src/components/app/component.angular.ts @@ -1,8 +1,8 @@ import { ApplicationRef, Component } from '@angular/core'; import { RouterService } from '../../services/router/service'; -import { AppController } from './controller'; import { Filters } from '../../shares/filters'; +import { AppController, ResolvedRoute } from './controller'; @Component({ selector: 'app', @@ -19,13 +19,13 @@ import { Filters } from '../../shares/filters'; }) export class AppComponent extends AppController { public filters = Filters; - public resolvedRoute: any = { + public resolvedRoute: ResolvedRoute = { url: 'series', }; public constructor(appRef: ApplicationRef) { super(); - RouterService.subscribe((route: any, params: any, query: any) => { + RouterService.subscribe((route: { url: string }, params: { id: number }, query: unknown) => { this.resolvedRoute = { params, query, diff --git a/packages/cli/frameworks/angular/template/src/components/series/edit/component.angular.ts b/packages/cli/frameworks/angular/template/src/components/series/edit/component.angular.ts index 3443dfe806..2728d2a3da 100644 --- a/packages/cli/frameworks/angular/template/src/components/series/edit/component.angular.ts +++ b/packages/cli/frameworks/angular/template/src/components/series/edit/component.angular.ts @@ -1,24 +1,26 @@ import { Component, Input, OnChanges } from '@angular/core'; +import { GenericComponent } from '@leanup/lib/components/generic'; +import { ResolvedRoute } from '../../app/controller'; import { EditSerieController } from './controller'; @Component({ selector: 'edit-serie', template: ` -
+
Edit a existing measuring serie
- + - - + +
`, }) -export class EditSerieComponent implements OnChanges { - public $ctrl: EditSerieController = new EditSerieController(null); - @Input() public resolvedRoute: any; +export class EditSerieComponent implements OnChanges, GenericComponent { + public ctrl: EditSerieController = new EditSerieController(0); + @Input() public resolvedRoute: ResolvedRoute; - public ngOnChanges() { - this.$ctrl.changeMeasuredSerie(this.resolvedRoute.params.id); + public ngOnChanges(): void { + this.ctrl.changeMeasuredSerie(this.resolvedRoute.params.id); } } diff --git a/packages/cli/frameworks/angular/template/src/main.ts b/packages/cli/frameworks/angular/template/src/main.ts index d3989e3bc7..2cea34676f 100644 --- a/packages/cli/frameworks/angular/template/src/main.ts +++ b/packages/cli/frameworks/angular/template/src/main.ts @@ -1,17 +1 @@ -// Polyfills -import 'core-js/features/reflect'; -import 'zone.js/dist/zone'; - -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './angular.module'; - -const ENVs = { - NODE_ENV: '$$NODE_ENV$$', -}; -if (ENVs.NODE_ENV === 'production') { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); +import './angular.main'; diff --git a/packages/cli/frameworks/angularjs/package.json b/packages/cli/frameworks/angularjs/package.json index 7d803037c5..5305d55977 100644 --- a/packages/cli/frameworks/angularjs/package.json +++ b/packages/cli/frameworks/angularjs/package.json @@ -45,6 +45,7 @@ }, "devDependencies": { "@leanup/cli": "^1.1.0-rc.102", + "@types/angular": "^1.7.3", "@types/node": "^14.11.1", "typescript": "^4.0.2" }, diff --git a/packages/cli/frameworks/angularjs/template/src/angularjs.main.ts b/packages/cli/frameworks/angularjs/template/src/angularjs.main.ts new file mode 100644 index 0000000000..727e9f042f --- /dev/null +++ b/packages/cli/frameworks/angularjs/template/src/angularjs.main.ts @@ -0,0 +1,27 @@ +import './angularjs.module'; +import './components/app/component.angularjs'; +import './components/input/component.angularjs'; +import './components/series/create/component.angularjs'; +import './components/series/edit/component.angularjs'; +import './components/series/editor/component.angularjs'; +import './components/series/list/component.angularjs'; + +import * as angular from 'angular'; + +import { DI } from '@leanup/lib/helpers/injector'; + +import { APP_HTML_ELEMENT } from './shares/constant'; + +DI.register('Framework', { + ...require('angular/package.json'), + name: 'AngularJS', +}); +require('./shares/register'); +require('./shares/routing'); + +const htmlDivElement: HTMLDivElement | null = document.querySelector('div#angularjs'); +if (htmlDivElement instanceof HTMLDivElement) { + htmlDivElement.style.display = 'inline'; + htmlDivElement.appendChild(APP_HTML_ELEMENT); + angular.bootstrap(htmlDivElement, ['app']); +} diff --git a/packages/cli/frameworks/angularjs/template/src/angularjs.module.ts b/packages/cli/frameworks/angularjs/template/src/angularjs.module.ts index c0d0183e39..00c1babe73 100644 --- a/packages/cli/frameworks/angularjs/template/src/angularjs.module.ts +++ b/packages/cli/frameworks/angularjs/template/src/angularjs.module.ts @@ -1,3 +1,3 @@ import * as angular from 'angular'; -export const ANGULARJS_MODULE = angular.module('app', []); +export const ANGULARJS_MODULE: angular.IModule = angular.module('app', []); diff --git a/packages/cli/frameworks/angularjs/template/src/components/app/component.angularjs.ts b/packages/cli/frameworks/angularjs/template/src/components/app/component.angularjs.ts index d38ab425e7..bdb1314800 100644 --- a/packages/cli/frameworks/angularjs/template/src/components/app/component.angularjs.ts +++ b/packages/cli/frameworks/angularjs/template/src/components/app/component.angularjs.ts @@ -1,18 +1,18 @@ import { ANGULARJS_MODULE } from '../../angularjs.module'; import { RouterService } from '../../services/router/service'; -import { AppController } from './controller'; +import { AppController, ResolvedRoute } from './controller'; ANGULARJS_MODULE.component('app', { controller: [ '$scope', class extends AppController { - public resolvedRoute: any = { + public resolvedRoute: ResolvedRoute = { url: 'series', }; - public constructor($scope: any) { + public constructor($scope: { $apply: Function }) { super(); - RouterService.subscribe((route: any, params: any, query: any) => { + RouterService.subscribe((route: { url: string }, params: { id: number }, query: unknown) => { this.resolvedRoute = { params, query, diff --git a/packages/cli/frameworks/angularjs/template/src/components/series/edit/component.angularjs.ts b/packages/cli/frameworks/angularjs/template/src/components/series/edit/component.angularjs.ts index bb6d49cdc6..5ce26b0a86 100644 --- a/packages/cli/frameworks/angularjs/template/src/components/series/edit/component.angularjs.ts +++ b/packages/cli/frameworks/angularjs/template/src/components/series/edit/component.angularjs.ts @@ -1,4 +1,5 @@ import { ANGULARJS_MODULE } from '../../../angularjs.module'; +import { ResolvedRoute } from '../../app/controller'; import { EditSerieController } from './controller'; ANGULARJS_MODULE.component('editSerie', { @@ -6,7 +7,7 @@ ANGULARJS_MODULE.component('editSerie', { resolvedRoute: '<', }, controller: class extends EditSerieController { - public resolvedRoute: any; + public resolvedRoute: ResolvedRoute; public $onChanges() { this.changeMeasuredSerie(this.resolvedRoute.params.id); diff --git a/packages/cli/frameworks/angularjs/template/src/components/series/list/component.angularjs.ts b/packages/cli/frameworks/angularjs/template/src/components/series/list/component.angularjs.ts index 2251059ba9..77d97ceb1a 100644 --- a/packages/cli/frameworks/angularjs/template/src/components/series/list/component.angularjs.ts +++ b/packages/cli/frameworks/angularjs/template/src/components/series/list/component.angularjs.ts @@ -3,10 +3,12 @@ import { ListSerieController } from './controller'; ANGULARJS_MODULE.component('listSerie', { controller: class extends ListSerieController { - public constructor($scope) { + public constructor($scope: { $apply: Function }) { super(); this.renderView = () => { - setTimeout($scope.$apply.bind(this)); + setTimeout(() => { + $scope.$apply(); + }, 0); }; } }, diff --git a/packages/cli/frameworks/angularjs/template/src/main.ts b/packages/cli/frameworks/angularjs/template/src/main.ts index b21fc62431..3b9b4e9bcc 100644 --- a/packages/cli/frameworks/angularjs/template/src/main.ts +++ b/packages/cli/frameworks/angularjs/template/src/main.ts @@ -1,25 +1 @@ -import './angularjs.module'; -import './components/app/component.angularjs'; -import './components/input/component.angularjs'; -import './components/series/create/component.angularjs'; -import './components/series/edit/component.angularjs'; -import './components/series/editor/component.angularjs'; -import './components/series/list/component.angularjs'; - -import * as angular from 'angular'; - -import { DI } from '@leanup/lib/helpers/injector'; - -import { APP_HTML_ELEMENT } from './shares/constant'; - -DI.register('Framework', { - ...require('angular/package.json'), - name: 'AngularJS', -}); -require('./shares/register'); -require('./shares/routing'); - -const htmlDivElement: HTMLDivElement | null = document.querySelector('div#angularjs'); -htmlDivElement.style.display = 'inline'; -htmlDivElement.appendChild(APP_HTML_ELEMENT); -angular.bootstrap(htmlDivElement, ['app']); +import './angularjs.main'; diff --git a/packages/cli/frameworks/aurelia/template/src/aurelia.main.ts b/packages/cli/frameworks/aurelia/template/src/aurelia.main.ts new file mode 100644 index 0000000000..88a3e31f08 --- /dev/null +++ b/packages/cli/frameworks/aurelia/template/src/aurelia.main.ts @@ -0,0 +1,36 @@ +import { bootstrap } from 'aurelia-bootstrapper'; +import { Aurelia } from 'aurelia-framework'; +import { PLATFORM } from 'aurelia-pal'; + +import { DI } from '@leanup/lib/helpers/injector'; + +DI.register('Framework', { + ...require('aurelia-framework/package.json'), + name: 'Aurelia', +}); +require('./shares/register'); +require('./shares/routing'); + +export function configure(aurelia: Aurelia): void { + const htmlDivElement: HTMLDivElement | null = document.querySelector('div#aurelia'); + if (htmlDivElement instanceof HTMLDivElement) { + htmlDivElement.style.display = 'inline'; + aurelia.use.standardConfiguration().developmentLogging(); + aurelia + .start() + .then(() => { + aurelia + .setRoot(PLATFORM.moduleName('components/app/component.aurelia'), htmlDivElement) + .then(() => {}) + .catch(() => {}) + .finally(() => {}); + }) + .catch(() => {}) + .finally(() => {}); + } +} + +bootstrap(configure) + .then(() => {}) + .catch(() => {}) + .finally(() => {}); diff --git a/packages/cli/frameworks/aurelia/template/src/components/app/component.aurelia.ts b/packages/cli/frameworks/aurelia/template/src/components/app/component.aurelia.ts index d9e9d0f2e5..1a65a5166f 100644 --- a/packages/cli/frameworks/aurelia/template/src/components/app/component.aurelia.ts +++ b/packages/cli/frameworks/aurelia/template/src/components/app/component.aurelia.ts @@ -1,14 +1,14 @@ import { RouterService } from '../../services/router/service'; -import { AppController } from './controller'; +import { AppController, ResolvedRoute } from './controller'; export class App extends AppController { - public resolvedRoute: any = { + public resolvedRoute: ResolvedRoute = { url: 'series', }; constructor() { super(); - RouterService.subscribe((route: any, params: any, query: any) => { + RouterService.subscribe((route: { url: string }, params: { id: number }, query: unknown) => { this.resolvedRoute = { params, query, diff --git a/packages/cli/frameworks/aurelia/template/src/components/series/edit/component.aurelia.ts b/packages/cli/frameworks/aurelia/template/src/components/series/edit/component.aurelia.ts index f78e08610c..8fc0a96588 100644 --- a/packages/cli/frameworks/aurelia/template/src/components/series/edit/component.aurelia.ts +++ b/packages/cli/frameworks/aurelia/template/src/components/series/edit/component.aurelia.ts @@ -1,11 +1,12 @@ import { bindable, bindingMode } from 'aurelia-framework'; +import { ResolvedRoute } from '../../app/controller'; import { EditSerieController } from '../edit/controller'; export class EditSerie extends EditSerieController { - @bindable({ defaultBindingMode: bindingMode.twoWay }) public resolvedRoute; + @bindable({ defaultBindingMode: bindingMode.twoWay }) public resolvedRoute: ResolvedRoute; - public bind() { + public bind(): void { this.changeMeasuredSerie(this.resolvedRoute.params.id); } } diff --git a/packages/cli/frameworks/aurelia/template/src/main.ts b/packages/cli/frameworks/aurelia/template/src/main.ts index 80484c545e..5be605a882 100644 --- a/packages/cli/frameworks/aurelia/template/src/main.ts +++ b/packages/cli/frameworks/aurelia/template/src/main.ts @@ -1,23 +1 @@ -import { bootstrap } from 'aurelia-bootstrapper'; -import { Aurelia } from 'aurelia-framework'; -import { PLATFORM } from 'aurelia-pal'; - -import { DI } from '@leanup/lib/helpers/injector'; - -DI.register('Framework', { - ...require('aurelia-framework/package.json'), - name: 'Aurelia', -}); -require('./shares/register'); -require('./shares/routing'); - -export function configure(aurelia: Aurelia) { - const htmlDivElement: HTMLDivElement | null = document.querySelector('div#aurelia'); - htmlDivElement.style.display = 'inline'; - aurelia.use.standardConfiguration().developmentLogging(); - aurelia.start().then(() => { - aurelia.setRoot(PLATFORM.moduleName('components/app/component.aurelia'), htmlDivElement); - }); -} - -bootstrap(configure); +import './aurelia.main'; diff --git a/packages/cli/frameworks/inferno/template/src/components/app/component.inferno.tsx b/packages/cli/frameworks/inferno/template/src/components/app/component.inferno.tsx index 9d12f1d5d9..6bbcf14928 100644 --- a/packages/cli/frameworks/inferno/template/src/components/app/component.inferno.tsx +++ b/packages/cli/frameworks/inferno/template/src/components/app/component.inferno.tsx @@ -1,19 +1,25 @@ +import { createRef } from 'inferno'; + +import { GenericComponent } from '@leanup/lib/components/generic'; +import { InvernoComponent } from '@leanup/lib/components/inferno'; + import { RouterService } from '../../services/router/service'; -import { InfernoComponent } from '../component.inferno'; +import { Filters } from '../../shares/filters'; import { CreateSerieComponent } from '../series/create/component.inferno'; import { EditSerieComponent } from '../series/edit/component.inferno'; import { ListSerieComponent } from '../series/list/component.inferno'; -import { AppController, Props } from './controller'; -import { Filters } from '../../shares/filters'; +import { AppController, ResolvedRoute } from './controller'; -export class AppComponent extends InfernoComponent { - private resolvedRoute: any = { +export class AppComponent extends InvernoComponent implements GenericComponent { + public ctrl: AppController = new AppController(); + private resolvedRoute: ResolvedRoute = { url: 'series', }; + public ref = createRef(); - public constructor(props: Props) { + public constructor(props: unknown) { super(props, new AppController()); - RouterService.subscribe((route: any, params: any, query: any) => { + RouterService.subscribe((route: { url: string }, params: { id: number }, query: unknown) => { this.resolvedRoute = { params, query, @@ -23,19 +29,29 @@ export class AppComponent extends InfernoComponent { }); } - public render() { + public render(): JSX.Element { return (

- {this.$ctrl.framework.name} v{this.$ctrl.framework.version} + {this.ctrl.framework.name} v{this.ctrl.framework.version}

- {this.$ctrl.finishedRendering} ms upcomming time + {this.ctrl.finishedRendering} ms upcomming time {this.resolvedRoute.url === 'series' && } {this.resolvedRoute.url === 'series/create' && } {this.resolvedRoute.url === 'series/:id/edit' && } - Used filters: {Filters.date(this.$ctrl.dummies.date)} | {Filters.currency(this.$ctrl.dummies.price)} € + Used filters: {Filters.date(this.ctrl.dummies.date)} |{Filters.currency(this.ctrl.dummies.price)} € + {/*
+
+

+ In this box we study the usage of Google Material Design as capsulated + multiframework components. +

+ + + +
*/}
); } diff --git a/packages/cli/frameworks/inferno/template/src/components/component.inferno.ts b/packages/cli/frameworks/inferno/template/src/components/component.inferno.ts deleted file mode 100644 index 6967b2fc1b..0000000000 --- a/packages/cli/frameworks/inferno/template/src/components/component.inferno.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component } from 'inferno'; - -export abstract class InfernoComponent extends Component { - protected $ctrl: any = null; - - constructor(props: any, $ctrl: Object = null) { - super(props); - this.bindControllerLogic($ctrl, props); - } - - private bindControllerLogic($ctrl: Object, props: Object = {}) { - if (typeof $ctrl === 'object' && $ctrl !== null) { - try { - $ctrl.onUpdate = () => { - this.forceUpdate(); - }; - this.$ctrl = $ctrl; - // tslint:disable-next-line: no-empty - } catch (error) {} - } - } -} diff --git a/packages/cli/frameworks/inferno/template/src/components/input/component.inferno.tsx b/packages/cli/frameworks/inferno/template/src/components/input/component.inferno.tsx index dc871980d6..643aef608a 100644 --- a/packages/cli/frameworks/inferno/template/src/components/input/component.inferno.tsx +++ b/packages/cli/frameworks/inferno/template/src/components/input/component.inferno.tsx @@ -1,7 +1,12 @@ -import { InfernoComponent } from '../component.inferno'; +import { InputControl } from '@leanup/form/controls/controls'; +import { InvernoComponent } from '@leanup/lib/components/inferno'; -export class InputComponent extends InfernoComponent { - public render() { +interface Props { + control: InputControl; +} + +export class InputComponent extends InvernoComponent { + public render(): JSX.Element { return (
@@ -9,9 +14,9 @@ export class InputComponent extends InfernoComponent { className="form-control" id={this.props.control.id} name={this.props.control.name} - value={this.props.control.value} - onInput={(event: InputEvent) => { - this.props.control.value = event.target.value; + value={this.props.control.value as string} + onChange={(event: Event) => { + this.props.control.value = event.target === null ? '' : event.target.value; this.forceUpdate(); }} /> diff --git a/packages/cli/frameworks/inferno/template/src/components/series/create/component.inferno.tsx b/packages/cli/frameworks/inferno/template/src/components/series/create/component.inferno.tsx index 637e3055c7..c1d37d69b2 100644 --- a/packages/cli/frameworks/inferno/template/src/components/series/create/component.inferno.tsx +++ b/packages/cli/frameworks/inferno/template/src/components/series/create/component.inferno.tsx @@ -1,23 +1,27 @@ -import { InfernoComponent } from '../../component.inferno'; +import { GenericComponent } from '@leanup/lib/components/generic'; +import { InvernoComponent } from '@leanup/lib/components/inferno'; + import { EditorSerieComponent } from '../editor/component.inferno'; import { CreateSerieController } from './controller'; -export class CreateSerieComponent extends InfernoComponent { - public constructor(props: any) { +export class CreateSerieComponent extends InvernoComponent implements GenericComponent { + public ctrl: CreateSerieController = new CreateSerieController(); + + public constructor(props: unknown) { super(props, new CreateSerieController()); } - public render() { + public render(): JSX.Element { return (
{ event.preventDefault(); event.stopPropagation(); - this.$ctrl.onSubmit(); + this.ctrl.onSubmit(); }} >
Create a new measuring serie
- + @@ -26,7 +30,7 @@ export class CreateSerieComponent extends InfernoComponent { type="reset" id="cancel" onClick={() => { - this.$ctrl.onCancel(); + this.ctrl.onCancel(); }} > Abbrechen diff --git a/packages/cli/frameworks/inferno/template/src/components/series/edit/component.inferno.tsx b/packages/cli/frameworks/inferno/template/src/components/series/edit/component.inferno.tsx index ef6b265d7c..3f72eb18ad 100644 --- a/packages/cli/frameworks/inferno/template/src/components/series/edit/component.inferno.tsx +++ b/packages/cli/frameworks/inferno/template/src/components/series/edit/component.inferno.tsx @@ -1,28 +1,37 @@ -import { InfernoComponent } from '../../component.inferno'; +import { GenericComponent } from '@leanup/lib/components/generic'; +import { InvernoComponent } from '@leanup/lib/components/inferno'; + +import { ResolvedRoute } from '../../app/controller'; import { EditorSerieComponent } from '../editor/component.inferno'; import { EditSerieController } from './controller'; -export class EditSerieComponent extends InfernoComponent { - public constructor(props: any) { +interface Props { + resolvedRoute: ResolvedRoute; +} + +export class EditSerieComponent extends InvernoComponent implements GenericComponent { + public ctrl: EditSerieController = new EditSerieController(0); + + public constructor(props: Props) { super(props, new EditSerieController(props.resolvedRoute.params.id)); this.handleDelete.bind(this); } private handleDelete() { - this.$ctrl.onDelete(); + this.ctrl.onDelete(); } - public render() { + public render(): JSX.Element { return ( { event.preventDefault(); event.stopPropagation(); - this.$ctrl.onSubmit(); + this.ctrl.onSubmit(); }} >
Edit a existing measuring serie
- + @@ -31,7 +40,7 @@ export class EditSerieComponent extends InfernoComponent { type="reset" id="cancel" onClick={() => { - this.$ctrl.onCancel(); + this.ctrl.onCancel(); }} > Abbrechen diff --git a/packages/cli/frameworks/inferno/template/src/components/series/editor/component.inferno.tsx b/packages/cli/frameworks/inferno/template/src/components/series/editor/component.inferno.tsx index 902a51f1d0..6c5da5001d 100644 --- a/packages/cli/frameworks/inferno/template/src/components/series/editor/component.inferno.tsx +++ b/packages/cli/frameworks/inferno/template/src/components/series/editor/component.inferno.tsx @@ -1,17 +1,24 @@ -import { InfernoComponent } from '../../component.inferno'; +import { InputControl } from '@leanup/form/controls/controls'; +import { InvernoComponent } from '@leanup/lib/components/inferno'; + import { InputComponent } from '../../input/component.inferno'; import { EditorSerieController } from './controller'; +import { EditorForm } from './editor.form'; + +interface Props { + editorForm: EditorForm; +} -export class EditorSerieComponent extends InfernoComponent { - public constructor(props: any) { +export class EditorSerieComponent extends InvernoComponent { + public constructor(props: Props) { super(props, new EditorSerieController()); } - public render() { + public render(): JSX.Element { return (
- - + +
); } diff --git a/packages/cli/frameworks/inferno/template/src/components/series/list/component.inferno.tsx b/packages/cli/frameworks/inferno/template/src/components/series/list/component.inferno.tsx index 4826c6adb7..0341e8bdc2 100644 --- a/packages/cli/frameworks/inferno/template/src/components/series/list/component.inferno.tsx +++ b/packages/cli/frameworks/inferno/template/src/components/series/list/component.inferno.tsx @@ -1,26 +1,26 @@ -import { Component } from 'inferno'; -import { element } from 'prop-types'; +import { GenericComponent } from '@leanup/lib/components/generic'; +import { InvernoComponent } from '@leanup/lib/components/inferno'; import { MeasuredSerieModel } from '../../../models/measured-series.model'; import { ListSerieController } from './controller'; -export class ListSerieComponent extends Component { - public $ctrl: ListSerieController = new ListSerieController(); +export class ListSerieComponent extends InvernoComponent implements GenericComponent { + public ctrl: ListSerieController = new ListSerieController(); - constructor(props) { + constructor(props: unknown) { super(props); - this.$ctrl.renderView = this.forceUpdate.bind(this); + this.ctrl.renderView = this.forceUpdate.bind(this); this.handleEdit.bind(this); } private handleEdit(measuredSerie: MeasuredSerieModel) { - this.$ctrl.edit(measuredSerie); + this.ctrl.edit(measuredSerie); this.forceUpdate(); } - public render() { + public render(): JSX.Element { const tables: any[] = []; - for (let i = 0; i < this.$ctrl.elements.length; i++) { + for (let i = 0; i < this.ctrl.elements.length; i++) { tables.push( @@ -33,7 +33,7 @@ export class ListSerieComponent extends Component { - {this.$ctrl.measuredSeries.map((serie: MeasuredSerieModel, index: number) => { + {this.ctrl.measuredSeries.map((serie: MeasuredSerieModel, index: number) => { return ( @@ -68,18 +68,18 @@ export class ListSerieComponent extends Component { id="add" type="button" onClick={() => { - this.$ctrl.add(); + this.ctrl.add(); }} > Add - {this.$ctrl.showPerformanceButton && ( + {this.ctrl.showPerformanceButton && ( @@ -28,7 +31,7 @@ export class CreateSerieComponent extends ReactComponent { type="reset" id="cancel" onClick={() => { - this.$ctrl.onCancel(); + this.ctrl.onCancel(); }} > Abbrechen diff --git a/packages/cli/frameworks/react/template/src/components/series/edit/component.react.tsx b/packages/cli/frameworks/react/template/src/components/series/edit/component.react.tsx index 0dfa1f168a..6bb321cd00 100644 --- a/packages/cli/frameworks/react/template/src/components/series/edit/component.react.tsx +++ b/packages/cli/frameworks/react/template/src/components/series/edit/component.react.tsx @@ -1,30 +1,39 @@ import React from 'react'; -import { ReactComponent } from '../../component.react'; +import { GenericComponent } from '@leanup/lib/components/generic'; +import { ReactComponent } from '@leanup/lib/components/react'; + +import { ResolvedRoute } from '../../app/controller'; import { EditorSerieComponent } from '../editor/component.react'; import { EditSerieController } from './controller'; -export class EditSerieComponent extends ReactComponent { - public constructor(props: any) { +interface Props { + resolvedRoute: ResolvedRoute; +} + +export class EditSerieComponent extends ReactComponent implements GenericComponent { + public ctrl: EditSerieController = new EditSerieController(0); + + public constructor(props: Props) { super(props, new EditSerieController(props.resolvedRoute.params.id)); this.handleDelete.bind(this); } private handleDelete() { - this.$ctrl.onDelete(); + this.ctrl.onDelete(); } - public render() { + public render(): JSX.Element { return ( { event.preventDefault(); event.stopPropagation(); - this.$ctrl.onSubmit(); + this.ctrl.onSubmit(); }} >
Edit a existing measuring serie
- + @@ -33,7 +42,7 @@ export class EditSerieComponent extends ReactComponent { type="reset" id="cancel" onClick={() => { - this.$ctrl.onCancel(); + this.ctrl.onCancel(); }} > Abbrechen diff --git a/packages/cli/frameworks/react/template/src/components/series/editor/component.react.tsx b/packages/cli/frameworks/react/template/src/components/series/editor/component.react.tsx index 7d9cf1268e..33864b859d 100644 --- a/packages/cli/frameworks/react/template/src/components/series/editor/component.react.tsx +++ b/packages/cli/frameworks/react/template/src/components/series/editor/component.react.tsx @@ -1,19 +1,26 @@ import React from 'react'; -import { ReactComponent } from '../../component.react'; +import { InputControl } from '@leanup/form/controls/controls'; +import { ReactComponent } from '@leanup/lib/components/react'; + import { InputComponent } from '../../input/component.react'; import { EditorSerieController } from './controller'; +import { EditorForm } from './editor.form'; + +interface Props { + editorForm: EditorForm; +} -export class EditorSerieComponent extends ReactComponent { - public constructor(props: any) { +export class EditorSerieComponent extends ReactComponent { + public constructor(props: Props) { super(props, new EditorSerieController()); } - public render() { + public render(): JSX.Element { return (
- - + +
); } diff --git a/packages/cli/frameworks/react/template/src/components/series/list/component.react.tsx b/packages/cli/frameworks/react/template/src/components/series/list/component.react.tsx index 511449fd32..65c242cbb1 100644 --- a/packages/cli/frameworks/react/template/src/components/series/list/component.react.tsx +++ b/packages/cli/frameworks/react/template/src/components/series/list/component.react.tsx @@ -1,26 +1,28 @@ import React from 'react'; +import { GenericComponent } from '@leanup/lib/components/generic'; +import { ReactComponent } from '@leanup/lib/components/react'; + import { MeasuredSerieModel } from '../../../models/measured-series.model'; -import { ReactComponent } from '../../component.react'; import { ListSerieController } from './controller'; -export class ListSerieComponent extends ReactComponent { - public $ctrl: ListSerieController = new ListSerieController(); +export class ListSerieComponent extends ReactComponent implements GenericComponent { + public ctrl: ListSerieController = new ListSerieController(); - constructor(props) { + constructor(props: unknown) { super(props); - this.$ctrl.renderView = this.forceUpdate.bind(this); + this.ctrl.renderView = this.forceUpdate.bind(this); this.handleEdit.bind(this); } private handleEdit(measuredSerie: MeasuredSerieModel) { - this.$ctrl.edit(measuredSerie); + this.ctrl.edit(measuredSerie); this.forceUpdate(); } - public render() { + public render(): JSX.Element { const tables: any[] = []; - for (let i = 0; i < this.$ctrl.elements.length; i++) { + for (let i = 0; i < this.ctrl.elements.length; i++) { tables.push(
{index + 1}
@@ -33,7 +35,7 @@ export class ListSerieComponent extends ReactComponent { - {this.$ctrl.measuredSeries.map((serie: MeasuredSerieModel, index: number) => { + {this.ctrl.measuredSeries.map((serie: MeasuredSerieModel, index: number) => { return ( @@ -68,18 +70,18 @@ export class ListSerieComponent extends ReactComponent { id="add" type="button" onClick={() => { - this.$ctrl.add(); + this.ctrl.add(); }} > Add - {this.$ctrl.showPerformanceButton && ( + {this.ctrl.showPerformanceButton && (
{index + 1}