|
| 1 | +import React, { ElementType, forwardRef, HTMLAttributes } from 'react' |
| 2 | +import PropTypes from 'prop-types' |
| 3 | +import classNames from 'classnames' |
| 4 | + |
| 5 | +import { Colors, colorPropType } from '../Types' |
| 6 | + |
| 7 | +export interface CPlaceholderProps extends HTMLAttributes<HTMLSpanElement> { |
| 8 | + animation?: 'glow' | 'wave' |
| 9 | + /** |
| 10 | + * A string of all className you want applied to the component. |
| 11 | + */ |
| 12 | + className?: string |
| 13 | + /** |
| 14 | + * Sets the color context of the component to one of CoreUI’s themed colors. |
| 15 | + * |
| 16 | + * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string |
| 17 | + */ |
| 18 | + color?: Colors |
| 19 | + /** |
| 20 | + * Component used for the root node. Either a string to use a HTML element or a component. |
| 21 | + */ |
| 22 | + component?: string | ElementType |
| 23 | + /** |
| 24 | + * Size the component extra small, small, or large. |
| 25 | + */ |
| 26 | + size?: 'xs' | 'sm' | 'lg' |
| 27 | + /** |
| 28 | + * The number of columns on extra small devices (<576px). |
| 29 | + */ |
| 30 | + xs?: number |
| 31 | + /** |
| 32 | + * The number of columns on small devices (<768px). |
| 33 | + */ |
| 34 | + sm?: number |
| 35 | + /** |
| 36 | + * The number of columns on medium devices (<992px). |
| 37 | + */ |
| 38 | + md?: number |
| 39 | + /** |
| 40 | + * The number of columns on large devices (<1200px). |
| 41 | + */ |
| 42 | + lg?: number |
| 43 | + /** |
| 44 | + * The number of columns on X-Large devices (<1400px). |
| 45 | + */ |
| 46 | + xl?: number |
| 47 | + /** |
| 48 | + * The number of columns on XX-Large devices (≥1400px). |
| 49 | + */ |
| 50 | + xxl?: number |
| 51 | +} |
| 52 | + |
| 53 | +const BREAKPOINTS = [ |
| 54 | + 'xxl' as const, |
| 55 | + 'xl' as const, |
| 56 | + 'lg' as const, |
| 57 | + 'md' as const, |
| 58 | + 'sm' as const, |
| 59 | + 'xs' as const, |
| 60 | +] |
| 61 | + |
| 62 | +export const CPlaceholder = forwardRef<HTMLSpanElement, CPlaceholderProps>( |
| 63 | + ( |
| 64 | + { children, animation, className, color, component: Component = 'span', size, ...rest }, |
| 65 | + ref, |
| 66 | + ) => { |
| 67 | + const repsonsiveClassNames: string[] = [] |
| 68 | + |
| 69 | + BREAKPOINTS.forEach((bp) => { |
| 70 | + const breakpoint = rest[bp] |
| 71 | + delete rest[bp] |
| 72 | + |
| 73 | + const infix = bp === 'xs' ? '' : `-${bp}` |
| 74 | + |
| 75 | + if (typeof breakpoint === 'number') { |
| 76 | + repsonsiveClassNames.push(`col${infix}-${breakpoint}`) |
| 77 | + } |
| 78 | + |
| 79 | + if (typeof breakpoint === 'boolean') { |
| 80 | + repsonsiveClassNames.push(`col${infix}`) |
| 81 | + } |
| 82 | + }) |
| 83 | + |
| 84 | + const _className = classNames( |
| 85 | + animation ? `placeholder-${animation}` : 'placeholder', |
| 86 | + { |
| 87 | + [`bg-${color}`]: color, |
| 88 | + [`placeholder-${size}`]: size, |
| 89 | + }, |
| 90 | + repsonsiveClassNames, |
| 91 | + className, |
| 92 | + ) |
| 93 | + |
| 94 | + return ( |
| 95 | + <Component className={_className} {...rest} ref={ref}> |
| 96 | + {children} |
| 97 | + </Component> |
| 98 | + ) |
| 99 | + }, |
| 100 | +) |
| 101 | + |
| 102 | +CPlaceholder.propTypes = { |
| 103 | + animation: PropTypes.oneOf(['glow', 'wave']), |
| 104 | + children: PropTypes.node, |
| 105 | + className: PropTypes.string, |
| 106 | + color: colorPropType.isRequired, |
| 107 | + component: PropTypes.string, |
| 108 | + size: PropTypes.oneOf(['xs', 'sm', 'lg']), |
| 109 | +} |
| 110 | + |
| 111 | +CPlaceholder.displayName = 'CPlaceholder' |
0 commit comments