@bifrostui/react 1.0.5 → 1.1.5

package/dist/CitySelector/CitySelectorCore.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@bifrostui/utils");
+var _ScrollView = require("../ScrollView");
+var _Selector = _interopRequireDefault(require("./Selector"));
+require("./CitySelector.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+// 误差偏移量
+const DEVIATION_HEIGHT = '6vmin';
+const GPS_TYPE = {
+  title: '定位',
+  code: 'GPS'
+};
+const CURRENT_TYPE = {
+  title: '当前',
+  code: 'CRRT'
+};
+const HOT_CITY_TYPE = {
+  title: '热门',
+  code: 'HOT'
+};
+const prefixCls = 'bui-city-selector';
+const CitySelector = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    className,
+    title: pageTitle,
+    selectedCity,
+    selectedCityGroupName = '当前城市',
+    currentCity,
+    currentCityGroupName = '定位城市',
+    hotCities,
+    hotCitiesGroupName = '热门城市',
+    cities,
+    disableIndex,
+    touchHandler,
+    height,
+    onSelect,
+    onClose,
+    ...others
+  } = props;
+  const cityRef = (0, _react.useRef)(null);
+  const nodeRef = (0, _utils.useForkRef)(ref, cityRef);
+  (0, _utils.useTouchEmulator)(cityRef.current);
+  const [codeGroup, setCodeGroup] = (0, _react.useState)([]);
+  const [codeShow, setCodeShow] = (0, _react.useState)(false);
+  const [targetId, setTargetId] = (0, _react.useState)('');
+
+  // 提取字母
+  (0, _react.useEffect)(() => {
+    if (!cities || cities?.length === 0 || codeGroup.length !== 0 || disableIndex) return;
+    const newGroup = [];
+    if (selectedCity) {
+      newGroup.push(CURRENT_TYPE);
+    }
+    if (currentCity) {
+      newGroup.push(GPS_TYPE);
+    }
+    if (hotCities) {
+      newGroup.push(HOT_CITY_TYPE);
+    }
+    cities.forEach(item => {
+      newGroup.push(item.groupName.toUpperCase());
+    });
+    setCodeGroup(newGroup);
+  }, [cities, selectedCity, currentCity, hotCities]);
+
+  // 计算每个code的top
+  (0, _react.useEffect)(() => {
+    if (codeGroup.length === 0) return;
+    setCodeShow(true);
+  }, [codeGroup]);
+  const selectHandler = (e, city) => {
+    onSelect(e, {
+      city
+    });
+  };
+  const scrollToCode = targetCode => {
+    if (!targetCode) return;
+    setTargetId(oldCode => {
+      if (targetCode !== oldCode) return targetCode;
+      return oldCode;
+    });
+  };
+  const touchCbk = e => {
+    e.stopPropagation();
+    touchHandler?.(e, scrollToCode, codeGroup);
+  };
+  const codeClickHandler = rightCode => {
+    setTargetId(rightCode);
+  };
+  const scrollHandler = (0, _utils.throttle)(() => {
+    if (targetId) {
+      setTargetId(undefined);
+    }
+  }, 500);
+  const closeHandler = e => {
+    onClose?.(e);
+  };
+  const renderTitile = (title, titleCode) => {
+    const parseTitle = (titleCode || title).toUpperCase();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "select-city-title",
+      id: disableIndex ? '' : parseTitle
+    }, title.toUpperCase());
+  };
+  const renderCity = (citys, title, titleCode) => {
+    return /*#__PURE__*/_react.default.createElement("div", null, renderTitile(title, titleCode), /*#__PURE__*/_react.default.createElement("div", {
+      className: "select-city-buttons"
+    }, citys.map((city, index) => {
+      return /*#__PURE__*/_react.default.createElement(_Selector.default, {
+        key: index,
+        city: city,
+        onSelect: selectHandler
+      });
+    })));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _clsx.default)(prefixCls, className),
+    ref: nodeRef
+  }, others), pageTitle ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-title`
+  }, pageTitle, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-btn-close`,
+    onClick: closeHandler
+  }, "\u2715")) : null, /*#__PURE__*/_react.default.createElement(_ScrollView.ScrollView, {
+    scrollIntoView: targetId,
+    scrollY: true,
+    className: (0, _clsx.default)(`${prefixCls}-scroll-view-container tph`, {
+      'container-has-title': pageTitle
+    }),
+    onScroll: scrollHandler
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-all-city`
+  }, selectedCity ? renderCity([selectedCity], selectedCityGroupName, CURRENT_TYPE.code) : null, currentCity ? renderCity([currentCity], currentCityGroupName, GPS_TYPE.code) : null, hotCities?.length > 0 ? renderCity(hotCities, hotCitiesGroupName, HOT_CITY_TYPE.code) : null, cities?.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-list-container`
+  }, cities.map((item, cityGroupIndex) => {
+    if (!item?.groupName) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: cityGroupIndex
+    }, renderTitile(item.groupName, item.groupName), /*#__PURE__*/_react.default.createElement("ul", {
+      className: `${prefixCls}-list`
+    }, item.cities.map((city, cityIndex) => {
+      return /*#__PURE__*/_react.default.createElement("li", {
+        className: `${prefixCls}-list-item`,
+        key: cityIndex,
+        onClick: e => {
+          selectHandler(e, city);
+        }
+      }, city.name);
+    })));
+  })) : null)), codeGroup?.length > 0 && height ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(`${prefixCls}-index-container`, {
+      'left-in': codeShow,
+      'city-index-has-title': pageTitle
+    })
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    onTouchMove: touchCbk,
+    className: `${prefixCls}-index-list`
+  }, codeGroup.map((item, chartIndex) => {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: `${prefixCls}-index-item`,
+      key: chartIndex,
+      "data-code": item.code || item,
+      onClick: () => {
+        codeClickHandler(item.code || item);
+      },
+      style: {
+        maxHeight: `calc((${height} - ${DEVIATION_HEIGHT}) / ${codeGroup.length})`
+      }
+    }, item.title || item);
+  }))) : null);
+});
+CitySelector.displayName = 'BuiCitySelector';
+var _default = exports.default = CitySelector;

package/dist/CitySelector/Selector/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { cityType } from '../CitySelector.types';
+import './index.less';
+type propsType = {
+    city: cityType;
+    onSelect: (e: React.SyntheticEvent, city: cityType) => void;
+};
+declare const Selector: (props: propsType) => React.JSX.Element;
+export default Selector;

package/dist/CitySelector/Selector/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./index.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Selector = props => {
+  const {
+    city,
+    onSelect
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "bui-city-selector-item",
+    onClick: e => {
+      onSelect?.(e, city);
+    }
+  }, city.name);
+};
+var _default = exports.default = Selector;

package/dist/CitySelector/Selector/index.less

@@ -0,0 +1,13 @@
+@import '~@bifrostui/styles/mixins/index.less';
+
+.bui-city-selector-item {
+  width: 111px;
+  height: 36px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  margin: 4.5px 0 4.5px 9px;
+  background-color: var(--bui-color-bg-default);
+  font-size: var(--bui-text-size-2);
+}

package/dist/CitySelector/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CitySelector, default } from './CitySelector';
+export * from './CitySelector.types';

package/dist/CitySelector/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  CitySelector: true
+};
+Object.defineProperty(exports, "CitySelector", {
+  enumerable: true,
+  get: function () {
+    return _CitySelector.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CitySelector.default;
+  }
+});
+var _CitySelector = _interopRequireDefault(require("./CitySelector"));
+var _CitySelector2 = require("./CitySelector.types");
+Object.keys(_CitySelector2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CitySelector2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CitySelector2[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/CitySelector/miniapp.less

@@ -0,0 +1,4 @@
+.bui-city-scroll-view-container {
+  height: 100%;
+  display: block;
+}

package/dist/Countdown/Countdown.less

@@ -0,0 +1,39 @@
+@import '~@bifrostui/styles/mixins/index.less';
+
+.bui-countdown {
+  --font-size: var(--bui-countdown-font-size, var(--bui-text-size-1));
+  --color: var(--bui-countdown-color, var(--bui-color-fg-default));
+  --font-weight: var(
+    --bui-countdown-font-weight,
+    var(--bui-font-weight-normal)
+  );
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: var(--font-size);
+  color: var(--color);
+  font-weight: var(--font-weight);
+  font-family: var(--bui-font-family);
+
+  &-slice {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &-item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &-value {
+      font-family: 'Helvetica Neue', helvetica, 'PingFang SC', 'Chinese Quote',
+        'Segoe UI', roboto, 'Hiragino Sans GB', 'Microsoft YaHei', arial,
+        sans-serif;
+    }
+
+    &-unit {
+      margin: 0 2px;
+    }
+  }
+}

package/dist/Divider/Divider.less

@@ -0,0 +1,50 @@
+.bui-divider {
+  --height: var(--bui-divider-height, 100%);
+  --width: var(--bui-divider-width, 100%);
+
+  border-color: var(--bui-color-border-default);
+  font-family: var(--bui-font-family);
+
+  &-vertical {
+    height: var(--height);
+    display: inline-block;
+    border-right-width: 1px;
+    border-right-style: solid;
+  }
+
+  &-horizontal {
+    width: var(--width);
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+  }
+
+  &-vertical-dashed {
+    border-right-style: dashed;
+  }
+
+  &-horizontal-dashed {
+    border-bottom-style: dashed;
+  }
+
+  &-content {
+    width: 100%;
+    // border-width 设置border粗细
+    border-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-line {
+    width: 40px;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: var(--bui-color-border-default);
+  }
+
+  &-text {
+    flex-shrink: 0;
+    color: var(--bui-color-fg-subtle);
+    font-size: var(--bui-text-size-2);
+  }
+}

package/dist/Drawer/Drawer.less

@@ -0,0 +1,40 @@
+.bui-drawer {
+  font-family: var(--bui-font-family);
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex: 1 0 auto;
+    position: fixed;
+    top: 0;
+    outline: 0;
+    background-color: var(--bui-color-bg-view);
+
+    &-left {
+      left: 0;
+    }
+
+    &-top {
+      top: 0;
+      left: 0;
+      right: 0;
+      height: auto;
+      max-height: 100%;
+    }
+
+    &-right {
+      right: 0;
+    }
+
+    &-bottom {
+      bottom: 0;
+      top: auto;
+      left: 0;
+      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+      right: 0;
+      height: auto;
+      max-height: 100%;
+    }
+  }
+}

package/dist/IconButton/IconButton.less

@@ -0,0 +1,167 @@
+@import '~@bifrostui/styles/mixins/index.less';
+
+.btn-icon-default(@color) {
+  color: var(~'--bui-color-@{color}');
+}
+.btn-icon-outline(@color) {
+  color: var(~'--bui-color-@{color}');
+  border-color: var(~'--bui-color-@{color}');
+}
+
+.btn-icon-contained(@color) {
+  color: var(--bui-color-white);
+  .linear-gradient(var(~'--bui-color-@{color}-start'), var(~'--bui-color-@{color}-end'));
+}
+
+.bui-icon-btn {
+  --bg-color: var(--bui-color-neutral-5);
+  --color: var(--bui-color-fg-muted);
+  --icon-size: 17px;
+  --user-area: 5px;
+  position: relative;
+  display: inline-flex;
+  height: auto;
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--color);
+  cursor: pointer;
+  font-family: var(--bui-font-family);
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background-color: var(--bui-color-black);
+    border: inherit;
+    border-color: var(--bui-color-black);
+    border-radius: inherit;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+  }
+
+  &:active::before {
+    opacity: 0.04;
+  }
+
+  &::after {
+    border: 0;
+  }
+  font-size: var(--icon-size);
+  padding: var(--user-area);
+
+  &-small {
+    font-size: var(--bui-text-size-4);
+    padding: var(--bui-spacing-xs);
+
+    &.bui-icon-btn-outlined,
+    &.bui-icon-btn-contained {
+      padding: var(--bui-spacing-xs);
+    }
+  }
+
+  &-medium {
+    &.bui-icon-btn-outlined,
+    &.bui-icon-btn-contained {
+      padding: 5px;
+    }
+  }
+
+  &-large {
+    font-size: 23px;
+    padding: var(--bui-spacing-sm);
+
+    &.bui-icon-btn-outlined,
+    &.bui-icon-btn-contained {
+      padding: var(--bui-spacing-sm);
+    }
+  }
+
+  &-disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &-circular {
+    border-radius: 100%;
+  }
+
+  &-rounded {
+    border-radius: var(--bui-shape-radius-default);
+  }
+
+  &-square {
+    border-radius: 0;
+  }
+
+  &-default {
+    &.bui-icon-btn-primary {
+      .btn-icon-default(primary);
+    }
+
+    &.bui-icon-btn-success {
+      .btn-icon-default(success);
+    }
+
+    &.bui-icon-btn-info {
+      .btn-icon-default(info);
+    }
+
+    &.bui-icon-btn-warning {
+      .btn-icon-default(warning);
+    }
+  }
+
+  &-outlined {
+    border: solid 1px;
+
+    &.bui-icon-btn-primary {
+      .btn-icon-outline(primary);
+    }
+
+    &.bui-icon-btn-success {
+      .btn-icon-outline(success);
+    }
+
+    &.bui-icon-btn-info {
+      .btn-icon-outline(info);
+    }
+
+    &.bui-icon-btn-warning {
+      .btn-icon-outline(warning);
+    }
+
+    &.bui-icon-btn-danger {
+      .btn-icon-outline(danger);
+    }
+  }
+
+  &-contained {
+    background-color: var(--bg-color);
+
+    &.bui-icon-btn-primary {
+      .btn-icon-contained(primary);
+    }
+
+    &.bui-icon-btn-success {
+      .btn-icon-contained(success);
+    }
+
+    &.bui-icon-btn-info {
+      .btn-icon-contained(info);
+    }
+
+    &.bui-icon-btn-warning {
+      .btn-icon-contained(warning);
+    }
+
+    &.bui-icon-btn-danger {
+      .btn-icon-contained(danger);
+    }
+  }
+}

package/dist/Image/index.less

@@ -0,0 +1,40 @@
+.bui-image {
+  width: auto;
+  height: auto;
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  font-family: var(--bui-font-family);
+
+  .bui-image-img {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: block;
+    opacity: 0;
+
+    &.bui-image-loaded {
+      opacity: 1;
+    }
+  }
+
+  &-default-icon-wrap {
+    top: 0;
+    left: 0;
+    z-index: 1;
+    opacity: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    &.bui-image-loaded {
+      opacity: 0;
+    }
+  }
+
+  &-default-icon-item {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(127, 127, 127, 0.2);
+  }
+}

package/dist/Input/Input.less

@@ -0,0 +1,72 @@
+@import '~@bifrostui/styles/mixins/index.less';
+
+.bui-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 4px 10px;
+  box-sizing: border-box;
+  border-radius: var(--bui-shape-radius-default);
+  border: 1px solid var(--bui-color-border-default);
+  font-family: var(--bui-font-family);
+
+  &-icon {
+    display: flex;
+    align-items: center;
+    color: var(--bui-color-fg-subtle);
+    font-size: var(--bui-title-size-3);
+
+    &-start {
+      margin-right: 3px;
+    }
+
+    &-end {
+      margin-left: 3px;
+    }
+  }
+
+  &-input {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    height: 100%;
+    color: var(--bui-color-fg-default);
+    border: none;
+    outline: none;
+    background-color: transparent;
+    font-size: var(--bui-text-size-2);
+
+    &::placeholder {
+      color: var(--bui-color-fg-subtle);
+    }
+  }
+
+  &-disabled {
+    pointer-events: none;
+    background-color: rgba(0, 0, 0, 0.04);
+
+    .bui-input-input {
+      color: var(--bui-color-fg-disabled);
+
+      &::placeholder {
+        color: var(--bui-color-fg-disabled);
+      }
+    }
+  }
+
+  &-clear {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--bui-color-fg-disabled);
+    height: 100%;
+    font-size: var(--bui-title-size-3);
+  }
+
+  .bui-mini-placeholder {
+    // 处理小程序placeholder较长被截断问题
+    width: auto;
+  }
+}

package/dist/List/{List.css → List.less}

@@ -4,6 +4,7 @@
   font-family: var(--bui-font-family);
   list-style: none;
 }
+
 .bui-list .bui-divider:last-of-type {
   display: none;
 }