fix: transfer prefixCls spell (#1365)

packages/semi-ui/transfer/index.tsx

@@ -150,7 +150,7 @@ export interface TransferProps {
     renderSelectedPanel?: (selectedPanelProps: SelectedPanelProps) => React.ReactNode
 }
 
-const prefixcls = cssClasses.PREFIX;
+const prefixCls = cssClasses.PREFIX;
 
 // SortableItem & SortableList should not be assigned inside of the render function
 const SortableItem = SortableElement((
@@ -158,7 +158,7 @@ const SortableItem = SortableElement((
 ));
 
 const SortableList = SortableContainer(({ items }: { items: Array<ResolvedDataItem> }) => (
-    <div className={`${prefixcls}-right-list`} role="list" aria-label="Selected list">
+    <div className={`${prefixCls}-right-list`} role="list" aria-label="Selected list">
         {items.map((item, index: number) => (
             // @ts-ignore skip SortableItem type check
             <SortableItem key={item.label} index={index} item={item} />
@@ -321,7 +321,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
             return null;
         }
         return (
-            <div role="search" aria-label="Transfer filter" className={`${prefixcls}-filter`}>
+            <div role="search" aria-label="Transfer filter" className={`${prefixCls}-filter`}>
                 <Input
                     prefix={<IconSearch />}
                     placeholder={locale.placeholder}
@@ -339,20 +339,20 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         const { disabled } = this.props;
         const { totalContent, allContent, onAllClick, type, showButton } = headerConfig;
         const headerCls = cls({
-            [`${prefixcls}-header`]: true,
-            [`${prefixcls}-right-header`]: type === 'right',
-            [`${prefixcls}-left-header`]: type === 'left',
+            [`${prefixCls}-header`]: true,
+            [`${prefixCls}-right-header`]: type === 'right',
+            [`${prefixCls}-left-header`]: type === 'left',
         });
         return (
             <div className={headerCls}>
-                <span className={`${prefixcls}-header-total`}>{totalContent}</span>
+                <span className={`${prefixCls}-header-total`}>{totalContent}</span>
                 {showButton ? (
                     <Button
                         theme="borderless"
                         disabled={disabled}
                         type="tertiary"
                         size="small"
-                        className={`${prefixcls}-header-all`}
+                        className={`${prefixCls}-header-all`}
                         onClick={onAllClick}
                     >
                         {allContent}
@@ -370,8 +370,8 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
             return renderSourceItem({ ...item, checked, onChange: () => this.onSelectOrRemove(item) });
         }
         const leftItemCls = cls({
-            [`${prefixcls}-item`]: true,
-            [`${prefixcls}-item-disabled`]: item.disabled,
+            [`${prefixCls}-item`]: true,
+            [`${prefixCls}-item-disabled`]: item.disabled,
         });
         return (
             <Checkbox
@@ -476,7 +476,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         }
 
         return (
-            <section className={`${prefixcls}-left`}>
+            <section className={`${prefixCls}-left`}>
                 {inputCom}
                 {content}
             </section>
@@ -484,7 +484,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
     }
 
     renderGroupTitle(group: GroupItem, index: number) {
-        const groupCls = cls(`${prefixcls }-group-title`);
+        const groupCls = cls(`${prefixCls }-group-title`);
         return (
             <div className={groupCls} key={`title-${index}`}>
                 {group.title}
@@ -539,16 +539,16 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
                 content.push(optionContent);
             }
         });
-        return <div className={`${prefixcls}-left-list`} role="list" aria-label="Option list">{content}</div>;
+        return <div className={`${prefixCls}-left-list`} role="list" aria-label="Option list">{content}</div>;
     }
 
     renderRightItem(item: ResolvedDataItem): React.ReactNode {
         const { renderSelectedItem, draggable, type, showPath } = this.props;
         const onRemove = () => this.foundation.handleSelectOrRemove(item);
         const rightItemCls = cls({
-            [`${prefixcls}-item`]: true,
-            [`${prefixcls}-right-item`]: true,
-            [`${prefixcls}-right-item-draggable`]: draggable
+            [`${prefixCls}-item`]: true,
+            [`${prefixCls}-right-item`]: true,
+            [`${prefixCls}-right-item-draggable`]: draggable
         });
         const shouldShowPath = type === strings.TYPE_TREE_TO_LIST && showPath === true;
 
@@ -559,19 +559,19 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         }
 
         const DragHandle = SortableHandle(() => (
-            <IconHandle role="button" aria-label="Drag and sort" className={`${prefixcls}-right-item-drag-handler`} />
+            <IconHandle role="button" aria-label="Drag and sort" className={`${prefixCls}-right-item-drag-handler`} />
         ));
 
         return (
             // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
             <div role="listitem" className={rightItemCls} key={item.key}>
                 {draggable ? <DragHandle /> : null}
-                <div className={`${prefixcls}-right-item-text`}>{label}</div>
+                <div className={`${prefixCls}-right-item-text`}>{label}</div>
                 <IconClose
                     onClick={onRemove}
                     aria-disabled={item.disabled}
-                    className={cls(`${prefixcls}-item-close-icon`, {
-                        [`${prefixcls}-item-close-icon-disabled`]: item.disabled
+                    className={cls(`${prefixCls}-item-close-icon`, {
+                        [`${prefixCls}-item-close-icon-disabled`]: item.disabled
                     })}
                 />
             </div>
@@ -580,9 +580,9 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
 
     renderEmpty(type: string, emptyText: React.ReactNode) {
         const emptyCls = cls({
-            [`${prefixcls}-empty`]: true,
-            [`${prefixcls}-right-empty`]: type === 'right',
-            [`${prefixcls}-left-empty`]: type === 'left',
+            [`${prefixCls}-empty`]: true,
+            [`${prefixCls}-right-empty`]: type === 'right',
+            [`${prefixCls}-left-empty`]: type === 'left',
         });
         return <div aria-label="empty" className={emptyCls}>{emptyText}</div>;
     }
@@ -595,7 +595,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
 
         // helperClass：add styles to the helper(item being dragged) https://github.com/clauderic/react-sortable-hoc/issues/87
         // @ts-ignore skip SortableItem type check
-        const sortList = <SortableList useDragHandle helperClass={`${prefixcls}-right-item-drag-item-move`} onSortEnd={this.onSortEnd} items={sortableListItems} />;
+        const sortList = <SortableList useDragHandle helperClass={`${prefixCls}-right-item-drag-item-move`} onSortEnd={this.onSortEnd} items={sortableListItems} />;
         return sortList;
     }
 
@@ -626,7 +626,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
         };
         const headerCom = this.renderHeader(headerConfig);
         const emptyCom = this.renderEmpty('right', emptyContent.right ? emptyContent.right : locale.emptyRight);
-        const panelCls = `${prefixcls}-right`;
+        const panelCls = `${prefixCls}-right`;
 
         let content = null;
 
@@ -637,7 +637,7 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
                 break;
             case selectedData.length && !draggable:
                 const list = (
-                    <div className={`${prefixcls}-right-list`} role="list" aria-label="Selected list">
+                    <div className={`${prefixCls}-right-list`} role="list" aria-label="Selected list">
                         {selectedData.map(item => this.renderRightItem({ ...item }))}
                     </div>
                 );
@@ -660,9 +660,9 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
 
     render() {
         const { className, style, disabled, renderSelectedPanel, renderSourcePanel } = this.props;
-        const transferCls = cls(prefixcls, className, {
-            [`${prefixcls}-disabled`]: disabled,
-            [`${prefixcls}-custom-panel`]: renderSelectedPanel && renderSourcePanel,
+        const transferCls = cls(prefixCls, className, {
+            [`${prefixCls}-disabled`]: disabled,
+            [`${prefixCls}-custom-panel`]: renderSelectedPanel && renderSourcePanel,
         });
 
         return (