Merge pull request #26155 from UrbanDoor/react-sticky-el

Add definitions for `react-sticky-el`

types/react-sticky-el/index.d.ts

@@ -0,0 +1,134 @@
+// Type definitions for react-sticky-el 1.0
+// Project: https://github.com/gm0t/react-sticky-el
+// Definitions by: Justin Braithwaite <https://github.com/jbraithwaite>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.6
+
+import * as React from "react";
+
+export default Sticky;
+
+declare class Sticky extends React.Component<Sticky.Props> {}
+
+declare namespace Sticky {
+    interface Props<HolderProps extends object = {}>
+        extends React.HTMLAttributes<HTMLElement> {
+        /**
+         * 'top' or 'bottom' - to which side element should stick.
+         *
+         * Defaults to 'top'.
+         */
+        mode?: "top" | "bottom";
+
+        /**
+         * Allows you to disable sticking by setting this prop to `true`.
+         *
+         * Defaults to `false`.
+         */
+        disabled?: boolean;
+
+        /**
+         * This handler will be called right before changing `fixed` state.
+         *
+         * Defaults to `null`.
+         */
+        onFixedToggle?: (fixed: boolean) => void;
+
+        /**
+         * Anything that can be used by `React.createElement`. Used for `wrapper
+         * element`. If you want to use some custom component, please be sure that
+         * you don't lose `style` and `className` props.
+         *
+         * Defaults to 'div'.
+         */
+        wrapperCmp?: keyof React.ReactHTML | React.ReactElement<any>;
+
+        /**
+         * Anything that can be used by React.createElement. Used for holder
+         * element. If you want to use some custom component, please be sure that
+         * you don't lose style and className props.
+         *
+         * Defaults to 'div'.
+         */
+        holderCmp?: keyof React.ReactHTML | React.ReactElement<HolderProps>;
+
+        /**
+         * These props will be used to create `holderElement`.
+         */
+        holderProps?: HolderProps;
+
+        /**
+         * Selector to define a `boundaryElement`. It should be one of the parents
+         * of the current element.
+         *
+         * Defaults to `null`.
+         */
+        boundaryElement?: string;
+
+        /**
+         * Selector to define a `scrollElement`. All position checks will be
+         * performed according to this element, also it will be listened for
+         * 'scroll' event.
+         *
+         * It should be one of the parents of the current element. Possible
+         * selectors: 'body', 'window', '#{id}', anything suitable for
+         * `Element.matches`.
+         *
+         * Defaults to `window`.
+         */
+        scrollElement?: string;
+
+        /**
+         * If your DOM structure is mutating (you are adding/removing elements), it
+         * will be usefull to provide `positionRecheckInterval` greater than zero,
+         * in this case position check will be also performed using setInterval in
+         * addition to scroll events.
+         *
+         * Defaults to `0`.
+         */
+        positionRecheckInterval?: number;
+
+        /**
+         * In the event that you wish to override the style rules applied, simply
+         * pass in the style object as a prop.
+         *
+         * Note: You likely want to avoid messing with the following attributes in
+         * your stickyStyle: `left`, `top`, and `width`.
+         */
+        stickyStyle?: React.CSSProperties;
+
+        /**
+         * You can also specify a class name to be applied when the element becomes
+         * sticky.
+         *
+         * Defaults to 'sticky'.
+         */
+        stickyClassName?: string;
+
+        /**
+         * Sticky state will be triggered when the top of the element is `topOffset`
+         * pixels from the top of the `scrollElement`. Positive numbers give the
+         * impression of a lazy sticky state, whereas negative numbers are more
+         * eager in their attachment.
+         *
+         * Defaults to `0`.
+         */
+        topOffset?: number;
+
+        /**
+         * Sticky state will be triggered when the bottom of the element is
+         * `bottomOffset` pixels from the bottom of the `scrollElement`.
+         *
+         * Defaults to `0`.
+         */
+        bottomOffset?: number;
+
+        /**
+         * If `false` then boundaryEl should have position: relative. In this case
+         * sticky element won't disappear on reaching it's boundaries.
+         *
+         * Defaults to `true`.
+         */
+        hideOnBoundaryHit?: boolean;
+    }
+}

types/react-sticky-el/react-sticky-el-tests.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import Sticky from "react-sticky-el";
+
+const StickyBasic = () => <Sticky />;
+const StickyAllFeatures = () => (
+    <Sticky
+        mode="bottom"
+        disabled
+        onFixedToggle={fixed => fixed}
+        wrapperCmp="div"
+        holderCmp={<div />}
+        holderProps={{ title: "a title" }}
+        boundaryElement=".an-element"
+        scrollElement=".another-element"
+        positionRecheckInterval={0}
+        stickyStyle={{ display: "block" }}
+        stickyClassName="sticky"
+        topOffset={0}
+        bottomOffset={0}
+        hideOnBoundaryHit
+        children="a child"
+    />
+);

types/react-sticky-el/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["es6"],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "jsx": "react",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": ["index.d.ts", "react-sticky-el-tests.tsx"]
+}

types/react-sticky-el/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }