import { useCallback, useMemo } from 'react'; import { useACLActionParamsContext, useBlockRequestContext, useCollectionFields, useDesignable, } from '@tachybase/client'; import { RecursionField, useField } from '@tachybase/schema'; import { Button } from 'antd'; import jsxRuntime from 'react/jsx-runtime'; import { useTranslation } from './locale'; import { styles } from './styles'; import { useComment } from './useComment'; export function CommentSubmit() { const field = useField(); const updateUI = useCallback( (content) => { field.setValue({ ...field.value, content }); }, [field], ); const { t } = useTranslation(); const { wrapSSR, componentCls, hashId } = styles(); const h = useMemo(() => { return field.value?.content?.trim().length > 0; }, [field.value]); const { resource, service } = useBlockRequestContext(); const onClick = useCallback(async () => { await resource.create({ values: field.value }); updateUI(''); service.refresh(); }, [resource, field, service, updateUI]); const { createAble } = useComment(); const acl = useACLActionParamsContext(); const { designable } = useDesignable(); const isHidden = !designable && (field?.data?.hidden || !acl); const fields = useCollectionFields(); const props = useMemo(() => { return fields.find((field) => field.name === 'content')?.uiSchema?.['x-component-props']; }, [fields]); return !createAble || isHidden ? null : wrapSSR( jsxRuntime.jsxs('div', { style: { marginTop: 10 }, className: `${componentCls} ${hashId}`, children: [ jsxRuntime.jsx(RecursionField, { basePath: field.address, name: 'content', schema: { type: 'string', 'x-component': 'MarkdownVditor', 'x-component-props': { ...props, onChange: (u) => { updateUI(u); }, }, 'x-read-pretty': false, 'x-read-only': false, name: 'content', }, }), jsxRuntime.jsx(Button, { disabled: !h, onClick, type: 'primary', style: { marginTop: 10 }, children: t('Comment'), }), ], }), ); }