feat: add component Checkbox (#69)

* feat(module: checkbox): add AntCheckbox

* fix(module: checkbox): fix click bug

components/checkbox/AntCheckbox.razor

@@ -1,12 +1,12 @@
 @namespace AntBlazor
 @inherits AntCheckboxBase
 
-<label class="ant-checkbox-wrapper" @onclick="hostClick" style="@Style" @attributes="Attributes" Id="@Id" @ref="Ref">
+<label class="ant-checkbox-wrapper" style="@Style" @attributes="Attributes" Id="@Id" @ref="Ref">
     <span class="@ClassMapper.Class" style="">
         <input @ref="inputElement"
                value="@(value)"
                checked="@(@checked)"
-               disabled="@disabled"
+               disabled="@(disabled)"
                @onchange="@inputCheckedChange"
                @attributes="@inputAttributes"
                type="checkbox"

components/checkbox/AntCheckboxBase.cs

@@ -50,6 +50,15 @@ namespace AntBlazor
             base.OnParametersSet();
         }
 
+        protected override async Task OnInitializedAsync()
+        {
+            if (this is AntCheckbox checkbox)
+            {
+                CheckboxGroup?.CheckboxItems.Add(checkbox);
+            }
+            await base.OnInitializedAsync();
+        }
+
         protected void setClass()
         {
             var prefixName = "ant-checkbox";
@@ -60,11 +69,6 @@ namespace AntBlazor
                 .If($"{prefixName}-indeterminate", () => indeterminate);
         }
 
-        protected async Task hostClick(MouseEventArgs args)
-        {
-            await innerCheckedChange(this.@checked);
-        }
-
         protected async Task inputCheckedChange(ChangeEventArgs args)
         {
             await innerCheckedChange(Convert.ToBoolean(args.Value));
@@ -77,10 +81,7 @@ namespace AntBlazor
                 this.@checked = @checked;
                 onChange?.Invoke(this.@checked);
                 await this.checkedChange.InvokeAsync(this.@checked);
-                if (this.CheckboxGroup != null)
-                {
-                    // this.CheckboxGroup.onChange();
-                }
+                CheckboxGroup?.OnCheckboxChange(this);
             }
         }
 

components/checkbox/AntCheckboxGroup.razor

@@ -1,17 +1,18 @@
 @namespace AntBlazor
 @inherits AntCheckboxGroupBase
 
-<CascadingValue Value="this">
-    <div class="@ClassMapper.Class" style="@Style" @attributes="Attributes" Id="@Id" @ref="Ref">
-        @foreach (var option in options)
-        {
-            <AntCheckbox class="ant-checkbox-group-item"
-                         disabled="option.disabled || disabled"
-                         checked="@(option.@checked)"
-                         value="@option.value"
-                         checkedChange="@onOptionChange">
-                <span>@option.label</span>
-            </AntCheckbox>
-        }
-    </div>
-</CascadingValue>
+    <CascadingValue Value="this">
+        <div class="@ClassMapper.Class" style="@Style" @attributes="Attributes" Id="@Id" @ref="Ref">
+            @foreach (var option in options)
+            {
+                <AntCheckbox class="ant-checkbox-group-item"
+                             disabled="option.disabled || disabled"
+                             checked="@(option.@checked)"
+                             value="@option.value"
+                             checkedChange="@onOptionChange">
+                    <span>@option.label</span>
+                </AntCheckbox>
+            }
+            @ChildContent
+        </div>
+    </CascadingValue>

components/checkbox/AntCheckboxGroupBase.cs

@@ -1,4 +1,7 @@
 using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 
 namespace AntBlazor
@@ -8,13 +11,27 @@ namespace AntBlazor
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
-        public Action<object> onChange;
+        [Parameter] public IList<AntCheckbox> CheckboxItems { get; set; } = new List<AntCheckbox>();
+
+        [Parameter] public EventCallback<object> OnChange { get; set; }
 
         public Action onTouched;
 
         [Parameter]
         public CheckBoxOption[] options { get; set; } = Array.Empty<CheckBoxOption>();
 
