frame.select 1.2.7 → 1.2.8

package/dist/App.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './App.css';
 import { useState } from 'react';
-import { FrameSelect } from './FrameSelect';
+import { FrameSelect } from './components/FrameSelect';
 import { Box } from '@mui/material';
 function App() {
     const [brand, setBrand] = useState('');

package/dist/components/FrameSelect.d.ts

@@ -0,0 +1,22 @@
+import { Cell } from '@tanstack/react-table';
+import { TBrandObj, TFrameObj } from './types';
+type TBrandFrame = {
+    brand: string;
+    frames: string[];
+};
+export declare function FrameSelect(props: {
+    currentBrand: string;
+    brands: TBrandObj[];
+    frames?: TBrandFrame;
+    onClickBrand: (cell: Cell<{
+        name: string;
+        id: number;
+    }, unknown>, index: number) => void;
+    onClickFrame: (cell: Cell<TFrameObj, unknown>, index: number) => void;
+    convertFrames: (frameArray: TBrandFrame | undefined) => TFrameObj[];
+    width: number;
+    height: number;
+    backgroundColor: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FrameSelect.d.ts.map

package/dist/components/FrameSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameSelect.d.ts","sourceRoot":"","sources":["../../src/components/FrameSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAI7C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,YAAY,EAAE,CACZ,IAAI,EAAE,IAAI,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,CAAC,EACjD,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,aAAa,EAAE,CAAC,UAAU,EAAE,WAAW,GAAG,SAAS,KAAK,SAAS,EAAE,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;CACzB,2CA6DA"}

package/dist/components/FrameSelect.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { BrandList } from './BrandList';
+import { FrameList } from './FrameList';
+export function FrameSelect(props) {
+    const jsx = 'FrameSelect';
+    const listHeight = Math.max(props.height - 20, 0);
+    return (_jsxs(Box, { "data-testid": `${jsx}.box`, sx: {
+            display: 'flex',
+            width: props.width,
+            height: props.height,
+            overflow: 'hidden',
+            backgroundColor: props.backgroundColor,
+            // border: '10px solid black',
+            padding: '10px 50px 10px 30px',
+            gap: '40px',
+        }, children: [_jsx(Box, { "data-testid": `${jsx}.brand.box`, sx: {
+                    height: '100%',
+                    minHeight: 0,
+                }, children: _jsx(BrandList, { brandList: props.brands.map((brand, index) => {
+                        console.log(`Mapping brand: ${brand.name} at index ${index}`);
+                        return {
+                            name: brand.name,
+                            id: index,
+                        };
+                    }), onClick: props.onClickBrand, height: listHeight }) }), _jsx(Box, { "data-testid": `${jsx}.frame.box`, children: _jsx(FrameList, { frameList: props.convertFrames(props.frames), onClick: props.onClickFrame, slSize: 120, slFormat: (value) => {
+                        return _jsx("div", { children: value });
+                    }, bwSize: 160, bwFormat: (value) => {
+                        return _jsx("span", { style: { fontWeight: 'bold' }, children: value });
+                    }, formSize: 320, formFormat: (value) => {
+                        return _jsx("div", { style: { color: 'red' }, children: value });
+                    }, 
+                    // extraColumns={extraFrameColumns}
+                    // style={{ border: '1px solid black', padding: '0px' }}
+                    height: listHeight }) })] }));
+}

package/dist/index.d.ts

@@ -2,5 +2,6 @@ export { ItemList } from './components/ItemList';
 export type { TColumn, TItem, TItemFilter } from './components/itemTypes';
 export { BrandList } from './components/BrandList';
 export { FrameList } from './components/FrameList';
+export { FrameSelect } from './components/FrameSelect';
 export type { TBrandObj, TFrameObj } from './components/types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAC,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -1,3 +1,4 @@
 export { ItemList } from './components/ItemList';
 export { BrandList } from './components/BrandList';
 export { FrameList } from './components/FrameList';
+export { FrameSelect } from './components/FrameSelect';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frame.select",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "A React component for selecting items from a list with a search bar.",
   "license": "MIT",
   "type": "module",