@rpg-engine/long-bow 0.5.76 → 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/long-bow.cjs.development.js +10 -3
- 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 +10 -3
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AsyncDropdown.tsx +14 -1
package/package.json
CHANGED
|
@@ -15,6 +15,7 @@ export interface IAsyncDropdownProps {
|
|
|
15
15
|
width?: string;
|
|
16
16
|
onChange: (value: string) => void;
|
|
17
17
|
defaultValue?: string;
|
|
18
|
+
opensUp?: boolean;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
export const AsyncDropdown: React.FC<IAsyncDropdownProps> = ({
|
|
@@ -22,6 +23,7 @@ export const AsyncDropdown: React.FC<IAsyncDropdownProps> = ({
|
|
|
22
23
|
width,
|
|
23
24
|
onChange,
|
|
24
25
|
defaultValue,
|
|
26
|
+
opensUp = false,
|
|
25
27
|
}) => {
|
|
26
28
|
const dropdownId = uuidv4();
|
|
27
29
|
|
|
@@ -68,7 +70,11 @@ export const AsyncDropdown: React.FC<IAsyncDropdownProps> = ({
|
|
|
68
70
|
</DropdownDisplay>
|
|
69
71
|
</DropdownSelect>
|
|
70
72
|
|
|
71
|
-
<DropdownOptions
|
|
73
|
+
<DropdownOptions
|
|
74
|
+
className="rpgui-dropdown-imp"
|
|
75
|
+
opened={opened}
|
|
76
|
+
opensUp={opensUp}
|
|
77
|
+
>
|
|
72
78
|
{options?.map(option => (
|
|
73
79
|
<li
|
|
74
80
|
key={option.id}
|
|
@@ -113,6 +119,7 @@ const DropdownSelect = styled.p`
|
|
|
113
119
|
|
|
114
120
|
const DropdownOptions = styled.ul<{
|
|
115
121
|
opened: boolean;
|
|
122
|
+
opensUp: boolean; // Add a new prop to the styled component
|
|
116
123
|
}>`
|
|
117
124
|
position: absolute;
|
|
118
125
|
width: 100%;
|
|
@@ -120,6 +127,12 @@ const DropdownOptions = styled.ul<{
|
|
|
120
127
|
overflow-y: auto;
|
|
121
128
|
display: ${props => (props.opened ? 'block' : 'none')};
|
|
122
129
|
box-sizing: border-box;
|
|
130
|
+
bottom: ${props =>
|
|
131
|
+
props.opensUp ? '100%' : 'auto'}; // Adjust the position based on the prop
|
|
132
|
+
top: ${props =>
|
|
133
|
+
props.opensUp ? 'auto' : '100%'}; // Adjust the position based on the prop
|
|
134
|
+
margin: 0; // Remove default margin
|
|
135
|
+
padding: 0; // Remove default padding
|
|
123
136
|
|
|
124
137
|
@media (max-width: 768px) {
|
|
125
138
|
padding: 8px 0;
|