client/components/date-range/docs/example.jsx - trunk - githubmirror/wp-calypso

client/components/date-range/docs/example.jsx

98 строк2 KB

Jarda Snajdr

Rename .js to .jsx (try 2) (#110347)

30 апр 2026, 21:01

30 апр 2026, 21:01d2fc75f

import { Card } from '@automattic/components';
import { Fragment, Component } from 'react';
import DateRange from '../index.jsx';

/*
 * Date Range Demo
 */
class DateRangeExample extends Component {
	withCustomTrigger() {
		// Note: you must ensure you pass the `ref` prop down to the element
		const customTrigger = ( props ) => {
			return (
				<button ref={ props.buttonRef } onClick={ props.onTriggerClick }>
					I am a custom Trigger element
				</button>
			);
		};

		return <DateRange renderTrigger={ customTrigger } />;
	}

	withCustomInputs() {
		// Note: you must ensure you pass the `ref` prop down to the element
		const customInputs = ( props ) => {
			return (
				<div>
					<p>
						You selected { props.startDateValue } - { props.endDateValue }
					</p>
				</div>
			);
		};

		return <DateRange renderInputs={ customInputs } />;
	}

	render() {
		const now = new Date();

		return (
			<Fragment>
				<h3>Defaults</h3>
				<Card>
					<DateRange />
				</Card>

				<h3>Compact</h3>
				<Card>
					<DateRange isCompact />
				</Card>

				<h3>Select only past dates</h3>
				<Card>
					<DateRange lastSelectableDate={ now } />
				</Card>

				<h3>Select only future dates</h3>
				<Card>
					<DateRange firstSelectableDate={ now } />
				</Card>

				<h3>Custom Trigger Component</h3>
				<Card>{ this.withCustomTrigger() }</Card>

				<h3>Custom Inputs Component</h3>
				<Card>{ this.withCustomInputs() }</Card>

				<h3>With Shortcuts Menu Displayed</h3>
				<Card>
					<DateRange displayShortcuts />
				</Card>

				<h3>With Arrow Navigation Enabled</h3>
				<Card>
					<DateRange useArrowNavigation />
				</Card>

				<h3>With Overlay Enabled</h3>
				<Card>
					<DateRange
						useArrowNavigation
						displayShortcuts
						overlay={ <div>🔒 Please upgrade to use the date range picker.</div> }
					/>
				</Card>

				<h3>With Custom Title</h3>
				<Card>
					<DateRange customTitle="Custom Title" />
				</Card>
			</Fragment>
		);
	}
}

DateRangeExample.displayName = 'DateRange';

export default DateRangeExample;