1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.SelectOne = undefined;
|
7 |
|
8 | var _extends2 = require('babel-runtime/helpers/extends');
|
9 |
|
10 | var _extends3 = _interopRequireDefault(_extends2);
|
11 |
|
12 | var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
13 |
|
14 | var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
15 |
|
16 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
17 |
|
18 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
19 |
|
20 | var _propTypes = require('prop-types');
|
21 |
|
22 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
23 |
|
24 | var _react = require('react');
|
25 |
|
26 | var _react2 = _interopRequireDefault(_react);
|
27 |
|
28 | var _defaultStyles = require('./defaultStyles');
|
29 |
|
30 | var _recompose = require('recompose');
|
31 |
|
32 | var _helperFunctions = require('./helperFunctions');
|
33 |
|
34 | var _CTCPopover = require('./CTCPopover');
|
35 |
|
36 | var _CTCPopover2 = _interopRequireDefault(_CTCPopover);
|
37 |
|
38 | var _Button = require('./Button');
|
39 |
|
40 | var _Button2 = _interopRequireDefault(_Button);
|
41 |
|
42 | var _StyledSelect = require('./StyledSelect');
|
43 |
|
44 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
45 |
|
46 | var SelectOne = function SelectOne(_ref) {
|
47 | var _ref$alwaysOn = _ref.alwaysOn,
|
48 | alwaysOn = _ref$alwaysOn === undefined ? false : _ref$alwaysOn,
|
49 | _ref$onClick = _ref.onClick,
|
50 | onClick = _ref$onClick === undefined ? function () {
|
51 | return null;
|
52 | } : _ref$onClick,
|
53 | _ref$maxHeight = _ref.maxHeight,
|
54 | maxHeight = _ref$maxHeight === undefined ? 20 : _ref$maxHeight,
|
55 | _ref$showCurrentOptio = _ref.showCurrentOption,
|
56 | showCurrentOption = _ref$showCurrentOptio === undefined ? false : _ref$showCurrentOptio,
|
57 | onChange = _ref.onChange,
|
58 | children = _ref.children,
|
59 | _renderTrigger = _ref.renderTrigger,
|
60 | externalCurrentOption = _ref.currentOption,
|
61 | options = _ref.options,
|
62 | _ref$pivotFrom = _ref.pivotFrom,
|
63 | pivotFrom = _ref$pivotFrom === undefined ? 'DOWNRIGHT' : _ref$pivotFrom,
|
64 | props = (0, _objectWithoutProperties3.default)(_ref, ['alwaysOn', 'onClick', 'maxHeight', 'showCurrentOption', 'onChange', 'children', 'renderTrigger', 'currentOption', 'options', 'pivotFrom']);
|
65 |
|
66 | var _useState = (0, _react.useState)(externalCurrentOption ? externalCurrentOption : options[0]),
|
67 | _useState2 = (0, _slicedToArray3.default)(_useState, 2),
|
68 | currentOption = _useState2[0],
|
69 | setCurrentOption = _useState2[1];
|
70 |
|
71 | var isActive = function isActive(option) {
|
72 | return option.value === currentOption.value;
|
73 | };
|
74 |
|
75 | var getChildProps = function getChildProps() {
|
76 | var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
77 |
|
78 | var className = _ref2.className,
|
79 | style = _ref2.style,
|
80 | _onClick = _ref2.onClick,
|
81 | option = _ref2.option,
|
82 | props = (0, _objectWithoutProperties3.default)(_ref2, ['className', 'style', 'onClick', 'option']);
|
83 |
|
84 | return (0, _extends3.default)({
|
85 | onClick: function onClick(e) {
|
86 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
87 | args[_key - 1] = arguments[_key];
|
88 | }
|
89 |
|
90 | e.stopPropagation();
|
91 | setCurrentOption(option);
|
92 | onChange(option);
|
93 | _onClick && _onClick.apply(undefined, [e].concat(args));
|
94 | },
|
95 | className: (0, _helperFunctions.flippyClass)(isActive(option), 'selectone__option', 'active', 'inactive') + ' ' + (className ? (0, _helperFunctions.flippyClass)(isActive(option), className, 'active', 'inactive') : ''),
|
96 | style: (0, _extends3.default)({
|
97 | display: showCurrentOption === false && isActive(option) ? 'none' : 'flex'
|
98 | }, style)
|
99 | }, props);
|
100 | };
|
101 | return _react2.default.createElement(
|
102 | _CTCPopover2.default,
|
103 | (0, _extends3.default)({
|
104 | renderTrigger: function renderTrigger(_ref3) {
|
105 | var isOn = _ref3.isOn,
|
106 | _getTriggerProps = _ref3.getTriggerProps;
|
107 |
|
108 | var defaultTriggerClassName = (0, _helperFunctions.flippyClass)(isOn, 'selectone__trigger', 'on', 'off');
|
109 | return _renderTrigger ? _renderTrigger({
|
110 | currentOption: currentOption,
|
111 | isOn: alwaysOn ? true : isOn,
|
112 | getTriggerProps: function getTriggerProps() {
|
113 | var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
114 |
|
115 | var className = _ref4.className,
|
116 | props = (0, _objectWithoutProperties3.default)(_ref4, ['className']);
|
117 | return _getTriggerProps((0, _extends3.default)({
|
118 | className: className ? className + ' ' + defaultTriggerClassName : defaultTriggerClassName
|
119 | }, props));
|
120 | }
|
121 | }) : _react2.default.createElement(
|
122 | _Button2.default,
|
123 | (0, _extends3.default)({
|
124 | type: 'caretdown',
|
125 | isOn: alwaysOn ? true : isOn
|
126 | }, _getTriggerProps({
|
127 | className: defaultTriggerClassName,
|
128 | onClick: onClick
|
129 | }), {
|
130 | colors: _defaultStyles.buttonStyles.transparentNeutral
|
131 | }),
|
132 | currentOption ? currentOption.label : options[0].label
|
133 | );
|
134 | },
|
135 | alwaysOn: alwaysOn,
|
136 | pivotFrom: pivotFrom
|
137 | }, props),
|
138 | function (_ref5) {
|
139 | var _getChildrenProps = _ref5.getChildrenProps,
|
140 | isOn = _ref5.isOn,
|
141 | setIsOnTo = _ref5.setIsOnTo,
|
142 | toggleIsOn = _ref5.toggleIsOn;
|
143 |
|
144 | var defaultChildrenClassName = 'selectone__children';
|
145 |
|
146 | return typeof children === 'function' ? children({
|
147 | getChildProps: getChildProps,
|
148 | getChildrenProps: function getChildrenProps() {
|
149 | var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
150 |
|
151 | var className = _ref6.className,
|
152 | props = (0, _objectWithoutProperties3.default)(_ref6, ['className']);
|
153 | return _getChildrenProps((0, _extends3.default)({
|
154 | className: className ? className + ' ' + defaultChildrenClassName : defaultChildrenClassName
|
155 | }, props));
|
156 | },
|
157 | isOn: isOn,
|
158 | setIsOnTo: setIsOnTo,
|
159 | toggleIsOn: toggleIsOn,
|
160 | currentOption: currentOption
|
161 | }) : _react2.default.createElement(
|
162 | _StyledSelect.DROPDOWN_CHILDREN,
|
163 | (0, _extends3.default)({}, _getChildrenProps({
|
164 | className: defaultChildrenClassName
|
165 | }), {
|
166 | maxHeight: maxHeight
|
167 | }),
|
168 | children.map(function (option) {
|
169 | return _react2.default.createElement(
|
170 | _Button2.default,
|
171 | (0, _extends3.default)({}, getChildProps({
|
172 | option: option,
|
173 | onClick: toggleIsOn
|
174 | }), {
|
175 | colors: _defaultStyles.buttonStyles.neutral,
|
176 | isOn: isActive(option),
|
177 | key: option.value
|
178 | }),
|
179 | option.label
|
180 | );
|
181 | })
|
182 | );
|
183 | }
|
184 | );
|
185 | };
|
186 |
|
187 | exports.SelectOne = SelectOne;
|
188 | exports.default = SelectOne; |
\ | No newline at end of file |