Skip to content

Commit 9d8b33c

Browse files
jaruesinkjaruesink
authored
Merge pull request #80 from lambda-curry/cursor/update-components-to-use-new-react-patterns-41c7
2 parents b837ce5 + 2f4a280 commit 9d8b33c

6 files changed

Lines changed: 78 additions & 57 deletions

File tree

‎packages/medusa-forms/src/ui/CurrencyInput.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { CurrencyInput as MedusaCurrencyInput } from '@medusajs/ui';
2-
import { forwardRef } from 'react';
2+
import { type FC } from 'react';
33
import { FieldWrapper } from './FieldWrapper';
44
import type { BasicFieldProps, MedusaCurrencyInputProps } from './types';
55

6-
export type Props = MedusaCurrencyInputProps & BasicFieldProps;
6+
export type Props = MedusaCurrencyInputProps & BasicFieldProps & {
7+
ref?: React.Ref<HTMLInputElement>;
8+
};
79

810
const Wrapper = FieldWrapper<Props>;
911

10-
export const CurrencyInput: React.FC<Props> = forwardRef<HTMLInputElement, Props>((props, ref) => (
12+
export const CurrencyInput: FC<Props> = ({ ref, ...props }) => (
1113
<Wrapper {...props}>{(inputProps) => <MedusaCurrencyInput {...inputProps} ref={ref} />}</Wrapper>
12-
));
14+
);
15+

‎packages/medusa-forms/src/ui/DatePicker.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import { DatePicker } from '@medusajs/ui';
2-
import { forwardRef } from 'react';
2+
import { type FC } from 'react';
33
import { FieldWrapper } from './FieldWrapper';
44
import type { BasicFieldProps, DatePickerProps } from './types';
55

6-
export type Props = DatePickerProps & BasicFieldProps;
6+
export type Props = DatePickerProps & BasicFieldProps & {
7+
ref?: React.Ref<HTMLInputElement>;
8+
};
79

810
const Wrapper = FieldWrapper<Props>;
911

10-
export const DatePickerInput: React.FC<Props> = forwardRef<HTMLInputElement, Props>((props, ref) => {
12+
export const DatePickerInput: FC<Props> = ({ ref, ...props }) => {
1113
return <Wrapper {...props}>{(inputProps) => <DatePicker {...{ ...inputProps, ref }} />}</Wrapper>;
12-
});
14+
};
15+

‎packages/medusa-forms/src/ui/FieldCheckbox.tsx‎

Lines changed: 46 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Checkbox as MedusaCheckbox } from '@medusajs/ui';
22
import clsx from 'clsx';
3-
import { forwardRef } from 'react';
43
import { FieldWrapper } from './FieldWrapper';
54
import { Label } from './Label';
65
import type { BasicFieldProps } from './types';
@@ -9,43 +8,53 @@ export type CheckedState = boolean | 'indeterminate';
98
export type FieldCheckboxProps = BasicFieldProps & {
109
checked?: CheckedState;
1110
onChange?: (checked: CheckedState) => void;
11+
ref?: React.Ref<HTMLButtonElement>;
1212
};
1313

