Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: uiwjs/uiw
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v4.14.2
Choose a base ref
...
head repository: uiwjs/uiw
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v4.15.0
Choose a head ref
  • 6 commits
  • 80 files changed
  • 5 contributors

Commits on Mar 17, 2022

  1. released-v4.14.2

    @actions-user
    actions-user committed Mar 17, 2022
    Copy the full SHA
    849b22f View commit details

Commits on Mar 18, 2022

  1. style(SearchSelect): 样式调整,下拉菜单比搜索框长 #652 (#689)

    @nullptr-z
    nullptr-z authored Mar 18, 2022

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    GPG key ID: 4AEE18F83AFDEB23
    Expired
    Verified
    Learn about vigilant mode
    Copy the full SHA
    1982a14 View commit details

  2. feat(Table): Table 添加 scroll 属性，解决表格冗余 div fix #687 (#690)

    @cuilanxin
    cuilanxin authored Mar 18, 2022

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    GPG key ID: 4AEE18F83AFDEB23
    Expired
    Verified
    Learn about vigilant mode
    Copy the full SHA
    d20b5e8 View commit details

  3. fix(Tabs): 高亮下划线位置错误 #674 (#677)

    @Amber-Nan
    Amber-Nan authored Mar 18, 2022

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    GPG key ID: 4AEE18F83AFDEB23
    Expired
    Verified
    Learn about vigilant mode
    Copy the full SHA
    1a6768e View commit details

Commits on Mar 19, 2022

  1. faeat(Carousel): 增加走马灯组件Carousel (#691)

    @nullptr-z
    nullptr-z authored Mar 19, 2022

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    GPG key ID: 4AEE18F83AFDEB23
    Expired
    Verified
    Learn about vigilant mode
    Copy the full SHA
    4723874 View commit details

  2. doc(Carousel): Update README.md (fix #693)

    @jaywcjlove
    jaywcjlove committed Mar 19, 2022
    Copy the full SHA
    b89ee5e View commit details
Showing with 696 additions and 268 deletions.
  1. +5 −0 .github/workflows/deploy.yml
  2. +5 −0 .github/workflows/npm.yml
  3. +1 −1 packages/doc/package.json
  4. +2 −2 packages/react-affix/package.json
  5. +3 −3 packages/react-alert/package.json
  6. +1 −1 packages/react-auto-link/package.json
  7. +3 −3 packages/react-avatar/package.json
  8. +2 −2 packages/react-back-top/package.json
  9. +2 −2 packages/react-badge/package.json
  10. +2 −2 packages/react-breadcrumb/package.json
  11. +3 −3 packages/react-button-group/package.json
  12. +3 −3 packages/react-button/package.json
  13. +4 −4 packages/react-calendar/package.json
  14. +2 −2 packages/react-card/package.json
  15. +146 −0 packages/react-carousel/README.md
  16. +47 −0 packages/react-carousel/package.json
  17. +103 −0 packages/react-carousel/src/index.tsx
  18. +13 −0 packages/react-carousel/src/style/index.less
  19. +8 −0 packages/react-carousel/tsconfig.json
  20. +3 −3 packages/react-checkbox/package.json
  21. +3 −3 packages/react-collapse/package.json
  22. +2 −2 packages/react-copy-to-clipboard/package.json
  23. +6 −6 packages/react-date-input/package.json
  24. +4 −4 packages/react-date-picker/package.json
  25. +2 −2 packages/react-descriptions/package.json
  26. +2 −2 packages/react-divider/package.json
  27. +5 −5 packages/react-drawer/package.json
  28. +3 −3 packages/react-dropdown/package.json
  29. +1 −1 packages/react-empty/package.json
  30. +4 −4 packages/react-file-input/package.json
  31. +4 −4 packages/react-form/package.json
  32. +2 −2 packages/react-grid/package.json
  33. +1 −1 packages/react-icon/package.json
  34. +3 −3 packages/react-input/package.json
  35. +2 −2 packages/react-list/package.json
  36. +2 −2 packages/react-loader/package.json
  37. +4 −4 packages/react-menu/package.json
  38. +4 −4 packages/react-message/package.json
  39. +5 −5 packages/react-modal/package.json
  40. +6 −6 packages/react-month-picker/package.json
  41. +5 −5 packages/react-notify/package.json
  42. +3 −3 packages/react-overlay-trigger/package.json
  43. +3 −3 packages/react-overlay/package.json
  44. +3 −3 packages/react-pagination/package.json
  45. +3 −3 packages/react-pin-code/package.json
  46. +2 −2 packages/react-popover/package.json
  47. +1 −1 packages/react-portal/package.json
  48. +3 −3 packages/react-progress/package.json
  49. +2 −2 packages/react-radio/package.json
  50. +2 −2 packages/react-rate/package.json
  51. +7 −7 packages/react-search-select/README.md
  52. +8 −8 packages/react-search-select/package.json
  53. +3 −2 packages/react-search-select/src/index.tsx
  54. +11 −11 packages/react-search-tree/package.json
  55. +2 −2 packages/react-select/package.json
  56. +2 −2 packages/react-slider/package.json
  57. +3 −3 packages/react-steps/package.json
  58. +2 −2 packages/react-switch/package.json
  59. +61 −1 packages/react-table/README.md
  60. +3 −3 packages/react-table/package.json
  61. +2 −2 packages/react-table/src/TableTr.tsx
  62. +25 −6 packages/react-table/src/index.tsx
  63. +3 −3 packages/react-tabs/package.json
  64. +2 −2 packages/react-tabs/src/index.tsx
  65. +1 −1 packages/react-tabs/src/style/index.less
  66. +2 −2 packages/react-tag/package.json
  67. +2 −2 packages/react-textarea/package.json
  68. +5 −5 packages/react-time-picker/package.json
  69. +3 −3 packages/react-tooltip/package.json
  70. +8 −9 packages/react-transfer/package.json
  71. +4 −4 packages/react-tree-checked/package.json
  72. +3 −3 packages/react-tree/package.json
  73. +59 −58 packages/uiw/package.json
  74. +2 −0 packages/uiw/src/index.ts
  75. +1 −1 packages/utils/package.json
  76. +2 −2 website/package.json
  77. +1 −0 website/src/menu.json
  78. +2 −0 website/src/routers.tsx
  79. +16 −0 website/src/routes/components/carousel/index.tsx
  80. +1 −1 website/src/routes/components/transfer/index.tsx
5 changes: 5 additions & 0 deletions .github/workflows/deploy.yml
View file
Original file line number Diff line number Diff line change
@@ -123,6 +123,11 @@ jobs:
with:
token: ${{ secrets.NPM_TOKEN }}
package: ./packages/react-card/package.json
- name: 📦 @uiw/react-carousel publish to NPM
uses: JS-DevTools/npm-publish@v1
with:
token: ${{ secrets.NPM_TOKEN }}
package: ./packages/react-carousel/package.json
- name: 📦 @uiw/react-checkbox publish to NPM
uses: JS-DevTools/npm-publish@v1
with:
5 changes: 5 additions & 0 deletions .github/workflows/npm.yml
View file
Original file line number Diff line number Diff line change
@@ -192,6 +192,11 @@ jobs:
with:
token: ${{ secrets.NPM_TOKEN }}
package: ./packages/react-card/package.json
- name: 📦 @uiw/react-carousel publish to NPM
uses: JS-DevTools/npm-publish@v1
with:
token: ${{ secrets.NPM_TOKEN }}
package: ./packages/react-carousel/package.json
- name: 📦 @uiw/react-checkbox publish to NPM
uses: JS-DevTools/npm-publish@v1
with:
2 changes: 1 addition & 1 deletion packages/doc/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/doc",
"version": "4.14.1",
"version": "4.14.2",
"description": "UIW documentation website.",
"homepage": "https://uiwjs.github.io",
"files": [
4 changes: 2 additions & 2 deletions packages/react-affix/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-affix",
"version": "4.14.1",
"version": "4.14.2",
"description": "Affix component",
"author": "Kenny Wong <wowohoo@qq.com>",
"homepage": "https://uiwjs.github.io/#/components/affix",
@@ -44,6 +44,6 @@
"react-dom": ">=16.9.0"
},
"dependencies": {
"@uiw/utils": "^4.14.1"
"@uiw/utils": "^4.14.2"
}
}
6 changes: 3 additions & 3 deletions packages/react-alert/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-alert",
"version": "4.14.1",
"version": "4.14.2",
"description": "Alert component",
"author": "Kenny Wong <wowohoo@qq.com>",
"homepage": "https://uiwjs.github.io/#/components/alert",
@@ -44,7 +44,7 @@
"react-dom": ">=16.9.0"
},
"dependencies": {
"@uiw/react-modal": "^4.14.1",
"@uiw/utils": "^4.14.1"
"@uiw/react-modal": "^4.14.2",
"@uiw/utils": "^4.14.2"
}
}
2 changes: 1 addition & 1 deletion packages/react-auto-link/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-auto-link",
"version": "4.14.1",
"version": "4.14.2",
"description": "AutoLink component",
"author": "Kenny Wong <wowohoo@qq.com>",
"homepage": "https://uiwjs.github.io/#/components/auto-link",
6 changes: 3 additions & 3 deletions packages/react-avatar/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-avatar",
"version": "4.14.1",
"version": "4.14.2",
"description": "Avatar component",
"author": "Kenny Wong <wowohoo@qq.com>",
"homepage": "https://uiwjs.github.io/#/components/button",
@@ -44,7 +44,7 @@
"react-dom": ">=16.9.0"
},
"dependencies": {
"@uiw/react-icon": "^4.14.1",
"@uiw/utils": "^4.14.1"
"@uiw/react-icon": "^4.14.2",
"@uiw/utils": "^4.14.2"
}
}
4 changes: 2 additions & 2 deletions packages/react-back-top/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-back-top",
"version": "4.14.1",
"version": "4.14.2",
"description": "BackTop component",
"author": "Kenny Wong <wowohoo@qq.com>",
"homepage": "https://uiwjs.github.io/#/components/back-top",
@@ -44,6 +44,6 @@
"react-dom": ">=16.9.0"
},
"dependencies": {
"@uiw/utils": "^4.14.1"
"@uiw/utils": "^4.14.2"
}
}
4 changes: 2 additions & 2 deletions packages/react-badge/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-badge",
"version": "4.14.1",
"version": "4.14.2",
"description": "Badge component",
"author": "Kenny Wong <wowohoo@qq.com>",
"homepage": "https://uiwjs.github.io/#/components/badge",
@@ -44,6 +44,6 @@
"react-dom": ">=16.9.0"
},
"dependencies": {
"@uiw/utils": "^4.14.1"
"@uiw/utils": "^4.14.2"
}
}
4 changes: 2 additions & 2 deletions packages/react-breadcrumb/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-breadcrumb",
"version": "4.14.1",
"version": "4.14.2",
"description": "Breadcrumb component",
"author": "Kenny Wong <wowohoo@qq.com>",
"homepage": "https://uiwjs.github.io/#/components/breadcrumb",
@@ -44,6 +44,6 @@
"react-dom": ">=16.9.0"
},
"dependencies": {
"@uiw/utils": "^4.14.1"
"@uiw/utils": "^4.14.2"
}
}
6 changes: 3 additions & 3 deletions packages/react-button-group/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-button-group",
"version": "4.14.1",
"version": "4.14.2",
"description": "ButtonGroup component",
"author": "Kenny Wong <wowohoo@qq.com>",
"homepage": "https://uiwjs.github.io/#/components/button-group",
@@ -44,7 +44,7 @@
"react-dom": ">=16.9.0"
},
"dependencies": {
"@uiw/react-button": "^4.14.1",
"@uiw/utils": "^4.14.1"
"@uiw/react-button": "^4.14.2",
"@uiw/utils": "^4.14.2"
}
}
6 changes: 3 additions & 3 deletions packages/react-button/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-button",
"version": "4.14.1",
"version": "4.14.2",
"description": "Button component",
"author": "Kenny Wong <wowohoo@qq.com>",
"homepage": "https://uiwjs.github.io/#/components/button",
@@ -44,7 +44,7 @@
"react-dom": ">=16.9.0"
},
"dependencies": {
"@uiw/react-icon": "^4.14.1",
"@uiw/utils": "^4.14.1"
"@uiw/react-icon": "^4.14.2",
"@uiw/utils": "^4.14.2"
}
}
8 changes: 4 additions & 4 deletions packages/react-calendar/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-calendar",
"version": "4.14.1",
"version": "4.14.2",
"description": "Calendar component",
"author": "Kenny Wong <wowohoo@qq.com>",
"homepage": "https://uiwjs.github.io/#/components/calendar",
@@ -45,8 +45,8 @@
},
"dependencies": {
"@uiw/formatter": "~1.3.2",
"@uiw/react-date-picker": "^4.14.1",
"@uiw/react-icon": "^4.14.1",
"@uiw/utils": "^4.14.1"
"@uiw/react-date-picker": "^4.14.2",
"@uiw/react-icon": "^4.14.2",
"@uiw/utils": "^4.14.2"
}
}
4 changes: 2 additions & 2 deletions packages/react-card/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-card",
"version": "4.14.1",
"version": "4.14.2",
"description": "Card component",
"author": "Kenny Wong <wowohoo@qq.com>",
"homepage": "https://uiwjs.github.io/#/components/card",
@@ -44,6 +44,6 @@
"react-dom": ">=16.9.0"
},
"dependencies": {
"@uiw/utils": "^4.14.1"
"@uiw/utils": "^4.14.2"
}
}
146 changes: 146 additions & 0 deletions packages/react-carousel/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
Carousel 走马灯
===

