All files / shorthands textInputs.js

100% Statements 3/3
100% Branches 0/0
100% Functions 2/2
100% Lines 3/3
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      1x     6x                                                                                                                                   5x        
// @flow
import statefulSelectors from '../internalHelpers/_statefulSelectors'
 
const stateMap = [undefined, null, 'active', 'focus', 'hover']
 
function template(state) {
  return `input[type="color"]${state},
    input[type="date"]${state},
    input[type="datetime"]${state},
    input[type="datetime-local"]${state},
    input[type="email"]${state},
    input[type="month"]${state},
    input[type="number"]${state},
    input[type="password"]${state},
    input[type="search"]${state},
    input[type="tel"]${state},
    input[type="text"]${state},
    input[type="time"]${state},
    input[type="url"]${state},
    input[type="week"]${state},
    input:not([type])${state},
    textarea${state}`
}
 
/** */
type InputState =
  | typeof(undefined)
  | null
  | 'active'
  | 'focus'
  | 'hover';
 
/**
 * Populates selectors that target all text inputs. You can pass optional states to append to the selectors.
 * @example
 * // Styles as object usage
 * const styles = {
 *   [textInputs('active')]: {
 *     'border': 'none'
 *   }
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   > ${textInputs('active')} {
 *     border: none;
 *   }
 * `
 *
 * // CSS in JS Output
 *
 *  ''input[type="color"]:active,
 *  'input[type="date"]:active,
 *  'input[type="datetime"]:active,
 *  'input[type="datetime-local"]:active,
 *  'input[type="email"]:active,
 *  'input[type="month"]:active,
 *  'input[type="number"]:active,
 *  'input[type="password"]:active,
 *  'input[type="search"]:active,
 *  'input[type="tel"]:active,
 *  'input[type="text"]:active,
 *  'input[type="time"]:active,
 *  'input[type="url"]:active,
 *  'input[type="week"]:active,
 *  input:not([type]):active,
 *  textarea:active': {
 *   'border': 'none'
 * }
 */
 
function textInputs(...states: Array<InputState>) {
  return statefulSelectors(states, template, stateMap)
}
 
export default textInputs