Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add `popoverProps` to DatePicker (#41404) 

* Add `popoverProps` to DatePicker

* Add changelog

* Move changelog

* Add popoverProps to README.md

* Fix lint

* Fix lint again
This commit is contained in:
Fernando Marichal 2023-11-13 14:45:31 -03:00 committed by GitHub
parent 08969e927c
commit b24591432d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/fix-date-picker-popover-props Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: fix
Add popoverProps to DatePicker #41404

64
packages/js/components/src/calendar/README.md
View File

@ -1,7 +1,8 @@
DatePicker
===
# DatePicker and DateRange
## Usage
## DatePicker
### Usage
```jsx
<DatePicker
@ -13,25 +14,24 @@ DatePicker
/>
```
### Props
#### Props
Name | Type | Default | Description
--- | --- | --- | ---
`date` | Object | `null` | A moment date object representing the selected date. `null` for no selection
`disabled` | Boolean | `null` | Whether the input is disabled
`text` | String | `null` | The date in human-readable format. Displayed in the text input
`error` | String | `null` | A string error message, shown to the user
`onUpdate` | Function | `null` | (required) A function called upon selection of a date or input change
`dateFormat` | String | `null` | (required) The date format in moment.js-style tokens
`isInvalidDate` | Function | `null` | A function to determine if a day on the calendar is not valid
| Name | Type | Default | Description |
| --------------- | -------- | ------- | ---------------------------------------------------------------------------- |
| `date` | Object | `null` | A moment date object representing the selected date. `null` for no selection |
| `disabled` | Boolean | `null` | Whether the input is disabled |
| `text` | String | `null` | The date in human-readable format. Displayed in the text input |
| `error` | String | `null` | A string error message, shown to the user |
| `onUpdate` | Function | `null` | (required) A function called upon selection of a date or input change |
| `dateFormat` | String | `null` | (required) The date format in moment.js-style tokens |
| `isInvalidDate` | Function | `null` | A function to determine if a day on the calendar is not valid |
| `popoverProps` | Object | `{}` | Props that will be sent to the Dropdown component |
DateRange
===
## DateRange
This is wrapper for a [react-dates](https://github.com/airbnb/react-dates) powered calendar.
## Usage
### Usage
```jsx
<DateRange
@ -42,24 +42,24 @@ This is wrapper for a [react-dates](https://github.com/airbnb/react-dates) power
onUpdate={ ( update ) => setState( update ) }
shortDateFormat="MM/DD/YYYY"
focusedInput="startDate"
isInvalidDate={ date => (
isInvalidDate={ ( date ) =>
// not a future date
moment().isBefore( moment( date ), 'date' )
) }
}
/>
```
### Props
#### Props
Name | Type | Default | Description
--- | --- | --- | ---
`after` | Object | `null` | A moment date object representing the selected start. `null` for no selection
`afterError` | String | `null` | A string error message, shown to the user
`afterText` | String | `null` | The start date in human-readable format. Displayed in the text input
`before` | Object | `null` | A moment date object representing the selected end. `null` for no selection
`beforeError` | String | `null` | A string error message, shown to the user
`beforeText` | String | `null` | The end date in human-readable format. Displayed in the text input
`focusedInput` | String | `null` | String identifying which is the currently focused input (start or end)
`isInvalidDate` | Function | `null` | A function to determine if a day on the calendar is not valid
`onUpdate` | Function | `null` | (required) A function called upon selection of a date
`shortDateFormat` | String | `null` | (required) The date format in moment.js-style tokens
| Name | Type | Default | Description |
| ----------------- | -------- | ------- | ----------------------------------------------------------------------------- |
| `after` | Object | `null` | A moment date object representing the selected start. `null` for no selection |
| `afterError` | String | `null` | A string error message, shown to the user |
| `afterText` | String | `null` | The start date in human-readable format. Displayed in the text input |
| `before` | Object | `null` | A moment date object representing the selected end. `null` for no selection |
| `beforeError` | String | `null` | A string error message, shown to the user |
| `beforeText` | String | `null` | The end date in human-readable format. Displayed in the text input |
| `focusedInput` | String | `null` | String identifying which is the currently focused input (start or end) |
| `isInvalidDate` | Function | `null` | A function to determine if a day on the calendar is not valid |
| `onUpdate` | Function | `null` | (required) A function called upon selection of a date |
| `shortDateFormat` | String | `null` | (required) The date format in moment.js-style tokens |

12
packages/js/components/src/calendar/date-picker.js
View File

@ -76,13 +76,21 @@ class DatePicker extends Component {
}
render() {
const { date, disabled, text, dateFormat, error, isInvalidDate } =
this.props;
const {
date,
disabled,
text,
dateFormat,
error,
isInvalidDate,
popoverProps = { inline: true },
} = this.props;
return (
<Dropdown
position="bottom center"
focusOnMount={ false }
popoverProps={ popoverProps }
renderToggle={ ( { isOpen, onToggle } ) => (
<DateInput
disabled={ disabled }

18
packages/js/components/src/date-time-picker-control/README.md
View File

@ -1,5 +1,4 @@
DateTimePickerControl
===
# DateTimePickerControl
Add a component to allow selecting of a date and time via a calendar selection or by manual input.
@ -14,10 +13,11 @@ Add a component to allow selecting of a date and time via a calendar selection o
### Props
Name | Type | Default | Description
--- | --- | --- | ---
`currentDate` | String | `null` | A date in ISO format to be used as the initially set date
`dateTimeFormat` | String | `MM/DD/YYYY h:mm a` | The format used for the datetime
`disabled` | Boolean | `null` | Whether the input is disabled
`is12Hour` | Boolean | `true` | Whether the date time picker should show a 12 or 24 hour format
`onChange` | Function | `undefined` | (required) A function called upon selection of a date or input change
| Name | Type | Default | Description |
| ---------------- | -------- | ------------------- | --------------------------------------------------------------------- |
| `currentDate` | String | `null` | A date in ISO format to be used as the initially set date |
| `dateTimeFormat` | String | `MM/DD/YYYY h:mm a` | The format used for the datetime |
| `disabled` | Boolean | `null` | Whether the input is disabled |
| `is12Hour` | Boolean | `true` | Whether the date time picker should show a 12 or 24 hour format |
| `onChange` | Function | `undefined` | (required) A function called upon selection of a date or input change |
| `popoverProps` | Object | `{}` | Props that will be sent to the Dropdown component |

3
packages/js/components/src/date-time-picker-control/date-time-picker-control.tsx
View File

@ -50,6 +50,7 @@ export type DateTimePickerControlProps = {
placeholder?: string;
help?: string | null;
onChangeDebounceWait?: number;
popoverProps?: Record< string, boolean | string >;
} & Omit< React.HTMLAttributes< HTMLInputElement >, 'onChange' >;
export const DateTimePickerControl = forwardRef(
@ -68,6 +69,7 @@ export const DateTimePickerControl = forwardRef(
help,
className = '',
onChangeDebounceWait = 500,
popoverProps = {},
...props
}: DateTimePickerControlProps,
ref: Ref< HTMLInputElement >
@ -353,6 +355,7 @@ export const DateTimePickerControl = forwardRef(
anchor: inputControl.current,
className: 'woocommerce-date-time-picker-control__popover',
placement: 'bottom-start',
...popoverProps,
} }
renderContent={ () => {
const Picker = isDateOnlyPicker