@empoleon/spotlight

Version:

Command center components for react and Empoleon

1 lines • 9.31 kB

Source Map (JSON)

{"version":3,"file":"SpotlightAction.cjs","sources":["../src/SpotlightAction.tsx"],"sourcesContent":["import { JSX, splitProps } from 'solid-js';\nimport {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n Highlight,\n EmpoleonColor,\n UnstyledButton,\n useProps,\n} from '@empoleon/core';\nimport { useSpotlightContext } from './Spotlight.context';\nimport { spotlightActions } from './spotlight.store';\nimport classes from './Spotlight.module.css';\n\nexport type SpotlightActionStylesNames =\n | 'action'\n | 'actionLabel'\n | 'actionDescription'\n | 'actionSection'\n | 'actionBody';\n\nexport interface SpotlightActionProps\n extends BoxProps,\n CompoundStylesApiProps<SpotlightActionFactory>,\n ElementProps<'button'> {\n /** Action label, pass string to use in default filter */\n label?: string;\n\n /** Action description, pass string to use in default filter */\n description?: string;\n\n /** Section displayed on the left side of the label, for example, icon */\n leftSection?: JSX.Element;\n\n /** Section displayed on the right side of the label, for example, hotkey */\n rightSection?: JSX.Element;\n\n /** Children override default action elements, if passed, label, description and sections are hidden */\n children?: JSX.Element;\n\n /** Determines whether left and right sections should have dimmed styles, `true` by default */\n dimmedSections?: boolean;\n\n /** Determines whether search query should be highlighted in action label, `false` by default */\n highlightQuery?: boolean;\n\n /** Key of `theme.colors` of any valid CSS color that will be used to highlight search query, `'yellow'` by default */\n highlightColor?: EmpoleonColor;\n\n /** Determines whether the spotlight should be closed when action is triggered, overrides `closeOnActionTrigger` prop set on `Spotlight` */\n closeSpotlightOnTrigger?: boolean;\n\n /** Keywords that are used for default filtering, not displayed anywhere, can be a string: \"react,router,javascript\" or an array: ['react', 'router', 'javascript'] */\n keywords?: string | string[];\n}\n\nexport type SpotlightActionFactory = Factory<{\n props: SpotlightActionProps;\n ref: HTMLButtonElement;\n stylesNames: SpotlightActionStylesNames;\n compound: true;\n}>;\n\nconst defaultProps: Partial<SpotlightActionProps> = {\n dimmedSections: true,\n highlightQuery: false,\n};\n\nexport const SpotlightAction = factory<SpotlightActionFactory>(_props => {\n const props = useProps('SpotlightAction', defaultProps, _props);\n const [local, others] = splitProps(props, [\n 'className',\n 'style',\n 'classNames',\n 'styles',\n 'id',\n 'description',\n 'label',\n 'leftSection',\n 'rightSection',\n 'children',\n 'dimmedSections',\n 'highlightQuery',\n 'highlightColor',\n 'closeSpotlightOnTrigger',\n 'onClick',\n 'onMouseDown',\n 'keywords',\n 'vars',\n 'ref'\n ]);\n\n const ctx = useSpotlightContext();\n\n const stylesApi = { classNames: local.classNames, styles: local.styles };\n\n const labelNode =\n local.highlightQuery && typeof local.label === 'string' ? (\n <Highlight\n component=\"span\"\n highlight={ctx.query}\n color={local.highlightColor}\n {...ctx.getStyles('actionLabel', stylesApi)}\n >\n {local.label}\n </Highlight>\n ) : (\n {local.label}\n );\n\n return (\n <UnstyledButton\n ref={local.ref}\n data-action\n {...ctx.getStyles('action', { className: local.className, style: local.style, ...stylesApi })}\n {...others}\n onMouseDown={(event) => {\n event.preventDefault();\n typeof local.onMouseDown === \"function\" && local.onMouseDown?.(event);\n }}\n onClick={(event) => {\n typeof local.onClick === \"function\" && local.onClick?.(event);\n if (local.closeSpotlightOnTrigger ?? ctx.closeOnActionTrigger) {\n spotlightActions.close(ctx.store);\n }\n }}\n tabIndex={-1}\n >\n {local.children || (\n <>\n {local.leftSection && (\n <Box\n component=\"span\"\n mod={{ position: 'left', dimmed: local.dimmedSections }}\n {...ctx.getStyles('actionSection', stylesApi)}\n >\n {local.leftSection}\n </Box>\n )}\n\n \n {labelNode}\n {local.description}\n \n\n {local.rightSection && (\n <Box\n component=\"span\"\n mod={{ position: 'right', dimmed: local.dimmedSections }}\n {...ctx.getStyles('actionSection', stylesApi)}\n >\n {local.rightSection}\n </Box>\n )}\n </>\n )}\n </UnstyledButton>\n );\n});\n\nSpotlightAction.classes = classes;\nSpotlightAction.displayName = '@empoleon/spotlight/SpotlightAction';\n"],"names":["defaultProps","dimmedSections","highlightQuery","SpotlightAction","factory","_props","props","useProps","local","others","splitProps","ctx","useSpotlightContext","stylesApi","classNames","styles","labelNode","label","Highlight","_$mergeProps","component","highlight","query","color","highlightColor","getStyles","children","_el$","_tmpl$","_$spread","_$insert","_$createComponent","UnstyledButton","ref","r$","_ref$","className","style","onMouseDown","event","preventDefault","onClick","closeSpotlightOnTrigger","closeOnActionTrigger","spotlightActions","close","store","tabIndex","_$memo","leftSection","Box","mod","position","dimmed","_el$2","_tmpl$2","_el$3","firstChild","description","rightSection","classes","displayName"],"mappings":"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"}