alice.mosphere.at
this repo has no description
1import { Trans, useLingui } from '@lingui/react/macro';
2
3import i18nDuration from '../utils/i18n-duration';
4
5import Icon from './icon';
6import TextExpander from './text-expander';
7
8export const expiryOptions = {
9 300: i18nDuration(5, 'minute'),
10 1_800: i18nDuration(30, 'minute'),
11 3_600: i18nDuration(1, 'hour'),
12 21_600: i18nDuration(6, 'hour'),
13 86_400: i18nDuration(1, 'day'),
14 259_200: i18nDuration(3, 'day'),
15 604_800: i18nDuration(1, 'week'),
16};
17
18function ComposePoll({
19 lang,
20 poll,
21 disabled,
22 onInput = () => {},
23 maxOptions,
24 maxExpiration,
25 minExpiration,
26 maxCharactersPerOption,
27}) {
28 const { t } = useLingui();
29 const { options, expiresIn, multiple } = poll;
30
31 return (
32 <div class={`poll ${multiple ? 'multiple' : ''}`}>
33 <div class="poll-choices">
34 {options.map((option, i) => (
35 <div class="poll-choice" key={i}>
36 <TextExpander keys=":" class="poll-field-container">
37 <input
38 required
39 type="text"
40 value={option}
41 disabled={disabled}
42 maxlength={maxCharactersPerOption}
43 placeholder={t`Choice ${i + 1}`}
44 lang={lang}
45 spellCheck="true"
46 autocomplete="off"
47 dir="auto"
48 data-allow-custom-emoji="true"
49 onInput={(e) => {
50 const { value } = e.target;
51 options[i] = value;
52 onInput(poll);
53 }}
54 />
55 </TextExpander>
56 <button
57 type="button"
58 class="plain4 poll-button"
59 disabled={disabled || options.length <= 1}
60 onClick={() => {
61 options.splice(i, 1);
62 onInput(poll);
63 }}
64 title={t`Remove`}
65 >
66 −
67 </button>
68 </div>
69 ))}
70 </div>
71 <div class="poll-toolbar">
72 <button
73 type="button"
74 class="plain2 poll-button"
75 disabled={disabled || options.length >= maxOptions}
76 onClick={() => {
77 options.push('');
78 onInput(poll);
79 }}
80 title={t`Add`}
81 >
82 +
83 </button>{' '}
84 <div class="poll-config">
85 <label class="multiple-choices">
86 <input
87 type="checkbox"
88 checked={multiple}
89 disabled={disabled}
90 onChange={(e) => {
91 const { checked } = e.target;
92 poll.multiple = checked;
93 onInput(poll);
94 }}
95 />{' '}
96 <Trans>Multiple choice</Trans>
97 </label>
98 <label class="expires-in">
99 <Trans>Duration</Trans>{' '}
100 <select
101 value={expiresIn}
102 disabled={disabled}
103 onChange={(e) => {
104 const { value } = e.target;
105 poll.expiresIn = value;
106 onInput(poll);
107 }}
108 >
109 {Object.entries(expiryOptions)
110 .filter(([value]) => {
111 return value >= minExpiration && value <= maxExpiration;
112 })
113 .map(([value, label]) => (
114 <option value={value} key={value}>
115 {label()}
116 </option>
117 ))}
118 </select>
119 </label>
120 <div class="spacer" />
121 <button
122 type="button"
123 class="light danger small"
124 disabled={disabled}
125 onClick={() => {
126 onInput(null);
127 }}
128 >
129 <Trans>Remove poll</Trans>
130 </button>
131 </div>
132 </div>
133 </div>
134 );
135}
136
137export default ComposePoll;