├── dist └── umd │ └── css │ └── my-app.css ├── .babelrc ├── src ├── utils │ ├── Layout.ts │ ├── Colors.tsx │ ├── reactify-vue │ │ ├── ReactifyVue.ts │ │ ├── react-element-creation │ │ │ └── CreateReactElements.ts │ │ └── react-class-creation-and-runtime │ │ │ ├── GenerateReactClass.ts │ │ │ ├── VueComponentClass.ts │ │ │ └── ReactClassRuntime.ts │ ├── OverscrollFix.ts │ └── ReactifyF7Vue.ts ├── components │ ├── inputs │ │ ├── SelectableInput.tsx │ │ └── ManagedFormInput.tsx │ └── Framework7App.tsx └── Framework7.d.ts ├── .npmignore ├── kitchen-sink ├── index.ts ├── tsconfig.json ├── components │ ├── demo │ │ ├── PopoverDemo.tsx │ │ ├── ActionsDemo.tsx │ │ ├── PickerModalDemo.tsx │ │ ├── LoginScreenDemo.tsx │ │ └── PopupDemo.tsx │ ├── pages │ │ ├── NestedRoutesPage.tsx │ │ ├── CardsPage.tsx │ │ ├── BarsPage.tsx │ │ ├── NestedRoutesTabbarPage.tsx │ │ ├── BarsTabbarPage.tsx │ │ ├── BarsTabbarLabelsPage.tsx │ │ ├── ProgressBarPage.tsx │ │ ├── LoginScreenPage.tsx │ │ ├── NestedRoutesTabsPage.tsx │ │ ├── SearchbarPage.tsx │ │ ├── CalendarPage.tsx │ │ ├── ChipsPage.tsx │ │ ├── SwiperPage.tsx │ │ ├── ContactsPage.tsx │ │ ├── SortablePage.tsx │ │ ├── GridPage.tsx │ │ ├── PullRefreshPage.tsx │ │ ├── ContentBlockPage.tsx │ │ ├── PreloaderPage.tsx │ │ ├── InfinitePage.tsx │ │ ├── TimelineHorizontalPage.tsx │ │ ├── DynamicRoutePage.tsx │ │ ├── PhotoBrowserPage.tsx │ │ ├── TimelineCalendarPage.tsx │ │ ├── AccordionPage.tsx │ │ ├── SmartSelectPage.tsx │ │ ├── ListsPage.tsx │ │ ├── VirtualListPage.tsx │ │ ├── SwipeoutPage.tsx │ │ ├── MessagesPage.tsx │ │ ├── VirtualListReactPage.tsx │ │ ├── TimelineVerticalPage.tsx │ │ ├── FabPage.tsx │ │ ├── BarsHidePage.tsx │ │ ├── BarsSubnavbarPage.tsx │ │ ├── FabDialPage.tsx │ │ ├── ModalsPage.tsx │ │ ├── TabsPage.tsx │ │ └── TabsSwipeablePage.tsx │ ├── nested-routes │ │ └── tabs │ │ │ ├── Tab3AlternateContent.tsx │ │ │ ├── TabbarTab3AlternateContent.tsx │ │ │ ├── Tab3.tsx │ │ │ ├── TabbarTab3.tsx │ │ │ ├── Tab2.tsx │ │ │ ├── Tab1.tsx │ │ │ ├── TabbarTab2.tsx │ │ │ └── TabbarTab1.tsx │ └── App.tsx ├── gulpfile.js ├── index.html ├── package.json ├── webpack.config.js └── routes.ts ├── .vscode └── settings.json ├── tsconfig.json ├── .gitignore ├── webpack.config.js ├── framework7-vue-build.js ├── package.json ├── gulpfile.babel.js └── README.md /dist/umd/css/my-app.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "es2017", "stage-2"] 3 | } -------------------------------------------------------------------------------- /src/utils/Layout.ts: -------------------------------------------------------------------------------- 1 | export type LayoutEnum = 2 | 'light' | 3 | 'dark' | 4 | 'default'; -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | gulpfile.js 3 | tsconfig.json 4 | src/ 5 | kitchen-sink/ 6 | .vscode/ 7 | framework7-custom-build.js 8 | framework7-react-component-gen.js 9 | framework7-vue/ 10 | framework7-react/ -------------------------------------------------------------------------------- /kitchen-sink/index.ts: -------------------------------------------------------------------------------- 1 | import {render} from 'react-dom'; 2 | import * as React from 'react'; 3 | 4 | import {App} from './components/App'; 5 | 6 | render(React.createElement(App), document.getElementById('react-root')); -------------------------------------------------------------------------------- /src/utils/Colors.tsx: -------------------------------------------------------------------------------- 1 | export type iosColors = 2 | 'blue' | 3 | 'red' | 4 | 'white' | 5 | 'black' | 6 | 'lightblue' | 7 | 'yellow' | 8 | 'orange' | 9 | 'pink' | 10 | 'green' | 11 | 'gray' | 12 | 'multi'; 13 | 14 | export type ColorsEnum = iosColors; -------------------------------------------------------------------------------- /kitchen-sink/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "es2015", 5 | "declaration": false, 6 | "sourceMap": true, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "noImplicitAny": false, 11 | "jsx": "react" 12 | }, 13 | "exclude": [ 14 | "node_modules" 15 | ] 16 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "files.exclude": { 4 | "**/.git": true, 5 | "**/.DS_Store": true, 6 | "**/typings/": true, 7 | "**/dist/": true, 8 | "**/node_modules/": true, 9 | "**/framework7-vue/": true, 10 | "**/framework7-react/": true, 11 | "**/framework7/": true 12 | }, 13 | "typescript.tsdk": "./node_modules/typescript/lib" 14 | } -------------------------------------------------------------------------------- /kitchen-sink/components/demo/PopoverDemo.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {Popover, ContentBlock} from 'framework7-react'; 4 | 5 | export interface IPopoverDemoProps { 6 | id: string; 7 | } 8 | 9 | export const PopoverDemo = (props: IPopoverDemoProps) => { 10 | return ( 11 | 12 | 13 |

Hello, I'm a Popover

14 | 15 | 16 | ); 17 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/pages/NestedRoutesPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, ContentBlockTitle, List, ListItem} from 'framework7-react'; 3 | 4 | export const NestedRoutesPage = () => { 5 | return ( 6 | 7 | 8 | Tabs 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | }; 16 | 17 | -------------------------------------------------------------------------------- /kitchen-sink/components/pages/CardsPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, Card, CardHeader, CardContent, CardFooter} from 'framework7-react'; 3 | 4 | export const CardsPage = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | Header 12 | Card Content 13 | Footer 14 | 15 | 16 | ); 17 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "declaration": true, 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "noImplicitAny": false, 10 | "jsx": "react", 11 | "allowJs": true 12 | }, 13 | "exclude": [ 14 | "kitchen-sink", 15 | "node_modules", 16 | "dist", 17 | "webpack.config.js", 18 | "framework7-react-component-gen.js", 19 | "framework7-vue-build.js", 20 | "gulpfile.babel.js" 21 | ] 22 | } -------------------------------------------------------------------------------- /kitchen-sink/components/pages/BarsPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, List, ListItem} from 'framework7-react'; 3 | 4 | export const BarsPage = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /kitchen-sink/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | path = require('path'), 3 | del = require('del'); 4 | 5 | var webpack = require('webpack-stream'); 6 | 7 | gulp.task('clean', function() { 8 | return del(['./dist/']); 9 | }); 10 | 11 | gulp.task('webpack', ['clean'], function () { 12 | var webpackConfig = require('./webpack.config.js'); 13 | 14 | return webpack(webpackConfig, require('webpack')) 15 | .pipe(gulp.dest('dist/')); 16 | }); 17 | 18 | gulp.task('copyFw7', function() { 19 | return gulp.src([ 20 | './node_modules/framework7-vue/kitchen-sink/framework7/*']) 21 | .pipe(gulp.dest('./framework7/')); 22 | }); 23 | 24 | 25 | 26 | gulp.task('default', ['webpack', 'copyFw7']); -------------------------------------------------------------------------------- /kitchen-sink/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Framework7 React 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /kitchen-sink/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kitchen-sink", 3 | "version": "0.0.1", 4 | "devDependencies": { 5 | "@types/react": "^16.0.5", 6 | "@types/react-dom": "^15.5.4", 7 | "css-loader": "^0.25.0", 8 | "del": "^2.2.2", 9 | "extract-text-webpack-plugin": "^2.0.0-beta.4", 10 | "gulp": "^3.9.1", 11 | "less": "^2.7.1", 12 | "less-loader": "^2.2.3", 13 | "style-loader": "^0.13.1", 14 | "ts-loader": "^2.2.0", 15 | "typescript": "^2.3.4", 16 | "url-loader": "^0.5.7", 17 | "webpack": "2.1.0-beta.25", 18 | "webpack-node-externals": "^1.5.4", 19 | "webpack-stream": "^3.2.0" 20 | }, 21 | "dependencies": { 22 | "framework7-react": "file:../", 23 | "react": "^15.3.2", 24 | "react-dom": "^15.3.2" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/inputs/SelectableInput.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export class SelectableInput extends React.Component { 4 | private element: HTMLInputElement; 5 | 6 | private saveRef(element: HTMLInputElement) { 7 | this.element = element; 8 | } 9 | 10 | public componentDidMount() { 11 | this.element.checked = this.props.checked; 12 | this.element.addEventListener('change', this.props.onChange); 13 | } 14 | 15 | public componentDidUpdate() { 16 | setTimeout(() => { 17 | if (this.element) { 18 | this.element.checked = this.props.checked; 19 | } 20 | }); 21 | } 22 | 23 | public render() { 24 | return ; 25 | } 26 | } -------------------------------------------------------------------------------- /kitchen-sink/components/demo/ActionsDemo.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {Actions, ActionsGroup, ActionsLabel, ActionsButton} from 'framework7-react'; 4 | 5 | export interface IActionsDemoProps extends React.Props { 6 | opened: boolean; 7 | onActionsClosed: () => void; 8 | } 9 | 10 | export const ActionsDemo = (props: IActionsDemoProps) => { 11 | return ( 12 | 13 | 14 | Hello 15 | Button 1 16 | Button 2 17 | 18 | 19 | Cancel 20 | 21 | 22 | ); 23 | }; -------------------------------------------------------------------------------- /kitchen-sink/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 3 | var webpack = require('webpack'); 4 | 5 | module.exports = { 6 | watch: true, 7 | entry: "./index.ts", 8 | resolve: { 9 | extensions: [".ts", ".tsx", ".js"] 10 | }, 11 | output: { 12 | filename: 'index.js', 13 | }, 14 | module: { 15 | rules: [ 16 | { test: /\.tsx?$/, loader: "ts-loader" }, 17 | { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader!less-loader" }) }, 18 | { test: /\.(png|svg)$/, loader: 'url-loader?limit=100000' } 19 | ] 20 | }, 21 | devtool: 'source-map', 22 | plugins: [ 23 | new ExtractTextPlugin("app.css") 24 | ] 25 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | typings/ 40 | kitchen-sink/dist 41 | framework7-vue/ 42 | framework7-react/ 43 | framework7/ 44 | kitchen-sink/framework7/ 45 | dist/commonjs 46 | 47 | .DS_Store -------------------------------------------------------------------------------- /kitchen-sink/components/pages/NestedRoutesTabbarPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, Toolbar, ContentBlock, ContentBlockTitle, List, ListItem, Tab, Link} from 'framework7-react'; 3 | 4 | export const NestedRoutesTabbarPage = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/demo/PickerModalDemo.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {PickerModal, Toolbar, NavLeft, NavRight, Link, ContentBlock} from 'framework7-react'; 4 | 5 | export interface IPickerModalDemoProps { 6 | opened: boolean; 7 | closePicker: () => void; 8 | } 9 | 10 | export const PickerModalDemo = (props: IPickerModalDemoProps) => { 11 | return ( 12 | 13 | 14 | 15 | 16 | Done 17 | 18 | 19 | 20 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste qui architecto recusandae veniam delectus vero libero illo aliquid, fuga ratione vel facilis iure est fugiat sunt nihil, consectetur veritatis.

21 | 22 | 23 | ); 24 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/pages/BarsTabbarPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, ContentBlock, Tab, Toolbar, Link} from 'framework7-react'; 3 | 4 | 5 | export const BarsTabbarPage = () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 |

