@rpg-engine/long-bow 0.3.89 → 0.3.90
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/long-bow.cjs.development.js +19 -7
- 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 +19 -7
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CraftBook/CraftBook.tsx +3 -0
- package/src/components/DraggableContainer.tsx +4 -0
- package/src/components/Dropdown.tsx +21 -7
- package/src/components/TradingMenu/TradingMenu.tsx +3 -0
- package/src/stories/Dropdown.stories.tsx +1 -1
package/package.json
CHANGED
|
@@ -28,9 +28,20 @@ export const Dropdown: React.FC<IDropdownProps> = ({
|
|
|
28
28
|
useEffect(() => {
|
|
29
29
|
const firstOption = options[0];
|
|
30
30
|
|
|
31
|
-
if (firstOption
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
if (firstOption) {
|
|
32
|
+
let change = !selectedValue;
|
|
33
|
+
if (!change) {
|
|
34
|
+
change = options.filter((o) => o.value === selectedValue).length < 1;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* make a selection if there is no selected value already present
|
|
39
|
+
* or if there is a selected value but its not in new options
|
|
40
|
+
*/
|
|
41
|
+
if (change) {
|
|
42
|
+
setSelectedValue(firstOption.value);
|
|
43
|
+
setSelectedOption(firstOption.option);
|
|
44
|
+
}
|
|
34
45
|
}
|
|
35
46
|
}, [options]);
|
|
36
47
|
|
|
@@ -45,13 +56,13 @@ export const Dropdown: React.FC<IDropdownProps> = ({
|
|
|
45
56
|
<DropdownSelect
|
|
46
57
|
id={`dropdown-${dropdownId}`}
|
|
47
58
|
className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
|
|
48
|
-
onPointerDown={() => setOpened(prev => !prev)}
|
|
59
|
+
onPointerDown={() => setOpened((prev) => !prev)}
|
|
49
60
|
>
|
|
50
61
|
<label>▼</label> {selectedOption}
|
|
51
62
|
</DropdownSelect>
|
|
52
63
|
|
|
53
64
|
<DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
|
|
54
|
-
{options.map(option => {
|
|
65
|
+
{options.map((option) => {
|
|
55
66
|
return (
|
|
56
67
|
<li
|
|
57
68
|
key={option.id}
|
|
@@ -72,7 +83,7 @@ export const Dropdown: React.FC<IDropdownProps> = ({
|
|
|
72
83
|
|
|
73
84
|
const Container = styled.div<{ width: string | undefined }>`
|
|
74
85
|
position: relative;
|
|
75
|
-
width: ${props => props.width || '100%'};
|
|
86
|
+
width: ${(props) => props.width || '100%'};
|
|
76
87
|
`;
|
|
77
88
|
|
|
78
89
|
const DropdownSelect = styled.p`
|
|
@@ -85,6 +96,9 @@ const DropdownOptions = styled.ul<{
|
|
|
85
96
|
}>`
|
|
86
97
|
position: absolute;
|
|
87
98
|
width: 100%;
|
|
88
|
-
display: ${props => (props.opened ? 'block' : 'none')};
|
|
99
|
+
display: ${(props) => (props.opened ? 'block' : 'none')};
|
|
89
100
|
box-sizing: border-box;
|
|
101
|
+
@media (max-width: 768px) {
|
|
102
|
+
padding: 8px 0;
|
|
103
|
+
}
|
|
90
104
|
`;
|