From b68a0c0380ebf4753e2afadb8822d8fe3114a5ab Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Wed, 3 Apr 2019 19:27:02 +0800
Subject: [PATCH] Make item optional

---
 packages/client/src/crud/CRUDForm.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/crud/CRUDForm.tsx b/packages/client/src/crud/CRUDForm.tsx
index 3542248..0ee1264 100644
--- a/packages/client/src/crud/CRUDForm.tsx
+++ b/packages/client/src/crud/CRUDForm.tsx
@@ -18,19 +18,21 @@ export interface ICRUDFieldProps<T> {
 
 export type TCRUDErrors<T> = Partial<Record<keyof T & string, string>>
 
+export interface ICRUDField<T> {
+  Icon?: React.ComponentType
+  label: string
+  placeholder?: string
+  name: keyof T & string
+  type: TCRUDFieldType
+}
+
 export interface ICRUDFormProps<T> {
   errors: TCRUDErrors<T>
   id?: number
-  item: T
+  item?: T
   error: string
   submitText: string
-  fields: Array<{
-    Icon?: React.ComponentType
-    label: string
-    placeholder?: string
-    name: keyof T & string
-    type: TCRUDFieldType
-  }>
+  fields: Array<ICRUDField<T>>
 
   onSubmit: (t: T) => void
   onChange(params: ICRUDChangeParams<T>): void
@@ -73,14 +75,16 @@ export class CRUDForm<T> extends React.PureComponent<ICRUDFormProps<T>> {
   handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     const {onSubmit, item} = this.props
-    onSubmit(item)
+    if (item) {
+      onSubmit(item)
+    }
   }
   render() {
     const {fields, item} = this.props
     return (
       <form onSubmit={this.handleSubmit}>
         <p className='error'>{this.props.error}</p>
-        {fields.map(field => {
+        {!!item && fields.map(field => {
           const error = this.props.errors[field.name]
           const value = item[field.name]
           return (
@@ -90,6 +94,7 @@ export class CRUDForm<T> extends React.PureComponent<ICRUDFormProps<T>> {
               name={field.name}
               label={field.label}
               onChange={this.props.onChange}
+              placeholder={field.placeholder}
               error={error}
               Icon={field.Icon}
               value={String(value)}