Browse Source

select perfomance improvements, small design fixes, wip

master
NastiaS 7 years ago
parent
commit
c02874aed1
  1. 7
      src/components/SettingsPage/DisablePasswordModal.js
  2. 28
      src/components/SettingsPage/sections/Display.js
  3. 2
      src/components/base/Input/index.js
  4. 7
      src/components/base/Select/index.js
  5. 245
      src/helpers/countries.json
  6. 2
      src/reducers/settings.js
  7. 5
      src/types/common.js
  8. 3
      static/i18n/en/settings.yml
  9. 42
      yarn.lock

7
src/components/SettingsPage/DisablePasswordModal.js

@ -6,6 +6,7 @@ import bcrypt from 'bcryptjs'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
import InputPassword from 'components/base/InputPassword'
import Label from 'components/base/Label'
import { ErrorMessageInput } from 'components/base/Input'
import { Modal, ModalContent, ModalBody, ModalTitle, ModalFooter } from 'components/base/Modal'
@ -72,14 +73,14 @@ class DisablePasswordModal extends PureComponent<Props, State> {
<ModalBody onClose={onClose}>
<ModalTitle>{t('settings:profile.disablePasswordModalTitle')}</ModalTitle>
<ModalContent>
<Box ff="Museo Sans|Regular" color="dark" textAlign="center" mb={2} mt={3}>
{t('settings:profile.disablePasswordModalSubtitle')}
</Box>
<Box ff="Open Sans" color="smoke" fontSize={4} textAlign="center" px={4}>
{t('settings:profile.disablePasswordModalDesc')}
<Box px={7} mt={4} flow={3}>
{isPasswordEnabled && (
<Box flow={1}>
<Label htmlFor="password">
{t('settings:profile.disablePasswordModalInput')}
</Label>
<InputPassword
autoFocus
type="password"

28
src/components/SettingsPage/sections/Display.js

@ -8,9 +8,10 @@ import type { Settings, T } from 'types/common'
import Select from 'components/base/Select'
import RadioGroup from 'components/base/RadioGroup'
import IconDisplay from 'icons/Display'
import COUNTRIES from 'helpers/countries.json'
import {
SettingsSection as Section,
SettingsSectionHeader as Header,
@ -24,20 +25,6 @@ const fiats = listFiats().map(fiat => ({
name: `${fiat.name} - ${fiat.code}${fiat.symbol ? ` (${fiat.symbol})` : ''}`,
}))
/* temporary subset of countries */
const COUNTRIES = [
{ name: 'China', key: 'CN' },
{ name: 'France', key: 'FR' },
{ name: 'India', key: 'IN' },
{ name: 'Italy', key: 'IT' },
{ name: 'Japan', key: 'JP' },
{ name: 'Russian Federation', key: 'RU' },
{ name: 'Singapore', key: 'SG' },
{ name: 'Switzerland', key: 'CH' },
{ name: 'United Kingdom', key: 'GB' },
{ name: 'United States', key: 'US' },
]
type Props = {
t: T,
settings: Settings,
@ -49,7 +36,7 @@ type State = {
cachedMarketIndicator: string,
cachedLanguageKey: string,
cachedCounterValue: ?Object,
cachedRegion: Object,
cachedRegion: string,
}
class TabProfile extends PureComponent<Props, State> {
@ -99,7 +86,7 @@ class TabProfile extends PureComponent<Props, State> {
})
}
handleChangeRegion = (region: Object) => {
handleChangeRegion = (region: string) => {
const { saveSettings } = this.props
this.setState({ cachedRegion: region })
window.requestIdleCallback(() => {
@ -128,7 +115,7 @@ class TabProfile extends PureComponent<Props, State> {
} = this.state
const { languages } = this.getDatas()
const currentLanguage = languages.find(l => l.key === cachedLanguageKey)
const currentRegion = COUNTRIES.find(r => r.key === cachedRegion.key)
const currentRegion = COUNTRIES.find(r => r.key === cachedRegion)
return (
<Section>
@ -168,9 +155,8 @@ class TabProfile extends PureComponent<Props, State> {
<Select
searchable
fuseOptions={{ keys: ['name'] }}
style={{ minWidth: 130 }}
small
onChange={item => this.handleChangeRegion(item)}
maxHeight={200}
onChange={item => this.handleChangeRegion(item.key)}
renderSelected={item => item && item.name}
value={currentRegion}
items={COUNTRIES}

2
src/components/base/Input/index.js

@ -38,7 +38,7 @@ const Base = styled.input.attrs({
`
export const ErrorMessageInput = styled(Box).attrs({
alignItems: 'flex-end',
alignItems: 'flex-start',
color: 'alertRed',
ff: 'Open Sans|SemiBold',
fontSize: 3,

7
src/components/base/Select/index.js

@ -320,8 +320,8 @@ class Select extends PureComponent<Props> {
<AngleDown mr={-1} />
</TriggerBtn>
)}
{isOpen &&
(searchable ? (
<div hidden={!isOpen}>
{searchable ? (
<Search
value={inputValue}
items={items}
@ -332,7 +332,8 @@ class Select extends PureComponent<Props> {
/>
) : (
this.renderItems(items, selectedItem, downshiftProps)
))}
)}
</div>
</Container>
)
}}

245
src/helpers/countries.json

@ -0,0 +1,245 @@
[
{ "name": "Afghanistan", "key": "AF" },
{ "name": "Åland Islands", "key": "AX" },
{ "name": "Albania", "key": "AL" },
{ "name": "Algeria", "key": "DZ" },
{ "name": "American Samoa", "key": "AS" },
{ "name": "AndorrA", "key": "AD" },
{ "name": "Angola", "key": "AO" },
{ "name": "Anguilla", "key": "AI" },
{ "name": "Antarctica", "key": "AQ" },
{ "name": "Antigua and Barbuda", "key": "AG" },
{ "name": "Argentina", "key": "AR" },
{ "name": "Armenia", "key": "AM" },
{ "name": "Aruba", "key": "AW" },
{ "name": "Australia", "key": "AU" },
{ "name": "Austria", "key": "AT" },
{ "name": "Azerbaijan", "key": "AZ" },
{ "name": "Bahamas", "key": "BS" },
{ "name": "Bahrain", "key": "BH" },
{ "name": "Bangladesh", "key": "BD" },
{ "name": "Barbados", "key": "BB" },
{ "name": "Belarus", "key": "BY" },
{ "name": "Belgium", "key": "BE" },
{ "name": "Belize", "key": "BZ" },
{ "name": "Benin", "key": "BJ" },
{ "name": "Bermuda", "key": "BM" },
{ "name": "Bhutan", "key": "BT" },
{ "name": "Bolivia", "key": "BO" },
{ "name": "Bosnia and Herzegovina", "key": "BA" },
{ "name": "Botswana", "key": "BW" },
{ "name": "Bouvet Island", "key": "BV" },
{ "name": "Brazil", "key": "BR" },
{ "name": "British Indian Ocean Territory", "key": "IO" },
{ "name": "Brunei Darussalam", "key": "BN" },
{ "name": "Bulgaria", "key": "BG" },
{ "name": "Burkina Faso", "key": "BF" },
{ "name": "Burundi", "key": "BI" },
{ "name": "Cambodia", "key": "KH" },
{ "name": "Cameroon", "key": "CM" },
{ "name": "Canada", "key": "CA" },
{ "name": "Cape Verde", "key": "CV" },
{ "name": "Cayman Islands", "key": "KY" },
{ "name": "Central African Republic", "key": "CF" },
{ "name": "Chad", "key": "TD" },
{ "name": "Chile", "key": "CL" },
{ "name": "China", "key": "CN" },
{ "name": "Christmas Island", "key": "CX" },
{ "name": "Cocos (Keeling) Islands", "key": "CC" },
{ "name": "Colombia", "key": "CO" },
{ "name": "Comoros", "key": "KM" },
{ "name": "Congo", "key": "CG" },
{ "name": "Congo, The Democratic Republic of the", "key": "CD" },
{ "name": "Cook Islands", "key": "CK" },
{ "name": "Costa Rica", "key": "CR" },
{ "name": "Cote D'Ivoire", "key": "CI" },
{ "name": "Croatia", "key": "HR" },
{ "name": "Cuba", "key": "CU" },
{ "name": "Cyprus", "key": "CY" },
{ "name": "Czech Republic", "key": "CZ" },
{ "name": "Denmark", "key": "DK" },
{ "name": "Djibouti", "key": "DJ" },
{ "name": "Dominica", "key": "DM" },
{ "name": "Dominican Republic", "key": "DO" },
{ "name": "Ecuador", "key": "EC" },
{ "name": "Egypt", "key": "EG" },
{ "name": "El Salvador", "key": "SV" },
{ "name": "Equatorial Guinea", "key": "GQ" },
{ "name": "Eritrea", "key": "ER" },
{ "name": "Estonia", "key": "EE" },
{ "name": "Ethiopia", "key": "ET" },
{ "name": "Falkland Islands (Malvinas)", "key": "FK" },
{ "name": "Faroe Islands", "key": "FO" },
{ "name": "Fiji", "key": "FJ" },
{ "name": "Finland", "key": "FI" },
{ "name": "France", "key": "FR" },
{ "name": "French Guiana", "key": "GF" },
{ "name": "French Polynesia", "key": "PF" },
{ "name": "French Southern Territories", "key": "TF" },
{ "name": "Gabon", "key": "GA" },
{ "name": "Gambia", "key": "GM" },
{ "name": "Georgia", "key": "GE" },
{ "name": "Germany", "key": "DE" },
{ "name": "Ghana", "key": "GH" },
{ "name": "Gibraltar", "key": "GI" },
{ "name": "Greece", "key": "GR" },
{ "name": "Greenland", "key": "GL" },
{ "name": "Grenada", "key": "GD" },
{ "name": "Guadeloupe", "key": "GP" },
{ "name": "Guam", "key": "GU" },
{ "name": "Guatemala", "key": "GT" },
{ "name": "Guernsey", "key": "GG" },
{ "name": "Guinea", "key": "GN" },
{ "name": "Guinea-Bissau", "key": "GW" },
{ "name": "Guyana", "key": "GY" },
{ "name": "Haiti", "key": "HT" },
{ "name": "Heard Island and Mcdonald Islands", "key": "HM" },
{ "name": "Holy See (Vatican City State)", "key": "VA" },
{ "name": "Honduras", "key": "HN" },
{ "name": "Hong Kong", "key": "HK" },
{ "name": "Hungary", "key": "HU" },
{ "name": "Iceland", "key": "IS" },
{ "name": "India", "key": "IN" },
{ "name": "Indonesia", "key": "ID" },
{ "name": "Iran, Islamic Republic Of", "key": "IR" },
{ "name": "Iraq", "key": "IQ" },
{ "name": "Ireland", "key": "IE" },
{ "name": "Isle of Man", "key": "IM" },
{ "name": "Israel", "key": "IL" },
{ "name": "Italy", "key": "IT" },
{ "name": "Jamaica", "key": "JM" },
{ "name": "Japan", "key": "JP" },
{ "name": "Jersey", "key": "JE" },
{ "name": "Jordan", "key": "JO" },
{ "name": "Kazakhstan", "key": "KZ" },
{ "name": "Kenya", "key": "KE" },
{ "name": "Kiribati", "key": "KI" },
{ "name": "Korea, Democratic People'S Republic of", "key": "KP" },
{ "name": "Korea, Republic of", "key": "KR" },
{ "name": "Kuwait", "key": "KW" },
{ "name": "Kyrgyzstan", "key": "KG" },
{ "name": "Lao People'S Democratic Republic", "key": "LA" },
{ "name": "Latvia", "key": "LV" },
{ "name": "Lebanon", "key": "LB" },
{ "name": "Lesotho", "key": "LS" },
{ "name": "Liberia", "key": "LR" },
{ "name": "Libyan Arab Jamahiriya", "key": "LY" },
{ "name": "Liechtenstein", "key": "LI" },
{ "name": "Lithuania", "key": "LT" },
{ "name": "Luxembourg", "key": "LU" },
{ "name": "Macao", "key": "MO" },
{ "name": "Macedonia, The Former Yugoslav Republic of", "key": "MK" },
{ "name": "Madagascar", "key": "MG" },
{ "name": "Malawi", "key": "MW" },
{ "name": "Malaysia", "key": "MY" },
{ "name": "Maldives", "key": "MV" },
{ "name": "Mali", "key": "ML" },
{ "name": "Malta", "key": "MT" },
{ "name": "Marshall Islands", "key": "MH" },
{ "name": "Martinique", "key": "MQ" },
{ "name": "Mauritania", "key": "MR" },
{ "name": "Mauritius", "key": "MU" },
{ "name": "Mayotte", "key": "YT" },
{ "name": "Mexico", "key": "MX" },
{ "name": "Micronesia, Federated States of", "key": "FM" },
{ "name": "Moldova, Republic of", "key": "MD" },
{ "name": "Monaco", "key": "MC" },
{ "name": "Mongolia", "key": "MN" },
{ "name": "Montserrat", "key": "MS" },
{ "name": "Morocco", "key": "MA" },
{ "name": "Mozambique", "key": "MZ" },
{ "name": "Myanmar", "key": "MM" },
{ "name": "Namibia", "key": "NA" },
{ "name": "Nauru", "key": "NR" },
{ "name": "Nepal", "key": "NP" },
{ "name": "Netherlands", "key": "NL" },
{ "name": "Netherlands Antilles", "key": "AN" },
{ "name": "New Caledonia", "key": "NC" },
{ "name": "New Zealand", "key": "NZ" },
{ "name": "Nicaragua", "key": "NI" },
{ "name": "Niger", "key": "NE" },
{ "name": "Nigeria", "key": "NG" },
{ "name": "Niue", "key": "NU" },
{ "name": "Norfolk Island", "key": "NF" },
{ "name": "Northern Mariana Islands", "key": "MP" },
{ "name": "Norway", "key": "NO" },
{ "name": "Oman", "key": "OM" },
{ "name": "Pakistan", "key": "PK" },
{ "name": "Palau", "key": "PW" },
{ "name": "Palestinian Territory, Occupied", "key": "PS" },
{ "name": "Panama", "key": "PA" },
{ "name": "Papua New Guinea", "key": "PG" },
{ "name": "Paraguay", "key": "PY" },
{ "name": "Peru", "key": "PE" },
{ "name": "Philippines", "key": "PH" },
{ "name": "Pitcairn", "key": "PN" },
{ "name": "Poland", "key": "PL" },
{ "name": "Portugal", "key": "PT" },
{ "name": "Puerto Rico", "key": "PR" },
{ "name": "Qatar", "key": "QA" },
{ "name": "Reunion", "key": "RE" },
{ "name": "Romania", "key": "RO" },
{ "name": "Russian Federation", "key": "RU" },
{ "name": "RWANDA", "key": "RW" },
{ "name": "Saint Helena", "key": "SH" },
{ "name": "Saint Kitts and Nevis", "key": "KN" },
{ "name": "Saint Lucia", "key": "LC" },
{ "name": "Saint Pierre and Miquelon", "key": "PM" },
{ "name": "Saint Vincent and the Grenadines", "key": "VC" },
{ "name": "Samoa", "key": "WS" },
{ "name": "San Marino", "key": "SM" },
{ "name": "Sao Tome and Principe", "key": "ST" },
{ "name": "Saudi Arabia", "key": "SA" },
{ "name": "Senegal", "key": "SN" },
{ "name": "Serbia and Montenegro", "key": "CS" },
{ "name": "Seychelles", "key": "SC" },
{ "name": "Sierra Leone", "key": "SL" },
{ "name": "Singapore", "key": "SG" },
{ "name": "Slovakia", "key": "SK" },
{ "name": "Slovenia", "key": "SI" },
{ "name": "Solomon Islands", "key": "SB" },
{ "name": "Somalia", "key": "SO" },
{ "name": "South Africa", "key": "ZA" },
{ "name": "South Georgia and the South Sandwich Islands", "key": "GS" },
{ "name": "Spain", "key": "ES" },
{ "name": "Sri Lanka", "key": "LK" },
{ "name": "Sudan", "key": "SD" },
{ "name": "Suriname", "key": "SR" },
{ "name": "Svalbard and Jan Mayen", "key": "SJ" },
{ "name": "Swaziland", "key": "SZ" },
{ "name": "Sweden", "key": "SE" },
{ "name": "Switzerland", "key": "CH" },
{ "name": "Syrian Arab Republic", "key": "SY" },
{ "name": "Taiwan, Province of China", "key": "TW" },
{ "name": "Tajikistan", "key": "TJ" },
{ "name": "Tanzania, United Republic of", "key": "TZ" },
{ "name": "Thailand", "key": "TH" },
{ "name": "Timor-Leste", "key": "TL" },
{ "name": "Togo", "key": "TG" },
{ "name": "Tokelau", "key": "TK" },
{ "name": "Tonga", "key": "TO" },
{ "name": "Trinidad and Tobago", "key": "TT" },
{ "name": "Tunisia", "key": "TN" },
{ "name": "Turkey", "key": "TR" },
{ "name": "Turkmenistan", "key": "TM" },
{ "name": "Turks and Caicos Islands", "key": "TC" },
{ "name": "Tuvalu", "key": "TV" },
{ "name": "Uganda", "key": "UG" },
{ "name": "Ukraine", "key": "UA" },
{ "name": "United Arab Emirates", "key": "AE" },
{ "name": "United Kingdom", "key": "GB" },
{ "name": "United States", "key": "US" },
{ "name": "United States Minor Outlying Islands", "key": "UM" },
{ "name": "Uruguay", "key": "UY" },
{ "name": "Uzbekistan", "key": "UZ" },
{ "name": "Vanuatu", "key": "VU" },
{ "name": "Venezuela", "key": "VE" },
{ "name": "Viet Nam", "key": "VN" },
{ "name": "Virgin Islands, British", "key": "VG" },
{ "name": "Virgin Islands, U.S.", "key": "VI" },
{ "name": "Wallis and Futuna", "key": "WF" },
{ "name": "Western Sahara", "key": "EH" },
{ "name": "Yemen", "key": "YE" },
{ "name": "Zambia", "key": "ZM" },
{ "name": "Zimbabwe", "key": "ZW" }
]

2
src/reducers/settings.js

@ -23,7 +23,7 @@ const defaultState: SettingsState = {
},
marketIndicator: 'western',
currenciesSettings: {},
region: { key: 'US', name: 'United States' },
region: 'US',
}
const CURRENCY_DEFAULTS_SETTINGS: CurrencySettings = {

5
src/types/common.js

@ -40,10 +40,7 @@ export type Settings = {
},
marketIndicator: 'eastern' | 'western',
currenciesSettings: CurrenciesSettings,
region: {
key: string,
name: string,
},
region: string,
}
export type T = (?string, ?Object) => string

3
static/i18n/en/settings.yml

@ -36,9 +36,8 @@ profile:
passwordModalRepeatPasswordInput: Repeat password
passwordModalSave: Save
disablePasswordModalTitle: Disable Password
disablePasswordModalSubtitle: Type your password
disablePasswordModalDesc: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non nibh diam.
disablePasswordModalInput: Type your password
disablePasswordModalInput: Current password
disablePasswordModalSave: Save
sync: Sync accounts
syncDesc: Lorem ipsum dolor sit amet

42
yarn.lock

@ -3413,7 +3413,7 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.5:
classnames@^2.2.3, classnames@^2.2.4, classnames@^2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
@ -4589,7 +4589,7 @@ dom-converter@~0.1:
dependencies:
utila "~0.3"
dom-helpers@^3.2.0:
"dom-helpers@^2.4.0 || ^3.0.0", dom-helpers@^3.2.0:
version "3.3.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
@ -7956,6 +7956,9 @@ ledger-test-library@KhalilBellakrid/ledger-test-library-nodejs#7d37482:
dependencies:
axios "^0.17.1"
bindings "^1.3.0"
electron "^1.8.2"
electron-builder "^20.0.4"
electron-rebuild "^1.7.3"
nan "^2.6.2"
prebuild-install "^2.2.2"
@ -8220,7 +8223,7 @@ longest@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies:
@ -10136,6 +10139,12 @@ react-icons@^2.2.7:
dependencies:
react-icon-base "2.1.0"
react-input-autosize@^2.1.2:
version "2.2.1"
resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
dependencies:
prop-types "^15.5.8"
react-inspector@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.2.2.tgz#c04f5248fa92ab6c23e37960e725fb7f48c34d05"
@ -10240,6 +10249,14 @@ react-router@^4.2.0:
prop-types "^15.5.4"
warning "^3.0.0"
react-select@^1.0.0-rc.2:
version "1.2.1"
resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.2.1.tgz#a2fe58a569eb14dcaa6543816260b97e538120d1"
dependencies:
classnames "^2.2.4"
prop-types "^15.5.8"
react-input-autosize "^2.1.2"
react-smooth-scrollbar@^8.0.6:
version "8.0.6"
resolved "https://registry.yarnpkg.com/react-smooth-scrollbar/-/react-smooth-scrollbar-8.0.6.tgz#179072e6a547b3af589ea303c50fd86366275edc"
@ -10301,6 +10318,25 @@ react-treebeard@^2.1.0:
shallowequal "^0.2.2"
velocity-react "^1.3.1"
react-virtualized-select@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/react-virtualized-select/-/react-virtualized-select-3.1.3.tgz#e5c1fed5e493e3e5a628e53100e83d27cfd8c0ac"
dependencies:
babel-runtime "^6.11.6"
prop-types "^15.5.8"
react-select "^1.0.0-rc.2"
react-virtualized "^9.0.0"
react-virtualized@^9.0.0:
version "9.18.5"
resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.18.5.tgz#42dd390ebaa7ea809bfcaf775d39872641679b89"
dependencies:
babel-runtime "^6.26.0"
classnames "^2.2.3"
dom-helpers "^2.4.0 || ^3.0.0"
loose-envify "^1.3.0"
prop-types "^15.6.0"
react@^16.0.0, react@^16.2.0:
version "16.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"

Loading…
Cancel
Save