diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-01-28 11:35:25 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-01-28 11:35:25 +0100 |
commit | 9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46 (patch) | |
tree | 038dc5e0a209d06e1c15c1e3c4740d5bdda96f8a /packages/forms/src/input | |
parent | Add href and type to button component (diff) | |
download | ferdium-app-9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46.tar.gz ferdium-app-9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46.tar.zst ferdium-app-9a5b313ea12bdb9dc3e3873ca3a2639bd7483e46.zip |
Update packages
Diffstat (limited to 'packages/forms/src/input')
-rw-r--r-- | packages/forms/src/input/index.tsx | 36 | ||||
-rw-r--r-- | packages/forms/src/input/scorePassword.ts | 2 |
2 files changed, 27 insertions, 11 deletions
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index 9fcf48010..cd6da3778 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx | |||
@@ -7,19 +7,25 @@ import injectSheet from 'react-jss'; | |||
7 | 7 | ||
8 | import { IFormField, IWithStyle } from '../typings/generic'; | 8 | import { IFormField, IWithStyle } from '../typings/generic'; |
9 | 9 | ||
10 | import Error from '../error'; | 10 | import { Error } from '../error'; |
11 | import Label from '../label'; | 11 | import { Label } from '../label'; |
12 | import Wrapper from '../wrapper'; | 12 | import { Wrapper } from '../wrapper'; |
13 | import scorePasswordFunc from './scorePassword'; | 13 | import { scorePasswordFunc } from './scorePassword'; |
14 | 14 | ||
15 | import styles from './styles'; | 15 | import styles from './styles'; |
16 | 16 | ||
17 | interface IData { | ||
18 | [index: string]: string; | ||
19 | } | ||
20 | |||
17 | interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle { | 21 | interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle { |
18 | focus?: boolean; | 22 | focus?: boolean; |
19 | prefix?: string; | 23 | prefix?: string; |
20 | suffix?: string; | 24 | suffix?: string; |
21 | scorePassword?: boolean; | 25 | scorePassword?: boolean; |
22 | showPasswordToggle?: boolean; | 26 | showPasswordToggle?: boolean; |
27 | data: IData; | ||
28 | inputClassName?: string; | ||
23 | } | 29 | } |
24 | 30 | ||
25 | interface IState { | 31 | interface IState { |
@@ -48,10 +54,16 @@ class InputComponent extends Component<IProps, IState> { | |||
48 | private inputRef = createRef<HTMLInputElement>(); | 54 | private inputRef = createRef<HTMLInputElement>(); |
49 | 55 | ||
50 | componentDidMount() { | 56 | componentDidMount() { |
51 | const { focus } = this.props; | 57 | const { focus, data } = this.props; |
58 | |||
59 | if (this.inputRef && this.inputRef.current) { | ||
60 | if (focus) { | ||
61 | this.inputRef.current.focus(); | ||
62 | } | ||
52 | 63 | ||
53 | if (focus && this.inputRef && this.inputRef.current) { | 64 | if (data) { |
54 | this.inputRef.current.focus(); | 65 | Object.keys(data).map(key => this.inputRef.current!.dataset[key] = data[key]); |
66 | } | ||
55 | } | 67 | } |
56 | } | 68 | } |
57 | 69 | ||
@@ -77,6 +89,7 @@ class InputComponent extends Component<IProps, IState> { | |||
77 | disabled, | 89 | disabled, |
78 | error, | 90 | error, |
79 | id, | 91 | id, |
92 | inputClassName, | ||
80 | label, | 93 | label, |
81 | prefix, | 94 | prefix, |
82 | scorePassword, | 95 | scorePassword, |
@@ -99,15 +112,17 @@ class InputComponent extends Component<IProps, IState> { | |||
99 | const inputType = type === 'password' && showPassword ? 'text' : type; | 112 | const inputType = type === 'password' && showPassword ? 'text' : type; |
100 | 113 | ||
101 | return ( | 114 | return ( |
102 | <Wrapper> | 115 | <Wrapper |
116 | className={className} | ||
117 | > | ||
103 | <Label | 118 | <Label |
104 | title={label} | 119 | title={label} |
105 | showLabel={showLabel} | 120 | showLabel={showLabel} |
106 | htmlFor={id} | 121 | htmlFor={id} |
107 | className={className} | ||
108 | > | 122 | > |
109 | <div | 123 | <div |
110 | className={classnames({ | 124 | className={classnames({ |
125 | [`${inputClassName}`]: inputClassName, | ||
111 | [`${classes.hasPasswordScore}`]: scorePassword, | 126 | [`${classes.hasPasswordScore}`]: scorePassword, |
112 | [`${classes.wrapper}`]: true, | 127 | [`${classes.wrapper}`]: true, |
113 | [`${classes.disabled}`]: disabled, | 128 | [`${classes.disabled}`]: disabled, |
@@ -122,13 +137,14 @@ class InputComponent extends Component<IProps, IState> { | |||
122 | id={id} | 137 | id={id} |
123 | type={inputType} | 138 | type={inputType} |
124 | name={name} | 139 | name={name} |
125 | value={value} | 140 | defaultValue={value as string} |
126 | placeholder={placeholder} | 141 | placeholder={placeholder} |
127 | spellCheck={spellCheck} | 142 | spellCheck={spellCheck} |
128 | className={classes.input} | 143 | className={classes.input} |
129 | ref={this.inputRef} | 144 | ref={this.inputRef} |
130 | onChange={this.onChange.bind(this)} | 145 | onChange={this.onChange.bind(this)} |
131 | onBlur={onBlur} | 146 | onBlur={onBlur} |
147 | disabled={disabled} | ||
132 | /> | 148 | /> |
133 | {suffix && ( | 149 | {suffix && ( |
134 | <span className={classes.suffix}> | 150 | <span className={classes.suffix}> |
diff --git a/packages/forms/src/input/scorePassword.ts b/packages/forms/src/input/scorePassword.ts index bdad7aa28..0b7719ec1 100644 --- a/packages/forms/src/input/scorePassword.ts +++ b/packages/forms/src/input/scorePassword.ts | |||
@@ -10,7 +10,7 @@ interface IVariations { | |||
10 | upper: boolean; | 10 | upper: boolean; |
11 | } | 11 | } |
12 | 12 | ||
13 | export default function scorePasswordFunc(password: string): number { | 13 | export function scorePasswordFunc(password: string): number { |
14 | let score: number = 0; | 14 | let score: number = 0; |
15 | if (!password) { | 15 | if (!password) { |
16 | return score; | 16 | return score; |