lodash-es#mapKeys TypeScript Examples

export function compileProps(props: any, ref?: any): any {
  const compiledProps = clone(props)
  if (!compiledProps.customize) {
    compiledProps.customize = {}
  }

  const rootCustomizeProps: any = (compiledProps.customize as any)['Root'] || {};
  /**
   * Convenience props: className, style
   * `className` will be injected into customize.Root { extendClassName: ... }
   * `style` will be injected into customize.Root { extendStyle: ... }
   * `id` will be injected into customize.Root { overrideId: ... }
   * `data-*` will be injected into customize.Root { dataAttributes: ... }
   * `aria-*` will be injected into customize.Root { ariaAttributes: ... }
   */
  if (compiledProps.className) rootCustomizeProps.extendClassName = classNames(compiledProps.className, rootCustomizeProps.extendClassName);
  if (compiledProps.style) rootCustomizeProps.extendStyle = Object.assign(compiledProps.style, rootCustomizeProps.extendStyle);
  if (compiledProps.id) rootCustomizeProps.overrideId = compiledProps.id;
  if (ref) rootCustomizeProps.ref = ref;

  let dataAttributes = pickBy(compiledProps, (v, k) => k.startsWith('data-'))
  dataAttributes = mapKeys(dataAttributes, (v, k) => k.replace('data-', ''))
  if (!isEmpty(dataAttributes)) {
    rootCustomizeProps.dataAttributes = Object.assign(dataAttributes, rootCustomizeProps.dataAttributes);
  }

  let ariaAttributes = pickBy(compiledProps, (v, k) => k.startsWith('aria-'))
  ariaAttributes = mapKeys(ariaAttributes, (v, k) => k.replace('aria-', ''))
  if (!isEmpty(ariaAttributes)) {
    rootCustomizeProps.ariaAttributes = Object.assign(ariaAttributes, rootCustomizeProps.ariaAttributes);
  }

  /**
   * set undefined if customize is empty
   */

  if (!isEmpty(rootCustomizeProps)) {
    (compiledProps.customize as any)['Root'] = rootCustomizeProps;
  }
  if (isEmpty(compiledProps.customize)) {
    compiledProps.customize = undefined;
  }

  compiledProps.ref = ref;

  return compiledProps
}

export function IntrinsicNode<T extends keyof JSX.IntrinsicElements, N extends string>(tagName: T, nodeName: N, options: NodeCustomizeOptions) {
  const nodeClassName = [options.prefix, options.name, nodeName].join(options.separator)

  const Node = React.forwardRef((innerProps: JSX.IntrinsicElements[T], _ref) => {
    const { customize } = (MemoNode as any)['CustomizeProps'] as Readonly<{ customize?: IntrinsicNodeCustomizeProps }>
    const id = customize?.overrideId || innerProps.id
    const className = (() => {
      if (customize?.overrideClassName) return customize.overrideClassName
      const innerClassName = innerProps.className
      const finalClassName = classNames(nodeClassName, innerClassName, customize?.extendClassName)
      return finalClassName
    })()
    const style = (() => {
      if (customize?.overrideStyle) return customize.overrideStyle
      const innerStyle = innerProps.style
      const finalStyle = merge(innerStyle, customize?.extendStyle)
      return isEmpty(finalStyle) ? undefined : finalStyle
    })()
    const dataAttributes = (() => {
      if (!customize?.dataAttributes) return {}
      /**
       * @reference https://www.w3.org/TR/2008/REC-xml-20081126/#NT-Name
       * TODO: // fix regex for supporting unicode
       */
      const validDataAttributesCharactersRegex = /^([A-Za-z0-9-])*$/
      let result = customize.dataAttributes
      result = pickBy(result, (v, k) => validDataAttributesCharactersRegex.test(k))
      result = mapKeys(result, (v, k) => `data-${k}`)
      return result
    })()
    const children = (() => {
      /**
       * <select><option> only support string type children,
       * if pass Fragments to children, it will show [Object Object] in html.
       */
      if (tagName === 'option') return innerProps.children
      /**
       * <input> <textarea> <hr> is a void element tag and must not have `children`.
       */
      if (['input', 'textarea', 'hr'].includes(tagName)) return undefined
      if (customize?.overrideChildren) return customize.overrideChildren
      return <>{customize?.extendChildrenBefore}{innerProps.children}{customize?.extendChildrenAfter}</>
    })()

    const ariaAttributes = (() => {
      if (!customize?.ariaAttributes) return {}
      return mapKeys(customize.ariaAttributes, (v, k) => `aria-${k}`)
    })()

    /**
     * Merge both customize ref and component inner ref.
     */
    const ref = mergeRefs([customize?.ref, _ref])

    /**
     * Merge both customize functions and component inner onXXX callback functions.
     */
    const mergedCallbackFunctions = (() => {
      const propsObj = innerProps as any
      const customizeObj = (customize || {}) as any

      const data: any = {}
      const attrs = uniq([
        ...Object.keys(propsObj),
        ...Object.keys(customizeObj),
      ])
      for (const attr of attrs) {
        if (attr.startsWith('on')) {
          const propsObjFunctionExist = !!(propsObj[attr] && typeof propsObj[attr] === 'function')
          const customizeObjFunctionExist = !!(customizeObj[attr] && typeof customizeObj[attr] === 'function')

          data[attr] = (...args: any[]) => {
            if (propsObjFunctionExist) {
              propsObj[attr](...args);
            }
            if (customizeObjFunctionExist) {
              customizeObj[attr](...args);
            }
          };
        }
      }
      return data
    })()

    return React.createElement(tagName, {
      ...omit(innerProps, 'children', 'ref', 'className', 'style'),
      ...mergedCallbackFunctions,
      ...dataAttributes,
      ...ariaAttributes,
      ref,
      id, className, style,
    }, children)
  })
  const MemoNode = React.memo(Node)
  MemoNode.type.displayName = `<UUI> [IntrinsicNode] ${nodeName}`
  return MemoNode
}