@trionesdev/antd-mobile-base-react 0.0.2-beta.16 → 0.0.2-beta.18

package/dist/Cell/CellGroup.js

@@ -16,21 +16,36 @@ export var CellGroup = function CellGroup(_ref) {
     children = _ref.children,
     title = _ref.title,
     extra = _ref.extra,
+    arrow = _ref.arrow,
     labelCol = _ref.labelCol,
     labelAlign = _ref.labelAlign,
-    wrapperAlign = _ref.wrapperAlign,
+    contentAlign = _ref.contentAlign,
     divider = _ref.divider,
+    size = _ref.size,
     styles = _ref.styles;
   var handleRender = function handleRender() {
     if (children) {
       if (Array.isArray(children)) {
-        var childrenArray = [];
-        children.filter(function (child) {
+        var validChildren = React.Children.toArray(children).filter(function (child) {
           return /*#__PURE__*/React.isValidElement(child) && (child.type == Cell || child.type == InternalCell);
-        }).forEach(function (child, index) {
-          childrenArray.push(child);
-          if (divider && index < React.Children.count(children) - 1) {
-            childrenArray.push(divider);
+        });
+        var childrenArray = [];
+        validChildren.forEach(function (child, index) {
+          var _child$key;
+          childrenArray.push( /*#__PURE__*/React.cloneElement(child, {
+            key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : "cell-".concat(index)
+          }));
+          if (divider && index < validChildren.length - 1) {
+            if ( /*#__PURE__*/React.isValidElement(divider)) {
+              var _divider$key;
+              childrenArray.push( /*#__PURE__*/React.cloneElement(divider, {
+                key: (_divider$key = divider.key) !== null && _divider$key !== void 0 ? _divider$key : "divider-".concat(index)
+              }));
+            } else {
+              childrenArray.push( /*#__PURE__*/React.createElement(React.Fragment, {
+                key: "divider-".concat(index)
+              }, divider));
+            }
           }
         });
         return childrenArray;
@@ -44,8 +59,10 @@ export var CellGroup = function CellGroup(_ref) {
     value: {
       labelCol: labelCol,
       labelAlign: labelAlign,
-      wrapperAlign: wrapperAlign,
+      contentAlign: contentAlign,
       extra: extra,
+      arrow: arrow,
+      size: size,
       styles: {
         cell: styles === null || styles === void 0 ? void 0 : styles.cell,
         label: styles === null || styles === void 0 ? void 0 : styles.label,

package/dist/Cell/cell.js

@@ -9,77 +9,60 @@ import React, { useContext, useMemo } from 'react';
 import "./styles.scss";
 import { CellGroupContext } from "./context";
 import { assign } from "lodash-es";
+import { RightOutline } from "@trionesdev/antd-mobile-icons-react";
 var cls = 'triones-antm-cell';
 export var Cell = function Cell(_ref) {
+  var _ref2, _ref3, _ref4;
   var className = _ref.className,
     style = _ref.style,
     placeholder = _ref.placeholder,
     children = _ref.children,
     label = _ref.label,
     extra = _ref.extra,
+    arrow = _ref.arrow,
     labelCol = _ref.labelCol,
     labelAlign = _ref.labelAlign,
-    wrapperAlign = _ref.wrapperAlign,
+    contentAlign = _ref.contentAlign,
     onClick = _ref.onClick,
     styles = _ref.styles;
   var _useContext = useContext(CellGroupContext),
     ctxLabelCol = _useContext.labelCol,
     ctxLabelAlign = _useContext.labelAlign,
-    ctxWrapperAlign = _useContext.wrapperAlign,
+    ctxContentAlign = _useContext.contentAlign,
+    ctxSize = _useContext.size,
+    ctxArrow = _useContext.arrow,
     ctxExtra = _useContext.extra,
     ctxStyles = _useContext.styles;
   var labelWidth = useMemo(function () {
     return (labelCol === null || labelCol === void 0 ? void 0 : labelCol.flex) || (ctxLabelCol === null || ctxLabelCol === void 0 ? void 0 : ctxLabelCol.flex) || 'auto';
   }, [labelCol, ctxLabelCol]);
-  var labelAlignStyle = useMemo(function () {
-    var align = labelAlign || ctxLabelAlign;
-    switch (align) {
-      case 'left':
-        return 'start';
-      case 'center':
-        return 'center';
-      case 'right':
-        return 'end';
-      default:
-        return 'start';
-    }
-  }, [labelAlign, ctxLabelAlign]);
-  var wrapperAlignStyle = useMemo(function () {
-    var align = wrapperAlign || ctxWrapperAlign;
-    switch (align) {
-      case 'left':
-        return 'start';
-      case 'center':
-        return 'center';
-      case 'right':
-        return 'end';
-      default:
-        return 'start';
-    }
-  }, [wrapperAlign, ctxWrapperAlign]);
+  var finalLabelAlign = (_ref2 = ctxLabelAlign !== null && ctxLabelAlign !== void 0 ? ctxLabelAlign : labelAlign) !== null && _ref2 !== void 0 ? _ref2 : 'start';
+  var finalContentAlign = (_ref3 = ctxContentAlign !== null && ctxContentAlign !== void 0 ? ctxContentAlign : contentAlign) !== null && _ref3 !== void 0 ? _ref3 : 'end';
+  var finalSize = ctxSize !== null && ctxSize !== void 0 ? ctxSize : 'medium';
+  var finalArrow = (_ref4 = ctxArrow !== null && ctxArrow !== void 0 ? ctxArrow : arrow) !== null && _ref4 !== void 0 ? _ref4 : false;
   var mergedStyles = assign({}, ctxStyles, styles);
   if (style) {
     mergedStyles.cell = assign(mergedStyles.cell, style);
   }
+  var sizePossible = ['small', 'medium', 'large'].includes(finalSize);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(cls, className),
+    className: classNames(cls, _defineProperty({}, "".concat(cls, "-").concat(finalSize), sizePossible), className),
     style: _objectSpread({}, mergedStyles.cell),
     onClick: onClick
   }, label && /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(cls, "-label")),
+    className: classNames("".concat(cls, "-label"), "".concat(cls, "-label-").concat(finalLabelAlign)),
     style: _objectSpread({
-      width: labelWidth,
-      justifyContent: labelAlignStyle
+      width: labelWidth
     }, mergedStyles === null || mergedStyles === void 0 ? void 0 : mergedStyles.label)
   }, label), /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(cls, "-content")),
-    style: _objectSpread({
-      justifyContent: wrapperAlignStyle
-    }, mergedStyles === null || mergedStyles === void 0 ? void 0 : mergedStyles.content)
+    className: classNames("".concat(cls, "-content"), "".concat(cls, "-content-").concat(finalContentAlign)),
+    style: _objectSpread({}, mergedStyles === null || mergedStyles === void 0 ? void 0 : mergedStyles.content)
   }, children || placeholder && /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(cls, "-placeholder"))
   }, placeholder)), (extra || ctxExtra) && /*#__PURE__*/React.createElement("div", {
     className: classNames("".concat(cls, "-extra")),
     style: mergedStyles === null || mergedStyles === void 0 ? void 0 : mergedStyles.extra
-  }, extra || ctxExtra));
+  }, extra || ctxExtra), finalArrow && /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(cls, "-arrow"))
+  }, /*#__PURE__*/React.createElement(RightOutline, null)));
 };

