TimeSpanPicker: adjust demos and add new

RadzenBlazorDemos/Pages/TimeSpanPickerConfig.razor

@@ -0,0 +1,57 @@
+<RadzenFieldset AllowCollapse="false" Text="Field config">
+    <RadzenStack Orientation="Orientation.Horizontal" Gap="1.5rem" Wrap="FlexWrap.Wrap">
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+            <RadzenCheckBox @bind-Value="@allowClear" Name="AllowClear" />
+            <RadzenLabel Text="Allow clear" Component="AllowClear" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+            <RadzenCheckBox @bind-Value="@allowInput" Name="AllowInput" />
+            <RadzenLabel Text="Allow input" Component="AllowInput" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+            <RadzenCheckBox @bind-Value="@readOnly" Name="ReadOnly" />
+            <RadzenLabel Text="Read only" Component="ReadOnly" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+            <RadzenCheckBox @bind-Value="@disabled" Name="Disabled" />
+            <RadzenLabel Text="Disabled" Component="Disabled" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+            <RadzenCheckBox @bind-Value="@showPopupButton" Name="ShowPopupButton" />
+            <RadzenLabel Text="Show popup button" Component="ShowPopupButton" />
+        </RadzenStack>
+    </RadzenStack>
+</RadzenFieldset>
+<RadzenFieldset AllowCollapse="false" Text="Panel config">
+    <RadzenStack Orientation="Orientation.Horizontal" Gap="1.5rem" Wrap="FlexWrap.Wrap">
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+            <RadzenLabel Text="Field precision" Component="FieldPrecision" />
+            <RadzenDropDown Name="FieldPrecision" @bind-Value="@fieldPrecision" Data="@(Enum.GetValues<TimeSpanUnit>())" Style="width: 9rem;" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+            <RadzenCheckBox @bind-Value="@padTimeValues" Name="PadTimeValues" />
+            <RadzenLabel Text="Pad time values" Component="PadTimeValues" />
+        </RadzenStack>
+        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+            <RadzenCheckBox @bind-Value="@showConfirmationButton" Name="ShowConfirmationButton" />
+            <RadzenLabel Text="Show confirmation button" Component="ShowConfirmationButton" />
+        </RadzenStack>
+    </RadzenStack>
+</RadzenFieldset>
+<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-p-12">
+    <RadzenLabel Text="Select Time Span" Component="RadzenTimeSpanPickerBoolConfig" />
+    <RadzenTimeSpanPicker Name="RadzenTimeSpanPickerBoolConfig" @bind-Value="@value" AllowClear="@allowClear" AllowInput="@allowInput" ReadOnly="@readOnly" Disabled="@disabled" ShowPopupButton="@showPopupButton" FieldPrecision="@fieldPrecision" PadTimeValues="@padTimeValues" ShowConfirmationButton="@showConfirmationButton" />
+</RadzenStack>
+
+@code {
+    TimeSpan? value;
+
+    bool allowClear = true;
+    bool allowInput = true;
+    bool readOnly = false;
+    bool disabled = false;
+    bool padTimeValues = false;
+    bool showPopupButton = false;
+    bool showConfirmationButton = false;
+    TimeSpanUnit fieldPrecision = TimeSpanUnit.Second;
+}

RadzenBlazorDemos/Pages/TimeSpanPickerFormat.razor

@@ -1,8 +1,9 @@
 <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-p-12">
     <RadzenLabel Text="Select Time Span" Component="RadzenTimeSpanPickerFormat"/>
-    <RadzenTimeSpanPicker @bind-Value="@value" Name="RadzenTimeSpanPickerFormat" TimeSpanFormat="d'd 'h'h 'm'min 's's'" />
+    <RadzenTimeSpanPicker @bind-Value="@value" Name="RadzenTimeSpanPickerFormat" TimeSpanFormat="@timeSpanFormat" />
 </RadzenStack>
 
 @code {
+    string timeSpanFormat => (value < TimeSpan.Zero ? "'-'" : "") + "d'd 'h'h 'm'min 's's'";
     TimeSpan? value = new TimeSpan(1, 12, 30, 0);
 }

RadzenBlazorDemos/Pages/TimeSpanPickerInline.razor

