Open2024/04/11にコメント追加4

@yamada-ui/Swipeableの記録

Yamada UI

108えん

参考

108えん

Viewがdivみたいなやつらしい。でonLayoutのnativeEventで要素のxの位置とってそう

幅は？
このViewでとってるのは境界のいち？

108えん

境界位置っぽい
leftの要素はleftWidthに入れてる

rightの要素はrightOffsetに入れてる

108えん

一旦こんな感じで本来のwidthは取れる

swipeable-right-action.tsx

  const rightRef = useRef<HTMLDivElement>(null)
  const rightWidth = rightRef?.current?.offsetWidth ?? 0
  useEffect(() => console.log(`width:${rightWidth}`), [rightWidth])

  return (
    <motion.div
      className={cx("ui-swipeable__left-action", className)}
      ref={ref}
      style={{
        position: "absolute",
        top: 0,
        right: 0,
        height,
        width,
        overflow: "hidden",
      }}
    >
      <ui.div
        __css={{
          zIndex: -1,
          w: "100%",
          h: "100%",
          whiteSpace: "nowrap",
          display: "flex",
          justifyContent: "flex-end",
          alignItems: "center",
          background: "red.500",
          px: 4,
          ...styles.swipeableRightAction,
        }}
        {...rest}
        onClick={() => {
          setDirection("none")
        }}
      >
        <ui.div ref={rightRef} width="fit-content">
          {resolvedChildren}
        </ui.div>
      </ui.div>
    </motion.div>
  )
})