Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 995c185

Browse files
fix(datepicker): add type=button to all buttons (#807)
* fix(datepicker): add type=button to all buttons * fix(datepicker): show calendar on custom icon click * chore: update pull request template * chore: configure ESLint to prevent non-button types of button * chore: apply ESLint rule to buttons in stories
1 parent 3537d19 commit 995c185

File tree

9 files changed

+31
-12
lines changed

9 files changed

+31
-12
lines changed

‎.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ module.exports = {
22
extends: ['react-app', 'prettier', 'plugin:prettier/recommended'],
33
rules: {
44
'@typescript-eslint/consistent-type-assertions': 0,
5+
'react/button-has-type': [2, { submit: false, reset: false }],
56
},
67
};

‎.github/PULL_REQUEST_TEMPLATE.md

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
<!--
2-
Make sure you've read the CONTRIBUTING.md file.
3-
Fill out the information to help the review and merge of your pull request!
4-
-->
5-
61
**What kind of change does this PR introduce?**
72
<!-- You can also link to an open issue here -->
83

@@ -19,4 +14,5 @@ Fill out the information to help the review and merge of your pull request!
1914
- [ ] Tests
2015
- [ ] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->
2116

22-
<!-- Feel free to add additional comments -->
17+
<!-- Make sure you've read the CONTRIBUTING.md file too -->
18+
<!-- Feel free to add additional comments -->

‎src/components/button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Button, ButtonProps } from 'semantic-ui-react';
22

33
const CustomButton = ({ icon, ...otherProps }: ButtonProps) => (
4-
<Button basic compact icon={icon} {...otherProps} />
4+
<Button basic compact icon={icon} type="button"{...otherProps} />
55
);
66

77
export default CustomButton;

‎src/components/calendar/calendar.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ const Calendar: React.FC<CalendarProps> = ({
102102
icon="angle double left"
103103
inverted={inverted}
104104
title={previousYear}
105+
type="button"
105106
{...getBackProps({
106107
calendars,
107108
'aria-label': previousYear,
@@ -114,6 +115,7 @@ const Calendar: React.FC<CalendarProps> = ({
114115
inverted={inverted}
115116
style={{ marginRight: 0 }}
116117
title={previousMonth}
118+
type="button"
117119
{...getBackProps({
118120
calendars,
119121
'aria-label': previousMonth,
@@ -135,6 +137,7 @@ const Calendar: React.FC<CalendarProps> = ({
135137
icon="angle right"
136138
inverted={inverted}
137139
title={nextMonth}
140+
type="button"
138141
{...getForwardProps({
139142
calendars,
140143
'aria-label': nextMonth,
@@ -146,6 +149,7 @@ const Calendar: React.FC<CalendarProps> = ({
146149
inverted={inverted}
147150
style={{ marginRight: 0 }}
148151
title={nextYear}
152+
type="button"
149153
{...getForwardProps({
150154
calendars,
151155
'aria-label': nextYear,
@@ -201,7 +205,7 @@ const Calendar: React.FC<CalendarProps> = ({
201205
</div>
202206
))}
203207
</div>
204-
{showToday && (
208+
{showToday ? (
205209
<TodayButton
206210
inverted={inverted}
207211
{...getToday(minDate, maxDate)}
@@ -212,7 +216,7 @@ const Calendar: React.FC<CalendarProps> = ({
212216
>
213217
{todayButton}
214218
</TodayButton>
215-
)}
219+
) : null}
216220
</Segment>
217221
</Ref>
218222
);

‎src/components/cell/cell.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,12 @@ const CalendarCell = ({
4848
}
4949

5050
return (
51-
<button className={className} disabled={!selectable} {...otherProps}>
51+
<button
52+
className={className}
53+
disabled={!selectable}
54+
type="button"
55+
{...otherProps}
56+
>
5257
{children}
5358
</button>
5459
);

‎src/components/icon.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@ type CustomIconProps = {
77
icon: SemanticDatepickerProps['icon'];
88
isClearIconVisible: boolean;
99
onClear: () => void;
10+
onClick: () => void;
1011
};
1112

1213
const CustomIcon = ({
1314
clearIcon,
1415
icon,
1516
isClearIconVisible,
1617
onClear,
18+
onClick,
1719
}: CustomIconProps) => {
1820
if (isClearIconVisible && clearIcon && React.isValidElement(clearIcon)) {
1921
return React.cloneElement<any>(clearIcon, {
@@ -37,6 +39,7 @@ const CustomIcon = ({
3739
if (icon && React.isValidElement(icon)) {
3840
return React.cloneElement<any>(icon, {
3941
'data-testid': 'datepicker-icon',
42+
onClick,
4043
});
4144
}
4245

‎src/components/input.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ const CustomInput = React.forwardRef<Input, InputProps>((props, ref) => {
4646
icon={icon}
4747
isClearIconVisible={isClearIconVisible}
4848
onClear={onClear}
49+
onClick={onFocus}
4950
/>
5051
}
5152
input={inputData}

‎src/components/today-button.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const TodayButton: React.FC<TodayButtonProps> = ({
3232
data-testid="datepicker-today-button"
3333
fluid
3434
style={style}
35+
type="button"
3536
{...otherProps}
3637
>
3738
{children}

‎stories/index.stories.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,16 @@ export const withCustomIcons = () => {
9494
const clearIcon = select('Clear icon (with value)', iconMap, iconMap.close);
9595
const useCustomIcon = boolean('Custom icon', false);
9696
const useCustomClearIcon = boolean('Custom clear icon', false);
97-
const CustomIcon = (props: any) => <button {...props}>Select</button>;
98-
const CustomClearIcon = (props: any) => <button {...props}>Reset</button>;
97+
const CustomIcon = (props: any) => (
98+
<button type="button" {...props}>
99+
Select
100+
</button>
101+
);
102+
const CustomClearIcon = (props: any) => (
103+
<button type="button" {...props}>
104+
Reset
105+
</button>
106+
);
99107
const x = useCustomIcon ? ((<CustomIcon />) as unknown) : icon;
100108
const y = useCustomClearIcon ? ((<CustomClearIcon />) as unknown) : clearIcon;
101109

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /