styled-components 3.3.2 → 3.3.3

package/typings/tests/themed-tests/issue1068.tsx

@@ -4,6 +4,9 @@ import styled, { MyTheme } from "./mytheme-styled-components";
 interface OptionalProps {
     text?: string;
 }
+interface IndexedProps {
+    [prop: string]: any;
+}
 interface ThemedOptionalProps extends OptionalProps {
     theme: MyTheme;
 }
@@ -13,6 +16,13 @@ interface RequiredProps {
 interface ThemedRequiredProps extends RequiredProps {
     theme: MyTheme;
 }
+interface IndexedAndRequiredProps extends IndexedProps, RequiredProps { }
+interface ThemedIndexedProps extends IndexedProps {
+    theme: MyTheme;
+}
+interface ThemedIndexedAndRequiredProps extends IndexedProps, RequiredProps {
+    theme: MyTheme;
+}
 
 declare const theme: MyTheme;
 
@@ -79,6 +89,85 @@ function statelessFunctionalComponents() {
         <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
     }
 
+    function indexedProps() {
+        const Component = (props: IndexedProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />; // text is optional through index signature
+        <Component text="test" />; // text is allowed through index signature
+        <StyledComponent />; // text is optional through index signature
+        <StyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent />; // text is optional through index signature
+        <StyledStyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function indexedAndRequiredProps() {
+        const Component = (props: IndexedAndRequiredProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text is required
+        <Component text="test" />; // text is required
+        <Component text="test" foo="bar" />; // text is required; foo is allowed through index signature
+        // <StyledComponent />; // text is required
+        // <StyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required
+        // <StyledStyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" />; // text is required; theme is optional
+        <StyledStyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledStyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+    }
+
+    function indexedPropsWithRequiredTheme() {
+        const Component = (props: ThemedIndexedProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+
+        // <Component />; // theme is required
+        <Component theme={theme} />; // theme is required
+        <Component foo="bar" theme={theme} />; // theme is required; foo is indexed prop
+        <StyledComponent />; // theme is optional
+        <StyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+        <StyledStyledComponent />; // theme is optional
+        <StyledStyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledStyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+    }
+
+    function indexedAndRequiredPropsWithRequiredTheme() {
+        const Component = (props: ThemedIndexedAndRequiredProps) => <div>{props.text}</div>;
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text and theme are required
+        // <Component text="test" />; // theme is required
+        // <Component text="test" foo="bar" />; theme is required
+        <Component text="foo" theme={theme} />; // text is required; theme is required
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is required
+        // <StyledComponent />; // text is required; theme is optional
+        // <StyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; theme is optional; foo is indexed
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required; theme is optional
+        // <StyledStyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledStyledComponent text="test" />; // text is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
 }
 
 // Tests of pure components
@@ -151,6 +240,94 @@ function pureComponents() {
         <StyledStyledComponent text="test" />; // theme is optional
         <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
     }
+
+    function indexedProps() {
+        class Component extends React.PureComponent<IndexedProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />; // text is optional through index signature
+        <Component text="test" />; // text is allowed through index signature
+        <StyledComponent />; // text is optional through index signature
+        <StyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent />; // text is optional through index signature
+        <StyledStyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function indexedAndRequiredProps() {
+        class Component extends React.PureComponent<IndexedAndRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text is required
+        <Component text="test" />; // text is required
+        <Component text="test" foo="bar" />; // text is required; foo is allowed through index signature
+        // <StyledComponent />; // text is required
+        // <StyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required
+        // <StyledStyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" />; // text is required; theme is optional
+        <StyledStyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledStyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+    }
+
+    function indexedPropsWithRequiredTheme() {
+        class Component extends React.PureComponent<ThemedIndexedProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+
+        // <Component />; // theme is required
+        <Component theme={theme} />; // theme is required
+        <Component foo="bar" theme={theme} />; // theme is required; foo is indexed prop
+        <StyledComponent />; // theme is optional
+        <StyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+        <StyledStyledComponent />; // theme is optional
+        <StyledStyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledStyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+    }
+
+    function indexedAndRequiredPropsWithRequiredTheme() {
+        class Component extends React.PureComponent<ThemedIndexedAndRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text and theme are required
+        // <Component text="test" />; // theme is required
+        // <Component text="test" foo="bar" />; theme is required
+        <Component text="foo" theme={theme} />; // text is required; theme is required
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is required
+        // <StyledComponent />; // text is required; theme is optional
+        // <StyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; theme is optional; foo is indexed
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required; theme is optional
+        // <StyledStyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledStyledComponent text="test" />; // text is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
 }
 
 // Tests of classic components
@@ -223,4 +400,92 @@ function classicComponents() {
         <StyledStyledComponent text="test" />; // theme is optional
         <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
     }
+
+    function indexedProps() {
+        class Component extends React.Component<IndexedProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        <Component />; // text is optional through index signature
+        <Component text="test" />; // text is allowed through index signature
+        <StyledComponent />; // text is optional through index signature
+        <StyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledComponent text="test" theme={theme} />; // theme is allowed
+        <StyledStyledComponent />; // text is optional through index signature
+        <StyledStyledComponent text="test" />; // text is allowed through index signature; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
+
+    function indexedAndRequiredProps() {
+        class Component extends React.Component<IndexedAndRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text is required
+        <Component text="test" />; // text is required
+        <Component text="test" foo="bar" />; // text is required; foo is allowed through index signature
+        // <StyledComponent />; // text is required
+        // <StyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required
+        // <StyledStyledComponent foo="bar"/>; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" />; // text is required; theme is optional
+        <StyledStyledComponent text="test" foo="bar" />; // text is required; foo is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <StyledStyledComponent text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+    }
+
+    function indexedPropsWithRequiredTheme() {
+        class Component extends React.Component<ThemedIndexedProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+
+        // <Component />; // theme is required
+        <Component theme={theme} />; // theme is required
+        <Component foo="bar" theme={theme} />; // theme is required; foo is indexed prop
+        <StyledComponent />; // theme is optional
+        <StyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+        <StyledStyledComponent />; // theme is optional
+        <StyledStyledComponent foo="bar" />; // theme is optional; foo is indexed prop
+        <StyledStyledComponent foo="bar" theme={theme} />; // theme is allowed; foo is indexed prop
+    }
+
+    function indexedAndRequiredPropsWithRequiredTheme() {
+        class Component extends React.Component<ThemedIndexedAndRequiredProps> {
+            render() { return <div>{this.props.text}</div>; }
+        }
+
+        const StyledComponent = styled(Component)``;
+        const StyledStyledComponent = styled(StyledComponent)``;
+
+        // <Component />; // text and theme are required
+        // <Component text="test" />; // theme is required
+        // <Component text="test" foo="bar" />; theme is required
+        <Component text="foo" theme={theme} />; // text is required; theme is required
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is required
+        // <StyledComponent />; // text is required; theme is optional
+        // <StyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledComponent text="test" />; // text is required; theme is optional
+        <StyledComponent text="test" foo="bar" />; // text is required; theme is optional; foo is indexed
+        <StyledComponent text="test" theme={theme} />; // text is required; theme is allowed
+        <Component text="test" foo="bar" theme={theme} />; // text is required; foo is indexed; theme is allowed
+        // <StyledStyledComponent />; // text is required; theme is optional
+        // <StyledStyledComponent foo="bar"/>; // text is required; theme is optional
+        <StyledStyledComponent text="test" />; // text is indexed; theme is optional
+        <StyledStyledComponent text="test" theme={theme} />; // theme is allowed
+    }
 }