{"size": 3968, "ext": "js", "max_stars_repo_path": "client/src/nord/ns3/ns3-section-piano.js", "max_stars_repo_name": "Chris55/ns3-program-viewer", "max_stars_repo_stars_event_min_datetime": "2020-10-25T13:31:28.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-28T19:42:21.000Z", "max_issues_repo_path": "client/src/nord/ns3/ns3-section-piano.js", "max_issues_repo_name": "Chris55/ns3-program-viewer", "max_issues_repo_issues_event_min_datetime": "2021-01-08T14:43:38.000Z", "max_issues_repo_issues_event_max_datetime": "2021-01-10T13:14:19.000Z", "max_forks_repo_path": "client/src/nord/ns3/ns3-section-piano.js", "max_forks_repo_name": "Chris55/ns3-program-viewer", "max_forks_repo_forks_event_min_datetime": "2020-10-26T13:00:25.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-11T16:33:00.000Z"}
{"max_stars_count": 14, "max_issues_count": 1, "max_forks_count": 4, "avg_line_length": 49.6, "max_line_length": 112, "alphanum_fraction": 0.3314012097}
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "../lib/ns3.css";
import Ns3VolumeAndMore from "./ns3-volume-and-more";
import Ns3Fx from "./ns3-fx";
import NordLabelAndValue from "../lib/nord-label-and-value";
import NordValueOnOff from "../lib/nord-value-on-off";

export default class Ns3SectionPiano extends Component {
    render() {
        const piano = this.props.data;
        const visible = piano.enabled;
        const dimmed = piano.dimmed === true;

        return (
            <React.Fragment>
                <div className={visible ? this.props.className : "d-none"}>
                    <div className={dimmed ? "nord-dimmed" : "nord-on"}>
                        <div className="">
                            <div className="no-gutters d-flex flex-row flex-wrap align-items-stretch">
                                <div className="">
                                    <Ns3VolumeAndMore name={"PIANO"} data={piano} />
                                </div>

                                <div className="row no-gutters flex-column m-1">
                                    <div>
                                        {/*<div className="nord-name">{piano.name.value}</div>*/}
                                        <div className="nord-name">
                                            <div>{piano.name.value}</div>
                                            <div>
                                                <small>
                                                    {piano.name.info} {piano.name.version}
                                                </small>
                                            </div>
                                        </div>
                                    </div>

                                    <div>
                                        <NordLabelAndValue label="Type" data={piano.type} />
                                        <span className="m-1" />
                                        <NordLabelAndValue
                                            enabled={piano.timbre.value !== "None"}
                                            label="Timbre"
                                            data={piano.timbre}
                                        />
                                    </div>

                                    <div>
                                        <NordLabelAndValue
                                            enabled={piano.kbTouch.value !== "Normal"}
                                            label="KB Touch"
                                            data={piano.kbTouch}
                                        />
                                        <span className="m-1" />
                                        <NordLabelAndValue
                                            enabled={piano.layerDetune.value !== "Off"}
                                            label="Layer Detune"
                                            data={piano.layerDetune}
                                        />
                                    </div>

                                    <div>
                                        <NordValueOnOff label="Soft Release" data={piano.softRelease} />
                                        <span className="m-1" />
                                        <NordValueOnOff label="String Resonance" data={piano.stringResonance} />
                                        <span className="m-1" />
                                        <NordValueOnOff label="Pedal Noise" data={piano.pedalNoise} />
                                    </div>
                                </div>

                                <Ns3Fx className="" data={this.props.effects} source="Piano" />
                            </div>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}
