@wordpress/components 34.0.0 → 35.0.1

package/src/mobile/bottom-sheet/keyboard-avoiding-view.native.js

@@ -1,125 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	Keyboard,
-	LayoutAnimation,
-	Platform,
-	StyleSheet,
-	View,
-	Dimensions,
-} from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * This is a simplified version of Facebook's KeyboardAvoidingView.
- * It's meant to work specifically with BottomSheets.
- * This fixes an issue in the bottom padding calculation, when the
- * BottomSheet was presented on Landscape, with the keyboard already present,
- * and a TextField on Autofocus (situation present on Links UI)
- */
-class KeyboardAvoidingView extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this._onKeyboardChange = this._onKeyboardChange.bind( this );
-		this._subscriptions = [];
-		this.state = {
-			bottom: 0,
-		};
-	}
-
-	_relativeKeyboardHeight( keyboardFrame ) {
-		if ( ! keyboardFrame ) {
-			return 0;
-		}
-
-		const windowWidth = Dimensions.get( 'window' ).width;
-		const isFloatingKeyboard = keyboardFrame.width !== windowWidth;
-		if ( isFloatingKeyboard ) {
-			return 0;
-		}
-
-		const windowHeight = Dimensions.get( 'window' ).height;
-		const keyboardY =
-			keyboardFrame.screenY - this.props.keyboardVerticalOffset;
-
-		const final = Math.max( windowHeight - keyboardY, 0 );
-		return final;
-	}
-
-	/**
-	 * @param {Object} event Keyboard event.
-	 */
-	_onKeyboardChange( event ) {
-		if ( event === null ) {
-			this.setState( { bottom: 0 } );
-			return;
-		}
-
-		const { duration, easing, endCoordinates } = event;
-		const height = this._relativeKeyboardHeight( endCoordinates );
-
-		if ( this.state.bottom === height ) {
-			return;
-		}
-
-		if ( duration && easing ) {
-			LayoutAnimation.configureNext( {
-				duration,
-				update: {
-					duration,
-					type: LayoutAnimation.Types[ easing ] || 'keyboard',
-				},
-			} );
-		}
-		this.setState( { bottom: height } );
-	}
-
-	componentDidMount() {
-		if ( Platform.OS === 'ios' ) {
-			this._subscriptions = [
-				Keyboard.addListener(
-					'keyboardWillChangeFrame',
-					this._onKeyboardChange
-				),
-			];
-		}
-	}
-
-	componentWillUnmount() {
-		this._subscriptions.forEach( ( subscription ) => {
-			subscription.remove();
-		} );
-	}
-
-	render() {
-		const { children, enabled, keyboardVerticalOffset, style, ...props } =
-			this.props;
-
-		let finalStyle = style;
-		if ( Platform.OS === 'ios' ) {
-			const bottomHeight = enabled ? this.state.bottom : 0;
-			finalStyle = StyleSheet.compose( style, {
-				paddingBottom: bottomHeight,
-			} );
-		}
-
-		return (
-			<View style={ finalStyle } { ...props }>
-				{ children }
-			</View>
-		);
-	}
-}
-
-KeyboardAvoidingView.defaultProps = {
-	enabled: true,
-	keyboardVerticalOffset: 0,
-};
-
-export default KeyboardAvoidingView;

package/src/mobile/bottom-sheet/link-cell.native.js

@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { link, Icon, chevronRight } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Cell from './cell';
-import styles from './styles.scss';
-
-const { placeholderColor } = styles;
-
-export default function LinkCell( {
-	value,
-	valueMask,
-	onPress,
-	showIcon = true,
-} ) {
-	return (
-		<Cell
-			icon={ showIcon && link }
-			label={ __( 'Link to' ) }
-			// Since this is not actually editable, we treat value as a placeholder.
-			value={ valueMask || value || __( 'Search or type URL' ) }
-			valueStyle={
-				!! ( value || valueMask ) ? undefined : placeholderColor
-			}
-			onPress={ onPress }
-		>
-			<Icon icon={ chevronRight }></Icon>
-		</Cell>
-	);
-}

package/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js

