@regenbio/regenbio-components-react 1.2.14 → 1.2.16

package/packages/card/src/components/CheckCard/index.tsx

@@ -0,0 +1,379 @@
+import { useMountMergeState } from '@ant-design/pro-utils';
+import { Avatar, ConfigProvider } from 'antd';
+import classNames from 'classnames';
+import type { MouseEventHandler } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
+import ProCardActions from '../Actions';
+import type { CheckCardGroupProps } from './Group';
+import CheckCardGroup, { CardLoading, CheckCardGroupConnext } from './Group';
+import { useStyle } from './style';
+
+/**
+ * Props for the CheckCard component.
+ */
+interface CheckCardProps {
+  /**
+   * Custom prefix class.
+   *
+   * @ignore
+   */
+  prefixCls?: string;
+  /**
+   * Callback function for change event.
+   *
+   * @param checked - The checked state.
+   */
+  onChange?: (checked: boolean) => void;
+  /**
+   * Callback function for click event.
+   *
+   * @param event - The click event.
+   */
+  onClick?: (event: MouseEventHandler<HTMLDivElement> | undefined) => void;
+  /**
+   * Callback function for mouse enter event.
+   *
+   * @param event - The mouse enter event.
+   */
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  /**
+   * Callback function for mouse leave event.
+   *
+   * @param event - The mouse leave event.
+   */
+  onMouseLeave?: (event: MouseEventHandler<HTMLDivElement> | undefined) => void;
+  /**
+   * Whether the card is initially checked.
+   *
+   * @default false
+   * @title Default Checked
+   */
+  defaultChecked?: boolean;
+  /**
+   * Whether the card is checked.
+   *
+   * @default false
+   * @title Checked
+   */
+  checked?: boolean;
+  /**
+   * Whether the card is disabled.
+   *
+   * @default false
+   * @title Disabled
+   */
+  disabled?: boolean;
+  /**
+   * Custom style for the card.
+   *
+   * @ignore
+   */
+  style?: React.CSSProperties;
+  /**
+   * Custom class name for the card.
+   *
+   * @ignore
+   */
+  className?: string;
+  /**
+   * The avatar to display on the left side, can be a link or a ReactNode.
+   *
+   * @title Avatar
+   */
+  avatar?: React.ReactNode;
+  /**
+   * The title to display.
+   *
+   * @title Title
+   */
+  title?: React.ReactNode;
+  /**
+   * The subtitle to display.
+   *
+   * @title Subtitle
+   */
+  subTitle?: React.ReactNode;
+  /**
+   * The description to display.
+   *
+   * @title Description
+   */
+  description?: React.ReactNode;
+  /**
+   * The value of the card.
+   *
+   * @title Value
+   */
+  value?: any;
+  /**
+   * Whether the content is in loading state.
+   *
+   * @default false
+   * @title Loading
+   */
+  loading?: boolean;
+  /**
+   * The cover image of the card. Other display values are ignored in this mode.
+   *
+   * @title Card Background Image
+   */
+  cover?: React.ReactNode;
+  /**
+   * The size of the component. Supports 'large', 'default', and 'small' sizes. Users can also customize the width and height.
+   *
+   * @default default
+   * @title Checkbox Size
+   */
+  size?: 'large' | 'default' | 'small';
+  /**
+   * Whether to show the border.
+   *
+   * @default true
+   * @title Show Border
+   */
+  bordered?: boolean;
+  /**
+   * The action area in the top right corner of the card.
+   *
+   * @title Actions
+   */
+  extra?: React.ReactNode;
+  /**
+   * The content of the card.
+   */
+  children?: React.ReactNode;
+  /**
+   * Custom style for the content area.
+   */
+  bodyStyle?: React.CSSProperties;
+  /**
+   * The action area in the bottom right corner.
+   */
+  actions?: React.ReactNode[];
+  /**
+   * Whether the card is in ghost mode.
+   */
+  ghost?: boolean;
+}
+
+export interface CheckCardState {
+  checked: boolean;
+}
+
+const CheckCard: React.FC<CheckCardProps> & {
+  Group: typeof CheckCardGroup;
+} = (props) => {
+  const [stateChecked, setStateChecked] = useMountMergeState<boolean>(
+    props.defaultChecked || false,
+    {
+      value: props.checked,
+      onChange: props.onChange,
+    },
+  );
+  const checkCardGroup = useContext(CheckCardGroupConnext);
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+
+  const handleClick = (e: any) => {
+    props?.onClick?.(e);
+    const newChecked = !stateChecked;
+    checkCardGroup?.toggleOption?.({ value: props.value });
+    setStateChecked?.(newChecked);
+  };
+
+  // small => sm large => lg
+  const getSizeCls = (size?: string) => {
+    if (size === 'large') return 'lg';
+    if (size === 'small') return 'sm';
+    return '';
+  };
+
+  useEffect(() => {
+    checkCardGroup?.registerValue?.(props.value);
+    return () => checkCardGroup?.cancelValue?.(props.value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.value]);
+
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    avatar,
+    title,
+    description,
+    cover,
+    extra,
+    style = {},
+    ...others
+  } = props;
+
+  const checkCardProps: CheckCardProps = { ...others };
+  const prefixCls = getPrefixCls('pro-checkcard', customizePrefixCls);
+
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+
+  /**
+   * 头像自定义
+   *
+   * @param cls
+   * @param coverDom
+   * @returns
+   */
+  const renderCover = (cls: string, coverDom: string | React.ReactNode) => {
+    return (
+      <div className={classNames(`${cls}-cover`, hashId)}>
+        {typeof coverDom === 'string' ? (
+          <img src={coverDom} alt="checkcard" />
+        ) : (
+          coverDom
+        )}
+      </div>
+    );
+  };
+
+  checkCardProps.checked = stateChecked;
+
+  let multiple = false;
+
+  if (checkCardGroup) {
+    // 受组控制模式
+    checkCardProps.disabled = props.disabled || checkCardGroup.disabled;
+    checkCardProps.loading = props.loading || checkCardGroup.loading;
+    checkCardProps.bordered = props.bordered || checkCardGroup.bordered;
+
+    multiple = checkCardGroup.multiple;
+
+    const isChecked = checkCardGroup.multiple
+      ? checkCardGroup.value?.includes(props.value)
+      : checkCardGroup.value === props.value;
+
+    // loading时check为false
+    checkCardProps.checked = checkCardProps.loading ? false : isChecked;
+    checkCardProps.size = props.size || checkCardGroup.size;
+  }
+
+  const {
+    disabled = false,
+    size,
+    loading: cardLoading,
+    bordered = true,
+    checked,
+  } = checkCardProps;
+  const sizeCls = getSizeCls(size);
+
+  const classString = classNames(prefixCls, className, hashId, {
+    [`${prefixCls}-loading`]: cardLoading,
+    [`${prefixCls}-${sizeCls}`]: sizeCls,
+    [`${prefixCls}-checked`]: checked,
+    [`${prefixCls}-multiple`]: multiple,
+    [`${prefixCls}-disabled`]: disabled,
+    [`${prefixCls}-bordered`]: bordered,
+    [`${prefixCls}-ghost`]: props.ghost,
+  });
+
+  const metaDom = useMemo(() => {
+    if (cardLoading) {
+      return <CardLoading prefixCls={prefixCls || ''} hashId={hashId} />;
+    }
+
+    if (cover) {
+      return renderCover(prefixCls || '', cover);
+    }
+
+    const avatarDom = avatar ? (
+      <div className={classNames(`${prefixCls}-avatar`, hashId)}>
+        {typeof avatar === 'string' ? (
+          <Avatar size={48} shape="square" src={avatar} />
+        ) : (
+          avatar
+        )}
+      </div>
+    ) : null;
+
+    const headerDom = (title ?? extra) != null && (
+      <div className={classNames(`${prefixCls}-header`, hashId)}>
+        <div className={classNames(`${prefixCls}-header-left`, hashId)}>
+          <div
+            className={classNames(`${prefixCls}-title`, hashId, {
+              [`${prefixCls}-title-with-ellipsis`]: typeof title === 'string',
+            })}
+          >
+            {title}
+          </div>
+          {props.subTitle ? (
+            <div className={classNames(`${prefixCls}-subTitle`, hashId)}>
+              {props.subTitle}
+            </div>
+          ) : null}
+        </div>
+        {extra && (
+          <div className={classNames(`${prefixCls}-extra`, hashId)}>
+            {extra}
+          </div>
+        )}
+      </div>
+    );
+
+    const descriptionDom = description ? (
+      <div className={classNames(`${prefixCls}-description`, hashId)}>
+        {description}
+      </div>
+    ) : null;
+
+    const metaClass = classNames(`${prefixCls}-content`, hashId, {
+      [`${prefixCls}-avatar-header`]: avatarDom && headerDom && !descriptionDom,
+    });
+
+    return (
+      <div className={metaClass}>
+        {avatarDom}
+        {headerDom || descriptionDom ? (
+          <div className={classNames(`${prefixCls}-detail`, hashId)}>
+            {headerDom}
+            {descriptionDom}
+          </div>
+        ) : null}
+      </div>
+    );
+  }, [
+    avatar,
+    cardLoading,
+    cover,
+    description,
+    extra,
+    hashId,
+    prefixCls,
+    props.subTitle,
+    title,
+  ]);
+
+  return wrapSSR(
+    <div
+      className={classString}
+      style={style}
+      onClick={(e) => {
+        if (!cardLoading && !disabled) {
+          handleClick(e);
+        }
+      }}
+      onMouseEnter={props.onMouseEnter}
+    >
+      {metaDom}
+      {props.children ? (
+        <div
+          className={classNames(`${prefixCls}-body`, hashId)}
+          style={props.bodyStyle}
+        >
+          {props.children}
+        </div>
+      ) : null}
+      {props.actions ? (
+        <ProCardActions actions={props.actions} prefixCls={prefixCls} />
+      ) : null}
+    </div>,
+  );
+};
+
+CheckCard.Group = CheckCardGroup;
+
+export type { CheckCardGroupProps, CheckCardProps };
+
+export default CheckCard;

package/packages/card/src/components/CheckCard/style.ts

@@ -0,0 +1,216 @@
+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 ProListToken extends ProAliasToken {
+  componentCls: string;
+}
+
+const proCheckCardActive = (token: ProListToken) => ({
+  backgroundColor: token.colorPrimaryBg,
+  borderColor: token.colorPrimary,
+});
+const proCheckCardDisabled = (token: ProListToken) => ({
+  backgroundColor: token.colorBgContainerDisabled,
+  borderColor: token.colorBorder,
+  cursor: 'not-allowed',
+  [token.componentCls]: {
+    '&-description': { color: token.colorTextDisabled },
+    '&-title': {
+      color: token.colorTextDisabled,
+    },
+    '&-avatar': {
+      opacity: '0.25',
+    },
+  },
+});
+
+export const cardLoading = new Keyframes('card-loading', {
+  '0%': { backgroundPosition: '0 50%' },
+  '50%': { backgroundPosition: '100% 50%' },
+  '100%': { backgroundPosition: '0 50%' },
+});
+
+const genProStyle: GenerateStyle<ProListToken> = (token) => {
+  return {
+    [token.componentCls]: {
+      position: 'relative',
+      display: 'inline-block',
+      width: '320px',
+      marginInlineEnd: '16px',
+      marginBlockEnd: '16px',
+      color: token.colorText,
+      fontSize: token.fontSize,
+      lineHeight: token.lineHeight,
+      verticalAlign: 'top',
+      backgroundColor: token.colorBgContainer,
+      borderRadius: token.borderRadius,
+      overflow: 'auto',
+      cursor: 'pointer',
+      transition: `all 0.3s`,
+      '&:after': {
+        position: 'absolute',
+        insetBlockStart: 2,
+        insetInlineEnd: 2,
+        width: 0,
+        height: 0,
+        opacity: 0,
+        transition: 'all 0.3s ' + token.motionEaseInOut,
+        borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
+        borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
+        borderStartEndRadius: `${token.borderRadius}px`,
+        content: "''",
+      },
+
+      '&:last-child': {
+        marginInlineEnd: 0,
+      },
+      '& + &': {
+        marginInlineStart: '0 !important',
+      },
+      '&-bordered': {
+        border: `${token.lineWidth}px solid ${token.colorBorder}`,
+      },
+      '&-group': {
+        display: 'inline-block',
+        '&-sub-check-card': {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          '&-title': {
+            cursor: 'pointer',
+            paddingBlock: token.paddingXS,
+            display: 'flex',
+            gap: 4,
+            alignItems: 'center',
+          },
+          '&-panel': {
+            visibility: 'initial',
+            transition: 'all 0.3s',
+            opacity: 1,
+            '&-collapse': {
+              display: 'none',
+              visibility: 'hidden',
+              opacity: 0,
+            },
+          },
+        },
+      },
+      [`${token.componentCls}-loading`]: {
+        overflow: 'hidden',
+        userSelect: 'none',
+        '&-content': {
+          padding: token.paddingMD,
+        },
+      },
+      '&:focus': proCheckCardActive(token),
+      '&-checked': {
+        ...proCheckCardActive(token),
+        '&:after': {
+          opacity: 1,
+          border: `${token.borderRadius + 4}px solid ${token.colorPrimary}`,
+          borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
+          borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
+          borderStartEndRadius: `${token.borderRadius}px`,
+        },
+      },
+      '&-disabled': proCheckCardDisabled(token),
+      '&[disabled]': proCheckCardDisabled(token),
+      '&-checked&-disabled': {
+        '&:after': {
+          position: 'absolute',
+          insetBlockStart: 2,
+          insetInlineEnd: 2,
+          width: 0,
+          height: 0,
+          border: `${token.borderRadius + 4}px solid ${
+            token.colorTextDisabled
+          }`,
+          borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
+          borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
+          borderStartEndRadius: `${token.borderRadius}px`,
+          content: "''",
+        },
+      },
+      '&-lg': {
+        width: 440,
+      },
+      '&-sm': {
+        width: 212,
+      },
+      '&-cover': {
+        paddingInline: token.paddingXXS,
+        paddingBlock: token.paddingXXS,
+        img: {
+          width: '100%',
+          height: '100%',
+          overflow: 'hidden',
+          borderRadius: token.borderRadius,
+        },
+      },
+      '&-content': {
+        display: 'flex',
+        paddingInline: token.paddingSM,
+        paddingBlock: token.padding,
+      },
+      '&-body': {
+        paddingInline: token.paddingSM,
+        paddingBlock: token.padding,
+      },
+      '&-avatar-header': { display: 'flex', alignItems: 'center' },
+      '&-avatar': { paddingInlineEnd: 8 },
+      '&-detail': {
+        overflow: 'hidden',
+        width: '100%',
+        '> div:not(:last-child)': {
+          marginBlockEnd: 4,
+        },
+      },
+      '&-header': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        lineHeight: token.lineHeight,
+        '&-left': {
+          display: 'flex',
+          alignItems: 'center',
+          gap: token.sizeSM,
+          minWidth: 0,
+        },
+      },
+      '&-title': {
+        overflow: 'hidden',
+        color: token.colorTextHeading,
+        fontWeight: '500',
+        fontSize: token.fontSize,
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        '&-with-ellipsis': {
+          display: 'inline-block',
+        },
+      },
+      '&-description': {
+        color: token.colorTextSecondary,
+      },
+      [`&:not(${token.componentCls}-disabled)`]: {
+        '&:hover': {
+          borderColor: token.colorPrimary,
+        },
+      },
+    },
+  };
+};
+
+export function useStyle(prefixCls: string) {
+  return useAntdStyle('CheckCard', (token) => {
+    const proListToken: ProListToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+    };
+
+    return [genProStyle(proListToken)];
+  });
+}

package/packages/card/src/components/Divider/index.tsx

@@ -0,0 +1,42 @@
+import { ConfigProvider } from 'antd';
+
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import useStyle from './style';
+export type ProCardDividerProps = {
+  /**
+   * 样式
+   *
+   * @ignore
+   */
+  style?: React.CSSProperties;
+  /**
+   * ClassName
+   *
+   * @ignore
+   */
+  className?: string;
+  /**
+   * 布局类型
+   *
+   * @default vertical
+   */
+  type?: 'horizontal' | 'vertical';
+};
+
+const ProCardDivider: React.FC<ProCardDividerProps> = (props) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const proCardPrefixCls = getPrefixCls('pro-card');
+  const prefixCls = `${proCardPrefixCls}-divider`;
+  const { wrapSSR, hashId } = useStyle(proCardPrefixCls);
+
+  const { className, style = {}, type } = props;
+
+  const classString = classNames(prefixCls, className, hashId, {
+    [`${prefixCls}-${type}`]: type,
+  });
+
+  return wrapSSR(<div className={classString} style={style} />);
+};
+
+export default ProCardDivider;

package/packages/card/src/components/Divider/style.ts

@@ -0,0 +1,48 @@
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
+import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
+
+interface ProCardDividerToken extends ProAliasToken {
+  componentCls: string;
+}
+
+const genDividerStyle: GenerateStyle<ProCardDividerToken> = (token) => {
+  const { componentCls } = token;
+
+  return {
+    [componentCls]: {
+      '&-divider': {
+        flex: 'none',
+        width: token.lineWidth,
+        marginInline: token.marginXS,
+        marginBlock: token.marginLG,
+        backgroundColor: token.colorSplit,
+        '&-horizontal': {
+          width: 'initial',
+          height: token.lineWidth,
+          marginInline: token.marginLG,
+          marginBlock: token.marginXS,
+        },
+      },
+
+      '&&-size-small &-divider': {
+        marginBlock: token.marginLG,
+        marginInline: token.marginXS,
+        '&-horizontal': {
+          marginBlock: token.marginXS,
+          marginInline: token.marginLG,
+        },
+      },
+    },
+  };
+};
+
+export default function useStyle(prefixCls: string) {
+  return useAntdStyle('ProCardDivider', (token) => {
+    const proCardDividerToken: ProCardDividerToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+    };
+
+    return [genDividerStyle(proCardDividerToken)];
+  });
+}