@startupjs-ui/span 0.1.5 → 0.1.12
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/CHANGELOG.md +19 -0
- package/README.mdx +52 -1
- package/index.tsx +13 -3
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.12](https://github.com/startupjs/startupjs-ui/compare/v0.1.11...v0.1.12) (2026-01-21)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **span:** add animation and transition support ([d8336e2](https://github.com/startupjs/startupjs-ui/commit/d8336e259573e09c8302265b57bc993d04567e62))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.1.11](https://github.com/startupjs/startupjs-ui/compare/v0.1.10...v0.1.11) (2026-01-20)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @startupjs-ui/span
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [0.1.5](https://github.com/startupjs/startupjs-ui/compare/v0.1.4...v0.1.5) (2025-12-29)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @startupjs-ui/span
|
package/README.mdx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { useState } from 'react'
|
|
2
|
-
import { pug } from 'startupjs'
|
|
2
|
+
import { pug, styl } from 'startupjs'
|
|
3
3
|
import Span, { _PropsJsonSchema as SpanPropsJsonSchema } from './index'
|
|
4
|
+
import { View, Pressable } from 'react-native'
|
|
4
5
|
import { Sandbox } from '@startupjs-ui/docs'
|
|
5
6
|
|
|
6
7
|
# Span
|
|
@@ -46,6 +47,56 @@ Use `description` prop for secondary text.
|
|
|
46
47
|
<Span description>Description text</Span>
|
|
47
48
|
```
|
|
48
49
|
|
|
50
|
+
## Animations
|
|
51
|
+
|
|
52
|
+
Div automatically uses React Native Reanimated when a `transition` or `animation` property is detected in the style. This allows you to create smooth animations without any additional setup.
|
|
53
|
+
|
|
54
|
+
**Note:** When using modifier classes to add transitions/animations dynamically, set `animation: none` in the base styles. This ensures Div uses the animated component from the start.
|
|
55
|
+
|
|
56
|
+
```jsx example
|
|
57
|
+
const [isActive, setIsActive] = useState(false)
|
|
58
|
+
return (
|
|
59
|
+
<View styleName='root'>
|
|
60
|
+
<Span styleName={['text', { isActive }]}>Hello World!</Span>
|
|
61
|
+
<Pressable styleName='button' onPress={() => setIsActive(!isActive)}>
|
|
62
|
+
<Span style={{ color: 'white' }}>Activate</Span>
|
|
63
|
+
</Pressable>
|
|
64
|
+
</View>
|
|
65
|
+
)
|
|
66
|
+
styl`
|
|
67
|
+
.text
|
|
68
|
+
color red
|
|
69
|
+
transition color 1s
|
|
70
|
+
animation none
|
|
71
|
+
&.isActive
|
|
72
|
+
color green
|
|
73
|
+
animation shake 0.5s infinite, pulse 1s infinite, highlight 1s infinite
|
|
74
|
+
.root
|
|
75
|
+
height 60px
|
|
76
|
+
flex-direction row
|
|
77
|
+
align-items center
|
|
78
|
+
gap 16px
|
|
79
|
+
.button
|
|
80
|
+
padding 8px 16px
|
|
81
|
+
background-color #2962FF
|
|
82
|
+
border-radius 4px
|
|
83
|
+
@keyframes shake
|
|
84
|
+
0%, 100%
|
|
85
|
+
transform translateX(0) translateY(0)
|
|
86
|
+
25%
|
|
87
|
+
transform translateX(-10px) translateY(-10px)
|
|
88
|
+
75%
|
|
89
|
+
transform translateX(10px) translateY(10px)
|
|
90
|
+
@keyframes pulse
|
|
91
|
+
50%
|
|
92
|
+
font-size 24px
|
|
93
|
+
@keyframes highlight
|
|
94
|
+
50%
|
|
95
|
+
background-color rgba(green, 0.2)
|
|
96
|
+
box-shadow 0px 0px 10px rgba(green, 1)
|
|
97
|
+
`
|
|
98
|
+
```
|
|
99
|
+
|
|
49
100
|
## Sandbox
|
|
50
101
|
|
|
51
102
|
<Sandbox
|
package/index.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { type ReactNode, type RefObject } from 'react'
|
|
2
|
-
import { Platform, Text, type TextStyle, type StyleProp, type TextProps } from 'react-native'
|
|
1
|
+
import { type ReactNode, type RefObject, useMemo } from 'react'
|
|
2
|
+
import { Platform, StyleSheet, Text, type TextStyle, type StyleProp, type TextProps } from 'react-native'
|
|
3
|
+
import Animated from 'react-native-reanimated'
|
|
3
4
|
import { pug, observer } from 'startupjs'
|
|
4
5
|
import { themed } from '@startupjs-ui/core'
|
|
5
6
|
import './index.cssx.styl'
|
|
@@ -73,8 +74,12 @@ function Span ({
|
|
|
73
74
|
? { accessibilityRole: 'header', accessibilityLevel: tag.replace(/^h/, '') }
|
|
74
75
|
: {}
|
|
75
76
|
|
|
77
|
+
const Component = useMemo(() => {
|
|
78
|
+
return hasAnimatedProperty(StyleSheet.flatten(style)) ? Animated.Text : Text
|
|
79
|
+
}, [style])
|
|
80
|
+
|
|
76
81
|
return pug`
|
|
77
|
-
|
|
82
|
+
Component.root(
|
|
78
83
|
ref=ref
|
|
79
84
|
style=style
|
|
80
85
|
styleName=[
|
|
@@ -88,3 +93,8 @@ function Span ({
|
|
|
88
93
|
)= children
|
|
89
94
|
`
|
|
90
95
|
}
|
|
96
|
+
|
|
97
|
+
function hasAnimatedProperty (style: any): boolean {
|
|
98
|
+
if (!style) return false
|
|
99
|
+
return Object.keys(style).some(key => key.startsWith('animation') || key.startsWith('transition'))
|
|
100
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/span",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.12",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -8,12 +8,13 @@
|
|
|
8
8
|
"types": "index.d.ts",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@startupjs-ui/core": "^0.1.
|
|
11
|
+
"@startupjs-ui/core": "^0.1.11"
|
|
12
12
|
},
|
|
13
13
|
"peerDependencies": {
|
|
14
14
|
"react": "*",
|
|
15
15
|
"react-native": "*",
|
|
16
|
+
"react-native-reanimated": ">=4.0.0",
|
|
16
17
|
"startupjs": "*"
|
|
17
18
|
},
|
|
18
|
-
"gitHead": "
|
|
19
|
+
"gitHead": "c0b4606437077bb6d170e2c0b16b674801c304fe"
|
|
19
20
|
}
|