Diffusion Open Access Compliance Check Tool (OACCT) (paginated-inlines) Browse

rOACCT/node_modules/@emotion/react/src/class-names.js
f646e1f695a7paginated-inlines

class-names.js
View Options

			// @flow
			import * as React from 'react'
			import {
			getRegisteredStyles,
			insertStyles,
			registerStyles
			} from '@emotion/utils'
			import { serializeStyles } from '@emotion/serialize'
			import { withEmotionCache } from './context'
			import { ThemeContext } from './theming'
			import { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks'
			import { isBrowser } from './utils'

			type ClassNameArg =
			\| string
			\| boolean
			\| { [key: string]: boolean }
			\| Array<ClassNameArg>
			\| null
			\| void

			let classnames = (args: Array<ClassNameArg>): string => {
			let len = args.length
			let i = 0
			let cls = ''
			for (; i < len; i++) {
			let arg = args[i]
			if (arg == null) continue

			let toAdd
			switch (typeof arg) {
			case 'boolean':
			break
			case 'object': {
			if (Array.isArray(arg)) {
			toAdd = classnames(arg)
			} else {
			if (
			process.env.NODE_ENV !== 'production' &&
			arg.styles !== undefined &&
			arg.name !== undefined
			) {
			console.error(
			'You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' +
			'`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.'
			)
			}
			toAdd = ''
			for (const k in arg) {
			if (arg[k] && k) {
			toAdd && (toAdd += ' ')
			toAdd += k
			}
			}
			}
			break
			}
			default: {
			toAdd = arg
			}
			}
			if (toAdd) {
			cls && (cls += ' ')
			cls += toAdd
			}
			}
			return cls
			}
			function merge(
			registered: Object,
			css: (...args: Array<any>) => string,
			className: string
			) {
			const registeredStyles = []

			const rawClassName = getRegisteredStyles(
			registered,
			registeredStyles,
			className
			)

			if (registeredStyles.length < 2) {
			return className
			}
			return rawClassName + css(registeredStyles)
			}

			type Props = {
			children: ({
			css: (...args: any) => string,
			cx: (...args: Array<ClassNameArg>) => string,
			theme: Object
			}) => React.Node
			}

			const Insertion = ({ cache, serializedArr }) => {
			let rules = useInsertionEffectAlwaysWithSyncFallback(() => {
			let rules = ''
			for (let i = 0; i < serializedArr.length; i++) {
			let res = insertStyles(cache, serializedArr[i], false)
			if (!isBrowser && res !== undefined) {
			rules += res
			}
			}
			if (!isBrowser) {
			return rules
			}
			})

			if (!isBrowser && rules.length !== 0) {
			return (
			<style
			{...{
			[`data-emotion`]: `${cache.key} ${serializedArr
			.map(serialized => serialized.name)
			.join(' ')}`,
			dangerouslySetInnerHTML: { __html: rules },
			nonce: cache.sheet.nonce
			}}
			/>
			)
			}
			return null
			}

			export const ClassNames: React.AbstractComponent<Props> =
			/* #__PURE__ */ withEmotionCache((props, cache) => {
			let hasRendered = false
			let serializedArr = []

			let css = (...args: Array<any>) => {
			if (hasRendered && process.env.NODE_ENV !== 'production') {
			throw new Error('css can only be used during render')
			}

			let serialized = serializeStyles(args, cache.registered)
			serializedArr.push(serialized)
			// registration has to happen here as the result of this might get consumed by `cx`
			registerStyles(cache, serialized, false)
			return `${cache.key}-${serialized.name}`
			}
			let cx = (...args: Array<ClassNameArg>) => {
			if (hasRendered && process.env.NODE_ENV !== 'production') {
			throw new Error('cx can only be used during render')
			}
			return merge(cache.registered, css, classnames(args))
			}
			let content = {
			css,
			cx,
			theme: React.useContext(ThemeContext)
			}
			let ele = props.children(content)
			hasRendered = true

			return (
			<>
			<Insertion cache={cache} serializedArr={serializedArr} />
			{ele}
			</>
			)
			})

			if (process.env.NODE_ENV !== 'production') {
			ClassNames.displayName = 'EmotionClassNames'
			}