@qn-pandora/pandora-component 3.0.2 → 4.0.0

package/es/components/RadioGroup/index.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+declare type BasicType = string | number | boolean;
+export interface IOption<T = BasicType> {
+    /**
+     * 选项的值
+     */
+    value: T;
+    /**
+     * 选项的展示形式：string类型或者React组件
+     */
+    item: string | React.ReactNode;
+    /**
+     * 禁用选项
+     */
+    disabled?: boolean;
+}
+export interface IRadioGroupProps<T = BasicType> {
+    /**
+     * 当前值
+     */
+    value?: T;
+    /**
+     * 选中变化回调
+     */
+    onChange?: (value: any) => void;
+    /**
+     * 容器样式
+     */
+    className?: string;
+    /**
+     * 按钮样式
+     */
+    buttonClassName?: string;
+    /**
+     * 按钮大小
+     */
+    size?: 'small' | 'middle' | 'large';
+    /**
+     * 禁用
+     */
+    disabled?: boolean;
+    /**
+     * 可选线列表
+     */
+    options?: Array<IOption<T>> | IKeyValues<string | React.ReactNode>;
+    /**
+     * 用于设置 Radio options 类型
+     */
+    optionType?: 'button' | 'default';
+    children?: any;
+}
+export default function RadioGroup(props: IRadioGroupProps): JSX.Element;
+export {};

package/es/components/RadioGroup/index.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { isArray } from 'lodash';
+import Radio from 'antd/es/radio';
+import classnames from 'classnames';
+import { SDK_PREFIX } from '../../constants/style';
+var useCallback = React.useCallback, useMemo = React.useMemo;
+export default function RadioGroup(props) {
+    var className = props.className, buttonClassName = props.buttonClassName, value = props.value, size = props.size, onChange = props.onChange, children = props.children, disabled = props.disabled, _a = props.options, options = _a === void 0 ? {} : _a, _b = props.optionType, optionType = _b === void 0 ? 'default' : _b;
+    var handleChange = useCallback(function (e) {
+        if (onChange) {
+            onChange(e.target.value);
+        }
+    }, [onChange]);
+    var radioOptions = useMemo(function () {
+        return isArray(options)
+            ? options
+            : Object.keys(options).map(function (key) { return ({ value: key, item: options[key] }); });
+    }, [options]);
+    var Component = useMemo(function () {
+        return optionType === 'default' ? Radio : Radio.Button;
+    }, [optionType]);
+    return (React.createElement(Radio.Group, { className: classnames(SDK_PREFIX + "-solid-radio-group", className), value: value, onChange: handleChange, size: size, disabled: disabled },
+        radioOptions.map(function (option) {
+            var _a;
+            var value = option.value, item = option.item;
+            return (React.createElement(Component, { key: value.toString(), value: value, disabled: option.disabled, className: classnames((_a = {},
+                    _a["" + buttonClassName] = optionType === 'button' && buttonClassName,
+                    _a)) }, item));
+        }),
+        children));
+}

package/es/components/{SolidRadioGroup → RadioGroup}/style.css

