gristlabs_grist-core/app/client/widgets/CurrencyPicker.ts
George Gevoian 418681915e (core) Forms Improvements
Summary:
 - Forms now have a reset button.
 - Choice and Reference fields in forms now have an improved select menu.
 - Formula and attachments column types are no longer mappable or visible in forms.
 - Fields in a form widget are now removed if their column is deleted.
 - The preview button in a published form widget has been replaced with a view button. It now opens the published form in a new tab.
 - A new share menu for published form widgets, with options to copy a link or embed code.
 - Forms can now have multiple sections.
 - Form widgets now indicate when publishing is unavailable (e.g. in forks or unsaved documents).
 - General improvements to form styling.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: paulfitz

Differential Revision: https://phab.getgrist.com/D4203
2024-03-21 13:01:25 -04:00

55 lines
1.9 KiB
TypeScript

import { makeT } from 'app/client/lib/localization';
import {ACSelectItem, buildACSelect} from "app/client/lib/ACSelect";
import {Computed, IDisposableOwner, Observable} from "grainjs";
import {ACIndexImpl} from "app/client/lib/ACIndex";
import {testId} from 'app/client/ui2018/cssVars';
import {currencies} from 'app/common/Locales';
const t = makeT('CurrencyPicker');
interface CurrencyPickerOptions {
// The label to use in the select menu for the default option.
defaultCurrencyLabel: string;
disabled?: Observable<boolean>;
}
export function buildCurrencyPicker(
owner: IDisposableOwner,
currency: Observable<string|undefined>,
onSave: (value: string|undefined) => void,
{defaultCurrencyLabel, disabled}: CurrencyPickerOptions
) {
const currencyItems: ACSelectItem[] = currencies
.map(item => ({
value: item.code,
label: `${item.code} ${item.name}`,
cleanText: `${item.code} ${item.name}`.trim().toLowerCase(),
}));
// Add default currency label option to the very front.
currencyItems.unshift({
label : defaultCurrencyLabel,
value : defaultCurrencyLabel,
cleanText : defaultCurrencyLabel.toLowerCase(),
});
// Create a computed that will display 'Local currency' as a value and label
// when `currency` is undefined.
const valueObs = Computed.create(owner, (use) => use(currency) || defaultCurrencyLabel);
const acIndex = new ACIndexImpl<ACSelectItem>(currencyItems, {maxResults: 200, keepOrder: true});
return buildACSelect(owner,
{
acIndex, valueObs,
disabled,
save(_, item: ACSelectItem | undefined) {
// Save only if we have found a match
if (!item) {
throw new Error(t("Invalid currency"));
}
// For default value, return undefined to use default currency for document.
onSave(item.value === defaultCurrencyLabel ? undefined : item.value);
}
},
testId("currency-autocomplete")
);
}