feat: switch 支持配置开启和关闭状态下的文本 (#1642)

* 修复 string2regExp 报错, 传入的时候先转成字符

* 修复 diffEditor 报错

* 修复 default filter 问题

* 修复文档链接错误

* feat：switch 支持配置开启和关闭状态下的文本

Co-authored-by: 2betop <2betop.cn@gmail.com>

docs/zh-CN/components/form/switch.md

@@ -66,12 +66,33 @@ order: 51
 
 调整开关，观察数据域变化，会发现打开后值为`1`，而关闭后为`0`
 
+## 配置开启和关闭状态的文本
+
+> 1.1.5 版本之后支持
+
+```schema: scope="body"
+{
+    "type": "form",
+    "controls": [
+        {
+            "name": "switch",
+            "type": "switch",
+            "onText": "已开启飞行模式",
+            "offText": "已关闭飞行模式"
+        }
+    ]
+}
+```
+
 ## 属性表
 
 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
 
-| 属性名     | 类型     | 默认值    | 说明     |
-| ---------- | -------- | --------- | -------- |
-| option     | `string` |           | 选项说明 |
-| trueValue  | `any`    | `true`    | 标识真值 |
-| falseValue | `any`    | `"false"` | 标识假值 |
+| 属性名     | 类型     | 默认值    | 说明         |
+| ---------- | -------- | --------- | ------------ |
+| option     | `string` |           | 选项说明     |
+| onText     | `string` |           | 开启时的文本 |
+| offText    | `string` |           | 关闭时的文本 |
+| trueValue  | `any`    | `true`    | 标识真值     |
+| falseValue | `any`    | `"false"` | 标识假值     |
+| option     | `string` |           | 选项说明     |

docs/zh-CN/components/switch.md

@@ -20,6 +20,10 @@ order: 66
 }
 ```
 
+这仅用于查看，表单中的请参考[这里](form/switch)
+
+## 属性表
+
 | 属性名    | 类型     | 默认值 | 说明                            |
 | --------- | -------- | ------ | ------------------------------- |
 | type      | `string` |        | `"switch"` 指定为 Dialog 渲染器 |

examples/components/Form/Full.jsx

@@ -492,6 +492,19 @@ export default {
           name: 'switch',
           label: '开关'
         },
+        {
+          type: 'switch',
+          name: 'switch2',
+          value: true,
+          label: '开关开启'
+        },
+        {
+          type: 'switch',
+          name: 'switch3',
+          value: true,
+          disabled: true,
+          label: '开关禁用'
+        },
         {
           type: 'divider'
         },

scss/_properties.scss

@@ -1100,8 +1100,6 @@
   --Switch-onDisabled-color: #fff;
   --Switch-valueColor: var(--white);
   --Switch-width: #{px2rem(50px)};
-  --Switch-label: '关';
-  --Switch-checked-label: '开';
 
   --Table--unsaved-heading-bg: #e8f0fe;
   --Table--unsaved-heading-color: #4285f4;

scss/components/form/_switch.scss

@@ -2,42 +2,34 @@
   cursor: pointer;
   position: relative;
   display: inline-block;
-  width: var(--Switch-width);
   height: var(--Switch-height);
+  min-width: var(--Switch-width);
   overflow: hidden;
   border-radius: px2rem(30px);
-  background: var(--Switch-onActive-bgColor);
+  background: var(--Switch-bgColor);
   margin: 0;
   vertical-align: middle;
   text-align: left;
 
   &.is-disabled {
-    background: var(--Switch-onDisabled-bgColor);
+    cursor: not-allowed;
+    opacity: 0.4;
   }
 
-  i {
+  .text {
+    margin: 0 px2rem(7px) 0 px2rem(25px);
+    color: var(--Switch-valueColor);
+    text-indent: calc(var(--Switch-width) / 2);
+    text-transform: uppercase;
+    font-size: var(--fontSizeSm);
+    line-height: var(--Switch-height);
+    font-style: normal;
+    font-weight: bold;
+    transition: all var(--animation-duration);
+  }
+
+  .slider {
     &:before {
-      content: var(--Switch-label);
-      color: var(--Switch-valueColor);
-      text-indent: calc(var(--Switch-width) / 2);
-      text-transform: uppercase;
-      font-size: var(--fontSizeSm);
-      line-height: var(--Switch-height);
-      font-style: normal;
-      font-weight: bold;
-
-      position: absolute;
-      top: px2rem(-1px);
-      bottom: px2rem(-1px);
-      left: px2rem(-1px);
-      right: px2rem(-1px);
-      background: var(--Switch-bgColor);
-      border: px2rem(1px) solid var(--Switch-borderColor);
-      border-radius: px2rem(30px);
-      transition: all var(--animation-duration);
-    }
-
-    &:after {
       content: '';
       position: absolute;
       background: var(--white);
@@ -46,52 +38,39 @@
       bottom: px2rem(1px);
       left: px2rem(1px);
       border-radius: 50%;
-      // box-shadow: px2rem(1px) px2rem(1px) px2rem(3px) rgba(0, 0, 0, 0.25);
       transition: margin-left var(--animation-duration);
     }
   }
 
+  &.is-checked {
+    background: var(--Switch-onActive-bgColor);
+
+    .slider::before {
+      left: auto;
+      right: px2rem(1px);
+      border-width: 0;
+    }
+
+    .text {
+      margin: 0 25px 0 7px;
+      color: var(--white);
+      text-indent: px2rem(5px); // todo
+    }
+  }
+
+  &.is-checked.is-disabled {
+    .slider:before {
+      color: var(--Switch-onDisabled-color);
+    }
+
+    .text {
+      color: var(--Switch-onDisabled-color);
+    }
+  }
+
   input {
     position: absolute;
     opacity: 0;
-
-    &:disabled,
-    &:disabled:checked {
-      & + i {
-        &:before {
-          color: var(--Switch-onDisabled-color);
-          background: var(--Switch-onDisabled-bgColor);
-          cursor: not-allowed;
-        }
-
-        &:after {
-          background: var(--Switch-onDisabled-circle-BackgroundColor);
-          color: var(--Switch-onDisabled-color);
-        }
-      }
-    }
-
-    &:checked {
-      & + i {
-        &:before {
-          left: 100%;
-          border-width: 0;
-        }
-
-        &:after {
-          margin-left: calc(var(--Switch-width) - var(--Switch-height));
-
-          content: var(--Switch-checked-label);
-          color: var(--white);
-          text-indent: px2rem(-18px); // todo
-          text-transform: uppercase;
-          font-size: var(--fontSizeSm);
-          font-weight: bold;
-          font-style: normal;
-          line-height: var(--Switch-height);
-        }
-      }
-    }
   }
 }
 

src/components/Switch.tsx

@@ -36,6 +36,8 @@ interface SwitchProps {
   falseValue?: any;
   disabled?: boolean;
   readOnly?: boolean;
+  onText?: string;
+  offText?: string;
   checked?: boolean;
 }
 
@@ -72,6 +74,8 @@ export class Switch extends React.PureComponent<SwitchProps, any> {
       inline,
       trueValue,
       falseValue,
+      onText = '',
+      offText = '',
       disabled,
       readOnly,
       checked,
@@ -84,23 +88,33 @@ export class Switch extends React.PureComponent<SwitchProps, any> {
       (size && sizeMap[size] ? ` ${sizeMap[size]}` : '') +
       (level && levelMap[level] ? ` ${levelMap[level]}` : '');
 
+    const isChecked =
+      typeof checked !== 'undefined'
+        ? checked
+        : typeof value === 'undefined'
+        ? false
+        : value == trueValue;
+
     return (
-      <label className={cx(`Switch`, disabled ? 'is-disabled' : '', className)}>
+      <label
+        className={cx(
+          `Switch`,
+          isChecked ? 'is-checked' : '',
+          disabled ? 'is-disabled' : '',
+          className
+        )}
+      >
         <input
           type="checkbox"
-          checked={
-            typeof checked !== 'undefined'
-              ? checked
-              : typeof value === 'undefined'
-              ? false
-              : value == trueValue
-          }
+          checked={isChecked}
           onChange={this.hanldeCheck}
           disabled={disabled}
           readOnly={readOnly}
           {...rest}
         />
-        <i />
+
+        <span className="text">{isChecked ? onText : offText}</span>
+        <span className="slider"></span>
       </label>
     );
   }

src/renderers/Form/Switch.tsx

@@ -27,6 +27,16 @@ export interface SwitchControlSchema extends FormBaseControl {
    * 选项说明
    */
   option?: string;
+
+  /**
+   * 开启时显示的文本
+   */
+  onText?: string;
+
+  /**
+   * 关闭时显示的文本
+   */
+  offText?: string;
 }
 
 export interface SwitchProps extends FormControlProps {
@@ -49,6 +59,8 @@ export default class SwitchControl extends React.Component<SwitchProps, any> {
       value,
       trueValue,
       falseValue,
+      onText,
+      offText,
       option,
       onChange,
       disabled,
@@ -66,6 +78,8 @@ export default class SwitchControl extends React.Component<SwitchProps, any> {
           value={value}
           trueValue={trueValue}
           falseValue={falseValue}
+          onText={onText}
+          offText={offText}
           disabled={disabled}
           onChange={onChange}
         />

src/renderers/Switch.tsx

@@ -40,6 +40,16 @@ export interface SwitchSchema extends BaseSchema {
    */
   readOnly?: boolean;
 
+  /**
+   * 开启时显示的文本
+   */
+  onText?: string;
+
+  /**
+   * 关闭时显示的文本
+   */
+  offText?: string;
+
   /**
    * 是否立即保存。关乎到是否立即调用保存接口。
    */
@@ -94,6 +104,8 @@ export class SwitchField extends React.Component<SwitchProps, object> {
       placeholder,
       trueValue,
       falseValue,
+      onText,
+      offText,
       onQuickChange,
       option,
       disabled,
@@ -117,6 +129,8 @@ export class SwitchField extends React.Component<SwitchProps, object> {
         <Switch
           inline
           classPrefix={ns}
+          onText={onText}
+          offText={offText}
           checked={value == trueValue}
           onChange={this.handleChange}
           disabled={disabled || !onQuickChange}