nuke-components - npm Package Compare versions

Comparing version 0.0.20 to 0.0.21

Image.js

@@ -6,19 +6,11 @@ /* @jsx createElement */
 import {Component, createElement, PropTypes} from 'weex-rx';
-import {env} from 'nuke-core';
-const isWeex = env.isWeex;
+import {env} from 'nuke-core'; const isWeex = env.isWeex;
 import View from './View';
+import ImageResizeMode from './ImageResizeMode';
 
 class Image extends Component {
-  static resizeMode = {
-    contain: 'contain',
-    cover: 'cover',
-    stretch: 'stretch',
-    center: 'center',
-    repeat: 'repeat',
-  };
+  static resizeMode = ImageResizeMode;
 
   render() {
-    let nativeProps = {
-      ...this.props,
-    };
+    let nativeProps = {...this.props};
     let source = nativeProps.source;
@@ -29,6 +21,5 @@
 
-      let {width, height, uri} = source;
+      let {width, height, uri, bigSizeUri} = source;
       nativeProps.style = {
         ...{
-          display: 'flex',
           width: width || 0,
@@ -43,32 +34,39 @@ height: height || 0,
 
-      let NativeImage;
+      let ImageElement;
       if (isWeex) {
-        NativeImage = 'image';
+        ImageElement = 'image';
       } else {
-        NativeImage = 'img';
+        ImageElement = 'img';
       }
 
       // for cover and contain
-      let resizeMode = nativeProps.resizeMode || nativeProps.style.resizeMode;
-      if (resizeMode) {
+      let propsResizeMode = nativeProps.resizeMode || nativeProps.style.resizeMode;
+      if (propsResizeMode) {
         if (isWeex) {
-          nativeProps.resize = resizeMode;
-          nativeProps.style.resizeMode = resizeMode;
+          nativeProps.resize = propsResizeMode;
+          nativeProps.style.resizeMode = propsResizeMode;
         } else {
-          nativeProps.style.objectFit = resizeMode;
+          nativeProps.style.objectFit = propsResizeMode;
         }
       }
 
-      if (this.props.children) {
-        nativeProps.children = null;
+      if (nativeProps.children) {
+        var imageProps = {
+          ...nativeProps,
+          ...{
+            style: {
+              ...nativeProps.style,
+              ...styles.absoluteImage,
+            }
+          }
+        };
+
         return (
           <View style={nativeProps.style}>
-            <NativeImage {...nativeProps} />
-            <View style={styles.absoluteImage}>
-              {this.props.children}
-            </View>
+            <ImageElement {...imageProps} />
+            {this.props.children}
           </View>
         );
       } else {
-        return <NativeImage {...nativeProps} />;
+        return <ImageElement {...nativeProps}/>;
       }
@@ -83,4 +81,5 @@ }
     left: 0,
-
+    right: 0,
     top: 0,
+    bottom: 0,
     position: 'absolute'
@@ -87,0 +86,0 @@ }

package.json

 {
   "name": "nuke-components",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

ScrollView.js

@@ -8,83 +8,96 @@ /* @jsx createElement */
 const isWeex = env.isWeex;
-const isWeb = env.isWeb;
 import View from './View';
+import throttle from './throttle';
 
+let dimensionsHeightRem = Dimensions.get('window').height;
 
-const DEFAULT_END_REACHED_THRESHOLD = 500;
-const DEFAULT_SCROLL_CALLBACK_THROTTLE = 50;
-const FULL_WIDTH = 750;
-
 class ScrollView extends Component {
-  static defaultProps = {
-    scrollEventThrottle: DEFAULT_SCROLL_CALLBACK_THROTTLE,
-    onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
-    showsHorizontalScrollIndicator: true,
-    showsVerticalScrollIndicator: true,
-    className: 'rx-scrollview',
-  };
 
-  lastScrollDistance = 0;
-  lastScrollContentSize = 0;
+  onScroll = () => {
+    let self = this;
+    if (!isWeex) {
+      if (!self.ScrollViewDom) {
+        self.ScrollViewDom = findDOMNode(this.refs.scroller);
+        self.ScrollViewBodyDom = findDOMNode(this.refs.scrollerBody);
+        self.scrollHeight = self.ScrollViewDom.offsetHeight;
+      }
+      // 时时卷上去的高度
+      self.lastScrollTop = self.scrollTop || 0;
+      self.scrollTop = self.ScrollViewDom.scrollTop;
 
-  handleScroll = (e) => {
+      // 计算出可视列表高度
+      self.scrollBodyHeight = self.ScrollViewBodyDom.offsetHeight;
 
-    if (isWeb) {
-
-      if (this.props.onScroll) {
-        this.props.onScroll(e);
+      if ((self.scrollBodyHeight - self.scrollTop - self.scrollHeight) < self.loadMoreOffset && !self.canLoading && self.scrollBodyHeight != self.oldScrollBodyHeight) {
+        self.canLoading = true;
+      } else {
+        self.canLoading = false;
       }
 
-      if (this.props.onEndReached) {
-        if (!this.scrollerNode) {
-          this.scrollerNode = findDOMNode(this.refs.scroller);
-          this.scrollerContentNode = findDOMNode(this.refs.contentContainer);
-          this.scrollerNodeSize = this.props.horizontal ? this.scrollerNode.offsetWidth : this.scrollerNode.offsetHeight;
+      if (self.canLoading && self.scrollTop > self.lastScrollTop) {
+        self.canLoading = false;
+        if (self.oldScrollBodyHeight != self.scrollBodyHeight) {
+          self.oldScrollBodyHeight = self.scrollBodyHeight;
+          self.loadmore();
         }
+      }
 
-        let scrollContentSize = this.props.horizontal ? this.scrollerContentNode.offsetWidth : this.scrollerContentNode.offsetHeight;
-        let scrollDistance = this.props.horizontal ? this.scrollerNode.scrollLeft : this.scrollerNode.scrollTop;
-
-        let isEndReached = (scrollContentSize - scrollDistance - this.scrollerNodeSize) < this.props.onEndReachedThreshold;
-        let isScrollToEnd = scrollDistance > this.lastScrollDistance;
-        let isLoadedMoreContent = scrollContentSize != this.lastScrollContentSize;
-
-        if (isEndReached && isScrollToEnd && isLoadedMoreContent) {
-          this.lastScrollContentSize = scrollContentSize;
-          this.props.onEndReached(e);
-        }
-
-        this.lastScrollDistance = scrollDistance;
+      if (self.props.onScroll) {
+        self.props.onScroll();
       }
-    }
-  }
 
-  // Reset scroll state, only for web now.
-  resetScroll = (options) => {
-    if (isWeb) {
-      this.lastScrollContentSize = 0;
-      this.lastScrollDistance = 0;
     }
   }
 
-  scrollTo = (options) => {
+  scrollTo = (place) => {
 
-    let x = parseInt(options.x);
-    let y = parseInt(options.y);
+    let self = this;
+    let x = place.x;
+    let y = place.y;
+    if (!x) {
+      x = 0;
+    }
+    let width;
+    if (typeof(x) == 'string' && x.split('rem').length) {
+      width = parseInt(x.split('rem')[0]);
+    } else {
+      width = parseInt(x);
+    }
+    if (!isWeex) {
+      width = document.documentElement.clientWidth / 750 * width;
+    }
+    if (!y) {
+      y = 0;
+    }
+    let height;
+    if (typeof(y) == 'string' && y.split('rem').length) {
+      height = parseInt(y.split('rem')[0]);
+    } else {
+      height = parseInt(y);
+    }
+    if (!isWeex) {
+      height = document.documentElement.clientWidth / 750 * height;
+    }
 
     if (isWeex) {
-      let dom = require('@weex-module/dom');
-      let contentContainer = findDOMNode(this.refs.contentContainer);
-      dom.scrollToElement(contentContainer.ref, {
-        offset: x || y || 0
+      let domModule = '@weex-module/dom';
+      let dom = require(domModule);
+      let scroller = findDOMNode(self.refs.scroller);
+      if (!width) {
+        width = height;
+      }
+      dom.scrollToElement(scroller.ref, {
+        offset: width
       });
     } else {
-      let pixelRatio = document.documentElement.clientWidth / FULL_WIDTH;
+      findDOMNode(self.refs.scroller).scrollTop = height;
+      findDOMNode(self.refs.scroller).scrollLeft = width;
+    }
+  }
 
-      if (x >= 0) {
-        findDOMNode(this.refs.scroller).scrollLeft = pixelRatio * x;
-      }
-
-      if (y >= 0) {
-        findDOMNode(this.refs.scroller).scrollTop = pixelRatio * y;
-      }
+  showScrollbar() {
+    if (this.props.showScrollIndicator == true) {
+      return true;
+    } else {
+      return false;
     }
@@ -95,91 +108,77 @@ }
 
-    let {
-      id,
-      style,
-      scrollEventThrottle,
-      showsHorizontalScrollIndicator,
-      showsVerticalScrollIndicator,
-      onEndReached,
-      onEndReachedThreshold,
-    } = this.props;
+    let props = this.props;
+    let self = this;
 
-    // In weex must be int value
-    onEndReachedThreshold = parseInt(onEndReachedThreshold, 10);
-
-    const contentContainerStyle = [
-      this.props.horizontal && styles.contentContainerHorizontal,
-      this.props.contentContainerStyle,
-    ];
-    
-    // bugfix: fix scrollview flex in ios 78
-    if (!isWeex && !this.props.horizontal) {
-      contentContainerStyle.push(styles.containerWebStyle);
+    self.loadmore = props.onLoadMore;
+    if (!self.loadmore) {
+      self.loadmore = function() {};
     }
+    self.loadMoreOffset = props.loadMoreOffset || props.loadmoreoffset || 500;
+    self.throttleNum = props.throttle || 100;
 
-    if (this.props.style) {
-      let childLayoutProps = ['alignItems', 'justifyContent']
-        .filter((prop) => this.props.style[prop] !== undefined);
+    props.style = {
+      ...styles.base,
+      ...props.style
+    };
 
-      if (childLayoutProps.length !== 0) {
-        console.warn(
-          'ScrollView child layout (' + JSON.stringify(childLayoutProps) +
-            ') must be applied through the contentContainerStyle prop.'
-        );
+    if (props.horizontal) {
+
+      self.scrollBoxWidthRem = 0;
+      if (props.children.length) {
+        props.children.map(function(item) {
+          let itemWidth = item.props.style.width;
+          if (itemWidth) {
+            self.scrollBoxWidthRem += parseInt(itemWidth.split('rem')[0]);
+          }
+        });
+      } else {
+        self.scrollBoxWidthRem += parseInt(props.children.props.style.width.split('rem')[0]);
       }
-    }
+      // styles.scrollBox.width = '' + self.scrollBoxWidthRem + 'rem';
+      let showScrollbar = self.showScrollbar();
 
-    const contentContainer =
-      <View
-        ref="contentContainer"
-        style={contentContainerStyle}>
-        {this.props.children}
-      </View>;
+      if (isWeex) {
+        return <scroller {...props} showScrollbar={showScrollbar} scrollDirection="horizontal">
+          <View ref="scroller" t="scroll-view-2" style={styles.scrollBox}>
+            {props.children}
+          </View>
+        </scroller>;
+      } else {
 
-    const baseStyle = this.props.horizontal ? styles.baseHorizontal : styles.baseVertical;
+        // web 隐藏 scroller 滚动条
+        if (!showScrollbar && !document.getElementById('ScrollViewStyle')) {
+          let style = document.createElement('style');
+          style.id = 'ScrollViewStyle';
+          document.head.appendChild(style);
+          style.innerHTML = '.scroller::-webkit-scrollbar{display: none;}';
+        }
 
-    const scrollerStyle = {
-      ...baseStyle,
-      ...this.props.style
-    };
+        return <View ref="scroller" className="scroller" {...props} >
+          <View style={styles.scrollBox} t="scroll-view-2">
+            {props.children}
+          </View>
+        </View>;
+      }
 
-    let showsScrollIndicator = this.props.horizontal ? showsHorizontalScrollIndicator : showsVerticalScrollIndicator;
-
-    if (isWeex) {
-
-      return (
-        <scroller
-          id={id}
-          style={scrollerStyle}
-          showScrollbar={showsScrollIndicator}
-          onLoadmore={onEndReached}
-          loadmoreoffset={onEndReachedThreshold}
-          scrollDirection={this.props.horizontal ? 'horizontal' : 'vertical'}
-        >
-          {contentContainer}
-        </scroller>
-      );
-
     } else {
 
-      let handleScroll = this.handleScroll;
-      if (scrollEventThrottle) {
-        handleScroll = throttle(handleScroll, scrollEventThrottle);
-      }
+      props.style.webkitOverflowScrolling = 'touch';
+      // 解决embed 标签引入一个页面，页面由大scroller组成，此时高度需要减去父级bar等因素的问题
+      // 
+      // if (!props.style.height) {
+      //   props.style.height = Dimensions.get('window').height;
+      // }
 
-      if (!showsScrollIndicator && !document.getElementById('rx-scrollview-style')) {
-        let styleNode = document.createElement('style');
-        styleNode.id = 'rx-scrollview-style';
-        document.head.appendChild(styleNode);
-        styleNode.innerHTML = `.${this.props.className}::-webkit-scrollbar{display: none;}`;
+      if (isWeex) {
+        return <scroller {...props} onLoadMore={self.loadmore} loadmoreoffset={self.loadMoreOffset} >
+            <View ref="scroller" t="scroll-view-1">
+              {props.children}
+            </View>
+          </scroller>;
+      } else {
+        return <View ref="scroller" {...props} onScroll={throttle(self.onScroll, self.throttleNum)}>
+            <View ref="scrollerBody" t="scroll-view-1">{props.children}</View>
+          </View>;
       }
 
-      scrollerStyle.webkitOverflowScrolling = 'touch';
-      scrollerStyle.overflow = 'scroll';
-
-      return (
-        <View {...this.props} ref="scroller" style={scrollerStyle} onScroll={handleScroll}>
-          {contentContainer}
-        </View>
-      );
-
     }
@@ -189,39 +188,11 @@ }
 
-function throttle(func, wait) {
-  var ctx, args, rtn, timeoutID;
-  var last = 0;
-
-  function call() {
-    timeoutID = 0;
-    last = +new Date();
-    rtn = func.apply(ctx, args);
-    ctx = null;
-    args = null;
-  }
-
-  return function throttled() {
-    ctx = this;
-    args = arguments;
-    var delta = new Date() - last;
-    if (!timeoutID)
-      if (delta >= wait) call();
-      else timeoutID = setTimeout(call, wait - delta);
-    return rtn;
-  };
-}
-
 const styles = {
-  baseVertical: {
-    flex: 1,
-    flexDirection: 'column',
+  base: {
+    overflow: 'scroll',
+    display: 'block',
   },
-  baseHorizontal: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  contentContainerHorizontal: {
-    flexDirection: 'row',
-  },
-  containerWebStyle: {
-    display: 'block', 
+  scrollBox: {
+    // width: '2000rem',
+    // justifyContent:'center',
+    flexDirection:'row'
   }
@@ -228,0 +199,0 @@ };

Text.js

@@ -5,87 +5,28 @@ /* @jsx createElement */
 
-import {Component, createElement,PropTypes} from 'weex-rx';
-import {env} from 'nuke-core';
-const isWeex = env.isWeex;
+import {Component, createElement} from 'weex-rx';
+import {env} from 'nuke-core'; const isWeex = env.isWeex;
 
 class Text extends Component {
+  render() {
+    let props = this.props;
+    let string;
 
-    static contextTypes = {
-        isInAParentText: PropTypes.bool
-    };
-
-    static childContextTypes = {
-        isInAParentText: PropTypes.bool
-    };
-
-    getChildContext() {
-        return {
-            isInAParentText: true
-        };
+    if (props.children != null) {
+      if (!Array.isArray(props.children)) {
+        string = props.children.toString();
+      } else {
+        string = props.children.join('');
+      }
+    } else {
+      string = '';
     }
 
-    render() {
-        let props = this.props;
-        let nativeProps = {
-            style: props.style || {},
-            id: props.id,
-            className: props.className,
-        };
-
-        let textString = '';
-        if (props.children != null) {
-            if (!Array.isArray(props.children)) {
-                textString = props.children.toString();
-            } else {
-                textString = props.children.join('');
-            }
-        }
-
-        if (props.onPress) {
-            nativeProps.onClick = props.onPress;
-        }
-
-        if (isWeex) {
-            if (props.numberOfLines) {
-                nativeProps.style.lines = props.numberOfLines;
-            }
-
-            nativeProps.value = textString;
-
-            return < text {...nativeProps} />;
-    	}else {
-	      let styleProps = {
-	        ...styles.initial,
-	        ...nativeProps.style
-	      };
-      	let numberOfLines = props.numberOfLines;
-      	if (numberOfLines) {
-
-        	if (parseInt(numberOfLines) === 1) {
-          		styleProps.whiteSpace = 'nowrap';
-        	} else {
-          		styleProps.display = '-webkit-box';
-          		styleProps.webkitBoxOrient = 'vertical';
-          		styleProps.webkitLineClamp = String(numberOfLines);
-        	}
-
-        	styleProps.overflow = 'hidden';
-      	}
-
-      	return <span {...nativeProps} style={styleProps}>{textString}</span > ;
-        }
+    if (isWeex) {
+      return <text style={props.style} value={string} />;
+    } else {
+      return <span {...props}>{string}</span>;
     }
+  }
 }
-const styles = {
-  initial: {
-    border: '0 solid black',
-    position: 'relative',
-    boxSizing: 'border-box',
-    display: 'block',
-    flexDirection: 'column',
-    alignContent: 'flex-start',
-    flexShrink: 0,
-    fontSize: 32
-  }
-};
 
 export default Text;

TextInput.js

@@ -26,12 +26,2 @@ /* @jsx createElement */
   handleInput = (e) => {
-    let text = e.value;
-    // Shim Event
-    if (isWeex) {
-      e = {
-        nativeEvent: {
-          text
-        },
-        value: text
-      };
-    }
     this.props.onInput(e);
@@ -41,15 +31,3 @@ };
   handleChange = (e) => {
-    let text = e.value;
-    // Shim Event
-    if (isWeex) {
-      e = {
-        nativeEvent: {
-          text
-        },
-        value: text
-      };
-    }
-
-    this.props.onChange && this.props.onChange(e);
-    this.props.onChangeText && this.props.onChangeText(text);
+    this.props.onChange(e);
   };
@@ -74,4 +52,6 @@
       onChange,
-      onChangeText,
       onInput,
+      // onKeyDown,
+      // onKeyUp,
+      // onKeyPress,
       placeholder,
@@ -81,4 +61,3 @@ password,
       style,
-      value,
-      id
+      value
     } = this.props;
@@ -91,3 +70,3 @@
       maxLength,
-      onChange: (onChange || onChangeText) && this.handleChange,
+      onChange: onChange && this.handleChange,
       onInput: onInput && this.handleInput,
@@ -101,4 +80,6 @@ onBlur: onBlur && this.handleBlur,
       },
-      value,
-      id
+      // onKeyDown,
+      // onKeyUp,
+      // onKeyPress,
+      value
     };
@@ -115,10 +96,5 @@
 
-
     if (isWeex) {
-      if (multiline) {
-        return <textarea {...propsCommon} rows={20} disabled={propsCommon.readOnly} />;
-      } else {
-        // https://github.com/alibaba/weex/blob/dev/doc/components/input.md
-        return <input {...propsCommon} type={type} disabled={propsCommon.readOnly} />;
-      }
+      // https://github.com/alibaba/weex/blob/dev/doc/components/input.md
+      return <input {...propsCommon} type={type} disabled={propsCommon.readOnly} />;
 
@@ -125,0 +101,0 @@ } else {

TouchableHighlight.js

@@ -10,18 +10,16 @@ /* @jsx createElement */
 class TouchableHighlight extends Component {
-    render() {
-    let props = this.props;
-    let nativeProps = {
-      ...props,
+  render() {
+    let props = {
+      ...this.props,
       style: {
         ...styles.initial,
-        ...props.style
+        ...this.props.style
       },
-      onClick: props.onPress
+      onClick: this.props.onPress
     };
 
-    delete nativeProps.onPress;
+    delete props.onPress;
 
-    return <View {...nativeProps} />;
+    return <View {...props}/>;
   }
-  
 }
@@ -28,0 +26,0 @@

View.js

@@ -6,4 +6,3 @@ /* @jsx createElement */
 import {Component, createElement} from 'weex-rx';
-import {env} from 'nuke-core';
-const isWeex = env.isWeex;
+import {env} from 'nuke-core'; const isWeex = env.isWeex;
 
@@ -13,8 +12,8 @@ class View extends Component {
     let props = this.props;
+
     if (isWeex) {
-      // TODO: do not pass object value in props
       return <div {...props} />;
     } else {
       let styleProps = {
-        ...styles.initial,
+        ...styles.base,
         ...props.style
@@ -28,10 +27,7 @@ };
 const styles = {
-  initial: {
-    border: '0 solid black',
+  base: {
     position: 'relative',
     boxSizing: 'border-box',
     display: 'flex',
-    flexDirection: 'column',
-    alignContent: 'flex-start',
-    flexShrink: 0
+    flexDirection: 'column'
   }
@@ -38,0 +34,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

13

increased by8.33%

Worsened metrics

Total package byte prevSize

18771

decreased by-8.66%

Lines of code

669

decreased by-8.61%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes