xref: /applications/standard/photos/common/src/main/ets/default/view/GridScrollBar.ets

/*
 * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
 * 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 { Log } from '../utils/Log';

const TAG: string = 'common_GridScrollBar';

@Component
export struct GridScrollBar {
  scroller: Scroller | null = null;
  @State isClickScrollBar: boolean = false;

  build() {
    ScrollBar({ scroller: this.scroller as Scroller, direction: ScrollBarDirection.Vertical,
      state: BarState.Auto }) {
      Row() {
        if (this.isClickScrollBar) {
          Image($r('app.media.scroll_press_light'))
            .width($r('app.float.scroll_bar_big_width'))
            .height($r('app.float.scroll_bar_big_height'))
        } else {
          Image($r('app.media.scroll_light'))
            .width($r('app.float.scroll_bar_small_width'))
            .height($r('app.float.scroll_bar_small_height'))
            .borderRadius(25)
        }
      }
    }
    .width(this.isClickScrollBar ? $r('app.float.scroll_bar_margin_small') : $r('app.float.scroll_bar_small_width'))
    .height('100%')
    .hitTestBehavior(HitTestMode.Transparent)
    .position({ x: '100%', y: 0 })
    .markAnchor({
      x: this.isClickScrollBar ? $r('app.float.scroll_bar_big_width') : $r('app.float.scroll_bar_small_width'),
      y: 0
    })
    .onTouch((event?: TouchEvent) => {
      if (event?.type == TouchType.Move && !this.isClickScrollBar) {
        Log.debug(TAG, `scrollBar first TouchType.Move`);
        this.isClickScrollBar = true;
      } else if (event?.type == TouchType.Up || event?.type == TouchType.Cancel) {
        Log.debug(TAG, `scrollBar TouchType.Up or Cancel. type=${event?.type}`);
        this.isClickScrollBar = false;
      }
    })
  }
}