@arco-design/mobile-react 2.25.4 → 2.26.0

package/esm/carousel/style/css/index.css

@@ -92,6 +92,13 @@
   left:  0.32rem ;
   text-align: left;
 }
+[dir="rtl"] .arco-carousel-indicator.pos-start {
+  left: initial;
+  right:  0.32rem ;
+}
+[dir="rtl"] .arco-carousel-indicator.pos-start {
+  text-align: right;
+}
 .arco-carousel-indicator.pos-center {
   left: 50%;
   -webkit-transform: translate3d(-50%, 0, 0);
@@ -102,39 +109,56 @@
   right:  0.32rem ;
   text-align: right;
 }
-.arco-carousel-indicator.vertical .indicator {
+[dir="rtl"] .arco-carousel-indicator.pos-end {
+  right: initial;
+  left:  0.32rem ;
+}
+[dir="rtl"] .arco-carousel-indicator.pos-end {
+  text-align: left;
+}
+.arco-carousel-indicator-vertical .indicator {
   display: block;
   box-sizing: border-box;
   height:  0.24rem ;
   width:  3PX ;
 }
-.arco-carousel-indicator.vertical .indicator:not(:last-of-type) {
-  margin-right: 0;
+.arco-carousel-indicator-vertical .indicator:not(:last-of-type) {
+  margin: 0;
   margin-bottom:  0.16rem ;
 }
-.arco-carousel-indicator.vertical .indicator.type-circle:not(:last-of-type) {
-  margin-right: 0;
+.arco-carousel-indicator-vertical .indicator.type-circle:not(:last-of-type) {
+  margin: 0;
   margin-bottom:  0.16rem ;
 }
-.arco-carousel-indicator.vertical.pos-start {
+.arco-carousel-indicator-vertical.pos-start {
   top:  0.32rem ;
 }
-.arco-carousel-indicator.vertical.pos-center {
+.arco-carousel-indicator-vertical.pos-center {
   bottom: 50%;
   -webkit-transform: translate3d(0, 50%, 0);
           transform: translate3d(0, 50%, 0);
 }
-.arco-carousel-indicator.vertical.pos-end {
+.arco-carousel-indicator-vertical.pos-end {
   bottom:  0.32rem ;
 }
-.arco-carousel-indicator.vertical.ver-pos-left {
-  left:  0.24rem ;
+.arco-carousel-indicator-vertical.ver-pos-left {
+  left: auto;
   right: auto;
+  left:  0.24rem ;
+}
+[dir="rtl"] .arco-carousel-indicator-vertical.ver-pos-left {
+  left: initial;
+  right:  0.24rem ;
 }
-.arco-carousel-indicator.vertical.ver-pos-right {
+.arco-carousel-indicator-vertical.ver-pos-right {
   left: auto;
+  right: auto;
   right:  0.24rem ;
 }
+[dir="rtl"] .arco-carousel-indicator-vertical.ver-pos-right {
+  right: initial;
+  left:  0.24rem ;
+}
 .arco-carousel-indicator.inverse .indicator {
   background-color:  #e5e6eb ;
 }
@@ -150,9 +174,6 @@
   padding:  0.16rem 0 0.1rem ;
 }
 .arco-carousel-indicator .indicator {
-  display: inline-block;
-  width:  0.24rem ;
-  height:  3PX ;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
   background-color:  rgba(255, 255, 255, 0.5) ;
@@ -160,9 +181,18 @@
 .arco-carousel-indicator .indicator.active {
   background-color:  #ffffff ;
 }
-.arco-carousel-indicator .indicator:not(:last-of-type) {
+.arco-carousel-indicator-horizontal .indicator {
+  display: inline-block;
+  width:  0.24rem ;
+  height:  3PX ;
+}
+.arco-carousel-indicator-horizontal .indicator:not(:last-of-type) {
   margin-right:  0.16rem ;
 }
+[dir="rtl"] .arco-carousel-indicator-horizontal .indicator:not(:last-of-type) {
+  margin-right: initial;
+  margin-left:  0.16rem ;
+}
 .arco-carousel-indicator .circle-indicator,
 .arco-carousel-indicator .indicator.type-circle {
   width:  6PX ;
@@ -173,3 +203,8 @@
 .arco-carousel-indicator .indicator.type-circle:not(:last-of-type) {
   margin-right:  0.16rem ;
 }
+[dir="rtl"] .arco-carousel-indicator .circle-indicator:not(:last-of-type),
+[dir="rtl"] .arco-carousel-indicator .indicator.type-circle:not(:last-of-type) {
+  margin-right: initial;
+  margin-left:  0.16rem ;
+}

package/esm/carousel/style/index.less

@@ -96,8 +96,8 @@
         box-sizing: border-box;
 
         &.pos-start {
-            .use-var(left, carousel-indicator-safe-padding);
-            text-align: left;
+            .use-var-with-rtl(left, carousel-indicator-safe-padding);
+            .set-value-with-rtl(text-align, left);
         }
 
         &.pos-center {
@@ -107,11 +107,11 @@
         }
 
         &.pos-end {
-            .use-var(right, carousel-indicator-safe-padding);
-            text-align: right;
+            .use-var-with-rtl(right, carousel-indicator-safe-padding);
+            .set-value-with-rtl(text-align, right);
         }
 
-        &.vertical {
+        &-vertical {
 
             .indicator {
                 display: block;
@@ -120,12 +120,12 @@
                 .use-var(width, carousel-square-indicator-height);
 
                 &:not(:last-of-type) {
-                    margin-right: 0;
+                    margin: 0;
                     .use-var(margin-bottom, carousel-square-indicator-gutter);
                 }
 
                 &.type-circle:not(:last-of-type) {
-                    margin-right: 0;
+                    margin: 0;
                     .use-var(margin-bottom, carousel-circle-indicator-gutter);
                 }
             }
@@ -144,13 +144,15 @@
             }
 
             &.ver-pos-left {
-                .use-var(left, carousel-indicator-position);
+                left: auto;
                 right: auto;
+                .use-var-with-rtl(left, carousel-indicator-position);
             }
 
             &.ver-pos-right {
                 left: auto;
-                .use-var(right, carousel-indicator-position);
+                right: auto;
+                .use-var-with-rtl(right, carousel-indicator-position);
             }
         }
 
@@ -174,18 +176,21 @@
         }
 
         .indicator {
-            display: inline-block;
-            .use-var(width, carousel-square-indicator-width);
-            .use-var(height, carousel-square-indicator-height);
             transition: all .2s;
             .use-var(background-color, carousel-indicator-background);
 
             &.active {
                 .use-var(background-color, carousel-indicator-active-background);
             }
+        }
+
+        &-horizontal .indicator {
+            display: inline-block;
+            .use-var(width, carousel-square-indicator-width);
+            .use-var(height, carousel-square-indicator-height);
 
             &:not(:last-of-type) {
-                .use-var(margin-right, carousel-square-indicator-gutter);
+                .use-var-with-rtl(margin-right, carousel-square-indicator-gutter);
             }
         }
 
@@ -196,7 +201,7 @@
             border-radius: 50%;
 
             &:not(:last-of-type) {
-                .use-var(margin-right, carousel-circle-indicator-gutter);
+                .use-var-with-rtl(margin-right, carousel-circle-indicator-gutter);
             }
         }
     }

package/esm/cell/cell.js

@@ -5,20 +5,20 @@ import Arrow from './arrow';
 import { GroupContext } from './group';
 export var Cell = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    style = props.style,
-    icon = props.icon,
-    label = props.label,
-    desc = props.desc,
-    text = props.text,
-    children = props.children,
-    showArrow = props.showArrow,
-    arrow = props.arrow,
-    prepend = props.prepend,
-    append = props.append,
-    _props$bordered = props.bordered,
-    bordered = _props$bordered === void 0 ? true : _props$bordered,
-    _onClick = props.onClick;
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      icon = props.icon,
+      label = props.label,
+      desc = props.desc,
+      text = props.text,
+      children = props.children,
+      showArrow = props.showArrow,
+      arrow = props.arrow,
+      prepend = props.prepend,
+      append = props.append,
+      _props$bordered = props.bordered,
+      bordered = _props$bordered === void 0 ? true : _props$bordered,
+      _onClick = props.onClick;
   var domRef = useRef(null);
   useImperativeHandle(ref, function () {
     return {

package/esm/cell/demo/style/css/mobile.css

@@ -18,6 +18,10 @@
   height: 0.64rem;
   margin-right: 0.24rem;
 }
+[dir="rtl"] #demo-cell .demo-cell-avatar-label .arco-avatar {
+  margin-right: initial;
+  margin-left: 0.24rem;
+}
 #demo-cell .demo-cell-avatar .cell-text {
   font-size: 0;
 }
@@ -54,3 +58,7 @@
   vertical-align: middle;
   margin-right: 0.1rem;
 }
+[dir="rtl"] #demo-cell .demo-cell-loading-group .demo-cell-loading {
+  margin-right: initial;
+  margin-left: 0.1rem;
+}

package/esm/cell/demo/style/mobile.less

@@ -12,7 +12,7 @@
         .@{prefix}-avatar {
             .rem(width, 32);
             .rem(height, 32);
-            .rem(margin-right, 12);
+            .rem-with-rtl(margin-right, 12);
         }
     }
     .demo-cell-avatar {
@@ -50,7 +50,7 @@
         text-align: center;
         .demo-cell-loading {
             vertical-align: middle;
-            .rem(margin-right, 5);
+            .rem-with-rtl(margin-right, 5);
         }
     }
 }

package/esm/cell/group.js

@@ -8,24 +8,26 @@ export var GroupContext = /*#__PURE__*/React.createContext({
 export function componentGenerator(Comp) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      style = props.style,
-      header = props.header,
-      footer = props.footer,
-      _props$bordered = props.bordered,
-      bordered = _props$bordered === void 0 ? true : _props$bordered,
-      options = props.options,
-      children = props.children,
-      onClick = props.onClick;
+        className = _props$className === void 0 ? '' : _props$className,
+        style = props.style,
+        header = props.header,
+        footer = props.footer,
+        _props$bordered = props.bordered,
+        bordered = _props$bordered === void 0 ? true : _props$bordered,
+        options = props.options,
+        children = props.children,
+        onClick = props.onClick;
     var domRef = useRef(null);
     useImperativeHandle(ref, function () {
       return {
         dom: domRef.current
       };
     });
+
     function handleClick(e) {
       onClick && onClick(e);
     }
+
     return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/React.createElement("div", {

package/esm/cell/index.js

@@ -3,7 +3,6 @@ import { componentGenerator } from './group';
 import { Cell } from './cell';
 export * from './type';
 var Group = componentGenerator(Cell);
-
 /**
  * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
  * @en Cell, including cells and cell group, are often used to set items, forms, etc.
@@ -12,6 +11,7 @@ var Group = componentGenerator(Cell);
  * @name 单元格
  * @name_en Cell
  */
+
 export default componentWrapper(Cell, {
   Group: Group
 });

package/esm/cell/style/css/index.css

@@ -126,6 +126,10 @@
   color:  #1d2129 ;
   margin-right:  0.48rem ;
 }
+[dir="rtl"] .arco-cell .cell-label {
+  margin-right: initial;
+  margin-left:  0.48rem ;
+}
 .arco-cell .cell-desc {
   color:  #86909c ;
   font-size:  0.28rem ;
@@ -164,6 +168,10 @@
   margin-right:  0.24rem ;
   font-size: 0;
 }
+[dir="rtl"] .arco-cell .cell-label-icon {
+  margin-right: initial;
+  margin-left:  0.24rem ;
+}
 .arco-cell .cell-label-icon .arco-icon {
   line-height: initial;
   font-size:  0.4rem ;
@@ -173,6 +181,10 @@
   margin-left:  0.16rem ;
   font-size: 0;
 }
+[dir="rtl"] .arco-cell .cell-arrow-icon {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
 .arco-cell .cell-arrow-icon .arco-icon {
   font-size:  0.24rem ;
   color:  #c9cdd4 ;
@@ -186,6 +198,10 @@
 .arco-cell .arco-input-wrap {
   padding-left: 0;
 }
+[dir="rtl"] .arco-cell .arco-input-wrap {
+  padding-left:  0.32rem ;
+  padding-right: 0;
+}
 .arco-cell-group .cell-group-header,
 .arco-cell-group .cell-group-footer {
   color:  #86909c ;

package/esm/cell/style/index.less

@@ -33,7 +33,7 @@
 
     .cell-label {
         .use-var(color, cell-label-color);
-        .use-var(margin-right, cell-label-gutter);
+        .use-var-with-rtl(margin-right, cell-label-gutter);
     }
 
     .cell-desc {
@@ -61,7 +61,7 @@
     }
 
     .cell-label-icon {
-        .use-var(margin-right, cell-label-icon-gutter);
+        .use-var-with-rtl(margin-right, cell-label-icon-gutter);
         font-size: 0;
         .@{prefix}-icon {
             line-height: initial;
@@ -71,7 +71,7 @@
     }
 
     .cell-arrow-icon {
-        .use-var(margin-left, cell-arrow-gutter);
+        .use-var-with-rtl(margin-left, cell-arrow-gutter);
         font-size: 0;
         .@{prefix}-icon {
             .use-var(font-size, cell-arrow-font-size);
@@ -88,7 +88,9 @@
     }
 
     .@{prefix}-input-wrap {
-        padding-left: 0;
+        .set-prop-with-rtl(padding-left, 0, {
+            .use-var(padding-left, input-horizontal-padding);
+        });
     }
 }
 

package/esm/checkbox/checkbox.js

@@ -10,6 +10,7 @@ import IconSquareDisabled from '../icon/IconSquareDisabled';
 import { CheckboxGroupContext } from './group';
 import { IconStatus } from './type';
 import { useMergeProps } from './hooks';
+
 var getDefaultIcon = function getDefaultIcon(shape, status) {
   var defaultIcons = {
     circle: {
@@ -33,35 +34,39 @@ var getDefaultIcon = function getDefaultIcon(shape, status) {
   };
   return defaultIcons[shape][status];
 };
+
 export var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useMergeProps = useMergeProps(props, CheckboxGroupContext),
-    _useMergeProps$style = _useMergeProps.style,
-    style = _useMergeProps$style === void 0 ? {} : _useMergeProps$style,
-    _useMergeProps$classN = _useMergeProps.className,
-    className = _useMergeProps$classN === void 0 ? '' : _useMergeProps$classN,
-    _useMergeProps$childr = _useMergeProps.children,
-    children = _useMergeProps$childr === void 0 ? null : _useMergeProps$childr,
-    _useMergeProps$label = _useMergeProps.label,
-    label = _useMergeProps$label === void 0 ? '' : _useMergeProps$label,
-    _useMergeProps$layout = _useMergeProps.layout,
-    layout = _useMergeProps$layout === void 0 ? 'inline' : _useMergeProps$layout,
-    value = _useMergeProps.value,
-    _useMergeProps$defaul = _useMergeProps.defaultCheck,
-    defaultCheck = _useMergeProps$defaul === void 0 ? false : _useMergeProps$defaul,
-    _useMergeProps$disabl = _useMergeProps.disabled,
-    disabled = _useMergeProps$disabl === void 0 ? false : _useMergeProps$disabl,
-    _useMergeProps$shape = _useMergeProps.shape,
-    shape = _useMergeProps$shape === void 0 ? 'circle' : _useMergeProps$shape,
-    icons = _useMergeProps.icons,
-    _useMergeProps$isRadi = _useMergeProps.isRadio,
-    isRadio = _useMergeProps$isRadi === void 0 ? false : _useMergeProps$isRadi,
-    propsChecked = _useMergeProps.checked,
-    onChange = _useMergeProps.onChange;
+      _useMergeProps$style = _useMergeProps.style,
+      style = _useMergeProps$style === void 0 ? {} : _useMergeProps$style,
+      _useMergeProps$classN = _useMergeProps.className,
+      className = _useMergeProps$classN === void 0 ? '' : _useMergeProps$classN,
+      _useMergeProps$childr = _useMergeProps.children,
+      children = _useMergeProps$childr === void 0 ? null : _useMergeProps$childr,
+      _useMergeProps$label = _useMergeProps.label,
+      label = _useMergeProps$label === void 0 ? '' : _useMergeProps$label,
+      _useMergeProps$layout = _useMergeProps.layout,
+      layout = _useMergeProps$layout === void 0 ? 'inline' : _useMergeProps$layout,
+      value = _useMergeProps.value,
+      _useMergeProps$defaul = _useMergeProps.defaultCheck,
+      defaultCheck = _useMergeProps$defaul === void 0 ? false : _useMergeProps$defaul,
+      _useMergeProps$disabl = _useMergeProps.disabled,
+      disabled = _useMergeProps$disabl === void 0 ? false : _useMergeProps$disabl,
+      _useMergeProps$shape = _useMergeProps.shape,
+      shape = _useMergeProps$shape === void 0 ? 'circle' : _useMergeProps$shape,
+      icons = _useMergeProps.icons,
+      _useMergeProps$isRadi = _useMergeProps.isRadio,
+      isRadio = _useMergeProps$isRadi === void 0 ? false : _useMergeProps$isRadi,
+      propsChecked = _useMergeProps.checked,
+      onChange = _useMergeProps.onChange;
+
   var _useState = useState(propsChecked === void 0 ? defaultCheck : propsChecked),
-    checked = _useState[0],
-    setChecked = _useState[1];
+      checked = _useState[0],
+      setChecked = _useState[1];
+
   var _useState2 = useState(isRadio ? 'radio' : 'checkbox'),
-    componentName = _useState2[0];
+      componentName = _useState2[0];
+
   var domRef = useRef(null);
   useImperativeHandle(ref, function () {
     return {
@@ -71,27 +76,30 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     if (propsChecked !== void 0) setChecked(Boolean(propsChecked));
   }, [propsChecked]);
-
   /**
    * 获得图标样式
    * @en Get icon style
    */
+
   var getStatus = function getStatus() {
     if (checked) {
       if (disabled) return IconStatus.ACTIVE_DISABLED;
       return IconStatus.ACTIVE;
     }
+
     if (disabled) return IconStatus.DISABLED;
     return IconStatus.NORMAL;
   };
-
   /**
    * 计算展示的icon
    * @en Calculate the displayed icon
    */
+
+
   var renderIcon = function renderIcon() {
     var Icon;
     var iconKey = getStatus();
+
     if (icons && icons[iconKey] !== void 0) {
       Icon = icons[iconKey];
     } else if (icons === null) {
@@ -99,6 +107,7 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
     } else {
       Icon = layout === 'justify' ? getDefaultIcon('justify', iconKey) : getDefaultIcon(shape, iconKey);
     }
+
     return Icon ? /*#__PURE__*/React.createElement("div", {
       className: cls(componentName + "-icon", {
         disabled: disabled,
@@ -106,22 +115,24 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
       })
     }, Icon) : null;
   };
-
   /**
    * 处理点击事件
    * @en Handling click events
    */
-  var onClick = function onClick(e) {
-    if (disabled) return;
 
-    // Radio组件不支持点击取消选中
+
+  var onClick = function onClick(e) {
+    if (disabled) return; // Radio组件不支持点击取消选中
     // @en Radio component does not support click to uncheck
+
     if (isRadio && checked) return;
     onChange && onChange(!checked, value, e);
+
     if (propsChecked === void 0) {
       setChecked(!checked);
     }
   };
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {

package/esm/checkbox/group.js

@@ -13,30 +13,32 @@ export var CheckboxGroupContext = /*#__PURE__*/React.createContext({
 export function componentGenerator(Comp) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var _props$style = props.style,
-      style = _props$style === void 0 ? {} : _props$style,
-      _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$shape = props.shape,
-      shape = _props$shape === void 0 ? 'circle' : _props$shape,
-      options = props.options,
-      icons = props.icons,
-      onChange = props.onChange,
-      value = props.value,
-      _props$children = props.children,
-      children = _props$children === void 0 ? null : _props$children,
-      _props$layout = props.layout,
-      layout = _props$layout === void 0 ? 'inline' : _props$layout,
-      _props$min = props.min,
-      min = _props$min === void 0 ? 0 : _props$min,
-      _props$max = props.max,
-      max = _props$max === void 0 ? 0 : _props$max;
+        style = _props$style === void 0 ? {} : _props$style,
+        _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        _props$defaultValue = props.defaultValue,
+        defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? false : _props$disabled,
+        _props$shape = props.shape,
+        shape = _props$shape === void 0 ? 'circle' : _props$shape,
+        options = props.options,
+        icons = props.icons,
+        onChange = props.onChange,
+        value = props.value,
+        _props$children = props.children,
+        children = _props$children === void 0 ? null : _props$children,
+        _props$layout = props.layout,
+        layout = _props$layout === void 0 ? 'inline' : _props$layout,
+        _props$min = props.min,
+        min = _props$min === void 0 ? 0 : _props$min,
+        _props$max = props.max,
+        max = _props$max === void 0 ? 0 : _props$max;
+
     var _useState = useState(value || defaultValue),
-      groupValue = _useState[0],
-      setGroupValue = _useState[1];
+        groupValue = _useState[0],
+        setGroupValue = _useState[1];
+
     var domRef = useRef(null);
     useImperativeHandle(ref, function () {
       return {
@@ -46,21 +48,23 @@ export function componentGenerator(Comp) {
     useEffect(function () {
       value !== void 0 && setGroupValue(value);
     }, [value]);
-
     /**
      * 切换checkbox状态回调
      * @en callback when toggling checkbox state
      */
+
     var handleChange = function handleChange(checked, val) {
       if (!checked && groupValue.length <= min || max && checked && groupValue.length >= max) return;
       var newGroupValue = checked ? [].concat(groupValue, [val]) : groupValue.filter(function (item) {
         return item !== val;
       });
       onChange && onChange(newGroupValue);
+
       if (value === void 0) {
         setGroupValue(newGroupValue);
       }
     };
+
     return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/React.createElement("div", {

package/esm/checkbox/hooks/useMergeProps.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import { useContext } from 'react';
 export var useMergeProps = function useMergeProps(props, groupContext) {
   var _useContext = useContext(groupContext),
-    disabled = _useContext.disabled,
-    shape = _useContext.shape,
-    layout = _useContext.layout,
-    icons = _useContext.icons,
-    value = _useContext.value,
-    _onChange = _useContext.onChange,
-    isGroup = _useContext.isGroup;
+      disabled = _useContext.disabled,
+      shape = _useContext.shape,
+      layout = _useContext.layout,
+      icons = _useContext.icons,
+      value = _useContext.value,
+      _onChange = _useContext.onChange,
+      isGroup = _useContext.isGroup;
+
   if (!isGroup) return props;
   return _extends({
     disabled: disabled,
@@ -21,6 +22,7 @@ export var useMergeProps = function useMergeProps(props, groupContext) {
     checked: value.indexOf(props.value) > -1,
     onChange: function onChange(checked, val, e) {
       _onChange(checked, val, e);
+
       props.onChange && props.onChange(checked, val, e);
     }
   });