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

package/example/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "react-native-harmony-tester",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "i": "cd ../ && npm i && npm run pack && cd ./example && npm i",
+    "reStart": "npm run install:pkg && npm run codegen && hdc rport tcp:8081 tcp:8081 && react-native start",
+    "start": "hdc rport tcp:8081 tcp:8081 && react-native start",
+    "codegen": "react-native codegen-harmony --rnoh-module-path ./harmony/entry/oh_modules/@rnoh/react-native-openharmony",
+    "pack:pkg": "cd ../ && npm pack && cd ./example",
+    "install:pkg": "npm uninstall @react-native-ohos/slider && npm run pack:pkg && npm i @react-native-ohos/slider@file:../react-native-ohos-slider-5.0.1-rc.1.tgz",
+    "dev": "npm run codegen && react-native bundle-harmony --dev --minify=false",
+    "prod": "npm run codegen && react-native bundle-harmony --dev=false --minify=true",
+    "postinstall": "node ./scripts/create-build-profile",
+    "fast:pkg": "cd ../ && npm i --legacy-peer-deps && npm pack && cd ./example && npm i && npm run dev"
+  },
+  "dependencies": {
+    "@react-native-ohos/slider": "file:../react-native-ohos-slider-5.0.1-rc.1.tgz",
+    "react": "18.3.1",
+    "react-native": "0.77.1",
+    "react-native-harmony": "file:../packages/rnoh-react-native-harmony-0.77.10.tgz"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@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.77.1",
+    "@react-native/eslint-config": "0.77.1",
+    "@react-native/metro-config": "^0.77.1",
+    "@react-native/typescript-config": "0.77.1",
+    "@rnoh/react-native-harmony-cli": "file:../packages/rnoh-react-native-harmony-cli-0.77.10.tgz",
+    "@tsconfig/react-native": "^3.0.0",
+    "@types/d3-scale-chromatic": "^3.0.0",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.6.3",
+    "eslint": "^8.19.0",
+    "jest": "^29.7.0",
+    "metro-react-native-babel-preset": "0.76.8",
+    "prettier": "2.8.8",
+    "react-test-renderer": "18.3.1",
+    "typescript": "5.5.4"
+  },
+  "overrides": {
+    "@react-native-community/cli": "15.0.1"
+  },
+ "resolutions": {
+    "@react-native-community/cli": "15.0.1"
+ },
+ "engines": {
+    "node": ">=18"
+ }
+}

package/example/react-native.config.js

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  project: {
+  },
+  assets: ['./assets/fonts/'],
+};

package/example/scripts/create-build-profile.js

