refactor type definitions

.jest.js

@@ -7,6 +7,7 @@ const transformIgnorePatterns = [
 
 module.exports = {
   setupFiles: [
+    'raf/polyfill',
     './tests/setup.js'
   ],
   moduleFileExtensions: [

components/_util/class.tsx

@@ -1,13 +1,12 @@
-
-export function hasClass(node, className) {
+export function hasClass(node: HTMLElement, className: string) {
   if (node.classList) {
     return node.classList.contains(className);
   }
   const originClass = node.className;
   return ` ${originClass} `.indexOf(` ${className} `) > -1;
 }
 
-export function addClass(node, className) {
+export function addClass(node: HTMLElement, className: string) {
   if (node.classList) {
     node.classList.add(className);
   } else {
@@ -17,7 +16,7 @@ export function addClass(node, className) {
   }
 }
 
-export function removeClass(node, className) {
+export function removeClass(node: HTMLElement, className: string) {
   if (node.classList) {
     node.classList.remove(className);
   } else {

components/_util/closest.tsx

@@ -1,10 +1,15 @@
-export default function closest(el, selector) {
-  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
-  while (el) {
-    if (matchesSelector.call(el, selector)) {
-      return el;
+export default function closest(el: Element, selector: string) {
+  const matchesSelector =
+    el.matches ||
+    el.webkitMatchesSelector ||
+    (el as any).mozMatchesSelector ||
+    el.msMatchesSelector;
+  let p: Element | null = el;
+  while (p) {
+    if (matchesSelector.call(p, selector)) {
+      return p;
     }
-    el = el.parentElement;
+    p = p.parentElement;
   }
   return null;
 }

components/_util/getDataAttr.tsx

@@ -1,6 +1,10 @@
-export default (props) => {
-  return Object.keys(props).reduce((prev, key) => {
-    if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
+export default (props: { [key: string]: any }) => {
+  return Object.keys(props).reduce<{ [key: string]: string }>((prev, key) => {
+    if (
+      key.substr(0, 5) === 'aria-' ||
+      key.substr(0, 5) === 'data-' ||
+      key === 'role'
+    ) {
       prev[key] = props[key];
     }
     return prev;

components/_util/getLocale.tsx

@@ -1,4 +1,9 @@
-export function getComponentLocale(props, context, componentName, getDefaultLocale) {
+export function getComponentLocale(
+  props: any,
+  context: any,
+  componentName: string,
+  getDefaultLocale: () => any,
+) {
   let locale: any = {};
   if (context && context.antLocale && context.antLocale[componentName]) {
     locale = context.antLocale[componentName];
@@ -27,7 +32,7 @@ export function getComponentLocale(props, context, componentName, getDefaultLoca
   return result;
 }
 
-export function getLocaleCode(context) {
+export function getLocaleCode(context: any) {
   const localeCode = context.antLocale && context.antLocale.locale;
   // Had use LocaleProvide but didn't set locale
   if (context.antLocale && context.antLocale.exist && !localeCode) {

components/_util/types.tsx

@@ -0,0 +1,6 @@
+// @see https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-307871458
+export type Diff<T extends string, U extends string> = ({ [P in T]: P } &
+  { [P in U]: never } & { [x: string]: never })[T];
+// get all from A except B*
+// type C = Omit<A,'B1'|'B2'>
+export type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;

components/_util/upgradeTip.tsx

@@ -1,3 +1,4 @@
+// tslint:disable
 if (
   typeof process !== 'undefined' &&
   process.env.NODE_ENV === 'development' &&
@@ -17,36 +18,37 @@ if (
         return `jsonp_${Date.now()}_${Math.ceil(Math.random() * 100000)}`;
       }
 
-      function clearFunction(functionName) {
+      function clearFunction(functionName: string) {
         // IE8 throws an exception when you try to delete a property on window
         // http://stackoverflow.com/a/1824228/751089
         try {
-          delete window[functionName];
+          delete (window as any)[functionName];
         } catch (e) {
-          window[functionName] = undefined;
+          (window as any)[functionName] = undefined;
         }
       }
 
-      function removeScript(scriptId) {
+      function removeScript(scriptId: string) {
         const script = document.getElementById(scriptId);
         if (script) {
           document.getElementsByTagName('head')[0].removeChild(script);
         }
       }
 
-      function fetchJsonp(_url, options: any = {}) {
+      function fetchJsonp(_url: string, options: any = {}) {
         // to avoid param reassign
         let url = _url;
         const timeout = options.timeout || defaultOptions.timeout;
-        const jsonpCallback = options.jsonpCallback || defaultOptions.jsonpCallback;
+        const jsonpCallback =
+          options.jsonpCallback || defaultOptions.jsonpCallback;
 
-        let timeoutId;
+        let timeoutId: number;
 
         return new Promise((resolve, reject) => {
-          const callbackFunction = options.jsonpCallbackFunction || generateCallbackFunction();
+          const callbackFunction =
+            options.jsonpCallbackFunction || generateCallbackFunction();
           const scriptId = `${jsonpCallback}_${callbackFunction}`;
-
-          window[callbackFunction] = (response) => {
+          (window as any)[callbackFunction] = (response: any) => {
             resolve({
               ok: true,
               // keep consistent with fetch API
@@ -63,10 +65,13 @@ if (
           };
 
           // Check if the user set their own params, and if not add a ? to start a list of params
-          url += (url.indexOf('?') === -1) ? '?' : '&';
+          url += url.indexOf('?') === -1 ? '?' : '&';
 
           const jsonpScript = document.createElement('script');
-          jsonpScript.setAttribute('src', `${url}${jsonpCallback}=${callbackFunction}`);
+          jsonpScript.setAttribute(
+            'src',
+            `${url}${jsonpCallback}=${callbackFunction}`
+          );
           if (options.charset) {
             jsonpScript.setAttribute('charset', options.charset);
           }
@@ -78,7 +83,7 @@ if (
 
             clearFunction(callbackFunction);
             removeScript(scriptId);
-            window[callbackFunction] = () => {
+            (window as any)[callbackFunction] = () => {
               clearFunction(callbackFunction);
             };
           }, timeout);
@@ -97,7 +102,8 @@ if (
       }
       //#endregion
 
-      const gateway = 'https://basement-gzone.alipay.com/mgw_proxy/unauthorized_endpoint';
+      const gateway =
+        'https://basement-gzone.alipay.com/mgw_proxy/unauthorized_endpoint';
       const params = {
         path: 'antd-mobile-upgrade-tip/upgrade-tip-h5data',
         'x-basement-operation': 'com.alipay.h5data.fengdie.get',
@@ -113,7 +119,7 @@ if (
             data = data.result.result;
           }
           let notice = '';
-          const tipComponents = data.filter(item => {
+          const tipComponents = data.filter((item: any) => {
             const key = item.name;
             if (key === '[notice]') {
               notice = item.tip;
@@ -144,7 +150,7 @@ if (
               '--------------------------------------------------------\n',
               '[antd-mobile-upgrade-tip] Notice:\n',
               `${notice}\n`,
-              '--------------------------------------------------------',
+              '--------------------------------------------------------'
             );
           }
 
@@ -153,20 +159,20 @@ if (
               '--------------------------------------------------------\n',
               '[antd-mobile-upgrade-tip] some components is expired:\n',
               '\n',
-              ...tipComponents
-                .map(newData => {
-                  const key = newData.name;
-                  return `${key}: ${localVersion[key]} => ${newData.version} ${newData.tip} ${newData.url}\n`;
-                }),
+              ...tipComponents.map((newData: any) => {
+                const key = newData.name;
+                return `${key}: ${localVersion[key]} => ${newData.version} ${
+                  newData.tip
+                } ${newData.url}\n`;
+              }),
               '\n',
               '[you can reinstall node_modules to upgrade all of them.]\n',
               '[about this] http://mobile.ant.design/docs/react/upgrade-tip-cn\n',
-              '--------------------------------------------------------',
+              '--------------------------------------------------------'
             );
           }
-        }).catch(() => { });
+        })
+        .catch(() => {});
     }
-  } catch (error) {
-
-  }
+  } catch (error) {}
 }

components/accordion/PropsType.tsx

@@ -1,8 +1,5 @@
-interface AccordionProps {
-  style?: any;
-  activeKey?: string | Array<string>;
-  defaultActiveKey?: string | Array<string>;
+export interface AccordionPropsTypes {
+  activeKey?: string | string[];
+  defaultActiveKey?: string | string[];
   onChange?: (x: any) => void;
 }
-
-export default AccordionProps;

components/accordion/demo/basic.native.tsx

@@ -1,10 +1,10 @@
 /* tslint:disable:no-console */
+import { Accordion, List } from 'antd-mobile';
 import React from 'react';
 import { View } from 'react-native';
-import { Accordion, List } from 'antd-mobile';
 
 export default class AccordionExmple extends React.Component<any, any> {
-  onChange = (key) => {
+  onChange = (key: string) => {
     console.log(key);
   }
   render() {
@@ -18,9 +18,12 @@ export default class AccordionExmple extends React.Component<any, any> {
               <List.Item>Content 3</List.Item>
             </List>
           </Accordion.Panel>
-          <Accordion.Panel header="Title 2">this is panel content2 or other</Accordion.Panel>
+          <Accordion.Panel header="Title 2">
+            this is panel content2 or other
+          </Accordion.Panel>
           <Accordion.Panel header="Title 3">
-            Text text text text text text text text text text text text text text text
+            Text text text text text text text text text text text text text
+            text text
           </Accordion.Panel>
         </Accordion>
       </View>

components/accordion/index.native.tsx

@@ -1,63 +1,74 @@
-/* tslint:disable:jsx-no-multiline-js */
+// tslint:disable:jsx-no-multiline-js
 import React from 'react';
-import { View, Text, Image } from 'react-native';
+import { Image, StyleProp, Text, View, ViewStyle } from 'react-native';
 import RNAccordion from 'react-native-collapsible/Accordion';
-import AccordionStyle, { IAccordionStyle } from './style/index.native';
-import AccordionProps from './PropsType';
+import { AccordionPropsTypes } from './PropsType';
+import AccordionStyles, { AccordionStyle } from './style/index.native';
 
 export interface AccordionPanelProps {
   key?: string;
   header: any;
 }
 
-export interface IAccordionNativeProps extends AccordionProps {
-  styles?: IAccordionStyle;
+export interface AccordionNativeProps extends AccordionPropsTypes {
+  styles?: AccordionStyle;
+  style?: StyleProp<ViewStyle>;
+}
+export interface AccordionHeader {
+  title: string;
+  content: React.ReactElement<any>;
+  style: StyleProp<ViewStyle>;
 }
-
 class AccordionPanel extends React.Component<AccordionPanelProps, any> {
   render() {
     return null;
   }
 }
 
-class Accordion extends React.Component<IAccordionNativeProps, any> {
+class Accordion extends React.Component<AccordionNativeProps, any> {
   static defaultProps = {
-    styles: AccordionStyle as any,
+    styles: AccordionStyles as any,
   };
 
   static Panel: any;
 
-  _renderHeader = (section, _, isActive) => {
+  renderHeader = (section: AccordionHeader, _: number, isActive: boolean) => {
     const styles = this.props.styles!;
     return (
       <View style={[styles.header, section.style]}>
-        {
-          React.isValidElement(section.title) ? section.title : (
-            <View style={styles.headerWrap}>
-              <Text style={styles.headerText}>{section.title}</Text>
-            </View>
-          )
-        }
+        {React.isValidElement(section.title) ? (
+          section.title
+        ) : (
+          <View style={styles.headerWrap}>
+            <Text style={styles.headerText}>{section.title}</Text>
+          </View>
+        )}
         <View style={styles.arrow}>
           <Image
-            source={isActive ? require('./style/assets/up.png') : require('./style/assets/down.png')}
+            source={
+              isActive
+                ? require('./style/assets/up.png')
+                : require('./style/assets/down.png')
+            }
             style={styles.arrow}
           />
         </View>
       </View>
     );
   }
 
-  _renderContent = (section) => {
+  renderContent = (section: AccordionHeader) => {
     const styles = this.props.styles!;
-    return React.isValidElement(section.content) ? section.content : (
+    return React.isValidElement(section.content) ? (
+      section.content
+    ) : (
       <View style={styles.content}>
         <Text style={styles.contentText}>{section.content}</Text>
       </View>
     );
   }
 
-  onChange = (idx) => {
+  onChange = (idx: number) => {
     const { onChange, children } = this.props;
     let key;
     React.Children.map(children, (child: any, index) => {
@@ -97,9 +108,9 @@ class Accordion extends React.Component<IAccordionNativeProps, any> {
           initiallyActiveSection={defaultActiveSection}
           activeSection={activeSection}
           underlayColor="transparent"
-          sections={headers}
-          renderHeader={this._renderHeader}
-          renderContent={this._renderContent}
+          sections={headers as any}
+          renderHeader={this.renderHeader}
+          renderContent={this.renderContent}
           duration={0}
           onChange={this.onChange}
         />

components/accordion/index.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
 import RcCollapse, { Panel } from 'rc-collapse';
-import BasePropsType from './PropsType';
+import React, { CSSProperties } from 'react';
+import { AccordionPropsTypes } from './PropsType';
 
-export interface AccordionProps extends BasePropsType {
+export interface AccordionProps extends AccordionPropsTypes {
   className?: string;
   prefixCls?: string;
   openAnimation?: any;
   accordion?: boolean;
+  style?: CSSProperties;
 }
 
 export default class Accordion extends React.Component<AccordionProps, any> {