This commit is contained in:
Nathan Bierema 2020-08-15 17:21:26 -04:00
parent 5437311620
commit 51c73ad0b3
2 changed files with 158 additions and 153 deletions

View File

@ -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 });
}
}
};
}

View File

@ -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
);
}