diff --git a/.eslintrc.js b/.eslintrc.js index e8d77a26..3a578b59 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,10 +15,7 @@ module.exports = { 'react/no-unused-prop-types': 0, 'max-len': 0, 'max-classes-per-file': 0, - 'import/no-extraneous-dependencies': [ - 'error', - { devDependencies: true, optionalDependencies: false, peerDependencies: false }, - ], + 'import/no-extraneous-dependencies': 0, 'brace-style': 0, 'no-unused-expressions': 0, '@typescript-eslint/no-unused-expressions': 1, diff --git a/.gitignore b/.gitignore index 456bec7d..1b0597ee 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,9 @@ es coverage yarn.lock package-lock.json + +# umi +.umi +.umi-production +.umi-test +.env.local diff --git a/.umirc.ts b/.umirc.ts new file mode 100644 index 00000000..6887a982 --- /dev/null +++ b/.umirc.ts @@ -0,0 +1,17 @@ +// more config: https://d.umijs.org/config +import { defineConfig } from 'dumi'; + +export default defineConfig({ + title: 'rc-tabs', + favicon: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', + logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', + outputPath: '.doc', + exportStatic: {}, + styles: [ + ` + .markdown table { + width: auto !important; + } + `, + ], +}); \ No newline at end of file diff --git a/HISTORY.md b/CHANGELOG.md similarity index 99% rename from HISTORY.md rename to CHANGELOG.md index 6667fcbf..c441ff64 100644 --- a/HISTORY.md +++ b/CHANGELOG.md @@ -1,5 +1,4 @@ -# History ----- +# Changelog https://github.com/react-component/tabs/releases diff --git a/README.md b/README.md index f390cddd..2bbf9e03 100644 --- a/README.md +++ b/README.md @@ -4,13 +4,7 @@ React Tabs component. -[![NPM version][npm-image]][npm-url] -[![build status][github-actions-image]][github-actions-url] -[![Test coverage][coveralls-image]][coveralls-url] -[![Dependencies][david-image]][david-url] -[![DevDependencies][david-dev-image]][david-dev-url] -[![npm download][download-image]][download-url] -[![bundle size][bundlephobia-image]][bundlephobia-url] +[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![Dependencies][david-image]][david-url] [![DevDependencies][david-dev-image]][david-dev-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [npm-image]: http://img.shields.io/npm/v/rc-tabs.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-tabs @@ -53,7 +47,7 @@ online example: https://tabs.react-component.now.sh/ ## Usage -```jsx +```js import Tabs, { TabPane } from 'rc-tabs'; var callback = function(key) {}; diff --git a/docs/demo/basic.md b/docs/demo/basic.md new file mode 100644 index 00000000..d27d11d4 --- /dev/null +++ b/docs/demo/basic.md @@ -0,0 +1,3 @@ +## basic + + \ No newline at end of file diff --git a/docs/demo/extra.md b/docs/demo/extra.md new file mode 100644 index 00000000..18ede969 --- /dev/null +++ b/docs/demo/extra.md @@ -0,0 +1,3 @@ +## extra + + \ No newline at end of file diff --git a/docs/demo/mix.md b/docs/demo/mix.md new file mode 100644 index 00000000..6f3e387e --- /dev/null +++ b/docs/demo/mix.md @@ -0,0 +1,3 @@ +## mix + + \ No newline at end of file diff --git a/docs/demo/overflow.md b/docs/demo/overflow.md new file mode 100644 index 00000000..aa4ee6d0 --- /dev/null +++ b/docs/demo/overflow.md @@ -0,0 +1,3 @@ +## overflow + + \ No newline at end of file diff --git a/docs/demo/position.md b/docs/demo/position.md new file mode 100644 index 00000000..db95550d --- /dev/null +++ b/docs/demo/position.md @@ -0,0 +1,3 @@ +## position + + \ No newline at end of file diff --git a/docs/demo/renderTabBar-dragable.md b/docs/demo/renderTabBar-dragable.md new file mode 100644 index 00000000..a0f4bb7d --- /dev/null +++ b/docs/demo/renderTabBar-dragable.md @@ -0,0 +1,3 @@ +## renderTabBar-dragable + + \ No newline at end of file diff --git a/docs/demo/renderTabBar-sticky.md b/docs/demo/renderTabBar-sticky.md new file mode 100644 index 00000000..96c88806 --- /dev/null +++ b/docs/demo/renderTabBar-sticky.md @@ -0,0 +1,3 @@ +## renderTabBar-sticky + + \ No newline at end of file diff --git a/docs/demo/renderTabBar-use-panes.md b/docs/demo/renderTabBar-use-panes.md new file mode 100644 index 00000000..4a94f500 --- /dev/null +++ b/docs/demo/renderTabBar-use-panes.md @@ -0,0 +1,3 @@ +## renderTabBar-use-panes + + \ No newline at end of file diff --git a/examples/basic.tsx b/docs/examples/basic.tsx similarity index 92% rename from examples/basic.tsx rename to docs/examples/basic.tsx index db4710f0..8bb4b6f9 100644 --- a/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Tabs, { TabPane } from '../src'; -import '../assets/index.less'; +import Tabs, { TabPane } from 'rc-tabs'; +import '../../assets/index.less'; export default () => { const [destroy, setDestroy] = React.useState(false); diff --git a/examples/extra.tsx b/docs/examples/extra.tsx similarity index 97% rename from examples/extra.tsx rename to docs/examples/extra.tsx index 46cbee6a..1a4e8603 100644 --- a/examples/extra.tsx +++ b/docs/examples/extra.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Tabs, { TabPane } from '../src'; -import '../assets/index.less'; +import Tabs, { TabPane } from 'rc-tabs'; +import '../../assets/index.less'; const tabs: React.ReactElement[] = []; diff --git a/examples/mix.tsx b/docs/examples/mix.tsx similarity index 98% rename from examples/mix.tsx rename to docs/examples/mix.tsx index cc05f03b..79693c60 100644 --- a/examples/mix.tsx +++ b/docs/examples/mix.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Tabs, { TabPane } from '../src'; -import '../assets/index.less'; +import Tabs, { TabPane } from 'rc-tabs'; +import '../../assets/index.less'; function getTabPanes(count = 50) { const tabs: React.ReactElement[] = []; diff --git a/examples/overflow.tsx b/docs/examples/overflow.tsx similarity index 93% rename from examples/overflow.tsx rename to docs/examples/overflow.tsx index 5b76332e..cb941464 100644 --- a/examples/overflow.tsx +++ b/docs/examples/overflow.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Tabs, { TabPane } from '../src'; -import '../assets/index.less'; +import Tabs, { TabPane } from 'rc-tabs'; +import '../../assets/index.less'; const tabs: React.ReactElement[] = []; diff --git a/examples/position.tsx b/docs/examples/position.tsx similarity index 95% rename from examples/position.tsx rename to docs/examples/position.tsx index fb6392ab..1e2da338 100644 --- a/examples/position.tsx +++ b/docs/examples/position.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Tabs, { TabPane } from '../src'; -import '../assets/index.less'; +import Tabs, { TabPane } from 'rc-tabs'; +import '../../assets/index.less'; export default () => { const [position, setPosition] = React.useState('left'); diff --git a/examples/renderTabBar-dragable.tsx b/docs/examples/renderTabBar-dragable.tsx similarity index 98% rename from examples/renderTabBar-dragable.tsx rename to docs/examples/renderTabBar-dragable.tsx index a4cb071d..4b43c388 100644 --- a/examples/renderTabBar-dragable.tsx +++ b/docs/examples/renderTabBar-dragable.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { DndProvider, DragSource, DropTarget } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; -import Tabs from '../src'; -import '../assets/index.less'; +import Tabs from 'rc-tabs'; +import '../../assets/index.less'; const { TabPane } = Tabs; diff --git a/examples/renderTabBar-sticky.tsx b/docs/examples/renderTabBar-sticky.tsx similarity index 92% rename from examples/renderTabBar-sticky.tsx rename to docs/examples/renderTabBar-sticky.tsx index 7f34d335..a325c084 100644 --- a/examples/renderTabBar-sticky.tsx +++ b/docs/examples/renderTabBar-sticky.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { StickyContainer, Sticky } from 'react-sticky'; -import Tabs, { TabPane } from '../src'; -import '../assets/index.less'; +import Tabs, { TabPane } from 'rc-tabs'; +import '../../assets/index.less'; const renderTabBar = (props, DefaultTabBar) => ( diff --git a/examples/renderTabBar-use-panes.tsx b/docs/examples/renderTabBar-use-panes.tsx similarity index 85% rename from examples/renderTabBar-use-panes.tsx rename to docs/examples/renderTabBar-use-panes.tsx index c6c3b222..7120f377 100644 --- a/examples/renderTabBar-use-panes.tsx +++ b/docs/examples/renderTabBar-use-panes.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import Tabs, { TabPane } from '../src'; -import '../assets/index.less'; +import Tabs, { TabPane } from 'rc-tabs'; +import '../../assets/index.less'; const renderTabBar = props => { return (
{props.panes.map(pane => { - const key = pane.key; + const { key } = pane; return {key}; })}
diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 00000000..eea4076d --- /dev/null +++ b/docs/index.md @@ -0,0 +1,5 @@ +--- +title: rc-tabs +--- + + \ No newline at end of file diff --git a/package.json b/package.json index e44ae644..fc4a9907 100644 --- a/package.json +++ b/package.json @@ -29,13 +29,14 @@ }, "license": "MIT", "scripts": { - "start": "cross-env NODE_ENV=development father doc dev --storybook", - "build": "father doc build --storybook", + "start": "dumi dev", + "build": "dumi build", + "docs:deploy": "gh-pages -d .doc", "compile": "father build && npm run compile:style", "test": "father test", "coverage": "father test --coverage", "now-build": "npm run build", - "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js", + "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js", "compile:style": "lessc --js assets/index.less assets/index.css", "prepublishOnly": "npm run lint && npm run test && npm run compile && np --yolo --no-publish" }, @@ -48,12 +49,14 @@ "@umijs/fabric": "^2.3.1", "coveralls": "^3.0.6", "cross-env": "^7.0.2", + "dumi": "^1.1.0", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.7.0", "enzyme-to-json": "^3.3.4", "eslint": "^7.0.0", "fastclick": "~1.0.6", "father": "^2.29.2", + "gh-pages": "^3.1.0", "history": "^1.17.0", "immutability-helper": "^3.0.1", "less": "^3.11.1", @@ -68,7 +71,7 @@ "react-sticky": "^6.0.3", "react-test-renderer": "^16.0.0", "sortablejs": "^1.7.0", - "typescript": "^4.0.0" + "typescript": "^4.0.5" }, "dependencies": { "@babel/runtime": "^7.11.2", diff --git a/src/TabContext.ts b/src/TabContext.ts index 7a5eee8c..39ec7382 100644 --- a/src/TabContext.ts +++ b/src/TabContext.ts @@ -1,5 +1,5 @@ import { createContext } from 'react'; -import { Tab } from './interface'; +import type { Tab } from './interface'; export interface TabContextProps { tabs: Tab[]; diff --git a/src/TabNavList/AddButton.tsx b/src/TabNavList/AddButton.tsx index e00f31ab..97040d2a 100644 --- a/src/TabNavList/AddButton.tsx +++ b/src/TabNavList/AddButton.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { EditableConfig, TabsLocale } from '../interface'; +import type { EditableConfig, TabsLocale } from '../interface'; export interface AddButtonProps { prefixCls: string; diff --git a/src/TabNavList/OperationNode.tsx b/src/TabNavList/OperationNode.tsx index 37f6e8cb..d489fa6e 100644 --- a/src/TabNavList/OperationNode.tsx +++ b/src/TabNavList/OperationNode.tsx @@ -4,7 +4,7 @@ import { useState, useEffect } from 'react'; import KeyCode from 'rc-util/lib/KeyCode'; import Menu, { MenuItem } from 'rc-menu'; import Dropdown from 'rc-dropdown'; -import { Tab, TabsLocale, EditableConfig } from '../interface'; +import type { Tab, TabsLocale, EditableConfig } from '../interface'; import AddButton from './AddButton'; export interface OperationNodeProps { diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx index 99f8c513..d68d675c 100644 --- a/src/TabNavList/TabNode.tsx +++ b/src/TabNavList/TabNode.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import classNames from 'classnames'; import KeyCode from 'rc-util/lib/KeyCode'; -import { Tab, TabPosition, EditableConfig } from '../interface'; +import type { Tab, TabPosition, EditableConfig } from '../interface'; export interface TabNodeProps { id: string; diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx index 3428390b..412498a3 100644 --- a/src/TabNavList/index.tsx +++ b/src/TabNavList/index.tsx @@ -5,7 +5,7 @@ import raf from 'rc-util/lib/raf'; import ResizeObserver from 'rc-resize-observer'; import useRaf, { useRafState } from '../hooks/useRaf'; import TabNode from './TabNode'; -import { +import type { TabSizeMap, TabPosition, RenderTabBar, diff --git a/src/TabPanelList/index.tsx b/src/TabPanelList/index.tsx index df5ad8cb..ac1d0a9d 100644 --- a/src/TabPanelList/index.tsx +++ b/src/TabPanelList/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import classNames from 'classnames'; import TabContext from '../TabContext'; -import { TabPosition, AnimatedConfig } from '../interface'; +import type { TabPosition, AnimatedConfig } from '../interface'; export interface TabPanelListProps { activeKey: React.Key; diff --git a/src/Tabs.tsx b/src/Tabs.tsx index 12428f05..f04ec146 100644 --- a/src/Tabs.tsx +++ b/src/Tabs.tsx @@ -7,8 +7,9 @@ import isMobile from 'rc-util/lib/isMobile'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import TabNavList from './TabNavList'; import TabPanelList from './TabPanelList'; -import TabPane, { TabPaneProps } from './TabPanelList/TabPane'; -import { +import type { TabPaneProps } from './TabPanelList/TabPane'; +import TabPane from './TabPanelList/TabPane'; +import type { TabPosition, RenderTabBar, TabsLocale, diff --git a/src/hooks/useOffsets.ts b/src/hooks/useOffsets.ts index 7a22f87c..2cd683b0 100644 --- a/src/hooks/useOffsets.ts +++ b/src/hooks/useOffsets.ts @@ -1,5 +1,5 @@ import { useMemo } from 'react'; -import { TabSizeMap, TabOffsetMap, Tab, TabOffset } from '../interface'; +import type { TabSizeMap, TabOffsetMap, Tab, TabOffset } from '../interface'; const DEFAULT_SIZE = { width: 0, height: 0, left: 0, top: 0 }; diff --git a/src/hooks/useVisibleRange.ts b/src/hooks/useVisibleRange.ts index f9784687..7f665479 100644 --- a/src/hooks/useVisibleRange.ts +++ b/src/hooks/useVisibleRange.ts @@ -1,6 +1,6 @@ import { useMemo } from 'react'; -import { Tab, TabOffsetMap } from '../interface'; -import { TabNavListProps } from '../TabNavList'; +import type { Tab, TabOffsetMap } from '../interface'; +import type { TabNavListProps } from '../TabNavList'; const DEFAULT_SIZE = { width: 0, height: 0, left: 0, top: 0, right: 0 }; diff --git a/src/index.ts b/src/index.ts index 917fb678..093043a4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,10 @@ -import Tabs, { TabsProps } from './Tabs'; -import TabPane, { TabPaneProps } from './TabPanelList/TabPane'; +import Tabs from './Tabs'; +import type { TabsProps } from './Tabs'; +import TabPane from './TabPanelList/TabPane'; +import type { TabPaneProps } from './TabPanelList/TabPane' -export { TabPane, TabsProps, TabPaneProps }; +export type { TabsProps, TabPaneProps }; + +export { TabPane } export default Tabs; diff --git a/src/interface.ts b/src/interface.ts index 52610d30..58f78244 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,4 +1,4 @@ -import { TabPaneProps } from './TabPanelList/TabPane'; +import type { TabPaneProps } from './TabPanelList/TabPane'; export type TabSizeMap = Map< React.Key, diff --git a/tsconfig.json b/tsconfig.json index 5546c94d..7ca71bc4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,6 +3,7 @@ "target": "esnext", "moduleResolution": "node", "baseUrl": "./", + "lib": ["dom", "es2017"], "jsx": "preserve", "declaration": true, "skipLibCheck": true, diff --git a/type.d.ts b/type.d.ts new file mode 100644 index 00000000..50852db2 --- /dev/null +++ b/type.d.ts @@ -0,0 +1,3 @@ +declare module '*.css'; + +declare module '*.less'; \ No newline at end of file