@blocklet/ui-react 1.17.13

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2022 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,87 @@
+![@blocklet/ui-react](https://www.arcblock.io/.netlify/functions/badge/?text=@blocklet/ui-react)
+
+> Some useful React components that can be used in Blocklets.
+
+## 安装
+
+```sh
+npm install @blocklet/ui-react
+
+# or
+yarn add @blocklet/ui-react
+```
+
+## 使用
+
+### Header/Footer
+
+```jsx
+import Header from '@blocklet/ui-react/lib/Header';
+import Footer from '@blocklet/ui-react/lib/Footer';
+
+function App() {
+  return (
+    <div>
+      <Header />
+      ...
+      <Footer />
+    </div>
+  );
+}
+```
+
+`<Header />` 或 `<Footer />` 会获取 blocklet meta (`window.blocklet`) 中的配置信息, 包括 app logo, app name, navigation links 等，然后基于这些配置信息渲染一个 page header 或 page footer。
+
+如果 `<Header />` 上层存在 Session Context Provider，那么 Header 组件会在右侧区域自动渲染一个用户身份信息的按钮 (SessionManager)。
+类似的，如果 `<Header />` 上层存在 Locale Context Provider，那么 Header 组件会在右侧区域自动渲染一个语言选择器按钮 (LocaleSelector)。
+
+也可以显式地传入 blocklet meta:  
+
+```jsx
+const blockletMeta = {
+  appName: 'Blocklet Name',
+  appLogo: 'logo url',
+  theme: {
+    background: '#cfefe8',
+  },
+  navigation: [
+    {
+      title: 'Home',
+      link: '/',
+    },
+    ...
+  ],
+};
+
+function App() {
+  return (
+    <div>
+      <Header blockletMeta={blockletMeta} />
+      ...
+    </div>
+  );
+}
+```
+
+定制 Header 右侧 addons 区域: 
+
+```jsx
+<Header
+  blockletMeta={meta}
+  addons={addons => {
+    return [
+      <Button
+        variant="contained"
+        color="primary"
+        size="small"
+        style={{ marginRight: 8 }}>
+        Addons
+      </Button>,
+      <Button color="primary" size="small" style={{ marginRight: 8 }}>
+        Addons
+      </Button>,
+      ...addons,
+    ];
+  }}
+/>
+```

package/lib/Footer/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Footer;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+
+var _Container = _interopRequireDefault(require("@material-ui/core/Container"));
+
+var _NavMenu = _interopRequireDefault(require("@arcblock/ux/lib/NavMenu"));
+
+const _excluded = ["blockletMeta"];
+
+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; }
+
+/**
+ * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
+ */
+function Footer(_ref) {
+  let {
+    blockletMeta
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const theme = (0, _useTheme.default)(); // eslint-disable-next-line no-param-reassign
+
+  blockletMeta = blockletMeta || window.blocklet;
+  const {
+    appLogo,
+    appName,
+    theme: blockletTheme,
+    navigation
+  } = blockletMeta;
+  return /*#__PURE__*/_react.default.createElement(Root, Object.assign({}, rest, {
+    $bgcolor: blockletTheme === null || blockletTheme === void 0 ? void 0 : blockletTheme.background,
+    $theme: theme
+  }), /*#__PURE__*/_react.default.createElement(_Container.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer_line"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer_brand"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: appLogo,
+    alt: "logo"
+  }), /*#__PURE__*/_react.default.createElement("span", null, appName)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer_nav"
+  }, !!(navigation !== null && navigation !== void 0 && navigation.length) && /*#__PURE__*/_react.default.createElement(_NavMenu.default, {
+    items: navigation.filter(item => item.link).map(item => ({
+      label: /*#__PURE__*/_react.default.createElement("a", {
+        href: item.link
+      }, item.title)
+    }))
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer_line"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer_copyright"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Powered by Blocklet Server")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer_extra"
+  }))));
+}
+
+Footer.propTypes = {
+  blockletMeta: _propTypes.default.object
+};
+Footer.defaultProps = {
+  blockletMeta: null
+};
+
+const Root = _styledComponents.default.div.withConfig({
+  displayName: "Footer__Root",
+  componentId: "sc-1iwl1nd-0"
+})(["padding:32px 40px;border-top:1px solid #eee;color:#9397a1;", " .footer_line{display:flex;justify-content:space-between;}.footer_line + .footer_line{margin-top:32px;}.footer_brand{display:flex;align-items:center;color:#777;img{height:36px;}span{margin-left:8px;font-size:20px;}}.footer_nav{> *{background:transparent;}}", "{.footer_line{flex-direction:column;}.footer_line + .footer_line{margin-top:0;}.footer_brand{img{height:24px;}span{font-size:16px;}}}"], _ref2 => {
+  let {
+    $bgcolor
+  } = _ref2;
+  return $bgcolor && "background-color: ".concat($bgcolor, ";");
+}, props => props.$theme.breakpoints.down('sm'));

