diff options
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/ColorPickerInput.tsx | 34 | ||||
-rw-r--r-- | src/components/ui/Input.tsx (renamed from src/components/ui/Input.js) | 103 | ||||
-rw-r--r-- | src/components/ui/input/index.tsx | 16 |
3 files changed, 78 insertions, 75 deletions
diff --git a/src/components/ui/ColorPickerInput.tsx b/src/components/ui/ColorPickerInput.tsx index 710d05586..7e3965331 100644 --- a/src/components/ui/ColorPickerInput.tsx +++ b/src/components/ui/ColorPickerInput.tsx | |||
@@ -1,8 +1,8 @@ | |||
1 | import { ChangeEvent, Component } from 'react'; | 1 | import { ChangeEvent, Component, createRef, RefObject } from 'react'; |
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import { Field } from 'mobx-react-form'; | ||
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
5 | import { SliderPicker } from 'react-color'; | 4 | import { SliderPicker } from 'react-color'; |
5 | import { Field } from '../../@types/mobx-form.types'; | ||
6 | 6 | ||
7 | interface IProps { | 7 | interface IProps { |
8 | field: Field; | 8 | field: Field; |
@@ -11,27 +11,27 @@ interface IProps { | |||
11 | } | 11 | } |
12 | 12 | ||
13 | class ColorPickerInput extends Component<IProps> { | 13 | class ColorPickerInput extends Component<IProps> { |
14 | static defaultProps = { | 14 | private inputElement: RefObject<HTMLInputElement> = |
15 | className: null, | 15 | createRef<HTMLInputElement>(); |
16 | focus: false, | ||
17 | }; | ||
18 | |||
19 | inputElement: HTMLInputElement | null | undefined; | ||
20 | 16 | ||
21 | componentDidMount() { | 17 | componentDidMount() { |
22 | if (this.props.focus) { | 18 | const { focus = false } = this.props; |
19 | if (focus) { | ||
23 | this.focus(); | 20 | this.focus(); |
24 | } | 21 | } |
25 | } | 22 | } |
26 | 23 | ||
27 | onChange(e: ChangeEvent<HTMLInputElement>) { | 24 | onChange(e: ChangeEvent<HTMLInputElement>) { |
28 | const { field } = this.props; | 25 | const { field } = this.props; |
29 | 26 | if (field.onChange) { | |
30 | field.onChange(e); | 27 | field.onChange(e); |
28 | } | ||
31 | } | 29 | } |
32 | 30 | ||
33 | focus() { | 31 | focus() { |
34 | this.inputElement?.focus(); | 32 | if (this.inputElement && this.inputElement.current) { |
33 | this.inputElement.current.focus(); | ||
34 | } | ||
35 | } | 35 | } |
36 | 36 | ||
37 | handleChangeComplete = (color: { hex: string }) => { | 37 | handleChangeComplete = (color: { hex: string }) => { |
@@ -40,7 +40,7 @@ class ColorPickerInput extends Component<IProps> { | |||
40 | }; | 40 | }; |
41 | 41 | ||
42 | render() { | 42 | render() { |
43 | const { field, className } = this.props; | 43 | const { field, className = null } = this.props; |
44 | 44 | ||
45 | let { type } = field; | 45 | let { type } = field; |
46 | type = 'text'; | 46 | type = 'text'; |
@@ -64,9 +64,7 @@ class ColorPickerInput extends Component<IProps> { | |||
64 | placeholder={field.placeholder} | 64 | placeholder={field.placeholder} |
65 | onBlur={field.onBlur} | 65 | onBlur={field.onBlur} |
66 | onFocus={field.onFocus} | 66 | onFocus={field.onFocus} |
67 | ref={(element: HTMLInputElement | null | undefined) => { | 67 | ref={this.inputElement} |
68 | this.inputElement = element; | ||
69 | }} | ||
70 | disabled={field.disabled} | 68 | disabled={field.disabled} |
71 | /> | 69 | /> |
72 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> | 70 | <div className="franz-form__input-wrapper franz-form__input-wrapper__color-picker"> |
@@ -80,9 +78,7 @@ class ColorPickerInput extends Component<IProps> { | |||
80 | onChange={e => this.onChange(e)} | 78 | onChange={e => this.onChange(e)} |
81 | onBlur={field.onBlur} | 79 | onBlur={field.onBlur} |
82 | onFocus={field.onFocus} | 80 | onFocus={field.onFocus} |
83 | ref={element => { | 81 | ref={this.inputElement} |
84 | this.inputElement = element; | ||
85 | }} | ||
86 | disabled={field.disabled} | 82 | disabled={field.disabled} |
87 | /> | 83 | /> |
88 | </div> | 84 | </div> |
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.tsx index ae14493ca..78b3a9200 100644 --- a/src/components/ui/Input.js +++ b/src/components/ui/Input.tsx | |||
@@ -1,13 +1,11 @@ | |||
1 | import { Component } from 'react'; | 1 | import { ChangeEvent, Component, createRef, RefObject } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import { Field } from 'mobx-react-form'; | ||
5 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
6 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
7 | |||
8 | import { mdiEye, mdiEyeOff } from '@mdi/js'; | 5 | import { mdiEye, mdiEyeOff } from '@mdi/js'; |
9 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; | 6 | import { scorePassword as scorePasswordFunc } from '../../helpers/password-helpers'; |
10 | import Icon from './icon'; | 7 | import Icon from './icon'; |
8 | import { Field } from '../../@types/mobx-form.types'; | ||
11 | 9 | ||
12 | const messages = defineMessages({ | 10 | const messages = defineMessages({ |
13 | passwordToggle: { | 11 | passwordToggle: { |
@@ -16,46 +14,50 @@ const messages = defineMessages({ | |||
16 | }, | 14 | }, |
17 | }); | 15 | }); |
18 | 16 | ||
17 | interface IProps extends WrappedComponentProps { | ||
18 | field: Field; | ||
19 | className?: string; | ||
20 | focus?: boolean; | ||
21 | showPasswordToggle?: boolean; | ||
22 | showLabel?: boolean; | ||
23 | scorePassword?: boolean; | ||
24 | prefix?: string; | ||
25 | suffix?: string; | ||
26 | } | ||
27 | |||
28 | interface IState { | ||
29 | showPassword: boolean; | ||
30 | passwordScore: number; | ||
31 | } | ||
32 | |||
19 | // Can this file be merged into the './input/index.tsx' file? | 33 | // Can this file be merged into the './input/index.tsx' file? |
20 | class Input extends Component { | 34 | @observer |
21 | static propTypes = { | 35 | class Input extends Component<IProps, IState> { |
22 | field: PropTypes.instanceOf(Field).isRequired, | 36 | private inputElement: RefObject<HTMLInputElement> = |
23 | className: PropTypes.string, | 37 | createRef<HTMLInputElement>(); |
24 | focus: PropTypes.bool, | 38 | |
25 | showPasswordToggle: PropTypes.bool, | 39 | constructor(props: IProps) { |
26 | showLabel: PropTypes.bool, | 40 | super(props); |
27 | scorePassword: PropTypes.bool, | 41 | |
28 | prefix: PropTypes.string, | 42 | this.state = { |
29 | suffix: PropTypes.string, | 43 | showPassword: false, |
30 | }; | 44 | passwordScore: 0, |
31 | 45 | }; | |
32 | static defaultProps = { | 46 | } |
33 | className: null, | 47 | |
34 | focus: false, | 48 | componentDidMount(): void { |
35 | showPasswordToggle: false, | 49 | const { focus = false } = this.props; |
36 | showLabel: true, | 50 | if (focus) { |
37 | scorePassword: false, | ||
38 | prefix: '', | ||
39 | suffix: '', | ||
40 | }; | ||
41 | |||
42 | state = { | ||
43 | showPassword: false, | ||
44 | passwordScore: 0, | ||
45 | }; | ||
46 | |||
47 | inputElement; | ||
48 | |||
49 | componentDidMount() { | ||
50 | if (this.props.focus) { | ||
51 | this.focus(); | 51 | this.focus(); |
52 | } | 52 | } |
53 | } | 53 | } |
54 | 54 | ||
55 | onChange(e) { | 55 | onChange(e: ChangeEvent<HTMLInputElement>): void { |
56 | const { field, scorePassword } = this.props; | 56 | const { field, scorePassword } = this.props; |
57 | 57 | ||
58 | field.onChange(e); | 58 | if (field.onChange) { |
59 | field.onChange(e); | ||
60 | } | ||
59 | 61 | ||
60 | if (scorePassword) { | 62 | if (scorePassword) { |
61 | this.setState({ passwordScore: scorePasswordFunc(field.value) }); | 63 | this.setState({ passwordScore: scorePasswordFunc(field.value) }); |
@@ -63,24 +65,25 @@ class Input extends Component { | |||
63 | } | 65 | } |
64 | 66 | ||
65 | focus() { | 67 | focus() { |
66 | this.inputElement.focus(); | 68 | if (this.inputElement && this.inputElement.current) { |
69 | this.inputElement.current!.focus(); | ||
70 | } | ||
67 | } | 71 | } |
68 | 72 | ||
69 | render() { | 73 | render() { |
70 | const { | 74 | const { |
71 | field, | 75 | field, |
72 | className, | 76 | className = null, |
73 | showPasswordToggle, | 77 | showPasswordToggle = false, |
74 | showLabel, | 78 | showLabel = true, |
75 | scorePassword, | 79 | scorePassword = false, |
76 | prefix, | 80 | prefix = '', |
77 | suffix, | 81 | suffix = '', |
82 | intl, | ||
78 | } = this.props; | 83 | } = this.props; |
79 | 84 | ||
80 | const { passwordScore } = this.state; | 85 | const { passwordScore } = this.state; |
81 | 86 | ||
82 | const { intl } = this.props; | ||
83 | |||
84 | let { type } = field; | 87 | let { type } = field; |
85 | if (type === 'password' && this.state.showPassword) { | 88 | if (type === 'password' && this.state.showPassword) { |
86 | type = 'text'; | 89 | type = 'text'; |
@@ -106,9 +109,7 @@ class Input extends Component { | |||
106 | onChange={e => this.onChange(e)} | 109 | onChange={e => this.onChange(e)} |
107 | onBlur={field.onBlur} | 110 | onBlur={field.onBlur} |
108 | onFocus={field.onFocus} | 111 | onFocus={field.onFocus} |
109 | ref={element => { | 112 | ref={this.inputElement} |
110 | this.inputElement = element; | ||
111 | }} | ||
112 | disabled={field.disabled} | 113 | disabled={field.disabled} |
113 | /> | 114 | /> |
114 | {suffix && <span className="franz-form__input-suffix">{suffix}</span>} | 115 | {suffix && <span className="franz-form__input-suffix">{suffix}</span>} |
@@ -153,4 +154,4 @@ class Input extends Component { | |||
153 | } | 154 | } |
154 | } | 155 | } |
155 | 156 | ||
156 | export default injectIntl(observer(Input)); | 157 | export default injectIntl(Input); |
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx index 3bafc93e7..2a36d7aa9 100644 --- a/src/components/ui/input/index.tsx +++ b/src/components/ui/input/index.tsx | |||
@@ -1,7 +1,13 @@ | |||
1 | import { mdiEye, mdiEyeOff } from '@mdi/js'; | 1 | import { mdiEye, mdiEyeOff } from '@mdi/js'; |
2 | import Icon from '@mdi/react'; | 2 | import Icon from '@mdi/react'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import { Component, createRef, InputHTMLAttributes } from 'react'; | 4 | import { |
5 | Component, | ||
6 | createRef, | ||
7 | InputHTMLAttributes, | ||
8 | ReactElement, | ||
9 | RefObject, | ||
10 | } from 'react'; | ||
5 | import injectSheet, { WithStylesProps } from 'react-jss'; | 11 | import injectSheet, { WithStylesProps } from 'react-jss'; |
6 | import { noop } from 'lodash'; | 12 | import { noop } from 'lodash'; |
7 | import { IFormField } from '../typings/generic'; | 13 | import { IFormField } from '../typings/generic'; |
@@ -26,7 +32,7 @@ interface IProps | |||
26 | showPasswordToggle?: boolean; | 32 | showPasswordToggle?: boolean; |
27 | data?: IData; | 33 | data?: IData; |
28 | inputClassName?: string; | 34 | inputClassName?: string; |
29 | onEnterKey?: Function; | 35 | onEnterKey?: () => {}; |
30 | } | 36 | } |
31 | 37 | ||
32 | interface IState { | 38 | interface IState { |
@@ -35,7 +41,7 @@ interface IState { | |||
35 | } | 41 | } |
36 | 42 | ||
37 | class InputComponent extends Component<IProps, IState> { | 43 | class InputComponent extends Component<IProps, IState> { |
38 | private inputRef = createRef<HTMLInputElement>(); | 44 | private inputRef: RefObject<HTMLInputElement> = createRef<HTMLInputElement>(); |
39 | 45 | ||
40 | constructor(props: IProps) { | 46 | constructor(props: IProps) { |
41 | super(props); | 47 | super(props); |
@@ -73,14 +79,14 @@ class InputComponent extends Component<IProps, IState> { | |||
73 | } | 79 | } |
74 | } | 80 | } |
75 | 81 | ||
76 | onInputKeyPress(e: React.KeyboardEvent) { | 82 | onInputKeyPress(e: React.KeyboardEvent): void { |
77 | if (e.key === 'Enter') { | 83 | if (e.key === 'Enter') { |
78 | const { onEnterKey } = this.props; | 84 | const { onEnterKey } = this.props; |
79 | onEnterKey && onEnterKey(); | 85 | onEnterKey && onEnterKey(); |
80 | } | 86 | } |
81 | } | 87 | } |
82 | 88 | ||
83 | render() { | 89 | render(): ReactElement { |
84 | const { | 90 | const { |
85 | classes, | 91 | classes, |
86 | className, | 92 | className, |