react-spin-prize 2.1.0 → 2.2.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.
Files changed (5) hide show
  1. package/dist/SpinnerWheel.d.ts.map +1 -1
  2. package/dist/SpinnerWheel.js +26 -20
  3. package/dist/types.d.ts +1 -0
  4. package/dist/types.d.ts.map +1 -1
  5. package/package.json +1 -1
package/dist/SpinnerWheel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SpinnerWheel.d.ts","sourceRoot":"","sources":["../src/SpinnerWheel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQjD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoWpD,CAAC"}
1
+ {"version":3,"file":"SpinnerWheel.d.ts","sourceRoot":"","sources":["../src/SpinnerWheel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQjD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyWpD,CAAC"}
package/dist/SpinnerWheel.js CHANGED
@@ -5,7 +5,7 @@ const DEFAULT_COLORS = [
5
5
  "#98D8C8", "#F7DC6F", "#BB8FCE", "#85C1E2",
6
6
  "#F8B739", "#52B788", "#E76F51", "#2A9D8F",
7
7
  ];
8
- export const SpinnerWheel = ({ items, onSpinComplete, onButtonClick, spinning: externalSpinning, duration = 5000, size = 500, fontSize = 16, borderWidth = 8, borderColor = "#333", buttonText = "SPIN", buttonColor = "#333", buttonTextColor = "#fff", buttonIcon, buttonSize, buttonBorderColor = "#333", buttonBorderWidth = 4, disabled = false, winningIndex, autoSpinTrigger, textLayout = "horizontal", }) => {
8
+ export const SpinnerWheel = ({ items, onSpinComplete, onButtonClick, spinning: externalSpinning, duration = 5000, size = 500, fontSize = 16, borderWidth = 8, borderColor = "#333", buttonText = "SPIN", buttonColor = "#333", buttonTextColor = "#fff", buttonIcon, buttonSize, buttonFontSize, buttonBorderColor = "#333", buttonBorderWidth = 4, disabled = false, winningIndex, autoSpinTrigger, textLayout = "horizontal", }) => {
9
9
  const [rotation, setRotation] = useState(0);
10
10
  const [spinning, setSpinning] = useState(false);
11
11
  const animationRef = useRef();
@@ -15,7 +15,7 @@ export const SpinnerWheel = ({ items, onSpinComplete, onButtonClick, spinning: e
15
15
  const centerX = radius;
16
16
  const centerY = radius;
17
17
  const wheelRadius = radius - borderWidth;
18
- const buttonRadius = buttonSize !== undefined ? buttonSize : radius * 0.25;
18
+ const buttonRadius = buttonSize !== undefined ? buttonSize : radius * 0.15;
19
19
  const segmentAngle = 360 / items.length;
20
20
  // Clean up animation on unmount
21
21
  useEffect(() => {
@@ -100,12 +100,12 @@ export const SpinnerWheel = ({ items, onSpinComplete, onButtonClick, spinning: e
100
100
  const getTextColor = (index) => {
101
101
  return items[index].textColor || "#fff";
102
102
  };
103
- // Dynamic font size for many items
103
+ // Dynamic font size for many items - made smaller
104
104
  const dynamicFontSize = items.length > 20
105
- ? Math.max(8, fontSize - Math.floor((items.length - 20) / 10) * 2)
105
+ ? Math.max(6, fontSize * 0.5 - Math.floor((items.length - 20) / 10) * 2)
106
106
  : items.length > 12
107
- ? Math.max(10, fontSize - 2)
108
- : fontSize;
107
+ ? Math.max(8, fontSize * 0.6)
108
+ : fontSize * 0.7;
109
109
  const renderSegments = () => {
110
110
  return items.map((item, index) => {
111
111
  // Draw segments starting from top (-90°) going clockwise
@@ -127,7 +127,7 @@ export const SpinnerWheel = ({ items, onSpinComplete, onButtonClick, spinning: e
127
127
  if (textLayout === "horizontal") {
128
128
  // Horizontal layout: text starts from edge towards center
129
129
  const outerTextRadius = wheelRadius * 0.85;
130
- const innerTextRadius = wheelRadius * 0.35;
130
+ const innerTextRadius = wheelRadius * 0.25;
131
131
  // Calculate start position (at the edge)
132
132
  const startX = centerX + outerTextRadius * Math.cos(midAngle);
133
133
  const startY = centerY + outerTextRadius * Math.sin(midAngle);
@@ -136,16 +136,19 @@ export const SpinnerWheel = ({ items, onSpinComplete, onButtonClick, spinning: e
136
136
  const endY = centerY + innerTextRadius * Math.sin(midAngle);
137
137
  // Text path for horizontal text
138
138
  const textPathId = `textPath-${item.id}`;
139
- // Truncate long labels
139
+ // Truncate long labels - more aggressive truncation
140
140
  let displayLabel = item.label;
141
- if (items.length > 30 && displayLabel.length > 8) {
141
+ if (items.length > 30 && displayLabel.length > 6) {
142
+ displayLabel = displayLabel.substring(0, 5) + "...";
143
+ }
144
+ else if (items.length > 20 && displayLabel.length > 8) {
142
145
  displayLabel = displayLabel.substring(0, 7) + "...";
143
146
  }
144
- else if (items.length > 20 && displayLabel.length > 12) {
145
- displayLabel = displayLabel.substring(0, 11) + "...";
147
+ else if (items.length > 12 && displayLabel.length > 10) {
148
+ displayLabel = displayLabel.substring(0, 9) + "...";
146
149
  }
147
- else if (items.length > 12 && displayLabel.length > 15) {
148
- displayLabel = displayLabel.substring(0, 14) + "...";
150
+ else if (displayLabel.length > 12) {
151
+ displayLabel = displayLabel.substring(0, 11) + "...";
149
152
  }
150
153
  textElement = (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("path", { id: textPathId, d: `M ${startX} ${startY} L ${endX} ${endY}` }) }), _jsx("text", { fill: getTextColor(index), fontSize: dynamicFontSize, fontWeight: "bold", style: { userSelect: "none", pointerEvents: "none" }, children: _jsx("textPath", { href: `#${textPathId}`, startOffset: "50%", textAnchor: "middle", children: displayLabel }) })] }));
151
154
  }
@@ -157,16 +160,19 @@ export const SpinnerWheel = ({ items, onSpinComplete, onButtonClick, spinning: e
157
160
  const textX = centerX + textRadius * Math.cos(midAngle);
158
161
  const textY = centerY + textRadius * Math.sin(midAngle);
159
162
  const textAngle = (midAngle * 180) / Math.PI + 90;
160
- // Truncate long labels
163
+ // Truncate long labels - more aggressive truncation
161
164
  let displayLabel = item.label;
162
- if (items.length > 30 && displayLabel.length > 8) {
165
+ if (items.length > 30 && displayLabel.length > 6) {
166
+ displayLabel = displayLabel.substring(0, 5) + "...";
167
+ }
168
+ else if (items.length > 20 && displayLabel.length > 8) {
163
169
  displayLabel = displayLabel.substring(0, 7) + "...";
164
170
  }
165
- else if (items.length > 20 && displayLabel.length > 12) {
166
- displayLabel = displayLabel.substring(0, 11) + "...";
171
+ else if (items.length > 12 && displayLabel.length > 10) {
172
+ displayLabel = displayLabel.substring(0, 9) + "...";
167
173
  }
168
- else if (items.length > 12 && displayLabel.length > 15) {
169
- displayLabel = displayLabel.substring(0, 14) + "...";
174
+ else if (displayLabel.length > 12) {
175
+ displayLabel = displayLabel.substring(0, 11) + "...";
170
176
  }
171
177
  textElement = (_jsx("text", { x: textX, y: textY, fill: getTextColor(index), fontSize: dynamicFontSize, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${textAngle} ${textX} ${textY})`, style: { userSelect: "none", pointerEvents: "none" }, children: displayLabel }));
172
178
  }
@@ -194,7 +200,7 @@ export const SpinnerWheel = ({ items, onSpinComplete, onButtonClick, spinning: e
194
200
  backgroundColor: buttonColor,
195
201
  color: buttonTextColor,
196
202
  border: "none",
197
- fontSize: buttonIcon ? "inherit" : fontSize * 1.2,
203
+ fontSize: buttonIcon ? "inherit" : (buttonFontSize !== undefined ? buttonFontSize : fontSize * 0.6),
198
204
  fontWeight: buttonIcon ? "normal" : "bold",
199
205
  cursor: disabled || isSpinning ? "not-allowed" : "pointer",
200
206
  opacity: disabled || isSpinning ? 0.6 : 1,
package/dist/types.d.ts CHANGED
@@ -19,6 +19,7 @@ export interface SpinnerWheelProps {
19
19
  buttonTextColor?: string;
20
20
  buttonIcon?: React.ReactNode;
21
21
  buttonSize?: number;
22
+ buttonFontSize?: number;
22
23
  buttonBorderColor?: string;
23
24
  buttonBorderWidth?: number;
24
25
  disabled?: boolean;
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;CACtC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;CACtC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-spin-prize",
3
- "version": "2.1.0",
3
+ "version": "2.2.0",
4
4
  "description": "Modern, customizable prize wheel spinner component for React with TypeScript support",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",