@regenbio/regenbio-components-react 1.2.16 → 1.2.17

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

@@ -1,78 +0,0 @@
-import React from 'react';
-import type {
-  ProHelpDataSource,
-  ProHelpDataSourceChildren,
-} from './HelpProvide';
-import { ProHelpProvide } from './HelpProvide';
-import { ProHelpSelect } from './Search';
-
-export * from './ProHelpContentPanel';
-export * from './ProHelpDrawer';
-export * from './ProHelpModal';
-export * from './ProHelpPanel';
-export * from './ProHelpPopover';
-export * from './RenderContentPanel';
-export { ProHelpProvide, ProHelpSelect };
-export type { ProHelpDataSource, ProHelpDataSourceChildren };
-
-export type ProHelpProps<ValueType> = {
-  /**
-   * 帮助文档的数据源，包含一组帮助文档数据，每个数据包含标题和内容等信息。
-   */
-  dataSource: ProHelpDataSource<ValueType>[];
-  /**
-   * 帮助组件的子组件，用于渲染自定义的帮助内容。
-   * 是一个键值对结构的集合，其中：
-   * 键（key）为字符串类型；
-   * 值（value）为一个函数类型，该函数接受两个参数：一个名为 item 的 ProHelpDataSourceChildren 类型的对象，表示一个 ProHelp 数据源子项的子项；
-   * 一个名为 index 的数字类型参数，表示该子项在父级子项数组中的索引。
-   * 该函数返回一个 ReactNode 类型的元素，用于表示该 ProHelp 数据源子项子项应该渲染的 UI 元素。
-   * 这个 Map 的作用是将 ProHelp 数据源子项子项的 valueType 属性与对应的渲染函数进行映射，从而实现在渲染 ProHelp 数据源时动态地选择渲染方法。
-   * 在实际使用时，我们可以通过判断子项的 valueType 属性，从 valueTypeMap 中取出对应的渲染函数，再将该子项和渲染函数作为参数传入 renderDataSourceItem 函数中即可。
-   */
-  valueTypeMap?: Map<
-    string,
-    (
-      item: ProHelpDataSourceChildren<ValueType>,
-      index: number,
-    ) => React.ReactNode
-  >;
-  /**
-   * 帮助组件的子组件，用于渲染自定义的帮助内容。
-   */
-  children?: React.ReactNode;
-
-  /**
-   * 加载数据源的函数,如果把数据源设置为 async load就可以使用这个功能。
-   */
-  onLoadContext?: (
-    key: React.Key,
-    context: ProHelpDataSource<ValueType>['children'][number],
-  ) => Promise<ProHelpDataSourceChildren<ValueType>[]>;
-};
-
-export type ProHelpContentPanelProps = {
-  /**
-   * 控制当前选中的帮助文档
-   */
-  selectedKey: React.Key;
-  className?: string;
-  parentItem?: ProHelpDataSource<any>;
-
-  onScroll?: (key?: string) => void;
-};
-
-export const ProHelp = <ValueTypeMap = { text: any },>({
-  dataSource,
-  valueTypeMap = new Map(),
-  onLoadContext,
-  ...props
-}: ProHelpProps<ValueTypeMap>) => {
-  return (
-    <ProHelpProvide.Provider
-      value={{ onLoadContext, dataSource, valueTypeMap }}
-    >
-      {props.children}
-    </ProHelpProvide.Provider>
-  );
-};

package/packages/layout/src/components/Help/style.ts

