From cf1553fb1574da4b373d5e725aed2d192f36cd97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Tue, 16 Apr 2019 21:12:40 +0800
Subject: [PATCH] Result finish

---
 ResultFail/src/Result/index.less              | 58 +++++++++++++++++++
 ResultFail/src/Result/index.tsx               | 41 +++++++++++++
 ResultFail/src/{index.js => index.tsx}        | 27 +++++----
 ResultFail/src/locales/{en-US.js => en-US.ts} |  0
 ResultFail/src/locales/{zh-CN.js => zh-CN.ts} |  0
 ResultFail/src/locales/{zh-TW.js => zh-TW.ts} |  0
 ResultSuccess/src/Result/index.less           | 58 +++++++++++++++++++
 ResultSuccess/src/Result/index.tsx            | 41 +++++++++++++
 ResultSuccess/src/{index.js => index.tsx}     | 27 +++++----
 .../src/locales/{en-US.js => en-US.ts}        |  0
 .../src/locales/{zh-CN.js => zh-CN.ts}        |  0
 .../src/locales/{zh-TW.js => zh-TW.ts}        |  0
 package.json                                  |  2 +-
 13 files changed, 229 insertions(+), 25 deletions(-)
 create mode 100644 ResultFail/src/Result/index.less
 create mode 100644 ResultFail/src/Result/index.tsx
 rename ResultFail/src/{index.js => index.tsx} (76%)
 rename ResultFail/src/locales/{en-US.js => en-US.ts} (100%)
 rename ResultFail/src/locales/{zh-CN.js => zh-CN.ts} (100%)
 rename ResultFail/src/locales/{zh-TW.js => zh-TW.ts} (100%)
 create mode 100644 ResultSuccess/src/Result/index.less
 create mode 100644 ResultSuccess/src/Result/index.tsx
 rename ResultSuccess/src/{index.js => index.tsx} (88%)
 rename ResultSuccess/src/locales/{en-US.js => en-US.ts} (100%)
 rename ResultSuccess/src/locales/{zh-CN.js => zh-CN.ts} (100%)
 rename ResultSuccess/src/locales/{zh-TW.js => zh-TW.ts} (100%)

diff --git a/ResultFail/src/Result/index.less b/ResultFail/src/Result/index.less
new file mode 100644
index 00000000..00c95879
--- /dev/null
+++ b/ResultFail/src/Result/index.less
@@ -0,0 +1,58 @@
+@import '~antd/lib/style/themes/default.less';
+
+.result {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  @media screen and (max-width: @screen-xs) {
+    width: 100%;
+  }
+
+  .icon {
+    margin-bottom: 24px;
+    font-size: 72px;
+    line-height: 72px;
+
+    & > .success {
+      color: @success-color;
+    }
+
+    & > .error {
+      color: @error-color;
+    }
+  }
+
+  .title {
+    margin-bottom: 16px;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .description {
+    margin-bottom: 24px;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: #fafafa;
+    border-radius: @border-radius-sm;
+
+    @media screen and (max-width: @screen-xs) {
+      padding: 18px 20px;
+    }
+  }
+
+  .actions {
+    margin-top: 32px;
+
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}
diff --git a/ResultFail/src/Result/index.tsx b/ResultFail/src/Result/index.tsx
new file mode 100644
index 00000000..63ba3ebc
--- /dev/null
+++ b/ResultFail/src/Result/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon } from 'antd';
+import styles from './index.less';
+
+export interface ResultProps {
+  actions?: React.ReactNode;
+  className?: string;
+  description?: React.ReactNode;
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+  type: 'success' | 'error';
+}
+
+const Result: React.SFC<ResultProps> = ({
+  className,
+  type,
+  title,
+  description,
+  extra,
+  actions,
+  ...restProps
+}) => {
+  const iconMap = {
+    error: <Icon className={styles.error} type="close-circle" theme="filled" />,
+    success: <Icon className={styles.success} type="check-circle" theme="filled" />,
+  };
+  const clsString = classNames(styles.result, className);
+  return (
+    <div className={clsString} {...restProps}>
+      <div className={styles.icon}>{iconMap[type]}</div>
+      <div className={styles.title}>{title}</div>
+      {description && <div className={styles.description}>{description}</div>}
+      {extra && <div className={styles.extra}>{extra}</div>}
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </div>
+  );
+};
+
+export default Result;
diff --git a/ResultFail/src/index.js b/ResultFail/src/index.tsx
similarity index 76%
rename from ResultFail/src/index.js
rename to ResultFail/src/index.tsx
index e5b77eb2..e410ba56 100644
--- a/ResultFail/src/index.js
+++ b/ResultFail/src/index.tsx
@@ -1,7 +1,8 @@
 import React, { Fragment } from 'react';
 import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Button, Icon, Card } from 'antd';
-import { Result } from 'ant-design-pro';
+import Result from './Result';
+import { GridContent } from '@ant-design/pro-layout';
 
 const extra = (
   <Fragment>
@@ -9,7 +10,7 @@ const extra = (
       style={{
         fontSize: 16,
         color: 'rgba(0, 0, 0, 0.85)',
-        fontWeight: '500',
+        fontWeight: 500,
         marginBottom: 16,
       }}
     >
@@ -50,14 +51,16 @@ const actions = (
 );
 
 export default () => (
-  <Card bordered={false}>
-    <Result
-      type="error"
-      title={formatMessage({ id: 'BLOCK_NAME.error.title' })}
-      description={formatMessage({ id: 'BLOCK_NAME.error.description' })}
-      extra={extra}
-      actions={actions}
-      style={{ marginTop: 48, marginBottom: 16 }}
-    />
-  </Card>
+  <GridContent>
+    <Card bordered={false}>
+      <Result
+        type="error"
+        title={formatMessage({ id: 'BLOCK_NAME.error.title' })}
+        description={formatMessage({ id: 'BLOCK_NAME.error.description' })}
+        extra={extra}
+        actions={actions}
+        style={{ marginTop: 48, marginBottom: 16 }}
+      />
+    </Card>
+  </GridContent>
 );
diff --git a/ResultFail/src/locales/en-US.js b/ResultFail/src/locales/en-US.ts
similarity index 100%
rename from ResultFail/src/locales/en-US.js
rename to ResultFail/src/locales/en-US.ts
diff --git a/ResultFail/src/locales/zh-CN.js b/ResultFail/src/locales/zh-CN.ts
similarity index 100%
rename from ResultFail/src/locales/zh-CN.js
rename to ResultFail/src/locales/zh-CN.ts
diff --git a/ResultFail/src/locales/zh-TW.js b/ResultFail/src/locales/zh-TW.ts
similarity index 100%
rename from ResultFail/src/locales/zh-TW.js
rename to ResultFail/src/locales/zh-TW.ts
diff --git a/ResultSuccess/src/Result/index.less b/ResultSuccess/src/Result/index.less
new file mode 100644
index 00000000..00c95879
--- /dev/null
+++ b/ResultSuccess/src/Result/index.less
@@ -0,0 +1,58 @@
+@import '~antd/lib/style/themes/default.less';
+
+.result {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  @media screen and (max-width: @screen-xs) {
+    width: 100%;
+  }
+
+  .icon {
+    margin-bottom: 24px;
+    font-size: 72px;
+    line-height: 72px;
+
+    & > .success {
+      color: @success-color;
+    }
+
+    & > .error {
+      color: @error-color;
+    }
+  }
+
+  .title {
+    margin-bottom: 16px;
+    color: @heading-color;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  .description {
+    margin-bottom: 24px;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: #fafafa;
+    border-radius: @border-radius-sm;
+
+    @media screen and (max-width: @screen-xs) {
+      padding: 18px 20px;
+    }
+  }
+
+  .actions {
+    margin-top: 32px;
+
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}
diff --git a/ResultSuccess/src/Result/index.tsx b/ResultSuccess/src/Result/index.tsx
new file mode 100644
index 00000000..63ba3ebc
--- /dev/null
+++ b/ResultSuccess/src/Result/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon } from 'antd';
+import styles from './index.less';
+
+export interface ResultProps {
+  actions?: React.ReactNode;
+  className?: string;
+  description?: React.ReactNode;
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+  title?: React.ReactNode;
+  type: 'success' | 'error';
+}
+
+const Result: React.SFC<ResultProps> = ({
+  className,
+  type,
+  title,
+  description,
+  extra,
+  actions,
+  ...restProps
+}) => {
+  const iconMap = {
+    error: <Icon className={styles.error} type="close-circle" theme="filled" />,
+    success: <Icon className={styles.success} type="check-circle" theme="filled" />,
+  };
+  const clsString = classNames(styles.result, className);
+  return (
+    <div className={clsString} {...restProps}>
+      <div className={styles.icon}>{iconMap[type]}</div>
+      <div className={styles.title}>{title}</div>
+      {description && <div className={styles.description}>{description}</div>}
+      {extra && <div className={styles.extra}>{extra}</div>}
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </div>
+  );
+};
+
+export default Result;
diff --git a/ResultSuccess/src/index.js b/ResultSuccess/src/index.tsx
similarity index 88%
rename from ResultSuccess/src/index.js
rename to ResultSuccess/src/index.tsx
index a15594e2..64dca84d 100644
--- a/ResultSuccess/src/index.js
+++ b/ResultSuccess/src/index.tsx
@@ -1,7 +1,8 @@
 import React, { Fragment } from 'react';
 import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
 import { Button, Row, Col, Icon, Steps, Card } from 'antd';
-import { Result } from 'ant-design-pro';
+import Result from './Result';
+import { GridContent } from '@ant-design/pro-layout';
 
 const { Step } = Steps;
 
@@ -43,7 +44,7 @@ const extra = (
       style={{
         fontSize: 16,
         color: 'rgba(0, 0, 0, 0.85)',
-        fontWeight: '500',
+        fontWeight: 500,
         marginBottom: 20,
       }}
     >
@@ -128,14 +129,16 @@ const actions = (
 );
 
 export default () => (
-  <Card bordered={false}>
-    <Result
-      type="success"
-      title={formatMessage({ id: 'BLOCK_NAME.success.title' })}
-      description={formatMessage({ id: 'BLOCK_NAME.success.description' })}
-      extra={extra}
-      actions={actions}
-      style={{ marginTop: 48, marginBottom: 16 }}
-    />
-  </Card>
+  <GridContent>
+    <Card bordered={false}>
+      <Result
+        type="success"
+        title={formatMessage({ id: 'BLOCK_NAME.success.title' })}
+        description={formatMessage({ id: 'BLOCK_NAME.success.description' })}
+        extra={extra}
+        actions={actions}
+        style={{ marginTop: 48, marginBottom: 16 }}
+      />
+    </Card>
+  </GridContent>
 );
diff --git a/ResultSuccess/src/locales/en-US.js b/ResultSuccess/src/locales/en-US.ts
similarity index 100%
rename from ResultSuccess/src/locales/en-US.js
rename to ResultSuccess/src/locales/en-US.ts
diff --git a/ResultSuccess/src/locales/zh-CN.js b/ResultSuccess/src/locales/zh-CN.ts
similarity index 100%
rename from ResultSuccess/src/locales/zh-CN.js
rename to ResultSuccess/src/locales/zh-CN.ts
diff --git a/ResultSuccess/src/locales/zh-TW.js b/ResultSuccess/src/locales/zh-TW.ts
similarity index 100%
rename from ResultSuccess/src/locales/zh-TW.js
rename to ResultSuccess/src/locales/zh-TW.ts
diff --git a/package.json b/package.json
index 23519829..09348154 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "dev": "cross-env PAGES_PATH='Monitor/src' umi dev",
+    "dev": "cross-env PAGES_PATH='ResultFail/src' umi dev",
     "lint:style": "stylelint \"src/**/*.less\" --syntax less",
     "lint": "eslint --ext .js src mock tests && npm run lint:style",
     "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
-- 
GitLab