ls-pro-common 1.0.34 → 1.0.35

package/es/components/InputMultiLine.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { InputProps } from 'antd';
+import type { ProFormItemProps } from 'ls-pro-form';
+export declare type InputMultiLineProps = ProFormItemProps<InputProps> & {
+    /**@name 表单项name, 跟 form.item 的 name一致 */
+    name: string;
+    /**@name 表单值*/
+    value?: string;
+    /**@name 弹框宽度,默认为400 */
+    popWidth?: string;
+    /**@name 弹框位置，默认为bottom */
+    placement?: string;
+    /**@name 多行文本框行数 */
+    rows?: number;
+    /** @name 最大输入行数 */
+    maxRows?: number;
+};
+declare const InputMultiLine: React.ForwardRefExoticComponent<{
+    fieldProps?: (import("../../../form/lib/interface").FieldProps & InputProps) | undefined;
+    placeholder?: string | string[] | undefined;
+    secondary?: boolean | undefined;
+    allowClear?: boolean | undefined;
+    disabled?: boolean | undefined;
+    width?: number | "sm" | "md" | "xl" | "xs" | "lg" | undefined;
+    proFieldProps?: import("../../../utils/lib").ProFieldProps | undefined;
+    footerRender?: import("../../../form/lib").LightFilterFooterRender | undefined;
+} & Omit<import("../../../form/lib/components/FormItem").ProFormItemProps, "valueType"> & import("../../../form/lib/interface").ExtendsProps & {
+    /**@name 表单项name, 跟 form.item 的 name一致 */
+    name: string;
+    /**@name 表单值*/
+    value?: string | undefined;
+    /**@name 弹框宽度,默认为400 */
+    popWidth?: string | undefined;
+    /**@name 弹框位置，默认为bottom */
+    placement?: string | undefined;
+    /**@name 多行文本框行数 */
+    rows?: number | undefined;
+    /** @name 最大输入行数 */
+    maxRows?: number | undefined;
+} & React.RefAttributes<unknown>>;
+export default InputMultiLine;

package/es/components/InputMultiLine.js

