PolicyCell.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /*
  2. * Copyright (C) 2016 - present Instructure, Inc.
  3. *
  4. * This file is part of Canvas.
  5. *
  6. * Canvas is free software: you can redistribute it and/or modify it under
  7. * the terms of the GNU Affero General Public License as published by the Free
  8. * Software Foundation, version 3 of the License.
  9. *
  10. * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
  11. * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
  12. * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
  13. * details.
  14. *
  15. * You should have received a copy of the GNU Affero General Public License along
  16. * with this program. If not, see <http://www.gnu.org/licenses/>.
  17. */
  18. import $ from 'jquery'
  19. import React from 'react'
  20. import PropTypes from 'prop-types'
  21. import ReactDOM from 'react-dom'
  22. import RadioInput from 'instructure-ui/lib/components/RadioInput'
  23. import RadioInputGroup from 'instructure-ui/lib/components/RadioInputGroup'
  24. import ScreenReaderContent from 'instructure-ui/lib/components/ScreenReaderContent'
  25. export default class PolicyCell extends React.Component {
  26. static renderAt (elt, props) {
  27. ReactDOM.render(<PolicyCell {...props} />, elt)
  28. }
  29. constructor () {
  30. super()
  31. this.handleValueChanged = this.handleValueChanged.bind(this)
  32. }
  33. static propTypes = {
  34. selection: PropTypes.string,
  35. category: PropTypes.string,
  36. channelId: PropTypes.string,
  37. buttonData: PropTypes.array,
  38. onValueChanged: PropTypes.func,
  39. }
  40. handleValueChanged (newValue) {
  41. if (this.props.onValueChanged) {
  42. this.props.onValueChanged(this.props.category, this.props.channelId, newValue)
  43. }
  44. }
  45. renderIcon (iconName, title) {
  46. return <span>
  47. <i aria-hidden="true" className={iconName} />
  48. <ScreenReaderContent>{title}</ScreenReaderContent>
  49. </span>
  50. }
  51. renderRadioInput(iconName, title, value) {
  52. return <RadioInput
  53. key={value}
  54. label={this.renderIcon(iconName, title)}
  55. value={value}
  56. id={`cat_${this.props.category}_ch_${this.props.channelId}_${value}`}
  57. />
  58. }
  59. renderRadioInputs() {
  60. const buttonData = this.props.buttonData
  61. return buttonData.map((button) => {
  62. return this.renderRadioInput(button.icon, button.title, button.code)
  63. })
  64. }
  65. render () {
  66. return <RadioInputGroup
  67. name={Math.floor(1 + Math.random() * 0x10000).toString()}
  68. description=""
  69. variant="toggle"
  70. size="small"
  71. defaultValue={this.props.selection}
  72. onChange={this.handleValueChanged}
  73. >
  74. {this.renderRadioInputs()}
  75. </RadioInputGroup>
  76. }
  77. }