chore: rtl & empty

react-component · Sep 26, 2023 · 892636d · 892636d
1 parent ce84920
commit 892636d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/examples/panel.tsx b/examples/panel.tsx
@@ -67,6 +67,10 @@ export default () => {
           console.log('Change:', value);
         }}
       />
+
+      <Cascader.Panel options={addressOptions} direction="rtl" />
+
+      <Cascader.Panel notFoundContent="Empty!!!" />
     </>
   );
 };
diff --git a/examples/search.tsx b/examples/search.tsx
@@ -69,7 +69,7 @@ const addressOptions = [
 class Demo extends React.Component {
   render() {
     return (
-      <Cascader options={addressOptions} showSearch style={{ width: 300 }} animation="slide-up" />
+      <Cascader options={addressOptions} showSearch style={{ width: 300 }} animation="slide-up" notFoundContent="Empty Content!" />
     );
   }
 }

diff --git a/src/Panel.tsx b/src/Panel.tsx
@@ -26,7 +26,9 @@ export type PickType =
   | 'expandIcon'
   | 'loadingIcon'
   | 'className'
-  | 'style';
+  | 'style'
+  | 'direction'
+  | 'notFoundContent';
 
 export type PanelProps = Pick<CascaderProps, PickType>;
 
@@ -49,6 +51,8 @@ export default function Panel(props: PanelProps) {
     expandTrigger,
     expandIcon = '>',
     loadingIcon,
+    direction,
+    notFoundContent = 'Not Found',
   } = props as Pick<InternalCascaderProps, PickType>;
 
   // ======================== Multiple ========================
@@ -155,16 +159,34 @@ export default function Panel(props: PanelProps) {
   );
 
   // ========================= Render =========================
+  const panelPrefixCls = `${prefixCls}-panel`;
+  const isEmpty = !mergedOptions.length;
+
   return (
     <CascaderContext.Provider value={cascaderContext}>
-      <div className={classNames(`${prefixCls}-panel`, className)} style={style}>
-        <RawOptionList
-          prefixCls={prefixCls}
-          searchValue={null}
-          multiple={multiple}
-          toggleOpen={noop}
-          open
-        />
+      <div
+        className={classNames(
+          panelPrefixCls,
+          {
+            [`${panelPrefixCls}-rtl`]: direction === 'rtl',
+            [`${panelPrefixCls}-empty`]: isEmpty,
+          },
+          className,
+        )}
+        style={style}
+      >
+        {isEmpty ? (
+          notFoundContent
+        ) : (
+          <RawOptionList
+            prefixCls={prefixCls}
+            searchValue={null}
+            multiple={multiple}
+            toggleOpen={noop}
+            open
+            direction={direction}
+          />
+        )}
       </div>
     </CascaderContext.Provider>
   );