mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
docs: update RangePicker month demo (#48844)
* docs: clean up useless code * docs: update demo * docs: fix typo
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
5ee92d3dc0
commit
cf6e9c8b6e
@ -1,183 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { Button, Flex, Typography } from 'antd';
|
||||
import { createStyles, css, useTheme } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
import { Link, useLocation } from 'dumi';
|
||||
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import SiteContext from '../../../theme/slots/SiteContext';
|
||||
import * as utils from '../../../theme/utils';
|
||||
import GroupMaskLayer from './GroupMaskLayer';
|
||||
|
||||
const locales = {
|
||||
cn: {
|
||||
slogan: '助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～',
|
||||
start: '开始使用',
|
||||
designLanguage: '设计语言',
|
||||
},
|
||||
en: {
|
||||
slogan:
|
||||
'Help designers/developers building beautiful products more flexible and working with happiness',
|
||||
start: 'Getting Started',
|
||||
designLanguage: 'Design Language',
|
||||
},
|
||||
};
|
||||
|
||||
const useStyle = () => {
|
||||
const { isMobile } = React.useContext(SiteContext);
|
||||
return createStyles(({ token }) => ({
|
||||
titleBase: css`
|
||||
h1& {
|
||||
font-family: AliPuHui, ${token.fontFamily};
|
||||
}
|
||||
`,
|
||||
title: isMobile
|
||||
? css`
|
||||
h1& {
|
||||
margin-bottom: ${token.margin}px;
|
||||
font-weight: normal;
|
||||
font-size: ${token.fontSizeHeading1 + 2}px;
|
||||
line-height: ${token.lineHeightHeading2};
|
||||
}
|
||||
`
|
||||
: css`
|
||||
h1& {
|
||||
margin-bottom: ${token.marginMD}px;
|
||||
font-weight: 900;
|
||||
font-size: 68px;
|
||||
}
|
||||
`,
|
||||
btnWrap: css`
|
||||
margin-bottom: ${token.marginXL}px;
|
||||
`,
|
||||
layer: css`
|
||||
text-align: center;
|
||||
padding-top: ${token.marginFar - 16}px;
|
||||
padding-bottom: ${token.marginFarSM}px;
|
||||
`,
|
||||
mobileBg: css`
|
||||
width: 100%;
|
||||
`,
|
||||
videoWrap: css`
|
||||
height: 320px;
|
||||
background-color: #77c6ff;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
`,
|
||||
video: css`
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
`,
|
||||
bg: css`
|
||||
flex: auto;
|
||||
background-repeat: repeat-x;
|
||||
background-size: auto 100%;
|
||||
`,
|
||||
bg1: css`
|
||||
background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ);
|
||||
background-position: 100% 0;
|
||||
`,
|
||||
bg2: css`
|
||||
background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ);
|
||||
background-position: 0 0;
|
||||
margin-inline-start: -1px;
|
||||
`,
|
||||
logoWrap: css`
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
`,
|
||||
bgImg: css`
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
`,
|
||||
}))();
|
||||
};
|
||||
|
||||
const Banner: React.FC<React.PropsWithChildren> = ({ children }) => {
|
||||
const [locale] = useLocale(locales);
|
||||
const { pathname, search } = useLocation();
|
||||
const token = useTheme();
|
||||
const { styles } = useStyle();
|
||||
const { isMobile } = React.useContext(SiteContext);
|
||||
const isZhCN = utils.isZhCN(pathname);
|
||||
return (
|
||||
<>
|
||||
{/* Banner Placeholder Motion */}
|
||||
{isMobile ? (
|
||||
<img
|
||||
className={styles.mobileBg}
|
||||
src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JmlaR5oQn3MAAAAAAAAAAAAADrJ8AQ/original"
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<div className={classNames(styles.videoWrap)}>
|
||||
<div className={classNames(styles.bg, styles.bg1)} />
|
||||
<video className={styles.video} autoPlay muted loop>
|
||||
<source
|
||||
type="video/webm"
|
||||
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
|
||||
/>
|
||||
<source
|
||||
type="video/mp4"
|
||||
src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
|
||||
/>
|
||||
</video>
|
||||
<div className={classNames(styles.bg, styles.bg2)} />
|
||||
</div>
|
||||
)}
|
||||
{/* Logo */}
|
||||
<div className={styles.logoWrap}>
|
||||
{/* Image Bottom Right */}
|
||||
<img
|
||||
className={classNames(styles.bgImg)}
|
||||
style={{ right: 0, top: 240 }}
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/b3b8dc41-dce8-471f-9d81-9a0204f27d03.svg"
|
||||
alt="Ant Design"
|
||||
/>
|
||||
<GroupMaskLayer className={styles.layer}>
|
||||
{/* Image Left Top */}
|
||||
<img
|
||||
className={classNames(styles.bgImg)}
|
||||
style={{ left: isMobile ? -120 : 0, top: 0 }}
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
|
||||
alt="bg"
|
||||
/>
|
||||
{/* Image Right Top */}
|
||||
<img
|
||||
className={classNames(styles.bgImg)}
|
||||
style={{ right: isMobile ? 0 : 120, top: 0 }}
|
||||
src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
|
||||
alt="bg"
|
||||
/>
|
||||
<Typography.Title level={1} className={classNames(styles.titleBase, styles.title)}>
|
||||
Ant Design 5.0
|
||||
</Typography.Title>
|
||||
<Typography.Paragraph
|
||||
style={{
|
||||
fontSize: isMobile ? token.fontSizeHeading5 - 2 : token.fontSizeHeading5,
|
||||
lineHeight: isMobile ? token.lineHeightSM : token.lineHeightHeading5,
|
||||
marginBottom: token.marginMD * 2,
|
||||
padding: isMobile ? `0 ${token.paddingLG + 2}px` : 0,
|
||||
}}
|
||||
>
|
||||
<div>{locale.slogan}</div>
|
||||
</Typography.Paragraph>
|
||||
<Flex gap="middle" className={styles.btnWrap}>
|
||||
<Link to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}>
|
||||
<Button size="large" type="primary">
|
||||
{locale.start}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}>
|
||||
<Button size="large">{locale.designLanguage}</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
{children}
|
||||
</GroupMaskLayer>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Banner;
|
||||
File diff suppressed because it is too large
Load Diff
@ -5834,87 +5834,200 @@ exports[`renders components/date-picker/demo/render-panel.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/date-picker/demo/select-in-range.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-picker ant-picker-range ant-picker-outlined"
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
class="ant-space-item"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
autocomplete="off"
|
||||
date-range="start"
|
||||
placeholder="Start date"
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-range-separator"
|
||||
>
|
||||
<span
|
||||
aria-label="to"
|
||||
class="ant-picker-separator"
|
||||
<h5
|
||||
class="ant-typography"
|
||||
>
|
||||
<span
|
||||
aria-label="swap-right"
|
||||
class="anticon anticon-swap-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="swap-right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
7 days range
|
||||
</h5>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
class="ant-space-item"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
autocomplete="off"
|
||||
date-range="end"
|
||||
placeholder="End date"
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-active-bar"
|
||||
style="position:absolute;width:0;left:0"
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="calendar"
|
||||
class="anticon anticon-calendar"
|
||||
role="img"
|
||||
<div
|
||||
class="ant-picker ant-picker-range ant-picker-outlined"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
<input
|
||||
aria-invalid="false"
|
||||
autocomplete="off"
|
||||
date-range="start"
|
||||
placeholder="Start date"
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-range-separator"
|
||||
>
|
||||
<span
|
||||
aria-label="to"
|
||||
class="ant-picker-separator"
|
||||
>
|
||||
<span
|
||||
aria-label="swap-right"
|
||||
class="anticon anticon-swap-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="swap-right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
autocomplete="off"
|
||||
date-range="end"
|
||||
placeholder="End date"
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-active-bar"
|
||||
style="position:absolute;width:0;left:0"
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="calendar"
|
||||
class="anticon anticon-calendar"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<h5
|
||||
class="ant-typography"
|
||||
>
|
||||
6 months range
|
||||
</h5>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-picker ant-picker-range ant-picker-outlined"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
autocomplete="off"
|
||||
date-range="start"
|
||||
placeholder="Start month"
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-range-separator"
|
||||
>
|
||||
<span
|
||||
aria-label="to"
|
||||
class="ant-picker-separator"
|
||||
>
|
||||
<span
|
||||
aria-label="swap-right"
|
||||
class="anticon anticon-swap-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="swap-right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
autocomplete="off"
|
||||
date-range="end"
|
||||
placeholder="End month"
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-active-bar"
|
||||
style="position:absolute;width:0;left:0"
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="calendar"
|
||||
class="anticon anticon-calendar"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,24 +1,37 @@
|
||||
import React, { useState } from 'react';
|
||||
import { DatePicker } from 'antd';
|
||||
import React from 'react';
|
||||
import { DatePicker, Space, Typography } from 'antd';
|
||||
import type { DatePickerProps } from 'antd';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
type RangeValue = [Dayjs | null, Dayjs | null] | null;
|
||||
// Disabled 7 days from the selected date
|
||||
const disabled7DaysDate: DatePickerProps['disabledDate'] = (current, { from }) => {
|
||||
if (from) {
|
||||
return Math.abs(current.diff(from, 'days')) >= 7;
|
||||
}
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [value, setValue] = useState<RangeValue>(null);
|
||||
|
||||
const disabledDate: DatePickerProps['disabledDate'] = (current, { from }) => {
|
||||
if (from) {
|
||||
return Math.abs(current.diff(from, 'days')) >= 7;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
return <RangePicker value={value} disabledDate={disabledDate} onChange={setValue} />;
|
||||
return false;
|
||||
};
|
||||
|
||||
// Disabled 6 months from the selected date
|
||||
const disabled6MonthsDate: DatePickerProps['disabledDate'] = (current, { from }) => {
|
||||
if (from) {
|
||||
const curMonth = current.year() * 12 + current.month();
|
||||
const fromMonth = from.year() * 12 + from.month();
|
||||
return Math.abs(fromMonth - curMonth) >= 6;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical">
|
||||
<Typography.Title level={5}>7 days range</Typography.Title>
|
||||
<RangePicker disabledDate={disabled7DaysDate} />
|
||||
|
||||
<Typography.Title level={5}>6 months range</Typography.Title>
|
||||
<RangePicker disabledDate={disabled6MonthsDate} picker="month" />
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -29,7 +29,7 @@ By clicking the input box, you can select a date from a popup calendar.
|
||||
<code src="./demo/disabled.tsx">Disabled</code>
|
||||
<code src="./demo/disabled-date.tsx">Disabled Date & Time</code>
|
||||
<code src="./demo/allow-empty.tsx">Allow Empty</code>
|
||||
<code src="./demo/select-in-range.tsx">Select range dates in 7 days</code>
|
||||
<code src="./demo/select-in-range.tsx">Select range dates</code>
|
||||
<code src="./demo/preset-ranges.tsx">Preset Ranges</code>
|
||||
<code src="./demo/extra-footer.tsx">Extra Footer</code>
|
||||
<code src="./demo/size.tsx">Three Sizes</code>
|
||||
|
||||
@ -30,7 +30,7 @@ demo:
|
||||
<code src="./demo/disabled.tsx">禁用</code>
|
||||
<code src="./demo/disabled-date.tsx">不可选择日期和时间</code>
|
||||
<code src="./demo/allow-empty.tsx">允许留空</code>
|
||||
<code src="./demo/select-in-range.tsx">选择不超过七天的范围</code>
|
||||
<code src="./demo/select-in-range.tsx">选择不超过一定的范围</code>
|
||||
<code src="./demo/preset-ranges.tsx">预设范围</code>
|
||||
<code src="./demo/extra-footer.tsx">额外的页脚</code>
|
||||
<code src="./demo/size.tsx">三种大小</code>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user