How to use the react-desc.PropTypes.bool function in react-desc

To help you get started, we’ve selected a few react-desc 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 grommet / grommet / src / js / components / FormField / doc.js View on Github external
),
    help: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(
      'Any help text describing how the field works',
    ),
    htmlFor: PropTypes.string.description(
      'The id of the input element contained in this field',
    ),
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(
      'A short label describing the field',
    ),
    name: PropTypes.string.description(
      `The name of the value data when in a Form and the name of
      the input field.`,
    ),
    margin: marginProp,
    pad: PropTypes.bool.description(
      'Whether to add padding to align with the padding of TextInput.',
    ),
    required: PropTypes.bool.description('Whether the field is required.'),
    validate: PropTypes.oneOfType([
      PropTypes.shape({
        regexp: PropTypes.object, // regular expression
        message: PropTypes.string,
      }),
      PropTypes.func,
    ]).description(
      `Validation rule when used within a grommet Form. Provide a regular
      expression or a function. If a
      function is provided, it will be called with two arguments, the value
      for this field and the entire value object. This permits validation to
      encompass multiple fields. The function should return a string message
      describing the validation issue, if any.`,
github grommet / grommet / src / js / components / Meter / doc.js View on Github external
`import { Meter } from 'grommet';
<meter>`,
    );
  // We don't include svg due to a collision on the values property
  // .intrinsicElement('svg');

  DocumentedMeter.propTypes = {
    ...genericProps,
    background: backgroundPropType.defaultValue({
      color: 'light-2',
      opacity: 'medium',
    }),
    max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(
      'The maximum value for the Meter.',
    ),
    round: PropTypes.bool
      .description('Whether to round the line ends')
      .defaultValue(false),
    size: PropTypes.oneOfType([
      PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge', 'full']),
      PropTypes.string,
    ])
      .description('The size of the Meter.')
      .defaultValue('medium'),
    thickness: PropTypes.oneOfType([
      PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
      PropTypes.string,
    ])
      .description('The size of the Meter.')
      .defaultValue('medium'),
    type: PropTypes.oneOf(['bar', 'circle'])
      .description('The visual type of meter.')</meter>
github atanasster / grommet-nextjs / components / grommet / MaskedInput / doc.js View on Github external
import { DropInput } from 'grommet-controls';
    
    `);

  DocumentedElement.propTypes = {
    a11yTitle: a11yTitlePropType,
    a11yDropTitle: PropTypes.string.description(
      'Custom drop button title to be used by screen readers.'
    ),
    placeholder: PropTypes.string.description(
      'Placeholder text to use when no value is provided.'
    ),
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value for the field.'),
    id: PropTypes.string.description('The id attribute of the input.'),
    name: PropTypes.string.description('The name attribute of the input.'),
    disabled: PropTypes.bool.description('Setting to true causes the input to be disabled.'),
    onChange: PropTypes.func.description('Function that will be called when the user enters a new valuu.'),
    focusIndicator: PropTypes.bool.description('Whether the plain text input should receive a focus outline.'),
    plain: PropTypes.bool.description(
      `Whether this is a plain input with no border or padding.
Only use this when the containing context provides sufficient affordance`
    ),
    mask: PropTypes.oneOfType([
      PropTypes.array,
      PropTypes.func,
      PropTypes.bool,
      PropTypes.shape({
        mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
        pipe: PropTypes.func,
      }),
    ]).description('An array or a function that defines how the user input is going to be masked.'),
    guide: PropTypes.bool.description('When masked, a boolean that tells the component whether to be in guide or no guide mode.'),
github grommet / grommet / src / js / components / RadioButton / doc.js View on Github external
export const doc = RadioButton =&gt; {
  const DocumentedRadioButton = describe(RadioButton)
    .availableAt(getAvailableAtBadge('RadioButton'))
    .description('A radio button control.')
    .details(
      `RadioButton should typically not be used directly.
      Instead, use RadioButtonGroup.`,
    )
    .usage(
      `import { RadioButton } from 'grommet';
`,
    )
    .intrinsicElement('input');

  DocumentedRadioButton.propTypes = {
    checked: PropTypes.bool.description('Same as React <input checked="{}">'),
    disabled: PropTypes.bool.description(
      `Same as React <input disabled="{}">. Also adds a hidden input element
with the same name so form submissions work.`,
    ),
    id: PropTypes.string.description(
      'The DOM id attribute value to use for the underlying <input> element.',
    ),
    label: PropTypes.node.description(
      'Label text to place next to the control.',
    ),
    name: PropTypes.string.description(
      `The DOM name attribute value to use for the underlying <input>
       element.`,
    ).isRequired,
    onChange: PropTypes.func.description(
      `Function that will be called when the user clicks the radio button. It
github grommet / grommet / es6 / components / Tab / doc.js View on Github external
export var doc = function doc(Tab) {
  var DocumentedTab = describe(Tab).description('One tab within Tabs.').usage("import { Tab } from 'grommet';\n").intrinsicElement('button');
  DocumentedTab.propTypes = {
    plain: PropTypes.bool.description('Whether this is a plain tab with no style.').defaultValue(false),
    title: PropTypes.node.description('The title of the tab.')
  };
  return DocumentedTab;
};
export var themeDoc = {
github grommet / grommet / src / js / components / Layer / doc.js View on Github external
),
    modal: PropTypes.bool
      .description(
        `Whether there should be an overlay preventing interaction underneath 
        the layer.`,
      )
      .defaultValue(true),
    onClickOutside: PropTypes.func.description(
      `Function that will be invoked on modal layers when the user clicks 
      outside the layer.`,
    ),
    onEsc: PropTypes.func.description(
      `Function that will be called when the user presses the escape key inside
       the layer.`,
    ),
    plain: PropTypes.bool
      .description(
        'Whether this is a plain Layer with no background color or border.',
      )
      .defaultValue(false),
    position: PropTypes.oneOf([
      'bottom',
      'bottom-left',
      'bottom-right',
      'center',
      'hidden',
      'left',
      'right',
      'top',
      'top-left',
      'top-right',
    ])
github grommet / grommet / src / js / components / Paragraph / doc.js View on Github external
.description('A paragraph of text.')
    .usage(
      `import { Paragraph } from 'grommet';
`,
    )
    .intrinsicElement('p');

  DocumentedParagraph.propTypes = {
    ...genericProps,
    color: colorPropType.description(
      'A color identifier to use for the text color.',
    ),
    fill: PropTypes.bool
      .description('Whether the width should fill the container.')
      .defaultValue(false),
    responsive: PropTypes.bool
      .description(`Whether margin should be scaled for mobile environments.`)
      .defaultValue(true),
    size: PropTypes.oneOfType([
      PropTypes.oneOf(['small', 'medium', 'large', 'xlarge', 'xxlarge']),
      PropTypes.string,
    ])
      .description('The size of the Paragraph text.')
      .defaultValue('medium'),
    textAlign: PropTypes.oneOf(['start', 'center', 'end'])
      .description('How to align the text inside the paragraph.')
      .defaultValue('start'),
  };

  return DocumentedParagraph;
};
github grommet / grommet / src / js / components / DataTable / doc.js View on Github external
PropTypes.node,
          PropTypes.shape({
            aggregate: PropTypes.bool,
          }),
        ]),
        header: PropTypes.oneOfType([
          PropTypes.string,
          PropTypes.node,
          PropTypes.shape({
            aggregate: PropTypes.bool,
          }),
        ]),
        primary: PropTypes.bool,
        property: PropTypes.string.isRequired,
        render: PropTypes.func,
        search: PropTypes.bool,
        sortable: PropTypes.bool,
      }),
    ).description(
      `A description of the data. The order controls the column order.
      'property' indicates which property in the data objects to associate
      the column with. 'header' indicates what to display in the column
      header. 'render' allows for custom rendering of body cells. Use 'render'
      for custom formatting for things like currency and date or to
      display rich content like Meters. 'align' indicates how the cells in
      the column are aligned. 'aggregate' indicates how the data in the
      column should be aggregated. This only applies to a footer or groupBy
      context. 'footer' indicates what should be shown in the footer for
      the column. 'search' indicates whether a search filter should be
      made available for the column. 'primary' indicates that this property
      should be used as the unique identifier, which gives the cell 'row' scope
      for accessibility. If 'primary' is not used for any column, and
github grommet / grommet / es6 / components / Grommet / doc.js View on Github external
export default (function (Grommet) {
  var DocumentedGrommet = describe(Grommet).availableAt(getAvailableAtBadge('Grommet')).description('This is the top level Grommet container.').usage('import { Grommet } from \'grommet\';\n...');

  DocumentedGrommet.propTypes = {
    full: PropTypes.bool.description('Whether to take the whole viewport.'),
    theme: PropTypes.object.description('Custom styles for Grommet app component.')
  };

  return DocumentedGrommet;
});
github grommet / grommet / es6 / components / CheckBox / doc.js View on Github external
export default (function (CheckBox) {
  var DocumentedCheckBox = describe(CheckBox).availableAt(getAvailableAtBadge('CheckBox')).description('A checkbox toggle control.').usage('import { CheckBox } from \'grommet\';\n');

  DocumentedCheckBox.propTypes = {
    checked: PropTypes.bool.description('Same as React <input checked="{}">'),
    disabled: PropTypes.bool.description('Same as React <input disabled="{}">. Also adds a hidden input element\n      with the same name so form submissions work.'),
    id: PropTypes.string.description('The DOM id attribute value to use for the underlying <input> element.'),
    label: PropTypes.node.description('Label text to place next to the control.'),
    name: PropTypes.string.description('The DOM name attribute value to use for the underlying <input> element.'),
    onChange: PropTypes.func.description('Function that will be called when the user clicks the check box. It\n      will be passed a React event object. The current state can be accessed\n      via event.target.checked. Same as React <input>.'),
    reverse: PropTypes.bool.description('Whether to show the label in front of the checkbox.'),
    toggle: PropTypes.bool.description('Whether to visualize it as a toggle switch.')
  };

  return DocumentedCheckBox;
});