Skip to content

Update to framework7 and dependencies #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update to framework7 and dependencies #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23,330 changes: 10,912 additions & 12,418 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@
"version": "3.0.0",
"private": true,
"dependencies": {
"framework7": "^3.4.0",
"framework7": "^4.4.3",
"framework7-icons": "^0.9.1",
"framework7-react": "^3.4.0",
"framework7-react": "^4.4.3",
"framework7-redux": "^3.0.3",
"material-design-icons": "^3.0.1",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"react-scripts": "2.0.0-next.66cc7a90",
"redux": "^4.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.0.3",
"react-scripts": "^3.0.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"scripts": {
Expand Down
38 changes: 17 additions & 21 deletions src/components/modals/LoginScreen.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,28 @@
import React from 'react';
import { View, Page, LoginScreen, LoginScreenTitle, List, ListItem, Label, Input, ListButton, BlockFooter } from 'framework7-react';
import { View, Page, LoginScreen, LoginScreenTitle, List, ListInput, ListButton, BlockFooter } from 'framework7-react';

export default ({ onUsernameUpdated, onPasswordUpdated, onLogin, username, password }) => (
<LoginScreen id="login-screen">
<View>
<Page loginScreen>
<LoginScreenTitle>Login</LoginScreenTitle>
<List form>
<ListItem>
<Label>Username</Label>
<Input
name="username"
placeholder="Username"
type="text"
onChange={({ target }) => onUsernameUpdated(target.value)}
value={username}
/>
</ListItem>
<ListItem>
<Label>Password</Label>
<Input
name="password"
type="password"
placeholder="Password"
onChange={({ target }) => onPasswordUpdated(target.value)}
value={password}
/>
</ListItem>
<ListInput
type="text"
name="username"
placeholder="username any..."
info="Your username"
value={username}
onInput={({ target }) => onUsernameUpdated(target.value)}
></ListInput>
<ListInput
type="password"
name="password"
placeholder="password!"
info="Your password"
value={password}
onInput={({ target }) => onPasswordUpdated(target.value)}
></ListInput>
</List>
<List>
<ListButton title="Sign In" onClick={onLogin}></ListButton>
Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/DynamicRoutePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React from 'react';
import { Page, Navbar, Block, Link } from 'framework7-react';

export default ({ onGoBackToHomePage, url, path, hash, query }) => (
Expand Down
136 changes: 87 additions & 49 deletions src/components/pages/FormPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ import {
Navbar,
List,
ListItem,
Input,
Label,
ListInput,
Toggle,
BlockTitle,
Row,
Expand Down Expand Up @@ -48,54 +47,93 @@ export default ({
<Navbar title="Form" backLink="Back" onBackClick={onGoBackToHomePage} />
<BlockTitle>Form Example</BlockTitle>
<List form>
<ListItem>
<Label>Name</Label>
<Input type="text" placeholder="Name" onChange={({ target}) => onNameUpdated(target.value)} value={name} />
</ListItem>
<ListItem>
<Label>E-mail</Label>
<Input type="email" placeholder="E-mail" onChange={({ target }) => onEmailUpdated(target.value)} value={email} />
</ListItem>
<ListItem>
<Label>URL</Label>
<Input type="url" placeholder="URL" onChange={({ target }) => onUrlUpdated(target.value)} value={url} />
</ListItem>
<ListItem>
<Label>Password</Label>
<Input type="password" placeholder="Password" onChange={({ target }) => onPasswordUpdated(target.value)} value={password} />
</ListItem>
<ListItem>
<Label>Phone</Label>
<Input type="tel" placeholder="Phone" onChange={({ target }) => onPhoneUpdated(target.value)} value={phone} />
</ListItem>
<ListItem>
<Label>Gender</Label>
<Input type="select" value={gender} onChange={({ target }) => onGenderUpdated(target.value)}>
<option value={0}>Male</option>
<option value={1}>Female</option>
</Input>
</ListItem>
<ListItem>
<Label>Birth date</Label>
<Input type="date" placeholder="Birth date" onChange={({ target }) => onBirthdateUpdated(target.value)} value={birthdate} />
</ListItem>
<ListItem title="Toggle">
<ListInput
label="Name"
type="text"
placeholder="Name"
onChange={({ target}) => onNameUpdated(target.value)}
value={name}
></ListInput>

<ListInput
label="E-mail"
type="email"
placeholder="E-mail"
onChange={({ target }) => onEmailUpdated(target.value)}
value={email}
></ListInput>

<ListInput
label="URL"
type="url"
placeholder="URL"
onChange={({ target }) => onUrlUpdated(target.value)}
value={url}
></ListInput>

<ListInput
label="Password"
type="password"
placeholder="Password"
onChange={({ target }) => onPasswordUpdated(target.value)}
value={password}
></ListInput>

<ListInput
label="Phone"
type="tel"
placeholder="Phone"
onChange={({ target }) => onPhoneUpdated(target.value)}
value={phone}
></ListInput>

<ListInput
label="Gender"
type="select"
value={gender}
onChange={({ target }) => onGenderUpdated(target.value)}
>
<option value={0}>Male</option>
<option value={1}>Female</option>
</ListInput>

<ListInput
label="Birth date"
type="date"
placeholder="Birth day"
defaultValue="2014-04-30"
onChange={({ target }) => onBirthdateUpdated(target.value)}
value={birthdate}
></ListInput>

<ListItem
title="Toggle"
>
<Toggle slot="after" onToggleChange={onToggleUpdated} checked={toggle} />
</ListItem>
<ListItem>
<Label>Slider</Label>
<Input>
<Range min="0" max="100" value={slider} step="1" label={true} onRangeChanged={(value) => onSliderUpdated(value)} />
</Input>
</ListItem>
<ListItem>
<Label>Textarea</Label>
<Input type="textarea" placeholder="Bio" onChange={({ target }) => onTextAreaUpdated(target.value)} value={textArea}></Input>
</ListItem>
<ListItem>
<Label>Resizable</Label>
<Input type="textarea" placeholder="Bio" resizable onChange={({ target }) => onResizableUpdated(target.value)} value={resizable}></Input>
</ListItem>

<ListInput
label="Range"
input={false}
>
<Range slot="input" min={0} max={100} step={1} value={slider} label={true} onRangeChanged={(value) => onSliderUpdated(value)} />
</ListInput>

<ListInput
type="textarea"
label="Textarea"
placeholder="Bio"
onChange={({ target }) => onTextAreaUpdated(target.value)}
value={textArea}
></ListInput>
<ListInput
type="textarea"
label="Resizable"
placeholder="Bio"
resizable
onChange={({ target }) => onResizableUpdated(target.value)}
value={resizable}>
></ListInput>
</List>

<BlockTitle>Checkbox group</BlockTitle>
Expand Down Expand Up @@ -159,6 +197,6 @@ export default ({
<Button className="col" big fill raised color="red">Big Red</Button>
<Button className="col" big fill raised color="green">Big Green</Button>
</Row>
</Block>
</Block>
</Page>
);
4 changes: 2 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import ReactDOM from 'react-dom';

// Import Framework7
import Framework7 from 'framework7/framework7.esm.bundle';
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import Framework7-React plugin
import Framework7React from 'framework7-react';
Expand All @@ -15,7 +15,7 @@ import { framework7ReduxPlugin } from 'framework7-redux';
import App from './components/App.jsx';

// Framework7 styles
import 'framework7/css/framework7.min.css';
import 'framework7/css/framework7.bundle.min.css';

// Icons
import './css/icons.css';
Expand Down