Skip to content

Commit

Permalink
feat(Calendar): add cellClassName prop (#3336)
Browse files Browse the repository at this point in the history 
* feat(calendar): add cellClassName prop

fix #3333

* docs(calendar): format table
  • Loading branch information
@hyoban
hyoban committed Aug 17, 2023
1 parent 035d287 commit cb7c2ae
Show file tree
Hide file tree
Showing 7 changed files with 82 additions and 31 deletions.
25 changes: 14 additions & 11 deletions docs/pages/components/calendar/en-US/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,17 @@ A component that displays data by calendar

### `<Calendar>`

| Property | Type`(Default)` | Description |
| ------------ | ------------------------------------------- | ------------------------------------------------------------------------------------ |
| bordered | boolean | Show border |
| compact | boolean | Display a compact calendar |
| defaultValue | Date | Default value |
| isoWeek | boolean | ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day |
| locale | [CalendarLocaleType](/guide/i18n/#calendar) | Locale text |
| onChange | (date:Date) => void | Callback fired before the value changed |
| onSelect | (date:Date) => void | Callback fired before the date selected |
| renderCell | (date: Date) => ReactNode | Custom render calendar cells |
| value | Date | Controlled value |
<!-- prettier-sort-markdown-table -->

| Property | Type`(Default)` | Description |
| ------------- | ------------------------------------------- | ------------------------------------------------------------------------------------ |
| bordered | boolean | Show border |
| cellClassName | (date: Date) => string \| undefined | Custom cell classes base on it's date |
| compact | boolean | Display a compact calendar |
| defaultValue | Date | Default value |
| isoWeek | boolean | ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day |
| locale | [CalendarLocaleType](/guide/i18n/#calendar) | Locale text |
| onChange | (date:Date) => void | Callback fired before the value changed |
| onSelect | (date:Date) => void | Callback fired before the date selected |
| renderCell | (date: Date) => ReactNode | Custom render calendar cells |
| value | Date | Controlled value |
25 changes: 14 additions & 11 deletions docs/pages/components/calendar/zh-CN/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,17 @@

### `<Calendar>`

| 属性名称 | 类型`(默认值)` | 描述 |
| ------------ | ---------------------------------------------- | --------------------------------------------------------- |
| bordered | boolean | 显示边框 |
| compact | boolean | 紧凑型显示 |
| defaultValue | Date | 默认值 |
| isoWeek | boolean | ISO 8601 标准， 每个日历星期从星期一开始，星期日为第 7 天 |
| locale | [CalendarLocaleType](/zh/guide/i18n/#calendar) | 本地化的文本 |
| onChange | (date:Date) => void | 值改变后的回调函数 |
| onSelect | (date:Date) => void | 选择日期后的回调函数 |
| renderCell | (date: Date) => ReactNode | 自定义渲染日历单元格 |
| value | Date | 值 (`受控`) |
<!-- prettier-sort-markdown-table -->

| 属性名称 | 类型`(默认值)` | 描述 |
| ------------- | ---------------------------------------------- | --------------------------------------------------------- |
| bordered | boolean | 显示边框 |
| cellClassName | (date: Date) => string \| undefined | 根据单元格日期自定义 class |
| compact | boolean | 紧凑型显示 |
| defaultValue | Date | 默认值 |
| isoWeek | boolean | ISO 8601 标准， 每个日历星期从星期一开始，星期日为第 7 天 |
| locale | [CalendarLocaleType](/zh/guide/i18n/#calendar) | 本地化的文本 |
| onChange | (date:Date) => void | 值改变后的回调函数 |
| onSelect | (date:Date) => void | 选择日期后的回调函数 |
| renderCell | (date: Date) => ReactNode | 自定义渲染日历单元格 |
| value | Date | 值 (`受控`) |
5 changes: 5 additions & 0 deletions src/Calendar/Calendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ export interface CalendarProps extends WithAsProps {

/** Custom render calendar cells */
renderCell?: (date: Date) => React.ReactNode;

/** Custom cell classes base on it's date */
cellClassName?: (date: Date) => string | undefined;
}

const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps> =
Expand All @@ -60,6 +63,7 @@ const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps
onSelect,
renderCell,
value,
cellClassName,
...rest
} = props;

Expand Down Expand Up @@ -121,6 +125,7 @@ const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps
)}
renderToolbar={renderToolbar}
renderCell={customRenderCell}
cellClassName={cellClassName}
onMoveForward={handleChange}
onMoveBackward={handleChange}
onChangeMonth={handleChange}
Expand Down
6 changes: 6 additions & 0 deletions src/Calendar/CalendarContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,9 @@ export interface CalendarProps
/** Custom rendering cell*/
renderCell?: (date: Date) => React.ReactNode;

/** Custom cell classes base on it's date */
cellClassName?: (date: Date) => string | undefined;

/** Called when opening the month view */
onToggleMonthDropdown?: (toggle: boolean) => void;

Expand Down Expand Up @@ -133,6 +136,7 @@ const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps> = React.
onToggleMonthDropdown,
onToggleTimeDropdown,
calendarDate,
cellClassName,
renderCell,
renderTitle,
renderToolbar,
Expand Down Expand Up @@ -228,6 +232,7 @@ const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps> = React.
onChangeTime,
onMouseMove,
onSelect,
cellClassName,
renderCell,
showWeekNumbers,
inline
Expand All @@ -246,6 +251,7 @@ const CalendarContainer: RsRefForwardingComponent<'div', CalendarProps> = React.
onChangeTime,
onMouseMove,
onSelect,
cellClassName,
renderCell,
showWeekNumbers
]
Expand Down
22 changes: 13 additions & 9 deletions src/Calendar/TableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const TableRow: RsRefForwardingComponent<'div', TableRowProps> = React.forwardRe
isoWeek,
onMouseMove,
onSelect,
cellClassName,
renderCell,
locale: overrideLocale,
showWeekNumbers
Expand Down Expand Up @@ -101,15 +102,18 @@ const TableRow: RsRefForwardingComponent<'div', TableRowProps> = React.forwardRe
}
}

