@react-native-ohos/slider 5.1.2-rc.1 → 5.1.2-rc.2

package/src/Slider.tsx

@@ -1,356 +1,356 @@
-/*
- * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
- * Use of this source code is governed by a MIT license that can be
- * found in the LICENSE file.
- */
-
-import React, {useEffect, useState} from 'react';
-import {
-  Image,
-  Platform,
-  AccessibilityActionEvent,
-  ViewProps,
-  ViewStyle,
-  ColorValue,
-  NativeSyntheticEvent,
-  StyleProp,
-  View,
-  ImageSource,
-  ImageSourcePropType,
-} from 'react-native';
-import RCTSliderNativeComponent from './index';
-
-import type {FC, Ref} from 'react';
-import {MarkerProps} from './components/TrackMark';
-import {StepsIndicator} from './components/StepsIndicator';
-import {styles} from './utils/styles';
-import {constants} from './utils/constants';
-
-type Event = NativeSyntheticEvent<
-  Readonly<{
-    value: number;
-    /**
-     * Android Only.
-     */
-    fromUser?: boolean;
-  }>
->;
-
-type WindowsProps = Readonly<{
-  /**
-   * If true the slider will be inverted.
-   * Default value is false.
-   */
-  vertical?: 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;
-
-  /**
-   * Permits tapping on the slider track to set the thumb position.
-   * Defaults to false on iOS. No effect on Android or Windows.
-   */
-  tapToSeek?: boolean;
-}>;
-
-type Props = ViewProps &
-  IOSProps &
-  WindowsProps &
-  Readonly<{
-    /**
-     * Used to style and layout the `Slider`.  See `StyleSheet.js` and
-     * `DeprecatedViewStylePropTypes.js` for more info.
-     */
-    style?: StyleProp<ViewStyle>;
-
-    /**
-     * Write-only property representing the value of the slider.
-     * Can be used to programmatically control the position of the thumb.
-     * Entered once at the beginning still acts as an initial value.
-     * 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 lower limit value of the slider. The user won't be able to slide below this limit.
-     */
-    lowerLimit?: number;
-
-    /**
-     * The upper limit value of the slider. The user won't be able to slide above this limit.
-     */
-    upperLimit?: 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 touches the slider,
-     * regardless if the value has changed. The current value is passed
-     * as an argument to the callback handler.
-     */
-    onSlidingStart?: (_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;
-
-    /**
-     * Sets an image for the thumb. Only static images are supported.
-     */
-    thumbImage?: ImageSource;
-
-    /**
-     * If true the slider will be inverted.
-     * Default value is false.
-     */
-    inverted?: boolean;
-
-    /**
-     * Component to be rendered for each step indicator.
-     */
-    StepMarker?: FC<MarkerProps>;
-
-    /**
-     *
-     */
-    renderStepNumber?: boolean;
-
-    /**
-     * A string of one or more words to be announced by the screen reader.
-     * Otherwise, it will announce the value as a percentage.
-     * Requires passing a value to `accessibilityIncrements` to work correctly.
-     * Should be a plural word, as singular units will be handled.
-     */
-    accessibilityUnits?: string;
-
-    /**
-     * An array of values that represent the different increments displayed
-     * by the slider. All the values passed into this prop must be strings.
-     * Requires passing a value to `accessibilityUnits` to work correctly.
-     * The number of elements must be the same as `maximumValue`.
-     */
-    accessibilityIncrements?: Array<string>;
-  }>;
-
-const SliderComponent = (
-  {
-    onValueChange,
-    onSlidingStart,
-    onSlidingComplete,
-    onAccessibilityAction,
-    value = constants.SLIDER_DEFAULT_INITIAL_VALUE,
-    minimumValue = 0,
-    maximumValue = 1,
-    step = 0,
-    inverted = false,
-    tapToSeek = false,
-    lowerLimit = Platform.select({
-      web: minimumValue,
-      default: constants.LIMIT_MIN_VALUE,
-    }),
-    upperLimit = Platform.select({
-      web: maximumValue,
-      default: constants.LIMIT_MAX_VALUE,
-    }),
-    ...props
-  }: Props,
-  forwardedRef?: Ref<typeof RCTSliderNativeComponent>,
-) => {
-  const [currentValue, setCurrentValue] = useState(
-    value ?? minimumValue ?? constants.SLIDER_DEFAULT_INITIAL_VALUE,
-  );
-  const [width, setWidth] = useState(0);
-
-  const stepResolution = step ? step : constants.DEFAULT_STEP_RESOLUTION;
-
-  const defaultStep = (maximumValue - minimumValue) / stepResolution;
-  const stepLength = step || defaultStep;
-
-  const options = Array.from(
-    {
-      length: (step ? defaultStep : stepResolution) + 1,
-    },
-    (_, index) => minimumValue + index * stepLength,
-  );
-
-  const defaultStyle =
-    Platform.OS === 'ios' || Platform.OS === 'harmony' ? styles.defaultSlideriOS : styles.defaultSlider;
-  const sliderStyle = {zIndex: 1, width: width};
-  const style = [defaultStyle, props.style];
-
-  const onValueChangeEvent = (event: Event) => {
-    onValueChange && onValueChange(event.nativeEvent.value);
-    setCurrentValue(event.nativeEvent.value);
-  };
-
-  const _disabled =
-    typeof props.disabled === 'boolean'
-      ? props.disabled
-      : props.accessibilityState?.disabled === true;
-
-  const _accessibilityState =
-    typeof props.disabled === 'boolean'
-      ? {...props.accessibilityState, disabled: props.disabled}
-      : props.accessibilityState;
-
-  const onSlidingStartEvent = onSlidingStart
-    ? (event: Event) => {
-        onSlidingStart(event.nativeEvent.value);
-      }
-    : null;
-  const onSlidingCompleteEvent = onSlidingComplete
-    ? (event: Event) => {
-        onSlidingComplete(event.nativeEvent.value);
-      }
-    : null;
-  const onAccessibilityActionEvent = onAccessibilityAction
-    ? (event: AccessibilityActionEvent) => {
-        onAccessibilityAction(event);
-      }
-    : null;
-
-  const passedValue = Number.isNaN(value) || !value ? undefined : value;
-
-  useEffect(() => {
-    if (lowerLimit >= upperLimit) {
-      console.warn(
-        'Invalid configuration: lower limit is supposed to be smaller than upper limit',
-      );
-    }
-  }, [lowerLimit, upperLimit]);
-
-  return (
-    <View
-      onLayout={(event) => {
-        setWidth(event.nativeEvent.layout.width);
-      }}
-      style={[style, {justifyContent: 'center'}]}>
-      {props.StepMarker || !!props.renderStepNumber ? (
-        <StepsIndicator
-          options={options}
-          sliderWidth={width}
-          currentValue={currentValue}
-          renderStepNumber={props.renderStepNumber}
-          thumbImage={props.thumbImage}
-          StepMarker={props.StepMarker}
-          isLTR={inverted}
-        />
-      ) : null}
-      <RCTSliderNativeComponent
-        {...props}
-        minimumValue={minimumValue}
-        maximumValue={maximumValue}
-        step={step}
-        inverted={inverted}
-        tapToSeek={tapToSeek}
-        value={passedValue}
-        lowerLimit={lowerLimit}
-        upperLimit={upperLimit}
-        accessibilityState={_accessibilityState}
-        thumbImage={
-          Platform.OS === 'web'
-            ? props.thumbImage
-            : props.StepMarker || !props.thumbImage
-            ? undefined
-            : Image.resolveAssetSource(props.thumbImage as ImageSourcePropType)
-        }
-        ref={forwardedRef}
-        style={[
-          sliderStyle,
-          defaultStyle,
-          {alignContent: 'center', alignItems: 'center'},
-        ]}
-        onChange={onValueChangeEvent}
-        onRNCSliderSlidingStart={onSlidingStartEvent}
-        onRNCSliderSlidingComplete={onSlidingCompleteEvent}
-        onRNCSliderValueChange={onValueChangeEvent}
-        disabled={_disabled}
-        onStartShouldSetResponder={() => true}
-        onResponderTerminationRequest={() => false}
-        onRNCSliderAccessibilityAction={onAccessibilityActionEvent}
-        thumbTintColor={
-          props.thumbImage && !!props.StepMarker
-            ? 'transparent'
-            : props.thumbTintColor
-        }
-      />
-    </View>
-  );
-};
-
-const SliderWithRef = React.forwardRef(SliderComponent);
-
-export default SliderWithRef;
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+import React, {useEffect, useState} from 'react';
+import {
+  Image,
+  Platform,
+  AccessibilityActionEvent,
+  ViewProps,
+  ViewStyle,
+  ColorValue,
+  NativeSyntheticEvent,
+  StyleProp,
+  View,
+  ImageSource,
+  ImageSourcePropType,
+} from 'react-native';
+import RCTSliderNativeComponent from './index';
+
+import type {FC, Ref} from 'react';
+import {MarkerProps} from './components/TrackMark';
+import {StepsIndicator} from './components/StepsIndicator';
+import {styles} from './utils/styles';
+import {constants} from './utils/constants';
+
+type Event = NativeSyntheticEvent<
+  Readonly<{
+    value: number;
+    /**
+     * Android Only.
+     */
+    fromUser?: boolean;
+  }>
+>;
+
+type WindowsProps = Readonly<{
+  /**
+   * If true the slider will be inverted.
+   * Default value is false.
+   */
+  vertical?: 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;
+
+  /**
+   * Permits tapping on the slider track to set the thumb position.
+   * Defaults to false on iOS. No effect on Android or Windows.
+   */
+  tapToSeek?: boolean;
+}>;
+
+type Props = ViewProps &
+  IOSProps &
+  WindowsProps &
+  Readonly<{
+    /**
+     * Used to style and layout the `Slider`.  See `StyleSheet.js` and
+     * `DeprecatedViewStylePropTypes.js` for more info.
+     */
+    style?: StyleProp<ViewStyle>;
+
+    /**
+     * Write-only property representing the value of the slider.
+     * Can be used to programmatically control the position of the thumb.
+     * Entered once at the beginning still acts as an initial value.
+     * 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 lower limit value of the slider. The user won't be able to slide below this limit.
+     */
+    lowerLimit?: number;
+
+    /**
+     * The upper limit value of the slider. The user won't be able to slide above this limit.
+     */
+    upperLimit?: 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 touches the slider,
+     * regardless if the value has changed. The current value is passed
+     * as an argument to the callback handler.
+     */
+    onSlidingStart?: (_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;
+
+    /**
+     * Sets an image for the thumb. Only static images are supported.
+     */
+    thumbImage?: ImageSource;
+
+    /**
+     * If true the slider will be inverted.
+     * Default value is false.
+     */
+    inverted?: boolean;
+
+    /**
+     * Component to be rendered for each step indicator.
+     */
+    StepMarker?: FC<MarkerProps>;
+
+    /**
+     *
+     */
+    renderStepNumber?: boolean;
+
+    /**
+     * A string of one or more words to be announced by the screen reader.
+     * Otherwise, it will announce the value as a percentage.
+     * Requires passing a value to `accessibilityIncrements` to work correctly.
+     * Should be a plural word, as singular units will be handled.
+     */
+    accessibilityUnits?: string;
+
+    /**
+     * An array of values that represent the different increments displayed
+     * by the slider. All the values passed into this prop must be strings.
+     * Requires passing a value to `accessibilityUnits` to work correctly.
+     * The number of elements must be the same as `maximumValue`.
+     */
+    accessibilityIncrements?: Array<string>;
+  }>;
+
+const SliderComponent = (
+  {
+    onValueChange,
+    onSlidingStart,
+    onSlidingComplete,
+    onAccessibilityAction,
+    value = constants.SLIDER_DEFAULT_INITIAL_VALUE,
+    minimumValue = 0,
+    maximumValue = 1,
+    step = 0,
+    inverted = false,
+    tapToSeek = false,
+    lowerLimit = Platform.select({
+      web: minimumValue,
+      default: constants.LIMIT_MIN_VALUE,
+    }),
+    upperLimit = Platform.select({
+      web: maximumValue,
+      default: constants.LIMIT_MAX_VALUE,
+    }),
+    ...props
+  }: Props,
+  forwardedRef?: Ref<typeof RCTSliderNativeComponent>,
+) => {
+  const [currentValue, setCurrentValue] = useState(
+    value ?? minimumValue ?? constants.SLIDER_DEFAULT_INITIAL_VALUE,
+  );
+  const [width, setWidth] = useState(0);
+
+  const stepResolution = step ? step : constants.DEFAULT_STEP_RESOLUTION;
+
+  const defaultStep = (maximumValue - minimumValue) / stepResolution;
+  const stepLength = step || defaultStep;
+
+  const options = Array.from(
+    {
+      length: (step ? defaultStep : stepResolution) + 1,
+    },
+    (_, index) => minimumValue + index * stepLength,
+  );
+
+  const defaultStyle =
+    Platform.OS === 'ios' || Platform.OS === 'harmony' ? styles.defaultSlideriOS : styles.defaultSlider;
+  const sliderStyle = {zIndex: 1, width: width};
+  const style = [defaultStyle, props.style];
+
+  const onValueChangeEvent = (event: Event) => {
+    onValueChange && onValueChange(event.nativeEvent.value);
+    setCurrentValue(event.nativeEvent.value);
+  };
+
+  const _disabled =
+    typeof props.disabled === 'boolean'
+      ? props.disabled
+      : props.accessibilityState?.disabled === true;
+
+  const _accessibilityState =
+    typeof props.disabled === 'boolean'
+      ? {...props.accessibilityState, disabled: props.disabled}
+      : props.accessibilityState;
+
+  const onSlidingStartEvent = onSlidingStart
+    ? (event: Event) => {
+        onSlidingStart(event.nativeEvent.value);
+      }
+    : null;
+  const onSlidingCompleteEvent = onSlidingComplete
+    ? (event: Event) => {
+        onSlidingComplete(event.nativeEvent.value);
+      }
+    : null;
+  const onAccessibilityActionEvent = onAccessibilityAction
+    ? (event: AccessibilityActionEvent) => {
+        onAccessibilityAction(event);
+      }
+    : null;
+
+  const passedValue = Number.isNaN(value) || !value ? undefined : value;
+
+  useEffect(() => {
+    if (lowerLimit >= upperLimit) {
+      console.warn(
+        'Invalid configuration: lower limit is supposed to be smaller than upper limit',
+      );
+    }
+  }, [lowerLimit, upperLimit]);
+
+  return (
+    <View
+      onLayout={(event) => {
+        setWidth(event.nativeEvent.layout.width);
+      }}
+      style={[style, {justifyContent: 'center'}]}>
+      {props.StepMarker || !!props.renderStepNumber ? (
+        <StepsIndicator
+          options={options}
+          sliderWidth={width}
+          currentValue={currentValue}
+          renderStepNumber={props.renderStepNumber}
+          thumbImage={props.thumbImage}
+          StepMarker={props.StepMarker}
+          isLTR={inverted}
+        />
+      ) : null}
+      <RCTSliderNativeComponent
+        {...props}
+        minimumValue={minimumValue}
+        maximumValue={maximumValue}
+        step={step}
+        inverted={inverted}
+        tapToSeek={tapToSeek}
+        value={passedValue}
+        lowerLimit={lowerLimit}
+        upperLimit={upperLimit}
+        accessibilityState={_accessibilityState}
+        thumbImage={
+          Platform.OS === 'web'
+            ? props.thumbImage
+            : props.StepMarker || !props.thumbImage
+            ? undefined
+            : Image.resolveAssetSource(props.thumbImage as ImageSourcePropType)
+        }
+        ref={forwardedRef}
+        style={[
+          sliderStyle,
+          defaultStyle,
+          {alignContent: 'center', alignItems: 'center'},
+        ]}
+        onChange={onValueChangeEvent}
+        onRNCSliderSlidingStart={onSlidingStartEvent}
+        onRNCSliderSlidingComplete={onSlidingCompleteEvent}
+        onRNCSliderValueChange={onValueChangeEvent}
+        disabled={_disabled}
+        onStartShouldSetResponder={() => true}
+        onResponderTerminationRequest={() => false}
+        onRNCSliderAccessibilityAction={onAccessibilityActionEvent}
+        thumbTintColor={
+          props.thumbImage && !!props.StepMarker
+            ? 'transparent'
+            : props.thumbTintColor
+        }
+      />
+    </View>
+  );
+};
+
+const SliderWithRef = React.forwardRef(SliderComponent);
+
+export default SliderWithRef;