Fixed #4050 - Add breakpoint property to PickList and OrderList

primefaces · Feb 14, 2023 · 5965e89 · 5965e89
1 parent cc7f409
commit 5965e89
Show file tree

Hide file tree

Showing 54 changed files with 145 additions and 2,128 deletions.
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { FilterService } from '../api/Api';
-import { useUpdateEffect } from '../hooks/Hooks';
-import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+import PrimeReact, { FilterService } from '../api/Api';
+import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { classNames, DomHandler, ObjectUtils, UniqueComponentId } from '../utils/Utils';
 import { OrderListBase } from './OrderListBase';
 import { OrderListControls } from './OrderListControls';
 import { OrderListSubList } from './OrderListSubList';
@@ -12,8 +12,10 @@ export const OrderList = React.memo(
 
         const [selectionState, setSelectionState] = React.useState([]);
         const [filterValueState, setFilterValueState] = React.useState('');
+        const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
         const hasFilter = ObjectUtils.isNotEmpty(filterValueState);
         const elementRef = React.useRef(null);
+        const styleElementRef = React.useRef(null);
         const reorderDirection = React.useRef(null);
 
         const onItemClick = (event) => {
@@ -154,11 +156,58 @@ export const OrderList = React.memo(
             }
         };
 
+        const createStyle = () => {
+            if (!styleElementRef.current) {
+                styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+
+                let innerHTML = `
+@media screen and (max-width: ${props.breakpoint}) {
+    .p-orderlist[${attributeSelectorState}] {
+        flex-direction: column;
+    }
+
+    .p-orderlist[${attributeSelectorState}] .p-orderlist-controls {
+        padding: var(--content-padding);
+        flex-direction: row;
+    }
+
+    .p-orderlist[${attributeSelectorState}] .p-orderlist-controls .p-button {
+        margin-right: var(--inline-spacing);
+        margin-bottom: 0;
+    }
+
+    .p-orderlist[${attributeSelectorState}] .p-orderlist-controls .p-button:last-child {
+        margin-right: 0;
+    }
+}
+`;
+
+                styleElementRef.current.innerHTML = innerHTML;
+            }
+        };
+
+        const destroyStyle = () => {
+            styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+        };
+
         React.useImperativeHandle(ref, () => ({
             props,
             getElement: () => elementRef.current
         }));
 
+        useMountEffect(() => {
+            setAttributeSelectorState(UniqueComponentId());
+        });
+
+        useUpdateEffect(() => {
+            elementRef.current.setAttribute(attributeSelectorState, '');
+            createStyle();
+
+            return () => {
+                destroyStyle();
+            };
+        }, [attributeSelectorState]);
+
         useUpdateEffect(() => {
             if (reorderDirection.current) {
                 updateListScroll();

diff --git a/components/lib/orderlist/OrderListBase.js b/components/lib/orderlist/OrderListBase.js
@@ -12,6 +12,7 @@ export const OrderListBase = {
         dragdrop: false,
         tabIndex: 0,
         dataKey: null,
+        breakpoint: '960px',
         onChange: null,
         itemTemplate: null,
         filter: false,

diff --git a/components/lib/orderlist/orderlist.d.ts b/components/lib/orderlist/orderlist.d.ts
@@ -65,6 +65,11 @@ export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * Name of the field that uniquely identifies the a record in the data.
      */
     dataKey?: string | undefined;
+    /**
+     * The breakpoint to define the maximum width boundary when responsiveness is enabled.
+     * @defaultValue '960px'.
+     */
+    breakpoint?: string | undefined;
     /**
      * When specified, displays an input field to filter the items on keyup.
      * @defaultValue false

diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { FilterService } from '../api/Api';
-import { useUpdateEffect } from '../hooks/Hooks';
-import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+import PrimeReact, { FilterService } from '../api/Api';
+import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { classNames, DomHandler, ObjectUtils, UniqueComponentId } from '../utils/Utils';
 import { PickListBase } from './PickListBase';
 import { PickListControls } from './PickListControls';
 import { PickListSubList } from './PickListSubList';
@@ -15,11 +15,13 @@ export const PickList = React.memo(
         const [targetSelectionState, setTargetSelectionState] = React.useState([]);
         const [sourceFilterValueState, setSourceFilterValueState] = React.useState('');
         const [targetFilterValueState, setTargetFilterValueState] = React.useState('');
+        const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
         const elementRef = React.useRef(null);
         const sourceListElementRef = React.useRef(null);
         const targetListElementRef = React.useRef(null);
         const reorderedListElementRef = React.useRef(null);
         const reorderDirection = React.useRef(null);
+        const styleElementRef = React.useRef(null);
         const sourceSelection = props.sourceSelection ? props.sourceSelection : sourceSelectionState;
         const targetSelection = props.targetSelection ? props.targetSelection : targetSelectionState;
         const sourceFilteredValue = props.onSourceFilterChange ? props.sourceFilterValue : sourceFilterValueState;
@@ -199,11 +201,74 @@ export const PickList = React.memo(
             return FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
         };
 
+        const createStyle = () => {
+            if (!styleElementRef.current) {
+                styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+
+                let innerHTML = `
+@media screen and (max-width: ${props.breakpoint}) {
+    .p-picklist[${attributeSelectorState}] {
+        flex-direction: column;
+    }
+
+    .p-picklist[${attributeSelectorState}] .p-picklist-buttons {
+        padding: var(--content-padding);
+        flex-direction: row;
+    }
+
+    .p-picklist[${attributeSelectorState}] .p-picklist-buttons .p-button {
+        margin-right: var(--inline-spacing);
+        margin-bottom: 0;
+    }
+
+    .p-picklist[${attributeSelectorState}] .p-picklist-buttons .p-button:last-child {
+        margin-right: 0;
+    }
+
+    .p-picklist[${attributeSelectorState}] .pi-angle-right:before {
+        content: "\\e930"
+    }
+
+    .p-picklist[${attributeSelectorState}] .pi-angle-double-right:before {
+        content: "\\e92c"
+    }
+
+    .p-picklist[${attributeSelectorState}] .pi-angle-left:before {
+        content: "\\e933"
+    }
+
+    .p-picklist[${attributeSelectorState}] .pi-angle-double-left:before {
+        content: "\\e92f"
+    }
+}
+`;
+
+                styleElementRef.current.innerHTML = innerHTML;
+            }
+        };
+
+        const destroyStyle = () => {
+            styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+        };
+
         React.useImperativeHandle(ref, () => ({
             props,
             getElement: () => elementRef.current
         }));
 
+        useMountEffect(() => {
+            setAttributeSelectorState(UniqueComponentId());
+        });
+
+        useUpdateEffect(() => {
+            elementRef.current.setAttribute(attributeSelectorState, '');
+            createStyle();
+
+            return () => {
+                destroyStyle();
+            };
+        }, [attributeSelectorState, props.breakpoint]);
+
         useUpdateEffect(() => {
             if (reorderedListElementRef.current) {
                 handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);

diff --git a/components/lib/picklist/PickListBase.js b/components/lib/picklist/PickListBase.js
@@ -17,6 +17,7 @@ export const PickListBase = {
         showSourceControls: true,
         showTargetControls: true,
         metaKeySelection: true,
+        filter: false,
         filterBy: null,
         filterMatchMode: 'contains',
         filterLocale: undefined,
@@ -30,6 +31,7 @@ export const PickListBase = {
         targetFilterTemplate: null,
         tabIndex: 0,
         dataKey: null,
+        breakpoint: '960px',
         itemTemplate: null,
         sourceItemTemplate: null,
         targetItemTemplate: null,

diff --git a/components/lib/picklist/picklist.d.ts b/components/lib/picklist/picklist.d.ts
@@ -162,6 +162,11 @@ export interface PickListProps {
      * @defaultValue true
      */
     metaKeySelection?: boolean | undefined;
+    /**
+     * When specified, displays an input field to filter the items on keyup.
+     * @defaultValue false
+     */
+    filter?: boolean | undefined;
     /**
      * When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma).
      */
@@ -218,6 +223,11 @@ export interface PickListProps {
      * Name of the field that uniquely identifies the a record in the data.
      */
     dataKey?: string | undefined;
+    /**
+     * The breakpoint to define the maximum width boundary when responsiveness is enabled.
+     * @defaultValue '960px'.
+     */
+    breakpoint?: string | undefined;
     /**
      * Template that gets the options for both source and target items and returns the content for it. Useful if you want the same template for both lists else use the custom sourceItemTemplate or targetItemTemplate properties.
      */

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
@@ -3397,22 +3397,6 @@
   background: rgba(255, 255, 255, 0.03);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -3592,34 +3576,6 @@
   background: rgba(100, 181, 246, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "\e930";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "\e92c";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "\e933";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "\e92f";
-  }
-}
 .p-tree {
   border: 1px solid #383838;
   background: #1e1e1e;

diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
@@ -3397,22 +3397,6 @@
   background: rgba(255, 255, 255, 0.03);
 }
 
-@media screen and (max-width: 960px) {
-  .p-orderlist {
-    flex-direction: column;
-  }
-  .p-orderlist .p-orderlist-controls {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-orderlist .p-orderlist-controls .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-orderlist .p-orderlist-controls .p-button:last-child {
-    margin-right: 0;
-  }
-}
 .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.87);
@@ -3592,34 +3576,6 @@
   background: rgba(129, 199, 132, 0.16);
 }
 
-@media screen and (max-width: 960px) {
-  .p-picklist {
-    flex-direction: column;
-  }
-  .p-picklist .p-picklist-buttons {
-    padding: 1rem;
-    flex-direction: row;
-  }
-  .p-picklist .p-picklist-buttons .p-button {
-    margin-right: 0.5rem;
-    margin-bottom: 0;
-  }
-  .p-picklist .p-picklist-buttons .p-button:last-child {
-    margin-right: 0;
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-right:before {
-    content: "\e930";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-right:before {
-    content: "\e92c";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-left:before {
-    content: "\e933";
-  }
-  .p-picklist .p-picklist-transfer-buttons .pi-angle-double-left:before {
-    content: "\e92f";
-  }
-}
 .p-tree {
   border: 1px solid #383838;
   background: #1e1e1e;