taro-ui-vue3/lib/search-bar/index.js

Taro UI Rewritten in Vue 3.0

import {h, defineComponent, reactive, computed, mergeProps, ref} from "vue";
import {Input, Text, View} from "@tarojs/components";
import {isTest, uuid} from "../utils/common";
import {useModelValue} from "../composables/model";
const AtSearchBar = defineComponent({
  name: "AtSearchBar",
  props: {
    value: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "\u641C\u7D22"
    },
    maxLength: {
      type: Number,
      default: 140
    },
    fixed: {
      type: Boolean,
      default: false
    },
    focus: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showActionButton: {
      type: Boolean,
      default: false
    },
    actionName: {
      type: String,
      default: "\u641C\u7D22"
    },
    inputType: {
      type: String,
      default: "text"
    },
    onChange: Function,
    onFocus: Function,
    onBlur: Function,
    onConfirm: Function,
    onActionClick: Function,
    onClear: Function
  },
  setup(props, {attrs, emit}) {
    const state = reactive({
      isFocus: !!props.focus
    });
    const inputID = ref(isTest() ? "weui-input_2020" : "weui-input_" + uuid());
    const inputValue = useModelValue(props, emit, "value");
    const fontSize = 14;
    const rootClasses = computed(() => ({
      "at-search-bar": true,
      "at-search-bar--fixed": props.fixed
    }));
    const placeholderWrapStyle = computed(() => {
      const placeholderWrapStyle2 = {};
      if (state.isFocus || !state.isFocus && props.value) {
        placeholderWrapStyle2.flexGrow = 0;
      } else if (!state.isFocus && !inputValue.value) {
        placeholderWrapStyle2.flexGrow = 1;
      }
      return placeholderWrapStyle2;
    });
    const actionStyle = computed(() => {
      const actionStyle2 = {};
      if (state.isFocus || !state.isFocus && inputValue.value) {
        actionStyle2.opacity = 1;
        actionStyle2.marginRight = `0`;
      } else if (!state.isFocus && !inputValue.value) {
        actionStyle2.opacity = 0;
        actionStyle2.marginRight = `-${(props.actionName.length + 1) * fontSize + fontSize / 2 + 10}px`;
      }
      if (props.showActionButton) {
        actionStyle2.opacity = 1;
        actionStyle2.marginRight = `0`;
      }
      return actionStyle2;
    });
    const clearIconStyle = computed(() => ({
      display: !inputValue.value.length ? "none" : "flex"
    }));
    const placeholderStyle = computed(() => ({
      visibility: !inputValue.value.length ? "visible" : "hidden"
    }));
    function handleFocus(event) {
      var _a;
      if (process.env.TARO_ENV === "h5") {
        inputID.value = "weui-input" + uuid(10, 32);
      }
      state.isFocus = true;
      (_a = props.onFocus) == null ? void 0 : _a.call(props, event.detail.value, event);
    }
    function handleBlur(event) {
      var _a;
      state.isFocus = false;
      (_a = props.onBlur) == null ? void 0 : _a.call(props, event.detail.value, event);
    }
    function handleChange(e) {
      var _a;
      if (attrs["onUpdate:value"]) {
        inputValue.value = e.detail.value;
      } else {
        (_a = props.onChange) == null ? void 0 : _a.call(props, e.detail.value, e);
      }
      if (process.env.TARO_ENV === "h5" && e.detail.value === "") {
        clearInputNodeValue();
      }
    }
    function clearInputNodeValue() {
      const inputNode = document.querySelector(`#${inputID.value} > .weui-input`);
      inputNode.value = "";
    }
    function handleClear(event) {
      var _a;
      if (typeof props.onClear === "function") {
        props.onClear(event);
      } else {
        if (attrs["onUpdate:value"]) {
          inputValue.value = "";
        } else {
          (_a = props.onChange) == null ? void 0 : _a.call(props, "", event);
        }
      }
      if (process.env.TARO_ENV === "h5") {
        clearInputNodeValue();
      }
    }
    function handleConfirm(event) {
      props.onConfirm && props.onConfirm(event);
    }
    function handleActionClick(event) {
      var _a;
      (_a = props.onActionClick) == null ? void 0 : _a.call(props, event);
    }
    return () => h(View, mergeProps(attrs, {
      class: rootClasses.value
    }), {
      default: () => [
        h(View, {
          class: "at-search-bar__input-cnt"
        }, {
          default: () => [
            h(View, {
              class: "at-search-bar__placeholder-wrap",
              style: placeholderWrapStyle.value
            }, {
              default: () => [
                h(Text, {class: "at-icon at-icon-search"}),
                h(Text, {
                  class: "at-search-bar__placeholder",
                  style: placeholderStyle.value
                }, {default: () => state.isFocus ? "" : props.placeholder})
              ]
            }),
            h(Input, {
              class: "at-search-bar__input",
              id: inputID.value,
              type: props.inputType,
              confirmType: "search",
              value: inputValue.value,
              focus: state.isFocus,
              disabled: props.disabled,
              maxlength: props.maxLength,
              onBlur: handleBlur,
              onFocus: handleFocus,
              onInput: handleChange,
              onConfirm: handleConfirm
            }),
            inputValue.value && h(View, {
              class: "at-search-bar__clear",
              style: clearIconStyle.value,
              onTouchstart: handleClear
            }, {
              default: () => [
                h(Text, {class: "at-icon at-icon-close-circle"})
              ]
            })
          ]
        }),
        h(View, {
          class: "at-search-bar__action",
          style: actionStyle.value,
          onTap: handleActionClick
        }, {default: () => props.actionName})
      ]
    });
  }
});
var search_bar_default = AtSearchBar;
export {
  search_bar_default as default
};