Skip to content

Commit a5a2c86

Browse files
SuperHuZhiPengSuperHuZhiPeng
committed
【update】符号搜索改为全局，支持id搜索
(review by ytt)
1 parent cb4bb84 commit a5a2c86

File tree

8 files changed

+79
-47
lines changed

8 files changed

+79
-47
lines changed

‎examples/mapboxgl-v2/src/components/icon-card/index.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,26 @@ import classNames from 'classnames';
55
interface IconCardContentProps {
66
imgUrl?: string;
77
background?: string;
8+
id: string;
89
title: string;
910
onIconClick: () => void;
1011
isSelected?: boolean;
1112
imgClassName?: string;
1213
}
1314

1415
const IconCard = (props: IconCardContentProps) => {
15-
const { imgUrl, title, isSelected, background, imgClassName, onIconClick } = props;
16+
const { imgUrl, title, id, isSelected, background, imgClassName, onIconClick } = props;
1617
return (
1718
<div className={classNames("icon-image", { 'selected': isSelected })} onClick={onIconClick}>
1819
<div className='img-content'>
1920
{
2021
imgUrl ? <img src={imgUrl} className={imgClassName} /> : <div className={imgClassName} style={{ background }} />
2122
}
2223
</div>
23-
<div className='title-content' title={title}>{title}</div>
24+
<div className='title-content' title={`${title}\n${id}`}>
25+
<div className='icon-title'>{title}</div>
26+
<div className='icon-id'>{id}</div>
27+
</div>
2428
</div>
2529
)
2630
}

