react-native-mantine 0.15.0 → 0.16.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/README.md +45 -345
- package/lib/commonjs/components/RingProgress/index.js +76 -53
- package/lib/commonjs/components/RingProgress/index.js.map +1 -1
- package/lib/commonjs/components/Table/index.js +257 -273
- package/lib/commonjs/components/Table/index.js.map +1 -1
- package/lib/commonjs/components/index.js +29 -29
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/module/components/RingProgress/index.js +77 -54
- package/lib/module/components/RingProgress/index.js.map +1 -1
- package/lib/module/components/Table/index.js +257 -274
- package/lib/module/components/Table/index.js.map +1 -1
- package/lib/module/components/index.js +3 -1
- package/lib/module/components/index.js.map +1 -1
- package/lib/typescript/commonjs/src/components/RingProgress/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/components/Table/index.d.ts +17 -83
- package/lib/typescript/commonjs/src/components/Table/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/src/components/index.d.ts +1 -1
- package/lib/typescript/commonjs/src/components/index.d.ts.map +1 -1
- package/lib/typescript/module/src/components/RingProgress/index.d.ts.map +1 -1
- package/lib/typescript/module/src/components/Table/index.d.ts +17 -83
- package/lib/typescript/module/src/components/Table/index.d.ts.map +1 -1
- package/lib/typescript/module/src/components/index.d.ts +1 -1
- package/lib/typescript/module/src/components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/RingProgress/index.tsx +88 -55
- package/src/components/Table/index.tsx +333 -413
- package/src/components/index.tsx +3 -1
- package/lib/commonjs/components/Table/Table.example.js +0 -323
- package/lib/commonjs/components/Table/Table.example.js.map +0 -1
- package/lib/module/components/Table/Table.example.js +0 -318
- package/lib/module/components/Table/Table.example.js.map +0 -1
- package/lib/typescript/commonjs/src/components/Table/Table.example.d.ts +0 -13
- package/lib/typescript/commonjs/src/components/Table/Table.example.d.ts.map +0 -1
- package/lib/typescript/module/src/components/Table/Table.example.d.ts +0 -13
- package/lib/typescript/module/src/components/Table/Table.example.d.ts.map +0 -1
- package/src/components/Table/Table.example.tsx +0 -215
package/README.md
CHANGED
|
@@ -1,114 +1,79 @@
|
|
|
1
|
-
# React Native Mantine (WIP/WORK IN PROGRESS)
|
|
2
|
-
|
|
3
1
|
<div align="center">
|
|
4
2
|
|
|
3
|
+
# React Native Mantine
|
|
4
|
+
|
|
5
5
|
[](https://www.npmjs.com/package/react-native-mantine)
|
|
6
|
-
[](https://www.npmjs.com/package/react-native-mantine)
|
|
7
6
|
[](https://github.com/auronsan/react-native-mantine/blob/main/LICENSE)
|
|
8
|
-
[](https://www.npmjs.com/package/react-native-mantine)
|
|
9
8
|
[](https://github.com/auronsan/react-native-mantine/stargazers)
|
|
10
9
|
[](https://reactnative.dev/)
|
|
11
10
|
[](https://www.typescriptlang.org/)
|
|
12
11
|
|
|
13
12
|
A comprehensive React Native component library inspired by [Mantine](https://mantine.dev/), bringing beautiful and accessible UI components to your mobile applications.
|
|
14
13
|
|
|
15
|
-
|
|
14
|
+
**Work in Progress** - This library is actively developed and evolving.
|
|
16
15
|
|
|
17
16
|
</div>
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
## 🌐 Live Demo
|
|
22
|
-
|
|
23
|
-
Try out all components in action without any installation:
|
|
24
|
-
|
|
25
|
-
**[→ View Live Demo on GitHub Pages](https://auronsan.github.io/react-native-mantine/)**
|
|
26
|
-
|
|
27
|
-
The demo showcases 70+ components running on the web via React Native Web, with:
|
|
28
|
-
- Interactive component examples
|
|
29
|
-
- Live code previews
|
|
30
|
-
- Theme customization
|
|
31
|
-
- All component variants and props
|
|
32
|
-
|
|
33
|
-
---
|
|
34
|
-
|
|
35
|
-
## Quick Start
|
|
18
|
+
## Links
|
|
36
19
|
|
|
37
|
-
|
|
20
|
+
- [Documentation and demos](https://auronsan.github.io/react-native-mantine/)
|
|
21
|
+
- [Getting started template](https://github.com/auronsan/react-native-mantine-template)
|
|
22
|
+
- [NPM package](https://www.npmjs.com/package/react-native-mantine)
|
|
23
|
+
- [GitHub repository](https://github.com/auronsan/react-native-mantine)
|
|
24
|
+
- [Contributing guide](CONTRIBUTING.md)
|
|
38
25
|
|
|
39
|
-
|
|
26
|
+
## Packages
|
|
40
27
|
|
|
41
|
-
|
|
28
|
+
React Native Mantine provides:
|
|
42
29
|
|
|
43
|
-
|
|
30
|
+
- **70+ Components** – Button, TextInput, Paper, Modal, Drawer, and many more
|
|
31
|
+
- **Theme System** – 14 color palettes with 10 shades each, aligned with Mantine v6
|
|
32
|
+
- **8 Variants** – filled, light, outline, subtle, white, default, gradient, transparent
|
|
33
|
+
- **Dark Mode** – Full color scheme support with automatic adjustments
|
|
34
|
+
- **TypeScript** – Written in TypeScript with comprehensive type definitions
|
|
35
|
+
- **Accessibility** – Built with mobile accessibility best practices
|
|
36
|
+
- **Cross-platform** – iOS, Android, and Web (via React Native Web)
|
|
44
37
|
|
|
45
38
|
## Installation
|
|
46
39
|
|
|
47
40
|
```bash
|
|
48
|
-
# Using npm
|
|
49
41
|
npm install react-native-mantine
|
|
50
|
-
|
|
51
|
-
# Using yarn
|
|
52
|
-
yarn add react-native-mantine
|
|
53
|
-
|
|
54
|
-
# Using pnpm
|
|
55
|
-
pnpm add react-native-mantine
|
|
56
42
|
```
|
|
57
43
|
|
|
58
|
-
### Peer
|
|
59
|
-
|
|
60
|
-
Ensure you have the following peer dependencies installed:
|
|
44
|
+
### Peer dependencies
|
|
61
45
|
|
|
62
46
|
```bash
|
|
63
47
|
npm install react react-native expo-linear-gradient expo-font expo-clipboard
|
|
64
48
|
```
|
|
65
49
|
|
|
66
|
-
---
|
|
67
|
-
|
|
68
50
|
## Quick Start
|
|
69
51
|
|
|
70
|
-
Wrap your application with the `ThemeProvider` to enable theming:
|
|
71
|
-
|
|
72
52
|
```tsx
|
|
73
|
-
import { ThemeProvider } from 'react-native-mantine';
|
|
53
|
+
import { ThemeProvider, Button, Text, Stack, Paper } from 'react-native-mantine';
|
|
74
54
|
|
|
75
55
|
export default function App() {
|
|
76
56
|
return (
|
|
77
57
|
<ThemeProvider>
|
|
78
|
-
|
|
58
|
+
<Stack spacing="md">
|
|
59
|
+
<Paper padding="lg" shadow="sm">
|
|
60
|
+
<Text size="xl" weight={700}>
|
|
61
|
+
Welcome to React Native Mantine
|
|
62
|
+
</Text>
|
|
63
|
+
<Text color="dimmed">
|
|
64
|
+
Build beautiful mobile apps with ease
|
|
65
|
+
</Text>
|
|
66
|
+
</Paper>
|
|
67
|
+
<Button variant="filled" color="blue" onPress={() => console.log('Pressed!')}>
|
|
68
|
+
Get Started
|
|
69
|
+
</Button>
|
|
70
|
+
</Stack>
|
|
79
71
|
</ThemeProvider>
|
|
80
72
|
);
|
|
81
73
|
}
|
|
82
74
|
```
|
|
83
75
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
```tsx
|
|
87
|
-
import { Button, Text, Stack, Paper } from 'react-native-mantine';
|
|
88
|
-
|
|
89
|
-
function MyComponent() {
|
|
90
|
-
return (
|
|
91
|
-
<Stack spacing="md">
|
|
92
|
-
<Paper padding="lg" shadow="sm">
|
|
93
|
-
<Text size="xl" weight={700}>
|
|
94
|
-
Welcome to React Native Mantine
|
|
95
|
-
</Text>
|
|
96
|
-
<Text color="dimmed">
|
|
97
|
-
Build beautiful mobile apps with ease
|
|
98
|
-
</Text>
|
|
99
|
-
</Paper>
|
|
100
|
-
|
|
101
|
-
<Button variant="filled" color="blue" onPress={() => console.log('Pressed!')}>
|
|
102
|
-
Get Started
|
|
103
|
-
</Button>
|
|
104
|
-
</Stack>
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
### Theme Customization
|
|
110
|
-
|
|
111
|
-
Customize the theme to match your brand:
|
|
76
|
+
## Theme Customization
|
|
112
77
|
|
|
113
78
|
```tsx
|
|
114
79
|
import { ThemeProvider, createTheme } from 'react-native-mantine';
|
|
@@ -118,7 +83,6 @@ const theme = createTheme({
|
|
|
118
83
|
primaryShade: { light: 6, dark: 8 },
|
|
119
84
|
fontFamily: 'Inter',
|
|
120
85
|
colors: {
|
|
121
|
-
// Add custom colors
|
|
122
86
|
brand: [
|
|
123
87
|
'#e6f7ff',
|
|
124
88
|
'#bae7ff',
|
|
@@ -143,296 +107,28 @@ export default function App() {
|
|
|
143
107
|
}
|
|
144
108
|
```
|
|
145
109
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
## Color System
|
|
149
|
-
|
|
150
|
-
React Native Mantine features a comprehensive color system aligned with Mantine web v6:
|
|
151
|
-
|
|
152
|
-
### 10-Shade Color Palettes
|
|
153
|
-
|
|
154
|
-
Every color includes 10 shades (0-9) for consistent theming:
|
|
155
|
-
|
|
156
|
-
```tsx
|
|
157
|
-
import { useMantineTheme } from 'react-native-mantine';
|
|
158
|
-
|
|
159
|
-
function MyComponent() {
|
|
160
|
-
const theme = useMantineTheme();
|
|
161
|
-
|
|
162
|
-
// Access specific color shades
|
|
163
|
-
const lightBlue = theme.colors.blue[0]; // Lightest
|
|
164
|
-
const primaryBlue = theme.colors.blue[6]; // Default
|
|
165
|
-
const darkBlue = theme.colors.blue[9]; // Darkest
|
|
166
|
-
|
|
167
|
-
return (
|
|
168
|
-
<View style={{ backgroundColor: primaryBlue }}>
|
|
169
|
-
<Text>Content</Text>
|
|
170
|
-
</View>
|
|
171
|
-
);
|
|
172
|
-
}
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
### Primary Color Configuration
|
|
176
|
-
|
|
177
|
-
Control your app's primary color and its shades:
|
|
178
|
-
|
|
179
|
-
```tsx
|
|
180
|
-
const theme = createTheme({
|
|
181
|
-
primaryColor: 'blue',
|
|
182
|
-
primaryShade: {
|
|
183
|
-
light: 6, // Shade used in light mode
|
|
184
|
-
dark: 8, // Shade used in dark mode
|
|
185
|
-
},
|
|
186
|
-
});
|
|
187
|
-
|
|
188
|
-
// Use primary color in components
|
|
189
|
-
<Button color="blue">Click me</Button>
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
### Theme Helper Functions
|
|
193
|
-
|
|
194
|
-
Powerful utilities for color manipulation:
|
|
195
|
-
|
|
196
|
-
```tsx
|
|
197
|
-
const theme = useMantineTheme();
|
|
198
|
-
|
|
199
|
-
// Get color at primary shade
|
|
200
|
-
const primaryColor = theme.fn.themeColor('blue');
|
|
201
|
-
|
|
202
|
-
// Get specific shade
|
|
203
|
-
const lightBlue = theme.fn.themeColor('blue', 2);
|
|
204
|
-
|
|
205
|
-
// Get variant styles
|
|
206
|
-
const styles = theme.fn.variant({ variant: 'filled', color: 'blue' });
|
|
207
|
-
|
|
208
|
-
// Manipulate colors
|
|
209
|
-
const lighter = theme.fn.lighten('#228be6', 0.2);
|
|
210
|
-
const darker = theme.fn.darken('#228be6', 0.2);
|
|
211
|
-
const dimmed = theme.fn.dimmed(); // Dimmed text color
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
### Component Variants
|
|
215
|
-
|
|
216
|
-
Components support 8 built-in variants:
|
|
217
|
-
|
|
218
|
-
- **filled**: Solid background with white text
|
|
219
|
-
- **light**: Light background with colored text
|
|
220
|
-
- **outline**: Transparent background with colored border
|
|
221
|
-
- **subtle**: Transparent background with colored text
|
|
222
|
-
- **white**: White background with colored text
|
|
223
|
-
- **default**: Gray background (adapts to color scheme)
|
|
224
|
-
- **gradient**: Transparent background for gradients
|
|
225
|
-
- **transparent**: Fully transparent
|
|
226
|
-
|
|
227
|
-
```tsx
|
|
228
|
-
<Button variant="filled" color="blue">Filled</Button>
|
|
229
|
-
<Button variant="light" color="green">Light</Button>
|
|
230
|
-
<Button variant="outline" color="red">Outline</Button>
|
|
231
|
-
```
|
|
232
|
-
|
|
233
|
-
### Available Colors
|
|
234
|
-
|
|
235
|
-
14 default colors ready to use:
|
|
110
|
+
## Getting Help
|
|
236
111
|
|
|
237
|
-
|
|
238
|
-
- **Greens**: green, lime
|
|
239
|
-
- **Warm**: yellow, orange, red
|
|
240
|
-
- **Purples**: pink, grape, violet, indigo
|
|
241
|
-
- **Neutrals**: dark, gray
|
|
112
|
+
Join our community:
|
|
242
113
|
|
|
243
|
-
|
|
244
|
-
- [
|
|
245
|
-
- [Migration Guide](./docs/MIGRATION_GUIDE.md)
|
|
246
|
-
|
|
247
|
-
---
|
|
248
|
-
|
|
249
|
-
## Example App
|
|
250
|
-
|
|
251
|
-
The library includes a comprehensive example application showcasing all components with live examples and code snippets.
|
|
252
|
-
|
|
253
|
-
### Running the Example App
|
|
254
|
-
|
|
255
|
-
```bash
|
|
256
|
-
# Clone the repository
|
|
257
|
-
git clone https://github.com/auronsan/react-native-mantine.git
|
|
258
|
-
cd react-native-mantine
|
|
259
|
-
|
|
260
|
-
# Install dependencies
|
|
261
|
-
yarn install
|
|
262
|
-
|
|
263
|
-
# Run on Web (recommended for quick preview)
|
|
264
|
-
yarn example web
|
|
265
|
-
|
|
266
|
-
# Run on iOS
|
|
267
|
-
yarn example ios
|
|
268
|
-
|
|
269
|
-
# Run on Android
|
|
270
|
-
yarn example android
|
|
271
|
-
|
|
272
|
-
# Start Metro bundler
|
|
273
|
-
yarn example start
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
The example app includes:
|
|
277
|
-
|
|
278
|
-
- Interactive component showcase
|
|
279
|
-
- All 70+ components with examples
|
|
280
|
-
- Theme customization demos
|
|
281
|
-
- Component variant demonstrations
|
|
282
|
-
- Code examples for each component
|
|
283
|
-
- **Web support** via React Native Web (also available at [live demo](https://auronsan.github.io/react-native-mantine/))
|
|
284
|
-
|
|
285
|
-
---
|
|
286
|
-
|
|
287
|
-
## Development
|
|
288
|
-
|
|
289
|
-
### Project Structure
|
|
290
|
-
|
|
291
|
-
```
|
|
292
|
-
react-native-mantine/
|
|
293
|
-
├── src/
|
|
294
|
-
│ ├── components/ # All component implementations
|
|
295
|
-
│ ├── theme/ # Theme system and utilities
|
|
296
|
-
│ └── hooks/ # Custom React hooks
|
|
297
|
-
├── example/ # Example application
|
|
298
|
-
│ └── src/
|
|
299
|
-
│ ├── examples/ # Component examples
|
|
300
|
-
│ └── screens/ # Example app screens
|
|
301
|
-
├── lib/ # Built library output
|
|
302
|
-
└── package.json
|
|
303
|
-
```
|
|
304
|
-
|
|
305
|
-
### Scripts
|
|
306
|
-
|
|
307
|
-
```bash
|
|
308
|
-
# Development
|
|
309
|
-
yarn example start # Start example app
|
|
310
|
-
yarn example web # Run on web browser
|
|
311
|
-
yarn example ios # Run on iOS
|
|
312
|
-
yarn example android # Run on Android
|
|
313
|
-
|
|
314
|
-
# Testing & Quality
|
|
315
|
-
yarn test # Run Jest tests
|
|
316
|
-
yarn typecheck # TypeScript type checking
|
|
317
|
-
yarn lint # Run ESLint
|
|
318
|
-
yarn prettier:write # Format code
|
|
319
|
-
|
|
320
|
-
# Building
|
|
321
|
-
yarn prepare # Build library
|
|
322
|
-
yarn clean # Clean build artifacts
|
|
323
|
-
|
|
324
|
-
# Web Deployment
|
|
325
|
-
cd example
|
|
326
|
-
yarn web:build # Build for GitHub Pages
|
|
327
|
-
yarn web:serve # Serve production build locally
|
|
328
|
-
```
|
|
329
|
-
|
|
330
|
-
### Building the Library
|
|
331
|
-
|
|
332
|
-
The library uses `react-native-builder-bob` for building:
|
|
333
|
-
|
|
334
|
-
```bash
|
|
335
|
-
yarn prepare
|
|
336
|
-
```
|
|
337
|
-
|
|
338
|
-
This generates:
|
|
339
|
-
|
|
340
|
-
- CommonJS output in `lib/commonjs/`
|
|
341
|
-
- ES modules output in `lib/module/`
|
|
342
|
-
- TypeScript definitions in `lib/typescript/`
|
|
343
|
-
|
|
344
|
-
---
|
|
114
|
+
- [GitHub Issues](https://github.com/auronsan/react-native-mantine/issues) – Bug reports and feature requests
|
|
115
|
+
- [GitHub Discussions](https://github.com/auronsan/react-native-mantine/discussions) – Questions and community support
|
|
345
116
|
|
|
346
117
|
## Contributing
|
|
347
118
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
### Development Workflow
|
|
351
|
-
|
|
352
|
-
1. Fork the repository
|
|
353
|
-
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
354
|
-
3. Make your changes
|
|
355
|
-
4. Run tests and linting (`yarn test && yarn lint`)
|
|
356
|
-
5. Commit your changes (`git commit -m 'Add amazing feature'`)
|
|
357
|
-
6. Push to the branch (`git push origin feature/amazing-feature`)
|
|
358
|
-
7. Open a Pull Request
|
|
359
|
-
|
|
360
|
-
### Component Development Guidelines
|
|
361
|
-
|
|
362
|
-
- Follow existing component patterns
|
|
363
|
-
- Include TypeScript types for all props
|
|
364
|
-
- Write tests for new components
|
|
365
|
-
- Add examples in the example app
|
|
366
|
-
- Document props and usage in JSDoc comments
|
|
367
|
-
- Support all standard variants and sizes where applicable
|
|
368
|
-
|
|
369
|
-
---
|
|
370
|
-
|
|
371
|
-
## Roadmap
|
|
372
|
-
|
|
373
|
-
- [x] Web platform support (via React Native Web)
|
|
374
|
-
- [x] Live demo on GitHub Pages
|
|
375
|
-
- [ ] Additional components (Carousel, DatePicker, ColorPicker)
|
|
376
|
-
- [ ] Enhanced animations and transitions
|
|
377
|
-
- [ ] Improved accessibility features
|
|
378
|
-
- [ ] Performance optimizations
|
|
379
|
-
- [ ] Comprehensive documentation site
|
|
380
|
-
- [ ] Storybook integration
|
|
381
|
-
- [ ] More theming options
|
|
382
|
-
|
|
383
|
-
---
|
|
119
|
+
We welcome contributions! Please read our [Contributing Guide](CONTRIBUTING.md) to learn about our development process, code standards, and how to submit pull requests.
|
|
384
120
|
|
|
385
121
|
## Browser/Platform Support
|
|
386
122
|
|
|
387
123
|
- iOS 13.0+
|
|
388
124
|
- Android API 21+
|
|
389
125
|
- React Native 0.70+
|
|
390
|
-
- Web (via React Native Web)
|
|
391
|
-
- Chrome, Firefox, Safari, Edge (latest versions)
|
|
392
|
-
- Progressive Web App (PWA) compatible
|
|
393
|
-
|
|
394
|
-
---
|
|
126
|
+
- Web (via React Native Web) – Chrome, Firefox, Safari, Edge (latest versions)
|
|
395
127
|
|
|
396
128
|
## Credits
|
|
397
129
|
|
|
398
130
|
This library is inspired by the excellent [Mantine](https://mantine.dev/) project by Vitaly Rtishchev. Special thanks to the Mantine team for creating such a wonderful UI library.
|
|
399
131
|
|
|
400
|
-
---
|
|
401
|
-
|
|
402
|
-
## License
|
|
403
|
-
|
|
404
|
-
MIT License - see the [LICENSE](LICENSE) file for details.
|
|
405
|
-
|
|
406
|
-
Copyright (c) 2024 Auronsan
|
|
407
|
-
|
|
408
|
-
---
|
|
409
|
-
|
|
410
|
-
## Documentation
|
|
411
|
-
|
|
412
|
-
Visit our official documentation site:
|
|
413
|
-
|
|
414
|
-
**https://auronsan.github.io/react-native-mantine/**
|
|
415
|
-
|
|
416
|
-
The documentation includes:
|
|
417
|
-
- Interactive component showcase
|
|
418
|
-
- Complete setup guide
|
|
419
|
-
- API reference
|
|
420
|
-
- Usage examples
|
|
421
|
-
- Theme customization guide
|
|
422
|
-
|
|
423
|
-
---
|
|
424
|
-
|
|
425
|
-
## Links
|
|
426
|
-
|
|
427
|
-
- [Documentation Site](https://auronsan.github.io/react-native-mantine/)
|
|
428
|
-
- [GitHub Repository](https://github.com/auronsan/react-native-mantine)
|
|
429
|
-
- [NPM Package](https://www.npmjs.com/package/react-native-mantine)
|
|
430
|
-
- [GitHub Packages](https://github.com/auronsan/react-native-mantine/packages)
|
|
431
|
-
- [Issue Tracker](https://github.com/auronsan/react-native-mantine/issues)
|
|
432
|
-
- [Mantine (Web)](https://mantine.dev/)
|
|
433
|
-
|
|
434
|
-
---
|
|
435
|
-
|
|
436
132
|
## Support
|
|
437
133
|
|
|
438
134
|
If you like this project, please consider:
|
|
@@ -442,6 +138,10 @@ If you like this project, please consider:
|
|
|
442
138
|
- Contributing to the codebase
|
|
443
139
|
- Sharing with other developers
|
|
444
140
|
|
|
141
|
+
## License
|
|
142
|
+
|
|
143
|
+
MIT – see the [LICENSE](LICENSE) file for details.
|
|
144
|
+
|
|
445
145
|
---
|
|
446
146
|
|
|
447
147
|
Made with ❤️ by [Auronsan](https://github.com/auronsan)
|
|
@@ -86,24 +86,32 @@ const RingProgress = exports.RingProgress = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
86
86
|
name: 'RingProgress'
|
|
87
87
|
});
|
|
88
88
|
|
|
89
|
-
//
|
|
90
|
-
const
|
|
89
|
+
// Create a stable reference for animated values
|
|
90
|
+
const animatedValuesRef = (0, _react.useRef)(new Map());
|
|
91
|
+
|
|
92
|
+
// Get or create animated value for a section index
|
|
93
|
+
const getAnimatedValue = (index, initialValue = 0) => {
|
|
94
|
+
if (!animatedValuesRef.current.has(index)) {
|
|
95
|
+
animatedValuesRef.current.set(index, new _reactNative.Animated.Value(initialValue));
|
|
96
|
+
}
|
|
97
|
+
return animatedValuesRef.current.get(index);
|
|
98
|
+
};
|
|
91
99
|
|
|
92
100
|
// Update animation values when sections change
|
|
93
101
|
(0, _react.useEffect)(() => {
|
|
94
|
-
//
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
102
|
+
// Clean up unused animated values
|
|
103
|
+
const currentIndices = new Set(sections.map((_, i) => i));
|
|
104
|
+
const keysToDelete = [];
|
|
105
|
+
animatedValuesRef.current.forEach((_, key) => {
|
|
106
|
+
if (!currentIndices.has(key)) {
|
|
107
|
+
keysToDelete.push(key);
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
keysToDelete.forEach(key => animatedValuesRef.current.delete(key));
|
|
98
111
|
|
|
99
112
|
// Animate each section
|
|
100
113
|
const animations = sections.map((section, index) => {
|
|
101
|
-
const animValue =
|
|
102
|
-
if (!animValue) return _reactNative.Animated.timing(new _reactNative.Animated.Value(0), {
|
|
103
|
-
toValue: 0,
|
|
104
|
-
duration: 0,
|
|
105
|
-
useNativeDriver: false
|
|
106
|
-
});
|
|
114
|
+
const animValue = getAnimatedValue(index, 0);
|
|
107
115
|
return _reactNative.Animated.timing(animValue, {
|
|
108
116
|
toValue: section.value,
|
|
109
117
|
duration: 1000,
|
|
@@ -111,55 +119,70 @@ const RingProgress = exports.RingProgress = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
111
119
|
});
|
|
112
120
|
});
|
|
113
121
|
_reactNative.Animated.parallel(animations).start();
|
|
114
|
-
}, [sections
|
|
122
|
+
}, [sections]);
|
|
115
123
|
|
|
116
|
-
//
|
|
117
|
-
const normalizedSections =
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
124
|
+
// Memoize normalized sections to prevent unnecessary recalculations
|
|
125
|
+
const normalizedSections = (0, _react.useMemo)(() => {
|
|
126
|
+
return sections.map((section, index) => ({
|
|
127
|
+
...section,
|
|
128
|
+
percentage: section.value,
|
|
129
|
+
animatedValue: getAnimatedValue(index, 0)
|
|
130
|
+
}));
|
|
131
|
+
}, [sections]);
|
|
122
132
|
|
|
123
|
-
// Render animated ring using
|
|
124
|
-
// Note: This is a
|
|
133
|
+
// Render animated ring using circular segments
|
|
134
|
+
// Note: This is a simplified implementation. For full SVG support, use react-native-svg
|
|
125
135
|
const renderSections = () => {
|
|
126
|
-
let
|
|
136
|
+
let accumulatedAngle = 0;
|
|
127
137
|
return normalizedSections.map((section, index) => {
|
|
128
138
|
const sectionColor = theme.fn.themeColor(section.color, 6);
|
|
129
|
-
const
|
|
130
|
-
const rotation = currentAngle;
|
|
131
|
-
currentAngle += angle;
|
|
139
|
+
const startAngle = accumulatedAngle;
|
|
132
140
|
|
|
133
|
-
//
|
|
134
|
-
const
|
|
135
|
-
inputRange: [0, section.value],
|
|
136
|
-
outputRange: [0, 1]
|
|
137
|
-
});
|
|
141
|
+
// Create an array to hold segments for this section
|
|
142
|
+
const sectionSegments = [];
|
|
138
143
|
|
|
139
|
-
//
|
|
140
|
-
const
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
+
// Create 8 segments for smoother circular rendering (each 45 degrees)
|
|
145
|
+
const totalSegments = 8;
|
|
146
|
+
const segmentAngle = 360 / totalSegments;
|
|
147
|
+
for (let i = 0; i < totalSegments; i++) {
|
|
148
|
+
const segmentStartDegrees = i * segmentAngle;
|
|
149
|
+
const segmentEndDegrees = (i + 1) * segmentAngle;
|
|
150
|
+
|
|
151
|
+
// Calculate opacity based on progress through this segment
|
|
152
|
+
const segmentOpacity = section.animatedValue.interpolate({
|
|
153
|
+
inputRange: [segmentStartDegrees / 360 * 100, segmentEndDegrees / 360 * 100],
|
|
154
|
+
outputRange: [0, 1],
|
|
155
|
+
extrapolate: 'clamp'
|
|
156
|
+
});
|
|
157
|
+
|
|
158
|
+
// Determine which border(s) to show for this segment
|
|
159
|
+
const borderConfig = {
|
|
160
|
+
borderColor: 'transparent'
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
// Map segments to borders (simplified circular approximation)
|
|
164
|
+
const borderIndex = i % 4;
|
|
165
|
+
const borders = ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'];
|
|
166
|
+
borderConfig[borders[borderIndex]] = sectionColor;
|
|
167
|
+
sectionSegments.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
|
|
168
|
+
style: {
|
|
169
|
+
position: 'absolute',
|
|
170
|
+
width: size,
|
|
171
|
+
height: size,
|
|
172
|
+
borderRadius: size / 2,
|
|
173
|
+
borderWidth: thickness,
|
|
174
|
+
...borderConfig,
|
|
175
|
+
transform: [{
|
|
176
|
+
rotate: `${startAngle + segmentStartDegrees}deg`
|
|
177
|
+
}],
|
|
178
|
+
opacity: segmentOpacity
|
|
179
|
+
}
|
|
180
|
+
}, `section-${index}-segment-${i}`));
|
|
181
|
+
}
|
|
144
182
|
|
|
145
|
-
//
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
position: 'absolute',
|
|
149
|
-
width: size,
|
|
150
|
-
height: size,
|
|
151
|
-
borderRadius: size / 2,
|
|
152
|
-
borderWidth: thickness,
|
|
153
|
-
borderColor: 'transparent',
|
|
154
|
-
borderTopColor: sectionColor,
|
|
155
|
-
transform: [{
|
|
156
|
-
rotate: `${rotation}deg`
|
|
157
|
-
}, {
|
|
158
|
-
scale: animatedScale
|
|
159
|
-
}],
|
|
160
|
-
opacity: animatedOpacity
|
|
161
|
-
}
|
|
162
|
-
}, index);
|
|
183
|
+
// Update accumulated angle for next section
|
|
184
|
+
accumulatedAngle += section.percentage / 100 * 360;
|
|
185
|
+
return sectionSegments;
|
|
163
186
|
});
|
|
164
187
|
};
|
|
165
188
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.BoxView, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_index2","_themeProvider","_index3","_rem","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useStyles","createStyles","theme","size","thickness","rootColor","root","width","height","position","alignItems","justifyContent","track","borderRadius","borderWidth","borderColor","label","fontSize","rem","fontWeight","color","colorScheme","fn","themeColor","black","progressContainer","overflow","defaultProps","roundCaps","RingProgress","exports","forwardRef","props","ref","sections","customRootColor","style","others","useComponentDefaultProps","useTheme","styles","sx","name","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_index2","_themeProvider","_index3","_rem","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useStyles","createStyles","theme","size","thickness","rootColor","root","width","height","position","alignItems","justifyContent","track","borderRadius","borderWidth","borderColor","label","fontSize","rem","fontWeight","color","colorScheme","fn","themeColor","black","progressContainer","overflow","defaultProps","roundCaps","RingProgress","exports","forwardRef","props","ref","sections","customRootColor","style","others","useComponentDefaultProps","useTheme","styles","sx","name","animatedValuesRef","useRef","Map","getAnimatedValue","index","initialValue","current","Animated","Value","useEffect","currentIndices","Set","map","_","keysToDelete","forEach","key","push","delete","animations","section","animValue","timing","toValue","value","duration","useNativeDriver","parallel","start","normalizedSections","useMemo","percentage","animatedValue","renderSections","accumulatedAngle","sectionColor","startAngle","sectionSegments","totalSegments","segmentAngle","segmentStartDegrees","segmentEndDegrees","segmentOpacity","interpolate","inputRange","outputRange","extrapolate","borderConfig","borderIndex","borders","jsx","View","transform","rotate","opacity","jsxs","BoxView","children","Text","displayName"],"sourceRoot":"../../../../src","sources":["components/RingProgress/index.tsx"],"mappings":"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","ignoreList":[]}
|