diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-21 20:31:49 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-21 20:31:49 +0530 |
commit | 009813cbc40bfd186037ccb7f327225357ef34e9 (patch) | |
tree | 1fcbee64b0b10256d694ba0cf687d968ae7d8da1 /src/components/ui/Tabs | |
parent | 6.2.1-nightly.48 [skip ci] (diff) | |
download | ferdium-app-009813cbc40bfd186037ccb7f327225357ef34e9.tar.gz ferdium-app-009813cbc40bfd186037ccb7f327225357ef34e9.tar.zst ferdium-app-009813cbc40bfd186037ccb7f327225357ef34e9.zip |
Fix for services self hosted url / Team Id / Include pre-releases not updating (#785)
* fix: self hosted team/url options not working properly in edit service form
* fix: Include pre-releases toggle not working
Diffstat (limited to 'src/components/ui/Tabs')
-rw-r--r-- | src/components/ui/Tabs/TabItem.tsx | 20 | ||||
-rw-r--r-- | src/components/ui/Tabs/Tabs.tsx (renamed from src/components/ui/Tabs/Tabs.js) | 50 |
2 files changed, 46 insertions, 24 deletions
diff --git a/src/components/ui/Tabs/TabItem.tsx b/src/components/ui/Tabs/TabItem.tsx index 631586d62..815dced8c 100644 --- a/src/components/ui/Tabs/TabItem.tsx +++ b/src/components/ui/Tabs/TabItem.tsx | |||
@@ -1 +1,19 @@ | |||
1 | export default ({ children }) => <>{children}</>; | 1 | import { Fragment, ReactElement } from 'react'; |
2 | |||
3 | export interface IProps { | ||
4 | children: | ||
5 | | string | ||
6 | | ReactElement<HTMLInputElement> | ||
7 | | ( | ||
8 | | boolean | ||
9 | | ReactElement<HTMLInputElement> | ||
10 | | ReactElement<HTMLParagraphElement> | ||
11 | )[]; | ||
12 | title?: string; // it is used on Tabs.tsx | ||
13 | } | ||
14 | |||
15 | function TabItem({ children, title = '' }: IProps): ReactElement { | ||
16 | return <Fragment key={title}>{children}</Fragment>; | ||
17 | } | ||
18 | |||
19 | export default TabItem; | ||
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.tsx index 5d2da6293..2c34d7e24 100644 --- a/src/components/ui/Tabs/Tabs.js +++ b/src/components/ui/Tabs/Tabs.tsx | |||
@@ -1,32 +1,36 @@ | |||
1 | import { Children, Component } from 'react'; | 1 | import { Children, Component, ReactElement, ReactPortal } 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'; |
4 | import { IProps as TabItemProps } from './TabItem'; | ||
5 | 5 | ||
6 | import { oneOrManyChildElements } from '../../../prop-types'; | 6 | interface IProps { |
7 | children: | ||
8 | | ReactElement<TabItemProps> | ||
9 | | (boolean | ReactElement<TabItemProps>)[]; | ||
10 | active?: number; | ||
11 | } | ||
7 | 12 | ||
8 | class Tab extends Component { | 13 | interface IState { |
9 | constructor(props) { | 14 | active: number; |
10 | super(props); | 15 | } |
11 | this.state = { active: this.props.active }; | ||
12 | } | ||
13 | 16 | ||
14 | static propTypes = { | 17 | @observer |
15 | children: oneOrManyChildElements.isRequired, | 18 | class Tab extends Component<IProps, IState> { |
16 | active: PropTypes.number, | 19 | constructor(props: IProps) { |
17 | }; | 20 | super(props); |
18 | 21 | ||
19 | static defaultProps = { | 22 | this.state = { |
20 | active: 0, | 23 | active: this.props.active || 0, |
21 | }; | 24 | }; |
25 | } | ||
22 | 26 | ||
23 | switchTab(index) { | 27 | switchTab(index: number): void { |
24 | this.setState({ active: index }); | 28 | this.setState({ active: index }); |
25 | } | 29 | } |
26 | 30 | ||
27 | render() { | 31 | render(): ReactElement { |
28 | const { children: childElements } = this.props; | 32 | const { children: childElements } = this.props; |
29 | const children = childElements.filter(c => !!c); | 33 | const children = Children.toArray(childElements); // removes all null values |
30 | 34 | ||
31 | if (children.length === 1) { | 35 | if (children.length === 1) { |
32 | return <div>{children}</div>; | 36 | return <div>{children}</div>; |
@@ -37,7 +41,7 @@ class Tab extends Component { | |||
37 | <div className="content-tabs__tabs"> | 41 | <div className="content-tabs__tabs"> |
38 | {Children.map(children, (child, i) => ( | 42 | {Children.map(children, (child, i) => ( |
39 | <button | 43 | <button |
40 | key="{i}" | 44 | key={i} |
41 | className={classnames({ | 45 | className={classnames({ |
42 | 'content-tabs__item': true, | 46 | 'content-tabs__item': true, |
43 | 'is-active': this.state.active === i, | 47 | 'is-active': this.state.active === i, |
@@ -45,19 +49,19 @@ class Tab extends Component { | |||
45 | onClick={() => this.switchTab(i)} | 49 | onClick={() => this.switchTab(i)} |
46 | type="button" | 50 | type="button" |
47 | > | 51 | > |
48 | {child.props.title} | 52 | {(child as ReactPortal).props.title} |
49 | </button> | 53 | </button> |
50 | ))} | 54 | ))} |
51 | </div> | 55 | </div> |
52 | <div className="content-tabs__content"> | 56 | <div className="content-tabs__content"> |
53 | {Children.map(children, (child, i) => ( | 57 | {Children.map(children, (child, i) => ( |
54 | <div | 58 | <div |
55 | key="{i}" | 59 | key={i} |
56 | className={classnames({ | 60 | className={classnames({ |
57 | 'content-tabs__item': true, | 61 | 'content-tabs__item': true, |
58 | 'is-active': this.state.active === i, | 62 | 'is-active': this.state.active === i, |
59 | })} | 63 | })} |
60 | type="button" | 64 | // type="button" |
61 | > | 65 | > |
62 | {child} | 66 | {child} |
63 | </div> | 67 | </div> |
@@ -68,4 +72,4 @@ class Tab extends Component { | |||
68 | } | 72 | } |
69 | } | 73 | } |
70 | 74 | ||
71 | export default observer(Tab); | 75 | export default Tab; |