test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-02 12:07:44 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix(module: datepicker): incorrect in RTL mode (#1300)

Browse Source 
* fix(module: dropdown): default PlacementType is incorrect in RTL mode

* fix(module: datepicker): not correct in RTL mode

* fix(module: datepicker): styles is incorrect when switch to LTR from RTL

Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
笨木头 2021-04-06 20:02:53 +08:00 committed by GitHub
parent 6a8036ca57
commit d0922fbc50
4 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/core/Component/overlay/OverlayTrigger.razor.cs
View File

@ -151,6 +151,14 @@ namespace AntDesign.Internal
protected Overlay _overlay = null;
private ElementReference _triggerReference;
public override Task SetParametersAsync(ParameterView parameters)
{
_paramPlacement = RTL ? PlacementType.BottomRight : PlacementType.BottomLeft;
_placement = RTL ? PlacementType.BottomRight : PlacementType.BottomLeft;
return base.SetParametersAsync(parameters);
}
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)

2
components/date-picker/DatePicker.razor
View File

@ -3,7 +3,7 @@
@typeparam TValue
@using AntDesign.Internal;
<CascadingValue Value="_dropdownClassMapper.Class" Name="PrefixCls">
<CascadingValue Value='$"{PrefixCls}-dropdown"' Name="PrefixCls">
<OverlayTrigger @ref="@_dropDown"
Visible="Open"
IsButton="@true"

6
components/date-picker/RangePicker.razor
View File

@ -3,7 +3,7 @@
@typeparam TValue
@using AntDesign.Internal;
<CascadingValue Value="@_dropdownClassMapper.Class" Name="PrefixCls">
<CascadingValue Value='$"{PrefixCls}-dropdown"' Name="PrefixCls">
<OverlayTrigger @ref="_dropDown"
Visible="Open"
IsButton="@true"
@ -18,10 +18,10 @@
<div class="@(PrefixCls)-panel-container">
<div class="@(PrefixCls)-panels">
<div class="@_panelClassMapper.Class">
<DatePickerPanelChooser TValue="TValue" DatePicker="@this" PickerIndex="0" OnSelect="async (date, index) => await OnSelect(date)" />
<DatePickerPanelChooser TValue="TValue" DatePicker="@this" PickerIndex="@(RTL ? 1 : 0)" OnSelect="async (date, index) => await OnSelect(date)" />
</div>
<div class="@_panelClassMapper.Class">
<DatePickerPanelChooser TValue="TValue" DatePicker="@this" PickerIndex="1" OnSelect="async (date, index) => await OnSelect(date)" />
<DatePickerPanelChooser TValue="TValue" DatePicker="@this" PickerIndex="@(RTL ? 0 : 1)" OnSelect="async (date, index) => await OnSelect(date)" />
</div>
</div>
@if (RenderExtraFooter != null && !IsShowTime)

14
components/date-picker/internal/DatePickerBase.cs
View File

@ -241,7 +241,6 @@ namespace AntDesign
private CultureInfo _cultureInfo = LocaleProvider.CurrentLocale.CurrentCulture;
private DatePickerLocale _locale = LocaleProvider.CurrentLocale.DatePicker;
protected ClassMapper _dropdownClassMapper = new ClassMapper();
protected ClassMapper _panelClassMapper = new ClassMapper();
protected override void OnInitialized()
@ -278,10 +277,6 @@ namespace AntDesign
//.If($"{PrefixCls}-{Direction}", () => Direction.IsIn("ltr", "rlt"))
;
_dropdownClassMapper
.Add($"{PrefixCls}-dropdown")
.If($"{PrefixCls}-dropdown-rtl", () => RTL);
_panelClassMapper
.Add($"{PrefixCls}-panel")
.If($"{PrefixCls}-panel-rtl", () => RTL);
@ -302,7 +297,14 @@ namespace AntDesign
else if (_inputEnd.IsOnFocused)
{
Element element = await JsInvokeAsync<Element>(JSInteropConstants.GetDomInfo, _inputEnd.Ref);
_activeBarStyle = $"width: {element.clientWidth - 10}px; position: absolute; transform: translate3d({element.clientWidth + 16}px, 0px, 0px);";
int translateDistance = element.clientWidth + 16;
if (RTL)
{
translateDistance = -translateDistance;
}
_activeBarStyle = $"width: {element.clientWidth - 10}px; position: absolute; transform: translate3d({translateDistance}px, 0px, 0px);";
_rangeArrowStyle = $"left: {element.clientWidth + 30}px";
}
else