Slider
@@ -449,3 +536,97 @@ export const CheckboxFieldExample: Story = {
);
}
};
+
+export const CalendarFieldExample: Story = {
+ render: () => {
+ return (
+
+ CalendarField
+ PrimeReact Calendar for selecting date values.
+
+
+ command={FormFieldsCommand}
+ initialValues={{ calendarDate: null }}
+ >
+
+ value={c => c.calendarDate}
+ title="Start Date"
+ placeholder="Pick a date"
+ showIcon
+ />
+
+
+ );
+ }
+};
+
+export const ColorPickerFieldExample: Story = {
+ render: () => {
+ return (
+
+ ColorPickerField
+ PrimeReact ColorPicker for selecting hex colors.
+
+
+ command={FormFieldsCommand}
+ initialValues={{ color: '0ea5e9' }}
+ >
+
+ value={c => c.color}
+ title="Brand Color"
+ />
+
+
+ );
+ }
+};
+
+export const MultiSelectFieldExample: Story = {
+ render: () => {
+ return (
+
+ MultiSelectField
+ PrimeReact MultiSelect for selecting multiple options from a list.
+
+
+ command={FormFieldsCommand}
+ initialValues={{ multiSelect: ['feature2'] }}
+ >
+
+ value={c => c.multiSelect}
+ title="Features"
+ placeholder="Select features"
+ options={multiSelectOptions}
+ optionValue="id"
+ optionLabel="name"
+ display="chip"
+ filter
+ />
+
+
+ );
+ }
+};
+
+export const ChipsFieldExample: Story = {
+ render: () => {
+ return (
+
+ ChipsField
+ PrimeReact Chips for entering and managing multiple text values.
+
+
+ command={FormFieldsCommand}
+ initialValues={{ chips: ['urgent'] }}
+ >
+
+ value={c => c.chips}
+ title="Tags"
+ placeholder="Type a tag and press Enter"
+ addOnBlur
+ />
+
+
+ );
+ }
+};
diff --git a/Source/CommandForm/fields/MultiSelectField.tsx b/Source/CommandForm/fields/MultiSelectField.tsx
new file mode 100644
index 0000000..518a46a
--- /dev/null
+++ b/Source/CommandForm/fields/MultiSelectField.tsx
@@ -0,0 +1,47 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { asCommandFormField, WrappedFieldProps } from '@cratis/arc.react/commands';
+import { MultiSelect } from 'primereact/multiselect';
+import React from 'react';
+
+interface MultiSelectFieldComponentProps extends WrappedFieldProps> {
+ options: Array>;
+ optionValue?: string;
+ optionLabel?: string;
+ placeholder?: string;
+ display?: 'comma' | 'chip';
+ maxSelectedLabels?: number;
+ filter?: boolean;
+ showClear?: boolean;
+}
+
+export const MultiSelectField = asCommandFormField(
+ (props) => (
+ | undefined }) => props.onChange(e.value ?? [])}
+ onBlur={props.onBlur}
+ options={props.options}
+ optionValue={props.optionValue}
+ optionLabel={props.optionLabel}
+ placeholder={props.placeholder}
+ display={props.display}
+ maxSelectedLabels={props.maxSelectedLabels}
+ filter={props.filter}
+ showClear={props.showClear}
+ invalid={props.invalid}
+ className="w-full"
+ />
+ ),
+ {
+ defaultValue: [],
+ extractValue: (e: unknown) => {
+ if (!Array.isArray(e)) {
+ return [];
+ }
+
+ return e.filter((item): item is string | number => typeof item === 'string' || typeof item === 'number');
+ }
+ }
+);
diff --git a/Source/CommandForm/fields/index.ts b/Source/CommandForm/fields/index.ts
index 1100f1b..9d7c9ca 100644
--- a/Source/CommandForm/fields/index.ts
+++ b/Source/CommandForm/fields/index.ts
@@ -7,3 +7,7 @@ export * from './CheckboxField';
export * from './TextAreaField';
export * from './DropdownField';
export * from './SliderField';
+export * from './CalendarField';
+export * from './ColorPickerField';
+export * from './MultiSelectField';
+export * from './ChipsField';