package/dist/Cell/context.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
-import { Col } from "../types";
+import { AntSize, Col } from "../types";
 import { align } from "./types";
 type CellGroupContextType = {
     labelCol?: Col;
     labelAlign?: align;
-    wrapperAlign?: align;
+    contentAlign?: align;
+    arrow?: boolean;
     extra?: React.ReactNode;
+    size?: AntSize;
     styles?: {
         cell?: React.CSSProperties;
         label?: React.CSSProperties;

package/dist/Cell/styles.scss

@@ -1,52 +1,81 @@
-@use "../style/variable" as variable;
-
-$cellCls: 'triones-antm-cell';
-
-.#{$cellCls} {
-  padding-block: 4Px;
-  display: flex;
-  gap: 4Px;
-  align-items: center;
-
-
-  &-label {
-    display: flex;
-    align-items: center;
-  }
-
-  &-content {
-    flex: 1 auto;
-    display: flex;
-    align-items: center;
-    min-height: 20Px;
-  }
-
-  &-extra {
-    display: flex;
-    align-items: center;
-  }
-
-
-  &-placeholder {
-    font-size: variable.$trionesFontSize;
-    color: variable.$trionesColorTextPlaceholder;
-  }
-}
-
-.#{$cellCls}-group {
-  display: flex;
-  flex-direction: column;
-  border-radius: variable.$trionesBorderRadius;
-
-  &-title {
-    padding: 4Px 4Px;
-    display: flex;
-    justify-content: space-between;
-
-    &-text {
-    }
-
-    &-extra {
-    }
-  }
-}
+@use "../style/variable" as variable;
+
+$cellCls: 'triones-antm-cell';
+
+.#{$cellCls} {
+  display: flex;
+  gap: 4Px;
+  align-items: center;
+
+  &-small{
+    padding-block: variable.$trionesPaddingXxs;
+  }
+  &-medium{
+    padding-block: variable.$trionesPaddingXs;
+  }
+  &-large{
+    padding-block: variable.$trionesPaddingSm;
+  }
+
+  &-label {
+    display: flex;
+    align-items: center;
+    &-start{
+      justify-content: flex-start;
+    }
+    &-end{
+      justify-content: flex-end;
+    }
+  }
+
+  &-content {
+    flex: 1 auto;
+    display: flex;
+    align-items: center;
+    min-height: 20Px;
+    &-start{
+      justify-content: flex-start;
+    }
+    &-end{
+      justify-content: flex-end;
+    }
+  }
+
+  &-extra {
+    display: flex;
+    align-items: center;
+  }
+  &-arrow{
+    font-size: variable.$trionesFontSize;
+    color: variable.$trionesColorTextPlaceholder;
+    .triones-antm-icon{
+      &::before{
+        font-size: 12Px;
+      }
+    }
+  }
+
+  &-placeholder {
+    font-size: variable.$trionesFontSize;
+    color: variable.$trionesColorTextPlaceholder;
+  }
+}
+
+.#{$cellCls}-group {
+  display: flex;
+  flex-direction: column;
+  border-radius: variable.$trionesBorderRadius;
+
+  &-title {
+    padding: 4Px 4Px;
+    display: flex;
+    justify-content: space-between;
+
+    &-text {
+    }
+
+    &-extra {
+    }
+
+  }
+}

