chore: rename classNameBuilder functions in "views" and remove classNameBuilder aliases with "use" prefix (#4505)

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Advertisement

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Card

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Comment

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Feed

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Item

* chore: replace deprecated classNameBuilder functions (replace prefix 'use' with 'get') in views/Statistic

* chore: remove deprecaetd unused classNameBuilders

Author: dominikdosoudil

src/lib/classNameBuilders.js

@@ -21,11 +21,6 @@ import { numberToWord } from './numberToWord'
  */
 export const getKeyOnly = (val, key) => val && key
 
-/**
- * @deprecated
- */
-export const useKeyOnly = getKeyOnly
-
 /**
  * Props that require both a key and value to create a className.
  * @param {*} val A props value
@@ -37,11 +32,6 @@ export const useKeyOnly = getKeyOnly
  */
 export const getValueAndKey = (val, key) => val && val !== true && `${val} ${key}`
 
-/**
- * @deprecated
- */
-export const useValueAndKey = getValueAndKey
-
 /**
  * Props whose key will be used in className, or value and key.
  * @param {*} val A props value
@@ -57,11 +47,6 @@ export const useValueAndKey = getValueAndKey
  */
 export const getKeyOrValueAndKey = (val, key) => val && (val === true ? key : `${val} ${key}`)
 
-/**
- * @deprecated
- */
-export const useKeyOrValueAndKey = getKeyOrValueAndKey
-
 //
 // Prop to className exceptions
 //
@@ -89,11 +74,6 @@ export const getMultipleProp = (val, key) => {
     .join(' ')
 }
 
-/**
- * @deprecated
- */
-export const useMultipleProp = getMultipleProp
-
 /**
  * The "textAlign" prop follows the useValueAndKey except when the value is "justified'.
  * In this case, only the class "justified" is used, ignoring the "aligned" class.
@@ -110,11 +90,6 @@ export const useMultipleProp = getMultipleProp
 export const getTextAlignProp = (val) =>
   val === 'justified' ? 'justified' : getValueAndKey(val, 'aligned')
 
-/**
- * @deprecated
- */
-export const useTextAlignProp = getTextAlignProp
-
 /**
  * The "verticalAlign" prop follows the useValueAndKey.
  *
@@ -126,11 +101,6 @@ export const useTextAlignProp = getTextAlignProp
  */
 export const getVerticalAlignProp = (val) => getValueAndKey(val, 'aligned')
 
-/**
- * @deprecated
- */
-export const useVerticalAlignProp = getVerticalAlignProp
-
 /**
  * Create "X", "X wide" and "equal width" classNames.
  * "X" is a numberToWord value and "wide" is configurable.
@@ -162,8 +132,3 @@ export const getWidthProp = (val, widthClass = '', canEqual = false) => {
   }
   return numberToWord(val)
 }
-
-/**
- * @deprecated
- */
-export const useWidthProp = getWidthProp

src/lib/index.js

@@ -4,19 +4,12 @@ export ModernAutoControlledComponent from './ModernAutoControlledComponent'
 export * as childrenUtils from './childrenUtils'
 
 export {
-  useKeyOnly,
   getKeyOnly,
-  useKeyOrValueAndKey,
   getKeyOrValueAndKey,
-  useValueAndKey,
   getValueAndKey,
-  useMultipleProp,
   getMultipleProp,
-  useTextAlignProp,
   getTextAlignProp,
-  useVerticalAlignProp,
   getVerticalAlignProp,
-  useWidthProp,
   getWidthProp,
 } from './classNameBuilders'
 

src/views/Advertisement/Advertisement.js

@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -19,8 +19,8 @@ const Advertisement = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     unit,
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(test, 'test'),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(test, 'test'),
     'ad',
     className,
   )

src/views/Card/Card.js

@@ -9,7 +9,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
+  getKeyOnly,
   useEventCallback,
 } from '../../lib'
 import Image from '../../elements/Image'
@@ -44,10 +44,10 @@ const Card = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     color,
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(link, 'link'),
-    useKeyOnly(raised, 'raised'),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(link, 'link'),
+    getKeyOnly(raised, 'raised'),
     'card',
     className,
   )

src/views/Card/CardContent.js

@@ -10,8 +10,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useTextAlignProp,
+  getKeyOnly,
+  getTextAlignProp,
 } from '../../lib'
 import CardDescription from './CardDescription'
 import CardHeader from './CardHeader'
@@ -23,7 +23,7 @@ import CardMeta from './CardMeta'
 const CardContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, extra, header, meta, textAlign } = props
 
-  const classes = cx(useKeyOnly(extra, 'extra'), useTextAlignProp(textAlign), 'content', className)
+  const classes = cx(getKeyOnly(extra, 'extra'), getTextAlignProp(textAlign), 'content', className)
   const rest = getUnhandledProps(CardContent, props)
   const ElementType = getComponentType(props)
 

src/views/Card/CardDescription.js

@@ -9,15 +9,15 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useTextAlignProp,
+  getTextAlignProp,
 } from '../../lib'
 
 /**
  * A card can contain a description with one or more paragraphs.
  */
 const CardDescription = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
-  const classes = cx(useTextAlignProp(textAlign), 'description', className)
+  const classes = cx(getTextAlignProp(textAlign), 'description', className)
   const rest = getUnhandledProps(CardDescription, props)
   const ElementType = getComponentType(props)
 

src/views/Card/CardGroup.js

@@ -9,9 +9,9 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useTextAlignProp,
-  useWidthProp,
+  getKeyOnly,
+  getTextAlignProp,
+  getWidthProp,
 } from '../../lib'
 import Card from './Card'
 
@@ -33,11 +33,11 @@ const CardGroup = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(doubling, 'doubling'),
-    useKeyOnly(stackable, 'stackable'),
-    useTextAlignProp(textAlign),
-    useWidthProp(itemsPerRow),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(doubling, 'doubling'),
+    getKeyOnly(stackable, 'stackable'),
+    getTextAlignProp(textAlign),
+    getWidthProp(itemsPerRow),
     'cards',
     className,
   )

src/views/Card/CardHeader.js

@@ -9,15 +9,15 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useTextAlignProp,
+  getTextAlignProp,
 } from '../../lib'
 
 /**
  * A card can contain a header.
  */
 const CardHeader = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
-  const classes = cx(useTextAlignProp(textAlign), 'header', className)
+  const classes = cx(getTextAlignProp(textAlign), 'header', className)
   const rest = getUnhandledProps(CardHeader, props)
   const ElementType = getComponentType(props)
 

src/views/Card/CardMeta.js

@@ -9,15 +9,15 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useTextAlignProp,
+  getTextAlignProp,
 } from '../../lib'
 
 /**
  * A card can contain content metadata.
  */
 const CardMeta = React.forwardRef(function (props, ref) {
   const { children, className, content, textAlign } = props
-  const classes = cx(useTextAlignProp(textAlign), 'meta', className)
+  const classes = cx(getTextAlignProp(textAlign), 'meta', className)
   const rest = getUnhandledProps(CardMeta, props)
   const ElementType = getComponentType(props)
 

src/views/Comment/Comment.js

@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 import CommentAction from './CommentAction'
 import CommentActions from './CommentActions'
@@ -24,7 +24,7 @@ import CommentText from './CommentText'
 const Comment = React.forwardRef(function (props, ref) {
   const { className, children, collapsed, content } = props
 
-  const classes = cx(useKeyOnly(collapsed, 'collapsed'), 'comment', className)
+  const classes = cx(getKeyOnly(collapsed, 'collapsed'), 'comment', className)
   const rest = getUnhandledProps(Comment, props)
   const ElementType = getComponentType(props)
 

src/views/Comment/CommentAction.js

@@ -7,7 +7,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -16,7 +16,7 @@ import {
 const CommentAction = React.forwardRef(function (props, ref) {
   const { active, className, children, content } = props
 
-  const classes = cx(useKeyOnly(active, 'active'), className)
+  const classes = cx(getKeyOnly(active, 'active'), className)
   const rest = getUnhandledProps(CommentAction, props)
   const ElementType = getComponentType(props, { defaultAs: 'a' })
 

src/views/Comment/CommentGroup.js

@@ -9,7 +9,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -21,9 +21,9 @@ const CommentGroup = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     size,
-    useKeyOnly(collapsed, 'collapsed'),
-    useKeyOnly(minimal, 'minimal'),
-    useKeyOnly(threaded, 'threaded'),
+    getKeyOnly(collapsed, 'collapsed'),
+    getKeyOnly(minimal, 'minimal'),
+    getKeyOnly(threaded, 'threaded'),
     'comments',
     className,
   )

src/views/Feed/FeedExtra.js

@@ -9,7 +9,7 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
+  getKeyOnly,
 } from '../../lib'
 
 /**
@@ -19,8 +19,8 @@ const FeedExtra = React.forwardRef(function (props, ref) {
   const { children, className, content, images, text } = props
 
   const classes = cx(
-    useKeyOnly(images, 'images'),
-    useKeyOnly(content || text, 'text'),
+    getKeyOnly(images, 'images'),
+    getKeyOnly(content || text, 'text'),
     'extra',
     className,
   )

src/views/Item/ItemContent.js

@@ -8,7 +8,7 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useVerticalAlignProp,
+  getVerticalAlignProp,
 } from '../../lib'
 import ItemHeader from './ItemHeader'
 import ItemDescription from './ItemDescription'
@@ -21,7 +21,7 @@ import ItemMeta from './ItemMeta'
 const ItemContent = React.forwardRef(function (props, ref) {
   const { children, className, content, description, extra, header, meta, verticalAlign } = props
 
-  const classes = cx(useVerticalAlignProp(verticalAlign), 'content', className)
+  const classes = cx(getVerticalAlignProp(verticalAlign), 'content', className)
   const rest = getUnhandledProps(ItemContent, props)
   const ElementType = getComponentType(props)
 

src/views/Item/ItemGroup.js

@@ -8,8 +8,8 @@ import {
   customPropTypes,
   getComponentType,
   getUnhandledProps,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
 } from '../../lib'
 import Item from './Item'
 
@@ -21,10 +21,10 @@ const ItemGroup = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(divided, 'divided'),
-    useKeyOnly(link, 'link'),
-    useKeyOnly(unstackable, 'unstackable'),
-    useKeyOrValueAndKey(relaxed, 'relaxed'),
+    getKeyOnly(divided, 'divided'),
+    getKeyOnly(link, 'link'),
+    getKeyOnly(unstackable, 'unstackable'),
+    getKeyOrValueAndKey(relaxed, 'relaxed'),
     'items',
     className,
   )

src/views/Statistic/Statistic.js

@@ -10,8 +10,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useValueAndKey,
+  getKeyOnly,
+  getValueAndKey,
 } from '../../lib'
 import StatisticGroup from './StatisticGroup'
 import StatisticLabel from './StatisticLabel'
@@ -39,9 +39,9 @@ const Statistic = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useValueAndKey(floated, 'floated'),
-    useKeyOnly(horizontal, 'horizontal'),
-    useKeyOnly(inverted, 'inverted'),
+    getValueAndKey(floated, 'floated'),
+    getKeyOnly(horizontal, 'horizontal'),
+    getKeyOnly(inverted, 'inverted'),
     'statistic',
     className,
   )