[WK5-W] Makestyles refactor ellipsis css material ui

1. Waking up

I woke up at 8:30 and, surprise surprise, I was so sleepy so ended up staying in my bed until a little bit past 9. But hey, I got my PR up from yesterday, and just waiting for that to be approved anyways so there wasn't anything urgent to be done I guess.

 

I had a meeting at 11:45 as usual for daily standups. For daily standups, I think it's crucial to write a memo for myself, because man I don't think I can say what I did and what I'll be working on without going on a tangent if I don't have a memo. So yeah that's how I've been keeping myself on point and short for those standups - like 2 or 3 sentences? Maybe 4 or 5 if there's any blockers, then I take it to another meeting.

 

Feels like I probably did like less than 4 hours of solid work today, but there are days like that I guess.

2. Refactoring ellipsis css to prop, makestyles (material UI)

So the fifth ticket I'm working on is refactoring css code for ellipsis into one place (BaseTypography component) so that it can be enabled without duplication.

 

On doing so, I did learn a bit of things about makestyles and how to pass in arguments to makestyles so I might share that here.

 

What I needed to do was enable a class called 'ellipsis' in Typography component if there's an ellipsis prop passed. Then it needs to set property 'WebkitLineClamp' to the number of lines specified by ellipsis prop. So here's how it works. We use makeStyles from material ui to create a 'dynamic' css file that defines css classes.

 

import {makeStyles} from '@material-ui/styles'
import baseTypographyStyles from 'BaseTypographyStyles'

// initialise css classes through makeStyles
const useStyles = makeStyles(baseTypographyStyles)

const BaseTypographyStyles = (props)=>{
	const {//stuff, children, ellipsis, ...props} = props
    
    // useStyles pass in props to css classes
    const classes = useStyles({
    	WebkitLineClamp: ellipsis
    })
    
    return(
    	<Typography
        	classNames={ellipsis?classes.ellipsis:``}
        >
        	{children}
        </Typography>
        	
    
    )


}

Above is a minimal example to illustrate the point. Then, you need to define an object that define the css classes.

export const baseTypographyStyles = {
	// defines a class called 'ellipsis'
	ellipsis: (props)=>({
            textOverflow: 'ellipsis',
            overflow: 'hidden',
            display: '-webkit-box',
    		WebkitBoxOrient: 'vertical',
            // use props from useStyles passed in as above
    		WebkitLineClamp: props.WebkitLineClamp, 
    		whiteSpace: 'normal',
		})
    })
}

 

That's it! Easy, right?

Then you can now use it like this:

const SomeCard = ({title, body})=>{
	return (
    	<Card>
        	// put ellipsis if the number of lines go more than 2 lines
        	<Heading ellipsis={2}>
            	{title}
            </Heading>
        	// put ellipsis if the number of lines go more than 3 lines
            <Body1 ellipsis={3}>
            	{body}
            </Body>
        </Card>
    )
}

const Heading = ({children, ...props})=>(
	<BaseTypography type={"h1"} ...props>
		{children}
	</BaseTypography>
)

const Body1 = ({children, ...props})=>(
	<BaseTypography type={"body1"} ...props>
		{children}
	</BaseTypography>
)

 

It's pretty cool to see how decoupling works in javascript like that. 

3. Mistake: checking out from unmerged feature branch

I made a mistake of doing `checkout -b` from a previous feature branch and working on new feature. Then I pushed it and realised that unmerged feature would be part of a new PR (which shouldn't be the case obviously).

 

As there was no obvious way of undoing the push, I just created another branch (checkout -b from master branch), replicated the exact same diffs, and raised a pull request from that. And removed that previous branch. There must be an easier way, but idk!