~cytrogen/masto-fe

ref: 20a89f1c8eefa0f766a4650be4d2e5f1fa92ee71 masto-fe/app/javascript/flavours/glitch/components/status_visibility_icon.jsx -rw-r--r-- 1.4 KiB
20a89f1c — Cytrogen [feature] Bookmark folders UI 8 days ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//  Package imports  //
import PropTypes from "prop-types";

import { defineMessages, injectIntl } from "react-intl";

import ImmutablePureComponent from "react-immutable-pure-component";

import { Icon } from "flavours/glitch/components/icon";

const messages = defineMessages({
  public: { id: "privacy.public.short", defaultMessage: "Public" },
  unlisted: { id: "privacy.unlisted.short", defaultMessage: "Unlisted" },
  private: { id: "privacy.private.short", defaultMessage: "Followers only" },
  direct: { id: "privacy.direct.short", defaultMessage: "Mentioned people only" },
});

class VisibilityIcon extends ImmutablePureComponent {

  static propTypes = {
    visibility: PropTypes.string,
    intl: PropTypes.object.isRequired,
    withLabel: PropTypes.bool,
  };

  render() {
    const { withLabel, visibility, intl } = this.props;

    const visibilityIcon = {
      public: "globe",
      unlisted: "unlock",
      private: "lock",
      direct: "envelope",
    }[visibility];

    const label = intl.formatMessage(messages[visibility]);

    const icon = (<Icon
      className='status__visibility-icon'
      fixedWidth
      id={visibilityIcon}
      title={label}
      aria-hidden='true'
    />);

    if (withLabel) {
      return (<span style={{ whiteSpace: "nowrap" }}>{icon} {label}</span>);
    } else {
      return icon;
    }
  }

}

export default injectIntl(VisibilityIcon);