瀏覽代碼

added React Select + timezone select now uses react-select

Skylsmoi 6 年之前
父節點
當前提交
6a761ace05
共有 5 個文件被更改,包括 21 次插入27 次删除
  1. 1 0
      package.json
  2. 14 6
      src/component/Account/Timezone.jsx
  3. 3 1
      src/container/Account.jsx
  4. 1 2
      src/container/WorkspaceContent.jsx
  5. 2 18
      src/css/AccountPage.styl

+ 1 - 0
package.json 查看文件

36
     "react-i18next": "^7.4.0",
36
     "react-i18next": "^7.4.0",
37
     "react-redux": "^5.0.6",
37
     "react-redux": "^5.0.6",
38
     "react-router-dom": "^4.2.2",
38
     "react-router-dom": "^4.2.2",
39
+    "react-select": "^1.2.1",
39
     "redux": "^3.7.2",
40
     "redux": "^3.7.2",
40
     "redux-logger": "^3.0.6",
41
     "redux-logger": "^3.0.6",
41
     "redux-thunk": "^2.2.0",
42
     "redux-thunk": "^2.2.0",

+ 14 - 6
src/component/Account/Timezone.jsx 查看文件

1
 import React from 'react'
1
 import React from 'react'
2
+import Select from 'react-select'
3
+import 'react-select/dist/react-select.css'
2
 
4
 
3
 export const Timezone = props => {
5
 export const Timezone = props => {
6
+  const handleChangeTimezone = selectedTimezone => props.onChangeTimezone(props.timezone.find(t => t.place === selectedTimezone.place))
7
+
4
   return (
8
   return (
5
     <div className='account__userpreference__setting__calendar'>
9
     <div className='account__userpreference__setting__calendar'>
6
 
10
 
13
       </div>
17
       </div>
14
 
18
 
15
       <div className='calendar__timezone ml-2 ml-sm-0 dropdown'>
19
       <div className='calendar__timezone ml-2 ml-sm-0 dropdown'>
16
-        <button className='calendar__timezone__btn btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
17
-          Fuseau Horaire
18
-        </button>
19
-        <div className='calendar__timezone__submenu dropdown-menu'>
20
-          {props.timezone.map((t, i) => <div className='calendar__timezone__submenu__item dropdown-item' key={i}>{t.place} {t.gmt}</div>)}
21
-        </div>
20
+        <Select
21
+          name='timezoneSelect'
22
+          className='calendar__timezone__select'
23
+          value={props.timezoneUser}
24
+          labelKey='place'
25
+          valueKey='place'
26
+          options={props.timezone}
27
+          onChange={handleChangeTimezone}
28
+        />
22
       </div>
29
       </div>
30
+
23
     </div>
31
     </div>
24
   )
32
   )
25
 }
33
 }

+ 3 - 1
src/container/Account.jsx 查看文件

71
   handleChangeSubscriptionNotif = (workspaceId, subscriptionNotif) =>
71
   handleChangeSubscriptionNotif = (workspaceId, subscriptionNotif) =>
72
     this.props.dispatch(updateUserWorkspaceSubscriptionNotif(workspaceId, subscriptionNotif))
72
     this.props.dispatch(updateUserWorkspaceSubscriptionNotif(workspaceId, subscriptionNotif))
73
 
73
 
74
+  handleChangeTimezone = newTimezone => console.log('(NYI) new timezone : ', newTimezone)
75
+
74
   render () {
76
   render () {
75
     const subComponent = (() => {
77
     const subComponent = (() => {
76
       switch (this.state.subComponentMenu.find(({active}) => active).name) {
78
       switch (this.state.subComponentMenu.find(({active}) => active).name) {
87
           />
89
           />
88
 
90
 
89
         case 'timezone':
91
         case 'timezone':
90
-          return <Timezone timezone={this.props.timezone} />
92
+          return <Timezone timezone={this.props.timezone} onChangeTimezone={this.handleChangeTimezone} />
91
 
93
 
92
         case 'password':
94
         case 'password':
93
           return <Password />
95
           return <Password />

+ 1 - 2
src/container/WorkspaceContent.jsx 查看文件

21
 
21
 
22
 class WorkspaceContent extends React.Component {
22
 class WorkspaceContent extends React.Component {
23
   async componentDidMount () {
23
   async componentDidMount () {
24
-    console.log('WorkspaceContent did mount')
25
     const { workspaceList, app, match, location, dispatch } = this.props
24
     const { workspaceList, app, match, location, dispatch } = this.props
26
 
25
 
27
-    if (Object.keys(app).length === 0) await dispatch(getAppList())
26
+    if (Object.keys(app).length === 0) dispatch(getAppList()) // async but no need await
28
 
27
 
29
     const wsToLoad = (() => {
28
     const wsToLoad = (() => {
30
       if (match.params.idws !== undefined) return match.params.idws
29
       if (match.params.idws !== undefined) return match.params.idws

+ 2 - 18
src/css/AccountPage.styl 查看文件

153
           padding 10px 25px
153
           padding 10px 25px
154
         &__timezone
154
         &__timezone
155
           margin 15px 0 30px 0
155
           margin 15px 0 30px 0
156
-          &__btn
157
-            border 1px solid thirdColor
158
-            border-radius 5px
159
-            padding 10px 35px
160
-            color thirdColor
161
-            background-color transparent
162
-            &::after
163
-              margin-left 10px
164
-            &:hover, &:focus
165
-              background-color thirdColor
166
-              color white
167
-          &__submenu
168
-            max-height 265px
169
-            overflow-Y auto
170
-            &__item
171
-              &:hover, &:focus
172
-                background-color thirdColor
173
-                color white
156
+          &__select
157
+            max-width 300px
174
       .notification
158
       .notification
175
         &__text
159
         &__text
176
           settingText()
160
           settingText()