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

refactor: remove unnecessary className passing to tv and make naming consistent (#4558)

Browse Source 
* refactor: remove unnecessary className passing to tv

* refactor(button): move styles to getButtonProps

* refactor: rename classNames to styles to keep the naming consistent
This commit is contained in:
աӄա 2025-02-06 05:10:26 +08:00 committed by GitHub
parent ace8406946
commit 25cf3e2f0d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 19 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -385,9 +385,8 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
...variantProps,
isClearable,
disableAnimation,
className,
}),
[objectToDeps(variantProps), isClearable, disableAnimation, className],
[objectToDeps(variantProps), isClearable, disableAnimation],
);
const getBaseProps: PropGetter = () => ({

3
packages/components/breadcrumbs/src/use-breadcrumbs.ts
View File

@ -145,9 +145,8 @@ export function useBreadcrumbs(originalProps: UseBreadcrumbsProps) {
() =>
breadcrumbs({
...variantProps,
className,
}),
[objectToDeps(variantProps), className],
[objectToDeps(variantProps)],
);
const baseStyles = clsx(classNames?.base, className);

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

@ -11,7 +11,6 @@ const Button = forwardRef<"button", ButtonProps>((props, ref) => {
Component,
domRef,
children,
styles,
spinnerSize,
spinner = <Spinner color="current" size={spinnerSize} />,
spinnerPlacement,
@ -25,7 +24,7 @@ const Button = forwardRef<"button", ButtonProps>((props, ref) => {
} = useButton({...props, ref});
return (
<Component ref={domRef} className={styles} {...getButtonProps()}>
<Component ref={domRef} {...getButtonProps()}>
{startContent}
{isLoading && spinnerPlacement === "start" && spinner}
{isLoading && isIconOnly ? null : children}

2
packages/components/button/src/use-button.ts
View File

@ -176,6 +176,7 @@ export function useButton(props: UseButtonProps) {
}),
filterDOMProps(props),
),
className: styles,
}),
[
isLoading,
@ -189,6 +190,7 @@ export function useButton(props: UseButtonProps) {
focusProps,
hoverProps,
otherProps,
styles,
],
);

4
packages/components/code/src/use-code.ts
View File

@ -21,7 +21,7 @@ export function useCode(originalProps: UseCodeProps) {
const Component = as || "code";
const classNames = useMemo(
const styles = useMemo(
() =>
code({
...variantProps,
@ -32,7 +32,7 @@ export function useCode(originalProps: UseCodeProps) {
const getCodeProps: PropGetter = () => {
return {
className: classNames,
className: styles,
...otherProps,
};
};

3
packages/components/date-input/src/use-date-input.ts
View File

@ -204,9 +204,8 @@ export function useDateInput<T extends DateValue>(originalProps: UseDateInputPro
...variantProps,
disableAnimation,
labelPlacement,
className,
}),
[objectToDeps(variantProps), disableAnimation, labelPlacement, className],
[objectToDeps(variantProps), disableAnimation, labelPlacement],
);
const getLabelProps: PropGetter = (props) => {

3
packages/components/date-input/src/use-time-input.ts
View File

@ -146,9 +146,8 @@ export function useTimeInput<T extends TimeValue>(originalProps: UseTimeInputPro
...variantProps,
disableAnimation,
labelPlacement,
className,
}),
[objectToDeps(variantProps), labelPlacement, disableAnimation, className],
[objectToDeps(variantProps), labelPlacement, disableAnimation],
);
const getLabelProps: PropGetter = (props) => {

3
packages/components/date-picker/src/use-date-range-picker.ts
View File

@ -274,9 +274,8 @@ export function useDateRangePicker<T extends DateValue>({
dateInput({
...variantProps,
labelPlacement,
className,
}),
[objectToDeps(variantProps), className],
[objectToDeps(variantProps)],
);
const getStartDateInputProps = (props: DOMAttributes = {}) => {

8
packages/components/dropdown/src/use-dropdown.ts
View File

@ -124,7 +124,7 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
menuTriggerRef,
);
const classNames = useMemo(
const styles = useMemo(
() =>
dropdown({
className,
@ -156,7 +156,7 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
classNames: {
...classNamesProp,
...props.classNames,
content: clsx(classNames, classNamesProp?.content, props.className),
content: clsx(styles, classNamesProp?.content, props.className),
},
shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
? popoverProps.shouldCloseOnInteractOutside
@ -195,7 +195,6 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
Component,
menuRef,
menuProps,
classNames,
closeOnSelect,
onClose: state.close,
autoFocus: state.focusStrategy || true,
@ -206,13 +205,10 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
};
}
// export type UseDropdownReturn = ReturnType<typeof useDropdown>;
export type UseDropdownReturn = {
Component: string | React.ElementType;
menuRef: React.RefObject<HTMLUListElement>;
menuProps: any;
classNames: string;
closeOnSelect: boolean;
onClose: () => void;
autoFocus: any;

6
packages/components/link/src/use-link.ts
View File

@ -93,7 +93,7 @@ export function useLink(originalProps: UseLinkProps) {
otherProps.target = otherProps.target ?? "_blank";
}
const classNames = useMemo(
const styles = useMemo(
() =>
link({
...variantProps,
@ -106,13 +106,13 @@ export function useLink(originalProps: UseLinkProps) {
const getLinkProps: PropGetter = useCallback(() => {
return {
ref: domRef,
className: classNames,
className: styles,
"data-focus": dataAttr(isFocused),
"data-disabled": dataAttr(originalProps.isDisabled),
"data-focus-visible": dataAttr(isFocusVisible),
...mergeProps(focusProps, linkProps, otherProps),
};
}, [classNames, isFocused, isFocusVisible, focusProps, linkProps, otherProps]);
}, [styles, isFocused, isFocusVisible, focusProps, linkProps, otherProps]);
return {Component, children, anchorIcon, showAnchorIcon, getLinkProps};
}

2
packages/components/listbox/src/use-listbox.ts
View File

@ -131,7 +131,7 @@ export function useListbox<T extends object>(props: UseListboxProps<T>) {
const {listBoxProps} = useAriaListbox({...props, onAction}, state, domRef);
const slots = useMemo(() => listbox({className}), [className]);
const slots = useMemo(() => listbox(), []);
const baseStyles = clsx(classNames?.base, className);

3
packages/components/select/src/use-select.ts
View File

@ -379,9 +379,8 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
isInvalid,
labelPlacement,
disableAnimation,
className,
}),
[objectToDeps(variantProps), isInvalid, labelPlacement, disableAnimation, className],
[objectToDeps(variantProps), isInvalid, labelPlacement, disableAnimation],
);
// scroll the listbox to the selected item

3
packages/components/slider/src/use-slider.ts
View File

@ -244,9 +244,8 @@ export function useSlider(originalProps: UseSliderProps) {
disableAnimation,
hasSingleThumb,
isVertical,
className,
}),
[objectToDeps(variantProps), isVertical, disableAnimation, hasSingleThumb, hasMarks, className],
[objectToDeps(variantProps), isVertical, disableAnimation, hasSingleThumb, hasMarks],
);
const [startOffset, endOffset] = [

3
packages/components/tabs/src/use-tabs.ts
View File

@ -119,11 +119,10 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
() =>
tabs({
...variantProps,
className,
disableAnimation,
...(isVertical ? {placement: "start"} : {}),
}),
[objectToDeps(variantProps), className, disableAnimation, isVertical],
[objectToDeps(variantProps), disableAnimation, isVertical],
);
const baseStyles = clsx(classNames?.base, className);