feat(bindings): useStyles hook

layershifter · layershifter · commit a50c76bd2d39 · 2020-01-11T12:53:59.000+01:00
diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
@@ -73,22 +73,24 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
             aria-label={toolbarAriaLabel || null}
             items={[
               {
-                key: 'show-code',
                 icon: { name: 'code', style: { width: '20px', height: '20px' } },
                 onClick: onShowCode,
                 active: showCode,
                 children: (Component, props) => (
-                  <Tooltip content="Try it" trigger={<Component {...props} />} />
+                  <Tooltip content="Try it" key="show-code" trigger={<Component {...props} />} />
                 ),
               },
 
               {
-                key: 'show-variables',
                 icon: { name: 'paint brush', style: { width: '20px', height: '20px' } },
                 onClick: onShowVariables,
                 active: showVariables,
                 children: (Component, props) => (
-                  <Tooltip content="Theme it" trigger={<Component {...props} />} />
+                  <Tooltip
+                    content="Theme it"
+                    key="show-variables"
+                    trigger={<Component {...props} />}
+                  />
                 ),
               },
               {
@@ -97,29 +99,30 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
                 kind: 'divider',
               },
               {
-                key: 'show-transparent',
                 icon: { name: 'adjust', style: { width: '20px', height: '20px' } },
                 onClick: onShowTransparent,
                 active: showTransparent,
                 children: (Component, props) => (
-                  <Tooltip content="Transparent" trigger={<Component {...props} />} />
+                  <Tooltip
+                    content="Transparent"
+                    key="show-transparent"
+                    trigger={<Component {...props} />}
+                  />
                 ),
               },
               {
-                key: 'show-rtl',
                 icon: { name: 'align right', style: { width: '20px', height: '20px' } },
                 onClick: onShowRtl,
                 active: showRtl,
                 children: (Component, props) => (
-                  <Tooltip content="RTL" trigger={<Component {...props} />} />
+                  <Tooltip content="RTL" key="show-rtl" trigger={<Component {...props} />} />
                 ),
               },
 
               {
-                key: 'maximize',
                 icon: { name: 'external alternate', style: { width: '20px', height: '20px' } },
                 children: (Component, props) => (
-                  <Tooltip content="Popout" trigger={<Component {...props} />} />
+                  <Tooltip content="Popout" key="maximize" trigger={<Component {...props} />} />
                 ),
                 as: NavLink,
                 to: `/maximize/${_.kebabCase(
@@ -137,18 +140,20 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
                 kind: 'divider',
               },
               {
-                key: 'show-codesandbox',
                 onClick: onCodeSandboxClick,
                 icon: { name: codeSandboxIcon, style: { width: '20px', height: '20px' } },
                 children: (Component, props) => (
-                  <Tooltip content={codeSandboxTooltip} trigger={<Component {...props} />} />
+                  <Tooltip
+                    content={codeSandboxTooltip}
+                    key="show-codesandbox"
+                    trigger={<Component {...props} />}
+                  />
                 ),
               },
               {
-                key: 'copy-link',
                 icon: { name: 'linkify', style: { width: '20px', height: '20px' } },
                 children: (Component, props) => (
-                  <CopyToClipboard value={anchorName}>
+                  <CopyToClipboard key="copy-link" value={anchorName}>
                     {(active, onClick) => (
                       <Tooltip
                         content={active ? 'Copied!' : 'Permalink'}
diff --git a/packages/react-bindings/src/hooks/useStyles.ts b/packages/react-bindings/src/hooks/useStyles.ts
@@ -0,0 +1,72 @@
+import cx from 'classnames'
+import * as React from 'react'
+// @ts-ignore We have this export in package, but it is not present in typings
+import { ThemeContext } from 'react-fela'
+
+import {
+  emptyTheme,
+  mergeComponentStyles,
+  mergeComponentVariables,
+} from '@fluentui/react/src/utils/mergeThemes'
+import {
+  ComponentSlotStylesPrepared,
+  ComponentStyleFunctionParam,
+  ProviderContextPrepared,
+} from '@fluentui/react'
+import resolveStylesAndClasses from '@fluentui/react/src/utils/resolveStylesAndClasses'
+
+const useStyles = (displayName: string, options: any) => {
+  const className = options.className || 'no-classname-🙉'
+  const rtl = options.rtl || false
+  const props = options.mapPropsToStyles()
+  const { className: userClassName, styles, design, variables } = options.mapInlineToStyles()
+
+  const context: ProviderContextPrepared = React.useContext(ThemeContext)
+
+  const { disableAnimations = false, renderer = null, theme = emptyTheme } = context || {}
+
+  // Merge inline variables on top of cached variables
+  const resolvedVariables = mergeComponentVariables(
+    theme.componentVariables[displayName],
+    variables,
+  )(theme.siteVariables)
+
+  // Resolve styles using resolved variables, merge results, allow props.styles to override
+  const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
+    theme.componentStyles[displayName],
+    { root: design },
+    { root: styles },
+  )
+
+  const styleParam: ComponentStyleFunctionParam = {
+    displayName,
+    props,
+    variables: resolvedVariables,
+    theme,
+    rtl,
+    disableAnimations,
+  }
+
+  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
+  // Our API should be aligned with it
+  // Heads Up! Keep in sync with Design.tsx render logic
+  const direction = rtl ? 'rtl' : 'ltr'
+  const felaParam = {
+    theme: { direction },
+    disableAnimations,
+    displayName, // does not affect styles, only used by useEnhancedRenderer in docs
+  }
+
+  const { resolvedStyles, classes } = resolveStylesAndClasses(
+    mergedStyles,
+    styleParam,
+    // @ts-ignore
+    renderer ? style => renderer.renderRule(() => style, felaParam) : undefined,
+  )
+
+  classes.root = cx(className, classes.root, userClassName)
+
+  return [classes, resolvedStyles]
+}
+
+export default useStyles
diff --git a/packages/react-bindings/src/index.ts b/packages/react-bindings/src/index.ts
@@ -10,6 +10,7 @@ export * from './FocusZone/FocusZone.types'
 export * from './FocusZone/focusUtilities'
 
 export { default as useAccessibility } from './hooks/useAccessibility'
+export { default as useStyles } from './hooks/useStyles'
 export { default as unstable_useDispatchEffect } from './hooks/useDispatchEffect'
 export { default as useStateManager } from './hooks/useStateManager'
 
diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx
@@ -1,19 +1,20 @@
 import { Accessibility } from '@fluentui/accessibility'
+import {
+  getElementType,
+  getUnhandledProps,
+  useAccessibility,
+  useStyles,
+} from '@fluentui/react-bindings'
 import * as customPropTypes from '@fluentui/react-proptypes'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import Image, { ImageProps } from '../Image/Image'
 import Label, { LabelProps } from '../Label/Label'
 import Status, { StatusProps } from '../Status/Status'
-import { WithAsProp, ShorthandValue, withSafeTypeForAs } from '../../types'
-import {
-  createShorthandFactory,
-  UIComponent,
-  UIComponentProps,
-  commonPropTypes,
-  SizeValue,
-  ShorthandFactory,
-} from '../../utils'
+import { WithAsProp, ShorthandValue, withSafeTypeForAs, ProviderContextPrepared } from '../../types'
+import { createShorthandFactory, UIComponentProps, commonPropTypes, SizeValue } from '../../utils'
+// @ts-ignore
+import { ThemeContext } from 'react-fela'
 
 export interface AvatarProps extends UIComponentProps {
   /**
@@ -40,91 +41,117 @@ export interface AvatarProps extends UIComponentProps {
   getInitials?: (name: string) => string
 }
 
-class Avatar extends UIComponent<WithAsProp<AvatarProps>, any> {
-  static create: ShorthandFactory<AvatarProps>
-
-  static className = 'ui-avatar'
-
-  static displayName = 'Avatar'
-
-  static propTypes = {
-    ...commonPropTypes.createCommon({
-      children: false,
-      content: false,
+const Avatar = React.forwardRef<HTMLDivElement, WithAsProp<AvatarProps>>((props, ref) => {
+  const {
+    className,
+    design,
+    name,
+    status,
+    image,
+    label,
+    getInitials,
+    size,
+    styles,
+    variables,
+  } = props
+
+  const { rtl }: ProviderContextPrepared = React.useContext(ThemeContext)
+  const [classes, resolvedStyles] = useStyles(Avatar.displayName, {
+    mapPropsToStyles: () => ({
+      size,
     }),
-    name: PropTypes.string,
-    image: customPropTypes.itemShorthandWithoutJSX,
-    label: customPropTypes.itemShorthand,
-    size: customPropTypes.size,
-    status: customPropTypes.itemShorthand,
-    getInitials: PropTypes.func,
-  }
-
-  static defaultProps = {
-    size: 'medium',
-    getInitials(name: string) {
-      if (!name) {
-        return ''
-      }
-
-      const reducedName = name
-        .replace(/\s*\(.*?\)\s*/g, ' ')
-        .replace(/\s*{.*?}\s*/g, ' ')
-        .replace(/\s*\[.*?]\s*/g, ' ')
-
-      const initials = reducedName
-        .split(' ')
-        .filter(item => item !== '')
-        .map(item => item.charAt(0))
-        .reduce((accumulator, currentValue) => accumulator + currentValue)
-
-      if (initials.length > 2) {
-        return initials.charAt(0) + initials.charAt(initials.length - 1)
-      }
-      return initials
-    },
-  } as AvatarProps
-
-  renderComponent({ accessibility, ElementType, classes, unhandledProps, styles, variables }) {
-    const { name, status, image, label, getInitials, size } = this.props as AvatarProps
-
-    return (
-      <ElementType {...accessibility.attributes.root} {...unhandledProps} className={classes.root}>
-        {Image.create(image, {
+    mapInlineToStyles: () => ({
+      className,
+      design,
+      styles,
+      variables,
+    }),
+    rtl,
+  })
+  const getA11Props = useAccessibility(props.accessibility, {
+    debugName: Avatar.displayName,
+    rtl,
+  })
+  const ElementType = getElementType(props)
+  const unhandledProps = getUnhandledProps((Avatar as any).handledProps /* TODO */, props)
+
+  return (
+    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
+      {Image.create(image, {
+        defaultProps: () => ({
+          fluid: true,
+          avatar: true,
+          title: name,
+          styles: resolvedStyles.image,
+        }),
+      })}
+      {!image &&
+        Label.create(label || {}, {
           defaultProps: () => ({
-            fluid: true,
-            avatar: true,
+            content: getInitials(name),
+            circular: true,
             title: name,
-            styles: styles.image,
+            styles: resolvedStyles.label,
           }),
         })}
-        {!image &&
-          Label.create(label || {}, {
-            defaultProps: () => ({
-              content: getInitials(name),
-              circular: true,
-              title: name,
-              styles: styles.label,
-            }),
-          })}
-        {Status.create(status, {
-          defaultProps: () => ({
-            size,
-            styles: styles.status,
-            variables: {
-              borderColor: variables.statusBorderColor,
-              borderWidth: variables.statusBorderWidth,
-            },
-          }),
-        })}
-      </ElementType>
-    )
-  }
+      {Status.create(status, {
+        defaultProps: () => ({
+          size,
+          styles: resolvedStyles.status,
+          // variables: {
+          //   borderColor: variables.statusBorderColor,
+          //   borderWidth: variables.statusBorderWidth,
+          // },
+          // TODO: Fix me please PLEASE PLEAASSEEE
+        }),
+      })}
+    </ElementType>
+  )
+})
+;(Avatar as any).className = 'ui-avatar'
+Avatar.displayName = 'Avatar'
+;(Avatar as any).propTypes = {
+  ...commonPropTypes.createCommon({
+    children: false,
+    content: false,
+  }),
+  name: PropTypes.string,
+  image: customPropTypes.itemShorthandWithoutJSX,
+  label: customPropTypes.itemShorthand,
+  size: customPropTypes.size,
+  status: customPropTypes.itemShorthand,
+  getInitials: PropTypes.func,
+}
+Avatar.defaultProps = {
+  size: 'medium',
+  getInitials(name: string) {
+    if (!name) {
+      return ''
+    }
+
+    const reducedName = name
+      .replace(/\s*\(.*?\)\s*/g, ' ')
+      .replace(/\s*{.*?}\s*/g, ' ')
+      .replace(/\s*\[.*?]\s*/g, ' ')
+
+    const initials = reducedName
+      .split(' ')
+      .filter(item => item !== '')
+      .map(item => item.charAt(0))
+      .reduce((accumulator, currentValue) => accumulator + currentValue)
+
+    if (initials.length > 2) {
+      return initials.charAt(0) + initials.charAt(initials.length - 1)
+    }
+    return initials
+  },
 }
 
+// @ts-ignore
 Avatar.create = createShorthandFactory({ Component: Avatar, mappedProp: 'name' })
 
 /**
  * An Avatar is a graphical representation of a user.
  */
+// @ts-ignore
 export default withSafeTypeForAs<typeof Avatar, AvatarProps>(Avatar)
diff --git a/packages/react/src/components/Status/Status.tsx b/packages/react/src/components/Status/Status.tsx
diff --git a/packages/react/src/utils/factories.ts b/packages/react/src/utils/factories.ts