package/dist/Cell/types.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
-import { Col } from "../types";
+import { AntSize, Col } from "../types";
 export declare const cls = "triones-antm-cell";
-export type align = 'left' | 'center' | 'right';
+export type align = 'start' | 'center' | 'end';
 export type CellProps = {
     className?: string;
     style?: React.CSSProperties;
@@ -27,7 +27,8 @@ export type CellProps = {
     onClick?: () => void;
     labelCol?: Col;
     labelAlign?: align;
-    wrapperAlign?: align;
+    contentAlign?: align;
+    size?: AntSize;
     styles?: {
         label?: React.CSSProperties;
         content?: React.CSSProperties;
@@ -49,8 +50,9 @@ export type CellGroupProps = {
     arrow?: boolean;
     labelCol?: Col;
     labelAlign?: align;
-    wrapperAlign?: align;
+    contentAlign?: align;
     divider?: ReactNode;
+    size?: AntSize;
     styles?: {
         container?: React.CSSProperties;
         title?: React.CSSProperties;

package/dist/Checkbox/checkbox-button.js

@@ -5,7 +5,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React from 'react';
 import { cls } from "./types";
 import classNames from 'classnames';
-import { CheckOutline } from "../../../antd-mobile-icons-react";
+import { CheckOutline } from '@trionesdev/antd-mobile-icons-react';
 export var CheckboxButton = function CheckboxButton(_ref) {
   var children = _ref.children,
     checked = _ref.checked,

package/dist/Checkbox/checkbox-group.js

@@ -30,12 +30,11 @@ export var CheckboxGroup = function CheckboxGroup(_ref) {
       value: innerValue,
       onValueChange: function onValueChange(v) {
         setInnerValue(v);
-        console.log('value', v);
         onChange === null || onChange === void 0 || onChange(v);
       }
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(cls, "-group}"))
+    className: classNames("".concat(cls, "-group"))
   }, !isEmpty(options) && /*#__PURE__*/React.createElement(Space, {
     direction: direction
   }, options === null || options === void 0 ? void 0 : options.map(function (item, index) {

package/dist/Checkbox/checkbox-round.js

@@ -2,7 +2,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { CheckOutline } from "../../../antd-mobile-icons-react";
+import { CheckOutline } from '@trionesdev/antd-mobile-icons-react';
 import classNames from 'classnames';
 import React from 'react';
 import "./index.scss";