@@ -1,92 +0,0 @@
-/**
- * External dependencies
- */
-import { Text, View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { globe } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Cell from './cell';
-import cellStyles from './styles.scss';
-import suggestionStyles from './link-suggestion-styles.scss';
-import { posts, pages, empty, clipboard } from '../gridicons';
-
-const icons = {
-	URL: globe,
-	clipboard,
-	post: posts,
-	page: pages,
-};
-
-const getSummaryForType = ( type ) => {
-	switch ( type ) {
-		case 'clipboard':
-			return __( 'From clipboard' );
-		case 'mailto':
-			return __( 'Add this email link' );
-		case 'tel':
-			return __( 'Add this telephone link' );
-		default:
-			return __( 'Add this link' );
-	}
-};
-
-// We use some Cell styles here with a column flex-direction.
-function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
-	const { title: contentTitle, url, type, isDirectEntry } = suggestion;
-	const title = isDirectEntry ? url : contentTitle;
-	const summary = isDirectEntry ? getSummaryForType( type ) : url;
-
-	const pickLink = () => onLinkPicked( suggestion );
-
-	const cellTitleStyle = usePreferredColorSchemeStyle(
-		cellStyles.cellLabel,
-		cellStyles.cellTextDark
-	);
-
-	const cellSummaryStyle = usePreferredColorSchemeStyle(
-		cellStyles.cellValue,
-		cellStyles.cellTextDark
-	);
-
-	const titleStyle = [ cellTitleStyle, suggestionStyles.titleStyle ];
-	const summaryStyle = [ cellSummaryStyle, suggestionStyles.summaryStyle ];
-
-	return (
-		<Cell
-			{ ...props }
-			icon={ icons[ type ] || empty }
-			onPress={ pickLink }
-			separatorType="none"
-			cellContainerStyle={ suggestionStyles.itemContainerStyle }
-			labelStyle={ suggestionStyles.hidden }
-			valueStyle={ suggestionStyles.hidden }
-		>
-			<View style={ suggestionStyles.containerStyle }>
-				<Text
-					style={ titleStyle }
-					numberOfLines={ 1 }
-					ellipsizeMode="middle"
-				>
-					{ title }
-				</Text>
-				<Text
-					style={ summaryStyle }
-					numberOfLines={ 1 }
-					ellipsizeMode="middle"
-				>
-					{ summary }
-				</Text>
-			</View>
-		</Cell>
-	);
-}
-
-export default LinkSuggestionItemCell;

package/src/mobile/bottom-sheet/link-suggestion-styles.native.scss

@@ -1,27 +0,0 @@
-.titleStyle {
-	text-align: left;
-	font-weight: bold;
-	width: 100%;
-}
-
-.summaryStyle {
-	text-align: left;
-	font-size: 14px;
-	line-height: 20px;
-}
-
-.itemContainerStyle {
-	justify-content: flex-start;
-	margin-top: 10px;
-	margin-bottom: 10px;
-}
-
-.containerStyle {
-	flex-grow: 1;
-	flex-basis: 0;
-	align-items: flex-start;
-}
-
-.hidden {
-	display: none;
-}

package/src/mobile/bottom-sheet/lock-icon/index.native.js

@@ -1,19 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Icon, lock } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-
-export default function LockIcon() {
-	const iconStyle = usePreferredColorSchemeStyle(
-		styles.icon,
-		styles[ 'icon--dark' ]
-	);
-
-	return <Icon icon={ lock } color={ iconStyle.color } style={ iconStyle } />;
-}

package/src/mobile/bottom-sheet/lock-icon/styles.native.scss

@@ -1,8 +0,0 @@
-.icon {
-	color: $gray-dark;
-	margin-left: 6px;
-}
-
-.icon--dark {
-	color: $gray-light;
-}

package/src/mobile/bottom-sheet/nav-bar/README.md

