feature: add draggable attribute to OptionsPanel component (#5)

impress-org · Jan 24, 2024 · 60ce95b · 60ce95b
1 parent e7d30da
commit 60ce95b
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 3 deletions.
diff --git a/src/OptionsPanel/OptionsItem.tsx b/src/OptionsPanel/OptionsItem.tsx
@@ -2,7 +2,7 @@ import cn from 'classnames';
 import {__} from '@wordpress/i18n';
 import {Button, Icon, Tooltip} from '@wordpress/components';
 
-import {draggable, minusCircle} from './icons';
+import {draggableIcon, minusCircle} from './icons';
 import {OptionsItemProps} from './types';
 import CurrencyControl from '../CurrencyControl';
 import {isCurrencyMode} from './utils';
@@ -22,11 +22,12 @@ export default function OptionsItem({
     handleRemoveOption,
     readOnly,
     disabled,
+    draggable,
 }: OptionsItemProps) {
     return (
         <div className={'givewp-options-list--item'} ref={provided.innerRef} {...provided.draggableProps}>
             <span className={'givewp-options-list--item--draggable'} {...provided.dragHandleProps}>
-                <Icon icon={draggable} />
+                {draggable && <Icon icon={draggableIcon} />}
             </span>
             <Tooltip
                 text={defaultTooltip ? defaultTooltip : __('Default', 'give')}

diff --git a/src/OptionsPanel/OptionsList.tsx b/src/OptionsPanel/OptionsList.tsx
@@ -14,6 +14,7 @@ export default function OptionsList({
     onRemoveOption,
     readOnly,
     disableSoloCheckedOption,
+    draggable,
 }: OptionsListProps) {
     const handleRemoveOption = (index: number) => (): void => {
         if (onRemoveOption) {
@@ -103,6 +104,7 @@ export default function OptionsList({
                                                 option.checked &&
                                                 options.filter((option) => option.checked).length === 1
                                             }
+                                            draggable={draggable}
                                         />
                                     )}
                                 </Draggable>

diff --git a/src/OptionsPanel/icons.tsx b/src/OptionsPanel/icons.tsx
@@ -17,7 +17,7 @@ export function minusCircle() {
     );
 }
 
-export function draggable() {
+export function draggableIcon() {
     return (
         <SVG xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
             <Path

diff --git a/src/OptionsPanel/index.tsx b/src/OptionsPanel/index.tsx
@@ -21,6 +21,7 @@ export default function Options({
     readOnly = false,
     label = __('Options', 'give'),
     disableSoloCheckedOption = false,
+    draggable = true,
 }: OptionsPanelProps) {
     const [showValues, setShowValues] = useState<boolean>(false);
 
@@ -58,6 +59,7 @@ export default function Options({
                         onRemoveOption={onRemoveOption}
                         readOnly={readOnly}
                         disableSoloCheckedOption={disableSoloCheckedOption}
+                        draggable={draggable}
                     />
                 </BaseControl>
             </PanelRow>

diff --git a/src/OptionsPanel/types.ts b/src/OptionsPanel/types.ts
@@ -12,6 +12,7 @@ export interface OptionsPanelProps {
     label?: string;
     readOnly?: boolean;
     disableSoloCheckedOption?: boolean;
+    draggable?: boolean;
 }
 
 export interface OptionsListProps {
@@ -25,6 +26,7 @@ export interface OptionsListProps {
     onRemoveOption?: (option: OptionProps, index: number) => void;
     readOnly?: boolean;
     disableSoloCheckedOption?: boolean;
+    draggable?: boolean;
 }
 
 export interface OptionsItemProps {
@@ -41,6 +43,7 @@ export interface OptionsItemProps {
     handleRemoveOption: () => void;
     readOnly?: boolean;
     disabled?: boolean;
+    draggable?: boolean;
 }
 
 export interface OptionsHeaderProps {