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

package/dist/Rate/rate.d.ts

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../utils/native-props';
+import './style.scss';
+export type RateProps = {
+    /**
+     * 评分值
+     */
+    value?: number;
+    /**
+     * 默认评分值
+     */
+    defaultValue?: number;
+    /**
+     * 评分总数
+     */
+    count?: number;
+    /**
+     * 是否允许半星
+     */
+    allowHalf?: boolean;
+    /**
+     * 是否允许清除
+     */
+    allowClear?: boolean;
+    /**
+     * 是否只读
+     */
+    readonly?: boolean;
+    /**
+     * 评分改变时的回调
+     */
+    onChange?: (value: number) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 星星大小
+     */
+    size?: number;
+    /**
+     * 自定义字符
+     */
+    character?: React.ReactNode;
+    /**
+     * 自定义样式
+     */
+    style?: React.CSSProperties;
+} & NativeProps<'--active-color' | '--inactive-color'>;
+export declare const Rate: FC<RateProps>;

package/dist/Rate/rate.js

@@ -0,0 +1,100 @@
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { StarFill } from "../../../antd-mobile-icons-react";
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { withNativeProps } from "../utils/native-props";
+import { mergeProps } from "../utils/with-default-props";
+import "./style.scss";
+var defaultProps = {
+  count: 5,
+  defaultValue: 0,
+  allowHalf: false,
+  readonly: false,
+  allowClear: true,
+  size: 20
+};
+export var Rate = function Rate(p) {
+  var props = mergeProps(defaultProps, p);
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    count = props.count,
+    allowHalf = props.allowHalf,
+    readonly = props.readonly,
+    allowClear = props.allowClear,
+    size = props.size,
+    character = props.character,
+    onChange = props.onChange;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var clsPrefix = 'triones-antm-rate';
+  var currentValue = value !== null && value !== void 0 ? value : internalValue;
+  var handleClick = function handleClick(index, isHalf) {
+    if (readonly) return;
+    var newValue = isHalf ? index + 0.5 : index + 1;
+    if (allowClear) {
+      if (!allowHalf && currentValue === newValue || allowHalf && currentValue === newValue && currentValue === index + (isHalf ? 0.5 : 1)) {
+        if (!value) {
+          setInternalValue(0);
+        }
+        onChange === null || onChange === void 0 || onChange(0);
+        return;
+      }
+    }
+    if (!value) {
+      setInternalValue(newValue);
+    }
+    onChange === null || onChange === void 0 || onChange(newValue);
+  };
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classNames(clsPrefix, _defineProperty({}, "".concat(clsPrefix, "-readonly"), readonly))
+  }, _toConsumableArray(Array(count)).map(function (_, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "".concat(clsPrefix, "-star-wrapper"),
+      onClick: function onClick(e) {
+        if (!allowHalf) {
+          handleClick(index, false);
+          return;
+        }
+        var rect = e.currentTarget.getBoundingClientRect();
+        var isHalf = e.clientX - rect.left < rect.width / 2;
+        handleClick(index, isHalf);
+      }
+    }, character ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(clsPrefix, "-star"), _defineProperty({}, "".concat(clsPrefix, "-star-active"), index + 1 <= currentValue)),
+      style: {
+        fontSize: size
+      }
+    }, character), allowHalf && /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(clsPrefix, "-star"), "".concat(clsPrefix, "-star-half-item"), _defineProperty({}, "".concat(clsPrefix, "-star-active"), index + 0.5 <= currentValue)),
+      style: {
+        fontSize: size
+      }
+    }, character)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StarFill, {
+      className: classNames("".concat(clsPrefix, "-star"), _defineProperty({}, "".concat(clsPrefix, "-star-active"), index + 1 <= currentValue)),
+      style: {
+        fontSize: size
+      }
+    }), allowHalf && /*#__PURE__*/React.createElement(StarFill, {
+      className: classNames("".concat(clsPrefix, "-star"), "".concat(clsPrefix, "-star-half-item"), _defineProperty({}, "".concat(clsPrefix, "-star-active"), index + 0.5 <= currentValue)),
+      style: {
+        fontSize: size
+      }
+    })));
+  })));
+};

package/dist/Rate/style.scss

@@ -0,0 +1,37 @@
+$rateCls: 'triones-antm-rate';
+
+.#{$rateCls} {
+  display: inline-flex;
+  align-items: center;
+
+  &-star-wrapper {
+    position: relative;
+    padding: 0 2px;
+    cursor: pointer;
+  }
+
+  &-star {
+    font-size: 20px;
+    color: var(--inactive-color, #e8e8e8);
+    transition: color 0.3s;
+
+    &-active {
+      color: var(--active-color, #ffb400);
+    }
+  }
+
+  &-star-half-item {
+    position: absolute;
+    left: 2px;
+    top: 0;
+    width: 42%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  &-readonly {
+    .#{$rateCls}-star-wrapper {
+      cursor: default;
+    }
+  }
+}

package/dist/Result/demo/base.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Result/demo/base.js

@@ -0,0 +1,57 @@
+/**
+ * compact: true
+ */
+import { DemoBlock } from "../../DemoBlock";
+import React from 'react';
+import { FaceRecognitionOutline } from "../../../../antd-mobile-icons-react";
+import Result from "../index";
+export default (function () {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u6210\u529F\u72B6\u6001",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    status: "success",
+    title: "\u64CD\u4F5C\u6210\u529F",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u7B49\u5F85\u72B6\u6001",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    status: "waiting",
+    title: "\u7B49\u5F85\u5904\u7406",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u63D0\u793A\u72B6\u6001",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    status: "info",
+    title: "\u4FE1\u606F\u63D0\u793A",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u8B66\u544A\u72B6\u6001",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    status: "warning",
+    title: "\u8B66\u544A\u63D0\u793A",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u5931\u8D25\u72B6\u6001",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    status: "error",
+    title: "\u65E0\u6CD5\u5B8C\u6210\u64CD\u4F5C",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u81EA\u5B9A\u4E49\u56FE\u6807",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    icon: /*#__PURE__*/React.createElement(FaceRecognitionOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }),
+    status: "success",
+    title: "Well done",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })));
+});

package/dist/Result/index.d.ts

@@ -0,0 +1,3 @@
+import { Result } from './result';
+export type { ResultProps } from './result';
+export default Result;

package/dist/Result/index.js

@@ -0,0 +1,2 @@
+import { Result } from "./result";
+export default Result;

package/dist/Result/result.d.ts

@@ -0,0 +1,10 @@
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../utils/native-props';
+import './style.scss';
+export type ResultProps = {
+    status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+} & NativeProps;
+export declare const Result: FC<ResultProps>;

package/dist/Result/result.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useResultIcon } from "./use-result-icon";
+import { withNativeProps } from "../utils/native-props";
+import { mergeProps } from "../utils/with-default-props";
+import "./style.scss";
+var classPrefix = "triones-antm-result";
+var defaultProps = {
+  status: 'info'
+};
+export var Result = function Result(p) {
+  var props = mergeProps(defaultProps, p);
+  var status = props.status,
+    title = props.title,
+    description = props.description,
+    icon = props.icon;
+  var fallbackIcon = useResultIcon(status);
+  if (!status) return null;
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classNames(classPrefix, "".concat(classPrefix, "-").concat(status))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-icon")
+  }, icon || fallbackIcon), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-title")
+  }, title), !!description && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-description")
+  }, description)));
+};

package/dist/Result/style.scss

@@ -0,0 +1,73 @@
+$class-prefix-result: 'triones-antm-result';
+/* prettier-ignore */
+.#{$class-prefix-result} {
+  padding: 32PX 12PX;
+  background-color: var(--triones-antm-color-background);
+
+  &-icon {
+    box-sizing: border-box;
+    width: 64PX;
+    height: 64PX;
+    margin: 0 auto 20PX auto;
+    padding: 6PX;
+
+    .antd-mobile-icon {
+      font-size: 52PX;
+    }
+  }
+
+  &-title {
+    color: var(--triones-antm-color-text);
+    font-size: var(--triones-antm-font-size-10);
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  &-description {
+    margin-top: 8PX;
+    color: var(--triones-antm-color-weak);
+    font-size: var(--triones-antm-font-size-main);
+    line-height: 1.4;
+    text-align: center;
+  }
+}
+
+.#{$class-prefix-result}-success {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-error {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-danger);
+    }
+  }
+}
+
+.#{$class-prefix-result}-info {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-waiting {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-success);
+    }
+  }
+}
+
+.#{$class-prefix-result}-warning {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-warning);
+    }
+  }
+}

package/dist/Result/use-result-icon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useResultIcon: (status?: 'success' | 'error' | 'info' | 'waiting' | 'warning') => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null;

package/dist/Result/use-result-icon.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import ConfigProvider from "../ConfigProvider";
+import { CheckCircleOutline, CloseCircleOutline, InformationCircleOutline, ClockCircleOutline, ExclamationTriangleOutline } from "../../../antd-mobile-icons-react";
+export var useResultIcon = function useResultIcon(status) {
+  var _ConfigProvider$useCo = ConfigProvider.useConfig(),
+    _ConfigProvider$useCo2 = _ConfigProvider$useCo.result,
+    componentConfig = _ConfigProvider$useCo2 === void 0 ? {} : _ConfigProvider$useCo2;
+  var _ref = componentConfig || {},
+    _ref$successIcon = _ref.successIcon,
+    successIcon = _ref$successIcon === void 0 ? /*#__PURE__*/React.createElement(CheckCircleOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }) : _ref$successIcon,
+    _ref$errorIcon = _ref.errorIcon,
+    errorIcon = _ref$errorIcon === void 0 ? /*#__PURE__*/React.createElement(CloseCircleOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }) : _ref$errorIcon,
+    _ref$infoIcon = _ref.infoIcon,
+    infoIcon = _ref$infoIcon === void 0 ? /*#__PURE__*/React.createElement(InformationCircleOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }) : _ref$infoIcon,
+    _ref$waitingIcon = _ref.waitingIcon,
+    waitingIcon = _ref$waitingIcon === void 0 ? /*#__PURE__*/React.createElement(ClockCircleOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }) : _ref$waitingIcon,
+    _ref$warningIcon = _ref.warningIcon,
+    warningIcon = _ref$warningIcon === void 0 ? /*#__PURE__*/React.createElement(ExclamationTriangleOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }) : _ref$warningIcon;
+  switch (status) {
+    case 'success':
+      return successIcon;
+    case 'error':
+      return errorIcon;
+    case 'info':
+      return infoIcon;
+    case 'waiting':
+      return waitingIcon;
+    case 'warning':
+      return warningIcon;
+    default:
+      return null;
+  }
+};

package/dist/SafeArea/index.d.ts

@@ -0,0 +1,4 @@
+import { SafeArea } from './safe-area';
+import './style.scss';
+export type { SafeAreaProps } from './safe-area';
+export default SafeArea;

package/dist/SafeArea/index.js

@@ -0,0 +1,3 @@
+import { SafeArea } from "./safe-area";
+import "./style.scss";
+export default SafeArea;

package/dist/SafeArea/safe-area.d.ts

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import React from 'react';
+import { NativeProps } from '../utils/native-props';
+export type SafeAreaProps = {
+    children?: React.ReactNode;
+    /**
+     * @description 安全区位置
+     * @default top
+     */
+    position?: 'top' | 'bottom';
+    top?: boolean;
+    bottom?: boolean;
+} & NativeProps;
+export declare const SafeArea: FC<SafeAreaProps>;

package/dist/SafeArea/safe-area.js

@@ -0,0 +1,23 @@
+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); }
+var _excluded = ["position", "top", "bottom"];
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import { withNativeProps } from "../utils/native-props";
+import classNames from 'classnames';
+var classPrefix = 'triones-antm-safe-area';
+export var SafeArea = function SafeArea(_ref) {
+  var _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'top' : _ref$position,
+    _ref$top = _ref.top,
+    top = _ref$top === void 0 ? true : _ref$top,
+    _ref$bottom = _ref.bottom,
+    bottom = _ref$bottom === void 0 ? true : _ref$bottom,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classNames(classPrefix, "".concat(classPrefix, "-position-").concat(position), _defineProperty(_defineProperty({}, "".concat(classPrefix, "-position-top"), top), "".concat(classPrefix, "-position-bottom"), bottom))
+  }, props.children));
+};

package/dist/SafeArea/style.scss

@@ -0,0 +1,18 @@
+@import "../style/variable";
+
+$class-prefix-safe-area: 'triones-antm-safe-area';
+
+.#{$class-prefix-safe-area} {
+  height: 100%;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+
+  &-position-top {
+    padding-top: calc(env(safe-area-inset-top) * $trionesSafeAreaMultiple);
+  }
+
+  &-position-bottom {
+    padding-bottom: calc(env(safe-area-inset-bottom) * $trionesSafeAreaMultiple);
+  }
+}

package/dist/Scaffold/index.d.ts

@@ -0,0 +1,3 @@
+import { Scaffold, ScaffoldProps } from './scaffold';
+export type { ScaffoldProps };
+export default Scaffold;

package/dist/Scaffold/index.js

@@ -0,0 +1,2 @@
+import { Scaffold } from "./scaffold";
+export default Scaffold;

package/dist/Scaffold/scaffold.d.ts

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import './style.scss';
+export type ScaffoldProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    appBar?: React.ReactNode;
+    children?: React.ReactNode;
+    bottomNavigationBar?: React.ReactNode;
+    bottomSafeArea?: boolean;
+};
+export declare const Scaffold: FC<ScaffoldProps>;

package/dist/Scaffold/scaffold.js

@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+import React from 'react';
+import "./style.scss";
+export var Scaffold = function Scaffold(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    appBar = _ref.appBar,
+    children = _ref.children,
+    bottomNavigationBar = _ref.bottomNavigationBar,
+    _ref$bottomSafeArea = _ref.bottomSafeArea,
+    bottomSafeArea = _ref$bottomSafeArea === void 0 ? true : _ref$bottomSafeArea;
+  var scaffoldCls = 'triones-antm-scaffold';
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(scaffoldCls, className),
+    style: style
+  }, appBar, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(scaffoldCls, "-body"))
+  }, children), bottomNavigationBar);
+};

package/dist/Scaffold/style.scss

@@ -0,0 +1,16 @@
+@import "../style/variable";
+
+
+$trionesScaffoldCls: 'triones-antm-scaffold';
+
+.#{$trionesScaffoldCls} {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &-body {
+    flex: 1 auto;
+    overflow: hidden;
+  }
+}

package/dist/ScrollView/index.d.ts

@@ -0,0 +1,4 @@
+import { ScrollView } from "./scroll-view";
+import type { ScrollViewProps } from "./types";
+export type { ScrollViewProps };
+export default ScrollView;

package/dist/ScrollView/index.js

@@ -0,0 +1,2 @@
+import { ScrollView } from "./scroll-view";
+export default ScrollView;

package/dist/ScrollView/scroll-view.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import './style.scss';
+import { ScrollViewProps } from "./types";
+export declare const ScrollView: FC<ScrollViewProps>;

package/dist/ScrollView/scroll-view.js

@@ -0,0 +1,55 @@
+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 classNames from 'classnames';
+import React, { forwardRef, useEffect, useRef } from 'react';
+import "./style.scss";
+export var ScrollView = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    _onScroll = _ref.onScroll,
+    _ref$showScrollbar = _ref.showScrollbar,
+    showScrollbar = _ref$showScrollbar === void 0 ? true : _ref$showScrollbar,
+    scrollX = _ref.scrollX,
+    scrollY = _ref.scrollY,
+    scrollTop = _ref.scrollTop,
+    _ref$upperThreshold = _ref.upperThreshold,
+    upperThreshold = _ref$upperThreshold === void 0 ? 50 : _ref$upperThreshold,
+    _ref$lowerThreshold = _ref.lowerThreshold,
+    lowerThreshold = _ref$lowerThreshold === void 0 ? 50 : _ref$lowerThreshold,
+    onScrollToUpper = _ref.onScrollToUpper,
+    onScrollToLower = _ref.onScrollToLower;
+  var scrollRef = useRef();
+  var handleRef = function handleRef(node) {
+    scrollRef.current = node;
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+  useEffect(function () {
+    if (scrollTop !== undefined) {}
+  }, [scrollTop]);
+  var trionesScrollViewCls = 'triones-antm-scroll-view';
+  return /*#__PURE__*/React.createElement("div", {
+    ref: handleRef,
+    className: classNames("".concat(trionesScrollViewCls), className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(trionesScrollViewCls, "-scroll-x"), scrollX), "".concat(trionesScrollViewCls, "-scroll-y"), scrollY), "".concat(trionesScrollViewCls, "-scroll-bar-hidden"), !showScrollbar)),
+    style: style,
+    onScroll: function onScroll(e) {
+      // console.log(e);
+      _onScroll === null || _onScroll === void 0 || _onScroll({
+        detail: {
+          scrollLeft: e.target.scrollLeft,
+          scrollTop: e.target.scrollTop,
+          scrollHeight: e.target.scrollHeight,
+          scrollWidth: e.target.scrollWidth
+        }
+      });
+    }
+  }, children);
+});

package/dist/ScrollView/style.scss

@@ -0,0 +1,19 @@
+$trionesScrollViewCls: 'triones-antm-scroll-view';
+
+.#{$trionesScrollViewCls} {
+  scrollbar-width: thin;
+
+  &-scroll-x {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  &-scroll-y {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &-scroll-bar-hidden {
+    scrollbar-width: none;
+  }
+}