@onekeyfe/react-native-perp-depth-bar 3.0.53 → 3.0.55

package/PerpDepthBar.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
 
   s.platforms    = { :ios => min_ios_version_supported }
-  s.source       = { :git => "https://github.com/OneKeyHQ/app-modules.git", :tag => "#{s.version}" }
+  s.source       = { :git => "https://github.com/OneKeyHQ/native-views/react-native-perp-depth-bar.git", :tag => "#{s.version}" }
 
   s.source_files = [
     "ios/**/*.{swift}",

package/README.md

@@ -10,12 +10,43 @@ yarn add @onekeyfe/react-native-perp-depth-bar
 
 ## Usage
 
-```js
-import { PerpDepthBarView } from '@onekeyfe/react-native-perp-depth-bar';
+```tsx
+import { PerpDepthBarsView, PerpSideRatioView } from '@onekeyfe/react-native-perp-depth-bar';
 
 // ...
 
-<PerpDepthBarView color="#ff0000" style={{ width: 100, height: 100 }} />
+<PerpDepthBarsView
+  style={{ width: 220, height: 120 }}
+  percents={[90, 60, 35]}
+  rowHeight={28}
+  rowMarginTop={4}
+  barInset={2}
+  color="rgba(255, 88, 88, 0.18)"
+  origin="left"
+  reducedMotion={false}
+  epoch={0}
+  prices={['4100.1', '4099.8', '4099.5']}
+  sizes={['1.2', '0.8', '2.4']}
+  priceColor="#ff6b6b"
+  sizeColor="#8b949e"
+  priceFontSize={13}
+  sizeFontSize={13}
+  textInset={8}
+  placeholderText="--"
+  placeholderRows={3}
+/>
+
+<PerpSideRatioView
+  style={{ width: 220, height: 4 }}
+  bidPercentage={56}
+  askPercentage={44}
+  longColor="#16a34a"
+  shortColor="#dc2626"
+  segmentHeight={4}
+  cornerRadius={2}
+  gap={2}
+  reducedMotion={false}
+/>
 ```
 
 ## Contributing

package/android/src/main/java/com/margelo/nitro/perpdepthbar/HybridPerpDepthBars.kt

@@ -231,12 +231,23 @@ class HybridPerpDepthBars(val context: ThemedReactContext) : HybridPerpDepthBars
    */
   override fun setDepth(buffer: ArrayBuffer) {
     if (isDisposed) return
-    imperativeDepth = true
-    val byteBuffer = buffer.getBuffer(false)
-    val count = buffer.size / 4
-    val floats = byteBuffer.order(ByteOrder.LITTLE_ENDIAN).asFloatBuffer()
-    val depths = DoubleArray(count) { floats.get(it).toDouble() }
-    syncTargets(depths)
+    // Parse the foreign JS buffer synchronously on the calling (JS) thread into a
+    // local copy, BEFORE hopping to the UI thread. `getBuffer(true)` requests a
+    // copy so the bytes can't be reclaimed/overwritten once this call returns, and
+    // reads are clamped to `remaining()` rather than assuming a position-0,
+    // capacity==size buffer (a sub-view buffer would otherwise IndexOutOfBounds).
+    val floats = buffer.getBuffer(true).order(ByteOrder.LITTLE_ENDIAN).asFloatBuffer()
+    val count = floats.remaining()
+    // Relative reads honour `remaining()` from the buffer's current position, so a
+    // sub-view (position != 0, capacity > size) is read correctly, not from index 0.
+    val depths = DoubleArray(count) { floats.get().toDouble() }
+    // Shared drawing state (current/target, invalidate, Choreographer) is mutated
+    // only on the UI thread; `onFrame` reads/writes the same state there.
+    view.post {
+      if (isDisposed) return@post
+      imperativeDepth = true
+      syncTargets(depths)
+    }
   }
 
   /**
@@ -248,10 +259,15 @@ class HybridPerpDepthBars(val context: ThemedReactContext) : HybridPerpDepthBars
    */
   override fun setText(prices: Array<String>, sizes: Array<String>) {
     if (isDisposed) return
-    imperativeText = true
-    displayPrices = prices
-    displaySizes = sizes
-    view.invalidate()
+    // Mutate the drawn strings + invalidate on the UI thread; `drawTexts` reads
+    // them there. The args are read synchronously on the calling (JS) thread.
+    view.post {
+      if (isDisposed) return@post
+      imperativeText = true
+      displayPrices = prices
+      displaySizes = sizes
+      view.invalidate()
+    }
   }
 
   private fun syncTargets(depths: DoubleArray) {

package/android/src/main/java/com/margelo/nitro/perpdepthbar/HybridPerpSideRatio.kt

@@ -103,11 +103,17 @@ class HybridPerpSideRatio(val context: ThemedReactContext) : HybridPerpSideRatio
    */
   override fun setRatio(bidPercentage: Double, askPercentage: Double) {
     if (isDisposed) return
-    imperativeRatio = true
-    // Apply the args directly — do NOT route through the `bidPercentage`/
-    // `askPercentage` prop fields, which a later prop commit could overwrite with
-    // the static initial values.
-    applyRatio(bidPercentage, askPercentage)
+    // The args are read synchronously on the calling (JS) thread; the shared
+    // drawing state (currentSplit/targetSplit, invalidate, Choreographer) is
+    // mutated only on the UI thread, where `onFrame` reads/writes the same state.
+    view.post {
+      if (isDisposed) return@post
+      imperativeRatio = true
+      // Apply the args directly — do NOT route through the `bidPercentage`/
+      // `askPercentage` prop fields, which a later prop commit could overwrite with
+      // the static initial values.
+      applyRatio(bidPercentage, askPercentage)
+    }
   }
 
   override fun afterUpdate() {

package/ios/PerpColorParser.swift

@@ -61,11 +61,12 @@ enum PerpColorParser {
           let g = Double(parts[1]),
           let b = Double(parts[2]) else { return nil }
     let a = parts.count >= 4 ? (Double(parts[3]) ?? 1.0) : 1.0
+    // Clamp channels to 0...255 and alpha to 0...1 (matches Android's PerpColorParser).
     return UIColor(
-      red: CGFloat(r) / 255.0,
-      green: CGFloat(g) / 255.0,
-      blue: CGFloat(b) / 255.0,
-      alpha: CGFloat(a)
+      red: CGFloat(min(max(r, 0), 255)) / 255.0,
+      green: CGFloat(min(max(g, 0), 255)) / 255.0,
+      blue: CGFloat(min(max(b, 0), 255)) / 255.0,
+      alpha: CGFloat(min(max(a, 0), 1))
     )
   }
 }

package/lib/module/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { useCallback, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { callback, getHostComponent } from 'react-native-nitro-modules';
 import { jsx as _jsx } from "react/jsx-runtime";
 const PerpDepthBarsConfig = require('../nitrogen/generated/shared/json/PerpDepthBarsConfig.json');
@@ -22,9 +22,10 @@ export function PerpDepthBarsView({
   const stableOnRowPress = useCallback(rowIndex => {
     onRowPressRef.current?.(rowIndex);
   }, []);
+  const onRowPressCallback = useMemo(() => callback(stableOnRowPress), [stableOnRowPress]);
   return /*#__PURE__*/_jsx(PerpDepthBarsHost, {
     ...props,
-    onRowPress: onRowPress ? callback(stableOnRowPress) : undefined
+    onRowPress: onRowPress ? onRowPressCallback : undefined
   });
 }
 export const PerpSideRatioView = getHostComponent('PerpSideRatio', () => PerpSideRatioConfig);

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useRef","callback","getHostComponent","jsx","_jsx","PerpDepthBarsConfig","require","PerpSideRatioConfig","PerpDepthBarsHost","PerpDepthBarsView","onRowPress","props","onRowPressRef","current","stableOnRowPress","rowIndex","undefined","PerpSideRatioView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC3C,SAASC,QAAQ,EAAEC,gBAAgB,QAAQ,4BAA4B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAWxE,MAAMC,mBAAmB,GAAGC,OAAO,CAAC,4DAA4D,CAAC;AACjG,MAAMC,mBAAmB,GAAGD,OAAO,CAAC,4DAA4D,CAAC;AASjG,MAAME,iBAAiB,GAAGN,gBAAgB,CAGxC,eAAe,EAAE,MAAMG,mBAAmB,CAAC;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,iBAAiBA,CAAC;EAChCC,UAAU;EACV,GAAGC;AACe,CAAC,EAAE;EACrB,MAAMC,aAAa,GAAGZ,MAAM,CAACU,UAAU,CAAC;EACxCE,aAAa,CAACC,OAAO,GAAGH,UAAU;EAElC,MAAMI,gBAAgB,GAAGf,WAAW,CAAEgB,QAAgB,IAAK;IACzDH,aAAa,CAACC,OAAO,GAAGE,QAAQ,CAAC;EACnC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEX,IAAA,CAACI,iBAAiB;IAAA,GACZG,KAAK;IACTD,UAAU,EAAEA,UAAU,GAAGT,QAAQ,CAACa,gBAAgB,CAAC,GAAGE;EAAU,CACjE,CAAC;AAEN;AAEA,OAAO,MAAMC,iBAAiB,GAAGf,gBAAgB,CAG/C,eAAe,EAAE,MAAMK,mBAAmB,CAAC","ignoreList":[]}
+{"version":3,"names":["useCallback","useMemo","useRef","callback","getHostComponent","jsx","_jsx","PerpDepthBarsConfig","require","PerpSideRatioConfig","PerpDepthBarsHost","PerpDepthBarsView","onRowPress","props","onRowPressRef","current","stableOnRowPress","rowIndex","onRowPressCallback","undefined","PerpSideRatioView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAEpD,SAASC,QAAQ,EAAEC,gBAAgB,QAAQ,4BAA4B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAWxE,MAAMC,mBAAmB,GAAGC,OAAO,CAAC,4DAA4D,CAAC;AACjG,MAAMC,mBAAmB,GAAGD,OAAO,CAAC,4DAA4D,CAAC;AASjG,MAAME,iBAAiB,GAAGN,gBAAgB,CAGxC,eAAe,EAAE,MAAMG,mBAAmB,CAAC;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,iBAAiBA,CAAC;EAChCC,UAAU;EACV,GAAGC;AAC2B,CAAC,EAAE;EACjC,MAAMC,aAAa,GAAGZ,MAAM,CAACU,UAAU,CAAC;EACxCE,aAAa,CAACC,OAAO,GAAGH,UAAU;EAElC,MAAMI,gBAAgB,GAAGhB,WAAW,CAAEiB,QAAgB,IAAK;IACzDH,aAAa,CAACC,OAAO,GAAGE,QAAQ,CAAC;EACnC,CAAC,EAAE,EAAE,CAAC;EACN,MAAMC,kBAAkB,GAAGjB,OAAO,CAChC,MAAME,QAAQ,CAACa,gBAAgB,CAAC,EAChC,CAACA,gBAAgB,CACnB,CAAC;EAED,oBACEV,IAAA,CAACI,iBAAiB;IAAA,GACZG,KAAK;IACTD,UAAU,EAAEA,UAAU,GAAGM,kBAAkB,GAAGC;EAAU,CACzD,CAAC;AAEN;AAEA,OAAO,MAAMC,iBAAiB,GAAGhB,gBAAgB,CAG/C,eAAe,EAAE,MAAMK,mBAAmB,CAAC","ignoreList":[]}

package/lib/typescript/src/index.d.ts

@@ -1,3 +1,4 @@
+import { type ViewProps } from 'react-native';
 import type { PerpDepthBarsMethods, PerpDepthBarsProps } from './PerpDepthBars.nitro';
 import type { PerpSideRatioMethods, PerpSideRatioProps } from './PerpSideRatio.nitro';
 export type { PerpDepthBarsMethods, PerpDepthBarsProps, PerpSideRatioMethods, PerpSideRatioProps, };
@@ -7,6 +8,6 @@ export type { PerpDepthBarsMethods, PerpDepthBarsProps, PerpSideRatioMethods, Pe
  * we encapsulate that here (with a ref so the underlying callback stays
  * stable across re-renders) instead of leaking it to every call site.
  */
-export declare function PerpDepthBarsView({ onRowPress, ...props }: PerpDepthBarsProps): import("react/jsx-runtime").JSX.Element;
+export declare function PerpDepthBarsView({ onRowPress, ...props }: PerpDepthBarsProps & ViewProps): import("react/jsx-runtime").JSX.Element;
 export declare const PerpSideRatioView: import("react-native-nitro-modules").ReactNativeView<PerpSideRatioProps, PerpSideRatioMethods>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EACV,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAK/B,YAAY,EACV,oBAAoB,EACpB,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,GACnB,CAAC;AAOF;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAcpB;AAED,eAAO,MAAM,iBAAiB,gGAGe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EACV,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EACV,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAK/B,YAAY,EACV,oBAAoB,EACpB,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,GACnB,CAAC;AAOF;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,SAAS,2CAkBhC;AAED,eAAO,MAAM,iBAAiB,gGAGe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-perp-depth-bar",
-  "version": "3.0.53",
+  "version": "3.0.55",
   "description": "react-native-perp-depth-bar",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/index.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
+import { type ViewProps } from 'react-native';
 import { callback, getHostComponent } from 'react-native-nitro-modules';
 
 import type {
@@ -34,18 +35,22 @@ const PerpDepthBarsHost = getHostComponent<
 export function PerpDepthBarsView({
   onRowPress,
   ...props
-}: PerpDepthBarsProps) {
+}: PerpDepthBarsProps & ViewProps) {
   const onRowPressRef = useRef(onRowPress);
   onRowPressRef.current = onRowPress;
 
   const stableOnRowPress = useCallback((rowIndex: number) => {
     onRowPressRef.current?.(rowIndex);
   }, []);
+  const onRowPressCallback = useMemo(
+    () => callback(stableOnRowPress),
+    [stableOnRowPress],
+  );
 
   return (
     <PerpDepthBarsHost
       {...props}
-      onRowPress={onRowPress ? callback(stableOnRowPress) : undefined}
+      onRowPress={onRowPress ? onRowPressCallback : undefined}
     />
   );
 }