Add FieldType for internal links

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/ColumnList.js

@@ -59,17 +59,18 @@ export default class ColumnList extends React.Component<Props> {
 
     componentWillReceiveProps(nextProps: Props) {
         if (this.container && nextProps.children !== this.props.children) {
-            this.container.scrollLeft = this.toolbarWidth * (nextProps.children.length - 1);
+            this.container.scrollLeft = this.columnWidth * (nextProps.children.length - 1);
         }
     }
 
-    get toolbarWidth(): number {
-        if (!this.toolbar) {
+    get columnWidth(): number {
+        const columnWidth = parseInt(columnListStyles.columnWidth);
+
+        if (isNaN(columnWidth)) {
             return 0;
         }
 
-        // remove the 1px border from the toolbar to get the correct width
-        return this.toolbar.clientWidth - 1;
+        return columnWidth;
     }
 
     get containerWidth(): number {
@@ -124,25 +125,27 @@ export default class ColumnList extends React.Component<Props> {
 
     render() {
         const {children, toolbarItems} = this.props;
-        const toolbarPosition = -this.scrollPosition + this.activeColumnIndex * this.toolbarWidth;
+        const toolbarPosition = -this.scrollPosition + this.activeColumnIndex * this.columnWidth;
 
         const columnListContainerClass = classNames(
             columnListStyles.columnListContainer,
             {
                 [columnListStyles.firstVisibleColumnActive]: toolbarPosition <= 0,
-                [columnListStyles.lastVisibleColumnActive]: toolbarPosition >= this.containerWidth - this.toolbarWidth,
+                [columnListStyles.lastVisibleColumnActive]: toolbarPosition >= this.containerWidth - this.columnWidth,
             }
         );
 
         return (
             <div className={columnListStyles.columnListToolbarContainer}>
-                <div style={{marginLeft: toolbarPosition}}>
-                    <Toolbar
-                        columnIndex={this.activeColumnIndex}
-                        toolbarItems={toolbarItems}
-                        toolbarRef={this.setToolbarRef}
-                    />
-                </div>
+                {!!toolbarItems.length &&
+                    <div className={columnListStyles.toolbarContainer} style={{marginLeft: toolbarPosition}}>
+                        <Toolbar
+                            columnIndex={this.activeColumnIndex}
+                            toolbarItems={toolbarItems}
+                            toolbarRef={this.setToolbarRef}
+                        />
+                    </div>
+                }
                 <div ref={this.setContainerRef} className={columnListContainerClass}>
                     <div className={columnListStyles.columnList}>
                         {this.cloneColumns(children)}

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/Item.js

@@ -8,18 +8,20 @@ import type {ItemButtonConfig} from './types';
 import itemStyles from './item.scss';
 
 type Props = {
-    id: string | number,
-    children: string,
     active: boolean,
-    hasChildren: boolean,
     buttons?: Array<ItemButtonConfig>,
+    children: string,
+    hasChildren: boolean,
+    id: string | number,
     onClick?: (id: string | number) => void,
+    selected: boolean,
 };
 
 export default class Item extends React.Component<Props> {
     static defaultProps = {
         active: false,
         hasChildren: false,
+        selected: false,
     };
 
     handleClick = () => {
@@ -45,12 +47,13 @@ export default class Item extends React.Component<Props> {
     };
 
     render() {
-        const {children, active, hasChildren} = this.props;
+        const {children, active, hasChildren, selected} = this.props;
 
         const itemClass = classNames(
             itemStyles.item,
             {
                 [itemStyles.active]: active,
+                [itemStyles.selected]: selected,
             }
         );
 

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/README.md

@@ -1,9 +1,7 @@
-The `ColumnList` component consists out of three parts: `ColumnList`, `Column` and `Item`. 
+The `ColumnList` component consists out of three parts: `ColumnList`, `Column` and `Item`. The `toolbarItems` prop
+can be used to configure the toolbar above every column.
 
 ```
-const Column = ColumnList.Column;
-const Item = ColumnList.Item;
-
 const buttons = [
     {
         icon: 'fa-heart',
@@ -61,20 +59,43 @@ const toolbarItems = [
 
 <div style={{height: '60vh'}}>
     <ColumnList buttons={buttons} onItemClick={handleItemClick} toolbarItems={toolbarItems}>
-        <Column>
-            <Item id="1" selected="true">Google 1</Item>
-            <Item id="2" hasChildren="true">Apple 1</Item>
-            <Item id="3">Microsoft 1</Item>
-        </Column>
-        <Column>
-            <Item id="1-1">Item 1</Item>
-            <Item id="1-2" hasChildren="true">Item 1</Item>
-        </Column>
-        <Column>
-            <Item id="1-1-1">Item 1</Item>
-            <Item id="1-1-2">Item 1</Item>
-        </Column>
-        <Column />
+        <ColumnList.Column>
+            <ColumnList.Item id="1" selected="true">Google 1</ColumnList.Item>
+            <ColumnList.Item id="2" hasChildren="true">Apple 1</ColumnList.Item>
+            <ColumnList.Item id="3">Microsoft 1</ColumnList.Item>
+        </ColumnList.Column>
+        <ColumnList.Column>
+            <ColumnList.Item id="1-1">Item 1</ColumnList.Item>
+            <ColumnList.Item id="1-2" hasChildren="true">Item 1</ColumnList.Item>
+        </ColumnList.Column>
+        <ColumnList.Column>
+            <ColumnList.Item id="1-1-1">Item 1</ColumnList.Item>
+            <ColumnList.Item id="1-1-2">Item 1</ColumnList.Item>
+        </ColumnList.Column>
+        <ColumnList.Column />
+    </ColumnList>
+</div>
+```
+
+The `toolbarItems` prop is optional, and the component can also be used without a toolbar.
+
+```
+<div style={{height: '60vh'}}>
+    <ColumnList>
+        <ColumnList.Column>
+            <ColumnList.Item id="1" selected="true">Google 1</ColumnList.Item>
+            <ColumnList.Item id="2" hasChildren="true">Apple 1</ColumnList.Item>
+            <ColumnList.Item id="3">Microsoft 1</ColumnList.Item>
+        </ColumnList.Column>
+        <ColumnList.Column>
+            <ColumnList.Item id="1-1">Item 1</ColumnList.Item>
+            <ColumnList.Item id="1-2" hasChildren="true">Item 1</ColumnList.Item>
+        </ColumnList.Column>
+        <ColumnList.Column>
+            <ColumnList.Item id="1-1-1">Item 1</ColumnList.Item>
+            <ColumnList.Item id="1-1-2">Item 1</ColumnList.Item>
+        </ColumnList.Column>
+        <ColumnList.Column />
     </ColumnList>
 </div>
 ```

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/column.scss

@@ -2,8 +2,9 @@
 @import './variables.scss';
 
 .column {
-    border-right: $columnBorder;
+    flex-grow: 1;
     background: $columnListBackgroundColor;
+    border-right: $columnBorder;
     display: inline-block;
     vertical-align: top;
     width: $columnWidth;

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/columnList.scss

@@ -1,14 +1,18 @@
 @import '../../containers/Application/colors.scss';
 @import './variables.scss';
 
+:export {
+    column-width: $columnWidth;
+}
+
 .column-list-toolbar-container {
     height: 100%;
     width: 100%;
     overflow: hidden;
 }
 
 .column-list-container {
-    height: calc(100% - $toolbarHeight);
+    height: 100%;
     width: 100%;
     overflow-x: auto;
     overflow-y: hidden;
@@ -22,6 +26,10 @@
     &.last-visible-column-active {
         border-top-right-radius: 0;
     }
+
+    .toolbar-container ~ & {
+        height: calc(100% - $toolbarHeight);
+    }
 }
 
 .column-list {

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/item.scss

@@ -45,7 +45,8 @@ $itemColorHover: $white;
     }
 }
 
-.item:hover {
+.item:hover,
+.item.selected {
     .button {
         visibility: visible;
     }

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/tests/Column.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import {render} from 'enzyme';
 import Column from '../Column';
 
-test('The Column component should render', () => {
+test('Should render column with toolbar', () => {
     const buttonsConfig = [
         {
             icon: 'fa-heart',

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/tests/ColumnList.test.js

@@ -5,6 +5,19 @@ import ColumnList from '../ColumnList';
 import Column from '../Column';
 import Item from '../Item';
 
+jest.mock('../columnList.scss', () => new Proxy({}, {
+    get: function(target, key) {
+        if (key === '__esModule') {
+            return false;
+        }
+        if (key === 'columnWidth') {
+            return '270px';
+        }
+
+        return key;
+    },
+}));
+
 test('The ColumnList component should render in a non-scrolling container', () => {
     const onItemClick = jest.fn();
 
@@ -198,17 +211,22 @@ test('The ColumnList component should handle which toolbar is active on mouse en
 });
 
 test('Should move the toolbar container to the correct position', () => {
+    const toolbarItems = [
+        {
+            icon: 'fa-plus',
+            type: 'button',
+            onClick: jest.fn(),
+        },
+    ];
+
     const columnList = mount(
-        <ColumnList onItemClick={jest.fn()}>
+        <ColumnList onItemClick={jest.fn()} toolbarItems={toolbarItems}>
             <Column />
         </ColumnList>
     );
 
     expect(columnList.find('Toolbar').parent().prop('style')).toEqual({marginLeft: 0});
 
-    columnList.instance().toolbar = {
-        clientWidth: 271,
-    };
     columnList.instance().scrollPosition = 35;
     columnList.instance().activeColumnIndex = 2;
     columnList.update();
@@ -225,14 +243,13 @@ test('Should set classes if the toolbar is active on the first or last visible c
         </ColumnList>
     );
 
+    columnList.update();
+
     expect(columnList.find('.columnListContainer').prop('className'))
         .toEqual(expect.stringContaining('firstVisibleColumnActive'));
     expect(columnList.find('.columnListContainer').prop('className'))
         .toEqual(expect.stringContaining('lastVisibleColumnActive'));
 
-    columnList.instance().toolbar = {
-        clientWidth: 271,
-    };
     columnList.instance().container = {
         clientWidth: 500,
     };
@@ -262,9 +279,6 @@ test('Should scroll to the last column when new column is loaded', () => {
         </ColumnList>
     );
 
-    columnList.instance().toolbar = {
-        clientWidth: 271,
-    };
     columnList.instance().container = {
         clientWidth: 500,
     };

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/tests/Item.test.js

@@ -0,0 +1,12 @@
+// @flow
+import React from 'react';
+import {render} from 'enzyme';
+import Item from '../Item';
+
+test('Should render item as not selected by default', () => {
+    expect(render(<Item id={1}>Test</Item>)).toMatchSnapshot();
+});
+
+test('Should render item as selected', () => {
+    expect(render(<Item id={1} selected={true}>Test</Item>)).toMatchSnapshot();
+});

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/tests/__snapshots__/Column.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`The Column component should render 1`] = `
+exports[`Should render column with toolbar 1`] = `
 <div
   class="column"
 />

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/tests/__snapshots__/ColumnList.test.js.snap

@@ -5,6 +5,7 @@ exports[`The ColumnList component should render in a non-scrolling container 1`]
   class="columnListToolbarContainer"
 >
   <div
+    class="toolbarContainer"
     style="margin-left:0"
   >
     <div
@@ -46,7 +47,7 @@ exports[`The ColumnList component should render in a non-scrolling container 1`]
         class="column"
       >
         <div
-          class="item"
+          class="item selected"
         >
           <span
             class="buttons"
@@ -434,7 +435,8 @@ exports[`The ColumnList component should render in a scrolling container 1`] = `
   class="columnListToolbarContainer"
 >
   <div
-    style="margin-left: -22px;"
+    class="toolbarContainer"
+    style="margin-left: 520px;"
   >
     <div
       class="toolbar"
@@ -450,7 +452,7 @@ exports[`The ColumnList component should render in a scrolling container 1`] = `
     </div>
   </div>
   <div
-    class="columnListContainer firstVisibleColumnActive"
+    class="columnListContainer lastVisibleColumnActive"
   >
     <div
       class="columnList"
@@ -459,7 +461,7 @@ exports[`The ColumnList component should render in a scrolling container 1`] = `
         class="column scrolling"
       >
         <div
-          class="item"
+          class="item selected"
         >
           <span
             class="buttons"