mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 03:22:59 +08:00
refactor: Calendar cssinjs (#34835)
* 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
GitHub
parent
5d66b0ba3f
commit
77cad90c08
@ -12,6 +12,7 @@ import type { ComponentToken as SelectComponentToken } from '../../select/style'
|
|||||||
import type { ComponentToken as SliderComponentToken } from '../../slider/style';
|
import type { ComponentToken as SliderComponentToken } from '../../slider/style';
|
||||||
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
|
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
|
||||||
import type { ComponentToken as BackTopComponentToken } from '../../back-top/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 DatePickerComponentToken } from '../../date-picker/style';
|
||||||
import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
|
import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
|
||||||
import type { ComponentToken as MenuComponentToken } from '../../menu/style';
|
import type { ComponentToken as MenuComponentToken } from '../../menu/style';
|
||||||
@ -93,6 +94,7 @@ export interface OverrideToken {
|
|||||||
Typography?: TypographyComponentToken;
|
Typography?: TypographyComponentToken;
|
||||||
Timeline?: TimelineComponentToken;
|
Timeline?: TimelineComponentToken;
|
||||||
Tabs?: {};
|
Tabs?: {};
|
||||||
|
Calendar?: CalendarComponentToken;
|
||||||
Card?: {};
|
Card?: {};
|
||||||
Steps?: {};
|
Steps?: {};
|
||||||
Menu?: MenuComponentToken;
|
Menu?: MenuComponentToken;
|
||||||
|
|||||||
@ -14,6 +14,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
|||||||
import enUS from './locale/en_US';
|
import enUS from './locale/en_US';
|
||||||
import { ConfigContext } from '../config-provider';
|
import { ConfigContext } from '../config-provider';
|
||||||
import CalendarHeader from './Header';
|
import CalendarHeader from './Header';
|
||||||
|
import useStyle from './style';
|
||||||
|
|
||||||
type InjectDefaultProps<Props> = Omit<
|
type InjectDefaultProps<Props> = Omit<
|
||||||
Props,
|
Props,
|
||||||
@ -102,6 +103,9 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
|
|||||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||||
const prefixCls = getPrefixCls('picker', customizePrefixCls);
|
const prefixCls = getPrefixCls('picker', customizePrefixCls);
|
||||||
const calendarPrefixCls = `${prefixCls}-calendar`;
|
const calendarPrefixCls = `${prefixCls}-calendar`;
|
||||||
|
|
||||||
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||||
|
|
||||||
const today = generateConfig.getNow();
|
const today = generateConfig.getNow();
|
||||||
|
|
||||||
// ====================== State =======================
|
// ====================== State =======================
|
||||||
@ -230,7 +234,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
|
|||||||
[monthFullCellRender, monthCellRender],
|
[monthFullCellRender, monthCellRender],
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return wrapSSR(
|
||||||
<LocaleReceiver componentName="Calendar" defaultLocale={getDefaultLocale}>
|
<LocaleReceiver componentName="Calendar" defaultLocale={getDefaultLocale}>
|
||||||
{(mergedLocale: any) => (
|
{(mergedLocale: any) => (
|
||||||
<div
|
<div
|
||||||
@ -242,6 +246,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
|
|||||||
[`${calendarPrefixCls}-rtl`]: direction === 'rtl',
|
[`${calendarPrefixCls}-rtl`]: direction === 'rtl',
|
||||||
},
|
},
|
||||||
className,
|
className,
|
||||||
|
hashId,
|
||||||
)}
|
)}
|
||||||
style={style}
|
style={style}
|
||||||
>
|
>
|
||||||
@ -281,7 +286,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</LocaleReceiver>
|
</LocaleReceiver>,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,196 +1,196 @@
|
|||||||
@import '../../style/themes/index';
|
// @import '../../style/themes/index';
|
||||||
@import '../../style/mixins/index';
|
// @import '../../style/mixins/index';
|
||||||
|
|
||||||
@calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar';
|
// @calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar';
|
||||||
@calendar-picker-prefix-cls: ~'@{ant-prefix}-picker';
|
// @calendar-picker-prefix-cls: ~'@{ant-prefix}-picker';
|
||||||
|
|
||||||
.@{calendar-prefix-cls} {
|
// .@{calendar-prefix-cls} {
|
||||||
.reset-component();
|
// .reset-component();
|
||||||
background: @calendar-full-bg;
|
// background: @calendar-full-bg;
|
||||||
|
|
||||||
// ========================= Header =========================
|
// // ========================= Header =========================
|
||||||
&-header {
|
// &-header {
|
||||||
display: flex;
|
// display: flex;
|
||||||
justify-content: flex-end;
|
// justify-content: flex-end;
|
||||||
padding: @padding-sm 0;
|
// padding: @padding-sm 0;
|
||||||
|
|
||||||
.@{calendar-prefix-cls}-year-select {
|
// .@{calendar-prefix-cls}-year-select {
|
||||||
min-width: 80px;
|
// min-width: 80px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{calendar-prefix-cls}-month-select {
|
// .@{calendar-prefix-cls}-month-select {
|
||||||
min-width: 70px;
|
// min-width: 70px;
|
||||||
margin-left: @padding-xs;
|
// margin-left: @padding-xs;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{calendar-prefix-cls}-mode-switch {
|
// .@{calendar-prefix-cls}-mode-switch {
|
||||||
margin-left: @padding-xs;
|
// margin-left: @padding-xs;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{calendar-picker-prefix-cls}-panel {
|
// .@{calendar-picker-prefix-cls}-panel {
|
||||||
background: @calendar-full-panel-bg;
|
// background: @calendar-full-panel-bg;
|
||||||
border: 0;
|
// border: 0;
|
||||||
border-top: @border-width-base @border-style-base @border-color-split;
|
// border-top: @border-width-base @border-style-base @border-color-split;
|
||||||
border-radius: 0;
|
// border-radius: 0;
|
||||||
|
|
||||||
.@{calendar-picker-prefix-cls}-month-panel,
|
// .@{calendar-picker-prefix-cls}-month-panel,
|
||||||
.@{calendar-picker-prefix-cls}-date-panel {
|
// .@{calendar-picker-prefix-cls}-date-panel {
|
||||||
width: auto;
|
// width: auto;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{calendar-picker-prefix-cls}-body {
|
// .@{calendar-picker-prefix-cls}-body {
|
||||||
padding: @padding-xs 0;
|
// padding: @padding-xs 0;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{calendar-picker-prefix-cls}-content {
|
// .@{calendar-picker-prefix-cls}-content {
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// ========================== Mini ==========================
|
// // ========================== Mini ==========================
|
||||||
&-mini {
|
// &-mini {
|
||||||
border-radius: @border-radius-base;
|
// border-radius: @border-radius-base;
|
||||||
|
|
||||||
.@{calendar-picker-prefix-cls}-calendar-header {
|
// .@{calendar-picker-prefix-cls}-calendar-header {
|
||||||
padding-right: @padding-xs;
|
// padding-right: @padding-xs;
|
||||||
padding-left: @padding-xs;
|
// padding-left: @padding-xs;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{calendar-picker-prefix-cls}-panel {
|
// .@{calendar-picker-prefix-cls}-panel {
|
||||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
// border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{calendar-picker-prefix-cls}-content {
|
// .@{calendar-picker-prefix-cls}-content {
|
||||||
height: 256px;
|
// height: 256px;
|
||||||
|
|
||||||
th {
|
// th {
|
||||||
height: auto;
|
// height: auto;
|
||||||
padding: 0;
|
// padding: 0;
|
||||||
line-height: 18px;
|
// line-height: 18px;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{calendar-picker-prefix-cls}-cell::before {
|
// .@{calendar-picker-prefix-cls}-cell::before {
|
||||||
pointer-events: none;
|
// pointer-events: none;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// ========================== Full ==========================
|
// // ========================== Full ==========================
|
||||||
&-full {
|
// &-full {
|
||||||
.@{calendar-picker-prefix-cls}-panel {
|
// .@{calendar-picker-prefix-cls}-panel {
|
||||||
display: block;
|
// display: block;
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
text-align: right;
|
// text-align: right;
|
||||||
background: @calendar-full-bg;
|
// background: @calendar-full-bg;
|
||||||
border: 0;
|
// border: 0;
|
||||||
|
|
||||||
.@{calendar-picker-prefix-cls}-body {
|
// .@{calendar-picker-prefix-cls}-body {
|
||||||
th,
|
// th,
|
||||||
td {
|
// td {
|
||||||
padding: 0;
|
// padding: 0;
|
||||||
}
|
// }
|
||||||
|
|
||||||
th {
|
// th {
|
||||||
height: auto;
|
// height: auto;
|
||||||
padding: 0 12px 5px 0;
|
// padding: 0 12px 5px 0;
|
||||||
line-height: 18px;
|
// line-height: 18px;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Cell
|
// // Cell
|
||||||
.@{calendar-picker-prefix-cls}-cell {
|
// .@{calendar-picker-prefix-cls}-cell {
|
||||||
&::before {
|
// &::before {
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&:hover {
|
// &:hover {
|
||||||
.@{calendar-prefix-cls}-date {
|
// .@{calendar-prefix-cls}-date {
|
||||||
background: @item-hover-bg;
|
// background: @item-hover-bg;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{calendar-prefix-cls}-date-today::before {
|
// .@{calendar-prefix-cls}-date-today::before {
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-selected,
|
// &-selected,
|
||||||
&-selected:hover {
|
// &-selected:hover {
|
||||||
.@{calendar-prefix-cls}-date,
|
// .@{calendar-prefix-cls}-date,
|
||||||
.@{calendar-prefix-cls}-date-today {
|
// .@{calendar-prefix-cls}-date-today {
|
||||||
background: @calendar-item-active-bg;
|
// background: @calendar-item-active-bg;
|
||||||
|
|
||||||
.@{calendar-prefix-cls}-date-value {
|
// .@{calendar-prefix-cls}-date-value {
|
||||||
color: @primary-color;
|
// color: @primary-color;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Cell date
|
// // Cell date
|
||||||
.@{calendar-prefix-cls}-date {
|
// .@{calendar-prefix-cls}-date {
|
||||||
display: block;
|
// display: block;
|
||||||
width: auto;
|
// width: auto;
|
||||||
height: auto;
|
// height: auto;
|
||||||
margin: 0 (@padding-xs / 2);
|
// margin: 0 (@padding-xs / 2);
|
||||||
padding: (@padding-xs / 2) @padding-xs 0;
|
// padding: (@padding-xs / 2) @padding-xs 0;
|
||||||
border: 0;
|
// border: 0;
|
||||||
border-top: 2px solid @border-color-split;
|
// border-top: 2px solid @border-color-split;
|
||||||
border-radius: 0;
|
// border-radius: 0;
|
||||||
transition: background 0.3s;
|
// transition: background 0.3s;
|
||||||
|
|
||||||
&-value {
|
// &-value {
|
||||||
line-height: 24px;
|
// line-height: 24px;
|
||||||
transition: color 0.3s;
|
// transition: color 0.3s;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-content {
|
// &-content {
|
||||||
position: static;
|
// position: static;
|
||||||
width: auto;
|
// width: auto;
|
||||||
height: 86px;
|
// height: 86px;
|
||||||
overflow-y: auto;
|
// overflow-y: auto;
|
||||||
color: @text-color;
|
// color: @text-color;
|
||||||
line-height: @line-height-base;
|
// line-height: @line-height-base;
|
||||||
text-align: left;
|
// text-align: left;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&-today {
|
// &-today {
|
||||||
border-color: @primary-color;
|
// border-color: @primary-color;
|
||||||
|
|
||||||
.@{calendar-prefix-cls}-date-value {
|
// .@{calendar-prefix-cls}-date-value {
|
||||||
color: @text-color;
|
// color: @text-color;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@media only screen and (max-width: @screen-xs) {
|
// @media only screen and (max-width: @screen-xs) {
|
||||||
.@{calendar-prefix-cls} {
|
// .@{calendar-prefix-cls} {
|
||||||
&-header {
|
// &-header {
|
||||||
display: block;
|
// display: block;
|
||||||
|
|
||||||
.@{calendar-prefix-cls}-year-select {
|
// .@{calendar-prefix-cls}-year-select {
|
||||||
width: 50%;
|
// width: 50%;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{calendar-prefix-cls}-month-select {
|
// .@{calendar-prefix-cls}-month-select {
|
||||||
width: ~'calc(50% - @{padding-xs})';
|
// width: ~'calc(50% - @{padding-xs})';
|
||||||
}
|
// }
|
||||||
|
|
||||||
.@{calendar-prefix-cls}-mode-switch {
|
// .@{calendar-prefix-cls}-mode-switch {
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
margin-top: @padding-xs;
|
// margin-top: @padding-xs;
|
||||||
margin-left: 0;
|
// margin-left: 0;
|
||||||
|
|
||||||
> label {
|
// > label {
|
||||||
width: 50%;
|
// width: 50%;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
@import './rtl';
|
// @import './rtl';
|
||||||
|
|||||||
@ -1,8 +1,224 @@
|
|||||||
import '../../style/index.less';
|
// deps-lint-skip-all
|
||||||
import './index.less';
|
|
||||||
|
|
||||||
// style dependencies
|
import type { CSSObject } from '@ant-design/cssinjs';
|
||||||
// deps-lint-skip: date-picker, form
|
import { TinyColor } from '@ctrl/tinycolor';
|
||||||
import '../../select/style';
|
import type { FullToken } from '../../_util/theme';
|
||||||
import '../../radio/style';
|
import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
|
||||||
import '../../date-picker/style';
|
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,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|||||||
@ -27,7 +27,6 @@ export interface ComponentToken {
|
|||||||
}
|
}
|
||||||
|
|
||||||
type PickerToken = InputToken<FullToken<'DatePicker'>> & {
|
type PickerToken = InputToken<FullToken<'DatePicker'>> & {
|
||||||
arrowWidth: number;
|
|
||||||
pickerCellInnerCls: string;
|
pickerCellInnerCls: string;
|
||||||
hashId?: string;
|
hashId?: string;
|
||||||
};
|
};
|
||||||
@ -47,379 +46,10 @@ const genPikerPadding = (
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
const genPickerCellInnerStyle = (
|
||||||
const { componentCls, antCls } = token;
|
token: Omit<PickerToken, 'zIndexPopup'>,
|
||||||
|
cellClassName: string,
|
||||||
return {
|
): CSSObject => {
|
||||||
[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 { componentCls } = token;
|
const { componentCls } = token;
|
||||||
|
|
||||||
return {
|
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 { componentCls, pickerCellInnerCls } = token;
|
||||||
|
|
||||||
const pickerArrowSize = 7; // FIXME: v4 magic number
|
const pickerArrowSize = 7; // FIXME: v4 magic number
|
||||||
@ -652,7 +282,6 @@ const genPanelStyle: GenerateStyle<PickerToken> = token => {
|
|||||||
(pickerPanelWidth - token.paddingXS * 2) / 3 - pickerYearMonthCellWidth / 2;
|
(pickerPanelWidth - token.paddingXS * 2) / 3 - pickerYearMonthCellWidth / 2;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
[`${componentCls}-dropdown`]: {
|
|
||||||
[componentCls]: {
|
[componentCls]: {
|
||||||
'&-panel': {
|
'&-panel': {
|
||||||
display: 'inline-flex',
|
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 ==============================
|
||||||
export default genComponentStyleHook(
|
export default genComponentStyleHook(
|
||||||
'DatePicker',
|
'DatePicker',
|
||||||
(token, { hashId }) => {
|
(token, { hashId }) => {
|
||||||
const pickerToken = mergeToken<PickerToken>(initInputToken<FullToken<'DatePicker'>>(token), {
|
const pickerToken = mergeToken<PickerToken>(initInputToken<FullToken<'DatePicker'>>(token), {
|
||||||
arrowWidth: 8 * Math.sqrt(2),
|
|
||||||
pickerCellInnerCls: `${token.componentCls}-cell-inner`,
|
pickerCellInnerCls: `${token.componentCls}-cell-inner`,
|
||||||
hashId,
|
hashId,
|
||||||
});
|
});
|
||||||
return [
|
return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)];
|
||||||
genPickerStyle(pickerToken),
|
|
||||||
genPanelStyle(pickerToken),
|
|
||||||
genPickerStatusStyle(pickerToken),
|
|
||||||
];
|
|
||||||
},
|
},
|
||||||
token => ({
|
token => ({
|
||||||
zIndexPopup: token.zIndexPopupBase + 50,
|
zIndexPopup: token.zIndexPopupBase + 50,
|
||||||
|
|||||||
@ -63,8 +63,10 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
|
|||||||
export default () => {
|
export default () => {
|
||||||
const { locale } = useIntl();
|
const { locale } = useIntl();
|
||||||
const isZhCN = locale === 'zh-CN';
|
const isZhCN = locale === 'zh-CN';
|
||||||
const [{ articles = { cn: [], en: [] }, authors = [] }, loading] =
|
const [{ articles = { cn: [], en: [] }, authors = [] }, loading] = useSiteData<{
|
||||||
useSiteData<{ articles: Articles; authors: Authors }>();
|
articles: Articles;
|
||||||
|
authors: Authors;
|
||||||
|
}>();
|
||||||
|
|
||||||
// ========================== Data ==========================
|
// ========================== Data ==========================
|
||||||
const mergedData = React.useMemo(() => {
|
const mergedData = React.useMemo(() => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user