react-flag-icon-css (#27723)

* typing as per https://github.com/plotly/react-plotly.js/issues/80

* fix travis build (thanks intellij...)

* bring typescript version inline with react

* types for react-flag-icon-css

* review feedback, remove react-plotly.js changes from PR as already released

* attempt to fix travis

* life is too short to argue about this nonsense, switch spaces for tabs if you want

types/react-flag-icon-css/index.d.ts

@@ -0,0 +1,63 @@
+// Type definitions for react-flag-icon-css 1.0
+// Project: https://github.com/matteocng/react-flag-icon-css#readme
+// Definitions by: Jon Freedman <https://github.com/jonfreedman>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.6
+
+import * as CSS from 'csstype';
+import { PureComponent, ReactNode } from 'react';
+
+export type FlagIconSize = 'lg' | '2x' | '3x' | '4x' | '5x';
+export type FlagIconFlip = 'horizontal' | 'vertical';
+export type FlagIconRotate = 30 | 60 | 90 | 180 | 270;
+
+export interface FlagIconOptions {
+    /**
+     * Use CSS modules styles (your module bundler must be correctly setup).
+     */
+    useCssModules?: boolean;
+    /**
+     * An object literal whose keys are your custom codes.
+     */
+    customCodes?: {
+        [key: string]: string;
+    };
+    /**
+     * Set this if useCssModules is true and a) you want to apply styles to FlagIcon
+     * using .theme-base and/or b) you are using custom flags.
+     */
+    themeStyles?: {
+        [key: string]: CSS.Properties & CSS.PropertiesHyphen;
+    };
+}
+
+export interface FlagIconProps {
+    /**
+     * ISO 3166-1-alpha-2 code.
+     */
+    code: string;
+    size?: FlagIconSize;
+    flip?: FlagIconFlip;
+    rotate?: FlagIconRotate;
+    Component?: string;
+    /**
+     * 	Uses the 1x1 image if true.
+     */
+    squared?: boolean;
+    /**
+     * This is always appended as-is to class in the HTML.
+     */
+    className?: string;
+    /**
+     * This is mapped to a CSS module and appended to class in the HTML.
+     */
+    styleName?: string;
+    children?: ReactNode;
+}
+
+export class FlagIcon extends PureComponent<FlagIconProps> {
+}
+
+export default function FlagIconFactory(react: any, opts?: Readonly<FlagIconOptions>): (props: FlagIconProps) => FlagIcon;
+
+export function CustomFlagIconFactory(react: any, opts?: Readonly<FlagIconOptions>): (props: FlagIconProps) => FlagIcon;

types/react-flag-icon-css/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "csstype": "^2.2.0"
+  }
+}

types/react-flag-icon-css/react-flag-icon-css-tests.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import FlagIconFactory, { CustomFlagIconFactory, FlagIconSize } from 'react-flag-icon-css';
+
+const FlagIcon = FlagIconFactory(React, {useCssModules: false});
+
+/**
+ * based on https://github.com/matteocng/react-flag-icon-css#basic-usage
+ */
+interface SimpleFlagComponentProps {
+    code: string;
+    size: FlagIconSize;
+}
+
+export class SimpleFlagComponent extends React.PureComponent<SimpleFlagComponentProps> {
+    render() {
+        return (
+            <FlagIcon code={this.props.code} size={this.props.size}/>
+        );
+    }
+}
+
+const rootEL = document.getElementById('react-app') as HTMLElement;
+
+const appProps: SimpleFlagComponentProps = {
+    code: 'it',
+    size: '3x'
+};
+ReactDOM.render(<SimpleFlagComponent {...appProps} />, rootEL);
+
+/**
+ * based on https://github.com/matteocng/react-flag-icon-css#exampleCustomFlagsIndex
+ */
+const styles = {
+    ['.flag-icon-ex1']: {
+        'background-image': '../images/4x3/ex1.svg'
+    },
+    ['.flag-icon-ex1.flag-icon-squared']: {
+        'background-image': '../images/1x1/ex1.svg'
+    }
+};
+
+const codes = {
+    ex1: 'Example 1 country'
+};
+
+const optionsCssModules = {customCodes: codes, themeStyles: styles};
+const FlagIconCssModules = CustomFlagIconFactory(React, optionsCssModules);
+
+export class CustomFlagComponent extends React.PureComponent<SimpleFlagComponentProps> {
+    render() {
+        return (
+            <FlagIconCssModules code={this.props.code} size={this.props.size}/>
+        );
+    }
+}
+
+const appCustomProps: SimpleFlagComponentProps = {
+    code: 'ex1',
+    size: 'lg'
+};
+ReactDOM.render(<CustomFlagComponent {...appCustomProps} />, rootEL);
+
+/**
+ * based on 'props:children' test
+ */
+interface ChildrenFlagComponentProps {
+    code: string;
+    size: FlagIconSize;
+    children: React.ReactNode;
+}
+
+export class ChildrenFlagComponent extends React.PureComponent<ChildrenFlagComponentProps> {
+    render() {
+        return (
+            <FlagIcon code={this.props.code} size={this.props.size} children={this.props.children}/>
+        );
+    }
+}
+
+const appChildrenProps: ChildrenFlagComponentProps = {
+    code: 'ex1',
+    size: 'lg',
+    children: FlagIcon({
+        code: 'it'
+    })
+};
+ReactDOM.render(<ChildrenFlagComponent {...appChildrenProps} />, rootEL);

types/react-flag-icon-css/tsconfig.json

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

types/react-flag-icon-css/tslint.json

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