How to use prop-types-extra - 10 common examples

afterEach(() => {
  /* eslint-disable no-console */
  if (!console.error.threw && console.error.expected.length) {
    expect(console.error.warned).to.have.keys(console.error.expected);
  }

  console.error.restore();
  /* eslint-enable no-console */

  _resetWarned();
  deprecated._resetWarned();
});

_update = () => {
    const {className, container, show} = this.props;

    if (!(show && isBody(container))) {
      return;
    }

    // Set a classname on the body for scoping purposes.
    container.classList.add(BODY_CLASS);
    !!className && container.classList.add(...className.split(' '));
  }
}

Overlay.propTypes = {
  children: PropTypes.element,
  container: componentOrElement.isRequired,
  onMenuHide: PropTypes.func,
  onMenuShow: PropTypes.func,
  onMenuToggle: PropTypes.func,
  referenceElement: componentOrElement,
  show: PropTypes.bool,
};

Overlay.defaultProps = {
  onMenuHide: noop,
  onMenuShow: noop,
  onMenuToggle: noop,
  show: false,
};

export default Overlay;

const Marger = Radium(MargerBase)

class CartRewardCardComponent extends Component {
  static propTypes = {
    titleAmount: PropTypes.string.isRequired,
    titleTag: PropTypes.string,
    subtitle: PropTypes.string,
    descriptionTag: PropTypes.string,
    updateAmountTitle: PropTypes.string,
    updateAmountLink: PropTypes.string,
    onAfterClose: PropTypes.func,
    onCloseClick: PropTypes.func,

    // Deprecated.
    shippingTitle: deprecated(
      PropTypes.string,
      'Prefer use ',
    ),
    shippingValue: deprecated(
      PropTypes.string,
      'Prefer use ',
    ),
    textDescription: deprecated(
      PropTypes.string,
      'Prefer use ',
    ),
  }

