fastcomments-react-native-sdk/src/components/select-sort-direction.js

React Native FastComments Components. Add live commenting to any React Native application.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FastCommentsImageAsset } from "../types";
import { useHookstate } from "@hookstate/core";
import { View, Text } from 'react-native';
import { ModalMenu } from "./modal-menu";
const SortDirectionTranslationsById = {
    'OF': 'OLDEST_FIRST',
    'NF': 'NEWEST_FIRST',
    'MR': 'MOST_RELEVANT',
};
export function SelectSortDirection(props) {
    const { styles } = props;
    const state = useHookstate(props.state); // OPTIMIZATION: local state
    const setValue = (newValue) => state.sortDirection.set(newValue);
    const menuItems = [
        { label: state.translations.OLDEST_FIRST.get(), id: 'OF', handler: () => { setValue('OF'); } },
        { label: state.translations.NEWEST_FIRST.get(), id: 'NF', handler: () => { setValue('NF'); } },
        { label: state.translations.MOST_RELEVANT.get(), id: 'MR', handler: () => { setValue('MR'); } },
    ];
    const openButton = _jsxs(View, { style: styles.selectSortDirection?.openButton, children: [_jsx(Text, { style: styles.selectSortDirection?.text, children: state.translations[SortDirectionTranslationsById[state.sortDirection.get()]].get() }), _jsx(View, { style: styles.selectSortDirection?.downCarrot })] });
    return _jsx(ModalMenu, { closeIcon: state.imageAssets[state.config.hasDarkBackground.get() ? FastCommentsImageAsset.ICON_CROSS_WHITE : FastCommentsImageAsset.ICON_CROSS].get(), items: menuItems, openButton: openButton, styles: styles });
}