def render_login_panel():
return __pragma__("xtrans", None, "{}", """ (
<div>
<h5>Please Login:</h5>
<LoginFormContainer />
</div>
); """)
def Home():
return __pragma__(
"xtrans", None, "{}", """ (
<div className="home">
<h1>Welcome Home!!</h1>
</div>
); """)
def render_albums(album):
return __pragma__(
"js", "{}", """ (
<AlbumDetail
key={album.title}
album={album} />
); """)
def render(self):
data, fetch_users, set_user = \
destruct(self.props, "data", "fetch_users", "set_user")
def render_item(enum_):
i, user = enum_
on_click = lambda: set_user(user)
return __pragma__("xtrans", None, "{}", """ (
<UserItem
key={i}
user={user}
onClick={on_click} />
); """)
return __pragma__("xtrans", None, "{}", """ (
<div className="container">
<Button
onClick={fetch_users}
text="Fetch Users"
className="btn btn-blue" />
<div id="users">
{ map(render_item, enumerate(data.users)) }
</div>
</div>
); """)
def Header(props):
view_style, text_style = styles.values()
return __pragma__(
"js", "{}", """ (
<View style={view_style}>
<Text style={text_style}>{props.header_text}</Text>
</View>
); """)
def Card(props):
container_style, = styles.values()
return __pragma__(
"js", "{}", """ (
<View style={container_style}>
{props.children}
</View>
); """)
def Navbar(props):
return __pragma__(
"xtrans", None, "{}", """ (
<nav>
<Link to="/">Home</Link>
<Link to="users">Users</Link>
</nav>
); """)
def App():
return __pragma__(
"js", "{}", """ (
<View style={{ "flex": 1 }}>
<Header header_text={"Albums"} />
<AlbumList />
</View>
); """)
def Button(props):
return __pragma__(
"xtrans", None, "{}", """ (
<button
onClick={props.onClick}
className={props.className}
>{props.text}</button>
); """)
def render_item(enum_):
i, user = enum_
on_click = lambda: set_user(user)
return __pragma__("xtrans", None, "{}", """ (
<UserItem
key={i}
user={user}
onClick={on_click} />
); """)
def App(props):
return __pragma__("xtrans", None, "{}", """ (
<div className="appComp">
<Navbar />
<div>
<h1>This is our App component</h1>
{props.children}
</div>
</div>
); """)
def render_spinner(self):
loading = True
return __pragma__(
"xtrans", None, "{}", """ (
<div className="flex-center">
<RingLoader
color="#999"
loading={loading} />
</div>
); """)
def UserProfile(props):
user_profile = props.user_profile
title, first, last = \
destruct(user_profile["name"], "title", "first", "last")
full_name = f"{title.capitalize()}. {first.capitalize()} {last.capitalize()}"
if not user_profile:
return __pragma__(
"xtrans", None, "{}", """ (
<h1>Looks like you haven't selected a user</h1>
); """)
return __pragma__(
"xtrans", None, "{}", """ (
<div className="container">
<img src={user_profile.picture.large} />
<span>{full_name}</span>
<span>{user_profile.email}</span>
</div>
); """)
def Button(props):
button_style, text_style = styles.values()
return __pragma__("js", "{}", """ (
<TouchableOpacity
style={button_style}
onPress={props.onPress}>
<Text style={text_style}>
{props.children}
</Text>
</TouchableOpacity>
); """)
def render_checkmark(self, todo):
if todo["complete"]:
return __pragma__(
"xtrans", None, "{}", """ (
<div className="flex-column flex-center margin">
<FontAwesomeIcon
name="check-circle"
size="2x"
className="green-text" />
</div>
); """)
return None
def render_todo_panel():
return __pragma__("xtrans", None, "{}", """ (
<div>
<TodoListContainer />
<Form
className="padding"
onSubmit={on_submit}
>
<FormPanelContainer />
<ButtonPanelContainer />
</Form>
</div>
); """)
def App(props):
def render_login_panel():
return __pragma__("xtrans", None, "{}", """ (
<div>
<h5>Please Login:</h5>
<LoginFormContainer />
</div>
); """)
def on_submit(e):
e.preventDefault()
def render_todo_panel():
return __pragma__("xtrans", None, "{}", """ (
<div>
<TodoListContainer />
<Form
className="padding"
onSubmit={on_submit}
>
<FormPanelContainer />
<ButtonPanelContainer />
</Form>
</div>
); """)
logged_in, error = destruct(props["login_user"], "logged_in", "error")
visible_component = render_todo_panel() if logged_in else render_login_panel()
return __pragma__("xtrans", None, "{}", """ (
<Row>
<Col
lg={{size: 6, offset: 3}}
md={{size: 8, offset: 2}}
sm={{size: 10, offset: 1}}
xs="12"
>
<Jumbotron>
<div className="flex-column">
<div className="flex-center padding">
<h2>My Todos</h2>
</div>
{visible_component}
<span className="red-text">{error}</span>
</div>
</Jumbotron>
</Col>
</Row>
); """)
def UserItem(props):
thumbnail = props.user.picture.thumbnail
username = props.user.login.username
to_path = f"/user:{username}"
return __pragma__("xtrans", None, "{}", """ (
<Link
className="box"
onClick={props.onClick}
to={to_path}
>
<img src={thumbnail} />
<span>{username}</span>
</Link>
); """)
def FormPanel(props):
def on_text_change(e):
props.form_panel_update(e.target.value)
return __pragma__(
"xtrans", None, "{}", """ (
<FormGroup>
<Label for="text_input">Enter new todo text:</Label>
<Input
onChange={on_text_change}
value={props.form_panel.text}
id="text_input"
placeholder="What to do?" />
</FormGroup>
); """)
def render(self):
todo_list = self.props["todo_list"]
if todo_list["loading"]:
return self.render_spinner()
list_items = map(self.render_list_item, todo_list["todos"])
return __pragma__(
"xtrans", None, "{}", """ (
<div>
<ListGroup>
{list_items}
</ListGroup>
<span className="red-text">{todo_list.error}</span>
</div>
); """)
def LoginForm(props):
def on_input_change(e):
props.login_form_update(e.target.id, e.target.value)
def on_submit_login(e):
username, password = destruct(props["login_form"], "username_text",
"password_text")
if username and password:
props.clear_login_form()
props.login_user(username, password)
e.preventDefault()
def on_click_register(e):
username, password = destruct(props["login_form"], "username_text",
"password_text")
if username and password:
props.clear_login_form()
props.register_user(username, password)
return __pragma__(
"xtrans", None, "{}", """ (
<Form className="padding" onSubmit={on_submit_login}>
<FormGroup>
<Label for="username_text">Enter your username</Label>
<Input
onChange={on_input_change}
value={props.login_form.username_text}
placeholder="Your Username"
id="username_text" />
</FormGroup>
<FormGroup>
<Label for="password_text">Enter your password</Label>
<Input
onChange={on_input_change}
value={props.login_form.password_text}
type="password"
id="password_text" />
</FormGroup>
<Button
className="fixed-height margin"
type="submit"
>Login</Button>
<Button
className="fixed-height"
onClick={on_click_register}
>Register</Button>
</Form>
); """)
def render(self, props):
console.log(self.state)
def render_albums(album):
return __pragma__(
"js", "{}", """ (
<AlbumDetail
key={album.title}
album={album} />
); """)
return __pragma__(
"js", "{}", """ (
<ScrollView>
{ map(render_albums, self.state.albums) }
</ScrollView>
); """)
def AlbumDetail(props):
artist, image, thumbnail_image, title, url = \
destruct(props.album,
"artist", "image", "thumbnail_image", "title", "url")
(header_content_style, header_text_style, thumbnail_style,
thumbnail_container_style, image_style) = styles.values()
def on_press():
return Linking.openURL(url)
return __pragma__(
"js", "{}", """ (
<Card>
<CardSection>
<View style={thumbnail_container_style}>
<Image
source={{ "uri": thumbnail_image }}
style={thumbnail_style} />
</View>
<View style={header_content_style}>
<Text style={header_text_style}>
{title}
</Text>
<Text>{artist}</Text>
</View>
</CardSection>
<CardSection>
<Image
source={{ "uri": image }}
style={image_style} />
</CardSection>
<CardSection>
<Button onPress={on_press}>
Buy Now
</Button>
</CardSection>
</Card>
); """)
def ButtonPanel(props):
def on_click_add():
todo_text = props.form_panel["text"]
token = props.login_user["token"]
if todo_text:
props.add_new_todo(todo_text, token)
props.form_panel_update("")
def on_click_clear():
todo_text = props.form_panel["text"]
if todo_text:
props.form_panel_update("")
def on_click_logout():
on_click_clear()
props.logout_user()
return __pragma__(
"xtrans", None, "{}", """ (
<div className="flex-center">
<div className="flex-container">
<Button
className="fixed-height"
onClick={on_click_add}
color="success"
type="submit"
>Add Todo</Button>
<Button
className="fixed-height"
onClick={on_click_clear}
color="warning"
>Clear Text</Button>
<Button
className="fixed-height"
onClick={on_click_logout}
>Logout</Button>
</div>
</div>
); """)
def render_list_item(self, todo):
return __pragma__(
"xtrans", None, "{}", """ (
<ListGroupItem
className="flex-center"
key={todo.id}
>
{self.render_checkmark(todo)}
<div className="list-item">
{todo.text}
</div>
<Button
className="fixed-height margin"
color="primary"
onClick={self.on_click_complete(todo)}
disabled={todo.complete}
>Complete</Button>
<Button
className="fixed-height"
color="danger"
onClick={self.on_click_delete(todo)}
>Delete</Button>
</ListGroupItem>
); """)
from Component_py.stubs import require, __pragma__, document # __:skip
from containers.AppContainer import AppContainer
from store import store
React = require("react")
ReactDOM = require("react-dom")
Provider = require("react-redux").Provider
app = __pragma__("xtrans", None, "{}", """ (
<Provider store={store}>
<AppContainer />
</Provider>
); """)
ReactDOM.render(app, document.getElementById("root"))
from Component_py.stubs import __pragma__, require, document # __:skip
from app import App
React = require("react")
ReactDOM = require("react-dom")
app = __pragma__("xtrans", None, "{}", "<App />")
ReactDOM.render(app, document.getElementById("root"))
from Component_py.stubs import require, console, __pragma__ # __:skip
from Component_py.component import Component
from components.AlbumDetail import AlbumDetail
React = require("react")
ScrollView = require("react-native").ScrollView
__pragma__("skip")
def fetch(s):
return None
__pragma__("noskip")
class AlbumList(Component):
def __init__(self, props):
super().__init__(props)
self.state = {"albums": []}
def componentDidMount(self):
def parse(response):
return response.json()
def resolve(data):
self.setState({"albums": data})
def reject(error):
console.log(error)
