From 05968d16e1c4714a7ebfb08fff60ec7d5c914de1 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Thu, 5 Jan 2023 06:12:47 -0800 Subject: [PATCH] refactor(react-native-github): internalized Slider JS files Summary: # Changelog: [JS][Removed] - Removed Slider module js files Reviewed By: NickGerleman Differential Revision: D40984397 fbshipit-source-id: 8ff451d0f4d821af96c45277956042fa181dd4c5 --- Libraries/Components/Slider/Slider.d.ts | 132 -------- Libraries/Components/Slider/Slider.js | 282 ------------------ .../Slider/SliderNativeComponent.js | 56 ---- Libraries/Components/__tests__/Slider-test.js | 37 --- .../__snapshots__/Slider-test.js.snap | 116 ------- index.js | 25 +- types/index.d.ts | 1 - types/public/DeprecatedPropertiesAlias.d.ts | 12 - 8 files changed, 15 insertions(+), 646 deletions(-) delete mode 100644 Libraries/Components/Slider/Slider.d.ts delete mode 100644 Libraries/Components/Slider/Slider.js delete mode 100644 Libraries/Components/Slider/SliderNativeComponent.js delete mode 100644 Libraries/Components/__tests__/Slider-test.js delete mode 100644 Libraries/Components/__tests__/__snapshots__/Slider-test.js.snap diff --git a/Libraries/Components/Slider/Slider.d.ts b/Libraries/Components/Slider/Slider.d.ts deleted file mode 100644 index 33f26d06941057..00000000000000 --- a/Libraries/Components/Slider/Slider.d.ts +++ /dev/null @@ -1,132 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - */ - -import type * as React from 'react'; -import {Constructor} from '../../../types/private/Utilities'; -import {ImageURISource} from '../../Image/ImageSource'; -import {NativeMethods} from '../../../types/public/ReactNativeTypes'; -import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet'; -import {ViewStyle} from '../../StyleSheet/StyleSheetTypes'; -import {ViewProps} from '../View/ViewPropTypes'; - -export interface SliderPropsAndroid extends ViewProps { - /** - * Color of the foreground switch grip. - */ - thumbTintColor?: ColorValue | undefined; -} - -export interface SliderPropsIOS extends ViewProps { - /** - * Assigns a maximum track image. Only static images are supported. - * The leftmost pixel of the image will be stretched to fill the track. - */ - maximumTrackImage?: ImageURISource | undefined; - - /** - * Assigns a minimum track image. Only static images are supported. - * The rightmost pixel of the image will be stretched to fill the track. - */ - minimumTrackImage?: ImageURISource | undefined; - - /** - * Sets an image for the thumb. Only static images are supported. - */ - thumbImage?: ImageURISource | undefined; - - /** - * Assigns a single image for the track. Only static images - * are supported. The center pixel of the image will be stretched - * to fill the track. - */ - trackImage?: ImageURISource | undefined; -} - -export interface SliderProps extends SliderPropsIOS, SliderPropsAndroid { - /** - * If true the user won't be able to move the slider. - * Default value is false. - */ - disabled?: boolean | undefined; - - /** - * The color used for the track to the right of the button. - * Overrides the default blue gradient image. - */ - maximumTrackTintColor?: ColorValue | undefined; - - /** - * Initial maximum value of the slider. Default value is 1. - */ - maximumValue?: number | undefined; - - /** - * The color used for the track to the left of the button. - * Overrides the default blue gradient image. - */ - minimumTrackTintColor?: ColorValue | undefined; - - /** - * Initial minimum value of the slider. Default value is 0. - */ - minimumValue?: number | undefined; - - /** - * Callback called when the user finishes changing the value (e.g. when the slider is released). - */ - onSlidingComplete?: ((value: number) => void) | undefined; - - /** - * Callback continuously called while the user is dragging the slider. - */ - onValueChange?: ((value: number) => void) | undefined; - - /** - * Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0. - */ - step?: number | undefined; - - /** - * Used to style and layout the Slider. See StyleSheet.js for more info. - */ - style?: StyleProp | undefined; - - /** - * Used to locate this view in UI automation tests. - */ - testID?: string | undefined; - - /** - * Initial value of the slider. The value should be between minimumValue - * and maximumValue, which default to 0 and 1 respectively. - * Default value is 0. - * This is not a controlled component, you don't need to update - * the value during dragging. - */ - value?: number | undefined; -} - -/** - * A component used to select a single value from a range of values. - */ -declare class SliderComponent extends React.Component {} -declare const SliderBase: Constructor & typeof SliderComponent; -/** - * Slider has been extracted from react-native core and will be removed in a future release. - * It can now be installed and imported from `@react-native-community/slider` instead of 'react-native'. - * @see https://github.com/callstack/react-native-slider - * @deprecated - */ -export class Slider extends SliderBase {} -/** SliderIOS has been removed from react-native. - * It can now be installed and imported from `@react-native-community/slider` instead of 'react-native'. - * @see https://github.com/callstack/react-native-slider - * @deprecated - */ -export type SliderIOS = Slider; diff --git a/Libraries/Components/Slider/Slider.js b/Libraries/Components/Slider/Slider.js deleted file mode 100644 index ad5900f0e96aa1..00000000000000 --- a/Libraries/Components/Slider/Slider.js +++ /dev/null @@ -1,282 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow strict-local - */ - -import type {ImageSource} from '../../Image/ImageSource'; -import type {SyntheticEvent} from '../../Types/CoreEventTypes'; -import type {AccessibilityState} from '../View/ViewAccessibility'; -import type {ViewProps} from '../View/ViewPropTypes'; - -import StyleSheet, { - type ColorValue, - type ViewStyleProp, -} from '../../StyleSheet/StyleSheet'; -import Platform from '../../Utilities/Platform'; -import SliderNativeComponent from './SliderNativeComponent'; -import * as React from 'react'; - -type Event = SyntheticEvent< - $ReadOnly<{| - value: number, - /** - * Android Only. - */ - fromUser?: boolean, - |}>, ->; - -type IOSProps = $ReadOnly<{| - /** - * Assigns a single image for the track. Only static images are supported. - * The center pixel of the image will be stretched to fill the track. - */ - trackImage?: ?ImageSource, - - /** - * Assigns a minimum track image. Only static images are supported. The - * rightmost pixel of the image will be stretched to fill the track. - */ - minimumTrackImage?: ?ImageSource, - - /** - * Assigns a maximum track image. Only static images are supported. The - * leftmost pixel of the image will be stretched to fill the track. - */ - maximumTrackImage?: ?ImageSource, - - /** - * Sets an image for the thumb. Only static images are supported. - */ - thumbImage?: ?ImageSource, -|}>; - -type Props = $ReadOnly<{| - ...ViewProps, - ...IOSProps, - - /** - * Used to style and layout the `Slider`. See `StyleSheet.js` and - * `DeprecatedViewStylePropTypes.js` for more info. - */ - style?: ?ViewStyleProp, - - /** - * Initial value of the slider. The value should be between minimumValue - * and maximumValue, which default to 0 and 1 respectively. - * Default value is 0. - * - * *This is not a controlled component*, you don't need to update the - * value during dragging. - */ - value?: ?number, - - /** - * Step value of the slider. The value should be - * between 0 and (maximumValue - minimumValue). - * Default value is 0. - */ - step?: ?number, - - /** - * Initial minimum value of the slider. Default value is 0. - */ - minimumValue?: ?number, - - /** - * Initial maximum value of the slider. Default value is 1. - */ - maximumValue?: ?number, - - /** - * The color used for the track to the left of the button. - * Overrides the default blue gradient image on iOS. - */ - minimumTrackTintColor?: ?ColorValue, - - /** - * The color used for the track to the right of the button. - * Overrides the default blue gradient image on iOS. - */ - maximumTrackTintColor?: ?ColorValue, - /** - * The color used to tint the default thumb images on iOS, or the - * color of the foreground switch grip on Android. - */ - thumbTintColor?: ?ColorValue, - - /** - * If true the user won't be able to move the slider. - * Default value is false. - */ - disabled?: ?boolean, - - /** - * Callback continuously called while the user is dragging the slider. - */ - onValueChange?: ?(value: number) => void, - - /** - * Callback that is called when the user releases the slider, - * regardless if the value has changed. The current value is passed - * as an argument to the callback handler. - */ - onSlidingComplete?: ?(value: number) => void, - - /** - * Used to locate this view in UI automation tests. - */ - testID?: ?string, - - /** - Indicates to accessibility services that UI Component is in a specific State. - */ - accessibilityState?: ?AccessibilityState, -|}>; - -/** - * A component used to select a single value from a range of values. - * - * ### Usage - * - * The example below shows how to use `Slider` to change - * a value used by `Text`. The value is stored using - * the state of the root component (`App`). The same component - * subscribes to the `onValueChange` of `Slider` and changes - * the value using `setState`. - * - *``` - * import React from 'react'; - * import { StyleSheet, Text, View, Slider } from 'react-native'; - * - * export default class App extends React.Component { - * constructor(props) { - * super(props); - * this.state = { - * value: 50 - * } - * } - * - * change(value) { - * this.setState(() => { - * return { - * value: parseFloat(value) - * }; - * }); - * } - * - * render() { - * const {value} = this.state; - * return ( - * - * {String(value)} - * - * - * ); - * } - * } - * - * const styles = StyleSheet.create({ - * container: { - * flex: 1, - * flexDirection: 'column', - * justifyContent: 'center' - * }, - * text: { - * fontSize: 50, - * textAlign: 'center' - * } - * }); - *``` - * - */ -const Slider = ( - props: Props, - forwardedRef?: ?React.Ref, -) => { - const style = StyleSheet.compose(styles.slider, props.style); - - const { - value = 0.5, - minimumValue = 0, - maximumValue = 1, - step = 0, - onValueChange, - onSlidingComplete, - ...localProps - } = props; - - const onValueChangeEvent = onValueChange - ? (event: Event) => { - let userEvent = true; - if (Platform.OS === 'android') { - // On Android there's a special flag telling us the user is - // dragging the slider. - userEvent = - event.nativeEvent.fromUser != null && event.nativeEvent.fromUser; - } - userEvent && onValueChange(event.nativeEvent.value); - } - : null; - - const onSlidingCompleteEvent = onSlidingComplete - ? (event: Event) => { - onSlidingComplete(event.nativeEvent.value); - } - : null; - - const disabled = - props.disabled === true || props.accessibilityState?.disabled === true; - const accessibilityState = disabled - ? {...props.accessibilityState, disabled: true} - : props.accessibilityState; - - return ( - false} - onSlidingComplete={onSlidingCompleteEvent} - onStartShouldSetResponder={() => true} - onValueChange={onValueChangeEvent} - ref={forwardedRef} - step={step} - style={style} - value={value} - /> - ); -}; - -const SliderWithRef: React.AbstractComponent< - Props, - React.ElementRef, -> = React.forwardRef(Slider); - -let styles; -if (Platform.OS === 'ios') { - styles = StyleSheet.create({ - slider: { - height: 40, - }, - }); -} else { - styles = StyleSheet.create({ - slider: {}, - }); -} - -module.exports = SliderWithRef; diff --git a/Libraries/Components/Slider/SliderNativeComponent.js b/Libraries/Components/Slider/SliderNativeComponent.js deleted file mode 100644 index 4e4e12cd8d9286..00000000000000 --- a/Libraries/Components/Slider/SliderNativeComponent.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow strict-local - */ - -import type {ImageSource} from '../../Image/ImageSource'; -import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes'; -import type {ColorValue} from '../../StyleSheet/StyleSheet'; -import type { - BubblingEventHandler, - DirectEventHandler, - Double, - WithDefault, -} from '../../Types/CodegenTypes'; -import type {ViewProps} from '../View/ViewPropTypes'; - -import codegenNativeComponent from '../../Utilities/codegenNativeComponent'; - -type Event = $ReadOnly<{| - value: Double, - fromUser?: boolean, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - - // Props - disabled?: WithDefault, - enabled?: WithDefault, - maximumTrackImage?: ?ImageSource, - maximumTrackTintColor?: ?ColorValue, - maximumValue?: WithDefault, - minimumTrackImage?: ?ImageSource, - minimumTrackTintColor?: ?ColorValue, - minimumValue?: WithDefault, - step?: WithDefault, - testID?: WithDefault, - thumbImage?: ?ImageSource, - thumbTintColor?: ?ColorValue, - trackImage?: ?ImageSource, - value?: WithDefault, - - // Events - onValueChange?: ?BubblingEventHandler, - onSlidingComplete?: ?DirectEventHandler, -|}>; - -export default (codegenNativeComponent('Slider', { - interfaceOnly: true, - paperComponentName: 'RCTSlider', -}): HostComponent); diff --git a/Libraries/Components/__tests__/Slider-test.js b/Libraries/Components/__tests__/Slider-test.js deleted file mode 100644 index 9be43af838ad81..00000000000000 --- a/Libraries/Components/__tests__/Slider-test.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @flow - * @format - */ - -import Slider from '../Slider/Slider'; -import * as React from 'react'; -import ReactTestRenderer from 'react-test-renderer'; - -describe('', () => { - it('should render as expected', () => { - expect(ReactTestRenderer.create()).toMatchSnapshot(); - }); - - it('should set disabled as false', () => { - // Slider component should set disabled prop as false by default - expect(ReactTestRenderer.create()).toMatchSnapshot(); - expect( - ReactTestRenderer.create( - , - ), - ).toMatchSnapshot(); - }); - it('should set disabled as true', () => { - expect(ReactTestRenderer.create()).toMatchSnapshot(); - expect( - ReactTestRenderer.create( - , - ), - ).toMatchSnapshot(); - }); -}); diff --git a/Libraries/Components/__tests__/__snapshots__/Slider-test.js.snap b/Libraries/Components/__tests__/__snapshots__/Slider-test.js.snap deleted file mode 100644 index 244045f0057b20..00000000000000 --- a/Libraries/Components/__tests__/__snapshots__/Slider-test.js.snap +++ /dev/null @@ -1,116 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render as expected 1`] = ` - -`; - -exports[` should set disabled as false 1`] = ` - -`; - -exports[` should set disabled as false 2`] = ` - -`; - -exports[` should set disabled as true 1`] = ` - -`; - -exports[` should set disabled as true 2`] = ` - -`; diff --git a/index.js b/index.js index 9cdf616821c1f3..3b3db384682787 100644 --- a/index.js +++ b/index.js @@ -28,7 +28,6 @@ import typeof RefreshControl from './Libraries/Components/RefreshControl/Refresh import typeof SafeAreaView from './Libraries/Components/SafeAreaView/SafeAreaView'; import typeof ScrollView from './Libraries/Components/ScrollView/ScrollView'; import typeof SectionList from './Libraries/Lists/SectionList'; -import typeof Slider from './Libraries/Components/Slider/Slider'; import typeof StatusBar from './Libraries/Components/StatusBar/StatusBar'; import typeof Switch from './Libraries/Components/Switch/Switch'; import typeof Text from './Libraries/Text/Text'; @@ -172,15 +171,6 @@ module.exports = { get SectionList(): SectionList { return require('./Libraries/Lists/SectionList').default; }, - get Slider(): Slider { - warnOnce( - 'slider-moved', - 'Slider has been extracted from react-native core and will be removed in a future release. ' + - "It can now be installed and imported from '@react-native-community/slider' instead of 'react-native'. " + - 'See https://github.com/callstack/react-native-slider', - ); - return require('./Libraries/Components/Slider/Slider'); - }, get StatusBar(): StatusBar { return require('./Libraries/Components/StatusBar/StatusBar'); }, @@ -775,4 +765,19 @@ if (__DEV__) { ); }, }); + /* $FlowFixMe[prop-missing] This is intentional: Flow will error when + * attempting to access Slider. */ + /* $FlowFixMe[invalid-export] This is intentional: Flow will error when + * attempting to access Slider. */ + Object.defineProperty(module.exports, 'Slider', { + configurable: true, + get() { + invariant( + false, + 'Slider has been removed from react-native core. ' + + "It can now be installed and imported from '@react-native-community/slider' instead of 'react-native'. " + + 'See https://github.com/callstack/react-native-slider', + ); + }, + }); } diff --git a/types/index.d.ts b/types/index.d.ts index ae53354684926a..d12233d3f6b972 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -90,7 +90,6 @@ export * from '../Libraries/Components/ProgressBarAndroid/ProgressBarAndroid'; export * from '../Libraries/Components/RefreshControl/RefreshControl'; export * from '../Libraries/Components/SafeAreaView/SafeAreaView'; export * from '../Libraries/Components/ScrollView/ScrollView'; -export * from '../Libraries/Components/Slider/Slider'; export * from '../Libraries/Components/StatusBar/StatusBar'; export * from '../Libraries/Components/Switch/Switch'; export * from '../Libraries/Components/TextInput/InputAccessoryView'; diff --git a/types/public/DeprecatedPropertiesAlias.d.ts b/types/public/DeprecatedPropertiesAlias.d.ts index 55c924ceaf4bb6..df4f03fdcda007 100644 --- a/types/public/DeprecatedPropertiesAlias.d.ts +++ b/types/public/DeprecatedPropertiesAlias.d.ts @@ -32,9 +32,6 @@ import { RefreshControlProps, RefreshControlPropsIOS, RefreshControlPropsAndroid, - SliderProps, - SliderPropsIOS, - SliderPropsAndroid, ImageSourcePropType, ImageProps, ImagePropsIOS, @@ -134,15 +131,6 @@ export type RefreshControlPropertiesIOS = RefreshControlPropsIOS; /** @deprecated Use RefreshControlPropsAndroid */ export type RefreshControlPropertiesAndroid = RefreshControlPropsAndroid; -/** @deprecated Use SliderProps */ -export type SliderProperties = SliderProps; - -/** @deprecated Use SliderPropsIOS */ -export type SliderPropertiesIOS = SliderPropsIOS; - -/** @deprecated Use SliderPropsAndroid */ -export type SliderPropertiesAndroid = SliderPropsAndroid; - /** @deprecated Use ImageSourcePropType */ export type ImagePropertiesSourceOptions = ImageSourcePropType;