Add ReadOnly parameter implementation to BitTimePicker (#9977)#10071
Conversation
WalkthroughThe pull request updates the TimePicker component to support enhanced read-only functionality. Input elements now consider both the text input allowance and an explicit read-only property. Event handlers in the code-behind check for a read-only state to prevent user interactions, and the demo pages have been reorganized to include new standalone and read-only sections. Additional variables and comprehensive sample code have been added or updated to demonstrate various TimePicker configurations. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant TP as BitTimePicker Component
U->>TP: Trigger time input event (e.g., AM/PM click)
TP->>TP: Check if ReadOnly (or IsEnabled)
alt ReadOnly is true
TP-->>U: Exit without action
else
TP->>TP: Process interaction (adjust time)
TP-->>U: Return updated time value
end
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs (1)
9-257:⚠️ Potential issueMissing ReadOnly property definition
I don't see the ReadOnly property defined in the BitTimePicker class, yet it's being used in several places in the component.
Add the property definition for ReadOnly:
/// <summary> /// Whether or not the Text field of the TimePicker is underlined. /// </summary> [Parameter] public bool Underlined { get; set; } + /// <summary> + /// Whether the TimePicker is in read-only mode. When true, the value cannot be changed by user interaction. + /// </summary> + [Parameter] public bool ReadOnly { get; set; } /// <summary> /// The format of the time in the time-picker /// </summary> [Parameter] public string? ValueFormat { get; set; }
🧹 Nitpick comments (1)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs (1)
1-587: Consider adding ReadOnly parameter definition to componentParametersThe ReadOnly parameter should be documented in the componentParameters list to provide users with information about this new property.
Add the ReadOnly parameter to the componentParameters list:
new() { Name = "ValueFormat", Type = "string?", DefaultValue = "null", Description = @"The format of the time in the TimePicker like ""HH:mm"".", }, + new() + { + Name = "ReadOnly", + Type = "bool", + DefaultValue = "false", + Description = "Whether the TimePicker is in read-only mode. When true, the value cannot be changed by user interaction.", + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor(3 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs(3 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor(6 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.samples.cs(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (11)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor (3)
43-43: Input accessibility enhancement with ReadOnly propertyThe update to include ReadOnly in the readonly attribute condition properly implements the read-only state for the main input field.
101-101: ReadOnly property added to hour inputThis change consistently applies the ReadOnly state to the hour input, ensuring users cannot edit hours when the component is in read-only mode.
135-135: ReadOnly property added to minute inputThis change consistently applies the ReadOnly state to the minute input, ensuring users cannot edit minutes when the component is in read-only mode.
src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs (3)
483-483: Early return when ReadOnly for AM selectionThis change prevents interactions with AM selection when the component is in read-only mode, properly implementing the read-only behavior.
492-492: Early return when ReadOnly for PM selectionThis change prevents interactions with PM selection when the component is in read-only mode, properly implementing the read-only behavior.
587-587: Early return when ReadOnly for increment/decrement actionsThis change prevents interactions with the increment/decrement buttons when the component is in read-only mode, properly implementing the read-only behavior.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs (1)
562-562: Added readOnlyTime field for demo purposesThe new readOnlyTime field properly supports the demonstration of the ReadOnly functionality in the demo page.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.samples.cs (2)
52-58: Well-structured examples for ReadOnly functionalityThe ReadOnly examples demonstrate different configurations (with/without AllowTextInput, standalone mode, and with different time formats), providing users with a clear understanding of how to use this new property.
1-252: Comprehensive sample code structureThe new samples file is well-organized with a variety of examples covering all features of the BitTimePicker component, making it easy for users to understand how to implement different configurations.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor (2)
82-98: Well-implemented standalone section.The addition of the standalone TimePicker examples provides useful demonstration of the component in this mode. The examples cover basic usage, format options, and disabled state with a preset value.
100-114: Great implementation of the ReadOnly parameter.This section effectively demonstrates the new ReadOnly functionality across different configurations:
- Basic ReadOnly mode
- ReadOnly with text input allowed
- Standalone ReadOnly mode
- Standalone ReadOnly with different time format
The parameter description accurately explains that it makes the time picker non-editable, preventing users from changing the time value.
2 participants
This closes #9977
Summary by CodeRabbit
New Features
Documentation