@doreamonjs/gate
Version:
gate for doreamonjs
148 lines (147 loc) • 6.67 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const dva_1 = require("dva");
const classnames_1 = __importDefault(require("classnames"));
const doreamon_1 = __importDefault(require("@zodash/doreamon"));
const icons_1 = require("@ant-design/icons");
const components_1 = require("@doreamonjs/components");
const application = __importStar(require("@doreamonjs/plugin-application"));
const user = __importStar(require("@doreamonjs/plugin-user"));
const screen = __importStar(require("@doreamonjs/plugin-screen"));
const constants_1 = require("./constants");
require("./index.less");
const componentName = 'doreamonjs-design-gate-global-lockscreen';
const REFRESH_INTERVAL = 1000 / 30;
class Lock extends react_1.Component {
constructor() {
super(...arguments);
this.it = null;
this.state = {
shaking: false,
password: '',
now: new Date(),
};
this.onChange = (event) => {
this.setState({ password: event.target.value });
};
this.onUnlock = (event) => {
this.props.onUnlock(this.state.password);
};
this.onEnter = (event) => {
if (event.key === 'Enter') {
this.props.onUnlock(this.state.password);
}
};
// private startShaking = () => {
// this.setState({ shaking: true });
// };
this.stopShaking = () => {
// this.setState({ shaking: false });
this.props.onRaiseErrorEnd();
};
}
static getDerivedStateFromProps(props) {
return {
shaking: props.screens.raiseError,
};
}
componentDidMount() {
this.it = setInterval(() => {
this.setState({
now: new Date(),
});
}, REFRESH_INTERVAL);
}
componentWillUnmount() {
if (this.it) {
clearInterval(this.it);
this.it = null;
}
}
get date() {
const { now } = this.state;
return doreamon_1.default.date(now, { locale: constants_1.DEFAULT_LOCALE }).format('YYYY MMMMDD dddd');
}
get time() {
const { now } = this.state;
const [hour, minute, second] = doreamon_1.default.date(now, { locale: constants_1.DEFAULT_LOCALE })
.format('HH:mm:ss')
.split(':');
return { hour, minute, second };
}
render() {
const { user, site } = this.props;
const { shaking } = this.state;
const containerCls = classnames_1.default(componentName, 'container');
const contentCls = classnames_1.default('content', {
animated: true,
bounceInDown: true,
});
const manualCls = classnames_1.default('manual', {
animated: true,
shake: shaking,
});
const date = this.date;
const time = this.time;
return (react_1.default.createElement("div", { className: containerCls, id: "lockscreen" },
react_1.default.createElement("div", { className: contentCls },
react_1.default.createElement("div", { className: 'logoWrapper' },
react_1.default.createElement("span", null,
site.logo ? (react_1.default.createElement("img", { className: 'logoImage', alt: "site-logo", src: site.logo })) : null,
react_1.default.createElement("span", { className: "name" }, site.name))),
react_1.default.createElement("div", { className: 'avatarWrapper' },
react_1.default.createElement(components_1.Avatar, { className: 'avatar', src: user.avatar })),
react_1.default.createElement("div", { className: manualCls, onAnimationEnd: this.stopShaking },
react_1.default.createElement("input", { type: "password", className: 'input', placeholder: "\u8BF7\u8F93\u5165\u9501\u5C4F\u5BC6\u7801", onChange: this.onChange, onKeyDown: this.onEnter }),
react_1.default.createElement("div", { className: 'actions' },
react_1.default.createElement("button", { className: 'action', onClick: this.onUnlock },
react_1.default.createElement(icons_1.LockOutlined, null))))),
react_1.default.createElement("div", { className: 'times' },
react_1.default.createElement("div", { className: 'date' }, date),
react_1.default.createElement("ul", { className: 'time' },
react_1.default.createElement("li", { className: 'hour' }, time.hour),
react_1.default.createElement("li", { className: 'point' }, ":"),
react_1.default.createElement("li", { className: 'minute' }, time.minute),
react_1.default.createElement("li", { className: 'point' }, ":"),
react_1.default.createElement("li", { className: 'second' }, time.second)))));
}
}
const mapState = (state) => {
var _a;
const applications = state[application.NAMESPACE];
const _user = (_a = state[user.NAMESPACE]) === null || _a === void 0 ? void 0 : _a.values;
const screens = state[screen.NAMESPACE];
return {
site: applications.site,
user: _user,
screens,
};
};
const mapActions = (dispatch) => ({
onUnlock: (password) => dispatch({ type: `${screen.NAMESPACE}/unlock`, payload: password }),
onRaiseErrorEnd: () => dispatch({ type: `${screen.NAMESPACE}/unlock/raise/error/end` }),
});
exports.default = dva_1.connect(mapState, mapActions)(Lock);