diginet-core-ui 1.3.24

package/icons/effect.js

@@ -0,0 +1,171 @@
+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 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 * 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'
+      };
+  }
+};
+
+const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  type,
+  name,
+  className,
+  color,
+  width,
+  height,
+  viewBox,
+  disabled,
+  onClick,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const dgnIcon = css`
+        display: inline-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(() => {
+    if (!name) return null;
+    const IconComp = Icons[capitalize(name)];
+    if (!IconComp) return null;
+    return jsx("span", _extends({
+      className: 'DGN-UI-Icon ' + className,
+      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;
+}));
+Icon.defaultProps = {
+  type: 'default',
+  className: '',
+  color: dark6,
+  disabled: false,
+  viewBox: false
+};
+Icon.propTypes = {
+  /** used to fill/non-fill background for icon */
+  type: PropTypes.oneOf(['default', 'filled']),
+
+  /** color of icon<br />
+   * default: #7F828E
+   */
+  color: PropTypes.string,
+
+  /** className of icon in icons store */
+  className: PropTypes.string,
+
+  /** name of icon in icons store */
+  name: PropTypes.string.isRequired,
+
+  /** the width of icon */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** the height of icon */
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** have view box if true */
+  viewBox: PropTypes.bool,
+
+  /** prevent all event if true */
+  disabled: PropTypes.bool,
+
+  /** function for click event on icon */
+  onClick: PropTypes.func
+};
+export default Icon;

package/icons/general/clock/clock.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Clock = ({
+  width = '1em',
+  height = '1em',
+  pathFill = 'currentColor'
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.4167 8.625H10.5417V5.75C10.5417 5.22004 10.1123 4.79167 9.58333 4.79167C9.05433 4.79167 8.625 5.22004 8.625 5.75V9.58333C8.625 10.1133 9.05433 10.5417 9.58333 10.5417H13.4167C13.9466 10.5417 14.375 10.1133 14.375 9.58333C14.375 9.05338 13.9466 8.625 13.4167 8.625ZM9.58333 17.25C5.35612 17.25 1.91667 13.8105 1.91667 9.58333C1.91667 5.35612 5.35612 1.91667 9.58333 1.91667C13.8105 1.91667 17.25 5.35612 17.25 9.58333C17.25 13.8105 13.8105 17.25 9.58333 17.25ZM9.58333 0C4.29908 0 0 4.29908 0 9.58333C0 14.8676 4.29908 19.1667 9.58333 19.1667C14.8676 19.1667 19.1667 14.8676 19.1667 9.58333C19.1667 4.29908 14.8676 0 9.58333 0Z",
+    fill: pathFill
+  }));
+};
+
+export default Clock;

package/icons/general/color-handler/background.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const BackgroundColor = ({
+  width = '1em',
+  height = '1em',
+  pathFill = 'currentColor'
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 34.522 20"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group_12",
+    "data-name": "Group 12",
+    transform: "translate(-1083 -1243)"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group_5",
+    "data-name": "Group 5",
+    transform: "translate(733 1233)",
+    clipPath: "url(#clip-path)"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_14",
+    "data-name": "Path 14",
+    d: "M380,22.434a.7.7,0,0,1-.255-.047.661.661,0,0,1-.215-.136l-3.857-3.621a.6.6,0,0,1,0-.883.7.7,0,0,1,.94,0L380,20.927l3.387-3.179a.664.664,0,0,1,.215-.135.707.707,0,0,1,.51,0,.666.666,0,0,1,.215.135.63.63,0,0,1,.145.2.6.6,0,0,1,.05.239.582.582,0,0,1-.051.239.612.612,0,0,1-.144.2l-3.857,3.621a.661.661,0,0,1-.215.136.7.7,0,0,1-.255.047Z",
+    fill: pathFill
+  })), /*#__PURE__*/React.createElement("path", {
+    id: "Path_18",
+    "data-name": "Path 18",
+    d: "M367.152,10a1.641,1.641,0,0,0-1.18.49l-6.9,6.9-.01.01a.01.01,0,0,1-.01.01l-2.079,2.079a2.515,2.515,0,0,0,0,3.538,2.509,2.509,0,0,0,3.538,0l2.079-2.079h.01l.01-.01,6.9-6.906a1.672,1.672,0,0,0,0-2.359l-1.18-1.179A1.655,1.655,0,0,0,367.152,10Zm-7.816,11.834a.834.834,0,1,1-1.18-1.179l1.49-1.489,1.179,1.179ZM362,19.165l-1.179-1.179,6.317-6.317,1.179,1.179Z",
+    transform: "translate(733 1233)",
+    fill: pathFill
+  }), /*#__PURE__*/React.createElement("path", {
+    id: "Path_19",
+    "data-name": "Path 19",
+    d: "M368.321,25.412H351.669A1.672,1.672,0,0,0,350,27.081v1.249A1.672,1.672,0,0,0,351.669,30h16.662A1.672,1.672,0,0,0,370,28.331V27.081A1.681,1.681,0,0,0,368.321,25.412Zm0,2.909H351.669V27.071h16.662v1.249Z",
+    transform: "translate(733 1233)",
+    fill: pathFill
+  })));
+};
+
+export default BackgroundColor;

package/icons/general/color-handler/text.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const TextColor = ({
+  width = '1em',
+  height = '1em',
+  pathFill = 'currentColor'
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 34.522 20"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group_11",
+    "data-name": "Group 11",
+    transform: "translate(-1035 -1243)"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_11",
+    "data-name": "Path 11",
+    d: "M320.34,25.41H303.67A1.673,1.673,0,0,0,302,27.08v1.25A1.673,1.673,0,0,0,303.67,30h16.67a1.673,1.673,0,0,0,1.67-1.67V27.08A1.667,1.667,0,0,0,320.34,25.41Zm0,2.91H303.67V27.07h16.67Z",
+    transform: "translate(733 1233)",
+    fill: pathFill
+  }), /*#__PURE__*/React.createElement("path", {
+    id: "Path_12",
+    "data-name": "Path 12",
+    d: "M317.84,14.16a.828.828,0,0,0,.83-.83v-2.5a.828.828,0,0,0-.83-.83H306.17a.828.828,0,0,0-.83.83v2.5a.83.83,0,0,0,1.66,0V11.66h2.5v10h-1.25a.83.83,0,0,0,0,1.66h7.5a.83.83,0,0,0,0-1.66H314.5v-10H317v1.67A.85.85,0,0,0,317.84,14.16Zm-5,7.5h-1.67v-10h1.67Z",
+    transform: "translate(733 1233)",
+    fill: pathFill
+  }), /*#__PURE__*/React.createElement("g", {
+    id: "Group_4",
+    "data-name": "Group 4",
+    transform: "translate(733 1233)",
+    clipPath: "url(#clip-path)"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_13",
+    "data-name": "Path 13",
+    d: "M332,22.434a.7.7,0,0,1-.255-.047.661.661,0,0,1-.215-.136l-3.857-3.621a.6.6,0,0,1,0-.883.7.7,0,0,1,.94,0L332,20.927l3.387-3.179a.664.664,0,0,1,.215-.135.707.707,0,0,1,.51,0,.666.666,0,0,1,.215.135.63.63,0,0,1,.145.2.6.6,0,0,1,.05.239.582.582,0,0,1-.051.239.612.612,0,0,1-.144.2l-3.857,3.621a.661.661,0,0,1-.215.136.7.7,0,0,1-.255.047Z",
+    fill: pathFill
+  }))));
+};
+
+export default TextColor;

package/icons/general/emoji/emoji.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const Emoji = ({
+  width = '1em',
+  height = '1em',
+  pathFill = 'currentColor'
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 34.522 20"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group_13",
+    "data-name": "Group 13",
+    transform: "translate(-1131 -1243)"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group_6",
+    "data-name": "Group 6",
+    transform: "translate(733 1233)",
+    clipPath: "url(#clip-path)"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_15",
+    "data-name": "Path 15",
+    d: "M428,22.434a.7.7,0,0,1-.255-.047.661.661,0,0,1-.215-.136l-3.857-3.621a.6.6,0,0,1,0-.883.7.7,0,0,1,.94,0L428,20.927l3.387-3.179a.664.664,0,0,1,.215-.135.707.707,0,0,1,.51,0,.666.666,0,0,1,.215.135.63.63,0,0,1,.145.2.6.6,0,0,1,.05.239.582.582,0,0,1-.051.239.612.612,0,0,1-.144.2l-3.857,3.621a.661.661,0,0,1-.215.136.7.7,0,0,1-.255.047Z",
+    fill: pathFill
+  })), /*#__PURE__*/React.createElement("path", {
+    id: "Path_51",
+    "data-name": "Path 51",
+    d: "M415.07,27.069a10,10,0,1,0-14.147,0A10.02,10.02,0,0,0,415.07,27.069ZM402.005,14.015a8.459,8.459,0,1,1,0,11.963A8.471,8.471,0,0,1,402.005,14.015Zm.03,3.316v-.08a1.555,1.555,0,0,1,1.433-1.653h2.444a1.46,1.46,0,0,1,1.363,1.152h1.593A1.46,1.46,0,0,1,410.23,15.6h2.445a1.555,1.555,0,0,1,1.433,1.653v.08a1.555,1.555,0,0,1-1.433,1.653H410.23a1.55,1.55,0,0,1-1.432-1.613h-1.463a1.55,1.55,0,0,1-1.433,1.613h-2.444A1.554,1.554,0,0,1,402.035,17.331Zm10.289,4.749a4.785,4.785,0,0,1-8.676-.02.568.568,0,0,1,.311-.741.538.538,0,0,1,.22-.04.563.563,0,0,1,.521.351,3.656,3.656,0,0,0,6.592,0,.563.563,0,1,1,1.032.451Z",
+    transform: "translate(733 1233)",
+    fill: pathFill
+  })));
+};
+
+export default Emoji;

package/icons/general/font-properties/bold.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Bold = ({
+  width = '1em',
+  height = '1em',
+  pathFill = 'currentColor'
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 13.89 20"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_7",
+    "data-name": "Path 7",
+    d: "M211.87,19.51a5.551,5.551,0,0,0-3.9-9.51h-5.86A1.114,1.114,0,0,0,201,11.11V28.89A1.114,1.114,0,0,0,202.11,30h7.22a5.55,5.55,0,0,0,2.54-10.49Zm-8.64-7.29h4.75a3.33,3.33,0,1,1,0,6.66h-4.75Zm6.11,15.56h-6.11V21.11h6.11a3.335,3.335,0,0,1,0,6.67Z",
+    transform: "translate(-201 -10)",
+    fill: pathFill
+  }));
+};
+
+export default Bold;

package/icons/general/font-properties/font-family.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const FontFamily = ({
+  width = '1em',
+  height = '1em',
+  pathFill = 'currentColor'
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 32.522 20"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group_9",
+    "data-name": "Group 9",
+    transform: "translate(-829 -1243)"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group_2",
+    "data-name": "Group 2",
+    transform: "translate(733 1233)",
+    clipPath: "url(#clip-path)"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_1",
+    "data-name": "Path 1",
+    d: "M124,22.434a.7.7,0,0,1-.255-.047.661.661,0,0,1-.215-.136l-3.857-3.621a.6.6,0,0,1,0-.883.7.7,0,0,1,.94,0L124,20.927l3.387-3.179a.664.664,0,0,1,.215-.135.707.707,0,0,1,.51,0,.665.665,0,0,1,.215.135.631.631,0,0,1,.145.2.6.6,0,0,1,.05.239.582.582,0,0,1-.051.239.612.612,0,0,1-.144.2l-3.857,3.621a.661.661,0,0,1-.215.136.7.7,0,0,1-.255.047Z",
+    fill: pathFill
+  })), /*#__PURE__*/React.createElement("path", {
+    id: "Path_2",
+    "data-name": "Path 2",
+    d: "M110.55,14.55a.913.913,0,0,0,.91-.91V10.91a.913.913,0,0,0-.91-.91H96.91a.913.913,0,0,0-.91.91v2.73a.91.91,0,1,0,1.82,0V11.82H101V28.18H99.18A.91.91,0,1,0,99.19,30h9.09a.91.91,0,1,0,0-1.82h-1.82V11.82h3.18v1.82A.913.913,0,0,0,110.55,14.55Zm-5.91,13.63h-1.82V11.82h1.82Z",
+    transform: "translate(733 1233)",
+    fill: pathFill
+  })));
+};
+
+export default FontFamily;

package/icons/general/font-properties/font-size.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const FontSize = ({
+  width = '1em',
+  height = '1em',
+  pathFill = 'currentColor'
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 35.522 20.001",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M32 14.4345C31.9126 14.4348 31.826 14.4187 31.7453 14.3873C31.6645 14.356 31.5912 14.3099 31.5295 14.2517L27.6727 10.631C27.5479 10.5139 27.4778 10.3551 27.4778 10.1895C27.4778 10.0238 27.5478 9.865 27.6726 9.74788C27.7973 9.63076 27.9665 9.56495 28.143 9.56494C28.3194 9.56493 28.4886 9.63071 28.6134 9.74782L32 12.927L35.3866 9.74782C35.4483 9.68983 35.5217 9.64384 35.6024 9.61246C35.6831 9.58108 35.7696 9.56494 35.857 9.56494C35.9443 9.56495 36.0308 9.58111 36.1115 9.6125C36.1922 9.64388 36.2656 9.68989 36.3273 9.74788C36.3891 9.80587 36.4381 9.87472 36.4715 9.95049C36.5049 10.0263 36.5221 10.1075 36.5221 10.1895C36.5221 10.2715 36.5049 10.3527 36.4715 10.4284C36.438 10.5042 36.389 10.5731 36.3273 10.631L32.4704 14.2517C32.4087 14.3099 32.3354 14.356 32.2547 14.3873C32.1739 14.4187 32.0874 14.4348 32 14.4345Z",
+    fill: pathFill
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M22.1273 9.01758H12.0433C11.521 9.01758 11.0938 9.44487 11.0938 9.96711V12.4264C11.0938 12.9486 11.521 13.3759 12.0433 13.3759C12.5655 13.3759 12.9928 12.9486 12.9928 12.4264V10.9071H16.1452V20.1016H14.683C14.1607 20.1016 13.7334 20.5288 13.7334 21.0511C13.7334 21.5733 14.1607 22.0006 14.683 22.0006H19.4971C20.0193 22.0006 20.4466 21.5733 20.4466 21.0511C20.4466 20.5288 20.0193 20.1016 19.4971 20.1016H18.0348V10.9071H21.1872V12.4169C21.1872 12.9391 21.6145 13.3664 22.1367 13.3664C22.659 13.3664 23.0863 12.9391 23.0863 12.4169V9.95761C23.0768 9.43537 22.6495 9.01758 22.1273 9.01758Z",
+    fill: pathFill
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12.0335 2H1.94953C1.42729 2 1 2.42729 1 2.94953V5.4088C1 5.93104 1.42729 6.35833 1.94953 6.35833C2.47177 6.35833 2.89905 5.93104 2.89905 5.4088V3.88956H6.05148V20.101H4.58921C4.06697 20.101 3.63968 20.5283 3.63968 21.0505C3.63968 21.5727 4.06697 22 4.58921 22H9.40331C9.92555 22 10.3528 21.5727 10.3528 21.0505C10.3528 20.5283 9.92555 20.101 9.40331 20.101H7.94104V3.88956H11.0935V5.39931C11.0935 5.92155 11.5208 6.34883 12.043 6.34883C12.5652 6.34883 12.9925 5.92155 12.9925 5.39931V2.94953C12.983 2.42729 12.5557 2 12.0335 2Z",
+    fill: pathFill
+  }));
+};
+
+export default FontSize;

package/icons/general/font-properties/italic.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const Italic = ({
+  width = '1em',
+  height = '1em',
+  pathFill = 'currentColor'
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 5.296 20"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_8",
+    "data-name": "Path 8",
+    d: "M241.46,15.04a1.26,1.26,0,0,1,.243,1.016l-2.16,11.159a1.177,1.177,0,0,1,.964,2.139l-.741.413a1.819,1.819,0,0,1-1.991-.138,1.915,1.915,0,0,1-.741-1.906l2.086-10.8h-.5a1.175,1.175,0,0,1,0-2.35h1.927A1.244,1.244,0,0,1,241.46,15.04ZM240.92,10a1.4,1.4,0,1,0,1.376,1.4A1.385,1.385,0,0,0,240.92,10Z",
+    transform: "translate(-237 -10)",
+    fill: pathFill
+  }));
+};
+
+export default Italic;

package/icons/general/font-properties/underline.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const Underline = ({
+  width = '1em',
+  height = '1em',
+  pathFill = 'currentColor'
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 12.661 19.999"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group_18",
+    "data-name": "Group 18",
+    transform: "translate(-999 -1243)"
+  }, /*#__PURE__*/React.createElement("path", {
+    id: "Path_9",
+    "data-name": "Path 9",
+    d: "M277.663,10a.994.994,0,0,0-1,1v8.669a4.335,4.335,0,0,1-8.669,0V11a1,1,0,0,0-2,0v8.669A6.333,6.333,0,0,0,272.331,26a6.334,6.334,0,0,0,6.33-6.331V11A1,1,0,0,0,277.663,10Z",
+    transform: "translate(733 1233)",
+    fill: pathFill
+  }), /*#__PURE__*/React.createElement("path", {
+    id: "Path_10",
+    "data-name": "Path 10",
+    d: "M277.663,28H267a1,1,0,0,0,0,2h10.665a.994.994,0,0,0,1-1A1.006,1.006,0,0,0,277.663,28Z",
+    transform: "translate(733 1233)",
+    fill: pathFill
+  })));
+};
+
+export default Underline;