@wordpress/components 19.10.0 → 19.13.0

package/src/color-picker/color-display.tsx

@@ -1,169 +0,0 @@
-/**
- * External dependencies
- */
-import type { Colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
-import { useCopyToClipboard } from '@wordpress/compose';
-import { useState, useEffect, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { Text } from '../text';
-import { Flex, FlexItem } from '../flex';
-import { Tooltip } from '../ui/tooltip';
-import type { ColorType } from './types';
-import { space } from '../ui/utils/space';
-import { COLORS } from '../utils/colors-values';
-
-interface ColorDisplayProps {
-	color: Colord;
-	colorType: ColorType;
-	enableAlpha: boolean;
-}
-
-interface DisplayProps {
-	color: Colord;
-	enableAlpha: boolean;
-}
-
-type Values = [ number, string ][];
-
-interface ValueDisplayProps {
-	values: Values;
-}
-
-const ValueDisplay = ( { values }: ValueDisplayProps ) => (
-	<>
-		{ values.map( ( [ value, abbreviation ] ) => {
-			return (
-				<FlexItem key={ abbreviation } isBlock display="flex">
-					<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>
-					<Text>{ value }</Text>
-				</FlexItem>
-			);
-		} ) }
-	</>
-);
-
-const HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const { h, s, l, a } = color.toHsl();
-
-	const values: Values = [
-		[ Math.floor( h ), 'H' ],
-		[ Math.round( s * 100 ), 'S' ],
-		[ Math.round( l * 100 ), 'L' ],
-	];
-	if ( enableAlpha ) {
-		values.push( [ Math.round( a * 100 ), 'A' ] );
-	}
-
-	return <ValueDisplay values={ values } />;
-};
-
-const RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const { r, g, b, a } = color.toRgb();
-
-	const values: Values = [
-		[ r, 'R' ],
-		[ g, 'G' ],
-		[ b, 'B' ],
-	];
-
-	if ( enableAlpha ) {
-		values.push( [ Math.round( a * 100 ), 'A' ] );
-	}
-
-	return <ValueDisplay values={ values } />;
-};
-
-const HexDisplay = ( { color }: DisplayProps ) => {
-	const colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();
-	return (
-		<FlexItem>
-			<Text color={ COLORS.ui.theme }>#</Text>
-			<Text>{ colorWithoutHash }</Text>
-		</FlexItem>
-	);
-};
-
-const getComponent = ( colorType: ColorType ) => {
-	switch ( colorType ) {
-		case 'hsl':
-			return HslDisplay;
-		case 'rgb':
-			return RgbDisplay;
-		default:
-		case 'hex':
-			return HexDisplay;
-	}
-};
-
-export const ColorDisplay = ( {
-	color,
-	colorType,
-	enableAlpha,
-}: ColorDisplayProps ) => {
-	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
-	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
-	const props = { color, enableAlpha };
-	const Component = getComponent( colorType );
-	const copyRef = useCopyToClipboard< HTMLDivElement >(
-		() => {
-			switch ( colorType ) {
-				case 'hsl': {
-					return color.toHslString();
-				}
-				case 'rgb': {
-					return color.toRgbString();
-				}
-				default:
-				case 'hex': {
-					return color.toHex();
-				}
-			}
-		},
-		() => {
-			if ( copyTimer.current ) {
-				clearTimeout( copyTimer.current );
-			}
-			setCopiedColor( color.toHex() );
-			copyTimer.current = setTimeout( () => {
-				setCopiedColor( null );
-				copyTimer.current = undefined;
-			}, 3000 );
-		}
-	);
-	useEffect( () => {
-		// Clear copyTimer on component unmount.
-		return () => {
-			if ( copyTimer.current ) {
-				clearTimeout( copyTimer.current );
-			}
-		};
-	}, [] );
-	return (
-		<Tooltip
-			content={
-				<Text color="white">
-					{ copiedColor === color.toHex()
-						? __( 'Copied!' )
-						: __( 'Copy' ) }
-				</Text>
-			}
-		>
-			<Flex
-				justify="flex-start"
-				gap={ space( 1 ) }
-				ref={ copyRef }
-				style={ { height: 30 } }
-			>
-				<Component { ...props } />
-			</Flex>
-		</Tooltip>
-	);
-};

package/src/date-time/index.js

@@ -1,170 +0,0 @@
-/**
- * External dependencies
- */
-// Needed to initialise the default datepicker styles.
-// See: https://github.com/airbnb/react-dates#initialize
-import 'react-dates/initialize';
-import { noop } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useState, forwardRef } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import { default as DatePicker } from './date';
-import { default as TimePicker } from './time';
-
-export { DatePicker, TimePicker };
-
-function DateTimePicker(
-	{
-		currentDate,
-		is12Hour,
-		isInvalidDate,
-		onMonthPreviewed = noop,
-		onChange,
-		events,
-	},
-	ref
-) {
-	const [ calendarHelpIsVisible, setCalendarHelpIsVisible ] = useState(
-		false
-	);
-
-	function onClickDescriptionToggle() {
-		setCalendarHelpIsVisible( ! calendarHelpIsVisible );
-	}
-
-	return (
-		<div ref={ ref } className="components-datetime">
-			{ ! calendarHelpIsVisible && (
-				<>
-					<TimePicker
-						currentTime={ currentDate }
-						onChange={ onChange }
-						is12Hour={ is12Hour }
-					/>
-					<DatePicker
-						currentDate={ currentDate }
-						onChange={ onChange }
-						isInvalidDate={ isInvalidDate }
-						events={ events }
-						onMonthPreviewed={ onMonthPreviewed }
-					/>
-				</>
-			) }
-			{ calendarHelpIsVisible && (
-				<>
-					<div className="components-datetime__calendar-help">
-						<h4>{ __( 'Click to Select' ) }</h4>
-						<ul>
-							<li>
-								{ __(
-									'Click the right or left arrows to select other months in the past or the future.'
-								) }
-							</li>
-							<li>
-								{ __( 'Click the desired day to select it.' ) }
-							</li>
-						</ul>
-						<h4>{ __( 'Navigating with a keyboard' ) }</h4>
-						<ul>
-							<li>
-								<abbr
-									aria-label={ _x(
-										'Enter',
-										'keyboard button'
-									) }
-								>
-									↵
-								</abbr>
-								{
-									' ' /* JSX removes whitespace, but a space is required for screen readers. */
-								}
-								<span>
-									{ __( 'Select the date in focus.' ) }
-								</span>
-							</li>
-							<li>
-								<abbr
-									aria-label={ __( 'Left and Right Arrows' ) }
-								>
-									←/→
-								</abbr>
-								{
-									' ' /* JSX removes whitespace, but a space is required for screen readers. */
-								}
-								{ __(
-									'Move backward (left) or forward (right) by one day.'
-								) }
-							</li>
-							<li>
-								<abbr aria-label={ __( 'Up and Down Arrows' ) }>
-									↑/↓
-								</abbr>
-								{
-									' ' /* JSX removes whitespace, but a space is required for screen readers. */
-								}
-								{ __(
-									'Move backward (up) or forward (down) by one week.'
-								) }
-							</li>
-							<li>
-								<abbr
-									aria-label={ __( 'Page Up and Page Down' ) }
-								>
-									{ __( 'PgUp/PgDn' ) }
-								</abbr>
-								{
-									' ' /* JSX removes whitespace, but a space is required for screen readers. */
-								}
-								{ __(
-									'Move backward (PgUp) or forward (PgDn) by one month.'
-								) }
-							</li>
-							<li>
-								<abbr aria-label={ __( 'Home and End' ) }>
-									{ /* Translators: Home/End reffer to the 'Home' and 'End' buttons on the keyboard.*/ }
-									{ __( 'Home/End' ) }
-								</abbr>
-								{
-									' ' /* JSX removes whitespace, but a space is required for screen readers. */
-								}
-								{ __(
-									'Go to the first (Home) or last (End) day of a week.'
-								) }
-							</li>
-						</ul>
-					</div>
-				</>
-			) }
-			<div className="components-datetime__buttons">
-				{ ! calendarHelpIsVisible && currentDate && (
-					<Button
-						className="components-datetime__date-reset-button"
-						variant="link"
-						onClick={ () => onChange( null ) }
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				) }
-				<Button
-					className="components-datetime__date-help-toggle"
-					variant="link"
-					onClick={ onClickDescriptionToggle }
-				>
-					{ calendarHelpIsVisible
-						? __( 'Close' )
-						: __( 'Calendar Help' ) }
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export default forwardRef( DateTimePicker );

package/src/date-time/stories/date.js

@@ -1,17 +0,0 @@
-/**
- * Internal dependencies
- */
-import DatePicker from '../date';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-export default { title: 'Components/DatePicker', component: DatePicker };
-
-export const _default = () => {
-	const [ date, setDate ] = useState();
-
-	return <DatePicker currentDate={ date } onChange={ setDate } />;
-};

package/src/date-time/stories/index.js

@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, button } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import DateTimePicker from '../';
-
-export default {
-	title: 'Components/DateTimePicker',
-	component: DateTimePicker,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const DateTimePickerWithState = ( { is12Hour } ) => {
-	const [ date, setDate ] = useState();
-
-	return (
-		<DateTimePicker
-			currentDate={ date }
-			onChange={ setDate }
-			is12Hour={ is12Hour }
-		/>
-	);
-};
-
-export const _default = () => {
-	const is12Hour = boolean( 'Is 12 hour (shows AM/PM)', false );
-	return <DateTimePickerWithState is12Hour={ is12Hour } />;
-};
-
-// Date utils, for demo purposes.
-const DAY_IN_MS = 24 * 60 * 60 * 1000;
-const aFewDaysAfter = ( date ) => {
-	// eslint-disable-next-line no-restricted-syntax
-	return new Date( date.getTime() + ( 1 + Math.random() * 5 ) * DAY_IN_MS );
-};
-
-const now = new Date();
-
-export const WithDaysHighlighted = () => {
-	const [ date, setDate ] = useState( now );
-
-	const [ highlights, setHighlights ] = useState( [
-		{ date: aFewDaysAfter( now ) },
-	] );
-
-	button( 'Add random highlight', () => {
-		const lastHighlight = highlights[ highlights.length - 1 ];
-		setHighlights( [
-			...highlights,
-			{ date: aFewDaysAfter( lastHighlight.date ) },
-		] );
-	} );
-
-	return (
-		<DateTimePicker
-			currentDate={ date }
-			onChange={ setDate }
-			events={ highlights }
-		/>
-	);
-};
-
-/**
- * You can mark particular dates as invalid using the `isInvalidDate` prop. This
- * prevents the user from being able to select it.
- */
-export const WithInvalidDates = () => {
-	const [ currentDate, setCurrentDate ] = useState( now );
-
-	return (
-		<DateTimePicker
-			currentDate={ currentDate }
-			onChange={ setCurrentDate }
-			isInvalidDate={ ( date ) =>
-				// Mark Saturdays and Sundays as invalid.
-				date.getDay() === 0 || date.getDay() === 6
-			}
-		/>
-	);
-};

package/src/date-time/stories/time.js

@@ -1,32 +0,0 @@
-/**
- * Internal dependencies
- */
-import TimePicker from '../time';
-
-/**
- * External dependencies
- */
-import { date, boolean } from '@storybook/addon-knobs';
-import { noop } from 'lodash';
-
-export default {
-	title: 'Components/TimePicker',
-	component: TimePicker,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	return (
-		<TimePicker
-			currentTime={
-				new Date(
-					date( 'currentTime', new Date( '1986-10-18T11:00:00' ) )
-				)
-			}
-			is12Hour={ boolean( 'is12Hour', false ) }
-			onChange={ noop }
-		/>
-	);
-};