diff --git a/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/CategorizeValue.js b/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/CategorizeValue.js index bd2d0691..1975a1f5 100644 --- 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 index 1670cdf4..f5bcc409 100644 --- 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 }) => ( - (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 => ( + + {option.name} + + ))} + ), - [format, parse, choices], + [choices, classes], ); const { @@ -62,30 +61,15 @@ const IconStyleField = ({ return null; } - console.log('values', path, fields, getValuesOfProperty, Component, genDefaultValue); - return (
- {choices ? ( - - ) : ( - - )} + @@ -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 ( <> - - - - - - ); @@ -165,17 +123,6 @@ const IconStyleField = ({ )} - {choices && ( - - )}
); diff --git a/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/SizeStyleField.js b/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/SizeStyleField.js index 0e3362b6..d42b10ad 100644 --- 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 }) => ( { 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 (
- + diff --git a/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/WizardIcon.js b/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/WizardIcon.js index 390217d0..e743e058 100644 --- 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 }) => {
diff --git a/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/styles.js b/src/modules/RA/DataLayer/components/tabs/StyleTab/Style/styles.js index a1675f63..de9471b8 100644 --- 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;