How to use the omi.extractClass function in omi

To help you get started, we’ve selected a few omi examples, based on popular ways it is used in public projects.

github Tencent / omi / packages / omim / src / tab / index.tsx View on Github external
if (props['svg-icon']) {
			props.svgIcon = JSON.parse(props['svg-icon'].replace(/(['"])?([a-zA-Z0-9_]+)(['"])?:([^\/])/g, '"$2":$4').replace(/'([\s\S]*?)'/g, '"$1"'))
		}
		const isActive = activeProp === props.value
		return (
			<button {...extractClass(props, 'mdc-tab', {
				'mdc-tab--active': isActive,
				'mdc-tab--min-width': this.props.useMinWidth,
				'mdc-tab--stacked': this.props.stacked
			})} role="tab" aria-selected={isActive}>
				<span class="mdc-tab__content">
					{props.icon && <span class="mdc-tab__icon material-icons" aria-hidden="true">{props.icon}</span>}
					{props.svgIcon && <span class="mdc-tab__icon" aria-hidden="true"><m-icon {...props.svgIcon}></m-icon></span>}
					<span class="mdc-tab__text-label">{vnode.attributes.label}</span>
				</span>
				<span {...extractClass(props, 'mdc-tab-indicator', { 'mdc-tab-indicator--active': isActive })}>
					<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
				</span>
				<span class="mdc-tab__ripple"></span>
			</button>
		)
	}
github Tencent / omi / packages / omim / src / image-list / index.tsx View on Github external
render(props) {
    return (
      <ul {...extractClass(props, 'mdc-image-list', {
        'mdc-image-list--masonry': props.masonry
      })}>
        {props.list.map(item => <li class="mdc-image-list__item">
          {props.masonry ?
            <img class="mdc-image-list__image" src={item.src}></img> :
            <div class="mdc-image-list__image-aspect-container">
              <img class="mdc-image-list__image" src={item.src} />
            </div>}

          <div class="mdc-image-list__supporting">
            <span class="mdc-image-list__label">{item.label}</span>
          </div>
        </li>)}


      </ul>
github Tencent / omi / packages / omiu / src / row / index.js View on Github external
render(props) {
    return (
      <div {...extractClass(props, "o-row")} {...props}>
        {props.children.map(child => {

          return (
            <div {...extractClass(child.attributes, `col${child.attributes.span}`)}>{child.children}</div>
          )
        })}
      </div>
    )
  }
})
github Tencent / omi / packages / omim / src / tab / index.tsx View on Github external
renderButton(vnode, activeProp) {
		const { attributes: props } = vnode
		//todo fix this?
		if (props['svg-icon']) {
			props.svgIcon = JSON.parse(props['svg-icon'].replace(/(['"])?([a-zA-Z0-9_]+)(['"])?:([^\/])/g, '"$2":$4').replace(/'([\s\S]*?)'/g, '"$1"'))
		}
		const isActive = activeProp === props.value
		return (
			<button {...extractClass(props, 'mdc-tab', {
				'mdc-tab--active': isActive,
				'mdc-tab--min-width': this.props.useMinWidth,
				'mdc-tab--stacked': this.props.stacked
			})} role="tab" aria-selected={isActive}>
				<span class="mdc-tab__content">
					{props.icon && <span class="mdc-tab__icon material-icons" aria-hidden="true">{props.icon}</span>}
					{props.svgIcon && <span class="mdc-tab__icon" aria-hidden="true"><m-icon {...props.svgIcon}></m-icon></span>}
					<span class="mdc-tab__text-label">{vnode.attributes.label}</span>
				</span>
				<span {...extractClass(props, 'mdc-tab-indicator', { 'mdc-tab-indicator--active': isActive })}>
					<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
				</span>
				<span class="mdc-tab__ripple"></span>
			</button>
		)
	}
github Tencent / omi / packages / omim / src / elevation / index.tsx View on Github external
render(props) {
    return (
      <div
        {...extractClass(props, 'mdc-elevation', `mdc-elevation--z${props.z}`)}
      >
        <slot />
      </div>
    )
  }
}
github Tencent / omi / packages / omim / src / chips / index.tsx View on Github external
render(props) {
    return (
      <div {...extractClass(props,
        'mdc-chip-set', {
        'mdc-chip-set--input': props.input,
        'mdc-chip-set--choice': props.choice,
        'mdc-chip-set--filter': props.filter
      })}>
        {
          props.chips.map((item, index) => {
            return <div tabindex="0" {
              ...extractClass(props,
                'mdc-chip', {
                  'mdc-chip--selected': item.selected
                })} onClick={() => this.chipClickHandle(index)}>

              {(item.leading) && <i class={classNames('material-icons', 'mdc-chip__icon', 'mdc-chip__icon--leading', {'mdc-chip__icon--leading-hidden': props.filter && item.checkmark && item.selected})}>
                { (item.leading.icon && typeof item.leading.icon === 'object') && <m-icon class='m-icon' {...item.leading.icon}></m-icon>}
                { (item.leading.icon && typeof item.leading.icon === 'string') && item.leading.icon }
github Tencent / omi / packages / omiu / src / rate / index.js View on Github external
render(props) {
    return (
      <ul onMouseMove={this.onMouseMove} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.onSelect} {...extractClass(props, "o-rate")} {...props}>

        {Array.apply(0, Array(props.total)).map((x, i) =>
          <li class={this._getClass(i, this._hover ? this._current : props.value)}>
            <div >
              <div class="_star-first">
                <i class="anticon anticon-star">
                  <svg viewBox="64 64 896 896" class="" data-icon="star" width="1em" height="1em" fill={props.color || "#F95050"} aria-hidden="true"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                  </svg>
                </i>
              </div>
              <div class="_star-second">
                <i class="anticon anticon-star">
                  <svg viewBox="64 64 896 896" class="" data-icon="star" width="1em" height="1em" fill="#E8E8E8" aria-hidden="true"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                  </svg>
                </i>
              </div>
github Tencent / omi / packages / omim / src / step / index.tsx View on Github external
render(props) {
    return (
      <div {...extractClass(props, 'm-step', {
				'vertical': props.vertical
			})}>
        {props.items.map((item, index) => {
          return <div class={classNames('_item', {
            '_item-finish': item.state === state.DONE,
            '_item-block': item.state === state.ERROR,
            '_item-process': item.state === state.DOING,
            '_item-wait': item.state === state.TODO,
            'next-error': props.items[index + 1] && props.items[index + 1].state === state.ERROR
          })}>
            <div class="_item-tail">
            </div>
            <div class="_item-icon">
              <span class="icon">
                {item.state === state.DONE && <i class="anticon anticon-check finish-icon">
                  <svg viewBox="64 64 896 896" class="" data-icon="check" width="1em" height="1em" fill={document.body.style.getPropertyValue('--mdc-theme-primary')} aria-hidden="true">
github Tencent / omi / packages / omiu / src / tab / index.js View on Github external
render(props) {
    return (
      <ul {...extractClass(props, 'o-tab')}>
        {props.children.map((item, index) => {
          const props = {}
          const isActive = item.attributes && item.attributes.active

          if (isActive) {
            props.class = 'active'
          } else {
            props.onClick = () => this.onClick(index)
          }

          return <li {...props}>{item.children[0]}</li>
        })}
      </ul>
    )
  }
})
github Tencent / omi / packages / omiu / src / equal-space / index.js View on Github external
render(props) {
    let itemProps = null
    if (props.itemMargin) {
      itemProps = { style: `margin:${props.itemMargin};` }
      delete props.itemMargin
    }

    return (
      <ul {...extractClass(props, 'o-equal-space')} {...props}>
        {props.children.map(child => {
          return (
            <li class="_item" {...itemProps}>
              {child}
            </li>
          )
        })}
      </ul>
    )
  }
})