@yamada-ui/react/dist/cjs/components/reorder/use-reorder.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"use-reorder.cjs","names":["createContext","useValidChildren","values","mergeRefs","x","y"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  isArray,\n  isObject,\n  mergeRefs,\n  useUpdateEffect,\n  useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n  serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n  isObject(value) || isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n  HTMLMotionProps<\"ul\">,\n  Pick<Parameters<typeof Reorder.Group<Y>>[0], \"axis\" | \"onReorder\" | \"values\">\n>\ntype ReorderItemProps<Y = string> = Merge<\n  HTMLMotionProps<\"li\">,\n  Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" | \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n  name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n  getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n  createContext<ReorderItemContext>({\n    name: \"ReorderItemContext\",\n  })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n  extends Partial<\n      Omit<ReorderGroupProps<Y>, \"children\" | \"onChange\" | \"values\">\n    >,\n    PropsWithChildren {\n  /**\n   * The component to be used for the item.\n   */\n  item?: ReactElement<any>\n  /**\n   * If provided, generate reorder items based on items.\n   *\n   */\n  items?: UseReorderItemProps<Y>[]\n  /**\n   * The orientation of the reorder.\n   *\n   * @default 'vertical'\n   */\n  orientation?: Orientation\n  /**\n   * The callback invoked when reorder items are moved.\n   */\n  onChange?: (values: Y[]) => void\n  /**\n   * The callback invoked when the movement of reorder items is completed.\n   */\n  onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n  ref,\n  children,\n  item,\n  items = [],\n  orientation = \"vertical\",\n  onChange,\n  onCompleteChange,\n  ...rest\n}: UseReorderProps<Y> = {}) => {\n  const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n  const validChildren = useValidChildren(children)\n  const hasChildren = !!validChildren.length\n  const defaultValues = useMemo(() => {\n    const values = hasChildren\n      ? validChildren.map(\n          ({ props }) => props.value ?? getAlternativeValue(props),\n        )\n      : items.map((props) => props.value ?? getAlternativeValue(props))\n\n    const duplicatedValues = values.filter(\n      (value, index, self) =>\n        self.indexOf(value) === index && index !== self.lastIndexOf(value),\n    )\n\n    if (duplicatedValues.length)\n      console.warn(\n        `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n          `', '`,\n        )}' `,\n      )\n\n    return Array.from(new Set(values))\n  }, [hasChildren, validChildren, items])\n  const childMap = useMemo(() => {\n    return Object.fromEntries(\n      validChildren.map((child) => [\n        serializeValue(child.props.value) ??\n          serializeValue(getAlternativeValue(child.props)),\n        child,\n      ]),\n    )\n  }, [validChildren])\n  const itemMap = useMemo(() => {\n    return Object.fromEntries(\n      items.map((props) => [\n        serializeValue(props.value) ??\n          serializeValue(getAlternativeValue(props)),\n        props,\n      ]),\n    )\n  }, [items])\n  const prevDefaultValues = useRef<Y[]>(defaultValues)\n  const [values, setValues] = useState<Y[]>(defaultValues)\n  const prevValues = useRef<Y[]>(defaultValues)\n  const cloneChildren = useMemo(\n    () =>\n      values.map((value) => {\n        if (hasChildren) {\n          return childMap[serializeValue(value)]\n        } else {\n          const props = itemMap[serializeValue(value)]\n\n          return props && item\n            ? cloneElement(item, { key: serializeValue(props.value), ...props })\n            : null\n        }\n      }),\n    [values, hasChildren, childMap, itemMap, item],\n  )\n\n  const onReorder = useCallback(\n    (newValues: Y[]) => {\n      setValues(newValues)\n\n      onChange?.(newValues)\n    },\n    [onChange],\n  )\n\n  const onCompleteReorder = useCallback(() => {\n    const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n    if (equal) return\n\n    prevValues.current = values\n\n    onCompleteChange?.(values)\n  }, [onCompleteChange, values])\n\n  useUpdateEffect(() => {\n    const equal =\n      JSON.stringify(defaultValues) ===\n      JSON.stringify(prevDefaultValues.current)\n\n    if (equal) return\n\n    prevValues.current = defaultValues\n    prevDefaultValues.current = defaultValues\n\n    setValues(defaultValues)\n  }, [defaultValues])\n\n  const getRootProps: PropGetter<\n    Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n    undefined,\n    ReorderGroupProps<Y>\n  > = useCallback(\n    (props = {}) => ({\n      axis,\n      values,\n      ...rest,\n      ...props,\n      ref: mergeRefs(props.ref, ref),\n      onMouseUp: handlerAll(props.onMouseUp, rest.onMouseUp, onCompleteReorder),\n      onReorder: handlerAll(props.onReorder, rest.onReorder, onReorder),\n      onTouchEnd: handlerAll(\n        props.onTouchEnd,\n        rest.onTouchEnd,\n        onCompleteReorder,\n      ),\n    }),\n    [rest, ref, onCompleteReorder, onReorder, axis, values],\n  )\n\n  return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n  /**\n   * The label of the reorder item.\n   */\n  label?: ReactNode\n  /**\n   * The value of the reorder item.\n   */\n  value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n  ref,\n  label,\n  value,\n  ...rest\n}: UseReorderItemProps<Y>) => {\n  const { orientation } = useReorderContext()\n  const dragControls = useDragControls()\n  const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n  const [drag, setDrag] = useState<boolean>(false)\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n\n  const register = useCallback(\n    (node: HTMLElement | null) => setHasTrigger(!!node),\n    [],\n  )\n\n  useEffect(() => {\n    const unsubscribeX = x.on(\"change\", (x) => {\n      if (orientation === \"horizontal\") setDrag(x !== 0)\n    })\n    const unsubscribeY = y.on(\"change\", (y) => {\n      if (orientation === \"vertical\") setDrag(y !== 0)\n    })\n\n    return () => {\n      unsubscribeX()\n      unsubscribeY()\n    }\n  }, [orientation, x, y])\n\n  const getItemProps: PropGetter<\n    Omit<HTMLMotionProps<\"li\">, \"layout\" | \"value\"> &\n      Pick<ReorderItemProps<Y>, \"layout\">,\n    undefined,\n    ReorderItemProps<Y>\n  > = useCallback(\n    (props = {}) => {\n      const children = props.children ?? rest.children ?? label\n\n      return {\n        \"data-has-trigger\": dataAttr(hasTrigger),\n        \"data-selected\": dataAttr(drag),\n        dragControls,\n        dragListener: !hasTrigger,\n        value: value ?? getAlternativeValue({ children }),\n        ...props,\n        ...rest,\n        ref: mergeRefs(props.ref, ref),\n        style: { x, y, ...props.style, ...rest.style },\n        children,\n      }\n    },\n    [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n  )\n\n  const getTriggerProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...props,\n      ref: mergeRefs(register, props.ref),\n      \"data-selected\": dataAttr(drag),\n      onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n        dragControls.start(ev),\n      ),\n    }),\n    [drag, dragControls, register],\n  )\n\n  return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n  typeof useReorderItem<Y>\n>\n"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAM,uBAAuB,EAAE,UAAU,UAAgB,EAAE,KACzD,eAAe,YAAY,MAAM;AAEnC,MAAM,kBAAkB,0DACb,MAAM,mDAAY,MAAM,GAAG,KAAK,UAAU,MAAM,GAAG;AAa9D,MAAM,CAAC,gBAAgB,qBAAqBA,8BAA8B,EACxE,MAAM,kBACP,CAAC;AAQF,MAAM,CAAC,oBAAoB,yBACzBA,8BAAkC,EAChC,MAAM,sBACP,CAAC;AAkCJ,MAAa,cAA0B,EACrC,KACA,UACA,MACA,QAAQ,EAAE,EACV,cAAc,YACd,UACA,iBACA,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,OAAO,gBAAgB,aAAa,MAAM;CAChD,MAAM,gBAAgBC,kCAAiB,SAAS;CAChD,MAAM,cAAc,CAAC,CAAC,cAAc;CACpC,MAAM,yCAA8B;EAClC,MAAMC,WAAS,cACX,cAAc,KACX,EAAE,YAAY,MAAM,SAAS,oBAAoB,MAAM,CACzD,GACD,MAAM,KAAK,UAAU,MAAM,SAAS,oBAAoB,MAAM,CAAC;EAEnE,MAAM,mBAAmBA,SAAO,QAC7B,OAAO,OAAO,SACb,KAAK,QAAQ,MAAM,KAAK,SAAS,UAAU,KAAK,YAAY,MAAM,CACrE;AAED,MAAI,iBAAiB,OACnB,SAAQ,KACN,mFAAmF,iBAAiB,KAClG,OACD,CAAC,IACH;AAEH,SAAO,MAAM,KAAK,IAAI,IAAIA,SAAO,CAAC;IACjC;EAAC;EAAa;EAAe;EAAM,CAAC;CACvC,MAAM,oCAAyB;AAC7B,SAAO,OAAO,YACZ,cAAc,KAAK,UAAU,CAC3B,eAAe,MAAM,MAAM,MAAM,IAC/B,eAAe,oBAAoB,MAAM,MAAM,CAAC,EAClD,MACD,CAAC,CACH;IACA,CAAC,cAAc,CAAC;CACnB,MAAM,mCAAwB;AAC5B,SAAO,OAAO,YACZ,MAAM,KAAK,UAAU,CACnB,eAAe,MAAM,MAAM,IACzB,eAAe,oBAAoB,MAAM,CAAC,EAC5C,MACD,CAAC,CACH;IACA,CAAC,MAAM,CAAC;CACX,MAAM,sCAAgC,cAAc;CACpD,MAAM,CAAC,QAAQ,iCAA2B,cAAc;CACxD,MAAM,+BAAyB,cAAc;CAC7C,MAAM,yCAEF,OAAO,KAAK,UAAU;AACpB,MAAI,YACF,QAAO,SAAS,eAAe,MAAM;OAChC;GACL,MAAM,QAAQ,QAAQ,eAAe,MAAM;AAE3C,UAAO,SAAS,+BACC,MAAM;IAAE,KAAK,eAAe,MAAM,MAAM;IAAE,GAAG;IAAO,CAAC,GAClE;;GAEN,EACJ;EAAC;EAAQ;EAAa;EAAU;EAAS;EAAK,CAC/C;CAED,MAAM,oCACH,cAAmB;AAClB,YAAU,UAAU;AAEpB,aAAW,UAAU;IAEvB,CAAC,SAAS,CACX;CAED,MAAM,iDAAsC;AAG1C,MAFc,KAAK,UAAU,WAAW,QAAQ,KAAK,KAAK,UAAU,OAAO,CAEhE;AAEX,aAAW,UAAU;AAErB,qBAAmB,OAAO;IACzB,CAAC,kBAAkB,OAAO,CAAC;AAE9B,sCAAsB;AAKpB,MAHE,KAAK,UAAU,cAAc,KAC7B,KAAK,UAAU,kBAAkB,QAAQ,CAEhC;AAEX,aAAW,UAAU;AACrB,oBAAkB,UAAU;AAE5B,YAAU,cAAc;IACvB,CAAC,cAAc,CAAC;AAwBnB,QAAO;EAAE,UAAU;EAAe;EAAa;EAAQ,sCAjBpD,QAAQ,EAAE,MAAM;GACf;GACA;GACA,GAAG;GACH,GAAG;GACH,KAAKC,sBAAU,MAAM,KAAK,IAAI;GAC9B,6DAAsB,MAAM,WAAW,KAAK,WAAW,kBAAkB;GACzE,6DAAsB,MAAM,WAAW,KAAK,WAAW,UAAU;GACjE,8DACE,MAAM,YACN,KAAK,YACL,kBACD;GACF,GACD;GAAC;GAAM;GAAK;GAAmB;GAAW;GAAM;GAAO,CACxD;EAEoE;;AAgBvE,MAAa,kBAA8B,EACzC,KACA,OACA,MACA,GAAG,WACyB;CAC5B,MAAM,EAAE,gBAAgB,mBAAmB;CAC3C,MAAM,kDAAgC;CACtC,MAAM,CAAC,YAAY,qCAAmC,MAAM;CAC5D,MAAM,CAAC,MAAM,+BAA6B,MAAM;CAChD,MAAM,qCAAmB,EAAE;CAC3B,MAAM,qCAAmB,EAAE;CAE3B,MAAM,mCACH,SAA6B,cAAc,CAAC,CAAC,KAAK,EACnD,EAAE,CACH;AAED,4BAAgB;EACd,MAAM,eAAe,EAAE,GAAG,WAAW,QAAM;AACzC,OAAI,gBAAgB,aAAc,SAAQC,QAAM,EAAE;IAClD;EACF,MAAM,eAAe,EAAE,GAAG,WAAW,QAAM;AACzC,OAAI,gBAAgB,WAAY,SAAQC,QAAM,EAAE;IAChD;AAEF,eAAa;AACX,iBAAc;AACd,iBAAc;;IAEf;EAAC;EAAa;EAAG;EAAE,CAAC;AAuCvB,QAAO;EAAE,sCA/BN,QAAQ,EAAE,KAAK;GACd,MAAM,WAAW,MAAM,YAAY,KAAK,YAAY;AAEpD,UAAO;IACL,oEAA6B,WAAW;IACxC,iEAA0B,KAAK;IAC/B;IACA,cAAc,CAAC;IACf,OAAO,SAAS,oBAAoB,EAAE,UAAU,CAAC;IACjD,GAAG;IACH,GAAG;IACH,KAAKF,sBAAU,MAAM,KAAK,IAAI;IAC9B,OAAO;KAAE;KAAG;KAAG,GAAG,MAAM;KAAO,GAAG,KAAK;KAAO;IAC9C;IACD;KAEH;GAAC;GAAK;GAAM;GAAc;GAAY;GAAO;GAAG;GAAG;GAAM;GAAM,CAChE;EAcsB,yCAXpB,QAAQ,EAAE,MAAM;GACf,GAAG;GACH,KAAKA,sBAAU,UAAU,MAAM,IAAI;GACnC,iEAA0B,KAAK;GAC/B,iEAA0B,MAAM,gBAAgB,OAC9C,aAAa,MAAM,GAAG,CACvB;GACF,GACD;GAAC;GAAM;GAAc;GAAS,CAC/B;EAEuC"}