diff --git a/components/rate/Rate.jsx b/components/rate/Rate.jsx deleted file mode 100644 index 949d6301e..000000000 --- a/components/rate/Rate.jsx +++ /dev/null @@ -1,138 +0,0 @@ - -import Star from './Star' -import Icon from '../icon' -import { getOffsetLeft } from './util' -import { cloneVNodes } from '../_util/vnode' -import hasProp from '../_util/props-util' - -export default { - name: 'Rate', - props: { - prefixCls: { - type: String, - default: 'ant-rate', - }, - count: { - type: Number, - default: 5, - }, - value: Number, - defaultValue: { - type: Number, - default: 0, - }, - allowHalf: { - type: Boolean, - default: false, - }, - disabled: { - type: Boolean, - default: false, - }, - character: { - type: String, - default: '★', - }, - }, - data () { - const { value, defaultValue } = this - const reValue = !hasProp(this, 'value') ? defaultValue : value - return { - hoverValue: undefined, - stateValue: reValue, - } - }, - computed: { - classes () { - const { prefixCls, disabled } = this - return { - [`${prefixCls}`]: true, - [`${prefixCls}-disabled`]: disabled, - } - }, - countList () { - return new Array(this.count).fill(1) - }, - hasDefaultSlot () { - return !!this.$slots.default - }, - }, - methods: { - onClick (event, index) { - const value = this.getStarValue(index, event.pageX) - if (!hasProp(this, 'value')) { - this.stateValue = value - } - - this.onMouseLeave() - this.$emit('input', value) - this.$emit('change', value) - }, - onHover (event, index) { - const value = this.getStarValue(index, event.pageX) - this.hoverValue = value - this.$emit('hover-change', value) - }, - getStarDOM (index) { - return this.$refs['stars' + index].$el - }, - getStarValue (index, x) { - const { allowHalf, getStarDOM } = this - let value = index + 1 - if (allowHalf) { - const leftEdge = getOffsetLeft(getStarDOM(0)) - const width = getOffsetLeft(getStarDOM(1)) - leftEdge - if ((x - leftEdge - width * index) < width / 2) { - value -= 0.5 - } - } - return value - }, - onMouseLeave () { - if (this.disabled) return - this.hoverValue = undefined - this.$emit('hover-change') - }, - }, - watch: { - value (val) { - this.stateValue = val - }, - }, - components: { - Star, - Icon, - }, - render (createElement) { - const { - classes, onMouseLeave, onClick, countList, onHover, - disabled, prefixCls, allowHalf, hoverValue, - stateValue, character, hasDefaultSlot, - } = this - return ( - - ) - }, -} - diff --git a/components/rate/Star.jsx b/components/rate/Star.jsx deleted file mode 100644 index cb753674d..000000000 --- a/components/rate/Star.jsx +++ /dev/null @@ -1,51 +0,0 @@ - -import { cloneVNodes } from '../_util/vnode' - -export default { - name: 'Star', - props: { - index: Number, - disabled: Boolean, - prefixCls: String, - allowHalf: Boolean, - value: Number, - }, - computed: { - getClassName () { - const { prefixCls, index, value, allowHalf } = this - const starValue = index + 1 - if (allowHalf && value + 0.5 === starValue) { - return `${prefixCls} ${prefixCls}-half ${prefixCls}-active` - } - return starValue <= value ? `${prefixCls} ${prefixCls}-full` : `${prefixCls} ${prefixCls}-zero` - }, - }, - methods: { - onClick (e) { - if (this.disabled) return - this.$emit('click', e, this.index) - }, - onHover (e) { - if (this.disabled) return - this.$emit('hover', e, this.index) - }, - }, - render (createElement) { - const { getClassName, onClick, onHover, prefixCls } = this - return ( -
  • -
    - {this.$slots.default} -
    -
    - {cloneVNodes(this.$slots.default, true)} -
    -
    • - ) - }, -} - diff --git a/components/rate/demo/basic.md b/components/rate/demo/basic.md new file mode 100644 index 000000000..65d5fe7b2 --- /dev/null +++ b/components/rate/demo/basic.md @@ -0,0 +1,24 @@ + +#### 基本 +最简单的用法。 + + + +#### Basic +The simplest usage. + + +```html + + +``` diff --git a/components/rate/demo/character.md b/components/rate/demo/character.md new file mode 100644 index 000000000..a3202eca7 --- /dev/null +++ b/components/rate/demo/character.md @@ -0,0 +1,24 @@ + +#### 其他字符 +可以将星星替换为其他字符，比如字母，数字，字体图标甚至中文。 + + + +#### Other Character +Replace the default star to other character like alphabet, digit, iconfont or even Chinese word. + + +```html + +``` diff --git a/components/rate/demo/clear.md b/components/rate/demo/clear.md new file mode 100644 index 000000000..a92c8a188 --- /dev/null +++ b/components/rate/demo/clear.md @@ -0,0 +1,20 @@ + +#### 清除 +支持允许或者禁用清除。 + + + +#### Clear star +Support set allow to clear star when click again. + + +```html + +``` diff --git a/components/rate/demo/disabled.md b/components/rate/demo/disabled.md new file mode 100644 index 000000000..f2b1d7af1 --- /dev/null +++ b/components/rate/demo/disabled.md @@ -0,0 +1,15 @@ + +#### 只读 +只读，无法进行鼠标交互。 + + + +#### Read only +Read only, can't use mouse to interact. + + +```html + +``` diff --git a/components/rate/demo/half.md b/components/rate/demo/half.md new file mode 100644 index 000000000..38631bacd --- /dev/null +++ b/components/rate/demo/half.md @@ -0,0 +1,15 @@ + +#### 半星 +支持选中半星。 + + + +#### Half star +Support select half star. + + +```html + +``` diff --git a/components/rate/demo/index.vue b/components/rate/demo/index.vue index bd5b8ee8b..604913722 100644 --- a/components/rate/demo/index.vue +++ b/components/rate/demo/index.vue @@ -1,82 +1,65 @@ - diff --git a/components/rate/demo/text.md b/components/rate/demo/text.md new file mode 100644 index 000000000..c97500985 --- /dev/null +++ b/components/rate/demo/text.md @@ -0,0 +1,27 @@ + +#### 文案展现 +给评分组件加上文案展示。 + + + +#### Show copywriting +Add copywriting in rate components. + + +```html + + +``` diff --git a/components/rate/index.en-US.md b/components/rate/index.en-US.md new file mode 100644 index 000000000..49c800b7f --- /dev/null +++ b/components/rate/index.en-US.md @@ -0,0 +1,29 @@ +## API + +| Property | Description | type | Default | +| -------- | ----------- | ---- | ------- | +| allowClear | whether to allow clear when click again | boolean | true | +| allowHalf | whether to allow semi selection | boolean | false | +| autoFocus | get focus when component mounted | boolean | false | +| character | custom character of rate | String or slot="character" | `` | +| count | star count | number | 5 | +| defaultValue | default value | number | 0 | +| disabled | read only, unable to interact | boolean | false | +| value(v-model) | current value | number | - | + + +### events +| Events Name | Description | Arguments | +| --- | --- | --- | +| blur | callback when component lose focus | Function() | - | +| change | callback when select value | Function(value: number) | - | +| focus | callback when component get focus | Function() | - | +| hoverChange | callback when hover item | Function(value: number) | - | +| keydown | callback when keydown on component | Function(event) | - | + +## Methods + +| Name | Description | +| ---- | ----------- | +| blur() | remove focus | +| focus() | get focus | diff --git a/components/rate/index.js b/components/rate/index.js deleted file mode 100644 index e5c9b49a5..000000000 --- a/components/rate/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Rate from './Rate' - -export default Rate diff --git a/components/rate/index.jsx b/components/rate/index.jsx new file mode 100644 index 000000000..24f28aa5b --- /dev/null +++ b/components/rate/index.jsx @@ -0,0 +1,61 @@ + +import PropTypes from '../_util/vue-types' +import { initDefaultProps, getOptionProps } from '../_util/props-util' +import VcRate from '../vc-rate' +import Icon from '../icon' + +export const RateProps = { + prefixCls: PropTypes.string, + count: PropTypes.number, + value: PropTypes.value, + defaultValue: PropTypes.value, + allowHalf: PropTypes.bool, + allowClear: PropTypes.bool, + disabled: PropTypes.bool, + hoverChange: PropTypes.func, + character: PropTypes.any, +} + +export default { + name: 'Rate', + model: { + prop: 'value', + event: 'change', + }, + props: initDefaultProps(RateProps, { + prefixCls: 'ant-rate', + }), + methods: { + focus () { + this.$refs.refRate.focus() + }, + blur () { + this.$refs.refRate.blur() + }, + }, + render () { + const { character, ...restProps } = getOptionProps(this) + const slotCharacter = this.$slots.character + const rateProps = { + props: { + character, + ...restProps, + }, + on: this.$listeners, + ref: 'refRate', + } + const slotCharacterHtml = slotCharacter !== undefined ? ( + + ) : + return ( + + { + character === undefined ? slotCharacterHtml : null + } + + ) + }, +} + diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md new file mode 100644 index 000000000..8d9ee6f20 --- /dev/null +++ b/components/rate/index.zh-CN.md @@ -0,0 +1,28 @@ +## API + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| allowClear | 是否允许再次点击后清除 | boolean | true | +| allowHalf | 是否允许半选 | boolean | false | +| autoFocus | 自动获取焦点 | boolean | false | +| character | 自定义字符 | String or slot="character" | `` | +| count | star 总数 | number | 5 | +| defaultValue | 默认值 | number | 0 | +| disabled | 只读，无法进行交互 | boolean | false | +| value(v-model) | 当前数，受控值 | number | - | + +### 事件 +| 事件名称 | 说明 | 回调参数 | +| --- | --- | --- | +| blur | 失去焦点时的回调 | Function() | - | +| change | 选择时的回调 | Function(value: number) | - | +| focus | 获取焦点时的回调 | Function() | - | +| hoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | - | +| keydown | 按键回调 | Function(event) | - | + +## 方法 + +| 名称 | 描述 | +| --- | --- | +| blur() | 移除焦点 | +| focus() | 获取焦点 | diff --git a/components/rate/util.js b/components/rate/util.js deleted file mode 100644 index dac92774b..000000000 --- a/components/rate/util.js +++ /dev/null @@ -1,39 +0,0 @@ -function getScroll (w, top) { - let ret = top ? w.pageYOffset : w.pageXOffset - const method = top ? 'scrollTop' : 'scrollLeft' - if (typeof ret !== 'number') { - const d = w.document - // ie6,7,8 standard mode - ret = d.documentElement[method] - if (typeof ret !== 'number') { - // quirks mode - ret = d.body[method] - } - } - return ret -} - -function getClientPosition (elem) { - let x - let y - const doc = elem.ownerDocument - const body = doc.body - const docElem = doc && doc.documentElement - const box = elem.getBoundingClientRect() - x = box.left - y = box.top - x -= docElem.clientLeft || body.clientLeft || 0 - y -= docElem.clientTop || body.clientTop || 0 - return { - left: x, - top: y, - } -} - -export function getOffsetLeft (el) { - const pos = getClientPosition(el) - const doc = el.ownerDocument - const w = doc.defaultView || doc.parentWindow - pos.left += getScroll(w) - return pos.left -} diff --git a/components/vc-rate/demo/simple.jsx b/components/vc-rate/demo/simple.jsx index 2833d3872..45f7c5d96 100644 --- a/components/vc-rate/demo/simple.jsx +++ b/components/vc-rate/demo/simple.jsx @@ -16,9 +16,6 @@ export default { }, render () { const { onChange, onFocus } = this - const scopedSlots = ( - - ) const rateProps = { props: { defaultValue: 2.5, @@ -30,9 +27,6 @@ export default { style: { fontSize: '50px', marginTop: '24px', }, - scopedSlots: { - character: scopedSlots, - }, } const rateProps1 = { props: { @@ -44,9 +38,6 @@ export default { style: { fontSize: '50px', marginTop: '24px', }, - scopedSlots: { - character: scopedSlots, - }, } return (
    @@ -72,11 +63,13 @@ export default { +
    +
    ) diff --git a/components/vc-rate/src/Rate.jsx b/components/vc-rate/src/Rate.jsx index 438e33d0c..2efcdeb50 100644 --- a/components/vc-rate/src/Rate.jsx +++ b/components/vc-rate/src/Rate.jsx @@ -19,6 +19,8 @@ const rateProps = { autoFocus: PropTypes.bool, } +function noop () {} + export default { name: 'Rate', mixins: [BaseMixin], @@ -31,7 +33,7 @@ export default { tabIndex: 0, character: '★', }), - modal: { + model: { prop: 'value', event: 'change', }, @@ -173,7 +175,7 @@ export default { const { sValue, hoverValue, focused } = this const stars = [] const disabledClass = disabled ? `${prefixCls}-disabled` : '' - const slotCharacter = this.$scopedSlots.character + const slotCharacter = this.$slots.character for (let index = 0; index < count; index++) { const starProps = { props: { @@ -191,22 +193,25 @@ export default { }, key: index, ref: `stars${index}`, - scopedSlots: this.$scopedSlots, } stars.push( + > + { + slotCharacter !== undefined ? () : null + } + ) } return (
      {stars} diff --git a/components/vc-rate/src/Star.jsx b/components/vc-rate/src/Star.jsx index eb169a182..7615ac7f8 100644 --- a/components/vc-rate/src/Star.jsx +++ b/components/vc-rate/src/Star.jsx @@ -1,5 +1,7 @@ import PropTypes from '../../_util/vue-types' +function noop () {} + export default { name: 'Star', props: { @@ -44,13 +46,13 @@ export default { const { onHover, onClick, disabled, prefixCls } = this let character = this.character if (character === undefined) { - character = this.$scopedSlots.character + character = this.$slots.character } return (
    • {character}
      {character}
      diff --git a/examples/routes.js b/examples/routes.js index cd3383169..06f25e3db 100644 --- a/examples/routes.js +++ b/examples/routes.js @@ -3,7 +3,7 @@ const AsyncComp = () => { const hashs = window.location.hash.split('/') const d = hashs[hashs.length - 1] return { - component: import(`../components/vc-rate/demo/${d}`), + component: import(`../components/rate/demo/${d}`), } } export default [