@abtnode/ux 1.7.7 → 1.7.8

package/lib/nav-logo.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = LogoContainer;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+const _excluded = ["logo", "name", "subname", "previousData"],
+      _excluded2 = ["logo"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+function LogoContainer(_ref) {
+  let {
+    logo,
+    name,
+    subname,
+    previousData
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  let logoEle = /*#__PURE__*/_react.default.createElement(LogoImg, {
+    logo: logo
+  });
+
+  let nameEle = name;
+  let subnameEle = subname;
+
+  if (previousData.logo) {
+    logoEle = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(LogoImg, {
+      logo: logo,
+      className: "left-fade-in-ele"
+    }), /*#__PURE__*/_react.default.createElement(LogoImg, {
+      logo: previousData.logo,
+      className: "postion-abs left-fade-out-ele"
+    }));
+  }
+
+  if (previousData.name && previousData.name !== name) {
+    nameEle = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: "right-fade-in-ele",
+      style: {
+        display: 'inline-block'
+      }
+    }, name), /*#__PURE__*/_react.default.createElement("span", {
+      className: "postion-abs right-fade-out-ele"
+    }, previousData.name));
+  }
+
+  if (previousData.subname && previousData.subname !== subname) {
+    subnameEle = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: "right-fade-in-ele",
+      style: {
+        display: 'inline-block'
+      }
+    }, subname), /*#__PURE__*/_react.default.createElement("span", {
+      className: "postion-abs right-fade-out-ele"
+    }, previousData.subname));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Container, rest, /*#__PURE__*/_react.default.createElement("div", {
+    className: "logo-inner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "logo-img-content"
+  }, logoEle), /*#__PURE__*/_react.default.createElement("div", {
+    className: "logo-info ".concat(!name && !subname ? 'zero-left' : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "logo-name"
+  }, nameEle), /*#__PURE__*/_react.default.createElement("div", {
+    className: "logo-subname"
+  }, subnameEle))));
+}
+
+LogoContainer.propTypes = {
+  logo: _propTypes.default.element.isRequired,
+  name: _propTypes.default.string,
+  subname: _propTypes.default.string,
+  previousData: _propTypes.default.object
+};
+LogoContainer.defaultProps = {
+  name: '',
+  subname: '',
+  previousData: {
+    logo: '',
+    name: '',
+    subname: ''
+  }
+}; // eslint-disable-next-line react/prop-types
+
+function LogoImg(_ref2) {
+  let {
+    logo
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(LogoImgDiv, rest, logo);
+}
+
+const LogoImgDiv = _styledComponents.default.div.withConfig({
+  displayName: "nav-logo__LogoImgDiv",
+  componentId: "sc-b61p4p-0"
+})(["display:block;> *{display:block;}"]);
+
+const Container = _styledComponents.default.div.withConfig({
+  displayName: "nav-logo__Container",
+  componentId: "sc-b61p4p-1"
+})(["position:relative;display:block;.logo-inner{display:flex;align-items:center;height:100%;.logo-img-content{position:relative;display:block;}.logo-info{display:flex;flex-direction:column;justify-content:center;margin-left:10px;letter-spacing:0.1px;&.zero-left{margin-left:0%;}.logo-name{position:relative;line-height:16px;font-size:16px;color:#121319;}.logo-subname{position:relative;line-height:13px;font-size:13px;color:#7d8085;}}}.postion-abs{position:absolute;left:0;top:0;height:100%;}.right-fade-out-ele{animation:right-fade-out ease 0.5s;animation-delay:2s;animation-fill-mode:forwards;}.right-fade-in-ele{animation:right-fade-in ease 0.5s;animation-delay:2s;animation-fill-mode:both;}@keyframes right-fade-out{0%{opacity:1;transform:translate(0,0);}100%{opacity:0;transform:translate(8px,0);}}@keyframes right-fade-in{0%{opacity:0;transform:translate(8px,0);}100%{opacity:1;transform:translate(0,0);}}.left-fade-out-ele{animation:left-fade-out ease 0.5s;animation-delay:2s;animation-fill-mode:forwards;}.left-fade-in-ele{animation:left-fade-in ease 0.5s;animation-delay:2s;animation-fill-mode:both;}@keyframes left-fade-out{0%{opacity:1;transform:translate(0,0);}100%{opacity:0;transform:translate(-8px,0);}}@keyframes left-fade-in{0%{opacity:0;transform:translate(-8px,0);}100%{opacity:1;transform:translate(0,0);}}"]);

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.7.7",
+  "version": "1.7.8",
   "description": "UX components shared across abtnode packages",
   "main": "lib/index.js",
   "files": [
@@ -21,10 +21,10 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "MIT",
   "dependencies": {
-    "@abtnode/constant": "1.7.7",
-    "@arcblock/did-connect": "^1.17.2",
-    "@arcblock/ux": "^1.17.2",
-    "@blocklet/meta": "1.7.7",
+    "@abtnode/constant": "1.7.8",
+    "@arcblock/did-connect": "^1.17.7",
+    "@arcblock/ux": "^1.17.7",
+    "@blocklet/meta": "1.7.8",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "notistack": "^1.0.6",
@@ -42,5 +42,5 @@
     "babel-plugin-inline-react-svg": "^1.1.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "619db37ea7a91c64a9bf30836a55c70d55325e73"
+  "gitHead": "ae75dd20b4750a31dc53c88b75ed1d95c8f15397"
 }