Repository URL to install this package:
|
Version:
3.7.2 ▾
|
/**
* @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')
}
}