diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-10-25 12:51:28 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-10-25 07:21:28 +0000 |
commit | f79727a8632490f11c1423773fdd6adfb6337a7b (patch) | |
tree | a80943f4e4e571359c8104341a3957f6e763dce4 /src/components/ui/input | |
parent | add balajiv113 as a contributor for code (#701) [skip ci] (diff) | |
download | ferdium-app-f79727a8632490f11c1423773fdd6adfb6337a7b.tar.gz ferdium-app-f79727a8632490f11c1423773fdd6adfb6337a7b.tar.zst ferdium-app-f79727a8632490f11c1423773fdd6adfb6337a7b.zip |
Transform 'AuthLayoutContainer' component hierarchy to tsx (#699)
Co-authored-by: Muhamed <>
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/components/ui/input')
-rw-r--r-- | src/components/ui/input/index.tsx | 59 |
1 files changed, 23 insertions, 36 deletions
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx index aa282cce0..b19bb4bc9 100644 --- a/src/components/ui/input/index.tsx +++ b/src/components/ui/input/index.tsx | |||
@@ -3,14 +3,12 @@ import Icon from '@mdi/react'; | |||
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import { Component, createRef, InputHTMLAttributes } from 'react'; | 4 | import { Component, createRef, InputHTMLAttributes } from 'react'; |
5 | import injectSheet, { WithStylesProps } from 'react-jss'; | 5 | import injectSheet, { WithStylesProps } from 'react-jss'; |
6 | 6 | import { noop } from 'lodash'; | |
7 | import { IFormField } from '../typings/generic'; | 7 | import { IFormField } from '../typings/generic'; |
8 | |||
9 | import Error from '../error'; | 8 | import Error from '../error'; |
10 | import Label from '../label'; | 9 | import Label from '../label'; |
11 | import Wrapper from '../wrapper'; | 10 | import Wrapper from '../wrapper'; |
12 | import { scorePasswordFunc } from './scorePassword'; | 11 | import { scorePasswordFunc } from './scorePassword'; |
13 | |||
14 | import styles from './styles'; | 12 | import styles from './styles'; |
15 | 13 | ||
16 | interface IData { | 14 | interface IData { |
@@ -26,7 +24,7 @@ interface IProps | |||
26 | suffix?: string; | 24 | suffix?: string; |
27 | scorePassword?: boolean; | 25 | scorePassword?: boolean; |
28 | showPasswordToggle?: boolean; | 26 | showPasswordToggle?: boolean; |
29 | data: IData; | 27 | data?: IData; |
30 | inputClassName?: string; | 28 | inputClassName?: string; |
31 | onEnterKey?: Function; | 29 | onEnterKey?: Function; |
32 | } | 30 | } |
@@ -37,42 +35,31 @@ interface IState { | |||
37 | } | 35 | } |
38 | 36 | ||
39 | class InputComponent extends Component<IProps, IState> { | 37 | class InputComponent extends Component<IProps, IState> { |
40 | static defaultProps = { | ||
41 | focus: false, | ||
42 | onChange: () => {}, | ||
43 | onBlur: () => {}, | ||
44 | onFocus: () => {}, | ||
45 | scorePassword: false, | ||
46 | showLabel: true, | ||
47 | showPasswordToggle: false, | ||
48 | type: 'text', | ||
49 | disabled: false, | ||
50 | }; | ||
51 | |||
52 | state = { | ||
53 | passwordScore: 0, | ||
54 | showPassword: false, | ||
55 | }; | ||
56 | |||
57 | private inputRef = createRef<HTMLInputElement>(); | 38 | private inputRef = createRef<HTMLInputElement>(); |
58 | 39 | ||
59 | componentDidMount() { | 40 | constructor(props: IProps) { |
60 | const { focus, data } = this.props; | 41 | super(props); |
42 | |||
43 | this.state = { | ||
44 | passwordScore: 0, | ||
45 | showPassword: false, | ||
46 | }; | ||
47 | } | ||
48 | |||
49 | componentDidMount(): void { | ||
50 | const { focus, data = {} } = this.props; | ||
61 | 51 | ||
62 | if (this.inputRef && this.inputRef.current) { | 52 | if (this.inputRef && this.inputRef.current) { |
63 | if (focus) { | 53 | if (focus) { |
64 | this.inputRef.current.focus(); | 54 | this.inputRef.current.focus(); |
65 | } | 55 | } |
66 | 56 | ||
67 | if (data) { | 57 | for (const key of Object.keys(data)) |
68 | Object.keys(data).map( | 58 | this.inputRef.current!.dataset[key] = data[key]; |
69 | key => (this.inputRef.current!.dataset[key] = data[key]), | ||
70 | ); | ||
71 | } | ||
72 | } | 59 | } |
73 | } | 60 | } |
74 | 61 | ||
75 | onChange(e: React.ChangeEvent<HTMLInputElement>) { | 62 | onChange(e: React.ChangeEvent<HTMLInputElement>): void { |
76 | const { scorePassword, onChange } = this.props; | 63 | const { scorePassword, onChange } = this.props; |
77 | 64 | ||
78 | if (onChange) { | 65 | if (onChange) { |
@@ -97,28 +84,28 @@ class InputComponent extends Component<IProps, IState> { | |||
97 | const { | 84 | const { |
98 | classes, | 85 | classes, |
99 | className, | 86 | className, |
100 | disabled, | ||
101 | error, | 87 | error, |
102 | id, | 88 | id, |
103 | inputClassName, | 89 | inputClassName, |
104 | label, | 90 | label, |
105 | prefix, | 91 | prefix, |
106 | scorePassword, | ||
107 | suffix, | 92 | suffix, |
108 | showLabel, | ||
109 | showPasswordToggle, | ||
110 | type, | ||
111 | value, | 93 | value, |
112 | name, | 94 | name, |
113 | placeholder, | 95 | placeholder, |
114 | spellCheck, | 96 | spellCheck, |
115 | onBlur, | ||
116 | onFocus, | ||
117 | min, | 97 | min, |
118 | max, | 98 | max, |
119 | step, | 99 | step, |
120 | required, | 100 | required, |
121 | noMargin, | 101 | noMargin, |
102 | onBlur = noop, | ||
103 | onFocus = noop, | ||
104 | scorePassword = false, | ||
105 | showLabel = true, | ||
106 | showPasswordToggle = false, | ||
107 | type = 'text', | ||
108 | disabled = false, | ||
122 | } = this.props; | 109 | } = this.props; |
123 | 110 | ||
124 | const { showPassword, passwordScore } = this.state; | 111 | const { showPassword, passwordScore } = this.state; |