src index.js

100% Statements 5/5
100% Branches 3/3
100% Functions 2/2
100% Lines 5/5
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67  
 
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
 
 
 
 
4x
 
 
6x
 
 
 
 
 
 
 
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import cx from 'classnames'
import PropTypes from 'prop-types'
 
import {ATOM_SKELETON_ANIMATIONS, ATOM_SKELETON_VARIANTS, BASE_CLASS} from './settings.js'
 
export default function AtomSkeleton({
  count = 1,
  variant = ATOM_SKELETON_VARIANTS.round,
  animation = ATOM_SKELETON_ANIMATIONS.pulse,
  style,
  width,
  height,
  ...others
}) {
  const className = cx(`${BASE_CLASS}`, {
    [`${BASE_CLASS}--pulse`]: animation === ATOM_SKELETON_ANIMATIONS.pulse,
    [`${BASE_CLASS}--wave`]: animation === ATOM_SKELETON_ANIMATIONS.wave,
    [`${BASE_CLASS}--round`]: variant === ATOM_SKELETON_VARIANTS.round,
    [`${BASE_CLASS}--circle`]: variant === ATOM_SKELETON_VARIANTS.circle
  })
  return (
    <>
      {Array.from(Array(count).keys()).map(index => (
        <span {...others} key={index} className={className} style={{...style, width, height}}>
          &zwnj;
        </span>
      ))}
    </>
  )
}
 
AtomSkeleton.displayName = 'AtomSkeleton'
 
AtomSkeleton.propTypes = {
  /**
   * Display count number of skeletons
   */
  count: PropTypes.number,
  /**
   * Set a specific width
   */
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  /**
   * Set a specific height
   */
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  /**
   * Set custom styles
   */
  style: PropTypes.object,
  /**
   * Choose between wave and pulse animation, if falsy no animation will be shown
   */
  animation: PropTypes.oneOf(Object.values(ATOM_SKELETON_ANIMATIONS)),
  /**
   * Shape the skeleton and make it look like the final user interface
   */
  variant: PropTypes.oneOf(Object.values(ATOM_SKELETON_VARIANTS))
}
 
export {
  ATOM_SKELETON_VARIANTS,
  ATOM_SKELETON_VARIANTS as atomSkeletonVariants,
  ATOM_SKELETON_ANIMATIONS,
  ATOM_SKELETON_ANIMATIONS as atomSkeletonAnimations
}