[v4] Add Editable/SelectMenu Cell

package.json

@@ -128,7 +128,7 @@
   "size-limit": [
     {
       "path": "commonjs/index.js",
-      "limit": "180 KB"
+      "limit": "200 KB"
     }
   ]
 }

src/positioner/src/Positioner.js

@@ -111,6 +111,12 @@ export default class Positioner extends PureComponent {
     this.state = initialState()
   }
 
+  componentWillUnmount() {
+    if (this.latestAnimationFrame) {
+      cancelAnimationFrame(this.latestAnimationFrame)
+    }
+  }
+
   getTargetRef = ref => {
     this.targetRef = ref
   }
@@ -177,7 +183,7 @@ export default class Positioner extends PureComponent {
         transformOrigin
       },
       () => {
-        window.requestAnimationFrame(() => {
+        this.latestAnimationFrame = requestAnimationFrame(() => {
           this.update(height, width)
         })
       }

src/select-menu/src/OptionsList.js

@@ -80,9 +80,15 @@ export default class OptionsList extends PureComponent {
      * Hacky solution for broken autoFocus
      * https://github.com/segmentio/evergreen/issues/90
      */
-    window.setTimeout(() => {
+    requestAnimationFrame(() => {
       this.searchRef.querySelector('input').focus()
-    }, 1)
+    })
+
+    window.addEventListener('keydown', this.handleKeyDown)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.handleKeyDown)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -113,6 +119,69 @@ export default class OptionsList extends PureComponent {
         )
   }
 
+  getCurrentIndex = () => {
+    const { selected } = this.props
+    const options = this.getFilteredOptions()
+
+    return options.findIndex(
+      option => option.value === selected[selected.length - 1]
+    )
+  }
+
+  getFilteredOptions() {
+    const { options } = this.props
+
+    return this.search(options)
+  }
+
+  handleKeyDown = e => {
+    if (e.keyCode === 38) {
+      this.handleArrowUp()
+    }
+
+    if (e.keyCode === 40) {
+      this.handleArrowDown()
+    }
+
+    if (e.keyCode === 13) {
+      this.handleEnter()
+    }
+  }
+
+  handleArrowUp = () => {
+    const { onSelect } = this.props
+    const options = this.getFilteredOptions()
+
+    let nextIndex = this.getCurrentIndex() - 1
+
+    if (nextIndex < 0) {
+      nextIndex = options.length - 1
+    }
+
+    onSelect(options[nextIndex])
+  }
+
+  handleArrowDown = () => {
+    const { onSelect } = this.props
+    const options = this.getFilteredOptions()
+
+    let nextIndex = this.getCurrentIndex() + 1
+
+    if (nextIndex === options.length) {
+      nextIndex = 0
+    }
+
+    onSelect(options[nextIndex])
+  }
+
+  handleEnter = () => {
+    const isSelected = this.getCurrentIndex() !== -1
+
+    if (isSelected) {
+      this.props.close()
+    }
+  }
+
   handleChange = searchValue => {
     this.setState({
       searchValue
@@ -122,6 +191,7 @@ export default class OptionsList extends PureComponent {
   handleSelect = item => {
     this.props.onSelect(item)
   }
+
   handleDeselect = item => {
     this.props.onDeselect(item)
   }
@@ -177,6 +247,7 @@ export default class OptionsList extends PureComponent {
             itemCount={options.length}
             overscanCount={3}
             scrollToAlignment="auto"
+            scrollToIndex={this.getCurrentIndex()}
             renderItem={({ index, style }) => {
               const item = options[index]
               const isSelected = this.isSelected(item)

src/select-menu/src/SelectMenuContent.js

@@ -34,69 +34,6 @@ export default class SelectMenuContent extends PureComponent {
     hasFilter: true
   }
 
-  componentDidMount() {
-    window.addEventListener('keyup', this.handleKeyUp)
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('keyup', this.handleKeyUp)
-  }
-
-  handleKeyUp = e => {
-    if (e.keyCode === 38) {
-      this.handleArrowUp()
-    }
-
-    if (e.keyCode === 40) {
-      this.handleArrowDown()
-    }
-
-    if (e.keyCode === 13) {
-      this.handleEnter()
-    }
-  }
-
-  getCurrentIndex() {
-    const { options, listProps } = this.props
-    const { selected } = listProps
-
-    return options.findIndex(option => option.value === selected[0])
-  }
-
-  handleArrowUp() {
-    const { options, listProps } = this.props
-    const { onSelect } = listProps
-
-    let nextIndex = this.getCurrentIndex() - 1
-
-    if (nextIndex < 0) {
-      nextIndex = options.length - 1
-    }
-
-    onSelect(options[nextIndex])
-  }
-
-  handleArrowDown() {
-    const { options, listProps } = this.props
-    const { onSelect } = listProps
-
-    let nextIndex = this.getCurrentIndex() + 1
-
-    if (nextIndex === options.length) {
-      nextIndex = 0
-    }
-
-    onSelect(options[nextIndex])
-  }
-
-  handleEnter() {
-    const isSelected = this.getCurrentIndex() === -1
-
-    if (isSelected) {
-      this.props.close()
-    }
-  }
-
   render() {
     const {
       width,
@@ -122,7 +59,7 @@ export default class SelectMenuContent extends PureComponent {
           height={height}
           display="flex"
           flexDirection="column"
-          {...(hasDetailView ? { borderRight: 'muted' } : {})}
+          borderRight={hasDetailView ? 'muted' : null}
         >
           {hasTitle && (
             <Pane
@@ -149,6 +86,7 @@ export default class SelectMenuContent extends PureComponent {
             hasFilter={hasFilter}
             options={options}
             isMultiSelect={isMultiSelect}
+            close={close}
             {...listProps}
           />
         </Pane>

src/table/src/EditableCell.js

@@ -0,0 +1,132 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withTheme } from '../../theme'
+import { Portal } from '../../portal'
+import TextTableCell from './TextTableCell'
+import TableCell from './TableCell'
+import EditableCellField from './EditableCellField'
+
+class EditableCell extends React.PureComponent {
+  static propTypes = {
+    /**
+     * Composes the TableCell component as the base.
+     */
+    ...TableCell.propTypes,
+
+    /**
+     * The size used for the TextTableCell and Textarea.
+     */
+    size: PropTypes.oneOf([300, 400]).isRequired,
+
+    /**
+     * This is the value of the cell.
+     */
+    children: PropTypes.string,
+
+    /**
+     * Function called when value changes. (value: string) => void.
+     */
+    onChange: PropTypes.func
+  }
+
+  static defaultProps = {
+    size: 300
+  }
+
+  state = {
+    isEditing: false,
+    value: this.props.children
+  }
+
+  onMainRef = ref => {
+    this.mainRef = ref
+  }
+
+  onOverlayRef = ref => {
+    this.overlayRef = ref
+  }
+
+  handleDoubleClick = () => {
+    this.setState({
+      isEditing: true
+    })
+  }
+
+  handleKeyDown = e => {
+    const { key } = e
+    if (key.match(/^[a-z]{0,10}$/) && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      this.setState({
+        isEditing: true,
+        value: key
+      })
+    } else if (key === 'Enter') {
+      this.setState({
+        isEditing: true
+      })
+    }
+  }
+
+  handleFieldBlur = value => {
+    const { onChange } = this.props
+    const currentValue = this.state.value
+
+    this.setState({
+      isEditing: false,
+      // Make edit instantious. Deal with errors up the tree.
+      value
+    })
+
+    if (this.mainRef) this.mainRef.focus()
+
+    if (currentValue !== value && typeof onChange === 'function') {
+      onChange(value)
+    }
+  }
+
+  handleFieldCancel = () => {
+    this.setState({ isEditing: false })
+  }
+
+  handleClick = () => {
+    this.mainRef.focus()
+  }
+
+  render() {
+    const { children, theme, size, ...props } = this.props
+    const { isEditing } = this.state
+
+    return (
+      <React.Fragment>
+        <TextTableCell
+          isSelectable
+          innerRef={this.onMainRef}
+          onClick={this.handleClick}
+          onDoubleClick={this.handleDoubleClick}
+          onKeyDown={this.handleKeyDown}
+          size={size}
+          cursor="default"
+          textProps={{
+            size
+          }}
+          {...props}
+        >
+          {children}
+        </TextTableCell>
+        {isEditing && (
+          <Portal>
+            <EditableCellField
+              getTargetRef={() => this.mainRef}
+              value={children}
+              onEscape={this.handleFieldEscape}
+              onBlur={this.handleFieldBlur}
+              onCancel={this.handleFieldCancel}
+              size={size}
+            />
+          </Portal>
+        )}
+      </React.Fragment>
+    )
+  }
+}
+
+export default withTheme(EditableCell)