-
Notifications
You must be signed in to change notification settings - Fork 164
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
#5200 – the users choice is not saved in the settings but is recalculated in px #5298
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,20 +21,26 @@ import Input from '../Input/Input'; | |
import Select from '../Select'; | ||
import styles from './measure-input.module.less'; | ||
import { getSelectOptionsFromSchema } from '../../../utils'; | ||
import { MeasurementUnits } from 'src/script/ui/data/schema/options-schema'; | ||
|
||
const selectOptions = getSelectOptionsFromSchema({ | ||
enum: ['cm', 'px', 'pt', 'inch'], | ||
enum: Object.values(MeasurementUnits), | ||
}); | ||
|
||
const MeasureInput = ({ | ||
schema, | ||
extraSchema, | ||
value, | ||
extraValue, | ||
onChange, | ||
onExtraChange, | ||
name, | ||
className, | ||
...rest | ||
}) => { | ||
const [measure, setMeasure] = useState('px'); | ||
const [measure, setMeasure] = useState( | ||
extraValue || extraSchema?.default || 'px', | ||
); | ||
const [cust, setCust] = useState(value || schema.default); | ||
|
||
useEffect(() => { | ||
|
@@ -44,27 +50,27 @@ const MeasureInput = ({ | |
} // Hack: Set init value (RESET) | ||
}, []); | ||
|
||
useEffect(() => { | ||
setMeasure(extraValue); | ||
}, [extraValue]); | ||
|
||
const handleChange = (value) => { | ||
const convValue = convertValue(value, measure, 'px'); | ||
setCust(value); | ||
onChange(convValue); | ||
}; | ||
|
||
const handleMeasChange = (m) => { | ||
const handleMeasChange = (unit) => { | ||
setCust((prev) => { | ||
convertValue(prev, measure, m); | ||
convertValue(prev, measure, unit); | ||
}); | ||
setMeasure(m); | ||
}; | ||
|
||
const calcValue = () => { | ||
const newValue = convertValue(value, 'px', measure); | ||
setCust(newValue); | ||
setMeasure(unit); | ||
onExtraChange(unit); | ||
}; | ||
|
||
useEffect(() => { | ||
calcValue(); | ||
}, [value, measure, calcValue]); | ||
setCust(convertValue(value, 'px', measure)); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we use MeasurementUnits enum here instead of 'px'? |
||
}, [value, measure]); | ||
|
||
const desc = schema || schema.properties[name]; | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -71,18 +71,23 @@ class Form extends Component { | |
onUpdate(instance, valid, errs); | ||
} | ||
|
||
field(name, onChange) { | ||
field(name, onChange, extraName) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe rename 'extra' to something like 'second input name' or something that will describe it more clear? |
||
const { result, errors } = this.props; | ||
const value = result[name]; | ||
const extraValue = extraName ? result[extraName] : null; | ||
|
||
const handleOnChange = (name, value) => { | ||
const newState = Object.assign({}, this.props.result, { [name]: value }); | ||
this.updateState(newState); | ||
if (onChange) onChange(value); | ||
}; | ||
|
||
return { | ||
dataError: errors && errors[name], | ||
value, | ||
onChange: (val) => { | ||
const newState = Object.assign({}, this.props.result, { [name]: val }); | ||
this.updateState(newState); | ||
if (onChange) onChange(val); | ||
}, | ||
extraValue, | ||
onChange: (val) => handleOnChange(name, val), | ||
onExtraChange: (val) => handleOnChange(extraName, val), | ||
}; | ||
} | ||
|
||
|
@@ -126,7 +131,8 @@ function Label({ labelPos, title, children, ...props }) { | |
} | ||
|
||
function Field(props) { | ||
const { name, onChange, component, labelPos, className, ...rest } = props; | ||
const { name, extraName, onChange, component, labelPos, className, ...rest } = | ||
props; | ||
const [anchorEl, setAnchorEl] = useState(null); | ||
const handlePopoverOpen = useCallback((event) => { | ||
setAnchorEl(event.currentTarget); | ||
|
@@ -136,13 +142,22 @@ function Field(props) { | |
}, []); | ||
const { schema, stateStore } = useFormContext(); | ||
const desc = rest.schema || schema.properties[name]; | ||
const { dataError, ...fieldOpts } = stateStore.field(name, onChange); | ||
const { dataError, onExtraChange, extraValue, ...fieldOpts } = | ||
stateStore.field(name, onChange, extraName); | ||
|
||
const getExtraSchema = () => { | ||
return rest.extraSchema || schema.properties[extraName]; | ||
}; | ||
|
||
const Component = component; | ||
const formField = component ? ( | ||
<Component | ||
name={name} | ||
schema={desc} | ||
className={className} | ||
onExtraChange={onExtraChange} | ||
extraValue={extraValue} | ||
{...(extraName && { extraSchema: getExtraSchema() })} | ||
{...fieldOpts} | ||
{...rest} | ||
/> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we use MeasurementUnits enum here instead of string literal?