fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,16 @@
/**
* WordPress dependencies
*/
import { safeDecodeURI } from '@wordpress/url';
export const parseAudioUrl = src => {
const decodedURI = safeDecodeURI(src);
const fileName = decodedURI.split('#').shift().split('?').shift().split('/').pop();
const parts = fileName.split('.');
const extension = parts.length === 2 ? parts.pop().toUpperCase() + ' ' : '';
const title = parts.join('.');
return {
title,
extension
};
};
//# sourceMappingURL=audio-url-parser.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["safeDecodeURI","parseAudioUrl","src","decodedURI","fileName","split","shift","pop","parts","extension","length","toUpperCase","title","join"],"sources":["@wordpress/components/src/mobile/audio-player/audio-url-parser.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { safeDecodeURI } from '@wordpress/url';\n\nexport const parseAudioUrl = ( src ) => {\n\tconst decodedURI = safeDecodeURI( src );\n\tconst fileName = decodedURI\n\t\t.split( '#' )\n\t\t.shift()\n\t\t.split( '?' )\n\t\t.shift()\n\t\t.split( '/' )\n\t\t.pop();\n\n\tconst parts = fileName.split( '.' );\n\tconst extension = parts.length === 2 ? parts.pop().toUpperCase() + ' ' : '';\n\tconst title = parts.join( '.' );\n\treturn { title, extension };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,gBAAgB;AAE9C,OAAO,MAAMC,aAAa,GAAKC,GAAG,IAAM;EACvC,MAAMC,UAAU,GAAGH,aAAa,CAAEE,GAAI,CAAC;EACvC,MAAME,QAAQ,GAAGD,UAAU,CACzBE,KAAK,CAAE,GAAI,CAAC,CACZC,KAAK,CAAC,CAAC,CACPD,KAAK,CAAE,GAAI,CAAC,CACZC,KAAK,CAAC,CAAC,CACPD,KAAK,CAAE,GAAI,CAAC,CACZE,GAAG,CAAC,CAAC;EAEP,MAAMC,KAAK,GAAGJ,QAAQ,CAACC,KAAK,CAAE,GAAI,CAAC;EACnC,MAAMI,SAAS,GAAGD,KAAK,CAACE,MAAM,KAAK,CAAC,GAAGF,KAAK,CAACD,GAAG,CAAC,CAAC,CAACI,WAAW,CAAC,CAAC,GAAG,GAAG,GAAG,EAAE;EAC3E,MAAMC,KAAK,GAAGJ,KAAK,CAACK,IAAI,CAAE,GAAI,CAAC;EAC/B,OAAO;IAAED,KAAK;IAAEH;EAAU,CAAC;AAC5B,CAAC"}

View File

@@ -0,0 +1,155 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { Text, TouchableWithoutFeedback, Linking, Alert, Platform } from 'react-native';
import { default as VideoPlayer } from 'react-native-video';
/**
* WordPress dependencies
*/
import { View } from '@wordpress/primitives';
import { Icon, useEditorColorScheme } from '@wordpress/components';
import { withPreferredColorScheme } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { audio, warning } from '@wordpress/icons';
import { requestImageFailedRetryDialog, requestImageUploadCancelDialog } from '@wordpress/react-native-bridge';
import { getProtocol } from '@wordpress/url';
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import styles from './styles.scss';
import { parseAudioUrl } from './audio-url-parser.native';
const isIOS = Platform.OS === 'ios';
function Player({
isUploadInProgress,
isUploadFailed,
attributes,
isSelected
}) {
const {
id,
src
} = attributes;
const [paused, setPaused] = useState(true);
const onPressListen = () => {
if (src) {
if (isIOS && this.player) {
this.player.presentFullscreenPlayer();
return;
}
Linking.canOpenURL(src).then(supported => {
if (!supported) {
Alert.alert(__('Problem opening the audio'), __('No application can handle this request.'));
} else {
return Linking.openURL(src);
}
}).catch(() => {
Alert.alert(__('Problem opening the audio'), __('An unknown error occurred. Please try again.'));
});
}
};
const containerStyle = useEditorColorScheme(styles.container, styles.containerDark);
const iconStyle = useEditorColorScheme(styles.icon, styles.iconDark);
const iconDisabledStyle = useEditorColorScheme(styles.iconDisabled, styles.iconDisabledDark);
const isDisabled = isUploadFailed || isUploadInProgress;
const finalIconStyle = {
...iconStyle,
...(isDisabled && iconDisabledStyle)
};
const iconContainerStyle = useEditorColorScheme(styles.iconContainer, styles.iconContainerDark);
const titleContainerStyle = {
...styles.titleContainer,
...(isIOS ? styles.titleContainerIOS : styles.titleContainerAndroid)
};
const titleStyle = useEditorColorScheme(styles.title, styles.titleDark);
const uploadFailedStyle = useEditorColorScheme(styles.uploadFailed, styles.uploadFailedDark);
const subtitleStyle = useEditorColorScheme(styles.subtitle, styles.subtitleDark);
const finalSubtitleStyle = {
...subtitleStyle,
...(isUploadFailed && uploadFailedStyle)
};
const buttonBackgroundStyle = useEditorColorScheme(styles.buttonBackground, styles.buttonBackgroundDark);
let title = '';
let extension = '';
if (src) {
const result = parseAudioUrl(src);
extension = result.extension;
title = result.title;
}
const getSubtitleValue = () => {
if (isUploadInProgress) {
return __('Uploading…');
}
if (isUploadFailed) {
return __('Failed to insert audio file. Please tap for options.');
}
return extension +
// translators: displays audio file extension. e.g. MP3 audio file
__('audio file');
};
function onAudioUploadCancelDialog() {
if (isUploadInProgress) {
requestImageUploadCancelDialog(id);
} else if (id && getProtocol(src) === 'file:') {
requestImageFailedRetryDialog(id);
}
}
return createElement(TouchableWithoutFeedback, {
accessible: !isSelected,
disabled: !isSelected,
onPress: onAudioUploadCancelDialog
}, createElement(View, {
style: containerStyle
}, createElement(View, {
style: iconContainerStyle
}, createElement(Icon, {
icon: audio,
style: finalIconStyle,
size: 24
})), createElement(View, {
style: titleContainerStyle
}, createElement(Text, {
style: titleStyle
}, title), createElement(View, {
style: styles.subtitleContainer
}, isUploadFailed && createElement(Icon, {
icon: warning,
style: {
...styles.errorIcon,
...uploadFailedStyle
},
size: 16
}), createElement(Text, {
style: finalSubtitleStyle
}, getSubtitleValue()))), !isDisabled && createElement(TouchableWithoutFeedback, {
accessibilityLabel: __('Audio Player'),
accessibilityRole: 'button',
accessibilityHint: __('Double tap to listen the audio file'),
onPress: onPressListen
}, createElement(View, {
style: buttonBackgroundStyle
}, createElement(Text, {
style: styles.buttonText
}, __('OPEN')))), isIOS && createElement(VideoPlayer, {
source: {
uri: src
},
paused: paused,
ref: ref => {
this.player = ref;
},
controls: false,
ignoreSilentSwitch: 'ignore',
onFullscreenPlayerWillPresent: () => {
setPaused(false);
},
onFullscreenPlayerDidDismiss: () => {
setPaused(true);
}
})));
}
export default withPreferredColorScheme(Player);
//# sourceMappingURL=index.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,10 @@
/**
* WordPress dependencies
*/
import { createSlotFill } from '@wordpress/components';
const {
Fill,
Slot
} = createSlotFill('__unstableAutocompletionItemsSlot');
export { Fill as __unstableAutocompletionItemsFill, Slot as __unstableAutocompletionItemsSlot };
//# sourceMappingURL=autocompletion-items.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["createSlotFill","Fill","Slot","__unstableAutocompletionItemsFill","__unstableAutocompletionItemsSlot"],"sources":["@wordpress/components/src/mobile/autocompletion-items.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\n\nconst { Fill, Slot } = createSlotFill( '__unstableAutocompletionItemsSlot' );\n\nexport {\n\tFill as __unstableAutocompletionItemsFill,\n\tSlot as __unstableAutocompletionItemsSlot,\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,uBAAuB;AAEtD,MAAM;EAAEC,IAAI;EAAEC;AAAK,CAAC,GAAGF,cAAc,CAAE,mCAAoC,CAAC;AAE5E,SACCC,IAAI,IAAIE,iCAAiC,EACzCD,IAAI,IAAIE,iCAAiC"}

View File

@@ -0,0 +1,28 @@
import { createElement, Fragment } from "react";
/**
* External dependencies
*/
import { View, Text } from 'react-native';
/**
* WordPress dependencies
*/
import { withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import styles from './style.scss';
const Badge = ({
label,
children,
show = true
}) => {
return createElement(Fragment, null, children, createElement(View, {
style: styles.badgeContainer
}, show && createElement(Text, {
style: styles.badge
}, label)));
};
export default withPreferredColorScheme(Badge);
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["View","Text","withPreferredColorScheme","styles","Badge","label","children","show","createElement","Fragment","style","badgeContainer","badge"],"sources":["@wordpress/components/src/mobile/badge/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst Badge = ( { label, children, show = true } ) => {\n\treturn (\n\t\t<>\n\t\t\t{ children }\n\t\t\t<View style={ styles.badgeContainer }>\n\t\t\t\t{ show && <Text style={ styles.badge }>{ label }</Text> }\n\t\t\t</View>\n\t\t</>\n\t);\n};\n\nexport default withPreferredColorScheme( Badge );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,IAAI,QAAQ,cAAc;;AAEzC;AACA;AACA;AACA,SAASC,wBAAwB,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAEjC,MAAMC,KAAK,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,IAAI,GAAG;AAAK,CAAC,KAAM;EACrD,OACCC,aAAA,CAAAC,QAAA,QACGH,QAAQ,EACVE,aAAA,CAACR,IAAI;IAACU,KAAK,EAAGP,MAAM,CAACQ;EAAgB,GAClCJ,IAAI,IAAIC,aAAA,CAACP,IAAI;IAACS,KAAK,EAAGP,MAAM,CAACS;EAAO,GAAGP,KAAa,CACjD,CACL,CAAC;AAEL,CAAC;AAED,eAAeH,wBAAwB,CAAEE,KAAM,CAAC"}

View File

@@ -0,0 +1,85 @@
import { createElement, Fragment } from "react";
/**
* External dependencies
*/
import { View } from 'react-native';
/**
* WordPress dependencies
*/
import { useNavigation } from '@react-navigation/native';
import { useState } from '@wordpress/element';
import { Icon, chevronRight, check } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';
import { BottomSheet } from '@wordpress/components';
/**
* Internal dependencies
*/
import styles from './style.scss';
const BottomSheetSelectControl = ({
label,
icon,
options: items,
onChange,
value: selectedValue,
disabled
}) => {
const [showSubSheet, setShowSubSheet] = useState(false);
const navigation = useNavigation();
const onChangeValue = value => {
return () => {
goBack();
onChange(value);
};
};
const selectedOption = items.find(option => option.value === selectedValue);
const goBack = () => {
setShowSubSheet(false);
navigation.goBack();
};
const openSubSheet = () => {
navigation.navigate(BottomSheet.SubSheet.screenName);
setShowSubSheet(true);
};
return createElement(BottomSheet.SubSheet, {
navigationButton: createElement(BottomSheet.Cell, {
label: label,
separatorType: "none",
icon: icon,
value: selectedOption.label,
onPress: openSubSheet,
accessibilityRole: 'button',
accessibilityLabel: sprintf(
// translators: %1$s: Select control button label e.g. "Button width". %2$s: Select control option value e.g: "Auto, 25%".
__('%1$s. Currently selected: %2$s'), label, selectedOption.label),
accessibilityHint: sprintf(
// translators: %s: Select control button label e.g. "Button width"
__('Navigates to select %s'), label),
disabled: disabled
}, disabled ? null : createElement(Icon, {
icon: chevronRight
})),
showSheet: showSubSheet
}, createElement(Fragment, null, createElement(BottomSheet.NavBar, null, createElement(BottomSheet.NavBar.BackButton, {
onPress: goBack
}), createElement(BottomSheet.NavBar.Heading, null, label)), createElement(View, {
style: styles.selectControl
}, items.map((item, index) => createElement(BottomSheet.Cell, {
customActionButton: true,
separatorType: "none",
label: item.label,
icon: item.icon,
onPress: onChangeValue(item.value),
leftAlign: true,
key: index,
accessibilityRole: 'button',
accessibilityLabel: item.value === selectedValue ? sprintf(
// translators: %s: Select control option value e.g: "Auto, 25%".
__('Selected: %s'), item.label) : item.label,
accessibilityHint: __('Double tap to select')
}, item.value === selectedValue && createElement(Icon, {
icon: check
}))))));
};
export default BottomSheetSelectControl;
//# sourceMappingURL=index.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,75 @@
import { createElement, Fragment } from "react";
/**
* External dependencies
*/
import { TextInput } from 'react-native';
import { useNavigation } from '@react-navigation/native';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { Icon, chevronRight } from '@wordpress/icons';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import { BottomSheet, PanelBody, FooterMessageControl } from '@wordpress/components';
/**
* Internal dependencies
*/
import styles from './styles.scss';
const BottomSheetTextControl = ({
initialValue,
onChange,
placeholder,
label,
icon,
footerNote,
cellPlaceholder,
disabled
}) => {
const [showSubSheet, setShowSubSheet] = useState(false);
const navigation = useNavigation();
const goBack = () => {
setShowSubSheet(false);
navigation.goBack();
};
const openSubSheet = () => {
navigation.navigate(BottomSheet.SubSheet.screenName);
setShowSubSheet(true);
};
const horizontalBorderStyle = usePreferredColorSchemeStyle(styles.horizontalBorder, styles.horizontalBorderDark);
const textEditorStyle = usePreferredColorSchemeStyle(styles.textEditor, styles.textEditorDark);
return createElement(BottomSheet.SubSheet, {
navigationButton: createElement(BottomSheet.Cell, {
icon: icon,
label: label,
onPress: openSubSheet,
value: initialValue || '',
placeholder: cellPlaceholder || placeholder || '',
disabled: disabled
}, disabled ? null : createElement(Icon, {
icon: chevronRight
})),
showSheet: showSubSheet
}, createElement(Fragment, null, createElement(BottomSheet.NavBar, null, createElement(BottomSheet.NavBar.BackButton, {
onPress: goBack
}), createElement(BottomSheet.NavBar.Heading, null, label)), createElement(PanelBody, {
style: horizontalBorderStyle
}, createElement(TextInput, {
label: label,
onChangeText: text => onChange(text),
defaultValue: initialValue,
multiline: true,
placeholder: placeholder,
placeholderTextColor: '#87a6bc',
style: textEditorStyle,
textAlignVertical: 'top'
}))), footerNote && createElement(PanelBody, {
style: styles.textFooternote
}, createElement(FooterMessageControl, {
label: footerNote,
textAlign: "left"
})));
};
export default BottomSheetTextControl;
//# sourceMappingURL=index.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,39 @@
/**
* External dependencies
*/
import { Platform, UIManager } from 'react-native';
/**
* WordPress dependencies
*/
import { createContext } from '@wordpress/element';
// It's needed to set the following flags via UIManager
// to have `LayoutAnimation` working on Android
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
// Context in BottomSheet is necessary for controlling the
// transition flow between subsheets and replacing a content inside them
export const BottomSheetContext = createContext({
// Specifies whether content is currently scrolling.
isBottomSheetContentScrolling: false,
// Function called to enable scroll within bottom sheet.
shouldEnableBottomSheetScroll: () => {},
// Function called to enable/disable bottom sheet max height.
// E.g. used to extend bottom sheet on full screen in ColorPicker,
// which is helpful on small devices with set the largest font/display size.
shouldEnableBottomSheetMaxHeight: () => {},
// Callback that is called on closing bottom sheet.
onHandleClosingBottomSheet: () => {},
// Android only: Function called to control android hardware back button functionality
// Return true if the bottom-sheet default close action shouldn't be called.
onHandleHardwareButtonPress: () => {},
// Toggle full-screen styles and dimensions
setIsFullScreen: () => {}
});
export const {
Provider: BottomSheetProvider,
Consumer: BottomSheetConsumer
} = BottomSheetContext;
//# sourceMappingURL=bottom-sheet-context.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Platform","UIManager","createContext","OS","setLayoutAnimationEnabledExperimental","BottomSheetContext","isBottomSheetContentScrolling","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","onHandleClosingBottomSheet","onHandleHardwareButtonPress","setIsFullScreen","Provider","BottomSheetProvider","Consumer","BottomSheetConsumer"],"sources":["@wordpress/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Platform, UIManager } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n// It's needed to set the following flags via UIManager\n// to have `LayoutAnimation` working on Android\nif (\n\tPlatform.OS === 'android' &&\n\tUIManager.setLayoutAnimationEnabledExperimental\n) {\n\tUIManager.setLayoutAnimationEnabledExperimental( true );\n}\n\n// Context in BottomSheet is necessary for controlling the\n// transition flow between subsheets and replacing a content inside them\nexport const BottomSheetContext = createContext( {\n\t// Specifies whether content is currently scrolling.\n\tisBottomSheetContentScrolling: false,\n\t// Function called to enable scroll within bottom sheet.\n\tshouldEnableBottomSheetScroll: () => {},\n\t// Function called to enable/disable bottom sheet max height.\n\t// E.g. used to extend bottom sheet on full screen in ColorPicker,\n\t// which is helpful on small devices with set the largest font/display size.\n\tshouldEnableBottomSheetMaxHeight: () => {},\n\t// Callback that is called on closing bottom sheet.\n\tonHandleClosingBottomSheet: () => {},\n\t// Android only: Function called to control android hardware back button functionality\n\t// Return true if the bottom-sheet default close action shouldn't be called.\n\tonHandleHardwareButtonPress: () => {},\n\t// Toggle full-screen styles and dimensions\n\tsetIsFullScreen: () => {},\n} );\n\nexport const { Provider: BottomSheetProvider, Consumer: BottomSheetConsumer } =\n\tBottomSheetContext;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,SAAS,QAAQ,cAAc;AAClD;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA,IACCF,QAAQ,CAACG,EAAE,KAAK,SAAS,IACzBF,SAAS,CAACG,qCAAqC,EAC9C;EACDH,SAAS,CAACG,qCAAqC,CAAE,IAAK,CAAC;AACxD;;AAEA;AACA;AACA,OAAO,MAAMC,kBAAkB,GAAGH,aAAa,CAAE;EAChD;EACAI,6BAA6B,EAAE,KAAK;EACpC;EACAC,6BAA6B,EAAEA,CAAA,KAAM,CAAC,CAAC;EACvC;EACA;EACA;EACAC,gCAAgC,EAAEA,CAAA,KAAM,CAAC,CAAC;EAC1C;EACAC,0BAA0B,EAAEA,CAAA,KAAM,CAAC,CAAC;EACpC;EACA;EACAC,2BAA2B,EAAEA,CAAA,KAAM,CAAC,CAAC;EACrC;EACAC,eAAe,EAAEA,CAAA,KAAM,CAAC;AACzB,CAAE,CAAC;AAEH,OAAO,MAAM;EAAEC,QAAQ,EAAEC,mBAAmB;EAAEC,QAAQ,EAAEC;AAAoB,CAAC,GAC5EV,kBAAkB"}

View File

@@ -0,0 +1,18 @@
/**
* WordPress dependencies
*/
import { createContext } from '@wordpress/element';
// Navigation context in BottomSheet is necessary for controlling the
// height of navigation container.
export const BottomSheetNavigationContext = createContext({
currentHeight: {
value: 0
},
setHeight: () => {}
});
export const {
Provider: BottomSheetNavigationProvider,
Consumer: BottomSheetNavigationConsumer
} = BottomSheetNavigationContext;
//# sourceMappingURL=bottom-sheet-navigation-context.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["createContext","BottomSheetNavigationContext","currentHeight","value","setHeight","Provider","BottomSheetNavigationProvider","Consumer","BottomSheetNavigationConsumer"],"sources":["@wordpress/components/src/mobile/bottom-sheet/bottom-sheet-navigation/bottom-sheet-navigation-context.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n// Navigation context in BottomSheet is necessary for controlling the\n// height of navigation container.\nexport const BottomSheetNavigationContext = createContext( {\n\tcurrentHeight: { value: 0 },\n\tsetHeight: () => {},\n} );\n\nexport const {\n\tProvider: BottomSheetNavigationProvider,\n\tConsumer: BottomSheetNavigationConsumer,\n} = BottomSheetNavigationContext;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA,OAAO,MAAMC,4BAA4B,GAAGD,aAAa,CAAE;EAC1DE,aAAa,EAAE;IAAEC,KAAK,EAAE;EAAE,CAAC;EAC3BC,SAAS,EAAEA,CAAA,KAAM,CAAC;AACnB,CAAE,CAAC;AAEH,OAAO,MAAM;EACZC,QAAQ,EAAEC,6BAA6B;EACvCC,QAAQ,EAAEC;AACX,CAAC,GAAGP,4BAA4B"}

View File

@@ -0,0 +1,133 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
/**
* WordPress dependencies
*/
import { useContext, useMemo, useCallback, Children, useRef, cloneElement } from '@wordpress/element';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { BottomSheetNavigationContext, BottomSheetNavigationProvider } from './bottom-sheet-navigation-context';
import { BottomSheetContext } from '../bottom-sheet-context';
import styles from './styles.scss';
const AnimationSpec = {
animation: 'timing',
config: {
duration: 200,
easing: Easing.ease
}
};
const fadeConfig = ({
current
}) => {
return {
cardStyle: {
opacity: current.progress
}
};
};
const options = {
transitionSpec: {
open: AnimationSpec,
close: AnimationSpec
},
headerShown: false,
gestureEnabled: false,
cardStyleInterpolator: fadeConfig,
keyboardHandlingEnabled: false
};
const HEIGHT_ANIMATION_DURATION = 300;
const DEFAULT_HEIGHT = 1;
function BottomSheetNavigationContainer({
children,
animate,
main,
theme,
style,
testID
}) {
const Stack = useRef(createStackNavigator()).current;
const navigationContext = useContext(BottomSheetNavigationContext);
const {
maxHeight: sheetMaxHeight,
isMaxHeightSet: isSheetMaxHeightSet
} = useContext(BottomSheetContext);
const currentHeight = useSharedValue(navigationContext.currentHeight?.value || DEFAULT_HEIGHT);
const backgroundStyle = usePreferredColorSchemeStyle(styles.background, styles.backgroundDark);
const defaultTheme = useMemo(() => ({
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: backgroundStyle.backgroundColor
}
}), [backgroundStyle.backgroundColor]);
const _theme = theme || defaultTheme;
const setHeight = useCallback(height => {
if (height > DEFAULT_HEIGHT && Math.round(height) !== Math.round(currentHeight.value)) {
// If max height is set in the bottom sheet, we clamp
// the new height using that value.
const newHeight = isSheetMaxHeightSet ? Math.min(sheetMaxHeight, height) : height;
const shouldAnimate = animate && currentHeight.value !== DEFAULT_HEIGHT;
if (shouldAnimate) {
currentHeight.value = withTiming(newHeight, {
duration: HEIGHT_ANIMATION_DURATION,
easing: Easing.out(Easing.cubic)
});
} else {
currentHeight.value = newHeight;
}
}
}, [animate, currentHeight, isSheetMaxHeightSet, sheetMaxHeight]);
const animatedStyles = useAnimatedStyle(() => ({
height: currentHeight.value
}));
const screens = useMemo(() => {
return Children.map(children, child => {
let screen = child;
const {
name,
...otherProps
} = child.props;
if (!main) {
screen = cloneElement(child, {
...child.props,
isNested: true
});
}
return createElement(Stack.Screen, {
name: name,
...otherProps,
children: () => screen
});
});
}, [children, main]);
return useMemo(() => {
return createElement(Animated.View, {
style: [style, animatedStyles],
testID: testID
}, createElement(BottomSheetNavigationProvider, {
value: {
setHeight,
currentHeight
}
}, main ? createElement(NavigationContainer, {
theme: _theme
}, createElement(Stack.Navigator, {
screenOptions: options,
detachInactiveScreens: false
}, screens)) : createElement(Stack.Navigator, {
screenOptions: options,
detachInactiveScreens: false
}, screens)));
}, [_theme, animatedStyles, currentHeight, main, screens, setHeight, style, testID]);
}
export default BottomSheetNavigationContainer;
//# sourceMappingURL=navigation-container.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,115 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { useIsFocused, useNavigation, useFocusEffect } from '@react-navigation/native';
import { ScrollView, TouchableHighlight, useWindowDimensions, View } from 'react-native';
/**
* WordPress dependencies
*/
import { BottomSheetContext } from '@wordpress/components';
import { useRef, useCallback, useContext, useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context';
import styles from './styles.scss';
const BottomSheetNavigationScreen = ({
children,
fullScreen,
isScrollable,
isNested,
name
}) => {
const navigation = useNavigation();
const maxHeight = useRef(0);
const isFocused = useIsFocused();
const {
onHandleHardwareButtonPress,
shouldEnableBottomSheetMaxHeight,
setIsFullScreen,
listProps,
safeAreaBottomInset
} = useContext(BottomSheetContext);
const {
height: windowHeight
} = useWindowDimensions();
const {
setHeight
} = useContext(BottomSheetNavigationContext);
useFocusEffect(useCallback(() => {
onHandleHardwareButtonPress(() => {
if (navigation.canGoBack()) {
shouldEnableBottomSheetMaxHeight(true);
navigation.goBack();
return true;
}
onHandleHardwareButtonPress(null);
return false;
});
/**
* TODO: onHandleHardwareButtonPress stores a single value, which means
* future invocations from sibling screens can replace the callback for
* the currently active screen. Currently, the empty dependency array
* passed to useCallback here is what prevents erroneous callback
* replacements, but leveraging memoization to achieve this is brittle and
* explicitly discouraged in the React documentation.
* https://reactjs.org/docs/hooks-reference.html#usememo
*
* Ideally, we refactor onHandleHardwareButtonPress to manage multiple
* callbacks triggered based upon which screen is currently active.
*
* Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546
*/
// see https://github.com/WordPress/gutenberg/pull/41166
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []));
useFocusEffect(useCallback(() => {
if (fullScreen) {
setHeight(windowHeight);
setIsFullScreen(true);
} else if (maxHeight.current !== 0) {
setIsFullScreen(false);
setHeight(maxHeight.current);
}
return () => {};
}, [fullScreen, setHeight, setIsFullScreen, windowHeight]));
const onLayout = ({
nativeEvent
}) => {
if (fullScreen) {
return;
}
const {
height
} = nativeEvent.layout;
if (maxHeight.current !== height && isFocused) {
maxHeight.current = height;
setHeight(height);
}
};
return useMemo(() => {
return isScrollable || isNested ? createElement(View, {
onLayout: onLayout,
testID: `navigation-screen-${name}`
}, children) : createElement(ScrollView, {
...listProps
}, createElement(TouchableHighlight, {
accessible: false
}, createElement(View, {
onLayout: onLayout,
testID: `navigation-screen-${name}`
}, children, !isNested && createElement(View, {
style: {
height: safeAreaBottomInset || styles.scrollableContent.paddingBottom
}
}))));
// Disable reason: deferring this refactor to the native team.
// see https://github.com/WordPress/gutenberg/pull/41166
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [children, isFocused, safeAreaBottomInset, listProps, name, isScrollable, isNested, onLayout]);
};
export default BottomSheetNavigationScreen;
//# sourceMappingURL=navigation-screen.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,32 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { TouchableOpacity, View, Text } from 'react-native';
/**
* Internal dependencies
*/
import styles from './styles.scss';
const BottomSheetButton = ({
onPress,
disabled,
text,
color
}) => createElement(TouchableOpacity, {
accessible: true,
onPress: onPress,
disabled: disabled
}, createElement(View, {
style: {
flexDirection: 'row',
justifyContent: 'center'
}
}, createElement(Text, {
style: {
...styles.buttonText,
color
}
}, text)));
export default BottomSheetButton;
//# sourceMappingURL=button.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["TouchableOpacity","View","Text","styles","BottomSheetButton","onPress","disabled","text","color","createElement","accessible","style","flexDirection","justifyContent","buttonText"],"sources":["@wordpress/components/src/mobile/bottom-sheet/button.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { TouchableOpacity, View, Text } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nconst BottomSheetButton = ( { onPress, disabled, text, color } ) => (\n\t<TouchableOpacity\n\t\taccessible={ true }\n\t\tonPress={ onPress }\n\t\tdisabled={ disabled }\n\t>\n\t\t<View style={ { flexDirection: 'row', justifyContent: 'center' } }>\n\t\t\t<Text style={ { ...styles.buttonText, color } }>{ text }</Text>\n\t\t</View>\n\t</TouchableOpacity>\n);\n\nexport default BottomSheetButton;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;;AAE3D;AACA;AACA;AACA,OAAOC,MAAM,MAAM,eAAe;AAElC,MAAMC,iBAAiB,GAAGA,CAAE;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAM,CAAC,KAC7DC,aAAA,CAACT,gBAAgB;EAChBU,UAAU,EAAG,IAAM;EACnBL,OAAO,EAAGA,OAAS;EACnBC,QAAQ,EAAGA;AAAU,GAErBG,aAAA,CAACR,IAAI;EAACU,KAAK,EAAG;IAAEC,aAAa,EAAE,KAAK;IAAEC,cAAc,EAAE;EAAS;AAAG,GACjEJ,aAAA,CAACP,IAAI;EAACS,KAAK,EAAG;IAAE,GAAGR,MAAM,CAACW,UAAU;IAAEN;EAAM;AAAG,GAAGD,IAAY,CACzD,CACW,CAClB;AAED,eAAeH,iBAAiB"}

View File

@@ -0,0 +1,293 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { TouchableOpacity, Text, View, TextInput, I18nManager, AccessibilityInfo, Platform } from 'react-native';
/**
* WordPress dependencies
*/
import { Icon } from '@wordpress/components';
import { check } from '@wordpress/icons';
import { Component } from '@wordpress/element';
import { __, _x, sprintf } from '@wordpress/i18n';
import { withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import styles from './styles.scss';
import platformStyles from './cellStyles.scss';
import TouchableRipple from './ripple';
import LockIcon from './lock-icon';
const isIOS = Platform.OS === 'ios';
class BottomSheetCell extends Component {
constructor(props) {
super(...arguments);
this.state = {
isEditingValue: props.autoFocus || false,
isScreenReaderEnabled: false
};
this.handleScreenReaderToggled = this.handleScreenReaderToggled.bind(this);
this.isCurrent = false;
}
componentDidUpdate(prevProps, prevState) {
if (!prevState.isEditingValue && this.state.isEditingValue) {
this._valueTextInput.focus();
}
}
componentDidMount() {
this.isCurrent = true;
this.a11yInfoChangeSubscription = AccessibilityInfo.addEventListener('screenReaderChanged', this.handleScreenReaderToggled);
AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
if (this.isCurrent && isScreenReaderEnabled) {
this.setState({
isScreenReaderEnabled
});
}
});
}
componentWillUnmount() {
this.isCurrent = false;
this.a11yInfoChangeSubscription.remove();
}
handleScreenReaderToggled(isScreenReaderEnabled) {
this.setState({
isScreenReaderEnabled
});
}
typeToKeyboardType(type, step) {
let keyboardType = `default`;
if (type === `number`) {
if (step && Math.abs(step) < 1) {
keyboardType = `decimal-pad`;
} else {
keyboardType = `number-pad`;
}
}
return keyboardType;
}
render() {
const {
accessible,
accessibilityLabel,
accessibilityHint,
accessibilityRole,
disabled = false,
disabledStyle = styles.cellDisabled,
showLockIcon = true,
activeOpacity,
onPress,
onLongPress,
label,
subLabel,
value,
valuePlaceholder = '',
icon,
leftAlign,
iconStyle = {},
labelStyle = {},
valueStyle = {},
cellContainerStyle = {},
cellRowContainerStyle = {},
onChangeValue,
onSubmit,
children,
editable = true,
isSelected = false,
separatorType,
style = {},
getStylesFromColorScheme,
customActionButton,
type,
step,
borderless,
help,
...valueProps
} = this.props;
const showValue = value !== undefined;
const isValueEditable = editable && onChangeValue !== undefined;
const cellLabelStyle = getStylesFromColorScheme(styles.cellLabel, styles.cellTextDark);
const cellLabelCenteredStyle = getStylesFromColorScheme(styles.cellLabelCentered, styles.cellTextDark);
const cellLabelLeftAlignNoIconStyle = getStylesFromColorScheme(styles.cellLabelLeftAlignNoIcon, styles.cellTextDark);
const defaultMissingIconAndValue = leftAlign ? cellLabelLeftAlignNoIconStyle : cellLabelCenteredStyle;
const defaultLabelStyle = showValue || customActionButton || icon ? cellLabelStyle : defaultMissingIconAndValue;
const defaultSubLabelStyleText = getStylesFromColorScheme(styles.cellSubLabelText, styles.cellSubLabelTextDark);
const drawSeparator = separatorType && separatorType !== 'none' || separatorStyle === undefined;
const drawTopSeparator = drawSeparator && separatorType === 'topFullWidth';
const cellContainerStyles = [styles.cellContainer, cellContainerStyle];
const rowContainerStyles = [styles.cellRowContainer, cellRowContainerStyle];
const isInteractive = isValueEditable || onPress !== undefined || onLongPress !== undefined;
const onCellPress = () => {
if (isValueEditable) {
startEditing();
} else if (onPress !== undefined) {
onPress();
}
};
const finishEditing = () => {
this.setState({
isEditingValue: false
});
};
const startEditing = () => {
if (this.state.isEditingValue === false) {
this.setState({
isEditingValue: true
});
}
};
const separatorStyle = () => {
// eslint-disable-next-line @wordpress/no-unused-vars-before-return
const defaultSeparatorStyle = this.props.getStylesFromColorScheme(styles.separator, styles.separatorDark);
const cellSeparatorStyle = this.props.getStylesFromColorScheme(styles.cellSeparator, styles.cellSeparatorDark);
const leftMarginStyle = {
...cellSeparatorStyle,
...platformStyles.separatorMarginLeft
};
switch (separatorType) {
case 'leftMargin':
return leftMarginStyle;
case 'fullWidth':
case 'topFullWidth':
return defaultSeparatorStyle;
case 'none':
return undefined;
case undefined:
if (showValue && icon) {
return leftMarginStyle;
}
return defaultSeparatorStyle;
}
};
const getValueComponent = () => {
const styleRTL = I18nManager.isRTL && styles.cellValueRTL;
const cellValueStyle = this.props.getStylesFromColorScheme(styles.cellValue, styles.cellTextDark);
const textInputStyle = {
...cellValueStyle,
...valueStyle,
...styleRTL
};
const placeholderTextColor = disabled ? this.props.getStylesFromColorScheme(styles.placeholderColorDisabled, styles.placeholderColorDisabledDark).color : styles.placeholderColor.color;
const textStyle = {
...(disabled && styles.cellDisabled),
...cellValueStyle,
...valueStyle
};
// To be able to show the `middle` ellipsizeMode on editable cells
// we show the TextInput just when the user wants to edit the value,
// and the Text component to display it.
// We also show the TextInput to display placeholder.
const shouldShowPlaceholder = isInteractive && value === '';
return this.state.isEditingValue || shouldShowPlaceholder ? createElement(TextInput, {
ref: c => this._valueTextInput = c,
numberOfLines: 1,
style: textInputStyle,
value: value,
placeholder: valuePlaceholder,
placeholderTextColor: placeholderTextColor,
onChangeText: onChangeValue,
editable: isValueEditable && !disabled,
pointerEvents: this.state.isEditingValue ? 'auto' : 'none',
onFocus: startEditing,
onBlur: finishEditing,
onSubmitEditing: onSubmit,
keyboardType: this.typeToKeyboardType(type, step),
disabled: disabled,
...valueProps
}) : createElement(Text, {
style: textStyle,
numberOfLines: 1,
ellipsizeMode: 'middle'
}, value);
};
const getAccessibilityLabel = () => {
if (accessible === false) {
return;
}
if (accessibilityLabel || !showValue) {
return accessibilityLabel || label;
}
if (!value) {
return !help ? sprintf( /* translators: accessibility text. Empty state of a inline textinput cell. %s: The cell's title */
_x('%s. Empty', 'inline textinput cell'), label) :
// Separating by ',' is necessary to make a pause on urls (non-capitalized text)
sprintf( /* translators: accessibility text. Empty state of a inline textinput cell. %1: Cell title, %2: cell help. */
_x('%1$s, %2$s. Empty', 'inline textinput cell'), label, help);
}
return !help ? sprintf( /* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */
_x('%1$s, %2$s', 'inline textinput cell'), label, value) // Separating by ',' is necessary to make a pause on urls (non-capitalized text)
: sprintf( /* translators: accessibility text. Inline textinput title, value and help text.%1: Cell title, %2: cell value, , %3: cell help. */
_x('%1$s, %2$s, %3$s', 'inline textinput cell'), label, value, help);
};
const iconStyleBase = getStylesFromColorScheme(styles.icon, styles.iconDark);
const resetButtonStyle = getStylesFromColorScheme(styles.resetButton, styles.resetButtonDark);
const cellHelpStyle = [styles.cellHelpLabel, isIOS && styles.cellHelpLabelIOS];
const containerPointerEvents = this.state.isScreenReaderEnabled && accessible ? 'none' : 'auto';
const {
title,
handler
} = customActionButton || {};
const opacity = activeOpacity !== undefined ? activeOpacity : platformStyles.activeOpacity?.opacity;
return createElement(TouchableRipple, {
accessible: accessible !== undefined ? accessible : !this.state.isEditingValue,
accessibilityLabel: getAccessibilityLabel(),
accessibilityRole: accessibilityRole || 'button',
accessibilityHint: isValueEditable ? /* translators: accessibility text */
__('Double tap to edit this value') : accessibilityHint,
disabled: disabled || !isInteractive,
activeOpacity: opacity,
onPress: onCellPress,
onLongPress: onLongPress,
style: [styles.clipToBounds, style],
borderless: borderless
}, drawTopSeparator && createElement(View, {
style: separatorStyle()
}), createElement(View, {
style: cellContainerStyles,
pointerEvents: containerPointerEvents
}, createElement(View, {
style: rowContainerStyles
}, createElement(View, {
style: styles.cellRowContainer
}, icon && createElement(View, {
style: [styles.cellRowContainer, styles.cellRowIcon]
}, createElement(Icon, {
lock: true,
icon: icon,
size: 24,
fill: iconStyle.color || iconStyleBase.color,
style: iconStyle,
isPressed: false
}), createElement(View, {
style: platformStyles.labelIconSeparator
})), subLabel && label && createElement(View, null, createElement(Text, {
style: [defaultLabelStyle, labelStyle]
}, label), createElement(Text, {
style: defaultSubLabelStyleText
}, subLabel)), !subLabel && label && createElement(Text, {
style: [defaultLabelStyle, labelStyle]
}, label)), customActionButton && createElement(TouchableOpacity, {
onPress: handler,
accessibilityRole: 'button'
}, createElement(Text, {
style: resetButtonStyle
}, title))), isSelected && createElement(Icon, {
icon: check,
fill: platformStyles.isSelected.color,
testID: "bottom-sheet-cell-selected-icon"
}), showValue && getValueComponent(), createElement(View, {
style: [disabled && disabledStyle, styles.cellRowContainer],
pointerEvents: disabled ? 'none' : 'auto'
}, children), disabled && showLockIcon && createElement(View, {
style: styles.cellDisabled
}, createElement(LockIcon, null))), help && createElement(Text, {
style: [cellHelpStyle, styles.placeholderColor]
}, help), !drawTopSeparator && createElement(View, {
style: separatorStyle()
}));
}
}
export default withPreferredColorScheme(BottomSheetCell);
//# sourceMappingURL=cell.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,17 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';
// Used for the back button of the iOS Bottom Sheet
const chevronBack = createElement(SVG, {
width: "12",
height: "21",
viewBox: "0 0 12 21",
xmlns: "http://www.w3.org/2000/SVG"
}, createElement(Path, {
d: "M9.62586 20.5975C9.89618 20.8579 10.2253 21 10.6014 21C11.3888 21 12 20.3844 12 19.6032C12 19.2125 11.8472 18.8574 11.5769 18.5851L3.34966 10.4882L11.5769 2.41488C11.8472 2.14262 12 1.77565 12 1.39684C12 0.615558 11.3888 0 10.6014 0C10.2253 0 9.89618 0.142052 9.63761 0.40248L0.493634 9.3991C0.164545 9.70688 0 10.0857 0 10.5C0 10.9143 0.164545 11.2694 0.48188 11.5891L9.62586 20.5975Z"
}));
export default chevronBack;
//# sourceMappingURL=chevron-back.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["SVG","Path","chevronBack","createElement","width","height","viewBox","xmlns","d"],"sources":["@wordpress/components/src/mobile/bottom-sheet/chevron-back.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Path } from '@wordpress/primitives';\n\n// Used for the back button of the iOS Bottom Sheet\nconst chevronBack = (\n\t<SVG\n\t\twidth=\"12\"\n\t\theight=\"21\"\n\t\tviewBox=\"0 0 12 21\"\n\t\txmlns=\"http://www.w3.org/2000/SVG\"\n\t>\n\t\t<Path d=\"M9.62586 20.5975C9.89618 20.8579 10.2253 21 10.6014 21C11.3888 21 12 20.3844 12 19.6032C12 19.2125 11.8472 18.8574 11.5769 18.5851L3.34966 10.4882L11.5769 2.41488C11.8472 2.14262 12 1.77565 12 1.39684C12 0.615558 11.3888 0 10.6014 0C10.2253 0 9.89618 0.142052 9.63761 0.40248L0.493634 9.3991C0.164545 9.70688 0 10.0857 0 10.5C0 10.9143 0.164545 11.2694 0.48188 11.5891L9.62586 20.5975Z\" />\n\t</SVG>\n);\n\nexport default chevronBack;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,GAAG,EAAEC,IAAI,QAAQ,uBAAuB;;AAEjD;AACA,MAAMC,WAAW,GAChBC,aAAA,CAACH,GAAG;EACHI,KAAK,EAAC,IAAI;EACVC,MAAM,EAAC,IAAI;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC;AAA4B,GAElCJ,aAAA,CAACF,IAAI;EAACO,CAAC,EAAC;AAAmY,CAAE,CACzY,CACL;AAED,eAAeN,WAAW"}

View File

@@ -0,0 +1,35 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Icon, chevronRight } from '@wordpress/icons';
import { ColorIndicator } from '@wordpress/components';
/**
* Internal dependencies
*/
import Cell from './cell';
import styles from './styles.scss';
export default function BottomSheetColorCell(props) {
const {
color,
withColorIndicator = true,
disabled,
...cellProps
} = props;
return createElement(Cell, {
...cellProps,
accessibilityRole: 'button',
accessibilityHint: /* translators: accessibility text (hint for moving to color settings) */
__('Double tap to go to color settings'),
editable: false,
disabled: disabled,
value: withColorIndicator && !color && __('Default')
}, withColorIndicator && color && createElement(ColorIndicator, {
color: color,
style: styles.colorCircle
}), disabled ? null : createElement(Icon, {
icon: chevronRight
}));
}
//# sourceMappingURL=color-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["__","Icon","chevronRight","ColorIndicator","Cell","styles","BottomSheetColorCell","props","color","withColorIndicator","disabled","cellProps","createElement","accessibilityRole","accessibilityHint","editable","value","style","colorCircle","icon"],"sources":["@wordpress/components/src/mobile/bottom-sheet/color-cell.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Icon, chevronRight } from '@wordpress/icons';\nimport { ColorIndicator } from '@wordpress/components';\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport styles from './styles.scss';\n\nexport default function BottomSheetColorCell( props ) {\n\tconst { color, withColorIndicator = true, disabled, ...cellProps } = props;\n\n\treturn (\n\t\t<Cell\n\t\t\t{ ...cellProps }\n\t\t\taccessibilityRole={ 'button' }\n\t\t\taccessibilityHint={\n\t\t\t\t/* translators: accessibility text (hint for moving to color settings) */\n\t\t\t\t__( 'Double tap to go to color settings' )\n\t\t\t}\n\t\t\teditable={ false }\n\t\t\tdisabled={ disabled }\n\t\t\tvalue={ withColorIndicator && ! color && __( 'Default' ) }\n\t\t>\n\t\t\t{ withColorIndicator && color && (\n\t\t\t\t<ColorIndicator color={ color } style={ styles.colorCircle } />\n\t\t\t) }\n\t\t\t{ disabled ? null : <Icon icon={ chevronRight }></Icon> }\n\t\t</Cell>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,IAAI,EAAEC,YAAY,QAAQ,kBAAkB;AACrD,SAASC,cAAc,QAAQ,uBAAuB;AACtD;AACA;AACA;AACA,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,MAAM,MAAM,eAAe;AAElC,eAAe,SAASC,oBAAoBA,CAAEC,KAAK,EAAG;EACrD,MAAM;IAAEC,KAAK;IAAEC,kBAAkB,GAAG,IAAI;IAAEC,QAAQ;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAE1E,OACCK,aAAA,CAACR,IAAI;IAAA,GACCO,SAAS;IACdE,iBAAiB,EAAG,QAAU;IAC9BC,iBAAiB,EAChB;IACAd,EAAE,CAAE,oCAAqC,CACzC;IACDe,QAAQ,EAAG,KAAO;IAClBL,QAAQ,EAAGA,QAAU;IACrBM,KAAK,EAAGP,kBAAkB,IAAI,CAAED,KAAK,IAAIR,EAAE,CAAE,SAAU;EAAG,GAExDS,kBAAkB,IAAID,KAAK,IAC5BI,aAAA,CAACT,cAAc;IAACK,KAAK,EAAGA,KAAO;IAACS,KAAK,EAAGZ,MAAM,CAACa;EAAa,CAAE,CAC9D,EACCR,QAAQ,GAAG,IAAI,GAAGE,aAAA,CAACX,IAAI;IAACkB,IAAI,EAAGjB;EAAc,CAAO,CACjD,CAAC;AAET"}

View File

@@ -0,0 +1,25 @@
import { createElement } from "react";
/**
* Internal dependencies
*/
import Cell from './cell';
export default function BottomSheetCyclePickerCell(props) {
const {
value,
options,
onChangeValue,
...cellProps
} = props;
const nextOptionValue = () => {
return options[(selectedOptionIndex + 1) % options.length].value;
};
const selectedOptionIndex = options.findIndex(option => option.value === value);
const optionsContainsValue = options.length > 0 && selectedOptionIndex !== -1;
return createElement(Cell, {
onPress: () => optionsContainsValue && onChangeValue(nextOptionValue()),
editable: false,
value: optionsContainsValue && options[selectedOptionIndex].name,
...cellProps
});
}
//# sourceMappingURL=cycle-picker-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Cell","BottomSheetCyclePickerCell","props","value","options","onChangeValue","cellProps","nextOptionValue","selectedOptionIndex","length","findIndex","option","optionsContainsValue","createElement","onPress","editable","name"],"sources":["@wordpress/components/src/mobile/bottom-sheet/cycle-picker-cell.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport Cell from './cell';\n\nexport default function BottomSheetCyclePickerCell( props ) {\n\tconst { value, options, onChangeValue, ...cellProps } = props;\n\n\tconst nextOptionValue = () => {\n\t\treturn options[ ( selectedOptionIndex + 1 ) % options.length ].value;\n\t};\n\n\tconst selectedOptionIndex = options.findIndex(\n\t\t( option ) => option.value === value\n\t);\n\tconst optionsContainsValue =\n\t\toptions.length > 0 && selectedOptionIndex !== -1;\n\n\treturn (\n\t\t<Cell\n\t\t\tonPress={ () =>\n\t\t\t\toptionsContainsValue && onChangeValue( nextOptionValue() )\n\t\t\t}\n\t\t\teditable={ false }\n\t\t\tvalue={\n\t\t\t\toptionsContainsValue && options[ selectedOptionIndex ].name\n\t\t\t}\n\t\t\t{ ...cellProps }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,QAAQ;AAEzB,eAAe,SAASC,0BAA0BA,CAAEC,KAAK,EAAG;EAC3D,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC,aAAa;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAE7D,MAAMK,eAAe,GAAGA,CAAA,KAAM;IAC7B,OAAOH,OAAO,CAAE,CAAEI,mBAAmB,GAAG,CAAC,IAAKJ,OAAO,CAACK,MAAM,CAAE,CAACN,KAAK;EACrE,CAAC;EAED,MAAMK,mBAAmB,GAAGJ,OAAO,CAACM,SAAS,CAC1CC,MAAM,IAAMA,MAAM,CAACR,KAAK,KAAKA,KAChC,CAAC;EACD,MAAMS,oBAAoB,GACzBR,OAAO,CAACK,MAAM,GAAG,CAAC,IAAID,mBAAmB,KAAK,CAAC,CAAC;EAEjD,OACCK,aAAA,CAACb,IAAI;IACJc,OAAO,EAAGA,CAAA,KACTF,oBAAoB,IAAIP,aAAa,CAAEE,eAAe,CAAC,CAAE,CACzD;IACDQ,QAAQ,EAAG,KAAO;IAClBZ,KAAK,EACJS,oBAAoB,IAAIR,OAAO,CAAEI,mBAAmB,CAAE,CAACQ,IACvD;IAAA,GACIV;EAAS,CACd,CAAC;AAEJ"}

View File

@@ -0,0 +1,26 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import Cell from './cell';
import styles from './styles.scss';
function FooterMessageCell({
textAlign = 'left',
...props
}) {
return createElement(Cell, {
...props,
editable: false,
value: '',
accessibilityRole: 'text',
labelStyle: [styles.footerMessageCell, {
textAlign
}]
});
}
export default withPreferredColorScheme(FooterMessageCell);
//# sourceMappingURL=footer-message-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["withPreferredColorScheme","Cell","styles","FooterMessageCell","textAlign","props","createElement","editable","value","accessibilityRole","labelStyle","footerMessageCell"],"sources":["@wordpress/components/src/mobile/bottom-sheet/footer-message-cell.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport styles from './styles.scss';\n\nfunction FooterMessageCell( { textAlign = 'left', ...props } ) {\n\treturn (\n\t\t<Cell\n\t\t\t{ ...props }\n\t\t\teditable={ false }\n\t\t\tvalue={ '' }\n\t\t\taccessibilityRole={ 'text' }\n\t\t\tlabelStyle={ [ styles.footerMessageCell, { textAlign } ] }\n\t\t/>\n\t);\n}\n\nexport default withPreferredColorScheme( FooterMessageCell );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,wBAAwB,QAAQ,oBAAoB;AAC7D;AACA;AACA;AACA,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,MAAM,MAAM,eAAe;AAElC,SAASC,iBAAiBA,CAAE;EAAEC,SAAS,GAAG,MAAM;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC9D,OACCC,aAAA,CAACL,IAAI;IAAA,GACCI,KAAK;IACVE,QAAQ,EAAG,KAAO;IAClBC,KAAK,EAAG,EAAI;IACZC,iBAAiB,EAAG,MAAQ;IAC5BC,UAAU,EAAG,CAAER,MAAM,CAACS,iBAAiB,EAAE;MAAEP;IAAU,CAAC;EAAI,CAC1D,CAAC;AAEJ;AAEA,eAAeJ,wBAAwB,CAAEG,iBAAkB,CAAC"}

View File

@@ -0,0 +1,25 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { Text, Linking } from 'react-native';
/**
* WordPress dependencies
*/
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
* Internal dependencies
*/
import styles from './styles.scss';
function FooterMessageLink({
href,
value
}) {
const textStyle = usePreferredColorSchemeStyle(styles.footerMessageLink, styles.footerMessageLinkDark);
return createElement(Text, {
style: textStyle,
onPress: () => Linking.openURL(href)
}, value);
}
export default FooterMessageLink;
//# sourceMappingURL=footer-message-link.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Text","Linking","usePreferredColorSchemeStyle","styles","FooterMessageLink","href","value","textStyle","footerMessageLink","footerMessageLinkDark","createElement","style","onPress","openURL"],"sources":["@wordpress/components/src/mobile/bottom-sheet/footer-message-link/footer-message-link.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Text, Linking } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nfunction FooterMessageLink( { href, value } ) {\n\tconst textStyle = usePreferredColorSchemeStyle(\n\t\tstyles.footerMessageLink,\n\t\tstyles.footerMessageLinkDark\n\t);\n\treturn (\n\t\t<Text style={ textStyle } onPress={ () => Linking.openURL( href ) }>\n\t\t\t{ value }\n\t\t</Text>\n\t);\n}\n\nexport default FooterMessageLink;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,OAAO,QAAQ,cAAc;AAC5C;AACA;AACA;AACA,SAASC,4BAA4B,QAAQ,oBAAoB;AACjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,eAAe;AAElC,SAASC,iBAAiBA,CAAE;EAAEC,IAAI;EAAEC;AAAM,CAAC,EAAG;EAC7C,MAAMC,SAAS,GAAGL,4BAA4B,CAC7CC,MAAM,CAACK,iBAAiB,EACxBL,MAAM,CAACM,qBACR,CAAC;EACD,OACCC,aAAA,CAACV,IAAI;IAACW,KAAK,EAAGJ,SAAW;IAACK,OAAO,EAAGA,CAAA,KAAMX,OAAO,CAACY,OAAO,CAAER,IAAK;EAAG,GAChEC,KACG,CAAC;AAET;AAEA,eAAeF,iBAAiB"}

View File

@@ -0,0 +1,541 @@
import { createElement, Fragment } from "react";
/**
* External dependencies
*/
import { Dimensions, Keyboard, LayoutAnimation, PanResponder, Platform, ScrollView, StatusBar, Text, TouchableHighlight, View } from 'react-native';
import Modal from 'react-native-modal';
import SafeArea from 'react-native-safe-area';
/**
* WordPress dependencies
*/
import { subscribeAndroidModalClosed, showAndroidSoftKeyboard } from '@wordpress/react-native-bridge';
import { Component } from '@wordpress/element';
import { withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import styles from './styles.scss';
import Button from './button';
import Cell from './cell';
import CyclePickerCell from './cycle-picker-cell';
import PickerCell from './picker-cell';
import SwitchCell from './switch-cell';
import RangeCell from './range-cell';
import ColorCell from './color-cell';
import LinkCell from './link-cell';
import LinkSuggestionItemCell from './link-suggestion-item-cell';
import RadioCell from './radio-cell';
import NavigationScreen from './bottom-sheet-navigation/navigation-screen';
import NavigationContainer from './bottom-sheet-navigation/navigation-container';
import KeyboardAvoidingView from './keyboard-avoiding-view';
import BottomSheetSubSheet from './sub-sheet';
import NavBar from './nav-bar';
import { BottomSheetProvider } from './bottom-sheet-context';
const DEFAULT_LAYOUT_ANIMATION = LayoutAnimation.Presets.easeInEaseOut;
class BottomSheet extends Component {
constructor() {
super(...arguments);
this.onSafeAreaInsetsUpdate = this.onSafeAreaInsetsUpdate.bind(this);
this.onScroll = this.onScroll.bind(this);
this.isScrolling = this.isScrolling.bind(this);
this.onShouldEnableScroll = this.onShouldEnableScroll.bind(this);
this.onDismiss = this.onDismiss.bind(this);
this.onShouldSetBottomSheetMaxHeight = this.onShouldSetBottomSheetMaxHeight.bind(this);
this.setIsFullScreen = this.setIsFullScreen.bind(this);
this.onDimensionsChange = this.onDimensionsChange.bind(this);
this.onHeaderLayout = this.onHeaderLayout.bind(this);
this.onCloseBottomSheet = this.onCloseBottomSheet.bind(this);
this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind(this);
this.onHardwareButtonPress = this.onHardwareButtonPress.bind(this);
this.onHandleHardwareButtonPress = this.onHandleHardwareButtonPress.bind(this);
this.keyboardShow = this.keyboardShow.bind(this);
this.keyboardHide = this.keyboardHide.bind(this);
this.headerHeight = 0;
this.keyboardHeight = 0;
this.lastLayoutAnimation = null;
this.lastLayoutAnimationFinished = false;
this.state = {
safeAreaBottomInset: 0,
safeAreaTopInset: 0,
bounces: false,
maxHeight: 0,
scrollEnabled: true,
isScrolling: false,
handleClosingBottomSheet: null,
handleHardwareButtonPress: null,
isMaxHeightSet: true,
isFullScreen: this.props.isFullScreen || false
};
}
keyboardShow(e) {
if (!this.props.isVisible) {
return;
}
const {
height
} = e.endCoordinates;
this.keyboardHeight = height;
this.performKeyboardLayoutAnimation(e);
this.onSetMaxHeight();
this.props.onKeyboardShow?.();
}
keyboardHide(e) {
if (!this.props.isVisible) {
return;
}
this.keyboardHeight = 0;
this.performKeyboardLayoutAnimation(e);
this.onSetMaxHeight();
this.props.onKeyboardHide?.();
}
performKeyboardLayoutAnimation(event) {
const {
duration,
easing
} = event;
if (duration && easing) {
// This layout animation is the same as the React Native's KeyboardAvoidingView component.
// Reference: https://github.com/facebook/react-native/blob/266b21baf35e052ff28120f79c06c4f6dddc51a9/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L119-L128.
const animationConfig = {
// We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m.
duration: duration > 10 ? duration : 10,
type: LayoutAnimation.Types[easing] || 'keyboard'
};
const layoutAnimation = {
duration: animationConfig.duration,
update: animationConfig,
create: {
...animationConfig,
property: LayoutAnimation.Properties.opacity
},
delete: {
...animationConfig,
property: LayoutAnimation.Properties.opacity
}
};
this.lastLayoutAnimationFinished = false;
LayoutAnimation.configureNext(layoutAnimation, () => {
this.lastLayoutAnimationFinished = true;
});
this.lastLayoutAnimation = layoutAnimation;
} else {
// TODO: Reinstate animations, possibly replacing `LayoutAnimation` with
// more nuanced `Animated` usage or replacing our custom `BottomSheet`
// with `@gorhom/bottom-sheet`. This animation was disabled to avoid a
// preexisting bug: https://github.com/WordPress/gutenberg/issues/30562
// this.performRegularLayoutAnimation( {
// useLastLayoutAnimation: false,
// } );.
}
}
performRegularLayoutAnimation({
useLastLayoutAnimation
}) {
// On Android, we should prevent triggering multiple layout animations at the same time because it can produce visual glitches.
if (Platform.OS === 'android' && this.lastLayoutAnimation && !this.lastLayoutAnimationFinished) {
return;
}
const layoutAnimation = useLastLayoutAnimation ? this.lastLayoutAnimation || DEFAULT_LAYOUT_ANIMATION : DEFAULT_LAYOUT_ANIMATION;
this.lastLayoutAnimationFinished = false;
LayoutAnimation.configureNext(layoutAnimation, () => {
this.lastLayoutAnimationFinished = true;
});
this.lastLayoutAnimation = layoutAnimation;
}
componentDidMount() {
SafeArea.getSafeAreaInsetsForRootView().then(this.onSafeAreaInsetsUpdate);
if (Platform.OS === 'android') {
this.androidModalClosedSubscription = subscribeAndroidModalClosed(() => {
this.props.onClose();
});
}
this.dimensionsChangeSubscription = Dimensions.addEventListener('change', this.onDimensionsChange);
// 'Will' keyboard events are not available on Android.
// Reference: https://reactnative.dev/docs/0.61/keyboard#addlistener.
this.keyboardShowListener = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', this.keyboardShow);
this.keyboardHideListener = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', this.keyboardHide);
this.safeAreaEventSubscription = SafeArea.addEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate);
this.onSetMaxHeight();
}
componentWillUnmount() {
this.dimensionsChangeSubscription.remove();
this.keyboardShowListener.remove();
this.keyboardHideListener.remove();
if (this.androidModalClosedSubscription) {
this.androidModalClosedSubscription.remove();
}
if (this.props.isVisible) {
showAndroidSoftKeyboard();
}
if (this.safeAreaEventSubscription === null) {
return;
}
this.safeAreaEventSubscription.remove();
this.safeAreaEventSubscription = null;
}
onSafeAreaInsetsUpdate(result) {
const {
safeAreaBottomInset,
safeAreaTopInset
} = this.state;
if (this.safeAreaEventSubscription === null) {
return;
}
const {
safeAreaInsets
} = result;
if (safeAreaBottomInset !== safeAreaInsets.bottom || safeAreaTopInset !== safeAreaInsets.top) {
this.setState({
safeAreaBottomInset: safeAreaInsets.bottom,
safeAreaTopInset: safeAreaInsets.top
});
}
}
onSetMaxHeight() {
const {
height,
width
} = Dimensions.get('window');
const {
safeAreaBottomInset
} = this.state;
const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight : 0;
// `maxHeight` when modal is opened along with a keyboard.
const maxHeightWithOpenKeyboard = 0.95 * (Dimensions.get('window').height - this.keyboardHeight - statusBarHeight - this.headerHeight);
// In landscape orientation, set `maxHeight` to ~96% of the height.
if (width > height) {
this.setState({
maxHeight: Math.min(0.96 * height - this.headerHeight, maxHeightWithOpenKeyboard)
});
// In portrait orientation, set `maxHeight` to ~59% of the height.
} else {
this.setState({
maxHeight: Math.min(height * 0.59 - safeAreaBottomInset - this.headerHeight, maxHeightWithOpenKeyboard)
});
}
}
onDimensionsChange() {
this.onSetMaxHeight();
this.setState({
bounces: false
});
}
onHeaderLayout({
nativeEvent
}) {
const {
height
} = nativeEvent.layout;
// The layout animation should only be triggered if the header
// height has changed after being mounted.
if (this.headerHeight !== 0 && Math.round(height) !== Math.round(this.headerHeight)) {
this.performRegularLayoutAnimation({
useLastLayoutAnimation: true
});
}
this.headerHeight = height;
this.onSetMaxHeight();
}
isCloseToBottom({
layoutMeasurement,
contentOffset,
contentSize
}) {
return layoutMeasurement.height + contentOffset.y >= contentSize.height - contentOffset.y;
}
isCloseToTop({
contentOffset
}) {
return contentOffset.y < 10;
}
onScroll({
nativeEvent
}) {
if (this.isCloseToTop(nativeEvent)) {
this.setState({
bounces: false
});
} else {
this.setState({
bounces: true
});
}
}
onDismiss() {
const {
onDismiss
} = this.props;
// Restore Keyboard Visibility
showAndroidSoftKeyboard();
if (onDismiss) {
onDismiss();
}
this.onCloseBottomSheet();
}
onShouldEnableScroll(value) {
this.setState({
scrollEnabled: value
});
}
onShouldSetBottomSheetMaxHeight(value) {
this.setState({
isMaxHeightSet: value
});
}
isScrolling(value) {
this.setState({
isScrolling: value
});
}
onHandleClosingBottomSheet(action) {
this.setState({
handleClosingBottomSheet: action
});
}
onHandleHardwareButtonPress(action) {
this.setState({
handleHardwareButtonPress: action
});
}
onCloseBottomSheet() {
const {
onClose
} = this.props;
const {
handleClosingBottomSheet
} = this.state;
if (handleClosingBottomSheet) {
handleClosingBottomSheet();
this.onHandleClosingBottomSheet(null);
}
if (onClose) {
onClose();
}
this.onShouldSetBottomSheetMaxHeight(true);
}
setIsFullScreen(isFullScreen) {
if (isFullScreen !== this.state.isFullScreen) {
if (isFullScreen) {
this.setState({
isFullScreen,
isMaxHeightSet: false
});
} else {
this.setState({
isFullScreen,
isMaxHeightSet: true
});
}
}
}
onHardwareButtonPress() {
const {
onClose
} = this.props;
const {
handleHardwareButtonPress
} = this.state;
if (handleHardwareButtonPress && handleHardwareButtonPress()) {
return;
}
if (onClose) {
return onClose();
}
}
getContentStyle() {
const {
safeAreaBottomInset
} = this.state;
return {
paddingBottom: (safeAreaBottomInset || 0) + styles.scrollableContent.paddingBottom
};
}
render() {
const {
title = '',
isVisible,
leftButton,
rightButton,
header,
hideHeader,
style = {},
contentStyle = {},
getStylesFromColorScheme,
children,
withHeaderSeparator = false,
hasNavigation,
onDismiss,
...rest
} = this.props;
const {
maxHeight,
bounces,
safeAreaBottomInset,
safeAreaTopInset,
isScrolling,
scrollEnabled,
isMaxHeightSet,
isFullScreen
} = this.state;
const panResponder = PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => {
// 'swiping-to-close' option is temporarily and partially disabled
// on Android ( swipe / drag is still available in the top most area - near drag indicator).
if (Platform.OS === 'ios') {
// Activates swipe down over child Touchables if the swipe is long enough.
// With this we can adjust sensibility on the swipe vs tap gestures.
if (gestureState.dy > 3 && !bounces) {
gestureState.dy = 0;
return true;
}
}
return false;
}
});
const backgroundStyle = getStylesFromColorScheme(styles.background, styles.backgroundDark);
const bottomSheetHeaderTitleStyle = getStylesFromColorScheme(styles.bottomSheetHeaderTitle, styles.bottomSheetHeaderTitleDark);
let listStyle = {};
if (isFullScreen) {
listStyle = {
flexGrow: 1,
flexShrink: 1
};
} else if (isMaxHeightSet) {
listStyle = {
maxHeight
};
// Allow setting a "static" height of the bottom sheet
// by setting the min height to the max height.
if (this.props.setMinHeightToMaxHeight) {
listStyle.minHeight = maxHeight;
}
}
const listProps = {
disableScrollViewPanResponder: true,
bounces,
onScroll: this.onScroll,
onScrollBeginDrag: this.onScrollBeginDrag,
onScrollEndDrag: this.onScrollEndDrag,
scrollEventThrottle: 16,
contentContainerStyle: [styles.content, hideHeader && styles.emptyHeader, contentStyle, isFullScreen && {
flexGrow: 1
}],
style: listStyle,
safeAreaBottomInset,
scrollEnabled,
automaticallyAdjustContentInsets: false
};
const WrapperView = hasNavigation ? View : ScrollView;
const getHeader = () => createElement(Fragment, null, header || createElement(View, {
style: styles.bottomSheetHeader
}, createElement(View, {
style: styles.flex
}, leftButton), createElement(Text, {
style: bottomSheetHeaderTitleStyle,
maxFontSizeMultiplier: 3
}, title), createElement(View, {
style: styles.flex
}, rightButton)), withHeaderSeparator && createElement(View, {
style: styles.separator
}));
const showDragIndicator = () => {
// If iOS or not fullscreen show the drag indicator.
if (Platform.OS === 'ios' || !this.state.isFullScreen) {
return true;
}
// Otherwise check the allowDragIndicator.
return this.props.allowDragIndicator;
};
return createElement(Modal, {
isVisible: isVisible,
style: styles.bottomModal,
animationInTiming: 400,
animationOutTiming: 300,
backdropTransitionInTiming: 50,
backdropTransitionOutTiming: 50,
backdropOpacity: 0.2,
onBackdropPress: this.onCloseBottomSheet,
onBackButtonPress: this.onHardwareButtonPress,
onSwipeComplete: this.onCloseBottomSheet,
onDismiss: Platform.OS === 'ios' ? this.onDismiss : undefined,
onModalHide: Platform.OS === 'android' ? this.onDismiss : undefined,
swipeDirection: "down",
onMoveShouldSetResponder: scrollEnabled && panResponder.panHandlers.onMoveShouldSetResponder,
onMoveShouldSetResponderCapture: scrollEnabled && panResponder.panHandlers.onMoveShouldSetResponderCapture,
onAccessibilityEscape: this.onCloseBottomSheet,
testID: "bottom-sheet",
hardwareAccelerated: true,
useNativeDriverForBackdrop: true,
...rest
}, createElement(KeyboardAvoidingView, {
behavior: Platform.OS === 'ios' && 'padding',
style: {
...backgroundStyle,
borderColor: 'rgba(0, 0, 0, 0.1)',
marginTop: Platform.OS === 'ios' && isFullScreen ? safeAreaTopInset : 0,
flex: isFullScreen ? 1 : undefined,
...(Platform.OS === 'android' && isFullScreen ? styles.backgroundFullScreen : {}),
...style
},
keyboardVerticalOffset: -safeAreaBottomInset
}, createElement(View, {
style: styles.header,
onLayout: this.onHeaderLayout,
testID: `${rest.testID || 'bottom-sheet'}-header`
}, showDragIndicator() && createElement(View, {
style: styles.dragIndicator
}), !hideHeader && getHeader()), createElement(WrapperView, {
...(hasNavigation ? {
style: listProps.style
} : listProps)
}, createElement(BottomSheetProvider, {
value: {
shouldEnableBottomSheetScroll: this.onShouldEnableScroll,
shouldEnableBottomSheetMaxHeight: this.onShouldSetBottomSheetMaxHeight,
isBottomSheetContentScrolling: isScrolling,
onHandleClosingBottomSheet: this.onHandleClosingBottomSheet,
onHandleHardwareButtonPress: this.onHandleHardwareButtonPress,
listProps,
setIsFullScreen: this.setIsFullScreen,
safeAreaBottomInset,
maxHeight,
isMaxHeightSet
}
}, hasNavigation ? createElement(Fragment, null, children) : createElement(TouchableHighlight, {
accessible: false
}, createElement(Fragment, null, children))), !hasNavigation && createElement(View, {
style: {
height: safeAreaBottomInset || styles.scrollableContent.paddingBottom
}
}))));
}
}
function getWidth() {
return Math.min(Dimensions.get('window').width, styles.background.maxWidth);
}
const ThemedBottomSheet = withPreferredColorScheme(BottomSheet);
ThemedBottomSheet.getWidth = getWidth;
ThemedBottomSheet.Button = Button;
ThemedBottomSheet.Cell = Cell;
ThemedBottomSheet.SubSheet = BottomSheetSubSheet;
ThemedBottomSheet.NavBar = NavBar;
ThemedBottomSheet.CyclePickerCell = CyclePickerCell;
ThemedBottomSheet.PickerCell = PickerCell;
ThemedBottomSheet.SwitchCell = SwitchCell;
ThemedBottomSheet.RangeCell = RangeCell;
ThemedBottomSheet.ColorCell = ColorCell;
ThemedBottomSheet.LinkCell = LinkCell;
ThemedBottomSheet.LinkSuggestionItemCell = LinkSuggestionItemCell;
ThemedBottomSheet.RadioCell = RadioCell;
ThemedBottomSheet.NavigationScreen = NavigationScreen;
ThemedBottomSheet.NavigationContainer = NavigationContainer;
export default ThemedBottomSheet;
//# sourceMappingURL=index.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,111 @@
import { createElement } from "react";
/**
* 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 createElement(View, {
style: finalStyle,
...props
}, children);
}
}
KeyboardAvoidingView.defaultProps = {
enabled: true,
keyboardVerticalOffset: 0
};
export default KeyboardAvoidingView;
//# sourceMappingURL=keyboard-avoiding-view.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,34 @@
import { createElement } from "react";
/**
* 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 createElement(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
}, createElement(Icon, {
icon: chevronRight
}));
}
//# sourceMappingURL=link-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["__","link","Icon","chevronRight","Cell","styles","placeholderColor","LinkCell","value","valueMask","onPress","showIcon","createElement","icon","label","valueStyle","undefined"],"sources":["@wordpress/components/src/mobile/bottom-sheet/link-cell.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { link, Icon, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport styles from './styles.scss';\n\nconst { placeholderColor } = styles;\n\nexport default function LinkCell( {\n\tvalue,\n\tvalueMask,\n\tonPress,\n\tshowIcon = true,\n} ) {\n\treturn (\n\t\t<Cell\n\t\t\ticon={ showIcon && link }\n\t\t\tlabel={ __( 'Link to' ) }\n\t\t\t// Since this is not actually editable, we treat value as a placeholder.\n\t\t\tvalue={ valueMask || value || __( 'Search or type URL' ) }\n\t\t\tvalueStyle={\n\t\t\t\t!! ( value || valueMask ) ? undefined : placeholderColor\n\t\t\t}\n\t\t\tonPress={ onPress }\n\t\t>\n\t\t\t<Icon icon={ chevronRight }></Icon>\n\t\t</Cell>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,IAAI,EAAEC,IAAI,EAAEC,YAAY,QAAQ,kBAAkB;;AAE3D;AACA;AACA;AACA,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,MAAM,MAAM,eAAe;AAElC,MAAM;EAAEC;AAAiB,CAAC,GAAGD,MAAM;AAEnC,eAAe,SAASE,QAAQA,CAAE;EACjCC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,QAAQ,GAAG;AACZ,CAAC,EAAG;EACH,OACCC,aAAA,CAACR,IAAI;IACJS,IAAI,EAAGF,QAAQ,IAAIV,IAAM;IACzBa,KAAK,EAAGd,EAAE,CAAE,SAAU;IACtB;IAAA;IACAQ,KAAK,EAAGC,SAAS,IAAID,KAAK,IAAIR,EAAE,CAAE,oBAAqB,CAAG;IAC1De,UAAU,EACT,CAAC,EAAIP,KAAK,IAAIC,SAAS,CAAE,GAAGO,SAAS,GAAGV,gBACxC;IACDI,OAAO,EAAGA;EAAS,GAEnBE,aAAA,CAACV,IAAI;IAACW,IAAI,EAAGV;EAAc,CAAO,CAC7B,CAAC;AAET"}

View File

@@ -0,0 +1,80 @@
import { createElement } from "react";
/**
* 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 createElement(Cell, {
...props,
icon: icons[type] || empty,
onPress: pickLink,
separatorType: 'none',
cellContainerStyle: suggestionStyles.itemContainerStyle,
labelStyle: suggestionStyles.hidden,
valueStyle: suggestionStyles.hidden
}, createElement(View, {
style: suggestionStyles.containerStyle
}, createElement(Text, {
style: titleStyle,
numberOfLines: 1,
ellipsizeMode: 'middle'
}, title), createElement(Text, {
style: summaryStyle,
numberOfLines: 1,
ellipsizeMode: 'middle'
}, summary)));
}
export default LinkSuggestionItemCell;
//# sourceMappingURL=link-suggestion-item-cell.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,20 @@
import { createElement } from "react";
/**
* 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 createElement(Icon, {
icon: lock,
color: iconStyle.color,
style: iconStyle
});
}
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Icon","lock","usePreferredColorSchemeStyle","styles","LockIcon","iconStyle","icon","createElement","color","style"],"sources":["@wordpress/components/src/mobile/bottom-sheet/lock-icon/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Icon, lock } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nexport default function LockIcon() {\n\tconst iconStyle = usePreferredColorSchemeStyle(\n\t\tstyles.icon,\n\t\tstyles[ 'icon--dark' ]\n\t);\n\n\treturn <Icon icon={ lock } color={ iconStyle.color } style={ iconStyle } />;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,4BAA4B,QAAQ,oBAAoB;;AAEjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,eAAe;AAElC,eAAe,SAASC,QAAQA,CAAA,EAAG;EAClC,MAAMC,SAAS,GAAGH,4BAA4B,CAC7CC,MAAM,CAACG,IAAI,EACXH,MAAM,CAAE,YAAY,CACrB,CAAC;EAED,OAAOI,aAAA,CAACP,IAAI;IAACM,IAAI,EAAGL,IAAM;IAACO,KAAK,EAAGH,SAAS,CAACG,KAAO;IAACC,KAAK,EAAGJ;EAAW,CAAE,CAAC;AAC5E"}

View File

@@ -0,0 +1,29 @@
import { createElement } from "react";
/**
* 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 componenets.
function ActionButton({
onPress,
accessibilityLabel,
accessibilityHint,
children
}) {
return createElement(TouchableWithoutFeedback, {
onPress: onPress,
accessibilityRole: 'button',
accessibilityLabel: accessibilityLabel,
accessibilityHint: accessibilityHint
}, createElement(View, {
style: styles['action-button']
}, children));
}
export default ActionButton;
//# sourceMappingURL=action-button.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["View","TouchableWithoutFeedback","styles","ActionButton","onPress","accessibilityLabel","accessibilityHint","children","createElement","accessibilityRole","style"],"sources":["@wordpress/components/src/mobile/bottom-sheet/nav-bar/action-button.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, TouchableWithoutFeedback } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\n// Action button component is used by both Back and Apply Button componenets.\nfunction ActionButton( {\n\tonPress,\n\taccessibilityLabel,\n\taccessibilityHint,\n\tchildren,\n} ) {\n\treturn (\n\t\t<TouchableWithoutFeedback\n\t\t\tonPress={ onPress }\n\t\t\taccessibilityRole={ 'button' }\n\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\taccessibilityHint={ accessibilityHint }\n\t\t>\n\t\t\t<View style={ styles[ 'action-button' ] }>{ children }</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n}\n\nexport default ActionButton;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,wBAAwB,QAAQ,cAAc;;AAE7D;AACA;AACA;AACA,OAAOC,MAAM,MAAM,eAAe;;AAElC;AACA,SAASC,YAAYA,CAAE;EACtBC,OAAO;EACPC,kBAAkB;EAClBC,iBAAiB;EACjBC;AACD,CAAC,EAAG;EACH,OACCC,aAAA,CAACP,wBAAwB;IACxBG,OAAO,EAAGA,OAAS;IACnBK,iBAAiB,EAAG,QAAU;IAC9BJ,kBAAkB,EAAGA,kBAAoB;IACzCC,iBAAiB,EAAGA;EAAmB,GAEvCE,aAAA,CAACR,IAAI;IAACU,KAAK,EAAGR,MAAM,CAAE,eAAe;EAAI,GAAGK,QAAgB,CACnC,CAAC;AAE7B;AAEA,eAAeJ,YAAY"}

View File

@@ -0,0 +1,40 @@
import { createElement } from "react";
/**
* 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 createElement(View, {
style: styles['apply-button']
}, createElement(ActionButton, {
onPress: onPress,
accessibilityLabel: __('Apply'),
accessibilityHint: __('Applies the setting')
}, Platform.OS === 'ios' ? createElement(Text, {
style: buttonTextStyle,
maxFontSizeMultiplier: 2
}, __('Apply')) : createElement(Icon, {
icon: check,
size: 24,
style: applyButtonStyle
})));
}
export default ApplyButton;
//# sourceMappingURL=apply-button.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["View","Text","Platform","__","Icon","check","usePreferredColorSchemeStyle","styles","ActionButton","ApplyButton","onPress","buttonTextStyle","applyButtonStyle","createElement","style","accessibilityLabel","accessibilityHint","OS","maxFontSizeMultiplier","icon","size"],"sources":["@wordpress/components/src/mobile/bottom-sheet/nav-bar/apply-button.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, Platform } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Icon, check } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\nimport ActionButton from './action-button';\n\nfunction ApplyButton( { onPress } ) {\n\tconst buttonTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'button-text' ],\n\t\tstyles[ 'button-text-dark' ]\n\t);\n\n\tconst applyButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'apply-button-icon' ],\n\t\tstyles[ 'apply-button-icon-dark' ]\n\t);\n\n\treturn (\n\t\t<View style={ styles[ 'apply-button' ] }>\n\t\t\t<ActionButton\n\t\t\t\tonPress={ onPress }\n\t\t\t\taccessibilityLabel={ __( 'Apply' ) }\n\t\t\t\taccessibilityHint={ __( 'Applies the setting' ) }\n\t\t\t>\n\t\t\t\t{ Platform.OS === 'ios' ? (\n\t\t\t\t\t<Text style={ buttonTextStyle } maxFontSizeMultiplier={ 2 }>\n\t\t\t\t\t\t{ __( 'Apply' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\tstyle={ applyButtonStyle }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</ActionButton>\n\t\t</View>\n\t);\n}\n\nexport default ApplyButton;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,cAAc;;AAEnD;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAC9C,SAASC,4BAA4B,QAAQ,oBAAoB;;AAEjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,eAAe;AAClC,OAAOC,YAAY,MAAM,iBAAiB;AAE1C,SAASC,WAAWA,CAAE;EAAEC;AAAQ,CAAC,EAAG;EACnC,MAAMC,eAAe,GAAGL,4BAA4B,CACnDC,MAAM,CAAE,aAAa,CAAE,EACvBA,MAAM,CAAE,kBAAkB,CAC3B,CAAC;EAED,MAAMK,gBAAgB,GAAGN,4BAA4B,CACpDC,MAAM,CAAE,mBAAmB,CAAE,EAC7BA,MAAM,CAAE,wBAAwB,CACjC,CAAC;EAED,OACCM,aAAA,CAACb,IAAI;IAACc,KAAK,EAAGP,MAAM,CAAE,cAAc;EAAI,GACvCM,aAAA,CAACL,YAAY;IACZE,OAAO,EAAGA,OAAS;IACnBK,kBAAkB,EAAGZ,EAAE,CAAE,OAAQ,CAAG;IACpCa,iBAAiB,EAAGb,EAAE,CAAE,qBAAsB;EAAG,GAE/CD,QAAQ,CAACe,EAAE,KAAK,KAAK,GACtBJ,aAAA,CAACZ,IAAI;IAACa,KAAK,EAAGH,eAAiB;IAACO,qBAAqB,EAAG;EAAG,GACxDf,EAAE,CAAE,OAAQ,CACT,CAAC,GAEPU,aAAA,CAACT,IAAI;IACJe,IAAI,EAAGd,KAAO;IACde,IAAI,EAAG,EAAI;IACXN,KAAK,EAAGF;EAAkB,CAC1B,CAEW,CACT,CAAC;AAET;AAEA,eAAeH,WAAW"}

View File

@@ -0,0 +1,90 @@
import { createElement } from "react";
/**
* 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 createElement(View, {
style: styles['back-button']
}, createElement(ActionButton, {
onPress: onPress,
accessibilityLabel: __('Go back'),
accessibilityHint: __('Navigates to the previous content sheet')
}, icon, text && createElement(Text, {
style: buttonTextStyle,
maxFontSizeMultiplier: 2
}, text)));
}
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 = createElement(Icon, {
icon: chevronBack,
size: 21,
style: chevronLeftStyle
});
backText = __('Back');
} else {
backIcon = createElement(Icon, {
icon: arrowLeft,
size: 24,
style: arrowLeftStyle
});
}
return createElement(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 = createElement(Icon, {
icon: close,
size: 24,
style: arrowLeftStyle
});
}
return createElement(Button, {
onPress: onPress,
icon: backIcon,
text: backText
});
}
Button.Back = BackButton;
Button.Dismiss = DismissButton; // Cancel or Close Button.
export default Button;
//# sourceMappingURL=back-button.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,27 @@
import { createElement } from "react";
/**
* 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 createElement(Text, {
accessibilityRole: "header",
style: headingStyle,
maxFontSizeMultiplier: 3
}, children);
}
export default Heading;
//# sourceMappingURL=heading.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Text","usePreferredColorSchemeStyle","styles","Heading","children","headingStyle","heading","createElement","accessibilityRole","style","maxFontSizeMultiplier"],"sources":["@wordpress/components/src/mobile/bottom-sheet/nav-bar/heading.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Text } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nfunction Heading( { children } ) {\n\tconst headingStyle = usePreferredColorSchemeStyle(\n\t\tstyles.heading,\n\t\tstyles[ 'heading-dark' ]\n\t);\n\n\treturn (\n\t\t<Text\n\t\t\taccessibilityRole=\"header\"\n\t\t\tstyle={ headingStyle }\n\t\t\tmaxFontSizeMultiplier={ 3 }\n\t\t>\n\t\t\t{ children }\n\t\t</Text>\n\t);\n}\n\nexport default Heading;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA;AACA;AACA,SAASC,4BAA4B,QAAQ,oBAAoB;;AAEjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,eAAe;AAElC,SAASC,OAAOA,CAAE;EAAEC;AAAS,CAAC,EAAG;EAChC,MAAMC,YAAY,GAAGJ,4BAA4B,CAChDC,MAAM,CAACI,OAAO,EACdJ,MAAM,CAAE,cAAc,CACvB,CAAC;EAED,OACCK,aAAA,CAACP,IAAI;IACJQ,iBAAiB,EAAC,QAAQ;IAC1BC,KAAK,EAAGJ,YAAc;IACtBK,qBAAqB,EAAG;EAAG,GAEzBN,QACG,CAAC;AAET;AAEA,eAAeD,OAAO"}

View File

@@ -0,0 +1,26 @@
import { createElement } from "react";
/**
* 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 createElement(View, {
style: styles['nav-bar']
}, children);
}
NavBar.ApplyButton = ApplyButton;
NavBar.BackButton = Button.Back;
NavBar.DismissButton = Button.Dismiss;
NavBar.Heading = Heading;
export default NavBar;
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["View","ApplyButton","Button","Heading","styles","NavBar","children","createElement","style","BackButton","Back","DismissButton","Dismiss"],"sources":["@wordpress/components/src/mobile/bottom-sheet/nav-bar/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport ApplyButton from './apply-button';\nimport Button from './back-button';\nimport Heading from './heading';\nimport styles from './styles.scss';\nfunction NavBar( { children } ) {\n\treturn <View style={ styles[ 'nav-bar' ] }>{ children }</View>;\n}\n\nNavBar.ApplyButton = ApplyButton;\nNavBar.BackButton = Button.Back;\nNavBar.DismissButton = Button.Dismiss;\n\nNavBar.Heading = Heading;\n\nexport default NavBar;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;;AAEnC;AACA;AACA;AACA,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,MAAM,MAAM,eAAe;AAClC,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAOC,MAAM,MAAM,eAAe;AAClC,SAASC,MAAMA,CAAE;EAAEC;AAAS,CAAC,EAAG;EAC/B,OAAOC,aAAA,CAACP,IAAI;IAACQ,KAAK,EAAGJ,MAAM,CAAE,SAAS;EAAI,GAAGE,QAAgB,CAAC;AAC/D;AAEAD,MAAM,CAACJ,WAAW,GAAGA,WAAW;AAChCI,MAAM,CAACI,UAAU,GAAGP,MAAM,CAACQ,IAAI;AAC/BL,MAAM,CAACM,aAAa,GAAGT,MAAM,CAACU,OAAO;AAErCP,MAAM,CAACF,OAAO,GAAGA,OAAO;AAExB,eAAeE,MAAM"}

View File

@@ -0,0 +1,37 @@
import { createElement } from "react";
/**
* Internal dependencies
*/
import Cell from './cell';
import Picker from '../picker';
export default function BottomSheetPickerCell(props) {
const {
options,
hideCancelButton,
onChangeValue,
value,
...cellProps
} = props;
let picker;
const onCellPress = () => {
picker.presentPicker();
};
const onChange = newValue => {
onChangeValue(newValue);
};
const option = options.find(opt => opt.value === value);
const label = option ? option.label : value;
return createElement(Cell, {
onPress: onCellPress,
editable: false,
value: label,
...cellProps
}, createElement(Picker, {
leftAlign: true,
hideCancelButton: hideCancelButton,
ref: instance => picker = instance,
options: options,
onChange: onChange
}));
}
//# sourceMappingURL=picker-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Cell","Picker","BottomSheetPickerCell","props","options","hideCancelButton","onChangeValue","value","cellProps","picker","onCellPress","presentPicker","onChange","newValue","option","find","opt","label","createElement","onPress","editable","leftAlign","ref","instance"],"sources":["@wordpress/components/src/mobile/bottom-sheet/picker-cell.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport Picker from '../picker';\n\nexport default function BottomSheetPickerCell( props ) {\n\tconst { options, hideCancelButton, onChangeValue, value, ...cellProps } =\n\t\tprops;\n\n\tlet picker;\n\n\tconst onCellPress = () => {\n\t\tpicker.presentPicker();\n\t};\n\n\tconst onChange = ( newValue ) => {\n\t\tonChangeValue( newValue );\n\t};\n\n\tconst option = options.find( ( opt ) => opt.value === value );\n\tconst label = option ? option.label : value;\n\n\treturn (\n\t\t<Cell\n\t\t\tonPress={ onCellPress }\n\t\t\teditable={ false }\n\t\t\tvalue={ label }\n\t\t\t{ ...cellProps }\n\t\t>\n\t\t\t<Picker\n\t\t\t\tleftAlign\n\t\t\t\thideCancelButton={ hideCancelButton }\n\t\t\t\tref={ ( instance ) => ( picker = instance ) }\n\t\t\t\toptions={ options }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t</Cell>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,QAAQ;AACzB,OAAOC,MAAM,MAAM,WAAW;AAE9B,eAAe,SAASC,qBAAqBA,CAAEC,KAAK,EAAG;EACtD,MAAM;IAAEC,OAAO;IAAEC,gBAAgB;IAAEC,aAAa;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GACtEL,KAAK;EAEN,IAAIM,MAAM;EAEV,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACzBD,MAAM,CAACE,aAAa,CAAC,CAAC;EACvB,CAAC;EAED,MAAMC,QAAQ,GAAKC,QAAQ,IAAM;IAChCP,aAAa,CAAEO,QAAS,CAAC;EAC1B,CAAC;EAED,MAAMC,MAAM,GAAGV,OAAO,CAACW,IAAI,CAAIC,GAAG,IAAMA,GAAG,CAACT,KAAK,KAAKA,KAAM,CAAC;EAC7D,MAAMU,KAAK,GAAGH,MAAM,GAAGA,MAAM,CAACG,KAAK,GAAGV,KAAK;EAE3C,OACCW,aAAA,CAAClB,IAAI;IACJmB,OAAO,EAAGT,WAAa;IACvBU,QAAQ,EAAG,KAAO;IAClBb,KAAK,EAAGU,KAAO;IAAA,GACVT;EAAS,GAEdU,aAAA,CAACjB,MAAM;IACNoB,SAAS;IACThB,gBAAgB,EAAGA,gBAAkB;IACrCiB,GAAG,EAAKC,QAAQ,IAAQd,MAAM,GAAGc,QAAY;IAC7CnB,OAAO,EAAGA,OAAS;IACnBQ,QAAQ,EAAGA;EAAU,CACrB,CACI,CAAC;AAET"}

View File

@@ -0,0 +1,35 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Icon, check } from '@wordpress/icons';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
* Internal dependencies
*/
import Cell from './cell';
import styles from './styles.scss';
export default function BottomSheetRadioCell(props) {
const {
selected,
...cellProps
} = props;
const selectedIconStyle = usePreferredColorSchemeStyle(styles.selectedIcon, styles.selectedIconDark);
return createElement(Cell, {
...cellProps,
accessibilityRole: 'radio',
accessibilityState: {
selected
},
accessibilityHint: /* translators: accessibility text (hint for selecting option) */
__('Double tap to select the option'),
editable: false,
value: '',
showLockIcon: selected
}, selected && createElement(Icon, {
icon: check,
style: selectedIconStyle
}));
}
//# sourceMappingURL=radio-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["__","Icon","check","usePreferredColorSchemeStyle","Cell","styles","BottomSheetRadioCell","props","selected","cellProps","selectedIconStyle","selectedIcon","selectedIconDark","createElement","accessibilityRole","accessibilityState","accessibilityHint","editable","value","showLockIcon","icon","style"],"sources":["@wordpress/components/src/mobile/bottom-sheet/radio-cell.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Icon, check } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport styles from './styles.scss';\n\nexport default function BottomSheetRadioCell( props ) {\n\tconst { selected, ...cellProps } = props;\n\n\tconst selectedIconStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selectedIcon,\n\t\tstyles.selectedIconDark\n\t);\n\n\treturn (\n\t\t<Cell\n\t\t\t{ ...cellProps }\n\t\t\taccessibilityRole={ 'radio' }\n\t\t\taccessibilityState={ { selected } }\n\t\t\taccessibilityHint={\n\t\t\t\t/* translators: accessibility text (hint for selecting option) */\n\t\t\t\t__( 'Double tap to select the option' )\n\t\t\t}\n\t\t\teditable={ false }\n\t\t\tvalue={ '' }\n\t\t\tshowLockIcon={ selected }\n\t\t>\n\t\t\t{ selected && (\n\t\t\t\t<Icon icon={ check } style={ selectedIconStyle }></Icon>\n\t\t\t) }\n\t\t</Cell>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAC9C,SAASC,4BAA4B,QAAQ,oBAAoB;AACjE;AACA;AACA;AACA,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,MAAM,MAAM,eAAe;AAElC,eAAe,SAASC,oBAAoBA,CAAEC,KAAK,EAAG;EACrD,MAAM;IAAEC,QAAQ;IAAE,GAAGC;EAAU,CAAC,GAAGF,KAAK;EAExC,MAAMG,iBAAiB,GAAGP,4BAA4B,CACrDE,MAAM,CAACM,YAAY,EACnBN,MAAM,CAACO,gBACR,CAAC;EAED,OACCC,aAAA,CAACT,IAAI;IAAA,GACCK,SAAS;IACdK,iBAAiB,EAAG,OAAS;IAC7BC,kBAAkB,EAAG;MAAEP;IAAS,CAAG;IACnCQ,iBAAiB,EAChB;IACAhB,EAAE,CAAE,iCAAkC,CACtC;IACDiB,QAAQ,EAAG,KAAO;IAClBC,KAAK,EAAG,EAAI;IACZC,YAAY,EAAGX;EAAU,GAEvBA,QAAQ,IACTK,aAAA,CAACZ,IAAI;IAACmB,IAAI,EAAGlB,KAAO;IAACmB,KAAK,EAAGX;EAAmB,CAAO,CAEnD,CAAC;AAET"}

