diginet-core-ui 1.3.37 → 1.3.39

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

@@ -3,10 +3,24 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useState, useEffect, useRef } from 'react';
+import { forwardRef, memo, useState, useRef } from 'react';
 import theme from '../../../theme/settings';
 import { randomString } from '../../../utils';
-import { typography } from '../../../styles/typography';
+import Typography from './../../typography';
+import { cursorPointer, borderBox, positionAbsolute, positionRelative, displayNone, displayBlock, pointerEventsNone, cursorNotAllowed } from '../../../styles/general';
+const {
+  spacing,
+  colors: {
+    fill: {
+      hover: clFillHover
+    },
+    system: {
+      active: clSystemActive,
+      rest: clSystemRest
+    },
+    disabled: clDisabled
+  }
+} = theme;
 const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   disabled,
@@ -16,9 +30,12 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   value,
   label,
   className,
+  width,
   onChange,
   inputRef,
   inputProps,
+  lineClamp,
+  hoverTooltip,
   ...props
 }, ref) => {
   if (!inputRef) {
@@ -30,155 +47,77 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowSymbol: false
   }));
   const formCheck = css`
-                display: block;
-                position: relative;
-                cursor: pointer;
-                user-select: none;
+                ${positionRelative};
+                ${displayBlock};
                 &.disabled {
-                    pointer-events: none;
+                    ${pointerEventsNone};
                 }
-                width: max-content;
             `;
   const formCheckInput = css`
-                display: none;
-                position: absolute;
-                box-sizing: border-box;
-                &:disabled + label {
-                    pointer-events: none;
-                }
-                &:checked + label::after {
-                    background-color: ${theme.colors.primary};
-                    border: 1px solid ${theme.colors.primary};
-                    transform: scale(0.5);
-                    z-index: 0;
-                    -webkit-transform: scale(0.6);
-                    -ms-transform: scale(0.6);
-                }
-                &:checked + label::before {
-                    border: 1px solid ${theme.colors.primary};
-                }
-                &:not(:checked) + label:hover::after,
-                &:not(:checked) + label:hover::before {
-                    background: ${theme.colors.hover};
-                    border: 1px solid ${theme.colors.primary};
-                }
-                &:not(:checked) + label::after,
-                &:not(:checked) + label::before {
-                    background-color: white;
-                    border: 1px solid ${theme.colors.border};
-                }
-                &:checked:disabled + label::after {
-                    pointer-events: none;
-                    cursor: not-allowed;
-                    background: ${theme.colors.disabled};
-                    border: 1px solid ${theme.colors.disabled};
-                }
-                &:checked:disabled + label::before {
-                    pointer-events: none;
-                    cursor: not-allowed;
-                    background: ${theme.colors.dark12};
-                    border: 1px solid ${theme.colors.disabled};
+                ${positionAbsolute};
+                ${borderBox};
+                ${displayNone};
+                &:hover ~ label::before {
+                    box-shadow: 0 0 0 2px ${clFillHover};
+                    background: ${clFillHover};
+                }
+                &:checked ~ label:after {
+                    ${borderBox};
+                    ${positionAbsolute};
+                    width: ${width / 2}px;
+                    height: ${width / 2}px;
+                    left: ${width / 4}px;
+                    background: ${clSystemActive};
+                    border-radius: 50%;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    content: '';
+                    transition: 0.28s ease;
                 }
-                &:not(:checked):disabled + label::after {
-                    pointer-events: none;
-                    cursor: not-allowed;
-                    background: ${theme.colors.dark12};
-                    border: 1px solid ${theme.colors.disabled};
+                &:checked ~ label:before {
+                    border-color: ${clSystemActive};
                 }
-                &:not(:checked):disabled + label::before {
-                    pointer-events: none;
-                    cursor: not-allowed;
-                    background: ${theme.colors.dark12};
-                    border: 1px solid ${theme.colors.disabled};
+                &:disabled + label {
+                    ${pointerEventsNone};
+                    ${cursorNotAllowed};
+                    color: ${clDisabled};
+                    &::after {
+                        background: ${clDisabled};
+                    }
+                    &::before {
+                        border-color: ${clDisabled};
+                    }
                 }
             `;
   const formCheckLabel = css`
-                display: block;
-                cursor: pointer;
-                position: relative;
-                padding-left: 2.19rem;
-                ${typography.paragraph1};
-                margin-bottom: 0;
-                transition: 0.28s ease;
-                -o-transition: 0.28s ease;
-                -webkit-transition: 0.28s ease;
-                &::after {
-                    box-sizing: border-box;
-                    content: '';
-                    position: absolute;
-                    height: 18px;
-                    left: 0;
-                    margin: 2px;
-                    transition: 0.28s ease;
-                    top: 0;
-                    width: 18px;
-                    z-index: 0;
+                ${displayBlock};
+                ${positionRelative};
+                ${cursorPointer};
+                padding-left: ${width + spacing(1.5)}px;
+                min-height: ${width}px;
+                margin: 2px;
+                &:before {
+                    ${positionAbsolute};
+                    ${borderBox};
+                    width: ${width}px;
+                    height: ${width}px;
                     border-radius: 50%;
-                    -webkit-transition: 0.28s ease;
-                }
-                &::before {
-                    box-sizing: border-box;
-                    content: '';
-                    position: absolute;
-                    height: 18px;
+                    top: 50%;
+                    transform: translateY(-50%);
                     left: 0;
-                    margin: 2px;
+                    content: '';
+                    border: 2px solid ${clSystemRest};
                     transition: 0.28s ease;
-                    top: 0;
-                    width: 18px;
-                    z-index: 0;
-                    border-radius: 50%;
-                    -webkit-transition: 0.28s ease;
-                }
-                &:hover::after {
-                    background: ${theme.colors.hover};
-                    border: 1px solid ${theme.colors.primary};
-                }
-                &:hover::before {
-                    background: ${theme.colors.hover};
-                    border: 1px solid ${theme.colors.primary};
-                }
-                &:hover::after {
-                    box-shadow: 0 0 2px 2px ${theme.colors.focus};
-                    background-color: ${theme.colors.focus};
-                }
-                &:hover::before {
-                    box-shadow: 0 0 2px 2px ${theme.colors.focus};
-                    background-color: ${theme.colors.focus};
                 }
             `;
 
   const handleChange = e => {
     const el = { ...e
     };
-    el.value = value || label;
-    onChange(el);
+    el.value = value !== null && value !== void 0 ? value : label;
+    onChange && onChange(el);
   };
 
-  useEffect(() => {
-    if (disabled) {
-      inputRef.current.disabled = disabled;
-      inputRef.current.parentNode.classList.add('disabled');
-    }
-
-    return () => {
-      if (disabled) {
-        inputRef.current.disabled = false;
-        inputRef.current.parentNode.classList.remove('disabled');
-      }
-    };
-  }, [disabled, onChange]);
-  useEffect(() => {
-    if (typeof checked === 'boolean') {
-      inputRef.current.checked = checked;
-    }
-
-    return () => {
-      if (typeof checked === 'boolean' && inputRef.current) {
-        inputRef.current.checked = null;
-      }
-    };
-  }, [checked]);
   return jsx("div", {
     id: 'DGN-Core-Radio-' + (id || unique),
     css: formCheck,
@@ -190,36 +129,43 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: inputRef,
     name: name,
     hidden: true,
+    checked: checked,
     type: "radio",
     defaultChecked: defaultChecked,
     css: formCheckInput,
     id: id || unique,
-    onChange: onChange ? handleChange : null
+    onChange: handleChange
   }), jsx("label", {
     css: formCheckLabel,
     htmlFor: id || unique
-  }, ' ', label || value));
+  }, jsx(Typography, {
+    color: disabled ? clDisabled : '',
+    type: 'p1',
+    lineClamp: lineClamp,
+    hoverTooltip: hoverTooltip
+  }, label !== null && label !== void 0 ? label : value)));
 }));
 Radio.defaultProps = {
   disabled: false,
   defaultChecked: false,
   label: '',
   value: '',
-  className: ''
+  className: '',
+  width: 20
 };
 Radio.propTypes = {
-  /**
-   * If `true`, the component is disabled.
+  /**
+   * If `true`, the component is disabled.
    */
   disabled: PropTypes.bool,
 
-  /**
-   * If `true`, the component is checked.
+  /**
+   * If `true`, the component is checked.
    */
   checked: PropTypes.bool,
 
-  /**
-   * If `true`, the component is defaultChecked.
+  /**
+   * If `true`, the component is defaultChecked.
    */
   defaultChecked: PropTypes.bool,
 
@@ -241,12 +187,18 @@ Radio.propTypes = {
   /** 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 value by accessing `event.target.value` (string).
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+  /** Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    *  */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+
+  /** The line-clamp property truncates text at a specific number of lines. */
+  lineClamp: PropTypes.number,
+
+  /** If true, hover will show tooltip when text clamped. */
+  hoverTooltip: PropTypes.bool
 };
 export default Radio;

package/components/form-control/text-input/index.js

@@ -497,10 +497,10 @@ TextInput.propTypes = {
   /** on focus function */
   onFocus: PropTypes.func,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),