@@ -0,0 +1,142 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "antd/es/popover/style";
+import _Popover from "antd/es/popover";
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["name", "rows", "maxRows", "placement", "popWidth", "fieldProps", "value", "allowClear"];
+import React, { useRef, useState, useEffect, useContext, useMemo, useImperativeHandle } from 'react';
+import { ProFormText, ProFormContext } from 'ls-pro-form';
+import { UnorderedListOutlined } from '@ant-design/icons';
+var InputMultiLine = /*#__PURE__*/React.forwardRef(function (prop, ref) {
+  //@ts-ignore
+  var _useContext = useContext(ProFormContext),
+      formRef = _useContext.formRef;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      text = _useState2[0],
+      setText = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      lineText = _useState4[0],
+      setLineText = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      visible = _useState6[0],
+      setVisible = _useState6[1];
+
+  var inputRef = useRef();
+  useImperativeHandle(ref, function () {
+    return inputRef.current;
+  });
+
+  var name = prop.name,
+      _prop$rows = prop.rows,
+      rows = _prop$rows === void 0 ? 12 : _prop$rows,
+      _prop$maxRows = prop.maxRows,
+      maxRows = _prop$maxRows === void 0 ? 20 : _prop$maxRows,
+      _prop$placement = prop.placement,
+      placement = _prop$placement === void 0 ? 'bottom' : _prop$placement,
+      _prop$popWidth = prop.popWidth,
+      popWidth = _prop$popWidth === void 0 ? '400px' : _prop$popWidth,
+      fieldProps = prop.fieldProps,
+      value = prop.value,
+      _prop$allowClear = prop.allowClear,
+      allowClear = _prop$allowClear === void 0 ? true : _prop$allowClear,
+      rest = _objectWithoutProperties(prop, _excluded); // 设置初始值
+
+
+  useEffect(function () {
+    if (value) {
+      setText(value);
+    } else if (name) {
+      var _formRef$current;
+
+      var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.getFieldsValue();
+      setText(formValue[name]);
+    }
+  }, []); // 显示多行输入时，赋值给多行文本框
+
+  useEffect(function () {
+    if (!visible) return;
+    var line = (text || '').split(',').join('\n');
+    setLineText(line);
+  }, [visible, text]); // 输入框值变化时，赋值给表单项
+
+  useEffect(function () {
+    var _formRef$current2, _formRef$current3;
+
+    var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getFieldsValue();
+    formValue[name] = text;
+    (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.setFieldsValue(_objectSpread({}, formValue));
+  }, [text]);
+
+  var lineInput = function lineInput(e) {
+    var line = (e.target.value || '').split('\n').filter(function (o, i) {
+      return i <= (maxRows < 1 ? 1000 : maxRows);
+    }).join('\n');
+    var txt = line.split('\n').join(',');
+    setLineText(line);
+    setText(txt);
+  };
+
+  var textInput = function textInput(e) {
+    setText(e.target.value);
+  };
+
+  var clearValue = function clearValue(e) {
+    if (!e.target.value) {
+      setText('');
+      setLineText('');
+    }
+  };
+
+  var PopoverDom = useMemo(function () {
+    return /*#__PURE__*/React.createElement(_Popover, {
+      content: /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: popWidth
+        }
+      }, /*#__PURE__*/React.createElement(_Input.TextArea, {
+        rows: rows,
+        value: lineText,
+        onInput: lineInput,
+        onKeyPress: function onKeyPress(e) {
+          if (e.key === 'Enter') e.stopPropagation();
+        }
+      })),
+      trigger: "click",
+      visible: visible,
+      onVisibleChange: setVisible
+    }, /*#__PURE__*/React.createElement(UnorderedListOutlined, {
+      onClick: function onClick(e) {
+        if (rest.disabled || (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.disabled)) return;
+        setVisible(true);
+      }
+    }));
+  }, [visible, popWidth, lineText, rest]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, rest.label && name ? /*#__PURE__*/React.createElement(ProFormText, _extends({
+    name: name
+  }, rest), /*#__PURE__*/React.createElement(_Input, _extends({
+    suffix: PopoverDom
+  }, fieldProps, {
+    onChange: clearValue,
+    onInput: textInput,
+    allowClear: allowClear,
+    ref: inputRef
+  }))) : /*#__PURE__*/React.createElement(_Input, _extends({
+    suffix: PopoverDom,
+    allowClear: allowClear
+  }, fieldProps, {
+    onChange: clearValue,
+    onInput: textInput,
+    value: text,
+    ref: inputRef
+  })));
+});
+export default InputMultiLine;

package/es/index.d.ts

@@ -3,6 +3,7 @@ import InputTable from './components/InputTable';
 import Page404 from './components/404';
 import Loading from './components/Loading';
 import IconSelector from './components/IconSelector';
+import InputMultiLine from './components/InputMultiLine';
 import BaseService from './service/BaseService';
 import request, { httpGet, httpPut, httpPost, httpDelete, getDict, fetchOptions } from './http';
 import * as utils from './utils';
@@ -14,4 +15,4 @@ import usePermission from './hooks/usePermission';
 import type { ApiResponse, TableToolbar, BaseApiType, MethodType } from './typing';
 import type { DtlLyaoutProps } from './components/DtlLayout';
 export type { ApiResponse, TableToolbar, BaseApiType, MethodType, DtlLyaoutProps };
-export { DtlLayout, InputTable, Page404, Loading, IconSelector, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };
+export { DtlLayout, InputTable, Page404, Loading, IconSelector, InputMultiLine, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };

package/es/index.js

@@ -3,6 +3,7 @@ import InputTable from './components/InputTable';
 import Page404 from './components/404';
 import Loading from './components/Loading';
 import IconSelector from './components/IconSelector';
+import InputMultiLine from './components/InputMultiLine';
 import BaseService from './service/BaseService';
 import request, { httpGet, httpPut, httpPost, httpDelete, getDict, fetchOptions } from './http';
 import * as utils from './utils';
@@ -11,4 +12,4 @@ import * as utils from './utils';
 import useSingle from './hooks/useSingle';
 import useDtl from './hooks/useDtl';
 import usePermission from './hooks/usePermission';
-export { DtlLayout, InputTable, Page404, Loading, IconSelector, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };
+export { DtlLayout, InputTable, Page404, Loading, IconSelector, InputMultiLine, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };

package/lib/components/InputMultiLine.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { InputProps } from 'antd';
+import type { ProFormItemProps } from 'ls-pro-form';
+export declare type InputMultiLineProps = ProFormItemProps<InputProps> & {
+    /**@name 表单项name, 跟 form.item 的 name一致 */
+    name: string;
+    /**@name 表单值*/
+    value?: string;
+    /**@name 弹框宽度,默认为400 */
+    popWidth?: string;
+    /**@name 弹框位置，默认为bottom */
+    placement?: string;
+    /**@name 多行文本框行数 */
+    rows?: number;
+    /** @name 最大输入行数 */
+    maxRows?: number;
+};
+declare const InputMultiLine: React.ForwardRefExoticComponent<{
+    fieldProps?: (import("../../../form/lib/interface").FieldProps & InputProps) | undefined;
+    placeholder?: string | string[] | undefined;
+    secondary?: boolean | undefined;
+    allowClear?: boolean | undefined;
+    disabled?: boolean | undefined;
+    width?: number | "sm" | "md" | "xl" | "xs" | "lg" | undefined;
+    proFieldProps?: import("../../../utils/lib").ProFieldProps | undefined;
+    footerRender?: import("../../../form/lib").LightFilterFooterRender | undefined;
+} & Omit<import("../../../form/lib/components/FormItem").ProFormItemProps, "valueType"> & import("../../../form/lib/interface").ExtendsProps & {
+    /**@name 表单项name, 跟 form.item 的 name一致 */
+    name: string;
+    /**@name 表单值*/
+    value?: string | undefined;
+    /**@name 弹框宽度,默认为400 */
+    popWidth?: string | undefined;
+    /**@name 弹框位置，默认为bottom */
+    placement?: string | undefined;
+    /**@name 多行文本框行数 */
+    rows?: number | undefined;
+    /** @name 最大输入行数 */
+    maxRows?: number | undefined;
+} & React.RefAttributes<unknown>>;
+export default InputMultiLine;

package/lib/components/InputMultiLine.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("antd/es/popover/style");
+
+var _popover = _interopRequireDefault(require("antd/es/popover"));
+
+require("antd/es/input/style");
+
+var _input = _interopRequireDefault(require("antd/es/input"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _lsProForm = require("ls-pro-form");
+
+var _icons = require("@ant-design/icons");
+
+var _excluded = ["name", "rows", "maxRows", "placement", "popWidth", "fieldProps", "value", "allowClear"];
+
+var InputMultiLine = /*#__PURE__*/_react.default.forwardRef(function (prop, ref) {
+  //@ts-ignore
+  var _useContext = (0, _react.useContext)(_lsProForm.ProFormContext),
+      formRef = _useContext.formRef;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      text = _useState2[0],
+      setText = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      lineText = _useState4[0],
+      setLineText = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      visible = _useState6[0],
+      setVisible = _useState6[1];
+
+  var inputRef = (0, _react.useRef)();
+  (0, _react.useImperativeHandle)(ref, function () {
+    return inputRef.current;
+  });
+  var name = prop.name,
+      _prop$rows = prop.rows,
+      rows = _prop$rows === void 0 ? 12 : _prop$rows,
+      _prop$maxRows = prop.maxRows,
+      maxRows = _prop$maxRows === void 0 ? 20 : _prop$maxRows,
+      _prop$placement = prop.placement,
+      placement = _prop$placement === void 0 ? 'bottom' : _prop$placement,
+      _prop$popWidth = prop.popWidth,
+      popWidth = _prop$popWidth === void 0 ? '400px' : _prop$popWidth,
+      fieldProps = prop.fieldProps,
+      value = prop.value,
+      _prop$allowClear = prop.allowClear,
+      allowClear = _prop$allowClear === void 0 ? true : _prop$allowClear,
+      rest = (0, _objectWithoutProperties2.default)(prop, _excluded); // 设置初始值
+
+  (0, _react.useEffect)(function () {
+    if (value) {
+      setText(value);
+    } else if (name) {
+      var _formRef$current;
+
+      var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.getFieldsValue();
+      setText(formValue[name]);
+    }
+  }, []); // 显示多行输入时，赋值给多行文本框
+
+  (0, _react.useEffect)(function () {
+    if (!visible) return;
+    var line = (text || '').split(',').join('\n');
+    setLineText(line);
+  }, [visible, text]); // 输入框值变化时，赋值给表单项
+
+  (0, _react.useEffect)(function () {
+    var _formRef$current2, _formRef$current3;
+
+    var formValue = formRef === null || formRef === void 0 ? void 0 : (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getFieldsValue();
+    formValue[name] = text;
+    (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.setFieldsValue((0, _objectSpread2.default)({}, formValue));
+  }, [text]);
+
+  var lineInput = function lineInput(e) {
+    var line = (e.target.value || '').split('\n').filter(function (o, i) {
+      return i <= (maxRows < 1 ? 1000 : maxRows);
+    }).join('\n');
+    var txt = line.split('\n').join(',');
+    setLineText(line);
+    setText(txt);
+  };
+
+  var textInput = function textInput(e) {
+    setText(e.target.value);
+  };
+
+  var clearValue = function clearValue(e) {
+    if (!e.target.value) {
+      setText('');
+      setLineText('');
+    }
+  };
+
+  var PopoverDom = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_popover.default, {
+      content: /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: popWidth
+        }
+      }, /*#__PURE__*/_react.default.createElement(_input.default.TextArea, {
+        rows: rows,
+        value: lineText,
+        onInput: lineInput,
+        onKeyPress: function onKeyPress(e) {
+          if (e.key === 'Enter') e.stopPropagation();
+        }
+      })),
+      trigger: "click",
+      visible: visible,
+      onVisibleChange: setVisible
+    }, /*#__PURE__*/_react.default.createElement(_icons.UnorderedListOutlined, {
+      onClick: function onClick(e) {
+        if (rest.disabled || (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.disabled)) return;
+        setVisible(true);
+      }
+    }));
+  }, [visible, popWidth, lineText, rest]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, rest.label && name ? /*#__PURE__*/_react.default.createElement(_lsProForm.ProFormText, (0, _extends2.default)({
+    name: name
+  }, rest), /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
+    suffix: PopoverDom
+  }, fieldProps, {
+    onChange: clearValue,
+    onInput: textInput,
+    allowClear: allowClear,
+    ref: inputRef
+  }))) : /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({
+    suffix: PopoverDom,
+    allowClear: allowClear
+  }, fieldProps, {
+    onChange: clearValue,
+    onInput: textInput,
+    value: text,
+    ref: inputRef
+  })));
+});
+
+var _default = InputMultiLine;
+exports.default = _default;

package/lib/index.d.ts

@@ -3,6 +3,7 @@ import InputTable from './components/InputTable';
 import Page404 from './components/404';
 import Loading from './components/Loading';
 import IconSelector from './components/IconSelector';
+import InputMultiLine from './components/InputMultiLine';
 import BaseService from './service/BaseService';
 import request, { httpGet, httpPut, httpPost, httpDelete, getDict, fetchOptions } from './http';
 import * as utils from './utils';
@@ -14,4 +15,4 @@ import usePermission from './hooks/usePermission';
 import type { ApiResponse, TableToolbar, BaseApiType, MethodType } from './typing';
 import type { DtlLyaoutProps } from './components/DtlLayout';
 export type { ApiResponse, TableToolbar, BaseApiType, MethodType, DtlLyaoutProps };
-export { DtlLayout, InputTable, Page404, Loading, IconSelector, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };
+export { DtlLayout, InputTable, Page404, Loading, IconSelector, InputMultiLine, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };

package/lib/index.js

@@ -25,6 +25,12 @@ Object.defineProperty(exports, "IconSelector", {
     return _IconSelector.default;
   }
 });
+Object.defineProperty(exports, "InputMultiLine", {
+  enumerable: true,
+  get: function get() {
+    return _InputMultiLine.default;
+  }
+});
 Object.defineProperty(exports, "InputTable", {
   enumerable: true,
   get: function get() {
@@ -115,6 +121,8 @@ var _Loading = _interopRequireDefault(require("./components/Loading"));
 
 var _IconSelector = _interopRequireDefault(require("./components/IconSelector"));
 
+var _InputMultiLine = _interopRequireDefault(require("./components/InputMultiLine"));
+
 var _BaseService = _interopRequireDefault(require("./service/BaseService"));
 
 var _http = _interopRequireWildcard(require("./http"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ls-pro-common",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "description": "ls-pro-common",
   "keywords": [
     "antd",  
@@ -28,7 +28,7 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
-    "ls-pro-table": "2.62.27",
+    "ls-pro-table": "2.62.28",
     "ls-pro-form": "1.52.25",
     "@babel/runtime": "^7.16.3",
     "classnames": "^2.2.6",