prop-types#oneOf JavaScript Examples

changePasswordValidation = Yup.object().shape({
  currentPassword: Yup.string()
    .required('This field is required'),
  newPassword: Yup.string()
    .min(8, 'Password must contain at least 8 characters')
    .matches(
      /^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$_%^&+=]).*$/,
//      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/,
      'Must contain at least one uppercase, one lowercase, one number',
    )
    .notOneOf([Yup.ref('currentPassword'), null], 'You should provide a new password')
    .required('This field is required'),
  confirmNewPassword: Yup.string()
    .oneOf([Yup.ref('newPassword'), null], 'You should confirm your password')
    .required('This field is required'),
})

SocialType = {
  name: oneOf([
    "behance",
    "dribbble",
    "facebook",
    "github",
    "goodreads",
    "instagram",
    "linkedin",
    "medium",
    "producthunt",
    "twitter",
    "youtube",
    "xing",
  ]),
  url: string,
}

ProjectType = {
  description: string,
  icon: oneOf(["github", "website"]),
  image: shape({
    childImageSharp: object.isRequired,
  }),
  name: string.isRequired,
  status: string,
  tags: arrayOf(string),
  url: string,
}

rootMenuPropTypes = {
  ...menuPropTypes,
  containerProps: object,
  initialMounted: bool,
  unmountOnClose: bool,
  transition: oneOfType([
    bool,
    exact({
      open: bool,
      close: bool,
      item: bool
    })
  ]),
  transitionTimeout: number,
  boundingBoxRef: object,
  boundingBoxPadding: string,
  reposition: oneOf(['auto', 'initial']),
  repositionFlag: oneOfType([string, number]),
  viewScroll: oneOf(['auto', 'close', 'initial']),
  submenuOpenDelay: number,
  submenuCloseDelay: number,
  portal: oneOfType([
    bool,
    exact({
      target: object,
      stablePosition: bool
    })
  ]),
  theming: string,
  onItemClick: func
}

menuPropTypes = {
  className: string,
  ...stylePropTypes('menu'),
  ...stylePropTypes('arrow'),
  menuStyle: object,
  arrowStyle: object,
  arrow: bool,
  setDownOverflow: bool,
  offsetX: number,
  offsetY: number,
  align: oneOf(['start', 'center', 'end']),
  direction: oneOf(['left', 'right', 'top', 'bottom']),
  position: oneOf(['auto', 'anchor', 'initial']),
  overflow: oneOf(['auto', 'visible', 'hidden'])
}

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

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

ControlledMenu.propTypes /* remove-proptypes */ = {
  ...rootMenuPropTypes,
  state: oneOf(values(MenuStateMap)),
  anchorPoint: exact({
    x: number,
    y: number
  }),
  anchorRef: object,
  skipOpen: object,
  captureFocus: bool,
  menuItemFocus: exact({
    position: oneOfType([string, number]),
    alwaysUpdate: bool
  }),
  onClose: func
};

rootMenuPropTypes = /*#__PURE__*/_extends({}, menuPropTypes, {
  containerProps: object,
  initialMounted: bool,
  unmountOnClose: bool,
  transition: /*#__PURE__*/oneOfType([bool, /*#__PURE__*/exact({
    open: bool,
    close: bool,
    item: bool
  })]),
  transitionTimeout: number,
  boundingBoxRef: object,
  boundingBoxPadding: string,
  reposition: /*#__PURE__*/oneOf(['auto', 'initial']),
  repositionFlag: /*#__PURE__*/oneOfType([string, number]),
  viewScroll: /*#__PURE__*/oneOf(['auto', 'close', 'initial']),
  submenuOpenDelay: number,
  submenuCloseDelay: number,
  portal: /*#__PURE__*/oneOfType([bool, /*#__PURE__*/exact({
    target: object,
    stablePosition: bool
  })]),
  theming: string,
  onItemClick: func
})

menuPropTypes = /*#__PURE__*/_extends({
  className: string
}, /*#__PURE__*/stylePropTypes('menu'), /*#__PURE__*/stylePropTypes('arrow'), {
  menuStyle: object,
  arrowStyle: object,
  arrow: bool,
  setDownOverflow: bool,
  offsetX: number,
  offsetY: number,
  align: /*#__PURE__*/oneOf(['start', 'center', 'end']),
  direction: /*#__PURE__*/oneOf(['left', 'right', 'top', 'bottom']),
  position: /*#__PURE__*/oneOf(['auto', 'anchor', 'initial']),
  overflow: /*#__PURE__*/oneOf(['auto', 'visible', 'hidden'])
})

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;

process.env.NODE_ENV !== "production" ? ControlledMenu.propTypes = /*#__PURE__*/_extends({}, rootMenuPropTypes, {
  state: /*#__PURE__*/oneOf( /*#__PURE__*/values(MenuStateMap)),
  anchorPoint: /*#__PURE__*/exact({
    x: number,
    y: number
  }),
  anchorRef: object,
  skipOpen: object,
  captureFocus: bool,
  menuItemFocus: /*#__PURE__*/exact({
    position: /*#__PURE__*/oneOfType([string, number]),
    alwaysUpdate: bool
  }),
  onClose: func
}) : void 0;

resetPasswordValidation = Yup.object().shape({
  email: Yup.string()
    .email('Invalid email address')
    .required('This field is required'),
  newPassword: Yup.string()
    .min(8, 'Password must contain at least 8 characters')
    .matches(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/,
      'Must contain at least one uppercase, one lowercase, one number',
    )
    .notOneOf([Yup.ref('currentPassword'), null], 'You should provide a new password')
    .required('This field is required'),
  confirmNewPassword: Yup.string()
    .oneOf([Yup.ref('newPassword'), null], 'You should confirm your password')
    .required('This field is required'),
})

VolProspectContactEventType = shape({
  id: number,
  created_at: string,
  // metadata only exists if event is successful
  metadata: shape({
    status: oneOf(['SPECIFIC_EVENT', ...Object.keys(Successful)]),
  }),
  result: oneOf(VOL_PROSPECT_CONTACT_EVENT_RESULTS),
  vol_prospect_assignment: number,
})

registrationValidation = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Too short')
    .matches('^([A-Za-zА-Яа-яёЁ][ -]?)+[A-Za-zА-Яа-яёЁ]+$', 'Invalid first name')
    .max(50, 'Too long')
    .required('This field is required'),
  lastName: Yup.string()
    .min(2, 'Too short')
    .matches('^([A-Za-zА-Яа-яёЁ][ \'-]?)+[A-Za-zА-Яа-яёЁ]+$', 'Invalid last name')
    .max(50, 'Too long')
    .required('This field is required'),
  email: Yup.string()
    .email('Invalid email address')
    .required('This field is required'),
  password: Yup.string()
    .min(8, 'Password must contain at least 8 characters')
    .max(16, 'Password must contain 16 characters maximum')
    .matches(
      /^(?=.*[a-z])(?=.*\d)(?=.*[A-Z])(?=.*[!@#$%^&*()_+=-]).*$/,
      'Password must contain at least one uppercase, one lowercase, one number and one special symbol (!@#$%^&*()_+-=)',
    )
    .required('This field is required'),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password'), null], 'You should confirm your password')
    .required('This field is required'),
})

DateRangePickerCalendar.propTypes = {
  locale: object.isRequired,
  startDate: instanceOf(Date),
  endDate: instanceOf(Date),
  focus: oneOf([START_DATE, END_DATE]),
  month: instanceOf(Date),
  onStartDateChange: func.isRequired,
  onEndDateChange: func.isRequired,
  onFocusChange: func.isRequired,
  onMonthChange: func,
  minimumDate: instanceOf(Date),
  maximumDate: instanceOf(Date),
  minimumLength: number,
  maximumLength: number,
  modifiers: objectOf(func),
  modifiersClassNames: objectOf(string),
  weekdayFormat: string,
  touchDragEnabled: bool
}

Comp.propTypes = {
  /** should the text get ellipsed with tooltip, or should it get broken into lines when it reaches the end of its container */
  ellipsis: bool,
  /** `ellipsis` prop. Tooltip content calculation relation to a dom element. Can be either:
   *  `'window', 'scrollParent', 'viewport', 'parent'`, `element` or
   * `function` based predicate i.e. (elm) =>
   *  elm.getAttribute('data-hook') === 'value'
   */
  appendTo: oneOfType([
    oneOf(['window', 'scrollParent', 'viewport', 'parent']),
    element,
    func,
  ]),
  /** `ellipsis` prop. Whether to enable the flip behaviour. This behaviour is used to flip the Tooltips placement when it starts to overlap the target element. */
  flip: bool,
  /** `ellipsis` prop. Whether to enable the fixed behaviour. This behaviour is used to keep the Tooltip at it's original placement even when it's being positioned outside the boundary. */
  fixed: bool,
  /** `ellipsis` prop. Tooltip content placement in relation to target element */
  placement: string,
  /** `ellipsis` prop. Tooltip timeout value. */
  timeout: number,
  /** `ellipsis` prop. Tooltip content max width value. */
  maxWidth: oneOfType([string, number]),
  /** `ellipsis` prop. Tooltip content zIndex. */
  zIndex: number,
  /** `ellipsis` prop. Tooltip hide delay. */
  hideDelay: number,
  /** `ellipsis` prop. Tooltip show delay. */
  showDelay: number,
  /** `ellipsis` prop. Whether to enable the tooltip when an ellipsis is necessary */
  showTooltip: bool,
};

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,
};

Text.propTypes = {
  dataHook: string,
  /** tag name that will be rendered */
  tagName: string,

  /** class to be applied to the root element */
  className: string,

  /** font size of the text */
  size: oneOf(Object.keys(SIZES)),

  /** any nodes to be rendered (usually text nodes) */
  children: any,

  /** is the text type is secondary. Affects the font color */
  secondary: bool,

  /** skin color of the text */
  skin: oneOf(Object.keys(SKINS)),

  /** make the text color lighter */
  light: bool,

  /** font weight of the text */
  weight: oneOf(Object.keys(WEIGHTS)),

  ...ellipsisHOC.propTypes,
};

Heading.propTypes = {
  dataHook: string,
  /** any nodes to be rendered (usually text nodes) */
  children: any,

  /** is the text has dark or light skin */
  light: bool,

  /** typography of the heading */
  appearance: oneOf(Object.keys(APPEARANCES)),

  ...ellipsisHOC.propTypes,
};

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,
};

LeadType = shape({
  id: number.isRequired,
  person: shape({
    first_name: string.isRequired,
    last_name: string.isRequired,
    phone: string.isRequired,
    city: string.isRequired,
    state: string.isRequired,
  }),
  created_at: string.isRequired,
  expired_at: string,
  status: oneOf(LEAD_STATUSES),
  vol_prospect_contact_events: arrayOf(VolProspectContactEventType),
})

SortingHeader.propTypes = {
  sortingState: shape({
    activeSortField: oneOf(Object.values(sortFields)).isRequired,
    sortDirections: shape({}).isRequired,
  }).isRequired,
  toggleSortingStateAction: func.isRequired,
  hasMultipleSavedRecords: bool.isRequired,
};

process.env.NODE_ENV !== "production" ? SubMenu.propTypes = /*#__PURE__*/_extends({}, menuPropTypes, uncontrolledMenuPropTypes, {
  disabled: bool,
  openTrigger: /*#__PURE__*/oneOf(['none', 'clickOnly']),
  label: /*#__PURE__*/oneOfType([node, func]),
  itemProps: /*#__PURE__*/shape( /*#__PURE__*/_extends({}, /*#__PURE__*/stylePropTypes()))
}) : void 0;

Item.propTypes = {
  children: any,
  layout: oneOf(['button']),
};

ItemGroup.propTypes = {
  children: any, // TODO: validate children are either <Item> od <Divider>
  position: oneOf(['start', 'end']),
};

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,
};

ButtonLayout.propTypes = {
  className: string,
  active: bool,
  children: any,
  disabled: bool,

  /** The size of the button */
  height: oneOf(['x-small', 'small', 'medium', 'large', 'x-large']),
  hover: bool,

  /** When true the button will match its parent width */
  matchParent: bool,

  /** The theme of the button */
  theme: oneOf([
    'transparent',
    'fullred',
    'fullgreen',
    'fullpurple',
    'emptyred',
    'emptygreen',
    'emptybluesecondary',
    'emptyblue',
    'emptypurple',
    'fullblue',
    'login',
    'emptylogin',
    'transparentblue',
    'whiteblue',
    'whiteblueprimary',
    'whitebluesecondary',
    'close-standard',
    'close-dark',
    'close-transparent',
    'icon-greybackground',
    'icon-standard',
    'icon-standardsecondary',
    'icon-white',
    'icon-whitesecondary',
    'no-border',
    'dark-no-border',
    'outlined',
  ]),

  type: oneOf(['button', 'submit', 'reset']),
};

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