# YearView 年视图

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/year-view/freepass)
- 平台：PC
- 维护者：屈正巍
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[YearView]

## 代码演示

### 基础用法

基本年视图

```jsx
import { Component } from "react";
import { constants, YearView, DatePickerDateCellValueType } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-yearview`;

type Props = {}
type State = {}

export default class DatePickerDemo extends Component<Props, State> {

  onCellClick = (item: DatePickerDateCellValueType) => {
    console.info('item', item)
  }

  render() {
    return (
      <div className={prefixCls}>
        <p>基础用法</p>
        <YearView
         
          value={2022}
          onCellClick={this.onCellClick}
        />
      </div >
    )
  }
}
```

### 自定义月份

可自定义展示月份

```jsx
import { Component } from "react";
import { constants, YearView, DatePickerDateCellValueType } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-yearview`;

type Props = {}
type State = {}

export default class DatePickerDemo extends Component<Props, State> {

  onCellClick = (item: DatePickerDateCellValueType) => {
    console.info('item', item)
  }

  customRenderPanelNav = (_: any, ele: React.ReactNode) => {
    return (
      <div style={{ border: '1px solid pink' }}>
        {ele}
      </div>
    )
  }

  render() {
    return (
      <div className={prefixCls}>
        <p>自定义月份</p>
        <YearView
         
          value={2022}
          onCellClick={this.onCellClick}
          customMonthAry={[1, 3, 5, 7, 9, 11]}
          customRenderPanelNav={this.customRenderPanelNav}
        />
      </div >
    )
  }
}
```

## API

### 类型说明：（请从@weapp/ui 中导出）

```typescript
1.Cell属性
type DatePickerDateCellValueType = {
  date: Date; //点击cell的date
  content: string; //点击cell的填充string
  isValid: boolean; //该cell是否禁用
  isCurrentMonth?: boolean; //该cell是否属于本月
}
```

### 参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| prefixCls | 是否将 trigger 弹出层固定在该节点下 | string | 否 |  |
| className | 自定义类名 | string | 否 |  |
| style | 自定义样式 | CSSProperties | 否 |  |
| panelClassName | 面板自定义类名 | string | 否 |  |
| panelStyle | 面板自定义样式 | CSSProperties | 否 |  |
| value | 组件数据（年） | number | 否 |  |
| weekStart | 每周的开始日 | number (0 代表周天 6 代表周六) | 否 |  |
| dateLimitedConfig | 日期边界配置 | 详情参考日期组件配置 | 否 |  |
| customRenderCell | 自定义渲染每个cell | (templateCom: ReactNode, cell: ReactNode, value: DatePickerDateType, cellData: any) => React.ReactNode | 否 |  |
| customRenderPanelNav | 自定义渲染每个面板头部 | (this: any, content: ReactNode, ) => React.ReactNode | 否 |  |
| customRenderPanelContent | 自定义渲染每个面板内容 | (this: any, content: ReactNode, ) => React.ReactNode | 否 |  |
| onCellClick | 每个cell点击事件 | (item: DatePickerDateCellValueType) => void | 否 |  |
| hideCurrentMonth | 是否隐藏月份面板非本月的日期 | boolean | 否 | true |
| customMonthAry | 自定义月份 | number[] | 否 | [0,1,2,3,4,5,6,7,8,9,10,11] |
