@regenbio/regenbio-components-react 1.2.16 → 1.2.17

package/packages/form/src/components/Group/index.tsx

@@ -1,182 +0,0 @@
-import { RightOutlined } from '@ant-design/icons';
-import { LabelIconTip, useMountMergeState } from '@ant-design/pro-utils';
-import { ConfigProvider, Space } from 'antd';
-
-import classNames from 'classnames';
-import React, { useCallback, useContext, useMemo } from 'react';
-import FieldContext from '../../FieldContext';
-import { useGridHelpers } from '../../helpers';
-import type { ProFormGroupProps } from '../../typing';
-import { useStyle } from './style';
-
-const Group: React.FC<ProFormGroupProps> = React.forwardRef(
-  (props, ref: any) => {
-    const { groupProps } = React.useContext(FieldContext);
-    const {
-      children,
-      collapsible,
-      defaultCollapsed,
-      style,
-      labelLayout,
-      title = props.label,
-      tooltip,
-      align = 'start',
-      direction,
-      size = 32,
-      titleStyle,
-      titleRender,
-      spaceProps,
-      extra,
-      autoFocus,
-    } = {
-      ...groupProps,
-      ...props,
-    };
-
-    const [collapsed, setCollapsed] = useMountMergeState(
-      () => defaultCollapsed || false,
-      {
-        value: props.collapsed,
-        onChange: props.onCollapse,
-      },
-    );
-    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-
-    const { ColWrapper, RowWrapper } = useGridHelpers(props);
-
-    const className = getPrefixCls('pro-form-group');
-    const { wrapSSR, hashId } = useStyle(className);
-
-    const collapsibleButton = collapsible && (
-      <RightOutlined
-        style={{
-          marginInlineEnd: 8,
-        }}
-        rotate={!collapsed ? 90 : undefined}
-      />
-    );
-
-    const label = (
-      <LabelIconTip
-        label={
-          collapsibleButton ? (
-            <div>
-              {collapsibleButton}
-              {title}
-            </div>
-          ) : (
-            title
-          )
-        }
-        tooltip={tooltip}
-      />
-    );
-
-    const Wrapper = useCallback(
-      ({ children: dom }: { children: React.ReactNode }) => (
-        <Space
-          {...spaceProps}
-          className={classNames(
-            `${className}-container ${hashId}`,
-            spaceProps?.className,
-          )}
-          size={size}
-          align={align}
-          direction={direction}
-          style={{
-            rowGap: 0,
-            ...spaceProps?.style,
-          }}
-        >
-          {dom}
-        </Space>
-      ),
-      [align, className, direction, hashId, size, spaceProps],
-    );
-
-    const titleDom = titleRender ? titleRender(label, props) : label;
-    const [childrenDoms, hiddenDoms] = useMemo(() => {
-      const hiddenChildren: React.ReactNode[] = [];
-      const childrenList = React.Children.toArray(children).map(
-        (element, index) => {
-          if (React.isValidElement(element) && element?.props?.hidden) {
-            hiddenChildren.push(element);
-            return null;
-          }
-          if (index === 0 && React.isValidElement(element) && autoFocus) {
-            return React.cloneElement(element, {
-              ...(element.props as any),
-              autoFocus,
-            });
-          }
-          return element;
-        },
-      );
-
-      return [
-        <RowWrapper key="children" Wrapper={Wrapper}>
-          {childrenList}
-        </RowWrapper>,
-        hiddenChildren.length > 0 ? (
-          <div
-            style={{
-              display: 'none',
-            }}
-          >
-            {hiddenChildren}
-          </div>
-        ) : null,
-      ];
-    }, [children, RowWrapper, Wrapper, autoFocus]);
-
-    return wrapSSR(
-      <ColWrapper>
-        <div
-          className={classNames(className, hashId, {
-            [`${className}-twoLine`]: labelLayout === 'twoLine',
-          })}
-          style={style}
-          ref={ref}
-        >
-          {hiddenDoms}
-          {(title || tooltip || extra) && (
-            <div
-              className={`${className}-title ${hashId}`.trim()}
-              style={titleStyle}
-              onClick={() => {
-                setCollapsed(!collapsed);
-              }}
-            >
-              {extra ? (
-                <div
-                  style={{
-                    display: 'flex',
-                    width: '100%',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                  }}
-                >
-                  {titleDom}
-                  <span onClick={(e) => e.stopPropagation()}>{extra}</span>
-                </div>
-              ) : (
-                titleDom
-              )}
-            </div>
-          )}
-          <div
-            style={{
-              display: collapsible && collapsed ? 'none' : undefined,
-            }}
-          >
-            {childrenDoms}
-          </div>
-        </div>
-      </ColWrapper>,
-    );
-  },
-);
-
-Group.displayName = 'ProForm-Group';
-
-export default Group;

