diff options
author | Muhamed <unknown> | 2022-11-08 07:40:02 +0530 |
---|---|---|
committer | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2022-11-08 17:25:27 +0530 |
commit | 570d26baf9e4ad87a8c0752b5edfb5c441bf9d80 (patch) | |
tree | ee0a0e6bec7d10ec438b5269537905fee80c377b /src/components/ui | |
parent | refactor: remove toggle component's duplicate (diff) | |
download | ferdium-app-570d26baf9e4ad87a8c0752b5edfb5c441bf9d80.tar.gz ferdium-app-570d26baf9e4ad87a8c0752b5edfb5c441bf9d80.tar.zst ferdium-app-570d26baf9e4ad87a8c0752b5edfb5c441bf9d80.zip |
fix: slack issue caused by input TS conversion
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/imageUpload/index.tsx (renamed from src/components/ui/ImageUpload.tsx) | 100 | ||||
-rw-r--r-- | src/components/ui/toggle/index.tsx | 17 |
2 files changed, 60 insertions, 57 deletions
diff --git a/src/components/ui/ImageUpload.tsx b/src/components/ui/imageUpload/index.tsx index 7732928f8..7a2ca747f 100644 --- a/src/components/ui/ImageUpload.tsx +++ b/src/components/ui/imageUpload/index.tsx | |||
@@ -1,15 +1,15 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, InputHTMLAttributes } 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 Dropzone from 'react-dropzone'; | 4 | import Dropzone from 'react-dropzone'; |
6 | import { mdiDelete, mdiFileImage } from '@mdi/js'; | 5 | import { mdiDelete, mdiFileImage } from '@mdi/js'; |
7 | import prettyBytes from 'pretty-bytes'; | 6 | import prettyBytes from 'pretty-bytes'; |
8 | import { isWindows } from '../../environment'; | 7 | import { noop } from 'lodash'; |
9 | import Icon from './icon'; | 8 | import { isWindows } from '../../../environment'; |
9 | import Icon from '../icon'; | ||
10 | import { IFormField } from '../typings/generic'; | ||
10 | 11 | ||
11 | type Props = { | 12 | interface IProps extends InputHTMLAttributes<HTMLInputElement>, IFormField { |
12 | field: typeof Field; | ||
13 | className: string; | 13 | className: string; |
14 | multiple: boolean; | 14 | multiple: boolean; |
15 | textDelete: string; | 15 | textDelete: string; |
@@ -19,39 +19,43 @@ type Props = { | |||
19 | maxSize?: number; | 19 | maxSize?: number; |
20 | maxFiles?: number; | 20 | maxFiles?: number; |
21 | messages: any; | 21 | messages: any; |
22 | }; | 22 | set?: (value: string) => void; |
23 | } | ||
23 | 24 | ||
24 | // Should this file be converted into the coding style similar to './toggle/index.tsx'? | 25 | interface IState { |
25 | class ImageUpload extends Component<Props> { | 26 | path: string | null; |
26 | static defaultProps = { | 27 | errorState: boolean; |
27 | multiple: false, | 28 | errorMessage: { message: string }; |
28 | maxSize: Number.POSITIVE_INFINITY, | 29 | } |
29 | maxFiles: 0, | ||
30 | }; | ||
31 | 30 | ||
32 | state = { | 31 | // TODO - drag and drop image for recipe add/edit not working from 6.2.0 need to look at it |
33 | path: null, | 32 | @observer |
34 | errorState: false, | 33 | class ImageUpload extends Component<IProps, IState> { |
35 | }; | 34 | constructor(props: IProps) { |
35 | super(props); | ||
36 | 36 | ||
37 | errorMessage = { | 37 | this.state = { |
38 | message: '', | 38 | path: null, |
39 | }; | 39 | errorState: false, |
40 | errorMessage: { | ||
41 | message: '', | ||
42 | }, | ||
43 | }; | ||
44 | } | ||
40 | 45 | ||
41 | onDropAccepted(acceptedFiles) { | 46 | onDropAccepted(acceptedFiles): void { |
42 | const { field } = this.props; | 47 | const { onDrop = noop, set = noop } = this.props; |
43 | this.setState({ errorState: false }); | 48 | this.setState({ errorState: false }); |
44 | 49 | ||
45 | for (const file of acceptedFiles) { | 50 | for (const file of acceptedFiles) { |
46 | const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path; | 51 | const imgPath: string = isWindows |
47 | this.setState({ | 52 | ? file.path.replace(/\\/g, '/') |
48 | path: imgPath, | 53 | : file.path; |
49 | }); | 54 | this.setState({ path: imgPath }); |
50 | 55 | onDrop(file); | |
51 | this.props.field.onDrop(file); | ||
52 | } | 56 | } |
53 | 57 | ||
54 | field.set(''); | 58 | set(''); |
55 | } | 59 | } |
56 | 60 | ||
57 | onDropRejected(rejectedFiles): void { | 61 | onDropRejected(rejectedFiles): void { |
@@ -59,11 +63,11 @@ class ImageUpload extends Component<Props> { | |||
59 | for (const error of file.errors) { | 63 | for (const error of file.errors) { |
60 | if (error.code === 'file-too-large') { | 64 | if (error.code === 'file-too-large') { |
61 | this.setState({ errorState: true }); | 65 | this.setState({ errorState: true }); |
62 | this.setState( | 66 | this.setState({ |
63 | (this.errorMessage = { | 67 | errorMessage: { |
64 | message: this.props.textMaxFileSizeError, | 68 | message: this.props.textMaxFileSizeError, |
65 | }), | 69 | }, |
66 | ); | 70 | }); |
67 | } | 71 | } |
68 | } | 72 | } |
69 | } | 73 | } |
@@ -71,14 +75,16 @@ class ImageUpload extends Component<Props> { | |||
71 | 75 | ||
72 | render() { | 76 | render() { |
73 | const { | 77 | const { |
74 | field, | ||
75 | className, | 78 | className, |
76 | multiple, | 79 | multiple = false, |
77 | textDelete, | 80 | textDelete, |
78 | textUpload, | 81 | textUpload, |
79 | textMaxFileSize, | 82 | textMaxFileSize, |
80 | maxSize, | 83 | value, |
81 | maxFiles, | 84 | maxSize = Number.POSITIVE_INFINITY, |
85 | maxFiles = 0, | ||
86 | label = '', | ||
87 | set = noop, | ||
82 | } = this.props; | 88 | } = this.props; |
83 | 89 | ||
84 | const cssClasses = classnames({ | 90 | const cssClasses = classnames({ |
@@ -94,27 +100,25 @@ class ImageUpload extends Component<Props> { | |||
94 | return ( | 100 | return ( |
95 | <div className="image-upload-wrapper"> | 101 | <div className="image-upload-wrapper"> |
96 | <label className="franz-form__label" htmlFor="iconUpload"> | 102 | <label className="franz-form__label" htmlFor="iconUpload"> |
97 | {field.label} | 103 | {label} |
98 | </label> | 104 | </label> |
99 | <div className="image-upload"> | 105 | <div className="image-upload"> |
100 | {(field.value && field.value !== 'delete') || this.state.path ? ( | 106 | {(value && value !== 'delete') || this.state.path ? ( |
101 | <> | 107 | <> |
102 | <div | 108 | <div |
103 | className="image-upload__preview" | 109 | className="image-upload__preview" |
104 | style={{ | 110 | style={{ |
105 | backgroundImage: `url("${this.state.path || field.value}")`, | 111 | backgroundImage: `url("${this.state.path || value}")`, |
106 | }} | 112 | }} |
107 | /> | 113 | /> |
108 | <div className="image-upload__action"> | 114 | <div className="image-upload__action"> |
109 | <button | 115 | <button |
110 | type="button" | 116 | type="button" |
111 | onClick={() => { | 117 | onClick={() => { |
112 | if (field.value) { | 118 | if (value) { |
113 | field.set('delete'); | 119 | set('delete'); |
114 | } else { | 120 | } else { |
115 | this.setState({ | 121 | this.setState({ path: null }); |
116 | path: null, | ||
117 | }); | ||
118 | } | 122 | } |
119 | }} | 123 | }} |
120 | > | 124 | > |
@@ -152,7 +156,7 @@ class ImageUpload extends Component<Props> { | |||
152 | )} | 156 | )} |
153 | {this.state.errorState && ( | 157 | {this.state.errorState && ( |
154 | <span className="image-upload-wrapper__file-size-error"> | 158 | <span className="image-upload-wrapper__file-size-error"> |
155 | {this.errorMessage.message} | 159 | {this.state.errorMessage.message} |
156 | </span> | 160 | </span> |
157 | )} | 161 | )} |
158 | </div> | 162 | </div> |
@@ -160,4 +164,4 @@ class ImageUpload extends Component<Props> { | |||
160 | } | 164 | } |
161 | } | 165 | } |
162 | 166 | ||
163 | export default observer(ImageUpload); | 167 | export default ImageUpload; |
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx index fee8adbc7..828941886 100644 --- a/src/components/ui/toggle/index.tsx +++ b/src/components/ui/toggle/index.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Property } from 'csstype'; | 2 | import { Property } from 'csstype'; |
3 | import { noop } from 'lodash'; | 3 | import { noop } from 'lodash'; |
4 | import { Component, InputHTMLAttributes } from 'react'; | 4 | import { Component, InputHTMLAttributes, ReactElement } from 'react'; |
5 | import withStyles, { WithStylesProps } from 'react-jss'; | 5 | import withStyles, { WithStylesProps } from 'react-jss'; |
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
7 | import Error from '../error'; | 7 | import Error from '../error'; |
@@ -10,11 +10,10 @@ import { IFormField } from '../typings/generic'; | |||
10 | import Wrapper from '../wrapper'; | 10 | import Wrapper from '../wrapper'; |
11 | 11 | ||
12 | interface IProps | 12 | interface IProps |
13 | extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>, | 13 | extends InputHTMLAttributes<HTMLInputElement>, |
14 | IFormField, | 14 | IFormField, |
15 | WithStylesProps<typeof styles> { | 15 | WithStylesProps<typeof styles> { |
16 | className?: string; | 16 | className?: string; |
17 | value: boolean | undefined; // due to type capability between InputHTMLAttributes and mobx-react-form | ||
18 | } | 17 | } |
19 | 18 | ||
20 | const buttonTransition: string = | 19 | const buttonTransition: string = |
@@ -62,8 +61,8 @@ const styles = (theme: Theme) => ({ | |||
62 | }, | 61 | }, |
63 | }); | 62 | }); |
64 | 63 | ||
65 | class ToggleComponent extends Component<IProps> { | 64 | class Toggle extends Component<IProps> { |
66 | render() { | 65 | render(): ReactElement { |
67 | const { | 66 | const { |
68 | classes, | 67 | classes, |
69 | className, | 68 | className, |
@@ -71,7 +70,7 @@ class ToggleComponent extends Component<IProps> { | |||
71 | name = '', | 70 | name = '', |
72 | label = '', | 71 | label = '', |
73 | error = '', | 72 | error = '', |
74 | value = false, | 73 | checked = false, |
75 | showLabel = true, | 74 | showLabel = true, |
76 | disabled = false, | 75 | disabled = false, |
77 | onChange = noop, | 76 | onChange = noop, |
@@ -94,14 +93,14 @@ class ToggleComponent extends Component<IProps> { | |||
94 | <div | 93 | <div |
95 | className={classnames({ | 94 | className={classnames({ |
96 | [`${classes.button}`]: true, | 95 | [`${classes.button}`]: true, |
97 | [`${classes.buttonActive}`]: value, | 96 | [`${classes.buttonActive}`]: checked, |
98 | })} | 97 | })} |
99 | /> | 98 | /> |
100 | <input | 99 | <input |
101 | type="checkbox" | 100 | type="checkbox" |
102 | id={id} | 101 | id={id} |
103 | name={name} | 102 | name={name} |
104 | checked={value as boolean | undefined} | 103 | checked={checked} |
105 | className={classes.input} | 104 | className={classes.input} |
106 | onChange={onChange} | 105 | onChange={onChange} |
107 | disabled={disabled} | 106 | disabled={disabled} |
@@ -114,4 +113,4 @@ class ToggleComponent extends Component<IProps> { | |||
114 | } | 113 | } |
115 | } | 114 | } |
116 | 115 | ||
117 | export default withStyles(styles, { injectTheme: true })(ToggleComponent); | 116 | export default withStyles(styles, { injectTheme: true })(Toggle); |