14-
export const FieldCheckbox: React.FC<FieldCheckboxProps> = forwardRef<HTMLButtonElement, FieldCheckboxProps>(
15-
({ label, labelClassName, labelTooltip, wrapperClassName, errorClassName, formErrors, onChange, ...props }, ref) => {
16-
return (
17-
<FieldWrapper<FieldCheckboxProps>
18-
wrapperClassName={wrapperClassName}
19-
errorClassName={errorClassName}
20-
formErrors={formErrors}
21-
{...props}
22-
>
23-
{(fieldProps) => (
24-
<div className="flex items-center">
25-
<MedusaCheckbox
26-
{...fieldProps}
27-
ref={ref}
28-
checked={props.checked}
29-
onChange={(e) => {}}
30-
onCheckedChange={(checked) => {
31-
onChange?.(checked);
14+
export const FieldCheckbox: React.FC<FieldCheckboxProps> = ({
15+
label,
16+
labelClassName,
17+
labelTooltip,
18+
wrapperClassName,
19+
errorClassName,
20+
formErrors,
21+
onChange,
22+
ref,
23+
...props
24+
}) => {
25+
return (
26+
<FieldWrapper<FieldCheckboxProps>
27+
wrapperClassName={wrapperClassName}
28+
errorClassName={errorClassName}
29+
formErrors={formErrors}
30+
{...props}
31+
>
32+
{(fieldProps) => (
33+
<div className="flex items-center">
34+
<MedusaCheckbox
35+
{...fieldProps}
36+
ref={ref}
37+
checked={props.checked}
38+
onChange={(e) => {}}
39+
onCheckedChange={(checked) => {
40+
onChange?.(checked);
41+
}}
42+
/>
43+
44+
{label && (
45+
<Label
46+
htmlFor={props.name}
47+
onClick={() => {
48+
onChange?.(!props.checked);
3249
}}
33-
/>
50+
className={clsx('ml-2 !mb-0 font-normal [&>label]:!cursor-pointer', labelClassName)}
51+
>
52+
{label}
53+
</Label>
54+
)}
55+
</div>
56+
)}
57+
</FieldWrapper>
58+
);
59+
};
3460

35-
{label && (
36-
<Label
37-
htmlFor={props.name}
38-
onClick={() => {
39-
onChange?.(!props.checked);
40-
}}
41-
className={clsx('ml-2 !mb-0 font-normal [&>label]:!cursor-pointer', labelClassName)}
42-
>
43-
{label}
44-
</Label>
45-
)}
46-
</div>
47-
)}
48-
</FieldWrapper>
49-
);
50-
},
51-
);

‎packages/medusa-forms/src/ui/Input.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { Input as MedusaInput } from '@medusajs/ui';
2-
import { forwardRef } from 'react';
32
import { FieldWrapper } from './FieldWrapper';
43
import type { BasicFieldProps, MedusaInputProps } from './types';
54

6-
export type Props = MedusaInputProps & BasicFieldProps;
5+
export type Props = MedusaInputProps & BasicFieldProps & {
6+
ref?: React.Ref<HTMLInputElement>;
7+
};
78

89
const Wrapper = FieldWrapper<Props>;
910

10-
export const Input: React.FC<Props> = forwardRef<HTMLInputElement, Props>((props, ref) => (
11+
export const Input: React.FC<Props> = ({ ref, ...props }) => (
1112
<Wrapper {...props}>{(inputProps) => <MedusaInput {...inputProps} ref={ref} />}</Wrapper>
12-
));
13+
);
14+

‎packages/medusa-forms/src/ui/Select.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import { Select as MedusaSelect } from '@medusajs/ui';
2-
import { forwardRef } from 'react';
32
import { FieldWrapper } from './FieldWrapper';
43
import type { BasicFieldProps, SelectProps } from './types';
54

6-
export type Props = SelectProps & BasicFieldProps;
5+
export type Props = SelectProps & BasicFieldProps & {
6+
ref?: React.Ref<unknown>;
7+
};
78

89
const Wrapper = FieldWrapper<Props>;
910

10-
const SelectComponent = forwardRef<unknown, Props>((props, ref) => {
11+
const SelectComponent: React.FC<Props> = ({ ref, ...props }) => {
1112
return (
1213
<Wrapper {...props}>
1314
{(inputProps) => <MedusaSelect {...{ ...inputProps, ref }}>{props.children}</MedusaSelect>}
1415
</Wrapper>
1516
);
16-
});
17+
};
1718

1819
type SelectComponent = typeof SelectComponent & {
1920
Trigger: typeof MedusaSelect.Trigger;
@@ -28,3 +29,4 @@ export const Select: SelectComponent = Object.assign(SelectComponent, {
2829
Content: MedusaSelect.Content,
2930
Item: MedusaSelect.Item,
3031
});
32+

‎packages/medusa-forms/src/ui/TextArea.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { Textarea } from '@medusajs/ui';
2-
import { forwardRef } from 'react';
32
import { FieldWrapper } from './FieldWrapper';
43
import type { BasicFieldProps, TextAreaProps } from './types';
54

6-
export type Props = TextAreaProps & BasicFieldProps;
5+
export type Props = TextAreaProps & BasicFieldProps & {
6+
ref?: React.Ref<HTMLTextAreaElement>;
7+
};
78

89
const Wrapper = FieldWrapper<Props>;
910

10-
export const TextArea: React.FC<Props> = forwardRef((props, ref) => (
11+
export const TextArea: React.FC<Props> = ({ ref, ...props }) => (
1112
<Wrapper {...props}>{(inputProps) => <Textarea {...inputProps} ref={ref} />}</Wrapper>
12-
));
13+
);
14+

0 commit comments

Comments
 (0)