tbom/examples/src/index.js

Taobao Open Platform Modules

import {createElement, render, Component} from 'rax';
import View from 'tboc-view';
import Text from 'tboc-text';
import Link from 'tboc-link';
import Image from 'tboc-image';
import Icon from 'tboc-icon';
import ScrollView from 'tboc-scrollview';

const demos = {
  base: {
    mtop: require('./mtop'),
    fetch: require('./fetch'),
    jsonp: require('./jsonp'),
    storage: require('./storage')
  },
  interface: {
    navigator: require('./navigator'),
    toast: require('./toast')
  },
  device: {
    env: require('./env'),
    geolocation: require('./geolocation'),
    network: require('./network')
  },
  social: {
    share: require('./share'),
    follow: require('./follow')
  },
  other: {
    wangwang: require('./wangwang'),
    user: require('./user'),
    scancode: require('./scancode')
  }
};

class Index extends Component {

  state = {
    part: (() => {
      const m = window.location.href.match(/part=([^#&?$]+)/);
      return m && m[1];
    })(),
    demo: (() => {
      const m = window.location.href.match(/demo=([^#&?$]+)/);
      return m && m[1];
    })()
  };
  
  changeDemoName(part, demo) {
    this.setState({
      part: part,
      demo: demo
    });
    if (window.history && window.history.replaceState) {
      window.history.replaceState(null, null, `?part=${part}&demo=${demo}`);
    }
  }

  renderItem(DemoName) {
    const demo = this.state.demo;
    return (
      <View style={[styles.itemWrapper, styles.wholeWrapper]}>
        <View style={styles.titleWrapper}>
          <View style={styles.itemIconLink} onClick={() => this.changeDemoName(null, null)}>
            <Icon 
              style={styles.itemIcon} 
              fontFamily="iconfont" 
              source={{uri: '//at.alicdn.com/t/font_383853_eoj22s8ewx6flxr.ttf', codePoint: "\uE607"}}
            />
            <Text></Text>
          </View>
          <Text style={styles.itemTitle}>Tida-{demo}</Text>
        </View>
        <ScrollView ref={(scrollview) => {
          this.scrollview = scrollview;
        }}>
          <View style={[styles.pWrapper, {marginTop: 40}]}>
            <View style={styles.pindexTitle}>
              <Text style={styles.pTitleText}>引用方式</Text>
            </View>
            <View style={styles.install}>
              <Text>require('tida/{demo}')</Text>
            </View>
          </View>
          <View style={styles.pWrapper}>
            <View style={styles.pindexTitle}>
              <Text style={styles.pTitleText}>效果演示</Text>
            </View>
          </View>
          <DemoName />
          <View style={styles.footer}>
            <Text style={styles.footerText} onclick={() => this.changeDemoName(null)}>&copy; TOBM - Tida</Text>
          </View>
        </ScrollView>
      </View>
    );
  }

  renderIndex() {
    return (
      <View style={[styles.indexWrapper, styles.wholeWrapper]}> 
      <ScrollView>
      <View style={styles.header}>
        <Text style={styles.headerText}>Tida / 模块列表</Text>
      </View>
      {
        Object.keys(demos).map((part) => {
          const coms = demos[part];
          return (
            <View>
              <View style={styles.indexTitle}>
                <Text style={styles.indexTitleText}>{firstLetterUpperCase(part)}</Text>
              </View>
              {
                Object.keys(coms).map((demo) => {
                  return (
                    <View style={styles.list}>
                      <View style={styles.item} onClick={() => this.changeDemoName(part, demo)}>
                        <Icon 
                          style={styles.icon} 
                          fontFamily="iconfont" 
                          source={{uri: '//at.alicdn.com/t/font_383853_eoj22s8ewx6flxr.ttf', codePoint: "\uE644"}}
                        />
                        <Text style={styles.itemText}>{firstLetterUpperCase(demo)}</Text>
                        <Icon 
                          style={styles.iconArrow} 
                          fontFamily="iconfont" 
                          source={{uri: '//at.alicdn.com/t/font_383853_eoj22s8ewx6flxr.ttf', codePoint: icons.right}}
                        />
                      </View>
                    </View>
                  );
                })
              }
            </View>
          );
        })
      }
      </ScrollView>
      </View>
    );
  }

  render() {
    const part = this.state.part;
    const demo = this.state.demo;
    const showItem = part && demo && demos[part] && demos[part][demo];
    if (!showItem) {
      return this.renderIndex();
    } else {
      return this.renderItem(showItem);
    }
  }

}

function firstLetterUpperCase(text) {
  return text.charAt(0).toUpperCase() + text.slice(1);
}


const styles = {
  wholeWrapper: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  itemWrapper: {
    backgroundColor: '#FFF'
  },
  indexWrapper: {
    backgroundColor: '#f2f3f4'
  },
  header: {
    backgroundColor: '#FFF',
    padding: 20,
    marginBottom: 20,
    display: 'flex',
    alignItems: 'center',
    borderBottom: '1px solid #e0e0e0'
  },
  headerText: {
    fontSize: 40,
    color: '#F60'
  },
  indexTitle: {
    width: 750,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: 120,
    lineHeight: 120
  },
  indexTitleText: {
    fontSize: 40,
    color: '#555'
  },
  list: {
    backgroundColor: '#FFF',
    borderTop: '1px solid #f2f3f4'
  },
  item: {
    display: 'flex',
    height: 90,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    padding: 20,
    borderBottomWidth: 2,
    borderBottomStyle: 'solid',
    borderBottomColor: '#f2f3f4',
    position: 'relative'
  },
  itemText: {
    color: '#555'
  },
  icon: {
    color: '#F60',
    fontSize: 34,
    marginRight: 18
  },
  iconArrow: {
    color: '#999',
    position: 'absolute',
    fontSize: 24,
    right: 20
  },
  pWrapper: {
    padding: 20
  },
  pTitleText: {
    borderLeftWidth: 8,
    borderLeftStyle: 'solid',
    borderLeftColor: '#F60',
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 16,
    paddingBottom: 18,
    color: '#666',
    fontSize: 32,
    backgroundColor: '#f2f3f4'
  },
  install: {
    padding: 20,
    color: '#666',
    marginTop: 20,
    fontFamily: 'Consolas, sans-serif'
  },
  itemIconLink: {
    width: 50,
    height: 50,
    position: 'absolute',
    top: 20,
    left: 14
  },
  itemIcon: {
    color: '#F60',
    fontSize: 36
  },
  titleWrapper: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    borderBottom: '1px solid #E0E0E0',
    position: 'relative',
    backgroundColor: '#f2f3f4'
  },
  itemTitle: {
    paddingTop: 20,
    paddingBottom: 20,
    fontSize: 40,
    fontFamily: 'Consolas, sans-serif',
    color: '#777'
  },
  container: {
    borderStyle: 'solid',
    borderColor: '#dddddd',
    borderWidth: 1,
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 10,
  },
  footer: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 40,
    marginBottom: 20
  },
  footerText: {
    color: '#f60',
    fontSize: 24
  }
};

const icons = {
  share: "\uE644",
  image: "\uE600",
  waterfall: "\uE62f",
  video: "\uEa21",
  refreshcontrol: "\uE6c7",
  gotop: "\uE616",
  button: "\uE904",
  icon: "\uE622",
  calendar: "\uE6bd",
  slider: "\uE617",
  input: "\uE64e",
  countdown: "\uE618",
  recyclerview: "\uE60d",
  text: "\uE6ca",
  multirow: "\uE83d",
  view: "\uE8cb",
  listview: "\uE6b4",
  scrollview: "\uE61d",
  link: "\uE62c",
  picker: "\uE624",
  modal: "\uE685",
  right: "\uE643"
};

render(<Index />);