kelt-ui-kit-react 0.5.2 → 0.5.3
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 +46 -46
- package/dist/card/cardAction/CardAction.d.ts +6 -1
- package/dist/form/Form.d.ts +3 -0
- package/dist/index.html +43 -43
- package/dist/index.js +1171 -1142
- package/dist/manifest.json +25 -25
- package/dist/overlayPanel/OverlayPanel.d.ts +15 -7
- package/dist/robots.txt +3 -3
- package/dist/search/Search.d.ts +1 -0
- package/package.json +1 -1
- package/public/index.html +43 -43
- package/public/manifest.json +25 -25
- package/public/robots.txt +3 -3
- package/src/App.css +11 -11
- package/src/card/Card.tsx +28 -20
- package/src/card/Card.view.tsx +0 -4
- package/src/card/cardAction/CardAction.tsx +40 -12
- package/src/expands/Expands.tsx +1 -2
- package/src/expands/Expands.view.tsx +22 -4
- package/src/form/Form.tsx +6 -2
- package/src/overlayPanel/OverlayPanel.tsx +162 -105
- package/src/quantity/Quantity.tsx +2 -0
- package/src/search/Search.tsx +4 -2
package/dist/manifest.json
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
{
|
|
2
|
-
"short_name": "React App",
|
|
3
|
-
"name": "Create React App Sample",
|
|
4
|
-
"icons": [
|
|
5
|
-
{
|
|
6
|
-
"src": "favicon.ico",
|
|
7
|
-
"sizes": "64x64 32x32 24x24 16x16",
|
|
8
|
-
"type": "image/x-icon"
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
"src": "logo192.png",
|
|
12
|
-
"type": "image/png",
|
|
13
|
-
"sizes": "192x192"
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
"src": "logo512.png",
|
|
17
|
-
"type": "image/png",
|
|
18
|
-
"sizes": "512x512"
|
|
19
|
-
}
|
|
20
|
-
],
|
|
21
|
-
"start_url": ".",
|
|
22
|
-
"display": "standalone",
|
|
23
|
-
"theme_color": "#000000",
|
|
24
|
-
"background_color": "#ffffff"
|
|
25
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"short_name": "React App",
|
|
3
|
+
"name": "Create React App Sample",
|
|
4
|
+
"icons": [
|
|
5
|
+
{
|
|
6
|
+
"src": "favicon.ico",
|
|
7
|
+
"sizes": "64x64 32x32 24x24 16x16",
|
|
8
|
+
"type": "image/x-icon"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"src": "logo192.png",
|
|
12
|
+
"type": "image/png",
|
|
13
|
+
"sizes": "192x192"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"src": "logo512.png",
|
|
17
|
+
"type": "image/png",
|
|
18
|
+
"sizes": "512x512"
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"start_url": ".",
|
|
22
|
+
"display": "standalone",
|
|
23
|
+
"theme_color": "#000000",
|
|
24
|
+
"background_color": "#ffffff"
|
|
25
|
+
}
|
|
@@ -1,12 +1,20 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
|
|
3
|
-
type
|
|
4
|
-
|
|
5
|
-
referenceElement
|
|
6
|
-
|
|
3
|
+
export type PositionOverlay = "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
|
|
4
|
+
export type OverlayPanelProps = {
|
|
5
|
+
referenceElement?: HTMLElement;
|
|
6
|
+
coordonnees?: {
|
|
7
|
+
top: number;
|
|
8
|
+
left: number;
|
|
9
|
+
};
|
|
10
|
+
position?: PositionOverlay;
|
|
7
11
|
children: React.ReactNode;
|
|
8
12
|
show?: boolean;
|
|
9
13
|
closeOverlay?: (close: boolean) => void;
|
|
10
|
-
}
|
|
11
|
-
export declare const OverlayPanel:
|
|
12
|
-
|
|
14
|
+
};
|
|
15
|
+
export declare const OverlayPanel: React.ForwardRefExoticComponent<OverlayPanelProps & React.RefAttributes<{
|
|
16
|
+
setCoords?: ((coords: {
|
|
17
|
+
top: number;
|
|
18
|
+
left: number;
|
|
19
|
+
}) => void) | undefined;
|
|
20
|
+
}>>;
|
package/dist/robots.txt
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
# https://www.robotstxt.org/robotstxt.html
|
|
2
|
-
User-agent: *
|
|
3
|
-
Disallow:
|
|
1
|
+
# https://www.robotstxt.org/robotstxt.html
|
|
2
|
+
User-agent: *
|
|
3
|
+
Disallow:
|
package/dist/search/Search.d.ts
CHANGED
package/package.json
CHANGED
package/public/index.html
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
-
<meta name="theme-color" content="#000000" />
|
|
8
|
-
<meta
|
|
9
|
-
name="description"
|
|
10
|
-
content="Web site created using create-react-app"
|
|
11
|
-
/>
|
|
12
|
-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
|
13
|
-
<!--
|
|
14
|
-
manifest.json provides metadata used when your web app is installed on a
|
|
15
|
-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
16
|
-
-->
|
|
17
|
-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
18
|
-
<!--
|
|
19
|
-
Notice the use of %PUBLIC_URL% in the tags above.
|
|
20
|
-
It will be replaced with the URL of the `public` folder during the build.
|
|
21
|
-
Only files inside the `public` folder can be referenced from the HTML.
|
|
22
|
-
|
|
23
|
-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
24
|
-
work correctly both with client-side routing and a non-root public URL.
|
|
25
|
-
Learn how to configure a non-root public URL by running `npm run build`.
|
|
26
|
-
-->
|
|
27
|
-
<title>React App</title>
|
|
28
|
-
</head>
|
|
29
|
-
<body>
|
|
30
|
-
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
31
|
-
<div id="root"></div>
|
|
32
|
-
<!--
|
|
33
|
-
This HTML file is a template.
|
|
34
|
-
If you open it directly in the browser, you will see an empty page.
|
|
35
|
-
|
|
36
|
-
You can add webfonts, meta tags, or analytics to this file.
|
|
37
|
-
The build step will place the bundled scripts into the <body> tag.
|
|
38
|
-
|
|
39
|
-
To begin the development, run `npm start` or `yarn start`.
|
|
40
|
-
To create a production bundle, use `npm run build` or `yarn build`.
|
|
41
|
-
-->
|
|
42
|
-
</body>
|
|
43
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<meta name="theme-color" content="#000000" />
|
|
8
|
+
<meta
|
|
9
|
+
name="description"
|
|
10
|
+
content="Web site created using create-react-app"
|
|
11
|
+
/>
|
|
12
|
+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
|
13
|
+
<!--
|
|
14
|
+
manifest.json provides metadata used when your web app is installed on a
|
|
15
|
+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
16
|
+
-->
|
|
17
|
+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
18
|
+
<!--
|
|
19
|
+
Notice the use of %PUBLIC_URL% in the tags above.
|
|
20
|
+
It will be replaced with the URL of the `public` folder during the build.
|
|
21
|
+
Only files inside the `public` folder can be referenced from the HTML.
|
|
22
|
+
|
|
23
|
+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
24
|
+
work correctly both with client-side routing and a non-root public URL.
|
|
25
|
+
Learn how to configure a non-root public URL by running `npm run build`.
|
|
26
|
+
-->
|
|
27
|
+
<title>React App</title>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
31
|
+
<div id="root"></div>
|
|
32
|
+
<!--
|
|
33
|
+
This HTML file is a template.
|
|
34
|
+
If you open it directly in the browser, you will see an empty page.
|
|
35
|
+
|
|
36
|
+
You can add webfonts, meta tags, or analytics to this file.
|
|
37
|
+
The build step will place the bundled scripts into the <body> tag.
|
|
38
|
+
|
|
39
|
+
To begin the development, run `npm start` or `yarn start`.
|
|
40
|
+
To create a production bundle, use `npm run build` or `yarn build`.
|
|
41
|
+
-->
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
package/public/manifest.json
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
{
|
|
2
|
-
"short_name": "React App",
|
|
3
|
-
"name": "Create React App Sample",
|
|
4
|
-
"icons": [
|
|
5
|
-
{
|
|
6
|
-
"src": "favicon.ico",
|
|
7
|
-
"sizes": "64x64 32x32 24x24 16x16",
|
|
8
|
-
"type": "image/x-icon"
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
"src": "logo192.png",
|
|
12
|
-
"type": "image/png",
|
|
13
|
-
"sizes": "192x192"
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
"src": "logo512.png",
|
|
17
|
-
"type": "image/png",
|
|
18
|
-
"sizes": "512x512"
|
|
19
|
-
}
|
|
20
|
-
],
|
|
21
|
-
"start_url": ".",
|
|
22
|
-
"display": "standalone",
|
|
23
|
-
"theme_color": "#000000",
|
|
24
|
-
"background_color": "#ffffff"
|
|
25
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"short_name": "React App",
|
|
3
|
+
"name": "Create React App Sample",
|
|
4
|
+
"icons": [
|
|
5
|
+
{
|
|
6
|
+
"src": "favicon.ico",
|
|
7
|
+
"sizes": "64x64 32x32 24x24 16x16",
|
|
8
|
+
"type": "image/x-icon"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"src": "logo192.png",
|
|
12
|
+
"type": "image/png",
|
|
13
|
+
"sizes": "192x192"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"src": "logo512.png",
|
|
17
|
+
"type": "image/png",
|
|
18
|
+
"sizes": "512x512"
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"start_url": ".",
|
|
22
|
+
"display": "standalone",
|
|
23
|
+
"theme_color": "#000000",
|
|
24
|
+
"background_color": "#ffffff"
|
|
25
|
+
}
|
package/public/robots.txt
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
# https://www.robotstxt.org/robotstxt.html
|
|
2
|
-
User-agent: *
|
|
3
|
-
Disallow:
|
|
1
|
+
# https://www.robotstxt.org/robotstxt.html
|
|
2
|
+
User-agent: *
|
|
3
|
+
Disallow:
|
package/src/App.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
.main-layout {
|
|
2
|
-
display: flex;
|
|
3
|
-
height: 100vh;
|
|
4
|
-
width: 100%;
|
|
5
|
-
flex-direction: column;
|
|
6
|
-
container: app-container/ inline-size;
|
|
7
|
-
& .main-layout-content {
|
|
8
|
-
flex: 1;
|
|
9
|
-
padding: 2rem;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
1
|
+
.main-layout {
|
|
2
|
+
display: flex;
|
|
3
|
+
height: 100vh;
|
|
4
|
+
width: 100%;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
container: app-container/ inline-size;
|
|
7
|
+
& .main-layout-content {
|
|
8
|
+
flex: 1;
|
|
9
|
+
padding: 2rem;
|
|
10
|
+
}
|
|
11
|
+
}
|
package/src/card/Card.tsx
CHANGED
|
@@ -4,7 +4,6 @@ import "./card.css";
|
|
|
4
4
|
import { CardInterface } from "./card.interface";
|
|
5
5
|
import { CardActionInterface } from "./cardAction.interface";
|
|
6
6
|
import { CardAction } from "./cardAction/CardAction";
|
|
7
|
-
|
|
8
7
|
type CardProps = {
|
|
9
8
|
item: CardInterface;
|
|
10
9
|
actions?: CardActionInterface[];
|
|
@@ -27,42 +26,50 @@ export const Card = ({
|
|
|
27
26
|
}: CardProps): JSX.Element => {
|
|
28
27
|
const [cliqueAction, setCliqueAction] = useState(false);
|
|
29
28
|
const [openActions, setOpenActions] = useState(false);
|
|
29
|
+
const [positions, setPositions] = useState<{ top: number; left: number }>();
|
|
30
30
|
const onClickClose = (e: React.MouseEvent, item: CardInterface) => {
|
|
31
31
|
e.stopPropagation();
|
|
32
32
|
if (onClose) {
|
|
33
33
|
onClose(item);
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
|
-
|
|
37
36
|
const onClickCard = useCallback(
|
|
38
37
|
(e: React.MouseEvent, item: CardInterface) => {
|
|
39
|
-
if ((e.target as HTMLElement).closest(".card-action-menu button")) {
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
38
|
e.stopPropagation();
|
|
39
|
+
if (openActions) {
|
|
40
|
+
return setOpenActions(false);
|
|
41
|
+
}
|
|
42
|
+
if (
|
|
43
|
+
(e.target as HTMLElement).closest(".qte") ||
|
|
44
|
+
(e.target as HTMLElement).closest(".card-action-menu button") ||
|
|
45
|
+
(e.target as HTMLElement).closest(".card-actions")
|
|
46
|
+
) {
|
|
47
|
+
return; // Ne propage pas l'événement si le clic est dans Quantity
|
|
48
|
+
}
|
|
49
|
+
|
|
43
50
|
setCliqueAction(!cliqueAction);
|
|
44
|
-
|
|
51
|
+
|
|
52
|
+
if (handleClick && e.button !== 2) {
|
|
45
53
|
handleClick(item);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
[setCliqueAction, cliqueAction]
|
|
49
|
-
);
|
|
50
|
-
const handleClickMouseDown = useCallback(
|
|
51
|
-
(event: any) => {
|
|
52
|
-
if (event.button === 2) {
|
|
54
|
+
} else {
|
|
55
|
+
setPositions({ top: e.clientY, left: e.clientX });
|
|
53
56
|
setOpenActions(true);
|
|
54
57
|
}
|
|
55
58
|
},
|
|
56
|
-
[
|
|
59
|
+
[
|
|
60
|
+
setCliqueAction,
|
|
61
|
+
setPositions,
|
|
62
|
+
handleClick,
|
|
63
|
+
openActions,
|
|
64
|
+
setOpenActions,
|
|
65
|
+
cliqueAction,
|
|
66
|
+
]
|
|
57
67
|
);
|
|
58
|
-
|
|
59
|
-
event.preventDefault(); // Empêche le menu contextuel par défaut
|
|
60
|
-
};
|
|
68
|
+
|
|
61
69
|
return (
|
|
62
70
|
<div
|
|
63
|
-
onContextMenu={
|
|
64
|
-
onMouseDown={
|
|
65
|
-
{...(handleClick && { onClick: (e) => onClickCard(e, item) })}
|
|
71
|
+
onContextMenu={(e) => e.preventDefault()}
|
|
72
|
+
onMouseDown={(e) => onClickCard(e, item)}
|
|
66
73
|
className={`card ${className ?? ""} ${
|
|
67
74
|
cliqueAction ? "card--active" : ""
|
|
68
75
|
} `}
|
|
@@ -103,6 +110,7 @@ export const Card = ({
|
|
|
103
110
|
setOpenActions={setOpenActions}
|
|
104
111
|
actions={actions}
|
|
105
112
|
item={item}
|
|
113
|
+
positions={positions}
|
|
106
114
|
/>
|
|
107
115
|
)}
|
|
108
116
|
</>
|
package/src/card/Card.view.tsx
CHANGED
|
@@ -49,9 +49,6 @@ export const CardView = (): JSX.Element => {
|
|
|
49
49
|
];
|
|
50
50
|
}, []);
|
|
51
51
|
|
|
52
|
-
const handleClick = useCallback((item: CardInterface) => {
|
|
53
|
-
console.log(item);
|
|
54
|
-
}, []);
|
|
55
52
|
const setQuantity = useCallback((item: CardInterface, qte: number) => {
|
|
56
53
|
console.log(qte, item);
|
|
57
54
|
}, []);
|
|
@@ -62,7 +59,6 @@ export const CardView = (): JSX.Element => {
|
|
|
62
59
|
<Card
|
|
63
60
|
className="card--horizontal"
|
|
64
61
|
item={item}
|
|
65
|
-
handleClick={handleClick}
|
|
66
62
|
actions={actionsCard}
|
|
67
63
|
customAction={<Quantity item={item} setQuantity={setQuantity} />}
|
|
68
64
|
/>
|
|
@@ -12,14 +12,27 @@ export type CardActionProps = {
|
|
|
12
12
|
actions: CardActionInterface[];
|
|
13
13
|
item?: CardInterface;
|
|
14
14
|
openActions?: boolean;
|
|
15
|
+
positions?: { top: number; left: number };
|
|
15
16
|
setOpenActions?: (open: boolean) => void;
|
|
16
17
|
};
|
|
18
|
+
export type PositionOverlay =
|
|
19
|
+
| "left"
|
|
20
|
+
| "right"
|
|
21
|
+
| "topLeft"
|
|
22
|
+
| "topRight"
|
|
23
|
+
| "bottomLeft"
|
|
24
|
+
| "bottomRight";
|
|
17
25
|
export const CardAction = ({
|
|
18
26
|
actions,
|
|
19
27
|
openActions,
|
|
20
28
|
item,
|
|
29
|
+
positions,
|
|
21
30
|
setOpenActions,
|
|
22
31
|
}: CardActionProps) => {
|
|
32
|
+
const overlaypanelRef = useRef<{
|
|
33
|
+
setCoords?: (coords: { top: number; left: number }) => void;
|
|
34
|
+
}>(null);
|
|
35
|
+
const [position, setPosition] = useState<PositionOverlay | undefined>();
|
|
23
36
|
const refButton = useRef<HTMLDivElement>(null);
|
|
24
37
|
const [openOverlay, setOpenOverlay] = useState(openActions ?? false);
|
|
25
38
|
useEffect(() => {
|
|
@@ -27,6 +40,28 @@ export const CardAction = ({
|
|
|
27
40
|
setOpenOverlay(openActions);
|
|
28
41
|
}
|
|
29
42
|
}, [openActions]);
|
|
43
|
+
|
|
44
|
+
const handleChangeOverlay = useCallback(
|
|
45
|
+
(e: any, openOverlay: boolean) => {
|
|
46
|
+
e.preventDefault();
|
|
47
|
+
console.log("je set la position");
|
|
48
|
+
setPosition("bottomRight");
|
|
49
|
+
|
|
50
|
+
if (setOpenActions) {
|
|
51
|
+
setOpenActions(openOverlay);
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
[setPosition, setOpenActions]
|
|
55
|
+
);
|
|
56
|
+
|
|
57
|
+
const closeOverlay = useCallback(() => {
|
|
58
|
+
setPosition(undefined);
|
|
59
|
+
setOpenOverlay(false);
|
|
60
|
+
if (setOpenActions) {
|
|
61
|
+
setOpenActions(false);
|
|
62
|
+
}
|
|
63
|
+
}, [setOpenOverlay, setPosition, setOpenActions]);
|
|
64
|
+
|
|
30
65
|
const overlayMenu: MenuInterface[] = useMemo(() => {
|
|
31
66
|
return actions
|
|
32
67
|
?.filter((a) => a.type === "menu")
|
|
@@ -41,6 +76,7 @@ export const CardAction = ({
|
|
|
41
76
|
sizeIcon={IconSizeEnum.LARGE}
|
|
42
77
|
onClick={(e) => {
|
|
43
78
|
e.stopPropagation();
|
|
79
|
+
closeOverlay();
|
|
44
80
|
a.onClick && item && a.onClick(item);
|
|
45
81
|
}}
|
|
46
82
|
title={a.label || ""}
|
|
@@ -49,16 +85,6 @@ export const CardAction = ({
|
|
|
49
85
|
};
|
|
50
86
|
}) as MenuInterface[];
|
|
51
87
|
}, [actions]);
|
|
52
|
-
const handleChangeOverlay = useCallback(
|
|
53
|
-
(e: any, openOverlay: boolean) => {
|
|
54
|
-
e.stopPropagation();
|
|
55
|
-
setOpenOverlay(openOverlay);
|
|
56
|
-
if (setOpenActions) {
|
|
57
|
-
setOpenActions(openOverlay);
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
[setOpenOverlay, setOpenActions]
|
|
61
|
-
);
|
|
62
88
|
return (
|
|
63
89
|
<div className="card-actions">
|
|
64
90
|
{actions.filter((a) => a.type === "menu").length ? (
|
|
@@ -81,9 +107,11 @@ export const CardAction = ({
|
|
|
81
107
|
)}
|
|
82
108
|
{openOverlay && refButton.current && (
|
|
83
109
|
<OverlayPanel
|
|
84
|
-
position=
|
|
110
|
+
position={position}
|
|
85
111
|
show={openOverlay}
|
|
86
|
-
|
|
112
|
+
ref={overlaypanelRef}
|
|
113
|
+
closeOverlay={closeOverlay}
|
|
114
|
+
coordonnees={positions}
|
|
87
115
|
referenceElement={refButton.current}
|
|
88
116
|
children={
|
|
89
117
|
<div>
|
package/src/expands/Expands.tsx
CHANGED
|
@@ -15,7 +15,6 @@ export const Expands = (props: ExpandProps) => {
|
|
|
15
15
|
const [currentExpand, setCurrentExpand] = useState<ExpandInterface>();
|
|
16
16
|
const onChangeExpand = useCallback(
|
|
17
17
|
(item: ExpandInterface) => {
|
|
18
|
-
console.log("je change");
|
|
19
18
|
if (props.onChange) {
|
|
20
19
|
props.onChange(item);
|
|
21
20
|
}
|
|
@@ -25,7 +24,7 @@ export const Expands = (props: ExpandProps) => {
|
|
|
25
24
|
);
|
|
26
25
|
useEffect(() => {
|
|
27
26
|
setCurrentExpand(props.currentItem);
|
|
28
|
-
}, [props.currentItem, setCurrentExpand]);
|
|
27
|
+
}, [props.currentItem, setCurrentExpand, document.activeElement]);
|
|
29
28
|
return (
|
|
30
29
|
<div className={`expands ${props.className || ""}`}>
|
|
31
30
|
{props.items.map((item: ExpandInterface) => (
|
|
@@ -10,7 +10,7 @@ export const ExpandsView = (): JSX.Element => {
|
|
|
10
10
|
resetForm: () => void;
|
|
11
11
|
focusInitialElement: () => void;
|
|
12
12
|
}>(null);
|
|
13
|
-
const [currentId, setCurrentId] = useState<number>(
|
|
13
|
+
const [currentId, setCurrentId] = useState<number>(2);
|
|
14
14
|
|
|
15
15
|
const handleRefocus = () => {
|
|
16
16
|
searchRef.current?.focusInitialElement();
|
|
@@ -21,13 +21,18 @@ export const ExpandsView = (): JSX.Element => {
|
|
|
21
21
|
id: 1,
|
|
22
22
|
title: "Client",
|
|
23
23
|
description: "Description 1",
|
|
24
|
-
headerContent:
|
|
24
|
+
headerContent: currentId === 1 && (
|
|
25
|
+
<Search ref={searchRef} focus={true} />
|
|
26
|
+
),
|
|
25
27
|
footer: <button>Valider</button>,
|
|
26
28
|
},
|
|
27
29
|
{
|
|
28
30
|
id: 2,
|
|
29
31
|
title: "Produits",
|
|
30
32
|
description: "Description 2",
|
|
33
|
+
headerContent: currentId === 2 && (
|
|
34
|
+
<Search ref={searchRef} focus={true} />
|
|
35
|
+
),
|
|
31
36
|
content: (
|
|
32
37
|
<Button title={"Go to produits"} onClick={() => setCurrentId(3)} />
|
|
33
38
|
),
|
|
@@ -38,7 +43,7 @@ export const ExpandsView = (): JSX.Element => {
|
|
|
38
43
|
description: "Description 3",
|
|
39
44
|
},
|
|
40
45
|
],
|
|
41
|
-
[]
|
|
46
|
+
[currentId]
|
|
42
47
|
);
|
|
43
48
|
const [currentItem, setCurrentItem] = useState<ExpandInterface>(mockItems[0]);
|
|
44
49
|
useEffect(() => {
|
|
@@ -57,6 +62,14 @@ export const ExpandsView = (): JSX.Element => {
|
|
|
57
62
|
setCurrentItem(mockItems[2]);
|
|
58
63
|
}, [setCurrentItem]);
|
|
59
64
|
|
|
65
|
+
const onChange = useCallback(
|
|
66
|
+
(item: ExpandInterface) => {
|
|
67
|
+
if (item.id) {
|
|
68
|
+
setCurrentId(item.id);
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
[setCurrentId]
|
|
72
|
+
);
|
|
60
73
|
return (
|
|
61
74
|
<div className="d-flex flex-column" style={{ height: "100%" }}>
|
|
62
75
|
<div className="mb-2">
|
|
@@ -65,7 +78,12 @@ export const ExpandsView = (): JSX.Element => {
|
|
|
65
78
|
<Button onClick={handleRefocus} title="Re-focus" />
|
|
66
79
|
</div>
|
|
67
80
|
<div className="flex-1">
|
|
68
|
-
<Expands
|
|
81
|
+
<Expands
|
|
82
|
+
onChange={onChange}
|
|
83
|
+
currentItem={currentItem}
|
|
84
|
+
items={mockItems}
|
|
85
|
+
/>
|
|
86
|
+
;
|
|
69
87
|
</div>
|
|
70
88
|
</div>
|
|
71
89
|
);
|
package/src/form/Form.tsx
CHANGED
|
@@ -27,6 +27,7 @@ export const DynamicForm = forwardRef(
|
|
|
27
27
|
clearInput?: (name: string) => void;
|
|
28
28
|
resetForm?: () => void;
|
|
29
29
|
focusInitialElement?: () => void;
|
|
30
|
+
getValues?: () => FormValuesInterface<T>;
|
|
30
31
|
updateFormValue?: (values: FormValuesInterface<T>) => void;
|
|
31
32
|
}>
|
|
32
33
|
) => {
|
|
@@ -98,11 +99,12 @@ export const DynamicForm = forwardRef(
|
|
|
98
99
|
const focusInitialElement = () => {
|
|
99
100
|
const focusedField = initialForm.find((field) => field.focus);
|
|
100
101
|
if (focusedField && inputRefs.current[focusedField.name]) {
|
|
101
|
-
|
|
102
|
+
setTimeout(() => {
|
|
102
103
|
inputRefs.current[focusedField.name]?.focus();
|
|
103
|
-
});
|
|
104
|
+
}, 500);
|
|
104
105
|
}
|
|
105
106
|
};
|
|
107
|
+
const getValues = () => values;
|
|
106
108
|
const updateFormValue: (values: FormValuesInterface<T>) => void = (
|
|
107
109
|
values
|
|
108
110
|
) => {
|
|
@@ -115,6 +117,7 @@ export const DynamicForm = forwardRef(
|
|
|
115
117
|
resetForm,
|
|
116
118
|
clearInput,
|
|
117
119
|
focusInitialElement,
|
|
120
|
+
getValues,
|
|
118
121
|
updateFormValue,
|
|
119
122
|
}));
|
|
120
123
|
|
|
@@ -130,6 +133,7 @@ export const DynamicForm = forwardRef(
|
|
|
130
133
|
type={v.type}
|
|
131
134
|
placeholder={v.placeholder ?? ""}
|
|
132
135
|
autoComplete={v.autoComplete ?? "on"}
|
|
136
|
+
tabIndex={0}
|
|
133
137
|
autoFocus={v.focus ?? false}
|
|
134
138
|
required={v.required ?? false}
|
|
135
139
|
value={values && (values[v.name] as string | number)}
|