Skip to content

Commit 7cf6760

Browse files
msynkmsynk
authored
feat(blazorui): add PanelPosition parameter to BitDropdown component #11118 (#11121)
1 parent 653d566 commit 7cf6760

File tree

5 files changed

+117
-32
lines changed

5 files changed

+117
-32
lines changed

‎src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
using System.ComponentModel;
2-
3-
namespace Bit.BlazorUI;
1+
namespace Bit.BlazorUI;
42

53
/// <summary>
64
/// DropMenu component is a versatile dropdown menu used in Blazor applications. It allows you to create a button that, when clicked, opens a callout or dropdown menu.
@@ -58,6 +56,11 @@ public partial class BitDropMenu : BitComponentBase
5856
/// </summary>
5957
[Parameter] public EventCallback OnDismiss { get; set; }
6058

59+
/// <summary>
60+
/// The position of the responsive panel to show on the screen.
61+
/// </summary>
62+
[Parameter] public BitPanelPosition? PanelPosition { get; set; }
63+
6164
/// <summary>
6265
/// The id of the element which needs to be scrollable in the content of the callout of the drop menu.
6366
/// </summary>
@@ -163,7 +166,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
163166
await _js.BitSwipesSetup(
164167
id: _calloutId,
165168
trigger: 0.25m,
166-
position: BitPanelPosition.End,
169+
position: PanelPosition ?? BitPanelPosition.End,
167170
isRtl: Dir is BitDir.Rtl,
168171
orientationLock: BitSwipeOrientation.Horizontal,
169172
dotnetObj: _dotnetObj,
@@ -244,6 +247,15 @@ private string GetCalloutCssClasses()
244247
classes.Add("bit-drm-res");
245248
}
246249

250+
classes.Add(PanelPosition switch
251+
{
252+
BitPanelPosition.Start => "bit-drm-sta",
253+
BitPanelPosition.End => "bit-drm-end",
254+
BitPanelPosition.Top => "bit-drm-top",
255+
BitPanelPosition.Bottom => "bit-drm-btm",
256+
_ => "bit-drm-end"
257+
});
258+
247259
return string.Join(' ', classes).Trim();
248260
}
249261

‎src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88
font-weight: $tg-font-weight;
99
background-color: $clr-bg-pri;
1010
border-radius: $shp-border-radius;
11+
--bit-drm-transform-factor: 1;
12+
13+
&.bit-rtl {
14+
--bit-drm-transform-factor: -1;
15+
}
1116

1217
@media (hover: hover) {
1318
&:hover {
@@ -83,26 +88,41 @@
8388

8489
.bit-drm-res {
8590
@include lt-sm {
86-
top: 0;
87-
right: 0;
8891
opacity: 0;
8992
height: 100%;
9093
display: block;
9194
overflow: hidden;
9295
max-height: unset;
9396
animation-name: unset;
94-
transform: translateX(100%);
9597
box-shadow: $box-shadow-callout;
9698
transition: transform 200ms ease-out, opacity 100ms linear;
97-
}
98-
}
9999

100-
.bit-rtl {
101-
.bit-drm-res {
102-
@include lt-sm {
103-
left: 0;
104-
right: unset;
105-
transform: translateX(-100%);
100+
&.bit-drm-sta {
101+
inset-block: 0;
102+
inset-inline-start: 0;
103+
transform: translateX(calc(var(--bit-drm-transform-factor) * -100%));
104+
}
105+
106+
&.bit-drm-end {
107+
inset-block: 0;
108+
inset-inline-end: 0;
109+
transform: translateX(calc(var(--bit-drm-transform-factor) * 100%));
110+
}
111+
112+
&.bit-drm-top {
113+
top: 0;
114+
width: 100%;
115+
max-width: 100%;
116+
inset-inline: 0;
117+
transform: translateY(-100%);
118+
}
119+
120+
&.bit-drm-btm {
121+
bottom: 0;
122+
width: 100%;
123+
max-width: 100%;
124+
inset-inline: 0;
125+
transform: translateY(100%);
106126
}
107127
}
108128
}

‎src/BlazorUI/Bit.BlazorUI/Scripts/Swipes.ts‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,8 @@
121121
if (!e.cancelable) return;
122122

123123
if (touchOnScrollContainer) {
124-
const isScrollAtLeft = Math.abs(scrollContainer!.scrollLeft) <= 2;
125-
const isScrollAtRight = scrollContainer!.scrollLeft + scrollContainer!.clientWidth >= (scrollContainer!.scrollWidth - 2);
126-
124+
const [isScrollAtLeft, isScrollAtRight] = calcScrolls();
125+
127126
if (diffX < 0 && (isRtl ? isScrollAtRight : isScrollAtLeft)) return;
128127
if (diffX > 0 && (isRtl ? isScrollAtLeft : isScrollAtRight)) return;
129128
}
@@ -135,6 +134,7 @@
135134

136135
const onEnd = async (e: TouchEvent | PointerEvent): Promise<void> => {
137136
touchOnScrollContainer = false;
137+
138138
if (startX === -1 || startY === -1) return;
139139

140140
startX = startY = -1;
@@ -186,7 +186,10 @@
186186
scrollContainer.addEventListener('touchstart', e => {
187187
touchOnScrollContainer = true;
188188

189-
if (Math.abs(scrollContainer.scrollLeft) <= 2) return;
189+
const [isScrollAtLeft, isScrollAtRight] = calcScrolls();
190+
191+
if (position === BitSwipePosition.End && isScrollAtLeft) return;
192+
if (position === BitSwipePosition.Start && isScrollAtRight) return;
190193

191194
e.stopPropagation();
192195
});
@@ -215,6 +218,13 @@
215218
}
216219
});
217220
Swipes._swipes.push(swipe);
221+
222+
const calcScrolls = () => {
223+
const isScrollAtLeft = Math.abs(scrollContainer!.scrollLeft) <= 2;
224+
const isScrollAtRight = Math.abs(scrollContainer!.scrollLeft) + scrollContainer!.clientWidth >= (scrollContainer!.scrollWidth - 2);
225+
226+
return [isScrollAtLeft, isScrollAtRight];
227+
}
218228
}
219229

