@teppen/react-ui 1.2.0 → 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/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/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/package.json +5 -2
|
@@ -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
|
|
@@ -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
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teppen/react-ui",
|
|
3
|
-
"version": "1.2.
|
|
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
|
}
|