tntd 3.0.40-beta.1 → 3.0.40-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -59,6 +59,10 @@ var MyComponent = function MyComponent(props, ref) {
59
59
  columns = _useState2[0],
60
60
  setColumns = _useState2[1];
61
61
  var dataRef = (0, _react.useRef)([]);
62
+ var _useState3 = (0, _react.useState)(0),
63
+ _useState4 = _slicedToArray(_useState3, 2),
64
+ renderKey = _useState4[0],
65
+ setRenderKey = _useState4[1];
62
66
  var handleResize = function handleResize(index, minWidth) {
63
67
  return (0, _throttle2["default"])(function (e, _ref) {
64
68
  var size = _ref.size;
@@ -78,6 +82,7 @@ var MyComponent = function MyComponent(props, ref) {
78
82
  }
79
83
  return Object.assign(Object.assign({}, column), {
80
84
  onHeaderCell: function onHeaderCell(column) {
85
+ console.log("column", column);
81
86
  var width = column.width;
82
87
  var minWidth = column.minWidth;
83
88
  if (typeof width === 'string' && !width.includes('%')) {
@@ -88,7 +93,10 @@ var MyComponent = function MyComponent(props, ref) {
88
93
  }
89
94
  return {
90
95
  width: width,
91
- onResize: handleResize(index, minWidth)
96
+ onResize: handleResize(index, minWidth),
97
+ onMouseUp: function onMouseUp() {
98
+ setRenderKey(renderKey + 1);
99
+ }
92
100
  };
93
101
  }
94
102
  });
@@ -103,7 +111,9 @@ var MyComponent = function MyComponent(props, ref) {
103
111
  (0, _react.useEffect)(function () {
104
112
  dataRef.current = columns;
105
113
  }, [columns]);
106
- return _react["default"].createElement(_table.Table, Object.assign({}, props, Array.isArray(props === null || props === void 0 ? void 0 : props.columns) ? {
114
+ return _react["default"].createElement(_table.Table, Object.assign({
115
+ key: renderKey
116
+ }, props, Array.isArray(props === null || props === void 0 ? void 0 : props.columns) ? {
107
117
  columns: columns
108
118
  } : {}, {
109
119
  className: (0, _classnames["default"])('tnt-resizable-table', _defineProperty({}, props.className, props.className)),
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/resizableTable/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, forwardRef, useRef, useEffect } from 'react'\nimport cn from 'classnames'\nimport { throttle } from 'lodash'\nimport { Resizable } from 'react-resizable'\nimport { Table } from '../table'\nimport './index.less'\n\nconst ResizableTitle = (\n props: React.HTMLAttributes<any> & {\n onResize: (e: React.SyntheticEvent<Element>, data: any) => void\n width: number\n }\n) => {\n const { onResize, width, ...restProps } = props\n\n if (!width) {\n return <th {...restProps} />\n }\n\n return (\n <Resizable\n width={width}\n height={0}\n handle={\n <span\n className=\"react-resizable-handle\"\n onClick={(e) => {\n e.stopPropagation()\n }}\n />\n }\n onResize={onResize}\n draggableOpts={{ enableUserSelectHack: false }}\n >\n <th {...restProps} />\n </Resizable>\n )\n}\n\ninterface ColumnType {\n width?: any\n minWidth?: any\n}\n\ninterface MyComponentProps {\n columns?: ColumnType[]\n className?: string\n}\n\nconst MyComponent: React.ForwardRefRenderFunction<any, MyComponentProps> = (props, ref) => {\n const [columns, setColumns] = useState<ColumnType[]>([])\n const dataRef = useRef<ColumnType[]>([])\n\n const handleResize = (index: number, minWidth: number) =>\n throttle((e, { size }) => {\n const updatedColumns = dataRef.current || []\n setColumns(\n updatedColumns.map((column, idx) =>\n idx === index ? { ...column, width: Math.max(size.width, minWidth || 40) } : column\n )\n )\n }, 25)\n\n const buildColumns = (columns: ColumnType[]) =>\n columns?.map((column, index) => {\n if (typeof column?.width === 'string' && column?.width?.includes('%')) {\n return column\n }\n return {\n ...column,\n onHeaderCell: (column: ColumnType) => {\n let width = column.width\n let minWidth = column.minWidth\n if (typeof width === 'string' && !width.includes('%')) {\n width = Number(width.replace(/[^\\d]/g, ''))\n }\n\n if (minWidth && typeof minWidth === 'string' && !minWidth.includes('%')) {\n minWidth = Number(minWidth.replace(/[^\\d]/g, ''))\n }\n return { width, onResize: handleResize(index, minWidth) }\n },\n }\n })\n\n useEffect(() => {\n if (Array.isArray(props?.columns)) {\n const curColumns = buildColumns(props.columns)\n setColumns(curColumns || [])\n }\n }, [props?.columns])\n\n useEffect(() => {\n dataRef.current = columns\n }, [columns])\n\n return (\n <Table\n {...props}\n {...(Array.isArray(props?.columns) ? { columns } : {})}\n className={cn('tnt-resizable-table', { [props.className!]: props.className })}\n components={{ header: { cell: ResizableTitle } }}\n />\n )\n}\n\nexport default forwardRef(MyComponent)\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/resizableTable/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, forwardRef, useRef, useEffect } from 'react'\nimport cn from 'classnames'\nimport { throttle } from 'lodash'\nimport { Resizable } from 'react-resizable'\nimport { Table } from '../table'\nimport './index.less'\n\nconst ResizableTitle = (\n props: React.HTMLAttributes<any> & {\n onResize: (e: React.SyntheticEvent<Element>, data: any) => void\n width: number\n }\n) => {\n const { onResize, width, ...restProps } = props\n\n if (!width) {\n return <th {...restProps} />\n }\n\n return (\n <Resizable\n width={width}\n height={0}\n handle={\n <span\n className=\"react-resizable-handle\"\n onClick={(e) => {\n e.stopPropagation()\n }}\n />\n }\n onResize={onResize}\n draggableOpts={{ enableUserSelectHack: false }}\n >\n <th {...restProps} />\n </Resizable>\n )\n}\n\ninterface ColumnType {\n width?: any\n minWidth?: any\n}\n\ninterface MyComponentProps {\n columns?: ColumnType[]\n className?: string\n}\n\nconst MyComponent: React.ForwardRefRenderFunction<any, MyComponentProps> = (props, ref) => {\n const [columns, setColumns] = useState<ColumnType[]>([])\n const dataRef = useRef<ColumnType[]>([])\n const [renderKey, setRenderKey] = useState(0);\n\n const handleResize = (index: number, minWidth: number) =>\n throttle((e, { size }) => {\n const updatedColumns = dataRef.current || []\n setColumns(\n updatedColumns.map((column, idx) =>\n idx === index ? { ...column, width: Math.max(size.width, minWidth || 40) } : column\n )\n )\n }, 25)\n\n\n\n const buildColumns = (columns: ColumnType[]) =>\n columns?.map((column, index) => {\n if (typeof column?.width === 'string' && column?.width?.includes('%')) {\n return column\n }\n return {\n ...column,\n onHeaderCell: (column: ColumnType) => {\n console.log(\"column\",column)\n let width = column.width\n let minWidth = column.minWidth\n if (typeof width === 'string' && !width.includes('%')) {\n width = Number(width.replace(/[^\\d]/g, ''))\n }\n\n if (minWidth && typeof minWidth === 'string' && !minWidth.includes('%')) {\n minWidth = Number(minWidth.replace(/[^\\d]/g, ''))\n }\n return {\n width,\n onResize: handleResize(index, minWidth),\n onMouseUp:()=>{\n setRenderKey(renderKey+1)\n }}\n },\n }\n })\n\n useEffect(() => {\n if (Array.isArray(props?.columns)) {\n const curColumns = buildColumns(props.columns)\n setColumns(curColumns || [])\n }\n }, [props?.columns])\n\n useEffect(() => {\n dataRef.current = columns\n }, [columns])\n\n return (\n <Table\n key={renderKey}\n {...props}\n {...(Array.isArray(props?.columns) ? { columns } : {})}\n className={cn('tnt-resizable-table', { [props.className!]: props.className })}\n components={{ header: { cell: ResizableTitle } }}\n />\n )\n}\n\nexport default forwardRef(MyComponent)\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/table/resizableTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAKtE,OAAO,cAAc,CAAA;AAkCrB,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,QAAQ,CAAC,EAAE,GAAG,CAAA;CACf;AAED,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;;AA2DD,wBAAsC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/table/resizableTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAKtE,OAAO,cAAc,CAAA;AAkCrB,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,QAAQ,CAAC,EAAE,GAAG,CAAA;CACf;AAED,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,UAAU,EAAE,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;;AAqED,wBAAsC"}
@@ -155,6 +155,10 @@ var MyComponent = function MyComponent(props, ref) {
155
155
  columns = _useState2[0],
156
156
  setColumns = _useState2[1];
157
157
  var dataRef = (0, _react.useRef)([]);
158
+ var _useState3 = (0, _react.useState)(0),
159
+ _useState4 = _slicedToArray(_useState3, 2),
160
+ renderKey = _useState4[0],
161
+ setRenderKey = _useState4[1];
158
162
  var handleResize = function handleResize(index, minWidth) {
159
163
  return (0, _throttle2["default"])(function (e, _ref) {
160
164
  var size = _ref.size;
@@ -174,6 +178,7 @@ var MyComponent = function MyComponent(props, ref) {
174
178
  }
175
179
  return Object.assign(Object.assign({}, column), {
176
180
  onHeaderCell: function onHeaderCell(column) {
181
+ console.log("column", column);
177
182
  var width = column.width;
178
183
  var minWidth = column.minWidth;
179
184
  if (typeof width === 'string' && !width.includes('%')) {
@@ -184,7 +189,10 @@ var MyComponent = function MyComponent(props, ref) {
184
189
  }
185
190
  return {
186
191
  width: width,
187
- onResize: handleResize(index, minWidth)
192
+ onResize: handleResize(index, minWidth),
193
+ onMouseUp: function onMouseUp() {
194
+ setRenderKey(renderKey + 1);
195
+ }
188
196
  };
189
197
  }
190
198
  });
@@ -199,7 +207,9 @@ var MyComponent = function MyComponent(props, ref) {
199
207
  (0, _react.useEffect)(function () {
200
208
  dataRef.current = columns;
201
209
  }, [columns]);
202
- return _react["default"].createElement(_table.Table, Object.assign({}, props, Array.isArray(props === null || props === void 0 ? void 0 : props.columns) ? {
210
+ return _react["default"].createElement(_table.Table, Object.assign({
211
+ key: renderKey
212
+ }, props, Array.isArray(props === null || props === void 0 ? void 0 : props.columns) ? {
203
213
  columns: columns
204
214
  } : {}, {
205
215
  className: (0, _classnames["default"])('tnt-resizable-table', _defineProperty({}, props.className, props.className)),
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/resizableTable/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, forwardRef, useRef, useEffect } from 'react'\nimport cn from 'classnames'\nimport { throttle } from 'lodash'\nimport { Resizable } from 'react-resizable'\nimport { Table } from '../table'\nimport './index.less'\n\nconst ResizableTitle = (\n props: React.HTMLAttributes<any> & {\n onResize: (e: React.SyntheticEvent<Element>, data: any) => void\n width: number\n }\n) => {\n const { onResize, width, ...restProps } = props\n\n if (!width) {\n return <th {...restProps} />\n }\n\n return (\n <Resizable\n width={width}\n height={0}\n handle={\n <span\n className=\"react-resizable-handle\"\n onClick={(e) => {\n e.stopPropagation()\n }}\n />\n }\n onResize={onResize}\n draggableOpts={{ enableUserSelectHack: false }}\n >\n <th {...restProps} />\n </Resizable>\n )\n}\n\ninterface ColumnType {\n width?: any\n minWidth?: any\n}\n\ninterface MyComponentProps {\n columns?: ColumnType[]\n className?: string\n}\n\nconst MyComponent: React.ForwardRefRenderFunction<any, MyComponentProps> = (props, ref) => {\n const [columns, setColumns] = useState<ColumnType[]>([])\n const dataRef = useRef<ColumnType[]>([])\n\n const handleResize = (index: number, minWidth: number) =>\n throttle((e, { size }) => {\n const updatedColumns = dataRef.current || []\n setColumns(\n updatedColumns.map((column, idx) =>\n idx === index ? { ...column, width: Math.max(size.width, minWidth || 40) } : column\n )\n )\n }, 25)\n\n const buildColumns = (columns: ColumnType[]) =>\n columns?.map((column, index) => {\n if (typeof column?.width === 'string' && column?.width?.includes('%')) {\n return column\n }\n return {\n ...column,\n onHeaderCell: (column: ColumnType) => {\n let width = column.width\n let minWidth = column.minWidth\n if (typeof width === 'string' && !width.includes('%')) {\n width = Number(width.replace(/[^\\d]/g, ''))\n }\n\n if (minWidth && typeof minWidth === 'string' && !minWidth.includes('%')) {\n minWidth = Number(minWidth.replace(/[^\\d]/g, ''))\n }\n return { width, onResize: handleResize(index, minWidth) }\n },\n }\n })\n\n useEffect(() => {\n if (Array.isArray(props?.columns)) {\n const curColumns = buildColumns(props.columns)\n setColumns(curColumns || [])\n }\n }, [props?.columns])\n\n useEffect(() => {\n dataRef.current = columns\n }, [columns])\n\n return (\n <Table\n {...props}\n {...(Array.isArray(props?.columns) ? { columns } : {})}\n className={cn('tnt-resizable-table', { [props.className!]: props.className })}\n components={{ header: { cell: ResizableTitle } }}\n />\n )\n}\n\nexport default forwardRef(MyComponent)\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/resizableTable/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, forwardRef, useRef, useEffect } from 'react'\nimport cn from 'classnames'\nimport { throttle } from 'lodash'\nimport { Resizable } from 'react-resizable'\nimport { Table } from '../table'\nimport './index.less'\n\nconst ResizableTitle = (\n props: React.HTMLAttributes<any> & {\n onResize: (e: React.SyntheticEvent<Element>, data: any) => void\n width: number\n }\n) => {\n const { onResize, width, ...restProps } = props\n\n if (!width) {\n return <th {...restProps} />\n }\n\n return (\n <Resizable\n width={width}\n height={0}\n handle={\n <span\n className=\"react-resizable-handle\"\n onClick={(e) => {\n e.stopPropagation()\n }}\n />\n }\n onResize={onResize}\n draggableOpts={{ enableUserSelectHack: false }}\n >\n <th {...restProps} />\n </Resizable>\n )\n}\n\ninterface ColumnType {\n width?: any\n minWidth?: any\n}\n\ninterface MyComponentProps {\n columns?: ColumnType[]\n className?: string\n}\n\nconst MyComponent: React.ForwardRefRenderFunction<any, MyComponentProps> = (props, ref) => {\n const [columns, setColumns] = useState<ColumnType[]>([])\n const dataRef = useRef<ColumnType[]>([])\n const [renderKey, setRenderKey] = useState(0);\n\n const handleResize = (index: number, minWidth: number) =>\n throttle((e, { size }) => {\n const updatedColumns = dataRef.current || []\n setColumns(\n updatedColumns.map((column, idx) =>\n idx === index ? { ...column, width: Math.max(size.width, minWidth || 40) } : column\n )\n )\n }, 25)\n\n\n\n const buildColumns = (columns: ColumnType[]) =>\n columns?.map((column, index) => {\n if (typeof column?.width === 'string' && column?.width?.includes('%')) {\n return column\n }\n return {\n ...column,\n onHeaderCell: (column: ColumnType) => {\n console.log(\"column\",column)\n let width = column.width\n let minWidth = column.minWidth\n if (typeof width === 'string' && !width.includes('%')) {\n width = Number(width.replace(/[^\\d]/g, ''))\n }\n\n if (minWidth && typeof minWidth === 'string' && !minWidth.includes('%')) {\n minWidth = Number(minWidth.replace(/[^\\d]/g, ''))\n }\n return {\n width,\n onResize: handleResize(index, minWidth),\n onMouseUp:()=>{\n setRenderKey(renderKey+1)\n }}\n },\n }\n })\n\n useEffect(() => {\n if (Array.isArray(props?.columns)) {\n const curColumns = buildColumns(props.columns)\n setColumns(curColumns || [])\n }\n }, [props?.columns])\n\n useEffect(() => {\n dataRef.current = columns\n }, [columns])\n\n return (\n <Table\n key={renderKey}\n {...props}\n {...(Array.isArray(props?.columns) ? { columns } : {})}\n className={cn('tnt-resizable-table', { [props.className!]: props.className })}\n components={{ header: { cell: ResizableTitle } }}\n />\n )\n}\n\nexport default forwardRef(MyComponent)\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tntd",
3
- "version": "3.0.40-beta.1",
3
+ "version": "3.0.40-beta.2",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "start": "heft start --storybook",
@@ -114,4 +114,4 @@
114
114
  "main": "lib/index.js",
115
115
  "module": "es/index.js",
116
116
  "typings": "lib/index.d.ts"
117
- }
117
+ }