feat: 完成初版的 ts 改造

aotuzuche · Jan 14, 2019 · a78fbfe · a78fbfe
1 parent 6be51ea
commit a78fbfe
Show file tree

Hide file tree

Showing 22 changed files with 761 additions and 447 deletions.
diff --git a/docs/src/mobile/timepicker/index.jsx b/docs/src/mobile/timepicker/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Popup } from 'auto-ui'
-import { TimePicker } from 'auto-ui/time-picker/index.jsx'
+import { TimePicker } from 'auto-ui/time-picker/index'
 
 class A extends React.Component {
   constructor(props) {

diff --git a/package.json b/package.json
@@ -2,8 +2,9 @@
   "name": "auto-ui",
   "version": "0.1.8",
   "description": "auto ui components",
-  "main": "lib/index.js",
-  "module": "es/index.js",
+  "main": "lib/index",
+  "typings": "lib/index",
+  "module": "es/index",
   "scripts": {
     "start": "cross-env NODE_ENV=development PACKAGE=development node scripts/start.js",
     "build": "cross-env NODE_ENV=production PACKAGE=production && node scripts/build.js",
@@ -34,7 +35,7 @@
     }
   },
   "dependencies": {
-    "auto-libs": "^0.0.6",
+    "auto-libs": "^0.0.7",
     "classnames": "^2.2.6",
     "iscroll": "^5.2.0",
     "react": "^16.3.2",

diff --git a/packages/__libs/dateFormat.js b/packages/__libs/dateFormat.js
@@ -1,42 +1,37 @@
+"use strict";
+/* tslint:disable */
 // 对Date的扩展，将 Date 转化为指定格式的String
 // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
 // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
 // 例子：
 // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
 // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
-if (!Date.prototype.formatWithWk) {
-  Date.prototype.formatWithWk = function (fmt) {
-    // author: meizz
-    let o = {
-      'M+': this.getMonth() + 1, // 月份
-      'd+': this.getDate(), // 日
-      'h+': this.getHours(), // 小时
-      'm+': this.getMinutes(), // 分
-      's+': this.getSeconds(), // 秒
-      'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
-      S: this.getMilliseconds() // 毫秒
-    }
-    if (/(y+)/.test(fmt)) {
-      fmt = fmt.replace(
-        RegExp.$1,
-        (String(this.getFullYear())).substr(4 - RegExp.$1.length)
-      )
-    }
-    if (/(wk)/.test(fmt)) {
-      const wks = '日一二三四五六'.split('')
-      fmt = fmt.replace(
-        RegExp.$1,
-        wks[this.getDay()]
-      )
-    }
-    for (let k in o) {
-      if (new RegExp('(' + k + ')').test(fmt)) {
-        fmt = fmt.replace(
-          RegExp.$1,
-          RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr((String(o[k])).length)
-        )
-      }
-    }
-    return fmt
-  }
-}
+if (!Date.prototype["formatWithWk"]) {
+    Date.prototype["formatWithWk"] = function (fmt) {
+        // author: meizz
+        var o = {
+            "M+": this.getMonth() + 1,
+            "d+": this.getDate(),
+            "h+": this.getHours(),
+            "m+": this.getMinutes(),
+            "s+": this.getSeconds(),
+            "q+": Math.floor((this.getMonth() + 3) / 3),
+            S: this.getMilliseconds() // 毫秒
+        };
+        if (/(y+)/.test(fmt)) {
+            fmt = fmt.replace(RegExp.$1, String(this.getFullYear()).substr(4 - RegExp.$1.length));
+        }
+        if (/(wk)/.test(fmt)) {
+            var wks = "日一二三四五六".split("");
+            fmt = fmt.replace(RegExp.$1, wks[this.getDay()]);
+        }
+        for (var k in o) {
+            if (new RegExp("(" + k + ")").test(fmt)) {
+                fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1
+                    ? o[k]
+                    : ("00" + o[k]).substr(String(o[k]).length));
+            }
+        }
+        return fmt;
+    };
+}
diff --git a/packages/__libs/dateFormat.ts b/packages/__libs/dateFormat.ts
@@ -0,0 +1,42 @@
+/* tslint:disable */
+// 对Date的扩展，将 Date 转化为指定格式的String
+// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
+// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
+// 例子：
+// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+if (!Date.prototype["formatWithWk"]) {
+  Date.prototype["formatWithWk"] = function(fmt: any) {
+    // author: meizz
+    let o = {
+      "M+": this.getMonth() + 1, // 月份
+      "d+": this.getDate(), // 日
+      "h+": this.getHours(), // 小时
+      "m+": this.getMinutes(), // 分
+      "s+": this.getSeconds(), // 秒
+      "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
+      S: this.getMilliseconds() // 毫秒
+    };
+    if (/(y+)/.test(fmt)) {
+      fmt = fmt.replace(
+        RegExp.$1,
+        String(this.getFullYear()).substr(4 - RegExp.$1.length)
+      );
+    }
+    if (/(wk)/.test(fmt)) {
+      const wks = "日一二三四五六".split("");
+      fmt = fmt.replace(RegExp.$1, wks[this.getDay()]);
+    }
+    for (let k in o) {
+      if (new RegExp("(" + k + ")").test(fmt)) {
+        fmt = fmt.replace(
+          RegExp.$1,
+          RegExp.$1.length === 1
+            ? o[k]
+            : ("00" + o[k]).substr(String(o[k]).length)
+        );
+      }
+    }
+    return fmt;
+  };
+}
diff --git a/packages/action-sheet/index.tsx b/packages/action-sheet/index.tsx
@@ -15,6 +15,7 @@ export interface ActionSheetProps {
     e: React.MouseEvent<HTMLDivElement> | React.MouseEvent<HTMLAnchorElement>
   ) => void
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  [otherProps: string]: any
 }
 
 export class ActionSheet extends React.Component<ActionSheetProps> {

diff --git a/packages/alert/style.scss b/packages/alert/style.scss
@@ -8,13 +8,13 @@
   width: 100%;
   height: 100%;
   z-index: 99996;
-  background: rgba(0,34,54,0.2);
+  background: rgba(0, 34, 54, 0.2);
   opacity: 0;
   transition: opacity 0.2s ease-out;
   &__inner {
     width: 580px;
     background: #fff;
-    box-shadow: 0 0 16px rgba(0,39,61,0.05);
+    box-shadow: 0 0 16px rgba(0, 39, 61, 0.05);
     border-radius: 6px;
     opacity: 0;
     transform-origin: 50%;
@@ -51,7 +51,7 @@
       font-size: 28px;
       color: #999;
       border-radius: 5px;
-      background: rgb(245,245,245);
+      background: rgb(245, 245, 245);
 
       &:not(:last-child) {
         margin-right: 20px;
@@ -60,28 +60,36 @@
         background: #00bb55;
         color: #fff;
         &:active {
-          background: #00bb55 - 10;
+          background: lighten(#00bb55, 10);
         }
       }
       &:active {
         opacity: 1;
-        background: rgb(235,235,235);
+        background: rgb(235, 235, 235);
       }
-
     }
   }
   &--show {
     opacity: 1;
     .x-alert__inner {
-      transform: scale(1,1);
+      transform: scale(1, 1);
       opacity: 1;
       animation: __x_alert_show 0.2s ease-out;
     }
     @at-root {
       @keyframes __x_alert_show {
-        0% { transform: scale(1.4,1.4); opacity: 0;}
-        75% { transform: scale(0.95,0.95); opacity: 1;}
-        100% { transform: scale(1,1); opacity: 1;}
+        0% {
+          transform: scale(1.4, 1.4);
+          opacity: 0;
+        }
+        75% {
+          transform: scale(0.95, 0.95);
+          opacity: 1;
+        }
+        100% {
+          transform: scale(1, 1);
+          opacity: 1;
+        }
       }
     }
   }
@@ -90,11 +98,8 @@
     transition: opacity 0.15s ease-out;
     pointer-events: none;
     .x-alert__inner {
-      transform: scale(0.95,0.95);
+      transform: scale(0.95, 0.95);
       transition: all 0.15s ease-out;
     }
   }
 }
-
-
-
diff --git a/packages/button/index.tsx b/packages/button/index.tsx
@@ -1,7 +1,7 @@
 import cn from 'classnames'
 import React, { FC, ReactNodeArray } from 'react'
-import { A } from '../a'
 import { Spin } from '../spin'
+import { Report } from '../utils'
 
 export interface ButtonProps {
   className?: string
@@ -38,7 +38,7 @@ export const Button: FC<ButtonProps> = props => {
   }
 
   return (
-    <A {...otherProps} className={css}>
+    <Report {...otherProps} className={css}>
       {!!loading && <Spin className="x-button__loading" />}
       {composeChildren.map((children, index) => {
         return (
@@ -47,6 +47,6 @@ export const Button: FC<ButtonProps> = props => {
           </p>
         )
       })}
-    </A>
+    </Report>
   )
 }
diff --git a/packages/button/style.scss b/packages/button/style.scss
@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
+  user-select: none;
   width: 100%;
   height: 90px;
   font-size: 30px;
@@ -30,14 +30,14 @@
     background: #00bb55;
     color: #fff;
     &:active {
-      background: #00bb55 - 10;
+      background: lighten(#00bb55, 10);
     }
   }
   &--danger {
     background: #ff5f4a;
     color: #fff;
     &:active {
-      background: #ff5f4a - 10;
+      background: lighten(#ff5f4a, 10);
     }
   }
   &--default {

diff --git a/packages/index.d.ts b/packages/index.d.ts
@@ -7,11 +7,12 @@ export * from './dialog';
 export * from './input';
 export * from './layout';
 export * from './loading';
-export * from './navbar';
+export * from './nav-bar';
 export * from './popup';
 export * from './radio';
 export * from './spin';
 export * from './switch';
 export * from './tabs';
+export * from './time-picker';
 export * from './toast';
 export * from './safe-area';
diff --git a/packages/index.js b/packages/index.js
@@ -12,50 +12,12 @@ __export(require("./dialog"));
 __export(require("./input"));
 __export(require("./layout"));
 __export(require("./loading"));
-__export(require("./navbar"));
+__export(require("./nav-bar"));
 __export(require("./popup"));
 __export(require("./radio"));
 __export(require("./spin"));
 __export(require("./switch"));
 __export(require("./tabs"));
-// export * from './time-picker'
+__export(require("./time-picker"));
 __export(require("./toast"));
 __export(require("./safe-area"));
-// export {
-//   A,
-//   ActionSheet,
-//   Alert,
-//   Button,
-//   Cell,
-//   Dialog,
-//   Input,
-//   Layout,
-//   Loading,
-//   NavBar,
-//   Popup,
-//   Radio,
-//   Spin,
-//   Switch,
-//   Tabs,
-//   TimePicker,
-//   Toast
-// }
-// export default {
-//   A,
-//   ActionSheet,
-//   Alert,
-//   Button,
-//   Cell,
-//   Dialog,
-//   Input,
-//   Layout,
-//   Loading,
-//   NavBar,
-//   Popup,
-//   Radio,
-//   Spin,
-//   Switch,
-//   Tabs,
-//   TimePicker,
-//   Toast
-// }
diff --git a/packages/index.ts b/packages/index.ts
@@ -13,6 +13,6 @@ export * from './radio'
 export * from './spin'
 export * from './switch'
 export * from './tabs'
-// export * from './time-picker'
+export * from './time-picker'
 export * from './toast'
 export * from './safe-area'
diff --git a/packages/input/style.scss b/packages/input/style.scss
@@ -41,7 +41,7 @@
   }
   &--disabled {
     .x-input__ipt {
-      background: #e6e6e6 + 20;
+      background: darken(#e6e6e6, 20);
     }
   }
   &.x-input--error {
@@ -50,7 +50,8 @@
       box-shadow: 0 0 10px rgba(255, 102, 0, 0.3);
     }
   }
-  &__addon-before, &__addon-after {
+  &__addon-before,
+  &__addon-after {
     display: flex;
     align-items: center;
     height: 100%;