/**
* Tests creating a container with state that doesn't match props of the view.
*/
function t2(): React.Element<*> {
function MyView(props: {value: string}) {
return <div>{props.value}</div>;
}
const MyContainer = Container.createFunctional(
MyView,
() => [AppStore],
// $FlowExpectedError: Incorrect shape for state.
() => ({notValue: AppStore.getState()}),
);
return <MyContainer />
}
module.exports = function (Component) {
return Container.create(class AppContainer extends React.Component {
static getStores() {
return [AppStore];
}
static calculateState(prevState) {
return AppStore.getState();
}
render() {
return <Component {...this.state} {...this.props}/>;
}
}, { pure: false });
};
Typing.prototype.render = function render() {
var typing = this.state.typing;
if (!typing) {
return _react2.default.createElement('div', { className: 'typing' });
}
return _react2.default.createElement(
'div',
{ className: 'typing' },
_react2.default.createElement(
'div',
{ className: 'typing__indicator' },
_react2.default.createElement('i', null),
_react2.default.createElement('i', null),
_react2.default.createElement('i', null)
),
_react2.default.createElement(
'span',
{ className: 'typing__text' },
typing
)
);
};
return Typing;
}(_react.Component);
exports.default = _utils.Container.create(Typing);
//# sourceMappingURL=TypingSection.react.js.map
onAppVisibilityChange = () => {
if (VisibilityStore.isAppVisible()) {
flushDelayed();
}
};
onMessageVisibilityChange = (message, isVisible) => {
const { peer } = this.props;
if (isVisible) {
_delayed.push({peer, message});
if (VisibilityStore.isAppVisible()) {
flushDelayedDebounced();
}
}
};
render() {
const { messages } = this.props;
const messagesList = _.map(messages, this.getMessagesListItem);
return (
<ul className="messages__list">
{messagesList}
</ul>
);
}
}
export default Container.create(MessagesSection);
_Scrollbar2.default,
{ onScroll: this.props.onScroll, ref: 'messagesScroll' },
_react2.default.createElement(_MessagesList2.default, {
peer: peer,
overlay: overlay,
messages: messages,
selectedMessages: selectedMessages,
isMember: isMember,
isAllMessagesLoaded: isAllMessagesLoaded,
components: components,
onSelect: this.onMessageSelect,
onVisibilityChange: this.onMessageVisibilityChange
})
);
};
return MessagesSection;
}(_react.Component);
MessagesSection.propTypes = {
messages: _react.PropTypes.array.isRequired,
overlay: _react.PropTypes.array.isRequired,
peer: _react.PropTypes.object.isRequired,
isMember: _react.PropTypes.bool.isRequired,
onScroll: _react.PropTypes.func.isRequired
};
MessagesSection.contextTypes = {
delegate: _react.PropTypes.object
};
exports.default = _utils.Container.create(MessagesSection, { pure: false, withProps: true });
//# sourceMappingURL=MessagesSection.react.js.map
'div',
{ className: 'message__body' },
this.renderHeader(),
this.renderContent()
),
this.renderActions()
);
};
return MessageItem;
}(_react.Component);
MessageItem.contextTypes = {
delegate: _react.PropTypes.object,
isExperimental: _react.PropTypes.bool
};
MessageItem.propTypes = {
peer: _react.PropTypes.object.isRequired,
message: _react.PropTypes.object.isRequired,
state: _react.PropTypes.string.isRequired,
isShort: _react.PropTypes.bool.isRequired,
isEditing: _react.PropTypes.bool.isRequired,
isSelected: _react.PropTypes.bool.isRequired,
onSelect: _react.PropTypes.func.isRequired
};
MessageItem.defaultProps = {
isSelected: false,
onSelect: _lodash.noop
};
exports.default = _utils.Container.create(MessageItem, { withProps: true });
//# sourceMappingURL=MessageItem.react.js.map
onRequestClose={this.handleClose}
isOpen>
<div className="preferences">
<div className="modal__content">
<header className="modal__header">
<i className="modal__header__icon material-icons">settings</i>
<FormattedMessage id="preferences.title" tagName="h1"/>
<button className="button button--lightblue" onClick={this.handleSave}>
<FormattedMessage id="button.done"/>
</button>
</header>
<div className="modal__body">
{this.renderPreferencesSidebar()}
<div className="preferences__body">
{this.renderCurrentTab()}
</div>
</div>
</div>
</div>
</Modal>
);
}
}
export default Container.create(PreferencesModal, { pure: false });
}
render() {
return (
<div>
<header>FluxTrust Bank</header>
<h1>Your balance is ${(this.state.balance).toFixed(2)}</h1>
<h2>Your Points Rewards Tier is {this.state.rewardsTier}</h2>
<div className="atm">
<input type="text" placeholder="Enter Ammount" ref="ammount" />
<br />
<button onClick={this.withdraw.bind(this)}>Withdraw</button>
<button onClick={this.deposit.bind(this)}>Deposit</button>
</div>
</div>
);
}
}
// implementation without flux Container
// render(<App />, document.getElementById('root'));
// implementation WITH flux Container
App.getStores = () => ([BankBalanceStore]);
App.calculateState = (prevState) => ({
balance: BankBalanceStore.getState(),
rewardsTier: BankRewardsStore.getState()
});
const AppContainer = Container.create(App);
render(<AppContainer />, document.getElementById('root'));
SmallCall.prototype.render = function render() {
var _state = this.state,
isOpen = _state.isOpen,
call = _state.call,
peerInfo = _state.peerInfo;
if (!isOpen) {
return null;
}
return _react2.default.createElement(_CallDraggable2.default, {
peerInfo: peerInfo,
callState: call.state,
isOutgoing: call.isOutgoing,
isMuted: call.isMuted,
onEnd: this.onEnd,
onAnswer: this.onAnswer,
onMuteToggle: this.onMuteToggle,
onFullscreen: this.onFullscreen,
onUserAdd: this.onUserAdd,
onVideo: this.onVideo,
onClose: this.onClose
});
};
return SmallCall;
}(_react.Component);
exports.default = _utils.Container.create(SmallCall);
//# sourceMappingURL=SmallCall.react.js.map
<Fold icon="attach_file" iconClassName="icon--gray" title={intl.messages['sharedMedia']}>
<ul>
<li><a>230 Shared Photos and Videos</a></li>
<li><a>49 Shared Links</a></li>
<li><a>49 Shared Files</a></li>
</ul>
</Fold>
</li>
<li className="profile__list__item user_profile__notifications no-p">
<label htmlFor="notifications">
<i className="material-icons icon icon--squash">notifications_none</i>
{intl.messages['notifications']}
<div className="switch pull-right">
<input checked={isNotificationsEnabled}
id="notifications"
onChange={this.onNotificationChange}
type="checkbox"/>
<label htmlFor="notifications"/>
</div>
</label>
</li>
</ul>
</div>
);
}
}
export default Container.create(UserProfile, {pure:false, withProps: true});
render() {
return (
<div style={styles.body}>
<div style={styles.sidebar}>
<div>Change Component</div>
<RaisedButton
label="CHOOSE RAISED BUTTON"
primary={this.state.demo.dynamicComponent.button === ComponentIDs.RAISED_BTN}
style={styles.btn}
onMouseDown={() => this.changeComponent({ button: ComponentIDs.RAISED_BTN, style: {} })}
/>
<RaisedButton
label="CHOOSE FLAT BUTTON"
primary={this.state.demo.dynamicComponent.button === ComponentIDs.FLAT_BTN}
style={styles.btn}
onMouseDown={() => this.changeComponent({ button: ComponentIDs.FLAT_BTN, style: {} })}
/>
</div>
<div style={styles.contents}>
<h2>
Demonstrate switching component dynamically.
</h2>
<ButtonComponentDictionary componentId={this.state.demo.dynamicComponent.button} />
</div>
</div>
);
}
}
export default Container.create(DynamicComponentReplacement);
return result;
}
render() {
if (!this.state.isOpen) {
return <section className="activity logger" />;
}
return (
<section className="activity logger activity--shown">
<div className="activity__body logger__body">
<div className="logger__controls">
<button className="button button--icon" type="button" onClick={this.onClose}>
<i className="material-icons">close</i>
</button>
</div>
<LoggerFilter />
<Scrollbar>
<div className="logger__container">
{this.renderLogs()}
</div>
</Scrollbar>
</div>
</section>
);
}
}
export default Container.create(LoggerSection);
import KanbanBoard from './KanbanBoard';
import update from 'react-addons-update';
import {throttle} from '../utils.js';
import {Container} from 'flux/utils';
import CardActionCreators from '../actions/CardActionCreators';
import CardStore from '../stores/CardStore';
// Polyfills
import 'whatwg-fetch';
import 'babel-polyfill';
class KanbanBoardContainer extends Component {
componentDidMount() {
CardActionCreators.fetchCards();
}
render() {
let KanbanBoard = this.props.children && React.cloneElement(this.props.children, {
cards: this.state.cards
});
return KanbanBoard;
}
}
KanbanBoardContainer.getStores = () => ([CardStore]);
KanbanBoardContainer.calculateState = (prevState) => ({cards: CardStore.getState()});
export default Container.create(KanbanBoardContainer);
</li>
{this.renderHelpLink()}
{this.renderTwitterLink()}
{this.renderFacebookLink()}
{this.renderHomeLink()}
<li className="dropdown__menu__separator"/>
<li className="dropdown__menu__item" onClick={this.setLogout}>
<FormattedMessage id="menu.signOut"/>
</li>
</ul>
</div>
</div>
{/* Modals */}
{/* TODO: Move all modals to other place */}
{isMyProfileOpen ? <MyProfileModal/> : null}
{isCreateGroupOpen ? <CreateGroupModal/> : null}
{isAddContactsOpen ? <AddContactModal/> : null}
{isPreferencesOpen ? <PreferencesModal/> : null}
</header>
);
}
}
export default Container.create(HeaderSection);
<Fold icon="attach_file" iconClassName="icon--gray" title={intl.messages['sharedMedia']}>
<ul>
<li><a>230 Shared Photos and Videos</a></li>
<li><a>49 Shared Links</a></li>
<li><a>49 Shared Files</a></li>
</ul>
</Fold>
</li>
<li className="profile__list__item user_profile__notifications no-p">
<label htmlFor="notifications">
<i className="material-icons icon icon--squash">notifications_none</i>
{intl.messages['notifications']}
<div className="switch pull-right">
<input checked={isNotificationsEnabled}
id="notifications"
onChange={this.onNotificationChange}
type="checkbox"/>
<label htmlFor="notifications"/>
</div>
</label>
</li>
</ul>
</div>
);
}
}
export default Container.create(UserProfile);
static contextTypes = {
delegate: PropTypes.object
};
render() {
const { delegate } = this.context;
const { dialogs } = this.state;
let HeaderSection, Recent, FooterSection;
if (delegate.components.sidebar !== null && typeof delegate.components.sidebar !== 'function') {
HeaderSection = delegate.components.sidebar.header || DefaultHeaderSection;
Recent = delegate.components.sidebar.recent || DefaultRecent;
FooterSection = delegate.components.sidebar.footer || QuickSearchButton;
} else {
HeaderSection = DefaultHeaderSection;
Recent = DefaultRecent;
FooterSection = QuickSearchButton;
}
return (
<aside className="sidebar">
<HeaderSection/>
<Recent dialogs={dialogs}/>
<FooterSection/>
</aside>
);
}
}
export default Container.create(SidebarSection, {pure: false});
componentWillUpdate (nextProps, nextState) {
if (nextState.form.shortId) {
console.log('lalalala');
intervallyEditForm(nextState.form);
}
}
shouldComponentUpdate (nextProps, nextState) {
return false;
}
render () {
const {authStatus} = this.state;
if (authStatus) {
return (
<PureForm form={this.state.form} shortId={this.props.params.id} />
);
}
return (
<p>Please sign in</p>
);
}
}
FormEdit.getStores = () => [FormStore, AuthStatusStore];
FormEdit.calculateState = (prevState) => ({
form : FormStore.getState(),
authStatus : AuthStatusStore.getState()
});
export default Container.create(FormEdit);
'li',
null,
_react2.default.createElement(
'a',
null,
'49 Shared Files'
)
)
)
)
),
_react2.default.createElement(
'li',
{ className: 'profile__list__item user_profile__notifications no-p' },
_react2.default.createElement(_ToggleNotifications2.default, { isNotificationsEnabled: isNotificationsEnabled, onNotificationChange: this.onNotificationChange })
)
)
);
};
return UserProfile;
}(_react.Component);
UserProfile.propTypes = {
user: _react.PropTypes.object.isRequired
};
UserProfile.contextTypes = {
intl: _react.PropTypes.object
};
exports.default = _utils.Container.create(UserProfile, { pure: false, withProps: true });
//# sourceMappingURL=UserProfile.react.js.map
animation: 'none'
});
}
static getStores() {
return [FaviconStore];
}
static calculateState() {
return {
counter: FaviconStore.getState()
};
}
componentWillUpdate(nextProps, nextState) {
const { counter } = nextState;
if (counter) {
this.favico.badge(counter);
} else {
this.favico.reset();
}
}
render() {
return null;
}
}
export default Container.create(Favicon);
get renderCommentList() {
if(this.state.comments.size == 0) {
return <tr><td colSpan="6">리스트가 없습니다.</td></tr>
}
return this.state.comments.map((item) => {
return (<tr key={item.get('commentSeq')}>
<td><input type="checkbox"/></td>
<td><img src={item.get('postThumbnailUrl')} alt="thumbnail" className="thumb"/></td>
<td className="al">{item.get('postTitle')}</td>
<td className="al">{item.get('commentTxt')}</td>
<td>
<em className="more">
<a href={util.getServiceUrl() + item.get('postShortUrl')} target="_blank"><img src={btn_preview} alt="보기"/></a>
<a href=""><img src={icon_delete} alt="삭제"/></a>
</em>
</td>
<td>{moment(item.get('createDt')).format('YYYY-MM-DD')}</td>
</tr>)
})
}
movePage = (pageNo) => {
AppActions.getUserCommentList({userId:this.props.userId, pageNo:pageNo})
}
}
const UserCommentTabContainer = Container.create(UserCommentTab)
export default UserCommentTabContainer
'div',
{ className: 'col-xs' },
this.renderName(),
this.renderNick(),
this.renderPhones(),
this.renderEmails(),
this.renderAbout()
),
_react2.default.createElement(_PictureChanger2.default, _extends({}, profile, {
fromModal: _ActorAppConstants.ModalTypes.PROFILE,
onRemove: this.handleAvatarRemove,
onChange: this.handleAvatarChange }))
),
_react2.default.createElement(
'footer',
{ className: 'modal__footer' },
this.renderControls()
)
)
)
);
};
return Profile;
}(_react.Component);
Profile.contextTypes = {
intl: _react.PropTypes.object
};
exports.default = _utils.Container.create(Profile);
//# sourceMappingURL=Profile.react.js.map
{ className: 'modal__content' },
_react2.default.createElement(
'header',
{ className: 'modal__header' },
_react2.default.createElement(_SvgIcon2.default, {
className: 'modal__header__icon icon icon--blue',
glyph: 'back',
onClick: this.handleBackClick }),
_react2.default.createElement(_reactIntl.FormattedMessage, { id: 'invite.byLink.title', tagName: 'h1' })
),
_react2.default.createElement(
'div',
{ className: 'modal__body' },
_react2.default.createElement(_reactIntl.FormattedHTMLMessage, { id: 'invite.byLink.description', values: { groupName: group.name } }),
_react2.default.createElement('textarea', {
className: 'textarea',
onClick: this.handleInviteLinkSelect,
readOnly: true,
row: '3',
value: inviteUrl })
)
)
)
);
};
return InviteByLink;
}(_react.Component);
exports.default = _utils.Container.create(InviteByLink);
//# sourceMappingURL=InviteByLink.react.js.map
const {
ToolbarSection,
MessagesSection,
activity
} = this.getComponents();
return (
<section className="main">
<ToolbarSection />
<div className="flexrow">
<section className="dialog">
<ConnectionState/>
<div className="chat">
<MessagesSection peer={peer} isMember={isMember} />
<DialogFooter
isMember={isMember}
isBlocked={dialogInfo.isBlocked}
onUnblock={this.onUnblock}
/>
</div>
</section>
{activity.map((Activity, index) => <Activity key={index} />)}
</div>
</section>
);
}
}
export default Container.create(DialogSection, { withProps: true });
<div className="input">
<input type="text"
placeholder={intl.messages['modal.quickSearch.placeholder']}
onChange={this.handleSearch}
value={query}
ref="query"/>
</div>
<Scrollbar style={{height: RESULT_ITEM_HEIGHT * 8}} ref="results">
<ul className="results">
{
resultsList.length > 0
? resultsList
: <li className="results__item results__item--suggestion row">
<FormattedHTMLMessage id="modal.quickSearch.notFound"
values={{query}}/>
<button className="button button--rised hide">Create new dialog {query}</button>
</li>
}
</ul>
</Scrollbar>
</div>
</Modal>
);
}
}
export default Container.create(QuickSearch, {pure: false});
if (!profile) return null;
const usermenuClassName = classnames('user-menu', className, {
'user-menu--opened': isOpened
});
return (
<div className={usermenuClassName} onClick={this.toggleHeaderMenu}>
<AvatarItem
className="user-menu__avatar"
image={profile.avatar}
placeholder={profile.placeholder}
size="tiny"
title={profile.name}
/>
<div
className="user-menu__name"
dangerouslySetInnerHTML={{ __html: escapeWithEmoji(profile.name) }}
/>
<i className="user-menu__icon material-icons">arrow_drop_down</i>
{this.renderMenu()}
</div>
);
}
}
export default Container.create(UserMenu);
</div>
}
<div className='row'>
<div className='col-1-1'>
<FormControl label='审批意见'>
<TextInput ref='opinion' />
</FormControl>
</div>
</div>
<div className='row'>
<div className='col-1-2'>
<Button text={getLang('APPROVE')}
onTouchTap={this.approve.bind(this, true)} />
</div>
<div className='col-1-2'>
<Button hollow className='text-primary'
text={getLang('REJECT')}
onTouchTap={this.approve.bind(this, false)} />
</div>
</div>
</Loader>
</div>
);
}
}
export default Container.create(OvertimePendingRecord);
{ className: 'join__message join__message--success' },
'Successfully joined to group!'
);
case _ActorAppConstants.AsyncActionStates.FAILURE:
return _react2.default.createElement(
'div',
{ className: 'join__message join__message--error' },
error
);
}
};
Join.prototype.render = function render() {
return _react2.default.createElement(
'div',
{ className: 'join__container' },
this.renderStatus()
);
};
return Join;
}(_react.Component);
Join.propTypes = {
params: _react.PropTypes.shape({
token: _react.PropTypes.string.isRequired
}).isRequired
};
exports.default = _utils.Container.create(Join);
//# sourceMappingURL=Join.react.js.map
static calculateState(state){
return {
groups: GroupStore.getState(),
projects: ProjectStore.getState(),
issues: IssueStore.getState(),
milestones: MileStoneStore.getState()
};
}
componentWillMount(){
GroupAction.fetchAll();
ProjectAction.fetchAll();
}
render(){
console.log("app", this.state);
return <div>
<Header />
{React.cloneElement(this.props.children, {data: this.state})}
</div>;
}
};
render(<Router history={hashHistory}>
<Route path="/" component={Container.create(App)}>
<IndexRoute component={Projects} />
<Route path="/group" component={Groups} />
<Route path="/project/:projectId/gantt" component={Gantt} />
<Route path="/project/:user/:repo/gantt" component={Gantt} />
</Route>
</Router>,
document.getElementById("app"));
_react2.default.createElement(
'footer',
{ className: 'modal-new__footer text-right' },
step === _ActorAppConstants.CreateGroupSteps.CREATION_STARTED ? _react2.default.createElement(
'button',
{ className: 'button button--lightblue',
disabled: true },
intl.messages['button.createGroup']
) : _react2.default.createElement(
'button',
{ className: 'button button--lightblue',
onClick: this.handleCreateGroup },
intl.messages['button.createGroup']
)
)
);
break;
default:
}
return stepForm;
};
return CreateGroupForm;
})(_react.Component);
CreateGroupForm.contextTypes = {
intl: _react.PropTypes.object
};
exports.default = _utils.Container.create(CreateGroupForm, { pure: false });
//# sourceMappingURL=Form.react.js.map
<Stateful.Root currentState={archiveChatState}>
<Stateful.Pending>
<div className="archive" onClick={this.handleAddToArchive}>
<i className="icon material-icons">archive</i>
</div>
</Stateful.Pending>
<Stateful.Processing>
<div className="archive archive--in-progress">
<i className="icon material-icons spin">autorenew</i>
</div>
</Stateful.Processing>
<Stateful.Success>
<div className="archive archive--in-progress">
<i className="icon material-icons">check</i>
</div>
</Stateful.Success>
<Stateful.Failure>
<div className="archive archive--failure">
<i className="icon material-icons">warning</i>
</div>
</Stateful.Failure>
</Stateful.Root>
</Link>
</li>
);
}
}
export default Container.create(RecentItem, {pure: false, withProps: true});