dev: init build logic

.babelrc

@@ -0,0 +1,19 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "style": true,   // or 'css'
+        "libraryDirectory": "es"
+      }
+    ],
+    "@babel/plugin-proposal-class-properties"
+    // "@babel/plugin-proposal-export-default-from"
+  ]
+}

config-overrides.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const path = require('path');
+
+const rootPath = fs.realpathSync(process.cwd());
+const srcPath = path.resolve(rootPath, )
+
+module.exports = function override(config, env) {
+  console.log('config: ', config);
+  console.log('env: ', env);
+  config.resolve.extensions = ['.js', '.jsx', '.ts', '.tsx', '.less', '.json'];
+  config.resolve.alias = {
+    '@': srcPath,
+    '@components': `${srcPath}srcPath/components`,
+  };
+  config.module.rules.push({
+    test: /\.less$/,
+    use: [
+    'style-loader', 
+    {
+      loader: 'css-loader',// translates CSS into CommonJS
+      options: {
+        modules: {
+          localIdentName: '[name]__[local]___[hash:base64:5]',
+        },
+      }
+    },
+    'postcss-loader',
+    {
+      loader: 'less-loader',
+      options: {
+        javascriptEnabled: true,
+      },
+    }],
+    exclude: /node_modules|antd\.less/,
+  });
+  return config;
+}

lib/Common/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../style-inject.es-c386372b.js');
+require('react');
+var test = require('../test-dadf718e.js');
+
+
+
+exports.Test = test.Test;
+//# sourceMappingURL=index.js.map

lib/Common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

lib/Payment/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../style-inject.es-c386372b.js');
+require('react');
+var index = require('../index-c6999c10.js');
+require('antd/es/input/style');
+require('antd/es/input');
+require('antd/es/button/style');
+require('antd/es/button');
+
+
+
+exports.ConsumeListView = index.ConsumeListView;
+exports.PayPlatformOptions = index.PayPlatformOptions;
+exports.PriceOptions = index.PriceOptions;
+exports.WaitPayInfoView = index.WaitPayInfoView;
+//# sourceMappingURL=index.js.map

lib/Payment/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

lib/index.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./style-inject.es-c386372b.js');
+require('react');
+require('./test-dadf718e.js');
+var index = require('./index-c6999c10.js');
+require('antd/es/input/style');
+require('antd/es/input');
+require('antd/es/button/style');
+require('antd/es/button');
+
+// type TransmitImgTxtData = {
+//   user_id?: string|number;
+//   anonymity?: boolean;
+//   avatar?: string;
+//   nickname?: string;
+//   is_long?: boolean;
+// }
+// interface TransmitCardProps {
+//   type: TransmitType;
+//   data: TransmitImgTxtData;
+// }
+// export class TransmitCard extends React.PureComponent<TransmitCardProps, {}> {
+//   renderVideo() {
+//     return <div className={styles.transmitVideoCard}>Video</div>;
+//   }
+//   renderImgTxt() {
+//     const { data } = this.props;
+//     const {
+//       user_id,
+//       anonymity,
+//       avatar,
+//       nickname,
+//       is_long,
+//     } = data;
+//     return (
+//       <div className={styles.transmitImgTxtCard}>
+//         <div className={styles.header}>
+//           <UserLink user_id={user_id} anonymity={anonymity}>
+//             <Avatar
+//               id={user_id}
+//               image={avatar}
+//               follow={false}
+//               size="cover"
+//               className={styles.ava}
+//               anonymity={anonymity}
+//             />
+//           </UserLink>
+//           <div className={styles.nickname}>
+//             <UserLink user_id={user_id} anonymity={anonymity}>
+//               {nickname}
+//             </UserLink>
+//           </div>
+//           <div className={styles.type}>
+//             {is_long
+//               ? intl.get('bilingually.imgtxt.article')
+//               : intl.get('bilingually.imgtxt')}
+//           </div>
+//         </div>
+//       </div>
+//     );
+//   }
+//   render() {
+//     const { type } = this.props;
+//     if (type === 'imgTxt') {
+//       this.renderImgTxt();
+//     }
+//     if (type === 'shortVideo' || type === 'microVideo') {
+//       this.renderVideo();
+//     }
+//     return null;
+//   }
+// }
+
+var Test = "TestComponent";
+
+exports.ConsumeListView = index.ConsumeListView;
+exports.PayPlatformOptions = index.PayPlatformOptions;
+exports.PriceOptions = index.PriceOptions;
+exports.WaitPayInfoView = index.WaitPayInfoView;
+exports.Test = Test;
+//# sourceMappingURL=index.js.map

lib/style-inject.es-c386372b.js

@@ -0,0 +1,227 @@
+'use strict';
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+    return;
+  }
+
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+}
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function unwrapExports (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var classnames = createCommonjsModule(function (module) {
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames () {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg) && arg.length) {
+				var inner = classNames.apply(null, arg);
+				if (inner) {
+					classes.push(inner);
+				}
+			} else if (argType === 'object') {
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if ( module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+});
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+exports._classCallCheck = _classCallCheck;
+exports._createClass = _createClass;
+exports._defineProperty = _defineProperty;
+exports._getPrototypeOf = _getPrototypeOf;
+exports._inherits = _inherits;
+exports._possibleConstructorReturn = _possibleConstructorReturn;
+exports._slicedToArray = _slicedToArray;
+exports.classnames = classnames;
+exports.commonjsGlobal = commonjsGlobal;
+exports.createCommonjsModule = createCommonjsModule;
+exports.styleInject = styleInject;
+exports.unwrapExports = unwrapExports;
+//# sourceMappingURL=style-inject.es-c386372b.js.map

lib/style-inject.es-c386372b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-inject.es-c386372b.js","sources":["../node_modules/classnames/index.js","../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["/*!\n  Copyright (c) 2017 Jed Watson.\n  Licensed under the MIT License (MIT), see\n  http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg) && arg.length) {\n\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\tif (inner) {\n\t\t\t\t\tclasses.push(inner);\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,CAAC,YAAY;;CAGZ,IAAI,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;;CAE/B,SAAS,UAAU,IAAI;EACtB,IAAI,OAAO,GAAG,EAAE,CAAC;;EAEjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;GAC1C,IAAI,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;GACvB,IAAI,CAAC,GAAG,EAAE,SAAS;;GAEnB,IAAI,OAAO,GAAG,OAAO,GAAG,CAAC;;GAEzB,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ,EAAE;IACjD,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAClB,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,MAAM,EAAE;IAC5C,IAAI,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IACxC,IAAI,KAAK,EAAE;KACV,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpB;IACD,MAAM,IAAI,OAAO,KAAK,QAAQ,EAAE;IAChC,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;KACpB,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;MACtC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;MAClB;KACD;IACD;GACD;;EAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EACzB;;CAED,IAAI,CAAiC,MAAM,CAAC,OAAO,EAAE;EACpD,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC;EAChC,cAAc,GAAG,UAAU,CAAC;EAC5B,MAAM,AAKA;EACN,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;EAC/B;CACD,EAAE,EAAE;;;ACnDL,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;EAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;EAC/B,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;;EAE5B,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;;EAExD,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;EACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;EAC5C,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;;EAExB,IAAI,QAAQ,KAAK,KAAK,EAAE;IACtB,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C,MAAM;MACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACzB;GACF,MAAM;IACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;GACzB;;EAED,IAAI,KAAK,CAAC,UAAU,EAAE;IACpB,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;GAChC,MAAM;IACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;GACjD;CACF;;;;;;;;;;;;;;;"}

lib/test-dadf718e.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var styleInject_es = require('./style-inject.es-c386372b.js');
+require('react');
+
+var css = ".test_red__36-3- {\n  color: red;\n}\n";
+styleInject_es.styleInject(css);
+
+// type TransmitImgTxtData = {
+//   user_id?: string|number;
+//   anonymity?: boolean;
+//   avatar?: string;
+//   nickname?: string;
+//   is_long?: boolean;
+// }
+// interface TransmitCardProps {
+//   type: TransmitType;
+//   data: TransmitImgTxtData;
+// }
+// export class TransmitCard extends React.PureComponent<TransmitCardProps, {}> {
+//   renderVideo() {
+//     return <div className={styles.transmitVideoCard}>Video</div>;
+//   }
+//   renderImgTxt() {
+//     const { data } = this.props;
+//     const {
+//       user_id,
+//       anonymity,
+//       avatar,
+//       nickname,
+//       is_long,
+//     } = data;
+//     return (
+//       <div className={styles.transmitImgTxtCard}>
+//         <div className={styles.header}>
+//           <UserLink user_id={user_id} anonymity={anonymity}>
+//             <Avatar
+//               id={user_id}
+//               image={avatar}
+//               follow={false}
+//               size="cover"
+//               className={styles.ava}
+//               anonymity={anonymity}
+//             />
+//           </UserLink>
+//           <div className={styles.nickname}>
+//             <UserLink user_id={user_id} anonymity={anonymity}>
+//               {nickname}
+//             </UserLink>
+//           </div>
+//           <div className={styles.type}>
+//             {is_long
+//               ? intl.get('bilingually.imgtxt.article')
+//               : intl.get('bilingually.imgtxt')}
+//           </div>
+//         </div>
+//       </div>
+//     );
+//   }
+//   render() {
+//     const { type } = this.props;
+//     if (type === 'imgTxt') {
+//       this.renderImgTxt();
+//     }
+//     if (type === 'shortVideo' || type === 'microVideo') {
+//       this.renderVideo();
+//     }
+//     return null;
+//   }
+// }
+
+var Test = "TestComponent";
+
+exports.Test = Test;
+//# sourceMappingURL=test-dadf718e.js.map

package.json

@@ -1,25 +1,31 @@
 {
-  "name": "my-app",
+  "name": "bilingo-ui",
   "version": "0.1.0",
   "private": true,
+  "main": "lib/index.js",
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/classnames": "^2.2.9",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "@types/react-intl": "^3.0.0",
+    "classnames": "^2.2.6",
+    "react-intl": "^3.9.2",
     "react-scripts": "3.3.0",
     "typescript": "~3.7.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject",
+    "build:lib": "rimraf lib && babel src/components --out-dir lib  --source-maps  --copy-files --extensions \".ts,.tsx\"",
+    "build:css:": "",
+    "build:rollup": "rimraf lib && rollup -c ./rollup.config.js"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -35,5 +41,45 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.7.5",
+    "@babel/core": "^7.7.5",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-export-default-from": "^7.7.4",
+    "@babel/polyfill": "^7.7.0",
+    "@babel/preset-env": "^7.7.6",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/preset-typescript": "^7.7.4",
+    "@rollup/plugin-alias": "^3.0.0",
+    "@rollup/plugin-commonjs": "^11.0.0",
+    "@rollup/plugin-image": "^2.0.0",
+    "@rollup/plugin-node-resolve": "^6.0.0",
+    "@rollup/plugin-url": "^4.0.0",
+    "autoprefixer": "^9.7.3",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-import": "^1.13.0",
+    "cross-env": "^6.0.3",
+    "less": "^3.10.3",
+    "node-eval": "^2.0.0",
+    "postcss-url": "^8.0.0",
+    "react-app-rewired": "^2.1.5",
+    "rimraf": "^3.0.0",
+    "rollup": "^1.27.13",
+    "rollup-plugin-alias": "^2.2.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-eslint": "^7.0.0",
+    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-less": "^1.1.2",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-postcss-modules": "^2.0.1",
+    "rollup-plugin-replace": "^2.2.0",
+    "ts-loader": "^6.2.1"
+  },
+  "peerDependencies": {
+    "antd": "^3.26.4",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
   }
 }

rollup.config.js

@@ -0,0 +1,109 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import image from '@rollup/plugin-image';
+import alias from '@rollup/plugin-alias';
+import postcss from 'rollup-plugin-postcss-modules'
+import babel from "rollup-plugin-babel";
+import json from "rollup-plugin-json";
+import autoprefixer from 'autoprefixer';
+import postcssUrl from 'postcss-url';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+// import url from '@rollup/plugin-url';
+// import less from "rollup-plugin-less";
+import nodeEval from 'node-eval';
+
+export function getModuleExports(moduleId) {
+  const id = require.resolve(moduleId)
+  const moduleOut = nodeEval(fs.readFileSync(id).toString(), id)
+  let result = []
+  const excludeExports = /^(default|__)/
+  if (moduleOut && typeof moduleOut === 'object') {
+      result = Object.keys(moduleOut)
+          .filter(name => !excludeExports.test(name))
+  }
+  return result
+}
+
+export function getNamedExports(moduleIds) {
+  const result = {}
+  moduleIds.forEach( id => {
+      result[id] = getModuleExports(id)
+  })
+  return result
+}
+
+const fs = require('fs');
+const path = require('path');
+const componentFold = 'src/components';
+const cModuleNames = fs.readdirSync(path.resolve(componentFold));
+const cModuleMap = cModuleNames.reduce((prev, name) => {
+  prev[name] = `${componentFold}/${name}/index.ts`;
+  return prev;
+}, {});
+console.log('cModuleMap: ', cModuleMap);
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx'];
+
+export default {
+  input: {
+    '.': "src/lib-build.js",
+    ...cModuleMap
+  },
+  output: [
+    {
+      dir: "lib",
+      sourcemap: true,
+      entryFileNames: '[name]/index.js',
+      exports: 'named',
+      // file: "lib/bundle.js",
+      format: "cjs"
+    }
+  ],
+  plugins: [
+    peerDepsExternal(),
+    resolve({
+      mainFields: ['jsnext'],
+      preferBuiltins: true,
+      browser: true,
+      extensions,
+    }),
+    commonjs({
+      include: 'node_modules/**',
+      browser: true,
+      namedExports: getNamedExports([
+        'prop-types',
+      ])
+    }),
+    babel({
+      exclude: "node_modules/**",
+      runtimeHelpers: true,
+      extensions,
+    }),
+    image(),
+    json(),
+    // url(),
+    // less(),
+    postcss({
+      extensions: ['.css', '.less'],
+      plugins: [
+        autoprefixer(),
+        postcssUrl({
+          url: 'inline'
+        }),
+      ],
+      modules: true,
+    }),
+    alias({
+      entries: [
+        { find: '@components', replacement: 'src/components' },
+      ]
+    }),
+  ],
+  onwarn: function(warning) {
+    // Skip certain warnings
+    // should intercept ... but doesn't in some rollup versions
+    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
+    // console.warn everything else
+    console.warn( warning.message );
+  }
+};

src/components/Common/index.ts

@@ -0,0 +1 @@
+export { Test } from './test';

src/components/Common/test.less

@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}

