tachybase_todo/packages/client/src/schemas/kanban/DesignableBar.tsx
chenos 479f64f197
feat: support i18n ()
* feat: i18next

* multi language data

* feat(client): locale support

* en-US for collections

* us-EN for routes

* en-US for routes

* en-US for attachments

* feat: partial translations

* translation

* add AntdConfigProvider

* translation

* translation

* feat: translation

* feat: add translation

* fix: improve translation

* feat: improve translation

* fix: SyntaxError: Unexpected token ) in JSON at position

* typo

* feat: improve translation

* feat: improve translation

* feat: language settings can be saved on the server

* feat: lang option of init cli

* demo translation

* typo

* change address field to textarea

* address data

* feat: chart translation

* feat: chart translation

* improve translation

* signin,signup,signout...

Co-authored-by: Zhou <zhou.working@gmail.com>
2021-11-08 19:32:59 +08:00

148 lines
5.1 KiB
TypeScript

import React, { useContext, useMemo, useRef, useState } from 'react';
import { createForm } from '@formily/core';
import {
SchemaOptionsContext,
Schema,
useFieldSchema,
observer,
SchemaExpressionScopeContext,
FormProvider,
ISchema,
useField,
useForm,
RecursionField,
} from '@formily/react';
import {
useSchemaPath,
SchemaField,
useDesignable,
removeSchema,
updateSchema,
} from '../';
import get from 'lodash/get';
import { Button, Dropdown, Menu, Modal, Space } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames';
import { FormDialog, FormLayout } from '@formily/antd';
import './style.less';
import AddNew from '../add-new';
import { DraggableBlockContext } from '../../components/drag-and-drop';
import { isGridRowOrCol } from '../grid';
import constate from 'constate';
import { useEffect } from 'react';
import { uid } from '@formily/shared';
import { getSchemaPath } from '../../components/schema-renderer';
import { useCollection, useCollectionContext } from '../../constate';
import { useTable } from '../table';
import { DragHandle } from '../../components/Sortable';
import { fieldsToFilterColumns } from '../calendar';
import { useTranslation } from 'react-i18next';
import { useCompile } from '../../hooks/useCompile';
export const DesignableBar = observer((props) => {
const field = useField();
const { t } = useTranslation();
const { designable, schema, refresh, deepRemove } = useDesignable();
const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext);
const { props: tableProps } = useTable();
const collectionName =
field.componentProps?.collectionName || tableProps?.collectionName;
const { collection, fields } = useCollection({ collectionName });
const compile = useCompile();
return (
<div className={cls('designable-bar', { active: visible })}>
<div className={'designable-info'}>
{compile(collection?.title || collection?.name)}
</div>
<span
onClick={(e) => {
e.stopPropagation();
}}
className={cls('designable-bar-actions', { active: visible })}
>
<Space size={2}>
<AddNew.CardItem defaultAction={'insertAfter'} ghost />
<DragHandle />
<Dropdown
trigger={['hover']}
// visible={visible}
// onVisibleChange={(visible) => {
// setVisible(visible);
// }}
overlay={
<Menu>
{/* <Menu.Item
key={'update'}
onClick={() => {
field.readPretty = true;
}}
>
编辑表单配置
</Menu.Item> */}
<Menu.Item
key={'defaultFilter'}
onClick={async () => {
const { defaultFilter } = await FormDialog(
t('Set the data scope'),
() => {
return (
<FormLayout layout={'vertical'}>
<SchemaField
schema={{
type: 'object',
properties: {
defaultFilter: {
type: 'object',
'x-component': 'Filter',
properties: fieldsToFilterColumns(fields),
},
},
}}
/>
</FormLayout>
);
},
).open({
initialValues: {
defaultFilter:
field?.componentProps?.defaultFilter || {},
},
});
schema['x-component-props']['defaultFilter'] =
defaultFilter;
field.componentProps.defaultFilter = defaultFilter;
await updateSchema(schema);
}}
>
{t('Set the data scope')}
</Menu.Item>
<Menu.Divider />
<Menu.Item
key={'delete'}
onClick={async () => {
Modal.confirm({
title: t('Delete block'),
content: t('Are you sure you want to delete it?'),
onOk: async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
await removeSchema(last);
},
});
}}
>
{t('Delete')}
</Menu.Item>
</Menu>
}
>
<MenuOutlined />
</Dropdown>
</Space>
</span>
</div>
);
});