How to use the omi.classNames 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 / icon / index.tsx View on Github external
render(props) {
    return (
      <i {...extractClass(props, 'm-icon')} >
        <svg
          viewBox={'0 0 ' + props.view + ' ' + props.view}
          class={classNames({ rotate: props.rotate })}
          width={props.scale + 'em'}
          height={props.scale + 'em'}
          fill={props.color}
          aria-hidden="true"
        >
          {props.paths ? (
            props.paths.map(item => {
              const attrs = { d: item.path, fill: props.color || 'black' }
              if (item.color) attrs.fill = item.color
              return <path {...attrs}></path>
            })
          ) : <path d={props.path} />}
        </svg>
        {props.children && (
          <div style={`color:${props.color || 'black'};`}>
            {props.children[0]}
github Tencent / omi / packages / omim / src / tree / index.tsx View on Github external
state = this._isChecked(node, { checked: 0, unchecked: 0 }, true)
    }
    return <ul>
      <li class={classNames('tree-item', {
        'close': node.close
      })}>
        {node.children && node.children.length > 0 && <svg onClick={_ => this.toggle(node.id, !node.close, node)} viewBox="0 0 1024 1024"
          class="arrow" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
          <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
        </svg>}
        {this.props.checkbox && <span onClick={_ => this._check(node, state)} class={classNames('mdc-tree-checkbox', {
          'mdc-tree-checkbox-disabled': node.disabled,
          'mdc-tree-checkbox-checked': (node.children && node.children.length > 0) ? state === 'checked' : node.checked,
          'mdc-tree-checkbox-indeterminate': (node.children && node.children.length > 0) ? state === 'indeterminate' : false
        })}><span class="mdc-tree-checkbox-inner"></span></span>}
        <span onClick={_ => this.onNodeClick(node)} class={classNames('mdc-tree-title', {
          'selected': node.selected
        })}>{node.icon && <i class='material-icons'>{node.icon}</i>}<span class='text'>{node.title}</span></span>

        <div class='children' style={`height: ${node.close ? 0 : (node.children ? (this._getChildCount(node)) * 32 : 0)}px;`}> {node.children && node.children.length > 0 && node.children.map(_ => this.renderNode(_))}</div>
      </li>
    </ul>
  }
github Tencent / omi / packages / omim / src / radio / index.tsx View on Github external
render(props) {

    return (
      <div onClick={this.clickHandler} {...extractClass(props, 'mdc-form-field', {
        'mdc-checkbox--disabled': props.disabled
      })}>
        <div class={classNames('mdc-radio', {
          'mdc-radio--disabled': props.disabled
        })}>
          <input type="radio" {...extract(props, ['checked', 'value', 'disabled'])}
            class="mdc-radio__native-control"
            id="radio" />
          <div class="mdc-radio__background">
            <div class="mdc-radio__outer-circle"></div>
            <div class="mdc-radio__inner-circle"></div>
          </div>
        </div>
        <label for="radio">{props.label}</label>
      </div>
    )
  }
github Tencent / omi / packages / omim / src / action-sheet / index.tsx View on Github external
return this.props.actions.map((action, idx) => {
      const { label, className, ...others } = action
      const cls = classNames({
        'm-actionsheet__cell': true,
        [className]: className
      })

      return (
        <div key={idx} onClick={_ => this.actionClick(action)} {...others} className={cls}>
          {label}
        </div>
      )
    })
  }
github Tencent / omi / packages / omim / src / nav / index.tsx View on Github external
renderNode(node, level) {
		if (node.selected) {
			this._preSelected = node.id
		}
		let next = level + 1
		return <ul>
			<li class={classNames('tree-item', {
				'close': node.close
			})}>


				<span onClick={_ => this.onNodeClick(node)} style={`padding-left: ${level * 24 + 10}px;`} class={classNames('mdc-tree-title', {
					'selected': node.selected
				})}>{node.icon && <i class='material-icons'>{node.icon}</i>}<span class='text'>{node.title}</span>
					{node.children && node.children.length > 0 && <svg onClick={_ => this.toggle(_, node)} viewBox="0 0 1024 1024"
						class="arrow" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
						<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
					</svg>}
				</span>


				<div class='children' style={`height: ${node.close ? 0 : (node.children ? (this._getChildCount(node)) * 40 : 0)}px;`}> {node.children && node.children.length > 0 && node.children.map(_ => this.renderNode(_, next))}</div>
			</li>
		</ul>
	}
github Tencent / omi / packages / omim / src / tree / index.tsx View on Github external
if (node.selected) {
      this._preSelected = node.id
    }
    let state
    if (this.props.checkbox && node.children && node.children.length > 0) {
      state = this._isChecked(node, { checked: 0, unchecked: 0 }, true)
    }
    return <ul>
      <li class={classNames('tree-item', {
        'close': node.close
      })}>
        {node.children && node.children.length > 0 && <svg onClick={_ => this.toggle(node.id, !node.close, node)} viewBox="0 0 1024 1024"
          class="arrow" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
          <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
        </svg>}
        {this.props.checkbox && <span onClick={_ => this._check(node, state)} class={classNames('mdc-tree-checkbox', {
          'mdc-tree-checkbox-disabled': node.disabled,
          'mdc-tree-checkbox-checked': (node.children && node.children.length > 0) ? state === 'checked' : node.checked,
          'mdc-tree-checkbox-indeterminate': (node.children && node.children.length > 0) ? state === 'indeterminate' : false
        })}><span class="mdc-tree-checkbox-inner"></span></span>}
        <span onClick={_ => this.onNodeClick(node)} class={classNames('mdc-tree-title', {
          'selected': node.selected
        })}>{node.icon && <i class='material-icons'>{node.icon}</i>}<span class='text'>{node.title}</span></span>

        <div class='children' style={`height: ${node.close ? 0 : (node.children ? (this._getChildCount(node)) * 32 : 0)}px;`}> {node.children && node.children.length > 0 && node.children.map(_ => this.renderNode(_))}</div>
      </li>
    </ul>
  }
github Tencent / omi / packages / omim / src / top-app-bar / index.tsx View on Github external
props.actionItems.map((item, index) => {
            return <omim accessKey={index + ''} class={classNames('mdc-top-app-bar__action-item', {'material-icons': !item.text})} onClick={this.onAction}>{typeof item.text === 'string' ? item.text : item}</omim>
          }) : (this.tagNum['ACTIONITEM'] && this.tagNum['ACTIONITEM'].map((_, index) => {
            return <slot accessKey={index + ''} class='mdc-top-app-bar__action-item' name={'ACTIONITEM' + index} onClick={this.onAction}></slot>
github Tencent / omi / packages / omim / src / top-app-bar / index.tsx View on Github external
{props.navigations ? props.navigations.map((item, index) => {
            return <omim accessKey={index + ''} class={classNames('mdc-top-app-bar__navigation-icon', {'material-icons': !item.text})} onClick={this.onNavigation}>{typeof item.text === 'string' ? item.text : item}</omim>
          }) : (this.tagNum['NAVIGATION'] && this.tagNum['NAVIGATION'].map((_, index) => {
            return <slot accessKey={index + ''} class='mdc-top-app-bar__navigation-icon' name={'NAVIGATION' + index} onClick={this.onNavigation}></slot>
github Tencent / omi / packages / omiu / src / action-sheet / index.js View on Github external
return this.props.actions.map((action, idx) => {
      const { label, className, ...others } = action
      const cls = classNames({
        'weui-actionsheet__cell': true,
        [className]: className
      })

      return (
        <div key={idx} {...others} className={cls}>
          {label}
        </div>
      )
    })
  }