Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/forms / src / new-forms / OneForm / adapters / ObserverInput.tsx
Size: Mime:
/**
 * @file @TODO !!! THIS IS NOT OBSERVER INPUT, THIS IS INPUTSTATE !!!
 * ^ PROBABLY WILL NEED OBSERVERINPUT + INPUTSTATE
 */
import { defaultRenderWrap } from '../../inputs'

/**
 *
 * most of the old forms is done in ObserverForm...
 *
 * @todo create InputState & add?
 * - updateFocused
 * - validateInput
 * - setValue
 * - getValue
 * - setValidationType
 * - setIsValidInput
 * - disable
 * - enable
 * - invalid
 * - valid
 * - select
 * - unselect
 * - setIsSelected
 * - setInputReference
 * - setProps
 */
export class OldInputConfigAdapter {
  // may want to adapt to new form plugin names
  // type: string

  store = new Map()
  renderInputWrap?: any
  // @todo !!! ui-component help for adapting this mini piece
  // ^ as in the TODO file
  animatePlaceholder?: boolean
  // onBlur?: (...args: any) => void
  // onFocus?: (...args: any) => void
  // on...?: (...args: any) => void
  // ariaLabel?: string
  /** does not make much sense, maybe it is passthrough? @todo search & see */
  // icon?: { [key: string]: any }

  // => pass prop
  set wrapperClassName(className: string) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      const inputsList = [
        {
          wrapperClassName: ${className},
        },
      ]
    '''

    instead use: '''
      const inputsList = [
        {
          // or, you will not need this
          // because there is a plugin for it already prestyled!
          //
          // check the link on the list of existing plugins
          // and how to quickly make your own
          renderInputWrap: renderWrap,
        },
      ]
    '''

    for code examples + live demo links + docs on @skava/form 3.0 release:
    https://bitbucket.org/skava-admin/mono/wiki/forms-3.0
    `)

    const renderWrap = props => defaultRenderWrap({ ...props, className })

    this.renderInputWrap = renderWrap
  }

  // => propertyName
  set name(name: string) {
    this.store.set('propertyName', name)
  }
  get name() {
    return this.store.get('propertyName')
  }

  // not sure we need to adapt the new way...
  set propertyName(propertyName: string) {
    this.store.set('propertyName', propertyName)
  }
  get propertyName() {
    return this.store.get('propertyName')
  }

  // @todo - dedupe
  // labelText?: string
  // label?: string

  set minLength(length: string | number) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      const inputsList = [
        {
          minLength: ${length},
          type: 'text',
          autocomplete: 'given name',
        },
      ]
    '''

    instead use: '''
      const inputsList = [
        {
          // you will not need this because the validation should be in plugins!
          // check the link on the list of existing plugins
          // and how to quickly make your own
          type: 'firstName',

          // in the urgent case you do
          // the docs on how to pass in a similar prop can be found in the docs page
          // note it is not recommended, please see if there is a better way
        },
      ]
    '''

