аккордеон и диалоговые компоненты для Material Design Lite

Question

Существуют ли какие-либо диалоговые компоненты аккордеона и модального доступные и фактически работа, которые совместимы с моей средой: версии

от Google Material Design Lite 1,06
ReactJS Facebook, 0.14.2
Microsoft TypeScript и Visual Studio 2015 (для набора машинописных текстов)

Я пытаюсь избежать взлома библиотеки JavaScript, а Material Design Lite не хватает этих важных виджетов. Я не использую Node.js, так как я на платформе Windows, поэтому Material-UI не вариант. MaterializeCSS раздувает мой проект Visual Studio и делает его очень медленным и непригодным для использования.

Answer 1

Update сентября 28,2016

Похоже, что теперь библиотека с открытым исходным кодом для выполнения всего этого: https://github.com/fiffty/react-treeview-mui

---

самостоятельной реализации

Этот ответ служит в качестве примера для раскрывающегося списка Accordion, построенного с использованием React, хотя и не в стиле Material Design. Вам нужно будет сделать это сами.

Для этой установки требуется объект иерархии parent> дочерних объектов/массивов. Этот базовый класс должен иметь возможность обрабатывать очень глубокие глубины просто отлично. Он использует рекурсию для своей структуры. Я также буду использовать синтаксис ES6 для предпочтения, поскольку он помогает мне настроить рекурсию.

Accordion Класс:

// Accordian Class 
// Dynamic/Recursive 
// a parent>child>child... relationship is required 
// the whole object can be named however you like, 
// but each child object needs to be identified as "children" 
class Accordian extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     openLevelRow: "", // this is the current open level row in an accordian (starts out with none being open) 
     selfLevelObject: props.newLevel // the current level object containing all rows and their data/children 
    }; 
    } 

    // This is our toggle open/close method 
    // if row is already open, close it 
    // uniqueSelector is unique per row, and also a key 
    // in the selfLevelObject (could be a name, id) 
    toggleOpenClose(uniqueSelector) { 
    // simple ternary assignment 
    this.setState({ 
     openLevelRow: this.state.openLevelRow != uniqueSelector ? uniqueSelector : "" 
    }); 
    } 

    render() { 
    // deconstruct assignment from state 
    const { selfLevelObject, openLevelRow } = this.state 

    return (
     <div> 
      {selfLevelObject.map((row, i) => 
       {/* Collectively where all children of the same hierchy level are listed*/} 
       <div className="accordian-hold-self-level" key={i} > 
       {/* This is an individual collapsable Row */} 
       <div onClick={this.toggleOpenClose.bind(this, row.uniqueSelector)} className="accordian-title-row"> 
        <p className='accordian-title'> {row.title}</p> 
       </div> 
       {/* 
        When iterating the list, find out if a row has been opened 
       */} 
       {this.state.openLevelRow != row.uniqueSelector ? <span></span> : 
        /* 
         This code block is called if the current row is opened 
         now we to need to find out if there are children, 
         if not, then we are at the bottom, do what ever 
         you'd like with the bottom row 
        */ 
        selfLevelObject[uniqueSelector].children != undefined ? 
         <Accordian newLevel={selfLevelObject[uniqueSelector].children} /> 
         : // else 
        // TODO - whatever you want with bottom row 
       } 
       </div> 
     )} 
     </div> 
    ); 
    } 
} 

Accordian.propTypes = { 
    newLevel: React.PropTypes.object 
}