@trionesdev/antd-mobile-base-react 0.0.2-beta.0

package/dist/Card/card.d.ts

@@ -0,0 +1,21 @@
+import type { CSSProperties, FC, ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from './native-props';
+export type CardProps = {
+    styles?: {
+        header?: CSSProperties;
+        body?: CSSProperties;
+        footer?: CSSProperties;
+    };
+    title?: ReactNode;
+    icon?: ReactNode;
+    extra?: ReactNode;
+    footer?: ReactNode;
+    headerClassName?: string;
+    bodyClassName?: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onBodyClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onHeaderClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children?: ReactNode;
+} & NativeProps;
+export declare const Card: FC<CardProps>;

package/dist/Card/card.js

@@ -0,0 +1,48 @@
+import classNames from 'classnames';
+import React from 'react';
+import { withNativeProps } from "./native-props";
+var classPrefix = "triones-antm-card";
+export var Card = function Card(props) {
+  var renderHeader = function renderHeader() {
+    var _props$styles;
+    if (!(props.title || props.extra)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(classPrefix, "-header"), props.headerClassName),
+      style: props === null || props === void 0 || (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.header,
+      onClick: props.onHeaderClick
+    }, props.icon && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-header-icon")
+    }, props.icon), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-header-title")
+    }, props.title), props.extra && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-header-extra")
+    }, props.extra));
+  };
+  var renderBody = function renderBody() {
+    var _props$styles2;
+    if (!props.children) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(classPrefix, "-body"), props.bodyClassName),
+      style: props === null || props === void 0 || (_props$styles2 = props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.body,
+      onClick: props.onBodyClick
+    }, props.children);
+  };
+  var renderFooter = function renderFooter() {
+    var _props$styles3;
+    if (!props.footer) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(classPrefix, "-footer")),
+      style: props === null || props === void 0 || (_props$styles3 = props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.footer
+    }, props.footer);
+  };
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix,
+    onClick: props.onClick
+  }, renderHeader(), renderBody(), renderFooter()));
+};

package/dist/Card/index.d.ts

@@ -0,0 +1,4 @@
+import { Card } from './card';
+import './style.scss';
+export type { CardProps } from './card';
+export default Card;

package/dist/Card/index.js

@@ -0,0 +1,3 @@
+import { Card } from "./card";
+import "./style.scss";
+export default Card;

package/dist/Card/native-props.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties, ReactElement } from 'react';
+import React, { AriaAttributes } from 'react';
+export type NativeProps<S extends string = never> = {
+    className?: string;
+    style?: CSSProperties & Partial<Record<S, string>>;
+    tabIndex?: number;
+} & AriaAttributes;
+export declare function withNativeProps<P extends NativeProps>(props: P, element: ReactElement): ReactElement<any, string | React.JSXElementConstructor<any>>;

package/dist/Card/native-props.js

@@ -0,0 +1,27 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 classNames from 'classnames';
+import React from 'react';
+export function withNativeProps(props, element) {
+  var p = _objectSpread({}, element.props);
+  if (props.className) {
+    p.className = classNames(element.props.className, props.className);
+  }
+  if (props.style) {
+    p.style = _objectSpread(_objectSpread({}, p.style), props.style);
+  }
+  if (props.tabIndex !== undefined) {
+    p.tabIndex = props.tabIndex;
+  }
+  for (var key in props) {
+    if (!props.hasOwnProperty(key)) continue;
+    if (key.startsWith('data-') || key.startsWith('aria-')) {
+      p[key] = props[key];
+    }
+  }
+  return /*#__PURE__*/React.cloneElement(element, p);
+}

package/dist/Card/style.scss

@@ -0,0 +1,35 @@
+@import "../style/variable";
+$class-prefix-card: 'triones-antm-card';
+
+.#{$class-prefix-card} {
+  background: $trionesColorBgBase;
+  border-radius: $trionesBorderRadius;
+  //padding: $trionesPadding $trionesPadding;
+  &-header {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8Px;
+    box-sizing: border-box;
+    padding: $trionesPaddingXs $trionesPaddingXs;
+    &:not(:last-child) {
+      border-bottom: solid 0.5Px $trionesBorderColor;
+    }
+    &-title {
+      font-size: $trionesFontSize;
+      line-height: 1.4;
+      font-weight: 500;
+    }
+  }
+  &-body {
+    padding: $trionesPaddingXs $trionesPaddingXs;
+  }
+  &-footer {
+    padding: $trionesPaddingXs $trionesPaddingXs;
+  }
+  &-footer {
+    border-top: solid 0.5Px $trionesBorderColor;
+    padding: $trionesPaddingXs $trionesPaddingXs;
+  }
+}

package/dist/CascaderPicker/cascader-picker.d.ts

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import './style.scss';
+export type CascaderPickerProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    open?: boolean;
+    afterOpenChange?: (open: boolean) => void;
+    title?: React.ReactNode;
+    options?: any[];
+    /**
+     * @description 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 string 变为 { value: string, label: ReactNode } 的格式
+     * @default false
+     */
+    labelInValue?: boolean;
+    fieldNames?: {
+        value?: string;
+        label?: string;
+        children?: string;
+    };
+    columnsCount?: number;
+    value?: any[];
+    onOk?: (value?: any[]) => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    asyncRequest?: (parentValue?: any) => Promise<any>;
+};
+export declare const CascaderPicker: FC<CascaderPickerProps>;

package/dist/CascaderPicker/cascader-picker.js

@@ -0,0 +1,88 @@
+import classNames from 'classnames';
+import { isEqual } from 'lodash';
+import React, { useEffect, useRef } from 'react';
+import CascaderView from "../CascaderView";
+import ConfigProvider from "../ConfigProvider";
+import Popup from "../Popup";
+import "./style.scss";
+var cascaderPickerCls = 'triones-antm-cascader-picker';
+export var CascaderPicker = /*#__PURE__*/React.memo(function (_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    afterOpenChange = _ref.afterOpenChange,
+    title = _ref.title,
+    options = _ref.options,
+    _ref$labelInValue = _ref.labelInValue,
+    labelInValue = _ref$labelInValue === void 0 ? false : _ref$labelInValue,
+    fieldNames = _ref.fieldNames,
+    columnsCount = _ref.columnsCount,
+    value = _ref.value,
+    onOk = _ref.onOk,
+    onCancel = _ref.onCancel,
+    onClose = _ref.onClose,
+    asyncRequest = _ref.asyncRequest;
+  var _ConfigProvider$useCo = ConfigProvider.useConfig(),
+    locale = _ConfigProvider$useCo.locale;
+  var internalValueRf = useRef(value);
+  var handleClose = function handleClose() {
+    onClose === null || onClose === void 0 || onClose();
+  };
+  var handleOk = function handleOk() {
+    onOk === null || onOk === void 0 || onOk(internalValueRf.current);
+  };
+  var handelCancel = function handelCancel() {
+    onCancel === null || onCancel === void 0 || onCancel();
+    handleClose();
+  };
+  useEffect(function () {
+    if (value === undefined) {
+      return;
+    }
+    if (isEqual(value, internalValueRf.current)) {
+      return;
+    }
+    internalValueRf.current = value;
+  }, [value]);
+  return /*#__PURE__*/React.createElement(Popup, {
+    open: open,
+    onClose: handleClose,
+    styles: {
+      body: {
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 6
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(cascaderPickerCls, className),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(cascaderPickerCls, "-header"))
+  }, /*#__PURE__*/React.createElement("a", {
+    className: classNames("".concat(cascaderPickerCls, "-header-button")),
+    onClick: handelCancel
+  }, locale.common.cancel), title && /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(cascaderPickerCls, "-header-title"))
+  }, title), /*#__PURE__*/React.createElement("a", {
+    className: classNames("".concat(cascaderPickerCls, "-header-button"), "".concat(cascaderPickerCls, "-header-button-ok")),
+    onClick: handleOk
+  }, locale.common.confirm)), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(cascaderPickerCls, "-body"))
+  }, /*#__PURE__*/React.createElement(CascaderView
+  // open={ open}
+  , {
+    fieldNames: fieldNames,
+    options: options,
+    labelInValue: labelInValue,
+    columnsCount: columnsCount,
+    value: value,
+    onChange: function onChange(newVal) {
+      internalValueRf.current = newVal;
+    },
+    asyncRequest: asyncRequest,
+    style: {
+      height: '100%'
+    }
+  }))));
+});

