@rdkmaster/jigsaw-labs/component/time/time.d.ts

Jigsaw, the next generation component set for RDK

import { ElementRef, EventEmitter, OnDestroy, OnInit, Renderer2 } from "@angular/core";
import { ControlValueAccessor } from "@angular/forms";
import { AbstractJigsawComponent } from "../common";
import { TimeGr, TimeWeekStart } from "../../service/time.service";
import { PopupService } from "../../service/popup.service";
import { Time, WeekTime } from "../../service/time.types";
import { TranslateService } from "@ngx-translate/core";
/**
 * 时间范围生成函数，用于生成自定义的时间范围
 *
 * $demo = range-time/gr-items
 */
export declare type TimeShortcutFunction = () => [WeekTime, WeekTime];
/**
 * 表示一个自定义的时间范围，一般用于配合`JigsawRangeTime.grItems`属性使用，用于设置某个粒度下快速时间范围选择。
 */
export declare class Shortcut {
    /**
     * 国际化提示信息，将被直接显示在界面上
     * $demo = range-time/gr-items
     */
    label: string;
    /**
     * 时间范围的起止时间点，可以给出固定值，也可以给一个产生起止时间点的函数
     * $demo = range-time/gr-items
     */
    dateRange: [WeekTime, WeekTime] | TimeShortcutFunction;
}
/**
 * 一个时间粒度
 */
export declare class GrItem {
    /**
     * 国际化提示信息，将被直接显示在界面上
     */
    label: string;
    /**
     * 粒度值
     *
     * $demo = range-time/gr-items
     * $demo = time/gr
     */
    value: TimeGr;
    /**
     * 配置当前粒度下，用户能够选择的最大时间跨度。当某些查询请求必须约束用户选择某个范围内的时间时，这个配置项将非常有用。
     * 例如查询银行流水时，我们常常被约束最长只能查询3个月的流水等。
     *
     * 支持时间宏。关于时间宏，请参考这里`TimeUnit`的说明。
     *
     * $demo = range-time/gr-items
     */
    span?: string;
    /**
     * 给出一组预定义的时间范围，这样用户可以通过这些值快速的设置好待选的时间范围，提高易用性。
     * 只在和`JigsawRangeTime`配合使用时才有效
     *
     * 支持时间宏。关于时间宏，请参考这里`TimeUnit`的说明。
     *
     * $demo = range-time/gr-items
     */
    shortcuts?: Shortcut[];
}
/**
 * 用于在界面上提供一个时刻的选择，支持多种时间粒度切换，支持年月日时分秒及其各种组合，如下是一些常见的场景及其建议：
 *
 * - 如果需要选择的是一个时间范围，则请使用`JigsawRangeTime`；
 * - 如果你需要的是一个日历的功能，那请参考[这个demo]($demo=table/calendar)，通过表格+渲染器的方式来模拟；
 * - 时间选择器常常是收纳到下拉框中以解决视图空间，Jigsaw是通过`JigsawComboSelect`来组合使用的，
 * 参考[这个demo]($demo=time/with-combo-select)；
 *
 * 时间控件是对表单友好的，你可以给时间控件编写表单校验器，参考[这个demo]($demo=form/template-driven)。
 *
 * $demo = time/full
 * $demo = time/basic
 */
