@nickeylin/antd-mobile-pro 2.0.0

package/dist/es/components/pro-list/pro-list.less

@@ -0,0 +1,80 @@
+@import '../styles/variable.less';
+
+@class-prefix-picker: ~'suid-pro-list';
+
+.@{class-prefix-picker} {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  height: calc(100vh - var(--extra-height));
+  &__header {
+    border-bottom: 1px solid var(--adm-color-border);
+    overflow: hidden;
+    background-color: var(--header-background-color);
+
+    &-title {
+      color: var(--title-color);
+      font-size: var(--title-font-size);
+      padding: var(--title-padding);
+    }
+
+    &-search {
+      padding: var(--search-padding);
+    }
+
+    &-title + &-search {
+      padding-top: 0;
+    }
+  }
+
+  &__body {
+    flex: 1;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  &__footer {
+    height: 50px;
+    border-top: 1px solid var(--adm-color-border);
+    background-color: var(--footer-background-color);
+  }
+  &__loading {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(255, 255, 255, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 40px;
+
+    @{dark-selector} & {
+      background-color: rgba(0, 0, 0, 0.35);
+    }
+  }
+
+  &--has-header {
+    .adm-list {
+      --border-top: none;
+    }
+  }
+  &--has-footer {
+    .adm-list {
+      --border-bottom: none;
+    }
+  }
+}
+
+.@{class-prefix-picker} {
+  --header-background-color: var(--adm-color-background);
+
+  --title-color: var(--adm-color-weak);
+  --title-font-size: var(--adm-font-size-7);
+  --title-padding: 8px 12px;
+  --search-padding: 8px 12px;
+
+  --extra-height: 0px;
+  --footer-background-color: var(--adm-color-background);
+}

package/dist/es/components/pro-list/selected-rows-summary.d.ts

@@ -0,0 +1,14 @@
+import { ListItemProps } from 'antd-mobile';
+import { Key } from 'react';
+interface SelectedRowsSummaryProps<T extends {
+    _key: Key;
+}> {
+    selectedRows?: T[];
+    renderItem?: (item: T, index: number, selected: boolean) => ListItemProps;
+    onDelete?(item: T): void;
+    onClear?(): Promise<boolean>;
+}
+declare function SelectedRowsSummary<T extends {
+    _key: Key;
+}>({ selectedRows, renderItem, onDelete, onClear, }: SelectedRowsSummaryProps<T>): JSX.Element;
+export default SelectedRowsSummary;

package/dist/es/components/pro-list/selected-rows-summary.js

@@ -0,0 +1,142 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["extra"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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; }
+import { ClearOutlined } from '@ant-design/icons';
+import { Button, Dialog, List, Space } from 'antd-mobile';
+import { DeleteOutline } from 'antd-mobile-icons';
+import { replaceMessage } from 'antd-mobile/es/utils/replace-message';
+import { useState } from 'react';
+import { useConfig } from "../config-provider";
+import PopupPage from "../popup-page";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function SelectedRowsSummary(_ref) {
+  var _selectedRows$length;
+  var selectedRows = _ref.selectedRows,
+    renderItem = _ref.renderItem,
+    onDelete = _ref.onDelete,
+    onClear = _ref.onClear;
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    popupVisible = _useState2[0],
+    setPopupVisible = _useState2[1];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(List, {
+      style: {
+        '--border-bottom': 'none',
+        '--font-size': 'var(--adm-font-size-main)'
+      },
+      children: /*#__PURE__*/_jsx(List.Item, _objectSpread(_objectSpread({}, selectedRows && selectedRows.length > 0 ? {
+        onClick: function onClick() {
+          setPopupVisible(true);
+        }
+      } : {}), {}, {
+        children: /*#__PURE__*/_jsx("div", {
+          style: {
+            textAlign: 'right'
+          },
+          children: replaceMessage(locale.ProList.totalSelectedCount, {
+            count: "".concat((_selectedRows$length = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) !== null && _selectedRows$length !== void 0 ? _selectedRows$length : 0)
+          })
+        })
+      }))
+    }), /*#__PURE__*/_jsx(PopupPage, {
+      title: locale.ProList.selectedPopupTitle,
+      onClose: function onClose() {
+        setPopupVisible(false);
+      },
+      visible: popupVisible,
+      navbar: {
+        right: /*#__PURE__*/_jsx(ClearOutlined, {
+          onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+            var _yield$onClear;
+            var confirm, flag;
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return Dialog.confirm({
+                    title: locale.common.warmTips,
+                    content: locale.ProList.clearAllTipsMessage
+                  });
+                case 2:
+                  confirm = _context.sent;
+                  if (confirm) {
+                    _context.next = 5;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 5:
+                  _context.next = 7;
+                  return onClear === null || onClear === void 0 ? void 0 : onClear();
+                case 7:
+                  _context.t1 = _yield$onClear = _context.sent;
+                  _context.t0 = _context.t1 !== null;
+                  if (!_context.t0) {
+                    _context.next = 11;
+                    break;
+                  }
+                  _context.t0 = _yield$onClear !== void 0;
+                case 11:
+                  if (!_context.t0) {
+                    _context.next = 15;
+                    break;
+                  }
+                  _context.t2 = _yield$onClear;
+                  _context.next = 16;
+                  break;
+                case 15:
+                  _context.t2 = true;
+                case 16:
+                  flag = _context.t2;
+                  if (flag) {
+                    _context.next = 19;
+                    break;
+                  }
+                  return _context.abrupt("return");
+                case 19:
+                  setPopupVisible(false);
+                case 20:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }))
+        })
+      },
+      children: /*#__PURE__*/_jsx(List, {
+        children: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (s, index) {
+          var _ref3 = renderItem ? renderItem(s, index, true) : {
+              children: s._key
+            },
+            extra = _ref3.extra,
+            props = _objectWithoutProperties(_ref3, _excluded);
+          return /*#__PURE__*/_jsx(List.Item, _objectSpread(_objectSpread({}, props), {}, {
+            arrow: false,
+            arrowIcon: false,
+            extra: /*#__PURE__*/_jsxs(Space, {
+              children: [extra, /*#__PURE__*/_jsx(Button, {
+                size: "mini",
+                color: "danger",
+                fill: "none",
+                onClick: function onClick() {
+                  onDelete === null || onDelete === void 0 || onDelete(s);
+                },
+                children: /*#__PURE__*/_jsx(DeleteOutline, {})
+              })]
+            })
+          }), s._key);
+        })
+      })
+    })]
+  });
+}
+export default SelectedRowsSummary;

package/dist/es/components/pro-list-picker/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './list-picker.less';
+import { prompt } from './prompt';
+export type { ForwardedProListPicker, ListPickerActions, ListPickerRef, ProListPickerProps, } from './list-picker';
+declare const _ProListPicker: (<T = any, V = T>(props: import("./list-picker").ProListPickerProps<T, V, object> & import("react").RefAttributes<import("..").PopupPickerActions>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & {
+    prompt: typeof prompt;
+};
+export default _ProListPicker;

package/dist/es/components/pro-list-picker/index.js

@@ -0,0 +1,7 @@
+import { ProListPicker } from "./list-picker";
+import "./list-picker.less";
+import { prompt } from "./prompt";
+var _ProListPicker = Object.assign(ProListPicker, {
+  prompt: prompt
+});
+export default _ProListPicker;

package/dist/es/components/pro-list-picker/list-picker-utils.d.ts

@@ -0,0 +1 @@
+export declare const defaultRenderLabel: (item: any) => any;

package/dist/es/components/pro-list-picker/list-picker-utils.js

@@ -0,0 +1,3 @@
+export var defaultRenderLabel = function defaultRenderLabel(item) {
+  return item.name;
+};

package/dist/es/components/pro-list-picker/list-picker.d.ts

@@ -0,0 +1,30 @@
+import React, { Key } from 'react';
+import { PopupPickerActions, PopupPickerMixinProps } from '../popup-picker-base';
+import { ProListProps, ProListRowSelection } from '../pro-list';
+import { NativeProps } from 'antd-mobile/es/utils/native-props';
+export type ListPickerActions = PopupPickerActions;
+export type ListPickerRef = ListPickerActions;
+export type ProListPickerValue<V> = V | V[] | null;
+type KeyedValue<V> = V extends object ? V & {
+    key: Key;
+} : V;
+type SinglePickerValue<V> = {
+    multi?: false;
+    onConfirm?(value: V | null): void;
+} & Omit<PopupPickerMixinProps<V | null>, 'onConfirm'>;
+type MultiPickerValue<V> = {
+    multi: true;
+    onConfirm?(value: V[] | null): void;
+} & Omit<PopupPickerMixinProps<V[] | null>, 'onConfirm'>;
+export type ProListPickerProps<ListRecord = any, Value = ListRecord, Param = object> = (SinglePickerValue<Value> | MultiPickerValue<Value>) & {
+    transform?(row: ListRecord): KeyedValue<Value>;
+} & Pick<ProListProps<ListRecord, Param>, 'renderItem' | 'request' | 'params' | 'pagination' | 'filterSearch'> & // list props
+Pick<Required<ProListProps<ListRecord, Param>>, 'rowKey'> & {
+    proListProps?: Omit<Partial<ProListProps<ListRecord, Param>>, 'rowSelection'>;
+} & Pick<ProListRowSelection<ListRecord>, 'onBeforeSelect'> & NativeProps<'--picker-body-height'>;
+export interface ForwardedProListPicker {
+    <T = any, V = T>(props: ProListPickerProps<T, V> & React.RefAttributes<ListPickerRef>): React.ReactElement | null;
+    displayName?: string;
+}
+export declare const ProListPicker: <T = any, V = T>(props: ProListPickerProps<T, V, object> & React.RefAttributes<PopupPickerActions>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export {};

package/dist/es/components/pro-list-picker/list-picker.js

@@ -0,0 +1,126 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["className"];
+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; }
+import { CloseOutline } from 'antd-mobile-icons';
+import classNames from 'classnames';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from "../../utils/bem";
+import forwardRefWithGenerics from "../../utils/forward-ref-with-generics";
+import { useConfig } from "../config-provider";
+import PopupPickerBase, { usePopupPickerMixin } from "../popup-picker-base";
+import ProList from "../pro-list";
+import { getRowKey } from "../pro-list/helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var bem = cn('pro-list-picker');
+function ProListPickerRaw(props, ref) {
+  var _proListProps$errorPr, _proListProps$emptyPr;
+  var _props$rowKey = props.rowKey,
+    rowKey = _props$rowKey === void 0 ? 'key' : _props$rowKey,
+    multi = props.multi,
+    onBeforeSelect = props.onBeforeSelect,
+    _props$proListProps = props.proListProps,
+    proListProps = _props$proListProps === void 0 ? {} : _props$proListProps,
+    confirm = props.confirm;
+  var needConfirm = useMemo(function () {
+    return multi || !multi && !!confirm;
+  }, [multi, confirm]);
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
+  var _usePopupPickerMixin = usePopupPickerMixin(_objectSpread(_objectSpread({
+      title: locale.common.selectPlaceholder
+    }, props), {}, {
+      confirm: multi ? confirm === false ? undefined : confirm : !!confirm
+      // confirm: mergedConfirm,
+    }), ref),
+    _usePopupPickerMixin2 = _slicedToArray(_usePopupPickerMixin, 3),
+    _usePopupPickerMixin3 = _usePopupPickerMixin2[0],
+    popupClassName = _usePopupPickerMixin3.className,
+    popupProps = _objectWithoutProperties(_usePopupPickerMixin3, _excluded),
+    _usePopupPickerMixin4 = _usePopupPickerMixin2[1],
+    setVisible = _usePopupPickerMixin4.setVisible,
+    value = _usePopupPickerMixin4.value,
+    setValue = _usePopupPickerMixin4.setValue,
+    setInnerValue = _usePopupPickerMixin4.setInnerValue,
+    children = _usePopupPickerMixin2[2];
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRowKeys = _useState2[0],
+    setSelectedRowKeys = _useState2[1];
+  var refs = useRef({
+    value: value,
+    rowKey: rowKey
+  });
+  refs.current = {
+    value: value,
+    rowKey: rowKey
+  };
+  useEffect(function () {
+    if (popupProps.visible) {
+      var _refs$current = refs.current,
+        v = _refs$current.value,
+        rk = _refs$current.rowKey;
+      if (!v) setSelectedRowKeys([]);else setSelectedRowKeys((Array.isArray(v) ? v : [v]).map(function (vv) {
+        return getRowKey(rk, vv);
+      }));
+    }
+  }, [popupProps.visible]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PopupPickerBase, _objectSpread(_objectSpread({
+      className: classNames(bem(), popupClassName),
+      cancel: {
+        color: 'default',
+        children: /*#__PURE__*/_jsx(CloseOutline, {})
+      }
+    }, popupProps), {}, {
+      children: /*#__PURE__*/_jsx(ProList, _objectSpread(_objectSpread({
+        request: props.request,
+        params: props.params,
+        rowKey: rowKey,
+        renderItem: props.renderItem,
+        pagination: props.pagination,
+        filterSearch: props.filterSearch
+      }, proListProps), {}, {
+        errorProps: _objectSpread(_objectSpread({
+          fullPage: false
+        }, proListProps.errorProps), {}, {
+          style: _objectSpread({
+            paddingTop: '10vh'
+          }, (_proListProps$errorPr = proListProps.errorProps) === null || _proListProps$errorPr === void 0 ? void 0 : _proListProps$errorPr.style)
+        }),
+        emptyProps: _objectSpread(_objectSpread({
+          fullPage: false
+        }, proListProps.emptyProps), {}, {
+          style: _objectSpread({
+            paddingTop: '10vh'
+          }, (_proListProps$emptyPr = proListProps.emptyProps) === null || _proListProps$emptyPr === void 0 ? void 0 : _proListProps$emptyPr.style)
+        }),
+        className: classNames(proListProps.className),
+        rowSelection: {
+          type: multi ? 'multi' : 'single',
+          selectedRowKeys: selectedRowKeys,
+          onChange: function onChange(selectedRowKeys, selectedRows) {
+            setSelectedRowKeys(selectedRowKeys);
+            console.log(selectedRows);
+            var nextValuesList = selectedRows.map(function (r) {
+              return props.transform ? props.transform(r) : r;
+            });
+            var nextValue = multi ? nextValuesList : nextValuesList[0];
+            if (needConfirm) {
+              setInnerValue(nextValue);
+            } else {
+              setValue(nextValue);
+              setVisible(false);
+            }
+          },
+          onBeforeSelect: onBeforeSelect
+        }
+      }))
+    })), children]
+  });
+}
+export var ProListPicker = forwardRefWithGenerics(ProListPickerRaw);

