@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
package/dist/long-bow.esm.js
CHANGED
|
@@ -42,7 +42,9 @@ var AsyncDropdown = function AsyncDropdown(_ref) {
|
|
|
42
42
|
var options = _ref.options,
|
|
43
43
|
width = _ref.width,
|
|
44
44
|
onChange = _ref.onChange,
|
|
45
|
-
defaultValue = _ref.defaultValue
|
|
45
|
+
defaultValue = _ref.defaultValue,
|
|
46
|
+
_ref$opensUp = _ref.opensUp,
|
|
47
|
+
opensUp = _ref$opensUp === void 0 ? false : _ref$opensUp;
|
|
46
48
|
var dropdownId = v4();
|
|
47
49
|
var _useState = useState(defaultValue || (options == null ? void 0 : (_options$ = options[0]) == null ? void 0 : _options$.value)),
|
|
48
50
|
selectedValue = _useState[0],
|
|
@@ -93,7 +95,8 @@ var AsyncDropdown = function AsyncDropdown(_ref) {
|
|
|
93
95
|
color: uiColors.white
|
|
94
96
|
}))), React.createElement(DropdownOptions, {
|
|
95
97
|
className: "rpgui-dropdown-imp",
|
|
96
|
-
opened: opened
|
|
98
|
+
opened: opened,
|
|
99
|
+
opensUp: opensUp
|
|
97
100
|
}, options == null ? void 0 : options.map(function (option) {
|
|
98
101
|
return React.createElement("li", {
|
|
99
102
|
key: option.id,
|
|
@@ -125,8 +128,12 @@ var DropdownSelect = /*#__PURE__*/styled.p.withConfig({
|
|
|
125
128
|
var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
|
|
126
129
|
displayName: "AsyncDropdown__DropdownOptions",
|
|
127
130
|
componentId: "sc-lk409c-4"
|
|
128
|
-
})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
|
|
131
|
+
})(["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) {
|
|
129
132
|
return props.opened ? 'block' : 'none';
|
|
133
|
+
}, function (props) {
|
|
134
|
+
return props.opensUp ? '100%' : 'auto';
|
|
135
|
+
}, function (props) {
|
|
136
|
+
return props.opensUp ? 'auto' : '100%';
|
|
130
137
|
});
|
|
131
138
|
|
|
132
139
|
function _extends() {
|
|
@@ -14886,7 +14893,9 @@ var ItemTypes = /*#__PURE__*/styled.div.withConfig({
|
|
|
14886
14893
|
var Dropdown = function Dropdown(_ref) {
|
|
14887
14894
|
var options = _ref.options,
|
|
14888
14895
|
width = _ref.width,
|
|
14889
|
-
onChange = _ref.onChange
|
|
14896
|
+
onChange = _ref.onChange,
|
|
14897
|
+
_ref$opensUp = _ref.opensUp,
|
|
14898
|
+
opensUp = _ref$opensUp === void 0 ? false : _ref$opensUp;
|
|
14890
14899
|
var dropdownId = v4();
|
|
14891
14900
|
var _useState = useState(''),
|
|
14892
14901
|
selectedValue = _useState[0],
|
|
@@ -14906,10 +14915,6 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
14906
14915
|
return o.value === selectedValue;
|
|
14907
14916
|
}).length < 1;
|
|
14908
14917
|
}
|
|
14909
|
-
/**
|
|
14910
|
-
* make a selection if there is no selected value already present
|
|
14911
|
-
* or if there is a selected value but its not in new options
|
|
14912
|
-
*/
|
|
14913
14918
|
if (change) {
|
|
14914
14919
|
setSelectedValue(firstOption.value);
|
|
14915
14920
|
setSelectedOption(firstOption.option);
|
|
@@ -14936,7 +14941,8 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
14936
14941
|
}
|
|
14937
14942
|
}, React.createElement("label", null, "\u25BC"), " ", selectedOption), React.createElement(DropdownOptions$1, {
|
|
14938
14943
|
className: "rpgui-dropdown-imp",
|
|
14939
|
-
opened: opened
|
|
14944
|
+
opened: opened,
|
|
14945
|
+
opensUp: opensUp
|
|
14940
14946
|
}, options.map(function (option) {
|
|
14941
14947
|
return React.createElement("li", {
|
|
14942
14948
|
key: option.id,
|
|
@@ -14961,8 +14967,12 @@ var DropdownSelect$1 = /*#__PURE__*/styled.p.withConfig({
|
|
|
14961
14967
|
var DropdownOptions$1 = /*#__PURE__*/styled.ul.withConfig({
|
|
14962
14968
|
displayName: "Dropdown__DropdownOptions",
|
|
14963
14969
|
componentId: "sc-8arn65-2"
|
|
14964
|
-
})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
|
|
14970
|
+
})(["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) {
|
|
14965
14971
|
return props.opened ? 'block' : 'none';
|
|
14972
|
+
}, function (props) {
|
|
14973
|
+
return props.opensUp ? '100%' : 'auto';
|
|
14974
|
+
}, function (props) {
|
|
14975
|
+
return props.opensUp ? 'auto' : '100%';
|
|
14966
14976
|
});
|
|
14967
14977
|
|
|
14968
14978
|
var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
|