@txdfe/at/types/time-picker/index.d.ts

一个设计体系组件库

/// <reference types="react" />

import * as React from 'react';
import {Moment} from 'moment';

interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
    defaultValue?: any;
    onChange?: any;
}

export interface TimePickerProps extends HTMLAttributesWeak {
    /**
     * 按钮的文案
     */
    label?: React.ReactNode;

    /**
     * 输入框状态
     */
    state?: 'error' | 'success';

    /**
     * 输入框提示
     */
    placeholder?: string;

    /**
     * 时间值（moment 对象或时间字符串，受控状态使用）
     */
    value?: Moment | string;

    /**
     * 时间初值（moment 对象或时间字符串，非受控状态使用）
     */
    defaultValue?: Moment | string;

    /**
     * 时间选择框的尺寸
     */
    size?: 'small' | 'medium' | 'large';

    /**
     * 是否允许清空时间
     */
    hasClear?: boolean;

    /**
     * 时间的格式
     * https://momentjs.com/docs/#/parsing/string-format/
     */
    format?: string;

    /**
     * 小时选项步长
     */
    hourStep?: number;

    /**
     * 分钟选项步长
     */
    minuteStep?: number;

    /**
     * 秒钟选项步长
     */
    secondStep?: number;

    /**
     * 禁用小时函数
     */
    disabledHours?: (index: number) => boolean;

    /**
     * 禁用分钟函数
     */
    disabledMinutes?: (index: number) => boolean;

    /**
     * 禁用秒钟函数
     */
    disabledSeconds?: (index: number) => boolean;

    /**
     * 弹层是否显示（受控）
     */
    visible?: boolean;

    /**
     * 弹层默认是否显示（非受控）
     */
    defaultVisible?: boolean;

    /**
     * 弹层容器
     */
    popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement);

    /**
     * 弹层对齐方式, 详情见Overlay 文档
     */
    popupAlign?: string;

    /**
     * 弹层触发方式
     */
    popupTriggerType?: 'click' | 'hover';

    /**
     * 弹层展示状态变化时的回调
     */
    onVisibleChange?: (visible: boolean, reason: string) => void;

    /**
     * 弹层自定义样式
     */
    popupStyle?: {};

    /**
     * 弹层自定义样式类
     */
    popupClassName?: string;

    /**
     * 弹层属性
     */
    popupProps?: {};

    /**
     * 是否禁用
     */
    disabled?: boolean;

    /**
     * 时间值改变时的回调
     */
    onChange?: (value: Moment | string) => void;
}

export default class TimePicker extends React.Component<TimePickerProps, any> {
  static RangePicker: typeof RangePicker
}


export interface RangePickerProps {
  /**
   * 设置trigger的className
   */
  className?: string
  /**
   * 设置trigger的style
   */
  style?: React.CSSProperties
  /**
   * 设置trigger的style
   */
  size?: 'small' | 'medium'
  /**
   * 弹层是否默认可见，初始化时有效
   */
  defaultVisible?: boolean
  /**
   * 弹层是否可见，受控
   */
  visible?: boolean
  /**
   * 弹层显隐回调
   */
  onVisibleChange?: (visible: boolean, type: string, e: React.MouseEvent<HTMLElement>) => void
  /**
   * 默认值，moment或字符串数组，非受控
   */
  defaultValue?: Moment[]
  /**
   * moment或字符串数组，受控
   */
  value?: Moment[] | string[]
  /**
   * 整体值发生变化时触发的回调方法
   */
  onChange?: (value: Moment[] | string[]) => void
  /**
   * 时间格式
   */
  format?: string
  /**
   * 小时选择步长
   */
  hourStep?: number
  /**
   * 分钟选择步长
   */
  minuteStep?: number
  /**
   * 秒选择步长
   */
  secondStep?: number
  /**
   * 禁用的小时，数组
   * @return {Boolean} 是否禁用
   */
  disabledHours?: Array<(hour: number) => boolean>
  /**
   * 禁用的分钟，数组
   * @return {Boolean} 是否禁用
   */
  disabledMinutes?: Array<(minute: number) => boolean>
  /**
   * 禁用的秒，数组
   * @return {Boolean} 是否禁用
   */
  disabledSeconds?: Array<(second: number) => boolean>
  /**
   * 弹层容器
   * @param {Object} target 目标节点
   * @return {ReactNode} 容器节点
   */
  popupContainer?: string | HTMLElement | ((target: HTMLElement) => HTMLElement)
  /**
   * 弹层对齐方式, 详情见Overlay 文档
   */
  popupAlign?: string
  /**
   * 弹层触发方式
   */
  popupTriggerType?: 'click' | 'hover'
  /**
   * 弹层自定义样式
   */
  popupStyle?: React.CSSProperties
  /**
   * 弹层自定义样式类
   */
  popupClassName?: string,
  /**
   * 弹层属性
   */
  popupProps?: React.CSSProperties
  /**
   * 是否跟随滚动
   */
  followTrigger?: boolean
  /**
   * 是否禁用
   */
  disabled?: boolean
}

export class RangePicker extends React.Component<RangePickerProps, any> {}