@blocklet/ui-react 3.4.14 → 3.5.0

package/src/Footer/index.jsx

@@ -1,111 +0,0 @@
-import { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { styled, useTheme, deepmerge, ThemeProvider } from '@arcblock/ux/lib/Theme';
-import { withErrorBoundary } from 'react-error-boundary';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
-import useBlockletLogo from '@arcblock/ux/lib/hooks/use-blocklet-logo';
-import omit from 'lodash/omit';
-
-import InternalFooter from './internal-footer';
-import { mapRecursive } from '../utils';
-import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
-import { BlockletMetaProps } from '../types';
-import withHideWhenEmbed from '../libs/with-hide-when-embed';
-
-/**
- * 专门用于 (composable) blocklet 的 Footer 组件, 基于 blocklet meta 中的数据渲染
- */
-function Footer({ meta = {}, theme: themeOverrides = {}, ...rest }) {
-  const { locale, defaultLocale } = useLocaleContext() || {};
-  const parentTheme = useTheme();
-  const formattedBlocklet = useMemo(() => {
-    const blocklet = Object.assign({}, window.blocklet, meta);
-    try {
-      return formatBlockletInfo(blocklet);
-    } catch (e) {
-      console.error('Failed to format blocklet info', e, blocklet);
-      return blocklet;
-    }
-  }, [meta]);
-
-  const mergeTheme = useMemo(() => deepmerge(parentTheme, themeOverrides), [parentTheme, themeOverrides]);
-  const appLogo = useBlockletLogo({
-    key: 'xs', // 始终优先长 logo
-    meta,
-    theme: themeOverrides,
-  });
-
-  if (!formattedBlocklet.appName) {
-    return null;
-  }
-
-  const { appName, appDescription, description, copyright } = formattedBlocklet;
-  const $bgColor = mergeTheme.palette.background.default;
-
-  const localized = {
-    footerNav:
-      getLocalizedNavigation({
-        navigation: formattedBlocklet?.navigation?.footer,
-        locale,
-        defaultLocale,
-        section: 'footer',
-      }) || [],
-    socialMedia:
-      getLocalizedNavigation({
-        navigation: formattedBlocklet?.navigation?.social,
-        locale,
-        defaultLocale,
-        section: 'footer',
-      }) || [],
-    links:
-      getLocalizedNavigation({
-        navigation: formattedBlocklet?.navigation?.bottom,
-        locale,
-        defaultLocale,
-        section: 'footer',
-      }) || [],
-  };
-
-  const props = {
-    brand: {
-      name: appName,
-      description: appDescription || description,
-      logo: appLogo,
-    },
-    navigation: mapRecursive(
-      localized.footerNav,
-      (item) => ({
-        ...item,
-        label: item.title,
-        link: item.link,
-      }),
-      'items'
-    ),
-    copyright,
-    socialMedia: localized.socialMedia,
-    links: localized.links.map((item) => ({ ...item, label: item.title })),
-  };
-
-  return (
-    <ThemeProvider theme={mergeTheme}>
-      <StyledInternalFooter {...props} {...omit(rest, ['bordered'])} $bordered={rest?.bordered} $bgcolor={$bgColor} />
-    </ThemeProvider>
-  );
-}
-
-Footer.propTypes = {
-  meta: BlockletMetaProps,
-  // 允许覆盖 footer 内置的 theme
-  theme: PropTypes.object,
-};
-
-const StyledInternalFooter = styled(InternalFooter)`
-  ${({ $bordered, theme }) => `border-top: 1px solid ${$bordered && theme.palette.divider};`}
-  color: ${({ theme }) => theme.palette.text.secondary};
-  ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
-`;
-
-export default withErrorBoundary(withHideWhenEmbed(Footer), {
-  FallbackComponent: ErrorFallback,
-});

package/src/Footer/internal-footer.jsx

@@ -1,139 +0,0 @@
-import PropTypes from 'prop-types';
-import { Box } from '@mui/material';
-import clsx from 'clsx';
-
-import Brand from './brand';
-import Links from './links';
-import SocialMedia from './social-media';
-import Copyright from './copyright';
-import StandardLayout from './layout/standard';
-import PlainLayout from './layout/plain';
-
-const layouts = [
-  {
-    name: 'plain',
-    // 没有 navigation 和 socialMedia, 使用一个简单的两端对齐布局
-    support: (_, data) => !data.navigation?.length && !data.socialMedia?.length,
-    component: PlainLayout,
-  },
-  {
-    name: 'standard',
-    // 默认标准布局
-    support: () => true,
-    component: StandardLayout,
-  },
-];
-
-const layoutsKeyByName = layouts.reduce((acc, cur) => ({ ...acc, [cur.name]: cur }), {});
-
-/**
- * 通用的内部 footer 组件, 定义并渲染常见的几种 footer 元素: brand/navigation/social medial 等
- */
-function InternalFooter({ ...props }) {
-  const {
-    brand = null,
-    navigation = null,
-    socialMedia = null,
-    copyright = null,
-    links = null,
-    layout = 'auto',
-    ...rest
-  } = props;
-  const renderBrand = () => {
-    return brand ? <Brand {...brand} /> : null;
-  };
-  const renderNavigation = () => {
-    return navigation?.length ? <Links links={navigation} minColumns={3} /> : null;
-  };
-  const renderSocialMedia = () => {
-    return socialMedia?.length ? <SocialMedia items={socialMedia} /> : null;
-  };
-  const renderCopyright = () => {
-    // 如果 copyright.owner 不存在, 则使用 brand.name, 如果 brand.name 也不存在, copyright 元素为空
-    const copyrightOwner = copyright?.owner || brand?.name;
-    if (!copyrightOwner) {
-      return null;
-    }
-    return <Copyright owner={copyrightOwner} year={copyright?.year || undefined} />;
-  };
-  const renderLinks = () => {
-    return links?.length ? <Links flowLayout links={links} /> : null;
-  };
-
-  const elements = {
-    brand: renderBrand(),
-    navigation: renderNavigation(),
-    socialMedia: renderSocialMedia(),
-    copyright: renderCopyright(),
-    links: renderLinks(),
-  };
-  let LayoutComponent = null;
-  if (layout === 'auto') {
-    LayoutComponent = layouts.find((item) => item.support(elements, props)).component;
-  } else {
-    LayoutComponent = layoutsKeyByName[layout]?.component;
-  }
-  if (!LayoutComponent) {
-    throw new Error(`layout ${layout} is not supported.`);
-  }
-
-  return (
-    <Box
-      {...rest}
-      className={clsx('blocklet__footer', rest.className)}
-      sx={[
-        {
-          position: 'relative',
-        },
-        ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
-      ]}>
-      <LayoutComponent elements={elements} data={props} />
-      <Box
-        sx={{
-          position: 'absolute',
-          right: 16,
-          bottom: 0,
-          fontSize: 12,
-          color: 'transparent',
-          '::selection': { background: '#000', color: '#fff' },
-        }}>
-        {window?.blocklet?.version}
-      </Box>
-    </Box>
-  );
-}
-
-InternalFooter.propTypes = {
-  brand: PropTypes.shape({
-    name: PropTypes.node,
-    description: PropTypes.string,
-    logo: PropTypes.node,
-  }),
-  navigation: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      link: PropTypes.string,
-    })
-  ),
-  socialMedia: PropTypes.arrayOf(
-    PropTypes.shape({
-      icon: PropTypes.node,
-      link: PropTypes.string,
-    })
-  ),
-  copyright: PropTypes.shape({
-    owner: PropTypes.string,
-    year: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  }),
-  // privacy/legal 等链接, 常放于 footer 右下侧或最底部
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.node,
-      link: PropTypes.string,
-    })
-  ),
-  // 可显式指定 footer layout, 默认根据内容自动决定 layout
-  layout: PropTypes.oneOf(['auto', 'standard', 'plain']),
-};
-
-export default InternalFooter;