@@ -1,63 +0,0 @@
-# BottomSheet NavBar
-
-BottomSheet NavBar components provide styled elements for composing a NavBar UI within a `BottomSheet`. It makes several other components available, which can then be used to compose the NavBar's content.
-
-## Usage
-
-```jsx
-import { BottomSheet } from '@wordpress/components';
-
-export default = () => (
-	<BottomSheet>
-		<BottomSheet.NavBar>
-			<BottomSheet.NavBar.BackButton onPress={ () => {} } />
-			<BottomSheet.NavBar.Heading>A Sheet Title</BottomSheet.NavBar.Heading>
-			<BottomSheet.NavBar.ApplyButton onPress={ () => {} } />
-		</BottomSheet.NavBar>
-	</BottomSheet>
-);
-```
-
-## BottomSheet.NavBar
-
-Provides structural styles for left-center-right layout for header UI.
-
-## BottomSheet.NavBar.Heading
-
-Displays a styled title for a bottom sheet.
-
-## BottomSheet.NavBar.ApplyButton
-
-Displays a styled button to apply settings of bottom sheet controls.
-
-### Props
-
-#### onPress
-
-Callback invoked once the button is pressed.
-
-## BottomSheet.NavBar.BackButton
-
-Displays a styled button to navigate backwards from a bottom sheet.
-Note that the backwards navigation needs to be implemented in the callback that is passed in onPress.
-
-### Props
-
-#### onPress
-
-Callback invoked once the button is pressed.
-
-## BottomSheet.NavBar.DismissButton
-
-Displays a styled button to dismiss the bottom sheet screen.
-Note that the bottomSheet dismissal needs to be implemented in the callback that is passed in onPress.
-
-### Props
-
-#### onPress
-
-Callback invoked once the button is pressed.
-
-#### iosText 
-
-Used to display iOS text if different from "Cancel".

package/src/mobile/bottom-sheet/nav-bar/action-button.native.js

@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { View, TouchableWithoutFeedback } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-
-// Action button component is used by both Back and Apply Button components.
-function ActionButton( {
-	onPress,
-	accessibilityLabel,
-	accessibilityHint,
-	children,
-} ) {
-	return (
-		<TouchableWithoutFeedback
-			onPress={ onPress }
-			accessibilityRole="button"
-			accessibilityLabel={ accessibilityLabel }
-			accessibilityHint={ accessibilityHint }
-		>
-			<View style={ styles[ 'action-button' ] }>{ children }</View>
-		</TouchableWithoutFeedback>
-	);
-}
-
-export default ActionButton;

package/src/mobile/bottom-sheet/nav-bar/apply-button.native.js

@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Text, Platform } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, check } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import ActionButton from './action-button';
-
-function ApplyButton( { onPress } ) {
-	const buttonTextStyle = usePreferredColorSchemeStyle(
-		styles[ 'button-text' ],
-		styles[ 'button-text-dark' ]
-	);
-
-	const applyButtonStyle = usePreferredColorSchemeStyle(
-		styles[ 'apply-button-icon' ],
-		styles[ 'apply-button-icon-dark' ]
-	);
-
-	return (
-		<View style={ styles[ 'apply-button' ] }>
-			<ActionButton
-				onPress={ onPress }
-				accessibilityLabel={ __( 'Apply' ) }
-				accessibilityHint={ __( 'Applies the setting' ) }
-			>
-				{ Platform.OS === 'ios' ? (
-					<Text style={ buttonTextStyle } maxFontSizeMultiplier={ 2 }>
-						{ __( 'Apply' ) }
-					</Text>
-				) : (
-					<Icon
-						icon={ check }
-						size={ 24 }
-						style={ applyButtonStyle }
-					/>
-				) }
-			</ActionButton>
-		</View>
-	);
-}
-
-export default ApplyButton;

package/src/mobile/bottom-sheet/nav-bar/back-button.native.js

@@ -1,94 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Platform, Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, arrowLeft, close } from '@wordpress/icons';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-import ActionButton from './action-button';
-import chevronBack from './../chevron-back';
-
-function Button( { onPress, icon, text } ) {
-	const buttonTextStyle = usePreferredColorSchemeStyle(
-		styles[ 'button-text' ],
-		styles[ 'button-text-dark' ]
-	);
-
-	return (
-		<View style={ styles[ 'back-button' ] }>
-			<ActionButton
-				onPress={ onPress }
-				accessibilityLabel={ __( 'Go back' ) }
-				accessibilityHint={ __(
-					'Navigates to the previous content sheet'
-				) }
-			>
-				{ icon }
-				{ text && (
-					<Text style={ buttonTextStyle } maxFontSizeMultiplier={ 2 }>
-						{ text }
-					</Text>
-				) }
-			</ActionButton>
-		</View>
-	);
-}
-
-function BackButton( { onPress } ) {
-	const chevronLeftStyle = usePreferredColorSchemeStyle(
-		styles[ 'chevron-left-icon' ],
-		styles[ 'chevron-left-icon-dark' ]
-	);
-	const arrowLeftStyle = usePreferredColorSchemeStyle(
-		styles[ 'arrow-left-icon' ],
-		styles[ 'arrow-left-icon-dark' ]
-	);
-
-	let backIcon;
-	let backText;
-
-	if ( Platform.OS === 'ios' ) {
-		backIcon = (
-			<Icon icon={ chevronBack } size={ 21 } style={ chevronLeftStyle } />
-		);
-		backText = __( 'Back' );
-	} else {
-		backIcon = (
-			<Icon icon={ arrowLeft } size={ 24 } style={ arrowLeftStyle } />
-		);
-	}
-
-	return <Button onPress={ onPress } icon={ backIcon } text={ backText } />;
-}
-
-function DismissButton( { onPress, iosText } ) {
-	const arrowLeftStyle = usePreferredColorSchemeStyle(
-		styles[ 'arrow-left-icon' ],
-		styles[ 'arrow-left-icon-dark' ]
-	);
-
-	let backIcon;
-	let backText;
-
-	if ( Platform.OS === 'ios' ) {
-		backText = iosText ? iosText : __( 'Cancel' );
-	} else {
-		backIcon = <Icon icon={ close } size={ 24 } style={ arrowLeftStyle } />;
-	}
-
-	return <Button onPress={ onPress } icon={ backIcon } text={ backText } />;
-}
-
-Button.Back = BackButton;
-Button.Dismiss = DismissButton; // Cancel or Close Button.
-
-export default Button;

package/src/mobile/bottom-sheet/nav-bar/heading.native.js

@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { Text } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-
-function Heading( { children } ) {
-	const headingStyle = usePreferredColorSchemeStyle(
-		styles.heading,
-		styles[ 'heading-dark' ]
-	);
-
-	return (
-		<Text
-			accessibilityRole="header"
-			style={ headingStyle }
-			maxFontSizeMultiplier={ 3 }
-		>
-			{ children }
-		</Text>
-	);
-}
-
-export default Heading;

package/src/mobile/bottom-sheet/nav-bar/index.native.js

@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import ApplyButton from './apply-button';
-import Button from './back-button';
-import Heading from './heading';
-import styles from './styles.scss';
-function NavBar( { children } ) {
-	return <View style={ styles[ 'nav-bar' ] }>{ children }</View>;
-}
-
-NavBar.ApplyButton = ApplyButton;
-NavBar.BackButton = Button.Back;
-NavBar.DismissButton = Button.Dismiss;
-
-NavBar.Heading = Heading;
-
-export default NavBar;

package/src/mobile/bottom-sheet/nav-bar/styles.native.scss

@@ -1,69 +0,0 @@
-.nav-bar {
-	align-items: center;
-	flex-direction: row;
-	height: 44px;
-	justify-content: center;
-}
-
-.heading {
-	color: $light-primary;
-	text-align: center;
-	font-weight: 600;
-	font-size: 16px;
-	position: absolute;
-	width: 100%;
-}
-
-.heading-dark {
-	color: $dark-primary;
-}
-
-.action-button {
-	align-items: center;
-	flex-direction: row;
-	height: 100%;
-	justify-content: center;
-	min-width: 44px;
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-20;
-}
-
-.back-button {
-	align-items: flex-start;
-	flex: 1;
-	justify-content: center;
-	z-index: 2;
-}
-
-.apply-button {
-	align-items: flex-end;
-	flex: 1;
-	justify-content: center;
-	z-index: 2;
-}
-
-.button-text {
-	color: $blue-50;
-	font-size: 16px;
-}
-
-.button-text-dark {
-	color: $blue-30;
-}
-
-.chevron-left-icon {
-	color: $blue-50;
-	margin-left: -11px;
-}
-
-.chevron-left-icon-dark {
-	color: $blue-30;
-}
-
-.arrow-left-icon {
-	color: $gray-60;
-}
-
-.arrow-left-icon-dark {
-	color: $dark-secondary;
-}