Socket
Socket
Sign inDemoInstall

cardon

Package Overview
Dependencies
5
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.2 to 1.0.3

src/Cardon.tsx

12

lib/Cardon.d.ts

@@ -1,2 +0,10 @@

import { ReactElement } from 'react';
export declare function Cardon(): ReactElement<any>;
export declare class Cardon {
/**
* Hide all cardon components
*/
static clear(): void;
/**
* Hide only the cardon component with the given key
*/
static hide(key: string): void;
}

31

lib/Cardon.js

@@ -1,14 +0,19 @@

import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { useEffect } from 'react';
import { CardonManager } from "./CardonManager";
export function Cardon() {
var _a = React.useState([]), cardList = _a[0], setCardList = _a[1];
useEffect(function () {
var cardListChangedCallback = function (componentList) {
setCardList(componentList);
};
return CardonManager.subscribe(cardListChangedCallback);
}, []);
return (_jsx(_Fragment, { children: cardList.map(function (Comp) { return _jsx(Comp, {}, void 0); }) }, void 0));
}
var Cardon = /** @class */ (function () {
function Cardon() {
}
/**
* Hide all cardon components
*/
Cardon.clear = function () {
CardonManager.clear();
};
/**
* Hide only the cardon component with the given key
*/
Cardon.hide = function (key) {
CardonManager.hide(key);
};
return Cardon;
}());
export { Cardon };

19

lib/CardonContainer.js

@@ -0,14 +1,21 @@

