@tamagui/linear-gradient 3.0.0-beta.924.1 → 3.0.0
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 +9 -8
- package/src/LinearGradient.tsx +5 -6
- package/src/linear-gradient.tsx +27 -34
- package/types/LinearGradient.d.ts +1 -9
- 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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"}
|