From 91bd73b20bd23adc419d02d0efdb4e63f0477e18 Mon Sep 17 00:00:00 2001 From: Federico Zivolo Date: Fri, 27 Apr 2018 18:00:11 +0200 Subject: [PATCH] feat: export some useful Flow types These types may be useful to consumers to better type their own code. This commit aims to get on pair with #153 --- .flowconfig | 1 + README.md | 7 +++++ package.json | 3 ++- src/Manager.js | 2 +- src/Popper.js | 27 ++++++++++--------- src/Reference.js | 5 ++-- src/__typings__/main-test.js | 52 ++++++++++++++++++++++++++++++++++++ src/index.js | 22 ++++++++++++++- typings/tests/main-test.tsx | 5 +++- yarn.lock | 4 +++ 10 files changed, 110 insertions(+), 18 deletions(-) create mode 100644 src/__typings__/main-test.js diff --git a/.flowconfig b/.flowconfig index 07d1bd6..3183a10 100644 --- a/.flowconfig +++ b/.flowconfig @@ -10,5 +10,6 @@ [lints] [options] +suppress_comment=\\(.\\|\n\\)*\\$FlowExpectError [strict] diff --git a/README.md b/README.md index 7f66c46..bace5a0 100644 --- a/README.md +++ b/README.md @@ -244,6 +244,13 @@ const Example = () => ( ); ``` +## Flow and TypeScript types + +This library is built with Flow but it supports TypeScript as well. + +You can find the exported Flow types in `src/index.js`, and the +TypeScript definitions in `typings/react-popper.d.ts`. + ## Running Locally #### clone repo diff --git a/package.json b/package.json index f357d1e..7340e01 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "build:clean": "rimraf dist/ && rimraf lib/", "build:es": "cross-env BABEL_ENV=es babel src --ignore '*.test.js,__mocks__' --out-dir lib/es", "build:cjs": "cross-env BABEL_ENV=cjs babel src --ignore '*.test.js,__mocks__' --out-dir lib/cjs", - "build:flow": "flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib/es", + "build:flow": "flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib/cjs", "demo:dev": "parcel --out-dir demo/dist demo/index.html", "demo:build": "parcel build --out-dir demo/dist demo/index.html --public-url=/react-popper", "demo:deploy": "yarn demo:build && gh-pages -d demo/dist", @@ -62,6 +62,7 @@ "create-react-context": "^0.2.1", "popper.js": "^1.14.1", "prop-types": "^15.6.1", + "typed-styles": "^0.0.5", "warning": "^3.0.0" }, "devDependencies": { diff --git a/src/Manager.js b/src/Manager.js index 0e12417..015bda9 100644 --- a/src/Manager.js +++ b/src/Manager.js @@ -7,7 +7,7 @@ export const ManagerContext: Context<{ referenceNode?: ?HTMLElement, }> = createContext({ getReferenceRef: undefined, referenceNode: undefined }); -type ManagerProps = { +export type ManagerProps = { children: Node, }; type ManagerState = { diff --git a/src/Popper.js b/src/Popper.js index daef541..551b51e 100644 --- a/src/Popper.js +++ b/src/Popper.js @@ -7,33 +7,36 @@ import PopperJS, { type Modifiers, type ReferenceObject, } from 'popper.js'; +import type { Style } from 'typed-styles'; import { ManagerContext } from './Manager'; import { unwrapArray } from './utils'; type getRefFn = (?HTMLElement) => void; -type Style = Object; - type ReferenceElement = ReferenceObject | HTMLElement | null; +type StyleOffsets = { top: number, left: number }; +type StylePosition = { position: 'absolute' | 'fixed' }; -type RenderProp = ({| +export type PopperArrowProps = { + ref: getRefFn, + style: StyleOffsets & Style, +}; +export type PopperChildrenProps = {| ref: getRefFn, - style: Style, - placement: ?Placement, + style: StyleOffsets & StylePosition & Style, + placement: Placement, outOfBoundaries: ?boolean, scheduleUpdate: () => void, - arrowProps: { - ref: getRefFn, - style: Style, - }, -|}) => Node; + arrowProps: PopperArrowProps, +|}; +export type PopperChildren = PopperChildrenProps => Node; -type PopperProps = { +export type PopperProps = { modifiers?: Modifiers, placement?: Placement, eventsEnabled?: boolean, positionFixed?: boolean, referenceElement?: ReferenceElement, - children: RenderProp, + children: PopperChildren, }; type PopperState = { diff --git a/src/Reference.js b/src/Reference.js index 4384b98..4b853fb 100644 --- a/src/Reference.js +++ b/src/Reference.js @@ -4,8 +4,9 @@ import warning from 'warning'; import { ManagerContext } from './Manager'; import { unwrapArray } from './utils'; -type ReferenceProps = { - children: ({ ref: (?HTMLElement) => void }) => Node, +export type ReferenceChildrenProps = { ref: (?HTMLElement) => void }; +export type ReferenceProps = { + children: ReferenceChildrenProps => Node, }; export default function Reference({ children }: ReferenceProps) { diff --git a/src/__typings__/main-test.js b/src/__typings__/main-test.js new file mode 100644 index 0000000..70963c4 --- /dev/null +++ b/src/__typings__/main-test.js @@ -0,0 +1,52 @@ +// @flow + +// Please remember to update also the TypeScript test files that can +// be found under `/typings/tests` please. Thanks! 🤗 + +import React from 'react'; +import { Manager, Reference, Popper } from '..'; + +export const Test = () => ( + + {/* $FlowExpectError: empty children */} + + {({ ref }) =>
} + + {({ + ref, + style, + placement, + outOfBoundaries, + scheduleUpdate, + arrowProps, + }) => ( +
scheduleUpdate()} + > + Popper +
+
+ )} + + + {({ ref, style, placement }) => ( +
+ Popper +
+ )} + + +); diff --git a/src/index.js b/src/index.js index 75d0e09..cf18284 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,26 @@ // @flow + +// Public components import Popper, { placements } from './Popper'; import Manager from './Manager'; import Reference from './Reference'; - export { Popper, placements, Manager, Reference }; + +// Public types +import type { Placement } from 'popper.js'; +import type { ManagerProps } from './Manager'; +import type { ReferenceProps, ReferenceChildrenProps } from './Reference'; +import type { + PopperChildrenProps, + PopperArrowProps, + PopperProps, +} from './Popper'; +export type { + Placement, + ManagerProps, + ReferenceProps, + ReferenceChildrenProps, + PopperChildrenProps, + PopperArrowProps, + PopperProps, +}; diff --git a/typings/tests/main-test.tsx b/typings/tests/main-test.tsx index a1c4b29..3035115 100644 --- a/typings/tests/main-test.tsx +++ b/typings/tests/main-test.tsx @@ -1,7 +1,10 @@ +// Please remember to update also the Flow test files that can +// be found under `/src/__typings__` please. Thanks! 🤗 + import * as React from 'react'; import { Manager, Reference, Popper } from '../..'; -const Test = () => ( +export const Test = () => ( {({ ref }) =>
}