@teppen/react-ui 1.1.1 → 1.2.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/README.md +7 -3
- package/dist/cjs/node_modules/react-intersection-observer/index.js +3 -0
- package/dist/cjs/node_modules/react-intersection-observer/index.js.map +1 -0
- package/dist/cjs/src/table/base.js +1 -1
- package/dist/cjs/src/table/cell.js +1 -1
- package/dist/cjs/src/table/filter/components.js +1 -1
- package/dist/cjs/src/table/filter/filter-icon.js +1 -1
- package/dist/cjs/src/table/filter/filter-icon.js.map +1 -1
- package/dist/cjs/src/table/header.js +1 -1
- package/dist/cjs/src/table/header.js.map +1 -1
- package/dist/esm/node_modules/react-intersection-observer/index.js +3 -0
- package/dist/esm/node_modules/react-intersection-observer/index.js.map +1 -0
- package/dist/esm/src/table/base.js +1 -1
- package/dist/esm/src/table/cell.js +1 -1
- package/dist/esm/src/table/filter/components.js +1 -1
- package/dist/esm/src/table/filter/filter-icon.js +1 -1
- package/dist/esm/src/table/filter/filter-icon.js.map +1 -1
- package/dist/esm/src/table/header.js +1 -1
- package/dist/esm/src/table/header.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -123,6 +123,8 @@ const App = () => {
|
|
|
123
123
|
{
|
|
124
124
|
key: "button",
|
|
125
125
|
label: "ボタン",
|
|
126
|
+
disableSort: true,
|
|
127
|
+
disableFilter: true,
|
|
126
128
|
type: "string",
|
|
127
129
|
render: (value, row) => (
|
|
128
130
|
<button
|
|
@@ -189,18 +191,20 @@ export type DataObject = {
|
|
|
189
191
|
|
|
190
192
|
##### cols
|
|
191
193
|
|
|
192
|
-
In `cols`, you specify the data to be displayed in the table from left to right. The `key` here needs to match the key name in each element of rows.
|
|
194
|
+
In `cols`, you specify the data to be displayed in the table from left to right. The `key` here needs to match the key name in each element of rows.
|
|
193
195
|
|
|
194
|
-
|
|
196
|
+
it is not necessary to always include the key `label`, but it is required for some functions, so it is recommended to set it.
|
|
195
197
|
|
|
196
198
|
```ts
|
|
197
199
|
export type TColumnType = "string" | "number" | "select";
|
|
198
200
|
|
|
199
201
|
export type TTableColumn = {
|
|
200
202
|
key: string;
|
|
203
|
+
label?: string;
|
|
201
204
|
type: TColumnType;
|
|
205
|
+
disableSort?: boolean;
|
|
206
|
+
disableFilter?: boolean;
|
|
202
207
|
options: { value: string; label: string }[]; // Only When "type" is "select"
|
|
203
|
-
label?: string;
|
|
204
208
|
editable?: boolean;
|
|
205
209
|
render?: (value: string | number, row: DataObject) => React.ReactNode; // Only When "editable" is false
|
|
206
210
|
allowEmpty?: boolean; // Only When "type" is "select"
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";function e(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var t=e(require("react")),r=new Map,n=new WeakMap,i=0,o=void 0;function s(e){return Object.keys(e).sort().filter((t=>void 0!==e[t])).map((t=>{return`${t}_${"root"===t?(r=e.root,r?(n.has(r)||(i+=1,n.set(r,i.toString())),n.get(r)):"0"):e[t]}`;var r})).toString()}function c(e,t,n={},i=o){if(void 0===window.IntersectionObserver&&void 0!==i){const r=e.getBoundingClientRect();return t(i,{isIntersecting:i,target:e,intersectionRatio:"number"==typeof n.threshold?n.threshold:0,time:0,boundingClientRect:r,intersectionRect:r,rootBounds:r}),()=>{}}const{id:c,observer:u,elements:a}=function(e){const t=s(e);let n=r.get(t);if(!n){const i=new Map;let o;const s=new IntersectionObserver((t=>{t.forEach((t=>{var r;const n=t.isIntersecting&&o.some((e=>t.intersectionRatio>=e));e.trackVisibility&&void 0===t.isVisible&&(t.isVisible=n),null==(r=i.get(t.target))||r.forEach((e=>{e(n,t)}))}))}),e);o=s.thresholds||(Array.isArray(e.threshold)?e.threshold:[e.threshold||0]),n={id:t,observer:s,elements:i},r.set(t,n)}return n}(n),l=a.get(e)||[];return a.has(e)||a.set(e,l),l.push(t),u.observe(e),function(){l.splice(l.indexOf(t),1),0===l.length&&(a.delete(e),u.unobserve(e)),0===a.size&&(u.disconnect(),r.delete(c))}}exports.observe=c,exports.useInView=function({threshold:e,delay:r,trackVisibility:n,rootMargin:i,root:o,triggerOnce:s,skip:u,initialInView:a,fallbackInView:l,onChange:d}={}){var f;const[g,h]=t.useState(null),b=t.useRef(),[v,y]=t.useState({inView:!!a,entry:void 0});b.current=d,t.useEffect((()=>{if(u||!g)return;let t;return t=c(g,((e,r)=>{y({inView:e,entry:r}),b.current&&b.current(e,r),r.isIntersecting&&s&&t&&(t(),t=void 0)}),{root:o,rootMargin:i,threshold:e,trackVisibility:n,delay:r},l),()=>{t&&t()}}),[Array.isArray(e)?e.toString():e,g,o,i,s,u,n,l,r]);const w=null==(f=v.entry)?void 0:f.target,p=t.useRef();g||!w||s||u||p.current===w||(p.current=w,y({inView:!!a,entry:void 0}));const V=[h,v.inView,v.entry];return V.ref=V[0],V.inView=V[1],V.entry=V[2],V};
|
|
3
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -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"),t=require("react"),n=require("./hook.js"),o=require("./cell.js"),l=require("./header.js"),i=require("./pagenation/providers.js"),s=require("./pagenation/components.js"),a=require("./filter/provider.js"),d=require("./filter/components.js");require("./sort/icon.js");var c=require("./sort/provider.js"),u=require("./sheet/providers.js"),
|
|
2
|
+
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("./hook.js"),o=require("./cell.js"),l=require("./header.js"),i=require("./pagenation/providers.js"),s=require("./pagenation/components.js"),a=require("./filter/provider.js"),d=require("./filter/components.js");require("./sort/icon.js");var c=require("./sort/provider.js"),u=require("./sheet/providers.js"),f=require("./edit/provider.js");function v(e){var i=n.useTable(e),c=i.cols,v=i.rows,h=f.useFocusContext(),x=h.isFocus,j=h.isEditing,m=h.edit,p=h.moveLeft,y=h.moveRight,g=h.moveUp,w=h.moveDown,b=h.unfocus,k=h.setMaxRowNumber,q=a.useFilterContext().selectedFilterKey;return t.useEffect((function(){var e=function(e){x&&!j&&("Enter"===e.key?(e.preventDefault(),w()):"Escape"===e.key?(e.preventDefault(),b()):"ArrowRight"===e.key?(e.preventDefault(),y()):"ArrowLeft"===e.key?(e.preventDefault(),p()):"ArrowUp"===e.key?(e.preventDefault(),g()):"ArrowDown"===e.key?(e.preventDefault(),w()):"F2"===e.key&&m())};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[j,x]),t.useEffect((function(){k(v.length-1)}),[v.length]),r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end mb-1 mr-3",children:r.jsx(d.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 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:c.map((function(e){return r.jsx(l.TableHeaderElement,{columnKey:e.key},e.key)}))})}),r.jsxs("tbody",{children:[!!q&&r.jsx("tr",{children:r.jsx("td",{colSpan:c.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(d.TableFilterForm,{})})}),0===v.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:c.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),v.map((function(t,n){return r.jsx(u.RowProvider,{row:t,children:r.jsx("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(e.onClickRow?"hover:cursor-pointer":""," ").concat(e.applyRowFormatting?e.applyRowFormatting(t):""),onClick:function(r){r.preventDefault(),e.onClickRow&&e.onClickRow(t)},"data-testid":t.id,children:c.map((function(e,t){return r.jsx(u.CellProvider,{columnKey:e.key,rowIndex:n,colIndex:t,children:r.jsx(o.TableCell,{})},e.key)}))})},t.id)}))]})]})}),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(t){var n;return r.jsx(a.FilterProvider,{children:r.jsx(c.SortProvider,{initialCondition:null===(n=t.initialCondition)||void 0===n?void 0:n.sort,children:r.jsx(i.PagenationProvider,{rowCount:t.rows.length,children:r.jsx(u.ColumnsProvider,{cols:t.cols,children:r.jsx(f.FocusProvider,{columnCount:t.cols.length,children:r.jsx(v,e.__assign({},t))})})})})})};
|
|
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("react"),n=require("./edit-icon.js"),
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("./edit-icon.js"),r=require("./cancel-icon.js"),l=require("./sheet/providers.js"),o=require("./edit/provider.js"),u=require("./hook.js"),i=require("../../node_modules/react-intersection-observer/index.js"),a=t.forwardRef((function(t,n){return e.jsxs("div",{className:"flex justify-between gap-1 w-full items-center",children:[e.jsx("input",{ref:n,className:"w-full py-1 px-2 bg-white text-gray-900",type:"text",value:t.value,onChange:t.onChange,onBlur:t.onBlur,onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(t.reset(),t.endEditing())}}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),t.reset(),t.endEditing()},children:e.jsx(r.CancelIcon,{size:16})})]})}));function s(){var n=l.useCellContext(),r=l.useColumnContext(n.columnKey),i=l.useRowContext(),s=o.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,d=c.callbackAfterBlur,v=t.useState(i[n.columnKey]),x=v[0],p=v[1];if(!r.editable||"string"!==r.type)throw new Error("Invalid condition");return e.jsx(a,{ref:f,value:x,onChange:function(e){e.preventDefault(),p(e.target.value)},onBlur:function(e){e.preventDefault(),x!==i[n.columnKey]?!function(){var e,t,n;return(null===(e=r.constraints)||void 0===e?void 0:e.maxLength)&&x.length>r.constraints.maxLength?(alert("最大文字数(".concat(r.constraints.maxLength,")を超過しています。(現在").concat(x.length,"文字)")),!1):(null===(t=r.constraints)||void 0===t?void 0:t.minLength)&&x.length<r.constraints.minLength?(alert("最小文字数(".concat(r.constraints.minLength,")を下回っています。(現在").concat(x.length,"文字)")),!1):!((null===(n=r.constraints)||void 0===n?void 0:n.pattern)&&!new RegExp(r.constraints.pattern).test(x)&&(alert("パターンに一致しません。(パターン".concat(r.constraints.pattern,")")),1))}()?setTimeout((function(){e.target.focus()}),100):(r.onCellBlur(n.columnKey,x,i,s),d()):s()},reset:function(){return p(i[n.columnKey].toString())},endEditing:s})}function c(){var n=l.useCellContext(),r=l.useColumnContext(n.columnKey),i=l.useRowContext(),s=o.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,d=c.callbackAfterBlur,v=t.useState(n.value.toString()),x=v[0],p=v[1];if(!r.editable||"number"!==r.type)throw new Error("Invalid condition");return e.jsx(a,{ref:f,value:x,onChange:function(e){e.preventDefault(),""!==e.target.value?"-"!==e.target.value&&"0-"!==e.target.value?e.target.value.match(/^-?[0-9]+\.$/)?p(e.target.value):isNaN(Number(e.target.value))||p(Number(e.target.value).toString()):p("-0"):p("0")},onBlur:function(e){e.preventDefault(),Number(x)!==n.value?!function(){var e,t,n=parseInt(x);return(null===(e=r.constraints)||void 0===e?void 0:e.max)&&n>r.constraints.max?(alert("最大値(".concat(r.constraints.max,")を超過しています。(入力値:").concat(n,")")),!1):!((null===(t=r.constraints)||void 0===t?void 0:t.min)&&n<r.constraints.min&&(alert("最小値(".concat(r.constraints.min,")を下回っています。(入力値:").concat(n,")")),1))}()?setTimeout((function(){e.target.focus()}),100):(r.onCellBlur(n.columnKey,Number(x),i,s),d()):s()},reset:function(){return p(n.value.toString())},endEditing:s})}function f(){var n=l.useCellContext(),i=l.useColumnContext(n.columnKey),a=l.useRowContext(),s=o.useFocusContext().finishEditing,c=u.useCellFocus(),f=c.ref,d=c.callbackAfterBlur,v=t.useState(n.value),x=v[0],p=v[1];if(!i.editable||"select"!==i.type)throw new Error("Invalid condition");return e.jsxs("div",{className:"flex justify-between gap-1 w-full items-center",children:[e.jsxs("select",{ref:f,className:"w-full py-1 px-2 bg-white text-gray-900",value:x,onChange:function(e){e.preventDefault(),p(e.target.value)},onBlur:function(e){e.preventDefault(),x!==n.value?(i.onCellBlur(n.columnKey,x,a,s),d()):s()},onKeyDown:function(e){"Enter"===e.key&&e.preventDefault()},onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(p(n.value),s())},children:[i.allowEmpty&&e.jsx("option",{value:"",children:""==n.value?"-- 未選択 --":"-- 選択解除 --"},"TEPPEN/ReactUI Empty Option"),i.options.map((function(t){return e.jsx("option",{value:t.value,children:t.label},t.value)}))]}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),p(n.value),s()},children:e.jsx(r.CancelIcon,{size:16})})]})}var d=t.memo((function(){var t=l.useCellContext(),r=o.useFocusContext().focusAndEdit;return e.jsx("button",{className:"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200",onClick:function(e){e.preventDefault(),r(t.rowIndex,t.colIndex)},children:e.jsx(n.EditIcon,{size:12})})}));exports.TableCell=function(){var n=u.useCell(),r=n.cell,o=n.isFocus,a=n.isEditing,v=n.onClickCellToFocus,x=n.onDoubleClickCellToEdit,p=n.preventPropagation,g=l.useRowContext(),m=t.useRef(null),h=i.useInView({root:document.querySelector("#table-frame"),rootMargin:"-60px -30px -30px -30px",threshold:1}),C=h.inView,y=h.ref;return t.useEffect((function(){var e;o&&!C&&m.current&&(null===(e=m.current)||void 0===e||e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}),[o,C,m]),e.jsx("td",{ref:y,className:"".concat(o?"outline outline-1 -outline-offset-1 outline-gray-400":""),children:e.jsxs("div",{ref:m,className:"relative",children:[e.jsxs("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default ".concat(o&&a?"opacity-0":""),onClick:v,children:[r.render?r.render(r.value,g):e.jsx("div",{onDoubleClick:x,children:e.jsx("p",{className:"text-left",children:r.label})}),r.editable&&e.jsx(d,{})]}),r.editable&&o&&a&&e.jsxs("div",{className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:p,children:["string"===r.type&&e.jsx(s,{}),"number"===r.type&&e.jsx(c,{}),"select"===r.type&&e.jsx(f,{})]})]})})};
|
|
3
3
|
//# sourceMappingURL=cell.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("./filter-icon.js"),l=require("./provider.js"),n=require("react"),r=require("../cancel-icon.js"),i=require("./constants.js"),a=require("../sheet/providers.js");function
|
|
2
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("./filter-icon.js"),l=require("./provider.js"),n=require("react"),r=require("../cancel-icon.js"),i=require("./constants.js"),a=require("../sheet/providers.js");function o(t){var n=t.children,r=l.useFilterContext(),i=r.removeFilter,a=r.filterConditions,o=r.selectedFilterKey;if(0!==a.filter((function(e){return e.key===o})).length){return e.jsx("button",{onClick:function(e){e.preventDefault(),a.filter((function(e){return e.key===o})).forEach((function(e){i(e.id)}))},children:n})}}function s(t){var n=t.value,r=t.onChange,o=l.useFilterContext().selectedFilterKey,s=a.useColumnContext(o);return e.jsxs("select",{value:n,onChange:r,className:"px-2 py-1 rounded-md",children:[e.jsx("option",{value:"",children:o?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===s.type&&i.STRING_FILTER_OPERATOR.map((function(t){return e.jsx("option",{value:t.key,children:t.label},t.key)})),"number"===s.type&&i.NUMBER_FILTER_OPERATOR.map((function(t){return e.jsx("option",{value:t.key,children:t.label},t.key)})),"select"===s.type&&i.SELECT_FILTER_OPERATOR.map((function(t){return e.jsx("option",{value:t.key,children:t.label},t.key)}))]})}function u(t){return e.jsxs("select",{className:"w-full px-2 py-1 rounded-md min-w-32",value:t.value,onChange:function(e){e.preventDefault(),t.setValue(e.target.value)},children:[e.jsx("option",{value:"",children:"-- 未選択 --"}),t.options.map((function(t){return e.jsx("option",{value:t.value,children:t.label},t.value)}))]})}function c(t){return e.jsx("input",{className:"w-full px-2 py-1 rounded-md min-w-32",type:"text",value:t.value,onChange:function(e){e.preventDefault(),t.setValue(e.target.value)},placeholder:"-- 値を入力 --"})}function d(t){var n=l.useFilterContext(),r=n.selectedFilterKey,i=n.addFilter,o=a.useColumnContext(r);return e.jsx("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md text-nowrap",onClick:function(e){var l;e.preventDefault(),r&&t.selectingOperator&&("select"===o.type||t.value)?i("string"===o.type?{key:r,operator:t.selectingOperator,value:[t.value]}:"select"===o.type?{key:r,operator:t.selectingOperator,value:t.value,label:null===(l=o.options.find((function(e){return e.value===t.value})))||void 0===l?void 0:l.label}:{key:r,operator:t.selectingOperator,value:Number(t.value)}):alert("全ての項目を入力してください")},children:"追加"})}exports.TableFilter=function(n){var r=a.useColumnContext(n.columnKey),i=l.useFilterContext(),o=i.filterConditions,s=i.setSelectedFilterKey,u=i.selectedFilterKey;return r.label?e.jsx("div",{className:"relative cursor-pointer",onClick:function(e){e.preventDefault(),u===n.columnKey?s(null):s(n.columnKey)},children:e.jsx(t.FIlterIcon,{isFilterTarget:u===n.columnKey,isFilterActive:o.filter((function(e){return e.key===n.columnKey})).length>0})}):e.jsx(e.Fragment,{})},exports.TableFilterForm=function(){var t=a.useColumnsContext(),x=l.useFilterContext(),f=x.removeFilter,p=x.filterConditions,v=x.selectedFilterKey,m=x.setSelectedFilterKey,y=n.useState(""),h=y[0],j=y[1],g=n.useState(""),b=g[0],C=g[1],k=a.useColumnContext(v);n.useEffect((function(){C(""),j("")}),[v]);var F=n.useCallback((function(e){e.preventDefault,j(e.target.value)}),[]);return e.jsxs("div",{className:"flex w-full max-h-[50vh] bg-gray-200",children:[e.jsx("ul",{className:"flex flex-col items-end min-w-16 md:w-[20%] max-h-full overflow-y-auto no_scrollbar bg-white",children:t.filter((function(e){return!!e.label&&!e.disableFilter})).map((function(t){return e.jsxs("li",{className:"relative pl-2 pr-8 md:px-8 py-3 w-full cursor-pointer border-y border-gray-300 ".concat(v===t.key?"bg-gray-200":"hover:bg-gray-100"),onClick:function(e){e.preventDefault(),m(t.key)},children:[e.jsx("p",{className:"text-right text-nowrap ".concat(v===t.key?"underline underline-offset-2 decoration-2 decoration-neutral-500":""),children:t.label}),p.filter((function(e){return e.key===t.key})).length>0&&e.jsx("div",{className:"absolute top-1/2 right-1",children:e.jsx("div",{className:"-translate-y-1/2 rounded-full border border-gray-400 bg-gray-100 aspect-square w-5",children:e.jsx("p",{className:"text-xs text-center",children:p.filter((function(e){return e.key===t.key})).length})})})]},t.key)}))}),e.jsxs("div",{className:"relative flex flex-col gap-4 ml-4 mr-4 md:ml-16 md:mr-auto py-5",children:[e.jsx("div",{className:"absolute top-5 right-0",children:e.jsx("button",{onClick:function(e){e.preventDefault(),m(null)},children:"閉じる"})}),e.jsx("p",{className:"font-bold text-xl",children:"フィルタリング条件"}),e.jsxs("div",{className:"flex items-center gap-3 max-w-6xl",children:[e.jsxs("p",{className:"text-gray-600 text-lg text-nowrap",children:["「",e.jsx("strong",{children:k.label}),"」 は"]}),e.jsx(s,{value:h,onChange:F}),"select"===k.type?e.jsx(u,{value:b,options:k.options,setValue:C}):e.jsx(c,{value:b,setValue:C}),e.jsx(d,{value:b,selectingOperator:h})]}),e.jsx("ul",{className:"flex flex-col gap-1 my-5 max-h-32 overflow-auto",children:p.filter((function(e){return e.key===v})).map((function(l){var n,a;return e.jsxs("li",{className:"flex justify-between mr-5",children:[e.jsxs("p",{children:["「",e.jsx("strong",{children:null===(n=t.find((function(e){return e.key===l.key})))||void 0===n?void 0:n.label}),"」 は",e.jsx("span",{children:null===(a=i.FILTER_OPERATOR.find((function(e){return e.key===l.operator})))||void 0===a?void 0:a.label}),"：",e.jsx("span",{children:l.label?l.label:l.value})]}),e.jsx("button",{onClick:function(e){e.preventDefault(),f(l.id)},children:e.jsx(r.CancelIcon,{size:16})})]},l.id)}))}),e.jsx("div",{className:"flex justify-center",children:e.jsx(o,{children:e.jsxs("p",{className:"text-xs text-gray-600 underline hover:text-gray-800",children:["「",k.label,"」のフィルタを全て解除"]})})})]})]})},exports.TableFilterRemoveButton=function(t){var n=t.children,r=l.useFilterContext(),i=r.clearFilter;if(0!==r.filterConditions.length)return e.jsx("button",{onClick:function(e){e.preventDefault(),i()},children:n})},exports.TableSpecifyKeyFilterRemoveButton=o;
|
|
3
3
|
//# sourceMappingURL=components.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");exports.FIlterIcon=function(t){var r,
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");exports.FIlterIcon=function(t){var r,i=null!==(r=t.size)&&void 0!==r?r:16;return e.jsx("div",{className:"duration-300 ".concat(t.isFilterTarget?"text-neutral-500":t.isFilterActive?"text-gray-700":"text-gray-500"),children:e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",version:"1.1",width:"".concat(i,"px"),height:"".concat(i,"px"),viewBox:"0 0 256 256",xmlSpace:"preserve",children:[e.jsx("defs",{}),t.isFilterActive||t.isFilterTarget?e.jsx("g",{style:{stroke:"none",strokeWidth:0,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"none",fillRule:"nonzero",opacity:1},transform:"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)",children:e.jsx("path",{d:"M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z",style:{stroke:"none",strokeWidth:1,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"currentColor",fillRule:"nonzero",opacity:1},transform:" matrix(1 0 0 1 0 0) ",strokeLinecap:"round"})}):e.jsx("g",{style:{stroke:"none",strokeWidth:0,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"none",fillRule:"nonzero",opacity:1},transform:"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)",children:e.jsx("path",{d:"M 37.882 90 c -0.338 0 -0.676 -0.086 -0.981 -0.258 c -0.629 -0.354 -1.019 -1.02 -1.019 -1.742 V 45.354 L 3.923 3.208 C 3.464 2.604 3.388 1.791 3.726 1.11 S 4.758 0 5.517 0 h 78.966 c 0.76 0 1.453 0.43 1.791 1.11 s 0.262 1.493 -0.197 2.098 L 54.118 45.354 V 79.37 c 0 0.699 -0.365 1.348 -0.963 1.71 l -14.237 8.63 C 38.601 89.903 38.241 90 37.882 90 z M 9.543 4 l 29.932 39.474 c 0.264 0.348 0.406 0.772 0.406 1.208 v 39.767 l 10.236 -6.205 V 44.682 c 0 -0.437 0.143 -0.861 0.406 -1.208 L 80.457 4 H 9.543 z M 52.118 79.37 h 0.01 H 52.118 z",style:{stroke:"none",strokeWidth:1,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"currentColor",fillRule:"nonzero",opacity:1},transform:" matrix(1 0 0 1 0 0) ",strokeLinecap:"round"})})]})})};
|
|
2
2
|
//# sourceMappingURL=filter-icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-icon.js","sources":["../../../../../src/table/filter/filter-icon.tsx"],"sourcesContent":["type TPropsFIlterIcon = {\n size?: number;\n isFilterActive?: boolean;\n};\n\nexport function FIlterIcon(props: TPropsFIlterIcon) {\n const size = props.size ?? 16;\n return (\n <div\n className={`duration-300 ${\n props.isFilterActive
|
|
1
|
+
{"version":3,"file":"filter-icon.js","sources":["../../../../../src/table/filter/filter-icon.tsx"],"sourcesContent":["type TPropsFIlterIcon = {\n size?: number;\n isFilterActive?: boolean;\n isFilterTarget?: boolean;\n};\n\nexport function FIlterIcon(props: TPropsFIlterIcon) {\n const size = props.size ?? 16;\n return (\n <div\n className={`duration-300 ${\n props.isFilterTarget\n ? \"text-neutral-500\"\n : props.isFilterActive\n ? \"text-gray-700\"\n : \"text-gray-500\"\n }`}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n version=\"1.1\"\n width={`${size}px`}\n height={`${size}px`}\n viewBox=\"0 0 256 256\"\n xmlSpace=\"preserve\"\n >\n <defs></defs>\n {props.isFilterActive || props.isFilterTarget ? (\n <g\n style={{\n stroke: \"none\",\n strokeWidth: 0,\n strokeDasharray: \"none\",\n strokeLinecap: \"butt\",\n strokeLinejoin: \"miter\",\n strokeMiterlimit: 10,\n fill: \"none\",\n fillRule: \"nonzero\",\n opacity: 1,\n }}\n transform=\"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)\"\n >\n <path\n d=\"M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z\"\n style={{\n stroke: \"none\",\n strokeWidth: 1,\n strokeDasharray: \"none\",\n strokeLinecap: \"butt\",\n strokeLinejoin: \"miter\",\n strokeMiterlimit: 10,\n fill: \"currentColor\",\n fillRule: \"nonzero\",\n opacity: 1,\n }}\n transform=\" matrix(1 0 0 1 0 0) \"\n strokeLinecap=\"round\"\n />\n </g>\n ) : (\n <g\n style={{\n stroke: \"none\",\n strokeWidth: 0,\n strokeDasharray: \"none\",\n strokeLinecap: \"butt\",\n strokeLinejoin: \"miter\",\n strokeMiterlimit: 10,\n fill: \"none\",\n fillRule: \"nonzero\",\n opacity: 1,\n }}\n transform=\"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)\"\n >\n <path\n d=\"M 37.882 90 c -0.338 0 -0.676 -0.086 -0.981 -0.258 c -0.629 -0.354 -1.019 -1.02 -1.019 -1.742 V 45.354 L 3.923 3.208 C 3.464 2.604 3.388 1.791 3.726 1.11 S 4.758 0 5.517 0 h 78.966 c 0.76 0 1.453 0.43 1.791 1.11 s 0.262 1.493 -0.197 2.098 L 54.118 45.354 V 79.37 c 0 0.699 -0.365 1.348 -0.963 1.71 l -14.237 8.63 C 38.601 89.903 38.241 90 37.882 90 z M 9.543 4 l 29.932 39.474 c 0.264 0.348 0.406 0.772 0.406 1.208 v 39.767 l 10.236 -6.205 V 44.682 c 0 -0.437 0.143 -0.861 0.406 -1.208 L 80.457 4 H 9.543 z M 52.118 79.37 h 0.01 H 52.118 z\"\n style={{\n stroke: \"none\",\n strokeWidth: 1,\n strokeDasharray: \"none\",\n strokeLinecap: \"butt\",\n strokeLinejoin: \"miter\",\n strokeMiterlimit: 10,\n fill: \"currentColor\",\n fillRule: \"nonzero\",\n opacity: 1,\n }}\n transform=\" matrix(1 0 0 1 0 0) \"\n strokeLinecap=\"round\"\n />\n </g>\n )}\n </svg>\n </div>\n );\n}\n"],"names":["props","size","_a","_jsx","className","concat","isFilterTarget","isFilterActive","children","_jsxs","xmlns","xmlnsXlink","version","width","height","viewBox","xmlSpace","style","stroke","strokeWidth","strokeDasharray","strokeLinecap","strokeLinejoin","strokeMiterlimit","fill","fillRule","opacity","transform","d","jsx"],"mappings":"mEAMM,SAAqBA,SACnBC,EAAiB,QAAVC,EAAAF,EAAMC,YAAI,IAAAC,EAAAA,EAAI,GAC3B,OACEC,EAAAA,IACE,MAAA,CAAAC,UAAW,gBACTC,OAAAL,EAAMM,eACF,mBACAN,EAAMO,eACN,gBACA,iBAGNC,SAAAC,OAAA,MAAA,CACEC,MAAM,6BACNC,WAAW,+BACXC,QAAQ,MACRC,MAAO,UAAGZ,EAAI,MACda,OAAQ,GAAAT,OAAGJ,EAAQ,MACnBc,QAAQ,cACRC,SAAS,WAETR,SAAA,CAAAL,MAAA,OAAA,CAAA,GACCH,EAAMO,gBAAkBP,EAAMM,eAC7BH,MACE,IAAA,CAAAc,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,OACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,oEAEVnB,SAAAL,EAAAA,IAAA,OAAA,CACEyB,EAAE,4OACFX,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,eACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,wBACVN,cAAc,YAIlBlB,EAAA0B,IAAA,IAAA,CACEZ,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,OACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,oEAEVnB,SAAAL,EAAAA,IAAA,OAAA,CACEyB,EAAE,8hBACFX,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,eACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,wBACVN,cAAc,gBAO5B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("./filter/provider.js");var r=require("./filter/components.js"),t=require("./sheet/providers.js"),s=require("./sort/components.js");require("./sort/provider.js"),exports.TableHeaderElement=function(l){var i=t.useColumnContext(l.columnKey);return e.jsxs("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[i.label&&e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20",children:i.label})}),e.jsxs("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[e.jsx(s.SortButton,{columnKey:l.columnKey})
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("./filter/provider.js");var r=require("./filter/components.js"),t=require("./sheet/providers.js"),s=require("./sort/components.js");require("./sort/provider.js"),exports.TableHeaderElement=function(l){var i=t.useColumnContext(l.columnKey);return e.jsxs("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[i.label&&e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20",children:i.label})}),e.jsxs("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[!i.disableSort&&e.jsx(s.SortButton,{columnKey:l.columnKey}),!i.disableFilter&&e.jsx(r.TableFilter,{columnKey:l.columnKey})]})]})};
|
|
2
2
|
//# sourceMappingURL=header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["import { TableFilter } from \"./filter\";\nimport { useColumnContext } from \"./sheet\";\nimport { SortButton } from \"./sort\";\n\ntype TPropsTableHeader = {\n columnKey: string;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n const col = useColumnContext(props.columnKey);\n\n return (\n <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n {col.label && (\n <div className=\"px-2\">\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20`}\n >\n {col.label}\n </p>\n </div>\n )}\n\n <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n <SortButton columnKey={props.columnKey}
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["import { TableFilter } from \"./filter\";\nimport { useColumnContext } from \"./sheet\";\nimport { SortButton } from \"./sort\";\n\ntype TPropsTableHeader = {\n columnKey: string;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n const col = useColumnContext(props.columnKey);\n\n return (\n <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n {col.label && (\n <div className=\"px-2\">\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20`}\n >\n {col.label}\n </p>\n </div>\n )}\n\n <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n {!col.disableSort && <SortButton columnKey={props.columnKey} />}\n {!col.disableFilter && <TableFilter columnKey={props.columnKey} />}\n </div>\n </th>\n );\n}\n"],"names":["props","col","useColumnContext","columnKey","_jsxs","className","children","label","_jsx","jsx","jsxs","disableSort","SortButton","disableFilter","TableFilter"],"mappings":"qPAQM,SAA6BA,GACjC,IAAMC,EAAMC,EAAAA,iBAAiBF,EAAMG,WAEnC,OACEC,OAAA,KAAA,CAAIC,UAAW,8CAA6CC,SAAA,CACzDL,EAAIM,OACHC,MAAA,MAAA,CAAKH,UAAU,OACbC,SAAAE,EAAAC,IAAA,IAAA,CACEJ,UAAW,iFAAgFC,SAE1FL,EAAIM,UAKXH,EAAAM,KAAA,MAAA,CAAKL,UAAU,oEACZC,SAAA,EAACL,EAAIU,aAAeH,EAAAA,IAACI,EAAUA,WAAC,CAAAT,UAAWH,EAAMG,aAChDF,EAAIY,eAAiBL,EAACC,IAAAK,EAAWA,aAACX,UAAWH,EAAMG,iBAI7D"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import*as e from"react";var t=new Map,r=new WeakMap,n=0,i=void 0;function o(e){return Object.keys(e).sort().filter((t=>void 0!==e[t])).map((t=>{return`${t}_${"root"===t?(i=e.root,i?(r.has(i)||(n+=1,r.set(i,n.toString())),r.get(i)):"0"):e[t]}`;var i})).toString()}function s(e,r,n={},s=i){if(void 0===window.IntersectionObserver&&void 0!==s){const t=e.getBoundingClientRect();return r(s,{isIntersecting:s,target:e,intersectionRatio:"number"==typeof n.threshold?n.threshold:0,time:0,boundingClientRect:t,intersectionRect:t,rootBounds:t}),()=>{}}const{id:c,observer:a,elements:l}=function(e){const r=o(e);let n=t.get(r);if(!n){const i=new Map;let o;const s=new IntersectionObserver((t=>{t.forEach((t=>{var r;const n=t.isIntersecting&&o.some((e=>t.intersectionRatio>=e));e.trackVisibility&&void 0===t.isVisible&&(t.isVisible=n),null==(r=i.get(t.target))||r.forEach((e=>{e(n,t)}))}))}),e);o=s.thresholds||(Array.isArray(e.threshold)?e.threshold:[e.threshold||0]),n={id:r,observer:s,elements:i},t.set(r,n)}return n}(n),u=l.get(e)||[];return l.has(e)||l.set(e,u),u.push(r),a.observe(e),function(){u.splice(u.indexOf(r),1),0===u.length&&(l.delete(e),a.unobserve(e)),0===l.size&&(a.disconnect(),t.delete(c))}}function c({threshold:t,delay:r,trackVisibility:n,rootMargin:i,root:o,triggerOnce:c,skip:a,initialInView:l,fallbackInView:u,onChange:d}={}){var h;const[g,f]=e.useState(null),v=e.useRef(),[y,b]=e.useState({inView:!!l,entry:void 0});v.current=d,e.useEffect((()=>{if(a||!g)return;let e;return e=s(g,((t,r)=>{b({inView:t,entry:r}),v.current&&v.current(t,r),r.isIntersecting&&c&&e&&(e(),e=void 0)}),{root:o,rootMargin:i,threshold:t,trackVisibility:n,delay:r},u),()=>{e&&e()}}),[Array.isArray(t)?t.toString():t,g,o,i,c,a,n,u,r]);const w=null==(h=y.entry)?void 0:h.target,V=e.useRef();g||!w||c||a||V.current===w||(V.current=w,b({inView:!!l,entry:void 0}));const p=[f,y.inView,y.entry];return p.ref=p[0],p.inView=p[1],p.entry=p[2],p}export{s as observe,c as useInView};
|
|
3
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -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}from"react/jsx-runtime";import{useEffect as o}from"react";import{useTable as n}from"./hook.js";import{TableCell as l}from"./cell.js";import{TableHeaderElement as i}from"./header.js";import{PagenationProvider as a}from"./pagenation/providers.js";import{DisplayRange as c,Pagenation as d}from"./pagenation/components.js";import{FilterProvider as s,useFilterContext as m}from"./filter/provider.js";import{TableFilterRemoveButton as f,TableFilterForm as u}from"./filter/components.js";import"./sort/icon.js";import{SortProvider as p}from"./sort/provider.js";import{ColumnsProvider as h,RowProvider as v,CellProvider as y}from"./sheet/providers.js";import{FocusProvider as w,useFocusContext as g}from"./edit/provider.js";function k(t){var o;return r(s,{children:r(p,{initialCondition:null===(o=t.initialCondition)||void 0===o?void 0:o.sort,children:r(a,{rowCount:t.rows.length,children:r(h,{cols:t.cols,children:r(w,{columnCount:t.cols.length,children:r(b,e({},t))})})})})})}function b(e){var a=n(e),s=a.cols,p=a.rows,h=g(),w=h.isFocus,k=h.isEditing,b=h.edit,j=h.moveLeft,x=h.moveRight,N=h.moveUp,D=h.moveDown,C=h.unfocus,R=h.setMaxRowNumber,A=m().selectedFilterKey;return o((function(){var e=function(e){w&&!k&&("Enter"===e.key?(e.preventDefault(),D()):"Escape"===e.key?(e.preventDefault(),C()):"ArrowRight"===e.key?(e.preventDefault(),x()):"ArrowLeft"===e.key?(e.preventDefault(),j()):"ArrowUp"===e.key?(e.preventDefault(),N()):"ArrowDown"===e.key?(e.preventDefault(),D()):"F2"===e.key&&b())};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[k,w]),o((function(){R(p.length-1)}),[p.length]),t("div",{className:"w-full",children:[r("div",{className:"flex justify-end mb-1 mr-3",children:r(f,{children:r("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),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:s.map((function(e){return r(i,{columnKey:e.key},e.key)}))})}),t("tbody",{children:[!!A&&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(u,{})})}),0===p.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"})})}),p.map((function(t,o){return r(v,{row:t,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(e.onClickRow?"hover:cursor-pointer":""," ").concat(e.applyRowFormatting?e.applyRowFormatting(t):""),onClick:function(r){r.preventDefault(),e.onClickRow&&e.onClickRow(t)},"data-testid":t.id,children:s.map((function(e,t){return r(y,{columnKey:e.key,rowIndex:o,colIndex:t,children:r(l,{})},e.key)}))})},t.id)}))]})]})}),t("div",{className:"mt-1",children:[r(c,{}),r("div",{className:"mt-2",children:r(d,{})})]})]})}export{k as default};
|
|
2
|
+
import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{useEffect as o}from"react";import{useTable as n}from"./hook.js";import{TableCell as l}from"./cell.js";import{TableHeaderElement as i}from"./header.js";import{PagenationProvider as a}from"./pagenation/providers.js";import{DisplayRange as c,Pagenation as d}from"./pagenation/components.js";import{FilterProvider as s,useFilterContext as m}from"./filter/provider.js";import{TableFilterRemoveButton as f,TableFilterForm as u}from"./filter/components.js";import"./sort/icon.js";import{SortProvider as p}from"./sort/provider.js";import{ColumnsProvider as h,RowProvider as v,CellProvider as y}from"./sheet/providers.js";import{FocusProvider as w,useFocusContext as g}from"./edit/provider.js";function k(t){var o;return r(s,{children:r(p,{initialCondition:null===(o=t.initialCondition)||void 0===o?void 0:o.sort,children:r(a,{rowCount:t.rows.length,children:r(h,{cols:t.cols,children:r(w,{columnCount:t.cols.length,children:r(b,e({},t))})})})})})}function b(e){var a=n(e),s=a.cols,p=a.rows,h=g(),w=h.isFocus,k=h.isEditing,b=h.edit,j=h.moveLeft,x=h.moveRight,N=h.moveUp,D=h.moveDown,C=h.unfocus,R=h.setMaxRowNumber,A=m().selectedFilterKey;return o((function(){var e=function(e){w&&!k&&("Enter"===e.key?(e.preventDefault(),D()):"Escape"===e.key?(e.preventDefault(),C()):"ArrowRight"===e.key?(e.preventDefault(),x()):"ArrowLeft"===e.key?(e.preventDefault(),j()):"ArrowUp"===e.key?(e.preventDefault(),N()):"ArrowDown"===e.key?(e.preventDefault(),D()):"F2"===e.key&&b())};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[k,w]),o((function(){R(p.length-1)}),[p.length]),t("div",{className:"w-full",children:[r("div",{className:"flex justify-end mb-1 mr-3",children:r(f,{children:r("p",{className:"text-xs underline text-gray-500 hover:text-gray-700",children:"全てのフィルタリング条件を解除する"})})}),r("div",{id:"table-frame",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:s.map((function(e){return r(i,{columnKey:e.key},e.key)}))})}),t("tbody",{children:[!!A&&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(u,{})})}),0===p.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"})})}),p.map((function(t,o){return r(v,{row:t,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(e.onClickRow?"hover:cursor-pointer":""," ").concat(e.applyRowFormatting?e.applyRowFormatting(t):""),onClick:function(r){r.preventDefault(),e.onClickRow&&e.onClickRow(t)},"data-testid":t.id,children:s.map((function(e,t){return r(y,{columnKey:e.key,rowIndex:o,colIndex:t,children:r(l,{})},e.key)}))})},t.id)}))]})]})}),t("div",{className:"mt-1",children:[r(c,{}),r("div",{className:"mt-2",children:r(d,{})})]})]})}export{k as default};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as n,memo as r,useState as l}from"react";import{EditIcon as
|
|
2
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as n,memo as r,useRef as o,useEffect as i,useState as l}from"react";import{EditIcon as a}from"./edit-icon.js";import{CancelIcon as u}from"./cancel-icon.js";import{useCellContext as c,useRowContext as s,useColumnContext as f}from"./sheet/providers.js";import{useFocusContext as v}from"./edit/provider.js";import{useCell as d,useCellFocus as m}from"./hook.js";import{useInView as p}from"../../node_modules/react-intersection-observer/index.js";var g=n((function(n,r){return e("div",{className:"flex justify-between gap-1 w-full items-center",children:[t("input",{ref:r,className:"w-full py-1 px-2 bg-white text-gray-900",type:"text",value:n.value,onChange:n.onChange,onBlur:n.onBlur,onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(n.reset(),n.endEditing())}}),t("button",{onMouseDown:function(e){e.preventDefault(),n.reset(),n.endEditing()},children:t(u,{size:16})})]})}));function h(){var e=c(),n=f(e.columnKey),r=s(),o=v().finishEditing,i=m(),a=i.ref,u=i.callbackAfterBlur,d=l(r[e.columnKey]),p=d[0],h=d[1];if(!n.editable||"string"!==n.type)throw new Error("Invalid condition");return t(g,{ref:a,value:p,onChange:function(e){e.preventDefault(),h(e.target.value)},onBlur:function(t){t.preventDefault(),p!==r[e.columnKey]?!function(){var e,t,r;return(null===(e=n.constraints)||void 0===e?void 0:e.maxLength)&&p.length>n.constraints.maxLength?(alert("最大文字数(".concat(n.constraints.maxLength,")を超過しています。(現在").concat(p.length,"文字)")),!1):(null===(t=n.constraints)||void 0===t?void 0:t.minLength)&&p.length<n.constraints.minLength?(alert("最小文字数(".concat(n.constraints.minLength,")を下回っています。(現在").concat(p.length,"文字)")),!1):!((null===(r=n.constraints)||void 0===r?void 0:r.pattern)&&!new RegExp(n.constraints.pattern).test(p)&&(alert("パターンに一致しません。(パターン".concat(n.constraints.pattern,")")),1))}()?setTimeout((function(){t.target.focus()}),100):(n.onCellBlur(e.columnKey,p,r,o),u()):o()},reset:function(){return h(r[e.columnKey].toString())},endEditing:o})}function y(){var e=c(),n=f(e.columnKey),r=s(),o=v().finishEditing,i=m(),a=i.ref,u=i.callbackAfterBlur,d=l(e.value.toString()),p=d[0],h=d[1];if(!n.editable||"number"!==n.type)throw new Error("Invalid condition");return t(g,{ref:a,value:p,onChange:function(e){e.preventDefault(),""!==e.target.value?"-"!==e.target.value&&"0-"!==e.target.value?e.target.value.match(/^-?[0-9]+\.$/)?h(e.target.value):isNaN(Number(e.target.value))||h(Number(e.target.value).toString()):h("-0"):h("0")},onBlur:function(t){t.preventDefault(),Number(p)!==e.value?!function(){var e,t,r=parseInt(p);return(null===(e=n.constraints)||void 0===e?void 0:e.max)&&r>n.constraints.max?(alert("最大値(".concat(n.constraints.max,")を超過しています。(入力値:").concat(r,")")),!1):!((null===(t=n.constraints)||void 0===t?void 0:t.min)&&r<n.constraints.min&&(alert("最小値(".concat(n.constraints.min,")を下回っています。(入力値:").concat(r,")")),1))}()?setTimeout((function(){t.target.focus()}),100):(n.onCellBlur(e.columnKey,Number(p),r,o),u()):o()},reset:function(){return h(e.value.toString())},endEditing:o})}function b(){var n=c(),r=f(n.columnKey),o=s(),i=v().finishEditing,a=m(),d=a.ref,p=a.callbackAfterBlur,g=l(n.value),h=g[0],y=g[1];if(!r.editable||"select"!==r.type)throw new Error("Invalid condition");return e("div",{className:"flex justify-between gap-1 w-full items-center",children:[e("select",{ref:d,className:"w-full py-1 px-2 bg-white text-gray-900",value:h,onChange:function(e){e.preventDefault(),y(e.target.value)},onBlur:function(e){e.preventDefault(),h!==n.value?(r.onCellBlur(n.columnKey,h,o,i),p()):i()},onKeyDown:function(e){"Enter"===e.key&&e.preventDefault()},onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(y(n.value),i())},children:[r.allowEmpty&&t("option",{value:"",children:""==n.value?"-- 未選択 --":"-- 選択解除 --"},"TEPPEN/ReactUI Empty Option"),r.options.map((function(e){return t("option",{value:e.value,children:e.label},e.value)}))]}),t("button",{onMouseDown:function(e){e.preventDefault(),y(n.value),i()},children:t(u,{size:16})})]})}var x=r((function(){var e=c(),n=v().focusAndEdit;return t("button",{className:"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200",onClick:function(t){t.preventDefault(),n(e.rowIndex,e.colIndex)},children:t(a,{size:12})})}));function w(){var n=d(),r=n.cell,l=n.isFocus,a=n.isEditing,u=n.onClickCellToFocus,c=n.onDoubleClickCellToEdit,f=n.preventPropagation,v=s(),m=o(null),g=p({root:document.querySelector("#table-frame"),rootMargin:"-60px -30px -30px -30px",threshold:1}),w=g.inView,E=g.ref;return i((function(){var e;l&&!w&&m.current&&(null===(e=m.current)||void 0===e||e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}))}),[l,w,m]),t("td",{ref:E,className:"".concat(l?"outline outline-1 -outline-offset-1 outline-gray-400":""),children:e("div",{ref:m,className:"relative",children:[e("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default ".concat(l&&a?"opacity-0":""),onClick:u,children:[r.render?r.render(r.value,v):t("div",{onDoubleClick:c,children:t("p",{className:"text-left",children:r.label})}),r.editable&&t(x,{})]}),r.editable&&l&&a&&e("div",{className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:f,children:["string"===r.type&&t(h,{}),"number"===r.type&&t(y,{}),"select"===r.type&&t(b,{})]})]})})}export{w as TableCell};
|
|
3
3
|
//# sourceMappingURL=cell.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{FIlterIcon as n}from"./filter-icon.js";import{useFilterContext as r}from"./provider.js";import{useState as i,useEffect as a,useCallback as o}from"react";import{CancelIcon as c}from"../cancel-icon.js";import{FILTER_OPERATOR as u,STRING_FILTER_OPERATOR as s,NUMBER_FILTER_OPERATOR as d,SELECT_FILTER_OPERATOR as f}from"./constants.js";import{useColumnsContext as p,useColumnContext as v}from"../sheet/providers.js";function m(t){var i=v(t.columnKey),a=r(),o=a.filterConditions,c=a.setSelectedFilterKey;return i.label?e("div",{className:"relative cursor-pointer",onClick:function(e){e.preventDefault(),c(t.columnKey)},children:e(n,{isFilterActive:o.filter((function(e){return e.key===t.columnKey})).length>0})}):e(l,{})}function
|
|
2
|
+
import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{FIlterIcon as n}from"./filter-icon.js";import{useFilterContext as r}from"./provider.js";import{useState as i,useEffect as a,useCallback as o}from"react";import{CancelIcon as c}from"../cancel-icon.js";import{FILTER_OPERATOR as u,STRING_FILTER_OPERATOR as s,NUMBER_FILTER_OPERATOR as d,SELECT_FILTER_OPERATOR as f}from"./constants.js";import{useColumnsContext as p,useColumnContext as v}from"../sheet/providers.js";function m(t){var i=v(t.columnKey),a=r(),o=a.filterConditions,c=a.setSelectedFilterKey,u=a.selectedFilterKey;return i.label?e("div",{className:"relative cursor-pointer",onClick:function(e){e.preventDefault(),u===t.columnKey?c(null):c(t.columnKey)},children:e(n,{isFilterTarget:u===t.columnKey,isFilterActive:o.filter((function(e){return e.key===t.columnKey})).length>0})}):e(l,{})}function y(t){var l=t.children,n=r(),i=n.clearFilter;if(0!==n.filterConditions.length)return e("button",{onClick:function(e){e.preventDefault(),i()},children:l})}function h(t){var l=t.children,n=r(),i=n.removeFilter,a=n.filterConditions,o=n.selectedFilterKey;if(0!==a.filter((function(e){return e.key===o})).length){return e("button",{onClick:function(e){e.preventDefault(),a.filter((function(e){return e.key===o})).forEach((function(e){i(e.id)}))},children:l})}}function g(l){var n=l.value,i=l.onChange,a=r().selectedFilterKey,o=v(a);return t("select",{value:n,onChange:i,className:"px-2 py-1 rounded-md",children:[e("option",{value:"",children:a?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===o.type&&s.map((function(t){return e("option",{value:t.key,children:t.label},t.key)})),"number"===o.type&&d.map((function(t){return e("option",{value:t.key,children:t.label},t.key)})),"select"===o.type&&f.map((function(t){return e("option",{value:t.key,children:t.label},t.key)}))]})}function x(l){return t("select",{className:"w-full px-2 py-1 rounded-md min-w-32",value:l.value,onChange:function(e){e.preventDefault(),l.setValue(e.target.value)},children:[e("option",{value:"",children:"-- 未選択 --"}),l.options.map((function(t){return e("option",{value:t.value,children:t.label},t.value)}))]})}function b(t){return e("input",{className:"w-full px-2 py-1 rounded-md min-w-32",type:"text",value:t.value,onChange:function(e){e.preventDefault(),t.setValue(e.target.value)},placeholder:"-- 値を入力 --"})}function k(t){var l=r(),n=l.selectedFilterKey,i=l.addFilter,a=v(n);return e("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md text-nowrap",onClick:function(e){var l;e.preventDefault(),n&&t.selectingOperator&&("select"===a.type||t.value)?i("string"===a.type?{key:n,operator:t.selectingOperator,value:[t.value]}:"select"===a.type?{key:n,operator:t.selectingOperator,value:t.value,label:null===(l=a.options.find((function(e){return e.value===t.value})))||void 0===l?void 0:l.label}:{key:n,operator:t.selectingOperator,value:Number(t.value)}):alert("全ての項目を入力してください")},children:"追加"})}function N(){var l=p(),n=r(),s=n.removeFilter,d=n.filterConditions,f=n.selectedFilterKey,m=n.setSelectedFilterKey,y=i(""),N=y[0],w=y[1],C=i(""),F=C[0],K=C[1],D=v(f);a((function(){K(""),w("")}),[f]);var j=o((function(e){e.preventDefault,w(e.target.value)}),[]);return t("div",{className:"flex w-full max-h-[50vh] bg-gray-200",children:[e("ul",{className:"flex flex-col items-end min-w-16 md:w-[20%] max-h-full overflow-y-auto no_scrollbar bg-white",children:l.filter((function(e){return!!e.label&&!e.disableFilter})).map((function(l){return t("li",{className:"relative pl-2 pr-8 md:px-8 py-3 w-full cursor-pointer border-y border-gray-300 ".concat(f===l.key?"bg-gray-200":"hover:bg-gray-100"),onClick:function(e){e.preventDefault(),m(l.key)},children:[e("p",{className:"text-right text-nowrap ".concat(f===l.key?"underline underline-offset-2 decoration-2 decoration-neutral-500":""),children:l.label}),d.filter((function(e){return e.key===l.key})).length>0&&e("div",{className:"absolute top-1/2 right-1",children:e("div",{className:"-translate-y-1/2 rounded-full border border-gray-400 bg-gray-100 aspect-square w-5",children:e("p",{className:"text-xs text-center",children:d.filter((function(e){return e.key===l.key})).length})})})]},l.key)}))}),t("div",{className:"relative flex flex-col gap-4 ml-4 mr-4 md:ml-16 md:mr-auto py-5",children:[e("div",{className:"absolute top-5 right-0",children:e("button",{onClick:function(e){e.preventDefault(),m(null)},children:"閉じる"})}),e("p",{className:"font-bold text-xl",children:"フィルタリング条件"}),t("div",{className:"flex items-center gap-3 max-w-6xl",children:[t("p",{className:"text-gray-600 text-lg text-nowrap",children:["「",e("strong",{children:D.label}),"」 は"]}),e(g,{value:N,onChange:j}),"select"===D.type?e(x,{value:F,options:D.options,setValue:K}):e(b,{value:F,setValue:K}),e(k,{value:F,selectingOperator:N})]}),e("ul",{className:"flex flex-col gap-1 my-5 max-h-32 overflow-auto",children:d.filter((function(e){return e.key===f})).map((function(n){var r,i;return t("li",{className:"flex justify-between mr-5",children:[t("p",{children:["「",e("strong",{children:null===(r=l.find((function(e){return e.key===n.key})))||void 0===r?void 0:r.label}),"」 は",e("span",{children:null===(i=u.find((function(e){return e.key===n.operator})))||void 0===i?void 0:i.label}),"：",e("span",{children:n.label?n.label:n.value})]}),e("button",{onClick:function(e){e.preventDefault(),s(n.id)},children:e(c,{size:16})})]},n.id)}))}),e("div",{className:"flex justify-center",children:e(h,{children:t("p",{className:"text-xs text-gray-600 underline hover:text-gray-800",children:["「",D.label,"」のフィルタを全て解除"]})})})]})]})}export{m as TableFilter,N as TableFilterForm,y as TableFilterRemoveButton,h as TableSpecifyKeyFilterRemoveButton};
|
|
3
3
|
//# sourceMappingURL=components.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as t,jsxs as e}from"react/jsx-runtime";function r(r){var i,o=null!==(i=r.size)&&void 0!==i?i:16;return t("div",{className:"duration-300 ".concat(r.isFilterTarget?"text-neutral-500":r.isFilterActive?"text-gray-700":"text-gray-500"),children:e("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",version:"1.1",width:"".concat(o,"px"),height:"".concat(o,"px"),viewBox:"0 0 256 256",xmlSpace:"preserve",children:[t("defs",{}),r.isFilterActive||r.isFilterTarget?t("g",{style:{stroke:"none",strokeWidth:0,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"none",fillRule:"nonzero",opacity:1},transform:"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)",children:t("path",{d:"M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z",style:{stroke:"none",strokeWidth:1,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"currentColor",fillRule:"nonzero",opacity:1},transform:" matrix(1 0 0 1 0 0) ",strokeLinecap:"round"})}):t("g",{style:{stroke:"none",strokeWidth:0,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"none",fillRule:"nonzero",opacity:1},transform:"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)",children:t("path",{d:"M 37.882 90 c -0.338 0 -0.676 -0.086 -0.981 -0.258 c -0.629 -0.354 -1.019 -1.02 -1.019 -1.742 V 45.354 L 3.923 3.208 C 3.464 2.604 3.388 1.791 3.726 1.11 S 4.758 0 5.517 0 h 78.966 c 0.76 0 1.453 0.43 1.791 1.11 s 0.262 1.493 -0.197 2.098 L 54.118 45.354 V 79.37 c 0 0.699 -0.365 1.348 -0.963 1.71 l -14.237 8.63 C 38.601 89.903 38.241 90 37.882 90 z M 9.543 4 l 29.932 39.474 c 0.264 0.348 0.406 0.772 0.406 1.208 v 39.767 l 10.236 -6.205 V 44.682 c 0 -0.437 0.143 -0.861 0.406 -1.208 L 80.457 4 H 9.543 z M 52.118 79.37 h 0.01 H 52.118 z",style:{stroke:"none",strokeWidth:1,strokeDasharray:"none",strokeLinecap:"butt",strokeLinejoin:"miter",strokeMiterlimit:10,fill:"currentColor",fillRule:"nonzero",opacity:1},transform:" matrix(1 0 0 1 0 0) ",strokeLinecap:"round"})})]})})}export{r as FIlterIcon};
|
|
2
2
|
//# sourceMappingURL=filter-icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-icon.js","sources":["../../../../../src/table/filter/filter-icon.tsx"],"sourcesContent":["type TPropsFIlterIcon = {\n size?: number;\n isFilterActive?: boolean;\n};\n\nexport function FIlterIcon(props: TPropsFIlterIcon) {\n const size = props.size ?? 16;\n return (\n <div\n className={`duration-300 ${\n props.isFilterActive
|
|
1
|
+
{"version":3,"file":"filter-icon.js","sources":["../../../../../src/table/filter/filter-icon.tsx"],"sourcesContent":["type TPropsFIlterIcon = {\n size?: number;\n isFilterActive?: boolean;\n isFilterTarget?: boolean;\n};\n\nexport function FIlterIcon(props: TPropsFIlterIcon) {\n const size = props.size ?? 16;\n return (\n <div\n className={`duration-300 ${\n props.isFilterTarget\n ? \"text-neutral-500\"\n : props.isFilterActive\n ? \"text-gray-700\"\n : \"text-gray-500\"\n }`}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n version=\"1.1\"\n width={`${size}px`}\n height={`${size}px`}\n viewBox=\"0 0 256 256\"\n xmlSpace=\"preserve\"\n >\n <defs></defs>\n {props.isFilterActive || props.isFilterTarget ? (\n <g\n style={{\n stroke: \"none\",\n strokeWidth: 0,\n strokeDasharray: \"none\",\n strokeLinecap: \"butt\",\n strokeLinejoin: \"miter\",\n strokeMiterlimit: 10,\n fill: \"none\",\n fillRule: \"nonzero\",\n opacity: 1,\n }}\n transform=\"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)\"\n >\n <path\n d=\"M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z\"\n style={{\n stroke: \"none\",\n strokeWidth: 1,\n strokeDasharray: \"none\",\n strokeLinecap: \"butt\",\n strokeLinejoin: \"miter\",\n strokeMiterlimit: 10,\n fill: \"currentColor\",\n fillRule: \"nonzero\",\n opacity: 1,\n }}\n transform=\" matrix(1 0 0 1 0 0) \"\n strokeLinecap=\"round\"\n />\n </g>\n ) : (\n <g\n style={{\n stroke: \"none\",\n strokeWidth: 0,\n strokeDasharray: \"none\",\n strokeLinecap: \"butt\",\n strokeLinejoin: \"miter\",\n strokeMiterlimit: 10,\n fill: \"none\",\n fillRule: \"nonzero\",\n opacity: 1,\n }}\n transform=\"translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)\"\n >\n <path\n d=\"M 37.882 90 c -0.338 0 -0.676 -0.086 -0.981 -0.258 c -0.629 -0.354 -1.019 -1.02 -1.019 -1.742 V 45.354 L 3.923 3.208 C 3.464 2.604 3.388 1.791 3.726 1.11 S 4.758 0 5.517 0 h 78.966 c 0.76 0 1.453 0.43 1.791 1.11 s 0.262 1.493 -0.197 2.098 L 54.118 45.354 V 79.37 c 0 0.699 -0.365 1.348 -0.963 1.71 l -14.237 8.63 C 38.601 89.903 38.241 90 37.882 90 z M 9.543 4 l 29.932 39.474 c 0.264 0.348 0.406 0.772 0.406 1.208 v 39.767 l 10.236 -6.205 V 44.682 c 0 -0.437 0.143 -0.861 0.406 -1.208 L 80.457 4 H 9.543 z M 52.118 79.37 h 0.01 H 52.118 z\"\n style={{\n stroke: \"none\",\n strokeWidth: 1,\n strokeDasharray: \"none\",\n strokeLinecap: \"butt\",\n strokeLinejoin: \"miter\",\n strokeMiterlimit: 10,\n fill: \"currentColor\",\n fillRule: \"nonzero\",\n opacity: 1,\n }}\n transform=\" matrix(1 0 0 1 0 0) \"\n strokeLinecap=\"round\"\n />\n </g>\n )}\n </svg>\n </div>\n );\n}\n"],"names":["FIlterIcon","props","size","_a","_jsx","className","concat","isFilterTarget","isFilterActive","children","_jsxs","xmlns","xmlnsXlink","version","width","height","viewBox","xmlSpace","style","stroke","strokeWidth","strokeDasharray","strokeLinecap","strokeLinejoin","strokeMiterlimit","fill","fillRule","opacity","transform","d"],"mappings":"kDAMM,SAAUA,EAAWC,SACnBC,EAAiB,QAAVC,EAAAF,EAAMC,YAAI,IAAAC,EAAAA,EAAI,GAC3B,OACEC,EACE,MAAA,CAAAC,UAAW,gBACTC,OAAAL,EAAMM,eACF,mBACAN,EAAMO,eACN,gBACA,iBAGNC,SAAAC,EAAA,MAAA,CACEC,MAAM,6BACNC,WAAW,+BACXC,QAAQ,MACRC,MAAO,UAAGZ,EAAI,MACda,OAAQ,GAAAT,OAAGJ,EAAQ,MACnBc,QAAQ,cACRC,SAAS,WAETR,SAAA,CAAAL,EAAA,OAAA,CAAA,GACCH,EAAMO,gBAAkBP,EAAMM,eAC7BH,EACE,IAAA,CAAAc,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,OACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,oEAEVnB,SAAAL,EAAA,OAAA,CACEyB,EAAE,4OACFX,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,eACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,wBACVN,cAAc,YAIlBlB,EAAA,IAAA,CACEc,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,OACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,oEAEVnB,SAAAL,EAAA,OAAA,CACEyB,EAAE,8hBACFX,MAAO,CACLC,OAAQ,OACRC,YAAa,EACbC,gBAAiB,OACjBC,cAAe,OACfC,eAAgB,QAChBC,iBAAkB,GAClBC,KAAM,eACNC,SAAU,UACVC,QAAS,GAEXC,UAAU,wBACVN,cAAc,gBAO5B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import"./filter/provider.js";import{TableFilter as t}from"./filter/components.js";import{useColumnContext as o}from"./sheet/providers.js";import{SortButton as l}from"./sort/components.js";import"./sort/provider.js";function i(i){var s=o(i.columnKey);return e("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[s.label&&r("div",{className:"px-2",children:r("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20",children:s.label})}),e("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[r(l,{columnKey:i.columnKey})
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import"./filter/provider.js";import{TableFilter as t}from"./filter/components.js";import{useColumnContext as o}from"./sheet/providers.js";import{SortButton as l}from"./sort/components.js";import"./sort/provider.js";function i(i){var s=o(i.columnKey);return e("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[s.label&&r("div",{className:"px-2",children:r("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20",children:s.label})}),e("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[!s.disableSort&&r(l,{columnKey:i.columnKey}),!s.disableFilter&&r(t,{columnKey:i.columnKey})]})]})}export{i as TableHeaderElement};
|
|
2
2
|
//# sourceMappingURL=header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["import { TableFilter } from \"./filter\";\nimport { useColumnContext } from \"./sheet\";\nimport { SortButton } from \"./sort\";\n\ntype TPropsTableHeader = {\n columnKey: string;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n const col = useColumnContext(props.columnKey);\n\n return (\n <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n {col.label && (\n <div className=\"px-2\">\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20`}\n >\n {col.label}\n </p>\n </div>\n )}\n\n <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n <SortButton columnKey={props.columnKey}
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["import { TableFilter } from \"./filter\";\nimport { useColumnContext } from \"./sheet\";\nimport { SortButton } from \"./sort\";\n\ntype TPropsTableHeader = {\n columnKey: string;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n const col = useColumnContext(props.columnKey);\n\n return (\n <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n {col.label && (\n <div className=\"px-2\">\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[70%] min-w-20`}\n >\n {col.label}\n </p>\n </div>\n )}\n\n <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n {!col.disableSort && <SortButton columnKey={props.columnKey} />}\n {!col.disableFilter && <TableFilter columnKey={props.columnKey} />}\n </div>\n </th>\n );\n}\n"],"names":["TableHeaderElement","props","col","useColumnContext","columnKey","_jsxs","className","children","label","_jsx","disableSort","SortButton","disableFilter","TableFilter"],"mappings":"yQAQM,SAAUA,EAAmBC,GACjC,IAAMC,EAAMC,EAAiBF,EAAMG,WAEnC,OACEC,EAAA,KAAA,CAAIC,UAAW,8CAA6CC,SAAA,CACzDL,EAAIM,OACHC,EAAA,MAAA,CAAKH,UAAU,OACbC,SAAAE,EAAA,IAAA,CACEH,UAAW,iFAAgFC,SAE1FL,EAAIM,UAKXH,EAAA,MAAA,CAAKC,UAAU,oEACZC,SAAA,EAACL,EAAIQ,aAAeD,EAACE,EAAW,CAAAP,UAAWH,EAAMG,aAChDF,EAAIU,eAAiBH,EAACI,GAAYT,UAAWH,EAAMG,iBAI7D"}
|
package/dist/index.d.ts
CHANGED
|
@@ -49,6 +49,8 @@ type TCellEditingCondition<T extends DataRecord> = TStringCellEditingCondition<T
|
|
|
49
49
|
type TTableColumn<T extends DataRecord> = {
|
|
50
50
|
key: keyof T;
|
|
51
51
|
label?: string;
|
|
52
|
+
disableSort?: boolean;
|
|
53
|
+
disableFilter?: boolean;
|
|
52
54
|
} & TCellEditingCondition<T>;
|
|
53
55
|
type TailwindCssStyle = string;
|
|
54
56
|
type TPropsTable<T extends DataRecord> = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teppen/react-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "React UI Component",
|
|
5
5
|
"main": "dist/cjs/src/index.js",
|
|
6
6
|
"module": "dist/esm/src/index.js",
|
|
@@ -72,5 +72,8 @@
|
|
|
72
72
|
"front-end",
|
|
73
73
|
"ui",
|
|
74
74
|
"table"
|
|
75
|
-
]
|
|
75
|
+
],
|
|
76
|
+
"dependencies": {
|
|
77
|
+
"react-intersection-observer": "^9.10.3"
|
|
78
|
+
}
|
|
76
79
|
}
|