Skip to content

chore: rename classNameBuilder utils from use* -> get* #4500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 16, 2024
Merged

chore: rename classNameBuilder utils from use* -> get* #4500

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 43 additions & 8 deletions src/lib/classNameBuilders.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,12 @@ import { numberToWord } from './numberToWord'
* <Label tag />
* <div class="ui tag label"></div>
*/
export const useKeyOnly = (val, key) => val && key
export const getKeyOnly = (val, key) => val && key

/**
* @deprecated
*/
export const useKeyOnly = getKeyOnly

/**
* Props that require both a key and value to create a className.
Expand All @@ -30,7 +35,12 @@ export const useKeyOnly = (val, key) => val && key
* <Label corner='left' />
* <div class="ui left corner label"></div>
*/
export const useValueAndKey = (val, key) => val && val !== true && `${val} ${key}`
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.
Expand All @@ -45,7 +55,12 @@ export const useValueAndKey = (val, key) => val && val !== true && `${val} ${key
* <Label pointing='left' />
* <div class="ui left pointing label"></div>
*/
export const useKeyOrValueAndKey = (val, key) => val && (val === true ? key : `${val} ${key}`)
export const getKeyOrValueAndKey = (val, key) => val && (val === true ? key : `${val} ${key}`)

/**
* @deprecated
*/
export const useKeyOrValueAndKey = getKeyOrValueAndKey

//
// Prop to className exceptions
Expand All @@ -63,7 +78,7 @@ export const useKeyOrValueAndKey = (val, key) => val && (val === true ? key : `$
* <div class="mobile only row"></div>
* <div class="mobile only tablet only row"></div>
*/
export const useMultipleProp = (val, key) => {
export const getMultipleProp = (val, key) => {
if (!val || val === true) return null

return val
Expand All @@ -74,6 +89,11 @@ export const useMultipleProp = (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.
Expand All @@ -87,8 +107,13 @@ export const useMultipleProp = (val, key) => {
* <Container textAlign='left' />
* <div class="ui left aligned container"></div>
*/
export const useTextAlignProp = (val) =>
val === 'justified' ? 'justified' : useValueAndKey(val, 'aligned')
export const getTextAlignProp = (val) =>
val === 'justified' ? 'justified' : getValueAndKey(val, 'aligned')

/**
* @deprecated
*/
export const useTextAlignProp = getTextAlignProp

/**
* The "verticalAlign" prop follows the useValueAndKey.
Expand All @@ -99,7 +124,12 @@ export const useTextAlignProp = (val) =>
* <Grid verticalAlign='middle' />
* <div class="ui middle aligned grid"></div>
*/
export const useVerticalAlignProp = (val) => useValueAndKey(val, 'aligned')
export const getVerticalAlignProp = (val) => getValueAndKey(val, 'aligned')

/**
* @deprecated
*/
export const useVerticalAlignProp = getVerticalAlignProp

/**
* Create "X", "X wide" and "equal width" classNames.
Expand All @@ -122,7 +152,7 @@ export const useVerticalAlignProp = (val) => useValueAndKey(val, 'aligned')
* <Grid columns={4} />
* <div class="ui four column grid"></div>
*/
export const useWidthProp = (val, widthClass = '', canEqual = false) => {
export const getWidthProp = (val, widthClass = '', canEqual = false) => {
if (canEqual && val === 'equal') {
return 'equal width'
}
Expand All @@ -132,3 +162,8 @@ export const useWidthProp = (val, widthClass = '', canEqual = false) => {
}
return numberToWord(val)
}

/**
* @deprecated
*/
export const useWidthProp = getWidthProp
Loading