@arcblock/ux 1.16.0 → 1.16.4

package/src/Layout/dashboard/sidebar.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import withTheme from '@material-ui/core/styles/withTheme';
+
+import { withRouter, Link } from 'react-router-dom';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import teal from '@material-ui/core/colors/teal';
+
+import ImageIcon from '../../Icon/image';
+import Logo from '../../Logo';
+
+function Sidebar({ location, theme, images, links, prefix, addons, ...rest }) {
+  const isSelected = (url, name) => {
+    const pattern = new RegExp(`/${name}`);
+    return pattern.test(location.pathname);
+  };
+
+  return (
+    <MenuItems {...rest}>
+      <Link to="/" className="sidebar-logo">
+        <Logo showText={false} size={20} />
+      </Link>
+      {links.map(({ url, name, title, showBadge }) => {
+        const selected = isSelected(url, name);
+        return (
+          <MenuItem component={Link} key={url} selected={selected} to={url}>
+            <ImageIcon
+              name={images[name]}
+              size={36}
+              color={selected ? '#00c2c4' : theme.typography.color.main}
+              prefix={prefix}
+              showBadge={showBadge}
+            />
+            <Typography component="span" className="menu-title">
+              {title}
+            </Typography>
+          </MenuItem>
+        );
+      })}
+      <div style={{ flex: 1 }} />
+      {addons}
+    </MenuItems>
+  );
+}
+
+Sidebar.propTypes = {
+  location: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
+  images: PropTypes.object.isRequired,
+  links: PropTypes.array.isRequired,
+  prefix: PropTypes.string,
+  addons: PropTypes.any,
+};
+
+Sidebar.defaultProps = {
+  prefix: '/images',
+  addons: null,
+};
+
+const MenuItems = React.memo(styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  && .sidebar-logo {
+    display: none;
+    border-bottom: 1px solid #eee;
+    background: ${props => props.theme.palette.background.default};
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 10px 0;
+    text-align: center;
+    font-size: 0;
+  }
+  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+    && .sidebar-logo {
+      display: block;
+    }
+  }
+`);
+
+const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
+
+const MenuItem = styled(Button)`
+  && {
+    display: block;
+    width: 100%;
+    transition: all 200ms ease-in-out;
+    background: ${props => (props.selected ? gradient : '')};
+    padding: 24px 0;
+    border-left: 2px solid ${props => (props.selected ? teal.A700 : 'transparent')};
+
+    &:hover {
+      background: ${gradient};
+      border-left-color: ${teal.A700};
+    }
+
+    .menu-title {
+      margin-top: 8px;
+      font-size: 12px;
+      font-weight: 500;
+      text-align: center;
+      text-transform: capitalize;
+      letter-spacing: normal;
+      width: 80%;
+    }
+
+    .MuiButton-label {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+`;
+
+export default withRouter(withTheme(Sidebar));

package/src/Layout/index.js

@@ -0,0 +1,318 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Helmet from 'react-helmet';
+import Link from '@material-ui/core/Link';
+
+import AppBar from '@material-ui/core/AppBar';
+import Container from '@material-ui/core/Container';
+import Drawer from '@material-ui/core/Drawer';
+import Divider from '@material-ui/core/Divider';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+
+import Footer from '../Footer';
+import OpenInWallet from '../Wallet/Open';
+import Icon from '../Icon';
+import Logo from '../Logo';
+
+export default function Layout({
+  title,
+  brand,
+  description,
+  links,
+  logo,
+  showLogo,
+  addons,
+  footer,
+  baseUrl,
+  homeUrl,
+  children,
+  variant,
+  contentOnly,
+  ...rest
+}) {
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const onToggleDrawer = () => {
+    setDrawerOpen(!drawerOpen);
+  };
+
+  if (contentOnly) {
+    return <Container>{children}</Container>;
+  }
+
+  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 = (
+    <div>
+      <Toolbar className="toolbar toolbar--drawer">
+        {showLogo ? <div className="menu-logo">{logo}</div> : <></>}
+        <div style={{ flexGrow: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>{brand}</div>
+      </Toolbar>
+      <Divider />
+      <List>
+        {links.map(x => (
+          <Link className="nav-link" key={x.url} href={x.url}>
+            <ListItem button className={activeLink === x.url ? 'drawer-highlight-nav' : ''}>
+              <ListItemText>
+                {x.icon && (
+                  <Icon
+                    name={x.icon}
+                    size={18 * (x.iconZoom || 1)}
+                    color="inherit"
+                    style={{ marginRight: '5px' }}
+                  />
+                )}
+                {x.title}
+              </ListItemText>
+            </ListItem>
+          </Link>
+        ))}
+      </List>
+    </div>
+  );
+
+  return (
+    <>
+      <Div {...rest}>
+        <Helmet title={title} />
+        <AppBar
+          position="fixed"
+          className={`appbar appbar--${variant}`}
+          color="default"
+          style={{ height: 56 }}>
+          <Container disableGutters>
+            <Toolbar className="toolbar">
+              <IconButton
+                color="inherit"
+                aria-label="open drawer"
+                edge="start"
+                onClick={onToggleDrawer}
+                className="menu-button">
+                <MenuIcon />
+              </IconButton>
+              {showLogo ? <div className="menu-logo">{logo}</div> : <></>}
+              <Typography
+                href={homeUrl}
+                component="a"
+                variant="h5"
+                color="inherit"
+                noWrap
+                display="block"
+                className="brand">
+                {brand}
+              </Typography>
+              {description && (
+                <Typography
+                  component="small"
+                  variant="subtitle2"
+                  color="inherit"
+                  noWrap
+                  className="description">
+                  {description}
+                </Typography>
+              )}
+              <div style={{ flexGrow: 1 }} />
+              <div className="nav-links">
+                {links.map(x => (
+                  <Link
+                    key={x.url}
+                    href={x.url}
+                    className={`nav-link ${activeLink === x.url ? 'highlight-nav' : ''}`}
+                    color={x.color}>
+                    {x.icon && (
+                      <Icon
+                        name={x.icon}
+                        size={20 * (x.iconZoom || 1)}
+                        color="inherit"
+                        style={{ marginRight: '5px' }}
+                      />
+                    )}
+                    {x.title}
+                  </Link>
+                ))}
+              </div>
+              {addons}
+            </Toolbar>
+          </Container>
+        </AppBar>
+        <div className="toolbar" />
+        <Container style={{ marginTop: 16, flex: 1 }}>{children}</Container>
+        {footer}
+        {!!baseUrl && <OpenInWallet locale="zh" link={baseUrl} />}
+      </Div>
+      <DrawerDiv>
+        <Drawer
+          variant="temporary"
+          open={drawerOpen}
+          onClose={onToggleDrawer}
+          classes={{
+            paper: 'drawer-paper',
+          }}
+          ModalProps={{
+            keepMounted: true, // Better open performance on mobile.
+            disablePortal: true,
+          }}>
+          {drawer}
+        </Drawer>
+      </DrawerDiv>
+    </>
+  );
+}
+
+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: <Logo showText={false} style={{ width: '40px', height: '40px' }} />,
+  variant: 'shadow',
+  addons: undefined,
+  description: undefined,
+  footer: (
+    <Container>
+      <Footer />
+    </Container>
+  ),
+};
+
+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;
+    }
+  }
+
+  @media (min-width: ${props => props.theme.breakpoints.values.md}px) {
+    .toolbar {
+      .menu-button {
+        display: none;
+      }
+      .menu-logo {
+        & + .brand {
+          padding-left: 45px;
+          margin-left: -45px;
+        }
+      }
+    }
+  }
+
+  @media (max-width: ${props => props.theme.breakpoints.values.md - 1}px) {
+    .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/src/Locale/browser-lang.js

@@ -0,0 +1,63 @@
+/* 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/src/Locale/context.js

@@ -0,0 +1,88 @@
+/* eslint-disable no-prototype-builtins */
+import React, { useState, useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
+import Cookie from 'js-cookie';
+
+import browserLang from './browser-lang';
+import { getCookieOptions } from '../Util';
+
+const cookieName = 'nf_lang';
+const languages = [
+  { value: 'en', text: 'English' },
+  { value: 'zh', text: '简体中文' },
+];
+const langParams = {
+  languages: ['zh', 'en'],
+  fallback: 'en',
+};
+
+// 跨应用传递多语言选择的方式是在 query string 中添加 locale 参数，LocaleSelector 要高优先级遵守这个参数
+const getLocaleFromSearchParams = (url = window.location.href) => {
+  const locale = new URL(url).searchParams.get('locale');
+  if (languages.find(x => x.value === locale)) {
+    return locale;
+  }
+  return null;
+};
+
+const getLocale = locale =>
+  locale || getLocaleFromSearchParams() || Cookie.get(cookieName) || browserLang(langParams);
+const setLocale = locale => Cookie.set(cookieName, locale, getCookieOptions());
+
+const replace = (template, data) =>
+  template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
+
+const LocaleContext = React.createContext();
+const { Provider, Consumer } = LocaleContext;
+
+function LocaleProvider({ children, locale, translations, ...rest }) {
+  const [currentLocale, setCurrentLocale] = useState(getLocale(locale));
+
+  useEffect(() => {
+    setLocale(currentLocale);
+  }, [currentLocale]);
+
+  const changeLocale = newLocale => {
+    setCurrentLocale(newLocale);
+  };
+
+  const translate = (key, data) => {
+    if (!translations[currentLocale] || !translations[currentLocale][key]) {
+      console.warn(`Warning: no ${key} translation of ${currentLocale}`);
+      return key;
+    }
+
+    return replace(translations[currentLocale][key], data);
+  };
+
+  return (
+    <Provider value={{ locale: currentLocale, changeLocale, t: translate, ...rest }}>
+      {children}
+    </Provider>
+  );
+}
+
+function useLocaleContext() {
+  const context = useContext(LocaleContext);
+  return context;
+}
+
+LocaleProvider.propTypes = {
+  children: PropTypes.any.isRequired,
+  translations: PropTypes.object.isRequired,
+  locale: PropTypes.string,
+};
+
+LocaleProvider.defaultProps = {
+  locale: '',
+};
+
+export {
+  LocaleProvider,
+  Consumer as LocaleConsumer,
+  LocaleContext,
+  useLocaleContext,
+  setLocale,
+  getLocale,
+  languages,
+};