GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 08:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

FIX missing ref props by adding forwardRef

Browse Source
This commit is contained in:
Norbert de Langen 2019-07-13 13:00:45 +02:00
parent a28e8a1712
commit c83e81515b
2 changed files with 75 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
lib/components/src/Button/Button.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, forwardRef } from 'react';
import { styled, css } from '@storybook/theming';
import { darken, lighten, rgba, transparentize } from 'polished';
@ -233,13 +233,24 @@ export interface ButtonProps {
containsIcon?: boolean;
}
export const Button: FunctionComponent<ButtonProps> = ({ isLink, children, ...props }) => {
if (isLink) {
return <ButtonLink {...props}>{children}</ButtonLink>;
export const Button = Object.assign(
forwardRef<any, ButtonProps>(({ isLink, children, ...props }, ref) => {
if (isLink) {
return (
<ButtonLink {...props} ref={ref}>
{children}
</ButtonLink>
);
}
return (
<ButtonWrapper {...props} ref={ref}>
{children}
</ButtonWrapper>
);
}),
{
defaultProps: {
isLink: false,
},
}
return <ButtonWrapper {...props}>{children}</ButtonWrapper>;
};
Button.defaultProps = {
isLink: false,
};
);

83
lib/components/src/form/input/input.tsx
View File

@ -1,4 +1,4 @@
import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, forwardRef, Ref } from 'react';
import { styled, Theme, CSSObject } from '@storybook/theming';
import TextareaAutoResize from 'react-textarea-autosize';
@ -50,7 +50,7 @@ type ValidationStates = 'valid' | 'error' | 'warn';
export interface InputStyleProps {
size?: Sizes;
align?: Alignments;
validation?: ValidationStates;
valid?: ValidationStates;
}
const sizes = ({ size }: { size?: Sizes }): CSSObject => {
@ -102,36 +102,57 @@ const validation = ({ valid, theme }: { valid: ValidationStates; theme: Theme })
}
};
export const Input = styled(({ size, valid, align, ...props }) => <input {...props} />)<
InputStyleProps
>({} as any, styles, sizes, alignment, validation, {
minHeight: 32,
});
export const Input = Object.assign(
styled(
forwardRef<any, InputStyleProps>(({ size, valid, align, ...props }, ref) => (
<input {...props} ref={ref} />
))
)<InputStyleProps>(styles, sizes, alignment, validation, {
minHeight: 32,
}),
{
displayName: 'Input',
}
);
// (Input).styles = { ...styleResets, ...styles };
// (Input).sizes = sizes;
// (Input).alignment = alignment;
Input.displayName = 'Input';
export const Select = styled(({ size, valid, align, ...props }) => <select {...props} />)<
InputStyleProps
>(styles, sizes, validation, {
height: 32,
userSelect: 'none',
paddingRight: 20,
appearance: 'menulist',
});
Select.displayName = 'Select';
export const Select = Object.assign(
styled(
forwardRef<any, InputStyleProps>(({ size, valid, align, ...props }, ref) => (
<select {...props} ref={ref} />
))
)<InputStyleProps>(styles, sizes, validation, {
height: 32,
userSelect: 'none',
paddingRight: 20,
appearance: 'menulist',
}),
{
displayName: 'Select',
}
);
export const Textarea = styled(({ size, valid, align, ...props }) => (
<TextareaAutoResize {...props} />
))<InputStyleProps>(styles, sizes, alignment, validation, {
overflow: 'visible',
});
Textarea.displayName = 'Textarea';
export const Textarea = Object.assign(
styled(
forwardRef<any, InputStyleProps>(({ size, valid, align, ...props }, ref) => (
<TextareaAutoResize {...props} ref={ref} />
))
)<InputStyleProps>(styles, sizes, alignment, validation, {
overflow: 'visible',
}),
{
displayName: 'Textarea',
}
);
const ButtonStyled = styled(({ size, valid, align, ...props }) => <StyledButton {...props} />)<
InputStyleProps
>(sizes, validation, {
const ButtonStyled = styled(
forwardRef<any, InputStyleProps>(({ size, valid, align, ...props }, ref) => (
<StyledButton {...props} ref={ref} />
))
)<InputStyleProps>(sizes, validation, {
// Custom styling for color widget nested in buttons
userSelect: 'none',
overflow: 'visible',
@ -143,7 +164,11 @@ const ButtonStyled = styled(({ size, valid, align, ...props }) => <StyledButton
},
});
export const Button: FunctionComponent<any> = props => (
<ButtonStyled {...props} {...{ tertiary: true, small: true, inForm: true }} />
export const Button: FunctionComponent<any> = Object.assign(
forwardRef<{}, {}>((props, ref) => (
<ButtonStyled {...props} {...{ tertiary: true, small: true, inForm: true }} ref={ref} />
)),
{
displayName: 'Button',
}
);
Button.displayName = 'Button';