feat(Slider&Range): support custom style & aria

ant-design · Jun 9, 2017 · a83d0fe · a83d0fe
1 parent 2c79a05
commit a83d0fe
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 17 deletions.
diff --git a/components/list/__tests__/__snapshots__/demo.test.web.js.snap b/components/list/__tests__/__snapshots__/demo.test.web.js.snap
@@ -635,11 +635,21 @@ exports[`renders ./components/list/demo/form.md correctly 1`] = `
                     class="am-slider-step"
                   />
                   <div
+                    aria-disabled="false"
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    aria-valuenow="20"
                     class="am-slider-handle am-slider-handle-1"
+                    role="slider"
                     style="left:20%;"
                   />
                   <div
+                    aria-disabled="false"
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    aria-valuenow="80"
                     class="am-slider-handle am-slider-handle-2"
+                    role="slider"
                     style="left:80%;"
                   />
                   <div

diff --git a/components/range/__tests__/__snapshots__/demo.test.web.js.snap b/components/range/__tests__/__snapshots__/demo.test.web.js.snap
@@ -32,11 +32,21 @@ exports[`renders ./components/range/demo/basic.md correctly 1`] = `
           class="am-slider-step"
         />
         <div
+          aria-disabled="false"
+          aria-valuemax="20"
+          aria-valuemin="0"
+          aria-valuenow="3"
           class="am-slider-handle am-slider-handle-1"
+          role="slider"
           style="left:15%;"
         />
         <div
+          aria-disabled="false"
+          aria-valuemax="20"
+          aria-valuemin="0"
+          aria-valuenow="10"
           class="am-slider-handle am-slider-handle-2"
+          role="slider"
           style="left:50%;"
         />
         <div
@@ -73,11 +83,21 @@ exports[`renders ./components/range/demo/basic.md correctly 1`] = `
           class="am-slider-step"
         />
         <div
+          aria-disabled="false"
+          aria-valuemax="20"
+          aria-valuemin="0"
+          aria-valuenow="3"
           class="am-slider-handle am-slider-handle-1"
+          role="slider"
           style="left:15%;"
         />
         <div
+          aria-disabled="false"
+          aria-valuemax="20"
+          aria-valuemin="0"
+          aria-valuenow="10"
           class="am-slider-handle am-slider-handle-2"
+          role="slider"
           style="left:50%;"
         />
         <div
@@ -114,13 +134,21 @@ exports[`renders ./components/range/demo/basic.md correctly 1`] = `
           class="am-slider-step"
         />
         <div
+          aria-disabled="true"
+          aria-valuemax="20"
+          aria-valuemin="0"
+          aria-valuenow="3"
           class="am-slider-handle am-slider-handle-1"
-          disabled=""
+          role="slider"
           style="left:15%;"
         />
         <div
+          aria-disabled="true"
+          aria-valuemax="20"
+          aria-valuemin="0"
+          aria-valuenow="10"
           class="am-slider-handle am-slider-handle-2"
-          disabled=""
+          role="slider"
           style="left:50%;"
         />
         <div
