mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-23 05:54:49 +03:00
feat(Buttons): forward ref
This commit is contained in:
Aminejv
parent
86e7aa6189
commit
fb2f6645cc
@ -2,10 +2,9 @@ import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
|
||||
const STYLES_BUTTON = `
|
||||
const STYLES_BUTTON = css`
|
||||
box-sizing: border-box;
|
||||
border-radius: 12px;
|
||||
outline: 0;
|
||||
@ -54,23 +53,15 @@ const STYLES_BUTTON_PRIMARY_TRANSPARENT = css`
|
||||
color: ${Constants.system.blue};
|
||||
`;
|
||||
|
||||
export const ButtonPrimary = ({
|
||||
children,
|
||||
css,
|
||||
style,
|
||||
full,
|
||||
transparent,
|
||||
loading,
|
||||
label,
|
||||
type,
|
||||
...props
|
||||
}) => {
|
||||
export const ButtonPrimary = React.forwardRef(
|
||||
({ children, css, style, full, transparent, loading, label, type, ...props }, ref) => {
|
||||
if (loading) {
|
||||
return (
|
||||
<button
|
||||
css={[transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={type}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
<LoaderSpinner style={{ height: 16, width: 16, color: Constants.system.white }} />
|
||||
@ -84,6 +75,7 @@ export const ButtonPrimary = ({
|
||||
css={[transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={label}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@ -96,6 +88,7 @@ export const ButtonPrimary = ({
|
||||
<a
|
||||
css={[transparent ? STYLES_BUTTON_PRIMARY_TRANSPARENT : STYLES_BUTTON_PRIMARY, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@ -109,6 +102,7 @@ export const ButtonPrimary = ({
|
||||
css={[STYLES_BUTTON_PRIMARY_DISABLED, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={type}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@ -126,11 +120,12 @@ export const ButtonPrimary = ({
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export const ButtonPrimaryFull = (props) => {
|
||||
return <ButtonPrimary full {...props} />;
|
||||
};
|
||||
export const ButtonPrimaryFull = React.forwardRef((props, ref) => {
|
||||
return <ButtonPrimary full ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
const STYLES_BUTTON_SECONDARY = css`
|
||||
${STYLES_BUTTON}
|
||||
@ -157,23 +152,15 @@ const STYLES_BUTTON_SECONDARY_TRANSPARENT = css`
|
||||
color: ${Constants.system.grayLight2};
|
||||
`;
|
||||
|
||||
export const ButtonSecondary = ({
|
||||
children,
|
||||
css,
|
||||
style,
|
||||
full,
|
||||
transparent,
|
||||
loading,
|
||||
label,
|
||||
type,
|
||||
...props
|
||||
}) => {
|
||||
export const ButtonSecondary = React.forwardRef(
|
||||
({ children, css, style, full, transparent, loading, label, type, ...props }, ref) => {
|
||||
if (loading) {
|
||||
return (
|
||||
<button
|
||||
css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={type}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
<LoaderSpinner style={{ height: 16, width: 16 }} />
|
||||
@ -187,6 +174,7 @@ export const ButtonSecondary = ({
|
||||
css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={label}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@ -199,6 +187,7 @@ export const ButtonSecondary = ({
|
||||
<a
|
||||
css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@ -211,12 +200,14 @@ export const ButtonSecondary = ({
|
||||
css={[transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={type}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export const ButtonSecondaryFull = (props) => {
|
||||
return <ButtonSecondary full {...props} />;
|
||||
@ -233,11 +224,6 @@ const STYLES_BUTTON_TERTIARY = css`
|
||||
:hover {
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_TERTIARY_TRANSPARENT = css`
|
||||
@ -248,23 +234,15 @@ const STYLES_BUTTON_TERTIARY_TRANSPARENT = css`
|
||||
color: ${Constants.system.grayLight2};
|
||||
`;
|
||||
|
||||
export const ButtonTertiary = ({
|
||||
children,
|
||||
css,
|
||||
style,
|
||||
full,
|
||||
transparent,
|
||||
loading,
|
||||
label,
|
||||
type,
|
||||
...props
|
||||
}) => {
|
||||
export const ButtonTertiary = React.forwardRef(
|
||||
({ children, css, style, full, transparent, loading, label, type, ...props }, ref) => {
|
||||
if (loading) {
|
||||
return (
|
||||
<button
|
||||
css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={type}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
<LoaderSpinner style={{ height: 16, width: 16 }} />
|
||||
@ -277,6 +255,7 @@ export const ButtonTertiary = ({
|
||||
<label
|
||||
css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@ -289,6 +268,7 @@ export const ButtonTertiary = ({
|
||||
<a
|
||||
css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@ -301,16 +281,18 @@ export const ButtonTertiary = ({
|
||||
css={[transparent ? STYLES_BUTTON_TERTIARY_TRANSPARENT : STYLES_BUTTON_TERTIARY, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={type}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export const ButtonTertiaryFull = (props) => {
|
||||
return <ButtonTertiary full {...props} />;
|
||||
};
|
||||
export const ButtonTertiaryFull = React.forwardRef((props, ref) => {
|
||||
return <ButtonTertiary full {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
const STYLES_BUTTON_DISABLED = css`
|
||||
${STYLES_BUTTON}
|
||||
@ -332,22 +314,25 @@ const STYLES_BUTTON_DISABLED_TRANSPARENT = css`
|
||||
color: ${Constants.system.gray};
|
||||
`;
|
||||
|
||||
export const ButtonDisabled = ({ children, css, style, full, label, ...props }) => {
|
||||
export const ButtonDisabled = React.forwardRef(
|
||||
({ children, css, style, full, label, ...props }, ref) => {
|
||||
return (
|
||||
<button
|
||||
css={[props.transparent ? STYLES_BUTTON_DISABLED_TRANSPARENT : STYLES_BUTTON_DISABLED, css]}
|
||||
type={label}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export const ButtonDisabledFull = (props) => {
|
||||
return <ButtonDisabled full {...props} />;
|
||||
};
|
||||
export const ButtonDisabledFull = React.forwardRef((props, ref) => {
|
||||
return <ButtonDisabled full ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
const STYLES_BUTTON_WARNING = css`
|
||||
${STYLES_BUTTON}
|
||||
@ -380,24 +365,15 @@ const STYLES_BUTTON_WARNING_TRANSPARENT = css`
|
||||
color: ${Constants.system.red};
|
||||
`;
|
||||
|
||||
export const ButtonWarning = ({
|
||||
children,
|
||||
css,
|
||||
style,
|
||||
full,
|
||||
transparent,
|
||||
type,
|
||||
disabled,
|
||||
loading,
|
||||
label,
|
||||
...props
|
||||
}) => {
|
||||
export const ButtonWarning = React.forwardRef(
|
||||
({ children, css, style, full, transparent, type, disabled, loading, label, ...props }, ref) => {
|
||||
if (loading) {
|
||||
return (
|
||||
<button
|
||||
css={[transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={type}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
<LoaderSpinner style={{ height: 16, width: 16, color: Constants.system.white }} />
|
||||
@ -411,6 +387,7 @@ export const ButtonWarning = ({
|
||||
css={[transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={label}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@ -424,6 +401,7 @@ export const ButtonWarning = ({
|
||||
css={[STYLES_BUTTON_WARNING_DISABLED, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={type}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@ -436,13 +414,15 @@ export const ButtonWarning = ({
|
||||
css={[transparent ? STYLES_BUTTON_WARNING_TRANSPARENT : STYLES_BUTTON_WARNING, css]}
|
||||
style={{ width: full ? "100%" : "auto", ...style }}
|
||||
type={type}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export const ButtonWarningFull = (props) => {
|
||||
return <ButtonWarning full {...props} />;
|
||||
};
|
||||
export const ButtonWarningFull = React.forwardRef((props, ref) => {
|
||||
return <ButtonWarning full ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user