import get from 'lodash.get' ; import isNil from 'lodash.isnil' ; import mergeWith from 'lodash.mergewith' ; import cloneDeep from 'lodash.clonedeep' ; import { themePropertyMap } from './../../theme/base' ; import { getClosestBreakpoint , findLastValidBreakpoint , hasValidBreakpointFormat , extractInObject , } from './../../theme/tools' ; import { useContrastText } from '../useContrastText' ; param props param theme param colorModeProps param componentTheme param currentBreakpoint returns export function extractProps ( props , theme , { } , componentTheme , currentBreakpoint ) { let newProps = { } ; for ( let property in props ) { if ( themePropertyMap [ property ] ) { let propValues = extractPropertyFromFunction ( property , props , theme , componentTheme ) ; if ( typeof propValues === 'string' || typeof propValues === 'number' ) { newProps [ property ] = propValues ; } else if ( ! isNil ( propValues ) ) { for ( let nestedProp in propValues ) { newProps [ nestedProp ] = get ( theme , `${ themePropertyMap [ nestedProp ] }.${ propValues [ nestedProp ] }` , propValues [ nestedProp ] ) ; } } else if ( property === 'shadow' ) { let shadowProps = theme [ themePropertyMap [ property ] ] [ props [ property ] ] ; if ( ! isNil ( shadowProps ) ) { newProps = { ... newProps , ... shadowProps } ; } } else { newProps [ property ] = resolveValueWithBreakpoint ( props [ property ] , theme . breakpoints , currentBreakpoint , property ) ; } } else { newProps [ property ] = resolveValueWithBreakpoint ( props [ property ] , theme . breakpoints , currentBreakpoint , property ) ; } } return cloneDeep ( newProps ) ; } function filterDefaultProps ( props , defaultProps ) { let [ , resultProps ] = extractInObject ( defaultProps , Object . keys ( props ) ) ; return resultProps ; } param property param props param theme param componentTheme returns export const extractPropertyFromFunction = ( property , props , theme , componentTheme ) => { let propValues ; if ( componentTheme && typeof componentTheme [ themePropertyMap [ property ] ] === 'function' ) { let funcProps = componentTheme [ themePropertyMap [ property ] ] ( { theme , ... props , } ) ; let isNested = Object . keys ( funcProps ) . some ( function ( key ) { return funcProps [ key ] && typeof funcProps [ key ] === 'object' ; } ) ; propValues = isNested ? { ... get ( funcProps , `${ props [ property ] }` ) } : { ... funcProps } ; } else { propValues = get ( componentTheme , `${ themePropertyMap [ property ] }.${ props [ property ] }` ) ; } return propValues ; } ; export function mergeUnderscoreProps ( newProps , props ) { const _props = Object . keys ( newProps ) . filter ( ( propName ) => propName . startsWith ( '_' ) ) ; _props . forEach ( ( propName ) => { const bg = newProps . bg ?? newProps . backgroundColor ; const textColor = bg ? { color : useContrastText ( bg , newProps [ propName ] ?. color ?? props [ propName ] ?. color ) , } : { } ; newProps [ propName ] = { ... textColor , ... newProps [ propName ] , ... props [ propName ] , } ; } ) ; return newProps ; } param values param currentBreakpoint param property returns export const resolveValueWithBreakpoint = ( values , breakpointTheme , currentBreakpoint , property ) => { if ( hasValidBreakpointFormat ( values , breakpointTheme , property ) ) { return findLastValidBreakpoint ( values , breakpointTheme , currentBreakpoint ) ; } else { return values ; } } ; param theme param colorModeProps param componentTheme param props param windowWidth returns export function calculateProps ( theme , colorModeProps , componentTheme , props , windowWidth ) { let currentBreakpoint = getClosestBreakpoint ( theme . breakpoints , windowWidth ) ; if ( ! props ) { props = { } ; } let newProps ; if ( componentTheme ) { newProps = extractProps ( filterDefaultProps ( props , componentTheme . defaultProps ) , theme , colorModeProps , componentTheme , currentBreakpoint ) ; let componentBaseStyle = typeof componentTheme . baseStyle !== 'function' ? componentTheme . baseStyle : componentTheme . baseStyle ( { theme , ... newProps , ... props , ... colorModeProps , } ) ; newProps = mergeWith ( newProps , componentBaseStyle , ( objValue , srcValue , key ) => { if ( ! isNil ( objValue ) ) { delete newProps [ key ] ; } } ) ; const variant = props . variant || get ( componentTheme , 'defaultProps.variant' ) ; if ( variant && componentTheme . variants && componentTheme . variants [ variant ] ) { const colorScheme = props . colorScheme || get ( componentTheme , 'defaultProps.colorScheme' ) ; let variantProps = componentTheme . variants [ variant ] ( { ... props , ... newProps , colorScheme , theme , ... colorModeProps , } ) ; variantProps = extractProps ( variantProps , theme , colorModeProps , componentTheme , currentBreakpoint ) ; newProps = mergeWith ( newProps , variantProps , ( objValue , srcValue , key ) => { if ( ! isNil ( objValue ) ) { delete newProps [ key ] ; } } ) ; delete newProps . variant ; delete newProps . colorScheme ; } } let extractedProps = extractProps ( props , theme , colorModeProps , componentTheme , currentBreakpoint ) ; newProps = mergeWith ( newProps , extractedProps , ( objValue , srcValue , key ) => { if ( ! isNil ( objValue ) ) { delete newProps [ key ] ; } } ) ; newProps = mergeUnderscoreProps ( newProps , props ) ; return newProps ; }