Reviewed-on: daoyoucloud/tachybase#979 Co-authored-by: bai.zixv <bai.zixv@foxmail.com> Co-committed-by: bai.zixv <bai.zixv@foxmail.com>
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
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'),
|
|
}),
|
|
],
|
|
}),
|
|
);
|
|
}
|