@react-native-ohos/slider 4.4.4-rc.1 → 5.0.1

package/harmony/slider/src/main/cpp/SliderPackage.h

@@ -21,8 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-#ifndef SLIDERPACKAGE_H
-#define SLIDERPACKAGE_H
+
 #include "RNOH/Package.h"
 #include "ComponentDescriptor.h"
 #include "SliderJSIBinder.h"
@@ -35,25 +34,20 @@ class SliderPackage : public Package {
 public:
     SliderPackage(Package::Context ctx): Package(ctx) {}
 
-    std::vector<facebook::react::ComponentDescriptorProvider> createComponentDescriptorProviders() override
-    {
+    std::vector<facebook::react::ComponentDescriptorProvider> createComponentDescriptorProviders() override {
         return {facebook::react::concreteComponentDescriptorProvider<facebook::react::RNCSliderComponentDescriptor>()};
     }
 
-    ComponentNapiBinderByString createComponentNapiBinderByName() override
-    {
+    ComponentNapiBinderByString createComponentNapiBinderByName() override {
         return {{"RNCSlider", std::make_shared<SliderNapiBinder>()}};
     }
 
-    ComponentJSIBinderByString createComponentJSIBinderByName() override
-    {
+    ComponentJSIBinderByString createComponentJSIBinderByName() override {
         return {{"RNCSlider", std::make_shared<SliderJSIBinder>()}};
     }
 
-    EventEmitRequestHandlers createEventEmitRequestHandlers() override
-    {
+    EventEmitRequestHandlers createEventEmitRequestHandlers() override {
         return {std::make_shared<SliderEventEmitRequestHandler>()};
     }
 };
-} // namespace rnoh
-#endif
+} // namespace rnoh

package/package.json

@@ -1,22 +1,15 @@
 {
   "name": "@react-native-ohos/slider",
-  "version": "4.4.4-rc.1",
+  "version": "5.0.1",
   "license": "MIT",
   "author": "react-native-community",
-  "homepage": "https://gitcode.com/openharmony-sig/rntpc_react-native-slider#readme",
+  "homepage": "https://gitcode.com/openharmony-sig/rntpc_react-native-slider/tree/br_rnoh0.77#readme",
   "description": "React Native component used to select a single value from a range of values.",
   "harmony": {
-    "alias": "@react-native-community/slider",
-    "autolinking": {
-      "etsPackageClassName":"SliderPackage",
-      "cppPackageClassName":"SliderPackage",
-      "cmakeLibraryTargetName": "rnoh_slider", 
-      "ohPackageName": "@react-native-ohos/slider"
-    }
+    "alias": "@react-native-community/slider"
   },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
+    "registry": "https://npm.pkg.github.com"
   },
   "main": "dist/Slider.js",
   "types": "typings/index.d.ts",
@@ -31,32 +24,40 @@
     "test": "npx jest src"
   },
   "dependencies": {
-    "@react-native-community/slider": "4.4.3"
+    "@react-native-community/slider": "5.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.25.2",
     "@babel/preset-flow": "^7.9.0",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime": "^7.12.5",
-    "@react-native-community/eslint-config": "2.0.0",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@react-native/babel-preset": "0.76.3",
+    "@react-native/eslint-config": "0.76.3",
+    "@react-native/metro-config": "0.76.3",
+    "@react-native/typescript-config": "0.76.3",
     "@types/jest": "^28.1.8",
-    "@types/react-native": "^0.69.5",
+    "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^29.7.0",
     "babel-plugin-module-resolver": "5.0.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^7.32.0",
+    "eslint": "^8.19.0",
+    "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-native": "^4.0.0",
     "flow-bin": "^0.163.0",
     "jest": "^29.5.0",
-    "metro-react-native-babel-preset": "^0.70.3",
-    "react": "^18.2.0",
-    "react-native": "^0.72.1",
-    "react-native-windows": "^0.72.0",
-    "react-test-renderer": "^18.2.0",
-    "typescript": "^4.7.4"
+    "prettier": "2.8.8",
+    "react": "^18.3.1",
+    "react-native": "^0.77.1",
+    "react-native-windows": "^0.76.2",
+    "react-test-renderer": "^18.3.1",
+    "typescript": "^5.0.4"
   },
   "repository": {
     "type": "git",
@@ -74,5 +75,18 @@
     "trailingComma": "all",
     "bracketSpacing": false,
     "jsxBracketSameLine": true
+  },
+  "codegenConfig": {
+    "name": "RNCSlider",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.reactnativecommunity.slider"
+    },
+    "ios": {
+      "componentProvider": {
+        "RNCSlider": "RNCSliderComponentView"
+      }
+    }
   }
 }

package/react-native.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        libraryName: 'RNCSlider',
+        componentDescriptors: ['RNCSliderComponentDescriptor'],
+        cmakeListsPath: 'src/main/jni/CMakeLists.txt',
+      },
+    },
+  },
+};

package/src/RNCSliderNativeComponent.ts

@@ -1,3 +1,9 @@
+/*
+ * 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 type {ColorValue, HostComponent, ViewProps} from 'react-native';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 //@ts-ignore
@@ -7,6 +13,7 @@ import type {
   WithDefault,
   DirectEventHandler,
   BubblingEventHandler,
+  Double,
 } from 'react-native/Libraries/Types/CodegenTypes';
 
 type Event = Readonly<{
@@ -23,15 +30,15 @@ export interface NativeProps extends ViewProps {
   tapToSeek?: WithDefault<boolean, false>;
   maximumTrackImage?: ImageSource;
   maximumTrackTintColor?: ColorValue;
-  maximumValue?: Float;
+  maximumValue?: Double;
   minimumTrackImage?: ImageSource;
   minimumTrackTintColor?: ColorValue;
-  minimumValue?: Float;
+  minimumValue?: Double;
   onChange?: BubblingEventHandler<Event>;
   onRNCSliderSlidingStart?: DirectEventHandler<Event>;
   onRNCSliderSlidingComplete?: DirectEventHandler<Event>;
   onRNCSliderValueChange?: BubblingEventHandler<Event>;
-  step?: Float;
+  step?: Double;
   testID?: string;
   thumbImage?: ImageSource;
   thumbTintColor?: ColorValue;
@@ -41,6 +48,6 @@ export interface NativeProps extends ViewProps {
   upperLimit?: Float;
 }
 
-export default codegenNativeComponent<NativeProps>(
-  'RNCSlider',
-) as HostComponent<NativeProps>;
+export default codegenNativeComponent<NativeProps>('RNCSlider', {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;

package/src/Slider.tsx

@@ -1,23 +1,30 @@
-import React from 'react';
+/*
+ * 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,
-  StyleSheet,
   AccessibilityActionEvent,
   ViewProps,
   ViewStyle,
   ColorValue,
   NativeSyntheticEvent,
   StyleProp,
+  View,
 } from 'react-native';
 import RCTSliderNativeComponent from './index';
 //@ts-ignore
 import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
 
-import type {Ref} from 'react';
-
-const LIMIT_MIN_VALUE = Number.MIN_SAFE_INTEGER;
-const LIMIT_MAX_VALUE = Number.MAX_SAFE_INTEGER;
+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<{
@@ -139,21 +146,21 @@ type Props = ViewProps &
     /**
      * Callback continuously called while the user is dragging the slider.
      */
-    onValueChange?: (value: number) => void;
+    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;
+    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;
+    onSlidingComplete?: (_value: number) => void;
 
     /**
      * Used to locate this view in UI automation tests.
@@ -171,6 +178,16 @@ type Props = ViewProps &
      */
     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.
