search.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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 { getCharacterLength } from '../common/utils';
  11. const { prefix } = config;
  12. const name = `${prefix}-search`;
  13. let Search = class Search extends SuperComponent {
  14. constructor() {
  15. super(...arguments);
  16. this.externalClasses = [
  17. `${prefix}-class`,
  18. `${prefix}-class-input-container`,
  19. `${prefix}-class-input`,
  20. `${prefix}-class-action`,
  21. `${prefix}-class-left`,
  22. `${prefix}-class-clear`,
  23. ];
  24. this.options = {
  25. multipleSlots: true,
  26. };
  27. this.properties = props;
  28. this.observers = {
  29. resultList(val) {
  30. const { isSelected } = this.data;
  31. if (val.length) {
  32. if (isSelected) {
  33. this.setData({
  34. isShowResultList: false,
  35. isSelected: false,
  36. });
  37. }
  38. else {
  39. this.setData({
  40. isShowResultList: true,
  41. });
  42. }
  43. }
  44. else {
  45. this.setData({
  46. isShowResultList: false,
  47. });
  48. }
  49. },
  50. 'clearTrigger, clearable, disabled, readonly'() {
  51. this.updateClearIconVisible();
  52. },
  53. };
  54. this.data = {
  55. classPrefix: name,
  56. prefix,
  57. isShowResultList: false,
  58. isSelected: false,
  59. showClearIcon: true,
  60. };
  61. }
  62. updateClearIconVisible(value = false) {
  63. const { clearTrigger, disabled, readonly } = this.properties;
  64. if (disabled || readonly) {
  65. this.setData({ showClearIcon: false });
  66. return;
  67. }
  68. this.setData({ showClearIcon: value || String(clearTrigger) === 'always' });
  69. }
  70. onInput(e) {
  71. let { value } = e.detail;
  72. const { maxcharacter } = this.properties;
  73. if (maxcharacter && typeof maxcharacter === 'number' && maxcharacter > 0) {
  74. const { characters } = getCharacterLength('maxcharacter', value, maxcharacter);
  75. value = characters;
  76. }
  77. this.setData({
  78. value,
  79. });
  80. this.triggerEvent('change', { value });
  81. }
  82. onFocus(e) {
  83. const { value } = e.detail;
  84. this.updateClearIconVisible(true);
  85. this.triggerEvent('focus', { value });
  86. }
  87. onBlur(e) {
  88. const { value } = e.detail;
  89. this.updateClearIconVisible();
  90. this.triggerEvent('blur', { value });
  91. }
  92. handleClear() {
  93. this.setData({ value: '' });
  94. this.triggerEvent('clear', { value: '' });
  95. this.triggerEvent('change', { value: '' });
  96. }
  97. onConfirm(e) {
  98. const { value } = e.detail;
  99. this.triggerEvent('submit', { value });
  100. }
  101. onActionClick() {
  102. this.triggerEvent('action-click');
  103. }
  104. onSelectResultItem(e) {
  105. const { index } = e.currentTarget.dataset;
  106. const item = this.properties.resultList[index];
  107. this.setData({
  108. value: item,
  109. isSelected: true,
  110. });
  111. this.triggerEvent('change', { value: item });
  112. this.triggerEvent('selectresult', { index, item });
  113. }
  114. };
  115. Search = __decorate([
  116. wxComponent()
  117. ], Search);
  118. export default Search;