chore: rename classNameBuilder functions in "collections" (#4502)

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

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

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

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

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

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

---------

Co-authored-by: Oleksandr Fediashov <[email protected]>

Author: dominikdosoudil

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -9,7 +9,7 @@ import {
   customPropTypes,
   getUnhandledProps,
   getComponentType,
-  useKeyOnly,
+  getKeyOnly,
   useEventCallback,
 } from '../../lib'
 
@@ -19,7 +19,7 @@ import {
 const BreadcrumbSection = React.forwardRef(function (props, ref) {
   const { active, children, className, content, href, link, onClick } = props
 
-  const classes = cx(useKeyOnly(active, 'active'), 'section', className)
+  const classes = cx(getKeyOnly(active, 'active'), 'section', className)
   const rest = getUnhandledProps(BreadcrumbSection, props)
   const ElementType = getComponentType(props, {
     getDefault: () => {

src/collections/Form/Form.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { getComponentType, getUnhandledProps, SUI, useKeyOnly, useWidthProp } from '../../lib'
+import { getComponentType, getUnhandledProps, SUI, getKeyOnly, getWidthProp } from '../../lib'
 import FormButton from './FormButton'
 import FormCheckbox from './FormCheckbox'
 import FormDropdown from './FormDropdown'
@@ -50,14 +50,14 @@ const Form = React.forwardRef(function (props, ref) {
   const classes = cx(
     'ui',
     size,
-    useKeyOnly(error, 'error'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(loading, 'loading'),
-    useKeyOnly(reply, 'reply'),
-    useKeyOnly(success, 'success'),
-    useKeyOnly(unstackable, 'unstackable'),
-    useKeyOnly(warning, 'warning'),
-    useWidthProp(widths, null, true),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(loading, 'loading'),
+    getKeyOnly(reply, 'reply'),
+    getKeyOnly(success, 'success'),
+    getKeyOnly(unstackable, 'unstackable'),
+    getKeyOnly(warning, 'warning'),
+    getWidthProp(widths, null, true),
     'form',
     className,
   )

src/collections/Form/FormField.js

@@ -10,8 +10,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useWidthProp,
+  getKeyOnly,
+  getWidthProp,
 } from '../../lib'
 import Label from '../../elements/Label'
 import Checkbox from '../../modules/Checkbox'
@@ -44,11 +44,11 @@ const FormField = React.forwardRef(function (props, ref) {
   } = props
 
   const classes = cx(
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(error, 'error'),
-    useKeyOnly(inline, 'inline'),
-    useKeyOnly(required, 'required'),
-    useWidthProp(width, 'wide'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(inline, 'inline'),
+    getKeyOnly(required, 'required'),
+    getWidthProp(width, 'wide'),
     'field',
     className,
   )

src/collections/Form/FormGroup.js

@@ -7,8 +7,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useWidthProp,
+  getKeyOnly,
+  getWidthProp,
 } from '../../lib'
 
 /**
@@ -19,12 +19,12 @@ const FormGroup = React.forwardRef((props, ref) => {
   const { children, className, disabled, error, grouped, inline, unstackable, widths } = props
 
   const classes = cx(
-    useKeyOnly(error, 'error'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(grouped, 'grouped'),
-    useKeyOnly(inline, 'inline'),
-    useKeyOnly(unstackable, 'unstackable'),
-    useWidthProp(widths, null, true),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(grouped, 'grouped'),
+    getKeyOnly(inline, 'inline'),
+    getKeyOnly(unstackable, 'unstackable'),
+    getWidthProp(widths, null, true),
     'fields',
     className,
   )

src/collections/Grid/Grid.js

@@ -7,12 +7,12 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useMultipleProp,
-  useTextAlignProp,
-  useVerticalAlignProp,
-  useWidthProp,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getMultipleProp,
+  getTextAlignProp,
+  getVerticalAlignProp,
+  getWidthProp,
 } from '../../lib'
 import GridColumn from './GridColumn'
 import GridRow from './GridRow'
@@ -42,20 +42,20 @@ const Grid = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     'ui',
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(container, 'container'),
-    useKeyOnly(doubling, 'doubling'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(stackable, 'stackable'),
-    useKeyOnly(stretched, 'stretched'),
-    useKeyOrValueAndKey(celled, 'celled'),
-    useKeyOrValueAndKey(divided, 'divided'),
-    useKeyOrValueAndKey(padded, 'padded'),
-    useKeyOrValueAndKey(relaxed, 'relaxed'),
-    useMultipleProp(reversed, 'reversed'),
-    useTextAlignProp(textAlign),
-    useVerticalAlignProp(verticalAlign),
-    useWidthProp(columns, 'column', true),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(container, 'container'),
+    getKeyOnly(doubling, 'doubling'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(stackable, 'stackable'),
+    getKeyOnly(stretched, 'stretched'),
+    getKeyOrValueAndKey(celled, 'celled'),
+    getKeyOrValueAndKey(divided, 'divided'),
+    getKeyOrValueAndKey(padded, 'padded'),
+    getKeyOrValueAndKey(relaxed, 'relaxed'),
+    getMultipleProp(reversed, 'reversed'),
+    getTextAlignProp(textAlign),
+    getVerticalAlignProp(verticalAlign),
+    getWidthProp(columns, 'column', true),
     'grid',
     className,
   )

src/collections/Grid/GridColumn.js

@@ -8,12 +8,12 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useMultipleProp,
-  useTextAlignProp,
-  useValueAndKey,
-  useVerticalAlignProp,
-  useWidthProp,
+  getKeyOnly,
+  getMultipleProp,
+  getTextAlignProp,
+  getValueAndKey,
+  getVerticalAlignProp,
+  getWidthProp,
 } from '../../lib'
 
 /**
@@ -39,17 +39,17 @@ const GridColumn = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     color,
-    useKeyOnly(stretched, 'stretched'),
-    useMultipleProp(only, 'only'),
-    useTextAlignProp(textAlign),
-    useValueAndKey(floated, 'floated'),
-    useVerticalAlignProp(verticalAlign),
-    useWidthProp(computer, 'wide computer'),
-    useWidthProp(largeScreen, 'wide large screen'),
-    useWidthProp(mobile, 'wide mobile'),
-    useWidthProp(tablet, 'wide tablet'),
-    useWidthProp(widescreen, 'wide widescreen'),
-    useWidthProp(width, 'wide'),
+    getKeyOnly(stretched, 'stretched'),
+    getMultipleProp(only, 'only'),
+    getTextAlignProp(textAlign),
+    getValueAndKey(floated, 'floated'),
+    getVerticalAlignProp(verticalAlign),
+    getWidthProp(computer, 'wide computer'),
+    getWidthProp(largeScreen, 'wide large screen'),
+    getWidthProp(mobile, 'wide mobile'),
+    getWidthProp(tablet, 'wide tablet'),
+    getWidthProp(widescreen, 'wide widescreen'),
+    getWidthProp(width, 'wide'),
     'column',
     className,
   )

src/collections/Grid/GridRow.js

@@ -7,11 +7,11 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useMultipleProp,
-  useTextAlignProp,
-  useVerticalAlignProp,
-  useWidthProp,
+  getKeyOnly,
+  getMultipleProp,
+  getTextAlignProp,
+  getVerticalAlignProp,
+  getWidthProp,
 } from '../../lib'
 
 /**
@@ -34,14 +34,14 @@ const GridRow = React.forwardRef(function (props, ref) {
 
   const classes = cx(
     color,
-    useKeyOnly(centered, 'centered'),
-    useKeyOnly(divided, 'divided'),
-    useKeyOnly(stretched, 'stretched'),
-    useMultipleProp(only, 'only'),
-    useMultipleProp(reversed, 'reversed'),
-    useTextAlignProp(textAlign),
-    useVerticalAlignProp(verticalAlign),
-    useWidthProp(columns, 'column', true),
+    getKeyOnly(centered, 'centered'),
+    getKeyOnly(divided, 'divided'),
+    getKeyOnly(stretched, 'stretched'),
+    getMultipleProp(only, 'only'),
+    getMultipleProp(reversed, 'reversed'),
+    getTextAlignProp(textAlign),
+    getVerticalAlignProp(verticalAlign),
+    getWidthProp(columns, 'column', true),
     'row',
     className,
   )

src/collections/Menu/Menu.js

@@ -10,10 +10,10 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
-  useValueAndKey,
-  useWidthProp,
+  getKeyOnly,
+  getKeyOrValueAndKey,
+  getValueAndKey,
+  getWidthProp,
   useAutoControlledValue,
 } from '../../lib'
 import MenuHeader from './MenuHeader'
@@ -58,22 +58,22 @@ const Menu = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(borderless, 'borderless'),
-    useKeyOnly(compact, 'compact'),
-    useKeyOnly(fluid, 'fluid'),
-    useKeyOnly(inverted, 'inverted'),
-    useKeyOnly(pagination, 'pagination'),
-    useKeyOnly(pointing, 'pointing'),
-    useKeyOnly(secondary, 'secondary'),
-    useKeyOnly(stackable, 'stackable'),
-    useKeyOnly(text, 'text'),
-    useKeyOnly(vertical, 'vertical'),
-    useKeyOrValueAndKey(attached, 'attached'),
-    useKeyOrValueAndKey(floated, 'floated'),
-    useKeyOrValueAndKey(icon, 'icon'),
-    useKeyOrValueAndKey(tabular, 'tabular'),
-    useValueAndKey(fixed, 'fixed'),
-    useWidthProp(widths, 'item'),
+    getKeyOnly(borderless, 'borderless'),
+    getKeyOnly(compact, 'compact'),
+    getKeyOnly(fluid, 'fluid'),
+    getKeyOnly(inverted, 'inverted'),
+    getKeyOnly(pagination, 'pagination'),
+    getKeyOnly(pointing, 'pointing'),
+    getKeyOnly(secondary, 'secondary'),
+    getKeyOnly(stackable, 'stackable'),
+    getKeyOnly(text, 'text'),
+    getKeyOnly(vertical, 'vertical'),
+    getKeyOrValueAndKey(attached, 'attached'),
+    getKeyOrValueAndKey(floated, 'floated'),
+    getKeyOrValueAndKey(icon, 'icon'),
+    getKeyOrValueAndKey(tabular, 'tabular'),
+    getValueAndKey(fixed, 'fixed'),
+    getWidthProp(widths, 'item'),
     className,
     'menu',
   )

src/collections/Menu/MenuItem.js

@@ -10,8 +10,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
   useEventCallback,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -39,12 +39,12 @@ const MenuItem = React.forwardRef(function (props, ref) {
   const classes = cx(
     color,
     position,
-    useKeyOnly(active, 'active'),
-    useKeyOnly(disabled, 'disabled'),
-    useKeyOnly(icon === true || (icon && !(name || content)), 'icon'),
-    useKeyOnly(header, 'header'),
-    useKeyOnly(link, 'link'),
-    useKeyOrValueAndKey(fitted, 'fitted'),
+    getKeyOnly(active, 'active'),
+    getKeyOnly(disabled, 'disabled'),
+    getKeyOnly(icon === true || (icon && !(name || content)), 'icon'),
+    getKeyOnly(header, 'header'),
+    getKeyOnly(link, 'link'),
+    getKeyOrValueAndKey(fitted, 'fitted'),
     'item',
     className,
   )

src/collections/Message/Message.js

@@ -10,8 +10,8 @@ import {
   getComponentType,
   getUnhandledProps,
   SUI,
-  useKeyOnly,
-  useKeyOrValueAndKey,
+  getKeyOnly,
+  getKeyOrValueAndKey,
   useEventCallback,
 } from '../../lib'
 import Icon from '../../elements/Icon'
@@ -52,18 +52,18 @@ const Message = React.forwardRef(function (props, ref) {
     'ui',
     color,
     size,
-    useKeyOnly(compact, 'compact'),
-    useKeyOnly(error, 'error'),
-    useKeyOnly(floating, 'floating'),
-    useKeyOnly(hidden, 'hidden'),
-    useKeyOnly(icon, 'icon'),
-    useKeyOnly(info, 'info'),
-    useKeyOnly(negative, 'negative'),
-    useKeyOnly(positive, 'positive'),
-    useKeyOnly(success, 'success'),
-    useKeyOnly(visible, 'visible'),
-    useKeyOnly(warning, 'warning'),
-    useKeyOrValueAndKey(attached, 'attached'),
+    getKeyOnly(compact, 'compact'),
+    getKeyOnly(error, 'error'),
+    getKeyOnly(floating, 'floating'),
+    getKeyOnly(hidden, 'hidden'),
+    getKeyOnly(icon, 'icon'),
+    getKeyOnly(info, 'info'),
+    getKeyOnly(negative, 'negative'),
+    getKeyOnly(positive, 'positive'),
+    getKeyOnly(success, 'success'),
+    getKeyOnly(visible, 'visible'),
+    getKeyOnly(warning, 'warning'),
+    getKeyOrValueAndKey(attached, 'attached'),
     'message',
     className,
   )