diginet-core-ui 1.3.98-beta.1 → 1.3.99-beta.1

package/components/form-control/dropdown/index.js

@@ -33,6 +33,16 @@ const convertData = (dt, valueExpr) => {
   valueTemp = valueTemp.map(i => i[valueExpr] || i);
   return valueTemp;
 };
+const convertSearchDelayTime = searchDelayTime => {
+  var _searchDelayTime$matc, _searchDelayTime$matc2;
+  if (searchDelayTime === true) return getGlobal('delayOnInput');
+  const units = {
+    m: 60000,
+    s: 1000,
+    ms: 1
+  };
+  return typeof searchDelayTime === 'number' ? searchDelayTime : (((_searchDelayTime$matc = searchDelayTime.match(/[^a-z]+/i)) === null || _searchDelayTime$matc === void 0 ? void 0 : _searchDelayTime$matc[0]) || 1) * units[((_searchDelayTime$matc2 = searchDelayTime.match(/ms|s|m/i)) === null || _searchDelayTime$matc2 === void 0 ? void 0 : _searchDelayTime$matc2[0]) || 's'];
+};
 const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   allowSearch,
@@ -86,6 +96,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!reference) reference = useRef(null);
   if (multiple && selectBox === undefined) selectBox = true;
   if (typeof searchExpr === 'string') searchExpr = [searchExpr];
+  searchDelayTime = convertSearchDelayTime(searchDelayTime);
   const ref = useRef(null);
   const dropdownRef = useRef(null);
   const timer = useRef(null);
@@ -96,7 +107,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const dropdownListRef = useRef(null);
   const searchRef = useRef(null);
   // const lastSearchRef = useRef(null);
-  const timeout = useRef(null);
+  // const timeout = useRef(null);
   const loadMoreTimer = useRef(null);
   const dataChosen = useRef([]);
   const [unique] = useState(randomString(6, {
@@ -1043,21 +1054,26 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       closeDropdown();
     };
   }, []);
-  useEffect(() => {
-    if (searchDelayTime) {
-      var _searchDelayTime$matc, _searchDelayTime$matc2;
-      if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
-      const units = {
-        m: 60000,
-        s: 1000,
-        ms: 1
-      };
-      timeout.current = typeof searchDelayTime === 'number' ? searchDelayTime : (((_searchDelayTime$matc = searchDelayTime.match(/[^a-z]+/i)) === null || _searchDelayTime$matc === void 0 ? void 0 : _searchDelayTime$matc[0]) || 1) * units[((_searchDelayTime$matc2 = searchDelayTime.match(/ms|s|m/i)) === null || _searchDelayTime$matc2 === void 0 ? void 0 : _searchDelayTime$matc2[0]) || 's'];
-      return () => {
-        timeout.current = null;
-      };
-    }
-  }, [searchDelayTime]);
+
+  // useEffect(() => {
+  //     if (searchDelayTime) {
+  //         if (searchDelayTime === true) searchDelayTime = getGlobal('delayOnInput');
+  //         const units = {
+  //             m: 60000,
+  //             s: 1000,
+  //             ms: 1,
+  //         };
+  //         timeout.current =
+  //             typeof searchDelayTime === 'number'
+  //                 ? searchDelayTime
+  //                 : (searchDelayTime.match(/[^a-z]+/i)?.[0] || 1) *
+  //                   units[searchDelayTime.match(/ms|s|m/i)?.[0] || 's'];
+  //         return () => {
+  //             timeout.current = null;
+  //         };
+  //     }
+  // }, [searchDelayTime]);
+
   useEffect(() => {
     if (allValue[unique][allValue[unique].length - 1] !== valueProp) {
       allValue[unique].push(valueProp);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.98-beta.1",
+  "version": "1.3.99-beta.1",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.3.99
+- \[Changed\]: Typography – Add new text style
+- \[Fixed\]: Tab – Fix background UI not match design
+- \[Fixed\]: Dropdown – Fix case renderItem, renderSelectedItem inside Typography
+- \[Fixed\]: Attachment – Fix bug not reset new upload data
+
 ## 1.3.98
 - \[Changed\]: Image – Change default image
 - \[Changed\]: Icon – Update Image, Another, Compressed, Presentation, Sheet, Word, PDF

package/styles/general.js

@@ -10,10 +10,10 @@ export const alphaPseudo = {
 };
 export const typographyTypes = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
 
-/**
- * get value spacing with rootZIndex
- * @param number
- * @return {number}
+/**
+ * get value spacing with rootZIndex
+ * @param number
+ * @return {number}
  */
 export const zIndex = number => {
   number = Number(number || 0);
@@ -21,10 +21,10 @@ export const zIndex = number => {
   return rootZIndex + number;
 };
 
-/**
- * get value spacing with rootSpacing
- * @param {(number|number[])} vl - default 1
- * @returns {(number|string)}
+/**
+ * get value spacing with rootSpacing
+ * @param {(number|number[])} vl - default 1
+ * @returns {(number|string)}
  */
 
 export const getSpacing = (vl = 1) => {
@@ -34,9 +34,9 @@ export const getSpacing = (vl = 1) => {
   } else return vl;
 };
 
-/**
- * replace rootZIndex
- * @param number
+/**
+ * replace rootZIndex
+ * @param number
  */
 export const setZIndex = number => {
   number = Number(number || 0);
@@ -51,6 +51,9 @@ const animation = ({
 }) => css`
     animation: ${keyframes} ${duration} ${timingFunction};
 `;
+const aspectSquare = css`
+    aspect-ratio: 1 / 1;
+`;
 const bgColor = cl => css`
     background-color: ${getColor(cl)};
 `;
@@ -90,6 +93,9 @@ const borderRadius4px = css`
 const borderRadius50 = css`
     border-radius: 50%;
 `;
+const borderRight = (withVl, colorVl) => css`
+    border-right: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/dark')};
+`;
 const borderTop = (withVl, colorVl) => css`
     border-top: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/dark')};
 `;
@@ -481,4 +487,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { animation, bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, borderTop, borderTopColor, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { animation, aspectSquare, bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, borderRight, borderTop, borderTopColor, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, overflowXHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };