Hello, I have one goal in my life.
I’m using Angular 4.
I want to add some extra functionalities to the already existing Ionic component: Range:
For example, imagine that when the user clickdown the knobs they become red.
Later on, I would like to use that improved component on an Angular 6 project, but that will be after I pass the current goal.
I would like to know what’s the best practice to improve this component.
Can I start by copying the files on:
inside a new directory I would create for this kind of purposes?, for example:
/src/components/custom-range
I want the new selector to be: custom-range so I understand I have to modify the file:
import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
import { Color, Gesture, GestureDetail, InputChangeEvent, Mode, RangeValue, StyleEvent } from '../../interface';
import { clamp, debounceEvent, deferEvent } from '../../utils/helpers';
import { createColorClasses, hostContext } from '../../utils/theme';
import { Knob, RangeEventDetail } from './range-interface';
@Component({
tag: 'ion-range',
styleUrls: {
ios: 'range.ios.scss',
md: 'range.md.scss'
},
shadow: true
})
export class Range {
private noUpdate = false;
private rect!: ClientRect;
show original
Any help on this that let me start will be highly appreciated.
Thanks!
I think the best practice would be: Learn StencilJS. Modify the Ionic source code with your new Stencil skill, to be whatever you want. Post on a repo if you’re proud of your work and want to share with the community.
I just created the repository:
https://github.com/napolev/custom-range
based on the repository:
then copied the Ionic component range:
to:
/src/components/custom-range
but when opening the project on VS Code I get the following errors:
range.tsx src\components\custom-range
- Cannot find module '../../interface'.
- Cannot find module '../../utils/helpers'.
- Cannot find module '../../utils/theme'.
- Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.
- Cannot find module '../../utils/gesture/gesture'.
as you can see on the following image:
Any idea on how to include those missing references into my project?
Thanks!
