action-sheet.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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 { chunk } from '../common/utils';
  8. import { SuperComponent, wxComponent } from '../common/src/index';
  9. import config from '../common/config';
  10. import { ActionSheetTheme, show } from './show';
  11. import props from './props';
  12. import useCustomNavbar from '../mixins/using-custom-navbar';
  13. const { prefix } = config;
  14. const name = `${prefix}-action-sheet`;
  15. let ActionSheet = class ActionSheet extends SuperComponent {
  16. constructor() {
  17. super(...arguments);
  18. this.behaviors = [useCustomNavbar];
  19. this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
  20. this.properties = Object.assign({}, props);
  21. this.data = {
  22. prefix,
  23. classPrefix: name,
  24. gridThemeItems: [],
  25. currentSwiperIndex: 0,
  26. defaultPopUpProps: {},
  27. defaultPopUpzIndex: 11500,
  28. };
  29. this.controlledProps = [
  30. {
  31. key: 'visible',
  32. event: 'visible-change',
  33. },
  34. ];
  35. this.observers = {
  36. 'visible, items'(visible) {
  37. if (!visible)
  38. return;
  39. this.init();
  40. },
  41. };
  42. this.methods = {
  43. init() {
  44. this.memoInitialData();
  45. this.splitGridThemeActions();
  46. },
  47. memoInitialData() {
  48. this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
  49. },
  50. splitGridThemeActions() {
  51. if (this.data.theme !== ActionSheetTheme.Grid)
  52. return;
  53. this.setData({
  54. gridThemeItems: chunk(this.data.items, this.data.count),
  55. });
  56. },
  57. show(options) {
  58. this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true }));
  59. this.splitGridThemeActions();
  60. this.autoClose = true;
  61. this._trigger('visible-change', { visible: true });
  62. },
  63. close() {
  64. this.triggerEvent('close', { trigger: 'command' });
  65. this._trigger('visible-change', { visible: false });
  66. },
  67. onPopupVisibleChange({ detail }) {
  68. if (!detail.visible) {
  69. this.triggerEvent('close', { trigger: 'overlay' });
  70. this._trigger('visible-change', { visible: false });
  71. }
  72. if (this.autoClose) {
  73. this.setData({ visible: false });
  74. this.autoClose = false;
  75. }
  76. },
  77. onSwiperChange(e) {
  78. const { current } = e.detail;
  79. this.setData({
  80. currentSwiperIndex: current,
  81. });
  82. },
  83. onSelect(event) {
  84. const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data;
  85. const { index } = event.currentTarget.dataset;
  86. const isSwiperMode = theme === ActionSheetTheme.Grid;
  87. const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index];
  88. const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index;
  89. if (item) {
  90. this.triggerEvent('selected', { selected: item, index: realIndex });
  91. if (!item.disabled) {
  92. this.triggerEvent('close', { trigger: 'select' });
  93. this._trigger('visible-change', { visible: false });
  94. }
  95. }
  96. },
  97. onCancel() {
  98. this.triggerEvent('cancel');
  99. if (this.autoClose) {
  100. this.setData({ visible: false });
  101. this.autoClose = false;
  102. }
  103. },
  104. };
  105. }
  106. };
  107. ActionSheet.show = show;
  108. ActionSheet = __decorate([
  109. wxComponent()
  110. ], ActionSheet);
  111. export default ActionSheet;