tachybase_todo/packages/plugins/@tachybase/plugin-comments/src/client/CommentSubmit.ts
bai.zixv 236c308d23 refactor: @hera/plugin-core, departments-plugin (#979)
Reviewed-on: daoyoucloud/tachybase#979
Co-authored-by: bai.zixv <bai.zixv@foxmail.com>
Co-committed-by: bai.zixv <bai.zixv@foxmail.com>
2024-05-28 10:43:58 +08:00

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'),
}),
],
}),
);
}