const classes = prefix('cell', {
'cell-un-same-month': unSameMonth,
'cell-is-today': isToday,
'cell-selected': isSelected,
'cell-selected-start': isStartSelected,
'cell-selected-end': isEndSelected,
'cell-in-range': !unSameMonth && inRange,
'cell-disabled': disabled
});
const classes = merge(
prefix('cell', {
'cell-un-same-month': unSameMonth,
'cell-is-today': isToday,
'cell-selected': isSelected,
'cell-selected-start': isStartSelected,
'cell-selected-end': isEndSelected,
'cell-in-range': !unSameMonth && inRange,
'cell-disabled': disabled
}),
cellClassName?.(thisDate)
);

const title = formatDate
? formatDate(thisDate, formatStr)
Expand Down
29 changes: 29 additions & 0 deletions src/Calendar/test/CalendarTableRowSpec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { getDate, format } from '../../utils/dateUtils';
import CalendarContext from '../CalendarContext';
import Sinon from 'sinon';
import { testStandardProps } from '@test/commonCases';
import { isToday } from 'date-fns';

describe('Calendar-TableRow', () => {
testStandardProps(<TableRow />);
Expand Down Expand Up @@ -82,4 +83,32 @@ describe('Calendar-TableRow', () => {
) as HTMLElement
).to.have.text(format(new Date(), 'I'));
});

it('Should have a additional className', () => {
const ref = React.createRef<HTMLDivElement>();
render(
<CalendarContext.Provider
value={{
showWeekNumbers: true,
isoWeek: true,
date: new Date(),
locale: {},
cellClassName: (date: Date) => {
if (isToday(date)) {
return 'custom-cell';
}
}
}}
>
<TableRow ref={ref} />
</CalendarContext.Provider>
);

expect(
// eslint-disable-next-line testing-library/no-node-access
(ref.current as HTMLDivElement).querySelector(
'.rs-calendar-table-cell-is-today'
) as HTMLElement
).to.have.class('custom-cell');
});
});
1 change: 1 addition & 0 deletions src/Calendar/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface CalendarInnerContextValue {
onMouseMove?: (date: Date) => void;
onSelect?: (date: Date, event: React.MouseEvent) => void;
renderCell?: (date: Date) => React.ReactNode;
cellClassName?: (date: Date) => string | undefined;
showWeekNumbers?: boolean;
inline?: boolean;
}
Expand Down

1 comment on commit cb7c2ae

@vercel
Copy link

@vercel vercel bot commented on cb7c2ae Aug 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

rsuite-nextjs – ./docs

rsuite-nextjs-rsuite.vercel.app
rsuite.vercel.app
rsuite-nextjs-git-main-rsuite.vercel.app
rsuitejs.com

Please sign in to comment.