@yuntijs/ui 1.0.0-beta.83 → 1.0.0-beta.85
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.
- package/es/ChatItem/index.js +5 -3
- package/es/ChatItem/style.d.ts +1 -0
- package/es/ChatItem/style.js +3 -2
- package/es/ChatItem/type.d.ts +4 -0
- package/es/Mentions/index.js +5 -2
- package/es/Mentions/plugins/mention-node/replacement.js +1 -0
- package/es/Mentions/plugins/mention-node/utils.js +1 -1
- package/es/Mentions/plugins/mention-picker/hooks.js +27 -8
- package/es/Mentions/plugins/mention-picker/index.js +2 -1
- package/es/Mentions/plugins/mention-picker/menu-item.d.ts +1 -0
- package/es/Mentions/plugins/mention-picker/menu-item.js +4 -2
- package/es/Mentions/plugins/mention-picker/utils.d.ts +3 -1
- package/es/Mentions/plugins/mention-picker/utils.js +9 -3
- package/es/MonacoEditor/base/style.js +4 -4
- package/package.json +1 -1
- package/umd/index.min.js +1 -1
- package/umd/index.min.js.map +1 -1
package/es/ChatItem/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
|
-
var _excluded = ["avatarAddon", "onAvatarClick", "avatarProps", "actions", "className", "primary", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage", "text", "errorMessage", "onDoubleClick", "fontSize", "markdownProps", "markdownClassname"];
|
|
5
|
+
var _excluded = ["avatarAddon", "onAvatarClick", "avatarProps", "actions", "className", "primary", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage", "text", "errorMessage", "onDoubleClick", "fontSize", "markdownProps", "markdownClassname", "isLatest"];
|
|
6
6
|
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; }
|
|
7
7
|
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; }
|
|
8
8
|
import Actions from '@lobehub/ui/es/chat/ChatItem/components/Actions';
|
|
@@ -10,11 +10,11 @@ import Avatar from '@lobehub/ui/es/chat/ChatItem/components/Avatar';
|
|
|
10
10
|
import BorderSpacing from '@lobehub/ui/es/chat/ChatItem/components/BorderSpacing';
|
|
11
11
|
import ErrorContent from '@lobehub/ui/es/chat/ChatItem/components/ErrorContent';
|
|
12
12
|
import Title from '@lobehub/ui/es/chat/ChatItem/components/Title';
|
|
13
|
-
import { useStyles } from '@lobehub/ui/es/chat/ChatItem/style';
|
|
14
13
|
import { useResponsive } from 'antd-style';
|
|
15
14
|
import { memo } from 'react';
|
|
16
15
|
import { Flexbox } from 'react-layout-kit';
|
|
17
16
|
import MessageContent from "./components/MessageContent";
|
|
17
|
+
import { useStyles } from "./style";
|
|
18
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
19
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
20
|
var MOBILE_AVATAR_SIZE = 32;
|
|
@@ -46,6 +46,7 @@ export var ChatItem = /*#__PURE__*/memo(function (_ref) {
|
|
|
46
46
|
fontSize = _ref.fontSize,
|
|
47
47
|
markdownProps = _ref.markdownProps,
|
|
48
48
|
markdownClassname = _ref.markdownClassname,
|
|
49
|
+
isLatest = _ref.isLatest,
|
|
49
50
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
50
51
|
var _useResponsive = useResponsive(),
|
|
51
52
|
mobile = _useResponsive.mobile;
|
|
@@ -56,7 +57,8 @@ export var ChatItem = /*#__PURE__*/memo(function (_ref) {
|
|
|
56
57
|
showTitle: showTitle,
|
|
57
58
|
time: time,
|
|
58
59
|
title: avatar.title,
|
|
59
|
-
type: type
|
|
60
|
+
type: type,
|
|
61
|
+
isLatest: isLatest
|
|
60
62
|
}),
|
|
61
63
|
cx = _useStyles.cx,
|
|
62
64
|
styles = _useStyles.styles;
|
package/es/ChatItem/style.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export declare const useStyles: (props?: {
|
|
|
7
7
|
time?: number | undefined;
|
|
8
8
|
title?: string | undefined;
|
|
9
9
|
type?: "block" | "pure" | undefined;
|
|
10
|
+
isLatest?: boolean | undefined;
|
|
10
11
|
} | undefined) => import("antd-style").ReturnStyles<{
|
|
11
12
|
actions: string;
|
|
12
13
|
avatarContainer: import("antd-style").SerializedStyles;
|
package/es/ChatItem/style.js
CHANGED
|
@@ -14,7 +14,8 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
14
14
|
primary = _ref2.primary,
|
|
15
15
|
avatarSize = _ref2.avatarSize,
|
|
16
16
|
editing = _ref2.editing,
|
|
17
|
-
time = _ref2.time
|
|
17
|
+
time = _ref2.time,
|
|
18
|
+
isLatest = _ref2.isLatest;
|
|
18
19
|
var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding-block: 8px;\n padding-inline: 12px;\n\n background-color: ", ";\n border-radius: ", "px;\n\n transition: background-color 100ms ", ";\n "])), primary ? isDarkMode ? token.colorFill : token.colorBgElevated : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
|
|
19
20
|
var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-block-start: ", ";\n "])), title ? 0 : '6px');
|
|
20
21
|
var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-block-end: -16px;\n transition: background-color 100ms ", ";\n "])), token.motionEaseOut);
|
|
@@ -24,7 +25,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
24
25
|
actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n flex: none;\n align-self: ", ";\n justify-content: ", ";\n "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n pointer-events: none !important;\n opacity: 0 !important;\n "])))),
|
|
25
26
|
avatarContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n position: relative;\n flex: none;\n width: ", "px;\n height: ", "px;\n "])), avatarSize, avatarSize),
|
|
26
27
|
avatarGroupContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: ", "px;\n "])), avatarSize),
|
|
27
|
-
container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n max-width: 100vw;\n padding: 16px;\n\n time {\n display: inline-block;\n white-space: nowrap;\n }\n\n div[role='menubar'] {\n display: flex;\n }\n\n time,\n div[role='menubar'] {\n pointer-events:
|
|
28
|
+
container: cx(type === 'pure' && pureContainerStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n max-width: 100vw;\n padding: 16px;\n\n time {\n display: inline-block;\n white-space: nowrap;\n }\n\n div[role='menubar'] {\n display: flex;\n }\n\n time,\n div[role='menubar'] {\n pointer-events: ", ";\n opacity: ", ";\n transition: opacity 200ms ", ";\n }\n\n &:hover {\n time,\n div[role='menubar'] {\n pointer-events: unset;\n opacity: 1;\n }\n }\n\n ", " {\n padding-block: ", ";\n padding-inline: 8px;\n }\n "])), isLatest ? 'unset' : 'none', isLatest ? 1 : 0, token.motionEaseOut, responsive.mobile, type === 'pure' ? '12px' : '6px')),
|
|
28
29
|
editingContainer: cx(editingStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n padding-block: 8px 12px;\n padding-inline: 12px;\n border: 1px solid ", ";\n\n &:active,\n &:hover {\n border-color: ", ";\n }\n "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: ", "px;\n "])), token.colorFillQuaternary, token.borderRadius)),
|
|
29
30
|
editingInput: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n width: 100%;\n "]))),
|
|
30
31
|
errorContainer: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n position: relative;\n overflow: hidden;\n width: 100%;\n "]))),
|
package/es/ChatItem/type.d.ts
CHANGED
package/es/Mentions/index.js
CHANGED
|
@@ -83,11 +83,14 @@ export var Mentions = function Mentions(_ref) {
|
|
|
83
83
|
// }, [value])
|
|
84
84
|
|
|
85
85
|
var optionsMap = useMemo(function () {
|
|
86
|
-
var buildMap = function buildMap(_options) {
|
|
86
|
+
var buildMap = function buildMap(_options, parentIcon) {
|
|
87
87
|
return _options.reduce(function (acc, option) {
|
|
88
88
|
acc[option.value] = option;
|
|
89
|
+
if (!acc[option.value].icon) {
|
|
90
|
+
acc[option.value].icon = parentIcon;
|
|
91
|
+
}
|
|
89
92
|
if (option.children && option.children.length > 0) {
|
|
90
|
-
var childrenMap = buildMap(option.children);
|
|
93
|
+
var childrenMap = buildMap(option.children, option.icon);
|
|
91
94
|
Object.assign(acc, childrenMap);
|
|
92
95
|
}
|
|
93
96
|
return acc;
|
|
@@ -31,6 +31,7 @@ export var MentionNodePluginReplacement = /*#__PURE__*/memo(function (_ref) {
|
|
|
31
31
|
};
|
|
32
32
|
}, []);
|
|
33
33
|
var transformListener = useCallback(function (textNode) {
|
|
34
|
+
MENTION_REGEX.lastIndex = 0;
|
|
34
35
|
return decoratorTransform(textNode, getMatch, createMentionNode);
|
|
35
36
|
}, [createMentionNode, getMatch]);
|
|
36
37
|
useEffect(function () {
|
|
@@ -7,4 +7,4 @@ export var CLEAR_HIDE_MENU_TIMEOUT = createCommand('CLEAR_HIDE_MENU_TIMEOUT');
|
|
|
7
7
|
// export const MENTION_REGEX = /{{(.+?)}}/g;
|
|
8
8
|
// {{plugin-m67m66l8-794.json."id"}}
|
|
9
9
|
// {{plugin-m67m66l8-794.json."tags"[0]."id"}}
|
|
10
|
-
export var MENTION_REGEX = /{{([\w-]{1,50}(\.
|
|
10
|
+
export var MENTION_REGEX = /{{([\w-]{1,50}(\."?[_a-z][\w"[\]]*){1,10})}}/gi;
|
|
@@ -4,13 +4,31 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
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
5
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
6
6
|
import { escapeRegExp } from 'lodash-es';
|
|
7
|
-
import { useMemo } from 'react';
|
|
7
|
+
import { useCallback, useMemo } from 'react';
|
|
8
8
|
import { INSERT_MENTION_COMMAND } from "../mention-node";
|
|
9
9
|
import { MentionMenuOption } from "./utils";
|
|
10
|
+
var filterOptionWithChildren = function filterOptionWithChildren(option, filterOption) {
|
|
11
|
+
var _option$children;
|
|
12
|
+
option.children = (_option$children = option.children) === null || _option$children === void 0 ? void 0 : _option$children.filter(function (o) {
|
|
13
|
+
if (!o.children) {
|
|
14
|
+
return filterOption(o);
|
|
15
|
+
}
|
|
16
|
+
var newO = filterOptionWithChildren(o, filterOption);
|
|
17
|
+
return filterOption(o) || (newO.children || []).length > 0;
|
|
18
|
+
});
|
|
19
|
+
return option;
|
|
20
|
+
};
|
|
10
21
|
export var useOptions = function useOptions(allOptions, queryString) {
|
|
11
22
|
var _useLexicalComposerCo = useLexicalComposerContext(),
|
|
12
23
|
_useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
|
|
13
24
|
editor = _useLexicalComposerCo2[0];
|
|
25
|
+
var filterOption = useCallback(function (option) {
|
|
26
|
+
var _option$keywords;
|
|
27
|
+
var regex = new RegExp(escapeRegExp(queryString), 'i');
|
|
28
|
+
return regex.test(option.label) || ((_option$keywords = option.keywords) === null || _option$keywords === void 0 ? void 0 : _option$keywords.some(function (keyword) {
|
|
29
|
+
return regex.test(keyword);
|
|
30
|
+
})) || false;
|
|
31
|
+
}, [queryString]);
|
|
14
32
|
var options = useMemo(function () {
|
|
15
33
|
var _addOnselect = function _addOnselect(option) {
|
|
16
34
|
var menuOption = _objectSpread(_objectSpread({}, option), {}, {
|
|
@@ -32,14 +50,15 @@ export var useOptions = function useOptions(allOptions, queryString) {
|
|
|
32
50
|
if (!queryString) {
|
|
33
51
|
return menuOptions;
|
|
34
52
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
53
|
+
return menuOptions.map(function (o) {
|
|
54
|
+
if (!o.children) {
|
|
55
|
+
return o;
|
|
56
|
+
}
|
|
57
|
+
return filterOptionWithChildren(o, filterOption);
|
|
58
|
+
}).filter(function (o) {
|
|
59
|
+
return filterOption(o) || (o.children || []).length > 0;
|
|
41
60
|
});
|
|
42
|
-
}, [allOptions, queryString, editor]);
|
|
61
|
+
}, [allOptions, queryString, editor, filterOption]);
|
|
43
62
|
return {
|
|
44
63
|
options: options
|
|
45
64
|
};
|
|
@@ -90,7 +90,8 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
|
|
|
90
90
|
return /*#__PURE__*/_jsx(MentionMenuItem, {
|
|
91
91
|
isSelected: ((_options = options[selectedIndex]) === null || _options === void 0 ? void 0 : _options.value) === option.value,
|
|
92
92
|
option: option,
|
|
93
|
-
queryString: queryString
|
|
93
|
+
queryString: queryString,
|
|
94
|
+
showIcon: !option.isChild
|
|
94
95
|
});
|
|
95
96
|
},
|
|
96
97
|
treeData: options
|
|
@@ -12,7 +12,9 @@ export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
|
|
|
12
12
|
_onClick = _ref.onClick,
|
|
13
13
|
_onMouseEnter = _ref.onMouseEnter,
|
|
14
14
|
option = _ref.option,
|
|
15
|
-
queryString = _ref.queryString
|
|
15
|
+
queryString = _ref.queryString,
|
|
16
|
+
_ref$showIcon = _ref.showIcon,
|
|
17
|
+
showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon;
|
|
16
18
|
var _useStyles = useStyles({
|
|
17
19
|
isSelected: isSelected,
|
|
18
20
|
disabled: option.disabled
|
|
@@ -53,7 +55,7 @@ export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
|
|
|
53
55
|
},
|
|
54
56
|
ref: option.setRefElement,
|
|
55
57
|
tabIndex: -1,
|
|
56
|
-
children: [/*#__PURE__*/_jsx(Flex, {
|
|
58
|
+
children: [showIcon && /*#__PURE__*/_jsx(Flex, {
|
|
57
59
|
className: styles.menuItemIcon,
|
|
58
60
|
children: option.icon
|
|
59
61
|
}), /*#__PURE__*/_jsxs("div", {
|
|
@@ -10,6 +10,7 @@ export interface MentionMenuOptionInitParams {
|
|
|
10
10
|
keyboardShortcut?: string;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
onSelect: (queryString: string) => void;
|
|
13
|
+
isChild?: boolean;
|
|
13
14
|
children?: MentionMenuOptionInitParams[];
|
|
14
15
|
}
|
|
15
16
|
export declare class MentionMenuOption extends MenuOption {
|
|
@@ -25,5 +26,6 @@ export declare class MentionMenuOption extends MenuOption {
|
|
|
25
26
|
disabled?: boolean;
|
|
26
27
|
data?: any;
|
|
27
28
|
children?: MentionMenuOption[];
|
|
28
|
-
|
|
29
|
+
isChild?: boolean;
|
|
30
|
+
constructor({ label, value, data, icon, extraElement, keywords, keyboardShortcut, disabled, onSelect, children, isChild, }: MentionMenuOptionInitParams);
|
|
29
31
|
}
|
|
@@ -5,6 +5,8 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
|
5
5
|
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
6
6
|
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
7
7
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
8
|
+
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; }
|
|
9
|
+
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; }
|
|
8
10
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
9
11
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
10
12
|
import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
|
|
@@ -22,7 +24,8 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
|
|
|
22
24
|
keyboardShortcut = _ref.keyboardShortcut,
|
|
23
25
|
disabled = _ref.disabled,
|
|
24
26
|
onSelect = _ref.onSelect,
|
|
25
|
-
children = _ref.children
|
|
27
|
+
children = _ref.children,
|
|
28
|
+
isChild = _ref.isChild;
|
|
26
29
|
_classCallCheck(this, MentionMenuOption);
|
|
27
30
|
_this = _super.call(this, value);
|
|
28
31
|
_defineProperty(_assertThisInitialized(_this), "label", void 0);
|
|
@@ -39,6 +42,7 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
|
|
|
39
42
|
_defineProperty(_assertThisInitialized(_this), "disabled", void 0);
|
|
40
43
|
_defineProperty(_assertThisInitialized(_this), "data", void 0);
|
|
41
44
|
_defineProperty(_assertThisInitialized(_this), "children", void 0);
|
|
45
|
+
_defineProperty(_assertThisInitialized(_this), "isChild", void 0);
|
|
42
46
|
_this.value = value;
|
|
43
47
|
_this.label = label;
|
|
44
48
|
_this.title = label;
|
|
@@ -50,9 +54,11 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
|
|
|
50
54
|
_this.onSelect = onSelect.bind(_assertThisInitialized(_this));
|
|
51
55
|
_this.disabled = disabled;
|
|
52
56
|
_this.data = data;
|
|
57
|
+
_this.isChild = isChild !== null && isChild !== void 0 ? isChild : false;
|
|
53
58
|
_this.children = children === null || children === void 0 ? void 0 : children.map(function (m) {
|
|
54
|
-
|
|
55
|
-
|
|
59
|
+
return new MentionMenuOption(_objectSpread(_objectSpread({}, m), {}, {
|
|
60
|
+
isChild: true
|
|
61
|
+
}));
|
|
56
62
|
});
|
|
57
63
|
return _this;
|
|
58
64
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
3
3
|
import { createStyles, keyframes } from 'antd-style';
|
|
4
4
|
/**
|
|
5
5
|
* styles from https://github.com/alibaba/lowcode-plugins/blob/main/packages/base-monaco-editor/src/index.scss
|
|
@@ -34,9 +34,9 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
return {
|
|
37
|
-
base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n\n box-sizing: content-box;\n min-height: 100px;\n\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n &:hover {\n border-color: ", ";\n ", "\n }\n\n &.ve-focused {\n ", "\n ", "\n }\n\n &.ve-outline {\n border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.05)) !important;\n }\n\n & > .react-monaco-editor-container {\n width: 100%;\n height: 100%;\n min-height: 100px;\n background: transparent;\n\n ", "\n\n .monaco-editor,\n .monaco-editor-background,\n .monaco-editor .inputarea.ime-input,\n .monaco-editor .margin {\n
|
|
38
|
-
fullScreenBtn: css(
|
|
39
|
-
loading: css(
|
|
37
|
+
base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n\n box-sizing: content-box;\n min-height: 100px;\n\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n &:hover {\n border-color: ", ";\n ", "\n }\n\n &.ve-focused {\n ", "\n ", "\n }\n\n &.ve-outline {\n border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.05)) !important;\n }\n\n & > .react-monaco-editor-container {\n width: 100%;\n height: 100%;\n min-height: 100px;\n background: transparent;\n\n ", "\n\n .monaco-editor,\n .monaco-editor-background,\n .monaco-editor .inputarea.ime-input,\n .monaco-editor .margin {\n ", "\n }\n\n & > .monaco-editor {\n border-radius: ", "px;\n .overflow-guard,\n .margin {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n }\n .monaco-scrollable-element {\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n }\n .monaco-diff-editor {\n border-radius: ", "px;\n & > .original > .monaco-editor {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n .overflow-guard,\n .margin {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n }\n }\n .diffViewport {\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n }\n }\n\n .syntaxTips {\n position: absolute;\n bottom: 0;\n left: 0;\n\n box-sizing: border-box;\n width: 100%;\n max-height: 0;\n margin: 0;\n padding: 10px 30px;\n\n color: ", ";\n\n background: ", ";\n\n transition: 0.2s ease max-height;\n }\n\n .syntaxTips:hover {\n overflow: auto;\n max-height: 50%;\n }\n\n .syntaxTips .infoIcon {\n position: absolute;\n top: 2px;\n right: 5px;\n transform: rotateY(180deg);\n\n width: 20px;\n height: 16px;\n }\n "])), getBgColor(), variant === 'outlined' ? token.colorBorder : 'transparent', token.borderRadius, variant === 'outlined' ? token.colorPrimaryHover : 'transparent', variant === 'filled' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), token.colorFillSecondary), variant === 'filled' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), token.colorBgBase), variant !== 'borderless' && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-color: ", ";\n "])), token.colorPrimaryActive), isFullScreen && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: fixed;\n z-index: 9998;\n inset: 0;\n\n width: auto !important;\n height: auto !important;\n "]))), !isFullScreen && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background-color: transparent;\n "]))), token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius - 1, token.borderRadius - 1, token.colorErrorText, token.colorErrorBg),
|
|
38
|
+
fullScreenBtn: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n &.", "-btn {\n position: absolute;\n top: 20px;\n color: ", ";\n transition: none;\n ", "\n }\n "])), prefixCls, token.colorTextSecondary, isFullScreen ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n z-index: 9999;\n right: ", "px;\n "])), diff ? 64 : 138) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n right: ", "px;\n "])), minimapEnabled || diff ? 64 : 20)),
|
|
39
|
+
loading: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n position: absolute;\n inset: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n font-size: ", "px;\n color: ", ";\n\n background-color: transparent;\n\n &::after {\n content: '';\n width: 16px;\n /* display: inline; */\n animation: ", " steps(3) 1s infinite;\n }\n "])), token.fontSizeSM, token.colorTextTertiary, dots)
|
|
40
40
|
};
|
|
41
41
|
}, {
|
|
42
42
|
hashPriority: 'low'
|