mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-08 01:53:34 +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,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -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