Skip to content

Commit

Permalink
chore!: refactor filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshuaellis
joshuaellis committed Mar 12, 2024
1 parent 6ded432 commit 2baa179
Show file tree
Hide file tree
Showing 57 changed files with 2,141 additions and 2,205 deletions.
573 changes: 573 additions & 0 deletions packages/core/admin/admin/src/components/Filters.tsx
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions packages/core/admin/admin/src/components/Form.tsx
View file
Expand Up @@ -19,7 +19,7 @@ import isEqual from 'lodash/isEqual';
import { useIntl } from 'react-intl';
import { useBlocker } from 'react-router-dom';

import { getIn, setIn } from '../utils/object';
import { getIn, setIn } from '../utils/objects';

import { createContext } from './Context';

Expand Down Expand Up @@ -120,7 +120,7 @@ interface FormProps<TFormValues extends FormValues = FormValues>
| ((
props: Pick<
FormContextValue<TFormValues>,
'disabled' | 'errors' | 'isSubmitting' | 'modified' | 'values'
'disabled' | 'errors' | 'isSubmitting' | 'modified' | 'values' | 'onChange'
>
) => React.ReactNode);
method: 'POST' | 'PUT';
Expand Down Expand Up @@ -419,6 +419,7 @@ const Form = React.forwardRef<HTMLFormElement, FormProps>(
? props.children({
modified,
disabled,
onChange: handleChange,
...state,
})
: props.children}
Expand Down
77 changes: 31 additions & 46 deletions packages/core/admin/admin/src/components/FormInputs/Boolean.tsx
View file
Expand Up @@ -8,53 +8,38 @@ import { useField } from '../Form';

import { InputProps } from './types';

const BooleanInput = forwardRef<HTMLInputElement, InputProps>(
({ disabled, label, hint, name, required }, ref) => {
const { formatMessage } = useIntl();
const field = useField<boolean | null>(name);
const fieldRef = useFocusInputField(name);
const BooleanInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const { formatMessage } = useIntl();
const field = useField<boolean | null>(props.name);
const fieldRef = useFocusInputField(props.name);

const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);
const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);

return (
<ToggleInput
ref={composedRefs}
checked={field.value === null ? null : field.value || false}
disabled={disabled}
hint={hint}
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
label={label}
error={field.error}
/**
* TODO: reintroduce labelActions
*/
// labelAction={labelAction}
name={name}
offLabel={formatMessage({
id: 'app.components.ToggleCheckbox.off-label',
defaultMessage: 'False',
})}
onLabel={formatMessage({
id: 'app.components.ToggleCheckbox.on-label',
defaultMessage: 'True',
})}
onChange={field.onChange}
required={required}
onClear={() => {
field.onChange(name, null);
}}
// TODO: re-introduce clear label
// clearLabel={
// isNullable
// ? formatMessage({
// id: 'app.components.ToggleCheckbox.clear-label',
// defaultMessage: 'Clear',
// })
// : undefined
// }
/>
);
}
);
return (
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
<ToggleInput
ref={composedRefs}
checked={field.value === null ? null : field.value || false}
error={field.error}
/**
* TODO: reintroduce labelActions
*/
// labelAction={labelAction}
offLabel={formatMessage({
id: 'app.components.ToggleCheckbox.off-label',
defaultMessage: 'False',
})}
onLabel={formatMessage({
id: 'app.components.ToggleCheckbox.on-label',
defaultMessage: 'True',
})}
onChange={field.onChange}
onClear={() => {
field.onChange(props.name, null);
}}
{...props}
/>
);
});

export { BooleanInput };
35 changes: 15 additions & 20 deletions packages/core/admin/admin/src/components/FormInputs/Checkbox.tsx
View file
Expand Up @@ -7,27 +7,22 @@ import { useField } from '../Form';

import { InputProps } from './types';

const CheckboxInput = forwardRef<HTMLInputElement, InputProps>(
({ disabled, label, hint, name, required }, ref) => {
const field = useField<boolean>(name);
const fieldRef = useFocusInputField(name);
const CheckboxInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const field = useField<boolean>(props.name);
const fieldRef = useFocusInputField(props.name);

const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);
const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);

return (
<Checkbox
disabled={disabled}
hint={hint}
name={name}
onValueChange={(checked) => field.onChange(name, checked)}
ref={composedRefs}
required={required}
value={field.value}
>
{label}
</Checkbox>
);
}
);
return (
<Checkbox
onValueChange={(checked) => field.onChange(props.name, checked)}
ref={composedRefs}
value={field.value}
{...props}
>
{props.label || props['aria-label']}
</Checkbox>
);
});

export { CheckboxInput };
51 changes: 22 additions & 29 deletions packages/core/admin/admin/src/components/FormInputs/Date.tsx
View file
Expand Up @@ -8,36 +8,29 @@ import { useField } from '../Form';

import { InputProps } from './types';

