diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-01-14 22:26:06 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-01-14 22:26:06 +0100 |
commit | 8b4231e3109d4b29e4d90f4553f718a1d7867bc5 (patch) | |
tree | b7c89bd60d01cca3692a3e6df580669fd08a4b27 /packages/forms/src/input | |
parent | Update package.json (diff) | |
download | ferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.tar.gz ferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.tar.zst ferdium-app-8b4231e3109d4b29e4d90f4553f718a1d7867bc5.zip |
Add buttons
Diffstat (limited to 'packages/forms/src/input')
-rw-r--r-- | packages/forms/src/input/index.tsx | 34 | ||||
-rw-r--r-- | packages/forms/src/input/styles.ts | 6 |
2 files changed, 21 insertions, 19 deletions
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index d82ee5fe3..8f17ba2f9 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -34,6 +34,7 @@ class InputComponent extends Component<IProps, IState> { | |||
34 | public static defaultProps = { | 34 | public static defaultProps = { |
35 | focus: false, | 35 | focus: false, |
36 | onChange: () => {}, | 36 | onChange: () => {}, |
37 | onBlur: () => {}, | ||
37 | scorePassword: false, | 38 | scorePassword: false, |
38 | showLabel: true, | 39 | showLabel: true, |
39 | showPasswordToggle: false, | 40 | showPasswordToggle: false, |
@@ -74,6 +75,7 @@ class InputComponent extends Component<IProps, IState> { | |||
74 | render() { | 75 | render() { |
75 | const { | 76 | const { |
76 | classes, | 77 | classes, |
78 | className, | ||
77 | disabled, | 79 | disabled, |
78 | error, | 80 | error, |
79 | id, | 81 | id, |
@@ -84,6 +86,11 @@ class InputComponent extends Component<IProps, IState> { | |||
84 | showLabel, | 86 | showLabel, |
85 | showPasswordToggle, | 87 | showPasswordToggle, |
86 | type, | 88 | type, |
89 | value, | ||
90 | name, | ||
91 | placeholder, | ||
92 | spellCheck, | ||
93 | onBlur, | ||
87 | } = this.props; | 94 | } = this.props; |
88 | 95 | ||
89 | const { | 96 | const { |
@@ -91,18 +98,7 @@ class InputComponent extends Component<IProps, IState> { | |||
91 | passwordScore, | 98 | passwordScore, |
92 | } = this.state; | 99 | } = this.state; |
93 | 100 | ||
94 | const inputProps = pick(this.props, htmlElementAttributes['input']); | 101 | const inputType = type === 'password' && showPassword ? 'text' : type; |
95 | |||
96 | if (type === 'password' && showPassword) { | ||
97 | inputProps.type = 'text'; | ||
98 | } | ||
99 | |||
100 | inputProps.onChange = this.onChange.bind(this); | ||
101 | |||
102 | const cssClasses = classnames({ | ||
103 | [`${inputProps.className}`]: inputProps.className, | ||
104 | [`${classes.input}`]: true, | ||
105 | }); | ||
106 | 102 | ||
107 | return ( | 103 | return ( |
108 | <Wrapper> | 104 | <Wrapper> |
@@ -110,10 +106,11 @@ class InputComponent extends Component<IProps, IState> { | |||
110 | title={label} | 106 | title={label} |
111 | showLabel={showLabel} | 107 | showLabel={showLabel} |
112 | htmlFor={id} | 108 | htmlFor={id} |
109 | className={className} | ||
113 | > | 110 | > |
114 | <div | 111 | <div |
115 | className={classnames({ | 112 | className={classnames({ |
116 | [`${classes.hasPasswordScore}`]: showPasswordToggle, | 113 | [`${classes.hasPasswordScore}`]: scorePassword, |
117 | [`${classes.wrapper}`]: true, | 114 | [`${classes.wrapper}`]: true, |
118 | [`${classes.disabled}`]: disabled, | 115 | [`${classes.disabled}`]: disabled, |
119 | [`${classes.hasError}`]: error, | 116 | [`${classes.hasError}`]: error, |
@@ -124,9 +121,16 @@ class InputComponent extends Component<IProps, IState> { | |||
124 | </span> | 121 | </span> |
125 | )} | 122 | )} |
126 | <input | 123 | <input |
127 | {...inputProps} | 124 | id={id} |
128 | className={cssClasses} | 125 | type={inputType} |
126 | name={name} | ||
127 | value={value} | ||
128 | placeholder={placeholder} | ||
129 | spellCheck={spellCheck} | ||
130 | className={classes.input} | ||
129 | ref={this.inputRef} | 131 | ref={this.inputRef} |
132 | onChange={this.onChange.bind(this)} | ||
133 | onBlur={onBlur} | ||
130 | /> | 134 | /> |
131 | {suffix && ( | 135 | {suffix && ( |
132 | <span className={classes.suffix}> | 136 | <span className={classes.suffix}> |
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts index 2b34e92c3..a64d2c340 100644 --- a/packages/forms/src/input/styles.ts +++ b/packages/forms/src/input/styles.ts | |||
@@ -6,12 +6,10 @@ const prefixStyles = (theme: Theme) => ({ | |||
6 | color: theme.inputPrefixColor, | 6 | color: theme.inputPrefixColor, |
7 | lineHeight: theme.inputHeight, | 7 | lineHeight: theme.inputHeight, |
8 | padding: '0 10px', | 8 | padding: '0 10px', |
9 | fontSize: theme.uiFontSize, | ||
9 | }); | 10 | }); |
10 | 11 | ||
11 | export default (theme: Theme) => ({ | 12 | export default (theme: Theme) => ({ |
12 | container: { | ||
13 | // display: 'flex', | ||
14 | }, | ||
15 | disabled: { | 13 | disabled: { |
16 | opacity: theme.inputDisabledOpacity, | 14 | opacity: theme.inputDisabledOpacity, |
17 | }, | 15 | }, |
@@ -33,7 +31,7 @@ export default (theme: Theme) => ({ | |||
33 | input: { | 31 | input: { |
34 | background: 'none', | 32 | background: 'none', |
35 | border: 0, | 33 | border: 0, |
36 | fontSize: theme.inputFontSize, | 34 | fontSize: theme.uiFontSize, |
37 | outline: 'none', | 35 | outline: 'none', |
38 | padding: 8, | 36 | padding: 8, |
39 | width: '100%', | 37 | width: '100%', |