Skip to content

Commit aec8933

Browse files
pascalbaljetpascalbaljet
committed
WIP React version
1 parent 737696c commit aec8933

Some content is hidden

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

49 files changed

+2052
-118
lines changed

‎demo-app/resources/js/Pages/Container.jsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { usePage } from '@inertiajs/react';
3+
4+
export default function Container({ children }) {
5+
const { props } = usePage();
6+
7+
return (
8+
<div className="mx-auto max-w-3xl px-4 py-6 sm:px-6 lg:px-8">
9+
{props.flash.message && (
10+
<div className="mb-4 border-l-4 border-green-400 bg-green-50 p-4">
11+
<p className="text-sm text-green-600">
12+
{props.flash.message}
13+
</p>
14+
</div>
15+
)}
16+
{children}
17+
</div>
18+
);
19+
};

‎demo-app/resources/js/Pages/CreateRole.jsx

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React, { useState, useRef } from 'react';
2+
import { useForm } from '@inertiajs/react';
3+
import axios from 'axios';
4+
import { Modal, ModalLink } from 'inertiaui/modal';
5+
6+
export default function CreateRole({ headerValue }) {
7+
const { data, setData, errors, post } = useForm({
8+
name: '',
9+
});
10+
11+
const modalRef = useRef(null);
12+
const [greeting, setGreeting] = useState('');
13+
14+
const submit = (e) => {
15+
e.preventDefault();
16+
axios.post('/roles', data).then(() => {
17+
modalRef.current?.close();
18+
});
19+
};
20+
21+
return (
22+
<Modal
23+
ref={modalRef}
24+
onGreeting={(event) => setGreeting(event)}
25+
>
26+
{({ close, getParentModal, emit }) => (
27+
<>
28+
<div>
29+
<h2 className="text-lg font-medium text-gray-900">Create Role</h2>
30+
{greeting && (
31+
<p dusk="greeting" className="text-sm text-gray-500">
32+
{greeting}
33+
</p>
34+
)}
35+
{headerValue && (
36+
<p dusk="headerValue" className="text-sm text-gray-500">
37+
{headerValue}
38+
</p>
39+
)}
40+
</div>
41+
<button
42+
type="button"
43+
onClick={() => getParentModal().emit('message', 'Hello from child')}
44+
>
45+
Push message to parent
46+
</button>
47+
<form className="mt-8 space-y-6" onSubmit={submit}>
48+
<div className="grid grid-cols-3 gap-6">
49+
<div className="col-span-6 sm:col-span-3">
50+
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
51+
Name
52+
</label>
53+
<input
54+
id="name"
55+
value={data.name}
56+
onChange={(e) => setData('name', e.target.value)}
57+
type="text"
58+
name="name"
59+
autoComplete="off"
60+
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
61+
/>
62+
{errors.name && (
63+
<p className="mt-2 text-sm text-red-600">{errors.name}</p>
64+
)}
65+
</div>
66+
</div>
67+
<div className="flex items-center justify-end">
68+
<ModalLink maxWidth="sm" href="#another-local-modal" className="mr-auto text-sm text-pink-500">
69+
What's that?
70+
</ModalLink>
71+
<button
72+
type="button"
73+
className="inline-flex items-center rounded-md border border-transparent bg-gray-600 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
74+
onClick={close}
75+
>
76+
Cancel
77+
</button>
78+
<button
79+
type="submit"
80+
className="ml-3 inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
81+
>
82+
Save
83+
</button>
84+
</div>
85+
</form>
86+
<Modal name="another-local-modal">
87+
Hawaiian noises?
88+
</Modal>
89+
</>
90+
)}
91+
</Modal>
92+
);
93+
};

‎demo-app/resources/js/Pages/Data.jsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Modal } from 'inertiaui/modal'
2+
3+
export default function Data({ message }) {
4+
return (
5+
<Modal>
6+
<p dusk="message">{message}</p>
7+
</Modal>
8+
);
9+
}

