Skip to content

Commit

Permalink
fix: add conditional styling for disabled state
Browse files Browse the repository at this point in the history
  • Loading branch information
@omeralpi
omeralpi committed Mar 19, 2024
1 parent 6f228ba commit 1509cf7
Show file tree
Hide file tree
Showing 5 changed files with 14 additions and 10 deletions.
2 changes: 1 addition & 1 deletion apps/www/public/registry/styles/default/phone-input.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"files": [
{
"name": "phone-input.tsx",
"content": "import * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/default/ui/command\"\nimport { Input, InputProps } from \"@/registry/default/ui/input\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\ntype PhoneInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"onChange\" | \"value\"\n> &\n Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n onChange?: (value: RPNInput.Value) => void\n }\n\nconst PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =\n React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(\n ({ className, onChange, ...props }, ref) => (\n <RPNInput.default\n ref={ref}\n className={cn(\"flex\", className)}\n flagComponent={FlagComponent}\n countrySelectComponent={CountrySelect}\n inputComponent={InputComponent}\n /**\n * Handles the onChange event.\n *\n * react-phone-number-input might trigger the onChange event as undefined\n * when a valid phone number is not entered. To prevent this,\n * the value is coerced to an empty string.\n *\n * @param {E164Number | undefined} value - The entered value\n */\n onChange={(value) => onChange?.(value || \"\")}\n {...props}\n />\n )\n )\nPhoneInput.displayName = \"PhoneInput\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, ...props }, ref) => (\n <Input\n className={cn(\"rounded-s-none rounded-e-lg\", className)}\n {...props}\n ref={ref}\n />\n )\n)\nInputComponent.displayName = \"InputComponent\"\n\ntype CountrySelectOption = { label: string; value: RPNInput.Country }\n\ntype CountrySelectProps = {\n disabled?: boolean\n value: RPNInput.Country\n onChange: (value: RPNInput.Country) => void\n options: CountrySelectOption[]\n}\n\nconst CountrySelect = ({\n disabled,\n value,\n onChange,\n options,\n}: CountrySelectProps) => {\n const handleSelect = React.useCallback(\n (country: RPNInput.Country) => {\n onChange(country)\n },\n [onChange]\n )\n\n return (\n <Popover>\n <PopoverTrigger asChild>\n <Button\n type=\"button\"\n variant={\"outline\"}\n className={cn(\"flex gap-1 rounded-e-none rounded-s-lg pr-1 pl-3\")}\n disabled={disabled}\n >\n <FlagComponent country={value} countryName={value} />\n <ChevronsUpDown\n className={cn(\n \"h-4 w-4 opacity-50\",\n disabled ? \"hidden\" : \"opacity-100\"\n )}\n />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"p-0 w-[300px]\">\n <Command>\n <CommandList>\n <CommandInput placeholder=\"Search country...\" />\n <CommandEmpty>No country found.</CommandEmpty>\n <CommandGroup>\n {options.map((option) => (\n <CommandItem\n className=\"gap-2\"\n key={option.value}\n onSelect={() => handleSelect(option.value)}\n >\n <FlagComponent\n country={option.value}\n countryName={option.label}\n />\n <span className=\"text-sm flex-1\">{option.label}</span>\n {option.value && (\n <span className=\"text-sm text-foreground/50\">\n {`+${RPNInput.getCountryCallingCode(option.value)}`}\n </span>\n )}\n <Check\n className={cn(\n \"ml-auto h-4 w-4\",\n option.value === value ? \"opacity-100\" : \"opacity-0\"\n )}\n />\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n )\n}\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n const Flag = flags[country]\n\n return (\n <span className=\"flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20\">\n {Flag && <Flag title={countryName} />}\n </span>\n )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { PhoneInput }\n"
"content": "import * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/default/ui/command\"\nimport { Input, InputProps } from \"@/registry/default/ui/input\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\ntype PhoneInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"onChange\" | \"value\"\n> &\n Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n onChange?: (value: RPNInput.Value) => void\n }\n\nconst PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =\n React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(\n ({ className, onChange, ...props }, ref) => (\n <RPNInput.default\n ref={ref}\n className={cn(\"flex\", className)}\n flagComponent={FlagComponent}\n countrySelectComponent={CountrySelect}\n inputComponent={InputComponent}\n /**\n * Handles the onChange event.\n *\n * react-phone-number-input might trigger the onChange event as undefined\n * when a valid phone number is not entered. To prevent this,\n * the value is coerced to an empty string.\n *\n * @param {E164Number | undefined} value - The entered value\n */\n onChange={(value) => onChange?.(value || \"\")}\n {...props}\n />\n )\n )\nPhoneInput.displayName = \"PhoneInput\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, ...props }, ref) => (\n <Input\n className={cn(\"rounded-s-none rounded-e-lg\", className)}\n {...props}\n ref={ref}\n />\n )\n)\nInputComponent.displayName = \"InputComponent\"\n\ntype CountrySelectOption = { label: string; value: RPNInput.Country }\n\ntype CountrySelectProps = {\n disabled?: boolean\n value: RPNInput.Country\n onChange: (value: RPNInput.Country) => void\n options: CountrySelectOption[]\n}\n\nconst CountrySelect = ({\n disabled,\n value,\n onChange,\n options,\n}: CountrySelectProps) => {\n const handleSelect = React.useCallback(\n (country: RPNInput.Country) => {\n onChange(country)\n },\n [onChange]\n )\n\n return (\n <Popover>\n <PopoverTrigger asChild>\n <Button\n type=\"button\"\n variant={\"outline\"}\n className={cn(\"flex gap-1 rounded-e-none rounded-s-lg px-3\")}\n disabled={disabled}\n >\n <FlagComponent country={value} countryName={value} />\n <ChevronsUpDown\n className={cn(\n \"h-4 w-4 opacity-50 -mr-2\",\n disabled ? \"hidden\" : \"opacity-100\"\n )}\n />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"p-0 w-[300px]\">\n <Command>\n <CommandList>\n <CommandInput placeholder=\"Search country...\" />\n <CommandEmpty>No country found.</CommandEmpty>\n <CommandGroup>\n {options.map((option) => (\n <CommandItem\n className=\"gap-2\"\n key={option.value}\n onSelect={() => handleSelect(option.value)}\n >\n <FlagComponent\n country={option.value}\n countryName={option.label}\n />\n <span className=\"text-sm flex-1\">{option.label}</span>\n {option.value && (\n <span className=\"text-sm text-foreground/50\">\n {`+${RPNInput.getCountryCallingCode(option.value)}`}\n </span>\n )}\n <Check\n className={cn(\n \"ml-auto h-4 w-4\",\n option.value === value ? \"opacity-100\" : \"opacity-0\"\n )}\n />\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n )\n}\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n const Flag = flags[country]\n\n return (\n <span className=\"flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20\">\n {Flag && <Flag title={countryName} />}\n </span>\n )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { PhoneInput }\n"
}
],
"type": "components:ui"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/registry/styles/new-york/phone-input.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"files": [
{
"name": "phone-input.tsx",
"content": "import * as React from \"react\"\nimport { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport { Input, InputProps } from \"@/registry/new-york/ui/input\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\ntype PhoneInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"onChange\" | \"value\"\n> &\n Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n onChange?: (value: RPNInput.Value) => void\n }\n\nconst PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =\n React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(\n ({ className, onChange, ...props }, ref) => (\n <RPNInput.default\n ref={ref}\n className={cn(\"flex\", className)}\n flagComponent={FlagComponent}\n countrySelectComponent={CountrySelect}\n inputComponent={InputComponent}\n /**\n * Handles the onChange event.\n *\n * react-phone-number-input might trigger the onChange event as undefined\n * when a valid phone number is not entered. To prevent this,\n * the value is coerced to an empty string.\n *\n * @param {E164Number | undefined} value - The entered value\n */\n onChange={(value) => onChange?.(value || \"\")}\n {...props}\n />\n )\n )\nPhoneInput.displayName = \"PhoneInput\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, ...props }, ref) => (\n <Input\n className={cn(\"rounded-s-none rounded-e-lg\", className)}\n {...props}\n ref={ref}\n />\n )\n)\nInputComponent.displayName = \"InputComponent\"\n\ntype CountrySelectOption = { label: string; value: RPNInput.Country }\n\ntype CountrySelectProps = {\n disabled?: boolean\n value: RPNInput.Country\n onChange: (value: RPNInput.Country) => void\n options: CountrySelectOption[]\n}\n\nconst CountrySelect = ({\n disabled,\n value,\n onChange,\n options,\n}: CountrySelectProps) => {\n const handleSelect = React.useCallback(\n (country: RPNInput.Country) => {\n onChange(country)\n },\n [onChange]\n )\n\n return (\n <Popover>\n <PopoverTrigger asChild>\n <Button\n type=\"button\"\n variant={\"outline\"}\n className={cn(\"flex gap-1 rounded-e-none rounded-s-lg pr-1 pl-3\")}\n disabled={disabled}\n >\n <FlagComponent country={value} countryName={value} />\n <CaretSortIcon\n className={cn(\n \"h-4 w-4 opacity-50\",\n disabled ? \"hidden\" : \"opacity-100\"\n )}\n />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"p-0 w-[300px]\">\n <Command>\n <CommandList>\n <CommandInput placeholder=\"Search country...\" />\n <CommandEmpty>No country found.</CommandEmpty>\n <CommandGroup>\n {options.map((option) => (\n <CommandItem\n className=\"gap-2\"\n key={option.value}\n onSelect={() => handleSelect(option.value)}\n >\n <FlagComponent\n country={option.value}\n countryName={option.label}\n />\n <span className=\"text-sm flex-1\">{option.label}</span>\n {option.value && (\n <span className=\"text-sm text-foreground/50\">\n {`+${RPNInput.getCountryCallingCode(option.value)}`}\n </span>\n )}\n <CheckIcon\n className={cn(\n \"ml-auto h-4 w-4\",\n option.value === value ? \"opacity-100\" : \"opacity-0\"\n )}\n />\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n )\n}\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n const Flag = flags[country]\n\n return (\n <span className=\"flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20\">\n {Flag && <Flag title={countryName} />}\n </span>\n )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { PhoneInput }\n"
"content": "import * as React from \"react\"\nimport { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RPNInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport { Input, InputProps } from \"@/registry/new-york/ui/input\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\ntype PhoneInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"onChange\" | \"value\"\n> &\n Omit<RPNInput.Props<typeof RPNInput.default>, \"onChange\"> & {\n onChange?: (value: RPNInput.Value) => void\n }\n\nconst PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =\n React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(\n ({ className, onChange, ...props }, ref) => (\n <RPNInput.default\n ref={ref}\n className={cn(\"flex\", className)}\n flagComponent={FlagComponent}\n countrySelectComponent={CountrySelect}\n inputComponent={InputComponent}\n /**\n * Handles the onChange event.\n *\n * react-phone-number-input might trigger the onChange event as undefined\n * when a valid phone number is not entered. To prevent this,\n * the value is coerced to an empty string.\n *\n * @param {E164Number | undefined} value - The entered value\n */\n onChange={(value) => onChange?.(value || \"\")}\n {...props}\n />\n )\n )\nPhoneInput.displayName = \"PhoneInput\"\n\nconst InputComponent = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, ...props }, ref) => (\n <Input\n className={cn(\"rounded-s-none rounded-e-lg\", className)}\n {...props}\n ref={ref}\n />\n )\n)\nInputComponent.displayName = \"InputComponent\"\n\ntype CountrySelectOption = { label: string; value: RPNInput.Country }\n\ntype CountrySelectProps = {\n disabled?: boolean\n value: RPNInput.Country\n onChange: (value: RPNInput.Country) => void\n options: CountrySelectOption[]\n}\n\nconst CountrySelect = ({\n disabled,\n value,\n onChange,\n options,\n}: CountrySelectProps) => {\n const handleSelect = React.useCallback(\n (country: RPNInput.Country) => {\n onChange(country)\n },\n [onChange]\n )\n\n return (\n <Popover>\n <PopoverTrigger asChild>\n <Button\n type=\"button\"\n variant={\"outline\"}\n className={cn(\"flex gap-1 rounded-e-none rounded-s-lg px-3\")}\n disabled={disabled}\n >\n <FlagComponent country={value} countryName={value} />\n <CaretSortIcon\n className={cn(\n \"h-4 w-4 opacity-50 -mr-2\",\n disabled ? \"hidden\" : \"opacity-100\"\n )}\n />\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"p-0 w-[300px]\">\n <Command>\n <CommandList>\n <CommandInput placeholder=\"Search country...\" />\n <CommandEmpty>No country found.</CommandEmpty>\n <CommandGroup>\n {options.map((option) => (\n <CommandItem\n className=\"gap-2\"\n key={option.value}\n onSelect={() => handleSelect(option.value)}\n >\n <FlagComponent\n country={option.value}\n countryName={option.label}\n />\n <span className=\"text-sm flex-1\">{option.label}</span>\n {option.value && (\n <span className=\"text-sm text-foreground/50\">\n {`+${RPNInput.getCountryCallingCode(option.value)}`}\n </span>\n )}\n <CheckIcon\n className={cn(\n \"ml-auto h-4 w-4\",\n option.value === value ? \"opacity-100\" : \"opacity-0\"\n )}\n />\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n )\n}\n\nconst FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {\n const Flag = flags[country]\n\n return (\n <span className=\"flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20\">\n {Flag && <Flag title={countryName} />}\n </span>\n )\n}\nFlagComponent.displayName = \"FlagComponent\"\n\nexport { PhoneInput }\n"
}
],
"type": "components:ui"
Expand Down
4 changes: 2 additions & 2 deletions apps/www/registry/default/ui/phone-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,13 +92,13 @@ const CountrySelect = ({
<Button
type="button"
variant={"outline"}
className={cn("flex gap-1 rounded-e-none rounded-s-lg pr-1 pl-3")}
className={cn("flex gap-1 rounded-e-none rounded-s-lg px-3")}
disabled={disabled}
>
<FlagComponent country={value} countryName={value} />
<ChevronsUpDown
className={cn(
"h-4 w-4 opacity-50",
"h-4 w-4 opacity-50 -mr-2",
disabled ? "hidden" : "opacity-100"
)}
/>
Expand Down
Loading

0 comments on commit 1509cf7

Please sign in to comment.