Month: December 2020

Categories
React TypeScript

Using tableLayout CSS property with TypeScript

Using table-layout property with React and TypeScript was giving a type error like below:

ERROR in /var/jenkins/workspace/dev/resources/packages/sites/table.tsx
[tsl] ERROR in /var/jenkins/workspace/dev/resources/packages/sites/table.tsx(79,25)
      TS2322: Type '{ padding: number; width: string; margin: string; tableLayout: string; }' is not assignable to type 'CSSProperties'.
  Types of property 'tableLayout' are incompatible.
    Type 'string' is not assignable to type 'TableLayout'.

This was the styling code:

const getListStyle = () => ({
    padding: 8,
    width: '100%',
    margin: '0px auto',
    tableLayout: 'auto',
});

React/Typescript JSX code:

<table style={getListStyle()}>
    <Header />
    <Body />
</table>

For some reason, table-layout doesn’t seem to accept string values. Although, as per the doc, it should be accepted.

This is the full typescript error reported by the IDE on the style attribute:

TS2322: Type ‘{ padding: number; width: string; margin: string; tableLayout: string; }’ is not assignable to type ‘CSSProperties’.   Types of property ‘tableLayout’ are incompatible.     Type ‘string’ is not assignable to type ‘TableLayout’. index.d.ts(1765, 9): The expected type comes from property ‘style’ which is declared here on type ‘DetailedHTMLProps, HTMLTableElement>’

The fix was to simply add the return type CSSProperties explicity like this:

const getListStyle = (): CSSProperties => ({
    padding: 8,
    width: '100%',
    margin: '0px auto',
    tableLayout: 'auto',
});

Categories
Web Development

CSS Flip Animation for Font Awesome Icons

This flip animation will be a perfect use-case for enable/disable UI actions.

We’ll be using rotateY transform function to achieve this flip animation.

Here is a simple HTML page with a few font awesome icons in both enabled and disabled states (we’ll be adding CSS for these states later) and jquery included for click actions.

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
  </head>
  <body>
    <i class="fa fa-envelope enabled"></i>
    <i class="fa fa-comment-alt enabled"></i>
    <i class="fa fa-camera disabled"></i>
    <i class="fa fa-bell disabled"></i>
  </body> 
</html>

Here is the CSS for enabled and disabled states with the rotateY animation.

.flip {
    animation: flip-icon 0.3s ease-in-out;
}

body {
  text-align: center; 
  width: 100%;
}

.fa {
  cursor: pointer;
  font-size: 48px; 
  margin: 24px;
}

.fa.enabled {
     color: #f44336;
 }
 .fa.disabled {
     color: grey;
 }

@keyframes flip-icon {
    0% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

Here is the relevant click actions that will add or remove appropriate classes to start and reset the animation.

 $('body').on('click', '.fa.enabled, .fa.disabled', function iconClick() {
            const icon = $(this);
            icon.addClass('flip');
            setTimeout(() => { icon.removeClass('flip'); }, 300);
            if (icon.hasClass('enabled')) {
                setTimeout(() => {  
                  icon.removeClass('enabled');
                  icon.addClass('disabled'); 
                }, 150);
            } else {
              setTimeout(() => {  
                  icon.removeClass('disabled');
                  icon.addClass('enabled'); 
                }, 150);
            }
        });

Once you have the above code, you’ll achieve something like this:

Full Source Code can be found in this pen.