Every line of 'horizontal flatlist react native' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.
6 renderList() { 7 const { 8 slides, 9 userId, 10 changeSlide, 11 deleteSlide, 12 } = this.props; 13 14 return slides.map((slide, index) => ( 15 <Menu.Item 16 className="slidescontrols" 17 // eslint-disable-next-line react/no-array-index-key 18 key={index} 19 style={{ 20 height: '100%', 21 display: 'flex', 22 flexDirection: 'column', 23 justifyContent: userId === Meteor.userId() ? 'space-around' : 'center', 24 }} 25 > 26 <Button onClick={() => { changeSlide(index); }}> 27 {index + 1} 28 </Button> 29 {userId === Meteor.userId() 30 ? ( 31 <Button onClick={() => { deleteSlide(index); }}> 32 X 33 </Button> 34 ) : null} 35 </Menu.Item> 36 )); 37 }
Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code
40 renderList(props) { 41 return ( 42 <ul> 43 {props.entities.map(entity => { 44 return this.renderEntity(entity); 45 })} 46 </ul> 47 ); 48 }
88 constructor(props) { 89 super(props); 90 91 this.state = { 92 items: props.items, 93 }; 94 }
30 render() { 31 const childrenToRender = React.Children.toArray(this.props.children).map(item => { 32 if (!item.props.value) { 33 return item; 34 } 35 const props = assign({}, item.props); 36 props.className = (props.className || '').replace('active', ''); 37 if (item.props.value === this.state.defaultValue) { 38 props.className = `${props.className} active`.trim(); 39 } 40 props.onClick = this.listOnClick.bind(this, item.props.value); 41 return React.cloneElement(item, props); 42 }); 43 return React.createElement( 44 this.props.component, 45 this.props, 46 childrenToRender 47 ); 48 }
4 constructor() { 5 super(...arguments); 6 this.listRef = React.createRef(); 7 this.flatListHeight = 0; 8 this.contentHeight = 0; 9 this.enabledAutoScrollToEnd = true; 10 this.scrollToEnd = () => { 11 if (this.listRef.current && this.enabledAutoScrollToEnd) { 12 this.listRef.current.scrollToOffset({ offset: this.contentHeight - this.flatListHeight }); 13 } 14 }; 15 this.onLayout = (event) => { 16 this.flatListHeight = event.nativeEvent.layout.height; 17 // User-defined onLayout event 18 const { onLayout } = this.props; 19 if (onLayout) { 20 onLayout(event); 21 } 22 }; 23 this.onContentSizeChange = (width, height) => { 24 this.contentHeight = height; 25 this.scrollToEnd(); 26 // User-defined onContentSizeChange event 27 const { onContentSizeChange } = this.props; 28 if (onContentSizeChange) { 29 onContentSizeChange(width, height); 30 } 31 }; 32 this.onScroll = (event) => { 33 // if scrollTop is at end / user scroll to end, the FlatList will now enabledAutoScrollToEnd 34 if (this.listRef.current) { 35 this.enabledAutoScrollToEnd = event.nativeEvent.contentOffset.y >= this.contentHeight - this.flatListHeight; 36 } 37 // User-defined onScroll event 38 const { onScroll } = this.props; 39 if (onScroll) { 40 onScroll(event); 41 } 42 }; 43 }
197 render() { 198 return ( 199 <View style={{ ...styles.container }} onLayout={this.onLayout}> 200 {this.renderFlatList()} 201 </View> 202 ) 203 }
111 render() { 112 const { 113 ordered, 114 items, 115 children, 116 inline, 117 divided, 118 bullet, 119 theme, 120 } = this.props; 121 122 const listItems = children || items.map(Item.create); 123 124 return React.createElement( 125 this._listType(ordered), 126 { 127 inline, 128 divided, 129 bullet, 130 theme, 131 ...this.props, 132 }, 133 listItems, 134 ); 135 }
78 render() { 79 const { image, title, selected, ...rest } = this.props; 80 const iconStyles = [styles.tick]; 81 if (selected) { 82 iconStyles.push(styles.tickVisible); 83 } 84 85 const styledImage = image 86 ? React.cloneElement(image, { 87 style: [image.props.style, styles.image], 88 }) 89 : null; 90 91 return ( 92 <BpkTouchableOverlay 93 accessibilityComponentType="button" 94 accessibilityLabel={title} 95 accessibilityTraits={['button']} 96 style={styles.outer} 97 {...rest} 98 > 99 <View style={styles.content}> 100 {styledImage} 101 <BpkText 102 textStyle="base" 103 style={[styles.text, selected ? styles.textSelected : null]} 104 > 105 {title} 106 </BpkText> 107 </View> 108 <BpkIcon small icon={icons.tick} style={iconStyles} /> 109 </BpkTouchableOverlay> 110 ); 111 }
128 render() { 129 return ( 130 <View 131 onLayout={this.onLayout} 132 height="100%" 133 width="100%" 134 onWheel={this.onWheel} 135 > 136 {this.state.height > 0 ? this.renderItemsInViewport() : null} 137 </View> 138 ); 139 }
312 value: function renderList() { 313 var data = this.state.data; 314 var children = this.props.children; 315 316 var len = data.length; 317 if (!children) { 318 return null; 319 } 320 var lastChild = !Array.isArray(children) ? children : children[children.length - 1]; 321 var isLastChildFunc = typeof lastChild === 'function'; 322 if (!isLastChildFunc) { 323 return data.map(function (item, i) { 324 return _react2.default.cloneElement(lastChild, _extends({ 325 /* eslint-disable react/no-array-index-key */ 326 key: 'child-' + i, 327 /* selint-enable react/no-array-index-key */ 328 index: i, 329 first: i === 0, 330 last: i === len, 331 odd: odd(i), 332 data: item 333 }, item)); 334 }); 335 } 336 return data.map(function (item, i) { 337 return lastChild(item, i); 338 }); 339 }