Skip to content

Commit 5f9fdb7

Browse files
hackr-shhackr-sh
committed
fix(button): check if creating button in separate function results in next.js warning being thrown
In next.js, having styled components that get created during a component lifecycle will cause a warning to pop up. I'm fairly certain this won't fix the issue at hand but it would be an easy fix if it did.
1 parent 5a03fff commit 5f9fdb7

File tree

1 file changed

+87
-85
lines changed

1 file changed

+87
-85
lines changed

‎src/components/Button.tsx

Lines changed: 87 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -17,96 +17,98 @@ export type ButtonProps = React.HTMLAttributes<
1717

1818
export const Button = (props: ButtonProps) => {
1919
const { variant, accent } = props;
20-
const ButtonElement = styled(props.href ? "a" : "button")<ButtonProps>`
21-
font-size: ${(props) => {
22-
if (props.size === "small") return "0.75em";
23-
if (props.size === "large") return "1.25em";
24-
return "1em";
25-
}};
26-
font-weight: 400;
27-
padding: ${(props) => {
28-
if (props.size === "small") return "0.5em 1em";
29-
if (props.size === "large") return "1em 2em";
30-
return "0.75em 1.5em";
31-
}};
32-
display: flex;
33-
align-items: center;
34-
justify-content: center;
35-
cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
36-
transition: all 0.2s ease-in-out;
37-
text-decoration: none;
38-
width: ${(props) => {
39-
if (props.shape === "rounded") {
40-
if (props.size === "small") return "2.5em";
41-
if (props.size === "large") return "6em";
42-
return "4em";
43-
}
44-
return "auto";
45-
}};
46-
height: ${(props) => {
47-
if (props.shape === "rounded") {
48-
if (props.size === "small") return "2.5em";
49-
if (props.size === "large") return "6em";
50-
return "4em";
51-
}
52-
return "auto";
53-
}};
54-
border-radius: ${(props) => {
55-
if (props.shape === "square" || !props.shape) return "0.375em";
56-
if (props.size === "small") return "1.25em";
57-
if (props.size === "large") return "3em";
58-
return "2em";
59-
}};
20+
const ButtonElement = createButtonElement(props);
21+
return <ButtonElement {...props} />;
22+
};
23+
24+
const createButtonElement = (props: ButtonProps) => styled(
25+
props.href ? "a" : "button"
26+
)<ButtonProps>`
27+
font-size: ${(props) => {
28+
if (props.size === "small") return "0.75em";
29+
if (props.size === "large") return "1.25em";
30+
return "1em";
31+
}};
32+
font-weight: 400;
33+
padding: ${(props) => {
34+
if (props.size === "small") return "0.5em 1em";
35+
if (props.size === "large") return "1em 2em";
36+
return "0.75em 1.5em";
37+
}};
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
42+
transition: all 0.2s ease-in-out;
43+
text-decoration: none;
44+
width: ${(props) => {
45+
if (props.shape === "rounded") {
46+
if (props.size === "small") return "2.5em";
47+
if (props.size === "large") return "6em";
48+
return "4em";
49+
}
50+
return "auto";
51+
}};
52+
height: ${(props) => {
53+
if (props.shape === "rounded") {
54+
if (props.size === "small") return "2.5em";
55+
if (props.size === "large") return "6em";
56+
return "4em";
57+
}
58+
return "auto";
59+
}};
60+
border-radius: ${(props) => {
61+
if (props.shape === "square" || !props.shape) return "0.375em";
62+
if (props.size === "small") return "1.25em";
63+
if (props.size === "large") return "3em";
64+
return "2em";
65+
}};
66+
border: ${(props) => {
67+
if (props.variant !== "outlined") return "none";
68+
return `1px solid ${
69+
props.theme[props.accent || "info"] ?? getThemeValue(props.accent || "info")
70+
}`;
71+
}};
72+
background-color: ${(props) => {
73+
if (props.variant === "contained")
74+
return props.theme[props.accent || "info"] ?? getThemeValue(props.accent || "info");
75+
return "transparent";
76+
}};
77+
color: ${(props) => {
78+
if (props.variant === "contained") return "#fff";
79+
return props.theme[props.accent || "info"] ?? getThemeValue(props.accent || "info");
80+
}};
81+
82+
&:disabled {
6083
border: ${(props) => {
61-
if (variant !== "outlined") return "none";
62-
return `1px solid ${
63-
props.theme[accent || "info"] ?? getThemeValue(accent || "info")
64-
}`;
84+
if (props.variant !== "outlined") return "none";
85+
return `1px solid ${props.theme.disabled ?? getThemeValue("disabled")}`;
6586
}};
6687
background-color: ${(props) => {
67-
if (variant === "contained")
68-
return props.theme[accent || "info"] ?? getThemeValue(accent || "info");
88+
if (props.variant === "contained")
89+
return props.theme.disabled ?? getThemeValue("disabled");
6990
return "transparent";
7091
}};
7192
color: ${(props) => {
72-
if (variant === "contained") return "#fff";
73-
return props.theme[accent || "info"] ?? getThemeValue(accent || "info");
93+
if (props.variant === "contained") return "#fff";
94+
return props.theme.disabled ?? getThemeValue("disabled");
7495
}};
96+
}
7597
76-
&:disabled {
77-
border: ${(props) => {
78-
if (variant !== "outlined") return "none";
79-
return `1px solid ${props.theme.disabled ?? getThemeValue("disabled")}`;
80-
}};
81-
background-color: ${(props) => {
82-
if (variant === "contained")
83-
return props.theme.disabled ?? getThemeValue("disabled");
84-
return "transparent";
85-
}};
86-
color: ${(props) => {
87-
if (variant === "contained") return "#fff";
88-
return props.theme.disabled ?? getThemeValue("disabled");
89-
}};
90-
}
91-
92-
&:hover:not(:disabled) {
93-
filter: drop-shadow(
94-
0em 0.125em 0.625em
95-
${(props) =>
96-
props.theme[accent || "info"] ??
97-
getThemeValue(accent || "info")}80
98-
)
99-
brightness(110%);
100-
}
101-
&:active:not(:disabled) {
102-
filter: drop-shadow(
103-
0em 0.0625em 0.3125em
104-
${(props) =>
105-
props.theme[accent || "info"] ??
106-
getThemeValue(accent || "info")}80
107-
)
108-
brightness(80%);
109-
}
110-
`;
111-
return <ButtonElement {...props} />;
112-
};
98+
&:hover:not(:disabled) {
99+
filter: drop-shadow(
100+
0em 0.125em 0.625em
101+
${(props) =>
102+
props.theme[props.accent || "info"] ?? getThemeValue(props.accent || "info")}80
103+
)
104+
brightness(110%);
105+
}
106+
&:active:not(:disabled) {
107+
filter: drop-shadow(
108+
0em 0.0625em 0.3125em
109+
${(props) =>
110+
props.theme[props.accent || "info"] ?? getThemeValue(props.accent || "info")}80
111+
)
112+
brightness(80%);
113+
}
114+
`;

0 commit comments

Comments
 (0)