[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-carousel/file/README.md)
[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-carousel.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-carousel)
[![npm version](https://img.shields.io/npm/v/@uiw/react-carousel.svg?label=@uiw/react-carousel)](https://npmjs.com/@uiw/react-carousel)

滚动播放。在 v4.15.0+ 添加。

```jsx
import { Carousel } from 'uiw';
// or
import Carousel from '@uiw/react-carousel';
```

## 基础用法

最简单的用法。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import React from 'react';
import { Carousel } from 'uiw';

function Demo() {
return (
<Carousel>
<div style={{ height: '100%', background: '#1EABCD' }}>
<span>1</span>
</div>
<div style={{ height: '100%', background: '#393b46' }}>
<span>2</span>
</div>
<div style={{ height: '100%', background: '#008EF0' }}>
<span>3</span>
</div>
<div style={{ height: '100%', background: '#393E48' }}>
<span>4</span>
</div>
</Carousel>
);
}

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

## 控制播放频率

palyTime设置每帧停留时间，scrollTime设置切换帧的速度

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import React from 'react';
import { Carousel } from 'uiw';

function Demo() {
return (
<Carousel palyTime={1000} scrollTime={500}>
<div style={{ height: '100%', background: '#1EABCD' }}>
<span>1</span>
</div>
<div style={{ height: '100%', background: '#393b46' }}>
<span>2</span>
</div>
<div style={{ height: '100%', background: '#008EF0' }}>
<span>3</span>
</div>
<div style={{ height: '100%', background: '#393E48' }}>
<span>4</span>
</div>
</Carousel>
);
}

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

## 切换到指定帧

手动切换到指定帧的位置

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import React from 'react';
import { Carousel } from 'uiw';

function Demo() {

const ref=React.useRef()
const [autoPlay,autoPlaySet]=React.useState(true)

return (
<React.Fragment>
<Carousel ref={ref} position={2} autoPlay={autoPlay}>
<div style={{ height: '100%', background: '#1EABCD' }}>
<span>1</span>
</div>
<div style={{ height: '100%', background: '#393b46' }}>
<span>2</span>
</div>
<div style={{ height: '100%', background: '#008EF0' }}>
<span>3</span>
</div>
<div style={{ height: '100%', background: '#393E48' }}>
<span>4</span>
</div>
</Carousel>
<button onClick={() => ref.current.gotoSlide(1)}>跳转</button>
<button onClick={() => ref.current.prevSlide()}>上一张</button>
<button onClick={() => ref.current.nextSlide()}>下一张</button>
<button onClick={() =>autoPlaySet(autoPlay?false:true)}>{autoPlay?'暂停':'开始'}</button>
</React.Fragment>
);
}

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

## Props

## API

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| width | 宽度 | number | 400 |
| height | 高度 | number | 200 |
| position | 设置初始帧位置 | number | 0 |
| palyTime | 每帧停留时间(ms) | number | 2000 |
| scrollTime | 滚动动画的速度(ms) | number | 200 |
| autoPlay | 是否自动播放 | boolean | true |


### ref

```ts
// 跳转到指定帧
gotoSlide: (slideNumber: number) => void;
// 上一针
prevSlide: () => void;
// 下一帧
nextSlide: () => void;
// 暂停播放
stopPlay: () => void;
```


Loading