@hippy/vue-native-components/src/ul-refresh.ts

Native components middleware for Hippy-Vue, the components only for native, can't compatible with web.

/*
 * Tencent is pleased to support the open source community by making
 * Hippy available.
 *
 * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company.
 * All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { getEventRedirector } from './utils';

function registerUlRefresh(Vue: any) {
  Vue.registerElement('hi-ul-refresh-wrapper', {
    component: {
      name: 'RefreshWrapper',
    },
  });

  Vue.registerElement('hi-refresh-wrapper-item', {
    component: {
      name: 'RefreshWrapperItemView',
    },
  });

  Vue.component('UlRefreshWrapper', {
    inheritAttrs: false,
    props: {
      bounceTime: {
        type: Number,
        defaultValue: 100,
      },
    },
    methods: {
      startRefresh() {
        Vue.Native.callUIFunction((this as any).$refs.refreshWrapper, 'startRefresh', null);
      },
      refreshCompleted() {
        // FIXME: Here's a typo mistake `refreshComplected` in native sdk.
        Vue.Native.callUIFunction((this as any).$refs.refreshWrapper, 'refreshComplected', null);
      },
    },
    render(h: any) {
      const on = getEventRedirector.call(this, [
        'refresh',
      ]);
      return h('hi-ul-refresh-wrapper', {
        on,
        ref: 'refreshWrapper',
      }, this.$slots.default);
    },
  });

  Vue.component('UlRefresh', {
    inheritAttrs: false,
    render(h: any) {
      return h('hi-refresh-wrapper-item', {
        style: {
          position: 'absolute',
          left: 0,
          right: 0,
        },
      }, [
        h('div', this.$slots.default),
      ]);
    },
  });
}

export default registerUlRefresh;