package/lib/Header/index.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Header;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Header = _interopRequireDefault(require("@arcblock/ux/lib/Header"));
+
+var _NavMenu = _interopRequireDefault(require("@arcblock/ux/lib/NavMenu"));
+
+var _Session = require("@arcblock/did-connect/lib/Session");
+
+var _SessionManager = _interopRequireDefault(require("@arcblock/did-connect/lib/SessionManager"));
+
+var _selector = _interopRequireDefault(require("@arcblock/ux/lib/Locale/selector"));
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+const _excluded = ["blockletMeta", "addons"];
+
+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; }
+
+const isLinkActive = link => {
+  if (window.location.pathname === '/') {
+    return link === '/';
+  }
+
+  return link && link.indexOf(window.location.pathname) > -1;
+}; // blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
+
+
+const parseNavigation = navigation => {
+  const parseItem = item => {
+    if (item.items) {
+      return {
+        label: item.title,
+        children: item.items.map(parseItem)
+      };
+    }
+
+    let props = {}; // 临时处理: https://github.com/ArcBlock/blocklet-server/issues/4717
+
+    item.link = item.link.replace('/https:/', 'https://');
+
+    if (item.link.startsWith('http')) {
+      props = {
+        target: '_blank',
+        rel: 'noreferrer'
+      };
+    }
+
+    return {
+      label: /*#__PURE__*/_react.default.createElement("a", Object.assign({
+        href: item.link
+      }, props), item.title),
+      active: isLinkActive(item.link)
+    };
+  };
+
+  const items = navigation.map(parseItem);
+  return items;
+};
+/**
+ * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
+ */
+
+
+function Header(_ref) {
+  let {
+    blockletMeta,
+    addons
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const sessionInfo = _react.default.useContext(_Session.SessionContext);
+
+  const {
+    locale
+  } = (0, _context.useLocaleContext)() || {}; // eslint-disable-next-line no-param-reassign
+
+  blockletMeta = blockletMeta || window.blocklet;
+
+  if (!blockletMeta) {
+    console.warn('blocklet meta is not found.');
+    return null;
+  }
+
+  const {
+    appLogo,
+    appName,
+    theme: blockletTheme,
+    navigation = [],
+    enableConnect = true,
+    enableLocale = true
+  } = blockletMeta;
+  const navItems = parseNavigation(navigation);
+
+  const renderAddons = () => {
+    // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
+    if (addons && typeof addons !== 'function') {
+      return addons;
+    }
+
+    let addonsArray = []; // 启用了多语言并且检测到了 locale context
+
+    if (enableLocale && locale) {
+      addonsArray.push( /*#__PURE__*/_react.default.createElement(_selector.default, {
+        showText: false
+      }));
+    } // 启用了连接钱包并且检测到了 session context
+
+
+    if (enableConnect && sessionInfo) {
+      addonsArray.push( /*#__PURE__*/_react.default.createElement(_SessionManager.default, {
+        session: sessionInfo.session,
+        showRole: true
+      }));
+    } // 在内置 addons 基础上定制 addons
+
+
+    if (typeof addons === 'function') {
+      addonsArray = addons(addonsArray) || [];
+    }
+
+    const addonsFragment = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ...addonsArray);
+
+    return addonsFragment;
+  };
+
+  return /*#__PURE__*/_react.default.createElement(StyledUxHeader, Object.assign({
+    logo: /*#__PURE__*/_react.default.createElement("a", {
+      href: "/"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: appLogo,
+      alt: "logo"
+    })),
+    brand: appName,
+    mobile: {
+      enableMenu: false,
+      hideLogo: false
+    },
+    addons: renderAddons()
+  }, rest, {
+    $bgcolor: blockletTheme === null || blockletTheme === void 0 ? void 0 : blockletTheme.background
+  }), !!(navItems !== null && navItems !== void 0 && navItems.length) && /*#__PURE__*/_react.default.createElement(_NavMenu.default, {
+    className: "header-nav",
+    items: navItems,
+    bgColor: "transparent"
+  }));
+}
+
+Header.propTypes = {
+  blockletMeta: _propTypes.default.object,
+  // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
+  // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
+  // - PropTypes.node: 将 addons 原样传给 UX Header 组件
+  addons: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
+};
+Header.defaultProps = {
+  blockletMeta: null,
+  addons: null
+};
+const StyledUxHeader = (0, _styledComponents.default)(_Header.default).withConfig({
+  displayName: "Header__StyledUxHeader",
+  componentId: "sc-kcf4st-0"
+})(["", " .header-logo{min-width:40px;}.header-nav{.navmenu-sub .navmenu-item{min-width:80px;}}"], _ref2 => {
+  let {
+    $bgcolor
+  } = _ref2;
+  return $bgcolor && "background-color: ".concat($bgcolor, ";");
+});

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@blocklet/ui-react",
+  "version": "1.17.13",
+  "description": "Some useful front-end web components that can be used in Blocklets.",
+  "keywords": [
+    "react",
+    "arcblock",
+    "component",
+    "blocklet"
+  ],
+  "author": "wangshijun<wangshijun2010@gmail.com>",
+  "homepage": "https://github.com/ArcBlock/ux#readme",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ArcBlock/ux.git"
+  },
+  "scripts": {
+    "lint": "eslint src stories tests",
+    "build": "babel src --out-dir lib --copy-files",
+    "watch": "babel src --out-dir lib -w --copy-files",
+    "precommit": "CI=1 yarn test",
+    "prepush": "CI=1 yarn test",
+    "prepublish": "npm run build",
+    "test": "npm run lint && node tools/jest.js",
+    "coverage": "npm run lint && yarn test -- --coverage"
+  },
+  "bugs": {
+    "url": "https://github.com/ArcBlock/ux/issues"
+  },
+  "dependencies": {
+    "@arcblock/did-connect": "^1.17.13",
+    "@arcblock/ux": "^1.17.13",
+    "@material-ui/core": "^4.12.3",
+    "core-js": "^3.6.4",
+    "styled-components": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.12.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.4",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-react": "^7.8.3",
+    "babel-plugin-styled-components": "^1.10.7",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "jest": "^24.1.0"
+  },
+  "gitHead": "da903274c188ed5dbb9e318b1495af6faa5ce668"
+}