package/packages/form/src/components/Group/style.ts

@@ -1,55 +0,0 @@
-import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
-import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
-
-export interface ProToken extends ProAliasToken {
-  componentCls: string;
-}
-
-const genProStyle: GenerateStyle<ProToken> = (token) => {
-  return {
-    [token.componentCls]: {
-      '&-title': { marginBlockEnd: token.marginXL, fontWeight: 'bold' },
-      '&-container': {
-        flexWrap: 'wrap',
-        maxWidth: '100%',
-        [`> div${token.antCls}-space-item`]: {
-          maxWidth: '100%',
-        },
-      },
-      '&-twoLine': {
-        display: 'block',
-        width: '100%',
-        [`${token.componentCls}-title`]: { width: '100%', margin: '8px 0' },
-        [`${token.componentCls}-container`]: { paddingInlineStart: 16 },
-        [`${token.antCls}-space-item,${token.antCls}-form-item`]: {
-          width: '100%',
-        },
-        [`${token.antCls}-form-item`]: {
-          '&-control': {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-            '&-input': {
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-              '&-content': {
-                flex: 'none',
-              },
-            },
-          },
-        },
-      },
-    },
-  };
-};
-
-export function useStyle(prefixCls: string) {
-  return useAntdStyle('ProFormGroup', (token) => {
-    const proToken: ProToken = {
-      ...token,
-      componentCls: `.${prefixCls}`,
-    };
-
-    return [genProStyle(proToken)];
-  });
-}

package/packages/form/src/components/List/ListContainer.tsx

