@regenbio/regenbio-components-react 1.2.15 → 1.2.16

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

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,150 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,54 @@
+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);