kantar-react-lib

Made with create-react-library

Install

npm install --save kantar-react-lib

Usage

import {
    Form,
    decoratorsForm,
    ButtonPosition
} from 'kantar-react-lib'

//imports from generetad http client
import { TaskCreateRequest, TaskStatusEnum } from '../../clients/client.generated'
import { Client } from '../../clients/client'


const { display, selectItems, hidden, textArea, required, regex } = decoratorsForm

export statusOptions_Table: any[] =
    [
        { text: 'Initial', value: '1' },
        { text: 'In progress', value: '2' },
        { text: 'Completed', value: '3' },
    ]

export class CreateModel extends TaskCreateRequest {

    @display('Task name')
    @required('Field {0} is required!')
    @regex(/^.{0,128}$/, 'Field {0} has maximum of 128 characters!')
    name: string = ''

    @display('Description')
    @textArea()
    @regex(/^.{0,256}$/, 'Field {0} has maximum of 256 characters!')
    description?: string | undefined = ''

    @display('Status')
    @selectItems('statusList')
    @required()
    status!: TaskStatusEnum;

    @hidden()
    statusList = statusOptions_Form
}


interface ICreateTask {
    afterSubmit: (m: any) => void
}

class CreateClient extends Client {
    request = this.apiTaskPost as any
}
const client = new CreateClient()

export const TaskCreateForm: React.FC<ICreateTask> = ({ afterSubmit }: ICreateTask) => {
    return (
        <Form<CreateModel>
            model={new CreateModel()}
            submitBtnLabel='Create'
            submitBtnPosition={ButtonPosition.Middle}
            submitClient={client}
            onSubmit={afterSubmit}
        />
    )
}

License

MIT © jitomanek