add all frontend files

This commit is contained in:
2026-01-17 15:16:36 -05:00
parent ff16ae7858
commit e40287e4aa
25704 changed files with 1935289 additions and 0 deletions

9
node_modules/rc-picker/LICENSE.md generated vendored Normal file
View File

@@ -0,0 +1,9 @@
The MIT License (MIT)
Copyright (c) 2019-present afc163
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

154
node_modules/rc-picker/README.md generated vendored Normal file
View File

@@ -0,0 +1,154 @@
# rc-picker
[![NPM version][npm-image]][npm-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
[npm-image]: http://img.shields.io/npm/v/rc-picker.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-picker
[github-actions-image]: https://github.com/react-component/picker/workflows/CI/badge.svg
[github-actions-url]: https://github.com/react-component/picker/actions
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/picker/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/picker/branch/master
[david-url]: https://david-dm.org/react-component/picker
[david-image]: https://david-dm.org/react-component/picker/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/picker?type=dev
[david-dev-image]: https://david-dm.org/react-component/picker/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/rc-picker.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-picker
[bundlephobia-url]: https://bundlephobia.com/result?p=rc-picker
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-picker
## Live Demo
https://react-component.github.io/picker/
## Install
[![rc-picker](https://nodei.co/npm/rc-picker.png)](https://npmjs.org/package/rc-picker)
## Usage
```js
import Picker from 'rc-picker';
import 'rc-picker/assets/index.css';
import { render } from 'react-dom';
render(<Picker />, mountNode);
```
## API
### Picker
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| prefixCls | String | rc-picker | prefixCls of this component |
| className | String | '' | additional css class of root dom node |
| style | React.CSSProperties | | additional style of root dom node |
| dropdownClassName | String | '' | additional className applied to dropdown |
| popupAlign | Object:alignConfig of [dom-align](https://github.com/yiminghe/dom-align) | | value will be merged into placement's popupAlign config |
| popupStyle | React.CSSProperties | | customize popup style |
| transitionName | String | '' | css class for animation |
| locale | Object | import from 'rc-picker/lib/locale/en_US' | rc-picker locale |
| inputReadOnly | boolean | false | set input to read only |
| allowClear | boolean \| { clearIcon?: ReactNode } | false | whether show clear button or customize clear button |
| autoFocus | boolean | false | whether auto focus |
| showTime | boolean \| Object | [showTime options](#showTime-options) | to provide an additional time selection |
| picker | time \| date \| week \| month \| year | | control which kind of panel should be shown |
| format | String \| String[] | depends on whether you set timePicker and your locale | use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display |
| use12Hours | boolean | false | 12 hours display mode |
| value | moment | | current value like input's value |
| defaultValue | moment | | defaultValue like input's defaultValue |
| open | boolean | false | current open state of picker. controlled prop |
| suffixIcon | ReactNode | | The custom suffix icon |
| prevIcon | ReactNode | | The custom prev icon |
| nextIcon | ReactNode | | The custom next icon |
| superPrevIcon | ReactNode | | The custom super prev icon |
| superNextIcon | ReactNode | | The custom super next icon |
| disabled | boolean | false | whether the picker is disabled |
| placeholder | String | | picker input's placeholder |
| getPopupContainer | function(trigger) | | to set the container of the floating layer, while the default is to create a div element in body |
| onChange | Function(date: moment, dateString: string) | | a callback function, can be executed when the selected time is changing |
| onOpenChange | Function(open:boolean) | | called when open/close picker |
| onFocus | (event:React.FocusEvent\<HTMLInputElement>) => void | | called like input's on focus |
| onBlur | (event:React.FocusEvent\<HTMLInputElement>) => void | | called like input's on blur |
| onKeyDown | (event:React.KeyboardEvent\<HTMLInputElement>, preventDefault: () => void) => void | | input on keydown event |
| direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. |
### PickerPanel
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| prefixCls | String | rc-picker | prefixCls of this component |
| className | String | '' | additional css class of root dom |
| style | React.CSSProperties | | additional style of root dom node |
| locale | Object | import from 'rc-picker/lib/locale/en_US' | rc-picker locale |
| value | moment | | current value like input's value |
| defaultValue | moment | | defaultValue like input's defaultValue |
| defaultPickerValue | moment | | Set default display picker view date |
| mode | time \| datetime \| date \| week \| month \| year \| decade | | control which kind of panel |
| picker | time \| date \| week \| month \| year | | control which kind of panel |
| tabIndex | Number | 0 | view [tabIndex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) |
| showTime | boolean \| Object | [showTime options](#showTime-options) | to provide an additional time selection |
| showToday | boolean | false | whether to show today button |
| disabledDate | Function(date:moment) => boolean | | whether to disable select of current date |
| dateRender | Function(currentDate:moment, today:moment) => React.Node | | custom rendering function for date cells |
| monthCellRender | Function(currentDate:moment, locale:Locale) => React.Node | | Custom month cell render method |
| renderExtraFooter | (mode) => React.Node | | extra footer |
| onSelect | Function(date: moment) | | a callback function, can be executed when the selected time |
| onPanelChange | Function(value: moment, mode) | | callback when picker panel mode is changed |
| onMouseDown | (event:React.MouseEvent\<HTMLInputElement>) => void | | callback when executed onMouseDown event |
| direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. |
### RangePicker
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| prefixCls | String | rc-picker | prefixCls of this component |
| className | String | '' | additional css class of root dom |
| style | React.CSSProperties | | additional style of root dom node |
| locale | Object | import from 'rc-picker/lib/locale/en_US' | rc-picker locale |
| value | moment | | current value like input's value |
| defaultValue | moment | | defaultValue like input's defaultValue |
| defaultPickerValue | moment | | Set default display picker view date |
| separator | String | '~' | set separator between inputs |
| picker | time \| date \| week \| month \| year | | control which kind of panel |
| placeholder | [String, String] | | placeholder of date input |
| showTime | boolean \| Object | [showTime options](#showTime-options) | to provide an additional time selection |
| showTime.defaultValue | [moment, moment] | | to set default time of selected date |
| use12Hours | boolean | false | 12 hours display mode |
| disabledTime | Function(date: moment, type:'start'\|'end'):Object | | | to specify the time that cannot be selected |
| ranges | { String \| [range: string]: moment[] } \| { [range: string]: () => moment[] } | | preseted ranges for quick selection |
| format | String \| String[] | depends on whether you set timePicker and your locale | use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display |
| allowEmpty | [boolean, boolean] | | allow range picker clearing text |
| selectable | [boolean, boolean] | | whether to selected picker |
| disabled | boolean | false | whether the range picker is disabled |
| onChange | Function(value:[moment], formatString: [string, string]) | | a callback function, can be executed when the selected time is changing |
| onCalendarChange | Function(value:[moment], formatString: [string, string], info: { range:'start'\|'end' }) | | a callback function, can be executed when the start time or the end time of the range is changing |
| direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. |
| order | boolean | true | (TimeRangePicker only) `false` to disable auto order |
### showTime-options
| Property | Type | Default | Description |
| ------------------- | ------- | ------- | ---------------------------------- |
| format | String | | moment format |
| showHour | boolean | true | whether show hour |
| showMinute | boolean | true | whether show minute |
| showSecond | boolean | true | whether show second |
| use12Hours | boolean | false | 12 hours display mode |
| hourStep | Number | 1 | interval between hours in picker |
| minuteStep | Number | 1 | interval between minutes in picker |
| secondStep | Number | 1 | interval between seconds in picker |
| hideDisabledOptions | boolean | false | whether hide disabled options |
| defaultValue | moment | null | default initial value |
## Development
```
npm install
npm start
```
## License
rc-picker is released under the MIT license.

407
node_modules/rc-picker/assets/index.css generated vendored Normal file
View File

@@ -0,0 +1,407 @@
.rc-picker {
position: relative;
display: inline-flex;
}
.rc-picker-rtl {
direction: rtl;
}
.rc-picker-focused {
border: 1px solid blue;
}
.rc-picker-invalid {
box-shadow: 0 0 2px red;
}
.rc-picker-panels {
display: flex;
flex-wrap: nowrap;
}
.rc-picker-panel {
display: inline-block;
vertical-align: top;
background: #fff0ff;
border: 1px solid #666;
}
.rc-picker-panel-focused {
border-color: blue;
}
.rc-picker-panel-rtl {
direction: rtl;
}
.rc-picker-decade-panel,
.rc-picker-year-panel,
.rc-picker-month-panel,
.rc-picker-week-panel,
.rc-picker-date-panel,
.rc-picker-time-panel {
display: flex;
flex-direction: column;
}
.rc-picker-decade-panel table,
.rc-picker-year-panel table,
.rc-picker-month-panel table,
.rc-picker-week-panel table,
.rc-picker-date-panel table,
.rc-picker-time-panel table {
text-align: center;
border-collapse: collapse;
}
.rc-picker-header {
display: flex;
}
.rc-picker-header > * {
flex: none;
}
.rc-picker-header-view {
flex: auto;
text-align: center;
}
.rc-picker-header-view > button {
padding: 0;
border: 0;
}
.rc-picker-cell {
color: #aaa;
}
.rc-picker-cell-disabled {
opacity: 0.2;
}
.rc-picker-cell-inner {
display: inline-block;
box-sizing: border-box;
width: 100%;
height: 20px;
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
background: transparent;
border: 0;
border: none;
outline: none;
cursor: pointer;
transition: background 0.3s, border 0.3s;
}
.rc-picker-cell-inner:hover {
background: rgba(0, 0, 255, 0.3);
}
.rc-picker-cell-in-view {
color: #333;
}
.rc-picker-cell-in-range > .rc-picker-cell-inner {
background: rgba(0, 0, 255, 0.05);
}
.rc-picker-cell-hover > .rc-picker-cell-inner {
background: orange;
}
.rc-picker-cell-range-hover-start,
.rc-picker-cell-range-hover-end,
.rc-picker-cell-range-hover {
position: relative;
}
.rc-picker-cell-range-hover-start::after,
.rc-picker-cell-range-hover-end::after,
.rc-picker-cell-range-hover::after {
position: absolute;
top: 3px;
right: 0;
bottom: 0;
left: 0;
border: 1px solid green;
border-right: 0;
border-left: 0;
content: '';
pointer-events: none;
}
.rc-picker-cell-range-hover-start::after {
border-left: 1px solid green !important;
}
.rc-picker-cell-range-hover-end::after {
border-right: 1px solid green !important;
}
.rc-picker-cell-today > .rc-picker-cell-inner {
border: 1px solid blue;
}
.rc-picker-cell-range-start > .rc-picker-cell-inner,
.rc-picker-cell-range-end > .rc-picker-cell-inner,
.rc-picker-cell-selected > .rc-picker-cell-inner {
background: rgba(0, 0, 255, 0.2);
}
.rc-picker-presets {
background: #ccccff;
}
.rc-picker-presets ul {
margin: 0;
padding: 0;
list-style: none;
}
.rc-picker-footer,
.rc-picker-picker-footer {
background: green;
}
.rc-picker-ranges {
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.rc-picker-ranges > li {
display: inline-block;
}
.rc-picker-ok {
float: right;
}
.rc-picker-year-panel .rc-picker-cell-inner,
.rc-picker-month-panel .rc-picker-cell-inner {
width: 80px;
}
.rc-picker-week-panel-row:hover .rc-picker-cell {
background: red;
}
.rc-picker-week-panel-row-selected .rc-picker-cell {
background: rgba(0, 0, 255, 0.3);
}
.rc-picker-week-panel-row-range-hover .rc-picker-cell {
background: rgba(0, 255, 0, 0.1);
}
.rc-picker-week-panel-row-range-start .rc-picker-cell,
.rc-picker-week-panel-row-range-end .rc-picker-cell {
background: rgba(0, 255, 0, 0.3);
}
.rc-picker-week-panel .rc-picker-cell,
.rc-picker-week-panel .rc-picker-cell-inner {
width: 20px;
}
.rc-picker-week-panel .rc-picker-cell-week {
color: #999;
font-weight: bold;
font-size: 12px;
}
.rc-picker-week-panel .rc-picker-cell:hover > .rc-picker-cell-inner,
.rc-picker-week-panel .rc-picker-cell-selected > .rc-picker-cell-inner {
background: transparent;
}
.rc-picker-date-panel .rc-picker-cell-inner {
width: 20px;
}
.rc-picker-time-panel {
width: auto;
}
.rc-picker-time-panel .rc-picker-content {
position: relative;
display: flex;
max-height: 200px;
direction: ltr;
}
.rc-picker-time-panel-column-title {
font-size: 14px;
line-height: 20px;
}
.rc-picker-time-panel-column {
flex: auto;
width: 50px;
margin: 0;
padding: 0 0 180px;
overflow-x: hidden;
overflow-y: hidden;
font-size: 12px;
text-align: left;
list-style: none;
transition: background 0.3s;
}
.rc-picker-time-panel-column-active {
background: rgba(0, 0, 255, 0.1);
}
.rc-picker-time-panel-column:hover {
overflow-y: auto;
}
.rc-picker-time-panel-column > li {
width: 50px;
margin: 0;
padding: 0;
cursor: pointer;
}
.rc-picker-time-panel-column > li.rc-picker-time-panel-cell-disabled {
opacity: 0.5;
}
.rc-picker-time-panel-column > li.rc-picker-time-panel-cell-selected {
background: rgba(0, 0, 255, 0.5);
}
.rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
display: block;
width: 100%;
height: 20px;
margin: 0;
color: #333;
line-height: 20px;
text-align: center;
}
.rc-picker-panel-rtl .rc-picker-time-panel-column > li .rc-picker-time-panel-cell-inner {
padding: 0 12px 0 0;
text-align: right;
}
.rc-picker-datetime-panel {
display: flex;
}
.rc-picker-datetime-panel .rc-picker-time-panel {
border-left: 1px solid #999;
}
.rc-picker-datetime-panel .rc-picker-date-panel,
.rc-picker-datetime-panel .rc-picker-time-panel {
transition: opacity 0.3s;
}
.rc-picker-datetime-panel-active .rc-picker-date-panel,
.rc-picker-datetime-panel-active .rc-picker-time-panel {
opacity: 0.3;
}
.rc-picker-datetime-panel-active .rc-picker-date-panel-active,
.rc-picker-datetime-panel-active .rc-picker-time-panel-active {
opacity: 1;
}
.rc-picker-input {
position: relative;
display: inline-flex;
width: 100%;
}
.rc-picker-rtl .rc-picker-input {
text-align: right;
}
.rc-picker-input-active > input {
background: rgba(0, 0, 255, 0.05);
}
.rc-picker-input > input {
width: 100%;
}
.rc-picker-input > input::-moz-placeholder {
opacity: 1;
}
.rc-picker-input > input::placeholder {
color: #bfbfbf;
}
.rc-picker-input > input:placeholder-shown {
text-overflow: ellipsis;
}
.rc-picker-input-placeholder > input {
color: #bfbfbf;
}
.rc-picker-clear {
position: absolute;
top: 0;
inset-inline-end: 4px;
cursor: pointer;
}
.rc-picker-clear-btn::after {
content: '×';
}
.rc-picker-dropdown {
position: absolute;
box-shadow: 0 0 1px red;
pointer-events: none;
}
.rc-picker-dropdown-range {
padding: 10px 0;
}
.rc-picker-dropdown-hidden {
display: none;
}
.rc-picker-dropdown-rtl {
direction: rtl;
}
.rc-picker-dropdown-placement-topLeft .rc-picker-range-arrow,
.rc-picker-dropdown-placement-topRight .rc-picker-range-arrow {
bottom: 6px;
transform: rotate(135deg);
}
.rc-picker-dropdown-placement-bottomLeft .rc-picker-range-arrow,
.rc-picker-dropdown-placement-bottomRight .rc-picker-range-arrow {
top: 6px;
transform: rotate(-45deg);
}
.rc-picker-dropdown .rc-picker-range-arrow {
position: absolute;
z-index: 1;
width: 10px;
height: 10px;
transition: all 0.3s;
}
.rc-picker-dropdown .rc-picker-range-arrow::before,
.rc-picker-dropdown .rc-picker-range-arrow::after {
position: absolute;
top: 50%;
inset-inline-start: 50%;
box-sizing: border-box;
transform: translate(-50%, -50%);
content: '';
}
.rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow::before,
.rc-picker-dropdown-rtl.rc-picker-dropdown .rc-picker-range-arrow::after {
transform: translate(50%, -50%);
}
.rc-picker-dropdown .rc-picker-range-arrow::before {
width: 10px;
height: 10px;
border: 5px solid blue;
border-color: blue blue transparent transparent;
}
.rc-picker-dropdown .rc-picker-range-arrow::after {
width: 8px;
height: 8px;
border: 4px solid blue;
border-color: #fff0ff #fff0ff transparent transparent;
}
.rc-picker-range {
position: relative;
display: inline-flex;
}
.rc-picker-range-wrapper {
display: flex;
}
.rc-picker-range .rc-picker-active-bar {
bottom: 0;
height: 3px;
background: green;
opacity: 0;
transition: all 0.3s;
pointer-events: none;
}
.rc-picker-range.rc-picker-focused .rc-picker-active-bar {
opacity: 1;
}
.rc-picker-panel-container {
display: inline-block;
vertical-align: top;
transition: margin 0.3s;
pointer-events: all;
}
.rc-picker-panel-layout {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
.rc-picker-selector {
width: 100%;
}
.rc-picker-selection-overflow {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
width: 100%;
border: 1px solid green;
min-height: 1em;
}
.rc-picker-selection-overflow-item {
flex: none;
max-width: 100%;
}
.rc-picker-selection-item {
border: 1px solid blue;
}
.rc-picker-selection-placeholder {
pointer-events: none;
position: absolute;
left: 0;
top: 0;
}
.rc-picker-multiple-input {
width: 10px;
opacity: 0.1;
}

570
node_modules/rc-picker/assets/index.less generated vendored Normal file
View File

@@ -0,0 +1,570 @@
@prefix-cls: rc-picker;
@background-color: rgb(255, 240, 255);
@input-placeholder-color: hsv(0, 0, 75%);
@time-panel-padding-total: 180px;
// @time-panel-padding-top: 90px;
@time-panel-padding-top: 0;
.placeholder(@color: @input-placeholder-color) {
// Firefox
&::-moz-placeholder {
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
}
&::placeholder {
color: @color;
}
&:placeholder-shown {
text-overflow: ellipsis;
}
}
.@{prefix-cls} {
position: relative;
display: inline-flex;
&-rtl {
direction: rtl;
}
&-focused {
border: 1px solid blue;
}
&-invalid {
box-shadow: 0 0 2px red;
}
&-panels {
display: flex;
flex-wrap: nowrap;
}
&-panel {
display: inline-block;
vertical-align: top;
background: @background-color;
border: 1px solid #666;
&-focused {
border-color: blue;
}
&-rtl {
direction: rtl;
}
}
// ===================== Shared Panel =====================
&-decade-panel,
&-year-panel,
&-month-panel,
&-week-panel,
&-date-panel,
&-time-panel {
display: flex;
flex-direction: column;
table {
text-align: center;
border-collapse: collapse;
}
}
// Header
&-header {
display: flex;
> * {
flex: none;
}
&-view {
flex: auto;
text-align: center;
> button {
padding: 0;
border: 0;
}
}
}
// Content
&-cell {
color: #aaa;
&-disabled {
opacity: 0.2;
}
&-inner {
display: inline-block;
box-sizing: border-box;
width: 100%;
height: 20px;
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
background: transparent;
border: 0;
border: none;
outline: none;
cursor: pointer;
transition:
background 0.3s,
border 0.3s;
&:hover {
background: fade(blue, 30%);
}
}
&-in-view {
color: #333;
}
&-in-range > &-inner {
background: fade(blue, 5%);
}
&-hover > &-inner {
background: orange;
}
&-range-hover-start,
&-range-hover-end,
&-range-hover {
position: relative;
&::after {
position: absolute;
top: 3px;
right: 0;
bottom: 0;
left: 0;
border: 1px solid green;
border-right: 0;
border-left: 0;
content: '';
pointer-events: none;
}
}
&-range-hover-start::after {
border-left: 1px solid green !important;
}
&-range-hover-end::after {
border-right: 1px solid green !important;
}
&-today > &-inner {
border: 1px solid blue;
}
&-range-start > &-inner,
&-range-end > &-inner,
&-selected > &-inner {
background: fade(blue, 20%);
}
}
// Preset
&-presets {
background: #ccccff;
ul {
margin: 0;
padding: 0;
list-style: none;
}
}
&-footer,
&-picker-footer {
background: green;
}
&-ranges {
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
> li {
display: inline-block;
}
}
&-ok {
float: right;
}
// ================== Year & Month Panel ==================
&-year-panel,
&-month-panel {
.@{prefix-cls}-cell-inner {
width: 80px;
}
}
// ====================== Week Panel ======================
&-week-panel {
&-row {
&:hover {
.@{prefix-cls}-cell {
background: red;
}
}
&-selected {
.@{prefix-cls}-cell {
background: rgba(0, 0, 255, 0.3);
}
}
&-range {
&-hover {
.@{prefix-cls}-cell {
background: rgba(0, 255, 0, 0.1);
}
}
&-start,
&-end {
.@{prefix-cls}-cell {
background: rgba(0, 255, 0, 0.3);
}
}
}
}
.@{prefix-cls}-cell,
.@{prefix-cls}-cell-inner {
width: 20px;
}
.@{prefix-cls}-cell-week {
color: #999;
font-weight: bold;
font-size: 12px;
}
.@{prefix-cls}-cell:hover > .@{prefix-cls}-cell-inner,
.@{prefix-cls}-cell-selected > .@{prefix-cls}-cell-inner {
background: transparent;
}
}
// ====================== Date Panel ======================
&-date-panel {
.@{prefix-cls}-cell-inner {
width: 20px;
}
}
// ====================== Time Panel ======================
&-time-panel {
width: auto;
.@{prefix-cls}-content {
position: relative;
display: flex;
max-height: 200px;
direction: ltr;
// &::after {
// position: absolute;
// top: @time-panel-padding-top;
// right: -5px;
// left: -5px;
// height: 20px;
// background: rgba(255, 0, 0, 0.05);
// content: '';
// pointer-events: none;
// }
}
// &-column-holder {
// display: flex;
// flex-direction: column;
// text-align: center;
// }
&-column-title {
font-size: 14px;
line-height: 20px;
}
&-column {
flex: auto;
width: 50px;
margin: 0;
// padding: 0 0 180px 0;
padding: @time-panel-padding-top 0 (@time-panel-padding-total - @time-panel-padding-top);
overflow-x: hidden;
overflow-y: hidden;
font-size: 12px;
text-align: left;
list-style: none;
transition: background 0.3s;
&-active {
background: rgba(0, 0, 255, 0.1);
}
&:hover {
overflow-y: auto;
}
> li {
width: 50px;
margin: 0;
padding: 0;
cursor: pointer;
&.@{prefix-cls}-time-panel-cell {
&-disabled {
opacity: 0.5;
}
&-selected {
background: rgba(0, 0, 255, 0.5);
}
}
.@{prefix-cls}-time-panel-cell-inner {
display: block;
width: 100%;
height: 20px;
margin: 0;
// padding: 0 0 0 12px;
color: #333;
line-height: 20px;
text-align: center;
.@{prefix-cls}-panel-rtl & {
padding: 0 12px 0 0;
text-align: right;
}
}
}
}
}
// ====================== Date Time =======================
&-datetime-panel {
display: flex;
.@{prefix-cls}-time-panel {
border-left: 1px solid #999;
}
.@{prefix-cls}-date-panel,
.@{prefix-cls}-time-panel {
transition: opacity 0.3s;
}
// Keyboard
&-active {
.@{prefix-cls}-date-panel,
.@{prefix-cls}-time-panel {
opacity: 0.3;
&-active {
opacity: 1;
}
}
}
}
// ======================== Input =========================
&-input {
position: relative;
display: inline-flex;
width: 100%;
.@{prefix-cls}-rtl & {
text-align: right;
}
&-active {
> input {
background: rgba(0, 0, 255, 0.05);
}
}
> input {
width: 100%;
.placeholder();
}
&-placeholder {
> input {
color: @input-placeholder-color;
}
}
}
&-clear {
position: absolute;
top: 0;
inset-inline-end: 4px;
cursor: pointer;
&-btn::after {
content: '×';
}
}
// ======================= Dropdown =======================
&-dropdown {
position: absolute;
box-shadow: 0 0 1px red;
pointer-events: none;
&-range {
padding: 10px 0;
}
&-hidden {
display: none;
}
&-rtl {
direction: rtl;
}
// Panel
@arrow-size: 10px;
&-placement-topLeft,
&-placement-topRight {
.@{prefix-cls}-range-arrow {
bottom: (@arrow-size / 2 + 1px);
transform: rotate(135deg);
}
}
&-placement-bottomLeft,
&-placement-bottomRight {
.@{prefix-cls}-range-arrow {
top: (@arrow-size / 2 + 1px);
transform: rotate(-45deg);
}
}
.@{prefix-cls}-range-arrow {
position: absolute;
z-index: 1;
width: @arrow-size;
height: @arrow-size;
transition: all 0.3s;
&::before,
&::after {
position: absolute;
top: 50%;
inset-inline-start: 50%;
box-sizing: border-box;
transform: translate(-50%, -50%);
content: '';
.@{prefix-cls}-dropdown-rtl& {
transform: translate(50%, -50%);
}
}
&::before {
width: @arrow-size;
height: @arrow-size;
border: (@arrow-size / 2) solid blue;
border-color: blue blue transparent transparent;
}
&::after {
width: @arrow-size - 2px;
height: @arrow-size - 2px;
border: ((@arrow-size - 2px) / 2) solid blue;
border-color: @background-color @background-color transparent transparent;
}
}
}
// ========================================================
// = Range Picker =
// ========================================================
&-range {
position: relative;
display: inline-flex;
&-wrapper {
display: flex;
}
.@{prefix-cls}-active-bar {
bottom: 0;
height: 3px;
background: green;
opacity: 0;
transition: all 0.3s;
pointer-events: none;
}
&.@{prefix-cls}-focused {
.@{prefix-cls}-active-bar {
opacity: 1;
}
}
}
&-panel-container {
display: inline-block;
vertical-align: top;
transition: margin 0.3s;
pointer-events: all;
}
&-panel-layout {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
// ========================================================
// = Overflow =
// ========================================================
&-selector {
width: 100%;
}
&-selection-overflow {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
width: 100%;
border: 1px solid green;
min-height: 1em;
&-item {
flex: none;
max-width: 100%;
}
}
&-selection-item {
border: 1px solid blue;
}
&-selection-placeholder {
pointer-events: none;
position: absolute;
left: 0;
top: 0;
}
&-multiple-input {
width: 10px;
opacity: 0.1;
}
}

View File

@@ -0,0 +1,19 @@
import * as React from 'react';
import type { GenerateConfig } from '../../generate';
import type { DisabledDate, InternalMode, PanelMode, SharedPickerProps } from '../../interface';
import type { PopupShowTimeConfig } from '.';
export interface FooterProps<DateType extends object = any> {
mode: PanelMode;
internalMode: InternalMode;
renderExtraFooter?: SharedPickerProps['renderExtraFooter'];
showNow: boolean;
generateConfig: GenerateConfig<DateType>;
disabledDate: DisabledDate<DateType>;
showTime?: PopupShowTimeConfig<DateType>;
/** From Footer component used only. Check if can OK button click */
invalid?: boolean;
onSubmit: (date?: DateType) => void;
needConfirm: boolean;
onNow: (now: DateType) => void;
}
export default function Footer(props: FooterProps): React.JSX.Element;

73
node_modules/rc-picker/es/PickerInput/Popup/Footer.js generated vendored Normal file
View File

@@ -0,0 +1,73 @@
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import classNames from 'classnames';
import * as React from 'react';
import useTimeInfo from "../../hooks/useTimeInfo";
import PickerContext from "../context";
export default function Footer(props) {
var mode = props.mode,
internalMode = props.internalMode,
renderExtraFooter = props.renderExtraFooter,
showNow = props.showNow,
showTime = props.showTime,
onSubmit = props.onSubmit,
onNow = props.onNow,
invalid = props.invalid,
needConfirm = props.needConfirm,
generateConfig = props.generateConfig,
disabledDate = props.disabledDate;
var _React$useContext = React.useContext(PickerContext),
prefixCls = _React$useContext.prefixCls,
locale = _React$useContext.locale,
_React$useContext$but = _React$useContext.button,
Button = _React$useContext$but === void 0 ? 'button' : _React$useContext$but;
// >>> Now
var now = generateConfig.getNow();
var _useTimeInfo = useTimeInfo(generateConfig, showTime, now),
_useTimeInfo2 = _slicedToArray(_useTimeInfo, 1),
getValidTime = _useTimeInfo2[0];
// ======================== Extra =========================
var extraNode = renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter(mode);
// ======================== Ranges ========================
var nowDisabled = disabledDate(now, {
type: mode
});
var onInternalNow = function onInternalNow() {
if (!nowDisabled) {
var validateNow = getValidTime(now);
onNow(validateNow);
}
};
var nowPrefixCls = "".concat(prefixCls, "-now");
var nowBtnPrefixCls = "".concat(nowPrefixCls, "-btn");
var presetNode = showNow && /*#__PURE__*/React.createElement("li", {
className: nowPrefixCls
}, /*#__PURE__*/React.createElement("a", {
className: classNames(nowBtnPrefixCls, nowDisabled && "".concat(nowBtnPrefixCls, "-disabled")),
"aria-disabled": nowDisabled,
onClick: onInternalNow
}, internalMode === 'date' ? locale.today : locale.now));
// >>> OK
var okNode = needConfirm && /*#__PURE__*/React.createElement("li", {
className: "".concat(prefixCls, "-ok")
}, /*#__PURE__*/React.createElement(Button, {
disabled: invalid,
onClick: onSubmit
}, locale.ok));
var rangeNode = (presetNode || okNode) && /*#__PURE__*/React.createElement("ul", {
className: "".concat(prefixCls, "-ranges")
}, presetNode, okNode);
// ======================== Render ========================
if (!extraNode && !rangeNode) {
return null;
}
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-footer")
}, extraNode && /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-footer-extra")
}, extraNode), rangeNode);
}

View File

@@ -0,0 +1,10 @@
import * as React from 'react';
import { type PickerPanelProps } from '../../PickerPanel';
import { type FooterProps } from './Footer';
export type MustProp<DateType extends object> = Required<Pick<PickerPanelProps<DateType>, 'mode' | 'onPanelChange'>>;
export type PopupPanelProps<DateType extends object = any> = MustProp<DateType> & Omit<PickerPanelProps<DateType>, 'onPickerValueChange' | 'showTime'> & FooterProps<DateType> & {
multiplePanel?: boolean;
range?: boolean;
onPickerValueChange: (date: DateType) => void;
};
export default function PopupPanel<DateType extends object = any>(props: PopupPanelProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,79 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import * as React from 'react';
import PickerPanel from "../../PickerPanel";
import { PickerHackContext } from "../../PickerPanel/context";
import PickerContext from "../context";
import { offsetPanelDate } from "../hooks/useRangePickerValue";
export default function PopupPanel(props) {
var picker = props.picker,
multiplePanel = props.multiplePanel,
pickerValue = props.pickerValue,
onPickerValueChange = props.onPickerValueChange,
needConfirm = props.needConfirm,
onSubmit = props.onSubmit,
range = props.range,
hoverValue = props.hoverValue;
var _React$useContext = React.useContext(PickerContext),
prefixCls = _React$useContext.prefixCls,
generateConfig = _React$useContext.generateConfig;
// ======================== Offset ========================
var internalOffsetDate = React.useCallback(function (date, offset) {
return offsetPanelDate(generateConfig, picker, date, offset);
}, [generateConfig, picker]);
var nextPickerValue = React.useMemo(function () {
return internalOffsetDate(pickerValue, 1);
}, [pickerValue, internalOffsetDate]);
// Outside
var onSecondPickerValueChange = function onSecondPickerValueChange(nextDate) {
onPickerValueChange(internalOffsetDate(nextDate, -1));
};
// ======================= Context ========================
var sharedContext = {
onCellDblClick: function onCellDblClick() {
if (needConfirm) {
onSubmit();
}
}
};
var hideHeader = picker === 'time';
// ======================== Props =========================
var pickerProps = _objectSpread(_objectSpread({}, props), {}, {
hoverValue: null,
hoverRangeValue: null,
hideHeader: hideHeader
});
if (range) {
pickerProps.hoverRangeValue = hoverValue;
} else {
pickerProps.hoverValue = hoverValue;
}
// ======================== Render ========================
// Multiple
if (multiplePanel) {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-panels")
}, /*#__PURE__*/React.createElement(PickerHackContext.Provider, {
value: _objectSpread(_objectSpread({}, sharedContext), {}, {
hideNext: true
})
}, /*#__PURE__*/React.createElement(PickerPanel, pickerProps)), /*#__PURE__*/React.createElement(PickerHackContext.Provider, {
value: _objectSpread(_objectSpread({}, sharedContext), {}, {
hidePrev: true
})
}, /*#__PURE__*/React.createElement(PickerPanel, _extends({}, pickerProps, {
pickerValue: nextPickerValue,
onPickerValueChange: onSecondPickerValueChange
}))));
}
// Single
return /*#__PURE__*/React.createElement(PickerHackContext.Provider, {
value: _objectSpread({}, sharedContext)
}, /*#__PURE__*/React.createElement(PickerPanel, pickerProps));
}

View File

@@ -0,0 +1,9 @@
import * as React from 'react';
import type { ValueDate } from '../../interface';
export interface PresetPanelProps<ValueType = any> {
prefixCls: string;
presets: ValueDate<ValueType>[];
onClick: (value: ValueType) => void;
onHover: (value: ValueType) => void;
}
export default function PresetPanel<DateType extends object = any>(props: PresetPanelProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,31 @@
import * as React from 'react';
function executeValue(value) {
return typeof value === 'function' ? value() : value;
}
export default function PresetPanel(props) {
var prefixCls = props.prefixCls,
presets = props.presets,
_onClick = props.onClick,
onHover = props.onHover;
if (!presets.length) {
return null;
}
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-presets")
}, /*#__PURE__*/React.createElement("ul", null, presets.map(function (_ref, index) {
var label = _ref.label,
value = _ref.value;
return /*#__PURE__*/React.createElement("li", {
key: index,
onClick: function onClick() {
_onClick(executeValue(value));
},
onMouseEnter: function onMouseEnter() {
onHover(executeValue(value));
},
onMouseLeave: function onMouseLeave() {
onHover(null);
}
}, label);
})));
}

20
node_modules/rc-picker/es/PickerInput/Popup/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,20 @@
import * as React from 'react';
import type { RangeTimeProps, SharedPickerProps, SharedTimeProps, ValueDate } from '../../interface';
import { type FooterProps } from './Footer';
import { type PopupPanelProps } from './PopupPanel';
export type PopupShowTimeConfig<DateType extends object = any> = Omit<RangeTimeProps<DateType>, 'defaultValue' | 'defaultOpenValue' | 'disabledTime'> & Pick<SharedTimeProps<DateType>, 'disabledTime'>;
export interface PopupProps<DateType extends object = any, PresetValue = DateType> extends Pick<React.InputHTMLAttributes<HTMLDivElement>, 'onFocus' | 'onBlur'>, FooterProps<DateType>, PopupPanelProps<DateType> {
panelRender?: SharedPickerProps['panelRender'];
presets: ValueDate<DateType>[];
onPresetHover: (presetValue: PresetValue) => void;
onPresetSubmit: (presetValue: PresetValue) => void;
activeInfo?: [activeInputLeft: number, activeInputRight: number, selectorWidth: number];
direction?: 'ltr' | 'rtl';
/** TimePicker or showTime only */
defaultOpenValue: DateType;
needConfirm: boolean;
isInvalid: (date: DateType | DateType[]) => boolean;
onOk: VoidFunction;
onPanelMouseDown?: React.MouseEventHandler<HTMLDivElement>;
}
export default function Popup<DateType extends object = any>(props: PopupProps<DateType>): React.JSX.Element;

190
node_modules/rc-picker/es/PickerInput/Popup/index.js generated vendored Normal file
View File

@@ -0,0 +1,190 @@
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import * as React from 'react';
import { toArray } from "../../utils/miscUtil";
import PickerContext from "../context";
import Footer from "./Footer";
import PopupPanel from "./PopupPanel";
import PresetPanel from "./PresetPanel";
export default function Popup(props) {
var panelRender = props.panelRender,
internalMode = props.internalMode,
picker = props.picker,
showNow = props.showNow,
range = props.range,
multiple = props.multiple,
_props$activeInfo = props.activeInfo,
activeInfo = _props$activeInfo === void 0 ? [0, 0, 0] : _props$activeInfo,
presets = props.presets,
onPresetHover = props.onPresetHover,
onPresetSubmit = props.onPresetSubmit,
onFocus = props.onFocus,
onBlur = props.onBlur,
onPanelMouseDown = props.onPanelMouseDown,
direction = props.direction,
value = props.value,
onSelect = props.onSelect,
isInvalid = props.isInvalid,
defaultOpenValue = props.defaultOpenValue,
onOk = props.onOk,
onSubmit = props.onSubmit;
var _React$useContext = React.useContext(PickerContext),
prefixCls = _React$useContext.prefixCls;
var panelPrefixCls = "".concat(prefixCls, "-panel");
var rtl = direction === 'rtl';
// ========================= Refs =========================
var arrowRef = React.useRef(null);
var wrapperRef = React.useRef(null);
// ======================== Offset ========================
var _React$useState = React.useState(0),
_React$useState2 = _slicedToArray(_React$useState, 2),
containerWidth = _React$useState2[0],
setContainerWidth = _React$useState2[1];
var _React$useState3 = React.useState(0),
_React$useState4 = _slicedToArray(_React$useState3, 2),
containerOffset = _React$useState4[0],
setContainerOffset = _React$useState4[1];
var _React$useState5 = React.useState(0),
_React$useState6 = _slicedToArray(_React$useState5, 2),
arrowOffset = _React$useState6[0],
setArrowOffset = _React$useState6[1];
var onResize = function onResize(info) {
if (info.width) {
setContainerWidth(info.width);
}
};
var _activeInfo = _slicedToArray(activeInfo, 3),
activeInputLeft = _activeInfo[0],
activeInputRight = _activeInfo[1],
selectorWidth = _activeInfo[2];
var _React$useState7 = React.useState(0),
_React$useState8 = _slicedToArray(_React$useState7, 2),
retryTimes = _React$useState8[0],
setRetryTimes = _React$useState8[1];
React.useEffect(function () {
setRetryTimes(10);
}, [activeInputLeft]);
React.useEffect(function () {
// `activeOffset` is always align with the active input element
// So we need only check container contains the `activeOffset`
if (range && wrapperRef.current) {
var _arrowRef$current;
// Offset in case container has border radius
var arrowWidth = ((_arrowRef$current = arrowRef.current) === null || _arrowRef$current === void 0 ? void 0 : _arrowRef$current.offsetWidth) || 0;
// Arrow Offset
var wrapperRect = wrapperRef.current.getBoundingClientRect();
if (!wrapperRect.height || wrapperRect.right < 0) {
setRetryTimes(function (times) {
return Math.max(0, times - 1);
});
return;
}
var nextArrowOffset = (rtl ? activeInputRight - arrowWidth : activeInputLeft) - wrapperRect.left;
setArrowOffset(nextArrowOffset);
// Container Offset
if (containerWidth && containerWidth < selectorWidth) {
var offset = rtl ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth) : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth;
var safeOffset = Math.max(0, offset);
setContainerOffset(safeOffset);
} else {
setContainerOffset(0);
}
}
}, [retryTimes, rtl, containerWidth, activeInputLeft, activeInputRight, selectorWidth, range]);
// ======================== Custom ========================
function filterEmpty(list) {
return list.filter(function (item) {
return item;
});
}
var valueList = React.useMemo(function () {
return filterEmpty(toArray(value));
}, [value]);
var isTimePickerEmptyValue = picker === 'time' && !valueList.length;
var footerSubmitValue = React.useMemo(function () {
if (isTimePickerEmptyValue) {
return filterEmpty([defaultOpenValue]);
}
return valueList;
}, [isTimePickerEmptyValue, valueList, defaultOpenValue]);
var popupPanelValue = isTimePickerEmptyValue ? defaultOpenValue : valueList;
var disableSubmit = React.useMemo(function () {
// Empty is invalid
if (!footerSubmitValue.length) {
return true;
}
return footerSubmitValue.some(function (val) {
return isInvalid(val);
});
}, [footerSubmitValue, isInvalid]);
var onFooterSubmit = function onFooterSubmit() {
// For TimePicker, we will additional trigger the value update
if (isTimePickerEmptyValue) {
onSelect(defaultOpenValue);
}
onOk();
onSubmit();
};
var mergedNodes = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-panel-layout")
}, /*#__PURE__*/React.createElement(PresetPanel, {
prefixCls: prefixCls,
presets: presets,
onClick: onPresetSubmit,
onHover: onPresetHover
}), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PopupPanel, _extends({}, props, {
value: popupPanelValue
})), /*#__PURE__*/React.createElement(Footer, _extends({}, props, {
showNow: multiple ? false : showNow,
invalid: disableSubmit,
onSubmit: onFooterSubmit
}))));
if (panelRender) {
mergedNodes = panelRender(mergedNodes);
}
// ======================== Render ========================
var containerPrefixCls = "".concat(panelPrefixCls, "-container");
var marginLeft = 'marginLeft';
var marginRight = 'marginRight';
// Container
var renderNode = /*#__PURE__*/React.createElement("div", {
onMouseDown: onPanelMouseDown,
tabIndex: -1,
className: classNames(containerPrefixCls, // Used for Today Button style, safe to remove if no need
"".concat(prefixCls, "-").concat(internalMode, "-panel-container")),
style: _defineProperty(_defineProperty({}, rtl ? marginRight : marginLeft, containerOffset), rtl ? marginLeft : marginRight, 'auto')
// Still wish not to lose focus on mouse down
// onMouseDown={(e) => {
// // e.preventDefault();
// }}
,
onFocus: onFocus,
onBlur: onBlur
}, mergedNodes);
if (range) {
renderNode = /*#__PURE__*/React.createElement("div", {
onMouseDown: onPanelMouseDown,
ref: wrapperRef,
className: classNames("".concat(prefixCls, "-range-wrapper"), "".concat(prefixCls, "-").concat(picker, "-range-wrapper"))
}, /*#__PURE__*/React.createElement("div", {
ref: arrowRef,
className: "".concat(prefixCls, "-range-arrow"),
style: {
left: arrowOffset
}
}), /*#__PURE__*/React.createElement(ResizeObserver, {
onResize: onResize
}, renderNode));
}
return renderNode;
}

