From f99131b1391698bf9c48fea692c2e43331fc8fd6 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Fri, 14 Oct 2022 14:56:54 -0700 Subject: [PATCH 1/3] Add custom cursor icons back --- .../@adobe/spectrum-css-temp/components/table/index.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css index bf26593cc3f..744c98d132f 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/index.css +++ b/packages/@adobe/spectrum-css-temp/components/table/index.css @@ -482,13 +482,13 @@ svg.spectrum-Table-sortedIcon { .resize-ew *, .spectrum-Table-columnResizer--ewresize { - cursor: ew-resize !important; + cursor: url('data-url:./cursors/Cur_MoveHorizontal_9_9.svg'), ew-resize !important; } .resize-e *, .spectrum-Table-columnResizer--eresize { - cursor: e-resize !important; + cursor: url('data-url:./cursors/Cur_MoveToRight_9_9.svg'), e-resize !important; } .resize-w *, .spectrum-Table-columnResizer--wresize { - cursor: w-resize !important; + cursor: url('data-url:./cursors/Cur_MoveToLeft_9_9.svg'), w-resize !important; } From 3c027325d28a751bf9085e66e8d7d81badfdc45f Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 22 Mar 2023 15:12:02 -0700 Subject: [PATCH 2/3] Fix cursor loading --- .parcelrc | 1 + .../table/cursors/Cur_MoveHorizontal_9_9.svg | 14 ----- .../components/table/index.css | 13 ---- .../@react-spectrum/table/src/Resizer.tsx | 61 ++++++++++--------- .../src/cursors/Cur_MoveHorizontal_9_9.svg | 7 +++ .../table/src}/cursors/Cur_MoveToLeft_9_9.svg | 4 +- .../src}/cursors/Cur_MoveToRight_9_9.svg | 4 +- packages/@react-spectrum/table/src/table.css | 13 ++++ 8 files changed, 56 insertions(+), 61 deletions(-) delete mode 100644 packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveHorizontal_9_9.svg create mode 100644 packages/@react-spectrum/table/src/cursors/Cur_MoveHorizontal_9_9.svg rename packages/{@adobe/spectrum-css-temp/components/table => @react-spectrum/table/src}/cursors/Cur_MoveToLeft_9_9.svg (90%) rename packages/{@adobe/spectrum-css-temp/components/table => @react-spectrum/table/src}/cursors/Cur_MoveToRight_9_9.svg (90%) diff --git a/.parcelrc b/.parcelrc index bdbedb1c86a..832d239ba7d 100644 --- a/.parcelrc +++ b/.parcelrc @@ -6,6 +6,7 @@ "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"], "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"], "packages/*/*/intl/*.json": ["parcel-transformer-intl"], + "data-url:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"], "*.{md,mdx}": ["parcel-transformer-mdx-docs"], "*.svg": ["@parcel/transformer-svg-react"], "*.css": ["...", "parcel-transformer-css-env"], diff --git a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveHorizontal_9_9.svg b/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveHorizontal_9_9.svg deleted file mode 100644 index b7beacd3aa8..00000000000 --- a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveHorizontal_9_9.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css index 610fbcf9b3c..b906e0cdde1 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/index.css +++ b/packages/@adobe/spectrum-css-temp/components/table/index.css @@ -496,19 +496,6 @@ svg.spectrum-Table-sortedIcon { } } -.resize-ew, -.spectrum-Table-columnResizer--ewresize { - cursor: url('data-url:./cursors/Cur_MoveHorizontal_9_9.svg'), ew-resize !important; -} -.resize-e, -.spectrum-Table-columnResizer--eresize { - cursor: url('data-url:./cursors/Cur_MoveToRight_9_9.svg'), e-resize !important; -} -.resize-w, -.spectrum-Table-columnResizer--wresize { - cursor: url('data-url:./cursors/Cur_MoveToLeft_9_9.svg'), w-resize !important; -} - @media (forced-colors: active) { .spectrum-Table-row { &:focus-ring { diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx index f89565837de..39acdb09c91 100644 --- a/packages/@react-spectrum/table/src/Resizer.tsx +++ b/packages/@react-spectrum/table/src/Resizer.tsx @@ -1,19 +1,20 @@ /* eslint-disable jsx-a11y/role-supports-aria-props */ -import {classNames} from '@react-spectrum/utils'; -import {ColumnSize} from '@react-types/table'; -import {FocusRing} from '@react-aria/focus'; -import {getInteractionModality} from '@react-aria/interactions'; -import {GridNode} from '@react-types/grid'; +import { classNames } from '@react-spectrum/utils'; +import { ColumnSize } from '@react-types/table'; +import { FocusRing } from '@react-aria/focus'; +import { getInteractionModality } from '@react-aria/interactions'; +import { GridNode } from '@react-types/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; -import {mergeProps} from '@react-aria/utils'; -import React, {Key, RefObject, useEffect, useState} from 'react'; +import { mergeProps } from '@react-aria/utils'; +import React, { Key, RefObject, useEffect, useState } from 'react'; import ReactDOM from 'react-dom'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; -import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; -import {useTableColumnResize} from '@react-aria/table'; -import {useTableContext, useVirtualizerContext} from './TableView'; -import {VisuallyHidden} from '@react-aria/visually-hidden'; +import rspStyles from './table.css'; +import { useLocale, useLocalizedStringFormatter } from '@react-aria/i18n'; +import { useTableColumnResize } from '@react-aria/table'; +import { useTableContext, useVirtualizerContext } from './TableView'; +import { VisuallyHidden } from '@react-aria/visually-hidden'; interface ResizerProps { column: GridNode, @@ -25,20 +26,20 @@ interface ResizerProps { } let CURSOR_CLASSES = { - w: classNames(styles, 'resize-w'), - e: classNames(styles, 'resize-e'), - ew: classNames(styles, 'resize-ew') + w: classNames(rspStyles, 'resize-w'), + e: classNames(rspStyles, 'resize-e'), + ew: classNames(rspStyles, 'resize-ew') }; function Resizer(props: ResizerProps, ref: RefObject) { - let {column, showResizer} = props; - let {isEmpty, layout} = useTableContext(); + let { column, showResizer } = props; + let { isEmpty, layout } = useTableContext(); // Virtualizer re-renders, but these components are all cached // in order to get around that and cause a rerender here, we use context // but we don't actually need any value, they are available on the layout object useVirtualizerContext(); let stringFormatter = useLocalizedStringFormatter(intlMessages); - let {direction} = useLocale(); + let { direction } = useLocale(); let [directionClass, setDirectionClass] = React.useState(null); let [isPointerDown, setIsPointerDown] = useState(false); @@ -53,15 +54,15 @@ function Resizer(props: ResizerProps, ref: RefObject) { setIsPointerDown(false); } }; - document.addEventListener('pointerdown', setDown, {capture: true}); - document.addEventListener('pointerup', setUp, {capture: true}); + document.addEventListener('pointerdown', setDown, { capture: true }); + document.addEventListener('pointerup', setUp, { capture: true }); return () => { - document.removeEventListener('pointerdown', setDown, {capture: true}); - document.removeEventListener('pointerup', setUp, {capture: true}); + document.removeEventListener('pointerdown', setDown, { capture: true }); + document.removeEventListener('pointerup', setUp, { capture: true }); }; }, []); - let {inputProps, resizerProps} = useTableColumnResize( + let { inputProps, resizerProps } = useTableColumnResize( mergeProps(props, { label: stringFormatter.format('columnResizer'), isDisabled: isEmpty, @@ -116,11 +117,11 @@ function Resizer(props: ResizerProps, ref: RefObject) { className={classNames( styles, 'spectrum-Table-columnResizer', - { - 'spectrum-Table-columnResizer--ewresize': !(isEResizable && isWResizable), - 'spectrum-Table-columnResizer--eresize': direction === 'rtl' ? isWResizable : isEResizable, - 'spectrum-Table-columnResizer--wresize': direction === 'rtl' ? isEResizable : isWResizable - } + classNames(rspStyles, { + 'react-spectrum-Table-columnResizer--ewresize': !(isEResizable && isWResizable), + 'react-spectrum-Table-columnResizer--eresize': direction === 'rtl' ? isWResizable : isEResizable, + 'react-spectrum-Table-columnResizer--wresize': direction === 'rtl' ? isEResizable : isWResizable + }) )} {...resizerProps}> @@ -136,16 +137,16 @@ function Resizer(props: ResizerProps, ref: RefObject) { role="presentation" className={classNames(styles, 'spectrum-Table-columnResizerPlaceholder')} /> -
+
); } function CursorOverlay(props) { - let {show, children} = props; + let { show, children } = props; return show ? ReactDOM.createPortal(children, document.body) : null; } const _Resizer = React.forwardRef(Resizer); -export {_Resizer as Resizer}; +export { _Resizer as Resizer }; diff --git a/packages/@react-spectrum/table/src/cursors/Cur_MoveHorizontal_9_9.svg b/packages/@react-spectrum/table/src/cursors/Cur_MoveHorizontal_9_9.svg new file mode 100644 index 00000000000..17b2d4c7c19 --- /dev/null +++ b/packages/@react-spectrum/table/src/cursors/Cur_MoveHorizontal_9_9.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToLeft_9_9.svg b/packages/@react-spectrum/table/src/cursors/Cur_MoveToLeft_9_9.svg similarity index 90% rename from packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToLeft_9_9.svg rename to packages/@react-spectrum/table/src/cursors/Cur_MoveToLeft_9_9.svg index 2269dc0ed73..140d0339acd 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToLeft_9_9.svg +++ b/packages/@react-spectrum/table/src/cursors/Cur_MoveToLeft_9_9.svg @@ -1,5 +1,5 @@ - + - \ No newline at end of file + diff --git a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToRight_9_9.svg b/packages/@react-spectrum/table/src/cursors/Cur_MoveToRight_9_9.svg similarity index 90% rename from packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToRight_9_9.svg rename to packages/@react-spectrum/table/src/cursors/Cur_MoveToRight_9_9.svg index c606236adaf..4238d0c2993 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToRight_9_9.svg +++ b/packages/@react-spectrum/table/src/cursors/Cur_MoveToRight_9_9.svg @@ -1,5 +1,5 @@ - + - \ No newline at end of file + diff --git a/packages/@react-spectrum/table/src/table.css b/packages/@react-spectrum/table/src/table.css index ba27ed415f6..47a80cf81b6 100644 --- a/packages/@react-spectrum/table/src/table.css +++ b/packages/@react-spectrum/table/src/table.css @@ -49,3 +49,16 @@ width: 100%; height: 100%; } + +.resize-ew, +.react-spectrum-Table-columnResizer--ewresize { + cursor: url('data-url:./cursors/Cur_MoveHorizontal_9_9.svg'), ew-resize !important; +} +.resize-e, +.react-spectrum-Table-columnResizer--eresize { + cursor: url('data-url:./cursors/Cur_MoveToRight_9_9.svg'), e-resize !important; +} +.resize-w, +.react-spectrum-Table-columnResizer--wresize { + cursor: url('data-url:./cursors/Cur_MoveToLeft_9_9.svg'), w-resize !important; +} From 6adb313035c5062b0081b70db4700c6779aae8b6 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 22 Mar 2023 15:40:26 -0700 Subject: [PATCH 3/3] fix lint --- .../@react-spectrum/table/src/Resizer.tsx | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx index 39acdb09c91..535f4f6ed77 100644 --- a/packages/@react-spectrum/table/src/Resizer.tsx +++ b/packages/@react-spectrum/table/src/Resizer.tsx @@ -1,20 +1,20 @@ /* eslint-disable jsx-a11y/role-supports-aria-props */ -import { classNames } from '@react-spectrum/utils'; -import { ColumnSize } from '@react-types/table'; -import { FocusRing } from '@react-aria/focus'; -import { getInteractionModality } from '@react-aria/interactions'; -import { GridNode } from '@react-types/grid'; +import {classNames} from '@react-spectrum/utils'; +import {ColumnSize} from '@react-types/table'; +import {FocusRing} from '@react-aria/focus'; +import {getInteractionModality} from '@react-aria/interactions'; +import {GridNode} from '@react-types/grid'; // @ts-ignore import intlMessages from '../intl/*.json'; -import { mergeProps } from '@react-aria/utils'; -import React, { Key, RefObject, useEffect, useState } from 'react'; +import {mergeProps} from '@react-aria/utils'; +import React, {Key, RefObject, useEffect, useState} from 'react'; import ReactDOM from 'react-dom'; -import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; import rspStyles from './table.css'; -import { useLocale, useLocalizedStringFormatter } from '@react-aria/i18n'; -import { useTableColumnResize } from '@react-aria/table'; -import { useTableContext, useVirtualizerContext } from './TableView'; -import { VisuallyHidden } from '@react-aria/visually-hidden'; +import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; +import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; +import {useTableColumnResize} from '@react-aria/table'; +import {useTableContext, useVirtualizerContext} from './TableView'; +import {VisuallyHidden} from '@react-aria/visually-hidden'; interface ResizerProps { column: GridNode, @@ -32,14 +32,14 @@ let CURSOR_CLASSES = { }; function Resizer(props: ResizerProps, ref: RefObject) { - let { column, showResizer } = props; - let { isEmpty, layout } = useTableContext(); + let {column, showResizer} = props; + let {isEmpty, layout} = useTableContext(); // Virtualizer re-renders, but these components are all cached // in order to get around that and cause a rerender here, we use context // but we don't actually need any value, they are available on the layout object useVirtualizerContext(); let stringFormatter = useLocalizedStringFormatter(intlMessages); - let { direction } = useLocale(); + let {direction} = useLocale(); let [directionClass, setDirectionClass] = React.useState(null); let [isPointerDown, setIsPointerDown] = useState(false); @@ -54,15 +54,15 @@ function Resizer(props: ResizerProps, ref: RefObject) { setIsPointerDown(false); } }; - document.addEventListener('pointerdown', setDown, { capture: true }); - document.addEventListener('pointerup', setUp, { capture: true }); + document.addEventListener('pointerdown', setDown, {capture: true}); + document.addEventListener('pointerup', setUp, {capture: true}); return () => { - document.removeEventListener('pointerdown', setDown, { capture: true }); - document.removeEventListener('pointerup', setUp, { capture: true }); + document.removeEventListener('pointerdown', setDown, {capture: true}); + document.removeEventListener('pointerup', setUp, {capture: true}); }; }, []); - let { inputProps, resizerProps } = useTableColumnResize( + let {inputProps, resizerProps} = useTableColumnResize( mergeProps(props, { label: stringFormatter.format('columnResizer'), isDisabled: isEmpty, @@ -137,16 +137,16 @@ function Resizer(props: ResizerProps, ref: RefObject) { role="presentation" className={classNames(styles, 'spectrum-Table-columnResizerPlaceholder')} /> -
+
); } function CursorOverlay(props) { - let { show, children } = props; + let {show, children} = props; return show ? ReactDOM.createPortal(children, document.body) : null; } const _Resizer = React.forwardRef(Resizer); -export { _Resizer as Resizer }; +export {_Resizer as Resizer};