@@ -129,5 +157,54 @@ exports[`renders ./components/range/demo/basic.md correctly 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="am-wingblank am-wingblank-lg"
+  >
+    <p
+      class="title"
+    >
+      Range, 自定义样式
+    </p>
+    <div
+      class="am-slider-wrapper"
+    >
+      <div
+        class="am-slider"
+      >
+        <div
+          class="am-slider-rail"
+          style="background-color:black;"
+        />
+        <div
+          class="am-slider-track am-slider-track-1"
+          style="visibility:visible;background-color:red;left:15%;width:35%;"
+        />
+        <div
+          class="am-slider-step"
+        />
+        <div
+          aria-disabled="false"
+          aria-valuemax="20"
+          aria-valuemin="0"
+          aria-valuenow="3"
+          class="am-slider-handle am-slider-handle-1"
+          role="slider"
+          style="background-color:yellow;left:15%;"
+        />
+        <div
+          aria-disabled="false"
+          aria-valuemax="20"
+          aria-valuemin="0"
+          aria-valuenow="10"
+          class="am-slider-handle am-slider-handle-2"
+          role="slider"
+          style="background-color:gray;left:50%;"
+        />
+        <div
+          class="am-slider-mark"
+        />
+      </div>
+    </div>
+  </div>
 </div>
 `;
diff --git a/components/range/demo/basic.md b/components/range/demo/basic.md
@@ -26,17 +26,49 @@ const App = () => {
       <WhiteSpace size="lg" />
       <WingBlank size="lg">
         <p className="title">Range, 基础使用</p>
-        <Range min={0} max={20} defaultValue={[3, 10]} onChange={log('change')} onAfterChange={log('afterChange')} />
+        <Range
+          min={0}
+          max={20}
+          defaultValue={[3, 10]}
+          onChange={log('change')}
+          onAfterChange={log('afterChange')}
+        />
       </WingBlank>
       <WhiteSpace size="lg" />
       <WingBlank size="lg">
         <p className="title">Range, 带 Tooltip</p>
-        <RangeWithTooltip min={0} max={20} defaultValue={[3, 10]} onChange={log('change')} onAfterChange={log('afterChange')} />
+        <RangeWithTooltip
+          min={0}
+          max={20}
+          defaultValue={[3, 10]}
+          onChange={log('change')}
+          onAfterChange={log('afterChange')}
+        />
       </WingBlank>
       <WhiteSpace size="lg" />
       <WingBlank size="lg">
         <p className="title">Range, 禁用</p>
-        <Range min={0} max={20} defaultValue={[3, 10]} onChange={log('change')} onAfterChange={log('afterChange')} disabled />
+        <Range
+          min={0}
+          max={20}
+          defaultValue={[3, 10]}
+          onChange={log('change')}
+          onAfterChange={log('afterChange')}
+          disabled
+        />
+      </WingBlank>
+      <WingBlank size="lg">
+        <p className="title">Range, 自定义样式</p>
+        <Range
+          min={0}
+          max={20}
+          defaultValue={[3, 10]}
+          onChange={log('change')}
+          onAfterChange={log('afterChange')}
+          trackStyle={[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]}
+          handleStyle={[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]}
+          railStyle={{ backgroundColor: 'black' }}
+        />
       </WingBlank>
     </div>
   );

diff --git a/components/range/index.en-US.md b/components/range/index.en-US.md
@@ -33,6 +33,9 @@ Properties | Descrition | Type | Default
 | count | number | `1` | Determine how many ranges to render, and multiple handles will be rendered (number + 1). |
 | allowCross | boolean | `true` | `allowCross` could be set as `true` to allow those handles to cross. |
 | pushable | boolean or number | `true` | `pushable` could be set as `true` to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. Example: ![](http://i.giphy.com/l46Cs36c9HrHMExoc.gif) |
+| handleStyle(`web`)    |  Array[Object]    |    | style of handle，will be applied to mutli handle follow the array elemetns order |
+| trackStyle(`web`)    | Array[Object]     |    | style of track，will be applied to mutli track follow the array elemetns order |
+| railStyle(`web`)    |  Object     |   | style of slider base style, which means the area that not been selected |
 
 ## ToolTip(Web Only)
 

diff --git a/components/range/index.zh-CN.md b/components/range/index.zh-CN.md
@@ -34,6 +34,9 @@ subtitle: 区域选择
 | count | number | `1` | Determine how many ranges to render, and multiple handles will be rendered (number + 1). |
 | allowCross | boolean | `true` | `allowCross` could be set as `true` to allow those handles to cross. |
 | pushable | boolean or number | `true` | `pushable` could be set as `true` to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. Example: ![](http://i.giphy.com/l46Cs36c9HrHMExoc.gif) |
+| handleStyle(`web`)    |  Array[Object]    |    | 滑块的样式，按数组顺序应用到多滑块  |
+| trackStyle(`web`)    | Array[Object]     |    | 选中部分滑动条的样式，按数组顺序应用到滑动条的多区间 |
+| railStyle(`web`)    |  Object     |   | 未选中部分 |
 
 ## ToolTip(Web Only)
 

diff --git a/components/slider/__tests__/__snapshots__/demo.test.web.js.snap b/components/slider/__tests__/__snapshots__/demo.test.web.js.snap
@@ -32,7 +32,12 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
           class="am-slider-step"
         />
         <div
+          aria-disabled="false"
+          aria-valuemax="30"
+          aria-valuemin="0"
+          aria-valuenow="26"
           class="am-slider-handle"
+          role="slider"
           style="left:86.66666666666667%;"
         />
         <div
@@ -69,7 +74,12 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
           class="am-slider-step"
         />
         <div
+          aria-disabled="false"
+          aria-valuemax="30"
+          aria-valuemin="0"
+          aria-valuenow="26"
           class="am-slider-handle"
+          role="slider"
           style="left:86.66666666666667%;"
         />
         <div
@@ -106,8 +116,12 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
           class="am-slider-step"
         />
         <div
+          aria-disabled="true"
+          aria-valuemax="30"
+          aria-valuemin="0"
+          aria-valuenow="26"
           class="am-slider-handle"
-          disabled=""
+          role="slider"
           style="left:86.66666666666667%;"
         />
         <div
@@ -132,18 +146,23 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
       >
         <div
           class="am-slider-rail"
-          style="background-color:red;height:0.1rem;"
+          style="background-color:blue;height:0.1rem;"
         />
         <div
           class="am-slider-track"
-          style="visibility:visible;left:0%;width:86.66666666666667%;background-color:blue;height:0.1rem;"
+          style="visibility:visible;background-color:red;height:0.1rem;left:0%;width:86.66666666666667%;"
         />
         <div
           class="am-slider-step"
         />
         <div
+          aria-disabled="false"
+          aria-valuemax="30"
+          aria-valuemin="0"
+          aria-valuenow="26"
           class="am-slider-handle"
-          style="left:86.66666666666667%;border-color:blue;height:0.28rem;width:0.28rem;margin-left:-0.14rem;margin-top:-0.09rem;background-color:blue;"
+          role="slider"
+          style="border-color:blue;height:0.28rem;width:0.28rem;margin-left:-0.14rem;margin-top:-0.09rem;background-color:blue;left:86.66666666666667%;"
         />
         <div
           class="am-slider-mark"
@@ -188,6 +207,8 @@ exports[`renders ./components/slider/demo/custom-tooltip.md correctly 1`] = `
         <div>
           <div
             class="am-slider-handle"
+            max="30"
+            min="0"
             style="left:86.66666666666667%;"
           />
           <div
@@ -241,7 +262,12 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
             class="am-slider-step"
           />
           <div
+            aria-disabled="false"
+            aria-valuemax="20"
+            aria-valuemin="0"
+            aria-valuenow="0"
             class="am-slider-handle"
+            role="slider"
             style="left:0%;"
           />
           <div

diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md
@@ -45,11 +45,11 @@ class App extends React.Component {
             defaultValue={26}
             min={0}
             max={30}
-            maximumTrackStyle={{
+            trackStyle={{
               backgroundColor: 'red',
               height: '0.1rem',
             }}
-            minimumTrackStyle={{
+            railStyle={{
               backgroundColor: 'blue',
               height: '0.1rem',
             }}

diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md
@@ -32,9 +32,12 @@ Properties | Descrition | Type | Default
 | marks (`web only`)     |  Object{Number:String}     | { }    | 刻度标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内 |
 | dots (`web only`)     |  Boolean     | false    | 是否只能拖拽到刻度上 |
 | included (`web only`)    |  Boolean     | true    | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 |
-| maximumTrackStyle(`web`)    |  Object     |    | The style used for the track to the right of the button.  |
-| minimumTrackStyle(`web`)    |  Object     |   | The style used for the track to the left of the button. |
+| minimumTrackStyle(`web`)    |  Object     |   | The style used for the track to the left of the button.(`will be deprecate, please use trackStyle instead`)|
+| maximumTrackStyle(`web`)    |  Object     |    | The style used for the track to the right of the button.（`will be deprecate, please use railStyle instead`）  |
 | handleStyle(`web`)    |  Object     |    | The style used for handle.  |
+| handleStyle(`web`)    |  Object    |    | 滑块的样式  |
+| trackStyle(`web`)    | Object     |    | The style used for the track to the left of the button. |
+| railStyle(`web`)    |  Object     |   | The style used for the track to the right of the button. |
 
 ## ToolTip(Web Only)
 

diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md
@@ -33,9 +33,11 @@ subtitle: 滑动输入条
 | marks (`web only`)     |  Object{Number:String}     | { }    | 刻度标记，key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内 |
 | dots (`web only`)     |  Boolean     | false    | 是否只能拖拽到刻度上 |
 | included (`web only`)    |  Boolean     | true    | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 |
-| maximumTrackStyle(`web`)    |  Object     |    | 未选中 track 的样式 |
-| minimumTrackStyle(`web`)    |  Object     |   | 选中部分的 track 样式 |
-| handleStyle(`web`)    |  Object     |    | 滑块的样式  |
+| maximumTrackStyle(`web`)    |  Object     |    | 未选中 track 的样式(`将被废弃，请使用 railStyle 代替`) |
+| minimumTrackStyle(`web`)    |  Object     |   | 选中部分的 track 样式 (`将被废弃，请使用 trackStyle 代替`) |
+| handleStyle(`web`)    |  Object    |    | 滑块的样式  |
+| trackStyle(`web`)    | Object     |    | 选中部分滑动条的样式 |
+| railStyle(`web`)    |  Object     |   | 未选中部分 |
 
 ## ToolTip(Web Only)
 

diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "rc-drawer": "~0.4.9",
     "rc-input-number": "~3.4.13",
     "rc-notification": "~2.0.0",
-    "rc-slider": "~7.0.1",
+    "rc-slider": "~8.1.2",
     "rc-steps": "~2.5.1",
     "rc-swipeout": "~1.3.0",
     "rc-table": "~5.3.1",