Oak-Team
/
oak-general-business
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 38 Wiki Activity

地图组件

This commit is contained in:
Wang Kejun 2022-10-27 15:09:59 +08:00
parent 2c09ea7d5e
commit d7c1cf7536
2 changed files with 75 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/amap/location/index.less
View File

@ -7,6 +7,7 @@
&-list { &-list {
height: 500px; height: 500px;
overflow: auto;
&-header { &-header {
display: flex; display: flex;
@ -15,7 +16,8 @@
} }
&-checked { &-checked {
color: var(--oak-brand-color); color: var(--oak-primary-color);
font-size: 24px;
} }
&-loadingBox { &-loadingBox {
@ -24,16 +26,5 @@
justify-content: center; justify-content: center;
min-height: 100px; min-height: 100px;
} }
&-noData {
display: flex;
flex-direction: row;
justify-content: center;
min-height: 100px;
align-items: center;
color: var(--oak-text-color-placeholder);
align-self: center;
}
} }
} }

137
src/components/amap/location/index.tsx
View File

@ -1,23 +1,22 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { import {
Dialog, Modal,
Row, Row,
Col, Col,
List, ModalProps,
Input,
InputValue,
Button, Button,
Loading, Input,
DialogProps, List,
} from 'tdesign-react'; Empty,
import { SearchIcon, CheckCircleFilledIcon } from 'tdesign-icons-react'; Spin,
} from 'antd';
import { SearchOutlined, CheckCircleFilled } from '@ant-design/icons';
import { Geolocation, GeolocationProps } from '@uiw/react-amap'; import { Geolocation, GeolocationProps } from '@uiw/react-amap';
import Map from './../map'; import Map from './../map';
import PositionPicker from './PositionPicker' import PositionPicker from './PositionPicker'
import './index.less'; import './index.less';
const { ListItem, ListItemMeta } = List;
export type LocationProps = { export type LocationProps = {
akey: string; akey: string;
@ -32,7 +31,7 @@ export type LocationProps = {
) => void; ) => void;
geolocationProps?: GeolocationProps; geolocationProps?: GeolocationProps;
useGeolocation?: boolean; useGeolocation?: boolean;
dialogProps?: DialogProps; dialogProps?: ModalProps;
}; };
export type Poi = { export type Poi = {
@ -72,8 +71,8 @@ const Location = (props: LocationProps) => {
} = props; } = props;
const prefixCls = 'oak'; const prefixCls = 'oak';
const searchRef = useRef(); const searchRef = useRef<any>();
const [searchValue, setSearchValue] = useState<InputValue>(''); const [searchValue, setSearchValue] = useState<string>('');
const [refresh, setRefresh] = useState(true); // 点击poi不触发setPositionPickerResult const [refresh, setRefresh] = useState(true); // 点击poi不触发setPositionPickerResult
const [mode, setMode] = useState<Mode>('dragMap'); const [mode, setMode] = useState<Mode>('dragMap');
@ -224,15 +223,18 @@ const Location = (props: LocationProps) => {
return ( return (
<Dialog <Modal
width="80%" width="80%"
okText="确定"
cancelText="取消"
title="选择位置"
{...dialogProps} {...dialogProps}
visible={visible} open={visible}
onClose={() => { onCancel={() => {
onClose && onClose(); onClose && onClose();
clearData(); clearData();
}} }}
onConfirm={() => { onOk={() => {
if (!currentPoi) { if (!currentPoi) {
return; return;
} }
@ -245,8 +247,8 @@ const Location = (props: LocationProps) => {
}} }}
> >
<div className={`${prefixCls}-location`}> <div className={`${prefixCls}-location`}>
<Row> <Row gutter={[16, 16]}>
<Col xs={12} sm={7}> <Col xs={24} sm={14}>
<Map <Map
className={`${prefixCls}-location-map`} className={`${prefixCls}-location-map`}
akey={akey} akey={akey}
@ -290,7 +292,7 @@ const Location = (props: LocationProps) => {
)} )}
</Map> </Map>
</Col> </Col>
<Col xs={12} sm={5}> <Col xs={24} sm={10}>
<div> <div>
<List <List
className={`${prefixCls}-location-list`} className={`${prefixCls}-location-list`}
@ -302,14 +304,11 @@ const Location = (props: LocationProps) => {
ref={searchRef} ref={searchRef}
placeholder="搜索地点" placeholder="搜索地点"
value={searchValue} value={searchValue}
clearable allowClear
onChange={(value) => { onChange={(e) => {
setSearchValue(value); setSearchValue(e.target.value);
}} }}
onClear={() => { prefix={<SearchOutlined />}
setSearchValue('');
}}
prefixIcon={<SearchIcon />}
onFocus={() => { onFocus={() => {
setMode('searchPoi'); setMode('searchPoi');
setFocus(true); setFocus(true);
@ -321,8 +320,7 @@ const Location = (props: LocationProps) => {
{mode === 'searchPoi' && ( {mode === 'searchPoi' && (
<Button <Button
style={{ marginLeft: 5 }} style={{ marginLeft: 5 }}
variant="text" type="link"
theme="primary"
onClick={() => { onClick={() => {
setMode('dragMap'); setMode('dragMap');
setSearchValue(''); setSearchValue('');
@ -347,24 +345,23 @@ const Location = (props: LocationProps) => {
setCurrentPoi(poi); setCurrentPoi(poi);
}} }}
> >
<ListItem <List.Item
action={ actions={[
currentPoi?.id ===
poi.id ? (
<CheckCircleFilledIcon
className={`${prefixCls}-location-list-checked`}
size={24}
/>
) : (
<div <div
style={{ style={{
width: 24, width: 24,
}} }}
/>
)
}
> >
<ListItemMeta {currentPoi?.id ===
poi.id && (
<CheckCircleFilled
className={`${prefixCls}-location-list-checked`}
/>
)}
</div>,
]}
>
<List.Item.Meta
title={poi.name} title={poi.name}
description={`${ description={`${
poi.distance poi.distance
@ -372,7 +369,7 @@ const Location = (props: LocationProps) => {
: '' : ''
}${poi.address}`} }${poi.address}`}
/> />
</ListItem> </List.Item>
</div> </div>
); );
})} })}
@ -382,15 +379,10 @@ const Location = (props: LocationProps) => {
<div <div
className={`${prefixCls}-location-list-loadingBox`} className={`${prefixCls}-location-list-loadingBox`}
> >
<Loading <Spin
delay={0} delay={0}
fullscreen={false} spinning
indicator size="default"
inheritColor={false}
loading
preventScrollThrough
showOverlay
size="medium"
/> />
</div> </div>
)} )}
@ -406,26 +398,23 @@ const Location = (props: LocationProps) => {
); );
}} }}
> >
<ListItem <List.Item
action={ actions={[
currentPoi?.id ===
poi.id ? (
<CheckCircleFilledIcon
className={`${prefixCls}-location-list-checked`}
size={
24
}
/>
) : (
<div <div
style={{ style={{
width: 24, width: 24,
}} }}
/>
)
}
> >
<ListItemMeta {currentPoi?.id ===
poi.id && (
<CheckCircleFilled
className={`${prefixCls}-location-list-checked`}
/>
)}
</div>,
]}
>
<List.Item.Meta
title={ title={
poi.name poi.name
} }
@ -437,16 +426,18 @@ const Location = (props: LocationProps) => {
poi.address poi.address
}`} }`}
/> />
</ListItem> </List.Item>
</div> </div>
); );
}) })
: show && ( : show &&
<div !searchLoading && (
className={`${prefixCls}-location-list-noData`} <Empty
> description="无搜索结果"
无搜素结果 image={
</div> Empty.PRESENTED_IMAGE_SIMPLE
}
/>
)} )}
</React.Fragment> </React.Fragment>
)} )}
@ -455,7 +446,7 @@ const Location = (props: LocationProps) => {
</Col> </Col>
</Row> </Row>
</div> </div>
</Dialog> </Modal>
); );
}; };