You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AbstractContainer.js 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /* @flow */
  2. import React, { Component } from 'react';
  3. /**
  4. * {@code AbstractContainer} component's property types.
  5. */
  6. export type Props = {
  7. /**
  8. * An optional accessibility label to apply to the container root.
  9. */
  10. accessibilityLabel?: string,
  11. /**
  12. * Whether or not this element is an accessibility element.
  13. */
  14. accessible?: boolean,
  15. /**
  16. * React Elements to display within the component.
  17. */
  18. children: React$Node | Object,
  19. /**
  20. * The event handler/listener to be invoked when this
  21. * {@code AbstractContainer} is clicked on Web or pressed on React
  22. * Native. If {@code onClick} is defined and {@link touchFeedback} is
  23. * undefined, {@code touchFeedback} is considered defined as
  24. * {@code true}.
  25. */
  26. onClick?: ?Function,
  27. /**
  28. * The event handler/listener to be invoked when this
  29. * {@code AbstractContainer} is long pressed on React Native.
  30. */
  31. onLongPress?: ?Function,
  32. /**
  33. * The style (as in stylesheet) to be applied to this
  34. * {@code AbstractContainer}.
  35. */
  36. style?: Array<?string> | Object,
  37. /**
  38. * If this instance is to provide visual feedback when touched, then
  39. * {@code true}; otherwise, {@code false}. If {@code touchFeedback} is
  40. * undefined and {@link onClick} is defined, {@code touchFeedback} is
  41. * considered defined as {@code true}.
  42. */
  43. touchFeedback?: ?Function,
  44. /**
  45. * Color to display when clicked.
  46. */
  47. underlayColor?: string,
  48. /**
  49. * If this {@code AbstractContainer} is to be visible, then {@code true}
  50. * or {@code false} if this instance is to be hidden or not rendered at
  51. * all.
  52. */
  53. visible?: ?boolean
  54. };
  55. /**
  56. * Abstract (base) class for container of React {@link Component} children with
  57. * a style.
  58. *
  59. * @extends Component
  60. */
  61. export default class AbstractContainer<P: Props> extends Component<P> {
  62. /**
  63. * Renders this {@code AbstractContainer} as a React {@code Component} of a
  64. * specific type.
  65. *
  66. * @param {string|ReactClass} type - The type of the React {@code Component}
  67. * which is to be rendered.
  68. * @param {Object|undefined} props - The read-only React {@code Component}
  69. * properties, if any, to render. If undefined, the props of this instance
  70. * will be rendered.
  71. * @protected
  72. * @returns {ReactElement}
  73. */
  74. _render(type, props?: P) {
  75. const {
  76. children,
  77. /* eslint-disable no-unused-vars */
  78. // The following properties are defined for the benefit of
  79. // AbstractContainer and its extenders so they are to not be
  80. // propagated.
  81. touchFeedback,
  82. visible,
  83. /* eslint-enable no-unused-vars */
  84. ...filteredProps
  85. } = props || this.props;
  86. // $FlowFixMe
  87. return React.createElement(type, filteredProps, children);
  88. }
  89. }