chore: rtl & empty (#431)

* chore: rtl & empty

* test: add test case

Author: zombieJ

examples/panel.tsx

@@ -67,6 +67,10 @@ export default () => {
           console.log('Change:', value);
         }}
       />
+
+      <Cascader.Panel options={addressOptions} direction="rtl" />
+
+      <Cascader.Panel notFoundContent="Empty!!!" />
     </>
   );
 };

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!" />
     );
   }
 }

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>
   );

tests/Panel.spec.tsx

@@ -80,4 +80,16 @@ describe('Cascader.Panel', () => {
     fireEvent.click(container.querySelectorAll('.rc-cascader-checkbox')[1]);
     expect(onChange).toHaveBeenCalledWith([['bamboo', 'little']], expect.anything());
   });
+
+  it('rtl', () => {
+    const { container } = render(<Cascader.Panel options={options} direction="rtl" />);
+
+    expect(container.querySelector('.rc-cascader-panel-rtl')).toBeTruthy();
+  });
+
+  it('notFoundContent', () => {
+    const { container } = render(<Cascader.Panel notFoundContent="Hello World" />);
+
+    expect(container.querySelector('.rc-cascader-panel-empty').textContent).toEqual('Hello World');
+  });
 });