|
|
@ -30,7 +30,6 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
this.setCategory = this.setCategory.bind(this);
|
|
|
|
this.setCategory = this.setCategory.bind(this);
|
|
|
|
this.renderRows = this.renderRows.bind(this);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public componentDidMount() {
|
|
|
|
public componentDidMount() {
|
|
|
@ -62,53 +61,45 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public renderRows(): JSX.Element {
|
|
|
|
public renderRow(item: any): JSX.Element {
|
|
|
|
const categories = this.getCategories();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div
|
|
|
|
{categories.map(item => (
|
|
|
|
key={item.id}
|
|
|
|
<>
|
|
|
|
className={classNames(
|
|
|
|
{!item.hidden && (
|
|
|
|
'left-pane-setting-category-list-item',
|
|
|
|
<div
|
|
|
|
item.id === this.state.settingCategory ? 'active' : ''
|
|
|
|
key={item.id}
|
|
|
|
)}
|
|
|
|
className={classNames(
|
|
|
|
role="link"
|
|
|
|
'left-pane-setting-category-list-item',
|
|
|
|
onClick={() => {
|
|
|
|
item.id === this.state.settingCategory ? 'active' : ''
|
|
|
|
this.setCategory(item.id);
|
|
|
|
)}
|
|
|
|
}}
|
|
|
|
role="link"
|
|
|
|
>
|
|
|
|
onClick={() => {
|
|
|
|
<div>
|
|
|
|
this.setCategory(item.id);
|
|
|
|
<strong>{item.title}</strong>
|
|
|
|
}}
|
|
|
|
<br />
|
|
|
|
>
|
|
|
|
<span className="text-subtle">{item.description}</span>
|
|
|
|
<div>
|
|
|
|
</div>
|
|
|
|
<strong>{item.title}</strong>
|
|
|
|
|
|
|
|
<br />
|
|
|
|
<div>
|
|
|
|
<span className="text-subtle">{item.description}</span>
|
|
|
|
{item.id === this.state.settingCategory && (
|
|
|
|
</div>
|
|
|
|
<SessionIcon
|
|
|
|
|
|
|
|
iconSize={SessionIconSize.Medium}
|
|
|
|
<div>
|
|
|
|
iconType={SessionIconType.Chevron}
|
|
|
|
{item.id === this.state.settingCategory && (
|
|
|
|
iconRotation={270}
|
|
|
|
<SessionIcon
|
|
|
|
/>
|
|
|
|
iconSize={SessionIconSize.Medium}
|
|
|
|
)}
|
|
|
|
iconType={SessionIconType.Chevron}
|
|
|
|
</div>
|
|
|
|
iconRotation={270}
|
|
|
|
</div>
|
|
|
|
/>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</>
|
|
|
|
|
|
|
|
))}
|
|
|
|
|
|
|
|
</>
|
|
|
|
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
public renderCategories(): JSX.Element {
|
|
|
|
public renderCategories(): JSX.Element {
|
|
|
|
|
|
|
|
const categories = this.getCategories().filter(item => !item.hidden);
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className="module-left-pane__list" key={0}>
|
|
|
|
<div className="module-left-pane__list" key={0}>
|
|
|
|
<div className="left-pane-setting-category-list">
|
|
|
|
<div className="left-pane-setting-category-list">
|
|
|
|
{this.renderRows()}
|
|
|
|
{categories.map(item => this.renderRow(item))};
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|