1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
12 |
|
13 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
14 |
|
15 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
16 |
|
17 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
18 |
|
19 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
|
20 |
|
21 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
22 |
|
23 | var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n position: fixed;\n z-index:2;\n left: 0;\n /* width: ', '; */\n width: ', ';\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n'], ['\n position: fixed;\n z-index:2;\n left: 0;\n /* width: ', '; */\n width: ', ';\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n']),
|
24 | _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n /* width: ', '; */\n width: ', ';\n justify-content: flex-start;\n'], ['\n /* width: ', '; */\n width: ', ';\n justify-content: flex-start;\n']);
|
25 |
|
26 | var _react = require('react');
|
27 |
|
28 | var _react2 = _interopRequireDefault(_react);
|
29 |
|
30 | var _styledComponents = require('styled-components');
|
31 |
|
32 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
33 |
|
34 | var _Button = require('./Button');
|
35 |
|
36 | var _Button2 = _interopRequireDefault(_Button);
|
37 |
|
38 | var _SVGMenu = require('./svg/SVGMenu');
|
39 |
|
40 | var _SVGMenu2 = _interopRequireDefault(_SVGMenu);
|
41 |
|
42 | var _SVGCancel = require('./svg/SVGCancel');
|
43 |
|
44 | var _SVGCancel2 = _interopRequireDefault(_SVGCancel);
|
45 |
|
46 | var _ = require('.');
|
47 |
|
48 | var _CTCPopover = require('./CTCPopover');
|
49 |
|
50 | var _CTCPopover2 = _interopRequireDefault(_CTCPopover);
|
51 |
|
52 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
53 |
|
54 | var SIDEBAR = (0, _styledComponents2.default)('div')(_templateObject, function (_ref) {
|
55 | var sidebarIsExpanded = _ref.sidebarIsExpanded;
|
56 | return sidebarIsExpanded ? '20rem' : '10rem';
|
57 | }, function (_ref2) {
|
58 | var _ref2$width = _ref2.width,
|
59 | width = _ref2$width === undefined ? 20 : _ref2$width;
|
60 | return width + 'rem';
|
61 | });
|
62 |
|
63 | var BUTTON$ = (0, _styledComponents2.default)(_Button2.default)(_templateObject2, function (_ref3) {
|
64 | var sidebarIsExpanded = _ref3.sidebarIsExpanded;
|
65 | return sidebarIsExpanded ? '19rem' : '9rem';
|
66 | }, function (_ref4) {
|
67 | var _ref4$width = _ref4.width,
|
68 | width = _ref4$width === undefined ? 19 : _ref4$width;
|
69 | return width + 'rem';
|
70 | });
|
71 |
|
72 | var defaultComponents = [{ tag: 'signup', title: 'Sign Up' }, { tag: 'about', title: 'About' }];
|
73 | var Sidebar = function Sidebar(_ref5) {
|
74 | var sidebarIsExpanded = _ref5.sidebarIsExpanded,
|
75 | setSidebarIsExpandedTo = _ref5.setSidebarIsExpandedTo,
|
76 | _ref5$defaultComponen = _ref5.defaultComponent,
|
77 | defaultComponent = _ref5$defaultComponen === undefined ? '' : _ref5$defaultComponen,
|
78 | _ref5$components = _ref5.components,
|
79 | components = _ref5$components === undefined ? defaultComponents : _ref5$components,
|
80 | props = (0, _objectWithoutProperties3.default)(_ref5, ['sidebarIsExpanded', 'setSidebarIsExpandedTo', 'defaultComponent', 'components']);
|
81 |
|
82 | var _useState = (0, _react.useState)(defaultComponent),
|
83 | _useState2 = (0, _slicedToArray3.default)(_useState, 2),
|
84 | currentComponent = _useState2[0],
|
85 | setCurrentComponentTo = _useState2[1];
|
86 |
|
87 | return _react2.default.createElement(
|
88 | _CTCPopover2.default,
|
89 | (0, _extends3.default)({
|
90 | onShow: function onShow() {
|
91 | console.log('onShow');
|
92 | setSidebarIsExpandedTo(true);
|
93 | },
|
94 | onHide: function onHide() {
|
95 | console.log('onHide');
|
96 | setSidebarIsExpandedTo(false);
|
97 | },
|
98 | onToggle: function onToggle(value) {
|
99 | console.log('onToggle', value);
|
100 | },
|
101 | className: 'example__container',
|
102 | externalIsOn: sidebarIsExpanded,
|
103 | transitionType: ['fade'],
|
104 | connected: true,
|
105 | pivotFrom: 'DOWNRIGHT',
|
106 | renderTrigger: function renderTrigger(_ref6) {
|
107 | var getTriggerProps = _ref6.getTriggerProps,
|
108 | isOn = _ref6.isOn;
|
109 | return _react2.default.createElement(
|
110 | _Button2.default,
|
111 | (0, _extends3.default)({
|
112 | isOn: isOn
|
113 | }, getTriggerProps({
|
114 | style: { width: '4rem' }
|
115 |
|
116 |
|
117 |
|
118 | })),
|
119 | _react2.default.createElement(_SVGMenu2.default, null)
|
120 | );
|
121 | }
|
122 | }, props),
|
123 | function (_ref7) {
|
124 | var getChildrenProps = _ref7.getChildrenProps;
|
125 | return _react2.default.createElement(
|
126 | SIDEBAR,
|
127 | (0, _extends3.default)({}, getChildrenProps({
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 | })),
|
134 | components.map(function (c) {
|
135 | return _react2.default.createElement(
|
136 | BUTTON$,
|
137 | {
|
138 | type: 'mercurydrop',
|
139 | mercuryRatio: [20, 5],
|
140 | colors: 'darksmoke',
|
141 | subtype: 'right',
|
142 | size: 15,
|
143 | isOn: c.tag === currentComponent,
|
144 | onClick: function onClick() {
|
145 | setCurrentComponentTo(c.tag);
|
146 | c.onClick();
|
147 | },
|
148 | key: c.tag
|
149 | },
|
150 | c.title
|
151 | );
|
152 | })
|
153 | );
|
154 | }
|
155 | );
|
156 | };
|
157 |
|
158 | exports.default = Sidebar; |
\ | No newline at end of file |