test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

site: make icon search affix (#40002)

Browse Source 
* feature: update IconDisplay component in Icon docs template, affix icon search input box to the top of page

* style: change shadow style

Co-authored-by: Chang Wei <changwei1006@gmail.com>
This commit is contained in:
afc163 2023-01-04 18:49:55 +08:00 committed by GitHub
parent 7b06b662d1
commit df4542e20c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
.dumi/theme/builtins/IconSearch/index.tsx
View File

@ -1,13 +1,13 @@
import * as React from 'react';
import Icon, * as AntdIcons from '@ant-design/icons';
import { Radio, Input, Empty } from 'antd';
import type { RadioChangeEvent } from 'antd/es/radio/interface';
import { Segmented, Input, Empty, Affix } from 'antd';
import { useIntl } from 'dumi';
import debounce from 'lodash/debounce';
import Category from './Category';
import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
import type { CategoriesKeys } from './fields';
import { categories } from './fields';
import useSiteToken from '../../../hooks/useSiteToken';
export enum ThemeType {
Filled = 'Filled',
@ -38,8 +38,8 @@ const IconSearch: React.FC = () => {
[],
);
const handleChangeTheme = React.useCallback((e: RadioChangeEvent) => {
setDisplayState((prevState) => ({ ...prevState, theme: e.target.value as ThemeType }));
const handleChangeTheme = React.useCallback((value) => {
setDisplayState((prevState) => ({ ...prevState, theme: value as ThemeType }));
}, []);
const renderCategories = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
@ -79,37 +79,63 @@ const IconSearch: React.FC = () => {
));
return categoriesResult.length === 0 ? <Empty style={{ margin: '2em 0' }} /> : categoriesResult;
}, [displayState.searchKey, displayState.theme]);
const [searchBarAffixed, setSearchBarAffixed] = React.useState(false);
const { token } = useSiteToken();
const { borderRadius, colorBgContainer } = token;
const affixedStyle = searchBarAffixed
? {
boxShadow: 'rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px',
padding: 8,
margin: -8,
borderRadius,
background: colorBgContainer,
}
: {};
return (
<div className="markdown">
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Radio.Group
<Affix offsetTop={24} onChange={(affixed) => setSearchBarAffixed(affixed)}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
transition: 'all .3s',
...affixedStyle,
}}
>
<Segmented
value={displayState.theme}
onChange={handleChangeTheme}
size="large"
buttonStyle="solid"
>
<Radio.Button value={ThemeType.Outlined}>
<Icon component={OutlinedIcon} />{' '}
{intl.formatMessage({ id: 'app.docs.components.icon.outlined' })}
</Radio.Button>
<Radio.Button value={ThemeType.Filled}>
<Icon component={FilledIcon} />{' '}
{intl.formatMessage({ id: 'app.docs.components.icon.filled' })}
</Radio.Button>
<Radio.Button value={ThemeType.TwoTone}>
<Icon component={TwoToneIcon} />{' '}
{intl.formatMessage({ id: 'app.docs.components.icon.two-tone' })}
</Radio.Button>
</Radio.Group>
options={[
{
icon: <Icon component={OutlinedIcon} />,
label: intl.formatMessage({ id: 'app.docs.components.icon.outlined' }),
value: ThemeType.Outlined,
},
{
icon: <Icon component={FilledIcon} />,
label: intl.formatMessage({ id: 'app.docs.components.icon.filled' }),
value: ThemeType.Filled,
},
{
icon: <Icon component={TwoToneIcon} />,
label: intl.formatMessage({ id: 'app.docs.components.icon.two-tone' }),
value: ThemeType.TwoTone,
},
]}
/>
<Input.Search
placeholder={intl.formatMessage({ id: 'app.docs.components.icon.search.placeholder' })}
style={{ margin: '0 10px', flex: 1 }}
style={{ flex: 1, marginInlineStart: 16 }}
allowClear
onChange={(e) => handleSearchIcon(e.currentTarget.value)}
size="large"
autoFocus
/>
</div>
</Affix>
{renderCategories}
</div>
);