From 71f49c5c15114964cb3a15c013ef8d4621c947a3 Mon Sep 17 00:00:00 2001 From: Magehernan Date: Thu, 1 Apr 2021 01:50:30 -0300 Subject: [PATCH 01/15] fix(module: table): ExpandableRow not working with ActionColumn #1284 (#1285) * (fix) Table ExpandableRow not working with ActionColumn #1284 * Add Tree Button Expand on Action Columm. Check the position of Selection Column when calculate the position for expand button on tree mode and expand mode. --- components/table/ActionColumn.razor | 34 +++++++++++++++++++++++++++++ components/table/Column.razor.cs | 6 ----- components/table/ColumnBase.cs | 6 +++++ components/table/Table.razor.cs | 4 ++-- 4 files changed, 42 insertions(+), 8 deletions(-) diff --git a/components/table/ActionColumn.razor b/components/table/ActionColumn.razor index 13997d3e..89f3878b 100644 --- a/components/table/ActionColumn.razor +++ b/components/table/ActionColumn.razor @@ -15,6 +15,11 @@ else if (IsMeasure) } else if (IsColGroup) { + @if (AppendExpandColumn) + { + + } + if (Width != null) { @@ -26,13 +31,42 @@ else if (IsColGroup) } else if (IsHeader && HeaderColSpan != 0) { + @if (AppendExpandColumn) + { + + } + @if (TitleTemplate != null)@TitleTemplate else @Title } else if (!IsHeader && RowSpan != 0 && ColSpan != 0) { + @if (AppendExpandColumn) + { + + @if (Table.RowExpandable(RowData) && (!Table.TreeMode || !RowData.HasChildren)) + { + + } + + } + + @if (ColIndex == Table.TreeExpandIconColumnIndex && Table.TreeMode) + { + + @if (RowData.HasChildren) + { + + } + else + { + + } + } @ChildContent } \ No newline at end of file diff --git a/components/table/Column.razor.cs b/components/table/Column.razor.cs index b72d9a36..cbc23d36 100644 --- a/components/table/Column.razor.cs +++ b/components/table/Column.razor.cs @@ -189,12 +189,6 @@ namespace AntDesign SortModel.SetSortDirection(sortDirection); } - private void ToggleTreeNode() - { - RowData.Expanded = !RowData.Expanded; - Table?.Refresh(); - } - private void FilterSelected(TableFilter filter) { if (!FilterMultiple) diff --git a/components/table/ColumnBase.cs b/components/table/ColumnBase.cs index 33edb614..c51ae1c6 100644 --- a/components/table/ColumnBase.cs +++ b/components/table/ColumnBase.cs @@ -168,5 +168,11 @@ namespace AntDesign return $"position: sticky; {Fixed}: {(fixedWidths.Any() ? $"calc({string.Join(" + ", fixedWidths) })" : "0px")};"; } + + protected void ToggleTreeNode() + { + RowData.Expanded = !RowData.Expanded; + Table?.Refresh(); + } } } diff --git a/components/table/Table.razor.cs b/components/table/Table.razor.cs index 7be64890..de52832a 100644 --- a/components/table/Table.razor.cs +++ b/components/table/Table.razor.cs @@ -142,7 +142,7 @@ namespace AntDesign string ITable.ScrollX => ScrollX; string ITable.ScrollY => ScrollY; int ITable.ScrollBarWidth => ScrollBarWidth; - int ITable.ExpandIconColumnIndex => ExpandIconColumnIndex; + int ITable.ExpandIconColumnIndex => ExpandIconColumnIndex + (_selection != null && _selection.ColIndex <= ExpandIconColumnIndex ? 1 : 0); int ITable.TreeExpandIconColumnIndex => _treeExpandIconColumnIndex; bool ITable.HasExpandTemplate => ExpandTemplate != null; SortDirection[] ITable.SortDirections => SortDirections; @@ -239,7 +239,7 @@ namespace AntDesign _treeMode = TreeChildren != null && (_showItems?.Any(x => TreeChildren(x)?.Any() == true) == true); if (_treeMode) { - _treeExpandIconColumnIndex = ExpandIconColumnIndex + (_selection != null ? 1 : 0); + _treeExpandIconColumnIndex = ExpandIconColumnIndex + (_selection != null && _selection.ColIndex <= ExpandIconColumnIndex ? 1 : 0); } StateHasChanged(); From 822dfa3830469a9dab7438bcbfdf6cb6ce10f4e9 Mon Sep 17 00:00:00 2001 From: Andrzej Bakun Date: Fri, 2 Apr 2021 16:03:13 +0200 Subject: [PATCH 02/15] fix(module: rate): Value has priority over DefaultValue (#1303) * chore: add GitHub Actions for auto preview (#1205) * chore: add github actions for auto preview * fix setup job * chore: add GitHub Actions for auto preview (#1205) * fix(module:rate): prevent reset to default value Co-authored-by: James Yeung --- components/rate/Rate.razor.cs | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/components/rate/Rate.razor.cs b/components/rate/Rate.razor.cs index f0493138..855c04ab 100644 --- a/components/rate/Rate.razor.cs +++ b/components/rate/Rate.razor.cs @@ -50,6 +50,7 @@ namespace AntDesign get { return _currentValue; } set { + _valueWasSet = true; if (_currentValue != value) { this._currentValue = value; @@ -81,23 +82,32 @@ namespace AntDesign /// /// 是否允许半选 + /// Whether to allow half-selection /// private bool _hasHalf = false; /// /// 鼠标悬停时从最左到光标位置的星星数。 + /// The number of stars from the far left to the cursor position when the hovered with mouse. /// private int _hoverValue = 0; /// /// 当前被选中的星星数量 + /// Number of stars currently selected /// private decimal _currentValue; /// /// 是否获取的输入焦点 + /// Wheter to get input focus. /// private bool _isFocused = false; + /// + /// Indicates if Value has been changed. Needed to avoid reseting to DefaultValue if exists. + /// + private bool _valueWasSet; + private void Blur(FocusEventArgs e) { this._isFocused = false; @@ -165,10 +175,9 @@ namespace AntDesign } } - protected override void OnInitialized() { - if (DefaultValue > 0) + if (DefaultValue > 0 && !_valueWasSet) { this.Value = DefaultValue; } From 527f39456b0d04b504dca2ace1c3b60789e9bcbb Mon Sep 17 00:00:00 2001 From: ldsenow Date: Sat, 3 Apr 2021 02:10:37 +1100 Subject: [PATCH 03/15] feat(module: form): Add LabelTemplate for FormItem (#1293) Co-authored-by: Leishi --- components/form/FormItem.razor | 11 ++++++-- components/form/FormItem.razor.cs | 8 ++++++ .../Form/demo/CustomizedLabel.razor | 26 +++++++++++++++++++ .../Form/demo/complex-form-control.md | 2 +- .../Components/Form/demo/customized-label.md | 14 ++++++++++ 5 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 site/AntDesign.Docs/Demos/Components/Form/demo/CustomizedLabel.razor create mode 100644 site/AntDesign.Docs/Demos/Components/Form/demo/customized-label.md diff --git a/components/form/FormItem.razor b/components/form/FormItem.razor index 9adbe2c2..a12a2d9d 100644 --- a/components/form/FormItem.razor +++ b/components/form/FormItem.razor @@ -3,10 +3,17 @@ @using AntDesign.Internal; - @if (!string.IsNullOrEmpty(Label)) + @if (!string.IsNullOrEmpty(Label) || LabelTemplate != null) { - + @if (LabelTemplate != null) + { + @LabelTemplate + } + else + { + + } } diff --git a/components/form/FormItem.razor.cs b/components/form/FormItem.razor.cs index cb9cdd93..0c96afae 100644 --- a/components/form/FormItem.razor.cs +++ b/components/form/FormItem.razor.cs @@ -31,6 +31,9 @@ namespace AntDesign [Parameter] public string Label { get; set; } + [Parameter] + public RenderFragment LabelTemplate { get; set; } + [Parameter] public ColLayoutParam LabelCol { get; set; } @@ -176,6 +179,11 @@ namespace AntDesign return wrapperColParameter.ToAttributes(); } + private string GetLabelClass() + { + return Required ? $"{_prefixCls}-required" : _labelCls; + } + void IFormItem.AddControl(AntInputComponentBase control) { if (control.FieldIdentifier.Model == null) diff --git a/site/AntDesign.Docs/Demos/Components/Form/demo/CustomizedLabel.razor b/site/AntDesign.Docs/Demos/Components/Form/demo/CustomizedLabel.razor new file mode 100644 index 00000000..e36c08e8 --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Form/demo/CustomizedLabel.razor @@ -0,0 +1,26 @@ +@using System.ComponentModel.DataAnnotations; + +
+ + + + + + + + +
+ +@code{ + public class Model + { + [Required] + public string Username { get; set; } + } + + private Model model = new Model(); +} \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Form/demo/complex-form-control.md b/site/AntDesign.Docs/Demos/Components/Form/demo/complex-form-control.md index adb30c7a..583cea6e 100644 --- a/site/AntDesign.Docs/Demos/Components/Form/demo/complex-form-control.md +++ b/site/AntDesign.Docs/Demos/Components/Form/demo/complex-form-control.md @@ -2,7 +2,7 @@ order: 6 title: zh-CN: 复杂一点的控件 - en-US: complex form control + en-US: Complex form control --- ## zh-CN diff --git a/site/AntDesign.Docs/Demos/Components/Form/demo/customized-label.md b/site/AntDesign.Docs/Demos/Components/Form/demo/customized-label.md new file mode 100644 index 00000000..43629995 --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Form/demo/customized-label.md @@ -0,0 +1,14 @@ +--- +order: 6.2 +title: + zh-CN: 自定义标签 + en-US: Customized Label +--- + +## zh-CN + +标签可以通过LabelTemplate来自定义。 + +## en-US + +Label can be customized by using LabelTemplate. From 3bf616b7350d9ddbbb5fefdcaebb083e13cdddf9 Mon Sep 17 00:00:00 2001 From: Zonciu Liang Date: Fri, 2 Apr 2021 23:54:56 +0800 Subject: [PATCH 04/15] fix(module: table): fix DataIndex Column with incorrect sorting and filter (#1295) * refactor(module: table): Unify the behavior of Field and DataIndex * fix(module: table): Fix DataIndex Column doesn't refresh * doc(module: table): add DataIndex column filter demo * doc(module: table): fix Blazor table Co-authored-by: James Yeung --- components/table/Column.razor | 4 +- components/table/Column.razor.cs | 63 +++++++++++++------ .../table/Internal/ColumnDataIndexHelper.cs | 54 +++++----------- .../table/Internal/ColumnExpressionHelper.cs | 37 +++++++++++ components/table/Table.razor | 2 +- .../table/TableModels/DataIndexSortModel.cs | 63 ------------------- components/table/TableModels/FilterModel.cs | 16 +++-- components/table/TableModels/SortModel.cs | 18 +++--- .../Demos/Components/Table/demo/Blazor.razor | 2 - .../Components/Table/demo/DataIndex.razor | 23 +++++-- 10 files changed, 135 insertions(+), 147 deletions(-) create mode 100644 components/table/Internal/ColumnExpressionHelper.cs delete mode 100644 components/table/TableModels/DataIndexSortModel.cs diff --git a/components/table/Column.razor b/components/table/Column.razor index af1ead29..d3882872 100644 --- a/components/table/Column.razor +++ b/components/table/Column.razor @@ -102,11 +102,11 @@ else if (IsBody && RowSpan != 0 && ColSpan != 0) { if (!string.IsNullOrWhiteSpace(Format)) { - @(Formatter.Format(GetValue != null ? GetValue(RowData) : Field, Format)) + @(Formatter.Format(Field, Format)) } else { - @(GetValue != null ? GetValue(RowData) : Field) + @Field } } diff --git a/components/table/Column.razor.cs b/components/table/Column.razor.cs index cbc23d36..2c7cb5cb 100644 --- a/components/table/Column.razor.cs +++ b/components/table/Column.razor.cs @@ -2,7 +2,9 @@ using System.Collections.Generic; using System.Linq; using System.Collections.Generic; +using System.ComponentModel; using System.Linq.Expressions; +using System.Reflection; using AntDesign.Core.Reflection; using AntDesign.Internal; using AntDesign.TableModels; @@ -25,7 +27,22 @@ namespace AntDesign public RenderFragment CellRender { get; set; } [Parameter] - public TData Field { get; set; } + public TData Field + { + get + { + return GetValue != null ? GetValue(RowData) : _field; + } + set + { + if (GetValue == null) + { + _field = value; + } + } + } + + private TData _field; [Parameter] public string DataIndex { get; set; } @@ -75,11 +92,9 @@ namespace AntDesign [Parameter] public Expression> OnFilter { get; set; } - private PropertyReflector? _propertyReflector; + public string DisplayName { get; private set; } - public string DisplayName => _propertyReflector?.DisplayName; - - public string FieldName => _propertyReflector?.PropertyName; + public string FieldName { get; private set; } public ITableSortModel SortModel { get; private set; } @@ -89,12 +104,16 @@ namespace AntDesign public Func GetValue { get; private set; } + public LambdaExpression GetFieldExpression { get; private set; } + void IFieldColumn.ClearSorter() => SetSorter(SortDirection.None); private static readonly EventCallbackFactory _callbackFactory = new EventCallbackFactory(); private bool _filterOpened; + private bool _hasFilterSelected; + private string[] _selectedFilterValues; private ElementReference _filterTriggerRef; @@ -109,19 +128,26 @@ namespace AntDesign { if (FieldExpression != null) { - _propertyReflector = PropertyReflector.Create(FieldExpression); + var paramExp = Expression.Parameter(ItemType); + var member = ColumnExpressionHelper.GetReturnMemberInfo(FieldExpression); + var bodyExp = Expression.MakeMemberAccess(paramExp, member); + GetFieldExpression = Expression.Lambda(bodyExp, paramExp); + } + else if (DataIndex != null) + { + (_, GetFieldExpression) = ColumnDataIndexHelper.GetDataIndexConfig(this); } - if (Sortable) + if (Sortable && GetFieldExpression != null) { - if (_propertyReflector.HasValue) - { - SortModel = new SortModel(_propertyReflector.Value.PropertyInfo, SorterMultiple, DefaultSortOrder, SorterCompare); - } - else - { - (GetValue, SortModel) = ColumnDataIndexHelper.GetDataIndexConfig(this); - } + SortModel = new SortModel(GetFieldExpression, SorterMultiple, DefaultSortOrder, SorterCompare); + } + + if (GetFieldExpression != null) + { + var member = ColumnExpressionHelper.GetReturnMemberInfo(GetFieldExpression); + DisplayName = member.GetCustomAttribute(true)?.DisplayName ?? member.Name; + FieldName = member.Name; } } else if (IsBody) @@ -137,8 +163,8 @@ namespace AntDesign _sortDirection = SortModel?.SortDirection ?? DefaultSortOrder ?? SortDirection.None; ClassMapper - .If("ant-table-column-has-sorters", () => Sortable) - .If($"ant-table-column-sort", () => Sortable && SortModel != null && SortModel.SortDirection.IsIn(SortDirection.Ascending, SortDirection.Descending)); + .If("ant-table-column-has-sorters", () => Sortable) + .If($"ant-table-column-sort", () => Sortable && SortModel != null && SortModel.SortDirection.IsIn(SortDirection.Ascending, SortDirection.Descending)); } private void HandleSort() @@ -187,6 +213,7 @@ namespace AntDesign { _sortDirection = sortDirection; SortModel.SetSortDirection(sortDirection); + StateHasChanged(); } private void FilterSelected(TableFilter filter) @@ -210,7 +237,7 @@ namespace AntDesign _filterOpened = false; _hasFilterSelected = Filters?.Any(x => x.Selected) == true; - FilterModel = _hasFilterSelected ? new FilterModel(_propertyReflector.Value.PropertyInfo, OnFilter, Filters.Where(x => x.Selected).ToList()) : null; + FilterModel = _hasFilterSelected ? new FilterModel(GetFieldExpression, OnFilter, Filters.Where(x => x.Selected).ToList()) : null; Table?.ReloadAndInvokeChange(); } diff --git a/components/table/Internal/ColumnDataIndexHelper.cs b/components/table/Internal/ColumnDataIndexHelper.cs index b433d7f5..7a8a9fec 100644 --- a/components/table/Internal/ColumnDataIndexHelper.cs +++ b/components/table/Internal/ColumnDataIndexHelper.cs @@ -27,9 +27,9 @@ namespace AntDesign.Internal private static ColumnCacheItem CreateDataIndexConfig(ColumnCacheKey key) { - var (itemType, propType, dataIndex, sortable, sort, sorterMultiple, sorterCompare) = key; + var (itemType, propType, dataIndex) = key; Func getValue = null; - ITableSortModel sortModel = null; + LambdaExpression getFieldExpression = null; var properties = dataIndex?.Split("."); if (properties is {Length: > 0}) { @@ -40,21 +40,17 @@ namespace AntDesign.Internal var rowData1Exp = Expression.TypeAs(rowDataExp, rowData1Type); var dataMemberExp = Expression.Property(rowData1Exp, nameof(RowData.Data)); - Expression memberExp = canBeNull - ? dataMemberExp.AccessNullableProperty(properties) - : dataMemberExp.AccessProperty(properties); + var memberExp = canBeNull + ? dataMemberExp.AccessNullableProperty(properties) + : dataMemberExp.AccessProperty(properties); getValue = Expression.Lambda>(memberExp, rowDataExp).Compile(); - if (sortable) - { - var propertySelector = canBeNull - ? itemType.BuildAccessNullablePropertyLambdaExpression(properties) - : itemType.BuildAccessPropertyLambdaExpression(properties); - sortModel = new DataIndexSortModel(dataIndex, propertySelector, sorterMultiple, sort, sorterCompare); - } + getFieldExpression = canBeNull + ? itemType.BuildAccessNullablePropertyLambdaExpression(properties) + : itemType.BuildAccessPropertyLambdaExpression(properties); } - return new ColumnCacheItem(getValue, sortModel); + return new ColumnCacheItem(getValue, getFieldExpression); } internal readonly struct ColumnCacheKey @@ -65,39 +61,23 @@ namespace AntDesign.Internal internal readonly string DataIndex; - internal readonly bool Sortable; - - internal readonly SortDirection DefaultSortOrder; - - internal readonly int SorterMultiple; - - internal readonly Func SorterCompare; - internal static ColumnCacheKey Create(Column column) { - return new(column.ItemType, typeof(TProp), column.DataIndex, column.Sortable, column.DefaultSortOrder, column.SorterMultiple, column.SorterCompare); + return new(column.ItemType, typeof(TProp), column.DataIndex); } - internal ColumnCacheKey(Type itemType, Type propType, string dataIndex, bool sortable, SortDirection defaultSortOrder, int sorterMultiple, Func sorterCompare) + internal ColumnCacheKey(Type itemType, Type propType, string dataIndex) { ItemType = itemType; PropType = propType; DataIndex = dataIndex; - Sortable = sortable; - DefaultSortOrder = defaultSortOrder; - SorterMultiple = sorterMultiple; - SorterCompare = sorterCompare; } - internal void Deconstruct(out Type itemType, out Type propType, out string dataIndex, out bool sortable, out SortDirection defaultSortOrder, out int sorterMultiple, out Func sorterCompare) + internal void Deconstruct(out Type itemType, out Type propType, out string dataIndex) { itemType = ItemType; propType = PropType; dataIndex = DataIndex; - sortable = Sortable; - defaultSortOrder = DefaultSortOrder; - sorterMultiple = SorterMultiple; - sorterCompare = SorterCompare; } } @@ -105,18 +85,18 @@ namespace AntDesign.Internal { internal readonly Func GetValue; - internal readonly ITableSortModel SortModel; + internal readonly LambdaExpression GetFieldExpression; - internal ColumnCacheItem(Func getValue, ITableSortModel sortModel) + internal ColumnCacheItem(Func getValue, LambdaExpression getFieldExpression) { GetValue = getValue; - SortModel = sortModel; + GetFieldExpression = getFieldExpression; } - internal void Deconstruct(out Func getValue, out ITableSortModel sortModel) + internal void Deconstruct(out Func getValue, out LambdaExpression getFieldExpression) { getValue = GetValue; - sortModel = SortModel; + getFieldExpression = GetFieldExpression; } } } diff --git a/components/table/Internal/ColumnExpressionHelper.cs b/components/table/Internal/ColumnExpressionHelper.cs new file mode 100644 index 00000000..0ccfe3fa --- /dev/null +++ b/components/table/Internal/ColumnExpressionHelper.cs @@ -0,0 +1,37 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using System; +using System.Linq.Expressions; +using System.Reflection; + +namespace AntDesign.Internal +{ + internal static class ColumnExpressionHelper + { + internal static MemberInfo GetReturnMemberInfo(LambdaExpression expression) + { + var accessorBody = expression.Body; + + if (accessorBody is UnaryExpression unaryExpression + && unaryExpression.NodeType == ExpressionType.Convert + && unaryExpression.Type == typeof(object)) + { + accessorBody = unaryExpression.Operand; + } + + if (accessorBody is ConditionalExpression conditionalExpression) + { + accessorBody = conditionalExpression.IfTrue; + } + + if (!(accessorBody is MemberExpression memberExpression)) + { + throw new ArgumentException($"The type of the provided expression {accessorBody.GetType().Name} is not supported, it should be {nameof(MemberExpression)}."); + } + + return memberExpression.Member; + } + } +} diff --git a/components/table/Table.razor b/components/table/Table.razor index 88aaeefa..a5c9fa55 100644 --- a/components/table/Table.razor +++ b/components/table/Table.razor @@ -182,7 +182,7 @@ RenderFragment<(Table table, IEnumerable showItems, int level)> bo - + @table.ChildContent(data) diff --git a/components/table/TableModels/DataIndexSortModel.cs b/components/table/TableModels/DataIndexSortModel.cs deleted file mode 100644 index 48993aea..00000000 --- a/components/table/TableModels/DataIndexSortModel.cs +++ /dev/null @@ -1,63 +0,0 @@ -using System; -using System.Collections.Generic; -using System.Linq; -using System.Linq.Expressions; - -namespace AntDesign.TableModels -{ - public class DataIndexSortModel : ITableSortModel, IComparer - { - private readonly LambdaExpression _propertySelect; - - private readonly Func _comparer; - - public int Priority { get; } - - public string FieldName { get; } - - public string Sort => _sortDirection?.Name; - - SortDirection ITableSortModel.SortDirection => _sortDirection; - - private SortDirection _sortDirection; - - public DataIndexSortModel(string dataIndex, LambdaExpression propertySelect, int priority, SortDirection sortDirection, Func comparer) - { - this.FieldName = dataIndex; - this._propertySelect = propertySelect; - this._comparer = comparer; - this.Priority = priority; - this._sortDirection = sortDirection ?? SortDirection.None; - } - - void ITableSortModel.SetSortDirection(SortDirection sortDirection) - { - _sortDirection = sortDirection; - } - - IOrderedQueryable ITableSortModel.SortList(IQueryable source) - { - if (_sortDirection == SortDirection.None) - { - return source as IOrderedQueryable; - } - - var lambda = (Expression>)_propertySelect; - - if (_sortDirection == SortDirection.Ascending) - { - return _comparer == null ? source.OrderBy(lambda) : source.OrderBy(lambda, this); - } - else - { - return _comparer == null ? source.OrderByDescending(lambda) : source.OrderByDescending(lambda, this); - } - } - - /// - public int Compare(TField x, TField y) - { - return _comparer?.Invoke(x, y) ?? 0; - } - } -} diff --git a/components/table/TableModels/FilterModel.cs b/components/table/TableModels/FilterModel.cs index 27970520..02a2b5d9 100644 --- a/components/table/TableModels/FilterModel.cs +++ b/components/table/TableModels/FilterModel.cs @@ -2,7 +2,6 @@ using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; -using System.Reflection; namespace AntDesign.TableModels { @@ -16,12 +15,12 @@ namespace AntDesign.TableModels public Expression> OnFilter { get; set; } - private PropertyInfo _propertyInfo; + public LambdaExpression GetFieldExpression { get; set; } - public FilterModel(PropertyInfo propertyInfo, Expression> onFilter, IList> filters) + public FilterModel(LambdaExpression getFieldExpression, Expression> onFilter, IList> filters) { - this._propertyInfo = propertyInfo; - this.FieldName = _propertyInfo.Name; + this.GetFieldExpression = getFieldExpression; + this.FieldName = GetFieldExpression.ReturnType.Name; this.OnFilter = onFilter; this.SelectedValues = filters.Select(x => x.Value.ToString()); this.Filters = filters; @@ -34,14 +33,13 @@ namespace AntDesign.TableModels return source; } - var sourceExpression = Expression.Parameter(typeof(TItem)); - var propertyExpression = Expression.Property(sourceExpression, _propertyInfo); + var sourceExpression = GetFieldExpression.Parameters[0]; - Expression invocationExpression = Expression.Invoke((Expression>)(() => false)); + Expression invocationExpression = Expression.Constant(false, typeof(bool)); foreach (var filter in Filters) { - invocationExpression = Expression.OrElse(invocationExpression, Expression.Invoke(OnFilter, Expression.Constant(filter.Value), propertyExpression)); + invocationExpression = Expression.OrElse(invocationExpression, Expression.Invoke(OnFilter, Expression.Constant(filter.Value), GetFieldExpression.Body)); } var lambda = Expression.Lambda>(invocationExpression, sourceExpression); diff --git a/components/table/TableModels/SortModel.cs b/components/table/TableModels/SortModel.cs index 84a3616f..596165eb 100644 --- a/components/table/TableModels/SortModel.cs +++ b/components/table/TableModels/SortModel.cs @@ -1,8 +1,10 @@ using System; using System.Collections.Generic; +using System.ComponentModel.DataAnnotations; using System.Linq; using System.Linq.Expressions; using System.Reflection; +using AntDesign.Internal; namespace AntDesign.TableModels { @@ -16,16 +18,18 @@ namespace AntDesign.TableModels SortDirection ITableSortModel.SortDirection => _sortDirection; - private readonly PropertyInfo _propertyInfo; private readonly Func _comparer; private SortDirection _sortDirection; - public SortModel(PropertyInfo propertyInfo, int priority, SortDirection defaultSortOrder, Func comparer) + private LambdaExpression _getFieldExpression; + + public SortModel(LambdaExpression getFieldExpression, int priority, SortDirection defaultSortOrder, Func comparer) { this.Priority = priority; - this.FieldName = propertyInfo?.Name; - this._propertyInfo = propertyInfo; + this._getFieldExpression = getFieldExpression; + var member = ColumnExpressionHelper.GetReturnMemberInfo(_getFieldExpression); + this.FieldName = member.GetCustomAttribute(true)?.Name ?? member.Name; this._comparer = comparer; this._sortDirection = defaultSortOrder ?? SortDirection.None; } @@ -42,11 +46,7 @@ namespace AntDesign.TableModels return source as IOrderedQueryable; } - var sourceExpression = Expression.Parameter(typeof(TItem)); - - var propertyExpression = Expression.Property(sourceExpression, _propertyInfo); - - var lambda = Expression.Lambda>(propertyExpression, sourceExpression); + var lambda = (Expression>)_getFieldExpression; if (_sortDirection == SortDirection.Ascending) { diff --git a/site/AntDesign.Docs/Demos/Components/Table/demo/Blazor.razor b/site/AntDesign.Docs/Demos/Components/Table/demo/Blazor.razor index 6232faf4..e51e88f3 100644 --- a/site/AntDesign.Docs/Demos/Components/Table/demo/Blazor.razor +++ b/site/AntDesign.Docs/Demos/Components/Table/demo/Blazor.razor @@ -87,8 +87,6 @@ public async Task OnChange(QueryModel queryModel) { - forecasts = await GetForecastAsync(queryModel.PageIndex, queryModel.PageSize); - _total = 50; Console.WriteLine(JsonSerializer.Serialize(queryModel)); } diff --git a/site/AntDesign.Docs/Demos/Components/Table/demo/DataIndex.razor b/site/AntDesign.Docs/Demos/Components/Table/demo/DataIndex.razor index 9f9d2b78..118c6bc9 100644 --- a/site/AntDesign.Docs/Demos/Components/Table/demo/DataIndex.razor +++ b/site/AntDesign.Docs/Demos/Components/Table/demo/DataIndex.razor @@ -1,16 +1,16 @@ - +@using AntDesign.TableModels + +
- - + +
@code { - ITable table; - TestData[] testData; public class TestData @@ -40,6 +40,17 @@ public DateTime? Time { get; set; } } + public TableFilter[] DayOfWeekFilter = + { + new() {Text = "Monday", Value = 1}, + new() {Text = "Tuesday", Value = 2}, + new() {Text = "Wednesdays", Value = 3}, + new() {Text = "Thursday", Value = 4}, + new() {Text = "Friday", Value = 5}, + new() {Text = "Saturday", Value = 6}, + new() {Text = "Sunday", Value = 7}, + }; + public string[] DayName = {"None", "Monday", "Tuesday", "Wednesdays", "Thursday", "Friday", "Saturday", "Sunday"}; Func _dateTimeCompare = (t1, t2) => @@ -63,7 +74,7 @@ public TestData[] GetForecastAsync() { - var rng = new Random(); + var rng = new Random(42); var startDate = new DateTime(DateTime.Today.Year - 5, 1, 1); var range = (DateTime.Today - startDate).TotalSeconds; return Enumerable.Range(0, 5).Select(index => From 32d1f277080e1d1799b40bc645ca2af59a74d73d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=AC=A8=E6=9C=A8=E5=A4=B4?= Date: Sat, 3 Apr 2021 00:08:36 +0800 Subject: [PATCH 05/15] fix(module: datepicker): DatePicker DisabledDate works incorect (#1298) * fix(module: datepicker): DatePicker DisabledDate works incorect * test(module: dateHelperTests): modify test case Co-authored-by: James Yeung --- components/core/Helpers/DateHelper.cs | 91 +++++++++++++++- .../internal/DatePickerTemplate.razor.cs | 36 +++++-- tests/Core/Helpers/DateHelperTests.cs | 100 ++++++++++++++++++ 3 files changed, 218 insertions(+), 9 deletions(-) create mode 100644 tests/Core/Helpers/DateHelperTests.cs diff --git a/components/core/Helpers/DateHelper.cs b/components/core/Helpers/DateHelper.cs index 852887ed..802ecd99 100644 --- a/components/core/Helpers/DateHelper.cs +++ b/components/core/Helpers/DateHelper.cs @@ -6,6 +6,8 @@ namespace AntDesign public static class DateHelper { private static readonly System.Globalization.Calendar _calendar = CultureInfo.InvariantCulture.Calendar; + private const int DECADE_YEAR_COUNT = 10; + private const int QUARTER_MONTH_COUNT = 3; public static bool IsSameDate(DateTime date, DateTime compareDate) { @@ -43,10 +45,21 @@ namespace AntDesign public static string GetDayOfQuarter(DateTime date) { - int offset = date.Month % 3 > 0 ? 1 : 0; - int quarter = date.Month / 3 + offset; + return $"Q{GetQuarter(date)}"; + } - return $"Q{quarter}"; + public static int GetQuarter(DateTime date) + { + int offset = date.Month % QUARTER_MONTH_COUNT > 0 ? 1 : 0; + int quarter = date.Month / QUARTER_MONTH_COUNT + offset; + + return quarter; + } + + public static DateTime GetStartDateOfQuarter(DateTime date) + { + int quarter = GetQuarter(date); + return new DateTime(date.Year, 1 + ((quarter - 1) * QUARTER_MONTH_COUNT), 1); } public static int GetWeekOfYear(DateTime date) @@ -54,6 +67,78 @@ namespace AntDesign return _calendar.GetWeekOfYear(date, CalendarWeekRule.FirstDay, DayOfWeek.Monday); } + /// + /// for example, + /// when currentDateTime is 2020-01-04 05:34:55 then: + /// the next date shouble be 2030-01-01 00:00:00, it's the start date of next 10 years + /// + /// when currentDateTime is 2023-01-04 05:34:55 then: + /// the next date shouble be 2030-01-01 00:00:00, it's the start date of next 10 years + /// + /// when currentDateTime is 2018-01-04 05:34:55 then: + /// the next date shouble be 2020-01-01 00:00:00, it's the start date of next 10 years + /// + /// + /// + public static DateTime GetNextStartDateOfDecade(DateTime date) + { + int year = date.Year / DECADE_YEAR_COUNT * DECADE_YEAR_COUNT; + + if (year < DateTime.MinValue.Year) + { + year = DateTime.MinValue.Year; + } + + return AddYearsSafely(new DateTime(year, 1, 1), DECADE_YEAR_COUNT); + } + + /// + /// for example, when currentDateTime is 2020-01-04 05:34:55 then: + /// the next date shouble be 2021-01-01 00:00:00, it's the start date of next year + /// + /// + /// + public static DateTime GetNextStartDateOfYear(DateTime date) + { + return AddYearsSafely(new DateTime(date.Year, 1, 1), 1); + } + + /// + /// for example, when currentDateTime is 2020-01-04 05:34:55 then: + /// the next date shouble be 2020-04-01 00:00:00, it's the start date of the next quarter in 2020 + /// + /// + /// + public static DateTime GetNextStartDateOfQuarter(DateTime date) + { + var nextQuarterDate = AddMonthsSafely(new DateTime(date.Year, date.Month, 1), QUARTER_MONTH_COUNT); + + return GetStartDateOfQuarter(nextQuarterDate); + } + + /// + /// for example, when currentDateTime is 2020-01-04 05:34:55 then: + /// the next date shouble be 2020-02-01 00:00:00 , it's the start date of next month + /// + /// + /// + public static DateTime GetNextStartDateOfMonth(DateTime date) + { + return AddMonthsSafely(new DateTime(date.Year, date.Month, 1), 1); + } + + /// + /// for example, when currentDateTime is 2020-01-04 05:34:55 then: + /// the next date shouble be 2021-01-05 00:00:00, it's the start date of next day + /// + /// + /// + public static DateTime GetNextStartDateOfDay(DateTime date) + { + return AddDaysSafely(new DateTime(date.Year, date.Month, date.Day), 1); + } + + public static DateTime CombineNewDate( DateTime date, int? year = null, diff --git a/components/date-picker/internal/DatePickerTemplate.razor.cs b/components/date-picker/internal/DatePickerTemplate.razor.cs index 169aa45e..31a67d04 100644 --- a/components/date-picker/internal/DatePickerTemplate.razor.cs +++ b/components/date-picker/internal/DatePickerTemplate.razor.cs @@ -174,12 +174,7 @@ namespace AntDesign.Internal string selectedCls = isSelected ? $"{PrefixCls}-cell-selected" : ""; string inRangeCls = isInRange ? $"{PrefixCls}-cell-in-range" : ""; - string disabledCls = ""; - if (DisabledDate != null && DisabledDate(currentColDate)) - { - disabledCls = $"{PrefixCls}-cell-disabled"; - } - + string disabledCls = GetDisabledCls(currentColDate); string rangeStartCls = GetRangeStartCls(currentColDate); string rangeEndCls = GetRangeEndCls(currentColDate); string rangeHoverCls = GetRangeHoverCls(currentColDate); @@ -418,6 +413,20 @@ namespace AntDesign.Internal return cls.ToString(); } + private string GetDisabledCls(DateTime currentColDate) + { + string disabledCls = ""; + + var nextStartDate = GetNextStartDate(currentColDate); + + if (DisabledDate?.Invoke(DateHelper.AddDaysSafely(nextStartDate, -1)) == true) + { + disabledCls = $"{PrefixCls}-cell-disabled"; + } + + return disabledCls; + } + private DateTime? FormatDateByPicker(DateTime? dateTime) { return DateHelper.FormatDateByPicker(dateTime, Picker); @@ -459,6 +468,21 @@ namespace AntDesign.Internal }; } + private DateTime GetNextStartDate(DateTime currentDateTime) + { + return Picker switch + { + DatePickerType.Decade => DateHelper.GetNextStartDateOfDecade(currentDateTime), + DatePickerType.Year => DateHelper.GetNextStartDateOfYear(currentDateTime), + DatePickerType.Quarter => DateHelper.GetNextStartDateOfQuarter(currentDateTime), + DatePickerType.Month => DateHelper.GetNextStartDateOfMonth(currentDateTime), + DatePickerType.Week => DateHelper.GetNextStartDateOfDay(currentDateTime), + DatePickerType.Date => DateHelper.GetNextStartDateOfDay(currentDateTime), + DatePickerType.Time => DateHelper.GetNextStartDateOfDay(currentDateTime), + _ => currentDateTime, + }; + } + private bool ShouldStopRenderDate(DateTime preDate, DateTime nextDate) { return Picker switch diff --git a/tests/Core/Helpers/DateHelperTests.cs b/tests/Core/Helpers/DateHelperTests.cs new file mode 100644 index 00000000..abb5660b --- /dev/null +++ b/tests/Core/Helpers/DateHelperTests.cs @@ -0,0 +1,100 @@ +using System; +using System.Collections.Generic; +using Xunit; + +namespace AntDesign.Tests.Core.Helpers +{ + public class DateHelperTests + { + [Theory] + [MemberData(nameof(GetNextStartDateOfDecade_Values))] + public void GetNextStartDateOfDecade(DateTime currentDateTime, DateTime exceptedDateTime) + { + Assert.Equal(exceptedDateTime, DateHelper.GetNextStartDateOfDecade(currentDateTime)); + } + + public static List GetNextStartDateOfDecade_Values => new() + { + new object[] { DateTime.Parse("2020-01-04 05:34:55"), DateTime.Parse("2030-01-01 00:00:00") }, + new object[] { DateTime.Parse("2018-01-04 05:34:55"), DateTime.Parse("2020-01-01 00:00:00") }, + new object[] { DateTime.Parse("2015-07-24 05:34:55"), DateTime.Parse("2020-01-01 00:00:00") }, + new object[] { DateTime.Parse("1800-07-24 05:34:55"), DateTime.Parse("1810-01-01 00:00:00") }, + new object[] { DateTime.Parse("1867-07-24 05:34:55"), DateTime.Parse("1870-01-01 00:00:00") }, + new object[] { DateTime.MinValue, DateTime.MinValue.AddYears(10) }, + new object[] { DateTime.MaxValue, DateTime.Parse($"{DateTime.MaxValue.Year}-01-01 00:00:00") }, + }; + + [Theory] + [MemberData(nameof(GetNextStartDateOfYear_Values))] + public void GetNextStartDateOfYear(DateTime currentDateTime, DateTime exceptedDateTime) + { + Assert.Equal(exceptedDateTime, DateHelper.GetNextStartDateOfYear(currentDateTime)); + } + + public static List GetNextStartDateOfYear_Values => new() + { + new object[] { DateTime.Parse("2020-01-04 05:34:55"), DateTime.Parse("2021-01-01 00:00:00") }, + new object[] { DateTime.Parse("2018-01-04 05:34:55"), DateTime.Parse("2019-01-01 00:00:00") }, + new object[] { DateTime.Parse("2015-07-24 05:34:55"), DateTime.Parse("2016-01-01 00:00:00") }, + new object[] { DateTime.Parse("1800-07-24 05:34:55"), DateTime.Parse("1801-01-01 00:00:00") }, + new object[] { DateTime.Parse("1867-07-24 05:34:55"), DateTime.Parse("1868-01-01 00:00:00") }, + new object[] { DateTime.MinValue, DateTime.MinValue.AddYears(1) }, + new object[] { DateTime.MaxValue, DateTime.Parse($"{DateTime.MaxValue.Year}-01-01 00:00:00") }, + }; + + + [Theory] + [MemberData(nameof(GetNextStartDateOfQuarter_Values))] + public void GetNextStartDateOfQuarter(DateTime currentDateTime, DateTime exceptedDateTime) + { + Assert.Equal(exceptedDateTime, DateHelper.GetNextStartDateOfQuarter(currentDateTime)); + } + + public static List GetNextStartDateOfQuarter_Values => new() + { + new object[] { DateTime.Parse("2020-01-04 05:34:55"), DateTime.Parse("2020-04-01 00:00:00") }, + new object[] { DateTime.Parse("2018-01-04 05:34:55"), DateTime.Parse("2018-04-01 00:00:00") }, + new object[] { DateTime.Parse("2015-07-24 05:34:55"), DateTime.Parse("2015-10-01 00:00:00") }, + new object[] { DateTime.Parse("1800-11-24 05:34:55"), DateTime.Parse("1801-01-01 00:00:00") }, + new object[] { DateTime.Parse("1867-07-24 05:34:55"), DateTime.Parse("1867-10-01 00:00:00") }, + new object[] { DateTime.MinValue, DateTime.MinValue.AddMonths(3) }, + new object[] { DateTime.MaxValue, DateTime.Parse($"{DateTime.MaxValue.Year}-10-01 00:00:00") }, + }; + + [Theory] + [MemberData(nameof(GetNextStartDateOfMonth_Values))] + public void GetNextStartDateOfMonth(DateTime currentDateTime, DateTime exceptedDateTime) + { + Assert.Equal(exceptedDateTime, DateHelper.GetNextStartDateOfMonth(currentDateTime)); + } + + public static List GetNextStartDateOfMonth_Values => new() + { + new object[] { DateTime.Parse("2020-01-04 05:34:55"), DateTime.Parse("2020-02-01 00:00:00") }, + new object[] { DateTime.Parse("2018-01-04 05:34:55"), DateTime.Parse("2018-02-01 00:00:00") }, + new object[] { DateTime.Parse("2015-07-24 05:34:55"), DateTime.Parse("2015-08-01 00:00:00") }, + new object[] { DateTime.Parse("1800-12-24 05:34:55"), DateTime.Parse("1801-01-01 00:00:00") }, + new object[] { DateTime.Parse("1867-07-24 05:34:55"), DateTime.Parse("1867-08-01 00:00:00") }, + new object[] { DateTime.MinValue, DateTime.MinValue.AddMonths(1) }, + new object[] { DateTime.MaxValue, DateTime.Parse($"{DateTime.MaxValue.Year}-12-01 00:00:00") }, + }; + + [Theory] + [MemberData(nameof(GetNextStartDateOfDay_Values))] + public void GetNextStartDateOfDay(DateTime currentDateTime, DateTime exceptedDateTime) + { + Assert.Equal(exceptedDateTime, DateHelper.GetNextStartDateOfDay(currentDateTime)); + } + + public static List GetNextStartDateOfDay_Values => new() + { + new object[] { DateTime.Parse("2020-01-04 05:34:55"), DateTime.Parse("2020-01-05 00:00:00") }, + new object[] { DateTime.Parse("2018-01-04 05:34:55"), DateTime.Parse("2018-01-05 00:00:00") }, + new object[] { DateTime.Parse("2015-07-31 05:34:55"), DateTime.Parse("2015-08-01 00:00:00") }, + new object[] { DateTime.Parse("1800-07-24 05:34:55"), DateTime.Parse("1800-07-25 00:00:00") }, + new object[] { DateTime.Parse("1867-12-24 05:34:55"), DateTime.Parse("1867-12-25 00:00:00") }, + new object[] { DateTime.MinValue, DateTime.MinValue.AddDays(1) }, + new object[] { DateTime.MaxValue, DateTime.Parse($"{DateTime.MaxValue.Year}-12-31 00:00:00") }, + }; + } +} From 19e0f61961925287b72f2e1fa75c445cf32fcf82 Mon Sep 17 00:00:00 2001 From: Andrzej Bakun Date: Fri, 2 Apr 2021 18:23:00 +0200 Subject: [PATCH 06/15] fix(module: upload): Upload list update fix (#1301) * chore: add GitHub Actions for auto preview (#1205) * chore: add github actions for auto preview * fix setup job * chore: add GitHub Actions for auto preview (#1205) * fix(module:upload): file list update * fix(module:upload): typed args for file upload * fix(module:upload): delete button remove from picture-card Co-authored-by: James Yeung --- components/core/JsInterop/interop.ts | 5 ++--- components/upload/Upload.razor | 13 ++++++++----- components/upload/UploadButton.razor.cs | 3 +++ 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/components/core/JsInterop/interop.ts b/components/core/JsInterop/interop.ts index 07dd3b10..3faf5fce 100644 --- a/components/core/JsInterop/interop.ts +++ b/components/core/JsInterop/interop.ts @@ -78,7 +78,7 @@ export function getFileInfo(element) { var fileInfo = []; for (var i = 0; i < element.files.length; i++) { var file = element.files[i]; - var objectUrl = getObjectURL(element); + var objectUrl = getObjectURL(file); fileInfo.push({ fileName: file.name, size: file.size, @@ -91,9 +91,8 @@ export function getFileInfo(element) { } } -export function getObjectURL(element) { +export function getObjectURL(file: File) { var url = null; - var file = element.files[0]; if (window.URL != undefined) { url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { diff --git a/components/upload/Upload.razor b/components/upload/Upload.razor index 80c3bb22..93a3cd4b 100644 --- a/components/upload/Upload.razor +++ b/components/upload/Upload.razor @@ -116,11 +116,14 @@ picture = "picture"; } @file.FileName - - - + @if (!IsPictureCard) + { + + + + } @if (IsPictureCard) diff --git a/components/upload/UploadButton.razor.cs b/components/upload/UploadButton.razor.cs index 4d07eb50..b21e9e3a 100644 --- a/components/upload/UploadButton.razor.cs +++ b/components/upload/UploadButton.razor.cs @@ -141,6 +141,7 @@ namespace AntDesign.Internal public async Task UploadSuccess(string id, string returnData) { var file = Upload.FileList.FirstOrDefault(x => x.Id.Equals(id)); + _uploadInfo.FileList = Upload.FileList; if (file == null) { return; @@ -173,6 +174,7 @@ namespace AntDesign.Internal file.State = UploadState.Fail; file.Percent = 100; _uploadInfo.File = file; + _uploadInfo.FileList = Upload.FileList; file.Response ??= reponseCode; await UploadChanged(id, 100); await InvokeAsync(StateHasChanged); @@ -196,6 +198,7 @@ namespace AntDesign.Internal } file.Percent = progress; _uploadInfo.File = file; + _uploadInfo.FileList = Upload.FileList; await InvokeAsync(StateHasChanged); if (Upload.OnChange.HasDelegate) { From 1d4ea440fa9482d07ce1ee98590bbe0b4c91b8eb Mon Sep 17 00:00:00 2001 From: Andrzej Bakun Date: Sat, 3 Apr 2021 09:22:11 +0200 Subject: [PATCH 07/15] fix(module: textarea): default to empty string (#1305) * chore: add GitHub Actions for auto preview (#1205) * chore: add github actions for auto preview * fix setup job * chore: add GitHub Actions for auto preview (#1205) * fix(module:textarea): add parameter DefaultToEmptyString * fix(module:textarea): occasional crashes of js in firefox * docs(module:input): added new param DefaultToEmptyString Co-authored-by: James Yeung --- components/core/JsInterop/interop.ts | 110 ++++++++++-------- components/input/TextArea.razor.cs | 33 ++++++ .../Demos/Components/Input/doc/index.en-US.md | 8 ++ 3 files changed, 102 insertions(+), 49 deletions(-) diff --git a/components/core/JsInterop/interop.ts b/components/core/JsInterop/interop.ts index 3faf5fce..04891550 100644 --- a/components/core/JsInterop/interop.ts +++ b/components/core/JsInterop/interop.ts @@ -510,58 +510,62 @@ export function getTextAreaInfo(element) { result["borderBottom"] = parseFloat(document.defaultView.getComputedStyle(element, null).getPropertyValue("border-bottom")); result["borderTop"] = parseFloat(document.defaultView.getComputedStyle(element, null).getPropertyValue("border-top")); } + //Firefox can return this as NaN, so it has to be handled here like that. + if (Object.is(NaN, result["borderTop"])) + result["borderTop"] = 1; + if (Object.is(NaN, result["borderBottom"])) + result["borderBottom"] = 1; return result; } - const funcDict = {}; export function registerResizeTextArea(element, minRows, maxRows, objReference) { - if (!objReference) { - disposeResizeTextArea(element); - } - else { - objReferenceDict[element.id] = objReference; - funcDict[element.id + "input"] = function () { resizeTextArea(element, minRows, maxRows); } - element.addEventListener("input", funcDict[element.id + "input"]); - return getTextAreaInfo(element); - } + if (!objReference) { + disposeResizeTextArea(element); + } + else { + objReferenceDict[element.id] = objReference; + funcDict[element.id + "input"] = function () { resizeTextArea(element, minRows, maxRows); } + element.addEventListener("input", funcDict[element.id + "input"]); + return getTextAreaInfo(element); + } } export function disposeResizeTextArea(element) { - element.removeEventListener("input", funcDict[element.id + "input"]); - objReferenceDict[element.id] = null; - funcDict[element.id + "input"] = null; + element.removeEventListener("input", funcDict[element.id + "input"]); + objReferenceDict[element.id] = null; + funcDict[element.id + "input"] = null; } export function resizeTextArea(element, minRows, maxRows) { - var dims = getTextAreaInfo(element); - var rowHeight = dims["lineHeight"]; - var offsetHeight = dims["paddingTop"] + dims["paddingBottom"] + dims["borderTop"] + dims["borderBottom"]; - var oldHeight = parseFloat(element.style.height); - element.style.height = 'auto'; - - var rows = Math.trunc(element.scrollHeight / rowHeight); - rows = Math.max(minRows, rows); + var dims = getTextAreaInfo(element); + var rowHeight = dims["lineHeight"]; + var offsetHeight = dims["paddingTop"] + dims["paddingBottom"] + dims["borderTop"] + dims["borderBottom"]; + var oldHeight = parseFloat(element.style.height); + element.style.height = 'auto'; - var newHeight = 0; - if (rows > maxRows) { - rows = maxRows; + var rows = Math.trunc(element.scrollHeight / rowHeight); + rows = Math.max(minRows, rows); - newHeight = (rows * rowHeight + offsetHeight); - element.style.height = newHeight + "px"; - element.style.overflowY = "visible"; - } - else { - newHeight = rows * rowHeight + offsetHeight; - element.style.height = newHeight + "px"; - element.style.overflowY = "hidden"; - } - if (oldHeight !== newHeight) { - let textAreaObj = objReferenceDict[element.id]; - textAreaObj.invokeMethodAsync("ChangeSizeAsyncJs", parseFloat(element.scrollWidth), newHeight); - } + var newHeight = 0; + if (rows > maxRows) { + rows = maxRows; + + newHeight = (rows * rowHeight + offsetHeight); + element.style.height = newHeight + "px"; + element.style.overflowY = "visible"; + } + else { + newHeight = rows * rowHeight + offsetHeight; + element.style.height = newHeight + "px"; + element.style.overflowY = "hidden"; + } + if (oldHeight !== newHeight) { + let textAreaObj = objReferenceDict[element.id]; + textAreaObj.invokeMethodAsync("ChangeSizeAsyncJs", parseFloat(element.scrollWidth), newHeight); + } } @@ -618,16 +622,20 @@ function preventKeys(e, keys: string[]) { } export function addPreventKeys(inputElement, keys: string[]) { - let dom = getDom(inputElement); - keys = keys.map(function (x) { return x.toUpperCase(); }) - funcDict[inputElement.id + "keydown"] = (e) => preventKeys(e, keys); + if (inputElement) { + let dom = getDom(inputElement); + keys = keys.map(function (x) { return x.toUpperCase(); }) + funcDict[inputElement.id + "keydown"] = (e) => preventKeys(e, keys); (dom as HTMLElement).addEventListener("keydown", funcDict[inputElement.id + "keydown"], false); + } } export function removePreventKeys(inputElement) { - let dom = getDom(inputElement); - (dom as HTMLElement).removeEventListener("keydown", funcDict[inputElement.id + "keydown"]); - funcDict[inputElement.id + "keydown"] = null; + if (inputElement) { + let dom = getDom(inputElement); + (dom as HTMLElement).removeEventListener("keydown", funcDict[inputElement.id + "keydown"]); + funcDict[inputElement.id + "keydown"] = null; + } } function preventKeyOnCondition(e, key: string, check: () => boolean) { @@ -638,13 +646,17 @@ function preventKeyOnCondition(e, key: string, check: () => boolean) { } export function addPreventEnterOnOverlayVisible(element, overlayElement) { - let dom = getDom(element); - funcDict[element.id + "keydown:Enter"] = (e) => preventKeyOnCondition(e, "enter", () => overlayElement.offsetParent !== null); - (dom as HTMLElement).addEventListener("keydown", funcDict[element.id + "keydown:Enter"], false); + if (element && overlayElement) { + let dom = getDom(element); + funcDict[element.id + "keydown:Enter"] = (e) => preventKeyOnCondition(e, "enter", () => overlayElement.offsetParent !== null); + (dom as HTMLElement).addEventListener("keydown", funcDict[element.id + "keydown:Enter"], false); + } } export function removePreventEnterOnOverlayVisible(element) { - let dom = getDom(element); - (dom as HTMLElement).removeEventListener("keydown", funcDict[element.id + "keydown:Enter"]); - funcDict[element.id + "keydown:Enter"] = null; + if (element) { + let dom = getDom(element); + (dom as HTMLElement).removeEventListener("keydown", funcDict[element.id + "keydown:Enter"]); + funcDict[element.id + "keydown:Enter"] = null; + } } \ No newline at end of file diff --git a/components/input/TextArea.razor.cs b/components/input/TextArea.razor.cs index edfbcd59..8635668a 100644 --- a/components/input/TextArea.razor.cs +++ b/components/input/TextArea.razor.cs @@ -1,4 +1,5 @@ using System; +using System.Globalization; using System.Text.Json; using System.Threading.Tasks; using AntDesign.JsInterop; @@ -30,6 +31,8 @@ namespace AntDesign [Parameter] public bool AutoSize { get; set; } + [Parameter] + public bool DefaultToEmptyString { get; set; } [Parameter] @@ -91,6 +94,36 @@ namespace AntDesign } } + protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage) + { + if (string.IsNullOrWhiteSpace(value)) + { + if (DefaultToEmptyString) + result = string.Empty; + else + result = default; + validationErrorMessage = null; + return true; + } + + var success = BindConverter.TryConvertTo( + value, CultureInfo.CurrentCulture, out var parsedValue); + + if (success) + { + result = parsedValue; + validationErrorMessage = null; + + return true; + } + else + { + result = default; + validationErrorMessage = $"{FieldIdentifier.FieldName} field isn't valid."; + + return false; + } + } protected override void Dispose(bool disposing) { diff --git a/site/AntDesign.Docs/Demos/Components/Input/doc/index.en-US.md b/site/AntDesign.Docs/Demos/Components/Input/doc/index.en-US.md index 2d0cf080..41f7b29c 100644 --- a/site/AntDesign.Docs/Demos/Components/Input/doc/index.en-US.md +++ b/site/AntDesign.Docs/Demos/Components/Input/doc/index.en-US.md @@ -15,6 +15,8 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca ## API +### Common API + | Property | Description | Type | Default Value | | --- | --- | --- | --- | | AddOnBefore | The label text displayed before (on the left side of) the input field. | RenderFragment | - | @@ -32,3 +34,9 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca | OnChange |callback when the content is change | function(e) | 0 | | OnPressEnter |The callback function that is triggered when Enter key is pressed. | function(e) | - | | OnInput |callback when user input | function(e) | - | + +### TextArea + +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| DefaultToEmptyString | When `false`, value will be set to `null` when content is empty or whitespace. When `true`, value will be set to empty string. | boolean | false | \ No newline at end of file From f8ec6256ba304d96c603cdcd487b6999854e9728 Mon Sep 17 00:00:00 2001 From: James Yeung Date: Sat, 3 Apr 2021 23:36:46 +0800 Subject: [PATCH 08/15] fix(module: grid): missing flex and wrap style (#1296) * fix(module: grid): missing flex style * remove the old md file * fix demos * fix build error * fix no warp class --- components/grid/Col.razor | 2 +- components/grid/Col.razor.cs | 28 ++-- components/grid/Row.razor.cs | 4 + .../Command/GenerateDemoJsonCommand.cs | 2 +- .../Components/Grid/demo/Alignment.razor | 48 ------ .../Demos/Components/Grid/demo/Breakpoint.md | 14 -- .../Components/Grid/demo/Breakpoint.razor | 21 --- .../Demos/Components/Grid/demo/Flex.razor | 49 ++++++ .../Components/Grid/demo/FlexAlign.razor | 59 +++++++ .../Components/Grid/demo/FlexOrder.razor | 38 +++++ .../Components/Grid/demo/FlexStretch.razor | 24 +++ .../Demos/Components/Grid/demo/Gutter.razor | 154 ++++++++---------- .../Demos/Components/Grid/demo/More.md | 15 -- .../Demos/Components/Grid/demo/More.razor | 40 ----- .../Demos/Components/Grid/demo/Offset.md | 15 -- .../Demos/Components/Grid/demo/Order.md | 14 -- .../Demos/Components/Grid/demo/Order.razor | 29 ---- .../{Playround.razor => Playground.razor} | 0 .../Demos/Components/Grid/demo/Playround.md | 14 -- .../Demos/Components/Grid/demo/Responsive.md | 14 -- .../Components/Grid/demo/Responsive.razor | 25 ++- .../Components/Grid/demo/ResponsiveMore.razor | 13 ++ .../Demos/Components/Grid/demo/Setting.md | 15 -- .../Demos/Components/Grid/demo/Setting.razor | 49 ------ .../Demos/Components/Grid/demo/Sort.razor | 7 +- .../Demos/Components/Grid/demo/Stretch.md | 14 -- .../Demos/Components/Grid/demo/Stretch.razor | 19 --- .../Components/Grid/demo/UseBreakpoint.razor | 22 +++ .../Grid/demo/{Basic.md => basic.md} | 4 +- .../Grid/demo/{Alignment.md => flex-align.md} | 1 + .../Demos/Components/Grid/demo/flex-order.md | 15 ++ .../Components/Grid/demo/flex-stretch.md | 15 ++ .../Demos/Components/Grid/demo/flex.md | 17 ++ .../Demos/Components/Grid/demo/gutter.md | 22 ++- .../Demos/Components/Grid/demo/offset.md | 17 ++ .../Demos/Components/Grid/demo/playground.md | 149 +++++++++++++++++ .../Components/Grid/demo/responsive-more.md | 16 ++ .../Demos/Components/Grid/demo/responsive.md | 14 ++ .../Components/Grid/demo/{Sort.md => sort.md} | 4 +- .../Components/Grid/demo/useBreakpoint.md | 15 ++ site/AntDesign.Docs/Services/DemoService.cs | 3 +- 41 files changed, 592 insertions(+), 448 deletions(-) delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Alignment.razor delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Breakpoint.md delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Breakpoint.razor create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Flex.razor create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/FlexAlign.razor create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/FlexOrder.razor create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/FlexStretch.razor delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/More.md delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/More.razor delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Offset.md delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Order.md delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Order.razor rename site/AntDesign.Docs/Demos/Components/Grid/demo/{Playround.razor => Playground.razor} (100%) delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Playround.md delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Responsive.md create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/ResponsiveMore.razor delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Setting.md delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Setting.razor delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Stretch.md delete mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/Stretch.razor create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/UseBreakpoint.razor rename site/AntDesign.Docs/Demos/Components/Grid/demo/{Basic.md => basic.md} (96%) rename site/AntDesign.Docs/Demos/Components/Grid/demo/{Alignment.md => flex-align.md} (99%) create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/flex-order.md create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/flex-stretch.md create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/flex.md create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/offset.md create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/playground.md create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/responsive-more.md create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/responsive.md rename site/AntDesign.Docs/Demos/Components/Grid/demo/{Sort.md => sort.md} (65%) create mode 100644 site/AntDesign.Docs/Demos/Components/Grid/demo/useBreakpoint.md diff --git a/components/grid/Col.razor b/components/grid/Col.razor index b6c1933a..dafaf718 100644 --- a/components/grid/Col.razor +++ b/components/grid/Col.razor @@ -1,6 +1,6 @@ @namespace AntDesign @inherits AntDomComponentBase -
+
@ChildContent
diff --git a/components/grid/Col.razor.cs b/components/grid/Col.razor.cs index 8f8a7cda..3c7441ae 100644 --- a/components/grid/Col.razor.cs +++ b/components/grid/Col.razor.cs @@ -63,7 +63,7 @@ namespace AntDesign [CascadingParameter] public Row Row { get; set; } - private string _hostFlexStyle = null; + private string _hostFlexStyle; private string GutterStyle { get; set; } @@ -81,11 +81,11 @@ namespace AntDesign var prefixCls = "ant-col"; this.ClassMapper.Clear() .Add(prefixCls) - .If($"{prefixCls}-{this.Span.Value}", () => this.Span.Value != null) - .If($"{prefixCls}-order-{this.Order.Value}", () => this.Order.Value != null) - .If($"{prefixCls}-offset-{this.Offset.Value}", () => this.Offset.Value != null) - .If($"{prefixCls}-pull-{this.Pull.Value}", () => this.Pull.Value != null) - .If($"{prefixCls}-push-{this.Push.Value}", () => this.Push.Value != null) + .GetIf(()=>$"{prefixCls}-{this.Span.Value}", () => this.Span.Value != null) + .GetIf(() => $"{prefixCls}-order-{this.Order.Value}", () => this.Order.Value != null) + .GetIf(() => $"{prefixCls}-offset-{this.Offset.Value}", () => this.Offset.Value != null) + .GetIf(() => $"{prefixCls}-pull-{this.Pull.Value}", () => this.Pull.Value != null) + .GetIf(() => $"{prefixCls}-push-{this.Push.Value}", () => this.Push.Value != null) ; SetSizeClassMapper(prefixCls, Xs, "xs"); @@ -104,11 +104,11 @@ namespace AntDesign }, embedded => { ClassMapper - .If($"{prefixCls}-{sizeName}-{embedded.Span.Value}", () => embedded.Span.Value != null) - .If($"{prefixCls}-{sizeName}-order-{embedded.Order.Value}", () => embedded.Order.Value != null) - .If($"{prefixCls}-{sizeName}-offset-{embedded.Offset.Value}", () => embedded.Offset.Value != null) - .If($"{prefixCls}-{sizeName}-push-{embedded.Push.Value}", () => embedded.Push.Value != null) - .If($"{prefixCls}-{sizeName}-pull-{embedded.Pull.Value}", () => embedded.Pull.Value != null); + .GetIf(() => $"{prefixCls}-{sizeName}-{embedded.Span.Value}", () => embedded.Span.Value != null) + .GetIf(() => $"{prefixCls}-{sizeName}-order-{embedded.Order.Value}", () => embedded.Order.Value != null) + .GetIf(() => $"{prefixCls}-{sizeName}-offset-{embedded.Offset.Value}", () => embedded.Offset.Value != null) + .GetIf(() => $"{prefixCls}-{sizeName}-push-{embedded.Push.Value}", () => embedded.Push.Value != null) + .GetIf(() => $"{prefixCls}-{sizeName}-pull-{embedded.Pull.Value}", () => embedded.Pull.Value != null); }); } @@ -121,12 +121,12 @@ namespace AntDesign { if (Regex.Match(str, "^\\d+(\\.\\d+)?(px|em|rem|%)$").Success) { - return $"0 0 {Flex}"; + return $"flex: 0 0 {str}"; } - return Flex.AsT0; + return $"flex: {str}"; }, - num => $"{Flex} {Flex} auto"); + num => $"flex: {num} {num} auto"); } protected override void OnInitialized() diff --git a/components/grid/Row.razor.cs b/components/grid/Row.razor.cs index 4b9140e3..63001ade 100644 --- a/components/grid/Row.razor.cs +++ b/components/grid/Row.razor.cs @@ -39,6 +39,9 @@ namespace AntDesign [Parameter] public string Justify { get; set; } + [Parameter] + public bool Wrap { get; set; } = true; + [Parameter] public GutterType Gutter { get; set; } @@ -79,6 +82,7 @@ namespace AntDesign .If($"{prefixCls}-center", () => Justify == "center") .If($"{prefixCls}-space-around", () => Justify == "space-around") .If($"{prefixCls}-space-between", () => Justify == "space-between") + .If($"{prefixCls}-no-wrap", () => !Wrap) ; if (DefaultBreakpoint != null) diff --git a/site/AntDesign.Docs.Build.CLI/Command/GenerateDemoJsonCommand.cs b/site/AntDesign.Docs.Build.CLI/Command/GenerateDemoJsonCommand.cs index 25ff8199..fb7735e3 100644 --- a/site/AntDesign.Docs.Build.CLI/Command/GenerateDemoJsonCommand.cs +++ b/site/AntDesign.Docs.Build.CLI/Command/GenerateDemoJsonCommand.cs @@ -49,7 +49,7 @@ namespace AntDesign.Docs.Build.CLI.Command } catch (Exception ex) { - Console.WriteLine(ex.Message); + Console.WriteLine(ex.StackTrace); return -1; } diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Alignment.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/Alignment.razor deleted file mode 100644 index 1e7d1c73..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Alignment.razor +++ /dev/null @@ -1,48 +0,0 @@ -
- - Align Top - - -
- -

