@tamagui/linear-gradient 3.0.0-beta.1455.1 → 3.0.0-beta.1464.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/linear-gradient.cjs +5 -6
- package/dist/cjs/linear-gradient.native.cjs +101 -11
- package/dist/cjs/linear-gradient.native.js +101 -11
- package/dist/cjs/linear-gradient.native.js.map +1 -1
- package/dist/esm/LinearGradient.mjs.map +1 -1
- package/dist/esm/LinearGradient.native.js.map +1 -1
- package/dist/esm/linear-gradient.mjs +5 -6
- package/dist/esm/linear-gradient.mjs.map +1 -1
- package/dist/esm/linear-gradient.native.js +92 -8
- package/dist/esm/linear-gradient.native.js.map +1 -1
- package/dist/jsx/LinearGradient.mjs.map +1 -1
- package/dist/jsx/linear-gradient.mjs +5 -6
- package/dist/jsx/linear-gradient.mjs.map +1 -1
- package/dist/jsx/linear-gradient.native.cjs +101 -11
- package/dist/jsx/linear-gradient.native.js +101 -11
- package/dist/jsx/linear-gradient.native.js.map +1 -1
- package/package.json +5 -7
- package/src/LinearGradient.tsx +4 -5
- package/src/linear-gradient.tsx +27 -34
- package/types/LinearGradient.d.ts.map +1 -1
- package/types/linear-gradient.d.ts +13 -2
- package/types/linear-gradient.d.ts.map +1 -1
- package/src/linear-gradient.native.tsx +0 -15
- package/types/linear-gradient.native.d.ts +0 -3
- package/types/linear-gradient.native.d.ts.map +0 -1
|
@@ -30,7 +30,7 @@ module.exports = __toCommonJS(linear_gradient_exports);
|
|
|
30
30
|
var import_core = require("@tamagui/core");
|
|
31
31
|
var React = __toESM(require("react"), 1);
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
-
const
|
|
33
|
+
const GradientView = import_core.View;
|
|
34
34
|
function needsDimensionAwareAngle(start, end) {
|
|
35
35
|
if (!start && !end) return false;
|
|
36
36
|
const startX = start?.[0] ?? .5;
|
|
@@ -56,15 +56,14 @@ function LinearGradient({ colors, locations, start, end, ...props }) {
|
|
|
56
56
|
height
|
|
57
57
|
]);
|
|
58
58
|
if (!needsLayout) {
|
|
59
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {
|
|
60
60
|
...props,
|
|
61
|
-
|
|
62
|
-
style: [props.style, { backgroundImage: linearGradientBackgroundImage }]
|
|
61
|
+
backgroundImage: linearGradientBackgroundImage
|
|
63
62
|
});
|
|
64
63
|
}
|
|
65
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {
|
|
66
65
|
...props,
|
|
67
|
-
|
|
66
|
+
backgroundImage: linearGradientBackgroundImage,
|
|
68
67
|
onLayout: (event) => {
|
|
69
68
|
const { width: width2, height: height2 } = event.nativeEvent.layout;
|
|
70
69
|
setLayout((oldLayout) => {
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
9
|
var __export = (target, all) => {
|
|
8
10
|
for (var name in all) __defProp(target, name, {
|
|
@@ -19,18 +21,106 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
21
|
}
|
|
20
22
|
return to;
|
|
21
23
|
};
|
|
24
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
25
|
+
value: mod,
|
|
26
|
+
enumerable: true
|
|
27
|
+
}) : target, mod));
|
|
22
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
|
-
var
|
|
24
|
-
__export(
|
|
25
|
-
module.exports = __toCommonJS(
|
|
29
|
+
var linear_gradient_exports = {};
|
|
30
|
+
__export(linear_gradient_exports, { LinearGradient: () => LinearGradient });
|
|
31
|
+
module.exports = __toCommonJS(linear_gradient_exports);
|
|
26
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
27
|
-
var
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
+
var import_core = require("@tamagui/core");
|
|
34
|
+
var React = __toESM(require("react"), 1);
|
|
35
|
+
var GradientView = import_core.View;
|
|
36
|
+
function needsDimensionAwareAngle(start, end) {
|
|
37
|
+
if (!start && !end) return false;
|
|
38
|
+
var _start_;
|
|
39
|
+
var startX = (_start_ = start === null || start === void 0 ? void 0 : start[0]) !== null && _start_ !== void 0 ? _start_ : .5;
|
|
40
|
+
var _end_;
|
|
41
|
+
var endX = (_end_ = end === null || end === void 0 ? void 0 : end[0]) !== null && _end_ !== void 0 ? _end_ : .5;
|
|
42
|
+
return startX !== endX;
|
|
43
|
+
}
|
|
44
|
+
function LinearGradient(param) {
|
|
45
|
+
var { colors, locations, start, end, ...props } = param;
|
|
46
|
+
var normalizedStart = start ? Array.isArray(start) ? start : [start.x, start.y] : void 0;
|
|
47
|
+
var normalizedEnd = end ? Array.isArray(end) ? end : [end.x, end.y] : void 0;
|
|
48
|
+
var needsLayout = needsDimensionAwareAngle(normalizedStart, normalizedEnd);
|
|
49
|
+
var [{ height, width }, setLayout] = React.useState({
|
|
50
|
+
height: 1,
|
|
51
|
+
width: 1
|
|
52
|
+
});
|
|
53
|
+
var linearGradientBackgroundImage = React.useMemo(function() {
|
|
54
|
+
return getLinearGradientBackgroundImage(colors, locations, normalizedStart, normalizedEnd, width, height);
|
|
55
|
+
}, [
|
|
56
|
+
colors,
|
|
57
|
+
locations,
|
|
58
|
+
normalizedStart,
|
|
59
|
+
normalizedEnd,
|
|
60
|
+
width,
|
|
61
|
+
height
|
|
62
|
+
]);
|
|
63
|
+
if (!needsLayout) {
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {
|
|
65
|
+
...props,
|
|
66
|
+
backgroundImage: linearGradientBackgroundImage
|
|
67
|
+
});
|
|
33
68
|
}
|
|
34
|
-
|
|
35
|
-
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {
|
|
70
|
+
...props,
|
|
71
|
+
backgroundImage: linearGradientBackgroundImage,
|
|
72
|
+
onLayout: function(event) {
|
|
73
|
+
var { width: width2, height: height2 } = event.nativeEvent.layout;
|
|
74
|
+
setLayout(function(oldLayout) {
|
|
75
|
+
if (width2 !== oldLayout.width || height2 !== oldLayout.height) {
|
|
76
|
+
return {
|
|
77
|
+
height: height2,
|
|
78
|
+
width: width2
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
return oldLayout;
|
|
82
|
+
});
|
|
83
|
+
if (props.onLayout) {
|
|
84
|
+
props.onLayout(event);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint) {
|
|
90
|
+
var width = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : 1, height = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 1;
|
|
91
|
+
var gradientColors = calculateGradientColors(colors, locations);
|
|
92
|
+
var angle = calculatePseudoAngle(width, height, startPoint, endPoint);
|
|
93
|
+
return `linear-gradient(${angle}deg, ${gradientColors.join(", ")})`;
|
|
94
|
+
}
|
|
95
|
+
function calculatePseudoAngle(width, height, startPoint, endPoint) {
|
|
96
|
+
var getControlPoints = function() {
|
|
97
|
+
var correctedStartPoint = [0, 0];
|
|
98
|
+
if (Array.isArray(startPoint)) {
|
|
99
|
+
correctedStartPoint = [startPoint[0] != null ? startPoint[0] : 0, startPoint[1] != null ? startPoint[1] : 0];
|
|
100
|
+
}
|
|
101
|
+
var correctedEndPoint = [0, 1];
|
|
102
|
+
if (Array.isArray(endPoint)) {
|
|
103
|
+
correctedEndPoint = [endPoint[0] != null ? endPoint[0] : 0, endPoint[1] != null ? endPoint[1] : 1];
|
|
104
|
+
}
|
|
105
|
+
return [correctedStartPoint, correctedEndPoint];
|
|
106
|
+
};
|
|
107
|
+
var [start, end] = getControlPoints();
|
|
108
|
+
start[0] *= width;
|
|
109
|
+
end[0] *= width;
|
|
110
|
+
start[1] *= height;
|
|
111
|
+
end[1] *= height;
|
|
112
|
+
var py = end[1] - start[1];
|
|
113
|
+
var px = end[0] - start[0];
|
|
114
|
+
return 90 + Math.atan2(py, px) * 180 / Math.PI;
|
|
115
|
+
}
|
|
116
|
+
function calculateGradientColors(colors, locations) {
|
|
117
|
+
return colors.map(function(color, index) {
|
|
118
|
+
var output = (0, import_core.normalizeColor)(color);
|
|
119
|
+
if (locations && locations[index] !== void 0) {
|
|
120
|
+
var location = Math.max(0, Math.min(1, locations[index]));
|
|
121
|
+
var percentage = location * 100;
|
|
122
|
+
return `${output} ${percentage}%`;
|
|
123
|
+
}
|
|
124
|
+
return output;
|
|
125
|
+
});
|
|
36
126
|
}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
9
|
var __export = (target, all) => {
|
|
8
10
|
for (var name in all) __defProp(target, name, {
|
|
@@ -19,20 +21,108 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
21
|
}
|
|
20
22
|
return to;
|
|
21
23
|
};
|
|
24
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
25
|
+
value: mod,
|
|
26
|
+
enumerable: true
|
|
27
|
+
}) : target, mod));
|
|
22
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
|
-
var
|
|
24
|
-
__export(
|
|
25
|
-
module.exports = __toCommonJS(
|
|
29
|
+
var linear_gradient_exports = {};
|
|
30
|
+
__export(linear_gradient_exports, { LinearGradient: () => LinearGradient });
|
|
31
|
+
module.exports = __toCommonJS(linear_gradient_exports);
|
|
26
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
27
|
-
var
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
+
var import_core = require("@tamagui/core");
|
|
34
|
+
var React = __toESM(require("react"), 1);
|
|
35
|
+
var GradientView = import_core.View;
|
|
36
|
+
function needsDimensionAwareAngle(start, end) {
|
|
37
|
+
if (!start && !end) return false;
|
|
38
|
+
var _start_;
|
|
39
|
+
var startX = (_start_ = start === null || start === void 0 ? void 0 : start[0]) !== null && _start_ !== void 0 ? _start_ : .5;
|
|
40
|
+
var _end_;
|
|
41
|
+
var endX = (_end_ = end === null || end === void 0 ? void 0 : end[0]) !== null && _end_ !== void 0 ? _end_ : .5;
|
|
42
|
+
return startX !== endX;
|
|
43
|
+
}
|
|
44
|
+
function LinearGradient(param) {
|
|
45
|
+
var { colors, locations, start, end, ...props } = param;
|
|
46
|
+
var normalizedStart = start ? Array.isArray(start) ? start : [start.x, start.y] : void 0;
|
|
47
|
+
var normalizedEnd = end ? Array.isArray(end) ? end : [end.x, end.y] : void 0;
|
|
48
|
+
var needsLayout = needsDimensionAwareAngle(normalizedStart, normalizedEnd);
|
|
49
|
+
var [{ height, width }, setLayout] = React.useState({
|
|
50
|
+
height: 1,
|
|
51
|
+
width: 1
|
|
52
|
+
});
|
|
53
|
+
var linearGradientBackgroundImage = React.useMemo(function() {
|
|
54
|
+
return getLinearGradientBackgroundImage(colors, locations, normalizedStart, normalizedEnd, width, height);
|
|
55
|
+
}, [
|
|
56
|
+
colors,
|
|
57
|
+
locations,
|
|
58
|
+
normalizedStart,
|
|
59
|
+
normalizedEnd,
|
|
60
|
+
width,
|
|
61
|
+
height
|
|
62
|
+
]);
|
|
63
|
+
if (!needsLayout) {
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {
|
|
65
|
+
...props,
|
|
66
|
+
backgroundImage: linearGradientBackgroundImage
|
|
67
|
+
});
|
|
33
68
|
}
|
|
34
|
-
|
|
35
|
-
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {
|
|
70
|
+
...props,
|
|
71
|
+
backgroundImage: linearGradientBackgroundImage,
|
|
72
|
+
onLayout: function(event) {
|
|
73
|
+
var { width: width2, height: height2 } = event.nativeEvent.layout;
|
|
74
|
+
setLayout(function(oldLayout) {
|
|
75
|
+
if (width2 !== oldLayout.width || height2 !== oldLayout.height) {
|
|
76
|
+
return {
|
|
77
|
+
height: height2,
|
|
78
|
+
width: width2
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
return oldLayout;
|
|
82
|
+
});
|
|
83
|
+
if (props.onLayout) {
|
|
84
|
+
props.onLayout(event);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint) {
|
|
90
|
+
var width = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : 1, height = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 1;
|
|
91
|
+
var gradientColors = calculateGradientColors(colors, locations);
|
|
92
|
+
var angle = calculatePseudoAngle(width, height, startPoint, endPoint);
|
|
93
|
+
return `linear-gradient(${angle}deg, ${gradientColors.join(", ")})`;
|
|
94
|
+
}
|
|
95
|
+
function calculatePseudoAngle(width, height, startPoint, endPoint) {
|
|
96
|
+
var getControlPoints = function() {
|
|
97
|
+
var correctedStartPoint = [0, 0];
|
|
98
|
+
if (Array.isArray(startPoint)) {
|
|
99
|
+
correctedStartPoint = [startPoint[0] != null ? startPoint[0] : 0, startPoint[1] != null ? startPoint[1] : 0];
|
|
100
|
+
}
|
|
101
|
+
var correctedEndPoint = [0, 1];
|
|
102
|
+
if (Array.isArray(endPoint)) {
|
|
103
|
+
correctedEndPoint = [endPoint[0] != null ? endPoint[0] : 0, endPoint[1] != null ? endPoint[1] : 1];
|
|
104
|
+
}
|
|
105
|
+
return [correctedStartPoint, correctedEndPoint];
|
|
106
|
+
};
|
|
107
|
+
var [start, end] = getControlPoints();
|
|
108
|
+
start[0] *= width;
|
|
109
|
+
end[0] *= width;
|
|
110
|
+
start[1] *= height;
|
|
111
|
+
end[1] *= height;
|
|
112
|
+
var py = end[1] - start[1];
|
|
113
|
+
var px = end[0] - start[0];
|
|
114
|
+
return 90 + Math.atan2(py, px) * 180 / Math.PI;
|
|
115
|
+
}
|
|
116
|
+
function calculateGradientColors(colors, locations) {
|
|
117
|
+
return colors.map(function(color, index) {
|
|
118
|
+
var output = (0, import_core.normalizeColor)(color);
|
|
119
|
+
if (locations && locations[index] !== void 0) {
|
|
120
|
+
var location = Math.max(0, Math.min(1, locations[index]));
|
|
121
|
+
var percentage = location * 100;
|
|
122
|
+
return `${output} ${percentage}%`;
|
|
123
|
+
}
|
|
124
|
+
return output;
|
|
125
|
+
});
|
|
36
126
|
}
|
|
37
127
|
|
|
38
128
|
//# sourceMappingURL=linear-gradient.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"linear-gradient.native.js","names":[],"sources":["cjs/linear-gradient.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar
|
|
1
|
+
{"version":3,"file":"linear-gradient.native.js","names":[],"sources":["cjs/linear-gradient.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n // If the importer is in node compatibility mode or this is not an ESM\n // file that has been converted to a CommonJS file using a Babel-\n // compatible transform (i.e. \"__esModule\" has not been set), then set\n // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar linear_gradient_exports = {};\n__export(linear_gradient_exports, {\n LinearGradient: () => LinearGradient\n});\nmodule.exports = __toCommonJS(linear_gradient_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_core = require(\"@tamagui/core\");\nvar React = __toESM(require(\"react\"), 1);\nvar GradientView = import_core.View;\nfunction needsDimensionAwareAngle(start, end) {\n if (!start && !end) return false;\n var _start_;\n var startX = (_start_ = start === null || start === void 0 ? void 0 : start[0]) !== null && _start_ !== void 0 ? _start_ : 0.5;\n var _end_;\n var endX = (_end_ = end === null || end === void 0 ? void 0 : end[0]) !== null && _end_ !== void 0 ? _end_ : 0.5;\n return startX !== endX;\n}\nfunction LinearGradient(param) {\n var { colors, locations, start, end, ...props } = param;\n var normalizedStart = start ? Array.isArray(start) ? start : [\n start.x,\n start.y\n ] : void 0;\n var normalizedEnd = end ? Array.isArray(end) ? end : [\n end.x,\n end.y\n ] : void 0;\n var needsLayout = needsDimensionAwareAngle(normalizedStart, normalizedEnd);\n var [{ height, width }, setLayout] = React.useState({\n height: 1,\n width: 1\n });\n var linearGradientBackgroundImage = React.useMemo(function() {\n return getLinearGradientBackgroundImage(colors, locations, normalizedStart, normalizedEnd, width, height);\n }, [\n colors,\n locations,\n normalizedStart,\n normalizedEnd,\n width,\n height\n ]);\n if (!needsLayout) {\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {\n ...props,\n backgroundImage: linearGradientBackgroundImage\n });\n }\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {\n ...props,\n backgroundImage: linearGradientBackgroundImage,\n onLayout: function(event) {\n var { width: width2, height: height2 } = event.nativeEvent.layout;\n setLayout(function(oldLayout) {\n if (width2 !== oldLayout.width || height2 !== oldLayout.height) {\n return {\n height: height2,\n width: width2\n };\n }\n return oldLayout;\n });\n if (props.onLayout) {\n props.onLayout(event);\n }\n }\n });\n}\nfunction getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint) {\n var width = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : 1, height = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 1;\n var gradientColors = calculateGradientColors(colors, locations);\n var angle = calculatePseudoAngle(width, height, startPoint, endPoint);\n return `linear-gradient(${angle}deg, ${gradientColors.join(\", \")})`;\n}\nfunction calculatePseudoAngle(width, height, startPoint, endPoint) {\n var getControlPoints = function() {\n var correctedStartPoint = [\n 0,\n 0\n ];\n if (Array.isArray(startPoint)) {\n correctedStartPoint = [\n startPoint[0] != null ? startPoint[0] : 0,\n startPoint[1] != null ? startPoint[1] : 0\n ];\n }\n var correctedEndPoint = [\n 0,\n 1\n ];\n if (Array.isArray(endPoint)) {\n correctedEndPoint = [\n endPoint[0] != null ? endPoint[0] : 0,\n endPoint[1] != null ? endPoint[1] : 1\n ];\n }\n return [\n correctedStartPoint,\n correctedEndPoint\n ];\n };\n var [start, end] = getControlPoints();\n start[0] *= width;\n end[0] *= width;\n start[1] *= height;\n end[1] *= height;\n var py = end[1] - start[1];\n var px = end[0] - start[0];\n return 90 + Math.atan2(py, px) * 180 / Math.PI;\n}\nfunction calculateGradientColors(colors, locations) {\n return colors.map(function(color, index) {\n var output = (0, import_core.normalizeColor)(color);\n if (locations && locations[index] !== void 0) {\n var location = Math.max(0, Math.min(1, locations[index]));\n var percentage = location * 100;\n return `${output} ${percentage}%`;\n }\n return output;\n });\n}\n//# sourceMappingURL=linear-gradient.js.map\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinearGradient.js","names":["
|
|
1
|
+
{"version":3,"file":"LinearGradient.js","names":["GradientBackground"],"sources":["esm/LinearGradient.js"],"sourcesContent":["import {\n createStyledHOC,\n getTokens,\n getVariableValue,\n normalizeColor,\n styled,\n useTheme\n} from \"@tamagui/core\";\nimport { YStack } from \"@tamagui/stacks\";\nimport { LinearGradient as GradientBackground } from \"./linear-gradient\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst LinearGradientFrame = styled(YStack, {\n displayName: \"LinearGradient\",\n overflow: \"hidden\",\n position: \"relative\"\n});\nconst LinearGradient = createStyledHOC(\n LinearGradientFrame,\n (propsIn, ref) => {\n const { start, end, colors: colorsProp, locations, children, ...stackProps } = propsIn;\n const theme = useTheme();\n const colorTokens = getTokens().color;\n let colors = colorsProp?.map((c) => {\n return theme[c]?.get(\"web\") ?? getVariableValue(colorTokens[c]) ?? c;\n }) || [];\n if (process.env.NODE_ENV !== \"production\") {\n if (colors.some((c) => {\n const normalized = normalizeColor(c);\n if (!normalized) {\n return true;\n }\n })) {\n console.error(\n `LinearGradient: \"colors\" prop contains invalid color tokens: ${colors} fallback to default colors: [\"#000\", \"#fff\"]`\n );\n colors = [\"#000\", \"#fff\"];\n }\n }\n return /* @__PURE__ */ jsxs(LinearGradientFrame, { ref, ...stackProps, children: [\n /* @__PURE__ */ jsx(\n GradientBackground,\n {\n start,\n end,\n colors,\n locations,\n style: gradientStyle\n }\n ),\n children\n ] });\n }\n);\nconst gradientStyle = {\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 0\n};\nexport {\n LinearGradient\n};\n//# sourceMappingURL=LinearGradient.js.map\n"],"mappings":";;;;;;AAWA,MAAM,sBAAsB,OAAO,QAAQ;CACzC,aAAa;CACb,UAAU;CACV,UAAU;AACZ,CAAC;AACD,MAAM,iBAAiB,gBACrB,sBACC,SAAS,QAAQ;CAChB,MAAM,EAAE,OAAO,KAAK,QAAQ,YAAY,WAAW,UAAU,GAAG,eAAe;CAC/E,MAAM,QAAQ,SAAS;CACvB,MAAM,cAAc,UAAU,CAAC,CAAC;CAChC,IAAI,SAAS,YAAY,KAAK,MAAM;EAClC,OAAO,MAAM,EAAE,EAAE,IAAI,KAAK,KAAK,iBAAiB,YAAY,EAAE,KAAK;CACrE,CAAC,KAAK,CAAC;CACP,IAAI,QAAQ,IAAI,aAAa,cAAc;EACzC,IAAI,OAAO,MAAM,MAAM;GACrB,MAAM,aAAa,eAAe,CAAC;GACnC,IAAI,CAAC,YAAY;IACf,OAAO;GACT;EACF,CAAC,GAAG;GACF,QAAQ,MACN,gEAAgE,OAAO,8CACzE;GACA,SAAS,CAAC,QAAQ,MAAM;EAC1B;CACF;CACA,OAAuB,qBAAK,qBAAqB;EAAE;EAAK,GAAG;EAAY,UAAU,CAC/D,oBACdA,kBACA;GACE;GACA;GACA;GACA;GACA,OAAO;EACT,CACF,GACA,QACF;CAAE,CAAC;AACL,CACF;AACA,MAAM,gBAAgB;CACpB,UAAU;CACV,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,QAAQ;AACV"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinearGradient.native.js","names":["
|
|
1
|
+
{"version":3,"file":"LinearGradient.native.js","names":["GradientBackground"],"sources":["esm/LinearGradient.native.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { createStyledHOC, getTokens, getVariableValue, normalizeColor, styled, useTheme } from \"@tamagui/core\";\nimport { YStack } from \"@tamagui/stacks\";\nimport { LinearGradient as GradientBackground } from \"./linear-gradient\";\nvar LinearGradientFrame = styled(YStack, {\n displayName: \"LinearGradient\",\n overflow: \"hidden\",\n position: \"relative\"\n});\nvar LinearGradient = createStyledHOC(LinearGradientFrame, function(propsIn, ref) {\n var { start, end, colors: colorsProp, locations, children, ...stackProps } = propsIn;\n var theme = useTheme();\n var colorTokens = getTokens().color;\n var colors = (colorsProp === null || colorsProp === void 0 ? void 0 : colorsProp.map(function(c) {\n var _theme_c;\n var _theme_c_get, _ref;\n return (_ref = (_theme_c_get = (_theme_c = theme[c]) === null || _theme_c === void 0 ? void 0 : _theme_c.get(\"web\")) !== null && _theme_c_get !== void 0 ? _theme_c_get : getVariableValue(colorTokens[c])) !== null && _ref !== void 0 ? _ref : c;\n })) || [];\n if (process.env.NODE_ENV !== \"production\") {\n if (colors.some(function(c) {\n var normalized = normalizeColor(c);\n if (!normalized) {\n return true;\n }\n })) {\n console.error(`LinearGradient: \"colors\" prop contains invalid color tokens: ${colors} fallback to default colors: [\"#000\", \"#fff\"]`);\n colors = [\n \"#000\",\n \"#fff\"\n ];\n }\n }\n return /* @__PURE__ */ _jsxs(LinearGradientFrame, {\n ref,\n ...stackProps,\n children: [\n /* @__PURE__ */ _jsx(GradientBackground, {\n start,\n end,\n colors,\n locations,\n style: gradientStyle\n }),\n children\n ]\n });\n});\nvar gradientStyle = {\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 0\n};\nexport {\n LinearGradient\n};\n//# sourceMappingURL=LinearGradient.js.map\n"],"mappings":";;;;;;AAIA,IAAI,sBAAsB,OAAO,QAAQ;CACvC,aAAa;CACb,UAAU;CACV,UAAU;AACZ,CAAC;AACD,IAAI,iBAAiB,gBAAgB,qBAAqB,SAAS,SAAS,KAAK;CAC/E,IAAI,EAAE,OAAO,KAAK,QAAQ,YAAY,WAAW,UAAU,GAAG,eAAe;CAC7E,IAAI,QAAQ,SAAS;CACrB,IAAI,cAAc,UAAU,CAAC,CAAC;CAC9B,IAAI,UAAU,eAAe,QAAQ,eAAe,KAAK,IAAI,KAAK,IAAI,WAAW,IAAI,SAAS,GAAG;EAC/F,IAAI;EACJ,IAAI,cAAc;EAClB,QAAQ,QAAQ,gBAAgB,WAAW,MAAM,QAAQ,QAAQ,aAAa,KAAK,IAAI,KAAK,IAAI,SAAS,IAAI,KAAK,OAAO,QAAQ,iBAAiB,KAAK,IAAI,eAAe,iBAAiB,YAAY,EAAE,OAAO,QAAQ,SAAS,KAAK,IAAI,OAAO;CACnP,CAAC,MAAM,CAAC;CACR,IAAI,QAAQ,IAAI,aAAa,cAAc;EACzC,IAAI,OAAO,KAAK,SAAS,GAAG;GAC1B,IAAI,aAAa,eAAe,CAAC;GACjC,IAAI,CAAC,YAAY;IACf,OAAO;GACT;EACF,CAAC,GAAG;GACF,QAAQ,MAAM,gEAAgE,OAAO,8CAA8C;GACnI,SAAS,CACP,QACA,MACF;EACF;CACF;CACA,OAAuB,qBAAM,qBAAqB;EAChD;EACA,GAAG;EACH,UAAU,CACQ,oBAAKA,kBAAoB;GACvC;GACA;GACA;GACA;GACA,OAAO;EACT,CAAC,GACD,QACF;CACF,CAAC;AACH,CAAC;AACD,IAAI,gBAAgB;CAClB,UAAU;CACV,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,QAAQ;AACV"}
|
|
@@ -2,7 +2,7 @@ import { View, normalizeColor } from "@tamagui/core";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const GradientView = View;
|
|
6
6
|
function needsDimensionAwareAngle(start, end) {
|
|
7
7
|
if (!start && !end) return false;
|
|
8
8
|
const startX = start?.[0] ?? .5;
|
|
@@ -28,15 +28,14 @@ function LinearGradient({ colors, locations, start, end, ...props }) {
|
|
|
28
28
|
height
|
|
29
29
|
]);
|
|
30
30
|
if (!needsLayout) {
|
|
31
|
-
return /* @__PURE__ */ jsx(
|
|
31
|
+
return /* @__PURE__ */ jsx(GradientView, {
|
|
32
32
|
...props,
|
|
33
|
-
|
|
34
|
-
style: [props.style, { backgroundImage: linearGradientBackgroundImage }]
|
|
33
|
+
backgroundImage: linearGradientBackgroundImage
|
|
35
34
|
});
|
|
36
35
|
}
|
|
37
|
-
return /* @__PURE__ */ jsx(
|
|
36
|
+
return /* @__PURE__ */ jsx(GradientView, {
|
|
38
37
|
...props,
|
|
39
|
-
|
|
38
|
+
backgroundImage: linearGradientBackgroundImage,
|
|
40
39
|
onLayout: (event) => {
|
|
41
40
|
const { width: width2, height: height2 } = event.nativeEvent.layout;
|
|
42
41
|
setLayout((oldLayout) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"linear-gradient.js","names":[],"sources":["esm/linear-gradient.js"],"sourcesContent":["import { View, normalizeColor } from \"@tamagui/core\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst
|
|
1
|
+
{"version":3,"file":"linear-gradient.js","names":[],"sources":["esm/linear-gradient.js"],"sourcesContent":["import { View, normalizeColor } from \"@tamagui/core\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst GradientView = View;\nfunction needsDimensionAwareAngle(start, end) {\n if (!start && !end) return false;\n const startX = start?.[0] ?? 0.5;\n const endX = end?.[0] ?? 0.5;\n return startX !== endX;\n}\nfunction LinearGradient({\n colors,\n locations,\n start,\n end,\n ...props\n}) {\n const normalizedStart = start ? Array.isArray(start) ? start : [start.x, start.y] : void 0;\n const normalizedEnd = end ? Array.isArray(end) ? end : [end.x, end.y] : void 0;\n const needsLayout = needsDimensionAwareAngle(\n normalizedStart,\n normalizedEnd\n );\n const [{ height, width }, setLayout] = React.useState({\n height: 1,\n width: 1\n });\n const linearGradientBackgroundImage = React.useMemo(() => {\n return getLinearGradientBackgroundImage(\n colors,\n locations,\n normalizedStart,\n normalizedEnd,\n width,\n height\n );\n }, [colors, locations, normalizedStart, normalizedEnd, width, height]);\n if (!needsLayout) {\n return /* @__PURE__ */ jsx(GradientView, { ...props, backgroundImage: linearGradientBackgroundImage });\n }\n return /* @__PURE__ */ jsx(\n GradientView,\n {\n ...props,\n backgroundImage: linearGradientBackgroundImage,\n onLayout: (event) => {\n const { width: width2, height: height2 } = event.nativeEvent.layout;\n setLayout((oldLayout) => {\n if (width2 !== oldLayout.width || height2 !== oldLayout.height) {\n return { height: height2, width: width2 };\n }\n return oldLayout;\n });\n if (props.onLayout) {\n props.onLayout(event);\n }\n }\n }\n );\n}\nfunction getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width = 1, height = 1) {\n const gradientColors = calculateGradientColors(colors, locations);\n const angle = calculatePseudoAngle(width, height, startPoint, endPoint);\n return `linear-gradient(${angle}deg, ${gradientColors.join(\", \")})`;\n}\nfunction calculatePseudoAngle(width, height, startPoint, endPoint) {\n const getControlPoints = () => {\n let correctedStartPoint = [0, 0];\n if (Array.isArray(startPoint)) {\n correctedStartPoint = [\n startPoint[0] != null ? startPoint[0] : 0,\n startPoint[1] != null ? startPoint[1] : 0\n ];\n }\n let correctedEndPoint = [0, 1];\n if (Array.isArray(endPoint)) {\n correctedEndPoint = [\n endPoint[0] != null ? endPoint[0] : 0,\n endPoint[1] != null ? endPoint[1] : 1\n ];\n }\n return [correctedStartPoint, correctedEndPoint];\n };\n const [start, end] = getControlPoints();\n start[0] *= width;\n end[0] *= width;\n start[1] *= height;\n end[1] *= height;\n const py = end[1] - start[1];\n const px = end[0] - start[0];\n return 90 + Math.atan2(py, px) * 180 / Math.PI;\n}\nfunction calculateGradientColors(colors, locations) {\n return colors.map((color, index) => {\n const output = normalizeColor(color);\n if (locations && locations[index] !== void 0) {\n const location = Math.max(0, Math.min(1, locations[index]));\n const percentage = location * 100;\n return `${output} ${percentage}%`;\n }\n return output;\n });\n}\nexport {\n LinearGradient\n};\n//# sourceMappingURL=linear-gradient.js.map\n"],"mappings":"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"}
|
|
@@ -1,14 +1,98 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { View, normalizeColor } from "@tamagui/core";
|
|
3
|
+
import * as React from "react";
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
if (
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
var GradientView = View;
|
|
6
|
+
function needsDimensionAwareAngle(start, end) {
|
|
7
|
+
if (!start && !end) return false;
|
|
8
|
+
var _start_;
|
|
9
|
+
var startX = (_start_ = start === null || start === void 0 ? void 0 : start[0]) !== null && _start_ !== void 0 ? _start_ : .5;
|
|
10
|
+
var _end_;
|
|
11
|
+
var endX = (_end_ = end === null || end === void 0 ? void 0 : end[0]) !== null && _end_ !== void 0 ? _end_ : .5;
|
|
12
|
+
return startX !== endX;
|
|
13
|
+
}
|
|
14
|
+
function LinearGradient(param) {
|
|
15
|
+
var { colors, locations, start, end, ...props } = param;
|
|
16
|
+
var normalizedStart = start ? Array.isArray(start) ? start : [start.x, start.y] : void 0;
|
|
17
|
+
var normalizedEnd = end ? Array.isArray(end) ? end : [end.x, end.y] : void 0;
|
|
18
|
+
var needsLayout = needsDimensionAwareAngle(normalizedStart, normalizedEnd);
|
|
19
|
+
var [{ height, width }, setLayout] = React.useState({
|
|
20
|
+
height: 1,
|
|
21
|
+
width: 1
|
|
22
|
+
});
|
|
23
|
+
var linearGradientBackgroundImage = React.useMemo(function() {
|
|
24
|
+
return getLinearGradientBackgroundImage(colors, locations, normalizedStart, normalizedEnd, width, height);
|
|
25
|
+
}, [
|
|
26
|
+
colors,
|
|
27
|
+
locations,
|
|
28
|
+
normalizedStart,
|
|
29
|
+
normalizedEnd,
|
|
30
|
+
width,
|
|
31
|
+
height
|
|
32
|
+
]);
|
|
33
|
+
if (!needsLayout) {
|
|
34
|
+
return /* @__PURE__ */ jsx(GradientView, {
|
|
35
|
+
...props,
|
|
36
|
+
backgroundImage: linearGradientBackgroundImage
|
|
37
|
+
});
|
|
9
38
|
}
|
|
10
|
-
|
|
11
|
-
|
|
39
|
+
return /* @__PURE__ */ jsx(GradientView, {
|
|
40
|
+
...props,
|
|
41
|
+
backgroundImage: linearGradientBackgroundImage,
|
|
42
|
+
onLayout: function(event) {
|
|
43
|
+
var { width: width2, height: height2 } = event.nativeEvent.layout;
|
|
44
|
+
setLayout(function(oldLayout) {
|
|
45
|
+
if (width2 !== oldLayout.width || height2 !== oldLayout.height) {
|
|
46
|
+
return {
|
|
47
|
+
height: height2,
|
|
48
|
+
width: width2
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
return oldLayout;
|
|
52
|
+
});
|
|
53
|
+
if (props.onLayout) {
|
|
54
|
+
props.onLayout(event);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint) {
|
|
60
|
+
var width = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : 1, height = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 1;
|
|
61
|
+
var gradientColors = calculateGradientColors(colors, locations);
|
|
62
|
+
var angle = calculatePseudoAngle(width, height, startPoint, endPoint);
|
|
63
|
+
return `linear-gradient(${angle}deg, ${gradientColors.join(", ")})`;
|
|
64
|
+
}
|
|
65
|
+
function calculatePseudoAngle(width, height, startPoint, endPoint) {
|
|
66
|
+
var getControlPoints = function() {
|
|
67
|
+
var correctedStartPoint = [0, 0];
|
|
68
|
+
if (Array.isArray(startPoint)) {
|
|
69
|
+
correctedStartPoint = [startPoint[0] != null ? startPoint[0] : 0, startPoint[1] != null ? startPoint[1] : 0];
|
|
70
|
+
}
|
|
71
|
+
var correctedEndPoint = [0, 1];
|
|
72
|
+
if (Array.isArray(endPoint)) {
|
|
73
|
+
correctedEndPoint = [endPoint[0] != null ? endPoint[0] : 0, endPoint[1] != null ? endPoint[1] : 1];
|
|
74
|
+
}
|
|
75
|
+
return [correctedStartPoint, correctedEndPoint];
|
|
76
|
+
};
|
|
77
|
+
var [start, end] = getControlPoints();
|
|
78
|
+
start[0] *= width;
|
|
79
|
+
end[0] *= width;
|
|
80
|
+
start[1] *= height;
|
|
81
|
+
end[1] *= height;
|
|
82
|
+
var py = end[1] - start[1];
|
|
83
|
+
var px = end[0] - start[0];
|
|
84
|
+
return 90 + Math.atan2(py, px) * 180 / Math.PI;
|
|
85
|
+
}
|
|
86
|
+
function calculateGradientColors(colors, locations) {
|
|
87
|
+
return colors.map(function(color, index) {
|
|
88
|
+
var output = normalizeColor(color);
|
|
89
|
+
if (locations && locations[index] !== void 0) {
|
|
90
|
+
var location = Math.max(0, Math.min(1, locations[index]));
|
|
91
|
+
var percentage = location * 100;
|
|
92
|
+
return `${output} ${percentage}%`;
|
|
93
|
+
}
|
|
94
|
+
return output;
|
|
95
|
+
});
|
|
12
96
|
}
|
|
13
97
|
|
|
14
98
|
export { LinearGradient };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"linear-gradient.native.js","names":[],"sources":["esm/linear-gradient.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport {
|
|
1
|
+
{"version":3,"file":"linear-gradient.native.js","names":[],"sources":["esm/linear-gradient.native.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { View, normalizeColor } from \"@tamagui/core\";\nimport * as React from \"react\";\nvar GradientView = View;\nfunction needsDimensionAwareAngle(start, end) {\n if (!start && !end) return false;\n var _start_;\n var startX = (_start_ = start === null || start === void 0 ? void 0 : start[0]) !== null && _start_ !== void 0 ? _start_ : 0.5;\n var _end_;\n var endX = (_end_ = end === null || end === void 0 ? void 0 : end[0]) !== null && _end_ !== void 0 ? _end_ : 0.5;\n return startX !== endX;\n}\nfunction LinearGradient(param) {\n var { colors, locations, start, end, ...props } = param;\n var normalizedStart = start ? Array.isArray(start) ? start : [\n start.x,\n start.y\n ] : void 0;\n var normalizedEnd = end ? Array.isArray(end) ? end : [\n end.x,\n end.y\n ] : void 0;\n var needsLayout = needsDimensionAwareAngle(normalizedStart, normalizedEnd);\n var [{ height, width }, setLayout] = React.useState({\n height: 1,\n width: 1\n });\n var linearGradientBackgroundImage = React.useMemo(function() {\n return getLinearGradientBackgroundImage(colors, locations, normalizedStart, normalizedEnd, width, height);\n }, [\n colors,\n locations,\n normalizedStart,\n normalizedEnd,\n width,\n height\n ]);\n if (!needsLayout) {\n return /* @__PURE__ */ _jsx(GradientView, {\n ...props,\n backgroundImage: linearGradientBackgroundImage\n });\n }\n return /* @__PURE__ */ _jsx(GradientView, {\n ...props,\n backgroundImage: linearGradientBackgroundImage,\n onLayout: function(event) {\n var { width: width2, height: height2 } = event.nativeEvent.layout;\n setLayout(function(oldLayout) {\n if (width2 !== oldLayout.width || height2 !== oldLayout.height) {\n return {\n height: height2,\n width: width2\n };\n }\n return oldLayout;\n });\n if (props.onLayout) {\n props.onLayout(event);\n }\n }\n });\n}\nfunction getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint) {\n var width = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : 1, height = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 1;\n var gradientColors = calculateGradientColors(colors, locations);\n var angle = calculatePseudoAngle(width, height, startPoint, endPoint);\n return `linear-gradient(${angle}deg, ${gradientColors.join(\", \")})`;\n}\nfunction calculatePseudoAngle(width, height, startPoint, endPoint) {\n var getControlPoints = function() {\n var correctedStartPoint = [\n 0,\n 0\n ];\n if (Array.isArray(startPoint)) {\n correctedStartPoint = [\n startPoint[0] != null ? startPoint[0] : 0,\n startPoint[1] != null ? startPoint[1] : 0\n ];\n }\n var correctedEndPoint = [\n 0,\n 1\n ];\n if (Array.isArray(endPoint)) {\n correctedEndPoint = [\n endPoint[0] != null ? endPoint[0] : 0,\n endPoint[1] != null ? endPoint[1] : 1\n ];\n }\n return [\n correctedStartPoint,\n correctedEndPoint\n ];\n };\n var [start, end] = getControlPoints();\n start[0] *= width;\n end[0] *= width;\n start[1] *= height;\n end[1] *= height;\n var py = end[1] - start[1];\n var px = end[0] - start[0];\n return 90 + Math.atan2(py, px) * 180 / Math.PI;\n}\nfunction calculateGradientColors(colors, locations) {\n return colors.map(function(color, index) {\n var output = normalizeColor(color);\n if (locations && locations[index] !== void 0) {\n var location = Math.max(0, Math.min(1, locations[index]));\n var percentage = location * 100;\n return `${output} ${percentage}%`;\n }\n return output;\n });\n}\nexport {\n LinearGradient\n};\n//# sourceMappingURL=linear-gradient.js.map\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinearGradient.js","names":["
|
|
1
|
+
{"version":3,"file":"LinearGradient.js","names":["GradientBackground"],"sources":["jsx/LinearGradient.js"],"sourcesContent":["import {\n createStyledHOC,\n getTokens,\n getVariableValue,\n normalizeColor,\n styled,\n useTheme\n} from \"@tamagui/core\";\nimport { YStack } from \"@tamagui/stacks\";\nimport { LinearGradient as GradientBackground } from \"./linear-gradient\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nconst LinearGradientFrame = styled(YStack, {\n displayName: \"LinearGradient\",\n overflow: \"hidden\",\n position: \"relative\"\n});\nconst LinearGradient = createStyledHOC(\n LinearGradientFrame,\n (propsIn, ref) => {\n const { start, end, colors: colorsProp, locations, children, ...stackProps } = propsIn;\n const theme = useTheme();\n const colorTokens = getTokens().color;\n let colors = colorsProp?.map((c) => {\n return theme[c]?.get(\"web\") ?? getVariableValue(colorTokens[c]) ?? c;\n }) || [];\n if (process.env.NODE_ENV !== \"production\") {\n if (colors.some((c) => {\n const normalized = normalizeColor(c);\n if (!normalized) {\n return true;\n }\n })) {\n console.error(\n `LinearGradient: \"colors\" prop contains invalid color tokens: ${colors} fallback to default colors: [\"#000\", \"#fff\"]`\n );\n colors = [\"#000\", \"#fff\"];\n }\n }\n return /* @__PURE__ */ jsxs(LinearGradientFrame, { ref, ...stackProps, children: [\n /* @__PURE__ */ jsx(\n GradientBackground,\n {\n start,\n end,\n colors,\n locations,\n style: gradientStyle\n }\n ),\n children\n ] });\n }\n);\nconst gradientStyle = {\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 0\n};\nexport {\n LinearGradient\n};\n//# sourceMappingURL=LinearGradient.js.map\n"],"mappings":";;;;;;AAWA,MAAM,sBAAsB,OAAO,QAAQ;CACzC,aAAa;CACb,UAAU;CACV,UAAU;AACZ,CAAC;AACD,MAAM,iBAAiB,gBACrB,sBACC,SAAS,QAAQ;CAChB,MAAM,EAAE,OAAO,KAAK,QAAQ,YAAY,WAAW,UAAU,GAAG,eAAe;CAC/E,MAAM,QAAQ,SAAS;CACvB,MAAM,cAAc,UAAU,CAAC,CAAC;CAChC,IAAI,SAAS,YAAY,KAAK,MAAM;EAClC,OAAO,MAAM,EAAE,EAAE,IAAI,KAAK,KAAK,iBAAiB,YAAY,EAAE,KAAK;CACrE,CAAC,KAAK,CAAC;CACP,IAAI,QAAQ,IAAI,aAAa,cAAc;EACzC,IAAI,OAAO,MAAM,MAAM;GACrB,MAAM,aAAa,eAAe,CAAC;GACnC,IAAI,CAAC,YAAY;IACf,OAAO;GACT;EACF,CAAC,GAAG;GACF,QAAQ,MACN,gEAAgE,OAAO,8CACzE;GACA,SAAS,CAAC,QAAQ,MAAM;EAC1B;CACF;CACA,OAAuB,qBAAK,qBAAqB;EAAE;EAAK,GAAG;EAAY,UAAU,CAC/D,oBACdA,kBACA;GACE;GACA;GACA;GACA;GACA,OAAO;EACT,CACF,GACA,QACF;CAAE,CAAC;AACL,CACF;AACA,MAAM,gBAAgB;CACpB,UAAU;CACV,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,QAAQ;AACV"}
|
|
@@ -2,7 +2,7 @@ import { View, normalizeColor } from "@tamagui/core";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const GradientView = View;
|
|
6
6
|
function needsDimensionAwareAngle(start, end) {
|
|
7
7
|
if (!start && !end) return false;
|
|
8
8
|
const startX = start?.[0] ?? .5;
|
|
@@ -28,15 +28,14 @@ function LinearGradient({ colors, locations, start, end, ...props }) {
|
|
|
28
28
|
height
|
|
29
29
|
]);
|
|
30
30
|
if (!needsLayout) {
|
|
31
|
-
return /* @__PURE__ */ jsx(
|
|
31
|
+
return /* @__PURE__ */ jsx(GradientView, {
|
|
32
32
|
...props,
|
|
33
|
-
|
|
34
|
-
style: [props.style, { backgroundImage: linearGradientBackgroundImage }]
|
|
33
|
+
backgroundImage: linearGradientBackgroundImage
|
|
35
34
|
});
|
|
36
35
|
}
|
|
37
|
-
return /* @__PURE__ */ jsx(
|
|
36
|
+
return /* @__PURE__ */ jsx(GradientView, {
|
|
38
37
|
...props,
|
|
39
|
-
|
|
38
|
+
backgroundImage: linearGradientBackgroundImage,
|
|
40
39
|
onLayout: (event) => {
|
|
41
40
|
const { width: width2, height: height2 } = event.nativeEvent.layout;
|
|
42
41
|
setLayout((oldLayout) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"linear-gradient.js","names":[],"sources":["jsx/linear-gradient.js"],"sourcesContent":["import { View, normalizeColor } from \"@tamagui/core\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst
|
|
1
|
+
{"version":3,"file":"linear-gradient.js","names":[],"sources":["jsx/linear-gradient.js"],"sourcesContent":["import { View, normalizeColor } from \"@tamagui/core\";\nimport * as React from \"react\";\nimport { jsx } from \"react/jsx-runtime\";\nconst GradientView = View;\nfunction needsDimensionAwareAngle(start, end) {\n if (!start && !end) return false;\n const startX = start?.[0] ?? 0.5;\n const endX = end?.[0] ?? 0.5;\n return startX !== endX;\n}\nfunction LinearGradient({\n colors,\n locations,\n start,\n end,\n ...props\n}) {\n const normalizedStart = start ? Array.isArray(start) ? start : [start.x, start.y] : void 0;\n const normalizedEnd = end ? Array.isArray(end) ? end : [end.x, end.y] : void 0;\n const needsLayout = needsDimensionAwareAngle(\n normalizedStart,\n normalizedEnd\n );\n const [{ height, width }, setLayout] = React.useState({\n height: 1,\n width: 1\n });\n const linearGradientBackgroundImage = React.useMemo(() => {\n return getLinearGradientBackgroundImage(\n colors,\n locations,\n normalizedStart,\n normalizedEnd,\n width,\n height\n );\n }, [colors, locations, normalizedStart, normalizedEnd, width, height]);\n if (!needsLayout) {\n return /* @__PURE__ */ jsx(GradientView, { ...props, backgroundImage: linearGradientBackgroundImage });\n }\n return /* @__PURE__ */ jsx(\n GradientView,\n {\n ...props,\n backgroundImage: linearGradientBackgroundImage,\n onLayout: (event) => {\n const { width: width2, height: height2 } = event.nativeEvent.layout;\n setLayout((oldLayout) => {\n if (width2 !== oldLayout.width || height2 !== oldLayout.height) {\n return { height: height2, width: width2 };\n }\n return oldLayout;\n });\n if (props.onLayout) {\n props.onLayout(event);\n }\n }\n }\n );\n}\nfunction getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width = 1, height = 1) {\n const gradientColors = calculateGradientColors(colors, locations);\n const angle = calculatePseudoAngle(width, height, startPoint, endPoint);\n return `linear-gradient(${angle}deg, ${gradientColors.join(\", \")})`;\n}\nfunction calculatePseudoAngle(width, height, startPoint, endPoint) {\n const getControlPoints = () => {\n let correctedStartPoint = [0, 0];\n if (Array.isArray(startPoint)) {\n correctedStartPoint = [\n startPoint[0] != null ? startPoint[0] : 0,\n startPoint[1] != null ? startPoint[1] : 0\n ];\n }\n let correctedEndPoint = [0, 1];\n if (Array.isArray(endPoint)) {\n correctedEndPoint = [\n endPoint[0] != null ? endPoint[0] : 0,\n endPoint[1] != null ? endPoint[1] : 1\n ];\n }\n return [correctedStartPoint, correctedEndPoint];\n };\n const [start, end] = getControlPoints();\n start[0] *= width;\n end[0] *= width;\n start[1] *= height;\n end[1] *= height;\n const py = end[1] - start[1];\n const px = end[0] - start[0];\n return 90 + Math.atan2(py, px) * 180 / Math.PI;\n}\nfunction calculateGradientColors(colors, locations) {\n return colors.map((color, index) => {\n const output = normalizeColor(color);\n if (locations && locations[index] !== void 0) {\n const location = Math.max(0, Math.min(1, locations[index]));\n const percentage = location * 100;\n return `${output} ${percentage}%`;\n }\n return output;\n });\n}\nexport {\n LinearGradient\n};\n//# sourceMappingURL=linear-gradient.js.map\n"],"mappings":"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"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
9
|
var __export = (target, all) => {
|
|
8
10
|
for (var name in all) __defProp(target, name, {
|
|
@@ -19,18 +21,106 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
21
|
}
|
|
20
22
|
return to;
|
|
21
23
|
};
|
|
24
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
25
|
+
value: mod,
|
|
26
|
+
enumerable: true
|
|
27
|
+
}) : target, mod));
|
|
22
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
|
-
var
|
|
24
|
-
__export(
|
|
25
|
-
module.exports = __toCommonJS(
|
|
29
|
+
var linear_gradient_exports = {};
|
|
30
|
+
__export(linear_gradient_exports, { LinearGradient: () => LinearGradient });
|
|
31
|
+
module.exports = __toCommonJS(linear_gradient_exports);
|
|
26
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
27
|
-
var
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
+
var import_core = require("@tamagui/core");
|
|
34
|
+
var React = __toESM(require("react"), 1);
|
|
35
|
+
var GradientView = import_core.View;
|
|
36
|
+
function needsDimensionAwareAngle(start, end) {
|
|
37
|
+
if (!start && !end) return false;
|
|
38
|
+
var _start_;
|
|
39
|
+
var startX = (_start_ = start === null || start === void 0 ? void 0 : start[0]) !== null && _start_ !== void 0 ? _start_ : .5;
|
|
40
|
+
var _end_;
|
|
41
|
+
var endX = (_end_ = end === null || end === void 0 ? void 0 : end[0]) !== null && _end_ !== void 0 ? _end_ : .5;
|
|
42
|
+
return startX !== endX;
|
|
43
|
+
}
|
|
44
|
+
function LinearGradient(param) {
|
|
45
|
+
var { colors, locations, start, end, ...props } = param;
|
|
46
|
+
var normalizedStart = start ? Array.isArray(start) ? start : [start.x, start.y] : void 0;
|
|
47
|
+
var normalizedEnd = end ? Array.isArray(end) ? end : [end.x, end.y] : void 0;
|
|
48
|
+
var needsLayout = needsDimensionAwareAngle(normalizedStart, normalizedEnd);
|
|
49
|
+
var [{ height, width }, setLayout] = React.useState({
|
|
50
|
+
height: 1,
|
|
51
|
+
width: 1
|
|
52
|
+
});
|
|
53
|
+
var linearGradientBackgroundImage = React.useMemo(function() {
|
|
54
|
+
return getLinearGradientBackgroundImage(colors, locations, normalizedStart, normalizedEnd, width, height);
|
|
55
|
+
}, [
|
|
56
|
+
colors,
|
|
57
|
+
locations,
|
|
58
|
+
normalizedStart,
|
|
59
|
+
normalizedEnd,
|
|
60
|
+
width,
|
|
61
|
+
height
|
|
62
|
+
]);
|
|
63
|
+
if (!needsLayout) {
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {
|
|
65
|
+
...props,
|
|
66
|
+
backgroundImage: linearGradientBackgroundImage
|
|
67
|
+
});
|
|
33
68
|
}
|
|
34
|
-
|
|
35
|
-
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {
|
|
70
|
+
...props,
|
|
71
|
+
backgroundImage: linearGradientBackgroundImage,
|
|
72
|
+
onLayout: function(event) {
|
|
73
|
+
var { width: width2, height: height2 } = event.nativeEvent.layout;
|
|
74
|
+
setLayout(function(oldLayout) {
|
|
75
|
+
if (width2 !== oldLayout.width || height2 !== oldLayout.height) {
|
|
76
|
+
return {
|
|
77
|
+
height: height2,
|
|
78
|
+
width: width2
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
return oldLayout;
|
|
82
|
+
});
|
|
83
|
+
if (props.onLayout) {
|
|
84
|
+
props.onLayout(event);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint) {
|
|
90
|
+
var width = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : 1, height = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 1;
|
|
91
|
+
var gradientColors = calculateGradientColors(colors, locations);
|
|
92
|
+
var angle = calculatePseudoAngle(width, height, startPoint, endPoint);
|
|
93
|
+
return `linear-gradient(${angle}deg, ${gradientColors.join(", ")})`;
|
|
94
|
+
}
|
|
95
|
+
function calculatePseudoAngle(width, height, startPoint, endPoint) {
|
|
96
|
+
var getControlPoints = function() {
|
|
97
|
+
var correctedStartPoint = [0, 0];
|
|
98
|
+
if (Array.isArray(startPoint)) {
|
|
99
|
+
correctedStartPoint = [startPoint[0] != null ? startPoint[0] : 0, startPoint[1] != null ? startPoint[1] : 0];
|
|
100
|
+
}
|
|
101
|
+
var correctedEndPoint = [0, 1];
|
|
102
|
+
if (Array.isArray(endPoint)) {
|
|
103
|
+
correctedEndPoint = [endPoint[0] != null ? endPoint[0] : 0, endPoint[1] != null ? endPoint[1] : 1];
|
|
104
|
+
}
|
|
105
|
+
return [correctedStartPoint, correctedEndPoint];
|
|
106
|
+
};
|
|
107
|
+
var [start, end] = getControlPoints();
|
|
108
|
+
start[0] *= width;
|
|
109
|
+
end[0] *= width;
|
|
110
|
+
start[1] *= height;
|
|
111
|
+
end[1] *= height;
|
|
112
|
+
var py = end[1] - start[1];
|
|
113
|
+
var px = end[0] - start[0];
|
|
114
|
+
return 90 + Math.atan2(py, px) * 180 / Math.PI;
|
|
115
|
+
}
|
|
116
|
+
function calculateGradientColors(colors, locations) {
|
|
117
|
+
return colors.map(function(color, index) {
|
|
118
|
+
var output = (0, import_core.normalizeColor)(color);
|
|
119
|
+
if (locations && locations[index] !== void 0) {
|
|
120
|
+
var location = Math.max(0, Math.min(1, locations[index]));
|
|
121
|
+
var percentage = location * 100;
|
|
122
|
+
return `${output} ${percentage}%`;
|
|
123
|
+
}
|
|
124
|
+
return output;
|
|
125
|
+
});
|
|
36
126
|
}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
8
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
9
|
var __export = (target, all) => {
|
|
8
10
|
for (var name in all) __defProp(target, name, {
|
|
@@ -19,20 +21,108 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
21
|
}
|
|
20
22
|
return to;
|
|
21
23
|
};
|
|
24
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
25
|
+
value: mod,
|
|
26
|
+
enumerable: true
|
|
27
|
+
}) : target, mod));
|
|
22
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
|
-
var
|
|
24
|
-
__export(
|
|
25
|
-
module.exports = __toCommonJS(
|
|
29
|
+
var linear_gradient_exports = {};
|
|
30
|
+
__export(linear_gradient_exports, { LinearGradient: () => LinearGradient });
|
|
31
|
+
module.exports = __toCommonJS(linear_gradient_exports);
|
|
26
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
27
|
-
var
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
+
var import_core = require("@tamagui/core");
|
|
34
|
+
var React = __toESM(require("react"), 1);
|
|
35
|
+
var GradientView = import_core.View;
|
|
36
|
+
function needsDimensionAwareAngle(start, end) {
|
|
37
|
+
if (!start && !end) return false;
|
|
38
|
+
var _start_;
|
|
39
|
+
var startX = (_start_ = start === null || start === void 0 ? void 0 : start[0]) !== null && _start_ !== void 0 ? _start_ : .5;
|
|
40
|
+
var _end_;
|
|
41
|
+
var endX = (_end_ = end === null || end === void 0 ? void 0 : end[0]) !== null && _end_ !== void 0 ? _end_ : .5;
|
|
42
|
+
return startX !== endX;
|
|
43
|
+
}
|
|
44
|
+
function LinearGradient(param) {
|
|
45
|
+
var { colors, locations, start, end, ...props } = param;
|
|
46
|
+
var normalizedStart = start ? Array.isArray(start) ? start : [start.x, start.y] : void 0;
|
|
47
|
+
var normalizedEnd = end ? Array.isArray(end) ? end : [end.x, end.y] : void 0;
|
|
48
|
+
var needsLayout = needsDimensionAwareAngle(normalizedStart, normalizedEnd);
|
|
49
|
+
var [{ height, width }, setLayout] = React.useState({
|
|
50
|
+
height: 1,
|
|
51
|
+
width: 1
|
|
52
|
+
});
|
|
53
|
+
var linearGradientBackgroundImage = React.useMemo(function() {
|
|
54
|
+
return getLinearGradientBackgroundImage(colors, locations, normalizedStart, normalizedEnd, width, height);
|
|
55
|
+
}, [
|
|
56
|
+
colors,
|
|
57
|
+
locations,
|
|
58
|
+
normalizedStart,
|
|
59
|
+
normalizedEnd,
|
|
60
|
+
width,
|
|
61
|
+
height
|
|
62
|
+
]);
|
|
63
|
+
if (!needsLayout) {
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {
|
|
65
|
+
...props,
|
|
66
|
+
backgroundImage: linearGradientBackgroundImage
|
|
67
|
+
});
|
|
33
68
|
}
|
|
34
|
-
|
|
35
|
-
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {
|
|
70
|
+
...props,
|
|
71
|
+
backgroundImage: linearGradientBackgroundImage,
|
|
72
|
+
onLayout: function(event) {
|
|
73
|
+
var { width: width2, height: height2 } = event.nativeEvent.layout;
|
|
74
|
+
setLayout(function(oldLayout) {
|
|
75
|
+
if (width2 !== oldLayout.width || height2 !== oldLayout.height) {
|
|
76
|
+
return {
|
|
77
|
+
height: height2,
|
|
78
|
+
width: width2
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
return oldLayout;
|
|
82
|
+
});
|
|
83
|
+
if (props.onLayout) {
|
|
84
|
+
props.onLayout(event);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint) {
|
|
90
|
+
var width = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : 1, height = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 1;
|
|
91
|
+
var gradientColors = calculateGradientColors(colors, locations);
|
|
92
|
+
var angle = calculatePseudoAngle(width, height, startPoint, endPoint);
|
|
93
|
+
return `linear-gradient(${angle}deg, ${gradientColors.join(", ")})`;
|
|
94
|
+
}
|
|
95
|
+
function calculatePseudoAngle(width, height, startPoint, endPoint) {
|
|
96
|
+
var getControlPoints = function() {
|
|
97
|
+
var correctedStartPoint = [0, 0];
|
|
98
|
+
if (Array.isArray(startPoint)) {
|
|
99
|
+
correctedStartPoint = [startPoint[0] != null ? startPoint[0] : 0, startPoint[1] != null ? startPoint[1] : 0];
|
|
100
|
+
}
|
|
101
|
+
var correctedEndPoint = [0, 1];
|
|
102
|
+
if (Array.isArray(endPoint)) {
|
|
103
|
+
correctedEndPoint = [endPoint[0] != null ? endPoint[0] : 0, endPoint[1] != null ? endPoint[1] : 1];
|
|
104
|
+
}
|
|
105
|
+
return [correctedStartPoint, correctedEndPoint];
|
|
106
|
+
};
|
|
107
|
+
var [start, end] = getControlPoints();
|
|
108
|
+
start[0] *= width;
|
|
109
|
+
end[0] *= width;
|
|
110
|
+
start[1] *= height;
|
|
111
|
+
end[1] *= height;
|
|
112
|
+
var py = end[1] - start[1];
|
|
113
|
+
var px = end[0] - start[0];
|
|
114
|
+
return 90 + Math.atan2(py, px) * 180 / Math.PI;
|
|
115
|
+
}
|
|
116
|
+
function calculateGradientColors(colors, locations) {
|
|
117
|
+
return colors.map(function(color, index) {
|
|
118
|
+
var output = (0, import_core.normalizeColor)(color);
|
|
119
|
+
if (locations && locations[index] !== void 0) {
|
|
120
|
+
var location = Math.max(0, Math.min(1, locations[index]));
|
|
121
|
+
var percentage = location * 100;
|
|
122
|
+
return `${output} ${percentage}%`;
|
|
123
|
+
}
|
|
124
|
+
return output;
|
|
125
|
+
});
|
|
36
126
|
}
|
|
37
127
|
|
|
38
128
|
//# sourceMappingURL=linear-gradient.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"linear-gradient.native.js","names":[],"sources":["jsx/linear-gradient.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar
|
|
1
|
+
{"version":3,"file":"linear-gradient.native.js","names":[],"sources":["jsx/linear-gradient.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n for (var name in all)\n __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n if (from && typeof from === \"object\" || typeof from === \"function\") {\n for (let key of __getOwnPropNames(from))\n if (!__hasOwnProp.call(to, key) && key !== except)\n __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n }\n return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n // If the importer is in node compatibility mode or this is not an ESM\n // file that has been converted to a CommonJS file using a Babel-\n // compatible transform (i.e. \"__esModule\" has not been set), then set\n // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar linear_gradient_exports = {};\n__export(linear_gradient_exports, {\n LinearGradient: () => LinearGradient\n});\nmodule.exports = __toCommonJS(linear_gradient_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_core = require(\"@tamagui/core\");\nvar React = __toESM(require(\"react\"), 1);\nvar GradientView = import_core.View;\nfunction needsDimensionAwareAngle(start, end) {\n if (!start && !end) return false;\n var _start_;\n var startX = (_start_ = start === null || start === void 0 ? void 0 : start[0]) !== null && _start_ !== void 0 ? _start_ : 0.5;\n var _end_;\n var endX = (_end_ = end === null || end === void 0 ? void 0 : end[0]) !== null && _end_ !== void 0 ? _end_ : 0.5;\n return startX !== endX;\n}\nfunction LinearGradient(param) {\n var { colors, locations, start, end, ...props } = param;\n var normalizedStart = start ? Array.isArray(start) ? start : [\n start.x,\n start.y\n ] : void 0;\n var normalizedEnd = end ? Array.isArray(end) ? end : [\n end.x,\n end.y\n ] : void 0;\n var needsLayout = needsDimensionAwareAngle(normalizedStart, normalizedEnd);\n var [{ height, width }, setLayout] = React.useState({\n height: 1,\n width: 1\n });\n var linearGradientBackgroundImage = React.useMemo(function() {\n return getLinearGradientBackgroundImage(colors, locations, normalizedStart, normalizedEnd, width, height);\n }, [\n colors,\n locations,\n normalizedStart,\n normalizedEnd,\n width,\n height\n ]);\n if (!needsLayout) {\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {\n ...props,\n backgroundImage: linearGradientBackgroundImage\n });\n }\n return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GradientView, {\n ...props,\n backgroundImage: linearGradientBackgroundImage,\n onLayout: function(event) {\n var { width: width2, height: height2 } = event.nativeEvent.layout;\n setLayout(function(oldLayout) {\n if (width2 !== oldLayout.width || height2 !== oldLayout.height) {\n return {\n height: height2,\n width: width2\n };\n }\n return oldLayout;\n });\n if (props.onLayout) {\n props.onLayout(event);\n }\n }\n });\n}\nfunction getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint) {\n var width = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : 1, height = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 1;\n var gradientColors = calculateGradientColors(colors, locations);\n var angle = calculatePseudoAngle(width, height, startPoint, endPoint);\n return `linear-gradient(${angle}deg, ${gradientColors.join(\", \")})`;\n}\nfunction calculatePseudoAngle(width, height, startPoint, endPoint) {\n var getControlPoints = function() {\n var correctedStartPoint = [\n 0,\n 0\n ];\n if (Array.isArray(startPoint)) {\n correctedStartPoint = [\n startPoint[0] != null ? startPoint[0] : 0,\n startPoint[1] != null ? startPoint[1] : 0\n ];\n }\n var correctedEndPoint = [\n 0,\n 1\n ];\n if (Array.isArray(endPoint)) {\n correctedEndPoint = [\n endPoint[0] != null ? endPoint[0] : 0,\n endPoint[1] != null ? endPoint[1] : 1\n ];\n }\n return [\n correctedStartPoint,\n correctedEndPoint\n ];\n };\n var [start, end] = getControlPoints();\n start[0] *= width;\n end[0] *= width;\n start[1] *= height;\n end[1] *= height;\n var py = end[1] - start[1];\n var px = end[0] - start[0];\n return 90 + Math.atan2(py, px) * 180 / Math.PI;\n}\nfunction calculateGradientColors(colors, locations) {\n return colors.map(function(color, index) {\n var output = (0, import_core.normalizeColor)(color);\n if (locations && locations[index] !== void 0) {\n var location = Math.max(0, Math.min(1, locations[index]));\n var percentage = location * 100;\n return `${output} ${percentage}%`;\n }\n return output;\n });\n}\n//# sourceMappingURL=linear-gradient.js.map\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/linear-gradient",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.1464.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"files": [
|
|
@@ -35,14 +35,12 @@
|
|
|
35
35
|
"clean:build": "tamagui-build clean:build"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@tamagui/core": "3.0.0-beta.
|
|
39
|
-
"@tamagui/native": "3.0.0-beta.
|
|
40
|
-
"@tamagui/
|
|
41
|
-
"@tamagui/stacks": "3.0.0-beta.1455.1"
|
|
38
|
+
"@tamagui/core": "3.0.0-beta.1464.1",
|
|
39
|
+
"@tamagui/react-native-types": "3.0.0-beta.1464.1",
|
|
40
|
+
"@tamagui/stacks": "3.0.0-beta.1464.1"
|
|
42
41
|
},
|
|
43
42
|
"devDependencies": {
|
|
44
|
-
"@tamagui/build": "3.0.0-beta.
|
|
45
|
-
"expo-linear-gradient": "~57.0.1",
|
|
43
|
+
"@tamagui/build": "3.0.0-beta.1464.1",
|
|
46
44
|
"react": "19.2.3",
|
|
47
45
|
"react-native": "0.86.2"
|
|
48
46
|
},
|
package/src/LinearGradient.tsx
CHANGED
|
@@ -11,9 +11,8 @@ import { YStack } from '@tamagui/stacks'
|
|
|
11
11
|
import type { ViewStyle } from '@tamagui/react-native-types'
|
|
12
12
|
|
|
13
13
|
import type { LinearGradientPoint } from './linear-gradient'
|
|
14
|
-
import { LinearGradient as
|
|
14
|
+
import { LinearGradient as GradientBackground } from './linear-gradient'
|
|
15
15
|
|
|
16
|
-
// taken from expo-linear-gradient
|
|
17
16
|
export type LinearGradientExtraProps = {
|
|
18
17
|
colors?: (ColorTokens | ThemeTokens | (string & {}))[]
|
|
19
18
|
locations?: number[] | null
|
|
@@ -61,11 +60,11 @@ export const LinearGradient = createStyledHOC(
|
|
|
61
60
|
|
|
62
61
|
return (
|
|
63
62
|
<LinearGradientFrame ref={ref as any} {...stackProps}>
|
|
64
|
-
<
|
|
63
|
+
<GradientBackground
|
|
65
64
|
start={start}
|
|
66
65
|
end={end}
|
|
67
|
-
colors={colors
|
|
68
|
-
locations={locations
|
|
66
|
+
colors={colors}
|
|
67
|
+
locations={locations}
|
|
69
68
|
style={gradientStyle}
|
|
70
69
|
/>
|
|
71
70
|
{children}
|
package/src/linear-gradient.tsx
CHANGED
|
@@ -7,17 +7,26 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
import { View, normalizeColor } from '@tamagui/core'
|
|
10
|
-
import
|
|
11
|
-
LinearGradientPoint,
|
|
12
|
-
LinearGradientProps,
|
|
13
|
-
NativeLinearGradientPoint,
|
|
14
|
-
} from 'expo-linear-gradient'
|
|
10
|
+
import * as React from 'react'
|
|
15
11
|
|
|
16
|
-
|
|
12
|
+
type NativeLinearGradientPoint = [x: number, y: number]
|
|
17
13
|
|
|
18
|
-
|
|
14
|
+
export type LinearGradientPoint = { x: number; y: number } | NativeLinearGradientPoint
|
|
15
|
+
|
|
16
|
+
// start and end are the gradient's points here, not View's logical insets.
|
|
17
|
+
export type LinearGradientProps = Omit<
|
|
18
|
+
React.ComponentProps<typeof View>,
|
|
19
|
+
'start' | 'end'
|
|
20
|
+
> & {
|
|
21
|
+
colors: readonly string[]
|
|
22
|
+
locations?: readonly number[] | null
|
|
23
|
+
start?: LinearGradientPoint | null
|
|
24
|
+
end?: LinearGradientPoint | null
|
|
25
|
+
}
|
|
19
26
|
|
|
20
|
-
|
|
27
|
+
// one path on every platform: a backgroundImage gradient, which react native
|
|
28
|
+
// draws natively (experimental_backgroundImage) and the web draws as css.
|
|
29
|
+
const GradientView = View as React.ComponentType<any>
|
|
21
30
|
|
|
22
31
|
// check if start/end points require dimension-aware angle calculation
|
|
23
32
|
function needsDimensionAwareAngle(
|
|
@@ -62,7 +71,6 @@ export function LinearGradient({
|
|
|
62
71
|
|
|
63
72
|
const linearGradientBackgroundImage = React.useMemo(() => {
|
|
64
73
|
return getLinearGradientBackgroundImage(
|
|
65
|
-
// @ts-expect-error ok
|
|
66
74
|
colors,
|
|
67
75
|
locations,
|
|
68
76
|
normalizedStart as NativeLinearGradientPoint,
|
|
@@ -74,27 +82,13 @@ export function LinearGradient({
|
|
|
74
82
|
|
|
75
83
|
// if we don't need dimension-aware angles, skip the onLayout overhead
|
|
76
84
|
if (!needsLayout) {
|
|
77
|
-
return
|
|
78
|
-
<WebView
|
|
79
|
-
{...props}
|
|
80
|
-
onLayout={props.onLayout}
|
|
81
|
-
style={[
|
|
82
|
-
props.style,
|
|
83
|
-
// @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
|
|
84
|
-
{ backgroundImage: linearGradientBackgroundImage },
|
|
85
|
-
]}
|
|
86
|
-
/>
|
|
87
|
-
)
|
|
85
|
+
return <GradientView {...props} backgroundImage={linearGradientBackgroundImage} />
|
|
88
86
|
}
|
|
89
87
|
|
|
90
88
|
return (
|
|
91
|
-
<
|
|
89
|
+
<GradientView
|
|
92
90
|
{...props}
|
|
93
|
-
|
|
94
|
-
props.style,
|
|
95
|
-
// @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
|
|
96
|
-
{ backgroundImage: linearGradientBackgroundImage },
|
|
97
|
-
]}
|
|
91
|
+
backgroundImage={linearGradientBackgroundImage}
|
|
98
92
|
onLayout={(event) => {
|
|
99
93
|
const { width, height } = event.nativeEvent.layout
|
|
100
94
|
|
|
@@ -116,18 +110,14 @@ export function LinearGradient({
|
|
|
116
110
|
}
|
|
117
111
|
|
|
118
112
|
function getLinearGradientBackgroundImage(
|
|
119
|
-
colors:
|
|
120
|
-
locations?: number[] | null,
|
|
113
|
+
colors: readonly string[],
|
|
114
|
+
locations?: readonly number[] | null,
|
|
121
115
|
startPoint?: NativeLinearGradientPoint | null,
|
|
122
116
|
endPoint?: NativeLinearGradientPoint | null,
|
|
123
117
|
width = 1,
|
|
124
118
|
height = 1
|
|
125
119
|
) {
|
|
126
|
-
const gradientColors = calculateGradientColors(
|
|
127
|
-
// @ts-expect-error TODO fix numbers
|
|
128
|
-
colors,
|
|
129
|
-
locations
|
|
130
|
-
)
|
|
120
|
+
const gradientColors = calculateGradientColors(colors, locations)
|
|
131
121
|
const angle = calculatePseudoAngle(width, height, startPoint, endPoint)
|
|
132
122
|
return `linear-gradient(${angle}deg, ${gradientColors.join(', ')})`
|
|
133
123
|
}
|
|
@@ -167,7 +157,10 @@ function calculatePseudoAngle(
|
|
|
167
157
|
return 90 + (Math.atan2(py, px) * 180) / Math.PI
|
|
168
158
|
}
|
|
169
159
|
|
|
170
|
-
function calculateGradientColors(
|
|
160
|
+
function calculateGradientColors(
|
|
161
|
+
colors: readonly string[],
|
|
162
|
+
locations?: readonly number[] | null
|
|
163
|
+
) {
|
|
171
164
|
return colors.map((color: string, index: number): string | void => {
|
|
172
165
|
const output = normalizeColor(color)
|
|
173
166
|
if (locations && locations[index] !== undefined) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../src/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAYvE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"LinearGradient.d.ts","sourceRoot":"","sources":["../src/LinearGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAYvE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAG5D,MAAM,MAAM,wBAAwB,GAAG;IACrC,MAAM,CAAC,EAAE,CAAC,WAAW,GAAG,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAA;IACtD,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;IAC3B,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;IAClC,GAAG,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;CACjC,CAAA;AAQD,eAAO,MAAM,cAAc,oxJA6C1B,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAA"}
|
|
@@ -5,8 +5,19 @@
|
|
|
5
5
|
* MIT License
|
|
6
6
|
* Copyright (c) 2015-present 650 Industries, Inc. (aka Expo)
|
|
7
7
|
*/
|
|
8
|
-
import
|
|
9
|
-
export type { LinearGradientPoint, LinearGradientProps } from 'expo-linear-gradient';
|
|
8
|
+
import { View } from '@tamagui/core';
|
|
10
9
|
import * as React from 'react';
|
|
10
|
+
type NativeLinearGradientPoint = [x: number, y: number];
|
|
11
|
+
export type LinearGradientPoint = {
|
|
12
|
+
x: number;
|
|
13
|
+
y: number;
|
|
14
|
+
} | NativeLinearGradientPoint;
|
|
15
|
+
export type LinearGradientProps = Omit<React.ComponentProps<typeof View>, 'start' | 'end'> & {
|
|
16
|
+
colors: readonly string[];
|
|
17
|
+
locations?: readonly number[] | null;
|
|
18
|
+
start?: LinearGradientPoint | null;
|
|
19
|
+
end?: LinearGradientPoint | null;
|
|
20
|
+
};
|
|
11
21
|
export declare function LinearGradient({ colors, locations, start, end, ...props }: LinearGradientProps): React.JSX.Element;
|
|
22
|
+
export {};
|
|
12
23
|
//# sourceMappingURL=linear-gradient.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"linear-gradient.d.ts","sourceRoot":"","sources":["../src/linear-gradient.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;
|
|
1
|
+
{"version":3,"file":"linear-gradient.d.ts","sourceRoot":"","sources":["../src/linear-gradient.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,IAAI,EAAkB,MAAM,eAAe,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,yBAAyB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAA;AAEvD,MAAM,MAAM,mBAAmB,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,yBAAyB,CAAA;AAGtF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,OAAO,GAAG,KAAK,CAChB,GAAG;IACF,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAA;IACpC,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;IAClC,GAAG,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAA;CACjC,CAAA;AAuBD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,qBAwDrB"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { getLinearGradient } from '@tamagui/native'
|
|
2
|
-
|
|
3
|
-
export type { LinearGradientProps, LinearGradientPoint } from 'expo-linear-gradient'
|
|
4
|
-
|
|
5
|
-
export function LinearGradient(props: any) {
|
|
6
|
-
const state = getLinearGradient().state
|
|
7
|
-
if (state.enabled && state.Component) {
|
|
8
|
-
const ExpoLinearGradient = state.Component
|
|
9
|
-
return <ExpoLinearGradient {...props} />
|
|
10
|
-
}
|
|
11
|
-
console.warn(
|
|
12
|
-
`Warning: Must call import '@tamagui/native/setup-expo-linear-gradient' at root`
|
|
13
|
-
)
|
|
14
|
-
return
|
|
15
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"linear-gradient.native.d.ts","sourceRoot":"","sources":["../src/linear-gradient.native.tsx"],"names":[],"mappings":"AAEA,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAEpF,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,2CAUxC"}
|