feat(Controls): Add optional isWideView prop

diplodoc-platform · Nov 21, 2023 · 94c9198 · 94c9198
1 parent 4dcbdb3
commit 94c9198
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/src/components/Control/Control.tsx b/src/components/Control/Control.tsx
@@ -18,6 +18,7 @@ export interface IconProps {
 export interface ControlProps {
     onClick?: () => void;
     setRef?: (ref: HTMLButtonElement) => void;
+    isWideView?: boolean;
     isVerticalView?: boolean;
     tooltipText: string;
     isTooltipHidden?: boolean;
@@ -42,6 +43,7 @@ const Control = forwardRef((props: ControlProps, ref) => {
         className,
         tooltipText,
         isTooltipHidden,
+        isWideView,
         isVerticalView,
         size = ControlSizes.M,
         icon,
@@ -91,6 +93,7 @@ const Control = forwardRef((props: ControlProps, ref) => {
                 <Button.Icon>
                     <Icon width={iconSize} height={iconSize} />
                 </Button.Icon>
+                {isWideView ? tooltipText : null}
             </Button>
             {controlRef.current && (
                 <Popup

diff --git a/src/components/Controls/ControlsLayout.tsx b/src/components/Controls/ControlsLayout.tsx
@@ -6,6 +6,7 @@ import {PopperPosition} from '../../hooks';
 import {ControlSizes} from '../../models';
 
 type ControlsLayoutProps = {
+    isWideView?: boolean;
     isVerticalView?: boolean;
     controlClassName?: string;
     controlSize?: ControlSizes;
@@ -14,6 +15,7 @@ type ControlsLayoutProps = {
 
 export const ControlsLayoutContext = createContext<ControlsLayoutProps>({
     controlClassName: '',
+    isWideView: false,
     isVerticalView: false,
     controlSize: ControlSizes.M,
     popupPosition: PopperPosition.BOTTOM_END,
@@ -22,6 +24,7 @@ export const ControlsLayoutContext = createContext<ControlsLayoutProps>({
 const b = block('dc-controls');
 
 export const ControlsLayout: React.FC<PropsWithChildren<ControlsLayoutProps>> = ({
+    isWideView,
     isVerticalView,
     controlClassName,
     controlSize,
@@ -32,6 +35,7 @@ export const ControlsLayout: React.FC<PropsWithChildren<ControlsLayoutProps>> =
         <ControlsLayoutContext.Provider
             value={{
                 controlClassName: controlClassName || b('control'),
+                isWideView: isWideView,
                 isVerticalView: isVerticalView,
                 controlSize: controlSize,
                 popupPosition: popupPosition,

diff --git a/src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx b/src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx
@@ -36,7 +36,7 @@ interface SettingControlItem {
 
 const SettingsControl = (props: ControlProps) => {
     const {t} = useTranslation('controls');
-    const {controlClassName, controlSize, isVerticalView, popupPosition} =
+    const {controlClassName, controlSize, isVerticalView, isWideView, popupPosition} =
         useContext(ControlsLayoutContext);
     const {
         textSize,
@@ -207,6 +207,7 @@ const SettingsControl = (props: ControlProps) => {
                 ref={controlRef}
                 size={controlSize}
                 onClick={showPopup}
+                isWideView={isWideView}
                 isVerticalView={isVerticalView}
                 tooltipText={t('settings-text')}
                 popupPosition={popupPosition}