package/dist/es/components/pro-list-picker/list-picker.less

@@ -0,0 +1,27 @@
+@class-prefix-picker: ~'suid-pro-list-picker';
+
+.@{class-prefix-picker} {
+  --header-button-font-size: var(--adm-font-size-7);
+  --title-font-size: var(--adm-font-size-7);
+  --picker-body-height: 70vh;
+
+  .suid-pro-list {
+    width: 100%;
+    height: var(--picker-body-height);
+    overflow: hidden;
+    position: relative;
+    .adm-list-body {
+      a:hover,
+      a:active {
+        color: inherit;
+      }
+    }
+  }
+}
+
+.@{class-prefix-picker}__popup {
+  .adm-popup-body {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+}

package/dist/es/components/pro-list-picker/prompt.d.ts

@@ -0,0 +1,3 @@
+import type { ProListPickerProps } from './index';
+import { ProListPickerValue } from './list-picker';
+export declare function prompt<ListRecord, Value = ListRecord>(props: Omit<ProListPickerProps<ListRecord, Value>, 'value' | 'visible' | 'children'>): Promise<ProListPickerValue<Value>>;

package/dist/es/components/pro-list-picker/prompt.js

@@ -0,0 +1,5 @@
+import { createPopupPickerPrompt } from "../popup-picker-base";
+import { ProListPicker } from "./list-picker";
+export function prompt(props) {
+  return createPopupPickerPrompt(ProListPicker)(props);
+}

package/dist/es/components/qr-code/index.d.ts

@@ -0,0 +1,3 @@
+import QRCode from './qr-code';
+export default QRCode;
+export type { QrCodeProps } from './qr-code';

package/dist/es/components/qr-code/index.js

@@ -0,0 +1,2 @@
+import QRCode from "./qr-code";
+export default QRCode;

package/dist/es/components/qr-code/qr-code.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+type QRCodeRenderType = 'canvas' | 'svg';
+type QRCodeRenderLevel = 'L' | 'M' | 'Q' | 'H';
+type QRCodeImageSettings = {
+    src: string;
+    x?: number;
+    y?: number;
+    height: number;
+    width: number;
+    excavate: boolean;
+};
+interface QrCodeBaseProps {
+    value: string;
+    size?: number;
+    renderAs?: QRCodeRenderType;
+    style?: React.CSSProperties;
+    className?: string;
+    level?: QRCodeRenderLevel;
+    fgColor?: string;
+    bgColor?: string;
+    includeMargin?: boolean;
+    imageSettings?: QRCodeImageSettings;
+}
+type QRCanvasProps = QrCodeBaseProps & React.CanvasHTMLAttributes<HTMLCanvasElement>;
+type QRSVGProps = QrCodeBaseProps & React.SVGProps<SVGSVGElement>;
+export type QrCodeProps = (QRSVGProps & {
+    renderAs: 'svg';
+}) | (QRCanvasProps & {
+    renderAs?: 'canvas';
+});
+declare function QRCode({ size, level, fgColor, bgColor, className, ...restProps }: QrCodeProps): JSX.Element;
+export default QRCode;

package/dist/es/components/qr-code/qr-code.js

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["size", "level", "fgColor", "bgColor", "className"];
+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; }
+import classNames from 'classnames';
+import QRCodeReact from 'qrcode.react';
+import React from 'react';
+import { cn } from "../../utils/bem";
+import { jsx as _jsx } from "react/jsx-runtime";
+function QRCode(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 128 : _ref$size,
+    _ref$level = _ref.level,
+    level = _ref$level === void 0 ? 'H' : _ref$level,
+    _ref$fgColor = _ref.fgColor,
+    fgColor = _ref$fgColor === void 0 ? '#000000' : _ref$fgColor,
+    _ref$bgColor = _ref.bgColor,
+    bgColor = _ref$bgColor === void 0 ? '#ffffff' : _ref$bgColor,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(QRCodeReact, _objectSpread({
+    className: classNames(cn('qrcode')(), className),
+    size: size,
+    level: level,
+    fgColor: fgColor,
+    bgColor: bgColor
+  }, restProps));
+}
+export default QRCode;

package/dist/es/components/segment-control/index.d.ts

@@ -0,0 +1,4 @@
+import SegmentControl from './segment';
+import './style.less';
+export default SegmentControl;
+export type { SegmentedLabeledOption, SegmentedOptions, SegmentedProps, SegmentedValue, } from './segment';

package/dist/es/components/segment-control/index.js

@@ -0,0 +1,3 @@
+import SegmentControl from "./segment";
+import "./style.less";
+export default SegmentControl;

package/dist/es/components/segment-control/segment.d.ts

@@ -0,0 +1,25 @@
+import type { SegmentedLabeledOption as RcSegmentedLabeledOption, SegmentedProps as RCSegmentedProps, SegmentedValue as RcSegmentedValue, SegmentedRawOption } from 'rc-segmented';
+import * as React from 'react';
+export type { SegmentedValue } from 'rc-segmented';
+interface SegmentedLabeledOptionWithoutIcon<ValueType = RcSegmentedValue> extends RcSegmentedLabeledOption<ValueType> {
+    label: RcSegmentedLabeledOption['label'];
+}
+interface SegmentedLabeledOptionWithIcon<ValueType = RcSegmentedValue> extends Omit<RcSegmentedLabeledOption<ValueType>, 'label'> {
+    label?: RcSegmentedLabeledOption['label'];
+    /** Set icon for Segmented item */
+    icon: React.ReactNode;
+}
+export type SegmentedLabeledOption<ValueType = RcSegmentedValue> = SegmentedLabeledOptionWithIcon<ValueType> | SegmentedLabeledOptionWithoutIcon<ValueType>;
+export type SegmentedOptions<T = SegmentedRawOption> = (T | SegmentedLabeledOption<T>)[];
+export interface SegmentedProps<ValueType = RcSegmentedValue> extends Omit<RCSegmentedProps<ValueType>, 'size' | 'options'> {
+    rootClassName?: string;
+    options: SegmentedOptions<ValueType>;
+    /** Option to fit width to its parent's width */
+    block?: boolean;
+    /** Option to control the display size */
+    size?: 'small' | 'middle' | 'large' | 'mini';
+    vertical?: boolean;
+}
+declare const InternalSegmented: React.ForwardRefExoticComponent<Omit<SegmentedProps<RcSegmentedValue>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SegmentControl: (<ValueType>(props: SegmentedProps<ValueType> & React.RefAttributes<HTMLDivElement>) => ReturnType<typeof InternalSegmented>) & Pick<React.FC<{}>, "displayName">;
+export default SegmentControl;

package/dist/es/components/segment-control/segment.js

@@ -0,0 +1,87 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+var _excluded = ["prefixCls", "className", "rootClassName", "block", "options", "size", "style", "vertical", "name", "direction"],
+  _excluded2 = ["icon", "label"];
+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; }
+import classNames from 'classnames';
+import RcSegmented from 'rc-segmented';
+import useId from 'rc-util/lib/hooks/useId';
+import * as React from 'react';
+import { cn } from "../../utils/bem";
+import { useConfig } from "../config-provider";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function isSegmentedLabeledOptionWithIcon(option) {
+  return _typeof(option) === 'object' && !!(option !== null && option !== void 0 && option.icon);
+}
+var bem = cn('segment-control');
+var InternalSegmented = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _ref;
+  var defaultName = useId();
+  var _customizePrefixCls = props.prefixCls,
+    className = props.className,
+    rootClassName = props.rootClassName,
+    block = props.block,
+    _props$options = props.options,
+    options = _props$options === void 0 ? [] : _props$options,
+    _props$size = props.size,
+    sizeProp = _props$size === void 0 ? 'middle' : _props$size,
+    style = props.style,
+    vertical = props.vertical,
+    _props$name = props.name,
+    name = _props$name === void 0 ? defaultName : _props$name,
+    direction = props.direction,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useConfig = useConfig(),
+    ctx = _useConfig.segmentControl;
+  // ===================== Size =====================
+  var size = (_ref = sizeProp !== null && sizeProp !== void 0 ? sizeProp : ctx === null || ctx === void 0 ? void 0 : ctx.size) !== null && _ref !== void 0 ? _ref : 'middle';
+
+  // syntactic sugar to support `icon` for Segmented Item
+  var extendedOptions = React.useMemo(function () {
+    return options.map(function (option) {
+      if (isSegmentedLabeledOptionWithIcon(option)) {
+        var icon = option.icon,
+          label = option.label,
+          restOption = _objectWithoutProperties(option, _excluded2);
+        return _objectSpread(_objectSpread({}, restOption), {}, {
+          label: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("span", {
+              className: bem('item-icon'),
+              children: icon
+            }), label && /*#__PURE__*/_jsx("span", {
+              children: label
+            })]
+          })
+        });
+      }
+      return option;
+    });
+  }, [options]);
+  var cls = classNames(bem({
+    block: block,
+    sm: size === 'small',
+    lg: size === 'large',
+    mini: size === 'mini',
+    vertical: vertical,
+    round: props.shape === 'round'
+  }), className, rootClassName);
+  return /*#__PURE__*/_jsx(RcSegmented, _objectSpread(_objectSpread({}, restProps), {}, {
+    name: name,
+    className: cls,
+    style: style,
+    options: extendedOptions,
+    ref: ref,
+    prefixCls: bem(),
+    direction: direction,
+    vertical: vertical
+  }));
+});
+var SegmentControl = InternalSegmented;
+if (process.env.NODE_ENV !== 'production') {
+  SegmentControl.displayName = 'SegmentControl';
+}
+export default SegmentControl;