@instructure/ui-editable 8.33.2-snapshot-0 → 8.33.2
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/CHANGELOG.md +1 -5
- package/es/Editable/index.js +12 -42
- package/es/Editable/props.js +1 -0
- package/es/InPlaceEdit/index.js +22 -40
- package/es/InPlaceEdit/props.js +1 -0
- package/es/InPlaceEdit/styles.js +1 -4
- package/es/index.js +1 -0
- package/lib/Editable/index.js +12 -47
- package/lib/Editable/props.js +1 -3
- package/lib/InPlaceEdit/index.js +22 -52
- package/lib/InPlaceEdit/props.js +1 -3
- package/lib/InPlaceEdit/styles.js +1 -5
- package/lib/index.js +0 -2
- package/package.json +13 -13
- package/tsconfig.build.tsbuildinfo +1 -1
package/lib/InPlaceEdit/index.js
CHANGED
|
@@ -1,41 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = exports.InPlaceEdit = void 0;
|
|
9
|
-
|
|
10
8
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
|
|
12
9
|
var _react = require("react");
|
|
13
|
-
|
|
14
10
|
var _Flex = require("@instructure/ui-flex/lib/Flex");
|
|
15
|
-
|
|
16
11
|
var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
|
|
17
|
-
|
|
18
12
|
var _IconEditLine = require("@instructure/ui-icons/lib/IconEditLine.js");
|
|
19
|
-
|
|
20
13
|
var _console = require("@instructure/console");
|
|
21
|
-
|
|
22
14
|
var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
|
|
23
|
-
|
|
24
15
|
var _emotion = require("@instructure/emotion");
|
|
25
|
-
|
|
26
16
|
var _View = require("@instructure/ui-view/lib/View");
|
|
27
|
-
|
|
28
17
|
var _Editable = require("../Editable");
|
|
29
|
-
|
|
30
18
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
31
|
-
|
|
32
19
|
var _props = require("./props");
|
|
33
|
-
|
|
34
20
|
const _excluded = ["buttonRef"],
|
|
35
|
-
|
|
36
|
-
|
|
21
|
+
_excluded2 = ["isVisible", "readOnly", "label"];
|
|
37
22
|
var _dec, _class, _class2;
|
|
38
|
-
|
|
39
23
|
/**
|
|
40
24
|
---
|
|
41
25
|
category: components
|
|
@@ -47,20 +31,17 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
|
|
|
47
31
|
super(props);
|
|
48
32
|
this.ref = null;
|
|
49
33
|
this._editButtonRef = null;
|
|
50
|
-
|
|
51
34
|
this.handleRef = el => {
|
|
52
35
|
this.ref = el;
|
|
53
36
|
};
|
|
54
|
-
|
|
55
37
|
this.handleEditButtonRef = el => {
|
|
56
38
|
this._editButtonRef = el;
|
|
57
39
|
};
|
|
58
|
-
|
|
59
40
|
this.renderAll = _ref => {
|
|
60
41
|
let getContainerProps = _ref.getContainerProps,
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
42
|
+
getViewerProps = _ref.getViewerProps,
|
|
43
|
+
getEditorProps = _ref.getEditorProps,
|
|
44
|
+
getEditButtonProps = _ref.getEditButtonProps;
|
|
64
45
|
const flexDir = this.props.editButtonPlacement === 'start' ? 'row-reverse' : 'row';
|
|
65
46
|
const justifyItems = flexDir === 'row-reverse' ? 'end' : 'start';
|
|
66
47
|
const buttonMargin = this.props.editButtonPlacement === 'start' ? '0 xx-small 0 0' : '0 0 0 xx-small';
|
|
@@ -75,32 +56,25 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
|
|
|
75
56
|
margin: buttonMargin
|
|
76
57
|
}, this.renderEditButton(getEditButtonProps())));
|
|
77
58
|
};
|
|
78
|
-
|
|
79
59
|
(0, _console.logWarn)(props.readOnly ? props.mode === 'view' : true, '[InPlaceEdit] When readOnly is true, mode is forced to "view"');
|
|
80
60
|
}
|
|
81
|
-
|
|
82
61
|
componentDidMount() {
|
|
83
62
|
var _this$props$makeStyle, _this$props;
|
|
84
|
-
|
|
85
63
|
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
86
64
|
}
|
|
87
|
-
|
|
88
65
|
componentDidUpdate() {
|
|
89
66
|
var _this$props$makeStyle2, _this$props2;
|
|
90
|
-
|
|
91
67
|
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
92
68
|
}
|
|
93
|
-
|
|
94
69
|
renderEditor(_ref2) {
|
|
95
70
|
var _this$props$styles;
|
|
96
|
-
|
|
97
71
|
let mode = _ref2.mode,
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
72
|
+
onBlur = _ref2.onBlur,
|
|
73
|
+
editorRef = _ref2.editorRef,
|
|
74
|
+
readOnly = _ref2.readOnly;
|
|
101
75
|
const _this$props3 = this.props,
|
|
102
|
-
|
|
103
|
-
|
|
76
|
+
showFocusRing = _this$props3.showFocusRing,
|
|
77
|
+
renderEditor = _this$props3.renderEditor;
|
|
104
78
|
const isEditMode = !readOnly && mode === 'edit';
|
|
105
79
|
return isEditMode ? (0, _emotion.jsx)(_View.View, {
|
|
106
80
|
as: "span",
|
|
@@ -115,31 +89,30 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
|
|
|
115
89
|
editorRef
|
|
116
90
|
})) : null;
|
|
117
91
|
}
|
|
118
|
-
|
|
119
92
|
renderViewer(_ref3) {
|
|
120
93
|
let readOnly = _ref3.readOnly,
|
|
121
|
-
|
|
94
|
+
mode = _ref3.mode;
|
|
122
95
|
return readOnly || mode === 'view' ? this.props.renderViewer() : null;
|
|
123
96
|
}
|
|
124
|
-
|
|
125
97
|
renderEditButton(_ref4) {
|
|
126
98
|
let buttonRef = _ref4.buttonRef,
|
|
127
|
-
|
|
99
|
+
rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
|
|
128
100
|
return this.props.renderEditButton({
|
|
129
101
|
elementRef: (0, _createChainedFunction.createChainedFunction)(this.handleEditButtonRef, buttonRef),
|
|
130
102
|
...rest
|
|
131
103
|
});
|
|
132
|
-
}
|
|
133
|
-
// the margin makes room for the focus ring
|
|
104
|
+
}
|
|
134
105
|
|
|
106
|
+
// Render a default edit button, an icon button with the edit icon
|
|
107
|
+
// the margin makes room for the focus ring
|
|
135
108
|
|
|
136
109
|
render() {
|
|
137
110
|
const _this$props4 = this.props,
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
111
|
+
mode = _this$props4.mode,
|
|
112
|
+
value = _this$props4.value,
|
|
113
|
+
onChange = _this$props4.onChange,
|
|
114
|
+
onChangeMode = _this$props4.onChangeMode,
|
|
115
|
+
readOnly = _this$props4.readOnly;
|
|
143
116
|
return (0, _emotion.jsx)(_Editable.Editable, {
|
|
144
117
|
mode: mode,
|
|
145
118
|
onChangeMode: onChangeMode,
|
|
@@ -150,7 +123,6 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
|
|
|
150
123
|
elementRef: this.handleRef
|
|
151
124
|
});
|
|
152
125
|
}
|
|
153
|
-
|
|
154
126
|
}, _class2.displayName = "InPlaceEdit", _class2.componentId = 'InPlaceEdit', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
|
|
155
127
|
readOnly: false,
|
|
156
128
|
showFocusRing: true,
|
|
@@ -158,14 +130,12 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
|
|
|
158
130
|
editButtonPlacement: 'end'
|
|
159
131
|
}, _class2.renderDefaultEditButton = _ref5 => {
|
|
160
132
|
let isVisible = _ref5.isVisible,
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
133
|
+
readOnly = _ref5.readOnly,
|
|
134
|
+
label = _ref5.label,
|
|
135
|
+
buttonProps = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
|
|
165
136
|
if (readOnly) {
|
|
166
137
|
return null;
|
|
167
138
|
}
|
|
168
|
-
|
|
169
139
|
return (0, _emotion.jsx)(_IconButton.IconButton, Object.assign({
|
|
170
140
|
size: "small",
|
|
171
141
|
screenReaderLabel: label,
|
package/lib/InPlaceEdit/props.js
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
/*
|
|
13
10
|
* The MIT License (MIT)
|
|
14
11
|
*
|
|
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
32
29
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
33
30
|
* SOFTWARE.
|
|
34
31
|
*/
|
|
32
|
+
|
|
35
33
|
const propTypes = {
|
|
36
34
|
renderViewer: _propTypes.default.func.isRequired,
|
|
37
35
|
renderEditor: _propTypes.default.func.isRequired,
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
/*
|
|
9
8
|
* The MIT License (MIT)
|
|
10
9
|
*
|
|
@@ -49,9 +48,7 @@ const generateStyle = () => {
|
|
|
49
48
|
overflow: 'visible',
|
|
50
49
|
direction: 'inherit',
|
|
51
50
|
margin: 0,
|
|
52
|
-
textDecoration: 'none'
|
|
53
|
-
/* for links styled as buttons */
|
|
54
|
-
,
|
|
51
|
+
textDecoration: 'none' /* for links styled as buttons */,
|
|
55
52
|
textAlign: 'inherit',
|
|
56
53
|
userSelect: 'none',
|
|
57
54
|
touchAction: 'manipulation',
|
|
@@ -61,6 +58,5 @@ const generateStyle = () => {
|
|
|
61
58
|
}
|
|
62
59
|
};
|
|
63
60
|
};
|
|
64
|
-
|
|
65
61
|
var _default = generateStyle;
|
|
66
62
|
exports.default = _default;
|
package/lib/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-editable",
|
|
3
|
-
"version": "8.33.2
|
|
3
|
+
"version": "8.33.2",
|
|
4
4
|
"description": "A UI component library made by Instructure Inc.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -23,21 +23,21 @@
|
|
|
23
23
|
},
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@instructure/ui-babel-preset": "8.33.2
|
|
27
|
-
"@instructure/ui-test-utils": "8.33.2
|
|
26
|
+
"@instructure/ui-babel-preset": "8.33.2",
|
|
27
|
+
"@instructure/ui-test-utils": "8.33.2"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@babel/runtime": "^7.13.10",
|
|
31
|
-
"@instructure/console": "8.33.2
|
|
32
|
-
"@instructure/emotion": "8.33.2
|
|
33
|
-
"@instructure/ui-a11y-content": "8.33.2
|
|
34
|
-
"@instructure/ui-buttons": "8.33.2
|
|
35
|
-
"@instructure/ui-dom-utils": "8.33.2
|
|
36
|
-
"@instructure/ui-flex": "8.33.2
|
|
37
|
-
"@instructure/ui-focusable": "8.33.2
|
|
38
|
-
"@instructure/ui-icons": "8.33.2
|
|
39
|
-
"@instructure/ui-utils": "8.33.2
|
|
40
|
-
"@instructure/ui-view": "8.33.2
|
|
31
|
+
"@instructure/console": "8.33.2",
|
|
32
|
+
"@instructure/emotion": "8.33.2",
|
|
33
|
+
"@instructure/ui-a11y-content": "8.33.2",
|
|
34
|
+
"@instructure/ui-buttons": "8.33.2",
|
|
35
|
+
"@instructure/ui-dom-utils": "8.33.2",
|
|
36
|
+
"@instructure/ui-flex": "8.33.2",
|
|
37
|
+
"@instructure/ui-focusable": "8.33.2",
|
|
38
|
+
"@instructure/ui-icons": "8.33.2",
|
|
39
|
+
"@instructure/ui-utils": "8.33.2",
|
|
40
|
+
"@instructure/ui-view": "8.33.2",
|
|
41
41
|
"prop-types": "^15"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|