@para-ui/core 3.0.55 → 3.0.56

package/Tag/index.js

@@ -0,0 +1,259 @@
+import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import CloseIcon from '@para-ui/icons/Close';
+import clsx from 'clsx';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
+import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import AutoTips from '../AutoTips/index.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import Plus from '@para-ui/icons/Plus';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@paraview/lib';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/1/12 上午9:43\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-tag {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  max-width: 100%;\n  height: 24px;\n  margin: 0 8px 8px 0;\n  padding: 0 12px;\n  font-size: 12px;\n  color: rgb(46, 55, 67);\n  white-space: nowrap;\n  background: rgba(171, 176, 185, 0.2);\n  border-radius: 4px;\n  /*&.paraui-v3-tag-small {\n    line-height: 24px;\n\n    &.paraui-v3-tag-bordered {\n      line-height: 22px;\n    }\n  }*/\n}\n.paraui-v3-tag.paraui-v3-tag-bordered {\n  border: 1px solid rgba(171, 176, 185, 0.2);\n  line-height: 22px;\n}\n.paraui-v3-tag.paraui-v3-tag-large {\n  line-height: 28px;\n}\n.paraui-v3-tag.paraui-v3-tag-large.paraui-v3-tag-bordered {\n  line-height: 26px;\n}\n.paraui-v3-tag > svg {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-v3-tag .tag-close-icon {\n  margin-left: 4px;\n  color: inherit;\n  font-size: 16px;\n  cursor: pointer;\n}\n.paraui-v3-tag .tag-close-icon:hover {\n  color: inherit;\n}\n.paraui-v3-tag > svg + .paraui-v3-auto-tips {\n  margin-left: 4px;\n}\n.paraui-v3-tag.paraui-v3-tag-has-color, .paraui-v3-tag.paraui-v3-tag-has-color svg, .paraui-v3-tag.paraui-v3-tag-has-color svg:hover {\n  color: inherit;\n}\n.paraui-v3-tag.paraui-v3-tag-blue {\n  color: rgb(54, 102, 214);\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-tag.paraui-v3-tag-green {\n  color: rgb(83, 195, 27);\n  background-color: rgba(83, 195, 27, 0.05);\n}\n.paraui-v3-tag.paraui-v3-tag-yellow {\n  color: rgb(255, 161, 80);\n  background-color: rgba(255, 161, 80, 0.05);\n}\n.paraui-v3-tag.paraui-v3-tag-red {\n  color: rgb(235, 96, 84);\n  background-color: rgba(235, 96, 84, 0.05);\n}\n.paraui-v3-tag.paraui-v3-tag-hidden {\n  display: none;\n}\n\n.paraui-v3-tag-group {\n  display: flex;\n  align-items: center;\n  flex-flow: row wrap;\n}\n.paraui-v3-tag-group .tag-group-input {\n  width: 78px;\n  height: 24px;\n  align-self: flex-start;\n  font-size: 12px;\n  color: rgb(46, 55, 67);\n  text-indent: 8px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n}\n.paraui-v3-tag-group .tag-group-input .tag-group-input-large {\n  height: 28px;\n}\n.paraui-v3-tag-group .tag-group-new .tag-group-new-icon {\n  padding: 0 5px;\n}";
+styleInject(css_248z);
+
+//tag group
+var TagGroup = function TagGroup(props) {
+  var className = props.className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'small' : _props$size,
+    style = props.style,
+    _props$bordered = props.bordered,
+    bordered = _props$bordered === void 0 ? false : _props$bordered,
+    defaultInputValue = props.defaultInputValue,
+    _props$increased = props.increased,
+    increased = _props$increased === void 0 ? false : _props$increased,
+    increasedTag = props.increasedTag,
+    onChange = props.onChange;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    inData = _useState2[0],
+    setInData = _useState2[1]; //数据源
+  var _useState3 = useState(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : ''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1]; //input value
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    inputVisible = _useState6[0],
+    setInputVisible = _useState6[1]; //input visible
+  var inputRef = useRef(); //input ref
+  useEffect(function () {
+    if (props.data) {
+      var tArr = props.data;
+      //Item[]
+      var unObjType = tArr.some(function (v) {
+        return ['string', 'number'].includes(_typeof(v));
+      });
+      if (unObjType) {
+        tArr = tArr.map(function (_) {
+          return {
+            value: _,
+            label: _
+          };
+        });
+      }
+      setInData(_toConsumableArray(tArr));
+    }
+  }, [props.data]);
+  //tag value
+  var getTagGroupVal = function getTagGroupVal(data) {
+    return data.map(function (_) {
+      return _.value;
+    });
+  };
+  //show input
+  var showInput = function showInput() {
+    setInputVisible(true);
+    setTimeout(function () {
+      var _a;
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  };
+  //input change
+  var handleInputChange = function handleInputChange(e) {
+    setInputValue(e.target.value);
+  };
+  //input confirm
+  var handleInputConfirm = function handleInputConfirm() {
+    var val = inputValue.trim();
+    if (val !== '') {
+      inData.push({
+        value: val,
+        label: val,
+        closable: true
+      });
+      setInData(_toConsumableArray(inData));
+      onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
+    }
+    setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : '');
+    setInputVisible(false);
+  };
+  //input enter
+  var handleInputEnter = function handleInputEnter(e) {
+    if (e.keyCode === 13 || e.which === 13) {
+      handleInputConfirm();
+    }
+  };
+  //handle close
+  var handleClose = function handleClose(item) {
+    return function (e) {
+      var idx = inData.findIndex(function (_) {
+        return _.value === item.value;
+      });
+      if (idx > -1) {
+        inData.splice(idx, 1);
+        setInData(_toConsumableArray(inData));
+      }
+      if (item.onClose) item.onClose(e);
+      onChange === null || onChange === void 0 ? void 0 : onChange(inData, getTagGroupVal(inData));
+    };
+  };
+  //渲染Tag组
+  var renderTagGroup = function renderTagGroup() {
+    if (!(inData === null || inData === void 0 ? void 0 : inData.length)) return null;
+    return inData.map(function (item, idx) {
+      return jsx(Tag, Object.assign({}, item, {
+        size: size,
+        bordered: bordered,
+        visible: true,
+        onClose: handleClose(item)
+      }, {
+        children: item.label
+      }), idx);
+    });
+  };
+  //动态增加tag
+  var renderNewInput = function renderNewInput() {
+    var _a;
+    if (inputVisible) {
+      var inputCls = clsx('tag-group-input', {
+        'tag-group-input-large': size === 'large'
+      });
+      return jsx("input", {
+        type: "text",
+        ref: inputRef,
+        className: inputCls,
+        value: inputValue,
+        onChange: handleInputChange,
+        onBlur: handleInputConfirm,
+        onKeyDown: handleInputEnter
+      });
+    }
+    var icon = jsx(Plus, {});
+    var text = 'New Tag';
+    if (increasedTag) {
+      icon = increasedTag.icon || jsx(Plus, {});
+      text = (_a = increasedTag.text) !== null && _a !== void 0 ? _a : 'New Tag';
+    }
+    var newCls = clsx('tag-group-new', {
+      'tag-group-new-icon': !text
+    });
+    return jsx(Tag, Object.assign({
+      className: newCls,
+      size: size,
+      bordered: bordered,
+      icon: icon,
+      onClick: showInput
+    }, {
+      children: text
+    }));
+  };
+  return jsxs("div", Object.assign({
+    className: clsx("".concat($prefixCls, "-tag-group"), className),
+    style: style
+  }, {
+    children: [renderTagGroup(), increased && renderNewInput()]
+  }));
+};
+
+//预设颜色列表
+var PresetColors = ['blue', 'green', 'yellow', 'red'];
+//tag
+var InternalTag = function InternalTag(props) {
+  var _clsx;
+  var className = props.className,
+    children = props.children,
+    icon = props.icon,
+    color = props.color,
+    onClose = props.onClose,
+    closeIcon = props.closeIcon,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? false : _props$closable,
+    _props$bordered = props.bordered,
+    bordered = _props$bordered === void 0 ? false : _props$bordered,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'small' : _props$size,
+    style = props.style,
+    visibleTag = props.visible,
+    restProps = __rest(props, ["className", "children", "icon", "color", "onClose", "closeIcon", "closable", "bordered", "size", "style", "visible"]);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1]; //显示tag
+  useEffect(function () {
+    if ('visible' in props) {
+      setVisible(!!visibleTag);
+    }
+  }, [visibleTag]);
+  //是否预设颜色
+  var isPresetColor = function isPresetColor() {
+    if (!color) return false;
+    return PresetColors.includes(color);
+  };
+  //tag style
+  var tagStyle = Object.assign({
+    color: color && !isPresetColor() ? color : undefined
+  }, style);
+  //tag cls
+  var tagClassName = clsx("".concat($prefixCls, "-tag"), className, (_clsx = {}, _defineProperty(_clsx, "".concat($prefixCls, "-tag-has-color"), color), _defineProperty(_clsx, "".concat($prefixCls, "-tag-hidden"), !visible), _defineProperty(_clsx, "".concat($prefixCls, "-tag-bordered"), bordered), _defineProperty(_clsx, "".concat($prefixCls, "-tag-large"), size === 'large'), _defineProperty(_clsx, "".concat($prefixCls, "-tag-").concat(color), isPresetColor()), _clsx));
+  //tag close click
+  var handleCloseClick = function handleCloseClick(e) {
+    e.stopPropagation();
+    onClose === null || onClose === void 0 ? void 0 : onClose(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (!('visible' in props)) {
+      setVisible(false);
+    }
+  };
+  //渲染close icon
+  var renderCloseIcon = function renderCloseIcon() {
+    if (!closable) return null;
+    return closeIcon ? jsx("span", Object.assign({
+      className: 'tag-close-icon',
+      onClick: handleCloseClick
+    }, {
+      children: closeIcon
+    })) : jsx(CloseIcon, {
+      className: 'tag-close-icon',
+      onClick: handleCloseClick
+    });
+  };
+  return jsxs("span", Object.assign({}, restProps, {
+    className: tagClassName,
+    style: tagStyle
+  }, {
+    children: [icon ? jsxs(Fragment, {
+      children: [icon, children && jsx(AutoTips, {
+        children: jsx("span", {
+          children: children
+        })
+      })]
+    }) : children ? jsx(AutoTips, {
+      children: children
+    }) : null, renderCloseIcon()]
+  }));
+};
+var Tag = InternalTag;
+
+export { Tag, TagGroup, Tag as default };

package/TextEditor/common.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author xh
+ * @date 2022/09/06 18:00
+ * @description  存放富文本编辑器的一些默认配置
+ */
+export declare const TOOL_BAR_CONFIG: (string | {
+    key: string;
+    title: string;
+    iconSvg: string;
+    menuKeys: string[];
+})[];

package/TextEditor/index.d.ts

@@ -0,0 +1,127 @@
+/**
+ * @author xh
+ * @date 2022/09/06 11:26
+ * @description 基于wangEditor的富文本编辑器
+ */
+import React, { ReactNode } from 'react';
+import { LabelTooltipProps } from "../Label";
+import { IDomEditor } from '@wangeditor/editor';
+import { HelperTextDetailProps } from "../HelperText";
+import './index.scss';
+import '@wangeditor/editor/dist/css/style.css';
+type InsertFnType = (url: string, alt: string, href: string) => void;
+export interface IMenuGroup {
+    key: string;
+    title: string;
+    iconSvg?: string;
+    menuKeys: string[];
+}
+export interface UpLoadImgConfig {
+    /** form-data fieldName ，默认值 'wangeditor-uploaded-image' */
+    fieldName: string;
+    /** 单个文件的最大体积限制，默认为 2M */
+    /** 1 * 1024 * 1024（1M） */
+    maxFileSize: number;
+    /** 最多可上传几个文件，默认为 100） */
+    maxNumberOfFiles: number;
+    /** 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 [] */
+    allowedFileTypes: string[];
+    /** 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。*/
+    meta: object;
+    /** 将 meta 拼接到 url 参数中，默认 false */
+    metaWithUrl: boolean;
+    /** 自定义增加 http  header */
+    headers: object;
+    /** 跨域是否传递 cookie ，默认为 false */
+    withCredentials: boolean;
+    /** 超时时间，默认为 10 秒 */
+    /** 5 * 1000(5秒) */
+    timeout: number;
+    /** 小于该值就插入 base64 格式（而不上传），默认为 0 */
+    /** 5 * 1024(5kb) */
+    base64LimitSize: number;
+    /** 单个文件上传成功之后 */
+    onSuccess: (file: File, res: any) => void;
+    /** 单个文件上传失败 */
+    onFailed: (file: File, res: any) => void;
+    /** 上传进度回调 */
+    onProgress: (progress: number) => void;
+    /** 上传之前触发 */
+    onBeforeUpload: (file: File) => any;
+    /** 上传错误，或者触发 timeout 超时 */
+    onError: (file: File, err: any, res: any) => void;
+    /** 用户自定义图片上传 */
+    customUpload: (file: File, insertFn: InsertFnType) => void;
+    /** 用户自定义图片插入 */
+    customInsert: (res: any, insertFn: InsertFnType) => void;
+}
+export type UpLoadVideoConfig = Omit<UpLoadImgConfig, 'base64LimitSize'>;
+export interface TextEditorProps extends HelperTextDetailProps {
+    /** 样式class */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** toolbarStyle */
+    toolbarStyle?: React.CSSProperties;
+    /** editorStyle */
+    editorStyle?: React.CSSProperties;
+    /** 富文本的最大长度 */
+    max?: number;
+    /** 标题 */
+    label?: ReactNode;
+    /** 标题提示 */
+    labelSign?: ReactNode;
+    /** 帮组提示信息 */
+    labelTooltip?: LabelTooltipProps;
+    /** 提示语 */
+    placeholder?: string;
+    /** 编辑器是否默认聚焦 */
+    autoFocus?: boolean;
+    /** 只读 */
+    readOnly?: boolean;
+    /** 是否必填 */
+    required?: boolean;
+    /** 默认值 不受控 */
+    defaultValue?: string;
+    /** 默认值 受控 */
+    value?: string;
+    /** 工具栏菜单配置*/
+    toolbarKeys?: Array<string | IMenuGroup>;
+    /** 工具栏不需要的配置 */
+    excludeKeys?: string[];
+    /** 工具栏插入新菜单 */
+    insertKeys?: {
+        index: number;
+        keys: string | Array<string | IMenuGroup>;
+    };
+    /** 文件上传的服务地址 */
+    server: string;
+    /** 上传图片配置 */
+    uploadImage?: Partial<UpLoadImgConfig>;
+    /** 上传视频配置 */
+    uploadVideo?: Partial<UpLoadVideoConfig>;
+    /** 国际化 */
+    in18?: 'en' | 'zh-CN';
+    /** 改变事件 */
+    onChange?: (value: string, text: string) => void;
+    /** 失去焦点 */
+    onBlur?: (editor: IDomEditor) => void;
+    /** 得到焦点 */
+    onFocus?: (editor: IDomEditor) => void;
+    /** 编辑器销毁钩子 */
+    onDestroyed?: (editor: IDomEditor) => void;
+}
+export interface TextEditorRef {
+    /** 获取html内容 */
+    getContent: () => string | undefined;
+    /** 获取纯文本内容 */
+    getText: () => string | undefined;
+    /** 清空编辑器 */
+    clearEditor: () => void;
+    /** 设置content */
+    setContent: (content: string) => void;
+    /** 获取编辑器实例 */
+    getEditor: () => IDomEditor | null;
+}
+declare const TextEditor: React.ForwardRefExoticComponent<TextEditorProps & React.RefAttributes<TextEditorRef>>;
+export default TextEditor;