cx-chat 0.0.1

package/src/views/base/memory/modal/submit-modal.tsx

@@ -0,0 +1,134 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
+import { Form } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import { CxForm, CxFormItem, CxInput, CxModal, useCxModal } from '@cx-ui'
+import { addMemoryAPI, editMemoryAPI } from '@api/base/memory'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+
+type OpenPayload = {
+  opeType?: 'add' | 'edit'
+  opeId?: string | number
+  data?: any
+}
+
+interface MemoryModalProps {
+  onCancel?: () => void
+  onOk?: (values: any) => void | Promise<void>
+}
+
+const SubmitModal = forwardRef<
+  { close: () => void; open: (payload?: OpenPayload) => void },
+  MemoryModalProps
+>(function SubmitModal(_props, ref) {
+  const { onCancel, onOk } = _props
+  const [opeId, setOpeId] = useState<string | number | undefined>()
+  const { t } = useTranslation()
+
+  const modal = useCxModal({
+    onOpen: (payload) => {
+      const type = payload?.opeType ?? 'add'
+      setOpeId(payload?.opeId)
+      form.resetFields()
+      if (type === 'edit' && payload?.data) {
+        form.setFieldsValue({
+          title: payload.data.title,
+          content: payload.data.content,
+        })
+      }
+    },
+    onClose: () => {
+      setOpeId(undefined)
+      onCancel?.()
+    },
+  })
+
+  const { isOpen, close: hideModal, form, opeType } = modal
+  const { submitting, handleSubmit } = useModalSubmit()
+
+  const title = useMemo(
+    () => (opeType === 'add' ? t('base.memory.add') : t('base.memory.edit')),
+    [opeType, t],
+  )
+
+  const close = () => {
+    hideModal()
+    form.resetFields()
+    setOpeId(undefined)
+    onCancel?.()
+  }
+
+  const onOkClick = async () => {
+    if (opeType === 'detail') return
+    const result = await handleSubmit({
+      opeType,
+      validate: () => form.validateFields(),
+      addAPI: addMemoryAPI,
+      editAPI: editMemoryAPI,
+      transform: (values) => ({
+        ...(opeType === 'edit' ? { id: opeId } : {}),
+        title: values.title,
+        content: values.content,
+      }),
+      onSuccess: async ({ payload }) => {
+        await onOk?.(payload)
+      },
+    })
+    if (result) close()
+  }
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  return (
+    <CxModal
+      isOpen={isOpen}
+      modalConfig={{ width: 560 }}
+      opeType={opeType}
+      submitting={submitting}
+      title={title}
+      onClose={close}
+      onSubmit={onOkClick}
+    >
+      <CxForm
+        form={form}
+        layout="vertical"
+        initialValues={{ title: '', content: '' }}>
+        <CxFormItem
+          label={t('base.memory.column_title')}
+          name="title"
+          rules={[
+            { required: true, message: t('base.memory.title_placeholder') },
+            { whitespace: true, message: t('base.memory.title_placeholder') },
+          ]}>
+          <CxInput placeholder={t('base.memory.title_placeholder')} />
+        </CxFormItem>
+        <CxFormItem
+          label={t('base.memory.column_content')}
+          name="content"
+          rules={[
+            { required: true, message: t('base.memory.content_placeholder') },
+            { whitespace: true, message: t('base.memory.content_placeholder') },
+          ]}>
+          <CxInput.Textarea
+            rows={6}
+            placeholder={t('base.memory.content_placeholder')}
+          />
+        </CxFormItem>
+      </CxForm>
+    </CxModal>
+  )
+})
+
+export default SubmitModal