@synerise/ds-code-area 0.2.0 → 0.3.0

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 (13) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +22 -18
  3. package/dist/CodeArea.d.ts +1 -1
  4. package/dist/CodeArea.js +19 -205
  5. package/dist/CodeArea.styles.d.ts +2 -0
  6. package/dist/CodeArea.styles.js +4 -2
  7. package/dist/CodeArea.types.d.ts +9 -1
  8. package/dist/components/CodeAreaEditor.d.ts +4 -0
  9. package/dist/components/CodeAreaEditor.js +229 -0
  10. package/dist/components/index.d.ts +1 -0
  11. package/dist/components/index.js +2 -1
  12. package/dist/utils/getDefaultTexts.js +7 -3
  13. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@0.2.0...@synerise/ds-code-area@0.3.0) (2024-11-12)
7
+
8
+
9
+ ### Features
10
+
11
+ * **code-area:** readonly and fullscreenlabel prop support ([553b36c](https://github.com/Synerise/synerise-design/commit/553b36c2e3efe4037d67eeb08d106318cd2d8b08))
12
+
13
+
14
+
15
+
16
+
6
17
  # [0.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@0.1.32...@synerise/ds-code-area@0.2.0) (2024-11-12)
7
18
 
8
19
 
package/README.md CHANGED
@@ -44,24 +44,28 @@ const syntaxOptions = [
44
44
 
45
45
  ## API
46
46
 
47
- | Property | Description | Type | Default |
48
- | --------------------------- | -------------------------------------------------------------- | ------------------------------------- | -------------- |
49
- | label | label above editor | `ReactNode` | - |
50
- | description | description below editor | `ReactNode` | - |
51
- | counter | limit character count | `{ limit: number; placement?: 'bottom' | 'top'; }` | - |
52
- | errorText | error message to show below editor (also adds "error styles") | `ReactNode` | - |
53
- | syntaxOptions | array of available syntaxes | `CodeAreaSyntaxOption[]` | - |
54
- | currentSyntax | current syntax of editor value | `CodeAreaSyntax` | - |
55
- | allowFullscreen | renders fullscreen mode button | `boolean` | - |
56
- | tooltip | tooltip text displayed next to label | `ReactNode` | - |
57
- | tooltipProps | tooltip properties (see @synerise/ds-tooltip) | `TooltipExtendedProps & TooltipProps` | - |
58
- | style | custom style added to outermost div | `CSSProperties` | - |
59
- | className | class name to add to outermost div | `string` | - |
60
- | renderFooterContent | renders custom content in footer bar | `(CodeAreaStateProps) => ReactNode` | - |
61
- | renderAdditionalDescription | renders custom content above description | `(CodeAreaStateProps) => ReactNode` | - |
62
- | onFullscreenChange | triggered when fullscreen is toggled on/off | `(isFullscreen: boolean) => void` | - |
63
- | onSyntaxChange | triggered when user switches syntax | `(newSyntax: SyntaxName) => void` | - |
64
- | texts | customise displayed texts | `CodeAreaTexts` | - |
47
+ | Property | Description | Type | Default |
48
+ |-----------------------------|----------------------------------------------------------------|---------------------------------------------------------|---------|
49
+ | label | label above editor | `ReactNode` | - |
50
+ | fullscreenLabel | label above editor in fullscreen mode (defaults to label prop) | `ReactNode` | - |
51
+ | description | description below editor | `ReactNode` | - |
52
+ | counter | limit character count | `{ limit: number; placement?: 'bottom' | 'top'; }` | - |
53
+ | errorText | error message to show below editor (also adds "error styles") | `ReactNode` | - |
54
+ | syntaxOptions | array of available syntaxes | `CodeAreaSyntaxOption[]` | - |
55
+ | currentSyntax | current syntax of editor value | `CodeAreaSyntax` | - |
56
+ | allowFullscreen | renders fullscreen mode button | `boolean` | - |
57
+ | readOnly | renders readOnly mode | `boolean` | - |
58
+ | tooltip | tooltip text displayed next to label | `ReactNode` | - |
59
+ | tooltipProps | tooltip properties (see @synerise/ds-tooltip) | `TooltipExtendedProps & TooltipProps` | - |
60
+ | style | custom style added to outermost div | `CSSProperties` | - |
61
+ | className | class name to add to outermost div | `string` | - |
62
+ | renderFooterContent | renders custom content in footer bar | `(CodeAreaStateProps) => ReactNode` | - |
63
+ | renderAdditionalDescription | renders custom content above description | `(CodeAreaStateProps) => ReactNode` | - |
64
+ | onFullscreenChange | triggered when fullscreen is toggled on/off | `(isFullscreen: boolean) => void` | - |
65
+ | onSyntaxChange | triggered when user switches syntax | `(newSyntax: SyntaxName) => void` | - |
66
+ | texts | customise displayed texts | `CodeAreaTexts` | - |
67
+ | getPopupContainer | customise where fullscreen layer is rendered into | getPopupContainer (@synerise/ds-utils) | - |
68
+
65
69
 
66
70
  ### CodeAreaTexts
67
71
 
package/dist/CodeArea.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { CodeAreaProps } from './CodeArea.types';
3
- declare const CodeArea: ({ label, description, counter, errorText, syntaxOptions, currentSyntax, allowFullscreen, renderFooterContent, renderAdditionalDescription, tooltip, tooltipProps, style, className, texts, onChange, onFullscreenChange, onSyntaxChange, value, ...monacoProps }: CodeAreaProps) => React.JSX.Element;
3
+ declare const CodeArea: ({ getPopupContainer, onFullscreenChange, ...codeAreaProps }: CodeAreaProps) => React.JSX.Element;
4
4
  export default CodeArea;
package/dist/CodeArea.js CHANGED
@@ -1,226 +1,40 @@
1
- var _excluded = ["label", "description", "counter", "errorText", "syntaxOptions", "currentSyntax", "allowFullscreen", "renderFooterContent", "renderAdditionalDescription", "tooltip", "tooltipProps", "style", "className", "texts", "onChange", "onFullscreenChange", "onSyntaxChange", "value"];
1
+ var _excluded = ["getPopupContainer", "onFullscreenChange"];
2
2
 
3
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
-
5
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
6
-
7
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
8
-
9
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
3
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
10
4
 
11
5
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
12
6
 
13
- import React, { useState, useMemo, useRef, useEffect } from 'react';
14
- import MonacoEditor from 'react-monaco-editor';
15
- import { InlineSelect } from '@synerise/ds-inline-edit';
16
- import { Label } from '@synerise/ds-input';
17
- import { useResizeObserver } from '@synerise/ds-utils';
18
- import * as S from './CodeArea.styles';
19
- import { FullscreenHeader, ContentBelow, ContentAbove, BottomBar } from './components';
20
- import { getDefaultTexts, getCharCount, calculateRequiredSpace } from './utils';
21
- import { MONACO_DEFAULT_OPTIONS, TRIGGER_SOURCE, DS_MONACO_THEME, DS_MONACO_THEME_NAME } from './constants';
7
+ import React, { useRef, useState } from 'react';
8
+ import { createPortal } from 'react-dom';
9
+ import { getPopupContainer as defaultGetPopupContainer } from '@synerise/ds-utils';
10
+ import { CodeAreaEditor } from './components';
22
11
 
23
12
  var CodeArea = function CodeArea(_ref) {
24
- var label = _ref.label,
25
- description = _ref.description,
26
- counter = _ref.counter,
27
- errorText = _ref.errorText,
28
- syntaxOptions = _ref.syntaxOptions,
29
- currentSyntax = _ref.currentSyntax,
30
- allowFullscreen = _ref.allowFullscreen,
31
- renderFooterContent = _ref.renderFooterContent,
32
- renderAdditionalDescription = _ref.renderAdditionalDescription,
33
- tooltip = _ref.tooltip,
34
- tooltipProps = _ref.tooltipProps,
35
- style = _ref.style,
36
- className = _ref.className,
37
- texts = _ref.texts,
38
- onChange = _ref.onChange,
13
+ var _ref$getPopupContaine = _ref.getPopupContainer,
14
+ getPopupContainer = _ref$getPopupContaine === void 0 ? defaultGetPopupContainer : _ref$getPopupContaine,
39
15
  onFullscreenChange = _ref.onFullscreenChange,
40
- onSyntaxChange = _ref.onSyntaxChange,
41
- value = _ref.value,
42
- monacoProps = _objectWithoutPropertiesLoose(_ref, _excluded);
43
-
44
- var _useState = useState(true),
45
- isValid = _useState[0],
46
- setIsValid = _useState[1];
16
+ codeAreaProps = _objectWithoutPropertiesLoose(_ref, _excluded);
47
17
 
48
- var _useState2 = useState(false),
49
- isFullscreen = _useState2[0],
50
- setIsFullscreen = _useState2[1];
51
-
52
- var editorRef = useRef(null);
53
- var monacoRef = useRef(null);
54
18
  var wrapperRef = useRef(null);
55
- var contentBelowRef = useRef(null);
56
-
57
- var _useResizeObserver = useResizeObserver(wrapperRef),
58
- height = _useResizeObserver.height,
59
- width = _useResizeObserver.width;
60
-
61
- var _useResizeObserver2 = useResizeObserver(contentBelowRef),
62
- contentBelowHeight = _useResizeObserver2.height;
63
19
 
64
- var count = getCharCount(value, counter == null ? void 0 : counter.limit);
65
- var allTexts = getDefaultTexts(texts);
20
+ var _useState = useState(false),
21
+ isFullscreen = _useState[0],
22
+ setIsFullscreen = _useState[1];
66
23
 
67
24
  var toggleFullscreen = function toggleFullscreen() {
68
25
  setIsFullscreen(!isFullscreen);
69
26
  onFullscreenChange && onFullscreenChange(isFullscreen);
70
27
  };
71
28
 
72
- var editorWillMount = monacoProps.editorWillMount,
73
- editorDidMount = monacoProps.editorDidMount,
74
- options = monacoProps.options;
75
-
76
- var combinedOptions = _objectSpread({}, MONACO_DEFAULT_OPTIONS, {}, options);
77
-
78
- var handleEditorWillMount = function handleEditorWillMount(monacoInstance) {
79
- monacoRef.current = monacoInstance;
80
- monacoInstance.editor.defineTheme(DS_MONACO_THEME_NAME, DS_MONACO_THEME);
81
- monacoInstance.editor.setTheme(DS_MONACO_THEME_NAME);
82
- monacoInstance.editor.onDidChangeMarkers(function () {
83
- var markers = monacoInstance.editor.getModelMarkers({});
84
- setIsValid(!markers.length);
85
- });
86
- editorWillMount && editorWillMount(monacoInstance);
87
- };
88
-
89
- var handleEditorDidMount = function handleEditorDidMount(editor, monacoInstance) {
90
- editorRef.current = editor;
91
- editorDidMount && editorDidMount(editor, monacoInstance);
92
- };
93
-
94
- var handleChange = function handleChange(newValue, event) {
95
- if (counter != null && counter.limit && newValue.length > (counter == null ? void 0 : counter.limit)) {
96
- editorRef.current && editorRef.current.trigger(TRIGGER_SOURCE, 'undo', null);
97
- return;
98
- }
99
-
100
- if (editorRef.current) {
101
- editorRef.current.pushUndoStop();
102
- }
103
-
104
- onChange && onChange(newValue, event);
105
- };
106
-
107
- var labelWithTooltip = label && /*#__PURE__*/React.createElement(Label, {
108
- label: label,
109
- tooltip: tooltip,
110
- tooltipConfig: (tooltip || tooltipProps) && _objectSpread({}, tooltipProps, {
111
- placement: isFullscreen ? 'right' : undefined,
112
- title: tooltip
113
- })
114
- });
115
-
116
- var renderCounter = function renderCounter(placement) {
117
- return (counter == null ? void 0 : counter.limit) && (!placement || (counter == null ? void 0 : counter.placement) === placement) && /*#__PURE__*/React.createElement(S.Counter, null, count, " / ", counter.limit);
118
- };
119
-
120
- useEffect(function () {
121
- setIsValid(!errorText);
122
- }, [errorText]);
123
- useEffect(function () {
124
- if (editorRef.current) {
125
- var _editorRef$current, _monacoRef$current;
126
-
127
- var currentModel = (_editorRef$current = editorRef.current) == null ? void 0 : _editorRef$current.getModel(); // eslint-disable-next-line no-unused-expressions
128
-
129
- currentModel && ((_monacoRef$current = monacoRef.current) == null ? void 0 : _monacoRef$current.editor.setModelLanguage(currentModel, currentSyntax));
130
- }
131
- }, [currentSyntax]);
132
-
133
- var _useMemo = useMemo(function () {
134
- var source = syntaxOptions == null ? void 0 : syntaxOptions.map(function (item) {
135
- var itemLabel = item.label,
136
- language = item.language;
137
- return {
138
- key: language,
139
- text: itemLabel || language,
140
- onSelect: function onSelect() {
141
- onSyntaxChange && onSyntaxChange(language);
142
- }
143
- };
144
- });
145
- var currentItem = syntaxOptions == null ? void 0 : syntaxOptions.find(function (item) {
146
- return item.language === currentSyntax;
147
- });
148
- return {
149
- syntaxDataSource: source,
150
- currentSyntaxItem: currentItem || {
151
- language: currentSyntax
152
- }
153
- };
154
- }, [currentSyntax, onSyntaxChange, syntaxOptions]),
155
- syntaxDataSource = _useMemo.syntaxDataSource,
156
- currentSyntaxItem = _useMemo.currentSyntaxItem;
157
-
158
- var syntaxSelect = useMemo(function () {
159
- return syntaxDataSource && syntaxDataSource.length > 1 ? /*#__PURE__*/React.createElement(InlineSelect, {
160
- size: "small",
161
- expanded: false,
162
- input: {
163
- name: 'syntax-select',
164
- value: currentSyntaxItem.label || currentSyntaxItem.language
165
- },
166
- initialValue: currentSyntaxItem.label || currentSyntaxItem.language,
167
- dataSource: syntaxDataSource
168
- }) : /*#__PURE__*/React.createElement(S.SyntaxTitle, {
169
- size: "small"
170
- }, currentSyntaxItem.label || currentSyntaxItem.language);
171
- }, [currentSyntaxItem, syntaxDataSource]);
172
- var customFooterContent = renderFooterContent && /*#__PURE__*/React.createElement(S.BottomBarElement, null, renderFooterContent({
173
- isFullscreen: isFullscreen,
174
- count: count,
175
- isValid: isValid
176
- }));
177
- var additionalDescription = renderAdditionalDescription && /*#__PURE__*/React.createElement(S.AdditionalDescription, null, renderAdditionalDescription({
178
- isFullscreen: isFullscreen,
179
- count: count,
180
- isValid: isValid
181
- }));
182
- var isBottomBarShowing = Boolean(syntaxSelect || allowFullscreen && !isFullscreen || customFooterContent);
183
- var requiredSpace = isFullscreen ? calculateRequiredSpace(isBottomBarShowing, contentBelowHeight) : 0;
184
- return /*#__PURE__*/React.createElement(S.CodeAreaWrapper, {
185
- requiredSpace: requiredSpace,
186
- className: className,
187
- style: style,
188
- isFullscreen: isFullscreen
189
- }, isFullscreen && /*#__PURE__*/React.createElement(FullscreenHeader, {
190
- label: labelWithTooltip,
191
- texts: allTexts,
192
- onClick: toggleFullscreen
193
- }), !isFullscreen && /*#__PURE__*/React.createElement(ContentAbove, {
194
- label: labelWithTooltip,
195
- counter: renderCounter('top')
196
- }), /*#__PURE__*/React.createElement(S.CodeAreaContent, null, /*#__PURE__*/React.createElement(S.EditorWrapper, {
197
- hasError: Boolean(errorText)
198
- }, /*#__PURE__*/React.createElement(S.EditorInnerWrapper, {
29
+ return /*#__PURE__*/React.createElement("div", {
199
30
  ref: wrapperRef
200
- }, /*#__PURE__*/React.createElement(MonacoEditor, _extends({
201
- theme: DS_MONACO_THEME_NAME,
202
- width: width,
203
- height: height
204
- }, monacoProps, {
205
- options: combinedOptions,
206
- value: value,
207
- onChange: handleChange,
208
- editorDidMount: handleEditorDidMount,
209
- editorWillMount: handleEditorWillMount,
210
- language: currentSyntax
211
- }))), isBottomBarShowing && /*#__PURE__*/React.createElement(BottomBar, {
212
- texts: allTexts,
213
- syntaxSelect: syntaxSelect,
214
- allowFullscreen: allowFullscreen && !isFullscreen,
31
+ }, /*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
32
+ toggleFullscreen: toggleFullscreen,
33
+ isFullscreen: false
34
+ })), wrapperRef.current && isFullscreen && createPortal( /*#__PURE__*/React.createElement(CodeAreaEditor, _extends({}, codeAreaProps, {
215
35
  toggleFullscreen: toggleFullscreen,
216
- customFooterContent: customFooterContent
217
- })), /*#__PURE__*/React.createElement(ContentBelow, {
218
- ref: contentBelowRef,
219
- errorText: errorText,
220
- description: description,
221
- additionalDescription: additionalDescription,
222
- counter: renderCounter(!isFullscreen ? 'bottom' : undefined)
223
- })));
36
+ isFullscreen: isFullscreen
37
+ })), getPopupContainer(wrapperRef.current)));
224
38
  };
225
39
 
226
40
  export default CodeArea;
package/dist/CodeArea.styles.d.ts CHANGED
@@ -7,8 +7,10 @@ export declare const EditorWrapper: import("styled-components").StyledComponent<
7
7
  export declare const FullscreenHeaderTitle: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => import("react").JSX.Element, any, {}, never>;
8
8
  export declare const FullscreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
9
9
  export declare const CodeAreaWrapper: import("styled-components").StyledComponent<"div", any, {
10
+ readOnly: boolean;
10
11
  isFullscreen: boolean;
11
12
  requiredSpace: number;
13
+ zIndex?: string | number | undefined;
12
14
  }, never>;
13
15
  export declare const AdditionalDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
14
16
  export declare const ContentBelow: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/CodeArea.styles.js CHANGED
@@ -31,12 +31,14 @@ export var FullscreenHeader = styled(FlexRow).withConfig({
31
31
  export var CodeAreaWrapper = styled.div.withConfig({
32
32
  displayName: "CodeAreastyles__CodeAreaWrapper",
33
33
  componentId: "svoej2-6"
34
- })(["", ""], function (props) {
34
+ })(["", " ", "{", ";}"], function (props) {
35
35
  if (props.isFullscreen) {
36
- return css(["position:fixed;width:100vw;height:100vh;z-index:999;left:0;top:0;background:", ";", "{height:calc(100vh - ", "px);}", "{margin:0 24px;}"], props.theme.palette.white, EditorInnerWrapper, props.requiredSpace, CodeAreaContent);
36
+ return css(["position:fixed;width:100vw;height:100vh;z-index:", ";left:0;top:0;background:", ";", "{height:calc(100vh - ", "px);}", "{margin:0 24px;}"], props.zIndex !== undefined ? props.zIndex : props.theme.variables['zindex-modal'], props.theme.palette.white, EditorInnerWrapper, props.requiredSpace, CodeAreaContent);
37
37
  }
38
38
 
39
39
  return css(["margin-bottom:12px;"]);
40
+ }, EditorWrapper, function (props) {
41
+ return props.readOnly && css(["background:", ";.monaco-editor .cursors-layer > .cursor{display:none !important;}"], props.theme.palette['grey-050']);
40
42
  });
41
43
  export var AdditionalDescription = styled.div.withConfig({
42
44
  displayName: "CodeAreastyles__AdditionalDescription",
package/dist/CodeArea.types.d.ts CHANGED
@@ -12,8 +12,9 @@ export type CodeAreaTexts = {
12
12
  closeFullscreen: ReactNode;
13
13
  fullscreenTitle: ReactNode;
14
14
  };
15
- export type CodeAreaProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = MonacoEditorProps & {
15
+ export type CodeAreaProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = Omit<MonacoEditorProps, 'language'> & {
16
16
  label?: ReactNode;
17
+ fullscreenLabel?: ReactNode;
17
18
  description?: ReactNode;
18
19
  texts?: Partial<CodeAreaTexts>;
19
20
  counter?: {
@@ -24,9 +25,12 @@ export type CodeAreaProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> =
24
25
  syntaxOptions?: CodeAreaSyntaxOption<SyntaxName>[];
25
26
  currentSyntax: SyntaxName;
26
27
  allowFullscreen?: boolean;
28
+ readOnly?: boolean;
27
29
  tooltip?: ReactNode;
30
+ getPopupContainer?: (node: HTMLElement) => HTMLElement;
28
31
  tooltipProps?: TooltipExtendedProps & TooltipProps;
29
32
  style?: CSSProperties;
33
+ zIndex?: string | number;
30
34
  className?: string;
31
35
  renderFooterContent?: (props: {
32
36
  isFullscreen?: boolean;
@@ -41,3 +45,7 @@ export type CodeAreaProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> =
41
45
  onFullscreenChange?: (isFullscreen: boolean) => void;
42
46
  onSyntaxChange?: (newSyntax: SyntaxName) => void;
43
47
  };
48
+ export type CodeAreaEditorProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = CodeAreaProps<SyntaxName> & {
49
+ isFullscreen: boolean;
50
+ toggleFullscreen: () => void;
51
+ };
package/dist/components/CodeAreaEditor.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { CodeAreaEditorProps } from '../CodeArea.types';
3
+ export declare const CodeAreaEditor: ({ label, description, counter, errorText, syntaxOptions, currentSyntax, allowFullscreen, fullscreenLabel, renderFooterContent, renderAdditionalDescription, tooltip, tooltipProps, style, className, texts, onChange, onSyntaxChange, value, readOnly, isFullscreen, toggleFullscreen, zIndex, ...monacoProps }: CodeAreaEditorProps) => React.JSX.Element;
4
+ export default CodeAreaEditor;
package/dist/components/CodeAreaEditor.js ADDED
@@ -0,0 +1,229 @@
1
+ var _excluded = ["label", "description", "counter", "errorText", "syntaxOptions", "currentSyntax", "allowFullscreen", "fullscreenLabel", "renderFooterContent", "renderAdditionalDescription", "tooltip", "tooltipProps", "style", "className", "texts", "onChange", "onSyntaxChange", "value", "readOnly", "isFullscreen", "toggleFullscreen", "zIndex"];
2
+
3
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
+
5
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
6
+
7
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
8
+
9
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
10
+
11
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
12
+
13
+ function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
14
+
15
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
16
+
17
+ import React, { useState, useMemo, useRef, useEffect } from 'react';
18
+ import MonacoEditor from 'react-monaco-editor';
19
+ import { InlineSelect } from '@synerise/ds-inline-edit';
20
+ import { Label } from '@synerise/ds-input';
21
+ import { NOOP, useResizeObserver } from '@synerise/ds-utils';
22
+ import * as S from '../CodeArea.styles';
23
+ import { FullscreenHeader, ContentBelow, ContentAbove, BottomBar } from './index';
24
+ import { getDefaultTexts, getCharCount, calculateRequiredSpace } from '../utils';
25
+ import { MONACO_DEFAULT_OPTIONS, TRIGGER_SOURCE, DS_MONACO_THEME, DS_MONACO_THEME_NAME } from '../constants';
26
+ export var CodeAreaEditor = function CodeAreaEditor(_ref) {
27
+ var label = _ref.label,
28
+ description = _ref.description,
29
+ counter = _ref.counter,
30
+ errorText = _ref.errorText,
31
+ syntaxOptions = _ref.syntaxOptions,
32
+ currentSyntax = _ref.currentSyntax,
33
+ allowFullscreen = _ref.allowFullscreen,
34
+ fullscreenLabel = _ref.fullscreenLabel,
35
+ renderFooterContent = _ref.renderFooterContent,
36
+ renderAdditionalDescription = _ref.renderAdditionalDescription,
37
+ tooltip = _ref.tooltip,
38
+ tooltipProps = _ref.tooltipProps,
39
+ style = _ref.style,
40
+ className = _ref.className,
41
+ texts = _ref.texts,
42
+ onChange = _ref.onChange,
43
+ onSyntaxChange = _ref.onSyntaxChange,
44
+ value = _ref.value,
45
+ readOnly = _ref.readOnly,
46
+ isFullscreen = _ref.isFullscreen,
47
+ toggleFullscreen = _ref.toggleFullscreen,
48
+ zIndex = _ref.zIndex,
49
+ monacoProps = _objectWithoutPropertiesLoose(_ref, _excluded);
50
+
51
+ var _useState = useState(true),
52
+ isValid = _useState[0],
53
+ setIsValid = _useState[1];
54
+
55
+ var editorRef = useRef(null);
56
+ var monacoRef = useRef(null);
57
+ var wrapperRef = useRef(null);
58
+ var contentBelowRef = useRef(null);
59
+
60
+ var _useResizeObserver = useResizeObserver(wrapperRef),
61
+ height = _useResizeObserver.height,
62
+ width = _useResizeObserver.width;
63
+
64
+ var _useResizeObserver2 = useResizeObserver(contentBelowRef),
65
+ contentBelowHeight = _useResizeObserver2.height;
66
+
67
+ var counterLimit = counter == null ? void 0 : counter.limit;
68
+ var count = getCharCount(value, counterLimit);
69
+ var allTexts = getDefaultTexts(texts);
70
+ var editorWillMount = monacoProps.editorWillMount,
71
+ editorDidMount = monacoProps.editorDidMount,
72
+ options = monacoProps.options;
73
+
74
+ var combinedOptions = _objectSpread({}, MONACO_DEFAULT_OPTIONS, {}, options, {
75
+ readOnly: readOnly,
76
+ domReadOnly: readOnly
77
+ });
78
+
79
+ var handleEditorWillMount = function handleEditorWillMount(monacoInstance) {
80
+ monacoRef.current = monacoInstance;
81
+ monacoInstance.editor.defineTheme(DS_MONACO_THEME_NAME, DS_MONACO_THEME);
82
+ monacoInstance.editor.setTheme(DS_MONACO_THEME_NAME);
83
+ monacoInstance.editor.onDidChangeMarkers(function () {
84
+ var markers = monacoInstance.editor.getModelMarkers({});
85
+ setIsValid(!markers.length);
86
+ });
87
+ editorWillMount && editorWillMount(monacoInstance);
88
+ };
89
+
90
+ var handleEditorDidMount = function handleEditorDidMount(editor, monacoInstance) {
91
+ editorRef.current = editor;
92
+ editorDidMount && editorDidMount(editor, monacoInstance);
93
+ };
94
+
95
+ var handleChange = function handleChange(newValue, event) {
96
+ if (counterLimit && newValue.length > counterLimit) {
97
+ editorRef.current && editorRef.current.trigger(TRIGGER_SOURCE, 'undo', null);
98
+ return;
99
+ }
100
+
101
+ if (editorRef.current) {
102
+ editorRef.current.pushUndoStop();
103
+ }
104
+
105
+ onChange && onChange(newValue, event);
106
+ };
107
+
108
+ var labelWithTooltip = label && /*#__PURE__*/React.createElement(Label, {
109
+ label: label,
110
+ tooltip: tooltip,
111
+ tooltipConfig: (tooltip || tooltipProps) && _objectSpread({}, tooltipProps, {
112
+ placement: isFullscreen ? 'right' : undefined,
113
+ title: tooltip
114
+ })
115
+ });
116
+
117
+ var renderCounter = function renderCounter(placement) {
118
+ return counterLimit && (!placement || (counter == null ? void 0 : counter.placement) === placement) && /*#__PURE__*/React.createElement(S.Counter, null, count, " / ", counter.limit);
119
+ };
120
+
121
+ useEffect(function () {
122
+ setIsValid(!errorText);
123
+ }, [errorText]);
124
+ useEffect(function () {
125
+ if (editorRef.current) {
126
+ var _editorRef$current, _monacoRef$current;
127
+
128
+ var currentModel = (_editorRef$current = editorRef.current) == null ? void 0 : _editorRef$current.getModel(); // eslint-disable-next-line no-unused-expressions
129
+
130
+ currentModel && ((_monacoRef$current = monacoRef.current) == null ? void 0 : _monacoRef$current.editor.setModelLanguage(currentModel, currentSyntax));
131
+ }
132
+ }, [currentSyntax]);
133
+
134
+ var _useMemo = useMemo(function () {
135
+ var source = syntaxOptions == null ? void 0 : syntaxOptions.map(function (item) {
136
+ var itemLabel = item.label,
137
+ language = item.language;
138
+ return {
139
+ key: language,
140
+ text: itemLabel || language
141
+ };
142
+ });
143
+ var currentItem = syntaxOptions == null ? void 0 : syntaxOptions.find(function (item) {
144
+ return item.language === currentSyntax;
145
+ });
146
+ return {
147
+ syntaxDataSource: source,
148
+ currentSyntaxItem: currentItem || {
149
+ language: currentSyntax
150
+ }
151
+ };
152
+ }, [currentSyntax, syntaxOptions]),
153
+ syntaxDataSource = _useMemo.syntaxDataSource,
154
+ currentSyntaxItem = _useMemo.currentSyntaxItem;
155
+
156
+ var syntaxSelect = useMemo(function () {
157
+ return syntaxDataSource && syntaxDataSource.length > 1 && !readOnly ? /*#__PURE__*/React.createElement(InlineSelect, {
158
+ size: "small",
159
+ expanded: false,
160
+ input: {
161
+ name: 'syntax-select',
162
+ value: currentSyntaxItem.label || currentSyntaxItem.language,
163
+ onChange: NOOP
164
+ },
165
+ onValueChange: function onValueChange(item) {
166
+ item.key && onSyntaxChange && onSyntaxChange("" + item.key);
167
+ },
168
+ initialValue: currentSyntaxItem.label || currentSyntaxItem.language,
169
+ dataSource: syntaxDataSource
170
+ }) : /*#__PURE__*/React.createElement(S.SyntaxTitle, {
171
+ size: "small"
172
+ }, currentSyntaxItem.label || currentSyntaxItem.language);
173
+ }, [currentSyntaxItem.label, currentSyntaxItem.language, onSyntaxChange, readOnly, syntaxDataSource]);
174
+ var customFooterContent = renderFooterContent && /*#__PURE__*/React.createElement(S.BottomBarElement, null, renderFooterContent({
175
+ isFullscreen: isFullscreen,
176
+ count: count,
177
+ isValid: isValid
178
+ }));
179
+ var additionalDescription = renderAdditionalDescription && /*#__PURE__*/React.createElement(S.AdditionalDescription, null, renderAdditionalDescription({
180
+ isFullscreen: isFullscreen,
181
+ count: count,
182
+ isValid: isValid
183
+ }));
184
+ var isBottomBarShowing = Boolean(syntaxSelect || allowFullscreen && !isFullscreen || customFooterContent);
185
+ var requiredSpace = isFullscreen ? calculateRequiredSpace(isBottomBarShowing, contentBelowHeight) : 0;
186
+ return /*#__PURE__*/React.createElement(S.CodeAreaWrapper, {
187
+ readOnly: !!readOnly,
188
+ requiredSpace: requiredSpace,
189
+ className: className,
190
+ style: style,
191
+ isFullscreen: isFullscreen,
192
+ zIndex: zIndex
193
+ }, isFullscreen && /*#__PURE__*/React.createElement(FullscreenHeader, {
194
+ label: fullscreenLabel || labelWithTooltip,
195
+ texts: allTexts,
196
+ onClick: toggleFullscreen
197
+ }), !isFullscreen && /*#__PURE__*/React.createElement(ContentAbove, {
198
+ label: labelWithTooltip,
199
+ counter: renderCounter('top')
200
+ }), /*#__PURE__*/React.createElement(S.CodeAreaContent, null, /*#__PURE__*/React.createElement(S.EditorWrapper, {
201
+ hasError: Boolean(errorText)
202
+ }, /*#__PURE__*/React.createElement(S.EditorInnerWrapper, {
203
+ ref: wrapperRef
204
+ }, /*#__PURE__*/React.createElement(MonacoEditor, _extends({
205
+ theme: DS_MONACO_THEME_NAME,
206
+ width: width,
207
+ height: height
208
+ }, monacoProps, {
209
+ options: combinedOptions,
210
+ value: value,
211
+ onChange: handleChange,
212
+ editorDidMount: handleEditorDidMount,
213
+ editorWillMount: handleEditorWillMount,
214
+ language: currentSyntax
215
+ }))), isBottomBarShowing && /*#__PURE__*/React.createElement(BottomBar, {
216
+ texts: allTexts,
217
+ syntaxSelect: syntaxSelect,
218
+ allowFullscreen: allowFullscreen && !isFullscreen,
219
+ toggleFullscreen: toggleFullscreen,
220
+ customFooterContent: customFooterContent
221
+ })), /*#__PURE__*/React.createElement(ContentBelow, {
222
+ ref: contentBelowRef,
223
+ errorText: errorText,
224
+ description: description,
225
+ additionalDescription: additionalDescription,
226
+ counter: renderCounter(!isFullscreen ? 'bottom' : undefined)
227
+ })));
228
+ };
229
+ export default CodeAreaEditor;
package/dist/components/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export * from './ContentAbove';
2
2
  export * from './ContentBelow';
3
3
  export * from './FullscreenHeader';
4
4
  export * from './BottomBar';
5
+ export * from './CodeAreaEditor';
package/dist/components/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './ContentAbove';
2
2
  export * from './ContentBelow';
3
3
  export * from './FullscreenHeader';
4
- export * from './BottomBar';
4
+ export * from './BottomBar';
5
+ export * from './CodeAreaEditor';
package/dist/utils/getDefaultTexts.js CHANGED
@@ -1,8 +1,12 @@
1
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
1
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
2
2
 
3
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
3
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
4
4
 
5
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
6
+
7
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
8
+
9
+ function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
6
10
 
7
11
  import React from 'react';
8
12
  import { FormattedMessage } from 'react-intl';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-code-area",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "CodeArea UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -34,14 +34,14 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-button": "^0.21.17",
37
+ "@synerise/ds-button": "^0.21.18",
38
38
  "@synerise/ds-core": "^0.42.0",
39
- "@synerise/ds-icon": "^0.66.3",
40
- "@synerise/ds-inline-edit": "^0.8.18",
41
- "@synerise/ds-input": "^0.24.12",
42
- "@synerise/ds-tooltip": "^0.14.47",
43
- "@synerise/ds-typography": "^0.16.4",
44
- "@synerise/ds-utils": "^0.31.0",
39
+ "@synerise/ds-icon": "^0.66.4",
40
+ "@synerise/ds-inline-edit": "^0.9.0",
41
+ "@synerise/ds-input": "^0.24.13",
42
+ "@synerise/ds-tooltip": "^0.14.48",
43
+ "@synerise/ds-typography": "^0.16.5",
44
+ "@synerise/ds-utils": "^0.31.1",
45
45
  "monaco-editor": "0.47.0",
46
46
  "react-intl": "6.8.4",
47
47
  "react-monaco-editor": "^0.55.0"
@@ -52,5 +52,5 @@
52
52
  "react": ">=16.9.0 <= 17.0.2",
53
53
  "styled-components": "5.0.1"
54
54
  },
55
- "gitHead": "1bb66dcc360a650e81b9bd195d5b77aa8ae2d308"
55
+ "gitHead": "8d26191fc0475407e0691b9b183761ad3cd7c87d"
56
56
  }