View File

@@ -0,0 +1,258 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { Platform, AccessibilityInfo, View } from 'react-native';
import Slider from '@react-native-community/slider';
/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import Cell from './cell';
import LockIcon from './lock-icon';
import styles from './range-cell.scss';
import RangeTextInput from './range-text-input';
import { toFixed } from '../utils';
const isIOS = Platform.OS === 'ios';
class BottomSheetRangeCell extends Component {
constructor(props) {
super(props);
this.onSliderChange = this.onSliderChange.bind(this);
this.onCompleteSliderChange = this.onCompleteSliderChange.bind(this);
this.onTextInputChange = this.onTextInputChange.bind(this);
this.a11yIncrementValue = this.a11yIncrementValue.bind(this);
this.a11yDecrementValue = this.a11yDecrementValue.bind(this);
this.a11yUpdateValue = this.a11yUpdateValue.bind(this);
const {
value,
defaultValue,
minimumValue
} = props;
const initialValue = Number(value || defaultValue || minimumValue);
this.state = {
inputValue: initialValue,
sliderValue: initialValue
};
}
componentWillUnmount() {
clearTimeout(this.timeoutAnnounceValue);
}
onSliderChange(initialValue) {
const {
decimalNum,
onChange
} = this.props;
initialValue = toFixed(initialValue, decimalNum);
this.setState({
inputValue: initialValue
});
onChange(initialValue);
}
onTextInputChange(nextValue) {
const {
onChange,
onComplete
} = this.props;
this.setState({
sliderValue: nextValue
});
onChange(nextValue);
if (onComplete) {
onComplete(nextValue);
}
}
onCompleteSliderChange(nextValue) {
const {
decimalNum,
onComplete
} = this.props;
nextValue = toFixed(nextValue, decimalNum);
if (onComplete) {
onComplete(nextValue);
}
}
/*
* Only used with screenreaders like VoiceOver and TalkBack. Increments the
* value of this setting programmatically.
*/
a11yIncrementValue() {
const {
step = 5,
maximumValue,
decimalNum
} = this.props;
const {
inputValue
} = this.state;
const newValue = toFixed(inputValue + step, decimalNum);
if (newValue <= maximumValue || maximumValue === undefined) {
this.a11yUpdateValue(newValue);
}
}
/*
* Only used with screenreaders like VoiceOver and TalkBack. Decrements the
* value of this setting programmatically.
*/
a11yDecrementValue() {
const {
step = 5,
minimumValue,
decimalNum
} = this.props;
const {
sliderValue
} = this.state;
const newValue = toFixed(sliderValue - step, decimalNum);
if (newValue >= minimumValue) {
this.a11yUpdateValue(newValue);
}
}
a11yUpdateValue(newValue) {
const {
onChange,
onComplete
} = this.props;
this.setState({
sliderValue: newValue,
inputValue: newValue
});
onChange(newValue);
if (onComplete) {
onComplete(newValue);
}
this.announceValue(newValue);
}
/*
* Only used with screenreaders like VoiceOver and TalkBack.
*/
announceValue(value) {
const {
label,
unitLabel = ''
} = this.props;
if (isIOS) {
// On Android it triggers the accessibilityLabel with the value change, but
// on iOS we need to do this manually.
clearTimeout(this.timeoutAnnounceValue);
this.timeoutAnnounceValue = setTimeout(() => {
AccessibilityInfo.announceForAccessibility(`${value} ${unitLabel}, ${label}`);
}, 300);
}
}
render() {
const {
value,
defaultValue,
minimumValue = 0,
maximumValue = 10,
disabled,
step = 1,
preferredColorScheme,
minimumTrackTintColor = preferredColorScheme === 'light' ? '#00669b' : '#5198d9',
maximumTrackTintColor = isIOS ? '#e9eff3' : '#909090',
thumbTintColor = !isIOS && '#00669b',
preview,
cellContainerStyle,
shouldDisplayTextInput = true,
unitLabel = '',
settingLabel = 'Value',
openUnitPicker,
children,
decimalNum,
...cellProps
} = this.props;
const {
inputValue,
sliderValue
} = this.state;
const getAccessibilityHint = () => {
return openUnitPicker ? __('double-tap to change unit') : '';
};
const getAccessibilityLabel = () => {
return sprintf( /* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
__('%1$s. %2$s is %3$s %4$s.'), cellProps.label, settingLabel, toFixed(value, decimalNum), unitLabel);
};
const containerStyle = [styles.container, isIOS ? styles.containerIOS : styles.containerAndroid];
return createElement(View, {
accessible: true,
accessibilityRole: "adjustable",
accessibilityActions: [{
name: 'increment'
}, {
name: 'decrement'
}, {
name: 'activate'
}],
onAccessibilityAction: event => {
switch (event.nativeEvent.actionName) {
case 'increment':
this.a11yIncrementValue();
break;
case 'decrement':
this.a11yDecrementValue();
break;
case 'activate':
if (openUnitPicker) {
openUnitPicker();
}
break;
}
},
accessibilityLabel: getAccessibilityLabel(),
accessibilityHint: getAccessibilityHint()
}, createElement(View, {
importantForAccessibility: "no-hide-descendants"
}, createElement(Cell, {
...cellProps,
cellContainerStyle: [styles.cellContainerStyles, cellContainerStyle],
cellRowContainerStyle: containerStyle,
leftAlign: true,
editable: false,
activeOpacity: 1,
accessible: false,
valueStyle: styles.valueStyle,
disabled: disabled,
showLockIcon: false
}, createElement(View, {
style: containerStyle
}, preview, createElement(Slider, {
testID: `Slider ${cellProps.label}`,
value: sliderValue,
defaultValue: defaultValue,
disabled: disabled && !isIOS,
step: step,
minimumValue: minimumValue,
maximumValue: maximumValue,
minimumTrackTintColor: minimumTrackTintColor,
maximumTrackTintColor: maximumTrackTintColor,
thumbTintColor: thumbTintColor,
onValueChange: this.onSliderChange,
onSlidingComplete: this.onCompleteSliderChange,
ref: slider => {
this.sliderRef = slider;
},
style: isIOS ? styles.sliderIOS : styles.sliderAndroid
}), shouldDisplayTextInput && createElement(RangeTextInput, {
label: cellProps.label,
onChange: this.onTextInputChange,
defaultValue: `${inputValue}`,
value: inputValue,
min: minimumValue,
max: maximumValue,
step: step,
decimalNum: decimalNum
}, children), disabled && createElement(LockIcon, null)))));
}
}
export default withPreferredColorScheme(BottomSheetRangeCell);
//# sourceMappingURL=range-cell.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,215 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { AccessibilityInfo, View, TextInput, PixelRatio, AppState, Platform, Text, TouchableWithoutFeedback } from 'react-native';
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { withPreferredColorScheme } from '@wordpress/compose';
import { __, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { toFixed, removeNonDigit } from '../utils';
import styles from './styles.scss';
import borderStyles from './borderStyles.scss';
const isIOS = Platform.OS === 'ios';
class RangeTextInput extends Component {
constructor(props) {
super(props);
this.announceCurrentValue = this.announceCurrentValue.bind(this);
this.onInputFocus = this.onInputFocus.bind(this);
this.onInputBlur = this.onInputBlur.bind(this);
this.handleChangePixelRatio = this.handleChangePixelRatio.bind(this);
this.onSubmitEditing = this.onSubmitEditing.bind(this);
this.onChangeText = this.onChangeText.bind(this);
const {
value,
defaultValue,
min,
decimalNum
} = props;
const initialValue = toFixed(value || defaultValue || min, decimalNum);
const fontScale = this.getFontScale();
this.state = {
fontScale,
inputValue: initialValue,
controlValue: initialValue,
hasFocus: false
};
}
componentDidMount() {
this.appStateChangeSubscription = AppState.addEventListener('change', this.handleChangePixelRatio);
}
componentWillUnmount() {
this.appStateChangeSubscription.remove();
clearTimeout(this.timeoutAnnounceValue);
}
componentDidUpdate(prevProps, prevState) {
const {
value
} = this.props;
const {
hasFocus,
inputValue
} = this.state;
if (prevProps.value !== value) {
this.setState({
inputValue: value
});
}
if (prevState.hasFocus !== hasFocus) {
const validValue = this.validateInput(inputValue);
this.setState({
inputValue: validValue
});
}
if (!prevState.hasFocus && hasFocus) {
this._valueTextInput.focus();
}
}
getFontScale() {
return PixelRatio.getFontScale() < 1 ? 1 : PixelRatio.getFontScale();
}
handleChangePixelRatio(nextAppState) {
if (nextAppState === 'active') {
this.setState({
fontScale: this.getFontScale()
});
}
}
onInputFocus() {
this.setState({
hasFocus: true
});
}
onInputBlur() {
const {
inputValue
} = this.state;
this.onChangeText(`${inputValue}`);
this.setState({
hasFocus: false
});
}
validateInput(text) {
const {
min,
max,
decimalNum
} = this.props;
let result = min;
if (!text) {
return min;
}
if (typeof text === 'number') {
result = Math.max(text, min);
return max ? Math.min(result, max) : result;
}
result = Math.max(removeNonDigit(text, decimalNum), min);
return max ? Math.min(result, max) : result;
}
updateValue(value) {
const {
onChange
} = this.props;
const validValue = this.validateInput(value);
this.announceCurrentValue(`${validValue}`);
onChange(validValue);
}
onChangeText(textValue) {
const {
decimalNum
} = this.props;
const inputValue = removeNonDigit(textValue, decimalNum);
textValue = inputValue.replace(',', '.');
textValue = toFixed(textValue, decimalNum);
const value = this.validateInput(textValue);
this.setState({
inputValue,
controlValue: value
});
this.updateValue(value);
}
onSubmitEditing({
nativeEvent: {
text
}
}) {
const {
decimalNum
} = this.props;
const {
inputValue
} = this.state;
if (!isNaN(Number(text))) {
text = toFixed(text.replace(',', '.'), decimalNum);
const validValue = this.validateInput(text);
if (inputValue !== validValue) {
this.setState({
inputValue: validValue
});
this.announceCurrentValue(`${validValue}`);
this.props.onChange(validValue);
}
}
}
announceCurrentValue(value) {
/* translators: %s: current cell value. */
const announcement = sprintf(__('Current value is %s'), value);
AccessibilityInfo.announceForAccessibility(announcement);
}
render() {
const {
getStylesFromColorScheme,
children,
label
} = this.props;
const {
fontScale,
inputValue,
hasFocus
} = this.state;
const textInputStyle = getStylesFromColorScheme(styles.textInput, styles.textInputDark);
const textInputIOSStyle = getStylesFromColorScheme(styles.textInputIOS, styles.textInputIOSDark);
const inputBorderStyles = [textInputStyle, borderStyles.borderStyle, hasFocus && borderStyles.isSelected];
const valueFinalStyle = [Platform.select({
android: inputBorderStyles,
ios: textInputIOSStyle
}), {
width: 50 * fontScale,
borderRightWidth: children ? 1 : 0
}];
return createElement(TouchableWithoutFeedback, {
onPress: this.onInputFocus,
accessible: false
}, createElement(View, {
style: [styles.textInputContainer, isIOS && inputBorderStyles],
accessible: false
}, isIOS || hasFocus ? createElement(TextInput, {
accessibilityLabel: label,
ref: c => this._valueTextInput = c,
style: valueFinalStyle,
onChangeText: this.onChangeText,
onSubmitEditing: this.onSubmitEditing,
onFocus: this.onInputFocus,
onBlur: this.onInputBlur,
keyboardType: "numeric",
returnKeyType: "done",
numberOfLines: 1,
defaultValue: `${inputValue}`,
value: inputValue.toString(),
pointerEvents: hasFocus ? 'auto' : 'none'
}) : createElement(Text, {
style: valueFinalStyle,
numberOfLines: 1,
ellipsizeMode: "clip"
}, inputValue), children));
}
}
export default withPreferredColorScheme(RangeTextInput);
//# sourceMappingURL=range-text-input.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,54 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { Platform, TouchableOpacity, TouchableNativeFeedback, View } from 'react-native';
/**
* WordPress dependencies
*/
import { withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import rippleStyles from './ripple.native.scss';
const ANDROID_VERSION_LOLLIPOP = 21;
const ANDROID_VERSION_PIE = 28;
const TouchableRipple = ({
style,
onPress,
disabled: disabledProp,
children,
activeOpacity,
getStylesFromColorScheme,
borderless = false,
...touchableProps
}) => {
const isTouchableNativeSupported = Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
const disabled = disabledProp || !onPress;
const rippleColor = getStylesFromColorScheme(rippleStyles.ripple, rippleStyles.rippleDark).backgroundColor;
if (isTouchableNativeSupported) {
// A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
// https://github.com/facebook/react-native/issues/6480
const useForeground = Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_PIE && borderless;
return createElement(TouchableNativeFeedback, {
...touchableProps,
onPress: onPress,
disabled: disabled,
useForeground: useForeground,
background: TouchableNativeFeedback.Ripple(rippleColor, borderless)
}, createElement(View, {
style: [borderless && rippleStyles.overflow, style]
}, children));
}
return createElement(TouchableOpacity, {
...touchableProps,
onPress: onPress,
disabled: disabled,
activeOpacity: activeOpacity,
style: style
}, children);
};
export default withPreferredColorScheme(TouchableRipple);
//# sourceMappingURL=ripple.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Platform","TouchableOpacity","TouchableNativeFeedback","View","withPreferredColorScheme","rippleStyles","ANDROID_VERSION_LOLLIPOP","ANDROID_VERSION_PIE","TouchableRipple","style","onPress","disabled","disabledProp","children","activeOpacity","getStylesFromColorScheme","borderless","touchableProps","isTouchableNativeSupported","OS","Version","rippleColor","ripple","rippleDark","backgroundColor","useForeground","createElement","background","Ripple","overflow"],"sources":["@wordpress/components/src/mobile/bottom-sheet/ripple.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tPlatform,\n\tTouchableOpacity,\n\tTouchableNativeFeedback,\n\tView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport rippleStyles from './ripple.native.scss';\n\nconst ANDROID_VERSION_LOLLIPOP = 21;\nconst ANDROID_VERSION_PIE = 28;\n\nconst TouchableRipple = ( {\n\tstyle,\n\tonPress,\n\tdisabled: disabledProp,\n\tchildren,\n\tactiveOpacity,\n\tgetStylesFromColorScheme,\n\tborderless = false,\n\t...touchableProps\n} ) => {\n\tconst isTouchableNativeSupported =\n\t\tPlatform.OS === 'android' &&\n\t\tPlatform.Version >= ANDROID_VERSION_LOLLIPOP;\n\n\tconst disabled = disabledProp || ! onPress;\n\tconst rippleColor = getStylesFromColorScheme(\n\t\trippleStyles.ripple,\n\t\trippleStyles.rippleDark\n\t).backgroundColor;\n\n\tif ( isTouchableNativeSupported ) {\n\t\t// A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'\n\t\t// https://github.com/facebook/react-native/issues/6480\n\t\tconst useForeground =\n\t\t\tPlatform.OS === 'android' &&\n\t\t\tPlatform.Version >= ANDROID_VERSION_PIE &&\n\t\t\tborderless;\n\n\t\treturn (\n\t\t\t<TouchableNativeFeedback\n\t\t\t\t{ ...touchableProps }\n\t\t\t\tonPress={ onPress }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tuseForeground={ useForeground }\n\t\t\t\tbackground={ TouchableNativeFeedback.Ripple(\n\t\t\t\t\trippleColor,\n\t\t\t\t\tborderless\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<View style={ [ borderless && rippleStyles.overflow, style ] }>\n\t\t\t\t\t{ children }\n\t\t\t\t</View>\n\t\t\t</TouchableNativeFeedback>\n\t\t);\n\t}\n\n\treturn (\n\t\t<TouchableOpacity\n\t\t\t{ ...touchableProps }\n\t\t\tonPress={ onPress }\n\t\t\tdisabled={ disabled }\n\t\t\tactiveOpacity={ activeOpacity }\n\t\t\tstyle={ style }\n\t\t>\n\t\t\t{ children }\n\t\t</TouchableOpacity>\n\t);\n};\n\nexport default withPreferredColorScheme( TouchableRipple );\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,QAAQ,EACRC,gBAAgB,EAChBC,uBAAuB,EACvBC,IAAI,QACE,cAAc;;AAErB;AACA;AACA;AACA,SAASC,wBAAwB,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,OAAOC,YAAY,MAAM,sBAAsB;AAE/C,MAAMC,wBAAwB,GAAG,EAAE;AACnC,MAAMC,mBAAmB,GAAG,EAAE;AAE9B,MAAMC,eAAe,GAAGA,CAAE;EACzBC,KAAK;EACLC,OAAO;EACPC,QAAQ,EAAEC,YAAY;EACtBC,QAAQ;EACRC,aAAa;EACbC,wBAAwB;EACxBC,UAAU,GAAG,KAAK;EAClB,GAAGC;AACJ,CAAC,KAAM;EACN,MAAMC,0BAA0B,GAC/BlB,QAAQ,CAACmB,EAAE,KAAK,SAAS,IACzBnB,QAAQ,CAACoB,OAAO,IAAId,wBAAwB;EAE7C,MAAMK,QAAQ,GAAGC,YAAY,IAAI,CAAEF,OAAO;EAC1C,MAAMW,WAAW,GAAGN,wBAAwB,CAC3CV,YAAY,CAACiB,MAAM,EACnBjB,YAAY,CAACkB,UACd,CAAC,CAACC,eAAe;EAEjB,IAAKN,0BAA0B,EAAG;IACjC;IACA;IACA,MAAMO,aAAa,GAClBzB,QAAQ,CAACmB,EAAE,KAAK,SAAS,IACzBnB,QAAQ,CAACoB,OAAO,IAAIb,mBAAmB,IACvCS,UAAU;IAEX,OACCU,aAAA,CAACxB,uBAAuB;MAAA,GAClBe,cAAc;MACnBP,OAAO,EAAGA,OAAS;MACnBC,QAAQ,EAAGA,QAAU;MACrBc,aAAa,EAAGA,aAAe;MAC/BE,UAAU,EAAGzB,uBAAuB,CAAC0B,MAAM,CAC1CP,WAAW,EACXL,UACD;IAAG,GAEHU,aAAA,CAACvB,IAAI;MAACM,KAAK,EAAG,CAAEO,UAAU,IAAIX,YAAY,CAACwB,QAAQ,EAAEpB,KAAK;IAAI,GAC3DI,QACG,CACkB,CAAC;EAE5B;EAEA,OACCa,aAAA,CAACzB,gBAAgB;IAAA,GACXgB,cAAc;IACnBP,OAAO,EAAGA,OAAS;IACnBC,QAAQ,EAAGA,QAAU;IACrBG,aAAa,EAAGA,aAAe;IAC/BL,KAAK,EAAGA;EAAO,GAEbI,QACe,CAAC;AAErB,CAAC;AAED,eAAeT,wBAAwB,CAAEI,eAAgB,CAAC"}

View File

@@ -0,0 +1,222 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { AccessibilityInfo, View, Platform } from 'react-native';
/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import Cell from '../cell';
import Stepper from './stepper';
import styles from './style.scss';
import RangeTextInput from '../range-text-input';
import { toFixed } from '../../utils';
const STEP_DELAY = 200;
const DEFAULT_STEP = 1;
const isIOS = Platform.OS === 'ios';
class BottomSheetStepperCell extends Component {
constructor(props) {
super(props);
this.announceValue = this.announceValue.bind(this);
this.onDecrementValue = this.onDecrementValue.bind(this);
this.onDecrementValuePressIn = this.onDecrementValuePressIn.bind(this);
this.onIncrementValue = this.onIncrementValue.bind(this);
this.onIncrementValuePressIn = this.onIncrementValuePressIn.bind(this);
this.onPressOut = this.onPressOut.bind(this);
const {
value,
defaultValue,
min
} = props;
const initialValue = value || defaultValue || min;
this.state = {
inputValue: initialValue,
stepperValue: initialValue
};
}
componentWillUnmount() {
clearTimeout(this.timeout);
clearInterval(this.interval);
clearTimeout(this.timeoutAnnounceValue);
}
onIncrementValue() {
const {
step,
max,
onChange,
value,
decimalNum
} = this.props;
let newValue = toFixed(value + step, decimalNum);
newValue = parseInt(newValue) === newValue ? parseInt(newValue) : newValue;
if (newValue <= max || max === undefined) {
onChange(newValue);
this.setState({
inputValue: newValue
});
this.announceValue(newValue);
}
}
onDecrementValue() {
const {
step,
min,
onChange,
value,
decimalNum
} = this.props;
let newValue = toFixed(value - step, decimalNum);
newValue = parseInt(newValue) === newValue ? parseInt(newValue) : newValue;
if (newValue >= min) {
onChange(newValue);
this.setState({
inputValue: newValue
});
this.announceValue(newValue);
}
}
onIncrementValuePressIn() {
this.onIncrementValue();
this.timeout = setTimeout(() => {
this.startPressInterval(this.onIncrementValue);
}, 500);
}
onDecrementValuePressIn() {
this.onDecrementValue();
this.timeout = setTimeout(() => {
this.startPressInterval(this.onDecrementValue);
}, 500);
}
onPressOut() {
clearTimeout(this.timeout);
clearInterval(this.interval);
}
startPressInterval(callback, speed = STEP_DELAY) {
let counter = 0;
this.interval = setInterval(() => {
callback();
counter += 1;
if (counter === 10) {
clearInterval(this.interval);
this.startPressInterval(callback, speed / 2);
}
}, speed);
}
announceValue(value) {
const {
label,
unitLabel = ''
} = this.props;
if (isIOS) {
// On Android it triggers the accessibilityLabel with the value change
clearTimeout(this.timeoutAnnounceValue);
this.timeoutAnnounceValue = setTimeout(() => {
AccessibilityInfo.announceForAccessibility(`${value} ${unitLabel} ${label}`);
}, 300);
}
}
render() {
const {
label,
settingLabel = 'Value',
unitLabel = '',
icon,
min,
max,
value,
separatorType,
children,
shouldDisplayTextInput = false,
preview,
onChange,
openUnitPicker,
decimalNum,
cellContainerStyle,
disabled
} = this.props;
const {
inputValue
} = this.state;
const isMinValue = value === min;
const isMaxValue = value === max;
const labelStyle = [styles.cellLabel, !icon ? styles.cellLabelNoIcon : {}];
const getAccessibilityHint = () => {
return openUnitPicker ? __('double-tap to change unit') : '';
};
const accessibilityLabel = sprintf( /* translators: accessibility text. Inform about current value. %1$s: Control label %2$s: setting label (example: width), %3$s: Current value. %4$s: value measurement unit (example: pixels) */
__('%1$s. %2$s is %3$s %4$s.'), label, settingLabel, value, unitLabel);
const containerStyle = [styles.rowContainer, isIOS ? styles.containerIOS : styles.containerAndroid];
return createElement(View, {
accessible: true,
accessibilityRole: "adjustable",
accessibilityLabel: accessibilityLabel,
accessibilityHint: getAccessibilityHint(),
accessibilityActions: [{
name: 'increment'
}, {
name: 'decrement'
}, {
name: 'activate'
}],
onAccessibilityAction: event => {
switch (event.nativeEvent.actionName) {
case 'increment':
this.onIncrementValue();
break;
case 'decrement':
this.onDecrementValue();
break;
case 'activate':
if (openUnitPicker) {
openUnitPicker();
}
break;
}
}
}, createElement(View, {
importantForAccessibility: "no-hide-descendants"
}, createElement(Cell, {
accessible: false,
cellContainerStyle: [styles.cellContainerStyle, preview && styles.columnContainer, cellContainerStyle],
cellRowContainerStyle: preview ? containerStyle : styles.cellRowStyles,
editable: false,
icon: icon,
label: label,
labelStyle: labelStyle,
leftAlign: true,
separatorType: separatorType,
disabled: disabled
}, createElement(View, {
style: preview && containerStyle
}, preview, createElement(Stepper, {
isMaxValue: isMaxValue,
isMinValue: isMinValue,
onPressInDecrement: this.onDecrementValuePressIn,
onPressInIncrement: this.onIncrementValuePressIn,
onPressOut: this.onPressOut,
value: value,
shouldDisplayTextInput: shouldDisplayTextInput
}, shouldDisplayTextInput && createElement(RangeTextInput, {
label: label,
onChange: onChange,
defaultValue: `${inputValue}`,
value: value,
min: min,
step: 1,
decimalNum: decimalNum
}, children))))));
}
}
BottomSheetStepperCell.defaultProps = {
step: DEFAULT_STEP
};
export default withPreferredColorScheme(BottomSheetStepperCell);
//# sourceMappingURL=index.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,60 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { Text, TouchableOpacity, View } from 'react-native';
/**
* WordPress dependencies
*/
import { Icon, chevronDown, chevronUp } from '@wordpress/icons';
import { withPreferredColorScheme } from '@wordpress/compose';
/**
* Internal dependencies
*/
import styles from './style.scss';
function Stepper({
getStylesFromColorScheme,
isMaxValue,
isMinValue,
onPressInDecrement,
onPressInIncrement,
onPressOut,
value,
shouldDisplayTextInput,
children
}) {
const valueStyle = getStylesFromColorScheme(styles.value, styles.valueTextDark);
const buttonIconStyle = getStylesFromColorScheme(styles.buttonNoBg, styles.buttonNoBgTextDark);
return createElement(View, {
style: styles.container
}, createElement(TouchableOpacity, {
disabled: isMinValue,
onPressIn: onPressInDecrement,
onPressOut: onPressOut,
style: [styles.buttonNoBg, isMinValue ? {
opacity: 0.4
} : null]
}, createElement(Icon, {
icon: chevronDown,
size: 24,
color: buttonIconStyle.color
})), !shouldDisplayTextInput && createElement(Text, {
style: [valueStyle, styles.spacings]
}, value), children, createElement(TouchableOpacity, {
testID: 'Increment',
disabled: isMaxValue,
onPressIn: onPressInIncrement,
onPressOut: onPressOut,
style: [styles.buttonNoBg, isMaxValue ? {
opacity: 0.4
} : null]
}, createElement(Icon, {
icon: chevronUp,
size: 24,
color: buttonIconStyle.color
})));
}
export default withPreferredColorScheme(Stepper);
//# sourceMappingURL=stepper.android.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Text","TouchableOpacity","View","Icon","chevronDown","chevronUp","withPreferredColorScheme","styles","Stepper","getStylesFromColorScheme","isMaxValue","isMinValue","onPressInDecrement","onPressInIncrement","onPressOut","value","shouldDisplayTextInput","children","valueStyle","valueTextDark","buttonIconStyle","buttonNoBg","buttonNoBgTextDark","createElement","style","container","disabled","onPressIn","opacity","icon","size","color","spacings","testID"],"sources":["@wordpress/components/src/mobile/bottom-sheet/stepper-cell/stepper.android.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Text, TouchableOpacity, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, chevronDown, chevronUp } from '@wordpress/icons';\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nfunction Stepper( {\n\tgetStylesFromColorScheme,\n\tisMaxValue,\n\tisMinValue,\n\tonPressInDecrement,\n\tonPressInIncrement,\n\tonPressOut,\n\tvalue,\n\tshouldDisplayTextInput,\n\tchildren,\n} ) {\n\tconst valueStyle = getStylesFromColorScheme(\n\t\tstyles.value,\n\t\tstyles.valueTextDark\n\t);\n\tconst buttonIconStyle = getStylesFromColorScheme(\n\t\tstyles.buttonNoBg,\n\t\tstyles.buttonNoBgTextDark\n\t);\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<TouchableOpacity\n\t\t\t\tdisabled={ isMinValue }\n\t\t\t\tonPressIn={ onPressInDecrement }\n\t\t\t\tonPressOut={ onPressOut }\n\t\t\t\tstyle={ [\n\t\t\t\t\tstyles.buttonNoBg,\n\t\t\t\t\tisMinValue ? { opacity: 0.4 } : null,\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ chevronDown }\n\t\t\t\t\tsize={ 24 }\n\t\t\t\t\tcolor={ buttonIconStyle.color }\n\t\t\t\t/>\n\t\t\t</TouchableOpacity>\n\t\t\t{ ! shouldDisplayTextInput && (\n\t\t\t\t<Text style={ [ valueStyle, styles.spacings ] }>{ value }</Text>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<TouchableOpacity\n\t\t\t\ttestID={ 'Increment' }\n\t\t\t\tdisabled={ isMaxValue }\n\t\t\t\tonPressIn={ onPressInIncrement }\n\t\t\t\tonPressOut={ onPressOut }\n\t\t\t\tstyle={ [\n\t\t\t\t\tstyles.buttonNoBg,\n\t\t\t\t\tisMaxValue ? { opacity: 0.4 } : null,\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ chevronUp }\n\t\t\t\t\tsize={ 24 }\n\t\t\t\t\tcolor={ buttonIconStyle.color }\n\t\t\t\t/>\n\t\t\t</TouchableOpacity>\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( Stepper );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,cAAc;;AAE3D;AACA;AACA;AACA,SAASC,IAAI,EAAEC,WAAW,EAAEC,SAAS,QAAQ,kBAAkB;AAC/D,SAASC,wBAAwB,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAEjC,SAASC,OAAOA,CAAE;EACjBC,wBAAwB;EACxBC,UAAU;EACVC,UAAU;EACVC,kBAAkB;EAClBC,kBAAkB;EAClBC,UAAU;EACVC,KAAK;EACLC,sBAAsB;EACtBC;AACD,CAAC,EAAG;EACH,MAAMC,UAAU,GAAGT,wBAAwB,CAC1CF,MAAM,CAACQ,KAAK,EACZR,MAAM,CAACY,aACR,CAAC;EACD,MAAMC,eAAe,GAAGX,wBAAwB,CAC/CF,MAAM,CAACc,UAAU,EACjBd,MAAM,CAACe,kBACR,CAAC;EAED,OACCC,aAAA,CAACrB,IAAI;IAACsB,KAAK,EAAGjB,MAAM,CAACkB;EAAW,GAC/BF,aAAA,CAACtB,gBAAgB;IAChByB,QAAQ,EAAGf,UAAY;IACvBgB,SAAS,EAAGf,kBAAoB;IAChCE,UAAU,EAAGA,UAAY;IACzBU,KAAK,EAAG,CACPjB,MAAM,CAACc,UAAU,EACjBV,UAAU,GAAG;MAAEiB,OAAO,EAAE;IAAI,CAAC,GAAG,IAAI;EAClC,GAEHL,aAAA,CAACpB,IAAI;IACJ0B,IAAI,EAAGzB,WAAa;IACpB0B,IAAI,EAAG,EAAI;IACXC,KAAK,EAAGX,eAAe,CAACW;EAAO,CAC/B,CACgB,CAAC,EACjB,CAAEf,sBAAsB,IACzBO,aAAA,CAACvB,IAAI;IAACwB,KAAK,EAAG,CAAEN,UAAU,EAAEX,MAAM,CAACyB,QAAQ;EAAI,GAAGjB,KAAa,CAC/D,EACCE,QAAQ,EACVM,aAAA,CAACtB,gBAAgB;IAChBgC,MAAM,EAAG,WAAa;IACtBP,QAAQ,EAAGhB,UAAY;IACvBiB,SAAS,EAAGd,kBAAoB;IAChCC,UAAU,EAAGA,UAAY;IACzBU,KAAK,EAAG,CACPjB,MAAM,CAACc,UAAU,EACjBX,UAAU,GAAG;MAAEkB,OAAO,EAAE;IAAI,CAAC,GAAG,IAAI;EAClC,GAEHL,aAAA,CAACpB,IAAI;IACJ0B,IAAI,EAAGxB,SAAW;IAClByB,IAAI,EAAG,EAAI;IACXC,KAAK,EAAGX,eAAe,CAACW;EAAO,CAC/B,CACgB,CACb,CAAC;AAET;AAEA,eAAezB,wBAAwB,CAAEE,OAAQ,CAAC"}

View File

@@ -0,0 +1,60 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { Text, TouchableOpacity, View } from 'react-native';
/**
* WordPress dependencies
*/
import { withPreferredColorScheme } from '@wordpress/compose';
import { Icon, plus, reset } from '@wordpress/icons';
/**
* Internal dependencies
*/
import styles from './style.scss';
function Stepper({
getStylesFromColorScheme,
isMaxValue,
isMinValue,
onPressInDecrement,
onPressInIncrement,
onPressOut,
value,
children,
shouldDisplayTextInput
}) {
const valueStyle = getStylesFromColorScheme(styles.value, styles.valueTextDark);
const buttonStyle = getStylesFromColorScheme(styles.button, styles.buttonDark);
return createElement(View, {
style: styles.container
}, !shouldDisplayTextInput && createElement(Text, {
style: valueStyle
}, value), children, createElement(TouchableOpacity, {
disabled: isMinValue,
onPressIn: onPressInDecrement,
onPressOut: onPressOut,
style: [buttonStyle, isMinValue ? {
opacity: 0.4
} : null]
}, createElement(Icon, {
icon: reset,
size: 24,
color: buttonStyle.color
})), createElement(TouchableOpacity, {
testID: 'Increment',
disabled: isMaxValue,
onPressIn: onPressInIncrement,
onPressOut: onPressOut,
style: [buttonStyle, isMaxValue ? {
opacity: 0.4
} : null]
}, createElement(Icon, {
icon: plus,
size: 24,
color: buttonStyle.color
})));
}
export default withPreferredColorScheme(Stepper);
//# sourceMappingURL=stepper.ios.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Text","TouchableOpacity","View","withPreferredColorScheme","Icon","plus","reset","styles","Stepper","getStylesFromColorScheme","isMaxValue","isMinValue","onPressInDecrement","onPressInIncrement","onPressOut","value","children","shouldDisplayTextInput","valueStyle","valueTextDark","buttonStyle","button","buttonDark","createElement","style","container","disabled","onPressIn","opacity","icon","size","color","testID"],"sources":["@wordpress/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Text, TouchableOpacity, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { Icon, plus, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nfunction Stepper( {\n\tgetStylesFromColorScheme,\n\tisMaxValue,\n\tisMinValue,\n\tonPressInDecrement,\n\tonPressInIncrement,\n\tonPressOut,\n\tvalue,\n\tchildren,\n\tshouldDisplayTextInput,\n} ) {\n\tconst valueStyle = getStylesFromColorScheme(\n\t\tstyles.value,\n\t\tstyles.valueTextDark\n\t);\n\tconst buttonStyle = getStylesFromColorScheme(\n\t\tstyles.button,\n\t\tstyles.buttonDark\n\t);\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t{ ! shouldDisplayTextInput && (\n\t\t\t\t<Text style={ valueStyle }>{ value }</Text>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<TouchableOpacity\n\t\t\t\tdisabled={ isMinValue }\n\t\t\t\tonPressIn={ onPressInDecrement }\n\t\t\t\tonPressOut={ onPressOut }\n\t\t\t\tstyle={ [ buttonStyle, isMinValue ? { opacity: 0.4 } : null ] }\n\t\t\t>\n\t\t\t\t<Icon icon={ reset } size={ 24 } color={ buttonStyle.color } />\n\t\t\t</TouchableOpacity>\n\t\t\t<TouchableOpacity\n\t\t\t\ttestID={ 'Increment' }\n\t\t\t\tdisabled={ isMaxValue }\n\t\t\t\tonPressIn={ onPressInIncrement }\n\t\t\t\tonPressOut={ onPressOut }\n\t\t\t\tstyle={ [ buttonStyle, isMaxValue ? { opacity: 0.4 } : null ] }\n\t\t\t>\n\t\t\t\t<Icon icon={ plus } size={ 24 } color={ buttonStyle.color } />\n\t\t\t</TouchableOpacity>\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( Stepper );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,cAAc;;AAE3D;AACA;AACA;AACA,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,IAAI,EAAEC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;;AAEpD;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AAEjC,SAASC,OAAOA,CAAE;EACjBC,wBAAwB;EACxBC,UAAU;EACVC,UAAU;EACVC,kBAAkB;EAClBC,kBAAkB;EAClBC,UAAU;EACVC,KAAK;EACLC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,MAAMC,UAAU,GAAGT,wBAAwB,CAC1CF,MAAM,CAACQ,KAAK,EACZR,MAAM,CAACY,aACR,CAAC;EACD,MAAMC,WAAW,GAAGX,wBAAwB,CAC3CF,MAAM,CAACc,MAAM,EACbd,MAAM,CAACe,UACR,CAAC;EAED,OACCC,aAAA,CAACrB,IAAI;IAACsB,KAAK,EAAGjB,MAAM,CAACkB;EAAW,GAC7B,CAAER,sBAAsB,IACzBM,aAAA,CAACvB,IAAI;IAACwB,KAAK,EAAGN;EAAY,GAAGH,KAAa,CAC1C,EACCC,QAAQ,EACVO,aAAA,CAACtB,gBAAgB;IAChByB,QAAQ,EAAGf,UAAY;IACvBgB,SAAS,EAAGf,kBAAoB;IAChCE,UAAU,EAAGA,UAAY;IACzBU,KAAK,EAAG,CAAEJ,WAAW,EAAET,UAAU,GAAG;MAAEiB,OAAO,EAAE;IAAI,CAAC,GAAG,IAAI;EAAI,GAE/DL,aAAA,CAACnB,IAAI;IAACyB,IAAI,EAAGvB,KAAO;IAACwB,IAAI,EAAG,EAAI;IAACC,KAAK,EAAGX,WAAW,CAACW;EAAO,CAAE,CAC7C,CAAC,EACnBR,aAAA,CAACtB,gBAAgB;IAChB+B,MAAM,EAAG,WAAa;IACtBN,QAAQ,EAAGhB,UAAY;IACvBiB,SAAS,EAAGd,kBAAoB;IAChCC,UAAU,EAAGA,UAAY;IACzBU,KAAK,EAAG,CAAEJ,WAAW,EAAEV,UAAU,GAAG;MAAEkB,OAAO,EAAE;IAAI,CAAC,GAAG,IAAI;EAAI,GAE/DL,aAAA,CAACnB,IAAI;IAACyB,IAAI,EAAGxB,IAAM;IAACyB,IAAI,EAAG,EAAI;IAACC,KAAK,EAAGX,WAAW,CAACW;EAAO,CAAE,CAC5C,CACb,CAAC;AAET;AAEA,eAAe5B,wBAAwB,CAAEK,OAAQ,CAAC"}

View File

@@ -0,0 +1,38 @@
import { createElement, Fragment } from "react";
/**
* External dependencies
*/
import { SafeAreaView } from 'react-native';
/**
* WordPress dependencies
*/
import { Children, useEffect, useContext } from '@wordpress/element';
import { createSlotFill, BottomSheetContext } from '@wordpress/components';
const {
Fill,
Slot
} = createSlotFill('BottomSheetSubSheet');
const BottomSheetSubSheet = ({
children,
navigationButton,
showSheet,
isFullScreen
}) => {
const {
setIsFullScreen
} = useContext(BottomSheetContext);
useEffect(() => {
if (showSheet) {
setIsFullScreen(isFullScreen);
}
// Disable reason: deferring this refactor to the native team.
// see https://github.com/WordPress/gutenberg/pull/41166
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [showSheet, isFullScreen]);
return createElement(Fragment, null, showSheet && createElement(Fill, null, createElement(SafeAreaView, null, children)), Children.count(children) > 0 && navigationButton);
};
BottomSheetSubSheet.Slot = Slot;
BottomSheetSubSheet.screenName = 'BottomSheetSubSheet';
export default BottomSheetSubSheet;
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["SafeAreaView","Children","useEffect","useContext","createSlotFill","BottomSheetContext","Fill","Slot","BottomSheetSubSheet","children","navigationButton","showSheet","isFullScreen","setIsFullScreen","createElement","Fragment","count","screenName"],"sources":["@wordpress/components/src/mobile/bottom-sheet/sub-sheet/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { SafeAreaView } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { Children, useEffect, useContext } from '@wordpress/element';\nimport { createSlotFill, BottomSheetContext } from '@wordpress/components';\n\nconst { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' );\n\nconst BottomSheetSubSheet = ( {\n\tchildren,\n\tnavigationButton,\n\tshowSheet,\n\tisFullScreen,\n} ) => {\n\tconst { setIsFullScreen } = useContext( BottomSheetContext );\n\n\tuseEffect( () => {\n\t\tif ( showSheet ) {\n\t\t\tsetIsFullScreen( isFullScreen );\n\t\t}\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ showSheet, isFullScreen ] );\n\n\treturn (\n\t\t<>\n\t\t\t{ showSheet && (\n\t\t\t\t<Fill>\n\t\t\t\t\t<SafeAreaView>{ children }</SafeAreaView>\n\t\t\t\t</Fill>\n\t\t\t) }\n\t\t\t{ Children.count( children ) > 0 && navigationButton }\n\t\t</>\n\t);\n};\n\nBottomSheetSubSheet.Slot = Slot;\nBottomSheetSubSheet.screenName = 'BottomSheetSubSheet';\n\nexport default BottomSheetSubSheet;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,cAAc;;AAE3C;AACA;AACA;AACA,SAASC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,QAAQ,oBAAoB;AACpE,SAASC,cAAc,EAAEC,kBAAkB,QAAQ,uBAAuB;AAE1E,MAAM;EAAEC,IAAI;EAAEC;AAAK,CAAC,GAAGH,cAAc,CAAE,qBAAsB,CAAC;AAE9D,MAAMI,mBAAmB,GAAGA,CAAE;EAC7BC,QAAQ;EACRC,gBAAgB;EAChBC,SAAS;EACTC;AACD,CAAC,KAAM;EACN,MAAM;IAAEC;EAAgB,CAAC,GAAGV,UAAU,CAAEE,kBAAmB,CAAC;EAE5DH,SAAS,CAAE,MAAM;IAChB,IAAKS,SAAS,EAAG;MAChBE,eAAe,CAAED,YAAa,CAAC;IAChC;IACA;IACA;IACA;EACD,CAAC,EAAE,CAAED,SAAS,EAAEC,YAAY,CAAG,CAAC;EAEhC,OACCE,aAAA,CAAAC,QAAA,QACGJ,SAAS,IACVG,aAAA,CAACR,IAAI,QACJQ,aAAA,CAACd,YAAY,QAAGS,QAAwB,CACnC,CACN,EACCR,QAAQ,CAACe,KAAK,CAAEP,QAAS,CAAC,GAAG,CAAC,IAAIC,gBACnC,CAAC;AAEL,CAAC;AAEDF,mBAAmB,CAACD,IAAI,GAAGA,IAAI;AAC/BC,mBAAmB,CAACS,UAAU,GAAG,qBAAqB;AAEtD,eAAeT,mBAAmB"}

View File

@@ -0,0 +1,53 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { Switch } from 'react-native';
/**
* WordPress dependencies
*/
import { __, _x, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import Cell from './cell';
const EMPTY_STYLE = {};
export default function BottomSheetSwitchCell(props) {
const {
value,
onValueChange,
disabled,
...cellProps
} = props;
const onPress = () => {
onValueChange(!value);
};
const getAccessibilityLabel = () => {
if (!cellProps.help) {
return value ? sprintf( /* translators: accessibility text. Switch setting ON state. %s: Switch title. */
_x('%s. On', 'switch control'), cellProps.label) : sprintf( /* translators: accessibility text. Switch setting OFF state. %s: Switch title. */
_x('%s. Off', 'switch control'), cellProps.label);
}
return value ? sprintf( /* translators: accessibility text. Switch setting ON state. %1: Switch title, %2: switch help. */
_x('%1$s, %2$s. On', 'switch control'), cellProps.label, cellProps.help) : sprintf( /* translators: accessibility text. Switch setting OFF state. %1: Switch title, %2: switch help. */
_x('%1$s, %2$s. Off', 'switch control'), cellProps.label, cellProps.help);
};
return createElement(Cell, {
...cellProps,
accessibilityLabel: getAccessibilityLabel(),
accessibilityRole: 'none',
accessibilityHint: /* translators: accessibility text (hint for switches) */
__('Double tap to toggle setting'),
onPress: onPress,
editable: false,
value: '',
disabled: disabled,
disabledStyle: EMPTY_STYLE
}, createElement(Switch, {
value: value,
onValueChange: onValueChange,
disabled: disabled
}));
}
//# sourceMappingURL=switch-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Switch","__","_x","sprintf","Cell","EMPTY_STYLE","BottomSheetSwitchCell","props","value","onValueChange","disabled","cellProps","onPress","getAccessibilityLabel","help","label","createElement","accessibilityLabel","accessibilityRole","accessibilityHint","editable","disabledStyle"],"sources":["@wordpress/components/src/mobile/bottom-sheet/switch-cell.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Switch } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, _x, sprintf } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\n\nconst EMPTY_STYLE = {};\n\nexport default function BottomSheetSwitchCell( props ) {\n\tconst { value, onValueChange, disabled, ...cellProps } = props;\n\n\tconst onPress = () => {\n\t\tonValueChange( ! value );\n\t};\n\n\tconst getAccessibilityLabel = () => {\n\t\tif ( ! cellProps.help ) {\n\t\t\treturn value\n\t\t\t\t? sprintf(\n\t\t\t\t\t\t/* translators: accessibility text. Switch setting ON state. %s: Switch title. */\n\t\t\t\t\t\t_x( '%s. On', 'switch control' ),\n\t\t\t\t\t\tcellProps.label\n\t\t\t\t )\n\t\t\t\t: sprintf(\n\t\t\t\t\t\t/* translators: accessibility text. Switch setting OFF state. %s: Switch title. */\n\t\t\t\t\t\t_x( '%s. Off', 'switch control' ),\n\t\t\t\t\t\tcellProps.label\n\t\t\t\t );\n\t\t}\n\t\treturn value\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: accessibility text. Switch setting ON state. %1: Switch title, %2: switch help. */\n\t\t\t\t\t_x( '%1$s, %2$s. On', 'switch control' ),\n\t\t\t\t\tcellProps.label,\n\t\t\t\t\tcellProps.help\n\t\t\t )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: accessibility text. Switch setting OFF state. %1: Switch title, %2: switch help. */\n\t\t\t\t\t_x( '%1$s, %2$s. Off', 'switch control' ),\n\t\t\t\t\tcellProps.label,\n\t\t\t\t\tcellProps.help\n\t\t\t );\n\t};\n\n\treturn (\n\t\t<Cell\n\t\t\t{ ...cellProps }\n\t\t\taccessibilityLabel={ getAccessibilityLabel() }\n\t\t\taccessibilityRole={ 'none' }\n\t\t\taccessibilityHint={\n\t\t\t\t/* translators: accessibility text (hint for switches) */\n\t\t\t\t__( 'Double tap to toggle setting' )\n\t\t\t}\n\t\t\tonPress={ onPress }\n\t\t\teditable={ false }\n\t\t\tvalue={ '' }\n\t\t\tdisabled={ disabled }\n\t\t\tdisabledStyle={ EMPTY_STYLE }\n\t\t>\n\t\t\t<Switch\n\t\t\t\tvalue={ value }\n\t\t\t\tonValueChange={ onValueChange }\n\t\t\t\tdisabled={ disabled }\n\t\t\t/>\n\t\t</Cell>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,cAAc;;AAErC;AACA;AACA;AACA,SAASC,EAAE,EAAEC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AACjD;AACA;AACA;AACA,OAAOC,IAAI,MAAM,QAAQ;AAEzB,MAAMC,WAAW,GAAG,CAAC,CAAC;AAEtB,eAAe,SAASC,qBAAqBA,CAAEC,KAAK,EAAG;EACtD,MAAM;IAAEC,KAAK;IAAEC,aAAa;IAAEC,QAAQ;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAE9D,MAAMK,OAAO,GAAGA,CAAA,KAAM;IACrBH,aAAa,CAAE,CAAED,KAAM,CAAC;EACzB,CAAC;EAED,MAAMK,qBAAqB,GAAGA,CAAA,KAAM;IACnC,IAAK,CAAEF,SAAS,CAACG,IAAI,EAAG;MACvB,OAAON,KAAK,GACTL,OAAO,EACP;MACAD,EAAE,CAAE,QAAQ,EAAE,gBAAiB,CAAC,EAChCS,SAAS,CAACI,KACV,CAAC,GACDZ,OAAO,EACP;MACAD,EAAE,CAAE,SAAS,EAAE,gBAAiB,CAAC,EACjCS,SAAS,CAACI,KACV,CAAC;IACL;IACA,OAAOP,KAAK,GACTL,OAAO,EACP;IACAD,EAAE,CAAE,gBAAgB,EAAE,gBAAiB,CAAC,EACxCS,SAAS,CAACI,KAAK,EACfJ,SAAS,CAACG,IACV,CAAC,GACDX,OAAO,EACP;IACAD,EAAE,CAAE,iBAAiB,EAAE,gBAAiB,CAAC,EACzCS,SAAS,CAACI,KAAK,EACfJ,SAAS,CAACG,IACV,CAAC;EACL,CAAC;EAED,OACCE,aAAA,CAACZ,IAAI;IAAA,GACCO,SAAS;IACdM,kBAAkB,EAAGJ,qBAAqB,CAAC,CAAG;IAC9CK,iBAAiB,EAAG,MAAQ;IAC5BC,iBAAiB,EAChB;IACAlB,EAAE,CAAE,8BAA+B,CACnC;IACDW,OAAO,EAAGA,OAAS;IACnBQ,QAAQ,EAAG,KAAO;IAClBZ,KAAK,EAAG,EAAI;IACZE,QAAQ,EAAGA,QAAU;IACrBW,aAAa,EAAGhB;EAAa,GAE7BW,aAAA,CAAChB,MAAM;IACNQ,KAAK,EAAGA,KAAO;IACfC,aAAa,EAAGA,aAAe;IAC/BC,QAAQ,EAAGA;EAAU,CACrB,CACI,CAAC;AAET"}

View File

@@ -0,0 +1,17 @@
const createClipboard = () => {
let currentClipboard;
const setClipboard = clipboard => {
currentClipboard = clipboard;
};
const getClipboard = () => currentClipboard;
return {
setClipboard,
getClipboard
};
};
const clipboard = createClipboard();
export const {
setClipboard,
getClipboard
} = clipboard;
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["createClipboard","currentClipboard","setClipboard","clipboard","getClipboard"],"sources":["@wordpress/components/src/mobile/clipboard/index.native.js"],"sourcesContent":["const createClipboard = () => {\n\tlet currentClipboard;\n\n\tconst setClipboard = ( clipboard ) => {\n\t\tcurrentClipboard = clipboard;\n\t};\n\n\tconst getClipboard = () => currentClipboard;\n\n\treturn {\n\t\tsetClipboard,\n\t\tgetClipboard,\n\t};\n};\n\nconst clipboard = createClipboard();\n\nexport const { setClipboard, getClipboard } = clipboard;\n"],"mappings":"AAAA,MAAMA,eAAe,GAAGA,CAAA,KAAM;EAC7B,IAAIC,gBAAgB;EAEpB,MAAMC,YAAY,GAAKC,SAAS,IAAM;IACrCF,gBAAgB,GAAGE,SAAS;EAC7B,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAA,KAAMH,gBAAgB;EAE3C,OAAO;IACNC,YAAY;IACZE;EACD,CAAC;AACF,CAAC;AAED,MAAMD,SAAS,GAAGH,eAAe,CAAC,CAAC;AAEnC,OAAO,MAAM;EAAEE,YAAY;EAAEE;AAAa,CAAC,GAAGD,SAAS"}

View File

@@ -0,0 +1,35 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { View } from 'react-native';
import { useNavigation, useRoute } from '@react-navigation/native';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import CustomGradientPicker from '../../custom-gradient-picker';
import NavBar from '../bottom-sheet/nav-bar';
const GradientPickerScreen = () => {
const navigation = useNavigation();
const route = useRoute();
const {
setColor,
currentValue,
isGradientColor
} = route.params;
return createElement(View, null, createElement(NavBar, null, createElement(NavBar.BackButton, {
onPress: navigation.goBack
}), createElement(NavBar.Heading, null, __('Customize Gradient'))), createElement(CustomGradientPicker, {
setColor: setColor,
currentValue: currentValue,
isGradientColor: isGradientColor
}));
};
export default GradientPickerScreen;
//# sourceMappingURL=gradient-picker-screen.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["View","useNavigation","useRoute","__","CustomGradientPicker","NavBar","GradientPickerScreen","navigation","route","setColor","currentValue","isGradientColor","params","createElement","BackButton","onPress","goBack","Heading"],"sources":["@wordpress/components/src/mobile/color-settings/gradient-picker-screen.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\nimport { useNavigation, useRoute } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport CustomGradientPicker from '../../custom-gradient-picker';\nimport NavBar from '../bottom-sheet/nav-bar';\n\nconst GradientPickerScreen = () => {\n\tconst navigation = useNavigation();\n\tconst route = useRoute();\n\tconst { setColor, currentValue, isGradientColor } = route.params;\n\treturn (\n\t\t<View>\n\t\t\t<NavBar>\n\t\t\t\t<NavBar.BackButton onPress={ navigation.goBack } />\n\t\t\t\t<NavBar.Heading>{ __( 'Customize Gradient' ) }</NavBar.Heading>\n\t\t\t</NavBar>\n\t\t\t<CustomGradientPicker\n\t\t\t\tsetColor={ setColor }\n\t\t\t\tcurrentValue={ currentValue }\n\t\t\t\tisGradientColor={ isGradientColor }\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport default GradientPickerScreen;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,cAAc;AACnC,SAASC,aAAa,EAAEC,QAAQ,QAAQ,0BAA0B;;AAElE;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,8BAA8B;AAC/D,OAAOC,MAAM,MAAM,yBAAyB;AAE5C,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EAClC,MAAMC,UAAU,GAAGN,aAAa,CAAC,CAAC;EAClC,MAAMO,KAAK,GAAGN,QAAQ,CAAC,CAAC;EACxB,MAAM;IAAEO,QAAQ;IAAEC,YAAY;IAAEC;EAAgB,CAAC,GAAGH,KAAK,CAACI,MAAM;EAChE,OACCC,aAAA,CAACb,IAAI,QACJa,aAAA,CAACR,MAAM,QACNQ,aAAA,CAACR,MAAM,CAACS,UAAU;IAACC,OAAO,EAAGR,UAAU,CAACS;EAAQ,CAAE,CAAC,EACnDH,aAAA,CAACR,MAAM,CAACY,OAAO,QAAGd,EAAE,CAAE,oBAAqB,CAAmB,CACvD,CAAC,EACTU,aAAA,CAACT,oBAAoB;IACpBK,QAAQ,EAAGA,QAAU;IACrBC,YAAY,EAAGA,YAAc;IAC7BC,eAAe,EAAGA;EAAiB,CACnC,CACI,CAAC;AAET,CAAC;AAED,eAAeL,oBAAoB"}

View File

@@ -0,0 +1,71 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { useRoute } from '@react-navigation/native';
/**
* WordPress dependencies
*/
import { memo, useEffect, useContext } from '@wordpress/element';
import { BottomSheetContext, BottomSheet } from '@wordpress/components';
/**
* Internal dependencies
*/
import PickerScreen from './picker-screen';
import GradientPickerScreen from './gradient-picker-screen';
import PaletteScreen from './palette.screen';
import { colorsUtils } from './utils';
const ColorSettingsMemo = memo(({
defaultSettings,
onHandleClosingBottomSheet,
shouldEnableBottomSheetMaxHeight,
onColorChange,
colorValue,
gradientValue,
onGradientChange,
onColorCleared,
label,
hideNavigation
}) => {
useEffect(() => {
shouldEnableBottomSheetMaxHeight(true);
onHandleClosingBottomSheet(null);
// Disable reason: deferring this refactor to the native team.
// see https://github.com/WordPress/gutenberg/pull/41166
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return createElement(BottomSheet.NavigationContainer, null, createElement(BottomSheet.NavigationScreen, {
name: colorsUtils.screens.palette,
initialParams: {
defaultSettings,
onColorChange,
colorValue,
gradientValue,
onGradientChange,
onColorCleared,
label,
hideNavigation
}
}, createElement(PaletteScreen, null)), createElement(BottomSheet.NavigationScreen, {
name: colorsUtils.screens.picker
}, createElement(PickerScreen, null)), createElement(BottomSheet.NavigationScreen, {
name: colorsUtils.screens.gradientPicker
}, createElement(GradientPickerScreen, null)));
});
function ColorSettings(props) {
const route = useRoute();
const {
onHandleClosingBottomSheet,
shouldEnableBottomSheetMaxHeight
} = useContext(BottomSheetContext);
return createElement(ColorSettingsMemo, {
onHandleClosingBottomSheet: onHandleClosingBottomSheet,
shouldEnableBottomSheetMaxHeight: shouldEnableBottomSheetMaxHeight,
...props,
...route.params
});
}
export default ColorSettings;
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["useRoute","memo","useEffect","useContext","BottomSheetContext","BottomSheet","PickerScreen","GradientPickerScreen","PaletteScreen","colorsUtils","ColorSettingsMemo","defaultSettings","onHandleClosingBottomSheet","shouldEnableBottomSheetMaxHeight","onColorChange","colorValue","gradientValue","onGradientChange","onColorCleared","label","hideNavigation","createElement","NavigationContainer","NavigationScreen","name","screens","palette","initialParams","picker","gradientPicker","ColorSettings","props","route","params"],"sources":["@wordpress/components/src/mobile/color-settings/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useRoute } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { memo, useEffect, useContext } from '@wordpress/element';\nimport { BottomSheetContext, BottomSheet } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport PickerScreen from './picker-screen';\nimport GradientPickerScreen from './gradient-picker-screen';\nimport PaletteScreen from './palette.screen';\n\nimport { colorsUtils } from './utils';\n\nconst ColorSettingsMemo = memo(\n\t( {\n\t\tdefaultSettings,\n\t\tonHandleClosingBottomSheet,\n\t\tshouldEnableBottomSheetMaxHeight,\n\t\tonColorChange,\n\t\tcolorValue,\n\t\tgradientValue,\n\t\tonGradientChange,\n\t\tonColorCleared,\n\t\tlabel,\n\t\thideNavigation,\n\t} ) => {\n\t\tuseEffect( () => {\n\t\t\tshouldEnableBottomSheetMaxHeight( true );\n\t\t\tonHandleClosingBottomSheet( null );\n\t\t\t// Disable reason: deferring this refactor to the native team.\n\t\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [] );\n\t\treturn (\n\t\t\t<BottomSheet.NavigationContainer>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ colorsUtils.screens.palette }\n\t\t\t\t\tinitialParams={ {\n\t\t\t\t\t\tdefaultSettings,\n\t\t\t\t\t\tonColorChange,\n\t\t\t\t\t\tcolorValue,\n\t\t\t\t\t\tgradientValue,\n\t\t\t\t\t\tonGradientChange,\n\t\t\t\t\t\tonColorCleared,\n\t\t\t\t\t\tlabel,\n\t\t\t\t\t\thideNavigation,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<PaletteScreen />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ colorsUtils.screens.picker }\n\t\t\t\t>\n\t\t\t\t\t<PickerScreen />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\tname={ colorsUtils.screens.gradientPicker }\n\t\t\t\t>\n\t\t\t\t\t<GradientPickerScreen />\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t</BottomSheet.NavigationContainer>\n\t\t);\n\t}\n);\nfunction ColorSettings( props ) {\n\tconst route = useRoute();\n\tconst { onHandleClosingBottomSheet, shouldEnableBottomSheetMaxHeight } =\n\t\tuseContext( BottomSheetContext );\n\n\treturn (\n\t\t<ColorSettingsMemo\n\t\t\tonHandleClosingBottomSheet={ onHandleClosingBottomSheet }\n\t\t\tshouldEnableBottomSheetMaxHeight={\n\t\t\t\tshouldEnableBottomSheetMaxHeight\n\t\t\t}\n\t\t\t{ ...props }\n\t\t\t{ ...route.params }\n\t\t/>\n\t);\n}\n\nexport default ColorSettings;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,0BAA0B;;AAEnD;AACA;AACA;AACA,SAASC,IAAI,EAAEC,SAAS,EAAEC,UAAU,QAAQ,oBAAoB;AAChE,SAASC,kBAAkB,EAAEC,WAAW,QAAQ,uBAAuB;;AAEvE;AACA;AACA;AACA,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,oBAAoB,MAAM,0BAA0B;AAC3D,OAAOC,aAAa,MAAM,kBAAkB;AAE5C,SAASC,WAAW,QAAQ,SAAS;AAErC,MAAMC,iBAAiB,GAAGT,IAAI,CAC7B,CAAE;EACDU,eAAe;EACfC,0BAA0B;EAC1BC,gCAAgC;EAChCC,aAAa;EACbC,UAAU;EACVC,aAAa;EACbC,gBAAgB;EAChBC,cAAc;EACdC,KAAK;EACLC;AACD,CAAC,KAAM;EACNlB,SAAS,CAAE,MAAM;IAChBW,gCAAgC,CAAE,IAAK,CAAC;IACxCD,0BAA0B,CAAE,IAAK,CAAC;IAClC;IACA;IACA;EACD,CAAC,EAAE,EAAG,CAAC;EACP,OACCS,aAAA,CAAChB,WAAW,CAACiB,mBAAmB,QAC/BD,aAAA,CAAChB,WAAW,CAACkB,gBAAgB;IAC5BC,IAAI,EAAGf,WAAW,CAACgB,OAAO,CAACC,OAAS;IACpCC,aAAa,EAAG;MACfhB,eAAe;MACfG,aAAa;MACbC,UAAU;MACVC,aAAa;MACbC,gBAAgB;MAChBC,cAAc;MACdC,KAAK;MACLC;IACD;EAAG,GAEHC,aAAA,CAACb,aAAa,MAAE,CACa,CAAC,EAC/Ba,aAAA,CAAChB,WAAW,CAACkB,gBAAgB;IAC5BC,IAAI,EAAGf,WAAW,CAACgB,OAAO,CAACG;EAAQ,GAEnCP,aAAA,CAACf,YAAY,MAAE,CACc,CAAC,EAC/Be,aAAA,CAAChB,WAAW,CAACkB,gBAAgB;IAC5BC,IAAI,EAAGf,WAAW,CAACgB,OAAO,CAACI;EAAgB,GAE3CR,aAAA,CAACd,oBAAoB,MAAE,CACM,CACE,CAAC;AAEpC,CACD,CAAC;AACD,SAASuB,aAAaA,CAAEC,KAAK,EAAG;EAC/B,MAAMC,KAAK,GAAGhC,QAAQ,CAAC,CAAC;EACxB,MAAM;IAAEY,0BAA0B;IAAEC;EAAiC,CAAC,GACrEV,UAAU,CAAEC,kBAAmB,CAAC;EAEjC,OACCiB,aAAA,CAACX,iBAAiB;IACjBE,0BAA0B,EAAGA,0BAA4B;IACzDC,gCAAgC,EAC/BA,gCACA;IAAA,GACIkB,KAAK;IAAA,GACLC,KAAK,CAACC;EAAM,CACjB,CAAC;AAEJ;AAEA,eAAeH,aAAa"}

View File

@@ -0,0 +1,172 @@
import { createElement, Fragment } from "react";
/**
* External dependencies
*/
import { View, Text, TouchableWithoutFeedback } from 'react-native';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState, useContext } from '@wordpress/element';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import { ColorControl, PanelBody, BottomSheetContext, useMobileGlobalStylesColors } from '@wordpress/components';
import { useRoute, useNavigation } from '@react-navigation/native';
/**
* Internal dependencies
*/
import ColorPalette from '../../color-palette';
import ColorIndicator from '../../color-indicator';
import NavBar from '../bottom-sheet/nav-bar';
import SegmentedControls from '../segmented-control';
import { colorsUtils } from './utils';
import styles from './style.scss';
const HIT_SLOP = {
top: 8,
bottom: 8,
left: 8,
right: 8
};
const PaletteScreen = () => {
const route = useRoute();
const navigation = useNavigation();
const {
shouldEnableBottomSheetScroll
} = useContext(BottomSheetContext);
const {
label,
onColorChange,
onGradientChange,
onColorCleared,
colorValue,
defaultSettings,
hideNavigation = false
} = route.params || {};
const {
segments,
isGradient
} = colorsUtils;
const [currentValue, setCurrentValue] = useState(colorValue);
const isGradientColor = isGradient(currentValue);
const selectedSegmentIndex = isGradientColor ? 1 : 0;
const [currentSegment, setCurrentSegment] = useState(segments[selectedSegmentIndex]);
const isGradientSegment = currentSegment === colorsUtils.segments[1];
const currentSegmentColors = !isGradientSegment ? defaultSettings.colors : defaultSettings.gradients;
const allAvailableColors = useMobileGlobalStylesColors();
const allAvailableGradients = currentSegmentColors.flatMap(({
gradients
}) => gradients).filter(Boolean);
const horizontalSeparatorStyle = usePreferredColorSchemeStyle(styles.horizontalSeparator, styles.horizontalSeparatorDark);
const clearButtonStyle = usePreferredColorSchemeStyle(styles.clearButton, styles.clearButtonDark);
const selectedColorTextStyle = usePreferredColorSchemeStyle(styles.colorText, styles.colorTextDark);
const isSolidSegment = currentSegment === segments[0];
const isCustomGadientShown = !isSolidSegment && isGradientColor;
const setColor = color => {
setCurrentValue(color);
if (isSolidSegment && onColorChange && onGradientChange) {
onColorChange(color);
} else if (isSolidSegment && onColorChange) {
onColorChange(color);
} else if (!isSolidSegment && onGradientChange) {
onGradientChange(color);
}
};
function onClear() {
setCurrentValue(undefined);
if (onColorCleared) {
onColorCleared();
}
}
function onCustomPress() {
if (isSolidSegment) {
navigation.navigate(colorsUtils.screens.picker, {
currentValue,
setColor
});
} else {
navigation.navigate(colorsUtils.screens.gradientPicker, {
setColor,
isGradientColor,
currentValue
});
}
}
function getClearButton() {
return createElement(TouchableWithoutFeedback, {
onPress: onClear,
hitSlop: HIT_SLOP
}, createElement(View, {
style: styles.clearButtonContainer
}, createElement(Text, {
style: clearButtonStyle
}, __('Reset'))));
}
function getFooter() {
if (onGradientChange) {
return createElement(SegmentedControls, {
segments: segments,
segmentHandler: setCurrentSegment,
selectedIndex: segments.indexOf(currentSegment),
addonLeft: currentValue && createElement(ColorIndicator, {
color: currentValue,
style: styles.colorIndicator
}),
addonRight: currentValue && getClearButton()
});
}
return createElement(View, {
style: styles.footer
}, createElement(View, {
style: styles.flex
}, currentValue && createElement(ColorIndicator, {
color: currentValue,
style: styles.colorIndicator
})), currentValue ? createElement(Text, {
style: selectedColorTextStyle,
maxFontSizeMultiplier: 2,
selectable: true
}, currentValue.toUpperCase()) : createElement(Text, {
style: styles.selectColorText,
maxFontSizeMultiplier: 2
}, __('Select a color above')), createElement(View, {
style: styles.flex
}, currentValue && getClearButton()));
}
return createElement(View, null, !hideNavigation && createElement(NavBar, null, createElement(NavBar.BackButton, {
onPress: navigation.goBack
}), createElement(NavBar.Heading, null, label, " ")), createElement(View, {
style: styles.colorPalettes
}, currentSegmentColors.map((palette, paletteKey) => {
const paletteSettings = {
colors: palette.colors,
gradients: palette.gradients,
allColors: allAvailableColors,
allGradients: allAvailableGradients
};
// Limit to show the custom indicator to the first available palette
const enableCustomColor = paletteKey === 0;
return createElement(ColorPalette, {
enableCustomColor: enableCustomColor,
label: palette.name,
key: paletteKey,
setColor: setColor,
activeColor: currentValue,
isGradientColor: isGradientColor,
currentSegment: currentSegment,
onCustomPress: onCustomPress,
shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
defaultSettings: paletteSettings
});
})), isCustomGadientShown && createElement(Fragment, null, createElement(View, {
style: horizontalSeparatorStyle
}), createElement(PanelBody, null, createElement(ColorControl, {
label: __('Customize Gradient'),
onPress: onCustomPress,
withColorIndicator: false
}))), createElement(View, {
style: horizontalSeparatorStyle
}), getFooter());
};
export default PaletteScreen;
//# sourceMappingURL=palette.screen.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,52 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { useRoute, useNavigation } from '@react-navigation/native';
/**
* WordPress dependencies
*/
import { useContext, useMemo } from '@wordpress/element';
import { BottomSheetContext } from '@wordpress/components';
/**
* Internal dependencies
*/
import { ColorPicker } from '../../color-picker';
const PickerScreen = () => {
const route = useRoute();
const navigation = useNavigation();
const {
onShouldEnableInnerHandling,
shouldEnableBottomSheetMaxHeight,
onHandleClosingBottomSheet,
isBottomSheetContentScrolling,
shouldEnableBottomSheetScroll,
onHandleHardwareButtonPress
} = useContext(BottomSheetContext);
const {
setColor,
currentValue,
isGradientColor
} = route.params;
return useMemo(() => {
return createElement(ColorPicker, {
onShouldEnableInnerHandling: onShouldEnableInnerHandling,
shouldEnableBottomSheetMaxHeight: shouldEnableBottomSheetMaxHeight,
setColor: setColor,
activeColor: currentValue,
isGradientColor: isGradientColor,
onNavigationBack: navigation.goBack,
onHandleClosingBottomSheet: onHandleClosingBottomSheet,
isBottomSheetContentScrolling: isBottomSheetContentScrolling,
shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
onHandleHardwareButtonPress: onHandleHardwareButtonPress
});
// Disable reason: deferring this refactor to the native team.
// see https://github.com/WordPress/gutenberg/pull/41166
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [setColor, currentValue, isGradientColor, onShouldEnableInnerHandling, shouldEnableBottomSheetMaxHeight, onHandleClosingBottomSheet, isBottomSheetContentScrolling, shouldEnableBottomSheetScroll, onHandleHardwareButtonPress]);
};
export default PickerScreen;
//# sourceMappingURL=picker-screen.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["useRoute","useNavigation","useContext","useMemo","BottomSheetContext","ColorPicker","PickerScreen","route","navigation","onShouldEnableInnerHandling","shouldEnableBottomSheetMaxHeight","onHandleClosingBottomSheet","isBottomSheetContentScrolling","shouldEnableBottomSheetScroll","onHandleHardwareButtonPress","setColor","currentValue","isGradientColor","params","createElement","activeColor","onNavigationBack","goBack"],"sources":["@wordpress/components/src/mobile/color-settings/picker-screen.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useRoute, useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport { BottomSheetContext } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { ColorPicker } from '../../color-picker';\n\nconst PickerScreen = () => {\n\tconst route = useRoute();\n\tconst navigation = useNavigation();\n\tconst {\n\t\tonShouldEnableInnerHandling,\n\t\tshouldEnableBottomSheetMaxHeight,\n\t\tonHandleClosingBottomSheet,\n\t\tisBottomSheetContentScrolling,\n\t\tshouldEnableBottomSheetScroll,\n\t\tonHandleHardwareButtonPress,\n\t} = useContext( BottomSheetContext );\n\tconst { setColor, currentValue, isGradientColor } = route.params;\n\treturn useMemo( () => {\n\t\treturn (\n\t\t\t<ColorPicker\n\t\t\t\tonShouldEnableInnerHandling={ onShouldEnableInnerHandling }\n\t\t\t\tshouldEnableBottomSheetMaxHeight={\n\t\t\t\t\tshouldEnableBottomSheetMaxHeight\n\t\t\t\t}\n\t\t\t\tsetColor={ setColor }\n\t\t\t\tactiveColor={ currentValue }\n\t\t\t\tisGradientColor={ isGradientColor }\n\t\t\t\tonNavigationBack={ navigation.goBack }\n\t\t\t\tonHandleClosingBottomSheet={ onHandleClosingBottomSheet }\n\t\t\t\tisBottomSheetContentScrolling={ isBottomSheetContentScrolling }\n\t\t\t\tshouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll }\n\t\t\t\tonHandleHardwareButtonPress={ onHandleHardwareButtonPress }\n\t\t\t/>\n\t\t);\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [\n\t\tsetColor,\n\t\tcurrentValue,\n\t\tisGradientColor,\n\t\tonShouldEnableInnerHandling,\n\t\tshouldEnableBottomSheetMaxHeight,\n\t\tonHandleClosingBottomSheet,\n\t\tisBottomSheetContentScrolling,\n\t\tshouldEnableBottomSheetScroll,\n\t\tonHandleHardwareButtonPress,\n\t] );\n};\n\nexport default PickerScreen;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,aAAa,QAAQ,0BAA0B;;AAElE;AACA;AACA;AACA,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;AACxD,SAASC,kBAAkB,QAAQ,uBAAuB;;AAE1D;AACA;AACA;AACA,SAASC,WAAW,QAAQ,oBAAoB;AAEhD,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC1B,MAAMC,KAAK,GAAGP,QAAQ,CAAC,CAAC;EACxB,MAAMQ,UAAU,GAAGP,aAAa,CAAC,CAAC;EAClC,MAAM;IACLQ,2BAA2B;IAC3BC,gCAAgC;IAChCC,0BAA0B;IAC1BC,6BAA6B;IAC7BC,6BAA6B;IAC7BC;EACD,CAAC,GAAGZ,UAAU,CAAEE,kBAAmB,CAAC;EACpC,MAAM;IAAEW,QAAQ;IAAEC,YAAY;IAAEC;EAAgB,CAAC,GAAGV,KAAK,CAACW,MAAM;EAChE,OAAOf,OAAO,CAAE,MAAM;IACrB,OACCgB,aAAA,CAACd,WAAW;MACXI,2BAA2B,EAAGA,2BAA6B;MAC3DC,gCAAgC,EAC/BA,gCACA;MACDK,QAAQ,EAAGA,QAAU;MACrBK,WAAW,EAAGJ,YAAc;MAC5BC,eAAe,EAAGA,eAAiB;MACnCI,gBAAgB,EAAGb,UAAU,CAACc,MAAQ;MACtCX,0BAA0B,EAAGA,0BAA4B;MACzDC,6BAA6B,EAAGA,6BAA+B;MAC/DC,6BAA6B,EAAGA,6BAA+B;MAC/DC,2BAA2B,EAAGA;IAA6B,CAC3D,CAAC;IAEH;IACA;IACA;EACD,CAAC,EAAE,CACFC,QAAQ,EACRC,YAAY,EACZC,eAAe,EACfR,2BAA2B,EAC3BC,gCAAgC,EAChCC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,6BAA6B,EAC7BC,2BAA2B,CAC1B,CAAC;AACJ,CAAC;AAED,eAAeR,YAAY"}

View File

@@ -0,0 +1,36 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
const gradients = {
linear: 'linear-gradient',
radial: 'radial-gradient'
};
const gradientOptions = [{
label: __('Linear'),
value: gradients.linear
}, {
label: __('Radial'),
value: gradients.radial
}];
const getGradientType = color => {
if (color?.includes(gradients.radial)) {
return gradients.radial;
} else if (color?.includes(gradients.linear)) {
return gradients.linear;
}
return false;
};
export const colorsUtils = {
screens: {
gradientPicker: 'GradientPicker',
picker: 'Picker',
palette: 'Palette'
},
segments: [__('Solid'), __('Gradient')],
gradients,
gradientOptions,
getGradientType,
isGradient: color => !!getGradientType(color)
};
//# sourceMappingURL=utils.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["__","gradients","linear","radial","gradientOptions","label","value","getGradientType","color","includes","colorsUtils","screens","gradientPicker","picker","palette","segments","isGradient"],"sources":["@wordpress/components/src/mobile/color-settings/utils.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst gradients = {\n\tlinear: 'linear-gradient',\n\tradial: 'radial-gradient',\n};\n\nconst gradientOptions = [\n\t{ label: __( 'Linear' ), value: gradients.linear },\n\t{ label: __( 'Radial' ), value: gradients.radial },\n];\n\nconst getGradientType = ( color ) => {\n\tif ( color?.includes( gradients.radial ) ) {\n\t\treturn gradients.radial;\n\t} else if ( color?.includes( gradients.linear ) ) {\n\t\treturn gradients.linear;\n\t}\n\treturn false;\n};\n\nexport const colorsUtils = {\n\tscreens: {\n\t\tgradientPicker: 'GradientPicker',\n\t\tpicker: 'Picker',\n\t\tpalette: 'Palette',\n\t},\n\tsegments: [ __( 'Solid' ), __( 'Gradient' ) ],\n\tgradients,\n\tgradientOptions,\n\tgetGradientType,\n\tisGradient: ( color ) => !! getGradientType( color ),\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AAEpC,MAAMC,SAAS,GAAG;EACjBC,MAAM,EAAE,iBAAiB;EACzBC,MAAM,EAAE;AACT,CAAC;AAED,MAAMC,eAAe,GAAG,CACvB;EAAEC,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,KAAK,EAAEL,SAAS,CAACC;AAAO,CAAC,EAClD;EAAEG,KAAK,EAAEL,EAAE,CAAE,QAAS,CAAC;EAAEM,KAAK,EAAEL,SAAS,CAACE;AAAO,CAAC,CAClD;AAED,MAAMI,eAAe,GAAKC,KAAK,IAAM;EACpC,IAAKA,KAAK,EAAEC,QAAQ,CAAER,SAAS,CAACE,MAAO,CAAC,EAAG;IAC1C,OAAOF,SAAS,CAACE,MAAM;EACxB,CAAC,MAAM,IAAKK,KAAK,EAAEC,QAAQ,CAAER,SAAS,CAACC,MAAO,CAAC,EAAG;IACjD,OAAOD,SAAS,CAACC,MAAM;EACxB;EACA,OAAO,KAAK;AACb,CAAC;AAED,OAAO,MAAMQ,WAAW,GAAG;EAC1BC,OAAO,EAAE;IACRC,cAAc,EAAE,gBAAgB;IAChCC,MAAM,EAAE,QAAQ;IAChBC,OAAO,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE,CAAEf,EAAE,CAAE,OAAQ,CAAC,EAAEA,EAAE,CAAE,UAAW,CAAC,CAAE;EAC7CC,SAAS;EACTG,eAAe;EACfG,eAAe;EACfS,UAAU,EAAIR,KAAK,IAAM,CAAC,CAAED,eAAe,CAAEC,KAAM;AACpD,CAAC"}

View File

@@ -0,0 +1,36 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { memo } from '@wordpress/element';
/**
* Internal dependencies
*/
import CyclePickerCell from '../bottom-sheet/cycle-picker-cell';
function CycleSelectControl({
help,
instanceId,
label,
multiple = false,
onChange,
options = [],
className,
hideLabelFromVision,
...props
}) {
const id = `inspector-select-control-${instanceId}`;
return createElement(CyclePickerCell, {
label: label,
hideLabelFromVision: hideLabelFromVision,
id: id,
help: help,
className: className,
onChangeValue: onChange,
"aria-describedby": !!help ? `${id}__help` : undefined,
multiple: multiple,
options: options,
...props
});
}
export default memo(CycleSelectControl);
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["memo","CyclePickerCell","CycleSelectControl","help","instanceId","label","multiple","onChange","options","className","hideLabelFromVision","props","id","createElement","onChangeValue","undefined"],"sources":["@wordpress/components/src/mobile/cycle-select-control/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport CyclePickerCell from '../bottom-sheet/cycle-picker-cell';\n\nfunction CycleSelectControl( {\n\thelp,\n\tinstanceId,\n\tlabel,\n\tmultiple = false,\n\tonChange,\n\toptions = [],\n\tclassName,\n\thideLabelFromVision,\n\t...props\n} ) {\n\tconst id = `inspector-select-control-${ instanceId }`;\n\n\treturn (\n\t\t<CyclePickerCell\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ className }\n\t\t\tonChangeValue={ onChange }\n\t\t\taria-describedby={ !! help ? `${ id }__help` : undefined }\n\t\t\tmultiple={ multiple }\n\t\t\toptions={ options }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default memo( CycleSelectControl );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,oBAAoB;AACzC;AACA;AACA;AACA,OAAOC,eAAe,MAAM,mCAAmC;AAE/D,SAASC,kBAAkBA,CAAE;EAC5BC,IAAI;EACJC,UAAU;EACVC,KAAK;EACLC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,OAAO,GAAG,EAAE;EACZC,SAAS;EACTC,mBAAmB;EACnB,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,EAAE,GAAI,4BAA4BR,UAAY,EAAC;EAErD,OACCS,aAAA,CAACZ,eAAe;IACfI,KAAK,EAAGA,KAAO;IACfK,mBAAmB,EAAGA,mBAAqB;IAC3CE,EAAE,EAAGA,EAAI;IACTT,IAAI,EAAGA,IAAM;IACbM,SAAS,EAAGA,SAAW;IACvBK,aAAa,EAAGP,QAAU;IAC1B,oBAAmB,CAAC,CAAEJ,IAAI,GAAI,GAAGS,EAAI,QAAO,GAAGG,SAAW;IAC1DT,QAAQ,EAAGA,QAAU;IACrBE,OAAO,EAAGA,OAAS;IAAA,GACdG;EAAK,CACV,CAAC;AAEJ;AAEA,eAAeX,IAAI,CAAEE,kBAAmB,CAAC"}

View File

@@ -0,0 +1,18 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';
const fromPathData24x24 = pathData => createElement(SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
}, createElement(Path, {
d: pathData
}));
export const facebook = fromPathData24x24('M20 3H4c-.6 0-1 .4-1 1v16c0 .5.4 1 1 1h8.6v-7h-2.3v-2.7h2.3v-2c0-2.3 1.4-3.6 3.5-3.6 1 0 1.8.1 2.1.1v2.4h-1.4c-1.1 0-1.3.5-1.3 1.3v1.7h2.7l-.4 2.8h-2.3v7H20c.5 0 1-.4 1-1V4c0-.6-.4-1-1-1z');
export const instagram = fromPathData24x24('M12 4.622c2.403 0 2.688.01 3.637.052.877.04 1.354.187 1.67.31.42.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.67.043.95.052 1.235.052 3.638s-.01 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.42-.358.72-.673 1.036-.315.315-.615.51-1.035.673-.317.123-.794.27-1.67.31-.95.043-1.234.052-3.638.052s-2.688-.01-3.637-.052c-.877-.04-1.354-.187-1.67-.31-.42-.163-.72-.358-1.036-.673-.315-.315-.51-.615-.673-1.035-.123-.317-.27-.794-.31-1.67-.043-.95-.052-1.235-.052-3.638s.01-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.42.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.67-.31.95-.043 1.235-.052 3.638-.052M12 3c-2.444 0-2.75.01-3.71.054s-1.613.196-2.185.418c-.592.23-1.094.538-1.594 1.04-.5.5-.807 1-1.037 1.593-.223.572-.375 1.226-.42 2.184C3.01 9.25 3 9.555 3 12s.01 2.75.054 3.71.196 1.613.418 2.186c.23.592.538 1.094 1.038 1.594s1.002.808 1.594 1.038c.572.222 1.227.375 2.185.418.96.044 1.266.054 3.71.054s2.75-.01 3.71-.054 1.613-.196 2.186-.418c.592-.23 1.094-.538 1.594-1.038s.808-1.002 1.038-1.594c.222-.572.375-1.227.418-2.185.044-.96.054-1.266.054-3.71s-.01-2.75-.054-3.71-.196-1.613-.418-2.186c-.23-.592-.538-1.094-1.038-1.594s-1.002-.808-1.594-1.038c-.572-.222-1.227-.375-2.185-.418C14.75 3.01 14.445 3 12 3zm0 4.378c-2.552 0-4.622 2.07-4.622 4.622s2.07 4.622 4.622 4.622 4.622-2.07 4.622-4.622S14.552 7.378 12 7.378zM12 15c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zm4.804-8.884c-.596 0-1.08.484-1.08 1.08s.484 1.08 1.08 1.08c.596 0 1.08-.484 1.08-1.08s-.483-1.08-1.08-1.08z');
export const empty = createElement(SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
});
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["SVG","Path","fromPathData24x24","pathData","createElement","xmlns","viewBox","d","facebook","instagram","empty"],"sources":["@wordpress/components/src/mobile/dashicons/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Path } from '@wordpress/primitives';\n\nconst fromPathData24x24 = ( pathData ) => (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Path d={ pathData } />\n\t</SVG>\n);\n\nexport const facebook = fromPathData24x24(\n\t'M20 3H4c-.6 0-1 .4-1 1v16c0 .5.4 1 1 1h8.6v-7h-2.3v-2.7h2.3v-2c0-2.3 1.4-3.6 3.5-3.6 1 0 1.8.1 2.1.1v2.4h-1.4c-1.1 0-1.3.5-1.3 1.3v1.7h2.7l-.4 2.8h-2.3v7H20c.5 0 1-.4 1-1V4c0-.6-.4-1-1-1z'\n);\n\nexport const instagram = fromPathData24x24(\n\t'M12 4.622c2.403 0 2.688.01 3.637.052.877.04 1.354.187 1.67.31.42.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.67.043.95.052 1.235.052 3.638s-.01 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.42-.358.72-.673 1.036-.315.315-.615.51-1.035.673-.317.123-.794.27-1.67.31-.95.043-1.234.052-3.638.052s-2.688-.01-3.637-.052c-.877-.04-1.354-.187-1.67-.31-.42-.163-.72-.358-1.036-.673-.315-.315-.51-.615-.673-1.035-.123-.317-.27-.794-.31-1.67-.043-.95-.052-1.235-.052-3.638s.01-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.42.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.67-.31.95-.043 1.235-.052 3.638-.052M12 3c-2.444 0-2.75.01-3.71.054s-1.613.196-2.185.418c-.592.23-1.094.538-1.594 1.04-.5.5-.807 1-1.037 1.593-.223.572-.375 1.226-.42 2.184C3.01 9.25 3 9.555 3 12s.01 2.75.054 3.71.196 1.613.418 2.186c.23.592.538 1.094 1.038 1.594s1.002.808 1.594 1.038c.572.222 1.227.375 2.185.418.96.044 1.266.054 3.71.054s2.75-.01 3.71-.054 1.613-.196 2.186-.418c.592-.23 1.094-.538 1.594-1.038s.808-1.002 1.038-1.594c.222-.572.375-1.227.418-2.185.044-.96.054-1.266.054-3.71s-.01-2.75-.054-3.71-.196-1.613-.418-2.186c-.23-.592-.538-1.094-1.038-1.594s-1.002-.808-1.594-1.038c-.572-.222-1.227-.375-2.185-.418C14.75 3.01 14.445 3 12 3zm0 4.378c-2.552 0-4.622 2.07-4.622 4.622s2.07 4.622 4.622 4.622 4.622-2.07 4.622-4.622S14.552 7.378 12 7.378zM12 15c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zm4.804-8.884c-.596 0-1.08.484-1.08 1.08s.484 1.08 1.08 1.08c.596 0 1.08-.484 1.08-1.08s-.483-1.08-1.08-1.08z'\n);\n\nexport const empty = (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" />\n);\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,GAAG,EAAEC,IAAI,QAAQ,uBAAuB;AAEjD,MAAMC,iBAAiB,GAAKC,QAAQ,IACnCC,aAAA,CAACJ,GAAG;EAACK,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAW,GAC1DF,aAAA,CAACH,IAAI;EAACM,CAAC,EAAGJ;AAAU,CAAE,CAClB,CACL;AAED,OAAO,MAAMK,QAAQ,GAAGN,iBAAiB,CACxC,6LACD,CAAC;AAED,OAAO,MAAMO,SAAS,GAAGP,iBAAiB,CACzC,ugDACD,CAAC;AAED,OAAO,MAAMQ,KAAK,GACjBN,aAAA,CAACJ,GAAG;EAACK,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAW,CAAE,CAC7D"}

View File

@@ -0,0 +1,65 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { SafeAreaView } from 'react-native';
import { useRoute, useNavigation } from '@react-navigation/native';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { memo, useContext, useState, useCallback } from '@wordpress/element';
import { BottomSheetContext, FocalPointPicker } from '@wordpress/components';
/**
* Internal dependencies
*/
import NavBar from '../bottom-sheet/nav-bar';
import styles from './styles.scss';
const FocalPointSettingsPanelMemo = memo(({
focalPoint,
onFocalPointChange,
shouldEnableBottomSheetScroll,
url
}) => {
const navigation = useNavigation();
function onButtonPress(action) {
navigation.goBack();
if (action === 'apply') {
onFocalPointChange(draftFocalPoint);
}
}
const [draftFocalPoint, setDraftFocalPoint] = useState(focalPoint);
function setPosition(coordinates) {
setDraftFocalPoint(prevState => ({
...prevState,
...coordinates
}));
}
return createElement(SafeAreaView, {
style: styles.safearea
}, createElement(NavBar, null, createElement(NavBar.DismissButton, {
onPress: () => onButtonPress('cancel')
}), createElement(NavBar.Heading, null, __('Edit focal point')), createElement(NavBar.ApplyButton, {
onPress: () => onButtonPress('apply')
})), createElement(FocalPointPicker, {
focalPoint: draftFocalPoint,
onChange: useCallback(setPosition, []),
shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
url: url
}));
});
function FocalPointSettingsPanel(props) {
const route = useRoute();
const {
shouldEnableBottomSheetScroll
} = useContext(BottomSheetContext);
return createElement(FocalPointSettingsPanelMemo, {
shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
...props,
...route.params
});
}
export default FocalPointSettingsPanel;
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["SafeAreaView","useRoute","useNavigation","__","memo","useContext","useState","useCallback","BottomSheetContext","FocalPointPicker","NavBar","styles","FocalPointSettingsPanelMemo","focalPoint","onFocalPointChange","shouldEnableBottomSheetScroll","url","navigation","onButtonPress","action","goBack","draftFocalPoint","setDraftFocalPoint","setPosition","coordinates","prevState","createElement","style","safearea","DismissButton","onPress","Heading","ApplyButton","onChange","FocalPointSettingsPanel","props","route","params"],"sources":["@wordpress/components/src/mobile/focal-point-settings-panel/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { SafeAreaView } from 'react-native';\nimport { useRoute, useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { memo, useContext, useState, useCallback } from '@wordpress/element';\nimport { BottomSheetContext, FocalPointPicker } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport NavBar from '../bottom-sheet/nav-bar';\nimport styles from './styles.scss';\n\nconst FocalPointSettingsPanelMemo = memo(\n\t( {\n\t\tfocalPoint,\n\t\tonFocalPointChange,\n\t\tshouldEnableBottomSheetScroll,\n\t\turl,\n\t} ) => {\n\t\tconst navigation = useNavigation();\n\n\t\tfunction onButtonPress( action ) {\n\t\t\tnavigation.goBack();\n\t\t\tif ( action === 'apply' ) {\n\t\t\t\tonFocalPointChange( draftFocalPoint );\n\t\t\t}\n\t\t}\n\n\t\tconst [ draftFocalPoint, setDraftFocalPoint ] = useState( focalPoint );\n\t\tfunction setPosition( coordinates ) {\n\t\t\tsetDraftFocalPoint( ( prevState ) => ( {\n\t\t\t\t...prevState,\n\t\t\t\t...coordinates,\n\t\t\t} ) );\n\t\t}\n\n\t\treturn (\n\t\t\t<SafeAreaView style={ styles.safearea }>\n\t\t\t\t<NavBar>\n\t\t\t\t\t<NavBar.DismissButton\n\t\t\t\t\t\tonPress={ () => onButtonPress( 'cancel' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<NavBar.Heading>\n\t\t\t\t\t\t{ __( 'Edit focal point' ) }\n\t\t\t\t\t</NavBar.Heading>\n\t\t\t\t\t<NavBar.ApplyButton\n\t\t\t\t\t\tonPress={ () => onButtonPress( 'apply' ) }\n\t\t\t\t\t/>\n\t\t\t\t</NavBar>\n\t\t\t\t<FocalPointPicker\n\t\t\t\t\tfocalPoint={ draftFocalPoint }\n\t\t\t\t\tonChange={ useCallback( setPosition, [] ) }\n\t\t\t\t\tshouldEnableBottomSheetScroll={\n\t\t\t\t\t\tshouldEnableBottomSheetScroll\n\t\t\t\t\t}\n\t\t\t\t\turl={ url }\n\t\t\t\t/>\n\t\t\t</SafeAreaView>\n\t\t);\n\t}\n);\n\nfunction FocalPointSettingsPanel( props ) {\n\tconst route = useRoute();\n\tconst { shouldEnableBottomSheetScroll } = useContext( BottomSheetContext );\n\n\treturn (\n\t\t<FocalPointSettingsPanelMemo\n\t\t\tshouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll }\n\t\t\t{ ...props }\n\t\t\t{ ...route.params }\n\t\t/>\n\t);\n}\n\nexport default FocalPointSettingsPanel;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,cAAc;AAC3C,SAASC,QAAQ,EAAEC,aAAa,QAAQ,0BAA0B;;AAElE;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,IAAI,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,oBAAoB;AAC5E,SAASC,kBAAkB,EAAEC,gBAAgB,QAAQ,uBAAuB;;AAE5E;AACA;AACA;AACA,OAAOC,MAAM,MAAM,yBAAyB;AAC5C,OAAOC,MAAM,MAAM,eAAe;AAElC,MAAMC,2BAA2B,GAAGR,IAAI,CACvC,CAAE;EACDS,UAAU;EACVC,kBAAkB;EAClBC,6BAA6B;EAC7BC;AACD,CAAC,KAAM;EACN,MAAMC,UAAU,GAAGf,aAAa,CAAC,CAAC;EAElC,SAASgB,aAAaA,CAAEC,MAAM,EAAG;IAChCF,UAAU,CAACG,MAAM,CAAC,CAAC;IACnB,IAAKD,MAAM,KAAK,OAAO,EAAG;MACzBL,kBAAkB,CAAEO,eAAgB,CAAC;IACtC;EACD;EAEA,MAAM,CAAEA,eAAe,EAAEC,kBAAkB,CAAE,GAAGhB,QAAQ,CAAEO,UAAW,CAAC;EACtE,SAASU,WAAWA,CAAEC,WAAW,EAAG;IACnCF,kBAAkB,CAAIG,SAAS,KAAQ;MACtC,GAAGA,SAAS;MACZ,GAAGD;IACJ,CAAC,CAAG,CAAC;EACN;EAEA,OACCE,aAAA,CAAC1B,YAAY;IAAC2B,KAAK,EAAGhB,MAAM,CAACiB;EAAU,GACtCF,aAAA,CAAChB,MAAM,QACNgB,aAAA,CAAChB,MAAM,CAACmB,aAAa;IACpBC,OAAO,EAAGA,CAAA,KAAMZ,aAAa,CAAE,QAAS;EAAG,CAC3C,CAAC,EACFQ,aAAA,CAAChB,MAAM,CAACqB,OAAO,QACZ5B,EAAE,CAAE,kBAAmB,CACV,CAAC,EACjBuB,aAAA,CAAChB,MAAM,CAACsB,WAAW;IAClBF,OAAO,EAAGA,CAAA,KAAMZ,aAAa,CAAE,OAAQ;EAAG,CAC1C,CACM,CAAC,EACTQ,aAAA,CAACjB,gBAAgB;IAChBI,UAAU,EAAGQ,eAAiB;IAC9BY,QAAQ,EAAG1B,WAAW,CAAEgB,WAAW,EAAE,EAAG,CAAG;IAC3CR,6BAA6B,EAC5BA,6BACA;IACDC,GAAG,EAAGA;EAAK,CACX,CACY,CAAC;AAEjB,CACD,CAAC;AAED,SAASkB,uBAAuBA,CAAEC,KAAK,EAAG;EACzC,MAAMC,KAAK,GAAGnC,QAAQ,CAAC,CAAC;EACxB,MAAM;IAAEc;EAA8B,CAAC,GAAGV,UAAU,CAAEG,kBAAmB,CAAC;EAE1E,OACCkB,aAAA,CAACd,2BAA2B;IAC3BG,6BAA6B,EAAGA,6BAA+B;IAAA,GAC1DoB,KAAK;IAAA,GACLC,KAAK,CAACC;EAAM,CACjB,CAAC;AAEJ;AAEA,eAAeH,uBAAuB"}

View File

@@ -0,0 +1,58 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { createContext, useContext } from '@wordpress/element';
/**
* Internal dependencies
*/
import { BLOCK_STYLE_ATTRIBUTES, getBlockPaddings, getBlockColors, getBlockTypography } from './utils';
const GlobalStylesContext = createContext({
style: {}
});
GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES;
export const getMergedGlobalStyles = (baseGlobalStyles, globalStyle, wrapperPropsStyle, blockAttributes, defaultColors, blockName, fontSizes) => {
// Current support for general styles and blocks.
const baseGlobalColors = {
baseColors: {
color: baseGlobalStyles?.color,
typography: baseGlobalStyles?.typography,
elements: {
link: baseGlobalStyles?.elements?.link
},
blocks: {
'core/button': baseGlobalStyles?.blocks?.['core/button']
}
}
};
const blockStyleAttributes = Object.fromEntries(Object.entries(blockAttributes !== null && blockAttributes !== void 0 ? blockAttributes : {}).filter(([key]) => BLOCK_STYLE_ATTRIBUTES.includes(key)));
// This prevents certain wrapper styles from being applied to blocks that
// don't support them yet.
const wrapperPropsStyleFiltered = Object.fromEntries(Object.entries(wrapperPropsStyle !== null && wrapperPropsStyle !== void 0 ? wrapperPropsStyle : {}).filter(([key]) => BLOCK_STYLE_ATTRIBUTES.includes(key)));
const mergedStyle = {
...baseGlobalColors,
...globalStyle,
...wrapperPropsStyleFiltered
};
const blockColors = getBlockColors(blockStyleAttributes, defaultColors, blockName, baseGlobalStyles);
const blockPaddings = getBlockPaddings(mergedStyle, wrapperPropsStyle, blockStyleAttributes, blockColors);
const blockTypography = getBlockTypography(blockStyleAttributes, fontSizes, blockName, baseGlobalStyles);
return {
...mergedStyle,
...blockPaddings,
...blockColors,
...blockTypography
};
};
export const useGlobalStyles = () => {
const globalStyles = useContext(GlobalStylesContext);
return globalStyles;
};
export const withGlobalStyles = WrappedComponent => props => createElement(GlobalStylesContext.Consumer, null, globalStyles => createElement(WrappedComponent, {
...props,
globalStyles: globalStyles
}));
export default GlobalStylesContext;
//# sourceMappingURL=index.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,387 @@
/**
* External dependencies
*/
import { camelCase } from 'change-case';
import { Dimensions } from 'react-native';
import { colord } from 'colord';
/**
* WordPress dependencies
*/
import { useSettings, useMultipleOriginColorsAndGradients, SETTINGS_DEFAULTS } from '@wordpress/block-editor';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
* Internal dependencies
*/
import { default as getPxFromCssUnit } from '../utils/get-px-from-css-unit';
import { useGlobalStyles } from './index.native';
export const BLOCK_STYLE_ATTRIBUTES = ['textColor', 'backgroundColor', 'style', 'color', 'fontSize'];
// Mapping style properties name to native.
const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
textColor: 'color',
text: 'color',
background: 'backgroundColor',
link: 'linkColor',
placeholder: 'placeholderColor'
};
const PADDING = 12; // $solid-border-space
const UNKNOWN_VALUE = 'undefined';
const DEFAULT_FONT_SIZE = 16;
export function getBlockPaddings(mergedStyle, wrapperPropsStyle, blockStyleAttributes, blockColors) {
const blockPaddings = {};
if (!mergedStyle.padding && (wrapperPropsStyle?.backgroundColor || blockStyleAttributes?.backgroundColor || blockColors?.backgroundColor)) {
blockPaddings.padding = PADDING;
return blockPaddings;
}
// Prevent adding extra paddings to inner blocks without background colors.
if (mergedStyle?.padding && !wrapperPropsStyle?.backgroundColor && !blockStyleAttributes?.backgroundColor && !blockColors?.backgroundColor) {
blockPaddings.padding = undefined;
}
return blockPaddings;
}
export function getBlockColors(blockStyleAttributes, defaultColors, blockName, baseGlobalStyles) {
const blockStyles = {};
const customBlockStyles = blockStyleAttributes?.style?.color || {};
const blockGlobalStyles = baseGlobalStyles?.blocks?.[blockName];
// Global styles colors.
if (blockGlobalStyles?.color) {
Object.entries(blockGlobalStyles.color).forEach(([key, value]) => {
const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[key];
if (styleKey && value !== UNKNOWN_VALUE) {
var _customBlockStyles$ke;
const color = (_customBlockStyles$ke = customBlockStyles[key]) !== null && _customBlockStyles$ke !== void 0 ? _customBlockStyles$ke : value;
blockStyles[styleKey] = color;
}
});
} else if (baseGlobalStyles?.styles?.color?.text) {
blockStyles[BLOCK_STYLE_ATTRIBUTES_MAPPING.text] = baseGlobalStyles?.styles?.color?.text;
}
// Global styles elements.
if (blockGlobalStyles?.elements) {
const linkColor = blockGlobalStyles.elements?.link?.color?.text;
const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING.link;
if (styleKey && linkColor && linkColor !== UNKNOWN_VALUE) {
blockStyles[styleKey] = linkColor;
}
}
// Custom colors.
Object.entries(blockStyleAttributes).forEach(([key, value]) => {
const isCustomColor = value?.startsWith?.('#');
let styleKey = key;
if (BLOCK_STYLE_ATTRIBUTES_MAPPING[styleKey]) {
styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING[styleKey];
}
if (!isCustomColor) {
const mappedColor = Object.values(defaultColors !== null && defaultColors !== void 0 ? defaultColors : {}).find(({
slug
}) => slug === value);
if (mappedColor) {
blockStyles[styleKey] = mappedColor.color;
}
} else {
blockStyles[styleKey] = value;
}
});
// Color placeholder.
if (blockStyles?.color) {
blockStyles[BLOCK_STYLE_ATTRIBUTES_MAPPING.placeholder] = blockStyles.color;
}
return blockStyles;
}
export function getBlockTypography(blockStyleAttributes, fontSizes, blockName, baseGlobalStyles) {
const typographyStyles = {};
const customBlockStyles = blockStyleAttributes?.style?.typography || {};
const blockGlobalStyles = baseGlobalStyles?.blocks?.[blockName];
const parsedFontSizes = Object.values(fontSizes !== null && fontSizes !== void 0 ? fontSizes : {});
// Global styles.
if (blockGlobalStyles?.typography) {
const fontSize = blockGlobalStyles?.typography?.fontSize;
const lineHeight = blockGlobalStyles?.typography?.lineHeight;
if (fontSize) {
if (parseInt(fontSize, 10)) {
typographyStyles.fontSize = fontSize;
} else {
const mappedFontSize = parsedFontSizes.find(({
slug
}) => slug === fontSize);
if (mappedFontSize) {
typographyStyles.fontSize = mappedFontSize?.size;
}
}
}
if (lineHeight) {
typographyStyles.lineHeight = lineHeight;
}
}
if (blockStyleAttributes?.fontSize && baseGlobalStyles) {
const mappedFontSize = parsedFontSizes.find(({
slug
}) => slug === blockStyleAttributes?.fontSize);
if (mappedFontSize) {
typographyStyles.fontSize = mappedFontSize?.size;
}
}
// Custom styles.
if (customBlockStyles?.fontSize) {
typographyStyles.fontSize = customBlockStyles?.fontSize;
}
if (customBlockStyles?.lineHeight) {
typographyStyles.lineHeight = customBlockStyles?.lineHeight;
}
return typographyStyles;
}
/**
* Return a value from a certain path of the object.
* Path is specified as an array of properties, like: [ 'parent', 'child' ].
*
* @param {Object} object Input object.
* @param {Array} path Path to the object property.
* @return {*} Value of the object property at the specified path.
*/
const getValueFromObjectPath = (object, path) => {
let value = object;
path.forEach(fieldName => {
value = value?.[fieldName];
});
return value;
};
export function parseStylesVariables(styles, mappedValues, customValues) {
let stylesBase = styles;
const variables = ['preset', 'custom', 'var', 'fontSize'];
if (!stylesBase) {
return styles;
}
variables.forEach(variable => {
// Examples
// var(--wp--preset--color--gray)
// var(--wp--custom--body--typography--font-family)
// var:preset|color|custom-color-2
const regex = new RegExp(`var\\(--wp--${variable}--(.*?)\\)`, 'g');
const varRegex = /\"var:preset\|color\|(.*?)\"/gm;
const fontSizeRegex = /"fontSize":"(.*?)"/gm;
if (variable === 'preset') {
stylesBase = stylesBase.replace(regex, (_$1, $2) => {
const path = $2.split('--');
const mappedPresetValue = mappedValues[path[0]];
if (mappedPresetValue && mappedPresetValue.slug) {
var _mappedPresetValue$va;
const matchedValue = Object.values((_mappedPresetValue$va = mappedPresetValue.values) !== null && _mappedPresetValue$va !== void 0 ? _mappedPresetValue$va : {}).find(({
slug
}) => slug === path[1]);
return matchedValue?.[mappedPresetValue.slug];
}
return UNKNOWN_VALUE;
});
}
if (variable === 'custom') {
const customValuesData = customValues !== null && customValues !== void 0 ? customValues : JSON.parse(stylesBase);
stylesBase = stylesBase.replace(regex, (_$1, $2) => {
const path = $2.split('--');
// Supports cases for variables like var(--wp--custom--color--background)
if (path[0] === 'color') {
const colorKey = path[path.length - 1];
if (mappedValues?.color) {
const matchedValue = mappedValues.color?.values?.find(({
slug
}) => slug === colorKey);
if (matchedValue) {
return `${matchedValue?.color}`;
}
}
}
if (path.reduce((prev, curr) => prev && prev[curr], customValuesData)) {
return getValueFromObjectPath(customValuesData, path);
}
// Check for camelcase properties.
return getValueFromObjectPath(customValuesData, [...path.slice(0, path.length - 1), camelCase(path[path.length - 1])]);
});
}
if (variable === 'var') {
stylesBase = stylesBase.replace(varRegex, (_$1, $2) => {
if (mappedValues?.color) {
const matchedValue = mappedValues.color?.values?.find(({
slug
}) => slug === $2);
return `"${matchedValue?.color}"`;
}
return UNKNOWN_VALUE;
});
}
if (variable === 'fontSize') {
const {
width,
height
} = Dimensions.get('window');
stylesBase = stylesBase.replace(fontSizeRegex, (_$1, $2) => {
const parsedFontSize = getPxFromCssUnit($2, {
width,
height,
fontSize: DEFAULT_FONT_SIZE
}) || `${DEFAULT_FONT_SIZE}px`;
return `"fontSize":"${parsedFontSize}"`;
});
}
});
return JSON.parse(stylesBase);
}
export function getMappedValues(features, palette) {
const typography = features?.typography;
const colors = [...(palette?.theme || []), ...(palette?.custom || []), ...(palette?.default || [])];
const fontSizes = {
...typography?.fontSizes?.theme,
...typography?.fontSizes?.custom
};
const mappedValues = {
color: {
values: colors,
slug: 'color'
},
'font-size': {
values: fontSizes,
slug: 'size'
}
};
return mappedValues;
}
/**
* Returns the normalized fontSizes to include the sizePx value for each of the different sizes.
*
* @param {Object} fontSizes found in global styles.
* @return {Object} normalized sizes.
*/
function normalizeFontSizes(fontSizes) {
if (!fontSizes) {
return fontSizes;
}
const dimensions = Dimensions.get('window');
const normalizedFontSizes = {};
const keysToProcess = [];
// Check if 'theme' or 'custom' keys exist and add them to keysToProcess array
if (fontSizes?.theme) {
keysToProcess.push('theme');
}
if (fontSizes?.custom) {
keysToProcess.push('custom');
}
// If neither 'theme' nor 'custom' exist, add 'default' if it exists
if (keysToProcess.length === 0 && fontSizes?.default) {
keysToProcess.push('default');
}
keysToProcess.forEach(key => {
normalizedFontSizes[key] = fontSizes[key].map(fontSizeObject => {
fontSizeObject.sizePx = getPxFromCssUnit(fontSizeObject.size, {
width: dimensions.width,
height: dimensions.height,
fontSize: DEFAULT_FONT_SIZE
});
return fontSizeObject;
});
});
return normalizedFontSizes;
}
export function useMobileGlobalStylesColors(type = 'colors') {
const colorGradientSettings = useMultipleOriginColorsAndGradients();
const availableThemeColors = colorGradientSettings?.[type]?.reduce((colors, origin) => colors.concat(origin?.[type]), []);
// Default editor colors/gradients if it's not a block-based theme.
const defaultPaletteSetting = type === 'colors' ? 'color.palette' : 'color.gradients';
const [defaultPaletteValue] = useSettings(defaultPaletteSetting);
// In edge cases, the default palette might be undefined. To avoid
// exceptions across the editor in that case, we explicitly return
// the default editor colors.
const defaultPalette = defaultPaletteValue !== null && defaultPaletteValue !== void 0 ? defaultPaletteValue : SETTINGS_DEFAULTS.colors;
return availableThemeColors.length >= 1 ? availableThemeColors : defaultPalette;
}
export function getColorsAndGradients(defaultEditorColors = [], defaultEditorGradients = [], rawFeatures) {
const features = rawFeatures ? JSON.parse(rawFeatures) : {};
return {
__experimentalGlobalStylesBaseStyles: null,
__experimentalFeatures: {
color: {
...(!features?.color ? {
text: true,
background: true,
palette: {
default: defaultEditorColors
},
gradients: {
default: defaultEditorGradients
}
} : features?.color),
defaultPalette: defaultEditorColors?.length > 0,
defaultGradients: defaultEditorGradients?.length > 0
}
}
};
}
export function getGlobalStyles(rawStyles, rawFeatures) {
var _features$color$text, _features$color$backg, _features$color$defau, _features$color$defau2;
const features = rawFeatures ? JSON.parse(rawFeatures) : {};
const mappedValues = getMappedValues(features, features?.color?.palette);
const colors = parseStylesVariables(JSON.stringify(features?.color), mappedValues);
const gradients = parseStylesVariables(JSON.stringify(features?.color?.gradients), mappedValues);
const customValues = parseStylesVariables(JSON.stringify(features?.custom), mappedValues);
const globalStyles = parseStylesVariables(rawStyles, mappedValues, customValues);
const fontSizes = normalizeFontSizes(features?.typography?.fontSizes);
return {
__experimentalFeatures: {
color: {
palette: colors?.palette,
gradients,
text: (_features$color$text = features?.color?.text) !== null && _features$color$text !== void 0 ? _features$color$text : true,
background: (_features$color$backg = features?.color?.background) !== null && _features$color$backg !== void 0 ? _features$color$backg : true,
defaultPalette: (_features$color$defau = features?.color?.defaultPalette) !== null && _features$color$defau !== void 0 ? _features$color$defau : true,
defaultGradients: (_features$color$defau2 = features?.color?.defaultGradients) !== null && _features$color$defau2 !== void 0 ? _features$color$defau2 : true
},
typography: {
fontSizes,
customLineHeight: features?.custom?.['line-height']
},
spacing: features?.spacing
},
__experimentalGlobalStylesBaseStyles: globalStyles
};
}
/**
* Determine and apply appropriate color scheme based on global styles or device's light/dark mode.
*
* The function first attempts to retrieve the editor's background color from global styles.
* If the detected background color is light, light styles are applied, and dark styles otherwise.
* If no custom background color is defined, styles are applied using the device's dark/light setting.
*
* @param {Object} baseStyle - An object representing the base (light theme) styles for the editor.
* @param {Object} darkStyle - An object representing the additional styles to apply when the editor is in dark mode.
*
* @return {Object} - The combined style object that should be applied to the editor.
*/
export const useEditorColorScheme = (baseStyle, darkStyle) => {
const globalStyles = useGlobalStyles();
const deviceColorScheme = usePreferredColorSchemeStyle(baseStyle, darkStyle);
const editorColors = globalStyles?.baseColors?.color;
const editorBackgroundColor = editorColors?.background;
const isBackgroundColorDefined = typeof editorBackgroundColor !== 'undefined' && editorBackgroundColor !== 'undefined';
if (isBackgroundColorDefined) {
const isEditorBackgroundDark = colord(editorBackgroundColor).isDark();
return isEditorBackgroundDark ? {
...baseStyle,
...darkStyle
} : baseStyle;
}
return deviceColorScheme;
};
//# sourceMappingURL=utils.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,145 @@
import { createElement } from "react";
/**
* External dependencies
*/
import { View, Platform } from 'react-native';
import RNLinearGradient from 'react-native-linear-gradient';
import gradientParser from 'gradient-parser';
/**
* WordPress dependencies
*/
import { colorsUtils } from '@wordpress/components';
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';
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 createElement(RNLinearGradient, {
colors: colors,
useAngle: true,
angle: getGradientAngle(gradientValue),
locations: locations,
angleCenter: angleCenter,
style: style,
...otherProps
}, children);
}
return createElement(View, {
style: [style, styles.overflow]
}, createElement(View, {
style: styles.radialGradientContent
}, children), resizeObserver, createElement(SVG, null, createElement(Defs, null, createElement(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 createElement(Stop, {
offset: group[1],
stopColor: group[0],
stopOpacity: "1",
key: `${group[1]}-${group[0]}`
});
}))), createElement(Rect, {
height: height,
width: width,
fill: "url(#radialGradient)"
})));
}
export default Gradient;
//# sourceMappingURL=index.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,29 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';
const fromPathData24x24 = pathData => createElement(SVG, {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
}, createElement(Path, {
d: pathData
}));
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 = createElement(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
};
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["SVG","Path","fromPathData24x24","pathData","createElement","xmlns","viewBox","d","clipboard","posts","pages","refresh","noticeOutline","empty","search"],"sources":["@wordpress/components/src/mobile/gridicons/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Path } from '@wordpress/primitives';\n\nconst fromPathData24x24 = ( pathData ) => (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Path d={ pathData } />\n\t</SVG>\n);\n\nexport const clipboard = fromPathData24x24(\n\t'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'\n);\nexport const posts = fromPathData24x24(\n\t'M16 19H3v-2h13v2zm5-10H3v2h18V9zM3 5v2h11V5H3zm14 0v2h4V5h-4zm-6 8v2h10v-2H11zm-8 0v2h5v-2H3z'\n);\nexport const pages = fromPathData24x24(\n\t'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'\n);\nexport const refresh = fromPathData24x24(\n\t'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'\n);\nexport const noticeOutline = fromPathData24x24(\n\t'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'\n);\nexport const empty = (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" />\n);\nexport const search = fromPathData24x24(\n\t'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'\n);\nexport default {\n\tempty,\n\tposts,\n\tpages,\n\trefresh,\n\tsearch,\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,GAAG,EAAEC,IAAI,QAAQ,uBAAuB;AAEjD,MAAMC,iBAAiB,GAAKC,QAAQ,IACnCC,aAAA,CAACJ,GAAG;EAACK,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAW,GAC1DF,aAAA,CAACH,IAAI;EAACM,CAAC,EAAGJ;AAAU,CAAE,CAClB,CACL;AAED,OAAO,MAAMK,SAAS,GAAGN,iBAAiB,CACzC,0KACD,CAAC;AACD,OAAO,MAAMO,KAAK,GAAGP,iBAAiB,CACrC,+FACD,CAAC;AACD,OAAO,MAAMQ,KAAK,GAAGR,iBAAiB,CACrC,kJACD,CAAC;AACD,OAAO,MAAMS,OAAO,GAAGT,iBAAiB,CACvC,2MACD,CAAC;AACD,OAAO,MAAMU,aAAa,GAAGV,iBAAiB,CAC7C,sKACD,CAAC;AACD,OAAO,MAAMW,KAAK,GACjBT,aAAA,CAACJ,GAAG;EAACK,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAW,CAAE,CAC7D;AACD,OAAO,MAAMQ,MAAM,GAAGZ,iBAAiB,CACtC,wNACD,CAAC;AACD,eAAe;EACdW,KAAK;EACLJ,KAAK;EACLC,KAAK;EACLC,OAAO;EACPG;AACD,CAAC"}

Some files were not shown because too many files have changed in this diff Show More