package/src/Footer/layout/plain.jsx

@@ -1,55 +0,0 @@
-import { cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import { Container } from '@mui/material';
-import { styled } from '@arcblock/ux/lib/Theme';
-import Row from './row';
-
-/**
- * footer plain layout
- */
-function PlainLayout({ elements, data, ...rest }) {
-  return (
-    <Root {...rest}>
-      <Container style={{ padding: 0 }}>
-        <Container className="plain-layout-container">
-          {elements.links && (
-            <Row sx={{ width: 1 }} autoCenter>
-              {elements.copyright}
-              {elements.links}
-            </Row>
-          )}
-          {!elements.links && (
-            <>
-              {cloneElement(elements.brand, { name: null, description: null })}
-              {elements.copyright}
-            </>
-          )}
-        </Container>
-      </Container>
-    </Root>
-  );
-}
-
-PlainLayout.propTypes = {
-  elements: PropTypes.shape({
-    brand: PropTypes.element,
-    navigation: PropTypes.element,
-    socialMedia: PropTypes.element,
-    copyright: PropTypes.element,
-    links: PropTypes.element,
-  }).isRequired,
-  data: PropTypes.object.isRequired,
-};
-
-const Root = styled('div')`
-  padding: 24px 0;
-  .plain-layout-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-`;
-
-export default PlainLayout;

package/src/Footer/layout/row.jsx

@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import { Box } from '@mui/material';
-import { styled } from '@arcblock/ux/lib/Theme';
-import clsx from 'clsx';
-
-export default function Row({ children = null, autoCenter = false, ...rest }) {
-  if (!children) {
-    return null;
-  }
-  return (
-    <RowRoot {...rest} className={clsx(rest.className, { 'footer-row-auto-center': autoCenter })}>
-      {children}
-    </RowRoot>
-  );
-}
-
-Row.propTypes = {
-  children: PropTypes.any,
-  autoCenter: PropTypes.bool,
-};
-
-const RowRoot = styled(Box)`
-  display: flex;
-  justify-content: space-between;
-  & + & {
-    margin-top: 24px;
-  }
-  &.footer-row-auto-center > *:only-child {
-    margin: 0 auto;
-  }
-
-  ${({ theme }) => theme.breakpoints.down('md')} {
-    align-items: stretch;
-    flex-direction: column;
-    gap: ${({ theme }) => theme.spacing(1)};
-    > * {
-      flex: 1 0 100%;
-    }
-    &.footer-row-auto-center > * {
-      margin: 0 auto;
-    }
-  }
-`;

package/src/Footer/layout/standard.jsx

@@ -1,114 +0,0 @@
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { Box, Container } from '@mui/material';
-import { styled } from '@arcblock/ux/lib/Theme';
-
-import Row from './row';
-
-/**
- * footer standard layout
- */
-function StandardLayout({ elements, data, className = '', ...rest }) {
-  const withNavigation = !!data.navigation?.length;
-
-  let topSection = null;
-
-  if (withNavigation) {
-    // 左 brand & social，右导航栏
-    topSection = (
-      <Container sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, justifyContent: 'space-between' }}>
-        <Box
-          sx={{
-            flex: '1 1 auto',
-            paddingRight: { xs: 0, md: 3 },
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-            gap: 2,
-            pb: 3,
-          }}>
-          <Box>{elements.brand}</Box>
-          <Box
-            sx={{
-              lineHeight: 1,
-            }}>
-            {elements.socialMedia}
-          </Box>
-        </Box>
-        <Box sx={({ palette }) => ({ mb: 3, borderTop: { xs: `1px solid ${palette.grey[200]}`, md: 0 } })}>
-          {elements.navigation}
-        </Box>
-      </Container>
-    );
-  } else {
-    // 左 brand，右 social
-    topSection = (
-      <Container
-        sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', md: 'row' },
-          justifyContent: 'space-between',
-          alignItems: 'space-between',
-          gap: 2,
-          pb: 3,
-        }}>
-        <Box>{elements.brand}</Box>
-        <Box
-          sx={{
-            lineHeight: 1,
-          }}>
-          {elements.socialMedia}
-        </Box>
-      </Container>
-    );
-  }
-
-  return (
-    <Root {...rest} className={clsx({ 'footer--with-navs': withNavigation }, className)}>
-      <Container style={{ padding: 0 }}>
-        {topSection}
-        {/* 分割线可以延伸 */}
-        <Box sx={{ pt: 3, borderTop: 1, borderColor: 'divider' }} />
-        <Container>
-          <Row autoCenter>
-            {elements.copyright}
-            {elements.links}
-          </Row>
-        </Container>
-      </Container>
-    </Root>
-  );
-}
-
-StandardLayout.propTypes = {
-  elements: PropTypes.shape({
-    brand: PropTypes.element,
-    navigation: PropTypes.element,
-    socialMedia: PropTypes.element,
-    copyright: PropTypes.element,
-    links: PropTypes.element,
-  }).isRequired,
-  data: PropTypes.object.isRequired,
-  className: PropTypes.string,
-};
-
-const Root = styled('div')`
-  padding: 32px 0 24px 0;
-  .footer-brand-name,
-  .footer-brand-desc {
-    display: none;
-  }
-  &.footer--with-navs {
-    ${(props) => props.theme.breakpoints.up('md')} {
-      .footer-brand-desc {
-        max-width: 360px;
-        display: block;
-      }
-    }
-  }
-  && .footer-brand-logo {
-    margin-right: 0;
-  }
-`;
-
-export default StandardLayout;