@wordpress/components 34.0.0 → 35.0.1

package/src/mobile/gradient/index.native.js

@@ -1,188 +0,0 @@
-/**
- * External dependencies
- */
-import { View, Platform } from 'react-native';
-import RNLinearGradient from 'react-native-linear-gradient';
-import gradientParser from 'gradient-parser';
-/**
- * WordPress dependencies
- */
-import { RadialGradient, Stop, SVG, Defs, Rect } from '@wordpress/primitives';
-import { useResizeObserver } from '@wordpress/compose';
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import { colorsUtils } from '../color-settings/utils';
-
-export function getGradientAngle( gradientValue ) {
-	const angleBase = 45;
-	const matchAngle = /\(((\d+deg)|(to\s[^,]+))/;
-	const angle = matchAngle.exec( gradientValue )
-		? matchAngle.exec( gradientValue )[ 1 ]
-		: '180deg';
-
-	const angleType = angle.includes( 'deg' ) ? 'angle' : 'sideOrCorner';
-
-	if ( angleType === 'sideOrCorner' ) {
-		switch ( angle ) {
-			case 'to top':
-				return 0;
-			case 'to top right':
-			case 'to right top':
-				return angleBase;
-			case 'to right':
-				return 2 * angleBase;
-			case 'to bottom right':
-			case 'to right bottom':
-				return 3 * angleBase;
-			case 'to bottom':
-				return 4 * angleBase;
-			case 'to bottom left':
-			case 'to left bottom':
-				return 5 * angleBase;
-			case 'to left':
-				return 6 * angleBase;
-			case 'to top left':
-			case 'to left top':
-				return 7 * angleBase;
-		}
-	} else if ( angleType === 'angle' ) {
-		return parseFloat( angle );
-	} else {
-		return 4 * angleBase;
-	}
-}
-
-export function getGradientColorGroup( gradientValue ) {
-	const colorNeedParenthesis = [ 'rgb', 'rgba' ];
-
-	const excludeSideOrCorner = /linear-gradient\(to\s+([a-z\s]+,)/;
-
-	// Parser has some difficulties with angle defined as a side or corner (e.g. `to left`)
-	// so it's going to be excluded in order to matching color groups.
-	const modifiedGradientValue = gradientValue.replace(
-		excludeSideOrCorner,
-		'linear-gradient('
-	);
-
-	return [].concat(
-		...gradientParser.parse( modifiedGradientValue )?.map( ( gradient ) =>
-			gradient.colorStops?.map( ( color, index ) => {
-				const { type, value, length } = color;
-				const fallbackLength = `${
-					100 * ( index / ( gradient.colorStops.length - 1 ) )
-				}%`;
-				const colorLength = length
-					? `${ length.value }${ length.type }`
-					: fallbackLength;
-
-				if ( colorNeedParenthesis.includes( type ) ) {
-					return [ `${ type }(${ value.join( ',' ) })`, colorLength ];
-				} else if ( type === 'literal' ) {
-					return [ value, colorLength ];
-				}
-				return [ `#${ value }`, colorLength ];
-			} )
-		)
-	);
-}
-
-export function getGradientBaseColors( colorGroup ) {
-	return colorGroup.map( ( color ) => color[ 0 ] );
-}
-
-export function getColorLocations( colorGroup ) {
-	return colorGroup.map(
-		( location ) => Number( location[ 1 ].replace( '%', '' ) ) / 100
-	);
-}
-
-function Gradient( {
-	gradientValue,
-	style,
-	angleCenter = { x: 0.5, y: 0.5 },
-	children,
-	...otherProps
-} ) {
-	const [ resizeObserver, sizes ] = useResizeObserver();
-	const { width = 0, height = 0 } = sizes || {};
-	const { isGradient, getGradientType, gradients } = colorsUtils;
-
-	const colorGroup = useMemo(
-		() => getGradientColorGroup( gradientValue ),
-		[ gradientValue ]
-	);
-
-	const locations = useMemo(
-		() => getColorLocations( colorGroup ),
-		[ colorGroup ]
-	);
-
-	const colors = useMemo(
-		() => getGradientBaseColors( colorGroup ),
-		[ colorGroup ]
-	);
-
-	if ( ! gradientValue || ! isGradient( gradientValue ) ) {
-		return null;
-	}
-
-	const isLinearGradient =
-		getGradientType( gradientValue ) === gradients.linear;
-
-	if ( isLinearGradient ) {
-		return (
-			<RNLinearGradient
-				colors={ colors }
-				useAngle
-				angle={ getGradientAngle( gradientValue ) }
-				locations={ locations }
-				angleCenter={ angleCenter }
-				style={ style }
-				{ ...otherProps }
-			>
-				{ children }
-			</RNLinearGradient>
-		);
-	}
-
-	return (
-		<View style={ [ style, styles.overflow ] }>
-			<View style={ styles.radialGradientContent }>{ children }</View>
-			{ resizeObserver }
-			<SVG>
-				<Defs>
-					<RadialGradient
-						// eslint-disable-next-line no-restricted-syntax
-						id="radialGradient"
-						gradientUnits="userSpaceOnUse"
-						rx="70%"
-						ry="70%"
-						cy={ Platform.OS === 'android' ? width / 2 : '50%' }
-					>
-						{ colorGroup.map( ( group ) => {
-							return (
-								<Stop
-									offset={ group[ 1 ] }
-									stopColor={ group[ 0 ] }
-									stopOpacity="1"
-									key={ `${ group[ 1 ] }-${ group[ 0 ] }` }
-								/>
-							);
-						} ) }
-					</RadialGradient>
-				</Defs>
-				<Rect
-					height={ height }
-					width={ width }
-					fill="url(#radialGradient)"
-				/>
-			</SVG>
-		</View>
-	);
-}
-
-export default Gradient;

package/src/mobile/gradient/style.native.scss

@@ -1,8 +0,0 @@
-.overflow {
-	overflow: hidden;
-}
-
-.radialGradientContent {
-	position: absolute;
-	z-index: 2;
-}

package/src/mobile/gradient/test/index.native.js

@@ -1,114 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	getGradientAngle,
-	getGradientBaseColors,
-	getColorLocations,
-	getGradientColorGroup,
-} from '../index.native';
-
-describe( 'getGradientAngle', () => {
-	it( 'returns default angle (180) when not specified in gradient value', () => {
-		const gradientValue = 'linear-gradient(#e66465, #9198e5)';
-		expect( getGradientAngle( gradientValue ) ).toBe( 180 );
-	} );
-	it( 'returns correct angle if specified in words in gradient value', () => {
-		const angleBase = 45;
-		const sidesOrCorners = {
-			'to top': 0,
-			'to top right': angleBase,
-			'to right top': angleBase,
-			'to right': 2 * angleBase,
-			'to bottom right': 3 * angleBase,
-			'to right bottom': 3 * angleBase,
-			'to bottom': 4 * angleBase,
-			'to bottom left': 5 * angleBase,
-			'to left bottom': 5 * angleBase,
-			'to left': 6 * angleBase,
-			'to top left': 7 * angleBase,
-			'to left top': 7 * angleBase,
-		};
-		const gradientColors = Object.keys( sidesOrCorners ).map(
-			( sideOrCorner ) => {
-				return {
-					gradientValue: `linear-gradient(${ sideOrCorner }, #e66465, #9198e5)`,
-					sideOrCorner,
-				};
-			}
-		);
-
-		gradientColors.forEach( ( gradientColor ) => {
-			const { gradientValue, sideOrCorner } = gradientColor;
-			expect( getGradientAngle( gradientValue ) ).toBe(
-				sidesOrCorners[ sideOrCorner ]
-			);
-		} );
-	} );
-	it( 'returns an angle specified in gradient value', () => {
-		const gradientValue = 'linear-gradient(155deg,#e66465, #9198e5)';
-		expect( getGradientAngle( gradientValue ) ).toBe( 155 );
-	} );
-} );
-
-describe( 'getGradientBaseColors', () => {
-	it( 'returns array of colors (hex) from gradient value', () => {
-		const colorGroup = getGradientColorGroup(
-			'linear-gradient(#e66465, #9198e5)'
-		);
-
-		expect( getGradientBaseColors( colorGroup ) ).toStrictEqual( [
-			'#e66465',
-			'#9198e5',
-		] );
-	} );
-	it( 'returns an array of colors (rgb/rgba) from gradient value', () => {
-		const colorGroup = getGradientColorGroup(
-			`linear-gradient(336deg, rgb(0,0,255), rgba(0,0,255,.8) 70.71%)`
-		);
-		expect( getGradientBaseColors( colorGroup ) ).toStrictEqual( [
-			'rgb(0,0,255)',
-			'rgba(0,0,255,.8)',
-		] );
-	} );
-
-	it( 'return an array of colors (literal) from gradient value', () => {
-		const colorGroup = getGradientColorGroup(
-			'linear-gradient(45deg, blue, red)'
-		);
-		expect( getGradientBaseColors( colorGroup ) ).toStrictEqual( [
-			'blue',
-			'red',
-		] );
-	} );
-
-	it( 'return an array of colors (mixed) from gradient value', () => {
-		const colorGroup = getGradientColorGroup(
-			'linear-gradient(45deg, blue, #e66465, rgb(0,0,255), rgba(0,0,255,.8))'
-		);
-		expect( getGradientBaseColors( colorGroup ) ).toStrictEqual( [
-			'blue',
-			'#e66465',
-			'rgb(0,0,255)',
-			'rgba(0,0,255,.8)',
-		] );
-	} );
-} );
-
-describe( 'getColorLocations', () => {
-	it( 'returns an array of color locations specified in gradient value', () => {
-		const colorGroup = getGradientColorGroup(
-			'linear-gradient(45deg, red 0%, blue 10%)'
-		);
-		expect( getColorLocations( colorGroup ) ).toStrictEqual( [ 0, 0.1 ] );
-	} );
-
-	it( 'returns an array of color locations adjusted proportionally when not specified in gradient value', () => {
-		const colorGroup = getGradientColorGroup(
-			'linear-gradient(45deg, red, blue, green)'
-		);
-		expect( getColorLocations( colorGroup ) ).toStrictEqual( [
-			0, 0.5, 1,
-		] );
-	} );
-} );

package/src/mobile/gridicons/index.native.js

@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const fromPathData24x24 = ( pathData ) => (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d={ pathData } />
-	</SVG>
-);
-
-export const clipboard = fromPathData24x24(
-	'M16 18H8v-2h8v2zm0-6H8v2h8v-2zm2-9h-2v2h2v15H6V5h2V3H6a2 2 0 00-2 2v15a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2zm-4 2V4a2 2 0 10-4 0v1a2 2 0 00-2 2v1h8V7a2 2 0 00-2-2z'
-);
-export const posts = fromPathData24x24(
-	'M16 19H3v-2h13v2zm5-10H3v2h18V9zM3 5v2h11V5H3zm14 0v2h4V5h-4zm-6 8v2h10v-2H11zm-8 0v2h5v-2H3z'
-);
-export const pages = fromPathData24x24(
-	'M16 8H8V6h8v2zm0 2H8v2h8v-2zm4-6v12l-6 6H6c-1.105 0-2-.895-2-2V4c0-1.105.895-2 2-2h12c1.105 0 2 .895 2 2zm-2 10V4H6v16h6v-4c0-1.105.895-2 2-2h4z'
-);
-export const refresh = fromPathData24x24(
-	'M17.91 14c-.478 2.833-2.943 5-5.91 5-3.308 0-6-2.692-6-6s2.692-6 6-6h2.172l-2.086 2.086L13.5 10.5 18 6l-4.5-4.5-1.414 1.414L14.172 5H12c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.08 0 7.438-3.055 7.93-7h-2.02z'
-);
-export const noticeOutline = fromPathData24x24(
-	'M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z'
-);
-export const empty = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" />
-);
-export const search = fromPathData24x24(
-	'M21,19l-5.154-5.154C16.574,12.742,17,11.421,17,10c0-3.866-3.134-7-7-7s-7,3.134-7,7c0,3.866,3.134,7,7,7 c1.421,0,2.742-0.426,3.846-1.154L19,21L21,19z M5,10c0-2.757,2.243-5,5-5s5,2.243,5,5s-2.243,5-5,5S5,12.757,5,10z'
-);
-export default {
-	empty,
-	posts,
-	pages,
-	refresh,
-	search,
-};

package/src/mobile/html-text-input/index.native.js

@@ -1,169 +0,0 @@
-/**
- * External dependencies
- */
-import { ScrollView, TextInput } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { parse } from '@wordpress/blocks';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { addFilter, removeFilter } from '@wordpress/hooks';
-import {
-	withInstanceId,
-	compose,
-	withPreferredColorScheme,
-} from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import KeyboardAvoidingView from '../keyboard-avoiding-view';
-import styles from './style.scss';
-
-export class HTMLTextInput extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.edit = this.edit.bind( this );
-		this.stopEditing = this.stopEditing.bind( this );
-		this.getHTMLForParent = this.getHTMLForParent.bind( this );
-		addFilter(
-			'native.persist-html',
-			'html-text-input',
-			this.getHTMLForParent
-		);
-
-		this.state = {};
-	}
-
-	static getDerivedStateFromProps( props, state ) {
-		if ( state.isDirty ) {
-			return null;
-		}
-
-		return {
-			value: props.value,
-			isDirty: false,
-		};
-	}
-
-	componentWillUnmount() {
-		removeFilter( 'native.persist-html', 'html-text-input' );
-		// TODO: Blocking main thread.
-		this.stopEditing();
-	}
-
-	edit( html ) {
-		this.props.onChange( html );
-		this.setState( { value: html, isDirty: true } );
-	}
-
-	getHTMLForParent() {
-		return this.state.value;
-	}
-
-	stopEditing() {
-		if ( this.state.isDirty ) {
-			this.props.onPersist( this.state.value );
-			this.setState( { isDirty: false } );
-		}
-	}
-
-	render() {
-		const {
-			editTitle,
-			getStylesFromColorScheme,
-			parentHeight,
-			style,
-			title,
-		} = this.props;
-		const titleStyle = [
-			getStylesFromColorScheme(
-				styles.htmlViewTitle,
-				styles.htmlViewTitleDark
-			),
-			style?.text && { color: style.text },
-		];
-		const htmlStyle = [
-			getStylesFromColorScheme( styles.htmlView, styles.htmlViewDark ),
-			style?.text && { color: style.text },
-		];
-		const placeholderStyle = {
-			...getStylesFromColorScheme(
-				styles.placeholder,
-				styles.placeholderDark
-			),
-			...( style?.text && { color: style.text } ),
-		};
-		return (
-			<KeyboardAvoidingView
-				style={ styles.keyboardAvoidingView }
-				parentHeight={ parentHeight }
-			>
-				<ScrollView style={ styles.scrollView }>
-					<TextInput
-						autoCorrect={ false }
-						accessibilityLabel="html-view-title"
-						textAlignVertical="center"
-						numberOfLines={ 1 }
-						style={ titleStyle }
-						value={ title }
-						placeholder={ __( 'Add title' ) }
-						placeholderTextColor={ placeholderStyle.color }
-						onChangeText={ editTitle }
-					/>
-					<TextInput
-						ref={ this.contentTextInputRef }
-						autoCorrect={ false }
-						accessibilityLabel="html-view-content"
-						textAlignVertical="top"
-						multiline
-						style={ htmlStyle }
-						value={ this.state.value }
-						onChangeText={ this.edit }
-						onBlur={ this.stopEditing }
-						placeholder={ __( 'Start writing…' ) }
-						placeholderTextColor={ placeholderStyle.color }
-						scrollEnabled={ false }
-						// [Only iOS] This prop prevents the text input from
-						// automatically getting focused after scrolling
-						// content.
-						rejectResponderTermination={ false }
-					/>
-				</ScrollView>
-			</KeyboardAvoidingView>
-		);
-	}
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { getEditedPostAttribute, getEditedPostContent } =
-			select( 'core/editor' );
-
-		return {
-			title: getEditedPostAttribute( 'title' ),
-			value: getEditedPostContent(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { editPost, resetEditorBlocks } = dispatch( 'core/editor' );
-		return {
-			editTitle( title ) {
-				editPost( { title } );
-			},
-			onChange( content ) {
-				editPost( { content } );
-			},
-			onPersist( content ) {
-				const blocks = parse( content );
-				resetEditorBlocks( blocks );
-			},
-		};
-	} ),
-	withInstanceId,
-	withPreferredColorScheme,
-] )( HTMLTextInput );

