feat: 'render' callback for shorthand props

CHANGELOG.md

@@ -21,6 +21,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `react-dom` as available import in the editor @mnajdova ([#553](https://github.com/stardust-ui/react/pull/553))
 - Fix incorrect and missing filled or outline versions of Teams SVG icons @codepretty ([#552](https://github.com/stardust-ui/react/pull/552))
 
+### Features
+- Add `render` callback as an option for shorthand value @kuzhelov ([#519](https://github.com/stardust-ui/react/pull/519))
+
 <!--------------------------------[ v0.13.1 ]------------------------------- -->
 ## [v0.13.1](https://github.com/stardust-ui/react/tree/v0.13.1) (2018-12-03)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.13.0...v0.13.1)

docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx

@@ -9,9 +9,9 @@ const AvatarExampleImageCustomizationShorthand = () => (
     />
      
     <Avatar
-      renderImage={(Image, props, children) => (
+      image={
         <Icon name="user" circular variables={{ color: 'blue' }} styles={{ padding: '8px' }} />
-      )}
+      }
       status={{ color: 'green', icon: 'check', title: 'Available' }}
     />
   </>

src/components/Accordion/Accordion.tsx

@@ -14,11 +14,12 @@ import AccordionTitle from './AccordionTitle'
 import AccordionContent from './AccordionContent'
 import { defaultBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
+
 import {
   ComponentEventHandler,
   Extendable,
-  ShorthandRenderFunction,
   ShorthandValue,
+  ShorthandRenderFunction,
 } from '../../../types/utils'
 
 export interface AccordionProps extends UIComponentProps, ChildrenComponentProps {
@@ -46,24 +47,20 @@ export interface AccordionProps extends UIComponentProps, ChildrenComponentProps
   }[]
 
   /**
-   * A custom render iterator for rendering each Accordion panel content.
-   * The default component, props, and children are available for each panel content.
+   * A custom renderer for each Accordion's panel title.
    *
-   * @param {React.ReactType} Component - The computed component for this slot.
-   * @param {object} props - The computed props for this slot.
-   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
+   * @param {React.ReactType} Component - The panel's component type.
+   * @param {object} props - The panel's computed props.
    */
-  renderContent?: ShorthandRenderFunction
+  renderPanelTitle?: ShorthandRenderFunction
 
   /**
-   * A custom render iterator for rendering each Accordion panel title.
-   * The default component, props, and children are available for each panel title.
+   * A custom renderer for each Accordion's panel content.
    *
-   * @param {React.ReactType} Component - The computed component for this slot.
-   * @param {object} props - The computed props for this slot.
-   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
+   * @param {React.ReactType} Component - The panel's component type.
+   * @param {object} props - The panel's computed props.
    */
-  renderTitle?: ShorthandRenderFunction
+  renderPanelContent?: ShorthandRenderFunction
 
   /**
    * Accessibility behavior if overridden by the user.
@@ -104,8 +101,9 @@ class Accordion extends AutoControlledComponent<Extendable<AccordionProps>, any>
       ),
     ]),
     accessibility: PropTypes.func,
-    renderTitle: PropTypes.func,
-    renderContent: PropTypes.func,
+
+    renderPanelTitle: PropTypes.func,
+    renderPanelContent: PropTypes.func,
   }
 
   public static defaultProps = {
@@ -153,7 +151,7 @@ class Accordion extends AutoControlledComponent<Extendable<AccordionProps>, any>
 
   renderPanels = () => {
     const children: any[] = []
-    const { panels, renderContent, renderTitle } = this.props
+    const { panels, renderPanelContent, renderPanelTitle } = this.props
 
     _.each(panels, (panel, index) => {
       const { content, title } = panel
@@ -163,13 +161,13 @@ class Accordion extends AutoControlledComponent<Extendable<AccordionProps>, any>
         AccordionTitle.create(title, {
           defaultProps: { active, index },
           overrideProps: this.handleTitleOverrides,
-          render: renderTitle,
+          render: renderPanelTitle,
         }),
       )
       children.push(
         AccordionContent.create(content, {
           defaultProps: { active },
-          render: renderContent,
+          render: renderPanelContent,
         }),
       )
     })

src/components/Attachment/Attachment.tsx

@@ -1,6 +1,7 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as _ from 'lodash'
+import { Extendable, ShorthandValue } from '../../../types/utils'
 import {
   UIComponent,
   customPropTypes,
@@ -9,7 +10,6 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
 } from '../../lib'
-import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils'
 import Icon from '../Icon/Icon'
 import Button from '../Button/Button'
 import Text from '../Text/Text'
@@ -33,51 +33,6 @@ export interface AttachmentProps extends UIComponentProps, ChildrenComponentProp
 
   /** Value indicating percent complete. */
   progress?: string | number
-
-  /**
-   * A custom render function the action slot.
-   *
-   * @param {React.ReactType} Component - The computed component for this slot.
-   * @param {object} props - The computed props for this slot.
-   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
-   */
-  renderAction?: ShorthandRenderFunction
-
-  /**
-   * A custom render function the description slot.
-   *
-   * @param {React.ReactType} Component - The computed component for this slot.
-   * @param {object} props - The computed props for this slot.
-   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
-   */
-  renderDescription?: ShorthandRenderFunction
-
-  /**
-   * A custom render function the header slot.
-   *
-   * @param {React.ReactType} Component - The computed component for this slot.
-   * @param {object} props - The computed props for this slot.
-   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
-   */
-  renderHeader?: ShorthandRenderFunction
-
-  /**
-   * A custom render function the icon slot.
-   *
-   * @param {React.ReactType} Component - The computed component for this slot.
-   * @param {object} props - The computed props for this slot.
-   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
-   */
-  renderIcon?: ShorthandRenderFunction
-
-  /**
-   * A custom render function the progress slot.
-   *
-   * @param {React.ReactType} Component - The computed component for this slot.
-   * @param {object} props - The computed props for this slot.
-   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
-   */
-  renderProgress?: ShorthandRenderFunction
 }
 
 /**
@@ -100,62 +55,41 @@ class Attachment extends UIComponent<Extendable<AttachmentProps>, any> {
     header: customPropTypes.itemShorthand,
     icon: customPropTypes.itemShorthand,
     progress: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    renderAction: PropTypes.func,
-    renderDescription: PropTypes.func,
-    renderHeader: PropTypes.func,
-    renderIcon: PropTypes.func,
-    renderProgress: PropTypes.func,
   }
 
   renderComponent({ ElementType, classes, rest, styles, variables }) {
-    const {
-      header,
-      description,
-      icon,
-      action,
-      progress,
-      renderIcon,
-      renderHeader,
-      renderDescription,
-      renderAction,
-      renderProgress,
-    } = this.props
+    const { header, description, icon, action, progress } = this.props
 
     return (
       <ElementType {...rest} className={classes.root}>
         {icon && (
           <div className={classes.icon}>
             {Icon.create(icon, {
               defaultProps: { size: 'big' },
-              render: renderIcon,
             })}
           </div>
         )}
         {(header || description) && (
           <div className={classes.content}>
             {Text.create(header, {
               defaultProps: { styles: styles.header },
-              render: renderHeader,
             })}
 
             {Text.create(description, {
               defaultProps: { styles: styles.description },
-              render: renderDescription,
             })}
           </div>
         )}
         {action && (
           <div className={classes.action}>
             {Button.create(action, {
               defaultProps: { iconOnly: true, text: true },
-              render: renderAction,
             })}
           </div>
         )}
         {!_.isNil(progress) &&
           Slot.create('', {
             defaultProps: { className: classes.progress },
-            render: renderProgress,
           })}
       </ElementType>
     )

src/components/Avatar/Avatar.tsx

@@ -1,15 +1,14 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Image, Label, Status } from '../../'
-
+import { Extendable, ShorthandValue } from '../../../types/utils'
 import {
   createShorthandFactory,
   customPropTypes,
   UIComponent,
   UIComponentProps,
   commonPropTypes,
 } from '../../lib'
-import { Extendable, ShorthandRenderFunction, ShorthandValue } from '../../../types/utils'
 
 export interface AvatarProps extends UIComponentProps {
   /** Shorthand for the image. */
@@ -21,33 +20,6 @@ export interface AvatarProps extends UIComponentProps {
   /** The name used for displaying the initials of the avatar if the image is not provided. */
   name?: string
 
-  /**
-   * A custom render function the image slot.
-   *
-   * @param {React.ReactType} Component - The computed component for this slot.
-   * @param {object} props - The computed props for this slot.
-   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
-   */
-  renderImage?: ShorthandRenderFunction
-
-  /**
-   * A custom render function the label slot.
-   *
-   * @param {React.ReactType} Component - The computed component for this slot.
-   * @param {object} props - The computed props for this slot.
-   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
-   */
-  renderLabel?: ShorthandRenderFunction
-
-  /**
-   * A custom render function the status slot.
-   *
-   * @param {React.ReactType} Component - The computed component for this slot.
-   * @param {object} props - The computed props for this slot.
-   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
-   */
-  renderStatus?: ShorthandRenderFunction
-
   /** Size multiplier. */
   size?: number
 
@@ -79,9 +51,6 @@ class Avatar extends UIComponent<Extendable<AvatarProps>, any> {
     size: PropTypes.number,
     status: customPropTypes.itemShorthand,
     getInitials: PropTypes.func,
-    renderImage: PropTypes.func,
-    renderLabel: PropTypes.func,
-    renderStatus: PropTypes.func,
   }
 
   static defaultProps = {
@@ -110,8 +79,7 @@ class Avatar extends UIComponent<Extendable<AvatarProps>, any> {
   }
 
   renderComponent({ ElementType, classes, rest, styles, variables }) {
-    const { name, status, image, label, getInitials, renderImage, renderLabel, renderStatus } = this
-      .props as AvatarPropsWithDefaults
+    const { name, status, image, label, getInitials } = this.props as AvatarPropsWithDefaults
 
     return (
       <ElementType {...rest} className={classes.root}>
@@ -122,18 +90,15 @@ class Avatar extends UIComponent<Extendable<AvatarProps>, any> {
             title: name,
             styles: styles.image,
           },
-          render: renderImage,
         })}
         {!image &&
-          !renderImage &&
           Label.create(label || {}, {
             defaultProps: {
               content: getInitials(name),
               circular: true,
               title: name,
               styles: styles.label,
             },
-            render: renderLabel,
           })}
         {Status.create(status, {
           defaultProps: {
@@ -143,7 +108,6 @@ class Avatar extends UIComponent<Extendable<AvatarProps>, any> {
               borderWidth: variables.statusBorderWidth,
             },
           },
-          render: renderStatus,
         })}
       </ElementType>
     )

src/components/Button/Button.tsx

@@ -16,12 +16,7 @@ import Icon from '../Icon/Icon'
 import Slot from '../Slot/Slot'
 import { buttonBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
-import {
-  ComponentEventHandler,
-  Extendable,
-  ShorthandRenderFunction,
-  ShorthandValue,
-} from '../../../types/utils'
+import { ComponentEventHandler, Extendable, ShorthandValue } from '../../../types/utils'
 import ButtonGroup from './ButtonGroup'
 import isFromKeyboard from '../../lib/isFromKeyboard'
 
@@ -70,15 +65,6 @@ export interface ButtonProps
   /** A button can be formatted to show different levels of emphasis. */
   primary?: boolean
 
-  /**
-   * A custom render function the icon slot.
-   *
-   * @param {React.ReactType} Component - The computed component for this slot.
-   * @param {object} props - The computed props for this slot.
-   * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
-   */
-  renderIcon?: ShorthandRenderFunction
-
   /** A button can be formatted to show only text in order to indicate some less-pronounced actions. */
   text?: boolean
 
@@ -120,7 +106,6 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
     text: PropTypes.bool,
     secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
     accessibility: PropTypes.func,
-    renderIcon: PropTypes.func,
   }
 
   public static defaultProps = {
@@ -163,15 +148,14 @@ class Button extends UIComponent<Extendable<ButtonProps>, ButtonState> {
   }
 
   public renderIcon = (variables, styles) => {
-    const { icon, iconPosition, content, renderIcon } = this.props
+    const { icon, iconPosition, content } = this.props
 
     return Icon.create(icon, {
       defaultProps: {
         styles: styles.icon,
         xSpacing: !content ? 'none' : iconPosition === 'after' ? 'before' : 'after',
         variables: variables.icon,
       },
-      render: renderIcon,
     })
   }