54
node_modules/rc-picker/es/PickerInput/RangePicker.d.ts generated vendored Normal file
View File

@@ -0,0 +1,54 @@
import * as React from 'react';
import type { BaseInfo, PanelMode, RangePickerRef, RangeTimeProps, SharedPickerProps, ValueDate } from '../interface';
import { type SelectorIdType } from './Selector/RangeSelector';
export type RangeValueType<DateType> = [
start: DateType | null | undefined,
end: DateType | null | undefined
];
/** Used for change event, it should always be not undefined */
export type NoUndefinedRangeValueType<DateType> = [start: DateType | null, end: DateType | null];
export interface BaseRangePickerProps<DateType extends object> extends Omit<SharedPickerProps<DateType>, 'showTime' | 'id'> {
id?: SelectorIdType;
separator?: React.ReactNode;
value?: RangeValueType<DateType> | null;
defaultValue?: RangeValueType<DateType>;
onChange?: (dates: NoUndefinedRangeValueType<DateType> | null, dateStrings: [string, string]) => void;
onCalendarChange?: (dates: NoUndefinedRangeValueType<DateType>, dateStrings: [string, string], info: BaseInfo) => void;
onOk?: (values: NoUndefinedRangeValueType<DateType>) => void;
placeholder?: [string, string];
/**
* Config the popup panel date.
* Every time active the input to open popup will reset with `defaultPickerValue`.
*
* Note: `defaultPickerValue` priority is higher than `value` for the first open.
*/
defaultPickerValue?: [DateType, DateType] | DateType | null;
/**
* Config each start & end field popup panel date.
* When config `pickerValue`, you must also provide `onPickerValueChange` to handle changes.
*/
pickerValue?: [DateType, DateType] | DateType | null;
/**
* Each popup panel `pickerValue` includes `mode` change will trigger the callback.
* @param date The changed picker value
* @param info.source `panel` from the panel click. `reset` from popup open or field typing
* @param info.mode Next `mode` panel
*/
onPickerValueChange?: (date: [DateType, DateType], info: BaseInfo & {
source: 'reset' | 'panel';
mode: [PanelMode, PanelMode];
}) => void;
presets?: ValueDate<Exclude<RangeValueType<DateType>, null>>[];
/** @deprecated Please use `presets` instead */
ranges?: Record<string, Exclude<RangeValueType<DateType>, null> | (() => Exclude<RangeValueType<DateType>, null>)>;
disabled?: boolean | [boolean, boolean];
allowEmpty?: boolean | [boolean, boolean];
showTime?: boolean | RangeTimeProps<DateType>;
mode?: [startMode: PanelMode, endMode: PanelMode];
/** Trigger on each `mode` or `pickerValue` changed. */
onPanelChange?: (values: NoUndefinedRangeValueType<DateType>, modes: [startMode: PanelMode, endMode: PanelMode]) => void;
}
export interface RangePickerProps<DateType extends object> extends BaseRangePickerProps<DateType>, Omit<RangeTimeProps<DateType>, 'format' | 'defaultValue' | 'defaultOpenValue'> {
}
declare const RefRangePicker: <DateType extends object = any>(props: RangePickerProps<DateType> & React.RefAttributes<RangePickerRef>) => React.ReactElement;
export default RefRangePicker;

628
node_modules/rc-picker/es/PickerInput/RangePicker.js generated vendored Normal file
View File

@@ -0,0 +1,628 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useEvent, useMergedState } from 'rc-util';
import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
import omit from "rc-util/es/omit";
import pickAttrs from "rc-util/es/pickAttrs";
import warning from "rc-util/es/warning";
import * as React from 'react';
import PickerTrigger from "../PickerTrigger";
import { pickTriggerProps } from "../PickerTrigger/util";
import { fillIndex, getFromDate, toArray } from "../utils/miscUtil";
import PickerContext from "./context";
import useCellRender from "./hooks/useCellRender";
import useFieldsInvalidate from "./hooks/useFieldsInvalidate";
import useFilledProps from "./hooks/useFilledProps";
import useOpen from "./hooks/useOpen";
import usePickerRef from "./hooks/usePickerRef";
import usePresets from "./hooks/usePresets";
import useRangeActive from "./hooks/useRangeActive";
import useRangeDisabledDate from "./hooks/useRangeDisabledDate";
import useRangePickerValue from "./hooks/useRangePickerValue";
import useRangeValue, { useInnerValue } from "./hooks/useRangeValue";
import useShowNow from "./hooks/useShowNow";
import Popup from "./Popup";
import RangeSelector from "./Selector/RangeSelector";
function separateConfig(config, defaultConfig) {
var singleConfig = config !== null && config !== void 0 ? config : defaultConfig;
if (Array.isArray(singleConfig)) {
return singleConfig;
}
return [singleConfig, singleConfig];
}
/** Used for change event, it should always be not undefined */
function getActiveRange(activeIndex) {
return activeIndex === 1 ? 'end' : 'start';
}
function RangePicker(props, ref) {
// ========================= Prop =========================
var _useFilledProps = useFilledProps(props, function () {
var disabled = props.disabled,
allowEmpty = props.allowEmpty;
var mergedDisabled = separateConfig(disabled, false);
var mergedAllowEmpty = separateConfig(allowEmpty, false);
return {
disabled: mergedDisabled,
allowEmpty: mergedAllowEmpty
};
}),
_useFilledProps2 = _slicedToArray(_useFilledProps, 6),
filledProps = _useFilledProps2[0],
internalPicker = _useFilledProps2[1],
complexPicker = _useFilledProps2[2],
formatList = _useFilledProps2[3],
maskFormat = _useFilledProps2[4],
isInvalidateDate = _useFilledProps2[5];
var prefixCls = filledProps.prefixCls,
styles = filledProps.styles,
classNames = filledProps.classNames,
defaultValue = filledProps.defaultValue,
value = filledProps.value,
needConfirm = filledProps.needConfirm,
onKeyDown = filledProps.onKeyDown,
disabled = filledProps.disabled,
allowEmpty = filledProps.allowEmpty,
disabledDate = filledProps.disabledDate,
minDate = filledProps.minDate,
maxDate = filledProps.maxDate,
defaultOpen = filledProps.defaultOpen,
open = filledProps.open,
onOpenChange = filledProps.onOpenChange,
locale = filledProps.locale,
generateConfig = filledProps.generateConfig,
picker = filledProps.picker,
showNow = filledProps.showNow,
showToday = filledProps.showToday,
showTime = filledProps.showTime,
mode = filledProps.mode,
onPanelChange = filledProps.onPanelChange,
onCalendarChange = filledProps.onCalendarChange,
onOk = filledProps.onOk,
defaultPickerValue = filledProps.defaultPickerValue,
pickerValue = filledProps.pickerValue,
onPickerValueChange = filledProps.onPickerValueChange,
inputReadOnly = filledProps.inputReadOnly,
suffixIcon = filledProps.suffixIcon,
onFocus = filledProps.onFocus,
onBlur = filledProps.onBlur,
presets = filledProps.presets,
ranges = filledProps.ranges,
components = filledProps.components,
cellRender = filledProps.cellRender,
dateRender = filledProps.dateRender,
monthCellRender = filledProps.monthCellRender,
onClick = filledProps.onClick;
// ========================= Refs =========================
var selectorRef = usePickerRef(ref);
// ========================= Open =========================
var _useOpen = useOpen(open, defaultOpen, disabled, onOpenChange),
_useOpen2 = _slicedToArray(_useOpen, 2),
mergedOpen = _useOpen2[0],
setMergeOpen = _useOpen2[1];
var triggerOpen = function triggerOpen(nextOpen, config) {
// No need to open if all disabled
if (disabled.some(function (fieldDisabled) {
return !fieldDisabled;
}) || !nextOpen) {
setMergeOpen(nextOpen, config);
}
};
// ======================== Values ========================
var _useInnerValue = useInnerValue(generateConfig, locale, formatList, true, false, defaultValue, value, onCalendarChange, onOk),
_useInnerValue2 = _slicedToArray(_useInnerValue, 5),
mergedValue = _useInnerValue2[0],
setInnerValue = _useInnerValue2[1],
getCalendarValue = _useInnerValue2[2],
triggerCalendarChange = _useInnerValue2[3],
triggerOk = _useInnerValue2[4];
var calendarValue = getCalendarValue();
// ======================== Active ========================
var _useRangeActive = useRangeActive(disabled, allowEmpty, mergedOpen),
_useRangeActive2 = _slicedToArray(_useRangeActive, 9),
focused = _useRangeActive2[0],
triggerFocus = _useRangeActive2[1],
lastOperation = _useRangeActive2[2],
activeIndex = _useRangeActive2[3],
setActiveIndex = _useRangeActive2[4],
nextActiveIndex = _useRangeActive2[5],
activeIndexList = _useRangeActive2[6],
updateSubmitIndex = _useRangeActive2[7],
hasActiveSubmitValue = _useRangeActive2[8];
var onSharedFocus = function onSharedFocus(event, index) {
triggerFocus(true);
onFocus === null || onFocus === void 0 || onFocus(event, {
range: getActiveRange(index !== null && index !== void 0 ? index : activeIndex)
});
};
var onSharedBlur = function onSharedBlur(event, index) {
triggerFocus(false);
onBlur === null || onBlur === void 0 || onBlur(event, {
range: getActiveRange(index !== null && index !== void 0 ? index : activeIndex)
});
};
// ======================= ShowTime =======================
/** Used for Popup panel */
var mergedShowTime = React.useMemo(function () {
if (!showTime) {
return null;
}
var disabledTime = showTime.disabledTime;
var proxyDisabledTime = disabledTime ? function (date) {
var range = getActiveRange(activeIndex);
var fromDate = getFromDate(calendarValue, activeIndexList, activeIndex);
return disabledTime(date, range, {
from: fromDate
});
} : undefined;
return _objectSpread(_objectSpread({}, showTime), {}, {
disabledTime: proxyDisabledTime
});
}, [showTime, activeIndex, calendarValue, activeIndexList]);
// ========================= Mode =========================
var _useMergedState = useMergedState([picker, picker], {
value: mode
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
modes = _useMergedState2[0],
setModes = _useMergedState2[1];
var mergedMode = modes[activeIndex] || picker;
/** Extends from `mergedMode` to patch `datetime` mode */
var internalMode = mergedMode === 'date' && mergedShowTime ? 'datetime' : mergedMode;
// ====================== PanelCount ======================
var multiplePanel = internalMode === picker && internalMode !== 'time';
// ======================= Show Now =======================
var mergedShowNow = useShowNow(picker, mergedMode, showNow, showToday, true);
// ======================== Value =========================
var _useRangeValue = useRangeValue(filledProps, mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange, disabled, formatList, focused, mergedOpen, isInvalidateDate),
_useRangeValue2 = _slicedToArray(_useRangeValue, 2),
/** Trigger `onChange` by check `disabledDate` */
flushSubmit = _useRangeValue2[0],
/** Trigger `onChange` directly without check `disabledDate` */
triggerSubmitChange = _useRangeValue2[1];
// ===================== DisabledDate =====================
var mergedDisabledDate = useRangeDisabledDate(calendarValue, disabled, activeIndexList, generateConfig, locale, disabledDate);
// ======================= Validate =======================
var _useFieldsInvalidate = useFieldsInvalidate(calendarValue, isInvalidateDate, allowEmpty),
_useFieldsInvalidate2 = _slicedToArray(_useFieldsInvalidate, 2),
submitInvalidates = _useFieldsInvalidate2[0],
onSelectorInvalid = _useFieldsInvalidate2[1];
// ===================== Picker Value =====================
var _useRangePickerValue = useRangePickerValue(generateConfig, locale, calendarValue, modes, mergedOpen, activeIndex, internalPicker, multiplePanel, defaultPickerValue, pickerValue, mergedShowTime === null || mergedShowTime === void 0 ? void 0 : mergedShowTime.defaultOpenValue, onPickerValueChange, minDate, maxDate),
_useRangePickerValue2 = _slicedToArray(_useRangePickerValue, 2),
currentPickerValue = _useRangePickerValue2[0],
setCurrentPickerValue = _useRangePickerValue2[1];
// >>> Mode need wait for `pickerValue`
var triggerModeChange = useEvent(function (nextPickerValue, nextMode, triggerEvent) {
var clone = fillIndex(modes, activeIndex, nextMode);
if (clone[0] !== modes[0] || clone[1] !== modes[1]) {
setModes(clone);
}
// Compatible with `onPanelChange`
if (onPanelChange && triggerEvent !== false) {
var clonePickerValue = _toConsumableArray(calendarValue);
if (nextPickerValue) {
clonePickerValue[activeIndex] = nextPickerValue;
}
onPanelChange(clonePickerValue, clone);
}
});
// ======================== Change ========================
var fillCalendarValue = function fillCalendarValue(date, index) {
return (
// Trigger change only when date changed
fillIndex(calendarValue, index, date)
);
};
// ======================== Submit ========================
/**
* Trigger by confirm operation.
* This function has already handle the `needConfirm` check logic.
* - Selector: enter key
* - Panel: OK button
*/
var triggerPartConfirm = function triggerPartConfirm(date, skipFocus) {
var nextValue = calendarValue;
if (date) {
nextValue = fillCalendarValue(date, activeIndex);
}
updateSubmitIndex(activeIndex);
// Get next focus index
var nextIndex = nextActiveIndex(nextValue);
// Change calendar value and tell flush it
triggerCalendarChange(nextValue);
flushSubmit(activeIndex, nextIndex === null);
if (nextIndex === null) {
triggerOpen(false, {
force: true
});
} else if (!skipFocus) {
selectorRef.current.focus({
index: nextIndex
});
}
};
// ======================== Click =========================
var onSelectorClick = function onSelectorClick(event) {
var _activeElement;
var rootNode = event.target.getRootNode();
if (!selectorRef.current.nativeElement.contains((_activeElement = rootNode.activeElement) !== null && _activeElement !== void 0 ? _activeElement : document.activeElement)) {
// Click to focus the enabled input
var enabledIndex = disabled.findIndex(function (d) {
return !d;
});
if (enabledIndex >= 0) {
selectorRef.current.focus({
index: enabledIndex
});
}
}
triggerOpen(true);
onClick === null || onClick === void 0 || onClick(event);
};
var onSelectorClear = function onSelectorClear() {
triggerSubmitChange(null);
triggerOpen(false, {
force: true
});
};
// ======================== Hover =========================
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
hoverSource = _React$useState2[0],
setHoverSource = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
internalHoverValues = _React$useState4[0],
setInternalHoverValues = _React$useState4[1];
var hoverValues = React.useMemo(function () {
return internalHoverValues || calendarValue;
}, [calendarValue, internalHoverValues]);
// Clean up `internalHoverValues` when closed
React.useEffect(function () {
if (!mergedOpen) {
setInternalHoverValues(null);
}
}, [mergedOpen]);
// ========================================================
// == Panels ==
// ========================================================
// Save the offset with active bar position
// const [activeOffset, setActiveOffset] = React.useState(0);
var _React$useState5 = React.useState([0, 0, 0]),
_React$useState6 = _slicedToArray(_React$useState5, 2),
activeInfo = _React$useState6[0],
setActiveInfo = _React$useState6[1];
// ======================= Presets ========================
var presetList = usePresets(presets, ranges);
var onPresetHover = function onPresetHover(nextValues) {
setInternalHoverValues(nextValues);
setHoverSource('preset');
};
var onPresetSubmit = function onPresetSubmit(nextValues) {
var passed = triggerSubmitChange(nextValues);
if (passed) {
triggerOpen(false, {
force: true
});
}
};
var onNow = function onNow(now) {
triggerPartConfirm(now);
};
// ======================== Panel =========================
var onPanelHover = function onPanelHover(date) {
setInternalHoverValues(date ? fillCalendarValue(date, activeIndex) : null);
setHoverSource('cell');
};
// >>> Focus
var onPanelFocus = function onPanelFocus(event) {
triggerOpen(true);
onSharedFocus(event);
};
// >>> MouseDown
var onPanelMouseDown = function onPanelMouseDown() {
lastOperation('panel');
};
// >>> Calendar
var onPanelSelect = function onPanelSelect(date) {
var clone = fillIndex(calendarValue, activeIndex, date);
// Only trigger calendar event but not update internal `calendarValue` state
triggerCalendarChange(clone);
// >>> Trigger next active if !needConfirm
// Fully logic check `useRangeValue` hook
if (!needConfirm && !complexPicker && internalPicker === internalMode) {
triggerPartConfirm(date);
}
};
// >>> Close
var onPopupClose = function onPopupClose() {
// Close popup
triggerOpen(false);
};
// >>> cellRender
var onInternalCellRender = useCellRender(cellRender, dateRender, monthCellRender, getActiveRange(activeIndex));
// >>> Value
var panelValue = calendarValue[activeIndex] || null;
// >>> invalid
var isPopupInvalidateDate = useEvent(function (date) {
return isInvalidateDate(date, {
activeIndex: activeIndex
});
});
var panelProps = React.useMemo(function () {
var domProps = pickAttrs(filledProps, false);
var restProps = omit(filledProps, [].concat(_toConsumableArray(Object.keys(domProps)), ['onChange', 'onCalendarChange', 'style', 'className', 'onPanelChange', 'disabledTime']));
return restProps;
}, [filledProps]);
// >>> Render
var panel = /*#__PURE__*/React.createElement(Popup, _extends({}, panelProps, {
showNow: mergedShowNow,
showTime: mergedShowTime
// Range
,
range: true,
multiplePanel: multiplePanel,
activeInfo: activeInfo
// Disabled
,
disabledDate: mergedDisabledDate
// Focus
,
onFocus: onPanelFocus,
onBlur: onSharedBlur,
onPanelMouseDown: onPanelMouseDown
// Mode
,
picker: picker,
mode: mergedMode,
internalMode: internalMode,
onPanelChange: triggerModeChange
// Value
,
format: maskFormat,
value: panelValue,
isInvalid: isPopupInvalidateDate,
onChange: null,
onSelect: onPanelSelect
// PickerValue
,
pickerValue: currentPickerValue,
defaultOpenValue: toArray(showTime === null || showTime === void 0 ? void 0 : showTime.defaultOpenValue)[activeIndex],
onPickerValueChange: setCurrentPickerValue
// Hover
,
hoverValue: hoverValues,
onHover: onPanelHover
// Submit
,
needConfirm: needConfirm,
onSubmit: triggerPartConfirm,
onOk: triggerOk
// Preset
,
presets: presetList,
onPresetHover: onPresetHover,
onPresetSubmit: onPresetSubmit
// Now
,
onNow: onNow
// Render
,
cellRender: onInternalCellRender
}));
// ========================================================
// == Selector ==
// ========================================================
// ======================== Change ========================
var onSelectorChange = function onSelectorChange(date, index) {
var clone = fillCalendarValue(date, index);
triggerCalendarChange(clone);
};
var onSelectorInputChange = function onSelectorInputChange() {
lastOperation('input');
};
// ======================= Selector =======================
var onSelectorFocus = function onSelectorFocus(event, index) {
// Check if `needConfirm` but user not submit yet
var activeListLen = activeIndexList.length;
var lastActiveIndex = activeIndexList[activeListLen - 1];
if (activeListLen && lastActiveIndex !== index && needConfirm &&
// Not change index if is not filled
!allowEmpty[lastActiveIndex] && !hasActiveSubmitValue(lastActiveIndex) && calendarValue[lastActiveIndex]) {
selectorRef.current.focus({
index: lastActiveIndex
});
return;
}
lastOperation('input');
triggerOpen(true, {
inherit: true
});
// When click input to switch the field, it will not trigger close.
// Which means it will lose the part confirm and we need fill back.
// ref: https://github.com/ant-design/ant-design/issues/49512
if (activeIndex !== index && mergedOpen && !needConfirm && complexPicker) {
triggerPartConfirm(null, true);
}
setActiveIndex(index);
onSharedFocus(event, index);
};
var onSelectorBlur = function onSelectorBlur(event, index) {
triggerOpen(false);
if (!needConfirm && lastOperation() === 'input') {
var nextIndex = nextActiveIndex(calendarValue);
flushSubmit(activeIndex, nextIndex === null);
}
onSharedBlur(event, index);
};
var onSelectorKeyDown = function onSelectorKeyDown(event, preventDefault) {
if (event.key === 'Tab') {
triggerPartConfirm(null, true);
}
onKeyDown === null || onKeyDown === void 0 || onKeyDown(event, preventDefault);
};
// ======================= Context ========================
var context = React.useMemo(function () {
return {
prefixCls: prefixCls,
locale: locale,
generateConfig: generateConfig,
button: components.button,
input: components.input
};
}, [prefixCls, locale, generateConfig, components.button, components.input]);
// ======================== Effect ========================
// >>> Mode
// Reset for every active
useLayoutEffect(function () {
if (mergedOpen && activeIndex !== undefined) {
// Legacy compatible. This effect update should not trigger `onPanelChange`
triggerModeChange(null, picker, false);
}
}, [mergedOpen, activeIndex, picker]);
// >>> For complex picker, we need check if need to focus next one
useLayoutEffect(function () {
var lastOp = lastOperation();
// Trade as confirm on field leave
if (!mergedOpen && lastOp === 'input') {
triggerOpen(false);
triggerPartConfirm(null, true);
}
// Submit with complex picker
if (!mergedOpen && complexPicker && !needConfirm && lastOp === 'panel') {
triggerOpen(true);
triggerPartConfirm();
}
}, [mergedOpen]);
// ====================== DevWarning ======================
if (process.env.NODE_ENV !== 'production') {
var isIndexEmpty = function isIndexEmpty(index) {
return (
// Value is empty
!(value !== null && value !== void 0 && value[index]) &&
// DefaultValue is empty
!(defaultValue !== null && defaultValue !== void 0 && defaultValue[index])
);
};
if (disabled.some(function (fieldDisabled, index) {
return fieldDisabled && isIndexEmpty(index) && !allowEmpty[index];
})) {
warning(false, '`disabled` should not set with empty `value`. You should set `allowEmpty` or `value` instead.');
}
}
// ======================== Render ========================
return /*#__PURE__*/React.createElement(PickerContext.Provider, {
value: context
}, /*#__PURE__*/React.createElement(PickerTrigger, _extends({}, pickTriggerProps(filledProps), {
popupElement: panel,
popupStyle: styles.popup,
popupClassName: classNames.popup
// Visible
,
visible: mergedOpen,
onClose: onPopupClose
// Range
,
range: true
}), /*#__PURE__*/React.createElement(RangeSelector
// Shared
, _extends({}, filledProps, {
// Ref
ref: selectorRef
// Icon
,
suffixIcon: suffixIcon
// Active
,
activeIndex: focused || mergedOpen ? activeIndex : null,
activeHelp: !!internalHoverValues,
allHelp: !!internalHoverValues && hoverSource === 'preset',
focused: focused,
onFocus: onSelectorFocus,
onBlur: onSelectorBlur,
onKeyDown: onSelectorKeyDown,
onSubmit: triggerPartConfirm
// Change
,
value: hoverValues,
maskFormat: maskFormat,
onChange: onSelectorChange,
onInputChange: onSelectorInputChange
// Format
,
format: formatList,
inputReadOnly: inputReadOnly
// Disabled
,
disabled: disabled
// Open
,
open: mergedOpen,
onOpenChange: triggerOpen
// Click
,
onClick: onSelectorClick,
onClear: onSelectorClear
// Invalid
,
invalid: submitInvalidates,
onInvalid: onSelectorInvalid
// Offset
,
onActiveInfo: setActiveInfo
}))));
}
var RefRangePicker = /*#__PURE__*/React.forwardRef(RangePicker);
if (process.env.NODE_ENV !== 'production') {
RefRangePicker.displayName = 'RefRangePicker';
}
export default RefRangePicker;

View File

@@ -0,0 +1,10 @@
import * as React from 'react';
export interface IconProps extends React.HtmlHTMLAttributes<HTMLElement> {
icon?: React.ReactNode;
type: 'suffix' | 'clear';
}
export default function Icon(props: IconProps): React.JSX.Element;
export interface ClearIconProps extends Omit<IconProps, 'type'> {
onClear: VoidFunction;
}
export declare function ClearIcon({ onClear, ...restProps }: ClearIconProps): React.JSX.Element;

31
node_modules/rc-picker/es/PickerInput/Selector/Icon.js generated vendored Normal file
View File

@@ -0,0 +1,31 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["icon", "type"],
_excluded2 = ["onClear"];
import * as React from 'react';
import PickerContext from "../context";
export default function Icon(props) {
var icon = props.icon,
type = props.type,
restProps = _objectWithoutProperties(props, _excluded);
var _React$useContext = React.useContext(PickerContext),
prefixCls = _React$useContext.prefixCls;
return icon ? /*#__PURE__*/React.createElement("span", _extends({
className: "".concat(prefixCls, "-").concat(type)
}, restProps), icon) : null;
}
export function ClearIcon(_ref) {
var onClear = _ref.onClear,
restProps = _objectWithoutProperties(_ref, _excluded2);
return /*#__PURE__*/React.createElement(Icon, _extends({}, restProps, {
type: "clear",
role: "button",
onMouseDown: function onMouseDown(e) {
e.preventDefault();
},
onClick: function onClick(e) {
e.stopPropagation();
onClear();
}
}));
}

View File

@@ -0,0 +1,28 @@
import * as React from 'react';
import type { PickerRef } from '../../interface';
export interface InputRef extends PickerRef {
inputElement: HTMLInputElement;
}
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
format?: string;
validateFormat: (value: string) => boolean;
active?: boolean;
/** Used for single picker only */
showActiveCls?: boolean;
suffixIcon?: React.ReactNode;
value?: string;
onChange: (value: string) => void;
onSubmit: VoidFunction;
/** Meaning current is from the hover cell getting the placeholder text */
helped?: boolean;
/**
* Trigger when input need additional help.
* Like open the popup for interactive.
*/
onHelp: () => void;
preserveInvalidOnBlur?: boolean;
invalid?: boolean;
clearIcon?: React.ReactNode;
}
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
export default Input;

368
node_modules/rc-picker/es/PickerInput/Selector/Input.js generated vendored Normal file
View File

@@ -0,0 +1,368 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["active", "showActiveCls", "suffixIcon", "format", "validateFormat", "onChange", "onInput", "helped", "onHelp", "onSubmit", "onKeyDown", "preserveInvalidOnBlur", "invalid", "clearIcon"];
import classNames from 'classnames';
import { useEvent } from 'rc-util';
import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
import raf from "rc-util/es/raf";
import * as React from 'react';
import { leftPad } from "../../utils/miscUtil";
import PickerContext from "../context";
import useLockEffect from "../hooks/useLockEffect";
import Icon from "./Icon";
import MaskFormat from "./MaskFormat";
import { getMaskRange } from "./util";
// Format logic
//
// First time on focus:
// 1. check if the text is valid, if not fill with format
// 2. set highlight cell to the first cell
// Cells
// 1. Selection the index cell, set inner `cacheValue` to ''
// 2. Key input filter non-number char, patch after the `cacheValue`
// 1. Replace the `cacheValue` with input align the cell length
// 2. Re-selection the mask cell
// 3. If `cacheValue` match the limit length or cell format (like 1 ~ 12 month), go to next cell
var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
var active = props.active,
_props$showActiveCls = props.showActiveCls,
showActiveCls = _props$showActiveCls === void 0 ? true : _props$showActiveCls,
suffixIcon = props.suffixIcon,
format = props.format,
validateFormat = props.validateFormat,
onChange = props.onChange,
onInput = props.onInput,
helped = props.helped,
onHelp = props.onHelp,
onSubmit = props.onSubmit,
onKeyDown = props.onKeyDown,
_props$preserveInvali = props.preserveInvalidOnBlur,
preserveInvalidOnBlur = _props$preserveInvali === void 0 ? false : _props$preserveInvali,
invalid = props.invalid,
clearIcon = props.clearIcon,
restProps = _objectWithoutProperties(props, _excluded);
var value = props.value,
onFocus = props.onFocus,
onBlur = props.onBlur,
onMouseUp = props.onMouseUp;
var _React$useContext = React.useContext(PickerContext),
prefixCls = _React$useContext.prefixCls,
_React$useContext$inp = _React$useContext.input,
Component = _React$useContext$inp === void 0 ? 'input' : _React$useContext$inp;
var inputPrefixCls = "".concat(prefixCls, "-input");
// ======================== Value =========================
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focused = _React$useState2[0],
setFocused = _React$useState2[1];
var _React$useState3 = React.useState(value),
_React$useState4 = _slicedToArray(_React$useState3, 2),
internalInputValue = _React$useState4[0],
setInputValue = _React$useState4[1];
var _React$useState5 = React.useState(''),
_React$useState6 = _slicedToArray(_React$useState5, 2),
focusCellText = _React$useState6[0],
setFocusCellText = _React$useState6[1];
var _React$useState7 = React.useState(null),
_React$useState8 = _slicedToArray(_React$useState7, 2),
focusCellIndex = _React$useState8[0],
setFocusCellIndex = _React$useState8[1];
var _React$useState9 = React.useState(null),
_React$useState10 = _slicedToArray(_React$useState9, 2),
forceSelectionSyncMark = _React$useState10[0],
forceSelectionSync = _React$useState10[1];
var inputValue = internalInputValue || '';
// Sync value if needed
React.useEffect(function () {
setInputValue(value);
}, [value]);
// ========================= Refs =========================
var holderRef = React.useRef();
var inputRef = React.useRef();
React.useImperativeHandle(ref, function () {
return {
nativeElement: holderRef.current,
inputElement: inputRef.current,
focus: function focus(options) {
inputRef.current.focus(options);
},
blur: function blur() {
inputRef.current.blur();
}
};
});
// ======================== Format ========================
var maskFormat = React.useMemo(function () {
return new MaskFormat(format || '');
}, [format]);
var _React$useMemo = React.useMemo(function () {
if (helped) {
return [0, 0];
}
return maskFormat.getSelection(focusCellIndex);
}, [maskFormat, focusCellIndex, helped]),
_React$useMemo2 = _slicedToArray(_React$useMemo, 2),
selectionStart = _React$useMemo2[0],
selectionEnd = _React$useMemo2[1];
// ======================== Modify ========================
// When input modify content, trigger `onHelp` if is not the format
var onModify = function onModify(text) {
if (text && text !== format && text !== value) {
onHelp();
}
};
// ======================== Change ========================
/**
* Triggered by paste, keyDown and focus to show format
*/
var triggerInputChange = useEvent(function (text) {
if (validateFormat(text)) {
onChange(text);
}
setInputValue(text);
onModify(text);
});
// Directly trigger `onChange` if `format` is empty
var onInternalChange = function onInternalChange(event) {
// Hack `onChange` with format to do nothing
if (!format) {
var text = event.target.value;
onModify(text);
setInputValue(text);
onChange(text);
}
};
var onFormatPaste = function onFormatPaste(event) {
// Get paste text
var pasteText = event.clipboardData.getData('text');
if (validateFormat(pasteText)) {
triggerInputChange(pasteText);
}
};
// ======================== Mouse =========================
// When `mouseDown` get focus, it's better to not to change the selection
// Since the up position maybe not is the first cell
var mouseDownRef = React.useRef(false);
var onFormatMouseDown = function onFormatMouseDown() {
mouseDownRef.current = true;
};
var onFormatMouseUp = function onFormatMouseUp(event) {
var _ref = event.target,
start = _ref.selectionStart;
var closeMaskIndex = maskFormat.getMaskCellIndex(start);
setFocusCellIndex(closeMaskIndex);
// Force update the selection
forceSelectionSync({});
onMouseUp === null || onMouseUp === void 0 || onMouseUp(event);
mouseDownRef.current = false;
};
// ====================== Focus Blur ======================
var onFormatFocus = function onFormatFocus(event) {
setFocused(true);
setFocusCellIndex(0);
setFocusCellText('');
onFocus(event);
};
var onSharedBlur = function onSharedBlur(event) {
onBlur(event);
};
var onFormatBlur = function onFormatBlur(event) {
setFocused(false);
onSharedBlur(event);
};
// ======================== Active ========================
// Check if blur need reset input value
useLockEffect(active, function () {
if (!active && !preserveInvalidOnBlur) {
setInputValue(value);
}
});
// ======================= Keyboard =======================
var onSharedKeyDown = function onSharedKeyDown(event) {
if (event.key === 'Enter' && validateFormat(inputValue)) {
onSubmit();
}
onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
};
var onFormatKeyDown = function onFormatKeyDown(event) {
onSharedKeyDown(event);
var key = event.key;
// Save the cache with cell text
var nextCellText = null;
// Fill in the input
var nextFillText = null;
var maskCellLen = selectionEnd - selectionStart;
var cellFormat = format.slice(selectionStart, selectionEnd);
// Cell Index
var offsetCellIndex = function offsetCellIndex(offset) {
setFocusCellIndex(function (idx) {
var nextIndex = idx + offset;
nextIndex = Math.max(nextIndex, 0);
nextIndex = Math.min(nextIndex, maskFormat.size() - 1);
return nextIndex;
});
};
// Range
var offsetCellValue = function offsetCellValue(offset) {
var _getMaskRange = getMaskRange(cellFormat),
_getMaskRange2 = _slicedToArray(_getMaskRange, 3),
rangeStart = _getMaskRange2[0],
rangeEnd = _getMaskRange2[1],
rangeDefault = _getMaskRange2[2];
var currentText = inputValue.slice(selectionStart, selectionEnd);
var currentTextNum = Number(currentText);
if (isNaN(currentTextNum)) {
return String(rangeDefault ? rangeDefault : offset > 0 ? rangeStart : rangeEnd);
}
var num = currentTextNum + offset;
var range = rangeEnd - rangeStart + 1;
return String(rangeStart + (range + num - rangeStart) % range);
};
switch (key) {
// =============== Remove ===============
case 'Backspace':
case 'Delete':
nextCellText = '';
nextFillText = cellFormat;
break;
// =============== Arrows ===============
// Left key
case 'ArrowLeft':
nextCellText = '';
offsetCellIndex(-1);
break;
// Right key
case 'ArrowRight':
nextCellText = '';
offsetCellIndex(1);
break;
// Up key
case 'ArrowUp':
nextCellText = '';
nextFillText = offsetCellValue(1);
break;
// Down key
case 'ArrowDown':
nextCellText = '';
nextFillText = offsetCellValue(-1);
break;
// =============== Number ===============
default:
if (!isNaN(Number(key))) {
nextCellText = focusCellText + key;
nextFillText = nextCellText;
}
break;
}
// Update cell text
if (nextCellText !== null) {
setFocusCellText(nextCellText);
if (nextCellText.length >= maskCellLen) {
// Go to next cell
offsetCellIndex(1);
setFocusCellText('');
}
}
// Update the input text
if (nextFillText !== null) {
// Replace selection range with `nextCellText`
var nextFocusValue =
// before
inputValue.slice(0, selectionStart) +
// replace
leftPad(nextFillText, maskCellLen) +
// after
inputValue.slice(selectionEnd);
triggerInputChange(nextFocusValue.slice(0, format.length));
}
// Always trigger selection sync after key down
forceSelectionSync({});
};
// ======================== Format ========================
var rafRef = React.useRef();
useLayoutEffect(function () {
if (!focused || !format || mouseDownRef.current) {
return;
}
// Reset with format if not match
if (!maskFormat.match(inputValue)) {
triggerInputChange(format);
return;
}
// Match the selection range
inputRef.current.setSelectionRange(selectionStart, selectionEnd);
// Chrome has the bug anchor position looks not correct but actually correct
rafRef.current = raf(function () {
inputRef.current.setSelectionRange(selectionStart, selectionEnd);
});
return function () {
raf.cancel(rafRef.current);
};
}, [maskFormat, format, focused, inputValue, focusCellIndex, selectionStart, selectionEnd, forceSelectionSyncMark, triggerInputChange]);
// ======================== Render ========================
// Input props for format
var inputProps = format ? {
onFocus: onFormatFocus,
onBlur: onFormatBlur,
onKeyDown: onFormatKeyDown,
onMouseDown: onFormatMouseDown,
onMouseUp: onFormatMouseUp,
onPaste: onFormatPaste
} : {};
return /*#__PURE__*/React.createElement("div", {
ref: holderRef,
className: classNames(inputPrefixCls, _defineProperty(_defineProperty({}, "".concat(inputPrefixCls, "-active"), active && showActiveCls), "".concat(inputPrefixCls, "-placeholder"), helped))
}, /*#__PURE__*/React.createElement(Component, _extends({
ref: inputRef,
"aria-invalid": invalid,
autoComplete: "off"
}, restProps, {
onKeyDown: onSharedKeyDown,
onBlur: onSharedBlur
// Replace with format
}, inputProps, {
// Value
value: inputValue,
onChange: onInternalChange
})), /*#__PURE__*/React.createElement(Icon, {
type: "suffix",
icon: suffixIcon
}), clearIcon);
});
if (process.env.NODE_ENV !== 'production') {
Input.displayName = 'Input';
}
export default Input;

View File

@@ -0,0 +1,22 @@
declare const FORMAT_KEYS: string[];
export type FormatKey = (typeof FORMAT_KEYS)[number];
export interface Cell {
text: string;
mask: boolean;
start: number;
end: number;
}
export default class MaskFormat {
format: string;
maskFormat: string;
cells: Cell[];
maskCells: Cell[];
constructor(format: string);
getSelection(maskCellIndex: number): [start: number, end: number];
/** Check given text match format */
match(text: string): boolean;
/** Get mask cell count */
size(): number;
getMaskCellIndex(anchorIndex: number): number;
}
export {};

View File

@@ -0,0 +1,103 @@
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var FORMAT_KEYS = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss', 'SSS'];
// Use Chinese character to avoid conflict with the mask format
var REPLACE_KEY = '顧';
var MaskFormat = /*#__PURE__*/function () {
function MaskFormat(format) {
_classCallCheck(this, MaskFormat);
_defineProperty(this, "format", void 0);
_defineProperty(this, "maskFormat", void 0);
_defineProperty(this, "cells", void 0);
_defineProperty(this, "maskCells", void 0);
this.format = format;
// Generate mask format
var replaceKeys = FORMAT_KEYS.map(function (key) {
return "(".concat(key, ")");
}).join('|');
var replaceReg = new RegExp(replaceKeys, 'g');
this.maskFormat = format.replace(replaceReg,
// Use Chinese character to avoid user use it in format
function (key) {
return REPLACE_KEY.repeat(key.length);
});
// Generate cells
var cellReg = new RegExp("(".concat(FORMAT_KEYS.join('|'), ")"));
var strCells = (format.split(cellReg) || []).filter(function (str) {
return str;
});
var offset = 0;
this.cells = strCells.map(function (text) {
var mask = FORMAT_KEYS.includes(text);
var start = offset;
var end = offset + text.length;
offset = end;
return {
text: text,
mask: mask,
start: start,
end: end
};
});
// Mask cells
this.maskCells = this.cells.filter(function (cell) {
return cell.mask;
});
}
_createClass(MaskFormat, [{
key: "getSelection",
value: function getSelection(maskCellIndex) {
var _ref = this.maskCells[maskCellIndex] || {},
start = _ref.start,
end = _ref.end;
return [start || 0, end || 0];
}
/** Check given text match format */
}, {
key: "match",
value: function match(text) {
for (var i = 0; i < this.maskFormat.length; i += 1) {
var maskChar = this.maskFormat[i];
var textChar = text[i];
if (!textChar || maskChar !== REPLACE_KEY && maskChar !== textChar) {
return false;
}
}
return true;
}
/** Get mask cell count */
}, {
key: "size",
value: function size() {
return this.maskCells.length;
}
}, {
key: "getMaskCellIndex",
value: function getMaskCellIndex(anchorIndex) {
var closetDist = Number.MAX_SAFE_INTEGER;
var closetIndex = 0;
for (var i = 0; i < this.maskCells.length; i += 1) {
var _this$maskCells$i = this.maskCells[i],
start = _this$maskCells$i.start,
end = _this$maskCells$i.end;
if (anchorIndex >= start && anchorIndex <= end) {
return i;
}
var dist = Math.min(Math.abs(anchorIndex - start), Math.abs(anchorIndex - end));
if (dist < closetDist) {
closetDist = dist;
closetIndex = i;
}
}
return closetIndex;
}
}]);
return MaskFormat;
}();
export { MaskFormat as default };

View File

@@ -0,0 +1,26 @@
import * as React from 'react';
import type { RangePickerRef, SelectorProps } from '../../interface';
export type SelectorIdType = string | {
start?: string;
end?: string;
};
export interface RangeSelectorProps<DateType = any> extends SelectorProps<DateType> {
id?: SelectorIdType;
activeIndex: number | null;
separator?: React.ReactNode;
value?: [DateType?, DateType?];
onChange: (date: DateType, index?: number) => void;
disabled: [boolean, boolean];
/** All the field show as `placeholder` */
allHelp: boolean;
placeholder?: string | [string, string];
invalid: [boolean, boolean];
placement?: string;
/**
* Trigger when the active bar offset position changed.
* This is used for popup panel offset.
*/
onActiveInfo: (info: [activeInputLeft: number, activeInputRight: number, selectorWidth: number]) => void;
}
declare const RefRangeSelector: React.ForwardRefExoticComponent<RangeSelectorProps<object> & React.RefAttributes<RangePickerRef>>;
export default RefRangeSelector;

View File

@@ -0,0 +1,209 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["id", "prefix", "clearIcon", "suffixIcon", "separator", "activeIndex", "activeHelp", "allHelp", "focused", "onFocus", "onBlur", "onKeyDown", "locale", "generateConfig", "placeholder", "className", "style", "onClick", "onClear", "value", "onChange", "onSubmit", "onInputChange", "format", "maskFormat", "preserveInvalidOnBlur", "onInvalid", "disabled", "invalid", "inputReadOnly", "direction", "onOpenChange", "onActiveInfo", "placement", "onMouseDown", "required", "aria-required", "autoFocus", "tabIndex"],
_excluded2 = ["index"];
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import { useEvent } from 'rc-util';
import * as React from 'react';
import PickerContext from "../context";
import useInputProps from "./hooks/useInputProps";
import useRootProps from "./hooks/useRootProps";
import Icon, { ClearIcon } from "./Icon";
import Input from "./Input";
function RangeSelector(props, ref) {
var id = props.id,
prefix = props.prefix,
clearIcon = props.clearIcon,
suffixIcon = props.suffixIcon,
_props$separator = props.separator,
separator = _props$separator === void 0 ? '~' : _props$separator,
activeIndex = props.activeIndex,
activeHelp = props.activeHelp,
allHelp = props.allHelp,
focused = props.focused,
onFocus = props.onFocus,
onBlur = props.onBlur,
onKeyDown = props.onKeyDown,
locale = props.locale,
generateConfig = props.generateConfig,
placeholder = props.placeholder,
className = props.className,
style = props.style,
onClick = props.onClick,
onClear = props.onClear,
value = props.value,
onChange = props.onChange,
onSubmit = props.onSubmit,
onInputChange = props.onInputChange,
format = props.format,
maskFormat = props.maskFormat,
preserveInvalidOnBlur = props.preserveInvalidOnBlur,
onInvalid = props.onInvalid,
disabled = props.disabled,
invalid = props.invalid,
inputReadOnly = props.inputReadOnly,
direction = props.direction,
onOpenChange = props.onOpenChange,
onActiveInfo = props.onActiveInfo,
placement = props.placement,
_onMouseDown = props.onMouseDown,
required = props.required,
ariaRequired = props['aria-required'],
autoFocus = props.autoFocus,
tabIndex = props.tabIndex,
restProps = _objectWithoutProperties(props, _excluded);
var rtl = direction === 'rtl';
// ======================== Prefix ========================
var _React$useContext = React.useContext(PickerContext),
prefixCls = _React$useContext.prefixCls;
// ========================== Id ==========================
var ids = React.useMemo(function () {
if (typeof id === 'string') {
return [id];
}
var mergedId = id || {};
return [mergedId.start, mergedId.end];
}, [id]);
// ========================= Refs =========================
var rootRef = React.useRef();
var inputStartRef = React.useRef();
var inputEndRef = React.useRef();
var getInput = function getInput(index) {
var _index;
return (_index = [inputStartRef, inputEndRef][index]) === null || _index === void 0 ? void 0 : _index.current;
};
React.useImperativeHandle(ref, function () {
return {
nativeElement: rootRef.current,
focus: function focus(options) {
if (_typeof(options) === 'object') {
var _getInput;
var _ref = options || {},
_ref$index = _ref.index,
_index2 = _ref$index === void 0 ? 0 : _ref$index,
rest = _objectWithoutProperties(_ref, _excluded2);
(_getInput = getInput(_index2)) === null || _getInput === void 0 || _getInput.focus(rest);
} else {
var _getInput2;
(_getInput2 = getInput(options !== null && options !== void 0 ? options : 0)) === null || _getInput2 === void 0 || _getInput2.focus();
}
},
blur: function blur() {
var _getInput3, _getInput4;
(_getInput3 = getInput(0)) === null || _getInput3 === void 0 || _getInput3.blur();
(_getInput4 = getInput(1)) === null || _getInput4 === void 0 || _getInput4.blur();
}
};
});
// ======================== Props =========================
var rootProps = useRootProps(restProps);
// ===================== Placeholder ======================
var mergedPlaceholder = React.useMemo(function () {
return Array.isArray(placeholder) ? placeholder : [placeholder, placeholder];
}, [placeholder]);
// ======================== Inputs ========================
var _useInputProps = useInputProps(_objectSpread(_objectSpread({}, props), {}, {
id: ids,
placeholder: mergedPlaceholder
})),
_useInputProps2 = _slicedToArray(_useInputProps, 1),
getInputProps = _useInputProps2[0];
// ====================== ActiveBar =======================
var _React$useState = React.useState({
position: 'absolute',
width: 0
}),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeBarStyle = _React$useState2[0],
setActiveBarStyle = _React$useState2[1];
var syncActiveOffset = useEvent(function () {
var input = getInput(activeIndex);
if (input) {
var inputRect = input.nativeElement.getBoundingClientRect();
var parentRect = rootRef.current.getBoundingClientRect();
var rectOffset = inputRect.left - parentRect.left;
setActiveBarStyle(function (ori) {
return _objectSpread(_objectSpread({}, ori), {}, {
width: inputRect.width,
left: rectOffset
});
});
onActiveInfo([inputRect.left, inputRect.right, parentRect.width]);
}
});
React.useEffect(function () {
syncActiveOffset();
}, [activeIndex]);
// ======================== Clear =========================
var showClear = clearIcon && (value[0] && !disabled[0] || value[1] && !disabled[1]);
// ======================= Disabled =======================
var startAutoFocus = autoFocus && !disabled[0];
var endAutoFocus = autoFocus && !startAutoFocus && !disabled[1];
// ======================== Render ========================
return /*#__PURE__*/React.createElement(ResizeObserver, {
onResize: syncActiveOffset
}, /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
className: classNames(prefixCls, "".concat(prefixCls, "-range"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-focused"), focused), "".concat(prefixCls, "-disabled"), disabled.every(function (i) {
return i;
})), "".concat(prefixCls, "-invalid"), invalid.some(function (i) {
return i;
})), "".concat(prefixCls, "-rtl"), rtl), className),
style: style,
ref: rootRef,
onClick: onClick
// Not lose current input focus
,
onMouseDown: function onMouseDown(e) {
var target = e.target;
if (target !== inputStartRef.current.inputElement && target !== inputEndRef.current.inputElement) {
e.preventDefault();
}
_onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
}
}), prefix && /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-prefix")
}, prefix), /*#__PURE__*/React.createElement(Input, _extends({
ref: inputStartRef
}, getInputProps(0), {
autoFocus: startAutoFocus,
tabIndex: tabIndex,
"date-range": "start"
})), /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-range-separator")
}, separator), /*#__PURE__*/React.createElement(Input, _extends({
ref: inputEndRef
}, getInputProps(1), {
autoFocus: endAutoFocus,
tabIndex: tabIndex,
"date-range": "end"
})), /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-active-bar"),
style: activeBarStyle
}), /*#__PURE__*/React.createElement(Icon, {
type: "suffix",
icon: suffixIcon
}), showClear && /*#__PURE__*/React.createElement(ClearIcon, {
icon: clearIcon,
onClear: onClear
})));
}
var RefRangeSelector = /*#__PURE__*/React.forwardRef(RangeSelector);
if (process.env.NODE_ENV !== 'production') {
RefRangeSelector.displayName = 'RangeSelector';
}
export default RefRangeSelector;

