Skip to content

Commit

Permalink
fix: set maxHeight for register form select (#26)
Browse files Browse the repository at this point in the history 
* add maxHeight to MenuProps

* push build files [skip ci]

Co-Authored-By: cfl-bot <[email protected]>
  • Loading branch information
@cewei8483 @cfl-bot
cewei8483 and cfl-bot authored Sep 4, 2023
1 parent eaacc65 commit 2d402d3
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 6 deletions.
19 changes: 16 additions & 3 deletions lib/cjs/components/form/DateField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ var DateField = function (_a) {
var _f = react_1.default.useState(0), month = _f[0], setMonth = _f[1];
var _g = react_1.default.useState(0), year = _g[0], setYear = _g[1];
var _h = react_1.default.useState(true), isDateValid = _h[0], setIsDateValid = _h[1];
var menuMaxHeight = 400;
var fieldConfig = {
type: 'date',
name: name,
Expand Down Expand Up @@ -99,19 +100,31 @@ var DateField = function (_a) {
react_1.default.createElement(material_1.Unstable_Grid2, { xs: 12 },
react_1.default.createElement(material_1.FormHelperText, __assign({}, formHelperTextProps), helperText)),
react_1.default.createElement(material_1.Unstable_Grid2, { xs: 4 },
react_1.default.createElement(material_1.Select, __assign({ id: 'select-day', value: day, onChange: dispatchSelectChangeEvent(setDay) }, commonSelectProps),
react_1.default.createElement(material_1.Select, __assign({ id: 'select-day', value: day, onChange: dispatchSelectChangeEvent(setDay) }, commonSelectProps, { MenuProps: {
style: {
maxHeight: menuMaxHeight
}
} }),
react_1.default.createElement(material_1.MenuItem, { className: 'header', value: 0 }, "Day"),
dayOptions.map(function (day) {
return react_1.default.createElement(material_1.MenuItem, { key: "day-".concat(day), value: day, dense: true }, day);
}))),
react_1.default.createElement(material_1.Unstable_Grid2, { xs: 4 },
react_1.default.createElement(material_1.Select, __assign({ id: 'select-month', value: month, onChange: dispatchSelectChangeEvent(setMonth) }, commonSelectProps),
react_1.default.createElement(material_1.Select, __assign({ id: 'select-month', value: month, onChange: dispatchSelectChangeEvent(setMonth) }, commonSelectProps, { MenuProps: {
style: {
maxHeight: menuMaxHeight
}
} }),
react_1.default.createElement(material_1.MenuItem, { className: 'header', value: 0 }, "Month"),
monthOptions.map(function (month, index) {
return react_1.default.createElement(material_1.MenuItem, { key: "month-".concat(month), value: index + 1, dense: true }, month);
}))),
react_1.default.createElement(material_1.Unstable_Grid2, { xs: 4 },
react_1.default.createElement(material_1.Select, __assign({ id: 'select-year', value: year, onChange: dispatchSelectChangeEvent(setYear) }, commonSelectProps),
react_1.default.createElement(material_1.Select, __assign({ id: 'select-year', value: year, onChange: dispatchSelectChangeEvent(setYear) }, commonSelectProps, { MenuProps: {
style: {
maxHeight: menuMaxHeight
}
} }),
react_1.default.createElement(material_1.MenuItem, { className: 'header', value: 0 }, "Year"),
yearOptions.map(function (year) {
return react_1.default.createElement(material_1.MenuItem, { key: "year-".concat(year), value: year, dense: true }, year);
Expand Down
19 changes: 16 additions & 3 deletions lib/esm/components/form/DateField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ var DateField = function (_a) {
var _f = React.useState(0), month = _f[0], setMonth = _f[1];
var _g = React.useState(0), year = _g[0], setYear = _g[1];
var _h = React.useState(true), isDateValid = _h[0], setIsDateValid = _h[1];
var menuMaxHeight = 400;
var fieldConfig = {
type: 'date',
name: name,
Expand Down Expand Up @@ -94,19 +95,31 @@ var DateField = function (_a) {
React.createElement(Grid, { xs: 12 },
React.createElement(FormHelperText, __assign({}, formHelperTextProps), helperText)),
React.createElement(Grid, { xs: 4 },
React.createElement(Select, __assign({ id: 'select-day', value: day, onChange: dispatchSelectChangeEvent(setDay) }, commonSelectProps),
React.createElement(Select, __assign({ id: 'select-day', value: day, onChange: dispatchSelectChangeEvent(setDay) }, commonSelectProps, { MenuProps: {
style: {
maxHeight: menuMaxHeight
}
} }),
React.createElement(MenuItem, { className: 'header', value: 0 }, "Day"),
dayOptions.map(function (day) {
return React.createElement(MenuItem, { key: "day-".concat(day), value: day, dense: true }, day);
}))),
React.createElement(Grid, { xs: 4 },
React.createElement(Select, __assign({ id: 'select-month', value: month, onChange: dispatchSelectChangeEvent(setMonth) }, commonSelectProps),
React.createElement(Select, __assign({ id: 'select-month', value: month, onChange: dispatchSelectChangeEvent(setMonth) }, commonSelectProps, { MenuProps: {
style: {
maxHeight: menuMaxHeight
}
} }),
React.createElement(MenuItem, { className: 'header', value: 0 }, "Month"),
monthOptions.map(function (month, index) {
return React.createElement(MenuItem, { key: "month-".concat(month), value: index + 1, dense: true }, month);
}))),
React.createElement(Grid, { xs: 4 },
React.createElement(Select, __assign({ id: 'select-year', value: year, onChange: dispatchSelectChangeEvent(setYear) }, commonSelectProps),
React.createElement(Select, __assign({ id: 'select-year', value: year, onChange: dispatchSelectChangeEvent(setYear) }, commonSelectProps, { MenuProps: {
style: {
maxHeight: menuMaxHeight
}
} }),
React.createElement(MenuItem, { className: 'header', value: 0 }, "Year"),
yearOptions.map(function (year) {
return React.createElement(MenuItem, { key: "year-".concat(year), value: year, dense: true }, year);
Expand Down
16 changes: 16 additions & 0 deletions src/components/form/DateField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const DateField: React.FC<DateFieldProps> = ({
const [month, setMonth] = React.useState(0);
const [year, setYear] = React.useState(0);
const [isDateValid, setIsDateValid] = React.useState(true);
const menuMaxHeight = 400;

const fieldConfig: FieldConfig<Date> = {
type: 'date',
Expand Down Expand Up @@ -141,6 +142,11 @@ const DateField: React.FC<DateFieldProps> = ({
value={day}
onChange={dispatchSelectChangeEvent(setDay)}
{...commonSelectProps}
MenuProps={{
style: {
maxHeight: menuMaxHeight
}
}}
>
<MenuItem className='header' value={0}>
Day
Expand All @@ -158,6 +164,11 @@ const DateField: React.FC<DateFieldProps> = ({
value={month}
onChange={dispatchSelectChangeEvent(setMonth)}
{...commonSelectProps}
MenuProps={{
style: {
maxHeight: menuMaxHeight
}
}}
>
<MenuItem className='header' value={0}>
Month
Expand All @@ -175,6 +186,11 @@ const DateField: React.FC<DateFieldProps> = ({
value={year}
onChange={dispatchSelectChangeEvent(setYear)}
{...commonSelectProps}
MenuProps={{
style: {
maxHeight: menuMaxHeight
}
}}
>
<MenuItem className='header' value={0}>
Year
Expand Down

0 comments on commit 2d402d3

Please sign in to comment.