@lobehub/ui 1.125.2 → 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 (6) hide show
  1. package/es/MessageInput/index.d.ts +28 -4
  2. package/es/MessageInput/index.js +32 -24
  3. package/es/MessageModal/index.js +55 -38
  4. package/package.json +3 -3
  5. package/es/MessageInput/MessageInputFooter.d.ts +0 -15
  6. package/es/MessageInput/MessageInputFooter.js +0 -40
package/es/MessageInput/index.d.ts CHANGED
@@ -2,17 +2,41 @@ 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, DivProps {
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
- setTemporarySystemRole?: (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
41
  }
18
42
  declare const MessageInput: import("react").NamedExoticComponent<MessageInputProps>;
package/es/MessageInput/index.js CHANGED
@@ -1,16 +1,16 @@
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", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height", "style", "editButtonSize", "showFooter", "classNames", "setTemporarySystemRole"];
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,
@@ -28,18 +28,12 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
28
28
  style = _ref.style,
29
29
  _ref$editButtonSize = _ref.editButtonSize,
30
30
  editButtonSize = _ref$editButtonSize === void 0 ? 'middle' : _ref$editButtonSize,
31
- _ref$showFooter = _ref.showFooter,
32
- showFooter = _ref$showFooter === void 0 ? true : _ref$showFooter,
33
31
  classNames = _ref.classNames,
34
- setTemporarySystemRole = _ref.setTemporarySystemRole,
35
32
  rest = _objectWithoutProperties(_ref, _excluded);
36
- var _useMergeState = useMergeState(defaultValue || '', {
37
- defaultValue: defaultValue,
38
- onChange: setTemporarySystemRole
39
- }),
40
- _useMergeState2 = _slicedToArray(_useMergeState, 2),
41
- role = _useMergeState2[0],
42
- setRole = _useMergeState2[1];
33
+ var _useState = useState(defaultValue || ''),
34
+ _useState2 = _slicedToArray(_useState, 2),
35
+ temporaryValue = _useState2[0],
36
+ setValue = _useState2[1];
43
37
  var _useStyles = useStyles(),
44
38
  cx = _useStyles.cx,
45
39
  styles = _useStyles.styles;
@@ -56,10 +50,10 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
56
50
  className: cx(styles, textareaClassname),
57
51
  classNames: classNames,
58
52
  onBlur: function onBlur(e) {
59
- return setRole(e.target.value);
53
+ return setValue(e.target.value);
60
54
  },
61
55
  onChange: function onChange(e) {
62
- return setRole(e.target.value);
56
+ return setValue(e.target.value);
63
57
  },
64
58
  placeholder: placeholder,
65
59
  resize: false,
@@ -68,14 +62,28 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
68
62
  minHeight: '100%'
69
63
  }, textareaStyle),
70
64
  type: type,
71
- value: role
72
- }), showFooter && /*#__PURE__*/_jsx(MessageInputFooter, {
73
- editButtonSize: editButtonSize,
74
- onCancel: onCancel,
75
- onConfirm: onConfirm,
76
- renderButtons: renderButtons,
77
- temporarySystemRole: role,
78
- text: text
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
+ })
79
87
  })]
80
88
  }));
81
89
  });
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
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 {
@@ -35,10 +37,8 @@ var MessageModal = /*#__PURE__*/memo(function (_ref2) {
35
37
  mobile = _useResponsive.mobile;
36
38
  var _useStyles = useStyles(),
37
39
  styles = _useStyles.styles;
38
- var _useState = useState(value),
39
- _useState2 = _slicedToArray(_useState, 2),
40
- role = _useState2[0],
41
- setRole = _useState2[1];
40
+ var _useTextStyles = useTextStyles(),
41
+ textStyles = _useTextStyles.styles;
42
42
  var _useControlledState = useControlledState(false, {
43
43
  onChange: onEditingChange,
44
44
  value: editing
@@ -51,54 +51,71 @@ var MessageModal = /*#__PURE__*/memo(function (_ref2) {
51
51
  value: open
52
52
  }),
53
53
  _useControlledState4 = _slicedToArray(_useControlledState3, 2),
54
- expand = _useControlledState4[0],
55
- setExpand = _useControlledState4[1];
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];
56
60
  var isAutoSize = height === 'auto';
57
61
  var markdownStyle = {
58
62
  height: isAutoSize ? 'unset' : height,
59
63
  overflowX: 'hidden',
60
64
  overflowY: 'auto'
61
65
  };
62
- return /*#__PURE__*/_jsx(Modal, {
63
- allowFullscreen: true,
64
- cancelText: (text === null || text === void 0 ? void 0 : text.cancel) || 'Cancel',
65
- footer: isEdit ? /*#__PURE__*/_jsx(MessageInputFooter, {
66
- onCancel: function onCancel() {
67
- return setTyping(false);
66
+ var modalFooter = isEdit ? /*#__PURE__*/_jsxs(Flexbox, {
67
+ direction: 'horizontal-reverse',
68
+ gap: 8,
69
+ children: [/*#__PURE__*/_jsx(Button, {
70
+ onClick: function onClick() {
71
+ setTyping(false);
72
+ onChange === null || onChange === void 0 || onChange(temporaryValue);
73
+ setValue(value);
68
74
  },
69
- onConfirm: function onConfirm(text) {
75
+ type: "primary",
76
+ children: (text === null || text === void 0 ? void 0 : text.confirm) || 'Confirm'
77
+ }), /*#__PURE__*/_jsx(Button, {
78
+ onClick: function onClick() {
70
79
  setTyping(false);
71
- onChange === null || onChange === void 0 || onChange(text);
80
+ setValue(value);
72
81
  },
73
- temporarySystemRole: role,
74
- text: {
75
- cancel: text === null || text === void 0 ? void 0 : text.cancel,
76
- confirm: text === null || text === void 0 ? void 0 : text.confirm
77
- }
78
- }) : 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,
79
90
  okText: (text === null || text === void 0 ? void 0 : text.edit) || 'Edit',
80
91
  onCancel: function onCancel() {
81
- return setExpand(false);
92
+ setShowModal(false);
93
+ setTyping(false);
94
+ setValue(value);
82
95
  },
83
96
  onOk: function onOk() {
84
97
  return setTyping(true);
85
98
  },
86
- open: expand,
99
+ open: showModal,
87
100
  title: text === null || text === void 0 ? void 0 : text.title,
88
- children: isEdit ? /*#__PURE__*/_jsx(MessageInput, {
89
- defaultValue: role,
90
- height: height,
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
+ },
91
110
  placeholder: placeholder,
92
- setTemporarySystemRole: setRole,
93
- showFooter: false,
94
- style: mobile ? {
95
- height: '100%'
96
- } : {},
97
- textareaStyle: mobile ? {
98
- flex: 1,
99
- minHeight: 'unset'
100
- } : {},
101
- 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
102
119
  }) : /*#__PURE__*/_jsxs(_Fragment, {
103
120
  children: [extra, /*#__PURE__*/_jsx(Markdown, {
104
121
  className: styles.markdown,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "1.125.2",
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",
@@ -28,9 +28,9 @@
28
28
  ],
29
29
  "scripts": {
30
30
  "build": "father build",
31
+ "build:watch": "father dev",
31
32
  "ci": "npm run lint && npm run type-check",
32
33
  "clean": "rm -r es lib dist coverage .dumi/tmp .eslintcache node_modules/.cache",
33
- "dev": "father dev",
34
34
  "docs:build": "dumi build",
35
35
  "docs:build-analyze": "ANALYZE=1 dumi build",
36
36
  "docs:dev": "dumi dev",
@@ -80,7 +80,7 @@
80
80
  "@lobehub/emojilib": "latest",
81
81
  "@react-spring/web": "^9",
82
82
  "@splinetool/react-spline": "^2",
83
- "@splinetool/runtime": "^1",
83
+ "@splinetool/runtime": "^0.9",
84
84
  "ahooks": "^3",
85
85
  "chroma-js": "^2",
86
86
  "copy-to-clipboard": "^3",
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
- temporarySystemRole?: string;
9
- text?: {
10
- cancel?: string;
11
- confirm?: string;
12
- };
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
- temporarySystemRole = _ref.temporarySystemRole,
15
- editButtonSize = _ref.editButtonSize,
16
- onCancel = _ref.onCancel;
17
- return /*#__PURE__*/_jsx(Flexbox, {
18
- direction: 'horizontal-reverse',
19
- gap: 8,
20
- children: renderButtons && temporarySystemRole ? renderButtons(temporarySystemRole).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(temporarySystemRole || '');
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;