@winged/core/tests/SampleView.ts

Morden webapp framekwork made only for ts developers. (UNDER DEVELOPMENT, PLEASE DO NOT USE)

import { BasicType, vComputed, VDomStruct, vSubviewMap, VSubviewType } from '../src/index'
import { VEventData, View, vState } from '../src/index'
import { BoxView, BoxViewImpl } from './BoxView'

/* tslint:disable:max-line-length */

abstract class SampleView<V extends SampleView<any>> extends View<V> {
  // simple states
  @vState() public userName: string
  @vState() public userInputClass: string
  @vState() public userUpper: string
  @vState() public userInputDisabled: boolean
  @vState() public a: BasicType
  @vState() public b: BasicType
  @vState() public boxHighlighted: boolean

  // object states
  @vState({}) public boxData: {}

  @vState([{ selected: true, id: true, name: true, age: true }])
  public dataList: Array<{ selected: BasicType, id: BasicType, name: string, age: number }>

  @vSubviewMap(BoxView.propsDescriber)
  public abstract readonly _subviewMap: {
    BoxView: VSubviewType<BoxView<any>, { boxData: V['boxData'], highlighted: V['boxHighlighted'] }>;
  }

  protected readonly refs: { userInput: HTMLInputElement } = {} as any
  protected readonly _contents: VDomStruct = ['E', 'section', { id: 'main-wrap' }, [
    '\n',
    ['E', 'h2', 'Basic Data Binding'],
    ['E', 'input', { type: 'text', class: [['D', 'userInputClass'], ' input'], '@value': 'userName', '@attr:disabled': 'userInputDisabled', '@ref': 'userInput', oninput: 'handleUserInput' }],
    ['E', 'p', ['Hello ', ['D', 'userName || "-"']]],
    ['E', 'p', ['Your upper cased name will be ', ['D', 'userUpper']]],
    ['E', 'p', ['state a = ',
      ['E', 'b', [['D', 'a']]]
    ]],
    ['E', 'p', ['state b = ',
      ['E', 'b', [['D', 'b']]]
    ]],
    '\n',
    ['E', 'h2', 'Expression Evaluation'],
    ['E', 'p', [
      'a == "5" ? ',
      // `(a + 1) > 0 ? `,
      // ["D", `((a + 1) > 0) ? true : 'false'`]
      ['D', 'a == "5" ? "true" : "false"']
    ]],
    '\n',
    ['E', 'h2', 'Conditional Rendering'],
    ['E', 'ul', [
      ['E', 'li', 'head li 1'],
      ['L', 'If', { not: 'b == "1"' }, [
        ['E', 'li', ['b != "1"']],
        ['L', 'Else'],
        ['E', 'li', ['b == "1"']],
        ['L', 'If', { cond: 'a == "1"' }, [
          ['E', 'li', [
            'a is "1"'
          ]],
          ['L', 'Elif', { cond: 'a == "5"' }],
          ['E', 'li', [
            'a is "5"'
          ]],
          ['L', 'Else'],
          ['E', 'li', [
            'a is nither',
            ['E', 'b', ' 1 nor 5']
          ]],
        ]],
      ]],
      ['E', 'li', 'middle li 1'],
      ['E', 'li', 'middel li 2'],
      ['L', 'If', { cond: 'a == "3"' }, [
        ['E', 'li', 'a == 3'],
      ]],
      ['E', 'li', 'tail li 1'],
    ]],
    ['L', 'If', { cond: 'a' }, [' A exists! ']],
    ['E', 'h2', 'List rendering'],
    ['E', 'ul', [
      ['L', 'For', { list: 'dataList', item: 'item', index: 'idx', key: 'id' }, [
        ['L', 'If', { cond: 'b == "1"' }, [
          ['E', 'p', 'test'],
          ['L', 'Else'],
          ['L', 'For', { list: 'dataList', item: 'item2', index: 'item', key: 'id' }, [
            ['E', 's', ['(', ['D', 'item'], ')', ':', ['D', 'item2.age'], ', ']],
            ['E', 'b', ['(', ['D', 'item'], ')', ':', ['D', 'item2.age'], ', ']]
          ]]
        ]],
        ['E', 'li', { onclick: 'handleLiClick', 'data-item-id': [['D', 'item.id']], 'data-index': [['D', 'idx']], class: [['D', 'item.selected?"selected"']] }, [
          '[',
          ['D', 'idx'],
          '] data from outter namespace: userName="', ['D', 'userName'], '"',
          ['E', 'br'],
          ['E', 'b', ['name: ', ['D', 'item.name'], ' ']],
          ['E', 'br'],
          ['E', 'span', ['age: ', ['D', 'item.age'], ' ']],
          ['E', 'br'],
          '--'
        ]]
      ]],
    ]],
    ['E', 'h2', 'Subview'],
    ['L', 'View', { class: 'BoxView', props: '{boxData, highlighted:boxHighlighted}', ':confirm': 'handleBoxConfirm' }, [
      ['L', 'Plugin', { slot: 'header' }, [
        ['E', 'h4', { onclick: 'handleBoxHeaderClick' }, ['>> This is my header <<']],
        ['E', 'span', [
          'data:',
          ['D', 'a']
        ]],
        ['E', 'ul', [
          // ['E', 'span', ['age: ', ['D', 'item.age'], ' ']],
          ['L', 'For', { list: 'dataList', item: 'item', index: 'idx', key: 'id' }, [
            ['E', 'li', { onclick: 'handleLiClick', 'data-item-id': [['D', 'item.id']], 'data-index': [['D', 'idx']] }, [
              '[',
              ['D', 'idx'],
              '] data from outter namespace: userName=',
              ['D', 'userName'],
              ['E', 'br'],
              ['E', 'b', ['name: ', ['D', 'item.name'], ' ']],
              ['E', 'br'],
              ['E', 'span', ['age: ', ['D', 'item.age'], ' ']],
              ['E', 'br'],
              '--'
            ]]
          ]],
        ]],
      ]]
    ]]
  ]]
  public abstract handleUserInput(event: Event): void
  public abstract handleLiClick(event: Event, data: { itemId: V['dataList'][0]['id'], index: number }): void
  public abstract handleBoxConfirm(data: VEventData<V, 'BoxView', 'confirm'>): void
  public abstract handleBoxHeaderClick(event: Event): void
  protected _linkSubviewProps() {
    return {
      BoxView: {
        dependencies: ['boxData', 'highlighted'],
        getter: () => ({ boxData: this.boxData, highlighted: this.boxHighlighted })
      }
    }
  }
}

interface LiData {
  selected: boolean
  id: number
  name: string
  age: number
}

export class SampleViewImpl extends SampleView<SampleViewImpl> {
  @vComputed<SampleViewImpl>('userName', 'testValue') get userUpper() {
    return this.userName.toUpperCase()
  }
  @vComputed<SampleViewImpl>('userName') get a() {
    return this.userName.length.toString()
  }
  @vComputed<SampleViewImpl>('a') get b() {
    return (parseInt(this.a) % 2).toString()
  }
  public _propsType: {}
  public _events: {} = {}
  public userName: string = ''
  public dataList: LiData[]
  public testValue: string
  public readonly _subviewMap = {
    BoxView: BoxViewImpl
  }

  public onMount(props: this['_propsType']) {
    console.log('-------------')
    this.userName = 'giyyapan'
    // this.refs.userInput.onfocus = () => {
    //   this.userInputClass = 'test-class';
    // };
    // this.refs.userInput.onblur = () => {
    //   this.userInputClass = '';
    // };
    // setTimeout(() => {
    //   this.dataList[2].selected = true;
    // }, 1000)
    this.createListData()
    // this.userInputDisabled = true;
    // setTimeout(() => {
    //   this.userInputDisabled = false;
    //   this.refs.userInput.focus()
    // }, 1000)
    // setTimeout(() => {
    //   this.userName = null;
    // }, 1000)
    // setInterval(() => {
    //   this.a += 1;
    // }, 1000)
    // setInterval(() => {
    //   this.userName = ['giyyapan', 'sinelpan', 'cheng', 'evink'][Math.floor(Math.random() * 3)]
    // }, 3000)
    this.setState({})
  }

  public handleBoxHeaderClick(event: Event): void {
    console.log('box header click')
  }

  public handleBoxConfirm(data: { myKey: string; }): void {
    console.log('box confirm', { myKey: data.myKey })
  }

  public handleUserInput(event: Event): void {
    console.log('input triggered', this.refs.userInput.value)
  }

  public handleLiClick(event: Event, dataset: { itemId: number; index: number }): void {
    console.log('li clicked, dataset:', dataset)
    const item = this.dataList[dataset.index]
    item.selected = !item.selected
  }

  private createListData() {
    this.dataList = []
    const itv = setInterval(() => {
      if (this.dataList.length >= 3) {
        clearInterval(itv)
        // this.sortListData();
      } else {
        const i = this.dataList.length > 0 ? this.dataList.length : 0
        if (i >= 1) {
          this.dataList[i - 1].name += '?'
        }
        this.dataList.push({ id: i, selected: false, name: `item No.${i}`, age: Math.round(Math.random() * 50) })
      }
    }, 20)
    // tslint:disable-next-line:no-unused-expression
    this.sortListData
  }

  private sortListData() {
    // this.b = 100;
    setInterval(() => {
      if (Math.random() > 0.5) {
        this.dataList.forEach((i, idx) => {
          // console.log('old value', i.age);
          i.selected = Math.random() > 0.5 ? true : false
          i.age = Math.round(Math.random() * 50)
          // console.log('current value', i.age);
        })
      } else {
        const newList = []
        const total = 4 + Math.round(Math.random() * 6)
        for (let i = 0; i < total; i++) {
          newList.push({ id: i, selected: false, name: `item No.${i}`, age: Math.round(Math.random() * 50) })
        }
        this.dataList = newList
      }
      // const newList = [];
      // const total = 2 + Math.round(Math.random() * 3);
      // for (let i = 0; i < total; i++) {
      //   newList.push(new LiModel().init({ id: i + '', selected: false, name: `item No.${i}`, age: Math.round(Math.random() * 50) }));
      // }
      // if (Math.random() > 0.5) {
      //   this.dataList = this.dataList.concat(newList);
      // } else {
      //   newList.forEach((i) => {
      //     i.selected = true;
      //   });
      //   this.dataList.splice(0, 0, ...newList);
      // }
      // this.dataList.sort((a, b) => a.age - b.age);
    }, 100)
  }
}