@teppen/react-ui 1.8.3 → 1.8.4
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./columns-width/context.js");require("../../../node_modules/tslib/tslib.es6.js");var l=require("./header-v2-hook.js"),n=require("../checkbox/components.js"),s=require("../../search-bar/condition-search-bar/base.js"),i=require("../id/provider.js"),a=require("../filter-v2/context.js");var o=t.memo((function(r){var n=t.useRef(null),s=l.useResizeColWidthHook(r.keyName).onMouseDownResizeWidth,i=n.current?r.colWidth-n.current.clientWidth:r.colWidth;return e.jsxs("div",{className:"relative",style:{width:r.colWidth,maxWidth:r.colWidth,minWidth:r.colWidth},children:[e.jsxs("div",{className:"flex justify-between items-center bg-gray-200 text-gray-600 h-[32px]",children:[e.jsx("div",{className:"px-2",style:{maxWidth:i},children:r.label&&e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis",children:r.label})}),e.jsx("div",{ref:n,className:"flex items-center w-fit shrink-0 gap-1 px-1",children:!r.disableSort&&r.generateSortButton&&r.generateSortButton(r.keyName)})]}),e.jsx("div",{className:"absolute top-0 right-0 grid place-items-end py-1 w-[4px] h-full cursor-col-resize",onMouseDown:s,children:e.jsx("div",{className:"w-[1px] h-full bg-white"})})]})}));exports.TableHeader=function(c){var d=i.useTableIdGenerator(),u=r.useColumnsWidthState().getColumnWidth,h=a.useFilter(),x=h.conditions,b=h.addFilter,m=h.removeFilter,p=l.useScrollXRef();t.useEffect((function(){if(p.current){var e=p.current,t=function(t){0!==t.deltaY&&(t.preventDefault(),e.scrollLeft+=t.deltaY)};return e.addEventListener("wheel",t),function(){e.removeEventListener("wheel",t)}}}),[p]);var f=t.useCallback((function(e){switch(e.type){case"add":b(e.payload.condition);break;case"remove":m(e.payload.index)}}),[]),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./columns-width/context.js");require("../../../node_modules/tslib/tslib.es6.js");var l=require("./header-v2-hook.js"),n=require("../checkbox/components.js"),s=require("../../search-bar/condition-search-bar/base.js"),i=require("../id/provider.js"),a=require("../filter-v2/context.js");var o=t.memo((function(r){var n=t.useRef(null),s=l.useResizeColWidthHook(r.keyName).onMouseDownResizeWidth,i=n.current?r.colWidth-n.current.clientWidth:r.colWidth;return e.jsxs("div",{className:"relative",style:{width:r.colWidth,maxWidth:r.colWidth,minWidth:r.colWidth},children:[e.jsxs("div",{className:"flex justify-between items-center bg-gray-200 text-gray-600 h-[32px]",children:[e.jsx("div",{className:"px-2",style:{maxWidth:i},children:r.label&&e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis",children:r.label})}),e.jsx("div",{ref:n,className:"flex items-center w-fit shrink-0 gap-1 px-1",children:!r.disableSort&&r.generateSortButton&&r.generateSortButton(r.keyName)})]}),e.jsx("div",{className:"absolute top-0 right-0 grid place-items-end py-1 w-[4px] h-full cursor-col-resize",onMouseDown:s,children:e.jsx("div",{className:"w-[1px] h-full bg-white"})})]})}));exports.TableHeader=function(c){var d=i.useTableIdGenerator(),u=r.useColumnsWidthState().getColumnWidth,h=a.useFilter(),x=h.conditions,b=h.addFilter,m=h.removeFilter,p=l.useScrollXRef();t.useEffect((function(){if(p.current){var e=p.current,t=function(t){0!==t.deltaY&&(t.preventDefault(),e.scrollLeft+=t.deltaY)};return e.addEventListener("wheel",t),function(){e.removeEventListener("wheel",t)}}}),[p]);var f=t.useCallback((function(e){switch(e.type){case"add":b(e.payload.condition);break;case"remove":m(e.payload.index)}}),[]),v=t.useMemo((function(){return c.cols.filter((function(e){return!!e.label&&(e.editable||!e.editable&&!e.render)})).map((function(e){switch(e.type){case"string":case"number":return{key:e.key.toString(),label:e.label,type:e.type};case"select":return{key:e.key.toString(),label:e.label,type:e.type,options:e.options}}}))}),[c.cols]);return e.jsxs("div",{className:"border-gray-200 bg-gray-200 text-gray-600 rounded-t-md",style:{maxWidth:c.maxWidth},children:[e.jsx("div",{className:"py-2 px-2",children:e.jsx(s.ConditionSearchBar,{id:d.getTableHeaderId(),targets:v,conditions:x,onChangeCondition:f,size:"small"})}),e.jsx("style",{children:"\n .teppen-no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n .teppen-no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n "}),e.jsx("div",{ref:p,className:"relative max-w-full overflow-x-auto teppen-no-scrollbar",children:e.jsxs("div",{className:"flex h-[32px]",children:[c.checkbox&&e.jsx("div",{className:"w-8 h-full",children:e.jsx(n.AllCheckbox,{rows:c.rows})}),c.cols.map((function(t){return e.jsx(o,{keyName:t.key.toString(),label:t.label,colWidth:u(t.key),disableSort:t.disableSort||!t.editable&&!!t.render,generateSortButton:c.generateSortButton},t.key.toString())}))]})})]})};
|
|
2
2
|
//# sourceMappingURL=header-v2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-v2.js","sources":["../../../../../src/table/header/header-v2.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { DataObject, DataRecord, TTableColumn } from \"../table/type\";\nimport { useColumnsWidthState } from \"./columns-width\";\nimport { useResizeColWidthHook, useScrollXRef } from \"./header-v2-hook\";\nimport { AllCheckbox } from \"../checkbox/components\";\nimport { ConditionSearchBar } from \"../../search-bar\";\nimport { useTableIdGenerator } from \"../id\";\nimport { useFilter } from \"../filter-v2\";\nimport { TConditionChangeAction } from \"../../search-bar/condition-search-bar/condition-input-management/type\";\n\ninterface IPropsTableHeader<T extends DataRecord> {\n cols: TTableColumn<T>[];\n checkbox?: boolean;\n rows: DataObject<T>[];\n maxWidth?: string;\n generateSortButton?: (columnKey: string) => React.ReactNode;\n}\n\nexport function TableHeader<T extends DataRecord>(props: IPropsTableHeader<T>) {\n const idGenerator = useTableIdGenerator();\n const { getColumnWidth } = useColumnsWidthState();\n const { conditions, addFilter, removeFilter } = useFilter();\n const ref = useScrollXRef();\n\n useEffect(() => {\n if (ref.current) {\n const element = ref.current;\n\n const scrollX = (e: WheelEvent) => {\n if (e.deltaY === 0) return;\n\n e.preventDefault();\n element.scrollLeft += e.deltaY;\n };\n\n element.addEventListener(\"wheel\", scrollX);\n\n return () => {\n element.removeEventListener(\"wheel\", scrollX);\n };\n }\n }, [ref]);\n\n const onChangeCondition = useCallback((action: TConditionChangeAction) => {\n switch (action.type) {\n case \"add\":\n addFilter(action.payload.condition);\n break;\n case \"remove\":\n removeFilter(action.payload.index);\n break;\n }\n }, []);\n\n const targets = useMemo(() => {\n return props.cols\n .filter(\n (col) => !!col.label && (col.editable || (!col.editable && !col.render))\n )\n .map((col) => {\n switch (col.type) {\n case \"string\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n };\n case \"number\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n };\n case \"select\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n options: col.options,\n };\n }\n });\n }, [props.cols]);\n\n return (\n <div\n className=\"border-gray-200 bg-gray-200 text-gray-600 rounded-t-md\"\n style={{ maxWidth: props.maxWidth }}\n >\n <div className=\"py-2 px-2\">\n <ConditionSearchBar\n id={idGenerator.getTableHeaderId()}\n targets={targets}\n conditions={conditions}\n onChangeCondition={onChangeCondition}\n size=\"small\"\n />\n </div>\n\n <style>{`\n .teppen-no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n .teppen-no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n `}</style>\n <div\n ref={ref}\n className=\"relative max-w-full overflow-x-auto teppen-no-scrollbar\"\n >\n <div className=\"flex h-[32px]\">\n {props.checkbox && (\n <
|
|
1
|
+
{"version":3,"file":"header-v2.js","sources":["../../../../../src/table/header/header-v2.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { DataObject, DataRecord, TTableColumn } from \"../table/type\";\nimport { useColumnsWidthState } from \"./columns-width\";\nimport { useResizeColWidthHook, useScrollXRef } from \"./header-v2-hook\";\nimport { AllCheckbox } from \"../checkbox/components\";\nimport { ConditionSearchBar } from \"../../search-bar\";\nimport { useTableIdGenerator } from \"../id\";\nimport { useFilter } from \"../filter-v2\";\nimport { TConditionChangeAction } from \"../../search-bar/condition-search-bar/condition-input-management/type\";\n\ninterface IPropsTableHeader<T extends DataRecord> {\n cols: TTableColumn<T>[];\n checkbox?: boolean;\n rows: DataObject<T>[];\n maxWidth?: string;\n generateSortButton?: (columnKey: string) => React.ReactNode;\n}\n\nexport function TableHeader<T extends DataRecord>(props: IPropsTableHeader<T>) {\n const idGenerator = useTableIdGenerator();\n const { getColumnWidth } = useColumnsWidthState();\n const { conditions, addFilter, removeFilter } = useFilter();\n const ref = useScrollXRef();\n\n useEffect(() => {\n if (ref.current) {\n const element = ref.current;\n\n const scrollX = (e: WheelEvent) => {\n if (e.deltaY === 0) return;\n\n e.preventDefault();\n element.scrollLeft += e.deltaY;\n };\n\n element.addEventListener(\"wheel\", scrollX);\n\n return () => {\n element.removeEventListener(\"wheel\", scrollX);\n };\n }\n }, [ref]);\n\n const onChangeCondition = useCallback((action: TConditionChangeAction) => {\n switch (action.type) {\n case \"add\":\n addFilter(action.payload.condition);\n break;\n case \"remove\":\n removeFilter(action.payload.index);\n break;\n }\n }, []);\n\n const targets = useMemo(() => {\n return props.cols\n .filter(\n (col) => !!col.label && (col.editable || (!col.editable && !col.render))\n )\n .map((col) => {\n switch (col.type) {\n case \"string\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n };\n case \"number\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n };\n case \"select\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n options: col.options,\n };\n }\n });\n }, [props.cols]);\n\n return (\n <div\n className=\"border-gray-200 bg-gray-200 text-gray-600 rounded-t-md\"\n style={{ maxWidth: props.maxWidth }}\n >\n <div className=\"py-2 px-2\">\n <ConditionSearchBar\n id={idGenerator.getTableHeaderId()}\n targets={targets}\n conditions={conditions}\n onChangeCondition={onChangeCondition}\n size=\"small\"\n />\n </div>\n\n <style>{`\n .teppen-no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n .teppen-no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n `}</style>\n <div\n ref={ref}\n className=\"relative max-w-full overflow-x-auto teppen-no-scrollbar\"\n >\n <div className=\"flex h-[32px]\">\n {props.checkbox && (\n <div className=\"w-8 h-full\">\n <AllCheckbox rows={props.rows} />\n </div>\n )}\n {props.cols.map((col) => {\n return (\n <HeaderElement\n key={col.key.toString()}\n keyName={col.key.toString()}\n label={col.label}\n colWidth={getColumnWidth(col.key as string)}\n disableSort={col.disableSort || (!col.editable && !!col.render)}\n generateSortButton={props.generateSortButton}\n />\n );\n })}\n </div>\n </div>\n </div>\n );\n}\n\ninterface IPropsHeaderElement {\n keyName: string;\n label?: string;\n colWidth: number;\n disableSort?: boolean;\n generateSortButton?: (columnKey: string) => React.ReactNode;\n}\n\nconst HeaderElement = memo(function HE(props: IPropsHeaderElement) {\n const ref = useRef<HTMLDivElement>(null);\n const { onMouseDownResizeWidth } = useResizeColWidthHook(props.keyName);\n\n const maxWidthLabel = ref.current\n ? props.colWidth - ref.current.clientWidth\n : props.colWidth;\n\n return (\n <div\n className=\"relative\"\n style={{\n width: props.colWidth,\n maxWidth: props.colWidth,\n minWidth: props.colWidth,\n }}\n >\n <div\n className={`flex justify-between items-center bg-gray-200 text-gray-600 h-[32px]`}\n >\n <div className=\"px-2\" style={{ maxWidth: maxWidthLabel }}>\n {props.label && (\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis`}\n >\n {props.label}\n </p>\n )}\n </div>\n\n <div ref={ref} className=\"flex items-center w-fit shrink-0 gap-1 px-1\">\n {!props.disableSort &&\n props.generateSortButton &&\n props.generateSortButton(props.keyName)}\n </div>\n </div>\n <div\n className=\"absolute top-0 right-0 grid place-items-end py-1 w-[4px] h-full cursor-col-resize\"\n onMouseDown={onMouseDownResizeWidth}\n >\n <div className={`w-[1px] h-full bg-white`} />\n </div>\n </div>\n );\n});\n"],"names":["HeaderElement","memo","props","ref","useRef","onMouseDownResizeWidth","useResizeColWidthHook","keyName","maxWidthLabel","current","colWidth","clientWidth","_jsxs","jsxs","className","style","width","maxWidth","minWidth","children","_jsx","jsx","label","disableSort","generateSortButton","onMouseDown","idGenerator","useTableIdGenerator","getColumnWidth","useColumnsWidthState","_a","useFilter","conditions","addFilter","removeFilter","useScrollXRef","useEffect","element_1","scrollX_1","e","deltaY","preventDefault","scrollLeft","addEventListener","removeEventListener","onChangeCondition","useCallback","action","type","payload","condition","index","targets","useMemo","cols","filter","col","editable","render","map","key","toString","options","ConditionSearchBar","id","getTableHeaderId","size","checkbox","AllCheckbox","rows"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{memo as r,useRef as n,useEffect as l,useCallback as o,useMemo as i}from"react";import{useColumnsWidthState as a}from"./columns-width/context.js";import"../../../node_modules/tslib/tslib.es6.js";import{useResizeColWidthHook as s,useScrollXRef as c}from"./header-v2-hook.js";import{AllCheckbox as d}from"../checkbox/components.js";import{ConditionSearchBar as m}from"../../search-bar/condition-search-bar/base.js";import{useTableIdGenerator as h}from"../id/provider.js";import{useFilter as p}from"../filter-v2/context.js";function u(r){var n=h(),s=a().getColumnWidth,u=p(),b=u.conditions,y=u.addFilter,v=u.removeFilter,x=c();l((function(){if(x.current){var e=x.current,t=function(t){0!==t.deltaY&&(t.preventDefault(),e.scrollLeft+=t.deltaY)};return e.addEventListener("wheel",t),function(){e.removeEventListener("wheel",t)}}}),[x]);var g=o((function(e){switch(e.type){case"add":y(e.payload.condition);break;case"remove":v(e.payload.index)}}),[]),w=i((function(){return r.cols.filter((function(e){return!!e.label&&(e.editable||!e.editable&&!e.render)})).map((function(e){switch(e.type){case"string":case"number":return{key:e.key.toString(),label:e.label,type:e.type};case"select":return{key:e.key.toString(),label:e.label,type:e.type,options:e.options}}}))}),[r.cols]);return e("div",{className:"border-gray-200 bg-gray-200 text-gray-600 rounded-t-md",style:{maxWidth:r.maxWidth},children:[t("div",{className:"py-2 px-2",children:t(m,{id:n.getTableHeaderId(),targets:w,conditions:b,onChangeCondition:g,size:"small"})}),t("style",{children:"\n .teppen-no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n .teppen-no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n "}),t("div",{ref:x,className:"relative max-w-full overflow-x-auto teppen-no-scrollbar",children:e("div",{className:"flex h-[32px]",children:[r.checkbox&&t("
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{memo as r,useRef as n,useEffect as l,useCallback as o,useMemo as i}from"react";import{useColumnsWidthState as a}from"./columns-width/context.js";import"../../../node_modules/tslib/tslib.es6.js";import{useResizeColWidthHook as s,useScrollXRef as c}from"./header-v2-hook.js";import{AllCheckbox as d}from"../checkbox/components.js";import{ConditionSearchBar as m}from"../../search-bar/condition-search-bar/base.js";import{useTableIdGenerator as h}from"../id/provider.js";import{useFilter as p}from"../filter-v2/context.js";function u(r){var n=h(),s=a().getColumnWidth,u=p(),b=u.conditions,y=u.addFilter,v=u.removeFilter,x=c();l((function(){if(x.current){var e=x.current,t=function(t){0!==t.deltaY&&(t.preventDefault(),e.scrollLeft+=t.deltaY)};return e.addEventListener("wheel",t),function(){e.removeEventListener("wheel",t)}}}),[x]);var g=o((function(e){switch(e.type){case"add":y(e.payload.condition);break;case"remove":v(e.payload.index)}}),[]),w=i((function(){return r.cols.filter((function(e){return!!e.label&&(e.editable||!e.editable&&!e.render)})).map((function(e){switch(e.type){case"string":case"number":return{key:e.key.toString(),label:e.label,type:e.type};case"select":return{key:e.key.toString(),label:e.label,type:e.type,options:e.options}}}))}),[r.cols]);return e("div",{className:"border-gray-200 bg-gray-200 text-gray-600 rounded-t-md",style:{maxWidth:r.maxWidth},children:[t("div",{className:"py-2 px-2",children:t(m,{id:n.getTableHeaderId(),targets:w,conditions:b,onChangeCondition:g,size:"small"})}),t("style",{children:"\n .teppen-no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n .teppen-no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n "}),t("div",{ref:x,className:"relative max-w-full overflow-x-auto teppen-no-scrollbar",children:e("div",{className:"flex h-[32px]",children:[r.checkbox&&t("div",{className:"w-8 h-full",children:t(d,{rows:r.rows})}),r.cols.map((function(e){return t(f,{keyName:e.key.toString(),label:e.label,colWidth:s(e.key),disableSort:e.disableSort||!e.editable&&!!e.render,generateSortButton:r.generateSortButton},e.key.toString())}))]})})]})}var f=r((function(r){var l=n(null),o=s(r.keyName).onMouseDownResizeWidth,i=l.current?r.colWidth-l.current.clientWidth:r.colWidth;return e("div",{className:"relative",style:{width:r.colWidth,maxWidth:r.colWidth,minWidth:r.colWidth},children:[e("div",{className:"flex justify-between items-center bg-gray-200 text-gray-600 h-[32px]",children:[t("div",{className:"px-2",style:{maxWidth:i},children:r.label&&t("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis",children:r.label})}),t("div",{ref:l,className:"flex items-center w-fit shrink-0 gap-1 px-1",children:!r.disableSort&&r.generateSortButton&&r.generateSortButton(r.keyName)})]}),t("div",{className:"absolute top-0 right-0 grid place-items-end py-1 w-[4px] h-full cursor-col-resize",onMouseDown:o,children:t("div",{className:"w-[1px] h-full bg-white"})})]})}));export{u as TableHeader};
|
|
2
2
|
//# sourceMappingURL=header-v2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-v2.js","sources":["../../../../../src/table/header/header-v2.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { DataObject, DataRecord, TTableColumn } from \"../table/type\";\nimport { useColumnsWidthState } from \"./columns-width\";\nimport { useResizeColWidthHook, useScrollXRef } from \"./header-v2-hook\";\nimport { AllCheckbox } from \"../checkbox/components\";\nimport { ConditionSearchBar } from \"../../search-bar\";\nimport { useTableIdGenerator } from \"../id\";\nimport { useFilter } from \"../filter-v2\";\nimport { TConditionChangeAction } from \"../../search-bar/condition-search-bar/condition-input-management/type\";\n\ninterface IPropsTableHeader<T extends DataRecord> {\n cols: TTableColumn<T>[];\n checkbox?: boolean;\n rows: DataObject<T>[];\n maxWidth?: string;\n generateSortButton?: (columnKey: string) => React.ReactNode;\n}\n\nexport function TableHeader<T extends DataRecord>(props: IPropsTableHeader<T>) {\n const idGenerator = useTableIdGenerator();\n const { getColumnWidth } = useColumnsWidthState();\n const { conditions, addFilter, removeFilter } = useFilter();\n const ref = useScrollXRef();\n\n useEffect(() => {\n if (ref.current) {\n const element = ref.current;\n\n const scrollX = (e: WheelEvent) => {\n if (e.deltaY === 0) return;\n\n e.preventDefault();\n element.scrollLeft += e.deltaY;\n };\n\n element.addEventListener(\"wheel\", scrollX);\n\n return () => {\n element.removeEventListener(\"wheel\", scrollX);\n };\n }\n }, [ref]);\n\n const onChangeCondition = useCallback((action: TConditionChangeAction) => {\n switch (action.type) {\n case \"add\":\n addFilter(action.payload.condition);\n break;\n case \"remove\":\n removeFilter(action.payload.index);\n break;\n }\n }, []);\n\n const targets = useMemo(() => {\n return props.cols\n .filter(\n (col) => !!col.label && (col.editable || (!col.editable && !col.render))\n )\n .map((col) => {\n switch (col.type) {\n case \"string\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n };\n case \"number\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n };\n case \"select\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n options: col.options,\n };\n }\n });\n }, [props.cols]);\n\n return (\n <div\n className=\"border-gray-200 bg-gray-200 text-gray-600 rounded-t-md\"\n style={{ maxWidth: props.maxWidth }}\n >\n <div className=\"py-2 px-2\">\n <ConditionSearchBar\n id={idGenerator.getTableHeaderId()}\n targets={targets}\n conditions={conditions}\n onChangeCondition={onChangeCondition}\n size=\"small\"\n />\n </div>\n\n <style>{`\n .teppen-no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n .teppen-no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n `}</style>\n <div\n ref={ref}\n className=\"relative max-w-full overflow-x-auto teppen-no-scrollbar\"\n >\n <div className=\"flex h-[32px]\">\n {props.checkbox && (\n <
|
|
1
|
+
{"version":3,"file":"header-v2.js","sources":["../../../../../src/table/header/header-v2.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { DataObject, DataRecord, TTableColumn } from \"../table/type\";\nimport { useColumnsWidthState } from \"./columns-width\";\nimport { useResizeColWidthHook, useScrollXRef } from \"./header-v2-hook\";\nimport { AllCheckbox } from \"../checkbox/components\";\nimport { ConditionSearchBar } from \"../../search-bar\";\nimport { useTableIdGenerator } from \"../id\";\nimport { useFilter } from \"../filter-v2\";\nimport { TConditionChangeAction } from \"../../search-bar/condition-search-bar/condition-input-management/type\";\n\ninterface IPropsTableHeader<T extends DataRecord> {\n cols: TTableColumn<T>[];\n checkbox?: boolean;\n rows: DataObject<T>[];\n maxWidth?: string;\n generateSortButton?: (columnKey: string) => React.ReactNode;\n}\n\nexport function TableHeader<T extends DataRecord>(props: IPropsTableHeader<T>) {\n const idGenerator = useTableIdGenerator();\n const { getColumnWidth } = useColumnsWidthState();\n const { conditions, addFilter, removeFilter } = useFilter();\n const ref = useScrollXRef();\n\n useEffect(() => {\n if (ref.current) {\n const element = ref.current;\n\n const scrollX = (e: WheelEvent) => {\n if (e.deltaY === 0) return;\n\n e.preventDefault();\n element.scrollLeft += e.deltaY;\n };\n\n element.addEventListener(\"wheel\", scrollX);\n\n return () => {\n element.removeEventListener(\"wheel\", scrollX);\n };\n }\n }, [ref]);\n\n const onChangeCondition = useCallback((action: TConditionChangeAction) => {\n switch (action.type) {\n case \"add\":\n addFilter(action.payload.condition);\n break;\n case \"remove\":\n removeFilter(action.payload.index);\n break;\n }\n }, []);\n\n const targets = useMemo(() => {\n return props.cols\n .filter(\n (col) => !!col.label && (col.editable || (!col.editable && !col.render))\n )\n .map((col) => {\n switch (col.type) {\n case \"string\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n };\n case \"number\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n };\n case \"select\":\n return {\n key: col.key.toString(),\n label: col.label as string,\n type: col.type,\n options: col.options,\n };\n }\n });\n }, [props.cols]);\n\n return (\n <div\n className=\"border-gray-200 bg-gray-200 text-gray-600 rounded-t-md\"\n style={{ maxWidth: props.maxWidth }}\n >\n <div className=\"py-2 px-2\">\n <ConditionSearchBar\n id={idGenerator.getTableHeaderId()}\n targets={targets}\n conditions={conditions}\n onChangeCondition={onChangeCondition}\n size=\"small\"\n />\n </div>\n\n <style>{`\n .teppen-no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n .teppen-no-scrollbar::-webkit-scrollbar {\n display: none;\n }\n `}</style>\n <div\n ref={ref}\n className=\"relative max-w-full overflow-x-auto teppen-no-scrollbar\"\n >\n <div className=\"flex h-[32px]\">\n {props.checkbox && (\n <div className=\"w-8 h-full\">\n <AllCheckbox rows={props.rows} />\n </div>\n )}\n {props.cols.map((col) => {\n return (\n <HeaderElement\n key={col.key.toString()}\n keyName={col.key.toString()}\n label={col.label}\n colWidth={getColumnWidth(col.key as string)}\n disableSort={col.disableSort || (!col.editable && !!col.render)}\n generateSortButton={props.generateSortButton}\n />\n );\n })}\n </div>\n </div>\n </div>\n );\n}\n\ninterface IPropsHeaderElement {\n keyName: string;\n label?: string;\n colWidth: number;\n disableSort?: boolean;\n generateSortButton?: (columnKey: string) => React.ReactNode;\n}\n\nconst HeaderElement = memo(function HE(props: IPropsHeaderElement) {\n const ref = useRef<HTMLDivElement>(null);\n const { onMouseDownResizeWidth } = useResizeColWidthHook(props.keyName);\n\n const maxWidthLabel = ref.current\n ? props.colWidth - ref.current.clientWidth\n : props.colWidth;\n\n return (\n <div\n className=\"relative\"\n style={{\n width: props.colWidth,\n maxWidth: props.colWidth,\n minWidth: props.colWidth,\n }}\n >\n <div\n className={`flex justify-between items-center bg-gray-200 text-gray-600 h-[32px]`}\n >\n <div className=\"px-2\" style={{ maxWidth: maxWidthLabel }}>\n {props.label && (\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis`}\n >\n {props.label}\n </p>\n )}\n </div>\n\n <div ref={ref} className=\"flex items-center w-fit shrink-0 gap-1 px-1\">\n {!props.disableSort &&\n props.generateSortButton &&\n props.generateSortButton(props.keyName)}\n </div>\n </div>\n <div\n className=\"absolute top-0 right-0 grid place-items-end py-1 w-[4px] h-full cursor-col-resize\"\n onMouseDown={onMouseDownResizeWidth}\n >\n <div className={`w-[1px] h-full bg-white`} />\n </div>\n </div>\n );\n});\n"],"names":["TableHeader","props","idGenerator","useTableIdGenerator","getColumnWidth","useColumnsWidthState","_a","useFilter","conditions","addFilter","removeFilter","ref","useScrollXRef","useEffect","current","element_1","scrollX_1","e","deltaY","preventDefault","scrollLeft","addEventListener","removeEventListener","onChangeCondition","useCallback","action","type","payload","condition","index","targets","useMemo","cols","filter","col","label","editable","render","map","key","toString","options","_jsxs","className","style","maxWidth","children","_jsx","ConditionSearchBar","id","getTableHeaderId","size","checkbox","AllCheckbox","rows","HeaderElement","keyName","colWidth","disableSort","generateSortButton","memo","useRef","onMouseDownResizeWidth","useResizeColWidthHook","maxWidthLabel","clientWidth","width","minWidth","onMouseDown"],"mappings":"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"}
|