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

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,11 +1,11 @@
-{
-  "name": "@react-native-ohos/slider",
-  "version": "5.0.1-rc.1",
-  "description": "@react-native-community/slider for HarmonyOS",
-  "main": "index.ets",
-  "author": "Huawei",
-  "license": "MIT",
-  "dependencies": {
-    "@rnoh/react-native-openharmony": "file:../react_native_openharmony.har"
-  }
+{
+  "name": "@react-native-ohos/slider",
+  "version": "5.0.1",
+  "description": "@react-native-community/slider for HarmonyOS",
+  "main": "index.ets",
+  "author": "Huawei",
+  "license": "MIT",
+  "dependencies": {
+    "@rnoh/react-native-openharmony": "file:../react_native_openharmony.har"
+  }
 }

package/package.json

@@ -1,98 +1,92 @@
-{
-  "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"
-      }
-    }
-  }
-}
+{
+  "name": "@react-native-ohos/slider",
+  "version": "5.0.1",
+  "license": "MIT",
+  "author": "react-native-community",
+  "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"
+  },
+  "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://gitcode.com/openharmony-sig/rntpc_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/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,47 +1,53 @@
-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>;
+/*
+ * 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 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>;