@teppen/react-ui 0.5.0 → 0.5.1
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.
- package/dist/cjs/src/table/base.js +1 -1
- package/dist/cjs/src/table/filter-form.js +1 -1
- package/dist/cjs/src/table/filter-form.js.map +1 -1
- package/dist/cjs/src/table/filter.js.map +1 -1
- package/dist/esm/src/table/base.js +1 -1
- package/dist/esm/src/table/filter-form.js +1 -1
- package/dist/esm/src/table/filter-form.js.map +1 -1
- package/dist/esm/src/table/filter.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),
|
|
2
|
+
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),l=require("./hook.js"),t=require("./cell.js"),s=require("./sort.js"),n=require("./header.js"),i=require("./page.js"),a=require("./filter.js"),o=require("react"),c=require("./filter-form.js");function d(d){var u=l.useTable(d),x=u.cols,j=u.rows,m=u.rowCount,h=u.sortKey,p=u.sortOrder,f=u.page,v=f.count,b=f.current,y=f.from,g=f.to,N=f.next,k=f.prev,C=f.jump,q=o.useState(!1),T=q[0],w=q[1];return r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end",children:r.jsx(a.TableFilterRemoveButton,{children:"remove all filters"})}),r.jsx("div",{className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:r.jsxs("table",{className:"table table-auto w-full",children:[r.jsx("thead",{children:r.jsx("tr",{className:"sticky top-0 border-gray-200 z-20",children:x.map((function(e){return r.jsx(n.TableHeaderElement,{label:e.label,columnType:e.type,sortConponent:r.jsx(s.Sort,{onClick:e.onClick,isSortedByThis:h===e.key,sortOrder:p}),filterComponent:r.jsx(a.TableFilter,{keyName:e.key,onClick:function(e){e.preventDefault(),w((function(e){return!e}))}})},e.key)}))})}),r.jsxs("tbody",{children:[T&&r.jsx("tr",{children:r.jsx("td",{colSpan:x.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl py-5 px-2 z-20",children:r.jsx("div",{className:"container max-w-[768px] mx-auto",children:r.jsxs("div",{className:"relative",children:[r.jsx("div",{className:"absolute top-0 right-0",children:r.jsx("button",{onClick:function(e){e.preventDefault(),w(!1)},children:"close"})}),r.jsx("div",{children:r.jsx(c.TableFilterForm,{cols:x})})]})})})}),0===j.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:x.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),j.map((function(l){var s;return r.jsx("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(s=j[0])||void 0===s?void 0:s.onClick)?"hover:cursor-pointer":""),onClick:l.onClick,"data-testid":l.id,children:x.map((function(s){return r.jsx(t.TableCell,e.__assign({},s,{columnKey:s.key,currentRecord:l,children:l[s.key]}))}))},l.id)}))]})]})}),r.jsxs("div",{className:"mt-1",children:[r.jsxs("p",{className:"text-center text-sm text-gray-600",children:[y+1," - ",g<m?g:m," of ",m]}),r.jsx("div",{className:"mt-2",children:r.jsx(i.Pagenation,{count:v,current:b,jump:C,next:N,prev:k})})]})]})}module.exports=function(l){return r.jsx(a.TableFilterProvider,{children:r.jsx(d,e.__assign({},l))})};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),l=require("react"),n=require("./filter.js"),t=require("./cancel-icon.js");exports.TableFilterForm=function(r){var i=n.useTableFilterContext(),a=i.addFilter,s=i.removeFilter,
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),l=require("react"),n=require("./filter.js"),t=require("./cancel-icon.js");exports.TableFilterForm=function(r){var i=n.useTableFilterContext(),a=i.addFilter,s=i.removeFilter,u=i.filterConditions,c=l.useState(""),o=c[0],d=c[1],x=l.useState(""),f=x[0],v=x[1],p=l.useState(""),j=p[0],h=p[1],m=l.useState("string"),y=m[0],g=m[1];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex flex-col gap-2 mb-5",children:[e.jsx("p",{className:"font-bold text-lg",children:"フィルタ追加"}),e.jsxs("div",{className:"flex flex-wrap gap-1",children:[e.jsxs("select",{value:o,onChange:function(e){var l;e.preventDefault(),d(e.target.value);var n=null===(l=r.cols.find((function(l){return l.key===e.target.value})))||void 0===l?void 0:l.type;g(n)},children:[e.jsx("option",{value:"",children:"-- 列を選択 --"}),r.cols.filter((function(e){return!!e.label&&!!e.type})).map((function(l){return e.jsx("option",{value:l.key,children:l.label},l.key)}))]}),e.jsxs("select",{value:f,onChange:function(e){e.preventDefault(),v(e.target.value)},disabled:!o,children:[e.jsx("option",{value:"",children:o?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===y&&n.STRING_FILTER_OPERATOR.map((function(l){return e.jsx("option",{value:l.key,children:l.label},l.key)})),"number"===y&&n.NUMBER_FILTER_OPERATOR.map((function(l){return e.jsx("option",{value:l.key,children:l.label},l.key)}))]}),e.jsx("input",{type:"text",value:j,onChange:function(e){e.preventDefault(),h(e.target.value)},placeholder:"-- 値を入力 --"})]}),e.jsx("div",{className:"flex justify-end",children:e.jsx("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md",onClick:function(e){e.preventDefault(),o&&f&&j?a("string"===y?{key:o,operator:f,value:[j]}:{key:o,operator:f,value:Number(j)}):alert("全ての項目を入力してください")},children:"追加"})})]}),e.jsxs("div",{children:[u.length>0&&e.jsx("p",{className:"font-bold text-lg",children:"フィルタ一覧"}),e.jsx("ul",{className:"flex flex-col gap-1 my-2",children:u.map((function(l){var i,a;return e.jsxs("li",{className:"flex justify-between",children:[e.jsxs("p",{children:["「",e.jsx("strong",{children:null===(i=r.cols.find((function(e){return e.key===l.key})))||void 0===i?void 0:i.label}),"」 は",e.jsx("span",{children:null===(a=n.FILTER_OPERATOR.find((function(e){return e.key===l.operator})))||void 0===a?void 0:a.label}),"：",e.jsx("span",{children:l.value})]}),e.jsx("button",{onClick:function(e){e.preventDefault(),s(l.id)},children:e.jsx(t.CancelIcon,{size:16})})]},l.id)}))}),e.jsx("div",{className:"flex justify-center",children:e.jsx(n.TableFilterRemoveButton,{children:e.jsx("p",{className:"text-gray-600 underline hover:text-gray-800",children:"remove all filters"})})})]})]})};
|
|
2
2
|
//# sourceMappingURL=filter-form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-form.js","sources":["../../../../src/table/filter-form.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n FILTER_OPERATOR,\n NUMBER_FILTER_OPERATOR,\n STRING_FILTER_OPERATOR,\n TStringFilterOperator,\n TableFilterRemoveButton,\n useTableFilterContext,\n} from \"./filter\";\nimport { TColumnType, TTableColumn } from \"./type\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsFilterForm = {\n cols: TTableColumn[];\n};\n\nexport function TableFilterForm(props: TPropsFilterForm) {\n const { addFilter, removeFilter, filterConditions } = useTableFilterContext();\n const [selectingKey, setSelectingKey] = useState<string>(\"\");\n const [selectingOperator, setSelectingOperator] = useState<string>(\"\");\n const [value, setValue] = useState<string>(\"\");\n const [filterType, setFilterType] = useState<TColumnType>(\"string\");\n\n return (\n <>\n <div className=\"flex flex-col gap-2\">\n <p className=\"font-bold text-lg\">フィルタ追加</p>\n <div className=\"flex flex-wrap gap-1\">\n <select\n value={selectingKey}\n onChange={(e) => {\n e.preventDefault();\n setSelectingKey(e.target.value);\n const columnType = props.cols.find(\n (col) => col.key === e.target.value\n )?.type as TColumnType;\n setFilterType(columnType);\n }}\n >\n <option value=\"\">-- 列を選択 --</option>\n {props.cols\n .filter((col) => !!col.label && !!col.type)\n .map((col) => (\n <option key={col.key} value={col.key}>\n {col.label}\n </option>\n ))}\n </select>\n <select\n value={selectingOperator}\n onChange={(e) => {\n e.preventDefault();\n setSelectingOperator(e.target.value);\n }}\n disabled={!selectingKey}\n >\n <option value=\"\">\n {selectingKey ? \"-- 条件を選択 --\" : \"-- 列を選択してください --\"}\n </option>\n {filterType === \"string\" &&\n STRING_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n {filterType === \"number\" &&\n NUMBER_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n </select>\n <input\n type=\"text\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n placeholder=\"-- 値を入力 --\"\n />\n </div>\n <div className=\"flex justify-end\">\n <button\n className=\"bg-gray-900 text-white py-1 px-2 rounded-md\"\n onClick={(e) => {\n e.preventDefault();\n if (!selectingKey || !selectingOperator || !value) {\n alert(\"全ての項目を入力してください\");\n return;\n }\n addFilter({\n
|
|
1
|
+
{"version":3,"file":"filter-form.js","sources":["../../../../src/table/filter-form.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n FILTER_OPERATOR,\n NUMBER_FILTER_OPERATOR,\n STRING_FILTER_OPERATOR,\n TNumberFilterOperator,\n TStringFilterOperator,\n TableFilterRemoveButton,\n useTableFilterContext,\n} from \"./filter\";\nimport { TColumnType, TTableColumn } from \"./type\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsFilterForm = {\n cols: TTableColumn[];\n};\n\nexport function TableFilterForm(props: TPropsFilterForm) {\n const { addFilter, removeFilter, filterConditions } = useTableFilterContext();\n const [selectingKey, setSelectingKey] = useState<string>(\"\");\n const [selectingOperator, setSelectingOperator] = useState<string>(\"\");\n const [value, setValue] = useState<string>(\"\");\n const [filterType, setFilterType] = useState<TColumnType>(\"string\");\n\n return (\n <>\n <div className=\"flex flex-col gap-2 mb-5\">\n <p className=\"font-bold text-lg\">フィルタ追加</p>\n <div className=\"flex flex-wrap gap-1\">\n <select\n value={selectingKey}\n onChange={(e) => {\n e.preventDefault();\n setSelectingKey(e.target.value);\n const columnType = props.cols.find(\n (col) => col.key === e.target.value\n )?.type as TColumnType;\n setFilterType(columnType);\n }}\n >\n <option value=\"\">-- 列を選択 --</option>\n {props.cols\n .filter((col) => !!col.label && !!col.type)\n .map((col) => (\n <option key={col.key} value={col.key}>\n {col.label}\n </option>\n ))}\n </select>\n <select\n value={selectingOperator}\n onChange={(e) => {\n e.preventDefault();\n setSelectingOperator(e.target.value);\n }}\n disabled={!selectingKey}\n >\n <option value=\"\">\n {selectingKey ? \"-- 条件を選択 --\" : \"-- 列を選択してください --\"}\n </option>\n {filterType === \"string\" &&\n STRING_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n {filterType === \"number\" &&\n NUMBER_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n </select>\n <input\n type=\"text\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n placeholder=\"-- 値を入力 --\"\n />\n </div>\n <div className=\"flex justify-end\">\n <button\n className=\"bg-gray-900 text-white py-1 px-2 rounded-md\"\n onClick={(e) => {\n e.preventDefault();\n if (!selectingKey || !selectingOperator || !value) {\n alert(\"全ての項目を入力してください\");\n return;\n }\n addFilter(\n filterType === \"string\"\n ? {\n key: selectingKey,\n operator: selectingOperator as TStringFilterOperator,\n value: [value],\n }\n : {\n key: selectingKey,\n operator: selectingOperator as TNumberFilterOperator,\n value: Number(value),\n }\n );\n }}\n >\n 追加\n </button>\n </div>\n </div>\n <div>\n {filterConditions.length > 0 && (\n <p className=\"font-bold text-lg\">フィルタ一覧</p>\n )}\n <ul className=\"flex flex-col gap-1 my-2\">\n {filterConditions.map((f) => (\n <li key={f.id} className=\"flex justify-between\">\n <p>\n 「\n <strong>\n {props.cols.find((col) => col.key === f.key)?.label}\n </strong>\n 」 は\n <span>\n {FILTER_OPERATOR.find((op) => op.key === f.operator)?.label}\n </span>\n ：<span>{f.value}</span>\n </p>\n <button\n onClick={(e) => {\n e.preventDefault();\n removeFilter(f.id);\n }}\n >\n <CancelIcon size={16} />\n </button>\n </li>\n ))}\n </ul>\n <div className=\"flex justify-center\">\n <TableFilterRemoveButton>\n <p className=\"text-gray-600 underline hover:text-gray-800\">\n remove all filters\n </p>\n </TableFilterRemoveButton>\n </div>\n </div>\n </>\n );\n}\n"],"names":["props","_a","useTableFilterContext","addFilter","removeFilter","filterConditions","_b","useState","selectingKey","setSelectingKey","_c","selectingOperator","setSelectingOperator","_d","value","setValue","_e","filterType","setFilterType","_jsxs","_Fragment","children","className","_jsx","jsxs","onChange","e","preventDefault","target","columnType","cols","find","col","key","type","filter","label","map","jsx","disabled","STRING_FILTER_OPERATOR","op","NUMBER_FILTER_OPERATOR","placeholder","onClick","operator","Number","alert","length","f","FILTER_OPERATOR","id","CancelIcon","size","TableFilterRemoveButton"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter.js","sources":["../../../../src/table/filter.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useReducer } from \"react\";\nimport { DataObject } from \"./type\";\nimport { FIlterIcon } from \"./filter-icon\";\n\nexport const STRING_FILTER_OPERATOR = [\n { key: \"includeText\", label: \"次の値を含む\" },\n] as const;\n\nexport const NUMBER_FILTER_OPERATOR = [\n { key: \"eq\", label: \"次の値と等しい\" },\n { key: \"ne\", label: \"次の値と等しくない\" },\n { key: \"gt\", label: \"次の値より大きい\" },\n { key: \"lt\", label: \"次の値より小さい\" },\n { key: \"gte\", label: \"次の値以上\" },\n { key: \"lte\", label: \"次の値以下\" },\n] as const;\n\nexport const FILTER_OPERATOR = [\n ...STRING_FILTER_OPERATOR,\n ...NUMBER_FILTER_OPERATOR,\n] as const;\n\nexport type TStringFilterOperator =\n (typeof STRING_FILTER_OPERATOR)[number][\"key\"];\nexport type TNumberFilterOperator =\n (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\nexport type TFilterOperator = TStringFilterOperator | TNumberFilterOperator;\n\ntype TStringFilter = {\n key: string;\n operator: TStringFilterOperator;\n value: string[];\n};\n\ntype TNumberFilter = {\n key: string;\n operator:
|
|
1
|
+
{"version":3,"file":"filter.js","sources":["../../../../src/table/filter.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useReducer } from \"react\";\nimport { DataObject } from \"./type\";\nimport { FIlterIcon } from \"./filter-icon\";\n\nexport const STRING_FILTER_OPERATOR = [\n { key: \"includeText\", label: \"次の値を含む\" },\n] as const;\n\nexport const NUMBER_FILTER_OPERATOR = [\n { key: \"eq\", label: \"次の値と等しい\" },\n { key: \"ne\", label: \"次の値と等しくない\" },\n { key: \"gt\", label: \"次の値より大きい\" },\n { key: \"lt\", label: \"次の値より小さい\" },\n { key: \"gte\", label: \"次の値以上\" },\n { key: \"lte\", label: \"次の値以下\" },\n] as const;\n\nexport const FILTER_OPERATOR = [\n ...STRING_FILTER_OPERATOR,\n ...NUMBER_FILTER_OPERATOR,\n] as const;\n\nexport type TStringFilterOperator =\n (typeof STRING_FILTER_OPERATOR)[number][\"key\"];\nexport type TNumberFilterOperator =\n (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\nexport type TFilterOperator = TStringFilterOperator | TNumberFilterOperator;\n\ntype TStringFilter = {\n key: string;\n operator: TStringFilterOperator;\n value: string[];\n};\n\ntype TNumberFilter = {\n key: string;\n operator: TNumberFilterOperator;\n value: number;\n};\n\ntype TFilter = TStringFilter | TNumberFilter;\n\ntype TFilterState = {\n filters: ({ id: number } & TFilter)[];\n};\n\ntype TFilterAction =\n | { type: \"add\"; payload: { filter: TFilter } }\n | { type: \"remove\"; payload: { id: number } }\n | { type: \"clear\" };\n\nexport function filterReducer(\n state: TFilterState,\n action: TFilterAction\n): TFilterState {\n switch (action.type) {\n case \"add\":\n return {\n filters: [\n ...state.filters,\n { id: new Date().getTime(), ...action.payload.filter },\n ],\n };\n case \"remove\":\n return {\n filters: state.filters.filter((f) => f.id !== action.payload.id),\n };\n case \"clear\":\n return { filters: [] };\n }\n}\n\nfunction useFilterReducer() {\n const [state, dispatch] = useReducer(filterReducer, { filters: [] });\n\n const addFilter = useCallback(\n (filter: TFilter) => dispatch({ type: \"add\", payload: { filter } }),\n [dispatch]\n );\n const removeFilter = useCallback(\n (id: number) => dispatch({ type: \"remove\", payload: { id } }),\n [dispatch]\n );\n const clearFilter = useCallback(\n () => dispatch({ type: \"clear\" }),\n [dispatch]\n );\n\n const filter = useCallback(\n (rows: DataObject[]): DataObject[] => {\n return state.filters.reduce((acc, filter) => {\n switch (filter.operator) {\n case \"includeText\":\n return acc.filter((row) => {\n const value = row[filter.key];\n if (typeof value === \"string\") {\n return filter.value.some((v) => value.includes(v));\n }\n return false;\n });\n case \"eq\":\n return acc.filter((row) => row[filter.key] === filter.value);\n case \"ne\":\n return acc.filter((row) => row[filter.key] !== filter.value);\n case \"gt\":\n return acc.filter((row) => row[filter.key] > filter.value);\n case \"lt\":\n return acc.filter((row) => row[filter.key] < filter.value);\n case \"gte\":\n return acc.filter((row) => row[filter.key] >= filter.value);\n case \"lte\":\n return acc.filter((row) => row[filter.key] <= filter.value);\n }\n }, rows);\n },\n [state]\n );\n\n return {\n addFilter,\n removeFilter,\n clearFilter,\n filter,\n filterConditions: state.filters,\n };\n}\n\nconst TableFilterContext = createContext<ReturnType<typeof useFilterReducer>>({\n addFilter: () => {},\n removeFilter: () => {},\n clearFilter: () => {},\n filter: () => [],\n filterConditions: [],\n});\n\nexport function TableFilterProvider({\n children,\n}: {\n children: JSX.Element | JSX.Element[];\n}) {\n return (\n <TableFilterContext.Provider value={useFilterReducer()}>\n {children}\n </TableFilterContext.Provider>\n );\n}\n\nexport function useTableFilterContext() {\n return useContext(TableFilterContext);\n}\n\ntype TPropsTableFilter = {\n keyName: string;\n onClick: React.MouseEventHandler<HTMLDivElement>;\n};\n\nexport function TableFilter(props: TPropsTableFilter) {\n const { filterConditions } = useTableFilterContext();\n\n return (\n <div className=\"relative cursor-pointer\" onClick={props.onClick}>\n <FIlterIcon\n isFilterActive={\n filterConditions.filter((f) => f.key === props.keyName).length > 0\n }\n />\n </div>\n );\n}\n\nexport function TableFilterRemoveButton({\n children,\n}: {\n children: React.ReactNode;\n}) {\n const { clearFilter, filterConditions } = useTableFilterContext();\n\n if (filterConditions.length === 0) {\n return;\n }\n\n return (\n <button\n onClick={(e) => {\n e.preventDefault();\n clearFilter();\n }}\n >\n {children}\n </button>\n );\n}\n"],"names":["STRING_FILTER_OPERATOR","key","label","NUMBER_FILTER_OPERATOR","FILTER_OPERATOR","__spreadArray","filterReducer","state","action","type","filters","__assign","id","Date","getTime","payload","filter","f","useFilterReducer","_a","useReducer","dispatch","addFilter","useCallback","removeFilter","clearFilter","rows","reduce","acc","operator","row","value","some","v","includes","filterConditions","TableFilterContext","createContext","useTableFilterContext","useContext","props","_jsx","jsx","className","onClick","children","FIlterIcon","isFilterActive","keyName","length","Provider","_b","e","preventDefault"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as t
|
|
2
|
+
import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{useTable as l}from"./hook.js";import{TableCell as o}from"./cell.js";import{Sort as n}from"./sort.js";import{TableHeaderElement as i}from"./header.js";import{Pagenation as c}from"./page.js";import{TableFilterProvider as a,TableFilterRemoveButton as d,TableFilter as s}from"./filter.js";import{useState as m}from"react";import{TableFilterForm as u}from"./filter-form.js";function f(t){return r(a,{children:r(h,e({},t))})}function h(a){var f=l(a),h=f.cols,p=f.rows,v=f.rowCount,y=f.sortKey,b=f.sortOrder,N=f.page,g=N.count,k=N.current,x=N.from,j=N.to,C=N.next,w=N.prev,D=N.jump,O=m(!1),S=O[0],T=O[1];return t("div",{className:"w-full",children:[r("div",{className:"flex justify-end",children:r(d,{children:"remove all filters"})}),r("div",{className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:t("table",{className:"table table-auto w-full",children:[r("thead",{children:r("tr",{className:"sticky top-0 border-gray-200 z-20",children:h.map((function(e){return r(i,{label:e.label,columnType:e.type,sortConponent:r(n,{onClick:e.onClick,isSortedByThis:y===e.key,sortOrder:b}),filterComponent:r(s,{keyName:e.key,onClick:function(e){e.preventDefault(),T((function(e){return!e}))}})},e.key)}))})}),t("tbody",{children:[S&&r("tr",{children:r("td",{colSpan:h.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl py-5 px-2 z-20",children:r("div",{className:"container max-w-[768px] mx-auto",children:t("div",{className:"relative",children:[r("div",{className:"absolute top-0 right-0",children:r("button",{onClick:function(e){e.preventDefault(),T(!1)},children:"close"})}),r("div",{children:r(u,{cols:h})})]})})})}),0===p.length&&r("tr",{children:r("td",{colSpan:h.length,className:"py-5",children:r("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),p.map((function(t){var l;return r("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(l=p[0])||void 0===l?void 0:l.onClick)?"hover:cursor-pointer":""),onClick:t.onClick,"data-testid":t.id,children:h.map((function(l){return r(o,e({},l,{columnKey:l.key,currentRecord:t,children:t[l.key]}))}))},t.id)}))]})]})}),t("div",{className:"mt-1",children:[t("p",{className:"text-center text-sm text-gray-600",children:[x+1," - ",j<v?j:v," of ",v]}),r("div",{className:"mt-2",children:r(c,{count:g,current:k,jump:D,next:C,prev:w})})]})]})}export{f as default};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as l,jsx as n}from"react/jsx-runtime";import{useState as t}from"react";import{useTableFilterContext as r,STRING_FILTER_OPERATOR as i,NUMBER_FILTER_OPERATOR as a,FILTER_OPERATOR as o,TableFilterRemoveButton as c}from"./filter.js";import{CancelIcon as u}from"./cancel-icon.js";function d(d){var f=r(),
|
|
1
|
+
import{jsxs as e,Fragment as l,jsx as n}from"react/jsx-runtime";import{useState as t}from"react";import{useTableFilterContext as r,STRING_FILTER_OPERATOR as i,NUMBER_FILTER_OPERATOR as a,FILTER_OPERATOR as o,TableFilterRemoveButton as c}from"./filter.js";import{CancelIcon as u}from"./cancel-icon.js";function d(d){var f=r(),s=f.addFilter,p=f.removeFilter,v=f.filterConditions,h=t(""),m=h[0],y=h[1],g=t(""),x=g[0],b=g[1],k=t(""),N=k[0],j=k[1],C=t("string"),D=C[0],w=C[1];return e(l,{children:[e("div",{className:"flex flex-col gap-2 mb-5",children:[n("p",{className:"font-bold text-lg",children:"フィルタ追加"}),e("div",{className:"flex flex-wrap gap-1",children:[e("select",{value:m,onChange:function(e){var l;e.preventDefault(),y(e.target.value);var n=null===(l=d.cols.find((function(l){return l.key===e.target.value})))||void 0===l?void 0:l.type;w(n)},children:[n("option",{value:"",children:"-- 列を選択 --"}),d.cols.filter((function(e){return!!e.label&&!!e.type})).map((function(e){return n("option",{value:e.key,children:e.label},e.key)}))]}),e("select",{value:x,onChange:function(e){e.preventDefault(),b(e.target.value)},disabled:!m,children:[n("option",{value:"",children:m?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===D&&i.map((function(e){return n("option",{value:e.key,children:e.label},e.key)})),"number"===D&&a.map((function(e){return n("option",{value:e.key,children:e.label},e.key)}))]}),n("input",{type:"text",value:N,onChange:function(e){e.preventDefault(),j(e.target.value)},placeholder:"-- 値を入力 --"})]}),n("div",{className:"flex justify-end",children:n("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md",onClick:function(e){e.preventDefault(),m&&x&&N?s("string"===D?{key:m,operator:x,value:[N]}:{key:m,operator:x,value:Number(N)}):alert("全ての項目を入力してください")},children:"追加"})})]}),e("div",{children:[v.length>0&&n("p",{className:"font-bold text-lg",children:"フィルタ一覧"}),n("ul",{className:"flex flex-col gap-1 my-2",children:v.map((function(l){var t,r;return e("li",{className:"flex justify-between",children:[e("p",{children:["「",n("strong",{children:null===(t=d.cols.find((function(e){return e.key===l.key})))||void 0===t?void 0:t.label}),"」 は",n("span",{children:null===(r=o.find((function(e){return e.key===l.operator})))||void 0===r?void 0:r.label}),"：",n("span",{children:l.value})]}),n("button",{onClick:function(e){e.preventDefault(),p(l.id)},children:n(u,{size:16})})]},l.id)}))}),n("div",{className:"flex justify-center",children:n(c,{children:n("p",{className:"text-gray-600 underline hover:text-gray-800",children:"remove all filters"})})})]})]})}export{d as TableFilterForm};
|
|
2
2
|
//# sourceMappingURL=filter-form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-form.js","sources":["../../../../src/table/filter-form.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n FILTER_OPERATOR,\n NUMBER_FILTER_OPERATOR,\n STRING_FILTER_OPERATOR,\n TStringFilterOperator,\n TableFilterRemoveButton,\n useTableFilterContext,\n} from \"./filter\";\nimport { TColumnType, TTableColumn } from \"./type\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsFilterForm = {\n cols: TTableColumn[];\n};\n\nexport function TableFilterForm(props: TPropsFilterForm) {\n const { addFilter, removeFilter, filterConditions } = useTableFilterContext();\n const [selectingKey, setSelectingKey] = useState<string>(\"\");\n const [selectingOperator, setSelectingOperator] = useState<string>(\"\");\n const [value, setValue] = useState<string>(\"\");\n const [filterType, setFilterType] = useState<TColumnType>(\"string\");\n\n return (\n <>\n <div className=\"flex flex-col gap-2\">\n <p className=\"font-bold text-lg\">フィルタ追加</p>\n <div className=\"flex flex-wrap gap-1\">\n <select\n value={selectingKey}\n onChange={(e) => {\n e.preventDefault();\n setSelectingKey(e.target.value);\n const columnType = props.cols.find(\n (col) => col.key === e.target.value\n )?.type as TColumnType;\n setFilterType(columnType);\n }}\n >\n <option value=\"\">-- 列を選択 --</option>\n {props.cols\n .filter((col) => !!col.label && !!col.type)\n .map((col) => (\n <option key={col.key} value={col.key}>\n {col.label}\n </option>\n ))}\n </select>\n <select\n value={selectingOperator}\n onChange={(e) => {\n e.preventDefault();\n setSelectingOperator(e.target.value);\n }}\n disabled={!selectingKey}\n >\n <option value=\"\">\n {selectingKey ? \"-- 条件を選択 --\" : \"-- 列を選択してください --\"}\n </option>\n {filterType === \"string\" &&\n STRING_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n {filterType === \"number\" &&\n NUMBER_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n </select>\n <input\n type=\"text\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n placeholder=\"-- 値を入力 --\"\n />\n </div>\n <div className=\"flex justify-end\">\n <button\n className=\"bg-gray-900 text-white py-1 px-2 rounded-md\"\n onClick={(e) => {\n e.preventDefault();\n if (!selectingKey || !selectingOperator || !value) {\n alert(\"全ての項目を入力してください\");\n return;\n }\n addFilter({\n
|
|
1
|
+
{"version":3,"file":"filter-form.js","sources":["../../../../src/table/filter-form.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n FILTER_OPERATOR,\n NUMBER_FILTER_OPERATOR,\n STRING_FILTER_OPERATOR,\n TNumberFilterOperator,\n TStringFilterOperator,\n TableFilterRemoveButton,\n useTableFilterContext,\n} from \"./filter\";\nimport { TColumnType, TTableColumn } from \"./type\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsFilterForm = {\n cols: TTableColumn[];\n};\n\nexport function TableFilterForm(props: TPropsFilterForm) {\n const { addFilter, removeFilter, filterConditions } = useTableFilterContext();\n const [selectingKey, setSelectingKey] = useState<string>(\"\");\n const [selectingOperator, setSelectingOperator] = useState<string>(\"\");\n const [value, setValue] = useState<string>(\"\");\n const [filterType, setFilterType] = useState<TColumnType>(\"string\");\n\n return (\n <>\n <div className=\"flex flex-col gap-2 mb-5\">\n <p className=\"font-bold text-lg\">フィルタ追加</p>\n <div className=\"flex flex-wrap gap-1\">\n <select\n value={selectingKey}\n onChange={(e) => {\n e.preventDefault();\n setSelectingKey(e.target.value);\n const columnType = props.cols.find(\n (col) => col.key === e.target.value\n )?.type as TColumnType;\n setFilterType(columnType);\n }}\n >\n <option value=\"\">-- 列を選択 --</option>\n {props.cols\n .filter((col) => !!col.label && !!col.type)\n .map((col) => (\n <option key={col.key} value={col.key}>\n {col.label}\n </option>\n ))}\n </select>\n <select\n value={selectingOperator}\n onChange={(e) => {\n e.preventDefault();\n setSelectingOperator(e.target.value);\n }}\n disabled={!selectingKey}\n >\n <option value=\"\">\n {selectingKey ? \"-- 条件を選択 --\" : \"-- 列を選択してください --\"}\n </option>\n {filterType === \"string\" &&\n STRING_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n {filterType === \"number\" &&\n NUMBER_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n </select>\n <input\n type=\"text\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n placeholder=\"-- 値を入力 --\"\n />\n </div>\n <div className=\"flex justify-end\">\n <button\n className=\"bg-gray-900 text-white py-1 px-2 rounded-md\"\n onClick={(e) => {\n e.preventDefault();\n if (!selectingKey || !selectingOperator || !value) {\n alert(\"全ての項目を入力してください\");\n return;\n }\n addFilter(\n filterType === \"string\"\n ? {\n key: selectingKey,\n operator: selectingOperator as TStringFilterOperator,\n value: [value],\n }\n : {\n key: selectingKey,\n operator: selectingOperator as TNumberFilterOperator,\n value: Number(value),\n }\n );\n }}\n >\n 追加\n </button>\n </div>\n </div>\n <div>\n {filterConditions.length > 0 && (\n <p className=\"font-bold text-lg\">フィルタ一覧</p>\n )}\n <ul className=\"flex flex-col gap-1 my-2\">\n {filterConditions.map((f) => (\n <li key={f.id} className=\"flex justify-between\">\n <p>\n 「\n <strong>\n {props.cols.find((col) => col.key === f.key)?.label}\n </strong>\n 」 は\n <span>\n {FILTER_OPERATOR.find((op) => op.key === f.operator)?.label}\n </span>\n ：<span>{f.value}</span>\n </p>\n <button\n onClick={(e) => {\n e.preventDefault();\n removeFilter(f.id);\n }}\n >\n <CancelIcon size={16} />\n </button>\n </li>\n ))}\n </ul>\n <div className=\"flex justify-center\">\n <TableFilterRemoveButton>\n <p className=\"text-gray-600 underline hover:text-gray-800\">\n remove all filters\n </p>\n </TableFilterRemoveButton>\n </div>\n </div>\n </>\n );\n}\n"],"names":["TableFilterForm","props","_a","useTableFilterContext","addFilter","removeFilter","filterConditions","_b","useState","selectingKey","setSelectingKey","_c","selectingOperator","setSelectingOperator","_d","value","setValue","_e","filterType","setFilterType","_jsxs","_Fragment","children","className","_jsx","onChange","e","preventDefault","target","columnType","cols","find","col","key","type","filter","label","map","disabled","STRING_FILTER_OPERATOR","op","NUMBER_FILTER_OPERATOR","placeholder","onClick","operator","Number","alert","length","f","FILTER_OPERATOR","id","CancelIcon","size","TableFilterRemoveButton"],"mappings":"6SAiBM,SAAUA,EAAgBC,GACxB,IAAAC,EAAgDC,IAA9CC,EAASF,EAAAE,UAAEC,EAAYH,EAAAG,aAAEC,EAAgBJ,EAAAI,iBAC3CC,EAAkCC,EAAiB,IAAlDC,EAAYF,EAAA,GAAEG,EAAeH,EAAA,GAC9BI,EAA4CH,EAAiB,IAA5DI,EAAiBD,EAAA,GAAEE,EAAoBF,EAAA,GACxCG,EAAoBN,EAAiB,IAApCO,EAAKD,EAAA,GAAEE,EAAQF,EAAA,GAChBG,EAA8BT,EAAsB,UAAnDU,EAAUD,EAAA,GAAEE,EAAaF,EAAA,GAEhC,OACEG,EACEC,EAAA,CAAAC,SAAA,CAAAF,EAAA,MAAA,CAAKG,UAAU,2BAA0BD,SAAA,CACvCE,EAAG,IAAA,CAAAD,UAAU,oBAA8BD,SAAA,WAC3CF,SAAKG,UAAU,uBAAsBD,SAAA,CACnCF,EACE,SAAA,CAAAL,MAAON,EACPgB,SAAU,SAACC,SACTA,EAAEC,iBACFjB,EAAgBgB,EAAEE,OAAOb,OACzB,IAAMc,EAEH,QAFgB3B,EAAAD,EAAM6B,KAAKC,MAC5B,SAACC,GAAQ,OAAAA,EAAIC,MAAQP,EAAEE,OAAOb,gBAC7B,IAAAb,OAAA,EAAAA,EAAAgC,KACHf,EAAcU,EACf,EAAAP,SAAA,CAEDE,YAAQT,MAAM,GAAsBO,SAAA,eACnCrB,EAAM6B,KACJK,QAAO,SAACH,GAAQ,QAAEA,EAAII,SAAWJ,EAAIE,QACrCG,KAAI,SAACL,GAAQ,OACZR,EAAA,SAAA,CAAsBT,MAAOiB,EAAIC,IAC9BX,SAAAU,EAAII,OADMJ,EAAIC,WAKvBb,EACE,SAAA,CAAAL,MAAOH,EACPa,SAAU,SAACC,GACTA,EAAEC,iBACFd,EAAqBa,EAAEE,OAAOb,QAEhCuB,UAAW7B,YAEXe,EAAQ,SAAA,CAAAT,MAAM,GACXO,SAAAb,EAAe,cAAgB,qBAElB,WAAfS,GACCqB,EAAuBF,KAAI,SAACG,GAAO,OACjChB,EAAqB,SAAA,CAAAT,MAAOyB,EAAGP,IAAGX,SAC/BkB,EAAGJ,OADOI,EAAGP,IAGjB,IACa,WAAff,GACCuB,EAAuBJ,KAAI,SAACG,GAAO,OACjChB,EAAA,SAAA,CAAqBT,MAAOyB,EAAGP,aAC5BO,EAAGJ,OADOI,EAAGP,IAGjB,OAELT,EACE,QAAA,CAAAU,KAAK,OACLnB,MAAOA,EACPU,SAAU,SAACC,GACTA,EAAEC,iBACFX,EAASU,EAAEE,OAAOb,QAEpB2B,YAAY,kBAGhBlB,SAAKD,UAAU,mBACbD,SAAAE,EAAA,SAAA,CACED,UAAU,8CACVoB,QAAS,SAACjB,GACRA,EAAEC,iBACGlB,GAAiBG,GAAsBG,EAI5CX,EACiB,WAAfc,EACI,CACEe,IAAKxB,EACLmC,SAAUhC,EACVG,MAAO,CAACA,IAEV,CACEkB,IAAKxB,EACLmC,SAAUhC,EACVG,MAAO8B,OAAO9B,KAbpB+B,MAAM,iBAgBT,EAGMxB,SAAA,YAGbF,EACG,MAAA,CAAAE,SAAA,CAAAhB,EAAiByC,OAAS,GACzBvB,EAAG,IAAA,CAAAD,UAAU,oBAA8BD,SAAA,WAE7CE,EAAA,KAAA,CAAID,UAAU,2BAA0BD,SACrChB,EAAiB+B,KAAI,SAACW,WAAM,OAC3B5B,EAAA,KAAA,CAAeG,UAAU,uBACvBD,SAAA,CAAAF,EAAA,IAAA,CAAAE,SAAA,CAAA,IAEEE,EACG,SAAA,CAAAF,SAA6C,QAA7CpB,EAAAD,EAAM6B,KAAKC,MAAK,SAACC,GAAQ,OAAAA,EAAIC,MAAQe,EAAEf,GAAG,WAAG,IAAA/B,OAAA,EAAAA,EAAAkC,QAGhD,MAAAZ,EAAA,OAAA,CAAAF,SACsD,QAAnDf,EAAA0C,EAAgBlB,MAAK,SAACS,GAAO,OAAAA,EAAGP,MAAQe,EAAEJ,QAAQ,WAAC,IAAArC,OAAA,EAAAA,EAAE6B,QAEvD,IAAAZ,EAAA,OAAA,CAAAF,SAAO0B,EAAEjC,WAEZS,EAAA,SAAA,CACEmB,QAAS,SAACjB,GACRA,EAAEC,iBACFtB,EAAa2C,EAAEE,GAChB,EAED5B,SAAAE,EAAC2B,EAAU,CAACC,KAAM,SAlBbJ,EAAEE,GAqBZ,MAEH1B,EAAK,MAAA,CAAAD,UAAU,sBAAqBD,SAClCE,EAAC6B,EAAuB,CAAA/B,SACtBE,OAAGD,UAAU,8CAETD,SAAA,gCAMhB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter.js","sources":["../../../../src/table/filter.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useReducer } from \"react\";\nimport { DataObject } from \"./type\";\nimport { FIlterIcon } from \"./filter-icon\";\n\nexport const STRING_FILTER_OPERATOR = [\n { key: \"includeText\", label: \"次の値を含む\" },\n] as const;\n\nexport const NUMBER_FILTER_OPERATOR = [\n { key: \"eq\", label: \"次の値と等しい\" },\n { key: \"ne\", label: \"次の値と等しくない\" },\n { key: \"gt\", label: \"次の値より大きい\" },\n { key: \"lt\", label: \"次の値より小さい\" },\n { key: \"gte\", label: \"次の値以上\" },\n { key: \"lte\", label: \"次の値以下\" },\n] as const;\n\nexport const FILTER_OPERATOR = [\n ...STRING_FILTER_OPERATOR,\n ...NUMBER_FILTER_OPERATOR,\n] as const;\n\nexport type TStringFilterOperator =\n (typeof STRING_FILTER_OPERATOR)[number][\"key\"];\nexport type TNumberFilterOperator =\n (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\nexport type TFilterOperator = TStringFilterOperator | TNumberFilterOperator;\n\ntype TStringFilter = {\n key: string;\n operator: TStringFilterOperator;\n value: string[];\n};\n\ntype TNumberFilter = {\n key: string;\n operator:
|
|
1
|
+
{"version":3,"file":"filter.js","sources":["../../../../src/table/filter.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useReducer } from \"react\";\nimport { DataObject } from \"./type\";\nimport { FIlterIcon } from \"./filter-icon\";\n\nexport const STRING_FILTER_OPERATOR = [\n { key: \"includeText\", label: \"次の値を含む\" },\n] as const;\n\nexport const NUMBER_FILTER_OPERATOR = [\n { key: \"eq\", label: \"次の値と等しい\" },\n { key: \"ne\", label: \"次の値と等しくない\" },\n { key: \"gt\", label: \"次の値より大きい\" },\n { key: \"lt\", label: \"次の値より小さい\" },\n { key: \"gte\", label: \"次の値以上\" },\n { key: \"lte\", label: \"次の値以下\" },\n] as const;\n\nexport const FILTER_OPERATOR = [\n ...STRING_FILTER_OPERATOR,\n ...NUMBER_FILTER_OPERATOR,\n] as const;\n\nexport type TStringFilterOperator =\n (typeof STRING_FILTER_OPERATOR)[number][\"key\"];\nexport type TNumberFilterOperator =\n (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\nexport type TFilterOperator = TStringFilterOperator | TNumberFilterOperator;\n\ntype TStringFilter = {\n key: string;\n operator: TStringFilterOperator;\n value: string[];\n};\n\ntype TNumberFilter = {\n key: string;\n operator: TNumberFilterOperator;\n value: number;\n};\n\ntype TFilter = TStringFilter | TNumberFilter;\n\ntype TFilterState = {\n filters: ({ id: number } & TFilter)[];\n};\n\ntype TFilterAction =\n | { type: \"add\"; payload: { filter: TFilter } }\n | { type: \"remove\"; payload: { id: number } }\n | { type: \"clear\" };\n\nexport function filterReducer(\n state: TFilterState,\n action: TFilterAction\n): TFilterState {\n switch (action.type) {\n case \"add\":\n return {\n filters: [\n ...state.filters,\n { id: new Date().getTime(), ...action.payload.filter },\n ],\n };\n case \"remove\":\n return {\n filters: state.filters.filter((f) => f.id !== action.payload.id),\n };\n case \"clear\":\n return { filters: [] };\n }\n}\n\nfunction useFilterReducer() {\n const [state, dispatch] = useReducer(filterReducer, { filters: [] });\n\n const addFilter = useCallback(\n (filter: TFilter) => dispatch({ type: \"add\", payload: { filter } }),\n [dispatch]\n );\n const removeFilter = useCallback(\n (id: number) => dispatch({ type: \"remove\", payload: { id } }),\n [dispatch]\n );\n const clearFilter = useCallback(\n () => dispatch({ type: \"clear\" }),\n [dispatch]\n );\n\n const filter = useCallback(\n (rows: DataObject[]): DataObject[] => {\n return state.filters.reduce((acc, filter) => {\n switch (filter.operator) {\n case \"includeText\":\n return acc.filter((row) => {\n const value = row[filter.key];\n if (typeof value === \"string\") {\n return filter.value.some((v) => value.includes(v));\n }\n return false;\n });\n case \"eq\":\n return acc.filter((row) => row[filter.key] === filter.value);\n case \"ne\":\n return acc.filter((row) => row[filter.key] !== filter.value);\n case \"gt\":\n return acc.filter((row) => row[filter.key] > filter.value);\n case \"lt\":\n return acc.filter((row) => row[filter.key] < filter.value);\n case \"gte\":\n return acc.filter((row) => row[filter.key] >= filter.value);\n case \"lte\":\n return acc.filter((row) => row[filter.key] <= filter.value);\n }\n }, rows);\n },\n [state]\n );\n\n return {\n addFilter,\n removeFilter,\n clearFilter,\n filter,\n filterConditions: state.filters,\n };\n}\n\nconst TableFilterContext = createContext<ReturnType<typeof useFilterReducer>>({\n addFilter: () => {},\n removeFilter: () => {},\n clearFilter: () => {},\n filter: () => [],\n filterConditions: [],\n});\n\nexport function TableFilterProvider({\n children,\n}: {\n children: JSX.Element | JSX.Element[];\n}) {\n return (\n <TableFilterContext.Provider value={useFilterReducer()}>\n {children}\n </TableFilterContext.Provider>\n );\n}\n\nexport function useTableFilterContext() {\n return useContext(TableFilterContext);\n}\n\ntype TPropsTableFilter = {\n keyName: string;\n onClick: React.MouseEventHandler<HTMLDivElement>;\n};\n\nexport function TableFilter(props: TPropsTableFilter) {\n const { filterConditions } = useTableFilterContext();\n\n return (\n <div className=\"relative cursor-pointer\" onClick={props.onClick}>\n <FIlterIcon\n isFilterActive={\n filterConditions.filter((f) => f.key === props.keyName).length > 0\n }\n />\n </div>\n );\n}\n\nexport function TableFilterRemoveButton({\n children,\n}: {\n children: React.ReactNode;\n}) {\n const { clearFilter, filterConditions } = useTableFilterContext();\n\n if (filterConditions.length === 0) {\n return;\n }\n\n return (\n <button\n onClick={(e) => {\n e.preventDefault();\n clearFilter();\n }}\n >\n {children}\n </button>\n );\n}\n"],"names":["STRING_FILTER_OPERATOR","key","label","NUMBER_FILTER_OPERATOR","FILTER_OPERATOR","__spreadArray","filterReducer","state","action","type","filters","__assign","id","Date","getTime","payload","filter","f","useFilterReducer","_a","useReducer","dispatch","addFilter","useCallback","removeFilter","clearFilter","rows","reduce","acc","operator","row","value","some","v","includes","filterConditions","TableFilterContext","createContext","TableFilterProvider","children","_jsx","Provider","useTableFilterContext","useContext","TableFilter","props","className","onClick","FIlterIcon","isFilterActive","keyName","length","TableFilterRemoveButton","_b","e","preventDefault"],"mappings":"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"}
|