diginet-core-ui 1.3.24

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

@@ -0,0 +1,250 @@
+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 { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import theme from '../../../theme/settings';
+import generateRandom from '../../../utils/randomString';
+import Typography from '../../typography';
+const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
+  disabled,
+  name,
+  size,
+  height,
+  width,
+  label,
+  checked,
+  defaultChecked,
+  onChange,
+  inputRef,
+  inputProps,
+  ...props
+}, ref) => {
+  if (!inputRef) {
+    inputRef = useRef(null);
+  }
+
+  if (size === 'small') {
+    height = 10;
+    width = 20;
+  } else {
+    width = 38;
+    height = 19;
+  }
+
+  const formCheck = css`
+        position: relative;
+        cursor: pointer;
+        user-select: none;
+        padding-left: 3px;
+        &.disabled {
+            pointer-events: none;
+        }
+    `;
+  const toggle = css`
+        display:flex;
+        align-items: center;
+        cursor: pointer;
+        position: relative;
+        box-sizing: border-box;
+        margin: 0;
+    `;
+  const slider = css`
+        position: relative;
+        cursor: pointer;
+        display: block;
+        height: ${height}px;
+        width: ${width}px;
+        border-radius: ${height}px;
+        background: white;
+        border: 1px solid ${theme.colors.border};
+        margin: 0px auto;
+        &::after {
+            content: '';
+            box-sizing: border-box;
+            position: absolute;
+            border-radius: 100%;
+            left: 3%;
+            z-index: 2;
+            background: ${theme.colors.border};
+            transition: 0.3s ease-in-out;
+            top: 49%;
+            transform: translateY(-49%);
+            margin: 0px auto;
+            width: ${width / 12 * 5}px;
+            height: ${width / 12 * 5}px;
+        }
+        &:hover {
+			box-shadow:
+                0 0 2px 2px ${theme.colors.focus};
+			background-color:${theme.colors.focus};
+            border: 1px solid ${theme.colors.primary};
+		}
+    `;
+  const checkbox = css`
+        box-sizing: border-box;
+        left: 0;
+        top: 50%;
+        z-index: 2;
+        &:checked + label > span.css-${slider.name} {
+            border: none;
+            background: ${theme.colors.primary};
+            border: 1px solid transparent;
+            transition: 0.3s ease-in-out;
+            box-shadow:
+                0 0 2px 2px ${theme.colors.focus};
+            &::after {
+                transform: translate(${height}px, -50%);
+                background: white;
+            }
+        }
+        &:hover:checked + label > span.css-${slider.name} {
+            border: none;
+            background: ${theme.colors.primary};
+            border: 1px solid transparent;
+            &::after {
+                background: ${theme.colors.hover};
+            }
+        }
+        &:disabled:checked + label > span.css-${slider.name} {
+            user-select: none;
+            pointer-events: none;
+            cursor: not-allowed;
+            border: none;
+            background: ${theme.colors.disabled};
+            border: 1px solid transparent;
+            box-shadow: initial;
+            &::after {
+                background: ${theme.colors.bgDisabled};
+            }
+        }
+        &:hover:not(:checked) + label > span.css-${slider.name} {
+            background:  ${theme.colors.hover};
+            border: 1px solid ${theme.colors.primary};
+            transition: 0.3s ease-in-out;
+            ::after{
+                background: ${theme.colors.primary};
+            }
+        }
+        &:disabled:not(:checked) + label > span.css-${slider.name} {
+            background:  ${theme.colors.bgDisabled};
+            cursor: not-allowed;
+            user-select: none;
+            border: 1px solid ${theme.colors.disabled};
+            pointer-events: none;
+            ::after{
+                background: ${theme.colors.disabled};
+            }
+        }`;
+  const idDefault = generateRandom(10, {
+    allowNumber: false,
+    allowSymbol: false
+  });
+
+  const handleClick = () => {
+    if (disabled) {
+      return;
+    }
+
+    inputRef.current.checked = !inputRef.current.checked;
+    const e = {
+      value: inputRef.current.checked,
+      target: inputRef.current
+    };
+    if (onChange) onChange(e);
+  };
+
+  useEffect(() => {
+    if (disabled) {
+      inputRef.current.disabled = disabled;
+      inputRef.current.parentNode.parentNode.classList.add('disabled');
+    }
+
+    return () => {
+      if (disabled && inputRef.current) {
+        inputRef.current.disabled = false;
+        inputRef.current.parentNode.parentNode.classList.remove('disabled');
+      }
+    };
+  }, [disabled, onChange]);
+  useEffect(() => {
+    if (typeof checked === 'boolean') {
+      inputRef.current.checked = checked;
+    }
+  }, [checked]);
+  return useMemo(() => jsx("div", _extends({
+    id: 'DGN-Core-Toggle-' + (id ? id : idDefault),
+    css: formCheck,
+    ref: ref
+  }, props), jsx("input", _extends({}, inputProps, {
+    ref: inputRef,
+    hidden: true,
+    type: "checkbox",
+    css: checkbox,
+    defaultChecked: defaultChecked || checked
+  })), jsx("label", {
+    css: toggle,
+    onClick: handleClick
+  }, jsx("span", {
+    css: slider
+  }), label !== undefined && jsx(Typography, {
+    style: {
+      marginLeft: '8px',
+      marginBottom: 0
+    },
+    mapping: 'label'
+  }, label))), [disabled, onChange]);
+}));
+Toggle.defaultProps = {
+  disabled: false,
+  defaultChecked: false,
+  label: '',
+  value: '',
+  id: '',
+  size: ''
+};
+Toggle.propTypes = {
+  /** * If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+
+  /** If `true`, the component is defaultChecked. */
+  defaultChecked: PropTypes.bool,
+
+  /** If `true`, the component is checked. */
+  checked: PropTypes.bool,
+
+  /** the size options default and small */
+  size: PropTypes.string,
+
+  /** Id is randomized randomly to avoid duplication. */
+  id: PropTypes.string,
+
+  /** 
+  * Name attribute of the `input` element. 
+  */
+  name: PropTypes.string,
+
+  /** The name of the Radio is displayed on the interface */
+  label: PropTypes.string,
+
+  /** height is a number, height of Toggle default 19 */
+  height: PropTypes.number,
+
+  /** width is a number, width of Toggle default 38 */
+  width: PropTypes.number,
+
+  /** props for input */
+  inputProps: PropTypes.object,
+
+  /** * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean). 
+   */
+  onChange: PropTypes.func
+};
+export default Toggle;