@@ -1,109 +0,0 @@
-import { Keyframes } from '@ant-design/cssinjs';
-import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
-import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
-
-export interface ProHelpToken extends ProAliasToken {
-  componentCls: string;
-}
-
-export const actionsInputAnimal = new Keyframes('actionsInputAnimal', {
-  '0%': { width: '0px' },
-  '30%': { width: '20px' },
-  '100%': { width: '120px' },
-});
-
-const genProHelpStyle: GenerateStyle<ProHelpToken> = (token) => {
-  return {
-    [`${token.componentCls}-popover-text`]: {
-      color: token.colorPrimary,
-      cursor: 'pointer',
-      boxSizing: 'border-box',
-    },
-    [`${token.componentCls}-popover-content`]: {
-      maxWidth: 300,
-      height: '600px',
-      maxHeight: 'calc(100vh - 200px)',
-      overflow: 'auto',
-      paddingInline: 20,
-      paddingBlockStart: 24,
-      paddingBlockEnd: 32,
-      boxSizing: 'border-box',
-    },
-    [`${token.componentCls}-left-panel`]: {
-      overflow: 'auto',
-      boxSizing: 'border-box',
-      borderInlineEnd: `${token?.lineWidth}px solid ${token?.colorBorderSecondary}`,
-      minHeight: '648px',
-      minWidth: 190,
-      maxWidth: 190,
-      '&-menu': {
-        width: 190,
-        boxSizing: 'border-box',
-        minWidth: 190,
-        height: 'calc(100% - 40px)',
-        marginBlock: 20,
-      },
-    },
-    [`${token.componentCls}-content-panel`]: {
-      minWidth: '200px',
-      overflow: 'auto',
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      boxSizing: 'border-box',
-      minHeight: '648px',
-      img: {
-        width: '100%',
-      },
-    },
-    [`${token.componentCls}-content-render`]: {
-      paddingBlock: 20,
-      paddingInline: 24,
-      flex: 1,
-    },
-    [`${token.componentCls}-content-footer`]: {
-      padding: 8,
-    },
-    [`${token.componentCls}-actions`]: {
-      display: 'flex',
-      boxSizing: 'border-box',
-      gap: token.marginSM,
-      '&-item': {
-        display: 'flex',
-        boxSizing: 'border-box',
-        alignItems: 'center',
-        justifyItems: 'center',
-        padding: 4,
-        height: 24,
-        minWidth: 24,
-        cursor: 'pointer',
-        borderRadius: token.borderRadius,
-        '&:hover': {
-          backgroundColor: token.colorBgTextHover,
-        },
-      },
-      '&-input': {
-        margin: 0,
-        maxWidth: 120,
-        padding: 0,
-        width: '120px',
-        boxSizing: 'border-box',
-        borderRadius: token.borderRadius,
-        backgroundColor: token.colorBgTextHover,
-        animationName: actionsInputAnimal,
-        animationDuration: '0.1s',
-        animationTimingFunction: 'linear',
-      },
-    },
-  } as ReturnType<GenerateStyle<ProHelpToken>>;
-};
-
-export function useStyle(prefixCls: string) {
-  return useAntdStyle('ProHelp', (token) => {
-    const ProLayoutHeaderToken: ProHelpToken = {
-      ...token,
-      componentCls: `.${prefixCls}`,
-    };
-    return [genProHelpStyle(ProLayoutHeaderToken)];
-  });
-}

package/packages/layout/src/components/PageContainer/demos/basic.tsx

@@ -1,96 +0,0 @@
-import { EllipsisOutlined } from '@ant-design/icons';
-import { PageContainer, ProCard } from '@ant-design/pro-components';
-import { Button, Dropdown } from 'antd';
-
-export default () => (
-  <div
-    style={{
-      background: '#F5F7FA',
-    }}
-  >
-    <PageContainer
-      header={{
-        title: '页面标题',
-        ghost: true,
-        breadcrumb: {
-          items: [
-            {
-              path: '',
-              title: '一级页面',
-            },
-            {
-              path: '',
-              title: '二级页面',
-            },
-            {
-              path: '',
-              title: '当前页面',
-            },
-          ],
-        },
-        extra: [
-          <Button key="1">次要按钮</Button>,
-          <Button key="2">次要按钮</Button>,
-          <Button key="3" type="primary">
-            主要按钮
-          </Button>,
-          <Dropdown
-            key="dropdown"
-            trigger={['click']}
-            menu={{
-              items: [
-                {
-                  label: '下拉菜单',
-                  key: '1',
-                },
-                {
-                  label: '下拉菜单2',
-                  key: '2',
-                },
-                {
-                  label: '下拉菜单3',
-                  key: '3',
-                },
-              ],
-            }}
-          >
-            <Button key="4" style={{ padding: '0 8px' }}>
-              <EllipsisOutlined />
-            </Button>
-          </Dropdown>,
-        ],
-      }}
-      tabBarExtraContent="测试tabBarExtraContent"
-      tabList={[
-        {
-          tab: '基本信息',
-          key: 'base',
-          closable: false,
-        },
-        {
-          tab: '详细信息',
-          key: 'info',
-        },
-      ]}
-      tabProps={{
-        type: 'editable-card',
-        hideAdd: true,
-        onEdit: (e, action) => console.log(e, action),
-      }}
-      footer={[
-        <Button key="3">重置</Button>,
-        <Button key="2" type="primary">
-          提交
-        </Button>,
-      ]}
-    >
-      <ProCard direction="column" ghost gutter={[0, 16]}>
-        <ProCard style={{ height: 200 }} />
-        <ProCard gutter={16} ghost style={{ height: 200 }}>
-          <ProCard colSpan={16} />
-          <ProCard colSpan={8} />
-        </ProCard>
-      </ProCard>
-    </PageContainer>
-  </div>
-);

package/packages/layout/src/components/PageContainer/demos/fixHeader.tsx

@@ -1,59 +0,0 @@
-import { PageContainer, ProCard } from '@ant-design/pro-components';
-
-export default () => (
-  <div
-    style={{
-      background: '#F5F7FA',
-    }}
-  >
-    <PageContainer
-      fixedHeader
-      header={{
-        title: '页面标题',
-        breadcrumb: {
-          items: [
-            {
-              path: '',
-              title: '一级页面',
-            },
-            {
-              path: '',
-              title: '二级页面',
-            },
-            {
-              path: '',
-              title: '当前页面',
-            },
-          ],
-        },
-      }}
-      tabList={[
-        {
-          tab: '已选择',
-          key: '1',
-        },
-        {
-          tab: '可点击',
-          key: '2',
-        },
-        {
-          tab: '禁用',
-          key: '3',
-          disabled: true,
-        },
-      ]}
-    >
-      <ProCard direction="column" ghost gutter={[0, 16]}>
-        <ProCard style={{ height: 200 }} />
-        <ProCard gutter={16} ghost>
-          <ProCard colSpan={16} style={{ height: 200 }} />
-          <ProCard colSpan={8} style={{ height: 200 }} />
-        </ProCard>
-        <ProCard gutter={16} ghost>
-          <ProCard colSpan={8} style={{ height: 200 }} />
-          <ProCard colSpan={16} style={{ height: 200 }} />
-        </ProCard>
-      </ProCard>
-    </PageContainer>
-  </div>
-);

package/packages/layout/src/components/PageContainer/demos/hideBreadMenu.tsx

@@ -1,38 +0,0 @@
-import { PageContainer, ProCard } from '@ant-design/pro-components';
-import { Descriptions } from 'antd';
-
-export default () => (
-  <div
-    style={{
-      background: '#F5F7FA',
-    }}
-  >
-    <PageContainer
-      ghost
-      header={{
-        title: '页面标题',
-        breadcrumb: {},
-      }}
-      content={
-        <Descriptions column={2} style={{ marginBlockEnd: -16 }}>
-          <Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
-          <Descriptions.Item label="关联表单">
-            <a>421421</a>
-          </Descriptions.Item>
-          <Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
-          <Descriptions.Item label="单据备注">
-            浙江省杭州市西湖区工专路
-          </Descriptions.Item>
-        </Descriptions>
-      }
-    >
-      <ProCard direction="column" ghost gutter={[0, 16]}>
-        <ProCard style={{ height: 200 }} />
-        <ProCard gutter={16} ghost style={{ height: 200 }}>
-          <ProCard colSpan={16} />
-          <ProCard colSpan={8} />
-        </ProCard>
-      </ProCard>
-    </PageContainer>
-  </div>
-);

package/packages/layout/src/components/PageContainer/demos/loading.tsx

