Add manual discretization method for styles

Author: Cédric Farcy

public/locales/en/translation.json

@@ -617,7 +617,8 @@
       "styles": {
         "tab": "Style",
         "no-source": "Please select a source before configuring style",
-        "secondarylabels": "Secondary styles"
+        "secondarylabels": "Secondary styles",
+        "boundary": "boundary"
       }
     }
   },

public/locales/fr/translation.json

@@ -619,7 +619,8 @@
       "styles": {
         "tab": "Style",
         "no-source": "Veuillez choisir une source de données avant de configurer les styles",
-        "secondarylabels": "Styles secondaires"
+        "secondarylabels": "Styles secondaires",
+        "boundary": "limite"
       }
     }
   },

src/modules/RA/DataLayer/components/tabs/StyleTab/Style/ColorListField.js

@@ -3,16 +3,21 @@ import randomColor from 'randomcolor';
 
 import { makeStyles } from '@material-ui/core/styles';
 
+import { number, useTranslate } from 'react-admin';
+import { Field } from 'react-final-form';
+import { TextField } from '@material-ui/core';
 import ColorPicker from '../../../../../../../components/react-admin/ColorPicker';
+import Condition from '../../../../../../../components/react-admin/Condition';
 
 import styles from './styles';
 
 const useStyles = makeStyles(styles);
 
 const DEFAULT_MAX_CLASSES = 15;
 
-const ColorListField = ({ value, onChange = () => {}, maxClasses = DEFAULT_MAX_CLASSES }) => {
+const ColorListField = ({ path, value, onChange = () => {}, maxClasses = DEFAULT_MAX_CLASSES }) => {
   const classes = useStyles();
+  const translate = useTranslate();
 
   const handleColorChange = index => newValue => {
     const newColorList = [...value];
@@ -35,13 +40,54 @@ const ColorListField = ({ value, onChange = () => {}, maxClasses = DEFAULT_MAX_C
   return (
     <div className={classes.colorList}>
       {(value || []).map((color, index) => (
-        <ColorPicker
-          // eslint-disable-next-line react/no-array-index-key
-          key={index}
-          value={color}
-          onChange={handleColorChange(index)}
-        />
+        // eslint-disable-next-line react/no-array-index-key
+        <React.Fragment key={index}>
+          <Condition when={`${path}.method`} is="manual">
+            <Field
+              name={`${path}.boundaries[${index}]`}
+              validate={number()}
+              parse={v => Number(v)}
+              initialValue=""
+            >
+              {({ meta, input: { value: boundValue, onChange: onBoundChange } }) => (
+                <TextField
+                  label={translate('datalayer.form.styles.boundary')}
+                  value={boundValue}
+                  onChange={onBoundChange}
+                  error={meta.error && meta.touched}
+                  helperText={(meta.error && meta.touched ? meta.error : '')}
+                />
+              )}
+            </Field>
+          </Condition>
+          <ColorPicker
+            value={color}
+            onChange={handleColorChange(index)}
+          />
+          <Condition
+            when={`${path}.method`}
+            is={v => (v === 'manual' && index === (value.length - 1))}
+          >
+            <Field
+              name={`${path}.boundaries[${value.length}]`}
+              validate={number()}
+              initialValue=""
+              parse={v => Number(v)}
+            >
+              {({ meta, input: { value: boundValue, onChange: onBoundChange } }) => (
+                <TextField
+                  label={translate('datalayer.form.styles.boundary')}
+                  value={boundValue}
+                  onChange={onBoundChange}
+                  error={meta.error && meta.touched}
+                  helperText={meta.error && meta.touched ? meta.error : ''}
+                />
+              )}
+            </Field>
+          </Condition>
+        </React.Fragment>
       ))}
+
       <button type="button" className="action" onClick={removeColor(value.length - 1)}>
         -
       </button>

src/modules/RA/DataLayer/components/tabs/StyleTab/Style/GraduateValue.js

@@ -30,15 +30,15 @@ const GraduateValue = ({ path, Component = ValueListField, defaultValue = defVal
             { id: 'jenks', name: translate('style-editor.graduate.method.jenks') },
             { id: 'quantile', name: translate('style-editor.graduate.method.quantiles') },
             { id: 'equal_interval', name: translate('style-editor.graduate.method.equal-interval') },
-            /* { id: 'manual', name: translate('style-editor.graduate.method.manual') }, */
+            { id: 'manual', name: translate('style-editor.graduate.method.manual') },
           ]}
         />
       </div>
 
       <FormLabel>{translate('style-editor.graduate.steps')}</FormLabel>
       <Field name={`${path}.values`} defaultValue={defaultValue}>
         {({ input: { value, onChange } }) => (
-          <Component value={value} onChange={onChange} />
+          <Component value={value} onChange={onChange} path={path} />
         )}
       </Field>
     </>