/** * @license * * Copyright IBM Corp. 2019, 2021 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ import React from 'react'; /** * A descriptor for a React event prop of a custom element. */ interface CustomElementEventDescriptor { /** * The event name. */ name: string; /** * A boolean to detemine usage of capture mode or the event options. */ options?: boolean | EventListenerOptions; } /** * A descriptor for a React prop for an attribute of a custom element. */ interface CustomElementPropDescriptor { /** * The attribute name for the prop. */ attribute?: string | false; /** * The event name (or descriptor) for the prop. */ event?: string | CustomElementEventDescriptor; /** * A function that takes a property value and returns the corresponding attribute value. */ serialize?: (value: any) => string | void; } /** * A descriptor for a set of React props for attributes of a custom element. */ interface CustomElementPropsDescriptor { [propName: string]: CustomElementPropDescriptor; } /** * React props for the component `createCustomElementType()` generates. */ interface CustomElementTypeProps { /** * Ordinal prop. */ [propName: string]: any; /** * Child nodes. */ children?: React.ReactNode; } /** * @param name The tag name of the custom element. * @param descriptor A descriptor for a set of React props for attributes of a custom element. * @returns A React component working as a wrapper for the given custom element. * @example * import { render } from 'react-dom'; * import createCustomElementType, { booleanSerializer } from '/path/to/createCustomElementType'; * * const BXDropdown = createCustomElementType('bx-dropdown', { * disabled: { * // Sets `disabled` attribute when the React prop value is truthy, unsets otherwise * serialize: booleanSerializer, * }, * helperText: { * // Maps `helperText` React prop to `helper-text` attribute * attribute: 'helper-text', * }, * onBeforeSelect: { * // Sets `onBeforeSelect` React prop value as a listener of `bx-dropdown-beingselected` custom event * event: 'bx-dropdown-beingselected', * }, * }); * * render( * ( * { console.log('bx-dropdown-beingselected is fired!', event); }}> * Option 1 * Option 2 * Option 3 * * ) * document.body * ); */ declare const createReactCustomElementType: (name: string, descriptor: CustomElementPropsDescriptor) => React.ForwardRefExoticComponent & React.RefAttributes>; /** * @param value A React prop value. * @returns Serialized version of React prop value, as a boolean attribute in a custom element. */ export declare const booleanSerializer: (value: any) => "" | undefined; /** * @param value A React prop value. * @returns Serialized version of React prop value, as a number attribute in a custom element. */ export declare const numberSerializer: (value: any) => any; /** * @param value A React prop value. * @returns Serialized version of React prop value, as a object attribute in a custom element. */ export declare const objectSerializer: (value: any) => any; export default createReactCustomElementType; //# sourceMappingURL=createReactCustomElementType.d.ts.map