Refactor Components #29
@@ -97,7 +97,6 @@ const CheckboxContainer = memo<CheckboxProps>(
|
||||
|
||||
return (
|
||||
<CheckboxView
|
||||
checkboxId={checkboxId}
|
||||
labelId={labelId}
|
||||
checked={checked}
|
||||
mode={mode}
|
||||
@@ -106,7 +105,6 @@ const CheckboxContainer = memo<CheckboxProps>(
|
||||
label={label}
|
||||
name={name}
|
||||
value={value}
|
||||
ariaLabel={ariaLabel}
|
||||
className={className}
|
||||
combinedBoxStyles={combinedBoxStyles}
|
||||
defaultOutlineClass={defaultOutlineClass}
|
||||
|
||||
@@ -17,7 +17,6 @@ export interface CheckboxProps {
|
||||
}
|
||||
|
||||
export interface CheckboxViewProps {
|
||||
checkboxId: string;
|
||||
labelId: string;
|
||||
checked: boolean;
|
||||
mode: "standard" | "inverse";
|
||||
@@ -26,7 +25,6 @@ export interface CheckboxViewProps {
|
||||
label?: string;
|
||||
name?: string;
|
||||
value?: string;
|
||||
ariaLabel?: string;
|
||||
className: string;
|
||||
combinedBoxStyles: string;
|
||||
defaultOutlineClass: string;
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
import type { CheckboxViewProps } from "./Checkbox.types";
|
||||
|
||||
export function CheckboxView({
|
||||
checkboxId,
|
||||
labelId,
|
||||
checked,
|
||||
disabled,
|
||||
label,
|
||||
name,
|
||||
value,
|
||||
ariaLabel,
|
||||
className,
|
||||
combinedBoxStyles,
|
||||
defaultOutlineClass,
|
||||
|
||||
@@ -138,12 +138,8 @@ const HeaderContainer = memo<HeaderProps>(() => {
|
||||
return (
|
||||
<HeaderView
|
||||
schemaData={schemaData}
|
||||
navigationItems={navigationItems}
|
||||
avatarImages={avatarImages}
|
||||
logoConfig={logoConfig}
|
||||
pathname={pathname}
|
||||
renderNavigationItems={renderNavigationItems}
|
||||
renderAvatarGroup={renderAvatarGroup}
|
||||
renderLoginButton={renderLoginButton}
|
||||
renderCreateRuleButton={renderCreateRuleButton}
|
||||
renderLogo={renderLogo}
|
||||
|
||||
@@ -14,15 +14,6 @@ export interface HeaderViewProps {
|
||||
"query-input": string;
|
||||
};
|
||||
};
|
||||
navigationItems: Array<{
|
||||
href: string;
|
||||
text: string;
|
||||
extraPadding?: boolean;
|
||||
}>;
|
||||
avatarImages: Array<{
|
||||
src: string;
|
||||
alt: string;
|
||||
}>;
|
||||
logoConfig: Array<{
|
||||
breakpoint: string;
|
||||
size:
|
||||
@@ -40,12 +31,7 @@ export interface HeaderViewProps {
|
||||
| "footerLg";
|
||||
showText: boolean;
|
||||
}>;
|
||||
pathname: string;
|
||||
renderNavigationItems: (size: NavSize) => React.ReactNode;
|
||||
renderAvatarGroup: (
|
||||
containerSize: "small" | "medium" | "large" | "xlarge",
|
||||
avatarSize: "small" | "medium" | "large" | "xlarge",
|
||||
) => React.ReactNode;
|
||||
renderLoginButton: (size: NavSize) => React.ReactNode;
|
||||
renderCreateRuleButton: (
|
||||
buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
|
||||
|
||||
@@ -1,19 +1,10 @@
|
||||
import Logo from "../Logo";
|
||||
import MenuBar from "../MenuBar";
|
||||
import MenuBarItem from "../MenuBarItem";
|
||||
import Button from "../Button";
|
||||
import AvatarContainer from "../AvatarContainer";
|
||||
import Avatar from "../Avatar";
|
||||
import type { HeaderViewProps } from "./Header.types";
|
||||
|
||||
export function HeaderView({
|
||||
schemaData,
|
||||
navigationItems,
|
||||
avatarImages,
|
||||
logoConfig,
|
||||
pathname,
|
||||
renderNavigationItems,
|
||||
renderAvatarGroup,
|
||||
renderLoginButton,
|
||||
renderCreateRuleButton,
|
||||
renderLogo,
|
||||
|
||||
@@ -178,13 +178,9 @@ const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
|
||||
|
||||
return (
|
||||
<HomeHeaderView
|
||||
pathname={pathname}
|
||||
schemaData={schemaData}
|
||||
navigationItems={navigationItems}
|
||||
avatarImages={avatarImages}
|
||||
logoConfig={logoConfig}
|
||||
renderNavigationItems={renderNavigationItems}
|
||||
renderAvatarGroup={renderAvatarGroup}
|
||||
renderLoginButton={renderLoginButton}
|
||||
renderCreateRuleButton={renderCreateRuleButton}
|
||||
renderLogo={renderLogo}
|
||||
|
||||
@@ -17,17 +17,7 @@ export type NavSize =
|
||||
| "xlarge";
|
||||
|
||||
export interface HomeHeaderViewProps {
|
||||
pathname: string;
|
||||
schemaData: object;
|
||||
navigationItems: Array<{
|
||||
href: string;
|
||||
text: string;
|
||||
extraPadding?: boolean;
|
||||
}>;
|
||||
avatarImages: Array<{
|
||||
src: string;
|
||||
alt: string;
|
||||
}>;
|
||||
logoConfig: Array<{
|
||||
breakpoint: string;
|
||||
size:
|
||||
@@ -46,10 +36,6 @@ export interface HomeHeaderViewProps {
|
||||
showText: boolean;
|
||||
}>;
|
||||
renderNavigationItems: (size: NavSize) => React.ReactNode;
|
||||
renderAvatarGroup: (
|
||||
containerSize: "small" | "medium" | "large" | "xlarge",
|
||||
avatarSize: "small" | "medium" | "large" | "xlarge",
|
||||
) => React.ReactNode;
|
||||
renderLoginButton: (size: NavSize) => React.ReactNode;
|
||||
renderCreateRuleButton: (
|
||||
buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
|
||||
|
||||
@@ -2,23 +2,14 @@
|
||||
|
||||
import { memo } from "react";
|
||||
import Script from "next/script";
|
||||
import Logo from "../Logo";
|
||||
import HeaderTab from "../HeaderTab";
|
||||
import MenuBar from "../MenuBar";
|
||||
import MenuBarItem from "../MenuBarItem";
|
||||
import Button from "../Button";
|
||||
import AvatarContainer from "../AvatarContainer";
|
||||
import Avatar from "../Avatar";
|
||||
import type { HomeHeaderViewProps } from "./HomeHeader.types";
|
||||
|
||||
function HomeHeaderView({
|
||||
pathname,
|
||||
schemaData,
|
||||
navigationItems,
|
||||
avatarImages,
|
||||
logoConfig,
|
||||
renderNavigationItems,
|
||||
renderAvatarGroup,
|
||||
renderLoginButton,
|
||||
renderCreateRuleButton,
|
||||
renderLogo,
|
||||
|
||||
@@ -12,7 +12,11 @@ export const InputView = forwardRef<HTMLInputElement, InputViewProps>(
|
||||
name,
|
||||
type,
|
||||
disabled,
|
||||
className,
|
||||
size: _size,
|
||||
labelVariant: _labelVariant,
|
||||
state: _state,
|
||||
error: _error,
|
||||
className: _className,
|
||||
containerClasses,
|
||||
labelClasses,
|
||||
inputClasses,
|
||||
@@ -20,7 +24,6 @@ export const InputView = forwardRef<HTMLInputElement, InputViewProps>(
|
||||
handleChange,
|
||||
handleFocus,
|
||||
handleBlur,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
@@ -49,7 +52,6 @@ export const InputView = forwardRef<HTMLInputElement, InputViewProps>(
|
||||
disabled={disabled}
|
||||
className={inputClasses}
|
||||
style={{ borderRadius }}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -43,33 +43,31 @@ const defaultLogos = [
|
||||
},
|
||||
];
|
||||
|
||||
const LogoWallContainer = memo<LogoWallProps>(
|
||||
({ logos, className = "" }) => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const LogoWallContainer = memo<LogoWallProps>(({ logos, className = "" }) => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const displayLogos = useMemo(
|
||||
() => (logos && logos.length > 0 ? logos : defaultLogos),
|
||||
[logos],
|
||||
);
|
||||
const displayLogos = useMemo(
|
||||
() => (logos && logos.length > 0 ? logos : defaultLogos),
|
||||
[logos],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// Trigger fade-in animation after component mounts
|
||||
const timer = setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
}, 100);
|
||||
useEffect(() => {
|
||||
// Trigger fade-in animation after component mounts
|
||||
const timer = setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
}, 100);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<LogoWallView
|
||||
isVisible={isVisible}
|
||||
displayLogos={displayLogos}
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
return (
|
||||
<LogoWallView
|
||||
isVisible={isVisible}
|
||||
displayLogos={displayLogos}
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
LogoWallContainer.displayName = "LogoWall";
|
||||
|
||||
|
||||
@@ -21,7 +21,8 @@ export interface MiniCardViewProps {
|
||||
labelLine2?: string;
|
||||
computedAriaLabel: string;
|
||||
wrapperElement: "a" | "button" | "div";
|
||||
wrapperProps: React.AnchorHTMLAttributes<HTMLAnchorElement> &
|
||||
React.ButtonHTMLAttributes<HTMLButtonElement> &
|
||||
React.HTMLAttributes<HTMLDivElement>;
|
||||
wrapperProps:
|
||||
| React.AnchorHTMLAttributes<HTMLAnchorElement>
|
||||
| React.ButtonHTMLAttributes<HTMLButtonElement>
|
||||
| React.HTMLAttributes<HTMLDivElement>;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Children, type ReactElement, type ReactNode } from "react";
|
||||
import React, { Children, type ReactNode } from "react";
|
||||
import SelectDropdown from "../SelectDropdown";
|
||||
import SelectOption from "../SelectOption";
|
||||
import type { SelectOptionData } from "./Select.types";
|
||||
|
||||
@@ -5,7 +5,7 @@ import { ToggleGroupView } from "./ToggleGroup.view";
|
||||
import type { ToggleGroupProps } from "./ToggleGroup.types";
|
||||
|
||||
const ToggleGroupContainer = memo(
|
||||
forwardRef<HTMLButtonElement, ToggleGroupProps>((props, ref) => {
|
||||
forwardRef<HTMLButtonElement, ToggleGroupProps>((props, _ref) => {
|
||||
const {
|
||||
children,
|
||||
className = "",
|
||||
|
||||
Reference in New Issue
Block a user