@pine-ds/react
Version:
Pine Web Components React Wrapper
290 lines (281 loc) • 17.5 kB
JavaScript
import { __rest } from 'tslib';
import React, { createElement } from 'react';
import 'react-dom';
import { defineCustomElement } from '@pine-ds/core/components/mock-pds-modal.js';
import { defineCustomElement as defineCustomElement$1 } from '@pine-ds/core/components/pds-accordion.js';
import { defineCustomElement as defineCustomElement$2 } from '@pine-ds/core/components/pds-alert.js';
import { defineCustomElement as defineCustomElement$3 } from '@pine-ds/core/components/pds-avatar.js';
import { defineCustomElement as defineCustomElement$4 } from '@pine-ds/core/components/pds-box.js';
import { defineCustomElement as defineCustomElement$5 } from '@pine-ds/core/components/pds-button.js';
import { defineCustomElement as defineCustomElement$6 } from '@pine-ds/core/components/pds-checkbox.js';
import { defineCustomElement as defineCustomElement$7 } from '@pine-ds/core/components/pds-chip.js';
import { defineCustomElement as defineCustomElement$8 } from '@pine-ds/core/components/pds-combobox.js';
import { defineCustomElement as defineCustomElement$9 } from '@pine-ds/core/components/pds-copytext.js';
import { defineCustomElement as defineCustomElement$a } from '@pine-ds/core/components/pds-divider.js';
import { defineCustomElement as defineCustomElement$b } from '@pine-ds/core/components/pds-dropdown-menu.js';
import { defineCustomElement as defineCustomElement$c } from '@pine-ds/core/components/pds-dropdown-menu-item.js';
import { defineCustomElement as defineCustomElement$d } from '@pine-ds/core/components/pds-dropdown-menu-separator.js';
import { defineCustomElement as defineCustomElement$e } from '@pine-ds/core/components/pds-filter.js';
import { defineCustomElement as defineCustomElement$f } from '@pine-ds/core/components/pds-filters.js';
import { defineCustomElement as defineCustomElement$g } from '@pine-ds/core/components/pds-image.js';
import { defineCustomElement as defineCustomElement$h } from '@pine-ds/core/components/pds-input.js';
import { defineCustomElement as defineCustomElement$i } from '@pine-ds/core/components/pds-link.js';
import { defineCustomElement as defineCustomElement$j } from '@pine-ds/core/components/pds-loader.js';
import { defineCustomElement as defineCustomElement$k } from '@pine-ds/core/components/pds-modal.js';
import { defineCustomElement as defineCustomElement$l } from '@pine-ds/core/components/pds-modal-content.js';
import { defineCustomElement as defineCustomElement$m } from '@pine-ds/core/components/pds-modal-footer.js';
import { defineCustomElement as defineCustomElement$n } from '@pine-ds/core/components/pds-modal-header.js';
import { defineCustomElement as defineCustomElement$o } from '@pine-ds/core/components/pds-popover.js';
import { defineCustomElement as defineCustomElement$p } from '@pine-ds/core/components/pds-progress.js';
import { defineCustomElement as defineCustomElement$q } from '@pine-ds/core/components/pds-property.js';
import { defineCustomElement as defineCustomElement$r } from '@pine-ds/core/components/pds-radio.js';
import { defineCustomElement as defineCustomElement$s } from '@pine-ds/core/components/pds-row.js';
import { defineCustomElement as defineCustomElement$t } from '@pine-ds/core/components/pds-select.js';
import { defineCustomElement as defineCustomElement$u } from '@pine-ds/core/components/pds-sortable.js';
import { defineCustomElement as defineCustomElement$v } from '@pine-ds/core/components/pds-sortable-item.js';
import { defineCustomElement as defineCustomElement$w } from '@pine-ds/core/components/pds-switch.js';
import { defineCustomElement as defineCustomElement$x } from '@pine-ds/core/components/pds-tab.js';
import { defineCustomElement as defineCustomElement$y } from '@pine-ds/core/components/pds-table.js';
import { defineCustomElement as defineCustomElement$z } from '@pine-ds/core/components/pds-table-body.js';
import { defineCustomElement as defineCustomElement$A } from '@pine-ds/core/components/pds-table-cell.js';
import { defineCustomElement as defineCustomElement$B } from '@pine-ds/core/components/pds-table-head.js';
import { defineCustomElement as defineCustomElement$C } from '@pine-ds/core/components/pds-table-head-cell.js';
import { defineCustomElement as defineCustomElement$D } from '@pine-ds/core/components/pds-table-row.js';
import { defineCustomElement as defineCustomElement$E } from '@pine-ds/core/components/pds-tabpanel.js';
import { defineCustomElement as defineCustomElement$F } from '@pine-ds/core/components/pds-tabs.js';
import { defineCustomElement as defineCustomElement$G } from '@pine-ds/core/components/pds-text.js';
import { defineCustomElement as defineCustomElement$H } from '@pine-ds/core/components/pds-textarea.js';
import { defineCustomElement as defineCustomElement$I } from '@pine-ds/core/components/pds-toast.js';
import { defineCustomElement as defineCustomElement$J } from '@pine-ds/core/components/pds-tooltip.js';
import { defineCustomElement as defineCustomElement$K } from '@pine-ds/icons/components/pds-icon.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 = {}) => {
if (node instanceof Element) {
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;
const currentClasses = arrayToMap(classList);
const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
const finalClassNames = [];
currentClasses.forEach((currentClass) => {
if (incomingPropClasses.has(currentClass)) {
finalClassNames.push(currentClass);
incomingPropClasses.delete(currentClass);
}
else if (!oldPropClasses.has(currentClass)) {
finalClassNames.push(currentClass);
}
});
incomingPropClasses.forEach((s) => finalClassNames.push(s));
return finalClassNames.join(' ');
};
const transformReactEventName = (eventNameSuffix) => {
switch (eventNameSuffix) {
case 'doubleclick':
return 'dblclick';
}
return eventNameSuffix;
};
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];
if (oldEventHandler) {
node.removeEventListener(eventName, oldEventHandler);
}
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) {
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 {
const type = typeof value;
if (type === 'string' || type === 'boolean' || type === 'number') {
acc[camelToDashCase(name)] = value;
}
}
return acc;
}, {});
if (manipulatePropsFunction) {
propsToPass = manipulatePropsFunction(this.props, propsToPass);
}
const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
return createElement(tagName, newProps, children);
}
static get displayName() {
return displayName;
}
};
if (ReactComponentContext) {
ReactComponent.contextType = ReactComponentContext;
}
return createForwardRef(ReactComponent, displayName);
};
const MockPdsModal = createReactComponent('mock-pds-modal', undefined, undefined, defineCustomElement);
const PdsAccordion = createReactComponent('pds-accordion', undefined, undefined, defineCustomElement$1);
const PdsAlert = createReactComponent('pds-alert', undefined, undefined, defineCustomElement$2);
const PdsAvatar = createReactComponent('pds-avatar', undefined, undefined, defineCustomElement$3);
const PdsBox = createReactComponent('pds-box', undefined, undefined, defineCustomElement$4);
const PdsButton = createReactComponent('pds-button', undefined, undefined, defineCustomElement$5);
const PdsCheckbox = createReactComponent('pds-checkbox', undefined, undefined, defineCustomElement$6);
const PdsChip = createReactComponent('pds-chip', undefined, undefined, defineCustomElement$7);
const PdsCombobox = createReactComponent('pds-combobox', undefined, undefined, defineCustomElement$8);
const PdsCopytext = createReactComponent('pds-copytext', undefined, undefined, defineCustomElement$9);
const PdsDivider = createReactComponent('pds-divider', undefined, undefined, defineCustomElement$a);
const PdsDropdownMenu = createReactComponent('pds-dropdown-menu', undefined, undefined, defineCustomElement$b);
const PdsDropdownMenuItem = createReactComponent('pds-dropdown-menu-item', undefined, undefined, defineCustomElement$c);
const PdsDropdownMenuSeparator = createReactComponent('pds-dropdown-menu-separator', undefined, undefined, defineCustomElement$d);
const PdsFilter = createReactComponent('pds-filter', undefined, undefined, defineCustomElement$e);
const PdsFilters = createReactComponent('pds-filters', undefined, undefined, defineCustomElement$f);
const PdsImage = createReactComponent('pds-image', undefined, undefined, defineCustomElement$g);
const PdsInput = createReactComponent('pds-input', undefined, undefined, defineCustomElement$h);
const PdsLink = createReactComponent('pds-link', undefined, undefined, defineCustomElement$i);
const PdsLoader = createReactComponent('pds-loader', undefined, undefined, defineCustomElement$j);
const PdsModal = createReactComponent('pds-modal', undefined, undefined, defineCustomElement$k);
const PdsModalContent = createReactComponent('pds-modal-content', undefined, undefined, defineCustomElement$l);
const PdsModalFooter = createReactComponent('pds-modal-footer', undefined, undefined, defineCustomElement$m);
const PdsModalHeader = createReactComponent('pds-modal-header', undefined, undefined, defineCustomElement$n);
const PdsPopover = createReactComponent('pds-popover', undefined, undefined, defineCustomElement$o);
const PdsProgress = createReactComponent('pds-progress', undefined, undefined, defineCustomElement$p);
const PdsProperty = createReactComponent('pds-property', undefined, undefined, defineCustomElement$q);
const PdsRadio = createReactComponent('pds-radio', undefined, undefined, defineCustomElement$r);
const PdsRow = createReactComponent('pds-row', undefined, undefined, defineCustomElement$s);
const PdsSelect = createReactComponent('pds-select', undefined, undefined, defineCustomElement$t);
const PdsSortable = createReactComponent('pds-sortable', undefined, undefined, defineCustomElement$u);
const PdsSortableItem = createReactComponent('pds-sortable-item', undefined, undefined, defineCustomElement$v);
const PdsSwitch = createReactComponent('pds-switch', undefined, undefined, defineCustomElement$w);
const PdsTab = createReactComponent('pds-tab', undefined, undefined, defineCustomElement$x);
const PdsTable = createReactComponent('pds-table', undefined, undefined, defineCustomElement$y);
const PdsTableBody = createReactComponent('pds-table-body', undefined, undefined, defineCustomElement$z);
const PdsTableCell = createReactComponent('pds-table-cell', undefined, undefined, defineCustomElement$A);
const PdsTableHead = createReactComponent('pds-table-head', undefined, undefined, defineCustomElement$B);
const PdsTableHeadCell = createReactComponent('pds-table-head-cell', undefined, undefined, defineCustomElement$C);
const PdsTableRow = createReactComponent('pds-table-row', undefined, undefined, defineCustomElement$D);
const PdsTabpanel = createReactComponent('pds-tabpanel', undefined, undefined, defineCustomElement$E);
const PdsTabs = createReactComponent('pds-tabs', undefined, undefined, defineCustomElement$F);
const PdsText = createReactComponent('pds-text', undefined, undefined, defineCustomElement$G);
const PdsTextarea = createReactComponent('pds-textarea', undefined, undefined, defineCustomElement$H);
const PdsToast = createReactComponent('pds-toast', undefined, undefined, defineCustomElement$I);
const PdsTooltip = createReactComponent('pds-tooltip', undefined, undefined, defineCustomElement$J);
const PdsIconInner = createReactComponent('pds-icon', undefined, undefined, defineCustomElement$K);
class PdsIconContainer extends React.PureComponent {
constructor(props) {
super(props);
if (this.props.name) {
console.warn('In Pine React, you import icons from "@pine-ds/icons/icons" and set the icon you imported to the "icon" property. Setting the "name" property has no effect.');
}
}
render() {
const _a = this.props, { icon } = _a, rest = __rest(_a, ["icon"]);
return (React.createElement(PdsIconInner, Object.assign({ ref: this.props.forwardedRef, icon: icon }, rest), this.props.children));
}
}
const PdsIcon = createForwardRef(PdsIconContainer, 'PdsIcon');
export { MockPdsModal, PdsAccordion, PdsAlert, PdsAvatar, PdsBox, PdsButton, PdsCheckbox, PdsChip, PdsCombobox, PdsCopytext, PdsDivider, PdsDropdownMenu, PdsDropdownMenuItem, PdsDropdownMenuSeparator, PdsFilter, PdsFilters, PdsIcon, PdsImage, PdsInput, PdsLink, PdsLoader, PdsModal, PdsModalContent, PdsModalFooter, PdsModalHeader, PdsPopover, PdsProgress, PdsProperty, PdsRadio, PdsRow, PdsSelect, PdsSortable, PdsSortableItem, PdsSwitch, PdsTab, PdsTable, PdsTableBody, PdsTableCell, PdsTableHead, PdsTableHeadCell, PdsTableRow, PdsTabpanel, PdsTabs, PdsText, PdsTextarea, PdsToast, PdsTooltip };
//# sourceMappingURL=index.js.map