aliyun · WebEngineerLi · Apr 24, 2020 · Apr 24, 2020 · Apr 24, 2020 · Apr 24, 2020
diff --git a/packages/component/src/components/button/demo/demo1.js b/packages/component/src/components/button/demo/demo1.js
@@ -43,16 +43,12 @@ const Demo1 = () => (
       Secondary
     </Button>
     <div className="ghost-dark-background">
-      <Button ghost="dark">Ghost</Button>
-      <Button ghost="dark" loading>
+      <Button style={{ marginLeft: '16px' }} ghost="dark">
         Ghost
       </Button>
       <Button ghost="dark" disabled>
         Ghost
       </Button>
-      <Button ghost="dark" text>
-        Ghost
-      </Button>
     </div>
   </Wrapper>
 )

diff --git a/packages/component/src/components/date-picker/README.md b/packages/component/src/components/date-picker/README.md
@@ -11,6 +11,80 @@ tags:
 
 输入或选择日期的控件。当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
 
+### 日期选择模式
+
+DatePicker/RangePicker 在交互上增加了**操作焦点**的设置，意味着，如果某个输入框处于 focus 态，那么当前选择的日期将会作用于该输入框对应的日期。
+
+如上图所示，带时间的 RangePicker 有 4 个输入焦点，分别为开始日期、开始时间、结束日期、结束时间。当用户激活某个输入框时，此时下拉选择的日期将会作用域该输入框。同时设置了如下两个规则：
+
+1.  已选定日期范围后，当焦点在开始日期时，如果即将选择的日期大于结束日期，将会重设开始日期。
+2.  已选定日期范围后，当焦点在结束日期时，如果即将选择的日期小于开始日期，将会重设开始日期。
+
+### 日期值的多语言
+
+由于 Calendar 组件内部使用 moment 对象来设置日期（请使用最新版 moment），部分 Locale 读取自 moment，因此用户需要在外部使用时[正确的设置 moment 的 locale](http://momentjs.cn/docs/#/i18n/changing-locale/) 。
+
+-   Q: 文档站点上看是中式日历，为什么我本地却是美式日历呢？如何进行多语言适配？<br/>
+    A: 日期的多语言情况比较复杂，涉及到年、月、日、星期、阅读习惯等多方面(美式从周日到周六，中式从周一到周日)，因此我们借助了成熟的时间库 moment.js 来进行日期的多语言处理。
+     moment.js 默认支持美式表达，如需中文等其他语言，请引入moment-with-locales.js语言包。
+
+```js
+import moment from 'moment';
+
+moment.locale('zh-cn');
+```
+
+此外，当改变 moment 的全局 locale 时并不会修改之前的已有实例，例如：
+
+```js
+moment.locale('fr');
+const m = moment(1316116057189);
+m.fromNow(); // il y a une heure
+
+moment.locale('en');
+m.fromNow(); // il y a une heure
+moment(1316116057189).fromNow(); // an hour ago
+```
+
+除了全局设置 moment 的多语言，还可以只对某个 moment 实例设置多语言。比如：
+
+```js
+const value = moment();
+value.locale('fr'); // set this instance to use French
+```
+
+### Moment 对象和字符串
+
+DatePicker 默认情况下接收和返回的数据类型都是 Moment 对象。为了便于用户的使用，DatePikcer 还支持直接传入字符串（组件内部仍然会格式化为 Moment 对象）。使用方法如下：
+
+标准非受控
+
+```jsx
+<DatePicker onChange={val => console.log(val)} />
+// select 2019-01-23
+// >> MomentObject
+
+<DatePicker defaultValue={moment()} onChange={val => console.log(val)} />
+// select 2019-01-23
+// >> MomentObject
+
+<DatePicker defaultValue="2018-01-23" onChange={val => console.log(val)} />
+// select 2019-01-23
+// >> "2019-01-23"
+```
+
+标准受控
+
+```jsx
+<DatePicker value={moment()} onChange={val => console.log(val)} />
+// setProps({ value: moment().add(1, 'months') })
+// >> MomentObject
+
+<DatePicker value="2018-01-23" onChange={val => console.log(val)} />
+// setProps({ value: '2019-01-23' })
+// >> "2019-01-23"
+```
+
 交互说明
 
 DatePicker/RangePicker 在交互上增加了操作焦点的设置，意味着，如果某个输入框处于 focus 态，那么当前选择的日期将会作用于该输入框对应的日期。

diff --git a/packages/component/src/components/overlay/demo/demo1.js b/packages/component/src/components/overlay/demo/demo1.js
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback } from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const Demo1 = () => {
@@ -17,9 +17,9 @@ const Demo1 = () => {
 
   return (
     <div>
-      <button onClick={handleClick} ref={btnRef}>
+      <Button onClick={handleClick} ref={btnRef}>
         Toggle visible
-      </button>
+      </Button>
       <Overlay
         visible={visible}
         target={() => btnRef.current}
@@ -32,13 +32,13 @@ const Demo1 = () => {
   )
 }
 
-const SInner = styled.span`
+const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 
 export default Demo1
diff --git a/packages/component/src/components/overlay/demo/demo2.js b/packages/component/src/components/overlay/demo/demo2.js
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useRef } from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const Demo2 = () => {
@@ -17,9 +17,9 @@ const Demo2 = () => {
 
   return (
     <div>
-      <button onClick={handleClick} ref={btnRef}>
+      <Button onClick={handleClick} ref={btnRef}>
         Open
-      </button>
+      </Button>
       <Overlay
         visible={visible}
         safeNode={() => btnRef.current}
@@ -34,13 +34,13 @@ const Demo2 = () => {
   )
 }
 
-const SInner = styled.span`
+const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 
 export default Demo2
diff --git a/packages/component/src/components/overlay/demo/demo3.js b/packages/component/src/components/overlay/demo/demo3.js
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const { Popup } = Overlay
 
 const Demo3 = () => (
-  <Popup trigger={<button>Open</button>} triggerType="click">
+  <Popup trigger={<Button>Open</Button>} triggerType="click">
     <SInner>Hello World From Popup!</SInner>
   </Popup>
 )
@@ -14,9 +14,9 @@ const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 
 export default Demo3
diff --git a/packages/component/src/components/overlay/demo/demo4.js b/packages/component/src/components/overlay/demo/demo4.js
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const { Popup } = Overlay
@@ -13,7 +13,7 @@ const Demo4 = () => {
 
   return (
     <Popup
-      trigger={<button>Open</button>}
+      trigger={<Button>Open</Button>}
       triggerType="click"
       visible={visible}
       onVisibleChange={onVisibleChange}
@@ -27,9 +27,9 @@ const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 
 export default Demo4
diff --git a/packages/component/src/components/overlay/demo/demo5.js b/packages/component/src/components/overlay/demo/demo5.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const { Popup } = Overlay
 
 const Demo5 = () => (
-  <Popup trigger={<button>Open first overlay</button>} triggerType="click">
+  <Popup trigger={<Button>Open first overlay</Button>} triggerType="click">
     <SInner>
       <Popup
-        trigger={<button>Open second overlay</button>}
+        trigger={<Button>Open second overlay</Button>}
         triggerType="click"
         container={trigger => trigger.parentNode}
       >
@@ -25,9 +25,9 @@ const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 
 export default Demo5
diff --git a/packages/component/src/components/overlay/demo/demo6.js b/packages/component/src/components/overlay/demo/demo6.js
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { Overlay } from '@alicloud/console-components'
+import { Overlay, Button } from '@alicloud/console-components'
 import styled from 'styled-components'
 
 const { Popup } = Overlay
@@ -10,7 +10,7 @@ const Demo6 = () => {
   return (
     <SContainer ref={containerRef}>
       <Popup
-        trigger={<button style={{ marginTop: '40px' }}>Open</button>}
+        trigger={<Button style={{ marginTop: '40px' }}>Open</Button>}
         triggerType="click"
         container={trigger => trigger.parentNode}
         target={containerRef.current}
@@ -34,8 +34,8 @@ const SInner = styled.div`
   width: 300px;
   height: 100px;
   padding: 10px;
-  border: 1px solid #999999;
   background: #ffffff;
-  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
 `
 export default Demo6
diff --git a/packages/component/src/components/pagination/README.md b/packages/component/src/components/pagination/README.md
@@ -48,6 +48,9 @@ zhName: 翻页器
 
 #include "demo/demo8.js"
 
-<!-- ### 配合 react-router 使用 -->
+### 分页按钮连接
+
+#include "demo/demo8.js"
+
 
-<!-- #include "demo/demo9.js" -->
+#include "demo/demo9.js"
diff --git a/packages/component/src/components/pagination/demo/demo8.js b/packages/component/src/components/pagination/demo/demo8.js
@@ -1,10 +1,9 @@
 import React from 'react'
 import { Pagination } from '@alicloud/console-components'
 
-const format = typeof window === 'undefined'? '': `${window.location.href}#/{page}`;
+const format =
+  typeof window === 'undefined' ? '' : `${window.location.href}#/{page}`
 
-const Demo8 = () => (
-  <Pagination defaultCurrent={2} link={format} />
-)  
+const Demo8 = () => <Pagination defaultCurrent={2} link={format} />
 
-export default Demo8
+export default Demo8
diff --git a/packages/component/src/components/pagination/demo/demo9.js b/packages/component/src/components/pagination/demo/demo9.js
@@ -0,0 +1,41 @@
+import React, { useState, useCallback } from 'react'
+import { Pagination, Select } from '@alicloud/console-components'
+
+const { Option } = Select
+
+const Demo9 = () => {
+  const [pageSize, setPageSize] = useState(10)
+
+  const handleChange = useCallback(value => {
+    console.log('pageSize:', value)
+    setPageSize(value)
+  }, [])
+
+  return (
+    <>
+      <div style={{ marginBottom: '16px' }}>
+        <span>设置pageSize：</span>
+        <Select value={pageSize} onChange={handleChange}>
+          <Option value={10}>每页10条</Option>
+          <Option value={20}>每页20条</Option>
+          <Option value={50}>每页50条</Option>
+          <Option value={100}>每页100条</Option>
+        </Select>
+      </div>
+      <Pagination
+        defaultCurrent={2}
+        pageSizeSelector="dropdown"
+        pageSize={pageSize}
+        onPageSizeChange={setPageSize}
+        pageSizeList={[10, 20, 50, 100]}
+      />
+    </>
+  )
+}
+
+export default Demo9
+
+export const demoMeta = {
+  zhName: '设置`pageSizeSelector`的值',
+  zhDesc: `pageSizeSelector的值完全受pageSize的控制，如刷新页面之后pageSizeSelector的值发生改变，请确认pageSize是否改变`,
+}
diff --git a/packages/component/src/components/pagination/demo/index.js b/packages/component/src/components/pagination/demo/index.js
@@ -7,6 +7,7 @@ import Demo5 from './demo5'
 import Demo6 from './demo6'
 import Demo7 from './demo7'
 import Demo8 from './demo8'
+import Demo9 from './demo9'
 import './index.less'
 
 const PaginationDemo = () => (
@@ -27,6 +28,8 @@ const PaginationDemo = () => (
     <Demo7 />
     <h2>分页按钮链接</h2>
     <Demo8 />
+    <h2>每页展示条数(受控)</h2>
+    <Demo9 />
   </div>
 )