Skip to content

Commit

Permalink
feat(ui-library): bug fix
Browse files Browse the repository at this point in the history
  • Loading branch information
Arun Kumaar committed Sep 7, 2023
1 parent 32a503a commit a4d7a5f
Show file tree
Hide file tree
Showing 11 changed files with 319 additions and 111 deletions.
54 changes: 31 additions & 23 deletions packages/ui-library/src/components/range-legend-min-max-slider/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { map } from 'lit/directives/map.js';
import { styleCustom } from './index.css';
import { sliderDark, sliderLight } from '../../foundation/component-tokens/slider-legend.css';
import { FormSizesType, ActionVariantType } from '../../globals/types';
import { findToolTipPosition, setOnclickValue } from '../../utils/range-slider-utils';

import { BlrIconButtonRenderFunction } from '../icon-button';
import { RenderBtnProps } from '../../globals/types';
Expand Down Expand Up @@ -38,13 +39,16 @@ export class BlrRangeLegendMinMaxSlider extends LitElement {

@property() theme: ThemeType = 'Light';

@property({ type: Boolean }) isUpdated? = false;

@state() protected selectedStartIndex = 0;
@state() protected selectedEndIndex = 0;

protected updated(changedProperties: Map<string, string>) {
if (changedProperties.has('startValue') || changedProperties.has('endValue')) {
if ((changedProperties.has('selectedStartIndex') || changedProperties.has('selectedEndIndex')) && !this.isUpdated) {
this.selectedStartIndex = this.list.indexOf(this.startValue) || 0;
this.selectedEndIndex = this.list.indexOf(this.endValue) || 0;
this.isUpdated = true;
}
}

Expand Down Expand Up @@ -75,10 +79,9 @@ export class BlrRangeLegendMinMaxSlider extends LitElement {
};

const setMinValue = (btnType: string) => {
if (btnType === 'INC' && this.selectedStartIndex < stepsArray.length - 1) {
this.selectedStartIndex = this.selectedStartIndex + this.stepFactor;
} else if (btnType === 'DEC' && this.selectedStartIndex > 0) {
this.selectedStartIndex = this.selectedStartIndex - this.stepFactor;
const modifiedValue = setOnclickValue(this.selectedStartIndex, this.stepFactor, btnType, stepsArray.length);
if (modifiedValue !== undefined) {
this.selectedStartIndex = modifiedValue;
}
return this.onClickMin?.(this.selectedStartIndex, this.selectedEndIndex);
};
Expand All @@ -89,10 +92,9 @@ export class BlrRangeLegendMinMaxSlider extends LitElement {
};

const setMaxValue = (btnType: string) => {
if (btnType === 'INC' && this.selectedEndIndex < stepsArray.length - 1) {
this.selectedEndIndex = this.selectedEndIndex + this.stepFactor;
} else if (btnType === 'DEC' && this.selectedEndIndex > 0) {
this.selectedEndIndex = this.selectedEndIndex - this.stepFactor;
const modifiedValue = setOnclickValue(this.selectedEndIndex, this.stepFactor, btnType, stepsArray.length);
if (modifiedValue !== undefined) {
this.selectedEndIndex = modifiedValue;
}
return this.onClickMax?.(this.selectedStartIndex, this.selectedEndIndex);
};
Expand All @@ -103,23 +105,23 @@ export class BlrRangeLegendMinMaxSlider extends LitElement {
[`${this.size || 'md'}`]: this.size || 'md',
});

const toolTipMinQuerySelector = this.shadowRoot?.querySelector(`#pip-${this.selectedStartIndex}`);
const toolTipMinPos = toolTipMinQuerySelector?.getBoundingClientRect().left;
const toolTipMaxQuerySelector = this.shadowRoot?.querySelector(`#pip-${this.selectedEndIndex}`);
const toolTipMaxPos = toolTipMaxQuerySelector?.getBoundingClientRect().left;
const minSliderId = this.rangeInputId ? `${this.rangeInputId}-1` : `rangeInputId-1`;
const maxSliderId = this.rangeInputId ? `${this.rangeInputId}-2` : `rangeInputId-2`;

const minSlider = this.shadowRoot?.querySelector(`#${minSliderId}`) as HTMLInputElement;
const maxSlider = this.shadowRoot?.querySelector(`#${maxSliderId}`) as HTMLInputElement;

const toolTipMinPos =
minSlider && findToolTipPosition(minSlider.min, minSlider.max, minSlider.offsetWidth, this.selectedStartIndex);
const toolTipMaxPos =
minSlider && findToolTipPosition(maxSlider.min, maxSlider.max, maxSlider.offsetWidth, this.selectedEndIndex);

return html`<style>
${dynamicStyles.map((style) => style)}
</style>
<div class=${classes}>
<fieldset class="range__field">
<div class="input-wrapper">
<div id="tooltip1" class="tooltip" style="bottom:110px; left:${toolTipMinPos! - 15}px; position:absolute;">
${stepsArray[this.selectedStartIndex]}
</div>
<div id="tooltip1" class="tooltip" style="bottom:110px; left:${toolTipMaxPos! - 15}px; position:absolute;">
${stepsArray[this.selectedEndIndex]}
</div>
<div class="min-max-btnwrapper">
${this.renderBtn({
btnId: 'inc_btn_min',
Expand All @@ -135,10 +137,10 @@ export class BlrRangeLegendMinMaxSlider extends LitElement {
<div class="input-row">
<div class="range-wrapper">
<input
id=${this.rangeInputId ? `${this.rangeInputId}-1` : `rangeInputId-1`}
id=${minSliderId}
type="range"
min="0"
value="${this.selectedStartIndex}"
.value="${this.selectedStartIndex}"
max="${stepsArray.length - 1}"
step="${this.stepFactor}"
class="range"
Expand All @@ -148,10 +150,10 @@ export class BlrRangeLegendMinMaxSlider extends LitElement {
?disabled=${this.disabled}
/>
<input
id=${this.rangeInputId ? `${this.rangeInputId}-2` : `rangeInputId-2`}
id=${maxSliderId}
type="range"
min="0"
value="${this.selectedEndIndex}"
.value="${this.selectedEndIndex}"
max="${stepsArray.length - 1}"
step="${this.stepFactor}"
class="range"
Expand All @@ -160,6 +162,12 @@ export class BlrRangeLegendMinMaxSlider extends LitElement {
@input=${showMaxVal}
?disabled=${this.disabled}
/>
<div id="tooltip1" class="tooltip" style="left:${toolTipMinPos}; bottom:0px">
${stepsArray[this.selectedStartIndex]}
</div>
<div id="tooltip1" class="tooltip" style="left:${toolTipMaxPos}; bottom:0px">
${stepsArray[this.selectedEndIndex]}
</div>
</div>
<div class="tick-wrapper">
<div class="range__bar-row">
Expand Down
32 changes: 18 additions & 14 deletions packages/ui-library/src/components/range-legend-slider/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { map } from 'lit/directives/map.js';
import { styleCustom } from './index.css';
import { sliderDark, sliderLight } from '../../foundation/component-tokens/slider-legend.css';
import { FormSizesType, ActionVariantType } from '../../globals/types';
import { findToolTipPosition, setOnclickValue } from '../../utils/range-slider-utils';

import { BlrIconButtonRenderFunction } from '../icon-button';
import { RenderBtnProps } from '../../globals/types';
Expand Down Expand Up @@ -37,11 +38,14 @@ export class BlrRangeLegendSlider extends LitElement {

@property() theme: ThemeType = 'Light';

@property({ type: Boolean }) isUpdated? = false;

@state() protected selectedIndex = 0;

protected updated(changedProperties: Map<string, string>) {
if (changedProperties.has('initialValue')) {
protected updated(changedProperties: Map<string, number>) {
if (changedProperties.has('selectedIndex') && !this.isUpdated) {
this.selectedIndex = this.list.indexOf(this.initialValue) || 0;
this.isUpdated = true;
}
}

Expand All @@ -68,10 +72,9 @@ export class BlrRangeLegendSlider extends LitElement {
const filteredStepsArray = stepsArray.filter((_, i) => i % tickFrequency == 0);

const setValue = (btnType: string) => {
if (btnType === 'INC' && this.selectedIndex < stepsArray.length - 1) {
this.selectedIndex = this.selectedIndex + this.stepFactor;
} else if (btnType === 'DEC' && this.selectedIndex > 0) {
this.selectedIndex = this.selectedIndex - this.stepFactor;
const modifiedValue = setOnclickValue(this.selectedIndex, this.stepFactor, btnType, stepsArray.length);
if (modifiedValue !== undefined) {
this.selectedIndex = modifiedValue;
}
return this.onClickMinMax?.(this.selectedIndex);
};
Expand All @@ -87,18 +90,16 @@ export class BlrRangeLegendSlider extends LitElement {
[`${this.size || 'md'}`]: this.size || 'md',
});

const toolTipQuerySelector = this.shadowRoot?.querySelector(`#pip-${this.selectedIndex}`);
const toolTipPos = toolTipQuerySelector?.getBoundingClientRect().left;
const inputCmp1 = this.rangeInputId ? `${this.rangeInputId}-1` : `rangeInputId-1`;
const slider = this.shadowRoot?.querySelector(`#${inputCmp1}`) as HTMLInputElement;
const toolTipPos = slider && findToolTipPosition(slider.min, slider.max, slider.offsetWidth, this.selectedIndex);

return html`<style>
${dynamicStyles.map((style) => style)}
</style>
<div class=${classes}>
<fieldset class="range__field">
<div class="input-wrapper">
<div id="tooltip1" class="tooltip" style="bottom:90px; left:${toolTipPos! - 20}px; position:absolute;">
${stepsArray[this.selectedIndex]}
</div>
<div class="min-max-btnwrapper">
${this.renderBtn({
btnId: 'dec_btn',
Expand All @@ -107,12 +108,12 @@ export class BlrRangeLegendSlider extends LitElement {
})}
</div>
<div class="input-row">
<div class="range-wrapper">
<div class="range-wrapper" id="range-wrapper">
<input
id=${this.rangeInputId ? `${this.rangeInputId}-1` : `rangeInputId-1`}
id=${inputCmp1}
type="range"
min="0"
value="${this.selectedIndex}"
.value="${this.selectedIndex}"
max="${stepsArray.length - 1}"
step="${this.stepFactor}"
class="range"
Expand All @@ -121,6 +122,9 @@ export class BlrRangeLegendSlider extends LitElement {
@input=${showVal}
?disabled=${this.disabled}
/>
<div id="tooltip1" class="tooltip" style="bottom:0px; left: ${toolTipPos}">
${stepsArray[this.selectedIndex]}
</div>
</div>
<div class="tick-wrapper">
<div class="range__bar-row">
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-library/src/components/range-min-max-slider/index.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ BlrRangeMinMaxSlider.args = {
rangeInputId: 'range-cmpt',
startValue: 80,
endValue: 85,
minValue: 75,
minValue: 30,
maxValue: 130,
units: '$',
stepFactor: 1,
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-library/src/components/range-min-max-slider/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe('blr-range-slider', () => {
const textarea = querySelectorDeep('input', inputWrapper?.getRootNode() as HTMLElement);
const className = textarea?.className;

expect(className).to.contain('range blr-slider-bar');
expect(className).to.contain('range');
});

it('should find two slider for min & max', async () => {
Expand Down
Loading

0 comments on commit a4d7a5f

Please sign in to comment.