Merge branch 'master' of https://github.com/vueComponent/ant-design

7 years ago · 507576b2f4
8 changed files with 562 additions and 12 deletions
--- a/components/vc-slider/demo/handle.jsx
+++ b/components/vc-slider/demo/handle.jsx
@ -19,7 +19,7 @@ export default {
  },
  render () {
    const handle = (h, props) => {
-      const { value, dragging, index, refStr, ...restProps } = props
+      const { value, dragging, index, refStr, style, ...restProps } = props
      const handleProps = {
        props: {
          ...restProps,
@ -29,6 +29,7 @@ export default {
          refStr,
        },
        key: index,
+        style,
      }
      return (
        <Tooltip
@ -44,9 +45,8 @@ export default {
      )
    }

-    const handleRange = (h, { value, dragging, index, disabled, ...restProps }) => {
+    const handleRange = (h, { value, dragging, index, disabled, style, ...restProps }) => {
      const tipFormatter = value => `${value}%`
-      const handleStyle = [{}]
      const tipProps = {}

      const {
@ -57,10 +57,10 @@ export default {
        ...restTooltipProps } = tipProps

      let handleStyleWithIndex
-      if (Array.isArray(handleStyle)) {
-        handleStyleWithIndex = handleStyle[index] || handleStyle[0]
+      if (Array.isArray(style)) {
+        handleStyleWithIndex = style[index] || style[0]
      } else {
-        handleStyleWithIndex = handleStyle
+        handleStyleWithIndex = style
      }

      const tooltipProps = {
--- a/components/vc-slider/demo/marks.jsx
+++ b/components/vc-slider/demo/marks.jsx
@ -0,0 +1,56 @@
+import Slider from '../index'
+import '../assets/index.less'
+
+export default {
+  render () {
+    const style = { width: '400px', margin: '50px' }
+    const pStyle = { margin: '20px 0' }
+    const marks = {
+      '-10': '-10°C',
+      0: <strong>0°C</strong>,
+      26: '26°C',
+      37: '37°C',
+      50: '50°C',
+      100: {
+        style: {
+          color: 'red',
+        },
+        label: <strong>100°C</strong>,
+      },
+    }
+
+    function log (value) {
+      console.log(value); //eslint-disable-line
+    }
+    return (
+      <div>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks, `step=null`</p>
+          <Slider min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks and steps</p>
+          <Slider dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
+        </div>
+
+        <div style={style}>
+          <p style={pStyle}>Slider with marks, `included=false`</p>
+          <Slider min={-10} marks={marks} included={false} defaultValue={20} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks and steps, `included=false`</p>
+          <Slider min={-10} marks={marks} step={10} included={false} defaultValue={20} />
+        </div>
+
+        <div style={style}>
+          <p style={pStyle}>Range with marks</p>
+          <Slider.Range min={-10} marks={marks} onChange={log} defaultValue={[20, 25, 30, 40]} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Range with marks and steps</p>
+          <Slider.Range min={-10} marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
+        </div>
+      </div>
+    )
+  },
+}
--- a/components/vc-slider/demo/range.jsx
+++ b/components/vc-slider/demo/range.jsx
@ -0,0 +1,209 @@
+import Slider from '../index'
+import '../assets/index.less'
+const { Range } = Slider
+function log (value) {
+  console.log(value); //eslint-disable-line
+}
+
+const CustomizedRange = {
+  data () {
+    return {
+      lowerBound: 20,
+      upperBound: 40,
+      value: [20, 40],
+    }
+  },
+  methods: {
+    onLowerBoundChange (e) {
+      this.lowerBound = +e.target.value
+    },
+    onUpperBoundChange (e) {
+      this.upperBound = +e.target.value
+    },
+    onSliderChange (value) {
+      log(value)
+      this.value = value
+    },
+    handleApply () {
+      this.value = [this.lowerBound, this.upperBound]
+    },
+  },
+  render () {
+    return (
+      <div>
+        <label>LowerBound: </label>
+        <input type='number' value={this.lowerBound} onChange={this.onLowerBoundChange} />
+        <br />
+        <label>UpperBound: </label>
+        <input type='number' value={this.upperBound} onChange={this.onUpperBoundChange} />
+        <br />
+        <button onClick={this.handleApply}>Apply</button>
+        <br /><br />
+        <Range allowCross={false} value={this.value} onChange={this.onSliderChange} />
+      </div>
+    )
+  },
+}
+
+const DynamicBounds = {
+  data () {
+    return {
+      min: 0,
+      max: 100,
+    }
+  },
+  methods: {
+    onSliderChange (value) {
+      log(value)
+    },
+    onMinChange (e) {
+      this.min = +e.target.value || 0
+    },
+    onMaxChange (e) {
+      this.max = +e.target.value || 100
+    },
+  },
+  render () {
+    return (
+      <div>
+        <label>Min: </label>
+        <input type='number' value={this.min} onInput={this.onMinChange} />
+        <br />
+        <label>Max: </label>
+        <input type='number' value={this.max} onInput={this.onMaxChange} />
+        <br /><br />
+        <Range defaultValue={[20, 50]} min={this.min} max={this.max}
+          onChange={this.onSliderChange}
+        />
+      </div>
+    )
+  },
+}
+
+const ControlledRange = {
+  data () {
+    return {
+      value: [20, 40, 60, 80],
+    }
+  },
+  methods: {
+    handleChange (value) {
+      this.value = value
+    },
+  },
+  render () {
+    return <Range value={this.value} onChange={this.handleChange} />
+  },
+}
+
+const ControlledRangeDisableAcross = {
+  props: {
+    pushable: [Number, Boolean],
+  },
+  data () {
+    return {
+      value: [20, 40, 60, 80],
+    }
+  },
+  methods: {
+    handleChange (value) {
+      this.value = value
+    },
+  },
+  render () {
+    const rangeRange = {
+      props: {
+        value: this.value,
+        allowCross: false,
+        ...this.$props,
+      },
+      on: {
+        change: this.handleChange,
+      },
+    }
+    return <Range
+      {...rangeRange}
+    />
+  },
+}
+
+const PureRenderRange = {
+  data () {
+    return {
+      foo: false,
+    }
+  },
+  methods: {
+    handleChange (value) {
+      console.log(value)
+      this.foo = !this.foo
+    },
+  },
+  render () {
+    return <Range defaultValue={[20, 40, 60, 80]} onChange={this.handleChange} allowCross={false} />
+  },
+}
+
+export default {
+  render () {
+    const style = { width: '400px', margin: '50px' }
+    const pStyle = { margin: '20px 0' }
+
+    return (
+      <div>
+        <div style={style}>
+          <p style={pStyle}>Basic Range，`allowCross=false`</p>
+          <Range allowCross={false} defaultValue={[0, 20]} onChange={log} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Basic Range，`step=20` </p>
+          <Range step={20} defaultValue={[20, 20]} onBeforeChange={log} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Basic Range，`step=20, dots` </p>
+          <Range dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Basic Range，disabled</p>
+          <Range allowCross={false} defaultValue={[0, 20]} onChange={log} disabled />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Controlled Range</p>
+          <ControlledRange />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Controlled Range, not allow across</p>
+          <ControlledRangeDisableAcross />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Controlled Range, not allow across, pushable=5</p>
+          <ControlledRangeDisableAcross pushable={5} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Multi Range</p>
+          <Range count={3} defaultValue={[20, 40, 60, 80]} pushable />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Multi Range with custom track and handle style</p>
+          <Range count={3} defaultValue={[20, 40, 60, 80]} pushable
+            trackStyle={[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]}
+            handleStyle={[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]}
+            railStyle={{ backgroundColor: 'black' }}
+          />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Customized Range</p>
+          <CustomizedRange />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Range with dynamic `max` `min`</p>
+          <DynamicBounds />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Range as child component</p>
+          <PureRenderRange />
+        </div>
+      </div>
+    )
+  },
+}
--- a/components/vc-slider/demo/slider.jsx
+++ b/components/vc-slider/demo/slider.jsx
@ -0,0 +1,223 @@
+import Slider from '../index'
+import Tooltip from '../../vc-tooltip'
+import '../assets/index.less'
+import '../../vc-tooltip/assets/bootstrap.less'
+
+const { Handle } = Slider
+
+function log (value) {
+  console.log(value); //eslint-disable-line
+}
+
+const CustomizedSlider = {
+  data () {
+    return {
+      value: 50,
+    }
+  },
+  methods: {
+    onSliderChange (value) {
+      log(value)
+      this.value = value
+    },
+    onAfterChange (value) {
+      log(value)
+    },
+  },
+  render () {
+    return <Slider value={this.value}
+      onChange={this.onSliderChange} onAfterChange={this.onAfterChange}
+    />
+  },
+}
+
+const DynamicBounds = {
+  data () {
+    return {
+      min: 0,
+      max: 100,
+    }
+  },
+  methods: {
+    onSliderChange (value) {
+      log(value)
+      this.value = value
+    },
+    onAfterChange (value) {
+      log(value)
+    },
+    onMinChange (e) {
+      this.min = +e.target.value || 0
+    },
+    onMaxChange (e) {
+      this.max = +e.target.value || 100
+    },
+  },
+  render () {
+    return (
+      <div>
+        <label>Min: </label>
+        <input type='number' value={this.min} onInput={this.onMinChange} />
+        <br />
+        <label>Max: </label>
+        <input type='number' value={this.max} onInput={this.onMaxChange} />
+        <br /><br />
+        <Slider defaultValue={50} min={this.min} max={this.max}
+          onChange={this.onSliderChange}
+        />
+      </div>
+    )
+  },
+}
+
+const SliderWithTooltip = {
+  data () {
+    return {
+      visibles: [],
+    }
+  },
+  methods: {
+    handleTooltipVisibleChange (index, visible) {
+      this.visibles[index] = visible
+      this.visibles = { ...this.visibles }
+    },
+    handleRange (h, { value, dragging, index, disabled, style, ...restProps }) {
+      const tipFormatter = value => `${value}%`
+      const tipProps = { overlayClassName: 'foo' }
+
+      const {
+        prefixCls = 'rc-slider-tooltip',
+        overlay = tipFormatter(value),
+        placement = 'top',
+        visible = visible || false,
+        ...restTooltipProps } = tipProps
+
+      let handleStyleWithIndex
+      if (Array.isArray(style)) {
+        handleStyleWithIndex = style[index] || style[0]
+      } else {
+        handleStyleWithIndex = style
+      }
+
+      const tooltipProps = {
+        props: {
+          prefixCls,
+          overlay,
+          placement,
+          visible: (!disabled && (this.visibles[index] || dragging)) || visible,
+          ...restTooltipProps,
+        },
+        key: index,
+      }
+      const handleProps = {
+        props: {
+          value,
+          ...restProps,
+        },
+        on: {
+          mouseenter: () => this.handleTooltipVisibleChange(index, true),
+          mouseleave: () => this.handleTooltipVisibleChange(index, false),
+          change: log,
+        },
+        style: {
+          ...handleStyleWithIndex,
+        },
+      }
+
+      return (
+        <Tooltip
+          {...tooltipProps}
+        >
+
+          <Handle
+            {...handleProps}
+          />
+        </Tooltip>
+      )
+    },
+  },
+  render () {
+    return <Slider handle={this.handleRange} />
+  },
+}
+
+export default {
+  render () {
+    const style = { width: '400px', margin: '50px' }
+    const pStyle = { margin: '20px 0' }
+
+    return (
+      <div>
+        <div style={style}>
+          <p style={pStyle}>Basic Slider</p>
+          <Slider onChange={log} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Basic Slider，`step=20`</p>
+          <Slider step={20} defaultValue={50} onBeforeChange={log} />
+        </div>
+
+        <div style={style}>
+          <p style={pStyle}>Basic Slider，`step=20, dots`</p>
+          <Slider dots step={20} defaultValue={100} onAfterChange={log} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Basic Slider，`step=20, dots, dotStyle={"{borderColor: 'orange'}"}, activeDotStyle={"{borderColor: 'yellow'}"}`</p>
+          <Slider dots step={20} defaultValue={100} onAfterChange={log} dotStyle={{ borderColor: 'orange' }} activeDotStyle={{ borderColor: 'yellow' }} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with tooltip, with custom `tipFormatter`</p>
+          <SliderWithTooltip />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with custom handle and track style.<strong>(old api, will be deprecated)</strong></p>
+          <Slider
+            defaultValue={30}
+            maximumTrackStyle={{ backgroundColor: 'red', height: '10px' }}
+            minimumTrackStyle={{ backgroundColor: 'blue', height: '10px' }}
+            handleStyle={{
+              borderColor: 'blue',
+              height: '28px',
+              width: '28px',
+              marginLeft: '-14px',
+              marginTop: '-9px',
+              backgroundColor: 'black',
+            }}
+          />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with custom handle and track style.<strong>(The recommended new api)</strong></p>
+          <Slider
+            defaultValue={30}
+            trackStyle={{ backgroundColor: 'blue', height: '10px' }}
+            handleStyle={{
+              borderColor: 'blue',
+              height: '28px',
+              width: '28px',
+              marginLeft: '-14px',
+              marginTop: '-9px',
+              backgroundColor: 'black',
+            }}
+            railStyle={{ backgroundColor: 'red', height: '10px' }}
+          />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Basic Slider, disabled</p>
+          <Slider onChange={log} disabled />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Controlled Slider</p>
+          <Slider value={50} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Customized Slider</p>
+          <CustomizedSlider />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with dynamic `min` `max`</p>
+          <DynamicBounds />
+        </div>
+      </div>
+    )
+  },
+}
--- a/components/vc-slider/demo/vertical.jsx
+++ b/components/vc-slider/demo/vertical.jsx
@ -0,0 +1,57 @@
+import Slider from '../index'
+import '../assets/index.less'
+
+export default {
+  render () {
+    const style = { float: 'left', width: '160px', height: '400px', marginBottom: '160px', marginLeft: '50px' }
+    const parentStyle = { overflow: 'hidden' }
+    const pStyle = { margin: '20px 0' }
+    const marks = {
+      '-10': '-10°C',
+      0: <strong>0°C</strong>,
+      26: '26°C',
+      37: '37°C',
+      50: '50°C',
+      100: {
+        style: {
+          color: 'red',
+        },
+        label: <strong>100°C</strong>,
+      },
+    }
+
+    function log (value) {
+      console.log(value); //eslint-disable-line
+    }
+    return (
+      <div style={parentStyle}>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks, `step=null`</p>
+          <Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks and steps</p>
+          <Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
+        </div>
+
+        <div style={style}>
+          <p style={pStyle}>Slider with marks, `included=false`</p>
+          <Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Slider with marks and steps, `included=false`</p>
+          <Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />
+        </div>
+
+        <div style={style}>
+          <p style={pStyle}>Range with marks</p>
+          <Slider.Range vertical min={-10} marks={marks} onChange={log} defaultValue={[20, 25, 30, 40]} />
+        </div>
+        <div style={style}>
+          <p style={pStyle}>Range with marks and steps</p>
+          <Slider.Range vertical min={-10} marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
+        </div>
+      </div>
+    )
+  },
+}
--- a/components/vc-slider/src/Handle.jsx
+++ b/components/vc-slider/src/Handle.jsx
@ -102,7 +102,6 @@ export default {
        refStr,
        ...ariaProps,
      },
-      style: elStyle,
      class: className,
      on: {
        blur: this.onBlur,
@ -115,6 +114,7 @@ export default {
    return (
      <div
        {...handleProps}
+        style={elStyle}
      />
    )
  },
--- a/components/vc-slider/src/Range.jsx
+++ b/components/vc-slider/src/Range.jsx
@ -86,8 +86,8 @@ const Range = {
      const isNotControlled = !hasProp(this, 'value')
      if (isNotControlled) {
        this.setState(state)
-      } else if (state.handle !== undefined) {
-        this.setState({ sHandle: state.handle })
+      } else if (state.sHandle !== undefined) {
+        this.setState({ sHandle: state.sHandle })
      }

      const data = { ...this.$data, ...state }
@ -110,10 +110,9 @@ const Range = {

      const prevValue = bounds[this.prevMovedHandleIndex]
      if (value === prevValue) return
-
      const nextBounds = [...bounds]
      nextBounds[this.prevMovedHandleIndex] = value
-      this.$emit('change', { bounds: nextBounds })
+      this.onChange({ bounds: nextBounds })
    },
    onEnd () {
      this.setState({ sHandle: null })
--- a/components/vc-slider/src/common/createSlider.jsx
+++ b/components/vc-slider/src/common/createSlider.jsx
@ -43,7 +43,7 @@ export default function createSlider (Component) {
      max: 100,
      step: 1,
      marks: {},
-      handle (h, { index, refStr, className, ...restProps }) {
+      handle (h, { index, refStr, className, style, ...restProps }) {
        delete restProps.dragging
        const handleProps = {
          props: {
@ -53,6 +53,7 @@ export default function createSlider (Component) {
            refStr,
          },
          class: className,
+          style,
          key: index,
        }
        return <Handle {...handleProps} />
@ -67,6 +68,10 @@ export default function createSlider (Component) {
      dotStyle: {},
      activeDotStyle: {},
    }),
+    model: {
+      prop: 'value',
+      event: 'change',
+    },
    data () {
      if (process.env.NODE_ENV !== 'production') {
        const { step, max, min } = this
@ -147,6 +152,7 @@ export default function createSlider (Component) {
        }
      },
      onBlur (e) {
+        console.dir(e)
        this.onEnd(e)
        this.$emit('blur', e)
      },