test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-01 11:28:30 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #320 from 2betop/master

Browse Source 
小优化
This commit is contained in:
liaoxuezhi 2019-10-31 14:53:06 +08:00 committed by GitHub
commit a660b1d793
7 changed files with 73 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
scss/components/_modal.scss
View File

@ -7,6 +7,20 @@
}
}
@keyframes modalIn {
from {
opacity: 0;
transform: translate3d(0, -300px, 0) scale(0.2);
}
}
@keyframes modalOut {
to {
opacity: 0;
transform: translate3d(0, -300px, 0) scale(0.2);
}
}
.#{$ns}Modal {
position: fixed;
top: 0;
@ -35,18 +49,30 @@
border: $Modal-content-borderWidth solid $Modal-content-borderColor;
border-radius: $Modal-content-borderRadius;
transition: ease-out all 0.3s;
transform: translateY(-300px) scale(0.2);
opacity: 0;
// transition: ease-out all 0.3s;
// transform: translateY(-300px) scale(0.2);
// opacity: 0;
&.in,
&.out {
// opacity: 1;
// transform: translateY(0) scale(1);
animation-duration: 0.35s;
animation-fill-mode: both;
}
&.in {
opacity: 1;
transform: translateY(0) scale(1);
animation-name: modalIn;
}
&.out {
animation-name: modalOut;
}
}
&-overlay {
transition: ease-out opacity 0.3s;
transition: ease-in-out opacity 0.5s;
// transition-delay: 0.2s;
position: fixed;
top: 0;
right: 0;
@ -59,6 +85,10 @@
&.in {
opacity: 1;
}
&.out {
opacity: 0;
}
}
&-header {
@ -105,7 +135,7 @@
}
}
&-content > &-close {
&-content>&-close {
position: absolute;
right: $gap-md;
top: $gap-sm;
@ -113,13 +143,12 @@
}
&-body {
padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX
$Modal-body-paddingY;
padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX $Modal-body-paddingY;
flex-basis: 0;
flex-grow: 1;
}
&-header + &-body {
&-header+&-body {
padding-top: $Modal-body-paddingY;
}
@ -146,9 +175,7 @@
@for $i from (2) through 10 {
.#{$ns}Modal--#{$i}th {
.#{$ns}Modal-content {
margin-top: $Modal-content-startMarginTop +
($i - 1) *
$Modal-content-stepMarginTop;
margin-top: $Modal-content-startMarginTop + ($i - 1) * $Modal-content-stepMarginTop;
}
}
}
@ -187,4 +214,4 @@
.#{$ns}Dialog-error {
color: $danger;
}
}

1
scss/components/_spinner.scss
View File

@ -44,6 +44,7 @@
// 当启用 overlay 的时候，应该是居中模式。
.#{$ns}Spinner--overlay {
position: absolute;
z-index: 11;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);

10
scss/components/form/_image.scss
View File

@ -1,4 +1,6 @@
.#{$ns}ImageControl {
position: relative;
&-dropzone {
outline: none;
}
@ -39,9 +41,15 @@
&-pasteTip {
display: block;
position: absolute;
color: $text--muted-color;
font-size: 12px;
margin-top: 10px;
transform: scale(0.8);
transform-origin: 100% 100%;
right: 0;
bottom: 0;
padding: 2px 5px;
background: rgba(255, 255, 255, 0.8);
}
&-dropzone:focus &-addBtn {

9
src/components/Modal.tsx
View File

@ -5,7 +5,7 @@
*/
import React from 'react';
import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
import Transition, {ENTERED, ENTERING, EXITING} from 'react-transition-group/Transition';
import {Portal} from 'react-overlays';
import cx from 'classnames';
import {current, addModal, removeModal} from './ModalManager';
@ -30,7 +30,8 @@ const fadeStyles: {
[propName: string]: string;
} = {
[ENTERING]: 'in',
[ENTERED]: 'in'
[ENTERED]: 'in',
[EXITING]: 'out'
};
export class Modal extends React.Component<ModalProps, ModalState> {
static defaultProps = {
@ -86,12 +87,12 @@ export class Modal extends React.Component<ModalProps, ModalState> {
mountOnEnter
unmountOnExit
in={show}
timeout={350}
timeout={1000}
onExited={this.handleExited}
onEntered={this.handleEntered}
>
{(status: string) => {
if (status === ENTERING) {
if (status === ENTERING || status === EXITING) {
// force reflow
// 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
// 否则看不到动画。

2
src/components/Spinner.tsx
View File

@ -47,7 +47,7 @@ export class Spinner extends React.Component<SpinnerProps, object> {
// force reflow
// 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
// 否则看不到动画。
this.div.current!.offsetWidth;
// this.div.current!.offsetWidth;
this.overlay.current && this.overlay.current.offsetWidth;
}

22
src/renderers/Form/Combo.tsx
View File

@ -277,8 +277,14 @@ export default class ComboControl extends React.Component<ComboProps> {
store.forms.forEach(item => item.items.forEach(item => item.unique && item.syncOptions()));
}
handleSingleFormChange(values: object) {
this.props.onChange({
...values
});
}
handleFormInit(index: number, values: any) {
const {syncDefaultValue, disabled} = this.props;
const {syncDefaultValue, disabled, flat, joinValues, delimiter} = this.props;
if (syncDefaultValue === false || disabled) {
return;
@ -286,20 +292,14 @@ export default class ComboControl extends React.Component<ComboProps> {
let value = this.getValueAsArray();
value.splice(index, 1, {
...value[index],
...values
});
value[index] = flat ? values.flat : {...values};
if (flat && joinValues) {
value = value.join(delimiter || ',');
}
this.props.onChange(value);
}
handleSingleFormChange(values: object) {
this.props.onChange({
...values
});
}
handleSingleFormInit(values: any) {
this.props.syncDefaultValue !== false &&
this.props.setPrinstineValue &&

8
src/renderers/Form/FieldSet.tsx
View File

@ -8,6 +8,7 @@ export interface FieldSetProps extends RendererProps {
collapsed?: boolean;
mode?: 'normal' | 'inline' | 'horizontal' | 'row';
size?: 'xs' | 'sm' | 'md' | 'lg' | 'base';
formClassName?: string;
collapsable?: boolean;
horizontal: {
left: string;
@ -39,7 +40,8 @@ export default class FieldSetControl extends React.Component<FieldSetProps, any>
formMode,
$path,
classnames: cx,
store
store,
formClassName
} = this.props;
if (!controls) {
@ -48,7 +50,7 @@ export default class FieldSetControl extends React.Component<FieldSetProps, any>
let props: any = {
store,
data: store.data,
data: store!.data,
render
};
mode && (props.mode = mode);
@ -56,7 +58,7 @@ export default class FieldSetControl extends React.Component<FieldSetProps, any>
horizontal && (props.horizontal = horizontal);
return (
<div className={cx(`Form--${props.mode || formMode || 'normal'}`)}>
<div className={cx(`Form--${props.mode || formMode || 'normal'}`, formClassName)}>
{renderFormItems({controls}, ($path as string).replace(/^.*form\//, ''), props)}
</div>
);