    for code examples + live demo links + docs on @skava/form 3.0 release:
    https://bitbucket.org/skava-admin/mono/wiki/forms-3.0
    `)
  }
  set maxLength(length: string | number) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      const inputsList = [
        {
          maxLength: ${length},
          type: 'text',
          autocomplete: 'given name',
        },
      ]
    '''

    instead use: '''
      const inputsList = [
        {
          // you will not need this because the validation should be in plugins!
          // check the link on the list of existing plugins
          // and how to quickly make your own
          type: 'firstName',

          // in the urgent case you do
          // the docs on how to pass in a similar prop can be found in the docs page
          // note it is not recommended, please see if there is a better way
        },
      ]
    '''

    for code examples + live demo links + docs on @skava/form 3.0 release:
    https://bitbucket.org/skava-admin/mono/wiki/forms-3.0
    `)
  }

  /**
   * @todo we may need to map all of the validations here...
   */
  set validationType(validationType: string) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      const inputsList = [
        {
          validationType: ${validationType},
          type: 'text',
          autocomplete: 'given name',
        },
      ]
    '''

    instead use: '''
      // example plugin, see the docs for more
      class TelephonePlugin extends React.Component<InputProps> {
        static isSatisfiedByProps(props: { type: string }): boolean {
          return ['telephone'].includes(props.type)
        }
        static defaultState = {
          propertyName: 'telephone',
          label: 'Phone',
          validator: (inputState: InputState) =>
            isValidTelephone(inputState.value as string),
        }
        static defaultProps = {
          minLength: 4,
          required: true,
          placeholder: '1250',
          pattern: '[+()0-9]+',
          type: 'tel',
          autoComplete: 'tel',
        }

        render() {
          // you can easily compose plugins since they are just components :)
          return <ObserverInput {...this.props} />
        }
      }

      const inputsList = [
        {
          type: 'telephone',
        },
      ]

      <PluginsContext.Provider value={[ TelephonePlugin ]}>
        <PageOrFormAtAnyLevel />
      </PluginsContext.Provider>
    '''

    for code examples + live demo links + docs on @skava/form 3.0 release:
    https://bitbucket.org/skava-admin/mono/wiki/forms-3.0
    `)
  }

  set errorMessageFor(errorMessageFor: string) {
    console.warn(`@deprecated [@skava/forms]

    @see the log for validationType (which is always hand in hand with 'validationType')

    this will be removed in the next major release: '''
      const inputsList = [
        {
          errorMessageFor: ${errorMessageFor},
          type: 'text',
        },
      ]
    '''

    instead use: '''
      // example plugin, see the docs for more
      class EhPlugin extends React.Component<InputProps> {
        static isSatisfiedByProps(props: { type: string }): boolean {
          return ['eh'].includes(props.type)
        }
        static defaultState = {
          propertyName: 'example',
          label: 'Eh!',
          validator: (inputState: InputState) => {
            // !!!!! note this stuff here !!!!!!
            if (isValidTelephone(inputState.value)) {
              return true
            } else {
              // using this, can customize the error message to the feature
              return 'error message!'
            }
          }
        }
        render() {
          return <ObserverInput {...this.props} />
        }
      }

      const inputsList = [
        {
          type: 'eh',
        },
      ]
    '''

    for code examples + live demo links + docs on @skava/form 3.0 release:
    https://bitbucket.org/skava-admin/mono/wiki/forms-3.0
    `)
  }

  set qa(qa: string) {
    this.dataQa = qa
  }
  set dataQa(qa: string) {
    console.warn(`@deprecated [@skava/forms]

    @see the log for validationType (which is always hand in hand with 'validationType')

    this will be removed in the next major release: '''
      const inputsList = [
        {
          qa: ${qa},
          type: 'text',
        },
      ]
    '''

    instead use: '''
      // example plugin, see the docs for more
      class EhPlugin extends React.Component<InputProps> {
        static isSatisfiedByProps(props: { type: string }): boolean {
          return ['eh'].includes(props.type)
        }
        static defaultState = {
          propertyName: 'example',
          label: 'Eh!',
          validator: (inputState: InputState) => {
            // !!!!! note this stuff here !!!!!!
            if (isValidTelephone(inputState.value)) {
              return true
            } else {
              // using this, can customize the error message to the feature
              return 'error message!'
            }
          }
        }
        render() {
          return <ObserverInput {...this.props} />
        }
      }

      const inputsList = [
        {
          type: 'eh',
        },
      ]
    '''

    for code examples + live demo links + docs on @skava/form 3.0 release:
    https://bitbucket.org/skava-admin/mono/wiki/forms-3.0
    `)

    // putting it here, may need to autocomplete
    this['data-qa'] = qa
  }

  autoComplete?: string
  set autocomplete(autocomplete: string) {
    this.autoComplete = autocomplete
  }
}