From e6d2b71fb7dfe063ad09b5bcc775ec51558f58eb Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 4 Aug 2015 16:54:08 +0800 Subject: [PATCH 01/31] Add some design spec document --- spec/color.md | 8 +- spec/font.md | 196 +++++++++++++++++++++++++++++++++++++++++++++ spec/typography.md | 111 +++++++++++++++++++++++++ 3 files changed, 314 insertions(+), 1 deletion(-) diff --git a/spec/color.md b/spec/color.md index cee8d5349b..af84a78d6b 100644 --- a/spec/color.md +++ b/spec/color.md @@ -1,6 +1,12 @@ -# 色系和交互 +# 色彩 - category: 色彩 - order: 0 --- + +## 基础色系 + +## 扩展色板 + +## 交互 diff --git a/spec/font.md b/spec/font.md index a0b8fa2d09..01c8ca6034 100644 --- a/spec/font.md +++ b/spec/font.md @@ -5,3 +5,199 @@ --- +跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。 + +## 字体家族 + +- 中文字体族： + + + +- 英文文字体族： + + + +字体家族 css 代码如下： + +```css +font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","STHeitiSC-Light","Microsoft YaHei","微软雅黑",Arial,sans-serif; +``` + +代码字体： + +```css +font-family: "PT Mono",Menlo,Consolas,"Courier New",monospace; +``` + +## 字体使用规范 + +
+
+
+
主标题
+

+ 我是标题 + 加粗 + #666 + 16px +

+
+
+
次级标题
+

+ 我是标题 + 加粗 + #666 + 14px +

+
+
+
小标题
+

+ 我是标题 + 加粗 + #666 + 12px +

+
+
+
正文
+

+ 我是正文 + #666 + 12px +

+
+
+
辅助文字
+

+ 我是辅助文字 + #999 + 12px +

+
+
+
失效文字
+

+ 我是失效文字 + #ccc + 12px +

+
+
+
链接文字
+

+ + 我是链接文字 + #2db7f5 + 12px + +

+
+
+
+
+
Main Head
+

+ I am example text + bold + #666 + 16px +

+
+
+
Sub Head
+

+ I am example text + bold + #666 + 14px +

+
+
+
Small Head
+

+ I am example text + bold + #666 + 12px +

+
+
+
Text
+

+ I am example text + #666 + 12px +

+
+
+
Help Text
+

+ I am example text + #999 + 12px +

+
+
+
Disabled Text
+

+ I am example text + #ccc + 12px +

+
+
+
Link Text
+

+ + I am example text + #2db7f5 + 12px + +

+
+
+
+ + diff --git a/spec/typography.md b/spec/typography.md index 51286993d4..ee51e5fb91 100644 --- a/spec/typography.md +++ b/spec/typography.md @@ -4,3 +4,114 @@ - order: 1 --- + +良好的排版规范能大大提升用户的视觉体验。 + +## 行高和段落 + +考虑到阅读的舒适度和节奏感，句子和段落间需要合适的间距。行距決定了段落中各行文字的垂直距离，通过字体本身行高来控制，我们行高默认为字号的1.5倍。段落间距決定了段落上下的间距，一般采用直接空一行来解决。 + +
+
+

12px 段落

+

汉学家称这个空白字为「盘古之白」，因为它劈开了全角字和半角字之间的混沌。

+

另有有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。

+
+
+

14px 段落

+

汉学家称这个空白字为「盘古之白」，因为它劈开了全角字和半角字之间的混沌。

+

另有有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。

+
+
+ + + + +## 标点和空格 + + + +1. 使用全角中文标点。 +2. 遇到完整的英文整句、特殊名词，其内容使用半角标点。 +3. 数字使用半角字符。 +4. 不重复使用标点符号。 + +### 空格规范 + +1. 中文和英文间需要空格。 +2. 数字与单位之间需要增加空格。 + 例外：度、百分比与数字之间不需要增加空格。 +3. 中文链接之间增加空格。 + + +## 文字背景 + +当文字和背景明暗对比小于一定比值时，人眼识别文字信息将会变得吃力，尤其在明亮的室外或晃动的情况下。 + +方法：若彩色背景，可先将色彩去色转为黑白，分别吸取并查看背景和文字的 `HSV` 色值。 +两者的 V 值的差额便是明暗对比差。这个明暗对比差建议不小于 40。 + + + + +## 对齐 + +### 中文/英文居左对齐 + +中文和英文均采用左对齐的方式，是因为文字的阅读顺序一般是从左到右的。 + + + +### 数字/小数点对齐 + + + +

数字通常采用右对齐或小数点对齐，这样便于对个十百千位上的数字进行对比。

+ + +### 冒号对齐 + + + +

以冒号对齐的方式在form表单中尤其常见。主要是为了区分标题和内容区块，除了美观简洁外，让用户能迅速看清标题减少出错概率。

