maru_design2 2.16.2 → 2.16.4

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.
package/dist/index.js CHANGED
@@ -87,7 +87,7 @@ function styleInject(css, ref) {
87
87
  var css_248z$i = "* {\n /* HTML5 display-role reset for older browsers */\n}\n* html,\n* body,\n* div,\n* span,\n* applet,\n* object,\n* iframe,\n* h1,\n* h2,\n* h3,\n* h4,\n* h5,\n* h6,\n* p,\n* blockquote,\n* pre,\n* a,\n* abbr,\n* acronym,\n* address,\n* big,\n* cite,\n* code,\n* del,\n* dfn,\n* em,\n* img,\n* ins,\n* kbd,\n* q,\n* s,\n* samp,\n* small,\n* strike,\n* strong,\n* sub,\n* sup,\n* tt,\n* var,\n* b,\n* u,\n* i,\n* center,\n* dl,\n* dt,\n* dd,\n* ol,\n* ul,\n* li,\n* fieldset,\n* form,\n* label,\n* legend,\n* table,\n* caption,\n* tbody,\n* tfoot,\n* thead,\n* tr,\n* th,\n* td,\n* article,\n* aside,\n* canvas,\n* details,\n* embed,\n* figure,\n* figcaption,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* output,\n* ruby,\n* section,\n* summary,\n* time,\n* mark,\n* audio,\n* video {\n padding: 0;\n border: 0;\n margin: 0;\n font: inherit;\n font-size: 100%;\n vertical-align: baseline;\n}\n* article,\n* aside,\n* details,\n* figcaption,\n* figure,\n* footer,\n* header,\n* hgroup,\n* menu,\n* nav,\n* section {\n display: block;\n}\n* ol,\n* ul {\n list-style: none;\n}\n* blockquote,\n* q {\n quotes: none;\n}\n* blockquote::before,\n* blockquote::after,\n* q::before,\n* q::after {\n content: \"\";\n content: none;\n}\n* table {\n border-collapse: collapse;\n border-spacing: 0;\n}\n* html {\n box-sizing: border-box;\n}\n* *,\n* *::before,\n* *::after {\n box-sizing: inherit;\n}";
88
88
  styleInject(css_248z$i);
89
89
 
90
- var css_248z$h = ".scrollbar, * {\n scrollbar-track-color: #e4e4e4;\n scrollbar-arrow-color: #e4e4e4;\n scrollbar-3dlight-color: #e4e4e4;\n scrollbar-highlight-color: #e4e4e4;\n scrollbar-shadow-color: #e4e4e4;\n scrollbar-face-color: #e4e4e4;\n}\n\n.scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {\n background: inherit;\n width: 6px;\n height: 6px;\n}\n\n.scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track {\n background: none;\n}\n\n.scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {\n background-color: #e4e4e4;\n border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n display: none;\n}\n\n@font-face {\n font-family: \"Pretendard\";\n src: url(\"../../assets/fonts/PretendardVariable.woff2\") format(\"woff2-variations\");\n}\n:root {\n --primary: var(--p);\n --primary-50-per: var(--p-50-per);\n --primary-50: var(--p-50);\n --primary-20-per: var(--p-20-per);\n --primary-20: var(--p-20);\n --primary-10-per: var(--p-10-per);\n --primary-10: var(--p-10);\n}\n\n[data-theme=blue] {\n --p: #308acc;\n --p-50-per: #308acc80;\n --p-50: #97c4e5;\n --p-20-per: #308acc33;\n --p-20: #d6e8f5;\n --p-10-per: #308acc1a;\n --p-10: #eaf3fa;\n --p-05-per: #308acc0d;\n --p-05: #f5fafd;\n}\n\n[data-theme=green] {\n --p: #096412;\n --p-50-per: #09641280;\n --p-50: #84b188;\n --p-20-per: #09641233;\n --p-20: #cee0d0;\n --p-10-per: #0964121a;\n --p-10: #e6f0e7;\n --p-05-per: #0964120d;\n --p-05: #f3f7f3;\n}";
90
+ var css_248z$h = ".scrollbar, * {\n scrollbar-track-color: #e4e4e4;\n scrollbar-arrow-color: #e4e4e4;\n scrollbar-3dlight-color: #e4e4e4;\n scrollbar-highlight-color: #e4e4e4;\n scrollbar-shadow-color: #e4e4e4;\n scrollbar-face-color: #e4e4e4;\n}\n\n.scrollbar::-webkit-scrollbar, ::-webkit-scrollbar {\n background: inherit;\n width: 6px;\n height: 6px;\n}\n\n.scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-track {\n background: none;\n}\n\n.scrollbar::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {\n background-color: #e4e4e4;\n border-radius: 16px;\n}\n\n.scrollbar::-webkit-scrollbar-button, ::-webkit-scrollbar-button {\n display: none;\n}\n\n@font-face {\n font-family: \"Pretendard\";\n src: url(\"../../assets/fonts/PretendardVariable.woff2\") format(\"woff2-variations\");\n}\n* {\n -webkit-font-smoothing: antialiased;\n}\n\n:root {\n --primary: var(--p);\n --primary-50-per: var(--p-50-per);\n --primary-50: var(--p-50);\n --primary-20-per: var(--p-20-per);\n --primary-20: var(--p-20);\n --primary-10-per: var(--p-10-per);\n --primary-10: var(--p-10);\n}\n\n[data-theme=blue] {\n --p: #308acc;\n --p-50-per: #308acc80;\n --p-50: #97c4e5;\n --p-20-per: #308acc33;\n --p-20: #d6e8f5;\n --p-10-per: #308acc1a;\n --p-10: #eaf3fa;\n --p-05-per: #308acc0d;\n --p-05: #f5fafd;\n}\n\n[data-theme=green] {\n --p: #096412;\n --p-50-per: #09641280;\n --p-50: #84b188;\n --p-20-per: #09641233;\n --p-20: #cee0d0;\n --p-10-per: #0964121a;\n --p-10: #e6f0e7;\n --p-05-per: #0964120d;\n --p-05: #f3f7f3;\n}";
91
91
  styleInject(css_248z$h);
92
92
 
93
93
  function StyleProvider(_a) {
@@ -4232,8 +4232,8 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
4232
4232
  className = _a.className,
4233
4233
  props = __rest(_a, ["invalid", "label", "type", "onClear", "hiddenClearButton", "wrapperRef", "startNode", "endNode", "className"]);
4234
4234
  var _c = useState(true),
4235
- pwdVision = _c[0],
4236
- setPwdVision = _c[1];
4235
+ maskingPassword = _c[0],
4236
+ setMaskingPassword = _c[1]; // *로 보이고 싶으면 true
4237
4237
  var _d = useState(false),
4238
4238
  showClearButton = _d[0],
4239
4239
  setShowClearButton = _d[1];
@@ -4241,7 +4241,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
4241
4241
  var hashId = uuidv4(4);
4242
4242
  useEffect(function () {
4243
4243
  return function () {
4244
- setPwdVision(false);
4244
+ setMaskingPassword(true);
4245
4245
  setShowClearButton(false);
4246
4246
  };
4247
4247
  }, []);
@@ -4318,7 +4318,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
4318
4318
  })), jsx("input", __assign({}, props, {
4319
4319
  id: "maru-input-".concat(hashId),
4320
4320
  ref: combineRef,
4321
- type: type === 'password' && pwdVision ? 'password' : 'text',
4321
+ type: type === 'password' && maskingPassword ? 'password' : 'text',
4322
4322
  onChange: handleInputChange,
4323
4323
  onBlur: handleInputBlur
4324
4324
  })), jsxs("div", __assign({
@@ -4327,14 +4327,17 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
4327
4327
  children: [type === 'password' && !props.disabled && jsx("button", __assign({
4328
4328
  type: "button",
4329
4329
  onClick: function onClick() {
4330
- return setPwdVision(function (prev) {
4330
+ return setMaskingPassword(function (prev) {
4331
4331
  return !prev;
4332
4332
  });
4333
4333
  },
4334
4334
  tabIndex: -1
4335
4335
  }, {
4336
- children: jsx(Icon, {
4337
- name: pwdVision ? ICONS.Eye_s16 : ICONS.EyeOff_s16,
4336
+ children: jsx(Icon
4337
+ // 현재 상태에 대한 아이콘이 아니라 어떻게 하고싶냐는 뜻의 아이콘이니까 반대로 되어있는게 맞다
4338
+ , {
4339
+ // 현재 상태에 대한 아이콘이 아니라 어떻게 하고싶냐는 뜻의 아이콘이니까 반대로 되어있는게 맞다
4340
+ name: maskingPassword ? ICONS.Eye_s16 : ICONS.EyeOff_s16,
4338
4341
  color: "#bdbdbd"
4339
4342
  })
4340
4343
  })), endNode && jsx("div", __assign({
@@ -23242,45 +23245,9 @@ var noSpace = function noSpace(text) {
23242
23245
  return '';
23243
23246
  };
23244
23247
 
23245
- // text char 하나씩 비교하는 경우 (띄워쓰기 무시, 검색할 때 띄워쓰기 무시해야함)
23246
- var setHighlightTextOnDataExceptSpace = function setHighlightTextOnDataExceptSpace(data, targetKey, compareText, autoExcept) {
23247
- if (autoExcept === void 0) {
23248
- autoExcept = false;
23249
- }
23250
- var setHighlightIdx = function setHighlightIdx(dt) {
23251
- var pqi = 0;
23252
- var idx = [-1, -1];
23253
- for (var i = 0; i <= dt[targetKey].length; i += 1) {
23254
- if (dt[targetKey][i] !== ' ') {
23255
- if (pqi === compareText.length) {
23256
- idx[1] = i;
23257
- break;
23258
- }
23259
- if (dt[targetKey][i].toLowerCase() === compareText[pqi]) {
23260
- if (pqi === 0) {
23261
- idx[0] = i;
23262
- }
23263
- pqi += 1;
23264
- } else {
23265
- pqi = 0;
23266
- }
23267
- }
23268
- }
23269
- return idx;
23270
- };
23248
+ var searchData = function searchData(data, displayKey, query) {
23271
23249
  return data.reduce(function (acc, curr) {
23272
- var _a;
23273
- if (noSpace(curr[targetKey]).toLowerCase().includes(compareText)) {
23274
- var highlightIdx = setHighlightIdx(curr);
23275
- if (highlightIdx.every(function (el) {
23276
- return el !== -1;
23277
- })) {
23278
- var highlightText = "".concat(curr[targetKey].slice(0, highlightIdx[0]), "<em>").concat(curr[targetKey].slice(highlightIdx[0], highlightIdx[1]), "</em>").concat(curr[targetKey].slice(highlightIdx[1]));
23279
- acc.push(__assign(__assign({}, curr), (_a = {}, _a[targetKey] = highlightText, _a)));
23280
- return acc;
23281
- }
23282
- }
23283
- if (!autoExcept) {
23250
+ if (noSpace(curr[displayKey]).toLowerCase().includes(query)) {
23284
23251
  acc.push(curr);
23285
23252
  }
23286
23253
  return acc;
@@ -23609,16 +23576,10 @@ function DropdownMenu(_a) {
23609
23576
  rowId: item[idKey]
23610
23577
  }, {
23611
23578
  children: jsx("span", {
23612
- className: "maru-dropdown-menu-item-span",
23613
- dangerouslySetInnerHTML: {
23614
- __html: item[displayKey]
23615
- }
23579
+ children: item[displayKey]
23616
23580
  })
23617
23581
  })) : jsx("span", {
23618
- className: "maru-dropdown-menu-item-span",
23619
- dangerouslySetInnerHTML: {
23620
- __html: item[displayKey]
23621
- }
23582
+ children: item[displayKey]
23622
23583
  })
23623
23584
  }), "maru-dropdown-menu-item-".concat(item[idKey]));
23624
23585
  })
@@ -23708,7 +23669,7 @@ function Dropdown(_a) {
23708
23669
  if (type === 'input') {
23709
23670
  var pretreatedQeury = noSpace(inputValue).toLowerCase();
23710
23671
  if (pretreatedQeury !== '') {
23711
- setFilteredData(setHighlightTextOnDataExceptSpace(data, displayKey, pretreatedQeury));
23672
+ setFilteredData(searchData(data, displayKey, pretreatedQeury));
23712
23673
  } else {
23713
23674
  initFilteredData();
23714
23675
  }
@@ -1,3 +1 @@
1
- declare const setHighlightTextOnData: <T>(cb: (func: unknown) => void, data: T[], targetKey: string, compareText: string) => void;
2
- declare const setHighlightTextOnDataExceptSpace: <T>(data: T[], targetKey: string, compareText: string, autoExcept?: boolean) => typeof data;
3
- export { setHighlightTextOnData, setHighlightTextOnDataExceptSpace };
1
+ export declare const searchData: <T>(data: T[], displayKey: string, query: string) => typeof data;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "maru_design2",
3
- "version": "2.16.2",
3
+ "version": "2.16.4",
4
4
  "main": "./dist/index.js",
5
5
  "author": "zena-42maru",
6
6
  "license": "MIT",