@ima/devtools
Version:
IMA.js debugging panel in the Chrome Developer Tools window.
189 lines (158 loc) • 4.11 kB
JSX
import { PresetType } from '@/utils';
import { Tooltip } from '@reach/tooltip';
import PropTypes from 'prop-types';
import React from 'react';
import { IconButton } from '@/components/atom';
import styles from './presetEntry.module.less';
export default class PresetEntry extends React.PureComponent {
static get propTypes() {
return {
id: PropTypes.string.isRequired,
preset: PresetType,
onClick: PropTypes.func,
renamePreset: PropTypes.func,
copyPreset: PropTypes.func,
deletePreset: PropTypes.func,
alertSuccess: PropTypes.func,
showConfirmModal: PropTypes.func,
};
}
constructor(props) {
super(props);
this.state = {
editable: false,
name: props.preset.name,
};
}
render() {
const { editable: presetEditable } = this.props.preset;
const { editable } = this.state;
return (
<div onClick={e => this.onClick(e)} className={styles.wrapper}>
{editable && presetEditable ? this._renderForm() : this._renderPreset()}
</div>
);
}
_renderPreset() {
const { name, editable, selected } = this.props.preset;
return (
<>
{selected ? <strong>{name}</strong> : <span>{name}</span>}
<div className={styles.actions}>
<Tooltip label='Duplicate preset'>
<span>
<IconButton onClick={e => this.onCopy(e)} name='copy' />
</span>
</Tooltip>
{editable && (
<>
<Tooltip label='Edit preset'>
<span>
<IconButton onClick={e => this.onEdit(e)} name='edit' />
</span>
</Tooltip>
<Tooltip label='Delete preset'>
<span>
<IconButton onClick={e => this.onDelete(e)} name='trash' />
</span>
</Tooltip>
</>
)}
</div>
</>
);
}
_renderForm() {
const { name } = this.state;
return (
<>
<input onChange={e => this.onChange(e)} value={name} type='text' />
<div className={styles.actions}>
<Tooltip label='Confirm changes'>
<span>
<IconButton
onClick={e => this.onConfirm(e)}
color='success'
name='check'
/>
</span>
</Tooltip>
<Tooltip label='Discard changes'>
<span>
<IconButton
onClick={e => this.onDiscard(e)}
color='danger'
name='close'
/>
</span>
</Tooltip>
</div>
</>
);
}
onChange({ target: { value } }) {
this.setState({
name: value,
});
}
onClick(e) {
e.preventDefault();
e.stopPropagation();
const { onClick } = this.props;
const { editable } = this.state;
if (editable) {
return;
}
onClick();
}
onConfirm(e) {
e.preventDefault();
e.stopPropagation();
const { name } = this.state;
const { renamePreset, id } = this.props;
renamePreset({ id, name });
this.setState({
editable: false,
});
}
onCopy(e) {
e.preventDefault();
e.stopPropagation();
const { copyPreset, id } = this.props;
copyPreset(id);
}
onEdit(e) {
e.preventDefault();
e.stopPropagation();
this.setState({
editable: true,
});
}
onDelete(e) {
e.preventDefault();
e.stopPropagation();
const { name } = this.props.preset;
const { showConfirmModal, deletePreset, id, alertSuccess } = this.props;
showConfirmModal({
body: (
<p>
Are you sure you <strong>want to delete</strong> ' {name}
' preset?
</p>
),
accept: () => {
deletePreset(id);
alertSuccess(`Preset '${name}' was deleted.`);
},
});
}
onDiscard(e) {
e.preventDefault();
e.stopPropagation();
const { name } = this.props.preset;
this.setState({
name,
editable: false,
});
}
}