{url.search(/\.pdf\?/i) > -1 ? (
-
{title ? title : children}
- {title && {children}
}
+ {title && {children}
}
);
}
diff --git a/src/components/formElements/Inputs.jsx b/src/components/formElements/Inputs.jsx
index cb851fd3..220a2967 100644
--- a/src/components/formElements/Inputs.jsx
+++ b/src/components/formElements/Inputs.jsx
@@ -22,7 +22,7 @@ export const Input = forwardRef(
ref,
) => {
const classes = clsx(
- 'border border-slate-400 bg-white py-2 px-3 text-slate-800 placeholder:text-slate-400 shadow-sm transition-all duration-200 ease-in-out focus:border-sky-500 focus:outline-none focus:ring focus:ring-sky-600 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm',
+ 'border border-slate-400 bg-white px-3 py-2 text-slate-800 shadow-sm transition-all duration-200 ease-in-out placeholder:text-slate-400 focus:border-sky-500 focus:outline-none focus:ring focus:ring-sky-600 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm',
{
'rounded-md': !left,
'rounded-l-md': left,
@@ -90,10 +90,7 @@ Input.propTypes = {
/**
* Custom css class names to append to the defaults
*/
- className: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.arrayOf(PropTypes.string),
- ]),
+ className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
touched: PropTypes.bool,
step: PropTypes.string,
min: PropTypes.string,
diff --git a/src/components/formElements/LimitedTextarea.jsx b/src/components/formElements/LimitedTextarea.jsx
index 20bdd2d5..902631c3 100644
--- a/src/components/formElements/LimitedTextarea.jsx
+++ b/src/components/formElements/LimitedTextarea.jsx
@@ -1,6 +1,6 @@
+import { ErrorMessage } from '@hookform/error-message';
import clsx from 'clsx';
import PropTypes from 'prop-types';
-import { ErrorMessage } from '@hookform/error-message';
import ErrorMessageTag from '../pageElements/ErrorMessage.jsx';
export const LimitedTextarea = ({
@@ -95,8 +95,7 @@ export const CharactersRemaining = ({ remaining, limit }) => {
className={clsx('absolute bottom-0 right-3', {
'text-xs text-slate-500': percentage >= 0 && percentage < 0.8,
'text-xs text-amber-600': percentage >= 0.8 && percentage < 0.9,
- 'border border-red-600 bg-white p-2 text-lg font-black text-red-600':
- percentage >= 0.9,
+ 'border border-red-600 bg-white p-2 text-lg font-black text-red-600': percentage >= 0.9,
})}
>
{remaining} characters left
diff --git a/src/components/formElements/Note.jsx b/src/components/formElements/Note.jsx
index ba4560bd..6eb9e5c2 100644
--- a/src/components/formElements/Note.jsx
+++ b/src/components/formElements/Note.jsx
@@ -1,11 +1,7 @@
import PropTypes from 'prop-types';
export default function Note({ children }) {
- return (
- - {children} -
- ); + return{children}
; } Note.propTypes = { children: PropTypes.node.isRequired, diff --git a/src/components/formElements/Select.jsx b/src/components/formElements/Select.jsx index af399ebf..87372c82 100644 --- a/src/components/formElements/Select.jsx +++ b/src/components/formElements/Select.jsx @@ -1,15 +1,8 @@ -import { forwardRef, Fragment } from 'react'; -import PropTypes from 'prop-types'; -import { - Listbox, - ListboxButton, - Label, - ListboxOption, - ListboxOptions, - Transition, -} from '@headlessui/react'; +import { Label, Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'; import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'; import clsx from 'clsx'; +import PropTypes from 'prop-types'; +import { forwardRef, Fragment } from 'react'; const getDefaultValue = (value, placeholder, options) => { if ((value?.length ?? 0) < 1) { @@ -21,9 +14,7 @@ const getDefaultValue = (value, placeholder, options) => { } if (Object.keys(options[0]).includes('value')) { - const label = options.find( - (option) => option.value === (value?.value ?? value), - )?.label; + const label = options.find((option) => option.value === (value?.value ?? value))?.label; if (!label) { return placeholder; @@ -41,106 +32,85 @@ const getDefaultValue = (value, placeholder, options) => { return option; }; -export const Select = forwardRef( - ( - { disabled, label, name, required, options, value, onChange, placeholder }, - ref, - ) => { - return ( -
-
-
- {getDefaultValue(value, placeholder, options)}
-
-
-
-
-
-
-
- {(options?.length ?? 0) > 0 ? (
- options?.map((option, id) => (
-
- clsx(
- 'relative cursor-default select-none py-2 pl-10 pr-4',
- {
- 'bg-sky-100 text-sky-900': focus,
- 'text-sky-900': !focus && !option?.disabled,
- 'cursor-not-allowed text-slate-400':
- option?.disabled ?? false,
- },
- )
- }
- value={option}
- disabled={option?.disabled ?? false}
- >
- {({ selected }) => (
- <>
-
- {option?.label ?? option}
+export const Select = forwardRef(({ disabled, label, name, required, options, value, onChange, placeholder }, ref) => {
+ return (
+ {
+ if (onChange) {
+ onChange(newValue?.value ?? newValue);
+ }
+ }}
+ >
+ {label !== false && (
+
+ )}
+
- );
- },
-);
+ ) : null}
+
+ )}
+
+ ))
+ ) : (
+
+
+
+
+
+ {getDefaultValue(value, placeholder, options)}
+
+
+
+
+
+
+ {(options?.length ?? 0) > 0 ? (
+ options?.map((option, id) => (
+
+ clsx('relative cursor-default select-none py-2 pl-10 pr-4', {
+ 'bg-sky-100 text-sky-900': focus,
+ 'text-sky-900': !focus && !option?.disabled,
+ 'cursor-not-allowed text-slate-400': option?.disabled ?? false,
+ })
+ }
+ value={option}
+ disabled={option?.disabled ?? false}
+ >
+ {({ selected }) => (
+ <>
+
+ {option?.label ?? option}
+
+ {selected ? (
+
+
- {selected ? (
-
-
-
- ) : null}
-
- )}
-
- ))
- ) : (
-
-
-
-
- This list is empty 😶
-
- )}
-
+ This list is empty 😶
+
+ )}
+