@abtnode/ux 1.6.16 → 1.6.17

package/lib/card-selector.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CardSelector;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function CardSelector(_ref) {
+  let {
+    list,
+    width,
+    height,
+    cardSpace,
+    onSelect,
+    defaultIndex
+  } = _ref;
+  const [selectedId, setSelectedId] = (0, _react.useState)(0);
+  const [translateX, setTranslateX] = (0, _react.useState)(0);
+  const outterCon = (0, _react.useRef)(null); // 选择卡片
+
+  const selectedItem = i => {
+    if (i < 0 || i > list.length - 1) {
+      return;
+    }
+
+    setSelectedId(i); // 外部容器大小
+
+    const outerWidth = outterCon.current.clientWidth;
+    setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
+    onSelect(i);
+  };
+
+  (0, _react.useEffect)(() => {
+    selectedItem(defaultIndex);
+
+    const func = e => e.preventDefault();
+
+    outterCon.current.addEventListener('touchmove', func, {
+      passive: false
+    });
+    return () => outterCon.current.removeEventListener('touchmove', func);
+  }, []);
+  let startX;
+
+  const touchstart = e => {
+    const point = e.touches[0];
+    startX = point.clientX;
+  };
+
+  const touchend = e => {
+    const point = e.changedTouches[0];
+    const diffX = startX - point.clientX;
+
+    if (Math.abs(diffX) > 60) {
+      if (diffX > 0) {
+        selectedItem(selectedId + 1);
+      } else {
+        selectedItem(selectedId - 1);
+      }
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Contianer, {
+    ref: outterCon,
+    onTouchStart: touchstart,
+    onTouchEnd: touchend
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "card-container",
+    style: {
+      transform: "translate(".concat(-translateX, "px, 0)")
+    }
+  }, list.map((e, i) => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "card-item ".concat(i === selectedId ? 'selected' : ''),
+      style: {
+        width,
+        height,
+        margin: cardSpace / 2
+      } // eslint-disable-next-line react/no-array-index-key
+      ,
+      key: i,
+      onClick: () => selectedItem(i)
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: e.src,
+      alt: e.name
+    }));
+  })));
+}
+
+const Contianer = _styledComponents.default.div.withConfig({
+  displayName: "card-selector__Contianer",
+  componentId: "sc-t0bkjd-0"
+})(["overflow:hidden;mask-image:linear-gradient(to left,transparent,black 3%,black 97%,transparent);overflow:hidden;.card-container{display:flex;white-space:nowrap;width:max-content;transition:all ease 0.3s;}.card-item{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;cursor:pointer;img{max-width:100%;max-height:100%;width:auto;height:auto;outline:#526ded solid 0;transition:all ease 0.2s;box-shadow:rgba(0,0,0,0.2) 0 0 10px;}&.selected{cursor:default;img{outline:#526ded solid 5px;}}}"]);
+
+CardSelector.propTypes = {
+  list: _propTypes.default.array,
+  width: _propTypes.default.number,
+  height: _propTypes.default.number,
+  cardSpace: _propTypes.default.number,
+  onSelect: _propTypes.default.func,
+  defaultIndex: _propTypes.default.number
+};
+CardSelector.defaultProps = {
+  list: '',
+  width: 300,
+  height: 400,
+  cardSpace: 40,
+  onSelect: () => {},
+  defaultIndex: 0
+};

package/lib/lost-passport.js

@@ -19,14 +19,6 @@ var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircl
 
 var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
 
-var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
-
-var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
-
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
-
-var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
-
 var _Stepper = _interopRequireDefault(require("@material-ui/core/Stepper"));
 
 var _Step = _interopRequireDefault(require("@material-ui/core/Step"));
@@ -41,8 +33,6 @@ var _Done = _interopRequireDefault(require("@material-ui/icons/Done"));
 
 var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
 
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 
 var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
@@ -51,6 +41,8 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 
 var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
 
+var _cardSelector = _interopRequireDefault(require("./card-selector"));
+
 var _wrapLocale = _interopRequireDefault(require("./wrap-locale"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -188,28 +180,12 @@ function LostPassport(_ref2) {
       }, user.fullName), /*#__PURE__*/_react.default.createElement(_Box.default, {
         className: "did",
         mt: 1
-      }, /*#__PURE__*/_react.default.createElement(_Address.default, null, user.did)))), /*#__PURE__*/_react.default.createElement(_Box.default, {
-        my: 3
-      }, /*#__PURE__*/_react.default.createElement(_FormControl.default, {
-        style: {
-          width: '100%'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
-        name: "passport",
-        value: passport,
-        onChange: handleChange
-      }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-        container: true,
-        spacing: 3
-      }, user.passportTypes.map(x => {
-        return /*#__PURE__*/_react.default.createElement(_Grid.default, {
-          item: true,
-          xs: 12,
-          sm: 6
-        }, /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
-          value: x.name,
-          control: /*#__PURE__*/_react.default.createElement(_Radio.default, null),
-          label: /*#__PURE__*/_react.default.createElement("img", {
+      }, /*#__PURE__*/_react.default.createElement(_Address.default, null, user.did)))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_cardSelector.default, {
+        width: 230,
+        height: 306,
+        cardSpace: 24,
+        list: user.passportTypes.map(x => {
+          return {
             src: createPassportSvg({
               title: x.title,
               issuer: x.issuer.name,
@@ -218,13 +194,16 @@ function LostPassport(_ref2) {
               ownerAvatarUrl: user.avatar,
               isDataUrl: true
             }),
-            alt: "",
-            style: {
-              width: '100%'
-            }
-          })
-        }));
-      }))))), /*#__PURE__*/_react.default.createElement(_Box.default, {
+            name: x.title
+          };
+        }),
+        onSelect: index => handleChange({
+          target: {
+            value: user.passportTypes[index].name
+          }
+        }),
+        defaultIndex: 0
+      })), /*#__PURE__*/_react.default.createElement(_Box.default, {
         textAlign: "center"
       }, /*#__PURE__*/_react.default.createElement(_Button.default, {
         rounded: true,

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.6.16",
+  "version": "1.6.17",
   "description": "UX components shared across abtnode packages",
   "main": "lib/index.js",
   "files": [
@@ -20,10 +20,11 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "MIT",
   "dependencies": {
-    "@arcblock/did-connect": "^1.16.13",
-    "@arcblock/ux": "^1.16.13",
+    "@arcblock/did-connect": "^1.16.20",
+    "@arcblock/ux": "^1.16.20",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
+    "prop-types": "^15.7.2",
     "react": "^16.13.0",
     "react-router-dom": "^5.1.2",
     "styled-components": "^5.0.1"
@@ -37,5 +38,5 @@
     "babel-plugin-inline-react-svg": "^1.1.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "69b08db16aeb75ce23b0e6bb5b9fa396adba2d4b"
+  "gitHead": "d567a622a779eba43c95eaeb4633cb2b276bb7b9"
 }