@tapcart/mobile-components 0.8.42 → 0.8.43
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAwChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAiBjB,CAAA;AA8DD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAwChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAiBjB,CAAA;AA8DD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AA0HD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EACJ,IAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,cAAc,EACd,GAAG,KAAK,EACT,EAAE,SAAS,2CAoBX;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -94,87 +94,50 @@ const TablerIcon = ({ name, size }) => {
|
|
|
94
94
|
const CustomIcon = ({ url, size, color, strokeColor, strokeWidth, fillColor, fillPercentage, secondaryFillColor, }) => {
|
|
95
95
|
return (_jsx(ReactSVG, { src: url, beforeInjection: (svg) => {
|
|
96
96
|
svg.setAttribute("style", `width: ${sizeMapping[size]}px; height: ${sizeMapping[size]}px`);
|
|
97
|
-
const uniqueId = crypto.randomUUID();
|
|
98
|
-
const fillGradientId = `fill-gradient-${uniqueId}`;
|
|
99
|
-
const strokeGradientId = `stroke-gradient-${uniqueId}`;
|
|
100
|
-
const percentage = Math.min(Math.max(fillPercentage, 0), 1);
|
|
101
|
-
let defs = svg.querySelector("defs");
|
|
102
|
-
if (!defs) {
|
|
103
|
-
defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
|
|
104
|
-
svg.prepend(defs);
|
|
105
|
-
}
|
|
106
|
-
if (percentage > 0 && percentage < 1) {
|
|
107
|
-
const fillGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
|
|
108
|
-
fillGradient.setAttribute("id", fillGradientId);
|
|
109
|
-
fillGradient.setAttribute("x1", "0%");
|
|
110
|
-
fillGradient.setAttribute("y1", "0%");
|
|
111
|
-
fillGradient.setAttribute("x2", "100%");
|
|
112
|
-
fillGradient.setAttribute("y2", "0%");
|
|
113
|
-
const fillStop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
114
|
-
fillStop1.setAttribute("offset", `${percentage * 100}%`);
|
|
115
|
-
fillStop1.setAttribute("stop-color", color || fillColor || "currentColor");
|
|
116
|
-
fillGradient.appendChild(fillStop1);
|
|
117
|
-
const fillStop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
118
|
-
fillStop2.setAttribute("offset", `${percentage * 100}%`);
|
|
119
|
-
fillStop2.setAttribute("stop-color", secondaryFillColor || "transparent");
|
|
120
|
-
fillGradient.appendChild(fillStop2);
|
|
121
|
-
defs.appendChild(fillGradient);
|
|
122
|
-
const strokeGradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
|
|
123
|
-
strokeGradient.setAttribute("id", strokeGradientId);
|
|
124
|
-
strokeGradient.setAttribute("x1", "0%");
|
|
125
|
-
strokeGradient.setAttribute("y1", "0%");
|
|
126
|
-
strokeGradient.setAttribute("x2", "100%");
|
|
127
|
-
strokeGradient.setAttribute("y2", "0%");
|
|
128
|
-
const strokeStop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
129
|
-
strokeStop1.setAttribute("offset", `${percentage * 100}%`);
|
|
130
|
-
strokeStop1.setAttribute("stop-color", color || strokeColor || fillColor || "currentColor");
|
|
131
|
-
strokeGradient.appendChild(strokeStop1);
|
|
132
|
-
const strokeStop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
133
|
-
strokeStop2.setAttribute("offset", `${percentage * 100}%`);
|
|
134
|
-
strokeStop2.setAttribute("stop-color", secondaryFillColor || "transparent");
|
|
135
|
-
strokeGradient.appendChild(strokeStop2);
|
|
136
|
-
defs.appendChild(strokeGradient);
|
|
137
|
-
}
|
|
138
97
|
const paths = svg.querySelectorAll("path");
|
|
139
98
|
paths.forEach((path) => {
|
|
140
|
-
if (
|
|
141
|
-
path.
|
|
142
|
-
|
|
143
|
-
path.setAttribute("fill", color ||
|
|
144
|
-
fillColor ||
|
|
145
|
-
path.getAttribute("fill") ||
|
|
146
|
-
"currentColor");
|
|
147
|
-
}
|
|
148
|
-
else if (percentage === 0) {
|
|
149
|
-
path.setAttribute("fill", secondaryFillColor || "transparent");
|
|
150
|
-
}
|
|
151
|
-
else {
|
|
152
|
-
path.setAttribute("fill", `url(#${fillGradientId})`);
|
|
99
|
+
if (color) {
|
|
100
|
+
if (path.hasAttribute("fill") && fillPercentage === 1) {
|
|
101
|
+
path.setAttribute("fill", color);
|
|
153
102
|
}
|
|
103
|
+
path.setAttribute("stroke", color);
|
|
154
104
|
}
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
path.getAttribute("stroke") ||
|
|
161
|
-
"currentColor");
|
|
105
|
+
else {
|
|
106
|
+
if (fillColor &&
|
|
107
|
+
path.hasAttribute("fill") &&
|
|
108
|
+
fillPercentage === 1) {
|
|
109
|
+
path.setAttribute("fill", fillColor);
|
|
162
110
|
}
|
|
163
|
-
|
|
164
|
-
path.setAttribute("stroke",
|
|
165
|
-
}
|
|
166
|
-
else {
|
|
167
|
-
path.setAttribute("stroke", `url(#${strokeGradientId})`);
|
|
111
|
+
if (strokeColor) {
|
|
112
|
+
path.setAttribute("stroke", strokeColor);
|
|
168
113
|
}
|
|
169
114
|
}
|
|
170
|
-
if (path.hasAttribute("stroke")
|
|
171
|
-
path.
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
115
|
+
if (path.hasAttribute("stroke")) {
|
|
116
|
+
path.setAttribute("stroke-width", strokeWidthMapping[size].toString());
|
|
117
|
+
}
|
|
118
|
+
if (strokeWidth != null && path.hasAttribute("stroke")) {
|
|
119
|
+
path.setAttribute("stroke-width", strokeWidth.toString());
|
|
120
|
+
}
|
|
121
|
+
// Create a gradient fill based on the fillPercentage
|
|
122
|
+
if (fillPercentage && fillPercentage > 0 && fillPercentage < 1) {
|
|
123
|
+
const percentage = Math.min(Math.max(fillPercentage, 0), 1);
|
|
124
|
+
const gradientId = `gradient-${Math.random()}`;
|
|
125
|
+
const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
|
|
126
|
+
gradient.setAttribute("id", gradientId);
|
|
127
|
+
gradient.setAttribute("x1", "0%");
|
|
128
|
+
gradient.setAttribute("y1", "0%");
|
|
129
|
+
gradient.setAttribute("x2", "100%");
|
|
130
|
+
gradient.setAttribute("y2", "0%");
|
|
131
|
+
const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
132
|
+
stop1.setAttribute("offset", `${percentage * 100}%`);
|
|
133
|
+
stop1.setAttribute("stop-color", color || fillColor || "currentColor");
|
|
134
|
+
gradient.appendChild(stop1);
|
|
135
|
+
const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
136
|
+
stop2.setAttribute("offset", `${percentage * 100}%`);
|
|
137
|
+
stop2.setAttribute("stop-color", secondaryFillColor || "transparent"); // Use secondary fill color
|
|
138
|
+
gradient.appendChild(stop2);
|
|
139
|
+
svg.appendChild(gradient);
|
|
140
|
+
path.setAttribute("fill", `url(#${gradientId})`);
|
|
178
141
|
}
|
|
179
142
|
});
|
|
180
143
|
} }));
|