Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1.x] Improve React components #257

Merged
merged 3 commits into from
Feb 15, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Prevent adding an undefined class when no className is provided
jessarcher committed Feb 15, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 193bc0fc89cc3bcb5d094599cf3e37260f19955e
7 changes: 5 additions & 2 deletions stubs/inertia-react/resources/js/Components/Checkbox.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
export default function Checkbox(props) {
export default function Checkbox({ className = '', ...props }) {
return (
<input
{...props}
type="checkbox"
className="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800"
className={
'rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800 ' +
className
}
/>
);
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default function DangerButton({ className, disabled, children, ...props }) {
export default function DangerButton({ className = '', disabled, children, ...props }) {
return (
<button
{...props}
7 changes: 5 additions & 2 deletions stubs/inertia-react/resources/js/Components/Dropdown.jsx
Original file line number Diff line number Diff line change
@@ -70,11 +70,14 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
);
};

const DropdownLink = ({ className, children, ...props }) => {
const DropdownLink = ({ className = '', children, ...props }) => {
return (
<Link
{...props}
className={`block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ${className}`}
className={
'block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out ' +
className
}
>
{children}
</Link>
2 changes: 1 addition & 1 deletion stubs/inertia-react/resources/js/Components/InputError.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default function InputError({ message, className, ...props }) {
export default function InputError({ message, className = '', ...props }) {
return message ? (
<p {...props} className={'text-sm text-red-600 dark:text-red-400 ' + className}>
{message}
2 changes: 1 addition & 1 deletion stubs/inertia-react/resources/js/Components/InputLabel.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default function InputLabel({ value, className, children, ...props }) {
export default function InputLabel({ value, className = '', children, ...props }) {
return (
<label {...props} className={`block font-medium text-sm text-gray-700 dark:text-gray-300 ` + className}>
{value ? value : children}
10 changes: 6 additions & 4 deletions stubs/inertia-react/resources/js/Components/NavLink.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { Link } from '@inertiajs/react';

export default function NavLink({ active = false, className, children, ...props }) {
export default function NavLink({ active = false, className = '', children, ...props }) {
return (
<Link
{...props}
className={
active
? `inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-600 text-sm font-medium leading-5 text-gray-900 dark:text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out ${className}`
: `inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out ${className}`
'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none ' +
(active
? 'border-indigo-400 dark:border-indigo-600 text-gray-900 dark:text-gray-100 focus:border-indigo-700 '
: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-700 focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-700 ') +
className
}
>
{children}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default function PrimaryButton({ className, disabled, children, ...props }) {
export default function PrimaryButton({ className = '', disabled, children, ...props }) {
return (
<button
{...props}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Link } from '@inertiajs/react';

export default function ResponsiveNavLink({ active = false, className, children, ...props }) {
export default function ResponsiveNavLink({ active = false, className = '', children, ...props }) {
return (
<Link
{...props}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default function SecondaryButton({ type = 'button', className, disabled, children, ...props }) {
export default function SecondaryButton({ type = 'button', className = '', disabled, children, ...props }) {
return (
<button
{...props}
4 changes: 2 additions & 2 deletions stubs/inertia-react/resources/js/Components/TextInput.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { forwardRef, useEffect, useRef } from 'react';

export default forwardRef(function TextInput({ type = 'text', className, isFocused = false, ...props }, ref) {
export default forwardRef(function TextInput({ type = 'text', className = '', isFocused = false, ...props }, ref) {
const input = ref ? ref : useRef();

useEffect(() => {
@@ -15,7 +15,7 @@ export default forwardRef(function TextInput({ type = 'text', className, isFocus
{...props}
type={type}
className={
`border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm ` +
'border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm ' +
className
}
ref={input}