Skip to content

Commit

Permalink
Merge results
Browse files Browse the repository at this point in the history
  • Loading branch information
@ysmoradi
ysmoradi committed Aug 10, 2024
2 parents 83b9249 + 53d6f87 commit 75d9f23
Show file tree
Hide file tree
Showing 7 changed files with 278 additions and 168 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/prerelease.nuget.org.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ name: Prerelease nuget packages
on:
workflow_dispatch:
push:
branches:
- 'develop'
tags:
- 'v-*'

Expand Down
111 changes: 67 additions & 44 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,44 +20,59 @@
</label>
}

<div style="@Styles?.InputWrapper" class="bit-tpc-wrp @Classes?.InputWrapper" id="@_timePickerId" aria-owns="@(IsOpen ? _calloutId : null)" @onclick="HandleOnClick">
<div style="@Styles?.InputContainer" class="bit-tpc-icn @Classes?.InputContainer">
<input @ref="InputElement" @attributes="InputHtmlAttributes"
@onfocus="@HandleOnFocus"
@oninput="@HandleOnChange"
@onfocusin="@HandleOnFocusIn"
@onfocusout="@HandleOnFocusOut"
type="text"
name="@Name"
role="combobox"
id="@_inputId"
tabindex="@TabIndex"
aria-haspopup="dialog"
aria-label="@AriaLabel"
placeholder="@Placeholder"
value="@CurrentValueAsString"
disabled=@(IsEnabled is false)
readonly=@(AllowTextInput is false)
aria-expanded="@(IsOpen ? "true" : "false")"
aria-controls="@(IsOpen ? _calloutId : null)"
aria-labelledby="@(Label.HasValue() ? _labelId : null)"
style="@Styles?.Input"
class="bit-tpc-inp@(AllowTextInput ? " bit-tpc-ein" : null) @Classes?.Input" />
@if (Standalone is false)
{
<div style="@Styles?.InputWrapper" class="bit-tpc-wrp @Classes?.InputWrapper" id="@_timePickerId" aria-owns="@(IsOpen ? _calloutId : null)" @onclick="HandleOnClick">
<div style="@Styles?.InputContainer" class="bit-tpc-icn @Classes?.InputContainer">
<input @ref="InputElement" @attributes="InputHtmlAttributes"
@onfocus="@HandleOnFocus"
@oninput="@HandleOnChange"
@onfocusin="@HandleOnFocusIn"
@onfocusout="@HandleOnFocusOut"
type="text"
name="@Name"
role="combobox"
id="@_inputId"
tabindex="@TabIndex"
aria-haspopup="dialog"
aria-label="@AriaLabel"
placeholder="@Placeholder"
value="@CurrentValueAsString"
disabled="@(IsEnabled is false)"
readonly="@(AllowTextInput is false)"
aria-expanded="@(IsOpen ? "true" : "false")"
aria-controls="@(IsOpen ? _calloutId : null)"
aria-labelledby="@(Label.HasValue() ? _labelId : null)"
style="@Styles?.Input"
class="bit-tpc-inp@(AllowTextInput ? " bit-tpc-ein" : null) @Classes?.Input" />

@if (IconTemplate is not null)
{
@IconTemplate
}
else
{
<i style="@Styles?.Icon" class="bit-tpc-ico bit-icon bit-icon--@IconName @Classes?.Icon" aria-hidden="true" />
}
@if (IconTemplate is not null)
{
@IconTemplate
}
else
{
<i style="@Styles?.Icon" class="bit-tpc-ico bit-icon bit-icon--@IconName @Classes?.Icon" aria-hidden="true" />
}
</div>
</div>
</div>

<div @onclick="CloseCallout"
style="display:@(IsOpen ? "block" : "none"); @Styles?.Overlay"
class="bit-tpc-ovl @Classes?.Overlay"></div>
<div @onclick="CloseCallout"
style="display:@(IsOpen ? "block" : "none"); @Styles?.Overlay"
class="bit-tpc-ovl @Classes?.Overlay"></div>
}
else
{
<input @ref="InputElement" @attributes="InputHtmlAttributes"
type="text"
name="@Name"
id="@_inputId"
aria-label="@AriaLabel"
class="bit-input-hidden"
value="@CurrentValueAsString"
disabled="@(IsEnabled is false)"
readonly="@(AllowTextInput is false)" />
}

<div style="@Styles?.Callout" class="bit-tpc-cal @Classes?.Callout" id="@_calloutId">
<div style="@Styles?.CalloutContainer" class="bit-tpc-cac @Classes?.CalloutContainer" role="dialog" @attributes=@CalloutHtmlAttributes aria-label="@CalloutAriaLabel">
Expand All @@ -68,7 +83,8 @@
@onpointerdown="() => HandleOnPointerDown(true, true)"
type="button"
style="@Styles?.IncreaseHourButton"
class="bit-tpc-tbt @Classes?.IncreaseHourButton">
class="bit-tpc-tbt @Classes?.IncreaseHourButton"
disabled="@(IsEnabled is false)">
<i style="@Styles?.IncreaseHourIcon" class="bit-icon bit-icon--ChevronUpSmall @Classes?.IncreaseHourIcon" aria-hidden="true" />
</button>
<input @ref="_inputHourRef"
Expand All @@ -81,13 +97,15 @@
inputmode="numeric"
style="@Styles?.HourInput"
class="bit-tpc-tin @Classes?.HourInput"
autocomplete="@BitAutoCompleteValue.NewPassword" />
autocomplete="@BitAutoCompleteValue.NewPassword"
disabled="@(IsEnabled is false)" />
<button @onpointerup="HandleOnPointerUpOrOut"
@onpointerout="HandleOnPointerUpOrOut"
@onpointerdown="() => HandleOnPointerDown(false, true)"
type="button"
style="@Styles?.DecreaseHourButton"
class="bit-tpc-tbt @Classes?.DecreaseHourButton">
class="bit-tpc-tbt @Classes?.DecreaseHourButton"
disabled="@(IsEnabled is false)">
<i style="@Styles?.DecreaseHourIcon" class="bit-icon bit-icon--ChevronDownSmall @Classes?.DecreaseHourIcon" aria-hidden="true" />
</button>
</div>
Expand All @@ -98,7 +116,8 @@
@onpointerdown="() => HandleOnPointerDown(true, false)"
type="button"
style="@Styles?.IncreaseMinuteButton"
class="bit-tpc-tbt @Classes?.IncreaseMinuteButton">
class="bit-tpc-tbt @Classes?.IncreaseMinuteButton"
disabled="@(IsEnabled is false)">
<i style="@Styles?.IncreaseMinuteIcon" class="bit-icon bit-icon--ChevronUpSmall @Classes?.IncreaseMinuteIcon" aria-hidden="true" />
</button>
<input @ref="_inputMinuteRef"
Expand All @@ -111,13 +130,15 @@
inputmode="numeric"
style="@Styles?.MinuteInput"
class="bit-tpc-tin @Classes?.MinuteInput"
autocomplete="@BitAutoCompleteValue.NewPassword" />
autocomplete="@BitAutoCompleteValue.NewPassword"
disabled="@(IsEnabled is false)" />
<button @onpointerup="HandleOnPointerUpOrOut"
@onpointerout="HandleOnPointerUpOrOut"
@onpointerdown="() => HandleOnPointerDown(false, false)"
type="button"
style="@Styles?.DecreaseMinuteButton"
class="bit-tpc-tbt @Classes?.DecreaseMinuteButton">
class="bit-tpc-tbt @Classes?.DecreaseMinuteButton"
disabled="@(IsEnabled is false)">
<i style="@Styles?.DecreaseMinuteIcon" class="bit-icon bit-icon--ChevronDownSmall @Classes?.DecreaseMinuteIcon" aria-hidden="true" />
</button>
</div>
Expand All @@ -129,20 +150,22 @@
<button @onclick="HandleOnAmClick"
type="button"
style="@Styles?.AmButton"
class="bit-tpc-tbt bit-tpc-bam @(IsAm() is true ? "bit-tpc-bns" : string.Empty) @Classes?.AmButton">
class="bit-tpc-tbt bit-tpc-bam @(IsAm() is true ? "bit-tpc-bns" : string.Empty) @Classes?.AmButton"
disabled="@(IsEnabled is false)">
@_culture.DateTimeFormat.AMDesignator
</button>

<button @onclick="HandleOnPmClick"
type="button"
style="@Styles?.PmButton"
class="bit-tpc-tbt bit-tpc-bpm @(IsAm() is false ? "bit-tpc-bns" : string.Empty) @Classes?.PmButton">
class="bit-tpc-tbt bit-tpc-bpm @(IsAm() is false ? "bit-tpc-bns" : string.Empty) @Classes?.PmButton"
disabled="@(IsEnabled is false)">
@_culture.DateTimeFormat.PMDesignator
</button>
</div>
}

@if (ShowCloseButton)
@if (ShowCloseButton && Standalone is false)
{
<button @onclick="CloseCallout"
type="button"
Expand Down
18 changes: 17 additions & 1 deletion src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ private string? _hourView
}
set
{
if (IsEnabled is false) return;
if (int.TryParse(value, out int val) is false) return;

if (val > 23)
Expand All @@ -65,6 +66,7 @@ private string? _minuteView
get => _minute?.ToString("D2");
set
{
if (IsEnabled is false) return;
if (int.TryParse(value, out int val) is false) return;

if (val > 59)
Expand Down Expand Up @@ -228,6 +230,12 @@ private string? _minuteView
/// </summary>
[Parameter] public BitTimePickerClassStyles? Styles { get; set; }

/// <summary>
/// Whether the BitTimePicker is rendered standalone or with the input component and callout.
/// </summary>
[Parameter, ResetClassBuilder]
public bool Standalone { get; set; }

/// <summary>
/// The tabIndex of the TextField.
/// </summary>
Expand All @@ -244,10 +252,10 @@ private string? _minuteView
[Parameter] public string? ValueFormat { get; set; }



[JSInvokable("CloseCallout")]
public async Task CloseCalloutBeforeAnotherCalloutIsOpened()
{
if (Standalone) return;
if (IsEnabled is false) return;

if (await AssignIsOpen(false) is false) return;
Expand All @@ -271,6 +279,8 @@ protected override void RegisterCssClasses()

ClassBuilder.Register(() => HasBorder is false ? "bit-tpc-nbd" : string.Empty);

ClassBuilder.Register(() => Standalone ? "bit-tpc-sta" : string.Empty);

ClassBuilder.Register(() => _focusClass);
}

Expand Down Expand Up @@ -386,6 +396,7 @@ private async Task CloseCallout()

private async Task ToggleCallout()
{
if (Standalone) return;
if (IsEnabled is false) return;

await _js.ToggleCallout(_dotnetObj,
Expand Down Expand Up @@ -415,6 +426,7 @@ private async Task HandleOnChange(ChangeEventArgs e)

private async Task HandleOnClick()
{
if (Standalone) return;
if (IsEnabled is false) return;

if (await AssignIsOpen(true) is false) return;
Expand All @@ -433,12 +445,16 @@ private async Task UpdateCurrentValue()

private async Task HandleOnAmClick()
{
if (IsEnabled is false) return;

_hour %= 12; // "12:-- am" is "00:--" in 24h
await UpdateCurrentValue();
}

private async Task HandleOnPmClick()
{
if (IsEnabled is false) return;

if (_hour <= 12) // "12:-- pm" is "12:--" in 24h
{
_hour += 12;
Expand Down
20 changes: 20 additions & 0 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,11 @@
overflow: hidden;
aspect-ratio: 1;

&:disabled {
cursor: default;
color: $clr-fg-dis;
}

&::-webkit-inner-spin-button, // Chrome, Safari, Edge, Opera
&::-webkit-outer-spin-button {
-webkit-appearance: none;
Expand Down Expand Up @@ -301,6 +306,7 @@
}

&:disabled {
color: $clr-fg-dis;
pointer-events: none;
background-color: transparent;

Expand All @@ -320,6 +326,10 @@
color: $clr-pri-text;
background-color: $clr-pri;

&:disabled {
background-color: $clr-pri;
}

@media (hover: hover) {
&:hover {
background-color: $clr-pri-hover;
Expand All @@ -340,6 +350,16 @@
aspect-ratio: 1;
}

.bit-tpc-sta {
width: fit-content;

.bit-tpc-cal {
display: block;
z-index: unset;
position: relative;
}
}

.bit-tpc-rsp {
@media only screen and (max-width: 600px) {
.bit-tpc-tdv {
Expand Down
21 changes: 21 additions & 0 deletions .../Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,4 +231,25 @@
Placeholder="Select a time..." />
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Standalone" RazorCode="@example16RazorCode" Id="example16">
<ExamplePreview>
<div class="example-box">
<BitTimePicker Standalone
Label="Standalone picker" />

<br />
<BitTimePicker Standalone
TimeFormat="BitTimeFormat.TwelveHours"
Label="Picker (AM/PM)" />

<br />
<BitTimePicker Standalone
IsEnabled="false"
Value="new(10, 24, 0)"
TimeFormat="BitTimeFormat.TwelveHours"
Label="Disabled" />
</div>
</ExamplePreview>
</ComponentExampleBox>
</ComponentDemo>
Loading

0 comments on commit 75d9f23

Please sign in to comment.