mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:58:05 +08:00
feat： 城市选择器移动端优化、移动端禁止表单inline、弹出层高度调整 (#3312)
* fix: useMobileUI接受位置修改 * fix：移动端禁用inline模式 * feat: 移动端城市选择器优化 * fix: 颜色选择器移动端禁止输入否则键盘和popup冲突 * fix: 弹出框高度调整 * fix: 去除标题 * fix: 禁止focus选中 * Update _picker-columns.scss * Update _picker-columns.scss Co-authored-by: zhangxulong <zhangxulong@baidu.com>
This commit is contained in:
龙少
GitHub
parent
a4803196ff
commit
16e3efd619
27
scss/components/_city-area.scss
Normal file
27
scss/components/_city-area.scss
Normal file
@ -0,0 +1,27 @@
|
||||
.#{$ns}CityArea {
|
||||
&-popup {
|
||||
height: px2rem(280px);
|
||||
}
|
||||
&-Input {
|
||||
margin-top: var(--gap-xs);
|
||||
outline: none;
|
||||
vertical-align: top;
|
||||
border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
|
||||
border-radius: var(--Form-input-borderRadius);
|
||||
line-height: var(--Form-input-lineHeight);
|
||||
padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
|
||||
font-size: var(--Form-input-fontSize);
|
||||
display: inline-flex !important;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--Form-input-placeholderColor);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--Form-input-onFocused-borderColor);
|
||||
box-shadow: var(--Form-input-boxShadow);
|
||||
background: var(--Form-input-onFocused-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -10,8 +10,8 @@
|
||||
color: var(--ColorPicker-color);
|
||||
border-radius: var(--borderRadius);
|
||||
|
||||
&-popup{
|
||||
height: 80vh;
|
||||
&-popup {
|
||||
height: px2rem(400px);
|
||||
}
|
||||
|
||||
&:not(.is-disabled) {
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
&-popup {
|
||||
height: 80vh;
|
||||
height: px2rem(400px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -82,6 +82,7 @@
|
||||
@import '../components/form/checks';
|
||||
@import '../components/form/selection';
|
||||
@import '../components/form/city';
|
||||
@import '../components/city-area';
|
||||
@import '../components/form/switch';
|
||||
@import '../components/form/number';
|
||||
@import '../components/form/select';
|
||||
|
||||
316
src/components/CityArea.tsx
Normal file
316
src/components/CityArea.tsx
Normal file
@ -0,0 +1,316 @@
|
||||
/**
|
||||
* @file 移动端城市选择器
|
||||
*/
|
||||
import React, {useEffect, useState, memo} from 'react';
|
||||
|
||||
import Picker from './Picker';
|
||||
import ResultBox from './ResultBox';
|
||||
import {useSetState, useUpdateEffect} from '../hooks';
|
||||
import {localeable, LocaleProps} from '../locale';
|
||||
import {themeable, ThemeProps} from '../theme';
|
||||
import {Icon} from './icons';
|
||||
import {uncontrollable} from 'uncontrollable';
|
||||
import PopUp from './PopUp';
|
||||
import {PickerObjectOption} from './PickerColumn';
|
||||
|
||||
export type AreaColumnOption = {
|
||||
text: string;
|
||||
value: number;
|
||||
};
|
||||
|
||||
export interface AreaProps extends LocaleProps, ThemeProps {
|
||||
value: any;
|
||||
/**
|
||||
* 允许选择城市？
|
||||
*/
|
||||
allowCity?: boolean;
|
||||
/**
|
||||
* 允许选择地区？
|
||||
*/
|
||||
allowDistrict?: boolean;
|
||||
/**
|
||||
* 允许选择街道？
|
||||
*/
|
||||
allowStreet?: boolean;
|
||||
/**
|
||||
* 开启后只会存城市的 code 信息
|
||||
*/
|
||||
extractValue?: boolean;
|
||||
/**
|
||||
* 是否将各个信息拼接成字符串。
|
||||
*/
|
||||
joinValues?: boolean;
|
||||
/**
|
||||
* 拼接的符号是啥？
|
||||
*/
|
||||
delimiter?: string;
|
||||
/**
|
||||
* 是否禁用
|
||||
*/
|
||||
disabled?: boolean;
|
||||
useMobileUI?: boolean;
|
||||
onChange: (value: any) => void;
|
||||
/** 点击完成按钮时触发 */
|
||||
onConfirm?: (result: AreaColumnOption[], index: number) => void;
|
||||
/** 点击取消按钮时触发 */
|
||||
onCancel?: (...args: unknown[]) => void;
|
||||
}
|
||||
/**
|
||||
* 街道
|
||||
*/
|
||||
type district = {
|
||||
[propName: number]: {
|
||||
[propName: number]: Array<number>;
|
||||
};
|
||||
};
|
||||
interface DbState {
|
||||
province: number[];
|
||||
district: district;
|
||||
[key: number]: string;
|
||||
city: {
|
||||
[key: number]: number[];
|
||||
};
|
||||
}
|
||||
interface StateObj {
|
||||
columns: {options: Array<AreaColumnOption>}[];
|
||||
}
|
||||
|
||||
const CityArea = memo<AreaProps>(props => {
|
||||
const {
|
||||
joinValues = true,
|
||||
extractValue = true,
|
||||
delimiter = ',',
|
||||
allowCity = true,
|
||||
allowDistrict = true,
|
||||
allowStreet = false,
|
||||
// 默认北京东城区
|
||||
value = 110101,
|
||||
classnames: cx,
|
||||
translate: __,
|
||||
disabled = false,
|
||||
useMobileUI
|
||||
} = props;
|
||||
|
||||
const [values, setValues] = useState<Array<number>>([]);
|
||||
const [street, setStreet] = useState('');
|
||||
const [confirmValues, setConfirmValues] =
|
||||
useState<Array<PickerObjectOption>>();
|
||||
const [db, updateDb] = useSetState<DbState>();
|
||||
const [state, updateState] = useSetState<StateObj>({
|
||||
columns: []
|
||||
});
|
||||
const [isOpened, setIsOpened] = useState(false);
|
||||
|
||||
const onChange = (
|
||||
columnValues: Array<AreaColumnOption>,
|
||||
columnIndex: number
|
||||
) => {
|
||||
values[columnIndex] = columnValues[columnIndex]?.value;
|
||||
// 清空后面的值
|
||||
while (values[columnIndex++]) {
|
||||
values[columnIndex++] = -1;
|
||||
}
|
||||
let [provience, city, district] = values;
|
||||
if (city === -1) {
|
||||
city = db.city?.[provience]?.[0];
|
||||
}
|
||||
if (district === -1) {
|
||||
district = db.district?.[provience]?.[city]?.[0];
|
||||
}
|
||||
let tempValues = [provience, city, district];
|
||||
if (!allowDistrict) {
|
||||
tempValues.splice(2, 1);
|
||||
}
|
||||
if (!allowCity) {
|
||||
tempValues.splice(1, 1);
|
||||
}
|
||||
setValues(tempValues);
|
||||
};
|
||||
|
||||
const propsChange = () => {
|
||||
const {onChange} = props;
|
||||
const [province, city, district] = values;
|
||||
const code =
|
||||
allowDistrict && district
|
||||
? district
|
||||
: allowCity && city
|
||||
? city
|
||||
: province;
|
||||
if (typeof extractValue === 'undefined' ? joinValues : extractValue) {
|
||||
code
|
||||
? onChange(
|
||||
allowStreet && street
|
||||
? [code, street].join(delimiter)
|
||||
: String(code)
|
||||
)
|
||||
: onChange('');
|
||||
} else {
|
||||
onChange({
|
||||
code,
|
||||
province: db[province],
|
||||
city: db[city],
|
||||
district: db[district],
|
||||
street
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onConfirm = () => {
|
||||
const confirmValues = values.map((item: number) => ({
|
||||
text: db[item],
|
||||
value: item
|
||||
}));
|
||||
setConfirmValues(confirmValues);
|
||||
propsChange();
|
||||
setIsOpened(false);
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
setIsOpened(false);
|
||||
if (props.onCancel) props.onCancel();
|
||||
};
|
||||
|
||||
const getPropsValue = () => {
|
||||
// 最后一项的值
|
||||
let code =
|
||||
(value && value.code) ||
|
||||
(typeof value === 'number' && value) ||
|
||||
(typeof value === 'string' && /(\d{6})/.test(value) && RegExp.$1);
|
||||
const values: Array<number> = [];
|
||||
if (code && db[code]) {
|
||||
code = parseInt(code, 10);
|
||||
let provinceCode = code - (code % 10000);
|
||||
let cityCode = code - (code % 100);
|
||||
if (db[provinceCode]) {
|
||||
values[0] = provinceCode;
|
||||
}
|
||||
if (db[cityCode] && allowCity) {
|
||||
values[1] = cityCode;
|
||||
} else if (~db.city[provinceCode]?.indexOf(code) && allowCity) {
|
||||
values[1] = code;
|
||||
}
|
||||
|
||||
if (code % 100 && allowDistrict) {
|
||||
values[2] = code;
|
||||
}
|
||||
setValues(values);
|
||||
}
|
||||
};
|
||||
|
||||
const updateColumns = () => {
|
||||
if (!db) {
|
||||
return;
|
||||
}
|
||||
let [provience, city, district] = values;
|
||||
const provienceColumn = db.province.map((code: number) => {
|
||||
return {text: db[code], value: code, disabled};
|
||||
});
|
||||
const cityColumn = city
|
||||
? db.city[provience].map((code: number) => {
|
||||
return {text: db[code], value: code, disabled};
|
||||
})
|
||||
: [];
|
||||
const districtColumn =
|
||||
city && district
|
||||
? db.district[provience][city].map((code: number) => {
|
||||
return {text: db[code], value: code, disabled};
|
||||
})
|
||||
: [];
|
||||
const columns = [
|
||||
{options: provienceColumn},
|
||||
{options: cityColumn},
|
||||
{options: districtColumn}
|
||||
];
|
||||
if (!allowDistrict || !allowCity) {
|
||||
columns.splice(2, 1);
|
||||
}
|
||||
if (!allowCity) {
|
||||
columns.splice(1, 1);
|
||||
}
|
||||
updateState({columns});
|
||||
};
|
||||
|
||||
const loadDb = () => {
|
||||
import('../renderers/Form/CityDB').then(db => {
|
||||
updateDb({
|
||||
...db.default,
|
||||
province: db.province as any,
|
||||
city: db.city,
|
||||
district: db.district as district
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadDb();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
isOpened && db && getPropsValue();
|
||||
}, [db, isOpened]);
|
||||
|
||||
useEffect(() => {
|
||||
street && propsChange();
|
||||
}, [street]);
|
||||
|
||||
useUpdateEffect(() => {
|
||||
values.length && updateColumns();
|
||||
}, [values]);
|
||||
|
||||
const result = confirmValues
|
||||
?.filter(item => item?.value)
|
||||
?.map(item => item.text)
|
||||
.join(delimiter);
|
||||
|
||||
return (
|
||||
<div className={cx(`CityArea`)}>
|
||||
<ResultBox
|
||||
className={cx('CityArea-Input', isOpened ? 'is-active' : '')}
|
||||
allowInput={false}
|
||||
result={result}
|
||||
onResultChange={() => {}}
|
||||
onResultClick={() => setIsOpened(!isOpened)}
|
||||
placeholder={__('Condition.cond_placeholder')}
|
||||
useMobileUI={useMobileUI}
|
||||
></ResultBox>
|
||||
{allowStreet && values[0] ? (
|
||||
<input
|
||||
className={cx('CityArea-Input')}
|
||||
value={street}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setStreet(e.currentTarget.value)
|
||||
}
|
||||
placeholder={__('City.street')}
|
||||
disabled={disabled}
|
||||
/>
|
||||
) : null}
|
||||
<PopUp
|
||||
className={cx(`CityArea-popup`)}
|
||||
isShow={isOpened}
|
||||
showConfirm
|
||||
onConfirm={onConfirm}
|
||||
onHide={onCancel}
|
||||
>
|
||||
<Picker
|
||||
className={'CityArea-picker'}
|
||||
columns={state.columns}
|
||||
onChange={onChange as any}
|
||||
showToolbar={false}
|
||||
labelField="text"
|
||||
itemHeight={40}
|
||||
value={values}
|
||||
classnames={props.classnames}
|
||||
classPrefix={props.classPrefix}
|
||||
/>
|
||||
</PopUp>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default themeable(
|
||||
localeable(
|
||||
uncontrollable(CityArea, {
|
||||
value: 'onChange'
|
||||
})
|
||||
)
|
||||
);
|
||||
@ -227,6 +227,7 @@ export class ColorControl extends React.PureComponent<
|
||||
const __ = this.props.translate;
|
||||
const isOpened = this.state.isOpened;
|
||||
const isFocused = this.state.isFocused;
|
||||
const mobileUI = useMobileUI && isMobile();
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -261,6 +262,7 @@ export class ColorControl extends React.PureComponent<
|
||||
onFocus={this.handleFocus}
|
||||
onBlur={this.handleBlur}
|
||||
onClick={this.handleClick}
|
||||
readOnly={mobileUI}
|
||||
/>
|
||||
|
||||
{clearable && !disabled && value ? (
|
||||
@ -273,7 +275,7 @@ export class ColorControl extends React.PureComponent<
|
||||
<Icon icon="caret" className="icon" onClick={this.handleClick} />
|
||||
</span>
|
||||
|
||||
{!(useMobileUI && isMobile()) && isOpened ? (
|
||||
{!mobileUI && isOpened ? (
|
||||
<Overlay
|
||||
placement={placement || 'auto'}
|
||||
target={() => findDOMNode(this)}
|
||||
@ -320,7 +322,7 @@ export class ColorControl extends React.PureComponent<
|
||||
</PopOver>
|
||||
</Overlay>
|
||||
) : null}
|
||||
{useMobileUI && isMobile() && (
|
||||
{mobileUI && (
|
||||
<PopUp
|
||||
className={cx(`${ns}ColorPicker-popup`)}
|
||||
isShow={isOpened}
|
||||
|
||||
@ -1837,6 +1837,7 @@ const db: {
|
||||
411727: '汝南县',
|
||||
411728: '遂平县',
|
||||
411729: '新蔡县',
|
||||
419000: '省直辖县',
|
||||
419001: '济源市',
|
||||
420000: '湖北省',
|
||||
420100: '武汉市',
|
||||
@ -1963,6 +1964,7 @@ const db: {
|
||||
422826: '咸丰县',
|
||||
422827: '来凤县',
|
||||
422828: '鹤峰县',
|
||||
429000: '省直辖县',
|
||||
429004: '仙桃市',
|
||||
429005: '潜江市',
|
||||
429006: '天门市',
|
||||
@ -2260,8 +2262,66 @@ const db: {
|
||||
441881: '英德市',
|
||||
441882: '连州市',
|
||||
441900: '东莞市',
|
||||
441901: '中堂镇',
|
||||
441903: '南城街道',
|
||||
441904: '长安镇',
|
||||
441905: '东坑镇',
|
||||
441906: '樟木头镇',
|
||||
441907: '莞城街道',
|
||||
441908: '石龙镇',
|
||||
441909: '桥头镇',
|
||||
441910: '万江街道',
|
||||
441911: '麻涌镇',
|
||||
441912: '虎门镇',
|
||||
441913: '谢岗镇',
|
||||
441914: '石碣镇',
|
||||
441915: '茶山镇',
|
||||
441916: '东城街道',
|
||||
441917: '洪梅镇',
|
||||
441918: '道滘镇',
|
||||
441919: '高埗镇',
|
||||
441920: '企石镇',
|
||||
441921: '凤岗镇',
|
||||
441922: '大岭山镇',
|
||||
441923: '松山湖',
|
||||
441924: '清溪镇',
|
||||
441925: '望牛墩镇',
|
||||
441926: '厚街镇',
|
||||
441927: '常平镇',
|
||||
441928: '寮步镇',
|
||||
441929: '石排镇',
|
||||
441930: '横沥镇',
|
||||
441931: '塘厦镇',
|
||||
441932: '黄江镇',
|
||||
441933: '大朗镇',
|
||||
441934: '东莞港',
|
||||
441935: '东莞生态园',
|
||||
441990: '沙田镇',
|
||||
442000: '中山市',
|
||||
442101: '东沙群岛',
|
||||
442001: '南头镇',
|
||||
442002: '神湾镇',
|
||||
442003: '东凤镇',
|
||||
442004: '五桂山街道',
|
||||
442005: '黄圃镇',
|
||||
442006: '小榄镇',
|
||||
442007: '石岐街道',
|
||||
442008: '横栏镇',
|
||||
442009: '三角镇',
|
||||
442010: '三乡镇',
|
||||
442011: '港口镇',
|
||||
442012: '沙溪镇',
|
||||
442013: '板芙镇',
|
||||
442015: '东升镇',
|
||||
442016: '阜沙镇',
|
||||
442017: '民众镇',
|
||||
442018: '东区街道',
|
||||
442019: '火炬开发区街道办事处',
|
||||
442020: '西区街道',
|
||||
442021: '南区街道',
|
||||
442022: '古镇镇',
|
||||
442023: '坦洲镇',
|
||||
442024: '大涌镇',
|
||||
442025: '南朗镇',
|
||||
445100: '潮州市',
|
||||
445101: '潮州市市辖区',
|
||||
445102: '湘桥区',
|
||||
@ -2440,6 +2500,25 @@ const db: {
|
||||
460322: '南沙群岛',
|
||||
460323: '中沙群岛的岛礁及其海域',
|
||||
460400: '儋州市',
|
||||
460401: '那大镇',
|
||||
460402: '和庆镇',
|
||||
460403: '南丰镇',
|
||||
460404: '大成镇',
|
||||
460405: '雅星镇',
|
||||
460406: '兰洋镇',
|
||||
460407: '光村镇',
|
||||
460408: '木棠镇',
|
||||
460409: '海头镇',
|
||||
460410: '峨蔓镇',
|
||||
460411: '王五镇',
|
||||
460412: '白马井镇',
|
||||
460413: '中和镇',
|
||||
460414: '排浦镇',
|
||||
460415: '东成镇',
|
||||
460416: '新州镇',
|
||||
460417: '洋浦经济开发区',
|
||||
460418: '华南热作学院',
|
||||
469000: '省直辖县',
|
||||
469001: '五指山市',
|
||||
469002: '琼海市',
|
||||
469005: '文昌市',
|
||||
@ -3499,6 +3578,7 @@ const db: {
|
||||
654324: '哈巴河县',
|
||||
654325: '青河县',
|
||||
654326: '吉木乃县',
|
||||
659000: '自治区直辖县级行政区划',
|
||||
659001: '石河子市',
|
||||
659002: '阿拉尔市',
|
||||
659003: '图木舒克市',
|
||||
@ -3508,7 +3588,425 @@ const db: {
|
||||
659007: '双河市',
|
||||
659008: '可克达拉市',
|
||||
659009: '昆玉市',
|
||||
710100: '台北市',
|
||||
710200: '高雄市',
|
||||
710300: '台南市',
|
||||
710400: '台中市',
|
||||
710500: '金门县',
|
||||
710600: '南投县',
|
||||
710700: '基隆市',
|
||||
710800: '新竹市',
|
||||
710900: '嘉义市',
|
||||
711100: '新北市',
|
||||
711200: '宜兰县',
|
||||
711300: '新竹县',
|
||||
711400: '桃园县',
|
||||
711500: '苗栗县',
|
||||
711520: '头份市',
|
||||
711130: '万里区',
|
||||
711132: '板桥区',
|
||||
711133: '汐止区',
|
||||
711134: '深坑区',
|
||||
711135: '石碇区',
|
||||
711136: '瑞芳区',
|
||||
711137: '平溪区',
|
||||
711138: '双溪区',
|
||||
711139: '贡寮区',
|
||||
711140: '新店区',
|
||||
711141: '坪林区',
|
||||
711142: '乌来区',
|
||||
711143: '永和区',
|
||||
711144: '中和区',
|
||||
711145: '土城区',
|
||||
711146: '三峡区',
|
||||
711147: '树林区',
|
||||
711148: '莺歌区',
|
||||
711149: '三重区',
|
||||
711150: '新庄区',
|
||||
711151: '泰山区',
|
||||
711152: '林口区',
|
||||
711153: '芦洲区',
|
||||
711154: '五股区',
|
||||
711155: '八里区',
|
||||
711156: '淡水区',
|
||||
711157: '三芝区',
|
||||
711158: '石门区',
|
||||
711287: '宜兰市',
|
||||
711288: '头城镇',
|
||||
711289: '礁溪乡',
|
||||
711290: '壮围乡',
|
||||
711291: '员山乡',
|
||||
711292: '罗东镇',
|
||||
711293: '三星乡',
|
||||
711294: '大同乡',
|
||||
711295: '五结乡',
|
||||
711296: '冬山乡',
|
||||
711297: '苏澳镇',
|
||||
711298: '南澳乡',
|
||||
711299: '钓鱼台',
|
||||
711387: '竹北市',
|
||||
711388: '湖口乡',
|
||||
711389: '新丰乡',
|
||||
711390: '新埔镇',
|
||||
711391: '关西镇',
|
||||
711392: '芎林乡',
|
||||
711393: '宝山乡',
|
||||
711394: '竹东镇',
|
||||
711395: '五峰乡',
|
||||
711396: '横山乡',
|
||||
711397: '尖石乡',
|
||||
711398: '北埔乡',
|
||||
711399: '峨眉乡',
|
||||
711414: '中坜区',
|
||||
711415: '平镇区',
|
||||
711417: '杨梅区',
|
||||
711418: '新屋区',
|
||||
711419: '观音区',
|
||||
711420: '桃园区',
|
||||
711421: '龟山区',
|
||||
711422: '八德区',
|
||||
711423: '大溪区',
|
||||
711425: '大园区',
|
||||
711426: '芦竹区',
|
||||
711487: '中坜市',
|
||||
711488: '平镇市',
|
||||
711489: '龙潭乡',
|
||||
711490: '杨梅市',
|
||||
711491: '新屋乡',
|
||||
711492: '观音乡',
|
||||
711493: '桃园市',
|
||||
711494: '龟山乡',
|
||||
711495: '八德市',
|
||||
711496: '大溪镇',
|
||||
711497: '复兴乡',
|
||||
711498: '大园乡',
|
||||
711499: '芦竹乡',
|
||||
711582: '竹南镇',
|
||||
711583: '头份镇',
|
||||
711584: '三湾乡',
|
||||
711585: '南庄乡',
|
||||
711586: '狮潭乡',
|
||||
711587: '后龙镇',
|
||||
711588: '通霄镇',
|
||||
711589: '苑里镇',
|
||||
711590: '苗栗市',
|
||||
711591: '造桥乡',
|
||||
711592: '头屋乡',
|
||||
711593: '公馆乡',
|
||||
711594: '大湖乡',
|
||||
711595: '泰安乡',
|
||||
711596: '铜锣乡',
|
||||
711597: '三义乡',
|
||||
711598: '西湖乡',
|
||||
711599: '卓兰镇',
|
||||
711736: '员林市',
|
||||
711774: '彰化市',
|
||||
711775: '芬园乡',
|
||||
711776: '花坛乡',
|
||||
711777: '秀水乡',
|
||||
711778: '鹿港镇',
|
||||
711779: '福兴乡',
|
||||
711780: '线西乡',
|
||||
711781: '和美镇',
|
||||
711782: '伸港乡',
|
||||
711783: '员林镇',
|
||||
711784: '社头乡',
|
||||
711785: '永靖乡',
|
||||
711786: '埔心乡',
|
||||
711787: '溪湖镇',
|
||||
711788: '大村乡',
|
||||
711789: '埔盐乡',
|
||||
711790: '田中镇',
|
||||
711791: '北斗镇',
|
||||
711792: '田尾乡',
|
||||
711793: '埤头乡',
|
||||
711794: '溪州乡',
|
||||
711795: '竹塘乡',
|
||||
711796: '二林镇',
|
||||
711797: '大城乡',
|
||||
711798: '芳苑乡',
|
||||
711799: '二水乡',
|
||||
711982: '番路乡',
|
||||
711983: '梅山乡',
|
||||
711984: '竹崎乡',
|
||||
711985: '阿里山乡',
|
||||
711986: '中埔乡',
|
||||
711987: '大埔乡',
|
||||
711988: '水上乡',
|
||||
711989: '鹿草乡',
|
||||
711990: '太保市',
|
||||
711991: '朴子市',
|
||||
711992: '东石乡',
|
||||
711993: '六脚乡',
|
||||
711994: '新港乡',
|
||||
711995: '民雄乡',
|
||||
711996: '大林镇',
|
||||
711997: '溪口乡',
|
||||
711998: '义竹乡',
|
||||
711999: '布袋镇',
|
||||
711700: '彰化县',
|
||||
711900: '嘉义县',
|
||||
712100: '云林县',
|
||||
712400: '屏东县',
|
||||
712500: '台东县',
|
||||
712600: '花莲县',
|
||||
712700: '澎湖县',
|
||||
712800: '连江县',
|
||||
712180: '斗南镇',
|
||||
712181: '大埤乡',
|
||||
712182: '虎尾镇',
|
||||
712183: '土库镇',
|
||||
712184: '褒忠乡',
|
||||
712185: '东势乡',
|
||||
712186: '台西乡',
|
||||
712187: '仑背乡',
|
||||
712188: '麦寮乡',
|
||||
712189: '斗六市',
|
||||
712190: '林内乡',
|
||||
712191: '古坑乡',
|
||||
712192: '莿桐乡',
|
||||
712193: '西螺镇',
|
||||
712194: '二仑乡',
|
||||
712195: '北港镇',
|
||||
712196: '水林乡',
|
||||
712197: '口湖乡',
|
||||
712198: '四湖乡',
|
||||
712199: '元长乡',
|
||||
712451: '崁顶乡',
|
||||
712467: '屏东市',
|
||||
712468: '三地门乡',
|
||||
712469: '雾台乡',
|
||||
712470: '玛家乡',
|
||||
712471: '九如乡',
|
||||
712472: '里港乡',
|
||||
712473: '高树乡',
|
||||
712474: '盐埔乡',
|
||||
712475: '长治乡',
|
||||
712476: '麟洛乡',
|
||||
712477: '竹田乡',
|
||||
712478: '内埔乡',
|
||||
712479: '万丹乡',
|
||||
712480: '潮州镇',
|
||||
712481: '泰武乡',
|
||||
712482: '来义乡',
|
||||
712483: '万峦乡',
|
||||
712484: '莰顶乡',
|
||||
712485: '新埤乡',
|
||||
712486: '南州乡',
|
||||
712487: '林边乡',
|
||||
712488: '东港镇',
|
||||
712489: '琉球乡',
|
||||
712490: '佳冬乡',
|
||||
712491: '新园乡',
|
||||
712492: '枋寮乡',
|
||||
712493: '枋山乡',
|
||||
712494: '春日乡',
|
||||
712495: '狮子乡',
|
||||
712496: '车城乡',
|
||||
712497: '牡丹乡',
|
||||
712498: '恒春镇',
|
||||
712499: '满州乡',
|
||||
712584: '台东市',
|
||||
712585: '绿岛乡',
|
||||
712586: '兰屿乡',
|
||||
712587: '延平乡',
|
||||
712588: '卑南乡',
|
||||
712589: '鹿野乡',
|
||||
712590: '关山镇',
|
||||
712591: '海端乡',
|
||||
712592: '池上乡',
|
||||
712593: '东河乡',
|
||||
712594: '成功镇',
|
||||
712595: '长滨乡',
|
||||
712596: '金峰乡',
|
||||
712597: '大武乡',
|
||||
712598: '达仁乡',
|
||||
712599: '太麻里乡',
|
||||
712686: '花莲市',
|
||||
712687: '新城乡',
|
||||
712688: '太鲁阁',
|
||||
712689: '秀林乡',
|
||||
712690: '吉安乡',
|
||||
712691: '寿丰乡',
|
||||
712692: '凤林镇',
|
||||
712693: '光复乡',
|
||||
712694: '丰滨乡',
|
||||
712695: '瑞穗乡',
|
||||
712696: '万荣乡',
|
||||
712697: '玉里镇',
|
||||
712698: '卓溪乡',
|
||||
712699: '富里乡',
|
||||
712794: '马公市',
|
||||
712795: '西屿乡',
|
||||
712796: '望安乡',
|
||||
712797: '七美乡',
|
||||
712798: '白沙乡',
|
||||
712799: '湖西乡',
|
||||
712896: '南竿乡',
|
||||
712897: '北竿乡',
|
||||
712898: '东引乡',
|
||||
712899: '莒光乡',
|
||||
710000: '台湾省',
|
||||
710101: '中正区',
|
||||
710102: '大同区',
|
||||
710103: '中山区',
|
||||
710104: '松山区',
|
||||
710105: '大安区',
|
||||
710106: '万华区',
|
||||
710107: '信义区',
|
||||
710108: '士林区',
|
||||
710109: '北投区',
|
||||
710110: '内湖区',
|
||||
710111: '南港区',
|
||||
710112: '文山区',
|
||||
710199: '其它区',
|
||||
710201: '新兴区',
|
||||
710202: '前金区',
|
||||
710203: '芩雅区',
|
||||
710204: '盐埕区',
|
||||
710205: '鼓山区',
|
||||
710206: '旗津区',
|
||||
710207: '前镇区',
|
||||
710208: '三民区',
|
||||
710209: '左营区',
|
||||
710210: '楠梓区',
|
||||
710211: '小港区',
|
||||
710241: '苓雅区',
|
||||
710242: '仁武区',
|
||||
710243: '大社区',
|
||||
710244: '冈山区',
|
||||
710245: '路竹区',
|
||||
710246: '阿莲区',
|
||||
710247: '田寮区',
|
||||
710248: '燕巢区',
|
||||
710249: '桥头区',
|
||||
710250: '梓官区',
|
||||
710251: '弥陀区',
|
||||
710252: '永安区',
|
||||
710253: '湖内区',
|
||||
710254: '凤山区',
|
||||
710255: '大寮区',
|
||||
710256: '林园区',
|
||||
710257: '鸟松区',
|
||||
710258: '大树区',
|
||||
710259: '旗山区',
|
||||
710260: '美浓区',
|
||||
710261: '六龟区',
|
||||
710262: '内门区',
|
||||
710263: '杉林区',
|
||||
710264: '甲仙区',
|
||||
710265: '桃源区',
|
||||
710266: '那玛夏区',
|
||||
710267: '茂林区',
|
||||
710268: '茄萣区',
|
||||
710299: '其它区',
|
||||
710301: '中西区',
|
||||
710302: '东区',
|
||||
710303: '南区',
|
||||
710304: '北区',
|
||||
710305: '安平区',
|
||||
710306: '安南区',
|
||||
710339: '永康区',
|
||||
710340: '归仁区',
|
||||
710341: '新化区',
|
||||
710342: '左镇区',
|
||||
710343: '玉井区',
|
||||
710344: '楠西区',
|
||||
710345: '南化区',
|
||||
710346: '仁德区',
|
||||
710347: '关庙区',
|
||||
710348: '龙崎区',
|
||||
710349: '官田区',
|
||||
710350: '麻豆区',
|
||||
710351: '佳里区',
|
||||
710352: '西港区',
|
||||
710353: '七股区',
|
||||
710354: '将军区',
|
||||
710355: '学甲区',
|
||||
710356: '北门区',
|
||||
710357: '新营区',
|
||||
710358: '后壁区',
|
||||
710359: '白河区',
|
||||
710360: '东山区',
|
||||
710361: '六甲区',
|
||||
710362: '下营区',
|
||||
710363: '柳营区',
|
||||
710364: '盐水区',
|
||||
710365: '善化区',
|
||||
710366: '大内区',
|
||||
710367: '山上区',
|
||||
710368: '新市区',
|
||||
710369: '安定区',
|
||||
710399: '其它区',
|
||||
710401: '中区',
|
||||
710402: '东区',
|
||||
710403: '南区',
|
||||
710404: '西区',
|
||||
710405: '北区',
|
||||
710406: '北屯区',
|
||||
710407: '西屯区',
|
||||
710408: '南屯区',
|
||||
710431: '太平区',
|
||||
710432: '大里区',
|
||||
710433: '雾峰区',
|
||||
710434: '乌日区',
|
||||
710435: '丰原区',
|
||||
710436: '后里区',
|
||||
710437: '石冈区',
|
||||
710438: '东势区',
|
||||
710439: '和平区',
|
||||
710440: '新社区',
|
||||
710441: '潭子区',
|
||||
710442: '大雅区',
|
||||
710443: '神冈区',
|
||||
710444: '大肚区',
|
||||
710445: '沙鹿区',
|
||||
710446: '龙井区',
|
||||
710447: '梧栖区',
|
||||
710448: '清水区',
|
||||
710449: '大甲区',
|
||||
710450: '外埔区',
|
||||
710451: '大安区',
|
||||
710499: '其它区',
|
||||
710507: '金沙镇',
|
||||
710508: '金湖镇',
|
||||
710509: '金宁乡',
|
||||
710510: '金城镇',
|
||||
710511: '烈屿乡',
|
||||
710512: '乌坵乡',
|
||||
710614: '南投市',
|
||||
710615: '中寮乡',
|
||||
710616: '草屯镇',
|
||||
710617: '国姓乡',
|
||||
710618: '埔里镇',
|
||||
710619: '仁爱乡',
|
||||
710620: '名间乡',
|
||||
710621: '集集镇',
|
||||
710622: '水里乡',
|
||||
710623: '鱼池乡',
|
||||
710624: '信义乡',
|
||||
710625: '竹山镇',
|
||||
710626: '鹿谷乡',
|
||||
710701: '仁爱区',
|
||||
710702: '信义区',
|
||||
710703: '中正区',
|
||||
710704: '中山区',
|
||||
710705: '安乐区',
|
||||
710706: '暖暖区',
|
||||
710707: '七堵区',
|
||||
710799: '其它区',
|
||||
710801: '东区',
|
||||
710802: '北区',
|
||||
710803: '香山区',
|
||||
710899: '其它区',
|
||||
710901: '东区',
|
||||
710902: '西区',
|
||||
710999: '其它区',
|
||||
810100: '香港岛',
|
||||
810200: '九龙',
|
||||
810300: '新界',
|
||||
820100: '澳门半岛',
|
||||
820200: '离岛',
|
||||
810000: '香港特别行政区',
|
||||
810001: '中西区',
|
||||
810002: '湾仔区',
|
||||
@ -3528,6 +4026,24 @@ const db: {
|
||||
810016: '沙田区',
|
||||
810017: '葵青区',
|
||||
810018: '离岛区',
|
||||
810101: '中西区',
|
||||
810102: '湾仔区',
|
||||
810103: '东区',
|
||||
810104: '南区',
|
||||
810201: '九龙城区',
|
||||
810202: '油尖旺区',
|
||||
810203: '深水埗区',
|
||||
810204: '黄大仙区',
|
||||
810205: '观塘区',
|
||||
810301: '北区',
|
||||
810302: '大埔区',
|
||||
810303: '沙田区',
|
||||
810304: '西贡区',
|
||||
810305: '元朗区',
|
||||
810306: '屯门区',
|
||||
810307: '荃湾区',
|
||||
810308: '葵青区',
|
||||
810309: '离岛区',
|
||||
820000: '澳门特别行政区',
|
||||
820001: '花地玛堂区',
|
||||
820002: '花王堂区',
|
||||
@ -3536,7 +4052,15 @@ const db: {
|
||||
820005: '风顺堂区',
|
||||
820006: '嘉模堂区',
|
||||
820007: '路凼填海区',
|
||||
820008: '圣方济各堂区'
|
||||
820008: '圣方济各堂区',
|
||||
820102: '花地玛堂区',
|
||||
820103: '花王堂区',
|
||||
820104: '望德堂区',
|
||||
820105: '大堂区',
|
||||
820106: '风顺堂区',
|
||||
820202: '嘉模堂区',
|
||||
820203: '路氹填海区',
|
||||
820204: '圣方济各堂区'
|
||||
};
|
||||
|
||||
export const province: Array<number> = [];
|
||||
|
||||
@ -3,7 +3,8 @@ import {FormItem, FormControlProps, FormBaseControl} from './Item';
|
||||
import {ClassNamesFn, themeable, ThemeProps} from '../../theme';
|
||||
import Spinner from '../../components/Spinner';
|
||||
import Select from '../../components/Select';
|
||||
import {autobind} from '../../utils/helper';
|
||||
import CityArea from '../../components/CityArea';
|
||||
import {autobind, isMobile} from '../../utils/helper';
|
||||
import {Option} from './Options';
|
||||
import {localeable, LocaleProps} from '../../locale';
|
||||
|
||||
@ -65,6 +66,7 @@ export interface CityPickerProps
|
||||
allowCity: boolean;
|
||||
allowDistrict: boolean;
|
||||
allowStreet: boolean;
|
||||
useMobileUI?: boolean;
|
||||
}
|
||||
|
||||
export interface CityPickerState {
|
||||
@ -428,9 +430,23 @@ export class LocationControl extends React.Component<LocationControlProps> {
|
||||
joinValues,
|
||||
allowStreet,
|
||||
disabled,
|
||||
searchable
|
||||
searchable,
|
||||
useMobileUI
|
||||
} = this.props;
|
||||
return (
|
||||
const mobileUI = useMobileUI && isMobile();
|
||||
return mobileUI ? (
|
||||
<CityArea
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
allowCity={allowCity}
|
||||
allowDistrict={allowDistrict}
|
||||
extractValue={extractValue}
|
||||
joinValues={joinValues}
|
||||
allowStreet={allowStreet}
|
||||
disabled={disabled}
|
||||
useMobileUI={useMobileUI}
|
||||
/>
|
||||
) : (
|
||||
<ThemedCity
|
||||
searchable={searchable}
|
||||
value={value}
|
||||
|
||||
@ -9,7 +9,13 @@ import {
|
||||
TestFunc,
|
||||
RendererConfig
|
||||
} from '../../factory';
|
||||
import {anyChanged, ucFirst, getWidthRate, autobind} from '../../utils/helper';
|
||||
import {
|
||||
anyChanged,
|
||||
ucFirst,
|
||||
getWidthRate,
|
||||
autobind,
|
||||
isMobile
|
||||
} from '../../utils/helper';
|
||||
import {observer} from 'mobx-react';
|
||||
import {FormHorizontal, FormSchema, FormSchemaHorizontal} from '.';
|
||||
import {Api, Schema} from '../../types';
|
||||
@ -456,9 +462,11 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
sizeMutable,
|
||||
size,
|
||||
defaultSize,
|
||||
useMobileUI,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
const mobileUI = useMobileUI && isMobile();
|
||||
if (renderControl) {
|
||||
const controlSize = size || defaultSize;
|
||||
return renderControl({
|
||||
@ -470,7 +478,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
className: cx(
|
||||
`Form-control`,
|
||||
{
|
||||
'is-inline': !!rest.inline,
|
||||
'is-inline': !!rest.inline && !mobileUI,
|
||||
'is-error': model && !model.valid,
|
||||
[`Form-control--withSize Form-control--size${ucFirst(
|
||||
controlSize
|
||||
@ -1205,11 +1213,12 @@ export function asFormItem(config: Omit<FormItemConfig, 'component'>) {
|
||||
type,
|
||||
size,
|
||||
defaultSize,
|
||||
useMobileUI,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
const controlSize = size || defaultSize;
|
||||
|
||||
const mobileUI = useMobileUI && isMobile();
|
||||
return (
|
||||
<Control
|
||||
{...rest}
|
||||
@ -1225,7 +1234,7 @@ export function asFormItem(config: Omit<FormItemConfig, 'component'>) {
|
||||
className={cx(
|
||||
`Form-control`,
|
||||
{
|
||||
'is-inline': !!rest.inline,
|
||||
'is-inline': !!rest.inline && !mobileUI,
|
||||
'is-error': model && !model.valid,
|
||||
[`Form-control--withSize Form-control--size${ucFirst(
|
||||
controlSize
|
||||
|
||||
@ -568,12 +568,12 @@ export default class TreeSelectControl extends React.Component<
|
||||
selectedOptions,
|
||||
placeholder,
|
||||
popOverContainer,
|
||||
env,
|
||||
useMobileUI,
|
||||
translate: __
|
||||
} = this.props;
|
||||
|
||||
const {isOpened} = this.state;
|
||||
const {useMobileUI} = env;
|
||||
const mobileUI = useMobileUI && isMobile();
|
||||
return (
|
||||
<div ref={this.container} className={cx(`TreeSelectControl`, className)}>
|
||||
<ResultBox
|
||||
@ -612,7 +612,7 @@ export default class TreeSelectControl extends React.Component<
|
||||
>
|
||||
{loading ? <Spinner size="sm" /> : undefined}
|
||||
</ResultBox>
|
||||
{!(useMobileUI && isMobile()) && isOpened ? (
|
||||
{!mobileUI && isOpened ? (
|
||||
<Overlay
|
||||
container={popOverContainer || (() => this.container.current)}
|
||||
target={() => this.target}
|
||||
@ -631,7 +631,7 @@ export default class TreeSelectControl extends React.Component<
|
||||
</PopOver>
|
||||
</Overlay>
|
||||
) : null}
|
||||
{useMobileUI && isMobile() && (
|
||||
{mobileUI ? (
|
||||
<PopUp
|
||||
className={cx(`${ns}TreeSelect-popup`)}
|
||||
isShow={isOpened}
|
||||
@ -639,7 +639,7 @@ export default class TreeSelectControl extends React.Component<
|
||||
>
|
||||
{this.renderOuter()}
|
||||
</PopUp>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user