mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 11:32:52 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

refactor: Calendar cssinjs (#34835)

Browse Source 
* refactor: to cssinjs

* fix: css logical properties

* refactor: use mergeTokens handle customize token

* refactor: export genPanelStyle

* feat: add picker panel style

* fix: remove unused token

* refactor: replace arrowWidth with sizePopupArrow

* fix: add fixme

* fix: type error

* fix: remove arrowWidth

* fix: add fixme

* fix: remove comment

* fix: add fixme

* chore: code style

* test: fix lint

* test: fix lint

Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
Dunqing 2022-05-11 20:07:40 +08:00 committed by GitHub
parent 5d66b0ba3f
commit 77cad90c08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 1150 additions and 929 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/_util/theme/interface.ts
View File

@ -12,6 +12,7 @@ import type { ComponentToken as SelectComponentToken } from '../../select/style'
import type { ComponentToken as SliderComponentToken } from '../../slider/style';
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
import type { ComponentToken as BackTopComponentToken } from '../../back-top/style';
import type { ComponentToken as CalendarComponentToken } from '../../calendar/style';
import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
import type { ComponentToken as MenuComponentToken } from '../../menu/style';
@ -93,6 +94,7 @@ export interface OverrideToken {
Typography?: TypographyComponentToken;
Timeline?: TimelineComponentToken;
Tabs?: {};
Calendar?: CalendarComponentToken;
Card?: {};
Steps?: {};
Menu?: MenuComponentToken;

9
components/calendar/generateCalendar.tsx
View File

@ -14,6 +14,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
import enUS from './locale/en_US';
import { ConfigContext } from '../config-provider';
import CalendarHeader from './Header';
import useStyle from './style';
type InjectDefaultProps<Props> = Omit<
Props,
@ -102,6 +103,9 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('picker', customizePrefixCls);
const calendarPrefixCls = `${prefixCls}-calendar`;
const [wrapSSR, hashId] = useStyle(prefixCls);
const today = generateConfig.getNow();
// ====================== State =======================
@ -230,7 +234,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
[monthFullCellRender, monthCellRender],
);
return (
return wrapSSR(
<LocaleReceiver componentName="Calendar" defaultLocale={getDefaultLocale}>
{(mergedLocale: any) => (
<div
@ -242,6 +246,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
[`${calendarPrefixCls}-rtl`]: direction === 'rtl',
},
className,
hashId,
)}
style={style}
>
@ -281,7 +286,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
/>
</div>
)}
</LocaleReceiver>
</LocaleReceiver>,
);
};

322
components/calendar/style/index.less
View File

