@lobehub/ui 1.125.3 → 1.125.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/es/MessageInput/index.d.ts +28 -5
  2. package/es/MessageInput/index.js +32 -26
  3. package/es/MessageModal/index.d.ts +0 -1
  4. package/es/MessageModal/index.js +62 -50
  5. package/package.json +1 -1
  6. package/es/MessageInput/MessageInputFooter.d.ts +0 -15
  7. package/es/MessageInput/MessageInputFooter.js +0 -40
package/es/MessageInput/index.d.ts CHANGED
@@ -2,19 +2,42 @@ import { ButtonProps } from 'antd';
2
2
  import { type CSSProperties } from 'react';
3
3
  import { type TextAreaProps } from "../Input";
4
4
  import { DivProps } from "../types";
5
- import { type MessageInputFooterProps } from './MessageInputFooter';
6
- export interface MessageInputProps extends MessageInputFooterProps, Omit<DivProps, 'onChange'> {
5
+ export interface MessageInputProps extends DivProps {
6
+ /**
7
+ * @description Additional className to apply to the component.
8
+ */
7
9
  className?: string;
8
10
  classNames?: TextAreaProps['classNames'];
11
+ /**
12
+ * @description The default value of the input box.
13
+ */
9
14
  defaultValue?: string;
10
15
  editButtonSize?: ButtonProps['size'];
11
16
  height?: number | 'auto' | string;
12
- onChange?: (value: string) => void;
13
- showFooter?: boolean;
17
+ /**
18
+ * @description Callback function triggered when user clicks on the cancel button.
19
+ */
20
+ onCancel?: () => void;
21
+ /**
22
+ * @description Callback function triggered when user clicks on the confirm button.
23
+ * @param text - The text input by the user.
24
+ */
25
+ onConfirm?: (text: string) => void;
26
+ /**
27
+ * @description Custom rendering of the bottom buttons.
28
+ * @param text - The text input by the user.
29
+ */
30
+ renderButtons?: (text: string) => ButtonProps[];
31
+ text?: {
32
+ cancel?: string;
33
+ confirm?: string;
34
+ };
14
35
  textareaClassname?: string;
15
36
  textareaStyle?: CSSProperties;
37
+ /**
38
+ * @description The type of the input box.
39
+ */
16
40
  type?: TextAreaProps['type'];
17
- value?: string;
18
41
  }
19
42
  declare const MessageInput: import("react").NamedExoticComponent<MessageInputProps>;
20
43
  export default MessageInput;
package/es/MessageInput/index.js CHANGED
@@ -1,23 +1,22 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
4
- var _excluded = ["text", "type", "onCancel", "value", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height", "style", "editButtonSize", "showFooter", "classNames", "onChange"];
4
+ var _excluded = ["text", "type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height", "style", "editButtonSize", "classNames"];
5
5
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7
- import { memo } from 'react';
7
+ import { Button } from 'antd';
8
+ import { memo, useState } from 'react';
8
9
  import { Flexbox } from 'react-layout-kit';
9
- import useMergeState from 'use-merge-value';
10
10
  import { TextArea } from "../Input";
11
- import MessageInputFooter from "./MessageInputFooter";
12
11
  import { useStyles } from "./style";
13
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { Fragment as _Fragment } from "react/jsx-runtime";
14
14
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
15
  var MessageInput = /*#__PURE__*/memo(function (_ref) {
16
16
  var text = _ref.text,
17
17
  _ref$type = _ref.type,
18
18
  type = _ref$type === void 0 ? 'pure' : _ref$type,
19
19
  onCancel = _ref.onCancel,
20
- value = _ref.value,
21
20
  defaultValue = _ref.defaultValue,
22
21
  onConfirm = _ref.onConfirm,
23
22
  renderButtons = _ref.renderButtons,
@@ -29,19 +28,12 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
29
28
  style = _ref.style,
30
29
  _ref$editButtonSize = _ref.editButtonSize,
31
30
  editButtonSize = _ref$editButtonSize === void 0 ? 'middle' : _ref$editButtonSize,
32
- _ref$showFooter = _ref.showFooter,
33
- showFooter = _ref$showFooter === void 0 ? true : _ref$showFooter,
34
31
  classNames = _ref.classNames,
35
- onChange = _ref.onChange,
36
32
  rest = _objectWithoutProperties(_ref, _excluded);
37
- var _useMergeState = useMergeState('', {
38
- defaultValue: defaultValue,
39
- onChange: onChange,
40
- value: value
41
- }),
42
- _useMergeState2 = _slicedToArray(_useMergeState, 2),
43
- message = _useMergeState2[0],
44
- setMessage = _useMergeState2[1];
33
+ var _useState = useState(defaultValue || ''),
34
+ _useState2 = _slicedToArray(_useState, 2),
35
+ temporaryValue = _useState2[0],
36
+ setValue = _useState2[1];
45
37
  var _useStyles = useStyles(),
46
38
  cx = _useStyles.cx,
47
39
  styles = _useStyles.styles;
@@ -58,10 +50,10 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
58
50
  className: cx(styles, textareaClassname),
59
51
  classNames: classNames,
60
52
  onBlur: function onBlur(e) {
61
- return setMessage(e.target.value);
53
+ return setValue(e.target.value);
62
54
  },
63
55
  onChange: function onChange(e) {
64
- return setMessage(e.target.value);
56
+ return setValue(e.target.value);
65
57
  },
66
58
  placeholder: placeholder,
67
59
  resize: false,
@@ -70,14 +62,28 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
70
62
  minHeight: '100%'
71
63
  }, textareaStyle),
72
64
  type: type,
73
- value: message
74
- }), showFooter && /*#__PURE__*/_jsx(MessageInputFooter, {
75
- editButtonSize: editButtonSize,
76
- onCancel: onCancel,
77
- onConfirm: onConfirm,
78
- renderButtons: renderButtons,
79
- text: text,
80
- value: message
65
+ value: temporaryValue
66
+ }), /*#__PURE__*/_jsx(Flexbox, {
67
+ direction: 'horizontal-reverse',
68
+ gap: 8,
69
+ children: renderButtons ? renderButtons(temporaryValue).map(function (buttonProps, index) {
70
+ return /*#__PURE__*/_jsx(Button, _objectSpread({
71
+ size: "small"
72
+ }, buttonProps), index);
73
+ }) : /*#__PURE__*/_jsxs(_Fragment, {
74
+ children: [/*#__PURE__*/_jsx(Button, {
75
+ onClick: function onClick() {
76
+ onConfirm === null || onConfirm === void 0 || onConfirm(temporaryValue);
77
+ },
78
+ size: editButtonSize,
79
+ type: "primary",
80
+ children: (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm'
81
+ }), /*#__PURE__*/_jsx(Button, {
82
+ onClick: onCancel,
83
+ size: editButtonSize,
84
+ children: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel'
85
+ })]
86
+ })
81
87
  })]
82
88
  }));
83
89
  });
package/es/MessageModal/index.d.ts CHANGED
@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
2
2
  import { type MessageInputProps } from "../MessageInput";
3
3
  import { type ModalProps } from "../Modal";
4
4
  export interface MessageModalProps extends Pick<ModalProps, 'open' | 'footer'> {
5
- defaultValue?: string;
6
5
  /**
7
6
  * @description Whether the message is being edited or not
8
7
  * @default false
package/es/MessageModal/index.js CHANGED
@@ -2,16 +2,18 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
3
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
+ import { Button } from 'antd';
5
6
  import { createStyles, useResponsive } from 'antd-style';
6
- import { memo } from 'react';
7
+ import { memo, useState } from 'react';
8
+ import { Flexbox } from 'react-layout-kit';
7
9
  import useControlledState from 'use-merge-value';
10
+ import { TextArea } from "../Input";
8
11
  import Markdown from "../Markdown";
9
- import MessageInput from "../MessageInput";
10
- import MessageInputFooter from "../MessageInput/MessageInputFooter";
12
+ import { useStyles as useTextStyles } from "../MessageInput/style";
11
13
  import Modal from "../Modal";
12
14
  import { jsx as _jsx } from "react/jsx-runtime";
13
- import { Fragment as _Fragment } from "react/jsx-runtime";
14
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
+ import { Fragment as _Fragment } from "react/jsx-runtime";
15
17
  var useStyles = createStyles(function (_ref) {
16
18
  var stylish = _ref.stylish;
17
19
  return {
@@ -27,7 +29,6 @@ var MessageModal = /*#__PURE__*/memo(function (_ref2) {
27
29
  onEditingChange = _ref2.onEditingChange,
28
30
  placeholder = _ref2.placeholder,
29
31
  value = _ref2.value,
30
- defaultValue = _ref2.defaultValue,
31
32
  onChange = _ref2.onChange,
32
33
  text = _ref2.text,
33
34
  footer = _ref2.footer,
@@ -36,74 +37,85 @@ var MessageModal = /*#__PURE__*/memo(function (_ref2) {
36
37
  mobile = _useResponsive.mobile;
37
38
  var _useStyles = useStyles(),
38
39
  styles = _useStyles.styles;
39
- var _useControlledState = useControlledState('', {
40
- defaultValue: defaultValue,
41
- onChange: onChange,
42
- value: value
43
- }),
44
- _useControlledState2 = _slicedToArray(_useControlledState, 2),
45
- message = _useControlledState2[0],
46
- setMessage = _useControlledState2[1];
47
- var _useControlledState3 = useControlledState(false, {
40
+ var _useTextStyles = useTextStyles(),
41
+ textStyles = _useTextStyles.styles;
42
+ var _useControlledState = useControlledState(false, {
48
43
  onChange: onEditingChange,
49
44
  value: editing
50
45
  }),
51
- _useControlledState4 = _slicedToArray(_useControlledState3, 2),
52
- isEdit = _useControlledState4[0],
53
- setTyping = _useControlledState4[1];
54
- var _useControlledState5 = useControlledState(false, {
46
+ _useControlledState2 = _slicedToArray(_useControlledState, 2),
47
+ isEdit = _useControlledState2[0],
48
+ setTyping = _useControlledState2[1];
49
+ var _useControlledState3 = useControlledState(false, {
55
50
  onChange: onOpenChange,
56
51
  value: open
57
52
  }),
58
- _useControlledState6 = _slicedToArray(_useControlledState5, 2),
59
- expand = _useControlledState6[0],
60
- setExpand = _useControlledState6[1];
53
+ _useControlledState4 = _slicedToArray(_useControlledState3, 2),
54
+ showModal = _useControlledState4[0],
55
+ setShowModal = _useControlledState4[1];
56
+ var _useState = useState(value),
57
+ _useState2 = _slicedToArray(_useState, 2),
58
+ temporaryValue = _useState2[0],
59
+ setValue = _useState2[1];
61
60
  var isAutoSize = height === 'auto';
62
61
  var markdownStyle = {
63
62
  height: isAutoSize ? 'unset' : height,
64
63
  overflowX: 'hidden',
65
64
  overflowY: 'auto'
66
65
  };
67
- return /*#__PURE__*/_jsx(Modal, {
68
- allowFullscreen: true,
69
- cancelText: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel',
70
- footer: isEdit ? /*#__PURE__*/_jsx(MessageInputFooter, {
71
- onCancel: function onCancel() {
72
- return setTyping(false);
73
- },
74
- onConfirm: function onConfirm(text) {
66
+ var modalFooter = isEdit ? /*#__PURE__*/_jsxs(Flexbox, {
67
+ direction: 'horizontal-reverse',
68
+ gap: 8,
69
+ children: [/*#__PURE__*/_jsx(Button, {
70
+ onClick: function onClick() {
75
71
  setTyping(false);
76
- onChange === null || onChange === void 0 || onChange(text);
72
+ onChange === null || onChange === void 0 || onChange(temporaryValue);
73
+ setValue(value);
77
74
  },
78
- text: {
79
- cancel: text === null || text === void 0 ? void 0 : text.cancel,
80
- confirm: text === null || text === void 0 ? void 0 : text.confirm
75
+ type: "primary",
76
+ children: (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm'
77
+ }), /*#__PURE__*/_jsx(Button, {
78
+ onClick: function onClick() {
79
+ setTyping(false);
80
+ setValue(value);
81
81
  },
82
- value: message
83
- }) : footer,
82
+ children: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel'
83
+ })]
84
+ }) : footer;
85
+ return /*#__PURE__*/_jsx(Modal, {
86
+ allowFullscreen: true,
87
+ cancelText: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel',
88
+ destroyOnClose: true,
89
+ footer: modalFooter,
84
90
  okText: (text === null || text === void 0 ? void 0 : text.edit) || 'Edit',
85
91
  onCancel: function onCancel() {
86
- return setExpand(false);
92
+ setShowModal(false);
93
+ setTyping(false);
94
+ setValue(value);
87
95
  },
88
96
  onOk: function onOk() {
89
97
  return setTyping(true);
90
98
  },
91
- open: expand,
99
+ open: showModal,
92
100
  title: text === null || text === void 0 ? void 0 : text.title,
93
- children: isEdit ? /*#__PURE__*/_jsx(MessageInput, {
94
- defaultValue: message,
95
- height: height,
96
- onChange: setMessage,
101
+ children: isEdit ? /*#__PURE__*/_jsx(TextArea, {
102
+ autoSize: isAutoSize,
103
+ className: textStyles,
104
+ onBlur: function onBlur(e) {
105
+ return setValue(e.target.value);
106
+ },
107
+ onChange: function onChange(e) {
108
+ return setValue(e.target.value);
109
+ },
97
110
  placeholder: placeholder,
98
- showFooter: false,
99
- style: mobile ? {
100
- height: '100%'
101
- } : {},
102
- textareaStyle: mobile ? {
103
- flex: 1,
104
- minHeight: 'unset'
105
- } : {},
106
- type: mobile ? 'pure' : 'block'
111
+ resize: false,
112
+ style: {
113
+ flex: mobile ? 1 : undefined,
114
+ height: isAutoSize ? 'unset' : height,
115
+ minHeight: mobile ? 'unset' : '100%'
116
+ },
117
+ type: mobile ? 'pure' : 'block',
118
+ value: temporaryValue
107
119
  }) : /*#__PURE__*/_jsxs(_Fragment, {
108
120
  children: [extra, /*#__PURE__*/_jsx(Markdown, {
109
121
  className: styles.markdown,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "1.125.3",
3
+ "version": "1.125.4",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",
package/es/MessageInput/MessageInputFooter.d.ts DELETED
@@ -1,15 +0,0 @@
1
- /// <reference types="react" />
2
- import { ButtonProps } from 'antd';
3
- export interface MessageInputFooterProps {
4
- editButtonSize?: ButtonProps['size'];
5
- onCancel?: () => void;
6
- onConfirm?: (text: string) => void;
7
- renderButtons?: (text: string) => ButtonProps[];
8
- text?: {
9
- cancel?: string;
10
- confirm?: string;
11
- };
12
- value?: string;
13
- }
14
- declare const MessageInputFooter: import("react").NamedExoticComponent<MessageInputFooterProps>;
15
- export default MessageInputFooter;
package/es/MessageInput/MessageInputFooter.js DELETED
@@ -1,40 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
- import { Button } from 'antd';
5
- import { memo } from 'react';
6
- import { Flexbox } from 'react-layout-kit';
7
- import { jsx as _jsx } from "react/jsx-runtime";
8
- import { Fragment as _Fragment } from "react/jsx-runtime";
9
- import { jsxs as _jsxs } from "react/jsx-runtime";
10
- var MessageInputFooter = /*#__PURE__*/memo(function (_ref) {
11
- var text = _ref.text,
12
- renderButtons = _ref.renderButtons,
13
- onConfirm = _ref.onConfirm,
14
- value = _ref.value,
15
- editButtonSize = _ref.editButtonSize,
16
- onCancel = _ref.onCancel;
17
- return /*#__PURE__*/_jsx(Flexbox, {
18
- direction: 'horizontal-reverse',
19
- gap: 8,
20
- children: renderButtons && value ? renderButtons(value).map(function (buttonProps, index) {
21
- return /*#__PURE__*/_jsx(Button, _objectSpread({
22
- size: "small"
23
- }, buttonProps), index);
24
- }) : /*#__PURE__*/_jsxs(_Fragment, {
25
- children: [/*#__PURE__*/_jsx(Button, {
26
- onClick: function onClick() {
27
- onConfirm === null || onConfirm === void 0 || onConfirm(value || '');
28
- },
29
- size: editButtonSize,
30
- type: "primary",
31
- children: (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm'
32
- }), /*#__PURE__*/_jsx(Button, {
33
- onClick: onCancel,
34
- size: editButtonSize,
35
- children: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel'
36
- })]
37
- })
38
- });
39
- });
40
- export default MessageInputFooter;