render() {
const props = this.props;
const styled = { top: this.state.top }
const lg = (this.modalType == "full" ? true : false);
return (
<StyledObject className={cx("modal", props.theme)} history={history} onKeyPress={this.onKeyPressed}>
<div className="bg" eid={EID.CANCEL}></div>
<div ref={ref => { this.frame = ref }} className={cx("modal-dialog", (props.size))} style={styled}>
<div className="modal-content" ref={ref => { this.contents = ref }}>
<div className="modal-header">
<span className="modal-title">{props.title}<span>{this.state.key}</span></span>
<a type="button" className="close" onClick={this.onClicked} eid={EID.CANCEL}>×</a>
</div>
{props.desc && <div className="modal-desc">{props.desc}</div>}
<div className="modal-body">
{props.children}
</div>
<div className="modal-footer">
{props.delete && <Button theme={cx("red left", { lg })} onClick={this.onClicked} title={props.delete} eid={EID.DELETE} />}
<Button theme={cx("primary", { lg })} onClick={this.onClicked} title={props.ok ? props.ok : ST.OK} eid={EID.OK} />
{props.cancel && <Button theme={cx("primary mL10", { lg })} onClick={this.onClicked} title={props.cancel} eid={EID.CANCEL} />}
</div>
</div>
</div>
</StyledObject>
)
};
export default function NavigationBar(props) {
return (
<div className="container">
<header className="header">
<nav role="navigation" className="navbar navbar-default navbar-fixed-top">
<div className="container">
<div className="navbar-header">
<Link className="navbar-brand" to="/">Langue</Link>
</div>
<div className="navbar-collapse collapse">
<ul className="nav navbar-nav navbar-right">
<li className={classNames({hidden: window.langue_api_token})}>
<Link to="/login">Login</Link>
</li>
<li className={classNames({hidden: window.langue_api_token})}>
<Link to="/register">Register</Link>
</li>
<li className={classNames({hidden: !window.langue_api_token})}>
<a href="/logout">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main role="main">
<div className="container">
{props.children}
</div>
</main>
</div>
);
};
render() {
const { isWaiting, message, isLogin } = this.props.user;
return (
<div className={classNames('login', {
waiting: isWaiting
})}>
<div className='container'>
{ this.renderHeader() }
<img className='loading' />
<div className='email-container'>
<form onSubmit={this.handleOnSubmit}>
<input className='input'
type="email"
ref="email"
placeholder="email" />
<input className='input'
type="password"
ref="password"
placeholder="password" />
<p className={classNames('message', {
'message-show': message && message.length > 0
})}>{message}</p>
<input className='button'
type="submit"
value={isLogin ? 'Login' : 'Register'} />
</form>
</div>
</div>
</div>
);
}
renderInputContainer() {
const { object, label, disabled } = this.props
return (
<div className={cx('form-group', 'form-group-default', object.active && 'focused', disabled && 'disabled')}
onClick={this.handleClick}>
<label className={cx('fade')}>{label}</label>
{this.renderInput()}
</div>
)
}
let Header = ({connected}) => (
<h1>EOS Emulator | {' '}
<span id="connected" className={classNames({'connected' : connected})}>
connected
</span>
</h1>
);
render() {
let user = this.state.user,
successInfo = this.state.successInfo;
return <div>
<Head user={user} />
<h2 className="pay-title">英雄充值</h2>
<div className="pay-main pay-back">
<div className="" className={classNames(
'back-text',
'success',
{ 'spe': !(successInfo&&successInfo.mobi)}
)}>充值成功</div>
{successInfo&&successInfo.mobi? <div className="back-info">
<h3>你获得了</h3>
<div className="back-info-main">
<div className="back-info-title">{successInfo.mobi}猫币</div>
<div className="back-info-detail">
<h2>Lv.{successInfo.level}{successInfo.occupation_name}</h2>
<p>（有效期至{successInfo.end_date}）</p>
</div>
</div>
</div> : ``}
</div>
</div>;
}
render(){
if(this.props.details !== null){
var btnClass = classNames({
'item':true,
'hide':true,
'btn-pressed': this.state.isPressed
});
return(
<div className="item-group">
<ul className='item'>
<li className="options-block">
<ul>
<button className="delete" ref="delete" onClick={this.props.deleteProperty.bind(null, this.props.index, this.props.details._id, this.props.accountId)}>Delete</button>
<button className="edit-btn" onClick={this.toggleButton.bind(this)}>Edit</button>
<button className="back-btn" onClick={this.toggleButton.bind(this)}>Back</button>
</ul>
</li>
{Object.keys(this.props.properties).map(this.renderPropertyField.bind(this))}
</ul>
<form ref="propertyForm" className={btnClass} onSubmit={this.savePropertyObj.bind(this)}>
<span className="cell">
<button type="submit" className="save-btn">Save</button>
</span>
{Object.keys(this.props.properties).map(this.renderEditField.bind(this))}
</form>
</div>
)
} else {
return( null )
}
}
render() {
var btnClass = classNames('btn', this.props.className, {
'btn-pressed': this.state.isPressed,
'animate': !this.state.isPressed && this.state.isHovered
});
var title = this.props.contents.title;
var body = this.props.contents.body;
// forked via http://codepen.io/virgilpana/pen/RNYQwB
return (
<div id="canvas-3D">
<div id="product-card" className={btnClass} onClick={this.click.bind(this)}
onMouseEnter={this.hover.bind(this)} onMouseLeave ={this.unhover.bind(this)}>
<div id="product-front">
<div className="image-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
</div>
<div className="image_overlay"></div>
<div id="view_details">View details</div>
<div className="stats">
<div className="stats-container">
<span className="product_name">{title}</span>
<p>{body}</p>
<div className="product-options">
<strong>SIZES</strong>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
const Button = (props) => {
const onClicked = (e) => {
if (props.onClick != null) {
props.onClick(props.eid, e);
}
}
const disabled = props.disabled;
return (
<StyledObject {...props} eid={props.eid} className={cx('button', props.theme, { disabled })}
onClick={disabled ? () => null : onClicked} to={props.to} >
{props.icon && <img className={cx("icon", (props.title && "mR"))} src={props.icon} />}
{props.title}
</StyledObject>
)
}
{items.map((item, index) => (
<div key={index} className={cx("box", item.type)}>
<a type="button" className="close" onClick={this.onClicked} eid={EID.CANCEL}>×</a>
<div className="body">
<div className="msg">{item.value}</div>
</div>
</div>
))}
const Hamburger = ({active, onToggle}) => (
<div className={cx('hamburger-wrapper')} onClick={onToggle}>
<div className={classNames("hamburger hamburger--elastic", { 'is-active': active})}>
<span className="hamburger-box">
<span className="hamburger-inner"></span>
</span>
</div>
</div>
);
render() {
const props = this.props;
return (
<StyledObject className={cx("group", props.theme)}>
<Editbox ref={ref => { this.refStart = ref }} value={props.sdate} name="start" type="date" guide={props.sguide} label={props.isLabel && ST.START_DATE} />
<div className="addon">to</div>
<Editbox ref={ref => { this.refEnd = ref }} value={props.edate} name="end" type="date" guide={props.eguide} label={props.isLabel && ST.END_DATE} />
</StyledObject>
);
}
render() {
const { className } = this.props
const classes = classNames(className, 'ui-tabs')
return (
<div className={classes}>
{this.renderTabNav()}
{this.renderTabContent()}
</div>
)
}
/**
* Error Label Component
* return a stateless react component
* @param {Object} classes - Default css classes always added to the component
* @param {Object} field - Input store current values, inbluding if the input is valid
* @return {React Component} Return the component.
*/
export default ({classes, field}) => {
const labelClass = classNames({
[classes]: true,
'label-error': true,
'label-error--hidden': field.valid === false ? false : true,
});
return (
<div className={labelClass}>
{ field.message }
</div>
);
};
renderInput() {
const { object, type, disabled, size, focus } = this.props
return (
<span>
<input type={type} ref="input"
className={cx('form-control', size ? 'input-' + size : '')}
autoFocus={focus} {...object} onChange={this.onChange} disabled={disabled} />
{object.dirty && object.error && <div className="text-danger">{object.error}</div>}
</span>
)
}
render() {
var appUiState = classNames({
'app':true,
'admin-open': this.state.isPressed
});
return (
<div className={appUiState} >
{this.loadStateFromStorage()}
<ProjectPanel {...this.props} sortProjectProperties={this.sortProjectProperties.bind(this)} />
<AdminPanel {...this.props} togglePanel={this.togglePanel.bind(this)} sortProjectProperties={this.sortProjectProperties.bind(this)} />
</div>
)
}
elemNoti = () => {
let value = ST.ALERT.NO_INPUT_VALUE;
if (this.state.noti_value != null && this.state.noti_value.length > 1) {
value = this.state.noti_value;
}
const align = this.props.type.indexOf("number") >= 0 ? 'left' : 'right';
if (this.state.noti) {
return <span className={cx("noti", align)}>{value}</span>
}
return null;
}
export const Nodata = (props) => {
const onClicked = (e) => {
if (props.onClick != null) {
props.onClick(props.eid, e);
}
}
const isChildren = props.children ? true : false;
return (
<NodataFrame className={cx('no-frame')} >
{isChildren ? props.children : <div className="no-data">{props.title ? props.title : ST.NOTI.NODATA}</div>}
</NodataFrame>
)
}
render() {
var icon = this.state.isPlaying ? 'stop' : 'play_arrow' ;
var classes = classNames('sound btn-floating btn-large waves-effect waves-light red', {
'is-playing': this.state.isPlaying,
'is-loaded': this.state.isLoaded
});
return (
<div className="sound-container col s6 m4">
<a className={classes} onClick={this.play.bind(this)}>
<i className="icon-play material-icons">{icon}</i>
</a>
<span className="sound-label">{this.props.label}</span>
</div>
);
}
render() {
var index = 0;
const { data } = this.state;
// console.dir(data);
const { width, height } = CHART.BAR;
const renderCustomizedLabel = (props) => {
const {
x, y, width, height, value,
} = props;
const radius = 10;
return (
<g>
<circle cx={x + width / 2} cy={y - radius} r={radius} fill="#8884d8" />
<text x={x + width / 2} y={y - radius} fill="#fff" textAnchor="middle" dominantBaseline="middle">
{value.split(' ')[1]}
</text>
</g>
);
};
const item = data[this.state.activeIndex];
return (
<Cardbox theme={"chart-itm black-box bar"}>
<BarChart className="chart-frame" width={width} height={height} data={data} stackOffset="sign"
margin={{ top: 30, right: 0, left: 0, bottom: 5, }} >
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="label" />
<YAxis />
{/* <Tooltip /> */}
{/* <Legend /> */}
<ReferenceLine y={0} stroke="#000" />
<Bar dataKey='cost' fill="#33aa33" onClick={this.onClicked} label={{ position: 'top' }} >
{ data.map( (entry, index) => ( <Cell key={`cell-${index}`} fill={entry.cost < 0 ? "#1133aa" : "#aa3311"} /> ) ) }
</Bar>
{/* <Bar dataKey='+' stackId="a" fill="#cc2211" /> */}
{/* <Bar dataKey='-' stackId="a" fill="#1155cc" /> */}
</BarChart>
<span className={cx("info", (item.cost < 0 && 'minus'))}>{`${item.name} (${ST.SONIC} : ${item.cost}${ST.MANWON})`}</span>
<span className="unit">{`${ST.UNIT}[${ST.MANWON}]`}</span>
</Cardbox>
);
}
classes: (classes, el) => {
if (!el) {
console.warn('You must pass the inputname when using validate.classes');
}
let inputClasses;
if (typeof classes === 'object') {
inputClasses = {
...classes,
'input-validation-error': !component.validate.isInputValid(el),
};
} else {
inputClasses = {
[classes]: true,
'input-validation-error': !component.validate.isInputValid(el),
};
}
return classNames(inputClasses);
},
render() {
const props = this.props;
const noti = this.state.noti;
const disable = props.disable;
return (
<StyledObject className={props.theme}>
{this.elemLabel(props.label)}
<div className={cx("box", { disable })} >
{this.elemInput(props)}
<div className="underline"></div>
{this.elemNoti()}
{this.elemClear(props.clearButton)}
</div>
{this.elemHelper(props.helper)}
</StyledObject>
)
}
render() {
var footerClass = classNames({
'site-footer': true,
'padding10': !this.props.footerBig,
'padding45': this.props.footerBig
});
return (
<footer className={ footerClass } id="footer2">
<div className="container">
<div className="row">
<div className="col-md-8 col-sm-6 col-xs-12">
<ul className="footer-links">
<li><a href="#">About us</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">In press</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
<div className="col-md-4 col-sm-6 col-xs-12">
<ul className="footer-socials">
<li><a className="facebook" href="#"><i className="fa fa-facebook"></i></a></li>
<li><a className="twitter" href="#"><i className="fa fa-twitter"></i></a></li>
<li><a className="dribbble" href="#"><i className="fa fa-dribbble"></i></a></li>
<li><a className="linkedin" href="#"><i className="fa fa-linkedin"></i></a></li>
<li><a className="instagram" href="#"><i className="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div className="row">
<div className="col-md-8 col-sm-6 col-xs-12">
<p className="copyright-text">Copyrights © 2015 All Rights Reserved by <a href="#">ShaMSofT</a>.</p>
</div>
{ this.props.footerBig ? (
<div className="col-md-4 col-sm-6 col-xs-12">
<p className="back-to-top"><a id="scroll-up" href="#" onClick={ this.scrollUp }>back to top</a></p>
</div>
) : null }
</div>
</div>
</footer>
);
}
elemInput(props) {
const noti = this.state.noti;
const disable = props.disable;
const border = props.border;
let type = props.type;
let addedClass = "";
let attr = { placeholder: props.guide, spellCheck: false };
const right = type.indexOf("number") >= 0 ? 'right' : '';
if (type == "date") {
addedClass = "input-date";
attr = {
'data-date-format': 'yyyy-mm-dd'
}
}
if (props.required) {
attr.required = true;
}
if (disable) {
attr.disabled = true;
}
return <input
ref={(ref) => { this.input = ref }}
className={cx("input", { noti }, addedClass, { disable }, { border }, { right })}
type={type}
value={this.state.value}
onChange={this.onChanged}
maxLength={this.props.maxLength}
min={this.props.min}
max={this.props.max}
{...attr}
onKeyPress={this.onKeyPressed} />
}
render() {
const props = this.props;
const { width, height, radius } = CHART.PIE;
const { data } = this.state;
const leftLabel = data.map((item, index) => this.getLabel(index, item.color, item.title));
const item = data[this.state.activeIndex];
const info = (this.state.type === 'L') ? `${item.per}%`: `${item.value}${ST.MANWON}`;
return (
<Cardbox theme={"chart-itm black-box pie"}>
<div className="chart-frame">
{/* 현재 보유 종목 통계 */}
<PieChart className="inline" width={width} height={height} /* onMouseEnter={this.onClicked}*/ >
<Pie data={data} cx={width/2} cy={height/2} labelLine={false} dataKey="value" onClick={this.onClickedLeft}
label={this.renderPercent} outerRadius={radius} fill="#8884d8">
{ data.map((entry, index) => <Cell key={`c-${index}`} fill={entry.color} />) }
</Pie>
</PieChart>
<span className="gap"></span>
{/* 종목별 수익 통계 */}
<PieChart className="inline" width={width} height={height} >
<Pie data={data} cx={width/2} cy={height/2} labelLine={false} dataKey="value" onClick={this.onClickedRight}
label={this.renderCost} outerRadius={radius} fill="#8884d8">
{ data.map((entry, index) => <Cell key={`p-${index}`} fill={entry.color} />) }
</Pie>
</PieChart>
</div>
<span className={cx("info")}>{`${item.name} (${info})`}</span>
<span className="gui">{leftLabel}</span>
<span className="unit">{`${ST.UNIT}[${ST.MANWON}]`}</span>
</Cardbox>
);
}
export const News = ({ location, lang, match }) => {
const itemType = new URLSearchParams(location.search).get('itemType')
const getSearch = page => {
const params = new URLSearchParams(pickBy({page, itemType}, identity)).toString()
return params ? '?' + params : ''
}
return <Fragment>
<Title>
<Translate>
<English>News - Kongling Datasektionen</English>
<Swedish>Nyheter - Kongling Datasektionen</Swedish>
</Translate>
</Title>
<header key="header">
<div className="header-inner">
<div className="row">
<div className="header-left col-md-2">
<Link to="/">
{'« '}
<Translate>
<English>Back</English>
<Swedish>Tillbaka</Swedish>
</Translate>
</Link>
</div>
<div className="col-md-8">
<h2>
<Translate>
<English>News</English>
<Swedish>Nyheter</Swedish>
</Translate>
</h2>
</div>
<div className="header-right col-md-2">
<a className="primary-action" href="https://calypso.datasektionen.se/">
<Translate>
<English>Edit</English>
<Swedish>Redigera</Swedish>
</Translate>
</a>
</div>
</div>
</div>
</header>
<div id="content" key="content">
<div className="row">
<div className="col-sm-4 col-md-3">
<div id="secondary-nav">
<h3>
<Translate>
<English>Filters</English>
<Swedish>Filtrering</Swedish>
</Translate>
</h3>
<ul>
<li>
<Link
to={location.pathname}
className={classNames({ 'text-theme-color strong': !itemType })}
>
<Translate>
<English>News and events</English>
<Swedish>Nyheter och event</Swedish>
</Translate>
</Link>
</li>
<li>
<Link
to={`${location.pathname}?itemType=POST`}
className={classNames({ 'text-theme-color strong': itemType === 'POST' })}
>
<Translate>
<English>Only news</English>
<Swedish>Endast nyheter</Swedish>
</Translate>
</Link>
</li>
<li>
<Link
to={`${location.pathname}?itemType=EVENT`}
className={classNames({ 'text-theme-color strong': itemType === 'EVENT' })}
>
<Translate>
<English>Only events</English>
<Swedish>Endast event</Swedish>
</Translate>
</Link>
</li>
</ul>
</div>
</div>
<div className="col-sm-8 col-md-9">
<div className="row">
<Calypso search={location.search}>
{({content, first, last, number, totalPages}) =>
<div className={cx('col-md-9', 'news')}>
{
content && content.map(item => <NewsItem item={item} location={location} lang={lang} key={item.id} />)
}
<hr/>
<div className="text-center">
<nav aria-label="Page navigation">
<ul className="pagination">
{first
? <li className="disabled"><span>«</span></li>
: <li><Link to={location.pathname + getSearch(0)}>«</Link></li>}
{first
? <li className="disabled"><span>‹</span></li>
: <li><Link to={location.pathname + getSearch(number - 1)}>‹</Link></li>}
<li className="disabled">
<span>
<Translate>
<English>Page {number + 1} of {totalPages}</English>
<Swedish>Sida {number + 1} av {totalPages}</Swedish>
</Translate>
</span>
</li>
{last
? <li className="disabled"><span>›</span></li>
: <li><Link to={location.pathname + getSearch(number + 1)}>›</Link></li>}
{last
? <li className="disabled"><span>»</span></li>
: <li><Link to={location.pathname + getSearch(totalPages - 1)}>»</Link></li>}
</ul>
</nav>
</div>
</div>
}
</Calypso>
<div className="col-md-3" id="sidebar">
<div className="sidebar-card">
<h2>
<Translate>
<English>Upcoming events</English>
<Swedish>Kommande event</Swedish>
</Translate>
</h2>
<Calypso type='event'>
{content =>
(content && content.length)
? content
.filter((_, i) => i < 5)
.map(item => <p key={item.id}>
<Link to={location.pathname + '/' + item.id}>
<strong>
<Translate>
<English>{item.titleEnglish}</English>
<Swedish>{item.titleSwedish}</Swedish>
</Translate>
</strong>
</Link>
<br/>
<span>
{
new Date(item.eventStartTime)
.toLocaleDateString(
lang === 'en' ? 'en-US' : 'sv-SE',
{
day: 'numeric',
month: 'long',
year: 'numeric'
}
)
}
</span>
</p>)
:
<Translate>
<English>No upcoming events :(</English>
<Swedish>Inga kommande event :(</Swedish>
</Translate>
}
</Calypso>
</div>
</div>
</div>
</div>
</div>
</div>
</Fragment>
}
render() {
const { path, folders, files, selectFolder, createFolder, selectFile, deleteFolder, deleteFile, moveFolder, moveFile, editFolder, editFile } = this.props;
//console.log ("FileExplorer props:", this.props);
var pathlinks = path && path.map ( (folder, index) => {
if (index == path.length - 1) {
return (<span key={index}> {' / ' + folder.name} </span>)
} else {
return (
<span key={index}>
<span>{' / '}</span>
<a onClick={ () => selectFolder && selectFolder(folder) }>
{folder.name}
</a>
</span>
)
}
} );
var current = path && _.last(path);
var currentFolderId = (current && current.id) || 0;
var listStyleContent = null;
if (this.state.listStyle == 'th-list') {
var folderlist = folders && folders.map ( (folder, index) => {
if (folder.parent == currentFolderId)
return (
<tr key={index}>
<td className={classes.fileicon}><span className="glyphicon glyphicon-folder-open" aria-hidden="true"></span></td>
<td className={classes.itemName}><a onClick={ () => selectFolder && selectFolder(folder) }>
{folder.name}</a>
<span className={classes.fileOperate}>
<a onClick={ () => editFolder && editFolder(folder) }>编辑</a> | <a onClick={ () => deleteFolder && deleteFolder(folder) }>删除</a> | <a onClick={ () => moveFolder && moveFolder(folder) }>移动</a>
</span>
</td>
<td></td>
<td>{folder.desc}</td>
</tr>
)
} );
var filelist = files && files.map ( (file, index) => {
if (file.folder == currentFolderId) {
var fileClass = "glyphicon glyphicon-file";
if (file.mimetype && (file.mimetype.indexOf('image') >= 0))
fileClass = "glyphicon glyphicon-picture";
return (
<tr key={index}>
<td className={classes.fileicon}><span className={fileClass} aria-hidden="true"></span></td>
<td className={classes.itemName}><a onClick={ () => selectFile && selectFile(file) }>{file.name}</a>
<span className={classes.fileOperate}>
<a onClick={ () => editFile && editFile(file) }>编辑</a> | <a onClick={ () => deleteFile && deleteFile(file) }>删除</a> | <a onClick={ () => moveFile && moveFile(file) }>移动</a>
</span>
</td>
<td>{file.path}</td>
<td>{file.mimetype}</td>
</tr>
)
}
} );
listStyleContent = (
<table className={cx("table table-hover", 'filetable')}>
<tbody> {folderlist} {filelist} </tbody>
</table>
)
} else {
var wrapClass = "col-xs-2 col-sm-1";
if (this.state.listStyle == 'th-large') {
wrapClass = "col-xs-4 col-sm-2";
}
wrapClass = classNames(wrapClass, classes.cardContainer);
var innerClass = classNames("img-responsive center-block", classes.imgInner);
var folderlist = folders && folders.map ( (folder, index) => {
if (folder.parent == currentFolderId)
return (
<div className={wrapClass} key={index}>
<div className={classes.imgWrapper}>
<img src={"/images/folder1.png"} className={innerClass} alt="Responsive image" />
<div className={classes.infoInner}>
<a onClick={ () => selectFolder && selectFolder(folder) }>
{folder.name}</a><br/>
<span className={classes.fileOperate}>
<a onClick={ () => editFolder && editFolder(folder) }>编辑</a> | <a onClick={ () => deleteFolder && deleteFolder(folder) }>删除</a> | <a onClick={ () => moveFolder && moveFolder(folder) }>移动</a>
</span>
</div>
</div>
<div className={classes.fileName}>
<a onClick={ () => selectFolder && selectFolder(folder) }>{folder.name||'未命名'}</a>
</div>
</div>
)
} );
var filelist = files && files.map ( (file, index) => {
if (file.folder == currentFolderId) {
var fileClass = "glyphicon glyphicon-file";
if (file.mimetype && (file.mimetype.indexOf('image') >= 0))
fileClass = "glyphicon glyphicon-picture";
return (
<div className={wrapClass} key={index}>
<div className={classes.imgWrapper}>
<img src={"/"+file.path} className={innerClass} alt="Responsive image" />
<div className={classes.infoInner}>
<a onClick={ () => selectFile && selectFile(file) }>{file.name}</a>
<br/>
<span className={classes.fileOperate}>
<a onClick={ () => editFile && editFile(file) }>编辑</a> | <a onClick={ () => deleteFile && deleteFile(file) }>删除</a> | <a onClick={ () => moveFile && moveFile(file) }>移动</a>
</span>
</div>
</div>
<div className={classes.fileName}><a onClick={ () => selectFile && selectFile(file) }>{file.name||'未命名'}</a></div>
</div>
)
}
} );
listStyleContent = (
<div style={ {margin:0} }>
<div className="row">{folderlist} {filelist}</div>
</div>
)
}
var toggleDropdown = (name, e) => {
console.log ("toggleDropdown:"+name);
e && e.stopPropagation();
this.setState({dropdown:(!this.state.dropdown || this.state.dropdown != name)?name:null });
}
return (
<div className={classes.wrapper}>
<div className='clearfix' />
<div className={classes.pathinfo}>
<div>
<a onClick={ () => this.setState({listStyle:'th-list'}) }><span className="glyphicon glyphicon-th-list" aria-hidden="true"></span></a>
<a onClick={ () => this.setState({listStyle:'th'}) }><span className="glyphicon glyphicon-th" aria-hidden="true"></span></a>
<a onClick={ () => this.setState({listStyle:'th-large'}) }><span className="glyphicon glyphicon-th-large" aria-hidden="true"></span></a>
<span>当前目录：</span>{pathlinks}
<ul className="right-navbar fe-toolbar">
<li className={classNames("dropdown hoe-rheader-submenu hoe-header-profile", this.state.dropdown == 'createFolder' && 'open')}>
<a href="javascript:void(0)" className="dropdown-toggle" data-toggle="dropdown" onClick={ (e) => toggleDropdown('createFolder',e) } >
<span>新建目录</span>
</a>
<CreateFolderPopup currentFolder={current} createFolder={createFolder}/>
</li>
<li className="dropdown hoe-rheader-submenu hidden-xs">
<a href="javascript:void(0)" className="dropdown-toggle" data-toggle="dropdown">
<span>管理目录</span>
</a>
</li>
</ul>
</div>
</div>
<div>
{listStyleContent}
</div>
</div>
)
}
const Menu = (props) => {
const [items, setItems] = useState([]);
const [pos, setPos] = useState({ x: 0, y: 0 });
let navbarHeight = 0;
let margin = 10;
let width = 120;
let data = new Object();
let callback = null;
let itemHeight = 30;
let padding = 5;
useEffect(() => {
const { menus } = props;
setItems(menus);
}, [])
// const changeMenus = ({ menus, ids }) => {
// let array = [];
// console.dir(array);
// const count = menus.length;
// for (var i = 0; i < count; i++) {
// let item = { menu: menus[i], id: ids[i] };
// array.push(item);
// }
// setItems(array);
// }
// const setData = (value) => {
// data = value;
// }
// 메뉴 이외의 화면을 터치시 메뉴를 닫기 위한 기능
const onClickBody = (e) => {
if (props.onClick != null) {
props.onClick(null);
}
}
// const onClickMouse = (e) => {
// setPos({ x: e.pageX, y: e.pageY });
// }
document.getElementById('body').addEventListener('mouseup', onClickBody);
window.addEventListener('resize', onClickBody);
// const componentWillMount = () => {
// // document.getElementById('body').addEventListener('mousedown', onClickMouse);
// document.getElementById('body').addEventListener('mouseup', onClickBody);
// window.addEventListener('resize', onClickBody);
// }
// const componentWillUnmount = () => {
// // document.getElementById('body').addEventListener('mousedown', onClickMouse);
// document.getElementById('body').removeEventListener('mouseup', onClickBody);
// window.addEventListener('resize', onClickBody);
// }
const onClickItem = (e) => {
let eid = e.currentTarget.getAttribute("eid");
if (props.onClick != null) {
props.onClick(eid, props.data);
}
}
navbarHeight = document.getElementsByClassName("navbar")[0].offsetHeight;
const x = props.pos.x - width + margin;
const y = props.pos.y - navbarHeight - margin;
let contents = <StyledObject className={cx('pop-memu', props.theme)} top={y + "px"} left={x + "px"} width={width + "px"}
padding={padding + "px"} itemHeight={itemHeight + "px"}>
<div className="menu-bg"></div>
<ul className="menu-items" aria-dropeffect="move">
{items.map((item, index) => (
<li key={index} className="menu-i" onMouseDown={onClickItem} eid={item.id}>{item.name}</li>
))}
</ul>
</StyledObject>
return (<React.Fragment>{contents}</React.Fragment>);
}
export const Confirm = (props) => {
useEffect(() => {
showBodyScroll(true);
}, [])
const showBodyScroll = (isShow) => {
let object = document.getElementById("body-frame");
if (isShow) {
object.style.overflow = "auto";
} else {
object.style.overflow = "hidden";
}
}
const onClicked = (eid) => {
const { doAct } = props.action;
if (eid == EID.OK) {
if (doAct != null) doAct(true);
} else {
if (doAct != null) doAct(false);
}
}
const onKeyPressed = (e) => {
console.log(e);
if (e.key == 'Enter') {
onClicked(EID.OK);
}
return;
}
showBodyScroll(true);
return (
<React.Fragment>
<ConfirmFrame className={cx("confirm", props.type)} history={history}>
<div className="bg" onKeyPress={onKeyPressed}></div>
<div className={cx("confirm-dialog", props.theme)}>
<div className="content">
<div className="header">
<span className="title">{props.title}</span>
<button type="button" className="close" onClick={onClicked} eid={EID.CANCEL}>×</button>
</div>
<div className="body">
<div className="msg">{props.msg}</div>
</div>
<div className="footer">
<Button theme="primary" onClick={onClicked} title={props.ok ? props.ok : ST.OK} eid={EID.OK} />
{props.cancel && <Button theme="primary mL10" onClick={onClicked} title={props.cancel ? props.cancel : ST.CANCEL} eid={EID.CANCEL} />}
</div>
</div>
</div>
</ConfirmFrame>
</React.Fragment>
);
}