@ -1,196 +1,196 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
// @import '../../style/themes/index';
// @import '../../style/mixins/index';
@calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar';
@calendar-picker-prefix-cls: ~'@{ant-prefix}-picker';
// @calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar';
// @calendar-picker-prefix-cls: ~'@{ant-prefix}-picker';
.@{calendar-prefix-cls} {
.reset-component();
background: @calendar-full-bg;
// .@{calendar-prefix-cls} {
// .reset-component();
// background: @calendar-full-bg;
// ========================= Header =========================
&-header {
display: flex;
justify-content: flex-end;
padding: @padding-sm 0;
// // ========================= Header =========================
// &-header {
// display: flex;
// justify-content: flex-end;
// padding: @padding-sm 0;
.@{calendar-prefix-cls}-year-select {
min-width: 80px;
}
// .@{calendar-prefix-cls}-year-select {
// min-width: 80px;
// }
.@{calendar-prefix-cls}-month-select {
min-width: 70px;
margin-left: @padding-xs;
}
// .@{calendar-prefix-cls}-month-select {
// min-width: 70px;
// margin-left: @padding-xs;
// }
.@{calendar-prefix-cls}-mode-switch {
margin-left: @padding-xs;
}
}
// .@{calendar-prefix-cls}-mode-switch {
// margin-left: @padding-xs;
// }
// }
.@{calendar-picker-prefix-cls}-panel {
background: @calendar-full-panel-bg;
border: 0;
border-top: @border-width-base @border-style-base @border-color-split;
border-radius: 0;
// .@{calendar-picker-prefix-cls}-panel {
// background: @calendar-full-panel-bg;
// border: 0;
// border-top: @border-width-base @border-style-base @border-color-split;
// border-radius: 0;
.@{calendar-picker-prefix-cls}-month-panel,
.@{calendar-picker-prefix-cls}-date-panel {
width: auto;
}
// .@{calendar-picker-prefix-cls}-month-panel,
// .@{calendar-picker-prefix-cls}-date-panel {
// width: auto;
// }
.@{calendar-picker-prefix-cls}-body {
padding: @padding-xs 0;
}
// .@{calendar-picker-prefix-cls}-body {
// padding: @padding-xs 0;
// }
.@{calendar-picker-prefix-cls}-content {
width: 100%;
}
}
// .@{calendar-picker-prefix-cls}-content {
// width: 100%;
// }
// }
// ========================== Mini ==========================
&-mini {
border-radius: @border-radius-base;
// // ========================== Mini ==========================
// &-mini {
// border-radius: @border-radius-base;
.@{calendar-picker-prefix-cls}-calendar-header {
padding-right: @padding-xs;
padding-left: @padding-xs;
}
// .@{calendar-picker-prefix-cls}-calendar-header {
// padding-right: @padding-xs;
// padding-left: @padding-xs;
// }
.@{calendar-picker-prefix-cls}-panel {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
// .@{calendar-picker-prefix-cls}-panel {
// border-radius: 0 0 @border-radius-base @border-radius-base;
// }
.@{calendar-picker-prefix-cls}-content {
height: 256px;
// .@{calendar-picker-prefix-cls}-content {
// height: 256px;
th {
height: auto;
padding: 0;
line-height: 18px;
}
}
// th {
// height: auto;
// padding: 0;
// line-height: 18px;
// }
// }
.@{calendar-picker-prefix-cls}-cell::before {
pointer-events: none;
}
}
// .@{calendar-picker-prefix-cls}-cell::before {
// pointer-events: none;
// }
// }
// ========================== Full ==========================
&-full {
.@{calendar-picker-prefix-cls}-panel {
display: block;
width: 100%;
text-align: right;
background: @calendar-full-bg;
border: 0;
// // ========================== Full ==========================
// &-full {
// .@{calendar-picker-prefix-cls}-panel {
// display: block;
// width: 100%;
// text-align: right;
// background: @calendar-full-bg;
// border: 0;
.@{calendar-picker-prefix-cls}-body {
th,
td {
padding: 0;
}
// .@{calendar-picker-prefix-cls}-body {
// th,
// td {
// padding: 0;
// }
th {
height: auto;
padding: 0 12px 5px 0;
line-height: 18px;
}
}
// th {
// height: auto;
// padding: 0 12px 5px 0;
// line-height: 18px;
// }
// }
// Cell
.@{calendar-picker-prefix-cls}-cell {
&::before {
display: none;
}
// // Cell
// .@{calendar-picker-prefix-cls}-cell {
// &::before {
// display: none;
// }
&:hover {
.@{calendar-prefix-cls}-date {
background: @item-hover-bg;
}
}
// &:hover {
// .@{calendar-prefix-cls}-date {
// background: @item-hover-bg;
// }
// }
.@{calendar-prefix-cls}-date-today::before {
display: none;
}
// .@{calendar-prefix-cls}-date-today::before {
// display: none;
// }
&-selected,
&-selected:hover {
.@{calendar-prefix-cls}-date,
.@{calendar-prefix-cls}-date-today {
background: @calendar-item-active-bg;
// &-selected,
// &-selected:hover {
// .@{calendar-prefix-cls}-date,
// .@{calendar-prefix-cls}-date-today {
// background: @calendar-item-active-bg;
.@{calendar-prefix-cls}-date-value {
color: @primary-color;
}
}
}
}
// .@{calendar-prefix-cls}-date-value {
// color: @primary-color;
// }
// }
// }
// }
// Cell date
.@{calendar-prefix-cls}-date {
display: block;
width: auto;
height: auto;
margin: 0 (@padding-xs / 2);
padding: (@padding-xs / 2) @padding-xs 0;
border: 0;
border-top: 2px solid @border-color-split;
border-radius: 0;
transition: background 0.3s;
// // Cell date
// .@{calendar-prefix-cls}-date {
// display: block;
// width: auto;
// height: auto;
// margin: 0 (@padding-xs / 2);
// padding: (@padding-xs / 2) @padding-xs 0;
// border: 0;
// border-top: 2px solid @border-color-split;
// border-radius: 0;
// transition: background 0.3s;
&-value {
line-height: 24px;
transition: color 0.3s;
}
// &-value {
// line-height: 24px;
// transition: color 0.3s;
// }
&-content {
position: static;
width: auto;
height: 86px;
overflow-y: auto;
color: @text-color;
line-height: @line-height-base;
text-align: left;
}
// &-content {
// position: static;
// width: auto;
// height: 86px;
// overflow-y: auto;
// color: @text-color;
// line-height: @line-height-base;
// text-align: left;
// }
&-today {
border-color: @primary-color;
// &-today {
// border-color: @primary-color;
.@{calendar-prefix-cls}-date-value {
color: @text-color;
}
}
}
}
}
}
// .@{calendar-prefix-cls}-date-value {
// color: @text-color;
// }
// }
// }
// }
// }
// }
@media only screen and (max-width: @screen-xs) {
.@{calendar-prefix-cls} {
&-header {
display: block;
// @media only screen and (max-width: @screen-xs) {
// .@{calendar-prefix-cls} {
// &-header {
// display: block;
.@{calendar-prefix-cls}-year-select {
width: 50%;
}
// .@{calendar-prefix-cls}-year-select {
// width: 50%;
// }
.@{calendar-prefix-cls}-month-select {
width: ~'calc(50% - @{padding-xs})';
}
// .@{calendar-prefix-cls}-month-select {
// width: ~'calc(50% - @{padding-xs})';
// }
.@{calendar-prefix-cls}-mode-switch {
width: 100%;
margin-top: @padding-xs;
margin-left: 0;
// .@{calendar-prefix-cls}-mode-switch {
// width: 100%;
// margin-top: @padding-xs;
// margin-left: 0;
> label {
width: 50%;
text-align: center;
}
}
}
}
}
// > label {
// width: 50%;
// text-align: center;
// }
// }
// }
// }
// }
@import './rtl';
// @import './rtl';

230
components/calendar/style/index.tsx
View File

@ -1,8 +1,224 @@
import '../../style/index.less';
import './index.less';
// deps-lint-skip-all
// style dependencies
// deps-lint-skip: date-picker, form
import '../../select/style';
import '../../radio/style';
import '../../date-picker/style';
import type { CSSObject } from '@ant-design/cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
import type { FullToken } from '../../_util/theme';
import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
import type { ComponentToken as DatePickerComponentToken } from '../../date-picker/style';
import { genPanelStyle } from '../../date-picker/style';
import type { InputToken } from '../../input/style';
import { initInputToken } from '../../input/style';
export interface ComponentToken extends Omit<DatePickerComponentToken, 'zIndexPopup'> {
calendarFullBg: string;
calendarFullPanelBg: string;
calendarItemActiveBg: string;
}
interface CalendarToken extends InputToken<FullToken<'Calendar'>> {
calendarCls: string;
// date-picker token
pickerCellInnerCls: string;
}
export const genCalendarStyles = (token: CalendarToken): CSSObject => {
const { calendarCls, componentCls, calendarFullBg, calendarFullPanelBg, calendarItemActiveBg } =
token;
return {
[calendarCls]: {
...resetComponent(token),
background: calendarFullBg,
'&-rtl': {
direction: 'rtl',
},
[`${calendarCls}-header`]: {
display: 'flex',
justifyContent: 'flex-end',
padding: `${token.paddingSM}px 0`,
[`${calendarCls}-year-select`]: {
// FIXME hardcode in v4
minWidth: 80,
},
[`${calendarCls}-month-select`]: {
// FIXME hardcode in v4
minWidth: 70,
// FIXME hardcode in v4
marginInlineStart: token.marginXS,
},
[`${calendarCls}-mode-switch`]: {
// FIXME hardcode in v4
marginInlineStart: token.marginXS,
},
},
},
[`${calendarCls} ${componentCls}-panel`]: {
background: calendarFullPanelBg,
border: 0,
borderTop: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorSplit}`,
borderRadius: 0,
[`${componentCls}-month-panel, ${componentCls}-date-panel`]: {
width: 'auto',
},
[`${componentCls}-body`]: {
padding: `${token.paddingXS}px 0`,
},
[`${componentCls}-content`]: {
width: '100%',
},
},
[`${calendarCls}-mini`]: {
// FIXME hardcode in v4
borderRadius: token.radiusBase,
[`${calendarCls}-header`]: {
// FIXME hardcode in v4
paddingInlineEnd: token.paddingXS,
// FIXME hardcode in v4
paddingInlineStart: token.paddingXS,
},
[`${componentCls}-panel`]: {
borderRadius: `0 0 ${token.radiusBase}px ${token.radiusBase}px`,
},
[`${componentCls}-content`]: {
// FIXME hardcode in v4
height: 256,
th: {
height: 'auto',
padding: 0,
lineHeight: '18px',
},
},
[`${componentCls}-cell::before`]: {
pointerEvents: 'none',
},
},
[`${calendarCls}${calendarCls}-full`]: {
[`${componentCls}-panel`]: {
display: 'block',
width: '100%',
textAlign: 'end',
background: calendarFullBg,
border: 0,
[`${componentCls}-body`]: {
'th, td': {
padding: 0,
},
th: {
height: 'auto',
// FIXME hardcode in v4
paddingInlineEnd: 12,
// FIXME hardcode in v4
paddingBottom: 5,
lineHeight: '18px',
},
},
},
[`${componentCls}-cell`]: {
'&::before': {
display: 'none',
},
'&:hover': {
[`${calendarCls}-date`]: {
background: token.controlItemBgHover,
},
},
[`${calendarCls}-date-today::before`]: {
display: 'none',
},
'&-selected, &-selected:hover': {
[`${calendarCls}-date, ${calendarCls}-date-today`]: {
background: calendarItemActiveBg,
[`${calendarCls}-date-value`]: {
color: token.colorPrimary,
},
},
},
},
[`${calendarCls}-date`]: {
display: 'block',
width: 'auto',
height: 'auto',
margin: `0 ${token.marginXS / 2}px`,
padding: `${token.paddingXS / 2}px ${token.paddingXS}px 0`,
border: 0,
// FIXME hardcode in v4
borderTop: `2px solid ${token.colorSplit}`,
borderRadius: 0,
transition: `background ${token.motionDurationSlow}`,
'&-value': {
// FIXME hardcode in v4
lineHeight: '24px',
transition: `color ${token.motionDurationSlow}`,
},
'&-content': {
position: 'static',
width: 'auto',
// FIXME hardcode in v4
height: 86,
overflowY: 'auto',
color: token.colorText,
lineHeight: token.lineHeight,
textAlign: 'start',
},
'&-today': {
borderColor: token.colorPrimary,
[`${calendarCls}-date-value`]: {
color: token.colorText,
},
},
},
},
[`@media only screen and (max-width: ${token.screenXS}px) `]: {
[`${calendarCls}`]: {
[`${calendarCls}-header`]: {
display: 'block',
[`${calendarCls}-year-select`]: {
width: '50%',
},
[`${calendarCls}-month-select`]: {
width: `calc(50% - ${token.paddingXS}px)`,
},
[`${calendarCls}-mode-switch`]: {
width: '100%',
// FIXME hardcode in v4
marginTop: token.marginXS,
marginInlineStart: 0,
'> label': {
width: '50%',
textAlign: 'center',
},
},
},
},
},
};
};
export default genComponentStyleHook(
'Calendar',
token => {
const calendarCls = `${token.componentCls}-calendar`;
const calendarToken = mergeToken<CalendarToken>(initInputToken<FullToken<'Calendar'>>(token), {
calendarCls,
pickerCellInnerCls: `${token.componentCls}-cell-inner`,
});
return [genCalendarStyles(calendarToken), genPanelStyle(calendarToken)];
},
token => ({
calendarFullBg: token.colorBgComponent,
calendarFullPanelBg: token.colorBgComponent,
calendarItemActiveBg: token.controlItemBgActive,
// FIXME: date-picker token
pickerTextHeight: 40,
pickerPanelCellWidth: 36,
pickerPanelCellHeight: 24,
pickerDateHoverRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toRgbString(),
pickerBasicCellHoverWithRangeColor: new TinyColor(token.colorPrimary).lighten(35).toRgbString(),
pickerPanelWithoutTimeCellHeight: 66,
pickerTimePanelColumnHeight: 224,
pickerTimePanelColumnWidth: 56,
pickerTimePanelCellHeight: 28,
}),
);

762
components/date-picker/style/index.tsx
View File

@ -27,7 +27,6 @@ export interface ComponentToken {
}
type PickerToken = InputToken<FullToken<'DatePicker'>> & {
arrowWidth: number;
pickerCellInnerCls: string;
hashId?: string;
};
@ -47,379 +46,10 @@ const genPikerPadding = (
};
};
const genPickerStyle: GenerateStyle<PickerToken> = token => {
const { componentCls, antCls } = token;
return {
[componentCls]: {
...resetComponent(token),
...genPikerPadding(token, token.controlHeight, token.fontSize, token.inputPaddingHorizontal),
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
background: token.colorBgComponent,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.radiusBase,
transition: `border ${token.motionDurationSlow}, box-shadow ${token.motionDurationSlow}`,
'&:hover, &-focused': {
...genHoverStyle(token),
},
'&-focused': {
...genActiveStyle(token),
},
'&&-disabled': {
background: token.colorBgComponentDisabled,
borderColor: token.colorBorder,
cursor: 'not-allowed',
[`${componentCls}-suffix`]: {
color: token.colorTextDisabled,
},
},
'&&-borderless': {
backgroundColor: 'transparent !important',
borderColor: 'transparent !important',
boxShadow: 'none !important',
},
// ======================== Input =========================
[`${componentCls}-input`]: {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
width: '100%',
'> input': {
...genBasicInputStyle(token),
flex: 'auto',
// Fix Firefox flex not correct:
// https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
minWidth: 1,
height: 'auto',
padding: 0,
background: 'transparent',
border: 0,
'&:focus': {
boxShadow: 'none',
},
'&[disabled]': {
background: 'transparent',
},
},
'&:hover': {
[`${componentCls}-clear`]: {
opacity: 1,
},
},
'&-placeholder': {
'> input': {
color: token.colorPlaceholder,
},
},
},
// Size
'&-large': {
...genPikerPadding(
token,
token.controlHeightLG,
token.fontSizeLG,
token.inputPaddingHorizontal,
),
[`${componentCls}-input > input`]: {
fontSize: token.fontSizeLG,
},
},
'&-small': {
...genPikerPadding(
token,
token.controlHeightSM,
token.fontSize,
token.inputPaddingHorizontalSM,
),
},
[`${componentCls}-suffix`]: {
display: 'flex',
flex: 'none',
alignSelf: 'center',
marginInlineStart: token.paddingXS / 2,
color: token.colorTextDisabled,
lineHeight: 1,
pointerEvents: 'none',
'> *': {
verticalAlign: 'top',
'&:not(:last-child)': {
marginInlineEnd: token.marginXS,
},
},
},
[`${componentCls}-clear`]: {
position: 'absolute',
top: '50%',
insetInlineEnd: 0,
color: token.colorTextDisabled,
lineHeight: 1,
background: token.colorBgComponent,
transform: 'translateY(-50%)',
cursor: 'pointer',
opacity: 0,
transition: `opacity ${token.motionDurationSlow}, color ${token.motionDurationSlow}`,
'> *': {
verticalAlign: 'top',
},
'&:hover': {
color: token.colorTextSecondary,
},
},
[`${componentCls}-separator`]: {
position: 'relative',
display: 'inline-block',
width: '1em',
height: token.fontSizeLG,
color: token.colorTextDisabled,
fontSize: token.fontSizeLG,
verticalAlign: 'top',
cursor: 'default',
[`${componentCls}-focused &`]: {
color: token.colorTextSecondary,
},
[`${componentCls}-range-separator &`]: {
[`${componentCls}-disabled &`]: {
cursor: 'not-allowed',
},
},
},
// ======================== Range =========================
'&-range': {
position: 'relative',
display: 'inline-flex',
// Clear
[`${componentCls}-clear`]: {
insetInlineEnd: token.inputPaddingHorizontal,
},
'&:hover': {
[`${componentCls}-clear`]: {
opacity: 1,
},
},
// Active bar
[`${componentCls}-active-bar`]: {
bottom: -token.controlLineWidth,
height: 2, // FIXME: v4 magic number
marginInlineStart: token.inputPaddingHorizontal,
background: token.colorPrimary,
opacity: 0,
transition: `all ${token.motionDurationSlow} ease-out`,
pointerEvents: 'none',
},
[`&${componentCls}-focused`]: {
[`${componentCls}-active-bar`]: {
opacity: 1,
},
},
[`${componentCls}-range-separator`]: {
alignItems: 'center',
padding: `0 ${token.paddingXS}px`,
lineHeight: 1,
},
[`&${componentCls}-small`]: {
[`${componentCls}-clear`]: {
insetInlineEnd: token.inputPaddingHorizontalSM,
},
[`${componentCls}-active-bar`]: {
marginInlineStart: token.inputPaddingHorizontalSM,
},
},
},
// ======================= Dropdown =======================
'&-dropdown': {
...resetComponent(token),
position: 'absolute',
zIndex: token.zIndexPopup,
'&&-hidden': {
display: 'none',
},
'&&-placement-bottomLeft': {
[`${componentCls}-range-arrow`]: {
top: `${token.arrowWidth / 2 - token.arrowWidth / 3 + 0.7}px`,
display: 'block',
transform: 'rotate(-135deg) translateY(1px)',
},
},
'&&-placement-topLeft': {
[`${componentCls}-range-arrow`]: {
bottom: `${token.arrowWidth / 2 - token.arrowWidth / 3 + 0.7}px`,
display: 'block',
transform: 'rotate(45deg)',
},
},
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: {
animationName: slideDownIn,
},
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomRight`]: {
animationName: slideUpIn,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: {
animationName: slideDownOut,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomRight`]: {
animationName: slideUpOut,
},
// Time picker with additional style
[`${componentCls}-panel > ${componentCls}-time-panel`]: {
paddingTop: token.paddingXS / 2,
},
// ======================== Ranges ========================
[`${componentCls}-ranges`]: {
marginBottom: 0,
padding: `${token.paddingXS / 2}px ${token.paddingSM}px`,
overflow: 'hidden',
lineHeight: `${
token.pickerTextHeight - 2 * token.controlLineWidth - token.paddingXS / 2
}px`,
textAlign: 'start',
listStyle: 'none',
display: 'flex',
justifyContent: 'space-between',
'> li': {
display: 'inline-block',
},
// https://github.com/ant-design/ant-design/issues/23687
[`${componentCls}-preset > ${antCls}-tag-blue`]: {
color: token.colorPrimary,
background: token.controlItemBgActive,
borderColor: token.colorPrimarySecondary,
cursor: 'pointer',
},
[`${componentCls}-ok`]: {
marginInlineStart: 'auto',
},
},
[`${componentCls}-range-wrapper`]: {
display: 'flex',
},
[`${componentCls}-range-arrow`]: {
position: 'absolute',
zIndex: 1,
display: 'none',
width: token.arrowWidth,
height: token.arrowWidth,
marginInlineStart: token.inputPaddingHorizontal * 1.5,
background: `linear-gradient(135deg, transparent 40%, ${token.colorBgComponent} 40%)`, // Use linear-gradient to prevent arrow from covering text
boxShadow: `2px 2px 6px -2px fade(#000, 10%)`, // use spread radius to hide shadow over popover, FIXME: v4 magic
transition: `left ${token.motionDurationSlow} ease-out`,
...roundedArrow(token.arrowWidth, 5, token.colorBgComponent),
},
[`${componentCls}-panel-container`]: {
overflow: 'hidden',
verticalAlign: 'top',
background: token.colorBgComponent,
borderRadius: token.radiusBase,
boxShadow: token.boxShadow,
transition: `margin ${token.motionDurationSlow}`,
[`${componentCls}-panels`]: {
display: 'inline-flex',
flexWrap: 'nowrap',
direction: 'ltr',
},
[`${componentCls}-panel`]: {
verticalAlign: 'top',
background: 'transparent',
borderWidth: `0 0 ${token.controlLineWidth}px`,
borderRadius: 0,
[`${componentCls}-content,
table`]: {
textAlign: 'center',
},
'&-focused': {
borderColor: token.colorBorder,
},
},
},
},
'&-dropdown-range': {
padding: `${(token.arrowWidth * 2) / 3}px 0`,
'&-hidden': {
display: 'none',
},
},
'&-rtl': {
direction: 'rtl',
[`${componentCls}-separator`]: {
transform: 'rotate(180deg)',
},
[`${componentCls}-footer`]: {
'&-extra': {
direction: 'rtl',
},
},
},
},
};
};
const genPickerCellInnerStyle = (token: PickerToken, cellClassName: string): CSSObject => {
const genPickerCellInnerStyle = (
token: Omit<PickerToken, 'zIndexPopup'>,
cellClassName: string,
): CSSObject => {
const { componentCls } = token;
return {
@ -642,7 +272,7 @@ const genPickerCellInnerStyle = (token: PickerToken, cellClassName: string): CSS
};
};
const genPanelStyle: GenerateStyle<PickerToken> = token => {
export const genPanelStyle = (token: Omit<PickerToken, 'zIndexPopup'>): CSSObject => {
const { componentCls, pickerCellInnerCls } = token;
const pickerArrowSize = 7; // FIXME: v4 magic number
@ -652,7 +282,6 @@ const genPanelStyle: GenerateStyle<PickerToken> = token => {
(pickerPanelWidth - token.paddingXS * 2) / 3 - pickerYearMonthCellWidth / 2;
return {
[`${componentCls}-dropdown`]: {
[componentCls]: {
'&-panel': {
display: 'inline-flex',
@ -1131,7 +760,6 @@ const genPanelStyle: GenerateStyle<PickerToken> = token => {
},
},
},
},
};
};
@ -1177,20 +805,388 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = token => {
};
};
const genPickerStyle: GenerateStyle<PickerToken> = token => {
const { componentCls, antCls } = token;
return {
[componentCls]: {
...resetComponent(token),
...genPikerPadding(token, token.controlHeight, token.fontSize, token.inputPaddingHorizontal),
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
background: token.colorBgComponent,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.radiusBase,
transition: `border ${token.motionDurationSlow}, box-shadow ${token.motionDurationSlow}`,
'&:hover, &-focused': {
...genHoverStyle(token),
},
'&-focused': {
...genActiveStyle(token),
},
'&&-disabled': {
background: token.colorBgComponentDisabled,
borderColor: token.colorBorder,
cursor: 'not-allowed',
[`${componentCls}-suffix`]: {
color: token.colorTextDisabled,
},
},
'&&-borderless': {
backgroundColor: 'transparent !important',
borderColor: 'transparent !important',
boxShadow: 'none !important',
},
// ======================== Input =========================
[`${componentCls}-input`]: {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
width: '100%',
'> input': {
...genBasicInputStyle(token),
flex: 'auto',
// Fix Firefox flex not correct:
// https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
minWidth: 1,
height: 'auto',
padding: 0,
background: 'transparent',
border: 0,
'&:focus': {
boxShadow: 'none',
},
'&[disabled]': {
background: 'transparent',
},
},
'&:hover': {
[`${componentCls}-clear`]: {
opacity: 1,
},
},
'&-placeholder': {
'> input': {
color: token.colorPlaceholder,
},
},
},
// Size
'&-large': {
...genPikerPadding(
token,
token.controlHeightLG,
token.fontSizeLG,
token.inputPaddingHorizontal,
),
[`${componentCls}-input > input`]: {
fontSize: token.fontSizeLG,
},
},
'&-small': {
...genPikerPadding(
token,
token.controlHeightSM,
token.fontSize,
token.inputPaddingHorizontalSM,
),
},
[`${componentCls}-suffix`]: {
display: 'flex',
flex: 'none',
alignSelf: 'center',
marginInlineStart: token.paddingXS / 2,
color: token.colorTextDisabled,
lineHeight: 1,
pointerEvents: 'none',
'> *': {
verticalAlign: 'top',
'&:not(:last-child)': {
marginInlineEnd: token.marginXS,
},
},
},
[`${componentCls}-clear`]: {
position: 'absolute',
top: '50%',
insetInlineEnd: 0,
color: token.colorTextDisabled,
lineHeight: 1,
background: token.colorBgComponent,
transform: 'translateY(-50%)',
cursor: 'pointer',
opacity: 0,
transition: `opacity ${token.motionDurationSlow}, color ${token.motionDurationSlow}`,
'> *': {
verticalAlign: 'top',
},
'&:hover': {
color: token.colorTextSecondary,
},
},
[`${componentCls}-separator`]: {
position: 'relative',
display: 'inline-block',
width: '1em',
height: token.fontSizeLG,
color: token.colorTextDisabled,
fontSize: token.fontSizeLG,
verticalAlign: 'top',
cursor: 'default',
[`${componentCls}-focused &`]: {
color: token.colorTextSecondary,
},
[`${componentCls}-range-separator &`]: {
[`${componentCls}-disabled &`]: {
cursor: 'not-allowed',
},
},
},
// ======================== Range =========================
'&-range': {
position: 'relative',
display: 'inline-flex',
// Clear
[`${componentCls}-clear`]: {
insetInlineEnd: token.inputPaddingHorizontal,
},
'&:hover': {
[`${componentCls}-clear`]: {
opacity: 1,
},
},
// Active bar
[`${componentCls}-active-bar`]: {
bottom: -token.controlLineWidth,
height: 2, // FIXME: v4 magic number
marginInlineStart: token.inputPaddingHorizontal,
background: token.colorPrimary,
opacity: 0,
transition: `all ${token.motionDurationSlow} ease-out`,
pointerEvents: 'none',
},
[`&${componentCls}-focused`]: {
[`${componentCls}-active-bar`]: {
opacity: 1,
},
},
[`${componentCls}-range-separator`]: {
alignItems: 'center',
padding: `0 ${token.paddingXS}px`,
lineHeight: 1,
},
[`&${componentCls}-small`]: {
[`${componentCls}-clear`]: {
insetInlineEnd: token.inputPaddingHorizontalSM,
},
[`${componentCls}-active-bar`]: {
marginInlineStart: token.inputPaddingHorizontalSM,
},
},
},
// ======================= Dropdown =======================
'&-dropdown': {
...resetComponent(token),
...genPanelStyle(token),
position: 'absolute',
zIndex: token.zIndexPopup,
'&&-hidden': {
display: 'none',
},
'&&-placement-bottomLeft': {
[`${componentCls}-range-arrow`]: {
top: `${token.sizePopupArrow / 2 - token.sizePopupArrow / 3 + 0.7}px`,
display: 'block',
transform: 'rotate(-135deg) translateY(1px)',
},
},
'&&-placement-topLeft': {
[`${componentCls}-range-arrow`]: {
bottom: `${token.sizePopupArrow / 2 - token.sizePopupArrow / 3 + 0.7}px`,
display: 'block',
transform: 'rotate(45deg)',
},
},
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: {
animationName: slideDownIn,
},
[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomRight,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft,
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomRight`]: {
animationName: slideUpIn,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: {
animationName: slideDownOut,
},
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft,
&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomRight`]: {
animationName: slideUpOut,
},
// Time picker with additional style
[`${componentCls}-panel > ${componentCls}-time-panel`]: {
paddingTop: token.paddingXS / 2,
},
// ======================== Ranges ========================
[`${componentCls}-ranges`]: {
marginBottom: 0,
padding: `${token.paddingXS / 2}px ${token.paddingSM}px`,
overflow: 'hidden',
lineHeight: `${
token.pickerTextHeight - 2 * token.controlLineWidth - token.paddingXS / 2
}px`,
textAlign: 'start',
listStyle: 'none',
display: 'flex',
justifyContent: 'space-between',
'> li': {
display: 'inline-block',
},
// https://github.com/ant-design/ant-design/issues/23687
[`${componentCls}-preset > ${antCls}-tag-blue`]: {
color: token.colorPrimary,
background: token.controlItemBgActive,
borderColor: token.colorPrimarySecondary,
cursor: 'pointer',
},
[`${componentCls}-ok`]: {
marginInlineStart: 'auto',
},
},
[`${componentCls}-range-wrapper`]: {
display: 'flex',
},
[`${componentCls}-range-arrow`]: {
position: 'absolute',
zIndex: 1,
display: 'none',
width: token.sizePopupArrow,
height: token.sizePopupArrow,
marginInlineStart: token.inputPaddingHorizontal * 1.5,
background: `linear-gradient(135deg, transparent 40%, ${token.colorBgComponent} 40%)`, // Use linear-gradient to prevent arrow from covering text
boxShadow: `2px 2px 6px -2px fade(#000, 10%)`, // use spread radius to hide shadow over popover, FIXME: v4 magic
transition: `left ${token.motionDurationSlow} ease-out`,
...roundedArrow(token.sizePopupArrow, 5, token.colorBgComponent),
},
[`${componentCls}-panel-container`]: {
overflow: 'hidden',
verticalAlign: 'top',
background: token.colorBgComponent,
borderRadius: token.radiusBase,
boxShadow: token.boxShadow,
transition: `margin ${token.motionDurationSlow}`,
[`${componentCls}-panels`]: {
display: 'inline-flex',
flexWrap: 'nowrap',
direction: 'ltr',
},
[`${componentCls}-panel`]: {
verticalAlign: 'top',
background: 'transparent',
borderWidth: `0 0 ${token.controlLineWidth}px`,
borderRadius: 0,
[`${componentCls}-content,
table`]: {
textAlign: 'center',
},
'&-focused': {
borderColor: token.colorBorder,
},
},
},
},
'&-dropdown-range': {
padding: `${(token.sizePopupArrow * 2) / 3}px 0`,
'&-hidden': {
display: 'none',
},
},
'&-rtl': {
direction: 'rtl',
[`${componentCls}-separator`]: {
transform: 'rotate(180deg)',
},
[`${componentCls}-footer`]: {
'&-extra': {
direction: 'rtl',
},
},
},
},
};
};
// ============================== Export ==============================
export default genComponentStyleHook(
'DatePicker',
(token, { hashId }) => {
const pickerToken = mergeToken<PickerToken>(initInputToken<FullToken<'DatePicker'>>(token), {
arrowWidth: 8 * Math.sqrt(2),
pickerCellInnerCls: `${token.componentCls}-cell-inner`,
hashId,
});
return [
genPickerStyle(pickerToken),
genPanelStyle(pickerToken),
genPickerStatusStyle(pickerToken),
];
return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)];
},
token => ({
zIndexPopup: token.zIndexPopupBase + 50,

6
site/theme/template/Resources/Articles/index.tsx
View File

@ -63,8 +63,10 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
export default () => {
const { locale } = useIntl();
const isZhCN = locale === 'zh-CN';
const [{ articles = { cn: [], en: [] }, authors = [] }, loading] =
useSiteData<{ articles: Articles; authors: Authors }>();
const [{ articles = { cn: [], en: [] }, authors = [] }, loading] = useSiteData<{
articles: Articles;
authors: Authors;
}>();
// ========================== Data ==========================
const mergedData = React.useMemo(() => {