index.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _utils = require("../utils");
  6. var _event = require("../utils/dom/event");
  7. var _touch = require("../mixins/touch");
  8. var _field = require("../mixins/field");
  9. var _icon = _interopRequireDefault(require("../icon"));
  10. // Utils
  11. // Mixins
  12. // Components
  13. var _createNamespace = (0, _utils.createNamespace)('rate'),
  14. createComponent = _createNamespace[0],
  15. bem = _createNamespace[1];
  16. function getRateStatus(value, index, allowHalf) {
  17. if (value >= index) {
  18. return 'full';
  19. }
  20. if (value + 0.5 >= index && allowHalf) {
  21. return 'half';
  22. }
  23. return 'void';
  24. }
  25. var _default = createComponent({
  26. mixins: [_touch.TouchMixin, _field.FieldMixin],
  27. props: {
  28. size: [Number, String],
  29. color: String,
  30. gutter: [Number, String],
  31. readonly: Boolean,
  32. disabled: Boolean,
  33. allowHalf: Boolean,
  34. voidColor: String,
  35. iconPrefix: String,
  36. disabledColor: String,
  37. value: {
  38. type: Number,
  39. default: 0
  40. },
  41. icon: {
  42. type: String,
  43. default: 'star'
  44. },
  45. voidIcon: {
  46. type: String,
  47. default: 'star-o'
  48. },
  49. count: {
  50. type: [Number, String],
  51. default: 5
  52. },
  53. touchable: {
  54. type: Boolean,
  55. default: true
  56. }
  57. },
  58. computed: {
  59. list: function list() {
  60. var list = [];
  61. for (var i = 1; i <= this.count; i++) {
  62. list.push(getRateStatus(this.value, i, this.allowHalf));
  63. }
  64. return list;
  65. },
  66. sizeWithUnit: function sizeWithUnit() {
  67. return (0, _utils.addUnit)(this.size);
  68. },
  69. gutterWithUnit: function gutterWithUnit() {
  70. return (0, _utils.addUnit)(this.gutter);
  71. }
  72. },
  73. mounted: function mounted() {
  74. this.bindTouchEvent(this.$el);
  75. },
  76. methods: {
  77. select: function select(index) {
  78. if (!this.disabled && !this.readonly && index !== this.value) {
  79. this.$emit('input', index);
  80. this.$emit('change', index);
  81. }
  82. },
  83. onTouchStart: function onTouchStart(event) {
  84. var _this = this;
  85. if (this.readonly || this.disabled || !this.touchable) {
  86. return;
  87. }
  88. this.touchStart(event);
  89. var rects = this.$refs.items.map(function (item) {
  90. return item.getBoundingClientRect();
  91. });
  92. var ranges = [];
  93. rects.forEach(function (rect, index) {
  94. if (_this.allowHalf) {
  95. ranges.push({
  96. score: index + 0.5,
  97. left: rect.left
  98. }, {
  99. score: index + 1,
  100. left: rect.left + rect.width / 2
  101. });
  102. } else {
  103. ranges.push({
  104. score: index + 1,
  105. left: rect.left
  106. });
  107. }
  108. });
  109. this.ranges = ranges;
  110. },
  111. onTouchMove: function onTouchMove(event) {
  112. if (this.readonly || this.disabled || !this.touchable) {
  113. return;
  114. }
  115. this.touchMove(event);
  116. if (this.direction === 'horizontal') {
  117. (0, _event.preventDefault)(event);
  118. var clientX = event.touches[0].clientX;
  119. this.select(this.getScoreByPosition(clientX));
  120. }
  121. },
  122. getScoreByPosition: function getScoreByPosition(x) {
  123. for (var i = this.ranges.length - 1; i > 0; i--) {
  124. if (x > this.ranges[i].left) {
  125. return this.ranges[i].score;
  126. }
  127. }
  128. return this.allowHalf ? 0.5 : 1;
  129. },
  130. genStar: function genStar(status, index) {
  131. var _this2 = this;
  132. var h = this.$createElement;
  133. var icon = this.icon,
  134. color = this.color,
  135. count = this.count,
  136. voidIcon = this.voidIcon,
  137. disabled = this.disabled,
  138. voidColor = this.voidColor,
  139. disabledColor = this.disabledColor;
  140. var score = index + 1;
  141. var isFull = status === 'full';
  142. var isVoid = status === 'void';
  143. var style;
  144. if (this.gutterWithUnit && score !== +count) {
  145. style = {
  146. paddingRight: this.gutterWithUnit
  147. };
  148. }
  149. return h("div", {
  150. "ref": "items",
  151. "refInFor": true,
  152. "key": index,
  153. "attrs": {
  154. "role": "radio",
  155. "tabindex": "0",
  156. "aria-setsize": count,
  157. "aria-posinset": score,
  158. "aria-checked": String(!isVoid)
  159. },
  160. "style": style,
  161. "class": bem('item')
  162. }, [h(_icon.default, {
  163. "attrs": {
  164. "size": this.sizeWithUnit,
  165. "name": isFull ? icon : voidIcon,
  166. "color": disabled ? disabledColor : isFull ? color : voidColor,
  167. "classPrefix": this.iconPrefix,
  168. "data-score": score
  169. },
  170. "class": bem('icon', {
  171. disabled: disabled,
  172. full: isFull
  173. }),
  174. "on": {
  175. "click": function click() {
  176. _this2.select(score);
  177. }
  178. }
  179. }), this.allowHalf && h(_icon.default, {
  180. "attrs": {
  181. "size": this.sizeWithUnit,
  182. "name": isVoid ? voidIcon : icon,
  183. "color": disabled ? disabledColor : isVoid ? voidColor : color,
  184. "classPrefix": this.iconPrefix,
  185. "data-score": score - 0.5
  186. },
  187. "class": bem('icon', ['half', {
  188. disabled: disabled,
  189. full: !isVoid
  190. }]),
  191. "on": {
  192. "click": function click() {
  193. _this2.select(score - 0.5);
  194. }
  195. }
  196. })]);
  197. }
  198. },
  199. render: function render() {
  200. var _this3 = this;
  201. var h = arguments[0];
  202. return h("div", {
  203. "class": bem({
  204. readonly: this.readonly,
  205. disabled: this.disabled
  206. }),
  207. "attrs": {
  208. "tabindex": "0",
  209. "role": "radiogroup"
  210. }
  211. }, [this.list.map(function (status, index) {
  212. return _this3.genStar(status, index);
  213. })]);
  214. }
  215. });
  216. exports.default = _default;