diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js index bf98580d26..dbd1b4679e 100644 --- a/src/modules/Modal/Modal.js +++ b/src/modules/Modal/Modal.js @@ -9,7 +9,7 @@ import { customPropTypes, doesNodeContainClick, eventStack, - getElementType, + getComponentType, getUnhandledProps, isBrowser, makeDebugger, @@ -33,20 +33,19 @@ const debug = makeDebugger('modal') * @see Confirm * @see Portal */ -const Modal = React.forwardRef(function (partialProps, ref) { - const props = _.defaults(partialProps, getDefaultProps()) +const Modal = React.forwardRef(function (props, ref) { const { actions, basic, - centered, + centered = true, children, className, closeIcon, - closeOnDimmerClick, - closeOnDocumentClick, + closeOnDimmerClick = true, + closeOnDocumentClick = false, content, - dimmer, - eventPool, + dimmer = true, + eventPool = 'Modal', header, size, style, @@ -186,7 +185,7 @@ const Modal = React.forwardRef(function (partialProps, ref) { 'modal transition visible active', className, ) - const ElementType = getElementType(Modal, props) + const ElementType = getComponentType(props) const closeIconName = closeIcon === true ? 'close' : closeIcon const closeIconJSX = Icon.create(closeIconName, { @@ -399,16 +398,6 @@ Modal.propTypes = { */ } -function getDefaultProps() { - return { - centered: true, - dimmer: true, - closeOnDimmerClick: true, - closeOnDocumentClick: false, - eventPool: 'Modal', - } -} - Modal.Actions = ModalActions Modal.Content = ModalContent Modal.Description = ModalDescription diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js index 313bc05bed..c0b7276928 100644 --- a/src/modules/Popup/Popup.js +++ b/src/modules/Popup/Popup.js @@ -10,7 +10,7 @@ import { childrenUtils, createHTMLDivision, customPropTypes, - getElementType, + getComponentType, getUnhandledProps, makeDebugger, SUI, @@ -35,7 +35,7 @@ const debug = makeDebugger('popup') */ function getPortalProps(props) { const portalProps = {} - const normalizedOn = _.isArray(props.on) ? props.on : [props.on] + const normalizedOn = _.isArray(props.on) ? props.on ?? ['click', 'hover'] : [props.on] if (props.hoverable) { portalProps.closeOnPortalMouseLeave = true @@ -111,25 +111,24 @@ function usePositioningEffect(popperDependencies, positionUpdate) { /** * A Popup displays additional information on top of a page. */ -const Popup = React.forwardRef(function (partialProps, ref) { - const props = _.defaults(partialProps, getDefaultProps()) +const Popup = React.forwardRef(function (props, ref) { const { basic, className, content, context, children, - disabled, - eventsEnabled, + disabled = false, + eventsEnabled = true, flowing, header, inverted, offset, - pinned, + pinned = false, popper, popperDependencies, - popperModifiers, - position, + popperModifiers = [], + position = 'top left', positionFixed, size, style, @@ -231,7 +230,7 @@ const Popup = React.forwardRef(function (partialProps, ref) { 'popup transition visible', className, ) - const ElementType = getElementType(Popup, props) + const ElementType = getComponentType(props) const styles = { // Heads up! We need default styles to get working correctly `flowing` @@ -470,17 +469,6 @@ Popup.propTypes = { wide: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['very'])]), } -function getDefaultProps() { - return { - disabled: false, - eventsEnabled: true, - on: ['click', 'hover'], - pinned: false, - popperModifiers: [], - position: 'top left', - } -} - Popup.Content = PopupContent Popup.Header = PopupHeader diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js index 91d546f235..c41a299797 100644 --- a/src/modules/Rating/Rating.js +++ b/src/modules/Rating/Rating.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types' import React from 'react' import { - getElementType, + getComponentType, getUnhandledProps, SUI, useKeyOnly, @@ -15,9 +15,8 @@ import RatingIcon from './RatingIcon' /** * A rating indicates user interest in content. */ -const Rating = React.forwardRef(function (partialProps, ref) { - const props = _.defaults(partialProps, getDefaultProps()) - const { className, clearable, disabled, icon, maxRating, size } = props +const Rating = React.forwardRef(function (props, ref) { + const { className, clearable = 'auto', disabled, icon, maxRating = 1, size } = props const [rating, setRating] = useAutoControlledValue({ state: props.rating, @@ -37,7 +36,7 @@ const Rating = React.forwardRef(function (partialProps, ref) { className, ) const rest = getUnhandledProps(Rating, props) - const ElementType = getElementType(Rating, props) + const ElementType = getComponentType(props) const handleIconClick = (e, { index }) => { if (disabled) { @@ -152,13 +151,6 @@ Rating.propTypes = { size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big')), } -function getDefaultProps() { - return { - clearable: 'auto', - maxRating: 1, - } -} - Rating.Icon = RatingIcon export default Rating diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js index df6668c3eb..6c7376c704 100644 --- a/src/modules/Rating/RatingIcon.js +++ b/src/modules/Rating/RatingIcon.js @@ -4,13 +4,12 @@ import _ from 'lodash' import PropTypes from 'prop-types' import React from 'react' -import { getElementType, getUnhandledProps, useKeyOnly } from '../../lib' +import { getComponentType, getUnhandledProps, useKeyOnly } from '../../lib' /** * An internal icon sub-component for Rating component */ -const RatingIcon = React.forwardRef(function (partialProps, ref) { - const props = _.defaults(partialProps, getDefaultProps()) +const RatingIcon = React.forwardRef(function (props, ref) { const { active, className, selected } = props const classes = cx( @@ -20,7 +19,7 @@ const RatingIcon = React.forwardRef(function (partialProps, ref) { className, ) const rest = getUnhandledProps(RatingIcon, props) - const ElementType = getElementType(RatingIcon, props) + const ElementType = getComponentType(props, { as: 'i' }) const handleClick = (e) => { _.invoke(props, 'onClick', e, props) @@ -98,10 +97,4 @@ RatingIcon.propTypes = { selected: PropTypes.bool, } -function getDefaultProps() { - return { - as: 'i', - } -} - export default RatingIcon diff --git a/src/modules/Search/SearchCategory.js b/src/modules/Search/SearchCategory.js index 0df622b640..218da2083f 100644 --- a/src/modules/Search/SearchCategory.js +++ b/src/modules/Search/SearchCategory.js @@ -1,4 +1,3 @@ -import _ from 'lodash' import cx from 'clsx' import PropTypes from 'prop-types' import React from 'react' @@ -6,19 +5,25 @@ import React from 'react' import { childrenUtils, customPropTypes, - getElementType, + getComponentType, getUnhandledProps, useKeyOnly, } from '../../lib' import SearchCategoryLayout from './SearchCategoryLayout' -const SearchCategory = React.forwardRef(function (partialProps, ref) { - const props = _.defaults(partialProps, getDefaultProps()) - const { active, children, className, content, layoutRenderer, renderer } = props +const SearchCategory = React.forwardRef(function (props, ref) { + const { + active, + children, + className, + content, + layoutRenderer = SearchCategoryLayout, + renderer = ({ name }) => name, + } = props const classes = cx(useKeyOnly(active, 'active'), 'category', className) const rest = getUnhandledProps(SearchCategory, props) - const ElementType = getElementType(SearchCategory, props) + const ElementType = getComponentType(props) const categoryContent = renderer(props) const resultsContent = childrenUtils.isNil(children) ? content : children @@ -30,13 +35,6 @@ const SearchCategory = React.forwardRef(function (partialProps, ref) { ) }) -function getDefaultProps() { - return { - layoutRenderer: SearchCategoryLayout, - renderer: ({ name }) => name, - } -} - SearchCategory.displayName = 'SearchCategory' SearchCategory.propTypes = { /** An element type to render as (string or function). */ diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js index d8d751b1d1..7bba25b50a 100644 --- a/src/modules/Search/SearchResult.js +++ b/src/modules/Search/SearchResult.js @@ -6,7 +6,7 @@ import React from 'react' import { createHTMLImage, customPropTypes, - getElementType, + getComponentType, getUnhandledProps, useKeyOnly, } from '../../lib' @@ -31,9 +31,8 @@ const defaultRenderer = ({ image, price, title, description }) => [ , ] -const SearchResult = React.forwardRef(function (partialProps, ref) { - const props = _.defaults(partialProps, getDefaultProps()) - const { active, className, renderer } = props +const SearchResult = React.forwardRef(function (props, ref) { + const { active, className, renderer = defaultRenderer } = props const handleClick = (e) => { _.invoke(props, 'onClick', e, props) @@ -41,7 +40,7 @@ const SearchResult = React.forwardRef(function (partialProps, ref) { const classes = cx(useKeyOnly(active, 'active'), 'result', className) const rest = getUnhandledProps(SearchResult, props) - const ElementType = getElementType(SearchResult, props) + const ElementType = getComponentType(props) // Note: You technically only need the 'content' wrapper when there's an // image. However, optionally wrapping it makes this function a lot more @@ -100,10 +99,4 @@ SearchResult.propTypes = { title: PropTypes.string.isRequired, } -function getDefaultProps() { - return { - renderer: defaultRenderer, - } -} - export default SearchResult diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js index f2e187e8b7..3a30afa4c4 100644 --- a/src/modules/Sticky/Sticky.js +++ b/src/modules/Sticky/Sticky.js @@ -5,7 +5,7 @@ import React from 'react' import { customPropTypes, - getElementType, + getComponentType, getUnhandledProps, isRefObject, isBrowser, @@ -16,16 +16,15 @@ import { /** * Sticky content stays fixed to the browser viewport while another column of content is visible on the page. */ -const Sticky = React.forwardRef(function (partialProps, ref) { - const props = _.defaults(partialProps, getDefaultProps()) +const Sticky = React.forwardRef(function (props, ref) { const { - active, - bottomOffset, + active = true, + bottomOffset = 0, children, className, context, - offset, - scrollContext, + offset = 0, + scrollContext = isBrowser() ? window : null, styleElement, } = props @@ -243,7 +242,7 @@ const Sticky = React.forwardRef(function (partialProps, ref) { // ---------------------------------------- const rest = getUnhandledProps(Sticky, props) - const ElementType = getElementType(Sticky, props) + const ElementType = getComponentType(props) const containerClasses = cx( sticky && 'ui', @@ -334,13 +333,4 @@ Sticky.propTypes = { styleElement: PropTypes.object, } -function getDefaultProps() { - return { - active: true, - bottomOffset: 0, - offset: 0, - scrollContext: isBrowser() ? window : null, - } -} - export default Sticky