How to use

clamp

function

in

lodash

export default function Wheel() {
 const [{ clampY, localY }, set] = useSpring(() => ({ clampY: 0, localY: 0 }))

 const bind = useWheel(
  ({ first, local: [, ly], delta: [, dy], memo = clampY.getValue() }) => {
   set({ clampY: clamp(dy + memo, -500, 500), localY: ly, immediate: true })
   return memo
  }
 )
 return (
  <div className="wheel" {...bind()}>
   <animated.div>{clampY}</animated.div>
   <animated.div>{localY}</animated.div>
  </div>
 )
}

const DraggableList = ({items}) => {
  const order = useRef(items.map((_, index) => index)) // Store indicies as a local ref, this represents the item order

  const [springs, setSprings] = useSprings(items.length, fn(order.current)) // Create springs, each corresponds to an item, controlling its transform, scale, etc.
  const bind = useGesture(({ args: [originalIndex], down, delta: [, y] }) => {
    const curIndex = order.current.indexOf(originalIndex)
    const curRow = clamp(Math.round((curIndex * 100 + y) / 100), 0, items.length - 1)
    const newOrder = swap(order.current, curIndex, curRow)
    setSprings(fn(newOrder, down, originalIndex, curIndex, y)) // Feed springs new style data, they'll animate the view without causing a single render
    if (!down) order.current = newOrder
  });

  return (
    <div className="content" style={{ height: items.length * 100 }}>
      {springs.map(({ zIndex, shadow, y, scale }, i) => (
        <animated.div
          {...bind(i)}
          key={i}
          style={{
            zIndex,
            boxShadow: shadow.interpolate(s => `rgba(0, 0, 0, 0.15) 0px ${s}px ${2 * s}px 0px`),
            transform: interpolate([y, scale], (y, s) => `translate3d(0,${y}px,0) scale(${s})`)
          }}
          children={items[i]}
        />
      ))}
    </div>
  )
}

export default function Boundaries() {
 const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
 const bind = useDrag(
  ({ movement: [mx, my], memo = [x.getValue(), y.getValue()] }) => {
   const [top, right, bottom, left] = boundaries
   set({
    x: clamp(memo[0] + mx, left, right),
    y: clamp(memo[1] + my, top, bottom),
   })
   return memo
  }
 )
 return (
  <div className="flex-content boundaries">
   <div>
    <animated.div {...bind()} style={{ x, y }} />
   </div>
  </div>
 )
}

const bind = useDrag(({ args: [originalIndex], down, movement: [, y] }) => {
 const curIndex = order.current.indexOf(originalIndex)
 const curRow = clamp(
  Math.round((curIndex * 100 + y) / 100),
  0,

if (down && distance > window.innerWidth / 2)
 cancel(
  (index.current = clamp(
   index.current + (xDir > 0 ? -1 : 1),
   0,

const moveItem = originalIndex => (active, translateY) => {
 const curIndex = order.current.indexOf(originalIndex);
 const curRow = clamp(
  Math.round((curIndex * 100 + translateY) / 100),
  0,