public ItemsList(ObservableList <IComponent> items, params UnitSize[] columns)
{
Items = items ?? new ObservableList <IComponent>();
if (columns.Length < 2)
{
_stack = Stack().Horizontal().Wrap().WidthStretch().MaxHeight(100.percent()).Scroll();
_maxStackItemSize = columns.FirstOrDefault() ?? 100.percent();
}
else
{
_grid = Grid(columns).WidthStretch().MaxHeight(100.percent()).Scroll();
}
_emptyListMessageGenerator = null;
_defered = DeferedComponent.Observe(
Items,
observedItems =>
{
if (!observedItems.Any())
{
if (_emptyListMessageGenerator is object)
{
if (_grid is object)
{
return(_grid.Children(_emptyListMessageGenerator().GridColumnStretch()).AsTask());
}
else
{
return(_stack.Children(_emptyListMessageGenerator().WidthStretch().HeightStretch()).AsTask());
}
}
else
{
if (_grid is object)
{
_grid.Clear();
return(_grid.AsTask());
}
else
{
_stack.Clear();
return(_stack.AsTask());
}
}
}
else
{
if (_grid is object)
{
return(_grid.Children(observedItems).AsTask());
}
else
{
return(_stack.Children(observedItems.Select(i => i.Width(_maxStackItemSize)).ToArray()).AsTask());
}
}
}
);
}
private static void SetHtmlElementHeight(HTMLElement htmlElement, UnitSize height)
{
htmlElement.SetStyle(cssStyleDeclaration =>
{
cssStyleDeclaration.height = height.ToString();
});
}
public DetailsListColumn(string title, UnitSize width, UnitSize maxWidth, bool isRowHeader = false, bool enableColumnSorting = false, string sortingKey = null, Action onColumnClick = null)
{
if (string.IsNullOrWhiteSpace(title))
{
throw new ArgumentException(nameof(title));
}
if (enableColumnSorting && string.IsNullOrWhiteSpace(sortingKey))
{
throw new ArgumentException(nameof(sortingKey));
}
Width = width ?? throw new ArgumentNullException(nameof(width));
MaxWidth = maxWidth;
SortingKey = sortingKey ?? string.Empty;
Title = title;
IsRowHeader = isRowHeader;
EnableColumnSorting = enableColumnSorting;
if (onColumnClick != null)
{
_onColumnClick = onColumnClick;
EnableOnColumnClickEvent = true;
}
InnerElement = TextBlock(Title).Regular().SemiBold().Render();
}
public static T Padding <T>(this T component, UnitSize unitSize) where T : IComponent
{
Stack.SetPaddingLeft(component, unitSize);
Stack.SetPaddingRight(component, unitSize);
Stack.SetPaddingTop(component, unitSize);
Stack.SetPaddingBottom(component, unitSize);
return(component);
}
public static UnitSize px(this int value)
{
if (value > 0 && value < 32)
{
return(UnitSize.FromPixelCache(value));
}
return(new UnitSize(value, Unit.Pixels));
}
public TutorialModal Border(string color, UnitSize size = null)
{
size = size ?? 1.px();
_modal.StylingContainer.style.borderColor = color;
_modal.StylingContainer.style.borderWidth = size.ToString();
_modal.StylingContainer.style.borderStyle = "solid";
return(this);
}
public static T Margin <T>(this T component, UnitSize unitSize) where T : IComponent
{
Stack.SetMarginLeft(component, unitSize);
Stack.SetMarginRight(component, unitSize);
Stack.SetMarginTop(component, unitSize);
Stack.SetMarginBottom(component, unitSize);
return(component);
}
private static UnitSize[] CreateCache(int count)
{
var us = new UnitSize[count];
for (int i = 0; i < us.Length; i++)
{
us[i] = new UnitSize(i, Unit.Pixels);
}
return(us);
}
public SplitView RightIsSmaller(UnitSize rightSize, UnitSize maxRightSize = null)
{
_rightComponent.Width = rightSize.ToString();
_rightComponent.MaxWidth = maxRightSize?.ToString() ?? "";
_rightComponent.FlexGrow = "";
_leftComponent.Width = "10px";
_leftComponent.MaxWidth = "";
_leftComponent.FlexGrow = "1";
_splitContainer.classList.add("tss-split-right");
_splitContainer.classList.remove("tss-split-left");
return(this);
}
public SplitView(UnitSize splitterSize = null)
{
_leftComponent = Raw(Div(_()));
_splitterComponent = Raw(Div(_("tss-splitter")));
_rightComponent = Raw(Div(_()));
_splitterComponent.Width = (splitterSize is object && splitterSize.Unit != Unit.Auto && splitterSize.Unit != Unit.Inherit)
? splitterSize.ToString()
: "8px";
_leftComponent.Height = "100%";
_splitterComponent.Height = "100%";
_rightComponent.Height = "100%";
_leftComponent.Width = "10px";
_rightComponent.Width = "10px";
_leftComponent.FlexGrow = "1";
_rightComponent.FlexGrow = "1";
_splitContainer = Div(_("tss-splitview"), _leftComponent.Render(), _splitterComponent.Render(), _rightComponent.Render());
}
public DetailsListIconColumn(Icon icon, UnitSize width, UnitSize maxWidth, bool enableColumnSorting = false, string sortingKey = null, Action onColumnClick = null)
{
if (enableColumnSorting && string.IsNullOrWhiteSpace(sortingKey))
{
throw new ArgumentException(nameof(sortingKey));
}
Icon = icon;
Width = width ?? throw new ArgumentNullException(nameof(width));
MaxWidth = maxWidth;
SortingKey = sortingKey ?? string.Empty;
EnableColumnSorting = enableColumnSorting;
if (onColumnClick != null)
{
_onColumnClick = onColumnClick;
EnableOnColumnClickEvent = true;
}
InnerElement = Div(_()).appendChild(Icon.Render());
}
public Toast Width(UnitSize width)
{
_toastContainer.style.width = width.ToString();
return(this);
}
public static T MarginTop <T>(this T component, UnitSize unitSize) where T : IComponent
{
Stack.SetMarginTop(component, unitSize);
return(component);
}
public static T MinWidth <T>(this T component, UnitSize unitSize) where T : IComponent
{
Stack.SetMinWidth(component, unitSize);
return(component);
}
/// <summary>PaddingBottom</summary> public static T PB <T>(this T component, UnitSize unitSize) where T : IComponent => PaddingBottom(component, unitSize);
/// <summary>PaddingTop</summary> public static T PT <T>(this T component, UnitSize unitSize) where T : IComponent => PaddingTop(component, unitSize);
public static T MaxHeight <T>(this T component, UnitSize unitSize) where T : IComponent
{
Stack.SetMaxHeight(component, unitSize);
return(component);
}
public InfiniteScrollingList(IComponent[] items, Func <Task <IComponent[]> > getNextItemPage, params UnitSize[] columns)
{
_container = Div(_("tss-basiclist"));
if (columns.Length < 2)
{
_stack = Stack().Horizontal().Wrap().WidthStretch().MaxHeight(100.percent()).Scroll();
_maxStackItemSize = columns.FirstOrDefault() ?? 100.percent();
}
else
{
_grid = Grid(columns).WS().MaxHeight(100.percent()).GridColumnStretch().Scroll();
}
_emptyListMessageGenerator = null;
AddItems(items);
if (getNextItemPage is object)
{
var vs = VisibilitySensor(v =>
{
Task.Run <Task>(async() =>
{
if (_grid is object)
{
var nextPageItems = await getNextItemPage();
_grid.Remove(v);
if (nextPageItems is object && nextPageItems.Any())
{
foreach (var item in nextPageItems)
{
_grid.Add(item);
}
v.Reset();
_grid.Add(v);
}
}
else
{
var nextPageItems = await getNextItemPage();
_stack.Remove(v);
if (nextPageItems is object && nextPageItems.Any())
{
foreach (var item in nextPageItems)
{
_stack.Add(item.W(_maxStackItemSize));
}
v.Reset();
_stack.Add(v);
}
}
}).FireAndForget();
}, message: TextBlock("Loading..."));
if (_grid is object)
{
_grid.Add(vs);
}
else
{
_stack.Add(vs);
}
}
}
/// <summary>MarginBottom</summary> public static T MB <T>(this T component, UnitSize unitSize) where T : IComponent => MarginBottom(component, unitSize);
public static DetailsListIconColumn IconColumn(Icon icon, UnitSize width, bool enableColumnSorting = false, string sortingKey = null, Action onColumnClick = null) => new DetailsListIconColumn(icon, width, enableColumnSorting, sortingKey, onColumnClick);
/// <summary>MarginLeft</summary> public static T ML <T>(this T component, UnitSize unitSize) where T : IComponent => MarginLeft(component, unitSize);
/// <summary>Height</summary> public static T H <T>(this T component, UnitSize unitSize) where T : IComponent => Height(component, unitSize);
//Shortcuts:
/// <summary>Width</summary>
public static T W <T>(this T component, UnitSize unitSize) where T : IComponent => Width(component, unitSize);
public Toast Height(UnitSize height)
{
_toastContainer.style.height = height.ToString();
return(this);
}
/// <summary>PaddingLeft</summary> public static T PL <T>(this T component, UnitSize unitSize) where T : IComponent => PaddingLeft(component, unitSize);
/// <summary>PaddingRight</summary> public static T PR <T>(this T component, UnitSize unitSize) where T : IComponent => PaddingRight(component, unitSize);
/// <summary>MarginRight</summary> public static T MR <T>(this T component, UnitSize unitSize) where T : IComponent => MarginRight(component, unitSize);
public static T HeightAuto <T>(this T component) where T : IComponent
{
Stack.SetHeight(component, UnitSize.Auto());
return(component);
}
public static DetailsListColumn DetailsListColumn(string title, UnitSize width, bool isRowHeader = false, bool enableColumnSorting = false, string sortingKey = null, Action onColumnClick = null) => new DetailsListColumn(title, width, isRowHeader, enableColumnSorting, sortingKey, onColumnClick);
/// <summary>MarginTop</summary> public static T MT <T>(this T component, UnitSize unitSize) where T : IComponent => MarginTop(component, unitSize);