haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(rn,ui) introduce react-native-paper

This commit is contained in:
Calinteodor 2021-05-11 11:01:45 +03:00 committed by GitHub
parent d69d4dd91a
commit 07eb19b98a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 685 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
babel.config.js Normal file
View File

@ -0,0 +1,9 @@
module.exports = {
presets: [ 'module:metro-react-native-babel-preset' ],
env: {
production: {
plugins: [ 'react-native-paper/babel' ]
}
},
plugins: [ 'optional-require' ]
};

449
package-lock.json generated
View File

@ -450,20 +450,22 @@
} }
}, },
"@babel/core": { "@babel/core": {
"version": "7.5.5", "version": "7.9.0",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz",
"integrity": "sha512-i4qoSr2KTtce0DmkuuQBV4AuQgGPUcPXMr9L5MyYAtk06z068lQ10a4O009fe5OB/DfNV+h+qqT7ddNV8UnRjg==", "integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==",
"requires": { "requires": {
"@babel/code-frame": "^7.5.5", "@babel/code-frame": "^7.8.3",
"@babel/generator": "^7.5.5", "@babel/generator": "^7.9.0",
"@babel/helpers": "^7.5.5", "@babel/helper-module-transforms": "^7.9.0",
"@babel/parser": "^7.5.5", "@babel/helpers": "^7.9.0",
"@babel/template": "^7.4.4", "@babel/parser": "^7.9.0",
"@babel/traverse": "^7.5.5", "@babel/template": "^7.8.6",
"@babel/types": "^7.5.5", "@babel/traverse": "^7.9.0",
"convert-source-map": "^1.1.0", "@babel/types": "^7.9.0",
"convert-source-map": "^1.7.0",
"debug": "^4.1.0", "debug": "^4.1.0",
"json5": "^2.1.0", "gensync": "^1.0.0-beta.1",
"json5": "^2.1.2",
"lodash": "^4.17.13", "lodash": "^4.17.13",
"resolve": "^1.3.2", "resolve": "^1.3.2",
"semver": "^5.4.1", "semver": "^5.4.1",
@ -471,88 +473,188 @@
}, },
"dependencies": { "dependencies": {
"@babel/code-frame": { "@babel/code-frame": {
"version": "7.5.5", "version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
"integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==", "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
"requires": { "requires": {
"@babel/highlight": "^7.0.0" "@babel/highlight": "^7.12.13"
} }
}, },
"@babel/generator": { "@babel/generator": {
"version": "7.5.5", "version": "7.14.1",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.1.tgz",
"integrity": "sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==", "integrity": "sha512-TMGhsXMXCP/O1WtQmZjpEYDhCYC9vFhayWZPJSZCGkPJgUqX0rF0wwtrYvnzVxIjcF80tkUertXVk5cwqi5cAQ==",
"requires": { "requires": {
"@babel/types": "^7.5.5", "@babel/types": "^7.14.1",
"jsesc": "^2.5.1", "jsesc": "^2.5.1",
"lodash": "^4.17.13", "source-map": "^0.5.0"
"source-map": "^0.5.0", }
"trim-right": "^1.0.1" },
"@babel/helper-function-name": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
"integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
"requires": {
"@babel/helper-get-function-arity": "^7.12.13",
"@babel/template": "^7.12.13",
"@babel/types": "^7.12.13"
}
},
"@babel/helper-get-function-arity": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
"integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
"requires": {
"@babel/types": "^7.12.13"
}
},
"@babel/helper-member-expression-to-functions": {
"version": "7.13.12",
"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
"integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
"requires": {
"@babel/types": "^7.13.12"
}
},
"@babel/helper-module-imports": {
"version": "7.13.12",
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
"integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
"requires": {
"@babel/types": "^7.13.12"
}
},
"@babel/helper-module-transforms": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.0.tgz",
"integrity": "sha512-L40t9bxIuGOfpIGA3HNkJhU9qYrf4y5A5LUSw7rGMSn+pcG8dfJ0g6Zval6YJGd2nEjI7oP00fRdnhLKndx6bw==",
"requires": {
"@babel/helper-module-imports": "^7.13.12",
"@babel/helper-replace-supers": "^7.13.12",
"@babel/helper-simple-access": "^7.13.12",
"@babel/helper-split-export-declaration": "^7.12.13",
"@babel/helper-validator-identifier": "^7.14.0",
"@babel/template": "^7.12.13",
"@babel/traverse": "^7.14.0",
"@babel/types": "^7.14.0"
}
},
"@babel/helper-optimise-call-expression": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
"integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
"requires": {
"@babel/types": "^7.12.13"
}
},
"@babel/helper-replace-supers": {
"version": "7.13.12",
"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
"integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==",
"requires": {
"@babel/helper-member-expression-to-functions": "^7.13.12",
"@babel/helper-optimise-call-expression": "^7.12.13",
"@babel/traverse": "^7.13.0",
"@babel/types": "^7.13.12"
}
},
"@babel/helper-simple-access": {
"version": "7.13.12",
"resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz",
"integrity": "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==",
"requires": {
"@babel/types": "^7.13.12"
} }
}, },
"@babel/helper-split-export-declaration": { "@babel/helper-split-export-declaration": {
"version": "7.4.4", "version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
"integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
"requires": { "requires": {
"@babel/types": "^7.4.4" "@babel/types": "^7.12.13"
}
},
"@babel/helper-validator-identifier": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
"integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
},
"@babel/highlight": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
"integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
"requires": {
"@babel/helper-validator-identifier": "^7.14.0",
"chalk": "^2.0.0",
"js-tokens": "^4.0.0"
} }
}, },
"@babel/parser": { "@babel/parser": {
"version": "7.5.5", "version": "7.14.1",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.1.tgz",
"integrity": "sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==" "integrity": "sha512-muUGEKu8E/ftMTPlNp+mc6zL3E9zKWmF5sDHZ5MSsoTP9Wyz64AhEf9kD08xYJ7w6Hdcu8H550ircnPyWSIF0Q=="
}, },
"@babel/template": { "@babel/template": {
"version": "7.4.4", "version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
"integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==", "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
"requires": { "requires": {
"@babel/code-frame": "^7.0.0", "@babel/code-frame": "^7.12.13",
"@babel/parser": "^7.4.4", "@babel/parser": "^7.12.13",
"@babel/types": "^7.4.4" "@babel/types": "^7.12.13"
} }
}, },
"@babel/traverse": { "@babel/traverse": {
"version": "7.5.5", "version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.0.tgz",
"integrity": "sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==", "integrity": "sha512-dZ/a371EE5XNhTHomvtuLTUyx6UEoJmYX+DT5zBCQN3McHemsuIaKKYqsc/fs26BEkHs/lBZy0J571LP5z9kQA==",
"requires": { "requires": {
"@babel/code-frame": "^7.5.5", "@babel/code-frame": "^7.12.13",
"@babel/generator": "^7.5.5", "@babel/generator": "^7.14.0",
"@babel/helper-function-name": "^7.1.0", "@babel/helper-function-name": "^7.12.13",
"@babel/helper-split-export-declaration": "^7.4.4", "@babel/helper-split-export-declaration": "^7.12.13",
"@babel/parser": "^7.5.5", "@babel/parser": "^7.14.0",
"@babel/types": "^7.5.5", "@babel/types": "^7.14.0",
"debug": "^4.1.0", "debug": "^4.1.0",
"globals": "^11.1.0", "globals": "^11.1.0"
"lodash": "^4.17.13"
} }
}, },
"@babel/types": { "@babel/types": {
"version": "7.5.5", "version": "7.14.1",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.1.tgz",
"integrity": "sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==", "integrity": "sha512-S13Qe85fzLs3gYRUnrpyeIrBJIMYv33qSTg1qoBwiG6nPKwUWAD9odSzWhEedpwOIzSEI6gbdQIWEMiCI42iBA==",
"requires": { "requires": {
"esutils": "^2.0.2", "@babel/helper-validator-identifier": "^7.14.0",
"lodash": "^4.17.13",
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
}, },
"debug": { "convert-source-map": {
"version": "4.1.1", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
"requires": { "requires": {
"ms": "^2.1.1" "safe-buffer": "~5.1.1"
} }
}, },
"json5": { "debug": {
"version": "2.1.0", "version": "4.3.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.0.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
"integrity": "sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==", "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
"requires": { "requires": {
"minimist": "^1.2.0" "ms": "2.1.2"
}
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"json5": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
"integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
"requires": {
"minimist": "^1.2.5"
} }
}, },
"ms": { "ms": {
@ -901,94 +1003,126 @@
} }
}, },
"@babel/helpers": { "@babel/helpers": {
"version": "7.5.5", "version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.0.tgz",
"integrity": "sha512-nRq2BUhxZFnfEn/ciJuhklHvFOqjJUD5wpx+1bxUF2axL9C+v4DE/dmp5sT2dKnpOs4orZWzpAZqlCy8QqE/7g==", "integrity": "sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==",
"requires": { "requires": {
"@babel/template": "^7.4.4", "@babel/template": "^7.12.13",
"@babel/traverse": "^7.5.5", "@babel/traverse": "^7.14.0",
"@babel/types": "^7.5.5" "@babel/types": "^7.14.0"
}, },
"dependencies": { "dependencies": {
"@babel/generator": { "@babel/code-frame": {
"version": "7.5.5", "version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
"integrity": "sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==", "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
"requires": { "requires": {
"@babel/types": "^7.5.5", "@babel/highlight": "^7.12.13"
}
},
"@babel/generator": {
"version": "7.14.1",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.1.tgz",
"integrity": "sha512-TMGhsXMXCP/O1WtQmZjpEYDhCYC9vFhayWZPJSZCGkPJgUqX0rF0wwtrYvnzVxIjcF80tkUertXVk5cwqi5cAQ==",
"requires": {
"@babel/types": "^7.14.1",
"jsesc": "^2.5.1", "jsesc": "^2.5.1",
"lodash": "^4.17.13", "source-map": "^0.5.0"
"source-map": "^0.5.0", }
"trim-right": "^1.0.1" },
"@babel/helper-function-name": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
"integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
"requires": {
"@babel/helper-get-function-arity": "^7.12.13",
"@babel/template": "^7.12.13",
"@babel/types": "^7.12.13"
}
},
"@babel/helper-get-function-arity": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
"integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
"requires": {
"@babel/types": "^7.12.13"
} }
}, },
"@babel/helper-split-export-declaration": { "@babel/helper-split-export-declaration": {
"version": "7.4.4", "version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
"integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
"requires": { "requires": {
"@babel/types": "^7.4.4" "@babel/types": "^7.12.13"
}
},
"@babel/helper-validator-identifier": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
"integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
},
"@babel/highlight": {
"version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
"integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
"requires": {
"@babel/helper-validator-identifier": "^7.14.0",
"chalk": "^2.0.0",
"js-tokens": "^4.0.0"
} }
}, },
"@babel/parser": { "@babel/parser": {
"version": "7.5.5", "version": "7.14.1",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.1.tgz",
"integrity": "sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==" "integrity": "sha512-muUGEKu8E/ftMTPlNp+mc6zL3E9zKWmF5sDHZ5MSsoTP9Wyz64AhEf9kD08xYJ7w6Hdcu8H550ircnPyWSIF0Q=="
}, },
"@babel/template": { "@babel/template": {
"version": "7.4.4", "version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
"integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==", "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
"requires": { "requires": {
"@babel/code-frame": "^7.0.0", "@babel/code-frame": "^7.12.13",
"@babel/parser": "^7.4.4", "@babel/parser": "^7.12.13",
"@babel/types": "^7.4.4" "@babel/types": "^7.12.13"
} }
}, },
"@babel/traverse": { "@babel/traverse": {
"version": "7.5.5", "version": "7.14.0",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.0.tgz",
"integrity": "sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==", "integrity": "sha512-dZ/a371EE5XNhTHomvtuLTUyx6UEoJmYX+DT5zBCQN3McHemsuIaKKYqsc/fs26BEkHs/lBZy0J571LP5z9kQA==",
"requires": { "requires": {
"@babel/code-frame": "^7.5.5", "@babel/code-frame": "^7.12.13",
"@babel/generator": "^7.5.5", "@babel/generator": "^7.14.0",
"@babel/helper-function-name": "^7.1.0", "@babel/helper-function-name": "^7.12.13",
"@babel/helper-split-export-declaration": "^7.4.4", "@babel/helper-split-export-declaration": "^7.12.13",
"@babel/parser": "^7.5.5", "@babel/parser": "^7.14.0",
"@babel/types": "^7.5.5", "@babel/types": "^7.14.0",
"debug": "^4.1.0", "debug": "^4.1.0",
"globals": "^11.1.0", "globals": "^11.1.0"
"lodash": "^4.17.13"
},
"dependencies": {
"@babel/code-frame": {
"version": "7.5.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
"integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
"requires": {
"@babel/highlight": "^7.0.0"
}
}
} }
}, },
"@babel/types": { "@babel/types": {
"version": "7.5.5", "version": "7.14.1",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.1.tgz",
"integrity": "sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==", "integrity": "sha512-S13Qe85fzLs3gYRUnrpyeIrBJIMYv33qSTg1qoBwiG6nPKwUWAD9odSzWhEedpwOIzSEI6gbdQIWEMiCI42iBA==",
"requires": { "requires": {
"esutils": "^2.0.2", "@babel/helper-validator-identifier": "^7.14.0",
"lodash": "^4.17.13",
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
}, },
"debug": { "debug": {
"version": "4.1.1", "version": "4.3.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
"requires": { "requires": {
"ms": "^2.1.1" "ms": "2.1.2"
} }
}, },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"ms": { "ms": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -1851,18 +1985,11 @@
} }
}, },
"@babel/runtime": { "@babel/runtime": {
"version": "7.5.5", "version": "7.9.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.0.tgz",
"integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==", "integrity": "sha512-cTIudHnzuWLS56ik4DnRnqqNf8MkdUzV4iFFI1h7Jo9xvrpQROYaAnaSd2mHLQAzzZAPfATynX5ord6YlNYNMA==",
"requires": { "requires": {
"regenerator-runtime": "^0.13.2" "regenerator-runtime": "^0.13.4"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.13.3",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
"integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
}
} }
}, },
"@babel/template": { "@babel/template": {
@ -1938,6 +2065,15 @@
} }
} }
}, },
"@callstack/react-theme-provider": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.6.tgz",
"integrity": "sha512-wwKMXfmklfogpalNZT0W+jh76BIquiYUiQHOaPmt/PCyCEP/E6rP+e7Uie6mBZrfkea9WJYJ+mus6r+45JAEhg==",
"requires": {
"deepmerge": "^3.2.0",
"hoist-non-react-statics": "^3.3.0"
}
},
"@cnakazawa/watch": { "@cnakazawa/watch": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@ -5277,6 +5413,39 @@
} }
} }
}, },
"babel-plugin-optional-require": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/babel-plugin-optional-require/-/babel-plugin-optional-require-0.3.1.tgz",
"integrity": "sha512-qL9pdz6fgMjO3NZ1igO8BEJrWooLgkuhJ2yc4ligr3lMvEq7tzFZuz3JWSa6P05khrvTz1USf0POkxAjlFnkLw==",
"dev": true,
"requires": {
"is-builtin-module": "^2.0.0",
"resolve-from": "^4.0.0"
},
"dependencies": {
"builtin-modules": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-2.0.0.tgz",
"integrity": "sha512-3U5kUA5VPsRUA3nofm/BXX7GVHKfxz0hOBAPxXrIvHzlDRkQVqEn6yi8QJegxl4LzOHLdvb7XF5dVawa/VVYBg==",
"dev": true
},
"is-builtin-module": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-2.0.0.tgz",
"integrity": "sha512-G2jLHphOywpgrL/AaJKWDXpdpGR9X4V1PCkB+EwG5Z28z8EukgdWnAUFAS2wdBtIpwHhHBIiq0NBOWEbSXN0Rg==",
"dev": true,
"requires": {
"builtin-modules": "^2.0.0"
}
},
"resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
"dev": true
}
}
},
"babel-plugin-syntax-jsx": { "babel-plugin-syntax-jsx": {
"version": "6.18.0", "version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
@ -12803,6 +12972,11 @@
"is-wsl": "^1.1.0" "is-wsl": "^1.1.0"
} }
}, },
"optional-require": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/optional-require/-/optional-require-1.0.3.tgz",
"integrity": "sha512-RV2Zp2MY2aeYK5G+B/Sps8lW5NHAzE5QClbFP15j+PWmP+T9PxlJXBOOLoSAdgwFvS4t0aMR4vpedMkbHfh0nA=="
},
"optionator": { "optionator": {
"version": "0.8.2", "version": "0.8.2",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
@ -14789,11 +14963,26 @@
"resolved": "https://registry.npmjs.org/react-native-immersive/-/react-native-immersive-2.0.0.tgz", "resolved": "https://registry.npmjs.org/react-native-immersive/-/react-native-immersive-2.0.0.tgz",
"integrity": "sha512-9TL05nTHN/x9sN1wbUlBoGyzH4NCuZ/7WEEUp5CvOoKuUABvdYosov0O0SAMbm/5J913RRoy98VB6tGNi9lRSw==" "integrity": "sha512-9TL05nTHN/x9sN1wbUlBoGyzH4NCuZ/7WEEUp5CvOoKuUABvdYosov0O0SAMbm/5J913RRoy98VB6tGNi9lRSw=="
}, },
"react-native-iphone-x-helper": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
"integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg=="
},
"react-native-keep-awake": { "react-native-keep-awake": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/react-native-keep-awake/-/react-native-keep-awake-4.0.0.tgz", "resolved": "https://registry.npmjs.org/react-native-keep-awake/-/react-native-keep-awake-4.0.0.tgz",
"integrity": "sha512-0Fotox+eLXQooeibVs3P60yASYUWjtRw9MZNmbuHt5UZQrgUrAKsE4jm7gTr4tPU1m1RkwGzcgUFpcOkh/ec7g==" "integrity": "sha512-0Fotox+eLXQooeibVs3P60yASYUWjtRw9MZNmbuHt5UZQrgUrAKsE4jm7gTr4tPU1m1RkwGzcgUFpcOkh/ec7g=="
}, },
"react-native-paper": {
"version": "4.8.1",
"resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.8.1.tgz",
"integrity": "sha512-WgmqrDdcrr0ZbuiLCwMpmOMhl1n8uIvNulxsl2oCGtD8oeMkPJKHf4G/ONR+iNrSXcFbJek+uDRSmcGA5kDfUA==",
"requires": {
"@callstack/react-theme-provider": "^3.0.5",
"color": "^3.1.2",
"react-native-iphone-x-helper": "^1.3.1"
}
},
"react-native-sound": { "react-native-sound": {
"version": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190", "version": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190",
"from": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190" "from": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190"

7
package.json
View File

@ -60,6 +60,7 @@
"moment": "2.29.1", "moment": "2.29.1",
"moment-duration-format": "2.2.2", "moment-duration-format": "2.2.2",
"olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz", "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
"optional-require": "1.0.3",
"pixelmatch": "5.1.0", "pixelmatch": "5.1.0",
"promise.allsettled": "1.0.4", "promise.allsettled": "1.0.4",
"punycode": "2.1.1", "punycode": "2.1.1",
@ -77,6 +78,7 @@
"react-native-device-info": "8.0.0", "react-native-device-info": "8.0.0",
"react-native-immersive": "2.0.0", "react-native-immersive": "2.0.0",
"react-native-keep-awake": "4.0.0", "react-native-keep-awake": "4.0.0",
"react-native-paper": "4.8.1",
"react-native-sound": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190", "react-native-sound": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190",
"react-native-splash-screen": "3.2.0", "react-native-splash-screen": "3.2.0",
"react-native-svg": "12.1.0", "react-native-svg": "12.1.0",
@ -102,7 +104,7 @@
"zxcvbn": "4.4.2" "zxcvbn": "4.4.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "7.5.5", "@babel/core": "7.9.0",
"@babel/plugin-proposal-class-properties": "7.1.0", "@babel/plugin-proposal-class-properties": "7.1.0",
"@babel/plugin-proposal-export-default-from": "7.0.0", "@babel/plugin-proposal-export-default-from": "7.0.0",
"@babel/plugin-proposal-export-namespace-from": "7.0.0", "@babel/plugin-proposal-export-namespace-from": "7.0.0",
@ -112,9 +114,10 @@
"@babel/preset-env": "7.1.0", "@babel/preset-env": "7.1.0",
"@babel/preset-flow": "7.0.0", "@babel/preset-flow": "7.0.0",
"@babel/preset-react": "7.0.0", "@babel/preset-react": "7.0.0",
"@babel/runtime": "7.5.5", "@babel/runtime": "7.9.0",
"babel-eslint": "10.0.1", "babel-eslint": "10.0.1",
"babel-loader": "8.0.4", "babel-loader": "8.0.4",
"babel-plugin-optional-require": "0.3.1",
"circular-dependency-plugin": "5.2.0", "circular-dependency-plugin": "5.2.0",
"clean-css-cli": "4.3.0", "clean-css-cli": "4.3.0",
"css-loader": "3.6.0", "css-loader": "3.6.0",

11
react/features/app/components/App.native.js
View File

@ -11,6 +11,7 @@ import { getFeatureFlag } from '../../base/flags/functions';
import { Platform } from '../../base/react'; import { Platform } from '../../base/react';
import { DimensionsDetector, clientResized } from '../../base/responsive-ui'; import { DimensionsDetector, clientResized } from '../../base/responsive-ui';
import { updateSettings } from '../../base/settings'; import { updateSettings } from '../../base/settings';
import JitsiThemePaperProvider from '../../base/ui/components/JitsiThemeProvider.native';
import logger from '../logger'; import logger from '../logger';
import { AbstractApp } from './AbstractApp'; import { AbstractApp } from './AbstractApp';
@ -127,10 +128,12 @@ export class App extends AbstractApp {
*/ */
_createMainElement(component, props) { _createMainElement(component, props) {
return ( return (
<DimensionsDetector <JitsiThemePaperProvider>
onDimensionsChanged = { this._onDimensionsChanged }> <DimensionsDetector
{ super._createMainElement(component, props) } onDimensionsChanged = { this._onDimensionsChanged }>
</DimensionsDetector> { super._createMainElement(component, props) }
</DimensionsDetector>
</JitsiThemePaperProvider>
); );
} }

13
react/features/base/ui/Tokens.js
View File

@ -1,6 +1,6 @@
// @flow // @flow
// Default color pallete // Default color palette
export const colors = { export const colors = {
error03: '#7A141F', error03: '#7A141F',
error04: '#A21B29', error04: '#A21B29',
@ -157,6 +157,15 @@ export const colorMap = {
// Disabled background for high-contrast input fields // Disabled background for high-contrast input fields
field02Disabled: 'surface06', field02Disabled: 'surface06',
// Background for section header
section01: 'surface10',
// Active color for section header
section01Active: 'primary04',
// Inactive color for section header
section01Inactive: 'surface01',
// Borders // Borders
// Border for the input fields in hover state // Border for the input fields in hover state
border01: 'surface08', border01: 'surface08',
@ -184,7 +193,7 @@ export const colorMap = {
// Color for positive messages applied to icons & borders // Color for positive messages applied to icons & borders
success01: 'success05', success01: 'success05',
// Color for positive messages applied tobackgrounds // Color for positive messages applied to backgrounds
success02: 'success05', success02: 'success05',
// Color for warning messages applied to icons, borders & backgrounds // Color for warning messages applied to icons, borders & backgrounds

13
react/features/base/ui/components/BaseTheme.native.js Normal file
View File

@ -0,0 +1,13 @@
// @flow
import { font, colors, colorMap, spacing, shape, typography } from '../Tokens';
import { createNativeTheme } from '../functions.native';
export default createNativeTheme({
font,
colors,
colorMap,
spacing,
shape,
typography
});

24
react/features/base/ui/components/JitsiThemeProvider.native.js Normal file
View File

@ -0,0 +1,24 @@
// @flow
import * as React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import BaseTheme from './BaseTheme.native';
type Props = {
/**
* The children of the component.
*/
children: React.ChildrenArray<any>
}
/**
* The theme provider for the mobile app.
*
* @param {Object} props - The props of the component.
* @returns {React.ReactNode}
*/
export default function JitsiThemePaperProvider(props: Props) {
return <PaperProvider theme = { BaseTheme }>{ props.children }</PaperProvider>;
}

24
react/features/base/ui/functions.native.js Normal file
View File

@ -0,0 +1,24 @@
// @flow
import { DefaultTheme } from 'react-native-paper';
import { createColorTokens } from './utils';
/**
* Creates a React Native Paper theme based on local UI tokens.
*
* @param {Object} arg - The ui tokens.
* @returns {Object}
*/
export function createNativeTheme({ font, colors, colorMap, shape, spacing, typography }: Object) {
return {
...DefaultTheme,
palette: createColorTokens(colorMap, colors),
shape,
spacing,
typography: {
font,
...typography
}
};
}

14
react/features/base/ui/functions.js → react/features/base/ui/functions.web.js
View File

@ -2,19 +2,7 @@
import { createMuiTheme } from '@material-ui/core/styles'; import { createMuiTheme } from '@material-ui/core/styles';
/** import { createColorTokens } from './utils';
* Creates the color tokens based on the color theme and the association map.
* If a key is not fonund in the association map it defaults to the current value.
*
* @param {Object} colorMap - A map between the token name and the actual color value.
* @param {Object} colors - An object containing all the theme colors.
* @returns {Object}
*/
function createColorTokens(colorMap: Object, colors: Object): Object {
return Object.entries(colorMap)
.reduce((result, [ token, value ]) =>
Object.assign(result, { [token]: colors[value] || value }), {});
}
/** /**
* Creates a MUI theme based on local UI tokens. * Creates a MUI theme based on local UI tokens.

15
react/features/base/ui/utils.js Normal file
View File

@ -0,0 +1,15 @@
// @flow
/**
* Creates the color tokens based on the color theme and the association map.
* If a key is not found in the association map it defaults to the current value.
*
* @param {Object} colorMap - A map between the token name and the actual color value.
* @param {Object} colors - An object containing all the theme colors.
* @returns {Object}
*/
export function createColorTokens(colorMap: Object, colors: Object): Object {
return Object.entries(colorMap)
.reduce((result, [ token, value ]) =>
Object.assign(result, { [token]: colors[value] || value }), {});
}

87
react/features/settings/components/native/FormSectionAccordion.js Normal file
View File

@ -0,0 +1,87 @@
// @flow
import React, { useState } from 'react';
import { List } from 'react-native-paper';
import { translate } from '../../../base/i18n';
import { Icon, IconArrowDown, IconArrowUp } from '../../../base/icons';
import styles from './styles';
/**
* The type of the React {@code Component} props of {@link FormSectionAccordion}
*/
type Props = {
/**
* Is the section an accordion or not.
*/
accordion: boolean,
/**
* The children to be displayed within this Link.
*/
children: React$Node,
/**
* Whether the accordion is expandable.
*/
expandable: boolean,
/**
* The i18n key of the text label of the section.
*/
label: string,
/**
* An external style object passed to the component.
*/
style: Object,
/**
* Invoked to obtain translated strings.
*/
t: Function
}
/**
* Section accordion on settings form.
*
* @returns {React$Element<any>}
*/
function FormSectionAccordion({ accordion, children, expandable, label, style, t }: Props) {
const [ expandSection, setExpandSection ] = useState(false);
/**
* Press handler for expanding form section.
*
* @returns {void}
*/
function onPress() {
setExpandSection(!expandSection);
}
return (
<List.Accordion
expanded = { expandSection || !expandable }
onPress = { onPress }
/* eslint-disable-next-line react/jsx-no-bind */
right = { props =>
accordion && <Icon
{ ...props }
src = { expandSection ? IconArrowUp : IconArrowDown }
style = { expandSection ? styles.sectionOpen : styles.sectionClose } /> }
style = { [
styles.formSectionTitle,
style
] }
title = { t(label) }
titleStyle = {
expandSection || !expandable
? styles.formSectionTitleActive : styles.formSectionTitleInActive }>
{ children }
</List.Accordion>
);
}
export default translate(FormSectionAccordion);

60
react/features/settings/components/native/FormSectionHeader.js
View File

@ -1,60 +0,0 @@
// @flow
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { translate } from '../../../base/i18n';
import styles from './styles';
/**
* The type of the React {@code Component} props of {@link FormSectionHeader}
*/
type Props = {
/**
* The i18n key of the text label of the section.
*/
label: string,
/**
* An external style object passed to the component.
*/
style: Object,
/**
* Invoked to obtain translated strings.
*/
t: Function
}
/**
* Implements a React {@code Component} which renders a section header on a
* form.
*/
class FormSectionHeader extends Component<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @override
* @returns {ReactElement}
*/
render() {
const { label, style, t } = this.props;
return (
<View
style = { [
styles.formSectionTitle,
style
] } >
<Text>
{ t(label) }
</Text>
</View>
);
}
}
export default translate(FormSectionHeader);

240
react/features/settings/components/native/SettingsView.js
View File

@ -1,7 +1,8 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { Alert, NativeModules, ScrollView, Switch, Text, TextInput } from 'react-native'; import { Alert, NativeModules, ScrollView, Text } from 'react-native';
import { Divider, Switch, TextInput, withTheme } from 'react-native-paper';
import { translate } from '../../../base/i18n'; import { translate } from '../../../base/i18n';
import { JitsiModal } from '../../../base/modal'; import { JitsiModal } from '../../../base/modal';
@ -15,7 +16,8 @@ import {
} from '../AbstractSettingsView'; } from '../AbstractSettingsView';
import FormRow from './FormRow'; import FormRow from './FormRow';
import FormSectionHeader from './FormSectionHeader'; import FormSectionAccordion from './FormSectionAccordion';
import styles, { THUMB_COLOR } from './styles';
/** /**
* Application information module. * Application information module.
@ -54,11 +56,6 @@ type State = {
*/ */
serverURL: string, serverURL: string,
/**
* Whether to show advanced settings or not.
*/
showAdvanced: boolean,
/** /**
* State variable for the start with audio muted switch. * State variable for the start with audio muted switch.
*/ */
@ -67,7 +64,7 @@ type State = {
/** /**
* State variable for the start with video muted switch. * State variable for the start with video muted switch.
*/ */
startWithVideoMuted: boolean, startWithVideoMuted: boolean
} }
/** /**
@ -81,7 +78,12 @@ type Props = AbstractProps & {
* *
* @protected * @protected
*/ */
_serverURLChangeEnabled: boolean _serverURLChangeEnabled: boolean,
/**
* Theme used for styles.
*/
theme: Object
} }
/** /**
@ -117,7 +119,6 @@ class SettingsView extends AbstractSettingsView<Props, State> {
displayName, displayName,
email, email,
serverURL, serverURL,
showAdvanced: false,
startWithAudioMuted, startWithAudioMuted,
startWithVideoMuted startWithVideoMuted
}; };
@ -128,7 +129,6 @@ class SettingsView extends AbstractSettingsView<Props, State> {
this._onDisableCallIntegration = this._onDisableCallIntegration.bind(this); this._onDisableCallIntegration = this._onDisableCallIntegration.bind(this);
this._onDisableCrashReporting = this._onDisableCrashReporting.bind(this); this._onDisableCrashReporting = this._onDisableCrashReporting.bind(this);
this._onDisableP2P = this._onDisableP2P.bind(this); this._onDisableP2P = this._onDisableP2P.bind(this);
this._onShowAdvanced = this._onShowAdvanced.bind(this);
this._setURLFieldReference = this._setURLFieldReference.bind(this); this._setURLFieldReference = this._setURLFieldReference.bind(this);
this._showURLAlert = this._showURLAlert.bind(this); this._showURLAlert = this._showURLAlert.bind(this);
} }
@ -140,7 +140,17 @@ class SettingsView extends AbstractSettingsView<Props, State> {
* @returns {ReactElement} * @returns {ReactElement}
*/ */
render() { render() {
const { displayName, email, serverURL, startWithAudioMuted, startWithVideoMuted } = this.state; const {
disableCallIntegration,
disableCrashReporting,
disableP2P,
displayName,
email,
serverURL,
startWithAudioMuted,
startWithVideoMuted
} = this.state;
const { palette } = this.props.theme;
return ( return (
<JitsiModal <JitsiModal
@ -150,71 +160,130 @@ class SettingsView extends AbstractSettingsView<Props, State> {
modalId = { SETTINGS_VIEW_ID } modalId = { SETTINGS_VIEW_ID }
onClose = { this._onClose }> onClose = { this._onClose }>
<ScrollView> <ScrollView>
<FormSectionHeader <FormSectionAccordion
label = 'settingsView.profileSection' /> accordion = { false }
<FormRow expandable = { false }
fieldSeparator = { true } label = 'settingsView.profileSection'>
label = 'settingsView.displayName'
layout = 'column'>
<TextInput <TextInput
autoCorrect = { false } autoCorrect = { false }
label = { this.props.t('settingsView.displayName') }
mode = 'outlined'
onChangeText = { this._onChangeDisplayName } onChangeText = { this._onChangeDisplayName }
placeholder = 'John Doe' placeholder = 'John Doe'
style = { styles.textInputContainer }
textContentType = { 'name' } // iOS only textContentType = { 'name' } // iOS only
theme = {{
colors: {
primary: palette.action01Active,
underlineColor: 'transparent'
}
}}
value = { displayName } /> value = { displayName } />
</FormRow> <Divider style = { styles.fieldSeparator } />
<FormRow
label = 'settingsView.email'
layout = 'column'>
<TextInput <TextInput
autoCapitalize = 'none' autoCapitalize = 'none'
autoCorrect = { false } autoCorrect = { false }
keyboardType = { 'email-address' } keyboardType = { 'email-address' }
label = { this.props.t('settingsView.email') }
mode = 'outlined'
onChangeText = { this._onChangeEmail } onChangeText = { this._onChangeEmail }
placeholder = 'email@example.com' placeholder = 'email@example.com'
style = { styles.textInputContainer }
textContentType = { 'emailAddress' } // iOS only textContentType = { 'emailAddress' } // iOS only
theme = {{
colors: {
primary: palette.action01Active,
underlineColor: 'transparent'
}
}}
value = { email } /> value = { email } />
</FormRow> </FormSectionAccordion>
<FormSectionHeader <FormSectionAccordion
label = 'settingsView.conferenceSection' /> accordion = { false }
<FormRow expandable = { false }
fieldSeparator = { true } label = 'settingsView.conferenceSection'>
label = 'settingsView.serverURL'
layout = 'column'>
<TextInput <TextInput
autoCapitalize = 'none' autoCapitalize = 'none'
autoCorrect = { false } autoCorrect = { false }
editable = { this.props._serverURLChangeEnabled } editable = { this.props._serverURLChangeEnabled }
keyboardType = { 'url' } keyboardType = { 'url' }
label = { this.props.t('settingsView.serverURL') }
mode = 'outlined'
onBlur = { this._onBlurServerURL } onBlur = { this._onBlurServerURL }
onChangeText = { this._onChangeServerURL } onChangeText = { this._onChangeServerURL }
placeholder = { this.props._serverURL } placeholder = { this.props._serverURL }
style = { styles.textInputContainer }
textContentType = { 'URL' } // iOS only textContentType = { 'URL' } // iOS only
theme = {{
colors: {
primary: palette.action01Active,
underlineColor: 'transparent'
}
}}
value = { serverURL } /> value = { serverURL } />
</FormRow> <Divider style = { styles.fieldSeparator } />
<FormRow <FormRow
fieldSeparator = { true } label = 'settingsView.startWithAudioMuted'>
label = 'settingsView.startWithAudioMuted'> <Switch
<Switch onValueChange = { this._onStartAudioMutedChange }
onValueChange = { this._onStartAudioMutedChange } thumbColor = { THUMB_COLOR }
value = { startWithAudioMuted } /> trackColor = {{ true: palette.action01Active }}
</FormRow> value = { startWithAudioMuted } />
<FormRow label = 'settingsView.startWithVideoMuted'> </FormRow>
<Switch <Divider style = { styles.fieldSeparator } />
onValueChange = { this._onStartVideoMutedChange } <FormRow label = 'settingsView.startWithVideoMuted'>
value = { startWithVideoMuted } /> <Switch
</FormRow> onValueChange = { this._onStartVideoMutedChange }
<FormSectionHeader thumbColor = { THUMB_COLOR }
label = 'settingsView.buildInfoSection' /> trackColor = {{ true: palette.action01Active }}
<FormRow value = { startWithVideoMuted } />
label = 'settingsView.version'> </FormRow>
<Text> </FormSectionAccordion>
{`${AppInfo.version} build ${AppInfo.buildNumber}`} <FormSectionAccordion
</Text> accordion = { false }
</FormRow> expandable = { false }
<FormSectionHeader label = 'settingsView.buildInfoSection'>
label = 'settingsView.advanced' /> <FormRow
{this._renderAdvancedSettings()} label = 'settingsView.version'>
<Text>
{`${AppInfo.version} build ${AppInfo.buildNumber}`}
</Text>
</FormRow>
</FormSectionAccordion>
<FormSectionAccordion
accordion = { true }
expandable = { true }
label = 'settingsView.advanced'>
<FormRow
label = 'settingsView.disableCallIntegration'>
<Switch
onValueChange = { this._onDisableCallIntegration }
thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.action01Active }}
value = { disableCallIntegration } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
<FormRow
label = 'settingsView.disableP2P'>
<Switch
onValueChange = { this._onDisableP2P }
thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.action01Active }}
value = { disableP2P } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
{AppInfo.GOOGLE_SERVICES_ENABLED && (
<FormRow
fieldSeparator = { true }
label = 'settingsView.disableCrashReporting'>
<Switch
onValueChange = { this._onDisableCrashReporting }
thumbColor = { THUMB_COLOR }
trackColor = {{ true: palette.action01Active }}
value = { disableCrashReporting } />
</FormRow>
)}
</FormSectionAccordion>
</ScrollView> </ScrollView>
</JitsiModal> </JitsiModal>
); );
@ -337,22 +406,9 @@ class SettingsView extends AbstractSettingsView<Props, State> {
* @returns {boolean} - True if the modal can be closed. * @returns {boolean} - True if the modal can be closed.
*/ */
_onClose() { _onClose() {
this.setState({ showAdvanced: false });
return this._processServerURL(true /* hideOnSuccess */); return this._processServerURL(true /* hideOnSuccess */);
} }
_onShowAdvanced: () => void;
/**
* Handles the advanced settings button.
*
* @returns {void}
*/
_onShowAdvanced() {
this.setState({ showAdvanced: !this.state.showAdvanced });
}
/** /**
* Callback to update the start with audio muted value. * Callback to update the start with audio muted value.
* *
@ -403,56 +459,6 @@ class SettingsView extends AbstractSettingsView<Props, State> {
return hideOnSuccess; return hideOnSuccess;
} }
/**
* Renders the advanced settings options.
*
* @private
* @returns {React$Element}
*/
_renderAdvancedSettings() {
const { disableCallIntegration, disableP2P, disableCrashReporting, showAdvanced } = this.state;
if (!showAdvanced) {
return (
<FormRow
fieldSeparator = { true }
label = 'settingsView.showAdvanced'>
<Switch
onValueChange = { this._onShowAdvanced }
value = { showAdvanced } />
</FormRow>
);
}
return (
<>
<FormRow
fieldSeparator = { true }
label = 'settingsView.disableCallIntegration'>
<Switch
onValueChange = { this._onDisableCallIntegration }
value = { disableCallIntegration } />
</FormRow>
<FormRow
fieldSeparator = { true }
label = 'settingsView.disableP2P'>
<Switch
onValueChange = { this._onDisableP2P }
value = { disableP2P } />
</FormRow>
{AppInfo.GOOGLE_SERVICES_ENABLED && (
<FormRow
fieldSeparator = { true }
label = 'settingsView.disableCrashReporting'>
<Switch
onValueChange = { this._onDisableCrashReporting }
value = { disableCrashReporting } />
</FormRow>
)}
</>
);
}
_setURLFieldReference: (React$ElementRef<*> | null) => void; _setURLFieldReference: (React$ElementRef<*> | null) => void;
/** /**
@ -538,4 +544,4 @@ function _mapStateToProps(state) {
}; };
} }
export default translate(connect(_mapStateToProps)(SettingsView)); export default translate(connect(_mapStateToProps)(withTheme(SettingsView)));

57
react/features/settings/components/native/styles.js
View File

@ -1,9 +1,9 @@
import { ColorPalette } from '../../../base/styles'; import BaseTheme from '../../../base/ui/components/BaseTheme.native';
export const ANDROID_UNDERLINE_COLOR = 'transparent'; export const ANDROID_UNDERLINE_COLOR = 'transparent';
export const PLACEHOLDER_COLOR = ColorPalette.lightGrey; export const PLACEHOLDER_COLOR = BaseTheme.palette.action02Focus;
export const THUMB_COLOR = BaseTheme.palette.field02;
const TEXT_SIZE = 17; const TEXT_SIZE = 14;
/** /**
* The styles of the native components of the feature {@code settings}. * The styles of the native components of the feature {@code settings}.
@ -15,7 +15,7 @@ export default {
fieldContainer: { fieldContainer: {
alignItems: 'center', alignItems: 'center',
flexDirection: 'row', flexDirection: 'row',
minHeight: 65, minHeight: 56,
paddingHorizontal: 8 paddingHorizontal: 8
}, },
@ -24,8 +24,7 @@ export default {
*/ */
fieldContainerColumn: { fieldContainerColumn: {
alignItems: 'flex-start', alignItems: 'flex-start',
flexDirection: 'column', flexDirection: 'column'
paddingVertical: 3
}, },
/** /**
@ -34,7 +33,7 @@ export default {
fieldLabelContainer: { fieldLabelContainer: {
alignItems: 'center', alignItems: 'center',
flexDirection: 'row', flexDirection: 'row',
marginRight: 5 paddingLeft: 8
}, },
/** /**
@ -67,29 +66,61 @@ export default {
alignItems: 'center', alignItems: 'center',
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'flex-end' justifyContent: 'flex-end',
paddingRight: 8
}, },
/** /**
* Style for the form section separator titles. * Style for the form section separator titles.
*/ */
formSectionTitle: { formSectionTitle: {
backgroundColor: 'rgba(0, 0, 0, 0.1)', backgroundColor: BaseTheme.palette.section01,
padding: 5 paddingBottom: 0,
paddingTop: 0
},
formSectionTitleActive: {
color: BaseTheme.palette.section01Active
},
formSectionTitleInActive: {
color: BaseTheme.palette.section01Inactive
},
sectionClose: {
color: BaseTheme.palette.section01Inactive,
fontSize: 14
},
sectionOpen: {
color: BaseTheme.palette.section01Active,
fontSize: 14
}, },
/** /**
* Global {@code Text} color for the components. * Global {@code Text} color for the components.
*/ */
text: { text: {
color: ColorPalette.black color: BaseTheme.palette.field01
},
/**
* Text input container style.
*/
textInputContainer: {
flex: 1,
height: 40,
paddingBottom: 8,
paddingTop: 2,
paddingLeft: 16,
paddingRight: 16
}, },
/** /**
* Standard text input field style. * Standard text input field style.
*/ */
textInputField: { textInputField: {
color: ColorPalette.black, color: BaseTheme.palette.field01,
flex: 1, flex: 1,
fontSize: TEXT_SIZE, fontSize: TEXT_SIZE,
textAlign: 'right' textAlign: 'right'

3
webpack.config.js
View File

@ -77,6 +77,9 @@ const config = {
], ],
loader: 'babel-loader', loader: 'babel-loader',
options: { options: {
// Avoid loading babel.config.js, since we only use it for React Native.
configFile: false,
// XXX The require.resolve bellow solves failures to locate the // XXX The require.resolve bellow solves failures to locate the
// presets when lib-jitsi-meet, for example, is npm linked in // presets when lib-jitsi-meet, for example, is npm linked in
// jitsi-meet. // jitsi-meet.