How to use the react-dock.default function in react-dock

onToggleUnsavedStyleModal: toggleUnsavedStyleModal,
    onToggleUnsavedGeometryModal: toggleUnsavedGeometryModal,
    onConfirmRemove: confirmRemoveAnnotation,
    onCancelClose: cancelCloseAnnotations,
    onConfirmClose: confirmCloseAnnotations,
    onAdd: newAnnotation,
    onHighlight: highlight,
    onCleanHighlight: cleanHighlight,
    onDetail: showAnnotation,
    onFilter: filterAnnotations,
    onDownload: download,
    onLoadAnnotations: loadAnnotations
})(require('../components/mapcontrols/annotations/Annotations'));

const ContainerDimensions = require('react-container-dimensions').default;
const Dock = require('react-dock').default;

class AnnotationsPanel extends React.Component {
    static propTypes = {
        id: PropTypes.string,
        active: PropTypes.bool,
        wrap: PropTypes.bool,
        wrapWithPanel: PropTypes.bool,
        panelStyle: PropTypes.object,
        panelClassName: PropTypes.string,
        toggleControl: PropTypes.func,
        closeGlyph: PropTypes.string,
        buttonStyle: PropTypes.object,
        style: PropTypes.object,
        dockProps: PropTypes.object,

        // side panel properties

/*
 * Copyright 2018, GeoSolutions Sas.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 */

const React = require('react');
const Dock = require('react-dock').default;
const BorderLayout = require('../../layout/BorderLayout');
const {withState} = require('recompose');
const PanelHeader = require('./PanelHeader');

/**
 * Component for rendering a DockPanel
 * @memberof components.misc.panels
 * @name DockPanel
 * @class
 * @prop {bool} fluid true calculates the size as a fraction of screen width/height
 * @prop {string} className additional class name
 * @prop {string} position side of the screen where the panel is located, top, bottom, left and right
 * @prop {bool} open show/hide component
 * @prop {number} size size of panel 0.0 to 1.0 if fluid instead of px value
 * @prop {object} style style of dock panel
 * @prop {number} zIndex panel z index

/*
 * Copyright 2017, GeoSolutions Sas.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 */
const React = require('react');
const Dock = require('react-dock').default;
const PropTypes = require('prop-types');

/**
 * Component for rendering a dockablePanel panel.
 * @memberof components.dockablePanel
 * @class
 * @prop {string} id. The <div> id value of the dockable panel
 * @prop {string} dimMode. If none - content is not dimmed, if transparent - pointer events are disabled (so you can click through it), if opaque - click on dim area closes the dock. Default is none
 * @prop {number} dockSize. Size of dock panel (width or height, depending on position). Is a % value [0~1]
 * @prop {bool} isVisible. If true, dock is visible. Default is true.
 * @prop {number} maxDockSize. The maximum extension in %. Default 1.0
 * @prop {number} minDockSize. The minimum extension in %. Default 0.1
 * @prop {string} position. Side to dock (left, right, top or bottom). Default is bottom.
 * @prop {bool} fluid. If true, resize dock proportionally on window resize. Default is true.
 * @prop {function} setDockSize. The metod called when the dockable panel is resized
 * @prop {object} toolbar. it contains the toolbar</div>

const PropTypes = require('prop-types');
const React = require('react');
const {connect} = require('react-redux');
const {isObject, isEqual, head} = require('lodash');
const Dock = require('react-dock').default;

const {Button, Glyphicon} = require('react-bootstrap');
const Modal = require('../../../components/misc/Modal');

const FilterUtils = require('../../../utils/FilterUtils');

const FeatureGrid = connect((state) => {
    return {
        select: state.featuregrid && state.featuregrid.select || [],
        selectAllActive: state.featuregrid && state.featuregrid.selectAll
    };
}, {})(require('./FeatureGrid'));

const I18N = require('../../../components/I18N/I18N');
const Spinner = require('react-spinkit');
const assign = require('object-assign');

const BorderLayout = require('../components/layout/BorderLayout');
const EMPTY_ARR = [];
const EMPTY_OBJ = {};
const {gridTools, gridEvents, pageEvents, toolbarEvents} = require('./featuregrid/index');
const { initPlugin, sizeChange, setUp} = require('../actions/featuregrid');
const ContainerDimensions = require('react-container-dimensions').default;
const {mapLayoutValuesSelector} = require('../selectors/maplayout');
const Dock = connect(createSelector(
    getDockSize,
    state => mapLayoutValuesSelector(state, {transform: true}),
    (size, dockStyle) => ({
        size,
        dockStyle
    })
)
)(require('react-dock').default);
/**
  * @name FeatureEditor
  * @memberof plugins
  * @class
  * @prop {object} cfg.customEditorsOptions Set of options used to connect the custom editors to the featuregrid
  * @prop {object} cfg.editingAllowedRoles array of user roles allowed to enter in edit mode
  * @prop {boolean} cfg.virtualScroll default true. Activates virtualScroll. When false the grid uses normal pagination
  * @prop {number} cfg.maxStoredPages default 5. In virtual Scroll mode determines the size of the loaded pages cache
  * @prop {number} cfg.vsOverScan default 20. Number of rows to load above/below the visible slice of the grid
  * @prop {number} cfg.scrollDebounce default 50. milliseconds of debounce interval between two scroll event
  * @prop {boolean} cfg.showFilteredObject default false. Displays spatial filter selection area when true
  * @prop {boolean} cfg.showTimeSync default false. Shows the button to enable time sync
  * @prop {boolean} cfg.timeSync default false. If true, the timeSync is active by default.
  * @classdesc
  * FeatureEditor Plugin Provides functionalities to browse/edit data via WFS. The grid can be configured to use paging or
  * <br>virtual scroll mechanisms. By default virtual scroll is enabled. When on virtual scroll mode, the maxStoredPages param

/*
 * Copyright 2017, GeoSolutions Sas.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 */
const React = require('react');
const PropTypes = require('prop-types');
const Message = require('../I18N/Message');
const {Glyphicon, Panel} = require('react-bootstrap');
const Dock = require('react-dock').default;
const BorderLayout = require('../layout/BorderLayout');
const {NO_DETAILS_AVAILABLE} = require('../../actions/maps');
const LocaleUtils = require('../../utils/LocaleUtils');
const Spinner = require('react-spinkit');
const ResizeDetector = require('react-resize-detector').default;

class DetailsPanel extends React.Component {
    static propTypes = {
        id: PropTypes.string,
        active: PropTypes.bool,
        closeGlyph: PropTypes.string,
        panelStyle: PropTypes.object,
        panelClassName: PropTypes.string,
        style: PropTypes.object,
        onClose: PropTypes.func,
        dockProps: PropTypes.object,