Date picker consisting of three component pickers

Question

I made a UI picker tool, like a "rolling select" to pick vales (demo here).

I made first a independent module with a ES6 Class, basically:

class ComponentPicker {
 constructor(target, data){
 // init stuff
 }
 deployHTML(target, data) {...}
 getValue(){...}
 setValue(val){...}
 onChange(callback){...}
}

Then I added a new layer to it. A Date picker that needs 3 component pickers. I thought about extending the class ComponentPicker but I didn't find a way to call 3 times super, it would look like

class DatePicker extends ComponentPicker{
 constructor(length) {
 this.pickers = data.map(component=>{
 return super(target, component); // <-- weird and wrong
 });
 }

So I ended up doing a "good old" ES5- style of class like:

function DatePicker (target, data) {
 this.wrapper = document.createElement('div');
 this.wrapper.className = 'date-picker';
 target.appendChild(this.wrapper);
 this.pickers = data.map(component=>{
 return new ComponentPicker(target, component);
 });
 return this;
}
DatePicker.prototype.getValue = function(){
 return this.pickers.map(picker=>{
 return picker.getValue();
 });
}
DatePicker.prototype.setValue = function(values){
 // etc 

and calling it with new DatePicker();

It works, but is there another way to reuse/extend the first class into another one that needs to interact with 3 of the original?

• Daedric: Pretty cool, but on a touch screen its a bit slow / unresponsive.
• Sergio: @Daedric hmm interesting to know, thank you. Didn't test in touch so much yet, will check! (feedback welcome also!)

Answer 1

So if I understand correctly, you want to create an instance of DatePicker which by default has 3 instances of ComponentPicker in an array called pickers? Then the following should work:

class DatePicker extends ComponentPicker{
 constructor(length) {
 this.pickers = data.map(component => new ComponentPicker(target, component));
 }

• Sergio: Thanks for looking at this Joseph. I thought about that, then I would have to also create new methods like onchange, setvalue, getvalue for this extended class. That means almost re-writing the first component and doing in a "multiple" version. Maybe its better to have the first class in a multiple version from begining and not have the need for a extended class?