Skip to content

Commit 03a15b5

Browse files
author
berwin han
committed
fix: Tag & DatePicker styles
1 parent e61c1c7 commit 03a15b5

File tree

5 files changed

+122
-96
lines changed

5 files changed

+122
-96
lines changed

‎src/component/common/DatePicker/index.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { Component } from 'react';
2+
import { DatePicker as AntdDatePicker } from 'antd';
3+
import style from './style.less';
4+
5+
const { MonthPicker: AntdMonthPicker } = AntdDatePicker;
6+
7+
export default class DatePicker extends Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
open: false,
12+
date: null,
13+
};
14+
}
15+
16+
static getDerivedStateFromProps(nextProps, preState) {
17+
if (typeof nextProps.value === 'object') {
18+
return {
19+
date: nextProps.value,
20+
};
21+
}
22+
return null;
23+
}
24+
25+
handleChange = (date, dateString) => {
26+
const { onChange } = this.props;
27+
this.setState({ open: false });
28+
onChange ? onChange(date, dateString) : this.setState({ date });
29+
};
30+
31+
handleOpenChange = open => this.setState({ open });
32+
33+
render() {
34+
const { className = '', suffixIcon, value, onChange, ...props } = this.props;
35+
let { open, date } = this.state;
36+
return (
37+
<div id="date-picker" className={style.datePicker}>
38+
<AntdMonthPicker
39+
placeholder=""
40+
allowClear={false}
41+
open={open}
42+
value={date}
43+
onChange={this.handleChange}
44+
suffixIcon={<div />}
45+
format={'MM'}
46+
className={style.year}
47+
getCalendarContainer={trigger => document.getElementById('date-picker')}
48+
onOpenChange={this.handleOpenChange}
49+
/>
50+
<AntdMonthPicker
51+
allowClear={true}
52+
placeholder=""
53+
open={false}
54+
value={date}
55+
onChange={this.handleChange}
56+
suffixIcon={<div />}
57+
format={'YYYY'}
58+
className={style.month}
59+
onOpenChange={this.handleOpenChange}
60+
getCalendarContainer={trigger => document.getElementById('date-picker')}
61+
/>
62+
</div>
63+
);
64+
}
65+
}

‎src/component/common/DatePicker/index.tsx

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎src/component/common/DatePicker/style.less

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
11
@import '../../../theme.less';
22

33
.datePicker {
4-
width: 264px;
5-
position: relative;
6-
height: 32px;
7-
display: inline-block;
8-
.AntdMonthPicker {
9-
position: absolute;
10-
top: 0;
11-
left: 0;
4+
.month,.year {
5+
border: 1px solid @picker-border-color;
6+
margin-right: 10px;
127
}
13-
.fakePicker {
14-
// z-index: 9999;
15-
display: flex;
16-
background-color: #fff;
17-
width: 264px;
18-
position: absolute;
19-
top: 0;
20-
left: 0;
21-
height: 32px;
22-
.year,
23-
.month {
24-
flex: 1;
25-
margin-right: 5px;
26-
border: 1px solid @picker-border-color;
27-
line-height: 30px;
28-
outline: unset;
29-
}
30-
&:hover {
31-
.year,
32-
.month {
33-
border-color: @picker-border-hover-color;
34-
}
8+
&:hover {
9+
.month,.year {
10+
border-color: @picker-border-hover-color;
3511
}
3612
}
13+
// width: 264px;
14+
// // position: relative;
15+
// height: 32px;
16+
// display: flex;
17+
// .year,
18+
// .month {
19+
// flex: 1;
20+
// // border:unset;
21+
// margin-right: 5px;
22+
// border-bottom: 1px solid @picker-border-color;
23+
// line-height: 30px;
24+
// outline: unset;
25+
// &:hover {
26+
// .year,
27+
// .month {
28+
// border-color: @picker-border-hover-color;
29+
// }
30+
// }
31+
// }
32+
33+
// .fakePicker {
34+
// // z-index: 9999;
35+
// display: flex;
36+
// background-color: #fff;
37+
// width: 100%;
38+
// position: absolute;
39+
// top: 0;
40+
// left: 0;
41+
// height: 32px;
42+
43+
44+
// }
3745
}

‎src/global.less

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import 'utils/nprogress/nprogress.css';
2+
@import './theme.less';
23

34
@primary-color: #fff;
45

@@ -34,4 +35,18 @@ button {
3435
.ant-tabs-bar {
3536
border-bottom: none!important;
3637
}
37-
}
38+
39+
//datePicker
40+
.ant-calendar-picker {
41+
.ant-input {
42+
border: unset;
43+
&:focus {
44+
box-shadow: unset;
45+
border-color: @picker-border-hover-color;
46+
}
47+
}
48+
}
49+
.ant-tag {
50+
border-color: @tag-default-bg !important;
51+
}
52+
}

‎src/pages/baseComponentsDemo/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Button } from 'antd';
33
import Pagination from 'component/common/Pagination';
44
import Tag from 'component/common/Tag';
55
import Modal from 'component/common/Modal';
6-
import DatePicker from 'component/common/DatePicker';
6+
import DatePicker from 'component/common/DatePicker/index.js';
77
import TimePicker from 'component/common/TimePicker';
88

99
export default function index() {
@@ -61,6 +61,8 @@ export default function index() {
6161
<div>
6262
<div>datepicker</div>
6363
<DatePicker value={date} onChange={date => setDate(date)} />
64+
<div>___</div>
65+
<DatePicker />
6466
</div>
6567
<div>
6668
<div>TimePicker</div>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy