@teppen/react-ui 0.7.0 → 0.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/src/table/base.js +1 -1
- package/dist/cjs/src/table/cell.js +1 -1
- package/dist/cjs/src/table/cell.js.map +1 -1
- package/dist/cjs/src/table/filter-form.js +1 -1
- package/dist/cjs/src/table/filter-form.js.map +1 -1
- package/dist/cjs/src/table/filter.js +1 -1
- package/dist/cjs/src/table/filter.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/src/table/base.js +1 -1
- package/dist/esm/src/table/cell.js +1 -1
- package/dist/esm/src/table/cell.js.map +1 -1
- package/dist/esm/src/table/filter-form.js +1 -1
- package/dist/esm/src/table/filter-form.js.map +1 -1
- package/dist/esm/src/table/filter.js +1 -1
- package/dist/esm/src/table/filter.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 +10 -10
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("./hook.js"),l=require("./cell.js"),s=require("./sort.js"),n=require("./header.js"),i=require("./page.js"),o=require("./filter.js"),a=require("react"),c=require("./filter-form.js");function d(d){var u=t.useTable(d),x=u.cols,j=u.rows,m=u.rowCount,h=u.sortKey,p=u.sortOrder,v=u.page,f=v.count,b=v.current,y=v.from,g=v.to,N=v.next,k=v.prev,C=v.jump,q=a.useState(!1),
|
|
2
|
+
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("./hook.js"),l=require("./cell.js"),s=require("./sort.js"),n=require("./header.js"),i=require("./page.js"),o=require("./filter.js"),a=require("react"),c=require("./filter-form.js");function d(d){var u=t.useTable(d),x=u.cols,j=u.rows,m=u.rowCount,h=u.sortKey,p=u.sortOrder,v=u.page,f=v.count,b=v.current,y=v.from,g=v.to,N=v.next,k=v.prev,C=v.jump,q=a.useState(!1),w=q[0],T=q[1];return r.jsxs("div",{className:"w-full",children:[r.jsx("div",{className:"flex justify-end",children:r.jsx(o.TableFilterRemoveButton,{children:"remove all filters"})}),r.jsx("div",{className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:r.jsxs("table",{className:"table table-auto w-full",children:[r.jsx("thead",{children:r.jsx("tr",{className:"sticky top-0 border-gray-200 z-20",children:x.map((function(e){return r.jsx(n.TableHeaderElement,{label:e.label,sortConponent:"component"!==e.type?r.jsx(s.Sort,{onClick:e.onClick,isSortedByThis:h===e.key,sortOrder:p}):void 0,filterComponent:"component"!==e.type?r.jsx(o.TableFilter,{keyName:e.key,onClick:function(e){e.preventDefault(),T((function(e){return!e}))}}):void 0},e.key)}))})}),r.jsxs("tbody",{children:[w&&r.jsx("tr",{children:r.jsx("td",{colSpan:x.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl py-5 px-2 z-20",children:r.jsx("div",{className:"container max-w-[768px] mx-auto",children:r.jsxs("div",{className:"relative",children:[r.jsx("div",{className:"absolute top-0 right-0",children:r.jsx("button",{onClick:function(e){e.preventDefault(),T(!1)},children:"close"})}),r.jsx("div",{children:r.jsx(c.TableFilterForm,{cols:x})})]})})})}),0===j.length&&r.jsx("tr",{children:r.jsx("td",{colSpan:x.length,className:"py-5",children:r.jsx("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),j.map((function(t){var s;return r.jsx("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(s=j[0])||void 0===s?void 0:s.onClick)?"hover:cursor-pointer":""),onClick:t.onClick,"data-testid":t.id,children:x.map((function(s){return r.jsx(l.TableCell,e.__assign({},s,{columnKey:s.key,currentRecord:t,children:t[s.key]}))}))},t.id)}))]})]})}),r.jsxs("div",{className:"mt-1",children:[r.jsxs("p",{className:"text-center text-sm text-gray-600",children:[y+1," - ",g<m?g:m," of ",m]}),r.jsx("div",{className:"mt-2",children:r.jsx(i.Pagenation,{count:f,current:b,jump:C,next:N,prev:k})})]})]})}module.exports=function(t){return r.jsx(o.TableFilterProvider,{children:r.jsx(d,e.__assign({},t))})};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),n=require("react"),t=require("./edit-icon.js"),r=require("./cancel-icon.js"),c=n.forwardRef((function(n,t){return e.jsxs("div",{className:"flex justify-between gap-1 w-full items-center",children:[e.jsx("input",{ref:t,className:"w-full py-1 px-2",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())}}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),n.reset(),n.endEditing()},children:e.jsx(r.CancelIcon,{size:16})})]})}))
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),n=require("react"),t=require("./edit-icon.js"),r=require("./cancel-icon.js"),c=n.forwardRef((function(n,t){return e.jsxs("div",{className:"flex justify-between gap-1 w-full items-center",children:[e.jsx("input",{ref:t,className:"w-full py-1 px-2",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())}}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),n.reset(),n.endEditing()},children:e.jsx(r.CancelIcon,{size:16})})]})}));function l(t){var r=n.useState(t.currentRecord[t.columnKey]),l=r[0],o=r[1];return e.jsx(c,{ref:t.currentRef,value:l,onChange:function(e){e.preventDefault(),o(e.target.value)},onBlur:function(e){e.preventDefault(),l!==t.currentRecord[t.columnKey]?!function(){var e,n,r;return(null===(e=t.constraints)||void 0===e?void 0:e.maxLength)&&l.length>t.constraints.maxLength?(alert("最大文字数(".concat(t.constraints.maxLength,")を超過しています。(現在").concat(l.length,"文字)")),!1):(null===(n=t.constraints)||void 0===n?void 0:n.minLength)&&l.length<t.constraints.minLength?(alert("最小文字数(".concat(t.constraints.minLength,")を下回っています。(現在").concat(l.length,"文字)")),!1):!((null===(r=t.constraints)||void 0===r?void 0:r.pattern)&&!new RegExp(t.constraints.pattern).test(l)&&(alert("パターンに一致しません。(パターン".concat(t.constraints.pattern,")")),1))}()?setTimeout((function(){e.target.focus()}),100):(t.onCellBlur(t.columnKey,l,t.currentRecord,t.compEditing),t.setOccurredOnCellBlur()):t.compEditing()},reset:function(){return o(t.currentRecord[t.columnKey])},endEditing:t.compEditing})}function o(t){var r=n.useState(t.currentRecord[t.columnKey].toString()),l=r[0],o=r[1];return e.jsx(c,{ref:t.currentRef,value:l,onChange:function(e){e.preventDefault(),""!==e.target.value?"-"!==e.target.value&&"0-"!==e.target.value?e.target.value.match(/^-?[0-9]+\.$/)?o(e.target.value):isNaN(Number(e.target.value))||o(Number(e.target.value).toString()):o("-0"):o("0")},onBlur:function(e){e.preventDefault(),Number(l)!==t.currentRecord[t.columnKey]?!function(){var e,n,r=parseInt(l);return(null===(e=t.constraints)||void 0===e?void 0:e.max)&&r>t.constraints.max?(alert("最大値(".concat(t.constraints.max,")を超過しています。(入力値:").concat(r,")")),!1):!((null===(n=t.constraints)||void 0===n?void 0:n.min)&&r<t.constraints.min&&(alert("最小値(".concat(t.constraints.min,")を下回っています。(入力値:").concat(r,")")),1))}()?setTimeout((function(){e.target.focus()}),100):(t.onCellBlur(t.columnKey,Number(l),t.currentRecord,t.compEditing),t.setOccurredOnCellBlur()):t.compEditing()},reset:function(){return o(t.currentRecord[t.columnKey].toString())},endEditing:t.compEditing})}function u(t){var c=n.useState(t.currentRecord[t.columnKey]),l=c[0],o=c[1];return e.jsxs("div",{className:"flex justify-between gap-1 w-full items-center",children:[e.jsxs("select",{ref:t.currentRef,className:"w-full py-1 px-2",value:l,onChange:function(e){e.preventDefault(),o(e.target.value)},onBlur:function(e){e.preventDefault(),t.onCellBlur(t.columnKey,l,t.currentRecord,t.compEditing),t.setOccurredOnCellBlur()},onKeyDown:function(e){"Enter"===e.key&&e.preventDefault()},onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(o(t.currentRecord[t.columnKey]),t.compEditing())},children:[t.allowEmpty&&e.jsx("option",{value:"",children:""==t.currentRecord[t.columnKey]?"-- 未選択 --":"-- 選択解除 --"},"TEPPEN/ReactUI Empty Option"),t.options.map((function(n){return e.jsx("option",{value:n.value,children:n.label},n.value)}))]}),e.jsx("button",{onMouseDown:function(e){e.preventDefault(),o(t.currentRecord[t.columnKey]),t.compEditing()},children:e.jsx(r.CancelIcon,{size:16})})]})}var i=n.memo((function(r){var c,i=n.useState(!1),a=i[0],s=i[1],d=n.useRef(null),f=n.useState(!1),p=f[0],m=f[1],v=n.useCallback((function(){s(!1)}),[s]);return n.useEffect((function(){var e;a&&(null===(e=d.current)||void 0===e||e.focus()),m(!1)}),[a,p]),e.jsx("td",{children:e.jsxs("div",{className:"relative",children:[e.jsxs("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default ".concat(a?"opacity-0":""),onClick:function(e){e.preventDefault(),e.stopPropagation()},children:["component"===r.type?r.children:e.jsx("div",{onDoubleClick:function(e){e.preventDefault(),r.editable&&s(!0)},children:e.jsx("p",{className:"text-left",children:"select"===r.type?null===(c=r.options.find((function(e){return e.value===r.children})))||void 0===c?void 0:c.label:r.children})}),r.editable&&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.editable&&s(!0)},children:e.jsx(t.EditIcon,{size:12})})]}),r.editable&&a&&e.jsxs("div",{className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:function(e){e.preventDefault(),e.stopPropagation()},children:["string"===r.type&&e.jsx(l,{currentRef:d,columnKey:r.columnKey,currentRecord:r.currentRecord,compEditing:v,onCellBlur:r.onCellBlur,constraints:r.constraints,setOccurredOnCellBlur:function(){m(!0)}}),"number"===r.type&&e.jsx(o,{currentRef:d,columnKey:r.columnKey,currentRecord:r.currentRecord,compEditing:v,onCellBlur:r.onCellBlur,constraints:r.constraints,setOccurredOnCellBlur:function(){m(!0)}}),"select"===r.type&&e.jsx(u,{currentRef:d,columnKey:r.columnKey,currentRecord:r.currentRecord,compEditing:v,options:r.options,allowEmpty:r.allowEmpty,onCellBlur:r.onCellBlur,setOccurredOnCellBlur:function(){m(!0)}})]})]})})}));exports.TableCell=i;
|
|
2
2
|
//# sourceMappingURL=cell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cell.js","sources":["../../../../src/table/cell.tsx"],"sourcesContent":["import {\n memo,\n useEffect,\n useRef,\n useState,\n forwardRef,\n useCallback,\n} from \"react\";\nimport { DataObject, TCellEditingCondition } from \"./type\";\nimport { EditIcon } from \"./edit-icon\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsCell = {\n currentRecord: DataObject;\n columnKey: string;\n children: string | number;\n} & TCellEditingCondition;\n\nconst CellInput = forwardRef(function CI<T extends string | number>(\n props: {\n value: T;\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;\n reset: () => void;\n endEditing: () => void;\n },\n ref: React.ForwardedRef<HTMLInputElement>\n) {\n return (\n <div className=\"flex justify-between gap-1 w-full items-center\">\n <input\n ref={ref}\n className=\"w-full py-1 px-2\"\n type=\"text\"\n value={props.value}\n onChange={props.onChange}\n onBlur={props.onBlur}\n onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n if (e.key === \"Enter\") {\n (e.target as HTMLInputElement).blur();\n } else if (e.key === \"Escape\") {\n props.reset();\n props.endEditing();\n }\n }}\n />\n <button\n onMouseDown={(e) => {\n e.preventDefault();\n props.reset();\n props.endEditing();\n }}\n >\n <CancelIcon size={16} />\n </button>\n </div>\n );\n});\n\nconst StringCellInput = forwardRef(function SI(\n props: {\n columnKey: string;\n currentRecord: DataObject;\n compEditing: () => void;\n onCellBlur: (\n key: string,\n value: string,\n current: DataObject,\n completeEditing: () => void\n ) => void;\n constraints?: { maxLength?: number; minLength?: number; pattern?: string };\n setOccurredOnCellBlur: () => void;\n },\n ref: React.ForwardedRef<HTMLInputElement>\n) {\n const [value, setValue] = useState(\n props.currentRecord[props.columnKey] as string\n );\n\n const validate = () => {\n if (props.constraints?.maxLength) {\n if (value.length > props.constraints.maxLength) {\n alert(\n `最大文字数(${props.constraints.maxLength})を超過しています。(現在${value.length}文字)`\n );\n return false;\n }\n }\n if (props.constraints?.minLength) {\n if (value.length < props.constraints.minLength) {\n alert(\n `最小文字数(${props.constraints.minLength})を下回っています。(現在${value.length}文字)`\n );\n return false;\n }\n }\n if (props.constraints?.pattern) {\n if (!new RegExp(props.constraints.pattern).test(value)) {\n alert(`パターンに一致しません。(パターン${props.constraints.pattern})`);\n return false;\n }\n }\n return true;\n };\n\n return (\n <CellInput\n ref={ref}\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n if (value === props.currentRecord[props.columnKey]) {\n props.compEditing();\n return;\n }\n\n if (!validate()) {\n setTimeout(() => {\n e.target.focus();\n }, 100);\n return;\n }\n\n props.onCellBlur(\n props.columnKey,\n value,\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n reset={() => setValue(props.currentRecord[props.columnKey])}\n endEditing={props.compEditing}\n />\n );\n});\n\nconst NumberCellInput = forwardRef(function SI(\n props: {\n columnKey: string;\n currentRecord: DataObject;\n compEditing: () => void;\n onCellBlur: (\n key: string,\n value: number,\n current: DataObject,\n completeEditing: () => void\n ) => void;\n constraints?: { max?: number; min?: number };\n setOccurredOnCellBlur: () => void;\n },\n ref: React.ForwardedRef<HTMLInputElement>\n) {\n const [value, setValue] = useState(\n (props.currentRecord[props.columnKey] as number).toString()\n );\n\n const validate = () => {\n const v = parseInt(value);\n\n if (props.constraints?.max) {\n if (v > props.constraints.max) {\n alert(\n `最大値(${props.constraints.max})を超過しています。(入力値:${v})`\n );\n return false;\n }\n }\n\n if (props.constraints?.min) {\n if (v < props.constraints.min) {\n alert(\n `最小値(${props.constraints.min})を下回っています。(入力値:${v})`\n );\n return false;\n }\n }\n\n return true;\n };\n\n return (\n <CellInput\n ref={ref}\n value={value}\n onChange={(e) => {\n e.preventDefault();\n\n if (e.target.value === \"\") {\n setValue(\"0\");\n return;\n }\n\n if (e.target.value === \"-\" || e.target.value === \"0-\") {\n setValue(\"-0\");\n return;\n }\n\n if (e.target.value.match(/^-?[0-9]+\\.$/)) {\n setValue(e.target.value);\n return;\n }\n\n if (isNaN(Number(e.target.value))) {\n return;\n }\n\n setValue(Number(e.target.value).toString());\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n if (Number(value) === props.currentRecord[props.columnKey]) {\n props.compEditing();\n return;\n }\n\n if (!validate()) {\n setTimeout(() => {\n e.target.focus();\n }, 100);\n return;\n }\n\n props.onCellBlur(\n props.columnKey,\n Number(value),\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n reset={() =>\n setValue((props.currentRecord[props.columnKey] as number).toString())\n }\n endEditing={props.compEditing}\n />\n );\n});\n\nconst SelectCellInput = forwardRef(function SI(\n props: {\n columnKey: string;\n currentRecord: DataObject;\n compEditing: () => void;\n options: { value: string; label: string }[];\n allowEmpty?: boolean;\n onCellBlur: (\n key: string,\n value: string,\n current: DataObject,\n completeEditing: () => void\n ) => void;\n setOccurredOnCellBlur: () => void;\n },\n ref: React.ForwardedRef<HTMLSelectElement>\n) {\n const [value, setValue] = useState(\n props.currentRecord[props.columnKey] as string\n );\n\n return (\n <div className=\"flex justify-between gap-1 w-full items-center\">\n <select\n ref={ref}\n className=\"w-full py-1 px-2\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n props.onCellBlur(\n props.columnKey,\n value,\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n onKeyDown={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n }\n }}\n onKeyUp={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n e.preventDefault();\n if (e.key === \"Enter\") {\n (e.target as HTMLSelectElement).blur();\n } else if (e.key === \"Escape\") {\n setValue(props.currentRecord[props.columnKey] as string);\n props.compEditing();\n }\n }}\n >\n {props.allowEmpty && (\n <option key=\"TEPPEN/ReactUI Empty Option\" value=\"\">\n {props.currentRecord[props.columnKey] == \"\"\n ? \"-- 未選択 --\"\n : \"-- 選択解除 --\"}\n </option>\n )}\n {props.options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <button\n onMouseDown={(e) => {\n e.preventDefault();\n setValue(props.currentRecord[props.columnKey] as string);\n props.compEditing();\n }}\n >\n <CancelIcon size={16} />\n </button>\n </div>\n );\n});\n\nexport const TableCell = memo(function TC(props: TPropsCell) {\n const [isEditing, setIsEditing] = useState(false);\n const ref = useRef<HTMLElement>(null);\n const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n const compEditing = useCallback(() => {\n setIsEditing(false);\n }, [setIsEditing]);\n\n useEffect(() => {\n if (isEditing) {\n ref.current?.focus();\n }\n setOccurredOnCellBlur(false);\n }, [isEditing, occurredOnCellBlur]);\n\n return (\n <td>\n <div className=\"relative\">\n <div\n className={`flex items-center gap-3 w-fit p-2 cursor-default ${\n isEditing ? \"opacity-0\" : \"\"\n }`}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n {props.type === \"component\" ? (\n props.children\n ) : (\n <div\n onDoubleClick={(e) => {\n e.preventDefault();\n if (props.editable) {\n setIsEditing(true);\n }\n }}\n >\n <p className=\"text-left\">\n {props.type === \"select\"\n ? props.options.find((op) => op.value === props.children)\n ?.label\n : props.children}\n </p>\n </div>\n )}\n\n {props.editable && (\n <button\n className=\"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200\"\n onClick={(e) => {\n e.preventDefault();\n if (props.editable) {\n setIsEditing(true);\n }\n }}\n >\n <EditIcon size={12} />\n </button>\n )}\n </div>\n {props.editable && isEditing && (\n <div\n className=\"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n {props.type === \"string\" && (\n <StringCellInput\n ref={ref as React.RefObject<HTMLInputElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n onCellBlur={props.onCellBlur}\n constraints={props.constraints}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n {props.type === \"number\" && (\n <NumberCellInput\n ref={ref as React.RefObject<HTMLInputElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n onCellBlur={props.onCellBlur}\n constraints={props.constraints}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n {props.type === \"select\" && (\n <SelectCellInput\n ref={ref as React.RefObject<HTMLSelectElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n options={props.options}\n allowEmpty={props.allowEmpty}\n onCellBlur={props.onCellBlur}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n </div>\n )}\n </div>\n </td>\n );\n});\n"],"names":["CellInput","forwardRef","props","ref","_jsxs","jsxs","className","children","_jsx","type","value","onChange","onBlur","onKeyUp","e","preventDefault","key","target","blur","reset","endEditing","onMouseDown","CancelIcon","size","StringCellInput","_a","useState","currentRecord","columnKey","setValue","jsx","constraints","maxLength","length","alert","concat","_b","minLength","_c","pattern","RegExp","test","validate","setTimeout","focus","onCellBlur","compEditing","setOccurredOnCellBlur","NumberCellInput","toString","match","isNaN","Number","v","parseInt","max","min","SelectCellInput","onKeyDown","allowEmpty","options","map","option","label","TableCell","memo","isEditing","setIsEditing","useRef","occurredOnCellBlur","useCallback","useEffect","current","onClick","stopPropagation","onDoubleClick","editable","find","op","EditIcon"],"mappings":"6HAkBMA,EAAYC,EAAAA,YAAW,SAC3BC,EAOAC,GAEA,OACEC,EAAKC,KAAA,MAAA,CAAAC,UAAU,iDAAgDC,SAAA,CAC7DC,eACEL,IAAKA,EACLG,UAAU,mBACVG,KAAK,OACLC,MAAOR,EAAMQ,MACbC,SAAUT,EAAMS,SAChBC,OAAQV,EAAMU,OACdC,QAAS,SAACC,GACRA,EAAEC,iBACY,UAAVD,EAAEE,IACHF,EAAEG,OAA4BC,OACZ,WAAVJ,EAAEE,MACXd,EAAMiB,QACNjB,EAAMkB,aAEV,IAEFZ,EAAAA,IAAA,SAAA,CACEa,YAAa,SAACP,GACZA,EAAEC,iBACFb,EAAMiB,QACNjB,EAAMkB,cACPb,SAEDC,MAACc,EAAAA,WAAW,CAAAC,KAAM,SAI1B,IAEMC,EAAkBvB,EAAAA,YAAW,SACjCC,EAaAC,GAEM,IAAAsB,EAAoBC,EAAAA,SACxBxB,EAAMyB,cAAczB,EAAM0B,YADrBlB,OAAOmB,OA8Bd,OACErB,EAAAsB,IAAC9B,EAAS,CACRG,IAAKA,EACLO,MAAOA,EACPC,SAAU,SAACG,GACTA,EAAEC,iBACFc,EAASf,EAAEG,OAAOP,MACpB,EACAE,OAAQ,SAACE,GACPA,EAAEC,iBAEEL,IAAUR,EAAMyB,cAAczB,EAAM0B,YArC7B,qBACf,OAAuB,UAAnB1B,EAAM6B,mBAAa,IAAAN,OAAA,EAAAA,EAAAO,YACjBtB,EAAMuB,OAAS/B,EAAM6B,YAAYC,WACnCE,MACE,SAAAC,OAASjC,EAAM6B,YAAYC,UAAS,iBAAAG,OAAgBzB,EAAMuB,OAAM,SAE3D,IAGY,UAAnB/B,EAAM6B,mBAAa,IAAAK,OAAA,EAAAA,EAAAC,YACjB3B,EAAMuB,OAAS/B,EAAM6B,YAAYM,WACnCH,MACE,SAAAC,OAASjC,EAAM6B,YAAYM,UAAS,iBAAAF,OAAgBzB,EAAMuB,OAAM,SAE3D,MAGY,UAAnB/B,EAAM6B,mBAAa,IAAAO,OAAA,EAAAA,EAAAC,WAChB,IAAIC,OAAOtC,EAAM6B,YAAYQ,SAASE,KAAK/B,KAC9CwB,MAAM,2BAAoBhC,EAAM6B,YAAYQ,QAAU,MAC/C,GAIb,CAkBWG,GACHC,YAAW,WACT7B,EAAEG,OAAO2B,OACV,GAAE,MAIL1C,EAAM2C,WACJ3C,EAAM0B,UACNlB,EACAR,EAAMyB,cACNzB,EAAM4C,aAGR5C,EAAM6C,yBAlBJ7C,EAAM4C,aAmBT,EACD3B,MAAO,WAAM,OAAAU,EAAS3B,EAAMyB,cAAczB,EAAM0B,WAAnC,EACbR,WAAYlB,EAAM4C,aAGxB,IAEME,EAAkB/C,EAAAA,YAAW,SACjCC,EAaAC,GAEM,IAAAsB,EAAoBC,EAAAA,SACvBxB,EAAMyB,cAAczB,EAAM0B,WAAsBqB,YAD5CvC,EAAKe,EAAA,GAAEI,EAAQJ,EAAA,GA4BtB,OACEjB,EAAAsB,IAAC9B,EAAS,CACRG,IAAKA,EACLO,MAAOA,EACPC,SAAU,SAACG,GACTA,EAAEC,iBAEqB,KAAnBD,EAAEG,OAAOP,MAKU,MAAnBI,EAAEG,OAAOP,OAAoC,OAAnBI,EAAEG,OAAOP,MAKnCI,EAAEG,OAAOP,MAAMwC,MAAM,gBACvBrB,EAASf,EAAEG,OAAOP,OAIhByC,MAAMC,OAAOtC,EAAEG,OAAOP,SAI1BmB,EAASuB,OAAOtC,EAAEG,OAAOP,OAAOuC,YAb9BpB,EAAS,MALTA,EAAS,IAmBb,EACAjB,OAAQ,SAACE,GACPA,EAAEC,iBAEEqC,OAAO1C,KAAWR,EAAMyB,cAAczB,EAAM0B,YAvDrC,mBACTyB,EAAIC,SAAS5C,GAEnB,OAAuB,UAAnBR,EAAM6B,mBAAa,IAAAN,OAAA,EAAAA,EAAA8B,MACjBF,EAAInD,EAAM6B,YAAYwB,KACxBrB,MACE,OAAOC,OAAAjC,EAAM6B,YAAYwB,IAAqB,mBAAApB,OAAAkB,EAAI,OAE7C,MAIY,UAAnBnD,EAAM6B,mBAAa,IAAAK,OAAA,EAAAA,EAAAoB,MACjBH,EAAInD,EAAM6B,YAAYyB,MACxBtB,MACE,OAAOC,OAAAjC,EAAM6B,YAAYyB,IAAqB,mBAAArB,OAAAkB,EAAI,MAE7C,GAKb,CAsCWX,GACHC,YAAW,WACT7B,EAAEG,OAAO2B,OACV,GAAE,MAIL1C,EAAM2C,WACJ3C,EAAM0B,UACNwB,OAAO1C,GACPR,EAAMyB,cACNzB,EAAM4C,aAGR5C,EAAM6C,yBAlBJ7C,EAAM4C,aAmBT,EACD3B,MAAO,WACL,OAAAU,EAAU3B,EAAMyB,cAAczB,EAAM0B,WAAsBqB,WAAW,EAEvE7B,WAAYlB,EAAM4C,aAGxB,IAEMW,EAAkBxD,EAAAA,YAAW,SACjCC,EAcAC,GAEM,IAAAsB,EAAoBC,EAAAA,SACxBxB,EAAMyB,cAAczB,EAAM0B,YADrBlB,OAAOmB,OAId,OACEzB,EAAAA,YAAKE,UAAU,iDACbC,SAAA,CAAAH,EAAAA,KAAA,SAAA,CACED,IAAKA,EACLG,UAAU,mBACVI,MAAOA,EACPC,SAAU,SAACG,GACTA,EAAEC,iBACFc,EAASf,EAAEG,OAAOP,MACpB,EACAE,OAAQ,SAACE,GACPA,EAAEC,iBAEFb,EAAM2C,WACJ3C,EAAM0B,UACNlB,EACAR,EAAMyB,cACNzB,EAAM4C,aAGR5C,EAAM6C,uBACR,EACAW,UAAW,SAAC5C,GACI,UAAVA,EAAEE,KACJF,EAAEC,gBAEN,EACAF,QAAS,SAACC,GACRA,EAAEC,iBACY,UAAVD,EAAEE,IACHF,EAAEG,OAA6BC,OACb,WAAVJ,EAAEE,MACXa,EAAS3B,EAAMyB,cAAczB,EAAM0B,YACnC1B,EAAM4C,gBAETvC,SAAA,CAEAL,EAAMyD,YACLnD,EAAAsB,IAAA,SAAA,CAA0CpB,MAAM,YACL,IAAxCR,EAAMyB,cAAczB,EAAM0B,WACvB,YACA,cAHM,+BAMb1B,EAAM0D,QAAQC,KAAI,SAACC,GAAW,OAC7BtD,gBAA2BE,MAAOoD,EAAOpD,eACtCoD,EAAOC,OADGD,EAAOpD,MAGrB,OAEHF,EAAAA,cACEa,YAAa,SAACP,GACZA,EAAEC,iBACFc,EAAS3B,EAAMyB,cAAczB,EAAM0B,YACnC1B,EAAM4C,eACPvC,SAEDC,MAACc,EAAAA,WAAW,CAAAC,KAAM,SAI1B,IAEayC,EAAYC,EAAIA,MAAC,SAAY/D,SAClCkC,EAA4BV,EAAAA,UAAS,GAApCwC,EAAS9B,EAAA,GAAE+B,EAAY/B,EAAA,GACxBjC,EAAMiE,SAAoB,MAC1B9B,EAA8CZ,EAAAA,UAAS,GAAtD2C,EAAkB/B,EAAA,GAAES,EAAqBT,EAAA,GAE1CQ,EAAcwB,EAAAA,aAAY,WAC9BH,GAAa,EACf,GAAG,CAACA,IASJ,OAPAI,EAAAA,WAAU,iBACJL,IACW,QAAbzC,EAAAtB,EAAIqE,eAAS,IAAA/C,GAAAA,EAAAmB,SAEfG,GAAsB,EACxB,GAAG,CAACmB,EAAWG,IAGb7D,EACEsB,IAAA,KAAA,CAAAvB,SAAAH,EAAAA,KAAA,MAAA,CAAKE,UAAU,WACbC,SAAA,CAAAH,EAAAA,KAAA,MAAA,CACEE,UAAW,oDACT6B,OAAA+B,EAAY,YAAc,IAE5BO,QAAS,SAAC3D,GACRA,EAAEC,iBACFD,EAAE4D,iBACH,EAAAnE,SAAA,CAEe,cAAfL,EAAMO,KACLP,EAAc,SAEdM,EACEsB,IAAA,MAAA,CAAA6C,cAAe,SAAC7D,GACdA,EAAEC,iBACEb,EAAM0E,UACRT,GAAa,IAEhB5D,SAEDC,MAAG,IAAA,CAAAF,UAAU,qBACK,WAAfJ,EAAMO,KACoD,UAAvDP,EAAM0D,QAAQiB,MAAK,SAACC,GAAO,OAAAA,EAAGpE,QAAUR,EAAMK,QAAnB,WAA4B,IAAAkB,OAAA,EAAAA,EACnDsC,MACJ7D,EAAMK,aAKfL,EAAM0E,UACLpE,gBACEF,UAAU,+DACVmE,QAAS,SAAC3D,GACRA,EAAEC,iBACEb,EAAM0E,UACRT,GAAa,IAEhB5D,SAEDC,EAACsB,IAAAiD,WAAS,CAAAxD,KAAM,UAIrBrB,EAAM0E,UAAYV,GACjB9D,EAAAA,KACE,MAAA,CAAAE,UAAU,wEACVmE,QAAS,SAAC3D,GACRA,EAAEC,iBACFD,EAAE4D,iBACH,EAAAnE,SAAA,CAEe,WAAfL,EAAMO,MACLD,EAAAA,IAACgB,GACCrB,IAAKA,EACLyB,UAAW1B,EAAM0B,UACjBD,cAAezB,EAAMyB,cACrBmB,YAAaA,EACbD,WAAY3C,EAAM2C,WAClBd,YAAa7B,EAAM6B,YACnBgB,sBAAuB,WACrBA,GAAsB,EACvB,IAGW,WAAf7C,EAAMO,MACLD,EAAAA,IAACwC,EAAe,CACd7C,IAAKA,EACLyB,UAAW1B,EAAM0B,UACjBD,cAAezB,EAAMyB,cACrBmB,YAAaA,EACbD,WAAY3C,EAAM2C,WAClBd,YAAa7B,EAAM6B,YACnBgB,sBAAuB,WACrBA,GAAsB,EACvB,IAGW,WAAf7C,EAAMO,MACLD,EAACsB,IAAA2B,GACCtD,IAAKA,EACLyB,UAAW1B,EAAM0B,UACjBD,cAAezB,EAAMyB,cACrBmB,YAAaA,EACbc,QAAS1D,EAAM0D,QACfD,WAAYzD,EAAMyD,WAClBd,WAAY3C,EAAM2C,WAClBE,sBAAuB,WACrBA,GAAsB,EACxB,WAQhB"}
|
|
1
|
+
{"version":3,"file":"cell.js","sources":["../../../../src/table/cell.tsx"],"sourcesContent":["import {\n memo,\n useEffect,\n useRef,\n useState,\n forwardRef,\n useCallback,\n} from \"react\";\nimport { DataObject, TCellEditingCondition } from \"./type\";\nimport { EditIcon } from \"./edit-icon\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsCell<T extends DataObject> = {\n currentRecord: T;\n columnKey: string;\n children: string | number;\n} & TCellEditingCondition<T>;\n\nconst CellInput = forwardRef(function CI<T extends string | number>(\n props: {\n value: T;\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;\n reset: () => void;\n endEditing: () => void;\n },\n ref: React.ForwardedRef<HTMLInputElement>\n) {\n return (\n <div className=\"flex justify-between gap-1 w-full items-center\">\n <input\n ref={ref}\n className=\"w-full py-1 px-2\"\n type=\"text\"\n value={props.value}\n onChange={props.onChange}\n onBlur={props.onBlur}\n onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n if (e.key === \"Enter\") {\n (e.target as HTMLInputElement).blur();\n } else if (e.key === \"Escape\") {\n props.reset();\n props.endEditing();\n }\n }}\n />\n <button\n onMouseDown={(e) => {\n e.preventDefault();\n props.reset();\n props.endEditing();\n }}\n >\n <CancelIcon size={16} />\n </button>\n </div>\n );\n});\n\nfunction StringCellInput<T extends DataObject>(props: {\n currentRef: React.ForwardedRef<HTMLInputElement>;\n columnKey: string;\n currentRecord: T;\n compEditing: () => void;\n onCellBlur: (\n key: string,\n value: string,\n current: T,\n completeEditing: () => void\n ) => void;\n constraints?: { maxLength?: number; minLength?: number; pattern?: string };\n setOccurredOnCellBlur: () => void;\n}) {\n const [value, setValue] = useState(\n props.currentRecord[props.columnKey] as string\n );\n\n const validate = () => {\n if (props.constraints?.maxLength) {\n if (value.length > props.constraints.maxLength) {\n alert(\n `最大文字数(${props.constraints.maxLength})を超過しています。(現在${value.length}文字)`\n );\n return false;\n }\n }\n if (props.constraints?.minLength) {\n if (value.length < props.constraints.minLength) {\n alert(\n `最小文字数(${props.constraints.minLength})を下回っています。(現在${value.length}文字)`\n );\n return false;\n }\n }\n if (props.constraints?.pattern) {\n if (!new RegExp(props.constraints.pattern).test(value)) {\n alert(`パターンに一致しません。(パターン${props.constraints.pattern})`);\n return false;\n }\n }\n return true;\n };\n\n return (\n <CellInput\n ref={props.currentRef}\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n if (value === props.currentRecord[props.columnKey]) {\n props.compEditing();\n return;\n }\n\n if (!validate()) {\n setTimeout(() => {\n e.target.focus();\n }, 100);\n return;\n }\n\n props.onCellBlur(\n props.columnKey,\n value,\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n reset={() => setValue(props.currentRecord[props.columnKey])}\n endEditing={props.compEditing}\n />\n );\n}\n\nfunction NumberCellInput<T extends DataObject>(props: {\n currentRef: React.ForwardedRef<HTMLInputElement>;\n columnKey: string;\n currentRecord: T;\n compEditing: () => void;\n onCellBlur: (\n key: string,\n value: number,\n current: T,\n completeEditing: () => void\n ) => void;\n constraints?: { max?: number; min?: number };\n setOccurredOnCellBlur: () => void;\n}) {\n const [value, setValue] = useState(\n (props.currentRecord[props.columnKey] as number).toString()\n );\n\n const validate = () => {\n const v = parseInt(value);\n\n if (props.constraints?.max) {\n if (v > props.constraints.max) {\n alert(\n `最大値(${props.constraints.max})を超過しています。(入力値:${v})`\n );\n return false;\n }\n }\n\n if (props.constraints?.min) {\n if (v < props.constraints.min) {\n alert(\n `最小値(${props.constraints.min})を下回っています。(入力値:${v})`\n );\n return false;\n }\n }\n\n return true;\n };\n\n return (\n <CellInput\n ref={props.currentRef}\n value={value}\n onChange={(e) => {\n e.preventDefault();\n\n if (e.target.value === \"\") {\n setValue(\"0\");\n return;\n }\n\n if (e.target.value === \"-\" || e.target.value === \"0-\") {\n setValue(\"-0\");\n return;\n }\n\n if (e.target.value.match(/^-?[0-9]+\\.$/)) {\n setValue(e.target.value);\n return;\n }\n\n if (isNaN(Number(e.target.value))) {\n return;\n }\n\n setValue(Number(e.target.value).toString());\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n if (Number(value) === props.currentRecord[props.columnKey]) {\n props.compEditing();\n return;\n }\n\n if (!validate()) {\n setTimeout(() => {\n e.target.focus();\n }, 100);\n return;\n }\n\n props.onCellBlur(\n props.columnKey,\n Number(value),\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n reset={() =>\n setValue((props.currentRecord[props.columnKey] as number).toString())\n }\n endEditing={props.compEditing}\n />\n );\n}\n\nfunction SelectCellInput<T extends DataObject>(props: {\n currentRef: React.ForwardedRef<HTMLSelectElement>;\n columnKey: string;\n currentRecord: T;\n compEditing: () => void;\n options: { value: string; label: string }[];\n allowEmpty?: boolean;\n onCellBlur: (\n key: string,\n value: string,\n current: T,\n completeEditing: () => void\n ) => void;\n setOccurredOnCellBlur: () => void;\n}) {\n const [value, setValue] = useState(\n props.currentRecord[props.columnKey] as string\n );\n\n return (\n <div className=\"flex justify-between gap-1 w-full items-center\">\n <select\n ref={props.currentRef}\n className=\"w-full py-1 px-2\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n props.onCellBlur(\n props.columnKey,\n value,\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n onKeyDown={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n }\n }}\n onKeyUp={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n e.preventDefault();\n if (e.key === \"Enter\") {\n (e.target as HTMLSelectElement).blur();\n } else if (e.key === \"Escape\") {\n setValue(props.currentRecord[props.columnKey] as string);\n props.compEditing();\n }\n }}\n >\n {props.allowEmpty && (\n <option key=\"TEPPEN/ReactUI Empty Option\" value=\"\">\n {props.currentRecord[props.columnKey] == \"\"\n ? \"-- 未選択 --\"\n : \"-- 選択解除 --\"}\n </option>\n )}\n {props.options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <button\n onMouseDown={(e) => {\n e.preventDefault();\n setValue(props.currentRecord[props.columnKey] as string);\n props.compEditing();\n }}\n >\n <CancelIcon size={16} />\n </button>\n </div>\n );\n}\n\nfunction _TableCell<T extends DataObject>(props: TPropsCell<T>) {\n const [isEditing, setIsEditing] = useState(false);\n const ref = useRef<HTMLElement>(null);\n const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n const compEditing = useCallback(() => {\n setIsEditing(false);\n }, [setIsEditing]);\n\n useEffect(() => {\n if (isEditing) {\n ref.current?.focus();\n }\n setOccurredOnCellBlur(false);\n }, [isEditing, occurredOnCellBlur]);\n\n return (\n <td>\n <div className=\"relative\">\n <div\n className={`flex items-center gap-3 w-fit p-2 cursor-default ${\n isEditing ? \"opacity-0\" : \"\"\n }`}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n {props.type === \"component\" ? (\n props.children\n ) : (\n <div\n onDoubleClick={(e) => {\n e.preventDefault();\n if (props.editable) {\n setIsEditing(true);\n }\n }}\n >\n <p className=\"text-left\">\n {props.type === \"select\"\n ? props.options.find((op) => op.value === props.children)\n ?.label\n : props.children}\n </p>\n </div>\n )}\n\n {props.editable && (\n <button\n className=\"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200\"\n onClick={(e) => {\n e.preventDefault();\n if (props.editable) {\n setIsEditing(true);\n }\n }}\n >\n <EditIcon size={12} />\n </button>\n )}\n </div>\n {props.editable && isEditing && (\n <div\n className=\"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n {props.type === \"string\" && (\n <StringCellInput\n currentRef={ref as React.RefObject<HTMLInputElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n onCellBlur={props.onCellBlur}\n constraints={props.constraints}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n {props.type === \"number\" && (\n <NumberCellInput\n currentRef={ref as React.RefObject<HTMLInputElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n onCellBlur={props.onCellBlur}\n constraints={props.constraints}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n {props.type === \"select\" && (\n <SelectCellInput\n currentRef={ref as React.RefObject<HTMLSelectElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n options={props.options}\n allowEmpty={props.allowEmpty}\n onCellBlur={props.onCellBlur}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n </div>\n )}\n </div>\n </td>\n );\n}\nexport const TableCell = memo(_TableCell) as typeof _TableCell;\n"],"names":["CellInput","forwardRef","props","ref","_jsxs","jsxs","className","children","_jsx","type","value","onChange","onBlur","onKeyUp","e","preventDefault","key","target","blur","reset","endEditing","onMouseDown","CancelIcon","size","StringCellInput","_a","useState","currentRecord","columnKey","setValue","currentRef","constraints","maxLength","length","alert","concat","_b","minLength","_c","pattern","RegExp","test","validate","setTimeout","focus","onCellBlur","compEditing","setOccurredOnCellBlur","NumberCellInput","toString","match","isNaN","Number","v","parseInt","max","min","SelectCellInput","onKeyDown","allowEmpty","jsx","options","map","option","label","TableCell","memo","isEditing","setIsEditing","useRef","occurredOnCellBlur","useCallback","useEffect","current","onClick","stopPropagation","onDoubleClick","editable","find","op","EditIcon"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),l=require("react"),n=require("./filter.js"),t=require("./cancel-icon.js");exports.TableFilterForm=function(r){var i=n.useTableFilterContext(),a=i.addFilter,s=i.removeFilter,u=i.filterConditions,
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),l=require("react"),n=require("./filter.js"),t=require("./cancel-icon.js");exports.TableFilterForm=function(r){var i=n.useTableFilterContext(),a=i.addFilter,s=i.removeFilter,u=i.filterConditions,o=l.useState(""),c=o[0],d=o[1],v=l.useState(""),f=v[0],x=v[1],p=l.useState(""),h=p[0],j=p[1],y=l.useState("string"),m=y[0],b=y[1],g=r.cols.find((function(e){return e.key===c}));return l.useEffect((function(){j(""),x("")}),[c]),e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"flex flex-col gap-2 mb-5",children:[e.jsx("p",{className:"font-bold text-lg",children:"フィルタ追加"}),e.jsxs("div",{className:"flex flex-wrap gap-1",children:[e.jsxs("select",{value:c,onChange:function(e){var l;e.preventDefault(),d(e.target.value);var n=null===(l=r.cols.find((function(l){return l.key===e.target.value})))||void 0===l?void 0:l.type;b(n)},children:[e.jsx("option",{value:"",children:"-- 列を選択 --"}),r.cols.filter((function(e){return!!e.label&&!!e.type})).map((function(l){return e.jsx("option",{value:l.key,children:l.label},l.key)}))]}),e.jsxs("select",{value:f,onChange:function(e){e.preventDefault(),x(e.target.value)},disabled:!c,children:[e.jsx("option",{value:"",children:c?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===m&&n.STRING_FILTER_OPERATOR.map((function(l){return e.jsx("option",{value:l.key,children:l.label},l.key)})),"number"===m&&n.NUMBER_FILTER_OPERATOR.map((function(l){return e.jsx("option",{value:l.key,children:l.label},l.key)})),"select"===m&&n.SELECT_FILTER_OPERATOR.map((function(l){return e.jsx("option",{value:l.key,children:l.label},l.key)}))]}),"select"===m?e.jsxs("select",{value:h,onChange:function(e){e.preventDefault(),j(e.target.value)},children:[e.jsx("option",{value:"",children:"-- 未選択 --"}),"select"===g.type&&g.options.map((function(l){return e.jsx("option",{value:l.value,children:l.label},l.value)}))]}):e.jsx("input",{type:"text",value:h,onChange:function(e){e.preventDefault(),j(e.target.value)},placeholder:"-- 値を入力 --"})]}),e.jsx("div",{className:"flex justify-end",children:e.jsx("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md",onClick:function(e){var l;if(e.preventDefault(),c&&f&&("select"===g.type||h)){var n=r.cols.find((function(e){return e.key===c}));a("string"===m?{key:c,operator:f,value:[h]}:"select"===m?{key:c,operator:f,value:h,label:"select"===n.type?null===(l=n.options.find((function(e){return e.value===h})))||void 0===l?void 0:l.label:void 0}:{key:c,operator:f,value:Number(h)})}else alert("全ての項目を入力してください")},children:"追加"})})]}),e.jsxs("div",{children:[u.length>0&&e.jsx("p",{className:"font-bold text-lg",children:"フィルタ一覧"}),e.jsx("ul",{className:"flex flex-col gap-1 my-2",children:u.map((function(l){var i,a;return e.jsxs("li",{className:"flex justify-between",children:[e.jsxs("p",{children:["「",e.jsx("strong",{children:null===(i=r.cols.find((function(e){return e.key===l.key})))||void 0===i?void 0:i.label}),"」 は",e.jsx("span",{children:null===(a=n.FILTER_OPERATOR.find((function(e){return e.key===l.operator})))||void 0===a?void 0:a.label}),"：",e.jsx("span",{children:l.label?l.label:l.value})]}),e.jsx("button",{onClick:function(e){e.preventDefault(),s(l.id)},children:e.jsx(t.CancelIcon,{size:16})})]},l.id)}))}),e.jsx("div",{className:"flex justify-center",children:e.jsx(n.TableFilterRemoveButton,{children:e.jsx("p",{className:"text-gray-600 underline hover:text-gray-800",children:"remove all filters"})})})]})]})};
|
|
2
2
|
//# sourceMappingURL=filter-form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-form.js","sources":["../../../../src/table/filter-form.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n FILTER_OPERATOR,\n NUMBER_FILTER_OPERATOR,\n STRING_FILTER_OPERATOR,\n TNumberFilterOperator,\n TStringFilterOperator,\n TableFilterRemoveButton,\n useTableFilterContext,\n} from \"./filter\";\nimport { TColumnType, TTableColumn } from \"./type\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsFilterForm = {\n cols: TTableColumn[];\n};\n\nexport function TableFilterForm(props: TPropsFilterForm) {\n const { addFilter, removeFilter, filterConditions } = useTableFilterContext();\n const [selectingKey, setSelectingKey] = useState<string>(\"\");\n const [selectingOperator, setSelectingOperator] = useState<string>(\"\");\n const [value, setValue] = useState<string>(\"\");\n const [filterType, setFilterType] = useState<TColumnType>(\"string\");\n\n return (\n <>\n <div className=\"flex flex-col gap-2 mb-5\">\n <p className=\"font-bold text-lg\">フィルタ追加</p>\n <div className=\"flex flex-wrap gap-1\">\n <select\n value={selectingKey}\n onChange={(e) => {\n e.preventDefault();\n setSelectingKey(e.target.value);\n const columnType = props.cols.find(\n (col) => col.key === e.target.value\n )?.type as TColumnType;\n setFilterType(columnType);\n }}\n >\n <option value=\"\">-- 列を選択 --</option>\n {props.cols\n .filter((col) => !!col.label && !!col.type)\n .map((col) => (\n <option key={col.key} value={col.key}>\n {col.label}\n </option>\n ))}\n </select>\n <select\n value={selectingOperator}\n onChange={(e) => {\n e.preventDefault();\n setSelectingOperator(e.target.value);\n }}\n disabled={!selectingKey}\n >\n <option value=\"\">\n {selectingKey ? \"-- 条件を選択 --\" : \"-- 列を選択してください --\"}\n </option>\n {filterType === \"string\" &&\n STRING_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n {filterType === \"number\" &&\n NUMBER_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n </select>\n <input\n type=\"text\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n placeholder=\"-- 値を入力 --\"\n />\n </div>\n <div className=\"flex justify-end\">\n <button\n className=\"bg-gray-900 text-white py-1 px-2 rounded-md\"\n onClick={(e) => {\n e.preventDefault();\n if (!selectingKey || !selectingOperator || !value) {\n alert(\"全ての項目を入力してください\");\n return;\n }\n addFilter(\n filterType === \"string\"\n ? {\n key: selectingKey,\n operator: selectingOperator as TStringFilterOperator,\n value: [value],\n }\n : {\n key: selectingKey,\n operator: selectingOperator as TNumberFilterOperator,\n value: Number(value),\n }\n );\n }}\n >\n 追加\n </button>\n </div>\n </div>\n <div>\n {filterConditions.length > 0 && (\n <p className=\"font-bold text-lg\">フィルタ一覧</p>\n )}\n <ul className=\"flex flex-col gap-1 my-2\">\n {filterConditions.map((f) => (\n <li key={f.id} className=\"flex justify-between\">\n <p>\n 「\n <strong>\n {props.cols.find((col) => col.key === f.key)?.label}\n </strong>\n 」 は\n <span>\n {FILTER_OPERATOR.find((op) => op.key === f.operator)?.label}\n </span>\n ：<span>{f.value}</span>\n </p>\n <button\n onClick={(e) => {\n e.preventDefault();\n removeFilter(f.id);\n }}\n >\n <CancelIcon size={16} />\n </button>\n </li>\n ))}\n </ul>\n <div className=\"flex justify-center\">\n <TableFilterRemoveButton>\n <p className=\"text-gray-600 underline hover:text-gray-800\">\n remove all filters\n </p>\n </TableFilterRemoveButton>\n </div>\n </div>\n </>\n );\n}\n"],"names":["props","_a","useTableFilterContext","addFilter","removeFilter","filterConditions","_b","useState","selectingKey","setSelectingKey","_c","selectingOperator","setSelectingOperator","_d","value","setValue","_e","filterType","setFilterType","_jsxs","_Fragment","children","className","_jsx","jsxs","onChange","e","preventDefault","target","columnType","cols","find","col","key","type","filter","label","map","jsx","disabled","STRING_FILTER_OPERATOR","op","NUMBER_FILTER_OPERATOR","placeholder","onClick","operator","Number","alert","length","f","FILTER_OPERATOR","id","CancelIcon","size","TableFilterRemoveButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"filter-form.js","sources":["../../../../src/table/filter-form.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport {\n FILTER_OPERATOR,\n NUMBER_FILTER_OPERATOR,\n SELECT_FILTER_OPERATOR,\n STRING_FILTER_OPERATOR,\n TNumberFilterOperator,\n TSelectFilterOperator,\n TStringFilterOperator,\n TableFilterRemoveButton,\n useTableFilterContext,\n} from \"./filter\";\nimport { DataObject, TColumnType, TTableColumn } from \"./type\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsFilterForm<T extends DataObject> = {\n cols: TTableColumn<T>[];\n};\n\nexport function TableFilterForm<T extends DataObject>(\n props: TPropsFilterForm<T>\n) {\n const { addFilter, removeFilter, filterConditions } = useTableFilterContext();\n const [selectingKey, setSelectingKey] = useState<string>(\"\");\n const [selectingOperator, setSelectingOperator] = useState<string>(\"\");\n const [value, setValue] = useState<string>(\"\");\n const [filterType, setFilterType] = useState<TColumnType>(\"string\");\n\n const filterColumn = props.cols.find((col) => col.key === selectingKey)!;\n\n useEffect(() => {\n setValue(\"\");\n setSelectingOperator(\"\");\n }, [selectingKey]);\n\n return (\n <>\n <div className=\"flex flex-col gap-2 mb-5\">\n <p className=\"font-bold text-lg\">フィルタ追加</p>\n <div className=\"flex flex-wrap gap-1\">\n <select\n value={selectingKey}\n onChange={(e) => {\n e.preventDefault();\n setSelectingKey(e.target.value);\n const columnType = props.cols.find(\n (col) => col.key === e.target.value\n )?.type as TColumnType;\n setFilterType(columnType);\n }}\n >\n <option value=\"\">-- 列を選択 --</option>\n {props.cols\n .filter((col) => !!col.label && !!col.type)\n .map((col) => (\n <option key={col.key} value={col.key}>\n {col.label}\n </option>\n ))}\n </select>\n <select\n value={selectingOperator}\n onChange={(e) => {\n e.preventDefault();\n setSelectingOperator(e.target.value);\n }}\n disabled={!selectingKey}\n >\n <option value=\"\">\n {selectingKey ? \"-- 条件を選択 --\" : \"-- 列を選択してください --\"}\n </option>\n {filterType === \"string\" &&\n STRING_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n {filterType === \"number\" &&\n NUMBER_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n {filterType === \"select\" &&\n SELECT_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n </select>\n {filterType === \"select\" ? (\n <select\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n >\n <option value=\"\">-- 未選択 --</option>\n {filterColumn.type === \"select\" &&\n filterColumn.options.map((op) => (\n <option key={op.value} value={op.value}>\n {op.label}\n </option>\n ))}\n </select>\n ) : (\n <input\n type=\"text\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n placeholder=\"-- 値を入力 --\"\n />\n )}\n </div>\n <div className=\"flex justify-end\">\n <button\n className=\"bg-gray-900 text-white py-1 px-2 rounded-md\"\n onClick={(e) => {\n e.preventDefault();\n if (\n !selectingKey ||\n !selectingOperator ||\n (filterColumn.type !== \"select\" && !value)\n ) {\n alert(\"全ての項目を入力してください\");\n return;\n }\n\n const addFilterColumn = props.cols.find(\n (col) => col.key === selectingKey\n )!;\n\n addFilter(\n filterType === \"string\"\n ? {\n key: selectingKey,\n operator: selectingOperator as TStringFilterOperator,\n value: [value],\n }\n : filterType === \"select\"\n ? {\n key: selectingKey,\n operator: selectingOperator as TSelectFilterOperator,\n value: value,\n label:\n addFilterColumn.type === \"select\"\n ? addFilterColumn.options.find(\n (op) => op.value === value\n )?.label\n : undefined,\n }\n : {\n key: selectingKey,\n operator: selectingOperator as TNumberFilterOperator,\n value: Number(value),\n }\n );\n }}\n >\n 追加\n </button>\n </div>\n </div>\n <div>\n {filterConditions.length > 0 && (\n <p className=\"font-bold text-lg\">フィルタ一覧</p>\n )}\n <ul className=\"flex flex-col gap-1 my-2\">\n {filterConditions.map((f) => (\n <li key={f.id} className=\"flex justify-between\">\n <p>\n 「\n <strong>\n {props.cols.find((col) => col.key === f.key)?.label}\n </strong>\n 」 は\n <span>\n {FILTER_OPERATOR.find((op) => op.key === f.operator)?.label}\n </span>\n ：<span>{f.label ? f.label : f.value}</span>\n </p>\n <button\n onClick={(e) => {\n e.preventDefault();\n removeFilter(f.id);\n }}\n >\n <CancelIcon size={16} />\n </button>\n </li>\n ))}\n </ul>\n <div className=\"flex justify-center\">\n <TableFilterRemoveButton>\n <p className=\"text-gray-600 underline hover:text-gray-800\">\n remove all filters\n </p>\n </TableFilterRemoveButton>\n </div>\n </div>\n </>\n );\n}\n"],"names":["props","_a","useTableFilterContext","addFilter","removeFilter","filterConditions","_b","useState","selectingKey","setSelectingKey","_c","selectingOperator","setSelectingOperator","_d","value","setValue","_e","filterType","setFilterType","filterColumn","cols","find","col","key","useEffect","_jsxs","_Fragment","children","className","_jsx","jsxs","onChange","e","preventDefault","target","columnType","type","filter","label","map","jsx","disabled","STRING_FILTER_OPERATOR","op","NUMBER_FILTER_OPERATOR","SELECT_FILTER_OPERATOR","options","placeholder","onClick","addFilterColumn","operator","undefined","Number","alert","length","f","FILTER_OPERATOR","id","CancelIcon","size","TableFilterRemoveButton"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("./filter-icon.js"),
|
|
1
|
+
"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("./filter-icon.js"),l=[{key:"includeText",label:"次の値を含む"}],i=[{key:"eq",label:"次の値と等しい"},{key:"ne",label:"次の値と等しくない"},{key:"gt",label:"次の値より大きい"},{key:"lt",label:"次の値より小さい"},{key:"gte",label:"次の値以上"},{key:"lte",label:"次の値以下"}],u=[{key:"selected",label:"次の値と等しい"},{key:"notSelected",label:"次の値と等しくない"}],a=e.__spreadArray(e.__spreadArray(e.__spreadArray([],l,!0),i,!0),u,!0);function c(r,t){switch(t.type){case"add":return{filters:e.__spreadArray(e.__spreadArray([],r.filters,!0),[e.__assign({id:(new Date).getTime()},t.payload.filter)],!1)};case"remove":return{filters:r.filters.filter((function(e){return e.id!==t.payload.id}))};case"clear":return{filters:[]}}}function o(){var e=t.useReducer(c,{filters:[]}),r=e[0],n=e[1],l=t.useCallback((function(e){return n({type:"add",payload:{filter:e}})}),[n]);return{addFilter:l,removeFilter:t.useCallback((function(e){return n({type:"remove",payload:{id:e}})}),[n]),clearFilter:t.useCallback((function(){return n({type:"clear"})}),[n]),filter:t.useCallback((function(e){return r.filters.reduce((function(e,r){switch(r.operator){case"includeText":return e.filter((function(e){var t=e[r.key];return"string"==typeof t&&r.value.some((function(e){return t.includes(e)}))}));case"eq":case"selected":return e.filter((function(e){return e[r.key]===r.value}));case"ne":case"notSelected":return e.filter((function(e){return e[r.key]!==r.value}));case"gt":return e.filter((function(e){return e[r.key]>r.value}));case"lt":return e.filter((function(e){return e[r.key]<r.value}));case"gte":return e.filter((function(e){return e[r.key]>=r.value}));case"lte":return e.filter((function(e){return e[r.key]<=r.value}))}}),e)}),[r]),filterConditions:r.filters}}var s=t.createContext({addFilter:function(){},removeFilter:function(){},clearFilter:function(){},filter:function(){return[]},filterConditions:[]});function f(){return t.useContext(s)}exports.FILTER_OPERATOR=a,exports.NUMBER_FILTER_OPERATOR=i,exports.SELECT_FILTER_OPERATOR=u,exports.STRING_FILTER_OPERATOR=l,exports.TableFilter=function(e){var t=f().filterConditions;return r.jsx("div",{className:"relative cursor-pointer",onClick:e.onClick,children:r.jsx(n.FIlterIcon,{isFilterActive:t.filter((function(r){return r.key===e.keyName})).length>0})})},exports.TableFilterProvider=function(e){var t=e.children;return r.jsx(s.Provider,{value:o(),children:t})},exports.TableFilterRemoveButton=function(e){var t=e.children,n=f(),l=n.clearFilter;if(0!==n.filterConditions.length)return r.jsx("button",{onClick:function(e){e.preventDefault(),l()},children:t})},exports.filterReducer=c,exports.useTableFilterContext=f;
|
|
2
2
|
//# sourceMappingURL=filter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter.js","sources":["../../../../src/table/filter.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useReducer } from \"react\";\nimport { DataObject } from \"./type\";\nimport { FIlterIcon } from \"./filter-icon\";\n\nexport const STRING_FILTER_OPERATOR = [\n { key: \"includeText\", label: \"次の値を含む\" },\n] as const;\n\nexport const NUMBER_FILTER_OPERATOR = [\n { key: \"eq\", label: \"次の値と等しい\" },\n { key: \"ne\", label: \"次の値と等しくない\" },\n { key: \"gt\", label: \"次の値より大きい\" },\n { key: \"lt\", label: \"次の値より小さい\" },\n { key: \"gte\", label: \"次の値以上\" },\n { key: \"lte\", label: \"次の値以下\" },\n] as const;\n\nexport const FILTER_OPERATOR = [\n ...STRING_FILTER_OPERATOR,\n ...NUMBER_FILTER_OPERATOR,\n] as const;\n\nexport type TStringFilterOperator =\n (typeof STRING_FILTER_OPERATOR)[number][\"key\"];\nexport type TNumberFilterOperator =\n (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\nexport type TFilterOperator
|
|
1
|
+
{"version":3,"file":"filter.js","sources":["../../../../src/table/filter.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useReducer } from \"react\";\nimport { DataObject } from \"./type\";\nimport { FIlterIcon } from \"./filter-icon\";\n\nexport const STRING_FILTER_OPERATOR = [\n { key: \"includeText\", label: \"次の値を含む\" },\n] as const;\n\nexport const NUMBER_FILTER_OPERATOR = [\n { key: \"eq\", label: \"次の値と等しい\" },\n { key: \"ne\", label: \"次の値と等しくない\" },\n { key: \"gt\", label: \"次の値より大きい\" },\n { key: \"lt\", label: \"次の値より小さい\" },\n { key: \"gte\", label: \"次の値以上\" },\n { key: \"lte\", label: \"次の値以下\" },\n] as const;\n\nexport const SELECT_FILTER_OPERATOR = [\n { key: \"selected\", label: \"次の値と等しい\" },\n { key: \"notSelected\", label: \"次の値と等しくない\" },\n] as const;\n\nexport const FILTER_OPERATOR = [\n ...STRING_FILTER_OPERATOR,\n ...NUMBER_FILTER_OPERATOR,\n ...SELECT_FILTER_OPERATOR,\n] as const;\n\nexport type TStringFilterOperator =\n (typeof STRING_FILTER_OPERATOR)[number][\"key\"];\nexport type TNumberFilterOperator =\n (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\nexport type TSelectFilterOperator =\n (typeof SELECT_FILTER_OPERATOR)[number][\"key\"];\nexport type TFilterOperator =\n | TStringFilterOperator\n | TNumberFilterOperator\n | TSelectFilterOperator;\n\ntype TStringFilter = {\n key: string;\n operator: TStringFilterOperator;\n value: string[];\n label?: string;\n};\n\ntype TNumberFilter = {\n key: string;\n operator: TNumberFilterOperator;\n value: number;\n label?: string;\n};\n\ntype TSelectFilter = {\n key: string;\n operator: TSelectFilterOperator;\n value: string;\n label?: string;\n};\n\ntype TFilter = TStringFilter | TNumberFilter | TSelectFilter;\n\ntype TFilterState = {\n filters: ({ id: number } & TFilter)[];\n};\n\ntype TFilterAction =\n | { type: \"add\"; payload: { filter: TFilter } }\n | { type: \"remove\"; payload: { id: number } }\n | { type: \"clear\" };\n\nexport function filterReducer(\n state: TFilterState,\n action: TFilterAction\n): TFilterState {\n switch (action.type) {\n case \"add\":\n return {\n filters: [\n ...state.filters,\n { id: new Date().getTime(), ...action.payload.filter },\n ],\n };\n case \"remove\":\n return {\n filters: state.filters.filter((f) => f.id !== action.payload.id),\n };\n case \"clear\":\n return { filters: [] };\n }\n}\n\nfunction useFilterReducer() {\n const [state, dispatch] = useReducer(filterReducer, { filters: [] });\n\n const addFilter = useCallback(\n (filter: TFilter) => dispatch({ type: \"add\", payload: { filter } }),\n [dispatch]\n );\n const removeFilter = useCallback(\n (id: number) => dispatch({ type: \"remove\", payload: { id } }),\n [dispatch]\n );\n const clearFilter = useCallback(\n () => dispatch({ type: \"clear\" }),\n [dispatch]\n );\n\n const filter = useCallback(\n <T extends DataObject>(rows: T[]): T[] => {\n return state.filters.reduce((acc, filter) => {\n switch (filter.operator) {\n case \"includeText\":\n return acc.filter((row) => {\n const value = row[filter.key];\n if (typeof value === \"string\") {\n return filter.value.some((v) => value.includes(v));\n }\n return false;\n });\n case \"eq\":\n return acc.filter((row) => row[filter.key] === filter.value);\n case \"ne\":\n return acc.filter((row) => row[filter.key] !== filter.value);\n case \"gt\":\n return acc.filter((row) => row[filter.key] > filter.value);\n case \"lt\":\n return acc.filter((row) => row[filter.key] < filter.value);\n case \"gte\":\n return acc.filter((row) => row[filter.key] >= filter.value);\n case \"lte\":\n return acc.filter((row) => row[filter.key] <= filter.value);\n case \"selected\":\n return acc.filter((row) => row[filter.key] === filter.value);\n case \"notSelected\":\n return acc.filter((row) => row[filter.key] !== filter.value);\n }\n }, rows);\n },\n [state]\n );\n\n return {\n addFilter,\n removeFilter,\n clearFilter,\n filter,\n filterConditions: state.filters,\n };\n}\n\nconst TableFilterContext = createContext<ReturnType<typeof useFilterReducer>>({\n addFilter: () => {},\n removeFilter: () => {},\n clearFilter: () => {},\n filter: () => [],\n filterConditions: [],\n});\n\nexport function TableFilterProvider({\n children,\n}: {\n children: JSX.Element | JSX.Element[];\n}) {\n return (\n <TableFilterContext.Provider value={useFilterReducer()}>\n {children}\n </TableFilterContext.Provider>\n );\n}\n\nexport function useTableFilterContext() {\n return useContext(TableFilterContext);\n}\n\ntype TPropsTableFilter = {\n keyName: string;\n onClick: React.MouseEventHandler<HTMLDivElement>;\n};\n\nexport function TableFilter(props: TPropsTableFilter) {\n const { filterConditions } = useTableFilterContext();\n\n return (\n <div className=\"relative cursor-pointer\" onClick={props.onClick}>\n <FIlterIcon\n isFilterActive={\n filterConditions.filter((f) => f.key === props.keyName).length > 0\n }\n />\n </div>\n );\n}\n\nexport function TableFilterRemoveButton({\n children,\n}: {\n children: React.ReactNode;\n}) {\n const { clearFilter, filterConditions } = useTableFilterContext();\n\n if (filterConditions.length === 0) {\n return;\n }\n\n return (\n <button\n onClick={(e) => {\n e.preventDefault();\n clearFilter();\n }}\n >\n {children}\n </button>\n );\n}\n"],"names":["STRING_FILTER_OPERATOR","key","label","NUMBER_FILTER_OPERATOR","SELECT_FILTER_OPERATOR","FILTER_OPERATOR","__spreadArray","filterReducer","state","action","type","filters","__assign","id","Date","getTime","payload","filter","f","useFilterReducer","_a","useReducer","dispatch","addFilter","useCallback","removeFilter","clearFilter","rows","reduce","acc","operator","row","value","some","v","includes","filterConditions","TableFilterContext","createContext","useTableFilterContext","useContext","props","_jsx","jsx","className","onClick","children","FIlterIcon","isFilterActive","keyName","length","Provider","_b","e","preventDefault"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");exports.TableHeaderElement=function(t){return e.jsxs("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[80%] min-w-20",children:t.label})}),t.label&&
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");exports.TableHeaderElement=function(t){return e.jsxs("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[t.label&&e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis ".concat(t.filterComponent&&t.sortConponent?"w-[80%] min-w-20":t.filterComponent||t.sortConponent?"w-[90%] min-w-20":"min-w-10"," "),children:t.label})}),t.label&&e.jsxs("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[t.filterComponent&&t.filterComponent,t.sortConponent&&t.sortConponent]})]})};
|
|
2
2
|
//# sourceMappingURL=header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n label?: string;\n
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n label?: string;\n sortConponent?: JSX.Element;\n filterComponent?: JSX.Element;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n return (\n <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n {props.label && (\n <div className=\"px-2\">\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis ${\n props.filterComponent && props.sortConponent\n ? \"w-[80%] min-w-20\"\n : !props.filterComponent && !props.sortConponent\n ? \"min-w-10\"\n : \"w-[90%] min-w-20\"\n } `}\n >\n {props.label}\n </p>\n </div>\n )}\n\n {props.label && (\n <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n {props.filterComponent && props.filterComponent}\n {props.sortConponent && props.sortConponent}\n </div>\n )}\n </th>\n );\n}\n"],"names":["props","_jsxs","className","children","label","_jsx","jsx","concat","filterComponent","sortConponent"],"mappings":"2EAMM,SAA6BA,GACjC,OACEC,OAAI,KAAA,CAAAC,UAAW,8CACZC,SAAA,CAAAH,EAAMI,OACLC,EAAKC,IAAA,MAAA,CAAAJ,UAAU,OAAMC,SACnBE,MACE,IAAA,CAAAH,UAAW,iEAAAK,OACTP,EAAMQ,iBAAmBR,EAAMS,cAC3B,mBACCT,EAAMQ,iBAAoBR,EAAMS,cAEjC,mBADA,WACkB,cAGvBT,EAAMI,UAKZJ,EAAMI,OACLH,EAAAA,KAAA,MAAA,CAAKC,UAAU,oEACZC,SAAA,CAAAH,EAAMQ,iBAAmBR,EAAMQ,gBAC/BR,EAAMS,eAAiBT,EAAMS,mBAKxC"}
|
|
@@ -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{useTable as o}from"./hook.js";import{TableCell as l}from"./cell.js";import{Sort as n}from"./sort.js";import{TableHeaderElement as i}from"./header.js";import{Pagenation as c}from"./page.js";import{TableFilterProvider as a,TableFilterRemoveButton as d,TableFilter as s}from"./filter.js";import{useState as m}from"react";import{TableFilterForm as u}from"./filter-form.js";function p(t){return r(a,{children:r(f,e({},t))})}function f(a){var p=o(a),f=p.cols,h=p.rows,v=p.rowCount,y=p.sortKey,b=p.sortOrder,N=p.page,g=N.count,k=N.current,x=N.from,j=N.to,C=N.next,w=N.prev,D=N.jump,O=m(!1),S=O[0],
|
|
2
|
+
import{__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import{useTable as o}from"./hook.js";import{TableCell as l}from"./cell.js";import{Sort as n}from"./sort.js";import{TableHeaderElement as i}from"./header.js";import{Pagenation as c}from"./page.js";import{TableFilterProvider as a,TableFilterRemoveButton as d,TableFilter as s}from"./filter.js";import{useState as m}from"react";import{TableFilterForm as u}from"./filter-form.js";function p(t){return r(a,{children:r(f,e({},t))})}function f(a){var p=o(a),f=p.cols,h=p.rows,v=p.rowCount,y=p.sortKey,b=p.sortOrder,N=p.page,g=N.count,k=N.current,x=N.from,j=N.to,C=N.next,w=N.prev,D=N.jump,O=m(!1),S=O[0],z=O[1];return t("div",{className:"w-full",children:[r("div",{className:"flex justify-end",children:r(d,{children:"remove all filters"})}),r("div",{className:"relative w-full h-full max-h-[80vh] border border-gray-200 rounded-md overflow-auto",children:t("table",{className:"table table-auto w-full",children:[r("thead",{children:r("tr",{className:"sticky top-0 border-gray-200 z-20",children:f.map((function(e){return r(i,{label:e.label,sortConponent:"component"!==e.type?r(n,{onClick:e.onClick,isSortedByThis:y===e.key,sortOrder:b}):void 0,filterComponent:"component"!==e.type?r(s,{keyName:e.key,onClick:function(e){e.preventDefault(),z((function(e){return!e}))}}):void 0},e.key)}))})}),t("tbody",{children:[S&&r("tr",{children:r("td",{colSpan:f.length,className:"sticky top-8 left-0 bg-gray-300 w-full shadow-lg rounded-b-2xl py-5 px-2 z-20",children:r("div",{className:"container max-w-[768px] mx-auto",children:t("div",{className:"relative",children:[r("div",{className:"absolute top-0 right-0",children:r("button",{onClick:function(e){e.preventDefault(),z(!1)},children:"close"})}),r("div",{children:r(u,{cols:f})})]})})})}),0===h.length&&r("tr",{children:r("td",{colSpan:f.length,className:"py-5",children:r("p",{className:"text-center font-bold text-lg",children:"NO DATA"})})}),h.map((function(t){var o;return r("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(o=h[0])||void 0===o?void 0:o.onClick)?"hover:cursor-pointer":""),onClick:t.onClick,"data-testid":t.id,children:f.map((function(o){return r(l,e({},o,{columnKey:o.key,currentRecord:t,children:t[o.key]}))}))},t.id)}))]})]})}),t("div",{className:"mt-1",children:[t("p",{className:"text-center text-sm text-gray-600",children:[x+1," - ",j<v?j:v," of ",v]}),r("div",{className:"mt-2",children:r(c,{count:g,current:k,jump:D,next:C,prev:w})})]})]})}export{p as default};
|
|
3
3
|
//# sourceMappingURL=base.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as n}from"react/jsx-runtime";import{forwardRef as t,
|
|
1
|
+
import{jsxs as e,jsx as n}from"react/jsx-runtime";import{forwardRef as t,memo as r,useState as c,useRef as o,useCallback as l,useEffect as u}from"react";import{EditIcon as i}from"./edit-icon.js";import{CancelIcon as a}from"./cancel-icon.js";var s=t((function(t,r){return e("div",{className:"flex justify-between gap-1 w-full items-center",children:[n("input",{ref:r,className:"w-full py-1 px-2",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())}}),n("button",{onMouseDown:function(e){e.preventDefault(),t.reset(),t.endEditing()},children:n(a,{size:16})})]})}));function d(e){var t=c(e.currentRecord[e.columnKey]),r=t[0],o=t[1];return n(s,{ref:e.currentRef,value:r,onChange:function(e){e.preventDefault(),o(e.target.value)},onBlur:function(n){n.preventDefault(),r!==e.currentRecord[e.columnKey]?!function(){var n,t,c;return(null===(n=e.constraints)||void 0===n?void 0:n.maxLength)&&r.length>e.constraints.maxLength?(alert("最大文字数(".concat(e.constraints.maxLength,")を超過しています。(現在").concat(r.length,"文字)")),!1):(null===(t=e.constraints)||void 0===t?void 0:t.minLength)&&r.length<e.constraints.minLength?(alert("最小文字数(".concat(e.constraints.minLength,")を下回っています。(現在").concat(r.length,"文字)")),!1):!((null===(c=e.constraints)||void 0===c?void 0:c.pattern)&&!new RegExp(e.constraints.pattern).test(r)&&(alert("パターンに一致しません。(パターン".concat(e.constraints.pattern,")")),1))}()?setTimeout((function(){n.target.focus()}),100):(e.onCellBlur(e.columnKey,r,e.currentRecord,e.compEditing),e.setOccurredOnCellBlur()):e.compEditing()},reset:function(){return o(e.currentRecord[e.columnKey])},endEditing:e.compEditing})}function f(e){var t=c(e.currentRecord[e.columnKey].toString()),r=t[0],o=t[1];return n(s,{ref:e.currentRef,value:r,onChange:function(e){e.preventDefault(),""!==e.target.value?"-"!==e.target.value&&"0-"!==e.target.value?e.target.value.match(/^-?[0-9]+\.$/)?o(e.target.value):isNaN(Number(e.target.value))||o(Number(e.target.value).toString()):o("-0"):o("0")},onBlur:function(n){n.preventDefault(),Number(r)!==e.currentRecord[e.columnKey]?!function(){var n,t,c=parseInt(r);return(null===(n=e.constraints)||void 0===n?void 0:n.max)&&c>e.constraints.max?(alert("最大値(".concat(e.constraints.max,")を超過しています。(入力値:").concat(c,")")),!1):!((null===(t=e.constraints)||void 0===t?void 0:t.min)&&c<e.constraints.min&&(alert("最小値(".concat(e.constraints.min,")を下回っています。(入力値:").concat(c,")")),1))}()?setTimeout((function(){n.target.focus()}),100):(e.onCellBlur(e.columnKey,Number(r),e.currentRecord,e.compEditing),e.setOccurredOnCellBlur()):e.compEditing()},reset:function(){return o(e.currentRecord[e.columnKey].toString())},endEditing:e.compEditing})}function m(t){var r=c(t.currentRecord[t.columnKey]),o=r[0],l=r[1];return e("div",{className:"flex justify-between gap-1 w-full items-center",children:[e("select",{ref:t.currentRef,className:"w-full py-1 px-2",value:o,onChange:function(e){e.preventDefault(),l(e.target.value)},onBlur:function(e){e.preventDefault(),t.onCellBlur(t.columnKey,o,t.currentRecord,t.compEditing),t.setOccurredOnCellBlur()},onKeyDown:function(e){"Enter"===e.key&&e.preventDefault()},onKeyUp:function(e){e.preventDefault(),"Enter"===e.key?e.target.blur():"Escape"===e.key&&(l(t.currentRecord[t.columnKey]),t.compEditing())},children:[t.allowEmpty&&n("option",{value:"",children:""==t.currentRecord[t.columnKey]?"-- 未選択 --":"-- 選択解除 --"},"TEPPEN/ReactUI Empty Option"),t.options.map((function(e){return n("option",{value:e.value,children:e.label},e.value)}))]}),n("button",{onMouseDown:function(e){e.preventDefault(),l(t.currentRecord[t.columnKey]),t.compEditing()},children:n(a,{size:16})})]})}var p=r((function(t){var r,a=c(!1),s=a[0],p=a[1],v=o(null),g=c(!1),y=g[0],h=g[1],E=l((function(){p(!1)}),[p]);return u((function(){var e;s&&(null===(e=v.current)||void 0===e||e.focus()),h(!1)}),[s,y]),n("td",{children:e("div",{className:"relative",children:[e("div",{className:"flex items-center gap-3 w-fit p-2 cursor-default ".concat(s?"opacity-0":""),onClick:function(e){e.preventDefault(),e.stopPropagation()},children:["component"===t.type?t.children:n("div",{onDoubleClick:function(e){e.preventDefault(),t.editable&&p(!0)},children:n("p",{className:"text-left",children:"select"===t.type?null===(r=t.options.find((function(e){return e.value===t.children})))||void 0===r?void 0:r.label:t.children})}),t.editable&&n("button",{className:"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200",onClick:function(e){e.preventDefault(),t.editable&&p(!0)},children:n(i,{size:12})})]}),t.editable&&s&&e("div",{className:"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2",onClick:function(e){e.preventDefault(),e.stopPropagation()},children:["string"===t.type&&n(d,{currentRef:v,columnKey:t.columnKey,currentRecord:t.currentRecord,compEditing:E,onCellBlur:t.onCellBlur,constraints:t.constraints,setOccurredOnCellBlur:function(){h(!0)}}),"number"===t.type&&n(f,{currentRef:v,columnKey:t.columnKey,currentRecord:t.currentRecord,compEditing:E,onCellBlur:t.onCellBlur,constraints:t.constraints,setOccurredOnCellBlur:function(){h(!0)}}),"select"===t.type&&n(m,{currentRef:v,columnKey:t.columnKey,currentRecord:t.currentRecord,compEditing:E,options:t.options,allowEmpty:t.allowEmpty,onCellBlur:t.onCellBlur,setOccurredOnCellBlur:function(){h(!0)}})]})]})})}));export{p as TableCell};
|
|
2
2
|
//# sourceMappingURL=cell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cell.js","sources":["../../../../src/table/cell.tsx"],"sourcesContent":["import {\n memo,\n useEffect,\n useRef,\n useState,\n forwardRef,\n useCallback,\n} from \"react\";\nimport { DataObject, TCellEditingCondition } from \"./type\";\nimport { EditIcon } from \"./edit-icon\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsCell = {\n currentRecord: DataObject;\n columnKey: string;\n children: string | number;\n} & TCellEditingCondition;\n\nconst CellInput = forwardRef(function CI<T extends string | number>(\n props: {\n value: T;\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;\n reset: () => void;\n endEditing: () => void;\n },\n ref: React.ForwardedRef<HTMLInputElement>\n) {\n return (\n <div className=\"flex justify-between gap-1 w-full items-center\">\n <input\n ref={ref}\n className=\"w-full py-1 px-2\"\n type=\"text\"\n value={props.value}\n onChange={props.onChange}\n onBlur={props.onBlur}\n onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n if (e.key === \"Enter\") {\n (e.target as HTMLInputElement).blur();\n } else if (e.key === \"Escape\") {\n props.reset();\n props.endEditing();\n }\n }}\n />\n <button\n onMouseDown={(e) => {\n e.preventDefault();\n props.reset();\n props.endEditing();\n }}\n >\n <CancelIcon size={16} />\n </button>\n </div>\n );\n});\n\nconst StringCellInput = forwardRef(function SI(\n props: {\n columnKey: string;\n currentRecord: DataObject;\n compEditing: () => void;\n onCellBlur: (\n key: string,\n value: string,\n current: DataObject,\n completeEditing: () => void\n ) => void;\n constraints?: { maxLength?: number; minLength?: number; pattern?: string };\n setOccurredOnCellBlur: () => void;\n },\n ref: React.ForwardedRef<HTMLInputElement>\n) {\n const [value, setValue] = useState(\n props.currentRecord[props.columnKey] as string\n );\n\n const validate = () => {\n if (props.constraints?.maxLength) {\n if (value.length > props.constraints.maxLength) {\n alert(\n `最大文字数(${props.constraints.maxLength})を超過しています。(現在${value.length}文字)`\n );\n return false;\n }\n }\n if (props.constraints?.minLength) {\n if (value.length < props.constraints.minLength) {\n alert(\n `最小文字数(${props.constraints.minLength})を下回っています。(現在${value.length}文字)`\n );\n return false;\n }\n }\n if (props.constraints?.pattern) {\n if (!new RegExp(props.constraints.pattern).test(value)) {\n alert(`パターンに一致しません。(パターン${props.constraints.pattern})`);\n return false;\n }\n }\n return true;\n };\n\n return (\n <CellInput\n ref={ref}\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n if (value === props.currentRecord[props.columnKey]) {\n props.compEditing();\n return;\n }\n\n if (!validate()) {\n setTimeout(() => {\n e.target.focus();\n }, 100);\n return;\n }\n\n props.onCellBlur(\n props.columnKey,\n value,\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n reset={() => setValue(props.currentRecord[props.columnKey])}\n endEditing={props.compEditing}\n />\n );\n});\n\nconst NumberCellInput = forwardRef(function SI(\n props: {\n columnKey: string;\n currentRecord: DataObject;\n compEditing: () => void;\n onCellBlur: (\n key: string,\n value: number,\n current: DataObject,\n completeEditing: () => void\n ) => void;\n constraints?: { max?: number; min?: number };\n setOccurredOnCellBlur: () => void;\n },\n ref: React.ForwardedRef<HTMLInputElement>\n) {\n const [value, setValue] = useState(\n (props.currentRecord[props.columnKey] as number).toString()\n );\n\n const validate = () => {\n const v = parseInt(value);\n\n if (props.constraints?.max) {\n if (v > props.constraints.max) {\n alert(\n `最大値(${props.constraints.max})を超過しています。(入力値:${v})`\n );\n return false;\n }\n }\n\n if (props.constraints?.min) {\n if (v < props.constraints.min) {\n alert(\n `最小値(${props.constraints.min})を下回っています。(入力値:${v})`\n );\n return false;\n }\n }\n\n return true;\n };\n\n return (\n <CellInput\n ref={ref}\n value={value}\n onChange={(e) => {\n e.preventDefault();\n\n if (e.target.value === \"\") {\n setValue(\"0\");\n return;\n }\n\n if (e.target.value === \"-\" || e.target.value === \"0-\") {\n setValue(\"-0\");\n return;\n }\n\n if (e.target.value.match(/^-?[0-9]+\\.$/)) {\n setValue(e.target.value);\n return;\n }\n\n if (isNaN(Number(e.target.value))) {\n return;\n }\n\n setValue(Number(e.target.value).toString());\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n if (Number(value) === props.currentRecord[props.columnKey]) {\n props.compEditing();\n return;\n }\n\n if (!validate()) {\n setTimeout(() => {\n e.target.focus();\n }, 100);\n return;\n }\n\n props.onCellBlur(\n props.columnKey,\n Number(value),\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n reset={() =>\n setValue((props.currentRecord[props.columnKey] as number).toString())\n }\n endEditing={props.compEditing}\n />\n );\n});\n\nconst SelectCellInput = forwardRef(function SI(\n props: {\n columnKey: string;\n currentRecord: DataObject;\n compEditing: () => void;\n options: { value: string; label: string }[];\n allowEmpty?: boolean;\n onCellBlur: (\n key: string,\n value: string,\n current: DataObject,\n completeEditing: () => void\n ) => void;\n setOccurredOnCellBlur: () => void;\n },\n ref: React.ForwardedRef<HTMLSelectElement>\n) {\n const [value, setValue] = useState(\n props.currentRecord[props.columnKey] as string\n );\n\n return (\n <div className=\"flex justify-between gap-1 w-full items-center\">\n <select\n ref={ref}\n className=\"w-full py-1 px-2\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n props.onCellBlur(\n props.columnKey,\n value,\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n onKeyDown={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n }\n }}\n onKeyUp={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n e.preventDefault();\n if (e.key === \"Enter\") {\n (e.target as HTMLSelectElement).blur();\n } else if (e.key === \"Escape\") {\n setValue(props.currentRecord[props.columnKey] as string);\n props.compEditing();\n }\n }}\n >\n {props.allowEmpty && (\n <option key=\"TEPPEN/ReactUI Empty Option\" value=\"\">\n {props.currentRecord[props.columnKey] == \"\"\n ? \"-- 未選択 --\"\n : \"-- 選択解除 --\"}\n </option>\n )}\n {props.options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <button\n onMouseDown={(e) => {\n e.preventDefault();\n setValue(props.currentRecord[props.columnKey] as string);\n props.compEditing();\n }}\n >\n <CancelIcon size={16} />\n </button>\n </div>\n );\n});\n\nexport const TableCell = memo(function TC(props: TPropsCell) {\n const [isEditing, setIsEditing] = useState(false);\n const ref = useRef<HTMLElement>(null);\n const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n const compEditing = useCallback(() => {\n setIsEditing(false);\n }, [setIsEditing]);\n\n useEffect(() => {\n if (isEditing) {\n ref.current?.focus();\n }\n setOccurredOnCellBlur(false);\n }, [isEditing, occurredOnCellBlur]);\n\n return (\n <td>\n <div className=\"relative\">\n <div\n className={`flex items-center gap-3 w-fit p-2 cursor-default ${\n isEditing ? \"opacity-0\" : \"\"\n }`}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n {props.type === \"component\" ? (\n props.children\n ) : (\n <div\n onDoubleClick={(e) => {\n e.preventDefault();\n if (props.editable) {\n setIsEditing(true);\n }\n }}\n >\n <p className=\"text-left\">\n {props.type === \"select\"\n ? props.options.find((op) => op.value === props.children)\n ?.label\n : props.children}\n </p>\n </div>\n )}\n\n {props.editable && (\n <button\n className=\"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200\"\n onClick={(e) => {\n e.preventDefault();\n if (props.editable) {\n setIsEditing(true);\n }\n }}\n >\n <EditIcon size={12} />\n </button>\n )}\n </div>\n {props.editable && isEditing && (\n <div\n className=\"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n {props.type === \"string\" && (\n <StringCellInput\n ref={ref as React.RefObject<HTMLInputElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n onCellBlur={props.onCellBlur}\n constraints={props.constraints}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n {props.type === \"number\" && (\n <NumberCellInput\n ref={ref as React.RefObject<HTMLInputElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n onCellBlur={props.onCellBlur}\n constraints={props.constraints}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n {props.type === \"select\" && (\n <SelectCellInput\n ref={ref as React.RefObject<HTMLSelectElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n options={props.options}\n allowEmpty={props.allowEmpty}\n onCellBlur={props.onCellBlur}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n </div>\n )}\n </div>\n </td>\n );\n});\n"],"names":["CellInput","forwardRef","props","ref","_jsxs","className","children","_jsx","type","value","onChange","onBlur","onKeyUp","e","preventDefault","key","target","blur","reset","endEditing","onMouseDown","CancelIcon","size","StringCellInput","_a","useState","currentRecord","columnKey","setValue","constraints","maxLength","length","alert","concat","_b","minLength","_c","pattern","RegExp","test","validate","setTimeout","focus","onCellBlur","compEditing","setOccurredOnCellBlur","NumberCellInput","toString","match","isNaN","Number","v","parseInt","max","min","SelectCellInput","onKeyDown","allowEmpty","options","map","option","label","TableCell","memo","isEditing","setIsEditing","useRef","occurredOnCellBlur","useCallback","useEffect","current","onClick","stopPropagation","onDoubleClick","editable","find","op","EditIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"cell.js","sources":["../../../../src/table/cell.tsx"],"sourcesContent":["import {\n memo,\n useEffect,\n useRef,\n useState,\n forwardRef,\n useCallback,\n} from \"react\";\nimport { DataObject, TCellEditingCondition } from \"./type\";\nimport { EditIcon } from \"./edit-icon\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsCell<T extends DataObject> = {\n currentRecord: T;\n columnKey: string;\n children: string | number;\n} & TCellEditingCondition<T>;\n\nconst CellInput = forwardRef(function CI<T extends string | number>(\n props: {\n value: T;\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;\n reset: () => void;\n endEditing: () => void;\n },\n ref: React.ForwardedRef<HTMLInputElement>\n) {\n return (\n <div className=\"flex justify-between gap-1 w-full items-center\">\n <input\n ref={ref}\n className=\"w-full py-1 px-2\"\n type=\"text\"\n value={props.value}\n onChange={props.onChange}\n onBlur={props.onBlur}\n onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n if (e.key === \"Enter\") {\n (e.target as HTMLInputElement).blur();\n } else if (e.key === \"Escape\") {\n props.reset();\n props.endEditing();\n }\n }}\n />\n <button\n onMouseDown={(e) => {\n e.preventDefault();\n props.reset();\n props.endEditing();\n }}\n >\n <CancelIcon size={16} />\n </button>\n </div>\n );\n});\n\nfunction StringCellInput<T extends DataObject>(props: {\n currentRef: React.ForwardedRef<HTMLInputElement>;\n columnKey: string;\n currentRecord: T;\n compEditing: () => void;\n onCellBlur: (\n key: string,\n value: string,\n current: T,\n completeEditing: () => void\n ) => void;\n constraints?: { maxLength?: number; minLength?: number; pattern?: string };\n setOccurredOnCellBlur: () => void;\n}) {\n const [value, setValue] = useState(\n props.currentRecord[props.columnKey] as string\n );\n\n const validate = () => {\n if (props.constraints?.maxLength) {\n if (value.length > props.constraints.maxLength) {\n alert(\n `最大文字数(${props.constraints.maxLength})を超過しています。(現在${value.length}文字)`\n );\n return false;\n }\n }\n if (props.constraints?.minLength) {\n if (value.length < props.constraints.minLength) {\n alert(\n `最小文字数(${props.constraints.minLength})を下回っています。(現在${value.length}文字)`\n );\n return false;\n }\n }\n if (props.constraints?.pattern) {\n if (!new RegExp(props.constraints.pattern).test(value)) {\n alert(`パターンに一致しません。(パターン${props.constraints.pattern})`);\n return false;\n }\n }\n return true;\n };\n\n return (\n <CellInput\n ref={props.currentRef}\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n if (value === props.currentRecord[props.columnKey]) {\n props.compEditing();\n return;\n }\n\n if (!validate()) {\n setTimeout(() => {\n e.target.focus();\n }, 100);\n return;\n }\n\n props.onCellBlur(\n props.columnKey,\n value,\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n reset={() => setValue(props.currentRecord[props.columnKey])}\n endEditing={props.compEditing}\n />\n );\n}\n\nfunction NumberCellInput<T extends DataObject>(props: {\n currentRef: React.ForwardedRef<HTMLInputElement>;\n columnKey: string;\n currentRecord: T;\n compEditing: () => void;\n onCellBlur: (\n key: string,\n value: number,\n current: T,\n completeEditing: () => void\n ) => void;\n constraints?: { max?: number; min?: number };\n setOccurredOnCellBlur: () => void;\n}) {\n const [value, setValue] = useState(\n (props.currentRecord[props.columnKey] as number).toString()\n );\n\n const validate = () => {\n const v = parseInt(value);\n\n if (props.constraints?.max) {\n if (v > props.constraints.max) {\n alert(\n `最大値(${props.constraints.max})を超過しています。(入力値:${v})`\n );\n return false;\n }\n }\n\n if (props.constraints?.min) {\n if (v < props.constraints.min) {\n alert(\n `最小値(${props.constraints.min})を下回っています。(入力値:${v})`\n );\n return false;\n }\n }\n\n return true;\n };\n\n return (\n <CellInput\n ref={props.currentRef}\n value={value}\n onChange={(e) => {\n e.preventDefault();\n\n if (e.target.value === \"\") {\n setValue(\"0\");\n return;\n }\n\n if (e.target.value === \"-\" || e.target.value === \"0-\") {\n setValue(\"-0\");\n return;\n }\n\n if (e.target.value.match(/^-?[0-9]+\\.$/)) {\n setValue(e.target.value);\n return;\n }\n\n if (isNaN(Number(e.target.value))) {\n return;\n }\n\n setValue(Number(e.target.value).toString());\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n if (Number(value) === props.currentRecord[props.columnKey]) {\n props.compEditing();\n return;\n }\n\n if (!validate()) {\n setTimeout(() => {\n e.target.focus();\n }, 100);\n return;\n }\n\n props.onCellBlur(\n props.columnKey,\n Number(value),\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n reset={() =>\n setValue((props.currentRecord[props.columnKey] as number).toString())\n }\n endEditing={props.compEditing}\n />\n );\n}\n\nfunction SelectCellInput<T extends DataObject>(props: {\n currentRef: React.ForwardedRef<HTMLSelectElement>;\n columnKey: string;\n currentRecord: T;\n compEditing: () => void;\n options: { value: string; label: string }[];\n allowEmpty?: boolean;\n onCellBlur: (\n key: string,\n value: string,\n current: T,\n completeEditing: () => void\n ) => void;\n setOccurredOnCellBlur: () => void;\n}) {\n const [value, setValue] = useState(\n props.currentRecord[props.columnKey] as string\n );\n\n return (\n <div className=\"flex justify-between gap-1 w-full items-center\">\n <select\n ref={props.currentRef}\n className=\"w-full py-1 px-2\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n onBlur={(e) => {\n e.preventDefault();\n\n props.onCellBlur(\n props.columnKey,\n value,\n props.currentRecord,\n props.compEditing\n );\n\n props.setOccurredOnCellBlur();\n }}\n onKeyDown={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n }\n }}\n onKeyUp={(e: React.KeyboardEvent<HTMLSelectElement>) => {\n e.preventDefault();\n if (e.key === \"Enter\") {\n (e.target as HTMLSelectElement).blur();\n } else if (e.key === \"Escape\") {\n setValue(props.currentRecord[props.columnKey] as string);\n props.compEditing();\n }\n }}\n >\n {props.allowEmpty && (\n <option key=\"TEPPEN/ReactUI Empty Option\" value=\"\">\n {props.currentRecord[props.columnKey] == \"\"\n ? \"-- 未選択 --\"\n : \"-- 選択解除 --\"}\n </option>\n )}\n {props.options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n <button\n onMouseDown={(e) => {\n e.preventDefault();\n setValue(props.currentRecord[props.columnKey] as string);\n props.compEditing();\n }}\n >\n <CancelIcon size={16} />\n </button>\n </div>\n );\n}\n\nfunction _TableCell<T extends DataObject>(props: TPropsCell<T>) {\n const [isEditing, setIsEditing] = useState(false);\n const ref = useRef<HTMLElement>(null);\n const [occurredOnCellBlur, setOccurredOnCellBlur] = useState(false);\n\n const compEditing = useCallback(() => {\n setIsEditing(false);\n }, [setIsEditing]);\n\n useEffect(() => {\n if (isEditing) {\n ref.current?.focus();\n }\n setOccurredOnCellBlur(false);\n }, [isEditing, occurredOnCellBlur]);\n\n return (\n <td>\n <div className=\"relative\">\n <div\n className={`flex items-center gap-3 w-fit p-2 cursor-default ${\n isEditing ? \"opacity-0\" : \"\"\n }`}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n {props.type === \"component\" ? (\n props.children\n ) : (\n <div\n onDoubleClick={(e) => {\n e.preventDefault();\n if (props.editable) {\n setIsEditing(true);\n }\n }}\n >\n <p className=\"text-left\">\n {props.type === \"select\"\n ? props.options.find((op) => op.value === props.children)\n ?.label\n : props.children}\n </p>\n </div>\n )}\n\n {props.editable && (\n <button\n className=\"w-fit h-fit p-1 rounded-full text-gray-500 hover:bg-gray-200\"\n onClick={(e) => {\n e.preventDefault();\n if (props.editable) {\n setIsEditing(true);\n }\n }}\n >\n <EditIcon size={12} />\n </button>\n )}\n </div>\n {props.editable && isEditing && (\n <div\n className=\"absolute top-0 left-0 w-full h-full grid place-items-center z-10 pr-2\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n >\n {props.type === \"string\" && (\n <StringCellInput\n currentRef={ref as React.RefObject<HTMLInputElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n onCellBlur={props.onCellBlur}\n constraints={props.constraints}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n {props.type === \"number\" && (\n <NumberCellInput\n currentRef={ref as React.RefObject<HTMLInputElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n onCellBlur={props.onCellBlur}\n constraints={props.constraints}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n {props.type === \"select\" && (\n <SelectCellInput\n currentRef={ref as React.RefObject<HTMLSelectElement>}\n columnKey={props.columnKey}\n currentRecord={props.currentRecord}\n compEditing={compEditing}\n options={props.options}\n allowEmpty={props.allowEmpty}\n onCellBlur={props.onCellBlur}\n setOccurredOnCellBlur={() => {\n setOccurredOnCellBlur(true);\n }}\n />\n )}\n </div>\n )}\n </div>\n </td>\n );\n}\nexport const TableCell = memo(_TableCell) as typeof _TableCell;\n"],"names":["CellInput","forwardRef","props","ref","_jsxs","className","children","_jsx","type","value","onChange","onBlur","onKeyUp","e","preventDefault","key","target","blur","reset","endEditing","onMouseDown","CancelIcon","size","StringCellInput","_a","useState","currentRecord","columnKey","setValue","currentRef","constraints","maxLength","length","alert","concat","_b","minLength","_c","pattern","RegExp","test","validate","setTimeout","focus","onCellBlur","compEditing","setOccurredOnCellBlur","NumberCellInput","toString","match","isNaN","Number","v","parseInt","max","min","SelectCellInput","onKeyDown","allowEmpty","options","map","option","label","TableCell","memo","isEditing","setIsEditing","useRef","occurredOnCellBlur","useCallback","useEffect","current","onClick","stopPropagation","onDoubleClick","editable","find","op","EditIcon"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as l,jsx as n}from"react/jsx-runtime";import{useState as t}from"react";import{useTableFilterContext as
|
|
1
|
+
import{jsxs as e,Fragment as l,jsx as n}from"react/jsx-runtime";import{useState as t,useEffect as r}from"react";import{useTableFilterContext as i,STRING_FILTER_OPERATOR as a,NUMBER_FILTER_OPERATOR as o,SELECT_FILTER_OPERATOR as c,FILTER_OPERATOR as u,TableFilterRemoveButton as d}from"./filter.js";import{CancelIcon as f}from"./cancel-icon.js";function s(s){var v=i(),p=v.addFilter,h=v.removeFilter,m=v.filterConditions,y=t(""),g=y[0],b=y[1],k=t(""),x=k[0],N=k[1],C=t(""),j=C[0],D=C[1],w=t("string"),F=w[0],z=w[1],q=s.cols.find((function(e){return e.key===g}));return r((function(){D(""),N("")}),[g]),e(l,{children:[e("div",{className:"flex flex-col gap-2 mb-5",children:[n("p",{className:"font-bold text-lg",children:"フィルタ追加"}),e("div",{className:"flex flex-wrap gap-1",children:[e("select",{value:g,onChange:function(e){var l;e.preventDefault(),b(e.target.value);var n=null===(l=s.cols.find((function(l){return l.key===e.target.value})))||void 0===l?void 0:l.type;z(n)},children:[n("option",{value:"",children:"-- 列を選択 --"}),s.cols.filter((function(e){return!!e.label&&!!e.type})).map((function(e){return n("option",{value:e.key,children:e.label},e.key)}))]}),e("select",{value:x,onChange:function(e){e.preventDefault(),N(e.target.value)},disabled:!g,children:[n("option",{value:"",children:g?"-- 条件を選択 --":"-- 列を選択してください --"}),"string"===F&&a.map((function(e){return n("option",{value:e.key,children:e.label},e.key)})),"number"===F&&o.map((function(e){return n("option",{value:e.key,children:e.label},e.key)})),"select"===F&&c.map((function(e){return n("option",{value:e.key,children:e.label},e.key)}))]}),"select"===F?e("select",{value:j,onChange:function(e){e.preventDefault(),D(e.target.value)},children:[n("option",{value:"",children:"-- 未選択 --"}),"select"===q.type&&q.options.map((function(e){return n("option",{value:e.value,children:e.label},e.value)}))]}):n("input",{type:"text",value:j,onChange:function(e){e.preventDefault(),D(e.target.value)},placeholder:"-- 値を入力 --"})]}),n("div",{className:"flex justify-end",children:n("button",{className:"bg-gray-900 text-white py-1 px-2 rounded-md",onClick:function(e){var l;if(e.preventDefault(),g&&x&&("select"===q.type||j)){var n=s.cols.find((function(e){return e.key===g}));p("string"===F?{key:g,operator:x,value:[j]}:"select"===F?{key:g,operator:x,value:j,label:"select"===n.type?null===(l=n.options.find((function(e){return e.value===j})))||void 0===l?void 0:l.label:void 0}:{key:g,operator:x,value:Number(j)})}else alert("全ての項目を入力してください")},children:"追加"})})]}),e("div",{children:[m.length>0&&n("p",{className:"font-bold text-lg",children:"フィルタ一覧"}),n("ul",{className:"flex flex-col gap-1 my-2",children:m.map((function(l){var t,r;return e("li",{className:"flex justify-between",children:[e("p",{children:["「",n("strong",{children:null===(t=s.cols.find((function(e){return e.key===l.key})))||void 0===t?void 0:t.label}),"」 は",n("span",{children:null===(r=u.find((function(e){return e.key===l.operator})))||void 0===r?void 0:r.label}),"：",n("span",{children:l.label?l.label:l.value})]}),n("button",{onClick:function(e){e.preventDefault(),h(l.id)},children:n(f,{size:16})})]},l.id)}))}),n("div",{className:"flex justify-center",children:n(d,{children:n("p",{className:"text-gray-600 underline hover:text-gray-800",children:"remove all filters"})})})]})]})}export{s as TableFilterForm};
|
|
2
2
|
//# sourceMappingURL=filter-form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-form.js","sources":["../../../../src/table/filter-form.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n FILTER_OPERATOR,\n NUMBER_FILTER_OPERATOR,\n STRING_FILTER_OPERATOR,\n TNumberFilterOperator,\n TStringFilterOperator,\n TableFilterRemoveButton,\n useTableFilterContext,\n} from \"./filter\";\nimport { TColumnType, TTableColumn } from \"./type\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsFilterForm = {\n cols: TTableColumn[];\n};\n\nexport function TableFilterForm(props: TPropsFilterForm) {\n const { addFilter, removeFilter, filterConditions } = useTableFilterContext();\n const [selectingKey, setSelectingKey] = useState<string>(\"\");\n const [selectingOperator, setSelectingOperator] = useState<string>(\"\");\n const [value, setValue] = useState<string>(\"\");\n const [filterType, setFilterType] = useState<TColumnType>(\"string\");\n\n return (\n <>\n <div className=\"flex flex-col gap-2 mb-5\">\n <p className=\"font-bold text-lg\">フィルタ追加</p>\n <div className=\"flex flex-wrap gap-1\">\n <select\n value={selectingKey}\n onChange={(e) => {\n e.preventDefault();\n setSelectingKey(e.target.value);\n const columnType = props.cols.find(\n (col) => col.key === e.target.value\n )?.type as TColumnType;\n setFilterType(columnType);\n }}\n >\n <option value=\"\">-- 列を選択 --</option>\n {props.cols\n .filter((col) => !!col.label && !!col.type)\n .map((col) => (\n <option key={col.key} value={col.key}>\n {col.label}\n </option>\n ))}\n </select>\n <select\n value={selectingOperator}\n onChange={(e) => {\n e.preventDefault();\n setSelectingOperator(e.target.value);\n }}\n disabled={!selectingKey}\n >\n <option value=\"\">\n {selectingKey ? \"-- 条件を選択 --\" : \"-- 列を選択してください --\"}\n </option>\n {filterType === \"string\" &&\n STRING_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n {filterType === \"number\" &&\n NUMBER_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n </select>\n <input\n type=\"text\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n placeholder=\"-- 値を入力 --\"\n />\n </div>\n <div className=\"flex justify-end\">\n <button\n className=\"bg-gray-900 text-white py-1 px-2 rounded-md\"\n onClick={(e) => {\n e.preventDefault();\n if (!selectingKey || !selectingOperator || !value) {\n alert(\"全ての項目を入力してください\");\n return;\n }\n addFilter(\n filterType === \"string\"\n ? {\n key: selectingKey,\n operator: selectingOperator as TStringFilterOperator,\n value: [value],\n }\n : {\n key: selectingKey,\n operator: selectingOperator as TNumberFilterOperator,\n value: Number(value),\n }\n );\n }}\n >\n 追加\n </button>\n </div>\n </div>\n <div>\n {filterConditions.length > 0 && (\n <p className=\"font-bold text-lg\">フィルタ一覧</p>\n )}\n <ul className=\"flex flex-col gap-1 my-2\">\n {filterConditions.map((f) => (\n <li key={f.id} className=\"flex justify-between\">\n <p>\n 「\n <strong>\n {props.cols.find((col) => col.key === f.key)?.label}\n </strong>\n 」 は\n <span>\n {FILTER_OPERATOR.find((op) => op.key === f.operator)?.label}\n </span>\n ：<span>{f.value}</span>\n </p>\n <button\n onClick={(e) => {\n e.preventDefault();\n removeFilter(f.id);\n }}\n >\n <CancelIcon size={16} />\n </button>\n </li>\n ))}\n </ul>\n <div className=\"flex justify-center\">\n <TableFilterRemoveButton>\n <p className=\"text-gray-600 underline hover:text-gray-800\">\n remove all filters\n </p>\n </TableFilterRemoveButton>\n </div>\n </div>\n </>\n );\n}\n"],"names":["TableFilterForm","props","_a","useTableFilterContext","addFilter","removeFilter","filterConditions","_b","useState","selectingKey","setSelectingKey","_c","selectingOperator","setSelectingOperator","_d","value","setValue","_e","filterType","setFilterType","_jsxs","_Fragment","children","className","_jsx","onChange","e","preventDefault","target","columnType","cols","find","col","key","type","filter","label","map","disabled","STRING_FILTER_OPERATOR","op","NUMBER_FILTER_OPERATOR","placeholder","onClick","operator","Number","alert","length","f","FILTER_OPERATOR","id","CancelIcon","size","TableFilterRemoveButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"filter-form.js","sources":["../../../../src/table/filter-form.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport {\n FILTER_OPERATOR,\n NUMBER_FILTER_OPERATOR,\n SELECT_FILTER_OPERATOR,\n STRING_FILTER_OPERATOR,\n TNumberFilterOperator,\n TSelectFilterOperator,\n TStringFilterOperator,\n TableFilterRemoveButton,\n useTableFilterContext,\n} from \"./filter\";\nimport { DataObject, TColumnType, TTableColumn } from \"./type\";\nimport { CancelIcon } from \"./cancel-icon\";\n\ntype TPropsFilterForm<T extends DataObject> = {\n cols: TTableColumn<T>[];\n};\n\nexport function TableFilterForm<T extends DataObject>(\n props: TPropsFilterForm<T>\n) {\n const { addFilter, removeFilter, filterConditions } = useTableFilterContext();\n const [selectingKey, setSelectingKey] = useState<string>(\"\");\n const [selectingOperator, setSelectingOperator] = useState<string>(\"\");\n const [value, setValue] = useState<string>(\"\");\n const [filterType, setFilterType] = useState<TColumnType>(\"string\");\n\n const filterColumn = props.cols.find((col) => col.key === selectingKey)!;\n\n useEffect(() => {\n setValue(\"\");\n setSelectingOperator(\"\");\n }, [selectingKey]);\n\n return (\n <>\n <div className=\"flex flex-col gap-2 mb-5\">\n <p className=\"font-bold text-lg\">フィルタ追加</p>\n <div className=\"flex flex-wrap gap-1\">\n <select\n value={selectingKey}\n onChange={(e) => {\n e.preventDefault();\n setSelectingKey(e.target.value);\n const columnType = props.cols.find(\n (col) => col.key === e.target.value\n )?.type as TColumnType;\n setFilterType(columnType);\n }}\n >\n <option value=\"\">-- 列を選択 --</option>\n {props.cols\n .filter((col) => !!col.label && !!col.type)\n .map((col) => (\n <option key={col.key} value={col.key}>\n {col.label}\n </option>\n ))}\n </select>\n <select\n value={selectingOperator}\n onChange={(e) => {\n e.preventDefault();\n setSelectingOperator(e.target.value);\n }}\n disabled={!selectingKey}\n >\n <option value=\"\">\n {selectingKey ? \"-- 条件を選択 --\" : \"-- 列を選択してください --\"}\n </option>\n {filterType === \"string\" &&\n STRING_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n {filterType === \"number\" &&\n NUMBER_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n {filterType === \"select\" &&\n SELECT_FILTER_OPERATOR.map((op) => (\n <option key={op.key} value={op.key}>\n {op.label}\n </option>\n ))}\n </select>\n {filterType === \"select\" ? (\n <select\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n >\n <option value=\"\">-- 未選択 --</option>\n {filterColumn.type === \"select\" &&\n filterColumn.options.map((op) => (\n <option key={op.value} value={op.value}>\n {op.label}\n </option>\n ))}\n </select>\n ) : (\n <input\n type=\"text\"\n value={value}\n onChange={(e) => {\n e.preventDefault();\n setValue(e.target.value);\n }}\n placeholder=\"-- 値を入力 --\"\n />\n )}\n </div>\n <div className=\"flex justify-end\">\n <button\n className=\"bg-gray-900 text-white py-1 px-2 rounded-md\"\n onClick={(e) => {\n e.preventDefault();\n if (\n !selectingKey ||\n !selectingOperator ||\n (filterColumn.type !== \"select\" && !value)\n ) {\n alert(\"全ての項目を入力してください\");\n return;\n }\n\n const addFilterColumn = props.cols.find(\n (col) => col.key === selectingKey\n )!;\n\n addFilter(\n filterType === \"string\"\n ? {\n key: selectingKey,\n operator: selectingOperator as TStringFilterOperator,\n value: [value],\n }\n : filterType === \"select\"\n ? {\n key: selectingKey,\n operator: selectingOperator as TSelectFilterOperator,\n value: value,\n label:\n addFilterColumn.type === \"select\"\n ? addFilterColumn.options.find(\n (op) => op.value === value\n )?.label\n : undefined,\n }\n : {\n key: selectingKey,\n operator: selectingOperator as TNumberFilterOperator,\n value: Number(value),\n }\n );\n }}\n >\n 追加\n </button>\n </div>\n </div>\n <div>\n {filterConditions.length > 0 && (\n <p className=\"font-bold text-lg\">フィルタ一覧</p>\n )}\n <ul className=\"flex flex-col gap-1 my-2\">\n {filterConditions.map((f) => (\n <li key={f.id} className=\"flex justify-between\">\n <p>\n 「\n <strong>\n {props.cols.find((col) => col.key === f.key)?.label}\n </strong>\n 」 は\n <span>\n {FILTER_OPERATOR.find((op) => op.key === f.operator)?.label}\n </span>\n ：<span>{f.label ? f.label : f.value}</span>\n </p>\n <button\n onClick={(e) => {\n e.preventDefault();\n removeFilter(f.id);\n }}\n >\n <CancelIcon size={16} />\n </button>\n </li>\n ))}\n </ul>\n <div className=\"flex justify-center\">\n <TableFilterRemoveButton>\n <p className=\"text-gray-600 underline hover:text-gray-800\">\n remove all filters\n </p>\n </TableFilterRemoveButton>\n </div>\n </div>\n </>\n );\n}\n"],"names":["TableFilterForm","props","_a","useTableFilterContext","addFilter","removeFilter","filterConditions","_b","useState","selectingKey","setSelectingKey","_c","selectingOperator","setSelectingOperator","_d","value","setValue","_e","filterType","setFilterType","filterColumn","cols","find","col","key","useEffect","_jsxs","_Fragment","children","className","_jsx","onChange","e","preventDefault","target","columnType","type","filter","label","map","disabled","STRING_FILTER_OPERATOR","op","NUMBER_FILTER_OPERATOR","SELECT_FILTER_OPERATOR","options","placeholder","onClick","addFilterColumn","operator","undefined","Number","alert","length","f","FILTER_OPERATOR","id","CancelIcon","size","TableFilterRemoveButton"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__spreadArray as e,__assign as
|
|
1
|
+
import{__spreadArray as e,__assign as t}from"../../node_modules/tslib/tslib.es6.js";import{jsx as r}from"react/jsx-runtime";import{createContext as n,useReducer as i,useCallback as l,useContext as u}from"react";import{FIlterIcon as c}from"./filter-icon.js";var o=[{key:"includeText",label:"次の値を含む"}],a=[{key:"eq",label:"次の値と等しい"},{key:"ne",label:"次の値と等しくない"},{key:"gt",label:"次の値より大きい"},{key:"lt",label:"次の値より小さい"},{key:"gte",label:"次の値以上"},{key:"lte",label:"次の値以下"}],f=[{key:"selected",label:"次の値と等しい"},{key:"notSelected",label:"次の値と等しくない"}],s=e(e(e([],o,!0),a,!0),f,!0);function d(r,n){switch(n.type){case"add":return{filters:e(e([],r.filters,!0),[t({id:(new Date).getTime()},n.payload.filter)],!1)};case"remove":return{filters:r.filters.filter((function(e){return e.id!==n.payload.id}))};case"clear":return{filters:[]}}}function y(){var e=i(d,{filters:[]}),t=e[0],r=e[1],n=l((function(e){return r({type:"add",payload:{filter:e}})}),[r]);return{addFilter:n,removeFilter:l((function(e){return r({type:"remove",payload:{id:e}})}),[r]),clearFilter:l((function(){return r({type:"clear"})}),[r]),filter:l((function(e){return t.filters.reduce((function(e,t){switch(t.operator){case"includeText":return e.filter((function(e){var r=e[t.key];return"string"==typeof r&&t.value.some((function(e){return r.includes(e)}))}));case"eq":case"selected":return e.filter((function(e){return e[t.key]===t.value}));case"ne":case"notSelected":return e.filter((function(e){return e[t.key]!==t.value}));case"gt":return e.filter((function(e){return e[t.key]>t.value}));case"lt":return e.filter((function(e){return e[t.key]<t.value}));case"gte":return e.filter((function(e){return e[t.key]>=t.value}));case"lte":return e.filter((function(e){return e[t.key]<=t.value}))}}),e)}),[t]),filterConditions:t.filters}}var v=n({addFilter:function(){},removeFilter:function(){},clearFilter:function(){},filter:function(){return[]},filterConditions:[]});function k(e){var t=e.children;return r(v.Provider,{value:y(),children:t})}function m(){return u(v)}function p(e){var t=m().filterConditions;return r("div",{className:"relative cursor-pointer",onClick:e.onClick,children:r(c,{isFilterActive:t.filter((function(t){return t.key===e.keyName})).length>0})})}function b(e){var t=e.children,n=m(),i=n.clearFilter;if(0!==n.filterConditions.length)return r("button",{onClick:function(e){e.preventDefault(),i()},children:t})}export{s as FILTER_OPERATOR,a as NUMBER_FILTER_OPERATOR,f as SELECT_FILTER_OPERATOR,o as STRING_FILTER_OPERATOR,p as TableFilter,k as TableFilterProvider,b as TableFilterRemoveButton,d as filterReducer,m as useTableFilterContext};
|
|
2
2
|
//# sourceMappingURL=filter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter.js","sources":["../../../../src/table/filter.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useReducer } from \"react\";\nimport { DataObject } from \"./type\";\nimport { FIlterIcon } from \"./filter-icon\";\n\nexport const STRING_FILTER_OPERATOR = [\n { key: \"includeText\", label: \"次の値を含む\" },\n] as const;\n\nexport const NUMBER_FILTER_OPERATOR = [\n { key: \"eq\", label: \"次の値と等しい\" },\n { key: \"ne\", label: \"次の値と等しくない\" },\n { key: \"gt\", label: \"次の値より大きい\" },\n { key: \"lt\", label: \"次の値より小さい\" },\n { key: \"gte\", label: \"次の値以上\" },\n { key: \"lte\", label: \"次の値以下\" },\n] as const;\n\nexport const FILTER_OPERATOR = [\n ...STRING_FILTER_OPERATOR,\n ...NUMBER_FILTER_OPERATOR,\n] as const;\n\nexport type TStringFilterOperator =\n (typeof STRING_FILTER_OPERATOR)[number][\"key\"];\nexport type TNumberFilterOperator =\n (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\nexport type TFilterOperator
|
|
1
|
+
{"version":3,"file":"filter.js","sources":["../../../../src/table/filter.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useReducer } from \"react\";\nimport { DataObject } from \"./type\";\nimport { FIlterIcon } from \"./filter-icon\";\n\nexport const STRING_FILTER_OPERATOR = [\n { key: \"includeText\", label: \"次の値を含む\" },\n] as const;\n\nexport const NUMBER_FILTER_OPERATOR = [\n { key: \"eq\", label: \"次の値と等しい\" },\n { key: \"ne\", label: \"次の値と等しくない\" },\n { key: \"gt\", label: \"次の値より大きい\" },\n { key: \"lt\", label: \"次の値より小さい\" },\n { key: \"gte\", label: \"次の値以上\" },\n { key: \"lte\", label: \"次の値以下\" },\n] as const;\n\nexport const SELECT_FILTER_OPERATOR = [\n { key: \"selected\", label: \"次の値と等しい\" },\n { key: \"notSelected\", label: \"次の値と等しくない\" },\n] as const;\n\nexport const FILTER_OPERATOR = [\n ...STRING_FILTER_OPERATOR,\n ...NUMBER_FILTER_OPERATOR,\n ...SELECT_FILTER_OPERATOR,\n] as const;\n\nexport type TStringFilterOperator =\n (typeof STRING_FILTER_OPERATOR)[number][\"key\"];\nexport type TNumberFilterOperator =\n (typeof NUMBER_FILTER_OPERATOR)[number][\"key\"];\nexport type TSelectFilterOperator =\n (typeof SELECT_FILTER_OPERATOR)[number][\"key\"];\nexport type TFilterOperator =\n | TStringFilterOperator\n | TNumberFilterOperator\n | TSelectFilterOperator;\n\ntype TStringFilter = {\n key: string;\n operator: TStringFilterOperator;\n value: string[];\n label?: string;\n};\n\ntype TNumberFilter = {\n key: string;\n operator: TNumberFilterOperator;\n value: number;\n label?: string;\n};\n\ntype TSelectFilter = {\n key: string;\n operator: TSelectFilterOperator;\n value: string;\n label?: string;\n};\n\ntype TFilter = TStringFilter | TNumberFilter | TSelectFilter;\n\ntype TFilterState = {\n filters: ({ id: number } & TFilter)[];\n};\n\ntype TFilterAction =\n | { type: \"add\"; payload: { filter: TFilter } }\n | { type: \"remove\"; payload: { id: number } }\n | { type: \"clear\" };\n\nexport function filterReducer(\n state: TFilterState,\n action: TFilterAction\n): TFilterState {\n switch (action.type) {\n case \"add\":\n return {\n filters: [\n ...state.filters,\n { id: new Date().getTime(), ...action.payload.filter },\n ],\n };\n case \"remove\":\n return {\n filters: state.filters.filter((f) => f.id !== action.payload.id),\n };\n case \"clear\":\n return { filters: [] };\n }\n}\n\nfunction useFilterReducer() {\n const [state, dispatch] = useReducer(filterReducer, { filters: [] });\n\n const addFilter = useCallback(\n (filter: TFilter) => dispatch({ type: \"add\", payload: { filter } }),\n [dispatch]\n );\n const removeFilter = useCallback(\n (id: number) => dispatch({ type: \"remove\", payload: { id } }),\n [dispatch]\n );\n const clearFilter = useCallback(\n () => dispatch({ type: \"clear\" }),\n [dispatch]\n );\n\n const filter = useCallback(\n <T extends DataObject>(rows: T[]): T[] => {\n return state.filters.reduce((acc, filter) => {\n switch (filter.operator) {\n case \"includeText\":\n return acc.filter((row) => {\n const value = row[filter.key];\n if (typeof value === \"string\") {\n return filter.value.some((v) => value.includes(v));\n }\n return false;\n });\n case \"eq\":\n return acc.filter((row) => row[filter.key] === filter.value);\n case \"ne\":\n return acc.filter((row) => row[filter.key] !== filter.value);\n case \"gt\":\n return acc.filter((row) => row[filter.key] > filter.value);\n case \"lt\":\n return acc.filter((row) => row[filter.key] < filter.value);\n case \"gte\":\n return acc.filter((row) => row[filter.key] >= filter.value);\n case \"lte\":\n return acc.filter((row) => row[filter.key] <= filter.value);\n case \"selected\":\n return acc.filter((row) => row[filter.key] === filter.value);\n case \"notSelected\":\n return acc.filter((row) => row[filter.key] !== filter.value);\n }\n }, rows);\n },\n [state]\n );\n\n return {\n addFilter,\n removeFilter,\n clearFilter,\n filter,\n filterConditions: state.filters,\n };\n}\n\nconst TableFilterContext = createContext<ReturnType<typeof useFilterReducer>>({\n addFilter: () => {},\n removeFilter: () => {},\n clearFilter: () => {},\n filter: () => [],\n filterConditions: [],\n});\n\nexport function TableFilterProvider({\n children,\n}: {\n children: JSX.Element | JSX.Element[];\n}) {\n return (\n <TableFilterContext.Provider value={useFilterReducer()}>\n {children}\n </TableFilterContext.Provider>\n );\n}\n\nexport function useTableFilterContext() {\n return useContext(TableFilterContext);\n}\n\ntype TPropsTableFilter = {\n keyName: string;\n onClick: React.MouseEventHandler<HTMLDivElement>;\n};\n\nexport function TableFilter(props: TPropsTableFilter) {\n const { filterConditions } = useTableFilterContext();\n\n return (\n <div className=\"relative cursor-pointer\" onClick={props.onClick}>\n <FIlterIcon\n isFilterActive={\n filterConditions.filter((f) => f.key === props.keyName).length > 0\n }\n />\n </div>\n );\n}\n\nexport function TableFilterRemoveButton({\n children,\n}: {\n children: React.ReactNode;\n}) {\n const { clearFilter, filterConditions } = useTableFilterContext();\n\n if (filterConditions.length === 0) {\n return;\n }\n\n return (\n <button\n onClick={(e) => {\n e.preventDefault();\n clearFilter();\n }}\n >\n {children}\n </button>\n );\n}\n"],"names":["STRING_FILTER_OPERATOR","key","label","NUMBER_FILTER_OPERATOR","SELECT_FILTER_OPERATOR","FILTER_OPERATOR","__spreadArray","filterReducer","state","action","type","filters","__assign","id","Date","getTime","payload","filter","f","useFilterReducer","_a","useReducer","dispatch","addFilter","useCallback","removeFilter","clearFilter","rows","reduce","acc","operator","row","value","some","v","includes","filterConditions","TableFilterContext","createContext","TableFilterProvider","children","_jsx","Provider","useTableFilterContext","useContext","TableFilter","props","className","onClick","FIlterIcon","isFilterActive","keyName","length","TableFilterRemoveButton","_b","e","preventDefault"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";function n(n){return e("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[t("div",{className:"px-2",children:t("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[80%] min-w-20",children:n.label})}),n.label&&
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";function n(n){return e("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[n.label&&t("div",{className:"px-2",children:t("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis ".concat(n.filterComponent&&n.sortConponent?"w-[80%] min-w-20":n.filterComponent||n.sortConponent?"w-[90%] min-w-20":"min-w-10"," "),children:n.label})}),n.label&&e("div",{className:"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2",children:[n.filterComponent&&n.filterComponent,n.sortConponent&&n.sortConponent]})]})}export{n as TableHeaderElement};
|
|
2
2
|
//# sourceMappingURL=header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n label?: string;\n
|
|
1
|
+
{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n label?: string;\n sortConponent?: JSX.Element;\n filterComponent?: JSX.Element;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n return (\n <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n {props.label && (\n <div className=\"px-2\">\n <p\n className={`text-left font-bold text-nowrap overflow-hidden text-ellipsis ${\n props.filterComponent && props.sortConponent\n ? \"w-[80%] min-w-20\"\n : !props.filterComponent && !props.sortConponent\n ? \"min-w-10\"\n : \"w-[90%] min-w-20\"\n } `}\n >\n {props.label}\n </p>\n </div>\n )}\n\n {props.label && (\n <div className=\"absolute flex items-center gap-1 top-1/2 right-1 -translate-y-1/2\">\n {props.filterComponent && props.filterComponent}\n {props.sortConponent && props.sortConponent}\n </div>\n )}\n </th>\n );\n}\n"],"names":["TableHeaderElement","props","_jsxs","className","children","label","_jsx","concat","filterComponent","sortConponent"],"mappings":"kDAMM,SAAUA,EAAmBC,GACjC,OACEC,EAAI,KAAA,CAAAC,UAAW,8CACZC,SAAA,CAAAH,EAAMI,OACLC,EAAK,MAAA,CAAAH,UAAU,OAAMC,SACnBE,EACE,IAAA,CAAAH,UAAW,iEAAAI,OACTN,EAAMO,iBAAmBP,EAAMQ,cAC3B,mBACCR,EAAMO,iBAAoBP,EAAMQ,cAEjC,mBADA,WACkB,cAGvBR,EAAMI,UAKZJ,EAAMI,OACLH,EAAA,MAAA,CAAKC,UAAU,oEACZC,SAAA,CAAAH,EAAMO,iBAAmBP,EAAMO,gBAC/BP,EAAMQ,eAAiBR,EAAMQ,mBAKxC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,32 +5,32 @@ type DataObject = {
|
|
|
5
5
|
id: number | string;
|
|
6
6
|
onClick?: React.MouseEventHandler<HTMLTableRowElement>;
|
|
7
7
|
};
|
|
8
|
-
type TStringCellEditingCondition = ({
|
|
8
|
+
type TStringCellEditingCondition<T extends DataObject> = ({
|
|
9
9
|
type: "string";
|
|
10
10
|
} & ({
|
|
11
11
|
editable?: false;
|
|
12
12
|
} | {
|
|
13
13
|
editable: true;
|
|
14
|
-
onCellBlur: (key: string, value: string, current:
|
|
14
|
+
onCellBlur: (key: string, value: string, current: T, completeEditing: () => void) => void;
|
|
15
15
|
constraints?: {
|
|
16
16
|
maxLength?: number;
|
|
17
17
|
minLength?: number;
|
|
18
18
|
pattern?: string;
|
|
19
19
|
};
|
|
20
20
|
}));
|
|
21
|
-
type TNumberCellEditingCondition = ({
|
|
21
|
+
type TNumberCellEditingCondition<T extends DataObject> = ({
|
|
22
22
|
type: "number";
|
|
23
23
|
} & ({
|
|
24
24
|
editable?: false;
|
|
25
25
|
} | {
|
|
26
26
|
editable: true;
|
|
27
|
-
onCellBlur: (key: string, value: number, current:
|
|
27
|
+
onCellBlur: (key: string, value: number, current: T, completeEditing: () => void) => void;
|
|
28
28
|
constraints?: {
|
|
29
29
|
max?: number;
|
|
30
30
|
min?: number;
|
|
31
31
|
};
|
|
32
32
|
}));
|
|
33
|
-
type TSelectCellEditingCondition = ({
|
|
33
|
+
type TSelectCellEditingCondition<T extends DataObject> = ({
|
|
34
34
|
type: "select";
|
|
35
35
|
options: {
|
|
36
36
|
value: string;
|
|
@@ -41,19 +41,19 @@ type TSelectCellEditingCondition = ({
|
|
|
41
41
|
} | {
|
|
42
42
|
editable: true;
|
|
43
43
|
allowEmpty?: boolean;
|
|
44
|
-
onCellBlur: (key: string, value: string, current:
|
|
44
|
+
onCellBlur: (key: string, value: string, current: T, completeEditing: () => void) => void;
|
|
45
45
|
}));
|
|
46
46
|
type TComponentCellEditingCondition = {
|
|
47
47
|
type: "component";
|
|
48
48
|
editable?: false;
|
|
49
49
|
};
|
|
50
|
-
type TCellEditingCondition = TStringCellEditingCondition | TNumberCellEditingCondition | TSelectCellEditingCondition | TComponentCellEditingCondition;
|
|
51
|
-
type TTableColumn = {
|
|
50
|
+
type TCellEditingCondition<T extends DataObject> = TStringCellEditingCondition<T> | TNumberCellEditingCondition<T> | TSelectCellEditingCondition<T> | TComponentCellEditingCondition;
|
|
51
|
+
type TTableColumn<T extends DataObject> = {
|
|
52
52
|
key: string;
|
|
53
53
|
label?: string;
|
|
54
|
-
} & TCellEditingCondition
|
|
54
|
+
} & TCellEditingCondition<T>;
|
|
55
55
|
type TPropsTable<T extends DataObject> = {
|
|
56
|
-
cols: TTableColumn[];
|
|
56
|
+
cols: TTableColumn<T>[];
|
|
57
57
|
rows: T[];
|
|
58
58
|
};
|
|
59
59
|
|