Skip to content

Commit

Permalink
WRQ-19328: Fix React 18.3 warnings in sandstone (#1613)
Browse files Browse the repository at this point in the history 
* Replace defaultProps with ES6 default parameters

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

* Fix minor issue

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

* Use Object.assign when implementing defaultProps

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

* Fix Sprite, Scroller, VirtualList  to show default prop values properly in sampler

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

* Update React to version 18.3.1

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

* Apply review

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

* Fix ColorPicker component to not use defaultProps

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

* Fix key spread warning

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)
  • Loading branch information
@juwonjeong
juwonjeong committed May 22, 2024
1 parent 32fd77f commit a12fc66
Show file tree
Hide file tree
Showing 35 changed files with 163 additions and 188 deletions.
7 changes: 1 addition & 6 deletions ColorPicker/ColorPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,11 +272,6 @@ const ColorPickerBase = kind({
text: PropTypes.string
},

defaultProps: {
disabled: false,
popupOpen: false
},

handlers: {
handleClosePopup: (ev, {onTogglePopup}) => {
onTogglePopup();
Expand All @@ -293,7 +288,7 @@ const ColorPickerBase = kind({
publicClassNames: true
},

render: ({color, colorHandler, css, disabled, handleClosePopup, handleOpenPopup, popupOpen, presetColors, text, ...rest}) => {
render: ({color, colorHandler, css, disabled = false, handleClosePopup, handleOpenPopup, popupOpen = false, presetColors, text, ...rest}) => {
delete rest.onTogglePopup;

const CloseIcon = useCallback((props) => <Icon {...props} css={css} />, [css]);
Expand Down
4 changes: 3 additions & 1 deletion Dropdown/DropdownList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,13 @@ const DropdownListBase = kind({
child = {children: child};
}
const data = child.children;
const {key, ...restChild} = {...child};

return (
<Item
{...rest}
{...child}
{...restChild}
key={key}
slotAfter={slotAfter}
data-selected={isSelected}
// eslint-disable-next-line react/jsx-no-bind
Expand Down
6 changes: 1 addition & 5 deletions PageViews/PageViewsRouter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function PageViewsRouter (Wrapped) {
children,
componentRef,
'data-spotlight-id': spotlightId,
index,
index = 0,
onTransition,
onWillTransition,
rtl,
Expand Down Expand Up @@ -125,10 +125,6 @@ function PageViewsRouter (Wrapped) {
rtl: PropTypes.bool
};

PageViewsProvider.defaultProps = {
index: 0
};

return PageViewsProvider;
}

Expand Down
51 changes: 28 additions & 23 deletions Scroller/Scroller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,29 @@ const nop = () => {};
const SpottableDiv = Spottable('div');
let scrollerId = 0;

const scrollerDefaultProps = {
'data-spotlight-container-disabled': false,
cbScrollTo: nop,
direction: 'both',
fadeOut: false,
focusableScrollbar: false,
horizontalScrollbar: 'auto',
noScrollByDrag: false,
noScrollByWheel: false,
onScroll: nop,
onScrollStart: nop,
onScrollStop: nop,
overscrollEffectOn: {
arrowKey: false,
drag: true,
pageKey: false,
track: false,
wheel: true
},
scrollMode: 'native',
verticalScrollbar: 'auto'
};

/**
* A Sandstone-styled Scroller, useScroll applied.
*
Expand All @@ -53,7 +76,10 @@ let scrollerId = 0;
* @ui
* @public
*/
let Scroller = ({'aria-label': ariaLabel, hoverToScroll, ...rest}) => {
let Scroller = (props) => {
const scrollerProps = Object.assign({}, scrollerDefaultProps, props);
const {'aria-label': ariaLabel, hoverToScroll, ...rest} = scrollerProps;

const id = `scroller_${++scrollerId}_content`;

// Hooks
Expand Down Expand Up @@ -452,28 +478,7 @@ Scroller = Skinnable(
)
);

Scroller.defaultProps = {
'data-spotlight-container-disabled': false,
cbScrollTo: nop,
direction: 'both',
fadeOut: false,
focusableScrollbar: false,
horizontalScrollbar: 'auto',
noScrollByDrag: false,
noScrollByWheel: false,
onScroll: nop,
onScrollStart: nop,
onScrollStop: nop,
overscrollEffectOn: {
arrowKey: false,
drag: true,
pageKey: false,
track: false,
wheel: true
},
scrollMode: 'native',
verticalScrollbar: 'auto'
};
Scroller.defaultPropValues = scrollerDefaultProps;

export default Scroller;
export {
Expand Down
35 changes: 18 additions & 17 deletions Slider/Slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,17 @@ import {

import componentCss from './Slider.module.less';

const sliderDefaultProps = {
activateOnSelect: false,
active: false,
disabled: false,
keyFrequency: [1],
max: 100,
min: 0,
step: 1,
wheelInterval: 0
};

/**
* Range-selection input component.
*
Expand All @@ -59,20 +70,21 @@ import componentCss from './Slider.module.less';
* @public
*/
const SliderBase = (props) => {
const {active, className, css, disabled, focused, keyFrequency, showAnchor, ...rest} = props;
const sliderProps = Object.assign({}, sliderDefaultProps, props);
const {active, className, css, disabled, focused, keyFrequency, showAnchor, ...rest} = sliderProps;

validateSteppedOnce(p => p.knobStep, {
component: 'Slider',
stepName: 'knobStep',
valueName: 'max'
})(props);
})(sliderProps);

const step = validateSteppedOnce(p => p.step, {
component: 'Slider',
valueName: 'max'
})(props);
})(sliderProps);

const tooltip = props.tooltip === true ? ProgressBarTooltip : props.tooltip;
const tooltip = sliderProps.tooltip === true ? ProgressBarTooltip : sliderProps.tooltip;

const spotlightAccelerator = useRef();
const ref = useRef();
Expand Down Expand Up @@ -101,7 +113,7 @@ const SliderBase = (props) => {
forKey('enter'),
forward('onActivate')
)
}, props, spotlightAccelerator);
}, sliderProps, spotlightAccelerator);

const nativeEventHandlers = useHandlers({
onWheel: handle(
Expand All @@ -113,7 +125,7 @@ const SliderBase = (props) => {
handleDecrementByWheel
])
)
}, props, context);
}, sliderProps, context);

// if the props includes a css map, merge them together
let mergedCss = usePublicClassNames({componentCss, customCss: css, publicClassNames: true});
Expand Down Expand Up @@ -403,17 +415,6 @@ SliderBase.propTypes = /** @lends sandstone/Slider.SliderBase.prototype */ {
wheelInterval: PropTypes.number
};

SliderBase.defaultProps = {
activateOnSelect: false,
active: false,
disabled: false,
keyFrequency: [1],
max: 100,
min: 0,
step: 1,
wheelInterval: 0
};

/**
* Sandstone-specific slider behaviors to apply to {@link sandstone/Slider.SliderBase|SliderBase}.
*
Expand Down
36 changes: 13 additions & 23 deletions Sprite/Sprite.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,26 +201,13 @@ const SpriteBase = kind({
width: PropTypes.number
},

defaultProps: {
columns: 1,
duration: 1000,
height: 120,
iterations: Infinity,
offsetLeft: 0,
offsetTop: 0,
orientation: 'horizontal',
paused: false,
rows: 1,
width: 120
},

styles: {
css,
className: 'sprite'
},

computed: {
style: ({offsetTop, offsetLeft, rows, columns, height, width, style}) => ({
style: ({offsetTop = 0, offsetLeft = 0, rows = 1, columns = 1, height = 120, width = 120, style}) => ({
...style,
'--sand-sprite-offset-top': scaleToRem(offsetTop),
'--sand-sprite-offset-left': scaleToRem(offsetLeft),
Expand All @@ -232,17 +219,17 @@ const SpriteBase = kind({
},

render: ({
columns,
duration,
height,
iterations,
columns = 1,
duration = 1000,
height = 120,
iterations = Infinity,
onSpriteAnimation,
orientation,
paused,
rows,
orientation = 'horizontal',
paused = false,
rows = 1,
stopped,
src,
width,
width = 120,
...rest
}) => {
delete rest.offsetTop;
Expand Down Expand Up @@ -309,7 +296,7 @@ const SpriteBase = kind({
{
easing: `steps(${frameCount}, end)`,
duration,
iterations
iterations: iterations || Infinity
}
);

Expand Down Expand Up @@ -363,6 +350,9 @@ const SpriteBase = kind({
}
});

SpriteBase.defaultPropValues = {
iterations: Infinity
};

export default SpriteBase;
export {
Expand Down
64 changes: 37 additions & 27 deletions VirtualList/VirtualList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,31 @@ import {useThemeVirtualList} from './useThemeVirtualList';

const nop = () => {};

const virtualListDefaultProps = {
'data-spotlight-container-disabled': false,
cbScrollTo: nop,
direction: 'vertical',
horizontalScrollbar: 'auto',
noAffordance: false,
noScrollByDrag: false,
noScrollByWheel: false,
onScroll: nop,
onScrollStart: nop,
onScrollStop: nop,
overscrollEffectOn: {
arrowKey: false,
drag: true,
pageKey: false,
track: false,
wheel: true
},
pageScroll: false,
role: 'list',
scrollMode: 'native',
verticalScrollbar: 'auto',
wrap: false
};

/**
* A Sandstone-styled scrollable and spottable virtual list component.
*
Expand All @@ -32,7 +57,10 @@ const nop = () => {};
* @ui
* @public
*/
let VirtualList = ({itemSize, hoverToScroll, ...rest}) => {
let VirtualList = (props) => {
const virtualListProps = Object.assign({}, virtualListDefaultProps, props);
const {itemSize, hoverToScroll, ...rest} = virtualListProps;

const itemSizeProps = itemSize && itemSize.minSize ?
{
itemSize: itemSize.minSize,
Expand Down Expand Up @@ -488,7 +516,9 @@ VirtualList = Skinnable(
)
);

VirtualList.defaultProps = {
VirtualList.defaultPropValues = virtualListDefaultProps;

const virtualGridListDefaultProps = {
'data-spotlight-container-disabled': false,
cbScrollTo: nop,
direction: 'vertical',
Expand Down Expand Up @@ -522,7 +552,10 @@ VirtualList.defaultProps = {
* @ui
* @public
*/
let VirtualGridList = ({hoverToScroll, ...rest}) => {
let VirtualGridList = (props) => {
const virtualGridListProps = Object.assign({}, virtualGridListDefaultProps, props);
const {hoverToScroll, ...rest} = virtualGridListProps;

const {
// Variables
scrollContentWrapper: ScrollContentWrapper,
Expand Down Expand Up @@ -967,30 +1000,7 @@ VirtualGridList = Skinnable(
)
);

VirtualGridList.defaultProps = {
'data-spotlight-container-disabled': false,
cbScrollTo: nop,
direction: 'vertical',
horizontalScrollbar: 'auto',
noAffordance: false,
noScrollByDrag: false,
noScrollByWheel: false,
onScroll: nop,
onScrollStart: nop,
onScrollStop: nop,
overscrollEffectOn: {
arrowKey: false,
drag: true,
pageKey: false,
track: false,
wheel: true
},
pageScroll: false,
role: 'list',
scrollMode: 'native',
verticalScrollbar: 'auto',
wrap: false
};
VirtualGridList.defaultPropValues = virtualGridListDefaultProps;

export default VirtualList;
export {
Expand Down
Loading

0 comments on commit a12fc66

Please sign in to comment.