diginet-core-ui 1.3.24 → 1.3.29

package/icons/effect.js

@@ -1,59 +1,22 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, useEffect, useMemo, forwardRef } from 'react';
+import { memo, useRef, useMemo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { success5, success7, warning5, warning7, danger5, danger7, info5, info7, brand, blue13, dark1, dark4, dark6, dark12 } from '../styles/colors';
+import { color as colors } from '../styles/colors';
 import * as Icons from './basic';
 import { capitalize } from '../utils';
-import { useTheme } from '../theme';
 const {
-  colors
-} = useTheme();
-
-const getColor = name => {
-  switch (capitalize(name)) {
-    case 'Approval':
-      return {
-        color: success5,
-        pressed: success7
-      };
-
-    case 'Delete':
-      return {
-        color: warning5,
-        pressed: warning7
-      };
-
-    case 'Cancel':
-    case 'Close':
-      return {
-        color: danger5,
-        pressed: danger7
-      };
-
-    case 'Edit':
-    case 'View':
-      return {
-        color: info5,
-        pressed: info7
-      };
-
-    default:
-      return {
-        color: brand,
-        pressed: '#697CCE'
-      };
+  system: {
+    rest
   }
-};
-
+} = colors;
 const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   name,
   className,
+  style,
   color,
   width,
   height,
@@ -67,80 +30,62 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   const dgnIcon = css`
-        display: inline-flex;
+        display: flex;
         justify-content: center;
         align-items: center;
         width: max-content;
         height: max-content;
         min-width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
         min-height: ${width ? isNaN(height) ? height : height + 'px' : '24px'};
-        padding: ${viewBox ? type === 'filled' ? 0 : 4 : Math.floor((width || 24) / 8)}px;
-        margin: ${type === 'filled' ? 4 : 0}px;
-        color: ${type === 'filled' ? 'white' : colors[color] || color};
-        background-color: ${type === 'filled' ? brand : 'transparent'};
-        border-radius: 50%;
         outline: none;
         box-sizing: border-box;
-        cursor: ${onClick ? 'pointer' : 'default'};
         user-select: none;
-        &:hover {
-            color: ${getColor(name).color};
-            background-color: ${type === 'filled' ? blue13 : 'transparent'};
-        }
-        &:focus {
-            color: ${type === 'filled' ? 'white' : getColor(name).pressed};
-            background-color: ${type === 'filled' ? getColor(name).pressed : 'transparent'};
-        }
-        &:active {
-            color: ${getColor(name).color};
-            background-color: ${dark1};
-        }
-        &.disabled {
-            color: ${dark4} !important;
-            background-color: ${dark12} !important;
-            pointer-events: none;
-        }
     `;
-  useEffect(() => {
-    if (disabled && ref.current) {
-      ref.current.classList.add('disabled');
-    }
-
-    return () => {
-      if (disabled && ref.current) {
-        ref.current.classList.remove('disabled');
-      }
-    };
-  }, [disabled]);
-  const IconEffect = useMemo(() => {
+  const NotFoundIcon = css`
+        display: flex;
+        box-sizing: border-box;
+        width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+        height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+        border: 1px dashed ${rest};
+    `;
+  return useMemo(() => {
     if (!name) return null;
+    let node = null;
     const IconComp = Icons[capitalize(name)];
-    if (!IconComp) return null;
-    return jsx("span", _extends({
+
+    if (IconComp) {
+      node = jsx(IconComp, {
+        width: width,
+        height: height,
+        color: color,
+        viewBox: viewBox
+      });
+    } else {
+      node = jsx("span", {
+        css: NotFoundIcon
+      });
+    }
+
+    return jsx("span", {
       className: 'DGN-UI-Icon ' + className,
+      style: style,
       css: dgnIcon,
-      tabIndex: -1,
       ref: ref,
-      onClick: onClick
-    }, props), jsx(IconComp, {
-      width: width,
-      height: height,
-      color: 'currentColor',
-      viewBox: viewBox
-    }));
-  }, [name, type, color, width, height, onClick]);
-  return IconEffect;
+      onClick: onClick,
+      ...props
+    }, node);
+  }, [name, color, width, height, className, style, viewBox, onClick]);
 }));
 Icon.defaultProps = {
-  type: 'default',
   className: '',
-  color: dark6,
-  disabled: false,
-  viewBox: false
+  color: rest,
+  viewBox: true
 };
 Icon.propTypes = {
-  /** used to fill/non-fill background for icon */
-  type: PropTypes.oneOf(['default', 'filled']),
+  /** name of icon in icons store */
+  name: PropTypes.string.isRequired,
+
+  /** the width of icon */
 
   /** color of icon<br />
    * default: #7F828E
@@ -150,8 +95,8 @@ Icon.propTypes = {
   /** className of icon in icons store */
   className: PropTypes.string,
 
-  /** name of icon in icons store */
-  name: PropTypes.string.isRequired,
+  /** style of icon in icons store */
+  style: PropTypes.object,
 
   /** the width of icon */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -162,10 +107,7 @@ Icon.propTypes = {
   /** have view box if true */
   viewBox: PropTypes.bool,
 
-  /** prevent all event if true */
-  disabled: PropTypes.bool,
-
-  /** function for click event on icon */
+  /** have view box if true */
   onClick: PropTypes.func
 };
 export default Icon;

package/package.json

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

package/readme.md

@@ -37,6 +37,72 @@ To test run
 npm test
 ```
 
+## Changelog
+## 1.3.28
+- \[Added\]: Icon - Bug, Link
+- \[Added\]: MenuIcon - MHRM09N0004, MHRP29N0023
+- \[Changed\]: Accordion - Update Accordion, add expended like expend (keep prop expend), fix logic
+- \[Changed\]: Button - Add HOC OptionWrapper to Button
+- \[Changed\]: ButtonIcon - Add custom width height
+- \[Fixed\]: Button - Fix Typography white-space nowrap, icon width height, add min-width, hide prop 'text'
+- \[Fixed\]: Dropdown - Fix bug clear data Dropdown close DropdownBox
+- \[Fixed\]: PopupV2 - Fix wrong icon color of type danger
+- \[Fixed\]: Accordion - Fix css min-height AccordionSummary
+- \[Fixed\]: Button, ButtonIcon - Remove prop disabled in tag <button>
+- \[Fixed\]: ButtonIcon - Fix ref of ButtonIcon, Add HOC OptionWrapper
+- \[Fixed\]: Tab - Fix css, Add style, className
+
+## 1.3.27
+- \[Added\]: MenuIcon - D05, D06, D90R, DBC, MHRP09N0030, MHRP09N0031, MHRP29N0021, MHRP29N0022
+- \[Added\]: Icon - Share, InsuranceHistory, School, Assessment, Ninedot, MoreHoriz, HalfClock, List, Treeview, NotificationV2, Website, Update, InfoCancel, CheckList, SpeedHigh, SpeedLow, PersonSync, SaveCancel, ApprovalOutLine, ApprovalCancel, FilterFilled
+- \[Changed\]: TECH - Check and correct typography of all components
+- \[Changed\]: TECH - Check and correct colors of some components
+- \[Changed\]: PageInfo - Phát triển lại component PageInfo
+- \[Changed\]: Icon - Remove effect; fix css; change storybook
+- \[Changed\]: PopupV2 - Replace close button with ButtonIcon (Design update)
+- \[Changed\]: ButtonIcon - Add props colorHover to custom hover color for ButtonIcon with color 'default'
+- \[Changed\]: Badge - Phát triển lại component Badge
+- \[Changed\]: Icon - Change icon Archive to ApprovalFilled
+- \[Changed\]: DropdownBox - Add props onChangeInput, delayOnInput
+- \[Changed\]: Icon - Fix storybook remove outlineIcon, underlineIcon
+- \[Changed\]: Icon - PersonRate, Warehouse, PersonHistory, FolderInsurance, Maximize, Minimize, Scan, ArrowLeftFilled, ArrowRightFilled, ArrowUpFilled, ArrowDownFilled, CancelFilled, CloseFilled, BackFilled, AddFilled, PlusFilled, MinusFilled, Setting, Notification, Logout, LogoutV2, Login, Failed, PaperFilled, ListAprroval, StarFilled, StarOutline
+- \[Fixed\]: Status - Fix height not flexible; Fix perfect pixel
+- \[Fixed\]: Button - Fix perfect pixel
+- \[Fixed\]: Dropdown - Optimize code
+- \[Fixed\]: PopupV2 - Fix bug show less, more of description
+- \[Fixed\]: Alert - Fix perfect pixel; Add size tiny
+- \[Fixed\]: Attachment - Update localize
+- \[Fixed\]: Button - Remove margin css
+- \[Fixed\]: Label - Add css ellipsis, fix colors
+- \[Fixed\]: Divider - Fix css, colors
+- \[Fixed\]: Dropdown - Fix show wrong icon clear
+- \[Fixed\]: Rating - Optimize code
+- \[Fixed\]: DropdownBox - Fix bug not show dropdown
+- \[Fixed\]: Button - Fix css Button with icon and Button without icon not in same row
+- \[Fixed\]: TECH - Fix wrong color of Alert, Button, ButtonIcon, Paging, PopupV2, Rating
+- \[Fixed\]: Dropdown - Fix bug show hide wrong on mobile
+- \[Fixed\]: Datepicker - Fix bug not show defaultValue, warning when pass moment instance to date prop
+- \[Fixed\]: Status - Fix css text to nowrap
+- \[Fixed\]: Dropdown - Fix bug not show error when use multiple
+
+## 1.3.25
+- \[Added\]: Icon - PersonRate
+- \[Added\]: MenuIcon - MHRP39N0015, MHRP29N0012, TASK, MHRP09N0028, MHRP09N0029
+- \[Changed\]: MenuIcon - Rename Menu Icon ERP
+- \[Changed\]: ButtonIcon - Update UI (Design update)
+- \[Changed\]: Fonts - Add fonts to assets
+- \[Changed\]: TECH - Replace <Icon /> with <ButtonIcon />
+- \[Changed\]: Icon - Bag, Calendar, Clock, Copy, Edit, Export, Login, Logout, Mail, Mapping, Marker, Paper, Phone, PlanePaper, QuestionMark, Save, Send, Wait, Menu
+- \[Fixed\]: Chip - Fix css width not max-content
+- \[Fixed\]: Avatar - Fix bug Cannot read properties of null (reading 'querySelector')
+- \[Fixed\]: DropdownBox - Fix bug DropdownBox not close when open modal
+- \[Fixed\]: Dropdown - Remove ::after border-color when focus
+- \[Changed\]: InputBase - Add text-overflow ellipsis
+- \[Fixed\]: Dropdown - Fix bug cannot read properties of null (reading 'childNodes')
+- \[Fixed\]: Dropdown - Fix bug scrollbar covering search bar of treeview
+- \[Fixed\]: Avatar - Fix bug wrong size of default icon
+- \[Fixed\]: PopupV2 - Fix bug not set open state when call onConfirm, onCancel
+
 ## Changelog
 ## 1.3.24
 - \[Add\]: Icon - HourGlass

package/styles/color-helper.js

@@ -286,6 +286,8 @@ export const darken = (color, coefficient) => {
  */
 
 export const lighten = (color, coefficient) => {
+  if (isColorName(color)) color = isColorName(color);
+  if (!isColor(color)) return;
   color = decomposeColor(color);
   coefficient = clamp(coefficient);
 
@@ -329,149 +331,6 @@ export const detectColor = color => {
 
   return null;
 };
-export const colorNames = {
-  aliceblue: '#f0f8ff',
-  antiquewhite: '#faebd7',
-  aqua: '#00ffff',
-  aquamarine: '#7fffd4',
-  azure: '#f0ffff',
-  beige: '#f5f5dc',
-  bisque: '#ffe4c4',
-  black: '#000000',
-  blanchedalmond: '#ffebcd',
-  blue: '#0000ff',
-  blueviolet: '#8a2be2',
-  brown: '#a52a2a',
-  burlywood: '#deb887',
-  cadetblue: '#5f9ea0',
-  chartreuse: '#7fff00',
-  chocolate: '#d2691e',
-  coral: '#ff7f50',
-  cornflowerblue: '#6495ed',
-  cornsilk: '#fff8dc',
-  crimson: '#dc143c',
-  cyan: '#00ffff',
-  darkblue: '#00008b',
-  darkcyan: '#008b8b',
-  darkgoldenrod: '#b8860b',
-  darkgray: '#a9a9a9',
-  darkgreen: '#006400',
-  darkkhaki: '#bdb76b',
-  darkmagenta: '#8b008b',
-  darkolivegreen: '#556b2f',
-  darkorange: '#ff8c00',
-  darkorchid: '#9932cc',
-  darkred: '#8b0000',
-  darksalmon: '#e9967a',
-  darkseagreen: '#8fbc8f',
-  darkslateblue: '#483d8b',
-  darkslategray: '#2f4f4f',
-  darkturquoise: '#00ced1',
-  darkviolet: '#9400d3',
-  deeppink: '#ff1493',
-  deepskyblue: '#00bfff',
-  dimgray: '#696969',
-  dodgerblue: '#1e90ff',
-  firebrick: '#b22222',
-  floralwhite: '#fffaf0',
-  forestgreen: '#228b22',
-  fuchsia: '#ff00ff',
-  gainsboro: '#dcdcdc',
-  ghostwhite: '#f8f8ff',
-  gold: '#ffd700',
-  goldenrod: '#daa520',
-  gray: '#808080',
-  green: '#008000',
-  greenyellow: '#adff2f',
-  honeydew: '#f0fff0',
-  hotpink: '#ff69b4',
-  indianred: '#cd5c5c',
-  indigo: '#4b0082',
-  ivory: '#fffff0',
-  khaki: '#f0e68c',
-  lavender: '#e6e6fa',
-  lavenderblush: '#fff0f5',
-  lawngreen: '#7cfc00',
-  lemonchiffon: '#fffacd',
-  lightblue: '#add8e6',
-  lightcoral: '#f08080',
-  lightcyan: '#e0ffff',
-  lightgoldenrodyellow: '#fafad2',
-  lightgreen: '#90ee90',
-  lightgrey: '#d3d3d3',
-  lightpink: '#ffb6c1',
-  lightsalmon: '#ffa07a',
-  lightseagreen: '#20b2aa',
-  lightskyblue: '#87cefa',
-  lightslategray: '#778899',
-  lightsteelblue: '#b0c4de',
-  lightyellow: '#ffffe0',
-  lime: '#00ff00',
-  limegreen: '#32cd32',
-  linen: '#faf0e6',
-  magenta: '#ff00ff',
-  maroon: '#800000',
-  mediumaquamarine: '#66cdaa',
-  mediumblue: '#0000cd',
-  mediumorchid: '#ba55d3',
-  mediumpurple: '#9370d8',
-  mediumseagreen: '#3cb371',
-  mediumslateblue: '#7b68ee',
-  mediumspringgreen: '#00fa9a',
-  mediumturquoise: '#48d1cc',
-  mediumvioletred: '#c71585',
-  midnightblue: '#191970',
-  mintcream: '#f5fffa',
-  mistyrose: '#ffe4e1',
-  moccasin: '#ffe4b5',
-  navajowhite: '#ffdead',
-  navy: '#000080',
-  oldlace: '#fdf5e6',
-  olive: '#808000',
-  olivedrab: '#6b8e23',
-  orange: '#ffa500',
-  orangered: '#ff4500',
-  orchid: '#da70d6',
-  palegoldenrod: '#eee8aa',
-  palegreen: '#98fb98',
-  paleturquoise: '#afeeee',
-  palevioletred: '#d87093',
-  papayawhip: '#ffefd5',
-  peachpuff: '#ffdab9',
-  peru: '#cd853f',
-  pink: '#ffc0cb',
-  plum: '#dda0dd',
-  powderblue: '#b0e0e6',
-  purple: '#800080',
-  rebeccapurple: '#663399',
-  red: '#ff0000',
-  rosybrown: '#bc8f8f',
-  royalblue: '#4169e1',
-  saddlebrown: '#8b4513',
-  salmon: '#fa8072',
-  sandybrown: '#f4a460',
-  seagreen: '#2e8b57',
-  seashell: '#fff5ee',
-  sienna: '#a0522d',
-  silver: '#c0c0c0',
-  skyblue: '#87ceeb',
-  slateblue: '#6a5acd',
-  slategray: '#708090',
-  snow: '#fffafa',
-  springgreen: '#00ff7f',
-  steelblue: '#4682b4',
-  tan: '#d2b48c',
-  teal: '#008080',
-  thistle: '#d8bfd8',
-  tomato: '#ff6347',
-  turquoise: '#40e0d0',
-  violet: '#ee82ee',
-  wheat: '#f5deb3',
-  white: '#ffffff',
-  whitesmoke: '#f5f5f5',
-  yellow: '#ffff00',
-  yellowgreen: '#9acd32'
-};
 /**
  * Validate a color name.
  *
@@ -480,9 +339,9 @@ export const colorNames = {
  */
 
 export const isColorName = color => {
-  const plaintColor = color.replace(/\s+/g, '').trim().toLowerCase();
-  if (typeof colorNames[plaintColor] !== 'undefined') return colorNames[plaintColor];
-  return false;
+  let ctx = document.createElement('canvas').getContext('2d');
+  ctx.fillStyle = color;
+  return ctx.fillStyle === '#000000' ? false : ctx.fillStyle;
 };
 /**
  * Convert from #ffffff to rgba()
@@ -492,6 +351,8 @@ export const isColorName = color => {
  */
 
 export const hexToRGBA = (hex, alpha) => {
+  if (isColorName(hex)) hex = isColorName(hex);
+  if (!isColor(hex)) return;
   var r = parseInt(hex.slice(1, 3), 16),
       g = parseInt(hex.slice(3, 5), 16),
       b = parseInt(hex.slice(5, 7), 16);

package/styles/colors.js

@@ -273,7 +273,6 @@ color.fill = {
   sidebar: color.white,
   headerbar: color.brand12,
   tabbar: color.brand12,
-  "tabbar-active": color.brand,
   "scrollbar-tabbar": color.brand13,
   "odd_raw": color.brand21,
   "even_raw": color.white,
@@ -303,4 +302,9 @@ color.line = {
   "grid_w_header": color.white,
   category: color.dark2,
   tab: color.dark2
-};
+};
+color.primary = color.system.active;
+color.success = color.semantic.success;
+color.warning = color.semantic.warning;
+color.danger = color.semantic.danger;
+color.info = color.semantic.info;

package/styles/font.js

@@ -0,0 +1,9 @@
+export const font = {
+  fontFamily: `"SF Pro Display"`,
+  fontFamilyLink: require("../assets/fonts/SF-Pro-Display-Regular.otf"),
+  fontFamilyMedium: `"SF Pro Display Medium"`,
+  fontFamilyMediumLink: require("../assets/fonts/SF-Pro-Display-Medium.otf"),
+  fontFamilyBold: `"SF Pro Display Bold"`,
+  fontFamilyBoldLink: require("../assets/fonts/SF-Pro-Display-Bold.otf"),
+  fontSize: "16px"
+};

package/styles/general.js

@@ -32,17 +32,110 @@ export const fontSizes = {
   xxlarge: '1.424rem'
 };
 export const flexRow = css`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+    display: flex;
+`;
+export const inlineFlex = css`
+    display: inline-flex;
 `;
 export const flexCol = css`
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
+`;
+export const flexRowReverse = css`
+    flex-direction: row-reverse;
+`;
+export const flexWrap = css`
+    flex-wrap: wrap;
+`;
+export const alignStart = css`
+    align-items: flex-start;
+`;
+export const alignCenter = css`
+    align-items: center;
+`;
+export const alignEnd = css`
+    align-items: flex-end;
+`;
+export const justifyStart = css`
+    justify-content: flex-start;
+`;
+export const justifyCenter = css`
+    justify-content: center;
+`;
+export const justifyEnd = css`
+    justify-content: flex-end;
+`;
+export const displayBlock = css`
+    display: block;
+`;
+export const displayInlineBlock = css`
+    display: inline-block;
+`;
+export const positionRelative = css`
+    position: relative;
+`;
+export const positionAbsolute = css`
+    position: absolute;
+`;
+export const positionFixed = css`
+    position: fixed;
+`;
+export const borderRadius4px = css`
+    border-radius: 4px;
+`;
+export const borderBox = css`
+    box-sizing: border-box;
+`;
+export const cursorPointer = css`
+    cursor: pointer;
+`;
+export const overflowHidden = css`
+    overflow: hidden;
+`;
+export const backgroundTransparent = css`
+    background-color: transparent;
+`;
+export const ellipsis = css`
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+`;
+export const whiteSpaceNoWrap = css`
+    white-space: nowrap;
+`;
+export const breakWord = css`
+    word-break: break-word;
+`;
+export const textCapitalize = css`
+    text-transform: capitalize;
+`;
+export const textUppercase = css`
+    text-transform: uppercase;
+`;
+export const outlineNone = css`
+    outline: none;
+`;
+export const userSelectNone = css`
+    user-select: none;
+`;
+export const pointerEventsNone = css`
+    pointer-events: none;
+`;
+export const borderNone = css`
+    border: none;
+`;
+export const textCenter = css`
+    text-align: center;
 `;
 export const noMargin = css`
-  margin: 0 !important;
+    margin: 0 !important;
+`;
+export const noPadding = css`
+    padding: 0 !important;
+`;
+export const noBorder = css`
+    border: none !important;
 `;
 export const border = (withVl, colorVl) => css`
-  border: ${parseToPixel(withVl)} solid ${colorVl || color.dark};
+    border: ${parseToPixel(withVl)} solid ${colorVl || color.dark};
 `;