Скачать или смотреть Material UI Chips - Building a Project Status Select

Free Material-UI Template: https://react.school/material-ui/temp...

Today I'm going to be talking about Material-UI Chips. This is that little grey bubble component you see in the table. It's cool for implementing little status labels or wherever else to help your statuses or category type content stand out a little bit. As you can see these are all gray which is the default Chip component, but we're going to go and implement our own custom color Chips over that for our respective task statuses, which are for example completed, in progress and not started. If you've ever used an app like Trello or Asana this is what we're going for here.

Additionally we're going to implement a little dropdown in the task dialog to allow the user to select the status from a dropdown and save that on the task.

You may notice this app template has changed a bit from my last update. I'm now focusing on building out a Task Tracker application in here which has a lot of great opportunities to talk Material UI and building apps in general. This will be part of a bigger project that I will launch in the future. You can download a free version of this template on my website which you can find below or just by searching material ui templates on google and finding React School. Please subscribe if you enjoy this content and now let's get started.

-------

So I first go to the Material UI documentation for Chips. I don't need much of this so I just find a basic example. I stop to play with the Chip Playground, just to see if any of the other parameters are interesting for this case.

Next I go and create a new file which I'm going to call the StatusChip. This component's purpose is to dynamically render a Chip based the current task's status. I don't want it to be more complicated than that, we can add the additional code for interactivity and dropdown to the task dialog itself. So keeping this component simple.

I import this component and replace the existing chip with my new component and confirm everything still works.

I open up the Chrome Inspector to see what CSS I need to change to set the background color. I observe that simply setting the background color on the root chip component will be sufficient.

Next I check the Material UI color palette to find colors for the statuses I want. I'm mostly just looking at the shades here to see that I want the 300 value of the color. I next test that I can set the inline style of the chip with the style prop like so. I import Material UI colors and try a test value of green[300]. I see that that works. I also see that I want to set the text color white as well.

I import the rest of the colors and create a switch statement to determine which color I should show for each status.

I stop and realize my prettier isn't working on this project so I set that up again to get my formatting properly.

I now confirm that my new method works.

I also add a new blocked status here so there is a red color as well. Just makes the status feature a bit more interesting

Now I update my TaskDialog to have the taskId that I want to render. I haven't set this up yet so it was displaying some blank values. The values were actually set from another dialog in my app so I have to wire up a new set of attributes for my tasks.

I import my redux selector for the tasks and use that to get the task data. I originally wanted to make a selector for each task individually, but I forgot how to pass in arguments to a selector and realized it would be easier to just find the task inside the Dialog after getting all the tasks. I already had a selector to get all the tasks so this was easy to do.

So I find the task in my dialog and I can confirm that I'm seeing the correct data for that task. I am using the name attribute for a lot of dummy inputs so that is why you are see it appearing in a few spots here.

I finish wiring up the task attributes and you can now see the status correctly appearing as a text input.

But I want it to be a dropdown and include my new SelectChip component, so now I will implement that. This will allow users to pick different statuses from a dropdown.

I remove the input and use the status chip I created earlier. But you can see there is no label above it and there is not a lot of padding between the above input.

I play around with some FormLabel styling until I am happy with a label that looks nice. I am using some inline styles here again just because I'm not sure this are the components I'm going with yet.

I'm happy with how this looks for now. But there's no interactivity, so its time now to implement a select component to pick the different statuses.

Thank you for watching this video. Please comment below with the features that you want to see implemented next. Subscribe for more updates, and I will see you next time!