archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(autocomplete): endContent prop (#1902)

Browse Source
This commit is contained in:
Junior Garcia 2023-11-06 16:25:00 -03:00 committed by GitHub
parent 6a6d426b10
commit 85a820eeff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 54 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/beige-tips-sort.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/autocomplete": patch
"@nextui-org/theme": patch
---
Fix #1893, `endContent` prop fixed.

3
apps/docs/content/docs/components/autocomplete.mdx
View File

@ -426,7 +426,8 @@ properties to customize the popover, listbox and input components.
| scrollShadowProps | [ScrollShadowProps](/docs/components/scroll-shadow#api) | Props to be passed to the ScrollShadow component. | - |
| selectorButtonProps | [ButtonProps](/docs/components/button#api) | Props to be passed to the selector button. | - |
| clearButtonProps | [ButtonProps](/docs/components/button#api) | Props to be passed to the clear button. | - |
| disableClearable | `boolean` | Whether the clear button should be hidden. | `false` |
| isClearable | `boolean` | Whether the clear button should be shown. | `true` |
| disableClearable | `boolean` | Whether the clear button should be hidden. (**Deprecated**) Use `isClearable` instead. | `false` |
| disableAnimation | `boolean` | Whether the Autocomplete should be animated. | `true` |
| disableSelectorIconRotation | `boolean` | Whether the select should disable the rotation of the selector icon. | `false` |
| classNames | `Record<"base"｜ "listboxWrapper"｜ "listbox"｜ "popoverContent" ｜ "endContentWrapper"｜ "clearButton" ｜ "selectorButton", string>` | Allows to set custom class names for the Autocomplete slots. | - |

3
packages/components/autocomplete/src/autocomplete.tsx
View File

@ -20,6 +20,7 @@ function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLI
disableAnimation,
selectorIcon = <ChevronDownIcon />,
clearIcon = <CloseIcon />,
endContent,
getBaseProps,
getSelectorButtonProps,
getInputProps,
@ -44,7 +45,7 @@ function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLI
{...getInputProps()}
endContent={
<div {...getEndContentWrapperProps()}>
<Button {...getClearButtonProps()}>{clearIcon}</Button>
{endContent || <Button {...getClearButtonProps()}>{clearIcon}</Button>}
<Button {...getSelectorButtonProps()}>{selectorIcon}</Button>
</div>
}

20
packages/components/autocomplete/src/use-autocomplete.ts
View File

@ -64,6 +64,12 @@ interface Props<T> extends Omit<HTMLNextUIProps<"input">, keyof ComboBoxProps<T>
* @default { disableAnimation: false }
*/
inputProps?: Partial<InputProps>;
/**
* Whether the clear button should be hidden.
* @default false
* @deprecated Use `isClearable` instead.
*/
disableClearable?: boolean;
/**
* Props to be passed to the selector button component.
* @default { size: "sm", variant: "light", radius: "full", isIconOnly: true }
@ -104,7 +110,7 @@ interface Props<T> extends Omit<HTMLNextUIProps<"input">, keyof ComboBoxProps<T>
}
export type UseAutocompleteProps<T> = Props<T> &
Omit<InputProps, "children" | "value" | "defaultValue" | "classNames"> &
Omit<InputProps, "children" | "value" | "isClearable" | "defaultValue" | "classNames"> &
ComboBoxProps<T> &
AsyncLoadable &
AutocompleteVariantProps;
@ -113,6 +119,12 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
const [props, variantProps] = mapPropsVariants(originalProps, autocomplete.variantKeys);
const disableAnimation = originalProps.disableAnimation ?? false;
// TODO: Remove disableClearable prop in the next minor release.
const isClearable =
originalProps.disableClearable !== undefined
? !originalProps.disableClearable
: originalProps.isClearable;
const {
ref,
as,
@ -127,6 +139,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
clearIcon,
scrollRef: scrollRefProp,
defaultFilter,
endContent,
allowsEmptyCollection = true,
shouldCloseOnBlur = true,
popoverProps = {},
@ -286,10 +299,11 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
() =>
autocomplete({
...variantProps,
isClearable,
disableAnimation,
className,
}),
[...Object.values(variantProps), disableAnimation, className],
[...Object.values(variantProps), isClearable, disableAnimation, className],
);
const onClear = useCallback(() => {
@ -413,6 +427,8 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
isLoading,
clearIcon,
isOpen,
endContent,
isClearable,
disableAnimation,
allowsCustomValue,
selectorIcon,

22
packages/components/autocomplete/stories/autocomplete.stories.tsx
View File

@ -277,6 +277,20 @@ const StartContentTemplate = ({color, variant, ...args}: AutocompleteProps) => (
</Autocomplete>
);
const EndContentTemplate = ({color, variant, ...args}: AutocompleteProps) => (
<Autocomplete
className="max-w-xs"
color={color}
defaultSelectedKey={"cat"}
endContent={<PetBoldIcon className="text-xl" />}
label="Favorite Animal"
variant={variant}
{...args}
>
{items}
</Autocomplete>
);
const DynamicTemplateWithDescriptions = ({color, variant, ...args}: AutocompleteProps<Animal>) => (
<Autocomplete
className="max-w-xs"
@ -693,6 +707,14 @@ export const StartContent = {
},
};
export const EndContent = {
render: EndContentTemplate,
args: {
...defaultProps,
},
};
export const WithoutScrollShadow = {
render: Template,

8
packages/core/theme/src/components/autocomplete.ts
View File

@ -24,11 +24,11 @@ const autocomplete = tv({
selectorButton: "text-medium",
},
variants: {
disableClearable: {
true: {
isClearable: {
true: {},
false: {
clearButton: "hidden",
},
false: {},
},
disableAnimation: {
true: {
@ -47,7 +47,7 @@ const autocomplete = tv({
},
defaultVariants: {
disableAnimation: false,
disableClearable: false,
isClearable: true,
disableSelectorIconRotation: false,
},
});