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 / ObserverForm.tsx
Size: Mime:
/**
 * @file @todo OBSERVERFORM + FORMSTATE
 * needs methods:
 *    - get
 *    - set
 */
import * as React from 'react'
import { ComponentClass } from 'react'
import { styled } from 'styleh-components'
import { resetInput } from '../../forms/deps'

// @note - alternatively, we could do this in render
//         but extending is always overriding this render
//         so we would have to override in a delay and that is worse
// @todo - almost done this, just finish...
function createAdapterStore() {
  const SubmitButton = styled.button
  const CancelButton = styled.button
  const Form = styled.form
  const Input = styled.input
  const ButtonGroup = styled.div

  const defaultObj = { ButtonGroup, SubmitButton, CancelButton, Form, Input }
  return Object.entries(defaultObj)
}

// may want this observable
export class OldObserverFormAdapter<Props = any> extends React.Component<
  Props
> {
  // === data ===
  // @todo !!!!! need to pluck the datas out or pass them down
  store = new Map(createAdapterStore())

  // @todo !!! this method needs to go 1 up to OneForm when this is done
  get isUsingOldInterface() {
    return this.store.size > 0
  }

  // render() {}

  // === gap ===

  // for compat, should remove this..........
  resetFormState = resetInput

  set onInputInit(onInputInitFunction: (...args: any) => void) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      class FormView extends ObserverForm {
        onInputInit = ${onInputInitFunction.toString()}
      }
    '''

    instead at _least_ use: '''
      class FormView extends ObserverForm {
        onPreFill = ${onInputInitFunction.toString()}
      }
    '''

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

    this.store.set('onPreFill', onInputInitFunction)
  }
  get onInputInit() {
    return this.store.get('onPreFill')
  }
  set onPrefil(onPrefillFunction: Function) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      class FormView extends ObserverForm {
        onPrefil = ${onPrefillFunction.toString()}
      }
    '''

    instead at _least_ use: '''
      class FormView extends ObserverForm {
        onPreFill = ${onPrefillFunction.toString()}
      }
    '''

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

    this.store.set('onPreFill', onPrefillFunction)
  }

  // === components ===

  set Form(Form: ComponentClass<any>) {
    // @todo - use templates for the header & footer to deprecate
    // just need to indent properly
    // @todo - use the arg to generate example, if needed & time
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      ObserverForm.Form = ${Form.constructor.name}
    '''

    instead use: '''
      import { ObservableForm, ObservableFormProps } from '@skava/forms'
      const renderForm = (props: ObservableFormProps) => <form {...props} />
      <ObservableForm renderForm={renderForm} />
    '''

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

    const StyledForm = styled(Form)
    this.store.set('Form', StyledForm)
  }
  get Form() {
    return this.store.get('Form')
  }

  set Input(Input: ComponentClass<any>) {
    // @note - the deprecated part is only the line affected
    //         because the consumer already knows their code
    //         and they will get warnings for all of the other lines...
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      class FormView extends ObserverForm {
        Input = ${Input.constructor.name}
      }
    '''

    instead use: '''
      import {
        OneFormState,
        ObservableInput,
        ObserverInputProps,
      } from '@skava/forms'

      const renderInput = (props: ObserverInputProps) => <input {...props} />

      const formState = new OneFormState().setInputsList([
        {
          type: 'password',
          renderInput,
        },
      ])

      <ObservableForm state={formState} />
    '''

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

    const StyledInput = styled(Input)
    this.store.set('Input', StyledInput)
  }
  get Input() {
    return this.store.get('Input')
  }

  set SubmitButton(SubmitButton: ComponentClass<any>) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      class FormView extends ObserverForm {
        SubmitButton = ${SubmitButton.constructor.name}
      }
    '''

    instead use: '''
      import { ObservableForm, FormRenderProps } from '@skava/forms'

      const renderButtonGroup = (props: FormRenderProps) => (
        <>
          <StyledSubmit onClick={props.onSubmit} />
          <StyledCancel onClick={myContainer.handleCancel} />
        </>
      )

      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const StyledSubmitButton = styled(SubmitButton)
    this.store.set('SubmitButton', StyledSubmitButton)
  }
  get SubmitButton() {
    return this.store.get('SubmitButton')
  }

  set CancelButton(CancelButton: ComponentClass<any>) {
    // @note completely duplicated from previous fn
    // this is for deprecated logs
    // does not need to be reusable
    // is temporary, to be removed
    // like tests, is a good example of when copy & pasting makes sense
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      class FormView extends ObserverForm {
        CancelButton = ${CancelButton.constructor.name}
      }
    '''

    instead use: '''
      import { ObservableForm, FormRenderProps } from '@skava/forms'

      const renderButtonGroup = (props: FormRenderProps) => (
        <>
          <StyledSubmit onClick={props.onSubmit} />
          <StyledCancel onClick={myContainer.handleCancel} />
        </>
      )

      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const StyledCancelButton = styled(CancelButton)
    this.store.set('CancelButton', StyledCancelButton)
  }
  get CancelButton() {
    return this.store.get('CancelButton')
  }

  // === properties ===

  set shouldResetFormOnUnmount(should: boolean) {
    console.error(`@deprecated [@skava/forms]
    THIS IS REMOVED: '''
      import { FormState } from '@skava/ui'
      class MyFormState extends FormState {
        shouldResetFormOnUnmount = ${should}
      }
    '''

    instead use: '''
      import { observer } from 'xmobx/mobx-react'
      import { ObservableForm, ObserverFormProps } from '@skava/forms'

      @observer
      class FormView extends React.Component<ObserverFormProps> {
        componentWillUnmount() {
          this.props.state.reset()
        }
      }
    '''

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

    this.store.set('shouldResetFormOnUnmount', should)
  }
  get shouldResetFormOnUnmount() {
    return this.store.get('shouldResetFormOnUnmount')
  }

  set defaultSubmitButtonLabel(label: string) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      import { FormState } from '@skava/ui'
      class MyFormState extends FormState {
        defaultSubmitButtonLabel = ${label}
      }
    '''

    instead use: '''
      // styled
      import { Button } from '@skava/ui'
      import { styled } from 'styleh-components'
      const StyledSubmit = styled(Button).attrs({ children: ${label} }) \`\`

      // render props
      import { ObservableForm, FormRenderProps } from '@skava/forms'
      const renderButtonGroup = (props: FormRenderProps) =>
        <StyledSubmit onClick={props.onSubmit} />

      // where it is rendered
      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const SubmitButton = this.store
      .get('SubmitButton')
      .attrs({ children: label })
    this.store.set('SubmitButton', SubmitButton)
    this.store.set('defaultSubmitButtonLabel', label)
  }
  get defaultSubmitButtonLabel() {
    return this.store.get('defaultSubmitButtonLabel')
  }

  set defaultCancelButtonLabel(label: string) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      import { FormState } from '@skava/ui'
      class MyFormState extends FormState {
        defaultCancelButtonLabel = ${label}
      }
    '''

    instead use: '''
      // styled
      import { Button } from '@skava/ui'
      import { styled } from 'styleh-components'
      const StyledCancel = styled(Button).attrs({ children: ${label} }) \`\`

      // render props
      import { ObservableForm, FormRenderProps } from '@skava/forms'
      const renderButtonGroup = (props: FormRenderProps) =>
        <StyledCancel onClick={props.onSubmit} />

      // where it is rendered
      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const SubmitButton = this.store
      .get('SubmitButton')
      .attrs({ children: label })
    this.store.set('SubmitButton', SubmitButton)
    this.store.set('defaultCancelButtonLabel', label)
  }
  get defaultCancelButtonLabel() {
    return this.store.get('defaultCancelButtonLabel')
  }

  set wording(wording: { [key: string]: any }) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      import { FormState } from '@skava/ui'
      class MyFormState extends FormState {
        wording = ${JSON.stringify(wording, undefined, 2)}
      }
    '''

    instead use: '''
      // wording in the components that use them...
      // in particular, the styled static components
    '''

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

    this.store.set('wording', wording)
  }
  get wording() {
    return this.store.get('wording')
  }

  set isSubmitButtonNeeded(isSubmitButtonNeeded: boolean) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      import { FormState } from '@skava/ui'
      class MyFormState extends FormState {
        isSubmitButtonNeeded = ${isSubmitButtonNeeded}
      }
    '''

    instead use: '''
      import { ObservableForm, FormRenderProps } from '@skava/forms'
      const renderButtonGroup = (props: FormRenderProps) => <>no buttons even!</>
      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const SubmitButton = this.store
      .get('SubmitButton')
      .attrs({ hidden: isSubmitButtonNeeded })
    this.store.set('SubmitButton', SubmitButton)
    this.store.set('isSubmitButtonNeeded', isSubmitButtonNeeded)
  }
  get isSubmitButtonNeeded() {
    return this.store.get('isSubmitButtonNeeded')
  }

  set isCancelButtonNeeded(isCancelButtonNeeded: boolean) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      import { FormState } from '@skava/ui'
      class MyFormState extends FormState {
        isCancelButtonNeeded = ${isCancelButtonNeeded}
      }
    '''

    instead use: '''
      import { ObservableForm, FormRenderProps } from '@skava/forms'
      const renderButtonGroup = (props: FormRenderProps) => <>no buttons even!</>
      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const CancelButton = this.store
      .get('CancelButton')
      .attrs({ hidden: isCancelButtonNeeded })
    this.store.set('CancelButton', CancelButton)
    this.store.set('isCancelButtonNeeded', isCancelButtonNeeded)
  }
  get isCancelButtonNeeded() {
    return this.store.get('isCancelButtonNeeded')
  }

  set handleCancel(handleCancel: (...args: any[]) => void) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      import { FormState } from '@skava/ui'
      class MyFormState extends FormState {
        handleCancel = ${handleCancel.toString()}
      }
    '''

    instead use: '''
      // in the container...
      const handleCancel = (event?: MouseEvent<HTMLButtonElement>) => {
        ${handleCancel.toString()}
      }

      // render props
      import { Button } from '@skava/ui'
      import { FormRenderProps } from '@skava/forms'
      const renderButtonGroup = (props: FormRenderProps) =>
        <Button onCancel={handleCancel}

      // where it is rendered
      import { ObservableForm } from '@skava/forms'
      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const CancelButton = this.store
      .get('CancelButton')
      .attrs({ onClick: handleCancel })
    this.store.set('CancelButton', CancelButton)

    this.store.set('handleCancel', handleCancel)
  }
  get handleCancel() {
    return this.store.get('handleCancel')
  }

  set SubmitCustomClass(className: string) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      // styles.ts
      const styles = styled.todo \`
        .${className} {
          color: blue;
        }
      \`

      // FormView.tsx
      import { ObserverForm } from '@skava/ui'
      import styles from './styles'

      @styles
      class FormView extends ObserverForm {
        SubmitCustomClass = ${className}
      }
    '''

    instead use: '''
      // styled
      import { styled } from 'styleh-components'
      import { Button } from '@skava/ui'
      const StyledSubmit = styled(Button) \` color: blue; \`

      // render props
      import { FormRenderProps } from '@skava/forms'
      const renderButtonGroup = (props: FormRenderProps) => <StyledSubmit />

      // where it is rendered
      import { ObservableForm } from '@skava/forms'
      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const SubmitButton = this.store.get('SubmitButton').attrs({ className })
    this.store.set('SubmitButton', SubmitButton)
    this.store.set('SubmitCustomClass', className)
  }
  get SubmitCustomClass() {
    return this.store.get('SubmitCustomClass')
  }

  set CancelCustomClass(className: string) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      // styles.ts
      const styles = styled.todo \`
        .${className} {
          color: grey;
        }
      \`

      // FormView.tsx
      import { ObserverForm } from '@skava/ui'
      import styles from './styles'

      @styles
      class FormView extends ObserverForm {
        CancelCustomClass = ${className}
      }
    '''

    instead use: '''
      // styled
      import { styled } from 'styleh-components'
      import { Button } from '@skava/ui'
      const StyledCancel = styled(Button) \` color: grey; \`

      // render props
      import { FormRenderProps } from '@skava/forms'
      const renderButtonGroup = (props: FormRenderProps) => <StyledCancel />

      // where it is rendered
      import { ObservableForm } from '@skava/forms'
      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const CancelButton = this.store.get('CancelButton').attrs({ className })
    this.store.set('CancelButton', CancelButton)
    this.store.set('CancelCustomClass', className)
  }
  get CancelCustomClass() {
    return this.store.get('CancelCustomClass')
  }

  set ButtonGroupCustomClass(className: string) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      // styles.ts
      const styles = styled.todo \`
        .${className} {
          border: 10px solid purple;
        }
      \`

      // FormView.tsx
      import { ObserverForm } from '@skava/ui'
      import styles from './styles'

      @styles
      class FormView extends ObserverForm {
        ButtonGroupCustomClass = ${className}
      }
    '''

    instead use: '''
      // styled
      import { styled } from 'styleh-components'
      import { Button } from '@skava/ui'
      const StyledCancel = styled(Button) \` color: grey; \`
      const StyledSubmit = styled(Button) \` color: blue; \`
      const StyledButtonGroup = styled.div \` border: 10px solid purple; \`

      // render props
      import { FormRenderProps } from '@skava/forms'
      const renderButtonGroup = (props: FormRenderProps) =>
        <StyledButtonGroup>
          <StyledSubmit onClick={props.onSubmit} />
          <StyledCancel onClick={myContainer.handleCancel} />
        </StyledButtonGroup>

      // where it is rendered
      import { ObservableForm } from '@skava/forms'
      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const ButtonGroup = this.store.get('ButtonGroup').attrs({ className })
    this.store.set('ButtonGroup', ButtonGroup)
    this.store.set('ButtonGroupCustomClass', className)
  }
  get ButtonGroupCustomClass() {
    return this.store.get('ButtonGroupCustomClass')
  }

  set classList(className: string) {
    console.error(`
      @deprecated [@skava/forms]

      __hopefully this is not used anywhere__

      this will be removed in the next major release: '''
        class FormView extends ObserverForm {
          classList = ${className}
        }
      '''

      for code examples + live demo links + docs on @skava/form 3.0 release:
      https://bitbucket.org/skava-admin/mono/wiki/forms-3.0
    `)
    this.store.set('classList', className)
  }
  get classList() {
    return this.store.get('classList')
  }

  set submitDataQa(qa: string) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      class FormView extends ObserverForm {
        cancelDataQa = ${qa}
      }
    '''

    instead use: '''
      // styled
      import { styled } from 'styleh-components'
      import { Button } from '@skava/ui'
      const StyledSubmit = styled(Button).attrs({ 'data-qa': ${qa} }) \`\`

      // render props
      import { FormRenderProps } from '@skava/forms'
      const renderButtonGroup = (props: FormRenderProps) => <StyledSubmit />

      // where it is rendered
      import { ObservableForm } from '@skava/forms'
      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const SubmitButton = this.store.get('SubmitButton').attrs({ 'data-qa': qa })
    this.store.set('SubmitButton', SubmitButton)
    this.store.set('submitDataQa', qa)
  }
  get submitDataQa() {
    return this.store.get('submitDataQa')
  }
  set cancelDataQa(qa: string) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      class FormView extends ObserverForm {
        cancelDataQa = ${qa}
      }
    '''

    instead use: '''
      // styled
      import { styled } from 'styleh-components'
      import { Button } from '@skava/ui'
      const StyledCancel = styled(Button).attrs({ 'data-qa': ${qa} }) \`\`

      // render props
      import { FormRenderProps } from '@skava/forms'
      const renderButtonGroup = (props: FormRenderProps) => <StyledCancel />

      // where it is rendered
      import { ObservableForm } from '@skava/forms'
      <ObservableForm renderButtonGroup={renderButtonGroup} />
    '''

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

    const CancelButton = this.store.get('CancelButton').attrs({ 'data-qa': qa })
    this.store.set('CancelButton', CancelButton)
    this.store.set('cancelDataQa', qa)
  }
  get cancelDataQa() {
    return this.store.get('cancelDataQa')
  }

  set formId(id: string) {
    console.warn(`@deprecated [@skava/forms]
    this will be removed in the next major release: '''
      class FormView extends ObserverForm {
        formId = ${id}
      }
    '''

    instead use: '''
      import { ObservableForm, FormRenderProps } from '@skava/forms'
      const renderForm = (props: FormRenderProps) => <form id={${id}} />
      <ObservableForm renderForm={renderButtonGroup} />
    '''

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

    const Form = this.store.get('Form').attrs({ id })
    this.store.set('Form', Form)
    this.store.set('formId', id)
  }
  get formId() {
    return this.store.get('formId')
  }
}