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 _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
12 |
|
13 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
14 |
|
15 | var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
|
16 |
|
17 | var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
|
18 |
|
19 | var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n width: ', ';\n display: flex;\n align-items: center;\n padding: 0.5rem 0;\n font-size: 1.35rem;\n'], ['\n width: ', ';\n display: flex;\n align-items: center;\n padding: 0.5rem 0;\n font-size: 1.35rem;\n']),
|
20 | _templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n width: 100%;\n justify-content: flex-start;\n align-items: center;\n'], ['\n display: flex;\n width: 100%;\n justify-content: flex-start;\n align-items: center;\n']),
|
21 | _templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n width: ', ';\n display: flex;\n background: white;\n justify-content: space-between;\n @media (min-width: 600px) {\n flex-direction: row;\n /* border-bottom: 1px solid; */\n }\n @media (max-width: 600px) {\n flex-direction: column;\n /* border-bottom: 1px solid; */\n }\n'], ['\n width: ', ';\n display: flex;\n background: white;\n justify-content: space-between;\n @media (min-width: 600px) {\n flex-direction: row;\n /* border-bottom: 1px solid; */\n }\n @media (max-width: 600px) {\n flex-direction: column;\n /* border-bottom: 1px solid; */\n }\n']),
|
22 | _templateObject4 = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n @media (min-width: 600px) {\n margin-right: 0.5rem;\n }\n @media (max-width: 600px) {\n /* border-right: 0.25rem solid; */\n }\n'], ['\n display: flex;\n\n padding: 0.25rem 0.5rem 0.25rem 0.25rem;\n @media (min-width: 600px) {\n margin-right: 0.5rem;\n }\n @media (max-width: 600px) {\n /* border-right: 0.25rem solid; */\n }\n']),
|
23 | _templateObject5 = (0, _taggedTemplateLiteral3.default)(['\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 500;\n display: flex;\n\n /* padding: 0.25rem 0.5rem 0.25rem 0.25rem; */\n background: #f1f1f1;\n /* border-right: 0.25rem solid; */\n'], ['\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 500;\n display: flex;\n\n /* padding: 0.25rem 0.5rem 0.25rem 0.25rem; */\n background: #f1f1f1;\n /* border-right: 0.25rem solid; */\n']);
|
24 |
|
25 | var _react = require('react');
|
26 |
|
27 | var _react2 = _interopRequireDefault(_react);
|
28 |
|
29 | var _ = require('.');
|
30 |
|
31 | var _styledComponents = require('styled-components');
|
32 |
|
33 | var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
34 |
|
35 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
36 |
|
37 | var BUTTON = (0, _styledComponents2.default)(_.Button)(_templateObject, function (_ref) {
|
38 | var width = _ref.width;
|
39 | return width + 'rem';
|
40 | });
|
41 |
|
42 | var CONTAINER = _styledComponents2.default.div(_templateObject2);
|
43 | var SLOT = _styledComponents2.default.div(_templateObject3, function (_ref2) {
|
44 | var width = _ref2.width;
|
45 | return width + 'rem';
|
46 | });
|
47 | var TITLE = _styledComponents2.default.div(_templateObject4);
|
48 | var VALUE = _styledComponents2.default.div(_templateObject5);
|
49 |
|
50 | var SlotfulCTCMercury = function SlotfulCTCMercury(_ref3) {
|
51 | var slots = _ref3.slots,
|
52 | onClick = _ref3.onClick,
|
53 | children = _ref3.children,
|
54 | _ref3$transitionProps = _ref3.transitionProps,
|
55 | transitionProps = _ref3$transitionProps === undefined ? {
|
56 | maxHeight: '300vh',
|
57 | duration: 0
|
58 | } : _ref3$transitionProps,
|
59 | _ref3$openByDefault = _ref3.openByDefault,
|
60 | openByDefault = _ref3$openByDefault === undefined ? false : _ref3$openByDefault,
|
61 | _ref3$noOCListener = _ref3.noOCListener,
|
62 | noOCListener = _ref3$noOCListener === undefined ? true : _ref3$noOCListener,
|
63 | _ref3$shouldRenderIco = _ref3.shouldRenderIcon,
|
64 | shouldRenderIcon = _ref3$shouldRenderIco === undefined ? false : _ref3$shouldRenderIco,
|
65 | buttons = _ref3.buttons,
|
66 | props = (0, _objectWithoutProperties3.default)(_ref3, ['slots', 'onClick', 'children', 'transitionProps', 'openByDefault', 'noOCListener', 'shouldRenderIcon', 'buttons']);
|
67 |
|
68 | return _react2.default.createElement(
|
69 | _.CTCMercury,
|
70 | (0, _extends3.default)({
|
71 | transitionProps: transitionProps,
|
72 | openByDefault: openByDefault,
|
73 | noOCListener: noOCListener,
|
74 | shouldRenderIcon: shouldRenderIcon,
|
75 | renderTrigger: function renderTrigger() {
|
76 | return _react2.default.createElement(
|
77 | CONTAINER,
|
78 | null,
|
79 | slots && slots.map(function (slot, i) {
|
80 | var _slot$show = slot.show,
|
81 | show = _slot$show === undefined ? true : _slot$show,
|
82 | width = slot.width,
|
83 | title = slot.title,
|
84 | style = slot.style,
|
85 | _slot$justify = slot.justify,
|
86 | justify = _slot$justify === undefined ? 'center' : _slot$justify,
|
87 | _slot$isButton = slot.isButton,
|
88 | isButton = _slot$isButton === undefined ? false : _slot$isButton,
|
89 | _slot$onClick = slot.onClick,
|
90 | _onClick = _slot$onClick === undefined ? function () {
|
91 | return null;
|
92 | } : _slot$onClick,
|
93 | value = slot.value,
|
94 | isOn = slot.isOn;
|
95 |
|
96 | return show ? isButton ? typeof value === 'function' ? _react2.default.createElement(
|
97 | BUTTON,
|
98 | {
|
99 | key: i + '_' + slot.value,
|
100 | isOn: isOn,
|
101 | width: width,
|
102 | style: (0, _extends3.default)({
|
103 | justifyContent: justify
|
104 | }, style) || {},
|
105 | onClick: function onClick(e) {
|
106 | return _onClick(e);
|
107 | }
|
108 | },
|
109 | value({ isOn: isOn })
|
110 | ) : _react2.default.createElement(
|
111 | BUTTON,
|
112 | {
|
113 | key: i + '_' + slot.value,
|
114 | isOn: isOn,
|
115 | width: width,
|
116 | style: (0, _extends3.default)({ justifyContent: justify }, style) || {},
|
117 | onClick: function onClick(e) {
|
118 | return _onClick(e);
|
119 | }
|
120 | },
|
121 | value
|
122 | ) : _react2.default.createElement(
|
123 | SLOT,
|
124 | { width: width, key: i + '_' + slot.value },
|
125 | title && _react2.default.createElement(
|
126 | TITLE,
|
127 | null,
|
128 | title
|
129 | ),
|
130 | _react2.default.createElement(
|
131 | VALUE,
|
132 | null,
|
133 | value
|
134 | )
|
135 | ) : null;
|
136 | })
|
137 | );
|
138 | }
|
139 | }, props),
|
140 | function (_ref4) {
|
141 | var getChildrenProps = _ref4.getChildrenProps,
|
142 | transitionStyle = _ref4.transitionStyle;
|
143 | return children({ getChildrenProps: getChildrenProps, transitionStyle: transitionStyle });
|
144 | }
|
145 | );
|
146 | };
|
147 |
|
148 | exports.default = SlotfulCTCMercury; |
\ | No newline at end of file |