finish all required features

demo/index.js

@@ -1,3 +1,7 @@
 import fileManager from '../src/file-manager/js';
 
-fileManager(document.body);
+fileManager(document.body);
+
+// import test from '../src/test/js';
+
+// test(document.body);

package.json

@@ -24,7 +24,7 @@
     "bem-cn": "^1.0.0",
     "core-js": "^0.9.11",
     "cyclejs": "^0.22.0",
-    "cyclejs-group": "^0.5.0",
+    "cyclejs-group": "^0.6.0",
     "cyclejs-stream": "^0.3.2",
     "dedent": "^0.4.0",
     "ramda": "~0.14",

src/file-manager/css/_components/files-list-item.scss

@@ -1,8 +1,6 @@
 .files-list-item {
-    $buttons-space: .5em;
-    $input-offset: 4px; // to make text indent equal for label end rename form
-
-    height: 2em;
+    height: $file-list-item-height;
+    line-height: $file-list-item-height;
 
     &:before,
     &__rename-form,
@@ -22,21 +20,6 @@
         margin-left: $input-offset;
     }
 
-    &__rename-form {
-        .file-rename-form__input {
-            $border-width: 2px;
-
-            // make text indent equal for label end rename form
-            margin-left: 0;
-            border-width: $border-width;
-            padding-left: $input-offset - $border-width;
-
-            margin-right: $buttons-space; // pull buttons
-
-            max-width: 8em;
-        }
-    }
-
     &__button--rename-cancel {
         margin-left: $buttons-space;
         margin-top: 1.5px; // accidental offset

src/file-manager/css/_vars.scss

@@ -6,4 +6,8 @@ $color: (
     background: #FFF,
     row-even: #EEE,
     row-odd: #FFF
-);
+);
+
+$file-list-item-height: 2em;
+$buttons-space: .5em;
+$input-offset: 4px; // to make text indent equal for label end rename form

src/file-manager/css/index.scss

@@ -24,13 +24,43 @@ body {
 }
 
 .files {
-
-
+
+    .add-new {
+        height: $file-list-item-height;
+        line-height: $file-list-item-height;
+
+        & > * {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .file-rename-form__input {
+            margin-right: $buttons-space; // pull buttons
+        }
+
+        &__cancel {
+            margin-left: $buttons-space;
+            margin-top: 1.5px; // accidental offset
+        }
+    }
+
+    .file-rename-form__input {
+        $border-width: 2px;
+
+        // make text indent equal for label end rename form
+        margin-left: 0;
+        border-width: $border-width;
+        padding-left: $input-offset - $border-width;
+
+        margin-right: $buttons-space; // pull buttons
+
+        max-width: 8em;
+    }
 }
 
 .removal-confirmation {
     background-color: map-get($color, 'background');
-    
+
     &__message {
         margin-top: 0;
         white-space: pre-wrap;

src/file-manager/js/components/file-rename-form/index.js

@@ -1,8 +1,7 @@
 import { registerCustomElement, h, Rx } from 'cyclejs';
+import FocusHook from 'cyclejs/node_modules/virtual-dom/virtual-hyperscript/hooks/focus-hook';
 import createGroup from 'cyclejs-group';
 
-import modelDefinition from './model';
-
 
 export default function createFileRenameFormElement(tagName) {
     let formClass = tagName;
@@ -11,10 +10,16 @@ export default function createFileRenameFormElement(tagName) {
     let applyButtonClass = buttonClass + '--apply';
 
     registerCustomElement(tagName, (interactions, properties) => {
-        let model = createGroup(modelDefinition);
+        let model = createGroup({
+            value$: (initialValue$, apply$, input$) =>
+                apply$.withLatestFrom(
+                    input$.merge(initialValue$),
+                    (apply, input) => input
+                ).merge(initialValue$)
+        });
 
         model.inject({
-            initialValue$: properties.get('value'),
+            initialValue$: properties.get('value').take(1),
             apply$: interactions.get(`.${formClass}`, 'submit')
                 .tap((e) => e.preventDefault()),
             input$: interactions.get(`.${inputClass}`, 'input')
@@ -30,7 +35,8 @@ export default function createFileRenameFormElement(tagName) {
                     h('input', {
                         className: `${inputClass}`,
                         type: 'text',
-                        value: value
+                        value: value,
+                        'focus-hook': new FocusHook()
                     }),
                     h('button', {
                         type: 'submit',

src/file-manager/js/components/files-list-item/index.js

@@ -1,11 +1,8 @@
 import { registerCustomElement, h, Rx } from 'cyclejs';
 import createGroup from 'cyclejs-group';
 
-import fileRenameForm from '../file-rename-form';
 import modelDefinition from './model';
 
-fileRenameForm('file-rename-form');
-
 
 export default function createFilesListItemElement(tagName) {
     let itemClass = tagName;
@@ -49,7 +46,7 @@ export default function createFilesListItemElement(tagName) {
         return {
             vtree$,
             name$: interactions.get(`.${renameFormClass}`, 'value')
-                .map(({ detail}) => detail)
+                .map(({ detail }) => detail)
         };
     });
 

src/file-manager/js/components/selectable-list/model.js

@@ -3,7 +3,7 @@
 export default {
     options$: (children$, change$, selectAll$, options$) =>
         change$.withLatestFrom(
-            options$,
+            options$.delay(1),
             (change, options) =>
                 options.map(({ element, id, selected }) => ({
                     id,
@@ -15,7 +15,7 @@ export default {
         )
         .merge(
             selectAll$.withLatestFrom(
-                options$,
+                options$.delay(1),
                 (selected, options) =>
                     options.map(({ element, id }) => ({
                         id,