tree-select/examples/custom-icons.js at bfd511ec21642f1ad38f620465b0cffa1d0ab22f · react-component/tree-select · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/* eslint react/no-multi-comp:0, no-console:0, no-alert: 0 */

import 'rc-tree-select/assets/index.less';
import React from 'react';
import 'rc-dialog/assets/index.css';
import TreeSelect from 'rc-tree-select';
import { gData } from './util';
import './demo.less';

const bubblePath =
  'M632 888H392c-4.4 0-8 3.6-8 8v32c0 ' +
  '17.7 14.3 32 32 32h192c17.7 0 32-14.3 32-32v-3' +
  '2c0-4.4-3.6-8-8-8zM512 64c-181.1 0-328 146.9-3' +
  '28 328 0 121.4 66 227.4 164 284.1V792c0 17.7 1' +
  '4.3 32 32 32h264c17.7 0 32-14.3 32-32V676.1c98' +
  '-56.7 164-162.7 164-284.1 0-181.1-146.9-328-32' +
  '8-328z m127.9 549.8L604 634.6V752H420V634.6l-3' +
  '5.9-20.8C305.4 568.3 256 484.5 256 392c0-141.4' +
  ' 114.6-256 256-256s256 114.6 256 256c0 92.5-49' +
  '.4 176.3-128.1 221.8z';

const clearPath =
  'M793 242H366v-74c0-6.7-7.7-10.4-12.9' +
  '-6.3l-142 112c-4.1 3.2-4.1 9.4 0 12.6l142 112c' +
  '5.2 4.1 12.9 0.4 12.9-6.3v-74h415v470H175c-4.4' +
  ' 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-' +
  '28.7 64-64V306c0-35.3-28.7-64-64-64z';

const arrowPath =
  'M765.7 486.8L314.9 134.7c-5.3-4.1' +
  '-12.9-0.4-12.9 6.3v77.3c0 4.9 2.3 9.6 6.1 12.6l36' +
  '0 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.1c16.4-12.8 16.4-3' +
  '7.6 0-50.4z';

const getSvg = (path, iStyle = {}, style = {}) => {
  return (
    <i style={iStyle}>
      <svg
        viewBox="0 0 1024 1024"
        width="1em"
        height="1em"
        fill="currentColor"
        style={{ verticalAlign: '-.125em', ...style }}
      >
        <path d={path} />
      </svg>
    </i>
  );
};

const switcherIcon = obj => {
  if (obj.isLeaf) {
    return getSvg(
      arrowPath,
      { cursor: 'pointer', backgroundColor: 'white' },
      { transform: 'rotate(270deg)' },
    );
  }
  return getSvg(
    arrowPath,
    { cursor: 'pointer', backgroundColor: 'white' },
    { transform: `rotate(${obj.expanded ? 90 : 0}deg)` },
  );
};

const inputIcon = getSvg(bubblePath);
const clearIcon = getSvg(clearPath);
const removeIcon = getSvg(clearPath);

const iconProps = {
  inputIcon,
  clearIcon,
  removeIcon,
  switcherIcon,
};

const iconPropsFunction = {
  inputIcon: () => inputIcon,
  clearIcon: () => clearIcon,
  removeIcon: () => removeIcon,
  switcherIcon,
};

function Demo() {
  return (
    <div className="custom-icon-demo">
      <h2>Single</h2>
      <TreeSelect
        treeData={gData}
        placeholder={<span>Please Select</span>}
        transitionName="rc-tree-select-dropdown-slide-up"
        style={{ width: 300 }}
        dropdownStyle={{ maxHeight: 200, overflow: 'auto', zIndex: 1500 }}
        showSearch
        allowClear
        {...iconProps}
      />
      <br />
      <h2>Multiple</h2>
      <TreeSelect
        treeData={gData}
        multiple
        placeholder={<span>Please Select</span>}
        transitionName="rc-tree-select-dropdown-slide-up"
        style={{ width: 300 }}
        dropdownStyle={{ maxHeight: 200, overflow: 'auto', zIndex: 1500 }}
        showSearch
        allowClear
        {...iconPropsFunction}
      />
    </div>
  );
}

export default () => <Demo />;