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,49 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BottomSheetProvider = exports.BottomSheetContext = exports.BottomSheetConsumer = void 0;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
// It's needed to set the following flags via UIManager
// to have `LayoutAnimation` working on Android
if (_reactNative.Platform.OS === 'android' && _reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
_reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
}
// Context in BottomSheet is necessary for controlling the
// transition flow between subsheets and replacing a content inside them
const BottomSheetContext = (0, _element.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: () => {}
});
exports.BottomSheetContext = BottomSheetContext;
const {
Provider: BottomSheetProvider,
Consumer: BottomSheetConsumer
} = BottomSheetContext;
exports.BottomSheetConsumer = BottomSheetConsumer;
exports.BottomSheetProvider = BottomSheetProvider;
//# sourceMappingURL=bottom-sheet-context.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_element","Platform","OS","UIManager","setLayoutAnimationEnabledExperimental","BottomSheetContext","createContext","isBottomSheetContentScrolling","shouldEnableBottomSheetScroll","shouldEnableBottomSheetMaxHeight","onHandleClosingBottomSheet","onHandleHardwareButtonPress","setIsFullScreen","exports","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":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AAPA;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA,IACCE,qBAAQ,CAACC,EAAE,KAAK,SAAS,IACzBC,sBAAS,CAACC,qCAAqC,EAC9C;EACDD,sBAAS,CAACC,qCAAqC,CAAE,IAAK,CAAC;AACxD;;AAEA;AACA;AACO,MAAMC,kBAAkB,GAAG,IAAAC,sBAAa,EAAE;EAChD;EACAC,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;AAACC,OAAA,CAAAR,kBAAA,GAAAA,kBAAA;AAEG,MAAM;EAAES,QAAQ,EAAEC,mBAAmB;EAAEC,QAAQ,EAAEC;AAAoB,CAAC,GAC5EZ,kBAAkB;AAACQ,OAAA,CAAAI,mBAAA,GAAAA,mBAAA;AAAAJ,OAAA,CAAAE,mBAAA,GAAAA,mBAAA"}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BottomSheetNavigationProvider = exports.BottomSheetNavigationContext = exports.BottomSheetNavigationConsumer = void 0;
var _element = require("@wordpress/element");
/**
* WordPress dependencies
*/
// Navigation context in BottomSheet is necessary for controlling the
// height of navigation container.
const BottomSheetNavigationContext = (0, _element.createContext)({
currentHeight: {
value: 0
},
setHeight: () => {}
});
exports.BottomSheetNavigationContext = BottomSheetNavigationContext;
const {
Provider: BottomSheetNavigationProvider,
Consumer: BottomSheetNavigationConsumer
} = BottomSheetNavigationContext;
exports.BottomSheetNavigationConsumer = BottomSheetNavigationConsumer;
exports.BottomSheetNavigationProvider = BottomSheetNavigationProvider;
//# sourceMappingURL=bottom-sheet-navigation-context.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","BottomSheetNavigationContext","createContext","currentHeight","value","setHeight","exports","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":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACO,MAAMC,4BAA4B,GAAG,IAAAC,sBAAa,EAAE;EAC1DC,aAAa,EAAE;IAAEC,KAAK,EAAE;EAAE,CAAC;EAC3BC,SAAS,EAAEA,CAAA,KAAM,CAAC;AACnB,CAAE,CAAC;AAACC,OAAA,CAAAL,4BAAA,GAAAA,4BAAA;AAEG,MAAM;EACZM,QAAQ,EAAEC,6BAA6B;EACvCC,QAAQ,EAAEC;AACX,CAAC,GAAGT,4BAA4B;AAACK,OAAA,CAAAI,6BAAA,GAAAA,6BAAA;AAAAJ,OAAA,CAAAE,6BAAA,GAAAA,6BAAA"}

View File

