Skip to content

Commit 7a553d4

Browse files
nolimits4webnolimits4web
committed
feat(react): update to React 19 APIs
1 parent 37c434f commit 7a553d4

86 files changed

Lines changed: 1268 additions & 975 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/react/components/accordion-content.jsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
1+
import React from 'react';
22
import { classNames, getExtraAttrs } from '../shared/utils.js';
33
import { colorClasses } from '../shared/mixins.js';
44

@@ -11,21 +11,17 @@ import { colorClasses } from '../shared/mixins.js';
1111
COLOR_PROPS
1212
*/
1313

14-
const AccordionContent = forwardRef((props, ref) => {
15-
const { className, id, style, children } = props;
16-
const elRef = useRef(null);
17-
useImperativeHandle(ref, () => ({
18-
el: elRef.current,
19-
}));
14+
const AccordionContent = (props) => {
15+
const { className, id, style, ref, children } = props;
2016
const extraAttrs = getExtraAttrs(props);
2117

2218
const classes = classNames(className, 'accordion-item-content', colorClasses(props));
2319
return (
24-
<div id={id} style={style} className={classes} ref={elRef} {...extraAttrs}>
20+
<div id={id} style={style} className={classes} ref={ref} {...extraAttrs}>
2521
{children}
2622
</div>
2723
);
28-
});
24+
};
2925

3026
AccordionContent.displayName = 'f7-accordion-content';
3127

‎src/react/components/accordion-item.jsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
1+
import React, { useRef } from 'react';
22
import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
33
import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
44
import { colorClasses } from '../shared/mixins.js';
55
import { f7, f7ready } from '../shared/f7.js';
6+
import { setRef } from '../shared/set-ref.js';
67

78
/* dts-props
89
id: string | number;
@@ -20,12 +21,9 @@ import { f7, f7ready } from '../shared/f7.js';
2021
COLOR_PROPS
2122
*/
2223

23-
const AccordionItem = forwardRef((props, ref) => {
24-
const { className, id, style, children, opened } = props;
24+
const AccordionItem = (props) => {
25+
const { className, id, style, children, opened, ref } = props;
2526
const elRef = useRef(null);
26-
useImperativeHandle(ref, () => ({
27-
el: elRef.current,
28-
}));
2927

3028
const onBeforeOpen = (el, prevent) => {
3129
if (elRef.current !== el) return;
@@ -81,18 +79,25 @@ const AccordionItem = forwardRef((props, ref) => {
8179
const classes = classNames(
8280
className,
8381
'accordion-item',
84-
{
85-
'accordion-item-opened': opened,
86-
},
82+
{ 'accordion-item-opened': opened },
8783
colorClasses(props),
8884
);
8985

9086
return (
91-
<div id={id} style={style} className={classes} ref={elRef} {...extraAttrs}>
87+
<div
88+
id={id}
89+
style={style}
90+
className={classes}
91+
ref={(el) => {
92+
elRef.current = el;
93+
setRef(ref, el);
94+
}}
95+
{...extraAttrs}
96+
>
9297
{children}
9398
</div>
9499
);
95-
});
100+
};
96101

97102
AccordionItem.displayName = 'f7-accordion-item';
98103

‎src/react/components/accordion-toggle.jsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
1+
import React, { useRef } from 'react';
22
import { classNames, getExtraAttrs } from '../shared/utils.js';
33
import { colorClasses } from '../shared/mixins.js';
4+
import { setRef } from '../shared/set-ref.js';
45

56
/* dts-props
67
id: string | number;
@@ -11,21 +12,27 @@ import { colorClasses } from '../shared/mixins.js';
1112
COLOR_PROPS
1213
*/
1314

14-
const AccordionToggle = forwardRef((props, ref) => {
15-
const { className, id, style, children } = props;
15+
const AccordionToggle = (props) => {
16+
const { className, id, style, children, ref } = props;
1617
const elRef = useRef(null);
17-
useImperativeHandle(ref, () => ({
18-
el: elRef.current,
19-
}));
2018
const extraAttrs = getExtraAttrs(props);
2119

2220
const classes = classNames(className, 'accordion-item-toggle', colorClasses(props));
2321
return (
24-
<div id={id} style={style} className={classes} {...extraAttrs} ref={elRef}>
22+
<div
23+
id={id}
24+
style={style}
25+
className={classes}
26+
{...extraAttrs}
27+
ref={(el) => {
28+
elRef.current = el;
29+
setRef(ref, el);
30+
}}
31+
>
2532
{children}
2633
</div>
2734
);
28-
});
35+
};
2936

3037
AccordionToggle.displayName = 'f7-accordion-toggle';
3138

‎src/react/components/accordion.jsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
1+
import React, { useRef } from 'react';
22
import { classNames, getExtraAttrs } from '../shared/utils.js';
33
import { colorClasses } from '../shared/mixins.js';
4+
import { setRef } from '../shared/set-ref.js';
45

56
/* dts-props
67
id: string | number;
@@ -12,12 +13,9 @@ import { colorClasses } from '../shared/mixins.js';
1213
COLOR_PROPS
1314
*/
1415

15-
const Accordion = forwardRef((props, ref) => {
16-
const { className, id, style, accordionOpposite, children } = props;
16+
const Accordion = (props) => {
17+
const { className, id, style, accordionOpposite, children, ref } = props;
1718
const elRef = useRef(null);
18-
useImperativeHandle(ref, () => ({
19-
el: elRef.current,
20-
}));
2119
const extraAttrs = getExtraAttrs(props);
2220
const classes = classNames(
2321
className,
@@ -26,11 +24,20 @@ const Accordion = forwardRef((props, ref) => {
2624
colorClasses(props),
2725
);
2826
return (
29-
<div id={id} style={style} className={classes} ref={elRef} {...extraAttrs}>
27+
<div
28+
id={id}
29+
style={style}
30+
className={classes}
31+
ref={(el) => {
32+
elRef.current = el;
33+
setRef(ref, el);
34+
}}
35+
{...extraAttrs}
36+
>
3037
{children}
3138
</div>
3239
);
33-
});
40+
};
3441
Accordion.displayName = 'f7-accordion';
3542

3643
export default Accordion;

‎src/react/components/actions-button.jsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
1+
import React, { useRef } from 'react';
22
import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
33
import { colorClasses } from '../shared/mixins.js';
44
import { f7 } from '../shared/f7.js';
5+
import { setRef } from '../shared/set-ref.js';
56

67
/* dts-props
78
id: string | number;
@@ -15,21 +16,15 @@ import { f7 } from '../shared/f7.js';
1516
COLOR_PROPS
1617
*/
1718

18-
const ComponentName = forwardRef((props, ref) => {
19-
const { className, id, style, strong, close = true } = props;
19+
const ComponentName = (props) => {
20+
const { className, id, style, strong, close = true, ref } = props;
2021
const extraAttrs = getExtraAttrs(props);
2122

2223
const elRef = useRef(null);
23-
useImperativeHandle(ref, () => ({
24-
el: elRef.current,
25-
}));
2624

2725
const classes = classNames(
2826
className,
29-
{
30-
'actions-button': true,
31-
'actions-button-strong': strong,
32-
},
27+
{ 'actions-button': true, 'actions-button-strong': strong },
3328
colorClasses(props),
3429
);
3530

@@ -49,12 +44,22 @@ const ComponentName = forwardRef((props, ref) => {
4944
};
5045

5146
return (
52-
<div id={id} style={style} className={classes} ref={elRef} {...extraAttrs} onClick={onClick}>
47+
<div
48+
id={id}
49+
style={style}
50+
className={classes}
51+
ref={(el) => {
52+
elRef.current = el;
53+
setRef(ref, el);
54+
}}
55+
{...extraAttrs}
56+
onClick={onClick}
57+
>
5358
{mediaEl}
5459
<div className="actions-button-text">{slots.default}</div>
5560
</div>
5661
);
57-
});
62+
};
5863

5964
ComponentName.displayName = 'f7-actions-button';
6065

‎src/react/components/actions-group.jsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
1+
import React, { useRef } from 'react';
22
import { classNames, getExtraAttrs } from '../shared/utils.js';
33
import { colorClasses } from '../shared/mixins.js';
4+
import { setRef } from '../shared/set-ref.js';
45

56
/* dts-props
67
id: string | number;
@@ -11,23 +12,29 @@ import { colorClasses } from '../shared/mixins.js';
1112
COLOR_PROPS
1213
*/
1314

14-
const ActionsGroup = forwardRef((props, ref) => {
15-
const { className, id, style, children } = props;
15+
const ActionsGroup = (props) => {
16+
const { className, id, style, children, ref } = props;
1617
const extraAttrs = getExtraAttrs(props);
1718

1819
const elRef = useRef(null);
19-
useImperativeHandle(ref, () => ({
20-
el: elRef.current,
21-
}));
2220

2321
const classes = classNames(className, 'actions-group', colorClasses(props));
2422

2523
return (
26-
<div id={id} style={style} className={classes} ref={elRef} {...extraAttrs}>
24+
<div
25+
id={id}
26+
style={style}
27+
className={classes}
28+
ref={(el) => {
29+
elRef.current = el;
30+
setRef(ref, el);
31+
}}
32+
{...extraAttrs}
33+
>
2734
{children}
2835
</div>
2936
);
30-
});
37+
};
3138

3239
ActionsGroup.displayName = 'f7-actions-group';
3340

‎src/react/components/actions-label.jsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
1+
import React, { useRef } from 'react';
22
import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
33
import { colorClasses } from '../shared/mixins.js';
4+
import { setRef } from '../shared/set-ref.js';
45

56
/* dts-props
67
id: string | number;
@@ -13,21 +14,16 @@ import { colorClasses } from '../shared/mixins.js';
1314
COLOR_PROPS
1415
*/
1516

16-
const ActionsLabel = forwardRef((props, ref) => {
17-
const { className, id, style, children, strong } = props;
17+
const ActionsLabel = (props) => {
18+
const { className, id, style, children, strong, ref } = props;
1819
const extraAttrs = getExtraAttrs(props);
1920

2021
const elRef = useRef(null);
21-
useImperativeHandle(ref, () => ({
22-
el: elRef.current,
23-
}));
2422

2523
const classes = classNames(
2624
className,
2725
'actions-label',
28-
{
29-
'actions-button-strong': strong,
30-
},
26+
{ 'actions-button-strong': strong },
3127
colorClasses(props),
3228
);
3329

@@ -36,11 +32,21 @@ const ActionsLabel = forwardRef((props, ref) => {
3632
};
3733

3834
return (
39-
<div id={id} style={style} className={classes} ref={elRef} {...extraAttrs} onClick={onClick}>
35+
<div
36+
id={id}
37+
style={style}
38+
className={classes}
39+
ref={(el) => {
40+
elRef.current = el;
41+
setRef(ref, el);
42+
}}
43+
{...extraAttrs}
44+
onClick={onClick}
45+
>
4046
{children}
4147
</div>
4248
);
43-
});
49+
};
4450

4551
ActionsLabel.displayName = 'f7-actions-label';
4652

0 commit comments

Comments
 (0)