@shopify/react-native-skia 1.11.5 → 1.11.7
Sign up to get free protection for your applications and to get access to all the features.
- package/android/CMakeLists.txt +0 -1
- package/cpp/api/JsiSkParagraph.h +1 -3
- package/cpp/api/recorder/Convertor.h +19 -17
- package/cpp/api/recorder/Drawings.h +7 -10
- package/cpp/jsi/ViewProperty.h +1 -3
- package/lib/commonjs/animation/functions/interpolateColors.d.ts +1 -1
- package/lib/commonjs/dom/nodes/datatypes/Gradient.d.ts +2 -2
- package/lib/commonjs/dom/types/NodeType.js +8 -0
- package/lib/commonjs/dom/types/NodeType.js.map +1 -1
- package/lib/commonjs/external/reanimated/buffers.d.ts +1 -1
- package/lib/commonjs/renderer/Canvas.d.ts +3 -2
- package/lib/commonjs/renderer/Canvas.js +4 -2
- package/lib/commonjs/renderer/Canvas.js.map +1 -1
- package/lib/commonjs/renderer/__tests__/setup.d.ts +1 -1
- package/lib/commonjs/skia/types/Image/ColorType.js +20 -2
- package/lib/commonjs/skia/types/Image/ColorType.js.map +1 -1
- package/lib/commonjs/skia/types/Image/ColorType.web.js +18 -2
- package/lib/commonjs/skia/types/Image/ColorType.web.js.map +1 -1
- package/lib/commonjs/skia/types/ImageFilter/ImageFilter.js +14 -0
- package/lib/commonjs/skia/types/ImageFilter/ImageFilter.js.map +1 -1
- package/lib/commonjs/skia/types/MaskFilter.js +5 -2
- package/lib/commonjs/skia/types/MaskFilter.js.map +1 -1
- package/lib/commonjs/skia/types/Paint/BlendMode.js +31 -2
- package/lib/commonjs/skia/types/Paint/BlendMode.js.map +1 -1
- package/lib/commonjs/skia/types/Paragraph/ParagraphBuilder.js +14 -0
- package/lib/commonjs/skia/types/Paragraph/ParagraphBuilder.js.map +1 -1
- package/lib/commonjs/skia/types/Path/Path.js +4 -0
- package/lib/commonjs/skia/types/Path/Path.js.map +1 -1
- package/lib/commonjs/skia/web/JsiSkCanvas.d.ts +1 -1
- package/lib/commonjs/skia/web/JsiSkImage.d.ts +2 -2
- package/lib/commonjs/skia/web/JsiSkPaint.d.ts +1 -1
- package/lib/commonjs/skia/web/JsiSkPicture.d.ts +1 -1
- package/lib/commonjs/skia/web/JsiSkPoint.d.ts +1 -1
- package/lib/commonjs/skia/web/JsiSkRRect.d.ts +1 -1
- package/lib/commonjs/skia/web/JsiSkRSXform.d.ts +1 -1
- package/lib/commonjs/skia/web/JsiSkRect.d.ts +1 -1
- package/lib/commonjs/sksg/Container.d.ts +1 -4
- package/lib/commonjs/sksg/Container.js +8 -9
- package/lib/commonjs/sksg/Container.js.map +1 -1
- package/lib/commonjs/sksg/Recorder/Core.js +2 -0
- package/lib/commonjs/sksg/Recorder/Core.js.map +1 -1
- package/lib/commonjs/specs/NativeSkiaModule.web.d.ts +6 -0
- package/lib/commonjs/specs/NativeSkiaModule.web.js +33 -0
- package/lib/commonjs/specs/NativeSkiaModule.web.js.map +1 -1
- package/lib/commonjs/specs/SkiaPictureViewNativeComponent.web.d.ts +9 -0
- package/lib/commonjs/specs/SkiaPictureViewNativeComponent.web.js +32 -0
- package/lib/commonjs/specs/SkiaPictureViewNativeComponent.web.js.map +1 -0
- package/lib/commonjs/views/types.d.ts +1 -0
- package/lib/commonjs/views/types.js.map +1 -1
- package/lib/commonjs/web/LoadSkiaWeb.js +1 -2
- package/lib/commonjs/web/LoadSkiaWeb.js.map +1 -1
- package/lib/module/animation/functions/interpolateColors.d.ts +1 -1
- package/lib/module/dom/nodes/datatypes/Gradient.d.ts +2 -2
- package/lib/module/dom/types/NodeType.js +8 -0
- package/lib/module/dom/types/NodeType.js.map +1 -1
- package/lib/module/external/reanimated/buffers.d.ts +1 -1
- package/lib/module/renderer/Canvas.d.ts +3 -2
- package/lib/module/renderer/Canvas.js +1 -1
- package/lib/module/renderer/Canvas.js.map +1 -1
- package/lib/module/renderer/__tests__/setup.d.ts +1 -1
- package/lib/module/skia/types/Image/ColorType.js +20 -2
- package/lib/module/skia/types/Image/ColorType.js.map +1 -1
- package/lib/module/skia/types/Image/ColorType.web.js +18 -2
- package/lib/module/skia/types/Image/ColorType.web.js.map +1 -1
- package/lib/module/skia/types/ImageFilter/ImageFilter.js +14 -0
- package/lib/module/skia/types/ImageFilter/ImageFilter.js.map +1 -1
- package/lib/module/skia/types/MaskFilter.js +5 -2
- package/lib/module/skia/types/MaskFilter.js.map +1 -1
- package/lib/module/skia/types/Paint/BlendMode.js +31 -2
- package/lib/module/skia/types/Paint/BlendMode.js.map +1 -1
- package/lib/module/skia/types/Paragraph/ParagraphBuilder.js +14 -0
- package/lib/module/skia/types/Paragraph/ParagraphBuilder.js.map +1 -1
- package/lib/module/skia/types/Path/Path.js +4 -0
- package/lib/module/skia/types/Path/Path.js.map +1 -1
- package/lib/module/skia/web/JsiSkCanvas.d.ts +1 -1
- package/lib/module/skia/web/JsiSkImage.d.ts +2 -2
- package/lib/module/skia/web/JsiSkPaint.d.ts +1 -1
- package/lib/module/skia/web/JsiSkPicture.d.ts +1 -1
- package/lib/module/skia/web/JsiSkPoint.d.ts +1 -1
- package/lib/module/skia/web/JsiSkRRect.d.ts +1 -1
- package/lib/module/skia/web/JsiSkRSXform.d.ts +1 -1
- package/lib/module/skia/web/JsiSkRect.d.ts +1 -1
- package/lib/module/sksg/Container.d.ts +1 -4
- package/lib/module/sksg/Container.js +8 -9
- package/lib/module/sksg/Container.js.map +1 -1
- package/lib/module/sksg/Recorder/Core.js +2 -0
- package/lib/module/sksg/Recorder/Core.js.map +1 -1
- package/lib/module/specs/NativeSkiaModule.web.d.ts +6 -0
- package/lib/module/specs/NativeSkiaModule.web.js +30 -1
- package/lib/module/specs/NativeSkiaModule.web.js.map +1 -1
- package/lib/module/specs/SkiaPictureViewNativeComponent.web.d.ts +9 -0
- package/lib/module/specs/SkiaPictureViewNativeComponent.web.js +26 -0
- package/lib/module/specs/SkiaPictureViewNativeComponent.web.js.map +1 -0
- package/lib/module/views/types.d.ts +1 -0
- package/lib/module/views/types.js.map +1 -1
- package/lib/typescript/lib/commonjs/animation/functions/interpolateColors.d.ts +1 -1
- package/lib/typescript/lib/commonjs/renderer/Canvas.d.ts +2 -3
- package/lib/typescript/lib/commonjs/renderer/components/image/ImageShader.d.ts +1 -1
- package/lib/typescript/lib/commonjs/skia/web/JsiSkColor.d.ts +1 -1
- package/lib/typescript/lib/commonjs/skia/web/JsiSkia.d.ts +1 -1
- package/lib/typescript/lib/commonjs/specs/NativeSkiaModule.web.d.ts +1 -0
- package/lib/typescript/lib/commonjs/specs/SkiaPictureViewNativeComponent.web.d.ts +10 -0
- package/lib/typescript/lib/module/animation/functions/interpolateColors.d.ts +1 -1
- package/lib/typescript/lib/module/mock/index.d.ts +2 -2
- package/lib/typescript/lib/module/renderer/Canvas.d.ts +3 -2
- package/lib/typescript/lib/module/renderer/components/image/ImageShader.d.ts +1 -1
- package/lib/typescript/lib/module/skia/Skia.web.d.ts +1 -1
- package/lib/typescript/lib/module/skia/web/JsiSkColor.d.ts +1 -1
- package/lib/typescript/lib/module/skia/web/JsiSkia.d.ts +1 -1
- package/lib/typescript/lib/module/specs/NativeSkiaModule.web.d.ts +1 -0
- package/lib/typescript/lib/module/specs/SkiaPictureViewNativeComponent.web.d.ts +9 -0
- package/lib/typescript/src/animation/functions/interpolateColors.d.ts +1 -1
- package/lib/typescript/src/dom/nodes/datatypes/Gradient.d.ts +2 -2
- package/lib/typescript/src/external/reanimated/buffers.d.ts +1 -1
- package/lib/typescript/src/renderer/Canvas.d.ts +3 -2
- package/lib/typescript/src/renderer/__tests__/setup.d.ts +1 -1
- package/lib/typescript/src/skia/web/JsiSkCanvas.d.ts +1 -1
- package/lib/typescript/src/skia/web/JsiSkImage.d.ts +2 -2
- package/lib/typescript/src/skia/web/JsiSkPaint.d.ts +1 -1
- package/lib/typescript/src/skia/web/JsiSkPicture.d.ts +1 -1
- package/lib/typescript/src/skia/web/JsiSkPoint.d.ts +1 -1
- package/lib/typescript/src/skia/web/JsiSkRRect.d.ts +1 -1
- package/lib/typescript/src/skia/web/JsiSkRSXform.d.ts +1 -1
- package/lib/typescript/src/skia/web/JsiSkRect.d.ts +1 -1
- package/lib/typescript/src/sksg/Container.d.ts +1 -4
- package/lib/typescript/src/specs/NativeSkiaModule.web.d.ts +6 -0
- package/lib/typescript/src/specs/SkiaPictureViewNativeComponent.web.d.ts +9 -0
- package/lib/typescript/src/views/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/renderer/Canvas.tsx +1 -1
- package/src/sksg/Container.ts +7 -12
- package/src/specs/NativeSkiaModule.web.ts +38 -0
- package/src/specs/SkiaPictureViewNativeComponent.web.ts +39 -0
- package/src/views/types.ts +1 -0
- package/cpp/jsi/JsiValue.cpp +0 -345
- package/cpp/jsi/JsiValue.h +0 -222
- package/lib/commonjs/renderer/Canvas.web.d.ts +0 -11
- package/lib/commonjs/renderer/Canvas.web.js +0 -112
- package/lib/commonjs/renderer/Canvas.web.js.map +0 -1
- package/lib/module/renderer/Canvas.web.d.ts +0 -11
- package/lib/module/renderer/Canvas.web.js +0 -105
- package/lib/module/renderer/Canvas.web.js.map +0 -1
- package/lib/typescript/lib/commonjs/renderer/Canvas.web.d.ts +0 -2
- package/lib/typescript/lib/module/renderer/Canvas.web.d.ts +0 -2
- package/lib/typescript/src/renderer/Canvas.web.d.ts +0 -11
- package/src/renderer/Canvas.web.tsx +0 -134
package/cpp/jsi/JsiValue.h
DELETED
@@ -1,222 +0,0 @@
|
|
1
|
-
#pragma once
|
2
|
-
|
3
|
-
#include <jsi/jsi.h>
|
4
|
-
|
5
|
-
#include <memory>
|
6
|
-
#include <string>
|
7
|
-
#include <unordered_map>
|
8
|
-
#include <utility>
|
9
|
-
#include <vector>
|
10
|
-
|
11
|
-
namespace RNJsi {
|
12
|
-
|
13
|
-
namespace jsi = facebook::jsi;
|
14
|
-
|
15
|
-
enum struct PropType {
|
16
|
-
Undefined = 0,
|
17
|
-
Null = 1, // Keep undefined / null constant so that we can do checks faster
|
18
|
-
Bool = 2,
|
19
|
-
Number = 3,
|
20
|
-
String = 4,
|
21
|
-
Object = 5,
|
22
|
-
HostObject = 6,
|
23
|
-
HostFunction = 7,
|
24
|
-
Array = 8
|
25
|
-
};
|
26
|
-
|
27
|
-
using PropId = const char *;
|
28
|
-
|
29
|
-
class JsiPropId {
|
30
|
-
public:
|
31
|
-
static const char *get(const std::string &name) { return _get(name); }
|
32
|
-
|
33
|
-
static const char *get(const std::string &&name) {
|
34
|
-
return _get(std::move(name));
|
35
|
-
}
|
36
|
-
|
37
|
-
private:
|
38
|
-
static const char *_get(const std::string &name) {
|
39
|
-
if (_impls().count(name) == 0) {
|
40
|
-
// Alloc string
|
41
|
-
char *impl = new char[name.size() + 1];
|
42
|
-
strncpy(impl, name.c_str(), name.size() + 1);
|
43
|
-
_impls().emplace(name, impl);
|
44
|
-
}
|
45
|
-
return _impls().at(name);
|
46
|
-
}
|
47
|
-
|
48
|
-
static std::unordered_map<std::string, PropId> &_impls() {
|
49
|
-
static std::unordered_map<std::string, PropId> impls;
|
50
|
-
return impls;
|
51
|
-
}
|
52
|
-
};
|
53
|
-
|
54
|
-
/**
|
55
|
-
This is a class that deep copies values from JS to C++.
|
56
|
-
*/
|
57
|
-
class JsiValue {
|
58
|
-
public:
|
59
|
-
/**
|
60
|
-
Default constructor for an empty JsiValue
|
61
|
-
*/
|
62
|
-
JsiValue();
|
63
|
-
|
64
|
-
/**
|
65
|
-
Constructs an instance of the JsiValue object with a current value
|
66
|
-
*/
|
67
|
-
JsiValue(jsi::Runtime &runtime, const jsi::Value &value);
|
68
|
-
|
69
|
-
/**
|
70
|
-
Updates the current value from the Javascript value. This function will
|
71
|
-
perform a deep copy of the javascript value.
|
72
|
-
*/
|
73
|
-
void setCurrent(jsi::Runtime &runtime, const jsi::Value &value);
|
74
|
-
|
75
|
-
/**
|
76
|
-
Returns the type of value contained in this JsiValue
|
77
|
-
*/
|
78
|
-
PropType getType() const { return _type; }
|
79
|
-
|
80
|
-
/**
|
81
|
-
Returns true if the value is undefined or null.
|
82
|
-
*/
|
83
|
-
bool isUndefinedOrNull() const { return _type <= PropType::Null; }
|
84
|
-
|
85
|
-
/**
|
86
|
-
Returns true if the value is undefined.
|
87
|
-
*/
|
88
|
-
bool isUndefined() const { return _type == PropType::Undefined; }
|
89
|
-
|
90
|
-
/**
|
91
|
-
Returns true if the value is null.
|
92
|
-
*/
|
93
|
-
bool isNull() const { return _type == PropType::Null; }
|
94
|
-
|
95
|
-
/**
|
96
|
-
Returns the bool value. Requires that the underlying type is bool
|
97
|
-
*/
|
98
|
-
bool getAsBool() const;
|
99
|
-
|
100
|
-
/**
|
101
|
-
Returns the numeric value. Requires that the underlying type is number
|
102
|
-
*/
|
103
|
-
double getAsNumber() const;
|
104
|
-
|
105
|
-
/**
|
106
|
-
Returns the string value. Requires that the underlying type is string
|
107
|
-
*/
|
108
|
-
const std::string &getAsString() const;
|
109
|
-
|
110
|
-
/**
|
111
|
-
Returns the array value. Requires that the underlying type is array
|
112
|
-
*/
|
113
|
-
const std::vector<JsiValue> &getAsArray() const;
|
114
|
-
|
115
|
-
/**
|
116
|
-
Returns an inner value by name. Requires that the underlying type is Object
|
117
|
-
*/
|
118
|
-
const JsiValue &getValue(PropId name) const;
|
119
|
-
|
120
|
-
/**
|
121
|
-
Returns true if the underlying type is Object and the property name exists.
|
122
|
-
*/
|
123
|
-
bool hasValue(PropId name) const;
|
124
|
-
|
125
|
-
/**
|
126
|
-
Returns the names of the properties stored in this value
|
127
|
-
*/
|
128
|
-
std::vector<PropId> getKeys() const;
|
129
|
-
|
130
|
-
/**
|
131
|
-
Returns the host object value. Requires that the underlying type is Host
|
132
|
-
Object
|
133
|
-
*/
|
134
|
-
std::shared_ptr<jsi::HostObject> getAsHostObject() const;
|
135
|
-
|
136
|
-
/**
|
137
|
-
Returns a dynamic cast of the host object value. Requires that the underlying
|
138
|
-
type is Host Object
|
139
|
-
*/
|
140
|
-
template <typename T> std::shared_ptr<T> getAs() const {
|
141
|
-
if (_type != PropType::HostObject) {
|
142
|
-
throw std::runtime_error("Expected type host object, got " +
|
143
|
-
getTypeAsString(_type));
|
144
|
-
}
|
145
|
-
return std::dynamic_pointer_cast<T>(_hostObject);
|
146
|
-
}
|
147
|
-
|
148
|
-
/**
|
149
|
-
Returns the host function. Requires that the type is HostFunction
|
150
|
-
*/
|
151
|
-
jsi::HostFunctionType getAsHostFunction() const;
|
152
|
-
|
153
|
-
/**
|
154
|
-
Returns a callable HostFunction representing the undderlying js function.
|
155
|
-
Requires that the type is Function
|
156
|
-
*/
|
157
|
-
const jsi::HostFunctionType getAsFunction() const;
|
158
|
-
|
159
|
-
/**
|
160
|
-
Returns a string representation of the value
|
161
|
-
*/
|
162
|
-
std::string asString() const;
|
163
|
-
|
164
|
-
/**
|
165
|
-
Converts the underlying value back to a JS value
|
166
|
-
*/
|
167
|
-
jsi::Value getAsJsiValue(jsi::Runtime &runtime) const;
|
168
|
-
|
169
|
-
/**
|
170
|
-
Returns a string representing the type.
|
171
|
-
*/
|
172
|
-
static std::string getTypeAsString(PropType type);
|
173
|
-
|
174
|
-
/**
|
175
|
-
Implements the equals operator
|
176
|
-
*/
|
177
|
-
bool operator==(const JsiValue &other) const;
|
178
|
-
|
179
|
-
/**
|
180
|
-
Implements the inequals operator
|
181
|
-
*/
|
182
|
-
bool operator!=(const JsiValue &other) const;
|
183
|
-
|
184
|
-
protected:
|
185
|
-
const std::unordered_map<PropId, JsiValue> &getProps() const {
|
186
|
-
return _props;
|
187
|
-
}
|
188
|
-
|
189
|
-
bool boolValue() const { return _boolValue; }
|
190
|
-
double numberValue() const { return _numberValue; }
|
191
|
-
std::string stringValue() const { return _stringValue; }
|
192
|
-
std::shared_ptr<jsi::HostObject> hostObject() const { return _hostObject; }
|
193
|
-
jsi::HostFunctionType hostFunction() const { return _hostFunction; }
|
194
|
-
std::vector<JsiValue> array() const { return _array; }
|
195
|
-
std::unordered_map<PropId, JsiValue> props() const { return _props; }
|
196
|
-
const std::vector<PropId> &keysCache() const { return _keysCache; }
|
197
|
-
|
198
|
-
private:
|
199
|
-
void setObject(jsi::Runtime &runtime, const jsi::Value &value);
|
200
|
-
jsi::Object getObject(jsi::Runtime &runtime) const;
|
201
|
-
|
202
|
-
void setFunction(jsi::Runtime &runtime, const jsi::Value &value);
|
203
|
-
jsi::Object getHostFunction(jsi::Runtime &runtime) const;
|
204
|
-
|
205
|
-
void setArray(jsi::Runtime &runtime, const jsi::Object &obj);
|
206
|
-
jsi::Array getArray(jsi::Runtime &runtime) const;
|
207
|
-
|
208
|
-
void setHostObject(jsi::Runtime &runtime, const jsi::Object &obj);
|
209
|
-
jsi::Object getHostObject(jsi::Runtime &runtime) const;
|
210
|
-
|
211
|
-
PropType _type = PropType::Undefined;
|
212
|
-
bool _boolValue;
|
213
|
-
double _numberValue;
|
214
|
-
std::string _stringValue = "";
|
215
|
-
std::shared_ptr<jsi::HostObject> _hostObject;
|
216
|
-
jsi::HostFunctionType _hostFunction;
|
217
|
-
std::vector<JsiValue> _array;
|
218
|
-
std::unordered_map<PropId, JsiValue> _props;
|
219
|
-
std::vector<PropId> _keysCache;
|
220
|
-
};
|
221
|
-
|
222
|
-
} // namespace RNJsi
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import type { ViewProps } from "react-native";
|
3
|
-
import type { SharedValue } from "react-native-reanimated";
|
4
|
-
import type { SkSize } from "../skia/types";
|
5
|
-
export interface CanvasProps extends ViewProps {
|
6
|
-
debug?: boolean;
|
7
|
-
opaque?: boolean;
|
8
|
-
onSize?: SharedValue<SkSize>;
|
9
|
-
mode?: "continuous" | "default";
|
10
|
-
}
|
11
|
-
export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;
|
@@ -1,112 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.Canvas = void 0;
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
8
|
-
var _SkiaViewNativeId = require("../views/SkiaViewNativeId");
|
9
|
-
var _Reconciler = require("../sksg/Reconciler");
|
10
|
-
var _skia = require("../skia");
|
11
|
-
var _SkiaPictureView = require("../views/SkiaPictureView.web");
|
12
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
13
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
14
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
15
|
-
// TODO: no need to go through the JS thread for this
|
16
|
-
const useOnSizeEvent = (resultValue, onLayout) => {
|
17
|
-
return (0, _react.useCallback)(event => {
|
18
|
-
if (onLayout) {
|
19
|
-
onLayout(event);
|
20
|
-
}
|
21
|
-
const {
|
22
|
-
width,
|
23
|
-
height
|
24
|
-
} = event.nativeEvent.layout;
|
25
|
-
if (resultValue) {
|
26
|
-
resultValue.value = {
|
27
|
-
width,
|
28
|
-
height
|
29
|
-
};
|
30
|
-
}
|
31
|
-
}, [onLayout, resultValue]);
|
32
|
-
};
|
33
|
-
const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)(({
|
34
|
-
mode,
|
35
|
-
debug,
|
36
|
-
opaque,
|
37
|
-
children,
|
38
|
-
onSize,
|
39
|
-
onLayout: _onLayout,
|
40
|
-
...viewProps
|
41
|
-
}, ref) => {
|
42
|
-
const viewRef = (0, _react.useRef)(null);
|
43
|
-
const rafId = (0, _react.useRef)(null);
|
44
|
-
const onLayout = useOnSizeEvent(onSize, _onLayout);
|
45
|
-
// Native ID
|
46
|
-
const nativeId = (0, _react.useMemo)(() => {
|
47
|
-
return _SkiaViewNativeId.SkiaViewNativeId.current++;
|
48
|
-
}, []);
|
49
|
-
|
50
|
-
// Root
|
51
|
-
const root = (0, _react.useMemo)(() => new _Reconciler.SkiaSGRoot(_skia.Skia), []);
|
52
|
-
|
53
|
-
// Render effects
|
54
|
-
(0, _react.useEffect)(() => {
|
55
|
-
root.render(children);
|
56
|
-
if (viewRef.current) {
|
57
|
-
viewRef.current.setPicture(root.getPicture());
|
58
|
-
}
|
59
|
-
}, [children, root]);
|
60
|
-
(0, _react.useEffect)(() => {
|
61
|
-
return () => {
|
62
|
-
root.unmount();
|
63
|
-
};
|
64
|
-
}, [root]);
|
65
|
-
const requestRedraw = (0, _react.useCallback)(() => {
|
66
|
-
rafId.current = requestAnimationFrame(() => {
|
67
|
-
root.render(children);
|
68
|
-
if (viewRef.current) {
|
69
|
-
viewRef.current.setPicture(root.getPicture());
|
70
|
-
}
|
71
|
-
if (mode === "continuous") {
|
72
|
-
requestRedraw();
|
73
|
-
}
|
74
|
-
});
|
75
|
-
}, [children, mode, root]);
|
76
|
-
(0, _react.useEffect)(() => {
|
77
|
-
if (mode === "continuous") {
|
78
|
-
requestRedraw();
|
79
|
-
}
|
80
|
-
return () => {
|
81
|
-
if (rafId.current !== null) {
|
82
|
-
cancelAnimationFrame(rafId.current);
|
83
|
-
}
|
84
|
-
};
|
85
|
-
}, [mode, requestRedraw]);
|
86
|
-
|
87
|
-
// Component methods
|
88
|
-
(0, _react.useImperativeHandle)(ref, () => ({
|
89
|
-
makeImageSnapshot: rect => {
|
90
|
-
return SkiaViewApi.makeImageSnapshot(nativeId, rect);
|
91
|
-
},
|
92
|
-
makeImageSnapshotAsync: rect => {
|
93
|
-
return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
|
94
|
-
},
|
95
|
-
redraw: () => {
|
96
|
-
var _viewRef$current;
|
97
|
-
(_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 || _viewRef$current.redraw();
|
98
|
-
},
|
99
|
-
getNativeId: () => {
|
100
|
-
return nativeId;
|
101
|
-
}
|
102
|
-
}));
|
103
|
-
return /*#__PURE__*/_react.default.createElement(_SkiaPictureView.SkiaPictureView, _extends({
|
104
|
-
ref: viewRef,
|
105
|
-
collapsable: false,
|
106
|
-
nativeID: `${nativeId}`,
|
107
|
-
debug: debug,
|
108
|
-
opaque: opaque,
|
109
|
-
onLayout: onLayout
|
110
|
-
}, viewProps));
|
111
|
-
});
|
112
|
-
//# sourceMappingURL=Canvas.web.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_SkiaViewNativeId","_Reconciler","_skia","_SkiaPictureView","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useOnSizeEvent","resultValue","onLayout","useCallback","event","width","height","nativeEvent","layout","value","Canvas","exports","forwardRef","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","viewRef","useRef","rafId","nativeId","useMemo","SkiaViewNativeId","current","root","SkiaSGRoot","Skia","useEffect","render","setPicture","getPicture","unmount","requestRedraw","requestAnimationFrame","cancelAnimationFrame","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","_viewRef$current","getNativeId","createElement","SkiaPictureView","collapsable","nativeID"],"sources":["Canvas.web.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport type { SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n resultValue: SkiaBaseViewProps[\"onSize\"],\n onLayout?: (event: LayoutChangeEvent) => void\n) => {\n return useCallback(\n (event: LayoutChangeEvent) => {\n if (onLayout) {\n onLayout(event);\n }\n const { width, height } = event.nativeEvent.layout;\n\n if (resultValue) {\n resultValue.value = { width, height };\n }\n },\n [onLayout, resultValue]\n );\n};\n\nexport interface CanvasProps extends ViewProps {\n debug?: boolean;\n opaque?: boolean;\n onSize?: SharedValue<SkSize>;\n mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n (\n {\n mode,\n debug,\n opaque,\n children,\n onSize,\n onLayout: _onLayout,\n ...viewProps\n }: CanvasProps,\n ref\n ) => {\n const viewRef = useRef<SkiaPictureView>(null);\n const rafId = useRef<number | null>(null);\n const onLayout = useOnSizeEvent(onSize, _onLayout);\n // Native ID\n const nativeId = useMemo(() => {\n return SkiaViewNativeId.current++;\n }, []);\n\n // Root\n const root = useMemo(() => new SkiaSGRoot(Skia), []);\n\n // Render effects\n useEffect(() => {\n root.render(children);\n if (viewRef.current) {\n viewRef.current.setPicture(root.getPicture());\n }\n }, [children, root]);\n\n useEffect(() => {\n return () => {\n root.unmount();\n };\n }, [root]);\n\n const requestRedraw = useCallback(() => {\n rafId.current = requestAnimationFrame(() => {\n root.render(children);\n if (viewRef.current) {\n viewRef.current.setPicture(root.getPicture());\n }\n if (mode === \"continuous\") {\n requestRedraw();\n }\n });\n }, [children, mode, root]);\n\n useEffect(() => {\n if (mode === \"continuous\") {\n requestRedraw();\n }\n return () => {\n if (rafId.current !== null) {\n cancelAnimationFrame(rafId.current);\n }\n };\n }, [mode, requestRedraw]);\n\n // Component methods\n useImperativeHandle(ref, () => ({\n makeImageSnapshot: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n },\n makeImageSnapshotAsync: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n },\n redraw: () => {\n viewRef.current?.redraw();\n },\n getNativeId: () => {\n return nativeId;\n },\n }));\n return (\n <SkiaPictureView\n ref={viewRef}\n collapsable={false}\n nativeID={`${nativeId}`}\n debug={debug}\n opaque={opaque}\n onLayout={onLayout}\n {...viewProps}\n />\n );\n }\n);\n"],"mappings":"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","ignoreList":[]}
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import type { ViewProps } from "react-native";
|
3
|
-
import type { SharedValue } from "react-native-reanimated";
|
4
|
-
import type { SkSize } from "../skia/types";
|
5
|
-
export interface CanvasProps extends ViewProps {
|
6
|
-
debug?: boolean;
|
7
|
-
opaque?: boolean;
|
8
|
-
onSize?: SharedValue<SkSize>;
|
9
|
-
mode?: "continuous" | "default";
|
10
|
-
}
|
11
|
-
export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;
|
@@ -1,105 +0,0 @@
|
|
1
|
-
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
2
|
-
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
|
3
|
-
import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
|
4
|
-
import { SkiaSGRoot } from "../sksg/Reconciler";
|
5
|
-
import { Skia } from "../skia";
|
6
|
-
import { SkiaPictureView } from "../views/SkiaPictureView.web";
|
7
|
-
|
8
|
-
// TODO: no need to go through the JS thread for this
|
9
|
-
const useOnSizeEvent = (resultValue, onLayout) => {
|
10
|
-
return useCallback(event => {
|
11
|
-
if (onLayout) {
|
12
|
-
onLayout(event);
|
13
|
-
}
|
14
|
-
const {
|
15
|
-
width,
|
16
|
-
height
|
17
|
-
} = event.nativeEvent.layout;
|
18
|
-
if (resultValue) {
|
19
|
-
resultValue.value = {
|
20
|
-
width,
|
21
|
-
height
|
22
|
-
};
|
23
|
-
}
|
24
|
-
}, [onLayout, resultValue]);
|
25
|
-
};
|
26
|
-
export const Canvas = /*#__PURE__*/forwardRef(({
|
27
|
-
mode,
|
28
|
-
debug,
|
29
|
-
opaque,
|
30
|
-
children,
|
31
|
-
onSize,
|
32
|
-
onLayout: _onLayout,
|
33
|
-
...viewProps
|
34
|
-
}, ref) => {
|
35
|
-
const viewRef = useRef(null);
|
36
|
-
const rafId = useRef(null);
|
37
|
-
const onLayout = useOnSizeEvent(onSize, _onLayout);
|
38
|
-
// Native ID
|
39
|
-
const nativeId = useMemo(() => {
|
40
|
-
return SkiaViewNativeId.current++;
|
41
|
-
}, []);
|
42
|
-
|
43
|
-
// Root
|
44
|
-
const root = useMemo(() => new SkiaSGRoot(Skia), []);
|
45
|
-
|
46
|
-
// Render effects
|
47
|
-
useEffect(() => {
|
48
|
-
root.render(children);
|
49
|
-
if (viewRef.current) {
|
50
|
-
viewRef.current.setPicture(root.getPicture());
|
51
|
-
}
|
52
|
-
}, [children, root]);
|
53
|
-
useEffect(() => {
|
54
|
-
return () => {
|
55
|
-
root.unmount();
|
56
|
-
};
|
57
|
-
}, [root]);
|
58
|
-
const requestRedraw = useCallback(() => {
|
59
|
-
rafId.current = requestAnimationFrame(() => {
|
60
|
-
root.render(children);
|
61
|
-
if (viewRef.current) {
|
62
|
-
viewRef.current.setPicture(root.getPicture());
|
63
|
-
}
|
64
|
-
if (mode === "continuous") {
|
65
|
-
requestRedraw();
|
66
|
-
}
|
67
|
-
});
|
68
|
-
}, [children, mode, root]);
|
69
|
-
useEffect(() => {
|
70
|
-
if (mode === "continuous") {
|
71
|
-
requestRedraw();
|
72
|
-
}
|
73
|
-
return () => {
|
74
|
-
if (rafId.current !== null) {
|
75
|
-
cancelAnimationFrame(rafId.current);
|
76
|
-
}
|
77
|
-
};
|
78
|
-
}, [mode, requestRedraw]);
|
79
|
-
|
80
|
-
// Component methods
|
81
|
-
useImperativeHandle(ref, () => ({
|
82
|
-
makeImageSnapshot: rect => {
|
83
|
-
return SkiaViewApi.makeImageSnapshot(nativeId, rect);
|
84
|
-
},
|
85
|
-
makeImageSnapshotAsync: rect => {
|
86
|
-
return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
|
87
|
-
},
|
88
|
-
redraw: () => {
|
89
|
-
var _viewRef$current;
|
90
|
-
(_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 || _viewRef$current.redraw();
|
91
|
-
},
|
92
|
-
getNativeId: () => {
|
93
|
-
return nativeId;
|
94
|
-
}
|
95
|
-
}));
|
96
|
-
return /*#__PURE__*/React.createElement(SkiaPictureView, _extends({
|
97
|
-
ref: viewRef,
|
98
|
-
collapsable: false,
|
99
|
-
nativeID: `${nativeId}`,
|
100
|
-
debug: debug,
|
101
|
-
opaque: opaque,
|
102
|
-
onLayout: onLayout
|
103
|
-
}, viewProps));
|
104
|
-
});
|
105
|
-
//# sourceMappingURL=Canvas.web.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","SkiaViewNativeId","SkiaSGRoot","Skia","SkiaPictureView","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","viewRef","rafId","nativeId","current","root","render","setPicture","getPicture","unmount","requestRedraw","requestAnimationFrame","cancelAnimationFrame","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","_viewRef$current","getNativeId","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.web.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport type { SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n resultValue: SkiaBaseViewProps[\"onSize\"],\n onLayout?: (event: LayoutChangeEvent) => void\n) => {\n return useCallback(\n (event: LayoutChangeEvent) => {\n if (onLayout) {\n onLayout(event);\n }\n const { width, height } = event.nativeEvent.layout;\n\n if (resultValue) {\n resultValue.value = { width, height };\n }\n },\n [onLayout, resultValue]\n );\n};\n\nexport interface CanvasProps extends ViewProps {\n debug?: boolean;\n opaque?: boolean;\n onSize?: SharedValue<SkSize>;\n mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n (\n {\n mode,\n debug,\n opaque,\n children,\n onSize,\n onLayout: _onLayout,\n ...viewProps\n }: CanvasProps,\n ref\n ) => {\n const viewRef = useRef<SkiaPictureView>(null);\n const rafId = useRef<number | null>(null);\n const onLayout = useOnSizeEvent(onSize, _onLayout);\n // Native ID\n const nativeId = useMemo(() => {\n return SkiaViewNativeId.current++;\n }, []);\n\n // Root\n const root = useMemo(() => new SkiaSGRoot(Skia), []);\n\n // Render effects\n useEffect(() => {\n root.render(children);\n if (viewRef.current) {\n viewRef.current.setPicture(root.getPicture());\n }\n }, [children, root]);\n\n useEffect(() => {\n return () => {\n root.unmount();\n };\n }, [root]);\n\n const requestRedraw = useCallback(() => {\n rafId.current = requestAnimationFrame(() => {\n root.render(children);\n if (viewRef.current) {\n viewRef.current.setPicture(root.getPicture());\n }\n if (mode === \"continuous\") {\n requestRedraw();\n }\n });\n }, [children, mode, root]);\n\n useEffect(() => {\n if (mode === \"continuous\") {\n requestRedraw();\n }\n return () => {\n if (rafId.current !== null) {\n cancelAnimationFrame(rafId.current);\n }\n };\n }, [mode, requestRedraw]);\n\n // Component methods\n useImperativeHandle(ref, () => ({\n makeImageSnapshot: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n },\n makeImageSnapshotAsync: (rect?: SkRect) => {\n return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n },\n redraw: () => {\n viewRef.current?.redraw();\n },\n getNativeId: () => {\n return nativeId;\n },\n }));\n return (\n <SkiaPictureView\n ref={viewRef}\n collapsable={false}\n nativeID={`${nativeId}`}\n debug={debug}\n opaque={opaque}\n onLayout={onLayout}\n {...viewProps}\n />\n );\n }\n);\n"],"mappings":"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","ignoreList":[]}
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import type { ViewProps } from "react-native";
|
3
|
-
import type { SharedValue } from "react-native-reanimated";
|
4
|
-
import type { SkSize } from "../skia/types";
|
5
|
-
export interface CanvasProps extends ViewProps {
|
6
|
-
debug?: boolean;
|
7
|
-
opaque?: boolean;
|
8
|
-
onSize?: SharedValue<SkSize>;
|
9
|
-
mode?: "continuous" | "default";
|
10
|
-
}
|
11
|
-
export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;
|
@@ -1,134 +0,0 @@
|
|
1
|
-
import React, {
|
2
|
-
forwardRef,
|
3
|
-
useCallback,
|
4
|
-
useEffect,
|
5
|
-
useImperativeHandle,
|
6
|
-
useMemo,
|
7
|
-
useRef,
|
8
|
-
} from "react";
|
9
|
-
import type { LayoutChangeEvent, ViewProps } from "react-native";
|
10
|
-
import type { SharedValue } from "react-native-reanimated";
|
11
|
-
|
12
|
-
import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
|
13
|
-
import type { SkRect, SkSize } from "../skia/types";
|
14
|
-
import { SkiaSGRoot } from "../sksg/Reconciler";
|
15
|
-
import { Skia } from "../skia";
|
16
|
-
import type { SkiaBaseViewProps } from "../views";
|
17
|
-
import { SkiaPictureView } from "../views/SkiaPictureView.web";
|
18
|
-
|
19
|
-
// TODO: no need to go through the JS thread for this
|
20
|
-
const useOnSizeEvent = (
|
21
|
-
resultValue: SkiaBaseViewProps["onSize"],
|
22
|
-
onLayout?: (event: LayoutChangeEvent) => void
|
23
|
-
) => {
|
24
|
-
return useCallback(
|
25
|
-
(event: LayoutChangeEvent) => {
|
26
|
-
if (onLayout) {
|
27
|
-
onLayout(event);
|
28
|
-
}
|
29
|
-
const { width, height } = event.nativeEvent.layout;
|
30
|
-
|
31
|
-
if (resultValue) {
|
32
|
-
resultValue.value = { width, height };
|
33
|
-
}
|
34
|
-
},
|
35
|
-
[onLayout, resultValue]
|
36
|
-
);
|
37
|
-
};
|
38
|
-
|
39
|
-
export interface CanvasProps extends ViewProps {
|
40
|
-
debug?: boolean;
|
41
|
-
opaque?: boolean;
|
42
|
-
onSize?: SharedValue<SkSize>;
|
43
|
-
mode?: "continuous" | "default";
|
44
|
-
}
|
45
|
-
|
46
|
-
export const Canvas = forwardRef(
|
47
|
-
(
|
48
|
-
{
|
49
|
-
mode,
|
50
|
-
debug,
|
51
|
-
opaque,
|
52
|
-
children,
|
53
|
-
onSize,
|
54
|
-
onLayout: _onLayout,
|
55
|
-
...viewProps
|
56
|
-
}: CanvasProps,
|
57
|
-
ref
|
58
|
-
) => {
|
59
|
-
const viewRef = useRef<SkiaPictureView>(null);
|
60
|
-
const rafId = useRef<number | null>(null);
|
61
|
-
const onLayout = useOnSizeEvent(onSize, _onLayout);
|
62
|
-
// Native ID
|
63
|
-
const nativeId = useMemo(() => {
|
64
|
-
return SkiaViewNativeId.current++;
|
65
|
-
}, []);
|
66
|
-
|
67
|
-
// Root
|
68
|
-
const root = useMemo(() => new SkiaSGRoot(Skia), []);
|
69
|
-
|
70
|
-
// Render effects
|
71
|
-
useEffect(() => {
|
72
|
-
root.render(children);
|
73
|
-
if (viewRef.current) {
|
74
|
-
viewRef.current.setPicture(root.getPicture());
|
75
|
-
}
|
76
|
-
}, [children, root]);
|
77
|
-
|
78
|
-
useEffect(() => {
|
79
|
-
return () => {
|
80
|
-
root.unmount();
|
81
|
-
};
|
82
|
-
}, [root]);
|
83
|
-
|
84
|
-
const requestRedraw = useCallback(() => {
|
85
|
-
rafId.current = requestAnimationFrame(() => {
|
86
|
-
root.render(children);
|
87
|
-
if (viewRef.current) {
|
88
|
-
viewRef.current.setPicture(root.getPicture());
|
89
|
-
}
|
90
|
-
if (mode === "continuous") {
|
91
|
-
requestRedraw();
|
92
|
-
}
|
93
|
-
});
|
94
|
-
}, [children, mode, root]);
|
95
|
-
|
96
|
-
useEffect(() => {
|
97
|
-
if (mode === "continuous") {
|
98
|
-
requestRedraw();
|
99
|
-
}
|
100
|
-
return () => {
|
101
|
-
if (rafId.current !== null) {
|
102
|
-
cancelAnimationFrame(rafId.current);
|
103
|
-
}
|
104
|
-
};
|
105
|
-
}, [mode, requestRedraw]);
|
106
|
-
|
107
|
-
// Component methods
|
108
|
-
useImperativeHandle(ref, () => ({
|
109
|
-
makeImageSnapshot: (rect?: SkRect) => {
|
110
|
-
return SkiaViewApi.makeImageSnapshot(nativeId, rect);
|
111
|
-
},
|
112
|
-
makeImageSnapshotAsync: (rect?: SkRect) => {
|
113
|
-
return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
|
114
|
-
},
|
115
|
-
redraw: () => {
|
116
|
-
viewRef.current?.redraw();
|
117
|
-
},
|
118
|
-
getNativeId: () => {
|
119
|
-
return nativeId;
|
120
|
-
},
|
121
|
-
}));
|
122
|
-
return (
|
123
|
-
<SkiaPictureView
|
124
|
-
ref={viewRef}
|
125
|
-
collapsable={false}
|
126
|
-
nativeID={`${nativeId}`}
|
127
|
-
debug={debug}
|
128
|
-
opaque={opaque}
|
129
|
-
onLayout={onLayout}
|
130
|
-
{...viewProps}
|
131
|
-
/>
|
132
|
-
);
|
133
|
-
}
|
134
|
-
);
|