├── .env ├── jest.setup.js ├── components ├── style │ ├── index.tsx │ ├── variable.less │ ├── index.less │ ├── themes.less │ ├── antd-extension.less │ └── mixins.less ├── card │ ├── style │ │ └── index.tsx │ ├── index.tsx │ ├── demo │ │ ├── icon.md │ │ ├── basic.md │ │ ├── extra.md │ │ ├── sider.md │ │ ├── percent.md │ │ └── footer.md │ ├── index.md │ ├── __tests__ │ │ └── basic.test.tsx │ └── Card.tsx ├── code │ ├── style │ │ ├── index.tsx │ │ └── index.less │ ├── index.tsx │ ├── index.md │ └── demo │ │ └── basic.md ├── switch │ ├── style │ │ └── index.tsx │ ├── index.tsx │ ├── demo │ │ ├── small.md │ │ ├── text.md │ │ └── disabled.md │ ├── index.md │ ├── __tests__ │ │ └── index.test.tsx │ └── switch.tsx ├── basic-table │ ├── style │ │ └── index.tsx │ ├── index.tsx │ ├── config.tsx │ └── demo │ │ ├── basicHalfHeader.md │ │ ├── basic.md │ │ ├── select.md │ │ ├── query.md │ │ └── basicFetch.md ├── color-select │ ├── style │ │ ├── index.ts │ │ └── index.less │ ├── index.tsx │ ├── demo │ │ ├── basic.md │ │ ├── form.md │ │ ├── disabled.md │ │ └── value.md │ └── index.md ├── data-table │ ├── style │ │ └── index.tsx │ ├── index.tsx │ ├── config.tsx │ └── demo │ │ ├── basic.md │ │ ├── query.md │ │ └── queryCompact.md ├── descriptions │ ├── style │ │ ├── index.tsx │ │ └── index.less │ ├── index.tsx │ ├── __tests__ │ │ └── index.test.tsx │ ├── index.md │ ├── demo │ │ ├── list.md │ │ ├── basic.md │ │ ├── mainTitle.md │ │ └── changeMode.md │ └── Descriptions.tsx ├── empty-line │ ├── style │ │ ├── index.tsx │ │ └── index.less │ ├── index.tsx │ ├── demo │ │ ├── basic.md │ │ └── withHeight.md │ ├── index.md │ ├── empty-line.tsx │ └── __tests__ │ │ └── index.test.tsx ├── query-form │ ├── style │ │ ├── index.tsx │ │ └── index.less │ ├── index.tsx │ ├── use-media.ts │ ├── demo │ │ ├── basic.md │ │ └── customCols.md │ ├── use-media-antd-query.ts │ └── index.md ├── virtual-select │ ├── style │ │ └── index.tsx │ ├── index.tsx │ └── demo │ │ ├── multiple.md │ │ ├── bigdata.md │ │ ├── basic.md │ │ ├── search.md │ │ └── theme.md ├── basic-form-items │ ├── style │ │ ├── index.tsx │ │ └── index.less │ ├── index.tsx │ ├── demo │ │ ├── input.md │ │ ├── select.md │ │ └── custom.md │ ├── index.md │ └── __tests__ │ │ └── input.test.tsx ├── locale │ ├── index.tsx │ ├── zh_CN.tsx │ └── en_US.tsx ├── create-global-state │ ├── useEffectOnce.ts │ ├── useIsomorphicLayoutEffect.ts │ ├── index.ts │ └── index.md ├── locale-provider │ ├── useIntl.tsx │ ├── index.tsx │ ├── context.tsx │ ├── withIntl.tsx │ └── provider.tsx ├── use-debounce │ ├── index.md │ ├── index.tsx │ └── demo │ │ └── useDebounce.md ├── use-timeout │ ├── useUpdate.ts │ ├── index.ts │ ├── index.md │ └── useTimeoutFn.ts ├── use-mounted-state │ ├── index.ts │ └── index.md ├── use-async │ ├── index.ts │ └── index.md ├── use-interval │ ├── index.ts │ └── index.md ├── use-deep-compare-effect │ ├── index.md │ ├── index.ts │ └── useCustomCompareEffect.ts ├── use-async-retry │ ├── index.ts │ └── index.md ├── create-state-context │ ├── index.ts │ └── index.md ├── use-async-fn │ ├── index.md │ └── index.ts ├── create-reducer-context │ ├── index.ts │ └── index.md ├── index.tsx ├── use-dynamic-list │ ├── index.md │ └── demo │ │ └── basic.md └── utils │ └── index.tsx ├── site ├── theme │ ├── static │ │ ├── style.js │ │ ├── theme.less │ │ ├── nprogress.less │ │ ├── docsearch.less │ │ ├── new-version-info-modal.less │ │ ├── index.less │ │ ├── not-found.less │ │ ├── motion.less │ │ ├── toc.less │ │ ├── mock-browser.less │ │ ├── page-nav.less │ │ ├── resource.less │ │ ├── footer.less │ │ ├── icons.less │ │ └── highlight.less │ ├── template │ │ ├── Home │ │ │ ├── qun.jpg │ │ │ ├── landing.png │ │ │ ├── personal.jpg │ │ │ └── index.jsx │ │ ├── Layout │ │ │ ├── github.png │ │ │ ├── Footer.jsx │ │ │ └── index.jsx │ │ ├── Content │ │ │ ├── PrevAndNext.jsx │ │ │ └── index.jsx │ │ ├── NotFound.jsx │ │ └── utils.js │ ├── index.js │ └── zh-CN.js └── bisheng.config.js ├── .travis.yml ├── .eslintignore ├── static ├── logo.png └── landing.png ├── scripts ├── deploy.js ├── copyStatic.js ├── publish.js ├── renameStart.js ├── renameEnd.js ├── changeLess2Css.js ├── sync.js ├── optimizeDist.js ├── moveDeclare.js └── theme │ └── antd-theme-webpack-plugin.js ├── .editorconfig ├── .prettierrc.js ├── .eslintrc ├── docs ├── i18n.md ├── introduce.md ├── theme.md └── develop.md ├── .gitignore ├── tsconfig.json ├── tsconfig.test.json ├── tsconfig.father.json ├── jest.config.js ├── .fatherrc.js └── README.md /.env: -------------------------------------------------------------------------------- 1 | NODE_PATH=./src -------------------------------------------------------------------------------- /jest.setup.js: -------------------------------------------------------------------------------- 1 | jest.setTimeout(100000); 2 | -------------------------------------------------------------------------------- /components/style/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /components/card/style/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /components/code/style/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /components/style/variable.less: -------------------------------------------------------------------------------- 1 | @dantd-prefix: dantd; 2 | -------------------------------------------------------------------------------- /site/theme/static/style.js: -------------------------------------------------------------------------------- 1 | 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/switch/style/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 9 4 | - 8 5 | -------------------------------------------------------------------------------- /components/basic-table/style/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /components/color-select/style/index.ts: -------------------------------------------------------------------------------- 1 | import './style.less'; 2 | -------------------------------------------------------------------------------- /components/data-table/style/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /components/descriptions/style/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /components/empty-line/style/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /components/query-form/style/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /components/virtual-select/style/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /components/basic-form-items/style/index.tsx: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | config/* 3 | webpack.* 4 | examples/* 5 | -------------------------------------------------------------------------------- /static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thedicode/dantd/HEAD/static/logo.png -------------------------------------------------------------------------------- /static/landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thedicode/dantd/HEAD/static/landing.png -------------------------------------------------------------------------------- /scripts/deploy.js: -------------------------------------------------------------------------------- 1 | var ghpages = require('gh-pages'); 2 | 3 | ghpages.publish('_site', function (err) {}); 4 | -------------------------------------------------------------------------------- /site/theme/template/Home/qun.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thedicode/dantd/HEAD/site/theme/template/Home/qun.jpg -------------------------------------------------------------------------------- /components/card/index.tsx: -------------------------------------------------------------------------------- 1 | import './style/index.less'; 2 | import Card from './Card'; 3 | 4 | export default Card; 5 | -------------------------------------------------------------------------------- /components/code/index.tsx: -------------------------------------------------------------------------------- 1 | import './style/index.less'; 2 | import Code from './code'; 3 | 4 | export default Code; 5 | -------------------------------------------------------------------------------- /site/theme/template/Home/landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thedicode/dantd/HEAD/site/theme/template/Home/landing.png -------------------------------------------------------------------------------- /components/style/index.less: -------------------------------------------------------------------------------- 1 | @import './mixins.less'; 2 | @import './antd-extension.less'; 3 | @import './variable.less'; 4 | -------------------------------------------------------------------------------- /components/switch/index.tsx: -------------------------------------------------------------------------------- 1 | import './style/index.less'; 2 | import Switch from './switch'; 3 | 4 | export default Switch; 5 | -------------------------------------------------------------------------------- /site/theme/template/Home/personal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thedicode/dantd/HEAD/site/theme/template/Home/personal.jpg -------------------------------------------------------------------------------- /site/theme/template/Layout/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thedicode/dantd/HEAD/site/theme/template/Layout/github.png -------------------------------------------------------------------------------- /components/query-form/index.tsx: -------------------------------------------------------------------------------- 1 | import './style/index.less'; 2 | import QueryForm from './QueryForm'; 3 | export default QueryForm; 4 | -------------------------------------------------------------------------------- /components/color-select/index.tsx: -------------------------------------------------------------------------------- 1 | import './style/index.less'; 2 | import ColorSelect from './ColorSelect'; 3 | export default ColorSelect; 4 | -------------------------------------------------------------------------------- /components/data-table/index.tsx: -------------------------------------------------------------------------------- 1 | import './style/index.less'; 2 | import DataTable from './DataTable'; 3 | 4 | export default DataTable; 5 | -------------------------------------------------------------------------------- /components/empty-line/index.tsx: -------------------------------------------------------------------------------- 1 | import './style/index.less'; 2 | import EmptyLine from './empty-line'; 3 | 4 | export default EmptyLine; 5 | -------------------------------------------------------------------------------- /components/basic-table/index.tsx: -------------------------------------------------------------------------------- 1 | import './style/index.less'; 2 | import BasicTable from './BasicTable'; 3 | 4 | export default BasicTable; 5 | -------------------------------------------------------------------------------- /components/descriptions/index.tsx: -------------------------------------------------------------------------------- 1 | import './style/index.less'; 2 | import Descriptions from './Descriptions'; 3 | 4 | export default Descriptions; 5 | -------------------------------------------------------------------------------- /components/virtual-select/index.tsx: -------------------------------------------------------------------------------- 1 | import './style/index.less'; 2 | import VirtualSelect from './VirtualSelect'; 3 | 4 | export default VirtualSelect; 5 | -------------------------------------------------------------------------------- /components/basic-form-items/index.tsx: -------------------------------------------------------------------------------- 1 | import './style/index.less'; 2 | import BasicFormItems from './BasicFormItems'; 3 | 4 | export default BasicFormItems; 5 | -------------------------------------------------------------------------------- /components/locale/index.tsx: -------------------------------------------------------------------------------- 1 | import zh_CN from './zh_CN'; 2 | import en_US from './en_US'; 3 | 4 | export default { 5 | 'zh-CN': zh_CN, 6 | 'en-US': en_US, 7 | }; 8 | -------------------------------------------------------------------------------- /site/theme/static/theme.less: -------------------------------------------------------------------------------- 1 | @site-heading-color: #0d1a26; 2 | @site-text-color: #314659; 3 | @site-text-color-secondary: #697b8c; 4 | @site-border-color-split: #ebedf0; 5 | -------------------------------------------------------------------------------- /components/style/themes.less: -------------------------------------------------------------------------------- 1 | // 引入所有使用 theme 的变量 2 | @import '../switch/style/index.less'; 3 | @import '../data-table/style/index.less'; 4 | @import '../basic-table/style/index.less'; -------------------------------------------------------------------------------- /components/create-global-state/useEffectOnce.ts: -------------------------------------------------------------------------------- 1 | import { EffectCallback, useEffect } from 'react'; 2 | 3 | const useEffectOnce = (effect: EffectCallback) => { 4 | useEffect(effect, []); 5 | }; 6 | 7 | export default useEffectOnce; 8 | -------------------------------------------------------------------------------- /components/empty-line/style/index.less: -------------------------------------------------------------------------------- 1 | @import '../../style/index.less'; 2 | 3 | @dantd-empty-line-prefix-cls: ~'@{dantd-prefix}-empty-line'; 4 | 5 | .@{dantd-empty-line-prefix-cls} { 6 | width: 100%; 7 | height: 20px; 8 | } 9 | -------------------------------------------------------------------------------- /components/locale-provider/useIntl.tsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import IntlContext from './context'; 3 | 4 | function useIntl(): any { 5 | const i18n = useContext(IntlContext); 6 | return i18n; 7 | } 8 | 9 | export default useIntl; 10 | -------------------------------------------------------------------------------- /components/create-global-state/useIsomorphicLayoutEffect.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useLayoutEffect } from 'react'; 2 | 3 | const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; 4 | 5 | export default useIsomorphicLayoutEffect; 6 | -------------------------------------------------------------------------------- /components/locale-provider/index.tsx: -------------------------------------------------------------------------------- 1 | import IntlProvider from './provider'; 2 | 3 | export { default as IntlProvider } from './provider'; 4 | export { default as useIntl } from './useIntl'; 5 | export { default as withIntl } from './withIntl'; 6 | 7 | export default IntlProvider; 8 | -------------------------------------------------------------------------------- /components/color-select/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 拾色选择器的基本使用 7 | 8 | ```jsx 9 | import { ColorSelect } from 'antd-advanced'; 10 | 11 | 12 | ReactDOM.render( 13 |
14 | 15 |
, 16 | mountNode, 17 | ); 18 | ``` 19 | -------------------------------------------------------------------------------- /scripts/copyStatic.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const shell = require('shelljs'); 3 | 4 | const staticPath = path.join(process.cwd(), 'static'); 5 | const distDir = path.resolve(process.cwd(), '_site/static'); 6 | 7 | shell.mkdir('-p', distDir); 8 | shell.cp('-R', `${staticPath}/*`, distDir); 9 | -------------------------------------------------------------------------------- /components/use-debounce/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: 自定义Hook 3 | cols: 1 4 | type: hook 5 | title: useDebounce 6 | subtitle: 防抖 7 | --- 8 | 9 | ## 何时使用 10 | 11 | 这个 `Hook` 可以用防抖动的方式来处理改变过快的值。当 `useDebounce` 在指定的时间段内没有被调用时，`hook` 仅返回最新的值。当与 `useEffect` 一起使用时，就像我们在下面的示例中所做的那样，您可以轻松地确保昂贵的操作(如API调用)不会执行得太频繁。 12 | -------------------------------------------------------------------------------- /components/empty-line/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 空行可以不传参数直接使用。增加文字或者组件之间的上下间距 7 | 8 | ```jsx 9 | import { EmptyLine } from 'antd-advanced'; 10 | 11 | ReactDOM.render( 12 |
13 | 第一行文字 14 | 15 | 第二行文字 16 |
, 17 | mountNode, 18 | ); 19 | ``` 20 | -------------------------------------------------------------------------------- /components/empty-line/demo/withHeight.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 自定义高度 4 | --- 5 | 6 | 自定义空行的高度 7 | 8 | ```jsx 9 | import { EmptyLine } from 'antd-advanced'; 10 | 11 | ReactDOM.render( 12 |
13 | 第一行文字 14 | 15 | 第二行文字 16 |
, 17 | mountNode, 18 | ); 19 | ``` 20 | -------------------------------------------------------------------------------- /components/empty-line/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: 组件 3 | type: 数据展示 4 | title: EmptyLine 5 | subtitle: 空行 6 | --- 7 | 8 | ## 何时使用 9 | 10 | 需要在文字，或者组件之间添加一个固定高度的空隙 11 | 12 | ## API 13 | 14 | | 参数 | 说明 | 类型 | 默认值 | 15 | | :----- | :--------- | :------ | :----- | 16 | | height | 空行的高度 | number? | 20 | 17 | -------------------------------------------------------------------------------- /components/use-timeout/useUpdate.ts: -------------------------------------------------------------------------------- 1 | import { useReducer } from 'react'; 2 | 3 | const updateReducer = (num: number): number => (num + 1) % 1_000_000; 4 | 5 | const useUpdate = () => { 6 | const [, update] = useReducer(updateReducer, 0); 7 | return update as () => void; 8 | }; 9 | 10 | export default useUpdate; 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab 17 | -------------------------------------------------------------------------------- /components/switch/demo/small.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 - small 4 | --- 5 | 6 | `size` 传 `small`，可展示一个小型的开关。 7 | 8 | ```jsx 9 | import { Switch } from 'antd-advanced'; 10 | 11 | ReactDOM.render( 12 |
13 | 14 |
, 15 | mountNode, 16 | ); 17 | ``` 18 | -------------------------------------------------------------------------------- /site/theme/static/nprogress.less: -------------------------------------------------------------------------------- 1 | #nprogress { 2 | .bar { 3 | background: @primary-color; 4 | } 5 | 6 | .peg { 7 | box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color; 8 | } 9 | 10 | .spinner-icon { 11 | border-top-color: @primary-color; 12 | border-left-color: @primary-color; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /site/theme/template/Layout/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col } from 'antd'; 3 | 4 | const Footer = () => ( 5 | 10 | ); 11 | 12 | export default Footer; 13 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | // prettier.config.js or .prettierrc.js 2 | module.exports = { 3 | singleQuote: true, 4 | trailingComma: 'all', 5 | printWidth: 100, 6 | proseWrap: 'never', 7 | endOfLine: 'auto', 8 | overrides: [ 9 | { 10 | files: '.prettierrc', 11 | options: { 12 | parser: 'json', 13 | }, 14 | }, 15 | ], 16 | }; 17 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app", 3 | "plugins": ["prettier"], 4 | "rules": { 5 | "prettier/prettier": "error", 6 | "no-unused-vars": "off", 7 | "@typescript-eslint/no-unused-vars": ["error", { 8 | "vars": "all", 9 | "args": "after-used", 10 | "ignoreRestSiblings": false 11 | }] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /components/use-timeout/index.ts: -------------------------------------------------------------------------------- 1 | import useTimeoutFn from './useTimeoutFn'; 2 | import useUpdate from './useUpdate'; 3 | 4 | export type UseTimeoutReturn = [() => boolean | null, () => void, () => void]; 5 | 6 | export default function useTimeout(ms: number = 0): UseTimeoutReturn { 7 | const update = useUpdate(); 8 | 9 | return useTimeoutFn(update, ms); 10 | } 11 | -------------------------------------------------------------------------------- /components/switch/demo/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 文本 4 | --- 5 | 6 | 使用 `checkedChildren` 和 `unCheckedChildren`，传入中英文的文案。 7 | 8 | ```jsx 9 | import { Switch } from 'antd-advanced'; 10 | 11 | ReactDOM.render( 12 |
13 | 14 |
, 15 | mountNode, 16 | ); 17 | ``` 18 | -------------------------------------------------------------------------------- /components/color-select/demo/form.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 结合Form.Item使用 4 | --- 5 | 6 | 结合 `Form.Item` 包裹组件 7 | 8 | ```jsx 9 | import { ColorSelect } from 'antd-advanced'; 10 | import { Form } from 'antd'; 11 | 12 | ReactDOM.render( 13 |
14 | 15 | 16 | 17 |
, 18 | mountNode, 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/locale-provider/context.tsx: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | import TRANSLATIONS from '../locale'; 3 | 4 | interface IContextProps { 5 | t: (key: any) => any; 6 | } 7 | 8 | const locale = 'en-US'; 9 | 10 | const IntlContext = createContext({ 11 | t: (key) => TRANSLATIONS[locale][key], 12 | }); 13 | 14 | export default IntlContext; 15 | -------------------------------------------------------------------------------- /components/color-select/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 禁用模式 4 | --- 5 | 6 | 使用 disabled 禁用组件 7 | 8 | ```jsx 9 | import { ColorSelect, EmptyLine } from 'antd-advanced'; 10 | 11 | 12 | ReactDOM.render( 13 |
14 | 15 | 16 | 17 |
, 18 | mountNode, 19 | ); 20 | ``` 21 | -------------------------------------------------------------------------------- /components/style/antd-extension.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/table/style/index.less'; 2 | @import '~antd/es/style/themes/default.less'; 3 | 4 | // 扩展 Antd v3 Table filter icon selected color 5 | .@{table-prefix-cls} { 6 | &-thead > tr > th { 7 | .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-search { 8 | color: @primary-color; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /components/use-mounted-state/index.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useEffect, useRef } from 'react'; 2 | 3 | export default function useMountedState(): () => boolean { 4 | const mountedRef = useRef(false); 5 | const get = useCallback(() => mountedRef.current, []); 6 | 7 | useEffect(() => { 8 | mountedRef.current = true; 9 | 10 | return () => { 11 | mountedRef.current = false; 12 | }; 13 | }); 14 | 15 | return get; 16 | } 17 | -------------------------------------------------------------------------------- /components/locale-provider/withIntl.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import IntlContext from './context'; 3 | 4 | export const withIntl = () => { 5 | return (WrappedComponent) => { 6 | const ComponentWithIntl = (props) => ( 7 | 8 | {(i18n) => } 9 | 10 | ); 11 | return ComponentWithIntl; 12 | }; 13 | }; 14 | 15 | export default withIntl; 16 | -------------------------------------------------------------------------------- /components/basic-table/config.tsx: -------------------------------------------------------------------------------- 1 | export const pageSizeOptions = ['10', '20', '50', '100']; 2 | 3 | export type TSorterNames = 'ascend' | 'descend'; 4 | 5 | export const sorterNames = { 6 | ascend: '升序', 7 | descend: '降序', 8 | }; 9 | 10 | export const locale = { 11 | filterTitle: '筛选', 12 | filterConfirm: '确定', 13 | filterReset: '重置', 14 | emptyText: '暂无数据', 15 | }; 16 | 17 | export const showTotal = (total: number) => { 18 | return `共 ${total} 条`; 19 | }; 20 | -------------------------------------------------------------------------------- /site/theme/static/docsearch.less: -------------------------------------------------------------------------------- 1 | .algolia-autocomplete { 2 | .ds-dropdown-menu { 3 | border: none; 4 | box-shadow: @box-shadow-base; 5 | 6 | [class^='ds-dataset-'] { 7 | border: none; 8 | } 9 | 10 | &::before { 11 | display: none; 12 | } 13 | } 14 | 15 | .algolia-docsearch-suggestion--title { 16 | color: @site-text-color; 17 | } 18 | 19 | .algolia-docsearch-suggestion--highlight { 20 | color: @primary-color; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /site/theme/static/new-version-info-modal.less: -------------------------------------------------------------------------------- 1 | .new-version-info-modal { 2 | img { 3 | position: absolute; 4 | top: 36px; 5 | left: 34px; 6 | width: 100px; 7 | } 8 | p { 9 | margin-top: 1em; 10 | } 11 | .anticon { 12 | display: none; 13 | } 14 | .ant-confirm-body { 15 | .ant-confirm-title { 16 | font-size: 18px; 17 | } 18 | 19 | margin-left: 120px; 20 | .ant-confirm-content { 21 | margin-left: 0; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /docs/i18n.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 国际化 4 | --- 5 | 6 | 7 | `dantd` 和 `antd`保持一致，默认文案是英文，如果需要使用其他语言，可以参考下面的方案。 8 | 9 | ## IntlProvider 10 | 11 | ``` 12 | import {IntlProvider as DantdIntlProvider} from 'antd-advanced'; 13 | 14 | const language = isEn ? 'en-US' : 'zh-CN'; 15 | 16 | return ( 17 | 18 | 19 | 20 | ); 21 | ``` 22 | 23 | 目前支持以下语言： 24 | 25 | | 语言 | key | 26 | | :-- | :-- | 27 | | 英文（默认） | en-US | 28 | | 中文 | zh-CN | -------------------------------------------------------------------------------- /components/use-async/index.ts: -------------------------------------------------------------------------------- 1 | import { DependencyList, useEffect } from 'react'; 2 | import useAsyncFn from '../use-async-fn'; 3 | 4 | export default function useAsync( 5 | fn: (...args: Args | []) => Promise, 6 | deps: DependencyList = [], 7 | ) { 8 | const [state, callback] = useAsyncFn(fn, deps, { 9 | loading: true, 10 | }); 11 | 12 | useEffect(() => { 13 | callback(); 14 | }, [callback]); 15 | 16 | return state; 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | .DS_Store 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | /output 14 | /dist 15 | /lib 16 | /es 17 | /_site 18 | 19 | # misc 20 | .DS_Store 21 | .env.local 22 | .env.development.local 23 | .env.test.local 24 | .env.production.local 25 | 26 | .docz 27 | 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | 32 | test-report.html 33 | -------------------------------------------------------------------------------- /site/theme/template/Content/PrevAndNext.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default ({ prev, next }) => ( 4 |
5 | {prev 6 | ? React.cloneElement(prev.props.children || prev.children[0], { 7 | className: 'prev-page', 8 | }) 9 | : null} 10 | {next 11 | ? React.cloneElement(next.props.children || next.children[0], { 12 | className: 'next-page', 13 | }) 14 | : null} 15 |
16 | ); 17 | 18 | -------------------------------------------------------------------------------- /scripts/publish.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | try { 5 | const indexPath = path.resolve(__dirname, '../.doc/index.html'); 6 | let htmlContent = fs.readFileSync(indexPath, 'utf8'); 7 | htmlContent = htmlContent.replace(/src="\/dantd\/static/gi, 'src="/static'); 8 | htmlContent = htmlContent.replace(/href="\/dantd\/static/gi, 'href="/static'); 9 | 10 | fs.writeFileSync(indexPath, htmlContent, 'utf8'); 11 | } catch (error) { 12 | console.info('重写失败', error); 13 | } 14 | 15 | console.info('重写成功!'); 16 | -------------------------------------------------------------------------------- /components/locale-provider/provider.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import IntlContext from './context'; 3 | import TRANSLATIONS from '../locale'; 4 | 5 | interface IIntlProps { 6 | locale: 'zh-CN' | 'en-US' | string; 7 | children: React.ReactNode; 8 | } 9 | 10 | const IntlProvider = (props: IIntlProps) => { 11 | const locale = props.locale || 'en-US'; 12 | const i18n = { 13 | t: (key) => TRANSLATIONS[locale][key], 14 | }; 15 | 16 | return {props.children}; 17 | }; 18 | 19 | export default IntlProvider; 20 | -------------------------------------------------------------------------------- /components/color-select/demo/value.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 受控模式 4 | --- 5 | 6 | 提供 value 和 onChange 属性，支持受控模式的组件 7 | 8 | ```jsx 9 | import { useState } from 'react'; 10 | import { ColorSelect } from 'antd-advanced'; 11 | 12 | const Demo: React.FC = () => { 13 | const [color, setColor] = useState('#746aa7'); 14 | return ( 15 | { 18 | setColor(newColor); 19 | }} 20 | /> 21 | ) 22 | } 23 | 24 | ReactDOM.render( 25 |
26 | 27 |
, 28 | mountNode, 29 | ); 30 | ``` 31 | -------------------------------------------------------------------------------- /components/style/mixins.less: -------------------------------------------------------------------------------- 1 | // mixins for clearfix 2 | // ------------------------ 3 | .clearfix() { 4 | zoom: 1; 5 | &::before, 6 | &::after { 7 | display: table; 8 | width: 100%; 9 | content: ''; 10 | } 11 | &::after { 12 | clear: both; 13 | } 14 | } 15 | 16 | .reset-space { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | .reset-space-border { 22 | margin: 0; 23 | padding: 0; 24 | border: 0; 25 | } 26 | 27 | .hide-fake { 28 | width: 0; 29 | height: 0; 30 | position: absolute; 31 | top: -9999px; 32 | right: -9999px; 33 | overflow: hidden; 34 | display: none; 35 | } -------------------------------------------------------------------------------- /components/query-form/style/index.less: -------------------------------------------------------------------------------- 1 | @import '../../style/index.less'; 2 | 3 | @dantd-query-form-prefix-cls: ~'@{dantd-prefix}-query-form'; 4 | 5 | .@{dantd-query-form-prefix-cls} { 6 | position: relative; 7 | padding: 22px 20px 0; 8 | background: #fff; 9 | &-formitem-full { 10 | display: flex !important; 11 | .ant-form-item-control-wrapper { 12 | flex: 1; 13 | width: 100%; 14 | } 15 | } 16 | &-option { 17 | .ant-form-item-control { 18 | display: flex; 19 | align-items: center; 20 | justify-content: flex-end; 21 | text-align: right; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /components/card/demo/icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 图标或图片 4 | --- 5 | 6 | 传参icon支持antd icon格式和自定义图片dom。 7 | 8 | 9 | ```jsx 10 | import { BasicCard } from 'antd-advanced'; 11 | import { Icon } from 'antd'; 12 | 13 | const BasicExample: React.FC = () => { 14 | return ( 15 |
16 | } 20 | style={{marginTop: 20 }} 21 | /> 22 |
23 | ); 24 | } 25 | 26 | ReactDOM.render( 27 |
28 | 29 |
, 30 | mountNode, 31 | ); 32 | ``` 33 | -------------------------------------------------------------------------------- /components/empty-line/empty-line.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | export interface IEmptyLineProps { 5 | prefixCls?: string; 6 | className?: string; 7 | style?: React.CSSProperties; 8 | height?: number; 9 | } 10 | 11 | const EmptyLine = ({ height = 20, prefixCls = 'dantd', className, style }: IEmptyLineProps) => { 12 | const emptyLineClassName = classNames(`${prefixCls}-empty-line`, className); 13 | const emptyLineStyle = { 14 | height, 15 | ...style, 16 | }; 17 | 18 | return
; 19 | }; 20 | 21 | export default EmptyLine; 22 | -------------------------------------------------------------------------------- /site/theme/static/index.less: -------------------------------------------------------------------------------- 1 | 2 | @import '~antd/dist/antd.less'; 3 | // @import './customer/antd-variables.less'; 4 | @import './common'; 5 | @import './header'; 6 | @import './footer'; 7 | @import './home'; 8 | @import './page-nav'; 9 | @import './markdown'; 10 | @import './resource'; 11 | @import './preview-img'; 12 | @import './toc'; 13 | @import './not-found'; 14 | @import './highlight'; 15 | @import './demo'; 16 | @import './colors'; 17 | @import './icons'; 18 | @import './mock-browser'; 19 | @import './new-version-info-modal'; 20 | @import './motion'; 21 | @import './responsive'; 22 | @import './theme'; 23 | @import './docsearch'; 24 | @import './nprogress'; 25 | @import './santa'; 26 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "es6", 6 | "dom" 7 | ], 8 | "downlevelIteration": true, 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "strict": false, 13 | "noImplicitAny": false, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "noEmit": true, 19 | "jsx": "preserve", 20 | "sourceMap": true, 21 | "allowSyntheticDefaultImports": true, 22 | "moduleResolution": "node" 23 | }, 24 | "exclude": [ 25 | "node_modules" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /components/use-interval/index.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from 'react'; 2 | 3 | const useInterval = (callback: Function, delay?: number | null) => { 4 | const intervalId = useRef(null); 5 | const savedCallback = useRef(() => {}); 6 | 7 | useEffect(() => { 8 | savedCallback.current = callback; 9 | }); 10 | 11 | useEffect(() => { 12 | const tick = () => savedCallback.current(); 13 | if (typeof delay === 'number') { 14 | intervalId.current = window.setInterval(tick, delay); 15 | return () => window.clearInterval(intervalId.current); 16 | } 17 | }, [delay]); 18 | 19 | return intervalId.current; 20 | }; 21 | 22 | export default useInterval; 23 | -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "es6", 6 | "dom" 7 | ], 8 | "downlevelIteration": true, 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "strict": false, 13 | "noImplicitAny": false, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "noEmit": true, 19 | "jsx": "preserve", 20 | "sourceMap": true, 21 | "allowSyntheticDefaultImports": true, 22 | "moduleResolution": "node" 23 | }, 24 | "exclude": [ 25 | "node_modules" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /components/color-select/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: 组件 3 | type: 数据录入 4 | title: ColorSelect 5 | subtitle: 颜色选择器 6 | --- 7 | 8 | ## 何时使用 9 | 10 | 需要使用 `hex` 模式，选择颜色时；可结合 form 表单使用。 11 | 12 | ### TODO 13 | 14 | 支持 `RGB` 模式等更多扩展 15 | 16 | ## API 17 | 18 | | 参数 | 说明 | 类型 | 默认值 | 版本 | 19 | | --- | --- | --- | --- | --- | 20 | | className | 类名 | string | - | | 21 | | defaultValue | 初始默认颜色，非受控模式下使用 | string | | | 22 | | value | 颜色值 | string | | | 23 | | disabled | 是否禁用 | boolean | false | | 24 | | placeholder | 输入框占位 | string | 请选择颜色 | | 25 | | onChange | 变化时回调函数 | Function(color: string) | | | 26 | | style | 组件外层的 style 属性 | object | - | | 27 | | inputStyle | 输入框的 style 属性 | object | - | | 28 | -------------------------------------------------------------------------------- /components/switch/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 禁用 4 | --- 5 | 6 | 使用 `disabled` 属性，禁用组件。 7 | 8 | ```jsx 9 | import { Switch, EmptyLine } from 'antd-advanced'; 10 | 11 | ReactDOM.render( 12 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
, 27 | mountNode, 28 | ); 29 | ``` 30 | -------------------------------------------------------------------------------- /site/theme/static/not-found.less: -------------------------------------------------------------------------------- 1 | #page-404 { 2 | position: relative; 3 | z-index: 100; 4 | width: 100%; 5 | height: ~'calc(100vh - 130px)'; 6 | background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg'); 7 | background-repeat: no-repeat; 8 | background-position: center; 9 | background-size: 100%; 10 | 11 | section { 12 | position: absolute; 13 | top: 48%; 14 | left: 55%; 15 | margin: -103px 0 0 -120px; 16 | text-align: center; 17 | } 18 | 19 | h1 { 20 | color: @primary-color; 21 | font-weight: 500; 22 | font-size: 120px; 23 | } 24 | 25 | p { 26 | color: @site-text-color; 27 | font-size: 18px; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /tsconfig.father.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "es6", 6 | "dom" 7 | ], 8 | "downlevelIteration": true, 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "strict": false, 13 | "noImplicitAny": false, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "noEmit": true, 19 | "jsx": "preserve", 20 | "sourceMap": true, 21 | "allowSyntheticDefaultImports": true, 22 | "moduleResolution": "node" 23 | }, 24 | "exclude": [ 25 | "node_modules" 26 | ], 27 | "include": [ 28 | "src" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /components/color-select/style/index.less: -------------------------------------------------------------------------------- 1 | @import '../../style/index.less'; 2 | @import '~antd/es/style/themes/default.less'; 3 | 4 | @dantd-color-select-prefix-cls: ~'@{dantd-prefix}-color-select'; 5 | 6 | .@{dantd-color-select-prefix-cls} { 7 | position: relative; 8 | display: flex; 9 | 10 | &-input-bg { 11 | position: absolute; 12 | top: 5px; 13 | left: 6px; 14 | right: 52px; 15 | bottom: 5px; 16 | border-radius: 2px; 17 | line-height: 22px; 18 | background-color: transparent; 19 | text-align: center; 20 | color: #fff; 21 | cursor: pointer; 22 | } 23 | 24 | input { 25 | text-align: center !important; 26 | background-color: transparent; 27 | color: transparent; 28 | } 29 | } -------------------------------------------------------------------------------- /docs/introduce.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: Dantd of React 4 | --- 5 | 6 | `dantd` 一个基于 [Antd-v3](https://ant.design/) 所封装的业务组件库 7 | 8 | ## ✨ 特性 9 | 10 | - 📦 开箱即用的高质量 React 组件。 11 | - 🛡 使用 TypeScript 开发，提供完整的类型定义文件。 12 | - 🌈 赋能业务开发，提供业务常用，而 `Antd` 没有提供的组件。 13 | 14 | ## 安装 15 | 16 | ``` 17 | $ npm install antd-advanced 18 | ``` 19 | 20 | ## 示例 21 | 22 | ```jsx 23 | import { EmptyLine } from 'antd-advanced'; 24 | 25 | ReactDOM.render(, mountNode); 26 | ``` 27 | 28 | ## 博客 29 | 30 | - [手摸手，打造属于自己的 React 组件库 —— 基础篇](https://juejin.im/post/6844904054347268103) 31 | - [手摸手，打造属于自己的 React 组件库 —— 测试篇](https://juejin.im/post/6844904054351462408) 32 | - [手摸手，打造属于自己的 React 组件库 —— 打包篇](https://juejin.im/post/6844904054351462413) 33 | -------------------------------------------------------------------------------- /scripts/renameStart.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const fse = require('fs-extra'); 4 | 5 | try { 6 | const srcPath = path.resolve(__dirname, '../src'); 7 | const componentsPath = path.resolve(__dirname, '../components'); 8 | fs.renameSync(componentsPath, srcPath); 9 | 10 | const tsconfig = path.resolve(__dirname, '../tsconfig.json'); 11 | const tsconfigFather = path.resolve(__dirname, '../tsconfig.father.json'); 12 | const tsconfigNormal = path.resolve(__dirname, '../tsconfig.normal.json'); 13 | fs.renameSync(tsconfig, tsconfigNormal); 14 | fs.renameSync(tsconfigFather, tsconfig); 15 | console.log('Successfully renamed the directory.'); 16 | } catch (err) { 17 | console.log(err); 18 | } 19 | -------------------------------------------------------------------------------- /scripts/renameEnd.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const fse = require('fs-extra'); 4 | 5 | try { 6 | const srcPath = path.resolve(__dirname, '../src'); 7 | const componentsPath = path.resolve(__dirname, '../components'); 8 | fs.renameSync(srcPath, componentsPath); 9 | 10 | const tsconfig = path.resolve(__dirname, '../tsconfig.json'); 11 | const tsconfigFather = path.resolve(__dirname, '../tsconfig.father.json'); 12 | const tsconfigNormal = path.resolve(__dirname, '../tsconfig.normal.json'); 13 | fs.renameSync(tsconfig, tsconfigFather); 14 | fs.renameSync(tsconfigNormal, tsconfig); 15 | 16 | console.log('Successfully renamed the directory.'); 17 | } catch (err) { 18 | console.log(err); 19 | } 20 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | transform: { 4 | '^.+\\.tsx?$': 'ts-jest', 5 | }, 6 | globals: { 7 | 'ts-jest': { 8 | babelConfig: { 9 | presets: ['@babel/preset-env', '@babel/preset-react'], 10 | }, 11 | }, 12 | }, 13 | testEnvironment: 'jsdom', 14 | testMatch: [ 15 | '/components/**/__tests__/**/*.{ts,tsx,js,jsx,mjs}', 16 | '/components/**/?(*.)(spec|test).{ts,tsx,js,jsx,mjs}', 17 | ], 18 | reporters: ['default', 'jest-html-reporters'], 19 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], 20 | collectCoverage: true, 21 | collectCoverageFrom: ['app/react/**/*.{ts,tsx}', '!app/react/__tests__/api/api-test-helpers.ts'], 22 | }; 23 | -------------------------------------------------------------------------------- /site/theme/template/NotFound.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-danger */ 2 | import React from 'react'; 3 | import { Link } from 'bisheng/router'; 4 | // import * as utils from './utils'; 5 | 6 | export default function NotFound({ location }) { 7 | return ( 8 |
9 |
10 |

404

11 |

12 | 你要找的页面不存在 13 | {/* 14 | 返回首页 15 | */} 16 |

17 |
18 |