‎demo-app/resources/js/Pages/EditUser.jsx

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
// EditUser.jsx
2+
import React, { useState, useRef } from 'react';
3+
import { useForm } from '@inertiajs/react';
4+
import { Modal, ModalLink } from 'inertiaui/modal';
5+
6+
export default function EditUser({ user, roles }) {
7+
const [message, setMessage] = useState('');
8+
const modalRef = useRef(null);
9+
10+
const { data, setData, put, errors } = useForm({
11+
name: user.name,
12+
email: user.email,
13+
role_id: user.role_id,
14+
});
15+
16+
const submit = (e) => {
17+
e.preventDefault();
18+
put(`/users/${user.id}`, {
19+
onSuccess: () => {
20+
modalRef.current.close();
21+
},
22+
});
23+
};
24+
25+
const onMessage = (newMessage) => {
26+
setMessage(newMessage);
27+
modalRef.current.getChildModal().emit('greeting', `Thanks from ${user.name}`);
28+
};
29+
30+
return (
31+
<Modal
32+
ref={modalRef}
33+
onMessage={onMessage}
34+
>
35+
{({ close, reload, emit }) => (
36+
<>
37+
<div>
38+
<h2 className="text-lg font-medium text-gray-900">Edit User</h2>
39+
{message && <p dusk="message" className="text-sm text-gray-500">{message}</p>}
40+
</div>
41+
42+
<button
43+
type="button"
44+
onClick={() => emit('user-greets', 'Hello from EditUser')}
45+
className="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
46+
>
47+
Send Message
48+
</button>
49+
50+
<form onSubmit={submit} className="mt-8 space-y-6">
51+
<div className="grid grid-cols-3 gap-6">
52+
<div className="col-span-6 sm:col-span-3">
53+
<label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
54+
<input
55+
value={data.name}
56+
onChange={e => setData('name', e.target.value)}
57+
type="text"
58+
id="name"
59+
name="name"
60+
autoComplete="off"
61+
className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
62+
/>
63+
{errors.name && <p className="mt-2 text-sm text-red-600">{errors.name}</p>}
64+
</div>
65+
66+
<div className="col-span-6 sm:col-span-3">
67+
<label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
68+
<input
69+
value={data.email}
70+
onChange={e => setData('email', e.target.value)}
71+
type="email"
72+
id="email"
73+
name="email"
74+
autoComplete="off"
75+
className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
76+
/>
77+
{errors.email && <p className="mt-2 text-sm text-red-600">{errors.email}</p>}
78+
</div>
79+
80+
<div className="col-span-6 sm:col-span-3">
81+
<label htmlFor="role" className="block text-sm font-medium text-gray-700">Role</label>
82+
<select
83+
value={data.role_id}
84+
onChange={e => setData('role_id', e.target.value)}
85+
id="role"
86+
name="role"
87+
autoComplete="off"
88+
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
89+
>
90+
{Object.entries(roles).map(([id, role]) => (
91+
<option key={id} value={id}>{role}</option>
92+
))}
93+
</select>
94+
95+
<ModalLink
96+
fragment="add-role"
97+
onClose={() => reload({ only: ['roles'] })}
98+
href="/roles/create"
99+
className="mt-2 text-sm text-indigo-600 hover:text-indigo-500 bg-transparent border border-indigo-500 rounded-md py-1 px-2 inline-flex items-center"
100+
>
101+
<svg className="h-4 w-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
102+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
103+
</svg>
104+
Add Role
105+
</ModalLink>
106+
</div>
107+
</div>
108+
109+
<div className="flex justify-end">
110+
<button
111+
type="button"
112+
onClick={close}
113+
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
114+
>
115+
Cancel
116+
</button>
117+
<button
118+
type="submit"
119+
className="ml-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
120+
>
121+
Save
122+
</button>
123+
</div>
124+
</form>
125+
</>
126+
)}
127+
</Modal>
128+
);
129+
};

