@instructure/ui-editable 8.17.1-snapshot.30 → 8.17.1-snapshot.74
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/package.json +14 -14
- package/src/InPlaceEdit/README.md +7 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-editable",
|
|
3
|
-
"version": "8.17.1-snapshot.
|
|
3
|
+
"version": "8.17.1-snapshot.74+a634fc0d7",
|
|
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.17.1-snapshot.
|
|
27
|
-
"@instructure/ui-test-utils": "8.17.1-snapshot.
|
|
26
|
+
"@instructure/ui-babel-preset": "8.17.1-snapshot.74+a634fc0d7",
|
|
27
|
+
"@instructure/ui-test-utils": "8.17.1-snapshot.74+a634fc0d7"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@babel/runtime": "^7.13.10",
|
|
31
|
-
"@instructure/console": "8.17.1-snapshot.
|
|
32
|
-
"@instructure/emotion": "8.17.1-snapshot.
|
|
33
|
-
"@instructure/ui-a11y-content": "8.17.1-snapshot.
|
|
34
|
-
"@instructure/ui-buttons": "8.17.1-snapshot.
|
|
35
|
-
"@instructure/ui-dom-utils": "8.17.1-snapshot.
|
|
36
|
-
"@instructure/ui-flex": "8.17.1-snapshot.
|
|
37
|
-
"@instructure/ui-focusable": "8.17.1-snapshot.
|
|
38
|
-
"@instructure/ui-icons": "8.17.1-snapshot.
|
|
39
|
-
"@instructure/ui-utils": "8.17.1-snapshot.
|
|
40
|
-
"@instructure/ui-view": "8.17.1-snapshot.
|
|
31
|
+
"@instructure/console": "8.17.1-snapshot.74+a634fc0d7",
|
|
32
|
+
"@instructure/emotion": "8.17.1-snapshot.74+a634fc0d7",
|
|
33
|
+
"@instructure/ui-a11y-content": "8.17.1-snapshot.74+a634fc0d7",
|
|
34
|
+
"@instructure/ui-buttons": "8.17.1-snapshot.74+a634fc0d7",
|
|
35
|
+
"@instructure/ui-dom-utils": "8.17.1-snapshot.74+a634fc0d7",
|
|
36
|
+
"@instructure/ui-flex": "8.17.1-snapshot.74+a634fc0d7",
|
|
37
|
+
"@instructure/ui-focusable": "8.17.1-snapshot.74+a634fc0d7",
|
|
38
|
+
"@instructure/ui-icons": "8.17.1-snapshot.74+a634fc0d7",
|
|
39
|
+
"@instructure/ui-utils": "8.17.1-snapshot.74+a634fc0d7",
|
|
40
|
+
"@instructure/ui-view": "8.17.1-snapshot.74+a634fc0d7",
|
|
41
41
|
"prop-types": "^15"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
50
|
"sideEffects": false,
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "a634fc0d70038f97d153288636802d2766556236"
|
|
52
52
|
}
|
|
@@ -5,12 +5,13 @@ describes: InPlaceEdit
|
|
|
5
5
|
`InPlaceEdit` provides the DOM structure to organize the components that participate
|
|
6
6
|
in in-place editing by calling the `renderViewer` and `renderEditor` _render props_
|
|
7
7
|
in the context of the containing DOM sub-tree. It also takes care of wiring up the
|
|
8
|
-
event handlers required by [`Editable`](#Editable) to make the user interactions
|
|
8
|
+
event handlers required by [`Editable`](#Editable) to make the user interactions work.
|
|
9
9
|
|
|
10
|
-
As a controlled component, it is the responsibility of the consumer to maintain
|
|
10
|
+
As a controlled component, it is the responsibility of the consumer to maintain some data to make this work.
|
|
11
11
|
Each time `InPlaceEdit` is rendered, you must provide as props:
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
|
|
13
|
+
- the current `mode` prop, which defaults to `'view'`. The app will be notified of
|
|
14
|
+
changes in mode via the `onChangeMode` function property.
|
|
14
15
|
- the current `value` prop, which primarily serves to trigger a re-render when the value changes
|
|
15
16
|
|
|
16
17
|
The view component, as returned by the `renderViewer` property can be anything you wish, but
|
|
@@ -23,12 +24,12 @@ input. It is up to the consumer to provide the necessary properties to get the u
|
|
|
23
24
|
|
|
24
25
|
Some components, like [Heading](#Heading) and [Text](#Text) can be made editable by setting their `as` property
|
|
25
26
|
to `input` (and optionally the `type` property). The value of this approach is that the editable version
|
|
26
|
-
will render in the same style as the view, making for a nice user experience.
|
|
27
|
+
will render in the same style as the view, making for a nice user experience. Other transitions,
|
|
27
28
|
`Text` to `Select` or `DateTimeInput` for example, result in a wholesale change in the component's UI, and will alter
|
|
28
29
|
the space it consumes in the app.
|
|
29
30
|
|
|
30
31
|
Use `InPlaceEdit` to edit `Text` using `Text as="input"`. Also demonstrates how you might wish to handle
|
|
31
|
-
the case when the text is empty.
|
|
32
|
+
the case when the text is empty. Use the checkbox to switch between inline and block layout.
|
|
32
33
|
|
|
33
34
|
```js
|
|
34
35
|
---
|