mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-06-16 17:49:09 +00:00
chore: update prettier tab width for consistency (#175)
This commit is contained in:
GitHub
parent
a931f8c69c
commit
f24d2fcc99
247 changed files with 7224 additions and 7375 deletions
|
|
@ -4,36 +4,36 @@ import { Tab, TabView, TabViewProps } from './TabView';
|
|||
import { TabContent, TabTitle } from './TabView.styled';
|
||||
|
||||
const makeView = (props: Partial<TabViewProps> = {}) =>
|
||||
shallow(
|
||||
<TabView {...props}>
|
||||
<Tab title="Tab 1">{() => <div>tab 1</div>}</Tab>
|
||||
<Tab title="Tab 2">{() => <div>tab 2</div>}</Tab>,
|
||||
</TabView>
|
||||
);
|
||||
shallow(
|
||||
<TabView {...props}>
|
||||
<Tab title="Tab 1">{() => <div>tab 1</div>}</Tab>
|
||||
<Tab title="Tab 2">{() => <div>tab 2</div>}</Tab>,
|
||||
</TabView>
|
||||
);
|
||||
|
||||
it('renders tab content correctly', () => {
|
||||
const view = makeView();
|
||||
const view = makeView();
|
||||
|
||||
expect(view.find(Tab).renderProp('children')().text()).toBe('tab 1');
|
||||
expect(view.find(Tab).renderProp('children')().text()).toBe('tab 1');
|
||||
});
|
||||
|
||||
it('automatically picks preselected tab content', () => {
|
||||
const view = makeView({ initialTab: 1 });
|
||||
const view = makeView({ initialTab: 1 });
|
||||
|
||||
expect(view.find(Tab).renderProp('children')().text()).toBe('tab 2');
|
||||
expect(view.find(Tab).renderProp('children')().text()).toBe('tab 2');
|
||||
});
|
||||
|
||||
it('automatically uses the first tab when preselected tab is not present', () => {
|
||||
const view = makeView({ initialTab: -1 });
|
||||
const view = makeView({ initialTab: -1 });
|
||||
|
||||
view.find(TabContent).find('i').simulate('load');
|
||||
expect(view.find(Tab).renderProp('children')().text()).toBe('tab 1');
|
||||
view.find(TabContent).find('i').simulate('load');
|
||||
expect(view.find(Tab).renderProp('children')().text()).toBe('tab 1');
|
||||
});
|
||||
|
||||
it('changes between tabs when tab is clicked', () => {
|
||||
const view = makeView();
|
||||
const view = makeView();
|
||||
|
||||
view.find(TabTitle).at(1).simulate('click');
|
||||
view.find(TabTitle).at(1).simulate('click');
|
||||
|
||||
expect(view.find(Tab).renderProp('children')().text()).toBe('tab 2');
|
||||
expect(view.find(Tab).renderProp('children')().text()).toBe('tab 2');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,26 +2,26 @@ import * as React from 'react';
|
|||
import { Tab, TabView } from './TabView';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Tab View',
|
||||
argTypes: {
|
||||
tabCount: { control: 'range', min: 1, max: 100 },
|
||||
},
|
||||
args: {
|
||||
tabCount: 10,
|
||||
},
|
||||
title: 'Atoms/Tab View',
|
||||
argTypes: {
|
||||
tabCount: { control: 'range', min: 1, max: 100 },
|
||||
},
|
||||
args: {
|
||||
tabCount: 10,
|
||||
},
|
||||
};
|
||||
|
||||
export const ManyTabs = ({ tabCount }) => {
|
||||
const tabs = [...'0'.repeat(tabCount)].map((_, i) => (
|
||||
<Tab title={`tab ${i}`}>
|
||||
{() => (
|
||||
<>
|
||||
<h1>tab {i}</h1>
|
||||
<p>hello!!!!!</p>
|
||||
</>
|
||||
)}
|
||||
</Tab>
|
||||
));
|
||||
const tabs = [...'0'.repeat(tabCount)].map((_, i) => (
|
||||
<Tab title={`tab ${i}`}>
|
||||
{() => (
|
||||
<>
|
||||
<h1>tab {i}</h1>
|
||||
<p>hello!!!!!</p>
|
||||
</>
|
||||
)}
|
||||
</Tab>
|
||||
));
|
||||
|
||||
return <TabView>{tabs}</TabView>;
|
||||
return <TabView>{tabs}</TabView>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,37 +6,37 @@ import styled, { css } from 'styled-components';
|
|||
export const TabViewStyled = styled.div``;
|
||||
|
||||
export const TabTitleRow = styled.div`
|
||||
display: flex;
|
||||
border-bottom: 1px solid ${palette.taupe100};
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
border-bottom: 1px solid ${palette.taupe100};
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
export const TabTitle = styled.div<{ selected: boolean }>`
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0.7em 1em;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: border-color ${transitions.in2out}s ease-in-out,
|
||||
color ${transitions.in2out}s ease-in-out;
|
||||
cursor: pointer;
|
||||
color: ${palette.taupe500};
|
||||
${(props) =>
|
||||
props.selected
|
||||
? css`
|
||||
color: unset;
|
||||
border-bottom-color: ${palette.taupe500};
|
||||
`
|
||||
: css`
|
||||
&:hover {
|
||||
border-bottom-color: ${palette.taupe300};
|
||||
color: unset;
|
||||
}
|
||||
`};
|
||||
${onTablet(css`
|
||||
padding: 0.45em 1em;
|
||||
`)}
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0.7em 1em;
|
||||
border-bottom: 3px solid transparent;
|
||||
transition: border-color ${transitions.in2out}s ease-in-out,
|
||||
color ${transitions.in2out}s ease-in-out;
|
||||
cursor: pointer;
|
||||
color: ${palette.taupe500};
|
||||
${(props) =>
|
||||
props.selected
|
||||
? css`
|
||||
color: unset;
|
||||
border-bottom-color: ${palette.taupe500};
|
||||
`
|
||||
: css`
|
||||
&:hover {
|
||||
border-bottom-color: ${palette.taupe300};
|
||||
color: unset;
|
||||
}
|
||||
`};
|
||||
${onTablet(css`
|
||||
padding: 0.45em 1em;
|
||||
`)}
|
||||
`;
|
||||
|
||||
export const TabContent = styled.div``;
|
||||
|
|
|
|||
|
|
@ -2,52 +2,52 @@ import * as React from 'react';
|
|||
import { TabContent, TabTitle, TabTitleRow, TabViewStyled } from './TabView.styled';
|
||||
|
||||
export type TabViewProps = {
|
||||
children: React.ReactNode[];
|
||||
initialTab?: number;
|
||||
children: React.ReactNode[];
|
||||
initialTab?: number;
|
||||
};
|
||||
|
||||
type TabProps = {
|
||||
title: string;
|
||||
children: () => React.ReactNode;
|
||||
title: string;
|
||||
children: () => React.ReactNode;
|
||||
};
|
||||
|
||||
export const TabView = (props: TabViewProps) => {
|
||||
const tabNames = React.Children.map(props.children, (child) => {
|
||||
if (!React.isValidElement(child)) {
|
||||
return '(Oops)';
|
||||
}
|
||||
|
||||
return child.props.title;
|
||||
}) as string[];
|
||||
|
||||
if (tabNames.length === 0) {
|
||||
return null;
|
||||
const tabNames = React.Children.map(props.children, (child) => {
|
||||
if (!React.isValidElement(child)) {
|
||||
return '(Oops)';
|
||||
}
|
||||
|
||||
const [currentTab, setCurrentTab] = React.useState<number>(props.initialTab ?? 0);
|
||||
return child.props.title;
|
||||
}) as string[];
|
||||
|
||||
return (
|
||||
<TabViewStyled>
|
||||
<TabTitleRow>
|
||||
{tabNames.map((tabName, idx) => (
|
||||
<TabTitle
|
||||
selected={currentTab === idx}
|
||||
onClick={() => setCurrentTab(idx)}
|
||||
key={`tab${tabName}${idx}`}
|
||||
>
|
||||
{tabName}
|
||||
</TabTitle>
|
||||
))}
|
||||
</TabTitleRow>
|
||||
<TabContent>
|
||||
{props.children[currentTab] || (
|
||||
<i onLoad={() => setCurrentTab(0)}>
|
||||
Tabs were misconfigured, resetting to zero.
|
||||
</i>
|
||||
)}
|
||||
</TabContent>
|
||||
</TabViewStyled>
|
||||
);
|
||||
if (tabNames.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [currentTab, setCurrentTab] = React.useState<number>(props.initialTab ?? 0);
|
||||
|
||||
return (
|
||||
<TabViewStyled>
|
||||
<TabTitleRow>
|
||||
{tabNames.map((tabName, idx) => (
|
||||
<TabTitle
|
||||
selected={currentTab === idx}
|
||||
onClick={() => setCurrentTab(idx)}
|
||||
key={`tab${tabName}${idx}`}
|
||||
>
|
||||
{tabName}
|
||||
</TabTitle>
|
||||
))}
|
||||
</TabTitleRow>
|
||||
<TabContent>
|
||||
{props.children[currentTab] || (
|
||||
<i onLoad={() => setCurrentTab(0)}>
|
||||
Tabs were misconfigured, resetting to zero.
|
||||
</i>
|
||||
)}
|
||||
</TabContent>
|
||||
</TabViewStyled>
|
||||
);
|
||||
};
|
||||
|
||||
export const Tab = (props: TabProps) => <div>{props.children()}</div>;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue