@peculiar/fortify-webcomponents-react
Version:
React specific wrapper for @peculiar/fortify-webcomponents
234 lines (227 loc) • 11.6 kB
JavaScript
import { __rest } from 'tslib';
import * as React from 'react';
import { defineCustomElement } from '@peculiar/fortify-webcomponents/components/peculiar-fortify-certificates.js';
import { defineCustomElement as defineCustomElement$1 } from '@peculiar/fortify-webcomponents/components/peculiar-fortify-enrollment.js';
import { defineCustomElement as defineCustomElement$2 } from '@peculiar/certificates-viewer/components/peculiar-attribute-certificate-viewer.js';
import { defineCustomElement as defineCustomElement$3 } from '@peculiar/certificates-viewer/components/peculiar-button-menu.js';
import { defineCustomElement as defineCustomElement$4 } from '@peculiar/certificates-viewer/components/peculiar-certificate-decoder.js';
import { defineCustomElement as defineCustomElement$5 } from '@peculiar/certificates-viewer/components/peculiar-certificate-viewer.js';
import { defineCustomElement as defineCustomElement$6 } from '@peculiar/certificates-viewer/components/peculiar-certificates-viewer.js';
import { defineCustomElement as defineCustomElement$7 } from '@peculiar/certificates-viewer/components/peculiar-circular-progress.js';
import { defineCustomElement as defineCustomElement$8 } from '@peculiar/certificates-viewer/components/peculiar-crl-viewer.js';
import { defineCustomElement as defineCustomElement$9 } from '@peculiar/certificates-viewer/components/peculiar-csr-viewer.js';
import { defineCustomElement as defineCustomElement$a } from '@peculiar/certificates-viewer/components/peculiar-highlight-words.js';
import { defineCustomElement as defineCustomElement$b } from '@peculiar/certificates-viewer/components/peculiar-text-hider.js';
const dashToPascalCase = (str) => str
.toLowerCase()
.split('-')
.map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
.join('');
const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
const attachProps = (node, newProps, oldProps = {}) => {
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
if (node instanceof Element) {
// add any classes in className to the class list
const className = getClassName(node.classList, newProps, oldProps);
if (className !== '') {
node.className = className;
}
Object.keys(newProps).forEach((name) => {
if (name === 'children' ||
name === 'style' ||
name === 'ref' ||
name === 'class' ||
name === 'className' ||
name === 'forwardedRef') {
return;
}
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
const eventName = name.substring(2);
const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
if (!isCoveredByReact(eventNameLc)) {
syncEvent(node, eventNameLc, newProps[name]);
}
}
else {
node[name] = newProps[name];
const propType = typeof newProps[name];
if (propType === 'string') {
node.setAttribute(camelToDashCase(name), newProps[name]);
}
}
});
}
};
const getClassName = (classList, newProps, oldProps) => {
const newClassProp = newProps.className || newProps.class;
const oldClassProp = oldProps.className || oldProps.class;
// map the classes to Maps for performance
const currentClasses = arrayToMap(classList);
const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
const finalClassNames = [];
// loop through each of the current classes on the component
// to see if it should be a part of the classNames added
currentClasses.forEach((currentClass) => {
if (incomingPropClasses.has(currentClass)) {
// add it as its already included in classnames coming in from newProps
finalClassNames.push(currentClass);
incomingPropClasses.delete(currentClass);
}
else if (!oldPropClasses.has(currentClass)) {
// add it as it has NOT been removed by user
finalClassNames.push(currentClass);
}
});
incomingPropClasses.forEach((s) => finalClassNames.push(s));
return finalClassNames.join(' ');
};
/**
* Transforms a React event name to a browser event name.
*/
const transformReactEventName = (eventNameSuffix) => {
switch (eventNameSuffix) {
case 'doubleclick':
return 'dblclick';
}
return eventNameSuffix;
};
/**
* Checks if an event is supported in the current execution environment.
* @license Modernizr 3.0.0pre (Custom Build) | MIT
*/
const isCoveredByReact = (eventNameSuffix) => {
if (typeof document === 'undefined') {
return true;
}
else {
const eventName = 'on' + transformReactEventName(eventNameSuffix);
let isSupported = eventName in document;
if (!isSupported) {
const element = document.createElement('div');
element.setAttribute(eventName, 'return;');
isSupported = typeof element[eventName] === 'function';
}
return isSupported;
}
};
const syncEvent = (node, eventName, newEventHandler) => {
const eventStore = node.__events || (node.__events = {});
const oldEventHandler = eventStore[eventName];
// Remove old listener so they don't double up.
if (oldEventHandler) {
node.removeEventListener(eventName, oldEventHandler);
}
// Bind new listener.
node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
if (newEventHandler) {
newEventHandler.call(this, e);
}
}));
};
const arrayToMap = (arr) => {
const map = new Map();
arr.forEach((s) => map.set(s, s));
return map;
};
const setRef = (ref, value) => {
if (typeof ref === 'function') {
ref(value);
}
else if (ref != null) {
// Cast as a MutableRef so we can assign current
ref.current = value;
}
};
const mergeRefs = (...refs) => {
return (value) => {
refs.forEach((ref) => {
setRef(ref, value);
});
};
};
const createForwardRef = (ReactComponent, displayName) => {
const forwardRef = (props, ref) => {
return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
};
forwardRef.displayName = displayName;
return React.forwardRef(forwardRef);
};
const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
if (defineCustomElement !== undefined) {
defineCustomElement();
}
const displayName = dashToPascalCase(tagName);
const ReactComponent = class extends React.Component {
constructor(props) {
super(props);
this.setComponentElRef = (element) => {
this.componentEl = element;
};
}
componentDidMount() {
this.componentDidUpdate(this.props);
}
componentDidUpdate(prevProps) {
attachProps(this.componentEl, this.props, prevProps);
}
render() {
const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = __rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
const value = cProps[name];
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
const eventName = name.substring(2).toLowerCase();
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
acc[name] = value;
}
}
else {
// we should only render strings, booleans, and numbers as attrs in html.
// objects, functions, arrays etc get synced via properties on mount.
const type = typeof value;
if (type === 'string' || type === 'boolean' || type === 'number') {
acc[camelToDashCase(name)] = value;
}
}
return acc;
}, {});
const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
/**
* We use createElement here instead of
* React.createElement to work around a
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
* React.createElement causes all elements to be rendered
* as <tagname> instead of the actual Web Component.
*/
return React.createElement(tagName, newProps, children);
}
static get displayName() {
return displayName;
}
};
return createForwardRef(ReactComponent, displayName);
};
/**
* @license
* Copyright (c) Peculiar Ventures, LLC.
*
* This source code is licensed under the BSD 3-Clause license found in the
* LICENSE file in the root directory of this source tree.
*/
/* eslint-disable */
/* tslint:disable */
/* auto-generated react proxies */
const PeculiarFortifyCertificates = /*@__PURE__*/ createReactComponent('peculiar-fortify-certificates', undefined, undefined, defineCustomElement);
const PeculiarFortifyEnrollment = /*@__PURE__*/ createReactComponent('peculiar-fortify-enrollment', undefined, undefined, defineCustomElement$1);
const PeculiarAttributeCertificateViewer = /*@__PURE__*/ createReactComponent('peculiar-attribute-certificate-viewer', undefined, undefined, defineCustomElement$2);
const PeculiarButtonMenu = /*@__PURE__*/ createReactComponent('peculiar-button-menu', undefined, undefined, defineCustomElement$3);
const PeculiarCertificateDecoder = /*@__PURE__*/ createReactComponent('peculiar-certificate-decoder', undefined, undefined, defineCustomElement$4);
const PeculiarCertificateViewer = /*@__PURE__*/ createReactComponent('peculiar-certificate-viewer', undefined, undefined, defineCustomElement$5);
const PeculiarCertificatesViewer = /*@__PURE__*/ createReactComponent('peculiar-certificates-viewer', undefined, undefined, defineCustomElement$6);
const PeculiarCircularProgress = /*@__PURE__*/ createReactComponent('peculiar-circular-progress', undefined, undefined, defineCustomElement$7);
const PeculiarCrlViewer = /*@__PURE__*/ createReactComponent('peculiar-crl-viewer', undefined, undefined, defineCustomElement$8);
const PeculiarCsrViewer = /*@__PURE__*/ createReactComponent('peculiar-csr-viewer', undefined, undefined, defineCustomElement$9);
const PeculiarHighlightWords = /*@__PURE__*/ createReactComponent('peculiar-highlight-words', undefined, undefined, defineCustomElement$a);
const PeculiarTextHider = /*@__PURE__*/ createReactComponent('peculiar-text-hider', undefined, undefined, defineCustomElement$b);
export { PeculiarAttributeCertificateViewer, PeculiarButtonMenu, PeculiarCertificateDecoder, PeculiarCertificateViewer, PeculiarCertificatesViewer, PeculiarCircularProgress, PeculiarCrlViewer, PeculiarCsrViewer, PeculiarFortifyCertificates, PeculiarFortifyEnrollment, PeculiarHighlightWords, PeculiarTextHider };
//# sourceMappingURL=index.js.map