asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(dashboard): Fix CountrySelect (#8301)

Browse Source 
Resolves CC-214
This commit is contained in:
Kasper Fabricius Kristensen
2024-07-27 17:27:13 +02:00
committed by GitHub
parent d63ca00214
commit 56f634da4b
2 changed files with 68 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
packages/admin-next/dashboard/src/components/inputs/country-select/country-select.tsx
View File

@@ -12,56 +12,67 @@ import { countries } from "../../../lib/data/countries"
export const CountrySelect = forwardRef<
HTMLSelectElement,
ComponentPropsWithoutRef<"select"> & { placeholder?: string }
>(({ className, disabled, placeholder, ...props }, ref) => {
const { t } = useTranslation()
const innerRef = useRef<HTMLSelectElement>(null)
ComponentPropsWithoutRef<"select"> & {
placeholder?: string
value?: string
defaultValue?: string
}
>(
(
{ className, disabled, placeholder, value, defaultValue, ...props },
ref
) => {
const { t } = useTranslation()
const innerRef = useRef<HTMLSelectElement>(null)
useImperativeHandle(ref, () => innerRef.current as HTMLSelectElement)
useImperativeHandle(ref, () => innerRef.current as HTMLSelectElement)
const isPlaceholder = innerRef.current?.value === ""
const isPlaceholder = innerRef.current?.value === ""
return (
<div className="relative">
<TrianglesMini
className={clx(
"text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
{
"text-ui-fg-disabled": disabled,
}
)}
/>
<select
disabled={disabled}
className={clx(
"bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 outline-none",
"placeholder:text-ui-fg-muted text-ui-fg-base",
"hover:bg-ui-bg-field-hover",
"focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
"aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
"invalid::border-ui-border-error invalid:shadow-borders-error",
"disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
{
"text-ui-fg-muted": isPlaceholder,
},
className
)}
{...props}
ref={innerRef}
>
{/* Add an empty option so the first option is preselected */}
<option value="" disabled className="text-ui-fg-muted">
{placeholder || t("fields.selectCountry")}
</option>
{countries.map((country) => {
return (
<option key={country.iso_2} value={country.iso_2}>
{country.display_name}
</option>
)
})}
</select>
</div>
)
})
return (
<div className="relative">
<TrianglesMini
className={clx(
"text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
{
"text-ui-fg-disabled": disabled,
}
)}
/>
<select
value={value ? value.toLowerCase() : undefined}
defaultValue={defaultValue ? defaultValue.toLowerCase() : undefined}
disabled={disabled}
className={clx(
"bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 outline-none",
"placeholder:text-ui-fg-muted text-ui-fg-base",
"hover:bg-ui-bg-field-hover",
"focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
"aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
"invalid::border-ui-border-error invalid:shadow-borders-error",
"disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
{
"text-ui-fg-muted": isPlaceholder,
},
className
)}
{...props}
ref={innerRef}
>
{/* Add an empty option so the first option is preselected */}
<option value="" disabled className="text-ui-fg-muted">
{placeholder || t("fields.selectCountry")}
</option>
{countries.map((country) => {
return (
<option key={country.iso_2} value={country.iso_2.toLowerCase()}>
{country.display_name}
</option>
)
})}
</select>
</div>
)
}
)
CountrySelect.displayName = "CountrySelect"