Регистрация  |  Вход

LWC SuperForm Component

По совету Wilder из соседней ветки решил накидать SuperForm LWC Component.

Буду крайне признателен за core review :) и любые советы как улучшить качество компонента.

Пока компонент поддерживает 2 типа инпутов: text input и textarea

<template>
  <template for:each={meta_} for:item="item">
    <div key={item.id}>
      <template if:true={item.isTextInput}>
        <lightning-input type="text" label={item.label} data-field-name={item.name} value={item.value} onchange={fieldChangeHandler}></lightning-input>
      </template>
      <template if:true={item.isTextarea}>
        <lightning-textarea label={item.label} data-field-name={item.name} value={item.value} onchange={fieldChangeHandler}></lightning-textarea>
      </template>
    </div>
  </template>
</template>

import { api, LightningElement } from "lwc";

export default class SuperForm extends LightningElement {

  @api
  obj = {};
  @api
  meta = [];

  obj_ = null;
  meta_ = null;

  connectedCallback() {
    this.obj_ = JSON.parse(JSON.stringify(this.obj));
    this.patchMeta();
  }

  patchMeta() {
    let meta_ = []
    let n = 0;
    this.meta.forEach((item) => {
      meta_.push({
        ...item,
        id: n,
        value: this.obj[item.name],
        get isTextInput() {
          return item.type === 'text';
        },
        get isTextarea() {
          return item.type === 'textarea';
        }
      });
      n++;
    });

    this.meta_ = meta_;
  }

  fieldChangeHandler(ev) {
    let el = ev.target;
    let fieldName = el.dataset.fieldName;
    this.obj_[fieldName] = el.value;
    this.dispatchEvent(new CustomEvent("objchange", {
      detail: JSON.stringify(this.obj_)
    }));
  }

}

Вызывается так

@track
testObj = {
  title: "XXXXX",
  details: "ZZZZZ"
}

testObjMeta = [
  {type: 'text', label: 'Title', name: 'title'},
  {type: 'textarea', label: 'Details', name: 'details'},
]

objChangeHandler(ev) {
  this.testObj = JSON.parse(ev.detail);;
}

<c-super-form obj={testObj} 
              meta={testObjMeta} 
              onobjchange={objChangeHandler} ></c-super-form>

Работает вроде, и даже на two-way binding похоже
По совету Wilder из соседней ветки решил накидать SuperForm LWC Component.

Буду крайне признателен за core review :) и любые советы как улучшить качество компонента.

Пока компонент поддерживает 2 типа инпутов: text input и textarea

[code]
<template>
  <template for:each={meta_} for:item="item">
    <div key={item.id}>
      <template if:true={item.isTextInput}>
        <lightning-input type="text" label={item.label} data-field-name={item.name} value={item.value} onchange={fieldChangeHandler}></lightning-input>
      </template>
      <template if:true={item.isTextarea}>
        <lightning-textarea label={item.label} data-field-name={item.name} value={item.value} onchange={fieldChangeHandler}></lightning-textarea>
      </template>
    </div>
  </template>
</template>
[/code]

[code]
import { api, LightningElement } from "lwc";

export default class SuperForm extends LightningElement {

  @api
  obj = {};
  @api
  meta = [];

  obj_ = null;
  meta_ = null;

  connectedCallback() {
    this.obj_ = JSON.parse(JSON.stringify(this.obj));
    this.patchMeta();
  }

  patchMeta() {
    let meta_ = []
    let n = 0;
    this.meta.forEach((item) => {
      meta_.push({
        ...item,
        id: n,
        value: this.obj[item.name],
        get isTextInput() {
          return item.type === 'text';
        },
        get isTextarea() {
          return item.type === 'textarea';
        }
      });
      n++;
    });

    this.meta_ = meta_;
  }

  fieldChangeHandler(ev) {
    let el = ev.target;
    let fieldName = el.dataset.fieldName;
    this.obj_[fieldName] = el.value;
    this.dispatchEvent(new CustomEvent("objchange", {
      detail: JSON.stringify(this.obj_)
    }));
  }

}
[/code]

Вызывается так

[code]
@track
testObj = {
  title: "XXXXX",
  details: "ZZZZZ"
}

testObjMeta = [
  {type: 'text', label: 'Title', name: 'title'},
  {type: 'textarea', label: 'Details', name: 'details'},
]

objChangeHandler(ev) {
  this.testObj = JSON.parse(ev.detail);;
}
[/code]

[code]
<c-super-form obj={testObj} 
              meta={testObjMeta} 
              onobjchange={objChangeHandler} ></c-super-form>
[/code]

Работает вроде, и даже на two-way binding похоже :smiley::party: