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.

Switch.js 1.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. /* @flow */
  2. import { ToggleStateless } from '@atlaskit/toggle';
  3. import React, { Component } from 'react';
  4. type Props = {
  5. /**
  6. * CSS class name.
  7. */
  8. className: string,
  9. /**
  10. * Indicates whether the switch is disabled or not.
  11. */
  12. disabled: boolean,
  13. /**
  14. * Handler called when the user presses the switch.
  15. */
  16. onValueChange: Function,
  17. /**
  18. * The current value.
  19. */
  20. value: boolean
  21. };
  22. /**
  23. * Renders a boolean input.
  24. */
  25. export default class Switch extends Component<Props> {
  26. /**
  27. * Implements React's {@link Component#render()}.
  28. *
  29. * @inheritdoc
  30. * @returns {ReactElement}
  31. */
  32. render() {
  33. const {
  34. className,
  35. disabled,
  36. onValueChange,
  37. value,
  38. ...props
  39. } = this.props;
  40. // TODO: onChange will be called with parameter Event. It will be good
  41. // if we translate it to calling the onValueChange with the value as a
  42. // parameter to match the native implementation.
  43. return (
  44. <div className = { className }>
  45. <ToggleStateless
  46. isChecked = { value }
  47. isDisabled = { disabled }
  48. onChange = { onValueChange }
  49. { ...props } />
  50. </div>
  51. );
  52. }
  53. }