@trionesdev/antd-mobile-base-react 0.0.2-beta.15 → 0.0.2-beta.17

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-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/index.scss

@@ -1,165 +1,165 @@
-@use "../style/variable" as variable;
-
-$checkboxCls: 'triones-antm-checkbox';
-
-$checkboxDisabledColor: rgba(0, 0, 0, 0.25) !default;
-
-.#{$checkboxCls}-group {
-  display: flex;
-}
-
-.#{$checkboxCls}-round {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  gap: 8Px;
-
-  .#{$checkboxCls}-round {
-    position: relative;
-
-    &-input {
-      cursor: inherit;
-      position: absolute;
-      opacity: 0;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      margin: 0;
-      padding: 0;
-      z-index: 1;
-    }
-
-    &-fake {
-      width: 20PX;
-      height: 20PX;
-
-      .triones-antm-icon {
-        //position: absolute;
-      }
-
-      &-checked {
-        height: 100%;
-        width: 100%;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        background-color: variable.$trionesColorPrimary;
-        color: white;
-        border-radius: 50vh;
-        box-sizing: border-box;
-        overflow: hidden;
-        .triones-antm-icon{
-          font-size: 14Px;
-        }
-        //i{
-        //  width: 100%;
-        //  height: 100%;
-        //  display: flex;
-        //  align-items: center;
-        //  justify-content: center;
-        //}
-      }
-
-      &-unchecked {
-        height: 100%;
-        width: 100%;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 50vh;
-        border: 1PX solid variable.$trionesBorderColor;
-        box-sizing: border-box;
-      }
-    }
-  }
-
-
-  &.#{$checkboxCls}-disabled {
-    color: $checkboxDisabledColor;
-    pointer-events: none;
-
-    .#{$checkboxCls}-fake-checked {
-      background-color: $checkboxDisabledColor;
-    }
-  }
-
-  .triones-antm-icon {
-    //position: absolute;
-  }
-}
-
-
-.#{$checkboxCls}-button {
-  cursor: pointer;
-  display: inline-flex;
-  padding: 4Px 12Px;
-  border-radius: variable.$trionesBorderRadius;
-  position: relative;
-  overflow: hidden;
-  background-color: variable.$trionesColorFillSecondary;
-  box-sizing: border-box;
-  border: 1Px solid variable.$trionesColorFillSecondary;
-
-  &-checked {
-    background-color: #ffffff;
-    border: 1Px solid variable.$trionesColorPrimary;
-
-    .#{$checkboxCls}-button-content {
-      color: variable.$trionesColorPrimary;
-    }
-  }
-
-  &-disabled {
-    pointer-events: none;
-    color: $checkboxDisabledColor;
-
-    &.#{$checkboxCls}-button {
-      &-checked {
-        border: 1Px solid $checkboxDisabledColor;
-
-        .#{$checkboxCls}-button-content {
-          color: $checkboxDisabledColor;
-        }
-      }
-
-      .#{$checkboxCls}-button-icon {
-        border-bottom: 10Px solid $checkboxDisabledColor;
-        border-right: 10Px solid $checkboxDisabledColor;
-      }
-    }
-
-  }
-
-
-  &-icon {
-    align-items: flex-end;
-    border-bottom: 10Px solid variable.$trionesColorPrimary;
-    border-left: 10Px solid transparent;
-    border-right: 10Px solid variable.$trionesColorPrimary;
-    border-top: 10Px solid transparent;
-    bottom: 0;
-    display: flex;
-    height: 0;
-    justify-content: flex-end;
-    position: absolute;
-    right: 0;
-    width: 0;
-
-    .checkedIcon {
-      font-size: 6Px;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(1Px, -1Px);
-      //font-family: "triones-ant-mini-icon" !important;
-      font-style: normal;
-      color: #ffffff;
-
-      &::before {
-        font-style: normal;
-        //content: "\e75f";
-      }
-    }
-  }
-}
+@use "../style/variable" as variable;
+
+$checkboxCls: 'triones-antm-checkbox';
+
+$checkboxDisabledColor: rgba(0, 0, 0, 0.25) !default;
+
+.#{$checkboxCls}-group {
+
+}
+
+.#{$checkboxCls}-round {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: 8Px;
+
+  .#{$checkboxCls}-round {
+    position: relative;
+
+    &-input {
+      cursor: inherit;
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      margin: 0;
+      padding: 0;
+      z-index: 1;
+    }
+
+    &-fake {
+      width: 20PX;
+      height: 20PX;
+
+      .triones-antm-icon {
+        //position: absolute;
+      }
+
+      &-checked {
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        background-color: variable.$trionesColorPrimary;
+        color: white;
+        border-radius: 50vh;
+        box-sizing: border-box;
+        overflow: hidden;
+        .triones-antm-icon{
+          font-size: 14Px;
+        }
+        //i{
+        //  width: 100%;
+        //  height: 100%;
+        //  display: flex;
+        //  align-items: center;
+        //  justify-content: center;
+        //}
+      }
+
+      &-unchecked {
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50vh;
+        border: 1PX solid variable.$trionesBorderColor;
+        box-sizing: border-box;
+      }
+    }
+  }
+
+
+  &.#{$checkboxCls}-disabled {
+    color: $checkboxDisabledColor;
+    pointer-events: none;
+
+    .#{$checkboxCls}-fake-checked {
+      background-color: $checkboxDisabledColor;
+    }
+  }
+
+  .triones-antm-icon {
+    //position: absolute;
+  }
+}
+
+
+.#{$checkboxCls}-button {
+  cursor: pointer;
+  display: inline-flex;
+  padding: 4Px 12Px;
+  border-radius: variable.$trionesBorderRadius;
+  position: relative;
+  overflow: hidden;
+  background-color: variable.$trionesColorFillSecondary;
+  box-sizing: border-box;
+  border: 1Px solid variable.$trionesColorFillSecondary;
+
+  &-checked {
+    background-color: #ffffff;
+    border: 1Px solid variable.$trionesColorPrimary;
+
+    .#{$checkboxCls}-button-content {
+      color: variable.$trionesColorPrimary;
+    }
+  }
+
+  &-disabled {
+    pointer-events: none;
+    color: $checkboxDisabledColor;
+
+    &.#{$checkboxCls}-button {
+      &-checked {
+        border: 1Px solid $checkboxDisabledColor;
+
+        .#{$checkboxCls}-button-content {
+          color: $checkboxDisabledColor;
+        }
+      }
+
+      .#{$checkboxCls}-button-icon {
+        border-bottom: 10Px solid $checkboxDisabledColor;
+        border-right: 10Px solid $checkboxDisabledColor;
+      }
+    }
+
+  }
+
+
+  &-icon {
+    align-items: flex-end;
+    border-bottom: 10Px solid variable.$trionesColorPrimary;
+    border-left: 10Px solid transparent;
+    border-right: 10Px solid variable.$trionesColorPrimary;
+    border-top: 10Px solid transparent;
+    bottom: 0;
+    display: flex;
+    height: 0;
+    justify-content: flex-end;
+    position: absolute;
+    right: 0;
+    width: 0;
+
+    .checkedIcon {
+      font-size: 6Px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(1Px, -1Px);
+      //font-family: "triones-ant-mini-icon" !important;
+      font-style: normal;
+      color: #ffffff;
+
+      &::before {
+        font-style: normal;
+        //content: "\e75f";
+      }
+    }
+  }
+}

package/dist/ConfigProvider/config-provider.d.ts

@@ -15,6 +15,7 @@ type Config = {
     };
     form?: {
         helpIcon?: ReactNode;
+        arrowIcon?: ReactNode;
     };
     input?: {
         clearIcon?: ReactNode;

package/dist/DemoBlock/index.scss

@@ -1,20 +1,20 @@
-.demoBlock {
-  font-size: 14px;
-  margin-bottom: 12px;
-  &:last-of-type {
-    padding-bottom: 32px;
-  }
-  scrollbar-width: thin;
-}
-
-.demoTitle {
-  padding: 12px 12px 8px;
-  color: #697b8c;
-  font-size: 14px;
-  background: #fafbfc;
-}
-
-.demoMain {
-  border-right: none;
-  border-left: none;
-}
+.demoBlock {
+  font-size: 14px;
+  margin-bottom: 12px;
+  &:last-of-type {
+    padding-bottom: 32px;
+  }
+  scrollbar-width: thin;
+}
+
+.demoTitle {
+  padding: 12px 12px 8px;
+  color: #697b8c;
+  font-size: 14px;
+  background: #fafbfc;
+}
+
+.demoMain {
+  border-right: none;
+  border-left: none;
+}

package/dist/DemoDescription/index.scss

@@ -1,3 +1,3 @@
-.demoDescription {
-  color: var(--triones-antm-color-weak);
-}
+.demoDescription {
+  color: var(--triones-antm-color-weak);
+}