raonkeditor-react/samples/component/src/Sidebar.jsx

React component for RAON K Editor

/* eslint-disable react/prop-types */

import * as React from 'react';

function Sidebar( {
	runtimes,
	mode,
	readOnly,
	onRuntimesChange,
	onModeChange,
	onReadOnlyChange
} ) {
	return (
		<aside className="paper flex-grow-1">
			<div className="option">
				<div>{'Runtimes:'}</div>
				{[ 'html5', 'agent' ].map( runtimesDef => (
					<div key={runtimesDef}>
						<input
							id={runtimesDef}
							type="radio"
							name={runtimesDef}
							checked={runtimesDef === runtimes}
							value={runtimesDef}
							onChange={onRuntimesChange}
						/>
						<label htmlFor={runtimesDef}>{runtimesDef}</label>
					</div>
				) )}
			</div>
			<div className="option">
				<div>{'Mode:'}</div>
				{[ 'edit', 'view' ].map( modeDef => (
					<div key={modeDef}>
						<input
							id={modeDef}
							type="radio"
							name={modeDef}
							checked={modeDef === mode}
							value={modeDef}
							onChange={onModeChange}
						/>
						<label htmlFor={modeDef}>{modeDef}</label>
					</div>
				) )}
			</div>
			<div className="option">
				<div>{'ReadOnly:'}</div>
				<input
					id="read-only"
					type="checkbox"
					name="read-only"
					checked={readOnly}
					onChange={onReadOnlyChange}
				/>
				<label htmlFor="read-only">{'read-only'}</label>
			</div>
		</aside>
	);
}

export default Sidebar;