@@ -1,144 +0,0 @@
-import { PageContainer } from '@ant-design/pro-components';
-import { Card } from 'antd';
-import React, { useEffect, useMemo, useState } from 'react';
-
-export default () => {
-  const customLoadingDom = useMemo(
-    () => (
-      <div style={{ color: 'red', padding: '30px', textAlign: 'center' }}>
-        自定义加载...
-      </div>
-    ),
-    [],
-  );
-  const [customLoading, setCustomLoading] = useState<React.ReactNode | boolean>(
-    customLoadingDom,
-  );
-
-  useEffect(() => {
-    if (process.env.NODE_ENV?.toLocaleLowerCase() === 'test') {
-      return;
-    }
-    setTimeout(() => {
-      setCustomLoading(false);
-    }, 3000);
-  }, []);
-
-  return (
-    <div
-      style={{
-        boxShadow: '0 0 8px rgba(0, 0, 0, 0.2)',
-        minHeight: '100vh',
-        background: '#F5F7FA',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 24,
-        padding: 24,
-      }}
-    >
-      <Card>
-        <PageContainer
-          ghost
-          loading
-          header={{
-            title: '默认loading',
-            breadcrumb: {
-              items: [
-                {
-                  path: '',
-                  title: '一级页面',
-                },
-                {
-                  path: '',
-                  title: '二级页面',
-                },
-                {
-                  path: '',
-                  title: '当前页面',
-                },
-              ],
-            },
-          }}
-        >
-          <div
-            style={{
-              height: '100vh',
-            }}
-          >
-            加载中这里不显示
-          </div>
-        </PageContainer>
-      </Card>
-      <Card>
-        <PageContainer
-          ghost
-          loading={{
-            spinning: true,
-            className: 'customClassName',
-            tip: '拼命加载中...',
-          }}
-          header={{
-            title: '自定义loading属性',
-            breadcrumb: {
-              items: [
-                {
-                  path: '',
-                  title: '一级页面',
-                },
-                {
-                  path: '',
-                  title: '二级页面',
-                },
-                {
-                  path: '',
-                  title: '当前页面',
-                },
-              ],
-            },
-          }}
-        >
-          <div
-            style={{
-              height: '100vh',
-            }}
-          >
-            加载中这里不显示
-          </div>
-        </PageContainer>
-      </Card>
-      <Card>
-        <PageContainer
-          ghost
-          loading={customLoading}
-          header={{
-            title: '自定义loading，3s后显示内容',
-            breadcrumb: {
-              items: [
-                {
-                  path: '',
-                  title: '一级页面',
-                },
-                {
-                  path: '',
-                  title: '二级页面',
-                },
-                {
-                  path: '',
-                  title: '当前页面',
-                },
-              ],
-            },
-          }}
-        >
-          <div
-            style={{
-              height: '100vh',
-            }}
-          >
-            加载中这里不显示
-          </div>
-        </PageContainer>
-      </Card>
-    </div>
-  );
-};

package/packages/layout/src/components/PageContainer/demos/token.tsx

@@ -1,71 +0,0 @@
-import { EllipsisOutlined } from '@ant-design/icons';
-import { PageContainer, ProTable } from '@ant-design/pro-components';
-import { Button, Dropdown } from 'antd';
-
-export default () => (
-  <div
-    style={{
-      background: '#F5F7FA',
-    }}
-  >
-    <PageContainer
-      token={{
-        paddingBlockPageContainerContent: 24,
-        paddingInlinePageContainerContent: 60,
-      }}
-      header={{
-        title: '页面标题',
-        ghost: true,
-        breadcrumb: {
-          items: [
-            {
-              path: '',
-              title: '一级页面',
-            },
-            {
-              path: '',
-              title: '二级页面',
-            },
-            {
-              path: '',
-              title: '当前页面',
-            },
-          ],
-        },
-        extra: [
-          <Button key="1">次要按钮</Button>,
-          <Button key="2">次要按钮</Button>,
-          <Button key="3" type="primary">
-            主要按钮
-          </Button>,
-          <Dropdown
-            key="dropdown"
-            trigger={['click']}
-            menu={{
-              items: [
-                {
-                  label: '下拉菜单',
-                  key: '1',
-                },
-                {
-                  label: '下拉菜单2',
-                  key: '2',
-                },
-                {
-                  label: '下拉菜单3',
-                  key: '3',
-                },
-              ],
-            }}
-          >
-            <Button key="4" style={{ padding: '0 8px' }}>
-              <EllipsisOutlined />
-            </Button>
-          </Dropdown>,
-        ],
-      }}
-    >
-      <ProTable search={false} />
-    </PageContainer>
-  </div>
-);

package/packages/layout/src/components/PageContainer/index.en-US.md

