classnames icon indicating copy to clipboard operation
classnames copied to clipboard

add support for hyperscript

Open lesar opened this issue 4 years ago • 1 comments

at this row if we can make join on classes parameterized we can use on hyperscript too.
some like this:

var classSeparator = ' '

export function cfg(opt) {
  if (opt && opt.classSeparator) {
    classSeparator = opt.classseparator
  }
}
export classNames() {
//........
return classes.join(classSeparator);
//........
}
// ....

In this manner a user can import cfg on first main js file and do:

cfg({ classSeparator: '.' })
// ......
classNames({ pio: true, bau: true })
// to get
// 'pio.bau'

this can be use in hypescript:

h('div.'+classNames({pio: true, bau:true}), text)

what do you think about?

lesar avatar May 25 '21 15:05 lesar

Other solution can be this:

const hasOwn = {}.hasOwnProperty

function _classNames () {
  const classes = []

  for (let i = 0; i < arguments.length; i++) {
    const arg = arguments[i]
    if (!arg) continue

    const argType = typeof arg

    if (argType === 'string' || argType === 'number') {
      classes.push(arg)
    } else if (Array.isArray(arg)) {
      if (arg.length) {
        const inner = _classNames.apply(null, arg)
        if (inner) {
          classes.push(inner)
        }
      }
    } else if (argType === 'object') {
      if (arg.toString === Object.prototype.toString) {
        for (const key in arg) {
          if (hasOwn.call(arg, key) && arg[key]) {
            classes.push(key)
          }
        }
      } else {
        classes.push(arg.toString())
      }
    }
  }
  return classes
}
export function classNames () {
  const classes = _classNames.apply(null, arguments)
  return classes.join(' ')
}
export function hclass () {
  const classes = _classNames.apply(null, arguments)
  return classes.join('.')
}

lesar avatar May 25 '21 16:05 lesar

I think hyperscript might be out of scope for this library

dcousens avatar Sep 13 '22 12:09 dcousens