import { Form, Input} from "antd"

export const EditableCell = ({
  editing,
  record,
  dataIndex,
  input,
  isRequired,
  title,
  formItemClass,
  formItemRules,
  children,
  initialValue,
}) => {

  const inputNode = input ?? <Input/>
  const rules = formItemRules ?? [{
      required: isRequired,
      message: `Please Input ${title}!`,
    }]

  const editor = <Form.Item
    name={dataIndex}
    style={{margin:0}}
    className={formItemClass}
    rules={rules}
    initialValue={initialValue}>
    {inputNode}
  </Form.Item>

  const tdStyle = editing 
  ? { padding:0 }
  : null

  return (<td style={tdStyle}>
      {editing ? editor: children}
    </td>)
}