@@ -0,0 +1,144 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _native = require("@react-navigation/native");
var _stack = require("@react-navigation/stack");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _bottomSheetNavigationContext = require("./bottom-sheet-navigation-context");
var _bottomSheetContext = require("../bottom-sheet-context");
var _styles = _interopRequireDefault(require("./styles.scss"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const AnimationSpec = {
animation: 'timing',
config: {
duration: 200,
easing: _reactNativeReanimated.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 = (0, _element.useRef)((0, _stack.createStackNavigator)()).current;
const navigationContext = (0, _element.useContext)(_bottomSheetNavigationContext.BottomSheetNavigationContext);
const {
maxHeight: sheetMaxHeight,
isMaxHeightSet: isSheetMaxHeightSet
} = (0, _element.useContext)(_bottomSheetContext.BottomSheetContext);
const currentHeight = (0, _reactNativeReanimated.useSharedValue)(navigationContext.currentHeight?.value || DEFAULT_HEIGHT);
const backgroundStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.background, _styles.default.backgroundDark);
const defaultTheme = (0, _element.useMemo)(() => ({
..._native.DefaultTheme,
colors: {
..._native.DefaultTheme.colors,
background: backgroundStyle.backgroundColor
}
}), [backgroundStyle.backgroundColor]);
const _theme = theme || defaultTheme;
const setHeight = (0, _element.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 = (0, _reactNativeReanimated.withTiming)(newHeight, {
duration: HEIGHT_ANIMATION_DURATION,
easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
});
} else {
currentHeight.value = newHeight;
}
}
}, [animate, currentHeight, isSheetMaxHeightSet, sheetMaxHeight]);
const animatedStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
height: currentHeight.value
}));
const screens = (0, _element.useMemo)(() => {
return _element.Children.map(children, child => {
let screen = child;
const {
name,
...otherProps
} = child.props;
if (!main) {
screen = (0, _element.cloneElement)(child, {
...child.props,
isNested: true
});
}
return (0, _react.createElement)(Stack.Screen, {
name: name,
...otherProps,
children: () => screen
});
});
}, [children, main]);
return (0, _element.useMemo)(() => {
return (0, _react.createElement)(_reactNativeReanimated.default.View, {
style: [style, animatedStyles],
testID: testID
}, (0, _react.createElement)(_bottomSheetNavigationContext.BottomSheetNavigationProvider, {
value: {
setHeight,
currentHeight
}
}, main ? (0, _react.createElement)(_native.NavigationContainer, {
theme: _theme
}, (0, _react.createElement)(Stack.Navigator, {
screenOptions: options,
detachInactiveScreens: false
}, screens)) : (0, _react.createElement)(Stack.Navigator, {
screenOptions: options,
detachInactiveScreens: false
}, screens)));
}, [_theme, animatedStyles, currentHeight, main, screens, setHeight, style, testID]);
}
var _default = BottomSheetNavigationContainer;
exports.default = _default;
//# sourceMappingURL=navigation-container.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,124 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _native = require("@react-navigation/native");
var _reactNative = require("react-native");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _bottomSheetNavigationContext = require("./bottom-sheet-navigation-context");
var _styles = _interopRequireDefault(require("./styles.scss"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const BottomSheetNavigationScreen = ({
children,
fullScreen,
isScrollable,
isNested,
name
}) => {
const navigation = (0, _native.useNavigation)();
const maxHeight = (0, _element.useRef)(0);
const isFocused = (0, _native.useIsFocused)();
const {
onHandleHardwareButtonPress,
shouldEnableBottomSheetMaxHeight,
setIsFullScreen,
listProps,
safeAreaBottomInset
} = (0, _element.useContext)(_components.BottomSheetContext);
const {
height: windowHeight
} = (0, _reactNative.useWindowDimensions)();
const {
setHeight
} = (0, _element.useContext)(_bottomSheetNavigationContext.BottomSheetNavigationContext);
(0, _native.useFocusEffect)((0, _element.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
}, []));
(0, _native.useFocusEffect)((0, _element.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 (0, _element.useMemo)(() => {
return isScrollable || isNested ? (0, _react.createElement)(_reactNative.View, {
onLayout: onLayout,
testID: `navigation-screen-${name}`
}, children) : (0, _react.createElement)(_reactNative.ScrollView, {
...listProps
}, (0, _react.createElement)(_reactNative.TouchableHighlight, {
accessible: false
}, (0, _react.createElement)(_reactNative.View, {
onLayout: onLayout,
testID: `navigation-screen-${name}`
}, children, !isNested && (0, _react.createElement)(_reactNative.View, {
style: {
height: safeAreaBottomInset || _styles.default.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]);
};
var _default = BottomSheetNavigationScreen;
exports.default = _default;
//# sourceMappingURL=navigation-screen.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,41 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _styles = _interopRequireDefault(require("./styles.scss"));
/**
* External dependencies
*/
/**
* Internal dependencies
*/
const BottomSheetButton = ({
onPress,
disabled,
text,
color
}) => (0, _react.createElement)(_reactNative.TouchableOpacity, {
accessible: true,
onPress: onPress,
disabled: disabled
}, (0, _react.createElement)(_reactNative.View, {
style: {
flexDirection: 'row',
justifyContent: 'center'
}
}, (0, _react.createElement)(_reactNative.Text, {
style: {
..._styles.default.buttonText,
color
}
}, text)));
var _default = BottomSheetButton;
exports.default = _default;
//# sourceMappingURL=button.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_styles","_interopRequireDefault","BottomSheetButton","onPress","disabled","text","color","_react","createElement","TouchableOpacity","accessible","View","style","flexDirection","justifyContent","Text","styles","buttonText","_default","exports","default"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAMG,iBAAiB,GAAGA,CAAE;EAAEC,OAAO;EAAEC,QAAQ;EAAEC,IAAI;EAAEC;AAAM,CAAC,KAC7D,IAAAC,MAAA,CAAAC,aAAA,EAACV,YAAA,CAAAW,gBAAgB;EAChBC,UAAU,EAAG,IAAM;EACnBP,OAAO,EAAGA,OAAS;EACnBC,QAAQ,EAAGA;AAAU,GAErB,IAAAG,MAAA,CAAAC,aAAA,EAACV,YAAA,CAAAa,IAAI;EAACC,KAAK,EAAG;IAAEC,aAAa,EAAE,KAAK;IAAEC,cAAc,EAAE;EAAS;AAAG,GACjE,IAAAP,MAAA,CAAAC,aAAA,EAACV,YAAA,CAAAiB,IAAI;EAACH,KAAK,EAAG;IAAE,GAAGI,eAAM,CAACC,UAAU;IAAEX;EAAM;AAAG,GAAGD,IAAY,CACzD,CACW,CAClB;AAAC,IAAAa,QAAA,GAEahB,iBAAiB;AAAAiB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,302 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _cellStyles = _interopRequireDefault(require("./cellStyles.scss"));
var _ripple = _interopRequireDefault(require("./ripple"));
var _lockIcon = _interopRequireDefault(require("./lock-icon"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const isIOS = _reactNative.Platform.OS === 'ios';
class BottomSheetCell extends _element.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 = _reactNative.AccessibilityInfo.addEventListener('screenReaderChanged', this.handleScreenReaderToggled);
_reactNative.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.default.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.default.cellLabel, _styles.default.cellTextDark);
const cellLabelCenteredStyle = getStylesFromColorScheme(_styles.default.cellLabelCentered, _styles.default.cellTextDark);
const cellLabelLeftAlignNoIconStyle = getStylesFromColorScheme(_styles.default.cellLabelLeftAlignNoIcon, _styles.default.cellTextDark);
const defaultMissingIconAndValue = leftAlign ? cellLabelLeftAlignNoIconStyle : cellLabelCenteredStyle;
const defaultLabelStyle = showValue || customActionButton || icon ? cellLabelStyle : defaultMissingIconAndValue;
const defaultSubLabelStyleText = getStylesFromColorScheme(_styles.default.cellSubLabelText, _styles.default.cellSubLabelTextDark);
const drawSeparator = separatorType && separatorType !== 'none' || separatorStyle === undefined;
const drawTopSeparator = drawSeparator && separatorType === 'topFullWidth';
const cellContainerStyles = [_styles.default.cellContainer, cellContainerStyle];
const rowContainerStyles = [_styles.default.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.default.separator, _styles.default.separatorDark);
const cellSeparatorStyle = this.props.getStylesFromColorScheme(_styles.default.cellSeparator, _styles.default.cellSeparatorDark);
const leftMarginStyle = {
...cellSeparatorStyle,
..._cellStyles.default.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 = _reactNative.I18nManager.isRTL && _styles.default.cellValueRTL;
const cellValueStyle = this.props.getStylesFromColorScheme(_styles.default.cellValue, _styles.default.cellTextDark);
const textInputStyle = {
...cellValueStyle,
...valueStyle,
...styleRTL
};
const placeholderTextColor = disabled ? this.props.getStylesFromColorScheme(_styles.default.placeholderColorDisabled, _styles.default.placeholderColorDisabledDark).color : _styles.default.placeholderColor.color;
const textStyle = {
...(disabled && _styles.default.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 ? (0, _react.createElement)(_reactNative.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
}) : (0, _react.createElement)(_reactNative.Text, {
style: textStyle,
numberOfLines: 1,
ellipsizeMode: 'middle'
}, value);
};
const getAccessibilityLabel = () => {
if (accessible === false) {
return;
}
if (accessibilityLabel || !showValue) {
return accessibilityLabel || label;
}
if (!value) {
return !help ? (0, _i18n.sprintf)( /* translators: accessibility text. Empty state of a inline textinput cell. %s: The cell's title */
(0, _i18n._x)('%s. Empty', 'inline textinput cell'), label) :
// Separating by ',' is necessary to make a pause on urls (non-capitalized text)
(0, _i18n.sprintf)( /* translators: accessibility text. Empty state of a inline textinput cell. %1: Cell title, %2: cell help. */
(0, _i18n._x)('%1$s, %2$s. Empty', 'inline textinput cell'), label, help);
}
return !help ? (0, _i18n.sprintf)( /* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */
(0, _i18n._x)('%1$s, %2$s', 'inline textinput cell'), label, value) // Separating by ',' is necessary to make a pause on urls (non-capitalized text)
: (0, _i18n.sprintf)( /* translators: accessibility text. Inline textinput title, value and help text.%1: Cell title, %2: cell value, , %3: cell help. */
(0, _i18n._x)('%1$s, %2$s, %3$s', 'inline textinput cell'), label, value, help);
};
const iconStyleBase = getStylesFromColorScheme(_styles.default.icon, _styles.default.iconDark);
const resetButtonStyle = getStylesFromColorScheme(_styles.default.resetButton, _styles.default.resetButtonDark);
const cellHelpStyle = [_styles.default.cellHelpLabel, isIOS && _styles.default.cellHelpLabelIOS];
const containerPointerEvents = this.state.isScreenReaderEnabled && accessible ? 'none' : 'auto';
const {
title,
handler
} = customActionButton || {};
const opacity = activeOpacity !== undefined ? activeOpacity : _cellStyles.default.activeOpacity?.opacity;
return (0, _react.createElement)(_ripple.default, {
accessible: accessible !== undefined ? accessible : !this.state.isEditingValue,
accessibilityLabel: getAccessibilityLabel(),
accessibilityRole: accessibilityRole || 'button',
accessibilityHint: isValueEditable ? /* translators: accessibility text */
(0, _i18n.__)('Double tap to edit this value') : accessibilityHint,
disabled: disabled || !isInteractive,
activeOpacity: opacity,
onPress: onCellPress,
onLongPress: onLongPress,
style: [_styles.default.clipToBounds, style],
borderless: borderless
}, drawTopSeparator && (0, _react.createElement)(_reactNative.View, {
style: separatorStyle()
}), (0, _react.createElement)(_reactNative.View, {
style: cellContainerStyles,
pointerEvents: containerPointerEvents
}, (0, _react.createElement)(_reactNative.View, {
style: rowContainerStyles
}, (0, _react.createElement)(_reactNative.View, {
style: _styles.default.cellRowContainer
}, icon && (0, _react.createElement)(_reactNative.View, {
style: [_styles.default.cellRowContainer, _styles.default.cellRowIcon]
}, (0, _react.createElement)(_components.Icon, {
lock: true,
icon: icon,
size: 24,
fill: iconStyle.color || iconStyleBase.color,
style: iconStyle,
isPressed: false
}), (0, _react.createElement)(_reactNative.View, {
style: _cellStyles.default.labelIconSeparator
})), subLabel && label && (0, _react.createElement)(_reactNative.View, null, (0, _react.createElement)(_reactNative.Text, {
style: [defaultLabelStyle, labelStyle]
}, label), (0, _react.createElement)(_reactNative.Text, {
style: defaultSubLabelStyleText
}, subLabel)), !subLabel && label && (0, _react.createElement)(_reactNative.Text, {
style: [defaultLabelStyle, labelStyle]
}, label)), customActionButton && (0, _react.createElement)(_reactNative.TouchableOpacity, {
onPress: handler,
accessibilityRole: 'button'
}, (0, _react.createElement)(_reactNative.Text, {
style: resetButtonStyle
}, title))), isSelected && (0, _react.createElement)(_components.Icon, {
icon: _icons.check,
fill: _cellStyles.default.isSelected.color,
testID: "bottom-sheet-cell-selected-icon"
}), showValue && getValueComponent(), (0, _react.createElement)(_reactNative.View, {
style: [disabled && disabledStyle, _styles.default.cellRowContainer],
pointerEvents: disabled ? 'none' : 'auto'
}, children), disabled && showLockIcon && (0, _react.createElement)(_reactNative.View, {
style: _styles.default.cellDisabled
}, (0, _react.createElement)(_lockIcon.default, null))), help && (0, _react.createElement)(_reactNative.Text, {
style: [cellHelpStyle, _styles.default.placeholderColor]
}, help), !drawTopSeparator && (0, _react.createElement)(_reactNative.View, {
style: separatorStyle()
}));
}
}
var _default = (0, _compose.withPreferredColorScheme)(BottomSheetCell);
exports.default = _default;
//# sourceMappingURL=cell.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _primitives = require("@wordpress/primitives");
/**
* WordPress dependencies
*/
// Used for the back button of the iOS Bottom Sheet
const chevronBack = (0, _react.createElement)(_primitives.SVG, {
width: "12",
height: "21",
viewBox: "0 0 12 21",
xmlns: "http://www.w3.org/2000/SVG"
}, (0, _react.createElement)(_primitives.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"
}));
var _default = chevronBack;
exports.default = _default;
//# sourceMappingURL=chevron-back.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_primitives","require","chevronBack","_react","createElement","SVG","width","height","viewBox","xmlns","Path","d","_default","exports","default"],"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":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA,MAAMC,WAAW,GAChB,IAAAC,MAAA,CAAAC,aAAA,EAACJ,WAAA,CAAAK,GAAG;EACHC,KAAK,EAAC,IAAI;EACVC,MAAM,EAAC,IAAI;EACXC,OAAO,EAAC,WAAW;EACnBC,KAAK,EAAC;AAA4B,GAElC,IAAAN,MAAA,CAAAC,aAAA,EAACJ,WAAA,CAAAU,IAAI;EAACC,CAAC,EAAC;AAAmY,CAAE,CACzY,CACL;AAAC,IAAAC,QAAA,GAEaV,WAAW;AAAAW,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,44 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BottomSheetColorCell;
var _react = require("react");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _components = require("@wordpress/components");
var _cell = _interopRequireDefault(require("./cell"));
var _styles = _interopRequireDefault(require("./styles.scss"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BottomSheetColorCell(props) {
const {
color,
withColorIndicator = true,
disabled,
...cellProps
} = props;
return (0, _react.createElement)(_cell.default, {
...cellProps,
accessibilityRole: 'button',
accessibilityHint: /* translators: accessibility text (hint for moving to color settings) */
(0, _i18n.__)('Double tap to go to color settings'),
editable: false,
disabled: disabled,
value: withColorIndicator && !color && (0, _i18n.__)('Default')
}, withColorIndicator && color && (0, _react.createElement)(_components.ColorIndicator, {
color: color,
style: _styles.default.colorCircle
}), disabled ? null : (0, _react.createElement)(_icons.Icon, {
icon: _icons.chevronRight
}));
}
//# sourceMappingURL=color-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_i18n","require","_icons","_components","_cell","_interopRequireDefault","_styles","BottomSheetColorCell","props","color","withColorIndicator","disabled","cellProps","_react","createElement","default","accessibilityRole","accessibilityHint","__","editable","value","ColorIndicator","style","styles","colorCircle","Icon","icon","chevronRight"],"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":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAIA,IAAAG,KAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAD,sBAAA,CAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIe,SAASM,oBAAoBA,CAAEC,KAAK,EAAG;EACrD,MAAM;IAAEC,KAAK;IAAEC,kBAAkB,GAAG,IAAI;IAAEC,QAAQ;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAE1E,OACC,IAAAK,MAAA,CAAAC,aAAA,EAACV,KAAA,CAAAW,OAAI;IAAA,GACCH,SAAS;IACdI,iBAAiB,EAAG,QAAU;IAC9BC,iBAAiB,EAChB;IACA,IAAAC,QAAE,EAAE,oCAAqC,CACzC;IACDC,QAAQ,EAAG,KAAO;IAClBR,QAAQ,EAAGA,QAAU;IACrBS,KAAK,EAAGV,kBAAkB,IAAI,CAAED,KAAK,IAAI,IAAAS,QAAE,EAAE,SAAU;EAAG,GAExDR,kBAAkB,IAAID,KAAK,IAC5B,IAAAI,MAAA,CAAAC,aAAA,EAACX,WAAA,CAAAkB,cAAc;IAACZ,KAAK,EAAGA,KAAO;IAACa,KAAK,EAAGC,eAAM,CAACC;EAAa,CAAE,CAC9D,EACCb,QAAQ,GAAG,IAAI,GAAG,IAAAE,MAAA,CAAAC,aAAA,EAACZ,MAAA,CAAAuB,IAAI;IAACC,IAAI,EAAGC;EAAc,CAAO,CACjD,CAAC;AAET"}

View File

@@ -0,0 +1,33 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BottomSheetCyclePickerCell;
var _react = require("react");
var _cell = _interopRequireDefault(require("./cell"));
/**
* Internal dependencies
*/
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 (0, _react.createElement)(_cell.default, {
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","_interopRequireDefault","require","BottomSheetCyclePickerCell","props","value","options","onChangeValue","cellProps","nextOptionValue","selectedOptionIndex","length","findIndex","option","optionsContainsValue","_react","createElement","default","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":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGe,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,OACC,IAAAK,MAAA,CAAAC,aAAA,EAAChB,KAAA,CAAAiB,OAAI;IACJC,OAAO,EAAGA,CAAA,KACTJ,oBAAoB,IAAIP,aAAa,CAAEE,eAAe,CAAC,CAAE,CACzD;IACDU,QAAQ,EAAG,KAAO;IAClBd,KAAK,EACJS,oBAAoB,IAAIR,OAAO,CAAEI,mBAAmB,CAAE,CAACU,IACvD;IAAA,GACIZ;EAAS,CACd,CAAC;AAEJ"}

View File

@@ -0,0 +1,36 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _compose = require("@wordpress/compose");
var _cell = _interopRequireDefault(require("./cell"));
var _styles = _interopRequireDefault(require("./styles.scss"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function FooterMessageCell({
textAlign = 'left',
...props
}) {
return (0, _react.createElement)(_cell.default, {
...props,
editable: false,
value: '',
accessibilityRole: 'text',
labelStyle: [_styles.default.footerMessageCell, {
textAlign
}]
});
}
var _default = (0, _compose.withPreferredColorScheme)(FooterMessageCell);
exports.default = _default;
//# sourceMappingURL=footer-message-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_compose","require","_cell","_interopRequireDefault","_styles","FooterMessageCell","textAlign","props","_react","createElement","default","editable","value","accessibilityRole","labelStyle","styles","footerMessageCell","_default","withPreferredColorScheme","exports"],"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":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAD,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAEA;AACA;AACA;;AAIA,SAASI,iBAAiBA,CAAE;EAAEC,SAAS,GAAG,MAAM;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC9D,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACP,KAAA,CAAAQ,OAAI;IAAA,GACCH,KAAK;IACVI,QAAQ,EAAG,KAAO;IAClBC,KAAK,EAAG,EAAI;IACZC,iBAAiB,EAAG,MAAQ;IAC5BC,UAAU,EAAG,CAAEC,eAAM,CAACC,iBAAiB,EAAE;MAAEV;IAAU,CAAC;EAAI,CAC1D,CAAC;AAEJ;AAAC,IAAAW,QAAA,GAEc,IAAAC,iCAAwB,EAAEb,iBAAkB,CAAC;AAAAc,OAAA,CAAAT,OAAA,GAAAO,QAAA"}

View File

@@ -0,0 +1,36 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _compose = require("@wordpress/compose");
var _styles = _interopRequireDefault(require("./styles.scss"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function FooterMessageLink({
href,
value
}) {
const textStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.footerMessageLink, _styles.default.footerMessageLinkDark);
return (0, _react.createElement)(_reactNative.Text, {
style: textStyle,
onPress: () => _reactNative.Linking.openURL(href)
}, value);
}
var _default = FooterMessageLink;
exports.default = _default;
//# sourceMappingURL=footer-message-link.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_compose","_styles","_interopRequireDefault","FooterMessageLink","href","value","textStyle","usePreferredColorSchemeStyle","styles","footerMessageLink","footerMessageLinkDark","_react","createElement","Text","style","onPress","Linking","openURL","_default","exports","default"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AAIA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AAXA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAGA,SAASI,iBAAiBA,CAAE;EAAEC,IAAI;EAAEC;AAAM,CAAC,EAAG;EAC7C,MAAMC,SAAS,GAAG,IAAAC,qCAA4B,EAC7CC,eAAM,CAACC,iBAAiB,EACxBD,eAAM,CAACE,qBACR,CAAC;EACD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACd,YAAA,CAAAe,IAAI;IAACC,KAAK,EAAGR,SAAW;IAACS,OAAO,EAAGA,CAAA,KAAMC,oBAAO,CAACC,OAAO,CAAEb,IAAK;EAAG,GAChEC,KACG,CAAC;AAET;AAAC,IAAAa,QAAA,GAEcf,iBAAiB;AAAAgB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,550 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeModal = _interopRequireDefault(require("react-native-modal"));
var _reactNativeSafeArea = _interopRequireDefault(require("react-native-safe-area"));
var _reactNativeBridge = require("@wordpress/react-native-bridge");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _button = _interopRequireDefault(require("./button"));
var _cell = _interopRequireDefault(require("./cell"));
var _cyclePickerCell = _interopRequireDefault(require("./cycle-picker-cell"));
var _pickerCell = _interopRequireDefault(require("./picker-cell"));
var _switchCell = _interopRequireDefault(require("./switch-cell"));
var _rangeCell = _interopRequireDefault(require("./range-cell"));
var _colorCell = _interopRequireDefault(require("./color-cell"));
var _linkCell = _interopRequireDefault(require("./link-cell"));
var _linkSuggestionItemCell = _interopRequireDefault(require("./link-suggestion-item-cell"));
var _radioCell = _interopRequireDefault(require("./radio-cell"));
var _navigationScreen = _interopRequireDefault(require("./bottom-sheet-navigation/navigation-screen"));
var _navigationContainer = _interopRequireDefault(require("./bottom-sheet-navigation/navigation-container"));
var _keyboardAvoidingView = _interopRequireDefault(require("./keyboard-avoiding-view"));
var _subSheet = _interopRequireDefault(require("./sub-sheet"));
var _navBar = _interopRequireDefault(require("./nav-bar"));
var _bottomSheetContext = require("./bottom-sheet-context");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const DEFAULT_LAYOUT_ANIMATION = _reactNative.LayoutAnimation.Presets.easeInEaseOut;
class BottomSheet extends _element.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: _reactNative.LayoutAnimation.Types[easing] || 'keyboard'
};
const layoutAnimation = {
duration: animationConfig.duration,
update: animationConfig,
create: {
...animationConfig,
property: _reactNative.LayoutAnimation.Properties.opacity
},
delete: {
...animationConfig,
property: _reactNative.LayoutAnimation.Properties.opacity
}
};
this.lastLayoutAnimationFinished = false;
_reactNative.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 (_reactNative.Platform.OS === 'android' && this.lastLayoutAnimation && !this.lastLayoutAnimationFinished) {
return;
}
const layoutAnimation = useLastLayoutAnimation ? this.lastLayoutAnimation || DEFAULT_LAYOUT_ANIMATION : DEFAULT_LAYOUT_ANIMATION;
this.lastLayoutAnimationFinished = false;
_reactNative.LayoutAnimation.configureNext(layoutAnimation, () => {
this.lastLayoutAnimationFinished = true;
});
this.lastLayoutAnimation = layoutAnimation;
}
componentDidMount() {
_reactNativeSafeArea.default.getSafeAreaInsetsForRootView().then(this.onSafeAreaInsetsUpdate);
if (_reactNative.Platform.OS === 'android') {
this.androidModalClosedSubscription = (0, _reactNativeBridge.subscribeAndroidModalClosed)(() => {
this.props.onClose();
});
}
this.dimensionsChangeSubscription = _reactNative.Dimensions.addEventListener('change', this.onDimensionsChange);
// 'Will' keyboard events are not available on Android.
// Reference: https://reactnative.dev/docs/0.61/keyboard#addlistener.
this.keyboardShowListener = _reactNative.Keyboard.addListener(_reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', this.keyboardShow);
this.keyboardHideListener = _reactNative.Keyboard.addListener(_reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', this.keyboardHide);
this.safeAreaEventSubscription = _reactNativeSafeArea.default.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) {
(0, _reactNativeBridge.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
} = _reactNative.Dimensions.get('window');
const {
safeAreaBottomInset
} = this.state;
const statusBarHeight = _reactNative.Platform.OS === 'android' ? _reactNative.StatusBar.currentHeight : 0;
// `maxHeight` when modal is opened along with a keyboard.
const maxHeightWithOpenKeyboard = 0.95 * (_reactNative.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
(0, _reactNativeBridge.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.default.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 = _reactNative.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 (_reactNative.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.default.background, _styles.default.backgroundDark);
const bottomSheetHeaderTitleStyle = getStylesFromColorScheme(_styles.default.bottomSheetHeaderTitle, _styles.default.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.default.content, hideHeader && _styles.default.emptyHeader, contentStyle, isFullScreen && {
flexGrow: 1
}],
style: listStyle,
safeAreaBottomInset,
scrollEnabled,
automaticallyAdjustContentInsets: false
};
const WrapperView = hasNavigation ? _reactNative.View : _reactNative.ScrollView;
const getHeader = () => (0, _react.createElement)(_react.Fragment, null, header || (0, _react.createElement)(_reactNative.View, {
style: _styles.default.bottomSheetHeader
}, (0, _react.createElement)(_reactNative.View, {
style: _styles.default.flex
}, leftButton), (0, _react.createElement)(_reactNative.Text, {
style: bottomSheetHeaderTitleStyle,
maxFontSizeMultiplier: 3
}, title), (0, _react.createElement)(_reactNative.View, {
style: _styles.default.flex
}, rightButton)), withHeaderSeparator && (0, _react.createElement)(_reactNative.View, {
style: _styles.default.separator
}));
const showDragIndicator = () => {
// If iOS or not fullscreen show the drag indicator.
if (_reactNative.Platform.OS === 'ios' || !this.state.isFullScreen) {
return true;
}
// Otherwise check the allowDragIndicator.
return this.props.allowDragIndicator;
};
return (0, _react.createElement)(_reactNativeModal.default, {
isVisible: isVisible,
style: _styles.default.bottomModal,
animationInTiming: 400,
animationOutTiming: 300,
backdropTransitionInTiming: 50,
backdropTransitionOutTiming: 50,
backdropOpacity: 0.2,
onBackdropPress: this.onCloseBottomSheet,
onBackButtonPress: this.onHardwareButtonPress,
onSwipeComplete: this.onCloseBottomSheet,
onDismiss: _reactNative.Platform.OS === 'ios' ? this.onDismiss : undefined,
onModalHide: _reactNative.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
}, (0, _react.createElement)(_keyboardAvoidingView.default, {
behavior: _reactNative.Platform.OS === 'ios' && 'padding',
style: {
...backgroundStyle,
borderColor: 'rgba(0, 0, 0, 0.1)',
marginTop: _reactNative.Platform.OS === 'ios' && isFullScreen ? safeAreaTopInset : 0,
flex: isFullScreen ? 1 : undefined,
...(_reactNative.Platform.OS === 'android' && isFullScreen ? _styles.default.backgroundFullScreen : {}),
...style
},
keyboardVerticalOffset: -safeAreaBottomInset
}, (0, _react.createElement)(_reactNative.View, {
style: _styles.default.header,
onLayout: this.onHeaderLayout,
testID: `${rest.testID || 'bottom-sheet'}-header`
}, showDragIndicator() && (0, _react.createElement)(_reactNative.View, {
style: _styles.default.dragIndicator
}), !hideHeader && getHeader()), (0, _react.createElement)(WrapperView, {
...(hasNavigation ? {
style: listProps.style
} : listProps)
}, (0, _react.createElement)(_bottomSheetContext.BottomSheetProvider, {
value: {
shouldEnableBottomSheetScroll: this.onShouldEnableScroll,
shouldEnableBottomSheetMaxHeight: this.onShouldSetBottomSheetMaxHeight,
isBottomSheetContentScrolling: isScrolling,
onHandleClosingBottomSheet: this.onHandleClosingBottomSheet,
onHandleHardwareButtonPress: this.onHandleHardwareButtonPress,
listProps,
setIsFullScreen: this.setIsFullScreen,
safeAreaBottomInset,
maxHeight,
isMaxHeightSet
}
}, hasNavigation ? (0, _react.createElement)(_react.Fragment, null, children) : (0, _react.createElement)(_reactNative.TouchableHighlight, {
accessible: false
}, (0, _react.createElement)(_react.Fragment, null, children))), !hasNavigation && (0, _react.createElement)(_reactNative.View, {
style: {
height: safeAreaBottomInset || _styles.default.scrollableContent.paddingBottom
}
}))));
}
}
function getWidth() {
return Math.min(_reactNative.Dimensions.get('window').width, _styles.default.background.maxWidth);
}
const ThemedBottomSheet = (0, _compose.withPreferredColorScheme)(BottomSheet);
ThemedBottomSheet.getWidth = getWidth;
ThemedBottomSheet.Button = _button.default;
ThemedBottomSheet.Cell = _cell.default;
ThemedBottomSheet.SubSheet = _subSheet.default;
ThemedBottomSheet.NavBar = _navBar.default;
ThemedBottomSheet.CyclePickerCell = _cyclePickerCell.default;
ThemedBottomSheet.PickerCell = _pickerCell.default;
ThemedBottomSheet.SwitchCell = _switchCell.default;
ThemedBottomSheet.RangeCell = _rangeCell.default;
ThemedBottomSheet.ColorCell = _colorCell.default;
ThemedBottomSheet.LinkCell = _linkCell.default;
ThemedBottomSheet.LinkSuggestionItemCell = _linkSuggestionItemCell.default;
ThemedBottomSheet.RadioCell = _radioCell.default;
ThemedBottomSheet.NavigationScreen = _navigationScreen.default;
ThemedBottomSheet.NavigationContainer = _navigationContainer.default;
var _default = ThemedBottomSheet;
exports.default = _default;
//# sourceMappingURL=index.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,118 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* 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 _element.Component {
constructor() {
super(...arguments);
this._onKeyboardChange = this._onKeyboardChange.bind(this);
this._subscriptions = [];
this.state = {
bottom: 0
};
}
_relativeKeyboardHeight(keyboardFrame) {
if (!keyboardFrame) {
return 0;
}
const windowWidth = _reactNative.Dimensions.get('window').width;
const isFloatingKeyboard = keyboardFrame.width !== windowWidth;
if (isFloatingKeyboard) {
return 0;
}
const windowHeight = _reactNative.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) {
_reactNative.LayoutAnimation.configureNext({
duration,
update: {
duration,
type: _reactNative.LayoutAnimation.Types[easing] || 'keyboard'
}
});
}
this.setState({
bottom: height
});
}
componentDidMount() {
if (_reactNative.Platform.OS === 'ios') {
this._subscriptions = [_reactNative.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 (_reactNative.Platform.OS === 'ios') {
const bottomHeight = enabled ? this.state.bottom : 0;
finalStyle = _reactNative.StyleSheet.compose(style, {
paddingBottom: bottomHeight
});
}
return (0, _react.createElement)(_reactNative.View, {
style: finalStyle,
...props
}, children);
}
}
KeyboardAvoidingView.defaultProps = {
enabled: true,
keyboardVerticalOffset: 0
};
var _default = KeyboardAvoidingView;
exports.default = _default;
//# sourceMappingURL=keyboard-avoiding-view.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,42 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = LinkCell;
var _react = require("react");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _cell = _interopRequireDefault(require("./cell"));
var _styles = _interopRequireDefault(require("./styles.scss"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
placeholderColor
} = _styles.default;
function LinkCell({
value,
valueMask,
onPress,
showIcon = true
}) {
return (0, _react.createElement)(_cell.default, {
icon: showIcon && _icons.link,
label: (0, _i18n.__)('Link to')
// Since this is not actually editable, we treat value as a placeholder.
,
value: valueMask || value || (0, _i18n.__)('Search or type URL'),
valueStyle: !!(value || valueMask) ? undefined : placeholderColor,
onPress: onPress
}, (0, _react.createElement)(_icons.Icon, {
icon: _icons.chevronRight
}));
}
//# sourceMappingURL=link-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_i18n","require","_icons","_cell","_interopRequireDefault","_styles","placeholderColor","styles","LinkCell","value","valueMask","onPress","showIcon","_react","createElement","default","icon","link","label","__","valueStyle","undefined","Icon","chevronRight"],"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":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,OAAA,GAAAD,sBAAA,CAAAH,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,MAAM;EAAEK;AAAiB,CAAC,GAAGC,eAAM;AAEpB,SAASC,QAAQA,CAAE;EACjCC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,QAAQ,GAAG;AACZ,CAAC,EAAG;EACH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACX,KAAA,CAAAY,OAAI;IACJC,IAAI,EAAGJ,QAAQ,IAAIK,WAAM;IACzBC,KAAK,EAAG,IAAAC,QAAE,EAAE,SAAU;IACtB;IAAA;IACAV,KAAK,EAAGC,SAAS,IAAID,KAAK,IAAI,IAAAU,QAAE,EAAE,oBAAqB,CAAG;IAC1DC,UAAU,EACT,CAAC,EAAIX,KAAK,IAAIC,SAAS,CAAE,GAAGW,SAAS,GAAGf,gBACxC;IACDK,OAAO,EAAGA;EAAS,GAEnB,IAAAE,MAAA,CAAAC,aAAA,EAACZ,MAAA,CAAAoB,IAAI;IAACN,IAAI,EAAGO;EAAc,CAAO,CAC7B,CAAC;AAET"}

View File

@@ -0,0 +1,89 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _cell = _interopRequireDefault(require("./cell"));
var _styles = _interopRequireDefault(require("./styles.scss"));
var _linkSuggestionStyles = _interopRequireDefault(require("./link-suggestion-styles.scss"));
var _gridicons = require("../gridicons");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const icons = {
URL: _icons.globe,
clipboard: _gridicons.clipboard,
post: _gridicons.posts,
page: _gridicons.pages
};
const getSummaryForType = type => {
switch (type) {
case 'clipboard':
return (0, _i18n.__)('From clipboard');
case 'mailto':
return (0, _i18n.__)('Add this email link');
case 'tel':
return (0, _i18n.__)('Add this telephone link');
default:
return (0, _i18n.__)('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 = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.cellLabel, _styles.default.cellTextDark);
const cellSummaryStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.cellValue, _styles.default.cellTextDark);
const titleStyle = [cellTitleStyle, _linkSuggestionStyles.default.titleStyle];
const summaryStyle = [cellSummaryStyle, _linkSuggestionStyles.default.summaryStyle];
return (0, _react.createElement)(_cell.default, {
...props,
icon: icons[type] || _gridicons.empty,
onPress: pickLink,
separatorType: 'none',
cellContainerStyle: _linkSuggestionStyles.default.itemContainerStyle,
labelStyle: _linkSuggestionStyles.default.hidden,
valueStyle: _linkSuggestionStyles.default.hidden
}, (0, _react.createElement)(_reactNative.View, {
style: _linkSuggestionStyles.default.containerStyle
}, (0, _react.createElement)(_reactNative.Text, {
style: titleStyle,
numberOfLines: 1,
ellipsizeMode: 'middle'
}, title), (0, _react.createElement)(_reactNative.Text, {
style: summaryStyle,
numberOfLines: 1,
ellipsizeMode: 'middle'
}, summary)));
}
var _default = LinkSuggestionItemCell;
exports.default = _default;
//# sourceMappingURL=link-suggestion-item-cell.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,28 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = LockIcon;
var _react = require("react");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _styles = _interopRequireDefault(require("./styles.scss"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function LockIcon() {
const iconStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.icon, _styles.default['icon--dark']);
return (0, _react.createElement)(_icons.Icon, {
icon: _icons.lock,
color: iconStyle.color,
style: iconStyle
});
}
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_icons","require","_compose","_styles","_interopRequireDefault","LockIcon","iconStyle","usePreferredColorSchemeStyle","styles","icon","_react","createElement","Icon","lock","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":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASI,QAAQA,CAAA,EAAG;EAClC,MAAMC,SAAS,GAAG,IAAAC,qCAA4B,EAC7CC,eAAM,CAACC,IAAI,EACXD,eAAM,CAAE,YAAY,CACrB,CAAC;EAED,OAAO,IAAAE,MAAA,CAAAC,aAAA,EAACX,MAAA,CAAAY,IAAI;IAACH,IAAI,EAAGI,WAAM;IAACC,KAAK,EAAGR,SAAS,CAACQ,KAAO;IAACC,KAAK,EAAGT;EAAW,CAAE,CAAC;AAC5E"}

View File

@@ -0,0 +1,37 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _styles = _interopRequireDefault(require("./styles.scss"));
/**
* External dependencies
*/
/**
* Internal dependencies
*/
// Action button component is used by both Back and Apply Button componenets.
function ActionButton({
onPress,
accessibilityLabel,
accessibilityHint,
children
}) {
return (0, _react.createElement)(_reactNative.TouchableWithoutFeedback, {
onPress: onPress,
accessibilityRole: 'button',
accessibilityLabel: accessibilityLabel,
accessibilityHint: accessibilityHint
}, (0, _react.createElement)(_reactNative.View, {
style: _styles.default['action-button']
}, children));
}
var _default = ActionButton;
exports.default = _default;
//# sourceMappingURL=action-button.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_styles","_interopRequireDefault","ActionButton","onPress","accessibilityLabel","accessibilityHint","children","_react","createElement","TouchableWithoutFeedback","accessibilityRole","View","style","styles","_default","exports","default"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA,SAASG,YAAYA,CAAE;EACtBC,OAAO;EACPC,kBAAkB;EAClBC,iBAAiB;EACjBC;AACD,CAAC,EAAG;EACH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACV,YAAA,CAAAW,wBAAwB;IACxBN,OAAO,EAAGA,OAAS;IACnBO,iBAAiB,EAAG,QAAU;IAC9BN,kBAAkB,EAAGA,kBAAoB;IACzCC,iBAAiB,EAAGA;EAAmB,GAEvC,IAAAE,MAAA,CAAAC,aAAA,EAACV,YAAA,CAAAa,IAAI;IAACC,KAAK,EAAGC,eAAM,CAAE,eAAe;EAAI,GAAGP,QAAgB,CACnC,CAAC;AAE7B;AAAC,IAAAQ,QAAA,GAEcZ,YAAY;AAAAa,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,49 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _actionButton = _interopRequireDefault(require("./action-button"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ApplyButton({
onPress
}) {
const buttonTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['button-text'], _styles.default['button-text-dark']);
const applyButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['apply-button-icon'], _styles.default['apply-button-icon-dark']);
return (0, _react.createElement)(_reactNative.View, {
style: _styles.default['apply-button']
}, (0, _react.createElement)(_actionButton.default, {
onPress: onPress,
accessibilityLabel: (0, _i18n.__)('Apply'),
accessibilityHint: (0, _i18n.__)('Applies the setting')
}, _reactNative.Platform.OS === 'ios' ? (0, _react.createElement)(_reactNative.Text, {
style: buttonTextStyle,
maxFontSizeMultiplier: 2
}, (0, _i18n.__)('Apply')) : (0, _react.createElement)(_icons.Icon, {
icon: _icons.check,
size: 24,
style: applyButtonStyle
})));
}
var _default = ApplyButton;
exports.default = _default;
//# sourceMappingURL=apply-button.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_i18n","_icons","_compose","_styles","_interopRequireDefault","_actionButton","ApplyButton","onPress","buttonTextStyle","usePreferredColorSchemeStyle","styles","applyButtonStyle","_react","createElement","View","style","default","accessibilityLabel","__","accessibilityHint","Platform","OS","Text","maxFontSizeMultiplier","Icon","icon","check","size","_default","exports"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,OAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,aAAA,GAAAD,sBAAA,CAAAL,OAAA;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAIA,SAASO,WAAWA,CAAE;EAAEC;AAAQ,CAAC,EAAG;EACnC,MAAMC,eAAe,GAAG,IAAAC,qCAA4B,EACnDC,eAAM,CAAE,aAAa,CAAE,EACvBA,eAAM,CAAE,kBAAkB,CAC3B,CAAC;EAED,MAAMC,gBAAgB,GAAG,IAAAF,qCAA4B,EACpDC,eAAM,CAAE,mBAAmB,CAAE,EAC7BA,eAAM,CAAE,wBAAwB,CACjC,CAAC;EAED,OACC,IAAAE,MAAA,CAAAC,aAAA,EAACf,YAAA,CAAAgB,IAAI;IAACC,KAAK,EAAGL,eAAM,CAAE,cAAc;EAAI,GACvC,IAAAE,MAAA,CAAAC,aAAA,EAACR,aAAA,CAAAW,OAAY;IACZT,OAAO,EAAGA,OAAS;IACnBU,kBAAkB,EAAG,IAAAC,QAAE,EAAE,OAAQ,CAAG;IACpCC,iBAAiB,EAAG,IAAAD,QAAE,EAAE,qBAAsB;EAAG,GAE/CE,qBAAQ,CAACC,EAAE,KAAK,KAAK,GACtB,IAAAT,MAAA,CAAAC,aAAA,EAACf,YAAA,CAAAwB,IAAI;IAACP,KAAK,EAAGP,eAAiB;IAACe,qBAAqB,EAAG;EAAG,GACxD,IAAAL,QAAE,EAAE,OAAQ,CACT,CAAC,GAEP,IAAAN,MAAA,CAAAC,aAAA,EAACZ,MAAA,CAAAuB,IAAI;IACJC,IAAI,EAAGC,YAAO;IACdC,IAAI,EAAG,EAAI;IACXZ,KAAK,EAAGJ;EAAkB,CAC1B,CAEW,CACT,CAAC;AAET;AAAC,IAAAiB,QAAA,GAEctB,WAAW;AAAAuB,OAAA,CAAAb,OAAA,GAAAY,QAAA"}

View File

@@ -0,0 +1,98 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _actionButton = _interopRequireDefault(require("./action-button"));
var _chevronBack = _interopRequireDefault(require("./../chevron-back"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function Button({
onPress,
icon,
text
}) {
const buttonTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['button-text'], _styles.default['button-text-dark']);
return (0, _react.createElement)(_reactNative.View, {
style: _styles.default['back-button']
}, (0, _react.createElement)(_actionButton.default, {
onPress: onPress,
accessibilityLabel: (0, _i18n.__)('Go back'),
accessibilityHint: (0, _i18n.__)('Navigates to the previous content sheet')
}, icon, text && (0, _react.createElement)(_reactNative.Text, {
style: buttonTextStyle,
maxFontSizeMultiplier: 2
}, text)));
}
function BackButton({
onPress
}) {
const chevronLeftStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['chevron-left-icon'], _styles.default['chevron-left-icon-dark']);
const arrowLeftStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['arrow-left-icon'], _styles.default['arrow-left-icon-dark']);
let backIcon;
let backText;
if (_reactNative.Platform.OS === 'ios') {
backIcon = (0, _react.createElement)(_icons.Icon, {
icon: _chevronBack.default,
size: 21,
style: chevronLeftStyle
});
backText = (0, _i18n.__)('Back');
} else {
backIcon = (0, _react.createElement)(_icons.Icon, {
icon: _icons.arrowLeft,
size: 24,
style: arrowLeftStyle
});
}
return (0, _react.createElement)(Button, {
onPress: onPress,
icon: backIcon,
text: backText
});
}
function DismissButton({
onPress,
iosText
}) {
const arrowLeftStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['arrow-left-icon'], _styles.default['arrow-left-icon-dark']);
let backIcon;
let backText;
if (_reactNative.Platform.OS === 'ios') {
backText = iosText ? iosText : (0, _i18n.__)('Cancel');
} else {
backIcon = (0, _react.createElement)(_icons.Icon, {
icon: _icons.close,
size: 24,
style: arrowLeftStyle
});
}
return (0, _react.createElement)(Button, {
onPress: onPress,
icon: backIcon,
text: backText
});
}
Button.Back = BackButton;
Button.Dismiss = DismissButton; // Cancel or Close Button.
var _default = Button;
exports.default = _default;
//# sourceMappingURL=back-button.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,36 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _compose = require("@wordpress/compose");
var _styles = _interopRequireDefault(require("./styles.scss"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function Heading({
children
}) {
const headingStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.heading, _styles.default['heading-dark']);
return (0, _react.createElement)(_reactNative.Text, {
accessibilityRole: "header",
style: headingStyle,
maxFontSizeMultiplier: 3
}, children);
}
var _default = Heading;
exports.default = _default;
//# sourceMappingURL=heading.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_compose","_styles","_interopRequireDefault","Heading","children","headingStyle","usePreferredColorSchemeStyle","styles","heading","_react","createElement","Text","accessibilityRole","style","maxFontSizeMultiplier","_default","exports","default"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,SAASI,OAAOA,CAAE;EAAEC;AAAS,CAAC,EAAG;EAChC,MAAMC,YAAY,GAAG,IAAAC,qCAA4B,EAChDC,eAAM,CAACC,OAAO,EACdD,eAAM,CAAE,cAAc,CACvB,CAAC;EAED,OACC,IAAAE,MAAA,CAAAC,aAAA,EAACZ,YAAA,CAAAa,IAAI;IACJC,iBAAiB,EAAC,QAAQ;IAC1BC,KAAK,EAAGR,YAAc;IACtBS,qBAAqB,EAAG;EAAG,GAEzBV,QACG,CAAC;AAET;AAAC,IAAAW,QAAA,GAEcZ,OAAO;AAAAa,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,35 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _applyButton = _interopRequireDefault(require("./apply-button"));
var _backButton = _interopRequireDefault(require("./back-button"));
var _heading = _interopRequireDefault(require("./heading"));
var _styles = _interopRequireDefault(require("./styles.scss"));
/**
* External dependencies
*/
/**
* Internal dependencies
*/
function NavBar({
children
}) {
return (0, _react.createElement)(_reactNative.View, {
style: _styles.default['nav-bar']
}, children);
}
NavBar.ApplyButton = _applyButton.default;
NavBar.BackButton = _backButton.default.Back;
NavBar.DismissButton = _backButton.default.Dismiss;
NavBar.Heading = _heading.default;
var _default = NavBar;
exports.default = _default;
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_applyButton","_interopRequireDefault","_backButton","_heading","_styles","NavBar","children","_react","createElement","View","style","styles","ApplyButton","BackButton","Button","Back","DismissButton","Dismiss","Heading","_default","exports","default"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,QAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,OAAA,GAAAH,sBAAA,CAAAF,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,SAASM,MAAMA,CAAE;EAAEC;AAAS,CAAC,EAAG;EAC/B,OAAO,IAAAC,MAAA,CAAAC,aAAA,EAACV,YAAA,CAAAW,IAAI;IAACC,KAAK,EAAGC,eAAM,CAAE,SAAS;EAAI,GAAGL,QAAgB,CAAC;AAC/D;AAEAD,MAAM,CAACO,WAAW,GAAGA,oBAAW;AAChCP,MAAM,CAACQ,UAAU,GAAGC,mBAAM,CAACC,IAAI;AAC/BV,MAAM,CAACW,aAAa,GAAGF,mBAAM,CAACG,OAAO;AAErCZ,MAAM,CAACa,OAAO,GAAGA,gBAAO;AAAC,IAAAC,QAAA,GAEVd,MAAM;AAAAe,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,45 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BottomSheetPickerCell;
var _react = require("react");
var _cell = _interopRequireDefault(require("./cell"));
var _picker = _interopRequireDefault(require("../picker"));
/**
* Internal dependencies
*/
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 (0, _react.createElement)(_cell.default, {
onPress: onCellPress,
editable: false,
value: label,
...cellProps
}, (0, _react.createElement)(_picker.default, {
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","_interopRequireDefault","require","_picker","BottomSheetPickerCell","props","options","hideCancelButton","onChangeValue","value","cellProps","picker","onCellPress","presentPicker","onChange","newValue","option","find","opt","label","_react","createElement","default","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":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AAJA;AACA;AACA;;AAIe,SAASE,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,OACC,IAAAW,MAAA,CAAAC,aAAA,EAACrB,KAAA,CAAAsB,OAAI;IACJC,OAAO,EAAGX,WAAa;IACvBY,QAAQ,EAAG,KAAO;IAClBf,KAAK,EAAGU,KAAO;IAAA,GACVT;EAAS,GAEd,IAAAU,MAAA,CAAAC,aAAA,EAAClB,OAAA,CAAAmB,OAAM;IACNG,SAAS;IACTlB,gBAAgB,EAAGA,gBAAkB;IACrCmB,GAAG,EAAKC,QAAQ,IAAQhB,MAAM,GAAGgB,QAAY;IAC7CrB,OAAO,EAAGA,OAAS;IACnBQ,QAAQ,EAAGA;EAAU,CACrB,CACI,CAAC;AAET"}

View File

@@ -0,0 +1,44 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BottomSheetRadioCell;
var _react = require("react");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _cell = _interopRequireDefault(require("./cell"));
var _styles = _interopRequireDefault(require("./styles.scss"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BottomSheetRadioCell(props) {
const {
selected,
...cellProps
} = props;
const selectedIconStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.selectedIcon, _styles.default.selectedIconDark);
return (0, _react.createElement)(_cell.default, {
...cellProps,
accessibilityRole: 'radio',
accessibilityState: {
selected
},
accessibilityHint: /* translators: accessibility text (hint for selecting option) */
(0, _i18n.__)('Double tap to select the option'),
editable: false,
value: '',
showLockIcon: selected
}, selected && (0, _react.createElement)(_icons.Icon, {
icon: _icons.check,
style: selectedIconStyle
}));
}
//# sourceMappingURL=radio-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_i18n","require","_icons","_compose","_cell","_interopRequireDefault","_styles","BottomSheetRadioCell","props","selected","cellProps","selectedIconStyle","usePreferredColorSchemeStyle","styles","selectedIcon","selectedIconDark","_react","createElement","default","accessibilityRole","accessibilityState","accessibilityHint","__","editable","value","showLockIcon","Icon","icon","check","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":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAIA,IAAAG,KAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAD,sBAAA,CAAAJ,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIe,SAASM,oBAAoBA,CAAEC,KAAK,EAAG;EACrD,MAAM;IAAEC,QAAQ;IAAE,GAAGC;EAAU,CAAC,GAAGF,KAAK;EAExC,MAAMG,iBAAiB,GAAG,IAAAC,qCAA4B,EACrDC,eAAM,CAACC,YAAY,EACnBD,eAAM,CAACE,gBACR,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACb,KAAA,CAAAc,OAAI;IAAA,GACCR,SAAS;IACdS,iBAAiB,EAAG,OAAS;IAC7BC,kBAAkB,EAAG;MAAEX;IAAS,CAAG;IACnCY,iBAAiB,EAChB;IACA,IAAAC,QAAE,EAAE,iCAAkC,CACtC;IACDC,QAAQ,EAAG,KAAO;IAClBC,KAAK,EAAG,EAAI;IACZC,YAAY,EAAGhB;EAAU,GAEvBA,QAAQ,IACT,IAAAO,MAAA,CAAAC,aAAA,EAACf,MAAA,CAAAwB,IAAI;IAACC,IAAI,EAAGC,YAAO;IAACC,KAAK,EAAGlB;EAAmB,CAAO,CAEnD,CAAC;AAET"}

View File

@@ -0,0 +1,267 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _slider = _interopRequireDefault(require("@react-native-community/slider"));
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _cell = _interopRequireDefault(require("./cell"));
var _lockIcon = _interopRequireDefault(require("./lock-icon"));
var _rangeCell = _interopRequireDefault(require("./range-cell.scss"));
var _rangeTextInput = _interopRequireDefault(require("./range-text-input"));
var _utils = require("../utils");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const isIOS = _reactNative.Platform.OS === 'ios';
class BottomSheetRangeCell extends _element.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 = (0, _utils.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 = (0, _utils.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 = (0, _utils.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 = (0, _utils.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(() => {
_reactNative.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 ? (0, _i18n.__)('double-tap to change unit') : '';
};
const getAccessibilityLabel = () => {
return (0, _i18n.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) */
(0, _i18n.__)('%1$s. %2$s is %3$s %4$s.'), cellProps.label, settingLabel, (0, _utils.toFixed)(value, decimalNum), unitLabel);
};
const containerStyle = [_rangeCell.default.container, isIOS ? _rangeCell.default.containerIOS : _rangeCell.default.containerAndroid];
return (0, _react.createElement)(_reactNative.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()
}, (0, _react.createElement)(_reactNative.View, {
importantForAccessibility: "no-hide-descendants"
}, (0, _react.createElement)(_cell.default, {
...cellProps,
cellContainerStyle: [_rangeCell.default.cellContainerStyles, cellContainerStyle],
cellRowContainerStyle: containerStyle,
leftAlign: true,
editable: false,
activeOpacity: 1,
accessible: false,
valueStyle: _rangeCell.default.valueStyle,
disabled: disabled,
showLockIcon: false
}, (0, _react.createElement)(_reactNative.View, {
style: containerStyle
}, preview, (0, _react.createElement)(_slider.default, {
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 ? _rangeCell.default.sliderIOS : _rangeCell.default.sliderAndroid
}), shouldDisplayTextInput && (0, _react.createElement)(_rangeTextInput.default, {
label: cellProps.label,
onChange: this.onTextInputChange,
defaultValue: `${inputValue}`,
value: inputValue,
min: minimumValue,
max: maximumValue,
step: step,
decimalNum: decimalNum
}, children), disabled && (0, _react.createElement)(_lockIcon.default, null)))));
}
}
var _default = (0, _compose.withPreferredColorScheme)(BottomSheetRangeCell);
exports.default = _default;
//# sourceMappingURL=range-cell.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,224 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _utils = require("../utils");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _borderStyles = _interopRequireDefault(require("./borderStyles.scss"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const isIOS = _reactNative.Platform.OS === 'ios';
class RangeTextInput extends _element.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 = (0, _utils.toFixed)(value || defaultValue || min, decimalNum);
const fontScale = this.getFontScale();
this.state = {
fontScale,
inputValue: initialValue,
controlValue: initialValue,
hasFocus: false
};
}
componentDidMount() {
this.appStateChangeSubscription = _reactNative.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 _reactNative.PixelRatio.getFontScale() < 1 ? 1 : _reactNative.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((0, _utils.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 = (0, _utils.removeNonDigit)(textValue, decimalNum);
textValue = inputValue.replace(',', '.');
textValue = (0, _utils.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 = (0, _utils.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 = (0, _i18n.sprintf)((0, _i18n.__)('Current value is %s'), value);
_reactNative.AccessibilityInfo.announceForAccessibility(announcement);
}
render() {
const {
getStylesFromColorScheme,
children,
label
} = this.props;
const {
fontScale,
inputValue,
hasFocus
} = this.state;
const textInputStyle = getStylesFromColorScheme(_styles.default.textInput, _styles.default.textInputDark);
const textInputIOSStyle = getStylesFromColorScheme(_styles.default.textInputIOS, _styles.default.textInputIOSDark);
const inputBorderStyles = [textInputStyle, _borderStyles.default.borderStyle, hasFocus && _borderStyles.default.isSelected];
const valueFinalStyle = [_reactNative.Platform.select({
android: inputBorderStyles,
ios: textInputIOSStyle
}), {
width: 50 * fontScale,
borderRightWidth: children ? 1 : 0
}];
return (0, _react.createElement)(_reactNative.TouchableWithoutFeedback, {
onPress: this.onInputFocus,
accessible: false
}, (0, _react.createElement)(_reactNative.View, {
style: [_styles.default.textInputContainer, isIOS && inputBorderStyles],
accessible: false
}, isIOS || hasFocus ? (0, _react.createElement)(_reactNative.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'
}) : (0, _react.createElement)(_reactNative.Text, {
style: valueFinalStyle,
numberOfLines: 1,
ellipsizeMode: "clip"
}, inputValue), children));
}
}
var _default = (0, _compose.withPreferredColorScheme)(RangeTextInput);
exports.default = _default;
//# sourceMappingURL=range-text-input.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,63 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _compose = require("@wordpress/compose");
var _rippleNative = _interopRequireDefault(require("./ripple.native.scss"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ANDROID_VERSION_LOLLIPOP = 21;
const ANDROID_VERSION_PIE = 28;
const TouchableRipple = ({
style,
onPress,
disabled: disabledProp,
children,
activeOpacity,
getStylesFromColorScheme,
borderless = false,
...touchableProps
}) => {
const isTouchableNativeSupported = _reactNative.Platform.OS === 'android' && _reactNative.Platform.Version >= ANDROID_VERSION_LOLLIPOP;
const disabled = disabledProp || !onPress;
const rippleColor = getStylesFromColorScheme(_rippleNative.default.ripple, _rippleNative.default.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 = _reactNative.Platform.OS === 'android' && _reactNative.Platform.Version >= ANDROID_VERSION_PIE && borderless;
return (0, _react.createElement)(_reactNative.TouchableNativeFeedback, {
...touchableProps,
onPress: onPress,
disabled: disabled,
useForeground: useForeground,
background: _reactNative.TouchableNativeFeedback.Ripple(rippleColor, borderless)
}, (0, _react.createElement)(_reactNative.View, {
style: [borderless && _rippleNative.default.overflow, style]
}, children));
}
return (0, _react.createElement)(_reactNative.TouchableOpacity, {
...touchableProps,
onPress: onPress,
disabled: disabled,
activeOpacity: activeOpacity,
style: style
}, children);
};
var _default = (0, _compose.withPreferredColorScheme)(TouchableRipple);
exports.default = _default;
//# sourceMappingURL=ripple.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_compose","_rippleNative","_interopRequireDefault","ANDROID_VERSION_LOLLIPOP","ANDROID_VERSION_PIE","TouchableRipple","style","onPress","disabled","disabledProp","children","activeOpacity","getStylesFromColorScheme","borderless","touchableProps","isTouchableNativeSupported","Platform","OS","Version","rippleColor","rippleStyles","ripple","rippleDark","backgroundColor","useForeground","_react","createElement","TouchableNativeFeedback","background","Ripple","View","overflow","TouchableOpacity","_default","withPreferredColorScheme","exports","default"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAUA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,aAAA,GAAAC,sBAAA,CAAAH,OAAA;AAlBA;AACA;AACA;;AAQA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAMI,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/BC,qBAAQ,CAACC,EAAE,KAAK,SAAS,IACzBD,qBAAQ,CAACE,OAAO,IAAIf,wBAAwB;EAE7C,MAAMK,QAAQ,GAAGC,YAAY,IAAI,CAAEF,OAAO;EAC1C,MAAMY,WAAW,GAAGP,wBAAwB,CAC3CQ,qBAAY,CAACC,MAAM,EACnBD,qBAAY,CAACE,UACd,CAAC,CAACC,eAAe;EAEjB,IAAKR,0BAA0B,EAAG;IACjC;IACA;IACA,MAAMS,aAAa,GAClBR,qBAAQ,CAACC,EAAE,KAAK,SAAS,IACzBD,qBAAQ,CAACE,OAAO,IAAId,mBAAmB,IACvCS,UAAU;IAEX,OACC,IAAAY,MAAA,CAAAC,aAAA,EAAC5B,YAAA,CAAA6B,uBAAuB;MAAA,GAClBb,cAAc;MACnBP,OAAO,EAAGA,OAAS;MACnBC,QAAQ,EAAGA,QAAU;MACrBgB,aAAa,EAAGA,aAAe;MAC/BI,UAAU,EAAGD,oCAAuB,CAACE,MAAM,CAC1CV,WAAW,EACXN,UACD;IAAG,GAEH,IAAAY,MAAA,CAAAC,aAAA,EAAC5B,YAAA,CAAAgC,IAAI;MAACxB,KAAK,EAAG,CAAEO,UAAU,IAAIO,qBAAY,CAACW,QAAQ,EAAEzB,KAAK;IAAI,GAC3DI,QACG,CACkB,CAAC;EAE5B;EAEA,OACC,IAAAe,MAAA,CAAAC,aAAA,EAAC5B,YAAA,CAAAkC,gBAAgB;IAAA,GACXlB,cAAc;IACnBP,OAAO,EAAGA,OAAS;IACnBC,QAAQ,EAAGA,QAAU;IACrBG,aAAa,EAAGA,aAAe;IAC/BL,KAAK,EAAGA;EAAO,GAEbI,QACe,CAAC;AAErB,CAAC;AAAC,IAAAuB,QAAA,GAEa,IAAAC,iCAAwB,EAAE7B,eAAgB,CAAC;AAAA8B,OAAA,CAAAC,OAAA,GAAAH,QAAA"}

View File

@@ -0,0 +1,231 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _cell = _interopRequireDefault(require("../cell"));
var _stepper = _interopRequireDefault(require("./stepper"));
var _style = _interopRequireDefault(require("./style.scss"));
var _rangeTextInput = _interopRequireDefault(require("../range-text-input"));
var _utils = require("../../utils");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const STEP_DELAY = 200;
const DEFAULT_STEP = 1;
const isIOS = _reactNative.Platform.OS === 'ios';
class BottomSheetStepperCell extends _element.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 = (0, _utils.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 = (0, _utils.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(() => {
_reactNative.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 = [_style.default.cellLabel, !icon ? _style.default.cellLabelNoIcon : {}];
const getAccessibilityHint = () => {
return openUnitPicker ? (0, _i18n.__)('double-tap to change unit') : '';
};
const accessibilityLabel = (0, _i18n.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) */
(0, _i18n.__)('%1$s. %2$s is %3$s %4$s.'), label, settingLabel, value, unitLabel);
const containerStyle = [_style.default.rowContainer, isIOS ? _style.default.containerIOS : _style.default.containerAndroid];
return (0, _react.createElement)(_reactNative.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;
}
}
}, (0, _react.createElement)(_reactNative.View, {
importantForAccessibility: "no-hide-descendants"
}, (0, _react.createElement)(_cell.default, {
accessible: false,
cellContainerStyle: [_style.default.cellContainerStyle, preview && _style.default.columnContainer, cellContainerStyle],
cellRowContainerStyle: preview ? containerStyle : _style.default.cellRowStyles,
editable: false,
icon: icon,
label: label,
labelStyle: labelStyle,
leftAlign: true,
separatorType: separatorType,
disabled: disabled
}, (0, _react.createElement)(_reactNative.View, {
style: preview && containerStyle
}, preview, (0, _react.createElement)(_stepper.default, {
isMaxValue: isMaxValue,
isMinValue: isMinValue,
onPressInDecrement: this.onDecrementValuePressIn,
onPressInIncrement: this.onIncrementValuePressIn,
onPressOut: this.onPressOut,
value: value,
shouldDisplayTextInput: shouldDisplayTextInput
}, shouldDisplayTextInput && (0, _react.createElement)(_rangeTextInput.default, {
label: label,
onChange: onChange,
defaultValue: `${inputValue}`,
value: value,
min: min,
step: 1,
decimalNum: decimalNum
}, children))))));
}
}
BottomSheetStepperCell.defaultProps = {
step: DEFAULT_STEP
};
var _default = (0, _compose.withPreferredColorScheme)(BottomSheetStepperCell);
exports.default = _default;
//# sourceMappingURL=index.native.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,69 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _icons = require("@wordpress/icons");
var _compose = require("@wordpress/compose");
var _style = _interopRequireDefault(require("./style.scss"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function Stepper({
getStylesFromColorScheme,
isMaxValue,
isMinValue,
onPressInDecrement,
onPressInIncrement,
onPressOut,
value,
shouldDisplayTextInput,
children
}) {
const valueStyle = getStylesFromColorScheme(_style.default.value, _style.default.valueTextDark);
const buttonIconStyle = getStylesFromColorScheme(_style.default.buttonNoBg, _style.default.buttonNoBgTextDark);
return (0, _react.createElement)(_reactNative.View, {
style: _style.default.container
}, (0, _react.createElement)(_reactNative.TouchableOpacity, {
disabled: isMinValue,
onPressIn: onPressInDecrement,
onPressOut: onPressOut,
style: [_style.default.buttonNoBg, isMinValue ? {
opacity: 0.4
} : null]
}, (0, _react.createElement)(_icons.Icon, {
icon: _icons.chevronDown,
size: 24,
color: buttonIconStyle.color
})), !shouldDisplayTextInput && (0, _react.createElement)(_reactNative.Text, {
style: [valueStyle, _style.default.spacings]
}, value), children, (0, _react.createElement)(_reactNative.TouchableOpacity, {
testID: 'Increment',
disabled: isMaxValue,
onPressIn: onPressInIncrement,
onPressOut: onPressOut,
style: [_style.default.buttonNoBg, isMaxValue ? {
opacity: 0.4
} : null]
}, (0, _react.createElement)(_icons.Icon, {
icon: _icons.chevronUp,
size: 24,
color: buttonIconStyle.color
})));
}
var _default = (0, _compose.withPreferredColorScheme)(Stepper);
exports.default = _default;
//# sourceMappingURL=stepper.android.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_icons","_compose","_style","_interopRequireDefault","Stepper","getStylesFromColorScheme","isMaxValue","isMinValue","onPressInDecrement","onPressInIncrement","onPressOut","value","shouldDisplayTextInput","children","valueStyle","styles","valueTextDark","buttonIconStyle","buttonNoBg","buttonNoBgTextDark","_react","createElement","View","style","container","TouchableOpacity","disabled","onPressIn","opacity","Icon","icon","chevronDown","size","color","Text","spacings","testID","chevronUp","_default","withPreferredColorScheme","exports","default"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAGA,SAASK,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,CAC1CU,cAAM,CAACJ,KAAK,EACZI,cAAM,CAACC,aACR,CAAC;EACD,MAAMC,eAAe,GAAGZ,wBAAwB,CAC/CU,cAAM,CAACG,UAAU,EACjBH,cAAM,CAACI,kBACR,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACvB,YAAA,CAAAwB,IAAI;IAACC,KAAK,EAAGR,cAAM,CAACS;EAAW,GAC/B,IAAAJ,MAAA,CAAAC,aAAA,EAACvB,YAAA,CAAA2B,gBAAgB;IAChBC,QAAQ,EAAGnB,UAAY;IACvBoB,SAAS,EAAGnB,kBAAoB;IAChCE,UAAU,EAAGA,UAAY;IACzBa,KAAK,EAAG,CACPR,cAAM,CAACG,UAAU,EACjBX,UAAU,GAAG;MAAEqB,OAAO,EAAE;IAAI,CAAC,GAAG,IAAI;EAClC,GAEH,IAAAR,MAAA,CAAAC,aAAA,EAACrB,MAAA,CAAA6B,IAAI;IACJC,IAAI,EAAGC,kBAAa;IACpBC,IAAI,EAAG,EAAI;IACXC,KAAK,EAAGhB,eAAe,CAACgB;EAAO,CAC/B,CACgB,CAAC,EACjB,CAAErB,sBAAsB,IACzB,IAAAQ,MAAA,CAAAC,aAAA,EAACvB,YAAA,CAAAoC,IAAI;IAACX,KAAK,EAAG,CAAET,UAAU,EAAEC,cAAM,CAACoB,QAAQ;EAAI,GAAGxB,KAAa,CAC/D,EACCE,QAAQ,EACV,IAAAO,MAAA,CAAAC,aAAA,EAACvB,YAAA,CAAA2B,gBAAgB;IAChBW,MAAM,EAAG,WAAa;IACtBV,QAAQ,EAAGpB,UAAY;IACvBqB,SAAS,EAAGlB,kBAAoB;IAChCC,UAAU,EAAGA,UAAY;IACzBa,KAAK,EAAG,CACPR,cAAM,CAACG,UAAU,EACjBZ,UAAU,GAAG;MAAEsB,OAAO,EAAE;IAAI,CAAC,GAAG,IAAI;EAClC,GAEH,IAAAR,MAAA,CAAAC,aAAA,EAACrB,MAAA,CAAA6B,IAAI;IACJC,IAAI,EAAGO,gBAAW;IAClBL,IAAI,EAAG,EAAI;IACXC,KAAK,EAAGhB,eAAe,CAACgB;EAAO,CAC/B,CACgB,CACb,CAAC;AAET;AAAC,IAAAK,QAAA,GAEc,IAAAC,iCAAwB,EAAEnC,OAAQ,CAAC;AAAAoC,OAAA,CAAAC,OAAA,GAAAH,QAAA"}

View File

@@ -0,0 +1,69 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _compose = require("@wordpress/compose");
var _icons = require("@wordpress/icons");
var _style = _interopRequireDefault(require("./style.scss"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function Stepper({
getStylesFromColorScheme,
isMaxValue,
isMinValue,
onPressInDecrement,
onPressInIncrement,
onPressOut,
value,
children,
shouldDisplayTextInput
}) {
const valueStyle = getStylesFromColorScheme(_style.default.value, _style.default.valueTextDark);
const buttonStyle = getStylesFromColorScheme(_style.default.button, _style.default.buttonDark);
return (0, _react.createElement)(_reactNative.View, {
style: _style.default.container
}, !shouldDisplayTextInput && (0, _react.createElement)(_reactNative.Text, {
style: valueStyle
}, value), children, (0, _react.createElement)(_reactNative.TouchableOpacity, {
disabled: isMinValue,
onPressIn: onPressInDecrement,
onPressOut: onPressOut,
style: [buttonStyle, isMinValue ? {
opacity: 0.4
} : null]
}, (0, _react.createElement)(_icons.Icon, {
icon: _icons.reset,
size: 24,
color: buttonStyle.color
})), (0, _react.createElement)(_reactNative.TouchableOpacity, {
testID: 'Increment',
disabled: isMaxValue,
onPressIn: onPressInIncrement,
onPressOut: onPressOut,
style: [buttonStyle, isMaxValue ? {
opacity: 0.4
} : null]
}, (0, _react.createElement)(_icons.Icon, {
icon: _icons.plus,
size: 24,
color: buttonStyle.color
})));
}
var _default = (0, _compose.withPreferredColorScheme)(Stepper);
exports.default = _default;
//# sourceMappingURL=stepper.ios.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_compose","_icons","_style","_interopRequireDefault","Stepper","getStylesFromColorScheme","isMaxValue","isMinValue","onPressInDecrement","onPressInIncrement","onPressOut","value","children","shouldDisplayTextInput","valueStyle","styles","valueTextDark","buttonStyle","button","buttonDark","_react","createElement","View","style","container","Text","TouchableOpacity","disabled","onPressIn","opacity","Icon","icon","reset","size","color","testID","plus","_default","withPreferredColorScheme","exports","default"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAKA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAGA,SAASK,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,CAC1CU,cAAM,CAACJ,KAAK,EACZI,cAAM,CAACC,aACR,CAAC;EACD,MAAMC,WAAW,GAAGZ,wBAAwB,CAC3CU,cAAM,CAACG,MAAM,EACbH,cAAM,CAACI,UACR,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACvB,YAAA,CAAAwB,IAAI;IAACC,KAAK,EAAGR,cAAM,CAACS;EAAW,GAC7B,CAAEX,sBAAsB,IACzB,IAAAO,MAAA,CAAAC,aAAA,EAACvB,YAAA,CAAA2B,IAAI;IAACF,KAAK,EAAGT;EAAY,GAAGH,KAAa,CAC1C,EACCC,QAAQ,EACV,IAAAQ,MAAA,CAAAC,aAAA,EAACvB,YAAA,CAAA4B,gBAAgB;IAChBC,QAAQ,EAAGpB,UAAY;IACvBqB,SAAS,EAAGpB,kBAAoB;IAChCE,UAAU,EAAGA,UAAY;IACzBa,KAAK,EAAG,CAAEN,WAAW,EAAEV,UAAU,GAAG;MAAEsB,OAAO,EAAE;IAAI,CAAC,GAAG,IAAI;EAAI,GAE/D,IAAAT,MAAA,CAAAC,aAAA,EAACpB,MAAA,CAAA6B,IAAI;IAACC,IAAI,EAAGC,YAAO;IAACC,IAAI,EAAG,EAAI;IAACC,KAAK,EAAGjB,WAAW,CAACiB;EAAO,CAAE,CAC7C,CAAC,EACnB,IAAAd,MAAA,CAAAC,aAAA,EAACvB,YAAA,CAAA4B,gBAAgB;IAChBS,MAAM,EAAG,WAAa;IACtBR,QAAQ,EAAGrB,UAAY;IACvBsB,SAAS,EAAGnB,kBAAoB;IAChCC,UAAU,EAAGA,UAAY;IACzBa,KAAK,EAAG,CAAEN,WAAW,EAAEX,UAAU,GAAG;MAAEuB,OAAO,EAAE;IAAI,CAAC,GAAG,IAAI;EAAI,GAE/D,IAAAT,MAAA,CAAAC,aAAA,EAACpB,MAAA,CAAA6B,IAAI;IAACC,IAAI,EAAGK,WAAM;IAACH,IAAI,EAAG,EAAI;IAACC,KAAK,EAAGjB,WAAW,CAACiB;EAAO,CAAE,CAC5C,CACb,CAAC;AAET;AAAC,IAAAG,QAAA,GAEc,IAAAC,iCAAwB,EAAElC,OAAQ,CAAC;AAAAmC,OAAA,CAAAC,OAAA,GAAAH,QAAA"}

View File

@@ -0,0 +1,46 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const {
Fill,
Slot
} = (0, _components.createSlotFill)('BottomSheetSubSheet');
const BottomSheetSubSheet = ({
children,
navigationButton,
showSheet,
isFullScreen
}) => {
const {
setIsFullScreen
} = (0, _element.useContext)(_components.BottomSheetContext);
(0, _element.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 (0, _react.createElement)(_react.Fragment, null, showSheet && (0, _react.createElement)(Fill, null, (0, _react.createElement)(_reactNative.SafeAreaView, null, children)), _element.Children.count(children) > 0 && navigationButton);
};
BottomSheetSubSheet.Slot = Slot;
BottomSheetSubSheet.screenName = 'BottomSheetSubSheet';
var _default = BottomSheetSubSheet;
exports.default = _default;
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_element","_components","Fill","Slot","createSlotFill","BottomSheetSubSheet","children","navigationButton","showSheet","isFullScreen","setIsFullScreen","useContext","BottomSheetContext","useEffect","_react","createElement","Fragment","SafeAreaView","Children","count","screenName","_default","exports","default"],"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":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,MAAM;EAAEG,IAAI;EAAEC;AAAK,CAAC,GAAG,IAAAC,0BAAc,EAAE,qBAAsB,CAAC;AAE9D,MAAMC,mBAAmB,GAAGA,CAAE;EAC7BC,QAAQ;EACRC,gBAAgB;EAChBC,SAAS;EACTC;AACD,CAAC,KAAM;EACN,MAAM;IAAEC;EAAgB,CAAC,GAAG,IAAAC,mBAAU,EAAEC,8BAAmB,CAAC;EAE5D,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAKL,SAAS,EAAG;MAChBE,eAAe,CAAED,YAAa,CAAC;IAChC;IACA;IACA;IACA;EACD,CAAC,EAAE,CAAED,SAAS,EAAEC,YAAY,CAAG,CAAC;EAEhC,OACC,IAAAK,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACGR,SAAS,IACV,IAAAM,MAAA,CAAAC,aAAA,EAACb,IAAI,QACJ,IAAAY,MAAA,CAAAC,aAAA,EAACjB,YAAA,CAAAmB,YAAY,QAAGX,QAAwB,CACnC,CACN,EACCY,iBAAQ,CAACC,KAAK,CAAEb,QAAS,CAAC,GAAG,CAAC,IAAIC,gBACnC,CAAC;AAEL,CAAC;AAEDF,mBAAmB,CAACF,IAAI,GAAGA,IAAI;AAC/BE,mBAAmB,CAACe,UAAU,GAAG,qBAAqB;AAAC,IAAAC,QAAA,GAExChB,mBAAmB;AAAAiB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,62 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = BottomSheetSwitchCell;
var _react = require("react");
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _cell = _interopRequireDefault(require("./cell"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const EMPTY_STYLE = {};
function BottomSheetSwitchCell(props) {
const {
value,
onValueChange,
disabled,
...cellProps
} = props;
const onPress = () => {
onValueChange(!value);
};
const getAccessibilityLabel = () => {
if (!cellProps.help) {
return value ? (0, _i18n.sprintf)( /* translators: accessibility text. Switch setting ON state. %s: Switch title. */
(0, _i18n._x)('%s. On', 'switch control'), cellProps.label) : (0, _i18n.sprintf)( /* translators: accessibility text. Switch setting OFF state. %s: Switch title. */
(0, _i18n._x)('%s. Off', 'switch control'), cellProps.label);
}
return value ? (0, _i18n.sprintf)( /* translators: accessibility text. Switch setting ON state. %1: Switch title, %2: switch help. */
(0, _i18n._x)('%1$s, %2$s. On', 'switch control'), cellProps.label, cellProps.help) : (0, _i18n.sprintf)( /* translators: accessibility text. Switch setting OFF state. %1: Switch title, %2: switch help. */
(0, _i18n._x)('%1$s, %2$s. Off', 'switch control'), cellProps.label, cellProps.help);
};
return (0, _react.createElement)(_cell.default, {
...cellProps,
accessibilityLabel: getAccessibilityLabel(),
accessibilityRole: 'none',
accessibilityHint: /* translators: accessibility text (hint for switches) */
(0, _i18n.__)('Double tap to toggle setting'),
onPress: onPress,
editable: false,
value: '',
disabled: disabled,
disabledStyle: EMPTY_STYLE
}, (0, _react.createElement)(_reactNative.Switch, {
value: value,
onValueChange: onValueChange,
disabled: disabled
}));
}
//# sourceMappingURL=switch-cell.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_i18n","_cell","_interopRequireDefault","EMPTY_STYLE","BottomSheetSwitchCell","props","value","onValueChange","disabled","cellProps","onPress","getAccessibilityLabel","help","sprintf","_x","label","_react","createElement","default","accessibilityLabel","accessibilityRole","accessibilityHint","__","editable","disabledStyle","Switch"],"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AAIA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AAZA;AACA;AACA;;AAGA;AACA;AACA;;AAEA;AACA;AACA;;AAGA,MAAMI,WAAW,GAAG,CAAC,CAAC;AAEP,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,GACT,IAAAO,aAAO,GACP;MACA,IAAAC,QAAE,EAAE,QAAQ,EAAE,gBAAiB,CAAC,EAChCL,SAAS,CAACM,KACV,CAAC,GACD,IAAAF,aAAO,GACP;MACA,IAAAC,QAAE,EAAE,SAAS,EAAE,gBAAiB,CAAC,EACjCL,SAAS,CAACM,KACV,CAAC;IACL;IACA,OAAOT,KAAK,GACT,IAAAO,aAAO,GACP;IACA,IAAAC,QAAE,EAAE,gBAAgB,EAAE,gBAAiB,CAAC,EACxCL,SAAS,CAACM,KAAK,EACfN,SAAS,CAACG,IACV,CAAC,GACD,IAAAC,aAAO,GACP;IACA,IAAAC,QAAE,EAAE,iBAAiB,EAAE,gBAAiB,CAAC,EACzCL,SAAS,CAACM,KAAK,EACfN,SAAS,CAACG,IACV,CAAC;EACL,CAAC;EAED,OACC,IAAAI,MAAA,CAAAC,aAAA,EAAChB,KAAA,CAAAiB,OAAI;IAAA,GACCT,SAAS;IACdU,kBAAkB,EAAGR,qBAAqB,CAAC,CAAG;IAC9CS,iBAAiB,EAAG,MAAQ;IAC5BC,iBAAiB,EAChB;IACA,IAAAC,QAAE,EAAE,8BAA+B,CACnC;IACDZ,OAAO,EAAGA,OAAS;IACnBa,QAAQ,EAAG,KAAO;IAClBjB,KAAK,EAAG,EAAI;IACZE,QAAQ,EAAGA,QAAU;IACrBgB,aAAa,EAAGrB;EAAa,GAE7B,IAAAa,MAAA,CAAAC,aAAA,EAACnB,YAAA,CAAA2B,MAAM;IACNnB,KAAK,EAAGA,KAAO;IACfC,aAAa,EAAGA,aAAe;IAC/BC,QAAQ,EAAGA;EAAU,CACrB,CACI,CAAC;AAET"}