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

Update EuiRange and EuiDualRange #112

Merged
merged 12 commits into from
Apr 4, 2022
Merged
Original file line number Diff line number Diff line change
@@ -45,8 +45,8 @@
@inputRef={{@inputRef}}
@controlOnly={{@controlOnly}}
@autoSize={{@autoSize}}
@isFakePrependBlock={{not (has-block "prepend")}}
@isFakeAppendBlock={{not (has-block "append")}}
@isPrependProvided={{has-block "prepend"}}
@isAppendProvided={{has-block "append"}}
@isFakeMinBlock={{not (has-block "min")}}
@isFakeMaxBlock={{not (has-block "max")}}
disabled={{@disabled}}
@@ -67,4 +67,4 @@
</:append>
</EuiDualRange>
</EuiFormRow>
{{/let}}
{{/let}}
Original file line number Diff line number Diff line change
@@ -34,8 +34,8 @@
{{!template-lint-disable}}
@id={{theId}}
@disabled={{@disabled}}
@isFakePrependBlock={{not (has-block "prepend")}}
@isFakeAppendBlock={{not (has-block "append")}}
@isPrependProvided={{has-block "prepend"}}
@isAppendProvided={{has-block "append"}}
autofocus={{@autofocus}}
placeholder={{@placeholder}}
{{on "blur" this.validate}}
@@ -50,4 +50,4 @@
</:append>
</EuiFieldNumber>
</EuiFormRow>
{{/let}}
{{/let}}
Original file line number Diff line number Diff line change
@@ -45,8 +45,8 @@
@inputRef={{@inputRef}}
@controlOnly={{@controlOnly}}
@autoSize={{@autoSize}}
@isFakePrependBlock={{not (has-block "prepend")}}
@isFakeAppendBlock={{not (has-block "append")}}
@isPrependProvided={{has-block "prepend"}}
@isAppendProvided={{has-block "append"}}
@isFakeMinBlock={{not (has-block "min")}}
@isFakeMaxBlock={{not (has-block "max")}}
@isFakeValueBlock={{not (has-block "value")}}
@@ -80,4 +80,4 @@
</:append>
</EuiRange>
</EuiFormRow>
{{/let}}
{{/let}}
48 changes: 30 additions & 18 deletions packages/core/addon/components/eui-dual-range/index.hbs
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
{{#let
(and (not (arg-or-default @isFakePrependBlock false)) (has-block "prepend"))
(and (not (arg-or-default @isFakeAppendBlock false)) (has-block "append"))
(and (arg-or-default @isPrependProvided true) (has-block "prepend"))
(and (arg-or-default @isAppendProvided true) (has-block "append"))
(and (not (arg-or-default @isFakeMaxBlock false)) (has-block "max"))
(and
(not (arg-or-default @isFakeMinBlock false)) (has-block "min")
) as |hasPrepend hasAppend hasMaxBlock hasMinBlock|
(and (not (arg-or-default @isFakeMinBlock false)) (has-block "min"))
as |hasPrepend hasAppend hasMaxBlock hasMinBlock|
}}
{{#if this.showInputOnly}}
<EuiInputPopover
@@ -44,8 +43,8 @@
@autoSize={{false}}
@fullWidth={{this.fullWidth}}
@isInvalid={{@isInvalid}}
@isFakeAppendBlock={{hasPrepend}}
@isFakePrependBlock={{hasAppend}}
@isPrependProvided={{hasAppend}}
@isAppendProvided={{hasPrepend}}
@controlOnly={{true}}
@disable={{@disable}}
...attributes
@@ -60,11 +59,16 @@
(if this.canShowDropdown this.onInputBlur (optional @onBlur))
}}
{{on "input" this.handleLowerInputChange}}
/>
<div class="euiRange__horizontalSpacer"></div>
>
<:prepend as |classes|>
{{yield classes to="prepend"}}
</:prepend>
<:append as |classes|>
{{yield classes to="append"}}
</:append>
</EuiRangeInput>
</:startControl>
<:endControl as |classes|>
<div class="euiRange__horizontalSpacer"></div>
<EuiRangeInput
class={{classes}}
aria-label={{@maxInputProps.ariaLabel}}
@@ -81,8 +85,8 @@
@autoSize={{false}}
@fullWidth={{this.fullWidth}}
@isInvalid={{@isInvalid}}
@isFakeAppendBlock={{hasPrepend}}
@isFakePrependBlock={{hasAppend}}
@isPrependProvided={{hasAppend}}
@isAppendProvided={{hasPrepend}}
@controlOnly={{true}}
@disable={{@disable}}
...attributes
@@ -97,7 +101,14 @@
(if this.canShowDropdown this.onInputBlur (optional @onBlur))
}}
{{on "input" this.handleUpperInputChange}}
/>
>
<:prepend as |classes|>
{{yield classes to="prepend"}}
</:prepend>
<:append as |classes|>
{{yield classes to="append"}}
</:append>
</EuiRangeInput>
</:endControl>
<:append as |appendClasses|>
{{yield appendClasses to="append"}}
@@ -109,6 +120,7 @@
class="euiDualRange"
@fullWidth={{this.fullWidth}}
@compressed={{this.compressed}}
@showInput={{this.showInput}}
>
{{#if this.showLabels}}
<EuiRangeLabel @side="min" @disabled={{@disabled}}>
@@ -231,8 +243,8 @@
@readOnly={{@readOnly}}
@fullWidth={{this.fullWidth}}
@isInvalid={{@isInvalid}}
@isFakeAppendBlock={{true}}
@isFakePrependBlock={{true}}
@isPrependProvided={{false}}
@isAppendProvided={{false}}
@controlOnly={{true}}
@disable={{@disable}}
...attributes
@@ -357,8 +369,8 @@
@fullWidth={{this.fullWidth}}
@isInvalid={{@isInvalid}}
@controlOnly={{this.showInputOnly}}
@isFakeAppendBlock={{true}}
@isFakePrependBlock={{true}}
@isPrependProvided={{false}}
@isAppendProvided={{false}}
@disable={{@disable}}
...attributes
{{on-key "_all" this.handleInputKeyDown}}
@@ -369,4 +381,4 @@
{{/if}}
</EuiRangeWrapper>
{{/if}}
{{/let}}
{{/let}}
46 changes: 36 additions & 10 deletions packages/core/addon/components/eui-dual-range/index.ts
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@ import { EuiRangeTick } from '../eui-range-ticks';
import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
import { later } from '@ember/runloop';
import { keys } from '../../utils/keys';
import { EUI_THUMB_SIZE } from '../../utils/range';
type ValueMember = number | string;

export interface EuiDualRangeArgs
@@ -177,16 +178,28 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
// Determine thumb movement based on slider interaction
if (!this.isValid) {
// Non-standard positioning follows
this._determineInvalidThumbMovement(newVal, this.lowerValue, this.upperValue, e);
this._determineInvalidThumbMovement(
newVal,
this.lowerValue,
this.upperValue,
e
);
} else {
// Standard positioning based on click event proximity to thumb locations
this._determineValidThumbMovement(newVal, this.lowerValue, this.upperValue, e);
this._determineValidThumbMovement(
newVal,
this.lowerValue,
this.upperValue,
e
);
}
}

@action
_handleOnChange(lower: ValueMember, upper: ValueMember, e: Event): void {
const isValid = isWithinRange(this.min, upper, lower) && isWithinRange(lower, this.max, upper);
const isValid =
isWithinRange(this.min, upper, lower) &&
isWithinRange(lower, this.max, upper);
this.args.onChange([lower, upper], isValid, e);
}

@@ -198,15 +211,23 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
@action
_resetToRangeEnds(e: KeyboardEvent): void {
// Arbitrary decision to pass `min` instead of `max`. Result is the same.
this._determineInvalidThumbMovement(this.min, this.lowerValue, this.upperValue, e);
this._determineInvalidThumbMovement(
this.min,
this.lowerValue,
this.upperValue,
e
);
}

@action
_isDirectionalKeyPress(event: KeyboardEvent): boolean {
return (
[keys.ARROW_UP, keys.ARROW_RIGHT, keys.ARROW_DOWN, keys.ARROW_LEFT].indexOf(
event.key as keys
) > -1
[
keys.ARROW_UP,
keys.ARROW_RIGHT,
keys.ARROW_DOWN,
keys.ARROW_LEFT
].indexOf(event.key as keys) > -1
);
}

@@ -303,7 +324,6 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
let valuePosition = decimal <= 1 ? decimal : 1;
valuePosition = valuePosition >= 0 ? valuePosition : 0;

const EUI_THUMB_SIZE = 16;
const trackWidth =
this.args.showInput === 'inputWithPopover' && !!width
? width
@@ -325,11 +345,17 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
}

get calculateLowerValueThumbPositionStyle(): { left: string } {
return this.calculateThumbPositionStyle(Number(this.lowerValue) || this.min, this.rangeWidth);
return this.calculateThumbPositionStyle(
Number(this.lowerValue) || this.min,
this.rangeWidth
);
}

get calculateUpperValueThumbPositionStyle(): { left: string } {
return this.calculateThumbPositionStyle(Number(this.upperValue) || this.max, this.rangeWidth);
return this.calculateThumbPositionStyle(
Number(this.upperValue) || this.max,
this.rangeWidth
);
}

@action
6 changes: 3 additions & 3 deletions packages/core/addon/components/eui-field-number/index.hbs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{#let
(and (not (arg-or-default @isFakePrependBlock false)) (has-block "prepend"))
(and (not (arg-or-default @isFakeAppendBlock false)) (has-block "append"))
(and (arg-or-default @isPrependProvided true) (has-block "prepend"))
(and (arg-or-default @isAppendProvided true) (has-block "append"))
(arg-or-default @id (unique-id)) as |hasPrepend hasAppend inputId|
}}
{{#let
@@ -59,4 +59,4 @@
</EuiFormControlLayout>
{{/if}}
{{/let}}
{{/let}}
{{/let}}
10 changes: 6 additions & 4 deletions packages/core/addon/components/eui-input-popover/index.ts
Original file line number Diff line number Diff line change
@@ -6,7 +6,8 @@ import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-defa
import { tabbable } from 'tabbable';
import { EuiPopoverArgs } from '../eui-popover';

export interface EuiInputPopoverArgs extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {
export interface EuiInputPopoverArgs
extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {
disableFocusTrap?: boolean;
fullWidth?: boolean;
input: EuiPopoverArgs['button'];
@@ -44,8 +45,8 @@ export default class EuiInputPopoverComponent extends Component<EuiInputPopoverA
@action
setPanelWidth(width?: number): void {
const { panel, inputWidth } = this;
if (panel && (!!inputWidth || !!width)) {
const newWidth = !width ? width : inputWidth;
const newWidth = width || inputWidth;
if (panel && !!newWidth) {
panel.style.width = `${newWidth}px`;
this.args.onPanelResize?.(newWidth);
}
@@ -74,7 +75,8 @@ export default class EuiInputPopoverComponent extends Component<EuiInputPopoverA
});
if (
this.args.disableFocusTrap ||
(tabbableItems.length && tabbableItems[tabbableItems.length - 1] === document.activeElement)
(tabbableItems.length &&
tabbableItems[tabbableItems.length - 1] === document.activeElement)
) {
this.args.closePopover?.();
}
68 changes: 37 additions & 31 deletions packages/core/addon/components/eui-range-input/index.hbs
Original file line number Diff line number Diff line change
@@ -1,32 +1,38 @@
<EuiFieldNumber
class="euiRangeInput euiRangeInput--{{arg-or-default @side "max"}}"
name={{@name}}
min={{cast-to @min to="number"}}
max={{cast-to @max to="number"}}
@step={{@step}}
@value={{if (eq @value "") "" (cast-to @value to="number")}}
@disabled={{@disabled}}
@compressed={{@compressed}}
@fullWidth={{@fullWidth}}
@controlOnly={{@controlOnly}}
@isFakeAppendBlock={{@isFakeAppendBlock}}
@isFakePrependBlock={{@isFakePrependBlock}}
@isInvalid={{@isInvalid}}
@disable={{@disable}}
...attributes
{{simple-style
(inline-styles
componentName="EuiRangeInput"
componentArgs=(hash
autoSize=(arg-or-default @autoSize true) digitTolerance=@digitTolerance
{{#let
(and (arg-or-default @isPrependProvided true) (has-block "prepend"))
(and (arg-or-default @isAppendProvided true) (has-block "append"))
as |hasAppend hasPrepend|
}}
<EuiFieldNumber
class="euiRangeInput euiRangeInput--{{arg-or-default @side "max"}}"
name={{@name}}
min={{cast-to @min to="number"}}
max={{cast-to @max to="number"}}
@step={{@step}}
@value={{if (eq @value "") "" (cast-to @value to="number")}}
@disabled={{@disabled}}
@compressed={{@compressed}}
@fullWidth={{@fullWidth}}
@controlOnly={{@controlOnly}}
@isPrependProvided={{hasAppend}}
@isAppendProvided={{hasPrepend}}
@isInvalid={{@isInvalid}}
@disable={{@disable}}
...attributes
{{simple-style
(inline-styles
componentName="EuiRangeInput"
componentArgs=(hash
autoSize=(arg-or-default @autoSize true) digitTolerance=@digitTolerance
)
)
)
}}
>
<:prepend as |classes|>
{{yield classes to="prepend"}}
</:prepend>
<:append as |classes|>
{{yield classes to="append"}}
</:append>
</EuiFieldNumber>
}}
>
<:prepend as |classes|>
{{yield classes to="prepend"}}
</:prepend>
<:append as |classes|>
{{yield classes to="append"}}
</:append>
</EuiFieldNumber>
{{/let}}
6 changes: 3 additions & 3 deletions packages/core/addon/components/eui-range-levels/index.hbs
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
class={{class-names
"euiRangeLevels"
(if @showTicks "euiRangeLevels--hasTicks")
(if @compresses "euiRangeLevels--compressed")
(if @compressed "euiRangeLevels--compressed")
}}
{{did-insert this.validateLevels}}
{{did-update this.validateLevels @levels}}
@@ -14,9 +14,9 @@
class="euiRangeLevel euiRangeLevel--{{level.color}}"
{{simple-style
(inline-styles
componentName="EuiRangeLevels" componentArgs=(hash level=level max=@max min=@min)
componentName="EuiRangeLevels" componentArgs=(hash level=level max=@max min=@min trackWidth=@trackWidth)
)
}}
></span>
{{/each}}
</div>
</div>
Loading