From 7f4ddb2af51c2bf6e090f71d27a625df227b8712 Mon Sep 17 00:00:00 2001 From: Muhammed Thanish Date: Thu, 7 Apr 2016 11:15:13 +0530 Subject: [PATCH 1/4] Add forked react-split-pane --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 5d7fc8227c77..0cfe8db65c70 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "dev": "nodemon --watch src --exec 'npm run prepublish'" }, "dependencies": { + "@mnmtanish/react-split-pane": "^0.1.30", "babel-core": "^6.3.15", "babel-loader": "^6.2.0", "babel-polyfill": "^6.3.15", From 9001f7c6ec80b73bd0aeab3995a3c0e72e5d88ee Mon Sep 17 00:00:00 2001 From: Muhammed Thanish Date: Thu, 7 Apr 2016 11:17:09 +0530 Subject: [PATCH 2/4] Add custom split components --- dist/client/ui/layout_hsplit.js | 84 +++++++++++++++++++++++++++++++++ dist/client/ui/layout_vsplit.js | 83 ++++++++++++++++++++++++++++++++ src/client/ui/layout_hsplit.js | 38 +++++++++++++++ src/client/ui/layout_vsplit.js | 37 +++++++++++++++ 4 files changed, 242 insertions(+) create mode 100644 dist/client/ui/layout_hsplit.js create mode 100644 dist/client/ui/layout_vsplit.js create mode 100644 src/client/ui/layout_hsplit.js create mode 100644 src/client/ui/layout_vsplit.js diff --git a/dist/client/ui/layout_hsplit.js b/dist/client/ui/layout_hsplit.js new file mode 100644 index 000000000000..03e61d4b7d6e --- /dev/null +++ b/dist/client/ui/layout_hsplit.js @@ -0,0 +1,84 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var HSplit = function (_Component) { + (0, _inherits3.default)(HSplit, _Component); + + function HSplit() { + var _Object$getPrototypeO; + + (0, _classCallCheck3.default)(this, HSplit); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + var _this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(HSplit)).call.apply(_Object$getPrototypeO, [this].concat(args))); + + _this.state = {}; + return _this; + } + + (0, _createClass3.default)(HSplit, [{ + key: 'render', + value: function render() { + var wrapStyle = { + cursor: 'row-resize', + width: '100%', + height: '10px', + marginTop: '-10px', + marginBottom: '-10px', + position: 'relative' + }; + + var spanStyle = { + height: '1px', + width: '20px', + top: '5px', + left: '50%', + marginLeft: '-10px', + position: 'absolute', + borderTop: 'solid 1px rgba(0,0,0,0.1)', + borderBottom: 'solid 1px rgba(0,0,0,0.1)' + }; + + return _react2.default.createElement( + 'div', + { style: wrapStyle }, + _react2.default.createElement('span', { style: spanStyle }) + ); + } + }]); + return HSplit; +}(_react.Component); + +exports.default = HSplit; \ No newline at end of file diff --git a/dist/client/ui/layout_vsplit.js b/dist/client/ui/layout_vsplit.js new file mode 100644 index 000000000000..f42e01803bd0 --- /dev/null +++ b/dist/client/ui/layout_vsplit.js @@ -0,0 +1,83 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var VSplit = function (_Component) { + (0, _inherits3.default)(VSplit, _Component); + + function VSplit() { + var _Object$getPrototypeO; + + (0, _classCallCheck3.default)(this, VSplit); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + var _this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(VSplit)).call.apply(_Object$getPrototypeO, [this].concat(args))); + + _this.state = {}; + return _this; + } + + (0, _createClass3.default)(VSplit, [{ + key: 'render', + value: function render() { + var wrapStyle = { + cursor: 'col-resize', + height: '100%', + width: '20px', + marginLeft: '-10px', + position: 'relative' + }; + + var spanStyle = { + width: '1px', + height: '20px', + right: '5px', + top: '50%', + marginTop: '-10px', + position: 'absolute', + borderLeft: 'solid 1px rgba(0,0,0,0.1)', + borderRight: 'solid 1px rgba(0,0,0,0.1)' + }; + + return _react2.default.createElement( + 'div', + { style: wrapStyle }, + _react2.default.createElement('span', { style: spanStyle }) + ); + } + }]); + return VSplit; +}(_react.Component); + +exports.default = VSplit; \ No newline at end of file diff --git a/src/client/ui/layout_hsplit.js b/src/client/ui/layout_hsplit.js new file mode 100644 index 000000000000..4c603a30bb9b --- /dev/null +++ b/src/client/ui/layout_hsplit.js @@ -0,0 +1,38 @@ +import React, { Component, PropTypes } from 'react'; + +class HSplit extends Component { + constructor(...args) { + super(...args); + this.state = {}; + } + + render() { + const wrapStyle = { + cursor: 'row-resize', + width: '100%', + height: '10px', + marginTop: '-10px', + marginBottom: '-10px', + position: 'relative', + }; + + const spanStyle = { + height: '1px', + width: '20px', + top: '5px', + left: '50%', + marginLeft: '-10px', + position: 'absolute', + borderTop: 'solid 1px rgba(0,0,0,0.1)', + borderBottom: 'solid 1px rgba(0,0,0,0.1)', + }; + + return ( +
+ +
+ ); + } +} + +export default HSplit; diff --git a/src/client/ui/layout_vsplit.js b/src/client/ui/layout_vsplit.js new file mode 100644 index 000000000000..7826f900987d --- /dev/null +++ b/src/client/ui/layout_vsplit.js @@ -0,0 +1,37 @@ +import React, { Component, PropTypes } from 'react'; + +class VSplit extends Component { + constructor(...args) { + super(...args); + this.state = {}; + } + + render() { + const wrapStyle = { + cursor: 'col-resize', + height: '100%', + width: '20px', + marginLeft: '-10px', + position: 'relative', + }; + + const spanStyle = { + width: '1px', + height: '20px', + right: '5px', + top: '50%', + marginTop: '-10px', + position: 'absolute', + borderLeft: 'solid 1px rgba(0,0,0,0.1)', + borderRight: 'solid 1px rgba(0,0,0,0.1)', + }; + + return ( +
+ +
+ ); + } +} + +export default VSplit; From 72bdc26cddea958a40b4418ae0fe7b0d6a82f237 Mon Sep 17 00:00:00 2001 From: Muhammed Thanish Date: Thu, 7 Apr 2016 11:23:45 +0530 Subject: [PATCH 3/4] Use resizable split panes --- dist/client/ui/action_logger.js | 43 ++++++++----- dist/client/ui/admin.js | 4 +- dist/client/ui/layout.js | 107 ++++++++++++++++++-------------- dist/server/index.html.js | 2 +- src/client/ui/action_logger.js | 43 ++++++++----- src/client/ui/admin.js | 4 +- src/client/ui/layout.js | 79 ++++++++++++----------- src/server/index.html.js | 10 +++ 8 files changed, 172 insertions(+), 120 deletions(-) diff --git a/dist/client/ui/action_logger.js b/dist/client/ui/action_logger.js index 1cc3cd8ae540..9b964141d231 100644 --- a/dist/client/ui/action_logger.js +++ b/dist/client/ui/action_logger.js @@ -10,25 +10,36 @@ var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -var h3Style = { +var preStyle = { + color: '#666', + overflowY: 'auto', + padding: '8px', + boxSizing: 'border-box', + border: '1px solid #ECECEC', + borderRadius: 4, + backgroundColor: '#FFF', + margin: '0', + position: 'absolute', + top: '30px', + right: 0, + bottom: 0, + left: 0 +}; + +var wrapStyle = { + position: 'relative', + height: '100%' +}; + +var headStyle = { fontFamily: '\n -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",\n "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif\n ', color: '#444', letterSpacing: '2px', fontSize: 12, - margin: '12px 0 5px 0' -}; - -var preStyle = { - height: 105, - overflowY: 'auto', - backgroundColor: '#FFF', - borderRadius: 3, - padding: 8, - color: '#666', - border: '1px solid #EAEAEA' + margin: '0 0 0 5px' }; -var clearButtonStyle = { +var btnStyle = { marginLeft: 5 }; @@ -37,14 +48,14 @@ var ActionLogger = function ActionLogger(_ref) { var onClear = _ref.onClear; return _react2.default.createElement( 'div', - null, + { style: wrapStyle }, _react2.default.createElement( 'h3', - { style: h3Style }, + { style: headStyle }, 'ACTION LOGGER', _react2.default.createElement( 'button', - { style: clearButtonStyle, onClick: onClear }, + { style: btnStyle, onClick: onClear }, 'CLEAR' ) ), diff --git a/dist/client/ui/admin.js b/dist/client/ui/admin.js index 4a0f666a7ba6..7e0018ab9541 100644 --- a/dist/client/ui/admin.js +++ b/dist/client/ui/admin.js @@ -83,7 +83,9 @@ function getIframe(data) { var iframeStyle = { width: '100%', height: '100%', - border: '0' + border: '1px solid #ECECEC', + borderRadius: 4, + backgroundColor: '#FFF' }; // We need to send dataId via queryString diff --git a/dist/client/ui/layout.js b/dist/client/ui/layout.js index 8ab4ea0b6a3e..46aae5a16963 100644 --- a/dist/client/ui/layout.js +++ b/dist/client/ui/layout.js @@ -28,6 +28,18 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react); +var _layout_vsplit = require('./layout_vsplit'); + +var _layout_vsplit2 = _interopRequireDefault(_layout_vsplit); + +var _layout_hsplit = require('./layout_hsplit'); + +var _layout_hsplit2 = _interopRequireDefault(_layout_hsplit); + +var _reactSplitPane = require('@mnmtanish/react-split-pane'); + +var _reactSplitPane2 = _interopRequireDefault(_reactSplitPane); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var Layout = function (_React$Component) { @@ -39,79 +51,78 @@ var Layout = function (_React$Component) { } (0, _createClass3.default)(Layout, [{ - key: 'componentWillMount', - value: function componentWillMount() { - this.updateHeight(); - } - }, { - key: 'componentDidMount', - value: function componentDidMount() { - window.addEventListener('resize', this.updateHeight.bind(this)); - } - }, { - key: 'updateHeight', - value: function updateHeight() { - var _document = document; - var documentElement = _document.documentElement; - var body = _document.body; - - var height = documentElement.clientHeight || body.clientHeight; - height -= 20; - this.setState({ height: height }); - } - }, { key: 'render', value: function render() { var _props = this.props; var controls = _props.controls; var preview = _props.preview; var actionLogger = _props.actionLogger; - var height = this.state.height; var rootStyles = { - height: height, - padding: 8, + height: '100vh', backgroundColor: '#F7F7F7' }; + var controlsStyle = { - width: 240, - float: 'left', height: '100%', - overflowY: 'auto' + overflowY: 'auto', + padding: '5px 0 5px 10px', + boxSizing: 'border-box' }; var actionStyle = { - height: 150, - marginLeft: 250 + position: 'absolute', + width: '100%', + height: '100%', + padding: '5px 10px 10px 0', + boxSizing: 'border-box' }; var previewStyle = { - height: height - actionStyle.height - 25, - marginLeft: 250, - border: '1px solid #ECECEC', - borderRadius: 4, - padding: 5, - backgroundColor: '#FFF' + position: 'absolute', + width: '100%', + height: '100%', + padding: '10px 10px 10px 0', + boxSizing: 'border-box' + }; + + var vsplit = _react2.default.createElement(_layout_vsplit2.default, null); + var hsplit = _react2.default.createElement(_layout_hsplit2.default, null); + + var onDragStart = function onDragStart() { + document.body.classList.add('dragging'); + }; + + var onDragEnd = function onDragEnd() { + document.body.classList.remove('dragging'); }; return _react2.default.createElement( 'div', { style: rootStyles }, _react2.default.createElement( - 'div', - { style: controlsStyle }, - controls - ), - _react2.default.createElement( - 'div', - { style: previewStyle }, - preview - ), - _react2.default.createElement( - 'div', - { style: actionStyle }, - actionLogger + _reactSplitPane2.default, + { split: 'vertical', minSize: 250, resizerChildren: vsplit, onDragStarted: onDragStart, onDragFinished: onDragEnd }, + _react2.default.createElement( + 'div', + { style: controlsStyle }, + controls + ), + _react2.default.createElement( + _reactSplitPane2.default, + { split: 'horizontal', primary: 'second', minSize: 100, defaultSize: 200, resizerChildren: hsplit, onDragStarted: onDragStart, onDragFinished: onDragEnd }, + _react2.default.createElement( + 'div', + { style: previewStyle }, + preview + ), + _react2.default.createElement( + 'div', + { style: actionStyle }, + actionLogger + ) + ) ) ); } diff --git a/dist/server/index.html.js b/dist/server/index.html.js index a71b2eeb4d14..ed4800cc9402 100644 --- a/dist/server/index.html.js +++ b/dist/server/index.html.js @@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", { }); exports.default = function () { - return '\n \n \n \n React Storybook\n \n \n \n
\n \n \n \n '; + return '\n \n \n \n React Storybook\n \n \n \n \n
\n \n \n \n '; }; var _uuid = require('uuid'); diff --git a/src/client/ui/action_logger.js b/src/client/ui/action_logger.js index bad02621df98..2c038ae0a422 100644 --- a/src/client/ui/action_logger.js +++ b/src/client/ui/action_logger.js @@ -1,6 +1,27 @@ import React from 'react'; -const h3Style = { +const preStyle = { + color: '#666', + overflowY: 'auto', + padding: '8px', + boxSizing: 'border-box', + border: '1px solid #ECECEC', + borderRadius: 4, + backgroundColor: '#FFF', + margin: '0', + position: 'absolute', + top: '30px', + right: 0, + bottom: 0, + left: 0, +}; + +const wrapStyle = { + position: 'relative', + height: '100%', +}; + +const headStyle = { fontFamily: ` -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif @@ -8,28 +29,18 @@ const h3Style = { color: '#444', letterSpacing: '2px', fontSize: 12, - margin: '12px 0 5px 0', -}; - -const preStyle = { - height: 105, - overflowY: 'auto', - backgroundColor: '#FFF', - borderRadius: 3, - padding: 8, - color: '#666', - border: '1px solid #EAEAEA', + margin: '0 0 0 5px', }; -const clearButtonStyle = { +const btnStyle = { marginLeft: 5, }; const ActionLogger = ({ actionLog, onClear }) => ( -
-

+
+

ACTION LOGGER - + 

{actionLog}
diff --git a/src/client/ui/admin.js b/src/client/ui/admin.js index 84fbc901117f..f9951fe2d578 100644 --- a/src/client/ui/admin.js +++ b/src/client/ui/admin.js @@ -48,7 +48,9 @@ export function getIframe(data) { const iframeStyle = { width: '100%', height: '100%', - border: '0', + border: '1px solid #ECECEC', + borderRadius: 4, + backgroundColor: '#FFF', }; // We need to send dataId via queryString diff --git a/src/client/ui/layout.js b/src/client/ui/layout.js index d4a3e0469f01..4fbce3135c24 100644 --- a/src/client/ui/layout.js +++ b/src/client/ui/layout.js @@ -1,62 +1,67 @@ import React from 'react'; -class Layout extends React.Component { - componentWillMount() { - this.updateHeight(); - } - - componentDidMount() { - window.addEventListener('resize', this.updateHeight.bind(this)); - } - - updateHeight() { - const { documentElement, body } = document; - let height = documentElement.clientHeight || body.clientHeight; - height -= 20; - this.setState({ height }); - } +import VSplit from './layout_vsplit'; +import HSplit from './layout_hsplit'; +import SplitPane from '@mnmtanish/react-split-pane'; +class Layout extends React.Component { render() { const { controls, preview, actionLogger } = this.props; - const { height } = this.state; const rootStyles = { - height, - padding: 8, + height: '100vh', backgroundColor: '#F7F7F7', }; + const controlsStyle = { - width: 240, - float: 'left', height: '100%', overflowY: 'auto', + padding: '5px 0 5px 10px', + boxSizing: 'border-box', }; const actionStyle = { - height: 150, - marginLeft: 250, + position: 'absolute', + width: '100%', + height: '100%', + padding: '5px 10px 10px 0', + boxSizing: 'border-box', }; const previewStyle = { - height: height - actionStyle.height - 25, - marginLeft: 250, - border: '1px solid #ECECEC', - borderRadius: 4, - padding: 5, - backgroundColor: '#FFF', + position: 'absolute', + width: '100%', + height: '100%', + padding: '10px 10px 10px 0', + boxSizing: 'border-box', + }; + + const vsplit = ; + const hsplit = ; + + const onDragStart = function () { + document.body.classList.add('dragging'); + }; + + const onDragEnd = function () { + document.body.classList.remove('dragging'); }; return (
-
- {controls} -
-
- {preview} -
-
- {actionLogger} -
+ +
+ {controls} +
+ +
+ {preview} +
+
+ {actionLogger} +
+ +
); } diff --git a/src/server/index.html.js b/src/server/index.html.js index 2ad8e0720c2c..8375d7743b7c 100644 --- a/src/server/index.html.js +++ b/src/server/index.html.js @@ -9,6 +9,16 @@ export default function () { +
From 33e0a8522bf0194cbd1e1c2b1445151c99c1d6c3 Mon Sep 17 00:00:00 2001 From: Muhammed Thanish Date: Thu, 7 Apr 2016 15:11:47 +0530 Subject: [PATCH 4/4] Fix stories scroll --- dist/client/ui/controls.js | 36 +++++++++++++++++++++++++++++------- dist/client/ui/layout.js | 7 +++---- src/client/ui/controls.js | 28 ++++++++++++++++++++++++---- src/client/ui/layout.js | 5 ++--- 4 files changed, 58 insertions(+), 18 deletions(-) diff --git a/dist/client/ui/controls.js b/dist/client/ui/controls.js index 4ab0cb3c4df8..e53aea898f31 100644 --- a/dist/client/ui/controls.js +++ b/dist/client/ui/controls.js @@ -154,10 +154,19 @@ var StorybookControls = function (_React$Component) { var kindNames = this.getKindNames(); var mainStyle = { fontFamily: '\n -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",\n "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif\n ', - padding: '20px 10px 10px 10px', color: '#444' }; + var h1WrapStyle = { + background: '#F7F7F7', + borderBottom: '1px solid #EEE', + paddingBottom: '20px', + position: 'absolute', + top: '20px', + right: '10px', + left: '20px' + }; + var h1Style = { textTransform: 'uppercase', letterSpacing: '3.5px', @@ -168,21 +177,34 @@ var StorybookControls = function (_React$Component) { textAlign: 'center', borderRadius: '2px', padding: '5px', - margin: '0 0 20px 0', - cursor: 'default' + cursor: 'default', + margin: 0 + }; + + var listStyle = { + overflowY: 'auto', + position: 'absolute', + top: '68px', + right: '10px', + bottom: 0, + left: '20px' }; return _react2.default.createElement( 'div', { style: mainStyle }, _react2.default.createElement( - 'h3', - { style: h1Style }, - 'React Storybook' + 'div', + { style: h1WrapStyle }, + _react2.default.createElement( + 'h3', + { style: h1Style }, + 'React Storybook' + ) ), _react2.default.createElement( 'div', - null, + { style: listStyle }, kindNames.map(this.renderKind.bind(this)) ) ); diff --git a/dist/client/ui/layout.js b/dist/client/ui/layout.js index 46aae5a16963..de4c8eb4dc3a 100644 --- a/dist/client/ui/layout.js +++ b/dist/client/ui/layout.js @@ -65,10 +65,9 @@ var Layout = function (_React$Component) { }; var controlsStyle = { - height: '100%', - overflowY: 'auto', - padding: '5px 0 5px 10px', - boxSizing: 'border-box' + position: 'absolute', + width: '100%', + height: '100%' }; var actionStyle = { diff --git a/src/client/ui/controls.js b/src/client/ui/controls.js index 8e46919d39b1..625882409aeb 100644 --- a/src/client/ui/controls.js +++ b/src/client/ui/controls.js @@ -97,10 +97,19 @@ export default class StorybookControls extends React.Component { -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif `, - padding: '20px 10px 10px 10px', color: '#444', }; + const h1WrapStyle = { + background: '#F7F7F7', + borderBottom: '1px solid #EEE', + paddingBottom: '20px', + position: 'absolute', + top: '20px', + right: '10px', + left: '20px', + }; + const h1Style = { textTransform: 'uppercase', letterSpacing: '3.5px', @@ -111,14 +120,25 @@ export default class StorybookControls extends React.Component { textAlign: 'center', borderRadius: '2px', padding: '5px', - margin: '0 0 20px 0', cursor: 'default', + margin: 0, + }; + + const listStyle = { + overflowY: 'auto', + position: 'absolute', + top: '68px', + right: '10px', + bottom: 0, + left: '20px', }; return (
-

React Storybook

-
+
+

React Storybook

+
+
{kindNames.map(this.renderKind.bind(this))}
diff --git a/src/client/ui/layout.js b/src/client/ui/layout.js index 4fbce3135c24..9324f3caeef0 100644 --- a/src/client/ui/layout.js +++ b/src/client/ui/layout.js @@ -14,10 +14,9 @@ class Layout extends React.Component { }; const controlsStyle = { + position: 'absolute', + width: '100%', height: '100%', - overflowY: 'auto', - padding: '5px 0 5px 10px', - boxSizing: 'border-box', }; const actionStyle = {