@rpg-engine/long-bow 0.5.75 → 0.5.77
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.
- package/dist/components/AsyncDropdown.d.ts +1 -0
- package/dist/components/Dropdown.d.ts +1 -0
- package/dist/long-bow.cjs.development.js +20 -10
- package/dist/long-bow.cjs.development.js.map +1 -1
- package/dist/long-bow.cjs.production.min.js +1 -1
- package/dist/long-bow.cjs.production.min.js.map +1 -1
- package/dist/long-bow.esm.js +20 -10
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AsyncDropdown.tsx +14 -1
- package/src/components/Dropdown.tsx +14 -6
- package/src/stories/Dropdown.stories.tsx +10 -2
|
@@ -50,7 +50,9 @@ var AsyncDropdown = function AsyncDropdown(_ref) {
|
|
|
50
50
|
var options = _ref.options,
|
|
51
51
|
width = _ref.width,
|
|
52
52
|
onChange = _ref.onChange,
|
|
53
|
-
defaultValue = _ref.defaultValue
|
|
53
|
+
defaultValue = _ref.defaultValue,
|
|
54
|
+
_ref$opensUp = _ref.opensUp,
|
|
55
|
+
opensUp = _ref$opensUp === void 0 ? false : _ref$opensUp;
|
|
54
56
|
var dropdownId = uuid.v4();
|
|
55
57
|
var _useState = React.useState(defaultValue || (options == null ? void 0 : (_options$ = options[0]) == null ? void 0 : _options$.value)),
|
|
56
58
|
selectedValue = _useState[0],
|
|
@@ -101,7 +103,8 @@ var AsyncDropdown = function AsyncDropdown(_ref) {
|
|
|
101
103
|
color: uiColors.white
|
|
102
104
|
}))), React__default.createElement(DropdownOptions, {
|
|
103
105
|
className: "rpgui-dropdown-imp",
|
|
104
|
-
opened: opened
|
|
106
|
+
opened: opened,
|
|
107
|
+
opensUp: opensUp
|
|
105
108
|
}, options == null ? void 0 : options.map(function (option) {
|
|
106
109
|
return React__default.createElement("li", {
|
|
107
110
|
key: option.id,
|
|
@@ -133,8 +136,12 @@ var DropdownSelect = /*#__PURE__*/styled__default.p.withConfig({
|
|
|
133
136
|
var DropdownOptions = /*#__PURE__*/styled__default.ul.withConfig({
|
|
134
137
|
displayName: "AsyncDropdown__DropdownOptions",
|
|
135
138
|
componentId: "sc-lk409c-4"
|
|
136
|
-
})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
|
|
139
|
+
})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;bottom:", ";top:", ";margin:0;padding:0;@media (max-width:768px){padding:8px 0;}"], function (props) {
|
|
137
140
|
return props.opened ? 'block' : 'none';
|
|
141
|
+
}, function (props) {
|
|
142
|
+
return props.opensUp ? '100%' : 'auto';
|
|
143
|
+
}, function (props) {
|
|
144
|
+
return props.opensUp ? 'auto' : '100%';
|
|
138
145
|
});
|
|
139
146
|
|
|
140
147
|
function _extends() {
|
|
@@ -14892,7 +14899,9 @@ var ItemTypes = /*#__PURE__*/styled__default.div.withConfig({
|
|
|
14892
14899
|
var Dropdown = function Dropdown(_ref) {
|
|
14893
14900
|
var options = _ref.options,
|
|
14894
14901
|
width = _ref.width,
|
|
14895
|
-
onChange = _ref.onChange
|
|
14902
|
+
onChange = _ref.onChange,
|
|
14903
|
+
_ref$opensUp = _ref.opensUp,
|
|
14904
|
+
opensUp = _ref$opensUp === void 0 ? false : _ref$opensUp;
|
|
14896
14905
|
var dropdownId = uuid.v4();
|
|
14897
14906
|
var _useState = React.useState(''),
|
|
14898
14907
|
selectedValue = _useState[0],
|
|
@@ -14912,10 +14921,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
14912
14921
|
return o.value === selectedValue;
|
|
14913
14922
|
}).length < 1;
|
|
14914
14923
|
}
|
|
14915
|
-
/**
|
|
14916
|
-
* make a selection if there is no selected value already present
|
|
14917
|
-
* or if there is a selected value but its not in new options
|
|
14918
|
-
*/
|
|
14919
14924
|
if (change) {
|
|
14920
14925
|
setSelectedValue(firstOption.value);
|
|
14921
14926
|
setSelectedOption(firstOption.option);
|
|
@@ -14942,7 +14947,8 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
14942
14947
|
}
|
|
14943
14948
|
}, React__default.createElement("label", null, "\u25BC"), " ", selectedOption), React__default.createElement(DropdownOptions$1, {
|
|
14944
14949
|
className: "rpgui-dropdown-imp",
|
|
14945
|
-
opened: opened
|
|
14950
|
+
opened: opened,
|
|
14951
|
+
opensUp: opensUp
|
|
14946
14952
|
}, options.map(function (option) {
|
|
14947
14953
|
return React__default.createElement("li", {
|
|
14948
14954
|
key: option.id,
|
|
@@ -14967,8 +14973,12 @@ var DropdownSelect$1 = /*#__PURE__*/styled__default.p.withConfig({
|
|
|
14967
14973
|
var DropdownOptions$1 = /*#__PURE__*/styled__default.ul.withConfig({
|
|
14968
14974
|
displayName: "Dropdown__DropdownOptions",
|
|
14969
14975
|
componentId: "sc-8arn65-2"
|
|
14970
|
-
})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
|
|
14976
|
+
})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;bottom:", ";top:", ";margin:0;padding:0;@media (max-width:768px){padding:8px 0;}"], function (props) {
|
|
14971
14977
|
return props.opened ? 'block' : 'none';
|
|
14978
|
+
}, function (props) {
|
|
14979
|
+
return props.opensUp ? '100%' : 'auto';
|
|
14980
|
+
}, function (props) {
|
|
14981
|
+
return props.opensUp ? 'auto' : '100%';
|
|
14972
14982
|
});
|
|
14973
14983
|
|
|
14974
14984
|
var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
|