From 0f28e9d39a3d99c265aad31f5947032552751b5b Mon Sep 17 00:00:00 2001 From: IAN ZHU Date: Wed, 4 Jun 2025 16:56:28 -0400 Subject: [PATCH 1/8] Upload images, still need to modify to support svg --- assets/icons/down.svg | 3 + assets/icons/up.svg | 11 ++ example/package-lock.json | 239 ++++++++++++++++++++++++++++++-------- example/package.json | 3 +- package-lock.json | 227 +++++++++++++++++++++++++++++++----- package.json | 4 +- src/components/Select.tsx | 19 ++- 7 files changed, 423 insertions(+), 83 deletions(-) create mode 100644 assets/icons/down.svg create mode 100644 assets/icons/up.svg diff --git a/assets/icons/down.svg b/assets/icons/down.svg new file mode 100644 index 0000000..6ec1cfd --- /dev/null +++ b/assets/icons/down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/icons/up.svg b/assets/icons/up.svg new file mode 100644 index 0000000..4baf371 --- /dev/null +++ b/assets/icons/up.svg @@ -0,0 +1,11 @@ + + + + + + + + + + \ No newline at end of file diff --git a/example/package-lock.json b/example/package-lock.json index 06c6bee..20d1fcd 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "@rose-hulman/react-native-dropdown-selector": "file:..", "react": "19.0.0", - "react-native": "0.78.0" + "react-native": "0.78.0", + "react-native-svg": "^15.12.0" }, "devDependencies": { "@babel/core": "^7.25.2", @@ -73,14 +74,14 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", - "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", + "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==", "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.25.9", + "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", - "picocolors": "^1.0.0" + "picocolors": "^1.1.1" }, "engines": { "node": ">=6.9.0" @@ -354,18 +355,18 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz", - "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", + "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", - "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", + "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", "license": "MIT", "engines": { "node": ">=6.9.0" @@ -395,25 +396,25 @@ } }, "node_modules/@babel/helpers": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz", - "integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==", + "version": "7.27.4", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.4.tgz", + "integrity": "sha512-Y+bO6U+I7ZKaM5G5rDUZiYfUvQPUibYmAFe7EnKdnKBbVXDZxvp+MWOH5gYciY0EPk4EScsuFMQBbEfpdRKSCQ==", "license": "MIT", "dependencies": { - "@babel/template": "^7.26.9", - "@babel/types": "^7.26.9" + "@babel/template": "^7.27.2", + "@babel/types": "^7.27.3" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz", - "integrity": "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==", + "version": "7.27.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz", + "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==", "license": "MIT", "dependencies": { - "@babel/types": "^7.26.9" + "@babel/types": "^7.27.3" }, "bin": { "parser": "bin/babel-parser.js" @@ -1927,26 +1928,23 @@ } }, "node_modules/@babel/runtime": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz", - "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==", + "version": "7.27.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.4.tgz", + "integrity": "sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA==", "license": "MIT", - "dependencies": { - "regenerator-runtime": "^0.14.0" - }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/template": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz", - "integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==", + "version": "7.27.2", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", + "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==", "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.26.2", - "@babel/parser": "^7.26.9", - "@babel/types": "^7.26.9" + "@babel/code-frame": "^7.27.1", + "@babel/parser": "^7.27.2", + "@babel/types": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -1990,13 +1988,13 @@ } }, "node_modules/@babel/types": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz", - "integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==", + "version": "7.27.3", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.3.tgz", + "integrity": "sha512-Y1GkI4ktrtvmawoSq+4FCVHNryea6uR+qUQy0AGxLSsjCX0nVmkYQMBLHDkXZuo5hGx7eYdnIaslsdBFm7zbUw==", "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.25.9", - "@babel/helper-validator-identifier": "^7.25.9" + "@babel/helper-string-parser": "^7.27.1", + "@babel/helper-validator-identifier": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -4687,6 +4685,12 @@ "readable-stream": "^3.4.0" } }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", + "license": "ISC" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -5347,6 +5351,47 @@ "node": ">= 8" } }, + "node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "license": "MIT", + "dependencies": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "license": "BSD-2-Clause", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -5588,6 +5633,61 @@ "node": ">=0.10.0" } }, + "node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "license": "MIT", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "BSD-2-Clause" + }, + "node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "license": "BSD-2-Clause", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", + "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", + "license": "BSD-2-Clause", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", @@ -5643,6 +5743,18 @@ "node": ">= 0.8" } }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/env-paths": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", @@ -7080,9 +7192,9 @@ } }, "node_modules/image-size": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.0.tgz", - "integrity": "sha512-4S8fwbO6w3GeCVN6OPtA9I5IGKkcDMPcKndtUlpJuCwu7JLjtj7JZpwqLuyY2nrmQT3AWsCJLSKPsc2mPBSl3w==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.1.tgz", + "integrity": "sha512-rH+46sQJ2dlwfjfhCyNx5thzrv+dtmBIhPHk0zgRUukHzZ/kRueTJXoYYsclBaKcSMBWuGbOFXtioLpzTb5euw==", "license": "MIT", "dependencies": { "queue": "6.0.2" @@ -9240,6 +9352,12 @@ "node": ">= 0.4" } }, + "node_modules/mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "license": "CC0-1.0" + }, "node_modules/memoize-one": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", @@ -9851,6 +9969,18 @@ "node": ">=8" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/nullthrows": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz", @@ -10633,6 +10763,21 @@ } } }, + "node_modules/react-native-svg": { + "version": "15.12.0", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.12.0.tgz", + "integrity": "sha512-iE25PxIJ6V0C6krReLquVw6R0QTsRTmEQc4K2Co3P6zsimU/jltcDBKYDy1h/5j9S/fqmMeXnpM+9LEWKJKI6A==", + "license": "MIT", + "dependencies": { + "css-select": "^5.1.0", + "css-tree": "^1.1.3", + "warn-once": "0.1.1" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native/node_modules/ansi-styles": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", @@ -10800,12 +10945,6 @@ "node": ">=4" } }, - "node_modules/regenerator-runtime": { - "version": "0.14.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", - "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", - "license": "MIT" - }, "node_modules/regenerator-transform": { "version": "0.15.2", "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz", @@ -12277,6 +12416,12 @@ "makeerror": "1.0.12" } }, + "node_modules/warn-once": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz", + "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==", + "license": "MIT" + }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/example/package.json b/example/package.json index 3327df5..aa3dd33 100644 --- a/example/package.json +++ b/example/package.json @@ -11,9 +11,10 @@ "typecheck": "tsc --noEmit" }, "dependencies": { + "@rose-hulman/react-native-dropdown-selector": "file:..", "react": "19.0.0", "react-native": "0.78.0", - "@rose-hulman/react-native-dropdown-selector": "file:.." + "react-native-svg": "^15.12.0" }, "devDependencies": { "@babel/core": "^7.25.2", diff --git a/package-lock.json b/package-lock.json index fb4d093..1bfd75b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "@rose-hulman/react-native-dropdown-selector", "version": "0.1.0", "license": "MIT", + "dependencies": { + "react-native-svg": "^15.12.0" + }, "devDependencies": { "@types/react": "^18.2.9", "@typescript-eslint/eslint-plugin": "^8.24.0", @@ -41,15 +44,15 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", - "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", + "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==", "license": "MIT", "peer": true, "dependencies": { - "@babel/helper-validator-identifier": "^7.25.9", + "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", - "picocolors": "^1.0.0" + "picocolors": "^1.1.1" }, "engines": { "node": ">=6.9.0" @@ -373,9 +376,9 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz", - "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", + "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", "license": "MIT", "peer": true, "engines": { @@ -383,9 +386,9 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", - "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", + "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", "license": "MIT", "peer": true, "engines": { @@ -418,27 +421,27 @@ } }, "node_modules/@babel/helpers": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz", - "integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==", + "version": "7.27.4", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.4.tgz", + "integrity": "sha512-Y+bO6U+I7ZKaM5G5rDUZiYfUvQPUibYmAFe7EnKdnKBbVXDZxvp+MWOH5gYciY0EPk4EScsuFMQBbEfpdRKSCQ==", "license": "MIT", "peer": true, "dependencies": { - "@babel/template": "^7.26.9", - "@babel/types": "^7.26.9" + "@babel/template": "^7.27.2", + "@babel/types": "^7.27.3" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz", - "integrity": "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==", + "version": "7.27.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz", + "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==", "license": "MIT", "peer": true, "dependencies": { - "@babel/types": "^7.26.9" + "@babel/types": "^7.27.3" }, "bin": { "parser": "bin/babel-parser.js" @@ -2053,15 +2056,15 @@ } }, "node_modules/@babel/template": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz", - "integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==", + "version": "7.27.2", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", + "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==", "license": "MIT", "peer": true, "dependencies": { - "@babel/code-frame": "^7.26.2", - "@babel/parser": "^7.26.9", - "@babel/types": "^7.26.9" + "@babel/code-frame": "^7.27.1", + "@babel/parser": "^7.27.2", + "@babel/types": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -2097,14 +2100,14 @@ } }, "node_modules/@babel/types": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz", - "integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==", + "version": "7.27.3", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.3.tgz", + "integrity": "sha512-Y1GkI4ktrtvmawoSq+4FCVHNryea6uR+qUQy0AGxLSsjCX0nVmkYQMBLHDkXZuo5hGx7eYdnIaslsdBFm7zbUw==", "license": "MIT", "peer": true, "dependencies": { - "@babel/helper-string-parser": "^7.25.9", - "@babel/helper-validator-identifier": "^7.25.9" + "@babel/helper-string-parser": "^7.27.1", + "@babel/helper-validator-identifier": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -4014,6 +4017,12 @@ "readable-stream": "^3.4.0" } }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", + "license": "ISC" + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -4603,6 +4612,56 @@ "node": ">= 8" } }, + "node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/css-tree": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz", + "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==", + "license": "MIT", + "dependencies": { + "mdn-data": "2.0.14", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/css-tree/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "license": "BSD-2-Clause", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -4817,6 +4876,61 @@ "node": ">=0.10.0" } }, + "node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "license": "MIT", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "BSD-2-Clause" + }, + "node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "license": "BSD-2-Clause", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", + "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", + "license": "BSD-2-Clause", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", @@ -4887,6 +5001,18 @@ "node": ">=10.13.0" } }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/envinfo": { "version": "7.14.0", "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.14.0.tgz", @@ -7745,6 +7871,12 @@ "node": ">= 0.4" } }, + "node_modules/mdn-data": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", + "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", + "license": "CC0-1.0" + }, "node_modules/memoize-one": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", @@ -8741,6 +8873,18 @@ "node": ">=4" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/nullthrows": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz", @@ -9581,6 +9725,21 @@ "license": "MIT", "peer": true }, + "node_modules/react-native-svg": { + "version": "15.12.0", + "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.12.0.tgz", + "integrity": "sha512-iE25PxIJ6V0C6krReLquVw6R0QTsRTmEQc4K2Co3P6zsimU/jltcDBKYDy1h/5j9S/fqmMeXnpM+9LEWKJKI6A==", + "license": "MIT", + "dependencies": { + "css-select": "^5.1.0", + "css-tree": "^1.1.3", + "warn-once": "0.1.1" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-refresh": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz", @@ -11272,6 +11431,12 @@ "makeerror": "1.0.12" } }, + "node_modules/warn-once": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz", + "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==", + "license": "MIT" + }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/package.json b/package.json index 98ab42e..a0b51df 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,9 @@ "eslint-plugin-react-native": "^5.0.0", "typescript": "^5.7.3" }, - "dependencies": {}, + "dependencies": { + "react-native-svg": "^15.12.0" + }, "directories": { "doc": "docs", "example": "example" diff --git a/src/components/Select.tsx b/src/components/Select.tsx index f4cdf39..a7573c1 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -1,8 +1,9 @@ import React, { useRef, useState } from 'react'; -import { Text, TouchableOpacity, View } from 'react-native'; +import { Text, TouchableOpacity, View, Image } from 'react-native'; import { useThemeStyles } from '../styles'; import type { Data, SelectorRect, SelectProperties } from '../types'; import SelectionList from './SelectionList'; +import Svg from 'react-native-svg'; /* Renders a selector component. Takes in props defined in the SelectProperties type. */ const Select = (props: SelectProperties): React.JSX.Element => { @@ -53,14 +54,26 @@ const Select = (props: SelectProperties): React.JSX.Element => { > {selected.label} - {listDisplay ? 'ᨈ' : 'ᨆ'} - + */} + + {listDisplay + ? + : + } + Date: Thu, 5 Jun 2025 09:55:48 -0400 Subject: [PATCH 2/8] Change icons to svg format done, delete some images --- assets/icons/down.svg | 3 --- assets/icons/up.svg | 11 ----------- src/components/MultiSelect.tsx | 18 ++++++++++-------- src/components/Select.tsx | 31 ++++++++++--------------------- 4 files changed, 20 insertions(+), 43 deletions(-) delete mode 100644 assets/icons/down.svg delete mode 100644 assets/icons/up.svg diff --git a/assets/icons/down.svg b/assets/icons/down.svg deleted file mode 100644 index 6ec1cfd..0000000 --- a/assets/icons/down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/assets/icons/up.svg b/assets/icons/up.svg deleted file mode 100644 index 4baf371..0000000 --- a/assets/icons/up.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/src/components/MultiSelect.tsx b/src/components/MultiSelect.tsx index 9335a54..bd0f729 100644 --- a/src/components/MultiSelect.tsx +++ b/src/components/MultiSelect.tsx @@ -3,6 +3,7 @@ import { Text, TouchableOpacity, View } from 'react-native'; import { useThemeStyles } from '../styles'; import type { Data, SelectorRect, MultiSelectProperties } from '../types'; import SelectionList from './SelectionList'; +import Svg, { Path } from 'react-native-svg'; /* Renders a multi-selector component. Takes in props defined in the MultiSelectProperties type. */ const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => { @@ -75,14 +76,15 @@ const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => { {props.placeholderText ?? 'Click me'} } - - {listDisplay ? 'ᨈ' : 'ᨆ'} - + + {listDisplay ? ( + + + ) : ( + + + )} + { @@ -54,26 +54,15 @@ const Select = (props: SelectProperties): React.JSX.Element => { > {selected.label} - {/* - {listDisplay ? 'ᨈ' : 'ᨆ'} - */} - - {listDisplay - ? - : - } - + + {listDisplay ? ( + + + ) : ( + + + )} + Date: Thu, 5 Jun 2025 15:59:49 -0400 Subject: [PATCH 3/8] Change 'x' icon to svg format --- src/components/SelectionList.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/SelectionList.tsx b/src/components/SelectionList.tsx index 096f150..4695cf0 100644 --- a/src/components/SelectionList.tsx +++ b/src/components/SelectionList.tsx @@ -11,6 +11,7 @@ import { } from 'react-native'; import { useThemeStyles } from '../styles'; import type { Data, ListProperties } from '../types'; +import Svg, { Path } from 'react-native-svg'; /* Renders a modal with a list of selectable items. Takes in props defined in the ListProperties type. */ const SelectionList = (props: ListProperties): React.JSX.Element => { @@ -186,14 +187,11 @@ const SelectionList = (props: ListProperties): React.JSX.Element => { - - {'×'} - + + { + + } + } From f78b7fa912bb762851752ff31699e10f2bb081b4 Mon Sep 17 00:00:00 2001 From: IAN ZHU Date: Tue, 10 Jun 2025 08:27:50 -0400 Subject: [PATCH 4/8] Update some dependencies information --- example/package.json | 2 +- package.json | 2 +- src/components/Select.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/example/package.json b/example/package.json index aa3dd33..2414c8e 100644 --- a/example/package.json +++ b/example/package.json @@ -14,7 +14,7 @@ "@rose-hulman/react-native-dropdown-selector": "file:..", "react": "19.0.0", "react-native": "0.78.0", - "react-native-svg": "^15.12.0" + "react-native-svg": "15.12.0" }, "devDependencies": { "@babel/core": "^7.25.2", diff --git a/package.json b/package.json index 2c36453..da54e64 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "typescript": "^5.7.3" }, "dependencies": { - "react-native-svg": "^15.12.0" + "react-native-svg": "15.12.0" }, "directories": { "doc": "docs", diff --git a/src/components/Select.tsx b/src/components/Select.tsx index 59bb6dc..ebc7d61 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -1,5 +1,5 @@ import React, { useRef, useState } from 'react'; -import { Text, TouchableOpacity, View, Image } from 'react-native'; +import { Text, TouchableOpacity, View } from 'react-native'; import { useThemeStyles } from '../styles'; import type { Data, SelectorRect, SelectProperties } from '../types'; import SelectionList from './SelectionList'; From 5598adf610d52aa89d3ee30986514199b4875b5e Mon Sep 17 00:00:00 2001 From: IAN ZHU Date: Tue, 10 Jun 2025 08:53:05 -0400 Subject: [PATCH 5/8] Add comments for svg components --- src/components/MultiSelect.tsx | 2 ++ src/components/Select.tsx | 2 ++ src/components/SelectionList.tsx | 1 + 3 files changed, 5 insertions(+) diff --git a/src/components/MultiSelect.tsx b/src/components/MultiSelect.tsx index bd0f729..4c034a6 100644 --- a/src/components/MultiSelect.tsx +++ b/src/components/MultiSelect.tsx @@ -80,9 +80,11 @@ const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => { {listDisplay ? ( + {/* This is the up arrow "ᨈ" */} ) : ( + {/* This is the up arrow "ᨆ" */} )} diff --git a/src/components/Select.tsx b/src/components/Select.tsx index ebc7d61..ca24b77 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -58,9 +58,11 @@ const Select = (props: SelectProperties): React.JSX.Element => { {listDisplay ? ( + {/* This is the up arrow "ᨈ" */} ) : ( + {/* This is the up arrow "ᨆ" */} )} diff --git a/src/components/SelectionList.tsx b/src/components/SelectionList.tsx index 4695cf0..6b0a73b 100644 --- a/src/components/SelectionList.tsx +++ b/src/components/SelectionList.tsx @@ -190,6 +190,7 @@ const SelectionList = (props: ListProperties): React.JSX.Element => { { + {/* This is the cross "✖" */} } From 4287c2c536c1853c1f9bd007d12521e1523bee78 Mon Sep 17 00:00:00 2001 From: IAN ZHU Date: Wed, 11 Jun 2025 10:59:09 -0400 Subject: [PATCH 6/8] Add utils file, reduce code duplication --- src/components/MultiSelect.tsx | 33 ++++--------------- src/components/Select.tsx | 34 ++++---------------- src/utils/SelectorUtils.tsx | 59 ++++++++++++++++++++++++++++++++++ 3 files changed, 72 insertions(+), 54 deletions(-) create mode 100644 src/utils/SelectorUtils.tsx diff --git a/src/components/MultiSelect.tsx b/src/components/MultiSelect.tsx index 4c034a6..a8dcdf9 100644 --- a/src/components/MultiSelect.tsx +++ b/src/components/MultiSelect.tsx @@ -3,7 +3,7 @@ import { Text, TouchableOpacity, View } from 'react-native'; import { useThemeStyles } from '../styles'; import type { Data, SelectorRect, MultiSelectProperties } from '../types'; import SelectionList from './SelectionList'; -import Svg, { Path } from 'react-native-svg'; +import { createMeasureHandler, updatePriorities, renderDropdownArrow } from '../utils/SelectorUtils'; /* Renders a multi-selector component. Takes in props defined in the MultiSelectProperties type. */ const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => { @@ -20,21 +20,7 @@ const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => { props.data.filter((d: Data) => props.defaultValue?.includes(d)) ); - const updatePriorities = (data: Data[]) => [ - ...data.filter((d: Data) => d.priority), - ...data.filter((d: Data) => !d.priority), - ]; - const updatePos = (display = false) => - ref.current?.measureInWindow((x, y, width, height) => { - setRefRect({ - x: x, - y: y - 5, - width: props.boxStyle?.width ?? width, - height: height + 10, - }); - if (display) - setListDisplay(true); - }); + const updatePos = createMeasureHandler(ref, setRefRect, setListDisplay, props.boxStyle?.width); return ( @@ -76,17 +62,10 @@ const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => { {props.placeholderText ?? 'Click me'} } - - {listDisplay ? ( - - - {/* This is the up arrow "ᨈ" */} - ) : ( - - - {/* This is the up arrow "ᨆ" */} - )} - + {renderDropdownArrow( + listDisplay, + props.dropdownArrowColor ?? style.arrow?.color ?? '#000' + )} { @@ -21,20 +21,7 @@ const Select = (props: SelectProperties): React.JSX.Element => { ? props.defaultValue : {label: props.placeholderText ?? 'Click me'} ); - const updatePriorities = (data: Data[]) => [ - ...data.filter((d: Data) => d.priority), - ...data.filter((d: Data) => !d.priority), - ]; - const updatePos = () => - ref.current?.measureInWindow((x, y, width, height) => { - setRefRect({ - x: x, - y: y - 5, - width: props.boxStyle?.width ?? width, - height: height + 10, - }); - setListDisplay(true); - }); + const updatePos = createMeasureHandler(ref, setRefRect, setListDisplay, props.boxStyle?.width); return ( @@ -46,7 +33,7 @@ const Select = (props: SelectProperties): React.JSX.Element => { {opacity: props.disabled ? .5 : 1}, ]} disabled={props.disabled} - onPress={updatePos} + onPress={() => updatePos(true)} ref={ref} > { > {selected.label} - - {listDisplay ? ( - - - {/* This is the up arrow "ᨈ" */} - ) : ( - - - {/* This is the up arrow "ᨆ" */} - )} - + {renderDropdownArrow( + listDisplay, + props.dropdownArrowColor ?? style.arrow?.color ?? '#000' + )} , + setRefRect: React.Dispatch>, + setListDisplay: React.Dispatch>, + boxStyleWidth?: number | string, +) => { + return (display = false) => { + ref.current?.measureInWindow((x: number, y: number, width: number, height: number) => { + setRefRect({ + x: x, + y: y - 5, + width: boxStyleWidth ?? width, + height: height + 10, + }); + + if (display && setListDisplay) { + setListDisplay(true); + } + }); + } +} + +export const updatePriorities = (data: Data[]) => [ + ...data.filter((d: Data) => d.priority), + ...data.filter((d: Data) => !d.priority), +]; + +export const renderDropdownArrow = (listDisplay: boolean, arrowColor: ColorValue) => ( + + {listDisplay ? ( + + + {/* This is the up arrow "ᨈ" */} + ) : ( + + + {/* This is the up arrow "ᨆ" */} + + )} + +) \ No newline at end of file From befb7f2872b360ff3094d269b80266c9b4456c81 Mon Sep 17 00:00:00 2001 From: IAN ZHU Date: Thu, 4 Dec 2025 15:56:55 -0500 Subject: [PATCH 7/8] Update format to match the main branch format for svg icon notes, and add refRectYOffset to replace hardcode --- src/components/SelectionList.tsx | 2 +- src/utils/SelectorUtils.tsx | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList.tsx b/src/components/SelectionList.tsx index 5c0b878..5d5105f 100644 --- a/src/components/SelectionList.tsx +++ b/src/components/SelectionList.tsx @@ -194,9 +194,9 @@ const SelectionList = (props: ListProperties): React.JSX.Element => { onPress={props.clearSelected} > + {/* This is the cross "✖" */} { - {/* This is the cross "✖" */} } diff --git a/src/utils/SelectorUtils.tsx b/src/utils/SelectorUtils.tsx index 3705344..22dab8a 100644 --- a/src/utils/SelectorUtils.tsx +++ b/src/utils/SelectorUtils.tsx @@ -9,14 +9,15 @@ export const createMeasureHandler = ( setRefRect: React.Dispatch>, setListDisplay: React.Dispatch>, boxStyleWidth?: number | string, + refRectYOffset: number = 5, ) => { return (display = false) => { ref.current?.measureInWindow((x: number, y: number, width: number, height: number) => { setRefRect({ x: x, - y: y - 5, + y: y - refRectYOffset, width: boxStyleWidth ?? width, - height: height + 10, + height: height + refRectYOffset * 2, }); if (display && setListDisplay) { @@ -34,6 +35,7 @@ export const updatePriorities = (data: Data[]) => [ export const renderDropdownArrow = (listDisplay: boolean, arrowColor: ColorValue) => ( {listDisplay ? ( + // This is the up arrow "ᨈ" - {/* This is the up arrow "ᨈ" */} ) : ( + // This is the up arrow "ᨆ" - {/* This is the up arrow "ᨆ" */} + )} From 7548942676f6243c459ac6f2be84566d1b006aa1 Mon Sep 17 00:00:00 2001 From: IAN ZHU Date: Thu, 11 Dec 2025 14:22:04 -0500 Subject: [PATCH 8/8] Change SelectionList back to the main version --- src/components/SelectionList.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/SelectionList.tsx b/src/components/SelectionList.tsx index 5d5105f..468c473 100644 --- a/src/components/SelectionList.tsx +++ b/src/components/SelectionList.tsx @@ -194,10 +194,11 @@ const SelectionList = (props: ListProperties): React.JSX.Element => { onPress={props.clearSelected} > - {/* This is the cross "✖" */} - { - - } + { // This is the cross "✖" + + + + }