dtable-ui-component 6.0.125-vjs.2 → 6.0.125-vks.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/DTableCustomizeSelect/index.css +6 -0
  2. package/lib/DTableCustomizeSelect/select-option-group/index.css +0 -1
  3. package/lib/DTableSelect/utils.js +73 -80
  4. package/package.json +1 -1
package/lib/DTableCustomizeSelect/index.css CHANGED
@@ -101,6 +101,12 @@
101
101
  margin-right: 8px;
102
102
  width: calc(100% - 20px);
103
103
  white-space: nowrap;
104
+ text-overflow: ellipsis;
105
+ overflow: hidden;
106
+ }
107
+
108
+ .seatable-customize-select .selected-option .multicolor-icon {
109
+ font-size: 12px;
104
110
  }
105
111
 
106
112
  .seatable-customize-select .multiple-check-icon,
package/lib/DTableCustomizeSelect/select-option-group/index.css CHANGED
@@ -18,7 +18,6 @@
18
18
  position: relative;
19
19
  padding: 0;
20
20
  height: 32px;
21
- border-bottom: 1px solid var(--bs-border-color);
22
21
  }
23
22
 
24
23
  .seatable-option-group .seatable-option-group-search .form-control {
package/lib/DTableSelect/utils.js CHANGED
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.processOptionsWithClear = exports.handleSelectChange = exports.createHandleChange = exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
7
+ exports.processOptionsWithClear = exports.handleSelectChange = exports.createHandleChange = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
8
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
9
9
  var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
10
10
  var _react = _interopRequireDefault(require("react"));
@@ -12,24 +12,36 @@ var _reactSelect = require("react-select");
12
12
  var _jsxRuntime = require("react/jsx-runtime");
13
13
  const _excluded = ["innerProps"]; // DtableSelect is based on seatable-ui.css, so use the following content to override the default react-select style
14
14
  const DEFAULT_CONTROL_STYLE = {
15
- border: '1px solid rgba(0, 40, 100, 0.12) !important'
15
+ fontSize: '14px',
16
+ padding: '0 4px',
17
+ border: '1px solid var(--bs-border-color) !important',
18
+ boxShadow: 'none',
19
+ backgroundColor: 'var(--bs-popover-bg)',
20
+ borderRadius: '4px',
21
+ outline: '0'
16
22
  };
17
23
  const FOCUS_CONTROL_STYLE = {
18
24
  fontSize: '14px',
19
- backgroundColor: '#ffffff',
20
- borderColor: '#1991eb',
21
- outline: '0',
22
- boxShadow: '0 0 0 2px rgba(70, 127, 207, 0.25)'
25
+ padding: '0 4px',
26
+ border: '1px solid #3e84f7',
27
+ boxShadow: 'none',
28
+ backgroundColor: 'var(--bs-popover-bg)',
29
+ borderRadius: '4px',
30
+ outline: '0'
23
31
  };
24
- const noneCallback = () => ({
25
- display: 'none'
26
- });
27
32
  const controlCallback = (provided, state) => {
28
33
  const {
29
34
  isDisabled,
30
35
  isFocused
31
36
  } = state;
32
- if (isFocused && !isDisabled) {
37
+ if (isDisabled) {
38
+ return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DEFAULT_CONTROL_STYLE), {}, {
39
+ cursor: 'default',
40
+ backgroundColor: '#f5f5f5',
41
+ opacity: 0.65
42
+ });
43
+ }
44
+ if (isFocused) {
33
45
  return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE), {}, {
34
46
  '&:hover': (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE)
35
47
  });
@@ -42,97 +54,78 @@ const controlCallback = (provided, state) => {
42
54
  '&:hover': (0, _objectSpread2.default)({}, DEFAULT_CONTROL_STYLE)
43
55
  });
44
56
  };
45
- const UserSelectStyle = exports.UserSelectStyle = {
57
+ const MenuSelectStyle = exports.MenuSelectStyle = {
58
+ // .react-select__menu / react-select-2-listbox
59
+ menu: base => {
60
+ return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
61
+ padding: '4px 0 4px 8px',
62
+ backgroundColor: 'var(--bs-popover-bg)',
63
+ border: '1px solid var(--bs-border-secondary-color)',
64
+ borderRadius: '4px',
65
+ boxShadow: '0px 6px 14px rgba(0, 0, 0, 0.1)',
66
+ marginTop: '4px'
67
+ });
68
+ },
69
+ // .react-select__menu-list）
70
+ menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
71
+ paddingRight: '8px'
72
+ }),
46
73
  option: (provided, state) => {
47
74
  const {
48
75
  isDisabled,
49
76
  isFocused
50
77
  } = state;
51
78
  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
79
+ color: 'var(--bs-body-color)',
80
+ borderRadius: '4px',
81
+ minHeight: '32px',
82
+ padding: '6px 12px 6px 8px',
52
83
  cursor: isDisabled ? 'default' : 'pointer',
53
- backgroundColor: isFocused ? '#f5f5f5' : '#fff'
84
+ backgroundColor: isFocused ? 'var(--bs-hover-bg)' : 'var(--bs-popover-bg)'
54
85
  });
55
86
  },
56
87
  control: controlCallback,
57
- indicatorSeparator: noneCallback,
58
- dropdownIndicator: noneCallback,
59
- clearIndicator: noneCallback,
60
- multiValue: provided => {
61
- return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
62
- display: 'inline-flex',
63
- alignItems: 'center',
64
- background: '#eaeaea',
65
- borderRadius: '10px',
66
- margin: '0 10px 0 0',
67
- padding: '0 0 0 2px'
68
- });
69
- },
70
- multiValueLabel: provided => {
88
+ menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
89
+ zIndex: 9999,
90
+ backgroundColor: 'var(--bs-popover-bg)',
91
+ color: 'var(--bs-body-color)',
92
+ borderColor: 'var(--bs-border-secondary-color)'
93
+ }),
94
+ singleValue: provided => {
71
95
  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
72
- padding: '0px'
96
+ color: 'var(--bs-body-color)'
73
97
  });
74
98
  },
75
- multiValueRemove: provided => {
99
+ multiValue: provided => {
76
100
  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
77
- color: '#666',
78
- ':hover': {
79
- backgroundColor: 'transparent',
80
- color: '#555555'
81
- }
101
+ color: 'var(--bs-body-color)'
82
102
  });
83
103
  },
84
- singleValue: provided => {
85
- return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
86
- display: 'inline-flex',
87
- alignItems: 'center',
88
- background: '#eaeaea',
89
- borderRadius: '10px',
90
- margin: '0',
91
- padding: '0 2px',
92
- width: 'fit-content'
93
- });
94
- }
95
- };
96
- const MenuSelectStyle = exports.MenuSelectStyle = {
97
- option: (provided, state) => {
104
+ multiValueRemove: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
105
+ color: '#909090',
106
+ ':hover': {
107
+ backgroundColor: 'transparent',
108
+ color: 'var(--bs-icon-color)'
109
+ }
110
+ }),
111
+ input: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
112
+ color: 'var(--bs-body-color)'
113
+ }),
114
+ placeholder: (provided, state) => {
98
115
  const {
99
- isDisabled,
100
- isFocused
116
+ isDisabled
101
117
  } = state;
102
118
  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
103
- padding: '8px',
104
- fontSize: '14px',
105
- color: '#212529',
106
- cursor: isDisabled ? 'default' : 'pointer',
107
- backgroundColor: isFocused ? '#f5f5f5' : '#fff',
108
- borderRadius: '4px',
109
- ':active': {
110
- backgroundColor: '#f5f5f5'
111
- },
112
- '.header-icon .dtable-font': {
113
- color: '#999'
114
- },
115
- '.header-icon .multicolor-icon': {
116
- color: '#999'
117
- },
118
- '.seatable-ui-select-tip': {
119
- fontSize: '12px',
120
- color: '#666666'
121
- }
119
+ color: '#868e96',
120
+ opacity: isDisabled ? 0.65 : 1
122
121
  });
123
122
  },
124
- control: controlCallback,
125
- menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
126
- zIndex: 9999
127
- }),
128
- indicatorSeparator: noneCallback,
129
- menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
130
- padding: '8px'
131
- }),
132
- valueContainer: (provided, state) => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
133
- padding: '2px 8px 2px 16px'
134
- }),
135
- dropdownIndicator: (provided, state) => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
123
+ indicatorSeparator: (styles, state) => {
124
+ return {
125
+ 'display': 'none'
126
+ };
127
+ },
128
+ indicatorsContainer: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
136
129
  padding: 0
137
130
  })
138
131
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dtable-ui-component",
3
- "version": "6.0.125vjs.2",
3
+ "version": "6.0.125vks.1",
4
4
  "main": "./lib/index.js",
5
5
  "dependencies": {
6
6
  "@seafile/react-image-lightbox": "5.0.9",