🎬 docs(Mobile*Picker): Update demos (#649)

masastack · Sep 19, 2022 · 311c28f · 311c28f
1 parent 243483b
commit 311c28f
Show file tree

Hide file tree

Showing 18 changed files with 83 additions and 44 deletions.
diff --git a/src/Doc/Masa.Blazor.Doc.CLI/Commands/GenerateApiJsonCommand.cs b/src/Doc/Masa.Blazor.Doc.CLI/Commands/GenerateApiJsonCommand.cs
@@ -103,7 +103,7 @@ public class GenerateApiJsonCommand : IAppCommand
             { "MMarkdown", new string[] { "Markdown" } },
             { "MMenu", new string[] { "Menus" } },
             { "MMessages", new string[] { "Messages" } },
-            { "MMobilePickerView", new string[] { "Mobile picker view" } },
+            { "MMobilePickerView", new string[] { "Mobile picker views" } },
             { "MNavigationDrawer", new string[] { "Navigation drawers" } },
             { "MOverlay", new string[] { "Overlays" } },
             { "MPagination", new string[] { "Pagination" } },

diff --git a/...Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileDatePickers/props/Formatter.razor b/...Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileDatePickers/props/Formatter.razor
@@ -2,7 +2,7 @@
     <PMobileDatePicker @bind-Value="_date" Formatter="@CustomFormatter">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_date)
+                @(_date == default ? "Please select" : _date)
             </MButton>
         </ActivatorContent>
     </PMobileDatePicker>

diff --git a/...oc/Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileDatePickers/props/MinMax.razor b/...oc/Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileDatePickers/props/MinMax.razor
@@ -4,7 +4,7 @@
                        Min="new DateOnly(2000, 1, 1)">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_date)
+                @(_date == default ? "Please select" : _date)
             </MButton>
         </ActivatorContent>
     </PMobileDatePicker>

diff --git a/...Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileDatePickers/props/Precision.razor b/...Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileDatePickers/props/Precision.razor
@@ -11,14 +11,17 @@
     <PMobileDatePicker @bind-Value="_date" Precision="_precision" @key="_precision">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_date)
+                @(ComputedDate)
             </MButton>
         </ActivatorContent>
     </PMobileDatePicker>
 </div>
 
 @code {
 
+    [CascadingParameter(Name = "TimezoneOffset")]
+    private TimeSpan TimezoneOffset { get; set; }
+
     private DateOnly _date;
     private DatePrecision _precision = DatePrecision.Day;
 
@@ -29,4 +32,16 @@
         DatePrecision.Day
     };
 
+    private DateOnly ComputedDate => _precision switch
+    {
+        DatePrecision.Year => new DateOnly(_date.Year, 1, 1),
+        DatePrecision.Month => new DateOnly(_date.Year, _date.Month, 1),
+        _ => _date
+    };
+
+    protected override void OnInitialized()
+    {
+        _date = DateOnly.FromDateTime(DateTime.UtcNow.Add(TimezoneOffset));
+    }
+
 }
diff --git a/...Doc/Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileDatePickers/usage/Index.razor b/...Doc/Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileDatePickers/usage/Index.razor
@@ -2,7 +2,7 @@
     <PMobileDatePicker @bind-Value="_date">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_date)
+                @(_date == default ? "Please select" : _date)
             </MButton>
         </ActivatorContent>
     </PMobileDatePicker>

diff --git a/....Blazor.Doc/Demos/Components/Pickers/children/MobileDateTimePickers/props/Formatter.razor b/....Blazor.Doc/Demos/Components/Pickers/children/MobileDateTimePickers/props/Formatter.razor
@@ -2,7 +2,7 @@
     <PMobileDateTimePicker @bind-Value="_dateTime" Formatter="@CustomFormatter">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_dateTime)
+                @(_dateTime == default ? "Please select" : _dateTime)
             </MButton>
         </ActivatorContent>
     </PMobileDateTimePicker>

diff --git a/...asa.Blazor.Doc/Demos/Components/Pickers/children/MobileDateTimePickers/props/MinMax.razor b/...asa.Blazor.Doc/Demos/Components/Pickers/children/MobileDateTimePickers/props/MinMax.razor
@@ -2,7 +2,7 @@
     <PMobileDateTimePicker @bind-Value="_dateTime" Max="DateTime.Now" Min="new DateTime(2000, 1, 1)">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_dateTime)
+                @(_dateTime == default ? "Please select" : _dateTime)
             </MButton>
         </ActivatorContent>
     </PMobileDateTimePicker>

diff --git a/....Blazor.Doc/Demos/Components/Pickers/children/MobileDateTimePickers/props/Precision.razor b/....Blazor.Doc/Demos/Components/Pickers/children/MobileDateTimePickers/props/Precision.razor
@@ -11,14 +11,17 @@
     <PMobileDateTimePicker @bind-Value="_dateTime" Precision="_precision" @key="_precision">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_dateTime)
+                @(ComputedDateTime)
             </MButton>
         </ActivatorContent>
     </PMobileDateTimePicker>
 </div>
 
 @code {
 
+    [CascadingParameter(Name = "TimezoneOffset")]
+    private TimeSpan TimezoneOffset { get; set; }
+
     private DateTime _dateTime;
     private DateTimePrecision _precision = DateTimePrecision.Day;
 
@@ -32,4 +35,19 @@
         DateTimePrecision.Second
     };
 
+    private DateTime ComputedDateTime => _precision switch
+    {
+        DateTimePrecision.Year => new DateTime(_dateTime.Year, 1, 1),
+        DateTimePrecision.Month => new DateTime(_dateTime.Year, _dateTime.Month, 1),
+        DateTimePrecision.Day => new DateTime(_dateTime.Year, _dateTime.Month, _dateTime.Day),
+        DateTimePrecision.Hour => new DateTime(_dateTime.Year, _dateTime.Month, _dateTime.Day, _dateTime.Hour, 1, 1),
+        DateTimePrecision.Minute => new DateTime(_dateTime.Year, _dateTime.Month, _dateTime.Day, _dateTime.Hour, _dateTime.Minute, 1),
+        _ => _dateTime
+    };
+
+    protected override void OnInitialized()
+    {
+        _dateTime = DateTime.UtcNow.Add(TimezoneOffset);
+    }
+
 }
diff --git a/...Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileDateTimePickers/usage/Index.razor b/...Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileDateTimePickers/usage/Index.razor
@@ -2,7 +2,7 @@
     <PMobileDateTimePicker @bind-Value="_dateTime">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_dateTime)
+                @(_dateTime == default ? "Please select" : _dateTime)
             </MButton>
         </ActivatorContent>
     </PMobileDateTimePicker>

diff --git a/src/Doc/Masa.Blazor.Doc/Demos/Components/Pickers/children/MobilePickers/props/Cascade.razor b/src/Doc/Masa.Blazor.Doc/Demos/Components/Pickers/children/MobilePickers/props/Cascade.razor
@@ -11,7 +11,7 @@
                    ItemDisabled="item => item.Disabled">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_value.Count == 0 ? "Active me" : string.Join(" ", GetNames()))
+                @(_value.Count == 0 ? "Please select" : string.Join(" ", GetNames()))
             </MButton>
         </ActivatorContent>
     </PMobilePicker>

diff --git a/...oc/Masa.Blazor.Doc/Demos/Components/Pickers/children/MobilePickers/props/ItemHeight.razor b/...oc/Masa.Blazor.Doc/Demos/Components/Pickers/children/MobilePickers/props/ItemHeight.razor
@@ -9,7 +9,7 @@
                    ItemHeight="64">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_value.Count == 0 ? "Active me" : string.Join(" ", _value))
+                @(_value.Count == 0 ? "Please select" : string.Join(" ", _value))
             </MButton>
         </ActivatorContent>
     </PMobilePicker>

diff --git a/src/Doc/Masa.Blazor.Doc/Demos/Components/Pickers/children/MobilePickers/usage/Index.razor b/src/Doc/Masa.Blazor.Doc/Demos/Components/Pickers/children/MobilePickers/usage/Index.razor
@@ -8,7 +8,7 @@
                    ItemText="item => item">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_value.Count == 0 ? "Active me" : string.Join(" ", _value))
+                @(_value.Count == 0 ? "Please select" : string.Join(" ", _value))
             </MButton>
         </ActivatorContent>
     </PMobilePicker>

diff --git a/...Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileTimePickers/props/Precision.razor b/...Masa.Blazor.Doc/Demos/Components/Pickers/children/MobileTimePickers/props/Precision.razor
@@ -11,7 +11,7 @@
     <PMobileTimePicker @bind-Value="_time" Precision="_precision" @key="_precision">
         <ActivatorContent>
             <MButton Color="primary" Class="text-capitalize" Text @attributes="@context.Attrs">
-                @(_time.ToLongTimeString())
+                @(ComputedTime.ToString("HH:mm:ss"))
             </MButton>
         </ActivatorContent>
     </PMobileTimePicker>
@@ -29,4 +29,10 @@
         TimePrecision.Second
     };
 
+    private TimeOnly ComputedTime => _precision switch{
+        TimePrecision.Hour => new TimeOnly(_time.Hour, 0, 0),
+        TimePrecision.Minute => new TimeOnly(_time.Hour, _time.Minute, 0),
+        _ => _time
+    };
+
 }
diff --git a/src/Doc/Masa.Blazor.Doc/wwwroot/docs/api/MMobilePickerView.en-US.json b/src/Doc/Masa.Blazor.Doc/wwwroot/docs/api/MMobilePickerView.en-US.json
@@ -1,7 +1,7 @@
 {
   "Title": "MMobilePickerView",
   "Components": [
-    "Mobile picker view"
+    "Mobile picker views"
   ],
   "Props": [
     {

diff --git a/src/Doc/Masa.Blazor.Doc/wwwroot/docs/api/MMobilePickerView.zh-CN.json b/src/Doc/Masa.Blazor.Doc/wwwroot/docs/api/MMobilePickerView.zh-CN.json
@@ -1,7 +1,7 @@
 {
   "Title": "MMobilePickerView",
   "Components": [
-    "Mobile picker view"
+    "Mobile picker views"
   ],
   "Props": [
     {