-
-
Notifications
You must be signed in to change notification settings - Fork 209
/
textInputs.js
76 lines (70 loc) · 1.84 KB
/
textInputs.js
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
// @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