diginet-core-ui 1.3.24

package/components/form-view/label.js

@@ -0,0 +1,38 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { memo } from 'react';
+import { dark8 } from '../../styles/colors';
+import { fontFamily } from '../../styles/typography';
+const Label = /*#__PURE__*/memo(({
+  label,
+  labelProps
+}) => {
+  const labelText = css`
+        display: block;
+        color: ${dark8};
+        font-family: ${fontFamily};
+        font-style: normal;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 16px;
+        margin-bottom: 5px;
+    `;
+  return jsx("label", {
+    style: labelProps,
+    css: labelText
+  }, label);
+});
+Label.defaultProps = {
+  label: ''
+};
+Label.propTypes = {
+  /** label for input */
+  label: PropTypes.string,
+
+  /** style inline of label in Label component */
+  labelProps: PropTypes.object
+};
+export default Label;

package/components/index.js

@@ -0,0 +1,100 @@
+import * as components from '.'; //TOOLTIP
+
+export { default as Tooltip } from './tooltip/index'; //TEXT
+
+export { default as Typography } from './typography'; // PROGRESS
+
+export { default as CircularProgress } from './progress/circular';
+export { default as LinearProgress } from './progress/linear'; // ACCORDION
+
+export { default as Accordion } from './accordion';
+export { default as AccordionSummary } from './accordion/summary';
+export { default as AccordionDetails } from './accordion/details';
+export { default as AccordionGroup } from './accordion/group'; // ALERT
+
+export { default as Alert } from './alert';
+export { default as Notify } from './alert/notify'; // AVATAR
+
+export { default as Avatar } from './avatar'; // BADGE
+
+export { default as Badge } from './badge'; // BUTTON
+
+export { default as Button } from './button';
+export { default as ButtonIcon } from './button/icon'; // CARD
+
+export { default as CardContainer } from './card'; // CHART
+
+export { default as PieChart } from './chart/Pie';
+export { default as ColumnChart } from './chart/bar';
+export { default as LineChart } from './chart/line'; // CHECK-TEXT
+
+export { default as CheckTextConfirmation } from './check-text/interview-confirmation';
+export { default as CheckTextStatus } from './check-text/interview-status'; // CHIP
+
+export { default as Chip } from './chip';
+export { default as AttachChip } from './chip/attach'; // COLLAPSE
+
+export { default as Collapse } from './collapse'; // DIVIDER
+
+export { default as Divider } from './divider'; // FORM CONTROL
+
+export { default as Attachment } from './form-control/attachment';
+export { default as Checkbox } from './form-control/checkbox';
+export { default as DatePicker } from './form-control/date-picker';
+export { default as DateRangePicker } from './form-control/date-range-picker';
+export { default as TimePicker } from './form-control/time-picker';
+export { default as Dropdown } from './form-control/dropdown';
+export { default as DropdownBox } from './form-control/dropdown-box';
+export { default as FormGroup } from './form-control/form-group';
+export { default as Radio } from './form-control/radio';
+export { default as InputBase } from './form-control/input-base';
+export { default as Label } from './form-control/label';
+export { default as HelperText } from './form-control/helper-text';
+export { default as TextInput } from './form-control/text-input';
+export { default as MoneyInput } from './form-control/money-input';
+export { default as NumberInput } from './form-control/number-input';
+export { default as Toggle } from './form-control/toggle'; // List
+
+export { default as List } from './list/list';
+export { default as ListItem } from './list/list-item';
+export { default as ListItemIcon } from './list/list-item-icon';
+export { default as ListItemText } from './list/list-item-text';
+export { default as ListItemAction } from './list/list-item-action'; // MODAL
+
+export { default as ModalSample } from './modal';
+export { default as Modal } from './modal/modal';
+export { default as ModalHeader } from './modal/header';
+export { default as ModalBody } from './modal/body';
+export { default as ModalFooter } from './modal/footer'; // PAGING
+
+export { default as PagingInfo } from './paging/page-info';
+export { default as PagingSelector } from './paging/page-selector'; // PAPER
+
+export { default as Paper } from './paper'; // POPOVER
+
+export { default as Popover } from './popover'; // POPUP
+
+export { default as Popup } from './popup';
+export { default as PopupV2 } from './popup/v2';
+export { default as DangerPopup } from './popup/danger_popup';
+export { default as ProposalsPopup } from './popup/proposals_popup'; // SLIDER
+
+export { default as Slider } from './slider/slider-container';
+export { default as SliderItem } from './slider/slider-item'; // Rating
+
+export { default as Rating } from './rating'; // STATUS
+
+export { default as Status } from './status'; // TAB
+
+export { default as TabContainer } from './tab/tab-container';
+export { default as TabHeader } from './tab/tab-header';
+export { default as TabPanel } from './tab/tab-panel';
+export { default as TabItem } from './tab/tab'; // TREE VIEW
+
+export { default as Transfer } from './transfer'; // TREE VIEW
+
+export { default as TreeView } from './tree-view'; // OTHERS
+
+export { default as Extra } from './others/extra';
+export { default as ScrollBar } from './others/scrollbar';
+export default components;

package/components/list/list-item-action.js

@@ -0,0 +1,82 @@
+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, forwardRef, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+import Icon from '../../icons';
+const ListItemAction = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  name,
+  className,
+  style,
+  onClick,
+  refs,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const ListItemActionRoot = css`
+        display: flex;
+        position: relative;
+        align-items: center;
+        max-height: 24px;
+        margin-left: 16px;
+        line-height: 40px;
+        color: ${theme.colors.primary};
+        background-color: transparent;
+        box-sizing: border-box;
+        order: 3;
+        z-index: 1;
+    `;
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  const ListItemActionView = useMemo(() => {
+    let node = children;
+
+    if (!node) {
+      node = jsx(Icon, {
+        name: name,
+        viewBox: true,
+        onClick: onClick
+      });
+    }
+
+    return jsx("div", _extends({
+      className: 'DGN-UI-List-Item-Action ' + className,
+      css: ListItemActionRoot,
+      ref: ref,
+      style: style
+    }, props), node);
+  }, [children, name, style]);
+  return ListItemActionView;
+}));
+ListItemAction.defaultProps = {
+  className: ''
+};
+ListItemAction.propTypes = {
+  /** the name of icon to display in ListItemAction (used instead of children) */
+  name: PropTypes.string,
+
+  /** classes name for list item action */
+  className: PropTypes.string,
+
+  /** the function to get ref of ListItemAction */
+  refs: PropTypes.func,
+
+  /** the function for click event */
+  onClick: PropTypes.func,
+
+  /** style inline of ListItemAction */
+  style: PropTypes.object,
+
+  /** content to display in ListItem */
+  children: PropTypes.node
+};
+export default ListItemAction;

package/components/list/list-item-icon.js

@@ -0,0 +1,76 @@
+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, forwardRef, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+import * as Icons from '../../icons';
+const ListItemIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  name,
+  style,
+  refs,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const ListItemIconRoot = css`
+        display: flex;
+        position: relative;
+        align-items: center;
+        min-width: 40px;
+        color: ${theme.colors.primary};
+        background-color: transparent;
+        box-sizing: border-box;
+        order: 1;
+        z-index: 1;
+    `;
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  const ListItemIconView = useMemo(() => {
+    let node = children;
+
+    if (!node) {
+      const Icon = Icons[name];
+
+      if (Icon) {
+        node = jsx(Icon, null);
+      }
+    }
+
+    return jsx("div", _extends({
+      css: ListItemIconRoot,
+      className: 'DGN-UI-List-Item-Icon ' + className,
+      ref: ref,
+      style: style
+    }, props), node);
+  }, [children, name]);
+  return ListItemIconView;
+}));
+ListItemIcon.defaultProps = {
+  className: ''
+};
+ListItemIcon.propTypes = {
+  /** the name of icon to display in ListItemIcon (used instead of children) */
+  name: PropTypes.string,
+
+  /** class for ListItemIcon */
+  className: PropTypes.string,
+
+  /** the function to get ref of ListItemIcon */
+  refs: PropTypes.func,
+
+  /** style inline of ListItemIcon */
+  style: PropTypes.object,
+
+  /** the icon to display in ListItem */
+  children: PropTypes.node
+};
+export default ListItemIcon;

package/components/list/list-item-text.js

@@ -0,0 +1,57 @@
+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, forwardRef, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import { Typography } from '../';
+const ListItemText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  style,
+  refs,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const ListItemTextRoot = css`
+        display: flex;
+        flex: 1 1 auto;
+        position: relative;
+        align-items: center;
+        background-color: inherit;
+        box-sizing: border-box;
+        order: 2;
+    `;
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  const ListItemTextView = useMemo(() => jsx("div", _extends({
+    css: ListItemTextRoot,
+    className: 'DGN-UI-List-Item-Text ' + className,
+    ref: ref,
+    style: style
+  }, props), jsx(Typography, null, children)), [children]);
+  return ListItemTextView;
+}));
+ListItemText.defaultProps = {
+  className: ''
+};
+ListItemText.propTypes = {
+  /** class for ListItemText */
+  className: PropTypes.string,
+
+  /** the function to get ref of ListItemText */
+  refs: PropTypes.func,
+
+  /** style inline of ListItemText */
+  style: PropTypes.object,
+
+  /** content to display in ListItem */
+  children: PropTypes.node
+};
+export default ListItemText;

package/components/list/list-item.js

@@ -0,0 +1,114 @@
+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, forwardRef, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import theme from '../../theme/settings';
+import Ripple from '../button/ripple-effect';
+const ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  style,
+  onClick,
+  button,
+  inset,
+  refs,
+  ...props
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const ListItemRoot = css`
+        display: flex;
+        position: relative;
+        flex: 1 1 auto;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+        max-width: 360px;
+        height: auto;
+        min-height: 32px;
+        padding: 0 16px;
+        color: ${theme.colors.primary};
+        overflow: hidden;
+        background-color: inherit;
+        box-sizing: border-box;
+        &.click-able {
+            cursor: pointer;
+            user-select: none;
+            &:hover {
+                background-color: ${theme.colors.hover};
+            }
+        }
+        &.DGN-Active {
+            background-color: ${theme.colors.hover};
+        }
+        &.inset {
+            padding-left: 56px;
+        }
+    `;
+
+  const handleClick = e => {
+    const {
+      currentTarget,
+      target
+    } = e;
+    const actionNode = currentTarget.querySelector('.DGN-UI-List-Item-Action');
+
+    if (!actionNode || !actionNode.contains(target)) {
+      onClick(e);
+    }
+  };
+
+  useEffect(() => {
+    if (refs) refs(ref);
+  }, []);
+  useEffect(() => {
+    if (inset) {
+      ref.current.classList.add('inset');
+    }
+
+    return () => {
+      if (inset && ref.current) {
+        ref.current.classList.remove('inset');
+      }
+    };
+  }, [inset]);
+  const ListItemView = useMemo(() => jsx("div", _extends({
+    css: ListItemRoot,
+    className: 'DGN-UI-List-Item ' + (onClick ? 'click-able ' : '') + className,
+    ref: ref,
+    onClick: onClick ? handleClick : null,
+    style: style
+  }, props), children, button && jsx(Ripple, {
+    color: '#8F9BB3'
+  })), [children, button, style]);
+  return ListItemView;
+}));
+ListItem.defaultProps = {
+  className: ''
+};
+ListItem.propTypes = {
+  /** has the same effect as a button if true */
+  button: PropTypes.bool,
+
+  /** classes name for list item */
+  className: PropTypes.string,
+
+  /** the function to get ref of ListItem */
+  refs: PropTypes.func,
+
+  /** the function for click event */
+  onClick: PropTypes.func,
+
+  /** style inline of ListItem */
+  style: PropTypes.object,
+
+  /** includes ListItemIcon, ListItemText, ListItemAction */
+  children: PropTypes.node
+};
+export default ListItem;