From 8248d9f166aa1b8c39fef55e4b0a30e2fd1f23be Mon Sep 17 00:00:00 2001 From: muerwre Date: Thu, 13 Dec 2018 10:19:28 +0700 Subject: [PATCH] routes: filtering by distance --- backend/routes/route/list.js | 25 +- package-lock.json | 161 ++++++++++ package.json | 3 + src/components/dialogs/MapListMoreDialog.jsx | 34 ++- src/redux/user/actions.js | 5 +- src/redux/user/constants.js | 1 + src/redux/user/reducer.js | 19 +- src/redux/user/sagas.js | 11 +- src/styles/main.less | 15 + src/styles/save.less | 8 - src/styles/slider.less | 301 +++++++++++++++++++ src/utils/api.js | 6 +- 12 files changed, 546 insertions(+), 43 deletions(-) create mode 100644 src/styles/slider.less diff --git a/backend/routes/route/list.js b/backend/routes/route/list.js index c3428a3..dc258db 100644 --- a/backend/routes/route/list.js +++ b/backend/routes/route/list.js @@ -28,23 +28,30 @@ module.exports = async (req, res) => { }; } - const list = await Route.find({ + let list = await Route.find({ ...criteria, - distance: { - $gte: parseInt(distance[0], 10), - $lte: parseInt(distance[1], 10), - }, - public: true, }, '_id title distance owner updated_at', { limit: 500 }).populate('owner'); - - const filtered = list.filter(item => ( + list = list.filter(item => ( !author || item.owner._id === author )); + const limits = list.reduce(({ min, max }, { distance: dist }) => ({ + min: Math.ceil(Math.min(dist, min) / 20) * 20, + max: Math.ceil(Math.max(dist, max) / 20) * 20, + }), { min: 0, max: 0 }); + + if (distance && distance.length === 2) { + list = list.filter(item => ( + item.distance >= parseInt(distance[0], 10) && + item.distance <= parseInt(distance[1], 10) + )); + } + res.send({ success: true, - list: filtered, + list, + ...limits, }); }; diff --git a/package-lock.json b/package-lock.json index b73faef..33834bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1111,6 +1111,14 @@ } } }, + "add-dom-event-listener": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz", + "integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==", + "requires": { + "object-assign": "4.x" + } + }, "add-px-to-style": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/add-px-to-style/-/add-px-to-style-1.0.0.tgz", @@ -3668,12 +3676,25 @@ "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=", "dev": true }, + "component-classes": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz", + "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=", + "requires": { + "component-indexof": "0.0.3" + } + }, "component-emitter": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=", "dev": true }, + "component-indexof": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz", + "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ=" + }, "compressible": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.14.tgz", @@ -3938,6 +3959,15 @@ "randomfill": "^1.0.3" } }, + "css-animation": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.5.0.tgz", + "integrity": "sha512-hWYoWiOZ7Vr20etzLh3kpWgtC454tW5vn4I6rLANDgpzNSkO7UfOqyCEeaoBSG9CYWQpRkFWTWbWW8o3uZrNLw==", + "requires": { + "babel-runtime": "6.x", + "component-classes": "^1.2.5" + } + }, "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -4406,6 +4436,11 @@ "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz", "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=" }, + "dom-align": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.8.0.tgz", + "integrity": "sha512-B85D4ef2Gj5lw0rK0KM2+D5/pH7yqNxg2mB+E8uzFaolpm7RQmsxEfjyEuNiF8UBBkffumYDeKRzTzc3LePP+w==" + }, "dom-converter": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz", @@ -8639,6 +8674,11 @@ "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.10.tgz", "integrity": "sha512-iesFYPmxYYGTcmQK0sL8bX3TGHyM6b2qREaB4kamHfQyfPJP0xgoGxp19nsH16nsfquLdiyKyX3mQkfiSGV8Rg==" }, + "lodash._getnative": { + "version": "3.9.1", + "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", + "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=" + }, "lodash.camelcase": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", @@ -8656,6 +8696,26 @@ "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=" }, + "lodash.isarguments": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz", + "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=" + }, + "lodash.isarray": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz", + "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=" + }, + "lodash.keys": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz", + "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=", + "requires": { + "lodash._getnative": "^3.0.0", + "lodash.isarguments": "^3.0.0", + "lodash.isarray": "^3.0.0" + } + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -11204,6 +11264,88 @@ "unpipe": "1.0.0" } }, + "rc-align": { + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-2.4.3.tgz", + "integrity": "sha512-h5KgyB5IXYR7iKpYFcMr54cuQ2eozPCZ11kbXPG5+6CWvmyJ+c0R/yjndVndiNk2G3MKcTMbJNdDv5DIckLAxQ==", + "requires": { + "babel-runtime": "^6.26.0", + "dom-align": "^1.7.0", + "prop-types": "^15.5.8", + "rc-util": "^4.0.4" + } + }, + "rc-animate": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.6.0.tgz", + "integrity": "sha512-JXDycchgbOI+7T/VKmFWnAIn042LLScK1fNkmNunb0jz5q5aPGCAybx2bTo7X5t31Jkj9OsxKNb/vZPDPWufCg==", + "requires": { + "babel-runtime": "6.x", + "classnames": "^2.2.6", + "css-animation": "^1.3.2", + "prop-types": "15.x", + "raf": "^3.4.0", + "react-lifecycles-compat": "^3.0.4" + } + }, + "rc-slider": { + "version": "8.6.4", + "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-8.6.4.tgz", + "integrity": "sha512-CV2i2Ww6ib0EjFuBKvgjw3PgT6QwvWKC93iEpqPtrztZrx5wO9Iw//AUri4KHRqptW13AuBvFdEHovqLi6XFTw==", + "requires": { + "babel-runtime": "6.x", + "classnames": "^2.2.5", + "prop-types": "^15.5.4", + "rc-tooltip": "^3.7.0", + "rc-util": "^4.0.4", + "shallowequal": "^1.0.1", + "warning": "^3.0.0" + } + }, + "rc-tooltip": { + "version": "3.7.3", + "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.3.tgz", + "integrity": "sha512-dE2ibukxxkrde7wH9W8ozHKUO4aQnPZ6qBHtrTH9LoO836PjDdiaWO73fgPB05VfJs9FbZdmGPVEbXCeOP99Ww==", + "requires": { + "babel-runtime": "6.x", + "prop-types": "^15.5.8", + "rc-trigger": "^2.2.2" + } + }, + "rc-trigger": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.6.2.tgz", + "integrity": "sha512-op4xCu95/gdHVaysyxxiYxbY+Z+UcIBSUY9nQfLqm1FlitdtnAN+owD5iMPfnnsRXntgcQ5+RdYKNUFQT5DjzA==", + "requires": { + "babel-runtime": "6.x", + "classnames": "^2.2.6", + "prop-types": "15.x", + "rc-align": "^2.4.0", + "rc-animate": "2.x", + "rc-util": "^4.4.0" + } + }, + "rc-util": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.6.0.tgz", + "integrity": "sha512-rbgrzm1/i8mgfwOI4t1CwWK7wGe+OwX+dNa7PVMgxZYPBADGh86eD4OcJO1UKGeajIMDUUKMluaZxvgraQIOmw==", + "requires": { + "add-dom-event-listener": "^1.1.0", + "babel-runtime": "6.x", + "prop-types": "^15.5.10", + "shallowequal": "^0.2.2" + }, + "dependencies": { + "shallowequal": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz", + "integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=", + "requires": { + "lodash.keys": "^3.1.2" + } + } + } + }, "react": { "version": "16.4.2", "resolved": "https://registry.npmjs.org/react/-/react-16.4.2.tgz", @@ -11274,6 +11416,15 @@ } } }, + "react-rangeslider": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/react-rangeslider/-/react-rangeslider-2.2.0.tgz", + "integrity": "sha512-5K7Woa+cyqZ5wiW5+KhqGV+3+FiFxGKQ9rUxTMh52sObXVYEeBbfxFrp1eBvS8mRIxnUbHz9ppnFP0LhwOyNeg==", + "requires": { + "classnames": "^2.2.3", + "resize-observer-polyfill": "^1.4.2" + } + }, "react-redux": { "version": "5.0.7", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz", @@ -11334,6 +11485,11 @@ "react-motion": "^0.5.2" } }, + "reactrangeslider": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/reactrangeslider/-/reactrangeslider-3.0.6.tgz", + "integrity": "sha1-Xz4c7yT9MGUyLUwBoAEBmZEPNzc=" + }, "read-chunk": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-2.1.0.tgz", @@ -11748,6 +11904,11 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz", diff --git a/package.json b/package.json index 52939cd..cf5ce2b 100644 --- a/package.json +++ b/package.json @@ -75,13 +75,16 @@ "pt-sans-cyrillic": "0.0.4", "pug": "2.0.0-beta11", "raleway-cyrillic": "^4.0.2", + "rc-slider": "^8.6.4", "react": "^16.3.2", "react-dom": "^16.3.2", "react-hot-loader": "^4.1.1", "react-infinite-scroller": "^1.2.2", + "react-rangeslider": "^2.2.0", "react-redux": "^5.0.7", "react-router": "^4.3.1", "react-scrollbar": "^0.5.4", + "reactrangeslider": "^3.0.6", "redux": "^4.0.1", "redux-persist": "^5.10.0", "redux-saga": "^0.16.2", diff --git a/src/components/dialogs/MapListMoreDialog.jsx b/src/components/dialogs/MapListMoreDialog.jsx index 174326e..ff3ceb9 100644 --- a/src/components/dialogs/MapListMoreDialog.jsx +++ b/src/components/dialogs/MapListMoreDialog.jsx @@ -9,6 +9,9 @@ import { searchSetTitle, } from '$redux/user/actions'; + +import { Range } from 'rc-slider'; + type Props = { routes: { limit: Number, @@ -55,43 +58,40 @@ class Component extends React.Component { routes: { list, filter: { + min, + max, title, distance, tab, } }, editing, + marks, } = this.props; return (
-
- маршруты -

- -
@@ -115,6 +115,10 @@ class Component extends React.Component { const mapStateToProps = ({ user: { editing, routes } }) => ({ routes, editing, + marks: [...new Array((routes.filter.max - routes.filter.min) / 20 + 1)].reduce((obj, el, i) => ({ + ...obj, + [routes.filter.min + (i * 20)]: (routes.filter.min + (i * 20)), + }), {}), // routes_sorted: Object.keys(routes).sort((a, b) => (Date.parse(routes[b].updated_at) - Date.parse(routes[a].updated_at))), }); diff --git a/src/redux/user/actions.js b/src/redux/user/actions.js index d4bb839..55a1f64 100644 --- a/src/redux/user/actions.js +++ b/src/redux/user/actions.js @@ -51,4 +51,7 @@ export const keyPressed = ({ key }) => ({ type: ACTIONS.KEY_PRESSED, key }); export const searchSetTitle = title => ({ type: ACTIONS.SEARCH_SET_TITLE, title }); export const searchSetDistance = distance => ({ type: ACTIONS.SEARCH_SET_DISTANCE, distance }); export const searchSetTab = tab => ({ type: ACTIONS.SEARCH_SET_TAB, tab }); -export const searchPutRoutes = list => ({ type: ACTIONS.SEARCH_PUT_ROUTES, list }) +export const searchSetLoading = loading => ({ type: ACTIONS.SEARCH_SET_LOADING, loading }); + +export const searchPutRoutes = payload => ({ type: ACTIONS.SEARCH_PUT_ROUTES, ...payload }); + diff --git a/src/redux/user/constants.js b/src/redux/user/constants.js index 7dd5d14..1b5556f 100644 --- a/src/redux/user/constants.js +++ b/src/redux/user/constants.js @@ -56,4 +56,5 @@ export const ACTIONS = ({ SEARCH_SET_TAB: 'SEARCH_SET_TAB', SEARCH_PUT_ROUTES: 'SEARCH_PUT_ROUTES', + SEARCH_SET_LOADING: 'SEARCH_SET_LOADING', }: { [key: String]: String }); diff --git a/src/redux/user/reducer.js b/src/redux/user/reducer.js index 9c2de66..bc6c2af 100644 --- a/src/redux/user/reducer.js +++ b/src/redux/user/reducer.js @@ -128,11 +128,24 @@ const searchSetTab = (state, { tab = 'mine' }) => ({ } }); -const searchPutRoutes = (state, { list = [] }) => ({ +const searchPutRoutes = (state, { list = [], min, max }) => ({ ...state, routes: { ...state.routes, list, + filter: { + ...state.routes.filter, + min: min || state.routes.filter.min, + max: max || state.routes.filter.max, + } + } +}); + +const searchSetLoading = (state, { loading = false }) => ({ + ...state, + routes: { + ...state.routes, + loading, } }); @@ -168,6 +181,7 @@ const HANDLERS = ({ [ACTIONS.SEARCH_SET_DISTANCE]: searchSetDistance, [ACTIONS.SEARCH_SET_TAB]: searchSetTab, [ACTIONS.SEARCH_PUT_ROUTES]: searchPutRoutes, + [ACTIONS.SEARCH_SET_LOADING]: searchSetLoading, }: { [key: String]: Function }); export const INITIAL_STATE = { @@ -210,9 +224,10 @@ export const INITIAL_STATE = { title: '', starred: false, distance: [0, 300], - author: '', tab: 'mine', + min: 0, + max: 300, } }, }; diff --git a/src/redux/user/sagas.js b/src/redux/user/sagas.js index 932298e..a9761dc 100644 --- a/src/redux/user/sagas.js +++ b/src/redux/user/sagas.js @@ -9,7 +9,7 @@ import { postMap } from '$utils/api'; import { - hideRenderer, searchPutRoutes, + hideRenderer, searchPutRoutes, searchSetLoading, setActiveSticker, setAddress, setChanged, setDialogActive, setEditing, @@ -435,11 +435,11 @@ function* keyPressedSaga({ key }): void { function* searchSetSaga() { const { id, token } = yield select(getUser); - - yield delay(500); + yield delay(1000); + yield put(searchSetLoading(true)); const { routes: { filter: { title, distance, tab } } } = yield select(getState); - const list = yield call(getRouteList, { + const { list, min, max } = yield call(getRouteList, { id, token, title, @@ -448,7 +448,8 @@ function* searchSetSaga() { starred: tab === 'starred', }); - yield put(searchPutRoutes(list)); + yield put(searchPutRoutes({ list, min, max })); + return yield put(searchSetLoading(false)); } export function* userSaga() { diff --git a/src/styles/main.less b/src/styles/main.less index ca08231..3fcc7dd 100644 --- a/src/styles/main.less +++ b/src/styles/main.less @@ -11,6 +11,7 @@ @import 'renderer.less'; @import 'dialogs.less'; @import 'progress.less'; +@import 'slider.less'; body { font-family: 'Rubik', sans-serif; @@ -133,3 +134,17 @@ hr { height: 2px; background: rgba(0, 0, 0, 0.3); } + +input { + width: 100%; + padding: 5px 10px 5px 10px; + background: rgba(0, 0, 0, 0.3); + border-radius: @panel_radius; + border: none; + outline: none; + color: white; + + font-family: inherit; + font-size: 14px; + font-weight: 200; +} diff --git a/src/styles/save.less b/src/styles/save.less index 3b763fe..0d45875 100644 --- a/src/styles/save.less +++ b/src/styles/save.less @@ -49,16 +49,8 @@ display: flex; input { - width: 100%; padding: 5px 5px 5px 2px; background: transparent; - border: none; - outline: none; - color: white; - - font-family: inherit; - font-size: 14px; - font-weight: 200; } } diff --git a/src/styles/slider.less b/src/styles/slider.less new file mode 100644 index 0000000..a85bed8 --- /dev/null +++ b/src/styles/slider.less @@ -0,0 +1,301 @@ +@prefixClass: rc-slider; + +@disabledColor: #ccc; +@border-radius-base: 6px; +@primary-color: transparent; +@tooltip-color: #fff; +@tooltip-bg: tint(#666, 4%); +@tooltip-arrow-width: 4px; +@tooltip-distance: @tooltip-arrow-width+4; +@tooltip-arrow-color: @tooltip-bg; +@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1); +@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06); + +.borderBox() { + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari + + * { + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari + } +} + +.@{prefixClass} { + position: relative; + height: 40px; + padding: 15px 0; + // width: 100%; + margin: 8px; + border-radius: @border-radius-base; + touch-action: none; + + .borderBox(); + + &-rail { + position: absolute; + width: 100%; + background-color: rgba(0, 0, 0, 0.3); + height: 4px; + border-radius: @border-radius-base; + } + + &-track { + position: absolute; + left: 0; + height: 4px; + border-radius: @border-radius-base; + background: linear-gradient(90deg, @green_secondary, @blue_secondary); + } + + &-handle { + position: absolute; + margin-left: -7px; + margin-top: -5px; + width: 14px; + height: 14px; + cursor: pointer; + cursor: -webkit-grab; + cursor: grab; + border-radius: 50%; + border: solid 2px tint(@primary-color, 50%); + background-color: #fff; + touch-action: pan-x; + + &:focus { + // border-color: tint(@primary-color, 20%); + box-shadow: 0 0 0 4px tint(@primary-color, 50%); + outline: none; + } + + &-click-focused:focus { + // border-color: tint(@primary-color, 50%); + box-shadow: unset; + } + + &:hover { + border-color: tint(@primary-color, 20%); + } + + &:active { + border-color: tint(@primary-color, 20%); + box-shadow: 0 0 5px tint(@primary-color, 20%); + cursor: -webkit-grabbing; + cursor: grabbing; + } + } + + &-mark { + position: absolute; + top: 18px; + left: 0; + width: 100%; + font-size: 12px; + } + + &-mark-text { + position: absolute; + display: inline-block; + vertical-align: middle; + text-align: center; + cursor: pointer; + color: rgba(255, 255, 255, 0.3); + padding-top: 10px; + } + + &-step { + position: absolute; + width: 100%; + height: 4px; + background: transparent; + } + + &-dot { + position: absolute; + bottom: -2px; + margin-left: -4px; + width: 8px; + height: 8px; + border: 2px solid #e9e9e9; + background-color: #fff; + cursor: pointer; + border-radius: 50%; + vertical-align: middle; + &-active { + border-color: tint(@primary-color, 50%); + } + } + + &-disabled { + background-color: #e9e9e9; + + .@{prefixClass}-track { + background-color: @disabledColor; + } + + .@{prefixClass}-handle, .@{prefixClass}-dot { + border-color: @disabledColor; + box-shadow: none; + background-color: #fff; + cursor: not-allowed; + } + + .@{prefixClass}-mark-text, .@{prefixClass}-dot { + cursor: not-allowed!important; + } + } +} + +.@{prefixClass}-vertical { + width: 14px; + height: 100%; + padding: 0 5px; + + .@{prefixClass} { + &-rail { + height: 100%; + width: 4px; + } + + &-track { + left: 5px; + bottom: 0; + width: 4px; + } + + &-handle { + margin-left: -5px; + margin-bottom: -7px; + touch-action: pan-y; + } + + &-mark { + top: 0; + left: 18px; + height: 100%; + } + + &-step { + height: 100%; + width: 4px; + } + + &-dot { + left: 2px; + margin-bottom: -4px; + &:first-child { + margin-bottom: -4px; + } + &:last-child { + margin-bottom: -4px; + } + } + } +} + +.motion-common() { + animation-duration: .3s; + animation-fill-mode: both; + display: block !important; +} + +.make-motion(@className, @keyframeName) { + .@{className}-enter, .@{className}-appear { + .motion-common(); + animation-play-state: paused; + } + .@{className}-leave { + .motion-common(); + animation-play-state: paused; + } + .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active { + animation-name: ~"@{keyframeName}In"; + animation-play-state: running; + } + .@{className}-leave.@{className}-leave-active { + animation-name: ~"@{keyframeName}Out"; + animation-play-state: running; + } +} +.zoom-motion(@className, @keyframeName) { + .make-motion(@className, @keyframeName); + .@{className}-enter, .@{className}-appear { + transform: scale(0, 0); // need this by yiminghe + animation-timing-function: @ease-out-quint; + } + .@{className}-leave { + animation-timing-function: @ease-in-quint; + } +} +.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown); + +@keyframes rcSliderTooltipZoomDownIn { + 0% { + opacity: 0; + transform-origin: 50% 100%; + transform: scale(0, 0); + } + 100% { + transform-origin: 50% 100%; + transform: scale(1, 1); + } +} + +@keyframes rcSliderTooltipZoomDownOut { + 0% { + transform-origin: 50% 100%; + transform: scale(1, 1); + } + 100% { + opacity: 0; + transform-origin: 50% 100%; + transform: scale(0, 0); + } +} + +.@{prefixClass}-tooltip { + position: absolute; + left: -9999px; + top: -9999px; + visibility: visible; + + .borderBox(); + + &-hidden { + display: none; + } + + &-placement-top { + padding: @tooltip-arrow-width 0 @tooltip-distance 0; + } + + &-inner { + padding: 6px 2px; + min-width: 24px; + height: 24px; + font-size: 12px; + line-height: 1; + color: @tooltip-color; + text-align: center; + text-decoration: none; + background-color: @tooltip-bg; + border-radius: @border-radius-base; + box-shadow: 0 0 4px #d9d9d9; + } + + &-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + &-placement-top &-arrow { + bottom: @tooltip-distance - @tooltip-arrow-width; + left: 50%; + margin-left: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } +} diff --git a/src/utils/api.js b/src/utils/api.js index f2f8853..8433105 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -39,9 +39,9 @@ export const checkIframeToken = ({ viewer_id, auth_key }) => axios.get(API.IFRAM }).then(result => (result && result.data && result.data.success && result.data.user)).catch(() => (false)); export const getRouteList = ({ - title, distance, author, starred + title, distance, author, starred }) => axios.get(API.GET_ROUTE_LIST, { params: { - title, distance, author, starred + title, distance, author, starred } -}).then(result => (result && result.data && result.data.success && result.data.list)).catch(() => ([])); +}).then(result => (result && result.data && result.data.success && result.data)).catch(() => ([]));