Current Dev State

static/js/ketcher2/script/ui/dialog/generic-groups.jsx

@@ -0,0 +1,134 @@
+/****************************************************************************
+ * Copyright 2017 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+import { h } from 'preact';
+/** @jsx h */
+
+import generics from '../../chem/generics';
+
+const viewSchema = {
+	'atom': {
+		caption: 'Atom Generics',
+		order: ['any', 'no-carbon', 'metal', 'halogen']
+	},
+	'group': {
+		caption: 'Group Generics',
+		order: ['acyclic', 'cyclic']
+	},
+	'special': {
+		caption: 'Special Nodes',
+		order: []
+	},
+	'group/acyclic': {
+		caption: 'Acyclic',
+		order: ['carbo', 'hetero']
+	},
+	'group/cyclic': {
+		caption: 'Cyclic',
+		order: ['no-carbon', 'carbo', 'hetero']
+	},
+	'group/acyclic/carbo': {
+		caption: 'Carbo',
+		order: ['alkynyl', 'alkyl', 'alkenyl']
+	},
+	'group/acyclic/hetero': {
+		caption: 'Hetero',
+		order: ['alkoxy']
+	},
+	'group/cyclic/carbo': {
+		caption: 'Carbo',
+		order: ['aryl', 'cycloalkyl', 'cycloalkenyl']
+	},
+	'group/cyclic/hetero': {
+		caption: 'Hetero',
+		order: ['aryl']
+	},
+	'atom/any': 'any atom',
+	'atom/no-carbon': 'except C or H',
+	'atom/metal': 'any metal',
+	'atom/halogen': 'any halogen',
+	'group/cyclic/no-carbon': 'no carbon',
+	'group/cyclic/hetero/aryl': 'hetero aryl'
+};
+
+function GenSet({labels, caption='', selected, onSelect, ...props}) {
+	return (
+		<fieldset {...props}>
+		  {
+			  labels.map(label => (
+				  <button onClick={e => onSelect(label)}
+					      className={selected(label) ? 'selected' : ''}>
+					{label}</button>
+			  ))
+		  }
+		  {
+			caption ? (
+				<legend>{caption}</legend>
+			) : null
+		  }
+		</fieldset>
+	);
+}
+
+function GenGroup({gen, name, path, selected, onSelect}) {
+	const group = gen[name];
+	const pk = path ? `${path}/${name}` : name;
+	const schema = viewSchema[pk];
+
+	return (schema && schema.caption) ? (
+		<fieldset className={name}>
+		  <legend>{schema.caption}</legend>
+		  {
+			  group.labels ? (
+				  <GenSet labels={group.labels}
+						  selected={selected} onSelect={onSelect} />
+			  ) : null
+		  }
+		  {
+			  schema.order.map(child => ( // TODO:order = Object.keys ifndef
+				  <GenGroup gen={group} name={child} path={pk}
+						    selected={selected} onSelect={onSelect}/>
+			  ))
+	      }
+		</fieldset>
+	) : (
+		<GenSet labels={group.labels}
+				caption={schema || name} className={name}
+				selected={selected} onSelect={onSelect} />
+	);
+}
+
+function GenericGroups({ selected, onSelect, ...props }) {
+	return (
+		<div summary="Generic Groups" {...props}>
+			<div className="col">
+				<GenGroup gen={generics} name='atom'
+						  selected={l => selected(l)}
+						  onSelect={l => onSelect(l)}/>
+				<GenGroup gen={generics} name='special'
+						  selected={l => selected(l)}
+						  onSelect={l => onSelect(l)}/>
+			</div>
+			<div className="col">
+				<GenGroup gen={generics} name='group'
+						  selected={l => selected(l)}
+						  onSelect={l => onSelect(l)}/>
+			</div>
+		</div>
+	);
+}
+
+export default GenericGroups;