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 | |
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')
-rw-r--r-- | src/components/ui/AppLoader/index.tsx | 68 | ||||
-rw-r--r-- | src/components/ui/AppLoader/styles.ts | 9 | ||||
-rw-r--r-- | src/components/ui/InfoBar.tsx (renamed from src/components/ui/InfoBar.js) | 70 | ||||
-rw-r--r-- | src/components/ui/Modal/index.tsx | 36 | ||||
-rw-r--r-- | src/components/ui/headline/index.tsx | 15 | ||||
-rw-r--r-- | src/components/ui/icon/index.tsx | 10 | ||||
-rw-r--r-- | src/components/ui/input/index.tsx | 59 |
7 files changed, 117 insertions, 150 deletions
diff --git a/src/components/ui/AppLoader/index.tsx b/src/components/ui/AppLoader/index.tsx index caa7e381d..f4d9b8e73 100644 --- a/src/components/ui/AppLoader/index.tsx +++ b/src/components/ui/AppLoader/index.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | 3 | import withStyles, { WithStylesProps } from 'react-jss'; | |
4 | import injectStyle from 'react-jss'; | 4 | import { Theme } from '../../../themes'; |
5 | import FullscreenLoader from '../FullscreenLoader'; | 5 | import FullscreenLoader from '../FullscreenLoader'; |
6 | import shuffleArray from '../../../helpers/array-helpers'; | 6 | import shuffleArray from '../../../helpers/array-helpers'; |
7 | 7 | ||
@@ -18,24 +18,27 @@ const textList = shuffleArray([ | |||
18 | 'Fixing bugs', | 18 | 'Fixing bugs', |
19 | ]); | 19 | ]); |
20 | 20 | ||
21 | type Props = { | 21 | interface IProps extends WithStylesProps<typeof styles> { |
22 | classes: typeof styles; | 22 | theme: Theme; |
23 | theme: any; | 23 | texts?: string[]; |
24 | texts: string[]; | 24 | } |
25 | }; | ||
26 | |||
27 | class AppLoader extends Component<Props> { | ||
28 | static defaultProps = { | ||
29 | texts: textList, | ||
30 | }; | ||
31 | 25 | ||
32 | state = { | 26 | interface IState { |
33 | step: 0, | 27 | step: number; |
34 | }; | 28 | } |
35 | 29 | ||
30 | class AppLoader extends Component<IProps, IState> { | ||
36 | interval: NodeJS.Timeout | null = null; | 31 | interval: NodeJS.Timeout | null = null; |
37 | 32 | ||
38 | componentDidMount() { | 33 | constructor(props: IProps) { |
34 | super(props); | ||
35 | |||
36 | this.state = { | ||
37 | step: 0, | ||
38 | }; | ||
39 | } | ||
40 | |||
41 | componentDidMount(): void { | ||
39 | this.interval = setInterval(() => { | 42 | this.interval = setInterval(() => { |
40 | this.setState((prevState: { step: number }) => ({ | 43 | this.setState((prevState: { step: number }) => ({ |
41 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, | 44 | step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, |
@@ -43,14 +46,14 @@ class AppLoader extends Component<Props> { | |||
43 | }, 2500); | 46 | }, 2500); |
44 | } | 47 | } |
45 | 48 | ||
46 | componentWillUnmount() { | 49 | componentWillUnmount(): void { |
47 | if (this.interval) { | 50 | if (this.interval) { |
48 | clearInterval(this.interval); | 51 | clearInterval(this.interval); |
49 | } | 52 | } |
50 | } | 53 | } |
51 | 54 | ||
52 | render() { | 55 | render(): ReactElement { |
53 | const { classes, theme, texts } = this.props; | 56 | const { classes, theme, texts = textList } = this.props; |
54 | const { step } = this.state; | 57 | const { step } = this.state; |
55 | 58 | ||
56 | return ( | 59 | return ( |
@@ -58,20 +61,21 @@ class AppLoader extends Component<Props> { | |||
58 | className={classes.component} | 61 | className={classes.component} |
59 | spinnerColor={theme.colorAppLoaderSpinner} | 62 | spinnerColor={theme.colorAppLoaderSpinner} |
60 | > | 63 | > |
61 | {texts.map((text, i) => ( | 64 | {texts && |
62 | <span | 65 | texts.map((text, i) => ( |
63 | key={text} | 66 | <span |
64 | className={classnames({ | 67 | key={text} |
65 | [`${classes.slogan}`]: true, | 68 | className={classnames({ |
66 | [`${classes.visible}`]: step === i, | 69 | [`${classes.slogan}`]: true, |
67 | })} | 70 | [`${classes.visible}`]: step === i, |
68 | > | 71 | })} |
69 | {text} | 72 | > |
70 | </span> | 73 | {text} |
71 | ))} | 74 | </span> |
75 | ))} | ||
72 | </FullscreenLoader> | 76 | </FullscreenLoader> |
73 | ); | 77 | ); |
74 | } | 78 | } |
75 | } | 79 | } |
76 | 80 | ||
77 | export default injectStyle(styles, { injectTheme: true })(AppLoader); | 81 | export default withStyles(styles, { injectTheme: true })(AppLoader); |
diff --git a/src/components/ui/AppLoader/styles.ts b/src/components/ui/AppLoader/styles.ts index 9891e0387..6bf3b4f3c 100644 --- a/src/components/ui/AppLoader/styles.ts +++ b/src/components/ui/AppLoader/styles.ts | |||
@@ -1,8 +1,7 @@ | |||
1 | let sloganTransition = 'none'; | 1 | const sloganTransition = |
2 | 2 | window && window.matchMedia('(prefers-reduced-motion: no-preference)') | |
3 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | 3 | ? 'opacity 1s ease' |
4 | sloganTransition = 'opacity 1s ease'; | 4 | : 'none'; |
5 | } | ||
6 | 5 | ||
7 | export default { | 6 | export default { |
8 | component: { | 7 | component: { |
diff --git a/src/components/ui/InfoBar.js b/src/components/ui/InfoBar.tsx index d73491da0..ef8f6ad6f 100644 --- a/src/components/ui/InfoBar.js +++ b/src/components/ui/InfoBar.tsx | |||
@@ -1,11 +1,11 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, MouseEventHandler, ReactNode } from 'react'; |
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
4 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
5 | import Loader from 'react-loader'; | 4 | import Loader from 'react-loader'; |
6 | import { defineMessages, injectIntl } from 'react-intl'; | 5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
7 | 6 | ||
8 | import { mdiClose } from '@mdi/js'; | 7 | import { mdiClose } from '@mdi/js'; |
8 | import { noop } from 'lodash'; | ||
9 | import Appear from './effects/Appear'; | 9 | import Appear from './effects/Appear'; |
10 | import Icon from './icon'; | 10 | import Icon from './icon'; |
11 | 11 | ||
@@ -16,51 +16,35 @@ const messages = defineMessages({ | |||
16 | }, | 16 | }, |
17 | }); | 17 | }); |
18 | 18 | ||
19 | // Should this file be converted into the coding style similar to './toggle/index.tsx'? | 19 | interface IProps extends WrappedComponentProps { |
20 | class InfoBar extends Component { | 20 | children: ReactNode; |
21 | static propTypes = { | 21 | onClick?: MouseEventHandler<HTMLButtonElement>; |
22 | // eslint-disable-next-line react/forbid-prop-types | 22 | type?: string; |
23 | children: PropTypes.any.isRequired, | 23 | className?: string; |
24 | onClick: PropTypes.func, | 24 | ctaLabel?: string; |
25 | type: PropTypes.string, | 25 | ctaLoading?: boolean; |
26 | className: PropTypes.string, | 26 | position?: string; |
27 | ctaLabel: PropTypes.string, | 27 | sticky?: boolean; |
28 | ctaLoading: PropTypes.bool, | 28 | onHide?: () => void; |
29 | position: PropTypes.string, | 29 | } |
30 | sticky: PropTypes.bool, | ||
31 | onHide: PropTypes.func, | ||
32 | }; | ||
33 | |||
34 | static defaultProps = { | ||
35 | onClick: () => null, | ||
36 | type: 'primary', | ||
37 | className: '', | ||
38 | ctaLabel: '', | ||
39 | ctaLoading: false, | ||
40 | position: 'bottom', | ||
41 | sticky: false, | ||
42 | onHide: () => null, | ||
43 | }; | ||
44 | 30 | ||
31 | @observer | ||
32 | class InfoBar extends Component<IProps> { | ||
45 | render() { | 33 | render() { |
46 | const { | 34 | const { |
47 | children, | 35 | children, |
48 | type, | 36 | type = 'primary', |
49 | className, | 37 | onClick = noop, |
50 | ctaLabel, | 38 | className = '', |
51 | ctaLoading, | 39 | ctaLabel = '', |
52 | onClick, | 40 | ctaLoading = false, |
53 | position, | 41 | position = 'bottom', |
54 | sticky, | 42 | sticky = false, |
55 | onHide, | 43 | onHide = noop, |
44 | intl, | ||
56 | } = this.props; | 45 | } = this.props; |
57 | 46 | ||
58 | const { intl } = this.props; | 47 | const transitionName = position === 'top' ? 'slideDown' : 'slideUp'; |
59 | |||
60 | let transitionName = 'slideUp'; | ||
61 | if (position === 'top') { | ||
62 | transitionName = 'slideDown'; | ||
63 | } | ||
64 | 48 | ||
65 | return ( | 49 | return ( |
66 | <Appear | 50 | <Appear |
@@ -102,4 +86,4 @@ class InfoBar extends Component { | |||
102 | } | 86 | } |
103 | } | 87 | } |
104 | 88 | ||
105 | export default injectIntl(observer(InfoBar)); | 89 | export default injectIntl(InfoBar); |
diff --git a/src/components/ui/Modal/index.tsx b/src/components/ui/Modal/index.tsx index 7407a686d..154beef0c 100644 --- a/src/components/ui/Modal/index.tsx +++ b/src/components/ui/Modal/index.tsx | |||
@@ -1,41 +1,33 @@ | |||
1 | import { Component, ReactChildren } from 'react'; | 1 | import { Component, ReactNode } from 'react'; |
2 | import ReactModal from 'react-modal'; | 2 | import ReactModal from 'react-modal'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import injectCSS from 'react-jss'; | 4 | import injectCSS, { WithStylesProps } from 'react-jss'; |
5 | import { mdiClose } from '@mdi/js'; | 5 | import { mdiClose } from '@mdi/js'; |
6 | 6 | ||
7 | import Icon from '../icon'; | 7 | import Icon from '../icon'; |
8 | import styles from './styles'; | 8 | import styles from './styles'; |
9 | 9 | ||
10 | type Props = { | 10 | interface IProps extends WithStylesProps<typeof styles> { |
11 | children: ReactChildren; | 11 | children: ReactNode; |
12 | className: string; | ||
13 | classes: any; | ||
14 | isOpen: boolean; | 12 | isOpen: boolean; |
15 | portal: string; | ||
16 | close: () => void; | 13 | close: () => void; |
17 | shouldCloseOnOverlayClick: boolean; | 14 | className?: string | null; |
18 | showClose: boolean; | 15 | portal?: string; |
19 | }; | 16 | shouldCloseOnOverlayClick?: boolean; |
20 | 17 | showClose?: boolean; | |
21 | class Modal extends Component<Props> { | 18 | } |
22 | static defaultProps = { | ||
23 | className: null, | ||
24 | portal: 'modal-portal', | ||
25 | shouldCloseOnOverlayClick: false, | ||
26 | showClose: true, | ||
27 | }; | ||
28 | 19 | ||
20 | class Modal extends Component<IProps> { | ||
29 | render() { | 21 | render() { |
30 | const { | 22 | const { |
31 | children, | 23 | children, |
32 | className, | ||
33 | classes, | 24 | classes, |
34 | isOpen, | 25 | isOpen, |
35 | portal, | ||
36 | close, | 26 | close, |
37 | shouldCloseOnOverlayClick, | 27 | className = null, |
38 | showClose, | 28 | portal = 'modal-portal', |
29 | shouldCloseOnOverlayClick = false, | ||
30 | showClose = true, | ||
39 | } = this.props; | 31 | } = this.props; |
40 | 32 | ||
41 | return ( | 33 | return ( |
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx index b5a5f695f..bebd8adcf 100644 --- a/src/components/ui/headline/index.tsx +++ b/src/components/ui/headline/index.tsx | |||
@@ -1,16 +1,22 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Component, createElement, ReactNode } from 'react'; | 2 | import { |
3 | Component, | ||
4 | createElement, | ||
5 | MouseEventHandler, | ||
6 | ReactElement, | ||
7 | ReactNode, | ||
8 | } from 'react'; | ||
3 | import injectStyle, { WithStylesProps } from 'react-jss'; | 9 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | 10 | ||
5 | import { Theme } from '../../../themes'; | 11 | import { Theme } from '../../../themes'; |
6 | import { Omit } from '../typings/generic'; | 12 | import { Omit } from '../typings/generic'; |
7 | 13 | ||
8 | interface IProps extends WithStylesProps<typeof styles> { | 14 | interface IProps extends WithStylesProps<typeof styles> { |
15 | children: ReactNode; | ||
9 | level?: number; | 16 | level?: number; |
10 | className?: string; | 17 | className?: string; |
11 | children: string | ReactNode; | ||
12 | id?: string; | 18 | id?: string; |
13 | onClick?: () => void; | 19 | onClick?: MouseEventHandler<HTMLButtonElement>; |
14 | } | 20 | } |
15 | 21 | ||
16 | const styles = (theme: Theme) => ({ | 22 | const styles = (theme: Theme) => ({ |
@@ -40,7 +46,7 @@ const styles = (theme: Theme) => ({ | |||
40 | }); | 46 | }); |
41 | 47 | ||
42 | class HeadlineComponent extends Component<IProps> { | 48 | class HeadlineComponent extends Component<IProps> { |
43 | render() { | 49 | render(): ReactElement { |
44 | const { classes, level, className, children, id, onClick } = this.props; | 50 | const { classes, level, className, children, id, onClick } = this.props; |
45 | 51 | ||
46 | return createElement( | 52 | return createElement( |
@@ -61,7 +67,6 @@ class HeadlineComponent extends Component<IProps> { | |||
61 | } | 67 | } |
62 | 68 | ||
63 | const Headline = injectStyle(styles, { injectTheme: true })(HeadlineComponent); | 69 | const Headline = injectStyle(styles, { injectTheme: true })(HeadlineComponent); |
64 | |||
65 | const createH = (level: number) => (props: Omit<IProps, 'classes'>) => | 70 | const createH = (level: number) => (props: Omit<IProps, 'classes'>) => |
66 | ( | 71 | ( |
67 | <Headline level={level} {...props}> | 72 | <Headline level={level} {...props}> |
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx index 7e13b98c7..5b432a194 100644 --- a/src/components/ui/icon/index.tsx +++ b/src/components/ui/icon/index.tsx | |||
@@ -1,6 +1,6 @@ | |||
1 | import MdiIcon from '@mdi/react'; | 1 | import MdiIcon from '@mdi/react'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import { Component } from 'react'; | 3 | import { Component, ReactElement } from 'react'; |
4 | import injectStyle, { WithStylesProps } from 'react-jss'; | 4 | import injectStyle, { WithStylesProps } from 'react-jss'; |
5 | 5 | ||
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
@@ -18,12 +18,8 @@ const styles = (theme: Theme) => ({ | |||
18 | }); | 18 | }); |
19 | 19 | ||
20 | class IconComponent extends Component<IProps> { | 20 | class IconComponent extends Component<IProps> { |
21 | public static defaultProps = { | 21 | render(): ReactElement { |
22 | size: 1, | 22 | const { classes, icon, size = 1, className } = this.props; |
23 | }; | ||
24 | |||
25 | render() { | ||
26 | const { classes, icon, size, className } = this.props; | ||
27 | 23 | ||
28 | if (!icon) { | 24 | if (!icon) { |
29 | console.warn('No Icon specified'); | 25 | console.warn('No Icon specified'); |
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; |