prop-types#node JavaScript Examples

SlideAnimation.propTypes = {
  isVisible: bool.isRequired,
  direction: oneOf([SlideDirection.in, SlideDirection.out]),
  animateAppear: bool,
  animateEnter: bool,
  animateLeave: bool,
  children: node,
  onEnter: func,
  onEntered: func,
  onExit: func,
  onExited: func,
};

Card.propTypes = {
  /** any node to render inside card */
  children: node,
  /** any node that controls card e.g. a close button */
  controls: node,
  /** makes the card stretch to max height in a container */
  stretchVertically: bool,
  /** makes the card's overflow content to be hidden */
  hideOverflow: bool,
  /** additional css classes */
  className: string,
  dataHook: string,
};

FillPreview.propTypes = {
  /** render as some other component or DOM tag */
  as: oneOfType([func, object, string]),

  /** control focusability */
  tabIndex: number,

  /** Color, gradient, image url or svg to be rendered as a preview content */
  fill: oneOfType([string, node]),

  /** Outlines the border when set to true */
  selected: bool,

  /** Pass your handler for click event */
  onClick: func,

  /** Puts the component into a disabled state */
  disabled: bool,

  /** Control elements aspect ratio value:  */
  aspectRatio: oneOfType([string, number]),
};

MultiSelectComposite.propTypes = {
  children: Composite.children(
    Composite.optional(Label),
    Composite.once(MultiSelect),
  ),
  required: bool,
  appendToParent: bool,
  info: node,
  tooltip: node,
};

VerticalTabs.propTypes = {
  /** Text Size (small, medium) */
  size: oneOf(['small', 'medium']),

  /** Current selected tab id */
  activeTabId: number,

  /** Callback function called on tab selection change with the following parameters<code>(id)</code> */
  onChange: func,

  /** Child nodes of this component must be of type <code><VerticalTabs.TabsGroup></code> or <code><VerticalTabs.Footer></code>*/
  children: arrayOf(node),

  /** Data attribute for testing purposes */
  dataHook: string,
};

SingleComponentStacked.propTypes = {
  /** storybook name */
  name: oneOfType([string, object]),
  /** names of the used components */
  componentsNames: array,
  /** any node to render inside */
  children: node,
  /** size of the children column. Can be one of "singleComponentSizes" constant */
  size: number,
};

propTypes = {
    container: oneOfType([
        func,
        shape({current: oneOfType([instanceOf(Element), instanceOf(_window.constructor)])}),
    ]),
    reference: oneOfType([
        func,
        instanceOf(DOMRect),
        shape({current: instanceOf(Element)}),
    ]),
    placements: func,
    placement: shape({
        top: number,
        left: number,
    }),
    overflow: func,
    onPlacement: func,
    default: number,
    children: node,
}

propTypes = {
    style: shape({}),
    onScroll: func,
    onUpdate: func,
    scrollOnDOMChange: bool,
    children: node,
    element: node,
    cssVarsOnTracks: bool, // temporary workaround for Blink bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1266517
}

propTypes = {
    puppeteer: {
        children: node,
        props: shape({}),
        namespace: string,
    },
    break: {
        children: node,
        props: arrayOf(string),
        namespace: string,
    },
}

export function processChannelMessage(inputMessage) {
    if(inputMessage == null) {
        inputMessage = node(nodeIdInputMessage);
    }
    console.log('channelMessage', inputMessage)
    let process = new Promise((resolve, reject) => webSocketSend(DataChannelMessage(selectedRecipientUUID, inputMessage)));
    process.then(() => {});
    process.catch((err) => console.log(err));
    return false;
}

process.env.NODE_ENV !== "production" ? MenuItem.propTypes = /*#__PURE__*/_extends({}, /*#__PURE__*/stylePropTypes(), {
  value: any,
  href: string,
  type: /*#__PURE__*/oneOf(['checkbox', 'radio']),
  checked: bool,
  disabled: bool,
  children: /*#__PURE__*/oneOfType([node, func]),
  onClick: func
}) : void 0;

MenuItem.propTypes = {
  ...stylePropTypes(),
  value: any,
  href: string,
  type: oneOf(['checkbox', 'radio']),
  checked: bool,
  disabled: bool,
  children: oneOfType([node, func]),
  onClick: func
};

SubMenu.propTypes = {
  ...menuPropTypes,
  ...uncontrolledMenuPropTypes,
  disabled: bool,
  openTrigger: oneOf(['none', 'clickOnly']),
  label: oneOfType([node, func]),
  itemProps: shape({
    ...stylePropTypes()
  })
};

InnerShadowType = {
  ...ViewPropTypes,
  children: node,
  style: shape({
    ...ViewPropTypes.style,
    width: number.isRequired,
    height: number.isRequired,
  }),
}

ctaType = shape({
  type: oneOf(['button', 'icon']).isRequired,
  action: func.isRequired,
  label: string,
  icon: oneOfType([string, node]),
  tooltip: string
})

InputAreaWithLabelComposite.propTypes = {
  children: any,
  required: bool,
  appendToParent: bool,
  info: node,
  tooltip: node,
};

Link.propTypes = {
  children: node.isRequired,
  isActive: bool,
};

FieldLabelAttributes.propTypes = {
  required: bool,
  info: node,
  appendToParent: bool,
  tooltip: node,
};

ToggleButton.propTypes = {
  children: node,
  prefixIcon: node,
  value: string,
  selected: bool,
  disabled: bool,
};

Swatches.propTypes = {
  /** Array of colors to be shown as swatches */
  colors: array,

  /** Selected color */
  selected: string,

  /** Data-hook for testing */
  dataHook: string,

  /** Callback function when user clicks on a swatch. Returns color HEX string representation. */
  onClick: func,

  /** Size of swatches */
  size: oneOf(['small', 'medium']),

  /** If true shows no color option */
  showClear: bool,

  /** optional message to display in tooltip when showClear is true */
  showClearMessage: node,

  /** Callback function when user clicks on Add button and selects a color to be added. Returns color HEX string representation. */
  onAdd: func,

  /** Callback function when user changes color in Color Picker. Returns color HEX string representation. */
  onChange: func,

  /** Callback function when user closes Color Picker without picking color. */
  onCancel: func,

  /** If true shows add button which triggers colors picker*/
  showAddButton: bool,

  /** Text for add button tooltip*/
  addButtonMessage: string,

  /** Size of Plus icon inside add button */
  addButtonIconSize: oneOf(['small', 'medium']),

  /** Number of maximum columns. Default value is 6 */
  columns: number,

  /** Gap between swatches. Default value is 12 */
  gap: number,
};

Title.propTypes = {
  children: node,
  dataHook: string,
};

SelectedCount.propTypes = {
  children: node,
  dataHook: string,
};

Link.propTypes = {
  href: string,
  children: node,
};

Providers.propTypes = {
  children: node.isRequired,
};

Flex.propTypes = {
  children: node.isRequired,
};

Popover.propTypes = {
  children: node,
  open: bool
}

LayoutTicket.propTypes = {
  children: node.isRequired,
};

MainLayout.propTypes = {
  children: node.isRequired,
};

propTypes = {
    expanded: bool,
    onTransitionEnd: func,
    children: node.isRequired,
}