package/src/mobile/html-text-input/style.android.scss

@@ -1,8 +0,0 @@
-@import "./style.scss";
-
-.htmlViewTitle {
-	font-family: $htmlFont;
-	padding-left: $padding;
-	padding-right: $padding;
-	margin-top: $padding * 2;
-}

package/src/mobile/html-text-input/style.ios.scss

@@ -1,10 +0,0 @@
-@import "./style.scss";
-
-.htmlViewTitle {
-	font-family: $htmlFont;
-	padding-left: $padding;
-	padding-right: $padding;
-	padding-top: $padding;
-	padding-bottom: $padding;
-	margin-top: $padding * 2;
-}

package/src/mobile/html-text-input/style.scss

@@ -1,45 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-
-$padding: 8;
-$htmlFont: $default-monospace-font;
-$textColorDark: $white;
-
-.keyboardAvoidingView {
-	position: absolute;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-}
-
-.container {
-	flex: 1;
-}
-
-.placeholder {
-	color: $gray;
-}
-
-.placeholderDark {
-	color: $gray-50;
-}
-
-.htmlView {
-	font-family: $htmlFont;
-	padding-left: $padding;
-	padding-right: $padding;
-	padding-top: $padding;
-	padding-bottom: $padding + 16;
-}
-
-.htmlViewDark {
-	color: $textColorDark;
-}
-
-.scrollView {
-	flex: 1;
-}
-
-.htmlViewTitleDark {
-	color: $textColorDark;
-}

package/src/mobile/html-text-input/test/__snapshots__/index.native.js.snap

@@ -1,48 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`HTMLTextInput HTMLTextInput renders and matches snapshot 1`] = `
-<View
-  onLayout={[Function]}
->
-  <RCTScrollView>
-    <View>
-      <TextInput
-        accessibilityLabel="html-view-title"
-        autoCorrect={false}
-        numberOfLines={1}
-        placeholder="Add title"
-        placeholderTextColor="white"
-        style={
-          [
-            {
-              "color": "white",
-            },
-            undefined,
-          ]
-        }
-        textAlignVertical="center"
-      />
-      <TextInput
-        accessibilityLabel="html-view-content"
-        autoCorrect={false}
-        multiline={true}
-        onBlur={[Function]}
-        onChangeText={[Function]}
-        placeholder="Start writing…"
-        placeholderTextColor="white"
-        rejectResponderTermination={false}
-        scrollEnabled={false}
-        style={
-          [
-            {
-              "color": "white",
-            },
-            undefined,
-          ]
-        }
-        textAlignVertical="top"
-      />
-    </View>
-  </RCTScrollView>
-</View>
-`;