Commit f2138791 authored by Martin Santangelo's avatar Martin Santangelo
Browse files

(feat) show comments action as disabled for FLAG_CREATE_COMMENT

parent feb1b5bd

src/newsfeed/activity/actions/CommentsAction.js

+12 −9
Original line number Original line Diff line number Diff line
@@ -5,17 +5,15 @@ import React, { 
import { observer, inject } from 'mobx-react/native';

import { observer, inject } from 'mobx-react/native';





import {

import {

  Text,

  StyleSheet,

  View,

  TouchableOpacity,

  TouchableOpacity,

} from 'react-native';

} from 'react-native';





import { Icon } from 'react-native-elements';

import Icon from 'react-native-vector-icons/MaterialIcons';





import { CommonStyle } from '../../../styles/Common';

import { CommonStyle as CS } from '../../../styles/Common';

import Counter from './Counter';

import Counter from './Counter';

import withPreventDoubleTap from '../../../common/components/PreventDoubleTap';

import withPreventDoubleTap from '../../../common/components/PreventDoubleTap';

import { FLAG_CREATE_COMMENT } from '../../../common/Permissions';





// prevent double tap in touchable

// prevent double tap in touchable

const TouchableOpacityCustom = withPreventDoubleTap(TouchableOpacity);

const TouchableOpacityCustom = withPreventDoubleTap(TouchableOpacity);
@@ -23,8 +21,9 @@ const TouchableOpacityCustom = withPreventDoubleTap(TouchableOpacity); 
/**

/**

 * Comments Action Component

 * Comments Action Component

 */

 */

export default

@observer

@observer

export default class CommentsAction extends Component {

class CommentsAction extends Component {





  static defaultProps = {

  static defaultProps = {

    size: 20,

    size: 20,
@@ -35,10 +34,14 @@ export default class CommentsAction extends Component { 
  render() {

  render() {

    const icon = this.props.entity.allow_comments ? 'chat-bubble' : 'speaker-notes-off';

    const icon = this.props.entity.allow_comments ? 'chat-bubble' : 'speaker-notes-off';





    const canComment = this.props.entity.allow_comments && this.props.entity.can(FLAG_CREATE_COMMENT);



    const color = canComment ? (this.props.entity['comments:count'] > 0 ? CS.colorPrimary : CS.colorAction) : CS.colorLightGreyed;



    return (

    return (

      <TouchableOpacityCustom style={[CommonStyle.flexContainer, CommonStyle.rowJustifyCenter]} onPress={this.openComments}>

      <TouchableOpacityCustom style={[CS.flexContainer, CS.centered, CS.rowJustifyCenter]} onPress={this.openComments}>

        <Icon color={this.props.entity['comments:count'] > 0 ? 'rgb(70, 144, 214)' : 'rgb(96, 125, 139)'} name={icon} size={this.props.size} />

        <Icon style={[color, CS.marginRight]} name={icon} size={this.props.size} />

        <Counter size={this.props.size * 0.75} count={this.props.entity['comments:count']} />

        <Counter size={this.props.size * 0.70} count={this.props.entity['comments:count']} />

      </TouchableOpacityCustom>

      </TouchableOpacityCustom>

    );

    );

  }

  }

src/styles/Colors.js

+11 −10
Original line number Original line Diff line number Diff line
@@ -10,4 +10,5 @@ export default colors = { 
  lightGreyed : '#d8d8d8',

  lightGreyed : '#d8d8d8',

  darkGreyed  : '#777777',

  darkGreyed  : '#777777',

  explicit    : '#f44336',

  explicit    : '#f44336',

  action      : 'rgb(96, 125, 139)',

}
 
}

src/styles/Common.js

+6 −0
Original line number Original line Diff line number Diff line
@@ -77,6 +77,9 @@ export const CommonStyle = StyleSheet.create({ 
  colorWhite: {

  colorWhite: {

    color: '#FFFFFF'

    color: '#FFFFFF'

  },

  },

  colorAction: {

    color: colors.action

  },

  colorBlack: {

  colorBlack: {

    color: '#000000'

    color: '#000000'

  },

  },
@@ -114,6 +117,9 @@ export const CommonStyle = StyleSheet.create({ 
  backgroundWhite: {

  backgroundWhite: {

    backgroundColor: 'white'

    backgroundColor: 'white'

  },

  },

  backgroundAction: {

    backgroundColor: colors.action,

  },

  backgroundLightGreyed: {

  backgroundLightGreyed: {

    backgroundColor: colors.lightGreyed

    backgroundColor: colors.lightGreyed

  },

  },