Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit ff772ad

Browse files
Scott Hyndmantraviskaufman
Scott Hyndman
authored andcommitted
feat(checkbox): Add value property to the component and foundation. (#492)
1 parent 90f136c commit ff772ad

File tree

5 files changed

+67
-2
lines changed

5 files changed

+67
-2
lines changed

packages/mdc-checkbox/README.md

+16-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ const MDCCheckboxFoundation = mdc.checkbox.MDCCheckboxFoundation;
104104
#### Automatic Instantiation
105105

106106
If you do not care about retaining the component instance for the checkbox, simply call `attachTo()`
107-
and pass it a DOM element.
107+
and pass it a DOM element.
108108

109109
```javascript
110110
mdc.checkbox.MDCCheckbox.attachTo(document.querySelector('.mdc-checkbox'));
@@ -139,6 +139,11 @@ underlying checkbox element.
139139
Boolean. Returns whether or not the checkbox is disabled. Setting this property will update the
140140
underlying checkbox element.
141141

142+
##### MDCCheckbox.value
143+
144+
String. Returns the checkbox's value. Setting this property will update the underlying checkbox
145+
element.
146+
142147
### Using the Foundation Class
143148

144149
MDC Checkbox ships with an `MDCCheckboxFoundation` class that external frameworks and libraries can
@@ -189,6 +194,16 @@ Returns whether or not the underlying input is disabled. Returns false when no i
189194
Updates the `disabled` property on the underlying input. Does nothing when the underlying input is
190195
not present.
191196

197+
##### MDCCheckboxFoundation.getValue() => string
198+
199+
Returns the value of `adapter.getNativeControl().value`. Returns `null` if `getNativeControl()`
200+
does not return an object.
201+
202+
##### MDCCheckboxFoundation.setValue(value: string) => void
203+
204+
Sets the value of `adapter.getNativeControl().value`. Does nothing if `getNativeControl()` does
205+
not return an object.
206+
192207
## Theming
193208

194209
> TK once mdc-theming lands.

packages/mdc-checkbox/foundation.js

+9
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,14 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
9797
this.getNativeControl_().disabled = disabled;
9898
}
9999

100+
getValue() {
101+
return this.getNativeControl_().value;
102+
}
103+
104+
setValue(value) {
105+
this.getNativeControl_().value = value;
106+
}
107+
100108
installPropertyChangeHooks_() {
101109
const nativeCb = this.getNativeControl_();
102110
const cbProto = Object.getPrototypeOf(nativeCb);
@@ -212,6 +220,7 @@ export default class MDCCheckboxFoundation extends MDCFoundation {
212220
checked: false,
213221
indeterminate: false,
214222
disabled: false,
223+
value: null,
215224
};
216225
}
217226
}

packages/mdc-checkbox/index.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,16 @@ export class MDCCheckbox extends MDCComponent {
106106
this.foundation_.setDisabled(disabled);
107107
}
108108

109+
get value() {
110+
return this.foundation_.getValue();
111+
}
112+
113+
set value(value) {
114+
this.foundation_.setValue(value);
115+
}
116+
109117
destroy() {
110118
this.ripple_.destroy();
111119
super.destroy();
112120
}
113-
114121
}

test/unit/mdc-checkbox/foundation.test.js

+26
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,32 @@ test('#setDisabled works when no native control is returned', () => {
250250
assert.doesNotThrow(() => foundation.setDisabled(true));
251251
});
252252

253+
test('#getValue returns the value of nativeControl.value', () => {
254+
const {foundation, mockAdapter} = setupTest();
255+
td.when(mockAdapter.getNativeControl()).thenReturn({value: 'value'});
256+
assert.equal(foundation.getValue(), 'value');
257+
});
258+
259+
test('#getValue returns null if getNativeControl() does not return anything', () => {
260+
const {foundation, mockAdapter} = setupTest();
261+
td.when(mockAdapter.getNativeControl()).thenReturn(null);
262+
assert.isNull(foundation.getValue());
263+
});
264+
265+
test('#setValue sets the value of nativeControl.value', () => {
266+
const {foundation, mockAdapter} = setupTest();
267+
const nativeControl = {value: null};
268+
td.when(mockAdapter.getNativeControl()).thenReturn(nativeControl);
269+
foundation.setValue('new value');
270+
assert.equal(nativeControl.value, 'new value');
271+
});
272+
273+
test('#setValue exits gracefully if getNativeControl() does not return anything', () => {
274+
const {foundation, mockAdapter} = setupTest();
275+
td.when(mockAdapter.getNativeControl()).thenReturn(null);
276+
assert.doesNotThrow(() => foundation.setValue('new value'));
277+
});
278+
253279
testChangeHandler('unchecked -> checked animation class', {
254280
checked: true,
255281
indeterminate: false,

test/unit/mdc-checkbox/mdc-checkbox.test.js

+8
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,14 @@ test('get/set disabled updates the indeterminate property on the native checkbox
123123
assert.equal(component.disabled, cb.disabled);
124124
});
125125

126+
test('get/set value updates the value of the native checkbox element', () => {
127+
const {root, component} = setupTest();
128+
const cb = root.querySelector(strings.NATIVE_CONTROL_SELECTOR);
129+
component.value = 'new value';
130+
assert.equal(cb.value, 'new value');
131+
assert.equal(component.value, cb.value);
132+
});
133+
126134
test('get ripple returns a MDCRipple instance', () => {
127135
const {component} = setupTest();
128136
assert.isOk(component.ripple instanceof MDCRipple);

0 commit comments

Comments
 (0)