bulmil-react - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [0.5.1](https://github.com/gomah/bulmil/compare/bulmil-react@0.5.0...bulmil-react@0.5.1) (2020-06-28)
+
+**Note:** Version bump only for package bulmil-react
+
+
+
+
+
 # [0.5.0](https://github.com/gomah/bulmil/compare/bulmil-react@0.2.12...bulmil-react@0.5.0) (2020-06-27)
@@ -8,0 +16,0 @@

dist/components.js

@@ -5,4 +5,2 @@ /* eslint-disable */
 import { createReactComponent } from './react-component-lib';
-import { defineCustomElements, applyPolyfills } from 'bulmil/dist/loader';
-applyPolyfills().then(() => defineCustomElements());
 export const BmBox = /*@__PURE__*/ createReactComponent('bm-box');
@@ -9,0 +7,0 @@ export const BmBreadcrumb = /*@__PURE__*/ createReactComponent('bm-breadcrumb');

dist/react-component-lib/createComponent.d.ts

 import React from 'react';
-export declare const createReactComponent: <PropType, ElementType>(tagName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").IonicReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+import { HTMLStencilElement } from '@stencil/core/internal/stencil-public-runtime';
+interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
+    forwardedRef?: React.RefObject<ElementType>;
+    ref?: React.Ref<any>;
+}
+export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export {};

dist/react-component-lib/createComponent.js

@@ -13,4 +13,4 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
-import { attachEventProps, createForwardRef, dashToPascalCase, isCoveredByReact, } from './utils/index';
-export const createReactComponent = (tagName) => {
+import { attachProps, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs, } from './utils';
+export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction = undefined) => {
     const displayName = dashToPascalCase(tagName);
@@ -20,3 +20,5 @@ const ReactComponent = class extends React.Component {
             super(props);
-            this.ref = React.createRef();
+            this.setComponentElRef = (element) => {
+                this.componentEl = element;
+            };
         }
@@ -27,24 +29,19 @@ componentDidMount() {
         componentDidUpdate(prevProps) {
-            const node = this.ref.current;
-            attachEventProps(node, this.props, 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"]);
-            const propsToPass = Object.keys(cProps).reduce((acc, name) => {
-                const isEventProp = name.indexOf('on') === 0 && name[2] === name[2].toUpperCase();
-                const isDataProp = name.indexOf('data-') === 0;
-                const isAriaProp = name.indexOf('aria-') === 0;
-                if (isEventProp) {
+            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
                     const eventName = name.substring(2).toLowerCase();
-                    if (typeof document !== "undefined" && isCoveredByReact(eventName)) {
+                    if (isCoveredByReact(eventName)) {
                         acc[name] = cProps[name];
                     }
                 }
-                else if (isDataProp || isAriaProp) {
-                    acc[name] = cProps[name];
-                }
                 return acc;
             }, {});
-            const newProps = Object.assign(Object.assign({}, propsToPass), { ref: this.ref, style,
-                className });
+            if (manipulatePropsFunction) {
+                propsToPass = manipulatePropsFunction(this.props, propsToPass);
+            }
+            let newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
             return React.createElement(tagName, newProps, children);
@@ -56,4 +53,8 @@ }
     };
+    // If context was passed to createReactComponent then conditionally add it to the Component Class
+    if (ReactComponentContext) {
+        ReactComponent.contextType = ReactComponentContext;
+    }
     return createForwardRef(ReactComponent, displayName);
 };
 //# sourceMappingURL=createComponent.js.map

dist/react-component-lib/createOverlayComponent.d.ts

@@ -0,45 +1,20 @@
+import { OverlayEventDetail } from './interfaces';
 import React from 'react';
-interface LoadingElement {
-    present: () => any;
-    dismiss: () => any;
+interface OverlayElement extends HTMLElement {
+    present: () => Promise<void>;
+    dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
 }
-interface ReactOverlayProps<E> {
+export interface ReactOverlayProps {
     children?: React.ReactNode;
     isOpen: boolean;
-    onDidDismiss?: (event: CustomEvent<E>) => void;
+    onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
 }
-export declare function createOverlayComponent<T extends object, LoadingElementType extends LoadingElement, OverlayEventDetail>(displayName: string, controller: {
-    create: (options: any) => Promise<LoadingElementType>;
-}): {
-    new (props: T & ReactOverlayProps<OverlayEventDetail>): {
-        controller?: LoadingElementType;
-        el: HTMLDivElement;
-        componentDidMount(): void;
-        componentDidUpdate(prevProps: T & ReactOverlayProps<OverlayEventDetail>): Promise<void>;
-        present(prevProps?: T & ReactOverlayProps<OverlayEventDetail>): Promise<void>;
-        render(): React.ReactPortal;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<T & ReactOverlayProps<OverlayEventDetail>>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
-        forceUpdate(callback?: () => void): void;
-        readonly props: Readonly<T & ReactOverlayProps<OverlayEventDetail>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<T & ReactOverlayProps<OverlayEventDetail>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<T & ReactOverlayProps<OverlayEventDetail>>, prevState: Readonly<{}>): any;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<T & ReactOverlayProps<OverlayEventDetail>>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<T & ReactOverlayProps<OverlayEventDetail>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<T & ReactOverlayProps<OverlayEventDetail>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<T & ReactOverlayProps<OverlayEventDetail>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    readonly displayName: string;
-    contextType?: React.Context<any>;
-};
+export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(displayName: string, controller: {
+    create: (options: any) => Promise<OverlayType>;
+}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
+    forwardedRef?: React.RefObject<OverlayType>;
+}> & React.RefAttributes<OverlayType>>;
 export {};

dist/react-component-lib/createOverlayComponent.js

@@ -23,9 +23,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import ReactDOM from 'react-dom';
-import { attachEventProps } from './utils/attachEventProps';
-export function createOverlayComponent(displayName, controller) {
-    const dismissEventName = `on${displayName}DidDismiss`;
-    return class ReactOverlayComponent extends React.Component {
+import { attachProps } from './utils';
+export const createOverlayComponent = (displayName, controller) => {
+    const didDismissEventName = `on${displayName}DidDismiss`;
+    const didPresentEventName = `on${displayName}DidPresent`;
+    const willDismissEventName = `on${displayName}WillDismiss`;
+    const willPresentEventName = `on${displayName}WillPresent`;
+    class Overlay extends React.Component {
         constructor(props) {
             super(props);
             this.el = document.createElement('div');
+            this.handleDismiss = this.handleDismiss.bind(this);
         }
@@ -40,11 +44,25 @@ static get displayName() {
         }
+        componentWillUnmount() {
+            if (this.overlay) {
+                this.overlay.dismiss();
+            }
+        }
+        handleDismiss(event) {
+            if (this.props.onDidDismiss) {
+                this.props.onDidDismiss(event);
+            }
+            if (this.props.forwardedRef) {
+                this.props.forwardedRef.current = undefined;
+            }
+        }
         componentDidUpdate(prevProps) {
             return __awaiter(this, void 0, void 0, function* () {
+                if (this.overlay) {
+                    attachProps(this.overlay, this.props, prevProps);
+                }
                 if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
                     this.present(prevProps);
                 }
-                if (this.controller &&
-                    prevProps.isOpen !== this.props.isOpen &&
-                    this.props.isOpen === false) {
-                    yield this.controller.dismiss();
+                if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+                    yield this.overlay.dismiss();
                 }
@@ -55,15 +73,20 @@ });
             return __awaiter(this, void 0, void 0, function* () {
-                // tslint:disable-next-line:no-empty
-                const _a = this.props, { children, isOpen, onDidDismiss = () => { } } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss"]);
-                const elementProps = Object.assign(Object.assign({}, cProps), { [dismissEventName]: onDidDismiss });
-                this.controller = yield controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
-                attachEventProps(this.controller, elementProps, prevProps);
-                this.controller.present();
+                const _a = this.props, { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss", "onDidPresent", "onWillDismiss", "onWillPresent"]);
+                const elementProps = Object.assign(Object.assign({}, cProps), { ref: this.props.forwardedRef, [didDismissEventName]: this.handleDismiss, [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e), [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e), [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e) });
+                this.overlay = yield controller.create(Object.assign(Object.assign({}, elementProps), { component: this.el, componentProps: {} }));
+                if (this.props.forwardedRef) {
+                    this.props.forwardedRef.current = this.overlay;
+                }
+                attachProps(this.overlay, elementProps, prevProps);
+                yield this.overlay.present();
             });
         }
         render() {
-            return ReactDOM.createPortal(this.props.children, this.el);
+            return ReactDOM.createPortal(this.props.isOpen ? this.props.children : null, this.el);
         }
-    };
-}
+    }
+    return React.forwardRef((props, ref) => {
+        return React.createElement(Overlay, Object.assign({}, props, { forwardedRef: ref }));
+    });
+};
 //# sourceMappingURL=createOverlayComponent.js.map

dist/react-component-lib/index.d.ts

 export { createReactComponent } from './createComponent';
-export { createControllerComponent } from './createControllerComponent';
 export { createOverlayComponent } from './createOverlayComponent';

dist/react-component-lib/index.js

 export { createReactComponent } from './createComponent';
-export { createControllerComponent } from './createControllerComponent';
 export { createOverlayComponent } from './createOverlayComponent';
 //# sourceMappingURL=index.js.map

dist/react-component-lib/utils/index.d.ts

 import React from 'react';
-export declare const dashToPascalCase: (str: string) => string;
-export interface ReactProps {
-    class?: string;
-}
-export declare type IonicReactExternalProps<PropType, ElementType> = PropType & React.HTMLAttributes<ElementType> & ReactProps;
-export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<IonicReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
-export * from './attachEventProps';
+import { StyleReactProps } from '../interfaces';
+export declare type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
+export declare const mergeRefs: <ElementType>(...refs: React.Ref<ElementType>[]) => (value: ElementType) => void;
+export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
+export * from './attachProps';
+export * from './case';

dist/react-component-lib/utils/index.js

 import React from 'react';
-export const dashToPascalCase = (str) => str
-    .toLowerCase()
-    .split('-')
-    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
-    .join('');
+// The comma in the type is to trick typescript because it things a single generic in a tsx file is jsx
+export const mergeRefs = (...refs) => (value) => refs.forEach((ref) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        // This is typed as readonly so we need to allow for override
+        ref.current = value;
+    }
+});
 export const createForwardRef = (ReactComponent, displayName) => {
@@ -14,3 +19,4 @@ const forwardRef = (props, ref) => {
 };
-export * from './attachEventProps';
+export * from './attachProps';
+export * from './case';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "bulmil-react",
   "sideEffects": false,
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": "Gomah",
@@ -32,3 +32,3 @@ "license": "MIT",
     "jest-dom": "^4.0.0",
-    "np": "^6.2.4",
+    "np": "^6.2.5",
     "react": "^16.13.1",
@@ -40,3 +40,3 @@ "react-dom": "^16.13.1",
   "dependencies": {
-    "bulmil": "^0.5.0"
+    "bulmil": "^0.5.1"
   },
@@ -47,3 +47,3 @@ "peerDependencies": {
   },
-  "gitHead": "69e706c965848d7fb96b4cadc0e8b9a91cc5956d"
+  "gitHead": "f2a812ec40cee0d70ef0ce4904cffe85c0bed934"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

247952

increased by384.75%

Number of package files

39

increased by44.44%

Lines of code

1280

increased by168.34%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedbulmil@^0.5.1