Bring Your Own (BYO) 7.22 Implementation Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

export class SimpleUI extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
  }

  /**
   * This is the only method that is required from "unqork" in order to pass the api and config.
   * The developer does not need this is in order to make a basic web component.
   * @param {*} initialConfig
   * @param {*} api
   */
  initialize(initialConfig, api) {
    this.config = initialConfig
    this.api = api

    this.setExternalComponentValue('This was set when component was initialized')

    this.subscribeToValueChange()
    this.subscribeToValidationChange()
    this.subscribeToInputData()
  }

  /**
   * This is the web component lifecycle method,
   * it's recommended for initializing view and events.
   */
  connectedCallback() {
    this.initialView()
    this.setupEvents()
  }

  disconnectedCallback() {
    this.setExternalComponentValue('This was set when component was destroyed')
  }

  /**
   * Subscribe to this component value state change,
   * its only needed if the component will have updated values set using set_property
   */
  subscribeToValueChange = () => {
    this.api.state.state$('value').subscribe((value) => {
      if (value) this.shadowRoot.getElementById('custom-input').value = value
    })
  }

  /**
   * Subscribe to this component to validate state change and render errors
   */
  subscribeToValidationChange = () => {
    this.api.state.state$('validation').subscribe((validation) => {
      const errors = this.shadowRoot.getElementById('errors')

      if (!validation) return

      if (validation.result.isValid) errors.innerHTML = ''
      else errors.innerHTML = validation.result?.errors?.map((e) => `<div>${e.message}</div>`)
    })
  }

  /**
   * Subscribe to the external component values
   */
  subscribeToInputData = () => {
    const inputRefKey = this.config.args.input
    const setHeading = (c) => {
      const heading = this.shadowRoot.getElementById('heading')
      heading.innerHTML = c.value ? `Hello, ${c.value}!` : ''
    }

    if (inputRefKey) console.warn('data input not defined')

    setHeading(this.api.state.resolveByKey(inputRefKey))
    this.api.state.resolveByKey$(inputRefKey).subscribe(setHeading)
  }

  /**
   * Set validation for a state
   * @param {*} isValid
   * @param {*} errors
   */
  setValidation = (isValid, errors) => {
    this.api.state.set((state) => {
      return merge(state, 'validation.result', {
        isValid,
        errors,
      })
    })
  }

  /**
   * For the given component key, update its value
   * Avoid changing every component property and expect it to work
   * it depends on the component implementation if the state update will be respected
   *
   * @param {*} key
   * @param {*} value
   */
  setExternalComponentValue(value) {
    this.api.state.updateExternalComponentState(this.config.args.output, { value })
  }

  /**
   * Render initial DOM structure
   */
  initialView() {
    this.shadowRoot.innerHTML = `
        <h1 id="heading"></h1>
        <button id="fireEventBtn">Fire Event</button>
        <button id="updateOutputBtn">Set output</button>
        <button id="setInvalidBtn">Make component invalid</button>
        <button id="setValidBtn">Make component valid</button>
        </br>
        <input type="text" id="custom-input"/>
        <div id="errors"></div>
    `
  }

  /**
   * Bind events
   */
  setupEvents() {
    const fireEventBtn = this.shadowRoot.getElementById('fireEventBtn')
    const updateOutputBtn = this.shadowRoot.getElementById('updateOutputBtn')
    const setInvalidBtn = this.shadowRoot.getElementById('setInvalidBtn')
    const validBtn = this.shadowRoot.getElementById('setValidBtn')
    const input = this.shadowRoot.getElementById('custom-input')

    // Add an 'onclick' event listener
    fireEventBtn.onclick = () => this.api.events.emit({ name: 'customEvent' })
    updateOutputBtn.onclick = () => this.setExternalComponentValue('This was set from an output')
    setInvalidBtn.onclick = () => this.setValidation(false, [{ type: 'customError', message: 'errorMessage' }])
    validBtn.onclick = () => this.setValidation(true, [])
    input.addEventListener('keyup', (e) => this.api.state.set({ value: e.target.value }))
  }
}

export default SimpleUI

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// << Import/Insert the AgGrid lib  here.>>
// << For readability purposes it has been removed.>>

export class AgGrid extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })

    this.gridOptions = {
      columnDefs: [],
      rowData: [],
    }
  }

  initialize(initialConfig, api) {
    this.config = initialConfig
    this.api = api

    this.renderGrid(this.shadowRoot, this.gridOptions)
    this.subscribeColumnDefs()
    this.subscribeData()
  }

  subscribeColumnDefs() {
    this.api.state.resolveByKey$(this.config.args.columnDefs).subscribe((columnDefs) => {
      this.gridOptions = {
        rowData: this.gridOptions.rowData,
        columnDefs: columnDefs.value || [],
      }
      this.updateGrid(this.gridOptions)
    })
  }

  subscribeData() {
    this.api.state.resolveByKey$(this.config.args.value).subscribe((rowData) => {
      this.gridOptions = {
        rowData: rowData.value || [],
        columnDefs: this.gridOptions.columnDefs,
      }
      this.updateGrid(this.gridOptions)
    })
  }

  updateGrid(gridOptions) {
    console.log('Updating AG Grid', gridOptions)
    this.gridApi.updateGridOptions(gridOptions)
  }

  async renderGrid(document, gridOptions) {
    console.log('Rendering AG Grid component', gridOptions)

    document.innerHTML = this.view()
    this.gridEl = document.querySelector('#myGrid')
    this.gridApi = agGrid.createGrid(this.gridEl, gridOptions)
    console.log('Created AG Grid', {
      document,
      gridOptions,
      gridEl: this.gridEl,
      gridApi: this.gridApi,
    })
  }

  view() {
    return `
      <div id="myGrid" style="height: 500px"></div>
    `
  }
}

export default AgGrid