mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 04:30:06 +08:00
github-actions[bot]
GitHub
commit
83b979e2d5
5
.github/workflows/compressed-size.yml
vendored
5
.github/workflows/compressed-size.yml
vendored
@ -4,6 +4,11 @@ on:
|
||||
pull_request:
|
||||
types: [opened, synchronize]
|
||||
|
||||
# Cancel prev CI if new commit come
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
compressed-size:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
2
.github/workflows/pr-check-ci.yml
vendored
2
.github/workflows/pr-check-ci.yml
vendored
@ -13,7 +13,7 @@ jobs:
|
||||
with:
|
||||
filter-label: 'BranchAutoMerge'
|
||||
filter-creator-authority: 'write'
|
||||
filter-head-ref: 'master, feature, next, master-merge-feature, feature-merge-master, next-merge-master'
|
||||
filter-head-ref: 'master, feature, next, master-merge-feature, feature-merge-master, next-merge-master, next-merge-feature'
|
||||
filter-support-fork: false
|
||||
skip-run-names: 'deploy preview, pr-check-ci, build preview failed, suggest-related-links'
|
||||
conflict-review-body: '😅 This branch has conflicts that must be resolved!'
|
||||
|
||||
5
.github/workflows/preview-build.yml
vendored
5
.github/workflows/preview-build.yml
vendored
@ -6,6 +6,11 @@ on:
|
||||
pull_request:
|
||||
types: [opened, synchronize, reopened]
|
||||
|
||||
# Cancel prev CI if new commit come
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
# Prepare node modules. Reuse cache if available
|
||||
setup:
|
||||
|
||||
506
.github/workflows/test.yml
vendored
506
.github/workflows/test.yml
vendored
@ -4,6 +4,11 @@ name: ✅ test
|
||||
|
||||
on: [push, pull_request]
|
||||
|
||||
# Cancel prev CI if new commit come
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
setup:
|
||||
runs-on: ubuntu-latest
|
||||
@ -18,7 +23,7 @@ jobs:
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: create package-lock.json
|
||||
run: npm i --package-lock-only --ignore-scripts
|
||||
run: npm i --package-lock-only --ignore-scripts --force
|
||||
|
||||
- name: hack for single file
|
||||
run: |
|
||||
@ -35,44 +40,7 @@ jobs:
|
||||
|
||||
- name: install
|
||||
if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
|
||||
run: npm ci
|
||||
|
||||
compile:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: cache lib
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: lib
|
||||
key: lib-${{ github.sha }}
|
||||
|
||||
- name: cache es
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: es
|
||||
key: es-${{ github.sha }}
|
||||
|
||||
- name: compile
|
||||
run: npm run compile
|
||||
|
||||
- name: check
|
||||
run: node ./tests/dekko/lib.test.js
|
||||
needs: setup
|
||||
run: npm ci --force
|
||||
|
||||
lint:
|
||||
runs-on: ubuntu-latest
|
||||
@ -140,8 +108,9 @@ jobs:
|
||||
run: node ./scripts/check-demo.js
|
||||
needs: setup
|
||||
|
||||
react-17-dom:
|
||||
name: react@17.x / dom
|
||||
################################ Dist ################################
|
||||
dist:
|
||||
name: dist
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: checkout
|
||||
@ -159,38 +128,21 @@ jobs:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: test
|
||||
run: npm test -- -w 1 --coverage
|
||||
|
||||
- name: coverage
|
||||
run: bash <(curl -s https://codecov.io/bash)
|
||||
needs: setup
|
||||
|
||||
react-17-node:
|
||||
name: react@17.x / node
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
- name: cache dist
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
path: dist
|
||||
key: dist-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: test
|
||||
run: npm run test-node
|
||||
- name: dist
|
||||
run: npm run dist
|
||||
env:
|
||||
NODE_OPTIONS: --max_old_space_size=4096
|
||||
needs: setup
|
||||
|
||||
react-17-lib:
|
||||
name: react@17.x / lib
|
||||
############################### Style ################################
|
||||
style-compile:
|
||||
name: es style compile
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: checkout
|
||||
@ -214,142 +166,22 @@ jobs:
|
||||
path: lib
|
||||
key: lib-${{ github.sha }}
|
||||
|
||||
- name: test
|
||||
run: npm test
|
||||
env:
|
||||
LIB_DIR: lib
|
||||
needs: compile
|
||||
|
||||
react-17-es:
|
||||
name: react@17.x / es
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: restore cache from es
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: es
|
||||
key: es-${{ github.sha }}
|
||||
|
||||
- name: test
|
||||
run: npm test
|
||||
env:
|
||||
LIB_DIR: es
|
||||
- name: lessc component
|
||||
run: npx lessc --js ./es/button/style/index.less
|
||||
|
||||
- name: lessc mixins
|
||||
run: npx lessc --js ./es/style/mixins/index.less
|
||||
needs: compile
|
||||
|
||||
react-17-dist:
|
||||
name: react@17.x / dist
|
||||
style-dist:
|
||||
name: dist style compile
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: dist
|
||||
run: npm run dist
|
||||
env:
|
||||
NODE_OPTIONS: --max_old_space_size=4096
|
||||
|
||||
- name: check
|
||||
run: node ./tests/dekko/dist.test.js
|
||||
|
||||
- name: bundlesize
|
||||
run: npm run bundlesize
|
||||
env:
|
||||
BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.BUNDLESIZE_GITHUB_TOKEN }}
|
||||
|
||||
- name: test
|
||||
run: npm test
|
||||
env:
|
||||
LIB_DIR: dist
|
||||
needs: setup
|
||||
|
||||
react-16-dom:
|
||||
name: react@16.x / dom
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
REACT: 16
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: install react 16
|
||||
run: npm run install-react-16
|
||||
|
||||
- name: test
|
||||
run: npm test -- -w 1 --coverage
|
||||
needs: setup
|
||||
|
||||
react-16-node:
|
||||
name: react@16.x / node
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
REACT: 16
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: install react 16
|
||||
run: npm run install-react-16
|
||||
|
||||
- name: test
|
||||
run: npm run test-node
|
||||
needs: setup
|
||||
|
||||
react-16-lib:
|
||||
name: react@16.x / lib
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
REACT: 16
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
@ -372,115 +204,17 @@ jobs:
|
||||
path: lib
|
||||
key: lib-${{ github.sha }}
|
||||
|
||||
- name: install react 16
|
||||
run: npm run install-react-16
|
||||
|
||||
- name: test
|
||||
run: npm test
|
||||
env:
|
||||
LIB_DIR: lib
|
||||
needs: compile
|
||||
|
||||
react-16-es:
|
||||
name: react@16.x / es
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
REACT: 16
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: restore cache from es
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: es
|
||||
key: es-${{ github.sha }}
|
||||
|
||||
- name: install react 16
|
||||
run: npm run install-react-16
|
||||
|
||||
- name: test
|
||||
run: npm test
|
||||
env:
|
||||
LIB_DIR: es
|
||||
needs: compile
|
||||
|
||||
react-16-dist:
|
||||
name: react@16.x / dist
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
REACT: 16
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
- name: restore cache from dist
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: install react 16
|
||||
run: npm run install-react-16
|
||||
|
||||
- name: dist
|
||||
run: npm run dist
|
||||
env:
|
||||
NODE_OPTIONS: --max_old_space_size=4096
|
||||
|
||||
- name: check
|
||||
run: node ./tests/dekko/dist.test.js
|
||||
|
||||
- name: test
|
||||
run: npm test
|
||||
env:
|
||||
LIB_DIR: dist
|
||||
needs: setup
|
||||
|
||||
style:
|
||||
name: style compile
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: compile
|
||||
run: npm run compile
|
||||
|
||||
- name: dist
|
||||
run: npm run dist
|
||||
env:
|
||||
NODE_OPTIONS: --max_old_space_size=4096
|
||||
path: dist
|
||||
key: dist-${{ github.sha }}
|
||||
|
||||
- name: lessc default
|
||||
run: npx lessc --js ./dist/antd.less
|
||||
@ -490,10 +224,182 @@ jobs:
|
||||
|
||||
- name: lessc variable
|
||||
run: npx lessc --js ./dist/antd.variable.less
|
||||
needs: [compile, dist]
|
||||
|
||||
- name: lessc component
|
||||
run: npx lessc --js ./es/button/style/index.less
|
||||
################################ Test ################################
|
||||
normal-test:
|
||||
name: test
|
||||
strategy:
|
||||
matrix:
|
||||
react: ['16', '17']
|
||||
# react: ['17', '18']
|
||||
module: ['dom', 'node', 'dist']
|
||||
env:
|
||||
REACT: ${{ matrix.react }}
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: lessc mixins
|
||||
run: npx lessc --js ./es/style/mixins/index.less
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: install react 16
|
||||
if: ${{ matrix.react == '16' }}
|
||||
run: npm run install-react-16
|
||||
|
||||
- name: install react 17
|
||||
if: ${{ matrix.react == '17' }}
|
||||
run: npm run install-react-17
|
||||
|
||||
- name: install react 18
|
||||
if: ${{ matrix.react == '18' }}
|
||||
run: npm run install-react-18
|
||||
|
||||
- name: restore cache from dist
|
||||
if: ${{ matrix.module == 'dist' }}
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: dist
|
||||
key: dist-${{ github.sha }}
|
||||
|
||||
- name: check
|
||||
if: ${{ matrix.module == 'dist' }}
|
||||
run: node ./tests/dekko/dist.test.js
|
||||
|
||||
# 17 only
|
||||
- name: bundlesize
|
||||
if: ${{ matrix.module == 'dist' && matrix.react == '17' }}
|
||||
run: npm run bundlesize
|
||||
env:
|
||||
BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.BUNDLESIZE_GITHUB_TOKEN }}
|
||||
|
||||
# dom test
|
||||
- name: dom test
|
||||
if: ${{ matrix.module == 'dom' }}
|
||||
run: npm test -- -w 1 --coverage
|
||||
|
||||
# > 17 only
|
||||
- name: coverage
|
||||
if: ${{ matrix.module == 'dom' && matrix.react == '17' }}
|
||||
run: bash <(curl -s https://codecov.io/bash)
|
||||
|
||||
# node test
|
||||
- name: node test
|
||||
if: ${{ matrix.module == 'node' }}
|
||||
run: npm run test-node
|
||||
|
||||
# dist test
|
||||
- name: dist test
|
||||
if: ${{ matrix.module == 'dist' }}
|
||||
run: npm test
|
||||
env:
|
||||
LIB_DIR: dist
|
||||
needs: [setup, dist]
|
||||
|
||||
########################### Compile & Test ###########################
|
||||
compile:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: cache lib
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: lib
|
||||
key: lib-${{ github.sha }}
|
||||
|
||||
- name: cache es
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: es
|
||||
key: es-${{ github.sha }}
|
||||
|
||||
- name: compile
|
||||
run: npm run compile
|
||||
|
||||
- name: check
|
||||
run: node ./tests/dekko/lib.test.js
|
||||
needs: setup
|
||||
|
||||
compiled-module-test:
|
||||
name: module test
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
matrix:
|
||||
react: ['16', '17']
|
||||
# react: ['17', '18']
|
||||
module: [lib, es]
|
||||
env:
|
||||
REACT: ${{ matrix.react }}
|
||||
steps:
|
||||
- name: checkout
|
||||
# lib only run in master branch not in pull request
|
||||
if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: restore cache from package-lock.json
|
||||
# lib only run in master branch not in pull request
|
||||
if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: package-temp-dir
|
||||
key: lock-${{ github.sha }}
|
||||
|
||||
- name: restore cache from node_modules
|
||||
# lib only run in master branch not in pull request
|
||||
if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
|
||||
|
||||
- name: restore cache from ${{ matrix.module }}
|
||||
# lib only run in master branch not in pull request
|
||||
if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: ${{ matrix.module }}
|
||||
key: ${{ matrix.module }}-${{ github.sha }}
|
||||
|
||||
- name: install react 16
|
||||
if: ${{ matrix.react == '16' && (github.event_name != 'pull_request' || matrix.module != 'lib') }}
|
||||
run: npm run install-react-16
|
||||
|
||||
- name: install react 17
|
||||
if: ${{ matrix.react == '17' && (github.event_name != 'pull_request' || matrix.module != 'lib') }}
|
||||
run: npm run install-react-17
|
||||
|
||||
- name: install react 18
|
||||
if: ${{ matrix.react == '18' && (github.event_name != 'pull_request' || matrix.module != 'lib') }}
|
||||
run: npm run install-react-18
|
||||
|
||||
- name: test
|
||||
# lib only run in master branch not in pull request
|
||||
if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
|
||||
run: npm test
|
||||
env:
|
||||
LIB_DIR: ${{ matrix.module }}
|
||||
needs: compile
|
||||
5
.github/workflows/ui.yml
vendored
5
.github/workflows/ui.yml
vendored
@ -7,6 +7,11 @@ on:
|
||||
branches:
|
||||
- master
|
||||
|
||||
# Cancel prev CI if new commit come
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
@ -15,6 +15,16 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.19.4
|
||||
|
||||
`2022-03-27`
|
||||
|
||||
- 🐞 Fix when `fullscreen` of the Calendar is `false`, the element returned by `dateFullCellRender` cannot be interactive. [#34614](https://github.com/ant-design/ant-design/pull/34614) [@imoctopus](https://github.com/imoctopus)
|
||||
- 🐞 fix BackTop responsive in RTL. [#34626](https://github.com/ant-design/ant-design/pull/34626) [@hmz22](https://github.com/hmz22)
|
||||
- 🐞 Fix text position in Steps with `small` size and `dot` mode. [#34651](https://github.com/ant-design/ant-design/pull/34651)
|
||||
- 🐞 Fix Descriptions `contentStyle` not working when children is 0. [#34696](https://github.com/ant-design/ant-design/pull/34696) [@zhao-huo-long](https://github.com/zhao-huo-long)
|
||||
- 🐞 Fix notification prevent interaction on elements which under it. [#34716](https://github.com/ant-design/ant-design/pull/34716)
|
||||
|
||||
## 4.19.3
|
||||
|
||||
`2022-03-21`
|
||||
|
||||
@ -15,6 +15,16 @@ timeline: true
|
||||
|
||||
---
|
||||
|
||||
## 4.19.4
|
||||
|
||||
`2022-03-27`
|
||||
|
||||
- 🐞 修复当 Calendar 的 `fullscreen` 为 `false` 时，`dateFullCellRender` 返回的元素不可交互的问题。[#34614](https://github.com/ant-design/ant-design/pull/34614) [@imoctopus](https://github.com/imoctopus)
|
||||
- 🐞 修复 BackTop 的部分 `rtl` 样式问题。[#34626](https://github.com/ant-design/ant-design/pull/34626) [@hmz22](https://github.com/hmz22)
|
||||
- 🐞 修复小尺寸 Steps `dot` 模式下文字位置偏移的问题。[#34651](https://github.com/ant-design/ant-design/pull/34651)
|
||||
- 🐞 修复 Descriptions 内容为 0 时 `contentStyle` 不生效的问题。[#34696](https://github.com/ant-design/ant-design/pull/34696) [@zhao-huo-long](https://github.com/zhao-huo-long)
|
||||
- 🐞 修复 notification 会遮挡后面元素交互的问题。[#34716](https://github.com/ant-design/ant-design/pull/34716)
|
||||
|
||||
## 4.19.3
|
||||
|
||||
`2022-03-21`
|
||||
|
||||
@ -62,9 +62,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
|
||||
return (
|
||||
<li>
|
||||
{link}
|
||||
{separator && (
|
||||
<span className={`${prefixCls}-separator`}>{separator}</span>
|
||||
)}
|
||||
{separator && <span className={`${prefixCls}-separator`}>{separator}</span>}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,12 +3,12 @@ import { mount, render } from 'enzyme';
|
||||
import Breadcrumb from '../index';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import accessibilityTest from "../../../tests/shared/accessibilityTest";
|
||||
import accessibilityTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
describe('Breadcrumb', () => {
|
||||
mountTest(Breadcrumb);
|
||||
rtlTest(Breadcrumb);
|
||||
accessibilityTest(Breadcrumb)
|
||||
accessibilityTest(Breadcrumb);
|
||||
|
||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
|
||||
@ -108,11 +108,6 @@ describe('Carousel', () => {
|
||||
});
|
||||
|
||||
it('should keep initialSlide', () => {
|
||||
// react unsafe lifecycle don't works in React 15
|
||||
// https://github.com/akiran/react-slick/commit/97988e897750e1d8f7b10a86b655f50d75d38298
|
||||
if (process.env.REACT === '15') {
|
||||
return;
|
||||
}
|
||||
const wrapper = mount(<Carousel initialSlide={1} />);
|
||||
wrapper.setProps({
|
||||
children: [<div key="1" />, <div key="2" />, <div key="3" />],
|
||||
|
||||
@ -16645,7 +16645,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
|
||||
>
|
||||
<div
|
||||
aria-label="Page Size"
|
||||
class="config-select config-select-lg config-pagination-options-size-changer config-select-single config-select-show-arrow"
|
||||
class="config-select config-pagination-options-size-changer config-select-single config-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="config-select-selector"
|
||||
@ -18746,7 +18746,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
class="config-progress-bg"
|
||||
style="width:0%;height:8px;border-radius:"
|
||||
style="width:0%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -18771,7 +18771,7 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1
|
||||
>
|
||||
<div
|
||||
class="config-progress-bg"
|
||||
style="width:0%;height:8px;border-radius:"
|
||||
style="width:0%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -18796,7 +18796,7 @@ exports[`ConfigProvider components Progress configProvider componentSize middle
|
||||
>
|
||||
<div
|
||||
class="config-progress-bg"
|
||||
style="width:0%;height:8px;border-radius:"
|
||||
style="width:0%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -18821,7 +18821,7 @@ exports[`ConfigProvider components Progress configProvider virtual and dropdownM
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:0%;height:8px;border-radius:"
|
||||
style="width:0%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -18846,7 +18846,7 @@ exports[`ConfigProvider components Progress normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:0%;height:8px;border-radius:"
|
||||
style="width:0%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -18871,7 +18871,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
class="prefix-Progress-bg"
|
||||
style="width:0%;height:8px;border-radius:"
|
||||
style="width:0%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
align-items: center;
|
||||
background: @picker-bg;
|
||||
border: @border-width-base @border-style-base @select-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: @control-border-radius;
|
||||
transition: border @animation-duration-slow, box-shadow @animation-duration-slow;
|
||||
|
||||
&:hover,
|
||||
|
||||
@ -60,7 +60,7 @@ const Cell: React.FC<CellProps> = ({
|
||||
colSpan={span}
|
||||
>
|
||||
<div className={`${itemPrefixCls}-item-container`}>
|
||||
{label && (
|
||||
{(label || label === 0) && (
|
||||
<span
|
||||
className={classNames(`${itemPrefixCls}-item-label`, {
|
||||
[`${itemPrefixCls}-item-no-colon`]: !colon,
|
||||
@ -70,7 +70,7 @@ const Cell: React.FC<CellProps> = ({
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
{content && (
|
||||
{(content || content === 0) && (
|
||||
<span className={classNames(`${itemPrefixCls}-item-content`)} style={contentStyle}>
|
||||
{content}
|
||||
</span>
|
||||
|
||||
@ -209,6 +209,46 @@ exports[`Descriptions column is number 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Descriptions number 0 should render correct 1`] = `
|
||||
<div
|
||||
class="ant-descriptions"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-view"
|
||||
>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<td
|
||||
class="ant-descriptions-item"
|
||||
colspan="1"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-item-container"
|
||||
>
|
||||
<span
|
||||
class="ant-descriptions-item-label"
|
||||
style="color: red;"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
<span
|
||||
class="ant-descriptions-item-content"
|
||||
style="color: red;"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Descriptions should work with React Fragment 1`] = `
|
||||
<div
|
||||
class="ant-descriptions"
|
||||
|
||||
@ -238,4 +238,15 @@ describe('Descriptions', () => {
|
||||
wrapper.setProps({ extra: undefined });
|
||||
expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(false);
|
||||
});
|
||||
|
||||
it('number 0 should render correct', () => {
|
||||
const wrapper = mount(
|
||||
<Descriptions>
|
||||
<Descriptions.Item label={0} labelStyle={{ color: 'red' }} contentStyle={{ color: 'red' }}>
|
||||
{0}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>,
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -11,52 +11,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
|
||||
## Design concept
|
||||
|
||||
<div class="grid-demo">
|
||||
<div class="ant-row demo-row">
|
||||
<div class="ant-col-24 demo-col demo-col-1">
|
||||
100%
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row demo-row">
|
||||
<div class="ant-col-6 demo-col demo-col-2">
|
||||
25%
|
||||
</div>
|
||||
<div class="ant-col-6 demo-col demo-col-3">
|
||||
25%
|
||||
</div>
|
||||
<div class="ant-col-6 demo-col demo-col-2">
|
||||
25%
|
||||
</div>
|
||||
<div class="ant-col-6 demo-col demo-col-3">
|
||||
25%
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row demo-row">
|
||||
<div class="ant-col-8 demo-col demo-col-4">
|
||||
33.33%
|
||||
</div>
|
||||
<div class="ant-col-8 demo-col demo-col-5">
|
||||
33.33%
|
||||
</div>
|
||||
<div class="ant-col-8 demo-col demo-col-4">
|
||||
33.33%
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row demo-row">
|
||||
<div class="ant-col-12 demo-col demo-col-1">
|
||||
50%
|
||||
</div>
|
||||
<div class="ant-col-12 demo-col demo-col-3">
|
||||
50%
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row demo-row">
|
||||
<div class="ant-col-16 demo-col demo-col-4">
|
||||
66.66%
|
||||
</div>
|
||||
<div class="ant-col-8 demo-col demo-col-5">
|
||||
33.33%
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
|
||||
</div>
|
||||
|
||||
In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.
|
||||
|
||||
@ -12,52 +12,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
|
||||
## 设计理念
|
||||
|
||||
<div class="grid-demo">
|
||||
<div class="ant-row demo-row">
|
||||
<div class="ant-col-24 demo-col demo-col-1">
|
||||
100%
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row demo-row">
|
||||
<div class="ant-col-6 demo-col demo-col-2">
|
||||
25%
|
||||
</div>
|
||||
<div class="ant-col-6 demo-col demo-col-3">
|
||||
25%
|
||||
</div>
|
||||
<div class="ant-col-6 demo-col demo-col-2">
|
||||
25%
|
||||
</div>
|
||||
<div class="ant-col-6 demo-col demo-col-3">
|
||||
25%
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row demo-row">
|
||||
<div class="ant-col-8 demo-col demo-col-4">
|
||||
33.33%
|
||||
</div>
|
||||
<div class="ant-col-8 demo-col demo-col-5">
|
||||
33.33%
|
||||
</div>
|
||||
<div class="ant-col-8 demo-col demo-col-4">
|
||||
33.33%
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row demo-row">
|
||||
<div class="ant-col-12 demo-col demo-col-1">
|
||||
50%
|
||||
</div>
|
||||
<div class="ant-col-12 demo-col demo-col-3">
|
||||
50%
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-row demo-row">
|
||||
<div class="ant-col-16 demo-col demo-col-4">
|
||||
66.66%
|
||||
</div>
|
||||
<div class="ant-col-8 demo-col demo-col-5">
|
||||
33.33%
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
|
||||
</div>
|
||||
|
||||
在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。
|
||||
|
||||
@ -66,7 +66,7 @@
|
||||
background-color: @input-bg;
|
||||
background-image: none;
|
||||
border: @border-width-base @border-style-base @input-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: @control-border-radius;
|
||||
transition: all 0.3s;
|
||||
.placeholder(); // Reset placeholder
|
||||
|
||||
@ -193,7 +193,7 @@
|
||||
text-align: center;
|
||||
background-color: @input-addon-bg;
|
||||
border: @border-width-base @border-style-base @input-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: @control-border-radius;
|
||||
transition: all 0.3s;
|
||||
|
||||
// Reset Select's style in addon
|
||||
@ -297,8 +297,8 @@
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
.@{ant-prefix}-input-search & {
|
||||
border-top-left-radius: @border-radius-base;
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
border-top-left-radius: @control-border-radius;
|
||||
border-bottom-left-radius: @control-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
@ -384,8 +384,8 @@
|
||||
& > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
|
||||
& > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
|
||||
border-top-left-radius: @border-radius-base;
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
border-top-left-radius: @control-border-radius;
|
||||
border-bottom-left-radius: @control-border-radius;
|
||||
}
|
||||
|
||||
& > *:last-child,
|
||||
@ -393,8 +393,8 @@
|
||||
& > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
|
||||
& > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
|
||||
border-right-width: @border-width-base;
|
||||
border-top-right-radius: @border-radius-base;
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
border-top-right-radius: @control-border-radius;
|
||||
border-bottom-right-radius: @control-border-radius;
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/12493
|
||||
@ -416,7 +416,7 @@
|
||||
}
|
||||
|
||||
& > .@{ant-prefix}-input {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
border-radius: @control-border-radius 0 0 @control-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -151,7 +151,7 @@ describe('List Item Layout', () => {
|
||||
renderItem={item => <List.Item>{item.title}</List.Item>}
|
||||
/>,
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('rowKey could be function', () => {
|
||||
@ -176,6 +176,6 @@ describe('List Item Layout', () => {
|
||||
renderItem={item => <List.Item>{item.title}</List.Item>}
|
||||
/>,
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -58,139 +58,71 @@ exports[`List Item Layout horizontal itemLayout List should accept extra node 1`
|
||||
`;
|
||||
|
||||
exports[`List Item Layout rowKey could be function 1`] = `
|
||||
<List
|
||||
dataSource={
|
||||
Array [
|
||||
Object {
|
||||
"id": 1,
|
||||
"title": "ant design",
|
||||
},
|
||||
Object {
|
||||
"id": 2,
|
||||
"title": "ant design",
|
||||
},
|
||||
Object {
|
||||
"id": 3,
|
||||
"title": "ant design",
|
||||
},
|
||||
]
|
||||
}
|
||||
renderItem={[Function]}
|
||||
rowKey={[Function]}
|
||||
<div
|
||||
class="ant-list ant-list-split"
|
||||
>
|
||||
<div
|
||||
className="ant-list ant-list-split"
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<Spin
|
||||
size="default"
|
||||
spinning={false}
|
||||
wrapperClassName=""
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
className="ant-spin-nested-loading"
|
||||
<ul
|
||||
class="ant-list-items"
|
||||
>
|
||||
<div
|
||||
className="ant-spin-container"
|
||||
key="container"
|
||||
<li
|
||||
class="ant-list-item"
|
||||
>
|
||||
<ul
|
||||
className="ant-list-items"
|
||||
>
|
||||
<Item>
|
||||
<li
|
||||
className="ant-list-item"
|
||||
>
|
||||
ant design
|
||||
</li>
|
||||
</Item>
|
||||
<Item>
|
||||
<li
|
||||
className="ant-list-item"
|
||||
>
|
||||
ant design
|
||||
</li>
|
||||
</Item>
|
||||
<Item>
|
||||
<li
|
||||
className="ant-list-item"
|
||||
>
|
||||
ant design
|
||||
</li>
|
||||
</Item>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
ant design
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item"
|
||||
>
|
||||
ant design
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item"
|
||||
>
|
||||
ant design
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</List>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`List Item Layout rowKey could be string 1`] = `
|
||||
<List
|
||||
dataSource={
|
||||
Array [
|
||||
Object {
|
||||
"id": 1,
|
||||
"title": "ant design",
|
||||
},
|
||||
Object {
|
||||
"id": 2,
|
||||
"title": "ant design",
|
||||
},
|
||||
Object {
|
||||
"id": 3,
|
||||
"title": "ant design",
|
||||
},
|
||||
]
|
||||
}
|
||||
renderItem={[Function]}
|
||||
rowKey="id"
|
||||
<div
|
||||
class="ant-list ant-list-split"
|
||||
>
|
||||
<div
|
||||
className="ant-list ant-list-split"
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<Spin
|
||||
size="default"
|
||||
spinning={false}
|
||||
wrapperClassName=""
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
className="ant-spin-nested-loading"
|
||||
<ul
|
||||
class="ant-list-items"
|
||||
>
|
||||
<div
|
||||
className="ant-spin-container"
|
||||
key="container"
|
||||
<li
|
||||
class="ant-list-item"
|
||||
>
|
||||
<ul
|
||||
className="ant-list-items"
|
||||
>
|
||||
<Item>
|
||||
<li
|
||||
className="ant-list-item"
|
||||
>
|
||||
ant design
|
||||
</li>
|
||||
</Item>
|
||||
<Item>
|
||||
<li
|
||||
className="ant-list-item"
|
||||
>
|
||||
ant design
|
||||
</li>
|
||||
</Item>
|
||||
<Item>
|
||||
<li
|
||||
className="ant-list-item"
|
||||
>
|
||||
ant design
|
||||
</li>
|
||||
</Item>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>
|
||||
ant design
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item"
|
||||
>
|
||||
ant design
|
||||
</li>
|
||||
<li
|
||||
class="ant-list-item"
|
||||
>
|
||||
ant design
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</List>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`List Item Layout should render in RTL direction 1`] = `
|
||||
|
||||
@ -188,7 +188,7 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/notification/demo/placement.md extend context correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -255,11 +255,11 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
/>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -326,11 +326,11 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
/>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -397,8 +397,8 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/notification/demo/update.md extend context correctly 1`] = `
|
||||
|
||||
@ -188,7 +188,7 @@ Array [
|
||||
`;
|
||||
|
||||
exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -255,11 +255,11 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
/>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -326,11 +326,11 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
/>,
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
@ -397,8 +397,8 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/notification/demo/update.md correctly 1`] = `
|
||||
|
||||
@ -41,8 +41,9 @@ describe('Notification.placement', () => {
|
||||
});
|
||||
style = getStyle($$('.ant-notification-top')[0]);
|
||||
expect(style.top).toBe('50px');
|
||||
expect(style.left).toBe('0px');
|
||||
expect(style.right).toBe('0px');
|
||||
expect(style.left).toBe('50%');
|
||||
expect(style.transform).toBe('translateX(-50%)');
|
||||
expect(style.right).toBe('');
|
||||
expect(style.bottom).toBe('');
|
||||
|
||||
open({
|
||||
@ -86,8 +87,9 @@ describe('Notification.placement', () => {
|
||||
});
|
||||
style = getStyle($$('.ant-notification-bottom')[0]);
|
||||
expect(style.top).toBe('');
|
||||
expect(style.left).toBe('0px');
|
||||
expect(style.right).toBe('0px');
|
||||
expect(style.left).toBe('50%');
|
||||
expect(style.transform).toBe('translateX(-50%)');
|
||||
expect(style.right).toBe('');
|
||||
expect(style.bottom).toBe('100px');
|
||||
|
||||
open({
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
通知从右上角、右下角、左下角、左上角弹出。
|
||||
使用 `placement` 可以配置通知从右上角、右下角、左下角、左上角弹出。
|
||||
|
||||
## en-US
|
||||
|
||||
A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport.
|
||||
A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport via `placement`.
|
||||
|
||||
```jsx
|
||||
import { Button, notification, Divider, Space } from 'antd';
|
||||
@ -34,40 +34,54 @@ const openNotification = placement => {
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Space>
|
||||
<Button type="primary" onClick={() => openNotification('top')}>
|
||||
<BorderTopOutlined />
|
||||
<Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
|
||||
top
|
||||
</Button>
|
||||
<Button type="primary" onClick={() => openNotification('bottom')}>
|
||||
<BorderBottomOutlined />
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => openNotification('bottom')}
|
||||
icon={<BorderBottomOutlined />}
|
||||
>
|
||||
bottom
|
||||
</Button>
|
||||
</Space>
|
||||
<Divider />
|
||||
<Space>
|
||||
<Button type="primary" onClick={() => openNotification('topLeft')}>
|
||||
<RadiusUpleftOutlined />
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => openNotification('topLeft')}
|
||||
icon={<RadiusUpleftOutlined />}
|
||||
>
|
||||
topLeft
|
||||
</Button>
|
||||
<Button type="primary" onClick={() => openNotification('topRight')}>
|
||||
<RadiusUprightOutlined />
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => openNotification('topRight')}
|
||||
icon={<RadiusUprightOutlined />}
|
||||
>
|
||||
topRight
|
||||
</Button>
|
||||
</Space>
|
||||
<Divider />
|
||||
<Space>
|
||||
<Button type="primary" onClick={() => openNotification('bottomLeft')}>
|
||||
<RadiusBottomleftOutlined />
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => openNotification('bottomLeft')}
|
||||
icon={<RadiusBottomleftOutlined />}
|
||||
>
|
||||
bottomLeft
|
||||
</Button>
|
||||
<Button type="primary" onClick={() => openNotification('bottomRight')}>
|
||||
<RadiusBottomrightOutlined />
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => openNotification('bottomRight')}
|
||||
icon={<RadiusBottomrightOutlined />}
|
||||
>
|
||||
bottomRight
|
||||
</Button>
|
||||
</Space>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -87,8 +87,9 @@ function getPlacementStyle(
|
||||
switch (placement) {
|
||||
case 'top':
|
||||
style = {
|
||||
left: 0,
|
||||
right: 0,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
right: 'auto',
|
||||
top,
|
||||
bottom: 'auto',
|
||||
};
|
||||
@ -109,8 +110,9 @@ function getPlacementStyle(
|
||||
break;
|
||||
case 'bottom':
|
||||
style = {
|
||||
left: 0,
|
||||
right: 0,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
right: 'auto',
|
||||
top: 'auto',
|
||||
bottom,
|
||||
};
|
||||
|
||||
@ -16,25 +16,6 @@
|
||||
z-index: @zindex-notification;
|
||||
margin-right: @notification-margin-edge;
|
||||
|
||||
&-top,
|
||||
&-bottom,
|
||||
&-topLeft,
|
||||
&-bottomLeft {
|
||||
margin-right: 0;
|
||||
margin-left: @notification-margin-edge;
|
||||
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationLeftFadeIn;
|
||||
}
|
||||
}
|
||||
|
||||
&-top,
|
||||
&-bottom {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&-close-icon {
|
||||
font-size: @font-size-base;
|
||||
cursor: pointer;
|
||||
@ -206,18 +187,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationLeftFadeIn {
|
||||
0% {
|
||||
right: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationFadeOut {
|
||||
0% {
|
||||
max-height: 150px;
|
||||
@ -235,3 +204,4 @@
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
@import './placement';
|
||||
|
||||
68
components/notification/style/placement.less
Normal file
68
components/notification/style/placement.less
Normal file
@ -0,0 +1,68 @@
|
||||
.@{notification-prefix-cls} {
|
||||
&-top,
|
||||
&-bottom {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-top {
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationTopFadeIn;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationBottomFadeIn;
|
||||
}
|
||||
}
|
||||
|
||||
&-topLeft,
|
||||
&-bottomLeft {
|
||||
margin-right: 0;
|
||||
margin-left: @notification-margin-edge;
|
||||
|
||||
.@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
|
||||
.@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
|
||||
animation-name: NotificationLeftFadeIn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationTopFadeIn {
|
||||
0% {
|
||||
margin-top: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationBottomFadeIn {
|
||||
0% {
|
||||
margin-bottom: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes NotificationLeftFadeIn {
|
||||
0% {
|
||||
right: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import Select from '../select';
|
||||
|
||||
interface MiniSelectInterface extends React.FC<any> {
|
||||
Option: typeof Select.Option;
|
||||
}
|
||||
|
||||
const MiniSelect: MiniSelectInterface = props => <Select size="small" {...props} />;
|
||||
|
||||
MiniSelect.Option = Select.Option;
|
||||
|
||||
export default MiniSelect;
|
||||
@ -9,9 +9,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined';
|
||||
import RightOutlined from '@ant-design/icons/RightOutlined';
|
||||
import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined';
|
||||
import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
|
||||
|
||||
import MiniSelect from './MiniSelect';
|
||||
import Select from '../select';
|
||||
import { MiniSelect, MiddleSelect } from './Select';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import useBreakpoint from '../grid/hooks/useBreakpoint';
|
||||
@ -109,7 +107,7 @@ const Pagination: React.FC<PaginationProps> = ({
|
||||
prefixCls={prefixCls}
|
||||
selectPrefixCls={selectPrefixCls}
|
||||
className={extendedClassName}
|
||||
selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : Select)}
|
||||
selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : MiddleSelect)}
|
||||
locale={locale}
|
||||
/>
|
||||
);
|
||||
|
||||
16
components/pagination/Select.tsx
Normal file
16
components/pagination/Select.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import * as React from 'react';
|
||||
import Select from '../select';
|
||||
import type { SelectProps } from '../select';
|
||||
|
||||
interface MiniOrMiddleSelectInterface extends React.FC<SelectProps> {
|
||||
Option: typeof Select.Option;
|
||||
}
|
||||
|
||||
const MiniSelect: MiniOrMiddleSelectInterface = props => <Select {...props} size="small" />;
|
||||
const MiddleSelect: MiniOrMiddleSelectInterface = props => <Select {...props} size="middle" />;
|
||||
|
||||
MiniSelect.Option = Select.Option;
|
||||
MiddleSelect.Option = Select.Option;
|
||||
|
||||
export { MiniSelect, MiddleSelect };
|
||||
|
||||
@ -1,89 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Pagination rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<ul
|
||||
class="ant-pagination ant-pagination-rtl"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-disabled"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
exports[`Pagination should be rendered correctly in RTL 1`] = `
|
||||
exports[`Pagination ConfigProvider should be rendered correctly in RTL 1`] = `
|
||||
<ul
|
||||
class="ant-pagination ant-pagination-rtl"
|
||||
unselectable="unselectable"
|
||||
@ -209,3 +126,280 @@ exports[`Pagination should be rendered correctly in RTL 1`] = `
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
exports[`Pagination ConfigProvider should be rendered correctly when componentSize is large 1`] = `
|
||||
<ul
|
||||
class="ant-pagination"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-2"
|
||||
tabindex="0"
|
||||
title="2"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
2
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-3"
|
||||
tabindex="0"
|
||||
title="3"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
3
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-4"
|
||||
tabindex="0"
|
||||
title="4"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-5"
|
||||
tabindex="0"
|
||||
title="5"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
5
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="false"
|
||||
class="ant-pagination-next"
|
||||
tabindex="0"
|
||||
title="Next Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-options"
|
||||
>
|
||||
<div
|
||||
aria-label="Page Size"
|
||||
class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-label="Page Size"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="10 / page"
|
||||
>
|
||||
10 / page
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select: none;"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
exports[`Pagination rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<ul
|
||||
class="ant-pagination ant-pagination-rtl"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-prev ant-pagination-disabled"
|
||||
title="Previous Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-disabled"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a
|
||||
rel="nofollow"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-next ant-pagination-disabled"
|
||||
title="Next Page"
|
||||
>
|
||||
<button
|
||||
class="ant-pagination-item-link"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { mount } from 'enzyme';
|
||||
import Pagination from '..';
|
||||
import Select from '../../select';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
@ -10,15 +10,6 @@ describe('Pagination', () => {
|
||||
mountTest(Pagination);
|
||||
rtlTest(Pagination);
|
||||
|
||||
it('should be rendered correctly in RTL', () => {
|
||||
const wrapper = mount(
|
||||
<ConfigProvider direction="rtl">
|
||||
<Pagination defaultCurrent={1} total={50} />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(render(wrapper)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should pass disabled to prev and next buttons', () => {
|
||||
const itemRender = (current, type, originalElement) => {
|
||||
if (type === 'prev') {
|
||||
@ -69,4 +60,25 @@ describe('Pagination', () => {
|
||||
);
|
||||
expect(wrapper.find('.custom-select').length).toBeTruthy();
|
||||
});
|
||||
|
||||
describe('ConfigProvider', () => {
|
||||
it('should be rendered correctly in RTL', () => {
|
||||
const wrapper = mount(
|
||||
<ConfigProvider direction="rtl">
|
||||
<Pagination defaultCurrent={1} total={50} />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should be rendered correctly when componentSize is large', () => {
|
||||
const wrapper = mount(
|
||||
<ConfigProvider componentSize="large">
|
||||
<Pagination defaultCurrent={1} total={50} showSizeChanger />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
expect(wrapper.find('.ant-select-lg').length).toBe(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -92,7 +92,7 @@ const Line: React.FC<LineProps> = props => {
|
||||
const percentStyle = {
|
||||
width: `${validProgress(percent)}%`,
|
||||
height: strokeWidth || (size === 'small' ? 6 : 8),
|
||||
borderRadius: strokeLinecap === 'square' ? 0 : '',
|
||||
borderRadius: strokeLinecap === 'square' ? 0 : undefined,
|
||||
...backgroundProps,
|
||||
} as React.CSSProperties;
|
||||
|
||||
@ -101,7 +101,7 @@ const Line: React.FC<LineProps> = props => {
|
||||
const successPercentStyle = {
|
||||
width: `${validProgress(successPercent)}%`,
|
||||
height: strokeWidth || (size === 'small' ? 6 : 8),
|
||||
borderRadius: strokeLinecap === 'square' ? 0 : '',
|
||||
borderRadius: strokeLinecap === 'square' ? 0 : undefined,
|
||||
backgroundColor: success?.strokeColor,
|
||||
} as React.CSSProperties;
|
||||
|
||||
|
||||
@ -643,7 +643,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:0%;height:8px;border-radius:"
|
||||
style="width:0%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -839,7 +839,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
|
||||
style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -861,7 +861,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9, #87d068)"
|
||||
style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9, #87d068)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1049,7 +1049,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:30%;height:8px;border-radius:"
|
||||
style="width:30%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1071,7 +1071,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:50%;height:8px;border-radius:"
|
||||
style="width:50%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1093,7 +1093,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:70%;height:8px;border-radius:"
|
||||
style="width:70%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1132,7 +1132,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:100%;height:8px;border-radius:"
|
||||
style="width:100%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1171,7 +1171,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:50%;height:8px;border-radius:"
|
||||
style="width:50%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1194,7 +1194,7 @@ exports[`renders ./components/progress/demo/line-mini.md extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:30%;height:6px;border-radius:"
|
||||
style="width:30%;height:6px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1216,7 +1216,7 @@ exports[`renders ./components/progress/demo/line-mini.md extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:50%;height:6px;border-radius:"
|
||||
style="width:50%;height:6px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1238,7 +1238,7 @@ exports[`renders ./components/progress/demo/line-mini.md extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:70%;height:6px;border-radius:"
|
||||
style="width:70%;height:6px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1277,7 +1277,7 @@ exports[`renders ./components/progress/demo/line-mini.md extend context correctl
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:100%;height:6px;border-radius:"
|
||||
style="width:100%;height:6px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1456,11 +1456,11 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:60%;height:8px;border-radius:"
|
||||
style="width:60%;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-success-bg"
|
||||
style="width:30%;height:8px;border-radius:"
|
||||
style="width:30%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -643,7 +643,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:0%;height:8px;border-radius:"
|
||||
style="width:0%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -839,7 +839,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
|
||||
style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -861,7 +861,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9, #87d068)"
|
||||
style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9, #87d068)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1049,7 +1049,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:30%;height:8px;border-radius:"
|
||||
style="width:30%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1071,7 +1071,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:50%;height:8px;border-radius:"
|
||||
style="width:50%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1093,7 +1093,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:70%;height:8px;border-radius:"
|
||||
style="width:70%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1132,7 +1132,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:100%;height:8px;border-radius:"
|
||||
style="width:100%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1171,7 +1171,7 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:50%;height:8px;border-radius:"
|
||||
style="width:50%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1194,7 +1194,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:30%;height:6px;border-radius:"
|
||||
style="width:30%;height:6px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1216,7 +1216,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:50%;height:6px;border-radius:"
|
||||
style="width:50%;height:6px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1238,7 +1238,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:70%;height:6px;border-radius:"
|
||||
style="width:70%;height:6px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1277,7 +1277,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:100%;height:6px;border-radius:"
|
||||
style="width:100%;height:6px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -1456,11 +1456,11 @@ Array [
|
||||
>
|
||||
<div
|
||||
class="ant-progress-bg"
|
||||
style="width:60%;height:8px;border-radius:"
|
||||
style="width:60%;height:8px"
|
||||
/>
|
||||
<div
|
||||
class="ant-progress-success-bg"
|
||||
style="width:30%;height:8px;border-radius:"
|
||||
style="width:30%;height:8px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -421,129 +421,53 @@ exports[`Progress render strokeColor 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Progress render strokeColor 2`] = `
|
||||
<Progress
|
||||
percent={50}
|
||||
showInfo={true}
|
||||
size="default"
|
||||
strokeColor={
|
||||
Object {
|
||||
"from": "#108ee9",
|
||||
"to": "#87d068",
|
||||
}
|
||||
}
|
||||
strokeLinecap="round"
|
||||
trailColor={null}
|
||||
type="line"
|
||||
<div
|
||||
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
class="ant-progress-outer"
|
||||
>
|
||||
<Line
|
||||
percent={50}
|
||||
prefixCls="ant-progress"
|
||||
showInfo={true}
|
||||
size="default"
|
||||
strokeColor={
|
||||
Object {
|
||||
"from": "#108ee9",
|
||||
"to": "#87d068",
|
||||
}
|
||||
}
|
||||
strokeLinecap="round"
|
||||
trailColor={null}
|
||||
type="line"
|
||||
<div
|
||||
class="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"backgroundImage": "linear-gradient(to right, #108ee9, #87d068)",
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="50%"
|
||||
>
|
||||
50%
|
||||
</span>
|
||||
</Line>
|
||||
class="ant-progress-bg"
|
||||
style="width: 50%; height: 8px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Progress>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
title="50%"
|
||||
>
|
||||
50%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Progress render strokeColor 3`] = `
|
||||
<Progress
|
||||
percent={50}
|
||||
showInfo={true}
|
||||
size="default"
|
||||
strokeColor={
|
||||
Object {
|
||||
"0%": "#108ee9",
|
||||
"100%": "#87d068",
|
||||
}
|
||||
}
|
||||
strokeLinecap="round"
|
||||
trailColor={null}
|
||||
type="line"
|
||||
<div
|
||||
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<div
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
class="ant-progress-outer"
|
||||
>
|
||||
<Line
|
||||
percent={50}
|
||||
prefixCls="ant-progress"
|
||||
showInfo={true}
|
||||
size="default"
|
||||
strokeColor={
|
||||
Object {
|
||||
"0%": "#108ee9",
|
||||
"100%": "#87d068",
|
||||
}
|
||||
}
|
||||
strokeLinecap="round"
|
||||
trailColor={null}
|
||||
type="line"
|
||||
<div
|
||||
class="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-outer"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-inner"
|
||||
>
|
||||
<div
|
||||
className="ant-progress-bg"
|
||||
style={
|
||||
Object {
|
||||
"backgroundImage": "linear-gradient(to right, #108ee9 0%, #87d068 100%)",
|
||||
"borderRadius": "",
|
||||
"height": 8,
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="ant-progress-text"
|
||||
title="50%"
|
||||
>
|
||||
50%
|
||||
</span>
|
||||
</Line>
|
||||
class="ant-progress-bg"
|
||||
style="width: 50%; height: 8px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Progress>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
title="50%"
|
||||
>
|
||||
50%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Progress render successColor progress 1`] = `
|
||||
|
||||
@ -62,14 +62,14 @@ describe('Progress', () => {
|
||||
},
|
||||
type: 'line',
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
wrapper.setProps({
|
||||
strokeColor: {
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
},
|
||||
});
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('render normal progress', () => {
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
position: relative;
|
||||
background-color: @select-background;
|
||||
border: @border-width-base @border-style-base @select-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: @control-border-radius;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
|
||||
input {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
import classNames from 'classnames';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import Element, { SkeletonElementProps } from './Element';
|
||||
|
||||
export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
|
||||
@ -9,25 +9,24 @@ export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
|
||||
}
|
||||
|
||||
const SkeletonAvatar = (props: AvatarProps) => {
|
||||
const renderSkeletonAvatar = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
const { prefixCls: customizePrefixCls, className, active } = props;
|
||||
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
||||
const otherProps = omit(props, ['prefixCls', 'className']);
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-element`,
|
||||
{
|
||||
[`${prefixCls}-active`]: active,
|
||||
},
|
||||
className,
|
||||
);
|
||||
return (
|
||||
<div className={cls}>
|
||||
<Element prefixCls={`${prefixCls}-avatar`} {...otherProps} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return <ConfigConsumer>{renderSkeletonAvatar}</ConfigConsumer>;
|
||||
const { prefixCls: customizePrefixCls, className, active } = props;
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
||||
|
||||
const otherProps = omit(props, ['prefixCls', 'className']);
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-element`,
|
||||
{
|
||||
[`${prefixCls}-active`]: active,
|
||||
},
|
||||
className,
|
||||
);
|
||||
return (
|
||||
<div className={cls}>
|
||||
<Element prefixCls={`${prefixCls}-avatar`} {...otherProps} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SkeletonAvatar.defaultProps = {
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
import classNames from 'classnames';
|
||||
import Element, { SkeletonElementProps } from './Element';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
|
||||
export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> {
|
||||
size?: 'large' | 'small' | 'default';
|
||||
@ -10,26 +10,25 @@ export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'>
|
||||
}
|
||||
|
||||
const SkeletonButton = (props: SkeletonButtonProps) => {
|
||||
const renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
const { prefixCls: customizePrefixCls, className, active, block = false } = props;
|
||||
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
||||
const otherProps = omit(props, ['prefixCls']);
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-element`,
|
||||
{
|
||||
[`${prefixCls}-active`]: active,
|
||||
[`${prefixCls}-block`]: block,
|
||||
},
|
||||
className,
|
||||
);
|
||||
return (
|
||||
<div className={cls}>
|
||||
<Element prefixCls={`${prefixCls}-button`} {...otherProps} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return <ConfigConsumer>{renderSkeletonButton}</ConfigConsumer>;
|
||||
const { prefixCls: customizePrefixCls, className, active, block = false } = props;
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
||||
|
||||
const otherProps = omit(props, ['prefixCls']);
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-element`,
|
||||
{
|
||||
[`${prefixCls}-active`]: active,
|
||||
[`${prefixCls}-block`]: block,
|
||||
},
|
||||
className,
|
||||
);
|
||||
return (
|
||||
<div className={cls}>
|
||||
<Element prefixCls={`${prefixCls}-button`} {...otherProps} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SkeletonButton.defaultProps = {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { SkeletonElementProps } from './Element';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
|
||||
export interface SkeletonImageProps
|
||||
extends Omit<SkeletonElementProps, 'size' | 'shape' | 'active'> {}
|
||||
@ -10,26 +10,24 @@ const path =
|
||||
'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z';
|
||||
|
||||
const SkeletonImage = (props: SkeletonImageProps) => {
|
||||
const renderSkeletonImage = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
const { prefixCls: customizePrefixCls, className, style } = props;
|
||||
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
||||
const cls = classNames(prefixCls, `${prefixCls}-element`, className);
|
||||
const { prefixCls: customizePrefixCls, className, style } = props;
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
||||
const cls = classNames(prefixCls, `${prefixCls}-element`, className);
|
||||
|
||||
return (
|
||||
<div className={cls}>
|
||||
<div className={classNames(`${prefixCls}-image`, className)} style={style}>
|
||||
<svg
|
||||
viewBox="0 0 1098 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`${prefixCls}-image-svg`}
|
||||
>
|
||||
<path d={path} className={`${prefixCls}-image-path`} />
|
||||
</svg>
|
||||
</div>
|
||||
return (
|
||||
<div className={cls}>
|
||||
<div className={classNames(`${prefixCls}-image`, className)} style={style}>
|
||||
<svg
|
||||
viewBox="0 0 1098 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`${prefixCls}-image-svg`}
|
||||
>
|
||||
<path d={path} className={`${prefixCls}-image-path`} />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return <ConfigConsumer>{renderSkeletonImage}</ConfigConsumer>;
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SkeletonImage;
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
import omit from 'rc-util/lib/omit';
|
||||
import classNames from 'classnames';
|
||||
import Element, { SkeletonElementProps } from './Element';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
|
||||
export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
|
||||
size?: 'large' | 'small' | 'default';
|
||||
@ -10,26 +10,25 @@ export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' |
|
||||
}
|
||||
|
||||
const SkeletonInput = (props: SkeletonInputProps) => {
|
||||
const renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
const { prefixCls: customizePrefixCls, className, active, block } = props;
|
||||
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
||||
const otherProps = omit(props, ['prefixCls']);
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-element`,
|
||||
{
|
||||
[`${prefixCls}-active`]: active,
|
||||
[`${prefixCls}-block`]: block,
|
||||
},
|
||||
className,
|
||||
);
|
||||
return (
|
||||
<div className={cls}>
|
||||
<Element prefixCls={`${prefixCls}-input`} {...otherProps} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return <ConfigConsumer>{renderSkeletonInput}</ConfigConsumer>;
|
||||
const { prefixCls: customizePrefixCls, className, active, block } = props;
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
||||
|
||||
const otherProps = omit(props, ['prefixCls']);
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
`${prefixCls}-element`,
|
||||
{
|
||||
[`${prefixCls}-active`]: active,
|
||||
[`${prefixCls}-block`]: block,
|
||||
},
|
||||
className,
|
||||
);
|
||||
return (
|
||||
<div className={cls}>
|
||||
<Element prefixCls={`${prefixCls}-input`} {...otherProps} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SkeletonInput.defaultProps = {
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Title, { SkeletonTitleProps } from './Title';
|
||||
import Paragraph, { SkeletonParagraphProps } from './Paragraph';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import Element from './Element';
|
||||
import SkeletonAvatar, { AvatarProps } from './Avatar';
|
||||
import SkeletonButton from './Button';
|
||||
@ -72,99 +72,96 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton
|
||||
}
|
||||
|
||||
const Skeleton = (props: SkeletonProps) => {
|
||||
const renderSkeleton = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
loading,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
avatar,
|
||||
title,
|
||||
paragraph,
|
||||
active,
|
||||
round,
|
||||
} = props;
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
loading,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
avatar,
|
||||
title,
|
||||
paragraph,
|
||||
active,
|
||||
round,
|
||||
} = props;
|
||||
|
||||
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
|
||||
|
||||
if (loading || !('loading' in props)) {
|
||||
const hasAvatar = !!avatar;
|
||||
const hasTitle = !!title;
|
||||
const hasParagraph = !!paragraph;
|
||||
if (loading || !('loading' in props)) {
|
||||
const hasAvatar = !!avatar;
|
||||
const hasTitle = !!title;
|
||||
const hasParagraph = !!paragraph;
|
||||
|
||||
// Avatar
|
||||
let avatarNode;
|
||||
if (hasAvatar) {
|
||||
const avatarProps: SkeletonAvatarProps = {
|
||||
prefixCls: `${prefixCls}-avatar`,
|
||||
...getAvatarBasicProps(hasTitle, hasParagraph),
|
||||
...getComponentProps(avatar),
|
||||
};
|
||||
// We direct use SkeletonElement as avatar in skeleton internal.
|
||||
avatarNode = (
|
||||
<div className={`${prefixCls}-header`}>
|
||||
<Element {...avatarProps} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let contentNode;
|
||||
if (hasTitle || hasParagraph) {
|
||||
// Title
|
||||
let $title;
|
||||
if (hasTitle) {
|
||||
const titleProps: SkeletonTitleProps = {
|
||||
prefixCls: `${prefixCls}-title`,
|
||||
...getTitleBasicProps(hasAvatar, hasParagraph),
|
||||
...getComponentProps(title),
|
||||
};
|
||||
|
||||
$title = <Title {...titleProps} />;
|
||||
}
|
||||
|
||||
// Paragraph
|
||||
let paragraphNode;
|
||||
if (hasParagraph) {
|
||||
const paragraphProps: SkeletonParagraphProps = {
|
||||
prefixCls: `${prefixCls}-paragraph`,
|
||||
...getParagraphBasicProps(hasAvatar, hasTitle),
|
||||
...getComponentProps(paragraph),
|
||||
};
|
||||
|
||||
paragraphNode = <Paragraph {...paragraphProps} />;
|
||||
}
|
||||
|
||||
contentNode = (
|
||||
<div className={`${prefixCls}-content`}>
|
||||
{$title}
|
||||
{paragraphNode}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-with-avatar`]: hasAvatar,
|
||||
[`${prefixCls}-active`]: active,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-round`]: round,
|
||||
},
|
||||
className,
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={cls} style={style}>
|
||||
{avatarNode}
|
||||
{contentNode}
|
||||
// Avatar
|
||||
let avatarNode;
|
||||
if (hasAvatar) {
|
||||
const avatarProps: SkeletonAvatarProps = {
|
||||
prefixCls: `${prefixCls}-avatar`,
|
||||
...getAvatarBasicProps(hasTitle, hasParagraph),
|
||||
...getComponentProps(avatar),
|
||||
};
|
||||
// We direct use SkeletonElement as avatar in skeleton internal.
|
||||
avatarNode = (
|
||||
<div className={`${prefixCls}-header`}>
|
||||
<Element {...avatarProps} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return children;
|
||||
};
|
||||
return <ConfigConsumer>{renderSkeleton}</ConfigConsumer>;
|
||||
let contentNode;
|
||||
if (hasTitle || hasParagraph) {
|
||||
// Title
|
||||
let $title;
|
||||
if (hasTitle) {
|
||||
const titleProps: SkeletonTitleProps = {
|
||||
prefixCls: `${prefixCls}-title`,
|
||||
...getTitleBasicProps(hasAvatar, hasParagraph),
|
||||
...getComponentProps(title),
|
||||
};
|
||||
|
||||
$title = <Title {...titleProps} />;
|
||||
}
|
||||
|
||||
// Paragraph
|
||||
let paragraphNode;
|
||||
if (hasParagraph) {
|
||||
const paragraphProps: SkeletonParagraphProps = {
|
||||
prefixCls: `${prefixCls}-paragraph`,
|
||||
...getParagraphBasicProps(hasAvatar, hasTitle),
|
||||
...getComponentProps(paragraph),
|
||||
};
|
||||
|
||||
paragraphNode = <Paragraph {...paragraphProps} />;
|
||||
}
|
||||
|
||||
contentNode = (
|
||||
<div className={`${prefixCls}-content`}>
|
||||
{$title}
|
||||
{paragraphNode}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-with-avatar`]: hasAvatar,
|
||||
[`${prefixCls}-active`]: active,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-round`]: round,
|
||||
},
|
||||
className,
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={cls} style={style}>
|
||||
{avatarNode}
|
||||
{contentNode}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return children as React.ReactElement;
|
||||
};
|
||||
|
||||
Skeleton.defaultProps = {
|
||||
|
||||
@ -34,6 +34,11 @@ describe('Skeleton', () => {
|
||||
expect(wrapperSmall.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should display children', () => {
|
||||
const wrapper = mount(<Skeleton loading={false}>{[1, 2, 3]}</Skeleton>);
|
||||
expect(wrapper.text()).toBe('123');
|
||||
});
|
||||
|
||||
describe('avatar', () => {
|
||||
it('size', () => {
|
||||
const wrapperSmall = genSkeleton({ avatar: { size: 'small' } });
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { render, mount } from 'enzyme';
|
||||
import { act } from 'react-test-renderer';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import Space from '..';
|
||||
import ConfigProvider from '../../config-provider';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
@ -1,18 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Spin if indicator set null should not be render default indicator 1`] = `
|
||||
<Spin
|
||||
indicator={null}
|
||||
size="default"
|
||||
spinning={true}
|
||||
wrapperClassName=""
|
||||
>
|
||||
<div
|
||||
aria-busy={true}
|
||||
aria-live="polite"
|
||||
className="ant-spin ant-spin-spinning"
|
||||
/>
|
||||
</Spin>
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Spin rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
@ -53,19 +46,13 @@ exports[`Spin should render custom indicator when it's set 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Spin should support static method Spin.setDefaultIndicator 1`] = `
|
||||
<Spin
|
||||
size="default"
|
||||
spinning={true}
|
||||
wrapperClassName=""
|
||||
<div
|
||||
aria-busy="true"
|
||||
aria-live="polite"
|
||||
class="ant-spin ant-spin-spinning"
|
||||
>
|
||||
<div
|
||||
aria-busy={true}
|
||||
aria-live="polite"
|
||||
className="ant-spin ant-spin-spinning"
|
||||
>
|
||||
<em
|
||||
className="custom-spinner ant-spin-dot"
|
||||
/>
|
||||
</div>
|
||||
</Spin>
|
||||
<em
|
||||
class="custom-spinner ant-spin-dot"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -33,13 +33,13 @@ describe('Spin', () => {
|
||||
|
||||
it('if indicator set null should not be render default indicator', () => {
|
||||
const wrapper = mount(<Spin indicator={null} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should support static method Spin.setDefaultIndicator', () => {
|
||||
Spin.setDefaultIndicator(<em className="custom-spinner" />);
|
||||
const wrapper = mount(<Spin />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
Spin.setDefaultIndicator(null);
|
||||
});
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
pointer-events: none;
|
||||
|
||||
&.@{ant-prefix}-zoom-enter,
|
||||
&.@{ant-prefix}zoom-appear {
|
||||
&.@{ant-prefix}-zoom-appear {
|
||||
transform: none; // reset scale avoid mousePosition bug
|
||||
opacity: 0;
|
||||
animation-duration: @animation-duration-slow;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
@width-without-unit: unit(@width);
|
||||
@outer-radius-without-unit: unit(@outer-radius);
|
||||
@inner-radius-without-unit: unit(@border-radius-base);
|
||||
@inner-radius-without-unit: unit(@arrow-border-radius);
|
||||
|
||||
@a-x: @width-without-unit - @corner-height;
|
||||
@a-y: 2 * @width-without-unit + @corner-height;
|
||||
|
||||
@ -108,6 +108,12 @@
|
||||
@border-radius-base: 2px;
|
||||
@border-radius-sm: @border-radius-base;
|
||||
|
||||
// control border
|
||||
@control-border-radius: @border-radius-base;
|
||||
|
||||
// arrow border
|
||||
@arrow-border-radius: @border-radius-sm;
|
||||
|
||||
// vertical paddings
|
||||
@padding-lg: 24px; // containers
|
||||
@padding-md: 16px; // small containers and buttons
|
||||
@ -521,6 +527,7 @@
|
||||
@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
|
||||
// Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
@tooltip-border-radius: @border-radius-base;
|
||||
|
||||
// Popover
|
||||
// ---
|
||||
@ -668,6 +675,7 @@
|
||||
|
||||
// Tag
|
||||
// --
|
||||
@tag-border-radius: @border-radius-base;
|
||||
@tag-default-bg: @background-color-light;
|
||||
@tag-default-color: @text-color;
|
||||
@tag-font-size: @font-size-sm;
|
||||
|
||||
@ -163,6 +163,12 @@ html {
|
||||
@border-radius-base: 2px;
|
||||
@border-radius-sm: @border-radius-base;
|
||||
|
||||
// control border
|
||||
@control-border-radius: @border-radius-base;
|
||||
|
||||
// arrow border
|
||||
@arrow-border-radius: @border-radius-sm;
|
||||
|
||||
// vertical paddings
|
||||
@padding-lg: 24px; // containers
|
||||
@padding-md: 16px; // small containers and buttons
|
||||
@ -576,6 +582,7 @@ html {
|
||||
@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
|
||||
// Tooltip arrow color
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
@tooltip-border-radius: @border-radius-base;
|
||||
|
||||
// Popover
|
||||
// ---
|
||||
@ -723,6 +730,7 @@ html {
|
||||
|
||||
// Tag
|
||||
// --
|
||||
@tag-border-radius: @border-radius-base;
|
||||
@tag-default-bg: @background-color-light;
|
||||
@tag-default-color: @text-color;
|
||||
@tag-font-size: @font-size-sm;
|
||||
|
||||
@ -33,7 +33,7 @@ Ant Design has 3 types of Tabs for different situations.
|
||||
| size | Preset tab bar size | `large` \| `default` \| `small` | `default` | |
|
||||
| tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
||||
| tabBarGutter | The gap between tabs | number | - | |
|
||||
| tabBarStyle | Tab bar style object | object | - | |
|
||||
| tabBarStyle | Tab bar style object | CSSProperties | - | |
|
||||
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` | |
|
||||
| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | |
|
||||
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` | |
|
||||
|
||||
@ -36,7 +36,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
||||
| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` | |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
||||
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
||||
| tabBarStyle | tab bar 的样式对象 | object | - | |
|
||||
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
||||
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | |
|
||||
| destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | |
|
||||
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | |
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
white-space: nowrap;
|
||||
background: @tag-default-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: @tag-border-radius;
|
||||
opacity: 1;
|
||||
transition: all 0.3s;
|
||||
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
text-decoration: none;
|
||||
word-wrap: break-word;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
border-radius: @tooltip-border-radius;
|
||||
box-shadow: @box-shadow-base;
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ title: 社区精选组件
|
||||
|
||||
| 类型 | 推荐组件 |
|
||||
| --- | --- |
|
||||
| 可视化图表 | [Ant Design Charts](https://charts.ant.design/zh-CN/) [AntV 数据可视化解决方案](https://antv.vision/zh) |
|
||||
| 可视化图表 | [Ant Design Charts](https://charts.ant.design/zh) [AntV 数据可视化解决方案](https://antv.vision/zh) |
|
||||
| React Hooks 库 | [ahooks](https://github.com/alibaba/hooks) |
|
||||
| 表单 | [ProForm](https://procomponents.ant.design/components/form) [Formily](https://github.com/alibaba/formily) [react-hook-form](https://github.com/react-hook-form/react-hook-form) [formik](https://github.com/formium/formik) |
|
||||
| 路由 | [react-router](https://github.com/ReactTraining/react-router) |
|
||||
|
||||
11
package.json
11
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "4.19.3",
|
||||
"version": "4.19.5-alpha.0",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"title": "Ant Design",
|
||||
"keywords": [
|
||||
@ -99,7 +99,9 @@
|
||||
"site:test": "jest --config .jest.site.js --cache=false --force-exit",
|
||||
"test-image": "npm run dist && docker-compose run tests",
|
||||
"version": "node ./scripts/generate-version",
|
||||
"install-react-16": "npm i --no-save --legacy-peer-deps react@16 react-dom@16 react-test-renderer@16 enzyme-adapter-react-16",
|
||||
"install-react-16": "npm i --no-save --legacy-peer-deps react@16 react-dom@16 enzyme-adapter-react-16",
|
||||
"install-react-17": "npm i --no-save --legacy-peer-deps react@17 react-dom@17",
|
||||
"install-react-18": "npm i --no-save --legacy-peer-deps react@18 react-dom@18",
|
||||
"argos": "argos upload imageSnapshots"
|
||||
},
|
||||
"browserslist": [
|
||||
@ -247,12 +249,12 @@
|
||||
"rc-footer": "^0.6.6",
|
||||
"rc-tween-one": "^3.0.3",
|
||||
"rc-virtual-list": "^3.4.2",
|
||||
"react": "^17.0.1",
|
||||
"react": "^17.0.0",
|
||||
"react-color": "^2.17.3",
|
||||
"react-copy-to-clipboard": "^5.0.1",
|
||||
"react-dnd": "^15.0.0",
|
||||
"react-dnd-html5-backend": "^15.0.0",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-dom": "^17.0.0",
|
||||
"react-draggable": "^4.4.3",
|
||||
"react-fast-marquee": "^1.2.1",
|
||||
"react-github-button": "^0.1.11",
|
||||
@ -264,7 +266,6 @@
|
||||
"react-router-dom": "^6.0.2",
|
||||
"react-sortable-hoc": "^2.0.0",
|
||||
"react-sticky": "^6.0.3",
|
||||
"react-test-renderer": "^17.0.1",
|
||||
"react-text-loop-next": "0.0.3",
|
||||
"react-window": "^1.8.5",
|
||||
"remark": "^14.0.1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user