@regenbio/regenbio-components-react 1.2.16 → 1.2.18

package/packages/field/README.md

@@ -1,17 +0,0 @@
-# @ant-design/pro-field
-
-See our website [@ant-design/pro-field](https://procomponent.ant.design/) for more information.
-
-## Install
-
-Using npm:
-
-```bash
-$ npm install --save  @ant-design/pro-field
-```
-
-or using yarn:
-
-```bash
-$ yarn add  @ant-design/pro-field
-```

package/packages/field/package.json

@@ -1,56 +0,0 @@
-{
-  "name": "@ant-design/pro-field",
-  "version": "2.17.2",
-  "description": "原子信息组件，统一 ProForm、ProTable、ProList、Filter 等组件里面的字段定义。",
-  "homepage": "https://github.com/ant-design/pro-components/tree/master/packages/plugin-layout#readme",
-  "bugs": "https://github.com/ant-design/pro-components/issues",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ant-design/pro-components.git"
-  },
-  "license": "MIT",
-  "author": "chenshuai2144",
-  "sideEffects": false,
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "types": "es/index.d.ts",
-  "files": [
-    "es",
-    "dist",
-    "lib"
-  ],
-  "scripts": {
-    "build": "father build"
-  },
-  "browserslist": [
-    "last 2 versions",
-    "Firefox ESR",
-    "> 1%",
-    "ie >= 11"
-  ],
-  "dependencies": {
-    "@ant-design/icons": "^5.0.0",
-    "@ant-design/pro-provider": "2.15.2",
-    "@ant-design/pro-utils": "2.16.2",
-    "@babel/runtime": "^7.18.0",
-    "@chenshuai2144/sketch-color": "^1.0.8",
-    "classnames": "^2.3.2",
-    "dayjs": "^1.11.10",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "omit.js": "^2.0.2",
-    "rc-util": "^5.4.0",
-    "swr": "^2.0.0"
-  },
-  "devDependencies": {
-    "@types/lodash": "^4.17.10",
-    "@types/lodash-es": "^4.17.12",
-    "@types/react-color": "^3.0.4",
-    "rc-resize-observer": "^0.2.3",
-    "typescript": "^5.0.4"
-  },
-  "peerDependencies": {
-    "antd": "^4.24.15 || ^5.11.2",
-    "react": ">=17.0.0"
-  }
-}

package/packages/field/src/FieldHOC/index.tsx

@@ -1,55 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import type { ProFieldLightProps } from '../index';
-
-function FieldHOC<T extends ProFieldLightProps>(
-  props: T & {
-    children: React.ReactNode;
-    isLight?: boolean;
-  },
-) {
-  const [labelTrigger, setLabelTrigger] = useState(false);
-
-  const lightLabel = useRef<{
-    labelRef: React.RefObject<HTMLElement>;
-    clearRef: React.RefObject<HTMLElement>;
-  }>(null);
-
-  // 是label且不是label里面的clear图标触发事件
-  const isTriggeredByLabel = useCallback(
-    (e: React.MouseEvent) => {
-      // 两条语句结果分别命名，可读性好点
-      const isLabelMouseDown = lightLabel.current?.labelRef?.current?.contains(
-        e.target as HTMLElement,
-      );
-      const isClearMouseDown = lightLabel.current?.clearRef?.current?.contains(
-        e.target as HTMLElement,
-      );
-      return isLabelMouseDown && !isClearMouseDown;
-    },
-    [lightLabel],
-  );
-
-  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    if (isTriggeredByLabel(e)) {
-      setLabelTrigger(true);
-    }
-  };
-  const handleMouseUp = () => {
-    setLabelTrigger(false);
-  };
-
-  if (props.isLight) {
-    return (
-      <div onMouseDown={handleMouseDown} onMouseUp={handleMouseUp}>
-        {React.cloneElement(props.children as JSX.Element, {
-          labelTrigger,
-          lightLabel,
-        })}
-      </div>
-    );
-  }
-
-  return <>{props.children as string}</>;
-}
-
-export default FieldHOC;

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

@@ -1,167 +0,0 @@
-import { LoadingOutlined } from '@ant-design/icons';
-import { useIntl } from '@ant-design/pro-provider';
-import {
-  FieldLabel,
-  compatibleBorder,
-  objectToMap,
-  proFieldParsingText,
-} from '@ant-design/pro-utils';
-import type { RadioGroupProps } from 'antd';
-import { Cascader, ConfigProvider } from 'antd';
-import classNames from 'classnames';
-import React, {
-  useContext,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import type { ProFieldFC } from '../../index';
-import type { FieldSelectProps } from '../Select';
-import { useFieldFetchData } from '../Select';
-
-// 兼容代码-----------
-import 'antd/lib/cascader/style';
-//----------------------
-
-export type GroupProps = {
-  options?: RadioGroupProps['options'];
-  radioType?: 'button' | 'radio';
-} & FieldSelectProps;
-
-/**
- * 级联选择组件
- *
- * @param param0
- * @param ref
- */
-const FieldCascader: ProFieldFC<GroupProps> = (
-  { radioType, renderFormItem, mode, render, label, light, ...rest },
-  ref,
-) => {
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-
-  const layoutClassName = getPrefixCls('pro-field-cascader');
-  const [loading, options, fetchData] = useFieldFetchData(rest);
-  const intl = useIntl();
-  const cascaderRef = useRef();
-  const [open, setOpen] = useState(false);
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      ...(cascaderRef.current || {}),
-      fetchData: (keyWord: string) => fetchData(keyWord),
-    }),
-    [fetchData],
-  );
-
-  const optionsValueEnum = useMemo(() => {
-    if (mode !== 'read') return;
-    /**
-     * Support cascader fieldNames
-     *
-     * @see https://ant.design/components/cascader-cn/#header
-     */
-    const {
-      value: valuePropsName = 'value',
-      label: labelPropsName = 'label',
-      children: childrenPropsName = 'children',
-    } = rest.fieldProps?.fieldNames || {};
-
-    const valuesMap = new Map();
-
-    const traverseOptions = (_options: typeof options) => {
-      if (!_options?.length) {
-        return valuesMap;
-      }
-
-      const length = _options.length;
-      let i = 0;
-      while (i < length) {
-        const cur = _options[i++];
-        valuesMap.set(cur[valuePropsName], cur[labelPropsName]);
-        traverseOptions(cur[childrenPropsName]);
-      }
-      return valuesMap;
-    };
-
-    return traverseOptions(options);
-  }, [mode, options, rest.fieldProps?.fieldNames]);
-
-  if (mode === 'read') {
-    const dom = (
-      <>
-        {proFieldParsingText(
-          rest.text,
-          objectToMap(rest.valueEnum || optionsValueEnum),
-        )}
-      </>
-    );
-
-    if (render) {
-      return render(rest.text, { mode, ...rest.fieldProps }, dom) ?? null;
-    }
-    return dom;
-  }
-
-  if (mode === 'edit') {
-    let dom = (
-      <Cascader
-        {...compatibleBorder(!light)}
-        ref={cascaderRef}
-        open={open}
-        suffixIcon={loading ? <LoadingOutlined /> : undefined}
-        placeholder={intl.getMessage('tableForm.selectPlaceholder', '请选择')}
-        allowClear={rest.fieldProps?.allowClear !== false}
-        {...rest.fieldProps}
-        onDropdownVisibleChange={(isOpen) => {
-          rest?.fieldProps?.onDropdownVisibleChange?.(isOpen);
-          setOpen(isOpen);
-        }}
-        className={classNames(rest.fieldProps?.className, layoutClassName)}
-        options={options}
-      />
-    );
-
-    if (renderFormItem) {
-      dom =
-        renderFormItem(
-          rest.text,
-          { mode, ...rest.fieldProps, options, loading },
-          dom,
-        ) ?? null;
-    }
-
-    if (light) {
-      const { disabled, value } = rest.fieldProps;
-      const notEmpty = !!value && value?.length !== 0;
-      return (
-        <FieldLabel
-          label={label}
-          disabled={disabled}
-          bordered={rest.bordered}
-          value={notEmpty || open ? dom : null}
-          style={
-            notEmpty
-              ? {
-                  paddingInlineEnd: 0,
-                }
-              : undefined
-          }
-          allowClear={false}
-          downIcon={notEmpty || open ? false : undefined}
-          onClick={() => {
-            setOpen(true);
-            rest?.fieldProps?.onDropdownVisibleChange?.(true);
-          }}
-        />
-      );
-    }
-    return dom;
-  }
-
-  return null;
-};
-
-export default React.forwardRef(FieldCascader);

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

@@ -1,149 +0,0 @@
-import {
-  objectToMap,
-  proFieldParsingText,
-  useStyle,
-} from '@ant-design/pro-utils';
-import { Checkbox, ConfigProvider, Form, Spin } from 'antd';
-import type { CheckboxGroupProps } from 'antd/lib/checkbox';
-import classNames from 'classnames';
-import React, { useContext, useImperativeHandle, useRef } from 'react';
-import type { ProFieldFC } from '../../index';
-import type { FieldSelectProps } from '../Select';
-import { useFieldFetchData } from '../Select';
-export type GroupProps = {
-  layout?: 'horizontal' | 'vertical';
-  options?: CheckboxGroupProps['options'];
-} & FieldSelectProps;
-
-// 兼容代码-----------
-import { useToken } from '@ant-design/pro-provider';
-import 'antd/lib/checkbox/style';
-//----------------------
-/**
- * 多选组件
- *
- * @param param0
- * @param ref
- */
-const FieldCheckbox: ProFieldFC<GroupProps> = (
-  { layout = 'horizontal', renderFormItem, mode, render, ...rest },
-  ref,
-) => {
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const layoutClassName = getPrefixCls('pro-field-checkbox');
-  const status = Form.Item?.useStatus?.();
-  const [loading, options, fetchData] = useFieldFetchData(rest);
-  // css
-  const { wrapSSR, hashId } = useStyle('Checkbox', (token) => {
-    return {
-      [`.${layoutClassName}`]: {
-        '&-error': {
-          span: {
-            color: token.colorError,
-          },
-        },
-        '&-warning': {
-          span: {
-            color: token.colorWarning,
-          },
-        },
-        '&-vertical': {
-          //ant design 5
-          [`&${token.antCls}-checkbox-group`]: {
-            display: 'inline-block',
-          },
-          //ant design 5
-          [`${token.antCls}-checkbox-wrapper+${token.antCls}-checkbox-wrapper`]:
-            {
-              'margin-inline-start': '0  !important',
-            },
-          //ant design 4
-          [`${token.antCls}-checkbox-group-item`]: {
-            display: 'flex',
-            marginInlineEnd: 0,
-          },
-        },
-      },
-    };
-  });
-
-  const { token } = useToken?.();
-  const checkBoxRef = useRef();
-  useImperativeHandle(
-    ref,
-    () => ({
-      ...(checkBoxRef.current || {}),
-      fetchData: (keyWord: string) => fetchData(keyWord),
-    }),
-    [fetchData],
-  );
-
-  if (loading) {
-    return <Spin size="small" />;
-  }
-
-  if (mode === 'read') {
-    const optionsValueEnum = options?.length
-      ? options?.reduce((pre: any, cur) => {
-          return { ...pre, [(cur.value as any) ?? '']: cur.label };
-        }, {})
-      : undefined;
-
-    const dom = proFieldParsingText(
-      rest.text,
-      objectToMap(rest.valueEnum || optionsValueEnum),
-    );
-
-    if (render) {
-      return (
-        render(rest.text, { mode, ...rest.fieldProps }, <>{dom}</>) ?? null
-      );
-    }
-    return (
-      <div
-        style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          alignItems: 'center',
-          gap: token.marginSM,
-        }}
-      >
-        {dom}
-      </div>
-    );
-  }
-
-  if (mode === 'edit') {
-    const { fieldNames, ...restFieldProps } = rest.fieldProps || {};
-    const dom = wrapSSR(
-      //@ts-ignore
-      <Checkbox.Group
-        {...restFieldProps}
-        className={classNames(
-          rest.fieldProps?.className,
-          hashId,
-          `${layoutClassName}-${layout}`,
-          {
-            [`${layoutClassName}-error`]: status?.status === 'error',
-            [`${layoutClassName}-warning`]: status?.status === 'warning',
-          },
-        )}
-        options={options}
-      />,
-    );
-    if (renderFormItem) {
-      return (
-        renderFormItem(
-          rest.text,
-          { mode, ...rest.fieldProps, options, loading },
-          dom,
-        ) ?? null
-      );
-    }
-    return dom;
-  }
-
-  return null;
-};
-
-export default React.forwardRef(FieldCheckbox);

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

@@ -1,78 +0,0 @@
-import { Input } from 'antd';
-import React from 'react';
-import type { ProFieldFC } from '../../index';
-
-// 兼容代码-----------
-import { proTheme } from '@ant-design/pro-provider';
-import 'antd/lib/input/style';
-//----------------------
-
-const languageFormat = (text: string, language: string) => {
-  if (typeof text !== 'string') {
-    return text;
-  }
-  try {
-    if (language === 'json') {
-      return JSON.stringify(JSON.parse(text), null, 2);
-    }
-  } catch (error) {
-    // console.log(error)
-  }
-  return text;
-};
-
-/**
- * 代码片段组件 这个组件为了显示简单的配置，复杂的请使用更加重型的组件
- *
- * @param
- */
-const FieldCode: ProFieldFC<{
-  text: string;
-  language?: 'json' | 'text';
-}> = (
-  { text, mode, render, language = 'text', renderFormItem, plain, fieldProps },
-  ref,
-) => {
-  const code = languageFormat(text, language);
-  const { token } = proTheme.useToken();
-  if (mode === 'read') {
-    const dom = (
-      <pre
-        ref={ref}
-        {...fieldProps}
-        style={{
-          padding: 16,
-          overflow: 'auto',
-          fontSize: '85%',
-          lineHeight: 1.45,
-          color: token.colorTextSecondary,
-          fontFamily: token.fontFamilyCode,
-          backgroundColor: 'rgba(150, 150, 150, 0.1)',
-          borderRadius: 3,
-          width: 'min-content',
-          ...fieldProps.style,
-        }}
-      >
-        <code>{code}</code>
-      </pre>
-    );
-    if (render) {
-      return render(code, { mode, ...fieldProps, ref }, dom);
-    }
-    return dom;
-  }
-  if (mode === 'edit' || mode === 'update') {
-    fieldProps.value = code;
-    let dom = <Input.TextArea rows={5} {...fieldProps} ref={ref} />;
-    if (plain) {
-      dom = <Input {...fieldProps} ref={ref} />;
-    }
-    if (renderFormItem) {
-      return renderFormItem(code, { mode, ...fieldProps, ref }, dom) ?? null;
-    }
-    return dom;
-  }
-  return null;
-};
-
-export default React.forwardRef(FieldCode);

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

@@ -1,117 +0,0 @@
-import { compareVersions } from '@ant-design/pro-utils';
-import type { ColorPickerProps } from 'antd';
-import { ColorPicker as ColorPickerV5, ConfigProvider, version } from 'antd';
-import classNames from 'classnames';
-import React, { useContext, useMemo } from 'react';
-import type { ProFieldFC } from '../../index';
-import { ColorPicker as ColorPickerV4 } from './old';
-// https://ant.design/components/color-picker-cn 示例颜色
-const DEFAULT_PRESETS = {
-  label: 'Recommended',
-  colors: [
-    '#F5222D',
-    '#FA8C16',
-    '#FADB14',
-    '#8BBB11',
-    '#52C41A',
-    '#13A8A8',
-    '#1677FF',
-    '#2F54EB',
-    '#722ED1',
-    '#EB2F96',
-    '#F5222D4D',
-    '#FA8C164D',
-    '#FADB144D',
-    '#8BBB114D',
-    '#52C41A4D',
-    '#13A8A84D',
-    '#1677FF4D',
-    '#2F54EB4D',
-    '#722ED14D',
-    '#EB2F964D',
-  ],
-};
-/**
- * 判断是否是 5.5.0 以上的版本
- * @returns
- */
-function IsIt_Render_V5() {
-  return compareVersions(version, '5.5.0') > -1;
-}
-/**
- * 获取颜色组件
- * @param {boolean} [old=false] 是否使用旧版本
- * @return {*}
- */
-function getColorPicker(old: boolean = false) {
-  if ((typeof old === 'undefined' || old === false) && IsIt_Render_V5()) {
-    return ColorPickerV5;
-  }
-  return ColorPickerV4;
-}
-// const ColorPicker = getColorPicker();
-/**
- * 颜色组件
- * Antd > 5.5.0 的版本 使用 antd 的 ColorPicker
- * @param FieldColorPicker {
- *     text: number;
- *     moneySymbol?: string; }
- */
-const FieldColorPicker: ProFieldFC<
-  {
-    text: string;
-    /** 是否使用旧版本 */
-    old?: boolean;
-  } & Partial<Omit<ColorPickerProps, 'mode'>>
-> = (
-  { text, mode: type, render, renderFormItem, fieldProps, old },
-  ref: any,
-) => {
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const ColorPicker = React.useMemo(
-    () => getColorPicker(old) as unknown as typeof ColorPickerV4,
-    [old],
-  );
-  const prefixCls = getPrefixCls('pro-field-color-picker');
-  // 5.5.0 以上版本追加 className
-  const className = useMemo(() => {
-    if (old) return '';
-    return classNames({ [prefixCls]: IsIt_Render_V5() });
-  }, [prefixCls, old]);
-  if (type === 'read') {
-    const dom = (
-      <ColorPicker
-        value={text}
-        mode="read"
-        ref={ref}
-        className={className}
-        // @ts-ignore 设置无法 open
-        open={false}
-      />
-    );
-    if (render) {
-      return render(text, { mode: type, ...fieldProps }, dom);
-    }
-    return dom;
-  }
-  if (type === 'edit' || type === 'update') {
-    // 解决 默认的 width 100% 问题
-    const style = { display: 'table-cell', ...fieldProps.style };
-    const dom = (
-      <ColorPicker
-        ref={ref}
-        presets={[DEFAULT_PRESETS]}
-        {...fieldProps}
-        style={style}
-        className={className}
-      />
-    );
-    if (renderFormItem) {
-      return renderFormItem(text, { mode: type, ...fieldProps, style }, dom);
-    }
-    return dom;
-  }
-  return null;
-};
-
-export default React.forwardRef(FieldColorPicker);