mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +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 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;
|
||||
|
||||
@ -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>,
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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,
|
||||
}),
|
||||
);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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(() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user