You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Connected.Components/Components/Picker/Picker.razor

118 lines
4.1 KiB

2 years ago
@namespace Connected.Components
@inherits FormComponent<T, string>
@typeparam T
@code
{
protected virtual RenderFragment InputContent =>
// note: Mask needs to remain before Text!
@<TextField
T="string"
@ref="_inputReference"
@attributes="UserAttributes"
Style="@Style"
Label="@Label"
Mask="@_mask"
@bind-Value="@Text"
Placeholder="@Placeholder"
HelperText="@HelperText"
HelperTextOnFocus="@HelperTextOnFocus"
Variant="@Variant"
ReadOnly="@(!Editable || ReadOnly)"
Disabled="@Disabled"
OnAdornmentClick="ToggleState"
Adornment="@Adornment"
AdornmentIcon="@AdornmentIcon"
AdornmentColor="@AdornmentColor"
AdornmentAriaLabel="@AdornmentAriaLabel"
IconSize="@IconSize"
Margin="@Margin"
Required="@Required"
RequiredError="@RequiredError"
Error="@Error"
ErrorText="@ErrorText"
Clearable="@(ReadOnly ? false : Clearable)"
OnClearButtonClick="@(() => Clear())"
@onclick="@(() => { if (!Editable) ToggleState(); })"
@onkeydown="HandleKeyDown"
/>;
protected virtual RenderFragment PickerContent => null;
protected virtual RenderFragment Render =>
@<CascadingValue Value="@this" IsFixed="true">
<div class="@PickerClass" id="@_elementId">
@if (PickerVariant != PickerVariant.Static)
{
<CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
@if(InputContent != null) {
@InputContent
}
</CascadingValue>
}
@if (IsOpen && PickerVariant == PickerVariant.Inline)
{
<Popover Open="IsOpen" Fixed="true" AnchorOrigin="@(AnchorOrigin)" TransformOrigin="@(TransformOrigin)" OverflowBehavior="OverflowBehavior.FlipOnOpen" Paper="false">
<div @ref="_pickerInlineRef" class="@PickerInlineClass">
<Paper @attributes="UserAttributes" Class="@PickerPaperClass" Elevation="@_pickerElevation" Square="@_pickerSquare">
<div class="@PickerContainerClass">
@if(PickerContent != null){
@PickerContent
}
</div>
@if (PickerActions != null)
{
<div class="@ActionClass">
@PickerActions(this)
</div>
}
</Paper>
</div>
</Popover>
}
else if (PickerVariant == PickerVariant.Static)
{
<Paper @attributes="UserAttributes" Class="@PickerPaperClass" Elevation="@_pickerElevation" Square="@_pickerSquare">
<div class="@PickerContainerClass">
@if(PickerContent != null){
@PickerContent
}
</div>
@if (PickerActions != null)
{
<div class="@ActionClass">
@PickerActions(this)
</div>
}
</Paper>
}
else if(IsOpen && PickerVariant == PickerVariant.Dialog)
{
<Overlay Visible="IsOpen" OnClick="CloseOverlay" DarkBackground="true" Class="mud-overlay-dialog">
<Paper @attributes="UserAttributes" Class="@PickerPaperClass" Elevation="@_pickerElevation" Square="@_pickerSquare">
<div class="@PickerContainerClass">
@if(PickerContent != null){
@PickerContent
}
</div>
@if (PickerActions != null)
{
<div class="@ActionClass">
@PickerActions(this)
</div>
}
</Paper>
</Overlay>
}
</div>
@if (PickerVariant == PickerVariant.Inline)
{
<Overlay Visible="IsOpen" OnClick="CloseOverlay" LockScroll="false" />
}
</CascadingValue>;
}