@@ -189,24 +206,55 @@ type Props = ViewProps &
   }>;
 
 const SliderComponent = (
-  props: Props,
-  forwardedRef?: Ref<typeof RCTSliderNativeComponent>,
-) => {
-  const style = StyleSheet.compose(props.style, styles.slider);
-
-  const {
+  {
     onValueChange,
     onSlidingStart,
     onSlidingComplete,
     onAccessibilityAction,
-    ...localProps
-  } = props;
+    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 onValueChangeEvent = onValueChange
-    ? (event: Event) => {
-        onValueChange(event.nativeEvent.value);
-      }
-    : null;
+  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'
@@ -234,62 +282,75 @@ const SliderComponent = (
       }
     : null;
 
-  const value =
-    Number.isNaN(props.value) || !props.value ? undefined : props.value;
+  const passedValue = Number.isNaN(value) || !value ? undefined : value;
 
-  const lowerLimit =
-    !!localProps.lowerLimit || localProps.lowerLimit === 0
-      ? localProps.lowerLimit
-      : LIMIT_MIN_VALUE;
-
-  const upperLimit =
-    !!localProps.upperLimit || localProps.upperLimit === 0
-      ? localProps.upperLimit
-      : LIMIT_MAX_VALUE;
+  useEffect(() => {
+    if (lowerLimit >= upperLimit) {
+      console.warn(
+        'Invalid configuration: lower limit is supposed to be smaller than upper limit',
+      );
+    }
+  }, [lowerLimit, upperLimit]);
 
   return (
-    <RCTSliderNativeComponent
-      {...localProps}
-      value={value}
-      lowerLimit={lowerLimit}
-      upperLimit={upperLimit}
-      accessibilityState={_accessibilityState}
-      thumbImage={
-        Platform.OS === 'web'
-          ? props.thumbImage
-          : props.thumbImage
-          ? Image.resolveAssetSource(props.thumbImage)
-          : undefined
-      }
-      ref={forwardedRef}
-      style={style}
-      onChange={onValueChangeEvent}
-      onRNCSliderSlidingStart={onSlidingStartEvent}
-      onRNCSliderSlidingComplete={onSlidingCompleteEvent}
-      onRNCSliderValueChange={onValueChangeEvent}
-      disabled={_disabled}
-      onStartShouldSetResponder={() => true}
-      onResponderTerminationRequest={() => false}
-      onRNCSliderAccessibilityAction={onAccessibilityActionEvent}
-    />
+    <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
+            ? undefined
+            : Image.resolveAssetSource(props.thumbImage)
+        }
+        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);
 
-SliderWithRef.defaultProps = {
-  value: 0,
-  minimumValue: 0,
-  maximumValue: 1,
-  step: 0,
-  inverted: false,
-  tapToSeek: false,
-  lowerLimit: LIMIT_MIN_VALUE,
-  upperLimit: LIMIT_MAX_VALUE,
-};
-
-let styles = StyleSheet.create(
-  Platform.OS === 'ios' || Platform.OS === 'harmony' ? {slider: {height: 40}} : {slider: {}},
-);
-
 export default SliderWithRef;

package/src/components/StepNumber.tsx

@@ -0,0 +1,23 @@
+/*
+ * 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 from 'react';
+import {StyleProp, Text, TextStyle, View} from 'react-native';
+import {styles} from '../utils/styles';
+
+export const StepNumber = ({
+  i,
+  style,
+}: {
+  i: number;
+  style: StyleProp<TextStyle>;
+}) => {
+  return (
+    <View style={styles.stepNumber}>
+      <Text style={style}>{i}</Text>
+    </View>
+  );
+};

package/src/components/StepsIndicator.tsx

@@ -0,0 +1,89 @@
+/*
+ * 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, {FC, Fragment, useCallback, useMemo} from 'react';
+import {View} from 'react-native';
+import {StepNumber} from './StepNumber';
+import {MarkerProps, SliderTrackMark} from './TrackMark';
+//@ts-ignore
+import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
+import {styles} from '../utils/styles';
+import {constants} from '../utils/constants';
+
+export const StepsIndicator = ({
+  options,
+  sliderWidth,
+  currentValue,
+  StepMarker,
+  renderStepNumber,
+  thumbImage,
+  isLTR,
+}: {
+  options: number[];
+  sliderWidth: number;
+  currentValue: number;
+  StepMarker?: FC<MarkerProps>;
+  renderStepNumber?: boolean;
+  thumbImage?: ImageSource;
+  isLTR?: boolean;
+}) => {
+  const stepNumberFontStyle = useMemo(() => {
+    return {
+      fontSize:
+        options.length > 9
+          ? constants.STEP_NUMBER_TEXT_FONT_SMALL
+          : constants.STEP_NUMBER_TEXT_FONT_BIG,
+    };
+  }, [options.length]);
+  const values = isLTR ? options.reverse() : options;
+
+  const renderStepIndicator = useCallback(
+    (i: number, index: number) => {
+      return (
+        <Fragment key={index}>
+          <View style={styles.stepIndicatorElement} key={`${index}-View`}>
+            <SliderTrackMark
+              key={`${index}-SliderTrackMark`}
+              isTrue={currentValue === i}
+              index={i}
+              thumbImage={thumbImage}
+              StepMarker={StepMarker}
+              currentValue={currentValue}
+              min={options[0]}
+              max={options[options.length - 1]}
+            />
+            {renderStepNumber ? (
+              <StepNumber
+                i={i}
+                style={stepNumberFontStyle}
+                key={`${index}th-step`}
+              />
+            ) : null}
+          </View>
+        </Fragment>
+      );
+    },
+    [
+      currentValue,
+      StepMarker,
+      options,
+      thumbImage,
+      renderStepNumber,
+      stepNumberFontStyle,
+    ],
+  );
+
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.stepsIndicator,
+        {marginHorizontal: sliderWidth * constants.MARGIN_HORIZONTAL_PADDING},
+      ]}>
+      {values.map((i, index) => renderStepIndicator(i, index))}
+    </View>
+  );
+};

package/src/components/TrackMark.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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, {FC} from 'react';
+import {Image, ImageURISource, View} from 'react-native';
+import {styles} from '../utils/styles';
+
+export type MarkerProps = {
+  stepMarked: boolean;
+  currentValue: number;
+  index: number;
+  min: number;
+  max: number;
+};
+
+export type TrackMarksProps = {
+  isTrue: boolean;
+  index: number;
+  thumbImage?: ImageURISource;
+  StepMarker?: FC<MarkerProps>;
+  currentValue: number;
+  min: number;
+  max: number;
+};
+
+export const SliderTrackMark = ({
+  isTrue,
+  index,
+  thumbImage,
+  StepMarker,
+  currentValue,
+  min,
+  max,
+}: TrackMarksProps) => {
+  return (
+    <View style={styles.trackMarkContainer}>
+      {StepMarker ? (
+        <StepMarker
+          stepMarked={isTrue}
+          index={index}
+          currentValue={currentValue}
+          min={min}
+          max={max}
+        />
+      ) : null}
+      {thumbImage && isTrue ? (
+        <View style={styles.thumbImageContainer}>
+          <Image source={thumbImage} style={styles.thumbImage} />
+        </View>
+      ) : null}
+    </View>
+  );
+};

package/src/index.ts

@@ -1,3 +1,9 @@
+/*
+ * 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.
+ */
+
 const RNCSlider = require('./RNCSliderNativeComponent').default;
 
-export default RNCSlider;
+export default RNCSlider;

package/src/utils/constants.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 {Platform} from 'react-native';
+
+export const constants = {
+  SLIDER_DEFAULT_INITIAL_VALUE: 0,
+  MARGIN_HORIZONTAL_PADDING: 0.05,
+  STEP_NUMBER_TEXT_FONT_SMALL: 8,
+  STEP_NUMBER_TEXT_FONT_BIG: 12,
+  LIMIT_MIN_VALUE: Number.MIN_SAFE_INTEGER,
+  LIMIT_MAX_VALUE: Number.MAX_SAFE_INTEGER,
+  DEFAULT_STEP_RESOLUTION: Platform.OS === 'android' ? 128 : 1000,
+};