Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save basz/d66e710ddddf6d7ced67c3340272b3ff to your computer and use it in GitHub Desktop.
Save basz/d66e710ddddf6d7ced67c3340272b3ff to your computer and use it in GitHub Desktop.
import BaseControl from 'ember-bootstrap/components/bs-form/element/control';
import defaultValue from 'ember-bootstrap/utils/default-decorator';
import formValidationClass from 'ember-bootstrap/utils/cp/form-validation-class';
import sizeClass from 'ember-bootstrap/utils/cp/size-class';
import { action, computed, getWithDefault } from '@ember/object';
import { isNone, isEmpty } from '@ember/utils';
import { tagName } from '@ember-decorators/component';
import { tracked } from '@glimmer/tracking';
@tagName('')
export default class SelectNative extends BaseControl {
classTypePrefix = 'custom-select';
@defaultValue
size = null;
@formValidationClass('validationType')
formValidationClass;
@sizeClass('custom-select', 'size')
sizeClass;
@computed('sizeClass', 'formValidationClass')
get classNamesProxy() {
return [this.classTypePrefix, this.sizeClass, this.formValidationClass].join(' ');
}
@tracked collection = [];
@tracked defaultValue = { value: null, label: 'select', conditional: true };
@tracked inline = false;
@tracked isLoading = false;
@tracked labelKey = 'label';
@tracked translateLabels = true;
@tracked translateMaterialPrefix = '';
@tracked valueKey = 'value';
set options(options) {
this.collection = getWithDefault(options, 'collection', []);
this.defaultValue = getWithDefault(options, 'defaultValue', this.defaultValue);
this.inline = getWithDefault(options, 'inline', this.inline);
this.isLoading = getWithDefault(options, 'isLoading', this.isLoading);
this.labelKey = getWithDefault(options, 'labelKey', this.labelKey);
this.translateLabels = getWithDefault(options, 'translateLabels', this.translateLabels);
this.translateMaterialPrefix = getWithDefault(options, 'translateMaterialPrefix', this.translateMaterialPrefix);
this.valueKey = getWithDefault(options, 'valueKey', this.valueKey);
}
get showDefaultValue() {
const defaultValue = this.defaultValue;
const value = this.value;
const valueKey = this.valueKey;
if (isNone(defaultValue)) {
return false;
}
return !defaultValue.conditional || defaultValue[valueKey] === value;
}
get selectedValue() {
if (!isEmpty(this.value)) {
return this.value.toString();
}
const valueKey = this.valueKey;
return getWithDefault(this, `defaultValue.${valueKey}`, null);
}
@action
onChangeNative(value) {
this.onChange(value);
}
}
{{#if isLoading}}
<span class="position-absolute m-2" style="right: 2rem;">
<Indicator::circle-notch class="text-muted"/>
</span>
{{/if}}
<NativeSelectBox class={{this.classNamesProxy}}
@value={{this.selectedValue}}
disabled={{or this.isLoading this.disabled}}
@onSelect={{action "onChangeNative"}} as |sb|>
{{#if this.showDefaultValue}}
<sb.Option @value={{get this.defaultValue valueKey}}>
{{#if this.translateLabels}}
{{t (get this.defaultValue labelKey)}}
{{else}}
{{get this.defaultValue labelKey}}
{{/if}}
</sb.Option>
{{/if}}
{{#each this.collection as |option|}}
<sb.Option @value={{get option valueKey}}>
{{#if this.translateLabels}}
{{#if this.translateMaterialPrefix}}
{{t (concat this.translateMaterialPrefix (get option this.valueKey))}}
{{else}}
{{t (get option this.labelKey)}}
{{/if}}
{{else}}
{{get option this.labelKey}}
{{/if}}
</sb.Option>
{{/each}}
</NativeSelectBox>
<BsForm @formLayout="horizontal" @onSubmit={{action "onSubmit"}} @submitOnEnter={{true}} @model={{this.changeset}} @showAllValidations={{true}} as |form|>
<form.element @controlType="select-native"
@label={{t "model.order.insole-options.type"}}
@property="type"
@size={{this.size}}
@showValidationOn={{array "change"}}
@disabled={{not this.enableType}}
@options={{hash translateLabels=false
collection=this.optionsType
defaultValue=(hash value=null label=(t "commands.select") conditional=true)}}
@onChange={{action "onChangeSelect" "type"}}/>
</BsForm>
@basz
Copy link
Author

basz commented May 11, 2020

Moving <form.element @disabled={{not this.enableType}} ... to @options={{hash disabled=(not this.enableType)... will work if i change the set options(options) in components/bs-form/element/control/select-native/component.js. Not sure if that is the recommended way...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment