dingtalk-design-miniapp/px/search-bar/index.js

DingTalk Design Miniapp 提供统一钉钉风格小程序组件

"use strict";

Component({
  data: {
    $uiName: 'search-bar',
    $cssName: 'dtm-search-bar',
    value: '',
    focus: false
  },
  props: {
    className: '',
    style: '',
    value: '',
    name: '',
    placeholder: '',
    maxlength: 140,
    focus: false,
    cancelText: '',
    onCancelTextTap: null,
    onInput: null,
    onConfirm: null,
    onFocus: null,
    onBlur: null,
    onTap: null,
    onClear: null,
    controlled: true
  },
  didMount: function didMount() {
    this.setData({
      value: this.props.value,
      focus: this.props.focus
    });
  },
  didUpdate: function didUpdate(prevProps) {
    var _this$props = this.props,
      focus = _this$props.focus,
      value = _this$props.value;
    var changeData = {};
    var hasChaged = false;
    if (value !== prevProps.value) {
      changeData.value = value;
      hasChaged = true;
    }
    if (focus !== prevProps.focus) {
      changeData.focus = focus;
      hasChaged = true;
    }
    if (hasChaged) {
      this.setData(changeData);
    }
  },
  methods: {
    onCancelTextTap: function onCancelTextTap() {
      var onCancelTextTap = this.props.onCancelTextTap;
      dd.hideKeyboard();
      if (onCancelTextTap) {
        onCancelTextTap();
      }
    },
    onItemInput: function onItemInput(e) {
      var _this$props2 = this.props,
        onDmInput = _this$props2.onDmInput,
        onInput = _this$props2.onInput;
      if (onInput) {
        onInput(e.detail.value);
      } else if (onDmInput) {
        onDmInput({
          value: e.detail.value
        });
      }
      this.setData({
        value: e.detail.value
      });
    },
    onDmClearHook: function onDmClearHook() {
      var _this$props3 = this.props,
        onDmClear = _this$props3.onDmClear,
        onClear = _this$props3.onClear,
        disabled = _this$props3.disabled;
      if (disabled) {
        return;
      }
      this.setData({
        value: '',
        focus: true
      }, function () {
        if (onClear) {
          onClear();
        } else if (onDmClear) {
          onDmClear({
            type: 'clear'
          });
        }
      });
    },
    onItemConfirm: function onItemConfirm(e) {
      var _this$props4 = this.props,
        onSubmit = _this$props4.onSubmit,
        onConfirm = _this$props4.onConfirm,
        onDmSubmit = _this$props4.onDmSubmit,
        onDmConfirm = _this$props4.onDmConfirm;
      dd.hideKeyboard();
      if (onSubmit) {
        onSubmit(e);
        return;
      } else if (onDmSubmit) {
        onDmSubmit(e, this);
        return;
      }
      if (onConfirm) {
        onConfirm(e);
      } else if (onDmConfirm) {
        onDmConfirm(e, this);
      }
    },
    onItemFocus: function onItemFocus(e) {
      var _this$props5 = this.props,
        onDmFocus = _this$props5.onDmFocus,
        onFocus = _this$props5.onFocus;
      this.setData({
        focus: true
      });
      if (onFocus) {
        onFocus(e);
      } else if (onDmFocus) {
        onDmFocus(e, this);
      }
    },
    onItemBlur: function onItemBlur(e) {
      var _this$props6 = this.props,
        onDmBlur = _this$props6.onDmBlur,
        onBlur = _this$props6.onBlur;
      this.setData({
        focus: false
      });
      if (onBlur) {
        onBlur(e);
      } else if (onDmBlur) {
        onDmBlur(e, this);
      }
    },
    onItemTap: function onItemTap(e) {
      var _this$props7 = this.props,
        onDmTap = _this$props7.onDmTap,
        onTap = _this$props7.onTap;
      if (onTap) {
        onTap(e);
      } else if (onDmTap) {
        onDmTap(e, this);
      }
    }
  }
});