fix: 调整mobile类型选择组件 (#670)
Co-authored-by: wjh <wwwjh0710@163.com> Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
parent
35310f7532
commit
35cddcc80c
@ -1,10 +1,17 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useTranslation } from '../../../../locale';
|
import { useTranslation } from '../../../../locale';
|
||||||
import { Grid, Divider, Picker, Input, Space } from 'antd-mobile';
|
import { Grid, Divider, Picker, Input, Space, ActionSheet } from 'antd-mobile';
|
||||||
import { DownOutline } from 'antd-mobile-icons';
|
import { DownOutline } from 'antd-mobile-icons';
|
||||||
|
import type { Action } from 'antd-mobile/es/components/action-sheet';
|
||||||
|
|
||||||
export const ISelect = (props) => {
|
export const ISelect = (props) => {
|
||||||
const { options, onChange, customLabelKey } = props;
|
const { options, onChange, customLabelKey } = props;
|
||||||
|
const actions: Action[] = options.map((item) => {
|
||||||
|
return {
|
||||||
|
text: item.label,
|
||||||
|
key: item.value,
|
||||||
|
};
|
||||||
|
});
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
return options.length > 1 ? (
|
return options.length > 1 ? (
|
||||||
<Grid.Item
|
<Grid.Item
|
||||||
@ -17,17 +24,30 @@ export const ISelect = (props) => {
|
|||||||
{options.find((option) => option.value === customLabelKey).label}
|
{options.find((option) => option.value === customLabelKey).label}
|
||||||
</span>
|
</span>
|
||||||
<DownOutline />
|
<DownOutline />
|
||||||
<Picker
|
{options.length <= 3 ? (
|
||||||
columns={[options]}
|
<ActionSheet
|
||||||
visible={visible}
|
visible={visible}
|
||||||
onClose={() => {
|
actions={actions}
|
||||||
setVisible(false);
|
closeOnAction
|
||||||
}}
|
onClose={() => setVisible(false)}
|
||||||
defaultValue={customLabelKey}
|
onAction={(v) => {
|
||||||
onConfirm={(v) => {
|
onChange(v.key);
|
||||||
onChange(v[0]);
|
}}
|
||||||
}}
|
/>
|
||||||
/>
|
) : (
|
||||||
|
<Picker
|
||||||
|
columns={[options]}
|
||||||
|
visible={visible}
|
||||||
|
onClose={() => {
|
||||||
|
setVisible(false);
|
||||||
|
}}
|
||||||
|
defaultValue={customLabelKey}
|
||||||
|
onConfirm={(v) => {
|
||||||
|
onChange(v[0]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
<Divider direction="vertical" style={{ height: '70%', margin: '0 0 0 5px' }} />
|
<Divider direction="vertical" style={{ height: '70%', margin: '0 0 0 5px' }} />
|
||||||
</Grid.Item>
|
</Grid.Item>
|
||||||
) : null;
|
) : null;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
const canBeOptionalFields = ['select', 'multipleSelect', 'radioGroup', 'checkbox', 'checkboxGroup'];
|
const canBeOptionalFields = ['select', 'multipleSelect', 'radioGroup', 'checkboxGroup'];
|
||||||
const canBeRelatedFields = ['oho', 'obo', 'o2m', 'm2o', 'm2m'];
|
const canBeRelatedFields = ['oho', 'obo', 'o2m', 'm2o', 'm2m'];
|
||||||
|
|
||||||
const canBeSearchFields = [
|
const canBeSearchFields = [
|
||||||
|
Loading…
Reference in New Issue
Block a user