var __spreadArray = (this && this.__spreadArray) || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
to[j] = from[i];
return to;
};
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { useEffect } from 'react';
import React, { useEffect } from 'react';
import { CardonManager } from "./CardonManager";
export function CardonContainer() {
var _a = React.useState([]), cardList = _a[0], setCardList = _a[1];
var _a = React.useState([]), refList = _a[0], setRefList = _a[1];
useEffect(function () {
var cardListChangedCallback = function (componentList) {
setCardList(componentList);
var cardListChangedCallback = function (refList) {
setRefList(__spreadArray([], refList));
};
return CardonManager.subscribe(cardListChangedCallback);
}, []);
return (_jsx(_Fragment, { children: cardList.map(function (Comp, index) { return _jsx(Comp, {}, "CardonContainer_" + index); }) }, void 0));
return _jsx(_Fragment, { children: refList.map(function (ref) {
var Comp = ref.component;
return _jsx(Comp, {}, "CardonContainer_" + ref.key);
}) }, void 0);
}

10

lib/CardonManager.d.ts

@@ -1,10 +0,12 @@

/// <reference types="react" />
declare type CardonManagerSubscribeCallback = (componentList: React.ComponentType<any>[]) => void;
import { CardonRef } from "./withCardon";
declare type CardonManagerSubscribeCallback = (refList: CardonRef[]) => void;
export declare class CardonManager {
private static cardList;
private static refList;
private static cardonSubscribeList;
private static notify;
static append(component: React.ComponentType<any>): void;
static append(cardonRef: CardonRef): void;
static clear(): void;
static hide(key: string): void;
static subscribe(func: CardonManagerSubscribeCallback): () => void;
}
export {};

30

lib/CardonManager.js

@@ -5,11 +5,29 @@ var CardonManager = /** @class */ (function () {

CardonManager.notify = function () {
for (var index = 0; index < this.cardonSubscribeList.length; index++) {
var func = this.cardonSubscribeList[index];
func(this.cardList);
for (var _i = 0, _a = this.cardonSubscribeList; _i < _a.length; _i++) {
var func = _a[_i];
func(this.refList);
}
};
CardonManager.append = function (component) {
this.cardList.push(component);
CardonManager.append = function (cardonRef) {
this.refList.push(cardonRef);
this.notify();
};
CardonManager.clear = function () {
for (var _i = 0, _a = this.refList; _i < _a.length; _i++) {
var itemRef = _a[_i];
itemRef.resolve(undefined);
itemRef.resolve = function () { };
itemRef.setVisible(false);
itemRef.setVisible = function () { };
}
};
CardonManager.hide = function (key) {
var cardonRef = this.refList.find(function (cardonRef) { return cardonRef.key == key; });
if (cardonRef) {
cardonRef.resolve(undefined);
cardonRef.resolve = function () { };
cardonRef.setVisible(false);
cardonRef.setVisible = function () { };
}
};
CardonManager.subscribe = function (func) {

@@ -24,3 +42,3 @@ var _this = this;

};
CardonManager.cardList = [];
CardonManager.refList = [];
CardonManager.cardonSubscribeList = [];

@@ -27,0 +45,0 @@ return CardonManager;

1

lib/index.d.ts
export * from "./withCardon";
export * from "./CardonContainer";
export { Cardon as default } from "./Cardon";

1

lib/index.js
export * from "./withCardon";
export * from "./CardonContainer";
export { Cardon as default } from "./Cardon";

14

lib/withCardon.d.ts

@@ -22,2 +22,6 @@ import React from "react";

destroyOnHide?: boolean;
/**
* The key of the component. You can close the component by calling the 'CardonContainer.remove(key)' method.
*/
key?: string;
};

@@ -33,6 +37,12 @@ export declare type WithCardonShow<P, R> = (props?: P, callback?: (result: R) => void) => Promise<R>;

*
* By default, it calls the 'get' method that comes as props: `get(null)`
* By default, it calls the 'get' method that is passed as props: `get(undefined)`. If you call it with a parameter, the promise resolves with that value.
*/
hide: () => void;
hide: (rejectData: any) => void;
};
export declare type CardonRef = {
resolve: (value: any) => void;
setVisible: (value: boolean) => void;
key: string;
component: () => JSX.Element | null;
};
/**

@@ -39,0 +49,0 @@ * Wraps the component you want to make reusable and returns the `'show'` and `'hide'` functions within an object.

28

lib/withCardon.js

@@ -32,2 +32,9 @@ var __assign = (this && this.__assign) || function () {

var onShow = function () { };
var cardonKey = (options === null || options === void 0 ? void 0 : options.key) || Math.random().toString(36).substring(2);
var cardonRef = {
resolve: function (value) { },
setVisible: function (value) { },
key: cardonKey,
component: function () { return null; }
};
function WithCardonEnchanted() {

@@ -39,2 +46,3 @@ var _a = React.useState({ props: {}, resolve: function (data) { } }), params = _a[0], setParams = _a[1];

setVisible(true);
cardonRef.setVisible = setVisible;
};

@@ -54,19 +62,19 @@ var get = function (data) { return function () {

}
CardonManager.append(WithCardonEnchanted);
var resolveFunc = function (value) { };
cardonRef.component = WithCardonEnchanted;
CardonManager.append(cardonRef);
var show = function (props, callback) {
var promise = new Promise(function (resolve) {
onShow(resolve, props);
resolveFunc = resolve;
cardonRef.resolve = resolve;
});
if (callback && typeof callback === "function") {
promise.then(function (data) { return callback(data); });
if (typeof callback === "function") {
promise.then(callback);
}
return promise;
};
var hide = function () {
if (resolveFunc) {
resolveFunc(null);
resolveFunc = function (value) { };
}
var hide = function (rejectData) {
cardonRef.resolve(rejectData);
cardonRef.resolve = function (value) { };
cardonRef.setVisible(false);
cardonRef.setVisible = function (value) { };
};

@@ -73,0 +81,0 @@ var result = {

10

package.json
{
"name": "cardon",
"version": "1.0.2",
"version": "1.0.3",
"private": false,
"description": "Make reusable React cards, pop-ups or modals as an async function",
"description": "Create reusable React cards, pop-ups or modals with asynchronous functionality",
"keywords": [

@@ -21,6 +21,6 @@ "react",

"type": "git",
"url": "git+ssh://git@github.com/hepter/cardon.git"
"url": "https://github.com/hepter/cardon.git"
},
"license": "MIT",
"author": "Mustafa Kuru <mustafakuru042@gmail.com>",
"author": "Mustafa Kuru mustafakuru042@gmail.com",
"main": "lib/index.js",

@@ -37,3 +37,3 @@ "source": "src/index.ts",

},
"dependencies": {
"peerDependencies": {
"react": ">=16.8.0",

@@ -40,0 +40,0 @@ "react-dom": ">=16.8.0"

131

README.md

@@ -5,12 +5,10 @@ ![cardon](https://github.com/hepter/cardon/raw/master/docs/cardon.png)

## About
# Cardon: Reusable Asynchronous Functional Cards
Create reusable asynchronous functional cards.
Cardon is a tool that allows you to create reusable cards that can be used as asynchronous functions on any screen.
Allows to create the cards used on the pages once and allows them to be called as an async function on all screens.
## Demo
You can check out a live demo of Cardon on CodeSandbox.
## Demo
[![Edit Example Usage - cardon](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/example-usage-cardon-u60wc?fontsize=14&hidenavigation=1&theme=dark)

@@ -20,3 +18,4 @@

Install cardon as a dependency
To use Cardon in your project, install it as a dependency using either Yarn or NPM.
```shell

@@ -30,40 +29,59 @@ # Yarn

## Usage
## How to Use Cardon
Just need the `'CardonContainer'` and `'withCardon'` methods to use it.
Cardon provides two primary methods, `'CardonContainer'` and `'withCardon'`, for usage.
Component Name | Description
--- | ---
CardonContainer |Creates an instance for the cards and all cards are displayed inside here.
withCardon|Wraps the component you want to show as a card and injects properties named `'visible'` and `'get'` inside it and then returns an interface to use it.
| Component Name | Description |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| CardonContainer | It creates an instance for the cards. All cards are displayed within this container. |
| withCardon | This method wraps the component you want to display as a card, injects properties named `'visible'` and `'get'` into it, and then returns an interface for usage. |
##### `withCardon` Injected props
Name | Type | Description
--- | --- | ---
visible|boolean|The prop indicates whether the card should be visible or not. This value will change according to the call of the `'show'` or `'hide'` function
get | WithCardonGet|The prop is a callback generator function and all callback function must be created by calling the `'get'` function to return the desired callback value. Only created callback functions via `'get'` should be used in cards to works properly.
### `withCardon` Injected props
`withCardon` adds several props to the component it wraps.
| Name | Type | Description |
| ------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| visible | boolean | This property controls the visibility of the card. It toggles based on the invocation of the `'show'` or `'hide'` function. |
| get | WithCardonGet | This is a callback generator function. Callbacks must be created using the `'get'` function to return the desired callback value. To ensure the correct functioning of the cards, only callbacks generated via `'get'` should be used. |
Every card returns two functions named `'show'` and `'hide'` when called it
##### `withCardon` methods after wrapped
Name | <div style="width:425px">Type</div> | Description
--- | --- | ---
show | (props?: P, callback?: (result: R) => void) => Promise\<R> |The function to be called to show the card. It returns a promise with the data and waits until the card is closed or can be used the callback function with the second parameter. The card will be hidden automatically after the result return it.
hide | () => void |Allows the card to be canceled and hidden without waiting for data to return. It does not need to be used generally, but can be used according to the situation.
### `withCardon` Options
We could pass options with the second parameter for `withCardon(component, props)`
##### `withCardon` props
Name | Type | Default Value | Description
--- | --- | --- | ---
destroyOnHide | boolean | false | Enables destroy the component while hiding. When you do not change this property, the component will not be removed from the root and you will need to hide it with the 'visible' property manually.
`withCardon` also accepts an options object as a second parameter.
| Name | Type | Default Value | Description |
| ------------- | ----------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| destroyOnHide | boolean | false | If set to true, the component will be destroyed when hidden. If left unchanged, the component will remain on the root and must be manually hidden using the 'visible' property. |
| key | string (optional) | - | A unique identifier for the card. This key can be used to control the visibility of a specific card using the `Cardon.hide(key)` method. |
When called, each card returns two functions named `'show'` and `'hide'`.
##### `withCardon` methods after wrapping
| Name | Type | Description |
| ---- | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| show | (props?: P, callback?: (result: R) => void) => Promise\<R> | The function to show the card. It returns a promise with data and waits until the card is closed or can utilize the callback function provided as the second parameter. The card is automatically hidden after the result is returned. |
| hide | () => void | Allows the card to be cancelled and hidden without waiting for data to return. Typically, this doesn't need to be used but can be situationally helpful. |
`withCardon` can also receive options with its second parameter as `withCardon(component, options)`.
## Cardon Class
Cardon exports a `Cardon` class with utility methods.
```js
import Cardon from "cardon";
```
| Method | Description |
| ------------------------ | -------------------------------------------------------------------------------------------------------------- |
| Cardon.clear() | Clears all visible cards. |
| Cardon.hide(key: string) | Hides a specific card. The card must have a unique key assigned during creation using the 'withCardon' method. |
## Example
There are few simple steps to use:
- Put the `CardonContainer` component to the root file
Here are a few simple steps to use Cardon:
1. Add the `CardonContainer` component to the root file.
```diff

@@ -82,8 +100,6 @@ // App.js

- Create a folder named `'cardon'` or any name and after put your cards there.
2. Create a folder named 'cardon' or any name of your choosing and place your cards within this folder.
- Wrap the component you want to use as a card like below
3. Wrap the component you want to use as a card as shown in the example below.
Example reusable card:
```jsx

@@ -106,3 +122,4 @@ // ./cardon/MyModalCard.jsx

Or with Typescript:
Or with TypeScript:
```tsx

@@ -114,4 +131,4 @@ // ./cardon/MyModalCard.tsx

interface Props {
title: string
}
title: string;
}
function MyModalCard({ visible, get, title }) {

@@ -126,9 +143,7 @@ return (

}
export default withCardon<Props, boolean>(MyModalCard)
export default withCardon<Props, boolean>(MyModalCard);
```
You can alternatively use a card with 'destroyOnHide' options (This is necessary if the card doesn't use the 'visible' prop):
Alternative card usage with `'destroyOnHide'` options:
(It is required to destroy the card if the card is not using the `'visible'` prop)
```jsx

@@ -151,12 +166,10 @@ // ./cardon/MyModalCard.jsx

4. Import the component and call the 'show' function to display it. Optionally, you can pass props to the card and asynchronously receive the result.
- Import the component and call the '`show`' function to show it, pass props as optional to card and get the result asynchronously
Example call:
```jsx
let result = await MyModalCard.show({ title: "Awesome" });
let result = await MyModalCard.show({ title: "Awesome" });
```
Here's an example of usage:
Example usage:
```jsx

@@ -179,5 +192,14 @@ import React from "react";

}
```
```
You can also use the Cardon class like this:
```js
import Cardon from "cardon";
Cardon.hide("my-modal-card-key");
// or clear all visible cards
Cardon.clear();
```
## API

@@ -187,2 +209,9 @@

## Changelog
### v1.0.3
- Added a new optional prop 'key' to the 'withCardon' method. This key is used to uniquely identify a card for specific operations, such as hiding the card.
- Introduced a new class 'Cardon' with utility methods for managing cards. The Cardon class includes the methods 'clear', which removes all visible cards, and 'hide', which hides a specific card given its unique key.
## License

@@ -189,0 +218,0 @@

36

src/CardonManager.ts

@@ -1,16 +0,36 @@

type CardonManagerSubscribeCallback = (componentList: React.ComponentType<any>[]) => void;
import { CardonRef } from "./withCardon";
type CardonManagerSubscribeCallback = (refList: CardonRef[]) => void;
export class CardonManager {
private static cardList: React.ComponentType<any>[] = [];
private static refList: CardonRef[] = [];
private static cardonSubscribeList: CardonManagerSubscribeCallback[] = []
private static notify() {
for (let index = 0; index < this.cardonSubscribeList.length; index++) {
const func = this.cardonSubscribeList[index];
func(this.cardList);
for (const func of this.cardonSubscribeList) {
func(this.refList);
}
}
public static append(component: React.ComponentType<any>) {
this.cardList.push(component);
public static append(cardonRef: CardonRef) {
this.refList.push(cardonRef);
this.notify();
}
public static clear() {
for (const itemRef of this.refList) {
itemRef.resolve(undefined);
itemRef.resolve = () => { };
itemRef.setVisible(false);
itemRef.setVisible = () => { };
}
}
public static hide(key: string) {
const cardonRef = this.refList.find(cardonRef => cardonRef.key == key);
if (cardonRef) {
cardonRef.resolve(undefined);
cardonRef.resolve = () => { };
cardonRef.setVisible(false);
cardonRef.setVisible = () => { };
}
}
public static subscribe(func: CardonManagerSubscribeCallback) {

@@ -17,0 +37,0 @@ this.cardonSubscribeList.push(func);

3

src/index.ts
export * from "./withCardon";
export * from "./CardonContainer";
export * from "./CardonContainer";
export { Cardon as default } from "./Cardon";
src/CardonContainer.tsx

Sorry, the diff of this file is not supported yet

src/withCardon.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc