vtils/react/useClassName.js

一个面向业务的 JavaScript/TypeScript 实用程序库。

import { useMemo } from 'react';

/**
 * 获取类名字符串。
 *
 * @public
 * @param getClassValues 获取类名列表函数
 * @param deps 当依赖变更时重新获取
 * @returns 返回类名字符串
 * @example
 * ```typescript
 * const [mini, setMini] = useState(true)
 * const buttonClassName = useClassName(() => [
 *   'ui-btn',
 *   mini && 'ui-btn_mini',
 * ], [mini])
 * console.log(buttonClassName) // => 'ui-btn ui-btn_mini'
 * setMini(false)
 * console.log(buttonClassName) // => 'ui-btn'
 * ```
 */
export function useClassName(getClassValues, deps) {
  var className = useMemo(function () {
    var classValues = getClassValues();
    if (classValues) {
      var validClassValues = classValues.filter(function (value) {
        return typeof value === 'string' && value !== '';
      });
      return validClassValues.length ? validClassValues.join(' ') : undefined;
    }
    return undefined;
  }, deps);
  return className;
}