Fix SiteForm properties

packages/client/src/crud/CRUDActions.ts

@@ -9,6 +9,12 @@ import {TCRUDMethod} from './TCRUDMethod'
 type TAction <T, ActionType extends string, Method extends TCRUDMethod> =
   TFilter<TCRUDAction<T, ActionType> , {method: Method, status: 'pending'}>
 
+export interface ICRUDChangeParams<T> {
+  id?: number
+  key: keyof T & string
+  value: string
+}
+
 export class SaveActionCreator<
   T extends IRoutes,
   Route extends keyof T & string,
@@ -166,11 +172,8 @@ export class FormActionCreator<T, ActionType extends string> {
     }
   }
 
-  change = (params: {
-    id?: number,
-    key: keyof T,
-    value: string
-  }): TCRUDChangeAction<T, ActionType> => {
+  change = (params: ICRUDChangeParams<T>)
+  : TCRUDChangeAction<T, ActionType> => {
     return {
       payload: params,
       type: this.actionType,

packages/client/src/crud/CRUDForm.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import {Control, Field, Label, Icon, Input} from 'bloomer'
+import {ICRUDChangeParams} from './CRUDActions'
 
 export type TCRUDFieldType = 'text' | 'password' | 'number' | 'email' | 'tel'
 
 export interface ICRUDFieldProps<T> {
-  onChange<K extends keyof T>(key: K, value: string): void
+  id?: number
+  onChange<K extends keyof T>(params: ICRUDChangeParams<T>): void
   Icon?: React.ComponentType
   error?: string
   label: string
@@ -14,8 +16,11 @@ export interface ICRUDFieldProps<T> {
   value: string
 }
 
+export type TCRUDErrors<T> = Partial<Record<keyof T & string, string>>
+
 export interface ICRUDFormProps<T> {
-  errors: Partial<Record<keyof T & string, string>>
+  errors: TCRUDErrors<T>
+  id?: number
   item: T
   error: string
   submitText: string
@@ -28,14 +33,18 @@ export interface ICRUDFormProps<T> {
   }>
 
   onSubmit: (t: T) => void
-  onChange<K extends keyof T>(key: K, value: string): void
+  onChange(params: ICRUDChangeParams<T>): void
 }
 
 export class CRUDField<T> extends React.PureComponent<ICRUDFieldProps<T>> {
   handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const {onChange} = this.props
     const {value} = e.target
-    onChange(this.props.name, value)
+    onChange({
+      id: this.props.id,
+      key: this.props.name,
+      value,
+    })
   }
   render() {
     const {label, name, value, placeholder} = this.props
@@ -76,6 +85,7 @@ export class CRUDForm<T> extends React.PureComponent<ICRUDFormProps<T>> {
           const value = item[field.name]
           return (
             <CRUDField<T>
+              id={this.props.id}
               key={field.name}
               name={field.name}
               label={field.label}

packages/client/src/crud/CRUDReducer.ts

@@ -19,7 +19,7 @@ export interface ICRUDState<T extends ICRUDEntity> {
   readonly form: ICRUDForm<T>
 }
 
-interface ICRUDForm<T extends ICRUDEntity> {
+export interface ICRUDForm<T extends ICRUDEntity> {
   readonly create: {
     readonly item: Pick<T, Exclude<keyof T, 'id'>>,
     readonly errors: Partial<Record<keyof T, string>>

packages/client/src/crud/index.ts

@@ -1,4 +1,5 @@
 export * from './CRUDActions'
+export * from './CRUDForm'
 export * from './CRUDList'
 export * from './CRUDReducer'
 export * from './TCRUDAction'