@@ -1,187 +0,0 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { ProProvider, useIntl } from '@ant-design/pro-provider';
-import { nanoid, runFunction } from '@ant-design/pro-utils';
-import { Button } from 'antd';
-import omit from 'omit.js';
-import type { CSSProperties } from 'react';
-import { useContext, useMemo, useRef, useState } from 'react';
-import { EditOrReadOnlyContext } from '../../BaseForm/EditOrReadOnlyContext';
-import type { ProFormListItemProps } from './ListItem';
-import { ProFormListItem } from './ListItem';
-
-const ProFormListContainer: React.FC<ProFormListItemProps> = (props) => {
-  const intl = useIntl();
-  const {
-    creatorButtonProps,
-    prefixCls,
-    children,
-    creatorRecord,
-    action,
-    fields,
-    actionGuard,
-    max,
-    fieldExtraRender,
-    meta,
-    containerClassName,
-    containerStyle,
-    onAfterAdd,
-    onAfterRemove,
-  } = props;
-  const { hashId } = useContext(ProProvider);
-  const fieldKeyMap = useRef(new Map<string, string>());
-  const [loading, setLoading] = useState(false);
-
-  const uuidFields = useMemo(() => {
-    return fields.map((field) => {
-      if (!fieldKeyMap.current?.has(field.key.toString())) {
-        fieldKeyMap.current?.set(field.key.toString(), nanoid());
-      }
-      const uuid = fieldKeyMap.current?.get(field.key.toString());
-      return {
-        ...field,
-        uuid,
-      };
-    });
-  }, [fields]);
-
-  /**
-   * 根据行为守卫包装action函数
-   */
-  const wrapperAction = useMemo(() => {
-    const wrapAction = { ...action };
-    const count = uuidFields.length;
-
-    if (actionGuard?.beforeAddRow) {
-      wrapAction.add = async (...rest) => {
-        const success = await actionGuard.beforeAddRow!(...rest, count);
-        if (success) {
-          const res = action.add(...rest);
-          onAfterAdd?.(...rest, count + 1);
-          return res;
-        }
-        return false;
-      };
-    } else {
-      wrapAction.add = async (...rest) => {
-        const res = action.add(...rest);
-        onAfterAdd?.(...rest, count + 1);
-        return res;
-      };
-    }
-
-    if (actionGuard?.beforeRemoveRow) {
-      wrapAction.remove = async (...rest) => {
-        const success = await actionGuard.beforeRemoveRow!(...rest, count);
-        if (success) {
-          const res = action.remove(...rest);
-          onAfterRemove?.(...rest, count - 1);
-          return res;
-        }
-        return false;
-      };
-    } else {
-      wrapAction.remove = async (...rest) => {
-        const res = action.remove(...rest);
-        onAfterRemove?.(...rest, count - 1);
-        return res;
-      };
-    }
-
-    return wrapAction;
-  }, [
-    action,
-    actionGuard?.beforeAddRow,
-    actionGuard?.beforeRemoveRow,
-    onAfterAdd,
-    onAfterRemove,
-    uuidFields.length,
-  ]);
-
-  const creatorButton = useMemo(() => {
-    if (creatorButtonProps === false || uuidFields.length === max) return null;
-    const {
-      position = 'bottom',
-      creatorButtonText = intl.getMessage(
-        'editableTable.action.add',
-        '添加一行数据',
-      ),
-    } = creatorButtonProps || {};
-    return (
-      <Button
-        className={`${prefixCls}-creator-button-${position} ${
-          hashId || ''
-        }`.trim()}
-        type="dashed"
-        loading={loading}
-        block
-        icon={<PlusOutlined />}
-        {...omit(creatorButtonProps || {}, ['position', 'creatorButtonText'])}
-        onClick={async () => {
-          setLoading(true);
-          // 如果不是从顶部开始添加，则插入的索引为当前行数
-          let index = uuidFields.length;
-          // 如果是顶部，加到第一个，如果不是，为空就是最后一个
-          if (position === 'top') index = 0;
-          await wrapperAction.add(runFunction(creatorRecord) ?? {}, index);
-          setLoading(false);
-        }}
-      >
-        {creatorButtonText}
-      </Button>
-    );
-  }, [
-    creatorButtonProps,
-    uuidFields.length,
-    max,
-    intl,
-    prefixCls,
-    hashId,
-    loading,
-    wrapperAction,
-    creatorRecord,
-  ]);
-  const readOnlyContext = useContext(EditOrReadOnlyContext);
-
-  const defaultStyle: CSSProperties = {
-    width: 'max-content',
-    maxWidth: '100%',
-    minWidth: '100%',
-    ...containerStyle,
-  };
-
-  const itemList = useMemo(() => {
-    return uuidFields.map((field, index) => {
-      return (
-        <ProFormListItem
-          {...props}
-          key={field.uuid}
-          field={field}
-          index={index}
-          action={wrapperAction}
-          count={uuidFields.length}
-        >
-          {children}
-        </ProFormListItem>
-      );
-    });
-  }, [children, props, uuidFields, wrapperAction]);
-
-  if (readOnlyContext.mode === 'read' || props.readonly === true) {
-    return <>{itemList}</>;
-  }
-
-  return (
-    <div style={defaultStyle} className={containerClassName}>
-      {creatorButtonProps !== false &&
-        creatorButtonProps?.position === 'top' &&
-        creatorButton}
-      {itemList}
-      {fieldExtraRender && fieldExtraRender(wrapperAction, meta)}
-      {creatorButtonProps !== false &&
-        creatorButtonProps?.position !== 'top' &&
-        creatorButton}
-    </div>
-  );
-};
-
-export { ProFormListContainer };