fix up custom theme name input

components/Editor.js

@@ -391,7 +391,7 @@ Editor.defaultProps = {
   onReset: () => {}
 }
 
-function ThemesContainer(props) {
+function EditorContainer(props) {
   const [themes, updateThemes] = React.useState(THEMES)
 
   React.useEffect(() => {
@@ -408,4 +408,4 @@ function ThemesContainer(props) {
   return <Editor {...props} themes={themes} updateThemes={updateThemes} />
 }
 
-export default ThemesContainer
+export default EditorContainer

components/Themes/ThemeCreate.js

@@ -47,16 +47,18 @@ const HighlightPicker = ({ title, onChange, color }) => (
   </div>
 )
 
-const getCustomName = themes =>
+const ThemeCreate = ({
-  `Custom Theme ${themes.filter(({ name }) => name.startsWith('Custom Theme')).length + 1}`
+  theme,
-
+  themes,
-const ThemeCreate = ({ theme, themes, highlights, create, updateHighlights }) => {
+  highlights,
+  create,
+  updateHighlights,
+  name,
+  onInputChange
+}) => {
   const [preset, updatePreset] = React.useState(theme.id)
   const [highlight, selectHighlight] = React.useState()
 
-  // TODO consider using an uncontrolled input
-  const [name, updateName] = React.useState(getCustomName(themes))
-
   return (
     <Popout pointerLeft="15px" style={{ display: 'flex' }}>
       <div className="theme-settings">
@@ -67,7 +69,7 @@ const ThemeCreate = ({ theme, themes, highlights, create, updateHighlights }) =>
             name="name"
             placeholder="Custom Theme"
             value={name}
-            onChange={({ target: { value } }) => updateName(value)}
+            onChange={onInputChange}
             maxLength="32"
           />
         </div>

components/Themes/index.js

@@ -48,13 +48,16 @@ const ThemeItem = ({ children, item, isSelected, remove }) => (
 
 const themeIcon = <ThemeIcon />
 
+const getCustomName = themes =>
+  `Custom Theme ${themes.filter(({ name }) => name.startsWith('Custom Theme')).length + 1}`
+
 class Themes extends React.PureComponent {
   state = {
-    highlights: {}
+    highlights: {},
+    name: ''
   }
 
   componentDidMount() {
-    // TODO consider just using withRouter directly
     const { queryState } = getRouteState(this.props.router)
 
     if (queryState.highlights) {
@@ -66,11 +69,11 @@ class Themes extends React.PureComponent {
 
   static getDerivedStateFromProps(props) {
     if (!props.isVisible) {
-      // TODO use shared function for this next line
       const themeConfig =
         (props.themes && props.themes.find(t => t.id === props.theme)) || DEFAULT_THEME
       return {
-        highlights: themeConfig.highlights
+        highlights: themeConfig.highlights,
+        name: getCustomName(props.themes)
       }
     }
     return null
@@ -107,7 +110,7 @@ class Themes extends React.PureComponent {
 
     const themeConfig = themes.find(t => t.id === theme) || DEFAULT_THEME
 
-    const dropdownValue = isVisible ? { name: '' } : { id: themeConfig.id, name: themeConfig.name }
+    const dropdownValue = isVisible ? { name: this.state.name } : themeConfig
 
     const dropdownList = [
       {
@@ -123,7 +126,6 @@ class Themes extends React.PureComponent {
           innerRef={this.dropdown}
           icon={themeIcon}
           disableInput={isVisible}
-          inputValue={dropdownValue}
           selected={dropdownValue}
           list={dropdownList}
           itemWrapper={this.itemWrapper}
@@ -137,6 +139,8 @@ class Themes extends React.PureComponent {
             highlights={highlights}
             create={this.create}
             updateHighlights={this.updateHighlights}
+            name={this.state.name}
+            onInputChange={e => this.setState({ name: e.target.value })}
           />
         )}
         <style jsx>