Skip to content

Commit

Permalink
Merge pull request #87 from enisn/1.0-inputfield-disabled-states
Browse files Browse the repository at this point in the history 
InputField disabled states
  • Loading branch information
@enisn
enisn authored Nov 7, 2022
2 parents 4bbd7b1 + 4983046 commit b445d03
Show file tree
Hide file tree
Showing 12 changed files with 390 additions and 125 deletions.
16 changes: 10 additions & 6 deletions demo/UraniumApp/Pages/ValidationsPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@
<StackLayout Padding="25" HorizontalOptions="Center" MaximumWidthRequest="400">
<input:FormView SubmitCommand="{Binding SubmitCommand}" Spacing="20">

<material:TextField Title="Email"
<material:TextField Title="Email"
Text="{Binding Email}"
Icon="{FontImage FontFamily=MaterialRegular, Glyph={x:Static m:MaterialRegular.Email}}">
<validation:RequiredValidation />
<validation:RegexValidation Message="Please type a valid e-mail address." Pattern="{x:Static input:AdvancedEntry.REGEX_EMAIL}"/>
</material:TextField>

<material:TextField Title="Fullname"
<material:TextField Title="Fullname"
Text="{Binding FullName}"
Icon="{FontImage FontFamily=MaterialRegular, Glyph={x:Static m:MaterialRegular.Person}}">
<validation:RequiredValidation />
Expand All @@ -43,21 +43,21 @@
<validation:RequiredValidation />
</material:PickerField>

<material:DatePickerField Title="Birth Date"
<material:DatePickerField Title="Birth Date"
Date="{Binding BirthDate}"
Icon="{FontImage FontFamily=MaterialRegular, Glyph={x:Static m:MaterialRegular.Calendar_month}}">
<validation:RequiredValidation />
</material:DatePickerField>
<material:TimePickerField Title="Preferred Meeting Time"

<material:TimePickerField Title="Preferred Meeting Time"
Time="{Binding MeetingTime}"
Icon="{FontImage FontFamily=MaterialRegular, Glyph={x:Static m:MaterialRegular.Alarm}}">
<validation:RequiredValidation />
<validation:MinValueValidation MinValue="07:00" />
<validation:MinValueValidation MinValue="10:30" />
</material:TimePickerField>

<material:TextField Title="Number of seats"
<material:TextField Title="Number of seats"
Text="{Binding NumberOfSeats}"
Keyboard="Numeric"
Icon="{FontImage FontFamily=MaterialRegular, Glyph={x:Static m:MaterialRegular.Airline_seat_recline_normal}}">
Expand All @@ -77,6 +77,10 @@
<Button Text="Clear"
Command="{Binding ClearCommand}"
StyleClass="OutlinedButton"/>

<Button Text="Fill"
Command="{Binding FillCommand}"
StyleClass="FilledTonalButton"/>
</input:FormView>
</StackLayout>
</ScrollView>
Expand Down
21 changes: 17 additions & 4 deletions demo/UraniumApp/ViewModels/ValidationsPageViewModel.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ public class ValidationsPageViewModel : UraniumBindableObject
{
private string email = string.Empty;
private string fullName = string.Empty;
private Gender gender;
private Gender? gender;
private DateTime? birthDate;
private TimeSpan? meetingTime;
private int numberOfSeats;
private int? numberOfSeats;
private bool isTermsAndConditionsAccepted;

public ValidationsPageViewModel()
Expand Down Expand Up @@ -46,18 +46,31 @@ public ValidationsPageViewModel()
NumberOfSeats = default;
IsTermsAndConditionsAccepted = default;
});

FillCommand = new Command(() =>
{
Email = "a@b.c";
FullName = "Full Name";
Gender = ViewModels.Gender.Male;
BirthDate = DateTime.UtcNow.AddYears(-26);
MeetingTime = new TimeSpan(10,00,00);
NumberOfSeats = 2;
IsTermsAndConditionsAccepted = true;
});
}

public ICommand SubmitCommand { get; set; }

public ICommand ClearCommand { get; set; }

public ICommand FillCommand { get; set; }

public string Email { get => email; set => SetProperty(ref email, value); }
public string FullName { get => fullName; set => SetProperty(ref fullName, value); }
public Gender Gender { get => gender; set => SetProperty(ref gender, value); }
public Gender? Gender { get => gender; set => SetProperty(ref gender, value); }
public DateTime? BirthDate { get => birthDate; set => SetProperty(ref birthDate, value); }
public TimeSpan? MeetingTime { get => meetingTime; set => SetProperty(ref meetingTime, value); }
public int NumberOfSeats { get => numberOfSeats; set => SetProperty(ref numberOfSeats, value); }
public int? NumberOfSeats { get => numberOfSeats; set => SetProperty(ref numberOfSeats, value); }
public bool IsTermsAndConditionsAccepted { get => isTermsAndConditionsAccepted; set => SetProperty(ref isTermsAndConditionsAccepted, value); }
}
public enum Gender
Expand Down
10 changes: 10 additions & 0 deletions docs/en/docs-nav.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,16 @@
}
]
},
{
"text": "Migration Guide",
"items":[
{
"text": "Migration to v1.1",
"path": "migration-guides/Migrating-To-1.1.md"
}
]
]
},
{
"text": "Support",
"path": "Support.md",
Expand Down
104 changes: 104 additions & 0 deletions docs/en/migration-guides/Migrating-To-1.1.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
# Migration Guide to v1.1
Version 1.1 comes with some changes. You should follow this docuemnt to migrate your code to the new version properly.

## Changes

### Disabled States
Each input has a disabled state now. It's working well after updating to v1.1. But you should add following style to your resources if you overrided the default style.

- Add following section in your StyleOverride file if you are using StyleOverride.
```xml
<Style TargetType="c:InputField" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Opacity" Value="1"/>
<Setter Property="AccentColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Opacity" Value="0.6" />
<Setter Property="BorderColor" Value="{StaticResource DisabledText}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>

<Style TargetType="c:RadioButton" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Opacity" Value="1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Opacity" Value="0.6" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
```

- Find input:CheckBox in your StyleOverride file and update CheckBox styles like following. _(**VisualStateManager.VisualStateGroups** should be added.)_
```xml

<Style TargetType="input:CheckBox" ApplyToDerivedTypes="True">
<!-- ... -->

<!-- Following section should be added. 👇 -->
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Opacity" Value="1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Opacity" Value="0.6" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
```

- Find input:RadioButton in your StyleOverride file and update RadioButton styles like following. _(**VisualStateManager.VisualStateGroups** should be added.)_
```xml
<Style TargetType="input:RadioButton" ApplyToDerivedTypes="True">
<!-- ... -->

<!-- Following section should be added. 👇 -->
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Opacity" Value="1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="Opacity" Value="0.6" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
```
> _**Note**: If you're not sure about it, you can back-up your custom styles and re-add styles with `dotnet new uranium-material-resources -n MaterialOverride` command._

1 change: 0 additions & 1 deletion src/UraniumUI.Material/Controls/CheckBox.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,5 @@ public class CheckBox : InputKit.Shared.Controls.CheckBox
{
public CheckBox()
{

}
}
1 change: 1 addition & 0 deletions src/UraniumUI.Material/Controls/DatePickerField.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ public DatePickerField()
endIconsContainer.Add(iconClear);

DatePickerView.SetBinding(DatePickerView.DateProperty, new Binding(nameof(Date), source: this));
DatePickerView.SetBinding(DatePickerView.IsEnabledProperty, new Binding(nameof(IsEnabled), source: this));

#if MACCATALYST
labelTitle.InputTransparent = false;
Expand Down
Loading

0 comments on commit b445d03

Please sign in to comment.