From 92f7e2f8d1d434aa5022974766b7f0e2e62b70c1 Mon Sep 17 00:00:00 2001 From: Muhammad Fawwaz Orabi Date: Mon, 23 Jul 2018 18:48:39 +0300 Subject: [PATCH] Add types for react-aria-modal (#27228) * Add types for react-aria-modal * Bumpy min TS version * Trigger CI * Trigger CI --- types/react-aria-modal/index.d.ts | 170 ++++++++++++++++++ .../react-aria-modal-tests.tsx | 14 ++ types/react-aria-modal/tsconfig.json | 17 ++ types/react-aria-modal/tslint.json | 1 + 4 files changed, 202 insertions(+) create mode 100644 types/react-aria-modal/index.d.ts create mode 100644 types/react-aria-modal/react-aria-modal-tests.tsx create mode 100644 types/react-aria-modal/tsconfig.json create mode 100644 types/react-aria-modal/tslint.json diff --git a/types/react-aria-modal/index.d.ts b/types/react-aria-modal/index.d.ts new file mode 100644 index 0000000000..83ca6d3a34 --- /dev/null +++ b/types/react-aria-modal/index.d.ts @@ -0,0 +1,170 @@ +// Type definitions for react-aria-modal 2.12 +// Project: https://github.com/davidtheclark/react-aria-modal#readme +// Definitions by: forabi +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.6 + +import React = require('react'); + +export interface AriaModalProps { + /** + * If true, the modal will receive a role of alertdialog, + * instead of its default dialog. + */ + alert?: boolean; + + /** + * By default, the modal is active when mounted, deactivated when unmounted. + * However, you can also control its active/inactive state by changing + * its mounted property instead. + */ + mounted?: boolean; + + /** + * Provide your main application node here (which the modal should + * render outside of), and when the modal is open this application + * node will receive the attribute `aria-hidden="true"`. + * This can help screen readers understand what's going on. + */ + applicationNode?: Node | Element; + + /** + * Same as `applicationNode`, but a function that returns the node + * instead of the node itself. This can be useful or necessary in + * a variety of situations, one of which is server-side React + * rendering. The function will not be called until after the + * component mounts, so it is safe to use browser globals + * and refer to DOM nodes within it (e.g. `document.getElementById(..)`), + * without ruining your server-side rendering. + */ + getApplicationNode?(): Node | Element; + + /** + * By default, styles are applied inline to the dialog and underlay + * portions of the component. However, you can disable all inline + * styles by setting `includeDefaultStyles` to false. If set, you + * must specify all styles externally, including positioning. + * This is helpful if your project uses external CSS assets. + * + * _Note_: underlayStyle and dialogStyle can still be set inline, + * but these will be the only styles applied. + */ + includeDefaultStyles?: boolean; + + /** + * Apply a class to the dialog in order to custom-style it. + * + * Be aware that, _by default_, this module does apply various + * inline styles to the dialog element in order position it. + * To disable _all inline styles_, see `includeDefaultStyles`. + */ + dialogClass?: string; + + /** + * Choose your own id attribute for the dialog element. + * + * Default: `react-aria-modal-dialog`. + */ + dialogId?: string; + + /** + * Customize properties of the style prop that is passed to the dialog. + */ + dialogStyle?: React.CSSProperties; + + /** + * By default, when the modal activates its first focusable child will + * receive focus. However, if `focusDialog` is true, the dialog itself + * will receive initial focus — and that focus will be hidden. + * (This is essentially what Bootstrap does with their modal.) + */ + focusDialog?: boolean; + + /** + * By default, when the modal activates its first focusable child will + * receive focus. If, instead, you want to identify a specific element + * that should receive initial focus, pass a selector string to this + * prop. (That selector is passed to `document.querySelector()` to find + * the DOM node.) + */ + initialFocus?: string; + + /** + * A string to use as the modal's accessible title. This value is passed + * to the modal's `aria-label` attribute. You must use either `titleId` or + * `titleText`, but not both. + */ + titleText?: string; + + /** + * The `id` of the element that should be used as the modal's accessible + * title. This value is passed to the modal's `aria-labelledby` attribute. + * You must use either `titleId` or `titleText`, but not both. + */ + titleId?: string; + + /** + * Customize properties of the `style` prop that is passed to the underlay. + * The best way to add some vertical displacement to the dialog is to add + * top & bottom padding to the underlay. + * This is illustrated in the demo examples. + */ + underlayStyle?: React.CSSProperties; + + /** + * Apply a class to the underlay in order to custom-style it. + * This module does apply various inline styles, though, so be aware that + * overriding some styles might be difficult. If, for example, you want + * to change the underlay's color, you should probably use the + * `underlayColor` prop instead of a class. + * If you would rather control all CSS, see `includeDefaultStyles`. + */ + underlayClass?: string; + + /** + * By default, a click on the underlay will exit the modal. + * Pass `false`, and clicking on the underlay will do nothing. + */ + underlayClickExits?: boolean; + + /** + * By default, the Escape key exits the modal. Pass `false`, and it won't. + */ + escapeExits?: boolean; + + /** + * If you want to change the underlay's color, you can + * do that with this prop. If `false`, no background color will be + * applied with inline styles. Presumably you will apply then + * yourself via an `underlayClass`. + * + * Default: rgba(0,0,0,0.5) + */ + underlayColor?: string; + + /** + * If `true`, the modal's contents will be vertically (as well as horizontally) centered. + */ + verticallyCenter?: boolean; + + /** + * This function is called in the modal's `componentDidMount()` lifecycle method. + * You can use it to do whatever diverse and sundry things you feel like + * doing after the modal activates. + */ + onEnter?(): any; + + /** + * This function needs to handles the state change of exiting (or deactivating) the modal. + * Maybe it's just a wrapper around `setState()`; or maybe you use some more involved + * Flux-inspired state management — whatever the case, this module leaves the state + * management up to you instead of making assumptions. + * That also makes it easier to create your own "close modal" buttons; because you + * have the function that closes the modal right there, written by you, at your disposal. + */ + onExit(): any; +} + +export default class AriaModal extends React.PureComponent { + static renderTo(node: HTMLElement | string): void; +} diff --git a/types/react-aria-modal/react-aria-modal-tests.tsx b/types/react-aria-modal/react-aria-modal-tests.tsx new file mode 100644 index 0000000000..c8c9de62d4 --- /dev/null +++ b/types/react-aria-modal/react-aria-modal-tests.tsx @@ -0,0 +1,14 @@ +import AriaModal from 'react-aria-modal'; +import * as React from 'react'; +import { render } from 'react-dom'; + +declare const appContainer: HTMLElement; + +const onExit = () => {}; + +render( + + Hello world + , + appContainer +); diff --git a/types/react-aria-modal/tsconfig.json b/types/react-aria-modal/tsconfig.json new file mode 100644 index 0000000000..2dad722b56 --- /dev/null +++ b/types/react-aria-modal/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["es6", "dom"], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": ["../"], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "strictFunctionTypes": true, + "jsx": "react" + }, + "files": ["index.d.ts", "react-aria-modal-tests.tsx"] +} diff --git a/types/react-aria-modal/tslint.json b/types/react-aria-modal/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-aria-modal/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }