feat(typescript): add type for props of glamorous component (#298)

paypal · Aug 23, 2017 · 51f70b2 · 51f70b2
1 parent f209187
commit 51f70b2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 2 deletions.
diff --git a/test/glamorous-exports.test.ts b/test/glamorous-exports.test.ts
@@ -5,6 +5,7 @@ import {
   SVGPropertiesCompleteSingle, SVGPropertiesComplete, SVGPropertiesLossy,
 
   GlamorousComponent,
+  GlamorousComponentProps,
   ExtraGlamorousProps,
   WithComponent,
   WithProps,
@@ -21,4 +22,4 @@ import {
   HTMLKey,
   SVGComponentFactory,
   SVGKey,
-} from '../'
+} from '../'
diff --git a/test/glamorous.test.tsx b/test/glamorous.test.tsx
@@ -5,7 +5,7 @@ import glamorous, {
 
 // Needed if generating definition files
 // https://github.com/Microsoft/TypeScript/issues/5938
-import { ExtraGlamorousProps } from "../";
+import { ExtraGlamorousProps, GlamorousComponentProps } from "../";
 
 import { WithComponent, WithProps, CSSPropertiesPseudo, CSSPropertiesLossy } from "../"
 
@@ -316,6 +316,21 @@ export const ThemeProviderAndThemedComponent = () => (
   </ThemeProvider>
 );
 
+// Glamorous component using general prop
+
+const props: GlamorousComponentProps<React.HTMLProps<HTMLButtonElement>> = {
+  name: 'button',
+  onClick: () => {}
+}
+
+const GlamorousButton = glamorous.button({
+  fontSize: '10px'
+})
+
+const UseGlamorousButtonWithGlamorousComponentProps = (
+  <GlamorousButton {...props} />
+)
+
 // Extended component with theme prop
 
 interface ExampleTheme {

diff --git a/typings/glamorous-component.d.ts b/typings/glamorous-component.d.ts
@@ -40,3 +40,14 @@ export type GlamorousComponent<ExternalProps, Props> =
   & React.ComponentClass<ExtraGlamorousProps & ExternalProps>
   & WithComponent<ExternalProps, Props>
   & WithProps<ExternalProps, Props>
+
+export type GlamorousComponentProps<ExternalProps> =
+  & JSX.IntrinsicAttributes
+  & JSX.IntrinsicClassAttributes<
+    React.Component<
+      ExtraGlamorousProps & ExternalProps,
+      React.ComponentState
+    >
+  >
+  & ExternalProps
+  & { children?: React.ReactNode }
diff --git a/typings/glamorous.d.ts b/typings/glamorous.d.ts
@@ -15,6 +15,7 @@ import {
 } from './built-in-component-factories'
 import {
   GlamorousComponent,
+  GlamorousComponentProps,
   ExtraGlamorousProps,
   WithComponent,
   WithProps,
@@ -54,6 +55,7 @@ export {
   SVGPropertiesCompleteSingle, SVGPropertiesComplete, SVGPropertiesLossy,
 
   GlamorousComponent,
+  GlamorousComponentProps,
   ExtraGlamorousProps,
   WithComponent,
   WithProps,