How to use the react-view.PropTypes.ReactNode function in react-view

To help you get started, we’ve selected a few react-view examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github uber / baseweb / documentation-site / components / yard / config / accordion.ts View on Github external
Accordion,
    Panel,
  },
  theme: [],
  props: {
    children: {
      value: `
  Content 1


  Content 2


  Content 3
`,
      type: PropTypes.ReactNode,
      description: `An array of Panel components.`,
      imports: {
        'baseui/accordion': {named: ['Panel']},
      },
    },
    onChange: {
      value: '({expanded}) => console.log(expanded)',
      type: PropTypes.Function,
      description: 'Called when a panel is expanded.',
    },
    disabled: {
      value: false,
      type: PropTypes.Boolean,
      description: 'Renders component in disabled state.',
    },
    overrides: {
github uber / baseweb / documentation-site / components / yard / config / modal.ts View on Github external
scope: {Modal, ModalHeader, ModalBody, ModalFooter, ModalButton, SIZE, ROLE},
  theme: [],
  props: {
    children: {
      value: `Hello world

  Proin ut dui sed metus pharetra hend rerit vel non mi.
  Nulla ornare faucibus ex, non facilisis nisl. Maecenas
  aliquet mauris ut tempus.


  Cancel
  Okay

`,
      type: PropTypes.ReactNode,
      description: 'Modal content.',
    },
    onClose: {
      value: '() => setIsOpen(false);',
      type: PropTypes.Function,
      description: 'A callback that is invoked when the modal will close.',
      propHook: {
        what: 'false',
        into: 'isOpen',
      },
    },
    closeable: {
      value: true,
      type: PropTypes.Boolean,
      description: 'Whether the modal should be closeable by the user.',
    },
github uber / baseweb / documentation-site / components / yard / config / button.ts View on Github external
'buttonTertiaryText',
    'buttonTertiaryHover',
    'buttonTertiaryActive',
    'buttonTertiarySelectedFill',
    'buttonTertiarySelectedText',
    'buttonMinimalFill',
    'buttonMinimalText',
    'buttonMinimalHover',
    'buttonMinimalActive',
    'buttonDisabledFill',
    'buttonDisabledText',
  ],
  props: {
    children: {
      value: 'Hello',
      type: PropTypes.ReactNode,
      description: `Visible label.`,
    },
    onClick: {
      value: '() => alert("click")',
      type: PropTypes.Function,
      description: `Function called when button is clicked.`,
    },
    startEnhancer: {
      value: undefined,
      placeholder: '() =&gt; <span>🦊</span>',
      type: PropTypes.Function,
      description: `A component rendered at the start of the button.`,
    },
    endEnhancer: {
      value: undefined,
      placeholder: '<i>world!</i>',
github uber / baseweb / documentation-site / components / yard / config / radio.ts View on Github external
what: 'e.target.value',
        into: 'value',
      },
    },
    children: {
      value: `One

  Two


  Three
`,
      type: PropTypes.ReactNode,
      description: 'Radios within the RadioGroup',
      imports: {
        'baseui/radio': {named: ['Radio']},
      },
    },
    align: {
      value: 'ALIGN.vertical',
      type: PropTypes.Enum,
      options: ALIGN,
      description: 'How to position radio buttons in the group.',
      imports: {
        'baseui/radio': {
          named: ['ALIGN'],
        },
      },
    },
github uber / baseweb / documentation-site / components / yard / config / button-group.ts View on Github external
'buttonMinimalFill',
    'buttonMinimalText',
    'buttonMinimalHover',
    'buttonMinimalActive',
    'buttonDisabledFill',
    'buttonDisabledText',
    'buttonPrimarySelectedFill',
    'buttonPrimarySelectedText',
    'buttonSecondarySelectedFill',
    'buttonSecondarySelectedText',
  ],
  props: {
    children: {
      value:
        '<button>One</button>\n<button>Two</button>\n<button>Three</button>',
      type: PropTypes.ReactNode,
      description: 'Buttons within the group',
      imports: {
        'baseui/button': {
          named: ['Button'],
        },
      },
    },
    onClick: {
      value: '(event, index) =&gt; {\n  setSelected([index]);\n}',
      type: PropTypes.Function,
      description: `Function called when any button is clicked.`,
      propHook: {
        what: '`[${index}]`',
        into: 'selected',
      },
    },
github uber / baseweb / documentation-site / components / yard / config / form-control.ts View on Github external
const formControlProps = require('!!extract-react-types-loader!../../../../src/form-control/form-control.js');
const inputProps = require('!!extract-react-types-loader!../../../../src/input/input.js');

const TextareaConfig: TConfig = {
  imports: {
    'baseui/form-control': {named: ['FormControl']},
  },
  scope: {
    FormControl,
    Input,
  },
  theme: [],
  props: {
    children: {
      value: '<input>',
      type: PropTypes.ReactNode,
      description: 'Content wrapped by FormControl.',
      imports: {'baseui/input': {named: ['Input']}},
    },
    label: {
      value: `() =&gt; 'label'`,
      type: PropTypes.Function,
      description: 'A label rendered above the input field.',
    },
    caption: {
      value: `() =&gt; 'caption'`,
      type: PropTypes.Function,
      description: 'A caption rendered below the input field.',
    },
    positive: {
      value: undefined,
      type: PropTypes.Function,
github uber / baseweb / documentation-site / components / yard / config / header-navigation.ts View on Github external
Tab Link One


Tab Link Two




<button>Get started</button>


`,
      type: PropTypes.ReactNode,
      description: 'Header navigation content.',
    },
    overrides: {
      value: undefined,
      type: PropTypes.Custom,
      description: 'Lets you customize all aspects of the component.',
      custom: {
        names: ['Root'],
        sharedProps: {},
      },
    },
  },
  mapTokensToProps: {
    HeaderNavigation: headerNavigationProps,
    Button: buttonProps,
  },
github uber / baseweb / documentation-site / components / yard / config / list-item.ts View on Github external
},
    'baseui/icon': {
      named: ['Check'],
    },
  },
  scope: {
    ListItem,
    ListItemLabel,
    ARTWORK_SIZES,
    Check,
  },
  theme: [],
  props: {
    children: {
      value: 'Label',
      type: PropTypes.ReactNode,
      description: 'List item content.',
    },
    artwork: {
      value: 'props =&gt; ',
      type: PropTypes.ReactNode,
      description: 'Left-hand icon to render in the list item.',
    },
    artworkSize: {
      value: undefined,
      options: ARTWORK_SIZES,
      enumName: 'ARTWORK_SIZES',
      type: PropTypes.Enum,
      description: 'Defines the size of the artwork.',
      imports: {
        'baseui/list': {
          named: ['ARTWORK_SIZES'],
github uber / baseweb / documentation-site / components / yard / config / card.ts View on Github external
},
  theme: [],
  props: {
    children: {
      value: `
  Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
  ornare faucibus ex, non facilisis nisl. Proin ut dui sed metus
  pharetra hend rerit vel non mi. Nulla
  ornare faucibus ex, non facilisis nisl.


<button>
  Button Label
</button>
`,
      type: PropTypes.ReactNode,
      description: `An array of Tab components.`,
      imports: {
        'baseui/card': {named: ['StyledBody', 'StyledAction']},
        'baseui/button': {named: ['Button']},
      },
    },
    title: {
      value: undefined,
      placeholder: 'I am a card',
      type: PropTypes.String,
      description: 'Title to be displayed in the card.',
    },
    headerImage: {
      value: undefined,
      placeholder: 'https://source.unsplash.com/user/erondu/700x400',
      type: PropTypes.String,
github uber / baseweb / documentation-site / components / yard / config / progress-steps-numbered.ts View on Github external
NumberedStep,
    Button,
  },
  props: {
    ...ProgressStepsConfig.props,
    children: {
      value: `
  <p>Address on file: 1455 Market Street</p>
  <button size="compact"> setCurrent(1)}&gt;
    Next
  </button>


  Payment verified
`,
      type: PropTypes.ReactNode,
      description: `An array of Tab components.`,
      imports: {
        'baseui/progress-steps': {named: ['NumberedStep']},
        'baseui/button': {named: ['Button']},
      },
      propHook: ProgressStepsConfig.props.children.propHook,
    },
  },
  mapTokensToProps: {
    ProgressSteps: progressStepsProps,
    NumberedStep: numberedStepProps,
    Button: buttonProps,
  },
};

export default ProgressStepsNumberedConfig;