@@ -0,0 +1,46 @@
+/*
+ * 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 fs = require('fs');
+const JSON5 = require('json5');
+const path = require('path');
+
+const templatePath = path.join(
+  __dirname,
+  '..',
+  'harmony',
+  'build-profile.template.json5',
+);
+const existingProfilePath = path.join(
+  __dirname,
+  '..',
+  'harmony',
+  'build-profile.json5',
+);
+
+if (fs.existsSync(existingProfilePath)) {
+  let existingProfile = JSON5.parse(
+    fs.readFileSync(existingProfilePath, 'utf-8'),
+  );
+  let template = JSON5.parse(fs.readFileSync(templatePath, 'utf-8'));
+  let signingConfigs =
+    existingProfile.app && existingProfile.app.signingConfigs;
+
+  existingProfile = {...template};
+
+  if (signingConfigs) {
+    existingProfile.app.signingConfigs = signingConfigs;
+  }
+
+  fs.writeFileSync(
+    existingProfilePath,
+    JSON5.stringify(existingProfile, null, 2),
+  );
+} else {
+  // File doesn't exist, create a copy from the template
+  fs.copyFileSync(templatePath, existingProfilePath);
+}

package/example/src/index.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 Slider from "@react-native-community/slider"
+import { View } from 'react-native'
+
+export default function SliderExample() {
+    return (
+        <View style={{ backgroundColor: 'red', width: 200, height: 100 ,margin:100 }}>
+            <Slider
+                style={{ width: 200, height: 40 }}
+                minimumValue={0}
+                maximumValue={1}
+                minimumTrackTintColor="#FFFFFF"
+                maximumTrackTintColor="#000000"
+            />
+        </View>
+    );
+};

package/example/tsconfig.json

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+{
+  "extends": "@react-native/typescript-config/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "paths": {
+      "react-native": [
+        "./node_modules/react-native-harmony"
+      ],
+    },
+  },
+  "exclude": [
+    "harmony"
+  ]
+}

package/harmony/slider/oh-package.json5

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-ohos/slider",
-  "version": "5.0.1-rc.1",
+  "version": "5.1.2-rc.2",
   "description": "@react-native-community/slider for HarmonyOS",
   "main": "index.ets",
   "author": "Huawei",

package/package.json

@@ -1,19 +1,13 @@
 {
   "name": "@react-native-ohos/slider",
-  "version": "5.0.1-rc.1",
+  "version": "5.1.2-rc.2",
   "license": "MIT",
   "author": "react-native-community",
-  "homepage": "https://github.com/callstack/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"
   },
-   "files": [
-    "dist",
-    "src",
-    "typings",
-    "harmony"
-  ],
   "publishConfig": {
     "registry": "https://npm.pkg.github.com"
   },
@@ -30,7 +24,7 @@
     "test": "npx jest src"
   },
   "dependencies": {
-    "@react-native-community/slider": "5.0.0"
+    "@react-native-community/slider": "5.1.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -38,17 +32,17 @@
     "@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/cli": "^20.0.2",
+    "@react-native-community/cli-platform-android": "^20.0.2",
+    "@react-native-community/cli-platform-ios": "^20.0.2",
     "@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",
+    "@react-native/babel-preset": "^0.81.1",
+    "@react-native/eslint-config": "^0.81.1",
+    "@react-native/metro-config": "^0.81.1",
+    "@react-native/typescript-config": "^0.81.1",
     "@types/jest": "^28.1.8",
-    "@types/react": "^18.2.6",
-    "@types/react-test-renderer": "^18.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-test-renderer": "^19.1.0",
     "babel-jest": "^29.7.0",
     "babel-plugin-module-resolver": "5.0.0",
     "copyfiles": "^2.4.1",
@@ -59,15 +53,15 @@
     "flow-bin": "^0.163.0",
     "jest": "^29.5.0",
     "prettier": "2.8.8",
-    "react": "^18.3.1",
-    "react-native": "^0.77.1",
+    "react": "^19.2.0",
+    "react-native": "^0.81.4",
     "react-native-windows": "^0.76.2",
-    "react-test-renderer": "^18.3.1",
+    "react-test-renderer": "^19.2.0",
     "typescript": "^5.0.4"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/react-native-oh-library/react-native-slider.git"
+    "url": "https://gitcode.com/openharmony-sig/rntpc_react-native-slider.git"
   },
   "jest": {
     "preset": "react-native",

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,7 +1,11 @@
+/*
+ * 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
-import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
+import {ImageSource, codegenNativeComponent} from 'react-native';
 import type {
   Float,
   WithDefault,

package/src/Slider.tsx

@@ -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 React, {useEffect, useState} from 'react';
 import {
   Image,
@@ -9,10 +15,10 @@ import {
   NativeSyntheticEvent,
   StyleProp,
   View,
+  ImageSource,
+  ImageSourcePropType,
 } 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';
@@ -317,9 +323,9 @@ const SliderComponent = (
         thumbImage={
           Platform.OS === 'web'
             ? props.thumbImage
-            : props.StepMarker
+            : props.StepMarker || !props.thumbImage
             ? undefined
-            : Image.resolveAssetSource(props.thumbImage)
+            : Image.resolveAssetSource(props.thumbImage as ImageSourcePropType)
         }
         ref={forwardedRef}
         style={[

package/src/components/StepNumber.tsx

@@ -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 React from 'react';
 import {StyleProp, Text, TextStyle, View} from 'react-native';
 import {styles} from '../utils/styles';

package/src/components/StepsIndicator.tsx

@@ -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 React, {FC, Fragment, useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import {StepNumber} from './StepNumber';

package/src/components/TrackMark.tsx

@@ -1,5 +1,11 @@
+/*
+ * 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 {Image, ImageSource, ImageSourcePropType, View} from 'react-native';
 import {styles} from '../utils/styles';
 
 export type MarkerProps = {
@@ -13,7 +19,7 @@ export type MarkerProps = {
 export type TrackMarksProps = {
   isTrue: boolean;
   index: number;
-  thumbImage?: ImageURISource;
+  thumbImage?: ImageSource;
   StepMarker?: FC<MarkerProps>;
   currentValue: number;
   min: number;
@@ -42,7 +48,10 @@ export const SliderTrackMark = ({
       ) : null}
       {thumbImage && isTrue ? (
         <View style={styles.thumbImageContainer}>
-          <Image source={thumbImage} style={styles.thumbImage} />
+          <Image
+            source={thumbImage as ImageSourcePropType}
+            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;

package/src/utils/constants.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 {Platform} from 'react-native';
 
 export const constants = {

package/src/utils/styles.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 {Platform, StyleSheet} from 'react-native';
 
 export const styles = StyleSheet.create({
@@ -15,7 +21,7 @@ export const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    top: Platform.OS === 'ios' ? 10 : 0,
+    top: Platform.OS === 'ios' || Platform.OS === 'harmony' ? 10 : 0,
     zIndex: 2,
   },
   trackMarkContainer: {

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
+  }
+}

package/typings/index.d.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 * as React from 'react';
 import { FC } from 'react';
 import * as ReactNative from 'react-native';

package/harmony/slider/.idea/misc.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="MarkdownSettingsMigration">
-    <option name="stateVersion" value="1" />
-  </component>
-</project>

package/harmony/slider/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/slider.iml" filepath="$PROJECT_DIR$/.idea/slider.iml" />
-    </modules>
-  </component>
-</project>

package/harmony/slider/.idea/slider.iml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="EMPTY_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/harmony/slider/README.OpenSource

@@ -1,11 +0,0 @@
-[
-    {
-        "Name": "react-native-slider",
-        "License": "MIT License",
-        "License File":"https://github.com/callstack/react-native-slider/blob/main/LICENSE.md",
-        "Version Number": "4.4.3-0.1.3",
-        "Owner" : ""
-        "Upstream URL": "https://github.com/callstack/react-native-slider",
-        "Description": "React Native component used to select a single value from a range of values."
-    }
-]

package/harmony/slider/oh-package-lock.json5

@@ -1,18 +0,0 @@
-{
-  "meta": {
-    "stableOrder": true
-  },
-  "lockfileVersion": 3,
-  "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
-  "specifiers": {
-    "@rnoh/react-native-openharmony@../react_native_openharmony.har": "@rnoh/react-native-openharmony@../react_native_openharmony.har"
-  },
-  "packages": {
-    "@rnoh/react-native-openharmony@../react_native_openharmony.har": {
-      "name": "@rnoh/react-native-openharmony",
-      "version": "0.77.10",
-      "resolved": "../react_native_openharmony.har",
-      "registryType": "local"
-    }
-  }
-}