‎demo-app/resources/js/Pages/EditUser.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function onMessage(message) {
4242
<p dusk="message" v-text="messageRef" v-if="messageRef" class="text-sm text-gray-500" />
4343
</div>
4444

45-
<button type="button" @click="emit('user-greets', 'Hello from EditUser.vue')" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
45+
<button type="button" @click="emit('user-greets', 'Hello from EditUser')" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
4646
Send Message
4747
</button>
4848

‎demo-app/resources/js/Pages/Emit.jsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { ModalLink } from 'inertiaui/modal';
2+
import Container from './Container';
3+
4+
export default function Emit() {
5+
return (
6+
<Container>
7+
<div className="flex justify-between">
8+
<h2 className="text-lg font-medium text-gray-900">Emit</h2>
9+
</div>
10+
<ModalLink
11+
dusk="modal-link"
12+
href="/users/1/edit"
13+
className="px-2 py-1 text-xs font-medium text-indigo-600 bg-indigo-100 rounded-md"
14+
>
15+
Open Modal
16+
</ModalLink>
17+
</Container>
18+
);
19+
}

‎demo-app/resources/js/Pages/Events.jsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { useState } from 'react';
2+
import { ModalLink } from 'inertiaui/modal';
3+
import Container from './Container';
4+
5+
export default function Events() {
6+
const [log, setLog] = useState([]);
7+
8+
const addToLog = (event) => {
9+
setLog(prevLog => [...prevLog, event]);
10+
};
11+
12+
return (
13+
<Container>
14+
<div className="flex justify-between">
15+
<h2 className="text-lg font-medium text-gray-900">Events</h2>
16+
<p dusk="log">{log.join(',')}</p>
17+
</div>
18+
<ModalLink
19+
dusk="modal-link"
20+
href="/users/1/edit"
21+
className="px-2 py-1 text-xs font-medium text-indigo-600 bg-indigo-100 rounded-md"
22+
onClose={() => addToLog('close')}
23+
onFocus={() => addToLog('focus')}
24+
onAfterLeave={() => addToLog('after-leave')}
25+
onBlur={() => addToLog('blur')}
26+
onStart={() => addToLog('start')}
27+
onSuccess={() => addToLog('success')}
28+
>
29+
Open Modal
30+
</ModalLink>
31+
</Container>
32+
);
33+
}

‎demo-app/resources/js/Pages/Header.jsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { ModalLink } from 'inertiaui/modal';
2+
import Container from './Container';
3+
4+
export default function Header() {
5+
return (
6+
<Container>
7+
<div className="flex justify-between">
8+
<h2 className="text-lg font-medium text-gray-900">Header</h2>
9+
</div>
10+
<ModalLink
11+
dusk="modal-link"
12+
href="/roles/create"
13+
headers={{ 'X-Test-Header': 'Test Header Value' }}
14+
>
15+
Open Modal
16+
</ModalLink>
17+
</Container>
18+
);
19+
}

‎demo-app/resources/js/Pages/LoadingProp.jsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { ModalLink } from 'inertiaui/modal';
2+
import Container from './Container';
3+
4+
export default function LoadingProp() {
5+
return (
6+
<Container>
7+
<div className="flex justify-between">
8+
<h2 className="text-lg font-medium text-gray-900">Loading Prop</h2>
9+
</div>
10+
<ModalLink
11+
dusk="modal-link"
12+
href="/slideover?slow=1"
13+
className="px-2 py-1 text-xs font-medium text-indigo-600 bg-indigo-100 rounded-md"
14+
>
15+
{({ loading }) => (
16+
loading ? 'Loading...' : 'Open Slideover'
17+
)}
18+
</ModalLink>
19+
</Container>
20+
);
21+
}

‎demo-app/resources/js/Pages/Local.jsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Modal, ModalLink } from 'inertiaui/modal';
2+
import Container from './Container';
3+
4+
export default function Local() {
5+
return (
6+
<>
7+
<Container>
8+
<div className="flex justify-between">
9+
<h2 className="text-lg font-medium text-gray-900">Local</h2>
10+
<ModalLink
11+
href="#local"
12+
fragment="pre"
13+
className="px-2 py-1 text-xs font-medium text-indigo-600 bg-indigo-100 rounded-md"
14+
>
15+
Open Local Modal
16+
</ModalLink>
17+
</div>
18+
</Container>
19+
<Modal name="local">
20+
This is a local modal
21+
<ModalLink href="/roles/create">
22+
Create Role
23+
</ModalLink>
24+
</Modal>
25+
</>
26+
);
27+
}

0 commit comments

Comments
 (0)