220230
public static dispose(id: string) {

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,21 @@
5353

5454
<DemoExample Title="Responsive" RazorCode="@example3RazorCode" Id="example3">
5555
<div>Rendering the callout in responsive mode on small screens.</div><br />
56-
<BitDropMenu Text="Responsive" Responsive ScrollContainerId="sc-con">
57-
<div style="max-width:200px;overflow:auto" id="sc-con">
58-
<BitStack Gap="1rem" Style="padding:0.5rem">
56+
57+
<BitDropMenu Text="End PanelPosition" Responsive ScrollContainerId="sc-con1" PanelPosition="BitPanelPosition.End">
58+
<div style="max-width:200px;overflow:auto" id="sc-con1">
59+
<BitStack FitWidth Gap="1rem" Style="padding:0.5rem">
60+
<BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content This is the content This is the content</BitText>
61+
<BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content</BitText>
62+
<BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content</BitText>
63+
<BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content</BitText>
64+
</BitStack>
65+
</div>
66+
</BitDropMenu>
67+
<br />
68+
<BitDropMenu Text="Start PanelPosition" Responsive ScrollContainerId="sc-con2" PanelPosition="BitPanelPosition.Start">
69+
<div style="max-width:200px;overflow:auto" id="sc-con2">
70+
<BitStack FitWidth Gap="1rem" Style="padding:0.5rem">
5971
<BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content This is the content This is the content</BitText>
6072
<BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content</BitText>
6173
<BitText Typography="BitTypography.Subtitle1" NoWrap>This is the content</BitText>
@@ -142,8 +154,18 @@
142154
</BitStack>
143155
</BitDropMenu>
144156
<br />
145-
<BitDropMenu Text="ریسپانسیو منو" Dir="BitDir.Rtl" Responsive ScrollContainerId="sc-con-rtl">
146-
<div style="max-width:200px;overflow:auto" id="sc-con-rtl">
157+
<BitDropMenu Text="ریسپانسیو منو در انتها" Dir="BitDir.Rtl" Responsive ScrollContainerId="sc-con-rtl1">
158+
<div style="max-width:200px;overflow:auto" id="sc-con-rtl1">
159+
<BitStack Gap="1rem" Style="padding:0.5rem">
160+
<BitText Typography="BitTypography.Subtitle1" NoWrap>این یک محتوای تستی می باشد این یک محتوای تستی می باشد این یک محتوای تستی می باشد</BitText>
161+
<BitText Typography="BitTypography.Subtitle1" NoWrap>این یک محتوای تستی می باشد</BitText>
162+
<BitText Typography="BitTypography.Subtitle1" NoWrap>این یک محتوای تستی می باشد</BitText>
163+
</BitStack>
164+
</div>
165+
</BitDropMenu>
166+
<br />
167+
<BitDropMenu Text="ریسپانسیو منو در ابتدا" Dir="BitDir.Rtl" Responsive ScrollContainerId="sc-con-rtl2" PanelPosition="BitPanelPosition.Start">
168+
<div style="max-width:200px;overflow:auto" id="sc-con-rtl2">
147169
<BitStack Gap="1rem" Style="padding:0.5rem">
148170
<BitText Typography="BitTypography.Subtitle1" NoWrap>این یک محتوای تستی می باشد این یک محتوای تستی می باشد این یک محتوای تستی می باشد</BitText>
149171
<BitText Typography="BitTypography.Subtitle1" NoWrap>این یک محتوای تستی می باشد</BitText>

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/DropMenu/BitDropMenuDemo.razor.samples.cs‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,24 @@ public partial class BitDropMenuDemo
4141
</BitDropMenu>";
4242

4343
private readonly string example3RazorCode = @"
44-
<BitDropMenu Text=""Responsive"" Responsive ScrollContainerId=""sc-con"">
45-
<div style=""max-width:200px;overflow:auto"" id=""sc-con"">
46-
<BitStack Gap=""1rem"" Style=""padding:0.5rem"">
44+
<BitDropMenu Text=""End PanelPosition"" Responsive ScrollContainerId=""sc-con1"" PanelPosition=""BitPanelPosition.End"">
45+
<div style=""max-width:200px;overflow:auto"" id=""sc-con1"">
46+
<BitStack FitWidth Gap=""1rem"" Style=""padding:0.5rem"">
4747
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>This is the content This is the content This is the content</BitText>
48-
<BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
49-
<BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
50-
<BitText Typography=""BitTypography.Subtitle1"">This is the content</BitText>
48+
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>This is the content</BitText>
49+
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>This is the content</BitText>
50+
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>This is the content</BitText>
51+
</BitStack>
52+
</div>
53+
</BitDropMenu>
54+
55+
<BitDropMenu Text=""Start PanelPosition"" Responsive ScrollContainerId=""sc-con2"" PanelPosition=""BitPanelPosition.Start"">
56+
<div style=""max-width:200px;overflow:auto"" id=""sc-con2"">
57+
<BitStack FitWidth Gap=""1rem"" Style=""padding:0.5rem"">
58+
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>This is the content This is the content This is the content</BitText>
59+
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>This is the content</BitText>
60+
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>This is the content</BitText>
61+
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>This is the content</BitText>
5162
</BitStack>
5263
</div>
5364
</BitDropMenu>";
@@ -150,8 +161,18 @@ public partial class BitDropMenuDemo
150161
</BitStack>
151162
</BitDropMenu>
152163
153-
<BitDropMenu Text=""ریسپانسیو منو"" Dir=""BitDir.Rtl"" Responsive ScrollContainerId=""sc-con-rtl"">
154-
<div style=""max-width:200px;overflow:auto"" id=""sc-con-rtl"">
164+
<BitDropMenu Text=""ریسپانسیو منو در انتها"" Dir=""BitDir.Rtl"" Responsive ScrollContainerId=""sc-con-rtl1"">
165+
<div style=""max-width:200px;overflow:auto"" id=""sc-con-rtl1"">
166+
<BitStack Gap=""1rem"" Style=""padding:0.5rem"">
167+
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>این یک محتوای تستی می باشد این یک محتوای تستی می باشد این یک محتوای تستی می باشد</BitText>
168+
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>این یک محتوای تستی می باشد</BitText>
169+
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>این یک محتوای تستی می باشد</BitText>
170+
</BitStack>
171+
</div>
172+
</BitDropMenu>
173+
174+
<BitDropMenu Text=""ریسپانسیو منو در ابتدا"" Dir=""BitDir.Rtl"" Responsive ScrollContainerId=""sc-con-rtl2"" PanelPosition=""BitPanelPosition.Start"">
175+
<div style=""max-width:200px;overflow:auto"" id=""sc-con-rtl2"">
155176
<BitStack Gap=""1rem"" Style=""padding:0.5rem"">
156177
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>این یک محتوای تستی می باشد این یک محتوای تستی می باشد این یک محتوای تستی می باشد</BitText>
157178
<BitText Typography=""BitTypography.Subtitle1"" NoWrap>این یک محتوای تستی می باشد</BitText>

0 commit comments

Comments
 (0)