fix: 修复手机端表单使用相对应的组件 (#1054)

Reviewed-on: daoyoucloud/tachybase#1054
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
wjh 2024-05-28 09:51:48 +08:00 committed by sealday
parent f3353379ce
commit 502ba8f21c
16 changed files with 308 additions and 118 deletions

View File

@ -1,17 +1,22 @@
import React, { createContext, useEffect, useState } from 'react'; import React, { createContext, useContext, useEffect, useState } from 'react';
import { import {
CollectionProvider_deprecated, CollectionProvider_deprecated,
parseCollectionName,
RemoteSchemaComponent, RemoteSchemaComponent,
SchemaComponent, SchemaComponent,
SchemaComponentContext, SchemaComponentContext,
parseCollectionName,
useAPIClient, useAPIClient,
} from '@tachybase/client'; } from '@tachybase/client';
import { useContext } from 'react';
import { NavBar } from 'antd-mobile'; import { NavBar } from 'antd-mobile';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from '../../locale'; import { useTranslation } from '../../locale';
import '../../style/style.css'; import '../../style/style.css';
import { MobileProvider } from '@tachybase/plugin-mobile-client/client';
import { APPROVAL_ACTION_STATUS } from '../../constants'; import { APPROVAL_ACTION_STATUS } from '../../constants';
import { useCreateSubmit } from '../hook/useCreateSubmit'; import { useCreateSubmit } from '../hook/useCreateSubmit';
@ -41,21 +46,28 @@ export const ViewActionInitiationsContent = () => {
const [dataSource, name] = parseCollectionName(formConfig.config.collection); const [dataSource, name] = parseCollectionName(formConfig.config.collection);
const resSchema = { const resSchema = {
type: 'void', type: 'void',
'x-component': 'MPage', 'x-component': 'MobileProvider',
'x-designer': 'MPage.Designer',
'x-component-props': {},
properties: { properties: {
Approval: { page: {
type: 'void', type: 'void',
'x-decorator': 'CollectionProvider_deprecated', 'x-component': 'MPage',
'x-decorator-props': { 'x-designer': 'MPage.Designer',
name, 'x-decorator': 'MobileProvider',
dataSource, 'x-component-props': {},
}, properties: {
'x-component': 'RemoteSchemaComponent', Approval: {
'x-component-props': { type: 'void',
uid: formConfig.config.applyForm, 'x-decorator': 'CollectionProvider_deprecated',
noForm: true, 'x-decorator-props': {
name,
dataSource,
},
'x-component': 'RemoteSchemaComponent',
'x-component-props': {
uid: formConfig.config.applyForm,
noForm: true,
},
},
}, },
}, },
}, },
@ -86,6 +98,7 @@ export const ViewActionInitiationsContent = () => {
ApplyActionStatusProvider: ContextInitiationsApprovalStatusProvider, ApplyActionStatusProvider: ContextInitiationsApprovalStatusProvider,
ActionBarProvider, ActionBarProvider,
WithdrawActionProvider: WithdrawActionProvider, WithdrawActionProvider: WithdrawActionProvider,
MobileProvider,
}} }}
scope={{ scope={{
useSubmit: useCreateSubmit, useSubmit: useCreateSubmit,

View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { import {
RemoteSchemaComponent, RemoteSchemaComponent,
SchemaComponent, SchemaComponent,
@ -11,24 +11,28 @@ import {
} from '@tachybase/client'; } from '@tachybase/client';
import { DetailsBlockProvider, FlowContext } from '@tachybase/plugin-workflow/client'; import { DetailsBlockProvider, FlowContext } from '@tachybase/plugin-workflow/client';
import { useFieldSchema, useForm } from '@tachybase/schema'; import { useFieldSchema, useForm } from '@tachybase/schema';
import { Result, Spin } from 'antd'; import { Result, Spin } from 'antd';
import { useContext } from 'react';
import { ContextWithActionEnabled } from '../../context/WithActionEnabled';
import { SchemaComponentContextProvider } from '../../context/SchemaComponent';
import { NavBar, Skeleton, TabBar } from 'antd-mobile'; import { NavBar, Skeleton, TabBar } from 'antd-mobile';
import { FileOutline, UserContactOutline } from 'antd-mobile-icons';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { ContextApprovalExecution } from '../../context/ApprovalExecution';
import { FormBlockProvider } from '../../context/FormBlock'; import { FormBlockProvider } from '../../context/FormBlock';
import { SchemaComponentContextProvider } from '../../context/SchemaComponent';
import { ContextWithActionEnabled } from '../../context/WithActionEnabled';
import { useTranslation } from '../../locale';
import { useFormBlockProps } from '../hook/useFormBlockProps';
import { useUpdateSubmit } from '../hook/useUpadteSubmit';
import { useWithdrawAction } from '../hook/useWithdrawAction';
import { ActionBarProvider } from '../provider/ActionBar'; import { ActionBarProvider } from '../provider/ActionBar';
import { ApplyActionStatusProvider } from '../provider/ApplyActionStatus'; import { ApplyActionStatusProvider } from '../provider/ApplyActionStatus';
import { WithdrawActionProvider } from '../provider/WithdrawAction'; import { WithdrawActionProvider } from '../provider/WithdrawAction';
import { ContextApprovalExecution } from '../../context/ApprovalExecution';
import { useUpdateSubmit } from '../hook/useUpadteSubmit';
import { useFormBlockProps } from '../hook/useFormBlockProps';
import { useWithdrawAction } from '../hook/useWithdrawAction';
import { FileOutline, UserContactOutline } from 'antd-mobile-icons';
import { useTranslation } from '../../locale';
import '../../style/style.css'; import '../../style/style.css';
import { MobileProvider } from '@tachybase/plugin-mobile-client/client';
export const ViewActionUserInitiationsContent = () => { export const ViewActionUserInitiationsContent = () => {
const params = useParams(); const params = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
@ -118,18 +122,25 @@ export const ViewActionUserInitiationsContent = () => {
const UserInitiationsComponent = (applyDetail, t, currContext) => { const UserInitiationsComponent = (applyDetail, t, currContext) => {
const formContextSchema = { const formContextSchema = {
type: 'void', type: 'void',
'x-component': 'MPage', 'x-component': 'MobileProvider',
'x-designer': 'MPage.Designer',
'x-component-props': {},
properties: { properties: {
Approval: { page: {
type: 'void', type: 'void',
'x-decorator': 'SchemaComponentContextProvider', 'x-component': 'MPage',
'x-decorator-props': { designable: false }, 'x-designer': 'MPage.Designer',
'x-component': 'RemoteSchemaComponent', 'x-decorator': 'MobileProvider',
'x-component-props': { 'x-component-props': {},
uid: applyDetail, properties: {
noForm: true, Approval: {
type: 'void',
'x-decorator': 'SchemaComponentContextProvider',
'x-decorator-props': { designable: false },
'x-component': 'RemoteSchemaComponent',
'x-component-props': {
uid: applyDetail,
noForm: true,
},
},
}, },
}, },
}, },
@ -137,14 +148,20 @@ const UserInitiationsComponent = (applyDetail, t, currContext) => {
const approvalSchema = { const approvalSchema = {
type: 'void', type: 'void',
'x-component': 'MPage', 'x-component': 'MobileProvider',
'x-designer': 'MPage.Designer',
'x-component-props': {},
properties: { properties: {
process: { page: {
type: 'void', type: 'void',
'x-decorator': 'CardItem', 'x-component': 'MPage',
'x-component': 'ApprovalCommon.ViewComponent.MApprovalProcess', 'x-designer': 'MPage.Designer',
'x-component-props': {},
properties: {
process: {
type: 'void',
'x-decorator': 'CardItem',
'x-component': 'ApprovalCommon.ViewComponent.MApprovalProcess',
},
},
}, },
}, },
}; };
@ -160,6 +177,7 @@ const UserInitiationsComponent = (applyDetail, t, currContext) => {
ApplyActionStatusProvider, ApplyActionStatusProvider,
WithdrawActionProvider, WithdrawActionProvider,
DetailsBlockProvider, DetailsBlockProvider,
MobileProvider,
}} }}
scope={{ scope={{
useForm, useForm,

View File

@ -1,8 +1,10 @@
import { joinCollectionName, useAPIClient, useBlockRequestContext, useCollection_deprecated } from '@tachybase/client'; import { joinCollectionName, useAPIClient, useBlockRequestContext, useCollection_deprecated } from '@tachybase/client';
import { useField, useForm } from '@tachybase/schema'; import { useField, useForm } from '@tachybase/schema';
import { APPROVAL_ACTION_STATUS } from '../../constants';
import { useNavigate, useParams } from 'react-router-dom';
import { Toast } from 'antd-mobile'; import { Toast } from 'antd-mobile';
import { useNavigate, useParams } from 'react-router-dom';
import { APPROVAL_ACTION_STATUS } from '../../constants';
export function useCreateSubmit() { export function useCreateSubmit() {
const from = useForm(); const from = useForm();
@ -28,7 +30,6 @@ export function useCreateSubmit() {
workflowId: workflowId, workflowId: workflowId,
}, },
}); });
console.log('🚀 ~ res ~ res:', res);
if (res.status === 200) { if (res.status === 200) {
Toast.show({ Toast.show({
icon: 'success', icon: 'success',

View File

@ -1,3 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import { import {
RemoteSchemaComponent, RemoteSchemaComponent,
SchemaComponent, SchemaComponent,
@ -7,26 +8,30 @@ import {
useRecord, useRecord,
useRequest, useRequest,
} from '@tachybase/client'; } from '@tachybase/client';
import { Result } from 'antd';
import _ from 'lodash';
import React, { useContext, useEffect, useState } from 'react';
import { useTranslation } from '../../locale';
import { DetailsBlockProvider } from '@tachybase/plugin-workflow/client'; import { DetailsBlockProvider } from '@tachybase/plugin-workflow/client';
import { ContextWithActionEnabled } from '../../context/WithActionEnabled';
import { ContextApprovalExecution } from '../../context/ApprovalExecution'; import { Result } from 'antd';
import { NavBar, Skeleton, TabBar } from 'antd-mobile'; import { NavBar, Skeleton, TabBar } from 'antd-mobile';
import { CouponOutline, FileOutline, ScanCodeOutline, UserContactOutline } from 'antd-mobile-icons';
import _ from 'lodash';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { ContextApprovalExecution } from '../../context/ApprovalExecution';
import { FormBlockProvider } from '../../context/FormBlock';
import { SchemaComponentContextProvider } from '../../context/SchemaComponent'; import { SchemaComponentContextProvider } from '../../context/SchemaComponent';
import { ApprovalActionProvider } from '../provider/ApprovalAction'; import { ContextWithActionEnabled } from '../../context/WithActionEnabled';
import { ApprovalFormBlockDecorator } from '../provider/ApprovalFormBlock'; import { useTranslation } from '../../locale';
import { useApprovalDetailBlockProps } from '../hook/useApprovalDetailBlockProps'; import { useApprovalDetailBlockProps } from '../hook/useApprovalDetailBlockProps';
import { useApprovalFormBlockProps } from '../hook/useApprovalFormBlockProps'; import { useApprovalFormBlockProps } from '../hook/useApprovalFormBlockProps';
import { useSubmit } from '../hook/useSubmit'; import { useSubmit } from '../hook/useSubmit';
import { CouponOutline, FileOutline, ScanCodeOutline, UserContactOutline } from 'antd-mobile-icons';
import { ActionBarProvider } from '../provider/ActionBarProvider'; import { ActionBarProvider } from '../provider/ActionBarProvider';
import { FormBlockProvider } from '../../context/FormBlock'; import { ApprovalActionProvider } from '../provider/ApprovalAction';
import { ApprovalFormBlockDecorator } from '../provider/ApprovalFormBlock';
import '../../style/style.css'; import '../../style/style.css';
import { MobileProvider } from '@tachybase/plugin-mobile-client/client';
// 审批-待办-查看: 内容 // 审批-待办-查看: 内容
export const ViewActionTodosContent = () => { export const ViewActionTodosContent = () => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -130,18 +135,25 @@ export const ViewActionTodosContent = () => {
const todosComponent = (applyDetail, t, currContext) => { const todosComponent = (applyDetail, t, currContext) => {
const formContextSchema = { const formContextSchema = {
type: 'void', type: 'void',
'x-component': 'MPage', 'x-component': 'MobileProvider',
'x-designer': 'MPage.Designer',
'x-component-props': {},
properties: { properties: {
Approval: { page: {
type: 'void', type: 'void',
'x-decorator': 'SchemaComponentContextProvider', 'x-component': 'MPage',
'x-decorator-props': { designable: false }, 'x-designer': 'MPage.Designer',
'x-component': 'RemoteSchemaComponent', 'x-decorator': 'MobileProvider',
'x-component-props': { 'x-component-props': {},
uid: applyDetail, properties: {
noForm: true, Approval: {
type: 'void',
'x-decorator': 'SchemaComponentContextProvider',
'x-decorator-props': { designable: false },
'x-component': 'RemoteSchemaComponent',
'x-component-props': {
uid: applyDetail,
noForm: true,
},
},
}, },
}, },
}, },
@ -149,14 +161,20 @@ const todosComponent = (applyDetail, t, currContext) => {
const approvalSchema = { const approvalSchema = {
type: 'void', type: 'void',
'x-component': 'MPage', 'x-component': 'MobileProvider',
'x-designer': 'MPage.Designer',
'x-component-props': {},
properties: { properties: {
process: { page: {
type: 'void', type: 'void',
'x-decorator': 'CardItem', 'x-component': 'MPage',
'x-component': 'ApprovalCommon.ViewComponent.MApprovalProcess', 'x-designer': 'MPage.Designer',
'x-component-props': {},
properties: {
process: {
type: 'void',
'x-decorator': 'CardItem',
'x-component': 'ApprovalCommon.ViewComponent.MApprovalProcess',
},
},
}, },
}, },
}; };
@ -173,6 +191,7 @@ const todosComponent = (applyDetail, t, currContext) => {
ApprovalFormBlockProvider: ApprovalFormBlockDecorator, ApprovalFormBlockProvider: ApprovalFormBlockDecorator,
DetailsBlockProvider, DetailsBlockProvider,
TabBar, TabBar,
MobileProvider,
}} }}
scope={{ scope={{
useApprovalDetailBlockProps, useApprovalDetailBlockProps,

View File

@ -1,46 +1,49 @@
import { SchemaComponentOptions } from '@tachybase/client';
import React, { PropsWithChildren } from 'react'; import React, { PropsWithChildren } from 'react';
import { SchemaComponentOptions } from '@tachybase/client';
import { import {
MMenuBlockInitializer, CollectionField,
MMenu,
MContainer,
MTabBar,
MPage,
MHeader,
MSettingsBlockInitializer,
MSettings,
useGridCardBlockItemProps,
useGridCardBlockProps,
TabSearch,
TabSearchProvider,
TabSearchBlockInitializer,
TabSearchFieldItem,
TabSearchFieldMItem,
TabSearchCollapsibleInputItem,
TabSearchCollapsibleInputMItem,
TabSearchFieldSchemaInitializerGadget,
SwiperBlockInitializer,
SwiperBlock,
SwiperPage,
ImageSearchView,
ImageSearchInitializer, ImageSearchInitializer,
ImageSearchProvider,
ImageSearchItemIntializer, ImageSearchItemIntializer,
ImageSearchItemToolbar, ImageSearchItemToolbar,
ImageSearchItemView, ImageSearchItemView,
ImageSearchProvider,
ImageSearchView,
MCheckbox,
MContainer,
MDatePicker,
MHeader,
MImageUploader,
MInput,
MMenu,
MMenuBlockInitializer,
MPage,
MRadio,
MSettings,
MSettingsBlockInitializer,
MTabBar,
NoticeBlock, NoticeBlock,
NoticeBlockInitializer, NoticeBlockInitializer,
useSwiperBlockProps, SwiperBlock,
SwiperBlockInitializer,
SwiperPage,
TabSearch,
TabSearchBlockInitializer,
TabSearchCollapsibleInputItem,
TabSearchCollapsibleInputMItem,
TabSearchFieldItem,
TabSearchFieldMItem,
TabSearchFieldSchemaInitializerGadget,
TabSearchProvider,
useGridCardBlockItemProps,
useGridCardBlockProps,
usePropsOptionalImageSearchItemField, usePropsOptionalImageSearchItemField,
usePropsRelatedImageSearchItemField, usePropsRelatedImageSearchItemField,
useSwiperBlockProps,
useTabSearchFieldItemProps, useTabSearchFieldItemProps,
useTabSearchFieldItemRelatedProps, useTabSearchFieldItemRelatedProps,
MInput,
MCheckbox,
MDatePicker,
MRadio,
MImageUploader,
} from './schema'; } from './schema';
import './bridge'; import './bridge';
import './assets/svg'; import './assets/svg';
@ -83,6 +86,7 @@ export const MobileCore: React.FC<PropsWithChildren> = (props) => {
MDatePicker, MDatePicker,
MRadio, MRadio,
MImageUploader, MImageUploader,
CollectionField: CollectionField,
}} }}
scope={{ scope={{
useGridCardBlockItemProps, useGridCardBlockItemProps,

View File

@ -1,7 +1,8 @@
import { dayjs } from '@tachybase/utils/client';
import { connect, mapProps } from '@tachybase/schema';
import { Button, DatePicker, Input, Space } from 'antd-mobile';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { connect, mapProps, mapReadPretty } from '@tachybase/schema';
import { dayjs } from '@tachybase/utils/client';
import { Button, DatePicker, Input, Space } from 'antd-mobile';
export const MDatePicker = connect( export const MDatePicker = connect(
(props) => { (props) => {
@ -33,5 +34,10 @@ export const MDatePicker = connect(
mapProps((props) => { mapProps((props) => {
return { ...props }; return { ...props };
}), }),
mapReadPretty((props) => {
const changeProps = { ...props };
changeProps.value = dayjs(props.value).format(props.dateFormat);
return <Input {...changeProps} readOnly />;
}),
); );
export default MDatePicker; export default MDatePicker;

View File

@ -1,7 +1,8 @@
import React, { useEffect, useState } from 'react';
import { useAPIClient } from '@tachybase/client'; import { useAPIClient } from '@tachybase/client';
import { connect, mapProps, mapReadPretty, useForm } from '@tachybase/schema'; import { connect, mapProps, mapReadPretty, useForm } from '@tachybase/schema';
import { ImageUploadItem, ImageUploader } from 'antd-mobile';
import React, { useEffect, useState } from 'react'; import { ImageUploader, ImageUploadItem } from 'antd-mobile';
export const MImageUploader = connect( export const MImageUploader = connect(
(props) => { (props) => {
@ -52,6 +53,18 @@ export const MImageUploader = connect(
mapProps((props) => { mapProps((props) => {
return { ...props }; return { ...props };
}), }),
mapReadPretty((props) => {
return (
<ImageUploader
{...props}
disableUpload
showUpload={false}
upload={async () => {
return { url: '' };
}}
/>
);
}),
); );
export default MImageUploader; export default MImageUploader;

View File

@ -1,4 +1,6 @@
import { connect, mapProps } from '@tachybase/schema'; import React from 'react';
import { connect, mapProps, mapReadPretty } from '@tachybase/schema';
import { Input, InputProps, TextArea, TextAreaProps } from 'antd-mobile'; import { Input, InputProps, TextArea, TextAreaProps } from 'antd-mobile';
type ComposedInput = React.FC<InputProps> & { type ComposedInput = React.FC<InputProps> & {
@ -8,14 +10,20 @@ type ComposedInput = React.FC<InputProps> & {
export const MInput: ComposedInput = connect( export const MInput: ComposedInput = connect(
Input, Input,
mapProps((props) => { mapProps((props) => {
return { placeholder: '请输入内容', clearable: true, ...props }; return { placeholder: '请输入内容', clearable: true, ...props, style: { fontSize: '12px' } };
}),
mapReadPretty((props) => {
return <Input {...props} readOnly style={{ fontSize: '12px' }} />;
}), }),
); );
const MTextArea = connect( const MTextArea = connect(
TextArea, TextArea,
mapProps((props) => { mapProps((props) => {
return { placeholder: '请输入内容', ...props }; return { ...props, placeholder: '请输入内容', clearable: true, style: { fontSize: '12px' } };
}),
mapReadPretty((props) => {
return <TextArea {...props} readOnly style={{ fontSize: '12px' }} />;
}), }),
); );

View File

@ -0,0 +1,107 @@
import React, { useEffect, useMemo } from 'react';
import {
CollectionFieldProvider,
useCollectionField,
useCompile,
useComponent,
useFormBlockContext,
useIsAllowToSetDefaultValue,
} from '@tachybase/client';
import { connect, Field, merge, useField, useFieldSchema } from '@tachybase/schema';
import { concat } from 'lodash';
import { useIsMobile } from '../../hooks';
import { canMobileField } from '../form/CustomComponent';
type Props = {
component: any;
children?: React.ReactNode;
};
/**
* TODO: 初步适配
* @internal
*/
export const CollectionFieldInternalField: React.FC = (props: Props) => {
const { component } = props;
const compile = useCompile();
const field = useField<Field>();
const fieldSchema = useFieldSchema();
const { uiSchema: uiSchemaOrigin, defaultValue } = useCollectionField();
const { isAllowToSetDefaultValue } = useIsAllowToSetDefaultValue();
const uiSchema = useMemo(() => compile(uiSchemaOrigin), [JSON.stringify(uiSchemaOrigin)]);
const isMobile = useIsMobile();
const Component = useComponent(component || uiComponent(isMobile, uiSchema) || 'Input');
const setFieldProps = (key, value) => {
field[key] = typeof field[key] === 'undefined' ? value : field[key];
};
const setRequired = () => {
if (typeof fieldSchema['required'] === 'undefined') {
field.required = !!uiSchema['required'];
}
};
const ctx = useFormBlockContext();
useEffect(() => {
if (ctx?.field) {
ctx.field.added = ctx.field.added || new Set();
ctx.field.added.add(fieldSchema.name);
}
});
// TODO: 初步适配
useEffect(() => {
if (!uiSchema) {
return;
}
setFieldProps('content', uiSchema['x-content']);
setFieldProps('title', uiSchema.title);
setFieldProps('description', uiSchema.description);
if (ctx?.form) {
const defaultVal = isAllowToSetDefaultValue() ? fieldSchema.default || defaultValue : undefined;
defaultVal !== null && defaultVal !== undefined && setFieldProps('initialValue', defaultVal);
}
if (!field.validator && (uiSchema['x-validator'] || fieldSchema['x-validator'])) {
const concatSchema = concat([], uiSchema['x-validator'] || [], fieldSchema['x-validator'] || []);
field.validator = concatSchema;
}
if (fieldSchema['x-disabled'] === true) {
field.disabled = true;
}
if (fieldSchema['x-read-pretty'] === true) {
field.readPretty = true;
}
setRequired();
// @ts-ignore
field.dataSource = uiSchema.enum;
const originalProps = compile(uiSchema['x-component-props']) || {};
const componentProps = merge(originalProps, field.componentProps || {});
field.component = [Component, componentProps];
}, [JSON.stringify(uiSchema)]);
if (!uiSchema) {
return null;
}
return <Component {...props} />;
};
export const CollectionField = connect((props) => {
const fieldSchema = useFieldSchema();
return (
<CollectionFieldProvider name={fieldSchema.name}>
<CollectionFieldInternalField {...props} />
</CollectionFieldProvider>
);
});
export const uiComponent = (isMobile, uiSchema) => {
const isMobileComponent = canMobileField(uiSchema['x-component']);
if (isMobile && isMobileComponent) {
return isMobileComponent;
} else {
return uiSchema['x-component'];
}
};
CollectionField.displayName = 'CollectionField';

View File

@ -0,0 +1 @@
export * from './CollectionField';

View File

@ -1,7 +1,8 @@
import { useMemo } from 'react';
import { findFilterTargets, mergeFilter, useCollection, useFilterBlock } from '@tachybase/client'; import { findFilterTargets, mergeFilter, useCollection, useFilterBlock } from '@tachybase/client';
import { useFieldSchema } from '@tachybase/schema'; import { useFieldSchema } from '@tachybase/schema';
import _ from 'lodash'; import _ from 'lodash';
import { useMemo } from 'react';
export const useGetSelected = () => { export const useGetSelected = () => {
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
@ -65,9 +66,3 @@ export const useGetSelected = () => {
onSelected, onSelected,
}; };
}; };
export const useIsMobile = () => {
const fieldSchema = useFieldSchema();
const isMobile = Object.values(fieldSchema.root.properties).some((value) => value['x-component'] === 'MContainer');
return isMobile;
};

View File

@ -10,3 +10,4 @@ export * from './tab-search';
export * from './notice'; export * from './notice';
export * from './form'; export * from './form';
export * from './antd-mobile'; export * from './antd-mobile';
export * from './collection-field';

View File

@ -1,7 +1,8 @@
import { useContext } from 'react'; import { useContext } from 'react';
import { MobileContext } from '../provider/MobileProvider'; import { MobileContext } from '../provider/MobileProvider';
export const useIsMobile = () => { export const useIsMobile = () => {
const ctx = useContext(MobileContext); const ctx = useContext(MobileContext);
return ctx.isMobile; return ctx?.isMobile;
}; };

View File

@ -1,3 +1,5 @@
export * from './initializers'; export * from './initializers';
export * from './components'; export * from './components';
export * from './scopes'; export * from './scopes';
export * from './hooks';
export * from './provider';

View File

@ -1,6 +1,6 @@
import React, { createContext } from 'react'; import React, { createContext } from 'react';
export const MobileContext = createContext<any>({}); export const MobileContext = createContext<any>({ isMobile: false });
export const MobileProvider = (props) => { export const MobileProvider = (props) => {
return <MobileContext.Provider value={{ isMobile: true }}> {props.children}</MobileContext.Provider>; return <MobileContext.Provider value={{ isMobile: true }}> {props.children}</MobileContext.Provider>;

View File

@ -0,0 +1 @@
export * from './MobileProvider';