🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
atom-test-parham
Advanced tools
atom-test-parham - npm Package Compare versions
+25
-1
@@ -0,2 +1,26 @@ | ||
| import React, { PropsWithChildren } from 'react'; | ||
| export { } | ||
| type TabProps = PropsWithChildren & Partial<{ | ||
| tabs?: Record<string, string>[]; | ||
| selected: number; | ||
| onChange: (index: number, data: Record<string, string>[]) => void; | ||
| displayFieldName: string; | ||
| }>; | ||
| declare function Tab(props: TabProps): React.JSX.Element | null; | ||
| type DropdownProps = PropsWithChildren & Partial<{ | ||
| label: string; | ||
| isOpen: boolean; | ||
| dropDownItems: Record<string, string>[]; | ||
| data: Record<string, string>[]; | ||
| searchParam: React.ChangeEvent<HTMLInputElement> | string; | ||
| displayFieldName: string; | ||
| toggleDrop: () => void; | ||
| handleSearch: (event: React.ChangeEvent<HTMLInputElement>) => void; | ||
| handleItemClicks: (item: string) => void; | ||
| }>; | ||
| declare function DropDown(props: DropdownProps): React.JSX.Element; | ||
| export { DropDown, Tab }; |
+117
-3
@@ -8,2 +8,6 @@ "use strict"; | ||
| var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
| var __export = (target, all) => { | ||
| for (var name in all) | ||
| __defProp(target, name, { get: all[name], enumerable: true }); | ||
| }; | ||
| var __copyProps = (to, from, except, desc) => { | ||
@@ -27,11 +31,121 @@ if (from && typeof from === "object" || typeof from === "function") { | ||
| // src/index.tsx | ||
| // src/index.ts | ||
| var src_exports = {}; | ||
| __export(src_exports, { | ||
| DropDown: () => DropDown, | ||
| Tab: () => Tab | ||
| }); | ||
| module.exports = __toCommonJS(src_exports); | ||
| // src/components/drop-down/drop-down.atom.tsx | ||
| // src/components/tab/tab.atom.tsx | ||
| var import_react = __toESM(require("react")); | ||
| function Tab(props) { | ||
| var _a; | ||
| const handleTabClick = (tabIndex) => { | ||
| if (props.onChange && props.tabs) { | ||
| props.onChange(tabIndex, props.tabs); | ||
| } | ||
| }; | ||
| if (!props.tabs && !props.displayFieldName) { | ||
| return null; | ||
| } | ||
| return /* @__PURE__ */ import_react.default.createElement( | ||
| "div", | ||
| { | ||
| className: "flex space-x-1 rounded-xl bg-stone-200 p-[4px] h-[40px] w-[360px] cy-tab" | ||
| }, | ||
| /* @__PURE__ */ import_react.default.createElement( | ||
| "div", | ||
| { | ||
| className: "flex flex-row-reverse w-full mx-auto justify-around items-center " | ||
| }, | ||
| props.tabs && ((_a = props.tabs) == null ? void 0 : _a.map((item, tabIndex) => /* @__PURE__ */ import_react.default.createElement( | ||
| "button", | ||
| { | ||
| key: `tab-item-${tabIndex.toString(16)}-${Date.now()}`, | ||
| className: `w-full rounded-lg p-1 text-sm text-center mx-auto | ||
| ring-white focus:outline-none hover:cursor-pointer text-black transition-all duration-30 | ||
| ${(props.selected || 0) === tabIndex ? "bg-white shadow transition-opacity duration-300" : "hover:bg-white/[0.12] "}`, | ||
| onClick: () => handleTabClick(tabIndex) | ||
| }, | ||
| item[props.displayFieldName || ""] || "" | ||
| ))) | ||
| ) | ||
| ); | ||
| } | ||
| // src/components/tab/tab.atom.tsx | ||
| // src/components/drop-down/drop-down.atom.tsx | ||
| var import_react2 = __toESM(require("react")); | ||
| function DropDown(props) { | ||
| var _a; | ||
| const searchHandler = (event) => { | ||
| if (props.handleSearch) { | ||
| props.handleSearch(event); | ||
| } | ||
| }; | ||
| const toggleHandler = () => { | ||
| if (props.toggleDrop) { | ||
| props.toggleDrop(); | ||
| } | ||
| }; | ||
| const onOptionHandler = (item) => { | ||
| if (props.handleItemClicks) { | ||
| props.handleItemClicks(item); | ||
| } | ||
| }; | ||
| return /* @__PURE__ */ import_react2.default.createElement( | ||
| "div", | ||
| { | ||
| className: "cy-dropDown flex flex-col justify-center items-center w-full max-h-fit max-w-md relative rounded-[5px]" | ||
| }, | ||
| /* @__PURE__ */ import_react2.default.createElement("div", { className: "relative py-4 w-full " }, /* @__PURE__ */ import_react2.default.createElement("p", { className: "text-right font-bold text-lg mb-2" }, props.label), /* @__PURE__ */ import_react2.default.createElement( | ||
| "input", | ||
| { | ||
| className: "border-[2px] m-0 p-1 z-10 rounded-t-[5px] min-w-full focus:outline-none bg-[#F9F8F9] text-black focus:bg-white focus:border-slate-400 transition-all duration-150", | ||
| type: "text", | ||
| dir: "rtl", | ||
| placeholder: "\u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F", | ||
| value: props.searchParam, | ||
| onChange: (event) => searchHandler(event) | ||
| } | ||
| ), /* @__PURE__ */ import_react2.default.createElement( | ||
| "button", | ||
| { | ||
| "aria-label": "handle arrow click", | ||
| className: `${props.isOpen ? "rotate-180" : "rotate-0"} absolute h-5 w-5 cursor-pointer m-0 p-0 top-[57%] left-[5%] transition-all duration-300`, | ||
| onClick: toggleHandler | ||
| }, | ||
| "enter" | ||
| )), | ||
| /* @__PURE__ */ import_react2.default.createElement( | ||
| "div", | ||
| { | ||
| className: `${props.isOpen && " border-[2px]"} cy-dropDown-con absolute top-[90%] bg-white w-full rounded-b-[6px] ` | ||
| }, | ||
| props.isOpen && ((_a = props == null ? void 0 : props.data) == null ? void 0 : _a.map((item, index) => { | ||
| const displayFieldName = props.displayFieldName ? props.displayFieldName : "name"; | ||
| return /* @__PURE__ */ import_react2.default.createElement( | ||
| "div", | ||
| { | ||
| className: `${props.searchParam === item[displayFieldName] && "bg-gray-300"} text-right p-2 hover:bg-gray-200`, | ||
| key: `drop-down-${index.toString(16)}` | ||
| }, | ||
| /* @__PURE__ */ import_react2.default.createElement( | ||
| "button", | ||
| { | ||
| className: "block mx-auto w-full text-right font-thin", | ||
| onClick: () => onOptionHandler(item[displayFieldName]) | ||
| }, | ||
| item[displayFieldName] | ||
| ) | ||
| ); | ||
| })) | ||
| ) | ||
| ); | ||
| } | ||
| // Annotate the CommonJS export names for ESM import in node: | ||
| 0 && (module.exports = { | ||
| DropDown, | ||
| Tab | ||
| }); | ||
| //# sourceMappingURL=index.js.map |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"sources":["../src/index.tsx","../src/components/drop-down/drop-down.atom.tsx","../src/components/tab/tab.atom.tsx"],"sourcesContent":["import './global.css';\r\n// export * from './components';\r\nexport * from './components/drop-down/drop-down.atom';\r\nexport * from './components/tab/tab.atom';\r\n","import React from 'react';\nimport { DropdownProps } from './drop-down.types';\n\nexport default function DropDown(props: DropdownProps) {\n const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (props.handleSearch) {\n props.handleSearch(event);\n }\n };\n\n const toggleHandler = () => {\n if (props.toggleDrop) {\n props.toggleDrop();\n }\n };\n\n const onOptionHandler = (item: string) => {\n if (props.handleItemClicks) {\n props.handleItemClicks(item);\n }\n };\n\n return (\n <div\n className={\n 'cy-dropDown flex flex-col justify-center items-center w-full max-h-fit max-w-md relative rounded-[5px]'\n }\n >\n <div className={'relative py-4 w-full '}>\n <p className={'text-right font-bold text-lg mb-2'}>{props.label}</p>\n <input\n className={\n 'border-[2px] m-0 p-1 z-10 rounded-t-[5px] min-w-full focus:outline-none bg-[#F9F8F9] text-black focus:bg-white focus:border-slate-400 transition-all duration-150'\n }\n type={'text'}\n dir={'rtl'}\n placeholder={'انتخاب کنید'}\n value={props.searchParam as string}\n onChange={(event) => searchHandler(event)}\n />\n <button\n aria-label={'handle arrow click'}\n className={`${\n props.isOpen ? 'rotate-180' : 'rotate-0'\n } absolute h-5 w-5 cursor-pointer m-0 p-0 top-[57%] left-[5%] transition-all duration-300`}\n onClick={toggleHandler}\n >\n enter\n </button>\n </div>\n <div\n className={`${\n props.isOpen && ' border-[2px]'\n } cy-dropDown-con absolute top-[90%] bg-white w-full rounded-b-[6px] `}\n >\n {props.isOpen &&\n props?.data?.map((item, index) => {\n const displayFieldName = props.displayFieldName\n ? (props.displayFieldName as keyof typeof item)\n : 'name';\n return (\n <div\n className={`${\n props.searchParam === item[displayFieldName] && 'bg-gray-300'\n } text-right p-2 hover:bg-gray-200`}\n key={`drop-down-${index.toString(16)}`}\n >\n <button\n className={'block mx-auto w-full text-right font-thin'}\n onClick={() => onOptionHandler(item[displayFieldName])}\n >\n {item[displayFieldName]}\n </button>\n </div>\n );\n })}\n </div>\n </div>\n );\n}\n","import React from 'react';\nimport { TabProps } from './tab.types';\n\nexport default function Tab(props: TabProps) {\n const handleTabClick = (tabIndex: number) => {\n if (props.onChange && props.tabs) {\n props.onChange(tabIndex, props.tabs);\n }\n };\n\n if (!props.tabs && !props.displayFieldName) {\n return null;\n }\n\n return (\n <div\n className={\n 'flex space-x-1 rounded-xl bg-stone-200 p-[4px] h-[40px] w-[360px] cy-tab'\n }\n >\n <div\n className={\n 'flex flex-row-reverse w-full mx-auto justify-around items-center '\n }\n >\n {props.tabs &&\n props.tabs?.map((item, tabIndex) => (\n <button\n key={`tab-item-${tabIndex.toString(16)}-${Date.now()}`}\n className={`w-full rounded-lg p-1 text-sm text-center mx-auto\n ring-white focus:outline-none hover:cursor-pointer text-black transition-all duration-30\n ${\n (props.selected || 0) === tabIndex\n ? 'bg-white shadow transition-opacity duration-300'\n : 'hover:bg-white/[0.12] '\n }`}\n onClick={() => handleTabClick(tabIndex)}\n >\n {item[props.displayFieldName || ''] || ''}\n </button>\n ))}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;;;ACAA,mBAAkB;;;ACAlB,IAAAA,gBAAkB;","names":["import_react"]} | ||
| {"version":3,"sources":["../src/index.ts","../src/components/tab/tab.atom.tsx","../src/components/drop-down/drop-down.atom.tsx"],"sourcesContent":["import './global.css';\r\nexport * from './components';\r\n","import React from 'react';\nimport { TabProps } from './tab.types';\n\nexport function Tab(props: TabProps) {\n const handleTabClick = (tabIndex: number) => {\n if (props.onChange && props.tabs) {\n props.onChange(tabIndex, props.tabs);\n }\n };\n\n if (!props.tabs && !props.displayFieldName) {\n return null;\n }\n\n return (\n <div\n className={\n 'flex space-x-1 rounded-xl bg-stone-200 p-[4px] h-[40px] w-[360px] cy-tab'\n }\n >\n <div\n className={\n 'flex flex-row-reverse w-full mx-auto justify-around items-center '\n }\n >\n {props.tabs &&\n props.tabs?.map((item, tabIndex) => (\n <button\n key={`tab-item-${tabIndex.toString(16)}-${Date.now()}`}\n className={`w-full rounded-lg p-1 text-sm text-center mx-auto\n ring-white focus:outline-none hover:cursor-pointer text-black transition-all duration-30\n ${\n (props.selected || 0) === tabIndex\n ? 'bg-white shadow transition-opacity duration-300'\n : 'hover:bg-white/[0.12] '\n }`}\n onClick={() => handleTabClick(tabIndex)}\n >\n {item[props.displayFieldName || ''] || ''}\n </button>\n ))}\n </div>\n </div>\n );\n}\n","import React from 'react';\nimport { DropdownProps } from './drop-down.types';\n\nexport function DropDown(props: DropdownProps) {\n const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (props.handleSearch) {\n props.handleSearch(event);\n }\n };\n\n const toggleHandler = () => {\n if (props.toggleDrop) {\n props.toggleDrop();\n }\n };\n\n const onOptionHandler = (item: string) => {\n if (props.handleItemClicks) {\n props.handleItemClicks(item);\n }\n };\n\n return (\n <div\n className={\n 'cy-dropDown flex flex-col justify-center items-center w-full max-h-fit max-w-md relative rounded-[5px]'\n }\n >\n <div className={'relative py-4 w-full '}>\n <p className={'text-right font-bold text-lg mb-2'}>{props.label}</p>\n <input\n className={\n 'border-[2px] m-0 p-1 z-10 rounded-t-[5px] min-w-full focus:outline-none bg-[#F9F8F9] text-black focus:bg-white focus:border-slate-400 transition-all duration-150'\n }\n type={'text'}\n dir={'rtl'}\n placeholder={'انتخاب کنید'}\n value={props.searchParam as string}\n onChange={(event) => searchHandler(event)}\n />\n <button\n aria-label={'handle arrow click'}\n className={`${\n props.isOpen ? 'rotate-180' : 'rotate-0'\n } absolute h-5 w-5 cursor-pointer m-0 p-0 top-[57%] left-[5%] transition-all duration-300`}\n onClick={toggleHandler}\n >\n enter\n </button>\n </div>\n <div\n className={`${\n props.isOpen && ' border-[2px]'\n } cy-dropDown-con absolute top-[90%] bg-white w-full rounded-b-[6px] `}\n >\n {props.isOpen &&\n props?.data?.map((item, index) => {\n const displayFieldName = props.displayFieldName\n ? (props.displayFieldName as keyof typeof item)\n : 'name';\n return (\n <div\n className={`${\n props.searchParam === item[displayFieldName] && 'bg-gray-300'\n } text-right p-2 hover:bg-gray-200`}\n key={`drop-down-${index.toString(16)}`}\n >\n <button\n className={'block mx-auto w-full text-right font-thin'}\n onClick={() => onOptionHandler(item[displayFieldName])}\n >\n {item[displayFieldName]}\n </button>\n </div>\n );\n })}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAGX,SAAS,IAAI,OAAiB;AAHrC;AAIE,QAAM,iBAAiB,CAAC,aAAqB;AAC3C,QAAI,MAAM,YAAY,MAAM,MAAM;AAChC,YAAM,SAAS,UAAU,MAAM,IAAI;AAAA,IACrC;AAAA,EACF;AAEA,MAAI,CAAC,MAAM,QAAQ,CAAC,MAAM,kBAAkB;AAC1C,WAAO;AAAA,EACT;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WACE;AAAA;AAAA,IAGF,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,WACE;AAAA;AAAA,MAGD,MAAM,UACL,WAAM,SAAN,mBAAY,IAAI,CAAC,MAAM,aACrB,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,YAAY,SAAS,SAAS,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC;AAAA,UACpD,WAAW;AAAA;AAAA,eAGV,MAAM,YAAY,OAAO,WACtB,oDACA,wBACN;AAAA,UACE,SAAS,MAAM,eAAe,QAAQ;AAAA;AAAA,QAErC,KAAK,MAAM,oBAAoB,EAAE,KAAK;AAAA,MACzC;AAAA,IAEN;AAAA,EACF;AAEJ;;;AC5CA,IAAAC,gBAAkB;AAGX,SAAS,SAAS,OAAsB;AAH/C;AAIE,QAAM,gBAAgB,CAAC,UAA+C;AACpE,QAAI,MAAM,cAAc;AACtB,YAAM,aAAa,KAAK;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,gBAAgB,MAAM;AAC1B,QAAI,MAAM,YAAY;AACpB,YAAM,WAAW;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,kBAAkB,CAAC,SAAiB;AACxC,QAAI,MAAM,kBAAkB;AAC1B,YAAM,iBAAiB,IAAI;AAAA,IAC7B;AAAA,EACF;AAEA,SACE,8BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,WACE;AAAA;AAAA,IAGF,8BAAAA,QAAA,cAAC,SAAI,WAAW,2BACd,8BAAAA,QAAA,cAAC,OAAE,WAAW,uCAAsC,MAAM,KAAM,GAChE,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,WACE;AAAA,QAEF,MAAM;AAAA,QACN,KAAK;AAAA,QACL,aAAa;AAAA,QACb,OAAO,MAAM;AAAA,QACb,UAAU,CAAC,UAAU,cAAc,KAAK;AAAA;AAAA,IAC1C,GACA,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,WAAW,GACT,MAAM,SAAS,eAAe,UAChC;AAAA,QACA,SAAS;AAAA;AAAA,MACV;AAAA,IAED,CACF;AAAA,IACA,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GACT,MAAM,UAAU,eAClB;AAAA;AAAA,MAEC,MAAM,YACL,oCAAO,SAAP,mBAAa,IAAI,CAAC,MAAM,UAAU;AAChC,cAAM,mBAAmB,MAAM,mBAC1B,MAAM,mBACP;AACJ,eACE,8BAAAA,QAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GACT,MAAM,gBAAgB,KAAK,gBAAgB,KAAK,aAClD;AAAA,YACA,KAAK,aAAa,MAAM,SAAS,EAAE,CAAC;AAAA;AAAA,UAEpC,8BAAAA,QAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX,SAAS,MAAM,gBAAgB,KAAK,gBAAgB,CAAC;AAAA;AAAA,YAEpD,KAAK,gBAAgB;AAAA,UACxB;AAAA,QACF;AAAA,MAEJ;AAAA,IACJ;AAAA,EACF;AAEJ;","names":["React","import_react","React"]} |
+1
-1
| { | ||
| "name": "atom-test-parham", | ||
| "version": "1.2.1", | ||
| "version": "1.2.2", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js", |
No alert changes
Improved metrics
- Total package byte prevSize
44426
18.14%- Lines of code
707
23.39%No dependency changes