@arcblock/ux 2.5.16 → 2.5.18

package/lib/CardSelector/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CardSelector;
+
+var _react = require("react");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+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
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  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__*/(0, _jsxRuntime.jsx)(Contianer, {
+    ref: outterCon,
+    onTouchStart: touchstart,
+    onTouchEnd: touchend,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "card-container",
+      style: {
+        transform: "translate(".concat(-translateX, "px, 0)")
+      },
+      children: list.map((e, i) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "card-item ".concat(i === selectedId ? 'selected' : ''),
+          style: {
+            width,
+            height,
+            margin: cardSpace / 2
+          } // eslint-disable-next-line react/no-array-index-key
+          ,
+          onClick: () => selectedItem(i),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: e.src,
+            alt: e.name
+          })
+        }, i);
+      })
+    })
+  });
+}
+
+const Contianer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);\n  overflow: hidden;\n  .card-container {\n    display: flex;\n    white-space: nowrap;\n    width: max-content;\n    transition: all ease 0.3s;\n  }\n  .card-item {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    cursor: pointer;\n    img {\n      max-width: 100%;\n      max-height: 100%;\n      width: auto;\n      height: auto;\n      outline: #526ded solid 0;\n      transition: all ease 0.2s;\n      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;\n    }\n    &.selected {\n      cursor: default;\n      img {\n        outline: #526ded solid 5px;\n      }\n    }\n  }\n"])));
+
+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/SessionManager/index.js

@@ -58,6 +58,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+const USER_TYPE = Object.freeze({
+  DERIVED: 'derived',
+  WALLET: 'wallet'
+});
 const messages = {
   zh: {
     switchDid: '切换账户',
@@ -79,17 +83,19 @@ const messages = {
 const translations = {
   en: {
     alreadyBindOAuth: 'Already bind Auth0',
-    bind: 'Bind '
+    bind: 'Bind ',
+    thirdParty: 'Third Party Login'
   },
   zh: {
     // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
     alreadyBindOAuth: '已绑定 Auth0 账号',
-    bind: '绑定'
+    bind: '绑定',
+    thirdParty: '第三方登录'
   }
 };
 
 function SessionManager(_ref) {
-  var _session$user, _session$user$avatar, _session$user3, _session$user4, _session$user5, _session$user6, _session$user7, _session$user8, _session$user9;
+  var _session$user, _session$user$avatar, _session$user3, _session$user4, _session$user4$extraC, _session$user5, _session$user6, _session$user7, _session$user8, _session$user9;
 
   let {
     session,
@@ -117,7 +123,8 @@ function SessionManager(_ref) {
   const {
     logoutOAuth,
     bindOAuth,
-    configs: oauthConfigs
+    configs: oauthConfigs,
+    switchOAuthPassport
   } = (0, _OAuth.useOAuth)();
   const [userOpen, setUserOpen] = (0, _react.useState)(false); // base64 img maybe have some blank char, need encodeURIComponent to transform it
 
@@ -128,8 +135,8 @@ function SessionManager(_ref) {
     return (_session$user2 = session.user) === null || _session$user2 === void 0 ? void 0 : (_session$user2$passpo = _session$user2.passports) === null || _session$user2$passpo === void 0 ? void 0 : _session$user2$passpo.find(item => item.name === session.user.role);
   }, [session.user]);
   const browser = (0, _useBrowser.default)();
-  const hasBindOAuth = ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.source) === 'wallet' && ((_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : _session$user4.derivedAccount);
-  const isDerivedAccount = ((_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.source) === 'derived';
+  const hasBindOAuth = ((_session$user3 = session.user) === null || _session$user3 === void 0 ? void 0 : _session$user3.source) === USER_TYPE.WALLET && ((_session$user4 = session.user) === null || _session$user4 === void 0 ? void 0 : (_session$user4$extraC = _session$user4.extraConfigs) === null || _session$user4$extraC === void 0 ? void 0 : _session$user4$extraC.derivedAccount);
+  const isDerivedAccount = ((_session$user5 = session.user) === null || _session$user5 === void 0 ? void 0 : _session$user5.source) === USER_TYPE.DERIVED;
   const oauthConfigList = Object.entries(oauthConfigs).map(_ref2 => {
     let [key, value] = _ref2;
     return _objectSpread(_objectSpread({}, value), {}, {
@@ -217,17 +224,25 @@ function SessionManager(_ref) {
   }
 
   function _onSwitchPassport() {
-    setUserOpen(false);
-    session.switchPassport(function () {
+    const {
+      user
+    } = session;
+
+    if ((user === null || user === void 0 ? void 0 : user.source) === USER_TYPE.DERIVED) {
+      switchOAuthPassport(user);
+    } else {
       setUserOpen(false);
-      onSwitchPassport(...arguments);
-    });
+      session.switchPassport(function () {
+        setUserOpen(false);
+        onSwitchPassport(...arguments);
+      });
+    }
   }
 
   function _onBindWallet() {
     setUserOpen(false);
 
-    if (session.user.source === 'derived') {
+    if (session.user.source === USER_TYPE.DERIVED) {
       session.bindWallet(function () {
         setUserOpen(false);
         onBindWallet(...arguments);
@@ -378,7 +393,7 @@ function SessionManager(_ref) {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.SvgIcon, {
                 component: _Link.default,
                 className: "session-manager-menu-icon"
-              }), ((_session$user9 = session.user) === null || _session$user9 === void 0 ? void 0 : _session$user9.source) === 'derived' ? "".concat(translations[locale].bind, "DID Wallet") : "".concat(translations[locale].bind, "OAuth")]
+              }), ((_session$user9 = session.user) === null || _session$user9 === void 0 ? void 0 : _session$user9.source) === USER_TYPE.DERIVED ? "".concat(translations[locale].bind, "DID Wallet") : "".concat(translations[locale].bind).concat(translations[locale].thirdParty)]
             }), oauthConfigList.length > 0 && hasBindOAuth && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
               className: "session-manager-menu-item",
               disabled: true,
@@ -415,9 +430,8 @@ SessionManager.propTypes = {
         name: _propTypes.default.string.isRequired,
         title: _propTypes.default.string.isRequired
       })),
-      source: _propTypes.default.oneOf(['derived', 'wallet', undefined]),
-      derivedAccount: _propTypes.default.object,
-      connectedAccounts: _propTypes.default.array
+      source: _propTypes.default.oneOf([USER_TYPE.DERIVED, USER_TYPE.WALLET, undefined]),
+      extraConfigs: _propTypes.default.object
     }),
     login: _propTypes.default.func.isRequired,
     logout: _propTypes.default.func.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.5.16",
+  "version": "2.5.18",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,11 +47,11 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "2d161f64c481ff5ca5f323726ec75e2f696fde1b",
+  "gitHead": "1b9d4821fd1438a1752af71dc6e9edbcfc4ea2ec",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.10",
-    "@arcblock/icons": "^2.5.16",
-    "@arcblock/react-hooks": "^2.5.16",
+    "@arcblock/icons": "^2.5.18",
+    "@arcblock/react-hooks": "^2.5.18",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/CardSelector/index.jsx

@@ -0,0 +1,123 @@
+import { useState, useEffect, useRef } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+
+export default function CardSelector({ list, width, height, cardSpace, onSelect, defaultIndex }) {
+  const [selectedId, setSelectedId] = useState(0);
+  const [translateX, setTranslateX] = useState(0);
+  const outterCon = 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);
+  };
+
+  useEffect(() => {
+    selectedItem(defaultIndex);
+
+    const func = (e) => e.preventDefault();
+    outterCon.current.addEventListener('touchmove', func, { passive: false });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  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 (
+    <Contianer ref={outterCon} onTouchStart={touchstart} onTouchEnd={touchend}>
+      <div className="card-container" style={{ transform: `translate(${-translateX}px, 0)` }}>
+        {list.map((e, i) => {
+          return (
+            <div
+              className={`card-item ${i === selectedId ? 'selected' : ''}`}
+              style={{ width, height, margin: cardSpace / 2 }}
+              // eslint-disable-next-line react/no-array-index-key
+              key={i}
+              onClick={() => selectedItem(i)}>
+              <img src={e.src} alt={e.name} />
+            </div>
+          );
+        })}
+      </div>
+    </Contianer>
+  );
+}
+
+const Contianer = styled.div`
+  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.array,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  cardSpace: PropTypes.number,
+  onSelect: PropTypes.func,
+  defaultIndex: PropTypes.number,
+};
+
+CardSelector.defaultProps = {
+  list: '',
+  width: 300,
+  height: 400,
+  cardSpace: 40,
+  onSelect: () => {},
+  defaultIndex: 0,
+};

package/src/SessionManager/index.jsx

@@ -18,6 +18,11 @@ import { styled } from '../Theme';
 import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
 
+const USER_TYPE = Object.freeze({
+  DERIVED: 'derived',
+  WALLET: 'wallet',
+});
+
 const messages = {
   zh: {
     switchDid: '切换账户',
@@ -40,11 +45,13 @@ const translations = {
   en: {
     alreadyBindOAuth: 'Already bind Auth0',
     bind: 'Bind ',
+    thirdParty: 'Third Party Login',
   },
   zh: {
     // NOTE: 目前只有 Auth0，展示出具体的第三方名字会更好
     alreadyBindOAuth: '已绑定 Auth0 账号',
     bind: '绑定',
+    thirdParty: '第三方登录',
   },
 };
 
@@ -70,7 +77,7 @@ function SessionManager({
   ...rest
 }) {
   const userAnchorRef = useRef(null);
-  const { logoutOAuth, bindOAuth, configs: oauthConfigs } = useOAuth();
+  const { logoutOAuth, bindOAuth, configs: oauthConfigs, switchOAuthPassport } = useOAuth();
   const [userOpen, setUserOpen] = useState(false);
 
   // base64 img maybe have some blank char, need encodeURIComponent to transform it
@@ -81,8 +88,8 @@ function SessionManager({
   );
   const browser = useBrowser();
 
-  const hasBindOAuth = session.user?.source === 'wallet' && session.user?.derivedAccount;
-  const isDerivedAccount = session.user?.source === 'derived';
+  const hasBindOAuth = session.user?.source === USER_TYPE.WALLET && session.user?.extraConfigs?.derivedAccount;
+  const isDerivedAccount = session.user?.source === USER_TYPE.DERIVED;
 
   const oauthConfigList = Object.entries(oauthConfigs)
     .map(([key, value]) => {
@@ -150,16 +157,21 @@ function SessionManager({
     });
   }
   function _onSwitchPassport() {
-    setUserOpen(false);
-    session.switchPassport((...args) => {
+    const { user } = session;
+    if (user?.source === USER_TYPE.DERIVED) {
+      switchOAuthPassport(user);
+    } else {
       setUserOpen(false);
-      onSwitchPassport(...args);
-    });
+      session.switchPassport((...args) => {
+        setUserOpen(false);
+        onSwitchPassport(...args);
+      });
+    }
   }
 
   function _onBindWallet() {
     setUserOpen(false);
-    if (session.user.source === 'derived') {
+    if (session.user.source === USER_TYPE.DERIVED) {
       session.bindWallet((...args) => {
         setUserOpen(false);
         onBindWallet(...args);
@@ -305,9 +317,9 @@ function SessionManager({
                     onClick={_onBindWallet}
                     data-cy="sessionManager-bind-trigger">
                     <SvgIcon component={BindWalletIcon} className="session-manager-menu-icon" />
-                    {session.user?.source === 'derived'
+                    {session.user?.source === USER_TYPE.DERIVED
                       ? `${translations[locale].bind}DID Wallet`
-                      : `${translations[locale].bind}OAuth`}
+                      : `${translations[locale].bind}${translations[locale].thirdParty}`}
                   </MenuItem>
                 )}
                 {oauthConfigList.length > 0 && hasBindOAuth && (
@@ -348,9 +360,8 @@ SessionManager.propTypes = {
           title: PropTypes.string.isRequired,
         })
       ),
-      source: PropTypes.oneOf(['derived', 'wallet', undefined]),
-      derivedAccount: PropTypes.object,
-      connectedAccounts: PropTypes.array,
+      source: PropTypes.oneOf([USER_TYPE.DERIVED, USER_TYPE.WALLET, undefined]),
+      extraConfigs: PropTypes.object,
     }),
     login: PropTypes.func.isRequired,
     logout: PropTypes.func.isRequired,