/**
 * Copyright © 2019 Johnson & Johnson
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */ import React , { FC , ComponentType , ReactNode } from 'react' ; import ReactTooltip from 'rc-tooltip' ; import flow from 'lodash/flow' ; import { addClasses , addClassesIf , addProps , removeClasses , } from '@bodiless/fclasses' ; import { ContextMenu , ContextMenuProps , ContextMenuUI , IContextMenuItemProps , } from '@bodiless/core' ; import { ComponentFormTitle , ComponentFormLabel , ComponentFormText , ComponentFormButton , ComponentFormCloseButton , ComponentFormSubmitButton , ToolbarIcon , Div , HorizontalToolbarButton , ComponentFormUnwrapButton , ComponentFormTextArea , ComponentFormDescription , ComponentFormWarning , ComponentFormFieldWrapper , ComponentFormFieldTitle , ComponentFormCheckBox , ComponentFormRadio , ComponentFormRadioGroup , ComponentFormSelect , ComponentFormOption , ContextSubMenu , ToolbarButtonLabel , } from '@bodiless/ui' ; import ReactTagsField from './ReactTags' ; const toolbarClasses = 'bl-flex bl-divide-x rtl:bl-divide-x-reverse bl-divide-white' ; const groupClasses = 'bl-px-3' ; const Toolbar = flow ( addClasses ( toolbarClasses ) , addProps ( { role : 'toolbar' , 'aria-label' : 'Local Context Menu' } ) ) ( Div ) ; type Props = { overlay : ReactNode | ( ( ) => ReactNode ) ; } ; const LocalTooltip = ( props ) => ( < ReactTooltip { ... props } placement = "bottomLeft" / > ) ; const GroupTitle = flow ( removeClasses ( 'bl-mb-grid-2 bl-min-w-xl-grid-1' ) , addClassesIf ( ( { index } = { } ) => Number ( index ) > 0 ) ( 'hover:bl-underline bl-cursor-pointer' ) , addClassesIf ( ( { index } = { } ) => index === 0 ) ( 'bl-underline' ) ) ( ComponentFormTitle ) as ComponentType < { index ? : number ; } > ; const ContextMenuGroup = ( { children , index , option , } ) => { const hidden = Boolean ( option && ( typeof option . isHidden === 'function' ? option . isHidden ( ) : option . isHidden ) ) ; if ( hidden ) return null ; const { context , label } = option || { } ; const label$ = typeof label === 'function' ? label ( ) : label ; const onClick = context ? { onClick : ( ) => context . activate ( ) } : { } ; return ( < div className = { groupClasses } > { label && ( < GroupTitle index = { index } { ... onClick } > { label$ } < /GroupTitle>)} < div className = "flex" > { children } < /div> < /div>); } ; export const FormWrapper = addClasses ( 'bl-flex' ) ( Div ) ; const ui = { ComponentFormText , ComponentFormTextArea , ComponentFormFieldWrapper , ComponentFormFieldTitle , ComponentFormCheckBox , ComponentFormRadio , ComponentFormRadioGroup , ComponentFormSelect , ComponentFormOption , ComponentFormButton , ComponentFormCloseButton , ComponentFormUnwrapButton , ComponentFormSubmitButton , ComponentFormTitle , ComponentFormLabel , ComponentFormDescription , ContextSubMenu , ComponentFormWarning , Icon : ToolbarIcon , Toolbar , ToolbarButton : HorizontalToolbarButton , ToolbarButtonLabel , FormWrapper , Tooltip : LocalTooltip , ReactTags : ReactTagsField , ContextMenuGroup , } ; const LocalContextMenu = props => ( < ContextMenu { ... props } ui = { ui } / > ) ; export default LocalContextMenu ;