feat: metadata detail editor (#6562)

* feat: metadata detail editor

* feat: update code

* feat: update code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/metadata/metadata-view/components/detail-editor/index.js

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { CellType } from '../../_basic';
+import CheckboxEditor from './checkbox-editor';
+import TextEditor from './text-editor';
+import NumberEditor from './number-editor';
+import SingleSelectEditor from './single-select-editor';
+import CollaboratorEditor from './collaborator-editor';
+import DateEditor from './date-editor';
+import { lang } from '../../../../utils/constants';
+
+import './index.css';
+
+const DetailEditor = ({ field, onChange: onChangeAPI, ...props }) => {
+  const onChange = useCallback((newValue) => {
+    onChangeAPI(field.key, newValue);
+  }, [field, onChangeAPI]);
+
+
+  switch (field.type) {
+    case CellType.CHECKBOX: {
+      return (<CheckboxEditor { ...props } field={field} onChange={onChange} />);
+    }
+    case CellType.TEXT: {
+      return (<TextEditor { ...props } field={field} onChange={onChange} />);
+    }
+    case CellType.NUMBER: {
+      return (<NumberEditor { ...props } field={field} onChange={onChange} />);
+    }
+    case CellType.DATE: {
+      return (<DateEditor { ...props } field={field} onChange={onChange} lang={lang} />);
+    }
+    case CellType.SINGLE_SELECT: {
+      return (<SingleSelectEditor { ...props } field={field} onChange={onChange} />);
+    }
+    case CellType.COLLABORATOR: {
+      return (<CollaboratorEditor { ...props } field={field} onChange={onChange} />);
+    }
+    default: {
+      return null;
+    }
+  }
+
+
+};
+
+DetailEditor.propTypes = {
+  field: PropTypes.object.isRequired,
+};
+
+export default DetailEditor;