@regenbio/regenbio-components-react 1.2.14 → 1.2.16

package/packages/field/README.md

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

@@ -0,0 +1,56 @@
+{
+  "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

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

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

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

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

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