All files / Components GridSelect.js

100% Statements 10/10
100% Branches 4/4
100% Functions 4/4
100% Lines 10/10

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 68 69 70 71 72 73 74 75 76 77 78          1x                   2x   2x   2x                   2x           6x   1x             1x                           1x                   1x                  
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { WebAppsUXContext } from '../Context';
 
const GridSelect = props => {
    const {
        id,
        label,
        helpText,
        wrapperClassName,
        labelClassName,
        options,
        onSelect,
        ...rest
    } = props;
 
    const { theme } = useContext(WebAppsUXContext);
 
    const labelClasses = classNames(
        'block',
        'mb-2',
        'text-sm',
        'font-medium',
        'text-gray-700',
        'dark:text-gray-300',
        labelClassName,
    )
 
    return (
        <div className={wrapperClassName} {...rest}>
            <label className={labelClasses} htmlFor={id}>{label}</label>
            <div className={`grid grid-cols-1 md:col-span-3 sm:grid-cols-${options.length / 2} xl:grid-cols-${options.length} gap-y-2 gap-x-4 mt-1 xl:mt-0 w-full dark:text-white`}>
                {
                    Object(options).map(function (option) {
                        return (option.selected)
                            ? (
                                <div key={option.value} onClick={() => onSelect(option.value)} className={`border-2 border-white dark:border-gray-800 w-full bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform hover:-translate-y-2 cursor-pointer ring-4 ring-${theme}-600 dark:ring-${theme}-500 ring-opacity-50`}>
                                    <div className="flex justify-center h-14 p-2 bg-gray-300 dark:bg-gray-700 not-sr-only">
                                        {option.object}
                                    </div>
                                </div>
                            )
                            : (
                                <div key={option.value} onClick={() => onSelect(option.value)} className="border-2 border-white dark:border-gray-800 w-full bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform hover:-translate-y-2 cursor-pointer">
                                    <div className="flex justify-center h-14 p-2 bg-gray-300 dark:bg-gray-700 not-sr-only">
                                        {option.object}
                                    </div>
                                </div>
                            )
                    })
                }
            </div>
            {(helpText !== '') ? <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{helpText}</p> : null}
        </div>
    )
}
 
GridSelect.propTypes = {
    id: PropTypes.string,
    label: PropTypes.string,
    helpText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    wrapperClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
    labelClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
    options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
    onSelect: PropTypes.func,
}
 
GridSelect.defaultProps = {
    id: '',
    label: '',
    helpText: '',
    wrapperClassName: 'mb-6',
    labelClassName: '',
    options: [],
}
 
export default GridSelect;