@contember/react-utils 1.2.0-rc.0 → 1.2.0-rc.10

package/src/theming/useClassNameFactory.ts

@@ -0,0 +1,47 @@
+import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'
+import { useContext } from 'react'
+import { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'
+
+/**
+ * Hook for component class name accepting outer class name
+ *
+ * Returns a reusable function almost that is handy for components
+ * with many sub-component parts that should inherit the root component
+ * name.
+ *
+ * Also, product of the factory is a function that can be used outside of rules of hooks.
+ *
+ * @param componentClassName - Component class name
+ * @param glue - String to use to glue component and sub-component suffix
+ * @param prefixOverride - Context component prefix override
+ * @returns
+ */
+export function useClassNameFactory(
+	componentClassName: NestedClassName,
+	glue: string | null = '-',
+	prefixOverride?: string | null | undefined,
+) {
+	const contextPrefix = useContext(GlobalClassNamePrefixContext)
+	const classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix
+
+	const componentClassNameList: string[] = flatClassNameList(componentClassName).map(
+		componentClassName => `${classNamePrefix}${componentClassName}`,
+	)
+
+	return function componentClassNameFor(
+		suffix: string | null | undefined = null,
+		additionalClassName: NestedClassName = null,
+	): string {
+		const classNameSuffix: string = suffix ?? ''
+
+		return deduplicateClassName((classNameSuffix
+			? (classNameSuffix.match(/^[a-zA-Z0-9]/)
+				? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)
+				: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)
+			)
+			: componentClassNameList
+		).concat(
+			flatClassNameList(additionalClassName),
+		)).join(' ')
+	}
+}

package/src/theming/useThemedClassName.ts

@@ -0,0 +1,54 @@
+import { NestedClassName, colorSchemeClassName, filterThemedClassName } from '@contember/utilities'
+import { useColorScheme } from './contexts'
+import { useClassName } from './useClassName'
+
+/**
+ * Hook for component class name accepting outer class name with theme-* and scheme-* class manes
+ *
+ * It looks for theme CSS classes in the given class name, deduplicates them and returns final theme class name with scheme CSS class set
+ * @internal
+ *
+ * @param componentClassName - Component class name
+ * @param additionalClassName - Additional class name
+ * @param prefixOverride - Context component prefix override
+ * @returns string
+ * @see useColorScheme
+ *
+ * @example
+ * ```tsx
+ * function Button({ className }: { className?: string | string[] }) {
+ * 	 const [contentThemeClassName, controlsThemeClassName] = useThemedClassName(className)
+ *
+ * 	 return (
+ * 		 <div className={contentThemeClassName}>
+ * 			 <button className={controlsThemeClassName}>Click me</button>
+ * 		 </div>
+ * 	 )
+ * }
+ *
+ * function App() {
+ * 	 return (
+ * 		 <Button className="theme-default theme-danger:hover" />
+ * 	 )
+ * }
+ *
+ * // renders:
+ * // <div class="scheme-system theme-default-content theme-danger-content:hover">
+ * // 	<button class="scheme-system theme-default-controls theme-danger-controls:hover">Click me</button>
+ * // </div>
+ * ```
+ */
+export function useThemedClassName(
+	componentClassName: NestedClassName,
+	additionalClassName: NestedClassName,
+	prefixOverride?: string | null | undefined,
+): string {
+	return useClassName(
+		componentClassName,
+		filterThemedClassName(
+			additionalClassName,
+			colorSchemeClassName(useColorScheme()),
+		),
+		prefixOverride,
+	)
+}

package/src/theming/useThemedClassNameFactory.ts

@@ -0,0 +1,41 @@
+import { NestedClassName, colorSchemeClassName, deduplicateClassName, filterThemedClassName, flatClassNameList } from '@contember/utilities'
+import { useContext } from 'react'
+import { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'
+import { useColorScheme } from './contexts'
+
+export function useThemedClassNameFactory(
+	componentClassName: NestedClassName,
+	glue: string | null = '-',
+	prefixOverride?: string | null | undefined,
+) {
+	const contextPrefix = useContext(GlobalClassNamePrefixContext)
+	const classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix
+
+	const componentClassNameList: string[] = flatClassNameList(componentClassName).map(
+		componentClassName => `${classNamePrefix}${componentClassName}`,
+	)
+
+	const colorScheme = colorSchemeClassName(useColorScheme())
+
+	return function componentClassNameFor(
+		suffix: string | null | undefined = null,
+		additionalClassName: NestedClassName = null,
+	): string {
+		const classNameSuffix: string = suffix ?? ''
+
+		return deduplicateClassName((classNameSuffix
+			? (classNameSuffix.match(/^[a-zA-Z0-9]/)
+				? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)
+				: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)
+			)
+			: componentClassNameList
+		).concat(
+			flatClassNameList(
+				filterThemedClassName(
+					additionalClassName,
+					colorScheme,
+				),
+			),
+		)).join(' ')
+	}
+}