Transaction: CV5DQnf...VfGG

{ "data": { "socializer.near": { "widget": { "table-pagination": { "": "if (!props.data || !props.columns) {\n return \"column and data props are required.\";\n}\n\nconst { data, columns, searchValue } = props;\n\nState.init({ currentPage: 1, list: data, loaded: false });\n\nconst rowsCount = props.rowsCount || 5;\nconst themeColor = props.themeColor;\nconst timer = props.timer ?? false;\n\nlet Interval = null;\n\nconst handlePagination = () => {\n if (!rowsCount) return { table: state.list };\n const currentPage = state.currentPage;\n const totalPages = Math.ceil(state.list.length / rowsCount);\n const currentTableData = state.list.slice(\n (currentPage - 1) * rowsCount,\n rowsCount * currentPage\n );\n const buttons = Array(totalPages).fill(0);\n buttons[currentPage - 1] = 1;\n return { buttons, table: currentTableData };\n};\nconst Table = styled.table`\n --bs-table-color: ${themeColor?.table_pagination?.table_color};\n --bs-table-bg: ${themeColor?.table_pagination?.table_bg};\n --bs-table-border-color: ${themeColor?.table_pagination?.table_border_color};\n --bs-table-accent-bg: ${themeColor?.table_pagination?.table_accent_bg};\n --bs-table-striped-color: ${themeColor?.table_pagination?.table_striped_color};\n --bs-table-striped-bg: ${themeColor?.table_pagination?.table_striped_bg};\n --bs-table-hover-color: ${themeColor?.table_pagination?.table_hover_color};\n --bs-table-hover-bg:${themeColor?.table_pagination?.table_hover_bg};\n --bs-table-hover-bg:${themeColor?.table_pagination?.columntextcolor};\n border-radius: 8px;\n background: #F5F1F1;\n margin: 0;\n`;\n\nconst Button = styled.button`\n padding: 4px 16px;\n border-radius: 6px;\n background: var(--Dark, #121212);\n text-transform: capitalize;\n font-weight: 600;\n font-size: 12px;\n color: #FFF;\n`;\n\nconst onHandelId = (id) => {\n let customId = \"\";\n if (id.length > 15) {\n customId += id.substring(0, 3);\n customId += \"...\";\n customId += id.substring(id.length - 3);\n return customId;\n } else {\n return id;\n }\n};\n\nconst getTimeRemaining = (e) => {\n const total = Date.parse(e) - Date.parse(new Date());\n const seconds = Math.floor((total / 1000) % 60);\n const minutes = Math.floor((total / 1000 / 60) % 60);\n const hours = Math.floor((total / 1000 / 60 / 60) % 24);\n return {\n total,\n hours,\n minutes,\n seconds,\n };\n};\nconsole.log(data, \"==>list\");\nconst startTimer = () => {\n if (!data.length) return;\n console.log(data, \"==>list222\");\n const compaign = data.map((row) => {\n let { total, hours, minutes, seconds } = getTimeRemaining(row.ends);\n if (total <= 0) {\n return {};\n }\n return {\n ...row,\n endsin: `Ends in ${hours}hr ${minutes}m ${seconds}s`,\n };\n });\n\n if (!compaign.length) return;\n State.update({\n list: compaign,\n loaded: true,\n });\n};\n\nconst setEndsIn = () => {\n if (Interval) clearInterval(Interval);\n const interval = setInterval(() => {\n startTimer();\n }, 1000);\n Interval = interval;\n};\nif (timer && !state.loaded) setEndsIn();\nelse if (!timer && Interval) clearInterval(Interval);\n\nreturn (\n <div className=\"table-responsive\" style={{ backgroundColor: \"#FAFAFA\" }}>\n <div style={{ borderRadius: 8, border: \"1px solid #AAA\" }}>\n <Table\n className={`table table-hover table-striped table-borderless ${props.className}`}\n >\n <thead>\n <tr>\n {columns.map((th) => (\n <th\n key={th.title}\n className=\"col-1\"\n style={{\n fontSize: 12,\n width: `${th.width}%`,\n verticalAlign: \"middle\",\n textAlign: th.align,\n }}\n scope=\"col\"\n >\n <div>\n {th.description ? (\n <OverlayTrigger\n placement={th.position || \"top\"}\n overlay={<Tooltip>{th.description}</Tooltip>}\n >\n <span>{th.title}</span>\n </OverlayTrigger>\n ) : (\n <span>{th.title}</span>\n )}\n </div>\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {state.list.length > 0 &&\n handlePagination()\n .table.filter((row) => {\n if (!searchValue) return true;\n const profile = Social.getr(`${row.accountId}/profile`);\n const name = profile.name ?? row.accountId;\n return name\n .toLocaleLowerCase()\n .includes(searchValue.toLocaleLowerCase() ?? \"\");\n })\n .map((row, i) => {\n // .table.filter((row) =>\n // Object.values(row).some((value) =>\n // value.toString().includes(searchValue ?? \"\")\n // )\n // row.name.includes(searchValue ?? \"\")\n return (\n <tr key={row.key}>\n {columns.map((td) => {\n const key = td.key ? row[td.key] : i + 1;\n const value = key || td.value;\n let name = \"\";\n if (td.project) {\n const profile = Social.getr(`${key}/profile`);\n name = profile.name ?? key;\n State.update({\n [key]: `https://i.near.social/magic/large/https://near.social/magic/img/account/${key}`,\n });\n }\n return (\n <td\n style={{\n color:\n td.colors ||\n themeColor?.table_pagination?.columntextcolor,\n fontSize: 12,\n textAlign: td.align,\n verticalAlign: \"middle\",\n }}\n >\n {td.project ? (\n <div\n style={{\n display: \"flex\",\n gap: 10,\n alignItems: \"center\",\n }}\n >\n <img\n style={{\n width: 40,\n height: 40,\n borderRadius: 50,\n }}\n src={state[key]}\n onError={() => {\n State.update({\n [key]:\n \"https://ipfs.near.social/ipfs/bafkreibmiy4ozblcgv3fm3gc6q62s55em33vconbavfd2ekkuliznaq3zm\",\n });\n }}\n />\n {name}\n </div>\n ) : td.link ? (\n <div\n className={`d-flex ${\n td.align === \"center\" &&\n \"justify-content-center align-items-center\"\n }`}\n style={{\n \"text-decoration\": \"none\",\n color: value\n ? value === \"won\"\n ? \"#4886fe\"\n : value === \"lost\"\n ? \"#be7c05\"\n : \"gray\"\n : \"#4886fe\",\n cursor: \"pointer\",\n }}\n onClick={() => td.click(row)}\n >\n {td.icon ? (\n <a href={value} target=\"_blank\">\n {td.icon}\n </a>\n ) : (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n >\n <path\n fill=\"currentColor\"\n d=\"M9.043 5.793L2.836 12l6.207 6.207l1.414-1.414L5.664 12l4.793-4.793l-1.414-1.414Zm5.914 12.414L21.164 12l-6.207-6.207l-1.414 1.414L18.336 12l-4.793 4.793l1.414 1.414Z\"\n />\n </svg>\n )}\n </div>\n ) : td.button ? (\n <Button onClick={() => td.click(row)}>\n {value}\n </Button>\n ) : (\n value\n )}\n </td>\n );\n })}\n </tr>\n );\n })}\n </tbody>\n </Table>\n </div>\n\n {rowsCount && (\n <div className=\"d-flex justify-content-end\">\n <div>\n <ul\n className=\"pagination pagination-sm gap-2 mb-0 \"\n style={{ height: 56, backgroundColor: \"white\", padding: 12 }}\n >\n <li className=\"page-item\">\n <button\n onClick={() => {\n const page = state.currentPage - 1;\n if (page > 0) State.update({ currentPage: page });\n }}\n className=\"page-link btn\"\n style={{\n width: 32,\n height: 32,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n borderRadius: 8,\n color: themeColor?.table_pagination?.btn_color ?? \"#000\",\n }}\n >\n <svg\n width=\"17\"\n height=\"16\"\n viewBox=\"0 0 17 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10.3292 12L11.2692 11.06L8.21589 8L11.2692 4.94L10.3292 4L6.32923 8L10.3292 12Z\"\n fill=\"black\"\n />\n </svg>\n </button>\n </li>\n {state.list.length > 0 &&\n handlePagination().buttons.map((btn, i) => {\n return (\n <li key={i} className=\"page-item\">\n <button\n onClick={() => State.update({ currentPage: i + 1 })}\n className=\"page-link btn\"\n style={{\n width: 32,\n height: 32,\n padding: 6,\n borderRadius: 8,\n background:\n state.currentPage === i + 1 ? \"#121212\" : \"#fff\",\n borderColor:\n themeColor?.table_pagination?.btn_border ?? \"#000\",\n color: state.currentPage === i + 1 ? \"#fff\" : \"#000\",\n }}\n >\n {i + 1}\n </button>\n </li>\n );\n })}\n <li className=\"page-item\">\n <button\n onClick={() => {\n const page = state.currentPage + 1;\n if (handlePagination().buttons.length >= page)\n State.update({ currentPage: page });\n }}\n className=\"page-link btn\"\n style={{\n width: 32,\n height: 32,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n borderRadius: 8,\n color: themeColor?.table_pagination?.btn_color ?? \"#000\",\n }}\n >\n <svg\n width=\"17\"\n height=\"16\"\n viewBox=\"0 0 17 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6.20923 4L5.26923 4.94L8.32256 8L5.26923 11.06L6.20923 12L10.2092 8L6.20923 4Z\"\n fill=\"black\"\n />\n </svg>\n </button>\n </li>\n </ul>\n </div>\n </div>\n )}\n </div>\n);\n" } } } } }