diff --git a/types/react-flag-icon-css/index.d.ts b/types/react-flag-icon-css/index.d.ts new file mode 100644 index 0000000000..ad1777670a --- /dev/null +++ b/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 +// 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 { +} + +export default function FlagIconFactory(react: any, opts?: Readonly): (props: FlagIconProps) => FlagIcon; + +export function CustomFlagIconFactory(react: any, opts?: Readonly): (props: FlagIconProps) => FlagIcon; diff --git a/types/react-flag-icon-css/package.json b/types/react-flag-icon-css/package.json new file mode 100644 index 0000000000..e6696d08e7 --- /dev/null +++ b/types/react-flag-icon-css/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "csstype": "^2.2.0" + } +} diff --git a/types/react-flag-icon-css/react-flag-icon-css-tests.tsx b/types/react-flag-icon-css/react-flag-icon-css-tests.tsx new file mode 100644 index 0000000000..5b656cff7b --- /dev/null +++ b/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 { + render() { + return ( + + ); + } +} + +const rootEL = document.getElementById('react-app') as HTMLElement; + +const appProps: SimpleFlagComponentProps = { + code: 'it', + size: '3x' +}; +ReactDOM.render(, 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 { + render() { + return ( + + ); + } +} + +const appCustomProps: SimpleFlagComponentProps = { + code: 'ex1', + size: 'lg' +}; +ReactDOM.render(, rootEL); + +/** + * based on 'props:children' test + */ +interface ChildrenFlagComponentProps { + code: string; + size: FlagIconSize; + children: React.ReactNode; +} + +export class ChildrenFlagComponent extends React.PureComponent { + render() { + return ( + + ); + } +} + +const appChildrenProps: ChildrenFlagComponentProps = { + code: 'ex1', + size: 'lg', + children: FlagIcon({ + code: 'it' + }) +}; +ReactDOM.render(, rootEL); diff --git a/types/react-flag-icon-css/tsconfig.json b/types/react-flag-icon-css/tsconfig.json new file mode 100644 index 0000000000..ac4affcceb --- /dev/null +++ b/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" + ] +} diff --git a/types/react-flag-icon-css/tslint.json b/types/react-flag-icon-css/tslint.json new file mode 100644 index 0000000000..f93cf8562a --- /dev/null +++ b/types/react-flag-icon-css/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +}