@instructure/ui-editable 11.0.1-snapshot-0 → 11.0.1-snapshot-2

package/src/InPlaceEdit/README.md

@@ -31,98 +31,10 @@ the space it consumes in the app.
 Use `InPlaceEdit` to edit `Text` using `Text as="input"`. Also demonstrates how you might wish to handle
 the case when the text is empty. Use the checkbox to switch between inline and block layout.
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        mode: props.mode || 'view',
-        value: 'This is some text',
-        inline: true
-      }
-    }
-
-    // You must provide this to Editable to be
-    // notified of mode changes
-    handleChangeMode = (mode) => {
-      this.setState({ mode })
-    }
-
-    // You attach an event handler to your edit component
-    // to be notified of value changes from user interactions
-    handleChange = (event) => {
-      this.setState({ value: event.target.value })
-    }
-
-    // Renders the view component
-    // Be sure to give it the current value
-    renderView = () => (
-      <Text
-        color={this.state.value ? 'primary' : 'secondary'}
-        weight={this.state.value ? 'normal' : 'light'}
-        size="large"
-      >
-        {this.state.value || 'Enter some text'}
-      </Text>
-    )
-
-    // Renders the edit component.
-    // You have to forward the props on, which
-    // includes an onBlur property to help manage
-    // the mode changes.
-    // Be sure to give it the current value
-    renderEdit = ({ onBlur, editorRef }) => (
-      <Text
-        color="primary"
-        size="large"
-        as="input"
-        type="text"
-        value={this.state.value}
-        onChange={this.handleChange}
-        aria-label="The title"
-        onBlur={onBlur}
-        elementRef={editorRef}
-      />
-    )
-
-    // Renders the edit button.
-    // Leverage the default implementation provided by InPlaceEdit
-    renderEditButton = (props) => {
-      props.label = `Edit title "${this.state.value}"`
-      return InPlaceEdit.renderDefaultEditButton(props)
-    }
-
-    onChangeLayout = (event) => {
-      this.setState({ inline: event.target.checked })
-    }
-
-    render() {
-      return (
-        <View as="div">
-          <InPlaceEdit
-            renderViewer={this.renderView}
-            renderEditor={this.renderEdit}
-            renderEditButton={this.renderEditButton}
-            onChangeMode={this.handleChangeMode}
-            mode={this.state.mode}
-            value={this.state.value}
-            inline={this.state.inline}
-          />
-          <View as="div" margin="small 0">
-            <Checkbox
-              label="inline"
-              checked={this.state.inline}
-              onChange={this.onChangeLayout}
-            />
-          </View>
-        </View>
-      )
-    }
-  }
-  render(<Example />)
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const Example = (props) => {
     const [mode, setMode] = useState(props.mode || 'view')
     const [value, setValue] = useState('This is some text')
@@ -201,79 +113,14 @@ the case when the text is empty. Use the checkbox to switch between inline and b
   }
 
   render(<Example />)
-  ```
+```
 
 A readOnly `InPlaceEdit`
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        mode: props.mode || 'view',
-        value: 'This is some text'
-      }
-    }
-
-    // You must provide this to Editable to be
-    // notified of mode changes
-    handleChangeMode = (mode) => {
-      this.setState({ mode })
-    }
-
-    // You attach an event handler to your edit component
-    // to be notified of value changes from user interactions
-    handleChange = (event) => {
-      this.setState({ value: event.target.value })
-    }
-
-    // Renders the view component
-    // Be sure to give it the current value
-    renderView = () => <Text size="large">{this.state.value}</Text>
-
-    // Renders the edit component.
-    // You have to forward the props on, which
-    // includes an onBlur property to help manage
-    // the mode changes.
-    // Be sure to give it the current value
-    renderEdit = ({ onBlur, editorRef }) => (
-      <Text
-        size="large"
-        as="input"
-        type="text"
-        value={this.state.value}
-        onChange={this.handleChange}
-        aria-label="The title"
-        onBlur={onBlur}
-        elementRef={editorRef}
-      />
-    )
-
-    // Renders the edit button.
-    // Leverage the default implementation provided by InPlaceEdit
-    renderEditButton = (props) => {
-      props.label = `Edit title "${this.state.value}"`
-      return InPlaceEdit.renderDefaultEditButton(props)
-    }
-
-    render() {
-      return (
-        <InPlaceEdit
-          readOnly
-          renderViewer={this.renderView}
-          renderEditor={this.renderEdit}
-          renderEditButton={this.renderEditButton}
-          onChangeMode={this.handleChangeMode}
-          mode={this.state.mode}
-          value={this.state.value}
-        />
-      )
-    }
-  }
-  render(<Example />)
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const Example = (props) => {
     const [mode, setMode] = useState(props.mode || 'view')
     const [value, setValue] = useState('This is some text')
@@ -333,82 +180,15 @@ A readOnly `InPlaceEdit`
   }
 
   render(<Example />)
-  ```
+```
 
 To edit end-justified text, wrap `<InPlaceEdit />` in a
 `<View>` component, as follows:
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        mode: props.mode || 'view',
-        value: 'This is some text'
-      }
-    }
-
-    // You must provide this to Editable to be
-    // notified of mode changes
-    handleChangeMode = (mode) => {
-      this.setState({ mode })
-    }
-
-    // You attach an event handler to your edit component
-    // to be notified of value changes from user interactions
-    handleChange = (event) => {
-      this.setState({ value: event.target.value })
-    }
-
-    // Renders the view component
-    // Be sure to give it the current value
-    renderView = () => <Text size="large">{this.state.value}</Text>
-
-    // Renders the edit component.
-    // You have to forward the props on, which
-    // includes an onBlur property to help manage
-    // the mode changes.
-    // Be sure to give it the current value
-    renderEdit = ({ onBlur, editorRef }) => (
-      <Text
-        size="large"
-        as="input"
-        type="text"
-        value={this.state.value}
-        onChange={this.handleChange}
-        aria-label="The title"
-        onBlur={onBlur}
-        elementRef={editorRef}
-      />
-    )
-
-    // Renders the edit button.
-    // Leverage the default implementation provided by InPlaceEdit
-    renderEditButton = (props) => {
-      props.label = `Edit title "${this.state.value}"`
-      return InPlaceEdit.renderDefaultEditButton(props)
-    }
-
-    render() {
-      return (
-        <View as="div" textAlign="end">
-          <InPlaceEdit
-            renderViewer={this.renderView}
-            renderEditor={this.renderEdit}
-            renderEditButton={this.renderEditButton}
-            onChangeMode={this.handleChangeMode}
-            mode={this.state.mode}
-            value={this.state.value}
-            editButtonPlacement="start"
-          />
-        </View>
-      )
-    }
-  }
-  render(<Example />)
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const Example = (props) => {
     const [mode, setMode] = useState(props.mode || 'view')
     const [value, setValue] = useState('This is some text')
@@ -470,97 +250,15 @@ To edit end-justified text, wrap `<InPlaceEdit />` in a
   }
 
   render(<Example />)
-  ```
+```
 
 Same as the first example, but notifies `Editable`'s `onChange`
 when the user has finished editing and the value has changed.
 
-- ```js
-  class Example extends React.Component {
-    constructor(props) {
-      super(props)
-      this.state = {
-        mode: props.mode || 'view',
-        value: 'Edit me',
-        onChangeValue: undefined
-      }
-    }
-
-    // typically provided by the application so it can
-    // be notified of value changes when the user is
-    // finished editing
-    onChange = (newValue) => {
-      this.setState({ onChangeValue: newValue })
-    }
-
-    // You must provide this to Editable to be
-    // notified of mode changes
-    handleChangeMode = (mode) => {
-      this.setState({ mode })
-    }
-
-    // You attach an event handler to your edit component
-    // to be notified of value changes from user interactions
-    handleChange = (event) => {
-      this.setState({ value: event.target.value })
-    }
-
-    // Renders the view component
-    // Be sure to give it the current value
-    renderView = () => <Text size="large">{this.state.value}</Text>
-
-    // Renders the edit component.
-    // You have to forward the props on, which
-    // includes an onBlur property to help manage
-    // the mode changes.
-    // Be sure to give it the current value
-    renderEdit = ({ onBlur, editorRef }) => (
-      <Text
-        size="large"
-        as="input"
-        type="text"
-        value={this.state.value}
-        onChange={this.handleChange}
-        aria-label="The title"
-        onBlur={onBlur}
-        elementRef={editorRef}
-      />
-    )
-
-    // Renders the edit button.
-    // Leverage the default implementation provided by InPlaceEdit
-    renderEditButton = (props) => {
-      props.label = `Edit title "${this.state.value}"`
-      return InPlaceEdit.renderDefaultEditButton(props)
-    }
-
-    render() {
-      return (
-        <View as="div">
-          <InPlaceEdit
-            renderViewer={this.renderView}
-            renderEditor={this.renderEdit}
-            renderEditButton={this.renderEditButton}
-            onChangeMode={this.handleChangeMode}
-            mode={this.state.mode}
-            value={this.state.value}
-            onChange={this.onChange}
-          />
-          <div>
-            <Text fontStyle="italic">
-              {this.state.onChangeValue !== undefined
-                ? `onChange said: ${this.state.onChangeValue}`
-                : `You haven't edited me yet!`}
-            </Text>
-          </div>
-        </View>
-      )
-    }
-  }
-  render(<Example />)
-  ```
-
-- ```js
+```js
+---
+type: example
+---
   const Example = (props) => {
     const [mode, setMode] = useState(props.mode || 'view')
     const [value, setValue] = useState('Edit me')
@@ -637,4 +335,4 @@ when the user has finished editing and the value has changed.
   }
 
   render(<Example />)
-  ```
+```