useSpacing useSpacing.js

0% Statements 0/18

0% Branches 0/10

0% Functions 0/3

0% Lines 0/16

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useTheme } from '../useTheme/useTheme';
 
export const useSpacing = (alias) => {
  const { rootVal, space } = useTheme();
  const [key, index] = alias.split('-');
  const propID = key.charAt(0);
  const prop = propID === 'm' ? 'margin' : 'padding';
 
  switch (key) {
    case `${propID}`:
      return `${prop}: ${space[index] / rootVal}rem;`;
    case `${propID}x`:
      return `
        ${prop}-right: ${space[index] / rootVal}rem;
        ${prop}-left: ${space[index] / rootVal}rem;
      `;
    case `${propID}y`:
      return `
        ${prop}-top: ${space[index] / rootVal}rem;
        ${prop}-bottom: ${space[index] / rootVal}rem;
      `;
    case `${propID}t`:
      return `${prop}-top: ${space[index] / rootVal}rem;`;
    case `${propID}r`:
      return `${prop}-right: ${space[index] / rootVal}rem;`;
    case `${propID}b`:
      return `${prop}-bottom: ${space[index] / rootVal}rem;`;
    case `${propID}l`:
      return `${prop}-left: ${space[index] / rootVal}rem;`;
    default:
      return null;
  }
};
 
export const usePadding = (alias) => useSpacing(alias);
 
export const useMargin = (alias) => useSpacing(alias);
 
export default useSpacing;