col-4

-

col-4

-

col-4

-

col-4

- -
- - - - Align Center - -
- -

col-4

-

col-4

-

col-4

-

col-4

- -
- - - Align Bottom - -
- -

col-4

-

col-4

-

col-4

-

col-4

- -
-
- - - @code{ - - } diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Breakpoint.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/Breakpoint.md deleted file mode 100644 index 5cb5e516..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Breakpoint.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -order: 11 -title: - zh-CN: useBreakpoint Hook - en-US: useBreakpoint Hook ---- - -## zh-CN - -使用 useBreakpoint Hook 个性化布局。 - -## en-US - -Use useBreakpoint Hook provide personalized layout. diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Breakpoint.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/Breakpoint.razor deleted file mode 100644 index eb0706dd..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Breakpoint.razor +++ /dev/null @@ -1,21 +0,0 @@ -
- Current break point: - - sm - - - md - - - lg - - - xl - - - xxl - -
-@code{ - -} \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Flex.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/Flex.razor new file mode 100644 index 00000000..50a2f20c --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/Flex.razor @@ -0,0 +1,49 @@ +
+ sub-element align left + + col-4 + col-4 + col-4 + col-4 + + + sub-element align center + + col-4 + col-4 + col-4 + col-4 + + + sub-element align right + + col-4 + col-4 + col-4 + col-4 + + + + sub-element monospaced arrangement + + col-4 + col-4 + col-4 + col-4 + + + + sub-element align full + + col-4 + col-4 + col-4 + col-4 + +
+ + \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/FlexAlign.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/FlexAlign.razor new file mode 100644 index 00000000..5b652a00 --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/FlexAlign.razor @@ -0,0 +1,59 @@ +
+ Align Top + + + @DemoBox((100, "col-4")) + + + @DemoBox((50, "col-4")) + + + @DemoBox((120, "col-4")) + + + @DemoBox((80, "col-4")) + + + + Align Middle + + + @DemoBox((100, "col-4")) + + + @DemoBox((50, "col-4")) + + + @DemoBox((120, "col-4")) + + + @DemoBox((80, "col-4")) + + + + Align Bottom + + + @DemoBox((100, "col-4")) + + + @DemoBox((50, "col-4")) + + + @DemoBox((120, "col-4")) + + + @DemoBox((80, "col-4")) + + +
+ + + +@code{ + RenderFragment<(int value, string children)> DemoBox = props =>@

@props.children

; +} diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/FlexOrder.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/FlexOrder.razor new file mode 100644 index 00000000..1922ff6a --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/FlexOrder.razor @@ -0,0 +1,38 @@ +
+ Normal + + + 1 col-order-4 + + + 2 col-order-3 + + + 3 col-order-2 + + + 4 col-order-1 + + + Responsive + + + 1 col-order-responsive + + + 2 col-order-responsive + + + 3 col-order-responsive + + + 4 col-order-responsive + + +
+ + \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/FlexStretch.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/FlexStretch.razor new file mode 100644 index 00000000..ffcb17ae --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/FlexStretch.razor @@ -0,0 +1,24 @@ +
+ Percentage columns + + 2 / 5 + 3 / 5 + + Fill rest + + 100px + Fill Rest + + Raw flex style + + 1 1 200px + 0 1 300px + + + + +
none
+ + auto with no-wrap + +
\ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Gutter.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/Gutter.razor index 68ffef9f..da0d2a89 100644 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Gutter.razor +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/Gutter.razor @@ -1,85 +1,6 @@ -
- - - Horizontal - - -
- - -
col-6
- - -
col-6
- - -
col-6
- - -
col-6
- - -
- - Responsive - -
- - -
col-6
- - -
col-6
- - -
col-6
- - -
col-6
- - -
- - Vertical - -
- - -
col-6
- - -
col-6
- - -
col-6
- - -
col-6
- - -
col-6
- - -
col-6
- - -
col-6
- - -
col-6
- - -
-
-@code{ - Dictionary Gutter1 = new Dictionary() +@{ + string style="background: #0092ff; padding: 8px 0;"; + Dictionary gutter = new() { ["xs"] = 8, ["sm"] = 16, @@ -88,6 +9,71 @@ ["xl"] = 48, ["xxl"] = 64 }; - +} +
+ Horizontal + + +
col-6
+ + +
col-6
+ + +
col-6
+ + +
col-6
+ + + Responsive + + +
col-6
+ + +
col-6
+ + +
col-6
+ + +
col-6
+ + + Vertical + + +
col-6
+ + +
col-6
+ + +
col-6
+ + +
col-6
+ + +
col-6
+ + +
col-6
+ + +
col-6
+ + +
col-6
+ + -} \ No newline at end of file +
+ + diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/More.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/More.md deleted file mode 100644 index 92c5286d..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/More.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -order: 9 -title: - zh-CN: 其他属性的响应式 - en-US: More responsive ---- - -## zh-CN - -span pull push offset order 属性可以通过内嵌到 xs sm md lg xl xxl 属性中来使用。 -其中 xs={6} 相当于 xs={{ span: 6 }}。 - -## en-US - -span pull push offset order property can be embedded into xs sm md lg xl properties to use, where xs={6} is equivalent to xs={{span: 6}}. diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/More.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/More.razor deleted file mode 100644 index 067b2e0e..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/More.razor +++ /dev/null @@ -1,40 +0,0 @@ -
- - - Col - - - Col - - - Col - - -
- -@code -{ - EmbeddedProperty xs1 = new EmbeddedProperty() - { - Span="5", - Offset="1" - }; - - EmbeddedProperty lg1 = new EmbeddedProperty() - { - Span = "6", - Offset = "2" - }; - - EmbeddedProperty xs2 = new EmbeddedProperty() - { - Span = "11", - Offset = "1" - }; - - EmbeddedProperty xs3= new EmbeddedProperty() - { - Span = "5", - Offset = "1" - }; -} \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Offset.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/Offset.md deleted file mode 100644 index 2d297778..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Offset.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -order: 2 -title: - zh-CN: 栅格排序 - en-US: Column offset ---- - -## zh-CN - -列排序。 -通过使用 `push` 和 `pull` 类就可以很容易的改变列（column）的顺序。 - -## en-US - -`Offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width. diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Order.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/Order.md deleted file mode 100644 index 3bcb0221..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Order.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -order: 6 -title: - zh-CN: 排序 - en-US: Order ---- - -## zh-CN - -通过 Order 来改变元素的排序。 - -## en-US - -To change the element sort by order. diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Order.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/Order.razor deleted file mode 100644 index df6d271e..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Order.razor +++ /dev/null @@ -1,29 +0,0 @@ - -
- - - 1 col-Order-4 - - - 2 col-Order-3 - - - 3 col-Order-2 - - - 4 col-Order-1 - - - - -
- - - -@code{ - -} \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Playround.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/Playground.razor similarity index 100% rename from site/AntDesign.Docs/Demos/Components/Grid/demo/Playround.razor rename to site/AntDesign.Docs/Demos/Components/Grid/demo/Playground.razor diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Playround.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/Playround.md deleted file mode 100644 index f31d2bc8..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Playround.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -order: 10 -title: - zh-CN: 栅格配置器 - en-US: Playground ---- - -## zh-CN - -可以简单配置几种等分栅格和间距。 - -## en-US - -A simple playground for column count and gutter. diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Responsive.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/Responsive.md deleted file mode 100644 index 8a7388af..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Responsive.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -order: 8 -title: - zh-CN: 响应式布局 - en-US: Responsive ---- - -## zh-CN - -参照 Bootstrap 的 响应式设计，预设六个响应尺寸：xs sm md lg xl xxl。 - -## en-US - -Referring to the Bootstrap responsive design, here preset six dimensions: xs sm md lg xl. diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Responsive.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/Responsive.razor index fd7bd722..720bb44f 100644 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Responsive.razor +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/Responsive.razor @@ -1,13 +1,12 @@ -
- - - Col - - - Col - - - Col - - -
+ + + Col + + + Col + + + Col + + + diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/ResponsiveMore.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/ResponsiveMore.razor new file mode 100644 index 00000000..de72849e --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/ResponsiveMore.razor @@ -0,0 +1,13 @@ + + + Col + + + Col + + + Col + + + +@code{ EmbeddedProperty Property(int span, int offset) => new() { Span = span, Offset = offset }; } \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Setting.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/Setting.md deleted file mode 100644 index 085b4de3..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Setting.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -order: 4 -title: - zh-CN: 排版 - en-US: Typesetting ---- - -## zh-CN - -布局基础。 -子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。 - -## en-US - -Child elements depending on the value of the start,center, end,space-between, space-around, which are defined in its parent node typesetting mode. diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Setting.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/Setting.razor deleted file mode 100644 index 4b4f078e..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Setting.razor +++ /dev/null @@ -1,49 +0,0 @@ -
-
-

