import "../css/AccordionStylesOverride.css" ; import * as React from "react" ; import * as telemetry from '../../../common/telemetry' ; import AccordionStore , { InjectedButtonAttributes , InjectedHeadingAttributes , InjectedPanelAttributes } from "../helpers/AccordionStore" ; import { UUID } from "./ItemContext" ; export interface ProviderProps { preExpanded ? : UUID [ ] ; allowMultipleExpanded ? : boolean ; allowZeroExpanded ? : boolean ; children ? : React . ReactNode ; onChange ? ( args ) : void ; } type ProviderState = AccordionStore ; export interface AccordionContext { allowMultipleExpanded : boolean ; allowZeroExpanded : boolean ; toggleExpanded ( uuid ) : void ; isItemDisabled ( uuid ) : boolean ; isItemExpanded ( uuid ) : boolean ; getPanelAttributes ( uuid , dangerouslySetExpanded ? ) : InjectedPanelAttributes ; getHeadingAttributes ( uuid ) : InjectedHeadingAttributes ; getButtonAttributes ( uuid , dangerouslySetExpanded ? ) : InjectedButtonAttributes ; } const Context = React . createContext ( null as AccordionContext | null ) ; export class Provider extends React . PureComponent < ProviderProps , ProviderState > { public static defaultProps : ProviderProps = { allowMultipleExpanded : false , allowZeroExpanded : false , } ; public state : ProviderState = new AccordionStore ( { expanded : this . props . preExpanded , allowMultipleExpanded : this . props . allowMultipleExpanded , allowZeroExpanded : this . props . allowZeroExpanded , } ) ; constructor ( props ) { super ( props ) ; telemetry . track ( 'ReactAccessibleAccordion' , { } ) ; } private toggleExpanded = ( key ) : void => { this . setState ( ( state ) => state . toggleExpanded ( key ) , ( ) => { if ( this . props . onChange ) { this . props . onChange ( this . state . expanded ) ; } } ) ; } ; private isItemDisabled = ( key ) : boolean => { return this . state . isItemDisabled ( key ) ; } ; private isItemExpanded = ( key ) : boolean => { return this . state . isItemExpanded ( key ) ; } ; private getPanelAttributes = ( key , dangerouslySetExpanded ? ) : InjectedPanelAttributes => { return this . state . getPanelAttributes ( key , dangerouslySetExpanded ) ; } ; private getHeadingAttributes = ( ) : InjectedHeadingAttributes => { return this . state . getHeadingAttributes ( ) ; } ; private getButtonAttributes = ( key , dangerouslySetExpanded ? ) : InjectedButtonAttributes => { return this . state . getButtonAttributes ( key , dangerouslySetExpanded ) ; } ; public render ( ) { const { allowZeroExpanded , allowMultipleExpanded } = this . state ; return ( < Context . Provider value = { { allowMultipleExpanded , allowZeroExpanded , toggleExpanded : this . toggleExpanded , isItemDisabled : this . isItemDisabled , isItemExpanded : this . isItemExpanded , getPanelAttributes : this . getPanelAttributes , getHeadingAttributes : this . getHeadingAttributes , getButtonAttributes : this . getButtonAttributes , } } > { this . props . children || null } < /Context.Provider>); } } export class Consumer extends React . PureComponent < { children ( container ) : React . ReactNode ; } > { private renderChildren = ( container ) : React . ReactNode => { return container ? this . props . children ( container ) : null ; } ; public render ( ) { return < Context . Consumer > { this . renderChildren } < /Context.Consumer>; } }