@regenbio/regenbio-components-react 1.2.16 → 1.2.17

package/packages/field/src/components/ColorPicker/old.tsx

@@ -1,121 +0,0 @@
-import { proTheme, useStyle } from '@ant-design/pro-provider';
-import type { SketchPickerProps } from '@chenshuai2144/sketch-color';
-import { SketchPicker } from '@chenshuai2144/sketch-color';
-import type { PopoverProps } from 'antd';
-import { ConfigProvider, Popover } from 'antd';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import React, { useContext, useImperativeHandle } from 'react';
-export const DEFAULT_COLORS = [
-  '#FF9D4E', // 0 - 橘黄色
-  '#5BD8A6', // 1 - 绿色
-  '#5B8FF9', // 2 - 蓝色
-  '#F7664E', // 3 - 红色
-  '#FF86B7', // 4 - 水红色
-  '#2B9E9D', // 5 - 墨绿色
-  '#9270CA', // 6 - 紫色
-  '#6DC8EC', // 7 - 浅蓝色
-  '#667796', // 8 - 黛蓝色
-  '#F6BD16', // 9 - 黄色
-];
-export const ColorPicker = React.forwardRef(
-  (
-    {
-      mode,
-      popoverProps,
-      ...rest
-    }: SketchPickerProps & {
-      value?: string;
-      popoverProps?: PopoverProps;
-      mode?: 'read' | 'edit';
-      onChange?: (color: string) => void;
-      colors?: string[];
-      disabled?: boolean;
-    },
-    ref,
-  ) => {
-    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-    const prefixCls = getPrefixCls('pro-field-color-picker');
-
-    const { token } = proTheme.useToken();
-    const [color, setColor] = useMergedState('#1890ff', {
-      value: rest.value,
-      onChange: rest.onChange,
-    });
-
-    const { wrapSSR, hashId } = useStyle('ProFiledColorPicker' + color, () => {
-      return {
-        [`.${prefixCls}`]: {
-          width: 32,
-          height: 32,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          boxSizing: 'border-box',
-          border: `1px solid ${token.colorSplit}`,
-          borderRadius: token.borderRadius,
-          '&:hover': {
-            borderColor: color,
-          },
-        },
-      };
-    });
-
-    const readDom = wrapSSR(
-      <div
-        className={`${prefixCls} ${hashId}`.trim()}
-        style={{
-          cursor: rest.disabled ? 'not-allowed' : 'pointer',
-          backgroundColor: rest.disabled
-            ? token.colorBgContainerDisabled
-            : token.colorBgContainer,
-        }}
-      >
-        <div
-          style={{
-            backgroundColor: color,
-            width: 24,
-            boxSizing: 'border-box',
-            height: 24,
-            borderRadius: token.borderRadius,
-          }}
-        />
-      </div>,
-    );
-
-    useImperativeHandle(ref, () => {});
-
-    if (mode === 'read' || rest.disabled) {
-      return readDom;
-    }
-
-    return (
-      <Popover
-        trigger="click"
-        placement="right"
-        {...popoverProps}
-        content={
-          <div
-            style={{
-              margin: '-12px -16px',
-            }}
-          >
-            <SketchPicker
-              {...rest}
-              presetColors={rest.colors || rest.presetColors || DEFAULT_COLORS}
-              color={color}
-              onChange={({ hex, rgb: { r, g, b, a } }) => {
-                if (a && a < 1) {
-                  setColor(`rgba(${r}, ${g}, ${b}, ${a})`);
-                  return;
-                }
-                setColor(hex);
-              }}
-            />
-          </div>
-        }
-      >
-        {readDom}
-      </Popover>
-    );
-  },
-);

package/packages/field/src/components/DatePicker/index.tsx

