{counter}
\n * }\n */\n\nexport var useSelector = /*#__PURE__*/createSelectorHook();","import { useState, useRef, useEffect } from 'react';\n\nfunction areInputsEqual(newInputs, lastInputs) {\n if (newInputs.length !== lastInputs.length) {\n return false;\n }\n\n for (var i = 0; i < newInputs.length; i++) {\n if (newInputs[i] !== lastInputs[i]) {\n return false;\n }\n }\n\n return true;\n}\n\nfunction useMemoOne(getResult, inputs) {\n var initial = useState(function () {\n return {\n inputs: inputs,\n result: getResult()\n };\n })[0];\n var isFirstRun = useRef(true);\n var committed = useRef(initial);\n var useCache = isFirstRun.current || Boolean(inputs && committed.current.inputs && areInputsEqual(inputs, committed.current.inputs));\n var cache = useCache ? committed.current : {\n inputs: inputs,\n result: getResult()\n };\n useEffect(function () {\n isFirstRun.current = false;\n committed.current = cache;\n }, [cache]);\n return cache.result;\n}\nfunction useCallbackOne(callback, inputs) {\n return useMemoOne(function () {\n return callback;\n }, inputs);\n}\nvar useMemo = useMemoOne;\nvar useCallback = useCallbackOne;\n\nexport { useCallback, useCallbackOne, useMemo, useMemoOne };\n","import Provider from './components/Provider';\nimport connectAdvanced from './components/connectAdvanced';\nimport { ReactReduxContext } from './components/Context';\nimport connect from './connect/connect';\nimport { useDispatch, createDispatchHook } from './hooks/useDispatch';\nimport { useSelector, createSelectorHook } from './hooks/useSelector';\nimport { useStore, createStoreHook } from './hooks/useStore';\nimport { setBatch } from './utils/batch';\nimport { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates';\nimport shallowEqual from './utils/shallowEqual';\nsetBatch(batch);\nexport { Provider, connectAdvanced, ReactReduxContext, connect, batch, useDispatch, createDispatchHook, useSelector, createSelectorHook, useStore, createStoreHook, shallowEqual };","var isProduction = process.env.NODE_ENV === 'production';\nvar prefix = 'Invariant failed';\nfunction invariant(condition, message) {\n if (condition) {\n return;\n }\n if (isProduction) {\n throw new Error(prefix);\n }\n throw new Error(prefix + \": \" + (message || ''));\n}\n\nexport default invariant;\n","import invariant from 'tiny-invariant';\n\nvar getRect = function getRect(_ref) {\n var top = _ref.top,\n right = _ref.right,\n bottom = _ref.bottom,\n left = _ref.left;\n var width = right - left;\n var height = bottom - top;\n var rect = {\n top: top,\n right: right,\n bottom: bottom,\n left: left,\n width: width,\n height: height,\n x: left,\n y: top,\n center: {\n x: (right + left) / 2,\n y: (bottom + top) / 2\n }\n };\n return rect;\n};\nvar expand = function expand(target, expandBy) {\n return {\n top: target.top - expandBy.top,\n left: target.left - expandBy.left,\n bottom: target.bottom + expandBy.bottom,\n right: target.right + expandBy.right\n };\n};\nvar shrink = function shrink(target, shrinkBy) {\n return {\n top: target.top + shrinkBy.top,\n left: target.left + shrinkBy.left,\n bottom: target.bottom - shrinkBy.bottom,\n right: target.right - shrinkBy.right\n };\n};\n\nvar shift = function shift(target, shiftBy) {\n return {\n top: target.top + shiftBy.y,\n left: target.left + shiftBy.x,\n bottom: target.bottom + shiftBy.y,\n right: target.right + shiftBy.x\n };\n};\n\nvar noSpacing = {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n};\nvar createBox = function createBox(_ref2) {\n var borderBox = _ref2.borderBox,\n _ref2$margin = _ref2.margin,\n margin = _ref2$margin === void 0 ? noSpacing : _ref2$margin,\n _ref2$border = _ref2.border,\n border = _ref2$border === void 0 ? noSpacing : _ref2$border,\n _ref2$padding = _ref2.padding,\n padding = _ref2$padding === void 0 ? noSpacing : _ref2$padding;\n var marginBox = getRect(expand(borderBox, margin));\n var paddingBox = getRect(shrink(borderBox, border));\n var contentBox = getRect(shrink(paddingBox, padding));\n return {\n marginBox: marginBox,\n borderBox: getRect(borderBox),\n paddingBox: paddingBox,\n contentBox: contentBox,\n margin: margin,\n border: border,\n padding: padding\n };\n};\n\nvar parse = function parse(raw) {\n var value = raw.slice(0, -2);\n var suffix = raw.slice(-2);\n\n if (suffix !== 'px') {\n return 0;\n }\n\n var result = Number(value);\n !!isNaN(result) ? process.env.NODE_ENV !== \"production\" ? invariant(false, \"Could not parse value [raw: \" + raw + \", without suffix: \" + value + \"]\") : invariant(false) : void 0;\n return result;\n};\n\nvar getWindowScroll = function getWindowScroll() {\n return {\n x: window.pageXOffset,\n y: window.pageYOffset\n };\n};\n\nvar offset = function offset(original, change) {\n var borderBox = original.borderBox,\n border = original.border,\n margin = original.margin,\n padding = original.padding;\n var shifted = shift(borderBox, change);\n return createBox({\n borderBox: shifted,\n border: border,\n margin: margin,\n padding: padding\n });\n};\nvar withScroll = function withScroll(original, scroll) {\n if (scroll === void 0) {\n scroll = getWindowScroll();\n }\n\n return offset(original, scroll);\n};\nvar calculateBox = function calculateBox(borderBox, styles) {\n var margin = {\n top: parse(styles.marginTop),\n right: parse(styles.marginRight),\n bottom: parse(styles.marginBottom),\n left: parse(styles.marginLeft)\n };\n var padding = {\n top: parse(styles.paddingTop),\n right: parse(styles.paddingRight),\n bottom: parse(styles.paddingBottom),\n left: parse(styles.paddingLeft)\n };\n var border = {\n top: parse(styles.borderTopWidth),\n right: parse(styles.borderRightWidth),\n bottom: parse(styles.borderBottomWidth),\n left: parse(styles.borderLeftWidth)\n };\n return createBox({\n borderBox: borderBox,\n margin: margin,\n padding: padding,\n border: border\n });\n};\nvar getBox = function getBox(el) {\n var borderBox = el.getBoundingClientRect();\n var styles = window.getComputedStyle(el);\n return calculateBox(borderBox, styles);\n};\n\nexport { calculateBox, createBox, expand, getBox, getRect, offset, shrink, withScroll };\n","function areInputsEqual(newInputs, lastInputs) {\n if (newInputs.length !== lastInputs.length) {\n return false;\n }\n for (var i = 0; i < newInputs.length; i++) {\n if (newInputs[i] !== lastInputs[i]) {\n return false;\n }\n }\n return true;\n}\n\nfunction memoizeOne(resultFn, isEqual) {\n if (isEqual === void 0) { isEqual = areInputsEqual; }\n var lastThis;\n var lastArgs = [];\n var lastResult;\n var calledOnce = false;\n function memoized() {\n var newArgs = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n newArgs[_i] = arguments[_i];\n }\n if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {\n return lastResult;\n }\n lastResult = resultFn.apply(this, newArgs);\n calledOnce = true;\n lastThis = this;\n lastArgs = newArgs;\n return lastResult;\n }\n return memoized;\n}\n\nexport default memoizeOne;\n","var rafSchd = function rafSchd(fn) {\n var lastArgs = [];\n var frameId = null;\n\n var wrapperFn = function wrapperFn() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n lastArgs = args;\n\n if (frameId) {\n return;\n }\n\n frameId = requestAnimationFrame(function () {\n frameId = null;\n fn.apply(void 0, lastArgs);\n });\n };\n\n wrapperFn.cancel = function () {\n if (!frameId) {\n return;\n }\n\n cancelAnimationFrame(frameId);\n frameId = null;\n };\n\n return wrapperFn;\n};\n\nexport default rafSchd;\n","import React, { useLayoutEffect, useEffect, useRef, useState, useContext } from 'react';\nimport _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport { createStore as createStore$1, applyMiddleware, compose, bindActionCreators } from 'redux';\nimport { Provider, connect } from 'react-redux';\nimport { useMemo, useCallback } from 'use-memo-one';\nimport { getRect, expand, offset, withScroll, getBox, createBox, calculateBox } from 'css-box-model';\nimport memoizeOne from 'memoize-one';\nimport rafSchd from 'raf-schd';\nimport ReactDOM from 'react-dom';\n\nvar isProduction = process.env.NODE_ENV === 'production';\nvar spacesAndTabs = /[ \\t]{2,}/g;\nvar lineStartWithSpaces = /^[ \\t]*/gm;\n\nvar clean = function clean(value) {\n return value.replace(spacesAndTabs, ' ').replace(lineStartWithSpaces, '').trim();\n};\n\nvar getDevMessage = function getDevMessage(message) {\n return clean(\"\\n %creact-beautiful-dnd\\n\\n %c\" + clean(message) + \"\\n\\n %c\\uD83D\\uDC77\\u200D This is a development only message. It will be removed in production builds.\\n\");\n};\n\nvar getFormattedMessage = function getFormattedMessage(message) {\n return [getDevMessage(message), 'color: #00C584; font-size: 1.2em; font-weight: bold;', 'line-height: 1.5', 'color: #723874;'];\n};\nvar isDisabledFlag = '__react-beautiful-dnd-disable-dev-warnings';\nfunction log(type, message) {\n var _console;\n\n if (isProduction) {\n return;\n }\n\n if (typeof window !== 'undefined' && window[isDisabledFlag]) {\n return;\n }\n\n (_console = console)[type].apply(_console, getFormattedMessage(message));\n}\nvar warning = log.bind(null, 'warn');\nvar error = log.bind(null, 'error');\n\nfunction noop() {}\n\nfunction getOptions(shared, fromBinding) {\n return _extends({}, shared, {}, fromBinding);\n}\n\nfunction bindEvents(el, bindings, sharedOptions) {\n var unbindings = bindings.map(function (binding) {\n var options = getOptions(sharedOptions, binding.options);\n el.addEventListener(binding.eventName, binding.fn, options);\n return function unbind() {\n el.removeEventListener(binding.eventName, binding.fn, options);\n };\n });\n return function unbindAll() {\n unbindings.forEach(function (unbind) {\n unbind();\n });\n };\n}\n\nvar isProduction$1 = process.env.NODE_ENV === 'production';\nvar prefix = 'Invariant failed';\nfunction RbdInvariant(message) {\n this.message = message;\n}\n\nRbdInvariant.prototype.toString = function toString() {\n return this.message;\n};\n\nfunction invariant(condition, message) {\n if (condition) {\n return;\n }\n\n if (isProduction$1) {\n throw new RbdInvariant(prefix);\n } else {\n throw new RbdInvariant(prefix + \": \" + (message || ''));\n }\n}\n\nvar ErrorBoundary = function (_React$Component) {\n _inheritsLoose(ErrorBoundary, _React$Component);\n\n function ErrorBoundary() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n _this.callbacks = null;\n _this.unbind = noop;\n\n _this.onWindowError = function (event) {\n var callbacks = _this.getCallbacks();\n\n if (callbacks.isDragging()) {\n callbacks.tryAbort();\n process.env.NODE_ENV !== \"production\" ? warning(\"\\n An error was caught by our window 'error' event listener while a drag was occurring.\\n The active drag has been aborted.\\n \") : void 0;\n }\n\n var err = event.error;\n\n if (err instanceof RbdInvariant) {\n event.preventDefault();\n\n if (process.env.NODE_ENV !== 'production') {\n error(err.message);\n }\n }\n };\n\n _this.getCallbacks = function () {\n if (!_this.callbacks) {\n throw new Error('Unable to find AppCallbacks in {counter}
\n * }\n */\n\nexport var useSelector = /*#__PURE__*/createSelectorHook();","import { useState, useRef, useEffect } from 'react';\n\nfunction areInputsEqual(newInputs, lastInputs) {\n if (newInputs.length !== lastInputs.length) {\n return false;\n }\n\n for (var i = 0; i < newInputs.length; i++) {\n if (newInputs[i] !== lastInputs[i]) {\n return false;\n }\n }\n\n return true;\n}\n\nfunction useMemoOne(getResult, inputs) {\n var initial = useState(function () {\n return {\n inputs: inputs,\n result: getResult()\n };\n })[0];\n var isFirstRun = useRef(true);\n var committed = useRef(initial);\n var useCache = isFirstRun.current || Boolean(inputs && committed.current.inputs && areInputsEqual(inputs, committed.current.inputs));\n var cache = useCache ? committed.current : {\n inputs: inputs,\n result: getResult()\n };\n useEffect(function () {\n isFirstRun.current = false;\n committed.current = cache;\n }, [cache]);\n return cache.result;\n}\nfunction useCallbackOne(callback, inputs) {\n return useMemoOne(function () {\n return callback;\n }, inputs);\n}\nvar useMemo = useMemoOne;\nvar useCallback = useCallbackOne;\n\nexport { useCallback, useCallbackOne, useMemo, useMemoOne };\n","import Provider from './components/Provider';\nimport connectAdvanced from './components/connectAdvanced';\nimport { ReactReduxContext } from './components/Context';\nimport connect from './connect/connect';\nimport { useDispatch, createDispatchHook } from './hooks/useDispatch';\nimport { useSelector, createSelectorHook } from './hooks/useSelector';\nimport { useStore, createStoreHook } from './hooks/useStore';\nimport { setBatch } from './utils/batch';\nimport { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates';\nimport shallowEqual from './utils/shallowEqual';\nsetBatch(batch);\nexport { Provider, connectAdvanced, ReactReduxContext, connect, batch, useDispatch, createDispatchHook, useSelector, createSelectorHook, useStore, createStoreHook, shallowEqual };","var isProduction = process.env.NODE_ENV === 'production';\nvar prefix = 'Invariant failed';\nfunction invariant(condition, message) {\n if (condition) {\n return;\n }\n if (isProduction) {\n throw new Error(prefix);\n }\n throw new Error(prefix + \": \" + (message || ''));\n}\n\nexport default invariant;\n","import invariant from 'tiny-invariant';\n\nvar getRect = function getRect(_ref) {\n var top = _ref.top,\n right = _ref.right,\n bottom = _ref.bottom,\n left = _ref.left;\n var width = right - left;\n var height = bottom - top;\n var rect = {\n top: top,\n right: right,\n bottom: bottom,\n left: left,\n width: width,\n height: height,\n x: left,\n y: top,\n center: {\n x: (right + left) / 2,\n y: (bottom + top) / 2\n }\n };\n return rect;\n};\nvar expand = function expand(target, expandBy) {\n return {\n top: target.top - expandBy.top,\n left: target.left - expandBy.left,\n bottom: target.bottom + expandBy.bottom,\n right: target.right + expandBy.right\n };\n};\nvar shrink = function shrink(target, shrinkBy) {\n return {\n top: target.top + shrinkBy.top,\n left: target.left + shrinkBy.left,\n bottom: target.bottom - shrinkBy.bottom,\n right: target.right - shrinkBy.right\n };\n};\n\nvar shift = function shift(target, shiftBy) {\n return {\n top: target.top + shiftBy.y,\n left: target.left + shiftBy.x,\n bottom: target.bottom + shiftBy.y,\n right: target.right + shiftBy.x\n };\n};\n\nvar noSpacing = {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n};\nvar createBox = function createBox(_ref2) {\n var borderBox = _ref2.borderBox,\n _ref2$margin = _ref2.margin,\n margin = _ref2$margin === void 0 ? noSpacing : _ref2$margin,\n _ref2$border = _ref2.border,\n border = _ref2$border === void 0 ? noSpacing : _ref2$border,\n _ref2$padding = _ref2.padding,\n padding = _ref2$padding === void 0 ? noSpacing : _ref2$padding;\n var marginBox = getRect(expand(borderBox, margin));\n var paddingBox = getRect(shrink(borderBox, border));\n var contentBox = getRect(shrink(paddingBox, padding));\n return {\n marginBox: marginBox,\n borderBox: getRect(borderBox),\n paddingBox: paddingBox,\n contentBox: contentBox,\n margin: margin,\n border: border,\n padding: padding\n };\n};\n\nvar parse = function parse(raw) {\n var value = raw.slice(0, -2);\n var suffix = raw.slice(-2);\n\n if (suffix !== 'px') {\n return 0;\n }\n\n var result = Number(value);\n !!isNaN(result) ? process.env.NODE_ENV !== \"production\" ? invariant(false, \"Could not parse value [raw: \" + raw + \", without suffix: \" + value + \"]\") : invariant(false) : void 0;\n return result;\n};\n\nvar getWindowScroll = function getWindowScroll() {\n return {\n x: window.pageXOffset,\n y: window.pageYOffset\n };\n};\n\nvar offset = function offset(original, change) {\n var borderBox = original.borderBox,\n border = original.border,\n margin = original.margin,\n padding = original.padding;\n var shifted = shift(borderBox, change);\n return createBox({\n borderBox: shifted,\n border: border,\n margin: margin,\n padding: padding\n });\n};\nvar withScroll = function withScroll(original, scroll) {\n if (scroll === void 0) {\n scroll = getWindowScroll();\n }\n\n return offset(original, scroll);\n};\nvar calculateBox = function calculateBox(borderBox, styles) {\n var margin = {\n top: parse(styles.marginTop),\n right: parse(styles.marginRight),\n bottom: parse(styles.marginBottom),\n left: parse(styles.marginLeft)\n };\n var padding = {\n top: parse(styles.paddingTop),\n right: parse(styles.paddingRight),\n bottom: parse(styles.paddingBottom),\n left: parse(styles.paddingLeft)\n };\n var border = {\n top: parse(styles.borderTopWidth),\n right: parse(styles.borderRightWidth),\n bottom: parse(styles.borderBottomWidth),\n left: parse(styles.borderLeftWidth)\n };\n return createBox({\n borderBox: borderBox,\n margin: margin,\n padding: padding,\n border: border\n });\n};\nvar getBox = function getBox(el) {\n var borderBox = el.getBoundingClientRect();\n var styles = window.getComputedStyle(el);\n return calculateBox(borderBox, styles);\n};\n\nexport { calculateBox, createBox, expand, getBox, getRect, offset, shrink, withScroll };\n","function areInputsEqual(newInputs, lastInputs) {\n if (newInputs.length !== lastInputs.length) {\n return false;\n }\n for (var i = 0; i < newInputs.length; i++) {\n if (newInputs[i] !== lastInputs[i]) {\n return false;\n }\n }\n return true;\n}\n\nfunction memoizeOne(resultFn, isEqual) {\n if (isEqual === void 0) { isEqual = areInputsEqual; }\n var lastThis;\n var lastArgs = [];\n var lastResult;\n var calledOnce = false;\n function memoized() {\n var newArgs = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n newArgs[_i] = arguments[_i];\n }\n if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {\n return lastResult;\n }\n lastResult = resultFn.apply(this, newArgs);\n calledOnce = true;\n lastThis = this;\n lastArgs = newArgs;\n return lastResult;\n }\n return memoized;\n}\n\nexport default memoizeOne;\n","var rafSchd = function rafSchd(fn) {\n var lastArgs = [];\n var frameId = null;\n\n var wrapperFn = function wrapperFn() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n lastArgs = args;\n\n if (frameId) {\n return;\n }\n\n frameId = requestAnimationFrame(function () {\n frameId = null;\n fn.apply(void 0, lastArgs);\n });\n };\n\n wrapperFn.cancel = function () {\n if (!frameId) {\n return;\n }\n\n cancelAnimationFrame(frameId);\n frameId = null;\n };\n\n return wrapperFn;\n};\n\nexport default rafSchd;\n","import React, { useLayoutEffect, useEffect, useRef, useState, useContext } from 'react';\nimport _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport { createStore as createStore$1, applyMiddleware, compose, bindActionCreators } from 'redux';\nimport { Provider, connect } from 'react-redux';\nimport { useMemo, useCallback } from 'use-memo-one';\nimport { getRect, expand, offset, withScroll, getBox, createBox, calculateBox } from 'css-box-model';\nimport memoizeOne from 'memoize-one';\nimport rafSchd from 'raf-schd';\nimport ReactDOM from 'react-dom';\n\nvar isProduction = process.env.NODE_ENV === 'production';\nvar spacesAndTabs = /[ \\t]{2,}/g;\nvar lineStartWithSpaces = /^[ \\t]*/gm;\n\nvar clean = function clean(value) {\n return value.replace(spacesAndTabs, ' ').replace(lineStartWithSpaces, '').trim();\n};\n\nvar getDevMessage = function getDevMessage(message) {\n return clean(\"\\n %creact-beautiful-dnd\\n\\n %c\" + clean(message) + \"\\n\\n %c\\uD83D\\uDC77\\u200D This is a development only message. It will be removed in production builds.\\n\");\n};\n\nvar getFormattedMessage = function getFormattedMessage(message) {\n return [getDevMessage(message), 'color: #00C584; font-size: 1.2em; font-weight: bold;', 'line-height: 1.5', 'color: #723874;'];\n};\nvar isDisabledFlag = '__react-beautiful-dnd-disable-dev-warnings';\nfunction log(type, message) {\n var _console;\n\n if (isProduction) {\n return;\n }\n\n if (typeof window !== 'undefined' && window[isDisabledFlag]) {\n return;\n }\n\n (_console = console)[type].apply(_console, getFormattedMessage(message));\n}\nvar warning = log.bind(null, 'warn');\nvar error = log.bind(null, 'error');\n\nfunction noop() {}\n\nfunction getOptions(shared, fromBinding) {\n return _extends({}, shared, {}, fromBinding);\n}\n\nfunction bindEvents(el, bindings, sharedOptions) {\n var unbindings = bindings.map(function (binding) {\n var options = getOptions(sharedOptions, binding.options);\n el.addEventListener(binding.eventName, binding.fn, options);\n return function unbind() {\n el.removeEventListener(binding.eventName, binding.fn, options);\n };\n });\n return function unbindAll() {\n unbindings.forEach(function (unbind) {\n unbind();\n });\n };\n}\n\nvar isProduction$1 = process.env.NODE_ENV === 'production';\nvar prefix = 'Invariant failed';\nfunction RbdInvariant(message) {\n this.message = message;\n}\n\nRbdInvariant.prototype.toString = function toString() {\n return this.message;\n};\n\nfunction invariant(condition, message) {\n if (condition) {\n return;\n }\n\n if (isProduction$1) {\n throw new RbdInvariant(prefix);\n } else {\n throw new RbdInvariant(prefix + \": \" + (message || ''));\n }\n}\n\nvar ErrorBoundary = function (_React$Component) {\n _inheritsLoose(ErrorBoundary, _React$Component);\n\n function ErrorBoundary() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n _this.callbacks = null;\n _this.unbind = noop;\n\n _this.onWindowError = function (event) {\n var callbacks = _this.getCallbacks();\n\n if (callbacks.isDragging()) {\n callbacks.tryAbort();\n process.env.NODE_ENV !== \"production\" ? warning(\"\\n An error was caught by our window 'error' event listener while a drag was occurring.\\n The active drag has been aborted.\\n \") : void 0;\n }\n\n var err = event.error;\n\n if (err instanceof RbdInvariant) {\n event.preventDefault();\n\n if (process.env.NODE_ENV !== 'production') {\n error(err.message);\n }\n }\n };\n\n _this.getCallbacks = function () {\n if (!_this.callbacks) {\n throw new Error('Unable to find AppCallbacks in \n
\n )\n}\n\nexport default Footer","export default __webpack_public_path__ + \"static/media/list.d6c2e883.svg\";","export default __webpack_public_path__ + \"static/media/plus.872eb501.svg\";","export default __webpack_public_path__ + \"static/media/trash.a864b6b6.svg\";","import React, { useEffect, useState } from \"react\";\nimport listIcon from \"../images/list.svg\";\nimport Icon from \"../images/plus.svg\";\nimport deleteIcon from \"../images/trash.svg\";\n\nfunction CategorySidebar({\n category,\n setselectedCategory,\n handleSelectedCategory,\n handleAddCategory,\n}) {\n \n const [channelName, setchannelName] = useState();\n const [selectedStyle, setselectedStyle] = useState(false);\n\n\n const handleNewCategory = () => {\n const data = prompt(\"add a new category\");\n console.log(\"data\", data);\n setchannelName(data);\n handleAddCategory(data);\n };\n const handleDeleteCategory = () => {\n const data = alert(\"are you sure ? this cant be undone \");\n console.log(\"data\", data);\n };\n\n handleSelectedCategory = (item) => {\n setselectedCategory(item);\n setselectedStyle(!selectedStyle)\n };\n\n const toggleSidebarList=()=>{\n }\n return (\n © 2021 all rights reserved
\nPrivacy · Terms · Sitemap · Company Details
\n\n
\n \n );\n}\n\nexport default CategorySidebar;\n","import React from \"react\";\nfunction CategoryContainerHeader({selectedCategory}) {\n return (\n \n
\n \n
\n \n 
\n \n
\n Categories
\n\n {category.map((item, index) => (\n <>\n handleSelectedCategory(item)}\n key={index}\n \n >\n
\n \n ))}\n \n {item.name}\n \n \n \n
\n
\n );\n}\n\nexport default CategoryContainerHeader;\n","import React from \"react\";\nfunction SingleResume({ resume }) {\n return (\n <>\n \n #{selectedCategory.name}\n
\n\n
{\" \"}\n \n );\n}\n\nexport default SingleResume;\n","import React from \"react\";\nimport CategoryContainerHeader from \"./category-container-header\";\nimport { Draggable } from \"react-beautiful-dnd\";\nimport SingleResume from \"../resume/singleResume\";\nfunction CategoryContainer({ selectedCategory, category }) {\n return (\n name: {resume.name}
\n{resume.resume}
\n\n
\n \n );\n}\n\nexport default CategoryContainer;\n","import React from \"react\";\nimport SingleResume from \"./singleResume\";\nimport { Draggable } from \"react-beautiful-dnd\";\n\nfunction ResumeContainer({ resume }) {\n return (\n \n {category\n .find((item) => item === selectedCategory)\n .items.map((innerItem, index) =>\n innerItem ? (\n \n {(provided, snapshot) => (\n \n
\n )}\n \n ) : (\n \n
\n )\n )}\n NO MORE...
\n\n {resume.map((item, index) => (\n <>\n {item ? (\n \n {(provided, snapshot) => (\n \n
\n )}\n \n ) : (\n \n
\n )}\n \n ))}\n \n );\n}\n\nexport default ResumeContainer;\n","export const initialData = {\n record: [\n {\n id: \"id-1\",\n name: \"Patricia\",\n resume: \"https://resume-resource.com/before-after/ba-ex10.pdf\",\n },\n {\n id: \"id-2\",\n\n name: \"Lee\",\n resume: \"https://resume-resource.com/pdf/extec18.pdf\",\n },\n {\n id: \"id-3\",\n\n name: \"Ravi\",\n resume: \"https://resume-resource.com/pdf/exex13.pdf\",\n },\n {\n id: \"id-4\",\n\n name: \"Jonathan\",\n resume: \"https://resume-resource.com/pdf/extec21.pdf\",\n },\n {\n id: \"id-5\",\n\n name: \"Jane\",\n resume: \"https://resume-resource.com/before-after/ba-ex03.pdf\",\n },\n {\n id: \"id-6\",\n\n name: \"Matthew\",\n resume: \"https://resume-resource.com/before-after/ba-ex06.pdf\",\n },\n {\n id: \"id-7\",\n\n name: \"Jonathan\",\n resume: \"https://resume-resource.com/pdf/extec21.pdf\",\n },\n {\n id: \"id-8\",\n\n name: \"Jane\",\n resume: \"https://resume-resource.com/before-after/ba-ex03.pdf\",\n },\n {\n id: \"id-9\",\n\n name: \"Matthew\",\n resume: \"https://resume-resource.com/before-after/ba-ex06.pdf\",\n },\n ],\n metadata: {\n id: \"603e095481087a6a8b944bd4\",\n private: true,\n },\n};\n","import { DragDropContext } from \"react-beautiful-dnd\";\nimport React, { useState, useEffect } from \"react\";\nimport \"./App.scss\";\nimport Header from \"./Layout/Header/Header\";\nimport Footer from \"./Layout/Footer/Footer\";\nimport CategorySidebar from \"./components/category/category-sidebar\";\nimport CategoryContainer from \"./components/category/category-container\";\nimport ResumeContainer from \"./components/resume/resumeContainer\";\nimport { Droppable, Draggable } from \"react-beautiful-dnd\";\nimport { initialData } from \"./components/data\";\nimport axios from \"axios\";\nfunction App() {\n const [resume, setResume] = useState(initialData.record);\n const [category, setCategory] = useState([\n { id: 1, name: \"devops\", items: [] },\n { id: 2, name: \"backend\", items: [] },\n { id: 3, name: \"junior frontend\", items: [] },\n { id: 4, name: \"business developmnent\", items: [] },\n { id: 5, name: \"Lead Engineer\", items: [] },\n ]);\n const [newCategory, setNewCategory] = useState();\n const [selectedCategory, setselectedCategory] = useState(category[0]);\n\n /**\n * A semi-generic way to handle multiple lists. Matches\n * the IDs of the droppable container to the names of the\n * source arrays stored in the state.\n */\n useEffect(() => {\n // Optionally the request above could also be done as\n\n axios\n .get(\"https://api.jsonbin.io/v3/b/603e095481087a6a8b944bd4\", {\n headers: {\n // \"Content-Type\": \"application/json\",\n \"X-Master-Key\":\n \"$2b$10$UAbuAykF9DA3OF7jzfQEVeBXFyPyXM8ZcDcenVuxsPP3fy4IXDluy\",\n },\n })\n .then(function (response) {\n console.log(response.data.record);\n });\n }, []);\n\n const id2List = {\n droppable1: resume,\n droppable2: selectedCategory.items ? selectedCategory.items : \"\",\n };\n\n // FUNCTION TO GET CORRESPONDING LIST\n const getList = (id) => id2List[id];\n\n // function to handle addition of category\n const handleCategoryAddition = (target) => {\n // setNewCategory(target);\n const _new = { id: \"6\", name: target, items: [] };\n setCategory([...category, _new]);\n console.log(\"newcategory\", target);\n console.log(\"category\", category);\n };\n\n // to get currently selected category\n const handleSelectedCategory = (selected) => {\n setselectedCategory(selected);\n };\n\n // to reorder items within a droppable\n const reorder = (list, startIndex, endIndex) => {\n const result = [...list];\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n console.log(\"result\", result);\n return result;\n };\n // to move item from one droppable to another\n const moveResume = (\n source,\n destination,\n droppableSource,\n droppableDestination\n ) => {\n const sourceClone = Array.from(source);\n const destClone = Array.from(destination);\n const [removed] = sourceClone.splice(droppableSource.index, 1);\n destClone.splice(droppableDestination.index, 0, removed);\n const result = {};\n result[droppableSource.droppableId] = sourceClone;\n result[droppableDestination.droppableId] = destClone;\n return result;\n };\n\n // drag function for items using react beautiful dnd\n const onDragEnd = (result) => {\n console.log(\"Result\", result);\n const { source, destination } = result;\n if (!result.destination) {\n return;\n }\n\n if (source.droppableId === destination.droppableId) {\n if (source.droppableId == \"droppable1\") {\n const finalData = reorder(\n resume,\n result.source.index,\n result.destination.index\n );\n setResume(finalData);\n } else {\n const finalData = reorder(\n selectedCategory.items,\n result.source.index,\n result.destination.index\n );\n const newCategory = [];\n // code to update newly dragged item to resume-droppable-container\n category.forEach((item) => {\n if (item === selectedCategory) item.items = finalData;\n newCategory.push(item);\n });\n setCategory(newCategory);\n }\n } else {\n const result = moveResume(\n getList(source.droppableId),\n getList(destination.droppableId),\n source,\n destination\n );\n setResume(result.droppable1);\n const newCategory = [];\n // code to update newly dragged item to resume-droppable-container\n category.forEach((item) => {\n if (item === selectedCategory) item.items = result.droppable2;\n newCategory.push(item);\n });\n setCategory(newCategory);\n }\n };\n\n return (\n NO MORE...
\n\n onDragEnd(result)}>\n \n {(provided, snapshot) => (\n \n
\n )}\n \n \n \n\n \n \n );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n \n \n {(provided, snapshot) => (\n \n
\n )}\n \n\n \n
\n )\n}\n\nexport default Footer","export default __webpack_public_path__ + \"static/media/list.d6c2e883.svg\";","export default __webpack_public_path__ + \"static/media/plus.872eb501.svg\";","export default __webpack_public_path__ + \"static/media/trash.a864b6b6.svg\";","import React, { useEffect, useState } from \"react\";\nimport listIcon from \"../images/list.svg\";\nimport addIcon from \"../images/plus.svg\";\nimport deleteIcon from \"../images/trash.svg\";\n\n\nfunction CategorySidebar({\n category,\n setselectedCategory,\n handleSelectedCategory,\n handleAddCategory,\n}) {\n const [channelName, setchannelName] = useState();\n\n const handleNewCategory = () => {\n const data = prompt(\"add a new category\");\n console.log(\"data\", data);\n setchannelName(data);\n handleAddCategory(data);\n };\n const handleDeleteCategory = () => {\n const data = alert(\"are you sure ? this cant be undone \");\n console.log(\"data\", data);\n\n };\n // console.log(\"channel\", channelName);\n\n handleSelectedCategory = (item) => {\n setselectedCategory(item);\n };\n\n return (\n © 2021 all rights reserved
\nPrivacy · Terms · Sitemap · Company Details
\n\n
\n );\n}\n\nexport default CategorySidebar;\n","import React from \"react\";\nfunction CategoryContainerHeader({selectedCategory}) {\n return (\n \n
\n \n
\n \n \n \n
\n Categories
\n\n {console.log(\"category inside sidebar\", category)}\n {category.map((item, index) => (\n
\n handleSelectedCategory(item)} key={index}>\n {item.name}\n
\n
\n );\n}\n\nexport default CategoryContainerHeader;\n","import React from \"react\";\nfunction SingleResume({ resume }) {\n return (\n <>\n \n #{selectedCategory.name}\n
\n\n
{\" \"}\n \n );\n}\n\nexport default SingleResume;\n","import React from \"react\";\nimport CategoryContainerHeader from \"./category-container-header\";\nimport { Draggable } from \"react-beautiful-dnd\";\nimport SingleResume from \"../resume/singleResume\";\nfunction CategoryContainer({ selectedCategory, category }) {\n return (\n name: {resume.name}
\n{resume.resume}
\n\n
\n \n );\n}\n\nexport default CategoryContainer;\n","import React from \"react\";\nimport SingleResume from \"./singleResume\";\nimport { Draggable } from \"react-beautiful-dnd\";\n\nfunction ResumeContainer({ resume }) {\n return (\n \n {category\n .find((item) => item === selectedCategory)\n .items.map((innerItem, index) =>\n innerItem ? (\n \n {(provided, snapshot) => (\n \n
\n )}\n \n ) : (\n \n
\n )\n )}\n NO MORE...
\n\n {resume.map((item, index) => (\n <>\n {item ? (\n \n {(provided, snapshot) => (\n \n
\n )}\n \n ) : (\n \n
\n )}\n \n ))}\n \n );\n}\n\nexport default ResumeContainer;\n","export const initialData = {\n record: [\n {\n id: \"id-1\",\n name: \"Patricia\",\n resume: \"https://resume-resource.com/before-after/ba-ex10.pdf\",\n },\n {\n id: \"id-2\",\n\n name: \"Lee\",\n resume: \"https://resume-resource.com/pdf/extec18.pdf\",\n },\n {\n id: \"id-3\",\n\n name: \"Ravi\",\n resume: \"https://resume-resource.com/pdf/exex13.pdf\",\n },\n {\n id: \"id-4\",\n\n name: \"Jonathan\",\n resume: \"https://resume-resource.com/pdf/extec21.pdf\",\n },\n {\n id: \"id-5\",\n\n name: \"Jane\",\n resume: \"https://resume-resource.com/before-after/ba-ex03.pdf\",\n },\n {\n id: \"id-6\",\n\n name: \"Matthew\",\n resume: \"https://resume-resource.com/before-after/ba-ex06.pdf\",\n },\n {\n id: \"id-7\",\n\n name: \"Jonathan\",\n resume: \"https://resume-resource.com/pdf/extec21.pdf\",\n },\n {\n id: \"id-8\",\n\n name: \"Jane\",\n resume: \"https://resume-resource.com/before-after/ba-ex03.pdf\",\n },\n {\n id: \"id-9\",\n\n name: \"Matthew\",\n resume: \"https://resume-resource.com/before-after/ba-ex06.pdf\",\n },\n ],\n metadata: {\n id: \"603e095481087a6a8b944bd4\",\n private: true,\n },\n};\n","import { DragDropContext } from \"react-beautiful-dnd\";\nimport React, { useState } from \"react\";\nimport \"./App.scss\";\nimport Header from \"./Layout/Header/Header\";\nimport Footer from \"./Layout/Footer/Footer\";\nimport CategorySidebar from \"./components/category/category-sidebar\";\nimport CategoryContainer from \"./components/category/category-container\";\nimport ResumeContainer from \"./components/resume/resumeContainer\";\nimport { Droppable, Draggable } from \"react-beautiful-dnd\";\nimport { initialData } from \"./components/data\";\nfunction App() {\n const [resume, setResume] = useState(initialData.record);\n const [category, setCategory] = useState([\n { id: 1, name: \"devops\", items: [] },\n { id: 2, name: \"backend\", items: [] },\n { id: 3, name: \"junior frontend\", items: [] },\n { id: 4, name: \"business developmnent\", items: [] },\n { id: 5, name: \"Lead Engineer\", items: [] },\n ]);\n const [newCategory, setNewCategory] = useState();\n const [selectedCategory, setselectedCategory] = useState(category[0]);\n\n /**\n * A semi-generic way to handle multiple lists. Matches\n * the IDs of the droppable container to the names of the\n * source arrays stored in the state.\n */\n\n const id2List = {\n droppable1: resume,\n droppable2: selectedCategory.items ? selectedCategory.items : \"\",\n };\n\n // FUNCTION TO GET CORRESPONDING LIST\n const getList = (id) => id2List[id];\n\n // function to handle addition of category\n const handleCategoryAddition = (target) => {\n // setNewCategory(target);\n const _new = { id: \"6\", name: target, items: [] };\n setCategory([...category, _new]);\n console.log(\"newcategory\", target);\n console.log(\"category\", category);\n };\n\n // to get currently selected category\n const handleSelectedCategory = (selected) => {\n setselectedCategory(selected);\n };\n\n // to reorder items within a droppable\n const reorder = (list, startIndex, endIndex) => {\n const result = [...list];\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n console.log(\"result\", result);\n return result;\n };\n // to move item from one droppable to another\n const moveResume = (\n source,\n destination,\n droppableSource,\n droppableDestination\n ) => {\n const sourceClone = Array.from(source);\n const destClone = Array.from(destination);\n const [removed] = sourceClone.splice(droppableSource.index, 1);\n destClone.splice(droppableDestination.index, 0, removed);\n const result = {};\n result[droppableSource.droppableId] = sourceClone;\n result[droppableDestination.droppableId] = destClone;\n return result;\n };\n\n // drag function for items using react beautiful dnd\n const onDragEnd = (result) => {\n console.log(\"Result\", result);\n const { source, destination } = result;\n if (!result.destination) {\n return;\n }\n\n if (source.droppableId === destination.droppableId) {\n if (source.droppableId == \"droppable1\") {\n const finalData = reorder(\n resume,\n result.source.index,\n result.destination.index\n );\n setResume(finalData);\n } else {\n const finalData = reorder(\n selectedCategory.items,\n result.source.index,\n result.destination.index\n );\n const newCategory = [];\n // code to update newly dragged item to resume-droppable-container\n category.forEach((item) => {\n if (item === selectedCategory) item.items = finalData;\n newCategory.push(item);\n });\n setCategory(newCategory);\n }\n } else {\n const result = moveResume(\n getList(source.droppableId),\n getList(destination.droppableId),\n source,\n destination\n );\n setResume(result.droppable1);\n const newCategory = [];\n // code to update newly dragged item to resume-droppable-container\n category.forEach((item) => {\n if (item === selectedCategory) item.items = result.droppable2;\n newCategory.push(item);\n });\n setCategory(newCategory);\n }\n };\n\n return (\n NO MORE...
\n\n onDragEnd(result)}>\n \n {(provided, snapshot) => (\n \n
\n )}\n \n \n \n\n \n \n );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n \n \n {(provided, snapshot) => (\n \n
\n )}\n \n\n
+
+
+
+
+
+
+ {resume.map((item, index) => (
+
+ );
+}
+
+export default ResumeContainer;