|
| 1 | +import { useState } from 'react'; |
| 2 | +import { Button } from 'stream-chat-react'; |
| 3 | +import { EmojiPickerPanel, type EmojiSelection } from 'stream-chat-react/emojis'; |
| 4 | +import { |
| 5 | + appSettingsStore, |
| 6 | + DEFAULT_EMOJI_PICKER_SETTINGS, |
| 7 | + type EmojiPickerSettingsState, |
| 8 | + useAppSettingsState, |
| 9 | +} from '../../state'; |
| 10 | +import { |
| 11 | + SettingsTabBody, |
| 12 | + SettingsTabLayoutHeader, |
| 13 | +} from '../SettingsTabLayoutComponents.tsx'; |
| 14 | + |
| 15 | +type EmojiPickerTabProps = { |
| 16 | + close: () => void; |
| 17 | +}; |
| 18 | + |
| 19 | +const OPTION_BUTTON_CLASS = |
| 20 | + 'app__settings-modal__option-button str-chat__button--outline str-chat__button--secondary str-chat__button--size-sm'; |
| 21 | + |
| 22 | +const update = (patch: Partial<EmojiPickerSettingsState>) => { |
| 23 | + const current = appSettingsStore.getLatestValue().emojiPicker; |
| 24 | + appSettingsStore.partialNext({ emojiPicker: { ...current, ...patch } }); |
| 25 | +}; |
| 26 | + |
| 27 | +type FieldProps<T extends string | number | boolean> = { |
| 28 | + label: string; |
| 29 | + onSelect: (value: T) => void; |
| 30 | + options: { label: string; value: T }[]; |
| 31 | + value: T; |
| 32 | +}; |
| 33 | + |
| 34 | +function Field<T extends string | number | boolean>({ |
| 35 | + label, |
| 36 | + onSelect, |
| 37 | + options, |
| 38 | + value, |
| 39 | +}: FieldProps<T>) { |
| 40 | + return ( |
| 41 | + <div className='app__settings-modal__field'> |
| 42 | + <div className='app__settings-modal__field-label'>{label}</div> |
| 43 | + <div className='app__settings-modal__options-row'> |
| 44 | + {options.map((option) => ( |
| 45 | + <Button |
| 46 | + aria-pressed={value === option.value} |
| 47 | + className={OPTION_BUTTON_CLASS} |
| 48 | + key={String(option.value)} |
| 49 | + onClick={() => onSelect(option.value)} |
| 50 | + > |
| 51 | + {option.label} |
| 52 | + </Button> |
| 53 | + ))} |
| 54 | + </div> |
| 55 | + </div> |
| 56 | + ); |
| 57 | +} |
| 58 | + |
| 59 | +const numberOptions = (values: number[]) => |
| 60 | + values.map((value) => ({ label: String(value), value })); |
| 61 | + |
| 62 | +/** |
| 63 | + * Always-open picker wired to the current settings, so tweaks show instantly without |
| 64 | + * opening the composer. Skin tone and frequently-used are local to the preview — |
| 65 | + * selecting an emoji here feeds the "frequently used" row so `maxFrequentRows` can be |
| 66 | + * exercised too. |
| 67 | + */ |
| 68 | +const EmojiPickerPreview = ({ options }: { options: EmojiPickerSettingsState }) => { |
| 69 | + const [skinTone, setSkinTone] = useState(0); |
| 70 | + const [frequentlyUsedIds, setFrequentlyUsedIds] = useState<string[]>([]); |
| 71 | + |
| 72 | + return ( |
| 73 | + <EmojiPickerPanel |
| 74 | + frequentlyUsedIds={frequentlyUsedIds} |
| 75 | + onEmojiSelect={(emoji: EmojiSelection) => |
| 76 | + setFrequentlyUsedIds((ids) => [emoji.id, ...ids.filter((id) => id !== emoji.id)]) |
| 77 | + } |
| 78 | + onSkinToneChange={setSkinTone} |
| 79 | + options={{ ...options, exceptEmojis: [] }} |
| 80 | + skinToneIndex={skinTone} |
| 81 | + /> |
| 82 | + ); |
| 83 | +}; |
| 84 | + |
| 85 | +/** |
| 86 | + * Playground for the built-in EmojiPicker's `pickerProps`. Each control writes to the |
| 87 | + * app settings store; the live preview (and the composer's picker via |
| 88 | + * `EmojiPickerWithCustomOptions`) reflect the change instantly. |
| 89 | + */ |
| 90 | +export const EmojiPickerTab = ({ close }: EmojiPickerTabProps) => { |
| 91 | + const { emojiPicker } = useAppSettingsState(); |
| 92 | + const atDefaults = ( |
| 93 | + Object.keys(DEFAULT_EMOJI_PICKER_SETTINGS) as (keyof EmojiPickerSettingsState)[] |
| 94 | + ).every((key) => emojiPicker[key] === DEFAULT_EMOJI_PICKER_SETTINGS[key]); |
| 95 | + |
| 96 | + return ( |
| 97 | + <div className='app__settings-modal__content-stack'> |
| 98 | + <SettingsTabLayoutHeader |
| 99 | + close={close} |
| 100 | + description='Configure the built-in EmojiPicker via pickerProps. The live preview and the composer’s picker both update instantly.' |
| 101 | + title='Emoji Picker' |
| 102 | + /> |
| 103 | + |
| 104 | + <SettingsTabBody> |
| 105 | + <div className='app__emoji-settings'> |
| 106 | + <div className='app__emoji-settings__controls'> |
| 107 | + <div className='app__settings-modal__reset-row'> |
| 108 | + <Button |
| 109 | + className='str-chat__button--outline str-chat__button--secondary str-chat__button--size-sm' |
| 110 | + disabled={atDefaults} |
| 111 | + onClick={() => |
| 112 | + appSettingsStore.partialNext({ |
| 113 | + emojiPicker: DEFAULT_EMOJI_PICKER_SETTINGS, |
| 114 | + }) |
| 115 | + } |
| 116 | + > |
| 117 | + Reset to defaults |
| 118 | + </Button> |
| 119 | + </div> |
| 120 | + <Field<EmojiPickerSettingsState['navPosition']> |
| 121 | + label='Navigation position' |
| 122 | + onSelect={(navPosition) => update({ navPosition })} |
| 123 | + options={[ |
| 124 | + { label: 'Top', value: 'top' }, |
| 125 | + { label: 'Bottom', value: 'bottom' }, |
| 126 | + { label: 'None', value: 'none' }, |
| 127 | + ]} |
| 128 | + value={emojiPicker.navPosition} |
| 129 | + /> |
| 130 | + <Field<EmojiPickerSettingsState['previewPosition']> |
| 131 | + label='Preview position' |
| 132 | + onSelect={(previewPosition) => update({ previewPosition })} |
| 133 | + options={[ |
| 134 | + { label: 'Top', value: 'top' }, |
| 135 | + { label: 'Bottom', value: 'bottom' }, |
| 136 | + { label: 'None', value: 'none' }, |
| 137 | + ]} |
| 138 | + value={emojiPicker.previewPosition} |
| 139 | + /> |
| 140 | + <Field<EmojiPickerSettingsState['searchPosition']> |
| 141 | + label='Search position' |
| 142 | + onSelect={(searchPosition) => update({ searchPosition })} |
| 143 | + options={[ |
| 144 | + { label: 'Sticky', value: 'sticky' }, |
| 145 | + { label: 'Static', value: 'static' }, |
| 146 | + { label: 'None', value: 'none' }, |
| 147 | + ]} |
| 148 | + value={emojiPicker.searchPosition} |
| 149 | + /> |
| 150 | + <Field<EmojiPickerSettingsState['skinTonePosition']> |
| 151 | + label='Skin-tone position' |
| 152 | + onSelect={(skinTonePosition) => update({ skinTonePosition })} |
| 153 | + options={[ |
| 154 | + { label: 'Preview', value: 'preview' }, |
| 155 | + { label: 'Search', value: 'search' }, |
| 156 | + { label: 'None', value: 'none' }, |
| 157 | + ]} |
| 158 | + value={emojiPicker.skinTonePosition} |
| 159 | + /> |
| 160 | + <Field<number> |
| 161 | + label='Emoji per line' |
| 162 | + onSelect={(perLine) => update({ perLine })} |
| 163 | + options={numberOptions([7, 8, 9, 10])} |
| 164 | + value={emojiPicker.perLine} |
| 165 | + /> |
| 166 | + <Field<number> |
| 167 | + label='Frequently-used rows' |
| 168 | + onSelect={(maxFrequentRows) => update({ maxFrequentRows })} |
| 169 | + options={numberOptions([1, 2, 3, 4])} |
| 170 | + value={emojiPicker.maxFrequentRows} |
| 171 | + /> |
| 172 | + <Field<boolean> |
| 173 | + label='Auto-focus search' |
| 174 | + onSelect={(autoFocus) => update({ autoFocus })} |
| 175 | + options={[ |
| 176 | + { label: 'On', value: true }, |
| 177 | + { label: 'Off', value: false }, |
| 178 | + ]} |
| 179 | + value={emojiPicker.autoFocus} |
| 180 | + /> |
| 181 | + <Field<boolean> |
| 182 | + label='Country flags' |
| 183 | + onSelect={(noCountryFlags) => update({ noCountryFlags })} |
| 184 | + options={[ |
| 185 | + { label: 'Show', value: false }, |
| 186 | + { label: 'Hide', value: true }, |
| 187 | + ]} |
| 188 | + value={emojiPicker.noCountryFlags} |
| 189 | + /> |
| 190 | + </div> |
| 191 | + <div className='app__emoji-settings__preview'> |
| 192 | + <div className='app__settings-modal__field-label'>Live preview</div> |
| 193 | + <EmojiPickerPreview options={emojiPicker} /> |
| 194 | + </div> |
| 195 | + </div> |
| 196 | + </SettingsTabBody> |
| 197 | + </div> |
| 198 | + ); |
| 199 | +}; |
0 commit comments