about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js
diff options
context:
space:
mode:
authorClaire <claire.github-309c@sitedethib.com>2021-02-12 11:36:41 +0100
committerClaire <claire.github-309c@sitedethib.com>2021-02-12 12:04:04 +0100
commit9213b026565ff7da4c363b015c3aa46921ecdcc6 (patch)
tree1845b304751d76282226d4f3cac4d79a393c532b /app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js
parent847779b1e48c14eb303204b1ced8617c42924d20 (diff)
Refactor privacy dropdown to have an interface closer to upstream's
Diffstat (limited to 'app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js')
-rw-r--r--app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js108
1 files changed, 108 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js
new file mode 100644
index 000000000..ec8d1378e
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.js
@@ -0,0 +1,108 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import Dropdown from './dropdown';
+
+const messages = defineMessages({
+  change_privacy: {
+    defaultMessage: 'Adjust status privacy',
+    id: 'privacy.change',
+  },
+  direct_long: {
+    defaultMessage: 'Visible for mentioned users only',
+    id: 'privacy.direct.long',
+  },
+  direct_short: {
+    defaultMessage: 'Direct',
+    id: 'privacy.direct.short',
+  },
+  private_long: {
+    defaultMessage: 'Visible for followers only',
+    id: 'privacy.private.long',
+  },
+  private_short: {
+    defaultMessage: 'Followers-only',
+    id: 'privacy.private.short',
+  },
+  public_long: {
+    defaultMessage: 'Visible for all, shown in public timelines',
+    id: 'privacy.public.long',
+  },
+  public_short: {
+    defaultMessage: 'Public',
+    id: 'privacy.public.short',
+  },
+  unlisted_long: {
+    defaultMessage: 'Visible for all, but not in public timelines',
+    id: 'privacy.unlisted.long',
+  },
+  unlisted_short: {
+    defaultMessage: 'Unlisted',
+    id: 'privacy.unlisted.short',
+  },
+});
+
+export default @injectIntl
+class PrivacyDropdown extends React.PureComponent {
+
+  static propTypes = {
+    isUserTouching: PropTypes.func,
+    onModalOpen: PropTypes.func,
+    onModalClose: PropTypes.func,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    noDirect: PropTypes.bool,
+    container: PropTypes.func,
+    intl: PropTypes.object.isRequired,
+  };
+
+  render () {
+    const { value, onChange, onModalOpen, onModalClose, disabled, intl } = this.props;
+
+    //  We predefine our privacy items so that we can easily pick the
+    //  dropdown icon later.
+    const privacyItems = {
+      direct: {
+        icon: 'envelope',
+        meta: <FormattedMessage {...messages.direct_long} />,
+        name: 'direct',
+        text: <FormattedMessage {...messages.direct_short} />,
+      },
+      private: {
+        icon: 'lock',
+        meta: <FormattedMessage {...messages.private_long} />,
+        name: 'private',
+        text: <FormattedMessage {...messages.private_short} />,
+      },
+      public: {
+        icon: 'globe',
+        meta: <FormattedMessage {...messages.public_long} />,
+        name: 'public',
+        text: <FormattedMessage {...messages.public_short} />,
+      },
+      unlisted: {
+        icon: 'unlock',
+        meta: <FormattedMessage {...messages.unlisted_long} />,
+        name: 'unlisted',
+        text: <FormattedMessage {...messages.unlisted_short} />,
+      },
+    };
+
+    const items = [privacyItems.public, privacyItems.unlisted, privacyItems.private, privacyItems.direct];
+
+    return (
+      <Dropdown
+        disabled={disabled}
+        icon={(privacyItems[value] || {}).icon}
+        items={items}
+        onChange={onChange}
+        onModalClose={onModalClose}
+        onModalOpen={onModalOpen}
+        title={intl.formatMessage(messages.change_privacy)}
+        value={value}
+      />
+    );
+  }
+
+}