Advertisement
Guest User

Untitled

a guest
Jun 25th, 2019
117
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.11 KB | None | 0 0
  1. class FileUpload extends Component {
  2.  
  3. // other stuff omitted
  4.  
  5. constructor(props) {
  6. super(props);
  7.  
  8. this.state = {
  9. activeAccordionIndex: -1
  10. };
  11.  
  12. handleAccordionClick = (e, titleProps) => {
  13. const { index } = titleProps;
  14. const { activeAccordionIndex } = this.state;
  15. const newIndex = activeAccordionIndex === index ? -1 : index;
  16.  
  17. this.setState({
  18. activeAccordionIndex: newIndex
  19. })
  20. }
  21.  
  22. // I'm using a small helper function to create the accordion and invoke it in
  23. // the render method, just one item for brevity; the other entries are pretty
  24. // much the same
  25.  
  26. getAccordionInputs() {
  27.  
  28. const { activeAccordionIndex } = this.state;
  29.  
  30. let accordionContent = (
  31. <Accordion fluid exclusive={false}>
  32. <Accordion.Title
  33. className="file-upload-ordinal-accord-title"
  34. active={activeAccordionIndex === 0}
  35. index={0}
  36. onClick={this.handleAccordionClick}
  37. >
  38. <Icon name='dropdown' />
  39. Enter Ordinal Features
  40. <Popup
  41. on="click"
  42. position="right center"
  43. header="Ordinal Features Help"
  44. content={
  45. <div className="content">
  46. <p>Ordinal Features help description</p>
  47. </div>
  48. }
  49. trigger={
  50. <Icon
  51. className="file-upload-ordinal-help-icon"
  52. inverted
  53. size="large"
  54. color="orange"
  55. name="info circle"
  56. />
  57. }
  58. />
  59. </Accordion.Title>
  60. <Accordion.Content
  61. active={activeAccordionIndex === 0}
  62. >
  63. <textarea
  64. className="file-upload-ordinal-text-area"
  65. id="ordinal_features_text_area_input"
  66. label="Ordinal Features"
  67. placeholder={"{"ord_feat_1": ["MALE", "FEMALE"], "ord_feat_2": ["FIRST", "SECOND", "THIRD"]}"}
  68. onChange={this.handleOrdinalFeatures}
  69. />
  70. </Accordion.Content>
  71. </Accordion>
  72. )
  73. return accordionContent;
  74. }
  75.  
  76. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement