Mise en valeur des mots sélectionnés

package.json

@@ -36,6 +36,7 @@
 		"react-color": "^2.13.8",
 		"react-dom": "^16.2.0",
 		"react-helmet": "^5.2.0",
+		"react-highlight-words": "^0.10.0",
 		"react-redux": "^5.0.6",
 		"react-router": "^4.2.0",
 		"react-router-dom": "^4.2.2",

source/components/pages/RulesList.css

@@ -1,4 +1,8 @@
 #RulesList ul {
-	margin: 0 auto;
+	margin: 1em auto;
 	max-width: 860px;
+	padding: 0;
+}
+#RulesList li {
+	list-style: none;
 }

source/components/pages/RulesList.js

@@ -8,6 +8,7 @@ import Select from 'react-select'
 import 'react-select/dist/react-select.css'
 import Fuse from 'fuse.js'
 import { Redirect } from 'react-router-dom'
+import Highlighter from 'react-highlight-words'
 
 export default class RulesList extends Component {
 	render() {
@@ -41,37 +42,51 @@ class SearchBar extends React.Component {
 		this.fuse = new Fuse(rules, options)
 	}
 	state = {
-		selectedOption: null
+		selectedOption: null,
+		inputValue: null
 	}
 	handleChange = selectedOption => {
 		this.setState({ selectedOption })
 	}
-
+	renderOption = option => (
+		<Highlighter
+			searchWords={[this.state.inputValue]}
+			textToHighlight={option.title}
+		/>
+	)
 	filterOptions = (options, filter) => this.fuse.search(filter)
 	render() {
 		let { selectedOption } = this.state
 
 		if (selectedOption != null)
 			return <Redirect to={'règle/' + selectedOption.dottedName} />
+
 		return (
-			<Select
-				name="form-field-name"
-				value={selectedOption && selectedOption.dottedName}
-				onChange={this.handleChange}
-				valueKey="dottedName"
-				labelKey="title"
-				filterOptions={this.filterOptions}
-			/>
+			<>
+				<Select
+					value={selectedOption && selectedOption.dottedName}
+					onChange={this.handleChange}
+					onInputChange={inputValue => this.setState({ inputValue })}
+					valueKey="dottedName"
+					labelKey="title"
+					options={rules}
+					filterOptions={this.filterOptions}
+					optionRenderer={this.renderOption}
+					searchPromptText="Entrez des mots clefs ici"
+					noResultsText="Nous n'avons rien trouvé..."
+				/>
+				{!this.state.inputValue && (
+					<ul>
+						{rules.map(rule => (
+							<li key={rule.dottedName}>
+								<Link to={'/règle/' + encodeRuleName(rule.name)}>
+									{capitalise0(rule.name)}
+								</Link>
+							</li>
+						))}
+					</ul>
+				)}
+			</>
 		)
 	}
 }
-
-// <ul>
-// 	{rules.map(rule => (
-// 		<li key={rule.name}>
-// 			<Link to={'/règle/' + encodeRuleName(rule.name)}>
-// 				{capitalise0(rule.name)}
-// 			</Link>
-// 		</li>
-// 	))}
-// </ul>

source/règles/base.yaml

@@ -1,5 +1,3 @@
-- nom: contrat salarié
-  description: Le contrat qui lie une entreprise (via son établissement) à un individu, qui est alors son salarié.
 
 - espace: contrat salarié . CDD
   nom: CIF
@@ -631,7 +629,7 @@
       contrat salarié . type de contrat: CDD
 - nom: contrat salarié
   description: |
-    Activité encadrée par un contrat de travail de droit privé.
+    Le contrat qui lie une entreprise (via son établissement) à un individu, qui est alors son salarié.
 
     Le contrat n'est en fait pas nécessaire dans le droit français, il est possible d'employer quelqu'un sans contrat par exemple dans ces cas:
       - particuliers employeurs : plus de 8 heures par semaine ou de plus de 4 semaines consécutives dans l'année.