Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(radio): clean up radio docs #3524

Merged
merged 1 commit into from
Mar 10, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 65 additions & 63 deletions src/lib/radio/radio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ var _uniqueIdCounter = 0;

/** Change event object emitted by MdRadio and MdRadioGroup. */
export class MdRadioChange {
/** The MdRadioButton that emits the change event. */
source: MdRadioButton;
/** The value of the MdRadioButton. */
value: any;
}

Expand Down Expand Up @@ -270,9 +272,6 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor {
})
export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {

/** Whether this radio is checked. */
private _checked: boolean = false;

/** The unique ID for the radio button. */
@Input() id: string = `md-radio-${_uniqueIdCounter++}`;

Expand All @@ -285,65 +284,11 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
/** The 'aria-labelledby' attribute takes precedence as the element's text alternative. */
@Input('aria-labelledby') ariaLabelledby: string;

/** Whether this radio is disabled. */
private _disabled: boolean;

/** Value assigned to this radio.*/
private _value: any = null;

/** Whether the ripple effect on click should be disabled. */
private _disableRipple: boolean;

/** The child ripple instance. */
@ViewChild(MdRipple) _ripple: MdRipple;

/** Stream of focus event from the focus origin monitor. */
private _focusOriginMonitorSubscription: Subscription;

/** Reference to the current focus ripple. */
private _focusedRippleRef: RippleRef;

/** The parent radio group. May or may not be present. */
radioGroup: MdRadioGroup;

/** Whether the ripple effect for this radio button is disabled. */
@Input()
get disableRipple(): boolean { return this._disableRipple; }
set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); }

/**
* Event emitted when the checked state of this radio button changes.
* Change events are only emitted when the value changes due to user interaction with
* the radio button (the same behavior as `<input type-"radio">`).
*/
@Output()
change: EventEmitter<MdRadioChange> = new EventEmitter<MdRadioChange>();

/** The native `<input type=radio>` element */
@ViewChild('input') _inputElement: ElementRef;

constructor(@Optional() radioGroup: MdRadioGroup,
private _elementRef: ElementRef,
private _renderer: Renderer,
private _focusOriginMonitor: FocusOriginMonitor,
public radioDispatcher: UniqueSelectionDispatcher) {
// Assertions. Ideally these should be stripped out by the compiler.
// TODO(jelbourn): Assert that there's no name binding AND a parent radio group.

this.radioGroup = radioGroup;

radioDispatcher.listen((id: string, name: string) => {
if (id != this.id && name == this.name) {
this.checked = false;
}
});
}

/** ID of the native input element inside `<md-radio-button>` */
get inputId(): string {
return `${this.id}-input`;
}

/** Whether this radio button is checked. */
@Input()
get checked(): boolean {
Expand All @@ -364,7 +309,7 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {

if (newCheckedState) {
// Notify all radio buttons with the same name to un-check.
this.radioDispatcher.notify(this.id, this.name);
this._radioDispatcher.notify(this.id, this.name);
}
}
}
Expand Down Expand Up @@ -429,6 +374,68 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
this._disabled = (value != null && value !== false) ? true : null;
}

/**
* Event emitted when the checked state of this radio button changes.
* Change events are only emitted when the value changes due to user interaction with
* the radio button (the same behavior as `<input type-"radio">`).
*/
@Output()
change: EventEmitter<MdRadioChange> = new EventEmitter<MdRadioChange>();

/** The parent radio group. May or may not be present. */
radioGroup: MdRadioGroup;

/** ID of the native input element inside `<md-radio-button>` */
get inputId(): string {
return `${this.id}-input`;
}

/** Whether this radio is checked. */
private _checked: boolean = false;

/** Whether this radio is disabled. */
private _disabled: boolean;

/** Value assigned to this radio.*/
private _value: any = null;

/** Whether the ripple effect on click should be disabled. */
private _disableRipple: boolean;

/** The child ripple instance. */
@ViewChild(MdRipple) _ripple: MdRipple;

/** Stream of focus event from the focus origin monitor. */
private _focusOriginMonitorSubscription: Subscription;

/** Reference to the current focus ripple. */
private _focusedRippleRef: RippleRef;

/** The native `<input type=radio>` element */
@ViewChild('input') _inputElement: ElementRef;

constructor(@Optional() radioGroup: MdRadioGroup,
private _elementRef: ElementRef,
private _renderer: Renderer,
private _focusOriginMonitor: FocusOriginMonitor,
private _radioDispatcher: UniqueSelectionDispatcher) {
// Assertions. Ideally these should be stripped out by the compiler.
// TODO(jelbourn): Assert that there's no name binding AND a parent radio group.

this.radioGroup = radioGroup;

_radioDispatcher.listen((id: string, name: string) => {
if (id != this.id && name == this.name) {
this.checked = false;
}
});
}

/** Focuses the radio button. */
focus(): void {
this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, this._renderer, 'keyboard');
}

ngOnInit() {
if (this.radioGroup) {
// If the radio is inside a radio group, determine if it should be checked
Expand Down Expand Up @@ -469,11 +476,6 @@ export class MdRadioButton implements OnInit, AfterViewInit, OnDestroy {
return this.disableRipple || this.disabled;
}

/** Focuses the radio button. */
focus(): void {
this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, this._renderer, 'keyboard');
}

_onInputBlur() {
if (this._focusedRippleRef) {
this._focusedRippleRef.fadeOut();
Expand Down