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

package/harmony/slider/src/main/resources/en_US/element/string.json

@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "label"
+    }
+  ]
+}

package/harmony/slider/src/main/resources/zh_CN/element/string.json

@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "模块描述"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "label"
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@react-native-ohos/slider",
+  "version": "5.0.1-rc.1",
+  "license": "MIT",
+  "author": "react-native-community",
+  "homepage": "https://github.com/callstack/react-native-slider#readme",
+  "description": "React Native component used to select a single value from a range of values.",
+  "harmony": {
+    "alias": "@react-native-community/slider"
+  },
+   "files": [
+    "dist",
+    "src",
+    "typings",
+    "harmony"
+  ],
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
+  "main": "dist/Slider.js",
+  "types": "typings/index.d.ts",
+  "keywords": [
+    "react-native",
+    "react native",
+    "slider"
+  ],
+  "scripts": {
+    "prepare": "babel --extensions \".ts,.tsx\" --out-dir dist src",
+    "lint": "npx eslint src",
+    "test": "npx jest src"
+  },
+  "dependencies": {
+    "@react-native-community/slider": "5.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-flow": "^7.9.0",
+    "@babel/preset-typescript": "^7.18.6",
+    "@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": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.7.0",
+    "babel-plugin-module-resolver": "5.0.0",
+    "copyfiles": "^2.4.1",
+    "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",
+    "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",
+    "url": "https://github.com/react-native-oh-library/react-native-slider.git"
+  },
+  "jest": {
+    "preset": "react-native",
+    "verbose": true,
+    "modulePathIgnorePatterns": [
+      "/e2e/"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": false,
+    "jsxBracketSameLine": true
+  },
+  "codegenConfig": {
+    "name": "RNCSlider",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.reactnativecommunity.slider"
+    },
+    "ios": {
+      "componentProvider": {
+        "RNCSlider": "RNCSliderComponentView"
+      }
+    }
+  }
+}

package/src/RNCSliderNativeComponent.ts

@@ -0,0 +1,47 @@
+import type {ColorValue, HostComponent, ViewProps} from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+//@ts-ignore
+import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
+import type {
+  Float,
+  WithDefault,
+  DirectEventHandler,
+  BubblingEventHandler,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+type Event = Readonly<{
+  value: Float;
+  fromUser?: boolean;
+}>;
+
+export interface NativeProps extends ViewProps {
+  accessibilityUnits?: string;
+  accessibilityIncrements?: ReadonlyArray<string>;
+  disabled?: WithDefault<boolean, false>;
+  inverted?: WithDefault<boolean, false>;
+  vertical?: WithDefault<boolean, false>;
+  tapToSeek?: WithDefault<boolean, false>;
+  maximumTrackImage?: ImageSource;
+  maximumTrackTintColor?: ColorValue;
+  maximumValue?: Double;
+  minimumTrackImage?: ImageSource;
+  minimumTrackTintColor?: ColorValue;
+  minimumValue?: Double;
+  onChange?: BubblingEventHandler<Event>;
+  onRNCSliderSlidingStart?: DirectEventHandler<Event>;
+  onRNCSliderSlidingComplete?: DirectEventHandler<Event>;
+  onRNCSliderValueChange?: BubblingEventHandler<Event>;
+  step?: Double;
+  testID?: string;
+  thumbImage?: ImageSource;
+  thumbTintColor?: ColorValue;
+  trackImage?: ImageSource;
+  value?: Float;
+  lowerLimit?: Float;
+  upperLimit?: Float;
+}
+
+export default codegenNativeComponent<NativeProps>('RNCSlider', {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;

package/src/Slider.tsx

@@ -0,0 +1,350 @@
+import React, {useEffect, useState} from 'react';
+import {
+  Image,
+  Platform,
+  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 {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
+            ? 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);
+
+export default SliderWithRef;

package/src/components/StepNumber.tsx

@@ -0,0 +1,17 @@
+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,83 @@
+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,50 @@
+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

@@ -0,0 +1,3 @@
+const RNCSlider = require('./RNCSliderNativeComponent').default;
+
+export default RNCSlider;

package/src/utils/constants.ts

@@ -0,0 +1,11 @@
+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,
+};