From 0c7b35ffde9646e046cdba7f39ff7f2a2681cc97 Mon Sep 17 00:00:00 2001 From: Daniel Janeiro Date: Sat, 7 Oct 2017 21:51:58 +0100 Subject: [PATCH 01/31] Add cannot ignore staff error --- errors.js | 9 ++++++++- locales/en.yml | 1 + 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/errors.js b/errors.js index ab1667e07..dca3f0511 100644 --- a/errors.js +++ b/errors.js @@ -195,6 +195,12 @@ const ErrAssetURLAlreadyExists = new APIError('Asset URL already exists, cannot status: 409 }); +// ErrCannotIgnoreStaff is returned when a user tries to ignore a staff member. +const ErrCannotIgnoreStaff = new APIError('Cannot ignore staff members.', { + translation_key: 'CANNOT_IGNORE_STAFF', + status: 400 +}); + module.exports = { ExtendableError, APIError, @@ -221,5 +227,6 @@ module.exports = { ErrLoginAttemptMaximumExceeded, ErrEditWindowHasEnded, ErrCommentTooShort, - ErrAssetURLAlreadyExists + ErrAssetURLAlreadyExists, + ErrCannotIgnoreStaff }; diff --git a/locales/en.yml b/locales/en.yml index 03a445940..1687ab1df 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -206,6 +206,7 @@ en: NOT_FOUND: "Resource not found" ALREADY_EXISTS: "Resource already exists" INVALID_ASSET_URL: "Assert URL is invalid" + CANNOT_IGNORE_STAFF: "Cannot ignore Staff members." email: "Not a valid E-Mail" confirm_password: "Passwords don't match. Please check again" network_error: "Failed to connect to server. Check your internet connection and try again." From 7eaad1541b8bb24b942b91dfbc9b9978f7e464c8 Mon Sep 17 00:00:00 2001 From: Daniel Janeiro Date: Sat, 7 Oct 2017 22:35:54 +0100 Subject: [PATCH 02/31] Implement cannot ignore staff in users service `UsersService.ignoreUsers` now checks if any user provided is a staff member. In case it is it throws a ErrCannotIgnoreStaff error. --- services/users.js | 8 +++++++- test/server/services/users.js | 13 +++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/services/users.js b/services/users.js index 1dc9bceb6..4a2b6a0ee 100644 --- a/services/users.js +++ b/services/users.js @@ -2,6 +2,7 @@ const assert = require('assert'); const uuid = require('uuid'); const bcrypt = require('bcryptjs'); const errors = require('../errors'); +const some = require('lodash/some'); const { ROOT_URL @@ -879,13 +880,18 @@ module.exports = class UsersService { * @param {String} id the id of the user that is ignoring another users * @param {Array} usersToIgnore Array of user IDs to ignore */ - static ignoreUsers(id, usersToIgnore) { + static async ignoreUsers(id, usersToIgnore) { assert(Array.isArray(usersToIgnore), 'usersToIgnore is an array'); assert(usersToIgnore.every((u) => typeof u === 'string'), 'usersToIgnore is an array of string user IDs'); if (usersToIgnore.includes(id)) { throw new Error('Users cannot ignore themselves'); } + const users = await UsersService.findByIdArray(usersToIgnore); + if (some(users, (user) => user.isStaff())) { + throw errors.ErrCannotIgnoreStaff; + } + // TODO: For each usersToIgnore, make sure they exist? return UserModel.update({id}, { $addToSet: { diff --git a/test/server/services/users.js b/test/server/services/users.js index 57d0f3815..3efaf8f20 100644 --- a/test/server/services/users.js +++ b/test/server/services/users.js @@ -164,6 +164,19 @@ describe('services.UsersService', () => { const userAfterIgnoring2 = await UsersService.findById(user.id); expect(userAfterIgnoring2.ignoresUsers.length).to.equal(2); }); + + it('should not ignore a staff member', async () => { + const user = mockUsers[0]; + const usersToIgnore = [mockUsers[1]]; + await UsersService.addRoleToUser(usersToIgnore[0].id, 'STAFF'); + + try { + await UsersService.ignoreUsers(user.id, usersToIgnore.map((u) => u.id)); + } catch (err) { + expect(err.status).to.equal(400); + expect(err.translation_key).to.equal('CANNOT_IGNORE_STAFF'); + } + }); }); describe('#ban', () => { From efdf7a6b25a11704b93052e4d324b4d82b943fae Mon Sep 17 00:00:00 2001 From: Daniel Janeiro Date: Sat, 7 Oct 2017 22:44:23 +0100 Subject: [PATCH 03/31] Handle IgnoreUser mutation errors We now check if the IgnoreUser mutation returned an error before updating the apollo store. If the mutation returns an error we keep the store as it is, otherwise the user is added to the ignore list. --- plugins/talk-plugin-ignore-user/client/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/plugins/talk-plugin-ignore-user/client/index.js b/plugins/talk-plugin-ignore-user/client/index.js index 6583f68e6..efec73572 100644 --- a/plugins/talk-plugin-ignore-user/client/index.js +++ b/plugins/talk-plugin-ignore-user/client/index.js @@ -3,6 +3,7 @@ import IgnoreUserConfirmation from './containers/IgnoreUserConfirmation'; import IgnoredUserSection from './containers/IgnoredUserSection'; import translations from './translations.yml'; import update from 'immutability-helper'; +import get from 'lodash/get'; export default { slots: { @@ -14,7 +15,11 @@ export default { mutations: { IgnoreUser: ({variables}) => ({ updateQueries: { - CoralEmbedStream_Embed: (previousData) => { + CoralEmbedStream_Embed: (previousData, {mutationResult: {data: {ignoreUser}}}) => { + if (get(ignoreUser, 'errors.length')) { + return previousData; + } + const ignoredUserId = variables.id; const updated = update(previousData, {me: {ignoredUsers: {$push: [{ id: ignoredUserId, From 71af62585a813a83c966c9a28bd3f894589a12c9 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 10 Oct 2017 02:47:51 -0300 Subject: [PATCH 04/31] Adding Dropdown and Option Compoennt --- client/coral-ui/components/Dropdown.css | 50 +++++++++++ client/coral-ui/components/Dropdown.js | 115 ++++++++++++++++++++++++ client/coral-ui/components/Option.css | 10 ++- client/coral-ui/components/Option.js | 20 +++-- client/coral-ui/components/Select.css | 33 ------- client/coral-ui/components/Select.js | 14 --- client/coral-ui/index.js | 4 +- 7 files changed, 187 insertions(+), 59 deletions(-) create mode 100644 client/coral-ui/components/Dropdown.css create mode 100644 client/coral-ui/components/Dropdown.js delete mode 100644 client/coral-ui/components/Select.css delete mode 100644 client/coral-ui/components/Select.js diff --git a/client/coral-ui/components/Dropdown.css b/client/coral-ui/components/Dropdown.css new file mode 100644 index 000000000..431f59076 --- /dev/null +++ b/client/coral-ui/components/Dropdown.css @@ -0,0 +1,50 @@ +.dropdown { + position: relative; + width: 150px; + height: 36px; + background: #2c2c2c; + padding: 10px 15px; + box-sizing: border-box; + color: white; + border-radius: 2px; + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); +} + +.dropdown { + cursor: pointer; +} + +.label { + text-transform: capitalize; +} + +.list { + position: absolute; + top: 30px; + left: 10px; + color: #2c2c2c; + border-radius: 2px; + background: white; + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); + width: 100%; + list-style: none; + padding: 0; + margin: 0; + transform: scale(0); + transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1); + transform-origin: 0 0; +} + +.listActive { + opacity: 1; + transform: scale(1); + z-index: 999; +} + +.arrow { + position: absolute; + right: 15px; + font-size: 1.2rem; + vertical-align: middle; + top: 13px; +} \ No newline at end of file diff --git a/client/coral-ui/components/Dropdown.js b/client/coral-ui/components/Dropdown.js new file mode 100644 index 000000000..c9bd357f1 --- /dev/null +++ b/client/coral-ui/components/Dropdown.js @@ -0,0 +1,115 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styles from './Dropdown.css'; +import Icon from './Icon'; +import cn from 'classnames'; +import ClickOutside from 'coral-framework/components/ClickOutside'; + +class Dropdown extends React.Component { + + constructor(props) { + super(props); + this.state = { + selected: { + label: props.label || '', + value: props.value || '' + }, + isOpen: false + }; + } + + componentWillReceiveProps(newProps) { + if (newProps.value && newProps.value !== this.state.selected.value) { + this.setState({ + selected: { + label: newProps.label, + value: newProps.value + } + }); + } + } + + compoentDidMount() { + document.addEventListener('click', this.handleClick, false); + document.addEventListener('touchend', this.handleClick, false); + } + + componentWillUnmount() { + document.removeEventListener('click', this.handleClick, false); + document.removeEventListener('touchend', this.handleClick, false); + } + + fireChange = (newState) => { + if (newState.selected !== this.state.selected && this.props.onChange) { + this.props.onChange(newState.selected.value); + } + } + + setValue = (value, label) => { + const newState = { + selected: { + label: label, + value: value + }, + isOpen: false + }; + this.fireChange(newState); + this.setState(newState); + } + + handleClick = () => { + this.setState({ + isOpen: !this.state.isOpen + }); + } + + hideMenu = () => { + this.setState({ + isOpen: false + }); + } + + renderLabel() { + if (this.props.label) { + return this.props.label; + } else if (this.props.value) { + return this.props.value; + } else { + return this.props.placeholder; + } + } + + render() { + return ( + +
+ {this.props.icon && } + {this.renderLabel()} + {this.state.isOpen ? : } +
    + {React.Children.toArray(this.props.children) + .map((child) => + React.cloneElement(child, { + key: child.props.value, + onClick: () => this.setValue(child.props.value, child.props.children) + }))} +
+
+ + ); + } +} + +Dropdown.propTypes = { + placeholder: PropTypes.string, + icon: PropTypes.string, + onChange: PropTypes.func.isRequired, + children: PropTypes.node.isRequired, + label: PropTypes.string, + value: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string + ]), +}; + +export default Dropdown; diff --git a/client/coral-ui/components/Option.css b/client/coral-ui/components/Option.css index 54784d8fc..243a2716c 100644 --- a/client/coral-ui/components/Option.css +++ b/client/coral-ui/components/Option.css @@ -1,3 +1,9 @@ -.Option { - +.option { + padding: 10px; + text-transform: capitalize; } + +.option:hover { + background-color: #eee; + cursor: pointer; +} \ No newline at end of file diff --git a/client/coral-ui/components/Option.js b/client/coral-ui/components/Option.js index e2c45664c..dc58cd194 100644 --- a/client/coral-ui/components/Option.js +++ b/client/coral-ui/components/Option.js @@ -1,14 +1,18 @@ import React from 'react'; -import {Option as OptionMDL} from 'react-mdl-selectfield'; +import PropTypes from 'prop-types'; import styles from './Option.css'; +import cn from 'classnames'; -const Option = (props) => { - const {children, ...attrs} = props; - return ( - - {children} - - ); +const Option = ({className, children, onClick}) => ( +
  • + {children || ''} +
    • +); + +Option.propTypes = { + className: PropTypes.string, + children: PropTypes.string, + onClick: PropTypes.func }; export default Option; diff --git a/client/coral-ui/components/Select.css b/client/coral-ui/components/Select.css deleted file mode 100644 index ac93a843c..000000000 --- a/client/coral-ui/components/Select.css +++ /dev/null @@ -1,33 +0,0 @@ -.Select { - position: relative; - width: 100%; - height: 40px; - background: #2c2c2c; - padding: 10px 15px; - box-sizing: border-box; - color: white; - border-radius: 2px; - box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); - - > div { - padding: 0; - } - - i { - position: absolute; - top: 7px; - right: 7px; - } - - input { - padding: 0; - font-size: 13px; - letter-spacing: 0.7px; - font-weight: 400; - } - - &:hover { - cursor: pointer; - } - -} diff --git a/client/coral-ui/components/Select.js b/client/coral-ui/components/Select.js deleted file mode 100644 index 2e71d2417..000000000 --- a/client/coral-ui/components/Select.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import {SelectField} from 'react-mdl-selectfield'; -import styles from './Select.css'; - -const Select = (props) => { - const {children, ...attrs} = props; - return ( - - {children} - - ); -}; - -export default Select; diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js index 93fe5af64..c688857a1 100644 --- a/client/coral-ui/index.js +++ b/client/coral-ui/index.js @@ -21,10 +21,10 @@ export {default as Success} from './components/Success'; export {default as Pager} from './components/Pager'; export {default as Wizard} from './components/Wizard'; export {default as WizardNav} from './components/WizardNav'; -export {default as Select} from './components/Select'; -export {default as Option} from './components/Option'; export {default as SnackBar} from './components/SnackBar'; export {default as TextArea} from './components/TextArea'; export {default as Drawer} from './components/Drawer'; export {default as Label} from './components/Label'; export {default as FlagLabel} from './components/FlagLabel'; +export {default as Dropdown} from './components/Dropdown'; +export {default as Option} from './components/Option'; From 16847f9fec7802f41ac8a19abcec8ebbf8c8fa8d Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 10 Oct 2017 02:48:12 -0300 Subject: [PATCH 05/31] Translations and PropTypes --- .../src/routes/Community/components/Table.js | 41 ++++++++++++------- locales/en.yml | 1 + locales/es.yml | 1 + 3 files changed, 29 insertions(+), 14 deletions(-) diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js index 18f52592d..2efa5944b 100644 --- a/client/coral-admin/src/routes/Community/components/Table.js +++ b/client/coral-admin/src/routes/Community/components/Table.js @@ -1,9 +1,11 @@ import React from 'react'; -import {SelectField, Option} from 'react-mdl-selectfield'; import styles from '../components/Table.css'; import t from 'coral-framework/services/i18n'; +import PropTypes from 'prop-types'; +import {Dropdown, Option} from 'coral-ui'; +import capitalize from 'lodash/capitalize'; -export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => ( +const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => ( @@ -28,29 +30,40 @@ export default ({headers, commenters, onHeaderClickHandler, onRoleChange, onComm {row.created_at} ))}
    - onCommenterStatusChange(row.id, status)}> + onCommenterStatusChange(row.id, status)}> - + - onRoleChange(row.id, role)}> - + - +
    ); + +Table.propTypes = { + headers: PropTypes.array, + commenters: PropTypes.array, + onHeaderClickHandler: PropTypes.func, + onRoleChange: PropTypes.func, + onCommenterStatusChange: PropTypes.func, + viewUserDetail: PropTypes.func, +}; + +export default Table; diff --git a/locales/en.yml b/locales/en.yml index 92119f125..7cea0c6da 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -75,6 +75,7 @@ en: status: Status username_and_email: "Username and Email" yes_ban_user: "Yes Ban User" + none: "None" configure: apply: Apply banned_word_text: "Comments which contain these words or phrases (not case-sensitive) will be automatically removed from the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list." diff --git a/locales/es.yml b/locales/es.yml index 62fc94256..70fce5310 100644 --- a/locales/es.yml +++ b/locales/es.yml @@ -74,6 +74,7 @@ es: status: Estado username_and_email: "Usuario y Correo" yes_ban_user: "Si, Suspendan el usuario" + none: "Ninguno" configure: apply: Aplicar banned_word_text: "Comentarios que contengan estas palabras o frases, en mayusculas o minúsculas, serán automáticamente eliminados del hilo de comentario. Escribir una palabra y apretar Enter o Tabulador para agregarla. O pueden pegar una lista de palabras separadas por coma." From 7b38bac5259a0a9b7f99d26ba4066a3572b4b4db Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 10 Oct 2017 03:18:28 -0300 Subject: [PATCH 06/31] Stories Dropdown, Proptypes and tiny refactor --- .../src/routes/Stories/components/Stories.css | 25 ------ .../src/routes/Stories/components/Stories.js | 76 ++++++++----------- client/coral-ui/components/Dropdown.js | 3 +- 3 files changed, 33 insertions(+), 71 deletions(-) diff --git a/client/coral-admin/src/routes/Stories/components/Stories.css b/client/coral-admin/src/routes/Stories/components/Stories.css index be6b6f921..e8e2b8474 100644 --- a/client/coral-admin/src/routes/Stories/components/Stories.css +++ b/client/coral-admin/src/routes/Stories/components/Stories.css @@ -76,31 +76,6 @@ display: block; } -.statusMenu { - border-radius: 2px; - width: 10em; - text-align: center; - float: right; - color: #fff; - cursor: pointer; - letter-spacing: 0.7px; - font-weight: 400; - box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); -} - -.statusMenuOpen { - padding: 10px; - background-color: #268D81; -} - -.statusMenuIcon { - float: right; -} - -.statusMenuClosed { - padding: 10px; - background-color: #262626; -} .hidden { display: none; diff --git a/client/coral-admin/src/routes/Stories/components/Stories.js b/client/coral-admin/src/routes/Stories/components/Stories.js index d57b8f779..af6b7a8f7 100644 --- a/client/coral-admin/src/routes/Stories/components/Stories.js +++ b/client/coral-admin/src/routes/Stories/components/Stories.js @@ -1,16 +1,16 @@ import React, {Component} from 'react'; -import styles from './Stories.css'; -import t from 'coral-framework/services/i18n'; import {Link} from 'react-router'; - -import {Pager, Icon} from 'coral-ui'; -import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl'; -import EmptyCard from 'coral-admin/src/components/EmptyCard'; +import PropTypes from 'prop-types'; import sortBy from 'lodash/sortBy'; +import {Dropdown, Option, Pager, Icon} from 'coral-ui'; +import {DataTable, TableHeader, RadioGroup, Radio} from 'react-mdl'; +import t from 'coral-framework/services/i18n'; +import styles from './Stories.css'; +import EmptyCard from 'coral-admin/src/components/EmptyCard'; const limit = 25; -export default class Stories extends Component { +class Stories extends Component { state = { search: '', @@ -50,27 +50,13 @@ export default class Stories extends Component { return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`; } - onStatusClick = (closeStream, id, statusMenuOpen) => async () => { - if (statusMenuOpen) { - this.setState((prev) => { - prev.statusMenus[id] = false; - return prev; - }); - - try { - await this.props.updateAssetState(id, closeStream ? Date.now() : null); - const {search, sort, filter, page} = this.state; - this.props.fetchAssets(page, limit, search, sort, filter); - } catch (err) { - - // TODO: handle error. - console.error(err); - } - } else { - this.setState((prev) => { - prev.statusMenus[id] = true; - return prev; - }); + onStatusClick = async (closeStream, id) => { + try { + this.props.updateAssetState(id, closeStream ? Date.now() : null); + const {search, sort, filter, page} = this.state; + this.props.fetchAssets(page, limit, search, sort, filter); + } catch(err) { + console.error(err); } } @@ -78,23 +64,15 @@ export default class Stories extends Component { renderStatus = (closedAt, {id}) => { const closed = closedAt && new Date(closedAt).getTime() < Date.now(); - const statusMenuOpen = this.state.statusMenus[id]; - return
    -
    - {!statusMenuOpen && } - {closed ? t('streams.closed') : t('streams.open')} -
    - { - statusMenuOpen && -
    - {!closed ? t('streams.closed') : t('streams.open')} -
    - } -
    ; + return ( + this.onStatusClick(!value, id)}> + + + + ); } onPageClick = (page) => { @@ -174,3 +152,11 @@ export default class Stories extends Component { } } +Stories.propTypes = { + assets: PropTypes.object, + fetchAssets: PropTypes.func, + updateAssetState: PropTypes.func, +}; + +export default Stories; + diff --git a/client/coral-ui/components/Dropdown.js b/client/coral-ui/components/Dropdown.js index c9bd357f1..b32036097 100644 --- a/client/coral-ui/components/Dropdown.js +++ b/client/coral-ui/components/Dropdown.js @@ -108,7 +108,8 @@ Dropdown.propTypes = { label: PropTypes.string, value: PropTypes.oneOfType([ PropTypes.number, - PropTypes.string + PropTypes.string, + PropTypes.bool ]), }; From bbad09d271a1944a602f40977db734d79d3dd857 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 10 Oct 2017 12:26:06 -0300 Subject: [PATCH 07/31] Missing proptype --- client/coral-ui/components/Option.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/client/coral-ui/components/Option.js b/client/coral-ui/components/Option.js index dc58cd194..ffafe948c 100644 --- a/client/coral-ui/components/Option.js +++ b/client/coral-ui/components/Option.js @@ -12,7 +12,12 @@ const Option = ({className, children, onClick}) => ( Option.propTypes = { className: PropTypes.string, children: PropTypes.string, - onClick: PropTypes.func + onClick: PropTypes.func, + value: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.string, + PropTypes.bool + ]), }; export default Option; From 18b18a7aefd5beecc78bf2c7b5bf9145337b8694 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 10 Oct 2017 12:26:41 -0300 Subject: [PATCH 08/31] Removing global listeners --- client/coral-ui/components/Dropdown.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/client/coral-ui/components/Dropdown.js b/client/coral-ui/components/Dropdown.js index b32036097..8b30f6fbe 100644 --- a/client/coral-ui/components/Dropdown.js +++ b/client/coral-ui/components/Dropdown.js @@ -29,16 +29,6 @@ class Dropdown extends React.Component { } } - compoentDidMount() { - document.addEventListener('click', this.handleClick, false); - document.addEventListener('touchend', this.handleClick, false); - } - - componentWillUnmount() { - document.removeEventListener('click', this.handleClick, false); - document.removeEventListener('touchend', this.handleClick, false); - } - fireChange = (newState) => { if (newState.selected !== this.state.selected && this.props.onChange) { this.props.onChange(newState.selected.value); From 1c535bda89ad7f9c678ad7cdf5b40ad473ee82df Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 10 Oct 2017 12:27:32 -0300 Subject: [PATCH 09/31] Lowering down the animation --- client/coral-ui/components/Dropdown.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/coral-ui/components/Dropdown.css b/client/coral-ui/components/Dropdown.css index 431f59076..eaa8b8b34 100644 --- a/client/coral-ui/components/Dropdown.css +++ b/client/coral-ui/components/Dropdown.css @@ -31,7 +31,7 @@ padding: 0; margin: 0; transform: scale(0); - transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1); + transition: transform .1s cubic-bezier(.4,0,.2,1),opacity .1s cubic-bezier(.4,0,.2,1),-webkit-transform .1s cubic-bezier(.4,0,.2,1); transform-origin: 0 0; } From 2028e56f48c1d7cc7e5471e047dcd7c495f020ad Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 10 Oct 2017 12:40:09 -0300 Subject: [PATCH 10/31] using props, not state for selected --- client/coral-ui/components/Dropdown.js | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/client/coral-ui/components/Dropdown.js b/client/coral-ui/components/Dropdown.js index 8b30f6fbe..820f33346 100644 --- a/client/coral-ui/components/Dropdown.js +++ b/client/coral-ui/components/Dropdown.js @@ -10,27 +10,12 @@ class Dropdown extends React.Component { constructor(props) { super(props); this.state = { - selected: { - label: props.label || '', - value: props.value || '' - }, isOpen: false }; } - - componentWillReceiveProps(newProps) { - if (newProps.value && newProps.value !== this.state.selected.value) { - this.setState({ - selected: { - label: newProps.label, - value: newProps.value - } - }); - } - } fireChange = (newState) => { - if (newState.selected !== this.state.selected && this.props.onChange) { + if (this.props.onChange) { this.props.onChange(newState.selected.value); } } From 7fcc7753f854a0f8a4caa27e2c98db6e2a30dda5 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Tue, 10 Oct 2017 12:50:31 -0300 Subject: [PATCH 11/31] Update --- .../src/routes/Community/components/Table.js | 12 ++++----- .../src/routes/Stories/components/Stories.js | 4 +-- client/coral-ui/components/Dropdown.js | 27 +++++++------------ client/coral-ui/components/Option.js | 6 ++--- 4 files changed, 21 insertions(+), 28 deletions(-) diff --git a/client/coral-admin/src/routes/Community/components/Table.js b/client/coral-admin/src/routes/Community/components/Table.js index 2efa5944b..846287dc1 100644 --- a/client/coral-admin/src/routes/Community/components/Table.js +++ b/client/coral-admin/src/routes/Community/components/Table.js @@ -35,8 +35,8 @@ const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onComme label={capitalize(row.status)} placeholder={t('community.status')} onChange={(status) => onCommenterStatusChange(row.id, status)}> - - + - - - + - +