package/components/form-view/helper-text.js

@@ -0,0 +1,33 @@
+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); }
+
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '../';
+const HelperText = /*#__PURE__*/memo(({
+  text,
+  style,
+  ...props
+}) => {
+  const helperText = {
+    display: 'block',
+    marginTop: 5,
+    marginBottom: 5
+  };
+  return /*#__PURE__*/React.createElement(Typography, _extends({
+    type: 'p3',
+    style: { ...helperText,
+      ...style
+    }
+  }, props), text);
+});
+HelperText.defaultProps = {
+  text: ''
+};
+HelperText.propTypes = {
+  /** helper text for input */
+  text: PropTypes.string,
+
+  /** style inline of helper text in HelperText component */
+  style: PropTypes.object
+};
+export default HelperText;

package/components/form-view/index.js

@@ -0,0 +1,107 @@
+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 { jsx, css } from '@emotion/core';
+import PropTypes from 'prop-types';
+import Input from '../form-view/input';
+import Label from '../form-view/label';
+import HelperText from '../form-view/helper-text';
+import { dark4 } from '../../styles/colors';
+
+const FormLabel = ({
+  label,
+  inputProps,
+  inputStyleProps,
+  helperTextProps,
+  viewType,
+  value,
+  text,
+  dataType,
+  format,
+  utc,
+  thousandSeparator,
+  thousandChar
+}) => {
+  const inform = css`
+      margin-bottom: 1rem;
+      &.disabled {
+          pointer-events: none;
+          border-color: ${dark4};
+          path {
+              fill: transparent;
+          }
+          &::before {
+              border-color: ${dark4};
+          }
+      }
+  `;
+  return jsx("div", {
+    css: inform
+  }, jsx(Label, {
+    label: label
+  }), jsx(Input, {
+    value: value,
+    inputProps: inputProps,
+    inputStyleProps: inputStyleProps,
+    dataType: dataType,
+    viewType: viewType,
+    format: format,
+    utc: utc,
+    thousandSeparator: thousandSeparator,
+    thousandChar: thousandChar
+  }), jsx(HelperText, _extends({
+    text: text
+  }, helperTextProps)));
+};
+
+FormLabel.defaultProps = {
+  label: '',
+  value: '',
+  text: '',
+  viewType: 'underlined',
+  dataType: 'none',
+  format: 'MM/DD/YYYY',
+  utc: 'false',
+  thousandSeparator: 'false',
+  thousandChar: ','
+};
+FormLabel.propTypes = {
+  /** utc for Form label */
+  utc: PropTypes.bool,
+
+  /** thousandSeparator for Form label */
+  thousandSeparator: PropTypes.bool,
+
+  /** thousandChar for Form label */
+  thousandChar: PropTypes.string,
+
+  /** label for Form label */
+  label: PropTypes.string,
+
+  /** the displayed value for each change */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+
+  /** text for Form label */
+  text: PropTypes.string,
+
+  /** viewType for Form label */
+  viewType: PropTypes.string,
+
+  /** dataType for Form label */
+  dataType: PropTypes.string,
+
+  /** props of span in InputView comp** dataType for Form label */
+  format: PropTypes.string,
+
+  /** props of span in format component */
+  inputProps: PropTypes.object,
+
+  /** style inline of span in InputView component */
+  inputStyleProps: PropTypes.object,
+
+  /** props for helper text */
+  helperTextProps: PropTypes.object
+};
+export default FormLabel;

package/components/form-view/input.js

@@ -0,0 +1,129 @@
+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 { jsx, css } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, useRef, memo, useEffect, useMemo } from 'react';
+import { dark4 } from '../../styles/colors';
+import { fontFamily } from '../../styles/typography';
+import { formatDate } from '../../utils';
+const InputView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  inputProps,
+  inputStyleProps,
+  value,
+  viewType,
+  dataType,
+  format,
+  utc,
+  thousandChar
+}, ref) => {
+  if (!ref) {
+    ref = useRef(null);
+  }
+
+  const inputRef = useRef(null);
+  const TextInput = viewType !== 'outlined' ? css`
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        position: relative;
+        font-family: ${fontFamily};
+        padding-bottom: 6px;
+        padding-top: 6px;
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-bottom: 1px solid ${dark4};
+        }
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0px;
+            right: 0px;
+            bottom: -1px;
+            border-bottom: 2px solid transparent;
+            transform: scaleX(0);
+            transform-origin: center;
+            transition: all 0.2s ease;
+        }
+    ` : css`
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        position: relative;
+        font-family: ${fontFamily};
+        border: 1px solid ${dark4};
+        border-radius: 4px;
+        height: 40px;
+        box-sizing: border-box;
+        &::after {
+            content: '';
+            position: absolute;
+            left: -2px;
+            right: -2px;
+            top: -2px;
+            bottom: -2px;
+            border: 2px solid transparent;
+            border-radius: 4px;
+            pointer-events: none;
+        }
+    `;
+
+  const numberWithFormat = (x, thousandChar) => {
+    let a = '';
+
+    switch (thousandChar) {
+      case ',':
+        a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        break;
+
+      case '.':
+        a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        break;
+
+      default:
+        a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+
+    return a;
+  };
+
+  const dateWithFormat = date => {
+    value = formatDate(date, format, utc);
+    return value;
+  };
+
+  useEffect(() => {
+    if (dataType === 'integer' && format !== null) {
+      inputRef.current.innerHTML = numberWithFormat(value, thousandChar);
+    }
+
+    if (dataType === 'date' && format !== null) {
+      inputRef.current.innerHTML = dateWithFormat(value);
+    }
+  }, [value]);
+  return useMemo(() => jsx("span", _extends({}, inputProps, {
+    style: inputStyleProps,
+    css: TextInput,
+    ref: inputRef
+  }), value));
+}));
+InputView.defaultProps = {
+  label: ''
+};
+InputView.propTypes = {
+  /** the displayed value for each change */
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+
+  /** props of span in InputView component */
+  inputProps: PropTypes.object,
+
+  /** style inline of span in InputView component */
+  inputStyleProps: PropTypes.object
+};
+export default InputView;