Merge pull request #159 from zhaoyuuu/optimize

Optimize

.gitignore

@@ -9,7 +9,7 @@
 /coverage
 
 # production
-/dist
+# /dist
 
 # misc
 .DS_Store

.lintstagedrc.json

@@ -1,4 +1,4 @@
 {
-  "*.{js,ts,tsx}": ["eslint", "prettier --write"],
+  "*.{ts,tsx}": ["eslint", "prettier --write"],
   "*.{html,scss}": "prettier --write"
 }

dist/_utils/DateUtil.d.ts

@@ -0,0 +1,85 @@
+import { IDatePicker } from './types'
+import dayjs from 'dayjs'
+export declare const DatePickerDefaults: {
+  monthFormat: string
+  dateFormat: string
+  dateTimeFormat: string
+  timeFormat: string
+  locale: string
+}
+export declare const lpad: (val: string, length: number, char: '0') => string
+export declare const chunk: (arr: any[], n: number) => any[][]
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N
+export type { Omit, Merge }
+export declare const ifExistCall: (
+  func?: ((...args: any[]) => void) | undefined,
+  ...args: any[]
+) => void | undefined
+export declare const getMonthShort: (locale: IDatePicker.Locale) => any[]
+export declare const getWeekDays: (locale: IDatePicker.Locale) => any[]
+export declare const getToday: (locale: IDatePicker.Locale) => string
+export declare const range: (n1: number, n2?: number) => number[]
+export declare const repeat: (el: any, n: number) => any[]
+/**
+ * Getting Div position as far as distance
+ * @param node
+ * @param direction
+ * @param distance
+ */
+export declare const getDivPosition: (
+  node: HTMLDivElement | null,
+  direction: IDatePicker.PickerDirection | undefined,
+  height: number,
+  distance: 5
+) => IDatePicker.Position
+export declare const getDomHeight: (node: HTMLDivElement | null) => number
+export declare const getDayMatrix: (year: number, month: number) => string[][]
+export declare const getMonthMatrix: (locale: IDatePicker.Locale) => any[][]
+export declare const getYearMatrix: (year: number) => string[][]
+export declare const isYearEqual: (
+  year1?: dayjs.Dayjs,
+  year2?: dayjs.Dayjs
+) => boolean
+export declare const isDayEqual: (
+  day1?: dayjs.Dayjs,
+  day2?: dayjs.Dayjs
+) => boolean
+export declare const isYearAfter: (
+  year1: dayjs.Dayjs,
+  year2: dayjs.Dayjs
+) => boolean
+export declare const isYearBefore: (
+  year1: dayjs.Dayjs,
+  year2: dayjs.Dayjs
+) => boolean
+export declare const isMonthAfter: (
+  month1: dayjs.Dayjs,
+  month2: dayjs.Dayjs
+) => boolean
+export declare const isMonthBefore: (
+  month1: dayjs.Dayjs,
+  month2: dayjs.Dayjs
+) => boolean
+export declare const isDayAfter: (
+  day1: dayjs.Dayjs,
+  day2: dayjs.Dayjs
+) => boolean
+export declare const isDayBefore: (
+  day1: dayjs.Dayjs,
+  day2: dayjs.Dayjs
+) => boolean
+export declare const isDayRange: (
+  date: dayjs.Dayjs,
+  start?: dayjs.Dayjs,
+  end?: dayjs.Dayjs
+) => boolean
+export declare const isYearRange: (
+  year: dayjs.Dayjs,
+  start?: dayjs.Dayjs,
+  end?: dayjs.Dayjs
+) => boolean
+export declare const formatDate: (
+  date: dayjs.Dayjs | undefined,
+  format: string
+) => string

dist/_utils/types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export declare namespace IDatePicker {
+  type Locale = any
+  enum PickerDirection {
+    TOP = 0,
+    BOTTOM = 1,
+  }
+  enum ViewMode {
+    YEAR = 0,
+    MONTH = 1,
+    DAY = 2,
+  }
+  enum TimeType {
+    AM = 'AM',
+    PM = 'PM',
+  }
+  interface Position {
+    left?: string
+    top?: string
+    bottom?: string
+    right?: string
+  }
+  interface SVGIconProps {
+    size?: string
+    className?: string
+    color?: string
+    onClick?: () => void
+    style?: React.CSSProperties
+    children?: React.ReactNode
+  }
+}

dist/components/Affix/affix.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react'
+export interface IAffixProps extends React.HTMLAttributes<HTMLDivElement> {
+  offsetTop?: number
+  className?: string
+  children?: ReactNode
+}
+/**
+ * > 将页面元素钉在可视范围。
+ *
+ * ### 何时使用
+ * 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
+ *
+ * 页面可视范围过小时，慎用此功能以免遮挡页面内容。
+ */
+export declare const Affix: React.FC<IAffixProps>
+export default Affix

dist/components/Affix/index.d.ts

@@ -0,0 +1,2 @@
+import Affix from './affix'
+export default Affix

dist/components/AutoComplete/autoComplete.d.ts

@@ -0,0 +1,38 @@
+import React, { ReactElement } from 'react'
+import { InputProps } from '../Input/input'
+interface DataSourceObject {
+  value: string
+}
+export type DataSourceType<T = {}> = T & DataSourceObject
+export interface IAutoCompleteProps
+  extends Omit<InputProps, 'onSelect' | 'onChange'> {
+  /**
+   * 返回输入建议的方法，可以拿到当前的输入，然后返回同步的数组或者是异步的 Promise
+   * type DataSourceType<T = {}> = T & DataSourceObject
+   */
+  fetchSuggestions: (
+    str: string
+  ) => DataSourceType[] | Promise<DataSourceType[]>
+  /** 文本框发生改变的时候触发的事件*/
+  onChange?: (value: string) => void
+  /** 点击选中建议项时触发的回调*/
+  onSelect?: (item: DataSourceType) => void
+  /** 支持自定义渲染下拉项，返回 ReactElement */
+  renderOption?: (item: DataSourceType) => ReactElement
+  /** 自定义类名 */
+  className?: string
+}
+/**
+ * > 输入框自动完成功能。
+ *
+ * ### 何时使用
+ * - 需要一个输入框而不是选择器。
+ * - 需要输入建议/辅助提示。
+ *
+ * 和 `Select` 的区别是：
+ *
+ * - `AutoComplete` 是一个带提示的文本输入框，用户可以自由输入，关键词是辅助输入。
+ * - `Select` 是在限定的可选项中进行选择，关键词是选择。
+ */
+export declare const AutoComplete: React.FC<IAutoCompleteProps>
+export default AutoComplete

dist/components/AutoComplete/index.d.ts

@@ -0,0 +1,2 @@
+import AutoComplete from './autoComplete'
+export default AutoComplete

dist/components/Button/button.d.ts

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react'
+export type ButtonSize = 'lg' | 'sm' | 'mid'
+export type ButtonType = 'primary' | 'default' | 'danger' | 'link' | 'dash'
+interface BaseButtonProps {
+  /**添加自定义类名 */
+  className?: string
+  /**设置按钮失效状态 */
+  disabled?: boolean
+  /**设置按钮尺寸 */
+  size?: ButtonSize
+  /**设置按钮类型 */
+  btnType?: ButtonType
+  /**设置按钮上的文字 */
+  children?: ReactNode
+  /**点击跳转的地址，指定此属性 button 的行为和 a 链接一致 */
+  href?: string
+}
+type AnchorButtonProps = BaseButtonProps &
+  React.ButtonHTMLAttributes<HTMLElement>
+export type ButtonProps = Partial<AnchorButtonProps>
+/**
+ * >按钮用于开始一个即时操作。
+ *
+ * ### 何时使用
+ * 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
+ * 在violetUI我们提供了7种按钮
+ *
+ * - 默认按钮：用于没有主次之分的一组行动点。
+ * - 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
+ * - 危险按钮：删除/移动/修改权限等危险操作，一般需要二次确认。
+ * - 链接按钮：一般用于链接，即导航至某位置。
+ * - 图标按钮：可以通过Icon组件，为按钮提供各式各样的图标选择。
+ * - 虚线按钮：常用于添加操作。
+ * - 禁用按钮：行动点不可用的时候，一般需要文案解释。
+ *
+ *
+ * 除了默认按钮尺寸，还提供了两种尺寸配合使用
+ * - Large Button
+ * - Samll Button
+ */
+export declare const Button: {
+  (props: ButtonProps): JSX.Element
+  defaultProps: {
+    disabled: boolean
+    btnType: string
+  }
+}
+export default Button

dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from './button'
+export default Button

dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,25 @@
+import dayjs from 'dayjs'
+import React from 'react'
+import { InheritProps as ContainerProps } from './CalenderComponents/CalendarContainer'
+export interface Props extends ContainerProps {
+  /** Calendar Initial Date Parameters */
+  base: dayjs.Dayjs
+  /**显示视图的个数 */
+  showMonthCnt: number
+  /**日历的视图,包含年月日三种视图 */
+  view: 'year' | 'month' | 'day'
+}
+export interface State {
+  base: dayjs.Dayjs
+}
+declare class Calendar extends React.Component<Props, State> {
+  static defaultProps: {
+    base: dayjs.Dayjs
+    showMonthCnt: number
+    view: string
+  }
+  constructor(props: Props)
+  setBase: (base: dayjs.Dayjs) => void
+  render(): JSX.Element
+}
+export default Calendar

dist/components/Calendar/CalendarSelect.d.ts

@@ -0,0 +1,44 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import { Props as ICalendarProps } from './Calendar'
+import { Omit, Merge } from '../../_utils/DateUtil'
+type CalendarProps = Merge<
+  Omit<ICalendarProps, 'base' | 'onChange' | 'selected'>,
+  {
+    /** 显示视图的个数 */
+    showMonthCnt?: number
+  }
+>
+interface IProps {
+  /** 日视图下是否多选 */
+  multiple?: boolean
+}
+interface State {
+  selected: dayjs.Dayjs[]
+}
+type Props = CalendarProps & IProps
+/**
+ * 日历。支持年/月/日切换。
+ *
+ * 支持国际化配置（支持多种语言）。
+ *
+ */
+export declare class CalendarSelect extends React.Component<Props, State> {
+  static defaultProps: {
+    /** 默认不多选 */
+    multiple: boolean
+    /** 默认为日视图 */
+    view: string
+  }
+  state: {
+    selected: never[]
+  }
+  handleChange: (
+    year?: dayjs.Dayjs,
+    month?: dayjs.Dayjs,
+    date?: dayjs.Dayjs
+  ) => void
+  handleClear: () => void
+  render(): JSX.Element
+}
+export default CalendarSelect

dist/components/Calendar/CalenderComponents/CalendarBody.d.ts

@@ -0,0 +1,23 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import { IDatePicker } from '../../../_utils/types'
+import { Props as DayViewProps } from '../DayView'
+interface CalendarBodyProps {
+  /** Calendar viewMode(Year, Month, Day) */
+  viewMode: IDatePicker.ViewMode
+  /** Calendar current Date */
+  current: dayjs.Dayjs
+  /** DayClick Event */
+  onClick: (value: string) => void
+  /** Locale to use */
+  locale: IDatePicker.Locale
+}
+export type Props = DayViewProps & CalendarBodyProps
+export declare class CalendarBody extends React.Component<Props> {
+  static defaultProps: {
+    viewMode: IDatePicker.ViewMode
+    locale: string
+  }
+  render(): JSX.Element
+}
+export default CalendarBody

dist/components/Calendar/CalenderComponents/CalendarContainer.d.ts

@@ -0,0 +1,56 @@
+import dayjs from 'dayjs'
+import React from 'react'
+import { Props as DayViewProps } from '../DayView'
+import { IDatePicker } from '../../../_utils/types'
+export interface CalendarContainerProps {
+  /** dayjs中支持的所有语言,使用前导入import 'dayjs/locale/zh-cn',import 'dayjs/locale/ja' */
+  locale?: IDatePicker.Locale
+  /** 日历显示或隐藏 */
+  show?: boolean
+  /** 显示或隐藏向前按钮 */
+  prevIcon?: boolean
+  /** 显示或隐藏向后按钮 */
+  nextIcon?: boolean
+  /** Event for Calendar day click */
+  onChange?: (
+    year?: dayjs.Dayjs,
+    month?: dayjs.Dayjs,
+    date?: dayjs.Dayjs
+  ) => void
+  view?: string
+}
+export interface PrivateProps {
+  /** CalendarContainer base prop */
+  current: dayjs.Dayjs
+  /** Default Date parameter in calendar, which is the parent component */
+  base: dayjs.Dayjs
+  /** Number of months to show at once */
+  showMonthCnt: number
+  /** Set Calendar initial Date  */
+  setBase: (base: dayjs.Dayjs) => void
+}
+export interface State {
+  viewMode: IDatePicker.ViewMode
+}
+export type InheritProps = DayViewProps & CalendarContainerProps
+export type Props = CalendarContainerProps & DayViewProps & PrivateProps
+export declare class CalendarContainer extends React.Component<Props, State> {
+  static defaultProps: {
+    current: dayjs.Dayjs
+    show: boolean
+    showMonthCnt: number
+    showToday: boolean
+    locale: string
+  }
+  private getViewMode
+  constructor(props: Props)
+  getHeaderTitle: () => string
+  handleTitleClick: () => void
+  handleChange: (value: string) => void
+  handleBase: (method: string) => () => void
+  handleToday: () => void
+  renderCalendarHead: () => JSX.Element
+  renderCalendarBody: () => JSX.Element
+  render(): JSX.Element
+}
+export default CalendarContainer