|
|
@@ -1,6 +1,8 @@
|
|
|
import React from 'react';
|
|
|
-import keydown from 'react-keydown';
|
|
|
import { HotKeys } from 'react-hotkeys';
|
|
|
+
|
|
|
+import loggerFactory from '@alias/logger';
|
|
|
+
|
|
|
import contributors from './Contributor';
|
|
|
|
|
|
/**
|
|
|
@@ -11,26 +13,24 @@ import contributors from './Contributor';
|
|
|
* @extends {React.Component}
|
|
|
*/
|
|
|
|
|
|
-const keyMap = {
|
|
|
- SNAP_LEFT: 'command',
|
|
|
- DELETE_NODE: ['del', 'backspace'],
|
|
|
-};
|
|
|
-
|
|
|
export default class StaffCredit extends React.Component {
|
|
|
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
|
|
|
+ this.logger = loggerFactory('growi:StaffCredit');
|
|
|
+
|
|
|
this.state = {
|
|
|
isShown: false,
|
|
|
userCommand: [],
|
|
|
};
|
|
|
- this.konamiCommand = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', '5', '7', '3'];
|
|
|
+ this.konamiCommand = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
|
|
|
this.deleteCredit = this.deleteCredit.bind(this);
|
|
|
}
|
|
|
|
|
|
- @keydown('enter', 'up', 'down', 'right', 'left', '5', '7', '3')
|
|
|
check(event) {
|
|
|
+ this.logger.debug(`'${event.key}' pressed`);
|
|
|
+
|
|
|
// compare keydown and next konamiCommand
|
|
|
if (this.konamiCommand[this.state.userCommand.length] === event.key) {
|
|
|
const nextValue = this.state.userCommand.concat(event.key);
|
|
|
@@ -43,6 +43,8 @@ export default class StaffCredit extends React.Component {
|
|
|
else {
|
|
|
// add UserCommand
|
|
|
this.setState({ userCommand: nextValue });
|
|
|
+
|
|
|
+ this.logger.debug('userCommand', this.state.userCommand);
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
@@ -56,15 +58,15 @@ export default class StaffCredit extends React.Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- render() {
|
|
|
+ renderContributors() {
|
|
|
if (this.state.isShown) {
|
|
|
const credit = contributors.map((contributor) => {
|
|
|
const section = <p key={contributor.sectionName} className="dev-team my-5">{contributor.sectionName}</p>;
|
|
|
const members = contributor.members.map((member) => {
|
|
|
- const name = <p className="dev-name mb-5">{member.name}</p>;
|
|
|
+ const name = <p className="dev-name mb-5" key={member.name}>{member.name}</p>;
|
|
|
if (member.position) {
|
|
|
return (
|
|
|
- <React.Fragment>
|
|
|
+ <React.Fragment key={member.position}>
|
|
|
<span className="dev-position">{member.position}</span>
|
|
|
{name}
|
|
|
</React.Fragment>
|
|
|
@@ -82,22 +84,27 @@ export default class StaffCredit extends React.Component {
|
|
|
);
|
|
|
});
|
|
|
return (
|
|
|
- <HotKeys keyMap={keyMap}>
|
|
|
- <div>
|
|
|
- hugahuga
|
|
|
+ <div className="text-center credit-curtain" onClick={this.deleteCredit}>
|
|
|
+ <div className="credit-body">
|
|
|
+ <p className="title my-5">Growi Contributor</p>
|
|
|
+ {credit}
|
|
|
</div>
|
|
|
- </HotKeys>
|
|
|
- // <div className="text-center credit-curtain" onClick={this.deleteCredit}>
|
|
|
- // <div className="credit-body">
|
|
|
- // <p className="title my-5">Growi Contributor</p>
|
|
|
- // {credit}
|
|
|
- // </div>
|
|
|
- // </div>
|
|
|
+ </div>
|
|
|
);
|
|
|
}
|
|
|
return null;
|
|
|
}
|
|
|
|
|
|
+ render() {
|
|
|
+ const keyMap = { check: ['up', 'down', 'right', 'left', 'b', 'a'] };
|
|
|
+ const handlers = { check: (event) => { return this.check(event) } };
|
|
|
+ return (
|
|
|
+ <HotKeys focused attach={window} keyMap={keyMap} handlers={handlers}>
|
|
|
+ {this.renderContributors()}
|
|
|
+ </HotKeys>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
StaffCredit.propTypes = {
|