fix: 移动端日期、地图细节优化

This commit is contained in:
zhangxulong 2023-06-07 14:13:46 +08:00
parent ee1f6b731a
commit 016ed06fd3
7 changed files with 66 additions and 20 deletions

View File

@ -109,7 +109,8 @@
.#{$ns}CalendarMobile {
height: 100%;
width: 100%;
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
&-pop {
position: fixed;
@ -122,6 +123,11 @@
overflow: hidden;
border-width: 0;
&--quarters,
&--months {
height: px2rem(400px);
}
&--time {
height: px2rem(360px);
max-height: 90vh;
@ -265,12 +271,6 @@
}
}
&-embed {
.#{$ns}CalendarMobile-footer {
width: 90vw;
}
}
&-footer {
flex-shrink: 0;

View File

@ -323,8 +323,6 @@
&.is-mobile {
.#{$ns}Form-item {
padding: px2rem(10px) 0 0 0;
.#{$ns}Form-rowInner {
flex: 1;
}
@ -332,6 +330,12 @@
.#{$ns}Combo-delBtn {
height: px2rem(20px);
padding-top: 0;
}
.#{$ns}Combo-item {
align-items: center;
border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
}
}
@ -342,12 +346,6 @@
border-bottom: var(--Form-input-borderWidth) solid var(--borderColor);
}
}
&.is-mobile:is(.#{$ns}Combo--hor) {
.#{$ns}Form-control {
padding-top: px2rem(10px);
}
}
}
.#{$ns}ComboTabs > .#{$ns}Tabs-links {

View File

@ -511,7 +511,7 @@
.#{$ns}Form-item {
display: flex;
flex-wrap: wrap;
// flex-wrap: wrap;
margin-bottom: 0;
padding: var(--Form-item-mobile-gap) 0;
position: relative;
@ -625,6 +625,7 @@
flex: 1;
flex-wrap: wrap;
font-size: var(--fontSizeLg);
overflow-x: hidden;
.#{$ns}ColorPicker {
height: 100%;
@ -653,7 +654,7 @@
.#{$ns}Form-hint,
.#{$ns}Form-remark,
.#{$ns}Form-static,
// .#{$ns}Form-static,
.#{$ns}Form-group--hor .#{$ns}Form-item,
.#{$ns}SwitchControl,
.#{$ns}CheckboxControl,
@ -663,6 +664,20 @@
padding-bottom: 0;
}
.#{$ns}CheckboxControl {
padding-top: px2rem(2px);
}
.#{$ns}Form-static {
.#{$ns}Progress {
margin-top: px2rem(3px);
}
.#{$ns}Field-quickEditBtn {
vertical-align: baseline;
}
}
.#{$ns}Form-group--horizontal .#{$ns}TextControl-input input {
height: var(--Form-input-height);
}

View File

@ -41,6 +41,12 @@
&.is-mobile {
border: none;
.#{$ns}LocationPicker-toggler {
svg {
top: 0.125rem;
}
}
}
&-placeholder {
@ -55,6 +61,8 @@
margin-right: var(--gap-base);
flex-basis: 0;
flex-grow: 1;
overflow-x: auto;
max-width: calc(100% - px2rem(20px));
}
&-toggler {
@ -110,6 +118,7 @@
&.is-mobile {
flex: 1;
text-align: right;
overflow: hidden;
}
}

View File

@ -323,10 +323,10 @@ export class BaiduMapPicker extends React.Component<
const results = local.getResults();
const poi = results.getPoi(0);
this.setState({
inputValue: poi.title,
inputValue: poi?.title,
sugs: []
});
this.getLocations(poi.point, true);
this.getLocations(poi?.point, true);
}
});
local.search(value);

View File

@ -148,6 +148,7 @@ export class CalendarMobile extends React.Component<
componentDidUpdate(prevProps: CalendarMobileProps) {
const props = this.props;
const {classPrefix: ns} = props;
if (
prevProps.minDate !== props.minDate ||
@ -168,6 +169,28 @@ export class CalendarMobile extends React.Component<
() => this.initMonths()
);
}
if (
(prevProps.startDate !== props.startDate &&
props.startDate !== this.state.startDate) ||
(prevProps.endDate !== props.endDate &&
props.endDate !== this.state.endDate)
) {
this.setState(
{
startDate: props.startDate,
endDate: props.endDate
},
() =>
requestAnimationFrame(() => {
document
.querySelector(
`.${ns}CalendarMobile:not(.${ns}CalendarMobile-embed) .rdtRangeStart:not(.rdtNew)`
)
?.scrollIntoView();
})
);
}
}
componentWillUnmount() {

View File

@ -608,10 +608,11 @@ export default class TagControl extends React.PureComponent<
placeholder: __(placeholder ?? 'Tag.placeholder'),
value: this.state.inputValue,
onKeyDown: this.handleKeyDown,
onFocus: this.handleFocus,
onFocus: !mobileUI ? this.handleFocus : undefined,
onBlur: this.handleBlur,
disabled
})}
onResultClick={mobileUI ? this.handleFocus : undefined}
inputPlaceholder={''}
onChange={this.handleInputChange}
className={cx('TagControl-input')}