package/dist/CascaderPicker/index.d.ts

@@ -0,0 +1,3 @@
+import { CascaderPicker, CascaderPickerProps } from "./cascader-picker";
+export type { CascaderPickerProps };
+export default CascaderPicker;

package/dist/CascaderPicker/index.js

@@ -0,0 +1,2 @@
+import { CascaderPicker } from "./cascader-picker";
+export default CascaderPicker;

package/dist/CascaderPicker/style.scss

@@ -0,0 +1,42 @@
+@import "../style/variable";
+$cascaderPickerCls: 'triones-antm-cascader-picker';
+
+.#{$cascaderPickerCls} {
+  width: 100%;
+  height: 300Px;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1Px solid $trionesBorderColor;
+    padding: 4Px;
+
+    &-button {
+
+      padding: 8Px;
+      font-size: 12Px;
+      &-ok{
+        color: $trionesColorPrimary;
+      }
+    }
+
+    &-title {
+    }
+  }
+
+  &-body {
+    flex: 1 1;
+    width: 100%;
+    pointer-events: unset;
+    overflow: hidden;
+  }
+  &-view{
+    --height: 100%;
+  }
+
+}

package/dist/CascaderView/cascader-column-item.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+type CascaderColumnItemProps = {
+    option: any;
+    onClick?: (option: any) => void;
+    selected?: boolean;
+};
+export declare const CascaderColumnItem: FC<CascaderColumnItemProps>;
+export {};

package/dist/CascaderView/cascader-column-item.js

@@ -0,0 +1,19 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 React from "react";
+import classNames from "classnames";
+import { CheckOutline } from "../../../antd-mobile-icons-react";
+var cascaderViewCls = 'triones-antm-cascader-view';
+export var CascaderColumnItem = function CascaderColumnItem(_ref) {
+  var option = _ref.option,
+    _onClick = _ref.onClick,
+    selected = _ref.selected;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(cascaderViewCls, "-column-item"), _defineProperty({}, "".concat(cascaderViewCls, "-column-item-selected"), selected)),
+    onClick: function onClick() {
+      _onClick === null || _onClick === void 0 || _onClick(option);
+    }
+  }, /*#__PURE__*/React.createElement("div", null, option.label), selected && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckOutline, null)));
+};

package/dist/CascaderView/cascader-column.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+type CascaderColumnProps = {
+    index?: number;
+    options?: any[];
+    value: any;
+    onSelect?: (option: any, columnIndex: number) => void;
+};
+export declare const CascaderColumn: FC<CascaderColumnProps>;
+export {};

package/dist/CascaderView/cascader-column.js

@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+import React from 'react';
+import { CascaderColumnItem } from "./cascader-column-item";
+var cascaderViewCls = 'triones-antm-cascader-view';
+export var CascaderColumn = function CascaderColumn(_ref) {
+  var _ref$index = _ref.index,
+    index = _ref$index === void 0 ? 0 : _ref$index,
+    options = _ref.options,
+    value = _ref.value,
+    onSelect = _ref.onSelect;
+  var handleOnSelect = function handleOnSelect(option) {
+    onSelect === null || onSelect === void 0 || onSelect(option, index);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(cascaderViewCls, "-column"))
+  }, options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+    return /*#__PURE__*/React.createElement(CascaderColumnItem, {
+      key: index,
+      option: option,
+      selected: (value === null || value === void 0 ? void 0 : value.value) === option.value,
+      onClick: function onClick() {
+        handleOnSelect(option);
+      }
+    });
+  }));
+};

package/dist/CascaderView/cascader-view.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties, FC } from 'react';
+import './style.scss';
+export type CascaderViewProps = {
+    className?: string;
+    style?: CSSProperties;
+    options?: any[];
+    labelInValue?: boolean;
+    fieldNames?: {
+        value?: string;
+        label?: string;
+        children?: string;
+    };
+    columnsCount?: number;
+    value?: any;
+    onChange?: (value: any) => void;
+    asyncRequest?: (parentValue?: any) => Promise<any>;
+};
+export declare const CascaderView: FC<CascaderViewProps>;