button, label, iconbutton - requiredWidth, iconbutton centerX, stack …

…- centerX items
hdrdevs · Aug 26, 2024 · 8b24e5a · 8b24e5a
1 parent fd50648
commit 8b24e5a
Show file tree

Hide file tree

Showing 9 changed files with 197 additions and 24 deletions.
diff --git a/src/ui/Icon.ui.tsx b/src/ui/Icon.ui.tsx
@@ -103,6 +103,12 @@ export class Icon extends Widget {
     public getIconSize(): IconSizes {
         return this.iconSize;
     }
+
+    public getRequiredWidth(): number {
+        const sizeString = iconPixelSizesMap[this.iconSize];
+        const size = parseInt(sizeString.split("px")[0]);
+        return size;
+    }
 }
 
 export type wIconProps = WidgetProps & {

diff --git a/src/ui/IconButton.ui.tsx b/src/ui/IconButton.ui.tsx
@@ -18,10 +18,13 @@ export class IconButton extends Button {
 
     showIcon: boolean;
     showText: boolean;
+    centerX: boolean;
 
     constructor(id: string, icon: string = "dark_mode", parent: Widget | null = null) {
         super(id, parent);
 
+        this.centerX = false;
+
         this.setAlign(WidgetAlignTypes.HORIZONTAL);
         this.icon = new Icon(id + ".icon", icon, undefined, this);
         this.label = new Label(id + ".label", undefined, this);
@@ -32,6 +35,16 @@ export class IconButton extends Button {
         this.init();
     }
 
+    protected updateRequiredWidth(): void {
+        if (!this.label) return;
+        if (!this.icon) return;
+
+        const labelWidth = this.label.getRequiredWidth();
+        const iconWith = this.icon.getRequiredWidth();
+
+        this.requiredWidth = labelWidth + iconWith + 70;
+    }
+
     public displayIcon(): void {
         this.showIcon = true;
         this.icon.setVisible(true);
@@ -68,7 +81,8 @@ export class IconButton extends Button {
     public render(): void {
         super.render();
 
-        const iconWidth = 24;
+        const labelWidth = this.label.getRequiredWidth();
+        const iconWidth = this.icon.getRequiredWidth();
         const padding = 5;
 
         if (this.onlyIcon()) {
@@ -83,10 +97,23 @@ export class IconButton extends Button {
             this.label.getBody().style.position = "absolute";
             this.icon.getBody().style.position = "absolute";
 
+            const availableWidth = this.getW() - padding * 5; //Doble padding a la derecha e izquierda y uno de separacion entre label y icon.
+            const requiredWidth = labelWidth + iconWidth + padding * 5;
+
             const labelHeight = this.label.getBody().clientHeight;
 
-            const startX = padding; //this.getBody().clientWidth / 2 - (iconWidth + labelWidth) / 2;
+            let startX = availableWidth / 2 - (iconWidth + padding + labelWidth) / 2;
+
+            if (availableWidth < requiredWidth) {
+                startX = padding * 2;
+            }
+
+            if (!this.centerX) {
+                startX = padding * 2;
+            }
+
             const startLabelX = startX + iconWidth + padding;
+
             let startY = this.getH() / 2 - iconWidth / 2;
             let startLabelY = this.getH() / 2 - labelHeight / 2;
 
@@ -114,17 +141,24 @@ export class IconButton extends Button {
     public setText(text: string): void {
         //super.setText(text);
         this.label.setText(text);
+        this.updateRequiredWidth();
     }
 
     public setIcon(icon: string): void {
         this.icon.setIcon(icon);
+        this.updateRequiredWidth();
+    }
+
+    public setCenterX(centerX: boolean): void {
+        this.centerX = centerX;
     }
 }
 
 export type wIconButtonProps = Omit<wButtonProps, "text"> & {
     icon?: string | null;
     text?: string | null;
     onlyIcon?: boolean | null;
+    centerX?: boolean | null;
 };
 
 export const WIconButton = (props: wIconButtonProps) => {
@@ -145,6 +179,7 @@ export const WIconButton = (props: wIconButtonProps) => {
             w-color={props.color}
             w-width={props.width}
             w-height={props.height}
+            w-center-x={props.centerX}
         />,
         props
     );
@@ -162,6 +197,7 @@ export function createIconButton(
     const dataWidth = content.getAttribute("w-width");
     const dataHeight = content.getAttribute("w-height");
     const dataOnlyIcon = content.getAttribute("w-only-icon");
+    const dataCenterX = content.getAttribute("w-center-x");
 
     let newIconButton = new IconButton(id, dataIcon, parent);
 
@@ -189,5 +225,9 @@ export function createIconButton(
         newIconButton.onlyIcon();
     }
 
+    if (dataCenterX) {
+        newIconButton.setCenterX(true);
+    }
+
     return newIconButton;
 }
diff --git a/src/ui/button.ui.tsx b/src/ui/button.ui.tsx
@@ -28,14 +28,19 @@ export class Button extends Widget {
     variant: ButonVariants;
     color: Colors;
     fullWidth: boolean;
+    minWidth: boolean;
     size: ButonSizes;
     href: string;
     text: string;
+    requiredWidth: number;
 
     constructor(id: string, parent: Widget | null = null) {
         super(id, "button", parent);
 
+        this.requiredWidth = -1;
+
         this.fullWidth = false;
+        this.minWidth = false;
         //this.setType(WidgetTypes.CUSTOM);
         this.variant = "text";
         this.color = "primary"; //primary";
@@ -59,32 +64,57 @@ export class Button extends Widget {
         } else if (this.type === WidgetTypes.FREE) {
             this.addClass("WUIFixPosition");
         }
+        this.updateRequiredWidth();
+    }
+
+    protected updateRequiredWidth(): void {
+        const div = document.createElement("div");
+        div.id = this.id + ".requiredWidth";
+        div.innerHTML = this.text;
+        div.classList.add(`WUIButton-${this.variant}`);
+        div.classList.add(`WUIButton-${this.variant}-color-${this.color}`);
+        div.style.position = "absolute";
+        div.style.overflow = "hidden";
+        document.body.appendChild(div);
+        this.requiredWidth = div.clientWidth;
+        div.parentNode?.removeChild(div);
     }
 
     public init(): void {
         super.init();
     }
 
-    setText(text: string): void {
+    public setText(text: string): void {
         this.text = text;
         this.body.innerHTML = text;
+        this.updateRequiredWidth();
     }
 
-    setVariant(variant: ButonVariants = "contained"): void {
+    public setVariant(variant: ButonVariants = "contained"): void {
         this.variant = variant;
         this.configureStyles();
     }
 
-    setColor(color: Colors = "primary"): void {
+    public setColor(color: Colors = "primary"): void {
         this.color = color;
         this.configureStyles();
     }
 
-    setFullWidth(fullWidth: boolean = false): void {
+    public setFullWidth(fullWidth: boolean = false): void {
         this.fullWidth = fullWidth;
     }
 
-    setSize(size: ButonSizes = "medium"): void {
+    public setMinWidth(minWidth: boolean = false): void {
+        this.minWidth = minWidth;
+        if (this.minWidth) {
+            if (this.requiredWidth > 0) {
+                console.log("cambiando tamano:", this.requiredWidth, " id:", this.id);
+                this.setW(this.requiredWidth);
+            }
+        }
+    }
+
+    public setSize(size: ButonSizes = "medium"): void {
         this.size = size;
     }
 
@@ -111,6 +141,10 @@ export class Button extends Widget {
     getText(): string {
         return this.text;
     }
+
+    public getRequiredWidth(): number {
+        return this.requiredWidth;
+    }
 }
 
 export type wButtonProps = WidgetProps & {

diff --git a/src/ui/buttonstack.ui.tsx b/src/ui/buttonstack.ui.tsx
@@ -15,13 +15,16 @@ export class ButtonStack extends Widget {
     orientation: OrientationTypes;
     buttons: Map<string, Button | IconButton>;
     activeButton: string | null;
+    centeredButtons: boolean;
     constructor(
         id: string,
         orientation: OrientationTypes = "horizontal",
         parent: Widget | null = null
     ) {
         super(id, "div", parent);
 
+        this.centeredButtons = false;
+
         this.orientation = orientation;
 
         if (this.orientation === "horizontal") {
@@ -82,6 +85,9 @@ export class ButtonStack extends Widget {
 
     public addButton(button: Button | IconButton): void {
         this.buttons.set(button.id, button);
+        if (button instanceof IconButton && this.centeredButtons) {
+            (button as IconButton).setCenterX(true);
+        }
         button.setType(WidgetTypes.FILL);
         button.subscribe({ event: "click", then: () => this.setActive(button.id) });
         this.addChild(button);
@@ -99,9 +105,14 @@ export class ButtonStack extends Widget {
     private thereAreMoreThanTwoButtons(): boolean {
         return this.buttons.size > 2;
     }
+
+    public setCenteredButtons(centeredButtons: boolean): void {
+        this.centeredButtons = centeredButtons;
+    }
 }
 
 export type WButtonStackProps = WidgetProps & {
+    centerX?: boolean | null;
     children: any;
 };
 
@@ -113,7 +124,7 @@ export const WButtonStack = (props: WButtonStackProps) => {
     connectWidgetCallback(props.id, getOnlyEventProps(props));
 
     return normalizeWidget(
-        <div id={props.id} w-button-stack>
+        <div id={props.id} w-button-stack w-centerX={props.centerX}>
             {props.children}
         </div>,
         props
@@ -131,6 +142,10 @@ export function createButtonStack(
 
     let newStack = new ButtonStack(id, dataOrientation, parent);
 
+    if (content.getAttribute("w-centerX")) {
+        newStack.setCenteredButtons(true);
+    }
+
     content.childNodes.forEach((item: HTMLElement, _index: number) => {
         if (item.getAttribute("w-button") || item.getAttribute("w-icon-button")) {
             const widget = createWidget(item) as Button;

diff --git a/src/ui/label.ui.tsx b/src/ui/label.ui.tsx
@@ -11,12 +11,16 @@ export class Label extends Widget {
     color: Colors;
     text: string;
 
+    requiredWidth: number;
+
     isHCentered: boolean;
     isVCentered: boolean;
 
     constructor(id: string, variant: LabelVariants = "span", parent: Widget | null = null) {
         super(id, variant, parent);
 
+        this.requiredWidth = -1;
+
         this.isHCentered = false;
         this.isVCentered = false;
 
@@ -37,6 +41,19 @@ export class Label extends Widget {
         super.init();
     }
 
+    private updateRequiredWidth(): void {
+        const div = document.createElement("div");
+        div.id = this.id + ".requiredWidth";
+        div.innerHTML = this.text;
+        div.classList.add("WUILabel" + this.variant);
+        div.classList.add("WUILabel-" + this.color);
+        div.style.position = "absolute";
+        div.style.overflow = "hidden";
+        document.body.appendChild(div);
+        this.requiredWidth = div.clientWidth;
+        div.parentNode?.removeChild(div);
+    }
+
     public setHCentered(isHCentered: boolean = true): void {
         this.isHCentered = isHCentered;
     }
@@ -67,6 +84,7 @@ export class Label extends Widget {
     public setText(text: string): void {
         this.text = text;
         this.body.innerHTML = text;
+        this.updateRequiredWidth();
     }
 
     public setVariant(variant: LabelVariants = "span"): void {
@@ -76,6 +94,7 @@ export class Label extends Widget {
 
         this.variant = variant;
         this.addClass("WUILabel-" + this.variant);
+        this.updateRequiredWidth();
     }
 
     public setColor(color: Colors = "primary"): void {
@@ -84,6 +103,7 @@ export class Label extends Widget {
         }
         this.color = color;
         this.addClass("WUILabel-" + this.color);
+        this.updateRequiredWidth();
     }
 
     public getVariant(): LabelVariants {
@@ -97,6 +117,10 @@ export class Label extends Widget {
     public getText(): string {
         return this.text;
     }
+
+    public getRequiredWidth(): number {
+        return this.requiredWidth;
+    }
 }
 
 export type wLabelProps = WidgetProps & {

diff --git a/src/working/demo/config.ts b/src/working/demo/config.ts
@@ -1,7 +1,7 @@
 export const config = {
     SCREEN_TRIGGER_WIDTH: 600,
     STACK_MIN_WIDTH: 80,
-    STACK_MAX_WIDTH: 370,
+    STACK_MAX_WIDTH: 450,
     SIDEBAR_MIN_WIDTH: 55,
     SIDEBAR_MAX_WIDTH: 200,
 };
diff --git a/src/working/demo/index.tsx b/src/working/demo/index.tsx
@@ -11,7 +11,7 @@ import { config } from "./config";
 const ThemeMenu = () => {
     const handleThemeChanged = (args: any) => {
         const pattern = "btn-theme-";
-        const theme = args.id.slice(pattern.length)
+        const theme = args.id.slice(pattern.length);
         app?.theme.setTheme(theme);
     };
 
@@ -94,6 +94,7 @@ window.app = (() => {
                             id="topmenu-stack"
                             orientation="horizontal"
                             fixedSize={getStackWidth()}
+                            centerX
                         >
                             <WIconButton
                                 id="btn-home"