1+ /* eslint-disable no-tabs */
12import React from 'react' ;
23import PropTypes from 'prop-types' ;
34import styled from 'styled-components' ;
@@ -10,7 +11,7 @@ const YearComponent = styled.div`
1011 padding-bottom: 10px;
1112 position: relative;
1213 text-align: right;
13- width: 50px ;
14+ width: 100px ;
1415
1516 &::after {
1617 background: #ccc;
@@ -28,37 +29,96 @@ const YearComponentItem = styled.div`
2829 margin-bottom: 8px;
2930` ;
3031
31- const ContentYear = props => {
32- const { startYear, currentYear } = props ;
33- const _date = new Date ( ) ;
32+ const mapMonth = [
33+ 'Jan' ,
34+ 'Feb' ,
35+ 'Mar' ,
36+ 'Apr' ,
37+ 'May' ,
38+ 'Jun' ,
39+ 'Jul' ,
40+ 'Aug' ,
41+ 'Sept' ,
42+ 'Oct' ,
43+ 'Nov' ,
44+ 'Dec' ,
45+ ] ;
3446
35- return (
36- < YearComponent className = "year-component" >
37- { currentYear ? (
38- < >
39- < YearComponentItem className = "item-year-component" >
40- { _date . getFullYear ( ) }
41- </ YearComponentItem >
42- < YearComponentItem className = "item-year-component" >
43- { startYear }
44- </ YearComponentItem >
45- </ >
46- ) : (
47- < YearComponentItem className = "item-year-component" >
48- { startYear }
49- </ YearComponentItem >
50- ) }
51- </ YearComponent >
52- ) ;
47+ const handleTransformMonth = ( month , type ) => {
48+ if ( type === 'number' ) {
49+ return month . length === 1 ? `0${ month } ` : month ;
50+ }
51+ const index = month - 1 ;
52+ return mapMonth [ index ] ;
53+ } ;
54+
55+ const handleGetDate = ( month , type , day , year ) => {
56+ const newMonth = handleTransformMonth ( month , type ) ;
57+
58+ if ( day !== '' && month !== '' ) {
59+ if ( type === 'text' ) {
60+ return `${ newMonth } ${ day } , ${ year } ` ;
61+ }
62+ return `${ newMonth } -${ day } -${ year } ` ;
63+ }
64+ if ( month !== '' ) {
65+ if ( type === 'text' ) {
66+ return `${ newMonth } , ${ year } ` ;
67+ }
68+ return `${ newMonth } -${ year } ` ;
69+ }
70+ return year ;
71+ } ;
72+
73+ const handlePrintDate = ( mounth , day , year , monthType , current ) => {
74+ const date = new Date ( ) ;
75+ const startDate = handleGetDate ( mounth , monthType , day , year ) ;
76+
77+ if ( current ) {
78+ return (
79+ < >
80+ < YearComponentItem className = "item-year-component" >
81+ { date . getFullYear ( ) }
82+ </ YearComponentItem >
83+ < YearComponentItem className = "item-year-component" >
84+ { startDate }
85+ </ YearComponentItem >
86+ </ >
87+ ) ;
88+ }
89+ return (
90+ < YearComponentItem className = "item-year-component" >
91+ { startDate }
92+ </ YearComponentItem >
93+ ) ;
94+ } ;
95+
96+ const ContentYear = ( props ) => {
97+ const {
98+ startMonth, startDay, startYear, monthType, currentYear,
99+ } = props ;
100+
101+ return (
102+ < YearComponent className = "year-component" >
103+ { handlePrintDate ( startMonth , startDay , startYear , monthType , currentYear ) }
104+ </ YearComponent >
105+ ) ;
53106} ;
54107
55108ContentYear . defaultProps = {
56- currentYear : false
109+ startMonth : '' ,
110+ monthType : 'number' ,
111+ startDay : '' ,
112+ currentYear : false ,
57113} ;
58114
59115ContentYear . propTypes = {
60- startYear : PropTypes . number . isRequired ,
61- currentYear : PropTypes . bool
116+ startMonth : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . number ] ) ,
117+ monthType : PropTypes . oneOf ( [ 'text' , 'number' ] ) ,
118+ startDay : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . number ] ) ,
119+ startYear : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . number ] )
120+ . isRequired ,
121+ currentYear : PropTypes . bool ,
62122} ;
63123
64124export default ContentYear ;
0 commit comments