diginet-core-ui 1.4.21 → 1.4.23

package/components/tab/tab-panel.js

@@ -2,25 +2,33 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { boxBorder, displayFlex, displayNone, flexCol, parseWidthHeight, positionRelative, textColor } from "../../styles/general";
 import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../utils";
 import TabContext from "./context";
-const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  index,
-  lazyLoading,
-  style,
-  ...props
-}, reference) => {
+const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  if (!reference) reference = useRef(null);
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'TabPanel'
+  });
+  const {
+    action = {},
+    children,
+    className,
+    index,
+    lazyLoading,
+    style,
+    ...other
+  } = props;
   const {
     tabIndexState,
     direction
   } = useContext(TabContext);
-  if (!reference) reference = useRef(null);
   const [isRendered, setIsRendered] = useState(false);
   const ref = useRef(null);
   const theme = useTheme();
@@ -40,15 +48,13 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  return useMemo(() => {
-    return jsx("div", {
-      css: _TabPanelCSS,
-      ref: ref,
-      className: classNames('DGN-UI-Tab-Panel', className),
-      style: style,
-      ...props
-    }, isSelected || !lazyLoading || isRendered ? children : null);
-  }, [children, className, index, lazyLoading, props, style, isSelected, isRendered, tabIndexState, theme]);
+  return jsx("div", {
+    css: _TabPanelCSS,
+    ref: ref,
+    className: classNames('DGN-UI-Tab-Panel', className),
+    style: style,
+    ...other
+  }, isSelected || !lazyLoading || isRendered ? children : null);
 }));
 const TabPanelCSS = (isVertical, isSelected, {
   colors,
@@ -63,23 +69,23 @@ const TabPanelCSS = (isVertical, isSelected, {
     ${textColor(getProp(colors, 'text/main'))};
     padding: ${spacing([0, isVertical ? 3 : 2.5])};
 `;
-TabPanel.defaultProps = {
-  className: '',
-  lazyLoading: false,
-  style: {}
-};
+
+// TabPanel.defaultProps = {
+//     className: '',
+//     lazyLoading: false,
+//     style: {},
+// };
+
 TabPanel.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
-  /** Class for component. */
+  /** CSS class for the component. */
   className: PropTypes.string,
-  /** Index received in position of TabHeaderButton. */
+  /** The index corresponding to the position of the TabHeaderButton. */
   index: PropTypes.number,
-  /** Lazy loading mode. */
+  /** Enables lazy loading mode. */
   lazyLoading: PropTypes.bool,
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** Any props else. */
-  props: PropTypes.any
+  /** Inline style object for the component. */
+  style: PropTypes.object
 };
 export default TabPanel;

package/components/tab/tab.js

@@ -4,33 +4,42 @@ import { css, jsx } from '@emotion/core';
 import { Icon, Typography } from "./..";
 import Ripple from "../button/ripple-effect";
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import { forwardRef, memo, useContext, useImperativeHandle, useRef } from 'react';
 import { bgColor, borderRadius, bottom, boxBorder, breakWord, cursorDefault, cursorPointer, displayFlex, flexRow, itemsCenter, justifyCenter, justifyStart, left, outlineNone, overflowHidden, parseHeight, parseMaxWidth, parseMaxWidthHeight, parseMinWidth, parseWidth, pointerEventsAuto, pointerEventsNone, positionAbsolute, positionRelative, scale, shadowNone, textCenter, textColor, userSelectNone, whiteSpaceNoWrap } from "../../styles/general";
 import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames, getProp } from "../../utils";
 import TabContext from "./context";
-const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  color: colorProp,
-  disabled,
-  endIcon,
-  index,
-  label,
-  labelProps,
-  level,
-  onClick,
-  startIcon,
-  style,
-  ...props
-}, reference) => {
+const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+  if (!reference) reference = useRef(null);
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'TabItem'
+  });
+  const {
+    action = {},
+    children,
+    className,
+    color: colorProp,
+    disabled,
+    endIcon,
+    index,
+    label,
+    labelProps,
+    level,
+    onClick,
+    startIcon,
+    style,
+    ...other
+  } = props;
   const {
     tabIndexState,
     setTabIndexState,
-    direction
+    direction,
+    onChange
   } = useContext(TabContext);
-  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const rippleRef = useRef(null);
   const isVertical = direction === 'vertical';
@@ -45,6 +54,7 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (disabled) return;
     rippleRef.current.start(e);
     onClick ? onClick(e, index) : setTabIndexState(index);
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, index);
   };
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -68,28 +78,26 @@ const TabItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       css: [_IconCSS, isEndIcon && EndIconCSS(theme)]
     }, node);
   };
-  return useMemo(() => {
-    return jsx("div", {
-      css: [_TabItemCSS, disabled && _TabItemDisabledCSS, index === tabIndexState && !disabled && _TabItemSelectedCSS],
-      ref: ref,
-      className: classNames('DGN-UI-Tab-Item', disabled && 'disabled', index === tabIndexState && !disabled && 'selected', className),
-      style: style,
-      onClick: _onClick,
-      ...props
-    }, startIcon && renderIcon(startIcon), jsx(Typography, {
-      type: level,
-      color: 'inherit',
-      lineClamp: 1,
-      hoverTooltip: true,
-      ...labelProps
-    }, label), children, endIcon && renderIcon(endIcon, true), jsx(Ripple, {
-      ref: rippleRef,
-      css: pointerEventsNone
-    }), jsx("span", {
-      css: _IndicatorCSS,
-      className: 'Indicator'
-    }));
-  }, [children, className, color, disabled, endIcon, index, label, labelProps, level, onClick, props, startIcon, style, isVertical, tabIndexState, theme]);
+  return jsx("div", {
+    css: [_TabItemCSS, disabled && _TabItemDisabledCSS, index === tabIndexState && !disabled && _TabItemSelectedCSS],
+    ref: ref,
+    className: classNames('DGN-UI-Tab-Item', disabled && 'disabled', index === tabIndexState && !disabled && 'selected', className),
+    style: style,
+    onClick: _onClick,
+    ...other
+  }, startIcon && renderIcon(startIcon), jsx(Typography, {
+    type: level,
+    color: 'inherit',
+    lineClamp: 1,
+    hoverTooltip: true,
+    ...labelProps
+  }, label), children, endIcon && renderIcon(endIcon, true), jsx(Ripple, {
+    ref: rippleRef,
+    css: pointerEventsNone
+  }), jsx("span", {
+    css: _IndicatorCSS,
+    className: 'Indicator'
+  }));
 }));
 const TabItemCSS = (color, isVertical, {
   colors,
@@ -166,37 +174,37 @@ const EndIconCSS = ({
     margin-right: unset;
     margin-left: ${spacing([1])};
 `;
-TabItem.defaultProps = {
-  className: '',
-  color: 'system/rest',
-  disabled: false,
-  label: '',
-  style: {}
-};
+
+// TabItem.defaultProps = {
+//     className: '',
+//     color: 'system/rest',
+//     disabled: false,
+//     label: '',
+//     style: {},
+// };
+
 TabItem.propTypes = {
-  /** Element to display in Tabs (like label). */
+  /** Content to display in the Tabs (like a label). */
   children: PropTypes.node,
-  /** Class for component. */
+  /** CSS class for the component. */
   className: PropTypes.string,
-  /** Color for Tabs. */
+  /** Color for the Tabs. */
   color: PropTypes.string,
-  /** If true, the component is disabled. */
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
-  /** Icon to the right of the button. */
+  /** Icon to display on the right side of the button. */
   endIcon: PropTypes.node,
-  /** Index received in position of TabHeaderButton. */
+  /** Index corresponding to the position of the TabHeaderButton. */
   index: PropTypes.number,
-  /** Data string, if any. */
+  /** The content of the component. */
   label: PropTypes.string,
   /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` label. */
   labelProps: PropTypes.object,
-  /** Callback fired when a "click" event is detected. */
+  /** Callback function fired when a "click" event is detected. */
   onClick: PropTypes.func,
-  /** Icon to the left of the button. */
+  /** Icon to display on the left side of the button. */
   startIcon: PropTypes.node,
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** Any props else. */
-  props: PropTypes.any
+  /** Inline style object for the component. */
+  style: PropTypes.object
 };
 export default TabItem;

package/global/index.js

@@ -58,6 +58,8 @@ const globalObject = {
     day: 'ngày',
     month: 'tháng',
     year: 'năm',
+    save: 'Lưu',
+    now: 'Hiện tại',
     // Localize
     selectAll: 'Chọn tất cả',
     thisFieldIsRequired: 'Trường này bắt buộc nhập',
@@ -131,6 +133,8 @@ const globalObject = {
     day: 'day',
     month: 'month',
     year: 'year',
+    save: 'Save',
+    now: 'Now',
     // Localize
     selectAll: 'Select all',
     thisFieldIsRequired: 'This field is required',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.21",
+  "version": "1.4.23",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -42,6 +42,19 @@ npm test
 
 ## Changelog
 
+## 1.4.22
+
+-   \[Changed\]: TabHeader – Add full width
+
+## 1.4.22
+
+-   \[Added\]: IconMenu – Add MHRP39N0020, MHRP39N0021
+-   \[Changed\]: Tab – Add prop onChange in TabContainer
+-   \[Changed\]: Accordion – Update AccordionSummary propTypes
+-   \[Fixed\]: TimePicker – Fix cannot select time by arrow keys
+-   \[Fixed\]: Modal – Fix warning call Hooks inside useMemo
+-   \[Fixed\]: Image – Fix render img tag when src empty
+
 ## 1.4.21
 
 -   \[Changed\]: Theme – Setup switch theme Dark Light
@@ -65,7 +78,7 @@ npm test
 
 ## 1.4.16
 
--   \[Changed\]: IconMenu – Add MHRM15N0001
+-   \[Added\]: IconMenu – Add MHRM15N0001
 -   \[Changed\]: Dropdown – Return recent search in onClosed callback
 
 ## 1.4.15
@@ -88,7 +101,7 @@ npm test
 
 ## 1.4.12
 
--   \[Changed\]: IconMenu – Add, Update icon for DIGINET EO
+-   \[Added\]: IconMenu – Add, Update icon for DIGINET EO
 -   \[Changed\]: Attachment – Add viewType Picture
 -   \[Changed\]: Calendar – Update design
 -   \[Changed\]: DatePicker – Add picker month, year, quarter
@@ -114,7 +127,7 @@ npm test
 
 ## 1.4.9
 
--   \[Changed\]: IconMenu – Add 16 icon menu of HR Mobile App
+-   \[Added\]: IconMenu – Add 16 icon menu of HR Mobile App
 -   \[Fixed\]: Chip – Fix width of TabHeader
 
 ## 1.4.8
@@ -284,7 +297,7 @@ npm test
 
 ## 1.3.83
 
--   \[Changed\]: IconMenu – Add prop className, style
+-   \[Added\]: IconMenu – Add prop className, style
 -   \[Changed\]: Grid – Add prop verticalAlign
 -   \[Changed\]: Label– Add lineClamp auto
 -   \[Fixed\]: Popover – Fix bug not save last position of anchor

package/theme/settings.js

@@ -680,6 +680,41 @@ const settings = {
         zeroMinWidth: false
       }
     },
+    TabContainer: {
+      defaultProps: {
+        className: '',
+        direction: 'horizontal',
+        level: 'level1',
+        style: {},
+        tabIndex: 0,
+        width: '100%'
+      }
+    },
+    TabHeader: {
+      defaultProps: {
+        centered: false,
+        className: '',
+        scrollButtons: false,
+        style: {},
+        width: '100%'
+      }
+    },
+    TabPanel: {
+      defaultProps: {
+        className: '',
+        lazyLoading: false,
+        style: {}
+      }
+    },
+    TabItem: {
+      defaultProps: {
+        className: '',
+        color: 'system/rest',
+        disabled: false,
+        label: '',
+        style: {}
+      }
+    },
     TextInput: {
       defaultProps: {
         autoComplete: 'off',
@@ -699,6 +734,25 @@ const settings = {
         viewType: 'underlined'
       }
     },
+    TimePicker: {
+      defaultProps: {
+        actionIconAt: 'end',
+        className: '',
+        disabled: false,
+        displayFormat: 'HH:mm:ss',
+        mode12h: false,
+        readOnly: false,
+        required: false,
+        returnFormat: 'HH:mm:ss',
+        error: '',
+        minuteStep: 1,
+        min: '',
+        max: '',
+        label: '',
+        value: '',
+        viewType: 'underlined'
+      }
+    },
     Toggle: {
       defaultProps: {
         disabled: false,