Skip to content

Commit edafeb2

Browse files
DonguapiDonguapi
authored
fix: use react class component (#8)
1 parent 9e7f700 commit edafeb2

File tree

8 files changed

+139
-120
lines changed

8 files changed

+139
-120
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,4 @@ node_modules/
3434
npm-debug.log
3535
package-lock.json
3636
yarn.lock
37+
lib

‎harmony/rnoh_signature_capture.har

-349 Bytes
Binary file not shown.

‎harmony/rnoh_signature_capture/BuildProfile.ets

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
1+
/**
2+
* Use these variables when you tailor your ArkTS code. They must be of the const type.
3+
*/
4+
export const HAR_VERSION = '0.4.11-0.0.2';
5+
export const BUILD_MODE_NAME = 'debug';
6+
export const DEBUG = true;
7+
export const TARGET_NAME = 'default';
8+
9+
/**
10+
* BuildProfile Class is used only for compatibility purposes.
11+
*/
112
export default class BuildProfile {
2-
static readonly HAR_VERSION = '0.4.12-0.0.1';
3-
static readonly BUILD_MODE_NAME = 'debug';
4-
static readonly DEBUG = true;
5-
static readonly TARGET_NAME = 'default';
13+
static readonly HAR_VERSION = HAR_VERSION;
14+
static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
15+
static readonly DEBUG = DEBUG;
16+
static readonly TARGET_NAME = TARGET_NAME;
617
}

‎harmony/rnoh_signature_capture/src/main/ets/SignatureCaptureArk.ets

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,16 @@ const prefix = 'data:image/png;base64,';
3939

4040
@Component
4141
export struct SignatureCaptureArkView {
42-
public static readonly NAME = RNC.SignatureCaptureArkView.NAME
42+
public static readonly NAME = RNC.RSSignatureArkView.NAME
4343
public ctx!: RNComponentContext
4444
public tag: number = 0;
4545
// canvas
4646
private setting: RenderingContextSettings = new RenderingContextSettings(true);
4747
private context2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting);
4848
sign = new SmoothSignature(this.context2D, {});
49-
@State private descriptorWrapper: RNC.SignatureCaptureArkView.DescriptorWrapper = {
50-
} as RNC.SignatureCaptureArkView.DescriptorWrapper
51-
private eventEmitter: RNC.SignatureCaptureArkView.EventEmitter | undefined = undefined
49+
@State private descriptorWrapper: RNC.RSSignatureArkView.DescriptorWrapper = {
50+
} as RNC.RSSignatureArkView.DescriptorWrapper
51+
private eventEmitter: RNC.RSSignatureArkView.EventEmitter | undefined = undefined
5252
private cleanUpCallbacks: (() => void)[] = []
5353
private logger!: RNOHLogger;
5454
private windowClass!: window.Window;
@@ -60,18 +60,18 @@ export struct SignatureCaptureArkView {
6060
// 初始化logger
6161
this.logger = this.ctx.logger.clone('SignatureCapture');
6262

63-
this.eventEmitter = new RNC.SignatureCaptureArkView.EventEmitter(this.ctx.rnInstance, this.tag)
63+
this.eventEmitter = new RNC.RSSignatureArkView.EventEmitter(this.ctx.rnInstance, this.tag)
6464

65-
this.onDescriptorWrapperChange(this.ctx.descriptorRegistry.findDescriptorWrapperByTag<RNC.SignatureCaptureArkView.DescriptorWrapper>(this.tag)!)
65+
this.onDescriptorWrapperChange(this.ctx.descriptorRegistry.findDescriptorWrapperByTag<RNC.RSSignatureArkView.DescriptorWrapper>(this.tag)!)
6666

6767
this.cleanUpCallbacks.push(this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag,
6868
(_descriptor, newDescriptorWrapper) => {
6969
this.logger.info('signature capture descriptor change!');
70-
this.onDescriptorWrapperChange(newDescriptorWrapper! as RNC.SignatureCaptureArkView.DescriptorWrapper)
70+
this.onDescriptorWrapperChange(newDescriptorWrapper! as RNC.RSSignatureArkView.DescriptorWrapper)
7171
}
7272
));
7373

74-
const cmdReceiver = new RNC.SignatureCaptureArkView.CommandReceiver(this.ctx.componentCommandReceiver, this.tag);
74+
const cmdReceiver = new RNC.RSSignatureArkView.CommandReceiver(this.ctx.componentCommandReceiver, this.tag);
7575

7676
this.cleanUpCallbacks.push(cmdReceiver.subscribe("saveImage", (argv) => {
7777
this.logger.info('==== command saveImage ====' + JSON.stringify(argv));
@@ -127,7 +127,7 @@ export struct SignatureCaptureArkView {
127127
this.sign.color = this.descriptorWrapper.props.strokeColor.toRGBAString();
128128
}
129129

130-
private onDescriptorWrapperChange(descriptorWrapper: RNC.SignatureCaptureArkView.DescriptorWrapper) {
130+
private onDescriptorWrapperChange(descriptorWrapper: RNC.RSSignatureArkView.DescriptorWrapper) {
131131
this.logger.info('descriptor change!');
132132
this.descriptorWrapper = descriptorWrapper;
133133
this.setProps();
@@ -269,21 +269,19 @@ export struct SignatureCaptureArkView {
269269
}
270270

271271
build() {
272-
Column() {
273-
RNViewBase({ ctx: this.ctx, tag: this.tag }) {
274-
Canvas(this.context2D)
275-
.onReady(() => {
276-
this.canvasReady();
277-
}).onTouch((event: TouchEvent) => {
278-
// touch事件event获取坐标，绘制线条
279-
this.onDraw(event);
280-
})
281-
.width(this.descriptorWrapper.width)
282-
.height(this.descriptorWrapper.height)
283-
.backgroundColor(this.descriptorWrapper.backgroundColor)
284-
this.buildTitleLabel();
285-
this.buildButton();
286-
}
272+
RNViewBase({ ctx: this.ctx, tag: this.tag }) {
273+
Canvas(this.context2D)
274+
.onReady(() => {
275+
this.canvasReady();
276+
}).onTouch((event: TouchEvent) => {
277+
// touch事件event获取坐标，绘制线条
278+
this.onDraw(event);
279+
})
280+
.width(this.descriptorWrapper.width)
281+
.height(this.descriptorWrapper.height)
282+
.backgroundColor(this.descriptorWrapper.backgroundColor)
283+
this.buildTitleLabel();
284+
this.buildButton();
287285
}
288286
}
289287
}

‎harmony/rnoh_signature_capture/src/main/ets/SignatureCapturePackage.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export class SignatureCapturePackage extends RNPackage {
3131

3232
createDescriptorWrapperFactoryByDescriptorType(ctx: DescriptorWrapperFactoryByDescriptorTypeCtx): DescriptorWrapperFactoryByDescriptorType {
3333
return {
34-
[RNC.SignatureCaptureArkView.NAME]: (ctx) => new RNC.SignatureCaptureArkView.DescriptorWrapper(ctx.descriptor)
34+
[RNC.RSSignatureArkView.NAME]: (ctx) => new RNC.RSSignatureArkView.DescriptorWrapper(ctx.descriptor)
3535
}
3636
}
3737
}

‎src/SignatureCapture.harmony.tsx

Lines changed: 98 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,14 @@
1-
import React, { useRef } from "react";
2-
import {
3-
NativeSyntheticEvent,
4-
ViewStyle,
5-
StyleProp,
1+
import React from "react";
2+
import type { ProcessedColorValue, StyleProp, ViewProps } from "react-native";
3+
var ReactNative = require('react-native');
4+
var {
65
UIManager,
7-
findNodeHandle,
8-
ProcessedColorValue,
9-
processColor,
10-
} from "react-native";
11-
import SignatureCaptureNativeComponent from './SignatureCaptureNativeComponent';
12-
13-
export type SignatureComponentRef = {
14-
saveImage: () => void
15-
resetImage: () => void
16-
};
17-
18-
const SignatureCaptureHarmonyComponent = React.forwardRef<
19-
SignatureComponentRef,
20-
{
6+
DeviceEventEmitter
7+
} = ReactNative;
8+
9+
import RSSignatureView from './SignatureCaptureNativeComponent';
10+
11+
type SignProps = {
2112
backgroundColor?: ProcessedColorValue;
2213
onSaveEvent?: (ev: {pathName: string, encoded: string}) => void
2314
onDragEvent?: (ev: {dragged: boolean}) => void
@@ -29,77 +20,95 @@ const SignatureCaptureHarmonyComponent = React.forwardRef<
2920
showBorder?:boolean
3021
viewMode?: 'portrait' | 'landscape'
3122
maxSize?: number
32-
styles?: StyleProp<ViewStyle>
33-
}
34-
>(( props, ref) => {
35-
const nativeRef = useRef<any>(null);
36-
37-
React.useImperativeHandle(
38-
ref,
39-
() => ({
40-
saveImage() {
41-
if (nativeRef?.current) {
42-
UIManager.dispatchViewManagerCommand(
43-
findNodeHandle(nativeRef.current),
44-
"saveImage",
45-
[]
46-
);
23+
style?: StyleProp<ViewProps>
24+
}
25+
26+
class SignatureCapture extends React.Component<SignProps> {
27+
28+
private subscriptions: Array<{remove: () => void}> = [];
29+
30+
constructor(props: SignProps) {
31+
super(props);
32+
this.onChange = this.onChange.bind(this);
33+
}
34+
35+
borderStyle = { borderWidth: 1, borderStyle: 'dashed', borderColor: '#ccc' }
36+
37+
onChange(event: any) {
38+
39+
if(event.nativeEvent.pathName){
40+
41+
if (!this.props.onSaveEvent) {
42+
return;
43+
}
44+
this.props.onSaveEvent({
45+
pathName: event.nativeEvent.pathName,
46+
encoded: event.nativeEvent.encoded,
47+
});
4748
}
48-
},
49-
resetImage() {
50-
if (nativeRef?.current) {
51-
UIManager.dispatchViewManagerCommand(
52-
findNodeHandle(nativeRef.current),
53-
"resetImage",
54-
[]
55-
);
49+
50+
if(event.nativeEvent.dragged){
51+
if (!this.props.onDragEvent) {
52+
return;
53+
}
54+
this.props.onDragEvent({
55+
dragged: event.nativeEvent.dragged
56+
});
5657
}
57-
},
58-
}),
59-
[]
60-
);
61-
62-
const borderStyle: StyleProp<ViewStyle> = {
63-
borderWidth: 1,
64-
borderStyle: 'dashed',
65-
borderColor: '#ccc'
66-
}
67-
68-
const onChange = (ev: NativeSyntheticEvent<{pathName: string, encoded: string} | {dragged: boolean}>) => {
69-
const nativeEvent = ev.nativeEvent;
70-
71-
if ('pathName' in nativeEvent) {
72-
if (!props.onSaveEvent) { return; }
73-
nativeEvent.pathName && props.onSaveEvent({
74-
pathName: nativeEvent.pathName,
75-
encoded: nativeEvent.encoded
76-
})
7758
}
78-
if ('dragged' in nativeEvent) {
79-
if (!props.onDragEvent) { return; }
80-
nativeEvent.dragged && props.onDragEvent({
81-
dragged: nativeEvent.dragged
82-
})
59+
60+
componentDidMount() {
61+
if (this.props.onSaveEvent) {
62+
let sub = DeviceEventEmitter.addListener(
63+
'onSaveEvent',
64+
this.props.onSaveEvent
65+
);
66+
this.subscriptions.push(sub);
67+
}
68+
69+
if (this.props.onDragEvent) {
70+
let sub = DeviceEventEmitter.addListener(
71+
'onDragEvent',
72+
this.props.onDragEvent
73+
);
74+
this.subscriptions.push(sub);
75+
}
76+
}
77+
78+
componentWillUnmount() {
79+
this.subscriptions.forEach((sub: any) => sub.remove());
80+
this.subscriptions = [];
81+
}
82+
83+
render() {
84+
let borderStyle = this.props.showBorder ? this.borderStyle : {};
85+
let finalStyle = Array.isArray(this.props.style) ? [...this.props.style, borderStyle] : [this.props.style, borderStyle];
86+
87+
const processColorProps = {
88+
...this.props, backgroundColor: ReactNative.processColor(this.props.backgroundColor),
89+
strokeColor: ReactNative.processColor(this.props.strokeColor), style: finalStyle
90+
}
91+
return (
92+
<RSSignatureView {...processColorProps} onChange={this.onChange} />
93+
);
94+
}
95+
96+
saveImage() {
97+
UIManager.dispatchViewManagerCommand(
98+
ReactNative.findNodeHandle(this),
99+
'saveImage',
100+
[],
101+
);
83102
}
84-
}
85-
86-
const processedStrokeColor = processColor(props.strokeColor ?? 'black');
87-
const processedBackgroundColor = processColor(props.backgroundColor);
88-
89-
90-
const colorHandleProps = {
91-
...props, strokeColor: processedStrokeColor, backgroundColor: processedBackgroundColor
92-
}
93-
94-
95-
return (
96-
<SignatureCaptureNativeComponent
97-
ref={nativeRef}
98-
style={[props.styles, props.showBorder ? borderStyle : {}]}
99-
onChange={onChange}
100-
{...colorHandleProps}
101-
/>
102-
);
103-
})
104-
105-
export default SignatureCaptureHarmonyComponent;
103+
104+
resetImage() {
105+
UIManager.dispatchViewManagerCommand(
106+
ReactNative.findNodeHandle(this),
107+
'resetImage',
108+
[],
109+
);
110+
}
111+
}
112+
113+
114+
export default SignatureCapture;

‎src/SignatureCaptureNativeComponent.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,5 +54,5 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
5454
* codegen restriction: the result of codegenNativeComponent must be a default export
5555
*/
5656
export default codegenNativeComponent<SignatureCaptureArkViewNativeProps>(
57-
'SignatureCaptureArkView'
57+
'RSSignatureArkView'
5858
) as HostComponent<SignatureCaptureArkViewNativeProps>

‎src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import SignatureCapture from 'react-native-signature-capture';
22
import SignatureCaputreHarmony from './SignatureCapture.harmony';
33
import { Platform } from 'react-native';
44

5-
const isIosAndroid = (() => Platform.OS === 'ios' || Platform.OS === 'android')();
5+
const isIosAndroid = Platform.OS === 'ios' || Platform.OS === 'android';
66

77
const exportComp = isIosAndroid ? SignatureCapture : SignatureCaputreHarmony;
88

0 commit comments

Comments
 (0)