switch to emotion

Author: ugogo

package.json

@@ -41,6 +41,8 @@
     "react": "^16.0.0"
   },
   "devDependencies": {
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

src/index.css

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import './index.css';
+import { Global, css } from '@emotion/core';
+import { Container, Input, Item } from './styles';
 
 const KEY_CODE = {
   BACKSPACE: 8,
@@ -104,47 +105,52 @@ export default ({ length = 4, onChange, placeholder = '·' }: Props) => {
   }, [value]);
 
   return (
-    <div
-      className='ReactInputVerificationCode__container'
-      style={
-        {
-          '--activeIndex': activeIndex,
-          '--itemsCount': length,
-          '--itemWidth': '4.5rem',
-          '--itemHeight': '5rem',
-          '--itemSpacing': '1rem',
-        } as React.CSSProperties
-      }
-    >
-      <input
-        ref={codeInputRef}
-        className='ReactInputVerificationCode__input'
-        autoComplete='one-time-code'
-        type='text'
-        inputMode='decimal'
-        id='one-time-code'
-        // use onKeyUp rather than onChange for a better control
-        // onChange is still needed to handle the autocompletion
-        // when receiving a code by SMS
-        onChange={onInputChange}
-        onKeyUp={onInputKeyUp}
-        onBlur={onInputBlur}
+    <React.Fragment>
+      <Global
+        styles={css`
+          :root {
+            --ReactInputVerificationCode-itemWidth: 4.5rem;
+            --ReactInputVerificationCode-itemHeight: 5rem;
+            --ReactInputVerificationCode-itemSpacing: 1rem;
+          }
+        `}
       />
 
-      {itemsRef.map((ref, i) => (
-        <div
-          key={i}
-          ref={ref}
-          role='button'
-          tabIndex={0}
-          className={`ReactInputVerificationCode__item ${
-            activeIndex === i ? 'is-active' : ''
-          }`}
-          onFocus={onItemFocus(i)}
-        >
-          {value[i] || placeholder}
-        </div>
-      ))}
-    </div>
+      <Container
+        // needed for styling
+        itemsCount={length}
+      >
+        <Input
+          ref={codeInputRef}
+          className='ReactInputVerificationCode__input'
+          autoComplete='one-time-code'
+          type='text'
+          inputMode='decimal'
+          id='one-time-code'
+          // use onKeyUp rather than onChange for a better control
+          // onChange is still needed to handle the autocompletion
+          // when receiving a code by SMS
+          onChange={onInputChange}
+          onKeyUp={onInputKeyUp}
+          onBlur={onInputBlur}
+          // needed for styling
+          activeIndex={activeIndex}
+        />
+
+        {itemsRef.map((ref, i) => (
+          <Item
+            key={i}
+            ref={ref}
+            role='button'
+            tabIndex={0}
+            onFocus={onItemFocus(i)}
+            // needed for emotion-styled
+            isActive={i === activeIndex}
+          >
+            {value[i] || placeholder}
+          </Item>
+        ))}
+      </Container>
+    </React.Fragment>
   );
 };

src/index.tsx

@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+
+type ContainerProps = { itemsCount: number };
+export const Container = styled.div`
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  width: ${(props: ContainerProps) => `
+    calc(var(--ReactInputVerificationCode-itemWidth) * ${props.itemsCount}
+    + var(--ReactInputVerificationCode-itemSpacing)
+    * (${props.itemsCount} - 1)
+  `}
+  );
+`;
+
+// input
+
+type InputProps = {
+  activeIndex: number;
+};
+
+export const Input = styled.input`
+  position: absolute;
+  top: 0;
+  left: ${(props: InputProps) =>
+    `calc(${props.activeIndex} * var(--ReactInputVerificationCode-itemWidth) + var(--ReactInputVerificationCode-itemSpacing) * ${props.activeIndex})`};
+  opacity: 0;
+  width: var(--ReactInputVerificationCode-itemWidth);
+  height: var(--ReactInputVerificationCode-itemHeight);
+`;
+
+// item
+
+type ItemProps = {
+  isActive: boolean;
+};
+
+export const Item = styled.div<ItemProps>`
+  width: var(--ReactInputVerificationCode-itemWidth);
+  height: var(--ReactInputVerificationCode-itemHeight);
+  padding: 0;
+  border-radius: 4px;
+  font-size: 1.5rem;
+  font-weight: 800;
+  line-height: var(--ReactInputVerificationCode-itemHeight);
+  text-align: center;
+  border: 0;
+  box-shadow: ${(props) =>
+    `inset 0 0 0 ${props.isActive ? '2px' : '1px'}
+    ${props.isActive ? '#888' : '#ccc'}`};
+  transition: box-shadow 0.2s ease-out;
+`;