View File

@@ -0,0 +1,12 @@
import * as React from 'react';
import type { PickerProps } from '../../SinglePicker';
export interface MultipleDatesProps<DateType extends object = any> extends Pick<PickerProps, 'maxTagCount'> {
prefixCls: string;
value: DateType[];
onRemove: (value: DateType) => void;
removeIcon?: React.ReactNode;
formatDate: (date: DateType) => string;
disabled?: boolean;
placeholder?: React.ReactNode;
}
export default function MultipleDates<DateType extends object = any>(props: MultipleDatesProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,66 @@
import classNames from 'classnames';
import Overflow from 'rc-overflow';
import * as React from 'react';
export default function MultipleDates(props) {
var prefixCls = props.prefixCls,
value = props.value,
onRemove = props.onRemove,
_props$removeIcon = props.removeIcon,
removeIcon = _props$removeIcon === void 0 ? '×' : _props$removeIcon,
formatDate = props.formatDate,
disabled = props.disabled,
maxTagCount = props.maxTagCount,
placeholder = props.placeholder;
var selectorCls = "".concat(prefixCls, "-selector");
var selectionCls = "".concat(prefixCls, "-selection");
var overflowCls = "".concat(selectionCls, "-overflow");
// ========================= Item =========================
function renderSelector(content, onClose) {
return /*#__PURE__*/React.createElement("span", {
className: classNames("".concat(selectionCls, "-item")),
title: typeof content === 'string' ? content : null
}, /*#__PURE__*/React.createElement("span", {
className: "".concat(selectionCls, "-item-content")
}, content), !disabled && onClose && /*#__PURE__*/React.createElement("span", {
onMouseDown: function onMouseDown(e) {
e.preventDefault();
},
onClick: onClose,
className: "".concat(selectionCls, "-item-remove")
}, removeIcon));
}
function renderItem(date) {
var displayLabel = formatDate(date);
var onClose = function onClose(event) {
if (event) event.stopPropagation();
onRemove(date);
};
return renderSelector(displayLabel, onClose);
}
// ========================= Rest =========================
function renderRest(omittedValues) {
var content = "+ ".concat(omittedValues.length, " ...");
return renderSelector(content);
}
// ======================== Render ========================
return /*#__PURE__*/React.createElement("div", {
className: selectorCls
}, /*#__PURE__*/React.createElement(Overflow, {
prefixCls: overflowCls,
data: value,
renderItem: renderItem,
renderRest: renderRest
// suffix={inputNode}
,
itemKey: function itemKey(date) {
return formatDate(date);
},
maxCount: maxTagCount
}), !value.length && /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-selection-placeholder")
}, placeholder));
}

View File

@@ -0,0 +1,18 @@
import * as React from 'react';
import type { InternalMode, PickerRef, SelectorProps } from '../../../interface';
import type { PickerProps } from '../../SinglePicker';
export interface SingleSelectorProps<DateType extends object = any> extends SelectorProps<DateType>, Pick<PickerProps, 'multiple' | 'maxTagCount'> {
id?: string;
value?: DateType[];
onChange: (date: DateType[]) => void;
internalPicker: InternalMode;
disabled: boolean;
/** All the field show as `placeholder` */
allHelp: boolean;
placeholder?: string;
invalid: boolean;
onInvalid: (valid: boolean) => void;
removeIcon?: React.ReactNode;
}
declare const RefSingleSelector: React.ForwardRefExoticComponent<SingleSelectorProps<object> & React.RefAttributes<PickerRef>>;
export default RefSingleSelector;

View File

@@ -0,0 +1,177 @@
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["id", "open", "prefix", "clearIcon", "suffixIcon", "activeHelp", "allHelp", "focused", "onFocus", "onBlur", "onKeyDown", "locale", "generateConfig", "placeholder", "className", "style", "onClick", "onClear", "internalPicker", "value", "onChange", "onSubmit", "onInputChange", "multiple", "maxTagCount", "format", "maskFormat", "preserveInvalidOnBlur", "onInvalid", "disabled", "invalid", "inputReadOnly", "direction", "onOpenChange", "onMouseDown", "required", "aria-required", "autoFocus", "tabIndex", "removeIcon"];
import classNames from 'classnames';
import * as React from 'react';
import { isSame } from "../../../utils/dateUtil";
import PickerContext from "../../context";
import Icon, { ClearIcon } from "../Icon";
import Input from "../Input";
import useInputProps from "../hooks/useInputProps";
import useRootProps from "../hooks/useRootProps";
import MultipleDates from "./MultipleDates";
function SingleSelector(props, ref) {
var id = props.id,
open = props.open,
prefix = props.prefix,
clearIcon = props.clearIcon,
suffixIcon = props.suffixIcon,
activeHelp = props.activeHelp,
allHelp = props.allHelp,
focused = props.focused,
onFocus = props.onFocus,
onBlur = props.onBlur,
onKeyDown = props.onKeyDown,
locale = props.locale,
generateConfig = props.generateConfig,
placeholder = props.placeholder,
className = props.className,
style = props.style,
onClick = props.onClick,
onClear = props.onClear,
internalPicker = props.internalPicker,
value = props.value,
onChange = props.onChange,
onSubmit = props.onSubmit,
onInputChange = props.onInputChange,
multiple = props.multiple,
maxTagCount = props.maxTagCount,
format = props.format,
maskFormat = props.maskFormat,
preserveInvalidOnBlur = props.preserveInvalidOnBlur,
onInvalid = props.onInvalid,
disabled = props.disabled,
invalid = props.invalid,
inputReadOnly = props.inputReadOnly,
direction = props.direction,
onOpenChange = props.onOpenChange,
_onMouseDown = props.onMouseDown,
required = props.required,
ariaRequired = props['aria-required'],
autoFocus = props.autoFocus,
tabIndex = props.tabIndex,
removeIcon = props.removeIcon,
restProps = _objectWithoutProperties(props, _excluded);
var rtl = direction === 'rtl';
// ======================== Prefix ========================
var _React$useContext = React.useContext(PickerContext),
prefixCls = _React$useContext.prefixCls;
// ========================= Refs =========================
var rootRef = React.useRef();
var inputRef = React.useRef();
React.useImperativeHandle(ref, function () {
return {
nativeElement: rootRef.current,
focus: function focus(options) {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus(options);
},
blur: function blur() {
var _inputRef$current2;
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
}
};
});
// ======================== Props =========================
var rootProps = useRootProps(restProps);
// ======================== Change ========================
var onSingleChange = function onSingleChange(date) {
onChange([date]);
};
var onMultipleRemove = function onMultipleRemove(date) {
var nextValues = value.filter(function (oriDate) {
return oriDate && !isSame(generateConfig, locale, oriDate, date, internalPicker);
});
onChange(nextValues);
// When `open`, it means user is operating the
if (!open) {
onSubmit();
}
};
// ======================== Inputs ========================
var _useInputProps = useInputProps(_objectSpread(_objectSpread({}, props), {}, {
onChange: onSingleChange
}), function (_ref) {
var valueTexts = _ref.valueTexts;
return {
value: valueTexts[0] || '',
active: focused
};
}),
_useInputProps2 = _slicedToArray(_useInputProps, 2),
getInputProps = _useInputProps2[0],
getText = _useInputProps2[1];
// ======================== Clear =========================
var showClear = !!(clearIcon && value.length && !disabled);
// ======================= Multiple =======================
var selectorNode = multiple ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultipleDates, {
prefixCls: prefixCls,
value: value,
onRemove: onMultipleRemove,
formatDate: getText,
maxTagCount: maxTagCount,
disabled: disabled,
removeIcon: removeIcon,
placeholder: placeholder
}), /*#__PURE__*/React.createElement("input", {
className: "".concat(prefixCls, "-multiple-input"),
value: value.map(getText).join(','),
ref: inputRef,
readOnly: true,
autoFocus: autoFocus,
tabIndex: tabIndex
}), /*#__PURE__*/React.createElement(Icon, {
type: "suffix",
icon: suffixIcon
}), showClear && /*#__PURE__*/React.createElement(ClearIcon, {
icon: clearIcon,
onClear: onClear
})) : /*#__PURE__*/React.createElement(Input, _extends({
ref: inputRef
}, getInputProps(), {
autoFocus: autoFocus,
tabIndex: tabIndex,
suffixIcon: suffixIcon,
clearIcon: showClear && /*#__PURE__*/React.createElement(ClearIcon, {
icon: clearIcon,
onClear: onClear
}),
showActiveCls: false
}));
// ======================== Render ========================
return /*#__PURE__*/React.createElement("div", _extends({}, rootProps, {
className: classNames(prefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-multiple"), multiple), "".concat(prefixCls, "-focused"), focused), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-invalid"), invalid), "".concat(prefixCls, "-rtl"), rtl), className),
style: style,
ref: rootRef,
onClick: onClick
// Not lose current input focus
,
onMouseDown: function onMouseDown(e) {
var _inputRef$current3;
var target = e.target;
if (target !== ((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.inputElement)) {
e.preventDefault();
}
_onMouseDown === null || _onMouseDown === void 0 || _onMouseDown(e);
}
}), prefix && /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-prefix")
}, prefix), selectorNode);
}
var RefSingleSelector = /*#__PURE__*/React.forwardRef(SingleSelector);
if (process.env.NODE_ENV !== 'production') {
RefSingleSelector.displayName = 'SingleSelector';
}
export default RefSingleSelector;

View File

@@ -0,0 +1,8 @@
import type { ReactNode } from 'react';
import * as React from 'react';
/**
* Used for `useFilledProps` since it already in the React.useMemo
*/
export declare function fillClearIcon(prefixCls: string, allowClear?: boolean | {
clearIcon?: ReactNode;
}, clearIcon?: ReactNode): string | number | true | Iterable<ReactNode> | React.JSX.Element;

View File

@@ -0,0 +1,19 @@
import _typeof from "@babel/runtime/helpers/esm/typeof";
import warning from "rc-util/es/warning";
import * as React from 'react';
/**
* Used for `useFilledProps` since it already in the React.useMemo
*/
export function fillClearIcon(prefixCls, allowClear, clearIcon) {
if (process.env.NODE_ENV !== 'production' && clearIcon) {
warning(false, '`clearIcon` will be removed in future. Please use `allowClear` instead.');
}
if (allowClear === false) {
return null;
}
var config = allowClear && _typeof(allowClear) === 'object' ? allowClear : {};
return config.clearIcon || clearIcon || /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-clear-btn")
});
}

View File

@@ -0,0 +1,16 @@
import type { SelectorProps } from '../../../interface';
import type { InputProps } from '../Input';
export default function useInputProps<DateType extends object = any>(props: Pick<SelectorProps, 'maskFormat' | 'format' | 'generateConfig' | 'locale' | 'preserveInvalidOnBlur' | 'inputReadOnly' | 'required' | 'aria-required' | 'onSubmit' | 'onFocus' | 'onBlur' | 'onInputChange' | 'onInvalid' | 'onOpenChange' | 'onKeyDown' | 'activeHelp' | 'name' | 'autoComplete' | 'open' | 'picker'> & {
id?: string | string[];
value?: DateType[];
invalid?: boolean | [boolean, boolean];
placeholder?: string | [string, string];
disabled?: boolean | [boolean, boolean];
onChange: (value: DateType | null, index?: number) => void;
allHelp: boolean;
activeIndex?: number | null;
},
/** Used for SinglePicker */
postProps?: (info: {
valueTexts: string[];
}) => Partial<InputProps>): readonly [(index?: number) => InputProps, (date: DateType) => string];

View File

@@ -0,0 +1,173 @@
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { warning } from 'rc-util';
import pickAttrs from "rc-util/es/pickAttrs";
import * as React from 'react';
import { formatValue } from "../../../utils/dateUtil";
export default function useInputProps(props, /** Used for SinglePicker */
postProps) {
var format = props.format,
maskFormat = props.maskFormat,
generateConfig = props.generateConfig,
locale = props.locale,
preserveInvalidOnBlur = props.preserveInvalidOnBlur,
inputReadOnly = props.inputReadOnly,
required = props.required,
ariaRequired = props['aria-required'],
onSubmit = props.onSubmit,
_onFocus = props.onFocus,
_onBlur = props.onBlur,
onInputChange = props.onInputChange,
onInvalid = props.onInvalid,
open = props.open,
onOpenChange = props.onOpenChange,
_onKeyDown = props.onKeyDown,
_onChange = props.onChange,
activeHelp = props.activeHelp,
name = props.name,
autoComplete = props.autoComplete,
id = props.id,
value = props.value,
invalid = props.invalid,
placeholder = props.placeholder,
disabled = props.disabled,
activeIndex = props.activeIndex,
allHelp = props.allHelp,
picker = props.picker;
// ======================== Parser ========================
var parseDate = function parseDate(str, formatStr) {
var parsed = generateConfig.locale.parse(locale.locale, str, [formatStr]);
return parsed && generateConfig.isValidate(parsed) ? parsed : null;
};
// ========================= Text =========================
var firstFormat = format[0];
var getText = React.useCallback(function (date) {
return formatValue(date, {
locale: locale,
format: firstFormat,
generateConfig: generateConfig
});
}, [locale, generateConfig, firstFormat]);
var valueTexts = React.useMemo(function () {
return value.map(getText);
}, [value, getText]);
// ========================= Size =========================
var size = React.useMemo(function () {
var defaultSize = picker === 'time' ? 8 : 10;
var length = typeof firstFormat === 'function' ? firstFormat(generateConfig.getNow()).length : firstFormat.length;
return Math.max(defaultSize, length) + 2;
}, [firstFormat, picker, generateConfig]);
// ======================= Validate =======================
var _validateFormat = function validateFormat(text) {
for (var i = 0; i < format.length; i += 1) {
var singleFormat = format[i];
// Only support string type
if (typeof singleFormat === 'string') {
var parsed = parseDate(text, singleFormat);
if (parsed) {
return parsed;
}
}
}
return false;
};
// ======================== Input =========================
var getInputProps = function getInputProps(index) {
function getProp(propValue) {
return index !== undefined ? propValue[index] : propValue;
}
var pickedAttrs = pickAttrs(props, {
aria: true,
data: true
});
var inputProps = _objectSpread(_objectSpread({}, pickedAttrs), {}, {
// ============== Shared ==============
format: maskFormat,
validateFormat: function validateFormat(text) {
return !!_validateFormat(text);
},
preserveInvalidOnBlur: preserveInvalidOnBlur,
readOnly: inputReadOnly,
required: required,
'aria-required': ariaRequired,
name: name,
autoComplete: autoComplete,
size: size,
// ============= By Index =============
id: getProp(id),
value: getProp(valueTexts) || '',
invalid: getProp(invalid),
placeholder: getProp(placeholder),
active: activeIndex === index,
helped: allHelp || activeHelp && activeIndex === index,
disabled: getProp(disabled),
onFocus: function onFocus(event) {
_onFocus(event, index);
},
onBlur: function onBlur(event) {
// Blur do not trigger close
// Since it may focus to the popup panel
_onBlur(event, index);
},
onSubmit: onSubmit,
// Get validate text value
onChange: function onChange(text) {
onInputChange();
var parsed = _validateFormat(text);
if (parsed) {
onInvalid(false, index);
_onChange(parsed, index);
return;
}
// Tell outer that the value typed is invalid.
// If text is empty, it means valid.
onInvalid(!!text, index);
},
onHelp: function onHelp() {
onOpenChange(true, {
index: index
});
},
onKeyDown: function onKeyDown(event) {
var prevented = false;
_onKeyDown === null || _onKeyDown === void 0 || _onKeyDown(event, function () {
if (process.env.NODE_ENV !== 'production') {
warning(false, '`preventDefault` callback is deprecated. Please call `event.preventDefault` directly.');
}
prevented = true;
});
if (!event.defaultPrevented && !prevented) {
switch (event.key) {
case 'Escape':
onOpenChange(false, {
index: index
});
break;
case 'Enter':
if (!open) {
onOpenChange(true);
}
break;
}
}
}
}, postProps === null || postProps === void 0 ? void 0 : postProps({
valueTexts: valueTexts
}));
// ============== Clean Up ==============
Object.keys(inputProps).forEach(function (key) {
if (inputProps[key] === undefined) {
delete inputProps[key];
}
});
return inputProps;
};
return [getInputProps, getText];
}

View File

@@ -0,0 +1,2 @@
import * as React from 'react';
export default function useRootProps(props: React.HTMLAttributes<any>): React.HTMLAttributes<any>;

View File

@@ -0,0 +1,8 @@
import * as React from 'react';
import { pickProps } from "../../../utils/miscUtil";
var propNames = ['onMouseEnter', 'onMouseLeave'];
export default function useRootProps(props) {
return React.useMemo(function () {
return pickProps(props, propNames);
}, [props]);
}

View File

@@ -0,0 +1 @@
export declare function getMaskRange(key: string): [startVal: number, endVal: number, defaultVal?: number];

12
node_modules/rc-picker/es/PickerInput/Selector/util.js generated vendored Normal file
View File

@@ -0,0 +1,12 @@
export function getMaskRange(key) {
var PresetRange = {
YYYY: [0, 9999, new Date().getFullYear()],
MM: [1, 12],
DD: [1, 31],
HH: [0, 23],
mm: [0, 59],
ss: [0, 59],
SSS: [0, 999]
};
return PresetRange[key];
}

View File

@@ -0,0 +1,51 @@
import * as React from 'react';
import type { BaseInfo, PanelMode, PickerRef, SharedPickerProps, SharedTimeProps, ValueDate } from '../interface';
export interface BasePickerProps<DateType extends object = any> extends SharedPickerProps<DateType> {
id?: string;
/** Not support `time` or `datetime` picker */
multiple?: boolean;
removeIcon?: React.ReactNode;
/** Only work when `multiple` is in used */
maxTagCount?: number | 'responsive';
value?: DateType | DateType[] | null;
defaultValue?: DateType | DateType[];
onChange?: (date: DateType | DateType[], dateString: string | string[]) => void;
onCalendarChange?: (date: DateType | DateType[], dateString: string | string[], info: BaseInfo) => void;
/** */
onOk?: (value?: DateType | DateType[]) => void;
placeholder?: string;
/**
* Config the popup panel date.
* Every time active the input to open popup will reset with `defaultPickerValue`.
*
* Note: `defaultPickerValue` priority is higher than `value` for the first open.
*/
defaultPickerValue?: DateType | null;
/**
* Config each start & end field popup panel date.
* When config `pickerValue`, you must also provide `onPickerValueChange` to handle changes.
*/
pickerValue?: DateType | null;
/**
* Each popup panel `pickerValue` change will trigger the callback.
* @param date The changed picker value
* @param info.source `panel` from the panel click. `reset` from popup open or field typing.
*/
onPickerValueChange?: (date: DateType, info: {
source: 'reset' | 'panel';
mode: PanelMode;
}) => void;
presets?: ValueDate<DateType>[];
disabled?: boolean;
mode?: PanelMode;
onPanelChange?: (values: DateType, modes: PanelMode) => void;
}
export interface PickerProps<DateType extends object = any> extends BasePickerProps<DateType>, Omit<SharedTimeProps<DateType>, 'format' | 'defaultValue'> {
}
/** Internal usage. For cross function get same aligned props */
export type ReplacedPickerProps<DateType extends object = any> = {
onChange?: (date: DateType | DateType[], dateString: string | string[]) => void;
onCalendarChange?: (date: DateType | DateType[], dateString: string | string[], info: BaseInfo) => void;
};
declare const RefPicker: <DateType extends object = any>(props: PickerProps<DateType> & React.RefAttributes<PickerRef>) => React.ReactElement;
export default RefPicker;

531
node_modules/rc-picker/es/PickerInput/SinglePicker.js generated vendored Normal file
View File

