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

package/src/components/StepNumber.tsx

@@ -1,17 +1,23 @@
-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>
-  );
-};
+/*
+ * 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

@@ -1,83 +1,89 @@
-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>
-  );
-};
+/*
+ * 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

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

package/src/utils/constants.ts

@@ -1,11 +1,17 @@
-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,
-};
+/*
+ * 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,
+};

package/src/utils/styles.ts

@@ -1,55 +1,61 @@
-import {Platform, StyleSheet} from 'react-native';
-
-export const styles = StyleSheet.create({
-  stepNumber: {
-    marginTop: 20,
-    alignItems: 'center',
-    position: 'absolute',
-  },
-  sliderMainContainer: {zIndex: 1, width: '100%'},
-  defaultSlideriOS: {
-    height: 40,
-  },
-  defaultSlider: {},
-  stepsIndicator: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    top: Platform.OS === 'ios' ? 10 : 0,
-    zIndex: 2,
-  },
-  trackMarkContainer: {
-    alignItems: 'center',
-    alignContent: 'center',
-    alignSelf: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
-    zIndex: 3,
-  },
-  thumbImageContainer: {
-    position: 'absolute',
-    zIndex: 3,
-    justifyContent: 'center',
-    alignItems: 'center',
-    alignContent: 'center',
-  },
-  thumbImage: {
-    alignContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-  },
-  stepIndicatorElement: {
-    alignItems: 'center',
-    alignContent: 'center',
-  },
-  defaultIndicatorMarked: {
-    height: 20,
-    width: 5,
-    backgroundColor: '#CCCCCC',
-  },
-  defaultIndicatorIdle: {
-    height: 10,
-    width: 2,
-    backgroundColor: '#C0C0C0',
-  },
-});
+/*
+ * 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, StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  stepNumber: {
+    marginTop: 20,
+    alignItems: 'center',
+    position: 'absolute',
+  },
+  sliderMainContainer: {zIndex: 1, width: '100%'},
+  defaultSlideriOS: {
+    height: 40,
+  },
+  defaultSlider: {},
+  stepsIndicator: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    top: Platform.OS === 'ios' ? 10 : 0,
+    zIndex: 2,
+  },
+  trackMarkContainer: {
+    alignItems: 'center',
+    alignContent: 'center',
+    alignSelf: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    zIndex: 3,
+  },
+  thumbImageContainer: {
+    position: 'absolute',
+    zIndex: 3,
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignContent: 'center',
+  },
+  thumbImage: {
+    alignContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+  },
+  stepIndicatorElement: {
+    alignItems: 'center',
+    alignContent: 'center',
+  },
+  defaultIndicatorMarked: {
+    height: 20,
+    width: 5,
+    backgroundColor: '#CCCCCC',
+  },
+  defaultIndicatorIdle: {
+    height: 10,
+    width: 2,
+    backgroundColor: '#C0C0C0',
+  },
+});

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "include": ["./src/**/*"],
+
+  "compilerOptions": {
+    "jsx": "react",
+
+    /* Language and Environment */
+    "target": "ESNext",
+    "lib": ["ESNext", "dom"],
+
+    /* Modules */
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+
+    /* Interop Constraints */
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+
+    /* Type Checking */
+    "strict": true,
+    "skipLibCheck": true
+  }
+}