tachybase_todo/packages/plugins/map/src/client/components/Search.tsx
Dunqing a593720c81
feat: add map plugin (#1229)
* feat: add map plugin

* feat: update

* feat: add Map.Designer

* feat: support polygon and clear canvas

* feat: improve and support linestring

* feat: map type default

* feat: support group order

* feat: support register group

* feat: improve named and logic

* fix: rename

* feat: better

* refactor: move to use postgresSQL supported type

* feat: support circle

* feat: support mysql

* chore: @nocobase/plugin-map

* fix: some error in postgres

* fix: line lose

* fix: accessKey or securityCode is incorrect

* fix: improve

* fix: shake screen in modal

* feat: support serviceHOST

* feat: improve

* feat: support view map in detail

* feat: support patten in details

* fix: something went wrong in edit mode

* fix: field name incorrectly

* feat: support sqlite

* feat: support circle in mysql

* feat: support map configuration

* feat: support map configuration

* fix: remove unused div

* feat: support show map in details

* fix: disabled in details

* fix: unused

* feat: improve readpretty

* fix: schemaInitialize

* feat: improve alert and search

* fix: mysql polygon not work

* test: add fields test

* test: improve

* test: update

* fix: test error

* feat: improve search and support zoom

* fix: if success should reset err message

* feat: add isOverride to confirm

* feat: improve
2022-12-14 21:45:43 +08:00

94 lines
2.1 KiB
TypeScript

import { message, Select } from 'antd';
import { css } from '@emotion/css';
import React, { useEffect, useRef, useState } from 'react';
import { useDebounceFn } from 'ahooks';
import { useMapTranslation } from '../locales';
interface SearchProps {
aMap: any;
toCenter: (p: any) => void;
}
const Search = (props: SearchProps) => {
const { aMap, toCenter } = props;
const { t } = useMapTranslation();
const placeSearch = useRef<any>();
const [options, setOptions] = useState([]);
useEffect(() => {
aMap?.plugin('AMap.PlaceSearch', () => {
placeSearch.current = new aMap.PlaceSearch({
city: '全国',
pageSize: 30,
});
});
}, [aMap]);
const { run: onSearch } = useDebounceFn(
(keyword) => {
if (!placeSearch.current) {
return;
}
placeSearch.current.search(keyword || ' ', (status, result) => {
if (status === 'complete') {
setOptions(
result.poiList.pois.map((item) => {
return {
...item,
label: `${item.name}-${item.address}`,
value: item.id,
};
}),
);
} else {
if (status === 'no_data') {
setOptions([]);
return;
}
message.error(t('Please configure the AMap securityCode or securityHost correctly'));
}
});
},
{
wait: 300,
},
);
const onSelect = (value) => {
const place = options.find((o) => {
return o.value === value;
});
if (place?.location) {
toCenter(place.location);
}
};
return (
<div
className={css`
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
width: calc(100% - 20px);
`}
>
<Select
showSearch
allowClear
style={{
background: 'rgba(255, 255, 255, 0.8)',
}}
placeholder={t('Enter keywords to search')}
filterOption={false}
onSearch={onSearch}
onSelect={onSelect}
options={options}
></Select>
</div>
);
};
export default Search;