src/components/Common/test.tsx

@@ -0,0 +1,233 @@
+import React, { PureComponent } from "react";
+import classnames from 'classnames';
+
+import styles from './test.less';
+
+export const ImgRowList = (
+  imglist: Array<string>,
+  outterKey: string,
+  type: string | null = 'normal',
+) => {
+  if (!imglist || !Array.isArray(imglist)) return null;
+  return (
+    <div
+      className={classnames(styles.normal_img_row_list, {
+        [styles.middle_type]: type === 'middle',
+      })}
+    >
+      {imglist.map((image_url: string, index: number) => {
+        return (
+          <span key={`${outterKey}_${image_url}`}>
+            <img src={image_url} alt={`comment ${index}`} />
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+interface MyNormalListProps {
+  style?: any;
+  renderItem: Function | any;
+  renderData: Array<any>;
+}
+export class MyNormalList extends PureComponent<MyNormalListProps, {}> {
+  render() {
+    const {
+      style: innerStyle = {},
+      renderItem = () => {},
+      renderData = [],
+    } = this.props;
+
+    if (!renderData || !Array.isArray(renderData)) {
+      console.error('MyNormalList Components renderData Props must be Array');
+      return null;
+    }
+
+    return (
+      <div className={styles.normal_list_wrapper} style={innerStyle}>
+        {renderData.map((value, index, arr) => renderItem(value, index))}
+      </div>
+    );
+  }
+}
+
+interface NormalCardProps {
+  key: any;
+  userinfo: {
+    nickname: string | any;
+    avatar: string | any;
+    created: string | number;
+  };
+  main_content: any;
+  append_content?: any;
+  content_img_assets?: Array<string>;
+  options?: {
+    header_size?: 'small' | 'normal' | 'middle';
+    bottom_divider?: boolean;
+  };
+}
+export class NormalCard extends PureComponent<NormalCardProps, {}> {
+  render() {
+    const {
+      userinfo: { nickname, avatar, created } = {
+        nickname: '',
+        avatar: '',
+        created: '',
+      },
+      main_content = null,
+      append_content = null,
+      content_img_assets = [],
+      options = {
+        header_size: 'normal',
+        bottom_divider: false,
+      },
+    } = this.props;
+    //
+
+    const RENDEROPTIONS_showImgList =
+      content_img_assets && content_img_assets.length > 0;
+
+    return (
+      <div
+        className={classnames(styles.normal_card_wrapper, {
+          [styles.header_middle]: options.header_size === 'middle', // default
+          [styles.header_small]: options.header_size === 'small',
+          [styles.bottom_border]: options.bottom_divider,
+        })}
+      >
+        <time>{created}</time>
+        <header>
+          {typeof avatar === 'string' ? (
+            <div className={styles.avatar_wrapper}>
+              <img src={avatar} alt="user_avatar" />
+            </div>
+          ) : (
+            avatar
+          )}
+          <div className={styles.nickname_wrapper}>{nickname}</div>
+        </header>
+        <div className={styles.main_content_wrapper}>
+          {main_content}
+          {RENDEROPTIONS_showImgList
+            ? ImgRowList(content_img_assets, this.props.key)
+            : null}
+        </div>
+        <div className={styles.append_wrapper}>{append_content}</div>
+      </div>
+    );
+  }
+}
+
+interface ShareCardProps {
+  isMobile: boolean | any;
+  mode: 'line' | 'block';
+  render_mode: 'text' | 'object';
+  share_data: any;
+}
+export class ShareCard extends PureComponent<ShareCardProps, {}> {
+  render() {
+    const {
+      isMobile = false,
+      render_mode = 'text',
+      mode = 'line',
+      share_data = '',
+    } = this.props;
+
+    return (
+      <div
+        className={classnames(styles.share_card_wrapper, {
+          [styles.mobile_mode]: isMobile,
+          [styles.mode_line]: mode === 'line', // default
+          [styles.mode_block]: mode === 'block',
+        })}
+      >
+        {render_mode === 'text' ? share_data : null}
+      </div>
+    );
+  }
+}
+
+// type TransmitType = 'imgTxt' | 'shortVideo' | 'microVideo';
+// type TransmitImgTxtData = {
+//   user_id?: string|number;
+//   anonymity?: boolean;
+//   avatar?: string;
+//   nickname?: string;
+//   is_long?: boolean;
+// }
+
+// interface TransmitCardProps {
+//   type: TransmitType;
+//   data: TransmitImgTxtData;
+// }
+
+// export class TransmitCard extends React.PureComponent<TransmitCardProps, {}> {
+//   renderVideo() {
+//     return <div className={styles.transmitVideoCard}>Video</div>;
+//   }
+
+//   renderImgTxt() {
+//     const { data } = this.props;
+//     const {
+//       user_id,
+//       anonymity,
+//       avatar,
+//       nickname,
+//       is_long,
+//     } = data;
+
+//     return (
+//       <div className={styles.transmitImgTxtCard}>
+//         <div className={styles.header}>
+//           <UserLink user_id={user_id} anonymity={anonymity}>
+//             <Avatar
+//               id={user_id}
+//               image={avatar}
+//               follow={false}
+//               size="cover"
+//               className={styles.ava}
+//               anonymity={anonymity}
+//             />
+//           </UserLink>
+//           <div className={styles.nickname}>
+//             <UserLink user_id={user_id} anonymity={anonymity}>
+//               {nickname}
+//             </UserLink>
+//           </div>
+//           <div className={styles.type}>
+//             {is_long
+//               ? intl.get('bilingually.imgtxt.article')
+//               : intl.get('bilingually.imgtxt')}
+//           </div>
+//         </div>
+//       </div>
+//     );
+//   }
+
+//   render() {
+//     const { type } = this.props;
+//     if (type === 'imgTxt') {
+//       this.renderImgTxt();
+//     }
+//     if (type === 'shortVideo' || type === 'microVideo') {
+//       this.renderVideo();
+//     }
+//     return null;
+//   }
+// }
+
+export const Test = "TestComponent";
+export const TestRedTxt = () => (
+  <div className={styles.red}>
+    RedTxt
+  </div>
+)
+
+export default {
+  MyNormalList,
+  NormalCard,
+  ShareCard,
+  Test,
+  // TransmitCard
+};

src/components/Payment/Common/ConsumeListView/ConsumeListView.less

@@ -0,0 +1,60 @@
+.wrapper {
+  display: flex;
+  justify-content: center;
+
+  .consumelist {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 10px;
+
+    li {
+      list-style: none;
+    }
+
+    .consumeItem {
+      margin: 0 6px 10px;
+      text-align: center;
+      position: relative;
+
+      .kingdomIcon {
+        position: absolute;
+        width: 24px;
+        height: 22px;
+        left: -6px;
+        top: -12px;
+      }
+
+      .avatar {
+        margin: 0 auto 4px;
+        width: 36px;
+        height: 36px;
+        background-size: cover;
+        border-radius: 50%;
+      }
+
+      .gray {
+        color: #9b9b9b;
+        font-size: 12px;
+      }
+    }
+
+    .toggle {
+      margin: 0 6px 10px;
+      width: 36px;
+      height: 36px;
+      line-height: 36px;
+      background-color: #ececec;
+      border-radius: 50%;
+      color: #a8adb6;
+      cursor: pointer;
+      background-image: url(../assets/btn_toggle.png);
+      background-position: center;
+
+      &.expand {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}

src/components/Payment/Common/ConsumeListView/README.md

@@ -0,0 +1,3 @@
+# ConsumeListView
+
+- 简单介绍

src/components/Payment/Common/ConsumeListView/index.tsx

@@ -0,0 +1,166 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+
+// import { DEFAULT_AVATAR } from '@/constants';
+import { addImageProcess } from '../../Utils/utils';
+import KingDomPic from '../assets/popovers_list_huangguan.png';
+
+import styles from './ConsumeListView.less';
+
+const DEFAULT_AVATAR =
+  '//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180820/Kgka4_oU1.jpeg';
+
+type Props = {
+  isToggle: boolean;
+  onToggleChange: Function;
+  dataSource: Array<{
+    id?: string|number;
+    user_avatar?: string;
+    bill_price?: number;
+  }>;
+  listLength: number;
+  showLength: number;
+  options: {
+    avatarSize: number,
+    avatarMarginLeftAndRight: number,
+    kingdomWidth: number,
+    kingdomHeight: number,
+    kingdomPosition: [number, number],
+  },
+}
+
+class ConsumeListView extends Component<Props> {
+  static defaultProps: Props = {
+    isToggle: false,
+    onToggleChange: () => {},
+    dataSource: [],
+    listLength: 0,
+    showLength: 6,
+    options: {
+      avatarSize: 36,
+      avatarMarginLeftAndRight: 6,
+      kingdomWidth: 24,
+      kingdomHeight: 22,
+      kingdomPosition: [-6, -12],
+    },
+  }
+
+  renderConsumeItem() {
+    const {
+      dataSource,
+      isToggle,
+      showLength,
+      listLength,
+      options,
+    } = this.props;
+    const {
+      kingdomWidth,
+      kingdomHeight,
+      kingdomPosition,
+      avatarSize,
+      avatarMarginLeftAndRight,
+    } = options;
+
+    let renderData = dataSource;
+    if (!isToggle && listLength > showLength) {
+      renderData = dataSource.slice(0, showLength - 1);
+    }
+
+    return renderData.map((v, i) => {
+      let kingdom = null;
+      if (i === 0) {
+        kingdom = (
+          <img
+            className={styles.kingdomIcon}
+            src={KingDomPic}
+            alt="reward top user"
+            style={{
+              width: `${kingdomWidth}px`,
+              height: `${kingdomHeight}px`,
+              left: `${kingdomPosition[0]}px`,
+              top: `${kingdomPosition[1]}px`,
+            }}
+          />
+        );
+      }
+      return (
+        <li
+          key={v.id}
+          className={styles.consumeItem}
+          style={{ margin: `0 ${avatarMarginLeftAndRight}px 10px` }}
+        >
+          {kingdom}
+          <div
+            className={styles.avatar}
+            style={{
+              backgroundImage: `url(${addImageProcess(
+                v.user_avatar || DEFAULT_AVATAR,
+                {
+                  small: true,
+                },
+              )})`,
+              width: `${avatarSize}px`,
+              height: `${avatarSize}px`,
+            }}
+          />
+          <span className={styles.gray}>
+            {/* {intl.get('bilingually.gift.item', {
+              nums: v.bill_price / 100,
+            }) /* {item.num}另币 */}
+          </span>
+        </li>
+      );
+    });
+  }
+
+  renderToggleButton() {
+    const {
+      isToggle,
+      onToggleChange,
+      listLength,
+      showLength,
+      options,
+    } = this.props;
+    const { avatarSize, avatarMarginLeftAndRight } = options;
+
+    if (listLength <= showLength) {
+      return null;
+    }
+
+    return (
+      <li
+        onClick={() => onToggleChange()}
+        className={classnames(styles.toggle, {
+          [styles.expand]: isToggle,
+        })}
+        style={{
+          width: `${avatarSize}px`,
+          height: `${avatarSize}px`,
+          lineHeight: `${avatarSize}px`,
+          margin: `0 ${avatarMarginLeftAndRight}px 10px`,
+        }}
+      />
+    );
+  }
+
+  render() {
+    const { showLength, options } = this.props;
+    const { avatarSize, avatarMarginLeftAndRight } = options;
+    return (
+      <div className={styles.wrapper}>
+        <ul
+          className={styles.consumelist}
+          style={{
+            width: `calc(${avatarMarginLeftAndRight * 2 +
+              avatarSize}px * ${showLength})`,
+          }}
+        >
+          {this.renderConsumeItem()}
+          {this.renderToggleButton()}
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default ConsumeListView;

src/components/Payment/Common/PayPlatformOptions/PayPlatformOptions.less

@@ -0,0 +1,101 @@
+.flexContainer {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  .flexItem {
+
+  }
+}
+
+
+.label {
+  font-size: 14px;
+  font-weight: 400;
+  color: #616A79;
+}
+.payment-method-box {
+  padding: 20px 10px 10px 10px;
+  text-align: center;
+
+  .payment-method {
+      display: inline-block;
+      margin: 0;
+      width: 60%;
+      vertical-align: middle;
+      &-before {
+          // TODO pseudo doesn't work
+          // content: '';
+          display: inline-block;
+          height: 100%;
+          vertical-align: middle;
+      }
+  }
+
+  .payitem {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border: 1px solid transparent;
+      height: 66px;
+      line-height: 66px;
+
+      .platformName {
+        text-align: center;
+        white-space: nowrap;
+      }
+
+      &.small {
+        width: 88px;
+        height: 36px;
+        line-height: 36px;
+        
+        .payment-method {
+          margin: 0;
+        }
+      }
+
+      &.active {
+          border-radius: 5px;
+          border-color:#1790FF;
+          box-shadow: 0px 2px 6px 0px rgba(163,163,163,0.3);
+      }
+
+      &.en {
+        font-size: 12px;
+      }
+  }
+
+  &.mobile {
+      padding: 8px 10px 10px 8px;
+      .payitem {
+          display: inline-block;
+          width: 78px;
+          height: 80px;
+          border: 1px solid transparent;
+
+          &.active {
+              border-radius: 4px;
+              border-color: #1790FF;
+          }
+
+          .payment-method {
+              display: inline-block;
+              width: 34px;
+              height: 34px;
+          }
+      }
+  }
+}
+
+@media (max-width: 768px) {
+  .payitem {
+      cursor: pointer;
+      border: 1px solid transparent;
+      &.active {
+          border-radius: 5px;
+          border-color:#1790FF;
+      }
+  }
+}

src/components/Payment/Common/PayPlatformOptions/README.md

@@ -0,0 +1,3 @@
+# PayPlatformOptions
+
+- 简单介绍

src/components/Payment/Common/PayPlatformOptions/index.tsx

@@ -0,0 +1,231 @@
+import React, { PureComponent } from "react";
+import classnames from "classnames";
+import { FormattedMessage } from "react-intl";
+
+import iconAlipay from "../assets/kcxq_popovers_icon_alipay@2x.png";
+import iconWechatpay from "../assets/kcxq_popovers_icon_wechatpay@2x.png";
+import iconPaypal from "../assets/kcxq_popovers_icon_paypal@2x.png";
+import mobileIconAlipay from "../assets/payment_btn_pay_alipay@2x.png";
+import mobileIconWechatpay from "../assets/payment_btn_pay_wechatpay@2x.png";
+import mobileIconPaypal from "../assets/payment_btn_pay_paypal@2x.png";
+
+import styles from "./PayPlatformOptions.less";
+
+type PAY_CHANNEL_VALUE =
+  | "PAYPAL_PAYPAL"
+  | "ALI_WEB"
+  | "ALI_WAP"
+  | "WX_WAP"
+  | "WX_NATIVE";
+type PAY_CHANNEL_TYPE = {
+  PAYPAL: PAY_CHANNEL_VALUE;
+  ALI_WEB: PAY_CHANNEL_VALUE;
+  ALI_WAP: PAY_CHANNEL_VALUE;
+  WX_WAP: PAY_CHANNEL_VALUE;
+  WX_NATIVE: PAY_CHANNEL_VALUE;
+};
+
+type Props = {
+  payitem: PAY_CHANNEL_VALUE;
+  onPayItemChange: (value: PAY_CHANNEL_VALUE) => void;
+  isMobile: boolean;
+  size: "small" | "normal" | "large";
+  withTitle: boolean;
+  locale: "zh" | "en";
+};
+
+export const PAY_CHANNEL: PAY_CHANNEL_TYPE = {
+  PAYPAL: "PAYPAL_PAYPAL", // PAYPAL_LIVE
+  ALI_WEB: "ALI_WEB",
+  ALI_WAP: "ALI_WAP",
+  WX_WAP: "WX_WAP",
+  WX_NATIVE: "WX_NATIVE"
+};
+
+class PayPlatformOptions extends PureComponent<Props, {}> {
+  render() {
+    const {
+      payitem,
+      onPayItemChange,
+      isMobile = false,
+      size = "normal",
+      withTitle = true,
+      locale = "zh"
+    } = this.props;
+
+    let titleDOM = null;
+    if (withTitle) {
+      titleDOM = (
+        <div className={styles.label}>
+          <FormattedMessage id="pay.channel.select.text" />
+        </div>
+      );
+    }
+
+    if (isMobile) {
+      return (
+        <div>
+          {titleDOM}
+          <div
+            className={classnames(styles["payment-method-box"], {
+              [styles.mobile]: isMobile
+            })}
+          >
+            <div className={styles.flexContainer}>
+              <div className={styles.flexItem}>
+                <div
+                  className={classnames(
+                    {
+                      [styles.payitem]: true,
+                      [styles.active]: payitem === PAY_CHANNEL.ALI_WEB,
+                      [styles.small]: size === "small"
+                    },
+                    styles[locale]
+                  )}
+                  onClick={() => {
+                    onPayItemChange(PAY_CHANNEL.ALI_WEB);
+                  }}
+                >
+                  <img
+                    src={mobileIconAlipay}
+                    alt="alipay"
+                    className={styles["payment-method"]}
+                  />
+                  <div className={styles.platformName}>
+                    <FormattedMessage id="pay.channel.ali" />
+                  </div>
+                </div>
+              </div>
+              <div className={styles.flexItem}>
+                <div
+                  className={classnames(
+                    {
+                      [styles.payitem]: true,
+                      [styles.active]: payitem === PAY_CHANNEL.WX_NATIVE,
+                      [styles.small]: size === "small"
+                    },
+                    styles[locale]
+                  )}
+                  onClick={() => {
+                    onPayItemChange(PAY_CHANNEL.WX_NATIVE);
+                  }}
+                >
+                  <img
+                    src={mobileIconWechatpay}
+                    alt="wechatpay"
+                    className={styles["payment-method"]}
+                  />
+                  <div className={styles.platformName}>
+                    <FormattedMessage id="pay.channel.wechat" />
+                  </div>
+                </div>
+              </div>
+              <div className={styles.flexItem}>
+                <div
+                  className={classnames(
+                    {
+                      [styles.payitem]: true,
+                      [styles.active]: payitem === PAY_CHANNEL.PAYPAL,
+                      [styles.small]: size === "small"
+                    },
+                    styles[locale]
+                  )}
+                  onClick={() => {
+                    onPayItemChange(PAY_CHANNEL.PAYPAL);
+                  }}
+                >
+                  <img
+                    src={mobileIconPaypal}
+                    alt="paypal"
+                    className={styles["payment-method"]}
+                  />
+                  <div className={styles.platformName}>
+                    <FormattedMessage id="pay.channel.paypal" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        {titleDOM}
+        <div className={styles["payment-method-box"]}>
+          <div className={styles.flexContainer}>
+            <div className={styles.flexItem}>
+              <div
+                className={classnames(
+                  {
+                    [styles.payitem]: true,
+                    [styles.active]: payitem === PAY_CHANNEL.ALI_WEB,
+                    [styles.small]: size === "small"
+                  },
+                  styles[locale]
+                )}
+                onClick={() => {
+                  onPayItemChange(PAY_CHANNEL.ALI_WEB);
+                }}
+              >
+                <span className={styles["payment-method-before"]} />
+                <img
+                  src={iconAlipay}
+                  alt="alipay"
+                  className={styles["payment-method"]}
+                />
+              </div>
+            </div>
+            <div className={styles.flexItem}>
+              <div
+                className={classnames(
+                  {
+                    [styles.payitem]: true,
+                    [styles.active]: payitem === PAY_CHANNEL.WX_NATIVE,
+                    [styles.small]: size === "small"
+                  },
+                  styles[locale]
+                )}
+                onClick={() => {
+                  onPayItemChange(PAY_CHANNEL.WX_NATIVE);
+                }}
+              >
+                <span className={styles["payment-method-before"]} />
+                <img
+                  src={iconWechatpay}
+                  alt="wechatpay"
+                  className={styles["payment-method"]}
+                />
+              </div>
+            </div>
+            <div className={styles.flexItem}>
+              <div
+                className={classnames(
+                  {
+                    [styles.payitem]: true,
+                    [styles.active]: payitem === PAY_CHANNEL.PAYPAL,
+                    [styles.small]: size === "small"
+                  },
+                  styles[locale]
+                )}
+                onClick={() => {
+                  onPayItemChange(PAY_CHANNEL.PAYPAL);
+                }}
+              >
+                <span className={styles["payment-method-before"]} />
+                <img
+                  src={iconPaypal}
+                  alt="paypal"
+                  className={styles["payment-method"]}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PayPlatformOptions;

src/components/Payment/Common/PriceOptions/PriceOptions.less

@@ -0,0 +1,133 @@
+@item_width: 70px;
+@item_margin: 6px;
+.options{
+  padding: 20px 50px;
+  border-bottom: 1px dashed #00000017;
+  p {
+    font-size:14px;
+    font-weight:400;
+    color:rgba(97,106,121,1);
+    margin-bottom: 20px;
+  }
+  .infoItem {
+    padding-right: 0;
+    .priceItem {
+      background:rgba(243,243,243,0.14);
+      border-radius:4px;
+      border:1px solid rgba(207,207,207,1);
+      font-size:14px;
+      font-weight:600;
+      color:rgba(97,106,121,1);
+      display: inline-block;
+      text-align: center;
+      vertical-align: top;
+      height: 30px;
+      width: @item_width;
+      line-height: 30px;
+      cursor: pointer;
+      margin: @item_margin;
+
+      &.active {
+        background:rgba(255,50,102,0.1);
+        border-radius:4px;
+        border:1px solid rgba(255,50,102,1);
+        color:rgba(97,106,121,1);
+      }
+    }
+    .priceInput {
+        display: inline-block;
+        min-width: 70px;
+        width: auto;
+        margin: @item_margin;
+        text-align: center;
+    }
+    button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        height: 30px;
+        width: 50px;
+        vertical-align: top;
+        padding: 0 5px;
+    }
+    .rate {
+        margin-left: 10px;
+        i {
+            margin-right: 5px;
+            color: #1790FF;
+        }
+    }
+  }
+
+  &.small {
+    @item_width: 72px;
+    @item_margin: 19px;
+
+    padding: 0 0 12px 0;
+    // padding: 12px 20px;
+    border-bottom: none;
+    p {
+      margin-bottom: 8px;
+    }
+    .infoItem {
+      text-align: center;
+
+      .priceItem {
+        border-radius:6px;
+        height: 32px;
+        width: @item_width;
+        margin: 0 0 (@item_margin - 7px) @item_margin;
+      }
+      .priceItem:first-child{
+        margin: 0 0 (@item_margin - 7px) 0px;
+      }
+
+      .priceInput {
+        display: block;
+        width: @item_width*3+@item_margin*2;
+        border-radius: 6px;
+        height: 32px;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .options {
+    padding: 20px 20px;
+    p{
+      font-size:14px;
+      font-weight:400;
+      color:rgba(97,106,121,1);
+    }
+    .infoItem {
+      padding-right: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .priceBtn{
+        display: flex;
+        justify-content: space-between;
+      }
+      .priceItem {
+        display: inline-block;
+        background-color: #fff;
+        width:74px;
+        height:36px;
+        line-height: 36px;
+        border-radius:6px;
+        border:1px solid rgba(207,207,207,1);
+          &.active {
+          background-color: #fff;
+          color: #FF3266FF;
+          border-radius:4px;
+          border:1px solid rgba(255,50,102,1);
+        }
+      }
+      .priceInput {
+        border-radius:6px;
+        height: 36px;
+        width: auto;
+      }
+    }
+  }
+}

src/components/Payment/Common/PriceOptions/README.md

@@ -0,0 +1,3 @@
+# PriceOptions
+
+- 简单介绍

src/components/Payment/Common/PriceOptions/index.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { Input } from 'antd';
+import { FormattedMessage, useIntl } from 'react-intl';
+import classnames from 'classnames';
+import { formatMoney } from '../../Utils/utils';
+
+import styles from './PriceOptions.less';
+
+type Props = {
+  price: number;
+  onPriceChange: (v: number) => void;
+  size: "small" | "normal" | "large";
+  focusScroll: boolean;
+  withTitle: boolean;
+  inputRef: React.RefObject<Input>;
+}
+
+const PriceOptions = ({
+  price,
+  onPriceChange,
+  size = 'normal',
+  focusScroll = true,
+  withTitle = true,
+  inputRef,
+}: Props) => {
+  const intl = useIntl();
+  const defaultOptions = [100, 600, 800];
+  // 控制是否为其他金额输入情况
+  const [inputStatus, setInputStatus] = useState(false);
+
+  return (
+    <div
+      className={classnames(styles.options, {
+        [styles[size]]: true,
+      })}
+    >
+      {withTitle ? <p><FormattedMessage id="pay.price.select.text" /></p> : null}
+      <div className={styles.infoItem} style={{ marginBottom: '-12px' }}>
+        <span className={styles.priceBtn}>
+          {defaultOptions.map(item => (
+            <span
+              className={classnames({
+                [styles.priceItem]: true,
+                [styles.active]: price === item && !inputStatus,
+              })}
+              key={item}
+              onClick={() => {
+                onPriceChange(item);
+                setInputStatus(false);
+              }}
+            >
+              <FormattedMessage
+                id="pay.price.money.text"
+                values={{
+                  value: formatMoney(item / 100, 0)
+                }}
+              />
+            </span>
+          ))}
+        </span>
+        <Input
+          ref={inputRef}
+          onMouseEnter={() => {
+            if (inputStatus && inputRef && inputRef.current) {
+              inputRef.current.focus();
+              inputRef.current.select();
+            }
+          }}
+          suffix="¥"
+          className={styles.priceInput}
+          value={inputStatus ? (price / 100 || '') : ''}
+          placeholder={intl.formatMessage({ id: 'pay.price.money.others' })}
+          onChange={e => {  
+            const n = +e.target.value;
+            if (Number.isNaN(n)) {
+              return;
+            }
+            // 测试暂时改成1分
+            onPriceChange(n * 100);
+          }}
+          onClick={e => {
+            onPriceChange(0);
+            setInputStatus(true);
+          }}
+          onFocus={e => {
+            if (focusScroll) {
+              e.target.scrollIntoView();
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PriceOptions;

src/components/Payment/Common/WaitPayInfoView/README.md

@@ -0,0 +1,3 @@
+# WaitPayInfoView
+
+简单介绍

src/components/Payment/Common/WaitPayInfoView/WaitPayInfoView.less

@@ -0,0 +1,7 @@
+.waitingContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+}

src/components/Payment/Common/WaitPayInfoView/index.tsx

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import { Button } from 'antd';
+import classnames from 'classnames';
+import styles from './WaitPayInfoView.less';
+
+import infoIconImg from '../assets/icon-info-blue@2x.svg';
+
+type Props = {
+  onClickPayed?: Function;
+  onClickProblem?: Function;
+}
+
+export class WaitPayInfoView extends Component<Props, {}> {
+  static defaultProps = {
+    onClickPayed: () => { console.log("onClickPayed"); },
+    onClickProblem: () => { console.log("onClickProblem"); }
+  }
+
+  render() {
+    const { onClickPayed, onClickProblem } = this.props;
+
+    return (
+      <div className={styles.waitingContainer}>
+        <div className={styles.infoIconImgContainer}>
+          <img src={infoIconImg} alt="info label icon" />
+        </div>
+        <div>
+          <div className={styles.pay_text}>
+            {"live.course_info.pay.notification"}
+          </div>
+          <div className={styles.btn_row}>
+            <Button
+              className={classnames(styles.pay_btn, styles.btn_default)}
+              size="small"
+              onClick={() => { onClickPayed && onClickPayed() }}
+            >
+              {"live.course_info.pay.payed"}
+            </Button>
+            <Button
+              className={styles.btn_default}
+              size="small"
+              style={{
+                marginLeft: '16px',
+              }}
+              onClick={() => { onClickProblem && onClickProblem() }}
+            >
+              {"live.course_info.pay.help"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WaitPayInfoView;

src/components/Payment/Common/assets/icon-info-blue@2x.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="43px" viewBox="0 0 48 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>kcxq_popovers_icon_tanhao</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="另客网_直播课_课程介绍详情_购买提示弹窗" transform="translate(-936.000000, -190.000000)" fill-rule="nonzero">
+            <g id="Group-22" transform="translate(690.000000, 110.000000)">
+                <g id="kcxq_popovers_icon_tanhao" transform="translate(246.000000, 80.000000)">
+                    <path d="M48,21.5 C48,33.3736626 38.3645756,43 26.4797048,43 C21.1306273,43 17.0391144,42.1506173 13.2841328,38.9300412 C11.8140221,37.6736626 1.700369,43.2123457 0.177121771,39.2839506 C-1.06273063,36.0987654 5.95129151,29.2506173 5.31365314,27.0740741 C4.76457565,25.1806584 4.95940959,23.5703704 4.95940959,21.5 C4.95940959,9.62633745 14.5948339,0 26.4797048,0 C38.3645756,0 48,9.62633745 48,21.5 Z" id="Shape" fill="#1790FF"></path>
+                    <g id="Group" transform="translate(23.848708, 8.193416)" fill="#FFFFFF">
+                        <path d="M2.5,27.4971098 C1.13235294,27.4971098 0,26.3794628 0,24.9971098 C0,23.6147569 1.13235294,22.4971098 2.5,22.4971098 C3.86764706,22.4971098 5,23.6147569 5,24.9971098 C5,26.3794628 3.86764706,27.4971098 2.5,27.4971098 Z M2.5,19.4219653 C1.13235294,19.4219653 0,18.1919075 0,16.6705202 L0,2.75144509 C0,1.24624277 1.13235294,0 2.5,0 C3.86764706,0 5,1.2300578 5,2.75144509 L5,16.6705202 C5,18.1919075 3.86764706,19.4219653 2.5,19.4219653 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/Payment/Utils/utils.ts

@@ -0,0 +1,36 @@
+
+export const IMAGE_PROCESS = '?x-oss-process=image/resize,h_350';
+export const IMAGE_PROCESS_SMALL = '?x-oss-process=image/resize,h_100';
+export const IMAGE_PROCESS_LARGE = '?x-oss-process=image/resize,h_500';
+
+type AddImageProcessOptions = {
+  small?: boolean;
+  large?: boolean;
+  custom?: boolean;
+  width?: string;
+  height?: string;
+}
+
+export function addImageProcess(url: string, options: AddImageProcessOptions = { width: '36px', height: '36px' }) {
+  // 防止重复添加导致的url不正确
+  if (url && url.indexOf('x-oss-process') > -1) {
+    return url;
+  }
+  if (options.small) {
+    return url + IMAGE_PROCESS_SMALL;
+  }
+  if (options.large) {
+    return url + IMAGE_PROCESS_LARGE;
+  }
+  if (options.custom) {
+    return `${url}?x-oss-process=image/resize,limit_0,m_fill,w_${options.width},h_${options.height}`;
+  }
+  return url + IMAGE_PROCESS;
+}
+
+export function formatMoney(input: any, fuzz = 2) {
+  if (isNaN(+input)) {
+    return input;
+  }
+  return (+input).toFixed(fuzz);
+}

src/components/Payment/index.ts

@@ -0,0 +1,4 @@
+export { default as ConsumeListView } from './Common/ConsumeListView';
+export { default as PayPlatformOptions } from './Common/PayPlatformOptions';
+export { default as PriceOptions } from './Common/PriceOptions';
+export { default as WaitPayInfoView } from './Common/WaitPayInfoView';

src/lang/en.json

@@ -0,0 +1,9 @@
+{
+  "pay.channel.select.text": "Select Your Platform",
+  "pay.channel.ali": "Alipay",
+  "pay.channel.wechat": "WeChat Pay",
+  "pay.channel.paypal": "PayPal",
+  "pay.price.select.text": "Select Your Reward",
+  "pay.price.money.text": "{value}¥",
+  "pay.price.money.others": "others value"
+}

src/lang/zh.json

@@ -0,0 +1,9 @@
+{
+  "pay.channel.select.text": "选择你的支付平台",
+  "pay.channel.ali": "支付宝",
+  "pay.channel.wechat": "微信",
+  "pay.channel.paypal": "PayPal",
+  "pay.price.select.text": "选择打赏金额",
+  "pay.price.money.text": "{value}¥",
+  "pay.price.money.others": "其他金额"
+}

src/lib-build.js

@@ -0,0 +1,3 @@
+export { Test } from '@components/Common/test.tsx';
+export * from '@components/Common/index.ts';
+export * from '@components/Payment/index.ts';

src/typings/index.d.ts

@@ -0,0 +1,11 @@
+declare module "*.png";
+declare module "*.svg";
+
+declare module "*.less";
+
+declare module "*.json";
+
+declare module "*.md";
+
+declare module 'storybook-addon-intl';
+declare module '@storybook/addon-console';

tsconfig.json

@@ -19,6 +19,11 @@
     "noEmit": true,
     "jsx": "react"
   },
+  "baseUrl": ".",
+  "paths": {
+    "@/*": [ "src/*" ],
+    "@components/*": [ "src/components/*" ]
+  },
   "include": [
     "src"
   ]