remove framer-motions & update dependencies & update react-resizeable

CUBETIQ · Sep 22, 2023 · 1540130 · 1540130
1 parent 9913fbb
commit 1540130
Show file tree

Hide file tree

Showing 9 changed files with 2,648 additions and 2,073 deletions.
diff --git a/example/package.json b/example/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@ant-design": "link:../node_modules/@ant-design",
+    "@cubetiq/enhance-antd-table": "^2.0.0",
     "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
     "@testing-library/react": "link:../node_modules/@testing-library/react",
     "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
@@ -19,7 +20,6 @@
     "@types/react": "link:../node_modules/@types/react",
     "@types/react-dom": "link:../node_modules/@types/react-dom",
     "antd": "link:../node_modules/antd",
-    "@cubetiq/enhance-antd-table": "link:..",
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
     "react-scripts": "link:../node_modules/react-scripts",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -57,7 +57,7 @@ const dummy = [
 
 let data: any[] = []
 
-for (let i = 0; i < 4; i++) {
+for (let i = 0; i < 7; i++) {
   data.push(...dummy)
 }
 
@@ -117,7 +117,7 @@ const App = () => {
   useEffect(() => {
     setTimeout(() => {
       setLoading(false)
-    }, 2000)
+    }, 1000)
   }, [])
 
   return (
@@ -169,8 +169,8 @@ const App = () => {
       </Modal>
       <div
         style={{
-          width: 1250,
-          height: '100vh'
+          width: 1400
+          // height: '100vh'
         }}
       >
         <TableSkeleton loading={loading}>
@@ -224,13 +224,12 @@ const App = () => {
             newSources={data}
             restProps={{
               bordered: true,
-              scroll: { x: 1550 },
+              scroll: { x: '100%' },
               size: 'small',
               rowKey: 'id'
             }}
           />
         </TableSkeleton>
-        hello
       </div>
     </div>
   )

diff --git a/example/yarn.lock b/example/yarn.lock
diff --git a/package.json b/package.json
@@ -50,11 +50,11 @@
     "nuke": "rimraf dist && rimraf example/node_modules && rimraf node_modules && yarn && cd example && yarn && cd .."
   },
   "peerDependencies": {
-    "@types/styled-components": "^5.1.26",
-    "antd": " 5.4.6",
+    "@types/styled-components": "^5.1.27",
+    "antd": "5.9.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "^5.3.10"
+    "styled-components": "^6.0.8"
   },
   "devDependencies": {
     "@babel/core": "^7.20.5",
@@ -67,35 +67,32 @@
     "@storybook/manager-webpack5": "^6.5.14",
     "@storybook/react": "^6.5.14",
     "@storybook/testing-library": "^0.0.13",
-    "@types/node": "^18.16.2",
-    "@types/react": "^ 18.2.0",
-    "@types/react-dom": "^18.2.1",
-    "@types/react-resizable": "^3.0.4",
+    "@types/node": "^20.6.3",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-resizable": "^3.0.5",
     "@types/uuid": "^9.0.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "babel-loader": "^9.1.2",
-    "gh-pages": "^5.0.0",
-    "less": "^4.1.3",
-    "less-loader": "^11.1.0",
+    "@vitejs/plugin-react": "^4.0.4",
+    "babel-loader": "^9.1.3",
+    "gh-pages": "^6.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "rimraf": "^4.0.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.0.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
     "vite-dts": "^1.0.4",
-    "vite-plugin-dts": "^2.1.0"
+    "vite-plugin-dts": "^3.5.4"
   },
   "dependencies": {
     "@ant-design/icons": "^5.0.0",
     "@types/styled-components": "^5.1.26",
-    "antd": " 5.4.6",
-    "framer-motion": "^10.12.4",
+    "antd": "5.9.2",
     "react-resizable": "^3.0.5",
-    "styled-components": "^5.3.10",
+    "styled-components": "^6.0.8",
     "uuid": "^9.0.0"
   },
   "publishConfig": {

diff --git a/src/components/motionBody.tsx b/src/components/motionBody.tsx
@@ -1,30 +1,24 @@
 import React from 'react'
-import { motion, Variant } from 'framer-motion'
+// import { motion, Variant } from 'framer-motion'
 
-const container: { [index: string]: Variant } = {
-  hidden: { opacity: 0, scale: 0 },
-  visible: {
-    opacity: 1,
-    scale: 1,
-    transition: {
-      delayChildren: 0.2,
-      staggerChildren: 0.1,
-      type: `tween`
-    }
-  }
-}
+// const container: { [index: string]: Variant } = {
+//   hidden: { opacity: 0, scale: 0 },
+//   visible: {
+//     opacity: 1,
+//     scale: 1,
+//     transition: {
+//       delayChildren: 0.2,
+//       staggerChildren: 0.1,
+//       type: `tween`
+//     }
+//   }
+// }
 
 const MotionBody: React.FC<any> = ({ children, ...props }) => {
   return (
-    <motion.tbody
-      initial='hidden'
-      animate='visible'
-      variants={container}
-      exit={'hidden'}
-      {...props}
-    >
-      {children}
-    </motion.tbody>
+
+     <> {children}</>
+
   )
 }
 

diff --git a/src/components/motionRow.tsx b/src/components/motionRow.tsx
@@ -1,19 +1,19 @@
 import React from 'react'
-import { motion } from 'framer-motion'
+// import { motion } from 'framer-motion'
 
-const item = {
-  hidden: { x: 50, opacity: 0 },
-  visible: {
-    x: 0,
-    opacity: 1
-  }
-}
+// const item = {
+//   hidden: { x: 50, opacity: 0 },
+//   visible: {
+//     x: 0,
+//     opacity: 1
+//   }
+// }
 
 const MotionRow: React.FC<any> = ({ children, ...props }) => {
   return (
-    <motion.tr {...props} variants={item}>
-      {children}
-    </motion.tr>
+    // <motion.tr {...props} variants={item}>
+    <> {children}</>
+    // </motion.tr>
   )
 }
 

diff --git a/src/components/resizeTitle.tsx b/src/components/resizeTitle.tsx
@@ -1,17 +1,17 @@
 import React from 'react'
-import { Resizable } from 'react-resizable'
+import { Resizable, ResizableProps } from 'react-resizable'
 import 'react-resizable/css/styles.css'
 
-const ResizableTitle: React.FC<any> = (props) => {
-  const { onResize, width, ...restProps } = props
+const ResizableTitle: React.FC<ResizableProps> = (props) => {
+  const { children, onResize, width, ...restProps } = props
 
   if (!width) {
     return <th {...restProps} />
   }
 
   return (
-    <Resizable width={width} height={0} onResize={onResize}>
-      <th {...restProps} />
+    <Resizable width={width} height={0} onResize={onResize} {...restProps}>
+      {children}
     </Resizable>
   )
 }

diff --git a/src/index.tsx b/src/index.tsx
@@ -9,8 +9,8 @@ import { ColumnTitle } from 'antd/es/table/interface'
 import { LiftedColumnVisibleControllerProps } from './components/columnVisibleController'
 import { TableSkeleton } from './components/tableSkeleton'
 import ResizableTitle from './components/resizeTitle'
-import MotionBody from './components/motionBody'
-import MotionRow from './components/motionRow'
+// import MotionBody from './components/motionBody'
+// import MotionRow from './components/motionRow'
 import styled from 'styled-components'
 
 export interface ComponentExposeState {
@@ -36,7 +36,7 @@ interface enhanceTableInterface<IRowData = any> {
   searchBy?: string
   defaultVisibleColumns?: string[]
   name: string
-  printHepler?: (visibleColumns: visibleColumnsInterface[]) => React.ReactNode
+  printHelper?: (visibleColumns: visibleColumnsInterface[]) => React.ReactNode
   restProps?: TableProps<IRowData>
   headerClassName?: string
   actionColumnProps?: any
@@ -280,7 +280,7 @@ const EnhanceAntdTable: React.FC<enhanceTableInterface> = (props) => {
                 {...props.columnsVisibleControllerProps?.options}
               />
             )}
-            {props.printHepler && props.printHepler(visibleColumns)}
+            {props.printHelper && props.printHelper(visibleColumns)}
           </React.Fragment>
         </Space>
 
@@ -324,10 +324,10 @@ const EnhanceAntdTable: React.FC<enhanceTableInterface> = (props) => {
             header: {
               cell: ResizableTitle
             },
-            body: {
-              wrapper: MotionBody,
-              row: MotionRow
-            }
+            // body: {
+            //   wrapper: MotionBody,
+            //   row: MotionRow
+            // }
           }}
         />
       </EnhancedTableStyled>

diff --git a/src/typings.d.ts b/src/typings.d.ts
@@ -2,10 +2,10 @@
  * Default LESS definition for typescript,
  * will be overridden with file-specific definitions by rollup
  */
-declare module '*.less' {
-  const content: { [className: string]: string }
-  export default content
-}
+// declare module '*.less' {
+//   const content: { [className: string]: string }
+//   export default content
+// }
 
 interface SvgrComponent
   extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}