export declare class JigsawTime extends AbstractJigsawComponent implements ControlValueAccessor, OnInit, OnDestroy {
    private _el;
    private _renderer;
    private _popService;
    private _translateService;
    valid: boolean;
    /**
     * 当时间粒度被用户切换之后，Jigsaw会发出此事件。
     *
     * $demo = time/gr
     *
     * @type {EventEmitter<TimeGr>}
     */
    grChange: EventEmitter<TimeGr>;
    /**
     * @internal
     */
    _$gr: TimeGr;
    /**
     * 时间当前的粒度，在双绑模式下改变这值可以让时间控件更换到对应的粒度。
     *
     * $demo = time/gr
     *
     * @return {TimeGr | string}
     */
    gr: TimeGr | string;
    private _value;
    /**
     * 当前所选中的时刻，在双绑模式下，更新这个值可以让时间控件选中对应的时刻。
     *
     * 支持时间宏。关于时间宏，请参考这里`TimeUnit`的说明。
     *
     * $demo = time/basic
     *
     * @return {WeekTime}
     */
    date: WeekTime;
    /**
     * 当时间被用户切换之后，Jigsaw会发出此事件。
     *
     * $demo = time/basic
     *
     * @type {EventEmitter<WeekTime>}
     */
    dateChange: EventEmitter<WeekTime>;
    private _limitEnd;
    /**
     * 时间控件允许选择的时间截止时刻，默认是无限制的未来。这个约束对所有的粒度都生效。
     *
     * 支持时间宏。关于时间宏，请参考这里`TimeUnit`的说明。
     *
     * $demo = time/limit-start
     * $demo = time/limit-end
     *
     * @return {Time}
     */
    limitEnd: Time;
    private _limitStart;
    /**
     * 时间控件允许选择的时间开始时刻，默认是无限制的过去。这个约束对所有的粒度都生效。
     *
     * 支持时间宏。关于时间宏，请参考这里`TimeUnit`的说明。
     *
     * $demo = time/limit-start
     * $demo = time/limit-end
     *
     * @return {Time}
     */
    limitStart: Time;
    /**
     * 时间刷新的间隔毫秒数，主要针对startDate或endDate设置为now或now-2h等需要不时刷新的场景
     */
    private _refreshInterval;
    /**
     * 刷新时间宏的间隔毫秒数，默认不刷新。
     *
     * 解决的场景是：在界面上弄了个时间选择器，页面打开时默认选中当前时刻，并限制了用户只能选择过去3小时的时间，这很快就可以完成，毫无难度。
     * 然而用户使用时是这样的，他打开了页面后，就去处理别的事情去了，几个小时之后再回来想用这个已经打开的页面去查询一些东西，
     * 结果发现界面上时间怎么选都不对（因为那个时刻初始化了一次之后就再也没有更新，还停留在几个小时之前），只好刷新页面，用户常常抱怨这一点。
     *
     * 这个场景下，只要设置一个大于0的数字给时间控件的这个属性即可解决。
     *
     * $demo = time/refresh-interval
     *
     * @return {number}
     */
    refreshInterval: number;
    private _weekStart;
    /**
     * 设置周开始日期，可选值 sun mon tue wed thu fri sat，默认值是sun。
     *
     * $demo = time/week-start
     */
    weekStart: string | TimeWeekStart;
    /**
     * 设置时间控件所支持的粒度。如果你的场景只允许用户选择天、周，则设置了这2个粒度之后，用户无法选择其他的粒度。
     *
     * $demo = time/gr-items
     */
    grItems: GrItem[];
    /**
     * 有些时候我们需要提示用户选择那些时间是最佳的，可以通过`recommendedBegin`和`recommendedEnd`来设置。
     *
     * $demo = time/recommended
     */
    recommendedBegin: Time;
    /**
     * 有些时候我们需要提示用户选择那些时间是最佳的，可以通过`recommendedBegin`和`recommendedEnd`来设置。
     *
     * $demo = time/recommended
     */
    recommendedEnd: Time;
    /**
     * 推荐日期提示标签，默认值是`"推荐日期"`或`"Recommend"`
     */
    recommendedLabel: String;
    /**
     * time插件容器（jq对象）
     */
    private _timePicker;
    private _intervalId;
    private _langChangeSubscriber;
    constructor(_el: ElementRef, _renderer: Renderer2, _popService: PopupService, _translateService: TranslateService);
    ngOnInit(): void;
    private _defineLocale();
    ngOnDestroy(): void;
    private _destroyPicker();
    private _initDatePicker();
    private _bindActiveDayClickHandler(picker);
    private _setDate(value);
    /**
     * @internal
     */
    _$changeGranularity(select: GrItem): void;
    private _checkMacro();
    private _handleLimitStartAndEnd();
    private _weekHandle();
    private _handleValueChange(changeValue, gr, emit?);
    private _handleValue(value);
    private _handleWeekSelect();
    private _tooltipInfo;
    private _eventHelper;
    private _handleRecommended(nativeElement, popService);
    private static _searchDateForDay(begin, end, sourceNodes, headObj);
    private static _parseDay(val);
    private static _parseMonth(val);
    private static _searchDateForMonth(begin, end, sourceNodes, headNode);
    private static _getDataPickerNode(granularity, nativeElement, isHead?);
    private _propagateChange;
    writeValue(newValue: any): void;
    registerOnChange(fn: any): void;
    registerOnTouched(fn: any): void;
}