Custom Componentss that utilise Material-UI

PowerShell Universal Universal Dashboard
1 
Product: PowerShell Universal
Version: 2.9.2

Hi all :wave:,

I’ve been following along with the blog post on Building Universal Dashboard v3 Custom Components.

Followed the steps - all good - with the caveat that in the Trying the Component section I couldn’t find where I was supposed to register the component. I just imported it as a module before I call New-UDDashboard and it appears to work. Is this just a bit outdated?

I wanted to add a few of the Material-UI components that I thought might be useful. I started with the Pagination component as it looks pretty simple.

I’ve done the below

pagination.jsx

import React from 'react';
import { withComponentFeatures } from 'universal-dashboard';
import Pagination from '@material-ui/lab/Pagination';

const UDPagination = props => {
    return (
        <Pagination
            color={props.color}
            count={props.count}
            defaultPage={props.defaultPage}
            disabled={props.disabled}
            hideNextButton={props.hideNextButton}
            hidePreviousButton={props.hidePreviousButton}
            shape={props.shape}
            showFirstButton={props.showFirstButton}
            showLastButton={props.showLastButton}
            siblingCount={props.siblingCount}
            size={props.size}
            variant={props.variant}
        />
    );
}

export default withComponentFeatures(UDPagination)

index.js

import UDPagination from './pagination';

UniversalDashboard.register("ud-pagination", UDPagination);

Universal.Component.psm1

$IndexJs = Get-ChildItem "$PSScriptRoot\index.*.bundle.js"
$AssetId = [UniversalDashboard.Services.AssetService]::Instance.RegisterAsset($IndexJs.FullName)

function New-UDPagination {
    param(
        [Parameter()]
        [string]$Id = (New-Guid).ToString(),
        [Parameter()]
        [ValidateSet('primary', 'secondary', 'standard')]
        [string]
        $Color = 'standard',
        [Parameter()]
        [int]
        $Count = 1,
        [Parameter()]
        [int]
        $DefaultPage = 1,
        [Parameter()]
        [bool]
        $Disabled = $false,
        [Parameter()]
        [bool]
        $HideNextButton = $false,
        [Parameter()]
        [bool]
        $HidePreviousButton = $false,
        [Parameter()]
        [int]
        $Page = 1,
        [Parameter()]
        [ValidateSet('round', 'rounded')]
        [string]
        $Shape = 'round',
        [Parameter()]
        [bool]
        $ShowFirstButton = $false,
        [Parameter()]
        [bool]
        $ShowLastButton = $false,
        [Parameter()]
        [int]
        $SiblingCount = 1,
        [Parameter()]
        [ValidateSet('small', 'medium', 'large')]
        [string]
        $Size = 'medium',
        [Parameter()]
        [ValidateSet('outlined', 'text')]
        [string]
        $Variant = 'text'
    )
    @{
        assetId            = $AssetId 
        isPlugin           = $true 
        type               = 'ud-pagination'
        id                 = $Id
        color              = $Color
        count              = $Count
        defaultPage        = $DefaultPage
        disabled           = $Disabled
        hideNextButton     = $HideNextButton
        hidePreviousButton = $HidePreviousButton
        page               = $Page
        shape              = $Shape
        showFirstButton    = $ShowFirstButton
        showLastButton     = $ShowLastButton
        siblingCount       = $SiblingCount
        size               = $Size
        variant            = $Variant
    }
}

In my dashboard I’m then calling:

New-UDPagination -Color primary -Count 10 -DefaultPage 8

The result:
Pagination-Appears-Ok

I was pretty happy until I noticed that the buttons in the page header looked…off. Then I pressed the theme toggle.

The issue:

Pagination-not-ok

So there are two issues:

  1. Using the component is resetting some base styles.
  2. It’s not respecting the theme - in fact it appears to always follow the base MUI theme. I’ve set other themes and they are not respected.

I have half an idea that it could be a webpack issue and I’ m not correctly externalising material-ui but I’m honestly not sure.

Has anyone tried to make components that are theme aware before?

Any ideas @adam ?

Thanks,

2

What version of MUI did you include? If you are using a different version than UD, it might cause that issue with the styles.

As for the theme, we store the current theme in local storage.

localStorage.setItem('theme', next);

That said, you won’t be notified of changes to the theme. You could try reading it during render. I think we’ll need to add that feature to our NPM package.

3

I’m using these:

"@material-ui/core": "^4.12.3",
"@material-ui/lab": "^4.0.0-alpha.60",

What versions of these packages is UD using and I’ll test that out?

4

Hmmm UD is using the same versions.

 "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@material-ui/pickers": "^3.3.10",
    "@material-ui/system": "^4.12.1",

You might be able to inspect element on those buttons to see which stylesheet the style is coming from to narrow down if we have a conflict somewhere.