+ +## 文案长度 + +语言通常是越简单越明确，而提示性文字更需要简明扼要，让用户一目了然，减少操作失误。提示性句子长度是业务而定，建议一般不超过 16–18 个字。 + + + +保持简明准确的方法： + +- 每个句子只包含一个观点； +- 使用明确的词； +- 尽可能使用主动语态少用被动语态； + +## 层级引导 + +我们通常使用对比的手法来区分出信息的层次感，信息主次分明能准确地将信息清晰地传达给用户，让用户第一眼获取所需资讯，提升阅读体验。 + + + +### Squint test + +我们可以采用 [模糊测试](https://chrome.google.com/webstore/detail/the-squint-test/gppnipfbappicilfniaimcnagbpfflpg) 的方法，即眯起眼睛从整体来检视结构上的合理与否。 + + + + From 2a321dd22fb23a36f4f5ecfc013b0cb6c2c96095 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 5 Aug 2015 17:35:52 +0800 Subject: [PATCH 02/31] update colors spec --- spec/color.md | 12 ------ spec/colors.md | 110 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 110 insertions(+), 12 deletions(-) delete mode 100644 spec/color.md create mode 100644 spec/colors.md diff --git a/spec/color.md b/spec/color.md deleted file mode 100644 index af84a78d6b..0000000000 --- a/spec/color.md +++ /dev/null @@ -1,12 +0,0 @@ -# 色彩 - -- category: 色彩 -- order: 0 - ---- - -## 基础色系 - -## 扩展色板 - -## 交互 diff --git a/spec/colors.md b/spec/colors.md new file mode 100644 index 0000000000..db8e8c37ee --- /dev/null +++ b/spec/colors.md @@ -0,0 +1,110 @@ +# 色彩 + +- category: 色彩 +- order: 0 + +--- + +## 有意义的颜色 + +色彩在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。众所周知色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。 + +## 色板 + +Ant Design 的色板由 16 种基本色彩以及通过黑白叠加的方式扩展的色板组成。 + +### 主色 + + +1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 + + + +### 扩展色板 + +Ant Design 提供了16 种主色。每一种颜色都按照添加白色或者黑色 5％ 的规则，可以延展出 40 种颜色，由于 100% 的白色覆盖，90-100% 之间的黑色覆盖在视觉上看不出太多的差别，因此每种颜色省略前后4种颜色保留 36 色的衍生色，基本已经可以满足日常系统设计的需求。 + +
+ +### 灰色 + +灰色是中性化的颜色，通常传递出来的感觉是沉稳，在配色心理学中描述“专业化、系统化”的词条中灰色的使用占了较高的比例。同时灰色也是一种比较百搭的颜色，和很多颜色都可以很好的进行搭配使用。实际设计的过程中，常常用于字体颜色、边界色、阴影色以及界面中大面积背景的底色搭配。 + +
+ +## 交互 + +设计元素本身由于交互行为会引发一系列细微的视觉变化，而元素本身的颜色变化有时也能很好的实现这一目的。在进行这类设计的同时，建议采取在颜色上添加黑色或者白色并按照 nX5% 的规律递增的方式来实现。以下图为例，当鼠标移动到某个特定元素，就视为浮起，对应颜色就相应增加白色叠加，相反点击的行为可以理解为按下去，在颜色上就相应的增加黑色的叠加。 + + + + + + + + +`````jsx +let Palette = React.createClass({ + render() { + let color = this.props.color; + let values = new Values(color).all(5); + let extendTintColors = values.map((value, i) => { + if (i >= (values.length-1)/2) { + return null; + } + return
; + }).reverse(); + let extendShadeColors = values.map((value, i) => { + if (i <= (values.length-1)/2 || i >= values.length-3) { + return null; + } + return
; + }); + return
+
{color}
+ {extendTintColors} + {extendShadeColors} +
; + } +}); +let ExtendPalettes = React.createClass({ + render() { + var colors = ["#ED1C1C", "#E75B10", "#FF6600", "#FDBF06", "#F1E60E", "#96DA19", "#31C009", "#06D9CF", "#0EC4DF", "#2DB7F5", "#1062CE", "#3344D8", "#582DAA", "#BC1ACD", "#FB1479", "#C21D63"]; + return
+ {colors.map((color) => { + return ; + })} +
; + } +}); +let GreyPalette = React.createClass({ + render() { + var colors = ["#ED1C1C", "#E75B10", "#FF6600", "#FDBF06", "#F1E60E", "#96DA19", "#31C009", "#06D9CF", "#0EC4DF", "#2DB7F5", "#1062CE", "#3344D8", "#582DAA", "#BC1ACD", "#FB1479", "#C21D63"]; + return ; + } +}); +React.render(, document.getElementById('grey-palette')); +React.render(, document.getElementById('extend-palettes')); +````` From ac1852117ba0d9fefd7dcc8eb721d4306747127b Mon Sep 17 00:00:00 2001 From: SimaQ Date: Thu, 6 Aug 2015 18:58:37 +0800 Subject: [PATCH 03/31] update --- components/validation/demo/basic.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md index 839ea8b59e..d0c7580a0f 100644 --- a/components/validation/demo/basic.md +++ b/components/validation/demo/basic.md @@ -157,8 +157,8 @@ var Form = React.createClass({
- - + + {status.email.errors ?
{status.email.errors.join(',')}
: null}
From e958481e0006cbf4efd0a721c47b69eb75e0201e Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 6 Aug 2015 21:49:52 +0800 Subject: [PATCH 04/31] rollback dep version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 56bf0f40e1..ea771ce52a 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "rc-dropdown": "~1.1.1", "rc-form-validation": "~2.4.7", "rc-input-number": "~2.0.1", - "rc-menu": "~3.5.0", + "rc-menu": "~3.4.0", "rc-notification": "~1.1.0", "rc-pagination": "~1.1.0", "rc-progress": "~1.0.0", From 454e5cc22be83d489d7319cd14210b0352b1c237 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Fri, 7 Aug 2015 00:16:21 +0800 Subject: [PATCH 05/31] upgrade rc-select. Fixes #118 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ea771ce52a..1d30c13736 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "rc-pagination": "~1.1.0", "rc-progress": "~1.0.0", "rc-radio": "~2.0.0", - "rc-select": "~4.5.1", + "rc-select": "~4.5.2", "rc-slider": "~1.3.1", "rc-steps": "~1.1.4", "rc-switch": "~1.2.0", From ed549a19b3e818970cbcabd6a616e2bca85e045f Mon Sep 17 00:00:00 2001 From: yiminghe Date: Fri, 7 Aug 2015 00:34:06 +0800 Subject: [PATCH 06/31] upgrade rc-menu --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1d30c13736..d48619b42c 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "rc-dropdown": "~1.1.1", "rc-form-validation": "~2.4.7", "rc-input-number": "~2.0.1", - "rc-menu": "~3.4.0", + "rc-menu": "~3.5.0", "rc-notification": "~1.1.0", "rc-pagination": "~1.1.0", "rc-progress": "~1.0.0", From d60fca49930b5af30b8e7fabab73375e1072a816 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Fri, 7 Aug 2015 01:03:42 +0800 Subject: [PATCH 07/31] fix datasource --- components/table/demo/ajax.md | 30 ++++++++++++++++++++---------- components/table/index.jsx | 20 +++++++++++++++----- 2 files changed, 35 insertions(+), 15 deletions(-) diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 445e60bb44..3fb3e12909 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -56,7 +56,7 @@ var dataSource = new Table.DataSource({ sortField: sorter.field, sortOrder: sorter.order }; - for (let key in filters) { + for (var key in filters) { params[key] = filters[key]; } console.log('请求参数：', params); @@ -64,14 +64,24 @@ var dataSource = new Table.DataSource({ } }); -function fetch() { - dataSource.fetch().then(function() { - console.log('fetch done'); - }); -} +var Test=React.createClass({ + getInitialState(){ + return { + dataSource:dataSource + }; + }, + refresh(){ + this.setState({ + dataSource: this.state.dataSource.clone() + }); + }, + render(){ + return
+ + + ; + } +}); -React.render(
-
- -, document.getElementById('components-table-demo-ajax')); +React.render(, document.getElementById('components-table-demo-ajax')); ```` diff --git a/components/table/index.jsx b/components/table/index.jsx index 6b9e526046..977e2a8c2f 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -16,13 +16,25 @@ function defaultResolve(data) { } class DataSource { - constructor(config) { + init(config) { + this.config = config; this.url = config.url || ''; this.resolve = config.resolve || defaultResolve; this.getParams = config.getParams || noop; this.getPagination = config.getPagination || noop; this.headers = config.headers || {}; - this.fetch = noop; + } + + constructor(config) { + if (config) { + this.init(config); + } + } + + clone() { + var d = new DataSource(); + d.init(this.config); + return d; } } @@ -90,9 +102,7 @@ var AntTable = React.createClass({ }, getRemoteDataSource() { - let dataSource = this.props.dataSource; - dataSource.fetch = this.fetch; - return dataSource; + return this.props.dataSource; }, toggleSortOrder(order, column) { From 575af92b9248c84f2c5d6904c1b88e9138558a7f Mon Sep 17 00:00:00 2001 From: SimaQ Date: Fri, 7 Aug 2015 09:57:12 +0800 Subject: [PATCH 08/31] update email validation demo --- components/validation/demo/basic.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/validation/demo/basic.md b/components/validation/demo/basic.md index d0c7580a0f..1224ea7cee 100644 --- a/components/validation/demo/basic.md +++ b/components/validation/demo/basic.md @@ -157,8 +157,8 @@ var Form = React.createClass({
- - + + {status.email.errors ?
{status.email.errors.join(',')}
: null}
From 9b68103643ee07e6b4de08dc0d23f8b1176a99b6 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 7 Aug 2015 10:50:52 +0800 Subject: [PATCH 09/31] prefix className for affix --- components/affix/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/affix/index.jsx b/components/affix/index.jsx index 02b60d4cf3..dd9698c8cb 100644 --- a/components/affix/index.jsx +++ b/components/affix/index.jsx @@ -85,7 +85,7 @@ var Affix = React.createClass({ }, render() { - var affix = this.state.affix ? 'affix' : ''; + var affix = this.state.affix ? 'ant-affix' : ''; var className = this.props.className; return ( From 4c8d3994a2459207e9caa215cb492d19664396c9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 7 Aug 2015 10:58:15 +0800 Subject: [PATCH 10/31] improve code style --- components/table/demo/ajax.md | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 3fb3e12909..51ab08ca71 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -30,10 +30,6 @@ var columns = [{ dataIndex: 'address' }]; -function resolve(result) { - return result.data; -} - var dataSource = new Table.DataSource({ url: "/components/table/demo/data.json", resolve: function(result) { @@ -65,21 +61,23 @@ var dataSource = new Table.DataSource({ }); var Test=React.createClass({ - getInitialState(){ + getInitialState() { return { - dataSource:dataSource + dataSource: dataSource }; }, - refresh(){ + refresh() { this.setState({ dataSource: this.state.dataSource.clone() }); }, - render(){ + render() { return
-
- - ; +
+ + ; } }); From bba4f9df42fe2d0a6fc8132d4d28e72a91106d99 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 7 Aug 2015 11:04:22 +0800 Subject: [PATCH 11/31] ant-affix --- style/components/affix.less | 3 +++ style/components/index.less | 1 + style/core/base.less | 3 --- 3 files changed, 4 insertions(+), 3 deletions(-) create mode 100644 style/components/affix.less diff --git a/style/components/affix.less b/style/components/affix.less new file mode 100644 index 0000000000..c5e8cca7b1 --- /dev/null +++ b/style/components/affix.less @@ -0,0 +1,3 @@ +.ant-affix { + position: fixed; +} diff --git a/style/components/index.less b/style/components/index.less index b570a8feb1..9f1713900a 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -30,3 +30,4 @@ @import "carousel/slick"; @import "carousel/slick-theme"; @import "menu"; +@import "affix"; diff --git a/style/core/base.less b/style/core/base.less index eac808bfa2..f0df124a9d 100644 --- a/style/core/base.less +++ b/style/core/base.less @@ -98,6 +98,3 @@ a { .invisible { visibility: hidden; } -.affix { - position: fixed; -} From 43dbc2f24be2fe4c18c2b82902575030cfdf984b Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 7 Aug 2015 11:10:46 +0800 Subject: [PATCH 12/31] code style fix --- components/tree/index.jsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/components/tree/index.jsx b/components/tree/index.jsx index adcdbbb4dd..9bc1c2049f 100644 --- a/components/tree/index.jsx +++ b/components/tree/index.jsx @@ -1,14 +1,13 @@ import React from 'react'; import Tree from 'rc-tree'; -var TreeNode = Tree.TreeNode; - -var antDTree = React.createClass({ +var AntTree = React.createClass({ render() { return {this.props.children} ; } }); -antDTree.TreeNode = TreeNode; -module.exports = antDTree; + +AntTree.TreeNode = Tree.TreeNode; +export default AntTree; From 0d41181c1b9ea4f232464155d5fd4be3f52aee4d Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 7 Aug 2015 12:20:21 +0800 Subject: [PATCH 13/31] update component text --- components/menu/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/menu/index.md b/components/menu/index.md index 341c52e7a3..f16673ab74 100644 --- a/components/menu/index.md +++ b/components/menu/index.md @@ -5,9 +5,11 @@ --- +为页面和功能提供导航的菜单列表。 + ## 何时使用 -需要多级菜单时 +导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。 ```html From c0c2c22eb242c28d949e02445d43c2901f18868f Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 7 Aug 2015 12:32:37 +0800 Subject: [PATCH 14/31] disable color design spec --- site/templates/aside.html | 2 +- spec/colors.md | 1 + static/style.css | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/site/templates/aside.html b/site/templates/aside.html index 1ed4ca6a30..e22f65fa2a 100644 --- a/site/templates/aside.html +++ b/site/templates/aside.html @@ -8,7 +8,7 @@
    {%- for item in items %}
  • - + {{item.title}} {{item.meta.chinese}} diff --git a/spec/colors.md b/spec/colors.md index db8e8c37ee..a190443e76 100644 --- a/spec/colors.md +++ b/spec/colors.md @@ -2,6 +2,7 @@ - category: 色彩 - order: 0 +- disabled: true --- diff --git a/static/style.css b/static/style.css index 85c963b7f4..e6aec4be6d 100644 --- a/static/style.css +++ b/static/style.css @@ -225,7 +225,7 @@ a.logo { display: block; } -.nav ul li a.disabled { +a.nav-link-disabled { cursor: not-allowed; color: #ddd !important; pointer-events: none; From 87b76b86b01544966bf7505fc9818561caf86e3b Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 7 Aug 2015 12:36:44 +0800 Subject: [PATCH 15/31] update img --- spec/colors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/colors.md b/spec/colors.md index a190443e76..0c5cdab5ab 100644 --- a/spec/colors.md +++ b/spec/colors.md @@ -37,7 +37,7 @@ Ant Design 提供了16 种主色。每一种颜色都按照添加白色或者黑 设计元素本身由于交互行为会引发一系列细微的视觉变化，而元素本身的颜色变化有时也能很好的实现这一目的。在进行这类设计的同时，建议采取在颜色上添加黑色或者白色并按照 nX5% 的规律递增的方式来实现。以下图为例，当鼠标移动到某个特定元素，就视为浮起，对应颜色就相应增加白色叠加，相反点击的行为可以理解为按下去，在颜色上就相应的增加黑色的叠加。 - + From e1a6cfc72aee03ac99b2666a5a5c67ce0a0b886f Mon Sep 17 00:00:00 2001 From: jljsj Date: Fri, 7 Aug 2015 17:07:19 +0800 Subject: [PATCH 16/31] updata enterAnimation version --- components/enter-animation/index.md | 12 ++++++++---- package.json | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/components/enter-animation/index.md b/components/enter-animation/index.md index cf39487d4f..6e300b3695 100644 --- a/components/enter-animation/index.md +++ b/components/enter-animation/index.md @@ -52,8 +52,12 @@ |参数 |类型 |默认值 |详细 | |-----------------|-------|-------------|----------------------------------------------------| |type |string |`right` |执行动画的内置参数 | -|style |string |null |同上， style 的样式动画, `type` 有值，此项无效| +|eStyle |string |null |同上， style 的样式动画, `type` 有值，此项无效| +|direction |string |`enter`|动画进场或出场样式,以 `enter` `leave` 两值| +|duration |number |0.5 |每个动画的时间| +|ease |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动;| |delay |number |0 |整个区块的延时，以秒为单位| +|upend |boolean|false |是否倒放,从最后一个dom开始往上播放| |interval |number |0.1 |递增延时值，以秒为单位| ### enter-data @@ -68,9 +72,9 @@ |-----------------|-----------------|----------------|----------------------------------------------------| |type |string |`right` |内置动画样式：
    `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`| |style |string |null |动画样式，如 `transform: translateX(100px)`，`type` 有值此项无效| -|direction |string |`enter` |动画进出场方向：`enter` `leave`| -|duration |number |0.5 |动画的时间,以秒为单位| -|ease |string |`cubic-bezier(0.165, 0.84, 0.44, 1)`|样式缓动，只支持 css 样式缓动| +|direction |string |`enter` |动画进出场方向：`enter` `leave`,覆盖标签里的值| +|duration |number |0.5 |动画的时间,以秒为单位,覆盖标签里的值| +|ease |string |`cubic-bezier(0.165, 0.84, 0.44, 1)`|样式缓动，只支持 css 样式缓动,覆盖标签里的值| |delay |number |0 |动画的延时，依照结构递增以上的 `interval`| |queueId |number |0 |动画的线程| diff --git a/package.json b/package.json index d48619b42c..84b1e73343 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ ], "license": "MIT", "dependencies": { - "enter-animation": "~0.1.3", + "enter-animation": "~0.2.5", "gregorian-calendar": "~3.0.0", "gregorian-calendar-format": "~3.0.1", "is-equal-shallow": "~0.1.3", From 4f381b03011d876468e72f4a40ec5b87d8504946 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Fri, 7 Aug 2015 19:21:02 +0800 Subject: [PATCH 17/31] fix #120 --- components/popconfirm/index.jsx | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.jsx index 231baed17e..eb16b1d41e 100644 --- a/components/popconfirm/index.jsx +++ b/components/popconfirm/index.jsx @@ -13,22 +13,29 @@ export default React.createClass({ transitionName: '', placement: 'top', trigger: 'click', - onConfirm: function() {}, - onCancel: function() {} + onConfirm: function () { + }, + onCancel: function () { + } }; }, - confirm: function() { + confirm: function () { this.props.onConfirm.call(this); this.setState({ visible: false }); }, - cancel: function() { + cancel: function () { this.props.onCancel.call(this); this.setState({ visible: false }); }, + onVisibleChange(v){ + this.setState({ + visible: v + }); + }, render() { const overlay =
    @@ -36,6 +43,7 @@ export default React.createClass({ {this.props.title}

    +
    @@ -52,12 +60,13 @@ export default React.createClass({ return ( + prefixCls={prefixCls} + renderPopupToBody={false} + onVisibleChange={this.onVisibleChange} + transitionName={transitionName} + visible={this.state.visible} + trigger={this.props.trigger} + overlay={overlay}> {this.props.children} ); From aa6722b0d2b81c124b9429b2891f97a297312dd5 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Sat, 8 Aug 2015 00:49:48 +0800 Subject: [PATCH 18/31] upgrade slider --- package.json | 2 +- style/components/slider.less | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 84b1e73343..32b2b5e585 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "rc-progress": "~1.0.0", "rc-radio": "~2.0.0", "rc-select": "~4.5.2", - "rc-slider": "~1.3.1", + "rc-slider": "~1.4.0", "rc-steps": "~1.1.4", "rc-switch": "~1.2.0", "rc-table": "~3.1.0", diff --git a/style/components/slider.less b/style/components/slider.less index eca1cd1ed9..c6883e5003 100644 --- a/style/components/slider.less +++ b/style/components/slider.less @@ -133,7 +133,7 @@ display: none; } - &-placement-top { + &-placement-points-bc-tc { padding: @slider-tooltip-arrow-width 0 @slider-tooltip-distance 0; } @@ -158,7 +158,7 @@ border-style: solid; } - &-placement-top &-arrow { + &-placement-points-bc-tc &-arrow { bottom: @slider-tooltip-distance - @slider-tooltip-arrow-width; left: 50%; margin-left: -@slider-tooltip-arrow-width; From 7b64e31ea3bbece505a80ce7466e8d4ffa9b03d7 Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Sat, 8 Aug 2015 17:59:57 +0800 Subject: [PATCH 19/31] inputNumber size --- components/input-number/demo/disabled.md | 2 +- components/input-number/demo/size.md | 29 +++++++++++++ components/input-number/index.md | 1 + style/components/inputNumber.less | 54 ++++++++++++++++++++++++ 4 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 components/input-number/demo/size.md diff --git a/components/input-number/demo/disabled.md b/components/input-number/demo/disabled.md index abcdfcfe13..23c8cc723b 100644 --- a/components/input-number/demo/disabled.md +++ b/components/input-number/demo/disabled.md @@ -1,6 +1,6 @@ # 不可用 -- order: 0 +- order: 2 点击按钮切换可用状态。 diff --git a/components/input-number/demo/size.md b/components/input-number/demo/size.md new file mode 100644 index 0000000000..34814e6cd2 --- /dev/null +++ b/components/input-number/demo/size.md @@ -0,0 +1,29 @@ +# 三种大小 + +- order: 1 + +三种大小的数字输入框，当 className 分别为 `ant-input-number-lg` 和 `ant-input-number-sm` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px` + +--- + +````jsx +var InputNumber = antd.InputNumber; + +function onChange(value) { + console.log('changed', value); +} + +React.render( +
    + + + +
    +, document.getElementById('components-input-number-demo-size')); +```` + +````css +.ant-input-number{ + margin-right: 10px; +} +```` \ No newline at end of file diff --git a/components/input-number/index.md b/components/input-number/index.md index ad2603628c..00222a9136 100644 --- a/components/input-number/index.md +++ b/components/input-number/index.md @@ -25,3 +25,4 @@ | defaultValue | 初始值 | Number | | | onChange | 变化回调 | Function | | | disabled | 禁用 | Boolean | false | +| className | 输入框大小 | String | 无 | diff --git a/style/components/inputNumber.less b/style/components/inputNumber.less index f03bcf1627..c407cb7799 100644 --- a/style/components/inputNumber.less +++ b/style/components/inputNumber.less @@ -75,6 +75,60 @@ .disabled(); } } + + &-lg{ + padding: 0!important; + .ant-input-number-handler-wrap{ + height: 32px; + } + .ant-input-number-input-wrap{ + height: 32px; + } + .ant-input-number-handler{ + height: 16px; + } + + input{ + height: 32px; + line-height: 32px; + font-size: 14px; + } + + .ant-input-number-handler-up-inner{ + top: 2px; + } + .ant-input-number-handler-down-inner{ + top: 18px; + } + } + + &-sm{ + padding: 0!important; + .ant-input-number-handler-wrap{ + height: 22px; + } + .ant-input-number-input-wrap{ + height: 22px; + overflow: hidden; + position: relative; + } + .ant-input-number-handler{ + height: 11px; + } + + input{ + height: 22px; + line-height: 22px; + position: absolute; + top: 0; + } + .ant-input-number-handler-up-inner{ + top: -1px; + } + .ant-input-number-handler-down-inner{ + top: 10px; + } + } &-handler-wrap { float: right; From e3e17376f00952013b57478d1b9ed7949ae67264 Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Sat, 8 Aug 2015 19:11:10 +0800 Subject: [PATCH 20/31] selece size --- components/select/demo/size.md | 45 +++++++++++++++++++++++++++++++ components/select/index.md | 1 + style/components/select.less | 49 ++++++++++++++++++++++++++++++++++ 3 files changed, 95 insertions(+) create mode 100644 components/select/demo/size.md diff --git a/components/select/demo/size.md b/components/select/demo/size.md new file mode 100644 index 0000000000..79e3e15aeb --- /dev/null +++ b/components/select/demo/size.md @@ -0,0 +1,45 @@ +# 三种大小 + +- order: 0 + +三种大小的选择框，当 className 分别为 `ant-select-lg` 和 `ant-select-sm` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px` + +--- + +````jsx +var Select = antd.Select; +var Option = Select.Option; + +function handleChange(value) { + console.log('selected ' + value); +} + +React.render( +
    + + + +
    +, document.getElementById('components-select-demo-size')); +```` + +````css +.ant-select{ + margin: 0 10px 10px 0; +} +```` \ No newline at end of file diff --git a/components/select/index.md b/components/select/index.md index d651f6305d..cdcb3552b2 100644 --- a/components/select/index.md +++ b/components/select/index.md @@ -36,6 +36,7 @@ | placeholder | 选择框默认文字 | string | 无 | | searchPlaceholder | 搜索框默认文字 | string | 无 | | combobox | 输入框自动提示模式 | | false | +| className | 选择框大小 | String | 无 | ### Option props diff --git a/style/components/select.less b/style/components/select.less index 1494de3758..0d874c7d9c 100644 --- a/style/components/select.less +++ b/style/components/select.less @@ -116,6 +116,55 @@ } } + &-lg{ + .ant-select-selection--single{ + height: 32px; + .ant-select-selection__rendered{ + line-height: 30px; + font-size: 14px; + } + } + + .ant-select-selection--multiple{ + min-height: 32px; + .ant-select-selection__rendered{ + li{ + height: 24px; + .ant-select-selection__choice__content{ + font-size: 14px; + line-height: 24px; + } + } + } + } + } + + &-sm{ + .ant-select-selection--single{ + height: 22px; + .ant-select-selection__rendered{ + line-height: 20px; + } + } + .ant-select-selection--multiple{ + min-height: 22px; + .ant-select-selection__rendered{ + li{ + height: 14px; + .ant-select-selection__choice__content{ + line-height: 14px; + position: relative; + top: -3px; + } + .ant-select-selection__choice__remove{ + position: relative; + top: -4px; + } + } + } + } + } + &-disabled &-selection__choice__remove { color: #ccc; cursor: default; From 63cf7bb742e414563d4bad4879bb65030546f29e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=84=E5=AF=82?= Date: Sat, 8 Aug 2015 23:37:35 +0800 Subject: [PATCH 21/31] feat: add upload component --- components/upload/demo/click.md | 30 ++++++ components/upload/demo/dragstyle1.md | 33 +++++++ components/upload/demo/dragstyle2.md | 31 ++++++ components/upload/index.jsx | 140 +++++++++++++++++++++++++++ components/upload/index.md | 14 +++ index.js | 3 +- nico.js | 32 +++++- package.json | 4 +- style/components/index.less | 1 + style/components/upload.less | 112 +++++++++++++++++++++ 10 files changed, 397 insertions(+), 3 deletions(-) create mode 100644 components/upload/demo/click.md create mode 100644 components/upload/demo/dragstyle1.md create mode 100644 components/upload/demo/dragstyle2.md create mode 100644 components/upload/index.jsx create mode 100644 style/components/upload.less diff --git a/components/upload/demo/click.md b/components/upload/demo/click.md new file mode 100644 index 0000000000..646a86b2e9 --- /dev/null +++ b/components/upload/demo/click.md @@ -0,0 +1,30 @@ +# 点击上传 + +- order: 2 + +经典款式 + +--- + +````jsx +var Upload = antd.Upload; +var props = { + type: 'uploadClickStyle', + description: '支持扩展名为: .rar .zip ...', + action: '/upload.do', + data: {}, + accept: '', + uploadTip: '', + start: function(file){ + console.log(file.name) + }, + error: function() {}, + success: function() {}, + progress: function() {} +}; + +React.render( + , + document.getElementById('components-upload-demo-click') +); +```` diff --git a/components/upload/demo/dragstyle1.md b/components/upload/demo/dragstyle1.md new file mode 100644 index 0000000000..64edaa45c0 --- /dev/null +++ b/components/upload/demo/dragstyle1.md @@ -0,0 +1,33 @@ +# 拖拽上传 + +- order: 0 + +款式1 + +--- + +````jsx +var Upload = antd.Upload; + +var props = { + type: 'uploadDragStyleWithPicAndWords', + name: 'file', + action: '/upload.do', + data: {}, + accept: 'i', + uploadTip: '', + error: function(err) { + console.log(err) + }, + success: function() {}, + progress: function() {}, + start: function(file){ + console.log(file) + } +}; + +React.render( + , + document.getElementById('components-upload-demo-dragstyle1') +); +```` diff --git a/components/upload/demo/dragstyle2.md b/components/upload/demo/dragstyle2.md new file mode 100644 index 0000000000..0c9c5eab5a --- /dev/null +++ b/components/upload/demo/dragstyle2.md @@ -0,0 +1,31 @@ +# 拖拽上传 + +- order: 1 + +款式2 + +--- + +````jsx +var Upload = antd.Upload; + +var props = { + type: 'uploadDragStyleSimple', + name: 'file', + action: '/upload.do', + data: {}, + accept: '', + uploadTip: '', + error: function() {}, + success: function() {}, + progress: function() {}, + start: function(){ + + } +}; + +React.render( + , + document.getElementById('components-upload-demo-dragstyle2') +); +```` diff --git a/components/upload/index.jsx b/components/upload/index.jsx new file mode 100644 index 0000000000..24e2af3b77 --- /dev/null +++ b/components/upload/index.jsx @@ -0,0 +1,140 @@ +import React from 'react'; +import Upload from 'rc-upload'; +import assign from 'object-assign'; +import Message from '../message'; +const prefixCls = 'ant-upload'; + +var DownloadList = React.createClass({ + handleClose(e) { + e.target.parentNode.style.display = 'none'; + }, + + render() { + var downloadItem = function(file){ + var statusIcon = file.status === 'done' ? : ; + var closeIcon = file.status === 'done' ? : ''; + return ( +
    + {statusIcon} + {file.filename} + {closeIcon} +
    + ); + }.bind(this); + return
    {this.props.items.map(downloadItem)}
    ; + } +}); + +export default React.createClass({ + getInitialState() { + return { + downloadList: [] + }; + }, + handleStart(file) { + var i = this.state.downloadList.length + 1; + var nextDownloadList = this.state.downloadList.concat([{id: i, uid: file.uid || '', filename: file.name, status: 'downloading' }]); + this.setState({downloadList: nextDownloadList}); + }, + handleSuccess(ret, file) { + var matchWay = file.uid === '' ? 'byName' : 'byUid'; + Message.success(file.name + '上传完成'); + for (var i = 0; i < this.state.downloadList.length; i++){ + if(matchWay === 'byName'){ + if(this.state.downloadList[i].filename === file.name){ + this.state.downloadList[i].status = 'done'; + } + }else{ + if(this.state.downloadList[i].uid === file.uid){ + this.state.downloadList[i].status = 'done'; + } + } + } + this.setState({downloadList: this.state.downloadList}); + }, + handleProgress() { + //console.log('handleProcess ', file); + }, + handleError() { + //console.log('err ',err) + Message.error('上传失败'); + }, + getDefaultProps() { + return { + type: 'uploadClickStyle', + name: 'ooxx', + multipart: false, + action: '', + data: {}, + accept: '', + uploadTip: '', + start: function() {}, + error: function() {}, + success: function() {}, + progress: function() {} + }; + }, + render() { + var type = this.props.type; + var props = assign({}, this.props); + + props.onStart = (file) => { + this.handleStart(file); + props.start.call(this, file); + }; + props.onSuccess = (ret, file) => { + this.handleSuccess(ret, file); + props.success.call(this, ret, file); + }; + props.onProgress = (step) => { + this.handleProgress(step); + props.progress.call(this, step); + }; + props.onError = (err) => { + this.handleError(err); + props.error.call(this, err); + }; + if (type === 'uploadDragStyleWithPicAndWords') { + return ( +
    + + +
    +

    + +

    +

    点击或将文件拖拽到此区域上传

    +

    支持单个或批量上传,严谨上传公司内部资料及其他违禁文件

    +
    +     + +
    + ); + } else if (type === 'uploadDragStyleSimple') { + return ( +
    + +
    + +
    +     +
    + ); + } else if (type === 'uploadClickStyle') { + return ( +
    + + +
    + + +
    + +     +
    {this.props.description}
    + +
    + ); + } + } +}); diff --git a/components/upload/index.md b/components/upload/index.md index df9009aeeb..3b89dab152 100644 --- a/components/upload/index.md +++ b/components/upload/index.md @@ -5,4 +5,18 @@ --- +## 关于上传 +- 上传是将信息从个人计算机(本地计算机)传递到中央计算机(远程计算机)系统上,让网络上的人都能看到.将制作好的网页、文字、图片、视频通过网页或者上传工具软件发布到互联网上的服务器系统上去,以便让其他人浏览、欣赏。这一过程称为上传。 + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|----------- |--------------------------------------------------------- | ---------- |-------| +| name | 可选参数, 上传的文件 | String | file | +| action | 必选参数, 上传的地址 | String | 无 | +| data | 可选参数, 上传所需参数 | Object | 无 | +| accept | 可选参数, 接受上传的文件类型, 详见input accept Attribute | String | 无 | +| onError | 可选参数, error callback |Function | 无 | +| onSuccess | 可选参数, success callback | Function | 无 | +| onProgress | 可选参数, progress callback, 现代浏览器有效 | Function | 无 | diff --git a/index.js b/index.js index e4f92edacf..4c45bdf21f 100644 --- a/index.js +++ b/index.js @@ -30,7 +30,8 @@ var antd = { RadioGroup: require('./components/radio/group'), Alert: require('./components/alert'), Validation: require('./components/validation'), - Tree: require('./components/Tree') + Tree: require('./components/Tree'), + Upload: require('./components/upload') }; module.exports = antd; diff --git a/nico.js b/nico.js index f60625bdd7..7aa929080b 100644 --- a/nico.js +++ b/nico.js @@ -1,6 +1,8 @@ var path = require('path'); var package = require('./package'); var webpack = require('webpack'); +var inspect = require('util').inspect; +var Busboy = require('busboy'); var webpackMiddleware = require('webpack-dev-middleware'); var webpackConfig = require('./webpack.config'); var webpackCompiler = webpack(webpackConfig); @@ -31,7 +33,35 @@ exports.ignorefilter = function(filepath, subdir) { } return true; }; -exports.middlewares = [{ +exports.middlewares = [ + { + name: 'upload', + filter: /upload\.do?$/, + handle: function(req, res, next) { + if (req.method === 'POST') { + var busboy = new Busboy({headers: req.headers}); + busboy.on('file', function(fieldname, file, filename, encoding, mimetype) { + console.log('File [' + fieldname + ']: filename: ' + filename + ', encoding: ' + encoding + ', mimetype: ' + mimetype); + file.on('data', function(data) { + console.log('File [' + fieldname + '] got ' + data.length + ' bytes'); + }); + file.on('end', function() { + console.log('File [' + fieldname + '] Finished'); + }); + }); + busboy.on('field', function(fieldname, val, fieldnameTruncated, valTruncated) { + console.log('Field [' + fieldname + ']: value: ' + inspect(val)); + }); + busboy.on('finish', function() { + console.log('Done parsing form!'); + //res.writeHead(303, { Connection: 'close', Location: '/' }); + res.end('success'); + }); + req.pipe(busboy); + } + } + }, + { name: 'webpackDevMiddleware', filter: /\.(js|css)(\.map)?$/, handle: function(req, res, next) { diff --git a/package.json b/package.json index 1a969f2c08..ccf9f87308 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "rc-tabs": "~5.2.0", "rc-tooltip": "~2.4.0", "rc-tree": "~0.10.0", + "rc-upload": "~1.2.4-beta2", "rc-util": "~2.0.3", "react-slick": "~0.6.4" }, @@ -78,7 +79,8 @@ "nico-jsx": "~0.5.8", "precommit-hook": "^1.0.7", "webpack": "^1.10.1", - "webpack-dev-middleware": "^1.2.0" + "webpack-dev-middleware": "^1.2.0", + "busboy": "~0.2.9" }, "scripts": { "babel": "babel components --out-dir lib", diff --git a/style/components/index.less b/style/components/index.less index e92fae7574..343765eee4 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -28,3 +28,4 @@ @import "tree"; @import "carousel/slick"; @import "carousel/slick-theme"; +@import "upload"; diff --git a/style/components/upload.less b/style/components/upload.less new file mode 100644 index 0000000000..d4a64e8304 --- /dev/null +++ b/style/components/upload.less @@ -0,0 +1,112 @@ +@prefixUploadClass: ant-upload; + +.@{prefixUploadClass} { + font-size: 12px; + &-container{ + width: 100%; + padding: 0 42px; + } + &-method-drag-picwords { + border: 1px dashed #d9d9d9; + border-radius: @border-radius-base; + text-align: center; + min-width: 100px; + height: 209px; + p.upload-drag-icon{ + .anticon { + font-size: 80px; + margin-top: -30px; + color: #2db7f5; + } + height: 60px; + margin: 44px auto 24px auto; + } + p.upload-tip-one{ + font-size: 14px; + color: #666; + } + p.upload-tip-two{ + font-size: 12px; + color: #666; + margin-top: 5px; + } + } + + &-method-drag-cross { + border: 1px dashed #d9d9d9; + border-radius: @border-radius-base; + text-align: center; + line-height: 146px; + width: 246px; + height: 146px; + .anticon { + color: #2db7f5; + font-size: 30px; + } + .upload-drag-area{ + width: 100%; + height: 100%; + } + } + + &-method-click { + .upload-btn{ + height: 22px; + line-height: 22px; + position: relative; + margin-bottom: 8px; + button{ + position: absolute; + top: 0; + left: 0; + padding-left: 20px; + text-align: left; + height: 22px; + line-height: 22px; + width: 76px; + border: 1px solid #d9d9d9; + background-color: #fff; + border-radius: 8px; + color: #666; + font-size: 12px; + outline: none; + } + .anticon{ + position: absolute; + top: 5px; + z-index: 10; + font-size: 10px; + margin: -4px 0 0 8px; + } + } + .upload-list { + margin-left: 4px; + } + .upload-list-item { + margin-bottom: 4px; + height: 22px; + overflow: hidden; + .anticon { + margin-top: -2px; + } + } + .upload-item-name { + font-size: 12px; + color: #666; + margin-left: 4px; + margin-right: 8px; + font-weight: normal; + } + .anticon { + font-size: 10px; + color: #999; + } + .upload-success-icon { + color: #87d068; + } + .upload-text-tip { + font-size: 12px; + color: #999; + } + } +} From b68ec83e3660ac7e89a1ad4d519a1b3274fcd5f2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 9 Aug 2015 18:00:20 +0800 Subject: [PATCH 22/31] =?UTF-8?q?=E4=BC=98=E5=8C=96=20upload=20=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 使用 Upload.dragger 代替 type 2. 将拖拽上传的内容区域交给用户自己实现 3. 改进 uploadList 的实现方式, 尽量避免使用 Dom 操作 4. 优化样式展现 --- components/upload/demo/{click.md => basic.md} | 8 +- components/upload/demo/drag-simple.md | 37 +++++ components/upload/demo/drag.md | 44 +++++ components/upload/demo/dragstyle1.md | 33 ---- components/upload/demo/dragstyle2.md | 31 ---- components/upload/index.jsx | 104 +++++------- components/upload/index.md | 4 +- components/upload/uploadList.jsx | 44 +++++ style/components/upload.less | 152 +++++++----------- 9 files changed, 233 insertions(+), 224 deletions(-) rename components/upload/demo/{click.md => basic.md} (74%) create mode 100644 components/upload/demo/drag-simple.md create mode 100644 components/upload/demo/drag.md delete mode 100644 components/upload/demo/dragstyle1.md delete mode 100644 components/upload/demo/dragstyle2.md create mode 100644 components/upload/uploadList.jsx diff --git a/components/upload/demo/click.md b/components/upload/demo/basic.md similarity index 74% rename from components/upload/demo/click.md rename to components/upload/demo/basic.md index 646a86b2e9..c05fea1d61 100644 --- a/components/upload/demo/click.md +++ b/components/upload/demo/basic.md @@ -1,15 +1,15 @@ # 点击上传 -- order: 2 +- order: 1 -经典款式 +经典款式，用户点击按钮弹出文件选择框。 --- ````jsx var Upload = antd.Upload; + var props = { - type: 'uploadClickStyle', description: '支持扩展名为: .rar .zip ...', action: '/upload.do', data: {}, @@ -25,6 +25,6 @@ var props = { React.render( , - document.getElementById('components-upload-demo-click') + document.getElementById('components-upload-demo-basic') ); ```` diff --git a/components/upload/demo/drag-simple.md b/components/upload/demo/drag-simple.md new file mode 100644 index 0000000000..29ffdb04ba --- /dev/null +++ b/components/upload/demo/drag-simple.md @@ -0,0 +1,37 @@ +# 拖拽上传 + +- order: 2 + +样式简单一些。 + +--- + +````jsx +var Dragger = antd.Upload.Dragger; + +var props = { + name: 'file', + action: '/upload.do', + data: {}, + accept: '', + uploadTip: '', + error: function() {}, + success: function() {}, + progress: function() {}, + start: function() {} +}; + +React.render( + + + , + document.getElementById('components-upload-demo-drag-simple') +); +```` + + diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md new file mode 100644 index 0000000000..1297b041ee --- /dev/null +++ b/components/upload/demo/drag.md @@ -0,0 +1,44 @@ +# 拖拽上传 + +- order: 1 + +可以把文件拖入指定区域，完成上传，同样支持点击上传。 + +--- + +````jsx +var Dragger = antd.Upload.Dragger; + +var props = { + name: 'file', + action: '/upload.do', + data: {}, + accept: 'i', + uploadTip: '', + error: function(err) { + console.log(err) + }, + success: function() {}, + progress: function() {}, + start: function(file){ + console.log(file) + } +}; + +React.render( + +

    + +

    +

    点击或将文件拖拽到此区域上传

    +

    支持单个或批量上传，严谨上传公司内部资料及其他违禁文件

    +     , + document.getElementById('components-upload-demo-drag') +); +```` + + diff --git a/components/upload/demo/dragstyle1.md b/components/upload/demo/dragstyle1.md deleted file mode 100644 index 64edaa45c0..0000000000 --- a/components/upload/demo/dragstyle1.md +++ /dev/null @@ -1,33 +0,0 @@ -# 拖拽上传 - -- order: 0 - -款式1 - ---- - -````jsx -var Upload = antd.Upload; - -var props = { - type: 'uploadDragStyleWithPicAndWords', - name: 'file', - action: '/upload.do', - data: {}, - accept: 'i', - uploadTip: '', - error: function(err) { - console.log(err) - }, - success: function() {}, - progress: function() {}, - start: function(file){ - console.log(file) - } -}; - -React.render( - , - document.getElementById('components-upload-demo-dragstyle1') -); -```` diff --git a/components/upload/demo/dragstyle2.md b/components/upload/demo/dragstyle2.md deleted file mode 100644 index 0c9c5eab5a..0000000000 --- a/components/upload/demo/dragstyle2.md +++ /dev/null @@ -1,31 +0,0 @@ -# 拖拽上传 - -- order: 1 - -款式2 - ---- - -````jsx -var Upload = antd.Upload; - -var props = { - type: 'uploadDragStyleSimple', - name: 'file', - action: '/upload.do', - data: {}, - accept: '', - uploadTip: '', - error: function() {}, - success: function() {}, - progress: function() {}, - start: function(){ - - } -}; - -React.render( - , - document.getElementById('components-upload-demo-dragstyle2') -); -```` diff --git a/components/upload/index.jsx b/components/upload/index.jsx index 24e2af3b77..007151b937 100644 --- a/components/upload/index.jsx +++ b/components/upload/index.jsx @@ -2,39 +2,27 @@ import React from 'react'; import Upload from 'rc-upload'; import assign from 'object-assign'; import Message from '../message'; +import UploadList from './uploadList'; const prefixCls = 'ant-upload'; -var DownloadList = React.createClass({ - handleClose(e) { - e.target.parentNode.style.display = 'none'; - }, - - render() { - var downloadItem = function(file){ - var statusIcon = file.status === 'done' ? : ; - var closeIcon = file.status === 'done' ? : ''; - return ( -
    - {statusIcon} - {file.filename} - {closeIcon} -
    - ); - }.bind(this); - return
    {this.props.items.map(downloadItem)}
    ; - } -}); - -export default React.createClass({ +let AntUpload = React.createClass({ getInitialState() { return { downloadList: [] }; }, handleStart(file) { - var i = this.state.downloadList.length + 1; - var nextDownloadList = this.state.downloadList.concat([{id: i, uid: file.uid || '', filename: file.name, status: 'downloading' }]); - this.setState({downloadList: nextDownloadList}); + var i = this.state.downloadList.length; + var nextDownloadList = this.state.downloadList; + nextDownloadList.push({ + id: i, + uid: file.uid || '', + filename: file.name, + status: 'downloading' + }); + this.setState({ + downloadList: nextDownloadList + }); }, handleSuccess(ret, file) { var matchWay = file.uid === '' ? 'byName' : 'byUid'; @@ -50,19 +38,19 @@ export default React.createClass({ } } } - this.setState({downloadList: this.state.downloadList}); + this.setState({ + downloadList: this.state.downloadList + }); }, handleProgress() { - //console.log('handleProcess ', file); }, handleError() { - //console.log('err ',err) Message.error('上传失败'); }, getDefaultProps() { return { - type: 'uploadClickStyle', - name: 'ooxx', + type: 'select', + name: '', multipart: false, action: '', data: {}, @@ -75,7 +63,7 @@ export default React.createClass({ }; }, render() { - var type = this.props.type; + var type = this.props.type || 'select'; var props = assign({}, this.props); props.onStart = (file) => { @@ -94,47 +82,35 @@ export default React.createClass({ this.handleError(err); props.error.call(this, err); }; - if (type === 'uploadDragStyleWithPicAndWords') { + if (type === 'drag') { return ( -
    - - -
    -

    - -

    -

    点击或将文件拖拽到此区域上传

    -

    支持单个或批量上传,严谨上传公司内部资料及其他违禁文件

    + +
    +
    + {this.props.children}
    - - -
    +
    +     ); - } else if (type === 'uploadDragStyleSimple') { + } else if (type === 'select') { return ( -
    +
    -
    - -
    +     -
    - ); - } else if (type === 'uploadClickStyle') { - return ( -
    - - -
    - - -
    - -     -
    {this.props.description}
    - +
    ); } } }); + +AntUpload.Dragger = React.createClass({ + render() { + return ; + } +}); + +export default AntUpload; diff --git a/components/upload/index.md b/components/upload/index.md index 3b89dab152..9973ebf156 100644 --- a/components/upload/index.md +++ b/components/upload/index.md @@ -5,9 +5,9 @@ --- -## 关于上传 +上传控件，包括选择上传和拖拽上传两种形式。 -- 上传是将信息从个人计算机(本地计算机)传递到中央计算机(远程计算机)系统上,让网络上的人都能看到.将制作好的网页、文字、图片、视频通过网页或者上传工具软件发布到互联网上的服务器系统上去,以便让其他人浏览、欣赏。这一过程称为上传。 +上传是将信息从个人计算机（本地计算机）传递到中央计算机（远程计算机）系统上,让网络上的人都能看到.将制作好的网页、文字、图片、视频通过网页或者上传工具软件发布到互联网上的服务器系统上去,以便让其他人浏览、欣赏。这一过程称为上传。 ## API diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx new file mode 100644 index 0000000000..06adba6bcf --- /dev/null +++ b/components/upload/uploadList.jsx @@ -0,0 +1,44 @@ +import React from 'react'; +const prefixCls = 'ant-upload'; + +export default React.createClass({ + getDefaultProps() { + return { + items: [] + }; + }, + getInitialState() { + return { + items: this.props.items + }; + }, + componentWillReceiveProps(nextProps) { + if ('items' in nextProps) { + this.setState({ + items: nextProps.items + }); + } + }, + handleClose(index) { + let items = this.state.items; + items.splice(items[index], 1); + this.setState({ + items: items + }); + }, + render() { + var items = this.state.items; + var downloadItem = (file) => { + var statusIcon = file.status === 'done' ? : ; + var closeIcon = file.status === 'done' ? : ''; + return ( +
    + {statusIcon} + {file.filename} + {closeIcon} +
    + ); + }; + return
    {items.map(downloadItem)}
    ; + } +}); diff --git a/style/components/upload.less b/style/components/upload.less index d4a64e8304..5f121258ba 100644 --- a/style/components/upload.less +++ b/style/components/upload.less @@ -1,112 +1,84 @@ @prefixUploadClass: ant-upload; .@{prefixUploadClass} { - font-size: 12px; - &-container{ - width: 100%; - padding: 0 42px; - } - &-method-drag-picwords { + &.@{prefixUploadClass}-drag { border: 1px dashed #d9d9d9; + transition: all 0.3s ease; + cursor: pointer; border-radius: @border-radius-base; text-align: center; - min-width: 100px; - height: 209px; - p.upload-drag-icon{ + width: 100%; + height: 100%; + position: relative; + + .@{prefixUploadClass}-drag-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + } + &:hover { + border: 1px dashed #999; + } + p.@{prefixUploadClass}-drag-icon { .anticon { font-size: 80px; margin-top: -30px; - color: #2db7f5; + color: tint(@primary-color, 20%); } height: 60px; - margin: 44px auto 24px auto; + margin-bottom: 24px; } - p.upload-tip-one{ + p.@{prefixUploadClass}-text { font-size: 14px; - color: #666; } - p.upload-tip-two{ + p.@{prefixUploadClass}-hint { font-size: 12px; - color: #666; - margin-top: 5px; - } - } - - &-method-drag-cross { - border: 1px dashed #d9d9d9; - border-radius: @border-radius-base; - text-align: center; - line-height: 146px; - width: 246px; - height: 146px; - .anticon { - color: #2db7f5; - font-size: 30px; - } - .upload-drag-area{ - width: 100%; - height: 100%; - } - } - - &-method-click { - .upload-btn{ - height: 22px; - line-height: 22px; - position: relative; - margin-bottom: 8px; - button{ - position: absolute; - top: 0; - left: 0; - padding-left: 20px; - text-align: left; - height: 22px; - line-height: 22px; - width: 76px; - border: 1px solid #d9d9d9; - background-color: #fff; - border-radius: 8px; - color: #666; - font-size: 12px; - outline: none; - } - .anticon{ - position: absolute; - top: 5px; - z-index: 10; - font-size: 10px; - margin: -4px 0 0 8px; - } - } - .upload-list { - margin-left: 4px; - } - .upload-list-item { - margin-bottom: 4px; - height: 22px; - overflow: hidden; - .anticon { - margin-top: -2px; - } - } - .upload-item-name { - font-size: 12px; - color: #666; - margin-left: 4px; - margin-right: 8px; - font-weight: normal; - } - .anticon { - font-size: 10px; color: #999; } - .upload-success-icon { - color: #87d068; + .anticon-plus { + font-size: 30px; + transition: all 0.3s ease; + color: #d9d9d9; + &:hover { + color: #999; + } } - .upload-text-tip { - font-size: 12px; + &:hover .anticon-plus { color: #999; } } } + +.@{prefixUploadClass}-list { + margin-left: 4px; + margin-top: 8px; + .@{prefixUploadClass}-list-item { + margin-bottom: 4px; + height: 22px; + overflow: hidden; + .anticon { + margin-top: -2px; + .iconfont-size-under-12px(10px); + &.anticon-cross { + cursor: pointer; + color: #999; + &:hover { + color: #666; + } + } + } + } + .@{prefixUploadClass}-item-name { + font-size: 12px; + color: #666; + margin-left: 4px; + margin-right: 8px; + font-weight: normal; + } + .@{prefixUploadClass}-success-icon { + color: @success-color; + font-weight: bold; + } +} From f9157ab8c48f3675981995e3c94c2dc65c7025cb Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 9 Aug 2015 18:13:46 +0800 Subject: [PATCH 23/31] code style --- components/upload/index.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/upload/index.jsx b/components/upload/index.jsx index 007151b937..b7064a82d8 100644 --- a/components/upload/index.jsx +++ b/components/upload/index.jsx @@ -27,13 +27,13 @@ let AntUpload = React.createClass({ handleSuccess(ret, file) { var matchWay = file.uid === '' ? 'byName' : 'byUid'; Message.success(file.name + '上传完成'); - for (var i = 0; i < this.state.downloadList.length; i++){ - if(matchWay === 'byName'){ - if(this.state.downloadList[i].filename === file.name){ + for (var i = 0; i < this.state.downloadList.length; i++) { + if (matchWay === 'byName') { + if (this.state.downloadList[i].filename === file.name) { this.state.downloadList[i].status = 'done'; } - }else{ - if(this.state.downloadList[i].uid === file.uid){ + } else { + if (this.state.downloadList[i].uid === file.uid) { this.state.downloadList[i].status = 'done'; } } From 9f1b188f87fcf488e6e57700b8712adea82723e4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 9 Aug 2015 18:23:18 +0800 Subject: [PATCH 24/31] fix remove logic in upload --- components/upload/uploadList.jsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/components/upload/uploadList.jsx b/components/upload/uploadList.jsx index 06adba6bcf..df8daad5b1 100644 --- a/components/upload/uploadList.jsx +++ b/components/upload/uploadList.jsx @@ -19,9 +19,19 @@ export default React.createClass({ }); } }, - handleClose(index) { + handleClose(file) { + var matchWay = file.uid === '' ? 'byName' : 'byUid'; let items = this.state.items; - items.splice(items[index], 1); + let removeItem = items.filter((item) => { + if (matchWay === 'byName') { + return item.filename === file.filename; + } else { + return item.uid === file.uid; + } + })[0]; + if (removeItem) { + items.splice(removeItem, 1); + } this.setState({ items: items }); @@ -30,7 +40,7 @@ export default React.createClass({ var items = this.state.items; var downloadItem = (file) => { var statusIcon = file.status === 'done' ? : ; - var closeIcon = file.status === 'done' ? : ''; + var closeIcon = file.status === 'done' ? : ''; return (
    {statusIcon} From ea3f38a58abc1dabcc8c668a18ec3be55965688d Mon Sep 17 00:00:00 2001 From: zhujun24 Date: Mon, 10 Aug 2015 13:22:50 +0800 Subject: [PATCH 25/31] unify size api name --- components/datepicker/demo/size.md | 4 ++-- components/datepicker/index.jsx | 9 ++++++++- components/datepicker/index.md | 2 +- components/input-number/demo/size.md | 6 +++--- components/input-number/index.jsx | 9 ++++++++- components/input-number/index.md | 2 +- components/select/demo/size.md | 6 +++--- components/select/index.jsx | 9 ++++++++- components/select/index.md | 2 +- 9 files changed, 35 insertions(+), 14 deletions(-) diff --git a/components/datepicker/demo/size.md b/components/datepicker/demo/size.md index d42f89e549..06b363a4ea 100644 --- a/components/datepicker/demo/size.md +++ b/components/datepicker/demo/size.md @@ -11,9 +11,9 @@ var Datepicker = antd.Datepicker; React.render(
    - + - +
    , document.getElementById('components-datepicker-demo-size')); ```` diff --git a/components/datepicker/index.jsx b/components/datepicker/index.jsx index 7ffb397704..e833f74b7b 100644 --- a/components/datepicker/index.jsx +++ b/components/datepicker/index.jsx @@ -64,6 +64,13 @@ export default React.createClass({ showOk={this.props.showTime} showClear={false}/> ); + var sizeClass = ' ant-input-'; + if(this.props.size === 'large'){ + sizeClass += 'lg'; + } + if(this.props.size === 'small'){ + sizeClass += 'sm'; + } return ( + className={'ant-calendar-picker-input ant-input' + sizeClass}/> ); } diff --git a/components/datepicker/index.md b/components/datepicker/index.md index 6f0888d6a9..c41e7b03bc 100644 --- a/components/datepicker/index.md +++ b/components/datepicker/index.md @@ -27,7 +27,7 @@ | onSelect | 选择日期的回调 | function | 无 | | showTime | 显示时间选择条 | boolean | false | | disabled | 禁用 | bool | false | -| size | 输入框大小，`lg`代表高为32px，`sm`代表高为22px，默认28px | string | 无 | +| size | 输入框大小，`large`代表高为32px，`small`代表高为22px，默认28px | string | 无 |