github.com/resonatecoop/id@v1.1.0-43/frontend/src/elements/input-field.js (about)

     1  const html = require('choo/html')
     2  const icon = require('@resonate/icon-element')
     3  
     4  module.exports = inputField
     5  
     6  function inputField (inputComponent, form = {}) {
     7    const pristine = form.pristine
     8    const errors = form.errors
     9  
    10    return (props) => {
    11      const {
    12        prefix = 'mb5',
    13        labelPrefix = 'f5 db mb1',
    14        labelIconName,
    15        labelImage = false,
    16        labelImageSrc,
    17        labelText,
    18        disabled = false,
    19        inputName,
    20        helpText,
    21        displayErrors,
    22        columnReverse = false,
    23        flexRow = false
    24      } = props
    25  
    26      return html`
    27        <div class=${prefix}>
    28          <div class="flex flex-column${columnReverse ? ' flex-column-reverse' : ''}">
    29            <div class="flex ${flexRow ? 'flex-row items-center' : 'flex-column-reverse'}">
    30              ${inputComponent}
    31              ${renderLabel(labelText, labelIconName, labelPrefix)}
    32            </div>
    33            ${renderHelp(helpText)}
    34          </div>
    35          ${displayErrors ? renderErrors(inputName) : ''}
    36        </div>
    37      `
    38  
    39      function renderLabel (text, iconName, prefix) {
    40        return html`
    41          <label for=${inputName} class=${prefix}>
    42            <div class="flex items-center">
    43              ${iconName
    44                ? html`
    45                  <div style="width:3rem;height:3rem;" class="flex flex-shrink-0 justify-center bg-white items-center ba bw b--${disabled ? 'light-gray' : 'dark-gray'} mr2">
    46                    ${icon(iconName, { size: 'sm', class: 'fill-transparent' })}
    47                  </div>
    48                `
    49                : labelImage
    50                ? renderImage(labelImageSrc)
    51                : ''
    52              }
    53              <span>${text}</span>
    54            </div>
    55          </label>
    56        `
    57      }
    58  
    59      function renderImage (src) {
    60        return html`
    61          <div class="fl w-100 mw3 mr2">
    62            <div class="db aspect-ratio aspect-ratio--1x1 bg-dark-gray bg-dark-gray--dark">
    63              <figure class="ma0">
    64                <img src=${src} decoding="auto" class="aspect-ratio--object z-1">
    65                <figcaption class="clip absolute bottom-0 truncate w-100 h2" style="top:100%;">
    66                  Track cover
    67                </figcaption>
    68              </figure>
    69            </div>
    70          </div>
    71        `
    72      }
    73  
    74      function renderHelp (helpText) {
    75        if (typeof helpText === 'string') {
    76          return html`<p class="lh-copy f5">${helpText}</p>`
    77        }
    78        return helpText
    79      }
    80  
    81      function renderErrors (inputName) {
    82        if (errors[inputName] && !pristine[inputName]) {
    83          return html`
    84            <p class="lh-copy f5 red">
    85              ${errors[inputName].message}
    86            </p>
    87          `
    88        }
    89      }
    90    }
    91  }