-
Notifications
You must be signed in to change notification settings - Fork 111
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implemented: Make changing the "Name" property more easy #626
- Loading branch information
Showing
3 changed files
with
239 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
225 changes: 225 additions & 0 deletions
225
packages/project-editor/ui-components/PropertyGrid/UniqueValueInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,225 @@ | ||
import React from "react"; | ||
import { observable, action, runInAction, makeObservable } from "mobx"; | ||
import { observer } from "mobx-react"; | ||
|
||
import { getParent, PropertyProps } from "project-editor/core/object"; | ||
|
||
import { ProjectContext } from "project-editor/project/context"; | ||
|
||
import { validators } from "eez-studio-shared/validation"; | ||
import { validators as validatorsRenderer } from "eez-studio-shared/validation-renderer"; | ||
|
||
import { isPropertyOptional } from "project-editor/core/object"; | ||
import { replaceObjectReference } from "project-editor/core/search"; | ||
import { Icon } from "eez-studio-ui/icon"; | ||
|
||
//////////////////////////////////////////////////////////////////////////////// | ||
|
||
export const UniqueValueInput = observer( | ||
class UniqueValueInput extends React.Component< | ||
PropertyProps & { value: any; changeValue: (newValue: any) => void } | ||
> { | ||
static contextType = ProjectContext; | ||
declare context: React.ContextType<typeof ProjectContext>; | ||
|
||
oldValue: any; | ||
_value: string | undefined; | ||
error: string | undefined = undefined; | ||
|
||
constructor(props: any) { | ||
super(props); | ||
|
||
makeObservable(this, { | ||
_value: observable, | ||
error: observable | ||
}); | ||
} | ||
|
||
componentDidUpdate(prevProps: PropertyProps) { | ||
if ( | ||
!arrayCompareShallow(prevProps.objects, this.props.objects) || | ||
prevProps.propertyInfo != this.props.propertyInfo || | ||
this.oldValue != this.props.value | ||
) { | ||
this.resetChange(); | ||
} | ||
} | ||
|
||
onChange = action((event: React.ChangeEvent<HTMLInputElement>) => { | ||
this.oldValue = this.props.value; | ||
this._value = event.target.value.toString(); | ||
this.error = undefined; | ||
}); | ||
|
||
onKeyDown = (event: React.KeyboardEvent) => { | ||
if (event.key === "Enter") { | ||
this.commitChange(); | ||
} else if (event.key == "Escape") { | ||
this.discardChange(); | ||
} | ||
}; | ||
|
||
onOK = () => { | ||
this.commitChange(); | ||
}; | ||
|
||
onCancel = () => { | ||
this.discardChange(); | ||
}; | ||
|
||
onBlur = (event: React.FocusEvent) => {}; | ||
|
||
resetChange() { | ||
runInAction(() => { | ||
this._value = undefined; | ||
this.error = undefined; | ||
}); | ||
} | ||
|
||
discardChange() { | ||
this.resetChange(); | ||
} | ||
|
||
commitChange = async () => { | ||
if (this._value == undefined) { | ||
return; | ||
} | ||
|
||
let newValue = this._value.trim(); | ||
|
||
const valueValidators = []; | ||
|
||
const propertyInfoUnique = (this.props.propertyInfo.unique || | ||
this.props.propertyInfo.uniqueIdentifier)!; | ||
if (typeof propertyInfoUnique === "boolean") { | ||
valueValidators.push( | ||
validators.unique( | ||
this.props.objects[0], | ||
getParent(this.props.objects[0]) | ||
) | ||
); | ||
} else { | ||
valueValidators.push( | ||
propertyInfoUnique( | ||
this.props.objects[0], | ||
getParent(this.props.objects[0]), | ||
this.props.propertyInfo | ||
) | ||
); | ||
} | ||
|
||
if ( | ||
!isPropertyOptional( | ||
this.props.objects[0], | ||
this.props.propertyInfo | ||
) | ||
) { | ||
valueValidators.push(validators.required); | ||
} | ||
|
||
if (this.props.propertyInfo.uniqueIdentifier) { | ||
valueValidators.push(validatorsRenderer.identifierValidator); | ||
} | ||
|
||
for (const valueValidator of valueValidators) { | ||
const error = await valueValidator( | ||
{ | ||
[this.props.propertyInfo.name]: newValue | ||
}, | ||
this.props.propertyInfo.name | ||
); | ||
|
||
if (error) { | ||
runInAction(() => { | ||
this.error = error; | ||
}); | ||
return; | ||
} | ||
} | ||
|
||
let oldValue = this.props.value; | ||
|
||
if (newValue != oldValue) { | ||
if (newValue.length == 0) { | ||
runInAction(() => { | ||
this.props.changeValue(undefined); | ||
}); | ||
} else { | ||
this.context.undoManager.setCombineCommands(true); | ||
|
||
runInAction(() => { | ||
replaceObjectReference(this.props.objects[0], newValue); | ||
this.props.changeValue(newValue); | ||
}); | ||
|
||
this.context.undoManager.setCombineCommands(false); | ||
} | ||
} | ||
|
||
this.resetChange(); | ||
}; | ||
|
||
render() { | ||
return ( | ||
<> | ||
<div className="input-group"> | ||
<input | ||
type="text" | ||
className="form-control" | ||
value={ | ||
this._value != undefined | ||
? this._value | ||
: this.props.value || "" | ||
} | ||
onChange={this.onChange} | ||
onKeyDown={this.onKeyDown} | ||
onBlur={this.onBlur} | ||
readOnly={this.props.objects.length > 1} | ||
/> | ||
{this._value != undefined && ( | ||
<> | ||
<button | ||
className="btn btn-secondary" | ||
type="button" | ||
onClick={this.onOK} | ||
title={"Commit Change (ENTER)"} | ||
> | ||
<Icon icon="material:check" size={16} /> | ||
</button> | ||
<button | ||
className="btn btn-secondary" | ||
type="button" | ||
onClick={this.onCancel} | ||
title={"Discard Change (ESC)"} | ||
> | ||
<Icon icon="material:close" size={16} /> | ||
</button> | ||
</> | ||
)} | ||
</div> | ||
{this.error && ( | ||
<div className="form-text error">{this.error}</div> | ||
)} | ||
</> | ||
); | ||
} | ||
} | ||
); | ||
|
||
function arrayCompareShallow(arr1: any, arr2: any) { | ||
if (!arr1 && !arr2) { | ||
return true; | ||
} | ||
|
||
if ((!arr1 && arr2) || (arr1 && !arr2) || arr1.length != arr2.length) { | ||
return false; | ||
} | ||
|
||
for (let i = 0; i < arr1.length; i++) { | ||
if (arr1[i] != arr2[i]) { | ||
return false; | ||
} | ||
} | ||
|
||
return true; | ||
} |