@gympass/yoga 7.79.2 → 7.80.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,7 +18,7 @@ var _Helper = _interopRequireDefault(require("../../Input/web/Helper"));
|
|
|
18
18
|
var _Input = _interopRequireDefault(require("../../Input/web/Input"));
|
|
19
19
|
|
|
20
20
|
var _excluded = ["isOpen", "selected"],
|
|
21
|
-
_excluded2 = ["error", "label", "disabled", "full", "options", "onChange"];
|
|
21
|
+
_excluded2 = ["error", "label", "disabled", "full", "options", "onChange", "isMaxHeight"];
|
|
22
22
|
|
|
23
23
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
24
24
|
|
|
@@ -37,7 +37,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
|
|
|
37
37
|
var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
38
38
|
var full = _ref.full,
|
|
39
39
|
dropdown = _ref.theme.yoga.components.dropdown;
|
|
40
|
-
return "\n position: relative;\n display: inline-block;\n vertical-align: top;\n\n width: " + (full ? '100%' : dropdown.width + "px") + ";\n ";
|
|
40
|
+
return "\n position: relative;\n display: inline-block;\n vertical-align: top;\n \n width: " + (full ? '100%' : dropdown.width + "px") + ";\n ";
|
|
41
41
|
});
|
|
42
42
|
|
|
43
43
|
var labelTransition = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
|
|
@@ -74,8 +74,9 @@ var Button = _styledComponents["default"].button(_templateObject9 || (_templateO
|
|
|
74
74
|
});
|
|
75
75
|
|
|
76
76
|
var OptionsList = _styledComponents["default"].ul(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref6) {
|
|
77
|
-
var
|
|
78
|
-
|
|
77
|
+
var isMaxHeight = _ref6.isMaxHeight,
|
|
78
|
+
dropdown = _ref6.theme.yoga.components.dropdown;
|
|
79
|
+
return "\n position: absolute;\n top: 46px;\n z-index: 1;\n box-sizing: border-box;\n\n width: 100%;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style-type: none;\n\n background: " + dropdown.optionsList.backgroundColor + ";\n border-width: " + dropdown.optionsList.border.width + "px;\n border-style: solid;\n border-color: " + dropdown.optionsList.border.color + ";\n border-top: none;\n\n border-radius:\n " + dropdown.option.border.radius.topLeft + "px\n " + dropdown.option.border.radius.topRight + "px\n " + dropdown.option.border.radius.bottomRight + "px\n " + dropdown.option.border.radius.bottomLeft + "px;\n\n " + (isMaxHeight && "max-height: " + dropdown.option.height * 3.5 + "px;") + "\n ";
|
|
79
80
|
});
|
|
80
81
|
|
|
81
82
|
var Option = _styledComponents["default"].li(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref7) {
|
|
@@ -112,6 +113,7 @@ var Dropdown = /*#__PURE__*/_react["default"].forwardRef(function (_ref10, ref)
|
|
|
112
113
|
full = _ref10.full,
|
|
113
114
|
options = _ref10.options,
|
|
114
115
|
onChange = _ref10.onChange,
|
|
116
|
+
isMaxHeight = _ref10.isMaxHeight,
|
|
115
117
|
rest = _objectWithoutPropertiesLoose(_ref10, _excluded2);
|
|
116
118
|
|
|
117
119
|
var inputRef = ref || _react["default"].useRef(null);
|
|
@@ -174,6 +176,7 @@ var Dropdown = /*#__PURE__*/_react["default"].forwardRef(function (_ref10, ref)
|
|
|
174
176
|
selected: selectedItem !== null,
|
|
175
177
|
disabled: disabled
|
|
176
178
|
}))), isOpen && /*#__PURE__*/_react["default"].createElement(OptionsList, _extends({
|
|
179
|
+
isMaxHeight: isMaxHeight,
|
|
177
180
|
selected: selectedItem !== null
|
|
178
181
|
}, getMenuProps()), options.map(function (item, index) {
|
|
179
182
|
return /*#__PURE__*/_react["default"].createElement(Option, getItemProps({
|
|
@@ -200,14 +203,16 @@ Dropdown.propTypes = {
|
|
|
200
203
|
value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]),
|
|
201
204
|
selected: _propTypes.bool
|
|
202
205
|
})).isRequired,
|
|
203
|
-
onChange: _propTypes.func
|
|
206
|
+
onChange: _propTypes.func,
|
|
207
|
+
isMaxHeight: _propTypes.bool
|
|
204
208
|
};
|
|
205
209
|
Dropdown.defaultProps = {
|
|
206
210
|
label: '',
|
|
207
211
|
error: undefined,
|
|
208
212
|
full: false,
|
|
209
213
|
disabled: false,
|
|
210
|
-
onChange: function onChange() {}
|
|
214
|
+
onChange: function onChange() {},
|
|
215
|
+
isMaxHeight: true
|
|
211
216
|
};
|
|
212
217
|
var _default = Dropdown;
|
|
213
218
|
exports["default"] = _default;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var _excluded = ["isOpen", "selected"],
|
|
2
|
-
_excluded2 = ["error", "label", "disabled", "full", "options", "onChange"];
|
|
2
|
+
_excluded2 = ["error", "label", "disabled", "full", "options", "onChange", "isMaxHeight"];
|
|
3
3
|
|
|
4
4
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
5
5
|
|
|
@@ -19,7 +19,7 @@ import Input from '../../Input/web/Input';
|
|
|
19
19
|
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
20
20
|
var full = _ref.full,
|
|
21
21
|
dropdown = _ref.theme.yoga.components.dropdown;
|
|
22
|
-
return "\n position: relative;\n display: inline-block;\n vertical-align: top;\n\n width: " + (full ? '100%' : dropdown.width + "px") + ";\n ";
|
|
22
|
+
return "\n position: relative;\n display: inline-block;\n vertical-align: top;\n \n width: " + (full ? '100%' : dropdown.width + "px") + ";\n ";
|
|
23
23
|
});
|
|
24
24
|
var labelTransition = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
|
|
25
25
|
var _ref2$theme$yoga = _ref2.theme.yoga,
|
|
@@ -51,8 +51,9 @@ var Button = styled.button(_templateObject9 || (_templateObject9 = _taggedTempla
|
|
|
51
51
|
return "\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: flex-end;\n position: absolute;\n top: 0;\n left: 0;\n\n width: 100%;\n padding-right: " + dropdown.button.padding.right + "px;\n padding-top: " + dropdown.button.padding.top + "px;\n padding-bottom: " + dropdown.button.padding.bottom + "px;\n\n border: none;\n outline: none;\n background-color: transparent;\n cursor: " + (disabled ? 'not-allowed' : 'pointer') + ";\n ";
|
|
52
52
|
});
|
|
53
53
|
var OptionsList = styled.ul(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref6) {
|
|
54
|
-
var
|
|
55
|
-
|
|
54
|
+
var isMaxHeight = _ref6.isMaxHeight,
|
|
55
|
+
dropdown = _ref6.theme.yoga.components.dropdown;
|
|
56
|
+
return "\n position: absolute;\n top: 46px;\n z-index: 1;\n box-sizing: border-box;\n\n width: 100%;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style-type: none;\n\n background: " + dropdown.optionsList.backgroundColor + ";\n border-width: " + dropdown.optionsList.border.width + "px;\n border-style: solid;\n border-color: " + dropdown.optionsList.border.color + ";\n border-top: none;\n\n border-radius:\n " + dropdown.option.border.radius.topLeft + "px\n " + dropdown.option.border.radius.topRight + "px\n " + dropdown.option.border.radius.bottomRight + "px\n " + dropdown.option.border.radius.bottomLeft + "px;\n\n " + (isMaxHeight && "max-height: " + dropdown.option.height * 3.5 + "px;") + "\n ";
|
|
56
57
|
});
|
|
57
58
|
var Option = styled.li(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref7) {
|
|
58
59
|
var isSelected = _ref7.isSelected,
|
|
@@ -87,6 +88,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
|
|
|
87
88
|
full = _ref10.full,
|
|
88
89
|
options = _ref10.options,
|
|
89
90
|
onChange = _ref10.onChange,
|
|
91
|
+
isMaxHeight = _ref10.isMaxHeight,
|
|
90
92
|
rest = _objectWithoutPropertiesLoose(_ref10, _excluded2);
|
|
91
93
|
|
|
92
94
|
var inputRef = ref || React.useRef(null);
|
|
@@ -148,6 +150,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
|
|
|
148
150
|
selected: selectedItem !== null,
|
|
149
151
|
disabled: disabled
|
|
150
152
|
}))), isOpen && /*#__PURE__*/React.createElement(OptionsList, _extends({
|
|
153
|
+
isMaxHeight: isMaxHeight,
|
|
151
154
|
selected: selectedItem !== null
|
|
152
155
|
}, getMenuProps()), options.map(function (item, index) {
|
|
153
156
|
return /*#__PURE__*/React.createElement(Option, getItemProps({
|
|
@@ -173,13 +176,15 @@ Dropdown.propTypes = {
|
|
|
173
176
|
value: oneOfType([string, number]),
|
|
174
177
|
selected: bool
|
|
175
178
|
})).isRequired,
|
|
176
|
-
onChange: func
|
|
179
|
+
onChange: func,
|
|
180
|
+
isMaxHeight: bool
|
|
177
181
|
};
|
|
178
182
|
Dropdown.defaultProps = {
|
|
179
183
|
label: '',
|
|
180
184
|
error: undefined,
|
|
181
185
|
full: false,
|
|
182
186
|
disabled: false,
|
|
183
|
-
onChange: function onChange() {}
|
|
187
|
+
onChange: function onChange() {},
|
|
188
|
+
isMaxHeight: true
|
|
184
189
|
};
|
|
185
190
|
export default Dropdown;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gympass/yoga",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.80.0",
|
|
4
4
|
"description": "Gympass component library",
|
|
5
5
|
"main": "./cjs",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"react-native": "0.72.3",
|
|
56
56
|
"styled-components": "^4.4.0"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "b09f7aecfc9457a0f2e2ce269cd07c2d6d1c175f",
|
|
59
59
|
"module": "./esm",
|
|
60
60
|
"types": "./typings/index.d.ts",
|
|
61
61
|
"private": false,
|