test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-11 10:05:07 +08:00
Code Issues Actions 186 Packages Projects Releases Wiki Activity

demo: update segmented demo from Space to Flex (#46114)

Browse Source
This commit is contained in:
lijianan 2023-11-28 11:03:22 +08:00 committed by GitHub
parent 5012049923
commit bb40c380da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 1561 additions and 1704 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx
View File

@ -17,10 +17,9 @@ import {
Tooltip,
} from 'antd';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import Tilt from './Tilt';
import useLocale from '../../../../hooks/useLocale';
import Tilt from './Tilt';
const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal;
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTooltip } = Tooltip;
@ -73,7 +72,6 @@ const locales = {
const useStyle = createStyles(({ token, css }) => {
const gap = token.padding;
return {
holder: css`
width: 500px;
@ -82,7 +80,6 @@ const useStyle = createStyles(({ token, css }) => {
row-gap: ${gap}px;
opacity: 0.8;
`,
flex: css`
display: flex;
flex-wrap: nowrap;
@ -106,29 +103,16 @@ const useStyle = createStyles(({ token, css }) => {
};
});
export interface ComponentsBlockProps {
className?: string;
style?: React.CSSProperties;
}
const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
const { className, style } = props;
const ComponentsBlock: React.FC = () => {
const [locale] = useLocale(locales);
const { styles } = useStyle();
return (
<Tilt
options={{ max: 20, glare: true, scale: 1 }}
className={classNames(className, styles.holder)}
style={style}
>
<Tilt options={{ max: 20, glare: true, scale: 1 }} className={styles.holder}>
<ModalPanel title="Ant Design 5.0" width="100%">
{locale.text}
</ModalPanel>
<Alert message={locale.infoText} type="info" />
{/* Line */}
<div className={styles.flex}>
<ColorPicker style={{ flex: 'none' }} />
@ -144,57 +128,34 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
{locale.dropdown}
</Dropdown.Button>
</div>
<Select
style={{ flex: 'auto' }}
mode="multiple"
maxTagCount="responsive"
defaultValue={[{ value: 'apple' }, { value: 'banana' }]}
options={[
{
value: 'apple',
label: locale.apple,
},
{
value: 'banana',
label: locale.banana,
},
{
value: 'orange',
label: locale.orange,
},
{
value: 'watermelon',
label: locale.watermelon,
},
{ value: 'apple', label: locale.apple },
{ value: 'banana', label: locale.banana },
{ value: 'orange', label: locale.orange },
{ value: 'watermelon', label: locale.watermelon },
]}
/>
<Input style={{ flex: 'none', width: 120 }} />
</div>
<Progress
style={{ margin: 0 }}
percent={100}
strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
/>
<Progress style={{ margin: 0 }} percent={33} status="exception" />
<Steps
current={1}
items={[
{
title: locale.finished,
},
{
title: locale.inProgress,
},
{
title: locale.waiting,
},
{ title: locale.finished },
{ title: locale.inProgress },
{ title: locale.waiting },
]}
/>
{/* Line */}
<div className={styles.block}>
<Slider
@ -205,16 +166,13 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
26: '26°C',
37: '37°C',
100: {
style: {
color: '#f50',
},
style: { color: '#f50' },
label: <strong>100°C</strong>,
},
}}
defaultValue={[26, 37]}
/>
</div>
{/* Line */}
<div className={styles.flex}>
<Button className={styles.ptg_20} type="primary">
@ -231,7 +189,6 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
{locale.icon}
</Button>
</div>
{/* Line */}
<div className={styles.block}>
<div className={styles.flex}>
@ -241,7 +198,6 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}
/>
<Checkbox.Group
className={styles.ptg_none}
options={[locale.apple, locale.banana, locale.orange]}
@ -249,13 +205,10 @@ const ComponentsBlock: React.FC<ComponentsBlockProps> = (props) => {
/>
</div>
</div>
<div>
<InternalMessage content={locale.release} type="success" />
</div>
<InternalTooltip title={locale.hello} placement="topLeft" className={styles.noMargin} />
<Alert message="Ant Design love you!" type="success" />
</Tilt>
);

5
.dumi/pages/index/components/PreviewBanner/Tilt.tsx
View File

@ -1,12 +1,13 @@
import React, { useEffect, useRef } from 'react';
import VanillaTilt, { type TiltOptions } from 'vanilla-tilt';
import VanillaTilt from 'vanilla-tilt';
import type { TiltOptions } from 'vanilla-tilt';
interface TiltProps extends React.HTMLAttributes<HTMLDivElement> {
options?: TiltOptions;
}
// https://micku7zu.github.io/vanilla-tilt.js/index.html
const defaultTiltOptions = {
const defaultTiltOptions: TiltOptions = {
scale: 1.02,
max: 8,
speed: 1500,

2
.dumi/pages/index/components/PreviewBanner/index.tsx
View File

@ -35,7 +35,7 @@ const useStyle = () => {
inset: 0;
backdrop-filter: blur(4px);
opacity: 1;
background: rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.2);
transition: all 1s ease;
pointer-events: none;
`);

58
components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -392,11 +392,8 @@ exports[`renders components/segmented/demo/controlled-two.tsx extend context cor
exports[`renders components/segmented/demo/custom.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-space-item"
>
<div
class="ant-segmented"
>
@ -505,10 +502,6 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
</label>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-segmented"
>
@ -606,7 +599,6 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
</label>
</div>
</div>
</div>
</div>
`;
@ -614,11 +606,8 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 2
exports[`renders components/segmented/demo/disabled.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-space-item"
>
<div
class="ant-segmented ant-segmented-disabled"
>
@ -673,10 +662,6 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
</label>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-segmented"
>
@ -758,7 +743,6 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
</label>
</div>
</div>
</div>
</div>
`;
@ -766,11 +750,8 @@ exports[`renders components/segmented/demo/disabled.tsx extend context correctly
exports[`renders components/segmented/demo/dynamic.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-space-item"
>
<div
class="ant-segmented"
>
@ -822,10 +803,6 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
</label>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
@ -834,7 +811,6 @@ exports[`renders components/segmented/demo/dynamic.tsx extend context correctly
Load more options
</span>
</button>
</div>
</div>
`;
@ -926,11 +902,8 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl
exports[`renders components/segmented/demo/size.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-space-item"
>
<div
class="ant-segmented ant-segmented-lg"
>
@ -1010,10 +983,6 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
</label>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-segmented"
>
@ -1093,10 +1062,6 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
</label>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-segmented ant-segmented-sm"
>
@ -1176,7 +1141,6 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 1`]
</label>
</div>
</div>
</div>
</div>
`;
@ -1184,11 +1148,8 @@ exports[`renders components/segmented/demo/size.tsx extend context correctly 2`]
exports[`renders components/segmented/demo/size-consistent.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-space-item"
>
<div>
<div
class="ant-segmented ant-segmented-lg"
@ -1251,10 +1212,6 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
</span>
</button>
</div>
</div>
<div
class="ant-space-item"
>
<div>
<div
class="ant-segmented"
@ -1316,10 +1273,6 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
value=""
/>
</div>
</div>
<div
class="ant-space-item"
>
<div>
<div
class="ant-segmented ant-segmented-sm"
@ -1490,7 +1443,6 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
</span>
</div>
</div>
</div>
</div>
`;

58
components/segmented/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -382,11 +382,8 @@ Array [
exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-space-item"
>
<div
class="ant-segmented"
>
@ -495,10 +492,6 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
</label>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-segmented"
>
@ -596,17 +589,13 @@ exports[`renders components/segmented/demo/custom.tsx correctly 1`] = `
</label>
</div>
</div>
</div>
</div>
`;
exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-space-item"
>
<div
class="ant-segmented ant-segmented-disabled"
>
@ -661,10 +650,6 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
</label>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-segmented"
>
@ -746,17 +731,13 @@ exports[`renders components/segmented/demo/disabled.tsx correctly 1`] = `
</label>
</div>
</div>
</div>
</div>
`;
exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-space-item"
>
<div
class="ant-segmented"
>
@ -808,10 +789,6 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
</label>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
@ -820,7 +797,6 @@ exports[`renders components/segmented/demo/dynamic.tsx correctly 1`] = `
Load more options
</span>
</button>
</div>
</div>
`;
@ -908,11 +884,8 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-space-item"
>
<div
class="ant-segmented ant-segmented-lg"
>
@ -992,10 +965,6 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
</label>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-segmented"
>
@ -1075,10 +1044,6 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
</label>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-segmented ant-segmented-sm"
>
@ -1158,17 +1123,13 @@ exports[`renders components/segmented/demo/size.tsx correctly 1`] = `
</label>
</div>
</div>
</div>
</div>
`;
exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-space-item"
>
<div>
<div
class="ant-segmented ant-segmented-lg"
@ -1231,10 +1192,6 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
</span>
</button>
</div>
</div>
<div
class="ant-space-item"
>
<div>
<div
class="ant-segmented"
@ -1296,10 +1253,6 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
value=""
/>
</div>
</div>
<div
class="ant-space-item"
>
<div>
<div
class="ant-segmented ant-segmented-sm"
@ -1414,7 +1367,6 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
</span>
</div>
</div>
</div>
</div>
`;

6
components/segmented/demo/basic.tsx
View File

@ -1,4 +1,8 @@
import React from 'react';
import { Segmented } from 'antd';
export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;
const Demo: React.FC = () => (
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
);
export default Demo;

6
components/segmented/demo/block.tsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import { Segmented } from 'antd';
export default () => (
<Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
const Demo: React.FC = () => (
<Segmented options={[123, 456, 'longtext-longtext-longtext-longtext']} block />
);
export default Demo;

4
components/segmented/demo/componentToken.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { ConfigProvider, Segmented } from 'antd';
export default () => (
const Demo: React.FC = () => (
<ConfigProvider
theme={{
components: {
@ -19,3 +19,5 @@ export default () => (
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
</ConfigProvider>
);
export default Demo;

6
components/segmented/demo/custom.tsx
View File

@ -1,9 +1,9 @@
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Segmented, Space } from 'antd';
import { Avatar, Flex, Segmented } from 'antd';
const App: React.FC = () => (
<Space direction="vertical">
<Flex gap="small" align="flex-start" vertical>
<Segmented
options={[
{
@ -75,7 +75,7 @@ const App: React.FC = () => (
},
]}
/>
</Space>
</Flex>
);
export default App;

6
components/segmented/demo/disabled.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { Segmented, Space } from 'antd';
import { Flex, Segmented } from 'antd';
const App: React.FC = () => (
<Space direction="vertical">
<Flex gap="small" align="flex-start" vertical>
<Segmented options={['Map', 'Transit', 'Satellite']} disabled />
<Segmented
options={[
@ -13,7 +13,7 @@ const App: React.FC = () => (
'Yearly',
]}
/>
</Space>
</Flex>
);
export default App;

6
components/segmented/demo/dynamic.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Segmented, Button, Space } from 'antd';
import { Button, Flex, Segmented } from 'antd';
const Demo: React.FC = () => {
const [options, setOptions] = useState(['Daily', 'Weekly', 'Monthly']);
@ -11,12 +11,12 @@ const Demo: React.FC = () => {
};
return (
<Space direction="vertical">
<Flex gap="small" align="flex-start" vertical>
<Segmented options={options} />
<Button type="primary" disabled={moreLoaded} onClick={handleLoadOptions}>
Load more options
</Button>
</Space>
</Flex>
);
};

14
components/segmented/demo/icon-only.tsx
View File

@ -2,17 +2,13 @@ import React from 'react';
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
import { Segmented } from 'antd';
export default () => (
const Demo: React.FC = () => (
<Segmented
options={[
{
value: 'List',
icon: <BarsOutlined />,
},
{
value: 'Kanban',
icon: <AppstoreOutlined />,
},
{ value: 'List', icon: <BarsOutlined /> },
{ value: 'Kanban', icon: <AppstoreOutlined /> },
]}
/>
);
export default Demo;

6
components/segmented/demo/size-consistent.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { Button, Input, Select, Segmented, Space } from 'antd';
import { Button, Flex, Input, Segmented, Select } from 'antd';
const App: React.FC = () => (
<Space direction="vertical">
<Flex gap="small" vertical>
<div>
<Segmented style={{ marginRight: 6 }} size="large" options={['Daily', 'Weekly', 'Monthly']} />
<Button type="primary" size="large">
@ -19,7 +19,7 @@ const App: React.FC = () => (
<Select.Option value="lucy">Lucy</Select.Option>
</Select>
</div>
</Space>
</Flex>
);
export default App;

6
components/segmented/demo/size.tsx
View File

@ -1,12 +1,12 @@
import React from 'react';
import { Segmented, Space } from 'antd';
import { Flex, Segmented } from 'antd';
const App: React.FC = () => (
<Space direction="vertical">
<Flex gap="small" align="flex-start" vertical>
<Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
<Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
<Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
</Space>
</Flex>
);
export default App;

16
components/segmented/demo/with-icon.tsx
View File

@ -2,19 +2,13 @@ import React from 'react';
import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
import { Segmented } from 'antd';
export default () => (
const Demo: React.FC = () => (
<Segmented
options={[
{
label: 'List',
value: 'List',
icon: <BarsOutlined />,
},
{
label: 'Kanban',
value: 'Kanban',
icon: <AppstoreOutlined />,
},
{ label: 'List', value: 'List', icon: <BarsOutlined /> },
{ label: 'Kanban', value: 'Kanban', icon: <AppstoreOutlined /> },
]}
/>
);
export default Demo;

1
components/segmented/style/index.tsx → components/segmented/style/index.ts
View File

@ -1,4 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { resetComponent, textEllipsis } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';