From 786bde9ca1f52f335e60b31ab7f28cedd3a7dc31 Mon Sep 17 00:00:00 2001 From: jljsj Date: Thu, 11 Jul 2019 21:22:27 +0800 Subject: [PATCH 01/39] update modal and drawer protal --- .../__tests__/components.test.js | 2 +- components/drawer/index.en-US.md | 2 +- components/drawer/index.tsx | 25 +- components/drawer/index.zh-CN.md | 6 +- .../locale-provider/__tests__/index.test.js | 2 +- components/modal/Modal.tsx | 8 +- .../__snapshots__/Modal.test.js.snap | 254 +++++++++--------- components/modal/index.en-US.md | 2 +- components/modal/index.zh-CN.md | 2 +- package.json | 4 +- 10 files changed, 149 insertions(+), 158 deletions(-) diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js index 05c7e23744..d7452bfba7 100644 --- a/components/config-provider/__tests__/components.test.js +++ b/components/config-provider/__tests__/components.test.js @@ -354,7 +354,7 @@ describe('ConfigProvider', () => { // Modal testPair('Modal', props => (
- + Bamboo is Little Light
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md index ec35080ea2..47b5a7a74c 100644 --- a/components/drawer/index.en-US.md +++ b/components/drawer/index.en-US.md @@ -21,7 +21,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr | --- | --- | --- | --- | --- | | closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true | 3.7.0 | | destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false | 3.7.0 | -| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' | 3.7.0 | +| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' | 3.7.0 | | mask | Whether to show mask or not. | Boolean | true | 3.7.0 | | maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true | 3.7.0 | | maskStyle | Style for Drawer's mask element. | object | {} | 3.7.0 | diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index e7ef9bc1c6..8c775b41e9 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -20,7 +20,7 @@ type placementType = (typeof PlacementTypes)[number]; export interface DrawerProps { closable?: boolean; destroyOnClose?: boolean; - getContainer?: string | HTMLElement | getContainerFunc; + getContainer?: string | HTMLElement | getContainerFunc | false; maskClosable?: boolean; mask?: boolean; maskStyle?: React.CSSProperties; @@ -77,20 +77,6 @@ class Drawer extends React.Component { - const { visible, onClose } = this.props; - if (visible !== undefined && onClose) { - onClose(e); - } - }; - - onMaskClick = (e: EventType) => { - if (!this.props.maskClosable && !(e.nativeEvent instanceof KeyboardEvent)) { - return; - } - this.close(e); - }; - push = () => { this.setState({ push: true, @@ -116,7 +102,7 @@ class Drawer extends React.Component this.props.destroyOnClose && !this.props.visible; - // get drawar push width or height + // get drawer push width or height getPushTransform = (placement?: placementType) => { if (placement === 'left' || placement === 'right') { return `translateX(${placement === 'left' ? 180 : -180}px)`; @@ -152,10 +138,10 @@ class Drawer extends React.Component + ) @@ -214,11 +200,9 @@ class Drawer extends React.Component HTMLElement` \| Selectors | 'body' | 3.7.0 | -| maskClosable | 点击蒙层是否允许关闭 | boolean | true | 3.7.0 | 3.7.0 | -| mask | 是否展示遮罩 | Boolean | true | +| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' | 3.7.0 | +| maskClosable | 点击蒙层是否允许关闭 | boolean | true | 3.7.0 | +| mask | 是否展示遮罩 | Boolean | true | 3.7.0 | | maskStyle | 遮罩样式 | object | {} | 3.7.0 | | style | 可用于设置 Drawer 最外层容器的样式 | object | - | 3.7.0 | | bodyStyle | 可用于设置 Drawer 的样式，调整浮层位置等 | object | - | 3.12.0 | diff --git a/components/locale-provider/__tests__/index.test.js b/components/locale-provider/__tests__/index.test.js index 325f93d19e..7dd1306d9c 100644 --- a/components/locale-provider/__tests__/index.test.js +++ b/components/locale-provider/__tests__/index.test.js @@ -145,7 +145,7 @@ const App = () => ( item.title} /> - +

Locale Modal

 diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 7065776d76..dfae7fdc87 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -68,7 +68,7 @@ export interface ModalProps { maskTransitionName?: string; transitionName?: string; className?: string; - getContainer?: (instance: React.ReactInstance) => HTMLElement; + getContainer?: string | HTMLElement | getContainerFunc | false | null; zIndex?: number; bodyStyle?: React.CSSProperties; maskStyle?: React.CSSProperties; @@ -78,6 +78,8 @@ export interface ModalProps { prefixCls?: string; } +type getContainerFunc = () => HTMLElement; + export interface ModalFuncProps { prefixCls?: string; className?: string; @@ -106,7 +108,7 @@ export interface ModalFuncProps { maskStyle?: React.CSSProperties; type?: string; keyboard?: boolean; - getContainer?: (instance: React.ReactInstance) => HTMLElement; + getContainer?: string | HTMLElement | getContainerFunc | false | null; autoFocusButton?: null | 'ok' | 'cancel'; transitionName?: string; maskTransitionName?: string; @@ -221,7 +223,7 @@ export default class Modal extends React.Component { return ( -
-
-
` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。在 3.14.0 之后，你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时，以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) | | | | required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | | | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | | | -| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol。在 3.14.0 之后，你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时，以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) | | | +| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol。在 3.14.0 之后，你可以通过 Form 的 wrapperCol 进行统一设置。当和 Form 同时设置时，以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) | | | ### 校验规则 From 3a3cf474723efa0705483780d0d6f6532ceafbde Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 17:48:10 +0800 Subject: [PATCH 25/39] :lipstick: Optimize danger Button design --- components/button/style/mixin.less | 22 +--------------------- components/style/themes/default.less | 6 +++--- 2 files changed, 4 insertions(+), 24 deletions(-) diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 1aec902ef2..9e378f4f4c 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -66,26 +66,6 @@ } .button-disabled(); } -.button-variant-danger(@color; @background; @border) { - .button-color(@color; @background; @border); - &:hover { - .button-color( - @btn-primary-color; ~`colorPalette('@{color}', 5) `; ~`colorPalette('@{color}', 5) ` - ); - } - &:focus { - .button-color( - ~`colorPalette('@{color}', 5) `; @component-background; ~`colorPalette('@{color}', 5) ` - ); - } - &:active, - &.active { - .button-color( - @btn-primary-color; ~`colorPalette('@{color}', 7) `; ~`colorPalette('@{color}', 7) ` - ); - } - .button-disabled(); -} .button-variant-ghost(@color; @border: @color) { .button-color(@color; transparent; @border); text-shadow: none; @@ -230,7 +210,7 @@ } // danger button style .btn-danger() { - .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border); + .button-variant-primary(@btn-danger-color, @btn-danger-bg); } // link button style .btn-link() { diff --git a/components/style/themes/default.less b/components/style/themes/default.less index f9c51a11be..4ecd6d2f41 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -156,9 +156,9 @@ @btn-default-bg: @component-background; @btn-default-border: @border-color-base; -@btn-danger-color: @error-color; -@btn-danger-bg: @background-color-base; -@btn-danger-border: @border-color-base; +@btn-danger-color: #fff; +@btn-danger-bg: color(~`colorPalette('@{error-color}', 5) `); +@btn-danger-border: color(~`colorPalette('@{error-color}', 5) `); @btn-disable-color: @disabled-color; @btn-disable-bg: @disabled-bg; From 75ba74c23d067a7867b4b46712ac1855f464e637 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 17:51:26 +0800 Subject: [PATCH 26/39] :lipstick: should use @border-radius-sm --- components/slider/style/index.less | 2 +- components/tree-select/style/index.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 62259c591c..9688c12331 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -24,7 +24,7 @@ width: 100%; height: 4px; background-color: @slider-rail-background-color; - border-radius: 2px; + border-radius: @border-radius-sm; transition: background-color 0.3s; } diff --git a/components/tree-select/style/index.less b/components/tree-select/style/index.less index 51e73bcd9f..126a401858 100644 --- a/components/tree-select/style/index.less +++ b/components/tree-select/style/index.less @@ -36,7 +36,7 @@ padding: 3px 5px; color: @text-color; text-decoration: none; - border-radius: 2px; + border-radius: @border-radius-sm; cursor: pointer; transition: all 0.3s; &:hover { From 2add8007be885347a83aba062efe87e7b3f7460b Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 17:57:50 +0800 Subject: [PATCH 27/39] code style improve --- components/slider/style/index.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 9688c12331..189bd52b3d 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -25,7 +25,7 @@ height: 4px; background-color: @slider-rail-background-color; border-radius: @border-radius-sm; - transition: background-color 0.3s; + transition: background-color .3s; } &-track { @@ -33,7 +33,7 @@ height: 4px; background-color: @slider-track-background-color; border-radius: @border-radius-base; - transition: background-color 0.3s ease; + transition: background-color .3s; } &-handle { @@ -47,8 +47,8 @@ border-radius: 50%; box-shadow: 0; cursor: pointer; - transition: border-color 0.3s, box-shadow 0.6s, - transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); + transition: border-color .3s, box-shadow .6s, + transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28); &:focus { border-color: @slider-handle-color-focus; From 2ad61d6ceb78167f02a7013abe22ee7336c358e8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 18:04:13 +0800 Subject: [PATCH 28/39] :wrench: Add less variables for Slider handler --- components/slider/style/index.less | 14 +++++++------- components/style/themes/default.less | 3 +++ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/components/slider/style/index.less b/components/slider/style/index.less index 189bd52b3d..a8c65647bc 100644 --- a/components/slider/style/index.less +++ b/components/slider/style/index.less @@ -25,7 +25,7 @@ height: 4px; background-color: @slider-rail-background-color; border-radius: @border-radius-sm; - transition: background-color .3s; + transition: background-color 0.3s; } &-track { @@ -33,7 +33,7 @@ height: 4px; background-color: @slider-track-background-color; border-radius: @border-radius-base; - transition: background-color .3s; + transition: background-color 0.3s; } &-handle { @@ -42,13 +42,13 @@ height: 14px; margin-top: -5px; margin-left: -7px; - background-color: @component-background; - border: solid 2px @slider-handle-color; + background-color: @slider-handle-background-color; + border: solid @slider-handle-border-width @slider-handle-color; border-radius: 50%; - box-shadow: 0; + box-shadow: @slider-handle-shadow; cursor: pointer; - transition: border-color .3s, box-shadow .6s, - transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28); + transition: border-color 0.3s, box-shadow 0.6s, + transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28); &:focus { border-color: @slider-handle-color-focus; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 4ecd6d2f41..ad5ec6064b 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -548,11 +548,14 @@ @slider-rail-background-color-hover: #e1e1e1; @slider-track-background-color: @primary-3; @slider-track-background-color-hover: @primary-4; +@slider-handle-border-width: 2px; +@slider-handle-background-color: @component-background; @slider-handle-color: @primary-3; @slider-handle-color-hover: @primary-4; @slider-handle-color-focus: tint(@primary-color, 20%); @slider-handle-color-focus-shadow: fade(@primary-color, 20%); @slider-handle-color-tooltip-open: @primary-color; +@slider-handle-shadow: 0; @slider-dot-border-color: @border-color-split; @slider-dot-border-color-active: tint(@primary-color, 50%); @slider-disabled-color: @disabled-color; From 6d76292b29cb23fdb09406f3c9ad3c88c3ed57f5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 18:28:02 +0800 Subject: [PATCH 29/39] :wrench: Add less var @progress-radius --- components/progress/Line.tsx | 4 +-- .../__tests__/__snapshots__/demo.test.js.snap | 28 +++++++++---------- .../__snapshots__/index.test.js.snap | 20 ++++++------- components/progress/style/index.less | 3 +- components/style/themes/default.less | 1 + 5 files changed, 29 insertions(+), 27 deletions(-) diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx index 077d0264f9..e033c1b44f 100644 --- a/components/progress/Line.tsx +++ b/components/progress/Line.tsx @@ -78,13 +78,13 @@ const Line: React.SFC = props => { const percentStyle = { width: `${validProgress(percent)}%`, height: strokeWidth || (size === 'small' ? 6 : 8), - borderRadius: strokeLinecap === 'square' ? 0 : '100px', + borderRadius: strokeLinecap === 'square' ? 0 : '', ...backgroundProps, }; const successPercentStyle = { width: `${validProgress(successPercent)}%`, height: strokeWidth || (size === 'small' ? 6 : 8), - borderRadius: strokeLinecap === 'square' ? 0 : '100px', + borderRadius: strokeLinecap === 'square' ? 0 : '', }; const successSegment = successPercent !== undefined ? ( diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap index 2a46083d21..fea5273804 100644 --- a/components/progress/__tests__/__snapshots__/demo.test.js.snap +++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap @@ -491,7 +491,7 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = ` >
@@ -664,7 +664,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = ` >
@@ -688,7 +688,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = ` >
@@ -854,7 +854,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = ` >
@@ -878,7 +878,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = ` >
@@ -902,7 +902,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = ` >
@@ -943,7 +943,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = ` >
@@ -984,7 +984,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = ` >
@@ -1009,7 +1009,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = ` >
@@ -1033,7 +1033,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = ` >
@@ -1057,7 +1057,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = ` >
@@ -1098,7 +1098,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = ` >
@@ -1257,11 +1257,11 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = ` >
diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap index ff6ea3bebd..68c03f9102 100644 --- a/components/progress/__tests__/__snapshots__/index.test.js.snap +++ b/components/progress/__tests__/__snapshots__/index.test.js.snap @@ -13,11 +13,11 @@ exports[`Progress render format 1`] = ` >
@@ -44,7 +44,7 @@ exports[`Progress render negetive progress 1`] = ` >
@@ -71,11 +71,11 @@ exports[`Progress render negetive successPercent 1`] = ` >
@@ -102,7 +102,7 @@ exports[`Progress render normal progress 1`] = ` >
@@ -129,7 +129,7 @@ exports[`Progress render out-of-range progress 1`] = ` >
@@ -173,7 +173,7 @@ exports[`Progress render out-of-range progress with info 1`] = ` >
@@ -296,7 +296,7 @@ exports[`Progress render strokeColor 2`] = ` style={ Object { "backgroundImage": "linear-gradient(to right, #108ee9, #87d068)", - "borderRadius": "100px", + "borderRadius": "", "height": 8, "width": "50%", } @@ -363,7 +363,7 @@ exports[`Progress render strokeColor 3`] = ` style={ Object { "backgroundImage": "linear-gradient(to right, #108ee9 0%, #87d068 100%)", - "borderRadius": "100px", + "borderRadius": "", "height": 8, "width": "50%", } diff --git a/components/progress/style/index.less b/components/progress/style/index.less index d56ef16fac..86375becca 100644 --- a/components/progress/style/index.less +++ b/components/progress/style/index.less @@ -36,7 +36,7 @@ width: 100%; vertical-align: middle; background-color: @progress-remaining-color; - border-radius: 100px; + border-radius: @progress-radius; } &-circle-trail { @@ -52,6 +52,7 @@ &-bg { position: relative; background-color: @progress-default-color; + border-radius: @progress-radius; transition: all 0.4s @ease-out-circ 0s; } diff --git a/components/style/themes/default.less b/components/style/themes/default.less index ad5ec6064b..a4a6f38791 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -370,6 +370,7 @@ @progress-default-color: @processing-color; @progress-remaining-color: @background-color-base; @progress-text-color: @text-color; +@progress-radius: 100px; // Menu // --- From b09d59e9fe7d9ed29561d5cc440135539fdfb473 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 18:43:10 +0800 Subject: [PATCH 30/39] :wrench: Add less variables for Timeline --- components/style/themes/default.less | 8 ++++++++ components/timeline/style/index.less | 9 +++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/components/style/themes/default.less b/components/style/themes/default.less index a4a6f38791..832cfaf510 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -631,3 +631,11 @@ // --- @drawer-header-padding: 16px 24px; @drawer-body-padding: 24px; + +// Timeline +// --- +@timeline-width: 2px; +@timeline-color: @border-color-split; +@timeline-dot-border-width: 2px; +@timeline-dot-color: @primary-color; +@timeline-dot-bg: @component-background; diff --git a/components/timeline/style/index.less b/components/timeline/style/index.less index 995c828379..70307f2e85 100644 --- a/components/timeline/style/index.less +++ b/components/timeline/style/index.less @@ -2,7 +2,6 @@ @import '../../style/mixins/index'; @timeline-prefix-cls: ~'@{ant-prefix}-timeline'; -@timeline-color: @border-color-split; .@{timeline-prefix-cls} { .reset-component; @@ -23,7 +22,7 @@ top: 0.75em; left: 4px; height: 100%; - border-left: 2px solid @timeline-color; + border-left: @timeline-width solid @timeline-color; } &-pending &-head { @@ -38,18 +37,20 @@ position: absolute; width: 10px; height: 10px; - background-color: @component-background; - border: 2px solid transparent; + background-color: @timeline-dot-bg; + border: @timeline-dot-border-width solid transparent; border-radius: 100px; &-blue { color: @primary-color; border-color: @primary-color; } + &-red { color: @error-color; border-color: @error-color; } + &-green { color: @success-color; border-color: @success-color; From c15c0fc199fa56e9c4202dabadea15e543b69206 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 18:58:30 +0800 Subject: [PATCH 31/39] :wrench: Add less variables for Tabs[type="card"] --- components/style/themes/default.less | 2 ++ components/tabs/style/card-style.less | 6 +++++- components/tabs/style/index.less | 12 ++++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 832cfaf510..e519704569 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -490,6 +490,8 @@ @tabs-highlight-color: @primary-color; @tabs-hover-color: @primary-5; @tabs-active-color: @primary-7; +@tabs-card-gutter: 2px; +@tabs-card-tab-active-border-top: 2px solid transparent; // BackTop // --- diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less index ea100406e5..8582c41180 100644 --- a/components/tabs/style/card-style.less +++ b/components/tabs/style/card-style.less @@ -14,7 +14,7 @@ &&-card &-card-bar &-tab { height: @tabs-card-height; margin: 0; - margin-right: 2px; + margin-right: @tabs-card-gutter; padding: 0 16px; line-height: @tabs-card-height - 2px; background: @tabs-card-head-background; @@ -28,6 +28,10 @@ background: @component-background; border-color: @border-color-split; border-bottom: @border-width-base solid @component-background; + + &::before { + border-top: @tabs-card-tab-active-border-top; + } } &&-card &-card-bar &-tab-disabled { color: @tabs-card-active-color; diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index bd2f5f203f..957d4b3c15 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -181,6 +181,18 @@ cursor: pointer; transition: color 0.3s @ease-in-out; + &::before { + position: absolute; + top: -1px; + left: 0; + width: 100%; + border-top: 2px solid transparent; + border-radius: @border-radius-base @border-radius-base 0 0; + transition: all 0.3s; + content: ''; + pointer-events: none; + } + &:last-child { margin-right: 0; } From 37784bc8a2d849b50d373bf14feb893256ca7e9c Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 19:04:40 +0800 Subject: [PATCH 32/39] :white_check_mark: fix snapshot --- .../__tests__/__snapshots__/components.test.js.snap | 6 +++--- .../upload/__tests__/__snapshots__/uploadlist.test.js.snap | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index 9157ace9c4..3e81296784 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -9607,7 +9607,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = ` >
@@ -9634,7 +9634,7 @@ exports[`ConfigProvider components Progress normal 1`] = ` >
@@ -9661,7 +9661,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = ` >
diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap index b264e7decc..f6f21ed7ac 100644 --- a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap +++ b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap @@ -97,7 +97,7 @@ exports[`Upload List handle error 1`] = ` >
@@ -206,7 +206,7 @@ exports[`Upload List should be uploading when upload a file 1`] = ` >
@@ -315,7 +315,7 @@ exports[`Upload List should be uploading when upload a file 2`] = ` >
From a9a24d0d390bf43457fb24b4978abfd98b37c976 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 17 Jul 2019 19:52:02 +0800 Subject: [PATCH 33/39] :memo: Add components count in component page --- site/bisheng.config.js | 1 + site/theme/static/common.less | 20 +++++++++++----- site/theme/template/Content/MainContent.jsx | 26 ++++++++++++++++++++- 3 files changed, 40 insertions(+), 7 deletions(-) diff --git a/site/bisheng.config.js b/site/bisheng.config.js index b05e034aad..7b57976fb8 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -45,6 +45,7 @@ module.exports = { 其他: 6, Other: 6, Components: 100, + 组件: 100, }, typeOrder: { General: 0, diff --git a/site/theme/static/common.less b/site/theme/static/common.less index bdcd572b9d..f578cd124f 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -100,13 +100,21 @@ a { } // reset menu text color -.menu-site .ant-menu-item > a { - color: @site-text-color; -} +.menu-site { + .ant-menu-item > a { + color: @site-text-color; + } -.menu-site .ant-menu-item-selected > a, -.menu-site .ant-menu-item > a:hover { - color: @primary-color; + .ant-menu-item-selected > a, + .ant-menu-item > a:hover { + color: @primary-color; + } + + .menu-antd-components-count { + margin-left: .5em; + color: @disabled-color; + font-size: 12px; + } } #react-content { diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index ececd373d8..42afcd71f9 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'bisheng/router'; import { Row, Col, Menu, Icon, Affix } from 'antd'; +import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import get from 'lodash/get'; import MobileMenu from 'rc-drawer'; @@ -56,6 +57,26 @@ const getSideBarOpenKeys = nextProps => { return shouldOpenKeys; }; +const getSubMenuTitle = (menuItem) => { + if (menuItem.title !== 'Components') { + return menuItem.title; + } + let count = 0; + menuItem.children.forEach(item => { + if (item.children) { + count += item.children.length; + } + }); + return ( +

+ {menuItem.title === 'Components' ? ( + + ) : menuItem.title} + {count} +

+ ); +}; + export default class MainContent extends Component { static contextTypes = { intl: PropTypes.object.isRequired, @@ -117,7 +138,10 @@ export default class MainContent extends Component { return menuItems.map(menuItem => { if (menuItem.children) { return ( - {menuItem.title}} key={menuItem.title}> + {menuItem.children.map(child => { if (child.type === 'type') { return ( From d4c90d4a3b852d06a58eb6b6272157bf443c08c3 Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 17 Jul 2019 19:55:59 +0800 Subject: [PATCH 34/39] fix: delete drawer in child and re-render, no push started --- components/drawer/index.tsx | 22 ++++++++++++++++++++-- components/drawer/style/drawer.less | 7 +++---- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 8c775b41e9..2a5718531e 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -63,9 +63,19 @@ class Drawer extends React.Component{show && } + const { visible } = this.props; + if (visible && this.parentDrawer) { + this.parentDrawer.push(); + } + } + public componentDidUpdate(preProps: DrawerProps) { const { visible } = this.props; if (preProps.visible !== visible && this.parentDrawer) { @@ -77,6 +87,14 @@ class Drawer extends React.Component { this.setState({ push: true, @@ -186,7 +204,7 @@ class Drawer extends React.Component { const { prefixCls, diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less index 228c585165..dc6a550689 100644 --- a/components/drawer/style/drawer.less +++ b/components/drawer/style/drawer.less @@ -11,10 +11,10 @@ z-index: @zindex-modal; width: 0%; height: 100%; - + transition: transform @animation-duration-slow @ease-base-out; > * { - transition: transform @animation-duration-slow @ease-base-in, - box-shadow @animation-duration-slow @ease-base-in; + transition: transform @animation-duration-slow @ease-base-out, + box-shadow @animation-duration-slow @ease-base-out; } &-content-wrapper { @@ -197,7 +197,6 @@ transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow; } &-open { - transition: transform @animation-duration-slow @ease-base-out; &-content { box-shadow: @shadow-2; } From bc39c158abbb9fd8de1fd6a0df102242c96d11d9 Mon Sep 17 00:00:00 2001 From: jljsj Date: Wed, 17 Jul 2019 20:41:53 +0800 Subject: [PATCH 35/39] add test --- .../drawer/__tests__/MultiDrawer.test.js | 52 ++++++++++++++----- 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/components/drawer/__tests__/MultiDrawer.test.js b/components/drawer/__tests__/MultiDrawer.test.js index 48cf5c5925..d3571e2349 100644 --- a/components/drawer/__tests__/MultiDrawer.test.js +++ b/components/drawer/__tests__/MultiDrawer.test.js @@ -4,11 +4,12 @@ import Drawer from '..'; import Button from '../../button'; class MultiDrawer extends React.Component { - state = { visible: false, childrenDrawer: false }; + state = { visible: false, childrenDrawer: false, hasChildren: true }; showDrawer = () => { this.setState({ visible: true, + hasChildren: true, }); }; @@ -21,6 +22,7 @@ class MultiDrawer extends React.Component { showChildrenDrawer = () => { this.setState({ childrenDrawer: true, + hasChildren: true, }); }; @@ -30,14 +32,23 @@ class MultiDrawer extends React.Component { }); }; + onRemoveChildDrawer = () => { + this.setState({ + hasChildren: false, + }); + }; + render() { - const { childrenDrawer, visible } = this.state; + const { childrenDrawer, visible, hasChildren } = this.state; const { placement } = this.props; return (
+ Two-level drawer - -
This is two-level drawer
- + {hasChildren && ( + +
This is two-level drawer
+ + )}
{ expect(translateX).toEqual('translateY(180px)'); expect(wrapper.find('#two_drawer_text').exists()).toBe(true); }); + + it('render MultiDrawer is child in unmount', () => { + const wrapper = mount(); + wrapper.find('button#open_drawer').simulate('click'); + wrapper.find('button#open_two_drawer').simulate('click'); + wrapper.find('button#remove_drawer').simulate('click'); + let translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform; + expect(translateX).toEqual(undefined); + wrapper.find('button#open_two_drawer').simulate('click'); + translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform; + expect(translateX).toEqual('translateY(180px)'); + expect(wrapper.find('#two_drawer_text').exists()).toBe(true); + }); }); From 28d70f57fc22c1c92ef4a4491b6bb01a82fee27d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E5=AE=8F=E7=8E=BA?= Date: Thu, 18 Jul 2019 13:49:43 +0800 Subject: [PATCH 36/39] =?UTF-8?q?=E8=AE=A9card=E7=9A=84action=E6=9B=B4?= =?UTF-8?q?=E5=AE=B9=E6=98=93=E7=82=B9=E5=87=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/card/style/index.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/card/style/index.less b/components/card/style/index.less index a198bdd37a..aa41f07ba6 100644 --- a/components/card/style/index.less +++ b/components/card/style/index.less @@ -139,7 +139,7 @@ & > span { position: relative; - display: inline-block; + display: block; min-width: 32px; font-size: 14px; line-height: 22px; @@ -155,7 +155,8 @@ line-height: 22px; } - a { + a, + i { display: inline-block; width: 100%; color: @text-color-secondary; @@ -163,6 +164,7 @@ &:hover { color: @primary-color; + transition: color 0.3s; } } } From cdcbb54393b41f35db59e1e57745f86967e12434 Mon Sep 17 00:00:00 2001 From: zombieJ Date: Thu, 18 Jul 2019 15:13:23 +0800 Subject: [PATCH 37/39] fix dekko test (#17707) --- tests/dekko/lib.test.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/tests/dekko/lib.test.js b/tests/dekko/lib.test.js index 7821a89d52..ac97e03e92 100644 --- a/tests/dekko/lib.test.js +++ b/tests/dekko/lib.test.js @@ -7,7 +7,12 @@ $('lib') .hasFile('index.d.ts'); $('lib/*') - .filter(filename => !filename.endsWith('index.js') && !filename.endsWith('index.d.ts')) + .filter( + filename => + !filename.endsWith('index.js') && + !filename.endsWith('index.d.ts') && + !filename.endsWith('.map'), + ) .isDirectory() .filter(filename => !filename.endsWith('style') && !filename.endsWith('_util')) .hasFile('index.js') From f0c5f7ec00ebfabae2d217bea77430d804f40406 Mon Sep 17 00:00:00 2001 From: Regan Langford Date: Thu, 18 Jul 2019 13:10:01 +0200 Subject: [PATCH 38/39] Fixed typo in use-with-create-react-app.en-US.md Minor typo in the eject application section, have corrected and made the sentence slightly more descriptive. --- docs/react/use-with-create-react-app.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react/use-with-create-react-app.en-US.md b/docs/react/use-with-create-react-app.en-US.md index 8064f5906c..98f0096057 100644 --- a/docs/react/use-with-create-react-app.en-US.md +++ b/docs/react/use-with-create-react-app.en-US.md @@ -201,7 +201,7 @@ We use `modifyVars` option of [less-loader](https://github.com/webpack/less-load ## eject -You can also could try [yarn run eject](https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup) for a custom setup of create-react-app, although you should dig into it by yourself. +You can also eject your application using [yarn run eject](https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup) for a custom setup of create-react-app, although you should dig into it by yourself. ## Source code and other boilerplates From b7b1bcfc900696c5e3b8b66a0820aab402338c78 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 19 Jul 2019 10:50:56 +0800 Subject: [PATCH 39/39] :lipstick: pagiation item hovering without underline --- components/pagination/style/index.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index 8b6a5fef5c..2266fe266f 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -53,6 +53,10 @@ padding: 0 6px; color: @text-color; transition: none; + + &:hover { + text-decoration: none; + } } &:focus,