Ejemplo n.º 1
0
 getStyles() {
   return StyleSheet.create({
     container: {
       width: '100%',
       height: this.props.clientHeight || document.documentElement.clientHeight,
       position: 'relative',
       overflow: 'hidden'
     },
     content: {
       width: '100%',
       height: '100%'
     },
     bar: {
       width: '100%',
       position: 'absolute',
       padding: 0,
       margin: 0,
       listStyle: 'none',
       left: 0,
       bottom: 0,
       // borderTop: '1px solid #e1e1e1',
       backgroundColor: 'rgba(250,250,250,.96)',
       display: 'table'
     }
   });
 }
Ejemplo n.º 2
0
  render() {

    let styles = StyleSheet.create({
      'display': 'none',
      'width': '100%',
      'height': '100%',
      'position': 'relative'
    });

    if (this.props.selected) {
      delete styles.display;
    }

    var tabContents = null;

    // if the tab has already been shown once, always continue to show it so we
    // preserve state between tab transitions
    if (this.state.hasBeenSelected) {
      tabContents = <View style={styles}>
        {this.props.children}
      </View>;
    }

    return (tabContents);
  }
Ejemplo n.º 3
0
 getStyles() {
   return StyleSheet.create({
     span: {
       position: 'relative',
       display: 'inline-block',
       margin: 2,
       height: 30,
       width: 50,
       cursor: 'default', // pointer will cause a grey background color on chrome
       verticalAlign: 'middle',
       borderRadius: 20,
       borderColor: '#dfdfdf',
       borderWidth: 1,
       borderStyle: 'solid',
       WebkitUserSelect: 'none',
       WebkitBoxSizing: 'content-box',
       WebkitBackfaceVisibility: 'hidden'
     },
     checkedSpan: {
       borderColor: this.props.onTintColor,
       backgroundColor: this.props.onTintColor,
       boxShadow: this.props.onTintColor + ' 0 0 0 16px inset',
       WebkitTransition: 'border 0.2s, box-shadow 0.2s, background-color 1s'
     },
     uncheckedSpan: {
       borderColor: '#dfdfdf',
       backgroundColor: this.props.tintColor,
       boxShadow: '#dfdfdf 0 0 0 0 inset',
       WebkitTransition: 'border 0.2s, box-shadow 0.2s'
     },
     disabledSpan: {
       opacity: 0.5,
       cursor: 'not-allowed',
       boxShadow: 'none'
     },
     small: {
       position: 'absolute',
       top: 0,
       width: 30,
       height: 30,
       backgroundColor: this.props.thumbTintColor,
       borderRadius: '100%',
       boxShadow: '0 1px 3px rgba(0,0,0,0.4)',
       WebkitTransition: '-webkit-transform 0.2s ease-in'
     },
     checkedSmall: {
       WebkitTransform: 'translateX(20px)'
     },
     uncheckedSmall: {
       WebkitTransform: 'translateX(0)'
     }
   });
 }
Ejemplo n.º 4
0
  render() {

    let specificStyle = {
      progressTint: {},
      progressTrack: {},
    };

    if ( this.props.trackImage ) {
      specificStyle.progressTrack.background = 'url(' + this.props.trackImage.uri + ') no-repeat 0 0';
      specificStyle.progressTrack.backgroundSize = '100% 100%';
    }

    if ( this.props.trackTintColor ) {
      specificStyle.progressTrack.background = this.props.trackTintColor;
    }

    if ( this.props.progressViewStyle == 'bar' ) {
      specificStyle.progressTrack.background = 'transparent';
    }

    if ( this.props.progressImage ) {
      specificStyle.progressTint.background = 'url(' + this.props.progressImage.uri + ') no-repeat 0 0';
      specificStyle.progressTint.backgroundSize = '100% 100%';
    }

    if ( this.props.progressTintColor ) {
      specificStyle.progressTint.background = this.props.progressTintColor;
    }

    // process progress
    let progress = this.props.progress;
    if ( progress >= 1 ) {
      progress = 1;
    } else if ( progress <= 0 ) {
      progress = 0;
    }

    specificStyle.progressTint.width = 100 * progress + '%';

    specificStyle = StyleSheet.create(specificStyle);

    return (
      <View style={[styles.progressView, this.props.style]}>
        <View style={[styles.progressTrack, specificStyle.progressTrack]}>
          <View style={[styles.progressTint, specificStyle.progressTint]} />
        </View>
      </View>
    );
  }
Ejemplo n.º 5
0
    rendered = (
      <View
        ref={(ref) => {
          this._components[componentName] = this._components[componentName].set(route, ref);
        }}
        style={initialStage[componentName]}>
        {content}
      </View>
    );

    this._descriptors[componentName] = this._descriptors[componentName].set(route, rendered);
    return rendered;
  }

};


var styles = StyleSheet.create({
  navBarContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: 'transparent',
  },
});

autobind(NavigatorNavigationBar);

module.exports = NavigatorNavigationBar;
Ejemplo n.º 6
0
    return (
      <View {...props} ref={SCROLLVIEW}>
        {contentContainer}
      </View>
    );
  }
};

let styles = StyleSheet.create({
  base: {
    overflow: 'scroll',
    WebkitOverflowScrolling: 'touch',
    flex: 1,
  },
  contentContainer: {
    position: 'absolute',
    minWidth: '100%',
  },
  contentContainerHorizontal: {
    alignSelf: 'flex-start',
    flexDirection: 'row',
  },
});

mixin(ScrollView.prototype, ScrollResponder.Mixin);
autobind(ScrollView);

ScrollView.isReactNativeComponent = true;

export default ScrollView;
Ejemplo n.º 7
0
import TimerMixin from 'react-timer-mixin';
import TouchableWithoutFeedback from 'ReactTouchableWithoutFeedback';
import { Mixin as TouchableMixin } from 'ReactTouchable';
import { Mixin as NativeMethodsMixin } from 'NativeMethodsMixin';
import StyleSheet from 'ReactStyleSheet';
import mixin from 'react-mixin';
import autobind from 'autobind-decorator';
import flattenStyle from 'ReactFlattenStyle';

type Event = Object;

var DEFAULT_PROPS = {
  activeOpacity: 0.8,
  underlayColor: 'black',
  style: StyleSheet.create({
    cursor: 'pointer'
  })
};

var PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
var INACTIVE_CHILD_PROPS = {
  style: StyleSheet.create({x: {opacity: 1.0}}).x,
};
var INACTIVE_UNDERLAY_PROPS = {
  style: StyleSheet.create({x: {backgroundColor: 'transparent'}}).x,
};

var DEFAULT_UNDERLAY_STYLE = {
  ...DEFAULT_PROPS.style,
  ...INACTIVE_UNDERLAY_PROPS.style
}
Ejemplo n.º 8
0
 *   return (
 *     <TouchableOpacity onPress={this._onPressButton}>
 *       <Image
 *         style={styles.button}
 *         source={require('image!myButton')}
 *       />
 *     </TouchableOpacity>
 *   );
 * },
 * ```
 */

const DEFAULT_PROPS = {
  activeOpacity: 0.2,
  style: StyleSheet.create({
    cursor: 'pointer'
  })
};

class TouchableOpacity extends React.Component {

  static propTypes = {
    ...TouchableWithoutFeedback.propTypes,
    /**
     * Determines what the opacity of the wrapped view should be when touch is
     * active.
     */
    activeOpacity: PropTypes.number,
  };

  static defaultProps = DEFAULT_PROPS;
Ejemplo n.º 9
0
  }
});

var styles = StyleSheet.create({
  container: {
    position: 'relative',
    fontSize: 0,
    alignItems: 'center',
    justifyContent: 'center',
  },
  sizeSmallContainer: {
    width: 20,
    height: 20,
  },
  sizeLargeContainer: {
    width: 36,
    height: 36,
  },
  sizeSmallLine: {
    width: 2,
    height: 5,
    borderRadius: 2
  },
  sizeLargeLine: {
    width: 3,
    height: 9,
    borderRadius: 3
  }
});

module.exports = ActivityIndicator;
Ejemplo n.º 10
0
});

function renderApplication<D, P, S>(
  RootComponent: ReactClass<D, P, S>,
  initialProps: P,
  rootTag: any
) {

  ReactDOM.render(
    <AppContainer
      rootComponent={RootComponent}
      initialProps={initialProps}
      rootTag={rootTag} />,
    rootTag
  );
}

var styles = StyleSheet.create({
  // This is needed so the application covers the whole screen
  // and therefore the contents of the React are not clipped.
  appContainer: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
});

module.exports = renderApplication;
Ejemplo n.º 11
0
        </View>
      </View>
    );
  }
};

let styles = StyleSheet.create({
  progressView: {
    display: 'block',
    height: '2px',
    width: '100%',
  },
  progressTint: {
    position: 'absolute',
    left: 0,
    width: 0,
    height: '100%',
    background: '#0079fe',
  },
  progressTrack: {
    position: 'relative',
    width: '100%',
    height: '100%',
    background: '#b4b4b4',
  }
});

mixin.onClass(ProgressView, NativeMethodsMixin);
autobind(ProgressView);
ProgressView.isReactNativeComponent = true;

export default ProgressView;
    var rightButtonDescriptor = (
      <View ref={'right_' + index} style={firstStyles.RightItem}>
        {rightContent}
      </View>
    );
    this._descriptors.right = this._descriptors.right.set(route, rightButtonDescriptor);
    return rightButtonDescriptor;
  }

  _setPropsIfExists(ref, props) {
    var ref = this.refs[ref];
    ref && ref.setNativeProps(props);
  }

};

var styles = StyleSheet.create({
  breadCrumbContainer: {
    overflow: 'hidden',
    position: 'absolute',
    height: NavigatorNavigationBarStyles.General.TotalNavHeight,
    top: 0,
    left: 0,
    right: 0,
  },
});

autobind(NavigatorBreadcrumbNavigationBar);

module.exports = NavigatorBreadcrumbNavigationBar;
Ejemplo n.º 13
0
let styles = StyleSheet.create({
  segmentedControl: {
    height: 28,
    justifyContent: 'center',
    flexDirection: 'row'
  },
  segmentedControlItem: {
    flex: 1,
    backgroundColor: 'white',
    borderColor: defaultColor,
    borderStyle: 'solid',
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderRightWidth: 1,
    borderLeftWidth: 1,
  },
  segmentedControlItemSelected: {
    backgroundColor: defaultColor,
  },
  segmentedControlText: {
    color: defaultColor,
    fontSize: 12,
    lineHeight: 12,
    padding: '7 0',
    textAlign: 'center'
  },
  segmentedControlTextSelected: {
    color: 'white',
  },
  disable: {
    opacity: 0.5
  },
  firstChild: {
    borderTopLeftRadius: 3,
    borderBottomLeftRadius: 3,
    borderRightWidth: 0,
  },
  otherChild: {
    borderRightWidth: 0,
  },
  lastChild: {
    borderTopRightRadius: 3,
    borderBottomRightRadius: 3,
    borderRightWidth: 1,
  },
});
Ejemplo n.º 14
0
    if (!this.state.modals) {
      return null;
    }
    var modals = [];
    for (var tag in this.state.modals) {
      modals.push(this.state.modals[tag]);
    }
    if (modals.length === 0) {
      return null;
    }
    return (
      <View
        style={styles.modalsContainer}>
        {modals}
      </View>
    );
  }
});

var styles = StyleSheet.create({
  modalsContainer: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  },
});

module.exports = Portal;
Ejemplo n.º 15
0
    );
  }
}

Modal.propTypes = {
  animated: PropTypes.bool,
  transparent: PropTypes.bool,
  onDismiss: PropTypes.func,
};

var styles = StyleSheet.create({
  modal: {
    position: 'fixed',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
    backgroundColor: '#fff',
    zIndex: 9999
  },
  container: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
  }
});

module.exports = Modal;
Ejemplo n.º 16
0
// styles moved to the top of the file so getDefaultProps can refer to it
var styles = StyleSheet.create({
  container: {
    flex: 1,
    overflow: 'hidden',
  },
  defaultSceneStyle: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
  },
  baseScene: {
    position: 'absolute',
    overflow: 'hidden',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
  },
  disabledScene: {
    top: SCREEN_HEIGHT,
    bottom: -SCREEN_HEIGHT,
  },
  transitioner: {
    flex: 1,
    backgroundColor: 'transparent',
    overflow: 'hidden',
  }
});
Ejemplo n.º 17
0
      return x / drawerWidth;
    } else if (drawerPosition === 'right') {
      return (DEVICE_WIDTH - x) / drawerWidth;
    }
  }
}

let styles = StyleSheet.create({
  drawer: {
    position: 'absolute',
    top: 0,
    bottom: 0,
  },
  main: {
    flex: 1,
  },
  overlay: {
    backgroundColor: '#000',
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});


mixin(DrawerLayout.prototype, NativeMethodsMixin);
autobind(DrawerLayout);

DrawerLayout.isReactNativeComponent = true;