archive-gh-me/ShadowEditor
1
0
Fork 0
mirror of https://github.com/tengge1/ShadowEditor.git synced 2026-01-25 15:08:11 +00:00
Code Issues Projects Releases Wiki Activity

ui控件规范化。

Browse Source
This commit is contained in:
tengge1 2019-07-15 19:40:14 +08:00
parent 37bb8b3e25
commit 972737bcb6
17 changed files with 137 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -100,3 +100,4 @@ typings/
/ShadowEditor.UI/ShadowEditor.UI.csproj.user
/ShadowEditor.UI/build
/images/img
/ShadowEditor.Web/src/ui2

8
ShadowEditor.Web/src/editor2/component/CameraComponent.jsx
View File

@ -1,4 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty } from '../../third_party';
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, NumberProperty } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
/**
@ -28,9 +28,9 @@ class CameraComponent extends React.Component {
const { show, expanded, fov, near, far } = this.state;
return <PropertyGroup title={L_CAMERA_COMPONENT} show={show} expanded={expanded} onExpand={this.handleExpand}>
<TextProperty name={'fov'} label={L_FOV} value={fov} onChange={this.handleChangeFov}></TextProperty>
<TextProperty name={'near'} label={L_NEAR} value={near} onChange={this.handleChangeNear}></TextProperty>
<TextProperty name={'far'} label={L_FAR} value={far} onChange={this.handleChangeFar}></TextProperty>
<NumberProperty name={'fov'} label={L_FOV} value={fov} onChange={this.handleChangeFov}></NumberProperty>
<NumberProperty name={'near'} label={L_NEAR} value={near} onChange={this.handleChangeNear}></NumberProperty>
<NumberProperty name={'far'} label={L_FAR} value={far} onChange={this.handleChangeFar}></NumberProperty>
</PropertyGroup>;
}

19
ShadowEditor.Web/src/ui/form/Button.jsx
View File

@ -7,32 +7,47 @@ import PropTypes from 'prop-types';
* @author tengge / https://github.com/tengge1
*/
class Button extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this, props.onClick);
}
render() {
const { className, style, children, color, disabled, ...others } = this.props;
const { className, style, children, color, disabled } = this.props;
return <button
className={classNames('Button', color, disabled && 'disabled', className)}
style={style}
disabled={disabled}
{...others}>
onClick={this.handleClick}>
{children}
</button>;
}
handleClick(onClick, event) {
onClick && onClick(this.props.name, event);
}
}
Button.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
name: PropTypes.string,
children: PropTypes.node,
color: PropTypes.oneOf(['primary', 'success', 'warn', 'danger']),
disabled: PropTypes.bool,
onClick: PropTypes.func,
};
Button.defaultProps = {
className: null,
style: null,
name: null,
children: null,
color: null,
disabled: false,
onClick: null,
};
export default Button;

25
ShadowEditor.Web/src/ui/form/CheckBox.jsx
View File

@ -10,34 +10,23 @@ class CheckBox extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: props.checked,
};
this.handleChange = this.handleChange.bind(this, props.onChange);
}
handleChange(onChange, event) {
const target = event.target;
const name = target.getAttribute('name');
const checked = target.checked;
this.setState({ checked });
onChange && onChange(name, checked, event);
}
render() {
const { className, style, name, checked, disabled, onChange } = this.props;
const { className, style, checked, disabled, onChange } = this.props;
return <input
type={'checkbox'}
className={classNames('CheckBox', this.state.checked && 'checked', disabled && 'disabled', className)}
style={style}
name={name}
defaultChecked={this.state.checked}
checked={this.state.checked}
disabled={disabled}
onClick={this.handleChange} />;
}
handleChange(onChange, event) {
onChange && onChange(event.target.checked, this.props.name, event);
}
}
CheckBox.propTypes = {
@ -52,7 +41,7 @@ CheckBox.propTypes = {
CheckBox.defaultProps = {
className: null,
style: null,
name: undefined,
name: null,
checked: false,
disabled: false,
onChange: null,

27
ShadowEditor.Web/src/ui/form/Form.jsx
View File

@ -13,39 +13,36 @@ class Form extends React.Component {
this.handleSubmit = this.handleSubmit.bind(this, props.onSubmit);
}
render() {
const { className, style, children, direction } = this.props;
return <form
className={classNames('Form', direction, className)}
style={style}
onSubmit={this.handleSubmit}>
{children}
</form>;
}
handleSubmit(onSubmit) {
event.preventDefault();
onSubmit && onSubmit();
}
render() {
const { className, style, children, direction, onSubmit, ...others } = this.props;
return <form
className={classNames('Form', direction, className)}
style={style}
onSubmit={this.handleSubmit}
{...others}>
{children}
</form>;
}
}
Form.propTypes = {
onSubmit: PropTypes.func,
className: PropTypes.string,
style: PropTypes.object,
children: PropTypes.node,
direction: PropTypes.oneOf(['horizontal', 'vertical']),
onSubmit: PropTypes.func,
};
Form.defaultProps = {
onSubmit: null,
className: null,
style: null,
children: null,
direction: 'horizontal',
onSubmit: null,
};
export default Form;

4
ShadowEditor.Web/src/ui/form/FormControl.jsx
View File

@ -8,9 +8,9 @@ import PropTypes from 'prop-types';
*/
class FormControl extends React.Component {
render() {
const { className, style, children, ...others } = this.props;
const { className, style, children } = this.props;
return <div className={classNames('FormControl', className)} style={style} {...others}>
return <div className={classNames('FormControl', className)} style={style}>
{children}
</div>;
}

17
ShadowEditor.Web/src/ui/form/IconButton.jsx
View File

@ -7,23 +7,33 @@ import PropTypes from 'prop-types';
* @author tengge / https://github.com/tengge1
*/
class IconButton extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this, props.onClick);
}
render() {
const { className, style, icon, title, selected, onClick, ...others } = this.props;
const { className, style, icon, name, title, selected } = this.props;
return <button
className={classNames('IconButton', selected && 'selected', className)}
style={style}
title={title}
onClick={onClick}
{...others}>
onClick={this.handleClick}>
<i className={classNames('iconfont', icon && 'icon-' + icon)}></i>
</button>;
}
handleClick(onClick, event) {
onClick && onClick(this.props.name, event);
};
}
IconButton.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
icon: PropTypes.string,
name: PropTypes.string,
title: PropTypes.string,
selected: PropTypes.bool,
onClick: PropTypes.func,
@ -33,6 +43,7 @@ IconButton.defaultProps = {
className: null,
style: null,
icon: null,
name: null,
title: null,
selected: false,
onClick: null,

24
ShadowEditor.Web/src/ui/form/Input.jsx
View File

@ -14,30 +14,31 @@ class Input extends React.Component {
this.handleInput = this.handleInput.bind(this, props.onInput);
}
handleChange(onChange, event) {
onChange && onChange(event.target.value, event);
}
handleInput(onInput, event) {
onInput && onInput(event.target.value, event);
}
render() {
const { className, style, value, disabled, onChange, onInput } = this.props;
const { className, style, name, value, disabled } = this.props;
return <input
className={classNames('Input', className)}
style={style}
value={value}
disabled={disabled}
onChange={this.handleChange}
onInput={this.handleInput}
disabled={disabled} />;
onInput={this.handleInput} />;
}
handleChange(onChange, event) {
onChange && onChange(event.target.value, this.props.name, event);
}
handleInput(onInput, event) {
onInput && onInput(event.target.value, this.props.name, event);
}
}
Input.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
name: PropTypes.string,
value: PropTypes.string,
disabled: PropTypes.bool,
onChange: PropTypes.func,
@ -47,6 +48,7 @@ Input.propTypes = {
Input.defaultProps = {
className: null,
style: null,
name: null,
value: '',
disabled: false,
onChange: null,

10
ShadowEditor.Web/src/ui/form/Label.jsx
View File

@ -7,10 +7,14 @@ import PropTypes from 'prop-types';
* @author tengge / https://github.com/tengge1
*/
class Label extends React.Component {
render() {
const { className, style, children, ...others } = this.props;
constructor(props) {
super(props);
}
return <label className={classNames('Label', className)} style={style} {...others}>
render() {
const { className, style, children } = this.props;
return <label className={classNames('Label', className)} style={style}>
{children}
</label>;
}

33
ShadowEditor.Web/src/ui/form/Radio.jsx
View File

@ -10,40 +10,32 @@ class Radio extends React.Component {
constructor(props) {
super(props);
this.state = {
selected: props.selected,
};
this.handleChange = this.handleChange.bind(this, props.onChange);
}
handleChange(onChange, event) {
this.setState({
selected: event.target.checked,
});
onChange && onChange(event.target.checked, event);
}
render() {
const { className, style, selected, disabled, onChange, ...others } = this.props;
return <input
type={'radio'}
const { className, style, checked, disabled } = this.props;
return <input type={'radio'}
className={classNames('Radio',
this.state.selected && 'selected',
this.state.checked && 'checked',
disabled && 'disabled',
className)}
style={style}
defaultChecked={this.state.selected}
checked={this.state.checked}
disabled={disabled}
onClick={this.handleChange}
{...others} />;
onClick={this.handleChange} />;
}
handleChange(onChange, event) {
onChange && onChange(event.target.checked, this.props.name, event);
}
}
Radio.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
selected: PropTypes.bool,
name: PropTypes.string,
checked: PropTypes.bool,
disabled: PropTypes.bool,
onChange: PropTypes.func,
};
@ -51,7 +43,8 @@ Radio.propTypes = {
Radio.defaultProps = {
className: null,
style: null,
selected: false,
name: null,
checked: false,
disabled: false,
onChange: null,
};

2
ShadowEditor.Web/src/ui/form/SearchField.jsx
View File

@ -105,7 +105,7 @@ class SearchField extends React.Component {
});
}
handleCheckBoxChange(onInput, onChange, name, checked, event) {
handleCheckBoxChange(onInput, onChange, checked, name, event) {
let categories = this.state.categories;
let index = categories.indexOf(name);

30
ShadowEditor.Web/src/ui/form/Select.jsx
View File

@ -13,21 +13,8 @@ class Select extends React.Component {
this.handleChange = this.handleChange.bind(this, props.onChange);
}
handleChange(onChange, event) {
const selectedIndex = event.target.selectedIndex;
if (selectedIndex === -1) {
onChange && onChange(null, event);
return;
}
const value = event.target.options[selectedIndex].value;
onChange && onChange(value, event);
}
render() {
const { className, style, options, value, disabled, onChange } = this.props;
const { className, style, options, value, disabled } = this.props;
return <select
className={classNames('Select', className)}
@ -40,12 +27,26 @@ class Select extends React.Component {
})}
</select>;
}
handleChange(onChange, event) {
const selectedIndex = event.target.selectedIndex;
if (selectedIndex === -1) {
onChange && onChange(null, event);
return;
}
const value = event.target.options[selectedIndex].value;
onChange && onChange(value, this.props.name, event);
}
}
Select.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
options: PropTypes.object,
name: PropTypes.string,
value: PropTypes.string,
disabled: PropTypes.bool,
onChange: PropTypes.func,
@ -55,6 +56,7 @@ Select.defaultProps = {
className: null,
style: null,
options: null,
name: null,
value: null,
disabled: false,
onChange: null,

33
ShadowEditor.Web/src/ui/form/TextArea.jsx
View File

@ -10,44 +10,34 @@ class TextArea extends React.Component {
constructor(props) {
super(props);
this.state = {
value: props.value,
};
this.handleChange = this.handleChange.bind(this, props.onChange);
this.handleInput = this.handleInput.bind(this, props.onInput);
}
handleChange(onChange, event) {
this.setState({
value: event.target.value,
});
onChange && onChange(event.target.value, event);
}
handleInput(onInput, event) {
this.setState({
value: event.target.value,
});
onInput && onInput(event.target.value, event);
}
render() {
const { className, style, value, onChange, onInput, ...others } = this.props;
const { className, style, value } = this.props;
return <textarea
className={classNames('TextArea', className)}
style={style}
value={this.state.value}
onChange={this.handleChange}
onInput={this.handleInput}
{...others}></textarea>;
onInput={this.handleInput}></textarea>;
}
handleChange(onChange, event) {
onChange && onChange(event.target.value, this.props.name, event);
}
handleInput(onInput, event) {
onInput && onInput(event.target.value, this.props.name, event);
}
}
TextArea.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
name: PropTypes.string,
value: PropTypes.string,
onChange: PropTypes.func,
onInput: PropTypes.func,
@ -56,6 +46,7 @@ TextArea.propTypes = {
TextArea.defaultProps = {
className: null,
style: null,
name: null,
value: '',
onChange: null,
onInput: null,

32
ShadowEditor.Web/src/ui/form/Toggle.jsx
View File

@ -10,39 +10,32 @@ class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {
selected: props.selected,
};
this.handleChange = this.handleChange.bind(this, props.onChange);
}
handleChange(onChange, event) {
var selected = event.target.classList.contains('selected');
this.setState({
selected: !selected,
});
onChange && onChange(!selected, event);
}
render() {
const { className, style, selected, disabled, onChange, ...others } = this.props;
const { className, style, checked, disabled, onChange } = this.props;
return <div
className={classNames('Toggle', this.state.selected && 'selected',
className={classNames('Toggle', this.state.checked && 'checked',
disabled && 'disabled',
className)}
style={style}
onClick={disabled ? null : this.handleChange}
{...others}></div>;
onClick={disabled ? null : this.handleChange}></div>;
}
handleChange(onChange, event) {
var checked = event.target.classList.contains('checked');
onChange && onChange(!checked, this.props.name, event);
}
}
Toggle.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
selected: PropTypes.bool,
name: PropTypes.string,
checked: PropTypes.bool,
disabled: PropTypes.bool,
onChange: PropTypes.func,
};
@ -50,7 +43,8 @@ Toggle.propTypes = {
Toggle.defaultProps = {
className: null,
style: null,
selected: false,
name: null,
checked: false,
disabled: false,
onChange: null,
};

4
ShadowEditor.Web/src/ui/form/css/Radio.css
View File

@ -7,7 +7,7 @@
cursor: pointer;
}
.Radio.selected {
.Radio.checked {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFlSURBVDhP1ZO/SsNQFMYzKuimm4OPoFVxlKoFoTrqI+gDiIhro4KLm9C61ERaseDiE2gRlOqmiLRd62w61enzftcTcluTNHbrDw5cknM+zl9ruJk4wfhcAYupAnZofE+eYUx+/4/0BQ7WS2hsVeDZd+jQ+N4oo77sYF/ckrHqonZcxRciOKzCyzh4FPd4KHbzLpExXL8BGRdPEhYOy+zNrP0NvHz+Gt8m9j28tIM9Ce+GA2DPxFdz+wEsFQE1DG1885tJtozm1ClGRSaAE2TTxU9nY4qZomammypm5hwLIhPAtVAldMQPz62/Yr7xn09OTT+Vx7bIBAwqyJhQQeU4cMmzecyLTAAvgEsrfpqkQ5kuYkRkuuEFHKmlFV8Ns2GJNDMzovrXXnGxK+Hh8AIqamn7cfUKrF3iQcLi4QXYPZmaMLPEYj68gGwJTTadk6TxzZ71LTMKXgCXlmtB4zQjBzAkWNYPuWx6Vj2oQrgAAAAASUVORK5CYII=);
}
@ -16,6 +16,6 @@
cursor: default;
}
.Radio.selected.disabled {
.Radio.checked.disabled {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE1SURBVDhP1ZNJDoJAEEVZaiK30XgjPYAhxvuZaDwCegMmGUIIC9r/6UIaRBR3vqRip4ZPdVVr/TdKKdv3/bXneVsaz/AtJDwNFB/CMLzC4jRNCxrPQRC4iO0l7TtQdIHAHd0MkiRJDNGTpI9DsTzPpfQ9zEHuWcqG4TX7nVVVpcqyrI1nE3aKMThS3gVxmzPTqZqiKBQ+orCQ2nimzwQ1N/zMRaYFyWsOXafpzkwxU9TslDXwrUSmBcnbLMuen+cV+2KNMdbA7cO3EZkWOH8SZA18r4K/XjmKohj+pci0ILZA0NVpmglLmYlMFxTsMZNnl4Td8Io0szOCZ5PgLe6kfBiIniY87KOUjcN/QL9TE+nsO7EGzMbhfLgobpLGBdD38ZrvQDNzjGCFhWzElvANL+BPsKwHYaPc6BXkh3gAAAAASUVORK5CYII=);
}

4
ShadowEditor.Web/src/ui/form/css/Toggle.css
View File

@ -7,7 +7,7 @@
cursor: pointer;
}
.Toggle.selected {
.Toggle.checked {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAUCAYAAADoZO9yAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABRSURBVEhLYzCe+f//YMDDxyEzz/z/P4NMXL8fYQ7FDqEEnHmGMGfUISAw6hB0MOoQdDDqEHQw6hB0MOoQdDA8HQJqBpCLqdoMoBYeJA75/x8AV8uDZSB9PMIAAAAASUVORK5CYII=);
}
@ -16,6 +16,6 @@
cursor: default;
}
.Toggle.selected.disabled {
.Toggle.checked.disabled {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAUCAYAAADoZO9yAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABQSURBVEhL7dahCgAgDIRh3/9Vrw1WVhTLwmEQNci4H66Or2kD0H9YHYi7H8/M8s415KaIyDuCzAThBOEE4QThBOFqQlbP++6efgNe7RMI+gDSby3zpGs0DgAAAABJRU5ErkJggg==);
}

1
ShadowEditor.Web/src/ui/index.js
View File

@ -58,6 +58,7 @@ export { default as PropertyGroup } from './property/PropertyGroup.jsx';
export { default as DisplayProperty } from './property/DisplayProperty.jsx';
export { default as TextProperty } from './property/TextProperty.jsx';
export { default as CheckBoxProperty } from './property/CheckBoxProperty.jsx';
export { default as NumberProperty } from './property/NumberProperty.jsx';
// svg
export { default as SVG } from './svg/SVG.jsx';