diginet-core-ui 1.3.45 → 1.3.47

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

@@ -3,11 +3,11 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useState, useRef } from 'react';
+import { forwardRef, memo, useState, useRef, useEffect, useMemo } from 'react';
 import theme from '../../../theme/settings';
 import { randomString } from '../../../utils';
 import Typography from './../../typography';
-import { cursorPointer, borderBox, positionAbsolute, positionRelative, displayNone, displayBlock, pointerEventsNone, cursorNotAllowed } from '../../../styles/general';
+import { cursorPointer, borderBox, positionAbsolute, positionRelative, displayNone, displayBlock, cursorNoDrop } from '../../../styles/general';
 const {
   spacing,
   colors: {
@@ -24,6 +24,7 @@ const {
 const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   disabled,
+  readOnly,
   name,
   defaultChecked,
   checked,
@@ -34,8 +35,7 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onChange,
   inputRef,
   inputProps,
-  lineClamp,
-  hoverTooltip,
+  labelProps,
   ...props
 }, ref) => {
   if (!inputRef) {
@@ -46,127 +46,140 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowNumber: false,
     allowSymbol: false
   }));
-  const formCheck = css`
-                ${positionRelative};
-                ${displayBlock};
-                &.disabled {
-                    ${pointerEventsNone};
-                }
-            `;
-  const formCheckInput = css`
-                ${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;
-                }
-                &:checked ~ label:before {
-                    border-color: ${clSystemActive};
-                }
-                &:disabled + label {
-                    ${pointerEventsNone};
-                    ${cursorNotAllowed};
-                    color: ${clDisabled};
-                    &::after {
-                        background: ${clDisabled};
-                    }
-                    &::before {
-                        border-color: ${clDisabled};
-                    }
-                }
-            `;
-  const formCheckLabel = css`
-                ${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%;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    left: 0;
-                    content: '';
-                    border: 2px solid ${clSystemRest};
-                    transition: 0.28s ease;
-                }
-            `;
+  const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
+
+  const _formCheckInputCSS = formCheckInputCSS(width);
+
+  const _formCheckLabelCSS = formCheckLabelCSS(width);
 
   const handleChange = e => {
-    const el = { ...e
+    if (disabled || readOnly) return;
+    if (checked === undefined) setCheckedState(true);
+    e = {
+      value: value,
+      target: { ...inputRef.current,
+        checked: true
+      }
     };
-    el.value = value !== null && value !== void 0 ? value : label;
-    onChange && onChange(el);
+    if (onChange) onChange(e);
   };
 
-  return jsx("div", {
-    id: 'DGN-Core-Radio-' + (id || unique),
-    css: formCheck,
-    className: ['DGN-UI-Radio', disabled ? 'disabled' : '', className].join(' ').trim(),
-    ref: ref,
-    ...props
-  }, jsx("input", { ...inputProps,
-    disabled: disabled,
-    ref: inputRef,
-    name: name,
-    hidden: true,
-    checked: checked,
-    type: "radio",
-    defaultChecked: defaultChecked,
-    css: formCheckInput,
-    id: id || unique,
-    onChange: handleChange
-  }), jsx("label", {
-    css: formCheckLabel,
-    htmlFor: id || unique
-  }, jsx(Typography, {
-    color: disabled ? clDisabled : '',
-    type: 'p1',
-    lineClamp: lineClamp,
-    hoverTooltip: hoverTooltip
-  }, label !== null && label !== void 0 ? label : value)));
+  useEffect(() => {
+    if (checked !== undefined) setCheckedState(Boolean(checked));
+  }, [checked]);
+  return useMemo(() => {
+    return jsx("div", {
+      id: 'DGN-Core-Radio-' + (id || unique),
+      css: formCheckCSS,
+      className: ['DGN-UI-Radio', className].join(' ').trim().replace(/\s+/g, ' '),
+      ref: ref,
+      ...props
+    }, jsx("input", { ...inputProps,
+      disabled: disabled,
+      ref: inputRef,
+      name: name,
+      hidden: true,
+      checked: checkedState,
+      type: "radio",
+      css: _formCheckInputCSS,
+      id: id || unique,
+      onChange: handleChange
+    }), jsx("label", {
+      css: _formCheckLabelCSS,
+      className: `${disabled ? 'disabled' : ''} ${readOnly ? 'read-only' : ''}`,
+      htmlFor: id || unique,
+      onClick: handleChange
+    }, jsx(Typography, {
+      color: disabled ? clDisabled : '',
+      type: 'p1',
+      ...labelProps
+    }, label !== null && label !== void 0 ? label : value)));
+  }, [disabled, onChange, readOnly, checkedState]);
 }));
+const formCheckCSS = css`
+    ${displayBlock};
+    padding: ${spacing(0.5)}px;
+`;
+
+const formCheckInputCSS = width => css`
+    ${positionAbsolute};
+    ${borderBox};
+    ${displayNone};
+    &: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;
+    }
+    &:checked ~ label:before {
+        border-color: ${clSystemActive};
+    }
+`;
+
+const formCheckLabelCSS = width => css`
+    ${displayBlock};
+    ${positionRelative};
+    ${cursorPointer};
+    margin-bottom: 0 !important;
+    padding-left: ${width + spacing(1.5)}px;
+    min-height: ${width}px;
+    &:hover:not(.disabled):not(.read-only)::before {
+        box-shadow: 0 0 0 2px ${clFillHover};
+        background: ${clFillHover};
+    }
+    &.disabled,
+    &.read-only {
+        ${cursorNoDrop};
+    }
+    &.disabled {
+        color: ${clDisabled};
+        &:after {
+            background: ${clDisabled} !important;
+        }
+        &:before {
+            border-color: ${clDisabled} !important;
+        }
+    }
+    &:before {
+        ${positionAbsolute};
+        ${borderBox};
+        width: ${width}px;
+        height: ${width}px;
+        border-radius: 50%;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        content: '';
+        border: 2px solid ${clSystemRest};
+        transition: 0.28s ease;
+    }
+`;
+
 Radio.defaultProps = {
   disabled: false,
+  readOnly: false,
   defaultChecked: false,
   label: '',
   value: '',
   className: '',
-  width: 20
+  width: 20,
+  labelProps: {}
 };
 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,
 
   /** Id is randomized randomly to avoid duplication. */
@@ -176,7 +189,7 @@ Radio.propTypes = {
   name: PropTypes.string,
 
   /** The value of the component. The DOM API casts this to a string. */
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /** The name of the Radio is displayed on the interface */
   label: PropTypes.string,
@@ -184,7 +197,7 @@ Radio.propTypes = {
   /** The class for Radio component */
   className: PropTypes.string,
 
-  /** props for input */
+  /** Props for input. */
   inputProps: PropTypes.object,
 
   /** Callback fired when the state is changed.
@@ -195,10 +208,10 @@ Radio.propTypes = {
    *  */
   onChange: PropTypes.func,
 
-  /** The line-clamp property truncates text at a specific number of lines. */
-  lineClamp: PropTypes.number,
+  /** Prevent all event if true. */
+  readOnly: PropTypes.bool,
 
-  /** If true, hover will show tooltip when text clamped. */
-  hoverTooltip: PropTypes.bool
+  /** Props for Typography of label. */
+  labelProps: PropTypes.object
 };
 export default Radio;