Et2Button: Fix hideOnReadonly still showed up when readonly

This commit is contained in:
nathan 2022-06-16 13:59:31 -06:00
parent d525918391
commit 45bdc86203
3 changed files with 32 additions and 15 deletions

View File

@ -62,6 +62,9 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
max-width: 125px; max-width: 125px;
min-width: fit-content; min-width: fit-content;
} }
:host([hideonreadonly][disabled]) {
display:none;
}
/* Set size for icon */ /* Set size for icon */
::slotted(img.imageOnly) { ::slotted(img.imageOnly) {
padding-right: 0px !important; padding-right: 0px !important;
@ -93,8 +96,10 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
/** /**
* If button is set to readonly, do we want to hide it completely (old behaviour) or show it as disabled * If button is set to readonly, do we want to hide it completely (old behaviour) or show it as disabled
* (default) * (default)
* Something's not quite right here, as the attribute shows up as "hideonreadonly" instead of "hide" but
* it does not show up without the "attribute", and attribute:"hideonreadonly" does not show as an attribute
*/ */
hideOnReadonly: {type: Boolean}, hideOnReadonly: {type: Boolean, reflect: true, attribute: "hide"},
/** /**
* Button should submit the etemplate * Button should submit the etemplate
@ -237,11 +242,7 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
render() render()
{ {
if(this.readonly && this.hideOnReadonly) console.log(this, this.hideOnReadonly);
{
return '';
}
this._iconNode.src = this.__image || ""; this._iconNode.src = this.__image || "";
if(!this.label) if(!this.label)
{ {

View File

@ -1,6 +1,6 @@
import {et2_IInput, et2_IInputNode, et2_ISubmitListener} from "../et2_core_interfaces"; import {et2_IInput, et2_IInputNode, et2_ISubmitListener} from "../et2_core_interfaces";
import {Et2Widget} from "../Et2Widget/Et2Widget"; import {Et2Widget} from "../Et2Widget/Et2Widget";
import {css, dedupeMixin, PropertyValues} from "@lion/core"; import {css, dedupeMixin, LitElement, PropertyValues} from "@lion/core";
import {ManualMessage} from "../Validators/ManualMessage"; import {ManualMessage} from "../Validators/ManualMessage";
import {Required} from "../Validators/Required"; import {Required} from "../Validators/Required";
@ -18,7 +18,7 @@ import {Required} from "../Validators/Required";
*/ */
export declare class Et2InputWidgetInterface export declare class Et2InputWidgetInterface
{ {
readOnly : boolean; readonly : boolean;
protected value : string | number | Object; protected value : string | number | Object;
public set_value(any) : void; public set_value(any) : void;
@ -36,10 +36,12 @@ export declare class Et2InputWidgetInterface
public isValid(messages : string[]) : boolean; public isValid(messages : string[]) : boolean;
} }
const Et2InputWidgetMixin = (superclass) => type Constructor<T = {}> = new (...args : any[]) => T;
const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T) =>
{ {
class Et2InputWidgetClass extends Et2Widget(superclass) implements et2_IInput, et2_IInputNode, et2_ISubmitListener class Et2InputWidgetClass extends Et2Widget(superclass) implements et2_IInput, et2_IInputNode, et2_ISubmitListener
{ {
private __readonly : boolean;
protected _oldValue : string | number | Object; protected _oldValue : string | number | Object;
protected node : HTMLElement; protected node : HTMLElement;
@ -69,12 +71,12 @@ const Et2InputWidgetMixin = (superclass) =>
readOnly: { readOnly: {
type: Boolean, type: Boolean,
attribute: 'readonly', attribute: 'readonly',
reflect: true,
}, },
// readonly is what is in the templates // readonly is what is in the templates
// I put this in here so loadWebComponent finds it when it tries to set it from the template // I put this in here so loadWebComponent finds it when it tries to set it from the template
readonly: { readonly: {
type: Boolean type: Boolean,
reflect: true
}, },
required: { required: {
@ -205,9 +207,23 @@ const Et2InputWidgetMixin = (superclass) =>
set_readonly(new_value) set_readonly(new_value)
{ {
this.readonly = this.readOnly = new_value; this.readonly = new_value;
} }
// Deal with Lion readOnly vs etemplate readonly
public set readonly(new_value)
{
debugger;
this.__readonly = super.__readOnly = new_value;
this.requestUpdate("readonly");
}
public get readonly() { return this.__readonly};
set readOnly(new_value) {this.readonly = new_value;}
get readOnly() { return this.readonly};
getValue() getValue()
{ {
return this.readOnly ? null : this.value; return this.readOnly ? null : this.value;

View File

@ -37,8 +37,8 @@ function applyMixins(derivedCtor : any, baseCtors : any[])
}); });
} }
type Constructor<T = {}> = new (...args : any[]) => T; type Constructor<T = LitElement> = new (...args : any[]) => T;
const Et2WidgetMixin = <T extends Constructor<LitElement>>(superClass : T) => const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
{ {
class Et2WidgetClass extends superClass implements et2_IDOMNode class Et2WidgetClass extends superClass implements et2_IDOMNode
{ {
@ -1316,7 +1316,7 @@ export function loadWebComponent(_nodeName : string, _template_node : Element|{[
if (parent) widget.setParent(parent); if (parent) widget.setParent(parent);
// Set read-only. Doesn't really matter if it's a ro widget, but otherwise it needs set // Set read-only. Doesn't really matter if it's a ro widget, but otherwise it needs set
widget.readOnly = readonly; widget.readonly = readonly;
widget.transformAttributes(attrs); widget.transformAttributes(attrs);