@@ -0,0 +1,531 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useEvent, useMergedState } from 'rc-util';
import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
import omit from "rc-util/es/omit";
import pickAttrs from "rc-util/es/pickAttrs";
import * as React from 'react';
import useToggleDates from "../hooks/useToggleDates";
import PickerTrigger from "../PickerTrigger";
import { pickTriggerProps } from "../PickerTrigger/util";
import { toArray } from "../utils/miscUtil";
import PickerContext from "./context";
import useCellRender from "./hooks/useCellRender";
import useFieldsInvalidate from "./hooks/useFieldsInvalidate";
import useFilledProps from "./hooks/useFilledProps";
import useOpen from "./hooks/useOpen";
import usePickerRef from "./hooks/usePickerRef";
import usePresets from "./hooks/usePresets";
import useRangeActive from "./hooks/useRangeActive";
import useRangePickerValue from "./hooks/useRangePickerValue";
import useRangeValue, { useInnerValue } from "./hooks/useRangeValue";
import useShowNow from "./hooks/useShowNow";
import Popup from "./Popup";
import SingleSelector from "./Selector/SingleSelector";
// TODO: isInvalidateDate with showTime.disabledTime should not provide `range` prop
/** Internal usage. For cross function get same aligned props */
function Picker(props, ref) {
// ========================= Prop =========================
var _useFilledProps = useFilledProps(props),
_useFilledProps2 = _slicedToArray(_useFilledProps, 6),
filledProps = _useFilledProps2[0],
internalPicker = _useFilledProps2[1],
complexPicker = _useFilledProps2[2],
formatList = _useFilledProps2[3],
maskFormat = _useFilledProps2[4],
isInvalidateDate = _useFilledProps2[5];
var _ref = filledProps,
prefixCls = _ref.prefixCls,
styles = _ref.styles,
classNames = _ref.classNames,
order = _ref.order,
defaultValue = _ref.defaultValue,
value = _ref.value,
needConfirm = _ref.needConfirm,
onChange = _ref.onChange,
onKeyDown = _ref.onKeyDown,
disabled = _ref.disabled,
disabledDate = _ref.disabledDate,
minDate = _ref.minDate,
maxDate = _ref.maxDate,
defaultOpen = _ref.defaultOpen,
open = _ref.open,
onOpenChange = _ref.onOpenChange,
locale = _ref.locale,
generateConfig = _ref.generateConfig,
picker = _ref.picker,
showNow = _ref.showNow,
showToday = _ref.showToday,
showTime = _ref.showTime,
mode = _ref.mode,
onPanelChange = _ref.onPanelChange,
onCalendarChange = _ref.onCalendarChange,
onOk = _ref.onOk,
multiple = _ref.multiple,
defaultPickerValue = _ref.defaultPickerValue,
pickerValue = _ref.pickerValue,
onPickerValueChange = _ref.onPickerValueChange,
inputReadOnly = _ref.inputReadOnly,
suffixIcon = _ref.suffixIcon,
removeIcon = _ref.removeIcon,
onFocus = _ref.onFocus,
onBlur = _ref.onBlur,
presets = _ref.presets,
components = _ref.components,
cellRender = _ref.cellRender,
dateRender = _ref.dateRender,
monthCellRender = _ref.monthCellRender,
onClick = _ref.onClick;
// ========================= Refs =========================
var selectorRef = usePickerRef(ref);
// ========================= Util =========================
function pickerParam(values) {
if (values === null) {
return null;
}
return multiple ? values : values[0];
}
var toggleDates = useToggleDates(generateConfig, locale, internalPicker);
// ========================= Open =========================
var _useOpen = useOpen(open, defaultOpen, [disabled], onOpenChange),
_useOpen2 = _slicedToArray(_useOpen, 2),
mergedOpen = _useOpen2[0],
triggerOpen = _useOpen2[1];
// ======================= Calendar =======================
var onInternalCalendarChange = function onInternalCalendarChange(dates, dateStrings, info) {
if (onCalendarChange) {
var filteredInfo = _objectSpread({}, info);
delete filteredInfo.range;
onCalendarChange(pickerParam(dates), pickerParam(dateStrings), filteredInfo);
}
};
var onInternalOk = function onInternalOk(dates) {
onOk === null || onOk === void 0 || onOk(pickerParam(dates));
};
// ======================== Values ========================
var _useInnerValue = useInnerValue(generateConfig, locale, formatList, false, order, defaultValue, value, onInternalCalendarChange, onInternalOk),
_useInnerValue2 = _slicedToArray(_useInnerValue, 5),
mergedValue = _useInnerValue2[0],
setInnerValue = _useInnerValue2[1],
getCalendarValue = _useInnerValue2[2],
triggerCalendarChange = _useInnerValue2[3],
triggerOk = _useInnerValue2[4];
var calendarValue = getCalendarValue();
// ======================== Active ========================
// In SinglePicker, we will always get `activeIndex` is 0.
var _useRangeActive = useRangeActive([disabled]),
_useRangeActive2 = _slicedToArray(_useRangeActive, 4),
focused = _useRangeActive2[0],
triggerFocus = _useRangeActive2[1],
lastOperation = _useRangeActive2[2],
activeIndex = _useRangeActive2[3];
var onSharedFocus = function onSharedFocus(event) {
triggerFocus(true);
onFocus === null || onFocus === void 0 || onFocus(event, {});
};
var onSharedBlur = function onSharedBlur(event) {
triggerFocus(false);
onBlur === null || onBlur === void 0 || onBlur(event, {});
};
// ========================= Mode =========================
var _useMergedState = useMergedState(picker, {
value: mode
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
mergedMode = _useMergedState2[0],
setMode = _useMergedState2[1];
/** Extends from `mergedMode` to patch `datetime` mode */
var internalMode = mergedMode === 'date' && showTime ? 'datetime' : mergedMode;
// ======================= Show Now =======================
var mergedShowNow = useShowNow(picker, mergedMode, showNow, showToday);
// ======================== Value =========================
var onInternalChange = onChange && function (dates, dateStrings) {
onChange(pickerParam(dates), pickerParam(dateStrings));
};
var _useRangeValue = useRangeValue(_objectSpread(_objectSpread({}, filledProps), {}, {
onChange: onInternalChange
}), mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange, [],
//disabled,
formatList, focused, mergedOpen, isInvalidateDate),
_useRangeValue2 = _slicedToArray(_useRangeValue, 2),
/** Trigger `onChange` directly without check `disabledDate` */
triggerSubmitChange = _useRangeValue2[1];
// ======================= Validate =======================
var _useFieldsInvalidate = useFieldsInvalidate(calendarValue, isInvalidateDate),
_useFieldsInvalidate2 = _slicedToArray(_useFieldsInvalidate, 2),
submitInvalidates = _useFieldsInvalidate2[0],
onSelectorInvalid = _useFieldsInvalidate2[1];
var submitInvalidate = React.useMemo(function () {
return submitInvalidates.some(function (invalidated) {
return invalidated;
});
}, [submitInvalidates]);
// ===================== Picker Value =====================
// Proxy to single pickerValue
var onInternalPickerValueChange = function onInternalPickerValueChange(dates, info) {
if (onPickerValueChange) {
var cleanInfo = _objectSpread(_objectSpread({}, info), {}, {
mode: info.mode[0]
});
delete cleanInfo.range;
onPickerValueChange(dates[0], cleanInfo);
}
};
var _useRangePickerValue = useRangePickerValue(generateConfig, locale, calendarValue, [mergedMode], mergedOpen, activeIndex, internalPicker, false,
// multiplePanel,
defaultPickerValue, pickerValue, toArray(showTime === null || showTime === void 0 ? void 0 : showTime.defaultOpenValue), onInternalPickerValueChange, minDate, maxDate),
_useRangePickerValue2 = _slicedToArray(_useRangePickerValue, 2),
currentPickerValue = _useRangePickerValue2[0],
setCurrentPickerValue = _useRangePickerValue2[1];
// >>> Mode need wait for `pickerValue`
var triggerModeChange = useEvent(function (nextPickerValue, nextMode, triggerEvent) {
setMode(nextMode);
// Compatible with `onPanelChange`
if (onPanelChange && triggerEvent !== false) {
var lastPickerValue = nextPickerValue || calendarValue[calendarValue.length - 1];
onPanelChange(lastPickerValue, nextMode);
}
});
// ======================== Submit ========================
/**
* Different with RangePicker, confirm should check `multiple` logic.
* This will never provide `date` instead.
*/
var triggerConfirm = function triggerConfirm() {
triggerSubmitChange(getCalendarValue());
triggerOpen(false, {
force: true
});
};
// ======================== Click =========================
var onSelectorClick = function onSelectorClick(event) {
if (!disabled && !selectorRef.current.nativeElement.contains(document.activeElement)) {
// Click to focus the enabled input
selectorRef.current.focus();
}
triggerOpen(true);
onClick === null || onClick === void 0 || onClick(event);
};
var onSelectorClear = function onSelectorClear() {
triggerSubmitChange(null);
triggerOpen(false, {
force: true
});
};
// ======================== Hover =========================
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
hoverSource = _React$useState2[0],
setHoverSource = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
internalHoverValue = _React$useState4[0],
setInternalHoverValue = _React$useState4[1];
var hoverValues = React.useMemo(function () {
var values = [internalHoverValue].concat(_toConsumableArray(calendarValue)).filter(function (date) {
return date;
});
return multiple ? values : values.slice(0, 1);
}, [calendarValue, internalHoverValue, multiple]);
// Selector values is different with RangePicker
// which can not use `hoverValue` directly
var selectorValues = React.useMemo(function () {
if (!multiple && internalHoverValue) {
return [internalHoverValue];
}
return calendarValue.filter(function (date) {
return date;
});
}, [calendarValue, internalHoverValue, multiple]);
// Clean up `internalHoverValues` when closed
React.useEffect(function () {
if (!mergedOpen) {
setInternalHoverValue(null);
}
}, [mergedOpen]);
// ========================================================
// == Panels ==
// ========================================================
// ======================= Presets ========================
var presetList = usePresets(presets);
var onPresetHover = function onPresetHover(nextValue) {
setInternalHoverValue(nextValue);
setHoverSource('preset');
};
// TODO: handle this
var onPresetSubmit = function onPresetSubmit(nextValue) {
var nextCalendarValues = multiple ? toggleDates(getCalendarValue(), nextValue) : [nextValue];
var passed = triggerSubmitChange(nextCalendarValues);
if (passed && !multiple) {
triggerOpen(false, {
force: true
});
}
};
var onNow = function onNow(now) {
onPresetSubmit(now);
};
// ======================== Panel =========================
var onPanelHover = function onPanelHover(date) {
setInternalHoverValue(date);
setHoverSource('cell');
};
// >>> Focus
var onPanelFocus = function onPanelFocus(event) {
triggerOpen(true);
onSharedFocus(event);
};
// >>> Calendar
var onPanelSelect = function onPanelSelect(date) {
lastOperation('panel');
// Not change values if multiple and current panel is to match with picker
if (multiple && internalMode !== picker) {
return;
}
var nextValues = multiple ? toggleDates(getCalendarValue(), date) : [date];
// Only trigger calendar event but not update internal `calendarValue` state
triggerCalendarChange(nextValues);
// >>> Trigger next active if !needConfirm
// Fully logic check `useRangeValue` hook
if (!needConfirm && !complexPicker && internalPicker === internalMode) {
triggerConfirm();
}
};
// >>> Close
var onPopupClose = function onPopupClose() {
// Close popup
triggerOpen(false);
};
// >>> cellRender
var onInternalCellRender = useCellRender(cellRender, dateRender, monthCellRender);
// >>> invalid
var panelProps = React.useMemo(function () {
var domProps = pickAttrs(filledProps, false);
var restProps = omit(filledProps, [].concat(_toConsumableArray(Object.keys(domProps)), ['onChange', 'onCalendarChange', 'style', 'className', 'onPanelChange']));
return _objectSpread(_objectSpread({}, restProps), {}, {
multiple: filledProps.multiple
});
}, [filledProps]);
// >>> Render
var panel = /*#__PURE__*/React.createElement(Popup, _extends({}, panelProps, {
showNow: mergedShowNow,
showTime: showTime
// Disabled
,
disabledDate: disabledDate
// Focus
,
onFocus: onPanelFocus,
onBlur: onSharedBlur
// Mode
,
picker: picker,
mode: mergedMode,
internalMode: internalMode,
onPanelChange: triggerModeChange
// Value
,
format: maskFormat,
value: calendarValue,
isInvalid: isInvalidateDate,
onChange: null,
onSelect: onPanelSelect
// PickerValue
,
pickerValue: currentPickerValue,
defaultOpenValue: showTime === null || showTime === void 0 ? void 0 : showTime.defaultOpenValue,
onPickerValueChange: setCurrentPickerValue
// Hover
,
hoverValue: hoverValues,
onHover: onPanelHover
// Submit
,
needConfirm: needConfirm,
onSubmit: triggerConfirm,
onOk: triggerOk
// Preset
,
presets: presetList,
onPresetHover: onPresetHover,
onPresetSubmit: onPresetSubmit,
onNow: onNow
// Render
,
cellRender: onInternalCellRender
}));
// ========================================================
// == Selector ==
// ========================================================
// ======================== Change ========================
var onSelectorChange = function onSelectorChange(date) {
triggerCalendarChange(date);
};
var onSelectorInputChange = function onSelectorInputChange() {
lastOperation('input');
};
// ======================= Selector =======================
var onSelectorFocus = function onSelectorFocus(event) {
lastOperation('input');
triggerOpen(true, {
inherit: true
});
// setActiveIndex(index);
onSharedFocus(event);
};
var onSelectorBlur = function onSelectorBlur(event) {
triggerOpen(false);
onSharedBlur(event);
};
var onSelectorKeyDown = function onSelectorKeyDown(event, preventDefault) {
if (event.key === 'Tab') {
triggerConfirm();
}
onKeyDown === null || onKeyDown === void 0 || onKeyDown(event, preventDefault);
};
// ======================= Context ========================
var context = React.useMemo(function () {
return {
prefixCls: prefixCls,
locale: locale,
generateConfig: generateConfig,
button: components.button,
input: components.input
};
}, [prefixCls, locale, generateConfig, components.button, components.input]);
// ======================== Effect ========================
// >>> Mode
// Reset for every active
useLayoutEffect(function () {
if (mergedOpen && activeIndex !== undefined) {
// Legacy compatible. This effect update should not trigger `onPanelChange`
triggerModeChange(null, picker, false);
}
}, [mergedOpen, activeIndex, picker]);
// >>> For complex picker, we need check if need to focus next one
useLayoutEffect(function () {
var lastOp = lastOperation();
// Trade as confirm on field leave
if (!mergedOpen && lastOp === 'input') {
triggerOpen(false);
triggerConfirm();
}
// Submit with complex picker
if (!mergedOpen && complexPicker && !needConfirm && lastOp === 'panel') {
triggerConfirm();
}
}, [mergedOpen]);
// ======================== Render ========================
return /*#__PURE__*/React.createElement(PickerContext.Provider, {
value: context
}, /*#__PURE__*/React.createElement(PickerTrigger, _extends({}, pickTriggerProps(filledProps), {
popupElement: panel,
popupStyle: styles.popup,
popupClassName: classNames.popup
// Visible
,
visible: mergedOpen,
onClose: onPopupClose
}), /*#__PURE__*/React.createElement(SingleSelector
// Shared
, _extends({}, filledProps, {
// Ref
ref: selectorRef
// Icon
,
suffixIcon: suffixIcon,
removeIcon: removeIcon
// Active
,
activeHelp: !!internalHoverValue,
allHelp: !!internalHoverValue && hoverSource === 'preset',
focused: focused,
onFocus: onSelectorFocus,
onBlur: onSelectorBlur,
onKeyDown: onSelectorKeyDown,
onSubmit: triggerConfirm
// Change
,
value: selectorValues,
maskFormat: maskFormat,
onChange: onSelectorChange,
onInputChange: onSelectorInputChange,
internalPicker: internalPicker
// Format
,
format: formatList,
inputReadOnly: inputReadOnly
// Disabled
,
disabled: disabled
// Open
,
open: mergedOpen,
onOpenChange: triggerOpen
// Click
,
onClick: onSelectorClick,
onClear: onSelectorClear
// Invalid
,
invalid: submitInvalidate,
onInvalid: function onInvalid(invalid) {
// Only `single` mode support type date.
// `multiple` mode can not typing.
onSelectorInvalid(invalid, 0);
}
}))));
}
var RefPicker = /*#__PURE__*/React.forwardRef(Picker);
if (process.env.NODE_ENV !== 'production') {
RefPicker.displayName = 'RefPicker';
}
export default RefPicker;

13
node_modules/rc-picker/es/PickerInput/context.d.ts generated vendored Normal file
View File

@@ -0,0 +1,13 @@
import * as React from 'react';
import type { GenerateConfig } from '../generate';
import type { Components, Locale } from '../interface';
export interface PickerContextProps<DateType = any> {
prefixCls: string;
locale: Locale;
generateConfig: GenerateConfig<DateType>;
/** Customize button component */
button?: Components['button'];
input?: Components['input'];
}
declare const PickerContext: React.Context<PickerContextProps<any>>;
export default PickerContext;

3
node_modules/rc-picker/es/PickerInput/context.js generated vendored Normal file
View File

@@ -0,0 +1,3 @@
import * as React from 'react';
var PickerContext = /*#__PURE__*/React.createContext(null);
export default PickerContext;

View File

@@ -0,0 +1,2 @@
import type { CellRender, CellRenderInfo, SharedPickerProps } from '../../interface';
export default function useCellRender<DateType extends object = any>(cellRender: SharedPickerProps<DateType>['cellRender'], dateRender?: SharedPickerProps<DateType>['dateRender'], monthCellRender?: SharedPickerProps<DateType>['monthCellRender'], range?: CellRenderInfo<DateType>['range']): CellRender<DateType>;

View File

@@ -0,0 +1,36 @@
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { warning } from 'rc-util';
import * as React from 'react';
export default function useCellRender(cellRender, dateRender, monthCellRender, range) {
// ========================= Warn =========================
if (process.env.NODE_ENV !== 'production') {
warning(!dateRender, "'dateRender' is deprecated. Please use 'cellRender' instead.");
warning(!monthCellRender, "'monthCellRender' is deprecated. Please use 'cellRender' instead.");
}
// ======================== Render ========================
// Merged render
var mergedCellRender = React.useMemo(function () {
if (cellRender) {
return cellRender;
}
return function (current, info) {
var date = current;
if (dateRender && info.type === 'date') {
return dateRender(date, info.today);
}
if (monthCellRender && info.type === 'month') {
return monthCellRender(date, info.locale);
}
return info.originNode;
};
}, [cellRender, monthCellRender, dateRender]);
// Cell render
var onInternalCellRender = React.useCallback(function (date, info) {
return mergedCellRender(date, _objectSpread(_objectSpread({}, info), {}, {
range: range
}));
}, [mergedCellRender, range]);
return onInternalCellRender;
}

View File

@@ -0,0 +1,5 @@
/**
* Will be `true` immediately for next effect.
* But will be `false` for a delay of effect.
*/
export default function useDelayState<T>(value: T, defaultValue?: T, onChange?: (next: T) => void): [state: T, setState: (nextState: T, immediately?: boolean) => void];

View File

@@ -0,0 +1,43 @@
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useEvent, useMergedState } from 'rc-util';
import raf from "rc-util/es/raf";
import React from 'react';
/**
* Will be `true` immediately for next effect.
* But will be `false` for a delay of effect.
*/
export default function useDelayState(value, defaultValue, onChange) {
var _useMergedState = useMergedState(defaultValue, {
value: value
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
state = _useMergedState2[0],
setState = _useMergedState2[1];
var nextValueRef = React.useRef(value);
// ============================= Update =============================
var rafRef = React.useRef();
var cancelRaf = function cancelRaf() {
raf.cancel(rafRef.current);
};
var doUpdate = useEvent(function () {
setState(nextValueRef.current);
if (onChange && state !== nextValueRef.current) {
onChange(nextValueRef.current);
}
});
var updateValue = useEvent(function (next, immediately) {
cancelRaf();
nextValueRef.current = next;
if (next || immediately) {
doUpdate();
} else {
rafRef.current = raf(doUpdate);
}
});
React.useEffect(function () {
return cancelRaf;
}, []);
return [state, updateValue];
}

View File

@@ -0,0 +1,7 @@
import type { GenerateConfig } from '../../generate';
import type { DisabledDate, InternalMode, Locale } from '../../interface';
export type IsInvalidBoundary<DateType> = (currentDate: DateType, type: InternalMode, fromDate?: DateType) => boolean;
/**
* Merge `disabledDate` with `minDate` & `maxDate`.
*/
export default function useDisabledBoundary<DateType extends object = any>(generateConfig: GenerateConfig<DateType>, locale: Locale, disabledDate?: DisabledDate<DateType>, minDate?: DateType, maxDate?: DateType): DisabledDate<DateType>;

View File

@@ -0,0 +1,20 @@
import { useEvent } from 'rc-util';
import { isSame } from "../../utils/dateUtil";
/**
* Merge `disabledDate` with `minDate` & `maxDate`.
*/
export default function useDisabledBoundary(generateConfig, locale, disabledDate, minDate, maxDate) {
var mergedDisabledDate = useEvent(function (date, info) {
if (disabledDate && disabledDate(date, info)) {
return true;
}
if (minDate && generateConfig.isAfter(minDate, date) && !isSame(generateConfig, locale, minDate, date, info.type)) {
return true;
}
if (maxDate && generateConfig.isAfter(date, maxDate) && !isSame(generateConfig, locale, maxDate, date, info.type)) {
return true;
}
return false;
});
return mergedDisabledDate;
}

View File

@@ -0,0 +1,2 @@
import type { FormatType, InternalMode, Locale, SharedPickerProps } from '../../interface';
export declare function useFieldFormat<DateType = any>(picker: InternalMode, locale: Locale, format?: SharedPickerProps['format']): [formatList: FormatType<DateType>[], maskFormat?: string];

View File

@@ -0,0 +1,18 @@
import _typeof from "@babel/runtime/helpers/esm/typeof";
import * as React from 'react';
import { getRowFormat, toArray } from "../../utils/miscUtil";
export function useFieldFormat(picker, locale, format) {
return React.useMemo(function () {
var rawFormat = getRowFormat(picker, locale, format);
var formatList = toArray(rawFormat);
var firstFormat = formatList[0];
var maskFormat = _typeof(firstFormat) === 'object' && firstFormat.type === 'mask' ? firstFormat.format : null;
return [
// Format list
formatList.map(function (config) {
return typeof config === 'string' || typeof config === 'function' ? config : config.format;
}),
// Mask Format
maskFormat];
}, [picker, locale, format]);
}

View File

@@ -0,0 +1,5 @@
import type useInvalidate from './useInvalidate';
/**
* Used to control each fields invalidate status
*/
export default function useFieldsInvalidate<DateType extends object, ValueType extends DateType[]>(calendarValue: ValueType, isInvalidateDate: ReturnType<typeof useInvalidate<DateType>>, allowEmpty?: boolean[]): readonly [[boolean, boolean], (invalid: boolean, index: number) => void];

View File

@@ -0,0 +1,50 @@
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { fillIndex } from "../../utils/miscUtil";
import * as React from 'react';
/**
* Used to control each fields invalidate status
*/
export default function useFieldsInvalidate(calendarValue, isInvalidateDate) {
var allowEmpty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
var _React$useState = React.useState([false, false]),
_React$useState2 = _slicedToArray(_React$useState, 2),
fieldsInvalidates = _React$useState2[0],
setFieldsInvalidates = _React$useState2[1];
var onSelectorInvalid = function onSelectorInvalid(invalid, index) {
setFieldsInvalidates(function (ori) {
return fillIndex(ori, index, invalid);
});
};
/**
* For the Selector Input to mark as `aria-disabled`
*/
var submitInvalidates = React.useMemo(function () {
return fieldsInvalidates.map(function (invalid, index) {
// If typing invalidate
if (invalid) {
return true;
}
var current = calendarValue[index];
// Not check if all empty
if (!current) {
return false;
}
// Not allow empty
if (!allowEmpty[index] && !current) {
return true;
}
// Invalidate
if (current && isInvalidateDate(current, {
activeIndex: index
})) {
return true;
}
return false;
});
}, [calendarValue, fieldsInvalidates, isInvalidateDate, allowEmpty]);
return [submitInvalidates, onSelectorInvalid];
}

View File

@@ -0,0 +1,37 @@
import type { FormatType, InternalMode, PickerMode } from '../../interface';
import type { RangePickerProps } from '../RangePicker';
import useInvalidate from './useInvalidate';
type UseInvalidate<DateType extends object = any> = typeof useInvalidate<DateType>;
type PickedProps<DateType extends object = any> = Pick<RangePickerProps<DateType>, 'generateConfig' | 'locale' | 'picker' | 'prefixCls' | 'styles' | 'classNames' | 'order' | 'components' | 'inputRender' | 'clearIcon' | 'allowClear' | 'needConfirm' | 'format' | 'inputReadOnly' | 'disabledDate' | 'minDate' | 'maxDate' | 'defaultOpenValue'> & {
multiple?: boolean;
showTime?: any;
value?: any;
defaultValue?: any;
pickerValue?: any;
defaultPickerValue?: any;
};
type ExcludeBooleanType<T> = T extends boolean ? never : T;
type GetGeneric<T> = T extends PickedProps<infer U> ? U : never;
type ToArrayType<T, DateType> = T extends any[] ? T : DateType[];
/**
* Align the outer props with unique typed and fill undefined props.
* This is shared with both RangePicker and Picker. This will do:
* - Convert `value` & `defaultValue` to array
* - handle the legacy props fill like `clearIcon` + `allowClear` = `clearIcon`
*/
export default function useFilledProps<InProps extends PickedProps, DateType extends GetGeneric<InProps>, UpdaterProps extends object>(props: InProps, updater?: () => UpdaterProps): [
filledProps: Omit<InProps, keyof UpdaterProps | 'showTime' | 'value' | 'defaultValue'> & UpdaterProps & {
picker: PickerMode;
showTime?: ExcludeBooleanType<InProps['showTime']>;
value?: ToArrayType<InProps['value'], DateType>;
defaultValue?: ToArrayType<InProps['value'], DateType>;
pickerValue?: ToArrayType<InProps['value'], DateType>;
defaultPickerValue?: ToArrayType<InProps['value'], DateType>;
},
internalPicker: InternalMode,
complexPicker: boolean,
formatList: FormatType<DateType>[],
maskFormat: string,
isInvalidateDate: ReturnType<UseInvalidate<DateType>>
];
export {};

View File

@@ -0,0 +1,145 @@
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { warning } from 'rc-util';
import * as React from 'react';
import useLocale from "../../hooks/useLocale";
import { fillShowTimeConfig, getTimeProps } from "../../hooks/useTimeConfig";
import { toArray } from "../../utils/miscUtil";
import { fillClearIcon } from "../Selector/hooks/useClearIcon";
import useDisabledBoundary from "./useDisabledBoundary";
import { useFieldFormat } from "./useFieldFormat";
import useInputReadOnly from "./useInputReadOnly";
import useInvalidate from "./useInvalidate";
function useList(value) {
var fillMode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var values = React.useMemo(function () {
var list = value ? toArray(value) : value;
if (fillMode && list) {
list[1] = list[1] || list[0];
}
return list;
}, [value, fillMode]);
return values;
}
/**
* Align the outer props with unique typed and fill undefined props.
* This is shared with both RangePicker and Picker. This will do:
* - Convert `value` & `defaultValue` to array
* - handle the legacy props fill like `clearIcon` + `allowClear` = `clearIcon`
*/
export default function useFilledProps(props, updater) {
var generateConfig = props.generateConfig,
locale = props.locale,
_props$picker = props.picker,
picker = _props$picker === void 0 ? 'date' : _props$picker,
_props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'rc-picker' : _props$prefixCls,
_props$styles = props.styles,
styles = _props$styles === void 0 ? {} : _props$styles,
_props$classNames = props.classNames,
classNames = _props$classNames === void 0 ? {} : _props$classNames,
_props$order = props.order,
order = _props$order === void 0 ? true : _props$order,
_props$components = props.components,
components = _props$components === void 0 ? {} : _props$components,
inputRender = props.inputRender,
allowClear = props.allowClear,
clearIcon = props.clearIcon,
needConfirm = props.needConfirm,
multiple = props.multiple,
format = props.format,
inputReadOnly = props.inputReadOnly,
disabledDate = props.disabledDate,
minDate = props.minDate,
maxDate = props.maxDate,
showTime = props.showTime,
value = props.value,
defaultValue = props.defaultValue,
pickerValue = props.pickerValue,
defaultPickerValue = props.defaultPickerValue;
var values = useList(value);
var defaultValues = useList(defaultValue);
var pickerValues = useList(pickerValue);
var defaultPickerValues = useList(defaultPickerValue);
// ======================== Picker ========================
/** Almost same as `picker`, but add `datetime` for `date` with `showTime` */
var internalPicker = picker === 'date' && showTime ? 'datetime' : picker;
/** The picker is `datetime` or `time` */
var multipleInteractivePicker = internalPicker === 'time' || internalPicker === 'datetime';
var complexPicker = multipleInteractivePicker || multiple;
var mergedNeedConfirm = needConfirm !== null && needConfirm !== void 0 ? needConfirm : multipleInteractivePicker;
// ========================== Time ==========================
// Auto `format` need to check `showTime.showXXX` first.
// And then merge the `locale` into `mergedShowTime`.
var _getTimeProps = getTimeProps(props),
_getTimeProps2 = _slicedToArray(_getTimeProps, 4),
timeProps = _getTimeProps2[0],
localeTimeProps = _getTimeProps2[1],
showTimeFormat = _getTimeProps2[2],
propFormat = _getTimeProps2[3];
// ======================= Locales ========================
var mergedLocale = useLocale(locale, localeTimeProps);
var mergedShowTime = React.useMemo(function () {
return fillShowTimeConfig(internalPicker, showTimeFormat, propFormat, timeProps, mergedLocale);
}, [internalPicker, showTimeFormat, propFormat, timeProps, mergedLocale]);
// ======================= Warning ========================
if (process.env.NODE_ENV !== 'production' && picker === 'time') {
if (['disabledHours', 'disabledMinutes', 'disabledSeconds'].some(function (key) {
return props[key];
})) {
warning(false, "'disabledHours', 'disabledMinutes', 'disabledSeconds' will be removed in the next major version, please use 'disabledTime' instead.");
}
}
// ======================== Props =========================
var filledProps = React.useMemo(function () {
return _objectSpread(_objectSpread({}, props), {}, {
prefixCls: prefixCls,
locale: mergedLocale,
picker: picker,
styles: styles,
classNames: classNames,
order: order,
components: _objectSpread({
input: inputRender
}, components),
clearIcon: fillClearIcon(prefixCls, allowClear, clearIcon),
showTime: mergedShowTime,
value: values,
defaultValue: defaultValues,
pickerValue: pickerValues,
defaultPickerValue: defaultPickerValues
}, updater === null || updater === void 0 ? void 0 : updater());
}, [props]);
// ======================== Format ========================
var _useFieldFormat = useFieldFormat(internalPicker, mergedLocale, format),
_useFieldFormat2 = _slicedToArray(_useFieldFormat, 2),
formatList = _useFieldFormat2[0],
maskFormat = _useFieldFormat2[1];
// ======================= ReadOnly =======================
var mergedInputReadOnly = useInputReadOnly(formatList, inputReadOnly, multiple);
// ======================= Boundary =======================
var disabledBoundaryDate = useDisabledBoundary(generateConfig, locale, disabledDate, minDate, maxDate);
// ====================== Invalidate ======================
var isInvalidateDate = useInvalidate(generateConfig, picker, disabledBoundaryDate, mergedShowTime);
// ======================== Merged ========================
var mergedProps = React.useMemo(function () {
return _objectSpread(_objectSpread({}, filledProps), {}, {
needConfirm: mergedNeedConfirm,
inputReadOnly: mergedInputReadOnly,
disabledDate: disabledBoundaryDate
});
}, [filledProps, mergedNeedConfirm, mergedInputReadOnly, disabledBoundaryDate]);
return [mergedProps, internalPicker, complexPicker, formatList, maskFormat, isInvalidateDate];
}

View File

@@ -0,0 +1,2 @@
import type { FormatType } from '../../interface';
export default function useInputReadOnly<DateType = any>(formatList: FormatType<DateType>[], inputReadOnly?: boolean, multiple?: boolean): boolean;

View File

@@ -0,0 +1,6 @@
export default function useInputReadOnly(formatList, inputReadOnly, multiple) {
if (typeof formatList[0] === 'function' || multiple) {
return true;
}
return inputReadOnly;
}

View File

@@ -0,0 +1,9 @@
import type { GenerateConfig } from '../../generate';
import type { PanelMode, RangeTimeProps, SharedPickerProps, SharedTimeProps } from '../../interface';
/**
* Check if provided date is valid for the `disabledDate` & `showTime.disabledTime`.
*/
export default function useInvalidate<DateType extends object = any>(generateConfig: GenerateConfig<DateType>, picker: PanelMode, disabledDate?: SharedPickerProps<DateType>['disabledDate'], showTime?: SharedTimeProps<DateType> | RangeTimeProps<DateType>): (date: DateType, info?: {
from?: DateType;
activeIndex: number;
}) => boolean;

View File

@@ -0,0 +1,56 @@
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import { useEvent } from 'rc-util';
/**
* Check if provided date is valid for the `disabledDate` & `showTime.disabledTime`.
*/
export default function useInvalidate(generateConfig, picker, disabledDate, showTime) {
// Check disabled date
var isInvalidate = useEvent(function (date, info) {
var outsideInfo = _objectSpread({
type: picker
}, info);
delete outsideInfo.activeIndex;
if (
// Date object is invalid
!generateConfig.isValidate(date) ||
// Date is disabled by `disabledDate`
disabledDate && disabledDate(date, outsideInfo)) {
return true;
}
if ((picker === 'date' || picker === 'time') && showTime) {
var _showTime$disabledTim;
var range = info && info.activeIndex === 1 ? 'end' : 'start';
var _ref = ((_showTime$disabledTim = showTime.disabledTime) === null || _showTime$disabledTim === void 0 ? void 0 : _showTime$disabledTim.call(showTime, date, range, {
from: outsideInfo.from
})) || {},
disabledHours = _ref.disabledHours,
disabledMinutes = _ref.disabledMinutes,
disabledSeconds = _ref.disabledSeconds,
disabledMilliseconds = _ref.disabledMilliseconds;
var legacyDisabledHours = showTime.disabledHours,
legacyDisabledMinutes = showTime.disabledMinutes,
legacyDisabledSeconds = showTime.disabledSeconds;
var mergedDisabledHours = disabledHours || legacyDisabledHours;
var mergedDisabledMinutes = disabledMinutes || legacyDisabledMinutes;
var mergedDisabledSeconds = disabledSeconds || legacyDisabledSeconds;
var hour = generateConfig.getHour(date);
var minute = generateConfig.getMinute(date);
var second = generateConfig.getSecond(date);
var millisecond = generateConfig.getMillisecond(date);
if (mergedDisabledHours && mergedDisabledHours().includes(hour)) {
return true;
}
if (mergedDisabledMinutes && mergedDisabledMinutes(hour).includes(minute)) {
return true;
}
if (mergedDisabledSeconds && mergedDisabledSeconds(hour, minute).includes(second)) {
return true;
}
if (disabledMilliseconds && disabledMilliseconds(hour, minute, second).includes(millisecond)) {
return true;
}
}
return false;
});
return isInvalidate;
}

View File

@@ -0,0 +1,5 @@
/**
* Trigger `callback` immediately when `condition` is `true`.
* But trigger `callback` in next frame when `condition` is `false`.
*/
export default function useLockEffect(condition: boolean, callback: (next: boolean) => void, delayFrames?: number): void;

View File

@@ -0,0 +1,25 @@
import { useLayoutUpdateEffect } from "rc-util/es/hooks/useLayoutEffect";
import raf from "rc-util/es/raf";
import * as React from 'react';
/**
* Trigger `callback` immediately when `condition` is `true`.
* But trigger `callback` in next frame when `condition` is `false`.
*/
export default function useLockEffect(condition, callback) {
var delayFrames = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
var callbackRef = React.useRef(callback);
callbackRef.current = callback;
useLayoutUpdateEffect(function () {
if (condition) {
callbackRef.current(condition);
} else {
var id = raf(function () {
callbackRef.current(condition);
}, delayFrames);
return function () {
raf.cancel(id);
};
}
}, [condition]);
}

View File

@@ -0,0 +1,6 @@
import type { OpenConfig } from '../../interface';
/**
* Control the open state.
* Will not close if activeElement is on the popup.
*/
export default function useOpen(open?: boolean, defaultOpen?: boolean, disabledList?: boolean[], onOpenChange?: (open: boolean) => void): [open: boolean, setOpen: (open: boolean, config?: OpenConfig) => void];

28
node_modules/rc-picker/es/PickerInput/hooks/useOpen.js generated vendored Normal file
View File

@@ -0,0 +1,28 @@
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import useDelayState from "./useDelayState";
/**
* Control the open state.
* Will not close if activeElement is on the popup.
*/
export default function useOpen(open, defaultOpen) {
var disabledList = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
var onOpenChange = arguments.length > 3 ? arguments[3] : undefined;
var mergedOpen = disabledList.every(function (disabled) {
return disabled;
}) ? false : open;
// Delay for handle the open state, in case fast shift from `open` -> `close` -> `open`
// const [rafOpen, setRafOpen] = useLockState(open, defaultOpen || false, onOpenChange);
var _useDelayState = useDelayState(mergedOpen, defaultOpen || false, onOpenChange),
_useDelayState2 = _slicedToArray(_useDelayState, 2),
rafOpen = _useDelayState2[0],
setRafOpen = _useDelayState2[1];
function setOpen(next) {
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (!config.inherit || rafOpen) {
setRafOpen(next, config.force);
}
}
return [rafOpen, setOpen];
}

View File

@@ -0,0 +1,7 @@
import * as React from 'react';
import type { PickerRef } from '../../interface';
type PickerRefType<OptionType> = Omit<PickerRef, 'focus'> & {
focus: (options?: OptionType) => void;
};
export default function usePickerRef<OptionType>(ref: React.Ref<PickerRefType<OptionType>>): React.MutableRefObject<PickerRefType<OptionType>>;
export {};

View File

@@ -0,0 +1,19 @@
import * as React from 'react';
export default function usePickerRef(ref) {
var selectorRef = React.useRef();
React.useImperativeHandle(ref, function () {
var _selectorRef$current;
return {
nativeElement: (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.nativeElement,
focus: function focus(options) {
var _selectorRef$current2;
(_selectorRef$current2 = selectorRef.current) === null || _selectorRef$current2 === void 0 || _selectorRef$current2.focus(options);
},
blur: function blur() {
var _selectorRef$current3;
(_selectorRef$current3 = selectorRef.current) === null || _selectorRef$current3 === void 0 || _selectorRef$current3.blur();
}
};
});
return selectorRef;
}

View File

@@ -0,0 +1,2 @@
import type { ValueDate } from '../../interface';
export default function usePresets<DateType = any>(presets?: ValueDate<DateType>[], legacyRanges?: Record<string, DateType | (() => DateType)>): ValueDate<DateType>[];

View File

@@ -0,0 +1,23 @@
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import warning from "rc-util/es/warning";
export default function usePresets(presets, legacyRanges) {
return React.useMemo(function () {
if (presets) {
return presets;
}
if (legacyRanges) {
warning(false, '`ranges` is deprecated. Please use `presets` instead.');
return Object.entries(legacyRanges).map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
label = _ref2[0],
value = _ref2[1];
return {
label: label,
value: value
};
});
}
return [];
}, [presets, legacyRanges]);
}

View File

@@ -0,0 +1,19 @@
import type { RangeValueType } from '../RangePicker';
export type OperationType = 'input' | 'panel';
export type NextActive<DateType> = (nextValue: RangeValueType<DateType>) => number | null;
/**
* When user first focus one input, any submit will trigger focus another one.
* When second time focus one input, submit will not trigger focus again.
* When click outside to close the panel, trigger event if it can trigger onChange.
*/
export default function useRangeActive<DateType>(disabled: boolean[], empty?: boolean[], mergedOpen?: boolean): [
focused: boolean,
triggerFocus: (focused: boolean) => void,
lastOperation: (type?: OperationType) => OperationType,
activeIndex: number,
setActiveIndex: (index: number) => void,
nextActiveIndex: NextActive<DateType>,
activeList: number[],
updateSubmitIndex: (index: number | null) => void,
hasActiveSubmitValue: (index: number) => boolean
];

View File

@@ -0,0 +1,69 @@
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import useLockEffect from "./useLockEffect";
/**
* When user first focus one input, any submit will trigger focus another one.
* When second time focus one input, submit will not trigger focus again.
* When click outside to close the panel, trigger event if it can trigger onChange.
*/
export default function useRangeActive(disabled) {
var empty = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var mergedOpen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var _React$useState = React.useState(0),
_React$useState2 = _slicedToArray(_React$useState, 2),
activeIndex = _React$useState2[0],
setActiveIndex = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
focused = _React$useState4[0],
setFocused = _React$useState4[1];
var activeListRef = React.useRef([]);
var submitIndexRef = React.useRef(null);
var lastOperationRef = React.useRef(null);
var updateSubmitIndex = function updateSubmitIndex(index) {
submitIndexRef.current = index;
};
var hasActiveSubmitValue = function hasActiveSubmitValue(index) {
return submitIndexRef.current === index;
};
var triggerFocus = function triggerFocus(nextFocus) {
setFocused(nextFocus);
};
// ============================= Record =============================
var lastOperation = function lastOperation(type) {
if (type) {
lastOperationRef.current = type;
}
return lastOperationRef.current;
};
// ============================ Strategy ============================
// Trigger when input enter or input blur or panel close
var nextActiveIndex = function nextActiveIndex(nextValue) {
var list = activeListRef.current;
var filledActiveSet = new Set(list.filter(function (index) {
return nextValue[index] || empty[index];
}));
var nextIndex = list[list.length - 1] === 0 ? 1 : 0;
if (filledActiveSet.size >= 2 || disabled[nextIndex]) {
return null;
}
return nextIndex;
};
// ============================= Effect =============================
// Wait in case it's from the click outside to blur
useLockEffect(focused || mergedOpen, function () {
if (!focused) {
activeListRef.current = [];
updateSubmitIndex(null);
}
});
React.useEffect(function () {
if (focused) {
activeListRef.current.push(activeIndex);
}
}, [focused, activeIndex]);
return [focused, triggerFocus, lastOperation, activeIndex, setActiveIndex, nextActiveIndex, activeListRef.current, updateSubmitIndex, hasActiveSubmitValue];
}

View File

@@ -0,0 +1,8 @@
import type { GenerateConfig } from '../../generate';
import type { DisabledDate, Locale } from '../../interface';
import type { RangeValueType } from '../RangePicker';
/**
* RangePicker need additional logic to handle the `disabled` case. e.g.
* [disabled, enabled] should end date not before start date
*/
export default function useRangeDisabledDate<DateType extends object = any>(values: RangeValueType<DateType>, disabled: [boolean, boolean], activeIndexList: number[], generateConfig: GenerateConfig<DateType>, locale: Locale, disabledDate?: DisabledDate<DateType>): DisabledDate<DateType>;

View File

@@ -0,0 +1,43 @@
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { isSame } from "../../utils/dateUtil";
import { getFromDate } from "../../utils/miscUtil";
/**
* RangePicker need additional logic to handle the `disabled` case. e.g.
* [disabled, enabled] should end date not before start date
*/
export default function useRangeDisabledDate(values, disabled, activeIndexList, generateConfig, locale, disabledDate) {
var activeIndex = activeIndexList[activeIndexList.length - 1];
var rangeDisabledDate = function rangeDisabledDate(date, info) {
var _values = _slicedToArray(values, 2),
start = _values[0],
end = _values[1];
var mergedInfo = _objectSpread(_objectSpread({}, info), {}, {
from: getFromDate(values, activeIndexList)
});
// ============================ Disabled ============================
// Should not select days before the start date
if (activeIndex === 1 && disabled[0] && start &&
// Same date isOK
!isSame(generateConfig, locale, start, date, mergedInfo.type) &&
// Before start date
generateConfig.isAfter(start, date)) {
return true;
}
// Should not select days after the end date
if (activeIndex === 0 && disabled[1] && end &&
// Same date isOK
!isSame(generateConfig, locale, end, date, mergedInfo.type) &&
// After end date
generateConfig.isAfter(date, end)) {
return true;
}
// ============================= Origin =============================
return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, mergedInfo);
};
return rangeDisabledDate;
}

View File

@@ -0,0 +1,5 @@
import type { GenerateConfig } from '../../generate';
import type { InternalMode, Locale, PanelMode } from '../../interface';
import type { RangePickerProps } from '../RangePicker';
export declare function offsetPanelDate<DateType = any>(generateConfig: GenerateConfig<DateType>, picker: InternalMode, date: DateType, offset: number): DateType;
export default function useRangePickerValue<DateType extends object, ValueType extends DateType[]>(generateConfig: GenerateConfig<DateType>, locale: Locale, calendarValue: ValueType, modes: PanelMode[], open: boolean, activeIndex: number, pickerMode: InternalMode, multiplePanel: boolean, defaultPickerValue?: ValueType, pickerValue?: ValueType, timeDefaultValue?: ValueType, onPickerValueChange?: RangePickerProps<DateType>['onPickerValueChange'], minDate?: DateType, maxDate?: DateType): [currentIndexPickerValue: DateType, setCurrentIndexPickerValue: (value: DateType) => void];

View File

@@ -0,0 +1,187 @@
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useMergedState } from 'rc-util';
import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
import * as React from 'react';
import { fillTime, isSame } from "../../utils/dateUtil";
export function offsetPanelDate(generateConfig, picker, date, offset) {
switch (picker) {
case 'date':
case 'week':
return generateConfig.addMonth(date, offset);
case 'month':
case 'quarter':
return generateConfig.addYear(date, offset);
case 'year':
return generateConfig.addYear(date, offset * 10);
case 'decade':
return generateConfig.addYear(date, offset * 100);
default:
return date;
}
}
var EMPTY_LIST = [];
export default function useRangePickerValue(generateConfig, locale, calendarValue, modes, open, activeIndex, pickerMode, multiplePanel) {
var defaultPickerValue = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : EMPTY_LIST;
var pickerValue = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : EMPTY_LIST;
var timeDefaultValue = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : EMPTY_LIST;
var onPickerValueChange = arguments.length > 11 ? arguments[11] : undefined;
var minDate = arguments.length > 12 ? arguments[12] : undefined;
var maxDate = arguments.length > 13 ? arguments[13] : undefined;
var isTimePicker = pickerMode === 'time';
// ======================== Active ========================
// `activeIndex` must be valid to avoid getting empty `pickerValue`
var mergedActiveIndex = activeIndex || 0;
// ===================== Picker Value =====================
var getDefaultPickerValue = function getDefaultPickerValue(index) {
var now = generateConfig.getNow();
if (isTimePicker) {
now = fillTime(generateConfig, now);
}
return defaultPickerValue[index] || calendarValue[index] || now;
};
// Align `pickerValue` with `showTime.defaultValue`
var _pickerValue = _slicedToArray(pickerValue, 2),
startPickerValue = _pickerValue[0],
endPickerValue = _pickerValue[1];
// PickerValue state
var _useMergedState = useMergedState(function () {
return getDefaultPickerValue(0);
}, {
value: startPickerValue
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
mergedStartPickerValue = _useMergedState2[0],
setStartPickerValue = _useMergedState2[1];
var _useMergedState3 = useMergedState(function () {
return getDefaultPickerValue(1);
}, {
value: endPickerValue
}),
_useMergedState4 = _slicedToArray(_useMergedState3, 2),
mergedEndPickerValue = _useMergedState4[0],
setEndPickerValue = _useMergedState4[1];
// Current PickerValue
var currentPickerValue = React.useMemo(function () {
var current = [mergedStartPickerValue, mergedEndPickerValue][mergedActiveIndex];
// Merge the `showTime.defaultValue` into `pickerValue`
return isTimePicker ? current : fillTime(generateConfig, current, timeDefaultValue[mergedActiveIndex]);
}, [isTimePicker, mergedStartPickerValue, mergedEndPickerValue, mergedActiveIndex, generateConfig, timeDefaultValue]);
var setCurrentPickerValue = function setCurrentPickerValue(nextPickerValue) {
var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'panel';
var updater = [setStartPickerValue, setEndPickerValue][mergedActiveIndex];
updater(nextPickerValue);
var clone = [mergedStartPickerValue, mergedEndPickerValue];
clone[mergedActiveIndex] = nextPickerValue;
if (onPickerValueChange && (!isSame(generateConfig, locale, mergedStartPickerValue, clone[0], pickerMode) || !isSame(generateConfig, locale, mergedEndPickerValue, clone[1], pickerMode))) {
onPickerValueChange(clone, {
source: source,
range: mergedActiveIndex === 1 ? 'end' : 'start',
mode: modes
});
}
};
// ======================== Effect ========================
/**
* EndDate pickerValue is little different. It should be:
* - If date picker (without time), endDate is not same year & month as startDate
* - pickerValue minus one month
* - Else pass directly
*/
var getEndDatePickerValue = function getEndDatePickerValue(startDate, endDate) {
if (multiplePanel) {
// Basic offset
var SAME_CHECKER = {
date: 'month',
week: 'month',
month: 'year',
quarter: 'year'
};
var mode = SAME_CHECKER[pickerMode];
if (mode && !isSame(generateConfig, locale, startDate, endDate, mode)) {
return offsetPanelDate(generateConfig, pickerMode, endDate, -1);
}
// Year offset
if (pickerMode === 'year' && startDate) {
var srcYear = Math.floor(generateConfig.getYear(startDate) / 10);
var tgtYear = Math.floor(generateConfig.getYear(endDate) / 10);
if (srcYear !== tgtYear) {
return offsetPanelDate(generateConfig, pickerMode, endDate, -1);
}
}
}
return endDate;
};
// >>> When switch field, reset the picker value as prev field picker value
var prevActiveIndexRef = React.useRef(null);
useLayoutEffect(function () {
if (open) {
if (!defaultPickerValue[mergedActiveIndex]) {
var nextPickerValue = isTimePicker ? null : generateConfig.getNow();
/**
* 1. If has prevActiveIndex, use it to avoid panel jump
* 2. If current field has value
* - If `activeIndex` is 1 and `calendarValue[0]` is not same panel as `calendarValue[1]`,
* offset `calendarValue[1]` and set it
* - Else use `calendarValue[activeIndex]`
* 3. If current field has no value but another field has value, use another field value
* 4. Else use now (not any `calendarValue` can ref)
*/
if (prevActiveIndexRef.current !== null && prevActiveIndexRef.current !== mergedActiveIndex) {
// If from another field, not jump picker value
nextPickerValue = [mergedStartPickerValue, mergedEndPickerValue][mergedActiveIndex ^ 1];
} else if (calendarValue[mergedActiveIndex]) {
// Current field has value
nextPickerValue = mergedActiveIndex === 0 ? calendarValue[0] : getEndDatePickerValue(calendarValue[0], calendarValue[1]);
} else if (calendarValue[mergedActiveIndex ^ 1]) {
// Current field has no value but another field has value
nextPickerValue = calendarValue[mergedActiveIndex ^ 1];
}
// Only sync when has value, this will sync in the `min-max` logic
if (nextPickerValue) {
// nextPickerValue < minDate
if (minDate && generateConfig.isAfter(minDate, nextPickerValue)) {
nextPickerValue = minDate;
}
// maxDate < nextPickerValue
var offsetPickerValue = multiplePanel ? offsetPanelDate(generateConfig, pickerMode, nextPickerValue, 1) : nextPickerValue;
if (maxDate && generateConfig.isAfter(offsetPickerValue, maxDate)) {
nextPickerValue = multiplePanel ? offsetPanelDate(generateConfig, pickerMode, maxDate, -1) : maxDate;
}
setCurrentPickerValue(nextPickerValue, 'reset');
}
}
}
}, [open, mergedActiveIndex, calendarValue[mergedActiveIndex]]);
// >>> Reset prevActiveIndex when panel closed
React.useEffect(function () {
if (open) {
prevActiveIndexRef.current = mergedActiveIndex;
} else {
prevActiveIndexRef.current = null;
}
}, [open, mergedActiveIndex]);
// >>> defaultPickerValue: Resync to `defaultPickerValue` for each panel focused
useLayoutEffect(function () {
if (open && defaultPickerValue) {
if (defaultPickerValue[mergedActiveIndex]) {
setCurrentPickerValue(defaultPickerValue[mergedActiveIndex], 'reset');
}
}
}, [open, mergedActiveIndex]);
return [currentPickerValue, setCurrentPickerValue];
}

View File

@@ -0,0 +1,28 @@
import type { GenerateConfig } from '../../generate';
import type { BaseInfo, FormatType, Locale, ReplaceListType } from '../../interface';
import type { RangePickerProps } from '../RangePicker';
import type { ReplacedPickerProps } from '../SinglePicker';
type TriggerCalendarChange<ValueType extends object[]> = (calendarValues: ValueType) => void;
/**
* Control the internal `value` align with prop `value` and provide a temp `calendarValue` for ui.
* `calendarValue` will be reset when blur & focus & open.
*/
export declare function useInnerValue<ValueType extends DateType[], DateType extends object = any>(generateConfig: GenerateConfig<DateType>, locale: Locale, formatList: FormatType[],
/** Used for RangePicker. `true` means [DateType, DateType] or will be DateType[] */
rangeValue: boolean,
/**
* Trigger order when trigger calendar value change.
* This should only used in SinglePicker with `multiple` mode.
* So when `rangeValue` is `true`, order will be ignored.
*/
order: boolean, defaultValue?: ValueType, value?: ValueType, onCalendarChange?: (dates: ValueType, dateStrings: ReplaceListType<Required<ValueType>, string>, info: BaseInfo) => void, onOk?: (dates: ValueType) => void): readonly [ValueType, (updater: ValueType | ((origin: ValueType) => ValueType), ignoreDestroy?: boolean) => void, (useControlledValueFirst?: boolean) => ValueType, TriggerCalendarChange<ValueType>, () => void];
export default function useRangeValue<ValueType extends DateType[], DateType extends object = any>(info: Pick<RangePickerProps<DateType>, 'generateConfig' | 'locale' | 'allowEmpty' | 'order' | 'picker'> & ReplacedPickerProps<DateType>, mergedValue: ValueType, setInnerValue: (nextValue: ValueType) => void, getCalendarValue: () => ValueType, triggerCalendarChange: TriggerCalendarChange<ValueType>, disabled: ReplaceListType<Required<ValueType>, boolean>, formatList: FormatType[], focused: boolean, open: boolean, isInvalidateDate: (date: DateType, info?: {
from?: DateType;
activeIndex: number;
}) => boolean): [
/** Trigger `onChange` by check `disabledDate` */
flushSubmit: (index: number, needTriggerChange: boolean) => void,
/** Trigger `onChange` directly without check `disabledDate` */
triggerSubmitChange: (value: ValueType) => boolean
];
export {};

View File

@@ -0,0 +1,289 @@
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import { useEvent, useMergedState } from 'rc-util';
import * as React from 'react';
import useSyncState from "../../hooks/useSyncState";
import { formatValue, isSame, isSameTimestamp } from "../../utils/dateUtil";
import { fillIndex } from "../../utils/miscUtil";
import useLockEffect from "./useLockEffect";
var EMPTY_VALUE = [];
// Submit Logic:
// * ✅ Value:
// * merged value using controlled value, if not, use stateValue
// * When merged value change, [1] resync calendar value and submit value
// * ✅ Calender Value:
// * 💻 When user typing is validate, change the calendar value
// * 🌅 When user click on the panel, change the calendar value
// * Submit Value:
// * 💻 When user blur the input, flush calendar value to submit value
// * 🌅 When user click on the panel is no needConfirm, flush calendar value to submit value
// * 🌅 When user click on the panel is needConfirm and click OK, flush calendar value to submit value
// * Blur logic & close logic:
// * ✅ For value, always try flush submit
// * ✅ If `needConfirm`, reset as [1]
// * Else (`!needConfirm`)
// * If has another index field, active another index
// * ✅ Flush submit:
// * If all the start & end field is confirmed or all blur or panel closed
// * Update `needSubmit` mark to true
// * trigger onChange by `needSubmit` and update stateValue
function useUtil(generateConfig, locale, formatList) {
var getDateTexts = function getDateTexts(dates) {
return dates.map(function (date) {
return formatValue(date, {
generateConfig: generateConfig,
locale: locale,
format: formatList[0]
});
});
};
var isSameDates = function isSameDates(source, target) {
var maxLen = Math.max(source.length, target.length);
var diffIndex = -1;
for (var i = 0; i < maxLen; i += 1) {
var prev = source[i] || null;
var next = target[i] || null;
if (prev !== next && !isSameTimestamp(generateConfig, prev, next)) {
diffIndex = i;
break;
}
}
return [diffIndex < 0, diffIndex !== 0];
};
return [getDateTexts, isSameDates];
}
function orderDates(dates, generateConfig) {
return _toConsumableArray(dates).sort(function (a, b) {
return generateConfig.isAfter(a, b) ? 1 : -1;
});
}
/**
* Used for internal value management.
* It should always use `mergedValue` in render logic
*/
function useCalendarValue(mergedValue) {
var _useSyncState = useSyncState(mergedValue),
_useSyncState2 = _slicedToArray(_useSyncState, 2),
calendarValue = _useSyncState2[0],
setCalendarValue = _useSyncState2[1];
/** Sync calendarValue & submitValue back with value */
var syncWithValue = useEvent(function () {
setCalendarValue(mergedValue);
});
React.useEffect(function () {
syncWithValue();
}, [mergedValue]);
return [calendarValue, setCalendarValue];
}
/**
* Control the internal `value` align with prop `value` and provide a temp `calendarValue` for ui.
* `calendarValue` will be reset when blur & focus & open.
*/
export function useInnerValue(generateConfig, locale, formatList, /** Used for RangePicker. `true` means [DateType, DateType] or will be DateType[] */
rangeValue,
/**
* Trigger order when trigger calendar value change.
* This should only used in SinglePicker with `multiple` mode.
* So when `rangeValue` is `true`, order will be ignored.
*/
order, defaultValue, value, onCalendarChange, onOk) {
// This is the root value which will sync with controlled or uncontrolled value
var _useMergedState = useMergedState(defaultValue, {
value: value
}),
_useMergedState2 = _slicedToArray(_useMergedState, 2),
innerValue = _useMergedState2[0],
setInnerValue = _useMergedState2[1];
var mergedValue = innerValue || EMPTY_VALUE;
// ========================= Inner Values =========================
var _useCalendarValue = useCalendarValue(mergedValue),
_useCalendarValue2 = _slicedToArray(_useCalendarValue, 2),
calendarValue = _useCalendarValue2[0],
setCalendarValue = _useCalendarValue2[1];
// ============================ Change ============================
var _useUtil = useUtil(generateConfig, locale, formatList),
_useUtil2 = _slicedToArray(_useUtil, 2),
getDateTexts = _useUtil2[0],
isSameDates = _useUtil2[1];
var triggerCalendarChange = useEvent(function (nextCalendarValues) {
var clone = _toConsumableArray(nextCalendarValues);
if (rangeValue) {
for (var i = 0; i < 2; i += 1) {
clone[i] = clone[i] || null;
}
} else if (order) {
clone = orderDates(clone.filter(function (date) {
return date;
}), generateConfig);
}
// Update merged value
var _isSameDates = isSameDates(calendarValue(), clone),
_isSameDates2 = _slicedToArray(_isSameDates, 2),
isSameMergedDates = _isSameDates2[0],
isSameStart = _isSameDates2[1];
if (!isSameMergedDates) {
setCalendarValue(clone);
// Trigger calendar change event
if (onCalendarChange) {
var cellTexts = getDateTexts(clone);
onCalendarChange(clone, cellTexts, {
range: isSameStart ? 'end' : 'start'
});
}
}
});
var triggerOk = function triggerOk() {
if (onOk) {
onOk(calendarValue());
}
};
return [mergedValue, setInnerValue, calendarValue, triggerCalendarChange, triggerOk];
}
export default function useRangeValue(info, mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange, disabled, formatList, focused, open, isInvalidateDate) {
var generateConfig = info.generateConfig,
locale = info.locale,
picker = info.picker,
onChange = info.onChange,
allowEmpty = info.allowEmpty,
order = info.order;
var orderOnChange = disabled.some(function (d) {
return d;
}) ? false : order;
// ============================= Util =============================
var _useUtil3 = useUtil(generateConfig, locale, formatList),
_useUtil4 = _slicedToArray(_useUtil3, 2),
getDateTexts = _useUtil4[0],
isSameDates = _useUtil4[1];
// ============================ Values ============================
// Used for trigger `onChange` event.
// Record current value which is wait for submit.
var _useSyncState3 = useSyncState(mergedValue),
_useSyncState4 = _slicedToArray(_useSyncState3, 2),
submitValue = _useSyncState4[0],
setSubmitValue = _useSyncState4[1];
/** Sync calendarValue & submitValue back with value */
var syncWithValue = useEvent(function () {
setSubmitValue(mergedValue);
});
React.useEffect(function () {
syncWithValue();
}, [mergedValue]);
// ============================ Submit ============================
var triggerSubmit = useEvent(function (nextValue) {
var isNullValue = nextValue === null;
var clone = _toConsumableArray(nextValue || submitValue());
// Fill null value
if (isNullValue) {
var maxLen = Math.max(disabled.length, clone.length);
for (var i = 0; i < maxLen; i += 1) {
if (!disabled[i]) {
clone[i] = null;
}
}
}
// Only when exist value to sort
if (orderOnChange && clone[0] && clone[1]) {
clone = orderDates(clone, generateConfig);
}
// Sync `calendarValue`
triggerCalendarChange(clone);
// ========= Validate check =========
var _clone = clone,
_clone2 = _slicedToArray(_clone, 2),
start = _clone2[0],
end = _clone2[1];
// >>> Empty
var startEmpty = !start;
var endEmpty = !end;
var validateEmptyDateRange = allowEmpty ?
// Validate empty start
(!startEmpty || allowEmpty[0]) && (
// Validate empty end
!endEmpty || allowEmpty[1]) : true;
// >>> Order
var validateOrder = !order || startEmpty || endEmpty || isSame(generateConfig, locale, start, end, picker) || generateConfig.isAfter(end, start);
// >>> Invalid
var validateDates =
// Validate start
(disabled[0] || !start || !isInvalidateDate(start, {
activeIndex: 0
})) && (
// Validate end
disabled[1] || !end || !isInvalidateDate(end, {
from: start,
activeIndex: 1
}));
// >>> Result
var allPassed =
// Null value is from clear button
isNullValue ||
// Normal check
validateEmptyDateRange && validateOrder && validateDates;
if (allPassed) {
// Sync value with submit value
setInnerValue(clone);
var _isSameDates3 = isSameDates(clone, mergedValue),
_isSameDates4 = _slicedToArray(_isSameDates3, 1),
isSameMergedDates = _isSameDates4[0];
// Trigger `onChange` if needed
if (onChange && !isSameMergedDates) {
onChange(
// Return null directly if all date are empty
isNullValue && clone.every(function (val) {
return !val;
}) ? null : clone, getDateTexts(clone));
}
}
return allPassed;
});
// ========================= Flush Submit =========================
var flushSubmit = useEvent(function (index, needTriggerChange) {
var nextSubmitValue = fillIndex(submitValue(), index, getCalendarValue()[index]);
setSubmitValue(nextSubmitValue);
if (needTriggerChange) {
triggerSubmit();
}
});
// ============================ Effect ============================
// All finished action trigger after 2 frames
var interactiveFinished = !focused && !open;
useLockEffect(!interactiveFinished, function () {
if (interactiveFinished) {
// Always try to trigger submit first
triggerSubmit();
// Trigger calendar change since this is a effect reset
// https://github.com/ant-design/ant-design/issues/22351
triggerCalendarChange(mergedValue);
// Sync with value anyway
syncWithValue();
}
}, 2);
// ============================ Return ============================
return [flushSubmit, triggerSubmit];
}

View File

@@ -0,0 +1,2 @@
import type { InternalMode, PanelMode } from '../../interface';
export default function useShowNow(picker: InternalMode, mode: PanelMode, showNow?: boolean, showToday?: boolean, rangePicker?: boolean): boolean;

View File

@@ -0,0 +1,14 @@
export default function useShowNow(picker, mode, showNow, showToday, rangePicker) {
if (mode !== 'date' && mode !== 'time') {
return false;
}
if (showNow !== undefined) {
return showNow;
}
// Compatible with old version `showToday`
if (showToday !== undefined) {
return showToday;
}
return !rangePicker && (picker === 'date' || picker === 'time');
}

View File

@@ -0,0 +1,10 @@
import * as React from 'react';
import type { PanelMode, SharedPanelProps } from '../../interface';
export interface DatePanelProps<DateType extends object> extends SharedPanelProps<DateType> {
panelName?: PanelMode;
rowClassName?: (date: DateType) => string;
/** Used for `WeekPanel` */
mode?: PanelMode;
cellSelection?: boolean;
}
export default function DatePanel<DateType extends object = any>(props: DatePanelProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,182 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import classNames from 'classnames';
import * as React from 'react';
import { formatValue, getWeekStartDate, isSameDate, isSameMonth, WEEK_DAY_COUNT } from "../../utils/dateUtil";
import { PanelContext, useInfo } from "../context";
import PanelBody from "../PanelBody";
import PanelHeader from "../PanelHeader";
export default function DatePanel(props) {
var prefixCls = props.prefixCls,
_props$panelName = props.panelName,
panelName = _props$panelName === void 0 ? 'date' : _props$panelName,
locale = props.locale,
generateConfig = props.generateConfig,
pickerValue = props.pickerValue,
onPickerValueChange = props.onPickerValueChange,
onModeChange = props.onModeChange,
_props$mode = props.mode,
mode = _props$mode === void 0 ? 'date' : _props$mode,
disabledDate = props.disabledDate,
onSelect = props.onSelect,
onHover = props.onHover,
showWeek = props.showWeek;
var panelPrefixCls = "".concat(prefixCls, "-").concat(panelName, "-panel");
var cellPrefixCls = "".concat(prefixCls, "-cell");
var isWeek = mode === 'week';
// ========================== Base ==========================
var _useInfo = useInfo(props, mode),
_useInfo2 = _slicedToArray(_useInfo, 2),
info = _useInfo2[0],
now = _useInfo2[1];
var weekFirstDay = generateConfig.locale.getWeekFirstDay(locale.locale);
var monthStartDate = generateConfig.setDate(pickerValue, 1);
var baseDate = getWeekStartDate(locale.locale, generateConfig, monthStartDate);
var month = generateConfig.getMonth(pickerValue);
// =========================== PrefixColumn ===========================
var showPrefixColumn = showWeek === undefined ? isWeek : showWeek;
var prefixColumn = showPrefixColumn ? function (date) {
// >>> Additional check for disabled
var disabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, {
type: 'week'
});
return /*#__PURE__*/React.createElement("td", {
key: "week",
className: classNames(cellPrefixCls, "".concat(cellPrefixCls, "-week"), _defineProperty({}, "".concat(cellPrefixCls, "-disabled"), disabled))
// Operation: Same as code in PanelBody
,
onClick: function onClick() {
if (!disabled) {
onSelect(date);
}
},
onMouseEnter: function onMouseEnter() {
if (!disabled) {
onHover === null || onHover === void 0 || onHover(date);
}
},
onMouseLeave: function onMouseLeave() {
if (!disabled) {
onHover === null || onHover === void 0 || onHover(null);
}
}
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(cellPrefixCls, "-inner")
}, generateConfig.locale.getWeek(locale.locale, date)));
} : null;
// ========================= Cells ==========================
// >>> Header Cells
var headerCells = [];
var weekDaysLocale = locale.shortWeekDays || (generateConfig.locale.getShortWeekDays ? generateConfig.locale.getShortWeekDays(locale.locale) : []);
if (prefixColumn) {
headerCells.push( /*#__PURE__*/React.createElement("th", {
key: "empty"
}, /*#__PURE__*/React.createElement("span", {
style: {
width: 0,
height: 0,
position: 'absolute',
overflow: 'hidden',
opacity: 0
}
}, locale.week)));
}
for (var i = 0; i < WEEK_DAY_COUNT; i += 1) {
headerCells.push( /*#__PURE__*/React.createElement("th", {
key: i
}, weekDaysLocale[(i + weekFirstDay) % WEEK_DAY_COUNT]));
}
// >>> Body Cells
var getCellDate = function getCellDate(date, offset) {
return generateConfig.addDate(date, offset);
};
var getCellText = function getCellText(date) {
return formatValue(date, {
locale: locale,
format: locale.cellDateFormat,
generateConfig: generateConfig
});
};
var getCellClassName = function getCellClassName(date) {
var classObj = _defineProperty(_defineProperty({}, "".concat(prefixCls, "-cell-in-view"), isSameMonth(generateConfig, date, pickerValue)), "".concat(prefixCls, "-cell-today"), isSameDate(generateConfig, date, now));
return classObj;
};
// ========================= Header =========================
var monthsLocale = locale.shortMonths || (generateConfig.locale.getShortMonths ? generateConfig.locale.getShortMonths(locale.locale) : []);
var yearNode = /*#__PURE__*/React.createElement("button", {
type: "button",
"aria-label": locale.yearSelect,
key: "year",
onClick: function onClick() {
onModeChange('year', pickerValue);
},
tabIndex: -1,
className: "".concat(prefixCls, "-year-btn")
}, formatValue(pickerValue, {
locale: locale,
format: locale.yearFormat,
generateConfig: generateConfig
}));
var monthNode = /*#__PURE__*/React.createElement("button", {
type: "button",
"aria-label": locale.monthSelect,
key: "month",
onClick: function onClick() {
onModeChange('month', pickerValue);
},
tabIndex: -1,
className: "".concat(prefixCls, "-month-btn")
}, locale.monthFormat ? formatValue(pickerValue, {
locale: locale,
format: locale.monthFormat,
generateConfig: generateConfig
}) : monthsLocale[month]);
var monthYearNodes = locale.monthBeforeYear ? [monthNode, yearNode] : [yearNode, monthNode];
// ========================= Render =========================
return /*#__PURE__*/React.createElement(PanelContext.Provider, {
value: info
}, /*#__PURE__*/React.createElement("div", {
className: classNames(panelPrefixCls, showWeek && "".concat(panelPrefixCls, "-show-week"))
}, /*#__PURE__*/React.createElement(PanelHeader, {
offset: function offset(distance) {
return generateConfig.addMonth(pickerValue, distance);
},
superOffset: function superOffset(distance) {
return generateConfig.addYear(pickerValue, distance);
},
onChange: onPickerValueChange
// Limitation
,
getStart: function getStart(date) {
return generateConfig.setDate(date, 1);
},
getEnd: function getEnd(date) {
var clone = generateConfig.setDate(date, 1);
clone = generateConfig.addMonth(clone, 1);
return generateConfig.addDate(clone, -1);
}
}, monthYearNodes), /*#__PURE__*/React.createElement(PanelBody, _extends({
titleFormat: locale.fieldDateFormat
}, props, {
colNum: WEEK_DAY_COUNT,
rowNum: 6,
baseDate: baseDate
// Header
,
headerCells: headerCells
// Body
,
getCellDate: getCellDate,
getCellText: getCellText,
getCellClassName: getCellClassName,
prefixColumn: prefixColumn,
cellSelection: !isWeek
}))));
}

View File

@@ -0,0 +1,3 @@
import * as React from 'react';
import type { SharedPanelProps } from '../../interface';
export default function DateTimePanel<DateType extends object = any>(props: SharedPanelProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,50 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import useTimeInfo from "../../hooks/useTimeInfo";
import { fillTime } from "../../utils/dateUtil";
import DatePanel from "../DatePanel";
import TimePanel from "../TimePanel";
export default function DateTimePanel(props) {
var prefixCls = props.prefixCls,
generateConfig = props.generateConfig,
showTime = props.showTime,
onSelect = props.onSelect,
value = props.value,
pickerValue = props.pickerValue,
onHover = props.onHover;
var panelPrefixCls = "".concat(prefixCls, "-datetime-panel");
// =============================== Time ===============================
var _useTimeInfo = useTimeInfo(generateConfig, showTime),
_useTimeInfo2 = _slicedToArray(_useTimeInfo, 1),
getValidTime = _useTimeInfo2[0];
// Merge the time info from `value` or `pickerValue`
var mergeTime = function mergeTime(date) {
if (value) {
return fillTime(generateConfig, date, value);
}
return fillTime(generateConfig, date, pickerValue);
};
// ============================== Hover ===============================
var onDateHover = function onDateHover(date) {
onHover === null || onHover === void 0 || onHover(date ? mergeTime(date) : date);
};
// ============================== Select ==============================
var onDateSelect = function onDateSelect(date) {
// Merge with current time
var cloneDate = mergeTime(date);
onSelect(getValidTime(cloneDate, cloneDate));
};
// ============================== Render ==============================
return /*#__PURE__*/React.createElement("div", {
className: panelPrefixCls
}, /*#__PURE__*/React.createElement(DatePanel, _extends({}, props, {
onSelect: onDateSelect,
onHover: onDateHover
})), /*#__PURE__*/React.createElement(TimePanel, props));
}

View File

@@ -0,0 +1,3 @@
import * as React from 'react';
import type { SharedPanelProps } from '../../interface';
export default function DecadePanel<DateType extends object = any>(props: SharedPanelProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,105 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import { formatValue, isInRange, isSameDecade } from "../../utils/dateUtil";
import { PanelContext, useInfo } from "../context";
import PanelBody from "../PanelBody";
import PanelHeader from "../PanelHeader";
export default function DecadePanel(props) {
var prefixCls = props.prefixCls,
locale = props.locale,
generateConfig = props.generateConfig,
pickerValue = props.pickerValue,
disabledDate = props.disabledDate,
onPickerValueChange = props.onPickerValueChange;
var panelPrefixCls = "".concat(prefixCls, "-decade-panel");
// ========================== Base ==========================
var _useInfo = useInfo(props, 'decade'),
_useInfo2 = _slicedToArray(_useInfo, 1),
info = _useInfo2[0];
var getStartYear = function getStartYear(date) {
var startYear = Math.floor(generateConfig.getYear(date) / 100) * 100;
return generateConfig.setYear(date, startYear);
};
var getEndYear = function getEndYear(date) {
var startYear = getStartYear(date);
return generateConfig.addYear(startYear, 99);
};
var startYearDate = getStartYear(pickerValue);
var endYearDate = getEndYear(pickerValue);
var baseDate = generateConfig.addYear(startYearDate, -10);
// ========================= Cells ==========================
var getCellDate = function getCellDate(date, offset) {
return generateConfig.addYear(date, offset * 10);
};
var getCellText = function getCellText(date) {
var cellYearFormat = locale.cellYearFormat;
var startYearStr = formatValue(date, {
locale: locale,
format: cellYearFormat,
generateConfig: generateConfig
});
var endYearStr = formatValue(generateConfig.addYear(date, 9), {
locale: locale,
format: cellYearFormat,
generateConfig: generateConfig
});
return "".concat(startYearStr, "-").concat(endYearStr);
};
var getCellClassName = function getCellClassName(date) {
return _defineProperty({}, "".concat(prefixCls, "-cell-in-view"), isSameDecade(generateConfig, date, startYearDate) || isSameDecade(generateConfig, date, endYearDate) || isInRange(generateConfig, startYearDate, endYearDate, date));
};
// ======================== Disabled ========================
var mergedDisabledDate = disabledDate ? function (currentDate, disabledInfo) {
// Start
var baseStartDate = generateConfig.setDate(currentDate, 1);
var baseStartMonth = generateConfig.setMonth(baseStartDate, 0);
var baseStartYear = generateConfig.setYear(baseStartMonth, Math.floor(generateConfig.getYear(baseStartMonth) / 10) * 10);
// End
var baseEndYear = generateConfig.addYear(baseStartYear, 10);
var baseEndDate = generateConfig.addDate(baseEndYear, -1);
return disabledDate(baseStartYear, disabledInfo) && disabledDate(baseEndDate, disabledInfo);
} : null;
// ========================= Header =========================
var yearNode = "".concat(formatValue(startYearDate, {
locale: locale,
format: locale.yearFormat,
generateConfig: generateConfig
}), "-").concat(formatValue(endYearDate, {
locale: locale,
format: locale.yearFormat,
generateConfig: generateConfig
}));
// ========================= Render =========================
return /*#__PURE__*/React.createElement(PanelContext.Provider, {
value: info
}, /*#__PURE__*/React.createElement("div", {
className: panelPrefixCls
}, /*#__PURE__*/React.createElement(PanelHeader, {
superOffset: function superOffset(distance) {
return generateConfig.addYear(pickerValue, distance * 100);
},
onChange: onPickerValueChange
// Limitation
,
getStart: getStartYear,
getEnd: getEndYear
}, yearNode), /*#__PURE__*/React.createElement(PanelBody, _extends({}, props, {
disabledDate: mergedDisabledDate,
colNum: 3,
rowNum: 4,
baseDate: baseDate
// Body
,
getCellDate: getCellDate,
getCellText: getCellText,
getCellClassName: getCellClassName
}))));
}

View File

@@ -0,0 +1,3 @@
import * as React from 'react';
import type { SharedPanelProps } from '../../interface';
export default function MonthPanel<DateType extends object = any>(props: SharedPanelProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,98 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import { formatValue } from "../../utils/dateUtil";
import { PanelContext, useInfo } from "../context";
import PanelBody from "../PanelBody";
import PanelHeader from "../PanelHeader";
export default function MonthPanel(props) {
var prefixCls = props.prefixCls,
locale = props.locale,
generateConfig = props.generateConfig,
pickerValue = props.pickerValue,
disabledDate = props.disabledDate,
onPickerValueChange = props.onPickerValueChange,
onModeChange = props.onModeChange;
var panelPrefixCls = "".concat(prefixCls, "-month-panel");
// ========================== Base ==========================
var _useInfo = useInfo(props, 'month'),
_useInfo2 = _slicedToArray(_useInfo, 1),
info = _useInfo2[0];
var baseDate = generateConfig.setMonth(pickerValue, 0);
// ========================= Month ==========================
var monthsLocale = locale.shortMonths || (generateConfig.locale.getShortMonths ? generateConfig.locale.getShortMonths(locale.locale) : []);
// ========================= Cells ==========================
var getCellDate = function getCellDate(date, offset) {
return generateConfig.addMonth(date, offset);
};
var getCellText = function getCellText(date) {
var month = generateConfig.getMonth(date);
return locale.monthFormat ? formatValue(date, {
locale: locale,
format: locale.monthFormat,
generateConfig: generateConfig
}) : monthsLocale[month];
};
var getCellClassName = function getCellClassName() {
return _defineProperty({}, "".concat(prefixCls, "-cell-in-view"), true);
};
// ======================== Disabled ========================
var mergedDisabledDate = disabledDate ? function (currentDate, disabledInfo) {
var startDate = generateConfig.setDate(currentDate, 1);
var nextMonthStartDate = generateConfig.setMonth(startDate, generateConfig.getMonth(startDate) + 1);
var endDate = generateConfig.addDate(nextMonthStartDate, -1);
return disabledDate(startDate, disabledInfo) && disabledDate(endDate, disabledInfo);
} : null;
// ========================= Header =========================
var yearNode = /*#__PURE__*/React.createElement("button", {
type: "button",
key: "year",
"aria-label": locale.yearSelect,
onClick: function onClick() {
onModeChange('year');
},
tabIndex: -1,
className: "".concat(prefixCls, "-year-btn")
}, formatValue(pickerValue, {
locale: locale,
format: locale.yearFormat,
generateConfig: generateConfig
}));
// ========================= Render =========================
return /*#__PURE__*/React.createElement(PanelContext.Provider, {
value: info
}, /*#__PURE__*/React.createElement("div", {
className: panelPrefixCls
}, /*#__PURE__*/React.createElement(PanelHeader, {
superOffset: function superOffset(distance) {
return generateConfig.addYear(pickerValue, distance);
},
onChange: onPickerValueChange
// Limitation
,
getStart: function getStart(date) {
return generateConfig.setMonth(date, 0);
},
getEnd: function getEnd(date) {
return generateConfig.setMonth(date, 11);
}
}, yearNode), /*#__PURE__*/React.createElement(PanelBody, _extends({}, props, {
disabledDate: mergedDisabledDate,
titleFormat: locale.fieldMonthFormat,
colNum: 3,
rowNum: 4,
baseDate: baseDate
// Body
,
getCellDate: getCellDate,
getCellText: getCellText,
getCellClassName: getCellClassName
}))));
}

17
node_modules/rc-picker/es/PickerPanel/PanelBody.d.ts generated vendored Normal file
View File

@@ -0,0 +1,17 @@
import * as React from 'react';
import type { DisabledDate } from '../interface';
export interface PanelBodyProps<DateType = any> {
rowNum: number;
colNum: number;
baseDate: DateType;
titleFormat?: string;
getCellDate: (date: DateType, offset: number) => DateType;
getCellText: (date: DateType) => React.ReactNode;
getCellClassName: (date: DateType) => Record<string, any>;
disabledDate?: DisabledDate<DateType>;
headerCells?: React.ReactNode[];
prefixColumn?: (date: DateType) => React.ReactNode;
rowClassName?: (date: DateType) => string;
cellSelection?: boolean;
}
export default function PanelBody<DateType extends object = any>(props: PanelBodyProps<DateType>): React.JSX.Element;

144
node_modules/rc-picker/es/PickerPanel/PanelBody.js generated vendored Normal file
View File

@@ -0,0 +1,144 @@
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import classNames from 'classnames';
import * as React from 'react';
import { formatValue, isInRange, isSame } from "../utils/dateUtil";
import { PickerHackContext, usePanelContext } from "./context";
export default function PanelBody(props) {
var rowNum = props.rowNum,
colNum = props.colNum,
baseDate = props.baseDate,
getCellDate = props.getCellDate,
prefixColumn = props.prefixColumn,
rowClassName = props.rowClassName,
titleFormat = props.titleFormat,
getCellText = props.getCellText,
getCellClassName = props.getCellClassName,
headerCells = props.headerCells,
_props$cellSelection = props.cellSelection,
cellSelection = _props$cellSelection === void 0 ? true : _props$cellSelection,
disabledDate = props.disabledDate;
var _usePanelContext = usePanelContext(),
prefixCls = _usePanelContext.prefixCls,
type = _usePanelContext.panelType,
now = _usePanelContext.now,
contextDisabledDate = _usePanelContext.disabledDate,
cellRender = _usePanelContext.cellRender,
onHover = _usePanelContext.onHover,
hoverValue = _usePanelContext.hoverValue,
hoverRangeValue = _usePanelContext.hoverRangeValue,
generateConfig = _usePanelContext.generateConfig,
values = _usePanelContext.values,
locale = _usePanelContext.locale,
onSelect = _usePanelContext.onSelect;
var mergedDisabledDate = disabledDate || contextDisabledDate;
var cellPrefixCls = "".concat(prefixCls, "-cell");
// ============================= Context ==============================
var _React$useContext = React.useContext(PickerHackContext),
onCellDblClick = _React$useContext.onCellDblClick;
// ============================== Value ===============================
var matchValues = function matchValues(date) {
return values.some(function (singleValue) {
return singleValue && isSame(generateConfig, locale, date, singleValue, type);
});
};
// =============================== Body ===============================
var rows = [];
for (var row = 0; row < rowNum; row += 1) {
var rowNode = [];
var rowStartDate = void 0;
var _loop = function _loop() {
var offset = row * colNum + col;
var currentDate = getCellDate(baseDate, offset);
var disabled = mergedDisabledDate === null || mergedDisabledDate === void 0 ? void 0 : mergedDisabledDate(currentDate, {
type: type
});
// Row Start Cell
if (col === 0) {
rowStartDate = currentDate;
if (prefixColumn) {
rowNode.push(prefixColumn(rowStartDate));
}
}
// Range
var inRange = false;
var rangeStart = false;
var rangeEnd = false;
if (cellSelection && hoverRangeValue) {
var _hoverRangeValue = _slicedToArray(hoverRangeValue, 2),
hoverStart = _hoverRangeValue[0],
hoverEnd = _hoverRangeValue[1];
inRange = isInRange(generateConfig, hoverStart, hoverEnd, currentDate);
rangeStart = isSame(generateConfig, locale, currentDate, hoverStart, type);
rangeEnd = isSame(generateConfig, locale, currentDate, hoverEnd, type);
}
// Title
var title = titleFormat ? formatValue(currentDate, {
locale: locale,
format: titleFormat,
generateConfig: generateConfig
}) : undefined;
// Render
var inner = /*#__PURE__*/React.createElement("div", {
className: "".concat(cellPrefixCls, "-inner")
}, getCellText(currentDate));
rowNode.push( /*#__PURE__*/React.createElement("td", {
key: col,
title: title,
className: classNames(cellPrefixCls, _objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-disabled"), disabled), "".concat(cellPrefixCls, "-hover"), (hoverValue || []).some(function (date) {
return isSame(generateConfig, locale, currentDate, date, type);
})), "".concat(cellPrefixCls, "-in-range"), inRange && !rangeStart && !rangeEnd), "".concat(cellPrefixCls, "-range-start"), rangeStart), "".concat(cellPrefixCls, "-range-end"), rangeEnd), "".concat(prefixCls, "-cell-selected"), !hoverRangeValue &&
// WeekPicker use row instead
type !== 'week' && matchValues(currentDate)), getCellClassName(currentDate))),
onClick: function onClick() {
if (!disabled) {
onSelect(currentDate);
}
},
onDoubleClick: function onDoubleClick() {
if (!disabled && onCellDblClick) {
onCellDblClick();
}
},
onMouseEnter: function onMouseEnter() {
if (!disabled) {
onHover === null || onHover === void 0 || onHover(currentDate);
}
},
onMouseLeave: function onMouseLeave() {
if (!disabled) {
onHover === null || onHover === void 0 || onHover(null);
}
}
}, cellRender ? cellRender(currentDate, {
prefixCls: prefixCls,
originNode: inner,
today: now,
type: type,
locale: locale
}) : inner));
};
for (var col = 0; col < colNum; col += 1) {
_loop();
}
rows.push( /*#__PURE__*/React.createElement("tr", {
key: row,
className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(rowStartDate)
}, rowNode));
}
// ============================== Render ==============================
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-body")
}, /*#__PURE__*/React.createElement("table", {
className: "".concat(prefixCls, "-content")
}, headerCells && /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, headerCells)), /*#__PURE__*/React.createElement("tbody", null, rows)));
}

11
node_modules/rc-picker/es/PickerPanel/PanelHeader.d.ts generated vendored Normal file
View File

@@ -0,0 +1,11 @@
import * as React from 'react';
export interface HeaderProps<DateType extends object> {
offset?: (distance: number, date: DateType) => DateType;
superOffset?: (distance: number, date: DateType) => DateType;
onChange?: (date: DateType) => void;
getStart?: (date: DateType) => DateType;
getEnd?: (date: DateType) => DateType;
children?: React.ReactNode;
}
declare function PanelHeader<DateType extends object>(props: HeaderProps<DateType>): React.JSX.Element;
export default PanelHeader;

133
node_modules/rc-picker/es/PickerPanel/PanelHeader.js generated vendored Normal file
View File

@@ -0,0 +1,133 @@
import classNames from 'classnames';
import * as React from 'react';
import { isSameOrAfter } from "../utils/dateUtil";
import { PickerHackContext, usePanelContext } from "./context";
var HIDDEN_STYLE = {
visibility: 'hidden'
};
function PanelHeader(props) {
var offset = props.offset,
superOffset = props.superOffset,
onChange = props.onChange,
getStart = props.getStart,
getEnd = props.getEnd,
children = props.children;
var _usePanelContext = usePanelContext(),
prefixCls = _usePanelContext.prefixCls,
_usePanelContext$prev = _usePanelContext.prevIcon,
prevIcon = _usePanelContext$prev === void 0 ? "\u2039" : _usePanelContext$prev,
_usePanelContext$next = _usePanelContext.nextIcon,
nextIcon = _usePanelContext$next === void 0 ? "\u203A" : _usePanelContext$next,
_usePanelContext$supe = _usePanelContext.superPrevIcon,
superPrevIcon = _usePanelContext$supe === void 0 ? "\xAB" : _usePanelContext$supe,
_usePanelContext$supe2 = _usePanelContext.superNextIcon,
superNextIcon = _usePanelContext$supe2 === void 0 ? "\xBB" : _usePanelContext$supe2,
minDate = _usePanelContext.minDate,
maxDate = _usePanelContext.maxDate,
generateConfig = _usePanelContext.generateConfig,
locale = _usePanelContext.locale,
pickerValue = _usePanelContext.pickerValue,
type = _usePanelContext.panelType;
var headerPrefixCls = "".concat(prefixCls, "-header");
var _React$useContext = React.useContext(PickerHackContext),
hidePrev = _React$useContext.hidePrev,
hideNext = _React$useContext.hideNext,
hideHeader = _React$useContext.hideHeader;
// ======================= Limitation =======================
var disabledOffsetPrev = React.useMemo(function () {
if (!minDate || !offset || !getEnd) {
return false;
}
var prevPanelLimitDate = getEnd(offset(-1, pickerValue));
return !isSameOrAfter(generateConfig, locale, prevPanelLimitDate, minDate, type);
}, [minDate, offset, pickerValue, getEnd, generateConfig, locale, type]);
var disabledSuperOffsetPrev = React.useMemo(function () {
if (!minDate || !superOffset || !getEnd) {
return false;
}
var prevPanelLimitDate = getEnd(superOffset(-1, pickerValue));
return !isSameOrAfter(generateConfig, locale, prevPanelLimitDate, minDate, type);
}, [minDate, superOffset, pickerValue, getEnd, generateConfig, locale, type]);
var disabledOffsetNext = React.useMemo(function () {
if (!maxDate || !offset || !getStart) {
return false;
}
var nextPanelLimitDate = getStart(offset(1, pickerValue));
return !isSameOrAfter(generateConfig, locale, maxDate, nextPanelLimitDate, type);
}, [maxDate, offset, pickerValue, getStart, generateConfig, locale, type]);
var disabledSuperOffsetNext = React.useMemo(function () {
if (!maxDate || !superOffset || !getStart) {
return false;
}
var nextPanelLimitDate = getStart(superOffset(1, pickerValue));
return !isSameOrAfter(generateConfig, locale, maxDate, nextPanelLimitDate, type);
}, [maxDate, superOffset, pickerValue, getStart, generateConfig, locale, type]);
// ========================= Offset =========================
var onOffset = function onOffset(distance) {
if (offset) {
onChange(offset(distance, pickerValue));
}
};
var onSuperOffset = function onSuperOffset(distance) {
if (superOffset) {
onChange(superOffset(distance, pickerValue));
}
};
// ========================= Render =========================
if (hideHeader) {
return null;
}
var prevBtnCls = "".concat(headerPrefixCls, "-prev-btn");
var nextBtnCls = "".concat(headerPrefixCls, "-next-btn");
var superPrevBtnCls = "".concat(headerPrefixCls, "-super-prev-btn");
var superNextBtnCls = "".concat(headerPrefixCls, "-super-next-btn");
return /*#__PURE__*/React.createElement("div", {
className: headerPrefixCls
}, superOffset && /*#__PURE__*/React.createElement("button", {
type: "button",
"aria-label": locale.previousYear,
onClick: function onClick() {
return onSuperOffset(-1);
},
tabIndex: -1,
className: classNames(superPrevBtnCls, disabledSuperOffsetPrev && "".concat(superPrevBtnCls, "-disabled")),
disabled: disabledSuperOffsetPrev,
style: hidePrev ? HIDDEN_STYLE : {}
}, superPrevIcon), offset && /*#__PURE__*/React.createElement("button", {
type: "button",
"aria-label": locale.previousMonth,
onClick: function onClick() {
return onOffset(-1);
},
tabIndex: -1,
className: classNames(prevBtnCls, disabledOffsetPrev && "".concat(prevBtnCls, "-disabled")),
disabled: disabledOffsetPrev,
style: hidePrev ? HIDDEN_STYLE : {}
}, prevIcon), /*#__PURE__*/React.createElement("div", {
className: "".concat(headerPrefixCls, "-view")
}, children), offset && /*#__PURE__*/React.createElement("button", {
type: "button",
"aria-label": locale.nextMonth,
onClick: function onClick() {
return onOffset(1);
},
tabIndex: -1,
className: classNames(nextBtnCls, disabledOffsetNext && "".concat(nextBtnCls, "-disabled")),
disabled: disabledOffsetNext,
style: hideNext ? HIDDEN_STYLE : {}
}, nextIcon), superOffset && /*#__PURE__*/React.createElement("button", {
type: "button",
"aria-label": locale.nextYear,
onClick: function onClick() {
return onSuperOffset(1);
},
tabIndex: -1,
className: classNames(superNextBtnCls, disabledSuperOffsetNext && "".concat(superNextBtnCls, "-disabled")),
disabled: disabledSuperOffsetNext,
style: hideNext ? HIDDEN_STYLE : {}
}, superNextIcon));
}
export default PanelHeader;

View File

@@ -0,0 +1,3 @@
import * as React from 'react';
import type { SharedPanelProps } from '../../interface';
export default function QuarterPanel<DateType extends object = any>(props: SharedPanelProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,84 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import { formatValue } from "../../utils/dateUtil";
import { PanelContext, useInfo } from "../context";
import PanelBody from "../PanelBody";
import PanelHeader from "../PanelHeader";
export default function QuarterPanel(props) {
var prefixCls = props.prefixCls,
locale = props.locale,
generateConfig = props.generateConfig,
pickerValue = props.pickerValue,
onPickerValueChange = props.onPickerValueChange,
onModeChange = props.onModeChange;
var panelPrefixCls = "".concat(prefixCls, "-quarter-panel");
// ========================== Base ==========================
var _useInfo = useInfo(props, 'quarter'),
_useInfo2 = _slicedToArray(_useInfo, 1),
info = _useInfo2[0];
var baseDate = generateConfig.setMonth(pickerValue, 0);
// ========================= Cells ==========================
var getCellDate = function getCellDate(date, offset) {
return generateConfig.addMonth(date, offset * 3);
};
var getCellText = function getCellText(date) {
return formatValue(date, {
locale: locale,
format: locale.cellQuarterFormat,
generateConfig: generateConfig
});
};
var getCellClassName = function getCellClassName() {
return _defineProperty({}, "".concat(prefixCls, "-cell-in-view"), true);
};
// ========================= Header =========================
var yearNode = /*#__PURE__*/React.createElement("button", {
type: "button",
key: "year",
"aria-label": locale.yearSelect,
onClick: function onClick() {
onModeChange('year');
},
tabIndex: -1,
className: "".concat(prefixCls, "-year-btn")
}, formatValue(pickerValue, {
locale: locale,
format: locale.yearFormat,
generateConfig: generateConfig
}));
// ========================= Render =========================
return /*#__PURE__*/React.createElement(PanelContext.Provider, {
value: info
}, /*#__PURE__*/React.createElement("div", {
className: panelPrefixCls
}, /*#__PURE__*/React.createElement(PanelHeader, {
superOffset: function superOffset(distance) {
return generateConfig.addYear(pickerValue, distance);
},
onChange: onPickerValueChange
// Limitation
,
getStart: function getStart(date) {
return generateConfig.setMonth(date, 0);
},
getEnd: function getEnd(date) {
return generateConfig.setMonth(date, 11);
}
}, yearNode), /*#__PURE__*/React.createElement(PanelBody, _extends({}, props, {
titleFormat: locale.fieldQuarterFormat,
colNum: 4,
rowNum: 1,
baseDate: baseDate
// Body
,
getCellDate: getCellDate,
getCellText: getCellText,
getCellClassName: getCellClassName
}))));
}

View File

@@ -0,0 +1,17 @@
import * as React from 'react';
export type Unit<ValueType = number | string> = {
label: React.ReactText;
value: ValueType;
disabled?: boolean;
};
export interface TimeUnitColumnProps {
units: Unit[];
value: number | string;
optionalValue?: number | string;
type: 'hour' | 'minute' | 'second' | 'millisecond' | 'meridiem';
onChange: (value: number | string) => void;
onHover: (value: number | string) => void;
onDblClick?: VoidFunction;
changeOnScroll?: boolean;
}
export default function TimeColumn<DateType extends object>(props: TimeUnitColumnProps): React.JSX.Element;

View File

@@ -0,0 +1,138 @@
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import classNames from 'classnames';
import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
import * as React from 'react';
import { usePanelContext } from "../../context";
import useScrollTo from "./useScrollTo";
var SCROLL_DELAY = 300;
// Not use JSON.stringify to avoid dead loop
function flattenUnits(units) {
return units.map(function (_ref) {
var value = _ref.value,
label = _ref.label,
disabled = _ref.disabled;
return [value, label, disabled].join(',');
}).join(';');
}
export default function TimeColumn(props) {
var units = props.units,
value = props.value,
optionalValue = props.optionalValue,
type = props.type,
onChange = props.onChange,
onHover = props.onHover,
onDblClick = props.onDblClick,
changeOnScroll = props.changeOnScroll;
var _usePanelContext = usePanelContext(),
prefixCls = _usePanelContext.prefixCls,
cellRender = _usePanelContext.cellRender,
now = _usePanelContext.now,
locale = _usePanelContext.locale;
var panelPrefixCls = "".concat(prefixCls, "-time-panel");
var cellPrefixCls = "".concat(prefixCls, "-time-panel-cell");
// ========================== Refs ==========================
var ulRef = React.useRef(null);
// ========================= Scroll =========================
var checkDelayRef = React.useRef();
var clearDelayCheck = function clearDelayCheck() {
clearTimeout(checkDelayRef.current);
};
// ========================== Sync ==========================
var _useScrollTo = useScrollTo(ulRef, value !== null && value !== void 0 ? value : optionalValue),
_useScrollTo2 = _slicedToArray(_useScrollTo, 3),
syncScroll = _useScrollTo2[0],
stopScroll = _useScrollTo2[1],
isScrolling = _useScrollTo2[2];
// Effect sync value scroll
useLayoutEffect(function () {
syncScroll();
clearDelayCheck();
return function () {
stopScroll();
clearDelayCheck();
};
}, [value, optionalValue, flattenUnits(units)]);
// ========================= Change =========================
// Scroll event if sync onScroll
var onInternalScroll = function onInternalScroll(event) {
clearDelayCheck();
var target = event.target;
if (!isScrolling() && changeOnScroll) {
checkDelayRef.current = setTimeout(function () {
var ul = ulRef.current;
var firstLiTop = ul.querySelector("li").offsetTop;
var liList = Array.from(ul.querySelectorAll("li"));
var liTopList = liList.map(function (li) {
return li.offsetTop - firstLiTop;
});
var liDistList = liTopList.map(function (top, index) {
if (units[index].disabled) {
return Number.MAX_SAFE_INTEGER;
}
return Math.abs(top - target.scrollTop);
});
// Find min distance index
var minDist = Math.min.apply(Math, _toConsumableArray(liDistList));
var minDistIndex = liDistList.findIndex(function (dist) {
return dist === minDist;
});
var targetUnit = units[minDistIndex];
if (targetUnit && !targetUnit.disabled) {
onChange(targetUnit.value);
}
}, SCROLL_DELAY);
}
};
// ========================= Render =========================
var columnPrefixCls = "".concat(panelPrefixCls, "-column");
return /*#__PURE__*/React.createElement("ul", {
className: columnPrefixCls,
ref: ulRef,
"data-type": type,
onScroll: onInternalScroll
}, units.map(function (_ref2) {
var label = _ref2.label,
unitValue = _ref2.value,
disabled = _ref2.disabled;
var inner = /*#__PURE__*/React.createElement("div", {
className: "".concat(cellPrefixCls, "-inner")
}, label);
return /*#__PURE__*/React.createElement("li", {
key: unitValue,
className: classNames(cellPrefixCls, _defineProperty(_defineProperty({}, "".concat(cellPrefixCls, "-selected"), value === unitValue), "".concat(cellPrefixCls, "-disabled"), disabled)),
onClick: function onClick() {
if (!disabled) {
onChange(unitValue);
}
},
onDoubleClick: function onDoubleClick() {
if (!disabled && onDblClick) {
onDblClick();
}
},
onMouseEnter: function onMouseEnter() {
onHover(unitValue);
},
onMouseLeave: function onMouseLeave() {
onHover(null);
},
"data-value": unitValue
}, cellRender ? cellRender(unitValue, {
prefixCls: prefixCls,
originNode: inner,
today: now,
type: 'time',
subType: type,
locale: locale
}) : inner);
}));
}

View File

@@ -0,0 +1,4 @@
import * as React from 'react';
import type { SharedPanelProps, SharedTimeProps } from '../../../interface';
export type TimePanelBodyProps<DateType extends object = any> = SharedPanelProps<DateType>;
export default function TimePanelBody<DateType extends object = any>(props: SharedTimeProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,278 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import useTimeInfo from "../../../hooks/useTimeInfo";
import { formatValue } from "../../../utils/dateUtil";
import { PickerHackContext, usePanelContext } from "../../context";
import TimeColumn from "./TimeColumn";
function isAM(hour) {
return hour < 12;
}
export default function TimePanelBody(props) {
var showHour = props.showHour,
showMinute = props.showMinute,
showSecond = props.showSecond,
showMillisecond = props.showMillisecond,
showMeridiem = props.use12Hours,
changeOnScroll = props.changeOnScroll;
var _usePanelContext = usePanelContext(),
prefixCls = _usePanelContext.prefixCls,
values = _usePanelContext.values,
generateConfig = _usePanelContext.generateConfig,
locale = _usePanelContext.locale,
onSelect = _usePanelContext.onSelect,
_usePanelContext$onHo = _usePanelContext.onHover,
onHover = _usePanelContext$onHo === void 0 ? function () {} : _usePanelContext$onHo,
pickerValue = _usePanelContext.pickerValue;
var value = (values === null || values === void 0 ? void 0 : values[0]) || null;
var _React$useContext = React.useContext(PickerHackContext),
onCellDblClick = _React$useContext.onCellDblClick;
// ========================== Info ==========================
var _useTimeInfo = useTimeInfo(generateConfig, props, value),
_useTimeInfo2 = _slicedToArray(_useTimeInfo, 5),
getValidTime = _useTimeInfo2[0],
rowHourUnits = _useTimeInfo2[1],
getMinuteUnits = _useTimeInfo2[2],
getSecondUnits = _useTimeInfo2[3],
getMillisecondUnits = _useTimeInfo2[4];
// ========================= Value ==========================
// PickerValue will tell which one to align on the top
var getUnitValue = function getUnitValue(func) {
var valueUnitVal = value && generateConfig[func](value);
var pickerUnitValue = pickerValue && generateConfig[func](pickerValue);
return [valueUnitVal, pickerUnitValue];
};
var _getUnitValue = getUnitValue('getHour'),
_getUnitValue2 = _slicedToArray(_getUnitValue, 2),
hour = _getUnitValue2[0],
pickerHour = _getUnitValue2[1];
var _getUnitValue3 = getUnitValue('getMinute'),
_getUnitValue4 = _slicedToArray(_getUnitValue3, 2),
minute = _getUnitValue4[0],
pickerMinute = _getUnitValue4[1];
var _getUnitValue5 = getUnitValue('getSecond'),
_getUnitValue6 = _slicedToArray(_getUnitValue5, 2),
second = _getUnitValue6[0],
pickerSecond = _getUnitValue6[1];
var _getUnitValue7 = getUnitValue('getMillisecond'),
_getUnitValue8 = _slicedToArray(_getUnitValue7, 2),
millisecond = _getUnitValue8[0],
pickerMillisecond = _getUnitValue8[1];
var meridiem = hour === null ? null : isAM(hour) ? 'am' : 'pm';
// ========================= Column =========================
// Hours
var hourUnits = React.useMemo(function () {
if (!showMeridiem) {
return rowHourUnits;
}
return isAM(hour) ? rowHourUnits.filter(function (h) {
return isAM(h.value);
}) : rowHourUnits.filter(function (h) {
return !isAM(h.value);
});
}, [hour, rowHourUnits, showMeridiem]);
// >>> Pick Fallback
var getEnabled = function getEnabled(units, val) {
var _enabledUnits$;
var enabledUnits = units.filter(function (unit) {
return !unit.disabled;
});
return val !== null && val !== void 0 ? val : // Fallback to enabled value
enabledUnits === null || enabledUnits === void 0 || (_enabledUnits$ = enabledUnits[0]) === null || _enabledUnits$ === void 0 ? void 0 : _enabledUnits$.value;
};
// >>> Minutes
var validHour = getEnabled(rowHourUnits, hour);
var minuteUnits = React.useMemo(function () {
return getMinuteUnits(validHour);
}, [getMinuteUnits, validHour]);
// >>> Seconds
var validMinute = getEnabled(minuteUnits, minute);
var secondUnits = React.useMemo(function () {
return getSecondUnits(validHour, validMinute);
}, [getSecondUnits, validHour, validMinute]);
// >>> Milliseconds
var validSecond = getEnabled(secondUnits, second);
var millisecondUnits = React.useMemo(function () {
return getMillisecondUnits(validHour, validMinute, validSecond);
}, [getMillisecondUnits, validHour, validMinute, validSecond]);
var validMillisecond = getEnabled(millisecondUnits, millisecond);
// Meridiem
var meridiemUnits = React.useMemo(function () {
if (!showMeridiem) {
return [];
}
var base = generateConfig.getNow();
var amDate = generateConfig.setHour(base, 6);
var pmDate = generateConfig.setHour(base, 18);
var formatMeridiem = function formatMeridiem(date, defaultLabel) {
var cellMeridiemFormat = locale.cellMeridiemFormat;
return cellMeridiemFormat ? formatValue(date, {
generateConfig: generateConfig,
locale: locale,
format: cellMeridiemFormat
}) : defaultLabel;
};
return [{
label: formatMeridiem(amDate, 'AM'),
value: 'am',
disabled: rowHourUnits.every(function (h) {
return h.disabled || !isAM(h.value);
})
}, {
label: formatMeridiem(pmDate, 'PM'),
value: 'pm',
disabled: rowHourUnits.every(function (h) {
return h.disabled || isAM(h.value);
})
}];
}, [rowHourUnits, showMeridiem, generateConfig, locale]);
// ========================= Change =========================
/**
* Check if time is validate or will match to validate one
*/
var triggerChange = function triggerChange(nextDate) {
var validateDate = getValidTime(nextDate);
onSelect(validateDate);
};
// ========================= Column =========================
// Create a template date for the trigger change event
var triggerDateTmpl = React.useMemo(function () {
var tmpl = value || pickerValue || generateConfig.getNow();
var isNotNull = function isNotNull(num) {
return num !== null && num !== undefined;
};
if (isNotNull(hour)) {
tmpl = generateConfig.setHour(tmpl, hour);
tmpl = generateConfig.setMinute(tmpl, minute);
tmpl = generateConfig.setSecond(tmpl, second);
tmpl = generateConfig.setMillisecond(tmpl, millisecond);
} else if (isNotNull(pickerHour)) {
tmpl = generateConfig.setHour(tmpl, pickerHour);
tmpl = generateConfig.setMinute(tmpl, pickerMinute);
tmpl = generateConfig.setSecond(tmpl, pickerSecond);
tmpl = generateConfig.setMillisecond(tmpl, pickerMillisecond);
} else if (isNotNull(validHour)) {
tmpl = generateConfig.setHour(tmpl, validHour);
tmpl = generateConfig.setMinute(tmpl, validMinute);
tmpl = generateConfig.setSecond(tmpl, validSecond);
tmpl = generateConfig.setMillisecond(tmpl, validMillisecond);
}
return tmpl;
}, [value, pickerValue, hour, minute, second, millisecond, validHour, validMinute, validSecond, validMillisecond, pickerHour, pickerMinute, pickerSecond, pickerMillisecond, generateConfig]);
// ===================== Columns Change =====================
var fillColumnValue = function fillColumnValue(val, func) {
if (val === null) {
return null;
}
return generateConfig[func](triggerDateTmpl, val);
};
var getNextHourTime = function getNextHourTime(val) {
return fillColumnValue(val, 'setHour');
};
var getNextMinuteTime = function getNextMinuteTime(val) {
return fillColumnValue(val, 'setMinute');
};
var getNextSecondTime = function getNextSecondTime(val) {
return fillColumnValue(val, 'setSecond');
};
var getNextMillisecondTime = function getNextMillisecondTime(val) {
return fillColumnValue(val, 'setMillisecond');
};
var getMeridiemTime = function getMeridiemTime(val) {
if (val === null) {
return null;
}
if (val === 'am' && !isAM(hour)) {
return generateConfig.setHour(triggerDateTmpl, hour - 12);
} else if (val === 'pm' && isAM(hour)) {
return generateConfig.setHour(triggerDateTmpl, hour + 12);
}
return triggerDateTmpl;
};
var onHourChange = function onHourChange(val) {
triggerChange(getNextHourTime(val));
};
var onMinuteChange = function onMinuteChange(val) {
triggerChange(getNextMinuteTime(val));
};
var onSecondChange = function onSecondChange(val) {
triggerChange(getNextSecondTime(val));
};
var onMillisecondChange = function onMillisecondChange(val) {
triggerChange(getNextMillisecondTime(val));
};
var onMeridiemChange = function onMeridiemChange(val) {
triggerChange(getMeridiemTime(val));
};
// ====================== Column Hover ======================
var onHourHover = function onHourHover(val) {
onHover(getNextHourTime(val));
};
var onMinuteHover = function onMinuteHover(val) {
onHover(getNextMinuteTime(val));
};
var onSecondHover = function onSecondHover(val) {
onHover(getNextSecondTime(val));
};
var onMillisecondHover = function onMillisecondHover(val) {
onHover(getNextMillisecondTime(val));
};
var onMeridiemHover = function onMeridiemHover(val) {
onHover(getMeridiemTime(val));
};
// ========================= Render =========================
var sharedColumnProps = {
onDblClick: onCellDblClick,
changeOnScroll: changeOnScroll
};
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-content")
}, showHour && /*#__PURE__*/React.createElement(TimeColumn, _extends({
units: hourUnits,
value: hour,
optionalValue: pickerHour,
type: "hour",
onChange: onHourChange,
onHover: onHourHover
}, sharedColumnProps)), showMinute && /*#__PURE__*/React.createElement(TimeColumn, _extends({
units: minuteUnits,
value: minute,
optionalValue: pickerMinute,
type: "minute",
onChange: onMinuteChange,
onHover: onMinuteHover
}, sharedColumnProps)), showSecond && /*#__PURE__*/React.createElement(TimeColumn, _extends({
units: secondUnits,
value: second,
optionalValue: pickerSecond,
type: "second",
onChange: onSecondChange,
onHover: onSecondHover
}, sharedColumnProps)), showMillisecond && /*#__PURE__*/React.createElement(TimeColumn, _extends({
units: millisecondUnits,
value: millisecond,
optionalValue: pickerMillisecond,
type: "millisecond",
onChange: onMillisecondChange,
onHover: onMillisecondHover
}, sharedColumnProps)), showMeridiem && /*#__PURE__*/React.createElement(TimeColumn, _extends({
units: meridiemUnits,
value: meridiem,
type: "meridiem",
onChange: onMeridiemChange,
onHover: onMeridiemHover
}, sharedColumnProps)));
}

View File

@@ -0,0 +1,2 @@
import * as React from 'react';
export default function useScrollTo(ulRef: React.RefObject<HTMLUListElement>, value: number | string): [syncScroll: VoidFunction, clearScroll: VoidFunction, isScrolling: () => boolean];

View File

@@ -0,0 +1,72 @@
import { useEvent } from 'rc-util';
import raf from "rc-util/es/raf";
import isVisible from "rc-util/es/Dom/isVisible";
import * as React from 'react';
var SPEED_PTG = 1 / 3;
export default function useScrollTo(ulRef, value) {
// ========================= Scroll =========================
var scrollingRef = React.useRef(false);
var scrollRafRef = React.useRef(null);
var scrollDistRef = React.useRef(null);
var isScrolling = function isScrolling() {
return scrollingRef.current;
};
var stopScroll = function stopScroll() {
raf.cancel(scrollRafRef.current);
scrollingRef.current = false;
};
var scrollRafTimesRef = React.useRef();
var startScroll = function startScroll() {
var ul = ulRef.current;
scrollDistRef.current = null;
scrollRafTimesRef.current = 0;
if (ul) {
var targetLi = ul.querySelector("[data-value=\"".concat(value, "\"]"));
var firstLi = ul.querySelector("li");
var doScroll = function doScroll() {
stopScroll();
scrollingRef.current = true;
scrollRafTimesRef.current += 1;
var currentTop = ul.scrollTop;
var firstLiTop = firstLi.offsetTop;
var targetLiTop = targetLi.offsetTop;
var targetTop = targetLiTop - firstLiTop;
// Wait for element exist. 5 frames is enough
if (targetLiTop === 0 && targetLi !== firstLi || !isVisible(ul)) {
if (scrollRafTimesRef.current <= 5) {
scrollRafRef.current = raf(doScroll);
}
return;
}
var nextTop = currentTop + (targetTop - currentTop) * SPEED_PTG;
var dist = Math.abs(targetTop - nextTop);
// Break if dist get larger, which means user is scrolling
if (scrollDistRef.current !== null && scrollDistRef.current < dist) {
stopScroll();
return;
}
scrollDistRef.current = dist;
// Stop when dist is less than 1
if (dist <= 1) {
ul.scrollTop = targetTop;
stopScroll();
return;
}
// IE not support `scrollTo`
ul.scrollTop = nextTop;
scrollRafRef.current = raf(doScroll);
};
if (targetLi && firstLi) {
doScroll();
}
}
};
// ======================== Trigger =========================
var syncScroll = useEvent(startScroll);
return [syncScroll, stopScroll, isScrolling];
}

View File

@@ -0,0 +1,3 @@
import type { GenerateConfig } from '../../../generate';
import type { Unit } from './TimeColumn';
export declare function findValidateTime<DateType>(date: DateType, getHourUnits: () => Unit<number>[], getMinuteUnits: (hour: number) => Unit<number>[], getSecondUnits: (hour: number, minute: number) => Unit<number>[], getMillisecondUnits: (hour: number, minute: number, second: number) => Unit<number>[], generateConfig: GenerateConfig<DateType>): DateType;

View File

@@ -0,0 +1,38 @@
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
export function findValidateTime(date, getHourUnits, getMinuteUnits, getSecondUnits, getMillisecondUnits, generateConfig) {
var nextDate = date;
function alignValidate(getUnitValue, setUnitValue, units) {
var nextValue = generateConfig[getUnitValue](nextDate);
var nextUnit = units.find(function (unit) {
return unit.value === nextValue;
});
if (!nextUnit || nextUnit.disabled) {
// Find most closest unit
var validateUnits = units.filter(function (unit) {
return !unit.disabled;
});
var reverseEnabledUnits = _toConsumableArray(validateUnits).reverse();
var validateUnit = reverseEnabledUnits.find(function (unit) {
return unit.value <= nextValue;
}) || validateUnits[0];
if (validateUnit) {
nextValue = validateUnit.value;
nextDate = generateConfig[setUnitValue](nextDate, nextValue);
}
}
return nextValue;
}
// Find validate hour
var nextHour = alignValidate('getHour', 'setHour', getHourUnits());
// Find validate minute
var nextMinute = alignValidate('getMinute', 'setMinute', getMinuteUnits(nextHour));
// Find validate second
var nextSecond = alignValidate('getSecond', 'setSecond', getSecondUnits(nextHour, nextMinute));
// Find validate millisecond
alignValidate('getMillisecond', 'setMillisecond', getMillisecondUnits(nextHour, nextMinute, nextSecond));
return nextDate;
}

View File

@@ -0,0 +1,4 @@
import * as React from 'react';
import type { SharedPanelProps } from '../../interface';
export type TimePanelProps<DateType extends object> = SharedPanelProps<DateType>;
export default function TimePanel<DateType extends object = any>(props: TimePanelProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,33 @@
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import classNames from 'classnames';
import * as React from 'react';
import { formatValue } from "../../utils/dateUtil";
import { PanelContext, useInfo } from "../context";
import PanelHeader from "../PanelHeader";
import TimePanelBody from "./TimePanelBody";
export default function TimePanel(props) {
var prefixCls = props.prefixCls,
value = props.value,
locale = props.locale,
generateConfig = props.generateConfig,
showTime = props.showTime;
var _ref = showTime || {},
format = _ref.format;
var panelPrefixCls = "".concat(prefixCls, "-time-panel");
// ========================== Base ==========================
var _useInfo = useInfo(props, 'time'),
_useInfo2 = _slicedToArray(_useInfo, 1),
info = _useInfo2[0];
// ========================= Render =========================
return /*#__PURE__*/React.createElement(PanelContext.Provider, {
value: info
}, /*#__PURE__*/React.createElement("div", {
className: classNames(panelPrefixCls)
}, /*#__PURE__*/React.createElement(PanelHeader, null, value ? formatValue(value, {
locale: locale,
format: format,
generateConfig: generateConfig
}) : "\xA0"), /*#__PURE__*/React.createElement(TimePanelBody, showTime)));
}

View File

@@ -0,0 +1,3 @@
import * as React from 'react';
import type { SharedPanelProps } from '../../interface';
export default function WeekPanel<DateType extends object = any>(props: SharedPanelProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,47 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import classNames from 'classnames';
import * as React from 'react';
import { isInRange, isSameWeek } from "../../utils/dateUtil";
import DatePanel from "../DatePanel";
export default function WeekPanel(props) {
var prefixCls = props.prefixCls,
generateConfig = props.generateConfig,
locale = props.locale,
value = props.value,
hoverValue = props.hoverValue,
hoverRangeValue = props.hoverRangeValue;
// =============================== Row ================================
var localeName = locale.locale;
var rowPrefixCls = "".concat(prefixCls, "-week-panel-row");
var rowClassName = function rowClassName(currentDate) {
var rangeCls = {};
if (hoverRangeValue) {
var _hoverRangeValue = _slicedToArray(hoverRangeValue, 2),
rangeStart = _hoverRangeValue[0],
rangeEnd = _hoverRangeValue[1];
var isRangeStart = isSameWeek(generateConfig, localeName, rangeStart, currentDate);
var isRangeEnd = isSameWeek(generateConfig, localeName, rangeEnd, currentDate);
rangeCls["".concat(rowPrefixCls, "-range-start")] = isRangeStart;
rangeCls["".concat(rowPrefixCls, "-range-end")] = isRangeEnd;
rangeCls["".concat(rowPrefixCls, "-range-hover")] = !isRangeStart && !isRangeEnd && isInRange(generateConfig, rangeStart, rangeEnd, currentDate);
}
if (hoverValue) {
rangeCls["".concat(rowPrefixCls, "-hover")] = hoverValue.some(function (date) {
return isSameWeek(generateConfig, localeName, currentDate, date);
});
}
return classNames(rowPrefixCls, _defineProperty({}, "".concat(rowPrefixCls, "-selected"), !hoverRangeValue && isSameWeek(generateConfig, localeName, value, currentDate)),
// Patch for hover range
rangeCls);
};
// ============================== Render ==============================
return /*#__PURE__*/React.createElement(DatePanel, _extends({}, props, {
mode: "week",
panelName: "week",
rowClassName: rowClassName
}));
}

View File

@@ -0,0 +1,3 @@
import * as React from 'react';
import type { SharedPanelProps } from '../../interface';
export default function YearPanel<DateType extends object = any>(props: SharedPanelProps<DateType>): React.JSX.Element;

View File

@@ -0,0 +1,108 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import { formatValue, isInRange, isSameYear } from "../../utils/dateUtil";
import { PanelContext, useInfo } from "../context";
import PanelBody from "../PanelBody";
import PanelHeader from "../PanelHeader";
export default function YearPanel(props) {
var prefixCls = props.prefixCls,
locale = props.locale,
generateConfig = props.generateConfig,
pickerValue = props.pickerValue,
disabledDate = props.disabledDate,
onPickerValueChange = props.onPickerValueChange,
onModeChange = props.onModeChange;
var panelPrefixCls = "".concat(prefixCls, "-year-panel");
// ========================== Base ==========================
var _useInfo = useInfo(props, 'year'),
_useInfo2 = _slicedToArray(_useInfo, 1),
info = _useInfo2[0];
var getStartYear = function getStartYear(date) {
var startYear = Math.floor(generateConfig.getYear(date) / 10) * 10;
return generateConfig.setYear(date, startYear);
};
var getEndYear = function getEndYear(date) {
var startYear = getStartYear(date);
return generateConfig.addYear(startYear, 9);
};
var startYearDate = getStartYear(pickerValue);
var endYearDate = getEndYear(pickerValue);
var baseDate = generateConfig.addYear(startYearDate, -1);
// ========================= Cells ==========================
var getCellDate = function getCellDate(date, offset) {
return generateConfig.addYear(date, offset);
};
var getCellText = function getCellText(date) {
return formatValue(date, {
locale: locale,
format: locale.cellYearFormat,
generateConfig: generateConfig
});
};
var getCellClassName = function getCellClassName(date) {
return _defineProperty({}, "".concat(prefixCls, "-cell-in-view"), isSameYear(generateConfig, date, startYearDate) || isSameYear(generateConfig, date, endYearDate) || isInRange(generateConfig, startYearDate, endYearDate, date));
};
// ======================== Disabled ========================
var mergedDisabledDate = disabledDate ? function (currentDate, disabledInfo) {
// Start
var startMonth = generateConfig.setMonth(currentDate, 0);
var startDate = generateConfig.setDate(startMonth, 1);
// End
var endMonth = generateConfig.addYear(startDate, 1);
var endDate = generateConfig.addDate(endMonth, -1);
return disabledDate(startDate, disabledInfo) && disabledDate(endDate, disabledInfo);
} : null;
// ========================= Header =========================
var yearNode = /*#__PURE__*/React.createElement("button", {
type: "button",
key: "decade",
"aria-label": locale.decadeSelect,
onClick: function onClick() {
onModeChange('decade');
},
tabIndex: -1,
className: "".concat(prefixCls, "-decade-btn")
}, formatValue(startYearDate, {
locale: locale,
format: locale.yearFormat,
generateConfig: generateConfig
}), "-", formatValue(endYearDate, {
locale: locale,
format: locale.yearFormat,
generateConfig: generateConfig
}));
// ========================= Render =========================
return /*#__PURE__*/React.createElement(PanelContext.Provider, {
value: info
}, /*#__PURE__*/React.createElement("div", {
className: panelPrefixCls
}, /*#__PURE__*/React.createElement(PanelHeader, {
superOffset: function superOffset(distance) {
return generateConfig.addYear(pickerValue, distance * 10);
},
onChange: onPickerValueChange
// Limitation
,
getStart: getStartYear,
getEnd: getEndYear
}, yearNode), /*#__PURE__*/React.createElement(PanelBody, _extends({}, props, {
disabledDate: mergedDisabledDate,
titleFormat: locale.fieldYearFormat,
colNum: 3,
rowNum: 4,
baseDate: baseDate
// Body
,
getCellDate: getCellDate,
getCellText: getCellText,
getCellClassName: getCellClassName
}))));
}

Some files were not shown because too many files have changed in this diff Show More