@regenbio/regenbio-components-react 1.2.15 → 1.2.16

package/packages/layout/src/components/PageHeader/index.tsx

@@ -0,0 +1,276 @@
+import ArrowLeftOutlined from '@ant-design/icons/ArrowLeftOutlined';
+import ArrowRightOutlined from '@ant-design/icons/ArrowRightOutlined';
+import type { AvatarProps, BreadcrumbProps, TagType } from 'antd';
+import { Avatar, Breadcrumb, ConfigProvider, Space } from 'antd';
+import 'antd/lib/breadcrumb/style';
+import type { DirectionType } from 'antd/lib/config-provider';
+import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import { noteOnce } from 'rc-util/lib/warning';
+import * as React from 'react';
+import type { ContentWidth } from '../../defaultSettings';
+import useStyle from './style/index';
+
+export interface PageHeaderProps {
+  backIcon?: React.ReactNode;
+  prefixCls?: string;
+  title?: React.ReactNode;
+  subTitle?: React.ReactNode;
+  style?: React.CSSProperties;
+  childrenContentStyle?: React.CSSProperties;
+  breadcrumb?: Partial<BreadcrumbProps> | React.ReactElement<typeof Breadcrumb>;
+  breadcrumbRender?: (
+    props: PageHeaderProps,
+    defaultDom: React.ReactNode,
+  ) => React.ReactNode;
+  tags?: React.ReactElement<TagType> | React.ReactElement<TagType>[];
+  footer?: React.ReactNode;
+  extra?: React.ReactNode;
+  avatar?: AvatarProps;
+  onBack?: (e?: React.MouseEvent<HTMLElement>) => void;
+  className?: string;
+  contentWidth?: ContentWidth;
+  layout?: string;
+  ghost?: boolean;
+  children?: React.ReactNode;
+}
+
+const renderBack = (
+  prefixCls: string,
+  hashId: string,
+  backIcon?: React.ReactNode,
+  onBack?: (e?: React.MouseEvent<HTMLElement>) => void,
+) => {
+  if (!backIcon || !onBack) {
+    return null;
+  }
+  return (
+    <div className={`${prefixCls}-back ${hashId}`.trim()}>
+      <div
+        role="button"
+        onClick={(e) => {
+          onBack?.(e);
+        }}
+        className={`${prefixCls}-back-button ${hashId}`.trim()}
+        aria-label="back"
+      >
+        {backIcon}
+      </div>
+    </div>
+  );
+};
+
+const renderBreadcrumb = (breadcrumb: BreadcrumbProps, prefixCls: string) => {
+  if (!breadcrumb.items?.length) return null;
+  return (
+    <Breadcrumb
+      {...breadcrumb}
+      className={classNames(`${prefixCls}-breadcrumb`, breadcrumb.className)}
+    />
+  );
+};
+
+const getBackIcon = (
+  props: PageHeaderProps,
+  direction: DirectionType = 'ltr',
+) => {
+  if (props.backIcon !== undefined) {
+    return props.backIcon;
+  }
+  return direction === 'rtl' ? <ArrowRightOutlined /> : <ArrowLeftOutlined />;
+};
+
+const renderTitle = (
+  prefixCls: string,
+  props: PageHeaderProps,
+  direction: DirectionType = 'ltr',
+  hashId: string,
+) => {
+  const { title, avatar, subTitle, tags, extra, onBack } = props;
+  const headingPrefixCls = `${prefixCls}-heading`;
+  const hasHeading = title || subTitle || tags || extra;
+  // If there is nothing, return a null
+  if (!hasHeading) {
+    return null;
+  }
+  const backIcon = getBackIcon(props, direction);
+  const backIconDom = renderBack(prefixCls, hashId, backIcon, onBack);
+  const hasTitle = backIconDom || avatar || hasHeading;
+  return (
+    <div className={headingPrefixCls + ' ' + hashId}>
+      {hasTitle && (
+        <div className={`${headingPrefixCls}-left ${hashId}`.trim()}>
+          {backIconDom}
+          {avatar && (
+            <Avatar
+              className={classNames(
+                `${headingPrefixCls}-avatar`,
+                hashId,
+                avatar.className,
+              )}
+              {...avatar}
+            />
+          )}
+          {title && (
+            <span
+              className={`${headingPrefixCls}-title ${hashId}`.trim()}
+              title={typeof title === 'string' ? title : undefined}
+            >
+              {title}
+            </span>
+          )}
+          {subTitle && (
+            <span
+              className={`${headingPrefixCls}-sub-title ${hashId}`.trim()}
+              title={typeof subTitle === 'string' ? subTitle : undefined}
+            >
+              {subTitle}
+            </span>
+          )}
+          {tags && (
+            <span className={`${headingPrefixCls}-tags ${hashId}`.trim()}>
+              {tags}
+            </span>
+          )}
+        </div>
+      )}
+      {extra && (
+        <span className={`${headingPrefixCls}-extra ${hashId}`.trim()}>
+          <Space>{extra}</Space>
+        </span>
+      )}
+    </div>
+  );
+};
+
+const renderFooter = (
+  prefixCls: string,
+  footer: React.ReactNode,
+  hashId: string,
+) => {
+  if (footer) {
+    return (
+      <div className={`${prefixCls}-footer ${hashId}`.trim()}>{footer}</div>
+    );
+  }
+  return null;
+};
+
+const renderChildren = (
+  prefixCls: string,
+  children: React.ReactNode,
+  hashId: string,
+) => <div className={`${prefixCls}-content ${hashId}`.trim()}>{children}</div>;
+
+const transformBreadcrumbRoutesToItems = (
+  routes?: BreadcrumbProps['routes'],
+): BreadcrumbProps['items'] => {
+  return routes?.map((route) => {
+    noteOnce(
+      !!route.breadcrumbName,
+      'Route.breadcrumbName is deprecated, please use Route.title instead.',
+    );
+    return {
+      ...route,
+      breadcrumbName: undefined,
+      children: undefined,
+      title: route.title || route.breadcrumbName,
+      ...(route.children?.length
+        ? {
+            menu: {
+              items: transformBreadcrumbRoutesToItems(route.children),
+            },
+          }
+        : {}),
+    };
+  });
+};
+
+const PageHeader: React.FC<PageHeaderProps> = (props) => {
+  const [compact, updateCompact] = React.useState<boolean>(false);
+
+  const onResize = ({ width }: { width: number }) => updateCompact(width < 768);
+
+  const { getPrefixCls, direction } = React.useContext(
+    ConfigProvider.ConfigContext,
+  );
+
+  const {
+    prefixCls: customizePrefixCls,
+    style,
+    footer,
+    children,
+    breadcrumb,
+    breadcrumbRender,
+    className: customizeClassName,
+    contentWidth,
+    layout,
+    ghost = true,
+  } = props;
+
+  const prefixCls = getPrefixCls('page-header', customizePrefixCls);
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+
+  const getDefaultBreadcrumbDom = () => {
+    if (
+      breadcrumb &&
+      !(breadcrumb as BreadcrumbProps)?.items &&
+      (breadcrumb as BreadcrumbProps)?.routes
+    ) {
+      noteOnce(
+        false,
+        'The routes of Breadcrumb is deprecated, please use items instead.',
+      );
+      (breadcrumb as BreadcrumbProps).items = transformBreadcrumbRoutesToItems(
+        (breadcrumb as BreadcrumbProps).routes,
+      );
+    }
+
+    if ((breadcrumb as BreadcrumbProps)?.items) {
+      return renderBreadcrumb(breadcrumb as BreadcrumbProps, prefixCls);
+    }
+    return null;
+  };
+
+  const defaultBreadcrumbDom = getDefaultBreadcrumbDom();
+
+  const isBreadcrumbComponent = breadcrumb && 'props' in breadcrumb;
+
+  // support breadcrumbRender function
+  const breadcrumbRenderDomFromProps =
+    breadcrumbRender?.({ ...props, prefixCls }, defaultBreadcrumbDom) ??
+    defaultBreadcrumbDom;
+
+  const breadcrumbDom = isBreadcrumbComponent
+    ? breadcrumb
+    : breadcrumbRenderDomFromProps;
+
+  const className = classNames(prefixCls, hashId, customizeClassName, {
+    [`${prefixCls}-has-breadcrumb`]: !!breadcrumbDom,
+    [`${prefixCls}-has-footer`]: !!footer,
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+    [`${prefixCls}-compact`]: compact,
+    [`${prefixCls}-wide`]: contentWidth === 'Fixed' && layout == 'top',
+    [`${prefixCls}-ghost`]: ghost,
+  });
+  const title = renderTitle(prefixCls, props, direction, hashId);
+  const childDom = children && renderChildren(prefixCls, children, hashId);
+  const footerDom = renderFooter(prefixCls, footer, hashId);
+
+  if (!breadcrumbDom && !title && !footerDom && !childDom) {
+    return <div className={classNames(hashId, [`${prefixCls}-no-children`])} />;
+  }
+
+  return wrapSSR(
+    <ResizeObserver onResize={onResize}>
+      <div className={className} style={style}>
+        {breadcrumbDom}
+        {title}
+        {childDom}
+        {footerDom}
+      </div>
+    </ResizeObserver>,
+  );
+};
+
+export { PageHeader };

