diff --git a/package-lock.json b/package-lock.json index 2f88b333..cd3c2532 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4303,9 +4303,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001441", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz", - "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==", + "version": "1.0.30001469", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz", + "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==", "dev": true, "funding": [ { @@ -16980,9 +16980,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001441", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz", - "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==", + "version": "1.0.30001469", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz", + "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==", "dev": true }, "caseless": { diff --git a/package.json b/package.json index 2207908a..9d8fe7bf 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "umd": "./plugins/selection/dist/selection.umd.js", "import": "./plugins/selection/dist/selection.mjs", "require": "./plugins/selection/dist/selection.js" - }, + }, "./package.json": "./package.json", "./": "./" }, diff --git a/plugins/selection/index.ts b/plugins/selection/index.ts index 26a0d17c..5100ac13 100644 --- a/plugins/selection/index.ts +++ b/plugins/selection/index.ts @@ -1,4 +1,13 @@ -import { RowSelection } from './src/rowSelection/rowSelection'; +import { + RowSelection, + RowSelectionSingle, + RowSelectionMultiple, +} from './src/rowSelection/rowSelection'; import * as RowSelectionActions from './src/rowSelection/actions'; -export { RowSelection, RowSelectionActions }; +export { + RowSelection, + RowSelectionSingle, + RowSelectionMultiple, + RowSelectionActions, +}; diff --git a/plugins/selection/package-lock.json b/plugins/selection/package-lock.json index 26eb0ab8..08c8e0c9 100644 --- a/plugins/selection/package-lock.json +++ b/plugins/selection/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "selection", "version": "4.0.0", "license": "MIT", "dependencies": { @@ -12,54 +13,53 @@ } }, "../..": { - "version": "5.0.2", + "version": "6.0.6", "license": "MIT", "dependencies": { - "preact": "^10.5.12", - "tslib": "^2.0.1" + "preact": "^10.11.3" }, "devDependencies": { - "@types/enzyme": "^3.10.5", - "@types/jest": "^26.0.0", - "@types/jest-axe": "^3.2.2", - "@types/node": "^15.3.0", - "@typescript-eslint/eslint-plugin": "~4.28.0", - "@typescript-eslint/parser": "~4.28.0", - "autoprefixer": "^9.8.0", - "axe-core": "^4.0.0", + "@types/enzyme": "^3.10.12", + "@types/jest": "^29.2.4", + "@types/jest-axe": "^3.5.5", + "@types/node": "^18.11.17", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "autoprefixer": "^10.4.8", + "axe-core": "^4.4.2", "check-export-map": "^1.1.1", "cssnano": "^5.0.5", - "cypress": "^7.4.0", + "cypress": "^8.1.0", "cypress-visual-regression": "^1.5.7", "enzyme": "^3.11.0", - "enzyme-adapter-preact-pure": "^3.0.0", - "eslint": "~7.29.0", - "eslint-config-prettier": "^6.11.0", - "eslint-plugin-jest": "~24.3.2", + "enzyme-adapter-preact-pure": "^4.0.1", + "eslint": "^8.18.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-jest": "~26.8.7", "identity-obj-proxy": "^3.0.0", - "jest": "~27.0.6", - "jest-axe": "^5.0.1", - "jest-extended": "^0.11.5", - "jsdom": "^16.2.2", + "jest": "^29.3.1", + "jest-axe": "^6.0.0", + "jest-extended": "^3.2.0", + "jsdom": "^19.0.0", "jsdom-global": "^3.0.2", - "lerna-changelog": "^1.0.1", - "microbundle": "^0.13.0", - "node-sass": "^6.0.1", - "node-sass-chokidar": "^1.5.0", + "lerna-changelog": "^2.1.0", + "microbundle": "^0.15.1", "npm-run-all": "^4.1.5", - "postcss": "^8.3.0", - "postcss-cli": "^8.3.1", - "postcss-nested": "^5.0.5", - "postcss-scss": "^4.0.0", - "postcss-sort-media-queries": "^3.10.11", - "prettier": "~2.3.1", + "postcss": "^8.4.16", + "postcss-cli": "^9.1.0", + "postcss-nested": "^5.0.6", + "postcss-scss": "^4.0.4", + "postcss-sort-media-queries": "^4.1.0", + "prettier": "~2.7.1", "rimraf": "~3.0.2", - "source-map-loader": "^2.0.1", + "sass": "^1.54.5", + "source-map-loader": "^4.0.0", "start-server-and-test": "^1.12.3", - "ts-jest": "^27.0.3", - "ts-loader": "^9.1.1", - "tsutils": "~3.21.0", - "typescript": "^4.2.4" + "ts-jest": "^29.0.3", + "ts-loader": "^9.4.2", + "tslib": "^2.4.1", + "tsutils": "^3.21.0", + "typescript": "^4.9.4" } }, "node_modules/gridjs": { @@ -71,49 +71,48 @@ "gridjs": { "version": "file:../..", "requires": { - "@types/enzyme": "^3.10.5", - "@types/jest": "^26.0.0", - "@types/jest-axe": "^3.2.2", - "@types/node": "^15.3.0", - "@typescript-eslint/eslint-plugin": "~4.28.0", - "@typescript-eslint/parser": "~4.28.0", - "autoprefixer": "^9.8.0", - "axe-core": "^4.0.0", + "@types/enzyme": "^3.10.12", + "@types/jest": "^29.2.4", + "@types/jest-axe": "^3.5.5", + "@types/node": "^18.11.17", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "autoprefixer": "^10.4.8", + "axe-core": "^4.4.2", "check-export-map": "^1.1.1", "cssnano": "^5.0.5", - "cypress": "^7.4.0", + "cypress": "^8.1.0", "cypress-visual-regression": "^1.5.7", "enzyme": "^3.11.0", - "enzyme-adapter-preact-pure": "^3.0.0", - "eslint": "~7.29.0", - "eslint-config-prettier": "^6.11.0", - "eslint-plugin-jest": "~24.3.2", + "enzyme-adapter-preact-pure": "^4.0.1", + "eslint": "^8.18.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-jest": "~26.8.7", "identity-obj-proxy": "^3.0.0", - "jest": "~27.0.6", - "jest-axe": "^5.0.1", - "jest-extended": "^0.11.5", - "jsdom": "^16.2.2", + "jest": "^29.3.1", + "jest-axe": "^6.0.0", + "jest-extended": "^3.2.0", + "jsdom": "^19.0.0", "jsdom-global": "^3.0.2", - "lerna-changelog": "^1.0.1", - "microbundle": "^0.13.0", - "node-sass": "^6.0.1", - "node-sass-chokidar": "^1.5.0", + "lerna-changelog": "^2.1.0", + "microbundle": "^0.15.1", "npm-run-all": "^4.1.5", - "postcss": "^8.3.0", - "postcss-cli": "^8.3.1", - "postcss-nested": "^5.0.5", - "postcss-scss": "^4.0.0", - "postcss-sort-media-queries": "^3.10.11", - "preact": "^10.5.12", - "prettier": "~2.3.1", + "postcss": "^8.4.16", + "postcss-cli": "^9.1.0", + "postcss-nested": "^5.0.6", + "postcss-scss": "^4.0.4", + "postcss-sort-media-queries": "^4.1.0", + "preact": "^10.11.3", + "prettier": "~2.7.1", "rimraf": "~3.0.2", - "source-map-loader": "^2.0.1", + "sass": "^1.54.5", + "source-map-loader": "^4.0.0", "start-server-and-test": "^1.12.3", - "ts-jest": "^27.0.3", - "ts-loader": "^9.1.1", - "tslib": "^2.0.1", - "tsutils": "~3.21.0", - "typescript": "^4.2.4" + "ts-jest": "^29.0.3", + "ts-loader": "^9.4.2", + "tslib": "^2.4.1", + "tsutils": "^3.21.0", + "typescript": "^4.9.4" } } } diff --git a/plugins/selection/package.json b/plugins/selection/package.json index b47072b7..5c75753a 100644 --- a/plugins/selection/package.json +++ b/plugins/selection/package.json @@ -1,6 +1,6 @@ { "name": "selection", - "version": "4.0.0", + "version": "5.0.0", "private": true, "description": "Adds row and cell selection to Grid.js", "author": "Afshin Mehrabani ", diff --git a/plugins/selection/src/rowSelection/actions.ts b/plugins/selection/src/rowSelection/actions.ts index de8b3944..13997c71 100644 --- a/plugins/selection/src/rowSelection/actions.ts +++ b/plugins/selection/src/rowSelection/actions.ts @@ -1,16 +1,26 @@ -export const CheckRow = (rowId: string) => (state) => { - const rowIds = state.rowSelection?.rowIds || []; +export const CheckRow = + (rowId: string, singleSelection: boolean) => (state) => { + const rowIds = state.rowSelection?.rowIds || []; - // rowId already exists - if (rowIds.indexOf(rowId) > -1) return state; + // rowId already exists + if (rowIds.indexOf(rowId) > -1) return state; - return { - ...state, - rowSelection: { - rowIds: [rowId, ...rowIds], - }, + if (singleSelection) { + return { + ...state, + rowSelection: { + rowIds: [rowId], + }, + }; + } + + return { + ...state, + rowSelection: { + rowIds: [rowId, ...rowIds], + }, + }; }; -}; export const UncheckRow = (rowId: string) => (state) => { const rowIds = state.rowSelection?.rowIds || []; diff --git a/plugins/selection/src/rowSelection/rowSelection.tsx b/plugins/selection/src/rowSelection/rowSelection.tsx index 2fa67c9d..6cfe40cf 100644 --- a/plugins/selection/src/rowSelection/rowSelection.tsx +++ b/plugins/selection/src/rowSelection/rowSelection.tsx @@ -10,7 +10,22 @@ interface RowSelectionProps { cell?: Cell; } +export function RowSelectionSingle(props: RowSelectionProps) { + return RowSelectionCore(props, true); +} + +export function RowSelectionMultiple(props: RowSelectionProps) { + return RowSelectionCore(props, false); +} + export function RowSelection(props: RowSelectionProps) { + return RowSelectionCore(props, false); +} + +export function RowSelectionCore( + props: RowSelectionProps, + singleSelect: boolean = false, +) { const { dispatch } = useStore(); const state = useSelector((state) => state.rowSelection); const [isChecked, setIsChecked] = useState(false); @@ -22,6 +37,8 @@ export function RowSelection(props: RowSelectionProps) { this.base.parentElement && (this.base.parentElement.parentElement as Element); + const isSingleSelect: boolean = singleSelect; + useEffect(() => { // store/dispatcher is required only if we are rendering a TD (not a TH) if (props.cell?.data && isDataCell(props)) { @@ -31,14 +48,15 @@ export function RowSelection(props: RowSelectionProps) { }, []); useEffect(() => { - const parent = getParentTR(); - - if (!parent) return; - const rowIds = state?.rowIds || []; const isChecked = rowIds.indexOf(props.row.id) > -1; + setIsChecked(isChecked); + const parent = getParentTR(); + + if (!parent) return; + if (isChecked) { parent.classList.add(selectedClassName); } else { @@ -47,7 +65,7 @@ export function RowSelection(props: RowSelectionProps) { }, [state]); const check = () => { - dispatch(actions.CheckRow(props.row.id)); + dispatch(actions.CheckRow(props.row.id, isSingleSelect)); props.cell?.update(true); }; diff --git a/plugins/selection/tests/rowSelection/actions.test.ts b/plugins/selection/tests/rowSelection/actions.test.ts index 9d3d7b85..a08f3474 100644 --- a/plugins/selection/tests/rowSelection/actions.test.ts +++ b/plugins/selection/tests/rowSelection/actions.test.ts @@ -2,7 +2,7 @@ import * as Actions from '../../src/rowSelection/actions'; describe('Actions', () => { it('should trigger CHECK', () => { - const state = Actions.CheckRow('42')({}); + const state = Actions.CheckRow('42', false)({}); expect(state).toStrictEqual({ rowSelection: { @@ -12,7 +12,10 @@ describe('Actions', () => { }); it('should trigger CHECK when rowIds already exists', () => { - const state = Actions.CheckRow('42')({ + const state = Actions.CheckRow( + '42', + false, + )({ rowSelection: { rowIds: ['24'], }, @@ -75,8 +78,8 @@ describe('Actions', () => { it('should CHECK and UNCHECK', () => { let state = {}; - state = Actions.CheckRow('42')(state); - state = Actions.CheckRow('24')(state); + state = Actions.CheckRow('42', false)(state); + state = Actions.CheckRow('24', false)(state); state = Actions.UncheckRow('42')(state); expect(state).toStrictEqual({ @@ -85,4 +88,15 @@ describe('Actions', () => { }, }); }); + + it('should CHECK (SINGLE SELECT)', () => { + let state = {}; + state = Actions.CheckRow('42', true)(state); + state = Actions.CheckRow('24', true)(state); + expect(state).toStrictEqual({ + rowSelection: { + rowIds: ['24'], + }, + }); + }); }); diff --git a/tests/dev-server/package-lock.json b/tests/dev-server/package-lock.json index e8d5365d..8aa7a5bc 100644 --- a/tests/dev-server/package-lock.json +++ b/tests/dev-server/package-lock.json @@ -19,7 +19,7 @@ } }, "../..": { - "version": "6.0.0", + "version": "6.0.6", "license": "MIT", "dependencies": { "preact": "^10.11.3"