diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 649850464e..b91be5c95b 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -26,6 +26,9 @@ stages: versionSpec: '12.13.1' - script: npm install displayName: 'Install modules' + - script: | + node ./scripts/azure-github-comment.js '![Prepare preview](https://user-images.githubusercontent.com/5378891/72351368-2c979e00-371b-11ea-9652-eb4e825d745e.gif)' + displayName: 'Comment on github' - script: npm run site displayName: 'Build sites' - script: ls -al _site/ @@ -34,5 +37,8 @@ stages: export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh echo "Deploy to $DEPLOY_DOMAIN" npx surge --project ./_site --domain $DEPLOY_DOMAIN - curl -X POST -u ${ACCESS_TOKEN} -H "Accept: application/json" -H "Content-Type:application/json" https://api.github.com/repos/ant-design/ant-design/issues/${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}/comments -d '{ "body": "Preview deploy to '${DEPLOY_DOMAIN}'" }' - displayName: 'Deploy Site' \ No newline at end of file + displayName: 'Deploy Site' + - script: | + export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh + node ./scripts/azure-github-comment.js "[]($DEPLOY_DOMAIN)" + displayName: 'Update comment on github' \ No newline at end of file diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx index 66a275d48b..823107455b 100755 --- a/components/date-picker/index.tsx +++ b/components/date-picker/index.tsx @@ -1,6 +1,15 @@ import { Moment } from 'moment'; import momentGenerateConfig from 'rc-picker/lib/generate/moment'; -import generatePicker from './generatePicker'; +import generatePicker, { + PickerProps, + PickerDateProps, + RangePickerProps as BaseRangePickerProps, +} from './generatePicker'; + +export type DatePickerProps = PickerProps; +export type MonthPickerProps = Omit, 'picker'>; +export type WeekPickerProps = Omit, 'picker'>; +export type RangePickerProps = BaseRangePickerProps; const DatePicker = generatePicker(momentGenerateConfig); diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md index ee45e16174..dd5576878b 100644 --- a/components/icon/index.en-US.md +++ b/components/icon/index.en-US.md @@ -75,9 +75,7 @@ All the icons will render to ``. You can still set `style` and `className` ### Set TwoTone Color -<<<<<<< HEAD When using the two-tone icons, you can use the static methods `getTwoToneColor()` and `setTwoToneColor(colorString)` to spicify the primary color. ======= When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to specify the primary color. - -> > > > > > > origin/master +When using the two-tone icons, you can use the static methods `getTwoToneColor()` and `setTwoToneColor(colorString)` to specify the primary color. ```jsx import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons'; diff --git a/components/list/Item.tsx b/components/list/Item.tsx index 1174514359..0edce23ce8 100644 --- a/components/list/Item.tsx +++ b/components/list/Item.tsx @@ -72,7 +72,7 @@ export default class Item extends React.Component { context: any; - isItemContainsTextNode() { + isItemContainsTextNodeAndNotSingular() { const { children } = this.props; let result; React.Children.forEach(children, (element: React.ReactElement) => { @@ -80,7 +80,7 @@ export default class Item extends React.Component { result = true; } }); - return result; + return result && React.Children.count(children) > 1; } isFlexMode() { @@ -89,7 +89,7 @@ export default class Item extends React.Component { if (itemLayout === 'vertical') { return !!extra; } - return !this.isItemContainsTextNode(); + return !this.isItemContainsTextNodeAndNotSingular(); } renderItem = ({ getPrefixCls }: ConfigConsumerProps) => { diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap index 6967d405a8..c9f03fcbd3 100644 --- a/components/list/__tests__/__snapshots__/demo.test.js.snap +++ b/components/list/__tests__/__snapshots__/demo.test.js.snap @@ -764,27 +764,27 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = ` class="ant-list-items" >
  • Racing car sprays burning fuel into crowd.
  • Japanese princess to wed commoner.
  • Australian walks 100km after outback crash.
  • Man charged over missing wedding girl.
  • Los Angeles battles huge wildfires.
    • @@ -824,27 +824,27 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = ` class="ant-list-items" >
  • Racing car sprays burning fuel into crowd.
  • Japanese princess to wed commoner.
  • Australian walks 100km after outback crash.
  • Man charged over missing wedding girl.
  • Los Angeles battles huge wildfires.
    • diff --git a/components/list/style/index.less b/components/list/style/index.less index 6da354048e..07ebc1c851 100644 --- a/components/list/style/index.less +++ b/components/list/style/index.less @@ -66,6 +66,7 @@ &-item { display: flex; align-items: center; + justify-content: space-between; padding: @list-item-padding; &-content { diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 8054ea9830..048244831b 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -41,7 +41,7 @@ Select component to select value from options. | maxTagCount | Max tag count to show | number | - | | | maxTagTextLength | Max tag text length to show | number | - | | | maxTagPlaceholder | Placeholder for not showing tags | ReactNode/function(omittedValues) | - | | -| mode | Set mode of Select | 'default' \| 'multiple' \| 'tags' | 'default' | | +| mode | Set mode of Select | `multiple` \| `tags` | - | | | notFoundContent | Specify content to show when no result matches.. | string | 'Not Found' | | | optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value | | | optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` for `combobox`, `children` for other modes | | diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 4d81ed78fc..54407dea68 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -42,7 +42,7 @@ title: Select | maxTagCount | 最多显示多少个 tag | number | - | | | maxTagTextLength | 最大显示的 tag 文本长度 | number | - | | | maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode/function(omittedValues) | - | | -| mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' | - | | +| mode | 设置 Select 的模式为多选或标签 | `multiple` \| `tags` | - | | | notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' | | | optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | value | | | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） | | diff --git a/components/select/style/multiple.less b/components/select/style/multiple.less index 00d7660959..3d9d9e952b 100644 --- a/components/select/style/multiple.less +++ b/components/select/style/multiple.less @@ -125,11 +125,10 @@ // ======================= Placeholder ======================= .@{select-prefix-cls}-selection-placeholder { position: absolute; - top: 0; + top: 50%; right: @input-padding-horizontal; left: @input-padding-horizontal; - height: @select-height-without-border; - line-height: @select-height-without-border; + transform: translateY(-50%); transition: all 0.3s; .@{select-prefix-cls}-rtl& { @@ -161,11 +160,6 @@ line-height: @select-selection-height - @border-width-base * 2; } } - - .@{select-prefix-cls}-selection-placeholder { - height: @select-height-without-border; - line-height: @select-height-without-border; - } } } diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx index d2c6549b70..15c0f5883e 100644 --- a/components/tree/DirectoryTree.tsx +++ b/components/tree/DirectoryTree.tsx @@ -3,17 +3,12 @@ import classNames from 'classnames'; import omit from 'omit.js'; import debounce from 'lodash/debounce'; import { conductExpandParent } from 'rc-tree/lib/util'; +import { EventDataNode, DataNode } from 'rc-tree/lib/interface'; import { convertDataToEntities, convertTreeToData } from 'rc-tree/lib/utils/treeUtil'; import { FileOutlined, FolderOpenOutlined, FolderOutlined } from '@ant-design/icons'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; -import Tree, { - TreeProps, - AntdTreeNodeAttribute, - AntTreeNodeExpandedEvent, - AntTreeNodeSelectedEvent, - AntTreeNode, -} from './Tree'; +import Tree, { TreeProps, AntdTreeNodeAttribute } from './Tree'; import { calcRangeKeys, convertDirectoryKeysToNodes } from './utils/dictUtil'; export type ExpandAction = false | 'click' | 'doubleClick'; @@ -60,7 +55,7 @@ class DirectoryTree extends React.Component, node: AntTreeNode) => void; + onDebounceExpand: (event: React.MouseEvent, node: EventDataNode) => void; // Shift click usage lastSelectedKey?: string; @@ -95,7 +90,14 @@ class DirectoryTree extends React.Component { + onExpand = ( + expandedKeys: string[], + info: { + node: EventDataNode; + expanded: boolean; + nativeEvent: MouseEvent; + }, + ) => { const { onExpand } = this.props; this.setUncontrolledState({ expandedKeys }); @@ -108,7 +110,7 @@ class DirectoryTree extends React.Component, node: AntTreeNode) => { + onClick = (event: React.MouseEvent, node: EventDataNode) => { const { onClick, expandAction } = this.props; // Expand the tree @@ -121,7 +123,7 @@ class DirectoryTree extends React.Component, node: AntTreeNode) => { + onDoubleClick = (event: React.MouseEvent, node: EventDataNode) => { const { onDoubleClick, expandAction } = this.props; // Expand the tree @@ -134,7 +136,16 @@ class DirectoryTree extends React.Component { + onSelect = ( + keys: string[], + event: { + event: 'select'; + selected: boolean; + node: any; + selectedNodes: DataNode[]; + nativeEvent: MouseEvent; + }, + ) => { const { onSelect, multiple } = this.props; const { expandedKeys = [] } = this.state; const { node, nativeEvent } = event; @@ -144,7 +155,7 @@ class DirectoryTree extends React.Component, node: AntTreeNode) => { + expandFolderNode = (event: React.MouseEvent, node: any) => { const { isLeaf } = node.props; if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) { diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index 9866ed8a58..faa3a05cb4 100644 --- a/components/tree/Tree.tsx +++ b/components/tree/Tree.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import RcTree, { TreeNode } from 'rc-tree'; +import RcTree, { TreeNode, TreeProps as RcTreeProps } from 'rc-tree'; import classNames from 'classnames'; import { DataNode } from 'rc-tree/lib/interface'; @@ -98,7 +98,7 @@ export interface TreeNodeNormal { children?: TreeNodeNormal[]; } -export interface TreeProps { +export interface TreeProps extends Omit { showLine?: boolean; className?: string; /** 是否支持多选 */ @@ -128,50 +128,23 @@ export interface TreeProps { /** 默认选中的树节点 */ defaultSelectedKeys?: string[]; selectable?: boolean; - /** 展开/收起节点时触发 */ - onExpand?: (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => void | PromiseLike; - /** 点击复选框触发 */ - onCheck?: ( - checkedKeys: string[] | { checked: string[]; halfChecked: string[] }, - e: AntTreeNodeCheckedEvent, - ) => void; /** 点击树节点触发 */ - onSelect?: (selectedKeys: string[], e: AntTreeNodeSelectedEvent) => void; - /** 单击树节点触发 */ - onClick?: (e: React.MouseEvent, node: AntTreeNode) => void; - /** 双击树节点触发 */ - onDoubleClick?: (e: React.MouseEvent, node: AntTreeNode) => void; - /** filter some AntTreeNodes as you need. it should return true */ filterAntTreeNode?: (node: AntTreeNode) => boolean; - /** 异步加载数据 */ - loadData?: (node: AntTreeNode) => PromiseLike; loadedKeys?: string[]; - onLoad?: (loadedKeys: string[], info: { event: 'load'; node: AntTreeNode }) => void; - /** 响应右键点击 */ - onRightClick?: (options: AntTreeNodeMouseEvent) => void; /** 设置节点可拖拽（IE>8） */ draggable?: boolean; - onDragStart?: (options: AntTreeNodeMouseEvent) => void; - onDragEnter?: (options: AntTreeNodeDragEnterEvent) => void; - onDragOver?: (options: AntTreeNodeMouseEvent) => void; - onDragLeave?: (options: AntTreeNodeMouseEvent) => void; - onDragEnd?: (options: AntTreeNodeMouseEvent) => void; - onMouseEnter?: (options: AntTreeNodeMouseEvent) => void; - onMouseLeave?: (options: AntTreeNodeMouseEvent) => void; - onDrop?: (options: AntTreeNodeDropEvent) => void; style?: React.CSSProperties; showIcon?: boolean; icon?: ((nodeProps: AntdTreeNodeAttribute) => React.ReactNode) | React.ReactNode; switcherIcon?: React.ReactElement; prefixCls?: string; - filterTreeNode?: (node: AntTreeNode) => boolean; children?: React.ReactNode; blockNode?: boolean; treeData?: Array; } export default class Tree extends React.Component { - static TreeNode: React.ComponentClass = TreeNode; + static TreeNode = TreeNode; static DirectoryTree = DirectoryTree; diff --git a/components/tree/__tests__/demo.test.js b/components/tree/__tests__/demo.test.js index b6d6017a9c..103e772b0e 100644 --- a/components/tree/__tests__/demo.test.js +++ b/components/tree/__tests__/demo.test.js @@ -1,3 +1,3 @@ import demoTest from '../../../tests/shared/demoTest'; -demoTest('tree', { skip: ['big-data.md'] }); +demoTest('tree', { skip: ['big-data.md', 'virtual-scroll.md'] }); diff --git a/components/tree/demo/virtual-scroll.md b/components/tree/demo/virtual-scroll.md new file mode 100644 index 0000000000..a997bf706c --- /dev/null +++ b/components/tree/demo/virtual-scroll.md @@ -0,0 +1,40 @@ +--- +order: 9 +title: + zh-CN: 虚拟滚动 + en-US: Virtual scroll +--- + +## zh-CN + +使用 `height` 属性则切换为虚拟滚动。 + +## en-US + +Use virtual list through `height` prop. + +```jsx +import { Tree } from 'antd'; + +function dig(path = '0', level = 3) { + const list = []; + for (let i = 0; i < 10; i += 1) { + const key = `${path}-${i}`; + const treeNode = { + title: key, + key, + }; + + if (level > 0) { + treeNode.children = dig(key, level - 1); + } + + list.push(treeNode); + } + return list; +} + +const treeData = dig(); + +ReactDOM.render(, mountNode); +``` diff --git a/package.json b/package.json index 13ce521ff1..aa4540aca8 100644 --- a/package.json +++ b/package.json @@ -137,7 +137,7 @@ "warning": "~4.0.3" }, "devDependencies": { - "@ant-design/bisheng-plugin": "^2.1.0", + "@ant-design/bisheng-plugin": "^2.3.0", "@ant-design/colors": "^4.0.0-alpha.0", "@ant-design/hitu": "^0.0.0-alpha.13", "@ant-design/tools": "^8.0.4", diff --git a/scripts/azure-github-comment.js b/scripts/azure-github-comment.js new file mode 100644 index 0000000000..9fa33d0030 --- /dev/null +++ b/scripts/azure-github-comment.js @@ -0,0 +1,55 @@ +const fetch = require('node-fetch'); + +const REPO = process.env.ACCESS_REPO; +const TOKEN = process.env.ACCESS_TOKEN; +const PR = process.env.SYSTEM_PULLREQUEST_PULLREQUESTNUMBER; +const REPLACE_MARK = ''; + +const argv = process.argv; + +const comment = argv[argv.length - 1]; + +const wrappedComment = ` + ${REPLACE_MARK} + ${comment} +`.trim(); + +async function withGithub(url, json, method) { + const res = await fetch(url, { + method: method || (json ? 'POST' : 'GET'), + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + Authorization: `Basic ${Buffer.from(TOKEN).toString('base64')}`, + }, + body: json ? JSON.stringify(json) : undefined, + }); + + return res.json(); +} + +(async function run() { + const comments = await withGithub(`https://api.github.com/repos/${REPO}/issues/${PR}/comments`); + + // Find my comment + const updateComment = comments.find(({ body }) => body.includes(REPLACE_MARK)); + console.log('Origin comment:', updateComment); + + // Update + let res; + if (!updateComment) { + res = await withGithub(`https://api.github.com/repos/${REPO}/issues/${PR}/comments`, { + body: wrappedComment, + }); + } else { + res = await withGithub( + `https://api.github.com/repos/${REPO}/issues/comments/${updateComment.id}`, + { + body: wrappedComment, + }, + 'PATCH', + ); + } + + console.log(res); +})(); diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx index 0756650890..0c8c252948 100644 --- a/site/theme/template/Content/ComponentDoc.jsx +++ b/site/theme/template/Content/ComponentDoc.jsx @@ -187,7 +187,7 @@ class ComponentDoc extends React.Component { } > {visibleAll ? ( - + ) : ( )} diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts index 4ca3aa9395..b3bf736634 100644 --- a/typings/custom-typings.d.ts +++ b/typings/custom-typings.d.ts @@ -28,7 +28,6 @@ declare module 'rc-editor-mention'; declare module 'rc-tabs*'; -declare module 'rc-tree'; declare module 'rc-tree/lib/util'; declare module 'rc-input-number';