sub-element Align left

- - col-4 - col-4 - col-4 - col-4 - -

sub-element Align center

- - col-4 - col-4 - col-4 - col-4 - -

sub-element Align right

- - col-4 - col-4 - col-4 - col-4 - -

sub-element monospaced arrangement

- - col-4 - col-4 - col-4 - col-4 - -

sub-element Align full

- - col-4 - col-4 - col-4 - col-4 - -
- - - -
-@code{ - -} \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Sort.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/Sort.razor index e11fe091..29f4feba 100644 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Sort.razor +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/Sort.razor @@ -1,13 +1,10 @@ 
- col-18 col-Push-6 + col-18 col-push-6 - col-6 col-Pull-18 + col-6 col-pull-18
-@code{ - -} \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Stretch.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/Stretch.md deleted file mode 100644 index 7bf8a9fc..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Stretch.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -order: 7 -title: - zh-CN: Flex 填充 - en-US: Flex Stretch ---- - -## zh-CN - -Col 提供 flex 属性以支持填充。 - -## en-US - -Col provides flex prop to support fill rest. diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Stretch.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/Stretch.razor deleted file mode 100644 index 0a2ef681..00000000 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Stretch.razor +++ /dev/null @@ -1,19 +0,0 @@ -
- - Percentage columns - -

