filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-22 21:45:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(Buttons): forward ref

Browse Source
This commit is contained in:
Aminejv 2021-12-22 17:24:06 +01:00
parent 86e7aa6189
commit fb2f6645cc
1 changed files with 223 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

466
components/system/components/Buttons.js
View File

@ -2,10 +2,9 @@ import * as React from "react";
import * as Constants from "~/common/constants"; import * as Constants from "~/common/constants";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { LoaderSpinner } from "~/components/system/components/Loaders"; import { LoaderSpinner } from "~/components/system/components/Loaders";
const STYLES_BUTTON = ` const STYLES_BUTTON = css`
box-sizing: border-box; box-sizing: border-box;
border-radius: 12px; border-radius: 12px;
outline: 0; outline: 0;
@ -54,83 +53,79 @@ const STYLES_BUTTON_PRIMARY_TRANSPARENT = css`
color: ${Constants.system.blue}; color: ${Constants.system.blue};
`; `;
export const ButtonPrimary = ({ export const ButtonPrimary = React.forwardRef(
children, ({ children, css, style, full, transparent, loading, label, type, ...props }, ref) => {
css, if (loading) {
style, return (
full, <button
transparent, css={[transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY, css]}
loading, style={{ width: full ? "100%" : "auto", ...style }}
label, type={type}
type, ref={ref}
...props {...props}
}) => { >
if (loading) { <LoaderSpinner style={{ height: 16, width: 16, color: Constants.system.white }} />
</button>
);
}
if (type === "label") {
return (
<label
css={[transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={label}
ref={ref}
{...props}
>
{children}
</label>
);
}
if (type === "link") {
return (
<a
css={[transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
ref={ref}
{...props}
>
{children}
</a>
);
}
if (props.disabled) {
return (
<button
css={[STYLES_BUTTON_PRIMARY_DISABLED, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={type}
ref={ref}
{...props}
>
{children}
</button>
);
}
return ( return (
<button <button
css={[transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY, css]} css={[transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY, css]}
style={{ width: full ? "100%" : "auto", ...style }} style={{ width: full ? "100%" : "auto", ...style }}
type={type} type={type}
{...props} {...props}
>
<LoaderSpinner style={{ height: 16, width: 16, color: Constants.system.white }} />
</button>
);
}
if (type === "label") {
return (
<label
css={[transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={label}
{...props}
>
{children}
</label>
);
}
if (type === "link") {
return (
<a
css={[transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
{...props}
>
{children}
</a>
);
}
if (props.disabled) {
return (
<button
css={[STYLES_BUTTON_PRIMARY_DISABLED, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={type}
{...props}
> >
{children} {children}
</button> </button>
); );
} }
);
return ( export const ButtonPrimaryFull = React.forwardRef((props, ref) => {
<button return <ButtonPrimary full ref={ref} {...props} />;
css={[transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY, css]} });
style={{ width: full ? "100%" : "auto", ...style }}
type={type}
{...props}
>
{children}
</button>
);
};
export const ButtonPrimaryFull = (props) => {
return <ButtonPrimary full {...props} />;
};
const STYLES_BUTTON_SECONDARY = css` const STYLES_BUTTON_SECONDARY = css`
${STYLES_BUTTON} ${STYLES_BUTTON}
@ -157,66 +152,62 @@ const STYLES_BUTTON_SECONDARY_TRANSPARENT = css`
color: ${Constants.system.grayLight2}; color: ${Constants.system.grayLight2};
`; `;
export const ButtonSecondary = ({ export const ButtonSecondary = React.forwardRef(
children, ({ children, css, style, full, transparent, loading, label, type, ...props }, ref) => {
css, if (loading) {
style, return (
full, <button
transparent, css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]}
loading, style={{ width: full ? "100%" : "auto", ...style }}
label, type={type}
type, ref={ref}
...props {...props}
}) => { >
if (loading) { <LoaderSpinner style={{ height: 16, width: 16 }} />
</button>
);
}
if (type === "label") {
return (
<label
css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={label}
ref={ref}
{...props}
>
{children}
</label>
);
}
if (type === "link") {
return (
<a
css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
ref={ref}
{...props}
>
{children}
</a>
);
}
return ( return (
<button <button
css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]} css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]}
style={{ width: full ? "100%" : "auto", ...style }} style={{ width: full ? "100%" : "auto", ...style }}
type={type} type={type}
ref={ref}
{...props} {...props}
> >
<LoaderSpinner style={{ height: 16, width: 16 }} /> {children}
</button> </button>
); );
} }
);
if (type === "label") {
return (
<label
css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={label}
{...props}
>
{children}
</label>
);
}
if (type === "link") {
return (
<a
css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
{...props}
>
{children}
</a>
);
}
return (
<button
css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={type}
{...props}
>
{children}
</button>
);
};
export const ButtonSecondaryFull = (props) => { export const ButtonSecondaryFull = (props) => {
return <ButtonSecondary full {...props} />; return <ButtonSecondary full {...props} />;
@ -233,11 +224,6 @@ const STYLES_BUTTON_TERTIARY = css`
:hover { :hover {
background-color: #fcfcfc; background-color: #fcfcfc;
} }
:focus {
outline: 0;
border: 0;
}
`; `;
const STYLES_BUTTON_TERTIARY_TRANSPARENT = css` const STYLES_BUTTON_TERTIARY_TRANSPARENT = css`
@ -248,69 +234,65 @@ const STYLES_BUTTON_TERTIARY_TRANSPARENT = css`
color: ${Constants.system.grayLight2}; color: ${Constants.system.grayLight2};
`; `;
export const ButtonTertiary = ({ export const ButtonTertiary = React.forwardRef(
children, ({ children, css, style, full, transparent, loading, label, type, ...props }, ref) => {
css, if (loading) {
style, return (
full, <button
transparent, css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]}
loading, style={{ width: full ? "100%" : "auto", ...style }}
label, type={type}
type, ref={ref}
...props {...props}
}) => { >
if (loading) { <LoaderSpinner style={{ height: 16, width: 16 }} />
</button>
);
}
if (type === "label") {
return (
<label
css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
ref={ref}
{...props}
>
{children}
</label>
);
}
if (type === "link") {
return (
<a
css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
ref={ref}
{...props}
>
{children}
</a>
);
}
return ( return (
<button <button
css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]} css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]}
style={{ width: full ? "100%" : "auto", ...style }} style={{ width: full ? "100%" : "auto", ...style }}
type={type} type={type}
ref={ref}
{...props} {...props}
> >
<LoaderSpinner style={{ height: 16, width: 16 }} /> {children}
</button> </button>
); );
} }
);
if (type === "label") { export const ButtonTertiaryFull = React.forwardRef((props, ref) => {
return ( return <ButtonTertiary full {...props} ref={ref} />;
<label });
css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
{...props}
>
{children}
</label>
);
}
if (type === "link") {
return (
<a
css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
{...props}
>
{children}
</a>
);
}
return (
<button
css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={type}
{...props}
>
{children}
</button>
);
};
export const ButtonTertiaryFull = (props) => {
return <ButtonTertiary full {...props} />;
};
const STYLES_BUTTON_DISABLED = css` const STYLES_BUTTON_DISABLED = css`
${STYLES_BUTTON} ${STYLES_BUTTON}
@ -332,22 +314,25 @@ const STYLES_BUTTON_DISABLED_TRANSPARENT = css`
color: ${Constants.system.gray}; color: ${Constants.system.gray};
`; `;
export const ButtonDisabled = ({ children, css, style, full, label, ...props }) => { export const ButtonDisabled = React.forwardRef(
return ( ({ children, css, style, full, label, ...props }, ref) => {
<button return (
css={[props.transparent ? STYLES_BUTTON_DISABLED_TRANSPARENT : STYLES_BUTTON_DISABLED, css]} <button
type={label} css={[props.transparent ? STYLES_BUTTON_DISABLED_TRANSPARENT : STYLES_BUTTON_DISABLED, css]}
style={{ width: full ? "100%" : "auto", ...style }} type={label}
{...props} style={{ width: full ? "100%" : "auto", ...style }}
> ref={ref}
{children} {...props}
</button> >
); {children}
}; </button>
);
}
);
export const ButtonDisabledFull = (props) => { export const ButtonDisabledFull = React.forwardRef((props, ref) => {
return <ButtonDisabled full {...props} />; return <ButtonDisabled full ref={ref} {...props} />;
}; });
const STYLES_BUTTON_WARNING = css` const STYLES_BUTTON_WARNING = css`
${STYLES_BUTTON} ${STYLES_BUTTON}
@ -380,69 +365,64 @@ const STYLES_BUTTON_WARNING_TRANSPARENT = css`
color: ${Constants.system.red}; color: ${Constants.system.red};
`; `;
export const ButtonWarning = ({ export const ButtonWarning = React.forwardRef(
children, ({ children, css, style, full, transparent, type, disabled, loading, label, ...props }, ref) => {
css, if (loading) {
style, return (
full, <button
transparent, css={[transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING, css]}
type, style={{ width: full ? "100%" : "auto", ...style }}
disabled, type={type}
loading, ref={ref}
label, {...props}
...props >
}) => { <LoaderSpinner style={{ height: 16, width: 16, color: Constants.system.white }} />
if (loading) { </button>
);
}
if (type === "label") {
return (
<label
css={[transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={label}
ref={ref}
{...props}
>
{children}
</label>
);
}
if (disabled) {
return (
<button
css={[STYLES_BUTTON_WARNING_DISABLED, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={type}
ref={ref}
{...props}
>
{children}
</button>
);
}
return ( return (
<button <button
css={[transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING, css]} css={[transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING, css]}
style={{ width: full ? "100%" : "auto", ...style }} style={{ width: full ? "100%" : "auto", ...style }}
type={type} type={type}
{...props} ref={ref}
>
<LoaderSpinner style={{ height: 16, width: 16, color: Constants.system.white }} />
</button>
);
}
if (type === "label") {
return (
<label
css={[transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={label}
{...props}
>
{children}
</label>
);
}
if (disabled) {
return (
<button
css={[STYLES_BUTTON_WARNING_DISABLED, css]}
style={{ width: full ? "100%" : "auto", ...style }}
type={type}
{...props} {...props}
> >
{children} {children}
</button> </button>
); );
} }
);
return ( export const ButtonWarningFull = React.forwardRef((props, ref) => {
<button return <ButtonWarning full ref={ref} {...props} />;
css={[transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING, css]} });
style={{ width: full ? "100%" : "auto", ...style }}
type={type}
{...props}
>
{children}
</button>
);
};
export const ButtonWarningFull = (props) => {
return <ButtonWarning full {...props} />;
};