+        [Parameter]
+        public IList<string> Value { get; set; } = Array.Empty<string>();
+
+        protected override async Task OnParametersSetAsync()
+        {
+            foreach (var item in Value)
+            {
+                options.Where(o => o.value == item).ForEach(o => o.@checked = true);
+            }
+            await base.OnParametersSetAsync();
+        }
+
         [Parameter]
         public bool disabled { get; set; }
 
@@ -23,9 +40,24 @@ namespace AntBlazor
             ClassMapper.Add("ant-checkbox-group");
         }
 
-        public void onOptionChange()
+        public async void onOptionChange(bool change)
         {
-            this.onChange?.Invoke(this.options);
+            await this.OnChange.InvokeAsync(this.options);
+            StateHasChanged();
+        }
+
+        internal async Task OnCheckboxChange(AntCheckboxBase checkboxBase)
+        {
+            if (checkboxBase is AntCheckbox checkbox)
+            {
+                int index = CheckboxItems.IndexOf(checkbox);
+                if (options[index] != null)
+                {
+                    options[index].@checked = checkbox.@checked;
+                }
+            }
+            
+            StateHasChanged();
         }
     }
 }

site/AntBlazor.Docs/Pages/Checkbox.razor

@@ -0,0 +1,160 @@
+<AntTitle level="1">Checkbox</AntTitle>
+<AntText>Checkbox component.</AntText>
+<AntTitle level="2">When To Use</AntTitle>
+<AntParagraph>
+    <ul>
+        <li>Used for selecting multiple values from several options.</li>
+        <li>If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.</li>
+    </ul>
+</AntParagraph>
+<br />
+<h2>Examples</h2>
+<br />
+<DemoCard>
+    <Title>Basic</Title>
+    <Description>Basic usage of checkbox.</Description>
+    <Demo>
+        <AntCheckbox>Checkbox</AntCheckbox>
+    </Demo>
+</DemoCard>
+<br />
+
+<DemoCard>
+    <Title>Controlled Checkbox</Title>
+    <Description>Communicated with other components.</Description>
+    <Demo>
+        <div style="margin-bottom: 20px">
+            <AntCheckbox checked="@isChecked" disabled="@disabled" checkedChange="@ToggleChecked">
+                @($"{(isChecked ? "Check" : "Uncheck")}-{(disabled ? "Disable" : "Enable")}")
+            </AntCheckbox>
+        </div>
+        <br />
+        <AntButton type="@AntButtonType.Primary" size="small" @onclick="@ToggleChecked">@(isChecked ? "Check" : "Uncheck")</AntButton>
+        <AntButton type="@AntButtonType.Primary" size="small" @onclick="@ToggleDisable">@(disabled ? "Disable" : "Enable")</AntButton>
+    </Demo>
+</DemoCard>
+@code{
+    bool isChecked = true;
+    bool disabled = false;
+    void ToggleChecked()
+    {
+        isChecked = !isChecked;
+    }
+    void ToggleDisable()
+    {
+        disabled = !disabled;
+    }
+}
+<br />
+
+<DemoCard>
+    <Title>Check all</Title>
+    <Description>
+        <AntParagraph>The <AntText code>indeterminate</AntText> property can help you to achieve a 'check all' effect.</AntParagraph>
+    </Description>
+    <Demo>
+        <AntCheckbox indeterminate="@indeterminate" checked="@checkAll" checkedChange="@CheckAllChanged">Check all</AntCheckbox>
+        <AntDivider />
+        <AntCheckboxGroup options="@ckeckAllOptions" OnChange="@OnChanged"></AntCheckboxGroup>
+    </Demo>
+</DemoCard>
+@code{
+
+    static CheckBoxOption[] ckeckAllOptions = new CheckBoxOption[]{
+        new CheckBoxOption{ label="Apple",value="Apple" ,@checked=true},
+        new CheckBoxOption{ label="Pear", value="Pear" },
+        new CheckBoxOption{ label="Orange", value="Orange",@checked=true },
+    };
+
+    void CheckAllChanged()
+    {
+        bool allChecked = checkAll;
+        ckeckAllOptions.ForEach(o => o.@checked = !allChecked);
+    }
+
+    void OnChanged()
+    {
+
+    }
+
+    bool indeterminate => ckeckAllOptions.Count(o => o.@checked) > 0 && ckeckAllOptions.Count(o => o.@checked) < ckeckAllOptions.Count();
+
+    bool checkAll => ckeckAllOptions.All(o => o.@checked);
+
+}
+<br />
+
+<DemoCard>
+    <Title>Disabled</Title>
+    <Description>Disabled checkbox.</Description>
+    <Demo>
+        <div>
+            <AntCheckbox disabled="true"></AntCheckbox>
+            <br />
+            <AntCheckbox checked="true" disabled="true"></AntCheckbox>
+        </div>
+    </Demo>
+</DemoCard>
+<br />
+
+<DemoCard>
+    <Title>Checkbox Group</Title>
+    <Description>Generate a group of checkboxes from an array.</Description>
+    <Demo>
+        <AntCheckboxGroup options="plainOptions" @bind-Value="@checkValue1"></AntCheckboxGroup>
+        <br />
+        <AntCheckboxGroup options="options"  @bind-Value="@checkValue2"></AntCheckboxGroup>
+        <br />
+        <AntCheckboxGroup options="optionsWithDisabled" disabled="true"  @bind-Value="@checkValue1"></AntCheckboxGroup>
+    </Demo>
+</DemoCard>
+@code{
+
+    CheckBoxOption[] plainOptions = new CheckBoxOption[]{
+        new CheckBoxOption{ label="Apple",value="Apple" },
+        new CheckBoxOption{ label="Pear", value="Pear"},
+        new CheckBoxOption{ label="Orange", value="Orange" },
+    };
+    CheckBoxOption[] options = new CheckBoxOption[]{
+        new CheckBoxOption{ label="Apple",value="Apple" },
+        new CheckBoxOption{ label="Pear", value="Pear"},
+        new CheckBoxOption{ label="Orange", value="Orange" },
+    };
+
+    CheckBoxOption[] optionsWithDisabled = new CheckBoxOption[] {
+        new CheckBoxOption{ label ="Apple", value="Apple" },
+        new CheckBoxOption{ label = "Pear", value="Pear" },
+        new CheckBoxOption{  label = "Orange",value= "Orange", disabled = false },
+
+    };
+
+    string[] checkValue1 = {"Apple"};
+    string[] checkValue2 = {"Pear"};
+}
+<br />
+
+<DemoCard>
+    <Title>Use with Grid</Title>
+    <Description>We can use Checkbox and Grid in Checkbox.Group, to implement complex layout.</Description>
+    <Demo>
+        <AntCheckboxGroup>
+            <AntRow>
+                <AntCol span="8">
+                    <AntCheckbox>A</AntCheckbox>
+                </AntCol>
+                <AntCol span="8">
+                    <AntCheckbox>B</AntCheckbox>
+                </AntCol>
+                <AntCol span="8">
+                    <AntCheckbox>C</AntCheckbox>
+                </AntCol>
+                <AntCol span="8">
+                    <AntCheckbox>D</AntCheckbox>
+                </AntCol>
+                <AntCol span="8">
+                    <AntCheckbox>E</AntCheckbox>
+                </AntCol>
+            </AntRow>
+        </AntCheckboxGroup>
+    </Demo>
+</DemoCard>

site/AntBlazor.Docs/Resources/en-US.yml

@@ -10,6 +10,7 @@ Breadcrumb: Breadcrumb
 Menu: Menu
 Steps: Steps 
 DataEntry: Data Entry
+Checkbox: Checkbox
 Switch: Switch
 Input: Input
 InputNumber: InputNumber

site/AntBlazor.Docs/Resources/zh-CN.yml

@@ -10,6 +10,7 @@ Breadcrumb: 面包屑
 Menu: 导航菜单
 Steps: 步骤条
 DataEntry: 数据录入
+Checkbox: 多选框
 Switch: 开关
 Input: 输入框
 InputNumber: 数字输入框

site/AntBlazor.Docs/wwwroot/menu.json

@@ -73,6 +73,11 @@
         "title": "DataEntry",
         "type": "itemGroup",
         "children": [
+          {
+            "title": "Checkbox",
+            "type": "menuItem",
+            "url": "checkbox"
+          },
           {
             "title": "Switch",
             "type": "menuItem",