await fields() How do I use the "preview" property?

[alkene0005]

await fields() How do I use the "preview" property?

[ramiroaraujo]

Actually, good question.
With the arg() function there's a preview that's set on the Config which only runs once, but there's also a preview in each Choice, which seems to be run when selected. And you also have the choicesOrPanel 2nd or 3rd param which takes a function (input:string) => string and it's executed on each keystroke.
With fields() the only preview I managed to get working is the one that only runs once, and I can't seem to updated it once set. I tried onChange, which does trigger on each input change, but there are no tools to manipulate the preview, as far as I can see...

[johnlindquist]

@alkene0005 @ramiroaraujo

Apologies for the late reply, state.value will be an array of the current values. onChange will fire any time a field changes. Also, it might not have been clear there's a fields property on the config object:

let buildPreview = (one, two, three) => {
  setPreview(
    md(`# Current values:
  - one: ${one}
  - two: ${two}
  - three: ${three}    
  
      `)
  )
}

await fields({
  fields: ["one", "two", "three"],
  onInit: (input, state) => {
    buildPreview("", "", "")
  },
  onChange: (input, state) => {
    let [one, two, three] = state.value
    buildPreview(one, two, three)
  },
})