@doreamonjs/gate
Version:
gate for doreamonjs
127 lines • 5.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const dva_1 = require("dva");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const doreamon_1 = tslib_1.__importDefault(require("@zodash/doreamon"));
const icons_1 = require("@ant-design/icons");
const components_1 = require("@doreamonjs/components");
const application = tslib_1.__importStar(require("@doreamonjs/plugin-application"));
const user = tslib_1.__importStar(require("@doreamonjs/plugin-user"));
const screen = tslib_1.__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);
//# sourceMappingURL=index.js.map