@activecollab/components 2.0.260 → 2.0.261
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/dist/cjs/components/EditableContent/Styles.js +40 -9
- package/dist/cjs/components/EditableContent/Styles.js.map +1 -1
- package/dist/cjs/components/EditableText/EditableText.js +36 -53
- package/dist/cjs/components/EditableText/EditableText.js.map +1 -1
- package/dist/esm/components/EditableContent/Styles.d.ts +11 -1
- package/dist/esm/components/EditableContent/Styles.d.ts.map +1 -1
- package/dist/esm/components/EditableContent/Styles.js +47 -8
- package/dist/esm/components/EditableContent/Styles.js.map +1 -1
- package/dist/esm/components/EditableText/EditableText.d.ts.map +1 -1
- package/dist/esm/components/EditableText/EditableText.js +21 -37
- package/dist/esm/components/EditableText/EditableText.js.map +1 -1
- package/dist/index.js +74 -58
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledSpan = exports.StyledInput = exports.StyledDiv = void 0;
|
|
6
|
+
exports.StyledTextareaSpan = exports.StyledSpan = exports.StyledMultilineSpan = exports.StyledInput = exports.StyledDiv = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
var _BoxSizingStyle = require("../BoxSizingStyle");
|
|
9
9
|
var _FontStyle = require("../FontStyle");
|
|
@@ -13,19 +13,22 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
13
13
|
var StyledDiv = exports.StyledDiv = _styledComponents.default.div.withConfig({
|
|
14
14
|
displayName: "Styles__StyledDiv",
|
|
15
15
|
componentId: "sc-1wapx2a-0"
|
|
16
|
-
})(["", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
|
|
16
|
+
})(["", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
|
|
17
17
|
"position": "relative",
|
|
18
18
|
"display": "inline-block",
|
|
19
19
|
"maxWidth": "100%"
|
|
20
|
+
}, function (_ref) {
|
|
21
|
+
var $multiline = _ref.$multiline;
|
|
22
|
+
return $multiline && (0, _styledComponents.css)(["position:relative;display:flex;"]);
|
|
20
23
|
});
|
|
21
24
|
var StyledSpan = exports.StyledSpan = (0, _styledComponents.default)(_Typography.Typography).withConfig({
|
|
22
25
|
displayName: "Styles__StyledSpan",
|
|
23
26
|
componentId: "sc-1wapx2a-1"
|
|
24
|
-
})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " ", " &:empty:before{content:\" \";}"], function (
|
|
25
|
-
var $disabled =
|
|
26
|
-
return $disabled && (0, _styledComponents.css)(["visibility:visible;"]);
|
|
27
|
-
}, function (
|
|
28
|
-
var invalid =
|
|
27
|
+
})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " ", " &:empty:before{content:\" \";}"], function (_ref2) {
|
|
28
|
+
var $disabled = _ref2.$disabled;
|
|
29
|
+
return $disabled && (0, _styledComponents.css)(["visibility:visible;cursor:default !important;"]);
|
|
30
|
+
}, function (_ref3) {
|
|
31
|
+
var invalid = _ref3.invalid;
|
|
29
32
|
return invalid && (0, _styledComponents.css)(["border:1px solid var(--red-alert);"]);
|
|
30
33
|
});
|
|
31
34
|
StyledSpan.displayName = "StyledSpan";
|
|
@@ -50,9 +53,37 @@ var StyledInput = exports.StyledInput = (0, _styledComponents.default)(_Typograp
|
|
|
50
53
|
":hover": {
|
|
51
54
|
"borderColor": "var(--color-theme-700)"
|
|
52
55
|
}
|
|
53
|
-
}, function (
|
|
54
|
-
var invalid =
|
|
56
|
+
}, function (_ref4) {
|
|
57
|
+
var invalid = _ref4.invalid;
|
|
55
58
|
return invalid && (0, _styledComponents.css)(["border-color:var(--red-alert) !important;"]);
|
|
56
59
|
});
|
|
57
60
|
StyledInput.displayName = "StyledInput";
|
|
61
|
+
var StyledMultilineSpan = exports.StyledMultilineSpan = (0, _styledComponents.default)(StyledSpan).withConfig({
|
|
62
|
+
displayName: "Styles__StyledMultilineSpan",
|
|
63
|
+
componentId: "sc-1wapx2a-3"
|
|
64
|
+
})(["cursor:", ";z-index:2;width:100%;visibility:visible !important;&:hover{border-color:", ";}"], function (_ref5) {
|
|
65
|
+
var $disabled = _ref5.$disabled;
|
|
66
|
+
return $disabled ? "default" : "text !important";
|
|
67
|
+
}, function (_ref6) {
|
|
68
|
+
var invalid = _ref6.invalid,
|
|
69
|
+
$disabled = _ref6.$disabled;
|
|
70
|
+
return invalid ? "var(--red-alert)" : $disabled ? "transparent" : "var(--border-primary)";
|
|
71
|
+
});
|
|
72
|
+
StyledMultilineSpan.displayName = "StyledMultilineSpan";
|
|
73
|
+
var StyledTextareaSpan = exports.StyledTextareaSpan = (0, _styledComponents.default)(_Typography.Typography).withConfig({
|
|
74
|
+
displayName: "Styles__StyledTextareaSpan",
|
|
75
|
+
componentId: "sc-1wapx2a-4"
|
|
76
|
+
})(["", " background-color:var(--input-background-color);border-color:var(--color-theme-500);padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;font-variant-numeric:tabular-nums;outline-width:0px;outline:none;resize:none;white-space:pre-wrap;overflow-wrap:break-word;height:calc(1.5em * 3 + 2px);min-height:calc(1.5em * 3 + 2px);opacity:0;pointer-events:none;z-index:1;&:focus{opacity:1;pointer-events:auto;background-color:var(--input-background-color);border-color:var(--color-primary);outline:none;z-index:3;}&:disabled{opacity:0;pointer-events:none;}", ""], {
|
|
77
|
+
"position": "absolute",
|
|
78
|
+
"inset": "0px",
|
|
79
|
+
"boxSizing": "border-box",
|
|
80
|
+
"width": "100%",
|
|
81
|
+
"borderRadius": "0.375rem",
|
|
82
|
+
"borderWidth": "1px",
|
|
83
|
+
"borderStyle": "solid"
|
|
84
|
+
}, function (_ref7) {
|
|
85
|
+
var invalid = _ref7.invalid;
|
|
86
|
+
return invalid && (0, _styledComponents.css)(["border-color:var(--red-alert) !important;"]);
|
|
87
|
+
});
|
|
88
|
+
StyledTextareaSpan.displayName = "StyledTextareaSpan";
|
|
58
89
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_Typography","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledDiv","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","StyledSpan","Typography","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_Typography","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledDiv","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","_ref","$multiline","css","StyledSpan","Typography","_ref2","$disabled","_ref3","invalid","StyledInput","_ref4","StyledMultilineSpan","_ref5","_ref6","StyledTextareaSpan","_ref7"],"sources":["../../../../src/components/EditableContent/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const StyledDiv = styled.div<{ $multiline?: boolean }>`\n ${FontStyle}\n ${BoxSizingStyle}\n\n\n\n ${tw`tw-relative tw-inline-block tw-max-w-full`}\n ${({ $multiline }) =>\n $multiline &&\n css`\n position: relative;\n display: flex;\n `}\n`;\n\nexport const StyledSpan = styled(Typography)<{ $disabled?: boolean }>`\n visibility: hidden;\n display: block;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n position: relative;\n border: 1px solid transparent;\n border-radius: 6px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre;\n font-variant-numeric: tabular-nums;\n\n ${({ $disabled }) =>\n $disabled &&\n css`\n visibility: visible;\n cursor: default !important;\n `}\n\n ${({ invalid }) =>\n invalid &&\n css`\n border: 1px solid var(--red-alert);\n `}\n\n &:empty:before {\n content: \" \";\n }\n`;\n\nStyledSpan.displayName = \"StyledSpan\";\n\nexport const StyledInput = styled(Typography)`\n ${tw`\n tw-absolute\n tw-inset-0\n tw-border\n tw-border-transparent\n tw-border-solid\n hover:tw-border-theme-700\n focus-within:tw-border-theme-700\n tw-rounded-md\n tw-box-border\n tw-overflow-hidden\n tw-whitespace-nowrap\n focus-within:tw-overflow-scroll\n tw-w-full`}\n\n background-color: inherit;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n text-overflow: ellipsis;\n font-variant-numeric: tabular-nums;\n &:focus-whitin {\n text-overflow: clip;\n }\n outline-width: 0px;\n outline: none;\n &:disabled {\n opacity: 0;\n }\n\n ${({ invalid }) =>\n invalid &&\n css`\n border-color: var(--red-alert) !important;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledMultilineSpan = styled(StyledSpan)`\n cursor: ${({ $disabled }) => ($disabled ? \"default\" : \"text !important\")};\n z-index: 2;\n width: 100%;\n visibility: visible !important;\n\n &:hover {\n border-color: ${({ invalid, $disabled }) =>\n invalid\n ? \"var(--red-alert)\"\n : $disabled\n ? \"transparent\"\n : \"var(--border-primary)\"};\n }\n`;\n\nStyledMultilineSpan.displayName = \"StyledMultilineSpan\";\n\nexport const StyledTextareaSpan = styled(Typography)`\n ${tw`\n tw-absolute\n tw-inset-0\n tw-border\n tw-border-solid\n tw-rounded-md\n tw-box-border\n tw-w-full`}\n\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n font-variant-numeric: tabular-nums;\n outline-width: 0px;\n outline: none;\n resize: none;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n height: calc(1.5em * 3 + 2px); /* 3 rows height: line-height * 3 + padding */\n min-height: calc(1.5em * 3 + 2px);\n opacity: 0;\n pointer-events: none;\n z-index: 1;\n\n &:focus {\n opacity: 1;\n pointer-events: auto;\n background-color: var(--input-background-color);\n border-color: var(--color-primary);\n outline: none;\n z-index: 3;\n }\n\n &:disabled {\n opacity: 0;\n pointer-events: none;\n }\n\n ${({ invalid }) =>\n invalid &&\n css`\n border-color: var(--red-alert) !important;\n `}\n`;\n\nStyledTextareaSpan.displayName = \"StyledTextareaSpan\";\n"],"mappings":"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"}
|
|
@@ -6,10 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.EditableText = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
10
9
|
var _EditableContent = require("../EditableContent/EditableContent");
|
|
11
10
|
var _Styles = require("../EditableContent/Styles");
|
|
12
|
-
var _Typography = require("../Typography/Typography");
|
|
13
11
|
var _excluded = ["onSave", "onCancel", "value", "inputProps", "allowEmptyString", "multiline", "variant", "weight", "disabled", "invalid", "wrapRef", "children"];
|
|
14
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
13
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -28,45 +26,23 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
|
28
26
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
29
27
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
30
28
|
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; }
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
}, function (_ref) {
|
|
50
|
-
var invalid = _ref.invalid;
|
|
51
|
-
return invalid && (0, _styledComponents.css)(["border-color:var(--red-alert) !important;"]);
|
|
52
|
-
});
|
|
53
|
-
var EditableText = exports.EditableText = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
|
|
54
|
-
var onSave = _ref2.onSave,
|
|
55
|
-
onCancel = _ref2.onCancel,
|
|
56
|
-
value = _ref2.value,
|
|
57
|
-
inputProps = _ref2.inputProps,
|
|
58
|
-
allowEmptyString = _ref2.allowEmptyString,
|
|
59
|
-
_ref2$multiline = _ref2.multiline,
|
|
60
|
-
multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
|
|
61
|
-
_ref2$variant = _ref2.variant,
|
|
62
|
-
variant = _ref2$variant === void 0 ? "Body 2" : _ref2$variant,
|
|
63
|
-
weight = _ref2.weight,
|
|
64
|
-
_ref2$disabled = _ref2.disabled,
|
|
65
|
-
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
|
|
66
|
-
invalid = _ref2.invalid,
|
|
67
|
-
wrapRef = _ref2.wrapRef,
|
|
68
|
-
children = _ref2.children,
|
|
69
|
-
props = _objectWithoutProperties(_ref2, _excluded);
|
|
29
|
+
var EditableText = exports.EditableText = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
30
|
+
var onSave = _ref.onSave,
|
|
31
|
+
onCancel = _ref.onCancel,
|
|
32
|
+
value = _ref.value,
|
|
33
|
+
inputProps = _ref.inputProps,
|
|
34
|
+
allowEmptyString = _ref.allowEmptyString,
|
|
35
|
+
_ref$multiline = _ref.multiline,
|
|
36
|
+
multiline = _ref$multiline === void 0 ? false : _ref$multiline,
|
|
37
|
+
_ref$variant = _ref.variant,
|
|
38
|
+
variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
|
|
39
|
+
weight = _ref.weight,
|
|
40
|
+
_ref$disabled = _ref.disabled,
|
|
41
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
42
|
+
invalid = _ref.invalid,
|
|
43
|
+
wrapRef = _ref.wrapRef,
|
|
44
|
+
children = _ref.children,
|
|
45
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
70
46
|
var _useState = (0, _react.useState)(value),
|
|
71
47
|
_useState2 = _slicedToArray(_useState, 2),
|
|
72
48
|
currentValue = _useState2[0],
|
|
@@ -77,10 +53,6 @@ var EditableText = exports.EditableText = /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
77
53
|
setPrevValue = _useState4[1];
|
|
78
54
|
var escapeRef = (0, _react.useRef)(false);
|
|
79
55
|
var intTextareaRef = (0, _react.useRef)(null);
|
|
80
|
-
var _useState5 = (0, _react.useState)(false),
|
|
81
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
82
|
-
isTextareaFocused = _useState6[0],
|
|
83
|
-
setIsTextareaFocused = _useState6[1];
|
|
84
56
|
(0, _react.useEffect)(function () {
|
|
85
57
|
if (currentValue !== value) {
|
|
86
58
|
setCurrentValue(value);
|
|
@@ -89,7 +61,6 @@ var EditableText = exports.EditableText = /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
89
61
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
90
62
|
}, [value]);
|
|
91
63
|
var handleBlur = (0, _react.useCallback)(function (e) {
|
|
92
|
-
setIsTextareaFocused(false);
|
|
93
64
|
if (escapeRef.current) {
|
|
94
65
|
setCurrentValue(prevValue);
|
|
95
66
|
escapeRef.current = false;
|
|
@@ -107,9 +78,13 @@ var EditableText = exports.EditableText = /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
107
78
|
intTextareaRef.current.scrollLeft = 0;
|
|
108
79
|
}
|
|
109
80
|
}, [allowEmptyString, onSave, prevValue, multiline]);
|
|
110
|
-
var handleFocus = (0, _react.useCallback)(function () {
|
|
111
|
-
|
|
112
|
-
|
|
81
|
+
var handleFocus = (0, _react.useCallback)(function (e) {
|
|
82
|
+
if (multiline) {
|
|
83
|
+
var textarea = e.target;
|
|
84
|
+
var length = textarea.value.length;
|
|
85
|
+
textarea.setSelectionRange(length, length);
|
|
86
|
+
}
|
|
87
|
+
}, [multiline]);
|
|
113
88
|
var handleKeyDown = (0, _react.useCallback)(function (e) {
|
|
114
89
|
if (e.key === "Enter" && !multiline) {
|
|
115
90
|
e.target.blur();
|
|
@@ -126,13 +101,21 @@ var EditableText = exports.EditableText = /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
126
101
|
if (multiline) {
|
|
127
102
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledDiv, _extends({
|
|
128
103
|
ref: wrapRef
|
|
129
|
-
}, props
|
|
104
|
+
}, props, {
|
|
105
|
+
$multiline: multiline
|
|
106
|
+
}), /*#__PURE__*/_react.default.createElement(_Styles.StyledMultilineSpan, {
|
|
130
107
|
variant: variant,
|
|
131
108
|
forwardedAs: "span",
|
|
132
109
|
weight: weight,
|
|
133
|
-
$disabled:
|
|
134
|
-
|
|
135
|
-
|
|
110
|
+
$disabled: disabled,
|
|
111
|
+
invalid: invalid,
|
|
112
|
+
className: "presentation",
|
|
113
|
+
onClick: function onClick() {
|
|
114
|
+
if (!disabled && intTextareaRef.current) {
|
|
115
|
+
intTextareaRef.current.focus();
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}, children ? children : String(currentValue || "").replace(/\n/g, " ")), /*#__PURE__*/_react.default.createElement(_Styles.StyledTextareaSpan, _extends({
|
|
136
119
|
ref: intTextareaRef,
|
|
137
120
|
forwardedAs: "textarea",
|
|
138
121
|
variant: variant,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableText.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_styledComponents","_EditableContent","_Styles","_Typography","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","key","value","_toPropertyKey","configurable","writable","_toPrimitive","String","Symbol","toPrimitive","TypeError","Number","_extends","assign","bind","target","source","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","arr2","l","iterator","f","next","done","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","StyledTextareaSpan","styled","Typography","withConfig","displayName","componentId","_ref","invalid","css","EditableText","exports","forwardRef","_ref2","ref","onSave","onCancel","inputProps","allowEmptyString","_ref2$multiline","multiline","_ref2$variant","variant","weight","_ref2$disabled","disabled","wrapRef","children","props","_useState","useState","_useState2","currentValue","setCurrentValue","_useState3","_useState4","prevValue","setPrevValue","escapeRef","useRef","intTextareaRef","_useState5","_useState6","isTextareaFocused","setIsTextareaFocused","useEffect","handleBlur","useCallback","current","trim","scrollLeft","handleFocus","handleKeyDown","blur","handleChange","createElement","StyledDiv","StyledSpan","forwardedAs","$disabled","className","replace","onFocus","onBlur","onKeyDown","onChange","placeholder","classNames","rows","EditableContent","type"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport classNames from \"classnames\";\nimport styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport {\n EditableContent,\n EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\nimport { StyledDiv, StyledSpan } from \"../EditableContent/Styles\";\nimport { Typography } from \"../Typography/Typography\";\n\nconst StyledTextareaSpan = styled(Typography)`\n ${tw`\n tw-absolute\n tw-inset-0\n tw-border\n tw-border-transparent\n tw-border-solid\n hover:tw-border-theme-700\n focus-within:tw-border-theme-700\n tw-rounded-md\n tw-box-border\n tw-w-full`}\n\n background-color: var(--input-background-color, #ffffff);\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n font-variant-numeric: tabular-nums;\n outline-width: 0px;\n outline: none;\n resize: none;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n height: calc(1.5em * 3 + 2px); /* 3 rows height: line-height * 3 + padding */\n min-height: calc(1.5em * 3 + 2px);\n opacity: 0;\n\n &:focus {\n opacity: 1;\n background-color: var(--input-background-color, #f8f9fa);\n }\n\n &:disabled {\n opacity: 0;\n }\n\n ${({ invalid }) =>\n invalid &&\n css`\n border-color: var(--red-alert) !important;\n `}\n`;\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value?: string | null;\n /** Optional callback called on enter, click outside and tab. */\n onSave?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n /** Optional callback called on input reset. */\n onCancel?: () => void;\n /** If true, setting empty value will save it, instead of revert to previous value. */\n allowEmptyString?: boolean;\n /** If true, shows a textarea instead of input for multiline editing. */\n multiline?: boolean;\n /** Children content to display */\n children?: React.ReactNode;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n (\n {\n onSave,\n onCancel,\n value,\n inputProps,\n allowEmptyString,\n multiline = false,\n variant = \"Body 2\",\n weight,\n disabled = false,\n invalid,\n wrapRef,\n children,\n ...props\n },\n ref\n ) => {\n const [currentValue, setCurrentValue] = useState(value);\n const [prevValue, setPrevValue] = useState(value);\n const escapeRef = useRef(false);\n const intTextareaRef = useRef<HTMLTextAreaElement>(null);\n const [isTextareaFocused, setIsTextareaFocused] = useState(false);\n\n useEffect(() => {\n if (currentValue !== value) {\n setCurrentValue(value);\n setPrevValue(value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n const handleBlur = useCallback(\n (e) => {\n setIsTextareaFocused(false);\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n escapeRef.current = false;\n } else {\n if (\n e.target.value.trim().length > 0 &&\n prevValue !== e.target.value\n ) {\n setPrevValue(e.target.value);\n setCurrentValue(e.target.value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n !allowEmptyString\n ? setCurrentValue(prevValue)\n : typeof onSave === \"function\" &&\n prevValue !== e.target.value &&\n onSave(e);\n }\n }\n // Reset scroll position for textarea\n if (multiline && intTextareaRef?.current) {\n intTextareaRef.current.scrollLeft = 0;\n }\n },\n [allowEmptyString, onSave, prevValue, multiline]\n );\n\n const handleFocus = useCallback(() => {\n setIsTextareaFocused(true);\n }, []);\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\" && !multiline) {\n e.target.blur();\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel();\n }\n },\n [onCancel, multiline]\n );\n\n const handleChange = useCallback((e) => {\n setCurrentValue(e.target.value);\n }, []);\n\n if (multiline) {\n return (\n <StyledDiv ref={wrapRef} {...props}>\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={!isTextareaFocused}\n className=\"presentation\"\n >\n {children\n ? children\n : String(currentValue || \"\").replace(/\\n/g, \" \")}\n </StyledSpan>\n <StyledTextareaSpan\n ref={intTextareaRef}\n forwardedAs=\"textarea\"\n variant={variant}\n weight={weight}\n value={currentValue ?? \"\"}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onChange={handleChange}\n disabled={disabled}\n invalid={invalid}\n data-form-type=\"other\"\n placeholder={inputProps?.placeholder}\n className={classNames(\"c-textarea\", inputProps?.className)}\n rows={3}\n {...inputProps}\n />\n </StyledDiv>\n );\n }\n\n return (\n <EditableContent\n {...props}\n variant={variant}\n weight={weight}\n disabled={disabled}\n invalid={invalid}\n wrapRef={wrapRef}\n ref={ref}\n inputProps={{\n ...inputProps,\n value: currentValue ?? \"\",\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n type: \"text\",\n className: classNames(\"c-input\", inputProps?.className),\n }}\n >\n {children}\n </EditableContent>\n );\n }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EditableText.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_EditableContent","_Styles","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","key","value","_toPropertyKey","configurable","writable","_toPrimitive","String","Symbol","toPrimitive","TypeError","Number","_extends","assign","bind","target","source","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","arr2","l","iterator","f","next","done","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","EditableText","exports","forwardRef","_ref","ref","onSave","onCancel","inputProps","allowEmptyString","_ref$multiline","multiline","_ref$variant","variant","weight","_ref$disabled","disabled","invalid","wrapRef","children","props","_useState","useState","_useState2","currentValue","setCurrentValue","_useState3","_useState4","prevValue","setPrevValue","escapeRef","useRef","intTextareaRef","useEffect","handleBlur","useCallback","current","trim","scrollLeft","handleFocus","textarea","setSelectionRange","handleKeyDown","blur","handleChange","createElement","StyledDiv","$multiline","StyledMultilineSpan","forwardedAs","$disabled","className","onClick","focus","replace","StyledTextareaSpan","onFocus","onBlur","onKeyDown","onChange","placeholder","classNames","rows","EditableContent","type","displayName"],"sources":["../../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport {\n EditableContent,\n EditableContentInterface,\n} from \"../EditableContent/EditableContent\";\nimport {\n StyledDiv,\n StyledMultilineSpan,\n StyledTextareaSpan,\n} from \"../EditableContent/Styles\";\n\nexport interface EditableTextInterface extends EditableContentInterface {\n /** Value to display. */\n value?: string | null;\n /** Optional callback called on enter, click outside and tab. */\n onSave?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n /** Optional callback called on input reset. */\n onCancel?: () => void;\n /** If true, setting empty value will save it, instead of revert to previous value. */\n allowEmptyString?: boolean;\n /** If true, shows a textarea instead of input for multiline editing. */\n multiline?: boolean;\n /** Children content to display */\n children?: React.ReactNode;\n}\n\nexport const EditableText = forwardRef<HTMLDivElement, EditableTextInterface>(\n (\n {\n onSave,\n onCancel,\n value,\n inputProps,\n allowEmptyString,\n multiline = false,\n variant = \"Body 2\",\n weight,\n disabled = false,\n invalid,\n wrapRef,\n children,\n ...props\n },\n ref\n ) => {\n const [currentValue, setCurrentValue] = useState(value);\n const [prevValue, setPrevValue] = useState(value);\n const escapeRef = useRef(false);\n const intTextareaRef = useRef<HTMLTextAreaElement>(null);\n\n useEffect(() => {\n if (currentValue !== value) {\n setCurrentValue(value);\n setPrevValue(value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n const handleBlur = useCallback(\n (e) => {\n if (escapeRef.current) {\n setCurrentValue(prevValue);\n escapeRef.current = false;\n } else {\n if (\n e.target.value.trim().length > 0 &&\n prevValue !== e.target.value\n ) {\n setPrevValue(e.target.value);\n setCurrentValue(e.target.value);\n typeof onSave === \"function\" && onSave(e);\n } else {\n !allowEmptyString\n ? setCurrentValue(prevValue)\n : typeof onSave === \"function\" &&\n prevValue !== e.target.value &&\n onSave(e);\n }\n }\n // Reset scroll position for textarea\n if (multiline && intTextareaRef?.current) {\n intTextareaRef.current.scrollLeft = 0;\n }\n },\n [allowEmptyString, onSave, prevValue, multiline]\n );\n\n const handleFocus = useCallback(\n (e) => {\n if (multiline) {\n const textarea = e.target;\n const length = textarea.value.length;\n textarea.setSelectionRange(length, length);\n }\n },\n [multiline]\n );\n\n const handleKeyDown = useCallback(\n (e) => {\n if (e.key === \"Enter\" && !multiline) {\n e.target.blur();\n }\n if (e.key === \"Escape\") {\n escapeRef.current = true;\n e.target.blur();\n typeof onCancel === \"function\" && onCancel();\n }\n },\n [onCancel, multiline]\n );\n\n const handleChange = useCallback((e) => {\n setCurrentValue(e.target.value);\n }, []);\n\n if (multiline) {\n return (\n <StyledDiv ref={wrapRef} {...props} $multiline={multiline}>\n <StyledMultilineSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n invalid={invalid}\n className=\"presentation\"\n onClick={() => {\n if (!disabled && intTextareaRef.current) {\n intTextareaRef.current.focus();\n }\n }}\n >\n {children\n ? children\n : String(currentValue || \"\").replace(/\\n/g, \" \")}\n </StyledMultilineSpan>\n <StyledTextareaSpan\n ref={intTextareaRef}\n forwardedAs=\"textarea\"\n variant={variant}\n weight={weight}\n value={currentValue ?? \"\"}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onChange={handleChange}\n disabled={disabled}\n invalid={invalid}\n data-form-type=\"other\"\n placeholder={inputProps?.placeholder}\n className={classNames(\"c-textarea\", inputProps?.className)}\n rows={3}\n {...inputProps}\n />\n </StyledDiv>\n );\n }\n\n return (\n <EditableContent\n {...props}\n variant={variant}\n weight={weight}\n disabled={disabled}\n invalid={invalid}\n wrapRef={wrapRef}\n ref={ref}\n inputProps={{\n ...inputProps,\n value: currentValue ?? \"\",\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n onChange: handleChange,\n type: \"text\",\n className: classNames(\"c-input\", inputProps?.className),\n }}\n >\n {children}\n </EditableContent>\n );\n }\n);\n\nEditableText.displayName = \"EditableText\";\n"],"mappings":"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"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
export declare const StyledDiv: import("styled-components").StyledComponent<"div", any, {
|
|
1
|
+
export declare const StyledDiv: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
$multiline?: boolean | undefined;
|
|
3
|
+
}, never>;
|
|
2
4
|
export declare const StyledSpan: import("styled-components").StyledComponent<import("../Typography/Typography").TypographyComponent & {
|
|
3
5
|
displayName?: string | undefined;
|
|
4
6
|
}, any, {
|
|
@@ -7,4 +9,12 @@ export declare const StyledSpan: import("styled-components").StyledComponent<imp
|
|
|
7
9
|
export declare const StyledInput: import("styled-components").StyledComponent<import("../Typography/Typography").TypographyComponent & {
|
|
8
10
|
displayName?: string | undefined;
|
|
9
11
|
}, any, {}, never>;
|
|
12
|
+
export declare const StyledMultilineSpan: import("styled-components").StyledComponent<import("../Typography/Typography").TypographyComponent & {
|
|
13
|
+
displayName?: string | undefined;
|
|
14
|
+
}, any, {
|
|
15
|
+
$disabled?: boolean | undefined;
|
|
16
|
+
}, never>;
|
|
17
|
+
export declare const StyledTextareaSpan: import("styled-components").StyledComponent<import("../Typography/Typography").TypographyComponent & {
|
|
18
|
+
displayName?: string | undefined;
|
|
19
|
+
}, any, {}, never>;
|
|
10
20
|
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/Styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/Styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS;;SAarB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;SAgCtB,CAAC;AAIF,eAAO,MAAM,WAAW;;kBAqCvB,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;;SAc/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;kBA+C9B,CAAC"}
|
|
@@ -5,23 +5,28 @@ import { Typography } from "../Typography/Typography";
|
|
|
5
5
|
export const StyledDiv = styled.div.withConfig({
|
|
6
6
|
displayName: "Styles__StyledDiv",
|
|
7
7
|
componentId: "sc-1wapx2a-0"
|
|
8
|
-
})(["", " ", " ", ""], FontStyle, BoxSizingStyle, {
|
|
8
|
+
})(["", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
|
|
9
9
|
"position": "relative",
|
|
10
10
|
"display": "inline-block",
|
|
11
11
|
"maxWidth": "100%"
|
|
12
|
+
}, _ref => {
|
|
13
|
+
let {
|
|
14
|
+
$multiline
|
|
15
|
+
} = _ref;
|
|
16
|
+
return $multiline && css(["position:relative;display:flex;"]);
|
|
12
17
|
});
|
|
13
18
|
export const StyledSpan = styled(Typography).withConfig({
|
|
14
19
|
displayName: "Styles__StyledSpan",
|
|
15
20
|
componentId: "sc-1wapx2a-1"
|
|
16
|
-
})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " ", " &:empty:before{content:\" \";}"],
|
|
21
|
+
})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;font-variant-numeric:tabular-nums;", " ", " &:empty:before{content:\" \";}"], _ref2 => {
|
|
17
22
|
let {
|
|
18
23
|
$disabled
|
|
19
|
-
} =
|
|
20
|
-
return $disabled && css(["visibility:visible;"]);
|
|
21
|
-
},
|
|
24
|
+
} = _ref2;
|
|
25
|
+
return $disabled && css(["visibility:visible;cursor:default !important;"]);
|
|
26
|
+
}, _ref3 => {
|
|
22
27
|
let {
|
|
23
28
|
invalid
|
|
24
|
-
} =
|
|
29
|
+
} = _ref3;
|
|
25
30
|
return invalid && css(["border:1px solid var(--red-alert);"]);
|
|
26
31
|
});
|
|
27
32
|
StyledSpan.displayName = "StyledSpan";
|
|
@@ -46,11 +51,45 @@ export const StyledInput = styled(Typography).withConfig({
|
|
|
46
51
|
":hover": {
|
|
47
52
|
"borderColor": "var(--color-theme-700)"
|
|
48
53
|
}
|
|
49
|
-
},
|
|
54
|
+
}, _ref4 => {
|
|
50
55
|
let {
|
|
51
56
|
invalid
|
|
52
|
-
} =
|
|
57
|
+
} = _ref4;
|
|
53
58
|
return invalid && css(["border-color:var(--red-alert) !important;"]);
|
|
54
59
|
});
|
|
55
60
|
StyledInput.displayName = "StyledInput";
|
|
61
|
+
export const StyledMultilineSpan = styled(StyledSpan).withConfig({
|
|
62
|
+
displayName: "Styles__StyledMultilineSpan",
|
|
63
|
+
componentId: "sc-1wapx2a-3"
|
|
64
|
+
})(["cursor:", ";z-index:2;width:100%;visibility:visible !important;&:hover{border-color:", ";}"], _ref5 => {
|
|
65
|
+
let {
|
|
66
|
+
$disabled
|
|
67
|
+
} = _ref5;
|
|
68
|
+
return $disabled ? "default" : "text !important";
|
|
69
|
+
}, _ref6 => {
|
|
70
|
+
let {
|
|
71
|
+
invalid,
|
|
72
|
+
$disabled
|
|
73
|
+
} = _ref6;
|
|
74
|
+
return invalid ? "var(--red-alert)" : $disabled ? "transparent" : "var(--border-primary)";
|
|
75
|
+
});
|
|
76
|
+
StyledMultilineSpan.displayName = "StyledMultilineSpan";
|
|
77
|
+
export const StyledTextareaSpan = styled(Typography).withConfig({
|
|
78
|
+
displayName: "Styles__StyledTextareaSpan",
|
|
79
|
+
componentId: "sc-1wapx2a-4"
|
|
80
|
+
})(["", " background-color:var(--input-background-color);border-color:var(--color-theme-500);padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;font-variant-numeric:tabular-nums;outline-width:0px;outline:none;resize:none;white-space:pre-wrap;overflow-wrap:break-word;height:calc(1.5em * 3 + 2px);min-height:calc(1.5em * 3 + 2px);opacity:0;pointer-events:none;z-index:1;&:focus{opacity:1;pointer-events:auto;background-color:var(--input-background-color);border-color:var(--color-primary);outline:none;z-index:3;}&:disabled{opacity:0;pointer-events:none;}", ""], {
|
|
81
|
+
"position": "absolute",
|
|
82
|
+
"inset": "0px",
|
|
83
|
+
"boxSizing": "border-box",
|
|
84
|
+
"width": "100%",
|
|
85
|
+
"borderRadius": "0.375rem",
|
|
86
|
+
"borderWidth": "1px",
|
|
87
|
+
"borderStyle": "solid"
|
|
88
|
+
}, _ref7 => {
|
|
89
|
+
let {
|
|
90
|
+
invalid
|
|
91
|
+
} = _ref7;
|
|
92
|
+
return invalid && css(["border-color:var(--red-alert) !important;"]);
|
|
93
|
+
});
|
|
94
|
+
StyledTextareaSpan.displayName = "StyledTextareaSpan";
|
|
56
95
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","Typography","StyledDiv","div","withConfig","displayName","componentId","StyledSpan","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","Typography","StyledDiv","div","withConfig","displayName","componentId","_ref","$multiline","StyledSpan","_ref2","$disabled","_ref3","invalid","StyledInput","_ref4","StyledMultilineSpan","_ref5","_ref6","StyledTextareaSpan","_ref7"],"sources":["../../../../src/components/EditableContent/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const StyledDiv = styled.div<{ $multiline?: boolean }>`\n ${FontStyle}\n ${BoxSizingStyle}\n\n\n\n ${tw`tw-relative tw-inline-block tw-max-w-full`}\n ${({ $multiline }) =>\n $multiline &&\n css`\n position: relative;\n display: flex;\n `}\n`;\n\nexport const StyledSpan = styled(Typography)<{ $disabled?: boolean }>`\n visibility: hidden;\n display: block;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n position: relative;\n border: 1px solid transparent;\n border-radius: 6px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre;\n font-variant-numeric: tabular-nums;\n\n ${({ $disabled }) =>\n $disabled &&\n css`\n visibility: visible;\n cursor: default !important;\n `}\n\n ${({ invalid }) =>\n invalid &&\n css`\n border: 1px solid var(--red-alert);\n `}\n\n &:empty:before {\n content: \" \";\n }\n`;\n\nStyledSpan.displayName = \"StyledSpan\";\n\nexport const StyledInput = styled(Typography)`\n ${tw`\n tw-absolute\n tw-inset-0\n tw-border\n tw-border-transparent\n tw-border-solid\n hover:tw-border-theme-700\n focus-within:tw-border-theme-700\n tw-rounded-md\n tw-box-border\n tw-overflow-hidden\n tw-whitespace-nowrap\n focus-within:tw-overflow-scroll\n tw-w-full`}\n\n background-color: inherit;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n text-overflow: ellipsis;\n font-variant-numeric: tabular-nums;\n &:focus-whitin {\n text-overflow: clip;\n }\n outline-width: 0px;\n outline: none;\n &:disabled {\n opacity: 0;\n }\n\n ${({ invalid }) =>\n invalid &&\n css`\n border-color: var(--red-alert) !important;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledMultilineSpan = styled(StyledSpan)`\n cursor: ${({ $disabled }) => ($disabled ? \"default\" : \"text !important\")};\n z-index: 2;\n width: 100%;\n visibility: visible !important;\n\n &:hover {\n border-color: ${({ invalid, $disabled }) =>\n invalid\n ? \"var(--red-alert)\"\n : $disabled\n ? \"transparent\"\n : \"var(--border-primary)\"};\n }\n`;\n\nStyledMultilineSpan.displayName = \"StyledMultilineSpan\";\n\nexport const StyledTextareaSpan = styled(Typography)`\n ${tw`\n tw-absolute\n tw-inset-0\n tw-border\n tw-border-solid\n tw-rounded-md\n tw-box-border\n tw-w-full`}\n\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n font-variant-numeric: tabular-nums;\n outline-width: 0px;\n outline: none;\n resize: none;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n height: calc(1.5em * 3 + 2px); /* 3 rows height: line-height * 3 + padding */\n min-height: calc(1.5em * 3 + 2px);\n opacity: 0;\n pointer-events: none;\n z-index: 1;\n\n &:focus {\n opacity: 1;\n pointer-events: auto;\n background-color: var(--input-background-color);\n border-color: var(--color-primary);\n outline: none;\n z-index: 3;\n }\n\n &:disabled {\n opacity: 0;\n pointer-events: none;\n }\n\n ${({ invalid }) =>\n invalid &&\n css`\n border-color: var(--red-alert) !important;\n `}\n`;\n\nStyledTextareaSpan.displayName = \"StyledTextareaSpan\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,UAAU,QAAQ,0BAA0B;AAErD,OAAO,MAAMC,SAAS,GAAGL,MAAM,CAACM,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4BAC/BN,SAAS,EACTD,cAAc,EAIZ;EAAA;EAAA;EAAA;AAA0C,CAAC,EAC7CQ,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OACfC,UAAU,IACVV,GAAG,qCAGF;AAAA,EACJ;AAED,OAAO,MAAMW,UAAU,GAAGZ,MAAM,CAACI,UAAU,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gUAgBxCI,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OACdC,SAAS,IACTb,GAAG,mDAGF;AAAA,GAEDc,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OACZC,OAAO,IACPf,GAAG,wCAEF;AAAA,EAKJ;AAEDW,UAAU,CAACJ,WAAW,GAAG,YAAY;AAErC,OAAO,MAAMS,WAAW,GAAGjB,MAAM,CAACI,UAAU,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kQACvC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAaO,CAAC,EAkBVS,KAAA;EAAA,IAAC;IAAEF;EAAQ,CAAC,GAAAE,KAAA;EAAA,OACZF,OAAO,IACPf,GAAG,+CAEF;AAAA,EACJ;AAEDgB,WAAW,CAACT,WAAW,GAAG,aAAa;AAEvC,OAAO,MAAMW,mBAAmB,GAAGnB,MAAM,CAACY,UAAU,CAAC,CAAAL,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mGACzCW,KAAA;EAAA,IAAC;IAAEN;EAAU,CAAC,GAAAM,KAAA;EAAA,OAAMN,SAAS,GAAG,SAAS,GAAG,iBAAiB;AAAA,CAAC,EAMtDO,KAAA;EAAA,IAAC;IAAEL,OAAO;IAAEF;EAAU,CAAC,GAAAO,KAAA;EAAA,OACrCL,OAAO,GACH,kBAAkB,GAClBF,SAAS,GACT,aAAa,GACb,uBAAuB;AAAA,EAEhC;AAEDK,mBAAmB,CAACX,WAAW,GAAG,qBAAqB;AAEvD,OAAO,MAAMc,kBAAkB,GAAGtB,MAAM,CAACI,UAAU,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qkBAC9C;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAOO,CAAC,EAkCVc,KAAA;EAAA,IAAC;IAAEP;EAAQ,CAAC,GAAAO,KAAA;EAAA,OACZP,OAAO,IACPf,GAAG,+CAEF;AAAA,EACJ;AAEDqB,kBAAkB,CAACd,WAAW,GAAG,oBAAoB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EAMZ,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EAMZ,MAAM,OAAO,CAAC;AAIf,OAAO,EAEL,wBAAwB,EACzB,MAAM,oCAAoC,CAAC;AAO5C,MAAM,WAAW,qBAAsB,SAAQ,wBAAwB;IACrE,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,gEAAgE;IAChE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC1E,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,sFAAsF;IACtF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,8FA2JxB,CAAC"}
|
|
@@ -1,35 +1,9 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
|
|
3
3
|
import classNames from "classnames";
|
|
4
|
-
import styled, { css } from "styled-components";
|
|
5
4
|
import { EditableContent } from "../EditableContent/EditableContent";
|
|
6
|
-
import { StyledDiv,
|
|
7
|
-
|
|
8
|
-
const StyledTextareaSpan = styled(Typography).withConfig({
|
|
9
|
-
displayName: "EditableText__StyledTextareaSpan",
|
|
10
|
-
componentId: "sc-j2ewzm-0"
|
|
11
|
-
})(["", " background-color:var(--input-background-color,#ffffff);padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;font-variant-numeric:tabular-nums;outline-width:0px;outline:none;resize:none;white-space:pre-wrap;overflow-wrap:break-word;height:calc(1.5em * 3 + 2px);min-height:calc(1.5em * 3 + 2px);opacity:0;&:focus{opacity:1;background-color:var(--input-background-color,#f8f9fa);}&:disabled{opacity:0;}", ""], {
|
|
12
|
-
"position": "absolute",
|
|
13
|
-
"inset": "0px",
|
|
14
|
-
"boxSizing": "border-box",
|
|
15
|
-
"width": "100%",
|
|
16
|
-
"borderRadius": "0.375rem",
|
|
17
|
-
"borderWidth": "1px",
|
|
18
|
-
"borderStyle": "solid",
|
|
19
|
-
"borderColor": "transparent",
|
|
20
|
-
":focus-within": {
|
|
21
|
-
"borderColor": "var(--color-theme-700)"
|
|
22
|
-
},
|
|
23
|
-
":hover": {
|
|
24
|
-
"borderColor": "var(--color-theme-700)"
|
|
25
|
-
}
|
|
26
|
-
}, _ref => {
|
|
27
|
-
let {
|
|
28
|
-
invalid
|
|
29
|
-
} = _ref;
|
|
30
|
-
return invalid && css(["border-color:var(--red-alert) !important;"]);
|
|
31
|
-
});
|
|
32
|
-
export const EditableText = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
5
|
+
import { StyledDiv, StyledMultilineSpan, StyledTextareaSpan } from "../EditableContent/Styles";
|
|
6
|
+
export const EditableText = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
33
7
|
let {
|
|
34
8
|
onSave,
|
|
35
9
|
onCancel,
|
|
@@ -44,12 +18,11 @@ export const EditableText = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
|
44
18
|
wrapRef,
|
|
45
19
|
children,
|
|
46
20
|
...props
|
|
47
|
-
} =
|
|
21
|
+
} = _ref;
|
|
48
22
|
const [currentValue, setCurrentValue] = useState(value);
|
|
49
23
|
const [prevValue, setPrevValue] = useState(value);
|
|
50
24
|
const escapeRef = useRef(false);
|
|
51
25
|
const intTextareaRef = useRef(null);
|
|
52
|
-
const [isTextareaFocused, setIsTextareaFocused] = useState(false);
|
|
53
26
|
useEffect(() => {
|
|
54
27
|
if (currentValue !== value) {
|
|
55
28
|
setCurrentValue(value);
|
|
@@ -58,7 +31,6 @@ export const EditableText = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
|
58
31
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
59
32
|
}, [value]);
|
|
60
33
|
const handleBlur = useCallback(e => {
|
|
61
|
-
setIsTextareaFocused(false);
|
|
62
34
|
if (escapeRef.current) {
|
|
63
35
|
setCurrentValue(prevValue);
|
|
64
36
|
escapeRef.current = false;
|
|
@@ -76,9 +48,13 @@ export const EditableText = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
|
76
48
|
intTextareaRef.current.scrollLeft = 0;
|
|
77
49
|
}
|
|
78
50
|
}, [allowEmptyString, onSave, prevValue, multiline]);
|
|
79
|
-
const handleFocus = useCallback(
|
|
80
|
-
|
|
81
|
-
|
|
51
|
+
const handleFocus = useCallback(e => {
|
|
52
|
+
if (multiline) {
|
|
53
|
+
const textarea = e.target;
|
|
54
|
+
const length = textarea.value.length;
|
|
55
|
+
textarea.setSelectionRange(length, length);
|
|
56
|
+
}
|
|
57
|
+
}, [multiline]);
|
|
82
58
|
const handleKeyDown = useCallback(e => {
|
|
83
59
|
if (e.key === "Enter" && !multiline) {
|
|
84
60
|
e.target.blur();
|
|
@@ -95,12 +71,20 @@ export const EditableText = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
|
95
71
|
if (multiline) {
|
|
96
72
|
return /*#__PURE__*/React.createElement(StyledDiv, _extends({
|
|
97
73
|
ref: wrapRef
|
|
98
|
-
}, props
|
|
74
|
+
}, props, {
|
|
75
|
+
$multiline: multiline
|
|
76
|
+
}), /*#__PURE__*/React.createElement(StyledMultilineSpan, {
|
|
99
77
|
variant: variant,
|
|
100
78
|
forwardedAs: "span",
|
|
101
79
|
weight: weight,
|
|
102
|
-
$disabled:
|
|
103
|
-
|
|
80
|
+
$disabled: disabled,
|
|
81
|
+
invalid: invalid,
|
|
82
|
+
className: "presentation",
|
|
83
|
+
onClick: () => {
|
|
84
|
+
if (!disabled && intTextareaRef.current) {
|
|
85
|
+
intTextareaRef.current.focus();
|
|
86
|
+
}
|
|
87
|
+
}
|
|
104
88
|
}, children ? children : String(currentValue || "").replace(/\n/g, " ")), /*#__PURE__*/React.createElement(StyledTextareaSpan, _extends({
|
|
105
89
|
ref: intTextareaRef,
|
|
106
90
|
forwardedAs: "textarea",
|