‎examples/mapboxgl-v2/src/components/icon-card/style/index.less

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
.icon-image {
2-
width: 56px;
2+
width: 57px;
3+
height: 100px;
34
margin: 0 8px 12px 0;
4-
cursor: pointer;
55
display: inline-block;
6+
vertical-align: middle;
7+
cursor: pointer;
68
&.selected .img-content{
79
border-color: #269FF0;
810
}
911
.img-content {
10-
width: 56px;
1112
height: 42px;
1213
background: #FFFFFF;
1314
border-radius: 4px;
@@ -36,18 +37,23 @@
3637
.title-content {
3738
text-align: start;
3839
margin-top: 4px;
39-
width: 56px;
40-
height: 40px;
40+
width: 60px;
4141
font-size: 12px;
42-
font-family: MicrosoftYaHei;
4342
color: rgba(255, 255, 255, 0.65);
44-
line-height: 20px;
45-
display: -webkit-box;
46-
overflow: hidden;
47-
-webkit-box-orient: vertical;
48-
-webkit-line-clamp: 2;
49-
word-break: break-all;
5043
color: rgba(0, 0, 0, 0.45);
44+
.icon-title {
45+
display: -webkit-box;
46+
overflow: hidden;
47+
-webkit-box-orient: vertical;
48+
-webkit-line-clamp: 2;
49+
word-break: break-all;
50+
margin-bottom: 4px;
51+
}
52+
.icon-id {
53+
text-overflow: ellipsis;
54+
white-space: nowrap;
55+
overflow: hidden;
56+
}
5157
}
5258
}
5359

‎examples/mapboxgl-v2/src/modules/classify-selector/LineBuiltInContent.tsx

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,33 @@
1-
import React from 'react';
2-
import { BasicCategoryOptions, BasicStyleIconIds, BasicCategoryStyles,AutoCategoryOptions, AutoStyleIconIds, LandStyleIconIds } from '../../../static/symbol-infos/LineInfo';
1+
import React, { useState } from 'react';
2+
import { BasicCategoryOptions, BasicStyleIconIds, BasicCategoryStyles, AutoCategoryOptions, AutoStyleIconIds, LandStyleIconIds } from '../../../static/symbol-infos/LineInfo';
33
import ClassifyTabs from '../../components/classify-tabs';
44
import SymbolSelector from '../symbol-selector';
5+
import SearchEditor from '../../components/search-editor';
6+
import './style';
57

68
interface LineBuiltInContentProps {
79
selectedSymbolId?: string;
810
onIconClick: (id: string) => void;
911
}
1012

1113
const LineBuiltInContent = (props: LineBuiltInContentProps) => {
14+
const [searchValue, setSearchValue] = useState('');
1215
const { selectedSymbolId, onIconClick } = props;
13-
const baseSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='base' options={BasicCategoryOptions} styles={BasicCategoryStyles} iconIds={BasicStyleIconIds} type='line' />
14-
const autoSelectorConent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='auto' options={AutoCategoryOptions} iconIds={AutoStyleIconIds} type='line' />
15-
const landSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='land' iconIds={LandStyleIconIds} type='line' />
16+
const baseSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='base' options={BasicCategoryOptions} styles={BasicCategoryStyles} iconIds={BasicStyleIconIds} type='line' searchValue={searchValue} />
17+
const autoSelectorConent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='auto' options={AutoCategoryOptions} iconIds={AutoStyleIconIds} type='line' searchValue={searchValue} />
18+
const landSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='land' iconIds={LandStyleIconIds} type='line' searchValue={searchValue} />
1619

1720
return (
18-
<ClassifyTabs
19-
baseSelectorContent={baseSelectorContent}
20-
autoSelectorConent={autoSelectorConent}
21-
landSelectorContent={landSelectorContent}
22-
/>
21+
<>
22+
<SearchEditor onSearchValueChange={(v) => {
23+
setSearchValue(v);
24+
}} />
25+
<ClassifyTabs
26+
baseSelectorContent={baseSelectorContent}
27+
autoSelectorConent={autoSelectorConent}
28+
landSelectorContent={landSelectorContent}
29+
/>
30+
</>
2331
)
2432
}
2533

‎examples/mapboxgl-v2/src/modules/classify-selector/PointBuiltInContent.tsx

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { BasicCategoryOptions, BasicStyleIconIds, BasicCategoryStyles, AutoCategoryOptions, AutoStyleIconIds, LandCategoryOptions, LandStyleIconIds } from '../../../static/symbol-infos/PointInfo';
33
import ClassifyTabs from '../../components/classify-tabs';
44
import SymbolSelector from '../symbol-selector';
5-
5+
import SearchEditor from '../../components/search-editor';
6+
import './style';
67
interface PointBuiltInContentProps {
78
onIconClick: (id: string) => void;
89
selectedSymbolId?: string;
910
}
1011

1112
const PointBuiltInContent = (props: PointBuiltInContentProps) => {
13+
const [searchValue, setSearchValue] = useState('');
1214
const { selectedSymbolId, onIconClick } = props;
13-
const baseSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='base' options={BasicCategoryOptions} styles={BasicCategoryStyles} iconIds={BasicStyleIconIds} type='point' />
14-
const autoSelectorConent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='auto' options={AutoCategoryOptions} iconIds={AutoStyleIconIds} type='point' />
15-
const landSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='land' options={LandCategoryOptions} iconIds={LandStyleIconIds} type='point' />
15+
16+
const baseSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='base' options={BasicCategoryOptions} styles={BasicCategoryStyles} iconIds={BasicStyleIconIds} type='point' searchValue={searchValue} />
17+
const autoSelectorConent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='auto' options={AutoCategoryOptions} iconIds={AutoStyleIconIds} type='point' searchValue={searchValue} />
18+
const landSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='land' options={LandCategoryOptions} iconIds={LandStyleIconIds} type='point' searchValue={searchValue} />
1619

1720
return (
1821
<>
22+
<SearchEditor onSearchValueChange={(v) => {
23+
setSearchValue(v);
24+
}} />
1925
<ClassifyTabs
2026
baseSelectorContent={baseSelectorContent}
2127
autoSelectorConent={autoSelectorConent}

‎examples/mapboxgl-v2/src/modules/classify-selector/PolygonBuiltInContent.tsx

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,33 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { BasicCategoryOptions, BasicStyleIconIds, AutoCategoryOptions, AutoStyleIconIds, LandCategoryOptions, LandStyleIconIds } from '../../../static/symbol-infos/PolygonInfo';
33
import ClassifyTabs from '../../components/classify-tabs';
44
import SymbolSelector from '../symbol-selector';
5+
import SearchEditor from '../../components/search-editor';
6+
import './style';
57

68
interface PolygonBuiltInContentProps {
79
onIconClick: (id: string) => void;
810
selectedSymbolId?: string;
911
}
1012

1113
const PolygonBuiltInContent = (props: PolygonBuiltInContentProps) => {
14+
const [searchValue, setSearchValue] = useState('');
1215
const { selectedSymbolId, onIconClick } = props;
13-
const baseSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='base' options={BasicCategoryOptions} iconIds={BasicStyleIconIds} type='polygon' />
14-
const autoSelectorConent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='auto' options={AutoCategoryOptions} iconIds={AutoStyleIconIds} type='polygon' />
15-
const landSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='land' options={LandCategoryOptions} iconIds={LandStyleIconIds} type='polygon' />
16+
const baseSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='base' options={BasicCategoryOptions} iconIds={BasicStyleIconIds} type='polygon' searchValue={searchValue} />
17+
const autoSelectorConent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='auto' options={AutoCategoryOptions} iconIds={AutoStyleIconIds} type='polygon' searchValue={searchValue} />
18+
const landSelectorContent = <SymbolSelector selectedSymbolId={selectedSymbolId} onIconClick={onIconClick} symbolType='land' options={LandCategoryOptions} iconIds={LandStyleIconIds} type='polygon' searchValue={searchValue} />
1619

1720
return (
18-
<ClassifyTabs
19-
baseSelectorContent={baseSelectorContent}
20-
autoSelectorConent={autoSelectorConent}
21-
landSelectorContent={landSelectorContent}
22-
/>
21+
<>
22+
<SearchEditor onSearchValueChange={(v) => {
23+
setSearchValue(v);
24+
}} />
25+
<ClassifyTabs
26+
baseSelectorContent={baseSelectorContent}
27+
autoSelectorConent={autoSelectorConent}
28+
landSelectorContent={landSelectorContent}
29+
/>
30+
</>
2331
)
2432
}
2533

‎examples/mapboxgl-v2/src/modules/classify-selector/style/index.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.style-setting-search {
2+
margin-bottom: 12px;
3+
}

‎examples/mapboxgl-v2/src/modules/classify-selector/style/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './index.less';

‎examples/mapboxgl-v2/src/modules/symbol-selector/index.tsx

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import SelectEditor from '../../components/select-editor';
44
import './style';
55
import IconCard from '../../components/icon-card';
66
import EditorLayout from '../../components/editor-layout';
7-
import SearchEditor from '../../components/search-editor';
87
interface SymbolContentProps {
98
onIconClick: (id: string) => void;
109
symbolType: string;
@@ -16,12 +15,12 @@ interface SymbolContentProps {
1615
iconIds?: any;
1716
type: string;
1817
selectedSymbolId?: string;
18+
searchValue: string;
1919
}
2020

2121
const SymbolSelector = (props: SymbolContentProps) => {
22-
const { symbolType, onIconClick, options, styles, iconIds, type, selectedSymbolId } = props;
22+
const { symbolType, onIconClick, options, styles, iconIds, type, selectedSymbolId, searchValue } = props;
2323
const [activeCategory, setActiveCategory] = useState<any>(options?.[0]?.value);
24-
const [searchValue, setSearchValue] = useState('');
2524
const activeStyleOptions = styles?.[activeCategory];
2625
symbolType === "base" && activeStyleOptions && activeStyleOptions?.[0]?.value !== 'all' && activeStyleOptions.unshift({
2726
"value": "all",
@@ -73,7 +72,7 @@ const SymbolSelector = (props: SymbolContentProps) => {
7372
return symbolInfos?.map(({ id, name }) => {
7473
const newSymbolId = type + '-' + id;
7574
const {color, imageUrl} = getImageUrl(id);
76-
return <IconCard key={type + id} background={color} imgUrl={imageUrl} title={name} imgClassName={imgClass[type]} onIconClick={() => {
75+
return <IconCard key={type + id} background={color} imgUrl={imageUrl} title={name} id={id} imgClassName={imgClass[type]} onIconClick={() => {
7776
onIconClick(newSymbolId);
7877
}} isSelected={newSymbolId === selectedSymbolId} />
7978
});
@@ -121,15 +120,12 @@ const SymbolSelector = (props: SymbolContentProps) => {
121120
const getSearchResultSymbol = () => {
122121
const allIcons: { id: string, name: string }[] = [];
123122
getAllIconIds(allIcons, iconIds);
124-
const searchResutl = allIcons.filter((el) => el.name.includes(searchValue));
123+
const searchResutl = allIcons.filter((el) => (el.name.includes(searchValue) || el.id.includes(searchValue)));
125124
return getSymbol(searchResutl);
126125
};
127126

128127
return (
129128
<div>
130-
<SearchEditor onSearchValueChange={(v) => {
131-
setSearchValue(v);
132-
}} />
133129
{searchValue ?
134130
<ScrollPanel hideScrollX small style={{ height: 516 }}>
135131
{getSearchResultSymbol()}
@@ -141,7 +137,7 @@ const SymbolSelector = (props: SymbolContentProps) => {
141137
{activeStyle && <EditorLayout title='风格'>
142138
<SelectEditor options={activeStyleOptions} value={activeStyle} onChange={setActiveStyle} />
143139
</EditorLayout>}
144-
<ScrollPanel hideScrollX small style={{ height: activeStyle ? 428 : 468, marginTop: 16 }}>
140+
<ScrollPanel hideScrollX small style={{ height: activeStyle ? 477 : 517, marginTop: 16 }}>
145141
{
146142
activeStyleOptions && activeStyle === 'all' ? getBaseAllSymbol() : getSymbol(ids)
147143
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy