ant-design/components/transfer/__tests__/__snapshots__/index.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Transfer should render correctly 1`] = `
<div
  class="ant-transfer"
>
  <div
    class="ant-transfer-list"
  >
    <div
      class="ant-transfer-list-header"
    >
      <label
        class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
      >
        <span
          class="ant-checkbox ant-checkbox-checked"
        >
          <input
            checked=""
            class="ant-checkbox-input"
            type="checkbox"
          />
          <span
            class="ant-checkbox-inner"
          />
        </span>
      </label>
      <span
        class="ant-transfer-list-header-selected"
      >
        <span>
          1/2 items
        </span>
        <span
          class="ant-transfer-list-header-title"
        />
      </span>
    </div>
    <div
      class="ant-transfer-list-body"
    >
      <ul
        class="ant-transfer-list-content"
      >
        <li
          class="ant-transfer-list-content-item ant-transfer-list-content-item-checked"
        >
          <label
            class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
          >
            <span
              class="ant-checkbox ant-checkbox-checked"
            >
              <input
                checked=""
                class="ant-checkbox-input"
                type="checkbox"
              />
              <span
                class="ant-checkbox-inner"
              />
            </span>
          </label>
          <span
            class="ant-transfer-list-content-item-text"
          />
        </li>
        <li
          class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"
        >
          <label
            class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
          >
            <span
              class="ant-checkbox ant-checkbox-disabled"
            >
              <input
                class="ant-checkbox-input"
                disabled=""
                type="checkbox"
              />
              <span
                class="ant-checkbox-inner"
              />
            </span>
          </label>
          <span
            class="ant-transfer-list-content-item-text"
          />
        </li>
      </ul>
    </div>
  </div>
  <div
    class="ant-transfer-operation"
  >
    <button
      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
      type="button"
    >
      <span
        aria-label="right"
        class="anticon anticon-right"
        role="img"
      >
        <svg
          aria-hidden="true"
          class=""
          data-icon="right"
          fill="currentColor"
          focusable="false"
          height="1em"
          viewBox="64 64 896 896"
          width="1em"
        >
          <path
            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
          />
        </svg>
      </span>
    </button>
    <button
      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
      disabled=""
      type="button"
    >
      <span
        aria-label="left"
        class="anticon anticon-left"
        role="img"
      >
        <svg
          aria-hidden="true"
          class=""
          data-icon="left"
          fill="currentColor"
          focusable="false"
          height="1em"
          viewBox="64 64 896 896"
          width="1em"
        >
          <path
            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
          />
        </svg>
      </span>
    </button>
  </div>
  <div
    class="ant-transfer-list"
  >
    <div
      class="ant-transfer-list-header"
    >
      <label
        class="ant-checkbox-wrapper"
      >
        <span
          class="ant-checkbox"
        >
          <input
            class="ant-checkbox-input"
            type="checkbox"
          />
          <span
            class="ant-checkbox-inner"
          />
        </span>
      </label>
      <span
        class="ant-transfer-list-header-selected"
      >
        <span>
          1 item
        </span>
        <span
          class="ant-transfer-list-header-title"
        />
      </span>
    </div>
    <div
      class="ant-transfer-list-body"
    >
      <ul
        class="ant-transfer-list-content"
      >
        <li
          class="ant-transfer-list-content-item"
        >
          <label
            class="ant-checkbox-wrapper"
          >
            <span
              class="ant-checkbox"
            >
              <input
                class="ant-checkbox-input"
                type="checkbox"
              />
              <span
                class="ant-checkbox-inner"
              />
            </span>
          </label>
          <span
            class="ant-transfer-list-content-item-text"
          />
        </li>
      </ul>
    </div>
  </div>
</div>
`;

exports[`Transfer should show sorted targetkey 1`] = `
<div
  class="ant-transfer"
>
  <div
    class="ant-transfer-list"
  >
    <div
      class="ant-transfer-list-header"
    >
      <label
        class="ant-checkbox-wrapper"
      >
        <span
          class="ant-checkbox"
        >
          <input
            class="ant-checkbox-input"
            type="checkbox"
          />
          <span
            class="ant-checkbox-inner"
          />
        </span>
      </label>
      <span
        class="ant-transfer-list-header-selected"
      >
        <span>
          1 item
        </span>
        <span
          class="ant-transfer-list-header-title"
        />
      </span>
    </div>
    <div
      class="ant-transfer-list-body"
    >
      <ul
        class="ant-transfer-list-content"
      >
        <li
          class="ant-transfer-list-content-item"
          title="a"
        >
          <label
            class="ant-checkbox-wrapper"
          >
            <span
              class="ant-checkbox"
            >
              <input
                class="ant-checkbox-input"
                type="checkbox"
              />
              <span
                class="ant-checkbox-inner"
              />
            </span>
          </label>
          <span
            class="ant-transfer-list-content-item-text"
          >
            a
          </span>
        </li>
      </ul>
    </div>
  </div>
  <div
    class="ant-transfer-operation"
  >
    <button
      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
      disabled=""
      type="button"
    >
      <span
        aria-label="right"
        class="anticon anticon-right"
        role="img"
      >
        <svg
          aria-hidden="true"
          class=""
          data-icon="right"
          fill="currentColor"
          focusable="false"
          height="1em"
          viewBox="64 64 896 896"
          width="1em"
        >
          <path
            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
          />
        </svg>
      </span>
    </button>
    <button
      class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
      disabled=""
      type="button"
    >
      <span
        aria-label="left"
        class="anticon anticon-left"
        role="img"
      >
        <svg
          aria-hidden="true"
          class=""
          data-icon="left"
          fill="currentColor"
          focusable="false"
          height="1em"
          viewBox="64 64 896 896"
          width="1em"
        >
          <path
            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
          />
        </svg>
      </span>
    </button>
  </div>
  <div
    class="ant-transfer-list"
  >
    <div
      class="ant-transfer-list-header"
    >
      <label
        class="ant-checkbox-wrapper"
      >
        <span
          class="ant-checkbox"
        >
          <input
            class="ant-checkbox-input"
            type="checkbox"
          />
          <span
            class="ant-checkbox-inner"
          />
        </span>
      </label>
      <span
        class="ant-transfer-list-header-selected"
      >
        <span>
          2 items
        </span>
        <span
          class="ant-transfer-list-header-title"
        />
      </span>
    </div>
    <div
      class="ant-transfer-list-body"
    >
      <ul
        class="ant-transfer-list-content"
      >
        <li
          class="ant-transfer-list-content-item"
          title="c"
        >
          <label
            class="ant-checkbox-wrapper"
          >
            <span
              class="ant-checkbox"
            >
              <input
                class="ant-checkbox-input"
                type="checkbox"
              />
              <span
                class="ant-checkbox-inner"
              />
            </span>
          </label>
          <span
            class="ant-transfer-list-content-item-text"
          >
            c
          </span>
        </li>
        <li
          class="ant-transfer-list-content-item"
          title="b"
        >
          <label
            class="ant-checkbox-wrapper"
          >
            <span
              class="ant-checkbox"
            >
              <input
                class="ant-checkbox-input"
                type="checkbox"
              />
              <span
                class="ant-checkbox-inner"
              />
            </span>
          </label>
          <span
            class="ant-transfer-list-content-item-text"
          >
            b
          </span>
        </li>
      </ul>
    </div>
  </div>
</div>
`;

exports[`Transfer should support render value and label in item 1`] = `
<Transfer
  dataSource={
    Array [
      Object {
        "key": "a",
        "title": "title",
      },
    ]
  }
  listStyle={[Function]}
  locale={Object {}}
  render={[Function]}
  showSearch={false}
>
  <LocaleReceiver
    componentName="Transfer"
    defaultLocale={
      Object {
        "itemUnit": "item",
        "itemsUnit": "items",
        "searchPlaceholder": "Search here",
        "titles": Array [
          "",
          "",
        ],
      }
    }
  >
    <div
      className="ant-transfer"
    >
      <TransferList
        checkedKeys={Array []}
        dataSource={
          Array [
            Object {
              "key": "a",
              "title": "title",
            },
          ]
        }
        direction="left"
        handleClear={[Function]}
        handleFilter={[Function]}
        itemUnit="item"
        itemsUnit="items"
        notFoundContent={
          <Context.Consumer>
            [Function]
          </Context.Consumer>
        }
        onItemSelect={[Function]}
        onItemSelectAll={[Function]}
        onScroll={[Function]}
        prefixCls="ant-transfer-list"
        render={[Function]}
        searchPlaceholder="Search here"
        showSearch={false}
        titleText=""
        titles={
          Array [
            "",
            "",
          ]
        }
      >
        <div
          className="ant-transfer-list"
        >
          <div
            className="ant-transfer-list-header"
          >
            <Checkbox
              checked={false}
              indeterminate={false}
              onChange={[Function]}
            >
              <label
                className="ant-checkbox-wrapper"
              >
                <Checkbox
                  checked={false}
                  className=""
                  defaultChecked={false}
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  prefixCls="ant-checkbox"
                  style={Object {}}
                  type="checkbox"
                >
                  <span
                    className="ant-checkbox"
                    style={Object {}}
                  >
                    <input
                      checked={false}
                      className="ant-checkbox-input"
                      onBlur={[Function]}
                      onChange={[Function]}
                      onFocus={[Function]}
                      type="checkbox"
                    />
                    <span
                      className="ant-checkbox-inner"
                    />
                  </span>
                </Checkbox>
              </label>
            </Checkbox>
            <span
              className="ant-transfer-list-header-selected"
            >
              <span>
                1
                 
                item
              </span>
              <span
                className="ant-transfer-list-header-title"
              />
            </span>
          </div>
          <div
            className="ant-transfer-list-body"
          >
            <ListBody
              dataSource={
                Array [
                  Object {
                    "key": "a",
                    "title": "title",
                  },
                ]
              }
              direction="left"
              filteredItems={
                Array [
                  Object {
                    "key": "a",
                    "title": "title",
                  },
                ]
              }
              filteredRenderItems={
                Array [
                  Object {
                    "item": Object {
                      "key": "a",
                      "title": "title",
                    },
                    "renderedEl": "label",
                    "renderedText": "title value",
                  },
                ]
              }
              itemUnit="item"
              itemsUnit="items"
              notFoundContent={
                <Context.Consumer>
                  [Function]
                </Context.Consumer>
              }
              onItemSelect={[Function]}
              onItemSelectAll={[Function]}
              onScroll={[Function]}
              prefixCls="ant-transfer-list"
              render={[Function]}
              searchPlaceholder="Search here"
              selectedKeys={Array []}
              showSearch={false}
              titleText=""
              titles={
                Array [
                  "",
                  "",
                ]
              }
            >
              <ul
                className="ant-transfer-list-content"
                onScroll={[Function]}
              >
                <ListItem
                  checked={false}
                  item={
                    Object {
                      "key": "a",
                      "title": "title",
                    }
                  }
                  key="a"
                  onClick={[Function]}
                  prefixCls="ant-transfer-list"
                  renderedEl="label"
                  renderedText="title value"
                >
                  <li
                    className="ant-transfer-list-content-item"
                    onClick={[Function]}
                    title="title value"
                  >
                    <Checkbox
                      checked={false}
                      indeterminate={false}
                    >
                      <label
                        className="ant-checkbox-wrapper"
                      >
                        <Checkbox
                          checked={false}
                          className=""
                          defaultChecked={false}
                          onBlur={[Function]}
                          onChange={[Function]}
                          onFocus={[Function]}
                          prefixCls="ant-checkbox"
                          style={Object {}}
                          type="checkbox"
                        >
                          <span
                            className="ant-checkbox"
                            style={Object {}}
                          >
                            <input
                              checked={false}
                              className="ant-checkbox-input"
                              onBlur={[Function]}
                              onChange={[Function]}
                              onFocus={[Function]}
                              type="checkbox"
                            />
                            <span
                              className="ant-checkbox-inner"
                            />
                          </span>
                        </Checkbox>
                      </label>
                    </Checkbox>
                    <span
                      className="ant-transfer-list-content-item-text"
                    >
                      label
                    </span>
                  </li>
                </ListItem>
              </ul>
            </ListBody>
          </div>
        </div>
      </TransferList>
      <Operation
        className="ant-transfer-operation"
        leftActive={false}
        moveToLeft={[Function]}
        moveToRight={[Function]}
        rightActive={false}
      >
        <div
          className="ant-transfer-operation"
        >
          <Button
            block={false}
            disabled={true}
            ghost={false}
            htmlType="button"
            icon={<ForwardRef(RightOutlined) />}
            loading={false}
            onClick={[Function]}
            size="small"
            type="primary"
          >
            <Wave>
              <button
                className="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
                disabled={true}
                onClick={[Function]}
                type="button"
              >
                <ForwardRef(RightOutlined)>
                  <ForwardRef(AntdIcon)
                    icon={
                      Object {
                        "icon": Object {
                          "attrs": Object {
                            "focusable": "false",
                            "viewBox": "64 64 896 896",
                          },
                          "children": Array [
                            Object {
                              "attrs": Object {
                                "d": "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z",
                              },
                              "tag": "path",
                            },
                          ],
                          "tag": "svg",
                        },
                        "name": "right",
                        "theme": "outlined",
                      }
                    }
                  >
                    <span
                      aria-label="right"
                      className="anticon anticon-right"
                      role="img"
                    >
                      <IconReact
                        className=""
                        icon={
                          Object {
                            "icon": Object {
                              "attrs": Object {
                                "focusable": "false",
                                "viewBox": "64 64 896 896",
                              },
                              "children": Array [
                                Object {
                                  "attrs": Object {
                                    "d": "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z",
                                  },
                                  "tag": "path",
                                },
                              ],
                              "tag": "svg",
                            },
                            "name": "right",
                            "theme": "outlined",
                          }
                        }
                      >
                        <svg
                          aria-hidden="true"
                          className=""
                          data-icon="right"
                          fill="currentColor"
                          focusable="false"
                          height="1em"
                          key="svg-right"
                          viewBox="64 64 896 896"
                          width="1em"
                        >
                          <path
                            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
                            key="svg-right-svg-0"
                          />
                        </svg>
                      </IconReact>
                    </span>
                  </ForwardRef(AntdIcon)>
                </ForwardRef(RightOutlined)>
              </button>
            </Wave>
          </Button>
          <Button
            block={false}
            disabled={true}
            ghost={false}
            htmlType="button"
            icon={<ForwardRef(LeftOutlined) />}
            loading={false}
            onClick={[Function]}
            size="small"
            type="primary"
          >
            <Wave>
              <button
                className="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
                disabled={true}
                onClick={[Function]}
                type="button"
              >
                <ForwardRef(LeftOutlined)>
                  <ForwardRef(AntdIcon)
                    icon={
                      Object {
                        "icon": Object {
                          "attrs": Object {
                            "focusable": "false",
                            "viewBox": "64 64 896 896",
                          },
                          "children": Array [
                            Object {
                              "attrs": Object {
                                "d": "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z",
                              },
                              "tag": "path",
                            },
                          ],
                          "tag": "svg",
                        },
                        "name": "left",
                        "theme": "outlined",
                      }
                    }
                  >
                    <span
                      aria-label="left"
                      className="anticon anticon-left"
                      role="img"
                    >
                      <IconReact
                        className=""
                        icon={
                          Object {
                            "icon": Object {
                              "attrs": Object {
                                "focusable": "false",
                                "viewBox": "64 64 896 896",
                              },
                              "children": Array [
                                Object {
                                  "attrs": Object {
                                    "d": "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z",
                                  },
                                  "tag": "path",
                                },
                              ],
                              "tag": "svg",
                            },
                            "name": "left",
                            "theme": "outlined",
                          }
                        }
                      >
                        <svg
                          aria-hidden="true"
                          className=""
                          data-icon="left"
                          fill="currentColor"
                          focusable="false"
                          height="1em"
                          key="svg-left"
                          viewBox="64 64 896 896"
                          width="1em"
                        >
                          <path
                            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
                            key="svg-left-svg-0"
                          />
                        </svg>
                      </IconReact>
                    </span>
                  </ForwardRef(AntdIcon)>
                </ForwardRef(LeftOutlined)>
              </button>
            </Wave>
          </Button>
        </div>
      </Operation>
      <TransferList
        checkedKeys={Array []}
        dataSource={Array []}
        direction="right"
        handleClear={[Function]}
        handleFilter={[Function]}
        itemUnit="item"
        itemsUnit="items"
        notFoundContent={
          <Context.Consumer>
            [Function]
          </Context.Consumer>
        }
        onItemSelect={[Function]}
        onItemSelectAll={[Function]}
        onScroll={[Function]}
        prefixCls="ant-transfer-list"
        render={[Function]}
        searchPlaceholder="Search here"
        showSearch={false}
        titleText=""
        titles={
          Array [
            "",
            "",
          ]
        }
      >
        <div
          className="ant-transfer-list"
        >
          <div
            className="ant-transfer-list-header"
          >
            <Checkbox
              checked={false}
              indeterminate={false}
              onChange={[Function]}
            >
              <label
                className="ant-checkbox-wrapper"
              >
                <Checkbox
                  checked={false}
                  className=""
                  defaultChecked={false}
                  onBlur={[Function]}
                  onChange={[Function]}
                  onFocus={[Function]}
                  prefixCls="ant-checkbox"
                  style={Object {}}
                  type="checkbox"
                >
                  <span
                    className="ant-checkbox"
                    style={Object {}}
                  >
                    <input
                      checked={false}
                      className="ant-checkbox-input"
                      onBlur={[Function]}
                      onChange={[Function]}
                      onFocus={[Function]}
                      type="checkbox"
                    />
                    <span
                      className="ant-checkbox-inner"
                    />
                  </span>
                </Checkbox>
              </label>
            </Checkbox>
            <span
              className="ant-transfer-list-header-selected"
            >
              <span>
                0
                 
                item
              </span>
              <span
                className="ant-transfer-list-header-title"
              />
            </span>
          </div>
          <div
            className="ant-transfer-list-body"
          >
            <div
              className="ant-transfer-list-body-not-found"
            >
              <Empty
                className="ant-empty-small"
                image={<Simple />}
              >
                <LocaleReceiver
                  componentName="Empty"
                >
                  <div
                    className="ant-empty ant-empty-normal ant-empty-small"
                  >
                    <div
                      className="ant-empty-image"
                    >
                      <Simple>
                        <svg
                          className="ant-empty-img-simple"
                          height="41"
                          viewBox="0 0 64 41"
                          width="64"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g
                            fill="none"
                            fillRule="evenodd"
                            transform="translate(0 1)"
                          >
                            <ellipse
                              className="ant-empty-img-simple-ellipse"
                              cx="32"
                              cy="33"
                              rx="32"
                              ry="7"
                            />
                            <g
                              className="ant-empty-img-simple-g"
                              fillRule="nonzero"
                            >
                              <path
                                d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
                              />
                              <path
                                className="ant-empty-img-simple-path"
                                d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                              />
                            </g>
                          </g>
                        </svg>
                      </Simple>
                    </div>
                    <p
                      className="ant-empty-description"
                    >
                      No Data
                    </p>
                  </div>
                </LocaleReceiver>
              </Empty>
            </div>
          </div>
        </div>
      </TransferList>
    </div>
  </LocaleReceiver>
</Transfer>
`;