package/src/Footer/index.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import useTheme from '@material-ui/core/styles/useTheme';
+import Container from '@material-ui/core/Container';
+import NavMenu from '@arcblock/ux/lib/NavMenu';
+
+/**
+ * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
+ */
+export default function Footer({ blockletMeta, ...rest }) {
+  const theme = useTheme();
+  // eslint-disable-next-line no-param-reassign
+  blockletMeta = blockletMeta || window.blocklet;
+  const { appLogo, appName, theme: blockletTheme, navigation } = blockletMeta;
+  return (
+    <Root {...rest} $bgcolor={blockletTheme?.background} $theme={theme}>
+      <Container>
+        <div className="footer_line">
+          <div className="footer_brand">
+            <img src={appLogo} alt="logo" />
+            <span>{appName}</span>
+          </div>
+          <div className="footer_nav">
+            {!!navigation?.length && (
+              <NavMenu
+                items={navigation
+                  .filter(item => item.link)
+                  .map(item => ({
+                    label: <a href={item.link}>{item.title}</a>,
+                  }))}
+              />
+            )}
+          </div>
+        </div>
+        <div className="footer_line">
+          <div className="footer_copyright">
+            <span>Powered by Blocklet Server</span>
+          </div>
+          <div className="footer_extra" />
+        </div>
+      </Container>
+    </Root>
+  );
+}
+
+Footer.propTypes = {
+  blockletMeta: PropTypes.object,
+};
+
+Footer.defaultProps = {
+  blockletMeta: null,
+};
+
+const Root = styled.div`
+  padding: 32px 40px;
+  border-top: 1px solid #eee;
+  color: #9397a1;
+  ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
+  .footer_line {
+    display: flex;
+    justify-content: space-between;
+  }
+  .footer_line + .footer_line {
+    margin-top: 32px;
+  }
+  .footer_brand {
+    display: flex;
+    align-items: center;
+    color: #777;
+    img {
+      height: 36px;
+    }
+    span {
+      margin-left: 8px;
+      font-size: 20px;
+    }
+  }
+  .footer_nav {
+    > * {
+      background: transparent;
+    }
+  }
+  ${props => props.$theme.breakpoints.down('sm')} {
+    .footer_line {
+      flex-direction: column;
+    }
+    .footer_line + .footer_line {
+      margin-top: 0;
+    }
+    .footer_brand {
+      img {
+        height: 24px;
+      }
+      span {
+        font-size: 16px;
+      }
+    }
+  }
+`;

