react-native-unistyles 3.0.0-alpha.43 → 3.0.0-alpha.44

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.
@@ -9,9 +9,11 @@ type WebPressableState = {
9
9
  focused: boolean
10
10
  }
11
11
 
12
+ type WebPressableStyle = ((state: WebPressableState) => ViewStyle) | ViewStyle
13
+
12
14
  type PressableProps = Props & {
13
15
  variants?: Record<string, string | boolean>
14
- style?: ((state: WebPressableState) => ViewStyle) | ViewStyle,
16
+ style?: WebPressableStyle,
15
17
  }
16
18
 
17
19
  const initialState: WebPressableState = {
@@ -29,8 +31,46 @@ const events = {
29
31
  'blur': { focused: false }
30
32
  } satisfies Partial<Record<keyof HTMLElementEventMap, Partial<WebPressableState>>>
31
33
 
34
+ type UpdateStylesProps = {
35
+ ref: View | null,
36
+ style: WebPressableStyle,
37
+ variants?: Record<string, string | boolean>,
38
+ state: WebPressableState
39
+ }
40
+
41
+ const isFunctionWithBoundArgs = (fn: any): fn is Function & { getBoundArgs: Function } => {
42
+ return typeof fn === 'function' && 'getBoundArgs' in fn
43
+ }
44
+
45
+ const extractFunctionArgs = (styleResult: any) => {
46
+ return isFunctionWithBoundArgs(styleResult)
47
+ ? [styleResult.getBoundArgs()]
48
+ : Array.isArray(styleResult)
49
+ ? styleResult.map(style => isFunctionWithBoundArgs(style) ? style.getBoundArgs() : [])
50
+ : []
51
+ }
52
+
53
+ const extractStyleResult = (style: any) => {
54
+ return typeof style === 'function'
55
+ ? [style()]
56
+ : Array.isArray(style)
57
+ ? style.map(style => typeof style === 'function' ? style() : style)
58
+ : [style]
59
+ }
60
+
61
+ const updateStyles = ({ ref, style, variants, state }: UpdateStylesProps) => {
62
+ const styleResult = typeof style === 'function'
63
+ ? style(state)
64
+ : style
65
+ const fnArgs = extractFunctionArgs(styleResult)
66
+ const extractedResult = extractStyleResult(styleResult)
67
+
68
+ // @ts-expect-error - this is hidden from TS
69
+ UnistylesShadowRegistry.add(ref, extractedResult, variants, fnArgs)
70
+ }
71
+
32
72
  export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, passedRef) => {
33
- const storedRef = useRef<View | null>()
73
+ const storedRef = useRef<View | null>(null)
34
74
  const state = useRef<WebPressableState>(initialState)
35
75
  const styleRef = useRef(style)
36
76
 
@@ -42,19 +82,12 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
42
82
  const handler = (newState: Partial<WebPressableState>) => () => {
43
83
  state.current = { ...state.current, ...newState }
44
84
 
45
- const styleResult = typeof styleRef.current === 'function'
46
- ? styleRef.current(state.current)
47
- : styleRef.current
48
- const fnArgs = typeof styleResult === 'function'
49
- // @ts-expect-error - this is hidden from TS
50
- ? styleResult.getBoundArgs()
51
- : []
52
- const extractedResult = typeof styleResult === 'function'
53
- ? (styleResult as Function)()
54
- : styleResult
55
-
56
- // @ts-expect-error - this is hidden from TS
57
- UnistylesShadowRegistry.add(storedRef.current, [extractedResult], variants, [fnArgs])
85
+ updateStyles({
86
+ ref: storedRef.current,
87
+ style: styleRef.current as WebPressableStyle,
88
+ variants,
89
+ state: state.current
90
+ })
58
91
  }
59
92
 
60
93
  if (!storedRef.current) {
@@ -80,23 +113,16 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
80
113
  {...props}
81
114
  ref={ref => {
82
115
  storedRef.current = ref
83
- const styleResult = typeof style === 'function'
84
- ? style(initialState)
85
- : style
86
- const fnArgs = typeof styleResult === 'function'
87
- // @ts-expect-error - this is hidden from TS
88
- ? styleResult.getBoundArgs()
89
- : []
90
- const extractedResult = typeof styleResult === 'function'
91
- ? (styleResult as Function)()
92
- : styleResult
116
+ updateStyles({
117
+ ref,
118
+ style: style as WebPressableStyle,
119
+ variants,
120
+ state: initialState
121
+ })
93
122
 
94
123
  if (typeof passedRef === 'object' && passedRef !== null) {
95
124
  passedRef.current = ref
96
125
  }
97
-
98
- // @ts-expect-error - this is hidden from TS
99
- UnistylesShadowRegistry.add(ref, [extractedResult], variants, [fnArgs])
100
126
  }}
101
127
  />
102
128
  )
@@ -21,17 +21,15 @@ class UnistylesShadowRegistryBuilder {
21
21
  private hashMap = new Map<HTMLElement, string>()
22
22
  private classNamesMap = new Map<HTMLElement, Array<string>>()
23
23
 
24
- add = (ref: any, _style: Array<Style>, _variants: Record<string, any> | undefined, _args: Array<Array<any>>) => {
25
- // Style is not provided
26
- if (!_style) {
24
+ add = (ref: any, styles: Array<Style>, _variants: Record<string, any> | undefined, _args: Array<Array<any>>) => {
25
+ // Styles are not provided
26
+ if (!styles) {
27
27
  return
28
28
  }
29
29
 
30
30
  // Ref is unmounted, remove style tags from the document
31
31
  if (ref === null) {
32
- const secrets = extractSecrets(_style)
33
-
34
- secrets.forEach(({ __uni__refs }) => {
32
+ extractSecrets(styles).forEach(({ __uni__refs }) => {
35
33
  __uni__refs.forEach(ref => {
36
34
  if (isInDocument(ref)) {
37
35
  return
@@ -55,56 +53,58 @@ class UnistylesShadowRegistryBuilder {
55
53
  return
56
54
  }
57
55
 
58
- const styles = _style.filter(style => Object.keys(style ?? {}).some(key => key.startsWith('__uni__')))
59
-
60
- // No unistyles
61
- if (styles.length === 0) {
62
- return
63
- }
56
+ const parsedStyles = styles.flatMap((style, styleIndex) => {
57
+ const secrets = extractSecrets(style)
64
58
 
65
- const parsedStyles = styles.flatMap((style, styleIndex) => extractSecrets(style).map(secret => {
66
- const { __uni__key, __uni__stylesheet, __uni__variants, __uni__args = [], __uni__refs } = secret
67
- const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
68
- const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
69
- const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants
70
- const args = _args[styleIndex] && _args[styleIndex].length > 0 ? _args[styleIndex] : __uni__args
71
- const result = typeof style === 'function'
72
- ? style(...args)
73
- : style
74
- const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
75
- const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
76
- const dependencies = extractUnistyleDependencies(resultWithVariants)
77
-
78
- if (typeof __uni__stylesheet === 'function') {
79
- // Add dependencies from dynamic styles to stylesheet
80
- UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
59
+ // Regular style
60
+ if (secrets.length === 0) {
61
+ return style as UnistylesValues
81
62
  }
82
63
 
83
- __uni__refs.add(ref)
64
+ return secrets.map(secret => {
65
+ const { __uni__key, __uni__stylesheet, __uni__variants, __uni__args = [], __uni__refs } = secret
66
+ const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
67
+ const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
68
+ const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants
69
+ const args = _args[styleIndex] && _args[styleIndex].length > 0 ? _args[styleIndex] : __uni__args
70
+ const result = typeof style === 'function'
71
+ ? style(...args)
72
+ : style
73
+ const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
74
+ const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
75
+ const dependencies = extractUnistyleDependencies(resultWithVariants)
76
+
77
+ if (typeof __uni__stylesheet === 'function') {
78
+ // Add dependencies from dynamic styles to stylesheet
79
+ UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies)
80
+ }
84
81
 
85
- const dispose = UnistylesListener.addListeners(extractUnistyleDependencies(resultWithVariants), () => {
86
- const hash = this.hashMap.get(ref)
82
+ __uni__refs.add(ref)
87
83
 
88
- // Dispose listener if there is no hash
89
- if (!hash) {
90
- dispose()
84
+ const dispose = UnistylesListener.addListeners(extractUnistyleDependencies(resultWithVariants), () => {
85
+ const hash = this.hashMap.get(ref)
91
86
 
92
- return
93
- }
87
+ // Dispose listener if there is no hash
88
+ if (!hash) {
89
+ dispose()
94
90
 
95
- const newComputedStyleSheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
96
- const newValue = newComputedStyleSheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
97
- const result = typeof newValue === 'function'
98
- ? newValue(...args)
99
- : newValue
100
- const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
101
- const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
91
+ return
92
+ }
102
93
 
103
- UnistylesRegistry.applyStyles(hash, convertUnistyles(resultWithVariants))
104
- })
94
+ const newComputedStyleSheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet)
95
+ const newValue = newComputedStyleSheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues))
96
+ const result = typeof newValue === 'function'
97
+ ? newValue(...args)
98
+ : newValue
99
+ const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants))
100
+ const resultWithVariants = deepMergeObjects(result, variantsResult ?? {})
101
+
102
+ UnistylesRegistry.applyStyles(hash, convertUnistyles(resultWithVariants))
103
+ })
105
104
 
106
- return resultWithVariants as UnistylesValues
107
- }))
105
+ return resultWithVariants as UnistylesValues
106
+ })
107
+ })
108
108
  const combinedStyles = deepMergeObjects(...parsedStyles)
109
109
  const oldStyles = this.resultsMap.get(ref)
110
110