@@ -1,143 +0,0 @@
-import { useIntl } from '@ant-design/pro-provider';
-import {
-  FieldLabel,
-  compatibleBorder,
-  parseValueToDay,
-} from '@ant-design/pro-utils';
-import { DatePicker } from 'antd';
-import dayjs from 'dayjs';
-import weekOfYear from 'dayjs/plugin/weekOfYear';
-import React, { useState } from 'react';
-import type { ProFieldFC, ProFieldLightProps } from '../../index';
-
-// 兼容代码-----------
-import 'antd/lib/date-picker/style';
-//----------------------
-
-dayjs.extend(weekOfYear);
-
-const formatDate = (text: any, format: any) => {
-  if (!text) return '-';
-  if (typeof format === 'function') {
-    return format(dayjs(text));
-  } else {
-    return dayjs(text).format(
-      (Array.isArray(format) ? format[0] : format) || 'YYYY-MM-DD',
-    );
-  }
-};
-
-/**
- * 日期选择组件
- *
- * @param
- */
-const FieldDatePicker: ProFieldFC<
-  {
-    text: string | number;
-    format: string;
-    showTime?: boolean;
-    bordered?: boolean;
-    picker?: 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year';
-  } & ProFieldLightProps
-> = (
-  {
-    text,
-    mode,
-    format,
-    label,
-    light,
-    render,
-    renderFormItem,
-    plain,
-    showTime,
-    fieldProps,
-    picker,
-    bordered,
-    lightLabel,
-  },
-  ref,
-) => {
-  const intl = useIntl();
-
-  const [open, setOpen] = useState<boolean>(false);
-
-  if (mode === 'read') {
-    const dom = formatDate(text, fieldProps.format || format);
-    if (render) {
-      return render(text, { mode, ...fieldProps }, <>{dom}</>);
-    }
-    return <>{dom}</>;
-  }
-  if (mode === 'edit' || mode === 'update') {
-    let dom;
-    const {
-      disabled,
-      value,
-      placeholder = intl.getMessage('tableForm.selectPlaceholder', '请选择'),
-    } = fieldProps;
-
-    const dayValue = parseValueToDay(value) as dayjs.Dayjs;
-
-    if (light) {
-      dom = (
-        <FieldLabel
-          label={label}
-          onClick={() => {
-            fieldProps?.onOpenChange?.(true);
-            setOpen(true);
-          }}
-          style={
-            dayValue
-              ? {
-                  paddingInlineEnd: 0,
-                }
-              : undefined
-          }
-          disabled={disabled}
-          value={
-            dayValue || open ? (
-              <DatePicker
-                picker={picker}
-                showTime={showTime}
-                format={format}
-                ref={ref}
-                {...fieldProps}
-                value={dayValue}
-                onOpenChange={(isOpen) => {
-                  setOpen(isOpen);
-                  fieldProps?.onOpenChange?.(isOpen);
-                }}
-                {...compatibleBorder(false)}
-                open={open}
-              />
-            ) : undefined
-          }
-          allowClear={false}
-          downIcon={dayValue || open ? false : undefined}
-          bordered={bordered}
-          ref={lightLabel}
-        />
-      );
-    } else {
-      dom = (
-        <DatePicker
-          picker={picker}
-          showTime={showTime}
-          format={format}
-          placeholder={placeholder}
-          {...compatibleBorder(plain === undefined ? true : !plain)}
-          ref={ref}
-          {...fieldProps}
-          value={dayValue}
-        />
-      );
-    }
-    if (renderFormItem) {
-      return renderFormItem(text, { mode, ...fieldProps }, dom);
-    }
-    return dom;
-  }
-  return null;
-};
-export default React.forwardRef(FieldDatePicker);

package/packages/field/src/components/Digit/index.tsx

@@ -1,93 +0,0 @@
-import { isNil } from '@ant-design/pro-utils';
-import { InputNumber } from 'antd';
-import omit from 'omit.js';
-import React, { useCallback } from 'react';
-import type { ProFieldFC } from '../../index';
-
-// 兼容代码-----------
-import { useIntl } from '@ant-design/pro-provider';
-import 'antd/lib/input-number/style';
-//----------------------
-
-export type FieldDigitProps = {
-  text: number;
-  placeholder?: string;
-};
-
-/**
- * 数字组件
- *
- * @param FieldDigitProps {
- *     text: number;
- *     moneySymbol?: string; }
- */
-const FieldDigit: ProFieldFC<FieldDigitProps> = (
-  { text, mode: type, render, placeholder, renderFormItem, fieldProps },
-  ref,
-) => {
-  const intl = useIntl();
-  const placeholderValue =
-    placeholder || intl.getMessage('tableForm.inputPlaceholder', '请输入');
-  const proxyChange = useCallback(
-    (value: number | string | null) => {
-      let val = value ?? undefined;
-
-      if (!fieldProps.stringMode && typeof val === 'string') {
-        val = Number(val);
-      }
-      if (
-        typeof val === 'number' &&
-        !isNil(val) &&
-        !isNil(fieldProps.precision)
-      ) {
-        val = Number(val.toFixed(fieldProps.precision));
-      }
-      return val;
-    },
-    [fieldProps],
-  );
-  if (type === 'read') {
-    let fractionDigits = {} as Record<string, any> as any;
-    if (fieldProps?.precision) {
-      fractionDigits = {
-        minimumFractionDigits: Number(fieldProps.precision),
-        maximumFractionDigits: Number(fieldProps.precision),
-      };
-    }
-    const digit = new Intl.NumberFormat(undefined, {
-      ...fractionDigits,
-      ...(fieldProps?.intlProps || {}),
-    }).format(Number(text) as number);
-
-    // 如果是 string 模式，什么都不要处理了
-    const dom = !fieldProps?.stringMode ? (
-      <span ref={ref}>{fieldProps?.formatter?.(digit) || digit}</span>
-    ) : (
-      <span>{text}</span>
-    );
-
-    if (render) {
-      return render(text, { mode: type, ...fieldProps }, dom);
-    }
-    return dom;
-  }
-  if (type === 'edit' || type === 'update') {
-    const dom = (
-      <InputNumber<number | string>
-        ref={ref}
-        min={0}
-        placeholder={placeholderValue}
-        {...omit(fieldProps, ['onChange', 'onBlur'])}
-        onChange={(e) => fieldProps?.onChange?.(proxyChange(e))}
-        onBlur={(e) => fieldProps?.onBlur?.(proxyChange(e.target.value))}
-      />
-    );
-    if (renderFormItem) {
-      return renderFormItem(text, { mode: type, ...fieldProps }, dom);
-    }
-    return dom;
-  }
-  return null;
-};
-
-export default React.forwardRef(FieldDigit);

package/packages/field/src/components/DigitRange/index.tsx

@@ -1,150 +0,0 @@
-import { proTheme, useIntl } from '@ant-design/pro-provider';
-import { Input, InputNumber, Space } from 'antd';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import React from 'react';
-import type { ProFieldFC } from '../../index';
-
-// 兼容代码-----------
-import 'antd/lib/input-number/style';
-//----------------------
-
-export type Value = string | number | undefined | null;
-
-export type ValuePair = Value[];
-
-export type FieldDigitRangeProps = {
-  text: ValuePair;
-  placeholder?: string | string[];
-  separator?: string;
-  separatorWidth?: number;
-};
-
-/**
- * 数字范围组件
- *
- * @param FieldDigitRangeProps
- */
-const FieldDigitRange: ProFieldFC<FieldDigitRangeProps> = (
-  {
-    text,
-    mode: type,
-    render,
-    placeholder,
-    renderFormItem,
-    fieldProps,
-    separator = '~',
-    separatorWidth = 30,
-  },
-  ref,
-) => {
-  const { value, defaultValue, onChange, id } = fieldProps;
-  const intl = useIntl();
-
-  const { token } = proTheme.useToken();
-  const [valuePair, setValuePair] = useMergedState(() => defaultValue, {
-    value: value,
-    onChange: onChange,
-  });
-
-  if (type === 'read') {
-    const getContent = (number: Value) => {
-      const digit = new Intl.NumberFormat(undefined, {
-        minimumSignificantDigits: 2,
-        ...(fieldProps?.intlProps || {}),
-      }).format(Number(number) as number);
-
-      return fieldProps?.formatter?.(digit) || digit;
-    };
-    const dom = (
-      <span ref={ref}>
-        {getContent(text[0])} {separator} {getContent(text[1])}
-      </span>
-    );
-    if (render) {
-      return render(text, { mode: type, ...fieldProps }, dom);
-    }
-    return dom;
-  }
-
-  if (type === 'edit' || type === 'update') {
-    const handleGroupBlur = () => {
-      if (Array.isArray(valuePair)) {
-        //   仅在两个值均为数字时才做比较并转换
-        const [value0, value1] = valuePair;
-        if (
-          typeof value0 === 'number' &&
-          typeof value1 === 'number' &&
-          value0 > value1
-        ) {
-          setValuePair([value1, value0]);
-        } else if (value0 === undefined && value1 === undefined) {
-          // 当两个值均为undefined时将值变为undefined，方便required处理
-          setValuePair(undefined);
-        }
-      }
-    };
-
-    const handleChange = (index: number, changedValue: Value) => {
-      const newValuePair = [...(valuePair || [])];
-      newValuePair[index] = changedValue === null ? undefined : changedValue;
-      setValuePair(newValuePair);
-    };
-    const placeholderValue = fieldProps?.placeholder ||
-      placeholder || [
-        intl.getMessage('tableForm.inputPlaceholder', '请输入'),
-        intl.getMessage('tableForm.inputPlaceholder', '请输入'),
-      ];
-
-    const getInputNumberPlaceholder = (index: number) =>
-      Array.isArray(placeholderValue)
-        ? placeholderValue[index]
-        : placeholderValue;
-
-    const Compact = Space.Compact || Input.Group;
-    const compactProps = !!Space.Compact ? {} : { compact: true };
-    const dom = (
-      <Compact {...compactProps} onBlur={handleGroupBlur}>
-        <InputNumber<number>
-          {...fieldProps}
-          placeholder={getInputNumberPlaceholder(0)}
-          id={id ?? `${id}-0`}
-          style={{ width: `calc((100% - ${separatorWidth}px) / 2)` }}
-          value={valuePair?.[0]}
-          defaultValue={defaultValue?.[0]}
-          onChange={(changedValue) => handleChange(0, changedValue)}
-        />
-        <Input
-          style={{
-            width: separatorWidth,
-            textAlign: 'center',
-            borderInlineStart: 0,
-            borderInlineEnd: 0,
-            pointerEvents: 'none',
-            backgroundColor: token?.colorBgContainer,
-          }}
-          placeholder={separator}
-          disabled
-        />
-        <InputNumber<number>
-          {...fieldProps}
-          placeholder={getInputNumberPlaceholder(1)}
-          id={id ?? `${id}-1`}
-          style={{
-            width: `calc((100% - ${separatorWidth}px) / 2)`,
-            borderInlineStart: 0,
-          }}
-          value={valuePair?.[1]}
-          defaultValue={defaultValue?.[1]}
-          onChange={(changedValue) => handleChange(1, changedValue)}
-        />
-      </Compact>
-    );
-    if (renderFormItem) {
-      return renderFormItem(text, { mode: type, ...fieldProps }, dom);
-    }
-    return dom;
-  }
-  return null;
-};
-
-export default React.forwardRef(FieldDigitRange);

package/packages/field/src/components/FromNow/index.tsx

@@ -1,67 +0,0 @@
-import { useIntl } from '@ant-design/pro-provider';
-import { compatibleBorder, parseValueToDay } from '@ant-design/pro-utils';
-import { DatePicker, Tooltip } from 'antd';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import type { ProFieldFC } from '../../index';
-
-// 兼容代码-----------
-import 'antd/lib/date-picker/style';
-import React from 'react';
-//----------------------
-
-dayjs.extend(relativeTime);
-/**
- * 与当前的时间进行比较 http://momentjs.cn/docs/displaying/fromnow.html
- *
- * @param
- */
-const FieldFromNow: ProFieldFC<{
-  text: string;
-  format?: string;
-}> = (
-  { text, mode, plain, render, renderFormItem, format, fieldProps },
-  ref,
-) => {
-  const intl = useIntl();
-
-  if (mode === 'read') {
-    const dom = (
-      <Tooltip
-        title={dayjs(text).format(
-          fieldProps?.format || format || 'YYYY-MM-DD HH:mm:ss',
-        )}
-      >
-        {dayjs(text).fromNow()}
-      </Tooltip>
-    );
-    if (render) {
-      return render(text, { mode, ...fieldProps }, <>{dom}</>);
-    }
-    return <>{dom}</>;
-  }
-  if (mode === 'edit' || mode === 'update') {
-    const placeholder = intl.getMessage(
-      'tableForm.selectPlaceholder',
-      '请选择',
-    );
-    const momentValue = parseValueToDay(fieldProps.value) as dayjs.Dayjs;
-    const dom = (
-      <DatePicker
-        ref={ref}
-        placeholder={placeholder}
-        showTime
-        {...compatibleBorder(plain === undefined ? true : !plain)}
-        {...fieldProps}
-        value={momentValue}
-      />
-    );
-    if (renderFormItem) {
-      return renderFormItem(text, { mode, ...fieldProps }, dom);
-    }
-    return dom;
-  }
-  return null;
-};
-
-export default React.forwardRef(FieldFromNow);

package/packages/field/src/components/Image/index.tsx

@@ -1,61 +0,0 @@
-import { useIntl } from '@ant-design/pro-provider';
-import { Image, Input } from 'antd';
-import React from 'react';
-import type { ProFieldFC } from '../../index';
-
-// 兼容代码-----------
-import 'antd/lib/image/style';
-//----------------------
-
-export type FieldImageProps = {
-  text: string;
-  width?: number;
-  placeholder?: string | string[];
-};
-
-/**
- * 数字组件
- *
- * @param FieldImageProps {
- *     text: number;
- *     moneySymbol?: string; }
- */
-const FieldImage = React.forwardRef<FieldImageProps, any>(
-  (
-    {
-      text,
-      mode: type,
-      render,
-      renderFormItem,
-      fieldProps,
-      placeholder,
-      width,
-    },
-    ref,
-  ) => {
-    const intl = useIntl();
-    const placeholderValue =
-      placeholder || intl.getMessage('tableForm.inputPlaceholder', '请输入');
-    if (type === 'read') {
-      const dom = (
-        <Image ref={ref} width={width || 32} src={text} {...fieldProps} />
-      );
-      if (render) {
-        return render(text, { mode: type, ...fieldProps }, dom);
-      }
-      return dom;
-    }
-    if (type === 'edit' || type === 'update') {
-      const dom = (
-        <Input ref={ref} placeholder={placeholderValue} {...fieldProps} />
-      );
-      if (renderFormItem) {
-        return renderFormItem(text, { mode: type, ...fieldProps }, dom);
-      }
-      return dom;
-    }
-    return null;
-  },
-);
-
-export default FieldImage as ProFieldFC<FieldImageProps>;

package/packages/field/src/components/IndexColumn/index.tsx

@@ -1,54 +0,0 @@
-import { useStyle } from '@ant-design/pro-utils';
-import { ConfigProvider } from 'antd';
-import classnames from 'classnames';
-import React, { useContext } from 'react';
-
-/**
- * 默认的 index 列容器，提供一个好看的 index
- *
- * @param param0
- */
-const IndexColumn: React.ForwardRefRenderFunction<
-  any,
-  { border?: boolean; children: number }
-> = ({ border = false, children }, ref) => {
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-
-  const className = getPrefixCls('pro-field-index-column');
-
-  // css
-  const { wrapSSR, hashId } = useStyle('IndexColumn', () => {
-    return {
-      [`.${className}`]: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '18px',
-        height: '18px',
-        '&-border': {
-          color: '#fff',
-          fontSize: '12px',
-          lineHeight: '12px',
-          backgroundColor: '#314659',
-          borderRadius: '9px',
-          '&.top-three': {
-            backgroundColor: '#979797',
-          },
-        },
-      },
-    };
-  });
-  return wrapSSR(
-    <div
-      ref={ref}
-      className={classnames(className, hashId, {
-        [`${className}-border`]: border,
-        'top-three': (children as number) > 3,
-      })}
-    >
-      {children}
-    </div>,
-  );
-};
-
-export default React.forwardRef(IndexColumn);