@@ -72,11 +72,11 @@
 .ant-radio-wrapper:hover .ant-radio,
 .ant-radio:hover .ant-radio-inner,
 .ant-radio-input:focus + .ant-radio-inner {
-  border-color: #7a869a;
+  border-color: #2c6dd2;
 }
 .ant-radio-input:focus + .ant-radio-inner {
-  -webkit-box-shadow: 0 0 0 3px rgba(122, 134, 154, 0.08);
-          box-shadow: 0 0 0 3px rgba(122, 134, 154, 0.08);
+  -webkit-box-shadow: 0 0 0 3px #ccd3d9;
+          box-shadow: 0 0 0 3px #ccd3d9;
 }
 .ant-radio-checked::after {
   position: absolute;
@@ -84,7 +84,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  border: 1px solid #7a869a;
+  border: 1px solid #2c6dd2;
   border-radius: 50%;
   visibility: hidden;
   -webkit-animation: antRadioEffect 0.36s ease-in-out;
@@ -119,7 +119,7 @@
   display: block;
   width: 8px;
   height: 8px;
-  background-color: #7a869a;
+  background-color: #2c6dd2;
   border-top: 0;
   border-left: 0;
   border-radius: 8px;
@@ -141,7 +141,7 @@
   opacity: 0;
 }
 .ant-radio-checked .ant-radio-inner {
-  border-color: #7a869a;
+  border-color: #2c6dd2;
 }
 .ant-radio-checked .ant-radio-inner::after {
   -webkit-transform: scale(1);
@@ -178,7 +178,7 @@ span.ant-radio + * {
   height: 32px;
   margin: 0;
   padding: 0 15px;
-  color: rgba(0, 0, 0, 0.65);
+  color: #333;
   font-size: 14px;
   line-height: 30px;
   background: #ffffff;
@@ -192,7 +192,7 @@ span.ant-radio + * {
   transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
 }
 .ant-radio-button-wrapper a {
-  color: rgba(0, 0, 0, 0.65);
+  color: #333;
 }
 .ant-radio-button-wrapper > .ant-radio-button {
   position: absolute;
@@ -239,11 +239,11 @@ span.ant-radio + * {
 }
 .ant-radio-button-wrapper:hover {
   position: relative;
-  color: #7a869a;
+  color: #2c6dd2;
 }
 .ant-radio-button-wrapper:focus-within {
-  -webkit-box-shadow: 0 0 0 3px rgba(122, 134, 154, 0.08);
-          box-shadow: 0 0 0 3px rgba(122, 134, 154, 0.08);
+  -webkit-box-shadow: 0 0 0 3px #ccd3d9;
+          box-shadow: 0 0 0 3px #ccd3d9;
 }
 .ant-radio-button-wrapper .ant-radio-inner,
 .ant-radio-button-wrapper input[type='checkbox'],
@@ -255,52 +255,52 @@ span.ant-radio + * {
 }
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
   z-index: 1;
-  color: #7a869a;
+  color: #2c6dd2;
   background: #ffffff;
-  border-color: #7a869a;
+  border-color: #2c6dd2;
 }
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
-  background-color: #7a869a;
+  background-color: #2c6dd2;
 }
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child {
-  border-color: #7a869a;
+  border-color: #2c6dd2;
 }
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
-  color: #9ca0a6;
-  border-color: #9ca0a6;
+  color: #2c6dd2;
+  border-color: #2c6dd2;
 }
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before {
-  background-color: #9ca0a6;
+  background-color: #2c6dd2;
 }
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
-  color: #555f73;
-  border-color: #555f73;
+  color: #2c6dd2;
+  border-color: #2c6dd2;
 }
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active::before {
-  background-color: #555f73;
+  background-color: #2c6dd2;
 }
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
-  -webkit-box-shadow: 0 0 0 3px rgba(122, 134, 154, 0.08);
-          box-shadow: 0 0 0 3px rgba(122, 134, 154, 0.08);
+  -webkit-box-shadow: 0 0 0 3px #ccd3d9;
+          box-shadow: 0 0 0 3px #ccd3d9;
 }
 .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
   color: #ffffff;
-  background: #7a869a;
-  border-color: #7a869a;
+  background: #2c6dd2;
+  border-color: #2c6dd2;
 }
 .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
   color: #ffffff;
-  background: #9ca0a6;
-  border-color: #9ca0a6;
+  background: #2c6dd2;
+  border-color: #2c6dd2;
 }
 .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
   color: #ffffff;
-  background: #555f73;
-  border-color: #555f73;
+  background: #2c6dd2;
+  border-color: #2c6dd2;
 }
 .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
-  -webkit-box-shadow: 0 0 0 3px rgba(122, 134, 154, 0.08);
-          box-shadow: 0 0 0 3px rgba(122, 134, 154, 0.08);
+  -webkit-box-shadow: 0 0 0 3px #ccd3d9;
+          box-shadow: 0 0 0 3px #ccd3d9;
 }
 .ant-radio-button-wrapper-disabled {
   color: rgba(0, 0, 0, 0.25);
@@ -369,7 +369,7 @@ span.ant-radio + * {
   border-radius: 0 2px 2px 0;
 }
 .ant-radio-button-wrapper-checked:not([class*=' ant-radio-button-wrapper-disabled']).ant-radio-button-wrapper:first-child {
-  border-right-color: #9ca0a6;
+  border-right-color: #2c6dd2;
 }
 .ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper:last-child {
   border-radius: 2px 0 0 2px;
@@ -383,28 +383,22 @@ span.ant-radio + * {
 .ant-btn-sm {
   padding: 0 7px;
 }
-.pandora-sdk-solid-radio-group .pandora-sdk-solid-radio-item {
+.pandora-sdk-solid-radio-group .ant-radio-button-wrapper {
   padding: 0 12px;
-  border-color: #bfbfbf !important;
-  color: #333;
-  text-align: center;
 }
-.pandora-sdk-solid-radio-group .pandora-sdk-solid-radio-item:hover {
-  background: #fafafa;
+.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:not(.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked) {
   border-color: #bfbfbf;
 }
-.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked,
-.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked:hover {
-  border-color: #2c6dd2 !important;
-  color: #2c6dd2 !important;
+.pandora-sdk-solid-radio-group .ant-radio:not(.pandora-sdk-solid-radio-group .ant-radio-checked) .ant-radio-inner {
+  border-color: #bfbfbf;
 }
-.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked.ant-radio-button-wrapper-disabled {
-  border-color: #bfbfbf !important;
-  color: #333 !important;
+.pandora-sdk-solid-radio-group .ant-radio .ant-radio-inner {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
-.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:not(:first-child)::before {
-  background-color: #bfbfbf;
+.pandora-sdk-solid-radio-group .ant-radio .ant-radio-checked .ant-radio-inner {
+  border-color: #2c6dd2;
 }
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
-  background-color: #2c6dd2 !important;
+.pandora-sdk-solid-radio-group .ant-radio .ant-radio-checked .ant-radio-inner::after {
+  background-color: #2c6dd2;
 }

package/es/components/RadioGroup/style.less

@@ -0,0 +1,32 @@
+@import 'antd/lib/radio/style/index.less';
+@import '../../style/theme.less';
+
+.@{sdk-prefix}-solid-radio-group {
+  .@{ant-prefix}-radio-button-wrapper {
+    padding: 0 12px;
+    &:not(&-checked) {
+      border-color: @input-border-color;
+    }
+  }
+
+  .@{ant-prefix}-radio {
+    &:not(&-checked) {
+      .@{ant-prefix}-radio-inner {
+        border-color: @input-border-color;
+      }
+    }
+
+    .@{ant-prefix}-radio-inner {
+      box-sizing: border-box;
+    }
+
+    .@{ant-prefix}-radio-checked {
+      .@{ant-prefix}-radio-inner {
+        border-color: @theme-color;
+        &::after {
+          background-color: @theme-color;
+        }
+      }
+    }
+  }
+}

package/es/components/RangeInput/index.js

@@ -17,14 +17,18 @@ var __read = (this && this.__read) || function (o, n) {
 import * as React from 'react';
 import { get, isNil } from 'lodash';
 import { InputNumber, Input } from 'antd';
+import { ConfigContext } from 'antd/es/config-provider';
 import { SDK_PREFIX } from '../../constants/style';
+import { formatString } from '../../utils/language';
+import { RangeInputLocale } from '../../constants/language/range_input/type';
 import { formatValue } from './utils';
-var useCallback = React.useCallback, useState = React.useState;
+var useCallback = React.useCallback, useState = React.useState, useContext = React.useContext;
 var InputGroup = Input.Group;
 export default function RangeInput(props) {
-    var _a = props.size, size = _a === void 0 ? 'middle' : _a, _b = props.placeholders, placeholders = _b === void 0 ? { from: '起始', to: '终止' } : _b, _c = props.symbol, symbol = _c === void 0 ? '-' : _c, showError = props.showError, value = props.value, onChange = props.onChange, error = props.error;
-    var _d = __read(useState(get(value, 'from')), 2), from = _d[0], setFrom = _d[1];
-    var _e = __read(useState(get(value, 'to')), 2), to = _e[0], setTo = _e[1];
+    var _a = props.size, size = _a === void 0 ? 'middle' : _a, placeholders = props.placeholders, _b = props.symbol, symbol = _b === void 0 ? '-' : _b, showError = props.showError, value = props.value, onChange = props.onChange, error = props.error;
+    var locale = useContext(ConfigContext).locale;
+    var _c = __read(useState(get(value, 'from')), 2), from = _c[0], setFrom = _c[1];
+    var _d = __read(useState(get(value, 'to')), 2), to = _d[0], setTo = _d[1];
     var handleFromInputChange = useCallback(function (value) {
         setFrom(value);
     }, []);
@@ -43,9 +47,11 @@ export default function RangeInput(props) {
     return (React.createElement("div", { className: SDK_PREFIX + "-range-input" },
         React.createElement(InputGroup, { compact: true },
             React.createElement("div", { className: SDK_PREFIX + "-range-input-input" },
-                React.createElement(InputNumber, { size: size, value: from, onChange: handleFromInputChange, onBlur: handleInputBlur, placeholder: placeholders.from })),
+                React.createElement(InputNumber, { size: size, value: from, onChange: handleFromInputChange, onBlur: handleInputBlur, placeholder: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.from) ||
+                        formatString(RangeInputLocale.placeholder.from, locale) })),
             React.createElement("span", { className: SDK_PREFIX + "-range-input-symbol" }, symbol),
             React.createElement("div", { className: SDK_PREFIX + "-range-input-input" },
-                React.createElement(InputNumber, { size: size, value: to, onChange: handleToInputChange, onBlur: handleInputBlur, placeholder: placeholders.to }))),
-        get(value, 'isInvalid') && showError && (React.createElement("div", { className: SDK_PREFIX + "-range-input-error" }, error || '数值区间必须大于数据间隔'))));
+                React.createElement(InputNumber, { size: size, value: to, onChange: handleToInputChange, onBlur: handleInputBlur, placeholder: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.to) ||
+                        formatString(RangeInputLocale.placeholder.to, locale) }))),
+        get(value, 'isInvalid') && showError && (React.createElement("div", { className: SDK_PREFIX + "-range-input-error" }, error || formatString(RangeInputLocale.error, locale)))));
 }