dropdown-item.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { SuperComponent, wxComponent } from '../common/src/index';
  8. import config from '../common/config';
  9. import props from './props';
  10. import menuProps from '../dropdown-menu/props';
  11. import { getRect } from '../common/utils';
  12. const { prefix } = config;
  13. const name = `${prefix}-dropdown-item`;
  14. let DropdownMenuItem = class DropdownMenuItem extends SuperComponent {
  15. constructor() {
  16. super(...arguments);
  17. this.options = {
  18. multipleSlots: true,
  19. };
  20. this.externalClasses = [
  21. `${prefix}-class`,
  22. `${prefix}-class-content`,
  23. `${prefix}-class-column`,
  24. `${prefix}-class-column-item`,
  25. `${prefix}-class-column-item-label`,
  26. `${prefix}-class-footer`,
  27. ];
  28. this.properties = props;
  29. this.data = {
  30. prefix,
  31. classPrefix: name,
  32. show: false,
  33. top: 0,
  34. maskHeight: 0,
  35. initValue: null,
  36. hasChanged: false,
  37. duration: menuProps.duration.value,
  38. zIndex: menuProps.zIndex.value,
  39. overlay: menuProps.showOverlay.value,
  40. labelAlias: 'label',
  41. valueAlias: 'value',
  42. computedLabel: '',
  43. firstCheckedValue: '',
  44. };
  45. this.relations = {
  46. '../dropdown-menu/dropdown-menu': {
  47. type: 'parent',
  48. linked(target) {
  49. const { zIndex, duration, showOverlay } = target.properties;
  50. this.setData({
  51. zIndex,
  52. duration,
  53. showOverlay,
  54. });
  55. },
  56. },
  57. };
  58. this.controlledProps = [
  59. {
  60. key: 'value',
  61. event: 'change',
  62. },
  63. ];
  64. this.observers = {
  65. keys(obj) {
  66. this.setData({
  67. labelAlias: obj.label || 'label',
  68. valueAlias: obj.value || 'value',
  69. });
  70. },
  71. value(v) {
  72. const { options, labelAlias, valueAlias } = this.data;
  73. if (this.data.multiple) {
  74. if (!Array.isArray(v))
  75. throw TypeError('应传入数组类型的 value');
  76. }
  77. const target = options.find((item) => item[valueAlias] === v);
  78. if (target) {
  79. this.setData({
  80. computedLabel: target[labelAlias],
  81. });
  82. }
  83. },
  84. 'label, computedLabel'() {
  85. var _a;
  86. (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.getAllItems();
  87. },
  88. show(visible) {
  89. if (visible) {
  90. this.getParentBottom(() => {
  91. this.setData({ wrapperVisible: true });
  92. });
  93. }
  94. },
  95. };
  96. this.methods = {
  97. closeDropdown() {
  98. var _a;
  99. (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.setData({
  100. activeIdx: -1,
  101. });
  102. this.setData({
  103. show: false,
  104. });
  105. this.triggerEvent('close');
  106. },
  107. getParentBottom(cb) {
  108. getRect(this.$parent, `#${prefix}-bar`).then((rect) => {
  109. this.setData({
  110. top: rect.bottom,
  111. maskHeight: rect.top,
  112. }, cb);
  113. });
  114. },
  115. handleTreeClick(e) {
  116. const { level, value: itemValue } = e.currentTarget.dataset;
  117. const { value } = this.data;
  118. value[level] = itemValue;
  119. this._trigger('change', { value });
  120. },
  121. handleRadioChange(e) {
  122. const { value } = e.detail;
  123. this._trigger('change', { value });
  124. if (!this.data.multiple) {
  125. this.closeDropdown();
  126. }
  127. else {
  128. const firstChecked = this.data.options.find((item) => value.includes(item.value));
  129. if (firstChecked) {
  130. this.data.firstCheckedValue = firstChecked.value;
  131. }
  132. }
  133. },
  134. handleMaskClick() {
  135. var _a;
  136. if ((_a = this.$parent) === null || _a === void 0 ? void 0 : _a.properties.closeOnClickOverlay) {
  137. this.closeDropdown();
  138. }
  139. },
  140. handleReset() {
  141. this._trigger('change', { value: [] });
  142. this._trigger('reset');
  143. },
  144. handleConfirm() {
  145. this._trigger('confirm', { value: this.data.value });
  146. this.closeDropdown();
  147. this.setData({ firstCheckedValue: this.data.firstCheckedValue });
  148. },
  149. onLeaved() {
  150. this.setData({ wrapperVisible: false });
  151. },
  152. };
  153. }
  154. };
  155. DropdownMenuItem = __decorate([
  156. wxComponent()
  157. ], DropdownMenuItem);
  158. export default DropdownMenuItem;