Refactor #4602 - For PickList

primefaces · Aug 3, 2023 · db32ce7 · db32ce7
1 parent 916b303
commit db32ce7
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 89 deletions.
diff --git a/components/lib/picklist/PickList.css b/components/lib/picklist/PickList.css
diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 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 { PickListBase } from './PickListBase';
@@ -17,7 +18,7 @@ export const PickList = React.memo(
         const [sourceFilterValueState, setSourceFilterValueState] = React.useState('');
         const [targetFilterValueState, setTargetFilterValueState] = React.useState('');
         const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
-        const { ptm } = PickListBase.setMetaData({
+        const { ptm, cx, isUnstyled } = PickListBase.setMetaData({
             props,
             state: {
                 sourceSelection: sourceSelectionState,
@@ -27,6 +28,8 @@ export const PickList = React.memo(
                 attributeSelector: attributeSelectorState
             }
         });
+
+        useHandleStyle(PickListBase.css.styles, isUnstyled, { name: 'picklist' });
         const elementRef = React.useRef(null);
         const sourceListElementRef = React.useRef(null);
         const targetListElementRef = React.useRef(null);
@@ -55,7 +58,7 @@ export const PickList = React.memo(
 
         const handleScrollPosition = (listElement, direction) => {
             if (listElement) {
-                let list = DomHandler.findSingle(listElement, '.p-picklist-list');
+                let list = DomHandler.findSingle(listElement, '[data-pc-section="list"]');
 
                 switch (direction) {
                     case 'up':
@@ -278,7 +281,6 @@ export const PickList = React.memo(
             }
         });
 
-        const className = classNames('p-picklist p-component', props.className);
         const sourceItemTemplate = props.sourceItemTemplate ? props.sourceItemTemplate : props.itemTemplate;
         const targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate;
         const sourceList = getVisibleList(props.source, 'source');
@@ -288,7 +290,7 @@ export const PickList = React.memo(
             {
                 id: props.id,
                 ref: elementRef,
-                className,
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             PickListBase.getOtherProps(props),
@@ -309,6 +311,8 @@ export const PickList = React.memo(
                         moveDownIcon={props.moveDownIcon}
                         moveBottomIcon={props.moveBottomIcon}
                         ptm={ptm}
+                        cx={cx}
+                        unstyled={props.unstyled}
                     />
                 )}
 
@@ -333,6 +337,7 @@ export const PickList = React.memo(
                     filterTemplate={props.sourceFilterTemplate}
                     sourceFilterIcon={props.sourceFilterIcon}
                     ptm={ptm}
+                    cx={cx}
                 />
 
                 <PickListTransferControls
@@ -350,6 +355,8 @@ export const PickList = React.memo(
                     moveToSourceIcon={props.moveToSourceIcon}
                     moveAllToSourceIcon={props.moveAllToSourceIcon}
                     ptm={ptm}
+                    cx={cx}
+                    unstyled={props.unstyled}
                 />
 
                 <PickListSubList
@@ -373,6 +380,7 @@ export const PickList = React.memo(
                     filterTemplate={props.targetFilterTemplate}
                     targetFilterIcon={props.targetFilterIcon}
                     ptm={ptm}
+                    cx={cx}
                 />
 
                 {props.showTargetControls && (
@@ -387,6 +395,8 @@ export const PickList = React.memo(
                         moveDownIcon={props.moveDownIcon}
                         moveBottomIcon={props.moveBottomIcon}
                         ptm={ptm}
+                        cx={cx}
+                        unstyled={props.unstyled}
                     />
                 )}
             </div>

diff --git a/components/lib/picklist/PickListBase.js b/components/lib/picklist/PickListBase.js
@@ -1,4 +1,67 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: 'p-picklist p-component',
+    buttons: 'p-picklist-buttons p-picklist-transfer-buttons',
+    header: 'p-picklist-header',
+    filterIcon: 'p-picklist-filter-icon',
+    filter: 'p-picklist-filter',
+    filterInput: 'p-picklist-filter-input p-inputtext p-component',
+    filterContainer: 'p-picklist-filter-container',
+    list: 'p-picklist-list',
+    listWrapper: 'p-picklist-list-wrapper',
+    item: ({ subProps }) =>
+        classNames('p-picklist-item', {
+            'p-highlight': subProps.selected
+        }),
+    controls: 'p-picklist-buttons'
+};
+
+const styles = `
+.p-picklist {
+    display: flex;
+}
+
+.p-picklist-buttons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.p-picklist-list-wrapper {
+    flex: 1 1 50%;
+}
+
+.p-picklist-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    min-height: 12rem;
+    max-height: 24rem;
+}
+
+.p-picklist-item {
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-picklist-filter {
+    position: relative;
+}
+
+.p-picklist-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+}
+
+.p-picklist-filter-input {
+    width: 100%;
+}
+`;
 
 export const PickListBase = ComponentBase.extend({
     defaultProps: {
@@ -55,5 +118,9 @@ export const PickListBase = ComponentBase.extend({
         onSourceFilterChange: null,
         onTargetFilterChange: null,
         children: undefined
+    },
+    css: {
+        classes,
+        styles
     }
 });
diff --git a/components/lib/picklist/PickListControls.js b/components/lib/picklist/PickListControls.js
@@ -7,6 +7,8 @@ import { AngleUpIcon } from '../icons/angleup';
 import { classNames, mergeProps, ObjectUtils } from '../utils/Utils';
 
 export const PickListControls = React.memo((props) => {
+    const { ptm, cx, unstyled } = props;
+
     const moveUpIcon = props.moveUpIcon || <AngleUpIcon />;
     const moveTopIcon = props.moveTopIcon || <AngleDoubleUpIcon />;
     const moveDownIcon = props.moveDownIcon || <AngleDownIcon />;
@@ -134,21 +136,19 @@ export const PickListControls = React.memo((props) => {
         }
     };
 
-    const className = classNames('p-picklist-buttons', props.className);
-
     const controlsProps = mergeProps(
         {
-            className
+            className: classNames(props.className, cx('controls'))
         },
-        props.ptm('controls')
+        ptm('controls')
     );
 
     return (
         <div {...controlsProps}>
-            <Button disabled={moveDisabled} type="button" icon={moveUpIcon} onClick={moveUp} pt={props.ptm('moveUpButton')}></Button>
-            <Button disabled={moveDisabled} type="button" icon={moveTopIcon} onClick={moveTop} pt={props.ptm('moveTopButton')}></Button>
-            <Button disabled={moveDisabled} type="button" icon={moveDownIcon} onClick={moveDown} pt={props.ptm('moveDownButton')}></Button>
-            <Button disabled={moveDisabled} type="button" icon={moveBottomIcon} onClick={moveBottom} pt={props.ptm('moveBottomButton')}></Button>
+            <Button disabled={moveDisabled} type="button" icon={moveUpIcon} onClick={moveUp} pt={ptm('moveUpButton')} unstyled={unstyled}></Button>
+            <Button disabled={moveDisabled} type="button" icon={moveTopIcon} onClick={moveTop} pt={ptm('moveTopButton')} unstyled={unstyled}></Button>
+            <Button disabled={moveDisabled} type="button" icon={moveDownIcon} onClick={moveDown} pt={ptm('moveDownButton')} unstyled={unstyled}></Button>
+            <Button disabled={moveDisabled} type="button" icon={moveBottomIcon} onClick={moveBottom} pt={ptm('moveBottomButton')} unstyled={unstyled}></Button>
         </div>
     );
 });

diff --git a/components/lib/picklist/PickListItem.js b/components/lib/picklist/PickListItem.js
@@ -3,8 +3,10 @@ import { Ripple } from '../ripple/Ripple';
 import { classNames, mergeProps } from '../utils/Utils';
 
 export const PickListItem = React.memo((props) => {
+    const { ptm, cx } = props;
+
     const getPTOptions = (key) => {
-        return props.ptm(key, {
+        return ptm(key, {
             context: {
                 selected: props.selected
             }
@@ -30,17 +32,10 @@ export const PickListItem = React.memo((props) => {
     };
 
     const content = props.template ? props.template(props.value) : props.value;
-    const className = classNames(
-        'p-picklist-item',
-        {
-            'p-highlight': props.selected
-        },
-        props.className
-    );
 
     const itemProps = mergeProps(
         {
-            className,
+            className: classNames('p-ripple', props.className, cx('item', { subProps: props })),
             onClick,
             onKeyDown,
             tabIndex: props.tabIndex,

diff --git a/components/lib/picklist/PickListSubList.js b/components/lib/picklist/PickListSubList.js
@@ -6,6 +6,7 @@ import { PickListItem } from './PickListItem';
 export const PickListSubList = React.memo(
     React.forwardRef((props, ref) => {
         const listElementRef = React.useRef(null);
+        const { ptm, cx } = props;
 
         const onItemClick = (event) => {
             let originalEvent = event.originalEvent;
@@ -112,9 +113,9 @@ export const PickListSubList = React.memo(
         const createHeader = () => {
             const headerProps = mergeProps(
                 {
-                    className: 'p-picklist-header'
+                    className: cx('header')
                 },
-                props.ptm('header')
+                ptm('header')
             );
 
             if (props.header) {
@@ -130,7 +131,7 @@ export const PickListSubList = React.memo(
                     const key = JSON.stringify(item);
                     const selected = isSelected(item);
 
-                    return <PickListItem key={key} value={item} template={props.itemTemplate} selected={selected} onClick={onItemClick} onKeyDown={onItemKeyDown} tabIndex={props.tabIndex} ptm={props.ptm} />;
+                    return <PickListItem key={key} value={item} template={props.itemTemplate} selected={selected} onClick={onItemClick} onKeyDown={onItemKeyDown} tabIndex={props.tabIndex} ptm={ptm} cx={cx} />;
                 });
             }
 
@@ -141,19 +142,19 @@ export const PickListSubList = React.memo(
             const iconClassName = 'p-picklist-filter-icon';
             const filterIconProps = mergeProps(
                 {
-                    className: iconClassName
+                    className: cx('filterIcon')
                 },
-                props.ptm('filterIcon')
+                ptm('filterIcon')
             );
             const icon = props.type === 'source' ? props.sourceFilterIcon || <SearchIcon {...filterIconProps} /> : props.targetFilterIcon || <SearchIcon {...filterIconProps} />;
             const filterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props });
 
             if (props.showFilter) {
                 const filterProps = mergeProps(
                     {
-                        className: 'p-picklist-filter'
+                        className: cx('filter')
                     },
-                    props.ptm('filter')
+                    ptm('filter')
                 );
 
                 const filterInputProps = mergeProps(
@@ -163,9 +164,9 @@ export const PickListSubList = React.memo(
                         onChange: onFilter,
                         onKeyDown: onFilterInputKeyDown,
                         placeholder: props.placeholder,
-                        className: 'p-picklist-filter-input p-inputtext p-component'
+                        className: cx('filterInput')
                     },
-                    props.ptm('filterInput')
+                    ptm('filterInput')
                 );
 
                 let content = (
@@ -193,9 +194,9 @@ export const PickListSubList = React.memo(
 
                 const filterContainerProps = mergeProps(
                     {
-                        className: 'p-picklist-filter-container'
+                        className: cx('filterContainer')
                     },
-                    props.ptm('filterContainer')
+                    ptm('filterContainer')
                 );
 
                 return <div {...filterContainerProps}>{content}</div>;
@@ -206,32 +207,30 @@ export const PickListSubList = React.memo(
 
         const createList = () => {
             const items = createItems();
-            const className = classNames('p-picklist-list', props.listClassName);
 
             const listProps = mergeProps(
                 {
-                    className: className,
+                    className: classNames(props.listClassName, cx('list')),
                     role: 'listbox',
                     'aria-multiselectable': true,
                     style: props.style
                 },
-                props.ptm('list')
+                ptm('list')
             );
 
             return <ul {...listProps}>{items}</ul>;
         };
 
-        const className = classNames('p-picklist-list-wrapper', props.className);
         const header = createHeader();
         const filter = createFilter();
         const list = createList();
 
         const listWrapperProps = mergeProps(
             {
-                className,
+                className: classNames(props.className, cx('listWrapper')),
                 ref: listElementRef
             },
-            props.ptm('listWrapper')
+            ptm('listWrapper')
         );
 
         return (