@arcblock/ux 2.6.8 → 2.7.0

package/es/Layout/index.js

@@ -0,0 +1,335 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import Link from '@mui/material/Link';
+import AppBar from '@mui/material/AppBar';
+import Container from '@mui/material/Container';
+import Drawer from '@mui/material/Drawer';
+import Divider from '@mui/material/Divider';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+import Footer from '../Footer';
+import OpenInWallet from '../Wallet/Open';
+import Icon from '../Icon';
+import Logo from '../Logo';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function Layout({
+  title,
+  brand,
+  description,
+  links,
+  logo,
+  showLogo,
+  addons,
+  footer,
+  baseUrl,
+  homeUrl,
+  children,
+  variant,
+  contentOnly,
+  ...rest
+}) {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const onToggleDrawer = () => {
+    setDrawerOpen(!drawerOpen);
+  };
+  if (contentOnly) {
+    return /*#__PURE__*/_jsx(Container, {
+      children: children
+    });
+  }
+  let activeLink = '';
+  const {
+    pathname: currentPath
+  } = new URL(window.location);
+  links.forEach(link => {
+    if (currentPath.startsWith(link.url) && link.url.length > activeLink.length) {
+      activeLink = link.url;
+    }
+  });
+  const drawer = /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(Toolbar, {
+      className: "toolbar toolbar--drawer",
+      children: [!!showLogo && /*#__PURE__*/_jsx("div", {
+        className: "menu-logo",
+        children: logo
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          flexGrow: 1,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        },
+        children: brand
+      })]
+    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
+      children: links.map(x => /*#__PURE__*/_jsx(Link, {
+        className: "nav-link",
+        href: x.url,
+        underline: "hover",
+        children: /*#__PURE__*/_jsx(ListItem, {
+          button: true,
+          className: activeLink === x.url ? 'drawer-highlight-nav' : '',
+          children: /*#__PURE__*/_jsxs(ListItemText, {
+            children: [x.icon && /*#__PURE__*/_jsx(Icon, {
+              name: x.icon,
+              size: 18 * (x.iconZoom || 1),
+              color: "inherit",
+              style: {
+                marginRight: '5px'
+              }
+            }), x.title]
+          })
+        })
+      }, x.url))
+    })]
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Div, {
+      ...rest,
+      children: [/*#__PURE__*/_jsx(Helmet, {
+        title: title
+      }), /*#__PURE__*/_jsx(AppBar, {
+        position: "fixed",
+        className: `appbar appbar--${variant}`,
+        color: "default",
+        style: {
+          height: 56
+        },
+        children: /*#__PURE__*/_jsx(Container, {
+          disableGutters: true,
+          children: /*#__PURE__*/_jsxs(Toolbar, {
+            className: "toolbar",
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              color: "inherit",
+              "aria-label": "open drawer",
+              edge: "start",
+              onClick: onToggleDrawer,
+              className: "menu-button",
+              size: "large",
+              children: /*#__PURE__*/_jsx(MenuIcon, {})
+            }), !!showLogo && /*#__PURE__*/_jsx("div", {
+              className: "menu-logo",
+              children: logo
+            }), /*#__PURE__*/_jsx(Typography, {
+              href: homeUrl,
+              component: "a",
+              variant: "h5",
+              color: "inherit",
+              noWrap: true,
+              display: "block",
+              className: "brand",
+              children: brand
+            }), description && /*#__PURE__*/_jsx(Typography, {
+              component: "small",
+              variant: "subtitle2",
+              color: "inherit",
+              noWrap: true,
+              className: "description",
+              children: description
+            }), /*#__PURE__*/_jsx("div", {
+              style: {
+                flexGrow: 1
+              }
+            }), /*#__PURE__*/_jsx("div", {
+              className: "nav-links",
+              children: links.map(x => /*#__PURE__*/_jsxs(Link, {
+                href: x.url,
+                className: `nav-link ${activeLink === x.url ? 'highlight-nav' : ''}`,
+                color: x.color,
+                underline: "hover",
+                children: [x.icon && /*#__PURE__*/_jsx(Icon, {
+                  name: x.icon,
+                  size: 20 * (x.iconZoom || 1),
+                  color: "inherit",
+                  style: {
+                    marginRight: '5px'
+                  }
+                }), x.title]
+              }, x.url))
+            }), addons]
+          })
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "toolbar"
+      }), /*#__PURE__*/_jsx(Container, {
+        style: {
+          marginTop: 16,
+          flex: 1
+        },
+        children: children
+      }), footer, !!baseUrl && /*#__PURE__*/_jsx(OpenInWallet, {
+        locale: "zh",
+        link: baseUrl
+      })]
+    }), /*#__PURE__*/_jsx(DrawerDiv, {
+      children: /*#__PURE__*/_jsx(Drawer, {
+        variant: "temporary",
+        open: drawerOpen,
+        onClose: onToggleDrawer,
+        classes: {
+          paper: 'drawer-paper'
+        },
+        ModalProps: {
+          keepMounted: true,
+          // Better open performance on mobile.
+          disablePortal: true
+        },
+        children: drawer
+      })
+    })]
+  });
+}
+Layout.propTypes = {
+  title: PropTypes.string.isRequired,
+  brand: PropTypes.any.isRequired,
+  description: PropTypes.any,
+  addons: PropTypes.any,
+  showLogo: PropTypes.bool,
+  logo: PropTypes.any,
+  links: PropTypes.array,
+  children: PropTypes.any.isRequired,
+  baseUrl: PropTypes.string,
+  homeUrl: PropTypes.string,
+  variant: PropTypes.oneOf(['shadow', 'border']),
+  footer: PropTypes.any,
+  contentOnly: PropTypes.bool
+};
+Layout.defaultProps = {
+  contentOnly: false,
+  baseUrl: '',
+  homeUrl: '/',
+  links: [],
+  showLogo: false,
+  logo: /*#__PURE__*/_jsx(Logo, {
+    showText: false,
+    style: {
+      width: '40px',
+      height: '40px'
+    }
+  }),
+  variant: 'shadow',
+  addons: undefined,
+  description: undefined,
+  footer: /*#__PURE__*/_jsx(Container, {
+    children: /*#__PURE__*/_jsx(Footer, {})
+  })
+};
+const Div = styled('div')`
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  .appbar {
+    &.appbar--border {
+      box-shadow: none;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1px;
+        bottom: -1px;
+        display: block;
+        background-color: rgba(0, 0, 0, 0.12);
+      }
+    }
+  }
+
+  .toolbar {
+    min-height: 56px;
+    background: inherit;
+    white-space: nowrap;
+    .menu-logo {
+      font-size: 0;
+      margin-right: 8px;
+    }
+
+    .nav-links {
+      display: flex;
+      align-items: center;
+      .nav-link {
+        margin: 8px 12px;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+      }
+
+      .highlight-nav {
+        font-weight: bolder;
+      }
+    }
+    .brand {
+      cursor: pointer;
+      text-decoration: none;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 1;
+    }
+    .description {
+      color: #999;
+      font-size: 15px;
+      margin-left: 10px;
+      font-weight: normal;
+      flex-shrink: 999999;
+    }
+  }
+
+  ${props => props.theme.breakpoints.up('md')} {
+    .toolbar {
+      .menu-button {
+        display: none;
+      }
+      .menu-logo {
+        & + .brand {
+          padding-left: 45px;
+          margin-left: -45px;
+        }
+      }
+    }
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    .toolbar {
+      .nav-links,
+      .menu-logo,
+      .description {
+        display: none;
+      }
+    }
+  }
+`;
+const DrawerDiv = styled('nav')`
+  width: 240px;
+  .drawer-paper {
+    width: 240px;
+  }
+  .toolbar {
+    min-height: 56px;
+  }
+
+  a:hover,
+  a:active,
+  a:visited,
+  a:focus {
+    text-decoration: none;
+  }
+
+  .drawer-highlight-nav {
+    background-color: #eee;
+  }
+
+  .toolbar--drawer {
+    font-size: 18px;
+    .menu-logo {
+      display: inline-flex;
+    }
+  }
+`;

package/es/Locale/browser-lang.js

@@ -0,0 +1,52 @@
+/* eslint-disable no-param-reassign */
+function startsWith(string, target, position) {
+  const {
+    length
+  } = string;
+  position = position == null ? 0 : position;
+  if (position < 0) {
+    position = 0;
+  } else if (position > length) {
+    position = length;
+  }
+  target = `${target}`;
+  // eslint-disable-next-line eqeqeq
+  return string.slice(position, position + target.length) == target;
+}
+function getBrowserLang() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  const lang = window.navigator.languages && window.navigator.languages[0] || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage || window.navigator.systemLanguage || null;
+  return lang;
+}
+function normalizeCode(code) {
+  return (code || '').toLowerCase().replace(/-/, '_');
+}
+function getPreferredLanguage(options) {
+  if (!options) {
+    return getBrowserLang();
+  }
+  const {
+    languages,
+    fallback
+  } = options;
+  if (!options.languages) {
+    return fallback;
+  }
+
+  // some browsers report language as en-US instead of en_US
+  const browserLanguage = normalizeCode(getBrowserLang());
+  if (!browserLanguage) {
+    return fallback;
+  }
+  const match = languages.filter(lang => normalizeCode(lang) === browserLanguage);
+  if (match.length > 0) {
+    return match[0] || fallback;
+  }
+
+  // en == en_US
+  const matchCodeOnly = languages.filter(lang => startsWith(browserLanguage, lang));
+  return matchCodeOnly[0] || fallback;
+}
+export default getPreferredLanguage;

package/es/Locale/context.js

@@ -0,0 +1,114 @@
+/* eslint-disable no-prototype-builtins */
+import { createContext, useState, useEffect, useContext } from 'react';
+import get from 'lodash/get';
+import PropTypes from 'prop-types';
+import Cookie from 'js-cookie';
+import browserLang from './browser-lang';
+import { translate } from './util';
+import { getCookieOptions } from '../Util';
+import { jsx as _jsx } from "react/jsx-runtime";
+const cookieName = 'nf_lang';
+
+// 跨应用传递多语言选择的方式是在 query string 中添加 locale 参数，LocaleSelector 要高优先级遵守这个参数
+const getLocaleFromSearchParams = (languages, url = window.location.href) => {
+  const locale = new URL(url).searchParams.get('locale');
+  if (languages.find(x => x.code === locale)) {
+    return locale;
+  }
+  return null;
+};
+const setLocaleParam = (locale, url = window.location.href) => {
+  const urlObj = new URL(url);
+  const hasLocaleParam = urlObj.searchParams.has('locale');
+  if (hasLocaleParam) {
+    urlObj.searchParams.set('locale', locale);
+    window.history.replaceState({}, '', urlObj.href);
+  }
+};
+const getLocale = (languages = []) => {
+  const langParams = {
+    languages: languages.map(item => item.code),
+    // 取 languages 首个元素的 code 值, 如果不存在则取 'en'
+    fallback: languages?.[0]?.code || 'en'
+  };
+  return getLocaleFromSearchParams(languages) || Cookie.get(cookieName) || browserLang(langParams);
+};
+const setLocale = locale => {
+  Cookie.set(cookieName, locale, getCookieOptions());
+  setLocaleParam(locale);
+};
+const getLanguages = arg => {
+  const env = get(window, 'blocklet.languages');
+  if (Array.isArray(env) && env.length) {
+    return env;
+  }
+  if (Array.isArray(arg) && arg.length) {
+    return arg;
+  }
+  return [{
+    code: 'en',
+    name: 'English'
+  }, {
+    code: 'zh',
+    name: '简体中文'
+  }];
+};
+const LocaleContext = /*#__PURE__*/createContext();
+const {
+  Provider,
+  Consumer
+} = LocaleContext;
+function LocaleProvider({
+  children,
+  locale,
+  fallbackLocale,
+  translations,
+  languages,
+  ...rest
+}) {
+  const langs = getLanguages(languages);
+  const [currentLocale, setCurrentLocale] = useState(locale || getLocale(langs));
+  const changeLocale = newLocale => {
+    setCurrentLocale(newLocale);
+    setLocale(newLocale);
+  };
+  useEffect(() => {
+    const tmpLocale = locale || getLocale(langs);
+    if (tmpLocale !== currentLocale) {
+      changeLocale(locale);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [locale]);
+  const t = (key, data) => translate(translations, key, currentLocale, fallbackLocale, data);
+  return /*#__PURE__*/_jsx(Provider, {
+    value: {
+      locale: currentLocale,
+      changeLocale,
+      t,
+      languages: langs,
+      ...rest
+    },
+    children: children
+  });
+}
+function useLocaleContext() {
+  const context = useContext(LocaleContext);
+  return context;
+}
+LocaleProvider.propTypes = {
+  children: PropTypes.any.isRequired,
+  translations: PropTypes.object.isRequired,
+  locale: PropTypes.string,
+  // 会影响 translate(key) 的结果 - 当 key 无效时查找 fallbackLocale 对应的翻译结果
+  fallbackLocale: PropTypes.string,
+  languages: PropTypes.arrayOf(PropTypes.shape({
+    code: PropTypes.string,
+    name: PropTypes.string
+  }))
+};
+LocaleProvider.defaultProps = {
+  locale: '',
+  fallbackLocale: '',
+  languages: []
+};
+export { LocaleProvider, Consumer as LocaleConsumer, LocaleContext, useLocaleContext, setLocale, getLocale };

package/es/Locale/languages.js

@@ -0,0 +1,60 @@
+// from: https://github.com/meikidd/iso-639-1/blob/master/src/data.js
+const languages = {
+  ar: {
+    name: 'Arabic',
+    nativeName: 'اَلْعَرَبِيَّةُ'
+  },
+  de: {
+    name: 'German',
+    nativeName: 'Deutsch'
+  },
+  en: {
+    name: 'English',
+    nativeName: 'English'
+  },
+  es: {
+    name: 'Spanish',
+    nativeName: 'Español'
+  },
+  fr: {
+    name: 'French',
+    nativeName: 'Français'
+  },
+  it: {
+    name: 'Italian',
+    nativeName: 'Italiano'
+  },
+  ja: {
+    name: 'Japanese',
+    nativeName: '日本語'
+  },
+  ko: {
+    name: 'Korean',
+    nativeName: '한국어'
+  },
+  mn: {
+    name: 'Mongolian',
+    nativeName: 'Монгол хэл'
+  },
+  pt: {
+    name: 'Portuguese',
+    nativeName: 'Português'
+  },
+  ru: {
+    name: 'Russian',
+    nativeName: 'Русский'
+  },
+  zh: {
+    name: 'Simplified Chinese',
+    nativeName: '简体中文'
+  },
+  'zh-TW': {
+    name: 'Traditional Chinese',
+    nativeName: '繁體中文'
+  }
+};
+export default Object.keys(languages).map(code => ({
+  code,
+  ...languages[code]
+}));
+export { languages as map };