feat: add Slider 滑块组件

demo/Slider/SliderDemo.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import Slider from 'salt-slider';
+import './SliderDemo.styl'
+
+export default class App extends React.Component {
+  log = (name) => {
+    return (value) => {
+      console.log(`${name}: ${value}`);
+    };
+  }
+
+  render() {
+    return (
+      <div className="t-slider-example">
+        <p className="sub-title">基本滑块</p>
+        <Slider
+          className="slider-demo"
+          defaultValue={26}
+          onChange={this.log('change')}
+          onAfterChange={this.log('afterChange')}
+        />
+        <p className="sub-title">滑块-禁用</p>
+        <Slider
+          className="slider-demo"
+          defaultValue={26}
+          min={0}
+          max={30}
+          disabled
+          onChange={this.log('change')}
+          onAfterChange={this.log('afterChange')}
+        />
+        <p className="sub-title">滑块-带刻度</p>
+        <Slider
+          className="slider-demo"
+          defaultValue={26}
+          min={0}
+          max={30}
+          marks={{5: 'mark1',15: 'mark2'}}
+          onChange={this.log('change')}
+          onAfterChange={this.log('afterChange')}
+        />
+        <p className="sub-title">滑块-自定义颜色</p>
+        <Slider
+          className="slider-demo"
+          defaultValue={26}
+          min={0}
+          max={30}
+          trackStyle={{
+            backgroundColor: '#F4606C',
+            height: '5px',
+          }}
+          railStyle={{
+            backgroundColor: '#BEE7E9',
+            height: '5px',
+          }}
+          handleStyle={{
+            borderColor: '#BEE7E9',
+            height: '14px',
+            width: '14px',
+            marginLeft: '-7px',
+            marginTop: '-4.5px',
+            backgroundColor: '#BEE7E9',
+          }}
+        />
+      </div>
+    )
+  }
+}

demo/Slider/SliderDemo.styl

@@ -0,0 +1,15 @@
+@require '../../dev/demo'
+@require '../../src/Slider/Slider'
+
+.slider-demo-wrapper {
+  margin-bottom: 15px;
+  margin-left: 30px;
+  margin-right: 30px;
+}
+
+.sub-title {
+  color: #888;
+  font-size: 14px;
+  padding: 30px 0 18px 0;
+  margin-left: 10px;
+}

demo/Slider/index.js

@@ -0,0 +1,11 @@
+import 'salt-context';
+
+import Demo from './SliderDemo';
+import './SliderDemo.styl';
+
+// 渲染 demo
+if (window.FastClick) {
+  window.FastClick.attach(document.body);
+}
+
+export default Demo;

dev/demo.styl

@@ -1 +1 @@
-@require '/../style/theme/green/saltui';
+@require '/../style/theme/salt-ui/saltui';

docs/Slider.md

@@ -0,0 +1,24 @@
+## 滑动条
+
+左边为最小值，右边为最大值。
+
+## Props 定义
+所有 Props 都是可选的
+
+配置项 | 类型 | 默认值 | 说明
+----|-----|------|------
+| min    |  number     | 0     | 最小值 |
+| max    |  number     | 100    | 最大值 |
+| step    |  number or null     | 1    | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 |
+| value    |  number  |     | 设置当前取值。 |
+| defaultValue    |  number   | 0     | 设置初始取值。|
+| disabled    |  boolean     | false    | 值为 `true` 时，滑块为禁用状态 |
+| onChange    |  function     | noop    | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 |
+| onAfterChange    |  function     | noop    | 与 `ontouchend` 触发时机一致，把当前值作为参数传入。 |
+| marks   |  object{number: string}     | { }    | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 [min, max] 内 |
+| dots   |  boolean     | false    | 是否只能拖拽到刻度上 |
+| included  |  boolean     | true    | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 |
+| handleStyle  |  object    |    | 滑块的样式  |
+| trackStyle  | object     |    | 选中部分滑动条的样式 |
+| railStyle  |  object     |   | 未选中部分 |
+| className  |  string     | salt-ui-slider  | 自定义的 class 名称|

package.json

@@ -79,6 +79,7 @@
     "rc-dialog": "^6.5.11",
     "rc-drawer": "^0.4.9",
     "rc-input-number": "^3.6.8",
+    "rc-slider": "^8.6.3",
     "rc-tabs": "^8.0.0",
     "rc-tooltip": "^3.5.0",
     "rc-util": "^4.5.1",
@@ -87,4 +88,4 @@
     "uploadcore": "^2.3.1",
     "uxcore-formatter": "^0.1.6"
   }
-}
+}

src/Slider/Slider.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RcSlider from 'rc-slider/lib/Slider';
+import './Slider'
+import Context from '../Context';
+
+export default class Slider extends React.Component {
+  static defaultProps = {
+    className: 'salt-ui-slider',
+  };
+
+  render() {
+    return (
+      <div className={`${this.props.className}-wrapper`}>
+        <RcSlider
+          className={this.props.className}
+          prefixCls={Context.prefixClass('slider')}
+          {...this.props}
+        />
+      </div>
+    );
+  }
+}
+
+Slider.propTypes = {
+  value: PropTypes.number,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.number,
+  onChange: PropTypes.func,
+  onAfterChange: PropTypes.func,
+  defaultValue: PropTypes.number,
+  tipFormatter: PropTypes.func,
+  disabled: PropTypes.boolean,
+  handle: PropTypes.any,
+  className: PropTypes.string,
+  marks: PropTypes.object,
+  dots: PropTypes.boolean,
+  included: PropTypes.boolean,
+  handleStyle: React.CSSProperties,
+  trackStyle: React.CSSProperties,
+  railStyle: React.CSSProperties,
+}

src/Slider/Slider.styl

@@ -0,0 +1,109 @@
+
+
+$sliderPrefixCls = 't-slider';
+$gray = #ddd;
+
+.{$sliderPrefixCls} {
+  position: relative;
+
+  &-rail {
+    position: absolute;
+    width: 100%;
+    background-color: $gray;
+    height: 2px;
+    box-sizing: border-box;
+  }
+
+  &-track {
+    position: absolute;
+    left: 0;
+    height: 2px;
+    border-radius: 2px;
+    background-color: $brand-primary;
+  }
+
+  &-handle {
+    position: absolute;
+    margin-left: -12px;
+    margin-top: -10px;
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+    border-radius: 50%;
+    border: 2px solid $brand-primary;
+    background-color: #fff;
+    box-sizing: border-box;
+
+    &:focus {
+      background-color: tint($brand-primary, 20%);
+    }
+  }
+
+  &-mark {
+    position: absolute;
+    top: 20px;
+    left: 0;
+    width: 100%;
+    font-size: 12px;
+  }
+
+  &-mark-text {
+    position: absolute;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    color: #000;
+
+    &-active {
+      opacity: .3;
+    }
+  }
+
+  &-step {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: transparent;
+  }
+
+  &-dot {
+    position: absolute;
+    bottom: -5px;
+    margin-left: -4px;
+    width: 12px;
+    height: 12px;
+    border: 2px solid $gray;
+    background-color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    vertical-align: middle;
+
+    &:first-child {
+      margin-left: -4px;
+    }
+
+    &:last-child {
+      margin-left: -4px;
+    }
+
+    &-active {
+      border-color: $brand-primary;
+    }
+  }
+
+  &-disabled {
+    opacity: .3;
+
+    .{$sliderPrefixCls}-track {
+      height: 2px;
+    }
+
+    .{$sliderPrefixCls}-handle,
+    .{$sliderPrefixCls}-mark-text,
+    .{$sliderPrefixCls}-dot {
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+  }
+}

src/Slider/index.js

@@ -0,0 +1 @@
+export default from './Slider';