@tamagui/linear-gradient 2.0.0-rc.3 → 2.0.0-rc.31
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/esm/index.js +2 -6
- package/dist/esm/index.js.map +1 -6
- package/dist/jsx/index.js +2 -6
- package/dist/jsx/index.js.map +1 -6
- package/package.json +10 -13
- package/dist/cjs/LinearGradient.js +0 -57
- package/dist/cjs/LinearGradient.js.map +0 -6
- package/dist/cjs/index.js +0 -21
- package/dist/cjs/index.js.map +0 -6
- package/dist/cjs/linear-gradient.js +0 -118
- package/dist/cjs/linear-gradient.js.map +0 -6
- package/dist/esm/LinearGradient.js +0 -44
- package/dist/esm/LinearGradient.js.map +0 -6
- package/dist/esm/linear-gradient.js +0 -97
- package/dist/esm/linear-gradient.js.map +0 -6
- package/dist/jsx/LinearGradient.js +0 -44
- package/dist/jsx/LinearGradient.js.map +0 -6
- package/dist/jsx/linear-gradient.js +0 -97
- package/dist/jsx/linear-gradient.js.map +0 -6
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
package/dist/jsx/index.js
CHANGED
package/dist/jsx/index.js.map
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/linear-gradient",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.31",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"files": [
|
|
6
6
|
"src",
|
|
@@ -18,15 +18,12 @@
|
|
|
18
18
|
"./package.json": "./package.json",
|
|
19
19
|
".": {
|
|
20
20
|
"types": "./types/index.d.ts",
|
|
21
|
-
"react-native":
|
|
22
|
-
|
|
23
|
-
"import": "./dist/esm/index.native.js",
|
|
24
|
-
"require": "./dist/cjs/index.native.js"
|
|
25
|
-
},
|
|
21
|
+
"react-native": "./dist/esm/index.native.js",
|
|
22
|
+
"browser": "./dist/esm/index.mjs",
|
|
26
23
|
"module": "./dist/esm/index.mjs",
|
|
27
24
|
"import": "./dist/esm/index.mjs",
|
|
28
25
|
"require": "./dist/cjs/index.cjs",
|
|
29
|
-
"default": "./dist/
|
|
26
|
+
"default": "./dist/esm/index.mjs"
|
|
30
27
|
}
|
|
31
28
|
},
|
|
32
29
|
"publishConfig": {
|
|
@@ -39,15 +36,15 @@
|
|
|
39
36
|
"clean:build": "tamagui-build clean:build"
|
|
40
37
|
},
|
|
41
38
|
"dependencies": {
|
|
42
|
-
"@tamagui/core": "2.0.0-rc.
|
|
43
|
-
"@tamagui/native": "2.0.0-rc.
|
|
44
|
-
"@tamagui/stacks": "2.0.0-rc.
|
|
39
|
+
"@tamagui/core": "2.0.0-rc.31",
|
|
40
|
+
"@tamagui/native": "2.0.0-rc.31",
|
|
41
|
+
"@tamagui/stacks": "2.0.0-rc.31"
|
|
45
42
|
},
|
|
46
43
|
"devDependencies": {
|
|
47
|
-
"@tamagui/build": "2.0.0-rc.
|
|
48
|
-
"expo-linear-gradient": "~
|
|
44
|
+
"@tamagui/build": "2.0.0-rc.31",
|
|
45
|
+
"expo-linear-gradient": "~55.0.8",
|
|
49
46
|
"react": ">=19",
|
|
50
|
-
"react-native": "0.
|
|
47
|
+
"react-native": "0.83.2"
|
|
51
48
|
},
|
|
52
49
|
"peerDependencies": {
|
|
53
50
|
"react": ">=19",
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all)
|
|
7
|
-
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
-
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
-
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
-
for (let key of __getOwnPropNames(from))
|
|
11
|
-
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
-
var LinearGradient_exports = {};
|
|
16
|
-
__export(LinearGradient_exports, {
|
|
17
|
-
LinearGradient: () => LinearGradient
|
|
18
|
-
});
|
|
19
|
-
module.exports = __toCommonJS(LinearGradient_exports);
|
|
20
|
-
var import_core = require("@tamagui/core"), import_stacks = require("@tamagui/stacks"), import_linear_gradient = require("./linear-gradient"), import_jsx_runtime = require("react/jsx-runtime");
|
|
21
|
-
const LinearGradientFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
22
|
-
name: "LinearGradient",
|
|
23
|
-
overflow: "hidden",
|
|
24
|
-
position: "relative"
|
|
25
|
-
}), LinearGradient = LinearGradientFrame.styleable(
|
|
26
|
-
(propsIn, ref) => {
|
|
27
|
-
const props = (0, import_core.useProps)(propsIn), { start, end, colors: colorsProp, locations, children, ...stackProps } = props, theme = (0, import_core.useTheme)();
|
|
28
|
-
let colors = props.colors?.map((c) => theme[c]?.get("web") ?? c) || [];
|
|
29
|
-
return process.env.NODE_ENV !== "production" && colors.some((c) => {
|
|
30
|
-
const normalized = (0, import_core.normalizeColor)(c);
|
|
31
|
-
if (!normalized || normalized.startsWith("$"))
|
|
32
|
-
return !0;
|
|
33
|
-
}) && (console.error(
|
|
34
|
-
`LinearGradient: "colors" prop contains invalid color tokens: ${colors} fallback to default colors: ["#000", "#fff"]`
|
|
35
|
-
), colors = ["#000", "#fff"]), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LinearGradientFrame, { ref, ...stackProps, children: [
|
|
36
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
37
|
-
import_linear_gradient.LinearGradient,
|
|
38
|
-
{
|
|
39
|
-
start,
|
|
40
|
-
end,
|
|
41
|
-
colors,
|
|
42
|
-
locations,
|
|
43
|
-
style: gradientStyle
|
|
44
|
-
}
|
|
45
|
-
),
|
|
46
|
-
children
|
|
47
|
-
] });
|
|
48
|
-
}
|
|
49
|
-
), gradientStyle = {
|
|
50
|
-
position: "absolute",
|
|
51
|
-
top: 0,
|
|
52
|
-
left: 0,
|
|
53
|
-
right: 0,
|
|
54
|
-
bottom: 0,
|
|
55
|
-
zIndex: 0
|
|
56
|
-
};
|
|
57
|
-
//# sourceMappingURL=LinearGradient.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/LinearGradient.tsx"],
|
|
4
|
-
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAA2D,0BAC3D,gBAAuB,4BAIvB,yBAAqD,8BA6C/C;AAnCN,MAAM,0BAAsB,oBAAO,sBAAQ;AAAA,EACzC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,CAAC,GAEY,iBAAiB,oBAAoB;AAAA,EAChD,CAAC,SAAS,QAAQ;AAChB,UAAM,YAAQ,sBAAS,OAAO,GAExB,EAAE,OAAO,KAAK,QAAQ,YAAY,WAAW,UAAU,GAAG,WAAW,IAAI,OACzE,YAAQ,sBAAS;AAEvB,QAAI,SACF,MAAM,QAAQ,IAAI,CAAC,MACT,MAAM,CAAC,GAAG,IAAI,KAAK,KAAgB,CAC5C,KAAK,CAAC;AAET,WAAI,QAAQ,IAAI,aAAa,gBAEzB,OAAO,KAAK,CAAC,MAAM;AACjB,YAAM,iBAAa,4BAAe,CAAC;AACnC,UAAI,CAAC,cAAc,WAAW,WAAW,GAAG;AAC1C,eAAO;AAAA,IAEX,CAAC,MAED,QAAQ;AAAA,MACN,gEAAgE,MAAM;AAAA,IACxE,GACA,SAAS,CAAC,QAAQ,MAAM,IAK1B,6CAAC,uBAAoB,KAAkB,GAAG,YACxC;AAAA;AAAA,QAAC,uBAAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA;AAAA,MACT;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AACF,GAIM,gBAA2B;AAAA,EAC/B,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AACV;",
|
|
5
|
-
"names": ["ExpoLinearGradient"]
|
|
6
|
-
}
|
package/dist/cjs/index.js
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
var __export = (target, all) => {
|
|
6
|
-
for (var name in all)
|
|
7
|
-
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
8
|
-
}, __copyProps = (to, from, except, desc) => {
|
|
9
|
-
if (from && typeof from == "object" || typeof from == "function")
|
|
10
|
-
for (let key of __getOwnPropNames(from))
|
|
11
|
-
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
15
|
-
var index_exports = {};
|
|
16
|
-
__export(index_exports, {
|
|
17
|
-
LinearGradient: () => import_LinearGradient.LinearGradient
|
|
18
|
-
});
|
|
19
|
-
module.exports = __toCommonJS(index_exports);
|
|
20
|
-
var import_LinearGradient = require("./LinearGradient");
|
|
21
|
-
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: !0 });
|
|
9
|
-
}, __copyProps = (to, from, except, desc) => {
|
|
10
|
-
if (from && typeof from == "object" || typeof from == "function")
|
|
11
|
-
for (let key of __getOwnPropNames(from))
|
|
12
|
-
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
-
return to;
|
|
14
|
-
};
|
|
15
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
16
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
17
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
18
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
19
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
20
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
|
|
21
|
-
mod
|
|
22
|
-
)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
|
|
23
|
-
var linear_gradient_exports = {};
|
|
24
|
-
__export(linear_gradient_exports, {
|
|
25
|
-
LinearGradient: () => LinearGradient
|
|
26
|
-
});
|
|
27
|
-
module.exports = __toCommonJS(linear_gradient_exports);
|
|
28
|
-
var import_core = require("@tamagui/core"), React = __toESM(require("react"), 1), import_react_native = require("react-native-web"), import_jsx_runtime = require("react/jsx-runtime");
|
|
29
|
-
function needsDimensionAwareAngle(start, end) {
|
|
30
|
-
if (!start && !end) return !1;
|
|
31
|
-
const startX = start?.[0] ?? 0.5, endX = end?.[0] ?? 0.5;
|
|
32
|
-
return startX !== endX;
|
|
33
|
-
}
|
|
34
|
-
function LinearGradient({
|
|
35
|
-
colors,
|
|
36
|
-
locations,
|
|
37
|
-
start,
|
|
38
|
-
end,
|
|
39
|
-
...props
|
|
40
|
-
}) {
|
|
41
|
-
const normalizedStart = start ? Array.isArray(start) ? start : [start.x, start.y] : void 0, normalizedEnd = end ? Array.isArray(end) ? end : [end.x, end.y] : void 0, needsLayout = needsDimensionAwareAngle(
|
|
42
|
-
normalizedStart,
|
|
43
|
-
normalizedEnd
|
|
44
|
-
), [{ height, width }, setLayout] = React.useState({
|
|
45
|
-
height: 1,
|
|
46
|
-
width: 1
|
|
47
|
-
}), linearGradientBackgroundImage = React.useMemo(() => getLinearGradientBackgroundImage(
|
|
48
|
-
// @ts-expect-error ok
|
|
49
|
-
colors,
|
|
50
|
-
locations,
|
|
51
|
-
normalizedStart,
|
|
52
|
-
normalizedEnd,
|
|
53
|
-
width,
|
|
54
|
-
height
|
|
55
|
-
), [colors, locations, normalizedStart, normalizedEnd, width, height]);
|
|
56
|
-
return needsLayout ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
57
|
-
import_react_native.View,
|
|
58
|
-
{
|
|
59
|
-
...props,
|
|
60
|
-
style: [
|
|
61
|
-
props.style,
|
|
62
|
-
// @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
|
|
63
|
-
{ backgroundImage: linearGradientBackgroundImage }
|
|
64
|
-
],
|
|
65
|
-
onLayout: (event) => {
|
|
66
|
-
const { width: width2, height: height2 } = event.nativeEvent.layout;
|
|
67
|
-
setLayout((oldLayout) => width2 !== oldLayout.width || height2 !== oldLayout.height ? { height: height2, width: width2 } : oldLayout), props.onLayout && props.onLayout(event);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
|
-
import_react_native.View,
|
|
72
|
-
{
|
|
73
|
-
...props,
|
|
74
|
-
onLayout: props.onLayout,
|
|
75
|
-
style: [
|
|
76
|
-
props.style,
|
|
77
|
-
// @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
|
|
78
|
-
{ backgroundImage: linearGradientBackgroundImage }
|
|
79
|
-
]
|
|
80
|
-
}
|
|
81
|
-
);
|
|
82
|
-
}
|
|
83
|
-
function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width = 1, height = 1) {
|
|
84
|
-
const gradientColors = calculateGradientColors(
|
|
85
|
-
// @ts-expect-error TODO fix numbers
|
|
86
|
-
colors,
|
|
87
|
-
locations
|
|
88
|
-
);
|
|
89
|
-
return `linear-gradient(${calculatePseudoAngle(width, height, startPoint, endPoint)}deg, ${gradientColors.join(", ")})`;
|
|
90
|
-
}
|
|
91
|
-
function calculatePseudoAngle(width, height, startPoint, endPoint) {
|
|
92
|
-
const getControlPoints = () => {
|
|
93
|
-
let correctedStartPoint = [0, 0];
|
|
94
|
-
Array.isArray(startPoint) && (correctedStartPoint = [
|
|
95
|
-
startPoint[0] != null ? startPoint[0] : 0,
|
|
96
|
-
startPoint[1] != null ? startPoint[1] : 0
|
|
97
|
-
]);
|
|
98
|
-
let correctedEndPoint = [0, 1];
|
|
99
|
-
return Array.isArray(endPoint) && (correctedEndPoint = [
|
|
100
|
-
endPoint[0] != null ? endPoint[0] : 0,
|
|
101
|
-
endPoint[1] != null ? endPoint[1] : 1
|
|
102
|
-
]), [correctedStartPoint, correctedEndPoint];
|
|
103
|
-
}, [start, end] = getControlPoints();
|
|
104
|
-
start[0] *= width, end[0] *= width, start[1] *= height, end[1] *= height;
|
|
105
|
-
const py = end[1] - start[1], px = end[0] - start[0];
|
|
106
|
-
return 90 + Math.atan2(py, px) * 180 / Math.PI;
|
|
107
|
-
}
|
|
108
|
-
function calculateGradientColors(colors, locations) {
|
|
109
|
-
return colors.map((color, index) => {
|
|
110
|
-
const output = (0, import_core.normalizeColor)(color);
|
|
111
|
-
if (locations && locations[index] !== void 0) {
|
|
112
|
-
const percentage = Math.max(0, Math.min(1, locations[index])) * 100;
|
|
113
|
-
return `${output} ${percentage}%`;
|
|
114
|
-
}
|
|
115
|
-
return output;
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
//# sourceMappingURL=linear-gradient.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/linear-gradient.tsx"],
|
|
4
|
-
"mappings": "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",
|
|
5
|
-
"names": ["width", "height"]
|
|
6
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { normalizeColor, styled, useProps, useTheme } from "@tamagui/core";
|
|
2
|
-
import { YStack } from "@tamagui/stacks";
|
|
3
|
-
import { LinearGradient as ExpoLinearGradient } from "./linear-gradient";
|
|
4
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
const LinearGradientFrame = styled(YStack, {
|
|
6
|
-
name: "LinearGradient",
|
|
7
|
-
overflow: "hidden",
|
|
8
|
-
position: "relative"
|
|
9
|
-
}), LinearGradient = LinearGradientFrame.styleable(
|
|
10
|
-
(propsIn, ref) => {
|
|
11
|
-
const props = useProps(propsIn), { start, end, colors: colorsProp, locations, children, ...stackProps } = props, theme = useTheme();
|
|
12
|
-
let colors = props.colors?.map((c) => theme[c]?.get("web") ?? c) || [];
|
|
13
|
-
return process.env.NODE_ENV !== "production" && colors.some((c) => {
|
|
14
|
-
const normalized = normalizeColor(c);
|
|
15
|
-
if (!normalized || normalized.startsWith("$"))
|
|
16
|
-
return !0;
|
|
17
|
-
}) && (console.error(
|
|
18
|
-
`LinearGradient: "colors" prop contains invalid color tokens: ${colors} fallback to default colors: ["#000", "#fff"]`
|
|
19
|
-
), colors = ["#000", "#fff"]), /* @__PURE__ */ jsxs(LinearGradientFrame, { ref, ...stackProps, children: [
|
|
20
|
-
/* @__PURE__ */ jsx(
|
|
21
|
-
ExpoLinearGradient,
|
|
22
|
-
{
|
|
23
|
-
start,
|
|
24
|
-
end,
|
|
25
|
-
colors,
|
|
26
|
-
locations,
|
|
27
|
-
style: gradientStyle
|
|
28
|
-
}
|
|
29
|
-
),
|
|
30
|
-
children
|
|
31
|
-
] });
|
|
32
|
-
}
|
|
33
|
-
), gradientStyle = {
|
|
34
|
-
position: "absolute",
|
|
35
|
-
top: 0,
|
|
36
|
-
left: 0,
|
|
37
|
-
right: 0,
|
|
38
|
-
bottom: 0,
|
|
39
|
-
zIndex: 0
|
|
40
|
-
};
|
|
41
|
-
export {
|
|
42
|
-
LinearGradient
|
|
43
|
-
};
|
|
44
|
-
//# sourceMappingURL=LinearGradient.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/LinearGradient.tsx"],
|
|
4
|
-
"mappings": "AACA,SAAS,gBAAgB,QAAQ,UAAU,gBAAgB;AAC3D,SAAS,cAAc;AAIvB,SAAS,kBAAkB,0BAA0B;AA6C/C,SACE,KADF;AAnCN,MAAM,sBAAsB,OAAO,QAAQ;AAAA,EACzC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,CAAC,GAEY,iBAAiB,oBAAoB;AAAA,EAChD,CAAC,SAAS,QAAQ;AAChB,UAAM,QAAQ,SAAS,OAAO,GAExB,EAAE,OAAO,KAAK,QAAQ,YAAY,WAAW,UAAU,GAAG,WAAW,IAAI,OACzE,QAAQ,SAAS;AAEvB,QAAI,SACF,MAAM,QAAQ,IAAI,CAAC,MACT,MAAM,CAAC,GAAG,IAAI,KAAK,KAAgB,CAC5C,KAAK,CAAC;AAET,WAAI,QAAQ,IAAI,aAAa,gBAEzB,OAAO,KAAK,CAAC,MAAM;AACjB,YAAM,aAAa,eAAe,CAAC;AACnC,UAAI,CAAC,cAAc,WAAW,WAAW,GAAG;AAC1C,eAAO;AAAA,IAEX,CAAC,MAED,QAAQ;AAAA,MACN,gEAAgE,MAAM;AAAA,IACxE,GACA,SAAS,CAAC,QAAQ,MAAM,IAK1B,qBAAC,uBAAoB,KAAkB,GAAG,YACxC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA;AAAA,MACT;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AACF,GAIM,gBAA2B;AAAA,EAC/B,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AACV;",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { normalizeColor } from "@tamagui/core";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { View } from "react-native-web";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
function needsDimensionAwareAngle(start, end) {
|
|
6
|
-
if (!start && !end) return !1;
|
|
7
|
-
const startX = start?.[0] ?? 0.5, endX = end?.[0] ?? 0.5;
|
|
8
|
-
return startX !== endX;
|
|
9
|
-
}
|
|
10
|
-
function LinearGradient({
|
|
11
|
-
colors,
|
|
12
|
-
locations,
|
|
13
|
-
start,
|
|
14
|
-
end,
|
|
15
|
-
...props
|
|
16
|
-
}) {
|
|
17
|
-
const normalizedStart = start ? Array.isArray(start) ? start : [start.x, start.y] : void 0, normalizedEnd = end ? Array.isArray(end) ? end : [end.x, end.y] : void 0, needsLayout = needsDimensionAwareAngle(
|
|
18
|
-
normalizedStart,
|
|
19
|
-
normalizedEnd
|
|
20
|
-
), [{ height, width }, setLayout] = React.useState({
|
|
21
|
-
height: 1,
|
|
22
|
-
width: 1
|
|
23
|
-
}), linearGradientBackgroundImage = React.useMemo(() => getLinearGradientBackgroundImage(
|
|
24
|
-
// @ts-expect-error ok
|
|
25
|
-
colors,
|
|
26
|
-
locations,
|
|
27
|
-
normalizedStart,
|
|
28
|
-
normalizedEnd,
|
|
29
|
-
width,
|
|
30
|
-
height
|
|
31
|
-
), [colors, locations, normalizedStart, normalizedEnd, width, height]);
|
|
32
|
-
return needsLayout ? /* @__PURE__ */ jsx(
|
|
33
|
-
View,
|
|
34
|
-
{
|
|
35
|
-
...props,
|
|
36
|
-
style: [
|
|
37
|
-
props.style,
|
|
38
|
-
// @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
|
|
39
|
-
{ backgroundImage: linearGradientBackgroundImage }
|
|
40
|
-
],
|
|
41
|
-
onLayout: (event) => {
|
|
42
|
-
const { width: width2, height: height2 } = event.nativeEvent.layout;
|
|
43
|
-
setLayout((oldLayout) => width2 !== oldLayout.width || height2 !== oldLayout.height ? { height: height2, width: width2 } : oldLayout), props.onLayout && props.onLayout(event);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
) : /* @__PURE__ */ jsx(
|
|
47
|
-
View,
|
|
48
|
-
{
|
|
49
|
-
...props,
|
|
50
|
-
onLayout: props.onLayout,
|
|
51
|
-
style: [
|
|
52
|
-
props.style,
|
|
53
|
-
// @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
|
|
54
|
-
{ backgroundImage: linearGradientBackgroundImage }
|
|
55
|
-
]
|
|
56
|
-
}
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width = 1, height = 1) {
|
|
60
|
-
const gradientColors = calculateGradientColors(
|
|
61
|
-
// @ts-expect-error TODO fix numbers
|
|
62
|
-
colors,
|
|
63
|
-
locations
|
|
64
|
-
);
|
|
65
|
-
return `linear-gradient(${calculatePseudoAngle(width, height, startPoint, endPoint)}deg, ${gradientColors.join(", ")})`;
|
|
66
|
-
}
|
|
67
|
-
function calculatePseudoAngle(width, height, startPoint, endPoint) {
|
|
68
|
-
const getControlPoints = () => {
|
|
69
|
-
let correctedStartPoint = [0, 0];
|
|
70
|
-
Array.isArray(startPoint) && (correctedStartPoint = [
|
|
71
|
-
startPoint[0] != null ? startPoint[0] : 0,
|
|
72
|
-
startPoint[1] != null ? startPoint[1] : 0
|
|
73
|
-
]);
|
|
74
|
-
let correctedEndPoint = [0, 1];
|
|
75
|
-
return Array.isArray(endPoint) && (correctedEndPoint = [
|
|
76
|
-
endPoint[0] != null ? endPoint[0] : 0,
|
|
77
|
-
endPoint[1] != null ? endPoint[1] : 1
|
|
78
|
-
]), [correctedStartPoint, correctedEndPoint];
|
|
79
|
-
}, [start, end] = getControlPoints();
|
|
80
|
-
start[0] *= width, end[0] *= width, start[1] *= height, end[1] *= height;
|
|
81
|
-
const py = end[1] - start[1], px = end[0] - start[0];
|
|
82
|
-
return 90 + Math.atan2(py, px) * 180 / Math.PI;
|
|
83
|
-
}
|
|
84
|
-
function calculateGradientColors(colors, locations) {
|
|
85
|
-
return colors.map((color, index) => {
|
|
86
|
-
const output = normalizeColor(color);
|
|
87
|
-
if (locations && locations[index] !== void 0) {
|
|
88
|
-
const percentage = Math.max(0, Math.min(1, locations[index])) * 100;
|
|
89
|
-
return `${output} ${percentage}%`;
|
|
90
|
-
}
|
|
91
|
-
return output;
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
export {
|
|
95
|
-
LinearGradient
|
|
96
|
-
};
|
|
97
|
-
//# sourceMappingURL=linear-gradient.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/linear-gradient.tsx"],
|
|
4
|
-
"mappings": "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",
|
|
5
|
-
"names": ["width", "height"]
|
|
6
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { normalizeColor, styled, useProps, useTheme } from "@tamagui/core";
|
|
2
|
-
import { YStack } from "@tamagui/stacks";
|
|
3
|
-
import { LinearGradient as ExpoLinearGradient } from "./linear-gradient";
|
|
4
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
const LinearGradientFrame = styled(YStack, {
|
|
6
|
-
name: "LinearGradient",
|
|
7
|
-
overflow: "hidden",
|
|
8
|
-
position: "relative"
|
|
9
|
-
}), LinearGradient = LinearGradientFrame.styleable(
|
|
10
|
-
(propsIn, ref) => {
|
|
11
|
-
const props = useProps(propsIn), { start, end, colors: colorsProp, locations, children, ...stackProps } = props, theme = useTheme();
|
|
12
|
-
let colors = props.colors?.map((c) => theme[c]?.get("web") ?? c) || [];
|
|
13
|
-
return process.env.NODE_ENV !== "production" && colors.some((c) => {
|
|
14
|
-
const normalized = normalizeColor(c);
|
|
15
|
-
if (!normalized || normalized.startsWith("$"))
|
|
16
|
-
return !0;
|
|
17
|
-
}) && (console.error(
|
|
18
|
-
`LinearGradient: "colors" prop contains invalid color tokens: ${colors} fallback to default colors: ["#000", "#fff"]`
|
|
19
|
-
), colors = ["#000", "#fff"]), /* @__PURE__ */ jsxs(LinearGradientFrame, { ref, ...stackProps, children: [
|
|
20
|
-
/* @__PURE__ */ jsx(
|
|
21
|
-
ExpoLinearGradient,
|
|
22
|
-
{
|
|
23
|
-
start,
|
|
24
|
-
end,
|
|
25
|
-
colors,
|
|
26
|
-
locations,
|
|
27
|
-
style: gradientStyle
|
|
28
|
-
}
|
|
29
|
-
),
|
|
30
|
-
children
|
|
31
|
-
] });
|
|
32
|
-
}
|
|
33
|
-
), gradientStyle = {
|
|
34
|
-
position: "absolute",
|
|
35
|
-
top: 0,
|
|
36
|
-
left: 0,
|
|
37
|
-
right: 0,
|
|
38
|
-
bottom: 0,
|
|
39
|
-
zIndex: 0
|
|
40
|
-
};
|
|
41
|
-
export {
|
|
42
|
-
LinearGradient
|
|
43
|
-
};
|
|
44
|
-
//# sourceMappingURL=LinearGradient.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/LinearGradient.tsx"],
|
|
4
|
-
"mappings": "AACA,SAAS,gBAAgB,QAAQ,UAAU,gBAAgB;AAC3D,SAAS,cAAc;AAIvB,SAAS,kBAAkB,0BAA0B;AA6C/C,SACE,KADF;AAnCN,MAAM,sBAAsB,OAAO,QAAQ;AAAA,EACzC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,CAAC,GAEY,iBAAiB,oBAAoB;AAAA,EAChD,CAAC,SAAS,QAAQ;AAChB,UAAM,QAAQ,SAAS,OAAO,GAExB,EAAE,OAAO,KAAK,QAAQ,YAAY,WAAW,UAAU,GAAG,WAAW,IAAI,OACzE,QAAQ,SAAS;AAEvB,QAAI,SACF,MAAM,QAAQ,IAAI,CAAC,MACT,MAAM,CAAC,GAAG,IAAI,KAAK,KAAgB,CAC5C,KAAK,CAAC;AAET,WAAI,QAAQ,IAAI,aAAa,gBAEzB,OAAO,KAAK,CAAC,MAAM;AACjB,YAAM,aAAa,eAAe,CAAC;AACnC,UAAI,CAAC,cAAc,WAAW,WAAW,GAAG;AAC1C,eAAO;AAAA,IAEX,CAAC,MAED,QAAQ;AAAA,MACN,gEAAgE,MAAM;AAAA,IACxE,GACA,SAAS,CAAC,QAAQ,MAAM,IAK1B,qBAAC,uBAAoB,KAAkB,GAAG,YACxC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA;AAAA,MACT;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AACF,GAIM,gBAA2B;AAAA,EAC/B,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AACV;",
|
|
5
|
-
"names": []
|
|
6
|
-
}
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { normalizeColor } from "@tamagui/core";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { View } from "react-native-web";
|
|
4
|
-
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
function needsDimensionAwareAngle(start, end) {
|
|
6
|
-
if (!start && !end) return !1;
|
|
7
|
-
const startX = start?.[0] ?? 0.5, endX = end?.[0] ?? 0.5;
|
|
8
|
-
return startX !== endX;
|
|
9
|
-
}
|
|
10
|
-
function LinearGradient({
|
|
11
|
-
colors,
|
|
12
|
-
locations,
|
|
13
|
-
start,
|
|
14
|
-
end,
|
|
15
|
-
...props
|
|
16
|
-
}) {
|
|
17
|
-
const normalizedStart = start ? Array.isArray(start) ? start : [start.x, start.y] : void 0, normalizedEnd = end ? Array.isArray(end) ? end : [end.x, end.y] : void 0, needsLayout = needsDimensionAwareAngle(
|
|
18
|
-
normalizedStart,
|
|
19
|
-
normalizedEnd
|
|
20
|
-
), [{ height, width }, setLayout] = React.useState({
|
|
21
|
-
height: 1,
|
|
22
|
-
width: 1
|
|
23
|
-
}), linearGradientBackgroundImage = React.useMemo(() => getLinearGradientBackgroundImage(
|
|
24
|
-
// @ts-expect-error ok
|
|
25
|
-
colors,
|
|
26
|
-
locations,
|
|
27
|
-
normalizedStart,
|
|
28
|
-
normalizedEnd,
|
|
29
|
-
width,
|
|
30
|
-
height
|
|
31
|
-
), [colors, locations, normalizedStart, normalizedEnd, width, height]);
|
|
32
|
-
return needsLayout ? /* @__PURE__ */ jsx(
|
|
33
|
-
View,
|
|
34
|
-
{
|
|
35
|
-
...props,
|
|
36
|
-
style: [
|
|
37
|
-
props.style,
|
|
38
|
-
// @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
|
|
39
|
-
{ backgroundImage: linearGradientBackgroundImage }
|
|
40
|
-
],
|
|
41
|
-
onLayout: (event) => {
|
|
42
|
-
const { width: width2, height: height2 } = event.nativeEvent.layout;
|
|
43
|
-
setLayout((oldLayout) => width2 !== oldLayout.width || height2 !== oldLayout.height ? { height: height2, width: width2 } : oldLayout), props.onLayout && props.onLayout(event);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
) : /* @__PURE__ */ jsx(
|
|
47
|
-
View,
|
|
48
|
-
{
|
|
49
|
-
...props,
|
|
50
|
-
onLayout: props.onLayout,
|
|
51
|
-
style: [
|
|
52
|
-
props.style,
|
|
53
|
-
// @ts-ignore: [ts] Property 'backgroundImage' does not exist on type 'ViewStyle'.
|
|
54
|
-
{ backgroundImage: linearGradientBackgroundImage }
|
|
55
|
-
]
|
|
56
|
-
}
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
function getLinearGradientBackgroundImage(colors, locations, startPoint, endPoint, width = 1, height = 1) {
|
|
60
|
-
const gradientColors = calculateGradientColors(
|
|
61
|
-
// @ts-expect-error TODO fix numbers
|
|
62
|
-
colors,
|
|
63
|
-
locations
|
|
64
|
-
);
|
|
65
|
-
return `linear-gradient(${calculatePseudoAngle(width, height, startPoint, endPoint)}deg, ${gradientColors.join(", ")})`;
|
|
66
|
-
}
|
|
67
|
-
function calculatePseudoAngle(width, height, startPoint, endPoint) {
|
|
68
|
-
const getControlPoints = () => {
|
|
69
|
-
let correctedStartPoint = [0, 0];
|
|
70
|
-
Array.isArray(startPoint) && (correctedStartPoint = [
|
|
71
|
-
startPoint[0] != null ? startPoint[0] : 0,
|
|
72
|
-
startPoint[1] != null ? startPoint[1] : 0
|
|
73
|
-
]);
|
|
74
|
-
let correctedEndPoint = [0, 1];
|
|
75
|
-
return Array.isArray(endPoint) && (correctedEndPoint = [
|
|
76
|
-
endPoint[0] != null ? endPoint[0] : 0,
|
|
77
|
-
endPoint[1] != null ? endPoint[1] : 1
|
|
78
|
-
]), [correctedStartPoint, correctedEndPoint];
|
|
79
|
-
}, [start, end] = getControlPoints();
|
|
80
|
-
start[0] *= width, end[0] *= width, start[1] *= height, end[1] *= height;
|
|
81
|
-
const py = end[1] - start[1], px = end[0] - start[0];
|
|
82
|
-
return 90 + Math.atan2(py, px) * 180 / Math.PI;
|
|
83
|
-
}
|
|
84
|
-
function calculateGradientColors(colors, locations) {
|
|
85
|
-
return colors.map((color, index) => {
|
|
86
|
-
const output = normalizeColor(color);
|
|
87
|
-
if (locations && locations[index] !== void 0) {
|
|
88
|
-
const percentage = Math.max(0, Math.min(1, locations[index])) * 100;
|
|
89
|
-
return `${output} ${percentage}%`;
|
|
90
|
-
}
|
|
91
|
-
return output;
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
export {
|
|
95
|
-
LinearGradient
|
|
96
|
-
};
|
|
97
|
-
//# sourceMappingURL=linear-gradient.js.map
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/linear-gradient.tsx"],
|
|
4
|
-
"mappings": "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",
|
|
5
|
-
"names": ["width", "height"]
|
|
6
|
-
}
|