Tab 1

13 | 14 | 15 |

Tab 2

16 | 17 | 18 |

Tab 3

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /kitchen-sink/components/pages/BarsTabbarLabelsPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, ContentBlock, Tab, Toolbar, Link} from 'framework7-react'; 3 | 4 | 5 | export const BarsTabbarLabelsPage = () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 |

Tab 1

13 | 14 | 15 |

Tab 2

16 | 17 | 18 |

Tab 3

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /kitchen-sink/components/pages/ProgressBarPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, ContentBlockTitle, List, ListItem, Progressbar} from 'framework7-react'; 3 | 4 | export const ProgressbarPage = () => { 5 | return ( 6 | 7 | 8 | 9 | Progressbar 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | } -------------------------------------------------------------------------------- /kitchen-sink/components/pages/LoginScreenPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, LoginScreenTitle, List, ListButton, ListItem, ListLabel, FormInput, FormLabel} from 'framework7-react'; 3 | 4 | export const LoginScreenPage = () => { 5 | return ( 6 | 7 | My App 8 | 9 | 10 | Username 11 | 12 | 13 | 14 | Password 15 | 16 | 17 | 18 | 19 | 20 | 21 |

Click Sign In to close Login Screen

22 | 23 | 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /kitchen-sink/components/pages/NestedRoutesTabsPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, Subnavbar, ContentBlock, ContentBlockTitle, List, ListItem, Tabs, Tab, ButtonsSegmented, Button} from 'framework7-react'; 3 | 4 | export const NestedRoutesTabsPage = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/pages/SearchbarPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, List, ListItem, Searchbar} from 'framework7-react'; 3 | 4 | const onSearch = (event) => { 5 | console.log('search', event[0]); 6 | } 7 | 8 | const onClear = (event) => { 9 | console.log('clear'); 10 | } 11 | 12 | const onEnable = (event) => { 13 | console.log('enable'); 14 | } 15 | 16 | const onDisable = (event) => { 17 | console.log('disable'); 18 | } 19 | 20 | export const SearchbarPage = () => { 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | { 31 | Array.apply(null, Array(100)).map((item, index) => { 32 | return (); 33 | }) 34 | } 35 | 36 | 37 | ); 38 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/pages/CalendarPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {object} from 'prop-types'; 3 | import {Page, Navbar, ContentBlockTitle, ContentBlock, Calendar} from 'framework7-react'; 4 | 5 | export const CalendarPage = (props: any, context: any) => { 6 | const themeType = 'ios'; //context.framework7AppContext.themeType; 7 | let calendarStyle = themeType === 'ios' ? { background: '#fff', margin: '-10px -15px' } : { background: '#fff', margin: '-16px -16px' }; 8 | 9 | return ( 10 | 11 | 12 | Default 13 | 14 | 15 | 16 | 17 | Multiple 18 | 19 | 20 | 21 | 22 | Range Picker 23 | 24 | 25 | 26 | 27 | ); 28 | }; 29 | 30 | Calendar.contextTypes = { 31 | framework7AppContext: object 32 | } -------------------------------------------------------------------------------- /kitchen-sink/components/pages/ChipsPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, ContentBlockTitle, ContentBlock, Chip} from 'framework7-react'; 3 | 4 | const onChipDelete = (event) => { 5 | console.log('delete'); 6 | }; 7 | 8 | const chipMargin = { 9 | marginRight: ".5em" 10 | }; 11 | 12 | export const ChipsPage = () => { 13 | return ( 14 | 15 | 16 | 17 | Chips 18 | 19 | 20 | 21 | 22 | '} style={chipMargin} /> 23 | '} style={chipMargin} /> 24 | 25 | '} deleteable onDelete={onChipDelete} /> 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | 4 | module.exports.getWebpackConfig = (minify) => { 5 | let config = { 6 | watch: false, 7 | entry: "./framework7-react/index.ts", 8 | resolve: { 9 | extensions: [".ts", ".tsx", ".js"] 10 | }, 11 | output: { 12 | filename: 'framework7-react.js', 13 | library: 'framework7-react', 14 | libraryTarget: 'umd' 15 | }, 16 | module: { 17 | rules: [ 18 | { test: /\.tsx?$/, loader: "awesome-typescript-loader?declaration=false" }, 19 | { test: /\.js$/, exclude: /(node_modules)/, loader: "babel-loader" } 20 | ] 21 | }, 22 | externals: { 23 | "react": "React" 24 | }, 25 | devtool: 'source-map', 26 | plugins: [] 27 | }; 28 | 29 | if (minify) { 30 | config.output.filename = 'framework7-react.min.js'; 31 | 32 | config.plugins.push( 33 | new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }) 34 | ); 35 | 36 | config.plugins.push( 37 | new webpack.optimize.UglifyJsPlugin({ 38 | compress: { 39 | warnings: false, 40 | }, 41 | output: { 42 | comments: false, 43 | } 44 | }) 45 | ); 46 | } 47 | 48 | return config; 49 | }; 50 | -------------------------------------------------------------------------------- /kitchen-sink/components/pages/SwiperPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, ContentBlockTitle, Swiper, SwiperSlide} from 'framework7-react'; 3 | 4 | 5 | const swiperItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 6 | 7 | const swiperHeight = { 8 | height: "200px" 9 | }; 10 | 11 | const swiperParams = { 12 | slidesPerView: 3, 13 | spaceBetween: 20 14 | } 15 | 16 | const swiperMap = (item: number) => { 17 | return ({`Slide ${item}`}); 18 | } 19 | 20 | export const SwiperPage = () => { 21 | return ( 22 | 23 | 24 | 25 | Default 26 | 27 | { 28 | swiperItems.map(swiperMap) 29 | } 30 | 31 | 32 | Navigation 33 | 34 | { 35 | swiperItems.map(swiperMap) 36 | } 37 | 38 | 39 | Slides Per View 40 | 41 | { 42 | swiperItems.map(swiperMap) 43 | } 44 | 45 | 46 | ); 47 | } -------------------------------------------------------------------------------- /kitchen-sink/components/nested-routes/tabs/Tab3AlternateContent.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {ContentBlock} from 'framework7-react'; 4 | 5 | export const Tab3AlternateContent = () => { 6 | return ( 7 | 8 |

Tab 3 Alternate Content

9 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure odio dolor, soluta reprehenderit, corporis officia earum corrupti amet ea aspernatur praesentium, distinctio ipsa atque officiis. Recusandae ab error, atque natus.

10 |

Quibusdam repellendus, repudiandae nulla commodi ut nemo eum, quia dolorum dicta voluptate reprehenderit. Omnis, temporibus iure quia ad sit incidunt similique et quaerat dicta delectus aspernatur, unde illo cum ipsam?

11 |

Officia alias inventore soluta illo, omnis tempore obcaecati at, harum impedit nemo enim, iure fugit est explicabo commodi ipsam distinctio architecto voluptatum reprehenderit, aperiam dolorem praesentium repellendus repudiandae ducimus saepe.

12 |

Autem ullam tempore suscipit consectetur, odit soluta. Neque quasi mollitia culpa autem, quis ab nostrum non distinctio illo magni perspiciatis et consequuntur possimus aliquam reprehenderit reiciendis praesentium consectetur, voluptas obcaecati?

13 |

Quae repellendus aut iste provident consectetur inventore voluptatibus, saepe ad dolorem voluptatum recusandae praesentium animi harum officiis error nulla ullam nobis? Mollitia possimus voluptatum pariatur omnis quibusdam, quidem recusandae velit.

14 | 15 | ); 16 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/pages/ContactsPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, List, ListGroup, ListItem} from 'framework7-react'; 3 | 4 | const contacts = { 5 | 'A': [ 6 | 'Aaron', 7 | 'Abbie', 8 | 'Adam', 9 | 'Adele', 10 | 'Agatha', 11 | 'Agnes', 12 | 'Albert', 13 | 'Alexander' 14 | ], 15 | 'B': [ 16 | 'Bailey', 17 | 'Barclay', 18 | 'Bartolo', 19 | 'Bellamy', 20 | 'Belle', 21 | 'Benjamin' 22 | ], 23 | 'C': [ 24 | 'Caiden', 25 | 'Calvin', 26 | 'Candy', 27 | 'Carl', 28 | 'Cherilyn', 29 | 'Chester', 30 | 'Chloe' 31 | ], 32 | 'V': [ 33 | 'Vladimir' 34 | ] 35 | }; 36 | 37 | export const ContactsPage = () => { 38 | return ( 39 | 40 | 41 | 42 | 43 | {Object.keys(contacts).reduce((listGroups, nextGroupName) => { 44 | return [ 45 | ...listGroups, 46 | 47 | 48 | {contacts[nextGroupName].map(contactName => { 49 | return ; 50 | })} 51 | 52 | ]; 53 | }, [])} 54 | 55 | 56 | ); 57 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/nested-routes/tabs/TabbarTab3AlternateContent.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {ContentBlock} from 'framework7-react'; 4 | 5 | export const TabbarTab3AlternateContent = () => { 6 | return ( 7 | 8 |

Tabbar Tab 3 Alternate Content

9 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure odio dolor, soluta reprehenderit, corporis officia earum corrupti amet ea aspernatur praesentium, distinctio ipsa atque officiis. Recusandae ab error, atque natus.

10 |

Quibusdam repellendus, repudiandae nulla commodi ut nemo eum, quia dolorum dicta voluptate reprehenderit. Omnis, temporibus iure quia ad sit incidunt similique et quaerat dicta delectus aspernatur, unde illo cum ipsam?

11 |

Officia alias inventore soluta illo, omnis tempore obcaecati at, harum impedit nemo enim, iure fugit est explicabo commodi ipsam distinctio architecto voluptatum reprehenderit, aperiam dolorem praesentium repellendus repudiandae ducimus saepe.

12 |

Autem ullam tempore suscipit consectetur, odit soluta. Neque quasi mollitia culpa autem, quis ab nostrum non distinctio illo magni perspiciatis et consequuntur possimus aliquam reprehenderit reiciendis praesentium consectetur, voluptas obcaecati?

13 |

Quae repellendus aut iste provident consectetur inventore voluptatibus, saepe ad dolorem voluptatum recusandae praesentium animi harum officiis error nulla ullam nobis? Mollitia possimus voluptatum pariatur omnis quibusdam, quidem recusandae velit.

14 | 15 | ); 16 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/nested-routes/tabs/Tab3.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {ContentBlock} from 'framework7-react'; 4 | 5 | export const Tab3 = () => { 6 | return ( 7 | 8 |

Tab 3

9 |

Go to tab3 alternate content

10 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure odio dolor, soluta reprehenderit, corporis officia earum corrupti amet ea aspernatur praesentium, distinctio ipsa atque officiis. Recusandae ab error, atque natus.

11 |

Quibusdam repellendus, repudiandae nulla commodi ut nemo eum, quia dolorum dicta voluptate reprehenderit. Omnis, temporibus iure quia ad sit incidunt similique et quaerat dicta delectus aspernatur, unde illo cum ipsam?

12 |

Officia alias inventore soluta illo, omnis tempore obcaecati at, harum impedit nemo enim, iure fugit est explicabo commodi ipsam distinctio architecto voluptatum reprehenderit, aperiam dolorem praesentium repellendus repudiandae ducimus saepe.

13 |

Autem ullam tempore suscipit consectetur, odit soluta. Neque quasi mollitia culpa autem, quis ab nostrum non distinctio illo magni perspiciatis et consequuntur possimus aliquam reprehenderit reiciendis praesentium consectetur, voluptas obcaecati?

14 |

Quae repellendus aut iste provident consectetur inventore voluptatibus, saepe ad dolorem voluptatum recusandae praesentium animi harum officiis error nulla ullam nobis? Mollitia possimus voluptatum pariatur omnis quibusdam, quidem recusandae velit.

15 | 16 | ); 17 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/nested-routes/tabs/TabbarTab3.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {ContentBlock} from 'framework7-react'; 4 | 5 | export const TabbarTab3 = () => { 6 | return ( 7 | 8 |

Tabbar Tab 3

9 |

Go to tab3 alternate content

10 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure odio dolor, soluta reprehenderit, corporis officia earum corrupti amet ea aspernatur praesentium, distinctio ipsa atque officiis. Recusandae ab error, atque natus.

11 |

Quibusdam repellendus, repudiandae nulla commodi ut nemo eum, quia dolorum dicta voluptate reprehenderit. Omnis, temporibus iure quia ad sit incidunt similique et quaerat dicta delectus aspernatur, unde illo cum ipsam?

12 |

Officia alias inventore soluta illo, omnis tempore obcaecati at, harum impedit nemo enim, iure fugit est explicabo commodi ipsam distinctio architecto voluptatum reprehenderit, aperiam dolorem praesentium repellendus repudiandae ducimus saepe.

13 |

Autem ullam tempore suscipit consectetur, odit soluta. Neque quasi mollitia culpa autem, quis ab nostrum non distinctio illo magni perspiciatis et consequuntur possimus aliquam reprehenderit reiciendis praesentium consectetur, voluptas obcaecati?

14 |

Quae repellendus aut iste provident consectetur inventore voluptatibus, saepe ad dolorem voluptatum recusandae praesentium animi harum officiis error nulla ullam nobis? Mollitia possimus voluptatum pariatur omnis quibusdam, quidem recusandae velit.

15 | 16 | ); 17 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/nested-routes/tabs/Tab2.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {ContentBlock} from 'framework7-react'; 4 | 5 | export const Tab2 = () => { 6 | return ( 7 | 8 |

Tab 2

9 |

Go to tab 1

10 |

Go to tab 3

11 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure odio dolor, soluta reprehenderit, corporis officia earum corrupti amet ea aspernatur praesentium, distinctio ipsa atque officiis. Recusandae ab error, atque natus.

12 |

Quibusdam repellendus, repudiandae nulla commodi ut nemo eum, quia dolorum dicta voluptate reprehenderit. Omnis, temporibus iure quia ad sit incidunt similique et quaerat dicta delectus aspernatur, unde illo cum ipsam?

13 |

Officia alias inventore soluta illo, omnis tempore obcaecati at, harum impedit nemo enim, iure fugit est explicabo commodi ipsam distinctio architecto voluptatum reprehenderit, aperiam dolorem praesentium repellendus repudiandae ducimus saepe.

14 |

Autem ullam tempore suscipit consectetur, odit soluta. Neque quasi mollitia culpa autem, quis ab nostrum non distinctio illo magni perspiciatis et consequuntur possimus aliquam reprehenderit reiciendis praesentium consectetur, voluptas obcaecati?

15 |

Quae repellendus aut iste provident consectetur inventore voluptatibus, saepe ad dolorem voluptatum recusandae praesentium animi harum officiis error nulla ullam nobis? Mollitia possimus voluptatum pariatur omnis quibusdam, quidem recusandae velit.

16 | 17 | ); 18 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/demo/LoginScreenDemo.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {LoginScreen, View, Pages, Page, LoginScreenTitle, List, ListItem, FormLabel, FormInput, ListButton, ListLabel} from 'framework7-react'; 4 | 5 | export interface ILoginScreenDemoProps { 6 | opened: boolean; 7 | closeLoginScreen: () => void; 8 | } 9 | 10 | export const LoginScreenDemo = (props: ILoginScreenDemoProps) => { 11 | return ( 12 | 13 | 14 | 15 | 16 | My App 17 | 18 | 19 | 20 | Username 21 | 22 | 23 | 24 | Password 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |

Click Sign In to close Login Screen

33 | 34 | 35 | 36 | 37 | 38 | 39 | ); 40 | }; -------------------------------------------------------------------------------- /src/utils/reactify-vue/ReactifyVue.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {generateReactClass} from './react-class-creation-and-runtime/GenerateReactClass'; 4 | 5 | export interface IVueEventToPropsMap { 6 | [vueEvent: string]: string; 7 | } 8 | 9 | export interface IVueSlotToReactElementMap { 10 | [slotName: string]: (React.ReactElement | (React.ReactElement)[])[]; 11 | } 12 | 13 | export interface IVueSlotToReactPropNameMap { 14 | [slotName: string]: string; 15 | } 16 | 17 | export interface IVueComponent { 18 | render: (createElement: any) => React.ReactElement; 19 | beforeDestroy?: () => void; 20 | methods?: {[methodName: string]: Function}; 21 | $slots?: IVueSlotToReactElementMap; 22 | $emit?: (eventName: string, ...eventArgs: any[]) => void; 23 | watch?: {[watchedProp: string]: Function}; 24 | computed?: {[computedProp: string]: () => any}; 25 | element?: HTMLElement; 26 | props: any; 27 | } 28 | 29 | export interface IReactifyVueArgs { 30 | component: IVueComponent; 31 | name: string; 32 | tag: string; 33 | events?: IVueEventToPropsMap; 34 | instantiatedComponents?: (React.ComponentClass | React.StatelessComponent)[]; 35 | slots?: IVueSlotToReactPropNameMap; 36 | args?: any; 37 | mixin?: any; 38 | } 39 | 40 | export const reactifyVue = (reactifyVueArgs: IReactifyVueArgs) => { 41 | return generateReactClass( 42 | reactifyVueArgs.instantiatedComponents, 43 | reactifyVueArgs.component, 44 | reactifyVueArgs.slots, 45 | reactifyVueArgs.name, 46 | reactifyVueArgs.tag, 47 | reactifyVueArgs.mixin, 48 | reactifyVueArgs.args 49 | ); 50 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/nested-routes/tabs/Tab1.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {ContentBlock} from 'framework7-react'; 4 | 5 | export const Tab1 = () => { 6 | return ( 7 | 8 |

Tab 1

9 |

Go to tab 2

10 |

Go to tab 3

11 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure odio dolor, soluta reprehenderit, corporis officia earum corrupti amet ea aspernatur praesentium, distinctio ipsa atque officiis. Recusandae ab error, atque natus.

12 |

Quibusdam repellendus, repudiandae nulla commodi ut nemo eum, quia dolorum dicta voluptate reprehenderit. Omnis, temporibus iure quia ad sit incidunt similique et quaerat dicta delectus aspernatur, unde illo cum ipsam?

13 |

Officia alias inventore soluta illo, omnis tempore obcaecati at, harum impedit nemo enim, iure fugit est explicabo commodi ipsam distinctio architecto voluptatum reprehenderit, aperiam dolorem praesentium repellendus repudiandae ducimus saepe.

14 |

Autem ullam tempore suscipit consectetur, odit soluta. Neque quasi mollitia culpa autem, quis ab nostrum non distinctio illo magni perspiciatis et consequuntur possimus aliquam reprehenderit reiciendis praesentium consectetur, voluptas obcaecati?

15 |

Quae repellendus aut iste provident consectetur inventore voluptatibus, saepe ad dolorem voluptatum recusandae praesentium animi harum officiis error nulla ullam nobis? Mollitia possimus voluptatum pariatur omnis quibusdam, quidem recusandae velit.

16 | 17 | ); 18 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/pages/SortablePage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, NavRight, Link, ContentBlockTitle, List, ListItem} from 'framework7-react'; 3 | 4 | export interface ISortablePageState { 5 | items: number[]; 6 | sorting: boolean; 7 | } 8 | 9 | export class SortablePage extends React.Component { 10 | constructor() { 11 | super(); 12 | this.state = { 13 | sorting: false, 14 | items: [1, 2, 3, 4, 5] 15 | }; 16 | } 17 | 18 | render() { 19 | return ( 20 | 21 | 22 | 23 | {this.state.sorting ? 'Done' : 'Open'} 24 | 25 | 26 | 27 | Sortable List 28 | 29 | { 30 | this.state.items.map(item => { 31 | return ; 32 | }) 33 | } 34 | 35 | 36 | ); 37 | } 38 | 39 | private onOpen() { 40 | this.setState({ 41 | ...this.state, 42 | sorting: !this.state.sorting 43 | }); 44 | } 45 | 46 | private onClose() { 47 | this.setState({ 48 | ...this.state, 49 | sorting: !this.state.sorting 50 | }); 51 | } 52 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/nested-routes/tabs/TabbarTab2.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {ContentBlock} from 'framework7-react'; 4 | 5 | export const TabbarTab2 = () => { 6 | return ( 7 | 8 |

Tabbar Tab 2

9 |

Go to tab 1

10 |

Go to tab 3

11 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure odio dolor, soluta reprehenderit, corporis officia earum corrupti amet ea aspernatur praesentium, distinctio ipsa atque officiis. Recusandae ab error, atque natus.

12 |

Quibusdam repellendus, repudiandae nulla commodi ut nemo eum, quia dolorum dicta voluptate reprehenderit. Omnis, temporibus iure quia ad sit incidunt similique et quaerat dicta delectus aspernatur, unde illo cum ipsam?

13 |

Officia alias inventore soluta illo, omnis tempore obcaecati at, harum impedit nemo enim, iure fugit est explicabo commodi ipsam distinctio architecto voluptatum reprehenderit, aperiam dolorem praesentium repellendus repudiandae ducimus saepe.

14 |

Autem ullam tempore suscipit consectetur, odit soluta. Neque quasi mollitia culpa autem, quis ab nostrum non distinctio illo magni perspiciatis et consequuntur possimus aliquam reprehenderit reiciendis praesentium consectetur, voluptas obcaecati?

15 |

Quae repellendus aut iste provident consectetur inventore voluptatibus, saepe ad dolorem voluptatum recusandae praesentium animi harum officiis error nulla ullam nobis? Mollitia possimus voluptatum pariatur omnis quibusdam, quidem recusandae velit.

16 | 17 | ); 18 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/nested-routes/tabs/TabbarTab1.tsx: -------------------------------------------------------------------------------- 1 | 2 | import * as React from 'react'; 3 | 4 | import {ContentBlock} from 'framework7-react'; 5 | 6 | export const TabbarTab1 = () => { 7 | return ( 8 | 9 |

Tabbar Tab 1

10 |

Go to tab 2

11 |

Go to tab 3

12 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure odio dolor, soluta reprehenderit, corporis officia earum corrupti amet ea aspernatur praesentium, distinctio ipsa atque officiis. Recusandae ab error, atque natus.

13 |

Quibusdam repellendus, repudiandae nulla commodi ut nemo eum, quia dolorum dicta voluptate reprehenderit. Omnis, temporibus iure quia ad sit incidunt similique et quaerat dicta delectus aspernatur, unde illo cum ipsam?

14 |

Officia alias inventore soluta illo, omnis tempore obcaecati at, harum impedit nemo enim, iure fugit est explicabo commodi ipsam distinctio architecto voluptatum reprehenderit, aperiam dolorem praesentium repellendus repudiandae ducimus saepe.

15 |

Autem ullam tempore suscipit consectetur, odit soluta. Neque quasi mollitia culpa autem, quis ab nostrum non distinctio illo magni perspiciatis et consequuntur possimus aliquam reprehenderit reiciendis praesentium consectetur, voluptas obcaecati?

16 |

Quae repellendus aut iste provident consectetur inventore voluptatibus, saepe ad dolorem voluptatum recusandae praesentium animi harum officiis error nulla ullam nobis? Mollitia possimus voluptatum pariatur omnis quibusdam, quidem recusandae velit.

17 | 18 | ); 19 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/pages/GridPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, ContentBlock, ContentBlockTitle, GridRow, GridCol} from 'framework7-react'; 3 | 4 | const columnStyle = {border: '1px solid #e5e5e5', padding: '5px', textAlign: 'center'}; 5 | const rowStyle = { margin: '1em 0' }; 6 | 7 | export const GridPage = () => { 8 | return ( 9 | 10 | 11 | 12 | Grid 13 | 14 | 15 | 50% 16 | 50% 17 | 18 | 19 | 33% 20 | 33% 21 | 33% 22 | 23 | 24 | 50% 25 | 25% 26 | 25% 27 | 28 | 29 | 66% 30 | 33% 31 | 32 | 33 | 34 | ); 35 | } -------------------------------------------------------------------------------- /kitchen-sink/components/pages/PullRefreshPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, ContentBlockTitle, List, ListItem, ListLabel} from 'framework7-react'; 3 | 4 | export interface IPullRefreshPageState { 5 | items: number[]; 6 | counter: number; 7 | } 8 | 9 | export class PullRefreshPage extends React.Component { 10 | constructor() { 11 | super(); 12 | this.state = { 13 | items: [1, 2, 3, 4, 5], 14 | counter: 5 15 | }; 16 | } 17 | 18 | render() { 19 | return ( 20 | 21 | 22 | 23 | Pull To Refresh 24 | 25 | { 26 | this.state.items.map(n => { 27 | return ; 31 | }) 32 | } 33 | Pull list down to refresh items 34 | 35 | 36 | ); 37 | } 38 | 39 | private onRefresh(event, callBack) { 40 | let self = this; 41 | let newItems = this.state.items.slice(); 42 | let newCounter = this.state.counter + 1; 43 | 44 | newItems.push(newCounter); 45 | 46 | setTimeout(function () { 47 | self.setState({ 48 | counter: newCounter, 49 | items: newItems 50 | }); 51 | 52 | callBack(); 53 | }, 2000); 54 | } 55 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/pages/ContentBlockPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, ContentBlock} from 'framework7-react'; 3 | 4 | export const ContentBlockPage = () => { 5 | return ( 6 | 7 | 8 | 9 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.

10 | 11 | 12 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.

13 | 14 | 15 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu felis volutpat, rutrum ex quis, lobortis ex. Curabitur quis mattis lorem. Nullam magna lacus, interdum vel maximus nec, vestibulum non quam. Phasellus ornare efficitur porttitor. Quisque neque diam, imperdiet in fermentum nec, congue vitae ante. Nullam imperdiet maximus commodo. Morbi pharetra id purus ac ultrices. Duis non posuere libero.

16 | 17 | 18 | ); 19 | }; 20 | 21 | 22 | -------------------------------------------------------------------------------- /kitchen-sink/components/pages/PreloaderPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, ContentBlock, ContentBlockTitle, GridRow, GridCol, Preloader} from 'framework7-react'; 3 | 4 | const pStyle = {margin: '1em 0'}; 5 | const backgroundStyle = {background: '#333'}; 6 | 7 | export const PreloaderPage = () => { 8 | return ( 9 | 10 | 11 | 12 | Preloader 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | ); 47 | } -------------------------------------------------------------------------------- /framework7-vue-build.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | path = require('path'), 3 | rollup = require('rollup-stream'), 4 | buble = require('rollup-plugin-buble'), 5 | vue = require('rollup-plugin-vue2'), 6 | source = require('vinyl-source-stream'), 7 | buffer = require('vinyl-buffer'), 8 | sourcemaps = require('gulp-sourcemaps'), 9 | rename = require('gulp-rename'), 10 | fs = require('fs'), 11 | to = require('to-case'); 12 | 13 | const ensureDirectoryExistence = (filePath) => { 14 | var dirname = path.dirname(filePath); 15 | 16 | if (fs.existsSync(dirname)) { 17 | return true; 18 | } 19 | 20 | ensureDirectoryExistence(dirname); 21 | 22 | fs.mkdirSync(dirname); 23 | }; 24 | 25 | export default function(cb) { 26 | const paths = [ 27 | './node_modules/framework7-vue/src/components/', 28 | './node_modules/framework7-vue/src/mixins/' 29 | ]; 30 | 31 | const components = []; 32 | const imports = []; 33 | 34 | paths.forEach(path => { 35 | const files = fs.readdirSync(path); 36 | files.filter(file => file.indexOf('.vue') != -1).forEach(file => { 37 | const componentName = to.pascal(`vue-${file.replace('.vue', '')}${(path.indexOf('mixins') !== -1) ? '-mixin' : ''}`); 38 | imports.push(`import ${componentName} from '${'.' + path + file}'`); 39 | components.push(componentName); 40 | }); 41 | }); 42 | 43 | const index = `${imports.join('\n')}\n\nexport {\n\t${components.join(',\n\t')}\n}`; 44 | 45 | ensureDirectoryExistence('./framework7-vue/index.js'); 46 | 47 | fs.writeFileSync('./framework7-vue/index.js', index); 48 | 49 | rollup({ 50 | entry: './framework7-vue/index.js', 51 | plugins: [vue(), buble()], 52 | format: 'es', 53 | moduleName: 'Framework7Vue', 54 | useStrict: false, 55 | sourceMap: true 56 | }) 57 | .pipe(source('framework7-vue.js', './framework7-vue')) 58 | .pipe(buffer()) 59 | .pipe(sourcemaps.init({loadMaps: true})) 60 | .pipe(sourcemaps.write('./')) 61 | .pipe(gulp.dest('./framework7-vue/')) 62 | .on('end', cb); 63 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/pages/InfinitePage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, ContentBlock, ContentBlockTitle, List, ListItem, ListLabel} from 'framework7-react'; 3 | 4 | export interface IInfinitePageState { 5 | items: number[]; 6 | counter: number; 7 | } 8 | 9 | export class InfinitePage extends React.Component { 10 | private timeout: any; 11 | 12 | constructor() { 13 | super(); 14 | let itemsArr: number[] = []; 15 | 16 | for (let i = 0; i < 25; i++) { 17 | itemsArr.push(i + 1); 18 | } 19 | 20 | this.state = { 21 | items: itemsArr, 22 | counter: itemsArr.length 23 | }; 24 | } 25 | 26 | render() { 27 | return ( 28 | 29 | 30 | 31 | Scroll list down to load new items 32 | Infinite Scroll 33 | 34 | { 35 | this.state.items.map(n => { 36 | return ; 40 | }) 41 | } 42 | 43 | 44 | ); 45 | } 46 | 47 | private onInfiniteScroll() { 48 | let self = this; 49 | let newItems = this.state.items.slice(); 50 | let newCounter = this.state.counter; 51 | 52 | if (this.timeout) { 53 | clearTimeout(this.timeout); 54 | } 55 | 56 | this.timeout = setTimeout(function () { 57 | for (let i = newCounter; i < newCounter + 25; i++) { 58 | newItems.push(i + 1); 59 | } 60 | 61 | self.setState({ 62 | counter: newCounter + 25, 63 | items: newItems 64 | }); 65 | }, 500); 66 | } 67 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/demo/PopupDemo.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import {Popup, View, Pages, Page, Navbar, NavRight, Link, ContentBlock} from 'framework7-react'; 4 | 5 | export interface IPopupDemoProps { 6 | opened: boolean; 7 | closePopup: () => void; 8 | } 9 | 10 | export const PopupDemo = (props: IPopupDemoProps) => { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | Close 19 | 20 | 21 | 22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste qui architecto recusandae veniam delectus vero libero illo aliquid, fuga ratione vel facilis iure est fugiat sunt nihil, consectetur veritatis.

24 |

Itaque impedit, nam, sed reprehenderit quaerat commodi veritatis ducimus eos nisi, at aliquam dolorum alias optio natus. Sit voluptate aperiam, cupiditate repellat quod fugiat non doloribus eveniet dolorem fugit nihil.

25 |

Error cumque sunt dolorem aut, similique accusantium delectus. Minima, natus. Doloremque ratione veniam cupiditate modi aspernatur debitis possimus iure id delectus! Totam eveniet, impedit minus deserunt aliquid facere laboriosam dignissimos.

26 |

Aliquid autem saepe sit cumque odit nihil eius consectetur impedit accusantium sunt, repudiandae quaerat cum! Esse autem ipsum aliquam, distinctio laborum excepturi facilis fuga vitae atque iusto eligendi, explicabo corporis.

27 |

Necessitatibus minima quidem fugit corporis reprehenderit saepe facilis perspiciatis sit, consectetur nulla officia, pariatur accusantium quas voluptas. Illum placeat eligendi dolor nihil libero culpa, ex quas voluptas deleniti, unde id.

28 | 29 | 30 | 31 | 32 | 33 | ); 34 | }; -------------------------------------------------------------------------------- /kitchen-sink/components/pages/TimelineHorizontalPage.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Page, Navbar, Timeline, TimelineItem, TimelineItemChild, List, ListItem, Card} from 'framework7-react'; 3 | 4 | 5 | export const TimelineHorizontalPage = () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 18 | 24 | 25 | 26 | Plain text goes here 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /src/components/inputs/ManagedFormInput.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {SelectableInput} from './SelectableInput'; 3 | 4 | export const ManagedFormInput = (props: any) => { 5 | const renamedProps = { 6 | name: props.name, 7 | type: props.type, 8 | placeholder: props.placeholder, 9 | id: props.id, 10 | value: props.value || '', 11 | size: props.size, 12 | accept: props.accept, 13 | autoComplete: props.autocomplete, 14 | autoCorrect: props.autocorrect, 15 | autoCapitalize: props.autocapitalize, 16 | spellCheck: props.spellcheck, 17 | autoFocus: props.autofocus, 18 | autoSave: props.autosave, 19 | checked: props.checked, 20 | disabled: props.disabled, 21 | max: props.max, 22 | maxLength: props.maxlength, 23 | min: props.min, 24 | minLength: props.minlength, 25 | step: props.step, 26 | multiple: props.multiple, 27 | readOnly: props.readonly, 28 | required: props.required, 29 | color: props.color, 30 | pattern: props.pattern, 31 | 32 | onFocus: props.onFocus, 33 | onBlur: props.onBlur, 34 | onInput: props.onInput, 35 | onChange: props.onChange, 36 | onClick: props.onClick, 37 | onKeyPress: props.onKeypress, 38 | onKeyUp: props.onKeyUp, 39 | onKeyDown: props.onKeyDown, 40 | onCompositionStart: props.onCompositionstart, 41 | onCompositionUpdate: props.onCompositionupdate, 42 | onCompositionEnd: props.onCompositionend, 43 | onDoubleClick: props.onDblclick, 44 | onMouseDown: props.onMousedown, 45 | onMouseEnter: props.onMouseenter, 46 | onMouseLeave: props.onMouseleave, 47 | onMouseMove: props.onMousemove, 48 | onMouseOut: props.onMouseout, 49 | onMouseOver: props.onMouseover, 50 | onMouseUp: props.onMouseup, 51 | onWheel: props.onWheel, 52 | onSelect: props.onSelect 53 | }; 54 | 55 | switch(props.type.toLowerCase()) { 56 | case 'checkbox': 57 | case 'radio': 58 | return ; 59 | case 'textarea': 60 | return