10 examples of 'vector icons react native list' in JavaScript

42
function Icon(props) {
43
    var icon = props.icon,
44
        rest = babelHelpers.objectWithoutProperties(props, ['icon']);
45
46
47
    return _react2['default'].createElement('i', babelHelpers['extends']({}, (0, _omit2['default'])(rest, ['states', 'variants']), {
48
        'data-icon': icon,
49
        className: cx(props).build() }));
50
}

28
function Icon(props) {
29
  return _react2.default.createElement(
30
    StyledIcon,
31
    { className: props.className, size: props.size },
32
    _react2.default.createElement('use', { xlinkHref: '#' + (props.symbol || 'placeholder') })
33
  );
34
}

13
export function MaterialIcon (props: *): * {
14
  let {
15
    wrap,
16
    className,
17
    ...other
18
  } = props;
19
  wrap = wrap || 'i';
20
  className = classNames(
21
    styles.icon,
22
    className
23
  );
24
  return React.createElement(wrap, {
25
    className,
26
    ...other
27
  });
28
}

40
renderList(props) {
41
  return (
42
    <ul>
43
      {props.entities.map(entity =&gt; {
44
        return this.renderEntity(entity);
45
      })}
46
    </ul>
47
  );
48
}

4
function Icons({
5
  icons,
6
  onMouseDown,
7
  onDoubleClick,
8
  displayFocus,
9
  mouse,
10
  selecting,
11
  setSelectedIcons,
12
}) {
13
  const [iconsRect, setIconsRect] = useState([]);
14
  function measure(rect) {
15
    if (iconsRect.find(r => r.id === rect.id)) return;
16
    setIconsRect(iconsRect => [...iconsRect, rect]);
17
  }
18
  useEffect(() => {
19
    if (!selecting) return;
20
    const sx = Math.min(selecting.x, mouse.docX);
21
    const sy = Math.min(selecting.y, mouse.docY);
22
    const sw = Math.abs(selecting.x - mouse.docX);
23
    const sh = Math.abs(selecting.y - mouse.docY);
24
    const selectedIds = iconsRect
25
      .filter(rect => {
26
        const { x, y, w, h } = rect;
27
        return x - sx < sw && sx - x < w && y - sy < sh && sy - y < h;
28
      })
29
      .map(icon => icon.id);
30
    setSelectedIcons(selectedIds);
31
  }, [iconsRect, setSelectedIcons, selecting, mouse.docX, mouse.docY]);
32
  return (
33
    
34
      {icons.map(icon => (
35
        
36
      ))}
37
    
38
  );
39
}

9
var Icon = function Icon(props) {
10
    var classNames = ['glyphicon', 'glyphicon-' + props.symbol];
11
    if (props.className) {
12
        classNames.push(props.className);
13
    };
14
    return _react2.default.createElement('span', { className: classNames.join(' '), 'aria-hidden': 'true' });
15
};

13
export default function List(props) {
14
  const ListItem = props.component
15
  let content = (<div></div>)
16
17
  // If we have items, render them
18
  if (props.items &amp;&amp; props.items.length !== 0) {
19
    content = props.items.map((item, index) =&gt; (
20
      
21
    ));
22
  } else {
23
    // Otherwise render a single component
24
    content = <p>{'No Content'}</p>
25
  }
26
27
  return (
28
    <div>
29
      <ul>
30
        {content}
31
      </ul>
32
    </div>
33
  );
34
}

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
}

74
render(props) {
75
		const style:any = {}
76
		let hasStyle = false
77
		if(props.width){
78
			hasStyle = true
79
			style.width = props.width + 'px'
80
		}
81
		if(props.height){
82
			hasStyle = true
83
			style.height = props.height + 'px'
84
		}
85
    return <ul>
86
      {props.items.map(item =&gt; {
87
        if (item.divider || item === true) {
88
          return <li></li>
89
        }
90
        return <li>
91
					{props.checkboxLeft &amp;&amp; this._renderCheckbox(props, item)}
92
					{props.radioLeft &amp;&amp; this._renderRadio(props, item)}
93
          {item.icon &amp;&amp; <span>{item.icon}</span>}
94
          <span>
95
            {item.text ? (item.text &amp;&amp; item.secondaryText ? [
96
              <span>{item.text}</span>,
97
              <span>{item.secondaryText}</span>] : item.text) : item}
98
          </span>
99
          {item.rightIcon &amp;&amp; <span>{item.rightIcon}</span>}
100
101
          {!props.checkboxLeft &amp;&amp; this._renderCheckbox(props, item)}
102
					{!props.radioLeft &amp;&amp; this._renderRadio(props, item)}
103
        </li>
104
      })}
105
106
107
    </ul>
108
  }

15
export function Icon (props: IconProps) {
16
    const { type, size = 14, className: cn, style: s } = props
17
    const className = classnames('clash-iconfont', `icon-${type}`, cn)
18
    const style: React.CSSProperties = { fontSize: size, ...s }
19
    const iconProps = { ...props, className, style }
20
21
    return <i>
22
}</i>