@instructure/ui-editable 8.12.1-snapshot.7 → 8.13.1-snapshot.9
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 +4 -0
- package/es/Editable/index.js +23 -17
- package/es/InPlaceEdit/index.js +27 -26
- package/lib/Editable/index.js +24 -18
- package/lib/Editable/props.js +1 -1
- package/lib/InPlaceEdit/index.js +28 -27
- package/lib/InPlaceEdit/props.js +1 -1
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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
|
+
# [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-editable
|
|
9
|
+
|
|
6
10
|
# [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @instructure/ui-editable
|
package/es/Editable/index.js
CHANGED
|
@@ -35,7 +35,10 @@ experimental: true
|
|
|
35
35
|
**/
|
|
36
36
|
class Editable extends Component {
|
|
37
37
|
constructor(_props) {
|
|
38
|
+
var _this;
|
|
39
|
+
|
|
38
40
|
super(_props);
|
|
41
|
+
_this = this;
|
|
39
42
|
this.state = {
|
|
40
43
|
showModeToggle: false,
|
|
41
44
|
valueOnEdit: null // the value when mode flips from view -> edit
|
|
@@ -108,25 +111,27 @@ class Editable extends Component {
|
|
|
108
111
|
}
|
|
109
112
|
};
|
|
110
113
|
|
|
111
|
-
this.getContainerProps = (
|
|
112
|
-
|
|
114
|
+
this.getContainerProps = function () {
|
|
115
|
+
let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
116
|
+
const _this$props = _this.props,
|
|
113
117
|
mode = _this$props.mode,
|
|
114
118
|
readOnly = _this$props.readOnly;
|
|
115
119
|
return {
|
|
116
|
-
onMouseOver:
|
|
117
|
-
onMouseOut:
|
|
118
|
-
onMouseDown: mode !== 'edit' ?
|
|
119
|
-
onKeyUp: mode === 'edit' ?
|
|
120
|
+
onMouseOver: _this.handleViewMouseOver,
|
|
121
|
+
onMouseOut: _this.handleViewMouseOut,
|
|
122
|
+
onMouseDown: mode !== 'edit' ? _this.handleViewClick : null,
|
|
123
|
+
onKeyUp: mode === 'edit' ? _this.handleEditESC : null,
|
|
120
124
|
readOnly,
|
|
121
125
|
...props,
|
|
122
|
-
ref:
|
|
126
|
+
ref: _this.handleContainerRef
|
|
123
127
|
};
|
|
124
128
|
};
|
|
125
129
|
|
|
126
|
-
this.getViewerProps = (
|
|
130
|
+
this.getViewerProps = function () {
|
|
131
|
+
let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
127
132
|
return {
|
|
128
|
-
mode:
|
|
129
|
-
readOnly:
|
|
133
|
+
mode: _this.props.mode,
|
|
134
|
+
readOnly: _this.props.readOnly,
|
|
130
135
|
...props
|
|
131
136
|
};
|
|
132
137
|
};
|
|
@@ -143,16 +148,17 @@ class Editable extends Component {
|
|
|
143
148
|
};
|
|
144
149
|
};
|
|
145
150
|
|
|
146
|
-
this.getEditButtonProps = (
|
|
151
|
+
this.getEditButtonProps = function () {
|
|
152
|
+
let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
147
153
|
return {
|
|
148
|
-
onClick:
|
|
149
|
-
onFocus:
|
|
150
|
-
onBlur:
|
|
151
|
-
isVisible:
|
|
154
|
+
onClick: _this.handleEditButtonClick,
|
|
155
|
+
onFocus: _this.handleEditButtonFocus,
|
|
156
|
+
onBlur: _this.handleEditButtonBlur,
|
|
157
|
+
isVisible: _this.state.showModeToggle,
|
|
152
158
|
buttonRef: el => {
|
|
153
|
-
|
|
159
|
+
_this._editButtonRef = el;
|
|
154
160
|
},
|
|
155
|
-
readOnly:
|
|
161
|
+
readOnly: _this.props.readOnly,
|
|
156
162
|
...props
|
|
157
163
|
};
|
|
158
164
|
};
|
package/es/InPlaceEdit/index.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
|
+
const _excluded = ["buttonRef"],
|
|
3
|
+
_excluded2 = ["isVisible", "readOnly", "label"];
|
|
4
|
+
|
|
1
5
|
var _dec, _class, _class2, _temp;
|
|
2
6
|
|
|
3
7
|
/*
|
|
@@ -55,12 +59,11 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp =
|
|
|
55
59
|
this._editButtonRef = el;
|
|
56
60
|
};
|
|
57
61
|
|
|
58
|
-
this.renderAll =
|
|
59
|
-
getContainerProps,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}) => {
|
|
62
|
+
this.renderAll = _ref => {
|
|
63
|
+
let getContainerProps = _ref.getContainerProps,
|
|
64
|
+
getViewerProps = _ref.getViewerProps,
|
|
65
|
+
getEditorProps = _ref.getEditorProps,
|
|
66
|
+
getEditButtonProps = _ref.getEditButtonProps;
|
|
64
67
|
const flexDir = this.props.editButtonPlacement === 'start' ? 'row-reverse' : 'row';
|
|
65
68
|
const justifyItems = flexDir === 'row-reverse' ? 'end' : 'start';
|
|
66
69
|
const buttonMargin = this.props.editButtonPlacement === 'start' ? '0 xx-small 0 0' : '0 0 0 xx-small';
|
|
@@ -87,14 +90,13 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp =
|
|
|
87
90
|
this.props.makeStyles();
|
|
88
91
|
}
|
|
89
92
|
|
|
90
|
-
renderEditor({
|
|
91
|
-
mode,
|
|
92
|
-
onBlur,
|
|
93
|
-
editorRef,
|
|
94
|
-
readOnly
|
|
95
|
-
}) {
|
|
93
|
+
renderEditor(_ref2) {
|
|
96
94
|
var _this$props$styles;
|
|
97
95
|
|
|
96
|
+
let mode = _ref2.mode,
|
|
97
|
+
onBlur = _ref2.onBlur,
|
|
98
|
+
editorRef = _ref2.editorRef,
|
|
99
|
+
readOnly = _ref2.readOnly;
|
|
98
100
|
const _this$props = this.props,
|
|
99
101
|
showFocusRing = _this$props.showFocusRing,
|
|
100
102
|
renderEditor = _this$props.renderEditor;
|
|
@@ -113,17 +115,16 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp =
|
|
|
113
115
|
})) : null;
|
|
114
116
|
}
|
|
115
117
|
|
|
116
|
-
renderViewer({
|
|
117
|
-
readOnly,
|
|
118
|
-
|
|
119
|
-
}) {
|
|
118
|
+
renderViewer(_ref3) {
|
|
119
|
+
let readOnly = _ref3.readOnly,
|
|
120
|
+
mode = _ref3.mode;
|
|
120
121
|
return readOnly || mode === 'view' ? this.props.renderViewer() : null;
|
|
121
122
|
}
|
|
122
123
|
|
|
123
|
-
renderEditButton({
|
|
124
|
-
buttonRef,
|
|
125
|
-
|
|
126
|
-
|
|
124
|
+
renderEditButton(_ref4) {
|
|
125
|
+
let buttonRef = _ref4.buttonRef,
|
|
126
|
+
rest = _objectWithoutProperties(_ref4, _excluded);
|
|
127
|
+
|
|
127
128
|
return this.props.renderEditButton({
|
|
128
129
|
elementRef: createChainedFunction(this.handleEditButtonRef, buttonRef),
|
|
129
130
|
...rest
|
|
@@ -155,12 +156,12 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp =
|
|
|
155
156
|
showFocusRing: true,
|
|
156
157
|
inline: true,
|
|
157
158
|
editButtonPlacement: 'end'
|
|
158
|
-
}, _class2.renderDefaultEditButton =
|
|
159
|
-
isVisible,
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
159
|
+
}, _class2.renderDefaultEditButton = _ref5 => {
|
|
160
|
+
let isVisible = _ref5.isVisible,
|
|
161
|
+
readOnly = _ref5.readOnly,
|
|
162
|
+
label = _ref5.label,
|
|
163
|
+
buttonProps = _objectWithoutProperties(_ref5, _excluded2);
|
|
164
|
+
|
|
164
165
|
if (readOnly) {
|
|
165
166
|
return null;
|
|
166
167
|
}
|
package/lib/Editable/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.Editable = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
|
|
@@ -47,7 +47,10 @@ experimental: true
|
|
|
47
47
|
**/
|
|
48
48
|
class Editable extends _react.Component {
|
|
49
49
|
constructor(_props) {
|
|
50
|
+
var _this;
|
|
51
|
+
|
|
50
52
|
super(_props);
|
|
53
|
+
_this = this;
|
|
51
54
|
this.state = {
|
|
52
55
|
showModeToggle: false,
|
|
53
56
|
valueOnEdit: null // the value when mode flips from view -> edit
|
|
@@ -120,25 +123,27 @@ class Editable extends _react.Component {
|
|
|
120
123
|
}
|
|
121
124
|
};
|
|
122
125
|
|
|
123
|
-
this.getContainerProps = (
|
|
124
|
-
|
|
126
|
+
this.getContainerProps = function () {
|
|
127
|
+
let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
128
|
+
const _this$props = _this.props,
|
|
125
129
|
mode = _this$props.mode,
|
|
126
130
|
readOnly = _this$props.readOnly;
|
|
127
131
|
return {
|
|
128
|
-
onMouseOver:
|
|
129
|
-
onMouseOut:
|
|
130
|
-
onMouseDown: mode !== 'edit' ?
|
|
131
|
-
onKeyUp: mode === 'edit' ?
|
|
132
|
+
onMouseOver: _this.handleViewMouseOver,
|
|
133
|
+
onMouseOut: _this.handleViewMouseOut,
|
|
134
|
+
onMouseDown: mode !== 'edit' ? _this.handleViewClick : null,
|
|
135
|
+
onKeyUp: mode === 'edit' ? _this.handleEditESC : null,
|
|
132
136
|
readOnly,
|
|
133
137
|
...props,
|
|
134
|
-
ref:
|
|
138
|
+
ref: _this.handleContainerRef
|
|
135
139
|
};
|
|
136
140
|
};
|
|
137
141
|
|
|
138
|
-
this.getViewerProps = (
|
|
142
|
+
this.getViewerProps = function () {
|
|
143
|
+
let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
139
144
|
return {
|
|
140
|
-
mode:
|
|
141
|
-
readOnly:
|
|
145
|
+
mode: _this.props.mode,
|
|
146
|
+
readOnly: _this.props.readOnly,
|
|
142
147
|
...props
|
|
143
148
|
};
|
|
144
149
|
};
|
|
@@ -155,16 +160,17 @@ class Editable extends _react.Component {
|
|
|
155
160
|
};
|
|
156
161
|
};
|
|
157
162
|
|
|
158
|
-
this.getEditButtonProps = (
|
|
163
|
+
this.getEditButtonProps = function () {
|
|
164
|
+
let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
|
|
159
165
|
return {
|
|
160
|
-
onClick:
|
|
161
|
-
onFocus:
|
|
162
|
-
onBlur:
|
|
163
|
-
isVisible:
|
|
166
|
+
onClick: _this.handleEditButtonClick,
|
|
167
|
+
onFocus: _this.handleEditButtonFocus,
|
|
168
|
+
onBlur: _this.handleEditButtonBlur,
|
|
169
|
+
isVisible: _this.state.showModeToggle,
|
|
164
170
|
buttonRef: el => {
|
|
165
|
-
|
|
171
|
+
_this._editButtonRef = el;
|
|
166
172
|
},
|
|
167
|
-
readOnly:
|
|
173
|
+
readOnly: _this.props.readOnly,
|
|
168
174
|
...props
|
|
169
175
|
};
|
|
170
176
|
};
|
package/lib/Editable/props.js
CHANGED
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.propTypes = exports.allowedProps = void 0;
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
package/lib/InPlaceEdit/index.js
CHANGED
|
@@ -5,7 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.default = exports.InPlaceEdit = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
9
11
|
|
|
10
12
|
var _react = require("react");
|
|
11
13
|
|
|
@@ -29,6 +31,9 @@ var _styles = _interopRequireDefault(require("./styles"));
|
|
|
29
31
|
|
|
30
32
|
var _props = require("./props");
|
|
31
33
|
|
|
34
|
+
const _excluded = ["buttonRef"],
|
|
35
|
+
_excluded2 = ["isVisible", "readOnly", "label"];
|
|
36
|
+
|
|
32
37
|
var _dec, _class, _class2, _temp;
|
|
33
38
|
|
|
34
39
|
/**
|
|
@@ -49,12 +54,11 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
|
|
|
49
54
|
this._editButtonRef = el;
|
|
50
55
|
};
|
|
51
56
|
|
|
52
|
-
this.renderAll =
|
|
53
|
-
getContainerProps,
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}) => {
|
|
57
|
+
this.renderAll = _ref => {
|
|
58
|
+
let getContainerProps = _ref.getContainerProps,
|
|
59
|
+
getViewerProps = _ref.getViewerProps,
|
|
60
|
+
getEditorProps = _ref.getEditorProps,
|
|
61
|
+
getEditButtonProps = _ref.getEditButtonProps;
|
|
58
62
|
const flexDir = this.props.editButtonPlacement === 'start' ? 'row-reverse' : 'row';
|
|
59
63
|
const justifyItems = flexDir === 'row-reverse' ? 'end' : 'start';
|
|
60
64
|
const buttonMargin = this.props.editButtonPlacement === 'start' ? '0 xx-small 0 0' : '0 0 0 xx-small';
|
|
@@ -81,14 +85,13 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
|
|
|
81
85
|
this.props.makeStyles();
|
|
82
86
|
}
|
|
83
87
|
|
|
84
|
-
renderEditor({
|
|
85
|
-
mode,
|
|
86
|
-
onBlur,
|
|
87
|
-
editorRef,
|
|
88
|
-
readOnly
|
|
89
|
-
}) {
|
|
88
|
+
renderEditor(_ref2) {
|
|
90
89
|
var _this$props$styles;
|
|
91
90
|
|
|
91
|
+
let mode = _ref2.mode,
|
|
92
|
+
onBlur = _ref2.onBlur,
|
|
93
|
+
editorRef = _ref2.editorRef,
|
|
94
|
+
readOnly = _ref2.readOnly;
|
|
92
95
|
const _this$props = this.props,
|
|
93
96
|
showFocusRing = _this$props.showFocusRing,
|
|
94
97
|
renderEditor = _this$props.renderEditor;
|
|
@@ -107,17 +110,15 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
|
|
|
107
110
|
})) : null;
|
|
108
111
|
}
|
|
109
112
|
|
|
110
|
-
renderViewer({
|
|
111
|
-
readOnly,
|
|
112
|
-
|
|
113
|
-
}) {
|
|
113
|
+
renderViewer(_ref3) {
|
|
114
|
+
let readOnly = _ref3.readOnly,
|
|
115
|
+
mode = _ref3.mode;
|
|
114
116
|
return readOnly || mode === 'view' ? this.props.renderViewer() : null;
|
|
115
117
|
}
|
|
116
118
|
|
|
117
|
-
renderEditButton({
|
|
118
|
-
buttonRef,
|
|
119
|
-
|
|
120
|
-
}) {
|
|
119
|
+
renderEditButton(_ref4) {
|
|
120
|
+
let buttonRef = _ref4.buttonRef,
|
|
121
|
+
rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
|
|
121
122
|
return this.props.renderEditButton({
|
|
122
123
|
elementRef: (0, _createChainedFunction.createChainedFunction)(this.handleEditButtonRef, buttonRef),
|
|
123
124
|
...rest
|
|
@@ -149,12 +150,12 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
|
|
|
149
150
|
showFocusRing: true,
|
|
150
151
|
inline: true,
|
|
151
152
|
editButtonPlacement: 'end'
|
|
152
|
-
}, _class2.renderDefaultEditButton =
|
|
153
|
-
isVisible,
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
153
|
+
}, _class2.renderDefaultEditButton = _ref5 => {
|
|
154
|
+
let isVisible = _ref5.isVisible,
|
|
155
|
+
readOnly = _ref5.readOnly,
|
|
156
|
+
label = _ref5.label,
|
|
157
|
+
buttonProps = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
|
|
158
|
+
|
|
158
159
|
if (readOnly) {
|
|
159
160
|
return null;
|
|
160
161
|
}
|
package/lib/InPlaceEdit/props.js
CHANGED
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.propTypes = exports.allowedProps = void 0;
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-editable",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.13.1-snapshot.9+f32ba918e",
|
|
4
4
|
"description": "A UI component library made by Instructure Inc.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -24,21 +24,21 @@
|
|
|
24
24
|
},
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@instructure/ui-babel-preset": "8.
|
|
28
|
-
"@instructure/ui-test-utils": "8.
|
|
27
|
+
"@instructure/ui-babel-preset": "8.13.1-snapshot.9+f32ba918e",
|
|
28
|
+
"@instructure/ui-test-utils": "8.13.1-snapshot.9+f32ba918e"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@babel/runtime": "^7.13.10",
|
|
32
|
-
"@instructure/console": "8.
|
|
33
|
-
"@instructure/emotion": "8.
|
|
34
|
-
"@instructure/ui-a11y-content": "8.
|
|
35
|
-
"@instructure/ui-buttons": "8.
|
|
36
|
-
"@instructure/ui-dom-utils": "8.
|
|
37
|
-
"@instructure/ui-flex": "8.
|
|
38
|
-
"@instructure/ui-focusable": "8.
|
|
39
|
-
"@instructure/ui-icons": "8.
|
|
40
|
-
"@instructure/ui-utils": "8.
|
|
41
|
-
"@instructure/ui-view": "8.
|
|
32
|
+
"@instructure/console": "8.13.1-snapshot.9+f32ba918e",
|
|
33
|
+
"@instructure/emotion": "8.13.1-snapshot.9+f32ba918e",
|
|
34
|
+
"@instructure/ui-a11y-content": "8.13.1-snapshot.9+f32ba918e",
|
|
35
|
+
"@instructure/ui-buttons": "8.13.1-snapshot.9+f32ba918e",
|
|
36
|
+
"@instructure/ui-dom-utils": "8.13.1-snapshot.9+f32ba918e",
|
|
37
|
+
"@instructure/ui-flex": "8.13.1-snapshot.9+f32ba918e",
|
|
38
|
+
"@instructure/ui-focusable": "8.13.1-snapshot.9+f32ba918e",
|
|
39
|
+
"@instructure/ui-icons": "8.13.1-snapshot.9+f32ba918e",
|
|
40
|
+
"@instructure/ui-utils": "8.13.1-snapshot.9+f32ba918e",
|
|
41
|
+
"@instructure/ui-view": "8.13.1-snapshot.9+f32ba918e",
|
|
42
42
|
"prop-types": "^15"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"access": "public"
|
|
50
50
|
},
|
|
51
51
|
"sideEffects": false,
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "f32ba918e4d3ce76c6ee95c856584d00a9d80958"
|
|
53
53
|
}
|