UNPKG

@react-querybuilder/tremor

Version:

Custom Tremor components for react-querybuilder

1 lines 18.2 kB
{"version":3,"file":"react-querybuilder_tremor.mjs","names":[],"sources":["../src/TremorActionElement.tsx","../src/TremorNotToggle.tsx","../src/TremorShiftActions.tsx","../src/utils.tsx","../src/TremorValueSelector.tsx","../src/TremorValueEditor.tsx","../src/index.tsx"],"sourcesContent":["import type { ButtonProps } from '@tremor/react';\nimport { Button } from '@tremor/react';\nimport * as React from 'react';\nimport type { ActionProps } from 'react-querybuilder';\n\n/**\n * @group Props\n */\nexport interface TremorActionProps extends ActionProps, ButtonProps {}\n\n/**\n * @group Components\n */\nexport const TremorActionElement = ({\n className,\n handleOnClick,\n label,\n title,\n disabled,\n disabledTranslation,\n testID,\n rules: _rules,\n ruleOrGroup: _rg,\n path: _path,\n level: _level,\n context: _context,\n validation: _validation,\n schema: _schema,\n ...otherProps\n}: TremorActionProps): React.JSX.Element => (\n <Button\n {...otherProps}\n data-testid={testID}\n type=\"button\"\n variant=\"primary\"\n className={className}\n title={disabledTranslation && disabled ? disabledTranslation.title : title}\n onClick={e => handleOnClick(e)}\n disabled={disabled && !disabledTranslation}>\n {disabledTranslation && disabled ? disabledTranslation.label : label}\n </Button>\n);\n","import type { SwitchProps } from '@tremor/react';\nimport { Switch } from '@tremor/react';\nimport * as React from 'react';\nimport type { NotToggleProps } from 'react-querybuilder';\n\n/**\n * @group Props\n */\nexport interface TremorNotToggleProps extends NotToggleProps, Omit<Partial<SwitchProps>, 'label'> {}\n\n/**\n * @group Components\n */\nexport const TremorNotToggle = ({\n className,\n handleOnChange,\n label,\n checked,\n title,\n disabled,\n testID,\n path: _path,\n level: _level,\n context: _context,\n validation: _validation,\n schema: _schema,\n ruleGroup: _ruleGroup,\n ...otherProps\n}: TremorNotToggleProps): React.JSX.Element => {\n const id = React.useId();\n return (\n <div className={className} data-testid={testID}>\n <Switch\n {...otherProps}\n id={id}\n name={id}\n title={title}\n disabled={disabled}\n checked={checked}\n onChange={handleOnChange}\n />\n <label htmlFor={id} title={title}>\n {label}\n </label>\n </div>\n );\n};\n","import { Button } from '@tremor/react';\nimport * as React from 'react';\nimport type { ShiftActionsProps } from 'react-querybuilder';\n\n/**\n * @group Components\n */\nexport const TremorShiftActions = ({\n shiftUp,\n shiftDown,\n shiftUpDisabled,\n shiftDownDisabled,\n disabled,\n className,\n labels,\n titles,\n testID,\n}: ShiftActionsProps): React.JSX.Element => (\n <div data-testid={testID} className={className}>\n <Button\n type=\"button\"\n variant=\"light\"\n disabled={disabled || shiftUpDisabled}\n onClick={shiftUp}\n title={titles?.shiftUp}>\n {labels?.shiftUp}\n </Button>\n <Button\n type=\"button\"\n variant=\"light\"\n disabled={disabled || shiftDownDisabled}\n onClick={shiftDown}\n title={titles?.shiftDown}>\n {labels?.shiftDown}\n </Button>\n </div>\n);\n","import { MultiSelectItem, SelectItem } from '@tremor/react';\nimport * as React from 'react';\nimport type { Option, OptionList } from 'react-querybuilder';\nimport { isOptionGroupArray } from 'react-querybuilder';\n\nexport const toSelectItems = (list: OptionList, multi?: boolean): React.JSX.Element[] | null => {\n const flatList: Option[] = isOptionGroupArray(list) ? list.flatMap(og => og.options) : list;\n\n // v8 ignore else\n if (Array.isArray(flatList)) {\n return flatList.map(opt =>\n multi ? (\n <MultiSelectItem key={opt.name} value={opt.name} aria-disabled={!!opt.disabled}>\n {opt.label}\n </MultiSelectItem>\n ) : (\n <SelectItem key={opt.name} value={opt.name} aria-disabled={!!opt.disabled}>\n {opt.label}\n </SelectItem>\n )\n );\n }\n\n // v8 ignore next\n return null;\n};\n","import type { MultiSelectProps, SelectProps } from '@tremor/react';\nimport { MultiSelect, Select } from '@tremor/react';\nimport * as React from 'react';\nimport type { VersatileSelectorProps } from 'react-querybuilder';\nimport { toArray, useValueSelector } from 'react-querybuilder';\nimport { toSelectItems } from './utils';\n\n/**\n * @group Props\n */\nexport interface TremorValueSelectorProps\n extends VersatileSelectorProps, Omit<SelectProps & MultiSelectProps, 'children' | 'value'> {\n // oxlint-disable-next-line typescript/no-explicit-any\n value?: any;\n}\n\n/**\n * @group Components\n */\nexport const TremorValueSelector = ({\n className,\n handleOnChange,\n options,\n value,\n title,\n disabled,\n multiple,\n listsAsArrays,\n testID,\n placeholder,\n fieldData: _fieldData,\n path: _path,\n level: _level,\n context: _context,\n validation: _validation,\n schema: _schema,\n rule: _rule,\n ruleGroup: _ruleGroup,\n rules: _rules,\n ...otherProps\n}: TremorValueSelectorProps): React.JSX.Element => {\n const { onChange, val } = useValueSelector({ handleOnChange, listsAsArrays, multiple, value });\n\n const optionElements = React.useMemo(() => toSelectItems(options, multiple), [multiple, options]);\n\n const { enableClear: _ec, ...multiSelectOtherProps } = otherProps;\n\n return multiple ? (\n <MultiSelect\n {...multiSelectOtherProps}\n data-testid={testID}\n title={title}\n className={className}\n disabled={disabled}\n value={toArray(val)}\n placeholder={placeholder}\n onValueChange={onChange}>\n {optionElements}\n </MultiSelect>\n ) : (\n <Select\n enableClear={false} // Remove \"clear\" button by default\n {...otherProps}\n data-testid={testID}\n title={title}\n className={className}\n value={value}\n disabled={disabled}\n onValueChange={onChange}>\n {optionElements}\n </Select>\n );\n};\n","import type { DatePickerValue, TextInputProps } from '@tremor/react';\nimport {\n DatePicker,\n DateRangePicker,\n NumberInput,\n Switch,\n TextInput,\n Textarea,\n} from '@tremor/react';\nimport dayjs from 'dayjs';\nimport * as React from 'react';\nimport type { ValueEditorProps, VersatileSelectorProps } from 'react-querybuilder';\nimport { ValueEditor, useValueEditor } from 'react-querybuilder';\nimport { TremorValueSelector } from './TremorValueSelector';\n\n/**\n * @group Props\n */\nexport interface TremorValueEditorProps extends ValueEditorProps {\n extraProps?: Record<string, unknown>;\n}\n\nconst dateFormat = 'YYYY-MM-DD';\n// const dateTimeLocalFormat = `${dateFormat}THH:mm:ss`;\n\nconst ClearableValueSelector = (props: VersatileSelectorProps) => (\n <TremorValueSelector {...props} enableClear />\n);\n\n/**\n * @group Components\n */\nexport const TremorValueEditor = (allProps: TremorValueEditorProps): React.JSX.Element | null => {\n const {\n fieldData,\n operator,\n value,\n handleOnChange,\n title,\n className,\n type,\n inputType,\n values: _v,\n listsAsArrays,\n parseNumbers: _parseNumbers,\n separator,\n valueSource: _vs,\n disabled,\n testID,\n selectorComponent = ClearableValueSelector,\n validation: _validation,\n extraProps,\n } = allProps;\n\n const {\n valueAsArray,\n multiValueHandler,\n bigIntValueHandler,\n valueListItemClassName,\n inputTypeCoerced,\n } = useValueEditor(allProps);\n\n if (operator === 'null' || operator === 'notNull') {\n return null;\n }\n\n const placeHolderText = fieldData?.placeholder ?? '';\n\n if (\n (operator === 'between' || operator === 'notBetween') &&\n (type === 'select' || type === 'text') &&\n // Date and time ranges are handled differently in Tremor--see below\n inputTypeCoerced !== 'date'\n ) {\n if (type === 'text') {\n const editors = ['from', 'to'].map((key, i) => {\n return (\n <TextInput\n key={key}\n type={inputTypeCoerced as TextInputProps['type']}\n placeholder={placeHolderText}\n value={valueAsArray[i] ?? ''}\n className={`${valueListItemClassName} input`}\n disabled={disabled}\n onValueChange={v => multiValueHandler(v, i)}\n {...extraProps}\n />\n );\n });\n return (\n <span data-testid={testID} className={className} title={title}>\n {editors[0]}\n {separator}\n {editors[1]}\n </span>\n );\n }\n\n return <ValueEditor {...allProps} skipHook selectorComponent={selectorComponent} />;\n }\n\n switch (type) {\n case 'select':\n case 'multiselect':\n return <ValueEditor {...allProps} skipHook selectorComponent={selectorComponent} />;\n\n case 'textarea':\n return (\n <Textarea\n className={className}\n value={value}\n title={title}\n placeholder={placeHolderText}\n disabled={disabled}\n onValueChange={handleOnChange}\n {...extraProps}\n />\n );\n\n case 'switch':\n return (\n <Switch\n className={className}\n title={title}\n checked={value}\n disabled={disabled}\n onChange={handleOnChange}\n {...extraProps}\n />\n );\n\n case 'checkbox':\n case 'radio':\n return <ValueEditor {...allProps} skipHook />;\n }\n\n if (inputTypeCoerced === 'date') {\n if (operator === 'between' || operator === 'notBetween') {\n const twoDateArray = [null, null].map((defaultValue, i) => {\n if (!valueAsArray[i]) return defaultValue;\n let date = dayjs(valueAsArray[i]);\n if (!date.isValid()) {\n date = dayjs(`${dayjs().format('YYYY-MM-DD')}`);\n }\n return date.toDate();\n }) as [DatePickerValue, DatePickerValue];\n\n return (\n <DateRangePicker\n data-testid={testID}\n value={{ from: twoDateArray[0], to: twoDateArray[1] }}\n className={className}\n disabled={disabled}\n placeholder={placeHolderText}\n enableSelect={false}\n enableClear\n onValueChange={dates => {\n const dateArray = [dates.from, dates.to].map(d =>\n d ? dayjs(d).format(dateFormat) : ''\n );\n handleOnChange(listsAsArrays ? dateArray : dateArray.join(','));\n }}\n {...extraProps}\n />\n );\n }\n\n return (\n <DatePicker\n data-testid={testID}\n title={title}\n className={className}\n placeholder={placeHolderText}\n disabled={disabled}\n enableClear\n value={!!value && dayjs(value).isValid() ? dayjs(value).toDate() : undefined}\n onValueChange={d =>\n handleOnChange(d ? dayjs(d).format(dateFormat) : /* v8 ignore next -- @preserve */ '')\n }\n {...extraProps}\n />\n );\n }\n\n if (inputTypeCoerced === 'number') {\n return (\n <NumberInput\n data-testid={testID}\n title={title}\n className={className}\n placeholder={placeHolderText}\n disabled={disabled}\n value={value}\n onValueChange={handleOnChange}\n {...extraProps}\n />\n );\n }\n\n if (inputType === 'bigint') {\n return (\n <TextInput\n data-testid={testID}\n type={inputTypeCoerced as TextInputProps['type']}\n placeholder={placeHolderText}\n value={`${value}`}\n title={title}\n className={className}\n disabled={disabled}\n onChange={e => bigIntValueHandler(e.target.value)}\n {...extraProps}\n />\n );\n }\n\n return (\n <TextInput\n data-testid={testID}\n title={title}\n className={className}\n placeholder={placeHolderText}\n type={inputTypeCoerced as TextInputProps['type']}\n disabled={disabled}\n value={value}\n onValueChange={handleOnChange}\n {...extraProps}\n />\n );\n};\n","import type {\n Classnames,\n ControlElementsProp,\n FullField,\n QueryBuilderContextProvider,\n} from 'react-querybuilder';\nimport { getCompatContextProvider } from 'react-querybuilder';\nimport { TremorActionElement } from './TremorActionElement';\nimport { TremorNotToggle } from './TremorNotToggle';\nimport { TremorShiftActions } from './TremorShiftActions';\nimport { TremorValueEditor } from './TremorValueEditor';\nimport { TremorValueSelector } from './TremorValueSelector';\n\nexport * from './TremorActionElement';\nexport * from './TremorNotToggle';\nexport * from './TremorShiftActions';\nexport * from './TremorValueEditor';\nexport * from './TremorValueSelector';\n\n/**\n * @group Props\n */\nexport const tremorControlElements: ControlElementsProp<FullField, string> = {\n actionElement: TremorActionElement,\n notToggle: TremorNotToggle,\n shiftActions: TremorShiftActions,\n valueEditor: TremorValueEditor,\n valueSelector: TremorValueSelector,\n};\n\n/**\n * @group Props\n */\nexport const tremorControlClassnames: Partial<Classnames> = {\n notToggle: 'flex flex-row gap-1',\n};\n\n/**\n * @group Components\n */\nexport const QueryBuilderTremor: QueryBuilderContextProvider = getCompatContextProvider({\n controlClassnames: tremorControlClassnames,\n controlElements: tremorControlElements,\n});\n"],"mappings":"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"}