@@ -1,104 +0,0 @@
----
-title: PageContainer
-atomId: PageContainer
-nav:
-  title: Component
----
-
-# PageContainer
-
-PageContainer is designed to reduce the complexity of breadcrumb configuration and headers, which are required for many pages. Of course, you can also turn off the auto-generated ones and use your own configuration.
-
-PageContainer wraps antd's PageHeader component, adding tabList and content. It relies on Layout's route property to fill in the title and breadcrumb according to the current route. Of course you can pass in parameters to override the default values. PageContainer supports all properties of Tabs and PageHeader.
-
-We have added a footer attribute to make it easier to do things like forms, so you can get an action bar that always hovers at the bottom. If you don't find it convenient, you can also use the FooterToolbar to carry the actions directly, both behave basically the same, but the FooterToolbar has more customizable configurations.
-
-```tsx | pure
-<PageContainer
-  content="Welcome to the ProLayout component"
-  tabList={[
-    {
-      tab: 'base information',
-      key: 'base',
-    },
-    {
-      tab: 'details',
-      key: 'info',
-    },
-  ]}
-  extra={[
-    <Button key="3">Operation</Button>,
-    <Button key="2">Operation</Button>,
-    <Button key="1" type="primary">
-      Primary Action
-    </Button>,
-  ]}
-  footer={[
-    <Button key="rest">Reset</Button>,
-    <Button key="submit" type="primary">
-      submit
-    </Button>,
-  ]}
->
-  {children}
-</PageContainer>
-```
-
-## Code Demo
-
-### Basic usage
-
-<code src="./demos/basic.tsx"></code>
-
-### Fixed table headers
-
-<code src="./demos/fixHeader.tsx"></code>
-
-### Hide breadcrumbs
-
-<code src="./demos/hideBreadMenu.tsx">
-
-### page loading
-
-<code src="./demos/loading.tsx"></code>
-
-## PageContainer
-
-PageContainer wraps ant design's PageHeader component, adding tabList and content. It relies on Layout's route property to fill in the title and breadcrumb based on the current route. Of course you can pass in parameters to override the default values. PageContainer supports all of [Tabs](https://ant.design/components/tabs/) and [PageHeader](https://procomponents.ant.design/en-US/components/page-header)'s attributes of [Tabs]() and [PageHeader]().
-
-| Parameters | Description | Type | Default |
-| --- | --- | --- | --- |
-| content | Content area | ReactNode | - |
-| extraContent | The extra content area, located to the right of content | ReactNode | - |
-| tabList | tab title list | `{key: string, tab: ReactNode}[]` | - |
-| tabActiveKey | The currently highlighted tab item | string | - |
-| onTabChange | Callback for switching panels | `(key) => void` | - |
-| tabBarExtraContent | Extra element on tab bar | `React.ReactNode` | - |
-| header | All properties of [PageHeader](https://procomponents.ant.design/en-US/components/page-header). | `PageHeaderProps` | - |
-| fixedHeader | Fix the content of the pageHeader to the top, better not to use it if the page content is small, it will have serious obscuration problems | `boolean` | - |
-| affixProps | The configuration of the fixed pins, exactly the same as antd | `AffixProps` | - |
-| footer | Hover over the bottom action bar, pass in an array that will automatically add spaces | `ReactNode[]` | - |
-| waterMarkProps | Configure the watermark, Layout will pass you through to PageContainer, but the configuration of PageContainer takes precedence | [WaterMarkProps](/components/water-mark) | - |
-| tabProps | The Tabs properties. Only card-style Tabs support add and close options. Use `closable={false}` to disable closing. | [TabsProps](https://ant.design/components/tabs/#Tabs) | - |
-
-> fixedHeader uses antd's Affix implementation, listens to the body by default, if your scrollbar is not on the body you need to human [set](https://ant.design/components/affix/) it.
-
-### FooterToolbar
-
-| Parameters | Description | Type | Default |
-| --- | --- | --- | --- |
-| extra | The extra content area, located to the right of content | `ReactNode` | - |
-| children | content area | `ReactNode`\|`ReactNode[]` | - |
-
-The FooterToolbar api is relatively simple, the main function is to implement automatic float control in the layout so that it does not block the menu. If you don't use ProLayout, you need to customize the width and float by style.
-
-```tsx | pure
-<FooterToolbar
-  style={{
-    left: 208,
-    width: `calc(100% - 208px)`,
-  }}
->
-  <Button>Submit</Button>
-</FooterToolbar>
-```