package/packages/layout/src/components/PageHeader/style/index.ts

@@ -0,0 +1,180 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
+import {
+  operationUnit,
+  resetComponent,
+  useStyle as useAntdStyle,
+} from '@ant-design/pro-utils';
+export interface PageHeaderToken extends ProAliasToken {
+  componentCls: string;
+  pageHeaderPadding: number;
+  pageHeaderPaddingVertical: number;
+  pageHeaderBgGhost: string;
+  pageHeaderPaddingBreadCrumb: number;
+  pageHeaderColorBack: string;
+  pageHeaderFontSizeHeaderTitle: number;
+  pageHeaderFontSizeHeaderSubTitle: number;
+  pageHeaderPaddingContentPadding: number;
+}
+
+const textOverflowEllipsis = (): CSSObject => ({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});
+
+const genPageHeaderStyle: GenerateStyle<PageHeaderToken> = (token) => {
+  return {
+    [token.componentCls]: {
+      ...resetComponent?.(token),
+      position: 'relative',
+      backgroundColor: token.colorWhite,
+      paddingBlock: token.pageHeaderPaddingVertical + 2,
+      paddingInline: token.pageHeaderPadding,
+      '&&-ghost': {
+        backgroundColor: token.pageHeaderBgGhost,
+      },
+      '&-no-children': {
+        height: token.layout?.pageContainer?.paddingBlockPageContainerContent,
+      },
+      '&&-has-breadcrumb': {
+        paddingBlockStart: token.pageHeaderPaddingBreadCrumb,
+      },
+      '&&-has-footer': {
+        paddingBlockEnd: 0,
+      },
+      '& &-back': {
+        marginInlineEnd: token.margin,
+        fontSize: 16,
+        lineHeight: 1,
+        '&-button': {
+          fontSize: 16,
+          ...operationUnit?.(token),
+          color: token.pageHeaderColorBack,
+          cursor: 'pointer',
+        },
+        [`${token.componentCls}-rlt &`]: {
+          float: 'right',
+          marginInlineEnd: 0,
+          marginInlineStart: 0,
+        },
+      },
+      [`& ${'ant'}-divider-vertical`]: {
+        height: 14,
+        marginBlock: 0,
+        marginInline: token.marginSM,
+        verticalAlign: 'middle',
+      },
+
+      [`& &-breadcrumb + &-heading`]: {
+        marginBlockStart: token.marginXS,
+      },
+      '& &-heading': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        '&-left': {
+          display: 'flex',
+          alignItems: 'center',
+          marginBlock: token.marginXS / 2,
+          marginInlineEnd: 0,
+          marginInlineStart: 0,
+          overflow: 'hidden',
+        },
+        '&-title': {
+          marginInlineEnd: token.marginSM,
+          marginBlockEnd: 0,
+          color: token.colorTextHeading,
+          fontWeight: 600,
+          fontSize: token.pageHeaderFontSizeHeaderTitle,
+          lineHeight: token.controlHeight + 'px',
+          ...textOverflowEllipsis(),
+          [`${token.componentCls}-rlt &`]: {
+            marginInlineEnd: 0,
+            marginInlineStart: token.marginSM,
+          },
+        },
+        '&-avatar': {
+          marginInlineEnd: token.marginSM,
+          [`${token.componentCls}-rlt &`]: {
+            float: 'right',
+            marginInlineEnd: 0,
+            marginInlineStart: token.marginSM,
+          },
+        },
+        '&-tags': {
+          [`${token.componentCls}-rlt &`]: {
+            float: 'right',
+          },
+        },
+        '&-sub-title': {
+          marginInlineEnd: token.marginSM,
+          color: token.colorTextSecondary,
+          fontSize: token.pageHeaderFontSizeHeaderSubTitle,
+          lineHeight: token.lineHeight,
+          ...textOverflowEllipsis(),
+          [`${token.componentCls}-rlt &`]: {
+            float: 'right',
+            marginInlineEnd: 0,
+            marginInlineStart: 12,
+          },
+        },
+        '&-extra': {
+          marginBlock: token.marginXS / 2,
+          marginInlineEnd: 0,
+          marginInlineStart: 0,
+          whiteSpace: 'nowrap',
+          '> *': {
+            'white-space': 'unset',
+            [`${token.componentCls}-rlt &`]: {
+              marginInlineEnd: token.marginSM,
+              marginInlineStart: 0,
+            },
+          },
+          [`${token.componentCls}-rlt &`]: {
+            float: 'left',
+          },
+          '*:first-child': {
+            [`${token.componentCls}-rlt &`]: {
+              marginInlineEnd: 0,
+            },
+          },
+        },
+      },
+      '&-content': {
+        paddingBlockStart: token.pageHeaderPaddingContentPadding,
+      },
+      '&-footer': {
+        marginBlockStart: token.margin,
+      },
+      '&-compact &-heading': {
+        flexWrap: 'wrap',
+      },
+      '&-wide': {
+        maxWidth: 1152,
+        margin: '0 auto',
+      },
+      '&-rtl': {
+        direction: 'rtl',
+      },
+    },
+  } as ReturnType<GenerateStyle<PageHeaderToken>>;
+};
+
+export default function useStyle(prefixCls: string) {
+  return useAntdStyle('ProLayoutPageHeader', (token) => {
+    const proCardToken: PageHeaderToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+      pageHeaderBgGhost: 'transparent',
+      pageHeaderPadding: 16,
+      pageHeaderPaddingVertical: 4,
+      pageHeaderPaddingBreadCrumb: token.paddingSM,
+      pageHeaderColorBack: token.colorTextHeading,
+      pageHeaderFontSizeHeaderTitle: token.fontSizeHeading4,
+      pageHeaderFontSizeHeaderSubTitle: 14,
+      pageHeaderPaddingContentPadding: token.paddingSM,
+    };
+
+    return [genPageHeaderStyle(proCardToken)];
+  });
+}

package/packages/layout/src/components/PageLoading/index.tsx

@@ -0,0 +1,18 @@
+import type { SpinProps } from 'antd';
+import { Spin } from 'antd';
+import React from 'react';
+
+const PageLoading: React.FC<SpinProps & any> = ({
+  isLoading,
+  pastDelay,
+  timedOut,
+  error,
+  retry,
+  ...reset
+}) => (
+  <div style={{ paddingBlockStart: 100, textAlign: 'center' }}>
+    <Spin size="large" {...reset} />
+  </div>
+);
+
+export { PageLoading };

package/packages/layout/src/components/SettingDrawer/BlockCheckbox.tsx

@@ -0,0 +1,60 @@
+import { CheckOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+
+export type BlockCheckboxProps = {
+  value: string;
+  onChange: (key: string) => void;
+  list?: {
+    title: string;
+    key: string;
+    icon?: React.ReactNode;
+  }[];
+  configType: string;
+  prefixCls: string;
+  hashId: string;
+};
+
+const BlockCheckbox: React.FC<BlockCheckboxProps> = ({
+  value,
+  configType,
+  onChange,
+  list,
+  prefixCls,
+  hashId,
+}) => {
+  const baseClassName = `${prefixCls}-block-checkbox`;
+  const dom = useMemo(() => {
+    const domList = (list || []).map((item) => (
+      <Tooltip title={item.title} key={item.key}>
+        <div
+          className={classNames(
+            hashId,
+            `${baseClassName}-item`,
+            `${baseClassName}-item-${item.key}`,
+            `${baseClassName}-${configType}-item`,
+          )}
+          onClick={() => onChange(item.key)}
+        >
+          <CheckOutlined
+            className={`${baseClassName}-selectIcon ${hashId}`.trim()}
+            style={{
+              display: value === item.key ? 'block' : 'none',
+            }}
+          />
+          {item?.icon ? (
+            <div className={`${baseClassName}-icon ${hashId}`.trim()}>
+              {item.icon}
+            </div>
+          ) : null}
+        </div>
+      </Tooltip>
+    ));
+    return domList;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, list?.length, onChange]);
+  return <div className={classNames(baseClassName, hashId)}>{dom}</div>;
+};
+
+export { BlockCheckbox };

package/packages/layout/src/components/SettingDrawer/LayoutChange.tsx

@@ -0,0 +1,122 @@
+import { List, Select, Switch, Tooltip } from 'antd';
+import React from 'react';
+import type { ProSettings } from '../../defaultSettings';
+import { defaultSettings } from '../../defaultSettings';
+import type { SettingItemProps } from './index';
+import { getFormatMessage } from './index';
+
+export const renderLayoutSettingItem = (item: SettingItemProps) => {
+  const action = React.cloneElement(item.action, {
+    disabled: item.disabled,
+  });
+  return (
+    <Tooltip title={item.disabled ? item.disabledReason : ''} placement="left">
+      <List.Item actions={[action]}>
+        <span style={{ opacity: item.disabled ? 0.5 : 1 }}>{item.title}</span>
+      </List.Item>
+    </Tooltip>
+  );
+};
+const LayoutSetting: React.FC<{
+  settings: Partial<ProSettings>;
+  changeSetting: (key: string, value: any, hideLoading?: boolean) => void;
+  hashId: string;
+  prefixCls: string;
+}> = ({ settings, prefixCls, changeSetting, hashId }) => {
+  const formatMessage = getFormatMessage();
+  const { contentWidth, splitMenus, fixedHeader, layout, fixSiderbar } =
+    settings || defaultSettings;
+
+  return (
+    <List
+      className={`${prefixCls}-list ${hashId}`.trim()}
+      split={false}
+      dataSource={[
+        {
+          title: formatMessage({
+            id: 'app.setting.content-width',
+            defaultMessage: 'Content Width',
+          }),
+          action: (
+            <Select
+              value={contentWidth || 'Fixed'}
+              size="small"
+              className={`content-width ${hashId}`.trim()}
+              onSelect={(value: string) => {
+                changeSetting('contentWidth', value);
+              }}
+              style={{ width: 80 }}
+            >
+              {layout === 'side' ? null : (
+                <Select.Option value="Fixed">
+                  {formatMessage({
+                    id: 'app.setting.content-width.fixed',
+                    defaultMessage: 'Fixed',
+                  })}
+                </Select.Option>
+              )}
+              <Select.Option value="Fluid">
+                {formatMessage({
+                  id: 'app.setting.content-width.fluid',
+                  defaultMessage: 'Fluid',
+                })}
+              </Select.Option>
+            </Select>
+          ),
+        },
+        {
+          title: formatMessage({
+            id: 'app.setting.fixedheader',
+            defaultMessage: 'Fixed Header',
+          }),
+          action: (
+            <Switch
+              size="small"
+              className="fixed-header"
+              checked={!!fixedHeader}
+              onChange={(checked) => {
+                changeSetting('fixedHeader', checked);
+              }}
+            />
+          ),
+        },
+        {
+          title: formatMessage({
+            id: 'app.setting.fixedsidebar',
+            defaultMessage: 'Fixed Sidebar',
+          }),
+          disabled: layout === 'top',
+          disabledReason: formatMessage({
+            id: 'app.setting.fixedsidebar.hint',
+            defaultMessage: 'Works on Side Menu Layout',
+          }),
+          action: (
+            <Switch
+              size="small"
+              className="fix-siderbar"
+              checked={!!fixSiderbar}
+              onChange={(checked) => changeSetting('fixSiderbar', checked)}
+            />
+          ),
+        },
+        {
+          title: formatMessage({ id: 'app.setting.splitMenus' }),
+          disabled: layout !== 'mix',
+          action: (
+            <Switch
+              size="small"
+              checked={!!splitMenus}
+              className="split-menus"
+              onChange={(checked) => {
+                changeSetting('splitMenus', checked);
+              }}
+            />
+          ),
+        },
+      ]}
+      renderItem={renderLayoutSettingItem}
+    />
+  );
+};
+
+export { LayoutSetting };

package/packages/layout/src/components/SettingDrawer/RegionalChange.tsx

@@ -0,0 +1,45 @@
+import { List, Switch } from 'antd';
+import React from 'react';
+import type { ProSettings } from '../../defaultSettings';
+import { renderLayoutSettingItem } from './LayoutChange';
+import { getFormatMessage } from './index';
+
+const RegionalSetting: React.FC<{
+  settings: Partial<ProSettings>;
+  changeSetting: (key: string, value: any, hideLoading?: boolean) => void;
+  hashId: string;
+  prefixCls: string;
+}> = ({ settings, prefixCls, changeSetting, hashId }) => {
+  const formatMessage = getFormatMessage();
+  const regionalSetting = ['header', 'footer', 'menu', 'menuHeader'];
+  return (
+    <List
+      className={`${prefixCls}-list ${hashId}`.trim()}
+      split={false}
+      renderItem={renderLayoutSettingItem}
+      dataSource={regionalSetting.map((key) => {
+        return {
+          title: formatMessage({ id: `app.setting.regionalsettings.${key}` }),
+          action: (
+            <Switch
+              size="small"
+              className={`regional-${key} ${hashId}`.trim()}
+              checked={
+                settings[`${key}Render` as 'headerRender'] ||
+                settings[`${key}Render` as 'headerRender'] === undefined
+              }
+              onChange={(checked) =>
+                changeSetting(
+                  `${key}Render`,
+                  checked === true ? undefined : false,
+                )
+              }
+            />
+          ),
+        };
+      })}
+    />
+  );
+};
+
+export { RegionalSetting };