├── src
├── pages
│ ├── api
│ │ ├── alert
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── clipboard
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── device
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── navigate
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── request
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── toast
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── asyncstorage
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── chooseimage
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── setNativeProps
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── animation
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── transition
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── getElementById
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── env
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── confirm
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ └── appstate
│ │ │ ├── index.css
│ │ │ └── index.js
│ ├── component
│ │ ├── icon
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── embed
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── countdown
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── video
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── image
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── picture
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── view
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── text
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── link
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── waterfall
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── textinput
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── modal
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── slider
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── scrollview
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── refreshcontrol
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ ├── recyclerview
│ │ │ ├── index.css
│ │ │ └── index.js
│ │ └── canvas
│ │ │ └── index.js
│ ├── index-api
│ │ └── index.js
│ └── index
│ │ └── index.js
├── components
│ ├── SectionOper
│ │ ├── index.css
│ │ └── index.js
│ ├── SectionContainer
│ │ └── index.js
│ ├── Container
│ │ ├── index.css
│ │ └── index.js
│ ├── SectionOperText
│ │ └── index.js
│ ├── SectionTextItem
│ │ └── index.js
│ ├── SectionTitle
│ │ └── index.js
│ ├── SectionItem
│ │ └── index.js
│ ├── Section
│ │ └── index.js
│ ├── DescHeader
│ │ ├── index.css
│ │ └── index.js
│ ├── Navigator
│ │ ├── index.css
│ │ └── index.js
│ ├── TabBar
│ │ ├── index.css
│ │ └── index.js
│ └── Home
│ │ ├── index.js
│ │ ├── components
│ │ └── MenuList.js
│ │ └── index.css
├── constants.js
├── assets
│ ├── img
│ │ ├── api.png
│ │ ├── net.png
│ │ ├── back.png
│ │ ├── basics.png
│ │ ├── home.png
│ │ ├── media.png
│ │ ├── system.png
│ │ ├── user.png
│ │ ├── feedback.png
│ │ ├── function.png
│ │ ├── navigate.png
│ │ ├── storage.png
│ │ ├── animation.png
│ │ ├── api_active.png
│ │ ├── api_tabbar.png
│ │ ├── back_home.png
│ │ ├── component.png
│ │ ├── container.png
│ │ ├── extension.png
│ │ ├── monitoring.png
│ │ ├── component_active.png
│ │ ├── component_tabbar.png
│ │ ├── api_active_tabbar.png
│ │ └── component_active_tabbar.png
│ └── css
│ │ └── common.css
├── app.js
├── config
│ ├── platform.js
│ ├── component.js
│ └── api.js
├── utils
│ └── inMiniApp.js
├── document
│ └── index.jsx
└── app.json
├── .gitignore
├── README.md
├── LICENSE
└── package.json
/src/pages/api/alert/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/api/clipboard/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/api/device/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/api/navigate/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/api/request/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/api/toast/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/api/asyncstorage/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/api/chooseimage/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/api/setNativeProps/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/SectionOper/index.css:
--------------------------------------------------------------------------------
1 | :host {
2 | display: contents;
3 | }
--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
1 | export const API = 'api';
2 | export const COMPONENT = 'component';
3 |
--------------------------------------------------------------------------------
/src/assets/img/api.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/api.png
--------------------------------------------------------------------------------
/src/assets/img/net.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/net.png
--------------------------------------------------------------------------------
/src/assets/img/back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/back.png
--------------------------------------------------------------------------------
/src/assets/img/basics.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/basics.png
--------------------------------------------------------------------------------
/src/assets/img/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/home.png
--------------------------------------------------------------------------------
/src/assets/img/media.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/media.png
--------------------------------------------------------------------------------
/src/assets/img/system.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/system.png
--------------------------------------------------------------------------------
/src/assets/img/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/user.png
--------------------------------------------------------------------------------
/src/assets/img/feedback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/feedback.png
--------------------------------------------------------------------------------
/src/assets/img/function.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/function.png
--------------------------------------------------------------------------------
/src/assets/img/navigate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/navigate.png
--------------------------------------------------------------------------------
/src/assets/img/storage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/storage.png
--------------------------------------------------------------------------------
/src/pages/component/icon/index.css:
--------------------------------------------------------------------------------
1 | .box {
2 | padding: 20rpx;
3 | justify-content: center;
4 | }
--------------------------------------------------------------------------------
/src/assets/img/animation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/animation.png
--------------------------------------------------------------------------------
/src/assets/img/api_active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/api_active.png
--------------------------------------------------------------------------------
/src/assets/img/api_tabbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/api_tabbar.png
--------------------------------------------------------------------------------
/src/assets/img/back_home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/back_home.png
--------------------------------------------------------------------------------
/src/assets/img/component.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/component.png
--------------------------------------------------------------------------------
/src/assets/img/container.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/container.png
--------------------------------------------------------------------------------
/src/assets/img/extension.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/extension.png
--------------------------------------------------------------------------------
/src/assets/img/monitoring.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/monitoring.png
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import { runApp } from 'rax-app';
2 | import appConfig from './app.json';
3 |
4 | runApp(appConfig);
5 |
--------------------------------------------------------------------------------
/src/assets/img/component_active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/component_active.png
--------------------------------------------------------------------------------
/src/assets/img/component_tabbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/component_tabbar.png
--------------------------------------------------------------------------------
/src/assets/img/api_active_tabbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/api_active_tabbar.png
--------------------------------------------------------------------------------
/src/assets/img/component_active_tabbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raxjs/go-rax/HEAD/src/assets/img/component_active_tabbar.png
--------------------------------------------------------------------------------
/src/pages/component/embed/index.css:
--------------------------------------------------------------------------------
1 | .container {
2 | flex-direction: row;
3 | cursor: pointer;
4 | padding: 20rpx;
5 | }
6 |
--------------------------------------------------------------------------------
/src/config/platform.js:
--------------------------------------------------------------------------------
1 | export const WEB = 'Web';
2 | export const WEEX = 'Weex';
3 | export const ALI_MINI_APP = 'miniapp';
4 | export const WECHAT = 'WECHAT';
5 |
--------------------------------------------------------------------------------
/src/pages/component/countdown/index.css:
--------------------------------------------------------------------------------
1 | .root {
2 | width: 680rpx;
3 | }
4 |
5 | .container {
6 | border: 2rpx solid #dddddd;
7 | padding: 20rpx;
8 | margin: 20rpx;
9 | }
--------------------------------------------------------------------------------
/src/utils/inMiniApp.js:
--------------------------------------------------------------------------------
1 | import { isMiniApp, isWeChatMiniProgram } from 'universal-env';
2 |
3 | const inMiniApp = isMiniApp || isWeChatMiniProgram;
4 | export default inMiniApp;
5 |
--------------------------------------------------------------------------------
/src/pages/api/animation/index.css:
--------------------------------------------------------------------------------
1 | .animationWrap {
2 | padding: 20rpx;
3 | }
4 |
5 | .animationDemo {
6 | background-color: #49a9ee;
7 | width: 200rpx;
8 | height: 200rpx;
9 | }
--------------------------------------------------------------------------------
/src/pages/api/transition/index.css:
--------------------------------------------------------------------------------
1 | .animationWrap {
2 | padding: 20rpx;
3 | }
4 |
5 | .animationDemo {
6 | background-color: #49a9ee;
7 | width: 200rpx;
8 | height: 200rpx;
9 | }
--------------------------------------------------------------------------------
/src/pages/component/video/index.css:
--------------------------------------------------------------------------------
1 |
2 | .section {
3 | background-color: #ffffff;
4 | margin: 32rpx;
5 | font-size: 32rpx;
6 | }
7 |
8 | .button {
9 | color: #1890ff;
10 | cursor: pointer;
11 | }
--------------------------------------------------------------------------------
/src/pages/component/image/index.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 20rpx;
3 | }
4 | .base {
5 | width: 100rpx;
6 | height: 100rpx;
7 | }
8 |
9 | .gif {
10 | height: 200rpx;
11 | width: 350rpx;
12 | }
13 |
--------------------------------------------------------------------------------
/src/pages/component/picture/index.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 20rpx;
3 | }
4 | .base {
5 | width: 100rpx;
6 | height: 100rpx;
7 | }
8 |
9 | .gif {
10 | height: 200rpx;
11 | width: 350rpx;
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/SectionContainer/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 |
3 | import View from 'rax-view';
4 |
5 | export default function SectionContainer({ children }) {
6 | return {children};
7 | }
8 |
--------------------------------------------------------------------------------
/src/pages/component/view/index.css:
--------------------------------------------------------------------------------
1 | .container {
2 | flex-direction: row;
3 | cursor: pointer;
4 | padding: 20rpx;
5 | }
6 |
7 | .box {
8 | width: 200rpx;
9 | height: 300rpx;
10 | }
11 |
12 | .columnLayout {
13 | flex-direction: column;
14 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | *~
4 | *.swp
5 | *.log
6 |
7 | .DS_Store
8 | .idea/
9 | .temp/
10 |
11 | build/
12 | dist/
13 | lib/
14 | coverage/
15 | node_modules/
16 |
17 | template.yml
18 |
--------------------------------------------------------------------------------
/src/pages/api/getElementById/index.css:
--------------------------------------------------------------------------------
1 | .defaultInput {
2 | height: 60rpx;
3 | color: #000000a6;
4 | background-color: #fff;
5 | background-image: none;
6 | border: 2rpx solid #d9d9d9;
7 | border-radius: 4;
8 | transition: all .3s;
9 | margin: 20rpx;
10 | }
--------------------------------------------------------------------------------
/src/pages/component/text/index.css:
--------------------------------------------------------------------------------
1 |
2 | .container {
3 | padding: 20rpx;
4 | }
5 |
6 | .textBlock {
7 | font-weight: '500';
8 | color: 'blue';
9 | }
10 |
11 | .logBox {
12 | padding: 20rpx;
13 | margin: 10rpx;
14 | border-width: 2rpx;
15 | border-color: '#f0f0f0';
16 | background-color: '#f9f9f9';
17 | }
18 |
--------------------------------------------------------------------------------
/src/pages/component/link/index.css:
--------------------------------------------------------------------------------
1 | .container {
2 | justify-content: center;
3 | align-items: center;
4 | padding: 20rpx 0;
5 | }
6 |
7 | .link {
8 | color: #1890ff;
9 | text-decoration: none;
10 | }
11 |
12 | .box {
13 | margin: 20rpx;
14 | padding: 20rpx;
15 | border: 2rpx solid #dddddd;
16 | border-radius: 6rpx;
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/Container/index.css:
--------------------------------------------------------------------------------
1 | .app {
2 | flex: 1;
3 | background-color: #ffffff;
4 | overflow: auto;
5 | }
6 |
7 | .descBox {
8 | padding: 36rpx;
9 | background-color: #ffb006;
10 | }
11 |
12 | .moduleTitle {
13 | font-size: 36rpx;
14 | color: #ffffff;
15 | }
16 |
17 | .desc {
18 | font-size: 24rpx;
19 | color: #ffffff;
20 | }
21 |
--------------------------------------------------------------------------------
/src/pages/component/waterfall/index.css:
--------------------------------------------------------------------------------
1 | .app {
2 | flex: 1;
3 | background-color: #ffffff;
4 | overflow: auto;
5 | }
6 |
7 | .descBox {
8 | padding: 36rpx;
9 | background-color: #3399FF;
10 | }
11 |
12 | .moduleTitle {
13 | font-size: 36rpx;
14 | color: #ffffff;
15 | }
16 |
17 | .desc {
18 | font-size: 24rpx;
19 | color: #ffffff;
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/SectionOperText/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import Text from 'rax-text';
3 |
4 | export default function SectionOperText({ children }) {
5 | const operTestStyle = {
6 | fontSize: '30rpx',
7 | color: '#ffb006',
8 | };
9 | return (
10 | {children}
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/SectionTextItem/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 |
3 | import Text from 'rax-text';
4 |
5 | export default function SectionTextItem({ children }) {
6 | const testItemStyle = {
7 | padding: '20rpx',
8 | };
9 | return (
10 |
13 | {children}
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/SectionTitle/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 |
3 | import Text from 'rax-text';
4 |
5 | export default function SectionTitle({ children }) {
6 | const titleStyle = {
7 | color: '#1D2C41',
8 | backgroundColor: '#F2F3F4',
9 | padding: '20rpx',
10 | width: '750rpx',
11 | display: 'flex'
12 | };
13 | return (
14 |
17 | {children}
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/SectionItem/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 |
3 | import View from 'rax-view';
4 |
5 | export default function SectionItem({ children }) {
6 | return (
7 |
17 | {children}
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/pages/component/textinput/index.css:
--------------------------------------------------------------------------------
1 |
2 | .container {
3 | margin: 20rpx;
4 | }
5 | .default {
6 | height: 60rpx;
7 | color: #000000a6;
8 | background-color: #fff;
9 | background-image: none;
10 | border: 2rpx solid #d9d9d9;
11 | border-radius: 4rpx;
12 | transition: all .3s;
13 | }
14 |
15 | .multiline {
16 | height: 150rpx;
17 | }
18 |
19 | .eventLabel {
20 | margin: 3rpx;
21 | font-size: 24rpx;
22 | }
23 | .hashtag {
24 | color: "#1890ff";
25 | margin: 10rpx;
26 | font-weight: "bold";
27 | }
--------------------------------------------------------------------------------
/src/pages/component/modal/index.css:
--------------------------------------------------------------------------------
1 | .operItem {
2 | margin: 20rpx 0;
3 | padding: 20rpx;
4 | background-color: #ffffff;
5 | color: #49a9ee;
6 | cursor: pointer;
7 | }
8 |
9 | .modal {
10 | background-color: #ffffff;
11 | position: absolute;
12 | top: 300rpx;
13 | width: 400rpx;
14 | height: 480rpx;
15 | left: 175rpx;
16 | }
17 |
18 | .img {
19 | width: 400rpx;
20 | height: 400rpx;
21 | flex-shrink: 0;
22 | }
23 |
24 | .close {
25 | border: 2rpx solid #dddddd;
26 | height: 80rpx;
27 | justify-content: center;
28 | align-items: center;
29 | cursor: pointer;
30 | }
--------------------------------------------------------------------------------
/src/components/Section/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useState } from 'rax';
2 | import View from 'rax-view';
3 | import SectionTitle from '../SectionTitle';
4 |
5 | export default function Section({ children, title }) {
6 | const [titleBoxStyle, setTitleBoxStyle] = useState({
7 | backgroundColor: '#ffffff',
8 | fontSize: '32rpx',
9 | position: 'relative',
10 | borderBottom: '2rpx solid #dddddd',
11 | });
12 | return (
13 |
16 | {title}
17 | {children}
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/document/index.jsx:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import { Root, Style, Script } from 'rax-document';
3 |
4 | function Document() {
5 | return (
6 |
7 |
8 |
9 |
10 | universal-app
11 |
12 |
13 |
14 | {/* root container */}
15 |
16 |
17 |
18 |
19 | );
20 | }
21 | export default Document;
22 |
--------------------------------------------------------------------------------
/src/components/SectionOper/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import View from 'rax-view';
3 | import SectionOperText from '../SectionOperText';
4 | import './index.css';
5 |
6 | export default function SectionOper({ children, onClick }) {
7 | return (
8 |
20 | {children}
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/DescHeader/index.css:
--------------------------------------------------------------------------------
1 | .app {
2 | background-color: #04152C;
3 | box-shadow: 0 2 8 #f0f1f2;
4 | flex-direction: row;
5 | justify-content: center;
6 | align-items: center;
7 | }
8 |
9 | .headerBox {
10 | width: 450;
11 | height: 100;
12 | margin: auto;
13 | justify-content: center;
14 | align-items: center;
15 | }
16 |
17 | .backBox {
18 | position: absolute;
19 | left: 16;
20 | width: 48;
21 | height: 100;
22 | justify-content: center;
23 | align-items: center;
24 | }
25 |
26 | .back {
27 | height:36;
28 | width: 36;
29 | cursor: 'pointer';
30 | }
31 |
32 | .title {
33 | font-size: 34;
34 | color: #ffffff;
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/Navigator/index.css:
--------------------------------------------------------------------------------
1 | .view {
2 | background-color: #04152C;
3 | flex-direction: row;
4 | justify-content: center;
5 | align-items: center;
6 | position: relative;
7 | }
8 |
9 | .headerBox {
10 | width: 500rpx;
11 | height: 100rpx;
12 | margin: auto;
13 | justify-content: center;
14 | align-items: center;
15 | }
16 |
17 | .backBox {
18 | position: absolute;
19 | left: 16rpx;
20 | width: 48rpx;
21 | height: 100rpx;
22 | justify-content: center;
23 | align-items: center;
24 | }
25 |
26 | .backImg {
27 | height: 40rpx;
28 | width: 40rpx;
29 | cursor: 'pointer';
30 | }
31 |
32 | .title {
33 | font-size: 34rpx;
34 | color: #ffffff;
35 | }
36 |
--------------------------------------------------------------------------------
/src/pages/component/slider/index.css:
--------------------------------------------------------------------------------
1 | .slider {
2 | width: 680rpx;
3 | position: 'relative';
4 | overflow: 'hidden';
5 | height: 500rpx;
6 | background-color: '#cccccc'
7 | }
8 | .itemWrap {
9 | width: 680rpx;
10 | height: 500rpx;
11 | }
12 | .image {
13 | width: 680rpx;
14 | height: 500rpx;
15 | }
16 | .button {
17 | margin-top: 20rpx;
18 | width: 340rpx;
19 | height: 80rpx;
20 | }
21 | .paginationStyle {
22 | position: 'absolute';
23 | width: 680rpx;
24 | height: 40rpx;
25 | bottom: 20rpx;
26 | left: 0;
27 | }
28 |
29 | .operItem {
30 | margin: 20rpx 0;
31 | padding: 20rpx;
32 | background-color: #ffffff;
33 | color: #49a9ee;
34 | cursor: pointer;
35 | }
--------------------------------------------------------------------------------
/src/pages/api/env/index.css:
--------------------------------------------------------------------------------
1 | .app {
2 | flex: 1;
3 | background-color: #f5f5f5;
4 | }
5 |
6 | .section {
7 | background-color: #ffffff;
8 | margin: 32rpx;
9 | font-size: 32rpx;
10 | }
11 |
12 | .sectionTitle {
13 | padding-top: 10rpx;
14 | padding-left: 20rpx;
15 | padding-right: 20rpx;
16 | padding-bottom: 10rpx;
17 | }
18 |
19 | .sectionDemo {
20 | }
21 |
22 | .sectionItem {
23 | border-top: 2rpx solid #dddddd;
24 | flex-direction: row;
25 | height: 100rpx;
26 | }
27 |
28 | .sectionBtn {
29 | flex: 1;
30 | height: 100%;
31 | justify-content: center;
32 | align-items: center;
33 | cursor: pointer;
34 | }
35 |
36 | .sectionBtnDesc {
37 | font-size: 30rpx;
38 | color: #49a9ee;
39 | }
--------------------------------------------------------------------------------
/src/components/TabBar/index.css:
--------------------------------------------------------------------------------
1 | .navbar {
2 | background-color: #ffffff;
3 | width: 750rpx;
4 | height: 100rpx;
5 | flex-direction: row;
6 | box-shadow: 0 -2rpx 8rpx #f0f1f2;
7 | position: fixed;
8 | bottom: 0;
9 | }
10 |
11 | .navbarItem {
12 | flex: 1;
13 | justify-content: center;
14 | align-items: center;
15 | color: #666666;
16 | font-size: 20rpx;
17 | cursor: pointer;
18 | }
19 |
20 | .navbarItemIcon {
21 | width: 50rpx;
22 | height: 50rpx;
23 | }
24 |
25 | .navbarItemBase {
26 | font-size: 20rpx;
27 | }
28 | .navbarItemActive {
29 | color: #ffb006;
30 | }
31 |
32 | .navbarItemBlur {
33 | color: #666666;
34 | }
35 |
36 | .navbarItemInWeb {
37 | transform: scale(0.8);
38 | }
39 |
--------------------------------------------------------------------------------
/src/pages/api/confirm/index.css:
--------------------------------------------------------------------------------
1 | .app {
2 | flex: 1;
3 | background-color: #f5f5f5;
4 | }
5 |
6 | .section {
7 | background-color: #ffffff;
8 | margin: 32rpx;
9 | font-size: 32rpx;
10 | }
11 |
12 | .sectionTitle {
13 | padding-top: 10rpx;
14 | padding-left: 20rpx;
15 | padding-right: 20rpx;
16 | padding-bottom: 10rpx;
17 | }
18 |
19 | .sectionDemo {
20 | }
21 |
22 | .sectionItem {
23 | border-top: 2rpx solid #dddddd;
24 | flex-direction: row;
25 | height: 100rpx;
26 | }
27 |
28 | .sectionBtn {
29 | flex: 1;
30 | height: 100%;
31 | justify-content: center;
32 | align-items: center;
33 | cursor: pointer;
34 | }
35 |
36 | .sectionBtnDesc {
37 | font-size: 30rpx;
38 | color: #49a9ee;
39 | }
--------------------------------------------------------------------------------
/src/pages/api/appstate/index.css:
--------------------------------------------------------------------------------
1 | .app {
2 | flex: 1;
3 | background-color: #f5f5f5;
4 | }
5 |
6 | .section {
7 | background-color: #ffffff;
8 | margin: 32rpx;
9 | font-size: 32rpx;
10 | }
11 |
12 | .sectionTitle {
13 | padding-top: 10rpx;
14 | padding-left: 20rpx;
15 | padding-right: 20rpx;
16 | padding-bottom: 10rpx;
17 | }
18 |
19 | .sectionDemo {
20 | }
21 |
22 | .sectionItem {
23 | border-top: 2rpx solid #dddddd;
24 | flex-direction: row;
25 | height: 100rpx;
26 | }
27 |
28 | .sectionBtn {
29 | flex: 1;
30 | height: 100%;
31 | justify-content: center;
32 | align-items: center;
33 | cursor: pointer;
34 | }
35 |
36 | .sectionBtnDesc {
37 | font-size: 30rpx;
38 | color: #49a9ee;
39 | }
40 |
--------------------------------------------------------------------------------
/src/pages/index-api/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import { isWeex } from 'universal-env';
3 | import Home from '../../components/Home/';
4 | import TabBar from '../../components/TabBar';
5 | import { API } from '../../constants';
6 | import inMiniApp from '../../utils/inMiniApp';
7 |
8 | function getZhCN() {
9 | if (inMiniApp) {
10 | return true;
11 | }
12 | return location && location.href && location.href.indexOf('zh-CN') > -1;
13 | }
14 |
15 | export default function App({ history }) {
16 | const isCN = getZhCN();
17 | return (
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/pages/index/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import { isWeex } from 'universal-env'
3 | import Home from '../../components/Home/';
4 | import TabBar from '../../components/TabBar';
5 | import inMiniApp from '../../utils/inMiniApp';
6 | import { COMPONENT } from '../../constants';
7 |
8 | function getZhCN() {
9 | if (inMiniApp) {
10 | return true;
11 | }
12 | return location && location.href && location.href.indexOf('zh-CN') > -1;
13 | }
14 |
15 | export default function App({ history }) {
16 | const isCN = getZhCN();
17 |
18 | return (
19 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/pages/component/scrollview/index.css:
--------------------------------------------------------------------------------
1 | .sticky {
2 | top: 0;
3 | margin: 7rpx;
4 | height: 64rpx;
5 | position: 'sticky';
6 | color: '#333333';
7 | justify-content: center;
8 | align-items: center;
9 | background-color: '#cccccc';
10 | }
11 | .container {
12 | border: 2rpx solid #dddddd;
13 | margin: 20rpx;
14 | }
15 | .button {
16 | margin: 7rpx;
17 | padding: 5rpx;
18 | align-items: 'center';
19 | background-color: '#eaeaea';
20 | border-radius: 3rpx;
21 | cursor: pointer;
22 | }
23 | .box {
24 | width: 64rpx;
25 | height: 64rpx;
26 | }
27 | .eventLogBox {
28 | padding: 10rpx;
29 | margin: 10rpx;
30 | height: 80rpx;
31 | border-width: 1rpx;
32 | border-color: '#f0f0f0';
33 | background-color: '#f9f9f9';
34 | justify-content: center;
35 | }
36 |
--------------------------------------------------------------------------------
/src/assets/css/common.css:
--------------------------------------------------------------------------------
1 | .app {
2 | flex: 1;
3 | background-color: #f5f5f5;
4 | overflow: auto;
5 | }
6 |
7 | .section {
8 | background-color: #ffffff;
9 | margin: 16 0;
10 | font-size: 32;
11 | position: relative;
12 | }
13 |
14 | .sectionTitle {
15 | padding-top: 10;
16 | padding-left: 20;
17 | padding-right: 20;
18 | padding-bottom: 10;
19 | }
20 |
21 | .sectionDemo {
22 | }
23 |
24 | .sectionItem {
25 | border-top: 2rpx solid #dddddd;
26 | flex-direction: row;
27 | height: 100;
28 | }
29 |
30 | .sectionBtn {
31 | flex: 1;
32 | height: 100%;
33 | justify-content: center;
34 | align-items: center;
35 | cursor: pointer;
36 | }
37 |
38 | .sectionBtnDesc {
39 | font-size: 30;
40 | color: #49a9ee;
41 | }
42 |
43 | .viewCenter {
44 | justify-content: center;
45 | align-items: center;
46 | }
--------------------------------------------------------------------------------
/src/pages/api/toast/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import Toast from 'universal-toast';
3 |
4 | import Container from '../../../components/Container';
5 | import Section from '../../../components/Section';
6 | import SectionItem from '../../../components/SectionItem';
7 | import SectionOper from '../../../components/SectionOper';
8 |
9 | export default function ToastDemo() {
10 | function showToast() {
11 | Toast.show('Success !')
12 | }
13 | return (
14 |
19 |
20 |
21 | Click on the display
22 |
23 |
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Go Rax
2 |
3 | Rax 1.x provides rich components and APIs to help develop multi-end projects quickly. Go Rax is a sample app built with rax 1.x, which is provided to rax developers for reference and learning.
4 |
5 | ## Development
6 |
7 | ```shell
8 | # Install dependencies.
9 | npm install
10 |
11 | # Run the application in development mode.
12 | npm run start
13 |
14 | # Build the application for production into the `build` folder.
15 | npm run build
16 | ```
17 |
18 | ## References
19 |
20 | - [Official site](http://rax.js.org)
21 | - [Official repo](https://github.com/alibaba/rax)
22 |
23 | ## Experience
24 |
25 | 
26 |
27 | ## Screenshot
28 |
29 | 
30 |
31 | ## License
32 |
33 | [MIT](https://opensource.org/licenses/MIT)
34 |
--------------------------------------------------------------------------------
/src/pages/component/refreshcontrol/index.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 20rpx;
3 | border: 2rpx solid #dddddd;
4 | margin: 20rpx;
5 | flex: 1;
6 | }
7 | .button {
8 | margin: 7rpx;
9 | padding: 5rpx;
10 | align-items: 'center';
11 | background-color: '#eaeaea';
12 | border-radius: 3rpx;
13 | }
14 | .box {
15 | width: 64rpx;
16 | height: 64rpx;
17 | }
18 | .eventLogBox {
19 | padding: 10rpx;
20 | margin: 10rpx;
21 | height: 80rpx;
22 | border-width: 1rpx;
23 | border-color: '#f0f0f0';
24 | background-color: '#f9f9f9';
25 | }
26 | .row {
27 | border-color: 'grey';
28 | border-width: 1rpx;
29 | padding: 20rpx;
30 | margin: 5rpx;
31 | }
32 | .text {
33 | align-self: 'center';
34 | color: 'black';
35 | }
36 | .refreshView {
37 | height: 80rpx;
38 | width: 750rpx;
39 | justify-content: 'center';
40 | align-items: 'center';
41 | }
42 | .refreshArrow {
43 | font-size: 30rpx;
44 | color: '#45b5f0';
45 | }
--------------------------------------------------------------------------------
/src/components/Navigator/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 |
3 | import View from 'rax-view';
4 | import Text from 'rax-text';
5 | import Image from 'rax-image';
6 | import Navigate from 'universal-navigate';
7 | import styles from './index.css';
8 |
9 | function backHome() {
10 | Navigate.go({
11 | step: -1,
12 | });
13 | }
14 |
15 | export default function App({ title, desc }) {
16 | return (
17 |
18 |
19 |
28 |
29 |
30 | {title}
31 |
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/Container/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import View from 'rax-view';
3 | import Text from 'rax-text';
4 | import ScrollView from 'rax-scrollview';
5 | import styles from './index.css';
6 | import { isMiniApp, isWeChatMiniProgram } from 'universal-env';
7 |
8 | import Navigator from '../Navigator';
9 |
10 | export default function App({ children, title, moduleTitle, desc }) {
11 | if (isMiniApp) {
12 | my.setNavigationBar({
13 | title: moduleTitle
14 | });
15 | }
16 | if (isWeChatMiniProgram) {
17 | wx.setNavigationBarTitle({
18 | title: moduleTitle
19 | });
20 | }
21 | return (
22 |
23 | {isMiniApp || isWeChatMiniProgram ? null : }
24 |
25 |
26 | {moduleTitle}
27 | {desc}
28 |
29 | {children}
30 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/DescHeader/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 |
3 | import View from 'rax-view';
4 | import Text from 'rax-text';
5 | import Image from 'rax-image';
6 | import Navigate from 'universal-navigate';
7 | import styles from './index.css';
8 |
9 | function isHideHome() {
10 | return location.href.indexOf('hide_home') > -1;
11 | }
12 |
13 | function backHome() {
14 | Navigate.pop();
15 | }
16 |
17 | export default function DescHeader({ title }) {
18 | const hideHome = isHideHome();
19 | return (
20 |
21 |
22 | {!hideHome && (
23 |
31 | )}
32 |
33 |
34 | {title}
35 |
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/pages/component/embed/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import Embed from 'rax-embed';
3 | import View from 'rax-view';
4 | import styles from './index.css';
5 |
6 | import Container from '../../../components/Container';
7 | import Section from '../../../components/Section';
8 |
9 | export default function App() {
10 | const urlParam = {
11 | paramOne: 123,
12 | paramTwo: 456,
13 | };
14 | return (
15 | and in the web container via
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/pages/component/recyclerview/index.css:
--------------------------------------------------------------------------------
1 | .root {
2 | width: 680rpx;
3 | }
4 | .sticky {
5 | position: 'sticky';
6 | top: 0;
7 | width: 750rpx;
8 | background-color: '#cccccc'
9 | }
10 | .container {
11 | padding: 20rpx;
12 | border: 2rpx solid #dddddd;
13 | margin: 20rpx;
14 | height: 600rpx;
15 | }
16 | .button {
17 | margin: 7rpx;
18 | padding: 5rpx;
19 | align-items: 'center';
20 | background-color: '#eaeaea';
21 | border-radius: 3rpx;
22 | }
23 | .box {
24 | width: 64rpx;
25 | height: 64rpx;
26 | }
27 | .eventLogBox {
28 | padding: 10rpx;
29 | margin: 10rpx;
30 | height: 80rpx;
31 | border-width: 1rpx;
32 | border-color: '#f0f0f0';
33 | background-color: '#f9f9f9';
34 | }
35 | .row {
36 | border-color: 'grey';
37 | border-width: 1rpx;
38 | padding: 20rpx;
39 | margin: 5rpx;
40 | }
41 | .text {
42 | align-self: 'center';
43 | color: 'black';
44 | }
45 | .refreshView {
46 | height: 80rpx;
47 | width: 750rpx;
48 | justify-content: 'center';
49 | align-items: 'center';
50 | }
51 | .refreshArrow {
52 | font-size: 30rpx;
53 | color: '#45b5f0';
54 | }
--------------------------------------------------------------------------------
/src/pages/component/canvas/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useRef, useEffect } from 'rax';
2 | import Canvas from 'rax-canvas';
3 |
4 | import Container from '../../../components/Container';
5 | import Section from '../../../components/Section';
6 | import inMiniApp from '../../../utils/inMiniApp';
7 |
8 | export default function App() {
9 | const canvasRef = useRef(null);
10 | useEffect(() => {
11 | const context = canvasRef.current.getContext();
12 | inMiniApp
13 | ? context.setFillStyle('#49a9ee')
14 | : (context.fillStyle = '#49a9ee');
15 | context.fillRect(0, 0, 300, 300);
16 | context.draw();
17 | }, []);
18 | return (
19 |
24 |
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/pages/api/env/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import { isWeb, isWeex, isMiniApp, isWeChatMiniProgram } from 'universal-env';
3 |
4 | import Container from '../../../components/Container';
5 | import Section from '../../../components/Section';
6 | import SectionTextItem from '../../../components/SectionTextItem';
7 |
8 | export default function App() {
9 | return (
10 |
15 |
16 | {String(isWeb)}
17 |
18 |
19 |
20 | {String(isWeex)}
21 |
22 |
23 |
24 | {String(isMiniApp)}
25 |
26 |
27 |
28 | {String(isWeChatMiniProgram)}
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Rax.js
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/pages/api/setNativeProps/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useRef } from 'rax';
2 | import setNativeProps from 'rax-set-native-props';
3 |
4 | import View from 'rax-view';
5 | import Text from 'rax-text';
6 | import commonStyles from '../../assets/css/common.css';
7 |
8 | import DescHeader from '../../components/DescHeader';
9 |
10 | export default function SetNativePropsDemo() {
11 | const textRef = useRef(null);
12 |
13 | function updateStyle() {
14 | setNativeProps(textRef.current, {
15 | style: {
16 | color: '#dddddd',
17 | },
18 | });
19 | }
20 | return (
21 |
22 |
23 |
24 |
25 |
26 | setNativeProps
27 |
28 |
29 |
30 |
31 |
32 | 修改文字样式
33 |
34 |
35 |
36 |
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/pages/api/device/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import { appName, platform, screenWidth, screenHeight, appVersion } from 'universal-device';
3 |
4 | import Container from '../../../components/Container';
5 | import Section from '../../../components/Section';
6 | import SectionTextItem from '../../../components/SectionTextItem';
7 |
8 | export default function App() {
9 | return (
10 |
15 |
18 |
19 |
22 |
23 |
24 | {screenWidth} px
25 |
26 |
27 |
28 | {screenHeight} px
29 |
30 |
31 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/pages/api/chooseimage/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import chooseImage from 'universal-choose-image';
3 | import alert from 'universal-alert';
4 |
5 | import Container from '../../../components/Container';
6 | import Section from '../../../components/Section';
7 | import SectionItem from '../../../components/SectionItem';
8 | import SectionOper from '../../../components/SectionOper';
9 |
10 | export default function App() {
11 | function handleChoose() {
12 | chooseImage()
13 | .then(res => {
14 | alert({
15 | content: res.data,
16 | buttonText: 'OK'
17 | });
18 | })
19 | .catch((err) => {
20 | alert({
21 | content: JSON.stringify(err),
22 | buttonText: 'OK'
23 | });
24 | });
25 | }
26 |
27 | return (
28 |
33 |
34 |
35 | Select a photo
36 |
37 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/pages/api/getElementById/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import getElementById from 'rax-get-element-by-id';
3 |
4 | import View from 'rax-view';
5 | import Text from 'rax-text';
6 | import Input from 'rax-textinput';
7 | import styles from './index.css';
8 | import commonStyles from '../../assets/css/common.css';
9 |
10 | import DescHeader from '../../components/DescHeader';
11 |
12 | export default function App() {
13 | function focus() {
14 | getElementById('input').focus();
15 | }
16 | return (
17 |
18 |
19 |
20 |
21 | getElementById
22 |
23 |
24 |
29 |
30 |
31 | input focus
32 |
33 |
34 |
35 |
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/pages/api/navigate/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import Navigate from 'universal-navigate';
3 | import Toast from 'universal-toast';
4 | import inMiniApp from '../../../utils/inMiniApp';
5 |
6 | import Container from '../../../components/Container';
7 | import Section from '../../../components/Section';
8 | import SectionItem from '../../../components/SectionItem';
9 | import SectionOper from '../../../components/SectionOper';
10 |
11 | export default function App() {
12 | function navigatePush() {
13 | Navigate.push({
14 | url: !inMiniApp ? 'https://www.taobao.com/' : '/pages/component/view/index',
15 | animated: true, // only supported in Weex
16 | }).then(() => {
17 | Toast.show('Success.');
18 | });
19 | }
20 |
21 | return (
22 |
27 |
28 |
29 | {inMiniApp ? 'Jump to the Home' : 'Jump to the taobao'}
30 |
31 |
32 |
33 | {/*
34 |
35 | Click the jump
36 |
37 | */}
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/pages/api/request/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import request from 'universal-request';
3 | import alert from 'universal-alert';
4 | import inMiniApp from '../../../utils/inMiniApp';
5 | import Container from '../../../components/Container';
6 | import Section from '../../../components/Section';
7 | import SectionItem from '../../../components/SectionItem';
8 | import SectionOper from '../../../components/SectionOper';
9 |
10 | export default function RequestDemo() {
11 |
12 | function handleRequest() {
13 | if (inMiniApp) {
14 | alert({
15 | content: '可以直接查看源码噢',
16 | buttonText: 'OK'
17 | });
18 | return;
19 | }
20 | request({
21 | url: 'https://httpbin.org/post',
22 | method: 'POST',
23 | headers: {
24 | 'Access-Control-Allow-Origin': '*',
25 | },
26 | data: {
27 | test: '1',
28 | },
29 | timeout: 5000,
30 | })
31 | .then(data => {
32 | alert({
33 | content: JSON.stringify(data.data),
34 | });
35 | })
36 | .catch(error => {});
37 | }
38 |
39 | return (
40 |
45 |
46 |
47 | Make a network request
48 |
49 |
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/pages/api/alert/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import alert from 'universal-alert';
3 |
4 | import Container from '../../../components/Container';
5 | import Section from '../../../components/Section';
6 | import SectionItem from '../../../components/SectionItem';
7 | import SectionOper from '../../../components/SectionOper';
8 |
9 | export default function App() {
10 | function getFeedback({ title, content, buttonText }) {
11 | alert({
12 | title,
13 | content,
14 | buttonText,
15 | }).then(() => {
16 | console.log('Success.');
17 | });
18 | }
19 |
20 | const contentOption = {
21 | content: 'content change',
22 | buttonText: 'OK'
23 | };
24 |
25 | const buttonOption = {
26 | content: 'content change',
27 | buttonText: 'good',
28 | };
29 |
30 | return (
31 |
38 |
39 |
40 | getFeedback(contentOption)}>Display content changes
41 |
42 |
43 |
44 |
45 |
46 | getFeedback(buttonOption)}>Display with change button
47 |
48 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/pages/component/icon/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import View from 'rax-view';
3 | import styles from './index.css';
4 |
5 | import Icon, { createIconSet } from 'rax-icon';
6 |
7 | import Container from '../../../components/Container';
8 | import Section from '../../../components/Section';
9 |
10 | const IconFont1 = createIconSet(
11 | {},
12 | 'iconfont',
13 | 'https://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf',
14 | );
15 | const IconFont2 = createIconSet(
16 | {
17 | hello: '\uE60f',
18 | },
19 | 'iconfont',
20 | 'https://at.alicdn.com/t/font_pkm0oq8is8fo5hfr.ttf',
21 | );
22 |
23 | export default function App() {
24 | return (
25 |
32 |
43 |
44 |
49 |
50 |
55 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/api/appstate/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useState, useEffect } from 'rax';
2 | import AppState from 'universal-appstate';
3 | import Toast from 'universal-toast';
4 |
5 | import Container from '../../../components/Container';
6 | import Section from '../../../components/Section';
7 | import SectionTextItem from '../../../components/SectionTextItem';
8 |
9 | export default function App() {
10 | const [state, setState] = useState('background');
11 |
12 | useEffect(() => {
13 | const _handleAppStateChange = nextAppState => {
14 | setState(nextAppState); // active|background
15 | Toast.show(nextAppState);
16 | };
17 |
18 | AppState.addEventListener('change', _handleAppStateChange);
19 | return () => {
20 | // Clean up
21 | AppState.removeEventListener('change', _handleAppStateChange);
22 | };
23 | }, []);
24 |
25 | return (
26 |
33 |
34 |
35 |
36 | {JSON.stringify(AppState.isAvailable)}{' '}
37 |
38 |
39 |
40 |
41 | {AppState.isAvailable ? (
42 |
43 |
44 |
45 | Current App status: {AppState.currentState}
46 |
47 |
48 |
49 | ) : null}
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/pages/api/confirm/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import Confirm from 'universal-confirm';
3 | import alert from 'universal-alert';
4 | import Container from '../../../components/Container';
5 | import View from 'rax-view';
6 | import Section from '../../../components/Section';
7 | import SectionItem from '../../../components/SectionItem';
8 | import SectionOper from '../../../components/SectionOper';
9 |
10 | export default function App() {
11 | function getFeedback({
12 | title,
13 | content,
14 | confirmButtonText,
15 | cancelButtonText,
16 | }) {
17 | Confirm({
18 | title,
19 | content,
20 | confirmButtonText,
21 | cancelButtonText,
22 | }).then(confirm => {
23 | alert({
24 | content: confirm ? 'Confirm' : 'Cancel',
25 | buttonText: 'OK'
26 | });
27 | });
28 | }
29 |
30 | const contentOption = {
31 | content: 'content change',
32 | confirmButtonText: 'OK',
33 | cancelButtonText: 'Cancel',
34 | };
35 |
36 | const buttonOption = {
37 | content: 'button change',
38 | confirmButtonText: 'good',
39 | cancelButtonText: 'Cancel',
40 | };
41 |
42 | return (
43 |
48 |
49 |
50 | getFeedback(contentOption)}>Display content changes
51 |
52 |
53 |
54 |
55 |
56 | getFeedback(buttonOption)}>Display button changes
57 |
58 |
59 |
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/src/pages/api/clipboard/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import Clipboard from 'universal-clipboard';
3 | import alert from 'universal-alert';
4 |
5 | import Container from '../../../components/Container';
6 | import Section from '../../../components/Section';
7 | import SectionItem from '../../../components/SectionItem';
8 | import SectionOper from '../../../components/SectionOper';
9 |
10 | export default function App() {
11 | function readText() {
12 | Clipboard.readText()
13 | .then(text => {
14 | alert({
15 | content: text,
16 | buttonText: 'OK'
17 | });
18 | })
19 | .catch(() => {
20 | alert({
21 | content: 'The web is not currently supported',
22 | buttonText: 'OK'
23 | });
24 | });
25 | }
26 |
27 | function writeText() {
28 | Clipboard.writeText('Hello Rax')
29 | .then(() => {
30 | alert({
31 | content: 'Success write text.',
32 | buttonText: 'OK'
33 | });
34 | })
35 | .catch(() => {
36 | alert({
37 | content: 'WriteText failure.',
38 | buttonText: 'OK'
39 | });
40 | });
41 | }
42 |
43 | return (
44 |
49 |
50 |
51 | Clipboard set 'Hello Rax'
52 |
53 |
54 |
55 |
56 |
57 | Get data from the clipboard
58 |
59 |
60 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/src/pages/component/link/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import Link from 'rax-link';
3 | import View from 'rax-view';
4 | import Text from 'rax-text';
5 | import alert from 'universal-alert';
6 | import styles from './index.css';
7 | import inMiniApp from '../../../utils/inMiniApp';
8 |
9 | import Container from '../../../components/Container';
10 | import Section from '../../../components/Section';
11 |
12 | export default function App() {
13 | return (
14 |
21 |
22 |
23 | {}}
28 | >
29 | {!inMiniApp ? 'Jump to the taobao' : 'Jump to the Home'}
30 |
31 |
32 |
33 |
34 |
35 |
36 | {
41 | alert({
42 | content: 'Link was clicked!',
43 | buttonText: 'OK'
44 | });
45 | }}
46 | >
47 | {!inMiniApp ? 'Add events of press and jump to taobao' : 'Add events of press and jump to Home'}
48 |
49 |
50 |
51 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/pages/component/video/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useState, useEffect } from 'rax';
2 | import Video from 'rax-video';
3 | import View from 'rax-view';
4 | import Text from 'rax-text';
5 | import styles from './index.css';
6 |
7 | import Container from '../../../components/Container';
8 | import Section from '../../../components/Section';
9 |
10 | const videoSource =
11 | 'https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4';
12 | export default function VideoDemo() {
13 | const [play, setPlay] = useState(false);
14 | const [playStatus, setPlayStatus] = useState(play ? 'play' : 'pause');
15 | useEffect(() => {
16 | setPlayStatus(play ? 'play' : 'pause');
17 | }, [play]);
18 | return (
19 |
24 |
33 |
34 |
35 |
36 | setPlay(!play)}>
37 | {playStatus}
38 |
39 |
44 |
45 |
46 |
47 |
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "universal-app",
3 | "scripts": {
4 | "build": "build-scripts build",
5 | "start": "build-scripts start"
6 | },
7 | "dependencies": {
8 | "driver-universal": "^3.0.0",
9 | "history": "^4.9.0",
10 | "rax": "^1.0.13",
11 | "rax-app": "^2.0.0",
12 | "rax-canvas": "^2.0.0",
13 | "rax-children": "^1.0.0",
14 | "rax-clone-element": "^1.0.0",
15 | "rax-countdown": "^1.0.0",
16 | "rax-create-portal": "^1.0.0",
17 | "rax-document": "^0.1.1",
18 | "rax-embed": "^1.0.0",
19 | "rax-find-dom-node": "^1.0.0",
20 | "rax-get-element-by-id": "^1.0.0",
21 | "rax-icon": "^1.0.0",
22 | "rax-image": "^2.0.0",
23 | "rax-link": "^1.1.0",
24 | "rax-modal": "^1.0.0",
25 | "rax-parallax": "^1.0.0",
26 | "rax-picture": "^2.0.0",
27 | "rax-recyclerview": "^1.0.0",
28 | "rax-refreshcontrol": "^1.0.0",
29 | "rax-scrollview": "^3.0.0",
30 | "rax-set-native-props": "^1.0.0",
31 | "rax-slider": "^2.0.0",
32 | "rax-text": "^1.1.1",
33 | "rax-textinput": "^1.1.1",
34 | "rax-unmount-component-at-node": "^1.0.0",
35 | "rax-video": "^1.1.1",
36 | "rax-view": "^1.0.0",
37 | "rax-waterfall": "^1.0.0",
38 | "universal-alert": "^1.0.1",
39 | "universal-animation": "^1.0.2",
40 | "universal-appstate": "^0.7.0",
41 | "universal-asyncstorage": "^1.0.1",
42 | "universal-choose-image": "^1.0.0",
43 | "universal-clipboard": "^1.0.0",
44 | "universal-confirm": "^1.0.1",
45 | "universal-device": "^2.0.0",
46 | "universal-easing": "^0.6.5",
47 | "universal-env": "^3.0.0",
48 | "universal-navigate": "^1.0.1",
49 | "universal-request": "^1.0.3",
50 | "universal-toast": "^1.0.2",
51 | "universal-transition": "^1.0.1",
52 | "url-parse": "^1.4.7",
53 | "rax-pwa": "^2.0.0"
54 | },
55 | "devDependencies": {
56 | "@alib/build-scripts": "^0.1.10",
57 | "build-plugin-rax-app": "^4.0.0"
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/pages/api/transition/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useRef, useState } from 'rax';
2 | import transition from 'universal-transition';
3 | import inMiniApp from '../../../utils/inMiniApp';
4 |
5 | import View from 'rax-view';
6 | import styles from './index.css';
7 |
8 | import Container from '../../../components/Container';
9 | import Section from '../../../components/Section';
10 | import SectionItem from '../../../components/SectionItem';
11 | import SectionOper from '../../../components/SectionOper';
12 |
13 | let findDOMNode;
14 | if (!inMiniApp) {
15 | findDOMNode = require('rax-find-dom-node').default;
16 | }
17 |
18 | export default function App() {
19 | const [transitionInfo, setTransitionInfo] = useState({});
20 | const animationRef = useRef();
21 |
22 | const changeWidth = width => {
23 | const transitionCall = transition(
24 | inMiniApp ? null : findDOMNode(animationRef.current),
25 | {
26 | width,
27 | },
28 | {
29 | timingFunction: 'ease',
30 | delay: 0,
31 | duration: 1000,
32 | },
33 | () => {
34 | // timing end
35 | },
36 | );
37 | inMiniApp && setTransitionInfo(transitionCall.export());
38 | };
39 |
40 | return (
41 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | changeWidth('500rpx')}>Increase the width
55 | changeWidth('100rpx')}>Reduce the width
56 |
57 |
58 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/src/pages/component/textinput/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useState } from 'rax';
2 | import View from 'rax-view';
3 | import styles from './index.css';
4 | import TextInput from 'rax-textinput';
5 |
6 | import Container from '../../../components/Container';
7 | import Section from '../../../components/Section';
8 |
9 | export default function TextInputDemo() {
10 | const [value, setValue] = useState('');
11 | const [multiText, setMultiText] = useState('');
12 |
13 | return (
14 |
21 |
26 |
27 |
32 |
33 |
38 |
39 |
48 |
49 |
54 |
55 |
66 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/src/pages/component/recyclerview/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useRef } from 'rax';
2 | import View from 'rax-view';
3 | import Text from 'rax-text';
4 | import styles from './index.css';
5 | import RecyclerView from 'rax-recyclerview';
6 |
7 | import Container from '../../../components/Container';
8 | import Section from '../../../components/Section';
9 |
10 | function Thumb() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 | const THUMBS = [];
20 | for (let i = 0; i < 20; i++) THUMBS.push(i);
21 | let createThumbRow = (val, i) => ;
22 |
23 | export default function App() {
24 | const scrollView = useRef(null);
25 | return (
26 |
33 |
34 |
35 |
36 | alert('reach end')}
39 | style={{
40 | height: 500,
41 | }}
42 | >
43 |
44 | Sticky view is not header
45 |
46 |
47 |
48 |
49 | Sticky view must in header root
50 |
51 |
52 |
53 | {THUMBS.map(createThumbRow)}
54 |
55 |
56 | scrollView.current.scrollTo({ y: 0 })}
59 | >
60 | Scroll to top
61 |
62 |
63 |
64 |
65 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/Home/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useState, useEffect } from 'rax';
2 |
3 | import View from 'rax-view';
4 | import Text from 'rax-text';
5 | import Image from 'rax-image';
6 | import ScrollView from 'rax-scrollview';
7 | import MenuList from './components/MenuList';
8 | import { isWeex } from 'universal-env';
9 |
10 | import { basicComponentList } from '../../config/component';
11 | import { APIList } from '../../config/api';
12 | import { COMPONENT } from '../../constants';
13 |
14 | import styles from './index.css';
15 |
16 | export default function App({ isCN, activeTab, history }) {
17 | const logoSource = {
18 | uri: 'https://gw.alicdn.com/tfs/TB11oXVXRGE3KVjSZFhXXckaFXa-149-148.png',
19 | };
20 | const [list, setList] = useState([]);
21 |
22 | useEffect(() => {
23 | setList(activeTab === COMPONENT ? basicComponentList : APIList);
24 | }, [activeTab]);
25 |
26 | return (
27 |
28 |
29 |
30 | Go Rax
31 |
32 |
33 |
34 | {list.map(listItem => {
35 | const iconSource = {
36 | uri: listItem.icon,
37 | };
38 | return (
39 |
40 |
41 |
48 |
49 | {isCN ? listItem.type : listItem.typeEn}
50 |
51 |
52 |
53 |
59 |
60 |
61 | );
62 | })}
63 |
64 |
65 |
66 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/src/pages/component/modal/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useState, useEffect } from 'rax';
2 | import Modal from 'rax-modal';
3 | import View from 'rax-view';
4 | import Text from 'rax-text';
5 | import Image from 'rax-image';
6 | import styles from './index.css';
7 |
8 | import Container from '../../../components/Container';
9 | import Section from '../../../components/Section';
10 | import SectionOper from '../../../components/SectionOper';
11 |
12 | export default function ModalDemo() {
13 | const [visible, setVisible] = useState(false);
14 | const [maskCanBeClick, setMaskCanBeClick] = useState(true);
15 | const [delay, setDelay] = useState(0);
16 | useEffect(() => {
17 | setVisible(true);
18 | }, [maskCanBeClick, delay]);
19 | return [
20 |
27 |
30 |
31 |
32 |
33 | {maskCanBeClick ? 'Cancel' : 'Open'} click on change
34 |
35 |
36 |
37 |
38 |
39 | {delay ? 'Open Modal delay' : 'Reset delay'}
40 |
41 |
42 | ,
43 | {
47 | setVisible(false);
48 | }}
49 | onShow={() => {
50 | setVisible(true);
51 | }}
52 | maskCanBeClick={maskCanBeClick}
53 | contentStyle={styles.modal}
54 | >
55 |
61 | setVisible(false)}>
62 | Close
63 |
64 | ,
65 | ];
66 | }
67 |
--------------------------------------------------------------------------------
/src/components/Home/components/MenuList.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import View from 'rax-view';
3 | import Text from 'rax-text';
4 | import Image from 'rax-image';
5 | import styles from '../index.css';
6 |
7 | import { isWeb, isWeex, isMiniApp, isWeChatMiniProgram } from 'universal-env';
8 | import { WEB, WEEX, ALI_MINI_APP, WECHAT } from '../../../config/platform';
9 |
10 | export default function({ list, isCN, history}) {
11 | const arrowsSource = {
12 | uri:
13 | 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAaCAYAAAC+aNwHAAAAAXNSR0IArs4c6QAAAdxJREFUOBGlVT1Lw1AUbSSBdMnQf9ChU6GFtr9AEMFBiouDuOikoGixiGgRSi2i1KJTR0fHbuLi5mRbcO7QnyAIQjCSek7ghtc0DQm+5d537z0n97yvpFIYg8GgMxqNavSTjqXhcNgCqOa6bgf+eWICABwBTafTFkiuZB7HaiyChAZMUwCapnXL5XIsSR4BgWyfHQgJbA8k+yCbKrE51ydgBp2cwbSlCuDHUqm0C+tKLGhnCJjEbpxiQa+lEOAnkGzD/kpMtXMETEJOHXJulMJ+Op3ezOfzP0rMc5eCAc6h/RamruSqtm33J5OJqcQ8N7QDKeLh4vmQOWS86rq+XiwWvyUW2oEkof0OoGOZQ9ay4zgv4/HYklhkB1KE3TmEfy9zkL4bhrFaKBQ+YxEQCDkHkPOgkHyAaCVSghRH2VgdREnQo9iZw5k4wuJ1lbo3y7LWcrncF2OREriNKpjbyMUTMAkWSkDbJ8jzQHkD4OdMJrORzWZtidGGdsCjjJwPht83TbMaBJNgroOkl2mmA17nwE3kdd5C+6E3kR34BHxQMPffAvg9gHcAXvgW+AT4cgOr7b9GAHUrlcoebORr5BHgy5dwmpxwANSO+x6ynhIMOhwAXwCc+Gn/14/lDyH1t+arhvp8AAAAAElFTkSuQmCC',
14 | };
15 | function navigateTo(path) {
16 | history.push('/' + path);
17 | }
18 |
19 | function showItem(item) {
20 | const { supported } = item;
21 | if (supported) {
22 | if(isWeb) {
23 | return supported.includes(WEB);
24 | }
25 | if(isWeex) {
26 | return supported.includes(WEEX);
27 | }
28 | if(isMiniApp) {
29 | return supported.includes(ALI_MINI_APP);
30 | }
31 | if (isWeChatMiniProgram) {
32 | return supported.includes(WECHAT);
33 | }
34 | return false;
35 | }
36 | return true;
37 | }
38 | return (
39 | list.map(item => {
40 | const show = showItem(item);
41 | return navigateTo(item.path)}
46 | >
47 |
48 |
49 | {isCN ? item.name : item.nameEn}
50 |
51 | {isCN ? {item.nameEn} : null}
52 |
53 |
60 |
61 | })
62 | );
63 | }
64 |
--------------------------------------------------------------------------------
/src/pages/component/text/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import View from 'rax-view';
3 | import Text from 'rax-text';
4 | import styles from './index.css';
5 |
6 | import Container from '../../../components/Container';
7 | import Section from '../../../components/Section';
8 |
9 | export default function App() {
10 | return (
11 |
18 |
19 |
28 | Text
29 | mixed
34 |
35 |
36 |
37 |
38 |
39 | Single line text exceeds truncated text. Single line text exceeds
45 | truncated text. Single line text exceeds truncated text.
46 |
47 |
48 |
49 |
50 |
51 | Multiline text exceeds truncated text, exceeds truncated text,
57 | exceeds truncated text, exceeds truncated text. Multiline text
58 | exceeds truncated text, exceeds truncated text, exceeds truncated
59 | text, exceeds truncated text.
60 |
61 |
62 |
63 |
64 |
65 | Text underline
66 | Not underlined
67 | Text strikethrough
68 |
69 |
70 |
71 |
72 |
73 | Line height of 120rem, multi - line folding effect of this text.
74 |
75 |
76 |
77 | );
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/Home/index.css:
--------------------------------------------------------------------------------
1 | .app {
2 | background-color: #f5f5f5;
3 | flex-direction: column;
4 | flex: 1;
5 | min-height: 100vh
6 | }
7 |
8 | .sticky {
9 | position: -webkit-sticky;
10 | position: sticky;
11 | top: 0rpx;
12 | }
13 |
14 | .banner {
15 | display: flex;
16 | flex-direction: row;
17 | background-color: #ffffff;
18 | height: 100rpx;
19 | justify-content: center;
20 | align-items: center;
21 | box-shadow: 0rpx 2rpx 8rpx #f0f1f2;
22 | }
23 |
24 | .logo {
25 | margin-right: 20rpx;
26 | width: 60rpx;
27 | height: 60rpx
28 | }
29 |
30 | .title {
31 | font-size: 38rpx;
32 | margin-top: 10rpx;
33 | margin-bottom: 4rpx;
34 | color: #000000;
35 | font-weight: bold;
36 | font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI',
37 | 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
38 | Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
39 | 'Segoe UI Symbol', sans-serif;
40 | }
41 |
42 | .listWrap {
43 | flex: 1;
44 | padding: 30rpx 30rpx 150rpx 30rpx;
45 | }
46 |
47 | .listGroup {
48 | background-color: #ffffff;
49 | margin-bottom: 30rpx;
50 | border-radius: 6rpx;
51 | box-shadow: 0 2rpx 8rpx #f0f1f2;
52 | }
53 |
54 | .listGroupItem {
55 | flex-direction: row;
56 | align-items: center;
57 | padding: 16rpx;
58 | }
59 |
60 | .listGroupTitle {
61 | font-size: 32rpx;
62 | font-weight: bold;
63 | margin-left: 8rpx;
64 | }
65 |
66 | .listGroupBody {
67 | }
68 |
69 | .itemBox {
70 | display: flex;
71 | height: 80rpx;
72 | padding-left: 36rpx;
73 | padding-right: 16rpx;
74 | flex-direction: row;
75 | justify-content: center;
76 | align-items: center;
77 | border-bottom: 2rpx solid #dddddd;
78 | cursor: pointer;
79 | }
80 |
81 | .listItemContent {
82 | flex-direction: row;
83 | align-items: center;
84 | flex: 1;
85 | }
86 |
87 | .listItemName {
88 | margin-right: 8rpx;
89 | font-size: 28rpx;
90 | }
91 |
92 | .listItemBrief {
93 | color: #cccccc;
94 | font-size: 28rpx;
95 | }
96 |
97 | .navbar {
98 | background-color: #ffffff;
99 | width: 750rpx;
100 | height: 100rpx;
101 | flex-direction: row;
102 | box-shadow: 0 -2rpx 8rpx #f0f1f2;
103 | position: fixed;
104 | bottom: 0
105 | }
106 |
107 | .navbarItem {
108 | flex: 1;
109 | justify-content: center;
110 | align-items: center;
111 | color: #666666;
112 | font-size: 20rpx;
113 | cursor: pointer;
114 | }
115 |
116 | .navbarItemIcon {
117 | width: 50rpx;
118 | height: 50rpx
119 | }
120 |
121 | .navbarItemBase {
122 | font-size: 20rpx;
123 | }
124 | .navbarItemActive {
125 | color: #ffb006;
126 | }
127 |
128 | .navbarItemBlur {
129 | color: #666666;
130 | }
131 |
132 | .navbarItemInWeb {
133 | transform: scale(0.8);
134 | }
135 |
--------------------------------------------------------------------------------
/src/pages/component/image/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import View from 'rax-view';
3 | import Image from 'rax-image';
4 | import styles from './index.css';
5 | import Container from '../../../components/Container';
6 | import Section from '../../../components/Section';
7 |
8 | const image2 = {
9 | uri: 'https://gw.alicdn.com/tfs/TB11oXVXRGE3KVjSZFhXXckaFXa-149-148.png',
10 | };
11 |
12 | const gifImage = {
13 | uri: 'https://gw.alicdn.com/tfs/TB1VEmHbubviK0jSZFNXXaApXXa-201-99.gif',
14 | };
15 |
16 | const base64Image = {
17 | uri:
18 | 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABICAMAAAB8+nPGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABOUExURUdwTP+9APKhBvywAP6yAeCTDfOcCB8XAv+8AeydCvijBu+IEP62AP+7AO2GEfCMD//AAOqEFP6zAf+sAP+lAP+aAPWgC/mqB/KWDu+NEv8j1X0AAAAQdFJOUwD1Q5njE2AH/yh8x7rfp+lHis5OAAACyElEQVRYw62Xi5KrIBBEowYQ1Aj4iP7/j94BfIARHbzbSbZC1XLS0wOor1cg/voT0epvQJV6BiLBiBGlHoG4qvKgLPUM9DHT8nCs1CcZ1Np5FWVbPA5EEtNRi1pqZ5JWPQLlalMriIlLPQIJ5Utw7g1YYsyeZn9MWcqqCznz7IOecYAxW22J5Q84s3UzT/MEWlAtT8/HWbGUaRpHh0IvbLq58SnAAc0J3ec+xtU0On3hNeG7Xx3NOBBQjMATxS/o2TMzjR5Gf/WIbBr7hNGEFK3LLxJEqgNldBQDMZxSv1FNY+TjihqXojw3JWBAb1TTGKPteU2WIqXUBY7DiGin0cfYZFaMlBkyaxDV+rtGo13CKwVUIJc1G81/Q6ZbwtbNipENbjVWWu4CWhm6gcIwLaODvBOCw4de3nNuO98O+h4j3+yupKFEYGR93aUhVlNWN8H4Mp4iipE140UmUW0nwzB0sTrMyiz24cVyFoCJJszh9xnPdndRzHCFcWcpWTlZFJNfYlwafGtkHuNUlxhZwLy9KDuMdPsSIxtRlH7rLmpCLeKlSBZbNFcN/1mQEcyQhpHnGLMR4N3/pxtuvPTh1sxolppNDgxjR4fGRRbtPzvfCT1w+j4IJzdHfBPZHOeY3toJwzFrjIV7eynX/MBpv60X+Oggx+Wyw4vGPyYEi1BetYP0oZ31jtRMIzkVohCUMxalvD79qlKeHk8sVOzk2zBByPTnqgqEi6NvxwR2spQbdtupcztFGibvz+3IPAnDNy8HO1nSAw2B+esr5DRJdixheXcaf408rr9ug8CnfMqhluAgIPmQw7tA+inne8Vp0P0quitOxp9UpX84EvvY+DaztffnwKkJslc7RLtvxzMPdUsMc82NcKetFSv5wJBY5zuG/X68FxQoOxtj05HT3FdG9Zl+rnS3va/fZ8rKUPcRMZxQz0JI0D8nxpejbxWbygAAAABJRU5ErkJggg==',
19 | };
20 |
21 | export default function App() {
22 | return (
23 |
30 |
35 |
36 |
49 |
50 |
55 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/component/picture/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import View from 'rax-view';
3 | import Picture from 'rax-picture';
4 | import styles from './index.css';
5 | import Container from '../../../components/Container';
6 | import Section from '../../../components/Section';
7 |
8 | const image2 = {
9 | uri: 'https://gw.alicdn.com/tfs/TB11oXVXRGE3KVjSZFhXXckaFXa-149-148.png',
10 | };
11 |
12 | const gifImage = {
13 | uri: 'https://gw.alicdn.com/tfs/TB1VEmHbubviK0jSZFNXXaApXXa-201-99.gif',
14 | };
15 |
16 | const base64Image = {
17 | uri:
18 | 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABICAMAAAB8+nPGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABOUExURUdwTP+9APKhBvywAP6yAeCTDfOcCB8XAv+8AeydCvijBu+IEP62AP+7AO2GEfCMD//AAOqEFP6zAf+sAP+lAP+aAPWgC/mqB/KWDu+NEv8j1X0AAAAQdFJOUwD1Q5njE2AH/yh8x7rfp+lHis5OAAACyElEQVRYw62Xi5KrIBBEowYQ1Aj4iP7/j94BfIARHbzbSbZC1XLS0wOor1cg/voT0epvQJV6BiLBiBGlHoG4qvKgLPUM9DHT8nCs1CcZ1Np5FWVbPA5EEtNRi1pqZ5JWPQLlalMriIlLPQIJ5Utw7g1YYsyeZn9MWcqqCznz7IOecYAxW22J5Q84s3UzT/MEWlAtT8/HWbGUaRpHh0IvbLq58SnAAc0J3ec+xtU0On3hNeG7Xx3NOBBQjMATxS/o2TMzjR5Gf/WIbBr7hNGEFK3LLxJEqgNldBQDMZxSv1FNY+TjihqXojw3JWBAb1TTGKPteU2WIqXUBY7DiGin0cfYZFaMlBkyaxDV+rtGo13CKwVUIJc1G81/Q6ZbwtbNipENbjVWWu4CWhm6gcIwLaODvBOCw4de3nNuO98O+h4j3+yupKFEYGR93aUhVlNWN8H4Mp4iipE140UmUW0nwzB0sTrMyiz24cVyFoCJJszh9xnPdndRzHCFcWcpWTlZFJNfYlwafGtkHuNUlxhZwLy9KDuMdPsSIxtRlH7rLmpCLeKlSBZbNFcN/1mQEcyQhpHnGLMR4N3/pxtuvPTh1sxolppNDgxjR4fGRRbtPzvfCT1w+j4IJzdHfBPZHOeY3toJwzFrjIV7eynX/MBpv60X+Oggx+Wyw4vGPyYEi1BetYP0oZ31jtRMIzkVohCUMxalvD79qlKeHk8sVOzk2zBByPTnqgqEi6NvxwR2spQbdtupcztFGibvz+3IPAnDNy8HO1nSAw2B+esr5DRJdixheXcaf408rr9ug8CnfMqhluAgIPmQw7tA+inne8Vp0P0quitOxp9UpX84EvvY+DaztffnwKkJslc7RLtvxzMPdUsMc82NcKetFSv5wJBY5zuG/X68FxQoOxtj05HT3FdG9Zl+rnS3va/fZ8rKUPcRMZxQz0JI0D8nxpejbxWbygAAAABJRU5ErkJggg==',
19 | };
20 |
21 | export default function App() {
22 | return (
23 |
30 |
35 |
36 |
49 |
50 |
55 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/TabBar/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useState } from 'rax';
2 | import View from 'rax-view';
3 | import Text from 'rax-text';
4 | import Image from 'rax-image';
5 | import styles from './index.css';
6 | import { isWeb } from 'universal-env';
7 | import { COMPONENT, API } from '../../constants';
8 |
9 | function assignStyles(...styleArr) {
10 | return Object.assign({}, ...styleArr);
11 | }
12 |
13 | export default function TabBar({ isCN, activeTab: initial }) {
14 | const [activeTab, setActiveTab] = useState(initial);
15 | const isAPI = activeTab === API;
16 | const isComponent = activeTab === COMPONENT;
17 |
18 | const componentSource = {
19 | uri: 'https://img.alicdn.com/tfs/TB1q4nTeHj1gK0jSZFOXXc7GpXa-200-200.png',
20 | };
21 | const componentActiveSource = {
22 | uri: 'https://img.alicdn.com/tfs/TB1RBzOeRv0gK0jSZKbXXbK2FXa-200-200.png',
23 | };
24 | const apiSource = {
25 | uri: 'https://gw.alicdn.com/tfs/TB1IVxzcuP2gK0jSZFoXXauIVXa-200-200.png',
26 | };
27 | const apiActiveSource = {
28 | uri: 'https://img.alicdn.com/tfs/TB1g70heebviK0jSZFNXXaApXXa-200-200.png',
29 | };
30 |
31 | return (
32 |
33 |
37 | {isComponent ? (
38 |
39 | ) : (
40 |
41 | )}
42 |
57 | {isCN ? '组件' : 'Component'}
58 |
59 |
60 |
61 | {isAPI ? (
62 |
63 | ) : (
64 |
65 | )}
66 |
81 | API
82 |
83 |
84 |
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/src/pages/api/asyncstorage/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useState } from 'rax';
2 | import AsyncStorage from 'universal-asyncstorage';
3 | import Toast from 'universal-toast';
4 | import TextInput from 'rax-textinput';
5 |
6 | import Container from '../../../components/Container';
7 | import Section from '../../../components/Section';
8 | import SectionItem from '../../../components/SectionItem';
9 | import SectionOper from '../../../components/SectionOper';
10 |
11 | export default function App() {
12 | const [key, setKey] = useState('StorageKey');
13 | const [value, setValue] = useState('Hello World');
14 |
15 | function setItem() {
16 | AsyncStorage.setItem(key, value).then(() => {
17 | Toast.show('Set item success.');
18 | });
19 | }
20 |
21 | function getItem() {
22 | AsyncStorage.getItem(key).then(value => {
23 | Toast.show(value ? value : 'Please store the value first.');
24 | });
25 | }
26 |
27 | function removeItem() {
28 | AsyncStorage.removeItem(key).then(() => {
29 | Toast.show('Remove item success.');
30 | });
31 | }
32 |
33 | function clear() {
34 | AsyncStorage.clear().then(() => {
35 | Toast.show('Clear all success.');
36 | });
37 | }
38 |
39 | function getAllKeys() {
40 | AsyncStorage.getAllKeys().then(res => {
41 | Toast.show(res.join());
42 | });
43 | }
44 |
45 | function onBlurWithKey(e) {
46 | const key = e.target.value;
47 | setKey(key);
48 | }
49 |
50 | function onBlurWithValue(e) {
51 | const value = e.target.value;
52 | setValue(value);
53 | }
54 |
55 | return (
56 |
61 |
62 |
63 |
64 |
65 |
66 | Store {key} data
67 |
68 |
69 |
70 |
71 |
72 | Read {key} data
73 |
74 |
75 |
76 |
77 |
78 | Delete {key} data
79 |
80 |
81 |
82 |
83 |
84 | Clear all storage data
85 |
86 |
87 |
88 |
89 |
90 | Gets all storage keys
91 |
92 |
93 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/src/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "routes": [
3 | {
4 | "path": "/",
5 | "source": "pages/index/index"
6 | },
7 | {
8 | "path": "/index-api",
9 | "source": "pages/index-api/index"
10 | },
11 | {
12 | "path": "/text",
13 | "source": "pages/component/text/index"
14 | },
15 | {
16 | "path": "/canvas",
17 | "source": "pages/component/canvas/index"
18 | },
19 | {
20 | "path": "/view",
21 | "source": "pages/component/view/index"
22 | },
23 | {
24 | "path": "/textinput",
25 | "source": "pages/component/textinput/index"
26 | },
27 | {
28 | "path": "/link",
29 | "source": "pages/component/link/index"
30 | },
31 | {
32 | "path": "/image",
33 | "source": "pages/component/image/index"
34 | },
35 | {
36 | "path": "/picture",
37 | "source": "pages/component/picture/index"
38 | },
39 | {
40 | "path": "/scrollview",
41 | "source": "pages/component/scrollview/index"
42 | },
43 | {
44 | "path": "/waterfall",
45 | "source": "pages/component/waterfall/index",
46 | "targets": ["web", "weex"]
47 | },
48 | {
49 | "path": "/animation",
50 | "source": "pages/api/animation/index"
51 | },
52 | {
53 | "path": "/transition",
54 | "source": "pages/api/transition/index"
55 | },
56 | {
57 | "path": "/toast",
58 | "source": "pages/api/toast/index"
59 | },
60 | {
61 | "path": "/alert",
62 | "source": "pages/api/alert/index"
63 | },
64 | {
65 | "path": "/asyncstorage",
66 | "source": "pages/api/asyncstorage/index"
67 | },
68 | {
69 | "path": "/chooseimage",
70 | "source": "pages/api/chooseimage/index",
71 | "targets": ["web", "miniapp", "wechat-miniprogram"]
72 | },
73 | {
74 | "path": "/clipboard",
75 | "source": "pages/api/clipboard/index"
76 | },
77 | {
78 | "path": "/confirm",
79 | "source": "pages/api/confirm/index"
80 | },
81 | {
82 | "path": "/env",
83 | "source": "pages/api/env/index"
84 | },
85 | {
86 | "path": "/device",
87 | "source": "pages/api/device/index"
88 | },
89 | {
90 | "path": "/navigate",
91 | "source": "pages/api/navigate/index"
92 | },
93 | {
94 | "path": "/request",
95 | "source": "pages/api/request/index"
96 | }
97 | ],
98 | "window": {
99 | "title": "Go Rax",
100 | "navigationBarForceEnable": true,
101 | "titleBarColor": "#04152C"
102 | },
103 | "tabBar": {
104 | "color": "#666666",
105 | "selectedColor": "#ffb006",
106 | "items": [{
107 | "path": "/",
108 | "name": "组 件",
109 | "icon": "./assets/img/component_tabbar.png",
110 | "activeIcon": "./assets/img/component_active_tabbar.png"
111 | }, {
112 | "path": "/index-api",
113 | "name": "API",
114 | "icon": "./assets/img/api_tabbar.png",
115 | "activeIcon": "./assets/img/api_active_tabbar.png"
116 | }]
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/src/config/component.js:
--------------------------------------------------------------------------------
1 | import { WEB, WEEX, ALI_MINI_APP, WECHAT } from './platform';
2 |
3 | export const basicBasics = [
4 | {
5 | name: '画布组件',
6 | nameEn: 'Canvas',
7 | path: 'canvas',
8 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
9 | },
10 | {
11 | name: '基础视图',
12 | nameEn: 'View',
13 | path: 'view',
14 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
15 | },
16 | {
17 | name: '文本组件',
18 | nameEn: 'Text',
19 | path: 'text',
20 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
21 | },
22 | {
23 | name: '文本输入框',
24 | nameEn: 'TextInput',
25 | path: 'textinput',
26 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
27 | },
28 | {
29 | name: '链接组件',
30 | nameEn: 'Link',
31 | path: 'link',
32 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
33 | },
34 | {
35 | name: '图片组件',
36 | nameEn: 'Image',
37 | path: 'image',
38 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
39 | },
40 | {
41 | name: '复杂图片组件',
42 | nameEn: 'Picture',
43 | path: 'picture',
44 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
45 | },
46 | // {
47 | // name: '视频播放组件',
48 | // nameEn: 'Video',
49 | // path: 'video',
50 | // supported: [WEB, WEEX, ALI_MINI_APP],
51 | // },
52 | // {
53 | // name: '图标组件',
54 | // nameEn: 'Icon',
55 | // path: 'icon',
56 | // },
57 | // {
58 | // name: '弹层组件',
59 | // nameEn: 'Modal',
60 | // path: 'modal',
61 | // },
62 | ];
63 |
64 | export const basicContainers = [
65 | {
66 | name: '滚动容器',
67 | nameEn: 'ScrollView',
68 | path: 'scrollview',
69 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
70 | },
71 | {
72 | name: '瀑布流',
73 | nameEn: 'WaterFall',
74 | path: 'waterfall',
75 | supported: [WEB, WEEX],
76 | },
77 | {
78 | name: '可回收容器',
79 | nameEn: 'RecyclerView',
80 | path: 'recyclerview',
81 | supported: [WEB, WEEX],
82 | },
83 | ];
84 | export const functionComponents = [
85 | // {
86 | // name: '嵌入式组件',
87 | // nameEn: 'Embed',
88 | // path: 'embed',
89 | // },
90 | {
91 | name: '画布组件',
92 | nameEn: 'Canvas',
93 | path: 'canvas',
94 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
95 | },
96 | // {
97 | // name: '滑块组件',
98 | // nameEn: 'Slider',
99 | // path: 'slider',
100 | // },
101 | // {
102 | // name: '倒计时',
103 | // nameEn: 'CountDown',
104 | // path: 'countdown',
105 | // },
106 | ];
107 |
108 | export const basicComponentList = [
109 | {
110 | type: '基础组件',
111 | typeEn: 'Basic Components',
112 | list: basicBasics,
113 | // basics.png
114 | icon: 'https://gw.alicdn.com/tfs/TB1zPtycEH1gK0jSZSyXXXtlpXa-200-200.png',
115 | },
116 | {
117 | type: '基础容器',
118 | typeEn: 'Basic Containers',
119 | list: basicContainers,
120 | // container.png
121 | icon: 'https://gw.alicdn.com/tfs/TB1ojXBcuP2gK0jSZFoXXauIVXa-200-200.png',
122 | },
123 | // {
124 | // type: '功能组件',
125 | // typeEn: 'Functional Components',
126 | // list: functionComponents,
127 | // // function.png
128 | // icon: 'https://gw.alicdn.com/tfs/TB1m7O4bKbviK0jSZFNXXaApXXa-200-200.png',
129 | // },
130 | ];
131 |
--------------------------------------------------------------------------------
/src/pages/component/countdown/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import View from 'rax-view';
3 | import Countdown from 'rax-countdown';
4 | import styles from './index.css';
5 |
6 | import Container from '../../../components/Container';
7 | import Section from '../../../components/Section';
8 |
9 | export default function App() {
10 | function complete() {
11 | console.log('countdown complete');
12 | }
13 | return (
14 |
21 |
30 |
31 |
47 |
48 |
72 |
73 |
99 |
100 | );
101 | }
102 |
--------------------------------------------------------------------------------
/src/pages/component/scrollview/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useState, useRef } from 'rax';
2 | import View from 'rax-view';
3 | import Text from 'rax-text';
4 | import styles from './index.css';
5 | import ScrollView from 'rax-scrollview';
6 |
7 | import Container from '../../../components/Container';
8 | import Section from '../../../components/Section';
9 | import SectionOper from '../../../components/SectionOper';
10 |
11 | const THUMBS = [];
12 | for (let i = 0; i < 20; i++) THUMBS.push(i);
13 |
14 | export default function App() {
15 | const [
16 | horizontalScrollViewEventLog,
17 | setHorizontalScrollViewEventLog,
18 | ] = useState(false);
19 | const [scrollViewEventLog, setScrollViewEventLog] = useState(false);
20 | const horizontalScrollView = useRef(null);
21 | const scrollView = useRef(null);
22 |
23 | return (
24 |
29 |
30 |
31 | setScrollViewEventLog(true)}
37 | >
38 |
39 | Sticky View
40 |
41 |
42 | {THUMBS.map((val, i) => (
43 |
44 |
45 |
46 | ))}
47 |
48 |
49 |
50 | {
52 | scrollView.current.scrollTo({ y: 0 });
53 | }}
54 | >
55 | Scroll to top
56 |
57 |
58 |
59 |
60 | {scrollViewEventLog ? 'onEndReached' : ''}
61 |
62 |
63 |
64 |
65 |
66 |
67 | setHorizontalScrollViewEventLog(true)}
74 | >
75 |
76 | {THUMBS.map((val, i) => (
77 |
78 |
79 |
80 | ))}
81 |
82 |
83 |
84 |
85 | {
87 | horizontalScrollView.current.scrollTo({ x: 0 });
88 | }}
89 | >
90 | Scroll to start
91 |
92 |
93 |
94 |
95 | {horizontalScrollViewEventLog ? 'onEndReached' : ''}
96 |
97 |
98 |
99 |
100 | );
101 | }
102 |
--------------------------------------------------------------------------------
/src/pages/component/view/index.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'rax';
2 | import View from 'rax-view';
3 | import Text from 'rax-text';
4 | import alert from 'universal-alert';
5 | import styles from './index.css';
6 |
7 | import Container from '../../../components/Container';
8 | import Section from '../../../components/Section';
9 |
10 | export default function App() {
11 | return (
12 |
19 |
31 |
32 |
33 |
34 | {
36 | alert({
37 | content: 'View was clicked!',
38 | buttonText: 'OK'
39 | });
40 | }}
41 | style={{
42 | ...styles.box,
43 | ...{
44 | backgroundColor: '#222831',
45 | },
46 | }}
47 | >
48 | Click on the event
49 |
50 |
51 |
52 |
53 |
54 | {
57 | alert({
58 | content: 'Container was clicked!',
59 | buttonText: 'OK'
60 | });
61 | }}
62 | >
63 |
71 |
79 |
87 |
88 |
89 |
90 |
91 |
92 |
100 |
108 |
116 |
117 |
118 |
119 | );
120 | }
121 |
--------------------------------------------------------------------------------
/src/pages/component/waterfall/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useState } from 'rax';
2 | import View from 'rax-view';
3 | import Text from 'rax-text';
4 | import RefreshControl from 'rax-refreshcontrol';
5 | import Waterfall from 'rax-waterfall';
6 | import styles from './index.css';
7 | import commonStyles from '../../../assets/css/common.css';
8 |
9 | import Navigator from '../../../components/Navigator';
10 | let listSource = [
11 | { height: 550, item: {} },
12 | { height: 624, item: {} },
13 | { height: 708, item: {} },
14 | { height: 600, item: {} },
15 | { height: 300, item: {} },
16 | { height: 100, item: {} },
17 | { height: 400, item: {} },
18 | { height: 550, item: {} },
19 | { height: 624, item: {} },
20 | { height: 708, item: {} },
21 | { height: 600, item: {} },
22 | { height: 300, item: {} },
23 | { height: 100, item: {} },
24 | { height: 400, item: {} },
25 | ];
26 |
27 | export default function WaterfallDemo() {
28 | const [refreshing, setRefreshing] = useState(false);
29 | const [dataSource, setDataSource] = useState(listSource);
30 |
31 | const handleRefresh = () => {
32 | if (refreshing) {
33 | return;
34 | }
35 | setRefreshing(true);
36 | setDataSource([]);
37 |
38 | setTimeout(() => {
39 | setRefreshing(false);
40 | setDataSource(dataSource);
41 | }, 500);
42 | };
43 |
44 | const loadMore = () => {
45 | setTimeout(() => {
46 | setDataSource(dataSource.concat(listSource));
47 | }, 1000);
48 | };
49 |
50 | return (
51 |
52 |
53 | {
59 | return [
60 |
65 | 下拉刷新
66 | ,
67 |
68 | Waterfall
69 |
70 | The list container used to implement the waterfall flow, each
71 | item in the waterfall flow needs to specify a height to
72 | calculate the layout.
73 |
74 | ,
75 | ];
76 | }}
77 | renderFooter={() => {
78 | return (
79 |
90 |
91 | Supported By Rax Team
92 |
93 |
94 | );
95 | }}
96 | renderItem={(item, index) => {
97 | return (
98 |
107 | Goods
108 |
109 | );
110 | }}
111 | onEndReached={loadMore}
112 | />
113 |
114 | );
115 | }
116 |
--------------------------------------------------------------------------------
/src/pages/component/slider/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useRef, useState } from 'rax';
2 | import Image from 'rax-image';
3 | import Slider from 'rax-slider';
4 | import View from 'rax-view';
5 | import commonStyles from '../../assets/css/common.css';
6 | import styles from './index.css';
7 |
8 | import Container from '../../../components/Container';
9 | import Section from '../../../components/Section';
10 | import SectionOper from '../../../components/SectionOper';
11 |
12 | export default function SliderDemo() {
13 | const sliderRef = useRef(null);
14 | const [autoPlay, setAutoPlay] = useState(true);
15 | const [showsPagination, setShowsPagination] = useState(true);
16 | const [loop, setLoop] = useState(true);
17 |
18 | function onChange(index) {
19 | console.log('change', index);
20 | }
21 |
22 | function slideTo(index) {
23 | sliderRef.current.slideTo(index);
24 | }
25 |
26 | return (
27 |
34 |
35 |
36 |
48 |
49 |
58 |
59 |
60 |
69 |
70 |
71 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | setShowsPagination(!showsPagination)}>
87 | {showsPagination ? 'Hidden' : 'Show'}
88 |
89 |
90 |
91 |
92 | setAutoPlay(!autoPlay)}>
93 | {autoPlay ? 'Not' : 'Auto'}
94 |
95 |
96 |
97 |
98 | setLoop(!loop)}>
99 | {loop ? 'Not' : 'Loop'}
100 |
101 |
102 |
103 |
104 | slideTo(0)}>Return
105 |
106 |
107 | );
108 | }
109 |
--------------------------------------------------------------------------------
/src/pages/component/refreshcontrol/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, Component } from 'rax';
2 | import View from 'rax-view';
3 | import Text from 'rax-text';
4 | import commonStyles from '../../assets/css/common.css';
5 | import styles from './index.css';
6 | import RecyclerView from 'rax-recyclerview';
7 | import RefreshControl from 'rax-refreshcontrol';
8 |
9 | import Container from '../../../components/Container';
10 |
11 | let arrayFrom = function(arrayLike /*, mapFn, thisArg */) {
12 | if (arrayLike == null) {
13 | throw new TypeError('Object is null or undefined');
14 | }
15 |
16 | // Optional args.
17 | var mapFn = arguments[1];
18 | var thisArg = arguments[2];
19 |
20 | var C = this;
21 | var items = Object(arrayLike);
22 | var symbolIterator =
23 | typeof Symbol === 'function' ? Symbol.iterator : '@@iterator';
24 | var mapping = typeof mapFn === 'function';
25 | var usingIterator = typeof items[symbolIterator] === 'function';
26 | var key = 0;
27 | var ret;
28 | var value;
29 |
30 | if (usingIterator) {
31 | ret = typeof C === 'function' ? new C() : [];
32 | var it = items[symbolIterator]();
33 | var next;
34 |
35 | while (!(next = it.next()).done) {
36 | value = next.value;
37 |
38 | if (mapping) {
39 | value = mapFn.call(thisArg, value, key);
40 | }
41 |
42 | ret[key] = value;
43 | key += 1;
44 | }
45 |
46 | ret.length = key;
47 | return ret;
48 | }
49 |
50 | var len = items.length;
51 | if (isNaN(len) || len < 0) {
52 | len = 0;
53 | }
54 |
55 | ret = typeof C === 'function' ? new C(len) : new Array(len);
56 |
57 | while (key < len) {
58 | value = items[key];
59 |
60 | if (mapping) {
61 | value = mapFn.call(thisArg, value, key);
62 | }
63 |
64 | ret[key] = value;
65 |
66 | key += 1;
67 | }
68 |
69 | ret.length = key;
70 | return ret;
71 | };
72 |
73 | class Row extends Component {
74 | handleClick = e => {
75 | this.props.onClick(this.props.data);
76 | };
77 |
78 | render() {
79 | return (
80 |
81 |
82 |
83 | {this.props.data.text + ' (' + this.props.data.clicks + ' clicks)'}
84 |
85 |
86 |
87 | );
88 | }
89 | }
90 |
91 | export default class RefreshControlDemo extends Component {
92 | state = {
93 | isRefreshing: false,
94 | loaded: 0,
95 | refreshText: '↓ Pull To Refresh',
96 | rowData: arrayFrom(new Array(20)).map((val, i) => ({
97 | text: 'Initial row ' + i,
98 | clicks: 0,
99 | })),
100 | };
101 |
102 | handleClick = row => {
103 | row.clicks++;
104 | this.setState({
105 | rowData: this.state.rowData,
106 | });
107 | };
108 |
109 | handleRefresh = e => {
110 | this.setState({
111 | isRefreshing: true,
112 | refreshText: 'Refreshing',
113 | });
114 | setTimeout(() => {
115 | // prepend 10 items
116 | const rowData = arrayFrom(new Array(10))
117 | .map((val, i) => ({
118 | text: 'Loaded row ' + (+this.state.loaded + i),
119 | clicks: 0,
120 | }))
121 | .concat(this.state.rowData);
122 |
123 | this.setState({
124 | loaded: this.state.loaded + 10,
125 | isRefreshing: false,
126 | rowData: rowData,
127 | refreshText: '↓ Pull To Refresh',
128 | });
129 | }, 1000);
130 | };
131 |
132 | render() {
133 | const rows = this.state.rowData.map((row, ii) => {
134 | return (
135 |
136 |
137 |
138 | );
139 | });
140 | return (
141 |
146 |
147 |
148 |
149 |
154 | {this.state.refreshText}
155 |
156 | {rows}
157 |
158 |
159 |
160 |
161 | );
162 | }
163 | }
164 |
--------------------------------------------------------------------------------
/src/config/api.js:
--------------------------------------------------------------------------------
1 | import { WEB, WEEX, ALI_MINI_APP, WECHAT } from './platform';
2 |
3 | const animationAPIList = [
4 | {
5 | name: '动画',
6 | nameEn: 'Animation',
7 | desc: '可以对元素执行一系列的变换操作',
8 | path: 'animation',
9 | supported: [WEB, WEEX, ALI_MINI_APP],
10 | },
11 | {
12 | name: '过渡',
13 | nameEn: 'Transition',
14 | desc: '用于元素在不同状态之间切换时定义不同的过渡效果',
15 | path: 'transition',
16 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
17 | },
18 | ];
19 |
20 | const feedbackAPIList = [
21 | {
22 | name: '消息提示框',
23 | nameEn: 'Toast',
24 | desc: '消息提示框,通用弱提示',
25 | path: 'toast',
26 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
27 | },
28 | {
29 | name: '警告框',
30 | nameEn: 'Alert',
31 | desc: '警告框,可以配置警告框的标题、内容、按钮文字等',
32 | path: 'alert',
33 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
34 | },
35 | {
36 | name: '确认框',
37 | nameEn: 'Confirm',
38 | desc: '用于提示的确认框',
39 | path: 'confirm',
40 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
41 | }
42 | ];
43 |
44 | const navigationAPIList = [
45 | {
46 | name: '页面跳转',
47 | nameEn: 'Navigate',
48 | desc: '从当前页面,跳转到某个指定页面',
49 | path: 'navigate',
50 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
51 | }
52 | ];
53 |
54 | const mediaAPIList = [
55 | {
56 | name: '图片',
57 | nameEn: 'ChooseImage',
58 | desc: '拍照或从本地相册中选择图片',
59 | path: 'chooseimage',
60 | supported: [WEB, ALI_MINI_APP, WECHAT],
61 | }
62 | ];
63 |
64 | const networkAPIList = [
65 | {
66 | name: '网络请求',
67 | nameEn: 'Request',
68 | desc: '用于发起网络请求',
69 | path: 'request',
70 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
71 | },
72 | {
73 | name: 'MTOP',
74 | nameEn: 'MTOP',
75 | desc: 'MTOP(Mobile Taobao Open Platform)为客户端和服务端提供了一致的API平台,集成了大量的业务接口,支持客户端、H5的接入',
76 | path: 'mtop',
77 | supported: [WEB, WEEX, ALI_MINI_APP],
78 | },
79 | ];
80 |
81 | const systemAPIList = [
82 | {
83 | name: '运行时环境',
84 | nameEn: 'Env',
85 | desc: '判断和获取运行时环境',
86 | path: 'env',
87 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
88 | },
89 | {
90 | name: '系统信息',
91 | nameEn: 'Device',
92 | desc: '获取系统信息',
93 | path: 'device',
94 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
95 | },
96 | {
97 | name: '剪贴板',
98 | nameEn: 'Clipboard',
99 | desc: '获取或设置剪贴板数据',
100 | path: 'clipboard',
101 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
102 | },
103 | {
104 | name: '应用显示或隐藏',
105 | nameEn: 'AppState',
106 | desc: '应用被显示或即将被置于后台,仅在 Weex 端支持',
107 | path: 'appstate',
108 | supported: [WEEX],
109 | }
110 | ];
111 |
112 | const dataAPIList = [
113 | {
114 | name: '缓存数据',
115 | nameEn: 'AsyncStorage',
116 | desc: '获取或设置缓存数据的异步接口',
117 | path: 'asyncstorage',
118 | supported: [WEB, WEEX, ALI_MINI_APP, WECHAT],
119 | }
120 | ];
121 |
122 | const monitoringAPIList = [
123 | {
124 | name: 'goldlog 埋点',
125 | nameEn: 'Goldlog',
126 | desc: '提供了一系列工具方法,来发送 PV 埋点、黄金令箭等',
127 | path: 'goldlog',
128 | supported: [WEB, WEEX, ALI_MINI_APP],
129 | },
130 | {
131 | name: 'spm 操作',
132 | nameEn: 'Spm',
133 | desc: '提供了一系列工具方法,来操作 SPM',
134 | path: 'spm',
135 | supported: [WEB],
136 | }
137 | ];
138 |
139 | export const APIList = [
140 | {
141 | type: '动画',
142 | typeEn: 'Animation',
143 | list: animationAPIList,
144 | icon: 'https://gw.alicdn.com/tfs/TB1A7EwcAL0gK0jSZFxXXXWHVXa-200-200.png',
145 | },
146 | {
147 | type: '提醒',
148 | typeEn: 'Feedback',
149 | list: feedbackAPIList,
150 | icon: 'https://gw.alicdn.com/tfs/TB1.o3xcAT2gK0jSZFkXXcIQFXa-200-200.png'
151 | },
152 | {
153 | type: '导航',
154 | typeEn: 'Navigation',
155 | list: navigationAPIList,
156 | icon: 'https://gw.alicdn.com/tfs/TB1koIwcAL0gK0jSZFxXXXWHVXa-200-200.png'
157 | },
158 | {
159 | type: '多媒体',
160 | typeEn: 'Media',
161 | list: mediaAPIList,
162 | icon: 'https://gw.alicdn.com/tfs/TB1AHgvcvb2gK0jSZK9XXaEgFXa-200-200.png'
163 | },
164 | {
165 | type: '网络',
166 | typeEn: 'Network',
167 | list: networkAPIList,
168 | icon: 'https://gw.alicdn.com/tfs/TB11loxcrj1gK0jSZFuXXcrHpXa-200-200.png'
169 | },
170 | {
171 | type: '系统',
172 | typeEn: 'System',
173 | list: systemAPIList,
174 | icon: 'https://gw.alicdn.com/tfs/TB15qAwcET1gK0jSZFrXXcNCXXa-200-200.png'
175 | },
176 | {
177 | type: '数据缓存',
178 | typeEn: 'Storage',
179 | list: dataAPIList,
180 | icon: 'https://gw.alicdn.com/tfs/TB1QU.ucEz1gK0jSZLeXXb9kVXa-200-200.png'
181 | }
182 | ];
183 |
--------------------------------------------------------------------------------
/src/pages/api/animation/index.js:
--------------------------------------------------------------------------------
1 | import { createElement, useRef, useState } from 'rax';
2 | import animate from 'universal-animation';
3 | import inMiniApp from '../../../utils/inMiniApp';
4 | import View from 'rax-view';
5 | import styles from './index.css';
6 |
7 | import Container from '../../../components/Container';
8 | import Section from '../../../components/Section';
9 | import SectionItem from '../../../components/SectionItem';
10 | import SectionOper from '../../../components/SectionOper';
11 |
12 | let findDOMNode;
13 | if (!inMiniApp) {
14 | findDOMNode = require('rax-find-dom-node').default;
15 | }
16 |
17 | export default function App() {
18 | const [animationInfo, setAnimationInfo] = useState({});
19 | const animationRef = useRef(null);
20 |
21 | const rotate = () => {
22 | const animation = animate(
23 | {
24 | props: [
25 | {
26 | element: inMiniApp ? 'view' : findDOMNode(animationRef.current),
27 | property: 'transform.rotateZ',
28 | easing: 'easeOutSine',
29 | duration: 200,
30 | start: 0,
31 | end: Math.random() * 720 - 360,
32 | delay: 100,
33 | },
34 | ],
35 | },
36 | () => {
37 | // timing end
38 | },
39 | );
40 | setAnimationInfo(animation.export().view);
41 | };
42 | const scale = () => {
43 | const animation = animate(
44 | {
45 | props: [
46 | {
47 | element: inMiniApp ? 'view' : findDOMNode(animationRef.current),
48 | property: 'transform.scale',
49 | easing: 'easeOutSine',
50 | duration: 200,
51 | start: 1,
52 | end: 0.5,
53 | delay: 100,
54 | },
55 | ],
56 | },
57 | () => {
58 | // timing end
59 | },
60 | );
61 | setAnimationInfo(animation.export().view);
62 | };
63 |
64 | const translate = () => {
65 | const animation = animate(
66 | {
67 | props: [
68 | {
69 | element: inMiniApp ? 'view' : findDOMNode(animationRef.current),
70 | property: 'transform.translateX',
71 | easing: 'easeOutSine',
72 | duration: 200,
73 | start: 0,
74 | end: 200,
75 | delay: 100,
76 | },
77 | ],
78 | },
79 | () => {
80 | // timing end
81 | },
82 | );
83 | setAnimationInfo(animation.export().view);
84 | };
85 |
86 | const opacity = () => {
87 | const animation = animate(
88 | {
89 | props: [
90 | {
91 | element: inMiniApp ? 'view' : findDOMNode(animationRef.current),
92 | property: 'opacity',
93 | easing: 'easeOutSine',
94 | duration: 200,
95 | start: 1,
96 | end: 0.5,
97 | delay: 100,
98 | },
99 | ],
100 | },
101 | () => {
102 | // timing end
103 | },
104 | );
105 | setAnimationInfo(animation.export().view);
106 | };
107 |
108 | const rotateAndScale = () => {
109 | const el = inMiniApp ? 'view' : findDOMNode(animationRef.current);
110 | const animation = animate(
111 | {
112 | props: [
113 | {
114 | element: el,
115 | property: 'transform.rotateZ',
116 | easing: 'easeOutSine',
117 | duration: 200,
118 | start: 0,
119 | end: Math.random() * 720 - 360,
120 | delay: 100,
121 | },
122 | {
123 | element: el,
124 | property: 'transform.scale',
125 | easing: 'easeOutSine',
126 | duration: 1000,
127 | start: 1,
128 | end: 0.5,
129 | delay: 100,
130 | },
131 | ],
132 | },
133 | () => {
134 | // timing end
135 | },
136 | );
137 | setAnimationInfo(animation.export().view);
138 | };
139 |
140 | const rotateThenScale = () => {
141 | const el = inMiniApp ? 'view' : findDOMNode(animationRef.current);
142 | const animation = animate(
143 | {
144 | props: [
145 | {
146 | element: el,
147 | property: 'transform.rotateZ',
148 | easing: 'easeOutSine',
149 | duration: 200,
150 | start: 0,
151 | end: Math.random() * 720 - 360,
152 | delay: 100,
153 | },
154 | {
155 | element: el,
156 | property: 'transform.scale',
157 | easing: 'easeOutSine',
158 | duration: 1000,
159 | start: 1,
160 | end: 0.5,
161 | delay: 300,
162 | },
163 | ],
164 | },
165 | () => {
166 | // timing end
167 | },
168 | );
169 | setAnimationInfo(animation.export().view);
170 | };
171 |
172 | return (
173 |
178 |
179 |
184 |
185 |
186 |
187 | Rotate
188 | Scale
189 |
190 |
191 |
192 | Translate
193 | Opacity
194 |
195 |
196 |
197 | RotateAndScale
198 | RotateThenScale
199 |
200 |
201 |
202 | );
203 | }
204 |
--------------------------------------------------------------------------------