Adding a custom renderer for tags (#445)

fguitton · zombieJ · web-flow · commit ec849bd1fc96 · 2020-02-03T10:20:09.000+08:00
* Adding a custom Renderer for tags * Adding Readme description * Passing over CSSMotionList properties to enable proper refresh * Flattening getTagCloseProps into separate closable and closeTag * Addressing variable rename from #445 (comment) * Update Tags.test.tsx Co-authored-by: 二货机器人 <smith3816@gmail.com>
diff --git a/README.md b/README.md
@@ -84,6 +84,7 @@ React.render(c, container);
 |showArrow | whether show arrow | bool | true (single mode), false (multiple mode) |
 |allowClear | whether allowClear | bool | false |
 |tags | when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | bool | false |
+|tagRender | render custom tags. | (props: CustomTagProps) => ReactNode | - |
 |maxTagTextLength | max tag text length to show | number | - |
 |maxTagCount | max tag count to show | number | - |
 |maxTagPlaceholder | placeholder for omitted values | ReactNode/function(omittedValues) | - |
diff --git a/examples/custom-tags.tsx b/examples/custom-tags.tsx
@@ -0,0 +1,102 @@
+/* eslint-disable no-console */
+import React from 'react';
+import Select, { Option } from '../src';
+import '../assets/index.less';
+import { CustomTagProps } from '../src/interface/generator';
+
+const children = [];
+for (let i = 10; i < 36; i += 1) {
+  children.push(
+    <Option key={i.toString(36) + i} test={i}>
+      {i.toString(36) + i}
+    </Option>,
+  );
+}
+
+const Test: React.FC = () => {
+  const [disabled, setDisabled] = React.useState(false);
+  const [value, setValue] = React.useState<string[]>(['name2', '42', 'name3']);
+  const [maxTagCount, setMaxTagCount] = React.useState<number>(null);
+
+  const toggleMaxTagCount = (count: number) => {
+    setMaxTagCount(count);
+  };
+
+  const tagRender = (props: CustomTagProps) => {
+    const { label, closable, onClose } = props;
+    let style: React.CSSProperties;
+    if (parseInt(label as string, 10)) {
+      style = { backgroundColor: 'blue' };
+    } else if (!closable) {
+      style = { backgroundColor: 'white' };
+    } else {
+      style = { backgroundColor: 'red' };
+    }
+    return (
+      <span style={style}>
+        {label}
+        {closable ? (
+          <button type="button" onClick={onClose}>
+            x
+          </button>
+        ) : null}
+      </span>
+    );
+  };
+
+  return (
+    <div>
+      <h2>tags select with custom renderer（scroll the menu）</h2>
+
+      <div>
+        <Select
+          placeholder="placeholder"
+          mode="tags"
+          style={{ width: 500 }}
+          disabled={disabled}
+          maxTagCount={maxTagCount}
+          maxTagTextLength={10}
+          value={value}
+          onChange={(val: string[], option) => {
+            console.log('change:', val, option);
+            setValue(val);
+          }}
+          onSelect={(val, option) => {
+            console.log('selected', val, option);
+          }}
+          onDeselect={(val, option) => {
+            console.log('deselected', val, option);
+          }}
+          tokenSeparators={[',']}
+          tagRender={tagRender}
+          onFocus={() => console.log('focus')}
+          onBlur={() => console.log('blur')}
+        >
+          {children}
+        </Select>
+      </div>
+      <p>
+        <button
+          type="button"
+          onClick={() => {
+            setDisabled(!disabled);
+          }}
+        >
+          toggle disabled
+        </button>
+        <button type="button" onClick={() => toggleMaxTagCount(0)}>
+          toggle maxTagCount (0)
+        </button>
+        <button type="button" onClick={() => toggleMaxTagCount(1)}>
+          toggle maxTagCount (1)
+        </button>
+        <button type="button" onClick={() => toggleMaxTagCount(null)}>
+          toggle maxTagCount (null)
+        </button>
+      </p>
+    </div>
+  );
+};
+
+export default Test;
+/* eslint-enable */
diff --git a/src/Selector/MultipleSelector.tsx b/src/Selector/MultipleSelector.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import classNames from 'classnames';
 import CSSMotionList from 'rc-animate/lib/CSSMotionList';
 import TransBtn from '../TransBtn';
-import { LabelValueType, RawValueType } from '../interface/generator';
+import {
+  LabelValueType,
+  RawValueType,
+  CustomTagProps,
+} from '../interface/generator';
 import { RenderNode } from '../interface';
 import { InnerSelectorProps } from '.';
 import Input from './Input';
@@ -17,8 +21,11 @@ interface SelectorProps extends InnerSelectorProps {
   // Tags
   maxTagCount?: number;
   maxTagTextLength?: number;
-  maxTagPlaceholder?: React.ReactNode | ((omittedValues: LabelValueType[]) => React.ReactNode);
+  maxTagPlaceholder?:
+    | React.ReactNode
+    | ((omittedValues: LabelValueType[]) => React.ReactNode);
   tokenSeparators?: string[];
+  tagRender?: (props: CustomTagProps) => React.ReactElement;
 
   // Motion
   choiceTransitionName?: string;
@@ -48,7 +55,9 @@ const SelectSelector: React.FC<SelectorProps> = ({
 
   maxTagCount,
   maxTagTextLength,
-  maxTagPlaceholder = (omittedValues: LabelValueType[]) => `+ ${omittedValues.length} ...`,
+  maxTagPlaceholder = (omittedValues: LabelValueType[]) =>
+    `+ ${omittedValues.length} ...`,
+  tagRender,
 
   onSelect,
   onInputChange,
@@ -122,27 +131,47 @@ const SelectSelector: React.FC<SelectorProps> = ({
     >
       {({ key, label, value, disabled: itemDisabled, className, style }) => {
         const mergedKey = key || value;
-
-        return (
+        const closable = key !== REST_TAG_KEY && !itemDisabled;
+        const onMouseDown = (event: React.MouseEvent) => {
+          event.preventDefault();
+          event.stopPropagation();
+        };
+        const onClose = (event?: React.MouseEvent) => {
+          if (event) event.stopPropagation();
+          onSelect(value, { selected: false });
+        };
+
+        return typeof tagRender === 'function' ? (
+          <span
+            key={mergedKey}
+            onMouseDown={onMouseDown}
+            className={className}
+            style={style}
+          >
+            {tagRender({
+              label,
+              value,
+              disabled: itemDisabled,
+              closable,
+              onClose,
+            })}
+          </span>
+        ) : (
           <span
             key={mergedKey}
             className={classNames(className, `${prefixCls}-selection-item`, {
               [`${prefixCls}-selection-item-disabled`]: itemDisabled,
             })}
             style={style}
           >
-            <span className={`${prefixCls}-selection-item-content`}>{label}</span>
-            {key !== REST_TAG_KEY && !itemDisabled && (
+            <span className={`${prefixCls}-selection-item-content`}>
+              {label}
+            </span>
+            {closable && (
               <TransBtn
                 className={`${prefixCls}-selection-item-remove`}
-                onMouseDown={event => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                }}
-                onClick={event => {
-                  event.stopPropagation();
-                  onSelect(value, { selected: false });
-                }}
+                onMouseDown={onMouseDown}
+                onClick={onClose}
                 customizeIcon={removeIcon}
               >
                 ×
@@ -158,7 +187,10 @@ const SelectSelector: React.FC<SelectorProps> = ({
     <>
       {selectionNode}
 
-      <span className={`${prefixCls}-selection-search`} style={{ width: inputWidth }}>
+      <span
+        className={`${prefixCls}-selection-search`}
+        style={{ width: inputWidth }}
+      >
         <Input
           ref={inputRef}
           open={open}
@@ -177,13 +209,19 @@ const SelectSelector: React.FC<SelectorProps> = ({
         />
 
         {/* Measure Node */}
-        <span ref={measureRef} className={`${prefixCls}-selection-search-mirror`} aria-hidden>
+        <span
+          ref={measureRef}
+          className={`${prefixCls}-selection-search-mirror`}
+          aria-hidden
+        >
           {searchValue}&nbsp;
         </span>
       </span>
 
       {!values.length && !searchValue && (
-        <span className={`${prefixCls}-selection-placeholder`}>{placeholder}</span>
+        <span className={`${prefixCls}-selection-placeholder`}>
+          {placeholder}
+        </span>
       )}
     </>
   );
diff --git a/src/Selector/index.tsx b/src/Selector/index.tsx
@@ -12,7 +12,11 @@ import * as React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import MultipleSelector from './MultipleSelector';
 import SingleSelector from './SingleSelector';
-import { LabelValueType, RawValueType } from '../interface/generator';
+import {
+  LabelValueType,
+  RawValueType,
+  CustomTagProps,
+} from '../interface/generator';
 import { RenderNode, Mode } from '../interface';
 import useLock from '../hooks/useLock';
 
@@ -74,6 +78,7 @@ export interface SelectorProps {
   maxTagPlaceholder?:
     | React.ReactNode
     | ((omittedValues: LabelValueType[]) => React.ReactNode);
+  tagRender?: (props: CustomTagProps) => React.ReactElement;
 
   // Motion
   choiceTransitionName?: string;
diff --git a/src/generate.tsx b/src/generate.tsx
@@ -28,6 +28,7 @@ import {
   OnClear,
   INTERNAL_PROPS_MARK,
   SelectSource,
+  CustomTagProps,
 } from './interface/generator';
 import { OptionListProps, RefOptionListProps } from './OptionList';
 import {
@@ -128,6 +129,7 @@ export interface SelectProps<OptionsType extends object[], ValueType>
     | React.ReactNode
     | ((omittedValues: LabelValueType[]) => React.ReactNode);
   tokenSeparators?: string[];
+  tagRender?: (props: CustomTagProps) => React.ReactElement;
   showAction?: ('focus' | 'click')[];
   tabIndex?: number;
 
@@ -307,6 +309,7 @@ export default function generateSelector<
 
       // Tags
       tokenSeparators,
+      tagRender,
 
       // Events
       onPopupScroll,
@@ -1049,6 +1052,7 @@ export default function generateSelector<
             mode={mode}
             accessibilityIndex={accessibilityIndex}
             multiple={isMultiple}
+            tagRender={tagRender}
             values={displayValues}
             open={mergedOpen}
             onToggleOpen={onToggleOpen}
diff --git a/src/interface/generator.ts b/src/interface/generator.ts
@@ -14,16 +14,30 @@ export interface LabelValueType {
   value?: RawValueType;
   label?: React.ReactNode;
 }
-export type DefaultValueType = RawValueType | RawValueType[] | LabelValueType | LabelValueType[];
+export type DefaultValueType =
+  | RawValueType
+  | RawValueType[]
+  | LabelValueType
+  | LabelValueType[];
 
 export interface DisplayLabelValueType extends LabelValueType {
   disabled?: boolean;
 }
 
-export type SingleType<MixType> = MixType extends (infer Single)[] ? Single : MixType;
+export type SingleType<MixType> = MixType extends (infer Single)[]
+  ? Single
+  : MixType;
 
 export type OnClear = () => void;
 
+export type CustomTagProps = {
+  label: DefaultValueType;
+  value: DefaultValueType;
+  disabled: boolean;
+  onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  closable: boolean;
+};
+
 // ==================================== Generator ====================================
 export type GetLabeledValue<FOT extends FlattenOptionsType> = (
   value: RawValueType,
@@ -39,15 +53,25 @@ export type FilterOptions<OptionsType extends object[]> = (
   searchValue: string,
   options: OptionsType,
   /** Component props, since Select & TreeSelect use different prop name, use any here */
-  config: { optionFilterProp: string; filterOption: boolean | FilterFunc<OptionsType[number]> },
+  config: {
+    optionFilterProp: string;
+    filterOption: boolean | FilterFunc<OptionsType[number]>;
+  },
 ) => OptionsType;
 
-export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
+export type FilterFunc<OptionType> = (
+  inputValue: string,
+  option?: OptionType,
+) => boolean;
 
 export declare function RefSelectFunc<OptionsType extends object[], ValueType>(
-  Component: React.RefForwardingComponent<RefSelectProps, SelectProps<OptionsType, ValueType>>,
+  Component: React.RefForwardingComponent<
+    RefSelectProps,
+    SelectProps<OptionsType, ValueType>
+  >,
 ): React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<SelectProps<OptionsType, ValueType>> & React.RefAttributes<RefSelectProps>
+  React.PropsWithoutRef<SelectProps<OptionsType, ValueType>> &
+    React.RefAttributes<RefSelectProps>
 >;
 
 export type FlattenOptionsType<OptionsType extends object[] = object[]> = {
diff --git a/tests/Tags.test.tsx b/tests/Tags.test.tsx
