pixel-react 1.1.5 → 1.1.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/rollup.config.mjs

@@ -14,6 +14,7 @@ const packageJson = requireFile('./package.json');
 export default [
   {
     input: 'src/index.ts',
+    context: 'window',
     output: [
       {
         file: packageJson.main, // CJS output
@@ -31,7 +32,9 @@ export default [
     plugins: [
       peerDepsExternal(),
       resolve(),
-      commonjs(),
+      commonjs({
+        transformMixedEsModules: true,
+      }),
       typescript(),
       postcss({
         extensions: ['.scss'],
@@ -49,6 +52,7 @@ export default [
     ],
   },
   {
+    context: 'window',
     input: 'lib/index.d.ts',
     output: [
       { file: 'lib/index.d.ts', format: 'es', inlineDynamicImports: true },

package/src/components/TableTree/TableTree.stories.tsx

@@ -67,7 +67,14 @@ const createTilteAndAction = (row: any): JSX.Element => {
 
 export const Default: Story = {
   args: {
-    withCheckBox: false,
+    select: 'radio',
+    onChange: (e: any, node: any) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      console.log(node, '------------', e);
+    },
+    selected: ['MOD1003'],
     treeData,
     columnsData: [
       {

package/src/components/TableTree/TableTree.tsx

@@ -7,6 +7,7 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
 import Checkbox from '../Checkbox';
 import './TableTree.scss';
+import RadioButton from '../RadioButton';
 
 interface ColumnDataProps {
   name: string;
@@ -22,20 +23,24 @@ interface ObjectProps {
 }
 
 interface TableTreeProps {
-  withCheckBox: boolean;
+  select: 'checkbox' | 'radio' | 'none';
   columnsData: Array<ColumnDataProps>;
   treeData: Array<ObjectProps>;
   onClick?: (
     event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     data: any
   ) => void;
+  onChange?: (e: any, node: any) => void;
+  selected: Array<string>;
 }
 
 const TableTree = ({
   columnsData,
   treeData,
-  withCheckBox,
+  select,
   onClick = () => {},
+  onChange,
+  selected,
 }: TableTreeProps) => {
   const [expandedNodes, setExpandedNodes] = useState<Set<ObjectProps>>(
     new Set()
@@ -89,6 +94,12 @@ const TableTree = ({
 
     const isExpanded = expandedNodes.has(node);
 
+    const handleCheckBoxChange = (e, node) => {
+      if (onChange) {
+        onChange(e, node);
+      }
+    };
+
     useLayoutEffect(() => {
       if (nodeRef.current) {
         const observer = new ResizeObserver(() => {
@@ -143,7 +154,18 @@ const TableTree = ({
                 style={{ fontWeight: node.folder ? 600 : 400 }}
                 onClick={(event) => onClick(event, node)}
               >
-                {withCheckBox && <Checkbox />}
+                {select === 'checkbox' && (
+                  <Checkbox
+                    checked={selected.includes(node.key)}
+                    onChange={(e) => handleCheckBoxChange(e, node)}
+                  />
+                )}
+                {select === 'radio' && (
+                  <RadioButton
+                    checked={selected.includes(node.key)}
+                    onChange={(e) => handleCheckBoxChange(e, node)}
+                  />
+                )}
                 {prepareData(node, column)}
               </div>
             </td>

package/src/index.ts

@@ -55,19 +55,13 @@ import {
   getExtension,
   getExtensionWithPeriod,
 } from './utils/getExtension/getExtension';
-
 import { findAndInsert } from './utils/findAndInsert/findAndInsert';
 import { ffid } from './utils/ffID/ffid';
-
 import { debounce } from './utils/debounce/debounce';
 import { compareArrays } from './utils/compareArrays/compareArrays';
-
 import { compareObjects } from './utils/compareObjects/compareObjects';
-
 import { getEncryptedData } from './utils/getEncryptedData/getEncryptedData';
-
 import { throttle } from './utils/throttle/throttle';
-
 import { truncateText } from './utils/truncateText/truncateText';
 
 export {

package/lib/components/AddButton/AddButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import './AddButton.scss';
-import { AddButtonProps } from './types';
-declare const AddButton: React.FC<AddButtonProps>;
-export default AddButton;

package/lib/components/AddButton/AddButton.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-declare const meta: Meta<typeof AddButton>;
-type Story = StoryObj<typeof AddButton>;
-export declare const PrimaryAddButton: Story;
-export default meta;

package/lib/components/AddButton/index.d.ts

@@ -1 +0,0 @@
-export { default } from './AddButton';

package/lib/components/AddButton/types.d.ts

@@ -1,4 +0,0 @@
-export interface AddButtonProps {
-    name: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}

package/lib/utils/find/findAndInsert.d.ts

@@ -1,7 +0,0 @@
-export type AnyObject = {
-    id: number;
-    [key: string]: any;
-};
-export declare function findAndInsert<T extends AnyObject>(data: T[], key: keyof T, targetId: number, newEntry: T, insertPosition: 'above' | 'below' | 'replace', childrenKey?: string): {
-    updatedArray: T[];
-} | null;

package/lib/utils/find/findAndInsert.stories.d.ts

@@ -1,7 +0,0 @@
-import { findAndInsert } from './findAndInsert';
-declare const _default: {
-    title: string;
-    component: typeof findAndInsert;
-};
-export default _default;
-export declare const InteractivePlayground: () => import("react/jsx-runtime").JSX.Element;