Add categorization to icons

Terralego · Jul 7, 2023 · 862ff42 · 862ff42
1 parent 1acf3a9
commit 862ff42
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 91 deletions.
diff --git a/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/CategorizeValue.js b/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/CategorizeValue.js
@@ -101,7 +101,6 @@ const CategorizeValue = ({
       const nameList = newValueList.map(({ name }) => name);
       const toAdd = result.filter(name => !nameList.includes(name));
 
-
       if (newValueList.length < (valueList || []).length || toAdd.length) {
         const newValues = [
           ...newValueList,

diff --git a/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/IconStyleField.js b/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/IconStyleField.js
@@ -1,20 +1,18 @@
 import React from 'react';
 
 import { makeStyles } from '@material-ui/core/styles';
+import { MenuItem, TextField } from '@material-ui/core';
 import { Field, useField } from 'react-final-form';
 import {
   SelectInput,
   RadioButtonGroupInput,
-  TextInput,
-  BooleanInput,
   useTranslate,
   required,
 } from 'react-admin';
-import { fieldTypes } from '../../../../../DataSource';
 
+import { fieldTypes } from '../../../../../DataSource';
 import Condition from '../../../../../../../components/react-admin/Condition';
 
-import GraduateValue from './GraduateValue';
 import CategorizeValue from './CategorizeValue';
 
 import styles from './styles';
@@ -23,35 +21,36 @@ const isRequired = [required()];
 
 const useStyles = makeStyles(styles);
 
-const genDefaultValue = () => 0;
-
 const IconStyleField = ({
   path,
   fields,
   getValuesOfProperty,
-  choices,
-  translateChoice = true,
-  format = val => val,
-  parse = val => val,
+  choices = [],
 }) => {
   const classes = useStyles();
   const translate = useTranslate();
 
+  const genDefaultValue = React.useCallback(
+    () => choices.find(e => !e.disabled).id,
+    [choices],
+  );
+
   const Component = React.useCallback(
     ({ value: fieldValue, onChange }) => (
-      <SelectInput
-        source={`${path}.value`}
+      <TextField
         value={fieldValue}
-        // eslint-disable-next-line no-sequences
-        onChange={e => (console.log(e), onChange)}
-        label="style-editor.fixed.value"
-        choices={choices}
-        format={format}
-        parse={parse}
-        translateChoice={translateChoice}
-      />
+        onChange={onChange}
+        select
+        className={classes.iconSelect}
+      >
+        {choices.map(option => (
+          <MenuItem key={option.id} value={option.id} disabled={option.disabled}>
+            {option.name}
+          </MenuItem>
+        ))}
+      </TextField>
     ),
-    [format, parse, choices],
+    [choices, classes],
   );
 
   const {
@@ -62,30 +61,15 @@ const IconStyleField = ({
     return null;
   }
 
-  console.log('values', path, fields, getValuesOfProperty, Component, genDefaultValue);
-
   return (
     <div className={classes.styleField}>
       <Condition when={`${path}.type`} is="fixed">
-        {choices ? (
-          <SelectInput
-            source={`${path}.value`}
-            label="style-editor.fixed.value"
-            choices={choices}
-            format={format}
-            parse={parse}
-            validate={required()}
-            translateChoice={translateChoice}
-          />
-        ) : (
-          <TextInput
-            source={`${path}.value`}
-            label="style-editor.fixed.value"
-            format={format}
-            parse={parse}
-            validate={required()}
-          />
-        )}
+        <SelectInput
+          source={`${path}.value`}
+          label="style-editor.fixed.value"
+          choices={choices}
+          validate={required()}
+        />
       </Condition>
 
       <Condition when={`${path}.type`} is="variable">
@@ -110,24 +94,12 @@ const IconStyleField = ({
               {({ input: { value } }) => {
                 const selectedField = fields.find(({ name }) => name === value);
                 if (!selectedField) return null;
-                const isNumber = ['Integer', 'Float'].includes(fieldTypes[selectedField.data_type]);
-                const analysisChoices = isNumber
-                  ? [
-                    {
-                      id: 'graduated',
-                      name: translate('style-editor.analysis.graduate'),
-                    },
-                    {
-                      id: 'categorized',
-                      name: translate('style-editor.analysis.categorize'),
-                    },
-                  ]
-                  : [
-                    {
-                      id: 'categorized',
-                      name: translate('style-editor.analysis.categorize'),
-                    },
-                  ];
+                const analysisChoices = [
+                  {
+                    id: 'categorized',
+                    name: translate('style-editor.analysis.categorize'),
+                  },
+                ];
                 return (
                   <>
                     <RadioButtonGroupInput
@@ -136,14 +108,6 @@ const IconStyleField = ({
                       choices={analysisChoices}
                       initialValue="categorized"
                     />
-                    <Condition when={`${path}.analysis`} is="graduated">
-                      <GraduateValue path={path} />
-                      <BooleanInput
-                        source={`${path}.generate_legend`}
-                        label="style-editor.generate-legend"
-                        className="generate-legend"
-                      />
-                    </Condition>
                     <Condition when={`${path}.analysis`} is="categorized">
                       <CategorizeValue
                         path={path}
@@ -152,30 +116,13 @@ const IconStyleField = ({
                         Component={Component}
                         defaultValueGenerator={genDefaultValue}
                       />
-
-                      <BooleanInput
-                        source={`${path}.generate_legend`}
-                        label="style-editor.generate-legend"
-                        className="generate-legend"
-                      />
                     </Condition>
                   </>
                 );
               }}
             </Field>
           </>
         )}
-        {choices && (
-          <SelectInput
-            source={`${path}.value`}
-            label="style-editor.fixed.value"
-            choices={choices}
-            format={format}
-            parse={parse}
-            validate={required()}
-            translateChoice={translateChoice}
-          />
-        )}
       </Condition>
     </div>
   );

diff --git a/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/SizeStyleField.js b/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/SizeStyleField.js
@@ -20,13 +20,22 @@ const useStyles = makeStyles(styles);
 
 const genDefaultValue = () => 0;
 
-const SizeStyleField = ({ path, fields, getValuesOfProperty, canGenerateLegend = true }) => {
+const SizeStyleField = ({
+  path,
+  fields,
+  getValuesOfProperty,
+  canGenerateLegend = true,
+  step = 'any',
+}) => {
   const classes = useStyles();
   const translate = useTranslate();
 
   const Component = React.useCallback(({ value: fieldValue, onChange }) => (
     <TextField
       type="number"
+      inputProps={{
+        step,
+      }}
       value={`${fieldValue}`}
       onChange={event => {
         const newValue = parseFloat(event.target.value);
@@ -35,7 +44,7 @@ const SizeStyleField = ({ path, fields, getValuesOfProperty, canGenerateLegend =
         }
       }}
     />
-  ), []);
+  ), [step]);
 
   const { input: { value: type } } = useField(`${path}.type`);
 
@@ -46,7 +55,7 @@ const SizeStyleField = ({ path, fields, getValuesOfProperty, canGenerateLegend =
   return (
     <div className={classes.styleField}>
       <Condition when={`${path}.type`} is="fixed">
-        <NumberInput source={`${path}.value`} label="style-editor.fixed.value" />
+        <NumberInput step={step} source={`${path}.value`} label="style-editor.fixed.value" />
       </Condition>
 
       <Condition when={`${path}.type`} is="variable">

diff --git a/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/WizardIcon.js b/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/WizardIcon.js
@@ -5,11 +5,12 @@ import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import FormLabel from '@material-ui/core/FormLabel';
 import SizeStyleField from './SizeStyleField';
+import IconStyleField from './IconStyleField';
 
-import styles from './styles';
 import useSprites from '../../../../../../../hooks/useSprites';
 import useCustomStyleImages from '../../../../../../../hooks/useCustomStyleImages';
-import IconStyleField from './IconStyleField';
+
+import styles from './styles';
 
 const useStyles = makeStyles(styles);
 
@@ -88,6 +89,7 @@ const WizardIcon = ({ path, fields, getValuesOfProperty }) => {
             choices={[
               { id: 'none', name: translate('style-editor.style-type.none') },
               { id: 'fixed', name: translate('style-editor.style-type.fixed') },
+              { id: 'variable', name: translate('style-editor.style-type.variable') },
             ]}
             helperText={false}
             initialValue="none"
@@ -97,6 +99,8 @@ const WizardIcon = ({ path, fields, getValuesOfProperty }) => {
         <SizeStyleField
           path={`${path}.style.icon_size`}
           fields={fields}
+          step="0.1"
+          canGenerateLegend={false}
           getValuesOfProperty={getValuesOfProperty}
         />
       </div>

diff --git a/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/styles.js b/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/styles.js
@@ -70,6 +70,10 @@ const styles = {
   piechartLegendSwitch: {
     marginTop: '1em',
   },
+  iconSelect: {
+    width: '10em',
+    marginRight: '2em',
+  },
 };
 
 export default styles;