Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(AdaptiveTabs): add allowNotSeelcted prop #25

Merged
merged 3 commits into from
Mar 30, 2023
Merged

feat(AdaptiveTabs): add allowNotSeelcted prop #25

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9dc717a
feat(AdaptiveTabs): add allowNotseelcted prop
Mar 30, 2023
dc803bc
feat(AdaptiveTabs): enhance description
Mar 30, 2023
6ade12e
fix: fix description
Mar 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions src/components/AdaptiveTabs/AdaptiveTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ export interface AdaptiveTabsProps<T> {
): React.ReactNode;
className?: string;
size?: TabsSize;
allowNotSelected?: boolean;
}

interface AdaptiveTabsState {
Expand Down Expand Up @@ -171,13 +172,17 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
private tabsListNode = React.createRef<HTMLDivElement>();

get activeTab() {
const {activeTab, items} = this.props;
const {activeTab, items, allowNotSelected} = this.props;
if (activeTab) {
return activeTab;
} else {
const [firstTab] = items;
return firstTab.id;
}

if (allowNotSelected || items.length === 0) {
return undefined;
}

const [firstTab] = items;
return firstTab.id;
}

constructor(props: AdaptiveTabsProps<T>) {
Expand Down Expand Up @@ -458,7 +463,8 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
hide it, so we write its ID into tabChosenFromSelectId and start recalculation */
if (
this.state.tabChosenFromSelectId !== activeTabId &&
activeTabIndex >= firstHiddenTabIndex
activeTabIndex >= firstHiddenTabIndex &&
activeTabId !== undefined
) {
this.setState({tabChosenFromSelectId: activeTabId}, this.recalculateTabs);
return false;
Expand Down
2 changes: 1 addition & 1 deletion src/components/AdaptiveTabs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ with the caption `More'. If only one tab fits, the select is displayed instead o
| Property | Type | Required | Default | Description |
| :-------------------------------------- | :------------------------------------------------------------------------ | :------: | :------ | :----------------------------------------------------------------- |
| activeTab | `String` | | | Active Tab ID |
| allowNotSelected | `Boolean` | | | Позволяет не указывать `activeTab` |
| allowNotSelected | `Boolean` | | | Allows you not to specify `activeTab` |
| items | `TabItem[]` | `true` | | Tabs Array |
| onSelectTab | `onSelectTab?(tabId: string): void` | `true` | | Select tab handler |
| wrapTo | `wrapTo?(item: TabItemProps, node: React.ReactNode, index: number): void` | | | Allows to wrap TabItem into another component or render custom tab |
Expand Down