tachybase_todo/packages/client/src/schema-component/antd/kanban/Kanban.Card.tsx

73 lines
2.3 KiB
TypeScript
Raw Normal View History

2022-03-11 21:31:34 +08:00
import { css } from '@emotion/css';
2022-03-11 09:19:53 +08:00
import { FormLayout } from '@formily/antd';
import { observer, RecursionField, useFieldSchema } from '@formily/react';
import { Card } from 'antd';
import React, { useContext, useState } from 'react';
import { ActionContext, BlockItem } from '..';
import { DndContext } from '../..';
import { RecordProvider } from '../../../record-provider';
import { SchemaComponentOptions } from '../../core/SchemaComponentOptions';
import { KanbanCardContext } from './context';
const FormItem = observer((props) => {
return <BlockItem {...props} />;
});
export const KanbanCard: any = observer((props: any) => {
const { setDisableCardDrag, cardViewerSchema, card, cardField, columnIndex, cardIndex } =
useContext(KanbanCardContext);
const fieldSchema = useFieldSchema();
const [visible, setVisible] = useState(false);
return (
<>
<Card
onClick={(e) => {
setVisible(true);
}}
bordered={false}
hoverable
style={{ cursor: 'pointer', overflow: 'hidden' }}
2022-03-11 09:19:53 +08:00
bodyStyle={{ paddingBottom: 0 }}
2022-03-11 21:31:34 +08:00
className={css`
.ant-description-input {
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
}
.ant-description-textarea {
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
}
`}
>
<SchemaComponentOptions components={{}}>
<DndContext
onDragStart={() => {
setDisableCardDrag(true);
}}
onDragEnd={() => {
setDisableCardDrag(false);
}}
>
2022-03-11 09:19:53 +08:00
<FormLayout layout={'vertical'}>
<RecursionField
basePath={cardField.address.concat(`${columnIndex}.cards.${cardIndex}`)}
schema={fieldSchema}
onlyRenderProperties
/>
</FormLayout>
</DndContext>
</SchemaComponentOptions>
</Card>
{cardViewerSchema && (
<ActionContext.Provider value={{ openMode: 'drawer', visible, setVisible }}>
<RecordProvider record={card}>
<RecursionField name={cardViewerSchema.name} schema={cardViewerSchema} onlyRenderProperties />
</RecordProvider>
</ActionContext.Provider>
)}
</>
);
});