const DateInput = forwardRef<HTMLInputElement, InputProps>(
({ disabled, label, hint, name, required, placeholder }, ref) => {
const { formatMessage } = useIntl();
const field = useField<Date>(name);
const fieldRef = useFocusInputField(name);
const DateInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const { formatMessage } = useIntl();
const field = useField<Date>(props.name);
const fieldRef = useFocusInputField(props.name);

const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);
const value = typeof field.value === 'string' ? new Date(field.value) : field.value;
const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);
const value = typeof field.value === 'string' ? new Date(field.value) : field.value;

return (
<DatePicker
ref={composedRefs}
clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
disabled={disabled}
error={field.error}
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
label={label}
id={name}
hint={hint}
name={name}
onChange={(date) => {
field.onChange(name, date);
}}
onClear={() => field.onChange(name, undefined)}
placeholder={placeholder}
required={required}
selectedDate={value}
/>
);
}
);
return (
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
<DatePicker
ref={composedRefs}
clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
error={field.error}
id={props.name}
onChange={(date) => {
field.onChange(props.name, date);
}}
onClear={() => field.onChange(props.name, undefined)}
selectedDate={value}
{...props}
/>
);
});

export { DateInput };
51 changes: 22 additions & 29 deletions packages/core/admin/admin/src/components/FormInputs/DateTime.tsx
View file
Expand Up @@ -8,36 +8,29 @@ import { useField } from '../Form';

import { InputProps } from './types';

const DateTimeInput = forwardRef<HTMLInputElement, InputProps>(
({ disabled, label, hint, name, required, placeholder }, ref) => {
const { formatMessage } = useIntl();
const field = useField<Date>(name);
const fieldRef = useFocusInputField(name);
const DateTimeInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const { formatMessage } = useIntl();
const field = useField<Date>(props.name);
const fieldRef = useFocusInputField(props.name);

const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);
const value = typeof field.value === 'string' ? new Date(field.value) : field.value;
const composedRefs = useComposedRefs<HTMLInputElement | null>(ref, fieldRef);
const value = typeof field.value === 'string' ? new Date(field.value) : field.value;

return (
<DateTimePicker
ref={composedRefs}
clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
disabled={disabled}
error={field.error}
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
label={label}
id={name}
hint={hint}
name={name}
onChange={(date) => {
field.onChange(name, date);
}}
onClear={() => field.onChange(name, undefined)}
placeholder={placeholder}
required={required}
value={value}
/>
);
}
);
return (
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
<DateTimePicker
ref={composedRefs}
clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
error={field.error}
id={props.name}
onChange={(date) => {
field.onChange(props.name, date);
}}
onClear={() => field.onChange(props.name, undefined)}
value={value}
{...props}
/>
);
});

export { DateTimeInput };
45 changes: 19 additions & 26 deletions packages/core/admin/admin/src/components/FormInputs/Email.tsx
View file
Expand Up @@ -7,31 +7,24 @@ import { useField } from '../Form';

import type { StringProps } from './types';

export const EmailInput = forwardRef<any, StringProps>(
({ disabled, label, hint, name, placeholder, required }, ref) => {
const field = useField(name);
const fieldRef = useFocusInputField(name);
export const EmailInput = forwardRef<any, StringProps>((props, ref) => {
const field = useField(props.name);
const fieldRef = useFocusInputField(props.name);

const composedRefs = useComposedRefs(ref, fieldRef);
const composedRefs = useComposedRefs(ref, fieldRef);

return (
<TextInput
ref={composedRefs}
autoComplete="email"
disabled={disabled}
error={field.error}
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
label={label}
id={name}
hint={hint}
name={name}
onChange={field.onChange}
placeholder={placeholder}
required={required}
type="email"
defaultValue={field.initialValue}
value={field.value}
/>
);
}
);
return (
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
<TextInput
ref={composedRefs}
autoComplete="email"
error={field.error}
id={props.name}
onChange={field.onChange}
defaultValue={field.initialValue}
value={field.value}
{...props}
type="email"
/>
);
});
17 changes: 6 additions & 11 deletions packages/core/admin/admin/src/components/FormInputs/Enumeration.tsx
View file
Expand Up @@ -8,27 +8,22 @@ import { useField } from '../Form';
import { EnumerationProps } from './types';

export const EnumerationInput = forwardRef<any, EnumerationProps>(
({ disabled, label, hint, name, options = [], placeholder, required }, ref) => {
const field = useField(name);
const fieldRef = useFocusInputField(name);
({ options = [], ...props }, ref) => {
const field = useField(props.name);
const fieldRef = useFocusInputField(props.name);

const composedRefs = useComposedRefs(ref, fieldRef);

return (
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
<SingleSelect
ref={composedRefs}
disabled={disabled}
error={field.error}
// @ts-expect-error – label _could_ be a ReactNode since it's a child, this should be fixed in the DS.
label={label}
hint={hint}
name={name}
onChange={(value) => {
field.onChange(name, value);
field.onChange(props.name, value);
}}
placeholder={placeholder}
required={required}
value={field.value}
{...props}
>
{options.map(({ value, label, disabled, hidden }) => {
return (
Expand Down

0 comments on commit 2baa179

Please sign in to comment.