mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 04:27:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: support attachmentURL (#5313)

Browse Source 
* refactor: support  attachmentURL

* refactor: support attachment field

* fix: bug

* refactor: attachment url field

* fix: bug

* fix: bug

* fix: merge bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: kanban appends

* fix: action export

* fix: action import

* fix: test

* fix: bug

* fix(client): fix file type check logic

* fix(client): fix image previewer by file type

* fix(client): fix null file type caused error in matching

* fix(client): fix thumbnail data

* refactor: datetime

* test: fix test

* fix(client): fix preview based on file type when url contains search part

* refactor: remote select

* fix: test

* fix: bug

---------

Co-authored-by: mytharcher <mytharcher@gmail.com>
This commit is contained in:
Katherine 2024-10-11 20:15:55 +08:00 committed by GitHub
parent 664eb3df24
commit 15e05d5a2c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 297 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/client/package.json
View File

@ -49,6 +49,7 @@
"markdown-it-highlightjs": "3.3.1",
"mathjs": "^10.6.0",
"mermaid": "9.4.3",
"mime": "^4.0.4",
"mime-match": "^1.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-drag-listview": "^0.1.9",

2
packages/core/client/src/collection-manager/interfaces/datetime.ts
View File

@ -15,7 +15,7 @@ export class DatetimeFieldInterface extends CollectionFieldInterface {
type = 'object';
group = 'datetime';
order = 1;
title = '{{t("Datetime(with time zone)")}}';
title = '{{t("Datetime (with time zone)")}}';
sortable = true;
default = {
type: 'date',

2
packages/core/client/src/collection-manager/interfaces/datetimeNoTz.ts
View File

@ -15,7 +15,7 @@ export class DatetimeNoTzFieldInterface extends CollectionFieldInterface {
type = 'object';
group = 'datetime';
order = 2;
title = '{{t("Datetime(without time zone)")}}';
title = '{{t("Datetime (without time zone)")}}';
sortable = true;
default = {
type: 'datetimeNoTz',

4
packages/core/client/src/filter-provider/__tests__/utiles.test.ts
View File

@ -166,9 +166,9 @@ describe('transformToFilter', () => {
const getCollectionJoinField = vi.fn((name: string) => {
if (name === `${collectionName}.field1`) return {};
if (name === `${collectionName}.field2`) return {};
if (name === `${collectionName}.field3`) return { target: 'targetCollection', targetKey: 'id' };
if (name === `${collectionName}.field3`) return { target: 'targetCollection', targetKey: 'id', type: 'belongsTo' };
if (name === `${collectionName}.chinaRegion`)
return { target: 'chinaRegions', targetKey: 'code', interface: 'chinaRegion' };
return { target: 'chinaRegions', targetKey: 'code', interface: 'chinaRegion', type: 'belongsToMany' };
return {};
});

5
packages/core/client/src/filter-provider/utils.ts
View File

@ -139,7 +139,10 @@ export const transformToFilter = (
let value = _.get(values, key);
const collectionField = getCollectionJoinField(`${collectionName}.${key}`);
if (collectionField?.target) {
if (
collectionField?.target &&
['hasOne', 'hasMany', 'belongsTo', 'belongsToMany', 'belongsToArray'].includes(collectionField.type)
) {
value = getValuesByPath(value, collectionField.targetKey || 'id');
key = `${key}.${collectionField.targetKey || 'id'}`;

4
packages/core/client/src/locale/zh-CN.json
View File

@ -983,8 +983,8 @@
"Automatically update timestamp on update": "当记录更新时自动设置字段值为当前时间",
"Default value to current server time": "设置字段默认值为当前服务端时间",
"Automatically update timestamp to the current server time on update": "当记录更新时自动设置字段值为当前服务端时间",
"Datetime(with time zone)": "日期时间（含时区）",
"Datetime(without time zone)": "日期时间（不含时区）",
"Datetime (with time zone)": "日期时间（含时区）",
"Datetime (without time zone)": "日期时间（不含时区）",
"DateOnly": "仅日期",
"Enable secondary confirmation": "启用二次确认",
"Content": "内容",

8
packages/core/client/src/schema-component/antd/association-field/FileManager.tsx
View File

@ -82,14 +82,13 @@ const useTableSelectorProps = () => {
};
function FileSelector(props) {
const { disabled, multiple, value, onChange, action, onSelect, quickUpload, selectFile } = props;
const { disabled, multiple, value, onChange, action, onSelect, quickUpload, selectFile, ...other } = props;
const { wrapSSR, hashId, componentCls: prefixCls } = useStyles();
const { useFileCollectionStorageRules } = useExpressionScope();
const { t } = useTranslation();
const rules = useFileCollectionStorageRules();
// 兼容旧版本
const showSelectButton = selectFile === undefined && quickUpload === undefined;
return wrapSSR(
<div className={cls(`${prefixCls}-wrapper`, `${prefixCls}-picture-card-wrapper`, 'nb-upload', hashId)}>
<div className={cls(`${prefixCls}-list`, `${prefixCls}-list-picture-card`)}>
@ -122,6 +121,8 @@ function FileSelector(props) {
onChange={onChange}
action={action}
rules={rules}
disabled={disabled}
{...other}
/>
) : null}
{selectFile && (multiple || !value) ? (
@ -216,6 +217,7 @@ const InternalFileManager = (props) => {
return (
<div style={{ width: '100%', overflow: 'auto' }}>
<FileSelector
{...others}
value={multiple ? options : options?.[0]}
multiple={multiple}
quickUpload={fieldSchema['x-component-props']?.quickUpload !== false}
@ -268,4 +270,4 @@ const FileManageReadPretty = connect((props) => {
);
});
export { FileManageReadPretty, InternalFileManager };
export { FileManageReadPretty, InternalFileManager, FileSelector };

3
packages/core/client/src/schema-component/antd/association-field/index.ts
View File

@ -14,7 +14,7 @@ import { InternalPicker } from './InternalPicker';
import { Nester } from './Nester';
import { ReadPretty } from './ReadPretty';
import { SubTable } from './SubTable';
import { FileSelector } from './FileManager';
export {
AssociationFieldMode,
AssociationFieldModeProvider,
@ -29,3 +29,4 @@ AssociationField.Selector = Action.Container;
AssociationField.Viewer = Action.Container;
AssociationField.InternalSelect = InternalPicker;
AssociationField.ReadPretty = ReadPretty;
AssociationField.FileSelector = FileSelector;

461
packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
View File

@ -21,6 +21,7 @@ import { FieldNames, Select, SelectProps, defaultFieldNames } from '../select';
import { ReadPretty } from './ReadPretty';
import { useDataSourceHeaders } from '../../../data-source/utils';
import { useDataSourceKey } from '../../../data-source/data-source/DataSourceProvider';
import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
const EMPTY = 'N/A';
export type RemoteSelectProps<P = any> = SelectProps<P, any> & {
@ -44,250 +45,254 @@ export type RemoteSelectProps<P = any> = SelectProps<P, any> & {
dataSource?: string;
CustomDropdownRender?: (v: any) => any;
optionFilter?: (option: any) => boolean;
toOptionsItem?: (data) => any;
};
const InternalRemoteSelect = connect(
(props: RemoteSelectProps) => {
const {
fieldNames = {} as FieldNames,
service = {},
wait = 300,
value,
defaultValue,
objectValue,
manual = true,
mapOptions,
targetField: _targetField,
CustomDropdownRender,
optionFilter,
dataSource: propsDataSource,
...others
} = props;
const dataSource = useDataSourceKey();
const headers = useDataSourceHeaders(propsDataSource || dataSource);
const [open, setOpen] = useState(false);
const firstRun = useRef(false);
const fieldSchema = useFieldSchema();
const isQuickAdd = fieldSchema['x-component-props']?.addMode === 'quickAdd';
const { getField } = useCollection_deprecated();
const searchData = useRef(null);
const { getCollectionJoinField, getInterface } = useCollectionManager_deprecated();
const colletionFieldName = fieldSchema['x-collection-field'] || fieldSchema.name;
const collectionField = getField(colletionFieldName) || getCollectionJoinField(colletionFieldName);
const targetField =
_targetField ||
(collectionField?.target &&
fieldNames?.label &&
getCollectionJoinField(`${collectionField.target}.${fieldNames.label}`));
const InternalRemoteSelect = withDynamicSchemaProps(
connect(
(props: RemoteSelectProps) => {
const {
fieldNames = {} as FieldNames,
service = {},
wait = 300,
value,
defaultValue,
objectValue,
manual = true,
mapOptions,
targetField: _targetField,
CustomDropdownRender,
optionFilter,
dataSource: propsDataSource,
toOptionsItem = (value) => value,
...others
} = props;
const dataSource = useDataSourceKey();
const headers = useDataSourceHeaders(propsDataSource || dataSource);
const [open, setOpen] = useState(false);
const firstRun = useRef(false);
const fieldSchema = useFieldSchema();
const isQuickAdd = fieldSchema['x-component-props']?.addMode === 'quickAdd';
const { getField } = useCollection_deprecated();
const searchData = useRef(null);
const { getCollectionJoinField, getInterface } = useCollectionManager_deprecated();
const colletionFieldName = fieldSchema['x-collection-field'] || fieldSchema.name;
const collectionField = getField(colletionFieldName) || getCollectionJoinField(colletionFieldName);
const targetField =
_targetField ||
(collectionField?.target &&
fieldNames?.label &&
getCollectionJoinField(`${collectionField.target}.${fieldNames.label}`));
const operator = useMemo(() => {
if (targetField?.interface) {
return getInterface(targetField.interface)?.filterable?.operators[0].value || '$includes';
}
return '$includes';
}, [targetField]);
const compile = useCompile();
const operator = useMemo(() => {
if (targetField?.interface) {
return getInterface(targetField.interface)?.filterable?.operators[0].value || '$includes';
}
return '$includes';
}, [targetField]);
const compile = useCompile();
const mapOptionsToTags = useCallback(
(options) => {
try {
return options
.filter((v) => {
return ['number', 'string'].includes(typeof v[fieldNames.value]) || !v[fieldNames.value];
})
.map((option) => {
let label = compile(option[fieldNames.label]);
const mapOptionsToTags = useCallback(
(options) => {
try {
return options
.filter((v) => {
return ['number', 'string'].includes(typeof v[fieldNames.value]) || !v[fieldNames.value];
})
.map((option) => {
let label = compile(option[fieldNames.label]);
if (targetField?.uiSchema?.enum) {
if (Array.isArray(label)) {
label = label
.map((item, index) => {
const option = targetField.uiSchema.enum.find((i) => i.value === item);
if (option) {
return (
<Tag role="button" key={index} color={option.color} style={{ marginRight: 3 }}>
{option?.label || item}
</Tag>
);
} else {
return (
<Tag role="button" key={item}>
{item}
</Tag>
);
}
})
.reverse();
} else {
const item = targetField.uiSchema.enum.find((i) => i.value === label);
if (item) {
label = (
<Tag role="button" color={item.color}>
{item.label}
</Tag>
);
if (targetField?.uiSchema?.enum) {
if (Array.isArray(label)) {
label = label
.map((item, index) => {
const option = targetField.uiSchema.enum.find((i) => i.value === item);
if (option) {
return (
<Tag role="button" key={index} color={option.color} style={{ marginRight: 3 }}>
{option?.label || item}
</Tag>
);
} else {
return (
<Tag role="button" key={item}>
{item}
</Tag>
);
}
})
.reverse();
} else {
const item = targetField.uiSchema.enum.find((i) => i.value === label);
if (item) {
label = (
<Tag role="button" color={item.color}>
{item.label}
</Tag>
);
}
}
}
}
if (targetField?.type === 'date') {
label = dayjs(label).format('YYYY-MM-DD');
}
if (targetField?.type === 'date') {
label = dayjs(label).format('YYYY-MM-DD');
}
if (mapOptions) {
return mapOptions({
if (mapOptions) {
return mapOptions({
[fieldNames.label]: label || EMPTY,
[fieldNames.value]: option[fieldNames.value],
});
}
return {
...option,
[fieldNames.label]: label || EMPTY,
[fieldNames.value]: option[fieldNames.value],
});
}
return {
...option,
[fieldNames.label]: label || EMPTY,
[fieldNames.value]: option[fieldNames.value],
};
})
.filter(Boolean);
} catch (err) {
console.error(err);
return options;
}
},
[targetField?.uiSchema, fieldNames],
);
const { data, run, loading } = useRequest(
{
action: 'list',
...service,
headers,
params: {
pageSize: 200,
...service?.params,
filter: service?.params?.filter,
};
})
.filter(Boolean);
} catch (err) {
console.error(err);
return options;
}
},
},
{
manual,
debounceWait: wait,
},
);
const runDep = useMemo(
() =>
JSON.stringify({
service,
fieldNames,
}),
[service, fieldNames],
);
const CustomRenderCom = useCallback(() => {
if (searchData.current && CustomDropdownRender) {
return (
<CustomDropdownRender
search={searchData.current}
callBack={() => {
searchData.current = null;
setOpen(false);
}}
/>
);
}
return null;
}, [searchData.current]);
useEffect(() => {
// Lazy load
if (firstRun.current) {
run();
}
}, [runDep]);
const onSearch = async (search) => {
run({
filter: mergeFilter([
search
? {
[fieldNames.label]: {
[operator]: search,
},
}
: {},
service?.params?.filter,
]),
});
searchData.current = search;
};
const options = useMemo(() => {
const v = value || defaultValue;
if (!data?.data?.length) {
return v != null ? (Array.isArray(v) ? v : [v]) : [];
}
const valueOptions =
(v != null && (Array.isArray(v) ? v : [{ ...v, [fieldNames.value]: v[fieldNames.value] || v }])) || [];
const filtered = typeof optionFilter === 'function' ? data.data.filter(optionFilter) : data.data;
return uniqBy(filtered.concat(valueOptions ?? []), fieldNames.value);
}, [value, defaultValue, data?.data, fieldNames.value, optionFilter]);
const onDropdownVisibleChange = (visible) => {
setOpen(visible);
searchData.current = null;
if (visible) {
run();
}
firstRun.current = true;
};
return (
<Select
open={open}
popupMatchSelectWidth={false}
autoClearSearchValue
filterOption={false}
filterSort={null}
fieldNames={fieldNames as any}
onSearch={onSearch}
onDropdownVisibleChange={onDropdownVisibleChange}
objectValue={objectValue}
value={value}
defaultValue={defaultValue}
{...others}
loading={data! ? loading : true}
options={mapOptionsToTags(options)}
rawOptions={options}
dropdownRender={(menu) => {
const isFullMatch = options.some((v) => v[fieldNames.label] === searchData.current);
[targetField?.uiSchema, fieldNames],
);
const { data, run, loading } = useRequest(
{
action: 'list',
...service,
headers,
params: {
pageSize: 200,
...service?.params,
filter: service?.params?.filter,
},
},
{
manual,
debounceWait: wait,
},
);
const runDep = useMemo(
() =>
JSON.stringify({
service,
fieldNames,
}),
[service, fieldNames],
);
const CustomRenderCom = useCallback(() => {
if (searchData.current && CustomDropdownRender) {
return (
<>
{isQuickAdd ? (
<>
{!(data?.data.length === 0 && searchData?.current) && menu}
{data?.data.length > 0 && searchData?.current && !isFullMatch && <Divider style={{ margin: 0 }} />}
{!isFullMatch && <CustomRenderCom />}
</>
) : (
menu
)}
</>
<CustomDropdownRender
search={searchData.current}
callBack={() => {
searchData.current = null;
setOpen(false);
}}
/>
);
}}
/>
);
},
mapProps(
{
dataSource: 'options',
},
(props, field) => {
const fieldSchema = useFieldSchema();
return {
...props,
fieldNames: {
...defaultFieldNames,
...props.fieldNames,
...field.componentProps.fieldNames,
...fieldSchema['x-component-props']?.fieldNames,
},
suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
}
return null;
}, [searchData.current]);
useEffect(() => {
// Lazy load
if (firstRun.current) {
run();
}
}, [runDep]);
const onSearch = async (search) => {
run({
filter: mergeFilter([
search
? {
[fieldNames.label]: {
[operator]: search,
},
}
: {},
service?.params?.filter,
]),
});
searchData.current = search;
};
const options = useMemo(() => {
const v = value || defaultValue;
if (!data?.data?.length) {
return v != null ? (Array.isArray(v) ? v : [v]) : [];
}
const valueOptions =
(v != null && (Array.isArray(v) ? v : [{ ...v, [fieldNames.value]: v[fieldNames.value] || v }])) || [];
const filtered = typeof optionFilter === 'function' ? data.data.filter(optionFilter) : data.data;
return uniqBy(filtered.concat(valueOptions ?? []), fieldNames.value);
}, [value, defaultValue, data?.data, fieldNames.value, optionFilter]);
const onDropdownVisibleChange = (visible) => {
setOpen(visible);
searchData.current = null;
if (visible) {
run();
}
firstRun.current = true;
};
return (
<Select
open={open}
popupMatchSelectWidth={false}
autoClearSearchValue
filterOption={false}
filterSort={null}
fieldNames={fieldNames as any}
onSearch={onSearch}
onDropdownVisibleChange={onDropdownVisibleChange}
objectValue={objectValue}
value={value}
defaultValue={defaultValue}
{...others}
loading={data! ? loading : true}
options={toOptionsItem(mapOptionsToTags(options))}
rawOptions={options}
dropdownRender={(menu) => {
const isFullMatch = options.some((v) => v[fieldNames.label] === searchData.current);
return (
<>
{isQuickAdd ? (
<>
{!(data?.data.length === 0 && searchData?.current) && menu}
{data?.data.length > 0 && searchData?.current && !isFullMatch && <Divider style={{ margin: 0 }} />}
{!isFullMatch && <CustomRenderCom />}
</>
) : (
menu
)}
</>
);
}}
/>
);
},
mapProps(
{
dataSource: 'options',
},
(props, field) => {
const fieldSchema = useFieldSchema();
return {
...props,
fieldNames: {
...defaultFieldNames,
...props.fieldNames,
...field.componentProps.fieldNames,
...fieldSchema['x-component-props']?.fieldNames,
},
suffixIcon: field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffixIcon,
};
},
),
mapReadPretty(ReadPretty),
),
mapReadPretty(ReadPretty),
);
export const RemoteSelect = InternalRemoteSelect as unknown as typeof InternalRemoteSelect & {

27
packages/core/client/src/schema-component/antd/upload/Upload.tsx
View File

@ -18,7 +18,6 @@ import filesize from 'filesize';
import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import LightBox from 'react-image-lightbox';
import match from 'mime-match';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
import { useProps } from '../../hooks/useProps';
@ -26,9 +25,10 @@ import {
FILE_SIZE_LIMIT_DEFAULT,
attachmentFileTypes,
getThumbnailPlaceholderURL,
matchMimetype,
normalizeFile,
toFileList,
toValueItem,
toValueItem as toValueItemDefault,
useBeforeUpload,
useUploadProps,
} from './shared';
@ -37,7 +37,7 @@ import type { ComposedUpload, DraggerProps, DraggerV2Props, UploadProps } from '
attachmentFileTypes.add({
match(file) {
return match(file.mimetype || file.type, 'image/*');
return matchMimetype(file, 'image/*');
},
getThumbnailURL(file) {
return file.url ? `${file.url}${file.thumbnailRule || ''}` : URL.createObjectURL(file.originFileObj);
@ -136,7 +136,7 @@ function IframePreviewer({ index, list, onSwitchIndex }) {
overflowY: 'auto',
}}
>
{iframePreviewSupportedTypes.some((type) => match(file.mimetype || file.extname, type)) ? (
{iframePreviewSupportedTypes.some((type) => matchMimetype(file, type)) ? (
<iframe
src={file.url}
style={{
@ -174,7 +174,6 @@ function ReadPretty({ value, onChange, disabled, multiple, size }: UploadProps)
const useUploadStyleVal = (useUploadStyle as any).default ? (useUploadStyle as any).default : useUploadStyle;
// 加载 antd 的样式
useUploadStyleVal(prefixCls);
return wrapSSR(
<div
className={cls(
@ -245,12 +244,12 @@ function AttachmentListItem(props) {
{file.status === 'uploading' ? t('Uploading') : file.title}
</span>,
];
const wrappedItem = file.id ? (
const wrappedItem = file.url ? (
<a target="_blank" rel="noopener noreferrer" href={file.url} onClick={handleClick}>
{item}
</a>
) : (
<span className={`${prefixCls}-span`}>{item}</span>
<span className={`${prefixCls}-span`}>{item}3</span>
);
const content = (
@ -264,7 +263,7 @@ function AttachmentListItem(props) {
<div className={`${prefixCls}-list-item-info`}>{wrappedItem}</div>
<span className={`${prefixCls}-list-item-actions`}>
<Space size={3}>
{!readPretty && file.id && (
{!readPretty && file.url && (
<Button size={'small'} type={'text'} icon={<DownloadOutlined />} onClick={onDownload} />
)}
{!readPretty && !disabled && file.status !== 'uploading' && (
@ -299,7 +298,6 @@ function Previewer({ index, onSwitchIndex, list }) {
}
const file = list[index];
const { Previewer: Component = IframePreviewer } = attachmentFileTypes.getTypeByFile(file) ?? {};
return <Component index={index} list={list} onSwitchIndex={onSwitchIndex} />;
}
@ -331,12 +329,11 @@ export function AttachmentList(props) {
},
[multiple, onChange, value],
);
return (
<>
{fileList.map((file, index) => (
<AttachmentListItem
key={file.id}
key={file.id || file.url}
file={file}
index={index}
disabled={disabled}
@ -351,7 +348,7 @@ export function AttachmentList(props) {
}
export function Uploader({ rules, ...props }: UploadProps) {
const { disabled, multiple, value, onChange } = props;
const { disabled, multiple, value, onChange, toValueItem = toValueItemDefault } = props;
const [pendingList, setPendingList] = useState<any[]>([]);
const { t } = useTranslation();
const { componentCls: prefixCls } = useStyles();
@ -378,7 +375,7 @@ export function Uploader({ rules, ...props }: UploadProps) {
if (multiple) {
const uploadedList = info.fileList.filter((file) => file.status === 'done');
if (uploadedList.length) {
const valueList = [...(value ?? []), ...uploadedList.map(toValueItem)];
const valueList = [...(value ?? []), ...uploadedList.map((v) => toValueItem(v.response?.data))];
onChange?.(valueList);
}
setPendingList(info.fileList.filter((file) => file.status !== 'done').map(normalizeFile));
@ -386,7 +383,7 @@ export function Uploader({ rules, ...props }: UploadProps) {
// NOTE: 用 fileList 里的才有附加的验证状态信息，file 没有（不清楚为何）
const file = info.fileList.find((f) => f.uid === info.file.uid);
if (file.status === 'done') {
onChange?.(toValueItem(file));
onChange?.(toValueItem(file.response?.data));
setPendingList([]);
} else {
setPendingList([normalizeFile(file)]);
@ -408,7 +405,6 @@ export function Uploader({ rules, ...props }: UploadProps) {
const sizeHint = useSizeHint(size);
const selectable =
!disabled && (multiple || ((!value || (Array.isArray(value) && !value.length)) && !pendingList.length));
return (
<>
{pendingList.map((file, index) => (
@ -451,7 +447,6 @@ export function Uploader({ rules, ...props }: UploadProps) {
function Attachment(props: UploadProps) {
const { wrapSSR, hashId, componentCls: prefixCls } = useStyles();
return wrapSSR(
<div className={cls(`${prefixCls}-wrapper`, `${prefixCls}-picture-card-wrapper`, 'nb-upload', hashId)}>
<div className={cls(`${prefixCls}-list`, `${prefixCls}-list-picture-card`)}>

24
packages/core/client/src/schema-component/antd/upload/shared.ts
View File

@ -10,6 +10,7 @@
import { isArr, isValid, toArr as toArray } from '@formily/shared';
import { UploadFile } from 'antd/es/upload/interface';
import { useTranslation } from 'react-i18next';
import mime from 'mime';
import match from 'mime-match';
import React, { useCallback } from 'react';
import { useAPIClient } from '../../../api-client';
@ -58,6 +59,17 @@ export class AttachmentFileTypes {
*/
export const attachmentFileTypes = new AttachmentFileTypes();
export function matchMimetype(file: FileModel, type: string) {
if (file.mimetype) {
return match(file.mimetype, type);
}
if (file.url) {
const [fileUrl] = file.url.split('?');
return match(mime.getType(fileUrl) || '', type);
}
return false;
}
const toArr = (value) => {
if (!isValid(value)) {
return [];
@ -81,6 +93,9 @@ const testOpts = (ext: RegExp, options: { exclude?: string[]; include?: string[]
};
export function getThumbnailPlaceholderURL(file, options: any = {}) {
if (file.url) {
return file.url;
}
for (let i = 0; i < UPLOAD_PLACEHOLDER.length; i++) {
// console.log(UPLOAD_PLACEHOLDER[i].ext, testOpts(UPLOAD_PLACEHOLDER[i].ext, options));
if (UPLOAD_PLACEHOLDER[i].ext.test(file.extname || file.filename || file.url || file.name)) {
@ -166,11 +181,16 @@ export function useUploadProps<T extends IUploadProps = UploadProps>(props: T) {
};
}
export function toValueItem(file) {
return file.response?.data;
export function toValueItem(data) {
return data;
}
export const toItem = (file) => {
if (typeof file === 'string') {
return {
url: file,
};
}
if (file?.response?.data) {
file = {
uid: file.uid,

1
packages/core/client/src/schema-component/antd/upload/type.d.ts vendored
View File

@ -19,6 +19,7 @@ export type UploadProps = Omit<AntdUploadProps, 'onChange'> & {
value?: any;
size?: string;
rules?: PropsRules;
toValueItem?: function;
};
export type DraggerProps = Omit<AntdDraggerProps, 'onChange'> & {

2
packages/core/client/src/schema-component/hooks/useFieldModeOptions.tsx
View File

@ -32,7 +32,7 @@ export const useFieldModeOptions = (props?) => {
return;
}
if (
!['o2o', 'oho', 'obo', 'o2m', 'linkTo', 'm2o', 'm2m', 'updatedBy', 'createdBy', 'mbm'].includes(
!['o2o', 'oho', 'obo', 'o2m', 'linkTo', 'm2o', 'm2m', 'updatedBy', 'createdBy', 'mbm', 'attachmentURL'].includes(
collectionField.interface,
)
)

4
packages/core/client/src/schema-initializer/utils.ts
View File

@ -510,6 +510,7 @@ export const useAssociatedFormItemInitializerFields = (options?: any) => {
const { t } = useTranslation();
const { readPretty = form.readPretty, block = 'Form' } = options || {};
const interfaces = block === 'Form' ? ['m2o'] : ['o2o', 'oho', 'obo', 'm2o'];
const groups = fields
?.filter((field) => {
return interfaces.includes(field.interface);
@ -592,8 +593,9 @@ const associationFieldToMenu = (
export const useFilterAssociatedFormItemInitializerFields = () => {
const { name, fields } = useCollection_deprecated();
const { getCollectionFields } = useCollectionManager_deprecated();
const interfaces = ['o2o', 'oho', 'obo', 'm2o', 'm2m'];
return fields
?.filter((field) => field.target && field.uiSchema)
?.filter((field) => field.target && field.uiSchema && interfaces.includes(field.interface))
.map((field) => associationFieldToMenu(field, field.name, name, getCollectionFields, []))
.filter(Boolean);
};

2
packages/plugins/@nocobase/plugin-action-export/src/client/useFields.ts
View File

@ -28,7 +28,7 @@ export const useFields = (collectionName: string) => {
return option;
}
if (field.target) {
if (field.target && ['hasOne', 'hasMany', 'belongsTo', 'belongsToMany', 'belongsToArray'].includes(field.type)) {
const targetFields = getCollectionFields(field.target);
const options = getOptions(targetFields, depth + 1).filter(Boolean);
option['children'] = option['children'] || [];

2
packages/plugins/@nocobase/plugin-action-import/src/client/useFields.ts
View File

@ -39,7 +39,7 @@ export const useFields = (collectionName: string) => {
return option;
}
if (field.target) {
if (field.target && ['hasOne', 'hasMany', 'belongsTo', 'belongsToMany', 'belongsToArray'].includes(field.type)) {
const targetFields = getCollectionFields(field.target);
const options = getOptions(targetFields, depth + 1).filter(Boolean);
option['children'] = option['children'] || [];

4
packages/plugins/@nocobase/plugin-data-source-main/src/client/__e2e__/collection-template/general3.test.ts
View File

@ -75,8 +75,8 @@ test.describe('configure fields', () => {
await addField('Attachment');
// 添加 date & time 字段
await addField('Datetime(with time zone)');
await addField('Datetime(without time zone)');
await addField('Datetime (with time zone)');
await addField('Datetime (without time zone)');
await addField('DateOnly');
await addField('Unix Timestamp');
await addField('Time');

4
packages/plugins/@nocobase/plugin-data-source-main/src/client/__e2e__/utils.ts
View File

@ -430,8 +430,8 @@ export type FieldInterface =
| 'Markdown'
| 'Rich Text'
| 'Attachment'
| 'Datetime(with time zone)'
| 'Datetime(without time zone)'
| 'Datetime (with time zone)'
| 'Datetime (without time zone)'
| 'Date'
| 'Time'
| 'Unix Timestamp'

56
packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockProvider.tsx
View File

@ -8,14 +8,12 @@
*/
import { ArrayField } from '@formily/core';
import { Schema, useField, useFieldSchema } from '@formily/react';
import { useField } from '@formily/react';
import { Spin } from 'antd';
import uniq from 'lodash/uniq';
import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
import {
useACLRoleContext,
useCollection_deprecated,
useCollectionManager_deprecated,
FixedBlockWrapper,
BlockProvider,
useBlockRequestContext,
@ -70,60 +68,8 @@ const InternalKanbanBlockProvider = (props) => {
);
};
const recursiveProperties = (schema: Schema, component = 'CollectionField', associationFields, appends: any = []) => {
schema.mapProperties((s: any) => {
const name = s.name.toString();
if (s['x-component'] === component && !appends.includes(name)) {
// 关联字段和关联的关联字段
const [firstName] = name.split('.');
if (associationFields.has(name)) {
appends.push(name);
} else if (associationFields.has(firstName) && !appends.includes(firstName)) {
appends.push(firstName);
}
} else {
recursiveProperties(s, component, associationFields, appends);
}
});
};
const useAssociationNames = (collection) => {
const { getCollectionFields } = useCollectionManager_deprecated(collection.dataSource);
const collectionFields = getCollectionFields(collection);
const associationFields = new Set();
for (const collectionField of collectionFields) {
if (collectionField.target) {
associationFields.add(collectionField.name);
const fields = getCollectionFields(collectionField.target);
for (const field of fields) {
if (field.target) {
associationFields.add(`${collectionField.name}.${field.name}`);
}
}
}
}
const fieldSchema = useFieldSchema();
const kanbanSchema = fieldSchema.reduceProperties((buf, schema) => {
if (schema['x-component'].startsWith('Kanban')) {
return schema;
}
return buf;
}, new Schema({}));
const gridSchema: any = kanbanSchema?.properties?.card?.properties?.grid;
const appends = [];
if (gridSchema) {
recursiveProperties(gridSchema, 'CollectionField', associationFields, appends);
}
return uniq(appends);
};
export const KanbanBlockProvider = (props) => {
const params = { ...props.params };
const appends = useAssociationNames(props.association || props.collection);
if (!Object.keys(params).includes('appends')) {
params['appends'] = appends;
}
return (
<BlockProvider name="kanban" {...props} params={params}>
<InternalKanbanBlockProvider {...props} params={params} />

2
packages/plugins/@nocobase/plugin-workflow-manual/src/client/__e2e__/customFormBlocks1.test.ts
View File

@ -565,7 +565,7 @@ test.describe('field data entry', () => {
await page
.locator(`button[aria-label^="schema-initializer-Grid-workflowManual:customForm:configureFields-${randomValue}"]`)
.hover();
await page.getByRole('menuitem', { name: 'Datetime(with time zone)' }).click();
await page.getByRole('menuitem', { name: 'Datetime (with time zone)' }).click();
await page
.getByLabel(`block-item-Input-${randomValue}-Field display name`)
.getByRole('textbox')