@hello-pangea/dnd
Advanced tools
Comparing version 15.0.0 to 16.0.0
@@ -10,3 +10,3 @@ import { Position } from 'css-box-model'; | ||
declare type ElementId = Id; | ||
declare type DroppableMode = "standard" | "virtual"; | ||
declare type DroppableMode = 'standard' | 'virtual'; | ||
interface DraggableOptions { | ||
@@ -17,3 +17,3 @@ canDragInteractiveElements: boolean; | ||
} | ||
declare type Direction = "horizontal" | "vertical"; | ||
declare type Direction = 'horizontal' | 'vertical'; | ||
interface DraggableLocation { | ||
@@ -27,3 +27,3 @@ droppableId: DroppableId; | ||
} | ||
declare type MovementMode = "FLUID" | "SNAP"; | ||
declare type MovementMode = 'FLUID' | 'SNAP'; | ||
interface DraggableRubric { | ||
@@ -45,3 +45,3 @@ draggableId: DraggableId; | ||
} | ||
declare type DropReason = "DROP" | "CANCEL"; | ||
declare type DropReason = 'DROP' | 'CANCEL'; | ||
interface DropResult extends DragUpdate { | ||
@@ -116,6 +116,6 @@ reason: DropReason; | ||
interface DraggingStyle { | ||
position: "fixed"; | ||
position: 'fixed'; | ||
top: number; | ||
left: number; | ||
boxSizing: "border-box"; | ||
boxSizing: 'border-box'; | ||
width: number; | ||
@@ -127,7 +127,7 @@ height: number; | ||
opacity?: number; | ||
pointerEvents: "none"; | ||
pointerEvents: 'none'; | ||
} | ||
interface NotDraggingStyle { | ||
transform?: string; | ||
transition?: "none"; | ||
transition?: 'none'; | ||
} | ||
@@ -137,11 +137,11 @@ declare type DraggableStyle = DraggingStyle | NotDraggingStyle; | ||
style?: DraggableStyle; | ||
"data-rfd-draggable-context-id": ContextId; | ||
"data-rfd-draggable-id": DraggableId; | ||
'data-rfd-draggable-context-id': ContextId; | ||
'data-rfd-draggable-id': DraggableId; | ||
onTransitionEnd?: TransitionEventHandler; | ||
} | ||
interface DraggableProvidedDragHandleProps { | ||
"data-rfd-drag-handle-draggable-id": DraggableId; | ||
"data-rfd-drag-handle-context-id": ContextId; | ||
'data-rfd-drag-handle-draggable-id': DraggableId; | ||
'data-rfd-drag-handle-context-id': ContextId; | ||
role: string; | ||
"aria-describedby": ElementId; | ||
'aria-describedby': ElementId; | ||
tabIndex: number; | ||
@@ -186,4 +186,4 @@ draggable: boolean; | ||
interface DroppableProvidedProps { | ||
"data-rfd-droppable-context-id": ContextId; | ||
"data-rfd-droppable-id": DroppableId; | ||
'data-rfd-droppable-context-id': ContextId; | ||
'data-rfd-droppable-id': DroppableId; | ||
} | ||
@@ -190,0 +190,0 @@ interface DroppableProvided { |
114
package.json
{ | ||
"name": "@hello-pangea/dnd", | ||
"version": "15.0.0", | ||
"version": "16.0.0", | ||
"private": false, | ||
@@ -8,4 +8,4 @@ "description": "Beautiful and accessible drag and drop for lists with React", | ||
"maintainers": [ | ||
"Reece Carolan <reece@hellopangea.com>", | ||
"Gabriel Santerre <gab@100terres.com>" | ||
"Gabriel Santerre <gab@100terres.com>", | ||
"Reece Carolan <reece@hellopangea.com>" | ||
], | ||
@@ -29,3 +29,3 @@ "keywords": [ | ||
"bugs": { | ||
"url": "https://github.com/react-forked/dnd/issues" | ||
"url": "https://github.com/hello-pangea/dnd/issues" | ||
}, | ||
@@ -40,2 +40,5 @@ "main": "dist/dnd.cjs.js", | ||
], | ||
"publishConfig": { | ||
"access": "public" | ||
}, | ||
"config": { | ||
@@ -45,20 +48,27 @@ "prettier_target": "*.{js,jsx,ts,tsx,md,json} src/**/*.{js,jsx,ts,tsx,md,json} test/**/*.{js,jsx,ts,tsx,md,json} docs/**/*.{js,jsx,ts,tsx,md,json} stories/**/*.{js,jsx,ts,tsx,md,json} cypress/**/*.{js,jsx,ts,tsx,md,json} csp-server/**/*.{js,jsx,ts,tsx,md,json}" | ||
"scripts": { | ||
"release": "cross-env release-it", | ||
"commit": "cz", | ||
"chromatic": "chromatic --project-token=f92123f238de", | ||
"prepare": "husky install", | ||
"release": "release-it", | ||
"release:test": "release-it --dry-run", | ||
"test:accessibility": "lighthouse http://localhost:9002/iframe.html?id=examples-single-vertical-list--basic --no-enable-error-reporting --config-path=lighthouse.config.js --chrome-flags='--headless' --output=json --output=html --output-path=./test-reports/lighthouse/a11y.json && node a11y-audit-parse.js", | ||
"test": "jest --config ./jest.config.js", | ||
"test": "jest --config ./jest.config.ts", | ||
"test:react-16": "cross-env REACT_MAJOR_VERSION=16 pnpm test", | ||
"test:react-17": "cross-env REACT_MAJOR_VERSION=17 pnpm test", | ||
"test:react-18": "cross-env REACT_MAJOR_VERSION=18 pnpm test", | ||
"test:browser": "cypress open", | ||
"test:browser:ci": "cypress run", | ||
"test:coverage": "npm run test --coverage --coveragePathIgnorePatterns=/debug", | ||
"validate": "prettier:check && npm run lint:eslint && npm run lint:css && npm run typecheck", | ||
"prettier:check": "prettier --debug-check $npm_package_config_prettier_target", | ||
"prettier:write": "prettier --write $npm_package_config_prettier_target", | ||
"lint:eslint": "eslint \"./**/*.{js,jsx,ts,tsx}\"", | ||
"test:coverage": "pnpm test --coverage --coveragePathIgnorePatterns=/debug", | ||
"validate": "pnpm prettier:check && pnpm lint:eslint && pnpm lint:css && pnpm typecheck", | ||
"prettier:check": "pnpm prettier --debug-check $npm_package_config_prettier_target", | ||
"prettier:write": "pnpm prettier --write $npm_package_config_prettier_target", | ||
"lint:eslint": "pnpm eslint \"./**/*.{js,jsx,ts,tsx}\"", | ||
"lint:css": "stylelint \"stories/**/*.{js,jsx,ts,tsx}\"", | ||
"typecheck": "npm run typecheck:lib && npm run typecheck:test && npm run typecheck:storybook", | ||
"typecheck:lib": "tsc --project tsconfig.json", | ||
"typecheck:storybook": "tsc --project stories/tsconfig.json && tsc --project .storybook/tsconfig.json", | ||
"typecheck:test": "tsc --project test/tsconfig.json && tsc --project csp-server/tsconfig.json && tsc --project cypress/tsconfig.json", | ||
"bundle-size:check": "cross-env SNAPSHOT=match npm run bundle-size:update", | ||
"bundle-size:update": "npm run build:clean && npm run build:dist && npm run build:clean", | ||
"build": "npm run build:clean && npm run build:dist", | ||
"typecheck": "pnpm typecheck:lib && pnpm typecheck:test && pnpm typecheck:storybook", | ||
"typecheck:lib": "pnpm tsc --project tsconfig.json", | ||
"typecheck:storybook": "pnpm tsc --project stories/tsconfig.json && pnpm tsc --project .storybook/tsconfig.json", | ||
"typecheck:test": "pnpm tsc --project test/tsconfig.json && pnpm tsc --project csp-server/tsconfig.json && pnpm tsc --project cypress/tsconfig.json", | ||
"bundle-size:check": "cross-env SNAPSHOT=match pnpm bundle-size:update", | ||
"bundle-size:update": "pnpm build:clean && pnpm build:dist && pnpm build:clean", | ||
"build": "pnpm build:clean && pnpm build:dist", | ||
"build:clean": "rimraf dist", | ||
@@ -68,3 +78,3 @@ "build:dist": "cross-env NODE_ENV=production rollup -c", | ||
"build-storybook": "build-storybook -c .storybook -o site", | ||
"prepublishOnly": "npm run build" | ||
"prepublishOnly": "pnpm build" | ||
}, | ||
@@ -94,2 +104,5 @@ "dependencies": { | ||
"@babel/preset-typescript": "7.18.6", | ||
"@commitlint/cli": "17.0.3", | ||
"@commitlint/config-conventional": "17.0.3", | ||
"@commitlint/cz-commitlint": "17.0.3", | ||
"@emotion/babel-preset-css-prop": "11.10.0", | ||
@@ -100,3 +113,3 @@ "@emotion/eslint-plugin": "11.10.0", | ||
"@jest/environment": "28.1.3", | ||
"@release-it/conventional-changelog": "4.3.0", | ||
"@release-it/conventional-changelog": "5.1.0", | ||
"@rollup/plugin-babel": "5.3.1", | ||
@@ -108,7 +121,7 @@ "@rollup/plugin-commonjs": "22.0.2", | ||
"@rollup/plugin-strip": "2.1.0", | ||
"@storybook/addon-docs": "6.5.10", | ||
"@storybook/addon-essentials": "6.5.10", | ||
"@storybook/addon-storysource": "6.5.10", | ||
"@storybook/addons": "6.5.10", | ||
"@storybook/builder-webpack5": "^6.5.10", | ||
"@storybook/core": "6.5.10", | ||
"@storybook/manager-webpack5": "^6.5.10", | ||
"@storybook/react": "6.5.10", | ||
@@ -119,17 +132,21 @@ "@storybook/theming": "6.5.10", | ||
"@testing-library/react": "13.3.0", | ||
"@testing-library/react-16-17": "npm:@testing-library/react@12.1.5", | ||
"@types/enzyme": "3.10.12", | ||
"@types/express": "4.17.13", | ||
"@types/fs-extra": "9.0.13", | ||
"@types/jest": "28.1.6", | ||
"@types/jest": "28.1.7", | ||
"@types/jest-axe": "3.5.4", | ||
"@types/jsdom": "20.0.0", | ||
"@types/jsdom": "16.2.15", | ||
"@types/markdown-it": "12.2.3", | ||
"@types/node": "16.11.48", | ||
"@types/node": "16.11.52", | ||
"@types/raf-schd": "4.0.1", | ||
"@types/react": "18.0.17", | ||
"@types/react-dom": "18.0.6", | ||
"@types/react-redux": "7.1.24", | ||
"@types/react-virtualized": "9.21.21", | ||
"@types/react-window": "1.8.5", | ||
"@types/seedrandom": "3.0.2", | ||
"@typescript-eslint/eslint-plugin": "5.33.0", | ||
"@typescript-eslint/parser": "5.33.0", | ||
"@types/testing-library__jest-dom": "5.14.5", | ||
"@typescript-eslint/eslint-plugin": "5.33.1", | ||
"@typescript-eslint/parser": "5.33.1", | ||
"babel-jest": "28.1.3", | ||
@@ -139,14 +156,19 @@ "babel-loader": "8.2.5", | ||
"babel-plugin-module-resolver": "4.1.0", | ||
"commitizen": "4.2.5", | ||
"cross-env": "7.0.3", | ||
"csstype": "3.1.0", | ||
"cypress": "9.7.0", | ||
"cypress": "10.6.0", | ||
"dotenv": "16.0.1", | ||
"eslint": "8.21.0", | ||
"emotion-theming": "11.0.0", | ||
"eslint": "8.22.0", | ||
"eslint-config-airbnb": "19.0.4", | ||
"eslint-config-prettier": "8.5.0", | ||
"eslint-import-resolver-typescript": "3.4.0", | ||
"eslint-import-resolver-typescript": "3.4.2", | ||
"eslint-plugin-cypress": "2.12.1", | ||
"eslint-plugin-es5": "1.5.0", | ||
"eslint-plugin-import": "2.26.0", | ||
"eslint-plugin-jest": "26.8.2", | ||
"eslint-plugin-jest": "26.8.7", | ||
"eslint-plugin-jsx-a11y": "6.6.1", | ||
"eslint-plugin-node": "11.1.0", | ||
"eslint-plugin-prettier": "4.2.1", | ||
"eslint-plugin-react": "7.30.1", | ||
@@ -158,3 +180,3 @@ "eslint-plugin-react-hooks": "4.6.0", | ||
"fs-extra": "10.1.0", | ||
"html-webpack-plugin": "^5.5.0", | ||
"husky": "8.0.1", | ||
"jest": "28.1.3", | ||
@@ -165,5 +187,5 @@ "jest-axe": "6.0.0", | ||
"jest-watch-typeahead": "2.0.0", | ||
"jsdom": "20.0.0", | ||
"lighthouse": "9.6.5", | ||
"markdown-it": "12.3.2", | ||
"jsdom": "19.0.0", | ||
"lighthouse": "9.6.6", | ||
"markdown-it": "13.0.1", | ||
"memory-fs": "0.5.0", | ||
@@ -173,9 +195,13 @@ "prettier": "2.7.1", | ||
"react": "18.2.0", | ||
"react-16": "npm:react@16.14.0", | ||
"react-17": "npm:react@17.0.2", | ||
"react-dom": "18.2.0", | ||
"react-dom-16": "npm:react-dom@16.14.0", | ||
"react-dom-17": "npm:react-dom@17.0.2", | ||
"react-virtualized": "9.22.3", | ||
"react-window": "1.8.7", | ||
"release-it": "14.14.3", | ||
"release-it": "15.3.0", | ||
"require-from-string": "2.0.2", | ||
"rimraf": "3.0.2", | ||
"rollup": "2.77.3", | ||
"rollup": "2.78.1", | ||
"rollup-plugin-dts": "4.2.2", | ||
@@ -185,11 +211,10 @@ "rollup-plugin-size-snapshot": "0.12.0", | ||
"seedrandom": "3.0.5", | ||
"storybook-addon-performance": "0.16.1", | ||
"styled-components": "5.3.5", | ||
"stylelint": "14.10.0", | ||
"stylelint": "14.11.0", | ||
"stylelint-config-prettier": "9.0.3", | ||
"stylelint-config-recommended": "9.0.0", | ||
"stylelint-config-standard": "27.0.0", | ||
"stylelint-config-standard": "28.0.0", | ||
"stylelint-config-styled-components": "0.1.1", | ||
"stylelint-processor-styled-components": "1.10.0", | ||
"ts-jest": "28.0.7", | ||
"ts-jest": "28.0.8", | ||
"typescript": "4.7.4", | ||
@@ -200,4 +225,4 @@ "wait-on": "6.0.1", | ||
"peerDependencies": { | ||
"react": "^17.0.0 || ^18.0.0", | ||
"react-dom": "^17.0.0 || ^18.0.0" | ||
"react": "^16.8.5 || ^17.0.0 || ^18.0.0", | ||
"react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" | ||
}, | ||
@@ -207,6 +232,3 @@ "license": "Apache-2.0", | ||
"output": "test-reports/junit/js-test-results.xml" | ||
}, | ||
"publishConfig": { | ||
"access": "public" | ||
} | ||
} |
<p align="center"> | ||
<img src="https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png" alt="react beautiful dnd logo" /> | ||
</p> | ||
<h1 align="center">Pangea DnD</h1> | ||
<h1 align="center">@hello-pangea/dnd</h1> | ||
<div align="center"> | ||
<small>@hello-pangea/dnd</small> | ||
**Beautiful** and **accessible** drag and drop for lists with [`React`](https://facebook.github.io/react/) | ||
[![CircleCI branch](https://img.shields.io/circleci/project/github/hello-pangea/dnd/main.svg)](https://circleci.com/gh/hello-pangea/dnd/tree/main) | ||
[![npm](https://img.shields.io/npm/v/@hello-pangea/dnd.svg)](https://www.npmjs.com/package/@hello-pangea/dnd) | ||
[![Discord](https://img.shields.io/discord/1007763479010234398?color=blue)](https://discord.gg/zKhPpmvCEv) | ||
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-blue.svg)](https://conventionalcommits.org) | ||
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-blue.svg)](http://commitizen.github.io/cz-cli/) | ||
![quote application example](https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif) | ||
[Play with this example if you want!](https://react-forked-dnd.netlify.app/?path=/story/examples-board--simple) | ||
[Play with this example if you want!](https://dnd.hellopangea.com/?path=/story/examples-board--simple) | ||
@@ -156,7 +158,7 @@ </div> | ||
## Maintainer 🛠️ | ||
## Maintainers 🛠️ | ||
- Gabriel Santerre [@100terres](https://github.com/100terres) | ||
- Reece Carolan [@Xhale1](https://github.com/Xhale1) | ||
- Gabriel Santerre [@100terres](https://github.com/100terres) | ||
- Many other [@Atlassian](https://twitter.com/Atlassian)'s! | ||
- Many [@Atlassian](https://twitter.com/Atlassian)'s have contributed to the original [`react-beautiful-dnd`](https://github.com/atlassian/react-beautiful-dnd). _Atlassian is no longer involved with this project._ | ||
@@ -163,0 +165,0 @@ ## Collaborators 🤝 |
@@ -1,7 +0,7 @@ | ||
import type { Position } from "css-box-model"; | ||
import { isEqual, origin } from "./state/position"; | ||
import type { Position } from 'css-box-model'; | ||
import { isEqual, origin } from './state/position'; | ||
export const curves = { | ||
outOfTheWay: "cubic-bezier(0.2, 0, 0, 1)", | ||
drop: "cubic-bezier(.2,1,.1,1)", | ||
outOfTheWay: 'cubic-bezier(0.2, 0, 0, 1)', | ||
drop: 'cubic-bezier(.2,1,.1,1)', | ||
}; | ||
@@ -8,0 +8,0 @@ |
/* eslint-disable no-console */ | ||
import type { Action } from "../../state/store-types"; | ||
import type { Action } from '../../state/store-types'; | ||
@@ -11,3 +11,3 @@ interface Bucket { | ||
(previous: number, current: number) => previous + current, | ||
0 | ||
0, | ||
); | ||
@@ -18,3 +18,3 @@ return sum / values.length; | ||
export default (groupSize: number) => { | ||
console.log("Starting average action timer middleware"); | ||
console.log('Starting average action timer middleware'); | ||
console.log(`Will take an average every ${groupSize} actions`); | ||
@@ -47,3 +47,3 @@ const bucket: Bucket = {}; | ||
`Average time for ${action.type}`, | ||
average(bucket[action.type]) | ||
average(bucket[action.type]), | ||
); | ||
@@ -50,0 +50,0 @@ |
/* eslint-disable no-console */ | ||
import * as timings from "../timings"; | ||
import type { Action } from "../../state/store-types"; | ||
import * as timings from '../timings'; | ||
import type { Action } from '../../state/store-types'; | ||
@@ -5,0 +5,0 @@ export default () => |
/* eslint-disable no-console */ | ||
import type { Action, Store } from "../../state/store-types"; | ||
import type { Action, Store } from '../../state/store-types'; | ||
type Mode = "verbose" | "light"; | ||
type Mode = 'verbose' | 'light'; | ||
export default (mode: Mode = "verbose") => | ||
export default (mode: Mode = 'verbose') => | ||
(store: Store) => | ||
(next: (a: Action) => unknown) => | ||
(action: Action): any => { | ||
if (mode === "light") { | ||
console.log("🏃 Action:", action.type); | ||
if (mode === 'light') { | ||
console.log('🏃 Action:', action.type); | ||
return next(action); | ||
@@ -16,9 +16,9 @@ } | ||
console.group(`action: ${action.type}`); | ||
console.log("action payload", action.payload); | ||
console.log('action payload', action.payload); | ||
console.log("state before", store.getState()); | ||
console.log('state before', store.getState()); | ||
const result: unknown = next(action); | ||
console.log("state after", store.getState()); | ||
console.log('state after', store.getState()); | ||
console.groupEnd(); | ||
@@ -25,0 +25,0 @@ |
@@ -1,2 +0,2 @@ | ||
import type { Action } from "../../state/store-types"; | ||
import type { Action } from '../../state/store-types'; | ||
@@ -3,0 +3,0 @@ export default () => |
@@ -20,3 +20,3 @@ interface Records { | ||
// draw back: can only do timings in dev env (which seems to be fine for now) | ||
if (process.env.NODE_ENV !== "production") { | ||
if (process.env.NODE_ENV !== 'production') { | ||
if (!isTimingsEnabled()) { | ||
@@ -37,3 +37,3 @@ return; | ||
export const finish = (key: string) => { | ||
if (process.env.NODE_ENV !== "production") { | ||
if (process.env.NODE_ENV !== 'production') { | ||
if (!isTimingsEnabled()) { | ||
@@ -48,3 +48,3 @@ return; | ||
// eslint-disable-next-line no-console | ||
console.warn("cannot finish timing as no previous time found", key); | ||
console.warn('cannot finish timing as no previous time found', key); | ||
return; | ||
@@ -59,4 +59,4 @@ } | ||
return { | ||
textColor: "green", | ||
symbol: "✅", | ||
textColor: 'green', | ||
symbol: '✅', | ||
}; | ||
@@ -66,9 +66,9 @@ } | ||
return { | ||
textColor: "orange", | ||
symbol: "⚠️", | ||
textColor: 'orange', | ||
symbol: '⚠️', | ||
}; | ||
} | ||
return { | ||
textColor: "red", | ||
symbol: "❌", | ||
textColor: 'red', | ||
symbol: '❌', | ||
}; | ||
@@ -81,11 +81,11 @@ })(); | ||
// title | ||
"color: blue; font-weight: bold;", | ||
'color: blue; font-weight: bold;', | ||
// result | ||
`color: ${style.textColor}; font-size: 1.1em;`, | ||
// ms | ||
"color: grey;", | ||
'color: grey;', | ||
// key | ||
"color: purple; font-weight: bold;" | ||
'color: purple; font-weight: bold;', | ||
); | ||
} | ||
}; |
@@ -1,2 +0,2 @@ | ||
const isProduction: boolean = process.env.NODE_ENV === "production"; | ||
const isProduction: boolean = process.env.NODE_ENV === 'production'; | ||
@@ -9,3 +9,3 @@ // not replacing newlines (which \s does) | ||
const clean = (value: string): string => | ||
value.replace(spacesAndTabs, " ").replace(lineStartWithSpaces, "").trim(); | ||
value.replace(spacesAndTabs, ' ').replace(lineStartWithSpaces, '').trim(); | ||
@@ -24,12 +24,12 @@ const getDevMessage = (message: string): string => | ||
// title (green400) | ||
"color: #00C584; font-size: 1.2em; font-weight: bold;", | ||
'color: #00C584; font-size: 1.2em; font-weight: bold;', | ||
// message | ||
"line-height: 1.5", | ||
'line-height: 1.5', | ||
// footer (purple300) | ||
"color: #723874;", | ||
'color: #723874;', | ||
]; | ||
const isDisabledFlag = "__@hello-pangea/dnd-disable-dev-warnings"; | ||
const isDisabledFlag = '__@hello-pangea/dnd-disable-dev-warnings'; | ||
export function log(type: "error" | "warn", message: string): void { | ||
export function log(type: 'error' | 'warn', message: string): void { | ||
// no warnings in production | ||
@@ -41,3 +41,3 @@ if (isProduction) { | ||
// manual opt out of warnings | ||
if (typeof window !== "undefined" && window[isDisabledFlag]) { | ||
if (typeof window !== 'undefined' && window[isDisabledFlag]) { | ||
return; | ||
@@ -50,3 +50,3 @@ } | ||
export const warning = log.bind(null, "warn"); | ||
export const error = log.bind(null, "error"); | ||
export const warning = log.bind(null, 'warn'); | ||
export const error = log.bind(null, 'error'); |
@@ -6,3 +6,3 @@ declare type AnimationFrameID = number; | ||
interface ProcessEnv { | ||
NODE_ENV: "development" | "production"; | ||
NODE_ENV: 'development' | 'production'; | ||
} | ||
@@ -17,3 +17,3 @@ | ||
declare interface Window { | ||
"__@hello-pangea/dnd-disable-dev-warnings"?: boolean; | ||
'__@hello-pangea/dnd-disable-dev-warnings'?: boolean; | ||
} | ||
@@ -20,0 +20,0 @@ |
@@ -28,10 +28,10 @@ // Public types | ||
TryGetLockOptions, | ||
} from "./types"; | ||
} from './types'; | ||
// DragDropContext | ||
export { default as DragDropContext } from "./view/drag-drop-context"; | ||
export type { DragDropContextProps } from "./view/drag-drop-context"; | ||
export { default as DragDropContext } from './view/drag-drop-context'; | ||
export type { DragDropContextProps } from './view/drag-drop-context'; | ||
// Draggable | ||
export { default as Draggable } from "./view/draggable"; | ||
export { default as Draggable } from './view/draggable'; | ||
export type { | ||
@@ -48,6 +48,6 @@ DraggableChildrenFn, | ||
NotDraggingStyle, | ||
} from "./view/draggable/draggable-types"; | ||
} from './view/draggable/draggable-types'; | ||
// Droppable | ||
export { default as Droppable } from "./view/droppable"; | ||
export { default as Droppable } from './view/droppable'; | ||
export type { | ||
@@ -58,3 +58,3 @@ DroppableProps, | ||
DroppableStateSnapshot, | ||
} from "./view/droppable/droppable-types"; | ||
} from './view/droppable/droppable-types'; | ||
@@ -66,5 +66,5 @@ // Sensors | ||
useKeyboardSensor, | ||
} from "./view/use-sensor-marshal"; | ||
} from './view/use-sensor-marshal'; | ||
// Utils | ||
export { resetServerContext } from "./view/drag-drop-context"; | ||
export { resetServerContext } from './view/drag-drop-context'; |
/* eslint-disable no-restricted-syntax */ | ||
const isProduction: boolean = process.env.NODE_ENV === "production"; | ||
const prefix = "Invariant failed"; | ||
const isProduction: boolean = process.env.NODE_ENV === 'production'; | ||
const prefix = 'Invariant failed'; | ||
@@ -18,3 +18,3 @@ export class RbdInvariant extends Error {} | ||
condition: unknown, | ||
message?: string | ||
message?: string, | ||
): asserts condition { | ||
@@ -31,4 +31,4 @@ if (condition) { | ||
// *This block will be removed in production builds* | ||
throw new RbdInvariant(`${prefix}: ${message || ""}`); | ||
throw new RbdInvariant(`${prefix}: ${message || ''}`); | ||
} | ||
} |
export function querySelectorAll( | ||
parentNode: ParentNode, | ||
selector: string | ||
selector: string, | ||
): HTMLElement[] { | ||
return Array.from(parentNode.querySelectorAll(selector)); | ||
} |
@@ -8,3 +8,3 @@ import type { | ||
Combine, | ||
} from "./types"; | ||
} from './types'; | ||
@@ -34,3 +34,3 @@ export interface MessagePreset { | ||
source: DraggableLocation, | ||
destination: DraggableLocation | ||
destination: DraggableLocation, | ||
) => { | ||
@@ -60,3 +60,3 @@ const isInHomeList: boolean = source.droppableId === destination.droppableId; | ||
source: DraggableLocation, | ||
combine: Combine | ||
combine: Combine, | ||
): string => { | ||
@@ -90,3 +90,3 @@ const inHomeList: boolean = source.droppableId === combine.droppableId; | ||
return "You are over an area that cannot be dropped on"; | ||
return 'You are over an area that cannot be dropped on'; | ||
}; | ||
@@ -100,3 +100,3 @@ | ||
const onDragEnd = (result: DropResult): string => { | ||
if (result.reason === "CANCEL") { | ||
if (result.reason === 'CANCEL') { | ||
return ` | ||
@@ -103,0 +103,0 @@ Movement cancelled. |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -12,3 +12,3 @@ Critical, | ||
Published, | ||
} from "../types"; | ||
} from '../types'; | ||
@@ -21,3 +21,3 @@ export interface BeforeInitialCaptureArgs { | ||
export interface BeforeInitialCaptureAction { | ||
type: "BEFORE_INITIAL_CAPTURE"; | ||
type: 'BEFORE_INITIAL_CAPTURE'; | ||
payload: BeforeInitialCaptureArgs; | ||
@@ -29,5 +29,5 @@ } | ||
export const beforeInitialCapture = ( | ||
args: BeforeInitialCaptureArgs | ||
args: BeforeInitialCaptureArgs, | ||
): BeforeInitialCaptureAction => ({ | ||
type: "BEFORE_INITIAL_CAPTURE", | ||
type: 'BEFORE_INITIAL_CAPTURE', | ||
payload: args, | ||
@@ -45,3 +45,3 @@ }); | ||
export interface LiftAction { | ||
type: "LIFT"; | ||
type: 'LIFT'; | ||
payload: LiftArgs; | ||
@@ -53,3 +53,3 @@ } | ||
export const lift = (args: LiftArgs): LiftAction => ({ | ||
type: "LIFT", | ||
type: 'LIFT', | ||
payload: args, | ||
@@ -67,3 +67,3 @@ }); | ||
export interface InitialPublishAction { | ||
type: "INITIAL_PUBLISH"; | ||
type: 'INITIAL_PUBLISH'; | ||
payload: InitialPublishArgs; | ||
@@ -75,5 +75,5 @@ } | ||
export const initialPublish = ( | ||
args: InitialPublishArgs | ||
args: InitialPublishArgs, | ||
): InitialPublishAction => ({ | ||
type: "INITIAL_PUBLISH", | ||
type: 'INITIAL_PUBLISH', | ||
payload: args, | ||
@@ -83,3 +83,3 @@ }); | ||
export interface PublishWhileDraggingAction { | ||
type: "PUBLISH_WHILE_DRAGGING"; | ||
type: 'PUBLISH_WHILE_DRAGGING'; | ||
payload: Published; | ||
@@ -93,5 +93,5 @@ } | ||
export const publishWhileDragging = ( | ||
args: PublishWhileDraggingArgs | ||
args: PublishWhileDraggingArgs, | ||
): PublishWhileDraggingAction => ({ | ||
type: "PUBLISH_WHILE_DRAGGING", | ||
type: 'PUBLISH_WHILE_DRAGGING', | ||
payload: args, | ||
@@ -101,3 +101,3 @@ }); | ||
export interface CollectionStartingAction { | ||
type: "COLLECTION_STARTING"; | ||
type: 'COLLECTION_STARTING'; | ||
payload: null; | ||
@@ -109,3 +109,3 @@ } | ||
export const collectionStarting = (): CollectionStartingAction => ({ | ||
type: "COLLECTION_STARTING", | ||
type: 'COLLECTION_STARTING', | ||
payload: null, | ||
@@ -120,3 +120,3 @@ }); | ||
export interface UpdateDroppableScrollAction { | ||
type: "UPDATE_DROPPABLE_SCROLL"; | ||
type: 'UPDATE_DROPPABLE_SCROLL'; | ||
payload: UpdateDroppableScrollArgs; | ||
@@ -128,5 +128,5 @@ } | ||
export const updateDroppableScroll = ( | ||
args: UpdateDroppableScrollArgs | ||
args: UpdateDroppableScrollArgs, | ||
): UpdateDroppableScrollAction => ({ | ||
type: "UPDATE_DROPPABLE_SCROLL", | ||
type: 'UPDATE_DROPPABLE_SCROLL', | ||
payload: args, | ||
@@ -141,3 +141,3 @@ }); | ||
export interface UpdateDroppableIsEnabledAction { | ||
type: "UPDATE_DROPPABLE_IS_ENABLED"; | ||
type: 'UPDATE_DROPPABLE_IS_ENABLED'; | ||
payload: UpdateDroppableIsEnabledArgs; | ||
@@ -150,5 +150,5 @@ } | ||
export const updateDroppableIsEnabled = ( | ||
args: UpdateDroppableIsEnabledArgs | ||
args: UpdateDroppableIsEnabledArgs, | ||
): UpdateDroppableIsEnabledAction => ({ | ||
type: "UPDATE_DROPPABLE_IS_ENABLED", | ||
type: 'UPDATE_DROPPABLE_IS_ENABLED', | ||
payload: args, | ||
@@ -163,3 +163,3 @@ }); | ||
export interface UpdateDroppableIsCombineEnabledAction { | ||
type: "UPDATE_DROPPABLE_IS_COMBINE_ENABLED"; | ||
type: 'UPDATE_DROPPABLE_IS_COMBINE_ENABLED'; | ||
payload: UpdateDroppableIsCombineEnabledArgs; | ||
@@ -172,5 +172,5 @@ } | ||
export const updateDroppableIsCombineEnabled = ( | ||
args: UpdateDroppableIsCombineEnabledArgs | ||
args: UpdateDroppableIsCombineEnabledArgs, | ||
): UpdateDroppableIsCombineEnabledAction => ({ | ||
type: "UPDATE_DROPPABLE_IS_COMBINE_ENABLED", | ||
type: 'UPDATE_DROPPABLE_IS_COMBINE_ENABLED', | ||
payload: args, | ||
@@ -184,3 +184,3 @@ }); | ||
export interface MoveAction { | ||
type: "MOVE"; | ||
type: 'MOVE'; | ||
payload: MoveArgs; | ||
@@ -192,3 +192,3 @@ } | ||
export const move = (args: MoveArgs): MoveAction => ({ | ||
type: "MOVE", | ||
type: 'MOVE', | ||
payload: args, | ||
@@ -202,3 +202,3 @@ }); | ||
export interface MoveByWindowScrollAction { | ||
type: "MOVE_BY_WINDOW_SCROLL"; | ||
type: 'MOVE_BY_WINDOW_SCROLL'; | ||
payload: MoveByWindowScrollArgs; | ||
@@ -210,5 +210,5 @@ } | ||
export const moveByWindowScroll = ( | ||
args: MoveByWindowScrollArgs | ||
args: MoveByWindowScrollArgs, | ||
): MoveByWindowScrollAction => ({ | ||
type: "MOVE_BY_WINDOW_SCROLL", | ||
type: 'MOVE_BY_WINDOW_SCROLL', | ||
payload: args, | ||
@@ -222,3 +222,3 @@ }); | ||
export interface UpdateViewportMaxScrollAction { | ||
type: "UPDATE_VIEWPORT_MAX_SCROLL"; | ||
type: 'UPDATE_VIEWPORT_MAX_SCROLL'; | ||
payload: UpdateViewportMaxScrollArgs; | ||
@@ -231,5 +231,5 @@ } | ||
export const updateViewportMaxScroll = ( | ||
args: UpdateViewportMaxScrollArgs | ||
args: UpdateViewportMaxScrollArgs, | ||
): UpdateViewportMaxScrollAction => ({ | ||
type: "UPDATE_VIEWPORT_MAX_SCROLL", | ||
type: 'UPDATE_VIEWPORT_MAX_SCROLL', | ||
payload: args, | ||
@@ -239,3 +239,3 @@ }); | ||
export interface MoveUpAction { | ||
type: "MOVE_UP"; | ||
type: 'MOVE_UP'; | ||
payload: null; | ||
@@ -247,3 +247,3 @@ } | ||
export const moveUp = (): MoveUpAction => ({ | ||
type: "MOVE_UP", | ||
type: 'MOVE_UP', | ||
payload: null, | ||
@@ -253,3 +253,3 @@ }); | ||
export interface MoveDownAction { | ||
type: "MOVE_DOWN"; | ||
type: 'MOVE_DOWN'; | ||
payload: null; | ||
@@ -261,3 +261,3 @@ } | ||
export const moveDown = (): MoveDownAction => ({ | ||
type: "MOVE_DOWN", | ||
type: 'MOVE_DOWN', | ||
payload: null, | ||
@@ -267,3 +267,3 @@ }); | ||
export interface MoveRightAction { | ||
type: "MOVE_RIGHT"; | ||
type: 'MOVE_RIGHT'; | ||
payload: null; | ||
@@ -275,3 +275,3 @@ } | ||
export const moveRight = (): MoveRightAction => ({ | ||
type: "MOVE_RIGHT", | ||
type: 'MOVE_RIGHT', | ||
payload: null, | ||
@@ -281,3 +281,3 @@ }); | ||
export interface MoveLeftAction { | ||
type: "MOVE_LEFT"; | ||
type: 'MOVE_LEFT'; | ||
payload: null; | ||
@@ -289,3 +289,3 @@ } | ||
export const moveLeft = (): MoveLeftAction => ({ | ||
type: "MOVE_LEFT", | ||
type: 'MOVE_LEFT', | ||
payload: null, | ||
@@ -295,3 +295,3 @@ }); | ||
export interface FlushAction { | ||
type: "FLUSH"; | ||
type: 'FLUSH'; | ||
payload: null; | ||
@@ -303,3 +303,3 @@ } | ||
export const flush = (): FlushAction => ({ | ||
type: "FLUSH", | ||
type: 'FLUSH', | ||
payload: null, | ||
@@ -315,3 +315,3 @@ }); | ||
export interface DropAnimateAction { | ||
type: "DROP_ANIMATE"; | ||
type: 'DROP_ANIMATE'; | ||
payload: AnimateDropArgs; | ||
@@ -323,3 +323,3 @@ } | ||
export const animateDrop = (args: AnimateDropArgs): DropAnimateAction => ({ | ||
type: "DROP_ANIMATE", | ||
type: 'DROP_ANIMATE', | ||
payload: args, | ||
@@ -333,3 +333,3 @@ }); | ||
export interface DropCompleteAction { | ||
type: "DROP_COMPLETE"; | ||
type: 'DROP_COMPLETE'; | ||
payload: DropCompleteArgs; | ||
@@ -341,3 +341,3 @@ } | ||
export const completeDrop = (args: DropCompleteArgs): DropCompleteAction => ({ | ||
type: "DROP_COMPLETE", | ||
type: 'DROP_COMPLETE', | ||
payload: args, | ||
@@ -351,3 +351,3 @@ }); | ||
export interface DropAction { | ||
type: "DROP"; | ||
type: 'DROP'; | ||
payload: DropArgs; | ||
@@ -359,3 +359,3 @@ } | ||
export const drop = (args: DropArgs): DropAction => ({ | ||
type: "DROP", | ||
type: 'DROP', | ||
payload: args, | ||
@@ -366,6 +366,6 @@ }); | ||
export const cancel = () => drop({ reason: "CANCEL" }); | ||
export const cancel = () => drop({ reason: 'CANCEL' }); | ||
export interface DropPendingAction { | ||
type: "DROP_PENDING"; | ||
type: 'DROP_PENDING'; | ||
payload: DropArgs; | ||
@@ -377,3 +377,3 @@ } | ||
export const dropPending = (args: DropArgs): DropPendingAction => ({ | ||
type: "DROP_PENDING", | ||
type: 'DROP_PENDING', | ||
payload: args, | ||
@@ -383,3 +383,3 @@ }); | ||
export interface DropAnimationFinishedAction { | ||
type: "DROP_ANIMATION_FINISHED"; | ||
type: 'DROP_ANIMATION_FINISHED'; | ||
payload: null; | ||
@@ -391,3 +391,3 @@ } | ||
export const dropAnimationFinished = (): DropAnimationFinishedAction => ({ | ||
type: "DROP_ANIMATION_FINISHED", | ||
type: 'DROP_ANIMATION_FINISHED', | ||
payload: null, | ||
@@ -394,0 +394,0 @@ }); |
@@ -1,2 +0,2 @@ | ||
import type { State, DraggingState } from "../../types"; | ||
import type { State, DraggingState } from '../../types'; | ||
@@ -3,0 +3,0 @@ export interface AutoScroller { |
@@ -1,4 +0,4 @@ | ||
import type { Position } from "css-box-model"; | ||
import { add, apply, isEqual, origin } from "../position"; | ||
import type { DroppableDimension, Viewport, Scrollable } from "../../types"; | ||
import type { Position } from 'css-box-model'; | ||
import { add, apply, isEqual, origin } from '../position'; | ||
import type { DroppableDimension, Viewport, Scrollable } from '../../types'; | ||
@@ -96,3 +96,3 @@ interface CanPartiallyScrollArgs { | ||
viewport: Viewport, | ||
change: Position | ||
change: Position, | ||
): boolean => | ||
@@ -107,3 +107,3 @@ canPartiallyScroll({ | ||
viewport: Viewport, | ||
change: Position | ||
change: Position, | ||
): Position | null => { | ||
@@ -126,3 +126,3 @@ if (!canScrollWindow(viewport, change)) { | ||
droppable: DroppableDimension, | ||
change: Position | ||
change: Position, | ||
): boolean => { | ||
@@ -145,3 +145,3 @@ const frame: Scrollable | null = droppable.frame; | ||
droppable: DroppableDimension, | ||
change: Position | ||
change: Position, | ||
): Position | null => { | ||
@@ -148,0 +148,0 @@ const frame: Scrollable | null = droppable.frame; |
@@ -1,3 +0,3 @@ | ||
import memoizeOne from "memoize-one"; | ||
import type { Position } from "css-box-model"; | ||
import memoizeOne from 'memoize-one'; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -7,6 +7,6 @@ DroppableDimension, | ||
DroppableId, | ||
} from "../../../types"; | ||
import { invariant } from "../../../invariant"; | ||
import isPositionInFrame from "../../visibility/is-position-in-frame"; | ||
import { toDroppableList } from "../../dimension-structures"; | ||
} from '../../../types'; | ||
import { invariant } from '../../../invariant'; | ||
import isPositionInFrame from '../../visibility/is-position-in-frame'; | ||
import { toDroppableList } from '../../dimension-structures'; | ||
@@ -28,4 +28,4 @@ const getScrollableDroppables = memoizeOne( | ||
return true; | ||
} | ||
) | ||
}, | ||
), | ||
); | ||
@@ -35,3 +35,3 @@ | ||
target: Position, | ||
droppables: DroppableDimensionMap | ||
droppables: DroppableDimensionMap, | ||
): DroppableDimension | null => { | ||
@@ -41,6 +41,6 @@ const maybe = | ||
(droppable: DroppableDimension): boolean => { | ||
invariant(droppable.frame, "Invalid result"); | ||
invariant(droppable.frame, 'Invalid result'); | ||
return isPositionInFrame(droppable.frame.pageMarginBox)(target); | ||
} | ||
}, | ||
) || null; | ||
@@ -76,3 +76,3 @@ | ||
center, | ||
droppables | ||
droppables, | ||
); | ||
@@ -79,0 +79,0 @@ |
@@ -1,5 +0,5 @@ | ||
import type { Position, Rect } from "css-box-model"; | ||
import type { Scrollable, DroppableDimension } from "../../../types"; | ||
import getScroll from "./get-scroll"; | ||
import { canScrollDroppable } from "../can-scroll"; | ||
import type { Position, Rect } from 'css-box-model'; | ||
import type { Scrollable, DroppableDimension } from '../../../types'; | ||
import getScroll from './get-scroll'; | ||
import { canScrollDroppable } from '../can-scroll'; | ||
@@ -6,0 +6,0 @@ interface Args { |
@@ -1,2 +0,2 @@ | ||
import { warning } from "../../../dev-warning"; | ||
import { warning } from '../../../dev-warning'; | ||
@@ -3,0 +3,0 @@ interface Args { |
@@ -1,2 +0,2 @@ | ||
import type { Rect, Position } from "css-box-model"; | ||
import type { Rect, Position } from 'css-box-model'; | ||
@@ -3,0 +3,0 @@ interface Args { |
@@ -1,4 +0,4 @@ | ||
import getPercentage from "../../get-percentage"; | ||
import config from "../../config"; | ||
import minScroll from "./min-scroll"; | ||
import getPercentage from '../../get-percentage'; | ||
import config from '../../config'; | ||
import minScroll from './min-scroll'; | ||
@@ -5,0 +5,0 @@ const accelerateAt: number = config.durationDampening.accelerateAt; |
@@ -1,4 +0,4 @@ | ||
import type { Rect } from "css-box-model"; | ||
import config from "../../config"; | ||
import type { Axis } from "../../../../../types"; | ||
import type { Rect } from 'css-box-model'; | ||
import config from '../../config'; | ||
import type { Axis } from '../../../../../types'; | ||
@@ -5,0 +5,0 @@ // all in pixels |
@@ -1,9 +0,9 @@ | ||
import type { DistanceThresholds } from "./get-distance-thresholds"; | ||
import getPercentage from "../../get-percentage"; | ||
import config from "../../config"; | ||
import minScroll from "./min-scroll"; | ||
import type { DistanceThresholds } from './get-distance-thresholds'; | ||
import getPercentage from '../../get-percentage'; | ||
import config from '../../config'; | ||
import minScroll from './min-scroll'; | ||
export default ( | ||
distanceToEdge: number, | ||
thresholds: DistanceThresholds | ||
thresholds: DistanceThresholds, | ||
): number => { | ||
@@ -10,0 +10,0 @@ /* |
@@ -1,5 +0,5 @@ | ||
import type { DistanceThresholds } from "./get-distance-thresholds"; | ||
import getValueFromDistance from "./get-value-from-distance"; | ||
import dampenValueByTime from "./dampen-value-by-time"; | ||
import minScroll from "./min-scroll"; | ||
import type { DistanceThresholds } from './get-distance-thresholds'; | ||
import getValueFromDistance from './get-value-from-distance'; | ||
import dampenValueByTime from './dampen-value-by-time'; | ||
import minScroll from './min-scroll'; | ||
@@ -6,0 +6,0 @@ interface Args { |
@@ -1,6 +0,6 @@ | ||
import type { Rect, Spacing } from "css-box-model"; | ||
import getDistanceThresholds from "./get-distance-thresholds"; | ||
import type { DistanceThresholds } from "./get-distance-thresholds"; | ||
import type { Axis } from "../../../../../types"; | ||
import getValue from "./get-value"; | ||
import type { Rect, Spacing } from 'css-box-model'; | ||
import getDistanceThresholds from './get-distance-thresholds'; | ||
import type { DistanceThresholds } from './get-distance-thresholds'; | ||
import type { Axis } from '../../../../../types'; | ||
import getValue from './get-value'; | ||
@@ -7,0 +7,0 @@ interface GetOnAxisArgs { |
@@ -1,6 +0,6 @@ | ||
import type { Position, Rect, Spacing } from "css-box-model"; | ||
import { apply, isEqual, origin } from "../../../position"; | ||
import getScrollOnAxis from "./get-scroll-on-axis"; | ||
import adjustForSizeLimits from "./adjust-for-size-limits"; | ||
import { horizontal, vertical } from "../../../axis"; | ||
import type { Position, Rect, Spacing } from 'css-box-model'; | ||
import { apply, isEqual, origin } from '../../../position'; | ||
import getScrollOnAxis from './get-scroll-on-axis'; | ||
import adjustForSizeLimits from './adjust-for-size-limits'; | ||
import { horizontal, vertical } from '../../../axis'; | ||
@@ -7,0 +7,0 @@ // will replace -0 and replace with +0 |
@@ -1,5 +0,5 @@ | ||
import type { Position, Rect } from "css-box-model"; | ||
import type { Viewport } from "../../../types"; | ||
import getScroll from "./get-scroll"; | ||
import { canScrollWindow } from "../can-scroll"; | ||
import type { Position, Rect } from 'css-box-model'; | ||
import type { Viewport } from '../../../types'; | ||
import getScroll from './get-scroll'; | ||
import { canScrollWindow } from '../can-scroll'; | ||
@@ -6,0 +6,0 @@ interface Args { |
@@ -1,7 +0,7 @@ | ||
import rafSchd from "raf-schd"; | ||
import type { Position } from "css-box-model"; | ||
import type { DraggingState, DroppableId } from "../../../types"; | ||
import scroll from "./scroll"; | ||
import { invariant } from "../../../invariant"; | ||
import * as timings from "../../../debug/timings"; | ||
import rafSchd from 'raf-schd'; | ||
import type { Position } from 'css-box-model'; | ||
import type { DraggingState, DroppableId } from '../../../types'; | ||
import scroll from './scroll'; | ||
import { invariant } from '../../../invariant'; | ||
import * as timings from '../../../debug/timings'; | ||
@@ -33,3 +33,3 @@ export interface PublicArgs { | ||
const tryScroll = (state: DraggingState): void => { | ||
invariant(dragging, "Cannot fluid scroll if not dragging"); | ||
invariant(dragging, 'Cannot fluid scroll if not dragging'); | ||
const { shouldUseTimeDampening, dragStartTime } = dragging; | ||
@@ -47,4 +47,4 @@ | ||
const start = (state: DraggingState) => { | ||
timings.start("starting fluid scroller"); | ||
invariant(!dragging, "Cannot start auto scrolling when already started"); | ||
timings.start('starting fluid scroller'); | ||
invariant(!dragging, 'Cannot start auto scrolling when already started'); | ||
const dragStartTime: number = Date.now(); | ||
@@ -68,3 +68,3 @@ | ||
}; | ||
timings.finish("starting fluid scroller"); | ||
timings.finish('starting fluid scroller'); | ||
@@ -71,0 +71,0 @@ // we know an auto scroll is needed - let's do it! |
@@ -1,2 +0,2 @@ | ||
import type { Position, Rect } from "css-box-model"; | ||
import type { Position, Rect } from 'css-box-model'; | ||
import type { | ||
@@ -8,7 +8,7 @@ DraggingState, | ||
Viewport, | ||
} from "../../../types"; | ||
import getBestScrollableDroppable from "./get-best-scrollable-droppable"; | ||
import whatIsDraggedOver from "../../droppable/what-is-dragged-over"; | ||
import getWindowScrollChange from "./get-window-scroll-change"; | ||
import getDroppableScrollChange from "./get-droppable-scroll-change"; | ||
} from '../../../types'; | ||
import getBestScrollableDroppable from './get-best-scrollable-droppable'; | ||
import whatIsDraggedOver from '../../droppable/what-is-dragged-over'; | ||
import getWindowScrollChange from './get-window-scroll-change'; | ||
import getDroppableScrollChange from './get-droppable-scroll-change'; | ||
@@ -15,0 +15,0 @@ interface Args { |
@@ -1,9 +0,9 @@ | ||
import type { Position } from "css-box-model"; | ||
import createFluidScroller from "./fluid-scroller"; | ||
import type { FluidScroller } from "./fluid-scroller"; | ||
import createJumpScroller from "./jump-scroller"; | ||
import type { JumpScroller } from "./jump-scroller"; | ||
import type { AutoScroller } from "./auto-scroller-types"; | ||
import type { DroppableId, State } from "../../types"; | ||
import type { MoveArgs } from "../action-creators"; | ||
import type { Position } from 'css-box-model'; | ||
import createFluidScroller from './fluid-scroller'; | ||
import type { FluidScroller } from './fluid-scroller'; | ||
import createJumpScroller from './jump-scroller'; | ||
import type { JumpScroller } from './jump-scroller'; | ||
import type { AutoScroller } from './auto-scroller-types'; | ||
import type { DroppableId, State } from '../../types'; | ||
import type { MoveArgs } from '../action-creators'; | ||
@@ -34,7 +34,7 @@ export interface Args { | ||
// Only allowing auto scrolling in the DRAGGING phase | ||
if (state.phase !== "DRAGGING") { | ||
if (state.phase !== 'DRAGGING') { | ||
return; | ||
} | ||
if (state.movementMode === "FLUID") { | ||
if (state.movementMode === 'FLUID') { | ||
fluidScroller.scroll(state); | ||
@@ -41,0 +41,0 @@ return; |
@@ -1,4 +0,4 @@ | ||
import type { Position } from "css-box-model"; | ||
import { invariant } from "../../invariant"; | ||
import { add, subtract } from "../position"; | ||
import type { Position } from 'css-box-model'; | ||
import { invariant } from '../../invariant'; | ||
import { add, subtract } from '../position'; | ||
import { | ||
@@ -9,5 +9,5 @@ canScrollWindow, | ||
getDroppableOverlap, | ||
} from "./can-scroll"; | ||
import whatIsDraggedOver from "../droppable/what-is-dragged-over"; | ||
import type { MoveArgs } from "../action-creators"; | ||
} from './can-scroll'; | ||
import whatIsDraggedOver from '../droppable/what-is-dragged-over'; | ||
import type { MoveArgs } from '../action-creators'; | ||
import type { | ||
@@ -18,3 +18,3 @@ DroppableDimension, | ||
DroppableId, | ||
} from "../../types"; | ||
} from '../../types'; | ||
@@ -43,3 +43,3 @@ interface Args { | ||
droppable: DroppableDimension, | ||
change: Position | ||
change: Position, | ||
): Remainder | null => { | ||
@@ -70,3 +70,3 @@ // Droppable cannot absorb any of the scroll | ||
viewport: Viewport, | ||
change: Position | ||
change: Position, | ||
): Position | null => { | ||
@@ -108,3 +108,3 @@ if (!isWindowScrollAllowed) { | ||
destination, | ||
"Cannot perform a jump scroll when there is no destination" | ||
'Cannot perform a jump scroll when there is no destination', | ||
); | ||
@@ -117,3 +117,3 @@ | ||
state.dimensions.droppables[destination], | ||
request | ||
request, | ||
); | ||
@@ -130,3 +130,3 @@ | ||
viewport, | ||
droppableRemainder | ||
droppableRemainder, | ||
); | ||
@@ -133,0 +133,0 @@ |
@@ -1,25 +0,25 @@ | ||
import type { HorizontalAxis, VerticalAxis } from "../types"; | ||
import type { HorizontalAxis, VerticalAxis } from '../types'; | ||
export const vertical: VerticalAxis = { | ||
direction: "vertical", | ||
line: "y", | ||
crossAxisLine: "x", | ||
start: "top", | ||
end: "bottom", | ||
size: "height", | ||
crossAxisStart: "left", | ||
crossAxisEnd: "right", | ||
crossAxisSize: "width", | ||
direction: 'vertical', | ||
line: 'y', | ||
crossAxisLine: 'x', | ||
start: 'top', | ||
end: 'bottom', | ||
size: 'height', | ||
crossAxisStart: 'left', | ||
crossAxisEnd: 'right', | ||
crossAxisSize: 'width', | ||
}; | ||
export const horizontal: HorizontalAxis = { | ||
direction: "horizontal", | ||
line: "x", | ||
crossAxisLine: "y", | ||
start: "left", | ||
end: "right", | ||
size: "width", | ||
crossAxisStart: "top", | ||
crossAxisEnd: "bottom", | ||
crossAxisSize: "height", | ||
direction: 'horizontal', | ||
line: 'x', | ||
crossAxisLine: 'y', | ||
start: 'left', | ||
end: 'right', | ||
size: 'width', | ||
crossAxisStart: 'top', | ||
crossAxisEnd: 'bottom', | ||
crossAxisSize: 'height', | ||
}; |
@@ -8,7 +8,7 @@ import type { | ||
DisplacedBy, | ||
} from "../../types"; | ||
import removeDraggableFromList from "../remove-draggable-from-list"; | ||
import isHomeOf from "../droppable/is-home-of"; | ||
import { emptyGroups } from "../no-impact"; | ||
import getDisplacementGroups from "../get-displacement-groups"; | ||
} from '../../types'; | ||
import removeDraggableFromList from '../remove-draggable-from-list'; | ||
import isHomeOf from '../droppable/is-home-of'; | ||
import { emptyGroups } from '../no-impact'; | ||
import getDisplacementGroups from '../get-displacement-groups'; | ||
@@ -30,3 +30,3 @@ interface Args { | ||
inHomeList: boolean; | ||
} | ||
}, | ||
): number { | ||
@@ -65,3 +65,3 @@ if (!draggables.length) { | ||
at: { | ||
type: "REORDER", | ||
type: 'REORDER', | ||
destination: { | ||
@@ -99,3 +99,3 @@ droppableId: destination.descriptor.id, | ||
const match = insideDestination.find( | ||
(item: DraggableDimension) => item.descriptor.index === index | ||
(item: DraggableDimension) => item.descriptor.index === index, | ||
); | ||
@@ -113,3 +113,3 @@ | ||
draggable, | ||
insideDestination | ||
insideDestination, | ||
); | ||
@@ -133,3 +133,3 @@ | ||
at: { | ||
type: "REORDER", | ||
type: 'REORDER', | ||
destination: { | ||
@@ -136,0 +136,0 @@ droppableId: destination.descriptor.id, |
@@ -1,6 +0,6 @@ | ||
import type { State, DraggableId } from "../types"; | ||
import type { State, DraggableId } from '../types'; | ||
export default (state: State, id: DraggableId): boolean => { | ||
// Ready to go! | ||
if (state.phase === "IDLE") { | ||
if (state.phase === 'IDLE') { | ||
return true; | ||
@@ -10,3 +10,3 @@ } | ||
// Can lift depending on the type of drop animation | ||
if (state.phase !== "DROP_ANIMATING") { | ||
if (state.phase !== 'DROP_ANIMATING') { | ||
return false; | ||
@@ -28,3 +28,3 @@ } | ||
// if cancelling - disallow lifting | ||
return state.completed.result.reason === "DROP"; | ||
return state.completed.result.reason === 'DROP'; | ||
}; |
/* eslint-disable no-underscore-dangle */ | ||
import { applyMiddleware, compose, createStore, StoreEnhancer } from "redux"; | ||
import type { Announce, Responders } from "../types"; | ||
import type { FocusMarshal } from "../view/use-focus-marshal/focus-marshal-types"; | ||
import type { StyleMarshal } from "../view/use-style-marshal/style-marshal-types"; | ||
import type { AutoScroller } from "./auto-scroller/auto-scroller-types"; | ||
import type { DimensionMarshal } from "./dimension-marshal/dimension-marshal-types"; | ||
import autoScroll from "./middleware/auto-scroll"; | ||
import dimensionMarshalStopper from "./middleware/dimension-marshal-stopper"; | ||
import dropAnimationFinish from "./middleware/drop/drop-animation-finish-middleware"; | ||
import dropAnimationFlushOnScroll from "./middleware/drop/drop-animation-flush-on-scroll-middleware"; | ||
import drop from "./middleware/drop/drop-middleware"; | ||
import focus from "./middleware/focus"; | ||
import lift from "./middleware/lift"; | ||
import pendingDrop from "./middleware/pending-drop"; | ||
import responders from "./middleware/responders/responders-middleware"; | ||
import scrollListener from "./middleware/scroll-listener"; | ||
import style from "./middleware/style"; | ||
import reducer from "./reducer"; | ||
import type { Store } from "./store-types"; | ||
import { applyMiddleware, createStore, compose, StoreEnhancer } from 'redux'; | ||
import reducer from './reducer'; | ||
import lift from './middleware/lift'; | ||
import style from './middleware/style'; | ||
import drop from './middleware/drop/drop-middleware'; | ||
import scrollListener from './middleware/scroll-listener'; | ||
import responders from './middleware/responders/responders-middleware'; | ||
import dropAnimationFinish from './middleware/drop/drop-animation-finish-middleware'; | ||
import dropAnimationFlushOnScroll from './middleware/drop/drop-animation-flush-on-scroll-middleware'; | ||
import dimensionMarshalStopper from './middleware/dimension-marshal-stopper'; | ||
import focus from './middleware/focus'; | ||
import autoScroll from './middleware/auto-scroll'; | ||
import pendingDrop from './middleware/pending-drop'; | ||
import type { DimensionMarshal } from './dimension-marshal/dimension-marshal-types'; | ||
import type { FocusMarshal } from '../view/use-focus-marshal/focus-marshal-types'; | ||
import type { StyleMarshal } from '../view/use-style-marshal/style-marshal-types'; | ||
import type { AutoScroller } from './auto-scroller/auto-scroller-types'; | ||
import type { Responders, Announce } from '../types'; | ||
import type { Store } from './store-types'; | ||
@@ -41,7 +41,7 @@ // For more config | ||
const composeEnhancers = | ||
process.env.NODE_ENV !== "production" && | ||
typeof window !== "undefined" && | ||
process.env.NODE_ENV !== 'production' && | ||
typeof window !== 'undefined' && | ||
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ | ||
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ | ||
name: "@hello-pangea/dnd", | ||
name: '@hello-pangea/dnd', | ||
}) | ||
@@ -109,5 +109,5 @@ : compose; | ||
// Fire responders for consumers (after update to store) | ||
responders(getResponders, announce) | ||
) | ||
) | ||
responders(getResponders, announce), | ||
), | ||
), | ||
); |
@@ -1,8 +0,8 @@ | ||
import type { DraggableId, LiftEffect } from "../types"; | ||
import type { DraggableId, LiftEffect } from '../types'; | ||
export default function didStartAfterCritical( | ||
draggableId: DraggableId, | ||
afterCritical: LiftEffect | ||
afterCritical: LiftEffect, | ||
): boolean { | ||
return Boolean(afterCritical.effected[draggableId]); | ||
} |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -8,3 +8,3 @@ CollectionStartingActionCreator, | ||
UpdateDroppableIsCombineEnabledActionCreator, | ||
} from "../action-creators"; | ||
} from '../action-creators'; | ||
import type { | ||
@@ -16,3 +16,3 @@ DroppableId, | ||
Viewport, | ||
} from "../../types"; | ||
} from '../../types'; | ||
@@ -31,3 +31,3 @@ export interface StartPublishingResult { | ||
id: DroppableId, | ||
isEnabled: boolean | ||
isEnabled: boolean, | ||
) => void; | ||
@@ -34,0 +34,0 @@ updateDroppableScroll: (id: DroppableId, newScroll: Position) => void; |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import { invariant } from "../../invariant"; | ||
import type { Position } from 'css-box-model'; | ||
import { invariant } from '../../invariant'; | ||
import type { | ||
@@ -7,6 +7,6 @@ DimensionMarshal, | ||
StartPublishingResult, | ||
} from "./dimension-marshal-types"; | ||
import createPublisher from "./while-dragging-publisher"; | ||
import type { WhileDraggingPublisher } from "./while-dragging-publisher"; | ||
import getInitialPublish from "./get-initial-publish"; | ||
} from './dimension-marshal-types'; | ||
import createPublisher from './while-dragging-publisher'; | ||
import type { WhileDraggingPublisher } from './while-dragging-publisher'; | ||
import getInitialPublish from './get-initial-publish'; | ||
import type { | ||
@@ -19,3 +19,3 @@ Registry, | ||
RegistryEvent, | ||
} from "../registry/registry-types"; | ||
} from '../registry/registry-types'; | ||
import type { | ||
@@ -27,4 +27,4 @@ DroppableId, | ||
DraggableDescriptor, | ||
} from "../../types"; | ||
import { warning } from "../../dev-warning"; | ||
} from '../../types'; | ||
import { warning } from '../../dev-warning'; | ||
@@ -39,3 +39,3 @@ interface Collection { | ||
dragging: DraggableDescriptor, | ||
entry: DraggableEntry | ||
entry: DraggableEntry, | ||
): boolean { | ||
@@ -52,6 +52,6 @@ // do not publish updates for the critical draggable | ||
const home: DroppableEntry = registry.droppable.getById( | ||
entry.descriptor.droppableId | ||
entry.descriptor.droppableId, | ||
); | ||
if (home.descriptor.mode !== "virtual") { | ||
if (home.descriptor.mode !== 'virtual') { | ||
warning(` | ||
@@ -61,3 +61,3 @@ You are attempting to add or remove a Draggable [id: ${entry.descriptor.id}] | ||
See https://github.com/react-forked/dnd/blob/main/docs/patterns/virtual-lists.md | ||
See https://github.com/hello-pangea/dnd/blob/main/docs/patterns/virtual-lists.md | ||
`); | ||
@@ -84,3 +84,3 @@ return false; | ||
registry.droppable.exists(id), | ||
`Cannot update is enabled flag of Droppable ${id} as it is not registered` | ||
`Cannot update is enabled flag of Droppable ${id} as it is not registered`, | ||
); | ||
@@ -101,3 +101,3 @@ | ||
id: DroppableId, | ||
isCombineEnabled: boolean | ||
isCombineEnabled: boolean, | ||
) => { | ||
@@ -111,3 +111,3 @@ // no need to update | ||
registry.droppable.exists(id), | ||
`Cannot update isCombineEnabled flag of Droppable ${id} as it is not registered` | ||
`Cannot update isCombineEnabled flag of Droppable ${id} as it is not registered`, | ||
); | ||
@@ -126,3 +126,3 @@ | ||
registry.droppable.exists(id), | ||
`Cannot update the scroll on Droppable ${id} as it is not registered` | ||
`Cannot update the scroll on Droppable ${id} as it is not registered`, | ||
); | ||
@@ -164,3 +164,3 @@ | ||
collection, | ||
"Should only be subscribed when a collection is occurring" | ||
'Should only be subscribed when a collection is occurring', | ||
); | ||
@@ -171,3 +171,3 @@ // The dragging item can be add and removed when using a clone | ||
if (event.type === "ADDITION") { | ||
if (event.type === 'ADDITION') { | ||
if (shouldPublishUpdate(registry, dragging, event.value)) { | ||
@@ -177,3 +177,3 @@ publisher.add(event.value); | ||
} | ||
if (event.type === "REMOVAL") { | ||
if (event.type === 'REMOVAL') { | ||
if (shouldPublishUpdate(registry, dragging, event.value)) { | ||
@@ -188,9 +188,9 @@ publisher.remove(event.value); | ||
!collection, | ||
"Cannot start capturing critical dimensions as there is already a collection" | ||
'Cannot start capturing critical dimensions as there is already a collection', | ||
); | ||
const entry: DraggableEntry = registry.draggable.getById( | ||
request.draggableId | ||
request.draggableId, | ||
); | ||
const home: DroppableEntry = registry.droppable.getById( | ||
entry.descriptor.droppableId | ||
entry.descriptor.droppableId, | ||
); | ||
@@ -197,0 +197,0 @@ |
@@ -1,4 +0,4 @@ | ||
import type { Position } from "css-box-model"; | ||
import * as timings from "../../debug/timings"; | ||
import type { StartPublishingResult } from "./dimension-marshal-types"; | ||
import type { Position } from 'css-box-model'; | ||
import * as timings from '../../debug/timings'; | ||
import type { StartPublishingResult } from './dimension-marshal-types'; | ||
import type { | ||
@@ -8,4 +8,4 @@ Registry, | ||
DroppableEntry, | ||
} from "../registry/registry-types"; | ||
import { toDraggableMap, toDroppableMap } from "../dimension-structures"; | ||
} from '../registry/registry-types'; | ||
import { toDraggableMap, toDroppableMap } from '../dimension-structures'; | ||
import type { | ||
@@ -19,4 +19,4 @@ DroppableDescriptor, | ||
Viewport, | ||
} from "../../types"; | ||
import getViewport from "../../view/window/get-viewport"; | ||
} from '../../types'; | ||
import getViewport from '../../view/window/get-viewport'; | ||
@@ -34,3 +34,3 @@ interface Args { | ||
}: Args): StartPublishingResult => { | ||
const timingKey = "Initial collection from DOM"; | ||
const timingKey = 'Initial collection from DOM'; | ||
timings.start(timingKey); | ||
@@ -46,3 +46,3 @@ const viewport: Viewport = getViewport(); | ||
(entry: DroppableEntry): DroppableDimension => | ||
entry.callbacks.getDimensionAndWatchScroll(windowScroll, scrollOptions) | ||
entry.callbacks.getDimensionAndWatchScroll(windowScroll, scrollOptions), | ||
); | ||
@@ -54,3 +54,3 @@ | ||
(entry: DraggableEntry): DraggableDimension => | ||
entry.getDimension(windowScroll) | ||
entry.getDimension(windowScroll), | ||
); | ||
@@ -57,0 +57,0 @@ |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -11,3 +11,3 @@ DraggableId, | ||
DraggableIdMap, | ||
} from "../../types"; | ||
} from '../../types'; | ||
import type { | ||
@@ -18,5 +18,5 @@ DroppableEntry, | ||
DraggableEntryMap, | ||
} from "../registry/registry-types"; | ||
import * as timings from "../../debug/timings"; | ||
import { origin } from "../position"; | ||
} from '../registry/registry-types'; | ||
import * as timings from '../../debug/timings'; | ||
import { origin } from '../position'; | ||
@@ -51,3 +51,3 @@ export interface WhileDraggingPublisher { | ||
const timingKey = "Publish collection from DOM"; | ||
const timingKey = 'Publish collection from DOM'; | ||
@@ -77,3 +77,3 @@ export default function createPublisher({ | ||
(id: DraggableId): DraggableDimension => | ||
registry.draggable.getById(id).getDimension(origin) | ||
registry.draggable.getById(id).getDimension(origin), | ||
) | ||
@@ -84,3 +84,3 @@ // Dimensions are not guarenteed to be ordered in the same order as keys | ||
(a: DraggableDimension, b: DraggableDimension): number => | ||
a.descriptor.index - b.descriptor.index | ||
a.descriptor.index - b.descriptor.index, | ||
); | ||
@@ -97,3 +97,3 @@ | ||
}; | ||
} | ||
}, | ||
); | ||
@@ -100,0 +100,0 @@ |
@@ -1,2 +0,2 @@ | ||
import memoizeOne from "memoize-one"; | ||
import memoizeOne from 'memoize-one'; | ||
import type { | ||
@@ -7,3 +7,3 @@ DroppableDimension, | ||
DraggableDimensionMap, | ||
} from "../types"; | ||
} from '../types'; | ||
@@ -14,3 +14,3 @@ export const toDroppableMap = memoizeOne((droppables: DroppableDimension[]) => | ||
return previous; | ||
}, {}) | ||
}, {}), | ||
); | ||
@@ -22,3 +22,3 @@ | ||
return previous; | ||
}, {}) | ||
}, {}), | ||
); | ||
@@ -28,3 +28,3 @@ | ||
(droppables: DroppableDimensionMap): DroppableDimension[] => | ||
Object.values(droppables) | ||
Object.values(droppables), | ||
); | ||
@@ -34,3 +34,3 @@ | ||
(draggables: DraggableDimensionMap): DraggableDimension[] => | ||
Object.values(draggables) | ||
Object.values(draggables), | ||
); |
@@ -1,2 +0,2 @@ | ||
import type { BoxModel, Position } from "css-box-model"; | ||
import type { BoxModel, Position } from 'css-box-model'; | ||
import type { | ||
@@ -9,7 +9,7 @@ Axis, | ||
ScrollSize, | ||
} from "../../types"; | ||
import { vertical, horizontal } from "../axis"; | ||
import { origin } from "../position"; | ||
import getMaxScroll from "../get-max-scroll"; | ||
import getSubject from "./util/get-subject"; | ||
} from '../../types'; | ||
import { vertical, horizontal } from '../axis'; | ||
import { origin } from '../position'; | ||
import getMaxScroll from '../get-max-scroll'; | ||
import getSubject from './util/get-subject'; | ||
@@ -29,3 +29,3 @@ export interface Closest { | ||
isFixedOnPage: boolean; | ||
direction: "vertical" | "horizontal"; | ||
direction: 'vertical' | 'horizontal'; | ||
client: BoxModel; | ||
@@ -80,3 +80,3 @@ // is null when in a fixed container | ||
const axis: Axis = direction === "vertical" ? vertical : horizontal; | ||
const axis: Axis = direction === 'vertical' ? vertical : horizontal; | ||
@@ -83,0 +83,0 @@ const subject: DroppableSubject = getSubject({ |
@@ -1,6 +0,6 @@ | ||
import type { DraggableDimension, DroppableDimension } from "../../types"; | ||
import type { DraggableDimension, DroppableDimension } from '../../types'; | ||
export default ( | ||
draggable: DraggableDimension, | ||
destination: DroppableDimension | ||
destination: DroppableDimension, | ||
): boolean => draggable.descriptor.droppableId === destination.descriptor.id; |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import { invariant } from "../../invariant"; | ||
import type { Position } from 'css-box-model'; | ||
import { invariant } from '../../invariant'; | ||
import type { | ||
@@ -7,9 +7,9 @@ DroppableDimension, | ||
DroppableSubject, | ||
} from "../../types"; | ||
import { negate, subtract } from "../position"; | ||
import getSubject from "./util/get-subject"; | ||
} from '../../types'; | ||
import { negate, subtract } from '../position'; | ||
import getSubject from './util/get-subject'; | ||
export default ( | ||
droppable: DroppableDimension, | ||
newScroll: Position | ||
newScroll: Position, | ||
): DroppableDimension => { | ||
@@ -16,0 +16,0 @@ invariant(droppable.frame); |
@@ -1,3 +0,3 @@ | ||
import type { DraggableDescriptor, DragImpact } from "../../types"; | ||
import whatIsDraggedOver from "./what-is-dragged-over"; | ||
import type { DraggableDescriptor, DragImpact } from '../../types'; | ||
import whatIsDraggedOver from './what-is-dragged-over'; | ||
@@ -4,0 +4,0 @@ // use placeholder if dragged over |
@@ -1,4 +0,4 @@ | ||
import { getRect } from "css-box-model"; | ||
import { getRect } from 'css-box-model'; | ||
import type { Rect, Spacing } from "css-box-model"; | ||
import type { Rect, Spacing } from 'css-box-model'; | ||
@@ -5,0 +5,0 @@ export default (frame: Spacing, subject: Spacing): Rect | null => { |
@@ -1,3 +0,3 @@ | ||
import { getRect } from "css-box-model"; | ||
import type { Rect, Spacing, BoxModel } from "css-box-model"; | ||
import { getRect } from 'css-box-model'; | ||
import type { Rect, Spacing, BoxModel } from 'css-box-model'; | ||
import type { | ||
@@ -8,5 +8,5 @@ Axis, | ||
PlaceholderInSubject, | ||
} from "../../../types"; | ||
import executeClip from "./clip"; | ||
import { offsetByPosition } from "../../spacing"; | ||
} from '../../../types'; | ||
import executeClip from './clip'; | ||
import { offsetByPosition } from '../../spacing'; | ||
@@ -24,3 +24,3 @@ const scroll = (target: Spacing, frame?: Scrollable | null): Spacing => { | ||
axis: Axis, | ||
withPlaceholder?: PlaceholderInSubject | null | ||
withPlaceholder?: PlaceholderInSubject | null, | ||
): Spacing => { | ||
@@ -27,0 +27,0 @@ if (withPlaceholder && withPlaceholder.increasedBy) { |
@@ -1,2 +0,2 @@ | ||
import type { DroppableId, DropResult } from "../../types"; | ||
import type { DroppableId, DropResult } from '../../types'; | ||
@@ -3,0 +3,0 @@ export default (result: DropResult): DroppableId | null => { |
@@ -1,2 +0,2 @@ | ||
import type { ImpactLocation, DroppableId, DragImpact } from "../../types"; | ||
import type { ImpactLocation, DroppableId, DragImpact } from '../../types'; | ||
@@ -10,3 +10,3 @@ export default (impact: DragImpact): DroppableId | null => { | ||
if (at.type === "REORDER") { | ||
if (at.type === 'REORDER') { | ||
return at.destination.droppableId; | ||
@@ -13,0 +13,0 @@ } |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import { invariant } from "../../invariant"; | ||
import type { Position } from 'css-box-model'; | ||
import { invariant } from '../../invariant'; | ||
import type { | ||
@@ -11,8 +11,8 @@ Axis, | ||
PlaceholderInSubject, | ||
} from "../../types"; | ||
import getDraggablesInsideDroppable from "../get-draggables-inside-droppable"; | ||
import { add, patch } from "../position"; | ||
import getSubject from "./util/get-subject"; | ||
import isHomeOf from "./is-home-of"; | ||
import getDisplacedBy from "../get-displaced-by"; | ||
} from '../../types'; | ||
import getDraggablesInsideDroppable from '../get-draggables-inside-droppable'; | ||
import { add, patch } from '../position'; | ||
import getSubject from './util/get-subject'; | ||
import isHomeOf from './is-home-of'; | ||
import getDisplacedBy from '../get-displaced-by'; | ||
@@ -22,3 +22,3 @@ const getRequiredGrowthForPlaceholder = ( | ||
placeholderSize: Position, | ||
draggables: DraggableDimensionMap | ||
draggables: DraggableDimensionMap, | ||
): Position | null => { | ||
@@ -29,3 +29,3 @@ const axis: Axis = droppable.axis; | ||
// so counting them does not help. | ||
if (droppable.descriptor.mode === "virtual") { | ||
if (droppable.descriptor.mode === 'virtual') { | ||
return patch(axis.line, placeholderSize[axis.line]); | ||
@@ -39,3 +39,3 @@ } | ||
droppable.descriptor.id, | ||
draggables | ||
draggables, | ||
); | ||
@@ -45,3 +45,3 @@ const spaceUsed: number = insideDroppable.reduce( | ||
sum + dimension.client.marginBox[axis.size], | ||
0 | ||
0, | ||
); | ||
@@ -71,3 +71,3 @@ const requiredSpace: number = spaceUsed + placeholderSize[axis.line]; | ||
draggable: DraggableDimension, | ||
draggables: DraggableDimensionMap | ||
draggables: DraggableDimensionMap, | ||
): DroppableDimension => { | ||
@@ -78,3 +78,3 @@ const frame: Scrollable | null = droppable.frame; | ||
!isHomeOf(draggable, droppable), | ||
"Should not add placeholder space to home list" | ||
'Should not add placeholder space to home list', | ||
); | ||
@@ -84,3 +84,3 @@ | ||
!droppable.subject.withPlaceholder, | ||
"Cannot add placeholder size to a subject when it already has one" | ||
'Cannot add placeholder size to a subject when it already has one', | ||
); | ||
@@ -90,3 +90,3 @@ | ||
droppable.axis, | ||
draggable.displaceBy | ||
draggable.displaceBy, | ||
).point; | ||
@@ -97,3 +97,3 @@ | ||
placeholderSize, | ||
draggables | ||
draggables, | ||
); | ||
@@ -140,3 +140,3 @@ | ||
export const removePlaceholder = ( | ||
droppable: DroppableDimension | ||
droppable: DroppableDimension, | ||
): DroppableDimension => { | ||
@@ -146,3 +146,3 @@ const added: PlaceholderInSubject | null = droppable.subject.withPlaceholder; | ||
added, | ||
"Cannot remove placeholder form subject when there was none" | ||
'Cannot remove placeholder form subject when there was none', | ||
); | ||
@@ -169,3 +169,3 @@ | ||
oldMaxScroll, | ||
"Expected droppable with frame to have old max frame scroll when removing placeholder" | ||
'Expected droppable with frame to have old max frame scroll when removing placeholder', | ||
); | ||
@@ -172,0 +172,0 @@ |
@@ -1,5 +0,5 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Viewport, DraggableDimension } from "../../../types"; | ||
import { add, subtract } from "../../position"; | ||
import withViewportDisplacement from "../../with-scroll-change/with-viewport-displacement"; | ||
import type { Position } from 'css-box-model'; | ||
import type { Viewport, DraggableDimension } from '../../../types'; | ||
import { add, subtract } from '../../position'; | ||
import withViewportDisplacement from '../../with-scroll-change/with-viewport-displacement'; | ||
@@ -19,3 +19,3 @@ interface Args { | ||
viewport, | ||
pageBorderBoxCenter | ||
pageBorderBoxCenter, | ||
); | ||
@@ -25,3 +25,3 @@ | ||
withoutPageScrollChange, | ||
draggable.page.borderBox.center | ||
draggable.page.borderBox.center, | ||
); | ||
@@ -28,0 +28,0 @@ |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -9,5 +9,5 @@ DroppableDimension, | ||
LiftEffect, | ||
} from "../../../types"; | ||
import getPageBorderBoxCenterFromImpact from "../get-page-border-box-center"; | ||
import getClientFromPageBorderBoxCenter from "./get-client-from-page-border-box-center"; | ||
} from '../../../types'; | ||
import getPageBorderBoxCenterFromImpact from '../get-page-border-box-center'; | ||
import getClientFromPageBorderBoxCenter from './get-client-from-page-border-box-center'; | ||
@@ -14,0 +14,0 @@ interface Args { |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -9,6 +9,6 @@ DragImpact, | ||
LiftEffect, | ||
} from "../../../types"; | ||
import whenCombining from "./when-combining"; | ||
import whenReordering from "./when-reordering"; | ||
import withDroppableDisplacement from "../../with-scroll-change/with-droppable-displacement"; | ||
} from '../../../types'; | ||
import whenCombining from './when-combining'; | ||
import whenReordering from './when-reordering'; | ||
import withDroppableDisplacement from '../../with-scroll-change/with-droppable-displacement'; | ||
@@ -41,3 +41,3 @@ interface Args { | ||
if (at.type === "REORDER") { | ||
if (at.type === 'REORDER') { | ||
return whenReordering({ | ||
@@ -44,0 +44,0 @@ impact, |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import { invariant } from "../../../invariant"; | ||
import type { Position } from 'css-box-model'; | ||
import { invariant } from '../../../invariant'; | ||
import type { | ||
@@ -9,6 +9,6 @@ DraggableDimensionMap, | ||
DragImpact, | ||
} from "../../../types"; | ||
import { add } from "../../position"; | ||
import getCombinedItemDisplacement from "../../get-combined-item-displacement"; | ||
import { tryGetCombine } from "../../get-impact-location"; | ||
} from '../../../types'; | ||
import { add } from '../../position'; | ||
import getCombinedItemDisplacement from '../../get-combined-item-displacement'; | ||
import { tryGetCombine } from '../../get-impact-location'; | ||
@@ -15,0 +15,0 @@ interface Args { |
@@ -1,3 +0,3 @@ | ||
import { offset } from "css-box-model"; | ||
import type { Position, BoxModel } from "css-box-model"; | ||
import { offset } from 'css-box-model'; | ||
import type { Position, BoxModel } from 'css-box-model'; | ||
import type { | ||
@@ -11,7 +11,7 @@ Axis, | ||
LiftEffect, | ||
} from "../../../types"; | ||
import { goBefore, goAfter, goIntoStart } from "../move-relative-to"; | ||
import getDraggablesInsideDroppable from "../../get-draggables-inside-droppable"; | ||
import { negate } from "../../position"; | ||
import didStartAfterCritical from "../../did-start-after-critical"; | ||
} from '../../../types'; | ||
import { goBefore, goAfter, goIntoStart } from '../move-relative-to'; | ||
import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable'; | ||
import { negate } from '../../position'; | ||
import didStartAfterCritical from '../../did-start-after-critical'; | ||
@@ -37,3 +37,3 @@ interface NewHomeArgs { | ||
droppable.descriptor.id, | ||
draggables | ||
draggables, | ||
); | ||
@@ -99,3 +99,3 @@ | ||
last.page, | ||
negate(afterCritical.displacedBy.point) | ||
negate(afterCritical.displacedBy.point), | ||
); | ||
@@ -102,0 +102,0 @@ return goAfter({ |
@@ -1,4 +0,4 @@ | ||
import type { Position, BoxModel, Rect } from "css-box-model"; | ||
import { patch } from "../position"; | ||
import type { Axis } from "../../types"; | ||
import type { Position, BoxModel, Rect } from 'css-box-model'; | ||
import { patch } from '../position'; | ||
import type { Axis } from '../../types'; | ||
@@ -13,3 +13,3 @@ interface Args { | ||
axis: Axis, | ||
box: BoxModel | ||
box: BoxModel, | ||
): number => box.margin[axis.start] + box.borderBox[axis.size] / 2; | ||
@@ -26,3 +26,3 @@ | ||
target: Rect, | ||
isMoving: BoxModel | ||
isMoving: BoxModel, | ||
): number => | ||
@@ -39,3 +39,3 @@ target[axis.crossAxisStart] + | ||
distanceFromStartToBorderBoxCenter(axis, isMoving), | ||
getCrossAxisBorderBoxCenter(axis, moveRelativeTo.marginBox, isMoving) | ||
getCrossAxisBorderBoxCenter(axis, moveRelativeTo.marginBox, isMoving), | ||
); | ||
@@ -49,3 +49,3 @@ | ||
distanceFromEndToBorderBoxCenter(axis, isMoving), | ||
getCrossAxisBorderBoxCenter(axis, moveRelativeTo.marginBox, isMoving) | ||
getCrossAxisBorderBoxCenter(axis, moveRelativeTo.marginBox, isMoving), | ||
); | ||
@@ -69,3 +69,3 @@ | ||
distanceFromStartToBorderBoxCenter(axis, isMoving), | ||
getCrossAxisBorderBoxCenter(axis, moveInto.contentBox, isMoving) | ||
getCrossAxisBorderBoxCenter(axis, moveInto.contentBox, isMoving), | ||
); |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -7,5 +7,5 @@ DisplacementGroups, | ||
DisplacedBy, | ||
} from "../types"; | ||
import { origin, negate } from "./position"; | ||
import didStartAfterCritical from "./did-start-after-critical"; | ||
} from '../types'; | ||
import { origin, negate } from './position'; | ||
import didStartAfterCritical from './did-start-after-critical'; | ||
@@ -26,3 +26,3 @@ interface Args { | ||
const isDisplaced = Boolean( | ||
displaced.visible[combineWith] || displaced.invisible[combineWith] | ||
displaced.visible[combineWith] || displaced.invisible[combineWith], | ||
); | ||
@@ -29,0 +29,0 @@ |
@@ -1,5 +0,5 @@ | ||
import memoizeOne from "memoize-one"; | ||
import type { Position } from "css-box-model"; | ||
import type { Axis, DisplacedBy } from "../types"; | ||
import { patch } from "./position"; | ||
import memoizeOne from 'memoize-one'; | ||
import type { Position } from 'css-box-model'; | ||
import type { Axis, DisplacedBy } from '../types'; | ||
import { patch } from './position'; | ||
@@ -9,3 +9,3 @@ // TODO: memoization needed? | ||
axis: Axis, | ||
displaceBy: Position | ||
displaceBy: Position, | ||
): DisplacedBy { | ||
@@ -12,0 +12,0 @@ const displacement: number = displaceBy[axis.line]; |
@@ -1,3 +0,3 @@ | ||
import { expand, getRect } from "css-box-model"; | ||
import type { Rect, Spacing } from "css-box-model"; | ||
import { expand, getRect } from 'css-box-model'; | ||
import type { Rect, Spacing } from 'css-box-model'; | ||
import type { | ||
@@ -10,4 +10,4 @@ DraggableId, | ||
DisplacedBy, | ||
} from "../types"; | ||
import { isPartiallyVisible } from "./visibility/is-visible"; | ||
} from '../types'; | ||
import { isPartiallyVisible } from './visibility/is-visible'; | ||
@@ -26,6 +26,6 @@ interface Args { | ||
last?: DisplacementGroups | null, | ||
forceShouldAnimate?: boolean | null | ||
forceShouldAnimate?: boolean | null, | ||
) => { | ||
// Use a forced value if provided | ||
if (typeof forceShouldAnimate === "boolean") { | ||
if (typeof forceShouldAnimate === 'boolean') { | ||
return forceShouldAnimate; | ||
@@ -57,3 +57,3 @@ } | ||
draggable: DraggableDimension, | ||
displacedBy: DisplacedBy | ||
displacedBy: DisplacedBy, | ||
): Rect { | ||
@@ -92,3 +92,3 @@ const marginBox: Rect = draggable.page.marginBox; | ||
groups: DisplacementGroups, | ||
draggable: DraggableDimension | ||
draggable: DraggableDimension, | ||
): DisplacementGroups { | ||
@@ -117,3 +117,3 @@ const target: Rect = getTarget(draggable, displacedBy); | ||
last, | ||
forceShouldAnimate | ||
forceShouldAnimate, | ||
); | ||
@@ -133,4 +133,4 @@ | ||
invisible: {}, | ||
} | ||
}, | ||
); | ||
} |
@@ -1,2 +0,2 @@ | ||
import type { Rect } from "css-box-model"; | ||
import type { Rect } from 'css-box-model'; | ||
import type { | ||
@@ -10,7 +10,7 @@ DraggableId, | ||
DisplacedBy, | ||
} from "../../types"; | ||
import getDidStartAfterCritical from "../did-start-after-critical"; | ||
import getDisplacedBy from "../get-displaced-by"; | ||
import getIsDisplaced from "../get-is-displaced"; | ||
import removeDraggableFromList from "../remove-draggable-from-list"; | ||
} from '../../types'; | ||
import getDidStartAfterCritical from '../did-start-after-critical'; | ||
import getDisplacedBy from '../get-displaced-by'; | ||
import getIsDisplaced from '../get-is-displaced'; | ||
import removeDraggableFromList from '../remove-draggable-from-list'; | ||
@@ -43,3 +43,3 @@ interface Args { | ||
destination.axis, | ||
draggable.displaceBy | ||
draggable.displaceBy, | ||
); | ||
@@ -53,3 +53,3 @@ const displacement: number = displacedBy.value; | ||
draggable, | ||
insideDestination | ||
insideDestination, | ||
); | ||
@@ -65,3 +65,3 @@ | ||
id, | ||
afterCritical | ||
afterCritical, | ||
); | ||
@@ -121,3 +121,3 @@ | ||
at: { | ||
type: "COMBINE", | ||
type: 'COMBINE', | ||
combine: { | ||
@@ -124,0 +124,0 @@ draggableId: combineWith.descriptor.id, |
@@ -1,2 +0,2 @@ | ||
import type { Rect } from "css-box-model"; | ||
import type { Rect } from 'css-box-model'; | ||
import type { | ||
@@ -12,9 +12,9 @@ DraggableId, | ||
LiftEffect, | ||
} from "../../types"; | ||
import getDisplacedBy from "../get-displaced-by"; | ||
import removeDraggableFromList from "../remove-draggable-from-list"; | ||
import isHomeOf from "../droppable/is-home-of"; | ||
import getDidStartAfterCritical from "../did-start-after-critical"; | ||
import calculateReorderImpact from "../calculate-drag-impact/calculate-reorder-impact"; | ||
import getIsDisplaced from "../get-is-displaced"; | ||
} from '../../types'; | ||
import getDisplacedBy from '../get-displaced-by'; | ||
import removeDraggableFromList from '../remove-draggable-from-list'; | ||
import isHomeOf from '../droppable/is-home-of'; | ||
import getDidStartAfterCritical from '../did-start-after-critical'; | ||
import calculateReorderImpact from '../calculate-drag-impact/calculate-reorder-impact'; | ||
import getIsDisplaced from '../get-is-displaced'; | ||
@@ -69,3 +69,3 @@ interface Args { | ||
destination.axis, | ||
draggable.displaceBy | ||
draggable.displaceBy, | ||
); | ||
@@ -79,3 +79,3 @@ const displacement: number = displacedBy.value; | ||
draggable, | ||
insideDestination | ||
insideDestination, | ||
); | ||
@@ -90,3 +90,3 @@ | ||
id, | ||
afterCritical | ||
afterCritical, | ||
); | ||
@@ -93,0 +93,0 @@ |
@@ -1,2 +0,2 @@ | ||
import type { Position, Rect } from "css-box-model"; | ||
import type { Position, Rect } from 'css-box-model'; | ||
import type { | ||
@@ -11,10 +11,10 @@ DroppableId, | ||
LiftEffect, | ||
} from "../../types"; | ||
import getDroppableOver from "../get-droppable-over"; | ||
import getDraggablesInsideDroppable from "../get-draggables-inside-droppable"; | ||
import withDroppableScroll from "../with-scroll-change/with-droppable-scroll"; | ||
import getReorderImpact from "./get-reorder-impact"; | ||
import getCombineImpact from "./get-combine-impact"; | ||
import noImpact from "../no-impact"; | ||
import { offsetRectByPosition } from "../rect"; | ||
} from '../../types'; | ||
import getDroppableOver from '../get-droppable-over'; | ||
import getDraggablesInsideDroppable from '../get-draggables-inside-droppable'; | ||
import withDroppableScroll from '../with-scroll-change/with-droppable-scroll'; | ||
import getReorderImpact from './get-reorder-impact'; | ||
import getCombineImpact from './get-combine-impact'; | ||
import noImpact from '../no-impact'; | ||
import { offsetRectByPosition } from '../rect'; | ||
@@ -43,3 +43,3 @@ interface Args { | ||
draggable.page.borderBox, | ||
pageOffset | ||
pageOffset, | ||
); | ||
@@ -64,3 +64,3 @@ | ||
destination.descriptor.id, | ||
draggables | ||
draggables, | ||
); | ||
@@ -72,3 +72,3 @@ | ||
destination, | ||
pageBorderBox | ||
pageBorderBox, | ||
); | ||
@@ -75,0 +75,0 @@ |
@@ -1,3 +0,3 @@ | ||
import memoizeOne from "memoize-one"; | ||
import { toDraggableList } from "./dimension-structures"; | ||
import memoizeOne from 'memoize-one'; | ||
import { toDraggableList } from './dimension-structures'; | ||
import type { | ||
@@ -7,3 +7,3 @@ DraggableDimension, | ||
DraggableDimensionMap, | ||
} from "../types"; | ||
} from '../types'; | ||
@@ -15,3 +15,3 @@ export default memoizeOne( | ||
droppableId: DroppableId, | ||
draggables: DraggableDimensionMap | ||
draggables: DraggableDimensionMap, | ||
): DraggableDimension[] => { | ||
@@ -21,3 +21,3 @@ const result = toDraggableList(draggables) | ||
(draggable: DraggableDimension): boolean => | ||
droppableId === draggable.descriptor.droppableId | ||
droppableId === draggable.descriptor.droppableId, | ||
) | ||
@@ -28,7 +28,7 @@ // Dimensions are not guarenteed to be ordered in the same order as keys | ||
(a: DraggableDimension, b: DraggableDimension): number => | ||
a.descriptor.index - b.descriptor.index | ||
a.descriptor.index - b.descriptor.index, | ||
); | ||
return result; | ||
} | ||
}, | ||
); |
@@ -1,2 +0,2 @@ | ||
import type { Position, Rect } from "css-box-model"; | ||
import type { Position, Rect } from 'css-box-model'; | ||
import type { | ||
@@ -8,7 +8,7 @@ DroppableDimension, | ||
Axis, | ||
} from "../types"; | ||
import { toDroppableList } from "./dimension-structures"; | ||
import isPositionInFrame from "./visibility/is-position-in-frame"; | ||
import { distance, patch } from "./position"; | ||
import isWithin from "./is-within"; | ||
} from '../types'; | ||
import { toDroppableList } from './dimension-structures'; | ||
import isPositionInFrame from './visibility/is-position-in-frame'; | ||
import { distance, patch } from './position'; | ||
import isWithin from './is-within'; | ||
@@ -64,3 +64,3 @@ // https://stackoverflow.com/questions/306316/determine-if-two-rectangles-overlap-each-other | ||
// use the center of the list on the cross axis | ||
candidate.page.borderBox.center[axis.crossAxisLine] | ||
candidate.page.borderBox.center[axis.crossAxisLine], | ||
); | ||
@@ -119,3 +119,3 @@ | ||
active[axis.crossAxisStart], | ||
active[axis.crossAxisEnd] | ||
active[axis.crossAxisEnd], | ||
); | ||
@@ -140,3 +140,3 @@ | ||
return crossAxisEnd > childCenter; | ||
} | ||
}, | ||
); | ||
@@ -143,0 +143,0 @@ |
@@ -1,9 +0,9 @@ | ||
import { invariant } from "../invariant"; | ||
import { invariant } from '../invariant'; | ||
import type { DroppableDimension, Scrollable } from "../types"; | ||
import type { DroppableDimension, Scrollable } from '../types'; | ||
export default (droppable: DroppableDimension): Scrollable => { | ||
const frame: Scrollable | null = droppable.frame; | ||
invariant(frame, "Expected Droppable to have a frame"); | ||
invariant(frame, 'Expected Droppable to have a frame'); | ||
return frame; | ||
}; |
@@ -1,2 +0,2 @@ | ||
import type { DraggableDescriptor, DraggableLocation } from "../types"; | ||
import type { DraggableDescriptor, DraggableLocation } from '../types'; | ||
@@ -3,0 +3,0 @@ export default (descriptor: DraggableDescriptor): DraggableLocation => ({ |
@@ -1,7 +0,7 @@ | ||
import type { DragImpact, DraggableLocation, Combine } from "../types"; | ||
import type { DragImpact, DraggableLocation, Combine } from '../types'; | ||
export function tryGetDestination( | ||
impact: DragImpact | ||
impact: DragImpact, | ||
): DraggableLocation | null { | ||
if (impact.at && impact.at.type === "REORDER") { | ||
if (impact.at && impact.at.type === 'REORDER') { | ||
return impact.at.destination; | ||
@@ -13,3 +13,3 @@ } | ||
export function tryGetCombine(impact: DragImpact): Combine | null { | ||
if (impact.at && impact.at.type === "COMBINE") { | ||
if (impact.at && impact.at.type === 'COMBINE') { | ||
return impact.at.combine; | ||
@@ -16,0 +16,0 @@ } |
@@ -1,2 +0,2 @@ | ||
import type { DisplacementGroups, DraggableId } from "../types"; | ||
import type { DisplacementGroups, DraggableId } from '../types'; | ||
@@ -3,0 +3,0 @@ interface Args { |
@@ -1,3 +0,3 @@ | ||
import { invariant } from "../invariant"; | ||
import getHomeLocation from "./get-home-location"; | ||
import { invariant } from '../invariant'; | ||
import getHomeLocation from './get-home-location'; | ||
import type { | ||
@@ -13,6 +13,6 @@ DraggableDimension, | ||
LiftEffect, | ||
} from "../types"; | ||
import getDraggablesInsideDroppable from "./get-draggables-inside-droppable"; | ||
import getDisplacedBy from "./get-displaced-by"; | ||
import getDisplacementGroups from "./get-displacement-groups"; | ||
} from '../types'; | ||
import getDraggablesInsideDroppable from './get-draggables-inside-droppable'; | ||
import getDisplacedBy from './get-displaced-by'; | ||
import getDisplacementGroups from './get-displacement-groups'; | ||
@@ -34,3 +34,3 @@ interface Args { | ||
home.axis, | ||
draggable.displaceBy | ||
draggable.displaceBy, | ||
); | ||
@@ -40,3 +40,3 @@ | ||
home.descriptor.id, | ||
draggables | ||
draggables, | ||
); | ||
@@ -47,3 +47,3 @@ | ||
const rawIndex: number = insideHome.indexOf(draggable); | ||
invariant(rawIndex !== -1, "Expected draggable to be inside home list"); | ||
invariant(rawIndex !== -1, 'Expected draggable to be inside home list'); | ||
@@ -56,6 +56,6 @@ const afterDragging: DraggableDimension[] = insideHome.slice(rawIndex + 1); | ||
}, | ||
{} | ||
{}, | ||
); | ||
const afterCritical: LiftEffect = { | ||
inVirtualList: home.descriptor.mode === "virtual", | ||
inVirtualList: home.descriptor.mode === 'virtual', | ||
displacedBy, | ||
@@ -81,3 +81,3 @@ effected, | ||
at: { | ||
type: "REORDER", | ||
type: 'REORDER', | ||
destination: getHomeLocation(draggable.descriptor), | ||
@@ -84,0 +84,0 @@ }, |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import { subtract } from "./position"; | ||
import type { Position } from 'css-box-model'; | ||
import { subtract } from './position'; | ||
@@ -21,3 +21,3 @@ interface Args { | ||
// viewport size | ||
{ x: width, y: height } | ||
{ x: width, y: height }, | ||
); | ||
@@ -24,0 +24,0 @@ |
@@ -6,8 +6,8 @@ import type { | ||
DropPendingState, | ||
} from "../types"; | ||
} from '../types'; | ||
export default function isDragging( | ||
state: State | ||
state: State, | ||
): state is DraggingState | CollectingState | DropPendingState { | ||
if (state.phase === "IDLE" || state.phase === "DROP_ANIMATING") { | ||
if (state.phase === 'IDLE' || state.phase === 'DROP_ANIMATING') { | ||
return false; | ||
@@ -14,0 +14,0 @@ } |
@@ -1,7 +0,7 @@ | ||
import type { State, StateWhenUpdatesAllowed } from "../types"; | ||
import type { State, StateWhenUpdatesAllowed } from '../types'; | ||
// Using function declaration as arrow function does not play well with the %checks syntax | ||
export default function isMovementAllowed( | ||
state: State | ||
state: State, | ||
): state is StateWhenUpdatesAllowed { | ||
return state.phase === "DRAGGING" || state.phase === "COLLECTING"; | ||
return state.phase === 'DRAGGING' || state.phase === 'COLLECTING'; | ||
} |
@@ -5,5 +5,5 @@ // is a value between two other values | ||
lowerBound: number, | ||
upperBound: number | ||
upperBound: number, | ||
): ((a: number) => boolean) => | ||
(value: number): boolean => | ||
lowerBound <= value && value <= upperBound; |
@@ -1,3 +0,3 @@ | ||
import { invariant } from "../../invariant"; | ||
import type { AutoScroller } from "../auto-scroller/auto-scroller-types"; | ||
import { invariant } from '../../invariant'; | ||
import type { AutoScroller } from '../auto-scroller/auto-scroller-types'; | ||
import type { | ||
@@ -9,11 +9,11 @@ Action, | ||
FlushAction, | ||
} from "../store-types"; | ||
import type { State } from "../../types"; | ||
} from '../store-types'; | ||
import type { State } from '../../types'; | ||
const shouldStop = ( | ||
action: Action | ||
action: Action, | ||
): action is DropCompleteAction | DropAnimateAction | FlushAction => | ||
action.type === "DROP_COMPLETE" || | ||
action.type === "DROP_ANIMATE" || | ||
action.type === "FLUSH"; | ||
action.type === 'DROP_COMPLETE' || | ||
action.type === 'DROP_ANIMATE' || | ||
action.type === 'FLUSH'; | ||
@@ -30,3 +30,3 @@ export default (autoScroller: AutoScroller): Middleware => | ||
if (action.type === "INITIAL_PUBLISH") { | ||
if (action.type === 'INITIAL_PUBLISH') { | ||
// letting the action go first to hydrate the state | ||
@@ -36,4 +36,4 @@ next(action); | ||
invariant( | ||
state.phase === "DRAGGING", | ||
"Expected phase to be DRAGGING after INITIAL_PUBLISH" | ||
state.phase === 'DRAGGING', | ||
'Expected phase to be DRAGGING after INITIAL_PUBLISH', | ||
); | ||
@@ -40,0 +40,0 @@ autoScroller.start(state); |
@@ -1,3 +0,3 @@ | ||
import type { Action, Dispatch } from "../store-types"; | ||
import type { DimensionMarshal } from "../dimension-marshal/dimension-marshal-types"; | ||
import type { Action, Dispatch } from '../store-types'; | ||
import type { DimensionMarshal } from '../dimension-marshal/dimension-marshal-types'; | ||
@@ -11,6 +11,6 @@ export default (marshal: DimensionMarshal) => | ||
// drag is finished | ||
action.type === "DROP_COMPLETE" || | ||
action.type === "FLUSH" || | ||
action.type === 'DROP_COMPLETE' || | ||
action.type === 'FLUSH' || | ||
// no longer accepting changes once the drop has started | ||
action.type === "DROP_ANIMATE" | ||
action.type === 'DROP_ANIMATE' | ||
) { | ||
@@ -17,0 +17,0 @@ marshal.stopPublishing(); |
@@ -1,9 +0,9 @@ | ||
import { invariant } from "../../../invariant"; | ||
import { completeDrop } from "../../action-creators"; | ||
import type { State } from "../../../types"; | ||
import type { Middleware } from "../../store-types"; | ||
import { invariant } from '../../../invariant'; | ||
import { completeDrop } from '../../action-creators'; | ||
import type { State } from '../../../types'; | ||
import type { Middleware } from '../../store-types'; | ||
const dropAnimationFinishMiddleware: Middleware = | ||
(store) => (next) => (action) => { | ||
if (action.type !== "DROP_ANIMATION_FINISHED") { | ||
if (action.type !== 'DROP_ANIMATION_FINISHED') { | ||
next(action); | ||
@@ -15,4 +15,4 @@ return; | ||
invariant( | ||
state.phase === "DROP_ANIMATING", | ||
"Cannot finish a drop animating when no drop is occurring" | ||
state.phase === 'DROP_ANIMATING', | ||
'Cannot finish a drop animating when no drop is occurring', | ||
); | ||
@@ -19,0 +19,0 @@ store.dispatch(completeDrop({ completed: state.completed })); |
@@ -1,6 +0,6 @@ | ||
import { dropAnimationFinished } from "../../action-creators"; | ||
import type { State } from "../../../types"; | ||
import type { Middleware } from "../../store-types"; | ||
import type { EventBinding } from "../../../view/event-bindings/event-types"; | ||
import bindEvents from "../../../view/event-bindings/bind-events"; | ||
import { dropAnimationFinished } from '../../action-creators'; | ||
import type { State } from '../../../types'; | ||
import type { Middleware } from '../../store-types'; | ||
import type { EventBinding } from '../../../view/event-bindings/event-types'; | ||
import bindEvents from '../../../view/event-bindings/bind-events'; | ||
@@ -25,5 +25,5 @@ const dropAnimationFlushOnScrollMiddleware: Middleware = (store) => { | ||
if ( | ||
action.type === "FLUSH" || | ||
action.type === "DROP_COMPLETE" || | ||
action.type === "DROP_ANIMATION_FINISHED" | ||
action.type === 'FLUSH' || | ||
action.type === 'DROP_COMPLETE' || | ||
action.type === 'DROP_ANIMATION_FINISHED' | ||
) { | ||
@@ -35,3 +35,3 @@ clear(); | ||
if (action.type !== "DROP_ANIMATE") { | ||
if (action.type !== 'DROP_ANIMATE') { | ||
return; | ||
@@ -41,3 +41,3 @@ } | ||
const binding: EventBinding = { | ||
eventName: "scroll", | ||
eventName: 'scroll', | ||
// capture: true will catch all scroll events, event from scroll containers | ||
@@ -48,3 +48,3 @@ // once: just in case, we only want to ever fire one | ||
const state: State = store.getState(); | ||
if (state.phase === "DROP_ANIMATING") { | ||
if (state.phase === 'DROP_ANIMATING') { | ||
store.dispatch(dropAnimationFinished()); | ||
@@ -51,0 +51,0 @@ } |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import { invariant } from "../../../invariant"; | ||
import type { Position } from 'css-box-model'; | ||
import { invariant } from '../../../invariant'; | ||
import type { | ||
@@ -13,12 +13,12 @@ State, | ||
DraggableDimension, | ||
} from "../../../types"; | ||
import type { Middleware } from "../../store-types"; | ||
import { animateDrop, completeDrop, dropPending } from "../../action-creators"; | ||
import type { AnimateDropArgs } from "../../action-creators"; | ||
import { isEqual } from "../../position"; | ||
import getDropDuration from "./get-drop-duration"; | ||
import getNewHomeClientOffset from "./get-new-home-client-offset"; | ||
import getDropImpact from "./get-drop-impact"; | ||
import type { Result } from "./get-drop-impact"; | ||
import { tryGetCombine, tryGetDestination } from "../../get-impact-location"; | ||
} from '../../../types'; | ||
import type { Middleware } from '../../store-types'; | ||
import { animateDrop, completeDrop, dropPending } from '../../action-creators'; | ||
import type { AnimateDropArgs } from '../../action-creators'; | ||
import { isEqual } from '../../position'; | ||
import getDropDuration from './get-drop-duration'; | ||
import getNewHomeClientOffset from './get-new-home-client-offset'; | ||
import getDropImpact from './get-drop-impact'; | ||
import type { Result } from './get-drop-impact'; | ||
import { tryGetCombine, tryGetDestination } from '../../get-impact-location'; | ||
@@ -29,3 +29,3 @@ const dropMiddleware: Middleware = | ||
(action) => { | ||
if (action.type !== "DROP") { | ||
if (action.type !== 'DROP') { | ||
next(action); | ||
@@ -40,3 +40,3 @@ return; | ||
// We are now shifting the application into the 'DROP_PENDING' phase | ||
if (state.phase === "COLLECTING") { | ||
if (state.phase === 'COLLECTING') { | ||
dispatch(dropPending({ reason })); | ||
@@ -47,3 +47,3 @@ return; | ||
// Could have occurred in response to an error | ||
if (state.phase === "IDLE") { | ||
if (state.phase === 'IDLE') { | ||
return; | ||
@@ -55,11 +55,11 @@ } | ||
const isWaitingForDrop: boolean = | ||
state.phase === "DROP_PENDING" && state.isWaiting; | ||
state.phase === 'DROP_PENDING' && state.isWaiting; | ||
invariant( | ||
!isWaitingForDrop, | ||
"A DROP action occurred while DROP_PENDING and still waiting" | ||
'A DROP action occurred while DROP_PENDING and still waiting', | ||
); | ||
invariant( | ||
state.phase === "DRAGGING" || state.phase === "DROP_PENDING", | ||
`Cannot drop in phase: ${state.phase}` | ||
state.phase === 'DRAGGING' || state.phase === 'DROP_PENDING', | ||
`Cannot drop in phase: ${state.phase}`, | ||
); | ||
@@ -66,0 +66,0 @@ // We are now in the DRAGGING or DROP_PENDING phase |
@@ -1,5 +0,5 @@ | ||
import type { Position } from "css-box-model"; | ||
import { distance as getDistance } from "../../position"; | ||
import { timings } from "../../../animation"; | ||
import type { DropReason } from "../../../types"; | ||
import type { Position } from 'css-box-model'; | ||
import { distance as getDistance } from '../../position'; | ||
import { timings } from '../../../animation'; | ||
import type { DropReason } from '../../../types'; | ||
@@ -43,5 +43,5 @@ interface GetDropDurationArgs { | ||
const withDuration: number = | ||
reason === "CANCEL" ? duration * cancelDropModifier : duration; | ||
reason === 'CANCEL' ? duration * cancelDropModifier : duration; | ||
// To two decimal points by converting to string and back | ||
return Number(withDuration.toFixed(2)); | ||
}; |
@@ -8,5 +8,5 @@ import type { | ||
LiftEffect, | ||
} from "../../../types"; | ||
import recompute from "../../update-displacement-visibility/recompute"; | ||
import { emptyGroups } from "../../no-impact"; | ||
} from '../../../types'; | ||
import recompute from '../../update-displacement-visibility/recompute'; | ||
import { emptyGroups } from '../../no-impact'; | ||
@@ -36,3 +36,3 @@ interface Args { | ||
}: Args): Result => { | ||
if (!lastImpact.at || reason !== "DROP") { | ||
if (!lastImpact.at || reason !== 'DROP') { | ||
// Dropping outside of a list or the drag was cancelled | ||
@@ -60,3 +60,3 @@ | ||
// use the existing impact | ||
if (lastImpact.at.type === "REORDER") { | ||
if (lastImpact.at.type === 'REORDER') { | ||
return { | ||
@@ -63,0 +63,0 @@ impact: lastImpact, |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -10,6 +10,6 @@ DroppableDimension, | ||
LiftEffect, | ||
} from "../../../types"; | ||
import whatIsDraggedOver from "../../droppable/what-is-dragged-over"; | ||
import { subtract } from "../../position"; | ||
import getClientBorderBoxCenter from "../../get-center-from-impact/get-client-border-box-center"; | ||
} from '../../../types'; | ||
import whatIsDraggedOver from '../../droppable/what-is-dragged-over'; | ||
import { subtract } from '../../position'; | ||
import getClientBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center'; | ||
@@ -50,3 +50,3 @@ interface Args { | ||
newClientCenter, | ||
draggable.client.borderBox.center | ||
draggable.client.borderBox.center, | ||
); | ||
@@ -53,0 +53,0 @@ |
@@ -1,1 +0,1 @@ | ||
export { default } from "./drop-middleware"; | ||
export { default } from './drop-middleware'; |
@@ -1,4 +0,4 @@ | ||
import type { DropResult } from "../../types"; | ||
import type { Action, Dispatch } from "../store-types"; | ||
import type { FocusMarshal } from "../../view/use-focus-marshal/focus-marshal-types"; | ||
import type { DropResult } from '../../types'; | ||
import type { Action, Dispatch } from '../store-types'; | ||
import type { FocusMarshal } from '../../view/use-focus-marshal/focus-marshal-types'; | ||
@@ -11,3 +11,3 @@ export default (marshal: FocusMarshal) => { | ||
(action: Action): any => { | ||
if (action.type === "INITIAL_PUBLISH") { | ||
if (action.type === 'INITIAL_PUBLISH') { | ||
isWatching = true; | ||
@@ -27,3 +27,3 @@ | ||
if (action.type === "FLUSH") { | ||
if (action.type === 'FLUSH') { | ||
isWatching = false; | ||
@@ -34,3 +34,3 @@ marshal.tryRestoreFocusRecorded(); | ||
if (action.type === "DROP_COMPLETE") { | ||
if (action.type === 'DROP_COMPLETE') { | ||
isWatching = false; | ||
@@ -43,3 +43,3 @@ const result: DropResult = action.payload.completed.result; | ||
result.draggableId, | ||
result.combine.draggableId | ||
result.combine.draggableId, | ||
); | ||
@@ -46,0 +46,0 @@ } |
@@ -1,5 +0,5 @@ | ||
import { invariant } from "../../invariant"; | ||
import type { DimensionMarshal } from "../dimension-marshal/dimension-marshal-types"; | ||
import type { State, ScrollOptions, LiftRequest } from "../../types"; | ||
import type { Middleware } from "../store-types"; | ||
import { invariant } from '../../invariant'; | ||
import type { DimensionMarshal } from '../dimension-marshal/dimension-marshal-types'; | ||
import type { State, ScrollOptions, LiftRequest } from '../../types'; | ||
import type { Middleware } from '../store-types'; | ||
import { | ||
@@ -10,4 +10,4 @@ completeDrop, | ||
beforeInitialCapture, | ||
} from "../action-creators"; | ||
import validateDimensions from "./util/validate-dimensions"; | ||
} from '../action-creators'; | ||
import validateDimensions from './util/validate-dimensions'; | ||
@@ -18,3 +18,3 @@ export default (marshal: DimensionMarshal): Middleware => | ||
(action) => { | ||
if (action.type !== "LIFT") { | ||
if (action.type !== 'LIFT') { | ||
next(action); | ||
@@ -30,7 +30,7 @@ return; | ||
if (initial.phase === "DROP_ANIMATING") { | ||
if (initial.phase === 'DROP_ANIMATING') { | ||
dispatch(completeDrop({ completed: initial.completed })); | ||
} | ||
invariant(getState().phase === "IDLE", "Unexpected phase to start a drag"); | ||
invariant(getState().phase === 'IDLE', 'Unexpected phase to start a drag'); | ||
@@ -47,3 +47,3 @@ // Removing any placeholders before we capture any starting dimensions | ||
const scrollOptions: ScrollOptions = { | ||
shouldPublishImmediately: movementMode === "SNAP", | ||
shouldPublishImmediately: movementMode === 'SNAP', | ||
}; | ||
@@ -67,4 +67,4 @@ const request: LiftRequest = { | ||
viewport, | ||
}) | ||
}), | ||
); | ||
}; |
@@ -1,4 +0,4 @@ | ||
import { drop } from "../action-creators"; | ||
import type { State } from "../../types"; | ||
import type { Middleware } from "../store-types"; | ||
import { drop } from '../action-creators'; | ||
import type { State } from '../../types'; | ||
import type { Middleware } from '../store-types'; | ||
@@ -9,3 +9,3 @@ const pendingDrop: Middleware = (store) => (next) => (action) => { | ||
if (action.type !== "PUBLISH_WHILE_DRAGGING") { | ||
if (action.type !== 'PUBLISH_WHILE_DRAGGING') { | ||
return; | ||
@@ -21,3 +21,3 @@ } | ||
// no pending drop after the publish | ||
if (postActionState.phase !== "DROP_PENDING") { | ||
if (postActionState.phase !== 'DROP_PENDING') { | ||
return; | ||
@@ -34,3 +34,3 @@ } | ||
reason: postActionState.reason, | ||
}) | ||
}), | ||
); | ||
@@ -37,0 +37,0 @@ }; |
@@ -1,2 +0,2 @@ | ||
import { invariant } from "../../../invariant"; | ||
import { invariant } from '../../../invariant'; | ||
@@ -18,5 +18,5 @@ interface Entry { | ||
const index: number = entries.findIndex( | ||
(item): boolean => item.timerId === timerId | ||
(item): boolean => item.timerId === timerId, | ||
); | ||
invariant(index !== -1, "Could not find timer"); | ||
invariant(index !== -1, 'Could not find timer'); | ||
// delete in place | ||
@@ -23,0 +23,0 @@ const [entry] = entries.splice(index, 1); |
@@ -1,3 +0,3 @@ | ||
import type { Announce } from "../../../types"; | ||
import { warning } from "../../../dev-warning"; | ||
import type { Announce } from '../../../types'; | ||
import { warning } from '../../../dev-warning'; | ||
@@ -19,3 +19,3 @@ export type ExpiringAnnounce = Announce & { | ||
if (wasCalled) { | ||
warning("Announcement already made. Not making a second announcement"); | ||
warning('Announcement already made. Not making a second announcement'); | ||
@@ -22,0 +22,0 @@ return; |
@@ -1,1 +0,1 @@ | ||
export { default } from "./responders-middleware"; | ||
export { default } from './responders-middleware'; |
@@ -1,6 +0,6 @@ | ||
import type { Critical, DraggableLocation, Combine } from "../../../types"; | ||
import type { Critical, DraggableLocation, Combine } from '../../../types'; | ||
export const areLocationsEqual = ( | ||
first?: DraggableLocation | null, | ||
second?: DraggableLocation | null | ||
second?: DraggableLocation | null, | ||
): boolean => { | ||
@@ -25,3 +25,3 @@ // if both are null - we are equal | ||
first?: Combine | null, | ||
second?: Combine | null | ||
second?: Combine | null, | ||
): boolean => { | ||
@@ -28,0 +28,0 @@ // if both are null - we are equal |
@@ -1,8 +0,8 @@ | ||
import { invariant } from "../../../invariant"; | ||
import messagePreset from "../../../screen-reader-message-preset"; | ||
import * as timings from "../../../debug/timings"; | ||
import getExpiringAnnounce from "./expiring-announce"; | ||
import type { ExpiringAnnounce } from "./expiring-announce"; | ||
import getAsyncMarshal from "./async-marshal"; | ||
import type { AsyncMarshal } from "./async-marshal"; | ||
import { invariant } from '../../../invariant'; | ||
import messagePreset from '../../../screen-reader-message-preset'; | ||
import * as timings from '../../../debug/timings'; | ||
import getExpiringAnnounce from './expiring-announce'; | ||
import type { ExpiringAnnounce } from './expiring-announce'; | ||
import getAsyncMarshal from './async-marshal'; | ||
import type { AsyncMarshal } from './async-marshal'; | ||
import type { | ||
@@ -24,5 +24,5 @@ DropResult, | ||
OnBeforeDragStartResponder, | ||
} from "../../../types"; | ||
import { isCombineEqual, isCriticalEqual, areLocationsEqual } from "./is-equal"; | ||
import { tryGetDestination, tryGetCombine } from "../../get-impact-location"; | ||
} from '../../../types'; | ||
import { isCombineEqual, isCriticalEqual, areLocationsEqual } from './is-equal'; | ||
import { tryGetDestination, tryGetCombine } from '../../get-impact-location'; | ||
@@ -51,7 +51,7 @@ const withTimings = (key: string, fn: () => void) => { | ||
data: TData, | ||
provided: ResponderProvided | ||
provided: ResponderProvided, | ||
) => unknown; | ||
type GetDefaultMessage<TData extends AnyResponderData> = ( | ||
data: TData | ||
data: TData, | ||
) => string; | ||
@@ -64,3 +64,3 @@ | ||
// eslint-disable-next-line no-shadow | ||
getDefaultMessage: GetDefaultMessage<TData> | ||
getDefaultMessage: GetDefaultMessage<TData>, | ||
) { | ||
@@ -99,5 +99,5 @@ if (!responder) { | ||
!dragging, | ||
"Cannot fire onBeforeCapture as a drag start has already been published" | ||
'Cannot fire onBeforeCapture as a drag start has already been published', | ||
); | ||
withTimings("onBeforeCapture", () => { | ||
withTimings('onBeforeCapture', () => { | ||
// No use of screen reader for this responder | ||
@@ -119,5 +119,5 @@ const fn: OnBeforeCaptureResponder | undefined = | ||
!dragging, | ||
"Cannot fire onBeforeDragStart as a drag start has already been published" | ||
'Cannot fire onBeforeDragStart as a drag start has already been published', | ||
); | ||
withTimings("onBeforeDragStart", () => { | ||
withTimings('onBeforeDragStart', () => { | ||
// No use of screen reader for this responder | ||
@@ -135,3 +135,3 @@ const fn: OnBeforeDragStartResponder | undefined = | ||
!dragging, | ||
"Cannot fire onBeforeDragStart as a drag start has already been published" | ||
'Cannot fire onBeforeDragStart as a drag start has already been published', | ||
); | ||
@@ -148,3 +148,3 @@ const data: DragStart = getDragStart(critical, mode); | ||
asyncMarshal.add(() => { | ||
withTimings("onDragStart", () => | ||
withTimings('onDragStart', () => | ||
execute( | ||
@@ -154,4 +154,4 @@ getResponders().onDragStart, | ||
announce, | ||
messagePreset.onDragStart | ||
) | ||
messagePreset.onDragStart, | ||
), | ||
); | ||
@@ -168,3 +168,3 @@ }); | ||
dragging, | ||
"Cannot fire onDragMove when onDragStart has not been called" | ||
'Cannot fire onDragMove when onDragStart has not been called', | ||
); | ||
@@ -175,3 +175,3 @@ | ||
critical, | ||
dragging.lastCritical | ||
dragging.lastCritical, | ||
); | ||
@@ -185,3 +185,3 @@ if (hasCriticalChanged) { | ||
dragging.lastLocation, | ||
location | ||
location, | ||
); | ||
@@ -208,3 +208,3 @@ if (hasLocationChanged) { | ||
asyncMarshal.add(() => { | ||
withTimings("onDragUpdate", () => | ||
withTimings('onDragUpdate', () => | ||
execute( | ||
@@ -214,4 +214,4 @@ getResponders().onDragUpdate, | ||
announce, | ||
messagePreset.onDragUpdate | ||
) | ||
messagePreset.onDragUpdate, | ||
), | ||
); | ||
@@ -222,3 +222,3 @@ }); | ||
const flush = () => { | ||
invariant(dragging, "Can only flush responders while dragging"); | ||
invariant(dragging, 'Can only flush responders while dragging'); | ||
asyncMarshal.flush(); | ||
@@ -230,3 +230,3 @@ }; | ||
dragging, | ||
"Cannot fire onDragEnd when there is no matching onDragStart" | ||
'Cannot fire onDragEnd when there is no matching onDragStart', | ||
); | ||
@@ -236,3 +236,3 @@ dragging = null; | ||
// we also want the consumers reorder logic to be in the same render pass | ||
withTimings("onDragEnd", () => | ||
withTimings('onDragEnd', () => | ||
execute( | ||
@@ -242,4 +242,4 @@ getResponders().onDragEnd, | ||
announce, | ||
messagePreset.onDragEnd | ||
) | ||
messagePreset.onDragEnd, | ||
), | ||
); | ||
@@ -259,3 +259,3 @@ }; | ||
destination: null, | ||
reason: "CANCEL", | ||
reason: 'CANCEL', | ||
}; | ||
@@ -262,0 +262,0 @@ drop(result); |
@@ -1,2 +0,2 @@ | ||
import getPublisher from "./publisher"; | ||
import getPublisher from './publisher'; | ||
import type { | ||
@@ -8,19 +8,19 @@ State, | ||
Announce, | ||
} from "../../../types"; | ||
import type { Middleware } from "../../store-types"; | ||
} from '../../../types'; | ||
import type { Middleware } from '../../store-types'; | ||
export default ( | ||
getResponders: () => Responders, | ||
announce: Announce | ||
announce: Announce, | ||
): Middleware => { | ||
const publisher = getPublisher( | ||
getResponders as () => Responders, | ||
announce as Announce | ||
announce as Announce, | ||
); | ||
return (store) => (next) => (action) => { | ||
if (action.type === "BEFORE_INITIAL_CAPTURE") { | ||
if (action.type === 'BEFORE_INITIAL_CAPTURE') { | ||
publisher.beforeCapture( | ||
action.payload.draggableId, | ||
action.payload.movementMode | ||
action.payload.movementMode, | ||
); | ||
@@ -30,3 +30,3 @@ return; | ||
if (action.type === "INITIAL_PUBLISH") { | ||
if (action.type === 'INITIAL_PUBLISH') { | ||
const critical: Critical = action.payload.critical; | ||
@@ -40,3 +40,3 @@ publisher.beforeStart(critical, action.payload.movementMode); | ||
// Drag end | ||
if (action.type === "DROP_COMPLETE") { | ||
if (action.type === 'DROP_COMPLETE') { | ||
// it is important that we use the result and not the last impact | ||
@@ -57,3 +57,3 @@ // the last impact might be different to the result for visual reasons | ||
// we should fire a onDragEnd responder | ||
if (action.type === "FLUSH") { | ||
if (action.type === 'FLUSH') { | ||
publisher.abort(); | ||
@@ -67,3 +67,3 @@ return; | ||
const state: State = store.getState(); | ||
if (state.phase === "DRAGGING") { | ||
if (state.phase === 'DRAGGING') { | ||
publisher.update(state.critical, state.impact); | ||
@@ -70,0 +70,0 @@ } |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import { moveByWindowScroll } from "../action-creators"; | ||
import type { Position } from 'css-box-model'; | ||
import { moveByWindowScroll } from '../action-creators'; | ||
import type { | ||
@@ -9,12 +9,12 @@ Middleware, | ||
FlushAction, | ||
} from "../store-types"; | ||
import getScrollListener from "../../view/scroll-listener"; | ||
} from '../store-types'; | ||
import getScrollListener from '../../view/scroll-listener'; | ||
// TODO: this is taken from auto-scroll. Let's make it a util | ||
const shouldEnd = ( | ||
action: Action | ||
action: Action, | ||
): action is DropAnimateAction | DropCompleteAction | FlushAction => | ||
action.type === "DROP_COMPLETE" || | ||
action.type === "DROP_ANIMATE" || | ||
action.type === "FLUSH"; | ||
action.type === 'DROP_COMPLETE' || | ||
action.type === 'DROP_ANIMATE' || | ||
action.type === 'FLUSH'; | ||
@@ -29,3 +29,3 @@ const scrollListener: Middleware = (store) => { | ||
return (next) => (action) => { | ||
if (!listener.isActive() && action.type === "INITIAL_PUBLISH") { | ||
if (!listener.isActive() && action.type === 'INITIAL_PUBLISH') { | ||
listener.start(); | ||
@@ -32,0 +32,0 @@ } |
@@ -1,3 +0,3 @@ | ||
import type { Action, Dispatch } from "../store-types"; | ||
import type { StyleMarshal } from "../../view/use-style-marshal/style-marshal-types"; | ||
import type { Action, Dispatch } from '../store-types'; | ||
import type { StyleMarshal } from '../../view/use-style-marshal/style-marshal-types'; | ||
@@ -8,7 +8,7 @@ export default (marshal: StyleMarshal) => | ||
(action: Action): any => { | ||
if (action.type === "INITIAL_PUBLISH") { | ||
if (action.type === 'INITIAL_PUBLISH') { | ||
marshal.dragging(); | ||
} | ||
if (action.type === "DROP_ANIMATE") { | ||
if (action.type === 'DROP_ANIMATE') { | ||
marshal.dropping(action.payload.completed.result.reason); | ||
@@ -18,3 +18,3 @@ } | ||
// this will clear any styles immediately before a reorder | ||
if (action.type === "FLUSH" || action.type === "DROP_COMPLETE") { | ||
if (action.type === 'FLUSH' || action.type === 'DROP_COMPLETE') { | ||
marshal.resting(); | ||
@@ -21,0 +21,0 @@ } |
@@ -5,5 +5,5 @@ import type { | ||
DraggableDimension, | ||
} from "../../../types"; | ||
import getDraggablesInsideDroppable from "../../get-draggables-inside-droppable"; | ||
import { warning } from "../../../dev-warning"; | ||
} from '../../../types'; | ||
import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable'; | ||
import { warning } from '../../../dev-warning'; | ||
@@ -21,3 +21,3 @@ interface ErrorMap { | ||
const indexes: number[] = insideDestination.map( | ||
(d: DraggableDimension): number => d.descriptor.index | ||
(d: DraggableDimension): number => d.descriptor.index, | ||
); | ||
@@ -49,3 +49,3 @@ | ||
}) | ||
.join(", "); | ||
.join(', '); | ||
@@ -63,10 +63,10 @@ warning(` | ||
critical: Critical, | ||
dimensions: DimensionMap | ||
dimensions: DimensionMap, | ||
): void { | ||
// wrapping entire block for better minification | ||
if (process.env.NODE_ENV !== "production") { | ||
if (process.env.NODE_ENV !== 'production') { | ||
const insideDestination: DraggableDimension[] = | ||
getDraggablesInsideDroppable( | ||
critical.droppable.id, | ||
dimensions.draggables | ||
dimensions.draggables, | ||
); | ||
@@ -73,0 +73,0 @@ checkIndexes(insideDestination); |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { PublicResult } from "./move-in-direction-types"; | ||
import type { Position } from 'css-box-model'; | ||
import type { PublicResult } from './move-in-direction-types'; | ||
import type { | ||
@@ -11,10 +11,10 @@ DroppableId, | ||
DragImpact, | ||
} from "../../types"; | ||
import moveToNextPlace from "./move-to-next-place"; | ||
import moveCrossAxis from "./move-cross-axis"; | ||
import whatIsDraggedOver from "../droppable/what-is-dragged-over"; | ||
} from '../../types'; | ||
import moveToNextPlace from './move-to-next-place'; | ||
import moveCrossAxis from './move-cross-axis'; | ||
import whatIsDraggedOver from '../droppable/what-is-dragged-over'; | ||
interface Args { | ||
state: DraggingState; | ||
type: "MOVE_UP" | "MOVE_RIGHT" | "MOVE_DOWN" | "MOVE_LEFT"; | ||
type: 'MOVE_UP' | 'MOVE_RIGHT' | 'MOVE_DOWN' | 'MOVE_LEFT'; | ||
} | ||
@@ -24,3 +24,3 @@ | ||
impact: DragImpact, | ||
droppables: DroppableDimensionMap | ||
droppables: DroppableDimensionMap, | ||
): DroppableDimension | null => { | ||
@@ -34,3 +34,3 @@ const id: DroppableId | null = whatIsDraggedOver(impact); | ||
state.impact, | ||
state.dimensions.droppables | ||
state.dimensions.droppables, | ||
); | ||
@@ -45,6 +45,6 @@ const isMainAxisMovementAllowed = Boolean(isActuallyOver); | ||
const isMovingOnMainAxis: boolean = | ||
(direction === "vertical" && | ||
(type === "MOVE_UP" || type === "MOVE_DOWN")) || | ||
(direction === "horizontal" && | ||
(type === "MOVE_LEFT" || type === "MOVE_RIGHT")); | ||
(direction === 'vertical' && | ||
(type === 'MOVE_UP' || type === 'MOVE_DOWN')) || | ||
(direction === 'horizontal' && | ||
(type === 'MOVE_LEFT' || type === 'MOVE_RIGHT')); | ||
@@ -57,3 +57,3 @@ // This movement is not permitted right now | ||
const isMovingForward: boolean = | ||
type === "MOVE_DOWN" || type === "MOVE_RIGHT"; | ||
type === 'MOVE_DOWN' || type === 'MOVE_RIGHT'; | ||
@@ -60,0 +60,0 @@ const draggable: DraggableDimension = |
@@ -1,8 +0,8 @@ | ||
import type { Position, Rect } from "css-box-model"; | ||
import { invariant } from "../../../invariant"; | ||
import { closest } from "../../position"; | ||
import isWithin from "../../is-within"; | ||
import { getCorners } from "../../spacing"; | ||
import isPartiallyVisibleThroughFrame from "../../visibility/is-partially-visible-through-frame"; | ||
import { toDroppableList } from "../../dimension-structures"; | ||
import type { Position, Rect } from 'css-box-model'; | ||
import { invariant } from '../../../invariant'; | ||
import { closest } from '../../position'; | ||
import isWithin from '../../is-within'; | ||
import { getCorners } from '../../spacing'; | ||
import isPartiallyVisibleThroughFrame from '../../visibility/is-partially-visible-through-frame'; | ||
import { toDroppableList } from '../../dimension-structures'; | ||
import type { | ||
@@ -13,3 +13,3 @@ Axis, | ||
Viewport, | ||
} from "../../../types"; | ||
} from '../../../types'; | ||
@@ -30,3 +30,3 @@ interface GetBestDroppableArgs { | ||
invariant(rect, "Cannot get clipped area from droppable"); | ||
invariant(rect, 'Cannot get clipped area from droppable'); | ||
@@ -58,7 +58,7 @@ return rect; | ||
.filter((droppable: DroppableDimension): boolean => | ||
Boolean(droppable.subject.active) | ||
Boolean(droppable.subject.active), | ||
) | ||
// Remove any that are not visible in the window | ||
.filter((droppable: DroppableDimension): boolean => | ||
isPartiallyVisibleThroughFrame(viewport.frame)(getKnownActive(droppable)) | ||
isPartiallyVisibleThroughFrame(viewport.frame)(getKnownActive(droppable)), | ||
) | ||
@@ -81,3 +81,3 @@ .filter((droppable: DroppableDimension): boolean => { | ||
activeOfTarget[axis.start], | ||
activeOfTarget[axis.end] | ||
activeOfTarget[axis.end], | ||
); | ||
@@ -107,6 +107,6 @@ | ||
index: number, | ||
array: DroppableDimension[] | ||
array: DroppableDimension[], | ||
): boolean => | ||
getKnownActive(droppable)[axis.crossAxisStart] === | ||
getKnownActive(array[0])[axis.crossAxisStart] | ||
getKnownActive(array[0])[axis.crossAxisStart], | ||
); | ||
@@ -132,6 +132,6 @@ | ||
getKnownActive(droppable)[axis.start], | ||
getKnownActive(droppable)[axis.end] | ||
getKnownActive(droppable)[axis.end], | ||
); | ||
return isWithinDroppable(pageBorderBoxCenter[axis.line]); | ||
} | ||
}, | ||
); | ||
@@ -148,3 +148,3 @@ | ||
(a: DroppableDimension, b: DroppableDimension): number => | ||
getKnownActive(a)[axis.start] - getKnownActive(b)[axis.start] | ||
getKnownActive(a)[axis.start] - getKnownActive(b)[axis.start], | ||
)[0]; | ||
@@ -161,3 +161,3 @@ } | ||
pageBorderBoxCenter, | ||
getCorners(getKnownActive(b)) | ||
getCorners(getKnownActive(b)), | ||
); | ||
@@ -173,4 +173,4 @@ | ||
return getKnownActive(a)[axis.start] - getKnownActive(b)[axis.start]; | ||
} | ||
}, | ||
)[0]; | ||
}; |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -7,10 +7,10 @@ Viewport, | ||
LiftEffect, | ||
} from "../../../types"; | ||
import { distance } from "../../position"; | ||
import { isTotallyVisible } from "../../visibility/is-visible"; | ||
import withDroppableDisplacement from "../../with-scroll-change/with-droppable-displacement"; | ||
} from '../../../types'; | ||
import { distance } from '../../position'; | ||
import { isTotallyVisible } from '../../visibility/is-visible'; | ||
import withDroppableDisplacement from '../../with-scroll-change/with-droppable-displacement'; | ||
import { | ||
getCurrentPageBorderBox, | ||
getCurrentPageBorderBoxCenter, | ||
} from "./without-starting-displacement"; | ||
} from './without-starting-displacement'; | ||
@@ -37,3 +37,3 @@ interface Args { | ||
( | ||
draggable: DraggableDimension | ||
draggable: DraggableDimension, | ||
): boolean => // Allowing movement to draggables that are not visible in the viewport | ||
@@ -47,3 +47,3 @@ // but must be visible in the droppable | ||
withDroppableDisplacement: true, | ||
}) | ||
}), | ||
) | ||
@@ -56,4 +56,4 @@ .sort((a: DraggableDimension, b: DraggableDimension): number => { | ||
destination, | ||
getCurrentPageBorderBoxCenter(a, afterCritical) | ||
) | ||
getCurrentPageBorderBoxCenter(a, afterCritical), | ||
), | ||
); | ||
@@ -64,4 +64,4 @@ const distanceToB = distance( | ||
destination, | ||
getCurrentPageBorderBoxCenter(b, afterCritical) | ||
) | ||
getCurrentPageBorderBoxCenter(b, afterCritical), | ||
), | ||
); | ||
@@ -68,0 +68,0 @@ |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { PublicResult } from "../move-in-direction-types"; | ||
import type { Position } from 'css-box-model'; | ||
import type { PublicResult } from '../move-in-direction-types'; | ||
import type { | ||
@@ -11,10 +11,10 @@ DroppableDimension, | ||
LiftEffect, | ||
} from "../../../types"; | ||
import getBestCrossAxisDroppable from "./get-best-cross-axis-droppable"; | ||
import getClosestDraggable from "./get-closest-draggable"; | ||
} from '../../../types'; | ||
import getBestCrossAxisDroppable from './get-best-cross-axis-droppable'; | ||
import getClosestDraggable from './get-closest-draggable'; | ||
// import moveToNewDroppable from './move-to-new-droppable'; | ||
import getDraggablesInsideDroppable from "../../get-draggables-inside-droppable"; | ||
import getClientFromPageBorderBoxCenter from "../../get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center"; | ||
import getPageBorderBoxCenter from "../../get-center-from-impact/get-page-border-box-center"; | ||
import moveToNewDroppable from "./move-to-new-droppable"; | ||
import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable'; | ||
import getClientFromPageBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center'; | ||
import getPageBorderBoxCenter from '../../get-center-from-impact/get-page-border-box-center'; | ||
import moveToNewDroppable from './move-to-new-droppable'; | ||
@@ -64,3 +64,3 @@ interface Args { | ||
destination.descriptor.id, | ||
draggables | ||
draggables, | ||
); | ||
@@ -67,0 +67,0 @@ |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -10,10 +10,10 @@ DragImpact, | ||
LiftEffect, | ||
} from "../../../types"; | ||
import getDisplacedBy from "../../get-displaced-by"; | ||
import { emptyGroups, noDisplacedBy } from "../../no-impact"; | ||
import getPageBorderBoxCenter from "../../get-center-from-impact/get-page-border-box-center"; | ||
import isTotallyVisibleInNewLocation from "../move-to-next-place/is-totally-visible-in-new-location"; | ||
import { addPlaceholder } from "../../droppable/with-placeholder"; | ||
import isHomeOf from "../../droppable/is-home-of"; | ||
import calculateReorderImpact from "../../calculate-drag-impact/calculate-reorder-impact"; | ||
} from '../../../types'; | ||
import getDisplacedBy from '../../get-displaced-by'; | ||
import { emptyGroups, noDisplacedBy } from '../../no-impact'; | ||
import getPageBorderBoxCenter from '../../get-center-from-impact/get-page-border-box-center'; | ||
import isTotallyVisibleInNewLocation from '../move-to-next-place/is-totally-visible-in-new-location'; | ||
import { addPlaceholder } from '../../droppable/with-placeholder'; | ||
import isHomeOf from '../../droppable/is-home-of'; | ||
import calculateReorderImpact from '../../calculate-drag-impact/calculate-reorder-impact'; | ||
@@ -52,3 +52,3 @@ interface Args { | ||
at: { | ||
type: "REORDER", | ||
type: 'REORDER', | ||
destination: { | ||
@@ -90,3 +90,3 @@ droppableId: destination.descriptor.id, | ||
previousPageBorderBoxCenter[destination.axis.line] <= | ||
moveRelativeTo.page.borderBox.center[destination.axis.line] | ||
moveRelativeTo.page.borderBox.center[destination.axis.line], | ||
); | ||
@@ -110,3 +110,3 @@ | ||
destination.axis, | ||
draggable.displaceBy | ||
draggable.displaceBy, | ||
); | ||
@@ -113,0 +113,0 @@ |
@@ -1,10 +0,10 @@ | ||
import type { Position, Rect, Spacing } from "css-box-model"; | ||
import type { DraggableDimension, LiftEffect } from "../../../types"; | ||
import { negate, subtract } from "../../position"; | ||
import { offsetByPosition } from "../../spacing"; | ||
import didStartAfterCritical from "../../did-start-after-critical"; | ||
import type { Position, Rect, Spacing } from 'css-box-model'; | ||
import type { DraggableDimension, LiftEffect } from '../../../types'; | ||
import { negate, subtract } from '../../position'; | ||
import { offsetByPosition } from '../../spacing'; | ||
import didStartAfterCritical from '../../did-start-after-critical'; | ||
export const getCurrentPageBorderBoxCenter = ( | ||
draggable: DraggableDimension, | ||
afterCritical: LiftEffect | ||
afterCritical: LiftEffect, | ||
): Position => { | ||
@@ -21,3 +21,3 @@ // If an item started displaced it is now resting | ||
draggable: DraggableDimension, | ||
afterCritical: LiftEffect | ||
afterCritical: LiftEffect, | ||
): Spacing => { | ||
@@ -24,0 +24,0 @@ // If an item started displaced it is now resting |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { DragImpact } from "../../types"; | ||
import type { Position } from 'css-box-model'; | ||
import type { DragImpact } from '../../types'; | ||
@@ -4,0 +4,0 @@ export interface PublicResult { |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -9,13 +9,13 @@ DroppableDimension, | ||
LiftEffect, | ||
} from "../../../types"; | ||
import type { PublicResult } from "../move-in-direction-types"; | ||
import getDraggablesInsideDroppable from "../../get-draggables-inside-droppable"; | ||
import moveToNextCombine from "./move-to-next-combine"; | ||
import moveToNextIndex from "./move-to-next-index"; | ||
import isHomeOf from "../../droppable/is-home-of"; | ||
import getPageBorderBoxCenter from "../../get-center-from-impact/get-page-border-box-center"; | ||
import speculativelyIncrease from "../../update-displacement-visibility/speculatively-increase"; | ||
import getClientFromPageBorderBoxCenter from "../../get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center"; | ||
import { subtract } from "../../position"; | ||
import isTotallyVisibleInNewLocation from "./is-totally-visible-in-new-location"; | ||
} from '../../../types'; | ||
import type { PublicResult } from '../move-in-direction-types'; | ||
import getDraggablesInsideDroppable from '../../get-draggables-inside-droppable'; | ||
import moveToNextCombine from './move-to-next-combine'; | ||
import moveToNextIndex from './move-to-next-index'; | ||
import isHomeOf from '../../droppable/is-home-of'; | ||
import getPageBorderBoxCenter from '../../get-center-from-impact/get-page-border-box-center'; | ||
import speculativelyIncrease from '../../update-displacement-visibility/speculatively-increase'; | ||
import getClientFromPageBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center'; | ||
import { subtract } from '../../position'; | ||
import isTotallyVisibleInNewLocation from './is-totally-visible-in-new-location'; | ||
@@ -51,3 +51,3 @@ interface Args { | ||
destination.descriptor.id, | ||
draggables | ||
draggables, | ||
); | ||
@@ -117,3 +117,3 @@ const isInHomeList: boolean = isHomeOf(draggable, destination); | ||
pageBorderBoxCenter, | ||
previousPageBorderBoxCenter | ||
previousPageBorderBoxCenter, | ||
); | ||
@@ -120,0 +120,0 @@ |
@@ -1,10 +0,10 @@ | ||
import type { Position, Rect, Spacing } from "css-box-model"; | ||
import { subtract } from "../../position"; | ||
import { offsetByPosition } from "../../spacing"; | ||
import type { Position, Rect, Spacing } from 'css-box-model'; | ||
import { subtract } from '../../position'; | ||
import { offsetByPosition } from '../../spacing'; | ||
import { | ||
isTotallyVisible, | ||
isTotallyVisibleOnAxis, | ||
} from "../../visibility/is-visible"; | ||
import type { Args as IsVisibleArgs } from "../../visibility/is-visible"; | ||
import type { DraggableDimension, DroppableDimension } from "../../../types"; | ||
} from '../../visibility/is-visible'; | ||
import type { Args as IsVisibleArgs } from '../../visibility/is-visible'; | ||
import type { DraggableDimension, DroppableDimension } from '../../../types'; | ||
@@ -35,7 +35,7 @@ interface Args { | ||
newPageBorderBoxCenter, | ||
draggable.page.borderBox.center | ||
draggable.page.borderBox.center, | ||
); | ||
const shifted: Spacing = offsetByPosition( | ||
draggable.page.borderBox, | ||
changeNeeded | ||
changeNeeded, | ||
); | ||
@@ -42,0 +42,0 @@ |
@@ -1,2 +0,2 @@ | ||
import { invariant } from "../../../../invariant"; | ||
import { invariant } from '../../../../invariant'; | ||
import type { | ||
@@ -9,5 +9,5 @@ DraggableDimension, | ||
DraggableId, | ||
} from "../../../../types"; | ||
import { tryGetDestination } from "../../../get-impact-location"; | ||
import removeDraggableFromList from "../../../remove-draggable-from-list"; | ||
} from '../../../../types'; | ||
import { tryGetDestination } from '../../../get-impact-location'; | ||
import removeDraggableFromList from '../../../remove-draggable-from-list'; | ||
@@ -41,3 +41,3 @@ export interface Args { | ||
const at: CombineImpact = { | ||
type: "COMBINE", | ||
type: 'COMBINE', | ||
combine: { | ||
@@ -63,3 +63,3 @@ draggableId: target, | ||
draggable, | ||
insideDestination | ||
insideDestination, | ||
); | ||
@@ -84,5 +84,5 @@ | ||
const indexOfClosest: number = withoutDraggable.findIndex( | ||
(d) => d.descriptor.id === closestId | ||
(d) => d.descriptor.id === closestId, | ||
); | ||
invariant(indexOfClosest !== -1, "Could not find displaced item in set"); | ||
invariant(indexOfClosest !== -1, 'Could not find displaced item in set'); | ||
@@ -89,0 +89,0 @@ const proposedIndex: number = indexOfClosest - 1; |
@@ -9,4 +9,4 @@ import type { | ||
LiftEffect, | ||
} from "../../../../types"; | ||
import didStartAfterCritical from "../../../did-start-after-critical"; | ||
} from '../../../../types'; | ||
import didStartAfterCritical from '../../../did-start-after-critical'; | ||
@@ -37,3 +37,3 @@ interface Args { | ||
combineId, | ||
afterCritical | ||
afterCritical, | ||
); | ||
@@ -40,0 +40,0 @@ |
@@ -1,2 +0,2 @@ | ||
import type { DraggableDimension, DraggableLocation } from "../../../../types"; | ||
import type { DraggableDimension, DraggableLocation } from '../../../../types'; | ||
@@ -3,0 +3,0 @@ interface Args { |
@@ -1,2 +0,2 @@ | ||
import { invariant } from "../../../../invariant"; | ||
import { invariant } from '../../../../invariant'; | ||
import type { | ||
@@ -10,6 +10,6 @@ DraggableDimension, | ||
ImpactLocation, | ||
} from "../../../../types"; | ||
import calculateReorderImpact from "../../../calculate-drag-impact/calculate-reorder-impact"; | ||
import fromCombine from "./from-combine"; | ||
import fromReorder from "./from-reorder"; | ||
} from '../../../../types'; | ||
import calculateReorderImpact from '../../../calculate-drag-impact/calculate-reorder-impact'; | ||
import fromCombine from './from-combine'; | ||
import fromReorder from './from-reorder'; | ||
@@ -40,5 +40,5 @@ export interface Args { | ||
const wasAt: ImpactLocation | null = previousImpact.at; | ||
invariant(wasAt, "Cannot move in direction without previous impact location"); | ||
invariant(wasAt, 'Cannot move in direction without previous impact location'); | ||
if (wasAt.type === "REORDER") { | ||
if (wasAt.type === 'REORDER') { | ||
const newIndex: number | null = fromReorder({ | ||
@@ -45,0 +45,0 @@ isMovingForward, |
@@ -6,4 +6,4 @@ import type { | ||
LiftEffect, | ||
} from "../types"; | ||
import { origin } from "./position"; | ||
} from '../types'; | ||
import { origin } from './position'; | ||
@@ -10,0 +10,0 @@ export const noDisplacedBy: DisplacedBy = { |
@@ -1,7 +0,7 @@ | ||
import type { DimensionMap, DroppableDimension } from "../types"; | ||
import patchDroppableMap from "./patch-droppable-map"; | ||
import type { DimensionMap, DroppableDimension } from '../types'; | ||
import patchDroppableMap from './patch-droppable-map'; | ||
export default ( | ||
dimensions: DimensionMap, | ||
updated: DroppableDimension | ||
updated: DroppableDimension, | ||
): DimensionMap => ({ | ||
@@ -8,0 +8,0 @@ draggables: dimensions.draggables, |
@@ -1,6 +0,6 @@ | ||
import type { DroppableDimension, DroppableDimensionMap } from "../types"; | ||
import type { DroppableDimension, DroppableDimensionMap } from '../types'; | ||
export default ( | ||
droppables: DroppableDimensionMap, | ||
updated: DroppableDimension | ||
updated: DroppableDimension, | ||
): DroppableDimensionMap => ({ | ||
@@ -7,0 +7,0 @@ ...droppables, |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
@@ -30,7 +30,7 @@ export const origin: Position = { x: 0, y: 0 }; | ||
export const patch = ( | ||
line: "x" | "y", | ||
line: 'x' | 'y', | ||
value: number, | ||
otherValue = 0 | ||
otherValue = 0, | ||
): Position => { | ||
if (line === "x") { | ||
if (line === 'x') { | ||
return { | ||
@@ -37,0 +37,0 @@ x: value, |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import { invariant } from "../../../invariant"; | ||
import type { Position } from 'css-box-model'; | ||
import { invariant } from '../../../invariant'; | ||
import type { | ||
@@ -11,7 +11,7 @@ DroppableDimension, | ||
Viewport, | ||
} from "../../../types"; | ||
import whatIsDraggedOver from "../../droppable/what-is-dragged-over"; | ||
import recomputeDisplacementVisibility from "../../update-displacement-visibility/recompute"; | ||
import getClientBorderBoxCenter from "../../get-center-from-impact/get-client-border-box-center"; | ||
import update from "./update"; | ||
} from '../../../types'; | ||
import whatIsDraggedOver from '../../droppable/what-is-dragged-over'; | ||
import recomputeDisplacementVisibility from '../../update-displacement-visibility/recompute'; | ||
import getClientBorderBoxCenter from '../../get-center-from-impact/get-client-border-box-center'; | ||
import update from './update'; | ||
@@ -30,3 +30,3 @@ interface Args { | ||
Args): StateWhenUpdatesAllowed => { | ||
invariant(state.movementMode === "SNAP"); | ||
invariant(state.movementMode === 'SNAP'); | ||
@@ -40,3 +40,3 @@ const needsVisibilityCheck: DragImpact = state.impact; | ||
const isOver: DroppableId | null = whatIsDraggedOver(needsVisibilityCheck); | ||
invariant(isOver, "Must be over a destination in SNAP movement mode"); | ||
invariant(isOver, 'Must be over a destination in SNAP movement mode'); | ||
const destination: DroppableDimension = droppables[isOver]; | ||
@@ -43,0 +43,0 @@ |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -12,6 +12,6 @@ DraggableDimension, | ||
DroppableDimensionMap, | ||
} from "../../../types"; | ||
import getDragImpact from "../../get-drag-impact"; | ||
import { add, subtract } from "../../position"; | ||
import recomputePlaceholders from "../../recompute-placeholders"; | ||
} from '../../../types'; | ||
import getDragImpact from '../../get-drag-impact'; | ||
import { add, subtract } from '../../position'; | ||
import recomputePlaceholders from '../../recompute-placeholders'; | ||
@@ -47,3 +47,3 @@ interface Args<TState extends StateWhenUpdatesAllowed> { | ||
clientSelection, | ||
state.initial.client.selection | ||
state.initial.client.selection, | ||
); | ||
@@ -69,3 +69,3 @@ | ||
// Not updating impact while bulk collecting | ||
if (state.phase === "COLLECTING") { | ||
if (state.phase === 'COLLECTING') { | ||
return { | ||
@@ -72,0 +72,0 @@ ...state, |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -9,6 +9,6 @@ Viewport, | ||
DroppableId, | ||
} from "../../types"; | ||
import { add } from "../position"; | ||
import offsetDraggable from "./offset-draggable"; | ||
import getFrame from "../get-frame"; | ||
} from '../../types'; | ||
import { add } from '../position'; | ||
import offsetDraggable from './offset-draggable'; | ||
import getFrame from '../get-frame'; | ||
@@ -47,3 +47,3 @@ interface Args { | ||
windowScrollChange, | ||
droppableScrollChange | ||
droppableScrollChange, | ||
); | ||
@@ -50,0 +50,0 @@ |
@@ -15,10 +15,10 @@ import type { | ||
DroppableId, | ||
} from "../../types"; | ||
import * as timings from "../../debug/timings"; | ||
import getDragImpact from "../get-drag-impact"; | ||
import adjustAdditionsForScrollChanges from "./adjust-additions-for-scroll-changes"; | ||
import { toDraggableMap, toDroppableMap } from "../dimension-structures"; | ||
import getLiftEffect from "../get-lift-effect"; | ||
import scrollDroppable from "../droppable/scroll-droppable"; | ||
import whatIsDraggedOver from "../droppable/what-is-dragged-over"; | ||
} from '../../types'; | ||
import * as timings from '../../debug/timings'; | ||
import getDragImpact from '../get-drag-impact'; | ||
import adjustAdditionsForScrollChanges from './adjust-additions-for-scroll-changes'; | ||
import { toDraggableMap, toDroppableMap } from '../dimension-structures'; | ||
import getLiftEffect from '../get-lift-effect'; | ||
import scrollDroppable from '../droppable/scroll-droppable'; | ||
import whatIsDraggedOver from '../droppable/what-is-dragged-over'; | ||
@@ -30,3 +30,3 @@ interface Args { | ||
const timingsKey = "Processing dynamic changes"; | ||
const timingsKey = 'Processing dynamic changes'; | ||
@@ -53,6 +53,6 @@ export default ({ | ||
existing, | ||
update.scroll | ||
update.scroll, | ||
); | ||
return scrolled; | ||
} | ||
}, | ||
); | ||
@@ -70,3 +70,3 @@ | ||
viewport: state.viewport, | ||
}) | ||
}), | ||
); | ||
@@ -130,3 +130,3 @@ | ||
// eslint-disable-next-line | ||
phase: "DRAGGING", | ||
phase: 'DRAGGING', | ||
impact, | ||
@@ -140,3 +140,3 @@ onLiftImpact, | ||
if (state.phase === "COLLECTING") { | ||
if (state.phase === 'COLLECTING') { | ||
return draggingState; | ||
@@ -152,3 +152,3 @@ } | ||
// eslint-disable-next-line | ||
phase: "DROP_PENDING", | ||
phase: 'DROP_PENDING', | ||
// No longer waiting | ||
@@ -155,0 +155,0 @@ reason: state.reason, |
@@ -1,4 +0,4 @@ | ||
import { withScroll, offset as offsetBox } from "css-box-model"; | ||
import type { Position, BoxModel } from "css-box-model"; | ||
import type { DraggableDimension } from "../../types"; | ||
import { withScroll, offset as offsetBox } from 'css-box-model'; | ||
import type { Position, BoxModel } from 'css-box-model'; | ||
import type { DraggableDimension } from '../../types'; | ||
@@ -5,0 +5,0 @@ interface Args { |
import { | ||
addPlaceholder, | ||
removePlaceholder, | ||
} from "./droppable/with-placeholder"; | ||
import whatIsDraggedOver from "./droppable/what-is-dragged-over"; | ||
} from './droppable/with-placeholder'; | ||
import whatIsDraggedOver from './droppable/what-is-dragged-over'; | ||
import type { | ||
@@ -13,5 +13,5 @@ DroppableDimension, | ||
DroppableId, | ||
} from "../types"; | ||
import patchDroppableMap from "./patch-droppable-map"; | ||
import isHomeOf from "./droppable/is-home-of"; | ||
} from '../types'; | ||
import patchDroppableMap from './patch-droppable-map'; | ||
import isHomeOf from './droppable/is-home-of'; | ||
@@ -95,3 +95,3 @@ interface ClearArgs { | ||
draggable, | ||
draggables | ||
draggables, | ||
); | ||
@@ -98,0 +98,0 @@ |
@@ -1,6 +0,6 @@ | ||
import { getRect } from "css-box-model"; | ||
import type { Rect, Position } from "css-box-model"; | ||
import { offsetByPosition } from "./spacing"; | ||
import { getRect } from 'css-box-model'; | ||
import type { Rect, Position } from 'css-box-model'; | ||
import { offsetByPosition } from './spacing'; | ||
export const offsetRectByPosition = (rect: Rect, point: Position): Rect => | ||
getRect(offsetByPosition(rect, point)); |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import { invariant } from "../invariant"; | ||
import type { Position } from 'css-box-model'; | ||
import { invariant } from '../invariant'; | ||
import type { | ||
@@ -18,19 +18,19 @@ DimensionMap, | ||
DropReason, | ||
} from "../types"; | ||
import type { Action } from "./store-types"; | ||
import type { PublicResult as MoveInDirectionResult } from "./move-in-direction/move-in-direction-types"; | ||
import scrollDroppable from "./droppable/scroll-droppable"; | ||
import moveInDirection from "./move-in-direction"; | ||
import { add, isEqual, origin } from "./position"; | ||
import scrollViewport from "./scroll-viewport"; | ||
import isMovementAllowed from "./is-movement-allowed"; | ||
import { toDroppableList } from "./dimension-structures"; | ||
import update from "./post-reducer/when-moving/update"; | ||
import refreshSnap from "./post-reducer/when-moving/refresh-snap"; | ||
import getLiftEffect from "./get-lift-effect"; | ||
import patchDimensionMap from "./patch-dimension-map"; | ||
import publishWhileDraggingInVirtual from "./publish-while-dragging-in-virtual"; | ||
} from '../types'; | ||
import type { Action } from './store-types'; | ||
import type { PublicResult as MoveInDirectionResult } from './move-in-direction/move-in-direction-types'; | ||
import scrollDroppable from './droppable/scroll-droppable'; | ||
import moveInDirection from './move-in-direction'; | ||
import { add, isEqual, origin } from './position'; | ||
import scrollViewport from './scroll-viewport'; | ||
import isMovementAllowed from './is-movement-allowed'; | ||
import { toDroppableList } from './dimension-structures'; | ||
import update from './post-reducer/when-moving/update'; | ||
import refreshSnap from './post-reducer/when-moving/refresh-snap'; | ||
import getLiftEffect from './get-lift-effect'; | ||
import patchDimensionMap from './patch-dimension-map'; | ||
import publishWhileDraggingInVirtual from './publish-while-dragging-in-virtual'; | ||
const isSnapping = (state: StateWhenUpdatesAllowed): boolean => | ||
state.movementMode === "SNAP"; | ||
state.movementMode === 'SNAP'; | ||
@@ -40,3 +40,3 @@ const postDroppableChange = ( | ||
updated: DroppableDimension, | ||
isEnabledChanging: boolean | ||
isEnabledChanging: boolean, | ||
): StateWhenUpdatesAllowed => { | ||
@@ -60,5 +60,5 @@ const dimensions: DimensionMap = patchDimensionMap(state.dimensions, updated); | ||
function removeScrollJumpRequest( | ||
state: DraggingState | CollectingState | DropPendingState | ||
state: DraggingState | CollectingState | DropPendingState, | ||
): DraggingState | CollectingState | DropPendingState { | ||
if (state.isDragging && state.movementMode === "SNAP") { | ||
if (state.isDragging && state.movementMode === 'SNAP') { | ||
return { | ||
@@ -72,7 +72,7 @@ ...state, | ||
const idle: IdleState = { phase: "IDLE", completed: null, shouldFlush: false }; | ||
const idle: IdleState = { phase: 'IDLE', completed: null, shouldFlush: false }; | ||
// eslint-disable-next-line default-param-last | ||
export default (state: State = idle, action: Action): State => { | ||
if (action.type === "FLUSH") { | ||
if (action.type === 'FLUSH') { | ||
return { | ||
@@ -84,6 +84,6 @@ ...idle, | ||
if (action.type === "INITIAL_PUBLISH") { | ||
if (action.type === 'INITIAL_PUBLISH') { | ||
invariant( | ||
state.phase === "IDLE", | ||
"INITIAL_PUBLISH must come after a IDLE phase" | ||
state.phase === 'IDLE', | ||
'INITIAL_PUBLISH must come after a IDLE phase', | ||
); | ||
@@ -115,3 +115,3 @@ const { critical, clientSelection, viewport, dimensions, movementMode } = | ||
const isWindowScrollAllowed: boolean = toDroppableList( | ||
dimensions.droppables | ||
dimensions.droppables, | ||
).every((item: DroppableDimension) => !item.isFixedOnPage); | ||
@@ -127,3 +127,3 @@ | ||
const result: DraggingState = { | ||
phase: "DRAGGING", | ||
phase: 'DRAGGING', | ||
isDragging: true, | ||
@@ -147,6 +147,6 @@ critical, | ||
if (action.type === "COLLECTION_STARTING") { | ||
if (action.type === 'COLLECTION_STARTING') { | ||
// A collection might have restarted. We do not care as we are already in the right phase | ||
// TODO: remove? | ||
if (state.phase === "COLLECTING" || state.phase === "DROP_PENDING") { | ||
if (state.phase === 'COLLECTING' || state.phase === 'DROP_PENDING') { | ||
return state; | ||
@@ -156,4 +156,4 @@ } | ||
invariant( | ||
state.phase === "DRAGGING", | ||
`Collection cannot start from phase ${state.phase}` | ||
state.phase === 'DRAGGING', | ||
`Collection cannot start from phase ${state.phase}`, | ||
); | ||
@@ -163,3 +163,3 @@ | ||
...state, | ||
phase: "COLLECTING", | ||
phase: 'COLLECTING', | ||
}; | ||
@@ -170,7 +170,7 @@ | ||
if (action.type === "PUBLISH_WHILE_DRAGGING") { | ||
if (action.type === 'PUBLISH_WHILE_DRAGGING') { | ||
// Unexpected bulk publish | ||
invariant( | ||
state.phase === "COLLECTING" || state.phase === "DROP_PENDING", | ||
`Unexpected ${action.type} received in phase ${state.phase}` | ||
state.phase === 'COLLECTING' || state.phase === 'DROP_PENDING', | ||
`Unexpected ${action.type} received in phase ${state.phase}`, | ||
); | ||
@@ -184,5 +184,5 @@ | ||
if (action.type === "MOVE") { | ||
if (action.type === 'MOVE') { | ||
// Not allowing any more movements | ||
if (state.phase === "DROP_PENDING") { | ||
if (state.phase === 'DROP_PENDING') { | ||
return state; | ||
@@ -193,3 +193,3 @@ } | ||
isMovementAllowed(state), | ||
`${action.type} not permitted in phase ${state.phase}` | ||
`${action.type} not permitted in phase ${state.phase}`, | ||
); | ||
@@ -212,7 +212,7 @@ | ||
if (action.type === "UPDATE_DROPPABLE_SCROLL") { | ||
if (action.type === 'UPDATE_DROPPABLE_SCROLL') { | ||
// Not allowing changes while a drop is pending | ||
// Cannot get this during a DROP_ANIMATING as the dimension | ||
// marshal will cancel any pending scroll updates | ||
if (state.phase === "DROP_PENDING") { | ||
if (state.phase === 'DROP_PENDING') { | ||
return removeScrollJumpRequest(state); | ||
@@ -223,3 +223,3 @@ } | ||
// manually on the droppable so we can ignore this change | ||
if (state.phase === "COLLECTING") { | ||
if (state.phase === 'COLLECTING') { | ||
return removeScrollJumpRequest(state); | ||
@@ -230,3 +230,3 @@ } | ||
isMovementAllowed(state), | ||
`${action.type} not permitted in phase ${state.phase}` | ||
`${action.type} not permitted in phase ${state.phase}`, | ||
); | ||
@@ -247,5 +247,5 @@ | ||
if (action.type === "UPDATE_DROPPABLE_IS_ENABLED") { | ||
if (action.type === 'UPDATE_DROPPABLE_IS_ENABLED') { | ||
// Things are locked at this point | ||
if (state.phase === "DROP_PENDING") { | ||
if (state.phase === 'DROP_PENDING') { | ||
return state; | ||
@@ -256,3 +256,3 @@ } | ||
isMovementAllowed(state), | ||
`Attempting to move in an unsupported phase ${state.phase}` | ||
`Attempting to move in an unsupported phase ${state.phase}`, | ||
); | ||
@@ -265,3 +265,3 @@ | ||
target, | ||
`Cannot find Droppable[id: ${id}] to toggle its enabled state` | ||
`Cannot find Droppable[id: ${id}] to toggle its enabled state`, | ||
); | ||
@@ -272,3 +272,3 @@ | ||
`Trying to set droppable isEnabled to ${String(isEnabled)} | ||
but it is already ${String(target.isEnabled)}` | ||
but it is already ${String(target.isEnabled)}`, | ||
); | ||
@@ -284,5 +284,5 @@ | ||
if (action.type === "UPDATE_DROPPABLE_IS_COMBINE_ENABLED") { | ||
if (action.type === 'UPDATE_DROPPABLE_IS_COMBINE_ENABLED') { | ||
// Things are locked at this point | ||
if (state.phase === "DROP_PENDING") { | ||
if (state.phase === 'DROP_PENDING') { | ||
return state; | ||
@@ -293,3 +293,3 @@ } | ||
isMovementAllowed(state), | ||
`Attempting to move in an unsupported phase ${state.phase}` | ||
`Attempting to move in an unsupported phase ${state.phase}`, | ||
); | ||
@@ -302,3 +302,3 @@ | ||
target, | ||
`Cannot find Droppable[id: ${id}] to toggle its isCombineEnabled state` | ||
`Cannot find Droppable[id: ${id}] to toggle its isCombineEnabled state`, | ||
); | ||
@@ -309,3 +309,3 @@ | ||
`Trying to set droppable isCombineEnabled to ${String(isCombineEnabled)} | ||
but it is already ${String(target.isCombineEnabled)}` | ||
but it is already ${String(target.isCombineEnabled)}`, | ||
); | ||
@@ -321,5 +321,5 @@ | ||
if (action.type === "MOVE_BY_WINDOW_SCROLL") { | ||
if (action.type === 'MOVE_BY_WINDOW_SCROLL') { | ||
// No longer accepting changes | ||
if (state.phase === "DROP_PENDING" || state.phase === "DROP_ANIMATING") { | ||
if (state.phase === 'DROP_PENDING' || state.phase === 'DROP_ANIMATING') { | ||
return state; | ||
@@ -330,3 +330,3 @@ } | ||
isMovementAllowed(state), | ||
`Cannot move by window in phase ${state.phase}` | ||
`Cannot move by window in phase ${state.phase}`, | ||
); | ||
@@ -336,3 +336,3 @@ | ||
state.isWindowScrollAllowed, | ||
"Window scrolling is currently not supported for fixed lists" | ||
'Window scrolling is currently not supported for fixed lists', | ||
); | ||
@@ -362,3 +362,3 @@ | ||
if (action.type === "UPDATE_VIEWPORT_MAX_SCROLL") { | ||
if (action.type === 'UPDATE_VIEWPORT_MAX_SCROLL') { | ||
// Could occur if a transitionEnd occurs after a drag ends | ||
@@ -390,9 +390,9 @@ if (!isMovementAllowed(state)) { | ||
if ( | ||
action.type === "MOVE_UP" || | ||
action.type === "MOVE_DOWN" || | ||
action.type === "MOVE_LEFT" || | ||
action.type === "MOVE_RIGHT" | ||
action.type === 'MOVE_UP' || | ||
action.type === 'MOVE_DOWN' || | ||
action.type === 'MOVE_LEFT' || | ||
action.type === 'MOVE_RIGHT' | ||
) { | ||
// Not doing keyboard movements during these phases | ||
if (state.phase === "COLLECTING" || state.phase === "DROP_PENDING") { | ||
if (state.phase === 'COLLECTING' || state.phase === 'DROP_PENDING') { | ||
return state; | ||
@@ -402,4 +402,4 @@ } | ||
invariant( | ||
state.phase === "DRAGGING", | ||
`${action.type} received while not in DRAGGING phase` | ||
state.phase === 'DRAGGING', | ||
`${action.type} received while not in DRAGGING phase`, | ||
); | ||
@@ -425,7 +425,7 @@ | ||
if (action.type === "DROP_PENDING") { | ||
if (action.type === 'DROP_PENDING') { | ||
const reason: DropReason = action.payload.reason; | ||
invariant( | ||
state.phase === "COLLECTING", | ||
"Can only move into the DROP_PENDING phase from the COLLECTING phase" | ||
state.phase === 'COLLECTING', | ||
'Can only move into the DROP_PENDING phase from the COLLECTING phase', | ||
); | ||
@@ -435,3 +435,3 @@ | ||
...state, | ||
phase: "DROP_PENDING", | ||
phase: 'DROP_PENDING', | ||
isWaiting: true, | ||
@@ -443,7 +443,7 @@ reason, | ||
if (action.type === "DROP_ANIMATE") { | ||
if (action.type === 'DROP_ANIMATE') { | ||
const { completed, dropDuration, newHomeClientOffset } = action.payload; | ||
invariant( | ||
state.phase === "DRAGGING" || state.phase === "DROP_PENDING", | ||
`Cannot animate drop from phase ${state.phase}` | ||
state.phase === 'DRAGGING' || state.phase === 'DROP_PENDING', | ||
`Cannot animate drop from phase ${state.phase}`, | ||
); | ||
@@ -453,3 +453,3 @@ | ||
const result: DropAnimatingState = { | ||
phase: "DROP_ANIMATING", | ||
phase: 'DROP_ANIMATING', | ||
completed, | ||
@@ -466,7 +466,7 @@ dropDuration, | ||
// We can simply return to the idle state | ||
if (action.type === "DROP_COMPLETE") { | ||
if (action.type === 'DROP_COMPLETE') { | ||
const { completed } = action.payload; | ||
return { | ||
phase: "IDLE", | ||
phase: 'IDLE', | ||
completed, | ||
@@ -473,0 +473,0 @@ shouldFlush: false, |
@@ -1,15 +0,15 @@ | ||
import { invariant } from "../../invariant"; | ||
import type { DraggableId, DroppableId, TypeId } from "../../types"; | ||
import { invariant } from '../../invariant'; | ||
import type { TypeId, DraggableId, DroppableId } from '../../types'; | ||
import type { | ||
Registry, | ||
DraggableAPI, | ||
DroppableAPI, | ||
DraggableEntry, | ||
DraggableEntryMap, | ||
DroppableAPI, | ||
DroppableEntry, | ||
DroppableEntryMap, | ||
Registry, | ||
RegistryEvent, | ||
Subscriber, | ||
Unsubscribe, | ||
} from "./registry-types"; | ||
DraggableEntryMap, | ||
DroppableEntryMap, | ||
} from './registry-types'; | ||
@@ -63,3 +63,3 @@ interface EntryMap { | ||
entries.draggables[entry.descriptor.id] = entry; | ||
notify({ type: "ADDITION", value: entry }); | ||
notify({ type: 'ADDITION', value: entry }); | ||
}, | ||
@@ -100,5 +100,5 @@ update: (entry: DraggableEntry, last: DraggableEntry) => { | ||
// Hack to get react 18 double useEffects to not cause errors when finding unregistered droppables | ||
// make sure the entry exists before removal | ||
if (entries.droppables[entry.descriptor.droppableId]) { | ||
notify({ type: "REMOVAL", value: entry }); | ||
notify({ type: 'REMOVAL', value: entry }); | ||
} | ||
@@ -111,3 +111,3 @@ }, | ||
Object.values(entries.draggables).filter( | ||
(entry: DraggableEntry): boolean => entry.descriptor.type === type | ||
(entry: DraggableEntry): boolean => entry.descriptor.type === type, | ||
), | ||
@@ -132,3 +132,3 @@ }; | ||
const current: DroppableEntry | null = findDroppableById( | ||
entry.descriptor.id | ||
entry.descriptor.id, | ||
); | ||
@@ -153,3 +153,3 @@ | ||
Object.values(entries.droppables).filter( | ||
(entry: DroppableEntry): boolean => entry.descriptor.type === type | ||
(entry: DroppableEntry): boolean => entry.descriptor.type === type, | ||
), | ||
@@ -156,0 +156,0 @@ }; |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -13,6 +13,6 @@ Id, | ||
TypeId, | ||
} from "../../types"; | ||
} from '../../types'; | ||
export type GetDraggableDimensionFn = ( | ||
windowScroll: Position | ||
windowScroll: Position, | ||
) => DraggableDimension; | ||
@@ -39,3 +39,3 @@ | ||
windowScroll: Position, | ||
options: ScrollOptions | ||
options: ScrollOptions, | ||
) => DroppableDimension; | ||
@@ -83,7 +83,7 @@ | ||
| { | ||
type: "ADDITION"; | ||
type: 'ADDITION'; | ||
value: DraggableEntry; | ||
} | ||
| { | ||
type: "REMOVAL"; | ||
type: 'REMOVAL'; | ||
value: DraggableEntry; | ||
@@ -90,0 +90,0 @@ }; |
@@ -1,5 +0,5 @@ | ||
import { useMemo } from "use-memo-one"; | ||
import useEffectOnce from "../../use-effect-once"; | ||
import createRegistry from "./create-registry"; | ||
import type { Registry } from "./registry-types"; | ||
import React, { useEffect } from 'react'; | ||
import { useMemo } from 'use-memo-one'; | ||
import type { Registry } from './registry-types'; | ||
import createRegistry from './create-registry'; | ||
@@ -9,13 +9,25 @@ export default function useRegistry(): Registry { | ||
// Hack to get around react 18 double render in useEffect hook | ||
useEffectOnce(() => { | ||
useEffect(() => { | ||
// clean up the registry to avoid any leaks | ||
return function unmount() { | ||
// clean up the registry to avoid any leaks | ||
// doing it after an animation frame so that other things unmounting | ||
// can continue to interact with the registry | ||
requestAnimationFrame(registry.clean); | ||
// FIXME: we do not know if this is still needed, but to make sure we do not | ||
// break any existing existing code using react 16 and 17 we'll | ||
// continue to clean up after an animation frame | ||
// | ||
// The requestAnimationFrame polyfill was added in this commit: | ||
// https://github.com/atlassian/react-beautiful-dnd/pull/1487/commits/8bdffb9d077b0009400620d9cf6575bba7af13dc#diff-b3b2de485fa432e394aebc8abf54be40ad7fac9b39a2ed818fddfd56f1786c53 | ||
if (React.version.startsWith('16') || React.version.startsWith('17')) { | ||
// doing it after an animation frame so that other things unmounting | ||
// can continue to interact with the registry | ||
requestAnimationFrame(registry.clean); | ||
} else { | ||
// starting with react v18, we must invoke clean immediately | ||
// we won't be able to access the registry after the unmount | ||
// more details here: https://beta.reactjs.org/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development | ||
registry.clean(); | ||
} | ||
}; | ||
}); | ||
}, [registry]); | ||
return registry; | ||
} |
@@ -1,3 +0,3 @@ | ||
import memoizeOne from "memoize-one"; | ||
import type { DraggableDimension } from "../types"; | ||
import memoizeOne from 'memoize-one'; | ||
import type { DraggableDimension } from '../types'; | ||
@@ -7,7 +7,7 @@ export default memoizeOne( | ||
remove: DraggableDimension, | ||
list: DraggableDimension[] | ||
list: DraggableDimension[], | ||
): DraggableDimension[] => | ||
list.filter( | ||
(item: DraggableDimension) => item.descriptor.id !== remove.descriptor.id | ||
) | ||
(item: DraggableDimension) => item.descriptor.id !== remove.descriptor.id, | ||
), | ||
); |
@@ -1,6 +0,6 @@ | ||
import { getRect } from "css-box-model"; | ||
import type { Rect, Position } from "css-box-model"; | ||
import { getRect } from 'css-box-model'; | ||
import type { Rect, Position } from 'css-box-model'; | ||
import { subtract, negate } from "./position"; | ||
import type { Viewport } from "../types"; | ||
import { subtract, negate } from './position'; | ||
import type { Viewport } from '../types'; | ||
@@ -7,0 +7,0 @@ export default (viewport: Viewport, newScroll: Position): Viewport => { |
@@ -1,2 +0,2 @@ | ||
import type { Spacing, Position } from "css-box-model"; | ||
import type { Spacing, Position } from 'css-box-model'; | ||
@@ -12,3 +12,3 @@ // TODO add test | ||
spacing: Spacing, | ||
point: Position | ||
point: Position, | ||
): Spacing => ({ | ||
@@ -23,3 +23,3 @@ top: spacing.top + point.y, | ||
spacing: Spacing, | ||
position: Position | ||
position: Position, | ||
): Spacing => ({ | ||
@@ -26,0 +26,0 @@ // pulling back to increase size |
// This file exists to avoid a circular dependency between types.js and action-creators.js | ||
import type { Store as ReduxStore, Dispatch as ReduxDispatch } from "redux"; | ||
import type { Action } from "./action-creators"; | ||
import type { State } from "../types"; | ||
import type { Store as ReduxStore, Dispatch as ReduxDispatch } from 'redux'; | ||
import type { Action } from './action-creators'; | ||
import type { State } from '../types'; | ||
@@ -54,3 +54,3 @@ export type { | ||
DropAnimationFinishedActionCreator, | ||
} from "./action-creators"; | ||
} from './action-creators'; | ||
@@ -57,0 +57,0 @@ export type Dispatch = ReduxDispatch<Action>; |
@@ -9,4 +9,4 @@ import type { | ||
DisplacementGroups, | ||
} from "../../types"; | ||
import getDisplacementGroups from "../get-displacement-groups"; | ||
} from '../../types'; | ||
import getDisplacementGroups from '../get-displacement-groups'; | ||
@@ -23,3 +23,3 @@ interface RecomputeArgs { | ||
ids: DraggableId[], | ||
draggables: DraggableDimensionMap | ||
draggables: DraggableDimensionMap, | ||
): DraggableDimension[] { | ||
@@ -39,3 +39,3 @@ return ids.map((id: DraggableId): DraggableDimension => draggables[id]); | ||
last.all, | ||
draggables | ||
draggables, | ||
); | ||
@@ -42,0 +42,0 @@ |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -13,7 +13,7 @@ DraggableId, | ||
Viewport, | ||
} from "../../types"; | ||
import scrollViewport from "../scroll-viewport"; | ||
import scrollDroppable from "../droppable/scroll-droppable"; | ||
import { add } from "../position"; | ||
import getDisplacementGroups from "../get-displacement-groups"; | ||
} from '../../types'; | ||
import scrollViewport from '../scroll-viewport'; | ||
import scrollDroppable from '../droppable/scroll-droppable'; | ||
import { add } from '../position'; | ||
import getDisplacementGroups from '../get-displacement-groups'; | ||
@@ -30,3 +30,3 @@ interface SpeculativeArgs { | ||
ids: DraggableId[], | ||
draggables: DraggableDimensionMap | ||
draggables: DraggableDimensionMap, | ||
): DraggableDimension[] { | ||
@@ -38,3 +38,3 @@ return ids.map((id: DraggableId): DraggableDimension => draggables[id]); | ||
id: DraggableId, | ||
groups: DisplacementGroups[] | ||
groups: DisplacementGroups[], | ||
): Displacement | null { | ||
@@ -59,3 +59,3 @@ for (let i = 0; i < groups.length; i++) { | ||
viewport, | ||
add(viewport.scroll.current, maxScrollChange) | ||
add(viewport.scroll.current, maxScrollChange), | ||
); | ||
@@ -65,3 +65,3 @@ const scrolledDroppable: DroppableDimension = destination.frame | ||
destination, | ||
add(destination.frame.scroll.current, maxScrollChange) | ||
add(destination.frame.scroll.current, maxScrollChange), | ||
) | ||
@@ -68,0 +68,0 @@ : destination; |
@@ -1,3 +0,3 @@ | ||
import type { Spacing } from "css-box-model"; | ||
import isWithin from "../is-within"; | ||
import type { Spacing } from 'css-box-model'; | ||
import isWithin from '../is-within'; | ||
@@ -4,0 +4,0 @@ export default (frame: Spacing) => { |
@@ -1,3 +0,3 @@ | ||
import type { Position, Spacing } from "css-box-model"; | ||
import isWithin from "../is-within"; | ||
import type { Position, Spacing } from 'css-box-model'; | ||
import isWithin from '../is-within'; | ||
@@ -4,0 +4,0 @@ export default function isPositionInFrame(frame: Spacing) { |
@@ -1,5 +0,5 @@ | ||
import type { Spacing } from "css-box-model"; | ||
import type { Axis } from "../../types"; | ||
import isWithin from "../is-within"; | ||
import { vertical } from "../axis"; | ||
import type { Spacing } from 'css-box-model'; | ||
import type { Axis } from '../../types'; | ||
import isWithin from '../is-within'; | ||
import { vertical } from '../axis'; | ||
@@ -6,0 +6,0 @@ export default (axis: Axis) => (frame: Spacing) => { |
@@ -1,3 +0,3 @@ | ||
import type { Spacing } from "css-box-model"; | ||
import isWithin from "../is-within"; | ||
import type { Spacing } from 'css-box-model'; | ||
import isWithin from '../is-within'; | ||
@@ -4,0 +4,0 @@ export default (frame: Spacing) => { |
@@ -1,8 +0,8 @@ | ||
import type { Position, Spacing, Rect } from "css-box-model"; | ||
import type { DroppableDimension } from "../../types"; | ||
import isPartiallyVisibleThroughFrame from "./is-partially-visible-through-frame"; | ||
import isTotallyVisibleThroughFrame from "./is-totally-visible-through-frame"; | ||
import isTotallyVisibleThroughFrameOnAxis from "./is-totally-visible-through-frame-on-axis"; | ||
import { offsetByPosition } from "../spacing"; | ||
import { origin } from "../position"; | ||
import type { Position, Spacing, Rect } from 'css-box-model'; | ||
import type { DroppableDimension } from '../../types'; | ||
import isPartiallyVisibleThroughFrame from './is-partially-visible-through-frame'; | ||
import isTotallyVisibleThroughFrame from './is-totally-visible-through-frame'; | ||
import isTotallyVisibleThroughFrameOnAxis from './is-totally-visible-through-frame-on-axis'; | ||
import { offsetByPosition } from '../spacing'; | ||
import { origin } from '../position'; | ||
@@ -19,3 +19,3 @@ export interface Args { | ||
type IsVisibleThroughFrameFn = ( | ||
frame: Spacing | ||
frame: Spacing, | ||
) => (subject: Spacing) => boolean; | ||
@@ -29,3 +29,3 @@ | ||
target: Spacing, | ||
destination: DroppableDimension | ||
destination: DroppableDimension, | ||
): Spacing => { | ||
@@ -42,3 +42,3 @@ const displacement: Position = destination.frame | ||
destination: DroppableDimension, | ||
isVisibleThroughFrameFn: IsVisibleThroughFrameFn | ||
isVisibleThroughFrameFn: IsVisibleThroughFrameFn, | ||
): boolean => { | ||
@@ -62,3 +62,3 @@ // destination subject is totally hidden by frame | ||
viewport: Rect, | ||
isVisibleThroughFrameFn: IsVisibleThroughFrameFn | ||
isVisibleThroughFrameFn: IsVisibleThroughFrameFn, | ||
): boolean => isVisibleThroughFrameFn(viewport)(target); | ||
@@ -81,3 +81,3 @@ | ||
destination, | ||
isVisibleThroughFrameFn | ||
isVisibleThroughFrameFn, | ||
) && isVisibleInViewport(displacedTarget, viewport, isVisibleThroughFrameFn) | ||
@@ -103,4 +103,4 @@ ); | ||
isVisibleThroughFrameFn: isTotallyVisibleThroughFrameOnAxis( | ||
args.destination.axis | ||
args.destination.axis, | ||
), | ||
}); |
@@ -1,5 +0,5 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { DroppableDimension, Viewport } from "../../types"; | ||
import withDroppableDisplacement from "./with-droppable-displacement"; | ||
import withViewportDisplacement from "./with-viewport-displacement"; | ||
import type { Position } from 'css-box-model'; | ||
import type { DroppableDimension, Viewport } from '../../types'; | ||
import withDroppableDisplacement from './with-droppable-displacement'; | ||
import withViewportDisplacement from './with-viewport-displacement'; | ||
@@ -9,7 +9,7 @@ export default ( | ||
droppable: DroppableDimension, | ||
viewport: Viewport | ||
viewport: Viewport, | ||
): Position => | ||
withDroppableDisplacement( | ||
droppable, | ||
withViewportDisplacement(viewport, page) | ||
withViewportDisplacement(viewport, page), | ||
); |
@@ -1,4 +0,4 @@ | ||
import type { Position } from "css-box-model"; | ||
import { add } from "../position"; | ||
import type { Scrollable, DroppableDimension } from "../../types"; | ||
import type { Position } from 'css-box-model'; | ||
import { add } from '../position'; | ||
import type { Scrollable, DroppableDimension } from '../../types'; | ||
@@ -5,0 +5,0 @@ export default (droppable: DroppableDimension, point: Position): Position => { |
@@ -1,4 +0,4 @@ | ||
import type { Rect } from "css-box-model"; | ||
import type { Scrollable, DroppableDimension } from "../../types"; | ||
import { offsetRectByPosition } from "../rect"; | ||
import type { Rect } from 'css-box-model'; | ||
import type { Scrollable, DroppableDimension } from '../../types'; | ||
import { offsetRectByPosition } from '../rect'; | ||
@@ -5,0 +5,0 @@ export default (droppable: DroppableDimension, area: Rect): Rect => { |
@@ -1,6 +0,6 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Viewport } from "../../types"; | ||
import { add } from "../position"; | ||
import type { Position } from 'css-box-model'; | ||
import type { Viewport } from '../../types'; | ||
import { add } from '../position'; | ||
export default (viewport: Viewport, point: Position): Position => | ||
add(viewport.scroll.diff.displacement, point); |
@@ -1,2 +0,2 @@ | ||
import type { BoxModel, Rect, Position } from "css-box-model"; | ||
import type { BoxModel, Rect, Position } from 'css-box-model'; | ||
@@ -10,3 +10,3 @@ export type Id = string; | ||
export type DroppableMode = "standard" | "virtual"; | ||
export type DroppableMode = 'standard' | 'virtual'; | ||
@@ -35,26 +35,26 @@ export interface DroppableDescriptor { | ||
export type Direction = "horizontal" | "vertical"; | ||
export type Direction = 'horizontal' | 'vertical'; | ||
export interface VerticalAxis { | ||
direction: "vertical"; | ||
line: "y"; | ||
start: "top"; | ||
end: "bottom"; | ||
size: "height"; | ||
crossAxisLine: "x"; | ||
crossAxisStart: "left"; | ||
crossAxisEnd: "right"; | ||
crossAxisSize: "width"; | ||
direction: 'vertical'; | ||
line: 'y'; | ||
start: 'top'; | ||
end: 'bottom'; | ||
size: 'height'; | ||
crossAxisLine: 'x'; | ||
crossAxisStart: 'left'; | ||
crossAxisEnd: 'right'; | ||
crossAxisSize: 'width'; | ||
} | ||
export interface HorizontalAxis { | ||
direction: "horizontal"; | ||
line: "x"; | ||
start: "left"; | ||
end: "right"; | ||
size: "width"; | ||
crossAxisLine: "y"; | ||
crossAxisStart: "top"; | ||
crossAxisEnd: "bottom"; | ||
crossAxisSize: "height"; | ||
direction: 'horizontal'; | ||
line: 'x'; | ||
start: 'left'; | ||
end: 'right'; | ||
size: 'width'; | ||
crossAxisLine: 'y'; | ||
crossAxisStart: 'top'; | ||
crossAxisEnd: 'bottom'; | ||
crossAxisSize: 'height'; | ||
} | ||
@@ -203,3 +203,3 @@ | ||
export interface ReorderImpact { | ||
type: "REORDER"; | ||
type: 'REORDER'; | ||
destination: DraggableLocation; | ||
@@ -209,3 +209,3 @@ } | ||
export interface CombineImpact { | ||
type: "COMBINE"; | ||
type: 'COMBINE'; | ||
combine: Combine; | ||
@@ -248,3 +248,3 @@ } | ||
// SNAP: items move in response to commands (eg keyboard); | ||
export type MovementMode = "FLUID" | "SNAP"; | ||
export type MovementMode = 'FLUID' | 'SNAP'; | ||
@@ -282,3 +282,3 @@ export interface DragPositions { | ||
export type DropReason = "DROP" | "CANCEL"; | ||
export type DropReason = 'DROP' | 'CANCEL'; | ||
@@ -346,3 +346,3 @@ // published when a drag finishes | ||
export interface IdleState { | ||
phase: "IDLE"; | ||
phase: 'IDLE'; | ||
completed: CompletedDrag | null; | ||
@@ -372,3 +372,3 @@ shouldFlush: boolean; | ||
export interface DraggingState extends BaseState { | ||
phase: "DRAGGING"; | ||
phase: 'DRAGGING'; | ||
} | ||
@@ -382,3 +382,3 @@ | ||
export interface CollectingState extends BaseState { | ||
phase: "COLLECTING"; | ||
phase: 'COLLECTING'; | ||
} | ||
@@ -391,3 +391,3 @@ | ||
export interface DropPendingState extends BaseState { | ||
phase: "DROP_PENDING"; | ||
phase: 'DROP_PENDING'; | ||
isWaiting: boolean; | ||
@@ -399,3 +399,3 @@ reason: DropReason; | ||
export interface DropAnimatingState { | ||
phase: "DROP_ANIMATING"; | ||
phase: 'DROP_ANIMATING'; | ||
completed: CompletedDrag; | ||
@@ -419,3 +419,3 @@ newHomeClientOffset: Position; | ||
export type InOutAnimationMode = "none" | "open" | "close"; | ||
export type InOutAnimationMode = 'none' | 'open' | 'close'; | ||
@@ -432,3 +432,3 @@ export interface ResponderProvided { | ||
start: DragStart, | ||
provided: ResponderProvided | ||
provided: ResponderProvided, | ||
) => void; | ||
@@ -438,3 +438,3 @@ | ||
update: DragUpdate, | ||
provided: ResponderProvided | ||
provided: ResponderProvided, | ||
) => void; | ||
@@ -444,3 +444,3 @@ | ||
result: DropResult, | ||
provided: ResponderProvided | ||
provided: ResponderProvided, | ||
) => void; | ||
@@ -499,3 +499,3 @@ | ||
forceStop?: () => void, | ||
options?: TryGetLockOptions | ||
options?: TryGetLockOptions, | ||
) => PreDragActions | null; | ||
@@ -502,0 +502,0 @@ |
@@ -1,1 +0,1 @@ | ||
export { default } from "./animate-in-out"; | ||
export { default } from './animate-in-out'; |
@@ -1,3 +0,3 @@ | ||
import { invariant } from "../invariant"; | ||
import isHtmlElement from "./is-type-of-element/is-html-element"; | ||
import { invariant } from '../invariant'; | ||
import isHtmlElement from './is-type-of-element/is-html-element'; | ||
@@ -11,5 +11,5 @@ export default function checkIsValidInnerRef(el?: HTMLElement | null) { | ||
You can find a guide on using the innerRef callback functions at: | ||
https://github.com/react-forked/dnd/blob/main/docs/guides/using-inner-ref.md | ||
` | ||
https://github.com/hello-pangea/dnd/blob/main/docs/guides/using-inner-ref.md | ||
`, | ||
); | ||
} |
@@ -1,6 +0,6 @@ | ||
import React from "react"; | ||
import type { DraggableId, ContextId, ElementId } from "../../types"; | ||
import type { DimensionMarshal } from "../../state/dimension-marshal/dimension-marshal-types"; | ||
import type { FocusMarshal } from "../use-focus-marshal/focus-marshal-types"; | ||
import type { Registry } from "../../state/registry/registry-types"; | ||
import React from 'react'; | ||
import type { DraggableId, ContextId, ElementId } from '../../types'; | ||
import type { DimensionMarshal } from '../../state/dimension-marshal/dimension-marshal-types'; | ||
import type { FocusMarshal } from '../use-focus-marshal/focus-marshal-types'; | ||
import type { Registry } from '../../state/registry/registry-types'; | ||
@@ -7,0 +7,0 @@ export interface AppContextValue { |
@@ -1,3 +0,3 @@ | ||
import React from "react"; | ||
import type { DraggableId, DroppableId, TypeId } from "../../types"; | ||
import React from 'react'; | ||
import type { DraggableId, DroppableId, TypeId } from '../../types'; | ||
@@ -4,0 +4,0 @@ export interface DroppableContextValue { |
@@ -1,5 +0,5 @@ | ||
import React from "react"; | ||
import type { ReactReduxContextValue } from "react-redux"; | ||
import type { Action } from "../../state/store-types"; | ||
import type { State } from "../../types"; | ||
import React from 'react'; | ||
import type { ReactReduxContextValue } from 'react-redux'; | ||
import type { Action } from '../../state/store-types'; | ||
import type { State } from '../../types'; | ||
@@ -6,0 +6,0 @@ type StoreContextValue = ReactReduxContextValue<State, Action>; |
@@ -1,2 +0,2 @@ | ||
export const prefix = "data-rfd"; | ||
export const prefix = 'data-rfd'; | ||
export const dragHandle = (() => { | ||
@@ -3,0 +3,0 @@ const base = `${prefix}-drag-handle`; |
@@ -1,2 +0,2 @@ | ||
import { warning } from "../../dev-warning"; | ||
import { warning } from '../../dev-warning'; | ||
@@ -7,3 +7,3 @@ const suffix = ` | ||
More information: https://github.com/react-forked/dnd/blob/main/docs/guides/doctype.md | ||
More information: https://github.com/hello-pangea/dnd/blob/main/docs/guides/doctype.md | ||
`; | ||
@@ -23,3 +23,3 @@ | ||
if (doctype.name.toLowerCase() !== "html") { | ||
if (doctype.name.toLowerCase() !== 'html') { | ||
warning(` | ||
@@ -32,3 +32,3 @@ Unexpected <!doctype> found: (${doctype.name}) | ||
if (doctype.publicId !== "") { | ||
if (doctype.publicId !== '') { | ||
warning(` | ||
@@ -35,0 +35,0 @@ Unexpected <!doctype> publicId found: (${doctype.publicId}) |
@@ -1,3 +0,3 @@ | ||
import { invariant } from "../../invariant"; | ||
import { warning } from "../../dev-warning"; | ||
import { invariant } from '../../invariant'; | ||
import { warning } from '../../dev-warning'; | ||
@@ -4,0 +4,0 @@ interface Version { |
@@ -1,2 +0,2 @@ | ||
export type { DragDropContextProps } from "./drag-drop-context"; | ||
export { default, resetServerContext } from "./drag-drop-context"; | ||
export type { DragDropContextProps } from './drag-drop-context'; | ||
export { default, resetServerContext } from './drag-drop-context'; |
@@ -1,6 +0,6 @@ | ||
import React from "react"; | ||
import { peerDependencies } from "../../../package.json"; | ||
import checkReactVersion from "./check-react-version"; | ||
import checkDoctype from "./check-doctype"; | ||
import useDevSetupWarning from "../use-dev-setup-warning"; | ||
import React from 'react'; | ||
import { peerDependencies } from '../../../package.json'; | ||
import checkReactVersion from './check-react-version'; | ||
import checkDoctype from './check-doctype'; | ||
import useDevSetupWarning from '../use-dev-setup-warning'; | ||
@@ -7,0 +7,0 @@ export default function useStartupValidation(): void { |
@@ -1,3 +0,3 @@ | ||
import { useMemo } from "use-memo-one"; | ||
import type { ContextId } from "../../types"; | ||
import { useMemo } from 'use-memo-one'; | ||
import type { ContextId } from '../../types'; | ||
@@ -4,0 +4,0 @@ let count = 0; |
@@ -1,37 +0,37 @@ | ||
import type { Position } from "css-box-model"; | ||
import memoizeOne from "memoize-one"; | ||
import type { FunctionComponent } from "react"; | ||
import { connect } from "react-redux"; | ||
import * as animation from "../../animation"; | ||
import { dropAnimationFinished as dropAnimationFinishedAction } from "../../state/action-creators"; | ||
import whatIsDraggedOver from "../../state/droppable/what-is-dragged-over"; | ||
import whatIsDraggedOverFromResult from "../../state/droppable/what-is-dragged-over-from-result"; | ||
import { tryGetCombine } from "../../state/get-impact-location"; | ||
import isDragging from "../../state/is-dragging"; | ||
import { negate, origin } from "../../state/position"; | ||
import type { Position } from 'css-box-model'; | ||
import memoizeOne from 'memoize-one'; | ||
import type { FunctionComponent } from 'react'; | ||
import { connect } from 'react-redux'; | ||
import Draggable from './draggable'; | ||
import isDragging from '../../state/is-dragging'; | ||
import { origin, negate } from '../../state/position'; | ||
import isStrictEqual from '../is-strict-equal'; | ||
import * as animation from '../../animation'; | ||
import { dropAnimationFinished as dropAnimationFinishedAction } from '../../state/action-creators'; | ||
import type { | ||
Combine, | ||
State, | ||
DraggableId, | ||
DroppableId, | ||
DraggableDimension, | ||
Displacement, | ||
CompletedDrag, | ||
Displacement, | ||
DraggableDimension, | ||
DraggableId, | ||
DragImpact, | ||
DroppableId, | ||
MovementMode, | ||
DropResult, | ||
LiftEffect, | ||
MovementMode, | ||
State, | ||
} from "../../types"; | ||
import StoreContext from "../context/store-context"; | ||
import isStrictEqual from "../is-strict-equal"; | ||
import Draggable from "./draggable"; | ||
Combine, | ||
} from '../../types'; | ||
import type { | ||
DispatchProps, | ||
DraggableProps, | ||
DraggableStateSnapshot, | ||
DropAnimation, | ||
MapProps, | ||
OwnProps, | ||
DispatchProps, | ||
Selector, | ||
} from "./draggable-types"; | ||
DraggableStateSnapshot, | ||
DropAnimation, | ||
} from './draggable-types'; | ||
import whatIsDraggedOver from '../../state/droppable/what-is-dragged-over'; | ||
import StoreContext from '../context/store-context'; | ||
import whatIsDraggedOverFromResult from '../../state/droppable/what-is-dragged-over-from-result'; | ||
import { tryGetCombine } from '../../state/get-impact-location'; | ||
@@ -43,3 +43,3 @@ const getCombineWithFromResult = (result: DropResult): DraggableId | null => { | ||
const getCombineWithFromImpact = (impact: DragImpact): DraggableId | null => { | ||
return impact.at && impact.at.type === "COMBINE" | ||
return impact.at && impact.at.type === 'COMBINE' | ||
? impact.at.combine.draggableId | ||
@@ -56,3 +56,3 @@ : null; | ||
y, | ||
}) | ||
}), | ||
); | ||
@@ -66,3 +66,3 @@ | ||
combineWith: DraggableId | null = null, | ||
dropping: DropAnimation | null = null | ||
dropping: DropAnimation | null = null, | ||
): DraggableStateSnapshot => ({ | ||
@@ -77,3 +77,3 @@ isDragging: true, | ||
combineTargetFor: null, | ||
}) | ||
}), | ||
); | ||
@@ -91,6 +91,6 @@ | ||
combineWith: DraggableId | null = null, | ||
forceShouldAnimate: boolean | null = null | ||
forceShouldAnimate: boolean | null = null, | ||
): MapProps => ({ | ||
mapped: { | ||
type: "DRAGGING", | ||
type: 'DRAGGING', | ||
dropping: null, | ||
@@ -108,6 +108,6 @@ draggingOver, | ||
combineWith, | ||
null | ||
null, | ||
), | ||
}, | ||
}) | ||
}), | ||
); | ||
@@ -117,3 +117,3 @@ | ||
state: State, | ||
ownProps: OwnProps | ||
ownProps: OwnProps, | ||
): MapProps | null => { | ||
@@ -133,3 +133,3 @@ // Dragging | ||
const combineWith: DraggableId | null = getCombineWithFromImpact( | ||
state.impact | ||
state.impact, | ||
); | ||
@@ -145,3 +145,3 @@ const forceShouldAnimate: boolean | null = state.forceShouldAnimate; | ||
combineWith, | ||
forceShouldAnimate | ||
forceShouldAnimate, | ||
); | ||
@@ -151,3 +151,3 @@ } | ||
// Dropping | ||
if (state.phase === "DROP_ANIMATING") { | ||
if (state.phase === 'DROP_ANIMATING') { | ||
const completed: CompletedDrag = state.completed; | ||
@@ -180,3 +180,3 @@ if (completed.result.draggableId !== ownProps.draggableId) { | ||
mapped: { | ||
type: "DRAGGING", | ||
type: 'DRAGGING', | ||
offset: state.newHomeClientOffset, | ||
@@ -194,3 +194,3 @@ dimension, | ||
combineWith, | ||
dropping | ||
dropping, | ||
), | ||
@@ -208,3 +208,3 @@ }, | ||
function getSecondarySnapshot( | ||
combineTargetFor: DraggableId | null = null | ||
combineTargetFor: DraggableId | null = null, | ||
): DraggableStateSnapshot { | ||
@@ -225,3 +225,3 @@ return { | ||
mapped: { | ||
type: "SECONDARY", | ||
type: 'SECONDARY', | ||
offset: origin, | ||
@@ -239,3 +239,3 @@ combineTargetFor: null, | ||
y, | ||
}) | ||
}), | ||
); | ||
@@ -250,6 +250,6 @@ | ||
combineTargetFor: DraggableId | null = null, | ||
shouldAnimateDisplacement: boolean | ||
shouldAnimateDisplacement: boolean, | ||
): MapProps => ({ | ||
mapped: { | ||
type: "SECONDARY", | ||
type: 'SECONDARY', | ||
offset, | ||
@@ -260,3 +260,3 @@ combineTargetFor, | ||
}, | ||
}) | ||
}), | ||
); | ||
@@ -267,3 +267,3 @@ | ||
const getFallback = ( | ||
combineTargetFor?: DraggableId | null | ||
combineTargetFor?: DraggableId | null, | ||
): MapProps | null => { | ||
@@ -279,3 +279,3 @@ return combineTargetFor | ||
impact: DragImpact, | ||
afterCritical: LiftEffect | ||
afterCritical: LiftEffect, | ||
): MapProps | null => { | ||
@@ -285,3 +285,3 @@ const visualDisplacement: Displacement | null = | ||
const isAfterCriticalInVirtualList = Boolean( | ||
afterCritical.inVirtualList && afterCritical.effected[ownId] | ||
afterCritical.inVirtualList && afterCritical.effected[ownId], | ||
); | ||
@@ -327,3 +327,3 @@ | ||
combineTargetFor, | ||
visualDisplacement.shouldAnimate | ||
visualDisplacement.shouldAnimate, | ||
); | ||
@@ -334,3 +334,3 @@ }; | ||
state: State, | ||
ownProps: OwnProps | ||
ownProps: OwnProps, | ||
): MapProps | null => { | ||
@@ -348,3 +348,3 @@ // Dragging | ||
state.impact, | ||
state.afterCritical | ||
state.afterCritical, | ||
); | ||
@@ -354,3 +354,3 @@ } | ||
// Dropping | ||
if (state.phase === "DROP_ANIMATING") { | ||
if (state.phase === 'DROP_ANIMATING') { | ||
const completed: CompletedDrag = state.completed; | ||
@@ -365,3 +365,3 @@ // do nothing if this was the dragging item | ||
completed.impact, | ||
completed.afterCritical | ||
completed.afterCritical, | ||
); | ||
@@ -408,7 +408,7 @@ } | ||
context: StoreContext as any, | ||
// When pure, compares the result of mapStateToProps to its previous value. | ||
// Default value: shallowEqual | ||
// Switching to a strictEqual as we return a memoized object on changes | ||
areStatePropsEqual: isStrictEqual, | ||
} | ||
}, | ||
// FIXME: Typings are really complexe | ||
@@ -415,0 +415,0 @@ )(Draggable) as unknown as FunctionComponent<DraggableProps>; |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
import type { | ||
@@ -6,3 +6,3 @@ ReactNode, | ||
TransitionEventHandler, | ||
} from "react"; | ||
} from 'react'; | ||
import type { | ||
@@ -17,10 +17,10 @@ DraggableId, | ||
DraggableRubric, | ||
} from "../../types"; | ||
import { dropAnimationFinished } from "../../state/action-creators"; | ||
} from '../../types'; | ||
import { dropAnimationFinished } from '../../state/action-creators'; | ||
export interface DraggingStyle { | ||
position: "fixed"; | ||
position: 'fixed'; | ||
top: number; | ||
left: number; | ||
boxSizing: "border-box"; | ||
boxSizing: 'border-box'; | ||
width: number; | ||
@@ -38,3 +38,3 @@ height: number; | ||
// It is also a minor performance optimisation | ||
pointerEvents: "none"; | ||
pointerEvents: 'none'; | ||
} | ||
@@ -46,3 +46,3 @@ | ||
// none: skip animation (used in certain displacement situations) | ||
transition?: "none"; | ||
transition?: 'none'; | ||
} | ||
@@ -62,5 +62,5 @@ | ||
// used for shared global styles | ||
"data-rfd-draggable-context-id": ContextId; | ||
'data-rfd-draggable-context-id': ContextId; | ||
// used for lookups | ||
"data-rfd-draggable-id": DraggableId; | ||
'data-rfd-draggable-id': DraggableId; | ||
// used to know when a transition ends | ||
@@ -72,5 +72,5 @@ onTransitionEnd?: TransitionEventHandler; | ||
// what draggable the handle belongs to | ||
"data-rfd-drag-handle-draggable-id": DraggableId; | ||
'data-rfd-drag-handle-draggable-id': DraggableId; | ||
// What DragDropContext the drag handle is in | ||
"data-rfd-drag-handle-context-id": ContextId; | ||
'data-rfd-drag-handle-context-id': ContextId; | ||
// We need a drag handle to be a widget in order to correctly set accessibility properties | ||
@@ -86,3 +86,3 @@ // Note: JAWS and VoiceOver don't need the element to be a 'widget' to read the accessibility properties, but NVDA does | ||
// Using the description property of the drag handle to provide usage instructions | ||
"aria-describedby": ElementId; | ||
'aria-describedby': ElementId; | ||
// Allow tabbing to this element | ||
@@ -132,3 +132,3 @@ // Adding a tab index marks the element as interactive content: https://www.w3.org/TR/html51/dom.html#kinds-of-content-interactive-content | ||
export interface DraggingMapProps { | ||
type: "DRAGGING"; | ||
type: 'DRAGGING'; | ||
offset: Position; | ||
@@ -145,3 +145,3 @@ mode: MovementMode; | ||
export interface SecondaryMapProps { | ||
type: "SECONDARY"; | ||
type: 'SECONDARY'; | ||
offset: Position; | ||
@@ -166,3 +166,3 @@ combineTargetFor: DraggableId | null; | ||
snapshot: DraggableStateSnapshot, | ||
rubic: DraggableRubric | ||
rubic: DraggableRubric, | ||
) => ReactNode | null; | ||
@@ -169,0 +169,0 @@ |
@@ -1,4 +0,4 @@ | ||
import type { BoxModel } from "css-box-model"; | ||
import { combine, transforms, transitions } from "../../animation"; | ||
import type { DraggableDimension } from "../../types"; | ||
import type { BoxModel } from 'css-box-model'; | ||
import { combine, transforms, transitions } from '../../animation'; | ||
import type { DraggableDimension } from '../../types'; | ||
import type { | ||
@@ -13,3 +13,3 @@ DraggingStyle, | ||
MappedProps, | ||
} from "./draggable-types"; | ||
} from './draggable-types'; | ||
@@ -23,3 +23,3 @@ export const zIndexOptions: ZIndexOptions = { | ||
shouldAnimateDragMovement: boolean, | ||
dropping?: DropAnimation | null | ||
dropping?: DropAnimation | null, | ||
): string => { | ||
@@ -37,3 +37,3 @@ if (dropping) { | ||
isCombining: boolean, | ||
isDropAnimating: boolean | ||
isDropAnimating: boolean, | ||
): number | undefined => { | ||
@@ -52,3 +52,3 @@ // if not combining: no not impact opacity | ||
} | ||
return dragging.mode === "SNAP"; | ||
return dragging.mode === 'SNAP'; | ||
}; | ||
@@ -72,3 +72,3 @@ | ||
// ## Placement | ||
position: "fixed", | ||
position: 'fixed', | ||
// As we are applying the margins we need to align to the start of the marginBox | ||
@@ -80,3 +80,3 @@ top: box.marginBox.top, | ||
// Locking these down as pulling the node out of the DOM could cause it to change size | ||
boxSizing: "border-box", | ||
boxSizing: 'border-box', | ||
width: box.borderBox.width, | ||
@@ -97,3 +97,3 @@ height: box.borderBox.height, | ||
// global styles on cover while dragging | ||
pointerEvents: "none", | ||
pointerEvents: 'none', | ||
}; | ||
@@ -107,3 +107,3 @@ return style; | ||
// transition style is applied in the head | ||
transition: secondary.shouldAnimateDisplacement ? undefined : "none", | ||
transition: secondary.shouldAnimateDisplacement ? undefined : 'none', | ||
}; | ||
@@ -113,5 +113,5 @@ } | ||
export default function getStyle(mapped: MappedProps): DraggableStyle { | ||
return mapped.type === "DRAGGING" | ||
return mapped.type === 'DRAGGING' | ||
? getDraggingStyle(mapped) | ||
: getSecondaryStyle(mapped); | ||
} |
@@ -1,1 +0,1 @@ | ||
export { PublicDraggable as default } from "./draggable-api"; | ||
export { PublicDraggable as default } from './draggable-api'; |
@@ -1,9 +0,9 @@ | ||
import { useRef } from "react"; | ||
import { invariant } from "../../invariant"; | ||
import type { DraggableId, ContextId } from "../../types"; | ||
import type { Props } from "./draggable-types"; | ||
import checkIsValidInnerRef from "../check-is-valid-inner-ref"; | ||
import findDragHandle from "../get-elements/find-drag-handle"; | ||
import useDevSetupWarning from "../use-dev-setup-warning"; | ||
import useDev from "../use-dev"; | ||
import { useRef } from 'react'; | ||
import { invariant } from '../../invariant'; | ||
import type { DraggableId, ContextId } from '../../types'; | ||
import type { Props } from './draggable-types'; | ||
import checkIsValidInnerRef from '../check-is-valid-inner-ref'; | ||
import findDragHandle from '../get-elements/find-drag-handle'; | ||
import useDevSetupWarning from '../use-dev-setup-warning'; | ||
import useDev from '../use-dev'; | ||
@@ -13,3 +13,3 @@ export function useValidation( | ||
contextId: ContextId, | ||
getRef: () => HTMLElement | null | ||
getRef: () => HTMLElement | null, | ||
) { | ||
@@ -24,7 +24,7 @@ // running after every update in development | ||
const id: DraggableId | null = props.draggableId; | ||
invariant(id, "Draggable requires a draggableId"); | ||
invariant(id, 'Draggable requires a draggableId'); | ||
invariant( | ||
typeof id === "string", | ||
typeof id === 'string', | ||
`Draggable requires a [string] draggableId. | ||
Provided: [type: ${typeof id}] (value: ${id})` | ||
Provided: [type: ${typeof id}] (value: ${id})`, | ||
); | ||
@@ -34,6 +34,6 @@ | ||
Number.isInteger(props.index), | ||
`${prefix(id)} requires an integer index prop` | ||
`${prefix(id)} requires an integer index prop`, | ||
); | ||
if (props.mapped.type === "DRAGGING") { | ||
if (props.mapped.type === 'DRAGGING') { | ||
return; | ||
@@ -51,3 +51,3 @@ } | ||
findDragHandle(contextId, id), | ||
`${prefix(id)} Unable to find drag handle` | ||
`${prefix(id)} Unable to find drag handle`, | ||
); | ||
@@ -68,3 +68,3 @@ } | ||
isClone === initialRef.current, | ||
"Draggable isClone prop value changed during component life" | ||
'Draggable isClone prop value changed during component life', | ||
); | ||
@@ -71,0 +71,0 @@ }, [isClone]); |
@@ -1,35 +0,35 @@ | ||
import memoizeOne from "memoize-one"; | ||
import { FunctionComponent } from "react"; | ||
import { connect } from "react-redux"; | ||
import { invariant } from "../../invariant"; | ||
import { updateViewportMaxScroll as updateViewportMaxScrollAction } from "../../state/action-creators"; | ||
import whatIsDraggedOver from "../../state/droppable/what-is-dragged-over"; | ||
import whatIsDraggedOverFromResult from "../../state/droppable/what-is-dragged-over-from-result"; | ||
import isDragging from "../../state/is-dragging"; | ||
import { connect } from 'react-redux'; | ||
import memoizeOne from 'memoize-one'; | ||
import { FunctionComponent } from 'react'; | ||
import { invariant } from '../../invariant'; | ||
import type { | ||
State, | ||
DroppableId, | ||
DraggableId, | ||
CompletedDrag, | ||
DraggableDimension, | ||
DimensionMap, | ||
TypeId, | ||
Critical, | ||
DimensionMap, | ||
DraggableRubric, | ||
DraggableDescriptor, | ||
DraggableDimension, | ||
DraggableId, | ||
DraggableRubric, | ||
DroppableId, | ||
State, | ||
TypeId, | ||
} from "../../types"; | ||
import StoreContext from "../context/store-context"; | ||
import isStrictEqual from "../is-strict-equal"; | ||
import Droppable from "./droppable"; | ||
} from '../../types'; | ||
import type { | ||
MapProps, | ||
InternalOwnProps, | ||
DroppableProps, | ||
DefaultProps, | ||
Selector, | ||
DispatchProps, | ||
DraggableChildrenFn, | ||
DroppableProps, | ||
DroppableStateSnapshot, | ||
InternalOwnProps, | ||
MapProps, | ||
Selector, | ||
UseClone, | ||
} from "./droppable-types"; | ||
DraggableChildrenFn, | ||
} from './droppable-types'; | ||
import Droppable from './droppable'; | ||
import isStrictEqual from '../is-strict-equal'; | ||
import whatIsDraggedOver from '../../state/droppable/what-is-dragged-over'; | ||
import { updateViewportMaxScroll as updateViewportMaxScrollAction } from '../../state/action-creators'; | ||
import isDragging from '../../state/is-dragging'; | ||
import StoreContext from '../context/store-context'; | ||
import whatIsDraggedOverFromResult from '../../state/droppable/what-is-dragged-over-from-result'; | ||
@@ -41,3 +41,3 @@ const isMatchingType = (type: TypeId, critical: Critical): boolean => | ||
critical: Critical, | ||
dimensions: DimensionMap | ||
dimensions: DimensionMap, | ||
): DraggableDimension => dimensions.draggables[critical.draggable.id]; | ||
@@ -74,3 +74,3 @@ | ||
}, | ||
}) | ||
}), | ||
); | ||
@@ -86,3 +86,3 @@ | ||
// snapshot: StateSnapshot, | ||
renderClone?: DraggableChildrenFn | null | ||
renderClone?: DraggableChildrenFn | null, | ||
): MapProps => { | ||
@@ -138,3 +138,3 @@ const draggableId: DraggableId = dragging.descriptor.id; | ||
}; | ||
} | ||
}, | ||
); | ||
@@ -158,3 +158,3 @@ | ||
critical, | ||
state.dimensions | ||
state.dimensions, | ||
); | ||
@@ -169,7 +169,7 @@ const isDraggingOver: boolean = whatIsDraggedOver(state.impact) === id; | ||
dragging, | ||
renderClone | ||
renderClone, | ||
); | ||
} | ||
if (state.phase === "DROP_ANIMATING") { | ||
if (state.phase === 'DROP_ANIMATING') { | ||
const completed: CompletedDrag = state.completed; | ||
@@ -182,3 +182,3 @@ if (!isMatchingType(type, completed.critical)) { | ||
completed.critical, | ||
state.dimensions | ||
state.dimensions, | ||
); | ||
@@ -195,7 +195,7 @@ | ||
dragging, | ||
renderClone | ||
renderClone, | ||
); | ||
} | ||
if (state.phase === "IDLE" && state.completed && !state.shouldFlush) { | ||
if (state.phase === 'IDLE' && state.completed && !state.shouldFlush) { | ||
const completed: CompletedDrag = state.completed; | ||
@@ -209,3 +209,3 @@ if (!isMatchingType(type, completed.critical)) { | ||
const wasCombining = Boolean( | ||
completed.impact.at && completed.impact.at.type === "COMBINE" | ||
completed.impact.at && completed.impact.at.type === 'COMBINE', | ||
); | ||
@@ -241,3 +241,3 @@ const isHome: boolean = completed.critical.droppable.id === id; | ||
function getBody(): HTMLElement { | ||
invariant(document.body, "document.body is not ready"); | ||
invariant(document.body, 'document.body is not ready'); | ||
return document.body; | ||
@@ -247,5 +247,5 @@ } | ||
const defaultProps: DefaultProps = { | ||
mode: "standard", | ||
type: "DEFAULT", | ||
direction: "vertical", | ||
mode: 'standard', | ||
type: 'DEFAULT', | ||
direction: 'vertical', | ||
isDropDisabled: false, | ||
@@ -280,7 +280,7 @@ isCombineEnabled: false, | ||
context: StoreContext as any, | ||
// When pure, compares the result of mapStateToProps to its previous value. | ||
// Default value: shallowEqual | ||
// Switching to a strictEqual as we return a memoized object on changes | ||
areStatePropsEqual: isStrictEqual, | ||
} | ||
}, | ||
// FIXME: Typings are really complexe | ||
@@ -287,0 +287,0 @@ )(Droppable) as unknown as FunctionComponent<DroppableProps>; |
@@ -1,2 +0,2 @@ | ||
import type { ReactNode } from "react"; | ||
import type { ReactNode } from 'react'; | ||
import type { | ||
@@ -12,13 +12,13 @@ DraggableId, | ||
DroppableMode, | ||
} from "../../types"; | ||
import type { DraggableChildrenFn } from "../draggable/draggable-types"; | ||
import { updateViewportMaxScroll } from "../../state/action-creators"; | ||
} from '../../types'; | ||
import type { DraggableChildrenFn } from '../draggable/draggable-types'; | ||
import { updateViewportMaxScroll } from '../../state/action-creators'; | ||
export type { DraggableChildrenFn } from "../draggable/draggable-types"; | ||
export type { DraggableChildrenFn } from '../draggable/draggable-types'; | ||
export interface DroppableProvidedProps { | ||
// used for shared global styles | ||
"data-rfd-droppable-context-id": ContextId; | ||
'data-rfd-droppable-context-id': ContextId; | ||
// Used to lookup. Currently not used for drag and drop lifecycle | ||
"data-rfd-droppable-id": DroppableId; | ||
'data-rfd-droppable-id': DroppableId; | ||
} | ||
@@ -79,3 +79,3 @@ | ||
provided: DroppableProvided, | ||
snapshot: DroppableStateSnapshot | ||
snapshot: DroppableStateSnapshot, | ||
) => ReactNode; | ||
@@ -82,0 +82,0 @@ droppableId: DroppableId; |
@@ -1,1 +0,1 @@ | ||
export { default } from "./connected-droppable"; | ||
export { default } from './connected-droppable'; |
@@ -1,6 +0,6 @@ | ||
import { invariant } from "../../invariant"; | ||
import type { Props } from "./droppable-types"; | ||
import { warning } from "../../dev-warning"; | ||
import checkIsValidInnerRef from "../check-is-valid-inner-ref"; | ||
import useDevSetupWarning from "../use-dev-setup-warning"; | ||
import { invariant } from '../../invariant'; | ||
import type { Props } from './droppable-types'; | ||
import { warning } from '../../dev-warning'; | ||
import checkIsValidInnerRef from '../check-is-valid-inner-ref'; | ||
import useDevSetupWarning from '../use-dev-setup-warning'; | ||
@@ -16,3 +16,3 @@ interface Args { | ||
function isBoolean(value: unknown): boolean { | ||
return typeof value === "boolean"; | ||
return typeof value === 'boolean'; | ||
} | ||
@@ -26,6 +26,6 @@ | ||
function required({ props }: Args) { | ||
invariant(props.droppableId, "A Droppable requires a droppableId prop"); | ||
invariant(props.droppableId, 'A Droppable requires a droppableId prop'); | ||
invariant( | ||
typeof props.droppableId === "string", | ||
`A Droppable requires a [string] droppableId. Provided: [${typeof props.droppableId}]` | ||
typeof props.droppableId === 'string', | ||
`A Droppable requires a [string] droppableId. Provided: [${typeof props.droppableId}]`, | ||
); | ||
@@ -36,11 +36,11 @@ }, | ||
isBoolean(props.isDropDisabled), | ||
"isDropDisabled must be a boolean" | ||
'isDropDisabled must be a boolean', | ||
); | ||
invariant( | ||
isBoolean(props.isCombineEnabled), | ||
"isCombineEnabled must be a boolean" | ||
'isCombineEnabled must be a boolean', | ||
); | ||
invariant( | ||
isBoolean(props.ignoreContainerClipping), | ||
"ignoreContainerClipping must be a boolean" | ||
'ignoreContainerClipping must be a boolean', | ||
); | ||
@@ -70,3 +70,3 @@ }, | ||
Please be sure to add the {provided.placeholder} React Node as a child of your Droppable. | ||
More information: https://github.com/react-forked/dnd/blob/main/docs/api/droppable.md | ||
More information: https://github.com/hello-pangea/dnd/blob/main/docs/api/droppable.md | ||
`); | ||
@@ -80,3 +80,3 @@ }, | ||
props.renderClone, | ||
"Must provide a clone render function (renderClone) for virtual lists" | ||
'Must provide a clone render function (renderClone) for virtual lists', | ||
); | ||
@@ -87,3 +87,3 @@ }, | ||
!getPlaceholderRef(), | ||
"Expected virtual list to not have a placeholder" | ||
'Expected virtual list to not have a placeholder', | ||
); | ||
@@ -98,7 +98,7 @@ }, | ||
if (args.props.mode === "standard") { | ||
if (args.props.mode === 'standard') { | ||
runChecks(args, standard); | ||
} | ||
if (args.props.mode === "virtual") { | ||
if (args.props.mode === 'virtual') { | ||
runChecks(args, virtual); | ||
@@ -105,0 +105,0 @@ } |
@@ -5,3 +5,3 @@ import type { | ||
EventOptions, | ||
} from "./event-types"; | ||
} from './event-types'; | ||
@@ -12,3 +12,3 @@ type UnbindFn = () => void; | ||
shared?: EventOptions, | ||
fromBinding?: EventOptions | null | ||
fromBinding?: EventOptions | null, | ||
): EventOptions { | ||
@@ -24,3 +24,3 @@ return { | ||
bindings: AnyEventBinding[], | ||
sharedOptions?: EventOptions | ||
sharedOptions?: EventOptions, | ||
): () => void { | ||
@@ -36,3 +36,3 @@ const unbindings: UnbindFn[] = (bindings as EventBinding[]).map( | ||
}; | ||
} | ||
}, | ||
); | ||
@@ -39,0 +39,0 @@ |
@@ -1,3 +0,3 @@ | ||
import type { Position } from "css-box-model"; | ||
import { BeforeCapture } from "../../types"; | ||
import type { Position } from 'css-box-model'; | ||
import { BeforeCapture } from '../../types'; | ||
@@ -4,0 +4,0 @@ export interface EventOptions { |
@@ -1,7 +0,7 @@ | ||
import { invariant } from "../invariant"; | ||
import { invariant } from '../invariant'; | ||
export default (): HTMLBodyElement => { | ||
const body = document.body; | ||
invariant(body, "Cannot find document.body"); | ||
invariant(body, 'Cannot find document.body'); | ||
return body as HTMLBodyElement; | ||
}; |
@@ -1,6 +0,6 @@ | ||
import { getRect } from "css-box-model"; | ||
import { getRect } from 'css-box-model'; | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
export default (el: HTMLElement): Position => | ||
getRect(el.getBoundingClientRect()).center; |
@@ -1,7 +0,7 @@ | ||
import { invariant } from "../invariant"; | ||
import { invariant } from '../invariant'; | ||
export default (): HTMLElement => { | ||
const doc: HTMLElement | null = document.documentElement; | ||
invariant(doc, "Cannot find document.documentElement"); | ||
invariant(doc, 'Cannot find document.documentElement'); | ||
return doc; | ||
}; |
@@ -1,10 +0,10 @@ | ||
import type { DraggableId, ContextId } from "../../types"; | ||
import { dragHandle as dragHandleAttr } from "../data-attributes"; | ||
import { warning } from "../../dev-warning"; | ||
import { querySelectorAll } from "../../query-selector-all"; | ||
import isHtmlElement from "../is-type-of-element/is-html-element"; | ||
import type { DraggableId, ContextId } from '../../types'; | ||
import { dragHandle as dragHandleAttr } from '../data-attributes'; | ||
import { warning } from '../../dev-warning'; | ||
import { querySelectorAll } from '../../query-selector-all'; | ||
import isHtmlElement from '../is-type-of-element/is-html-element'; | ||
export default function findDragHandle( | ||
contextId: ContextId, | ||
draggableId: DraggableId | ||
draggableId: DraggableId, | ||
): HTMLElement | null { | ||
@@ -26,3 +26,3 @@ // cannot create a selector with the draggable id as it might not be a valid attribute selector | ||
warning( | ||
`Unable to find drag handle with id "${draggableId}" as no handle with a matching id was found` | ||
`Unable to find drag handle with id "${draggableId}" as no handle with a matching id was found`, | ||
); | ||
@@ -33,3 +33,3 @@ return null; | ||
if (!isHtmlElement(handle)) { | ||
warning("drag handle needs to be a HTMLElement"); | ||
warning('drag handle needs to be a HTMLElement'); | ||
return null; | ||
@@ -36,0 +36,0 @@ } |
@@ -1,10 +0,10 @@ | ||
import type { DraggableId, ContextId } from "../../types"; | ||
import * as attributes from "../data-attributes"; | ||
import { querySelectorAll } from "../../query-selector-all"; | ||
import { warning } from "../../dev-warning"; | ||
import isHtmlElement from "../is-type-of-element/is-html-element"; | ||
import type { DraggableId, ContextId } from '../../types'; | ||
import * as attributes from '../data-attributes'; | ||
import { querySelectorAll } from '../../query-selector-all'; | ||
import { warning } from '../../dev-warning'; | ||
import isHtmlElement from '../is-type-of-element/is-html-element'; | ||
export default function findDraggable( | ||
contextId: ContextId, | ||
draggableId: DraggableId | ||
draggableId: DraggableId, | ||
): HTMLElement | null { | ||
@@ -24,3 +24,3 @@ // cannot create a selector with the draggable id as it might not be a valid attribute selector | ||
if (!isHtmlElement(draggable)) { | ||
warning("Draggable element is not a HTMLElement"); | ||
warning('Draggable element is not a HTMLElement'); | ||
return null; | ||
@@ -27,0 +27,0 @@ } |
@@ -1,2 +0,2 @@ | ||
import getWindowFromEl from "../window/get-window-from-el"; | ||
import getWindowFromEl from '../window/get-window-from-el'; | ||
@@ -3,0 +3,0 @@ export default function isElement(el: any): el is Element { |
@@ -1,2 +0,2 @@ | ||
import getWindowFromEl from "../window/get-window-from-el"; | ||
import getWindowFromEl from '../window/get-window-from-el'; | ||
@@ -3,0 +3,0 @@ export default function isHtmlElement(el: any): el is HTMLElement { |
@@ -1,2 +0,2 @@ | ||
import getWindowFromEl from "../window/get-window-from-el"; | ||
import getWindowFromEl from '../window/get-window-from-el'; | ||
@@ -3,0 +3,0 @@ export default function isSvgElement(el: any): boolean { |
@@ -1,1 +0,1 @@ | ||
export { default } from "./placeholder"; | ||
export { default } from './placeholder'; |
export interface PlaceholderStyle { | ||
display: string; | ||
boxSizing: "border-box"; | ||
boxSizing: 'border-box'; | ||
width: number; | ||
@@ -10,6 +10,6 @@ height: number; | ||
marginLeft: number; | ||
flexShrink: "0"; | ||
flexGrow: "0"; | ||
pointerEvents: "none"; | ||
flexShrink: '0'; | ||
flexGrow: '0'; | ||
pointerEvents: 'none'; | ||
transition: string; | ||
} |
@@ -1,8 +0,8 @@ | ||
import type { Position } from "css-box-model"; | ||
import rafSchd from "raf-schd"; | ||
import { invariant } from "../invariant"; | ||
import bindEvents from "./event-bindings/bind-events"; | ||
import type { UIEventBinding } from "./event-bindings/event-types"; | ||
import getWindowScroll from "./window/get-window-scroll"; | ||
import { noop } from "../empty"; | ||
import type { Position } from 'css-box-model'; | ||
import rafSchd from 'raf-schd'; | ||
import { invariant } from '../invariant'; | ||
import bindEvents from './event-bindings/bind-events'; | ||
import type { UIEventBinding } from './event-bindings/event-types'; | ||
import getWindowScroll from './window/get-window-scroll'; | ||
import { noop } from '../empty'; | ||
@@ -23,3 +23,3 @@ type OnWindowScroll = (newScroll: Position) => void; | ||
return { | ||
eventName: "scroll", | ||
eventName: 'scroll', | ||
// ## Passive: true | ||
@@ -61,7 +61,7 @@ // Eventual consistency is fine because we use position: fixed on the item | ||
function start() { | ||
invariant(!isActive(), "Cannot start scroll listener when already active"); | ||
invariant(!isActive(), 'Cannot start scroll listener when already active'); | ||
unbind = bindEvents(window, [binding]); | ||
} | ||
function stop() { | ||
invariant(isActive(), "Cannot stop scroll listener when not active"); | ||
invariant(isActive(), 'Cannot stop scroll listener when not active'); | ||
scheduled.cancel(); | ||
@@ -68,0 +68,0 @@ unbind(); |
@@ -1,3 +0,3 @@ | ||
import { invariant } from "../invariant"; | ||
import isHtmlElement from "./is-type-of-element/is-html-element"; | ||
import { invariant } from '../invariant'; | ||
import isHtmlElement from './is-type-of-element/is-html-element'; | ||
@@ -11,5 +11,5 @@ export default (ref?: unknown | null) => { | ||
You can find a guide on using the innerRef callback functions at: | ||
https://github.com/react-forked/dnd/blob/main/docs/guides/using-inner-ref.md | ||
` | ||
https://github.com/hello-pangea/dnd/blob/main/docs/guides/using-inner-ref.md | ||
`, | ||
); | ||
}; |
@@ -1,1 +0,1 @@ | ||
export { default } from "./use-announcer"; | ||
export { default } from './use-announcer'; |
@@ -1,7 +0,7 @@ | ||
import { useRef, useEffect } from "react"; | ||
import { useMemo, useCallback } from "use-memo-one"; | ||
import type { Announce, ContextId } from "../../types"; | ||
import { warning } from "../../dev-warning"; | ||
import getBodyElement from "../get-body-element"; | ||
import visuallyHidden from "../visually-hidden-style"; | ||
import { useRef, useEffect } from 'react'; | ||
import { useMemo, useCallback } from 'use-memo-one'; | ||
import type { Announce, ContextId } from '../../types'; | ||
import { warning } from '../../dev-warning'; | ||
import getBodyElement from '../get-body-element'; | ||
import visuallyHidden from '../visually-hidden-style'; | ||
@@ -17,3 +17,3 @@ export const getId = (contextId: ContextId): string => | ||
function setup() { | ||
const el: HTMLElement = document.createElement("div"); | ||
const el: HTMLElement = document.createElement('div'); | ||
// storing reference for usage in announce | ||
@@ -28,5 +28,5 @@ ref.current = el; | ||
// will force itself to be read | ||
el.setAttribute("aria-live", "assertive"); | ||
el.setAttribute('aria-live', 'assertive'); | ||
// must read the whole thing every time | ||
el.setAttribute("aria-atomic", "true"); | ||
el.setAttribute('aria-atomic', 'true'); | ||
@@ -58,3 +58,3 @@ // hide the element visually | ||
}, | ||
[id] | ||
[id], | ||
); | ||
@@ -61,0 +61,0 @@ |
@@ -1,4 +0,4 @@ | ||
import { useEffect } from "react"; | ||
import { error } from "../dev-warning"; | ||
import useDev from "./use-dev"; | ||
import { useEffect } from 'react'; | ||
import { error } from '../dev-warning'; | ||
import useDev from './use-dev'; | ||
@@ -5,0 +5,0 @@ export default function useDevSetupWarning(fn: () => void, inputs?: unknown[]) { |
export default function useDev(useHook: () => void) { | ||
// Don't run any validation in production | ||
if (process.env.NODE_ENV !== "production") { | ||
if (process.env.NODE_ENV !== 'production') { | ||
// eslint-disable-next-line react-hooks/rules-of-hooks | ||
@@ -5,0 +5,0 @@ useHook(); |
@@ -1,3 +0,3 @@ | ||
import { calculateBox, withScroll } from "css-box-model"; | ||
import type { BoxModel, Position } from "css-box-model"; | ||
import { calculateBox, withScroll } from 'css-box-model'; | ||
import type { BoxModel, Position } from 'css-box-model'; | ||
import type { | ||
@@ -7,4 +7,4 @@ DraggableDescriptor, | ||
Placeholder, | ||
} from "../../types"; | ||
import { origin } from "../../state/position"; | ||
} from '../../types'; | ||
import { origin } from '../../state/position'; | ||
@@ -14,3 +14,3 @@ export default function getDimension( | ||
el: HTMLElement, | ||
windowScroll: Position = origin | ||
windowScroll: Position = origin, | ||
): DraggableDimension { | ||
@@ -17,0 +17,0 @@ const computedStyles: CSSStyleDeclaration = window.getComputedStyle(el); |
@@ -1,1 +0,1 @@ | ||
export { default } from "./use-draggable-publisher"; | ||
export { default } from './use-draggable-publisher'; |
@@ -1,5 +0,5 @@ | ||
import type { Position } from "css-box-model"; | ||
import { useMemo, useCallback } from "use-memo-one"; | ||
import { useRef } from "react"; | ||
import { invariant } from "../../invariant"; | ||
import type { Position } from 'css-box-model'; | ||
import { useMemo, useCallback } from 'use-memo-one'; | ||
import { useRef } from 'react'; | ||
import { invariant } from '../../invariant'; | ||
import type { | ||
@@ -10,10 +10,10 @@ DraggableDescriptor, | ||
DraggableOptions, | ||
} from "../../types"; | ||
} from '../../types'; | ||
import type { | ||
Registry, | ||
DraggableEntry, | ||
} from "../../state/registry/registry-types"; | ||
import makeDimension from "./get-dimension"; | ||
import useLayoutEffect from "../use-isomorphic-layout-effect"; | ||
import useUniqueId from "../use-unique-id"; | ||
} from '../../state/registry/registry-types'; | ||
import makeDimension from './get-dimension'; | ||
import useLayoutEffect from '../use-isomorphic-layout-effect'; | ||
import useUniqueId from '../use-unique-id'; | ||
@@ -27,3 +27,3 @@ export interface Args extends DraggableOptions { | ||
export default function useDraggablePublisher(args: Args) { | ||
const uniqueId: Id = useUniqueId("draggable"); | ||
const uniqueId: Id = useUniqueId('draggable'); | ||
@@ -45,3 +45,3 @@ const { | ||
}), | ||
[canDragInteractiveElements, isEnabled, shouldRespectForcePress] | ||
[canDragInteractiveElements, isEnabled, shouldRespectForcePress], | ||
); | ||
@@ -52,6 +52,6 @@ | ||
const el: HTMLElement | null = getDraggableRef(); | ||
invariant(el, "Cannot get dimension when no ref is set"); | ||
invariant(el, 'Cannot get dimension when no ref is set'); | ||
return makeDimension(descriptor, el, windowScroll); | ||
}, | ||
[descriptor, getDraggableRef] | ||
[descriptor, getDraggableRef], | ||
); | ||
@@ -66,3 +66,3 @@ | ||
}), | ||
[descriptor, getDimension, options, uniqueId] | ||
[descriptor, getDimension, options, uniqueId], | ||
); | ||
@@ -69,0 +69,0 @@ |
@@ -1,3 +0,3 @@ | ||
import getClosestScrollable from "./get-closest-scrollable"; | ||
import { warning } from "../../dev-warning"; | ||
import getClosestScrollable from './get-closest-scrollable'; | ||
import { warning } from '../../dev-warning'; | ||
@@ -12,3 +12,3 @@ // We currently do not support nested scroll containers | ||
const anotherScrollParent: Element | null = getClosestScrollable( | ||
scrollable.parentElement | ||
scrollable.parentElement, | ||
); | ||
@@ -15,0 +15,0 @@ |
@@ -1,4 +0,4 @@ | ||
import { invariant } from "../../invariant"; | ||
import { warning } from "../../dev-warning"; | ||
import getBodyElement from "../get-body-element"; | ||
import { invariant } from '../../invariant'; | ||
import { warning } from '../../dev-warning'; | ||
import getBodyElement from '../get-body-element'; | ||
@@ -14,5 +14,5 @@ interface Overflow { | ||
base === value; | ||
const isScroll = isEqual("scroll"); | ||
const isAuto = isEqual("auto"); | ||
const isVisible = isEqual("visible"); | ||
const isScroll = isEqual('scroll'); | ||
const isAuto = isEqual('auto'); | ||
const isVisible = isEqual('visible'); | ||
const isEither = (overflow: Overflow, fn: (value: string) => boolean) => | ||
@@ -37,3 +37,3 @@ fn(overflow.overflowX) || fn(overflow.overflowY); | ||
// Because we always return false for now, we can skip any actual processing in production | ||
if (process.env.NODE_ENV === "production") { | ||
if (process.env.NODE_ENV === 'production') { | ||
return false; | ||
@@ -69,3 +69,3 @@ } | ||
More information: https://github.com/react-forked/dnd/blob/main/docs/guides/how-we-detect-scroll-containers.md | ||
More information: https://github.com/hello-pangea/dnd/blob/main/docs/guides/how-we-detect-scroll-containers.md | ||
`); | ||
@@ -72,0 +72,0 @@ return false; |
@@ -1,6 +0,6 @@ | ||
import { getBox, withScroll, createBox, expand } from "css-box-model"; | ||
import type { BoxModel, Position, Spacing } from "css-box-model"; | ||
import getDroppableDimension from "../../state/droppable/get-droppable"; | ||
import type { Closest } from "../../state/droppable/get-droppable"; | ||
import type { Env } from "./get-env"; | ||
import { getBox, withScroll, createBox, expand } from 'css-box-model'; | ||
import type { BoxModel, Position, Spacing } from 'css-box-model'; | ||
import getDroppableDimension from '../../state/droppable/get-droppable'; | ||
import type { Closest } from '../../state/droppable/get-droppable'; | ||
import type { Env } from './get-env'; | ||
import type { | ||
@@ -11,8 +11,8 @@ DroppableDimension, | ||
ScrollSize, | ||
} from "../../types"; | ||
import getScroll from "./get-scroll"; | ||
} from '../../types'; | ||
import getScroll from './get-scroll'; | ||
const getClient = ( | ||
targetRef: HTMLElement, | ||
closestScrollable?: Element | null | ||
closestScrollable?: Element | null, | ||
): BoxModel => { | ||
@@ -19,0 +19,0 @@ const base: BoxModel = getBox(targetRef); |
@@ -1,2 +0,2 @@ | ||
import getClosestScrollable from "./get-closest-scrollable"; | ||
import getClosestScrollable from './get-closest-scrollable'; | ||
@@ -16,3 +16,3 @@ export interface Env { | ||
const style: CSSStyleDeclaration = window.getComputedStyle(el); | ||
if (style.position === "fixed") { | ||
if (style.position === 'fixed') { | ||
return true; | ||
@@ -19,0 +19,0 @@ } |
@@ -1,2 +0,2 @@ | ||
import type { ScrollOptions } from "../../types"; | ||
import type { ScrollOptions } from '../../types'; | ||
@@ -3,0 +3,0 @@ const immediate = { |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
@@ -3,0 +3,0 @@ export default (el: Element): Position => ({ |
@@ -1,1 +0,1 @@ | ||
export { default } from "./use-droppable-publisher"; | ||
export { default } from './use-droppable-publisher'; |
const isElementFixed = (el: Element): boolean => | ||
window.getComputedStyle(el).position === "fixed"; | ||
window.getComputedStyle(el).position === 'fixed'; | ||
@@ -4,0 +4,0 @@ const find = (el?: Element | null): boolean => { |
@@ -1,17 +0,17 @@ | ||
import { useRef } from "react"; | ||
import type { Position } from "css-box-model"; | ||
import rafSchedule from "raf-schd"; | ||
import { useMemo, useCallback } from "use-memo-one"; | ||
import memoizeOne from "memoize-one"; | ||
import { invariant } from "../../invariant"; | ||
import checkForNestedScrollContainers from "./check-for-nested-scroll-container"; | ||
import * as dataAttr from "../data-attributes"; | ||
import { origin } from "../../state/position"; | ||
import getScroll from "./get-scroll"; | ||
import { useRef } from 'react'; | ||
import type { Position } from 'css-box-model'; | ||
import rafSchedule from 'raf-schd'; | ||
import { useMemo, useCallback } from 'use-memo-one'; | ||
import memoizeOne from 'memoize-one'; | ||
import { invariant } from '../../invariant'; | ||
import checkForNestedScrollContainers from './check-for-nested-scroll-container'; | ||
import * as dataAttr from '../data-attributes'; | ||
import { origin } from '../../state/position'; | ||
import getScroll from './get-scroll'; | ||
import type { | ||
DroppableEntry, | ||
DroppableCallbacks, | ||
} from "../../state/registry/registry-types"; | ||
import getEnv from "./get-env"; | ||
import type { Env } from "./get-env"; | ||
} from '../../state/registry/registry-types'; | ||
import getEnv from './get-env'; | ||
import type { Env } from './get-env'; | ||
import type { | ||
@@ -26,12 +26,12 @@ Id, | ||
DroppableMode, | ||
} from "../../types"; | ||
import getDimension from "./get-dimension"; | ||
import AppContext from "../context/app-context"; | ||
import type { AppContextValue } from "../context/app-context"; | ||
import { warning } from "../../dev-warning"; | ||
import getListenerOptions from "./get-listener-options"; | ||
import useRequiredContext from "../use-required-context"; | ||
import usePreviousRef from "../use-previous-ref"; | ||
import useLayoutEffect from "../use-isomorphic-layout-effect"; | ||
import useUniqueId from "../use-unique-id"; | ||
} from '../../types'; | ||
import getDimension from './get-dimension'; | ||
import AppContext from '../context/app-context'; | ||
import type { AppContextValue } from '../context/app-context'; | ||
import { warning } from '../../dev-warning'; | ||
import getListenerOptions from './get-listener-options'; | ||
import useRequiredContext from '../use-required-context'; | ||
import usePreviousRef from '../use-previous-ref'; | ||
import useLayoutEffect from '../use-isomorphic-layout-effect'; | ||
import useUniqueId from '../use-unique-id'; | ||
@@ -57,3 +57,3 @@ interface Props { | ||
const getClosestScrollableFromDrag = ( | ||
dragging?: WhileDragging | null | ||
dragging?: WhileDragging | null, | ||
): HTMLElement | null => (dragging && dragging.env.closestScrollable) || null; | ||
@@ -64,3 +64,3 @@ | ||
const appContext: AppContextValue = useRequiredContext(AppContext); | ||
const uniqueId: Id = useUniqueId("droppable"); | ||
const uniqueId: Id = useUniqueId('droppable'); | ||
const { registry, marshal } = appContext; | ||
@@ -75,3 +75,3 @@ const previousRef = usePreviousRef(args); | ||
}), | ||
[args.droppableId, args.mode, args.type] | ||
[args.droppableId, args.mode, args.type], | ||
); | ||
@@ -85,3 +85,3 @@ const publishedDescriptorRef = useRef<DroppableDescriptor>(descriptor); | ||
whileDraggingRef.current, | ||
"Can only update scroll when dragging" | ||
'Can only update scroll when dragging', | ||
); | ||
@@ -91,3 +91,3 @@ const scroll: Position = { x, y }; | ||
}), | ||
[descriptor.id, marshal] | ||
[descriptor.id, marshal], | ||
); | ||
@@ -112,3 +112,3 @@ | ||
() => rafSchedule(updateScroll), | ||
[updateScroll] | ||
[updateScroll], | ||
); | ||
@@ -122,3 +122,3 @@ | ||
dragging && closest, | ||
"Could not find scroll options while scrolling" | ||
'Could not find scroll options while scrolling', | ||
); | ||
@@ -137,7 +137,7 @@ const options: ScrollOptions = dragging.scrollOptions; | ||
!whileDraggingRef.current, | ||
"Cannot collect a droppable while a drag is occurring" | ||
'Cannot collect a droppable while a drag is occurring', | ||
); | ||
const previous: Props = previousRef.current; | ||
const ref: HTMLElement | null = previous.getDroppableRef(); | ||
invariant(ref, "Cannot collect without a droppable ref"); | ||
invariant(ref, 'Cannot collect without a droppable ref'); | ||
const env: Env = getEnv(ref); | ||
@@ -170,3 +170,3 @@ | ||
dataAttr.scrollContainer.contextId, | ||
appContext.contextId | ||
appContext.contextId, | ||
); | ||
@@ -176,8 +176,8 @@ | ||
scrollable.addEventListener( | ||
"scroll", | ||
'scroll', | ||
onClosestScroll, | ||
getListenerOptions(dragging.scrollOptions) | ||
getListenerOptions(dragging.scrollOptions), | ||
); | ||
// print a debug warning if using an unsupported nested scroll container setup | ||
if (process.env.NODE_ENV !== "production") { | ||
if (process.env.NODE_ENV !== 'production') { | ||
checkForNestedScrollContainers(scrollable); | ||
@@ -189,3 +189,3 @@ } | ||
}, | ||
[appContext.contextId, descriptor, onClosestScroll, previousRef] | ||
[appContext.contextId, descriptor, onClosestScroll, previousRef], | ||
); | ||
@@ -198,3 +198,3 @@ | ||
dragging && closest, | ||
"Can only recollect Droppable client for Droppables that have a scroll container" | ||
'Can only recollect Droppable client for Droppables that have a scroll container', | ||
); | ||
@@ -207,3 +207,3 @@ | ||
const dragging: WhileDragging | null = whileDraggingRef.current; | ||
invariant(dragging, "Cannot stop drag when no active drag"); | ||
invariant(dragging, 'Cannot stop drag when no active drag'); | ||
const closest = getClosestScrollableFromDrag(dragging); | ||
@@ -222,7 +222,7 @@ | ||
closest.removeEventListener( | ||
"scroll", | ||
'scroll', | ||
onClosestScroll, | ||
// See: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
getListenerOptions(dragging.scrollOptions) as any | ||
getListenerOptions(dragging.scrollOptions) as any, | ||
); | ||
@@ -234,5 +234,5 @@ }, [onClosestScroll, scheduleScrollUpdate]); | ||
const dragging: WhileDragging | null = whileDraggingRef.current; | ||
invariant(dragging, "Cannot scroll when there is no drag"); | ||
invariant(dragging, 'Cannot scroll when there is no drag'); | ||
const closest: Element | null = getClosestScrollableFromDrag(dragging); | ||
invariant(closest, "Cannot scroll a droppable with no closest scrollable"); | ||
invariant(closest, 'Cannot scroll a droppable with no closest scrollable'); | ||
@@ -259,3 +259,3 @@ // act | ||
}), | ||
[callbacks, descriptor, uniqueId] | ||
[callbacks, descriptor, uniqueId], | ||
); | ||
@@ -273,3 +273,3 @@ | ||
warning( | ||
"Unsupported: changing the droppableId or type of a Droppable during a drag" | ||
'Unsupported: changing the droppableId or type of a Droppable during a drag', | ||
); | ||
@@ -291,3 +291,3 @@ dragStopped(); | ||
publishedDescriptorRef.current.id, | ||
!args.isDropDisabled | ||
!args.isDropDisabled, | ||
); | ||
@@ -304,5 +304,5 @@ }, [args.isDropDisabled, marshal]); | ||
publishedDescriptorRef.current.id, | ||
args.isCombineEnabled | ||
args.isCombineEnabled, | ||
); | ||
}, [args.isCombineEnabled, marshal]); | ||
} |
@@ -1,2 +0,2 @@ | ||
import type { DraggableId } from "../../types"; | ||
import type { DraggableId } from '../../types'; | ||
@@ -3,0 +3,0 @@ export type Unregister = () => void; |
@@ -1,1 +0,1 @@ | ||
export { default } from "./use-focus-marshal"; | ||
export { default } from './use-focus-marshal'; |
@@ -1,8 +0,8 @@ | ||
import { useRef } from "react"; | ||
import { useMemo, useCallback } from "use-memo-one"; | ||
import type { DraggableId, ContextId } from "../../types"; | ||
import type { FocusMarshal, Unregister } from "./focus-marshal-types"; | ||
import { dragHandle as dragHandleAttr } from "../data-attributes"; | ||
import useLayoutEffect from "../use-isomorphic-layout-effect"; | ||
import findDragHandle from "../get-elements/find-drag-handle"; | ||
import { useRef } from 'react'; | ||
import { useMemo, useCallback } from 'use-memo-one'; | ||
import type { DraggableId, ContextId } from '../../types'; | ||
import type { FocusMarshal, Unregister } from './focus-marshal-types'; | ||
import { dragHandle as dragHandleAttr } from '../data-attributes'; | ||
import useLayoutEffect from '../use-isomorphic-layout-effect'; | ||
import findDragHandle from '../get-elements/find-drag-handle'; | ||
@@ -26,3 +26,3 @@ interface Entry { | ||
id: DraggableId, | ||
focus: () => void | ||
focus: () => void, | ||
): Unregister { | ||
@@ -47,3 +47,3 @@ const entry: Entry = { id, focus }; | ||
contextId, | ||
tryGiveFocusTo | ||
tryGiveFocusTo, | ||
); | ||
@@ -55,3 +55,3 @@ | ||
}, | ||
[contextId] | ||
[contextId], | ||
); | ||
@@ -61,3 +61,3 @@ | ||
previous: DraggableId, | ||
redirectTo: DraggableId | ||
redirectTo: DraggableId, | ||
) { | ||
@@ -91,3 +91,3 @@ if (recordRef.current === previous) { | ||
}, | ||
[tryGiveFocus] | ||
[tryGiveFocus], | ||
); | ||
@@ -132,3 +132,3 @@ | ||
}), | ||
[register, tryRecordFocus, tryRestoreFocusRecorded, tryShiftRecord] | ||
[register, tryRecordFocus, tryRestoreFocusRecorded, tryShiftRecord], | ||
); | ||
@@ -135,0 +135,0 @@ |
@@ -1,1 +0,1 @@ |
export { default } from "./use-hidden-text-element"; |
export { default } from './use-hidden-text-element'; |
@@ -1,6 +0,6 @@ |
import { useEffect } from "react"; |
import { useMemo } from "use-memo-one"; |
import type { ContextId, ElementId } from "../../types"; |
import getBodyElement from "../get-body-element"; |
import useUniqueId from "../use-unique-id"; |
import { useEffect } from 'react'; |
import { useMemo } from 'use-memo-one'; |
import type { ContextId, ElementId } from '../../types'; |
import getBodyElement from '../get-body-element'; |
import useUniqueId from '../use-unique-id'; |
@@ -25,6 +25,6 @@ interface GetIdArgs { |
}: Args): ElementId { |
const uniqueId: string = useUniqueId("hidden-text", { separator: "-" }); |
const uniqueId: string = useUniqueId('hidden-text', { separator: '-' }); |
const id: ElementId = useMemo( |
() => getElementId({ contextId, uniqueId }), |
[uniqueId, contextId] |
[uniqueId, contextId], |
); |
@@ -34,3 +34,3 @@ |
function mount() { |
const el: HTMLElement = document.createElement("div"); |
const el: HTMLElement = document.createElement('div'); |
@@ -44,3 +44,3 @@ // identifier |
// Using `display: none` prevent screen readers from reading this element in the document flow |
el.style.display = "none"; |
el.style.display = 'none'; |
@@ -58,3 +58,3 @@ // Add to body |
}, |
[id, text] |
[id, text], |
); |
@@ -61,0 +61,0 @@ |
// eslint-disable-next-line no-restricted-imports | ||
import { useLayoutEffect, useEffect } from "react"; | ||
import { useLayoutEffect, useEffect } from 'react'; | ||
@@ -11,5 +11,5 @@ // https://github.com/reduxjs/react-redux/blob/v7-beta/src/components/connectAdvanced.js#L35 | ||
const useIsomorphicLayoutEffect = | ||
typeof window !== "undefined" && | ||
typeof window.document !== "undefined" && | ||
typeof window.document.createElement !== "undefined" | ||
typeof window !== 'undefined' && | ||
typeof window.document !== 'undefined' && | ||
typeof window.document.createElement !== 'undefined' | ||
? useLayoutEffect | ||
@@ -16,0 +16,0 @@ : useEffect; |
@@ -1,2 +0,2 @@ | ||
import { useRef, useEffect } from "react"; | ||
import { useRef, useEffect } from 'react'; | ||
@@ -3,0 +3,0 @@ export default function usePrevious<T>(current: T): { |
@@ -1,11 +0,11 @@ | ||
import { useContext } from "react"; | ||
import type { Context as ContextType } from "react"; | ||
import { invariant } from "../invariant"; | ||
import { useContext } from 'react'; | ||
import type { Context as ContextType } from 'react'; | ||
import { invariant } from '../invariant'; | ||
export default function useRequiredContext<T>( | ||
Context: ContextType<T | null> | ||
Context: ContextType<T | null>, | ||
): T { | ||
const result: T | null = useContext(Context); | ||
invariant(result, "Could not find required context"); | ||
invariant(result, 'Could not find required context'); | ||
return result; | ||
} |
const supportedMatchesName: | ||
| "matches" | ||
| "msMatchesSelector" | ||
| "webkitMatchesSelector" = (() => { | ||
const base = "matches" as const; | ||
| 'matches' | ||
| 'msMatchesSelector' | ||
| 'webkitMatchesSelector' = (() => { | ||
const base = 'matches' as const; | ||
// Server side rendering | ||
if (typeof document === "undefined") { | ||
if (typeof document === 'undefined') { | ||
return base; | ||
@@ -15,4 +15,4 @@ } | ||
base, | ||
"msMatchesSelector" as const, | ||
"webkitMatchesSelector" as const, | ||
'msMatchesSelector' as const, | ||
'webkitMatchesSelector' as const, | ||
]; | ||
@@ -32,3 +32,3 @@ | ||
// https://caniuse.com/#feat=matchesselector | ||
if (el[supportedMatchesName as "matches"](selector)) { | ||
if (el[supportedMatchesName as 'matches'](selector)) { | ||
return el; | ||
@@ -35,0 +35,0 @@ } |
@@ -1,7 +0,7 @@ | ||
import type { ContextId, DraggableId } from "../../types"; | ||
import * as attributes from "../data-attributes"; | ||
import isElement from "../is-type-of-element/is-element"; | ||
import isHtmlElement from "../is-type-of-element/is-html-element"; | ||
import closest from "./closest"; | ||
import { warning } from "../../dev-warning"; | ||
import type { ContextId, DraggableId } from '../../types'; | ||
import * as attributes from '../data-attributes'; | ||
import isElement from '../is-type-of-element/is-element'; | ||
import isHtmlElement from '../is-type-of-element/is-html-element'; | ||
import closest from './closest'; | ||
import { warning } from '../../dev-warning'; | ||
@@ -14,3 +14,3 @@ function getSelector(contextId: ContextId): string { | ||
contextId: ContextId, | ||
event: Event | ||
event: Event, | ||
): Element | null { | ||
@@ -20,3 +20,3 @@ const target = event.target; | ||
if (!isElement(target)) { | ||
warning("event.target must be a Element"); | ||
warning('event.target must be a Element'); | ||
return null; | ||
@@ -33,3 +33,3 @@ } | ||
if (!isHtmlElement(handle)) { | ||
warning("drag handle must be a HTMLElement"); | ||
warning('drag handle must be a HTMLElement'); | ||
return null; | ||
@@ -43,7 +43,7 @@ } | ||
contextId: ContextId, | ||
event: Event | ||
event: Event, | ||
): DraggableId | null { | ||
const handle: Element | null = findClosestDragHandleFromEvent( | ||
contextId, | ||
event | ||
event, | ||
); | ||
@@ -50,0 +50,0 @@ |
@@ -1,4 +0,4 @@ | ||
export { default } from "./use-sensor-marshal"; | ||
export { default as useMouseSensor } from "./sensors/use-mouse-sensor"; | ||
export { default as useTouchSensor } from "./sensors/use-touch-sensor"; | ||
export { default as useKeyboardSensor } from "./sensors/use-keyboard-sensor"; | ||
export { default } from './use-sensor-marshal'; | ||
export { default as useMouseSensor } from './sensors/use-mouse-sensor'; | ||
export { default as useTouchSensor } from './sensors/use-touch-sensor'; | ||
export { default as useKeyboardSensor } from './sensors/use-keyboard-sensor'; |
@@ -1,2 +0,2 @@ | ||
import isHtmlElement from "../is-type-of-element/is-html-element"; | ||
import isHtmlElement from '../is-type-of-element/is-html-element'; | ||
@@ -7,10 +7,10 @@ export type InteractiveTagNames = typeof interactiveTagNames; | ||
export const interactiveTagNames = [ | ||
"input", | ||
"button", | ||
"textarea", | ||
"select", | ||
"option", | ||
"optgroup", | ||
"video", | ||
"audio", | ||
'input', | ||
'button', | ||
'textarea', | ||
'select', | ||
'option', | ||
'optgroup', | ||
'video', | ||
'audio', | ||
] as const; | ||
@@ -20,3 +20,3 @@ | ||
parent: Element, | ||
current?: Element | null | ||
current?: Element | null, | ||
): boolean { | ||
@@ -44,4 +44,4 @@ if (current == null) { | ||
// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable | ||
const attribute: string | null = current.getAttribute("contenteditable"); | ||
if (attribute === "true" || attribute === "") { | ||
const attribute: string | null = current.getAttribute('contenteditable'); | ||
if (attribute === 'true' || attribute === '') { | ||
return true; | ||
@@ -61,3 +61,3 @@ } | ||
draggable: Element, | ||
event: Event | ||
event: Event, | ||
): boolean { | ||
@@ -64,0 +64,0 @@ const target = event.target; |
@@ -1,2 +0,2 @@ | ||
import { invariant } from "../../invariant"; | ||
import { invariant } from '../../invariant'; | ||
@@ -27,3 +27,3 @@ export interface Lock { | ||
function claim(abandon: () => void): Lock { | ||
invariant(!lock, "Cannot claim lock as it is already claimed"); | ||
invariant(!lock, 'Cannot claim lock as it is already claimed'); | ||
const newLock: Lock = { abandon }; | ||
@@ -36,3 +36,3 @@ // update singleton | ||
function release() { | ||
invariant(lock, "Cannot release lock when there is no lock"); | ||
invariant(lock, 'Cannot release lock when there is no lock'); | ||
lock = null; | ||
@@ -39,0 +39,0 @@ } |
@@ -1,4 +0,4 @@ | ||
import { useRef } from "react"; | ||
import { useMemo, useCallback } from "use-memo-one"; | ||
import { invariant } from "../../../invariant"; | ||
import { useRef } from 'react'; | ||
import { useMemo, useCallback } from 'use-memo-one'; | ||
import { invariant } from '../../../invariant'; | ||
import type { | ||
@@ -9,3 +9,3 @@ SensorAPI, | ||
DraggableId, | ||
} from "../../../types"; | ||
} from '../../../types'; | ||
import type { | ||
@@ -15,8 +15,8 @@ KeyboardEventBinding, | ||
EventOptions, | ||
} from "../../event-bindings/event-types"; | ||
import * as keyCodes from "../../key-codes"; | ||
import bindEvents from "../../event-bindings/bind-events"; | ||
import preventStandardKeyEvents from "./util/prevent-standard-key-events"; | ||
import supportedPageVisibilityEventName from "./util/supported-page-visibility-event-name"; | ||
import useLayoutEffect from "../../use-isomorphic-layout-effect"; | ||
} from '../../event-bindings/event-types'; | ||
import * as keyCodes from '../../key-codes'; | ||
import bindEvents from '../../event-bindings/bind-events'; | ||
import preventStandardKeyEvents from './util/prevent-standard-key-events'; | ||
import supportedPageVisibilityEventName from './util/supported-page-visibility-event-name'; | ||
import useLayoutEffect from '../../use-isomorphic-layout-effect'; | ||
@@ -38,3 +38,3 @@ function noop() {} | ||
actions: SnapDragActions, | ||
stop: () => void | ||
stop: () => void, | ||
): AnyEventBinding[] { | ||
@@ -53,3 +53,3 @@ function cancel() { | ||
{ | ||
eventName: "keydown", | ||
eventName: 'keydown', | ||
fn: (event: KeyboardEvent) => { | ||
@@ -107,15 +107,15 @@ if (event.keyCode === keyCodes.escape) { | ||
{ | ||
eventName: "mousedown", | ||
eventName: 'mousedown', | ||
fn: cancel, | ||
}, | ||
{ | ||
eventName: "mouseup", | ||
eventName: 'mouseup', | ||
fn: cancel, | ||
}, | ||
{ | ||
eventName: "click", | ||
eventName: 'click', | ||
fn: cancel, | ||
}, | ||
{ | ||
eventName: "touchstart", | ||
eventName: 'touchstart', | ||
fn: cancel, | ||
@@ -125,3 +125,3 @@ }, | ||
{ | ||
eventName: "resize", | ||
eventName: 'resize', | ||
fn: cancel, | ||
@@ -132,3 +132,3 @@ }, | ||
{ | ||
eventName: "wheel", | ||
eventName: 'wheel', | ||
fn: cancel, | ||
@@ -153,3 +153,3 @@ // chrome says it is a violation for this to not be passive | ||
() => ({ | ||
eventName: "keydown", | ||
eventName: 'keydown', | ||
fn: function onKeyDown(event: KeyboardEvent) { | ||
@@ -178,3 +178,3 @@ // Event already used | ||
stop, | ||
{ sourceEvent: event } | ||
{ sourceEvent: event }, | ||
); | ||
@@ -202,3 +202,3 @@ | ||
isCapturing, | ||
"Cannot stop capturing a keyboard drag when not capturing" | ||
'Cannot stop capturing a keyboard drag when not capturing', | ||
); | ||
@@ -218,3 +218,3 @@ isCapturing = false; | ||
getDraggingBindings(actions, stop), | ||
{ capture: true, passive: false } | ||
{ capture: true, passive: false }, | ||
); | ||
@@ -225,3 +225,3 @@ }, | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
[api] | ||
[api], | ||
); | ||
@@ -239,6 +239,6 @@ | ||
[startCaptureBinding], | ||
options | ||
options, | ||
); | ||
}, | ||
[startCaptureBinding] | ||
[startCaptureBinding], | ||
); | ||
@@ -255,4 +255,4 @@ | ||
}, | ||
[listenForCapture] | ||
[listenForCapture], | ||
); | ||
} |
@@ -1,5 +0,5 @@ | ||
import { useRef } from "react"; | ||
import { useCallback, useMemo } from "use-memo-one"; | ||
import type { Position } from "css-box-model"; | ||
import { invariant } from "../../../invariant"; | ||
import { useRef } from 'react'; | ||
import { useCallback, useMemo } from 'use-memo-one'; | ||
import type { Position } from 'css-box-model'; | ||
import { invariant } from '../../../invariant'; | ||
import type { | ||
@@ -11,3 +11,3 @@ PreDragActions, | ||
DraggableOptions, | ||
} from "../../../types"; | ||
} from '../../../types'; | ||
import type { | ||
@@ -18,9 +18,9 @@ AnyEventBinding, | ||
MouseEventBinding, | ||
} from "../../event-bindings/event-types"; | ||
import bindEvents from "../../event-bindings/bind-events"; | ||
import * as keyCodes from "../../key-codes"; | ||
import preventStandardKeyEvents from "./util/prevent-standard-key-events"; | ||
import supportedPageVisibilityEventName from "./util/supported-page-visibility-event-name"; | ||
import useLayoutEffect from "../../use-isomorphic-layout-effect"; | ||
import { noop } from "../../../empty"; | ||
} from '../../event-bindings/event-types'; | ||
import bindEvents from '../../event-bindings/bind-events'; | ||
import * as keyCodes from '../../key-codes'; | ||
import preventStandardKeyEvents from './util/prevent-standard-key-events'; | ||
import supportedPageVisibilityEventName from './util/supported-page-visibility-event-name'; | ||
import useLayoutEffect from '../../use-isomorphic-layout-effect'; | ||
import { noop } from '../../../empty'; | ||
@@ -33,3 +33,3 @@ // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button | ||
original: Position, | ||
current: Position | ||
current: Position, | ||
): boolean { | ||
@@ -43,7 +43,7 @@ return ( | ||
interface Idle { | ||
type: "IDLE"; | ||
type: 'IDLE'; | ||
} | ||
interface Pending { | ||
type: "PENDING"; | ||
type: 'PENDING'; | ||
point: Position; | ||
@@ -54,3 +54,3 @@ actions: PreDragActions; | ||
interface Dragging { | ||
type: "DRAGGING"; | ||
type: 'DRAGGING'; | ||
actions: FluidDragActions; | ||
@@ -61,3 +61,3 @@ } | ||
const idle: Idle = { type: "IDLE" }; | ||
const idle: Idle = { type: 'IDLE' }; | ||
@@ -79,3 +79,3 @@ interface GetCaptureArgs { | ||
{ | ||
eventName: "mousemove", | ||
eventName: 'mousemove', | ||
fn: (event: MouseEvent) => { | ||
@@ -95,3 +95,3 @@ const { button, clientX, clientY } = event; | ||
// Already dragging | ||
if (phase.type === "DRAGGING") { | ||
if (phase.type === 'DRAGGING') { | ||
// preventing default as we are using this event | ||
@@ -104,3 +104,3 @@ event.preventDefault(); | ||
// There should be a pending drag at this point | ||
invariant(phase.type === "PENDING", "Cannot be IDLE"); | ||
invariant(phase.type === 'PENDING', 'Cannot be IDLE'); | ||
const pending: Position = phase.point; | ||
@@ -121,3 +121,3 @@ | ||
setPhase({ | ||
type: "DRAGGING", | ||
type: 'DRAGGING', | ||
actions, | ||
@@ -128,7 +128,7 @@ }); | ||
{ | ||
eventName: "mouseup", | ||
eventName: 'mouseup', | ||
fn: (event: MouseEvent) => { | ||
const phase: Phase = getPhase(); | ||
if (phase.type !== "DRAGGING") { | ||
if (phase.type !== 'DRAGGING') { | ||
cancel(); | ||
@@ -145,7 +145,7 @@ return; | ||
{ | ||
eventName: "mousedown", | ||
eventName: 'mousedown', | ||
fn: (event: MouseEvent) => { | ||
// this can happen during a drag when the user clicks a button | ||
// other than the primary mouse button | ||
if (getPhase().type === "DRAGGING") { | ||
if (getPhase().type === 'DRAGGING') { | ||
event.preventDefault(); | ||
@@ -158,7 +158,7 @@ } | ||
{ | ||
eventName: "keydown", | ||
eventName: 'keydown', | ||
fn: (event: KeyboardEvent) => { | ||
const phase: Phase = getPhase(); | ||
// Abort if any keystrokes while a drag is pending | ||
if (phase.type === "PENDING") { | ||
if (phase.type === 'PENDING') { | ||
cancel(); | ||
@@ -179,11 +179,11 @@ return; | ||
{ | ||
eventName: "resize", | ||
eventName: 'resize', | ||
fn: cancel, | ||
}, | ||
{ | ||
eventName: "scroll", | ||
eventName: 'scroll', | ||
// kill a pending drag if there is a window scroll | ||
options: { passive: true, capture: false }, | ||
fn: () => { | ||
if (getPhase().type === "PENDING") { | ||
if (getPhase().type === 'PENDING') { | ||
cancel(); | ||
@@ -198,3 +198,3 @@ } | ||
{ | ||
eventName: "webkitmouseforcedown", | ||
eventName: 'webkitmouseforcedown', | ||
// it is considered a indirect cancel so we do not | ||
@@ -204,3 +204,3 @@ // prevent default in any situation. | ||
const phase: Phase = getPhase(); | ||
invariant(phase.type !== "IDLE", "Unexpected phase"); | ||
invariant(phase.type !== 'IDLE', 'Unexpected phase'); | ||
@@ -233,3 +233,3 @@ if (phase.actions.shouldRespectForcePress()) { | ||
() => ({ | ||
eventName: "mousedown", | ||
eventName: 'mousedown', | ||
fn: function onMouseDown(event: MouseEvent) { | ||
@@ -262,3 +262,3 @@ // Event already used | ||
stop, | ||
{ sourceEvent: event } | ||
{ sourceEvent: event }, | ||
); | ||
@@ -287,3 +287,3 @@ | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
[api] | ||
[api], | ||
); | ||
@@ -293,3 +293,3 @@ | ||
() => ({ | ||
eventName: "webkitmouseforcewillbegin", | ||
eventName: 'webkitmouseforcewillbegin', | ||
fn: (event: Event) => { | ||
@@ -324,3 +324,3 @@ if (event.defaultPrevented) { | ||
}), | ||
[api] | ||
[api], | ||
); | ||
@@ -338,6 +338,6 @@ | ||
[preventForcePressBinding, startCaptureBinding], | ||
options | ||
options, | ||
); | ||
}, | ||
[preventForcePressBinding, startCaptureBinding] | ||
[preventForcePressBinding, startCaptureBinding], | ||
); | ||
@@ -347,3 +347,3 @@ | ||
const current: Phase = phaseRef.current; | ||
if (current.type === "IDLE") { | ||
if (current.type === 'IDLE') { | ||
return; | ||
@@ -361,6 +361,6 @@ } | ||
stop(); | ||
if (phase.type === "DRAGGING") { | ||
if (phase.type === 'DRAGGING') { | ||
phase.actions.cancel({ shouldBlockNextClick: true }); | ||
} | ||
if (phase.type === "PENDING") { | ||
if (phase.type === 'PENDING') { | ||
phase.actions.abort(); | ||
@@ -384,3 +384,3 @@ } | ||
}, | ||
[cancel, stop] | ||
[cancel, stop], | ||
); | ||
@@ -391,7 +391,7 @@ | ||
invariant( | ||
phaseRef.current.type === "IDLE", | ||
"Expected to move from IDLE to PENDING drag" | ||
phaseRef.current.type === 'IDLE', | ||
'Expected to move from IDLE to PENDING drag', | ||
); | ||
phaseRef.current = { | ||
type: "PENDING", | ||
type: 'PENDING', | ||
point, | ||
@@ -402,3 +402,3 @@ actions, | ||
}, | ||
[bindCapturingEvents] | ||
[bindCapturingEvents], | ||
); | ||
@@ -415,4 +415,4 @@ | ||
}, | ||
[listenForCapture] | ||
[listenForCapture], | ||
); | ||
} |
@@ -1,5 +0,5 @@ | ||
import { useRef } from "react"; | ||
import { useCallback, useMemo } from "use-memo-one"; | ||
import type { Position } from "css-box-model"; | ||
import { invariant } from "../../../invariant"; | ||
import { useRef } from 'react'; | ||
import { useCallback, useMemo } from 'use-memo-one'; | ||
import type { Position } from 'css-box-model'; | ||
import { invariant } from '../../../invariant'; | ||
import type { | ||
@@ -10,3 +10,3 @@ DraggableId, | ||
FluidDragActions, | ||
} from "../../../types"; | ||
} from '../../../types'; | ||
import type { | ||
@@ -16,8 +16,8 @@ AnyEventBinding, | ||
TouchEventBinding, | ||
} from "../../event-bindings/event-types"; | ||
import bindEvents from "../../event-bindings/bind-events"; | ||
import * as keyCodes from "../../key-codes"; | ||
import supportedPageVisibilityEventName from "./util/supported-page-visibility-event-name"; | ||
import { noop } from "../../../empty"; | ||
import useLayoutEffect from "../../use-isomorphic-layout-effect"; | ||
} from '../../event-bindings/event-types'; | ||
import bindEvents from '../../event-bindings/bind-events'; | ||
import * as keyCodes from '../../key-codes'; | ||
import supportedPageVisibilityEventName from './util/supported-page-visibility-event-name'; | ||
import { noop } from '../../../empty'; | ||
import useLayoutEffect from '../../use-isomorphic-layout-effect'; | ||
@@ -29,7 +29,7 @@ type TouchWithForce = Touch & { | ||
interface Idle { | ||
type: "IDLE"; | ||
type: 'IDLE'; | ||
} | ||
interface Pending { | ||
type: "PENDING"; | ||
type: 'PENDING'; | ||
point: Position; | ||
@@ -41,3 +41,3 @@ actions: PreDragActions; | ||
interface Dragging { | ||
type: "DRAGGING"; | ||
type: 'DRAGGING'; | ||
actions: FluidDragActions; | ||
@@ -49,3 +49,3 @@ hasMoved: boolean; | ||
const idle: Idle = { type: "IDLE" }; | ||
const idle: Idle = { type: 'IDLE' }; | ||
// Decreased from 150 as a work around for an issue for forcepress on iOS | ||
@@ -70,3 +70,3 @@ // https://github.com/atlassian/react-beautiful-dnd/issues/1401 | ||
{ | ||
eventName: "orientationchange", | ||
eventName: 'orientationchange', | ||
fn: cancel, | ||
@@ -76,3 +76,3 @@ }, | ||
{ | ||
eventName: "resize", | ||
eventName: 'resize', | ||
fn: cancel, | ||
@@ -83,3 +83,3 @@ }, | ||
{ | ||
eventName: "contextmenu", | ||
eventName: 'contextmenu', | ||
fn: (event: Event) => { | ||
@@ -93,5 +93,5 @@ // always opting out of context menu events | ||
{ | ||
eventName: "keydown", | ||
eventName: 'keydown', | ||
fn: (event: KeyboardEvent) => { | ||
if (getPhase().type !== "DRAGGING") { | ||
if (getPhase().type !== 'DRAGGING') { | ||
cancel(); | ||
@@ -128,3 +128,3 @@ return; | ||
{ | ||
eventName: "touchmove", | ||
eventName: 'touchmove', | ||
// Opting out of passive touchmove (default) so as to prevent scrolling while moving | ||
@@ -137,3 +137,3 @@ // Not worried about performance as effect of move is throttled in requestAnimationFrame | ||
// Drag has not yet started and we are waiting for a long press. | ||
if (phase.type !== "DRAGGING") { | ||
if (phase.type !== 'DRAGGING') { | ||
cancel(); | ||
@@ -161,7 +161,7 @@ return; | ||
{ | ||
eventName: "touchend", | ||
eventName: 'touchend', | ||
fn: (event: TouchEvent) => { | ||
const phase: Phase = getPhase(); | ||
// drag had not started yet - do not prevent the default action | ||
if (phase.type !== "DRAGGING") { | ||
if (phase.type !== 'DRAGGING') { | ||
cancel(); | ||
@@ -178,6 +178,6 @@ return; | ||
{ | ||
eventName: "touchcancel", | ||
eventName: 'touchcancel', | ||
fn: (event: TouchEvent) => { | ||
// drag had not started yet - do not prevent the default action | ||
if (getPhase().type !== "DRAGGING") { | ||
if (getPhase().type !== 'DRAGGING') { | ||
cancel(); | ||
@@ -196,3 +196,3 @@ return; | ||
{ | ||
eventName: "touchforcechange", | ||
eventName: 'touchforcechange', | ||
fn: (event: TouchEvent) => { | ||
@@ -202,3 +202,3 @@ const phase: Phase = getPhase(); | ||
// needed to use phase.actions | ||
invariant(phase.type !== "IDLE"); | ||
invariant(phase.type !== 'IDLE'); | ||
@@ -224,3 +224,3 @@ // This is not fantastic logic, but it is done to account for | ||
if (phase.type === "PENDING") { | ||
if (phase.type === 'PENDING') { | ||
if (shouldRespect) { | ||
@@ -276,3 +276,3 @@ cancel(); | ||
() => ({ | ||
eventName: "touchstart", | ||
eventName: 'touchstart', | ||
fn: function onTouchStart(event: TouchEvent) { | ||
@@ -299,3 +299,3 @@ // Event already used by something else | ||
stop, | ||
{ sourceEvent: event } | ||
{ sourceEvent: event }, | ||
); | ||
@@ -324,3 +324,3 @@ | ||
// eslint-disable-next-line react-hooks/exhaustive-deps | ||
[api] | ||
[api], | ||
); | ||
@@ -338,6 +338,6 @@ | ||
[startCaptureBinding], | ||
options | ||
options, | ||
); | ||
}, | ||
[startCaptureBinding] | ||
[startCaptureBinding], | ||
); | ||
@@ -347,3 +347,3 @@ | ||
const current: Phase = phaseRef.current; | ||
if (current.type === "IDLE") { | ||
if (current.type === 'IDLE') { | ||
return; | ||
@@ -353,3 +353,3 @@ } | ||
// aborting any pending drag | ||
if (current.type === "PENDING") { | ||
if (current.type === 'PENDING') { | ||
clearTimeout(current.longPressTimerId); | ||
@@ -367,6 +367,6 @@ } | ||
stop(); | ||
if (phase.type === "DRAGGING") { | ||
if (phase.type === 'DRAGGING') { | ||
phase.actions.cancel({ shouldBlockNextClick: true }); | ||
} | ||
if (phase.type === "PENDING") { | ||
if (phase.type === 'PENDING') { | ||
phase.actions.abort(); | ||
@@ -401,3 +401,3 @@ } | ||
}, | ||
[cancel, getPhase, stop] | ||
[cancel, getPhase, stop], | ||
); | ||
@@ -409,4 +409,4 @@ | ||
invariant( | ||
phase.type === "PENDING", | ||
`Cannot start dragging from phase ${phase.type}` | ||
phase.type === 'PENDING', | ||
`Cannot start dragging from phase ${phase.type}`, | ||
); | ||
@@ -417,3 +417,3 @@ | ||
setPhase({ | ||
type: "DRAGGING", | ||
type: 'DRAGGING', | ||
actions, | ||
@@ -423,3 +423,3 @@ hasMoved: false, | ||
}, | ||
[getPhase, setPhase] | ||
[getPhase, setPhase], | ||
); | ||
@@ -430,4 +430,4 @@ | ||
invariant( | ||
getPhase().type === "IDLE", | ||
"Expected to move from IDLE to PENDING drag" | ||
getPhase().type === 'IDLE', | ||
'Expected to move from IDLE to PENDING drag', | ||
); | ||
@@ -437,7 +437,7 @@ | ||
startDragging, | ||
timeForLongPress | ||
timeForLongPress, | ||
); | ||
setPhase({ | ||
type: "PENDING", | ||
type: 'PENDING', | ||
point, | ||
@@ -450,3 +450,3 @@ actions, | ||
}, | ||
[bindCapturingEvents, getPhase, setPhase, startDragging] | ||
[bindCapturingEvents, getPhase, setPhase, startDragging], | ||
); | ||
@@ -464,3 +464,3 @@ | ||
const phase: Phase = getPhase(); | ||
if (phase.type === "PENDING") { | ||
if (phase.type === 'PENDING') { | ||
clearTimeout(phase.longPressTimerId); | ||
@@ -471,3 +471,3 @@ setPhase(idle); | ||
}, | ||
[getPhase, listenForCapture, setPhase] | ||
[getPhase, listenForCapture, setPhase], | ||
); | ||
@@ -483,3 +483,3 @@ | ||
{ | ||
eventName: "touchmove", | ||
eventName: 'touchmove', | ||
// using a new noop function for each usage as a single `removeEventListener()` | ||
@@ -486,0 +486,0 @@ // call will remove all handlers with the same reference |
@@ -1,2 +0,2 @@ | ||
import * as keyCodes from "../../../key-codes"; | ||
import * as keyCodes from '../../../key-codes'; | ||
@@ -3,0 +3,0 @@ interface KeyMap { |
const supportedEventName: string = ((): string => { | ||
const base = "visibilitychange"; | ||
const base = 'visibilitychange'; | ||
// Server side rendering | ||
if (typeof document === "undefined") { | ||
if (typeof document === 'undefined') { | ||
return base; | ||
@@ -19,3 +19,3 @@ } | ||
const supported = candidates.find( | ||
(eventName: string): boolean => `on${eventName}` in document | ||
(eventName: string): boolean => `on${eventName}` in document, | ||
); | ||
@@ -22,0 +22,0 @@ |
@@ -1,6 +0,6 @@ | ||
import rafSchd from "raf-schd"; | ||
import { useState } from "react"; | ||
import { useCallback, useMemo } from "use-memo-one"; | ||
import type { Position } from "css-box-model"; | ||
import { invariant } from "../../invariant"; | ||
import rafSchd from 'raf-schd'; | ||
import { useState } from 'react'; | ||
import { useCallback, useMemo } from 'use-memo-one'; | ||
import type { Position } from 'css-box-model'; | ||
import { invariant } from '../../invariant'; | ||
import type { | ||
@@ -19,7 +19,7 @@ ContextId, | ||
DraggableOptions, | ||
} from "../../types"; | ||
import create from "./lock"; | ||
import type { Lock, LockAPI } from "./lock"; | ||
import type { Store, Action } from "../../state/store-types"; | ||
import canStartDrag from "../../state/can-start-drag"; | ||
} from '../../types'; | ||
import create from './lock'; | ||
import type { Lock, LockAPI } from './lock'; | ||
import type { Store, Action } from '../../state/store-types'; | ||
import canStartDrag from '../../state/can-start-drag'; | ||
import { | ||
@@ -34,21 +34,21 @@ move as moveAction, | ||
flush, | ||
} from "../../state/action-creators"; | ||
import type { LiftArgs as LiftActionArgs } from "../../state/action-creators"; | ||
import isDragging from "../../state/is-dragging"; | ||
} from '../../state/action-creators'; | ||
import type { LiftArgs as LiftActionArgs } from '../../state/action-creators'; | ||
import isDragging from '../../state/is-dragging'; | ||
import type { | ||
Registry, | ||
DraggableEntry, | ||
} from "../../state/registry/registry-types"; | ||
import useMouseSensor from "./sensors/use-mouse-sensor"; | ||
import useKeyboardSensor from "./sensors/use-keyboard-sensor"; | ||
import useTouchSensor from "./sensors/use-touch-sensor"; | ||
import useValidateSensorHooks from "./use-validate-sensor-hooks"; | ||
import isEventInInteractiveElement from "./is-event-in-interactive-element"; | ||
import getBorderBoxCenterPosition from "../get-border-box-center-position"; | ||
import { warning } from "../../dev-warning"; | ||
import useLayoutEffect from "../use-isomorphic-layout-effect"; | ||
import { noop } from "../../empty"; | ||
import findClosestDraggableIdFromEvent from "./find-closest-draggable-id-from-event"; | ||
import findDraggable from "../get-elements/find-draggable"; | ||
import bindEvents from "../event-bindings/bind-events"; | ||
} from '../../state/registry/registry-types'; | ||
import useMouseSensor from './sensors/use-mouse-sensor'; | ||
import useKeyboardSensor from './sensors/use-keyboard-sensor'; | ||
import useTouchSensor from './sensors/use-touch-sensor'; | ||
import useValidateSensorHooks from './use-validate-sensor-hooks'; | ||
import isEventInInteractiveElement from './is-event-in-interactive-element'; | ||
import getBorderBoxCenterPosition from '../get-border-box-center-position'; | ||
import { warning } from '../../dev-warning'; | ||
import useLayoutEffect from '../use-isomorphic-layout-effect'; | ||
import { noop } from '../../empty'; | ||
import findClosestDraggableIdFromEvent from './find-closest-draggable-id-from-event'; | ||
import findDraggable from '../get-elements/find-draggable'; | ||
import bindEvents from '../event-bindings/bind-events'; | ||
@@ -59,3 +59,3 @@ function preventDefault(event: Event) { | ||
type LockPhase = "PRE_DRAG" | "DRAGGING" | "COMPLETED"; | ||
type LockPhase = 'PRE_DRAG' | 'DRAGGING' | 'COMPLETED'; | ||
@@ -197,3 +197,3 @@ interface IsActiveArgs { | ||
const lock: Lock = lockAPI.claim(forceSensorStop || noop); | ||
let phase: LockPhase = "PRE_DRAG"; | ||
let phase: LockPhase = 'PRE_DRAG'; | ||
@@ -215,3 +215,3 @@ function getShouldRespectForcePress(): boolean { | ||
const tryDispatchWhenDragging = tryDispatch.bind(null, "DRAGGING"); | ||
const tryDispatchWhenDragging = tryDispatch.bind(null, 'DRAGGING'); | ||
@@ -227,6 +227,6 @@ interface LiftArgs { | ||
lockAPI.release(); | ||
phase = "COMPLETED"; | ||
phase = 'COMPLETED'; | ||
} | ||
// Double lift = bad | ||
if (phase !== "PRE_DRAG") { | ||
if (phase !== 'PRE_DRAG') { | ||
completed(); | ||
@@ -239,7 +239,7 @@ invariant(false, `Cannot lift in phase ${phase}`); | ||
// We are now in the DRAGGING phase | ||
phase = "DRAGGING"; | ||
phase = 'DRAGGING'; | ||
function finish( | ||
reason: "CANCEL" | "DROP", | ||
options: StopDragOptions = { shouldBlockNextClick: false } | ||
reason: 'CANCEL' | 'DROP', | ||
options: StopDragOptions = { shouldBlockNextClick: false }, | ||
) { | ||
@@ -252,3 +252,3 @@ args.cleanup(); | ||
{ | ||
eventName: "click", | ||
eventName: 'click', | ||
fn: preventDefault, | ||
@@ -277,3 +277,3 @@ options: { | ||
isActive({ | ||
expected: "DRAGGING", | ||
expected: 'DRAGGING', | ||
phase, | ||
@@ -285,4 +285,4 @@ isLockActive, | ||
shouldRespectForcePress: getShouldRespectForcePress, | ||
drop: (options?: StopDragOptions) => finish("DROP", options), | ||
cancel: (options?: StopDragOptions) => finish("CANCEL", options), | ||
drop: (options?: StopDragOptions) => finish('DROP', options), | ||
cancel: (options?: StopDragOptions) => finish('CANCEL', options), | ||
...args.actions, | ||
@@ -301,3 +301,3 @@ }; | ||
clientSelection, | ||
movementMode: "FLUID", | ||
movementMode: 'FLUID', | ||
}, | ||
@@ -326,3 +326,3 @@ cleanup: () => move.cancel(), | ||
clientSelection: getBorderBoxCenterPosition(el as HTMLElement), | ||
movementMode: "SNAP", | ||
movementMode: 'SNAP', | ||
}, | ||
@@ -336,3 +336,3 @@ cleanup: noop, | ||
const shouldRelease: boolean = isActive({ | ||
expected: "PRE_DRAG", | ||
expected: 'PRE_DRAG', | ||
phase, | ||
@@ -351,3 +351,3 @@ isLockActive, | ||
isActive({ | ||
expected: "PRE_DRAG", | ||
expected: 'PRE_DRAG', | ||
phase, | ||
@@ -401,3 +401,3 @@ isLockActive, | ||
}, | ||
[lockAPI] | ||
[lockAPI], | ||
); | ||
@@ -418,3 +418,3 @@ | ||
}, | ||
[lockAPI, store, tryAbandonLock] | ||
[lockAPI, store, tryAbandonLock], | ||
); | ||
@@ -436,3 +436,3 @@ | ||
}, | ||
[lockAPI, registry, store] | ||
[lockAPI, registry, store], | ||
); | ||
@@ -444,3 +444,3 @@ | ||
forceStop?: () => void, | ||
options?: TryGetLockOptions | ||
options?: TryGetLockOptions, | ||
): PreDragActions | null => | ||
@@ -457,3 +457,3 @@ tryStart({ | ||
}), | ||
[contextId, lockAPI, registry, store] | ||
[contextId, lockAPI, registry, store], | ||
); | ||
@@ -464,3 +464,3 @@ | ||
findClosestDraggableIdFromEvent(contextId, event), | ||
[contextId] | ||
[contextId], | ||
); | ||
@@ -473,3 +473,3 @@ | ||
}, | ||
[registry.draggable] | ||
[registry.draggable], | ||
); | ||
@@ -485,7 +485,7 @@ | ||
if (store.getState().phase !== "IDLE") { | ||
if (store.getState().phase !== 'IDLE') { | ||
store.dispatch(flush()); | ||
} | ||
}, | ||
[lockAPI, store] | ||
[lockAPI, store], | ||
); | ||
@@ -510,3 +510,3 @@ const isLockClaimed = useCallback(() => lockAPI.isClaimed(), [lockAPI]); | ||
isLockClaimed, | ||
] | ||
], | ||
); | ||
@@ -513,0 +513,0 @@ |
/* eslint-disable react-hooks/rules-of-hooks */ | ||
import { invariant } from "../../invariant"; | ||
import type { Sensor } from "../../types"; | ||
import usePreviousRef from "../use-previous-ref"; | ||
import useDevSetupWarning from "../use-dev-setup-warning"; | ||
import useDev from "../use-dev"; | ||
import { invariant } from '../../invariant'; | ||
import type { Sensor } from '../../types'; | ||
import usePreviousRef from '../use-previous-ref'; | ||
import useDevSetupWarning from '../use-dev-setup-warning'; | ||
import useDev from '../use-dev'; | ||
@@ -15,3 +15,3 @@ export default function useValidateSensorHooks(sensorHooks: Sensor[]) { | ||
previousRef.current.length === sensorHooks.length, | ||
"Cannot change the amount of sensor hooks after mounting" | ||
'Cannot change the amount of sensor hooks after mounting', | ||
); | ||
@@ -18,0 +18,0 @@ }); |
@@ -1,4 +0,4 @@ | ||
import type { ContextId } from "../../types"; | ||
import { transitions } from "../../animation"; | ||
import * as attributes from "../data-attributes"; | ||
import type { ContextId } from '../../types'; | ||
import { transitions } from '../../animation'; | ||
import * as attributes from '../data-attributes'; | ||
@@ -27,3 +27,3 @@ export interface Styles { | ||
const getStyles = (rules: Rule[], property: keyof Rule["styles"]): string => | ||
const getStyles = (rules: Rule[], property: keyof Rule['styles']): string => | ||
rules | ||
@@ -33,3 +33,3 @@ .map((rule: Rule): string => { | ||
if (!value) { | ||
return ""; | ||
return ''; | ||
} | ||
@@ -39,5 +39,5 @@ | ||
}) | ||
.join(" "); | ||
.join(' '); | ||
const noPointerEvents = "pointer-events: none;"; | ||
const noPointerEvents = 'pointer-events: none;'; | ||
@@ -149,3 +149,3 @@ export default (contextId: ContextId): Styles => { | ||
const body: Rule = { | ||
selector: "body", | ||
selector: 'body', | ||
styles: { | ||
@@ -167,8 +167,8 @@ dragging: ` | ||
return { | ||
always: getStyles(rules, "always"), | ||
resting: getStyles(rules, "resting"), | ||
dragging: getStyles(rules, "dragging"), | ||
dropAnimating: getStyles(rules, "dropAnimating"), | ||
userCancel: getStyles(rules, "userCancel"), | ||
always: getStyles(rules, 'always'), | ||
resting: getStyles(rules, 'resting'), | ||
dragging: getStyles(rules, 'dragging'), | ||
dropAnimating: getStyles(rules, 'dropAnimating'), | ||
userCancel: getStyles(rules, 'userCancel'), | ||
}; | ||
}; |
@@ -1,1 +0,1 @@ | ||
export { default } from "./use-style-marshal"; | ||
export { default } from './use-style-marshal'; |
@@ -1,2 +0,2 @@ | ||
import type { DropReason } from "../../types"; | ||
import type { DropReason } from '../../types'; | ||
@@ -3,0 +3,0 @@ export interface StyleMarshal { |
@@ -1,15 +0,15 @@ | ||
import { useRef, MutableRefObject } from "react"; | ||
import memoizeOne from "memoize-one"; | ||
import { useMemo, useCallback } from "use-memo-one"; | ||
import { invariant } from "../../invariant"; | ||
import type { StyleMarshal } from "./style-marshal-types"; | ||
import type { ContextId, DropReason } from "../../types"; | ||
import getStyles from "./get-styles"; | ||
import type { Styles } from "./get-styles"; | ||
import { prefix } from "../data-attributes"; | ||
import useLayoutEffect from "../use-isomorphic-layout-effect"; | ||
import { useRef, MutableRefObject } from 'react'; | ||
import memoizeOne from 'memoize-one'; | ||
import { useMemo, useCallback } from 'use-memo-one'; | ||
import { invariant } from '../../invariant'; | ||
import type { StyleMarshal } from './style-marshal-types'; | ||
import type { ContextId, DropReason } from '../../types'; | ||
import getStyles from './get-styles'; | ||
import type { Styles } from './get-styles'; | ||
import { prefix } from '../data-attributes'; | ||
import useLayoutEffect from '../use-isomorphic-layout-effect'; | ||
const getHead = (): HTMLHeadElement => { | ||
const head: HTMLHeadElement | null = document.querySelector("head"); | ||
invariant(head, "Cannot find the head to append a style to"); | ||
const head: HTMLHeadElement | null = document.querySelector('head'); | ||
invariant(head, 'Cannot find the head to append a style to'); | ||
return head; | ||
@@ -19,7 +19,7 @@ }; | ||
const createStyleEl = (nonce?: string): HTMLStyleElement => { | ||
const el: HTMLStyleElement = document.createElement("style"); | ||
const el: HTMLStyleElement = document.createElement('style'); | ||
if (nonce) { | ||
el.setAttribute("nonce", nonce); | ||
el.setAttribute('nonce', nonce); | ||
} | ||
el.type = "text/css"; | ||
el.type = 'text/css'; | ||
return el; | ||
@@ -38,6 +38,6 @@ }; | ||
const el: HTMLStyleElement | null = dynamicRef.current; | ||
invariant(el, "Cannot set dynamic style element if it is not set"); | ||
invariant(el, 'Cannot set dynamic style element if it is not set'); | ||
el.textContent = proposed; | ||
}), | ||
[] | ||
[], | ||
); | ||
@@ -47,3 +47,3 @@ | ||
const el: HTMLStyleElement | null = alwaysRef.current; | ||
invariant(el, "Cannot set dynamic style element if it is not set"); | ||
invariant(el, 'Cannot set dynamic style element if it is not set'); | ||
el.textContent = proposed; | ||
@@ -56,3 +56,3 @@ }, []); | ||
!alwaysRef.current && !dynamicRef.current, | ||
"style elements already mounted" | ||
'style elements already mounted', | ||
); | ||
@@ -82,3 +82,3 @@ | ||
const current: HTMLStyleElement | null = ref.current; | ||
invariant(current, "Cannot unmount ref as it is not set"); | ||
invariant(current, 'Cannot unmount ref as it is not set'); | ||
getHead().removeChild(current); | ||
@@ -102,7 +102,7 @@ ref.current = null; | ||
() => setDynamicStyle(styles.dragging), | ||
[setDynamicStyle, styles.dragging] | ||
[setDynamicStyle, styles.dragging], | ||
); | ||
const dropping = useCallback( | ||
(reason: DropReason) => { | ||
if (reason === "DROP") { | ||
if (reason === 'DROP') { | ||
setDynamicStyle(styles.dropAnimating); | ||
@@ -113,3 +113,3 @@ return; | ||
}, | ||
[setDynamicStyle, styles.dropAnimating, styles.userCancel] | ||
[setDynamicStyle, styles.dropAnimating, styles.userCancel], | ||
); | ||
@@ -130,3 +130,3 @@ const resting = useCallback(() => { | ||
}), | ||
[dragging, dropping, resting] | ||
[dragging, dropping, resting], | ||
); | ||
@@ -133,0 +133,0 @@ |
@@ -1,3 +0,3 @@ | ||
import { useMemo } from "use-memo-one"; | ||
import type { Id } from "../types"; | ||
import { useMemo } from 'use-memo-one'; | ||
import type { Id } from '../types'; | ||
@@ -10,3 +10,3 @@ let count = 0; | ||
const defaults: Options = { separator: "::" }; | ||
const defaults: Options = { separator: '::' }; | ||
@@ -19,8 +19,8 @@ export function reset() { | ||
prefix: string, | ||
options: Options = defaults | ||
options: Options = defaults, | ||
): Id { | ||
return useMemo( | ||
() => `${prefix}${options.separator}${count++}`, | ||
[options.separator, prefix] | ||
[options.separator, prefix], | ||
); | ||
} |
// https://allyjs.io/tutorials/hiding-elements.html |
// Element is visually hidden but is readable by screen readers |
const visuallyHidden: any = { |
position: "absolute", |
width: "1px", |
height: "1px", |
margin: "-1px", |
border: "0", |
padding: "0", |
overflow: "hidden", |
clip: "rect(0 0 0 0)", |
"clip-path": "inset(100%)", |
position: 'absolute', |
width: '1px', |
height: '1px', |
margin: '-1px', |
border: '0', |
padding: '0', |
overflow: 'hidden', |
clip: 'rect(0 0 0 0)', |
'clip-path': 'inset(100%)', |
}; |
export default visuallyHidden; |
@@ -1,4 +0,4 @@ | ||
import type { Position } from "css-box-model"; | ||
import getMaxScroll from "../../state/get-max-scroll"; | ||
import getDocumentElement from "../get-document-element"; | ||
import type { Position } from 'css-box-model'; | ||
import getMaxScroll from '../../state/get-max-scroll'; | ||
import getDocumentElement from '../get-document-element'; | ||
@@ -5,0 +5,0 @@ export default (): Position => { |
@@ -1,8 +0,8 @@ | ||
import { getRect } from "css-box-model"; | ||
import type { Rect, Position } from "css-box-model"; | ||
import type { Viewport } from "../../types"; | ||
import { origin } from "../../state/position"; | ||
import getWindowScroll from "./get-window-scroll"; | ||
import getMaxWindowScroll from "./get-max-window-scroll"; | ||
import getDocumentElement from "../get-document-element"; | ||
import { getRect } from 'css-box-model'; | ||
import type { Rect, Position } from 'css-box-model'; | ||
import type { Viewport } from '../../types'; | ||
import { origin } from '../../state/position'; | ||
import getWindowScroll from './get-window-scroll'; | ||
import getMaxWindowScroll from './get-max-window-scroll'; | ||
import getDocumentElement from '../get-document-element'; | ||
@@ -9,0 +9,0 @@ export default (): Viewport => { |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
@@ -3,0 +3,0 @@ // The browsers update document.documentElement.scrollTop and window.pageYOffset |
@@ -1,2 +0,2 @@ | ||
import type { Position } from "css-box-model"; | ||
import type { Position } from 'css-box-model'; | ||
@@ -3,0 +3,0 @@ // Not guarenteed to scroll by the entire amount |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
1299669
38043
0
167
123
240
1