@teppen/react-ui 1.4.5 → 1.5.0
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/README.md +32 -1
- package/dist/cjs/src/table/base.js +1 -1
- package/dist/cjs/src/table/cell/ui/cell.js +1 -1
- package/dist/cjs/src/table/libs/conditional-formatting.js +2 -0
- package/dist/cjs/src/table/libs/conditional-formatting.js.map +1 -0
- package/dist/cjs/src/table/sheet/components.js +1 -1
- package/dist/cjs/src/table/sheet/components.js.map +1 -1
- package/dist/esm/src/table/base.js +1 -1
- package/dist/esm/src/table/cell/ui/cell.js +1 -1
- package/dist/esm/src/table/libs/conditional-formatting.js +2 -0
- package/dist/esm/src/table/libs/conditional-formatting.js.map +1 -0
- package/dist/esm/src/table/sheet/components.js +1 -1
- package/dist/esm/src/table/sheet/components.js.map +1 -1
- package/dist/index.d.ts +6 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -166,6 +166,24 @@ const App = () => {
|
|
|
166
166
|
onChecked: (row) => console.log("checked", row.id),
|
|
167
167
|
onUnchecked: (row) => console.log("unchecked", row.id),
|
|
168
168
|
}}
|
|
169
|
+
conditionalFormattings={[
|
|
170
|
+
{
|
|
171
|
+
condition: (row) => row.age < 31,
|
|
172
|
+
key: "age",
|
|
173
|
+
style: "text-red-500 font-bold text-lg bg-red-100",
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
condition: (row) => row.role === "2",
|
|
177
|
+
key: "role",
|
|
178
|
+
style:
|
|
179
|
+
"text-blue-500 font-bold text-lg shadow-inner shadow-blue-500",
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
condition: (row) => row.age < 35,
|
|
183
|
+
key: "age",
|
|
184
|
+
style: "text-green-500 font-bold text-lg bg-green-100",
|
|
185
|
+
},
|
|
186
|
+
]}
|
|
169
187
|
/>
|
|
170
188
|
</div>
|
|
171
189
|
);
|
|
@@ -184,10 +202,11 @@ A component that displays a table based on the row and column information passed
|
|
|
184
202
|
- Editing function (only when `editable` is true and `onCellBlur` is set in the column information)
|
|
185
203
|
- Checkbox function
|
|
186
204
|
- Paste function
|
|
205
|
+
- Conditional formatting function
|
|
187
206
|
|
|
188
207
|
#### Arguments
|
|
189
208
|
|
|
190
|
-
The table component only accepts the arguments `rows`, `cols`, `initialCondition`, `onClickRow`, `onUpdateRow`, `applyRowFormatting`. Details for each argument are described below.
|
|
209
|
+
The table component only accepts the arguments `rows`, `cols`, `initialCondition`, `onClickRow`, `onUpdateRow`, `applyRowFormatting`, `conditionalFormattings`. Details for each argument are described below.
|
|
191
210
|
|
|
192
211
|
##### rows
|
|
193
212
|
|
|
@@ -299,6 +318,18 @@ type TCheckbox = {
|
|
|
299
318
|
};
|
|
300
319
|
```
|
|
301
320
|
|
|
321
|
+
##### conditionalFormattings
|
|
322
|
+
|
|
323
|
+
In `conditionalFormattings`, you can define the format of the cell based on the status of each row. The format is defined using TailwindCSS classes. In principle, TailwindCSS classes other than background and text color are not guaranteed to work, but any class can be specified.
|
|
324
|
+
|
|
325
|
+
```ts
|
|
326
|
+
type TConditionalFormatting = {
|
|
327
|
+
condition: (row: DataObject) => boolean;
|
|
328
|
+
key: string;
|
|
329
|
+
style: string;
|
|
330
|
+
};
|
|
331
|
+
```
|
|
332
|
+
|
|
302
333
|
## License
|
|
303
334
|
|
|
304
335
|
This library is licensed under MIT license. See LICENSE file for more information.
|
|
@@ -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"),o=require("./hook.js"),i=require("./header/header.js"),
|
|
2
|
+
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),o=require("./hook.js"),i=require("./header/header.js"),t=require("./pagenation/providers.js"),s=require("./pagenation/components.js"),n=require("./filter/provider.js"),l=require("./filter/components.js");require("./sort/icon.js");var a=require("./sort/provider.js"),d=require("./sheet/providers.js"),c=require("./focus/provider.js"),x=require("./checkbox/provider.js"),u=require("./checkbox/components.js"),h=require("./libs/id-generator.js"),j=require("./edit/provider.js"),p=require("./table-property/provider.js"),m=require("./operation/components/keyboard-setting.js"),g=require("./table/components/auto-switch-edit-mode.js"),v=require("./sheet/components.js"),b=require("./paste/provider.js"),w=require("./libs/conditional-formatting.js");function y(e){var t=o.useTable(e),a=t.cols,d=t.rowMaps,c=t.pageRowIds,x=n.useFilterContext().selectedFilterKey;return r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end mb-1 mr-3",children:r.jsx(l.TableFilterRemoveButton,{children:r.jsx("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r.jsx("div",{id:"table-frame",className:"relative h-full max-w-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:r.jsxs("table",{className:"table",children:[r.jsx("thead",{children:r.jsxs("tr",{className:"sticky top-0 border-gray-200 z-20 bg-gray-200 text-gray-600 h-[32px]",children:[e.checkbox&&r.jsx("th",{children:r.jsx(u.AllCheckbox,{rows:e.rows})}),a.map((function(e,o){return r.jsx(i.TableHeaderElement,{id:h.IdGenerator.getTableColId(o),columnKey:e.key},e.key)}))]})}),r.jsxs("tbody",{children:[!!x&&r.jsx("tr",{children:r.jsx("td",{colSpan:a.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl z-20 p-0 overflow-hidden",children:r.jsx(l.TableFilterForm,{})})}),0===c.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:a.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),c.map((function(o,i){return r.jsx(v.Row,{existCheckbox:!!e.checkbox,rowIndex:i,dataString:d[o].stringValue,cols:e.cols,onClickRow:e.onClickRow,applyRowFormatting:e.applyRowFormatting,conditionalFormattingString:w.generateFormattingString(d[o].data,a,e.conditionalFormattings),onUpdateRow:e.onUpdateRow},o)}))]})]})}),r.jsxs("div",{className:"mt-1",children:[r.jsx(s.DisplayRange,{}),r.jsx("div",{className:"mt-2",children:r.jsx(s.Pagenation,{})})]})]})}module.exports=function(o){var i,s,l;return r.jsx(n.FilterProvider,{children:r.jsx(a.SortProvider,{initialCondition:null===(i=o.initialCondition)||void 0===i?void 0:i.sort,children:r.jsx(t.PagenationProvider,{rowCount:o.rows.length,perPage:null===(l=null===(s=o.initialCondition)||void 0===s?void 0:s.pagenation)||void 0===l?void 0:l.rowCountPerPage,children:r.jsx(x.CheckboxProvider,{checkbox:o.checkbox,children:r.jsx(x.CheckboxStatusProvider,{checkboxCount:o.rows.length,children:r.jsx(d.ColumnsProvider,{cols:o.cols,children:r.jsx(c.FocusProvider,{children:r.jsx(j.EditProvider,{children:r.jsx(p.TablePropertyProvider,{children:r.jsxs(b.PasteProvider,{rows:o.rows,cols:o.cols,colValidators:{},onUpdateRowFunction:o.onUpdateRow,children:[r.jsx(g.AutoSwitchEditMode,{}),r.jsx(m.KeyboardSetting,{}),r.jsx(y,e.__assign({},o))]})})})})})})})})})})};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("../../hook.js"),l=require("./edit-button.js"),i=require("./string-input.js"),n=require("./number-input.js"),o=require("./select-input.js"),r=require("react"),s=require("../../libs/id-generator.js"),
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("../../hook.js"),l=require("./edit-button.js"),i=require("./string-input.js"),n=require("./number-input.js"),o=require("./select-input.js"),r=require("react"),s=require("../../libs/id-generator.js"),a=require("../provider.js"),c=require("../../sheet/providers.js"),u=r.memo((function(t){return e.jsx(e.Fragment,{children:"component"===t.type?t.component:e.jsx("div",{onDoubleClick:t.onDoubleClick,children:e.jsx("p",{className:"cell-data text-left whitespace-nowrap",children:t.component})})})})),d=r.memo((function(t){var r=a.useCellContext();return e.jsx("td",{id:t.id,onPaste:function(e){e.preventDefault(),t.isExistOnUpdateRow?t.pasteData(e.clipboardData.getData("text")):alert("ペースト機能が有効化されていません。")},className:"".concat(t.cellFormatClassName),children:e.jsxs("div",{className:"relative",onClick:t.isExistOnClickRow?void 0:function(e){e.preventDefault(),t.focusAtCell()},onDoubleClick:t.isExistOnClickRow?void 0:t.onDoubleClickCellToEdit,children:[e.jsx("div",{id:"".concat(t.id,"-display"),children:e.jsxs("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default",onClick:function(e){e.preventDefault(),e.stopPropagation(),t.focusAtCell()},children:[e.jsx(u,{type:r.type,component:r.component,onDoubleClick:t.onDoubleClickCellToEdit}),t.editable&&e.jsx(l.EditButton,{})]})}),t.editable&&e.jsxs("div",{id:"".concat(t.id,"-editor"),className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:t.preventPropagation,style:{opacity:0,pointerEvents:"none"},children:["string"===r.type&&e.jsx(i.StringCellInput,{}),"number"===r.type&&e.jsx(n.NumberCellInput,{}),"select"===r.type&&e.jsx(o.SelectCellInput,{})]})]})})}));exports.TableCell=function(l){var i,n=t.useCell(l.rowIndex,l.colIndex),o=n.focusAtCell,r=n.onDoubleClickCellToEdit,u=n.preventPropagation,p=n.pasteData,C=c.useColumnContext(l.columnKey);return e.jsx(a.CellProvider,{columnKey:l.columnKey,children:e.jsx(d,{id:s.IdGenerator.getTableCellId(l.rowIndex,l.colIndex),editable:null!==(i=C.editable)&&void 0!==i&&i,cellFormatClassName:l.cellFormatClassName,focusAtCell:o,onDoubleClickCellToEdit:r,preventPropagation:u,pasteData:p,isExistOnClickRow:l.isExistOnClickRow,isExistOnUpdateRow:!!l.onUpdateRow})})};
|
|
3
3
|
//# sourceMappingURL=cell.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";exports.generateFormattingString=function(n,r,t){return t?t.reduce((function(t,e){var i=e.condition,o=e.key,u=e.style,l=r.findIndex((function(n){return n.key===o}));return-1!==l&&""===t[l]&&i(n)?(t[l]=u,t):t}),Array(r.length).fill("")).join(","):Array(r.length).fill("").join(",")};
|
|
2
|
+
//# sourceMappingURL=conditional-formatting.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"conditional-formatting.js","sources":["../../../../../src/table/libs/conditional-formatting.ts"],"sourcesContent":["import {\n DataObject,\n DataRecord,\n TConditionalFormatting,\n TTableColumn,\n} from \"../type\";\n\nexport function generateFormattingString(\n row: DataObject<DataRecord>,\n cols: TTableColumn<DataRecord>[],\n conditionalFormattings?: TConditionalFormatting<DataRecord>[]\n): string {\n if (!conditionalFormattings) {\n return Array(cols.length).fill(\"\").join(\",\");\n }\n\n const formats = conditionalFormattings.reduce((acc, formatting) => {\n const { condition, key, style } = formatting;\n const colIndex = cols.findIndex((col) => col.key === key);\n\n if (colIndex === -1 || acc[colIndex] !== \"\" || !condition(row)) {\n return acc;\n }\n\n acc[colIndex] = style;\n\n return acc;\n }, Array(cols.length).fill(\"\"));\n\n return formats.join(\",\");\n}\n"],"names":["row","cols","conditionalFormattings","reduce","acc","formatting","condition","key","style","colIndex","findIndex","col","Array","length","fill","join"],"mappings":"uDAQEA,EACAC,EACAC,GAEA,OAAKA,EAIWA,EAAuBC,QAAO,SAACC,EAAKC,GAC1C,IAAAC,EAA0BD,EAAUC,UAAzBC,EAAeF,EAAUE,IAApBC,EAAUH,QAC5BI,EAAWR,EAAKS,WAAU,SAACC,GAAQ,OAAAA,EAAIJ,MAAQA,CAAZ,IAEzC,OAAkB,IAAdE,GAAqC,KAAlBL,EAAIK,IAAqBH,EAAUN,IAI1DI,EAAIK,GAAYD,EAETJ,GALEA,CAMX,GAAGQ,MAAMX,EAAKY,QAAQC,KAAK,KAEZC,KAAK,KAhBXH,MAAMX,EAAKY,QAAQC,KAAK,IAAIC,KAAK,IAiB5C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("./providers.js"),t=require("../focus/provider.js"),n=require("../checkbox/components.js"),i=require("../cell/ui/cell.js"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),o=require("./providers.js"),t=require("../focus/provider.js"),n=require("../checkbox/components.js"),i=require("../cell/ui/cell.js"),a=r.memo((function(r){var a=t.useFocusActionContext().unfocus,c=JSON.parse(r.dataString),l=r.conditionalFormattingString.split(",");return e.jsx(o.RowProvider,{row:c,children:e.jsxs("tr",{className:"relative border border-gray-200 after:absolute after:w-full after:h-full after:top-0 after:left-0 after:pointer-events-none after:hover:bg-gray-500/10 ".concat(r.onClickRow?"hover:cursor-pointer":""," ").concat(r.applyRowFormatting?r.applyRowFormatting(c):""),onClick:function(e){e.preventDefault(),r.onClickRow&&(r.onClickRow(c),a())},"data-testid":c.id,children:[r.existCheckbox&&e.jsx("td",{children:e.jsx(n.Checkbox,{})}),r.cols.map((function(o,t){return e.jsx(i.TableCell,{rowIndex:r.rowIndex,colIndex:t,columnKey:o.key,isExistOnClickRow:!!r.onClickRow,cellFormatClassName:l[t],onUpdateRow:r.onUpdateRow},o.key)}))]})})}));exports.Row=a;
|
|
2
2
|
//# sourceMappingURL=components.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sources":["../../../../../src/table/sheet/components.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { RowProvider } from \"./providers\";\nimport { useFocusActionContext } from \"../focus/provider\";\nimport {
|
|
1
|
+
{"version":3,"file":"components.js","sources":["../../../../../src/table/sheet/components.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { RowProvider } from \"./providers\";\nimport { useFocusActionContext } from \"../focus/provider\";\nimport { DataRecord, TTableColumn } from \"../type\";\nimport { Checkbox } from \"../checkbox/components\";\nimport { TableCell } from \"../cell/ui/cell\";\n\ninterface TPropsRow<T extends DataRecord> {\n dataString: string;\n cols: TTableColumn<T>[];\n existCheckbox?: boolean;\n rowIndex: number;\n conditionalFormattingString: string;\n onClickRow?: (row: any) => void;\n applyRowFormatting?: (row: any) => string;\n onUpdateRow?: (newRow: any, oldRow: any) => void;\n}\n\nexport const Row = memo(function R<T extends DataRecord>(props: TPropsRow<T>) {\n const { unfocus } = useFocusActionContext();\n const row = JSON.parse(props.dataString);\n const conditionalFormatting = props.conditionalFormattingString.split(\",\");\n\n return (\n <RowProvider row={row}>\n <tr\n className={`relative border border-gray-200 after:absolute after:w-full after:h-full after:top-0 after:left-0 after:pointer-events-none after:hover:bg-gray-500/10 ${\n !!props.onClickRow ? \"hover:cursor-pointer\" : \"\"\n } ${props.applyRowFormatting ? props.applyRowFormatting(row) : \"\"}`}\n onClick={(e) => {\n e.preventDefault();\n\n if (!!props.onClickRow) {\n props.onClickRow(row);\n unfocus();\n }\n }}\n data-testid={row.id}\n >\n {props.existCheckbox && (\n <td>\n <Checkbox />\n </td>\n )}\n {props.cols.map((col, j) => {\n return (\n <TableCell\n key={col.key as string}\n rowIndex={props.rowIndex}\n colIndex={j}\n columnKey={col.key as string}\n isExistOnClickRow={!!props.onClickRow}\n cellFormatClassName={conditionalFormatting[j]}\n onUpdateRow={props.onUpdateRow}\n />\n );\n })}\n </tr>\n </RowProvider>\n );\n});\n"],"names":["Row","memo","props","unfocus","useFocusActionContext","row","JSON","parse","dataString","conditionalFormatting","conditionalFormattingString","split","_jsx","RowProvider","_jsxs","className","concat","onClickRow","applyRowFormatting","onClick","e","preventDefault","id","children","existCheckbox","Checkbox","cols","map","col","j","TableCell","rowIndex","colIndex","columnKey","key","isExistOnClickRow","cellFormatClassName","onUpdateRow"],"mappings":"wMAkBaA,EAAMC,EAAIA,MAAC,SAAiCC,GAC/C,IAAAC,EAAYC,kCACdC,EAAMC,KAAKC,MAAML,EAAMM,YACvBC,EAAwBP,EAAMQ,4BAA4BC,MAAM,KAEtE,OACEC,MAACC,EAAWA,YAAA,CAACR,IAAKA,WAChBS,EAAAA,KACE,KAAA,CAAAC,UAAW,0JACTC,OAAEd,EAAMe,WAAa,uBAAyB,GAAE,KAAAD,OAC9Cd,EAAMgB,mBAAqBhB,EAAMgB,mBAAmBb,GAAO,IAC/Dc,QAAS,SAACC,GACRA,EAAEC,iBAEInB,EAAMe,aACVf,EAAMe,WAAWZ,GACjBF,MAEH,cACYE,EAAIiB,GAAEC,SAAA,CAElBrB,EAAMsB,eACLZ,MAAA,KAAA,CAAAW,SACEX,EAAAA,IAACa,EAAQA,eAGZvB,EAAMwB,KAAKC,KAAI,SAACC,EAAKC,GACpB,OACEjB,MAACkB,EAAAA,UAAS,CAERC,SAAU7B,EAAM6B,SAChBC,SAAUH,EACVI,UAAWL,EAAIM,IACfC,oBAAqBjC,EAAMe,WAC3BmB,oBAAqB3B,EAAsBoB,GAC3CQ,YAAanC,EAAMmC,aANdT,EAAIM,IASf,QAIR"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__assign as o}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useTable as t}from"./hook.js";import{TableHeaderElement as i}from"./header/header.js";import{PagenationProvider as n}from"./pagenation/providers.js";import{DisplayRange as l,Pagenation as d}from"./pagenation/components.js";import{FilterProvider as s,useFilterContext as
|
|
2
|
+
import{__assign as o}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useTable as t}from"./hook.js";import{TableHeaderElement as i}from"./header/header.js";import{PagenationProvider as n}from"./pagenation/providers.js";import{DisplayRange as l,Pagenation as d}from"./pagenation/components.js";import{FilterProvider as s,useFilterContext as a}from"./filter/provider.js";import{TableFilterRemoveButton as c,TableFilterForm as m}from"./filter/components.js";import"./sort/icon.js";import{SortProvider as p}from"./sort/provider.js";import{ColumnsProvider as h}from"./sheet/providers.js";import{FocusProvider as f}from"./focus/provider.js";import{CheckboxProvider as g,CheckboxStatusProvider as u}from"./checkbox/provider.js";import{AllCheckbox as b}from"./checkbox/components.js";import{IdGenerator as v}from"./libs/id-generator.js";import{EditProvider as w}from"./edit/provider.js";import{TablePropertyProvider as x}from"./table-property/provider.js";import{KeyboardSetting as j}from"./operation/components/keyboard-setting.js";import{AutoSwitchEditMode as y}from"./table/components/auto-switch-edit-mode.js";import{Row as k}from"./sheet/components.js";import{PasteProvider as N}from"./paste/provider.js";import{generateFormattingString as C}from"./libs/conditional-formatting.js";function R(t){var i,l,d;return r(s,{children:r(p,{initialCondition:null===(i=t.initialCondition)||void 0===i?void 0:i.sort,children:r(n,{rowCount:t.rows.length,perPage:null===(d=null===(l=t.initialCondition)||void 0===l?void 0:l.pagenation)||void 0===d?void 0:d.rowCountPerPage,children:r(g,{checkbox:t.checkbox,children:r(u,{checkboxCount:t.rows.length,children:r(h,{cols:t.cols,children:r(f,{children:r(w,{children:r(x,{children:e(N,{rows:t.rows,cols:t.cols,colValidators:{},onUpdateRowFunction:t.onUpdateRow,children:[r(y,{}),r(j,{}),r(F,o({},t))]})})})})})})})})})})}function F(o){var n=t(o),s=n.cols,p=n.rowMaps,h=n.pageRowIds,f=a().selectedFilterKey;return e("div",{className:"w-full",children:[r("div",{className:"flex justify-end mb-1 mr-3",children:r(c,{children:r("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r("div",{id:"table-frame",className:"relative h-full max-w-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:e("table",{className:"table",children:[r("thead",{children:e("tr",{className:"sticky top-0 border-gray-200 z-20 bg-gray-200 text-gray-600 h-[32px]",children:[o.checkbox&&r("th",{children:r(b,{rows:o.rows})}),s.map((function(o,e){return r(i,{id:v.getTableColId(e),columnKey:o.key},o.key)}))]})}),e("tbody",{children:[!!f&&r("tr",{children:r("td",{colSpan:s.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl z-20 p-0 overflow-hidden",children:r(m,{})})}),0===h.length&&r("tr",{children:r("td",{colSpan:s.length,className:"py-5",children:r("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),h.map((function(e,t){return r(k,{existCheckbox:!!o.checkbox,rowIndex:t,dataString:p[e].stringValue,cols:o.cols,onClickRow:o.onClickRow,applyRowFormatting:o.applyRowFormatting,conditionalFormattingString:C(p[e].data,s,o.conditionalFormattings),onUpdateRow:o.onUpdateRow},e)}))]})]})}),e("div",{className:"mt-1",children:[r(l,{}),r("div",{className:"mt-2",children:r(d,{})})]})]})}export{R as default};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import{useCell as i}from"../../hook.js";import{EditButton as
|
|
2
|
+
import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import{useCell as i}from"../../hook.js";import{EditButton as l}from"./edit-button.js";import{StringCellInput as n}from"./string-input.js";import{NumberCellInput as r}from"./number-input.js";import{SelectCellInput as a}from"./select-input.js";import{memo as c}from"react";import{IdGenerator as s}from"../../libs/id-generator.js";import{useCellContext as p,CellProvider as d}from"../provider.js";import{useColumnContext as m}from"../../sheet/providers.js";var u=c((function(o){return e(t,{children:"component"===o.type?o.component:e("div",{onDoubleClick:o.onDoubleClick,children:e("p",{className:"cell-data text-left whitespace-nowrap",children:o.component})})})})),f=c((function(t){var i=p();return e("td",{id:t.id,onPaste:function(e){e.preventDefault(),t.isExistOnUpdateRow?t.pasteData(e.clipboardData.getData("text")):alert("ペースト機能が有効化されていません。")},className:"".concat(t.cellFormatClassName),children:o("div",{className:"relative",onClick:t.isExistOnClickRow?void 0:function(e){e.preventDefault(),t.focusAtCell()},onDoubleClick:t.isExistOnClickRow?void 0:t.onDoubleClickCellToEdit,children:[e("div",{id:"".concat(t.id,"-display"),children:o("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default",onClick:function(e){e.preventDefault(),e.stopPropagation(),t.focusAtCell()},children:[e(u,{type:i.type,component:i.component,onDoubleClick:t.onDoubleClickCellToEdit}),t.editable&&e(l,{})]})}),t.editable&&o("div",{id:"".concat(t.id,"-editor"),className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:t.preventPropagation,style:{opacity:0,pointerEvents:"none"},children:["string"===i.type&&e(n,{}),"number"===i.type&&e(r,{}),"select"===i.type&&e(a,{})]})]})})}));function C(t){var o,l=i(t.rowIndex,t.colIndex),n=l.focusAtCell,r=l.onDoubleClickCellToEdit,a=l.preventPropagation,c=l.pasteData,p=m(t.columnKey);return e(d,{columnKey:t.columnKey,children:e(f,{id:s.getTableCellId(t.rowIndex,t.colIndex),editable:null!==(o=p.editable)&&void 0!==o&&o,cellFormatClassName:t.cellFormatClassName,focusAtCell:n,onDoubleClickCellToEdit:r,preventPropagation:a,pasteData:c,isExistOnClickRow:t.isExistOnClickRow,isExistOnUpdateRow:!!t.onUpdateRow})})}export{C as TableCell};
|
|
3
3
|
//# sourceMappingURL=cell.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
function n(n,r,e){return e?e.reduce((function(e,t){var i=t.condition,o=t.key,l=t.style,u=r.findIndex((function(n){return n.key===o}));return-1!==u&&""===e[u]&&i(n)?(e[u]=l,e):e}),Array(r.length).fill("")).join(","):Array(r.length).fill("").join(",")}export{n as generateFormattingString};
|
|
2
|
+
//# sourceMappingURL=conditional-formatting.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"conditional-formatting.js","sources":["../../../../../src/table/libs/conditional-formatting.ts"],"sourcesContent":["import {\n DataObject,\n DataRecord,\n TConditionalFormatting,\n TTableColumn,\n} from \"../type\";\n\nexport function generateFormattingString(\n row: DataObject<DataRecord>,\n cols: TTableColumn<DataRecord>[],\n conditionalFormattings?: TConditionalFormatting<DataRecord>[]\n): string {\n if (!conditionalFormattings) {\n return Array(cols.length).fill(\"\").join(\",\");\n }\n\n const formats = conditionalFormattings.reduce((acc, formatting) => {\n const { condition, key, style } = formatting;\n const colIndex = cols.findIndex((col) => col.key === key);\n\n if (colIndex === -1 || acc[colIndex] !== \"\" || !condition(row)) {\n return acc;\n }\n\n acc[colIndex] = style;\n\n return acc;\n }, Array(cols.length).fill(\"\"));\n\n return formats.join(\",\");\n}\n"],"names":["generateFormattingString","row","cols","conditionalFormattings","reduce","acc","formatting","condition","key","style","colIndex","findIndex","col","Array","length","fill","join"],"mappings":"SAOgBA,EACdC,EACAC,EACAC,GAEA,OAAKA,EAIWA,EAAuBC,QAAO,SAACC,EAAKC,GAC1C,IAAAC,EAA0BD,EAAUC,UAAzBC,EAAeF,EAAUE,IAApBC,EAAUH,QAC5BI,EAAWR,EAAKS,WAAU,SAACC,GAAQ,OAAAA,EAAIJ,MAAQA,CAAZ,IAEzC,OAAkB,IAAdE,GAAqC,KAAlBL,EAAIK,IAAqBH,EAAUN,IAI1DI,EAAIK,GAAYD,EAETJ,GALEA,CAMX,GAAGQ,MAAMX,EAAKY,QAAQC,KAAK,KAEZC,KAAK,KAhBXH,MAAMX,EAAKY,QAAQC,KAAK,IAAIC,KAAK,IAiB5C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o,jsxs as r}from"react/jsx-runtime";import{memo as
|
|
1
|
+
import{jsx as o,jsxs as r}from"react/jsx-runtime";import{memo as t}from"react";import{RowProvider as e}from"./providers.js";import{useFocusActionContext as n}from"../focus/provider.js";import{Checkbox as i}from"../checkbox/components.js";import{TableCell as a}from"../cell/ui/cell.js";var c=t((function(t){var c=n().unfocus,l=JSON.parse(t.dataString),p=t.conditionalFormattingString.split(",");return o(e,{row:l,children:r("tr",{className:"relative border border-gray-200 after:absolute after:w-full after:h-full after:top-0 after:left-0 after:pointer-events-none after:hover:bg-gray-500/10 ".concat(t.onClickRow?"hover:cursor-pointer":""," ").concat(t.applyRowFormatting?t.applyRowFormatting(l):""),onClick:function(o){o.preventDefault(),t.onClickRow&&(t.onClickRow(l),c())},"data-testid":l.id,children:[t.existCheckbox&&o("td",{children:o(i,{})}),t.cols.map((function(r,e){return o(a,{rowIndex:t.rowIndex,colIndex:e,columnKey:r.key,isExistOnClickRow:!!t.onClickRow,cellFormatClassName:p[e],onUpdateRow:t.onUpdateRow},r.key)}))]})})}));export{c as Row};
|
|
2
2
|
//# sourceMappingURL=components.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sources":["../../../../../src/table/sheet/components.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { RowProvider } from \"./providers\";\nimport { useFocusActionContext } from \"../focus/provider\";\nimport {
|
|
1
|
+
{"version":3,"file":"components.js","sources":["../../../../../src/table/sheet/components.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { RowProvider } from \"./providers\";\nimport { useFocusActionContext } from \"../focus/provider\";\nimport { DataRecord, TTableColumn } from \"../type\";\nimport { Checkbox } from \"../checkbox/components\";\nimport { TableCell } from \"../cell/ui/cell\";\n\ninterface TPropsRow<T extends DataRecord> {\n dataString: string;\n cols: TTableColumn<T>[];\n existCheckbox?: boolean;\n rowIndex: number;\n conditionalFormattingString: string;\n onClickRow?: (row: any) => void;\n applyRowFormatting?: (row: any) => string;\n onUpdateRow?: (newRow: any, oldRow: any) => void;\n}\n\nexport const Row = memo(function R<T extends DataRecord>(props: TPropsRow<T>) {\n const { unfocus } = useFocusActionContext();\n const row = JSON.parse(props.dataString);\n const conditionalFormatting = props.conditionalFormattingString.split(\",\");\n\n return (\n <RowProvider row={row}>\n <tr\n className={`relative border border-gray-200 after:absolute after:w-full after:h-full after:top-0 after:left-0 after:pointer-events-none after:hover:bg-gray-500/10 ${\n !!props.onClickRow ? \"hover:cursor-pointer\" : \"\"\n } ${props.applyRowFormatting ? props.applyRowFormatting(row) : \"\"}`}\n onClick={(e) => {\n e.preventDefault();\n\n if (!!props.onClickRow) {\n props.onClickRow(row);\n unfocus();\n }\n }}\n data-testid={row.id}\n >\n {props.existCheckbox && (\n <td>\n <Checkbox />\n </td>\n )}\n {props.cols.map((col, j) => {\n return (\n <TableCell\n key={col.key as string}\n rowIndex={props.rowIndex}\n colIndex={j}\n columnKey={col.key as string}\n isExistOnClickRow={!!props.onClickRow}\n cellFormatClassName={conditionalFormatting[j]}\n onUpdateRow={props.onUpdateRow}\n />\n );\n })}\n </tr>\n </RowProvider>\n );\n});\n"],"names":["Row","memo","props","unfocus","useFocusActionContext","row","JSON","parse","dataString","conditionalFormatting","conditionalFormattingString","split","_jsx","RowProvider","_jsxs","className","concat","onClickRow","applyRowFormatting","onClick","e","preventDefault","id","children","existCheckbox","Checkbox","cols","map","col","j","TableCell","rowIndex","colIndex","columnKey","key","isExistOnClickRow","cellFormatClassName","onUpdateRow"],"mappings":"iSAkBaA,EAAMC,GAAK,SAAiCC,GAC/C,IAAAC,EAAYC,YACdC,EAAMC,KAAKC,MAAML,EAAMM,YACvBC,EAAwBP,EAAMQ,4BAA4BC,MAAM,KAEtE,OACEC,EAACC,EAAW,CAACR,IAAKA,WAChBS,EACE,KAAA,CAAAC,UAAW,0JACTC,OAAEd,EAAMe,WAAa,uBAAyB,GAAE,KAAAD,OAC9Cd,EAAMgB,mBAAqBhB,EAAMgB,mBAAmBb,GAAO,IAC/Dc,QAAS,SAACC,GACRA,EAAEC,iBAEInB,EAAMe,aACVf,EAAMe,WAAWZ,GACjBF,MAEH,cACYE,EAAIiB,GAAEC,SAAA,CAElBrB,EAAMsB,eACLZ,EAAA,KAAA,CAAAW,SACEX,EAACa,QAGJvB,EAAMwB,KAAKC,KAAI,SAACC,EAAKC,GACpB,OACEjB,EAACkB,EAAS,CAERC,SAAU7B,EAAM6B,SAChBC,SAAUH,EACVI,UAAWL,EAAIM,IACfC,oBAAqBjC,EAAMe,WAC3BmB,oBAAqB3B,EAAsBoB,GAC3CQ,YAAanC,EAAMmC,aANdT,EAAIM,IASf,QAIR"}
|
package/dist/index.d.ts
CHANGED
|
@@ -64,6 +64,11 @@ type TCheckboxProperty<T extends DataRecord> = {
|
|
|
64
64
|
onUnchecked: (row: DataObject<T>) => void;
|
|
65
65
|
};
|
|
66
66
|
};
|
|
67
|
+
type TConditionalFormatting<T extends DataRecord> = {
|
|
68
|
+
condition: (row: DataObject<T>) => boolean;
|
|
69
|
+
key: keyof T;
|
|
70
|
+
style: TailwindCssStyle;
|
|
71
|
+
};
|
|
67
72
|
type TailwindCssStyle = string;
|
|
68
73
|
type TPropsTable<T extends DataRecord> = {
|
|
69
74
|
cols: TTableColumn<T>[];
|
|
@@ -80,6 +85,7 @@ type TPropsTable<T extends DataRecord> = {
|
|
|
80
85
|
};
|
|
81
86
|
};
|
|
82
87
|
applyRowFormatting?: (row: DataObject<T>) => TailwindCssStyle;
|
|
88
|
+
conditionalFormattings?: TConditionalFormatting<T>[];
|
|
83
89
|
} & TCheckboxProperty<T>;
|
|
84
90
|
|
|
85
91
|
declare function Table<T extends DataRecord>(props: TPropsTable<T>): react_jsx_runtime.JSX.Element;
|