@para-ui/core 4.0.33 → 4.0.37

package/Argv/index.js

@@ -0,0 +1,738 @@
+import { _ as __awaiter } from '../_verture/tslib.es6-f43aa41d.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
+import { UUID, debounce } from '@paraview/lib';
+import { Button } from '../Button/index.js';
+import { TextField } from '../TextField/index.js';
+import { Modal } from '../Modal/index.js';
+import { Message } from '../Message/index.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import Select from '../Select/index.js';
+import ExpandPart from '@para-ui/icons/ExpandPart';
+import { InputNumber } from '../InputNumber/index.js';
+import Label from '../Label/index.js';
+import Delete from '@para-ui/icons/Delete';
+import PlusCircleF from '@para-ui/icons/PlusCircleF';
+import { isObject } from '../Utils/index.js';
+import '../_verture/index-ca413216.js';
+import '@para-ui/icons/LoadingF';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Forbid';
+import '@para-ui/icons/Down';
+import '../_verture/index-bde7aabe.js';
+import 'rc-dropdown';
+import '../_verture/usePopupContainer-635f66f4.js';
+import 'dayjs';
+import '../AutoTips/index.js';
+import '@para-ui/icons/PreviewClose';
+import '@para-ui/icons/PreviewOpen';
+import '@para-ui/icons/CloseCircleF';
+import '../Loading/index.js';
+import '../HelperText/index.js';
+import '../_verture/useGlobalProps-4ae1a007.js';
+import 'rc-dialog';
+import '@para-ui/icons/Close';
+import 'react-dom';
+import '@para-ui/icons/CheckCircleF';
+import '@para-ui/icons/WarningCircleF';
+import '../Empty/index.js';
+import '@para-ui/icons/Check';
+import '@para-ui/icons/Search';
+import '../Popover/index.js';
+import 'rc-input-number';
+import '@para-ui/icons/Up';
+import '../Help/index.js';
+import '@para-ui/icons/Help';
+
+var en = {
+  environmentVariable: 'Environment Variable',
+  pleaseEnterKey: 'Please enter key',
+  pleaseEnterValue: 'Please enter value',
+  add: 'Add',
+  batchEdit: 'Batch Edit',
+  ok: 'OK',
+  formatErrorJson: 'Format error, please enter valid JSON',
+  formatErrorArrayJson: 'Format error, please enter a valid JSON array',
+  pleaseEnter: 'Please enter',
+  pleaseSelect: 'Please select',
+  formatError: 'Format error',
+  required: 'Required, cannot be empty'
+};
+
+var zh = {
+  environmentVariable: '环境变量',
+  pleaseEnterKey: '请输入key',
+  pleaseEnterValue: '请输入value',
+  add: '新增',
+  batchEdit: '批量编辑',
+  ok: '确定',
+  formatErrorJson: '格式有误，请输入正确的JSON',
+  formatErrorArrayJson: '格式有误，请输入正确的JSON数组',
+  pleaseEnter: '请输入',
+  pleaseSelect: '请选择',
+  formatError: '格式错误',
+  required: '必填项，不能为空'
+};
+
+var localeJson = {
+  zh,
+  en
+};
+
+var css_248z$2 = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/";
+styleInject(css_248z$2);
+
+const BatchEdit = props => {
+  const intl = useFormatMessage('Argv', localeJson);
+  const {
+    className,
+    sourceData,
+    onFinish,
+    dataToJson,
+    jsonToData
+  } = props;
+  const [state, setState] = useState({
+    open: false,
+    json: ''
+  });
+  const onHandleClick = () => {
+    let jsonStr = '';
+    if (!Array.isArray(sourceData)) {
+      jsonStr = '';
+    } else {
+      try {
+        if (dataToJson) {
+          jsonStr = dataToJson(sourceData);
+        } else {
+          jsonStr = JSON.stringify(sourceData, null, 4);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    setState(Object.assign(Object.assign({}, state), {
+      json: jsonStr,
+      open: !state.open
+    }));
+  };
+  const onCancel = () => {
+    setState(Object.assign(Object.assign({}, state), {
+      open: false
+    }));
+  };
+  const onOk = value => {
+    let jsonData = [];
+    try {
+      if (jsonToData) {
+        jsonData = jsonToData(value);
+      } else {
+        jsonData = JSON.parse(value);
+      }
+    } catch (error) {
+      Message.error(intl('formatErrorJson'), 5000);
+      return false;
+    }
+    setState(Object.assign(Object.assign({}, state), {
+      open: false
+    }));
+    onFinish && onFinish(jsonData);
+  };
+  return jsxs("div", Object.assign({
+    className: "argv-batch-edit-content ".concat(className)
+  }, {
+    children: [jsx(Button, Object.assign({
+      variant: "outlined",
+      size: "small",
+      className: "btn-edit",
+      onClick: onHandleClick
+    }, {
+      children: intl('batchEdit')
+    })), jsx(EditModal, {
+      open: state.open,
+      onCancel: onCancel,
+      onOk: onOk,
+      json: state.json,
+      checkData: props.checkData
+    })]
+  }));
+};
+const EditModal = props => {
+  const {
+    open,
+    disabled,
+    onCancel,
+    onOk,
+    json,
+    checkData
+  } = props;
+  const intl = useFormatMessage('Argv', localeJson);
+  const [value, setValue] = useState('');
+  useEffect(() => {
+    setValue(json || '');
+  }, [json]);
+  // 校验value是否是json格式
+  const check = () => {
+    try {
+      const jsonValue = JSON.parse(value);
+      if (!Array.isArray(jsonValue)) {
+        Message.error(intl('formatErrorArrayJson'));
+        return false;
+      }
+      if (checkData && !checkData(jsonValue)) {
+        return false;
+      }
+      return true;
+    } catch (error) {
+      Message.error(intl('formatErrorJson'));
+      return false;
+    }
+  };
+  const onSubmit = () => {
+    if (!check()) return;
+    try {
+      onOk(value);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  return jsx(Modal, Object.assign({
+    className: "".concat($prefixCls, "-form"),
+    open: open,
+    title: intl('batchEdit'),
+    onCancel: onCancel,
+    onOk: onSubmit,
+    maskClosable: true,
+    showCancel: false,
+    okText: intl('ok')
+  }, {
+    children: jsx(TextField, {
+      label: 'API JSON',
+      placeholder: "\u8BF7\u8F93\u5165",
+      disabled: disabled,
+      multiline: true,
+      rows: 12,
+      value: value || '',
+      onChange: e => setValue(e.target.value)
+    })
+  }));
+};
+
+var dataTypeSelectList = [{
+  label: 'string',
+  value: 'string'
+}, {
+  label: 'number',
+  value: 'number'
+}, {
+  label: 'boolean',
+  value: 'boolean'
+}, {
+  label: 'object',
+  value: 'object'
+}];
+var defaultInputValueMapping = {
+  string: '',
+  number: 0,
+  boolean: true,
+  object: '{}'
+};
+var booleanSelectList = [{
+  label: 'true',
+  value: true
+}, {
+  label: 'false',
+  value: false
+}];
+
+var css_248z$1 = ".argv-data-generator .data-generator-content {\n  width: 100%;\n  display: flex;\n}\n.argv-data-generator .data-generator-content .datatype-select {\n  width: 120px;\n  flex-shrink: 0;\n  margin-right: 8px;\n}\n.argv-data-generator .data-input .text-field-content-within-input {\n  min-height: 30px;\n}\n.argv-data-generator .data-input .text-field-content-within-input .text-field-label-placeholder {\n  padding-top: 9px !important;\n  height: unset !important;\n}\n.argv-data-generator .data-input textarea {\n  min-height: 30px;\n  padding: 6px 10px !important;\n}";
+styleInject(css_248z$1);
+
+const DataGenerator = props => {
+  const {
+    defaultValue,
+    value,
+    disabled,
+    onChange,
+    error,
+    helperText,
+    placeholderTextField
+  } = props;
+  const intl = useFormatMessage('Argv', localeJson);
+  const [valueCom, setValueCom] = useState({
+    dataType: 'string',
+    data: ''
+  });
+  const [editorShow, setEditorShow] = useState(false);
+  const [code, setCode] = useState('');
+  const constData = useRef({
+    dataMapping: Object.assign({}, defaultInputValueMapping),
+    uuid: UUID()
+  });
+  useEffect(() => {
+    if (defaultValue !== undefined) setValueCom(defaultValue);
+  }, []);
+  useEffect(() => {
+    if (value !== undefined) setValueCom(value);
+  }, [value]);
+  const onSelectChange = value => {
+    var _a;
+    if (value !== valueCom.dataType) {
+      const dataMapping = constData.current.dataMapping;
+      const defaultInputValue = (_a = dataMapping[value]) !== null && _a !== void 0 ? _a : '';
+      const val = Object.assign(Object.assign({}, valueCom), {
+        dataType: value,
+        data: defaultInputValue
+      });
+      setValueCom(val);
+      onChange && onChange(val);
+    }
+  };
+  const onChangeValue = value => {
+    const val = Object.assign(Object.assign({}, valueCom), {
+      data: value
+    });
+    setValueCom(val);
+    onChange && onChange(val);
+    const dataType = valueCom.dataType;
+    const dataMapping = constData.current.dataMapping;
+    dataMapping[dataType] = value;
+  };
+  const inputMemo = useMemo(() => {
+    const {
+      dataType,
+      data
+    } = valueCom;
+    if (dataType === 'number') {
+      const val = Number(data);
+      return jsx(InputNumber, {
+        placeholder: placeholderTextField,
+        disabled: disabled,
+        className: "data-input",
+        value: val,
+        onChange: onChangeValue,
+        error: error,
+        helperText: helperText
+      });
+    }
+    if (dataType === 'boolean') {
+      return jsx(Select, {
+        disabled: disabled,
+        className: "data-input",
+        list: booleanSelectList,
+        value: data,
+        onChange: onChangeValue,
+        error: error,
+        helperText: helperText
+      });
+    }
+    return jsx(TextField, {
+      placeholder: placeholderTextField,
+      className: "data-input",
+      multiline: true,
+      value: data,
+      rightIcon: jsx(ExpandPart, {}),
+      onClickIcon: () => {
+        setEditorShow(true);
+        setCode(data);
+      },
+      onChange: e => onChangeValue(e.target.value),
+      rows: 1,
+      resize: false,
+      error: error,
+      helperText: helperText
+    });
+  }, [valueCom, onChangeValue, error, helperText]);
+  const onOk = () => {
+    if (valueCom.dataType === 'string') {
+      onChangeValue(code);
+      setEditorShow(false);
+    }
+    if (valueCom.dataType === 'object') {
+      try {
+        const val = JSON.parse(code);
+        onChangeValue(code);
+        setEditorShow(false);
+      } catch (error) {
+        Message.warn(intl('formatErrorJson'));
+      }
+    }
+  };
+  return jsxs("div", Object.assign({
+    className: "argv-data-generator"
+  }, {
+    children: [jsxs("div", Object.assign({
+      className: "data-generator-content"
+    }, {
+      children: [jsx(Select, {
+        disabled: disabled,
+        className: "datatype-select",
+        list: dataTypeSelectList,
+        value: valueCom === null || valueCom === void 0 ? void 0 : valueCom.dataType,
+        onChange: onSelectChange
+      }), inputMemo]
+    })), jsx(Modal, Object.assign({
+      open: editorShow,
+      hideHeader: true,
+      size: "auto",
+      onCancel: () => setEditorShow(false),
+      onOk: onOk
+    }, {
+      children: jsx("div", Object.assign({
+        style: {
+          width: '600px',
+          height: 'auto',
+          paddingTop: '20px'
+        }
+      }, {
+        children: jsx(TextField, {
+          disabled: disabled,
+          multiline: true,
+          rows: 12,
+          value: code || '',
+          onChange: e => setCode(e.target.value)
+        })
+      }))
+    }))]
+  }));
+};
+// 校验数据是否正确
+const checkGeneratorData = data => {
+  const {
+    dataType,
+    data: value
+  } = data;
+  switch (dataType) {
+    case 'number':
+      return !isNaN(Number(value));
+    case 'boolean':
+      return true;
+    case 'string':
+      return true;
+    case 'object':
+      try {
+        JSON.parse(value);
+        return true;
+      } catch (error) {
+        return false;
+      }
+    default:
+      return false;
+  }
+};
+// 将生成器数据格式化为数据
+const formatGeneratorToData = data => {
+  if (!data) return '';
+  const {
+    dataType,
+    data: value
+  } = data;
+  switch (dataType) {
+    case 'number':
+      return Number(value);
+    case 'boolean':
+      return !!value;
+    case 'string':
+      return value;
+    case 'object':
+      try {
+        const val = JSON.parse(value);
+        return val;
+      } catch (error) {
+        return {};
+      }
+    default:
+      return value;
+  }
+};
+// 将数据格式化为生成器数据
+const formatDataToGenerator = data => {
+  if (typeof data === 'number') {
+    return {
+      dataType: 'number',
+      data: data
+    };
+  }
+  if (typeof data === 'boolean') {
+    return {
+      dataType: 'boolean',
+      data: data
+    };
+  }
+  if (typeof data === 'string') {
+    return {
+      dataType: 'string',
+      data: data
+    };
+  }
+  if (typeof data === 'object') {
+    return {
+      dataType: 'object',
+      data: JSON.stringify(data)
+    };
+  }
+  return {
+    dataType: 'string',
+    data: ''
+  };
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-argv {\n  position: relative;\n}\n.paraui-v4-argv .btn-batch-edit {\n  position: absolute;\n  right: 0;\n  top: -8px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.paraui-v4-argv .argv-item {\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.paraui-v4-argv .argv-item .argv-key {\n  width: 200px;\n}\n.paraui-v4-argv .argv-item .argv-value {\n  flex: 1;\n}\n.paraui-v4-argv .argv-item .middle-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 30px;\n  margin: 0 12px;\n  line-height: 1;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-argv .paraui-v4-helper-text {\n  min-height: 10px;\n}\n.paraui-v4-argv .argv-btn-add {\n  height: 32px;\n  line-height: 32px;\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgb(212, 218, 227);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgb(247, 248, 250);\n  color: rgb(46, 101, 230);\n  font-size: 14px;\n}\n.paraui-v4-argv .argv-btn-add > svg {\n  font-size: 16px;\n  color: rgb(46, 101, 230);\n  margin-right: 8px;\n}\n.paraui-v4-argv .argv-btn-add:hover {\n  border-color: rgb(87, 131, 235);\n  background-color: rgb(240, 245, 255);\n}\n.paraui-v4-argv .argv-btn-add.disabled {\n  cursor: not-allowed;\n  background-color: rgb(247, 248, 250);\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-argv .argv-btn-add.disabled > svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-argv .argv-btn-add.disabled:hover {\n  border-color: rgb(212, 218, 227);\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-argv .argv-btn-del {\n  flex-shrink: 0;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  margin-left: 12px;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v4-argv .argv-btn-del:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-argv .argv-btn-del:hover svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-argv .argv-btn-del svg {\n  font-size: 24px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-argv .argv-btn-del.disabled {\n  cursor: not-allowed;\n}\n.paraui-v4-argv .argv-btn-del.disabled:hover {\n  background-color: transparent;\n}\n.paraui-v4-argv .argv-btn-del.disabled:hover svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-argv .argv-btn-del.disabled svg {\n  color: rgb(92, 101, 115);\n}";
+styleInject(css_248z);
+
+const Argv = props => {
+  const {
+    style,
+    className,
+    defaultValue,
+    disabled,
+    label,
+    labelProps,
+    errors,
+    onChange,
+    list,
+    onListChange
+  } = props;
+  const intl = useFormatMessage('Argv', localeJson);
+  const [data, setData] = useState([]);
+  /** 默认值 */
+  const defaultListItem = {
+    key: '',
+    data: {
+      dataType: 'string',
+      data: ''
+    }
+  };
+  useEffect(() => {
+    // 判断data是否为对象
+    if (!defaultValue || !isObject(defaultValue)) {
+      setData([]);
+      return;
+    }
+    setData(formatObjectToData(defaultValue));
+  }, [defaultValue]);
+  useEffect(() => {
+    if (list !== undefined) setData(list);
+  }, [list]);
+  /**
+   * @desc 搜索 - 防抖
+   */
+  const onChangeThrottle = useMemo(() => debounce(val => __awaiter(void 0, void 0, void 0, function* () {
+    const obj = formatDataToObject(val);
+    onChange && onChange(obj);
+  }), 200), []);
+  const onDataChange = val => {
+    setData(val);
+    onListChange && onListChange(val);
+    onChangeThrottle(val);
+  };
+  /**
+   * @desc 新增
+   */
+  const add = () => {
+    if (disabled) return;
+    data.push(Object.assign({}, defaultListItem));
+    // if (value === undefined) setData([...data]);
+    onDataChange([...data]);
+  };
+  /**
+   * @desc 删除
+   */
+  const del = index => {
+    if (disabled) return;
+    data.splice(index, 1);
+    // if (value === undefined) setData([...data]);
+    onDataChange([...data]);
+    // const errorArr = [...errors];
+    // errorArr.splice(index, 1);
+    // onErrors && onErrors(errorArr);
+  };
+  /**
+   * @desc 值回调
+   */
+  const onValueChange = (val, index, key) => {
+    if (!data[index]) data[index] = Object.assign({}, defaultListItem);
+    data[index] = Object.assign(Object.assign({}, data[index]), {
+      [key]: val
+    });
+    // if (value === undefined) setData([...data]);
+    onDataChange([...data]);
+  };
+  /**
+   * @desc 组件头部
+   */
+  const headerMemo = useMemo(() => {
+    return jsx("div", Object.assign({
+      className: "argv-label"
+    }, {
+      children: jsx(Label, Object.assign({
+        label: label || intl('environmentVariable')
+      }, labelProps))
+    }));
+  }, [label, labelProps]);
+  const listMemo = useMemo(() => {
+    const arr = data.map((item, index) => {
+      var _a;
+      const errItem = (_a = errors === null || errors === void 0 ? void 0 : errors[index]) !== null && _a !== void 0 ? _a : {};
+      const errKey = (errItem === null || errItem === void 0 ? void 0 : errItem.key) || '';
+      const errValue = (errItem === null || errItem === void 0 ? void 0 : errItem.value) || '';
+      return jsx("div", {
+        children: jsxs("div", Object.assign({
+          className: "argv-item"
+        }, {
+          children: [jsx("div", Object.assign({
+            className: "argv-key"
+          }, {
+            children: jsx(TextField, {
+              value: (item === null || item === void 0 ? void 0 : item.key) || '',
+              placeholder: intl('pleaseEnterKey'),
+              onChange: e => onValueChange(e.target.value, index, 'key'),
+              disabled: disabled,
+              error: !!errKey,
+              helperText: errKey
+            })
+          })), jsx("div", Object.assign({
+            className: "middle-icon"
+          }, {
+            children: ":"
+          })), jsx("div", Object.assign({
+            className: "argv-value"
+          }, {
+            children: jsx(DataGenerator, {
+              value: item === null || item === void 0 ? void 0 : item.data,
+              onChange: value => onValueChange(value, index, 'data'),
+              disabled: disabled,
+              error: !!errValue,
+              helperText: errValue,
+              placeholderTextField: intl('pleaseEnterValue')
+            })
+          })), jsx("div", Object.assign({
+            className: "argv-btn-del ".concat(disabled ? 'disabled' : '')
+          }, {
+            children: jsx(Delete, {
+              onClick: () => del(index)
+            })
+          }))]
+        }), index)
+      }, index);
+    });
+    return arr;
+  }, [data, onValueChange, del]);
+  const dataToJson = () => {
+    if (!Array.isArray(data)) return '';
+    const arr = data.map(item => {
+      const value = formatGeneratorToData(item.data);
+      return {
+        key: item.key || '',
+        value: value
+      };
+    });
+    try {
+      return JSON.stringify(arr, null, 4);
+    } catch (error) {
+      return '';
+    }
+  };
+  const jsonToData = value => {
+    let jsonData = [];
+    try {
+      jsonData = JSON.parse(value);
+    } catch (error) {
+      return [];
+    }
+    if (!Array.isArray(jsonData)) return [];
+    const arr = jsonData.map(item => {
+      const value = formatDataToGenerator(item === null || item === void 0 ? void 0 : item.value);
+      return {
+        key: item.key,
+        data: value
+      };
+    });
+    return arr;
+  };
+  return jsxs("div", Object.assign({
+    className: clsx("".concat($prefixCls, "-argv"), className, {}),
+    style: style
+  }, {
+    children: [jsx("div", Object.assign({
+      className: "btn-batch-edit"
+    }, {
+      children: jsx(BatchEdit, {
+        sourceData: data,
+        dataToJson: dataToJson,
+        jsonToData: jsonToData,
+        onFinish: val => {
+          // if (value === undefined) setData([...val] as IArgvItem[]);
+          console.log(val, 'BatchEdit===>');
+          onDataChange([...val]);
+        }
+      })
+    })), headerMemo, jsx("div", Object.assign({
+      className: "argv-list"
+    }, {
+      children: listMemo
+    })), jsxs("div", Object.assign({
+      className: "argv-btn-add ".concat(disabled ? 'disabled' : ''),
+      onClick: add
+    }, {
+      children: [jsx(PlusCircleF, {}), jsx("span", {
+        children: intl('add')
+      })]
+    }))]
+  }));
+};
+const formatObjectToData = data => {
+  // 判断data是否为对象
+  if (!isObject(data)) return [];
+  // 格式化数据
+  const argvKeys = Object.keys(data);
+  const arr = [];
+  argvKeys.forEach(key => {
+    const value = formatDataToGenerator(data === null || data === void 0 ? void 0 : data[key]);
+    arr.push({
+      key: key,
+      data: value
+    });
+  });
+  return arr;
+};
+const formatDataToObject = data => {
+  const obj = {};
+  data.forEach(item => {
+    if (item.key) {
+      const value = formatGeneratorToData(item.data);
+      obj[item.key] = value;
+    }
+  });
+  return obj;
+};
+// 校验每一项数据格式是否正确
+const checkArgvData = (data, intl) => {
+  const arr = [];
+  let isErr = false;
+  data.forEach((item, index) => {
+    const {
+      key,
+      data
+    } = item;
+    const isKeyErr = !key;
+    const isValueErr = !checkGeneratorData(data);
+    if (isKeyErr || isValueErr) {
+      isErr = true;
+      arr[index] = {
+        key: isKeyErr ? intl('required') : '',
+        value: isValueErr ? intl('formatError') : ''
+      };
+    }
+  });
+  return {
+    error: isErr,
+    detail: arr
+  };
+};
+
+export { checkArgvData, Argv as default, formatDataToObject, formatObjectToData };