From 1c798d98d3c0042c3aeddaabe2527baa84ffff18 Mon Sep 17 00:00:00 2001 From: Jan Zipfler Date: Mon, 23 Dec 2019 14:00:03 +0100 Subject: [PATCH 1/2] Create react-stonecutter.d.ts --- react-stonecutter.d.ts | 204 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 204 insertions(+) create mode 100644 react-stonecutter.d.ts diff --git a/react-stonecutter.d.ts b/react-stonecutter.d.ts new file mode 100644 index 0000000..d0fe4aa --- /dev/null +++ b/react-stonecutter.d.ts @@ -0,0 +1,204 @@ +declare module 'react-stonecutter' { + export type Coordinates = [number, number]; + export interface Layout { + /** + * an Array of [x, y] coordinate pairs like this: [[0, 0], [20, 0], [0, 30]] + */ + positions: Coordinates[]; + + /** + * width of the entire grid + */ + gridWidth: number; + + /** + * height of the entire grid + */ + gridHeight: number; + } + export type LengthUnit = 'px' | 'em' | 'rem'; + export type AngleUnit = 'deg'; + + export type Easing = string; + export interface Easings { + quadIn: Easing; + quadOut: Easing; + quadInOut: Easing; + cubicIn: Easing; + cubicOut: Easing; + cubicInOut: Easing; + quartIn: Easing; + quartOut: Easing; + quartInOut: Easing; + quintIn: Easing; + quintOut: Easing; + quintInOut: Easing; + sineIn: Easing; + sineOut: Easing; + sineInOut: Easing; + expoIn: Easing; + expoOut: Easing; + expoInOut: Easing; + circIn: Easing; + circOut: Easing; + circInOut: Easing; + backIn: Easing; + backOut: Easing; + backInOut: Easing; + } + + interface CommonGridProps { + /** + * Number of columns. Required. + * You can wrap the Grid component in the `makeResponsive` higher-order component to set this dynamically. + */ + columns: number; + + /** + * Width of a single column, by default in px units. Required. + */ + columnWidth: number; + + /** + * Width of space between columns. Default: 0. + */ + gutterWidth?: number; + + /** + * Height of vertical space between items. Default: 0. + */ + gutterHeight?: number; + + /** + * Change the HTML tagName of the Grid element, for example to 'ul' or 'ol' for a list. Default: 'div'. + */ + component?: string; + + /** + * Use one of the included layouts, or create your own. Defaults to a 'simple' layout with items of fixed height. + */ + layout?: LayoutFunction; + + /** + * These allow you to change how items animate as they appear and disappear from the grid. + * Supply functions that return objects with the opacity and transform values for an item's start and end states. + * By default the item's scale and opacity go from 0 to 1 and back to 0 on exit + */ + enter?(itemProps: unknown[], gridProps: unknown[], gridState: unknown): unknown; + entered?(itemProps: unknown[], gridProps: unknown[], gridState: unknown): unknown; + exit?(itemProps: unknown[], gridProps: unknown[], gridState: unknown): unknown; + + /** + * The perspective distance used for 3D transforms. + * If you are using a transform function like rotateX, use this to strengthen the effect. + * Default is no perspective applied. + */ + perspective?: number; + + /** + * The length unit used throughout. + * Default: 'px'. Experimental. + * You could try using 'em' or 'rem' and then adjust the font-size for a fluid layout, + * but it may not work well with the measureItems and makeResponsive higher-order components. + * `%` does not work well due to the way CSS transforms work. + */ + lengthUnit?: LengthUnit; + + /** + * The angle unit. Affects transform-functions such as rotate. Default: 'deg'. + */ + angleUnit?: AngleUnit; + } + + export interface SpringGridProps extends CommonGridProps { + /** + * Configuration of the React-Motion spring. + * See the React-Motion docs for more info. Default: { stiffness: 60, damping: 14, precision: 0.1 }. + */ + springConfig?: unknown; + } + + export interface CSSGridProps extends CommonGridProps { + /** + * Animation duration in ms. Required. + */ + duration: number; + + /** + * Animation easing function in CSS transition-timing-function format. + * Some Penner easings are included for convenience. + * Default: easings.cubicOut. + */ + easing?: Easing; + } + + export class SpringGrid extends React.Component {} + export class CSSGrid extends React.Component {} + + export interface MeasureItemsOptions { + /** + * If set to true, waits for images to load before measuring items and adding them to the Grid. + * This may be necessary if you don't know the height of your images ahead of time. + * Powered by imagesLoaded. + */ + measureImages: boolean; + + /** + * This option is passed through to the imagesLoaded library. + * It allows you to wait for background images to load, in addition to tags. + */ + background?: boolean | string; + } + + export function measureItems(grid: T, options?: MeasureItemsOptions): T; + + export interface MakeResponsiveOptions { + /** + * Maximum width for the Grid in px. + */ + maxWidth: number; + + /** + * Minimum horizontal length between the edge of the Grid and the edge of the viewport in px. Default: 0. + */ + minPadding?: number; + + /** + * Default number of columns before the breakpoints kick in. + * May be useful when rendering server-side in a universal app. + * Default: 4. + */ + defaultColumns?: number; + } + + export function makeResponsive(grid: T, options: MakeResponsiveOptions): T; + + export type LayoutFunction = (itemProps: unknown[], gridProps: unknown[]) => Layout; + export const layout: { + pinterest: LayoutFunction; + simple: LayoutFunction; + }; + + export const enterExitStyle: { + foldUp: unknown; + fromCenter: unknown; + fromLeftToRight: unknown; + fromTop: unknown; + fromBottom: unknown; + newspaper: unknown; + simple: unknown; + skew: unknown; + }; + + export const easings: Easings; + + export default { + CSSGrid, + SpringGrid, + measureItems, + makeResponsive, + easings, + layout, + enterExitStyle, + }; +} From 230a90baa3bbbc57fea278469cc1e363fecb9d57 Mon Sep 17 00:00:00 2001 From: Jan Zipfler Date: Mon, 23 Dec 2019 14:03:19 +0100 Subject: [PATCH 2/2] Add "types" to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 50204e4..45cdd7e 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "grid" ], "main": "lib/react-stonecutter.js", + "types": "types/react-stonecutter.d.ts", "scripts": { "start": "gulp", "gh-pages": "gulp gh-pages",