To do

- - Fill rest - -

To do

- - Raw flex style - -

To do

-
- - -@code{ - -} \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/UseBreakpoint.razor b/site/AntDesign.Docs/Demos/Components/Grid/demo/UseBreakpoint.razor new file mode 100644 index 00000000..ed2d30b0 --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/UseBreakpoint.razor @@ -0,0 +1,22 @@ + + Current break point: @current?.Name + @foreach (var type in types) + { + if (type.Width < current?.Width) + { + @type.Name + } + } + + +@code{ + + BreakpointType[] types = new[] { BreakpointType.Xxl, BreakpointType.Xl, BreakpointType.Lg, BreakpointType.Md, BreakpointType.Sm, BreakpointType.Xs }; + + BreakpointType current; + + void HandleBreakpoint(BreakpointType breakpoint) + { + current = breakpoint; + } +} \ No newline at end of file diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Basic.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/basic.md similarity index 96% rename from site/AntDesign.Docs/Demos/Components/Grid/demo/Basic.md rename to site/AntDesign.Docs/Demos/Components/Grid/demo/basic.md index cf4fa718..3fb43ac1 100644 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Basic.md +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/basic.md @@ -8,9 +8,11 @@ title: ## zh-CN 从堆叠到水平排列。 -使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。。 + +使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。 ## en-US From the stack to the horizontal arrangement. + You can create a basic grid system by using a single set of `Row` and `Col` grid assembly, all of the columns (Col) must be placed in `Row`. diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Alignment.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/flex-align.md similarity index 99% rename from site/AntDesign.Docs/Demos/Components/Grid/demo/Alignment.md rename to site/AntDesign.Docs/Demos/Components/Grid/demo/flex-align.md index a3e14575..2dd27203 100644 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Alignment.md +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/flex-align.md @@ -12,3 +12,4 @@ title: ## en-US Child elements vertically aligned. + diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/flex-order.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/flex-order.md new file mode 100644 index 00000000..2ea49c87 --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/flex-order.md @@ -0,0 +1,15 @@ +--- +order: 6 +title: + zh-CN: 排序 + en-US: Order +--- + +## zh-CN + +通过 `order` 来改变元素的排序。 + +## en-US + +To change the element sort by `order`. + diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/flex-stretch.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/flex-stretch.md new file mode 100644 index 00000000..82c701f3 --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/flex-stretch.md @@ -0,0 +1,15 @@ +--- +order: 7 +title: + zh-CN: Flex 填充 + en-US: Flex Stretch +--- + +## zh-CN + +Col 提供 `flex` 属性以支持填充。 + +## en-US + +Col provides `flex` prop to support fill rest. + diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/flex.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/flex.md new file mode 100644 index 00000000..b90967ee --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/flex.md @@ -0,0 +1,17 @@ +--- +order: 4 +title: + zh-CN: 排版 + en-US: Typesetting +--- + +## zh-CN + +布局基础。 + +子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。 + +## en-US + +Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode. + diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/gutter.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/gutter.md index 7abccd7c..b1598221 100644 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/gutter.md +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/gutter.md @@ -7,13 +7,23 @@ title: ## zh-CN -栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。(n 是自然数) -如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。 -如果需要垂直间距，可以写成数组形式 [水平间距, 垂直间距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]。 -数组形式垂直间距在 `3.24.0` 之后支持。 +栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔(n 是自然数)。 + +如果要支持响应式，可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32 }`。 + +如果需要垂直间距，可以写成数组形式 `[水平间距, 垂直间距]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`。 ## en-US -You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. (`n` stands for natural number.) +You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px` (`n` stands for natural number). + You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsive design. -You can use a array to set vertical spacing, `[horizontal, vertical]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`. vertical gutter was supported after `3.24.0` + +You can use a array to set vertical spacing, `[horizontal, vertical]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`. + + + diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/offset.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/offset.md new file mode 100644 index 00000000..41f1ac82 --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/offset.md @@ -0,0 +1,17 @@ +--- +order: 2 +title: + zh-CN: 左右偏移 + en-US: Column offset +--- + +## zh-CN + +列偏移。 + +使用 `offset` 可以将列向右侧偏。例如，`offset={4}` 将元素向右侧偏移了 4 个列（column）的宽度。 + +## en-US + +`offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width. + diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/playground.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/playground.md new file mode 100644 index 00000000..5bcf5aa9 --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/playground.md @@ -0,0 +1,149 @@ +--- +order: 10 +title: + zh-CN: 栅格配置器 + en-US: Playground +--- + +## zh-CN + +可以简单配置几种等分栅格和间距。 + +## en-US + +A simple playground for column count and gutter. + +```jsx +import { Row, Col, Slider } from 'antd'; + +const gutters = {}; +const vgutters = {}; +const colCounts = {}; + +[8, 16, 24, 32, 40, 48].forEach((value, i) => { + gutters[i] = value; +}); +[8, 16, 24, 32, 40, 48].forEach((value, i) => { + vgutters[i] = value; +}); +[2, 3, 4, 6, 8, 12].forEach((value, i) => { + colCounts[i] = value; +}); + +class App extends React.Component { + state = { + gutterKey: 1, + vgutterKey: 1, + colCountKey: 2, + }; + + onGutterChange = gutterKey => { + this.setState({ gutterKey }); + }; + + onVGutterChange = vgutterKey => { + this.setState({ vgutterKey }); + }; + + onColCountChange = colCountKey => { + this.setState({ colCountKey }); + }; + + render() { + const { gutterKey, vgutterKey, colCountKey } = this.state; + const cols = []; + const colCount = colCounts[colCountKey]; + let colCode = ''; + for (let i = 0; i < colCount; i++) { + cols.push( + +
Column
+ , + ); + colCode += ` \n`; + } + return ( + <> + Horizontal Gutter (px): +
+ gutters[value]} + /> +
+ Vertical Gutter (px): +
+ vgutters[value]} + /> +
+ Column Count: +
+ colCounts[value]} + /> +
+ + {cols} + {cols} + + Another Row: + {cols} + 
{`\n${colCode}\n${colCode}`}
+ 
{`\n${colCode}`}
+ + ); + } +} + +ReactDOM.render(, mountNode); +``` + +```css +#components-grid-demo-playground [class~='ant-col'] { + background: transparent; + border: 0; +} +#components-grid-demo-playground [class~='ant-col'] > div { + height: 120px; + font-size: 14px; + line-height: 120px; + background: #0092ff; + border-radius: 4px; +} +#components-grid-demo-playground pre { + padding: 8px 16px; + font-size: 13px; + background: #f9f9f9; + border-radius: 6px; +} +#components-grid-demo-playground pre.demo-code { + direction: ltr; +} +#components-grid-demo-playground .ant-col { + padding: 0; +} +``` + + diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/responsive-more.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/responsive-more.md new file mode 100644 index 00000000..008e5d05 --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/responsive-more.md @@ -0,0 +1,16 @@ +--- +order: 9 +title: + zh-CN: 其他属性的响应式 + en-US: More responsive +--- + +## zh-CN + +`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` `xl` `xxl` 属性中来使用。 + +其中 `xs={6}` 相当于 `xs={{ span: 6 }}`。 + +## en-US + +`span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` `xxl` properties to use, where `xs={6}` is equivalent to `xs={{span: 6}}`. diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/responsive.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/responsive.md new file mode 100644 index 00000000..02d56c8a --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/responsive.md @@ -0,0 +1,14 @@ +--- +order: 8 +title: + zh-CN: 响应式布局 + en-US: Responsive +--- + +## zh-CN + +参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设六个响应尺寸：`xs` `sm` `md` `lg` `xl` `xxl`。 + +## en-US + +Referring to the Bootstrap [responsive design](http://getbootstrap.com/css/#grid-media-queries), here preset six dimensions: `xs` `sm` `md` `lg` `xl` `xxl`. diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/Sort.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/sort.md similarity index 65% rename from site/AntDesign.Docs/Demos/Components/Grid/demo/Sort.md rename to site/AntDesign.Docs/Demos/Components/Grid/demo/sort.md index 6930fecf..40c272c5 100644 --- a/site/AntDesign.Docs/Demos/Components/Grid/demo/Sort.md +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/sort.md @@ -8,8 +8,10 @@ title: ## zh-CN 列排序。 -通过使用 push 和 pull 类就可以很容易的改变列（column）的顺序。 + +通过使用 `push` 和 `pull` 类就可以很容易的改变列（column）的顺序。 ## en-US By using `push` and `pull` class you can easily change column order. + diff --git a/site/AntDesign.Docs/Demos/Components/Grid/demo/useBreakpoint.md b/site/AntDesign.Docs/Demos/Components/Grid/demo/useBreakpoint.md new file mode 100644 index 00000000..dbb68547 --- /dev/null +++ b/site/AntDesign.Docs/Demos/Components/Grid/demo/useBreakpoint.md @@ -0,0 +1,15 @@ +--- +order: 10 +title: + zh-CN: 监听 Breakpoint + en-US: Breakpoint +--- + +## zh-CN + +使用 `OnBreakpoint` 事件个性化布局。 + +## en-US + +Use `OnBreakpoint` provide personalized layout. + diff --git a/site/AntDesign.Docs/Services/DemoService.cs b/site/AntDesign.Docs/Services/DemoService.cs index f9c50aac..4a292293 100644 --- a/site/AntDesign.Docs/Services/DemoService.cs +++ b/site/AntDesign.Docs/Services/DemoService.cs @@ -110,7 +110,8 @@ namespace AntDesign.Docs.Services _showCaseCache ??= new ConcurrentCache(); return _showCaseCache.GetOrAdd(type, t => { - var showCase = Type.GetType($"{Assembly.GetExecutingAssembly().GetName().Name}.{type}"); + var showCase = Type.GetType($"{Assembly.GetExecutingAssembly().GetName().Name}.{type}") ?? typeof(Template); + void ShowCase(RenderTreeBuilder builder) { builder.OpenComponent(0, showCase); From 194caa37fbd80db1bc09e6dcc2e6bccbd3bee571 Mon Sep 17 00:00:00 2001 From: James Yeung Date: Sun, 4 Apr 2021 00:54:18 +0800 Subject: [PATCH 09/15] docs: add changelog in document (#1306) --- .../AntDesign.Docs.Server.csproj | 7 +-- site/AntDesign.Docs.Server/Pages/_Host.cshtml | 5 +-- .../AntDesign.Docs.Wasm.csproj | 7 --- site/AntDesign.Docs/AntDesign.Docs.csproj | 10 ++++- tests/grid/ColTests.cs | 44 ++++++++++++------- 5 files changed, 40 insertions(+), 33 deletions(-) diff --git a/site/AntDesign.Docs.Server/AntDesign.Docs.Server.csproj b/site/AntDesign.Docs.Server/AntDesign.Docs.Server.csproj index d869cbe2..df50d8e9 100644 --- a/site/AntDesign.Docs.Server/AntDesign.Docs.Server.csproj +++ b/site/AntDesign.Docs.Server/AntDesign.Docs.Server.csproj @@ -8,13 +8,8 @@ - - - - - - + \ No newline at end of file diff --git a/site/AntDesign.Docs.Server/Pages/_Host.cshtml b/site/AntDesign.Docs.Server/Pages/_Host.cshtml index 554496b1..a486a18f 100644 --- a/site/AntDesign.Docs.Server/Pages/_Host.cshtml +++ b/site/AntDesign.Docs.Server/Pages/_Host.cshtml @@ -13,11 +13,10 @@ @**@ - - + @@ -38,4 +37,4 @@ - + \ No newline at end of file diff --git a/site/AntDesign.Docs.Wasm/AntDesign.Docs.Wasm.csproj b/site/AntDesign.Docs.Wasm/AntDesign.Docs.Wasm.csproj index c1a069bd..17115ade 100644 --- a/site/AntDesign.Docs.Wasm/AntDesign.Docs.Wasm.csproj +++ b/site/AntDesign.Docs.Wasm/AntDesign.Docs.Wasm.csproj @@ -25,11 +25,4 @@ - - - - - - - \ No newline at end of file diff --git a/site/AntDesign.Docs/AntDesign.Docs.csproj b/site/AntDesign.Docs/AntDesign.Docs.csproj index e284e879..a7bbacdc 100644 --- a/site/AntDesign.Docs/AntDesign.Docs.csproj +++ b/site/AntDesign.Docs/AntDesign.Docs.csproj @@ -50,11 +50,17 @@ $(SolutionDir)/site/AntDesign.Docs + + + + + + - - + + diff --git a/tests/grid/ColTests.cs b/tests/grid/ColTests.cs index 7bbd3060..e1783bf5 100644 --- a/tests/grid/ColTests.cs +++ b/tests/grid/ColTests.cs @@ -8,7 +8,8 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_defaults() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.AddChildContent("Contents"); }); cut.MarkupMatches(@" @@ -19,7 +20,8 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_all_options() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add(x => x.Flex, 1); p.Add(x => x.Span, 2); p.Add(x => x.Order, 3); @@ -29,14 +31,15 @@ namespace AntDesign.Tests.Grid p.AddChildContent("Contents"); }); cut.MarkupMatches(@" -
Contents
+
Contents
"); } [Fact] public void Render_with_column_int_span() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add(x => x.Span, 2); p.AddChildContent("Contents"); }); @@ -48,7 +51,8 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_column_string_span() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add(x => x.Span, "3"); p.AddChildContent("Contents"); }); @@ -64,7 +68,8 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_column_span_and_xs_column_span() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add(x => x.Span, 5); p.Add(x => x.Xs, 6); p.AddChildContent("Contents"); @@ -81,10 +86,12 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_all_xs_options() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add( x => x.Xs, - new AntDesign.EmbeddedProperty { + new AntDesign.EmbeddedProperty + { Span = 2, Order = 3, Offset = 4, @@ -101,7 +108,8 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_xs_column_int_span() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add(x => x.Xs, 4); p.AddChildContent("Contents"); }); @@ -113,7 +121,8 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_xs_column_embedded_span() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add(x => x.Xs, new AntDesign.EmbeddedProperty { Span = 3 }); p.AddChildContent("Contents"); }); @@ -129,7 +138,8 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_sm_column_int_span() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add(x => x.Sm, 2); p.AddChildContent("Contents"); }); @@ -145,7 +155,8 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_md_column_int_span() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add(x => x.Md, 2); p.AddChildContent("Contents"); }); @@ -161,7 +172,8 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_lg_column_int_span() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add(x => x.Lg, 2); p.AddChildContent("Contents"); }); @@ -177,7 +189,8 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_xl_column_int_span() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add(x => x.Xl, 2); p.AddChildContent("Contents"); }); @@ -193,7 +206,8 @@ namespace AntDesign.Tests.Grid [Fact] public void Render_with_xxl_column_int_span() { - var cut = Context.RenderComponent(p =>{ + var cut = Context.RenderComponent(p => + { p.Add(x => x.Xxl, 2); p.AddChildContent("Contents"); }); From 251a6e18ad5291963c088bce43c3ed12701b0d16 Mon Sep 17 00:00:00 2001 From: Andrzej Bakun Date: Sat, 3 Apr 2021 19:53:25 +0200 Subject: [PATCH 10/15] fix(module: select): load icon for multiple mode & value reload on delay (#1307) * chore: add GitHub Actions for auto preview (#1205) * chore: add github actions for auto preview * fix setup job * chore: add GitHub Actions for auto preview (#1205) * fix(module:select): add loading for multiple mode * fix(module:select): selected items duplication for multiple mode when values changed outside the component Co-authored-by: James Yeung --- components/select/Select.razor | 2 +- components/select/Select.razor.cs | 41 +++++++++- .../select/internal/SelectContent.razor | 80 ++++++++++--------- 3 files changed, 83 insertions(+), 40 deletions(-) diff --git a/components/select/Select.razor b/components/select/Select.razor index 22c5ef82..b0e29e93 100644 --- a/components/select/Select.razor +++ b/components/select/Select.razor @@ -111,7 +111,7 @@
- + diff --git a/components/select/Select.razor.cs b/components/select/Select.razor.cs index 43d16329..95436de5 100644 --- a/components/select/Select.razor.cs +++ b/components/select/Select.razor.cs @@ -163,7 +163,7 @@ namespace AntDesign else { SelectOptionItems.Clear(); - + SelectedOptionItems.Clear(); Value = default; _datasource = null; @@ -176,6 +176,7 @@ namespace AntDesign if (value != null && !value.Any() && SelectOptionItems.Any()) { SelectOptionItems.Clear(); + SelectedOptionItems.Clear(); Value = default; @@ -538,6 +539,8 @@ namespace AntDesign if (exists is null) { SelectOptionItems.Remove(selectOption); + if (selectOption.IsSelected) + SelectedOptionItems.Remove(selectOption); } else dataStoreToSelectOptionItemsMatch.Add(exists, selectOption); @@ -545,6 +548,14 @@ namespace AntDesign } } + //A simple approach to avoid unnecessary scanning through _selectedValues once + //all of SelectOptionItem where already marked as selected + int processedSelectedCount = 0; + if (SelectMode == SelectMode.Default && _selectedValue != null) + processedSelectedCount = 1; + else if (SelectMode != SelectMode.Default && _selectedValues != null) + processedSelectedCount = _selectedValues.Count(); + foreach (var item in _datasource) { TItemValue value = _getValue(item); @@ -568,6 +579,15 @@ namespace AntDesign var groupName = string.Empty; var label = _getLabel(item); + bool isSelected = false; + if (processedSelectedCount > 0) + { + if (SelectMode == SelectMode.Default) + isSelected = value.Equals(_selectedValue); + else + isSelected = _selectedValues.Contains(value); + } + if (!string.IsNullOrWhiteSpace(DisabledName)) disabled = _getDisabled(item); @@ -582,16 +602,33 @@ namespace AntDesign GroupName = groupName, IsDisabled = disabled, Item = item, - Value = value + Value = value, + IsSelected = isSelected, + IsHidden = isSelected && HideSelected }; SelectOptionItems.Add(newItem); + if (isSelected) + { + processedSelectedCount--; + SelectedOptionItems.Add(newItem); + } } else if (exists && !IgnoreItemChanges) { updateSelectOption.Label = label; updateSelectOption.IsDisabled = disabled; updateSelectOption.GroupName = groupName; + updateSelectOption.IsHidden = isSelected && HideSelected; + if (isSelected) + { + if (!updateSelectOption.IsSelected) + { + updateSelectOption.IsSelected = isSelected; + SelectedOptionItems.Add(updateSelectOption); + } + processedSelectedCount--; + } } } } diff --git a/components/select/internal/SelectContent.razor b/components/select/internal/SelectContent.razor index cbd03ee6..5ae5e438 100644 --- a/components/select/internal/SelectContent.razor +++ b/components/select/internal/SelectContent.razor @@ -5,38 +5,38 @@ @{ bool showPrefixAsSeparate = false; bool showPrefixInSelected = false; - + if (ParentSelect.PrefixIcon != null) { showPrefixAsSeparate = ParentSelect.PrefixIcon != null && !(ParentSelect.SelectMode != SelectMode.Default && ParentSelect.SelectedOptionItems.Any()); showPrefixInSelected = !showPrefixAsSeparate; - } + } }
@if (showPrefixAsSeparate) { - }
@if (ShowPlaceholder) - { + { @if (showPrefixAsSeparate) { @Placeholder } else - { + { @Placeholder } } else { @if (ParentSelect.SelectMode == SelectMode.Default) - { + { var selectedItem = ParentSelect.SelectedOptionItems.FirstOrDefault(); //Console.WriteLine($"({ParentSelect.Id}): {selectedItem.Value} => {selectedItem.Label}"); if (string.IsNullOrEmpty(SearchValue) && selectedItem != null) @@ -44,13 +44,13 @@ @if (ParentLabelTemplate != null) { - - @ParentLabelTemplate(selectedItem.Item) + + @ParentLabelTemplate(selectedItem.Item) } else - { + { @selectedItem.Label @@ -61,31 +61,31 @@ { var selectedItems = ParentSelect.SelectedOptionItems; - @if (showPrefixInSelected) + @if (showPrefixInSelected) { - } else { @selectedOption.Label - + } } } @@ -93,25 +93,25 @@ + @oninput="OnInput" + @onkeyup="OnKeyUp" + @onkeydown="OnKeyDown" + @onfocus="OnFocus" + @onblur="OnBlur" + @attributes=@AdditonalAttributes() + @onkeypress="@OnKeyPressEventHandler" + @onkeypress:preventDefault="@_suppressInput" + @onkeypress:stopPropagation="true" + @bind-value="@SearchValue" + id="@ParentSelect.Id" + role="combobox" + class="@Prefix-selection-search-input" + autocomplete="off" + aria-owns="@(ParentSelect.Id)_list" + aria-expanded="@IsOverlayShow" + aria-autocomplete="list" + aria-controls="@(ParentSelect.Id)_list" + style="@_inputStyle"/> @if (ParentSelect.SelectMode != SelectMode.Default) { @@ -165,7 +165,7 @@ } } - + @if (!ParentSelect.Disabled && ParentSelect.AllowClear && ParentSelect.HasValue) { } + else if (ParentSelect.Loading) + { + + } @if (!ParentSelect.Disabled && ParentSelect.AllowClear && ParentSelect.HasValue) {