package/src/Header/index.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import UxHeader from '@arcblock/ux/lib/Header';
+import NavMenu from '@arcblock/ux/lib/NavMenu';
+import { SessionContext } from '@arcblock/did-connect/lib/Session';
+import SessionManager from '@arcblock/did-connect/lib/SessionManager';
+import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+const isLinkActive = link => {
+  if (window.location.pathname === '/') {
+    return link === '/';
+  }
+  return link && link.indexOf(window.location.pathname) > -1;
+};
+
+// blocklet meta 中的 navigation 数据 => NavMenu 组件的 items
+const parseNavigation = navigation => {
+  const parseItem = item => {
+    if (item.items) {
+      return {
+        label: item.title,
+        children: item.items.map(parseItem),
+      };
+    }
+    let props = {};
+    // 临时处理: https://github.com/ArcBlock/blocklet-server/issues/4717
+    item.link = item.link.replace('/https:/', 'https://');
+    if (item.link.startsWith('http')) {
+      props = {
+        target: '_blank',
+        rel: 'noreferrer',
+      };
+    }
+    return {
+      label: (
+        <a href={item.link} {...props}>
+          {item.title}
+        </a>
+      ),
+      active: isLinkActive(item.link),
+    };
+  };
+  const items = navigation.map(parseItem);
+  return items;
+};
+
+/**
+ * 专门用于 (composable) blocklet 的 Header 组件, 解析 blocklet meta 中的数据, 通过组合 UX 中的 Header & NavMenu 组件来渲染
+ */
+export default function Header({ blockletMeta, addons, ...rest }) {
+  const sessionInfo = React.useContext(SessionContext);
+  const { locale } = useLocaleContext() || {};
+  // eslint-disable-next-line no-param-reassign
+  blockletMeta = blockletMeta || window.blocklet;
+  if (!blockletMeta) {
+    console.warn('blocklet meta is not found.');
+    return null;
+  }
+  const {
+    appLogo,
+    appName,
+    theme: blockletTheme,
+    navigation = [],
+    enableConnect = true,
+    enableLocale = true,
+  } = blockletMeta;
+  const navItems = parseNavigation(navigation);
+
+  const renderAddons = () => {
+    // 不关心内置的 session manager 和 locale selector, 直接覆盖 UX Header 的 addons
+    if (addons && typeof addons !== 'function') {
+      return addons;
+    }
+    let addonsArray = [];
+    // 启用了多语言并且检测到了 locale context
+    if (enableLocale && locale) {
+      addonsArray.push(<LocaleSelector showText={false} />);
+    }
+    // 启用了连接钱包并且检测到了 session context
+    if (enableConnect && sessionInfo) {
+      addonsArray.push(<SessionManager session={sessionInfo.session} showRole />);
+    }
+    // 在内置 addons 基础上定制 addons
+    if (typeof addons === 'function') {
+      addonsArray = addons(addonsArray) || [];
+    }
+    const addonsFragment = React.createElement(React.Fragment, null, ...addonsArray);
+    return addonsFragment;
+  };
+  return (
+    <StyledUxHeader
+      logo={
+        <a href="/">
+          <img src={appLogo} alt="logo" />
+        </a>
+      }
+      brand={appName}
+      mobile={{ enableMenu: false, hideLogo: false }}
+      addons={renderAddons()}
+      {...rest}
+      $bgcolor={blockletTheme?.background}>
+      {!!navItems?.length && (
+        <NavMenu className="header-nav" items={navItems} bgColor="transparent" />
+      )}
+    </StyledUxHeader>
+  );
+}
+
+Header.propTypes = {
+  blockletMeta: PropTypes.object,
+  // 需要考虑 定制的 addons 与内置的 连接钱包/选择语言 addons 共存的情况
+  // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
+  // - PropTypes.node: 将 addons 原样传给 UX Header 组件
+  addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+};
+
+Header.defaultProps = {
+  blockletMeta: null,
+  addons: null,
+};
+
+const StyledUxHeader = styled(UxHeader)`
+  ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
+  .header-logo {
+    min-width: 40px;
+  }
+  .header-nav {
+    .navmenu-sub .navmenu-item {
+      min-width: 80px;
+    }
+  }
+`;