mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-25 15:40:06 +03:00
fix
This commit is contained in:
parent
5437311620
commit
51c73ad0b3
290
packages/react-dock/src/Dock.js
vendored
290
packages/react-dock/src/Dock.js
vendored
|
@ -5,7 +5,7 @@ import autoprefix from './autoprefix';
|
|||
|
||||
function autoprefixes(styles) {
|
||||
return Object.keys(styles).reduce(
|
||||
(obj, key) => (obj[key] = autoprefix(styles[key]), obj),
|
||||
(obj, key) => ((obj[key] = autoprefix(styles[key])), obj),
|
||||
{}
|
||||
);
|
||||
}
|
||||
|
@ -16,7 +16,7 @@ const styles = autoprefixes({
|
|||
width: 0,
|
||||
height: 0,
|
||||
top: 0,
|
||||
left: 0
|
||||
left: 0,
|
||||
},
|
||||
|
||||
dim: {
|
||||
|
@ -27,19 +27,19 @@ const styles = autoprefixes({
|
|||
bottom: 0,
|
||||
zIndex: 0,
|
||||
background: 'rgba(0, 0, 0, 0.2)',
|
||||
opacity: 1
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
dimAppear: {
|
||||
opacity: 0
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
dimTransparent: {
|
||||
pointerEvents: 'none'
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
dimHidden: {
|
||||
opacity: 0
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
dock: {
|
||||
|
@ -50,33 +50,34 @@ const styles = autoprefixes({
|
|||
left: 0,
|
||||
top: 0,
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
height: '100%',
|
||||
},
|
||||
|
||||
dockHidden: {
|
||||
opacity: 0
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
dockResizing: {
|
||||
transition: 'none'
|
||||
transition: 'none',
|
||||
},
|
||||
|
||||
dockContent: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'auto'
|
||||
overflow: 'auto',
|
||||
},
|
||||
|
||||
resizer: {
|
||||
position: 'absolute',
|
||||
zIndex: 2,
|
||||
opacity: 0
|
||||
}
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
function getTransitions(duration) {
|
||||
return ['left', 'top', 'width', 'height']
|
||||
.map(p => `${p} ${duration/1000}s ease-out`);
|
||||
return ['left', 'top', 'width', 'height'].map(
|
||||
(p) => `${p} ${duration / 1000}s ease-out`
|
||||
);
|
||||
}
|
||||
|
||||
function getDockStyles(
|
||||
|
@ -84,41 +85,37 @@ function getDockStyles(
|
|||
{ size, isResizing, fullWidth, fullHeight }
|
||||
) {
|
||||
let posStyle;
|
||||
const absSize = fluid ?
|
||||
(size * 100) + '%' :
|
||||
size + 'px';
|
||||
const absSize = fluid ? size * 100 + '%' : size + 'px';
|
||||
|
||||
function getRestSize(fullSize) {
|
||||
return fluid ?
|
||||
(100 - size * 100) + '%' :
|
||||
(fullSize - size) + 'px';
|
||||
return fluid ? 100 - size * 100 + '%' : fullSize - size + 'px';
|
||||
}
|
||||
|
||||
switch(position) {
|
||||
case 'left':
|
||||
posStyle = {
|
||||
width: absSize,
|
||||
left: isVisible ? 0 : '-' + absSize
|
||||
};
|
||||
break;
|
||||
case 'right':
|
||||
posStyle = {
|
||||
left: isVisible ? getRestSize(fullWidth) : fullWidth,
|
||||
width: absSize
|
||||
};
|
||||
break;
|
||||
case 'top':
|
||||
posStyle = {
|
||||
top: isVisible ? 0 : '-' + absSize,
|
||||
height: absSize
|
||||
};
|
||||
break;
|
||||
case 'bottom':
|
||||
posStyle = {
|
||||
top: isVisible ? getRestSize(fullHeight) : fullHeight,
|
||||
height: absSize
|
||||
};
|
||||
break;
|
||||
switch (position) {
|
||||
case 'left':
|
||||
posStyle = {
|
||||
width: absSize,
|
||||
left: isVisible ? 0 : '-' + absSize,
|
||||
};
|
||||
break;
|
||||
case 'right':
|
||||
posStyle = {
|
||||
left: isVisible ? getRestSize(fullWidth) : fullWidth,
|
||||
width: absSize,
|
||||
};
|
||||
break;
|
||||
case 'top':
|
||||
posStyle = {
|
||||
top: isVisible ? 0 : '-' + absSize,
|
||||
height: absSize,
|
||||
};
|
||||
break;
|
||||
case 'bottom':
|
||||
posStyle = {
|
||||
top: isVisible ? getRestSize(fullHeight) : fullHeight,
|
||||
height: absSize,
|
||||
};
|
||||
break;
|
||||
}
|
||||
|
||||
const transitions = getTransitions(duration);
|
||||
|
@ -128,8 +125,10 @@ function getDockStyles(
|
|||
autoprefix({
|
||||
transition: [
|
||||
...transitions,
|
||||
!isVisible && `opacity 0.01s linear ${duration/1000}s`
|
||||
].filter(t => t).join(',')
|
||||
!isVisible && `opacity 0.01s linear ${duration / 1000}s`,
|
||||
]
|
||||
.filter((t) => t)
|
||||
.join(','),
|
||||
}),
|
||||
dockStyle,
|
||||
autoprefix(posStyle),
|
||||
|
@ -152,7 +151,7 @@ function getDimStyles(
|
|||
dimMode === 'transparent' && styles.dimTransparent,
|
||||
!isVisible && styles.dimHidden,
|
||||
isTransitionStarted && isVisible && styles.dimAppear,
|
||||
isTransitionStarted && !isVisible && styles.dimDisappear
|
||||
isTransitionStarted && !isVisible && styles.dimDisappear,
|
||||
];
|
||||
}
|
||||
|
||||
|
@ -160,55 +159,50 @@ function getResizerStyles(position) {
|
|||
let resizerStyle;
|
||||
const size = 10;
|
||||
|
||||
switch(position) {
|
||||
case 'left':
|
||||
resizerStyle = {
|
||||
right: -size / 2,
|
||||
width: size,
|
||||
top: 0,
|
||||
height: '100%',
|
||||
cursor: 'col-resize'
|
||||
};
|
||||
break;
|
||||
case 'right':
|
||||
resizerStyle = {
|
||||
left: -size / 2,
|
||||
width: size,
|
||||
top: 0,
|
||||
height: '100%',
|
||||
cursor: 'col-resize'
|
||||
};
|
||||
break;
|
||||
case 'top':
|
||||
resizerStyle = {
|
||||
bottom: -size / 2,
|
||||
height: size,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
cursor: 'row-resize'
|
||||
};
|
||||
break;
|
||||
case 'bottom':
|
||||
resizerStyle = {
|
||||
top: -size / 2,
|
||||
height: size,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
cursor: 'row-resize'
|
||||
};
|
||||
break;
|
||||
switch (position) {
|
||||
case 'left':
|
||||
resizerStyle = {
|
||||
right: -size / 2,
|
||||
width: size,
|
||||
top: 0,
|
||||
height: '100%',
|
||||
cursor: 'col-resize',
|
||||
};
|
||||
break;
|
||||
case 'right':
|
||||
resizerStyle = {
|
||||
left: -size / 2,
|
||||
width: size,
|
||||
top: 0,
|
||||
height: '100%',
|
||||
cursor: 'col-resize',
|
||||
};
|
||||
break;
|
||||
case 'top':
|
||||
resizerStyle = {
|
||||
bottom: -size / 2,
|
||||
height: size,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
cursor: 'row-resize',
|
||||
};
|
||||
break;
|
||||
case 'bottom':
|
||||
resizerStyle = {
|
||||
top: -size / 2,
|
||||
height: size,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
cursor: 'row-resize',
|
||||
};
|
||||
break;
|
||||
}
|
||||
|
||||
return [
|
||||
styles.resizer,
|
||||
autoprefix(resizerStyle)
|
||||
];
|
||||
return [styles.resizer, autoprefix(resizerStyle)];
|
||||
}
|
||||
|
||||
function getFullSize(position, fullWidth, fullHeight) {
|
||||
return position === 'left' || position === 'right' ?
|
||||
fullWidth :
|
||||
fullHeight;
|
||||
return position === 'left' || position === 'right' ? fullWidth : fullHeight;
|
||||
}
|
||||
|
||||
export default class Dock extends Component {
|
||||
|
@ -218,10 +212,10 @@ export default class Dock extends Component {
|
|||
isControlled: typeof props.size !== 'undefined',
|
||||
size: props.size || props.defaultSize,
|
||||
isDimHidden: !props.isVisible,
|
||||
fullWidth: typeof(window) !== 'undefined' && window.innerWidth,
|
||||
fullHeight: typeof(window) !== 'undefined' && window.innerHeight,
|
||||
fullWidth: typeof window !== 'undefined' && window.innerWidth,
|
||||
fullHeight: typeof window !== 'undefined' && window.innerHeight,
|
||||
isTransitionStarted: false,
|
||||
isWindowResizing: false
|
||||
isWindowResizing: false,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -237,8 +231,8 @@ export default class Dock extends Component {
|
|||
onSizeChange: PropTypes.func,
|
||||
dimStyle: PropTypes.object,
|
||||
dockStyle: PropTypes.object,
|
||||
duration: PropTypes.number
|
||||
}
|
||||
duration: PropTypes.number,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
position: 'left',
|
||||
|
@ -246,8 +240,8 @@ export default class Dock extends Component {
|
|||
fluid: true,
|
||||
defaultSize: 0.3,
|
||||
dimMode: 'opaque',
|
||||
duration: 200
|
||||
}
|
||||
duration: 200,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('mouseup', this.handleMouseUp);
|
||||
|
@ -265,7 +259,7 @@ export default class Dock extends Component {
|
|||
window.removeEventListener('resize', this.handleResize);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
const isControlled = typeof nextProps.size !== 'undefined';
|
||||
|
||||
this.setState({ isControlled });
|
||||
|
@ -278,7 +272,7 @@ export default class Dock extends Component {
|
|||
|
||||
if (this.props.isVisible !== nextProps.isVisible) {
|
||||
this.setState({
|
||||
isTransitionStarted: true
|
||||
isTransitionStarted: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -287,9 +281,9 @@ export default class Dock extends Component {
|
|||
const { fullWidth, fullHeight } = this.state;
|
||||
|
||||
this.setState({
|
||||
size: props.fluid ?
|
||||
this.state.size / getFullSize(props.position, fullWidth, fullHeight) :
|
||||
getFullSize(props.position, fullWidth, fullHeight) * this.state.size
|
||||
size: props.fluid
|
||||
? this.state.size / getFullSize(props.position, fullWidth, fullHeight)
|
||||
: getFullSize(props.position, fullWidth, fullHeight) * this.state.size,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -307,40 +301,44 @@ export default class Dock extends Component {
|
|||
|
||||
transitionEnd = () => {
|
||||
this.setState({ isTransitionStarted: false });
|
||||
}
|
||||
};
|
||||
|
||||
hideDim = () => {
|
||||
if (!this.props.isVisible) {
|
||||
this.setState({ isDimHidden: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children, zIndex, dimMode, position, isVisible } = this.props;
|
||||
const { isResizing, size, isDimHidden } = this.state;
|
||||
|
||||
const dimStyles = Object.assign({}, ...getDimStyles(this.props, this.state));
|
||||
const dockStyles = Object.assign({}, ...getDockStyles(this.props, this.state));
|
||||
const dimStyles = Object.assign(
|
||||
{},
|
||||
...getDimStyles(this.props, this.state)
|
||||
);
|
||||
const dockStyles = Object.assign(
|
||||
{},
|
||||
...getDockStyles(this.props, this.state)
|
||||
);
|
||||
const resizerStyles = Object.assign({}, ...getResizerStyles(position));
|
||||
|
||||
return (
|
||||
<div style={Object.assign({}, styles.wrapper, { zIndex })}>
|
||||
{dimMode !== 'none' && !isDimHidden &&
|
||||
{dimMode !== 'none' && !isDimHidden && (
|
||||
<div style={dimStyles} onClick={this.handleDimClick} />
|
||||
}
|
||||
)}
|
||||
<div style={dockStyles}>
|
||||
<div style={resizerStyles}
|
||||
onMouseDown={this.handleMouseDown} />
|
||||
<div style={resizerStyles} onMouseDown={this.handleMouseDown} />
|
||||
<div style={styles.dockContent}>
|
||||
{typeof children === 'function' ?
|
||||
children({
|
||||
position,
|
||||
isResizing,
|
||||
size,
|
||||
isVisible
|
||||
}) :
|
||||
children
|
||||
}
|
||||
{typeof children === 'function'
|
||||
? children({
|
||||
position,
|
||||
isResizing,
|
||||
size,
|
||||
isVisible,
|
||||
})
|
||||
: children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -351,7 +349,7 @@ export default class Dock extends Component {
|
|||
if (this.props.dimMode === 'opaque') {
|
||||
this.props.onVisibleChange && this.props.onVisibleChange(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleResize = () => {
|
||||
if (window.requestAnimationFrame) {
|
||||
|
@ -359,7 +357,7 @@ export default class Dock extends Component {
|
|||
} else {
|
||||
this.updateWindowSize(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
updateWindowSize = (windowResize) => {
|
||||
const sizeState = {
|
||||
|
@ -371,37 +369,37 @@ export default class Dock extends Component {
|
|||
this.setState({
|
||||
...sizeState,
|
||||
isResizing: true,
|
||||
isWindowResizing: windowResize
|
||||
isWindowResizing: windowResize,
|
||||
});
|
||||
|
||||
this.debouncedUpdateWindowSizeEnd();
|
||||
} else {
|
||||
this.setState(sizeState);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
updateWindowSizeEnd = () => {
|
||||
this.setState({
|
||||
isResizing: false,
|
||||
isWindowResizing: false
|
||||
isWindowResizing: false,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
debouncedUpdateWindowSizeEnd = debounce(this.updateWindowSizeEnd, 30)
|
||||
debouncedUpdateWindowSizeEnd = debounce(this.updateWindowSizeEnd, 30);
|
||||
|
||||
handleWrapperLeave = () => {
|
||||
this.setState({ isResizing: false });
|
||||
}
|
||||
};
|
||||
|
||||
handleMouseDown = () => {
|
||||
this.setState({ isResizing: true });
|
||||
}
|
||||
};
|
||||
|
||||
handleMouseUp = () => {
|
||||
this.setState({ isResizing: false });
|
||||
}
|
||||
};
|
||||
|
||||
handleMouseMove = e => {
|
||||
handleMouseMove = (e) => {
|
||||
if (!this.state.isResizing || this.state.isWindowResizing) return;
|
||||
e.preventDefault();
|
||||
|
||||
|
@ -410,19 +408,19 @@ export default class Dock extends Component {
|
|||
const { clientX: x, clientY: y } = e;
|
||||
let size;
|
||||
|
||||
switch(position) {
|
||||
case 'left':
|
||||
size = fluid ? x / fullWidth : x;
|
||||
break;
|
||||
case 'right':
|
||||
size = fluid ? (fullWidth - x) / fullWidth : (fullWidth - x);
|
||||
break;
|
||||
case 'top':
|
||||
size = fluid ? y / fullHeight : y;
|
||||
break;
|
||||
case 'bottom':
|
||||
size = fluid ? (fullHeight - y) / fullHeight : (fullHeight - y);
|
||||
break;
|
||||
switch (position) {
|
||||
case 'left':
|
||||
size = fluid ? x / fullWidth : x;
|
||||
break;
|
||||
case 'right':
|
||||
size = fluid ? (fullWidth - x) / fullWidth : fullWidth - x;
|
||||
break;
|
||||
case 'top':
|
||||
size = fluid ? y / fullHeight : y;
|
||||
break;
|
||||
case 'bottom':
|
||||
size = fluid ? (fullHeight - y) / fullHeight : fullHeight - y;
|
||||
break;
|
||||
}
|
||||
|
||||
this.props.onSizeChange && this.props.onSizeChange(size);
|
||||
|
@ -430,5 +428,5 @@ export default class Dock extends Component {
|
|||
if (!isControlled) {
|
||||
this.setState({ size });
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
21
packages/react-dock/src/autoprefix.js
vendored
21
packages/react-dock/src/autoprefix.js
vendored
|
@ -29,22 +29,29 @@ const vendorSpecificProperties = [
|
|||
'transitionTimingFunction',
|
||||
'perspective',
|
||||
'perspectiveOrigin',
|
||||
'userSelect'
|
||||
'userSelect',
|
||||
];
|
||||
|
||||
const prefixes = ['Moz', 'Webkit', 'ms', 'O'];
|
||||
|
||||
function prefixProp(key, value) {
|
||||
return prefixes.reduce(
|
||||
(obj, pre) => (obj[pre + key[0].toUpperCase() + key.substr(1)] = value, obj),
|
||||
(obj, pre) => (
|
||||
(obj[pre + key[0].toUpperCase() + key.substr(1)] = value), obj
|
||||
),
|
||||
{}
|
||||
);
|
||||
}
|
||||
|
||||
export default function autoprefix(style) {
|
||||
return Object.keys(style).reduce((obj, key) => (
|
||||
vendorSpecificProperties.indexOf(key) !== -1 ? {
|
||||
...obj,
|
||||
...prefixProp(key, style[key])
|
||||
} : obj), style);
|
||||
return Object.keys(style).reduce(
|
||||
(obj, key) =>
|
||||
vendorSpecificProperties.indexOf(key) !== -1
|
||||
? {
|
||||
...obj,
|
||||
...prefixProp(key, style[key]),
|
||||
}
|
||||
: obj,
|
||||
style
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user