Custom button component that used to work with ver 2.9.0 wont work on v3

PowerShell Universal
21

i will try to refecture your component tomorrow, i don’t have time right now

22

@AlonGvili thank you

23

Home (1)
Home (1)1364×688 3.16 MB

i’m using react hooks not classes, so you will need react +16.12, go for the latest 17.0
the js code

import React from "react";
import ButtonLoader from "react_button_loader";
import { withComponentFeatures } from 'universal-dashboard'
// import UdIcon from "./ud-icon";

const UDButtonLoader = (props) => {
  const [toggleLoader, setToggleLoader] = React.useState(false);
  const [disabled, setDisabled] = React.useState(false);
  const [error, setError] = React.useState({
    hasError: false,
    errorMessage: "",
  });

  const incomingEvent = (type, event) => {
    if (event.type === "setState") {
      props.setState(props.state);
    }
    if (event.type === "removeElement") {
      props.setState({
        hidden: true,
      });
    }
  };

  React.useEffect(() => {
    const token = props.subscribeToIncomingEvents(props.id, incomingEvent);
    return () => {
      props.unsubscribeFromIncomingEvents(token);
    };
  }, [props.id]);

  const handleClick = () => {
    if (props.onClick == null) return;
    props.onClick();
    setToggleLoader(true);
    setDisabled(true);
    UniversalDashboard.get(
      `/api/internal/component/element/${props.id + "onClick"}`,
      (json) => {
        if (json.error) {
          setError({
            hasError: true,
            errorMessage: json.error.message,
          });
          setToggleLoader(false);
          setDisabled(false);
          console.error(error.errorMessage);
        } else {
          setError({
            hasError: false,
          });
          setToggleLoader(false);
          setDisabled(false);
        }
      }
    );
    props.publish({
      type: "clientEvent",
      eventId: props.id + "onClick",
      eventName: "onChange",
      eventData: "",
    });
  };

  return (
    <ButtonLoader
      className="ud-buttonloader"
      onClick={handleClick}
      id={props.id}
      isLoading={toggleLoader}
      disabled={disabled}
      loaderType="jiggling-lines"
      style={props.style}
      background={props.background}
    >
      {props.icon &&
        UniversalDashboard.renderComponent({
          className: "ud-mu-icon",
          style: {
            marginRight: props.floating || !props.text ? "unset" : "5px",
          },
          icon: props.icon,
          type: "icon",
        })}
      {props.text}
    </ButtonLoader>
  );
};

export default withComponentFeatures(UDButtonLoader);

the powershell code

function New-UDButtonLoader {
    param(
        [Parameter()]
        [string]$Id = ([Guid]::NewGuid()),
        [Parameter()]
        $Text,
        [Parameter()]
        [Switch]$isLoading,
        [Parameter()]
        [UniversalDashboard.Models.FontAwesomeIcons]$Icon,
        [Parameter()]
        [ValidateSet('left', 'right')]
        [String]$IconAlignment = 'left',
        [Parameter()]
        [Endpoint]$OnClick,
        [Parameter()]
        [String]$BackgroundColor,
        [Parameter()]
        [string]$loaderType,
        [Parameter()]
        [Switch]$disabled     
    )

    if ($OnClick) {
        $OnClick.Register($Id + 'onClick', $PSCmdlet)
    }
        

    if ($PSBoundParameters.ContainsKey("Icon")) {
        $IconName = [UniversalDashboard.Models.FontAwesomeIconsExtensions]::GetIconName($Icon)
    }

    

    @{
        # The AssetID of the main JS File
        assetId       = $AssetId 
        # Tell UD this is a plugin
        isPlugin      = $true 
        # This ID must be the same as the one used in the JavaScript to register the control with UD
        type          = "ud-buttonloader"
        # An ID is mandatory 
        id            = $Id

        # This is where you can put any other properties. They are passed to the React control's props
        # The keys are case-sensitive in JS. 
        text          = $Text
        icon          = $IconName
        iconAlignment = $IconAlignment           
        isLoading     = $isLoading
        disabled      = $disabled.IsPresent
        loaderType    = $loaderType
        onClick       = $OnClick
        background    = $BackgroundColor
    }

}

the dashboard code

New-UDButtonLoader -Id 'long_job' -Text "Long Job" -BackgroundColor 'red' -OnClick {
    Set-UDElement -Id 'long_job' -Properties @{
        IsLoading = $true
    }
    Start-Sleep 8
    Set-UDElement -Id 'long_job' -Properties @{
        IsLoading = $false
    }
}

i hope it will work for you, tested on psu v1.5.9 and the latest framework

1 Like
24

@AlonGvili
Thank you very much Alon, you are the man, it works but there is a small issue.
it execute the scriptblock twice at on click.
see below

image
image980×326 28.7 KB

25

i will take a look at this tonight