@@ -0,0 +1,8 @@
+<RadzenStack Orientation="Orientation.Vertical" JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-p-12">
+    <RadzenTimeSpanPicker @bind-Value="@value" Inline />
+    <div>@value</div>
+</RadzenStack>
+
+@code {
+    TimeSpan? value;
+}

RadzenBlazorDemos/Pages/TimeSpanPickerPage.razor

@@ -35,13 +35,39 @@
     <TimeSpanPickerFormat />
 </RadzenExample>
 
-<RadzenText Anchor="timespanpicker#min-max-dates" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
+<RadzenText Anchor="timespanpicker#min-max-values" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
     Set Min and Max values
 </RadzenText>
 <RadzenExample ComponentName="TimeSpanPicker" Example="TimeSpanPickerMinMax">
     <TimeSpanPickerMinMax />
 </RadzenExample>
 
+<RadzenText Anchor="timespanpicker#inline" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
+    Inline picker
+</RadzenText>
+<RadzenExample ComponentName="TimeSpanPicker" Example="TimeSpanPickerInline">
+    <TimeSpanPickerInline />
+</RadzenExample>
+
+<RadzenText Anchor="timespanpicker#various-config" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
+    Various configurations
+</RadzenText>
+<RadzenExample ComponentName="TimeSpanPicker" Example="TimeSpanPickerConfig">
+    <TimeSpanPickerConfig />
+</RadzenExample>
+
+<RadzenText Anchor="timespanpicker#custom-input-parsing" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
+    Define custom input parsing
+</RadzenText>
+<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
+    The parameter named <code>ParseInput</code> allows a fully custom input parsing method.<br />
+    This way you can accept inputs like '1d 20h 15min' or '-120s' or support more than one input format.<br />
+    If your method returns null, the default parser is be used instead.
+</RadzenText>
+<RadzenExample ComponentName="TimeSpanPicker" Example="TimeSpanPickerParseInput">
+    <TimeSpanPickerParseInput />
+</RadzenExample>
+
 
 <RadzenText Anchor="timespanpicker#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
     Keyboard Navigation

RadzenBlazorDemos/Pages/TimeSpanPickerParseInput.razor

@@ -0,0 +1,56 @@
+@using System.Text.RegularExpressions
+<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-p-12">
+    <RadzenLabel Text="Select Time Span" Component="RadzenTimeSpanPickerParseInput"/>
+    <RadzenTimeSpanPicker @bind-Value="@value" Name="RadzenTimeSpanPickerParseInput" ParseInput="@ParseTimeSpan" />
+</RadzenStack>
+
+@code {
+    TimeSpan? value;
+
+    string[] standardFormats = { "c", "g", "G" };
+    Regex customTimeSpanRegex = new Regex(@"(?:(?<days>-?\d+)\w?d)|(?:(?<hours>-?\d+)\w?h)|(?:(?<minutes>-?\d+)\w?min)|(?:(?<seconds>-?\d+)\w?s)");
+
+    public TimeSpan? ParseTimeSpan(string input)
+    {
+        foreach (var format in standardFormats)
+        {
+            if (TimeSpan.TryParseExact(input, format, null, System.Globalization.TimeSpanStyles.None, out var standardResult))
+            {
+                return standardResult;
+            }
+        }
+
+        var regexGroups = customTimeSpanRegex.Matches(input.Trim())
+            .Where(x => x.Success)
+            .SelectMany(x => x.Groups.Cast<System.Text.RegularExpressions.Group>())
+            .Where(x => x.Success)
+            .ToArray();
+
+        if (regexGroups.Length == 0)
+        {
+            return null;
+        }
+
+        var timeUnitToValue = new Dictionary<string, int>() {
+            {"days", 0},
+            {"hours", 0},
+            {"minutes", 0},
+            {"seconds", 0}
+        };
+
+        foreach (var timeUnitWithValue in timeUnitToValue)
+        {
+            var unit = timeUnitWithValue.Key;
+            var valueString = regexGroups.FirstOrDefault(x => x.Name == unit)?.Value ?? "0";
+
+            if (Int32.TryParse(valueString, out int value))
+            {
+                timeUnitToValue[unit] = value;
+            }
+        }
+
+        var result = new TimeSpan(timeUnitToValue["days"], timeUnitToValue["hours"], timeUnitToValue["minutes"], timeUnitToValue["seconds"]);
+
+        return result;
+    }
+}