Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: update calendar #6173

Merged
merged 9 commits into from
Aug 24, 2023
Merged

feat: update calendar #6173

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f407579
feat: update calendar
bravepg May 22, 2023
865c3fc
fix: update style
bravepg Jun 24, 2023
0bd85a7
fix: update test snap
bravepg Jun 24, 2023
1400ca2
feat: update readme
bravepg Jun 24, 2023
47b5fe1
fix: merge conflict
bravepg Jul 26, 2023
6a5595f
fix: usercase
bravepg Jul 26, 2023
03f7308
feat: split calendar view
bravepg Aug 6, 2023
b26e2aa
feat: update config
bravepg Aug 13, 2023
ac559c4
Merge branch 'feature' into feat/update-calendar
bravepg Aug 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions src/components/calendar/calendar.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,23 +25,22 @@ When the user needs to enter a date, he can select it in the pop-up date panel.
| Name | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | Whether to allow clearing after another click. | `boolean` | `true` |
| confirmText | The text of confirm button | `string` | `Confirm` |
| defaultValue | The default selected date or date range. | Same as `value` prop. | - |
| max | Maximum value of a selectable range. | `Date` | - |
| min | Minimum value of a selectable range. | `Date` | - | - |
| maxPage | Maximum visible page of date. | `Page` |
| minPage | Minimum visible page of date. | `Page` | - |
| nextMonthButton | Contents of the Next Month button on the navigation pane | `React.ReactNode` | `>` |
| nextYearButton | Contents of the next Year button on the navigation pane | `React.ReactNode` | `>>` |
| onChange | Trigger when selected date changes. | `(val: Date \| null) => void` when selection mode is "single". `(val: [Date, Date] \| null) => void` when selection mode is "range". | - |
| onPageChange | Trigger when changed year or month. | `(year: number, month: number) => void` | - |
| prevMonthButton | Contents of the Last Month button on the navigation pane | `React.ReactNode` | `<` |
| prevYearButton | Contents of the Last year button on the navigation pane | `React.ReactNode` | `<<` |
| renderLabel | The label render function. | `(date: Date) => ReactNode \| null \| undefined` | - |
| onConfirm | Trigger when confirm button is clicked. | `(val: Date \| null) => void` when selection mode is "single"，`(val: [Date, Date] \| null) => void` when selection mode is "range" | - |
| renderTop | The top information of date render function. | `(date: Date) => ReactNode \| null \| undefined` | - |
| renderBottom | The bottom information of date render function. | `(date: Date) => ReactNode \| null \| undefined` | - |
| selectionMode | The selection mode. Disable selection when this prop is not set. | `'single' \| 'range'` | - |
| shouldDisableDate | Set whether the date is disable selection. The min and max Settings are ignored | `(date: Date) => boolean` | - |
| title | The title of calendar | `React.ReactNode` | `Date selection` |
| value | The selected date or date range. | `Date \| null` when selection mode is "single". `[Date, Date] \| null` when selection mode is "range" | - |
| weekStartsOn | Week starts on which day. | `'Monday' \| 'Sunday'` | `'Sunday'` |
| renderDate | Custom date rendering. | `(date: Date) => ReactNode` | - | 5.28.0 |
| usePopup | Whether to use popup | `boolean` | `true` |
Copy link
Member

Choose a reason for hiding this comment

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

这个在其他组件里是 XXXView，感觉也可以照着搞一下。不用 usePopup

| popupProps | popup props | `Reference Popup Component` | - | |

### CSS Variables

Expand Down
103 changes: 69 additions & 34 deletions src/components/calendar/calendar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,102 @@
.adm-calendar {
.adm-calendar,
.adm-calendar-popup {
& &-title {
flex: auto;
font-size: var(--adm-font-size-10);
}

& &-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-top: 4px;
a.adm-calendar-arrow-button {
padding: 4px 8px;
display: block;
flex: none;
svg {
height: 22px;
}
&.adm-calendar-arrow-button-right {
svg {
transform: rotate(180deg);
}
}
}
padding: 12px;
border-bottom: 1px solid var(--adm-color-border);

.adm-calendar-title {
font-size: var(--adm-font-size-10);
flex: auto;
text-align: center;
}
}

& &-body {
display: flex;
flex-wrap: wrap;
height: 64vh;
overflow: auto;

&::-webkit-scrollbar {
display: none;
}

.adm-calendar-title {
position: sticky;
top: 0;
padding: 8px 20px;
background-color: var(--adm-color-box);
}
}

& &-footer {
&-bottom {
padding: 0 20px 16px;
}

.adm-divider {
margin-top: 0;
}

.adm-button {
width: 100%;
}
}

&-cells {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
padding: 8px 8px 4px;
padding: 4px 8px;
}

&-cell {
flex: none;
box-sizing: border-box;
width: calc(100% / 7);
height: 48px;
min-height: 55px;
margin-bottom: 4px;
padding: 2px;
color: var(--adm-color-text);
cursor: pointer;

&&-today {
color: var(--adm-color-primary);
}

&&-disabled {
color: var(--adm-color-light);

.adm-calendar-cell-top,
.adm-calendar-cell-bottom {
color: var(--adm-color-light);
}
}

&&-selected {
&& {
background: var(--adm-color-primary);
color: var(--adm-color-white);
background: rgba(22, 119, 255, 10%);
color: var(--adm-color-text);
}

& .adm-calendar-cell-top,
& .adm-calendar-cell-bottom {
color: var(--adm-color-white);
}

&&-begin {
background: var(--adm-color-primary);
color: var(--adm-color-white);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

&&-end {
background: var(--adm-color-primary);
color: var(--adm-color-white);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
Expand All @@ -79,16 +109,20 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
& &-top {
justify-content: center;

& &-date {
flex: none;
font-size: var(--adm-font-size-10);
line-height: 22px;
font-size: var(--adm-font-size-8);
}

& &-top,
& &-bottom {
flex: none;
font-size: var(--adm-font-size-4);
height: 12px;
line-height: 12px;
font-size: var(--adm-font-size-1);
height: 14px;
line-height: 14px;
color: var(--adm-color-weak);
}
}
Expand All @@ -101,8 +135,9 @@
border-bottom: solid 1px var(--adm-color-border);
height: 45px;
box-sizing: border-box;
font-size: var(--adm-font-size-7);
font-size: var(--adm-font-size-6);
padding: 0 8px;

& &-cell {
flex: 1;
text-align: center;
Expand Down
Loading
Loading