textInputs.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = textInputs;
  4. var _statefulSelectors = _interopRequireDefault(require("../internalHelpers/_statefulSelectors"));
  5. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  6. var stateMap = [undefined, null, 'active', 'focus', 'hover'];
  7. function template(state) {
  8. return "input[type=\"color\"]" + state + ",\n input[type=\"date\"]" + state + ",\n input[type=\"datetime\"]" + state + ",\n input[type=\"datetime-local\"]" + state + ",\n input[type=\"email\"]" + state + ",\n input[type=\"month\"]" + state + ",\n input[type=\"number\"]" + state + ",\n input[type=\"password\"]" + state + ",\n input[type=\"search\"]" + state + ",\n input[type=\"tel\"]" + state + ",\n input[type=\"text\"]" + state + ",\n input[type=\"time\"]" + state + ",\n input[type=\"url\"]" + state + ",\n input[type=\"week\"]" + state + ",\n input:not([type])" + state + ",\n textarea" + state;
  9. }
  10. /**
  11. * Populates selectors that target all text inputs. You can pass optional states to append to the selectors.
  12. * @example
  13. * // Styles as object usage
  14. * const styles = {
  15. * [textInputs('active')]: {
  16. * 'border': 'none'
  17. * }
  18. * }
  19. *
  20. * // styled-components usage
  21. * const div = styled.div`
  22. * > ${textInputs('active')} {
  23. * border: none;
  24. * }
  25. * `
  26. *
  27. * // CSS in JS Output
  28. *
  29. * 'input[type="color"]:active,
  30. * input[type="date"]:active,
  31. * input[type="datetime"]:active,
  32. * input[type="datetime-local"]:active,
  33. * input[type="email"]:active,
  34. * input[type="month"]:active,
  35. * input[type="number"]:active,
  36. * input[type="password"]:active,
  37. * input[type="search"]:active,
  38. * input[type="tel"]:active,
  39. * input[type="text"]:active,
  40. * input[type="time"]:active,
  41. * input[type="url"]:active,
  42. * input[type="week"]:active,
  43. * input:not([type]):active,
  44. * textarea:active': {
  45. * 'border': 'none'
  46. * }
  47. */
  48. function textInputs() {
  49. for (var _len = arguments.length, states = new Array(_len), _key = 0; _key < _len; _key++) {
  50. states[_key] = arguments[_key];
  51. }
  52. return (0, _statefulSelectors["default"])(states, template, stateMap);
  53. }
  54. module.exports = exports.default;