|
|
@ -13,7 +13,13 @@ function clamp(value, min, max) {
|
|
|
|
return value
|
|
|
|
return value
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default function WidthHandler({ onChange, onChangeComplete, innerRef, paddingHorizontal }) {
|
|
|
|
export default function WidthHandler({
|
|
|
|
|
|
|
|
innerRef,
|
|
|
|
|
|
|
|
onChange,
|
|
|
|
|
|
|
|
onChangeComplete,
|
|
|
|
|
|
|
|
paddingHorizontal,
|
|
|
|
|
|
|
|
paddingVertical,
|
|
|
|
|
|
|
|
}) {
|
|
|
|
const startX = React.useRef(null)
|
|
|
|
const startX = React.useRef(null)
|
|
|
|
const startWidth = React.useRef(null)
|
|
|
|
const startWidth = React.useRef(null)
|
|
|
|
|
|
|
|
|
|
|
@ -60,8 +66,8 @@ export default function WidthHandler({ onChange, onChangeComplete, innerRef, pad
|
|
|
|
z-index: 2;
|
|
|
|
z-index: 2;
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
background-color: ${COLORS.BLUE};
|
|
|
|
background-color: ${COLORS.BLUE};
|
|
|
|
top: ${paddingHorizontal};
|
|
|
|
top: ${paddingVertical};
|
|
|
|
bottom: ${paddingHorizontal};
|
|
|
|
bottom: ${paddingVertical};
|
|
|
|
right: ${paddingHorizontal};
|
|
|
|
right: ${paddingHorizontal};
|
|
|
|
width: 8px;
|
|
|
|
width: 8px;
|
|
|
|
cursor: ew-resize;
|
|
|
|
cursor: ew-resize;
|
|
|
|