From 84e8202ed643e728d9930e5d5405ad54a3731a06 Mon Sep 17 00:00:00 2001 From: Adam Gastineau Date: Sun, 7 Jun 2020 14:47:48 -0700 Subject: [PATCH 1/6] Initial rendering support of GridView --- package-lock.json | 172 ++++++++++-------- package.json | 2 +- .../GridView/GridColumn/RNGridColumn.ts | 66 +++++++ src/components/GridView/GridColumn/index.ts | 49 +++++ src/components/GridView/GridRow/RNGridRow.ts | 84 +++++++++ src/components/GridView/GridRow/index.ts | 47 +++++ src/components/GridView/RNGridView.ts | 101 ++++++++++ src/components/GridView/index.ts | 51 ++++++ src/demo.tsx | 22 ++- 9 files changed, 511 insertions(+), 83 deletions(-) create mode 100644 src/components/GridView/GridColumn/RNGridColumn.ts create mode 100644 src/components/GridView/GridColumn/index.ts create mode 100644 src/components/GridView/GridRow/RNGridRow.ts create mode 100644 src/components/GridView/GridRow/index.ts create mode 100644 src/components/GridView/RNGridView.ts create mode 100644 src/components/GridView/index.ts diff --git a/package-lock.json b/package-lock.json index 238fe286..83d5fc03 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,9 @@ "dev": true }, "7zip-min": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/7zip-min/-/7zip-min-1.1.1.tgz", - "integrity": "sha512-GPTk3xycxB0NjRM1SKAUL7TWXjgFAyzwXkamkk5YgSLd6OneeWBw+fxULctrVr4XqPBBh+LyqpHlyj9ryfpqoQ==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/7zip-min/-/7zip-min-1.1.2.tgz", + "integrity": "sha512-CkGc+r0H4rOPsvxHiNb8W3tonGafz+E6pYrqJBIVVMHaJv8cZDY6mGqbrIpsFhoui9bIkLev8MoP/lvy2hjjXA==", "dev": true, "requires": { "7zip-bin": "^5.0.3" @@ -33,13 +33,13 @@ } }, "@nodegui/nodegui": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/@nodegui/nodegui/-/nodegui-0.18.0.tgz", - "integrity": "sha512-dffONE5U9k4K7401LKqcB7NZC+yFBpyA2hsF8O04xaz75y9y5TjkuNDwHDfkSLs2sg/4tBp9hHNH0VywkAj/YA==", + "version": "0.21.0", + "resolved": "https://registry.npmjs.org/@nodegui/nodegui/-/nodegui-0.21.0.tgz", + "integrity": "sha512-QkWqWGbbJvGRbAQ4o9O+ZdefeYlmxkuMuyARwK8WxiXFPxCO06XOswu1s0LhO4jmvILIVGLO2SRYSuG5muj3eQ==", "dev": true, "requires": { "@nodegui/artifact-installer": "^1.1.0", - "@nodegui/qode": "^2.0.4", + "@nodegui/qode": "^2.1.0", "cmake-js": "^6.1.0", "cross-env": "^7.0.0", "cuid": "^2.1.6", @@ -51,9 +51,9 @@ } }, "@nodegui/qode": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@nodegui/qode/-/qode-2.0.4.tgz", - "integrity": "sha512-fnyPXoAHm2k+EUUV8ACRhjl2rNDQKRpyAQzYbsWNM4x1ExhrHy/U6KwQam82FaUVVCLaCNLTAiNaWyRR/XP83A==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@nodegui/qode/-/qode-2.1.0.tgz", + "integrity": "sha512-R31K60Vba4yO2Fy3qXXJkt7XMZnitDhuAVaibSGSbcBJbHhJh0+pDQjzZve1+uY7tCHFIY0oRq3tb70o/BrPZQ==", "dev": true, "requires": { "env-paths": "^2.2.0", @@ -92,9 +92,9 @@ } }, "ajv": { - "version": "6.12.0", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz", - "integrity": "sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==", + "version": "6.12.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz", + "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -200,9 +200,9 @@ "dev": true }, "aws4": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz", - "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==", + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz", + "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==", "dev": true }, "balanced-match": { @@ -265,9 +265,9 @@ } }, "safe-buffer": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", - "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", "dev": true }, "string_decoder": { @@ -298,9 +298,9 @@ } }, "buffer": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.5.0.tgz", - "integrity": "sha512-9FTEDjLjwoAkEwyMGDjYJQN2gfRgOKBKRfiglhvibGbpeeU/pQn1bJxQqm32OD/AIeEuHxU9roxXxg34Byp/Ww==", + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz", + "integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==", "dev": true, "requires": { "base64-js": "^1.0.2", @@ -374,9 +374,9 @@ } }, "chownr": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", - "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz", + "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==", "dev": true }, "cliui": { @@ -413,6 +413,12 @@ "yargs": "^3.6.0" }, "dependencies": { + "chownr": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", + "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==", + "dev": true + }, "fs-extra": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-5.0.0.tgz", @@ -459,9 +465,9 @@ } }, "mkdirp": { - "version": "0.5.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz", - "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", "dev": true, "requires": { "minimist": "^1.2.5" @@ -561,9 +567,9 @@ } }, "cross-spawn": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz", - "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==", + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", "dev": true, "requires": { "path-key": "^3.1.0", @@ -820,9 +826,9 @@ "dev": true }, "mkdirp": { - "version": "0.5.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz", - "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", "dev": true, "requires": { "minimist": "^1.2.5" @@ -1117,9 +1123,9 @@ "dev": true }, "make-dir": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.2.tgz", - "integrity": "sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", + "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", "dev": true, "requires": { "semver": "^6.0.0" @@ -1153,18 +1159,18 @@ } }, "mime-db": { - "version": "1.43.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz", - "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==", + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz", + "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==", "dev": true }, "mime-types": { - "version": "2.1.26", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz", - "integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==", + "version": "2.1.27", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz", + "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==", "dev": true, "requires": { - "mime-db": "1.43.0" + "mime-db": "1.44.0" } }, "mimic-response": { @@ -1189,9 +1195,9 @@ "dev": true }, "minipass": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.1.tgz", - "integrity": "sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz", + "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==", "dev": true, "requires": { "yallist": "^4.0.0" @@ -1208,15 +1214,15 @@ } }, "mkdirp": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.3.tgz", - "integrity": "sha512-6uCP4Qc0sWsgMLy1EOqqS/3rjDHOEnsStVr/4vtAIK2Y5i2kA7lFFejYrpIyiN9w0pYf4ckeCYT9f1r1P9KX5g==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", "dev": true }, "mkdirp-classic": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.2.tgz", - "integrity": "sha512-ejdnDQcR75gwknmMw/tx02AuRs8jCtqFoFqDZMjiNxsu85sRIJVXDKHuLYvUUPRBUtV2FpSZa9bL1BUa3BdR2g==", + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz", + "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==", "dev": true }, "ms": { @@ -1238,9 +1244,9 @@ "dev": true }, "node-abi": { - "version": "2.15.0", - "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.15.0.tgz", - "integrity": "sha512-FeLpTS0F39U7hHZU1srAK4Vx+5AHNVOTP+hxBNQknR/54laTHSFIJkDWDqiquY1LeLUgTfPN7sLPhMubx0PLAg==", + "version": "2.18.0", + "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.18.0.tgz", + "integrity": "sha512-yi05ZoiuNNEbyT/xXfSySZE+yVnQW6fxPZuFbLyS1s6b5Kw3HzV2PHOM4XR+nsjzkHxByK+2Wg+yCQbe35l8dw==", "dev": true, "requires": { "semver": "^5.4.1" @@ -1255,9 +1261,9 @@ } }, "node-addon-api": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-2.0.0.tgz", - "integrity": "sha512-ASCL5U13as7HhOExbT6OlWJJUV/lLzL2voOSP1UVehpRD8FbSrSDjfScK/KwAvVTI5AS6r4VwbOMlIqtvRidnA==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-2.0.1.tgz", + "integrity": "sha512-2WVfwRfIr1AVn3dRq4yRc2Hn35ND+mPJH6inC6bjpYCZVrpXPB4j3T6i//OGVfqVsR1t/X/axRulDsheq4F0LQ==", "dev": true }, "node-fetch": { @@ -1361,9 +1367,9 @@ } }, "postcss": { - "version": "7.0.27", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.27.tgz", - "integrity": "sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==", + "version": "7.0.32", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz", + "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==", "dev": true, "requires": { "chalk": "^2.4.2", @@ -1381,15 +1387,15 @@ } }, "prebuild-install": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.3.tgz", - "integrity": "sha512-GV+nsUXuPW2p8Zy7SarF/2W/oiK8bFQgJcncoJ0d7kRpekEA0ftChjfEaF9/Y+QJEc/wFR7RAEa8lYByuUIe2g==", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.4.tgz", + "integrity": "sha512-AkKN+pf4fSEihjapLEEj8n85YIw/tN6BQqkhzbDc0RvEZGdkpJBGMUYx66AAMcPG2KzmPQS7Cm16an4HVBRRMA==", "dev": true, "requires": { "detect-libc": "^1.0.3", "expand-template": "^2.0.3", "github-from-package": "0.0.0", - "minimist": "^1.2.0", + "minimist": "^1.2.3", "mkdirp": "^0.5.1", "napi-build-utils": "^1.0.1", "node-abi": "^2.7.0", @@ -1442,9 +1448,9 @@ "dev": true }, "mkdirp": { - "version": "0.5.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz", - "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", "dev": true, "requires": { "minimist": "^1.2.5" @@ -1830,12 +1836,12 @@ } }, "tar": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.0.1.tgz", - "integrity": "sha512-bKhKrrz2FJJj5s7wynxy/fyxpE0CmCjmOQ1KV4KkgXFWOgoIT/NbTMnB1n+LFNrNk0SSBVGGxcK5AGsyC+pW5Q==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.0.2.tgz", + "integrity": "sha512-Glo3jkRtPcvpDlAs/0+hozav78yoXKFr+c4wgw62NNMO3oo4AaJdCo21Uu7lcwr55h39W2XD1LMERc64wtbItg==", "dev": true, "requires": { - "chownr": "^1.1.3", + "chownr": "^2.0.0", "fs-minipass": "^2.0.0", "minipass": "^3.0.0", "minizlib": "^2.1.0", @@ -1844,15 +1850,23 @@ } }, "tar-fs": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.0.1.tgz", - "integrity": "sha512-6tzWDMeroL87uF/+lin46k+Q+46rAJ0SyPGz7OW7wTgblI273hsBqk2C1j0/xNadNLKDTUL9BukSjB7cwgmlPA==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.0.tgz", + "integrity": "sha512-9uW5iDvrIMCVpvasdFHW0wJPez0K4JnMZtsuIeDI7HyMGJNxmDZDOCQROr7lXyS+iL/QMpj07qcjGYTSdRFXUg==", "dev": true, "requires": { "chownr": "^1.1.1", "mkdirp-classic": "^0.5.2", "pump": "^3.0.0", "tar-stream": "^2.0.0" + }, + "dependencies": { + "chownr": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", + "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==", + "dev": true + } } }, "tar-stream": { @@ -1880,9 +1894,9 @@ } }, "safe-buffer": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", - "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", "dev": true }, "string_decoder": { diff --git a/package.json b/package.json index fa9ebc3f..19a0418c 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "react": "^16.9.0" }, "devDependencies": { - "@nodegui/nodegui": "^0.18.0", + "@nodegui/nodegui": "^0.21.0", "@types/node": "^13.9.3", "prettier": "^1.18.2", "react": "^16.13.1", diff --git a/src/components/GridView/GridColumn/RNGridColumn.ts b/src/components/GridView/GridColumn/RNGridColumn.ts new file mode 100644 index 00000000..e48aeb2e --- /dev/null +++ b/src/components/GridView/GridColumn/RNGridColumn.ts @@ -0,0 +1,66 @@ +import { FunctionComponentElement } from "react"; +import { Component, NodeWidget } from "@nodegui/nodegui"; +import { RNComponent } from "../../config"; +import { RNGridRow } from "../GridRow/RNGridRow"; + +export type GridColumnProps = { + /** + * The number of horizontal units to occupy + */ + width?: number; +}; + +const setGridColumnProps = ( + widget: RNGridColumn, + parentRow: RNGridRow, + newProps: GridColumnProps, + oldProps: GridColumnProps +) => { + console.log(newProps); + + if (widget.actualWidget) { + parentRow.parentGrid?.layout?.addWidget(widget.actualWidget, 0, 0); + } + + const setter: GridColumnProps = {}; + Object.assign(setter, newProps); +}; + +export class RNGridColumn extends Component implements RNComponent { + native: any; + actualWidget?: NodeWidget; + parentRow?: RNGridRow; + initialProps?: GridColumnProps; + + setParentRowAndUpdateProps(parentRow: RNGridRow): void { + this.parentRow = parentRow; + setGridColumnProps(this, parentRow, this.initialProps ?? {}, {}); + } + + /* RNComponent */ + + setProps(newProps: GridColumnProps, oldProps: GridColumnProps): void { + if (this.parentRow) { + setGridColumnProps(this, this.parentRow, newProps, oldProps); + } else { + this.initialProps = newProps; + } + } + appendInitialChild(child: NodeWidget): void { + if (this.actualWidget) { + throw new Error("Grid column can have only one child"); + } + this.actualWidget = child; + } + appendChild(child: NodeWidget): void { + this.appendInitialChild(child); + } + insertBefore(child: NodeWidget, beforeChild: NodeWidget): void { + this.appendInitialChild(child); + } + removeChild(child: NodeWidget): void { + child.close(); + this.actualWidget = undefined; + } + static tagName: string = "gridcolumn"; +} diff --git a/src/components/GridView/GridColumn/index.ts b/src/components/GridView/GridColumn/index.ts new file mode 100644 index 00000000..132e9250 --- /dev/null +++ b/src/components/GridView/GridColumn/index.ts @@ -0,0 +1,49 @@ +import { Fiber } from "react-reconciler"; +import { GridColumnProps, RNGridColumn } from "./RNGridColumn"; +import { AppContainer } from "../../../reconciler"; +import { registerComponent, ComponentConfig } from "../../config"; + +class GridColumnConfig extends ComponentConfig { + tagName = RNGridColumn.tagName; + shouldSetTextContent(nextProps: GridColumnProps): boolean { + return false; + } + createInstance( + newProps: GridColumnProps, + rootInstance: AppContainer, + context: any, + workInProgress: Fiber + ): RNGridColumn { + const widget = new RNGridColumn(); + widget.setProps(newProps, newProps); + return widget; + } + finalizeInitialChildren( + instance: RNGridColumn, + newProps: GridColumnProps, + rootContainerInstance: AppContainer, + context: any + ): boolean { + return true; + } + commitMount( + instance: RNGridColumn, + newProps: GridColumnProps, + internalInstanceHandle: any + ): void { + return; + } + commitUpdate( + instance: RNGridColumn, + updatePayload: any, + oldProps: GridColumnProps, + newProps: GridColumnProps, + finishedWork: Fiber + ): void { + instance.setProps(newProps, oldProps); + } +} + +export const GridColumn = registerComponent( + new GridColumnConfig() +); diff --git a/src/components/GridView/GridRow/RNGridRow.ts b/src/components/GridView/GridRow/RNGridRow.ts new file mode 100644 index 00000000..16eda87f --- /dev/null +++ b/src/components/GridView/GridRow/RNGridRow.ts @@ -0,0 +1,84 @@ +import { FunctionComponentElement } from "react"; +import { GridColumnProps, RNGridColumn } from "../GridColumn/RNGridColumn"; +import { Component } from "@nodegui/nodegui"; +import { RNComponent } from "../../config"; +import { RNGridView } from "../RNGridView"; + +export type GridRowProps = { + children: + | Array> + | FunctionComponentElement; + + /** + * The number of vertical units to occupy + */ + height?: number; +}; + +const setGridRowProps = ( + widget: RNGridRow, + parentGrid: RNGridView, + newProps: GridRowProps, + oldProps: GridRowProps +) => { + const setter: GridRowProps = { + set children( + children: + | Array> + | FunctionComponentElement + ) {}, + }; + Object.assign(setter, newProps); +}; + +export class RNGridRow extends Component implements RNComponent { + native: any; + parentGrid?: RNGridView; + initialProps?: GridRowProps; + childColumns: Set = new Set(); + + setParentGridAndUpdateProps(parentGrid: RNGridView): void { + this.parentGrid = parentGrid; + setGridRowProps( + this, + parentGrid, + this.initialProps ?? { + children: [], + }, + { children: [] } + ); + + console.log(this.childColumns); + this.childColumns.forEach((child) => + child.setParentRowAndUpdateProps(this) + ); + } + + /* RNComponent */ + + setProps(newProps: GridRowProps, oldProps: GridRowProps): void { + console.log("Set row"); + if (this.parentGrid) { + setGridRowProps(this, this.parentGrid, newProps, oldProps); + } else { + this.initialProps = newProps; + } + } + appendInitialChild(child: RNGridColumn): void { + this.childColumns.add(child); + + console.log("Grid row initial child"); + child.setParentRowAndUpdateProps(this); + } + appendChild(child: RNGridColumn): void { + this.appendInitialChild(child); + } + insertBefore(child: RNGridColumn, beforeChild: RNGridColumn): void { + this.appendInitialChild(child); + } + removeChild(child: RNGridColumn): void { + child.parentRow = undefined; + this.childColumns.delete(child); + } + static tagName: string = "gridrow"; +} diff --git a/src/components/GridView/GridRow/index.ts b/src/components/GridView/GridRow/index.ts new file mode 100644 index 00000000..bcd12a05 --- /dev/null +++ b/src/components/GridView/GridRow/index.ts @@ -0,0 +1,47 @@ +import { Fiber } from "react-reconciler"; +import { AppContainer } from "../../../reconciler"; +import { registerComponent, ComponentConfig } from "../../config"; +import { RNGridRow, GridRowProps } from "./RNGridRow"; + +class GridRowConfig extends ComponentConfig { + tagName = RNGridRow.tagName; + shouldSetTextContent(nextProps: GridRowProps): boolean { + return false; + } + createInstance( + newProps: GridRowProps, + rootInstance: AppContainer, + context: any, + workInProgress: Fiber + ): RNGridRow { + const widget = new RNGridRow(); + widget.setProps(newProps, newProps); + return widget; + } + finalizeInitialChildren( + instance: RNGridRow, + newProps: GridRowProps, + rootContainerInstance: AppContainer, + context: any + ): boolean { + return true; + } + commitMount( + instance: RNGridRow, + newProps: GridRowProps, + internalInstanceHandle: any + ): void { + return; + } + commitUpdate( + instance: RNGridRow, + updatePayload: any, + oldProps: GridRowProps, + newProps: GridRowProps, + finishedWork: Fiber + ): void { + instance.setProps(newProps, oldProps); + } +} + +export const GridRow = registerComponent(new GridRowConfig()); diff --git a/src/components/GridView/RNGridView.ts b/src/components/GridView/RNGridView.ts new file mode 100644 index 00000000..e3503470 --- /dev/null +++ b/src/components/GridView/RNGridView.ts @@ -0,0 +1,101 @@ +import { FunctionComponentElement } from "react"; +import { QGridLayoutSignals, QGridLayout, QWidget } from "@nodegui/nodegui"; +import { ViewProps, setViewProps } from "../View/RNView"; +import { RNComponent } from "../config"; +import { RNGridRow, GridRowProps } from "./GridRow/RNGridRow"; + +export interface GridViewProps extends ViewProps { + children: + | Array> + | FunctionComponentElement; +} + +const setGridViewProps = ( + widget: RNGridView, + newProps: GridViewProps, + oldProps: GridViewProps +) => { + const setter: GridViewProps = { + set children( + children: + | Array> + | FunctionComponentElement + ) {}, + }; + Object.assign(setter, newProps); + setViewProps(widget, newProps, oldProps); +}; + +/** + * @ignore + */ +export class RNGridView extends QWidget implements RNComponent { + native: any; + layout?: QGridLayout; + + setProps(newProps: GridViewProps, oldProps: GridViewProps): void { + setGridViewProps(this, newProps, oldProps); + } + appendInitialChild(child: RNGridRow): void { + this.appendChild(child); + } + appendChild(child: RNGridRow): void { + if (this.layout) { + // Update child before bailing, just in case + child.setParentGridAndUpdateProps(this); + + return; + } + + const layout = new QGridLayout(); + this.setLayout(layout); + this.layout = layout; + + child.setParentGridAndUpdateProps(this); + } + insertBefore(child: RNGridRow, beforeChild: RNGridRow): void { + this.appendChild(child); + } + removeChild(child: RNGridRow): void { + child.parentGrid = undefined; + } + static tagName: string = "gridview"; +} + +// export class RNGridView extends QWidget implements RNWidget { +// setProps(newProps: ViewProps, oldProps: ViewProps): void { +// setViewProps(this, newProps, oldProps); +// } +// insertBefore(child: NodeWidget, beforeChild: NodeWidget): void { +// if (!this.layout) { +// console.warn("parent has no layout to insert child before another child"); +// return; +// } +// (this.layout as any).insertChildBefore(child, beforeChild); +// } +// static tagName = "gridview"; +// appendInitialChild(child: NodeWidget): void { +// console.log("View initial"); +// this.appendChild(child); +// } +// appendChild(child: NodeWidget): void { +// if (!child) { +// return; +// } +// if (!this.layout) { +// const flexLayout = new FlexLayout(); +// flexLayout.setFlexNode(this.getFlexNode()); +// this.setLayout(flexLayout); +// this.layout = flexLayout; +// } +// this.layout.addWidget(child); +// } +// removeChild(child: NodeWidget) { +// if (!this.layout) { +// console.warn("parent has no layout to remove child from"); +// return; +// } +// this.layout.removeWidget(child); +// child.close(); +// } +// } diff --git a/src/components/GridView/index.ts b/src/components/GridView/index.ts new file mode 100644 index 00000000..9a17f35a --- /dev/null +++ b/src/components/GridView/index.ts @@ -0,0 +1,51 @@ +import { registerComponent, ComponentConfig } from "../config"; +import { Fiber } from "react-reconciler"; +import { AppContainer } from "../../reconciler"; +import { RNGridView, GridViewProps } from "./RNGridView"; + +class GridViewConfig extends ComponentConfig { + tagName = RNGridView.tagName; + shouldSetTextContent(nextProps: GridViewProps): boolean { + return false; + } + createInstance( + newProps: GridViewProps, + rootInstance: AppContainer, + context: any, + workInProgress: Fiber + ): RNGridView { + const widget = new RNGridView(); + widget.setProps(newProps, { + children: [], + }); + return widget; + } + finalizeInitialChildren( + instance: RNGridView, + newProps: GridViewProps, + rootContainerInstance: AppContainer, + context: any + ): boolean { + return true; + } + commitMount( + instance: RNGridView, + newProps: GridViewProps, + internalInstanceHandle: any + ): void { + if (newProps.visible !== false) { + instance.show(); + } + } + commitUpdate( + instance: RNGridView, + updatePayload: any, + oldProps: GridViewProps, + newProps: GridViewProps, + finishedWork: Fiber + ): void { + instance.setProps(newProps, oldProps); + } +} + +export const GridView = registerComponent(new GridViewConfig()); diff --git a/src/demo.tsx b/src/demo.tsx index 7b5a7fb0..1667712b 100644 --- a/src/demo.tsx +++ b/src/demo.tsx @@ -1,10 +1,13 @@ import React from "react"; -import { Renderer, Text, ScrollArea, Window } from "./index"; +import { Renderer, Text, ScrollArea, Window, View, Button } from "./index"; +import { GridView } from "./components/GridView"; +import { GridRow } from "./components/GridView/GridRow"; +import { GridColumn } from "./components/GridView/GridColumn"; const App = () => { return ( - + {/* {` Contrary to popular belief, @@ -43,7 +46,20 @@ const App = () => { `} - + */} + + + {/* + Test + */} + + + Hello + + + +