Refactor #4602 - For OrderList

primefaces · Aug 3, 2023 · b3a837a · b3a837a
1 parent 82dec90
commit b3a837a
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 94 deletions.
diff --git a/components/lib/orderlist/OrderList.css b/components/lib/orderlist/OrderList.css
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import PrimeReact, { FilterService } from '../api/Api';
-import { PrimeReactContext } from '../api/Api';
+import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { DomHandler, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils';
 import { OrderListBase } from './OrderListBase';
@@ -20,7 +20,7 @@ export const OrderList = React.memo(
         const styleElementRef = React.useRef(null);
         const reorderDirection = React.useRef(null);
 
-        const { ptm } = OrderListBase.setMetaData({
+        const { ptm, cx, isUnstyled } = OrderListBase.setMetaData({
             props,
             state: {
                 selection: selectionState,
@@ -29,6 +29,8 @@ export const OrderList = React.memo(
             }
         });
 
+        useHandleStyle(OrderListBase.css.styles, isUnstyled, { name: 'orderlist' });
+
         const onItemClick = (event) => {
             const metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
             const index = ObjectUtils.findIndexInList(event.value, selectionState, props.dataKey);
@@ -228,14 +230,13 @@ export const OrderList = React.memo(
             }
         });
 
-        const className = classNames('p-orderlist p-component', props.className);
         const visibleList = getVisibleList();
 
         const rootProps = mergeProps(
             {
                 ref: elementRef,
                 id: props.id,
-                className,
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             OrderListBase.getOtherProps(props),
@@ -254,6 +255,8 @@ export const OrderList = React.memo(
                     moveDownIcon={props.moveDownIcon}
                     moveBottomIcon={props.moveBottomIcon}
                     ptm={ptm}
+                    cx={cx}
+                    unstyled={props.unstyled}
                 />
                 <OrderListSubList
                     value={visibleList}
@@ -274,6 +277,7 @@ export const OrderList = React.memo(
                     tabIndex={props.tabIndex}
                     filterIcon={props.filterIcon}
                     ptm={ptm}
+                    cx={cx}
                 />
             </div>
         );

diff --git a/components/lib/orderlist/OrderListBase.js b/components/lib/orderlist/OrderListBase.js
@@ -1,4 +1,82 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: 'p-orderlist p-component',
+    control: 'p-orderlist-controls',
+    droppoint: 'p-orderlist-droppoint',
+    header: 'p-orderlist-header',
+    list: 'p-orderlist-list',
+    icon: 'p-orderlist-filter',
+    filter: 'p-orderlist-filter',
+    filterInput: 'p-orderlist-filter-input p-inputtext p-component',
+    filterIcon: 'p-orderlist-filter-icon',
+    filterContainer: 'p-orderlist-filter-container',
+    container: 'p-orderlist-list-container',
+    item: ({ item, isSelected }) => classNames('p-orderlist-item', { 'p-highlight': isSelected(item) })
+};
+
+const styles = `
+.p-orderlist {
+    display: flex;
+}
+
+.p-orderlist-controls {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.p-orderlist-list-container {
+    flex: 1 1 auto;
+}
+
+.p-orderlist-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    min-height: 12rem;
+    max-height: 24rem;
+}
+
+.p-orderlist-item {
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-orderlist-filter {
+    position: relative;
+}
+
+.p-orderlist-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+}
+
+.p-orderlist-filter-input {
+    width: 100%;
+}
+
+.p-orderlist.p-state-disabled .p-orderlist-item,
+.p-orderlist.p-state-disabled .p-button {
+    cursor: default;
+}
+
+.p-orderlist.p-state-disabled .p-orderlist-list {
+    overflow: hidden;
+}
+
+.p-orderlist .p-orderlist-droppoint {
+    height: 0.5rem;
+}
+
+.p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight {
+    background: var(--primary-color);
+}
+`;
 
 export const OrderListBase = ComponentBase.extend({
     defaultProps: {
@@ -28,5 +106,9 @@ export const OrderListBase = ComponentBase.extend({
         filterTemplate: null,
         onFilter: null,
         children: undefined
+    },
+    css: {
+        classes,
+        styles
     }
 });
diff --git a/components/lib/orderlist/OrderListControls.js b/components/lib/orderlist/OrderListControls.js
@@ -12,6 +12,7 @@ export const OrderListControls = React.memo((props) => {
     const moveTopIcon = props.moveTopIcon || <AngleDoubleUpIcon />;
     const moveDownIcon = props.moveDownIcon || <AngleDownIcon />;
     const moveBottomIcon = props.moveBottomIcon || <AngleDoubleDownIcon />;
+    const { ptm, cx, unstyled } = props;
 
     const moveUp = (event) => {
         if (props.selection) {
@@ -127,49 +128,53 @@ export const OrderListControls = React.memo((props) => {
 
     const controlProps = mergeProps(
         {
-            className: 'p-orderlist-controls'
+            className: cx('control')
         },
-        props.ptm('control')
+        ptm('control')
     );
 
     const moveUpButtonProps = mergeProps(
         {
             type: 'button',
+            unstyled: unstyled,
             icon: moveUpIcon,
             onClick: moveUp,
             'aria-label': ariaLabel('moveUp')
         },
-        props.ptm('moveUpButton')
+        ptm('moveUpButton')
     );
 
     const moveTopButtonProps = mergeProps(
         {
             type: 'button',
+            unstyled: unstyled,
             icon: moveTopIcon,
             onClick: moveTop,
             'aria-label': ariaLabel('moveTop')
         },
-        props.ptm('moveTopButton')
+        ptm('moveTopButton')
     );
 
     const moveDownButtonProps = mergeProps(
         {
             type: 'button',
+            unstyled: unstyled,
             icon: moveDownIcon,
             onClick: moveDown,
             'aria-label': ariaLabel('moveDown')
         },
-        props.ptm('moveDownButton')
+        ptm('moveDownButton')
     );
 
     const moveBottomButtonProps = mergeProps(
         {
             type: 'button',
+            unstyled: unstyled,
             icon: moveBottomIcon,
             onClick: moveBottom,
             'aria-label': ariaLabel('moveBottom')
         },
-        props.ptm('moveBottomButton')
+        ptm('moveBottomButton')
     );
 
     return (