Home > @uniformdev/mesh-sdk-react

mesh-sdk-react package

Classes

ClassDescription
VariableNodeRenders a variable reference node within a Lexical editor

Functions

FunctionDescription
$createVariableNode(variableReference, state)
$isVariableNode(node)
ControlledValuePlugin({ enabled, value, extraDependencies, })<p>Updates the Lexical editor state automatically when a controlled value changes, effectively turning the Lexical editor into a controlled component.</p><p>DO NOT USE THIS when actually editing with Lexical as it will cause performance problems. This is intended to be used: * To simplify a read-only "preview" editor, where the user can't edit the value * To sync an external state with the Lexical editor state under certain conditions (i.e. composer mounted, but editor hidden)</p>
convertConnectedDataToVariable(bindExpression, value)Converts a connected data map entry to a VariablesProvider-format variable
createLocationValidator(setValue, validate)Creates a validation interceptor between useMeshLocation's setValue function and your code. You can use this utility to write cleaner validation logic for your Mesh Location UIs.
DamSelectedItem({ selectedItem, onDeselect, onEditClosed, logoIcon, itemDetailsRendererComponent, })
DataResourceDynamicInputProvider(props)Wrapper for data resource locations. Provides read-only access to dynamic inputs as if they were variables, using variables-aware components (i.e. InputVariables). This simplifies building dynamic-input-aware editors, where a data resource variable could be a static value or bound to a dynamic input from the route (project map).
DataResourceVariablesList(props)Renders a list of Data Type-provided variables that can be set on a Data Resource. Intended to provide a solid base for data resource editors that need to edit a list of variables. Using the optional <code>type</code> attribute of variables, one can use custom components to render different variables using this component, enabling flexibility for more than just text inputs.
DataResourceVariablesListExplicit({ setVariables, noVariables: NoVariablesComponent, typeRenderers, dataType, dynamicInputs, value, })<p>Renders a list of Data Type-provided variables that can be set on a Data Resource.</p><p>This is a version of DataResourceVariablesList that does not use any Mesh context data. For most uses you will want to use DataResourceVariablesList instead.</p>
DataSourceEditor({ onChange, children, editVariableComponent })Wrapper for editing a data source using Uniform Mesh SDK components that rely on <code>useRequest()</code> or <code>useVariables()</code>, or custom components that use the same hooks.
DataTypeEditor({ onChange, children, editVariableComponent })Wrapper for editing a data type using Uniform Mesh SDK components that rely on <code>useRequest()</code> or <code>useVariables()</code>, or custom components that use the same hooks.
hasReferencedVariables(value)Returns true if the string expression has variable references in it
InputVariables(props)An input box that enables insertion of 'variables', provided by VariablesProvider, into its value.
ObjectSearchResultList({ resultLabelText, removeButtonText, onRemoveAllSelected, hideRemoveButton, additionalButtons, renderResultComponent, multiSelectId, disableDnD, getContainerForDnDReparenting, whenNothingSelected, })An opinionated result list UI component that has built in drag and drop functionality and removal of all selected items from context. The result item component defaults to <, however this can be overridden with any other UI component and still maintain drag and drop functionality
ParameterConnectionIndicator({ children, value, menuOptions, disabled, menuTooltip, })An input box that enables insertion of 'variables', provided by VariablesProvider, into its value. Designed specifically for use in the Canvas Parameter Editor.
ParameterOrSingleVariable(props)A parameter which can be one of a custom parameter editor (<code>inputWhenNoVariables</code>), or one single variable value (not multiple). Use for parameters which can only have one variable value, possibly because they bind to objects or arrays. Designed visually for use in the Canvas Parameter Editor.
ParameterVariables(props)An input box that enables insertion of 'variables', provided by VariablesProvider, into its value. Designed visually for use in the Canvas Parameter Editor.
ParamTypeDynamicDataProvider(props)Wrapper for data resource locations. Provides read-only access to dynamic inputs as if they were variables, using variables-aware components (i.e. InputVariables). This simplifies building dynamic-input-aware editors, where a data resource variable could be a static value or bound to a dynamic input from the route (project map).
prettifyBindExpression(bindExpression)
ProductSearch({ selectedProducts, setSelectedProducts, onGetCategories, onSearchProducts, logoIcon, multiSelect, multiSelectId, selectedItemComponent, rowComponent, errorComponent, helpComponent, noResultsComponent, onSort, typeSelectorAllTypesOptionText, typeSelectorLabel, })
ProductSearchRow({ result, isSelected, triggerSelection, })
ProductSelectedItem({ selectedItem, onDeselect, })
RequestBody()Editor component to let you write a request body for POST requests
RequestHeaders({ disableVariables, addOmitIfEmpty, })Editor component to manage HTTP headers on a request
RequestMethodSelect(props)Dropdown to pick a HTTP method for a request
RequestParameters({ disableVariables, addOmitIfEmpty, })Component to manage query parameters on a request
RequestProvider({ value, onChange, children })Provides a mutable HTTP request object context. Components such as RequestBody and RequestUrl use this context to render.
RequestUrl()Displays the current full URL of the request, including the base URL if one is set
RequestUrlInput(props)Editor to modify the current URL of the request Note: entering query string parameters automatically converts them and syncs the request state with them
serializeVariablesEditorState(editorState)Serializes a Lexical variables-editor state (as a Lexical AST) to a Uniform-variable-reference formatted string Note: if no content is in the editor state, undefined will be returned.
setVariablesEditorValue(editor, newValue)<p>Programmatically sets the current value of a variables editor after it has already initialized and become an uncontrolled component. Passing the <code>editorRef</code> prop to the component will give a reference to <code>editor</code>, or use <code>ControlledValuePlugin</code> to manage this automatically.</p><p>If newValue is undefined, the editor will be set to an empty state. If newValue is a string, it will be treated as a variable-reference-containing string, and parsed to a Lexical AST If newValue is a serialized Lexical AST, it will be used as-is. If the AST is invalid, the editor will be set to an empty state.</p>
TextVariableRenderer({ definition, value, setValue })Default data resource variable renderer, uses a text input that supports dynamic input binding
urlEncodeRequestParameter(parameter, varValues)
urlEncodeRequestUrl(url, varValues)
useConnectedDataAsVariables(connectedData)Converts connected data map into VariablesProvider-format variables
useContentDataResourceLocaleInfo({ locale, setLocale, dynamicInputs, })
useDynamicInputsAsVariables(dynamicInputs)Converts dynamic inputs into VariablesProvider-format variables
useMeshLocation(expectedLocation)<p>Provides convenient access to the current Uniform Mesh location via React hook. Intended to be used within <MeshApp />.</p><p>There are three primary ways to invoke this hook: 1. Without any arguments, this hook will return the current location regardless of its type. The result will be a union of all possible locations you can discriminate between i.e. with an if statement on the <code>type</code> const location = useMeshLocation(); if (location.type === 'paramType') { // location is now known to be a paramType } 2. With a string argument, this hook will assert that the current location is the expected one and return the correct typings for that location. const location = useMeshLocation('settings'); 3. With an explicit generic to set the expected param type data or param type settings data. This is useful because (2) will return unknown as the value type for param types. const location = useMeshLocation();</p><p>You can also combine (2) and (3) to get both explicit value typing and assertion of the location.</p>
useObjectSearchContext()
useRequest()
useRequestHeader(headerName)<p>Hook to make it simple to read and write a specific request header by name, instead of supporting multiple values in an array like native dispatch.</p><p>NOTE: if multiple values are added for the named header, this hook will bind to the FIRST instance of the header and leave the other values alone.</p>
useRequestParameter(paramName)<p>Hook to make it simple to read and write a specific request query string parameter by name, instead of supporting multiple values in an array like native dispatch.</p><p>NOTE: if multiple values are added for the named parameter, this hook will bind to the FIRST instance of the parameter and leave the other values alone.</p>
useUniformMeshSdk()Provides convenient access to the current Uniform Mesh SDK instance via React hook. Intended to be used within <MeshApp />.
useVariableEditor()
useVariables(returnEmptyWithoutProvider)
useVariablesMenu({ showAddVariableMenuOption, enableEditingVariables, filterVariable, getEditorContext, })Hook to use the lexical variables typeahead/dropdown menu
variableDefaultTextValue(defaultValue)
VariableEditor({ variable, onSubmit, onCancel, disableMeshTip, })
VariablesList()
VariablesPlugin({ disableVariables, showAddVariableMenuOption, enableEditingVariables, getEditorContext, replaceValueOnVariableInsert, filterVariable, })Enables variables auto-complete and reference management to a Lexical editor. Must also activate the VariableNode node to make this work.
VariablesProvider({ value, onChange, editVariableComponent, readOnly, isLoading, children, knownUndefinedValues, })
variablesToGroupedList(variables, filterFn, context)Groups variable definitions by their <code>source</code> property, and sorts the groups using <code>variablesToList</code>. Returns a flat list of groups and variables. Groups are sorted alphabetically.
variablesToList(variables)Converts variable definitions stored in a map into a flat list, respecting their <code>order</code> property if set, and sorting by display name otherwise.

Interfaces

InterfaceDescription
Brand
DamItem
DamSelectedItemProps
EntrySearchContentType
EntrySearchResult
EntrySearchRowProps
EntrySearchSelectedItemProps
GetProductOptions
NoResultsProps
ProductCategory
ProductDynamicSelectorValue
ProductQueryCategory
ProductQueryContextValue
ProductQueryProps
ProductSearchContextValue
ProductSearchResults

Namespaces

NamespaceDescription
Icons

Variables

VariableDescription
badgeIcon
damSelectedItemContainer
damSelectedItemCopy
damSelectedItemDetails
damSelectedItemIcon
damSelectedItemInfoBtn
damSelectedItemInner
damSelectedItemLinkBtn
damSelectedItemLinkContainer
damSelectedItemMediaContainer
damSelectedItemPopover
damSelectedItemPopoverLabel
damSelectedItemSmallText
damSelectedItemTitle
damSelectItemImage
DataRefreshButtonThe data refresh button is a UI component to indicate to users a request for data is taking place
DefaultSearchRow
DefaultSelectedItem
DISCONNECT_VARIABLE_COMMANDDisconnects a variable node from its binding, leaving the current value of the binding behind
draggableContainer
draggableIcon
draggableIconOffset
draggableIconWrapper
EDIT_VARIABLE_COMMANDOpens the variable editor for an existing variable node
EntrySearch
entrySearchBtn
entrySearchConfig
entrySearchConfigHidden
entrySearchLoadMoreBtn
entrySearchResultList
entrySearchSelectIcon
entrySearchSelectImg
entrySearchSelectInput
entrySearchSelectOption
entrySearchWrapper
INSERT_VARIABLE_COMMANDInserts a new variable node at the current selection, or replacing a specific node key
LinkButtonAn opinionated link component styled the same of the ObjectSearchResultItemButton component, that automatically sets the target and rel attributes. Best used within the ObjectSearchResultItem component
MeshApp
ObjectSearchContainerObject search container is an opinionated layout for search parameters and retrieved results
ObjectSearchFilterObject search filter is an opinionated filter that has pre-defined query and setQuery functions that can be extended with custom functions
ObjectSearchFilterContaineran opinionated layout for search filters
ObjectSearchListItementry search list item is an opinionated UI component best used for initial retrieved results
ObjectSearchListItemLoadingSkeletonAn opinionated loading skeleton component best used with ObjectSearchListItem
ObjectSearchProvider
ObjectSearchResultItemAn opinionated result item, best used for selected results
ObjectSearchResultItemButtonAn opinionated button component best used within the ObjectSearchResultItem component
OPEN_INSERT_VARIABLE_COMMANDOpens the variable editor and when a result is selected, inserts it at the current cursor location NOTE: differs from INSERT_VARIABLE_COMMAND because this opens a variable picker, and that command inserts a known variable reference with no picker.
productedSelectedItemLinkBtn
productedSelectedItemSmallText
ProductPreviewList
ProductQuery
ProductQueryContext
ProductSearchContext
productSearchRowActiveIcon
productSearchRowCategory
productSearchRowContainer
productSearchRowContent
productSearchRowContentActive
productSearchRowDetails
productSearchRowTitle
productSelectedItemContainer
productSelectedItemContent
productSelectedItemDetails
productSelectedItemIcon
productSelectedItemImage
productSelectedItemLinkContainer
QueryFilterAn opinionated multi query filter UI component, best used for querying product data or more complex scenarios
RequestTypeContainera container to layout content in a 2 column grid format = 12ch 1fr
ResolvableLoadingValue
searchRowBtn
searchRowContainer
searchRowContainerActive
searchRowContainerWithPopover
searchRowPopover
searchRowText
searchRowTextSmall
selectedItemContainer
selectedItemCopy
selectedItemDetails
selectedItemIcon
selectedItemInner
selectedItemTitle
SelectionField
selectItemLinkBtn
selectItemLinkContainer
selectItemPopover
selectItemPopoverLabel
selectItemSmallText
useProductQueryContext
useProductSearchContext
variablePrefixExpected prefix for variable expressions
variableSuffixExpected suffix for variable expressions

Type Aliases

Type AliasDescription
BaseRequestData
ContentDataResourceLocaleInfoProps
ContentDataResourceLocaleInfoResult
DataRefreshButtonProps
DataResourceDynamicInputProviderProps
DataResourceVariableRendererProps
DataResourceVariablesListProps
DataSourceEditorProps
DataTypeEditorProps
DataVariableDefinitionWithName
DisconnectVariableCommandArguments
DispatchResult
EditVariableCommandArguments
EntrySearchProps
EntrySearchQueryOptions
GetProductsOptions
InputVariablesProps
InsertVariableCommandArguments
ItemListProps
KnownUndefinedVariableInfo<p>Provides information for an undefined variable that might be referenced in data, but is undefined in the variables context due to some sort of error or informational message.</p><p>If an undefined variable matches one of these, the error or info message will be shown instead of the generic "undefined variable" message.</p>
MeshAppProps
MeshDataVariableDefinition
ObjectSearchContainerProps
ObjectSearchContextProps
ObjectSearchFilterContainerProps
ObjectSearchFilterProps
ObjectSearchListItemProps
ObjectSearchProviderProps
ObjectSearchResultItemButtonProps
ObjectSearchResultItemProps
ObjectSearchResultListProps
ParameterConnectionIndicatorProps
ParameterConnectOptionsContext to tell the binding UI what types are allowed for the current binding expression
ParameterOrSingleVariableProps
ParameterVariablesProps
ParamTypeDynamicDataProviderProps
ProductSearchProps
ProductSearchResult
QueryFilterProps
QueryFilterSearchProps
RequestAction
RequestContext
RequestData
RequestParameter
RequestParametersProps
RequestProviderProps
RequestTypeContainerProps
SearchQueryProps
SelectedItemProps
SelectionFieldValue
SerializedVariableNode
SetLocationValueDispatch
SetLocationValueFunction
UseVariablesMenu
UseVariablesMenuInput
VariableEditorCompleteEventResponse from parent when creating a dynamic token expression
VariableEditorProps
VariableNodeState
VariablesAction
VariablesContext
VariablesEvents
VariableSourceGroup
VariablesPluginProps
VariablesProviderProps