@titaui/pc 1.16.36 → 1.16.38

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.
@@ -1,53 +1,71 @@
1
1
  .titaui-keyword-search {
2
- background: #fff;
2
+ width: 36px;
3
3
  height: 36px;
4
4
  padding: 8px;
5
- box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
6
- display: flex;
7
5
  border-radius: 18px;
6
+ box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
7
+ transition: all 0.4s cubic-bezier(0.17, 0.63, 0.32, 1.27);
8
+ background-color: #ffffff;
8
9
  box-sizing: border-box;
10
+ display: flex;
9
11
  align-items: center;
12
+ position: relative;
10
13
  }
11
14
 
12
- .titaui-keyword-search--active {
13
- box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1), 0px 0px 4px 0px rgba(40, 121, 255, 0.3);
14
- border: 1px solid #2879ff;
15
+ .titaui-keyword-search--activated {
16
+ width: 190px;
17
+ border: none;
18
+ box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
15
19
  }
16
20
 
17
- .titaui-keyword-search__del-icon {
18
- font-size: 20px;
19
- color: #89919f;
20
- margin-right: 4px;
21
+ .titaui-keyword-search--activated .titaui-keyword-search__input {
22
+ opacity: 1;
23
+ visibility: visible;
21
24
  }
22
25
 
23
- .titaui-keyword-search__del-icon:hover {
24
- cursor: pointer;
25
- color: #f05e5e;
26
+ .titaui-keyword-search__input {
27
+ width: 120px;
28
+ padding-right: 52px;
29
+ opacity: 0;
30
+ visibility: hidden;
26
31
  }
27
32
 
28
- .titaui-keyword-search__search-icon.tu-icon-search {
29
- font-size: 20px !important;
33
+ .titaui-keyword-search__input input {
34
+ width: 100%;
35
+ border: none;
36
+ }
37
+
38
+ .titaui-keyword-search__del-icon {
39
+ font-size: 19px;
40
+ opacity: 0;
41
+ transform: scale(0);
42
+ transition: all .3s ease;
43
+ color: #c2cbd1;
30
44
  cursor: pointer;
45
+ visibility: hidden;
46
+ position: absolute;
47
+ right: 32px;
31
48
  }
32
49
 
33
- .titaui-keyword-search__search-icon.tu-icon-search:hover {
34
- color: #2879ff;
50
+ .titaui-keyword-search__del-icon--visible {
51
+ opacity: 1;
52
+ transform: scale(1);
53
+ visibility: visible;
35
54
  }
36
55
 
37
- .titaui-keyword-search__input {
38
- width: 0;
39
- animation: shrink 0.1s ease;
56
+ .titaui-keyword-search__del-icon:hover {
57
+ color: #f05e5e;
40
58
  }
41
59
 
42
- .titaui-keyword-search__input input {
43
- width: 100%;
44
- border: none;
60
+ .titaui-keyword-search__search-icon {
61
+ font-size: 20px !important;
62
+ cursor: pointer;
63
+ position: absolute;
64
+ right: 8px;
45
65
  }
46
66
 
47
- .titaui-keyword-search--active .titaui-keyword-search__input {
48
- width: 120px;
49
- margin-right: 12px;
50
- animation: grow 0.1s ease;
67
+ .titaui-keyword-search__search-icon:hover {
68
+ color: #2879ff;
51
69
  }
52
70
 
53
71
  @keyframes grow {
@@ -9,7 +9,7 @@ exports["default"] = void 0;
9
9
 
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
 
12
- var _classnames2 = _interopRequireDefault(require("classnames"));
12
+ var _classnames3 = _interopRequireDefault(require("classnames"));
13
13
 
14
14
  var _getLocale = require("../../utils/getLocale");
15
15
 
@@ -35,79 +35,110 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
35
35
 
36
36
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
37
37
 
38
- var precls = "titaui-keyword-search";
38
+ var precls = 'titaui-keyword-search';
39
39
 
40
40
  function KeywordSearch(props) {
41
- var onSearch = props.onSearch;
42
- var inputRef = (0, _react.useRef)();
41
+ var onSearch = props.onSearch,
42
+ _props$placeholder = props.placeholder,
43
+ placeholder = _props$placeholder === void 0 ? (0, _getLocale.getLocale)('Mod_Enterkeywords') : _props$placeholder,
44
+ _props$value = props.value,
45
+ value = _props$value === void 0 ? '' : _props$value;
43
46
 
44
47
  var _useState = (0, _react.useState)(false),
45
48
  _useState2 = _slicedToArray(_useState, 2),
46
- active = _useState2[0],
47
- setActive = _useState2[1];
49
+ activated = _useState2[0],
50
+ setActivated = _useState2[1];
48
51
 
49
- var _useState3 = (0, _react.useState)(""),
52
+ var _useState3 = (0, _react.useState)(''),
50
53
  _useState4 = _slicedToArray(_useState3, 2),
51
54
  keyword = _useState4[0],
52
55
  setKeyword = _useState4[1];
53
56
 
54
- var handleSearchClick = function handleSearchClick() {
55
- if (!active) {
57
+ var _useState5 = (0, _react.useState)(false),
58
+ _useState6 = _slicedToArray(_useState5, 2),
59
+ searchWhenClear = _useState6[0],
60
+ setSearchWhenClear = _useState6[1];
61
+
62
+ var inputRef = (0, _react.useRef)();
63
+ var timerRef = (0, _react.useRef)();
64
+
65
+ var focus = function focus() {
66
+ clearTimeout(timerRef.current);
67
+ timerRef.current = setTimeout(function () {
56
68
  var _inputRef$current;
57
69
 
58
- setActive(true);
59
70
  inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
60
- } else {
61
- handleSearch();
62
- }
71
+ });
63
72
  };
64
73
 
65
74
  var handleSearch = function handleSearch() {
66
- onSearch && onSearch({
75
+ setSearchWhenClear(!!keyword);
76
+ onSearch === null || onSearch === void 0 ? void 0 : onSearch({
67
77
  keyWords: keyword
68
78
  });
69
79
  };
70
80
 
71
- var handleOnBlur = function handleOnBlur(e) {
72
- if (!keyword.length) setActive(false);
73
- };
81
+ var handleClearKeyword = function handleClearKeyword() {
82
+ focus();
83
+ setKeyword('');
74
84
 
75
- var changeValue = function changeValue(e) {
76
- setKeyword(e.target.value);
85
+ if (searchWhenClear || value) {
86
+ onSearch === null || onSearch === void 0 ? void 0 : onSearch({
87
+ keyWords: ''
88
+ });
89
+ setSearchWhenClear(false);
90
+ }
77
91
  };
78
92
 
79
- var handleOnKeyDown = function handleOnKeyDown(e) {
80
- if (e.keyCode == 13) {
93
+ var handleSearchClick = function handleSearchClick() {
94
+ setActivated(true);
95
+ focus();
96
+
97
+ if (activated && keyword || searchWhenClear) {
81
98
  handleSearch();
82
99
  }
83
100
  };
84
101
 
85
- var clearKeyword = function clearKeyword(e) {
86
- var _inputRef$current2;
102
+ var onBlurHandler = function onBlurHandler() {
103
+ if (keyword.length) return;
104
+ clearTimeout(timerRef.current);
105
+ timerRef.current = setTimeout(function () {
106
+ setActivated(false);
107
+ }, 300);
108
+ };
87
109
 
88
- setKeyword("");
89
- inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
90
- onSearch && onSearch({
91
- keyWords: ""
92
- });
110
+ var onChangeHandler = function onChangeHandler(e) {
111
+ return setKeyword(e.target.value);
112
+ };
113
+
114
+ var onKeyDownHandler = function onKeyDownHandler(e) {
115
+ if (e.keyCode !== 13) return;
116
+ handleSearch();
93
117
  };
94
118
 
119
+ (0, _react.useEffect)(function () {
120
+ setKeyword(value);
121
+ setActivated(!!value);
122
+ return function () {
123
+ return clearTimeout(timerRef.current);
124
+ };
125
+ }, []);
95
126
  return /*#__PURE__*/_react["default"].createElement("div", {
96
- className: (0, _classnames2["default"])(precls, _defineProperty({}, "".concat(precls, "--active"), active))
127
+ className: (0, _classnames3["default"])(precls, _defineProperty({}, "".concat(precls, "--activated"), activated))
97
128
  }, /*#__PURE__*/_react["default"].createElement("span", {
98
129
  className: "".concat(precls, "__input")
99
130
  }, /*#__PURE__*/_react["default"].createElement("input", {
100
- value: keyword,
101
- onKeyUp: handleOnKeyDown,
102
- onChange: changeValue,
131
+ onBlur: onBlurHandler,
132
+ onChange: onChangeHandler,
133
+ onKeyUp: onKeyDownHandler,
134
+ placeholder: placeholder,
103
135
  ref: inputRef,
104
- onBlur: handleOnBlur,
105
- placeholder: (0, _getLocale.getLocale)("Mod_Enterkeywords")
106
- })), keyword.length > 0 && /*#__PURE__*/_react["default"].createElement("span", {
107
- className: (0, _classnames2["default"])("tu-icon-cross", "".concat(precls, "__del-icon")),
108
- onClick: clearKeyword
136
+ value: keyword
137
+ })), /*#__PURE__*/_react["default"].createElement("span", {
138
+ className: (0, _classnames3["default"])('tu-icon-cross', "".concat(precls, "__del-icon"), _defineProperty({}, "".concat(precls, "__del-icon--visible"), !!keyword)),
139
+ onClick: handleClearKeyword
109
140
  }), /*#__PURE__*/_react["default"].createElement("span", {
110
- className: (0, _classnames2["default"])("tu-icon-search", "".concat(precls, "__search-icon")),
141
+ className: (0, _classnames3["default"])('tu-icon-search', "".concat(precls, "__search-icon")),
111
142
  onClick: handleSearchClick
112
143
  }));
113
144
  }
@@ -28,6 +28,8 @@ var _default = /*#__PURE__*/function () {
28
28
  cb(_menus.PAGE_SURVEY_MANAGE);
29
29
  } else if (this.isMyInvolved()) {
30
30
  cb(_menus.PAGE_SURVEY_MY_INVOLVED);
31
+ } else if (this.isAssessSettings()) {
32
+ cb(_menus.PAGE_SURVEY_ASSESS_SETTINGS);
31
33
  }
32
34
 
33
35
  return null;
@@ -44,6 +46,12 @@ var _default = /*#__PURE__*/function () {
44
46
  var pathname = this.history.location.pathname;
45
47
  return pathname.match(/survey\/manage/);
46
48
  }
49
+ }, {
50
+ key: "isAssessSettings",
51
+ value: function isAssessSettings() {
52
+ var pathname = this.history.location.pathname;
53
+ return pathname.match(/survey\/assess-settings/);
54
+ }
47
55
  }]);
48
56
 
49
57
  return _default;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.defaultRefObject = exports["default"] = exports.PAGE_SURVEY_MY_INVOLVED = exports.PAGE_SURVEY_MANAGE = void 0;
6
+ exports.defaultRefObject = exports["default"] = exports.PAGE_SURVEY_MY_INVOLVED = exports.PAGE_SURVEY_MANAGE = exports.PAGE_SURVEY_ASSESS_SETTINGS = void 0;
7
7
 
8
8
  var _index = require("../../components/menu-tree/tree-node/index");
9
9
 
@@ -24,6 +24,8 @@ var PAGE_SURVEY_MANAGE = 'surveymanage';
24
24
  exports.PAGE_SURVEY_MANAGE = PAGE_SURVEY_MANAGE;
25
25
  var PAGE_SURVEY_MY_INVOLVED = 'surveymyinvolved';
26
26
  exports.PAGE_SURVEY_MY_INVOLVED = PAGE_SURVEY_MY_INVOLVED;
27
+ var PAGE_SURVEY_ASSESS_SETTINGS = 'assesssettings';
28
+ exports.PAGE_SURVEY_ASSESS_SETTINGS = PAGE_SURVEY_ASSESS_SETTINGS;
27
29
 
28
30
  var surveyMenus = /*#__PURE__*/function () {
29
31
  function surveyMenus(props) {
@@ -43,6 +45,20 @@ var surveyMenus = /*#__PURE__*/function () {
43
45
  type: _index.MENU_ITEM_NOE,
44
46
  href: '#/survey/my-involved',
45
47
  isShow: true
48
+ }, {
49
+ icon: "",
50
+ label: '基础设置',
51
+ key: "other",
52
+ type: _index.GROUP_NAME_NODE,
53
+ href: "",
54
+ isShow: props.isShowSurveyManage
55
+ }, {
56
+ icon: 'setting',
57
+ label: '评估设置',
58
+ key: PAGE_SURVEY_ASSESS_SETTINGS,
59
+ type: _index.MENU_ITEM_NOE,
60
+ href: '#/survey/assess-settings',
61
+ isShow: props.isShowSurveyManage
46
62
  }];
47
63
  }
48
64
 
@@ -13,39 +13,39 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
13
13
 
14
14
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
15
 
16
- var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 262px;\n box-sizing: border-box;\n min-height: 80px;\n padding: 16px 0px;\n border: 1px solid #f7f8fa;\n border-radius: 4px;\n box-shadow: 0px 4px 12px 0px rgba(127,145,180,0.2); \n background: #ffffff;\n box-sizing: content-box;\n"])));
16
+ var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 262px;\n box-sizing: border-box;\n min-height: 80px;\n padding: 16px 0px;\n border: 1px solid #f7f8fa;\n border-radius: 12px;\n box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);\n background: #ffffff;\n box-sizing: content-box;\n"])));
17
17
 
18
18
  exports.Wrapper = Wrapper;
19
19
 
20
- var Head = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 36px;\n margin: 0 20px 8px;\n padding: 8px 15px;\n border-radius: 3px;\n background: #f7f8fa;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
20
+ var Head = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 36px;\n margin: 0 20px 8px;\n padding: 8px 15px;\n border-radius: 8px;\n background: #f7f8fa;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
21
21
 
22
22
  exports.Head = Head;
23
23
 
24
- var Title = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1;\n font-size: 14px;\n height: 20px;\n color: #3f4755;\n cursor: default;\n text-align: center;\n\n &:hover {\n color: #3f4755;\n }\n"])));
24
+ var Title = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1;\n font-size: 14px;\n height: 20px;\n color: #3f4755;\n cursor: default;\n text-align: center;\n\n &:hover {\n color: #3f4755;\n }\n"])));
25
25
 
26
26
  exports.Title = Title;
27
27
 
28
- var Icon = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n transition: all .3s ease-in;\n color: #3f4755;\n\n &:hover {\n color: #2879ff;\n }\n\n &.disabled {\n color: #bfc7d5;\n cursor: default;\n\n &:hover {\n color: #bfc7d5;\n }\n }\n"])));
28
+ var Icon = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n transition: all 0.3s ease-in;\n color: #3f4755;\n\n &:hover {\n color: #2879ff;\n }\n\n &.disabled {\n color: #bfc7d5;\n cursor: default;\n\n &:hover {\n color: #bfc7d5;\n }\n }\n"])));
29
29
 
30
30
  exports.Icon = Icon;
31
31
 
32
- var List = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n justify-content: space-between;\n padding: 0 11px;\n box-sizing: border-box;\n"])));
32
+ var List = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n justify-content: space-between;\n padding: 0 11px;\n box-sizing: border-box;\n"])));
33
33
 
34
34
  exports.List = List;
35
35
 
36
36
  var getItemWidthBySize = function getItemWidthBySize(size) {
37
- if (size == "s") return 48;
38
- if (size == "m") return 72;
37
+ if (size == 's') return 48;
38
+ if (size == 'm') return 72;
39
39
  return 72;
40
40
  };
41
41
 
42
- var Item = _styledComponents["default"].a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: ", "px;\n padding: 8px;\n font-size: 12px;\n line-height: 17px;\n transition: all .3s ease-in;\n box-sizing: border-box;\n color: #6f7886;\n cursor: pointer;\n text-align: center;\n white-space: nowrap;\n flex-shrink: 0;\n\n &.active,\n &:hover {\n color: #2879ff;\n }\n\n &:hover {\n background: rgba(240,242,245,0.3);\n }\n"])), function (p) {
42
+ var Item = _styledComponents["default"].a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: ", "px;\n padding: 8px;\n font-size: 12px;\n line-height: 17px;\n border-radius: 8px;\n transition: all 0.3s ease-in;\n box-sizing: border-box;\n color: #6f7886;\n cursor: pointer;\n text-align: center;\n white-space: nowrap;\n flex-shrink: 0;\n\n &.active,\n &:hover {\n color: #2879ff;\n }\n\n &:hover {\n background: #F7F8FA;\n }\n"])), function (p) {
43
43
  return getItemWidthBySize(p.size);
44
44
  });
45
45
 
46
46
  exports.Item = Item;
47
47
 
48
- var PlaceHolder = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n width: ", "px;\n height: 0;\n"])), function (p) {
48
+ var PlaceHolder = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n width: ", "px;\n height: 0;\n"])), function (p) {
49
49
  return getItemWidthBySize(p.size);
50
50
  });
51
51
 
@@ -79,7 +79,8 @@ function PeriodSelector(_ref) {
79
79
  _ref$buttonClass = _ref.buttonClass,
80
80
  buttonClass = _ref$buttonClass === void 0 ? '' : _ref$buttonClass,
81
81
  _ref$noBorder = _ref.noBorder,
82
- noBorder = _ref$noBorder === void 0 ? false : _ref$noBorder;
82
+ noBorder = _ref$noBorder === void 0 ? false : _ref$noBorder,
83
+ onPopupVisibleChange = _ref.onPopupVisibleChange;
83
84
 
84
85
  var _useState = (0, _react.useState)({
85
86
  hasSetting: true,
@@ -110,6 +111,12 @@ function PeriodSelector(_ref) {
110
111
  setVisible = _useState6[1];
111
112
 
112
113
  var fetchRef = (0, _react.useRef)(false);
114
+
115
+ var onPopupVisibleChangeHandler = function onPopupVisibleChangeHandler(popupVisible) {
116
+ setVisible(popupVisible);
117
+ onPopupVisibleChange === null || onPopupVisibleChange === void 0 ? void 0 : onPopupVisibleChange(popupVisible);
118
+ };
119
+
113
120
  (0, _react.useEffect)(function () {
114
121
  if (selected) {
115
122
  setSelectedPeriod(selected);
@@ -141,7 +148,7 @@ function PeriodSelector(_ref) {
141
148
  setSelectedPeriod(selected);
142
149
  } else {
143
150
  setSelectedPeriod((0, _common.getDefalutCycle)(cycleSetting));
144
- onChange && onChange((0, _common.getDefalutCycle)(cycleSetting));
151
+ onChange === null || onChange === void 0 ? void 0 : onChange((0, _common.getDefalutCycle)(cycleSetting));
145
152
  }
146
153
  }, [visible]);
147
154
 
@@ -158,7 +165,7 @@ function PeriodSelector(_ref) {
158
165
  startMonth: isFetch ? cycleSetting.yearStartMonth : startMonth,
159
166
  onSelected: function onSelected(period) {
160
167
  setSelectedPeriod(period);
161
- onChange && onChange(period);
168
+ onChange === null || onChange === void 0 ? void 0 : onChange(period);
162
169
  setVisible(false);
163
170
  },
164
171
  yearsRange: yearsRange,
@@ -174,9 +181,7 @@ function PeriodSelector(_ref) {
174
181
  popupPlacement: align,
175
182
  extraClass: popClass,
176
183
  popup: popup,
177
- onPopupVisibleChange: function onPopupVisibleChange(visible) {
178
- setVisible(visible);
179
- }
184
+ onPopupVisibleChange: onPopupVisibleChangeHandler
180
185
  }, /*#__PURE__*/_react["default"].createElement("div", {
181
186
  className: className
182
187
  }, children || /*#__PURE__*/_react["default"].createElement(_button["default"], {
@@ -3,63 +3,58 @@
3
3
  }
4
4
 
5
5
  .search-input-box .search-input-icon {
6
- position: absolute;
7
6
  font-size: 14px;
7
+ color: rgba(0, 0, 0, 0.3);
8
+ cursor: pointer;
9
+ position: absolute;
8
10
  right: 10px;
9
11
  top: 50%;
10
12
  transform: translate(0, -50%);
11
- color: rgba(0, 0, 0, 0.3);
12
13
  }
13
14
 
14
15
  .search-input-box .search-input-icon:hover {
15
16
  color: #2879ff;
16
- cursor: pointer;
17
- }
18
-
19
- .search-input-box .search-input-icon-focus {
20
- color: #2879ff;
21
17
  }
22
18
 
23
19
  .search-input-box .clear-input-icon {
20
+ font-size: 16px;
21
+ opacity: 0;
22
+ transition: all .3s ease;
24
23
  color: #c2cbd1;
24
+ cursor: pointer;
25
+ visibility: 0;
25
26
  position: absolute;
26
- font-size: 16px;
27
27
  right: 32px;
28
28
  top: 50%;
29
- transform: translate(0, -50%);
29
+ transform: translate(0, -50%) scale(0);
30
30
  }
31
31
 
32
32
  .search-input-box .clear-input-icon:hover {
33
33
  color: #F05E5E;
34
- cursor: pointer;
35
34
  }
36
35
 
37
- .search-input-box .search-input-focus {
38
- border: 1px solid #2879ff !important;
36
+ .search-input-box .clear-input-icon--visible {
37
+ opacity: 1;
38
+ transform: translate(0, -50%) scale(1);
39
+ visibility: visible;
39
40
  }
40
41
 
41
- .search-input-box > input {
42
- background: #ffffff;
43
- border: 1px solid #e9edf0;
44
- border-radius: 18px;
42
+ .search-input-box__input {
45
43
  width: 100%;
46
44
  height: 100%;
47
- padding: 0 44px 0 11px;
48
- box-sizing: border-box;
45
+ padding: 0 50px 0 11px;
49
46
  font-size: 12px;
50
- transition: border 0.3s;
51
- -moz-transition: border 0.3s;
52
- /* Firefox 4 */
53
- -webkit-transition: border 0.3s;
54
- /* Safari and Chrome */
55
- -o-transition: border 0.3s;
56
- /* Opera */
47
+ border: 1px solid #e9edf0;
48
+ border-radius: 18px;
49
+ transition: all 0.3s ease;
50
+ background-color: #ffffff;
51
+ box-sizing: border-box;
57
52
  }
58
53
 
59
- .search-input-box > input:hover {
54
+ .search-input-box__input:hover, .search-input-box__input:focus {
60
55
  border: 1px solid #2879ff;
61
56
  }
62
57
 
63
- .search-input-box > input::placeholder {
58
+ .search-input-box__input::placeholder {
64
59
  color: #bfc7d5;
65
60
  }
@@ -5,12 +5,16 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = _default;
8
+ exports["default"] = void 0;
9
9
 
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
 
12
+ var _classnames = _interopRequireDefault(require("classnames"));
13
+
12
14
  require("./index.css");
13
15
 
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
17
+
14
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
19
 
16
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -33,28 +37,29 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
33
37
 
34
38
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
35
39
 
36
- function _default(props) {
37
- var onSearch = props.onSearch,
40
+ var prefixCls = 'search-input-box';
41
+
42
+ var SearchInput = function SearchInput(props) {
43
+ var _props$autoFocus = props.autoFocus,
44
+ autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
45
+ onSearch = props.onSearch,
38
46
  placeholder = props.placeholder,
39
47
  setSearchKey = props.setSearchKey,
40
- propsValue = props.value,
41
48
  _props$style = props.style,
42
- style = _props$style === void 0 ? {} : _props$style;
49
+ style = _props$style === void 0 ? {} : _props$style,
50
+ propsValue = props.value;
43
51
 
44
- var _useState = (0, _react.useState)(''),
52
+ var _useState = (0, _react.useState)(false),
45
53
  _useState2 = _slicedToArray(_useState, 2),
46
- value = _useState2[0],
47
- setValue = _useState2[1];
54
+ searchWhenClear = _useState2[0],
55
+ setSearchWhenClear = _useState2[1];
48
56
 
49
- var _useState3 = (0, _react.useState)(false),
57
+ var _useState3 = (0, _react.useState)(''),
50
58
  _useState4 = _slicedToArray(_useState3, 2),
51
- focus = _useState4[0],
52
- setFocus = _useState4[1];
59
+ value = _useState4[0],
60
+ setValue = _useState4[1];
53
61
 
54
- var _useState5 = (0, _react.useState)(false),
55
- _useState6 = _slicedToArray(_useState5, 2),
56
- clearIconState = _useState6[0],
57
- setClearIconState = _useState6[1];
62
+ var inputRef = (0, _react.useRef)();
58
63
 
59
64
  var defaultStyle = _objectSpread({
60
65
  width: 230,
@@ -63,23 +68,18 @@ function _default(props) {
63
68
 
64
69
  (0, _react.useEffect)(function () {
65
70
  setValue(propsValue);
66
- if (!propsValue) setClearIconState(false);
67
71
  }, [propsValue]);
68
- var inputClassName = focus ? 'search-input-focus' : '';
69
- var iconClassName = focus ? 'search-input-icon-focus' : '';
70
- var clearIconStyle = {
71
- display: clearIconState ? 'inline' : 'none'
72
- };
73
72
 
74
73
  var handleInputChange = function handleInputChange(e) {
75
74
  var evalue = e.target.value;
76
75
  setValue(evalue);
77
76
  setSearchKey === null || setSearchKey === void 0 ? void 0 : setSearchKey(evalue);
78
- setClearIconState(evalue != '');
79
77
  };
80
78
 
81
- var handleFocusBlur = function handleFocusBlur(e) {
82
- setFocus(e.target === document.activeElement);
79
+ var handleSearch = function handleSearch() {
80
+ var searchKey = value === null || value === void 0 ? void 0 : value.trim();
81
+ setSearchWhenClear(!!searchKey);
82
+ onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKey);
83
83
  };
84
84
 
85
85
  var handleKeyPress = function handleKeyPress(e) {
@@ -88,51 +88,41 @@ function _default(props) {
88
88
  }
89
89
  };
90
90
 
91
- var handleSearch = function handleSearch() {
92
- onSearch === null || onSearch === void 0 ? void 0 : onSearch(value === null || value === void 0 ? void 0 : value.trim());
93
- };
94
-
95
- var clearValue = function clearValue(e) {
91
+ var clearValue = function clearValue() {
96
92
  setValue('');
97
93
  setSearchKey === null || setSearchKey === void 0 ? void 0 : setSearchKey('');
94
+ inputRef.current.focus();
98
95
 
99
- if (onSearch) {
100
- onSearch('');
96
+ if (propsValue || searchWhenClear) {
97
+ onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
101
98
  }
102
-
103
- setClearIconState(false);
104
- };
105
-
106
- var onMouseOver = function onMouseOver(e) {
107
- setFocus(true);
108
- };
109
-
110
- var onMouseLeave = function onMouseLeave(e) {
111
- setFocus(false);
112
99
  };
113
100
 
114
101
  return /*#__PURE__*/_react["default"].createElement("div", {
115
- className: "search-input-box",
102
+ className: prefixCls,
116
103
  style: defaultStyle
117
104
  }, /*#__PURE__*/_react["default"].createElement("input", {
118
- className: inputClassName,
119
- onFocus: handleFocusBlur,
120
- onBlur: handleFocusBlur,
105
+ // eslint-disable-next-line jsx-a11y/no-autofocus
106
+ autoFocus: autoFocus,
107
+ className: "".concat(prefixCls, "__input"),
108
+ key: "input",
121
109
  onKeyPress: handleKeyPress,
122
- placeholder: placeholder,
123
110
  onChange: handleInputChange,
124
- value: value,
125
- key: "input"
111
+ placeholder: placeholder,
112
+ ref: inputRef,
113
+ value: value
126
114
  }), /*#__PURE__*/_react["default"].createElement("span", {
127
- className: "tu-icon-cross clear-input-icon",
128
- onClick: clearValue,
129
- style: clearIconStyle,
130
- key: "clear"
115
+ className: (0, _classnames["default"])('tu-icon-cross', 'clear-input-icon', {
116
+ 'clear-input-icon--visible': !!value
117
+ }),
118
+ key: "clear",
119
+ onClick: clearValue
131
120
  }), /*#__PURE__*/_react["default"].createElement("span", {
132
- onClick: handleSearch,
133
- className: "tu-icon-search search-input-icon ".concat(iconClassName),
134
- onMouseOver: onMouseOver,
135
- onMouseLeave: onMouseLeave,
136
- key: "search"
121
+ className: "tu-icon-search search-input-icon",
122
+ key: "search",
123
+ onClick: handleSearch
137
124
  }));
138
- }
125
+ };
126
+
127
+ var _default = SearchInput;
128
+ exports["default"] = _default;
@@ -117,7 +117,8 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
117
117
  targetOffset: [0, 0]
118
118
  } : _props$popupAlign,
119
119
  _props$enableDimissio = props.enableDimissionSwitch,
120
- enableDimissionSwitch = _props$enableDimissio === void 0 ? false : _props$enableDimissio;
120
+ enableDimissionSwitch = _props$enableDimissio === void 0 ? false : _props$enableDimissio,
121
+ staffStatusDefault = props.staffStatusDefault;
121
122
 
122
123
  var _useState = (0, _react.useState)([]),
123
124
  _useState2 = _slicedToArray(_useState, 2),
@@ -129,7 +130,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
129
130
  selectedText = _useState4[0],
130
131
  setSelectedText = _useState4[1];
131
132
 
132
- var _useState5 = (0, _react.useState)(_enum.StaffStatus.OnTheJob),
133
+ var _useState5 = (0, _react.useState)((staffStatusDefault === null || staffStatusDefault === void 0 ? void 0 : staffStatusDefault.toString()) || _enum.StaffStatus.OnTheJob),
133
134
  _useState6 = _slicedToArray(_useState5, 2),
134
135
  staffStatus = _useState6[0],
135
136
  setStaffStatus = _useState6[1];
@@ -9,47 +9,47 @@ exports["default"] = exports.ViewType = exports.MoreMenuType = void 0;
9
9
 
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
 
12
- var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
13
-
14
- var _bsGlobal = require("../../../utils/bs-global");
15
-
16
- var _precls = require("../precls");
12
+ var _reactRouter = require("react-router");
17
13
 
18
14
  var _moment = _interopRequireDefault(require("moment"));
19
15
 
20
- var _keywordSearch = _interopRequireDefault(require("../keyword-search"));
21
-
22
- var _createOkr = _interopRequireDefault(require("./create-okr"));
23
-
24
- var _userTitle = _interopRequireDefault(require("./user-title"));
16
+ var _guideTip = _interopRequireDefault(require("../../../components/guide-tip"));
25
17
 
26
- var _departTitle = _interopRequireDefault(require("./depart-title"));
18
+ var _keywordSearch = _interopRequireDefault(require("../../../components/keyword-search"));
27
19
 
28
- var _relationTitle = _interopRequireDefault(require("./relation-title"));
20
+ var _popupSelect = _interopRequireDefault(require("../../../components/popup-select"));
29
21
 
30
- var _filter = _interopRequireDefault(require("./filter"));
22
+ var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
31
23
 
32
- var _comments = _interopRequireDefault(require("./comments"));
24
+ var _bsGlobal = require("../../../utils/bs-global");
33
25
 
34
- var _operateRecord = _interopRequireDefault(require("./operate-record"));
26
+ var _getLocale = require("../../../utils/getLocale");
35
27
 
36
28
  var _localStorage = require("../../../utils/local-storage");
37
29
 
38
30
  var _context = require("../context");
39
31
 
32
+ var _precls = require("../precls");
33
+
40
34
  var _requestApi = require("../request-api");
41
35
 
42
- var _getLocale = require("../../../utils/getLocale");
36
+ var _comments = _interopRequireDefault(require("./comments"));
43
37
 
44
- var _popupSelect = _interopRequireDefault(require("../../../components/popup-select"));
38
+ var _createOkr = _interopRequireDefault(require("./create-okr"));
45
39
 
46
- var _guideTip = _interopRequireDefault(require("../../../components/guide-tip"));
40
+ var _departTitle = _interopRequireDefault(require("./depart-title"));
41
+
42
+ var _filter = _interopRequireDefault(require("./filter"));
47
43
 
48
44
  var _okrImport = _interopRequireDefault(require("./okr-import"));
49
45
 
50
- require("./index.css");
46
+ var _operateRecord = _interopRequireDefault(require("./operate-record"));
51
47
 
52
- var _reactRouter = require("react-router");
48
+ var _relationTitle = _interopRequireDefault(require("./relation-title"));
49
+
50
+ var _userTitle = _interopRequireDefault(require("./user-title"));
51
+
52
+ require("./index.css");
53
53
 
54
54
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
55
55
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@titaui/pc",
3
- "version": "1.16.36",
3
+ "version": "1.16.38",
4
4
  "nameCN": "",
5
5
  "description": "",
6
6
  "main": "lib/index.js",