Skip to content

Commit

Permalink
Merge branch 'pr-tabs-direction' into pr-tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@JeromeLin
JeromeLin committed Nov 15, 2024
2 parents 5968b77 + ff3a6c3 commit 23fce0b
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 102 deletions.
20 changes: 5 additions & 15 deletions packages/site/demo/styles/TabsPage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,15 @@
@import '@/styles/index';

.tabs-page {
.za-tabs + .za-tabs {
margin-top: r(10);
}

.content {
display: flex;
align-items: center;
justify-content: center;
padding: r(10);
height: r(150);
}

.za-tabs--vertical {
.content {
height: 100%;
}
.custom-width {
width: r(250);
}

&.custom-height {
height: r(200);
}
.custom-height {
height: r(200);
}
}
46 changes: 29 additions & 17 deletions packages/zarm/src/tabs/Tabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { createBEM } from '@zarm-design/bem';
import * as React from 'react';
import TabPanel from './TabPanel';
import Carousel from '../carousel';
import type { CarouselHTMLElement } from '../carousel';
import { getTransformPropValue, getPxStyle } from './util/index';
import { scrollTo } from '../utils/dom';
import Carousel from '../carousel';
import { ConfigContext } from '../config-provider';
import type { TabPanelProps } from './TabPanel';
import type { BaseTabsProps } from './interface';
import { useTypeChangeWarning } from '../utils/deprecationWarning';
import { scrollTo } from '../utils/dom';
import type { HTMLProps } from '../utils/utilityTypes';
import type { BaseTabsProps } from './interface';
import type { TabPanelProps } from './TabPanel';
import TabPanel from './TabPanel';
import { getPxStyle, getTransformPropValue } from './util/index';

const getChildChecked = (children: TabPanelProps['children']) => {
let selectIndex;
Expand Down Expand Up @@ -79,6 +80,10 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
children,
} = props;

// TODO: remove this warning in next major version
['vertical', 'horizontal'].includes(direction) &&
useTypeChangeWarning('Tabs', 'direction', direction, "'top' | 'right' | 'bottom' | 'left'");

const carouselRef = React.useRef<CarouselHTMLElement>(null);
const tablistRef = React.useRef<HTMLUListElement>(null);
const [itemWidth, setItemWidth] = React.useState(0);
Expand All @@ -89,17 +94,21 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
const { prefixCls } = React.useContext(ConfigContext);
const bem = createBEM('tabs', { prefixCls });

const isVertical: boolean = direction === 'vertical';
// TODO: direction='vertical' 暂作兼容
const isVertical: boolean = ['left', 'right', 'vertical'].includes(direction);

const parseValue = React.useCallback(
(inputValue) => parseValueBoundary(inputValue, children),
[children],
);

const classes = bem([{
[`${direction}`]: true,
scroll: scrollable,
}, className])
const classes = bem([
{
[`${direction}`]: true,
scroll: scrollable,
},
className,
]);

// 计算 line 大小和位置
const caclLineSizePos = () => {
Expand Down Expand Up @@ -160,7 +169,7 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
contentRender = (
<Carousel
swipeable={!disabled}
direction={direction}
direction={isVertical ? 'vertical' : 'horizontal'}
showPagination={false}
activeIndex={parseValue(currentValue)}
ref={carouselRef}
Expand All @@ -181,10 +190,13 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
}

const renderTabs = (tab: React.ReactElement<TabPanelProps, typeof TabPanel>, index: number) => {
const itemCls = bem('tab', [{
disabled: disabled || tab.props.disabled,
active: parseValue(currentValue) === index,
}, tab.props.className])
const itemCls = bem('tab', [
{
disabled: disabled || tab.props.disabled,
active: parseValue(currentValue) === index,
},
tab.props.className,
]);

return (
<li role="tab" key={+index} className={itemCls} onClick={() => onTabClick(tab, index)}>
Expand Down Expand Up @@ -264,7 +276,7 @@ Tabs.defaultProps = {
disabled: false,
swipeable: false,
scrollable: false,
direction: 'horizontal',
direction: 'top',
};

export default Tabs;
131 changes: 71 additions & 60 deletions packages/zarm/src/tabs/demo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,47 +74,6 @@ ReactDOM.render(
);
```

## 标签栏滚动

```jsx
import { useState } from 'react';
import { Tabs } from 'zarm';

const { Panel } = Tabs;

const Demo = () => {
const [value, setValue] = useState(0);

return (
<Tabs scrollable value={value} onChange={setValue}>
<Panel title="选项卡1">
<div className="content">选项卡1内容</div>
</Panel>
<Panel title="选项卡2">
<div className="content">选项卡2内容</div>
</Panel>
<Panel title="选项卡3">
<div className="content">选项卡3内容</div>
</Panel>
<Panel title="选项卡4">
<div className="content">选项卡4内容</div>
</Panel>
<Panel title="选项卡5">
<div className="content">选项卡5内容</div>
</Panel>
<Panel title="选项卡6">
<div className="content">选项卡6内容</div>
</Panel>
<Panel title="选项卡7">
<div className="content">选项卡7内容</div>
</Panel>
</Tabs>
);
};

ReactDOM.render(<Demo />, mountNode);
```

## 指定线条宽度

```jsx
Expand Down Expand Up @@ -161,7 +120,59 @@ ReactDOM.render(
);
```

## 垂直用法
## 方向

```jsx
import { useState } from 'react';
import { Tabs, List, Radio } from 'zarm';

const { Panel } = Tabs;

const Demo = () => {
const [value, setValue] = useState(0);
const [direction, setDirection] = useState('top');

return (
<List>
<List.Item>
<Radio.Group compact type="button" value={direction} onChange={setDirection}>
<Radio value="top">top</Radio>
<Radio value="bottom">bottom</Radio>
<Radio value="left">left</Radio>
<Radio value="right">right</Radio>
</Radio.Group>
</List.Item>
<Tabs scrollable value={value} onChange={setValue} direction={direction}>
<Panel title="选项卡1">
<div className="content">选项卡1内容</div>
</Panel>
<Panel title="选项卡2">
<div className="content">选项卡2内容</div>
</Panel>
<Panel title="选项卡3">
<div className="content">选项卡3内容</div>
</Panel>
<Panel title="选项卡4">
<div className="content">选项卡4内容</div>
</Panel>
<Panel title="选项卡5">
<div className="content">选项卡5内容</div>
</Panel>
<Panel title="选项卡6">
<div className="content">选项卡6内容</div>
</Panel>
<Panel title="选项卡7">
<div className="content">选项卡7内容</div>
</Panel>
</Tabs>
</List>
);
};

ReactDOM.render(<Demo />, mountNode);
```

## 水平限宽

```jsx
import { useState } from 'react';
Expand All @@ -173,7 +184,13 @@ const Demo = () => {
const [value, setValue] = useState(0);

return (
<Tabs scrollable value={value} onChange={setValue} direction="vertical">
<Tabs
scrollable
direction="horizontal"
value={value}
onChange={setValue}
className="custom-width"
>
<Panel title="选项卡1">
<div className="content">选项卡1内容</div>
</Panel>
Expand Down Expand Up @@ -214,13 +231,7 @@ const Demo = () => {
const [value, setValue] = useState(0);

return (
<Tabs
scrollable
value={value}
onChange={setValue}
direction="vertical"
className="custom-height"
>
<Tabs scrollable value={value} onChange={setValue} direction="left" className="custom-height">
<Panel title="选项卡1">
<div className="content">选项卡1内容</div>
</Panel>
Expand Down Expand Up @@ -253,16 +264,16 @@ ReactDOM.render(<Demo />, mountNode);

### Tabs

| 属性 | 类型 | 默认值 | 说明 |
| :----------- | :---------------------- | :----------- | :------------------------------------- |
| value | number | - | 值 |
| defaultValue | number | - | 初始值 |
| disabled | boolean | false | 是否禁用 |
| direction | string | 'horizontal' | 方向，可选值为 `horizontal` `vertical` |
| swipeable | boolean | false | 是否支持滑动切换 |
| scrollable | boolean | false | 是否支持滚动 |
| lineWidth | number \| string | - | 线条宽度 |
| onChange | (index: number) => void | - | 值变化时触发的回调函数 |
| 属性 | 类型 | 默认值 | 说明 |
| :----------- | :---------------------- | :----- | :------------------------------------------- |
| value | number | - | 值 |
| defaultValue | number | - | 初始值 |
| disabled | boolean | false | 是否禁用 |
| direction | string | 'top' | 方向，可选值为 `top` `bottom` `left` `right` |
| swipeable | boolean | false | 是否支持滑动切换 |
| scrollable | boolean | false | 是否支持滚动 |
| lineWidth | number \| string | - | 线条宽度 |
| onChange | (index: number) => void | - | 值变化时触发的回调函数 |

### Panel

Expand Down
2 changes: 1 addition & 1 deletion packages/zarm/src/tabs/interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export interface BaseTabsProps {
disabled?: boolean;
swipeable?: boolean;
scrollable?: boolean;
direction?: 'horizontal' | 'vertical';
direction?: 'vertical' | 'horizontal' | 'top' | 'right' | 'bottom' | 'left'; // TODO: 'vertical'、'horizontal' 暂作兼容
onChange?: (index: number) => void;
children?: React.ReactNode;
}
Expand Down
Loading

0 comments on commit 23fce0b

Please sign in to comment.