@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/layout/addon.js

@@ -0,0 +1,114 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import { useContext, cloneElement } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/IconButton';
+import { useLocation } from 'react-router-dom';
+import SessionManager from '@arcblock/did-connect/lib/SessionManager';
+import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import GlobeIcon from '@arcblock/icons/lib/Globe';
+import QuestionMarkIcon from '@arcblock/icons/lib/QuestionMarkCircle';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function HeaderAddon({
+  SessionContext,
+  extraItems,
+  showLocale,
+  showHelper,
+  showSessionManager,
+  sessionManagerProps
+}) {
+  const {
+    session
+  } = useContext(SessionContext);
+  const {
+    locale
+  } = useContext(LocaleContext);
+  const location = useLocation();
+  const defaultEndpoint = 'https://developer.blocklet.io/docs';
+  const docMap = {
+    '/store': {
+      endpoint: 'https://store.blocklet.io'
+    },
+    '/dashboard': {
+      path: '/conceptual/overview'
+    },
+    '/settings/router': {
+      path: '/conceptual/server-architecture'
+    }
+  };
+  const onHelpClick = () => {
+    const pathName = location.pathname;
+    let doc = {};
+    if (pathName.indexOf('/store') > -1) {
+      doc = docMap['/store'];
+    } else if (docMap[pathName]) {
+      doc = docMap[pathName];
+    }
+    window.open(`${doc.endpoint || defaultEndpoint}/${locale}${doc.path || ''}`, '_blank');
+  };
+  return /*#__PURE__*/_jsxs(Div, {
+    children: [extraItems.map((x, index) => /*#__PURE__*/cloneElement(x, {
+      key: index
+    })), showLocale && /*#__PURE__*/_jsx(LocaleSelector, {
+      "data-cy": "locale-addon",
+      icon: GlobeIcon,
+      size: 23,
+      showText: false,
+      className: "locale-addon"
+    }), showHelper && /*#__PURE__*/_jsx(Button, {
+      onClick: onHelpClick,
+      children: /*#__PURE__*/_jsx(QuestionMarkIcon, {})
+    }), showSessionManager && /*#__PURE__*/_jsx(SessionManager, {
+      locale: locale,
+      session: session,
+      size: 24,
+      showRole: true,
+      ...sessionManagerProps
+    })]
+  });
+}
+HeaderAddon.propTypes = {
+  SessionContext: PropTypes.object.isRequired,
+  webWalletUrl: PropTypes.string,
+  extraItems: PropTypes.array,
+  showLocale: PropTypes.bool,
+  showSessionManager: PropTypes.bool,
+  showHelper: PropTypes.bool,
+  sessionManagerProps: PropTypes.object
+};
+HeaderAddon.defaultProps = {
+  webWalletUrl: '',
+  extraItems: [],
+  showLocale: true,
+  showSessionManager: true,
+  showHelper: true,
+  sessionManagerProps: {}
+};
+const Div = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .MuiIconButton-root svg {
+    width: 26px;
+    height: 26px;
+  }
+
+  .user-addon {
+    .user-avatar {
+      width: 28px;
+      border-radius: 14px;
+      height: auto;
+    }
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    > button,
+    > a {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+  }
+`;

package/es/layout/feedback.js

@@ -0,0 +1,55 @@
+/** @jsxImportSource @emotion/react */
+import PropTypes from 'prop-types';
+import { Box } from '@mui/material';
+import Link from '@mui/material/Link';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export default function Feedback({
+  infos
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const infoStr = infos.map(x => `* ${x.label}: ${x.value}`).join('\n');
+  const feedbackUrl = new URL('https://github.com/blocklet/blocklet-site/issues/new');
+  feedbackUrl.searchParams.set('title', '[Feedback]');
+  feedbackUrl.searchParams.set('body', `<!-- [Enter feedback here] -->
+
+
+
+<!--
+Document Details
+${infoStr}
+* Page: ${window.location.href}
+-->
+`);
+  return _jsx(Box, {
+    sx: {
+      mx: {
+        xs: 0,
+        md: 2
+      }
+    },
+    children: _jsx(Link, {
+      sx: {
+        color: 'text.primary'
+      },
+      target: "_blank",
+      href: feedbackUrl.href,
+      rel: "noreferrer",
+      style: {
+        textDecoration: 'underline'
+      },
+      children: t('common.reportIssue')
+    })
+  });
+}
+Feedback.propTypes = {
+  infos: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  }))
+};
+Feedback.defaultProps = {
+  infos: []
+};