  static defaultProps = {
    titleTag: 'h1',
    subtitle: '',

buttonOnMouseLeave: deprecated(
      PropTypes.func,
      'Use `RewardCard.Action` to insert your button and its callbacks instead.',
    ),
    buttonOnClick: deprecated(
      PropTypes.func,
      'Use `RewardCard.Action` to insert your button and its callbacks instead.',
    ),

    imageProps: deprecated(PropTypes.object, 'Use `RewardCard.Image` instead.'),

    isDisabled: deprecated(
      PropTypes.bool,
      'You should handle the disabled state direcly on your component.',
    ),
    starred: deprecated(
      PropTypes.bool,
      'Use `RewardCard` sub-component instead.',
    ),
    starLabel: deprecated(
      PropTypes.string,
      'Use `RewardCard` sub-component instead.',
    ),

    version: deprecated(
      PropTypes.oneOf(['default', 'tiny']),
      '`RewardCard` is no longer handled with media-queries. The version of the component now is handled by the size of the parent container.',
    ),

    // Deprecated props
    titleDescription: deprecated(
      PropTypes.string,

const Marger = Radium(MargerBase)

export class TeamCardIcons extends Component {
  static propTypes = {
    email: PropTypes.string,
    phoneNumber: PropTypes.string,
    links: PropTypes.arrayOf(
      PropTypes.shape({
        name: PropTypes.oneOf(['linkedin', 'twitter']),
        href: PropTypes.string,
      }),
    ),

    // Deprecated.
    socialLink: deprecated(PropTypes.string, 'Prefer use links prop'),
  }

  static defaultProps = {
    email: '',
    phoneNumber: '',
    links: [],
  }

  getSocialLinks = () => {
    const { links, socialLink } = this.props

    if (links) return links

    // handle deprecated `socialLink` prop
    if (socialLink) return [{ name: 'linkedin', href: socialLink }]
  }

'Use `RewardCard` sub-component instead.',
    ),

    buttonLabel: deprecated(
      PropTypes.string,
      'Use `RewardCard.Action` to insert your button and its callbacks instead.',
    ),
    buttonOnMouseEnter: deprecated(
      PropTypes.func,
      'Use `RewardCard.Action` to insert your button and its callbacks instead.',
    ),
    buttonOnMouseLeave: deprecated(
      PropTypes.func,
      'Use `RewardCard.Action` to insert your button and its callbacks instead.',
    ),
    buttonOnClick: deprecated(
      PropTypes.func,
      'Use `RewardCard.Action` to insert your button and its callbacks instead.',
    ),

    imageProps: deprecated(PropTypes.object, 'Use `RewardCard.Image` instead.'),

    isDisabled: deprecated(
      PropTypes.bool,
      'You should handle the disabled state direcly on your component.',
    ),
    starred: deprecated(
      PropTypes.bool,
      'Use `RewardCard` sub-component instead.',
    ),
    starLabel: deprecated(
      PropTypes.string,

PropTypes.string,
      'Use `Reward.Info` to compose your card content now.',
    ),
    titleAvailability: deprecated(
      PropTypes.string,
      'Use `Reward.Info` to compose your card content now.',
    ),
    valueContributors: deprecated(
      PropTypes.string,
      'Use `Reward.Info` to compose your card content now.',
    ),
    valueDelivery: deprecated(
      PropTypes.string,
      'Use `Reward.Info` to compose your card content now.',
    ),
    valueAvailability: deprecated(
      PropTypes.string,
      'Use `Reward.Info` to compose your card content now.',
    ),
    withoutBorder: PropTypes.bool,
  }

  static defaultProps = {
    withoutBorder: false,
  }

  render() {
    const { children, withoutBorder, ...others } = this.props

    return (
      <>

PropTypes.string,
      'Use `RewardCard.Row`, `RewardCard.RowContent` and `RewardCard.RowSide` to compose your card content instead.',
    ),
    subtitleTag: deprecated(
      PropTypes.string,
      'Use `RewardCard.Row`, `RewardCard.RowContent` and `RewardCard.RowSide` to compose your card content instead.',
    ),
    description: deprecated(
      PropTypes.string,
      'Use `RewardCard.Row`, `RewardCard.RowContent` and `RewardCard.RowSide` to compose your card content instead.',
    ),
    manageContributionDescription: deprecated(
      PropTypes.string,
      'Use `RewardCard` sub-component instead.',
    ),
    manageContributionLinkLabel: deprecated(
      PropTypes.string,
      'Use `RewardCard` sub-component instead.',
    ),
    manageContributionLinkHref: deprecated(
      PropTypes.string,
      'Use `RewardCard` sub-component instead.',
    ),

    buttonLabel: deprecated(
      PropTypes.string,
      'Use `RewardCard.Action` to insert your button and its callbacks instead.',
    ),
    buttonOnMouseEnter: deprecated(
      PropTypes.func,
      'Use `RewardCard.Action` to insert your button and its callbacks instead.',
    ),

* @example ['dateFormat', ['editFormat', "{ date: 'short' }", null, { defaultValue: 'new Date()', format: "{ raw: 'MMM dd, yyyy' }", time: 'false' }]]
   */
  editFormat: CustomPropTypes.dateFormat,

  /**
   * Enable the calendar component of the picker.
   */
  date: PropTypes.bool,

  /**
   * Enable the time list component of the picker.
   */
  time: PropTypes.bool,

  /** @ignore */
  calendar: deprecated(PropTypes.bool, 'Use `date` instead'),

  /**
   * A customize the rendering of times but providing a custom component.
   */
  timeComponent: CustomPropTypes.elementType,

  /** Specify the element used to render the calendar dropdown icon. */
  dateIcon: PropTypes.node,

  /** Specify the element used to render the time list dropdown icon. */
  timeIcon: PropTypes.node,

  dropUp: PropTypes.bool,
  popupTransition: CustomPropTypes.elementType,

  placeholder: PropTypes.string,

}
}

export class RewardCard extends Component {
  static Row = RewardCardRow
  static RowContent = RewardCardRowContent
  static RowSide = RewardCardRowSide
  static Title = RewardCardTitle
  static Image = RewardCardImage
  static Info = RewardCardInfo
  static CheckedSection = RewardCardCheckedSection
  static StarredBadge = RewardCardStarredBadge
  static DiamondBadge = RewardCardDiamondBadge

  static propTypes = {
    titleAmount: deprecated(
      PropTypes.string,
      'Use `RewardCard.Title` instead.',
    ),
    titleTag: deprecated(PropTypes.string, 'Use `RewardCard.Title` instead.'),
    subtitle: deprecated(
      PropTypes.string,
      'Use `RewardCard.Row`, `RewardCard.RowContent` and `RewardCard.RowSide` to compose your card content instead.',
    ),
    subtitleTag: deprecated(
      PropTypes.string,
      'Use `RewardCard.Row`, `RewardCard.RowContent` and `RewardCard.RowSide` to compose your card content instead.',
    ),
    description: deprecated(
      PropTypes.string,
      'Use `RewardCard.Row`, `RewardCard.RowContent` and `RewardCard.RowSide` to compose your card content instead.',
    ),