@ebscn/ui 1.0.0 → 1.0.1-beta.1

package/cjs/components/pdfLink/pdfLink.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _ui = require("@ebscn/ui");
-var _antdMobile = require("antd-mobile");
+var _ = require("../..");
 var _react = _interopRequireWildcard(require("react"));
 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; }
@@ -70,7 +69,7 @@ var PdfLink = function (props) {
       return setVisible(true);
     },
     className: "ebscn-pdf-link"
-  }, props.children), _react.default.createElement(_antdMobile.Popup, {
+  }, props.children), _react.default.createElement(_.Popup, {
     visible: visible,
     position: "bottom",
     onMaskClick: function () {
@@ -79,7 +78,7 @@ var PdfLink = function (props) {
     bodyStyle: {
       height: '90vh'
     }
-  }, _react.default.createElement("div", null, _react.default.createElement(_ui.Button, {
+  }, _react.default.createElement("div", null, _react.default.createElement(_.Button, {
     style: {
       fontSize: '14px'
     },

package/cjs/components/picker/index.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import './picker.less';
+import { prompt } from './prompt';
+export type { PickerProps, PickerRef, PickerActions } from './picker';
+export type { PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from '../picker-view';
+declare const _default: import("react").NamedExoticComponent<{
+    columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
+    value?: import("../picker-view").PickerValue[] | undefined;
+    defaultValue?: import("../picker-view").PickerValue[] | undefined;
+    loading?: boolean | undefined;
+    loadingContent?: import("react").ReactNode;
+    onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+    onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    visible?: boolean | undefined;
+    title?: import("react").ReactNode;
+    confirmText?: import("react").ReactNode;
+    cancelText?: import("react").ReactNode;
+    children?: ((items: (import("../picker-view").PickerColumnItem | null)[], actions: import("./picker").PickerActions) => import("react").ReactNode) | undefined;
+    renderLabel?: ((item: import("../picker-view").PickerColumnItem) => import("react").ReactNode) | undefined;
+    mouseWheel?: boolean | undefined;
+    popupClassName?: string | undefined;
+    popupStyle?: import("react").CSSProperties | undefined;
+} & Pick<import("../popup").PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "forceRender" | "destroyOnClose"> & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>> & {
+    readonly type: import("react").ForwardRefExoticComponent<{
+        columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
+        value?: import("../picker-view").PickerValue[] | undefined;
+        defaultValue?: import("../picker-view").PickerValue[] | undefined;
+        loading?: boolean | undefined;
+        loadingContent?: import("react").ReactNode;
+        onSelect?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+        onConfirm?: ((value: import("../picker-view").PickerValue[], extend: import("../picker-view").PickerValueExtend) => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        onClose?: (() => void) | undefined;
+        closeOnMaskClick?: boolean | undefined;
+        visible?: boolean | undefined;
+        title?: import("react").ReactNode;
+        confirmText?: import("react").ReactNode;
+        cancelText?: import("react").ReactNode;
+        children?: ((items: (import("../picker-view").PickerColumnItem | null)[], actions: import("./picker").PickerActions) => import("react").ReactNode) | undefined;
+        renderLabel?: ((item: import("../picker-view").PickerColumnItem) => import("react").ReactNode) | undefined;
+        mouseWheel?: boolean | undefined;
+        popupClassName?: string | undefined;
+        popupStyle?: import("react").CSSProperties | undefined;
+    } & Pick<import("../popup").PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "forceRender" | "destroyOnClose"> & {
+        className?: string | undefined;
+        style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
+        tabIndex?: number | undefined;
+    } & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>>;
+} & {
+    prompt: typeof prompt;
+};
+export default _default;

package/cjs/components/picker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./picker.css");
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
+var _picker2 = require("./picker");
+var _prompt = require("./prompt");
+var _default = exports.default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_picker2.Picker, {
+  prompt: _prompt.prompt
+});

package/cjs/components/picker/picker-utils.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PickerColumnItem } from '../picker-view';
+export declare const defaultRenderLabel: (item: PickerColumnItem) => import("react").ReactNode;

package/cjs/components/picker/picker-utils.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultRenderLabel = void 0;
+var defaultRenderLabel = function (item) {
+  return item.label;
+};
+exports.defaultRenderLabel = defaultRenderLabel;

package/cjs/components/picker/picker.css

@@ -0,0 +1,55 @@
+.ebscn-picker {
+  --header-button-font-size: var(--ebscn-font-size-7);
+  --title-font-size: var(--ebscn-font-size-7);
+  --item-font-size: var(--ebscn-font-size-8);
+  --item-height: 34px;
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  ---item-font-size: var(--item-font-size);
+  ---item-height: var(--item-height);
+}
+.ebscn-picker .ebscn-picker-view.ebscn-picker-view {
+  --item-font-size: var(---item-font-size);
+  --item-height: var(---item-height);
+}
+.ebscn-picker-header {
+  flex-shrink: 0;
+  border-bottom: solid 1px var(--ebscn-color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 4px;
+}
+.ebscn-picker-header-button {
+  font-size: var(--header-button-font-size);
+  display: inline-block;
+  padding: 8px 8px;
+}
+.ebscn-picker-header-button-disabled,
+.ebscn-picker-header-button-disabled:active {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.ebscn-picker-header-title {
+  padding: 4px 4px;
+  font-size: var(--title-font-size);
+  color: var(--ebscn-color-text);
+  text-align: center;
+  flex: 1;
+}
+.ebscn-picker-body {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-picker-body > .ebscn-picker-view {
+  --height: 100%;
+}
+.ebscn-picker-popup .ebscn-popup-body {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}

package/cjs/components/picker/picker.d.ts

@@ -0,0 +1,57 @@
+import type { CSSProperties, ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PopupProps } from '../popup';
+import { PickerColumn, PickerColumnItem, PickerValue, PickerValueExtend } from './index';
+export type PickerActions = {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+export type PickerRef = PickerActions;
+export type PickerProps = {
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[];
+    defaultValue?: PickerValue[];
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    onSelect?: (value: PickerValue[], extend: PickerValueExtend) => void;
+    onConfirm?: (value: PickerValue[], extend: PickerValueExtend) => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    closeOnMaskClick?: boolean;
+    visible?: boolean;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: (items: (PickerColumnItem | null)[], actions: PickerActions) => ReactNode;
+    renderLabel?: (item: PickerColumnItem) => ReactNode;
+    mouseWheel?: boolean;
+    popupClassName?: string;
+    popupStyle?: CSSProperties;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'forceRender' | 'destroyOnClose'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
+export declare const Picker: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[] | undefined;
+    defaultValue?: PickerValue[] | undefined;
+    loading?: boolean | undefined;
+    loadingContent?: ReactNode;
+    onSelect?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
+    onConfirm?: ((value: PickerValue[], extend: PickerValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    visible?: boolean | undefined;
+    title?: ReactNode;
+    confirmText?: ReactNode;
+    cancelText?: ReactNode;
+    children?: ((items: (PickerColumnItem | null)[], actions: PickerActions) => ReactNode) | undefined;
+    renderLabel?: ((item: PickerColumnItem) => ReactNode) | undefined;
+    mouseWheel?: boolean | undefined;
+    popupClassName?: string | undefined;
+    popupStyle?: CSSProperties | undefined;
+} & Pick<PopupProps, "onClick" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "forceRender" | "destroyOnClose"> & {
+    className?: string | undefined;
+    style?: (CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<PickerActions>>>;

package/cjs/components/picker/picker.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Picker = void 0;
+var _ahooks = require("ahooks");
+var _antdMobile = require("antd-mobile");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _nativeProps = require("../../utils/native-props");
+var _usePropsValue = require("../../utils/use-props-value");
+var _withDefaultProps = require("../../utils/with-default-props");
+var _pickerView = _interopRequireDefault(require("../picker-view"));
+var _columnsExtend = require("../picker-view/columns-extend");
+var _popup = _interopRequireDefault(require("../popup"));
+var _pickerUtils = require("./picker-utils");
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var classPrefix = "ebscn-picker";
+var defaultProps = {
+  defaultValue: [],
+  closeOnMaskClick: true,
+  renderLabel: _pickerUtils.defaultRenderLabel,
+  destroyOnClose: false,
+  forceRender: false
+};
+var Picker = exports.Picker = (0, _react.memo)((0, _react.forwardRef)(function (p, ref) {
+  var _a;
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, {
+    confirmText: '',
+    cancelText: ''
+  }, p);
+  var _b = (0, _usePropsValue.usePropsValue)({
+      value: props.visible,
+      defaultValue: false,
+      onChange: function (v) {
+        var _a;
+        if (v === false) {
+          (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+        }
+      }
+    }),
+    visible = _b[0],
+    setVisible = _b[1];
+  var actions = {
+    toggle: function () {
+      setVisible(function (v) {
+        return !v;
+      });
+    },
+    open: function () {
+      setVisible(true);
+    },
+    close: function () {
+      setVisible(false);
+    }
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return actions;
+  });
+  var _c = (0, _usePropsValue.usePropsValue)(__assign(__assign({}, props), {
+      onChange: function (val) {
+        var _a;
+        var extend = (0, _columnsExtend.generateColumnsExtend)(props.columns, val);
+        (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+      }
+    })),
+    value = _c[0],
+    setValue = _c[1];
+  var extend = (0, _columnsExtend.useColumnsExtend)(props.columns, value);
+  var _d = (0, _react.useState)(value),
+    innerValue = _d[0],
+    setInnerValue = _d[1];
+  (0, _react.useEffect)(function () {
+    if (innerValue !== value) {
+      setInnerValue(value);
+    }
+  }, [visible]);
+  (0, _react.useEffect)(function () {
+    if (!visible) {
+      setInnerValue(value);
+    }
+  }, [value]);
+  var onChange = (0, _ahooks.useMemoizedFn)(function (val, ext) {
+    var _a;
+    setInnerValue(val);
+    if (visible) {
+      (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
+    }
+  });
+  var pickerElement = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: classPrefix
+  }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-header")
+  }, _react.default.createElement("a", {
+    role: "button",
+    className: "".concat(classPrefix, "-header-button"),
+    onClick: function () {
+      var _a;
+      (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    }
+  }, props.cancelText), _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-header-title")
+  }, props.title), _react.default.createElement("a", {
+    role: "button",
+    className: (0, _classnames.default)("".concat(classPrefix, "-header-button"), props.loading && "".concat(classPrefix, "-header-button-disabled")),
+    onClick: function () {
+      if (props.loading) return;
+      setValue(innerValue, true);
+      setVisible(false);
+    },
+    "aria-disabled": props.loading
+  }, props.confirmText)), _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-body")
+  }, _react.default.createElement(_pickerView.default, {
+    loading: props.loading,
+    loadingContent: props.loadingContent,
+    columns: props.columns,
+    renderLabel: props.renderLabel,
+    value: innerValue,
+    mouseWheel: props.mouseWheel,
+    onChange: onChange
+  }))));
+  var popupElement = _react.default.createElement(_popup.default, {
+    style: props.popupStyle,
+    className: (0, _classnames.default)("".concat(classPrefix, "-popup"), props.popupClassName),
+    visible: visible,
+    position: "bottom",
+    onMaskClick: function () {
+      var _a;
+      if (!props.closeOnMaskClick) return;
+      (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    },
+    getContainer: props.getContainer,
+    destroyOnClose: props.destroyOnClose,
+    afterShow: props.afterShow,
+    afterClose: props.afterClose,
+    onClick: props.onClick,
+    forceRender: props.forceRender,
+    stopPropagation: props.stopPropagation
+  }, pickerElement, _react.default.createElement(_antdMobile.SafeArea, {
+    position: "bottom"
+  }));
+  return _react.default.createElement(_react.default.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, extend.items, actions));
+}));
+Picker.displayName = 'Picker';

package/cjs/components/picker/prompt.d.ts

@@ -0,0 +1,2 @@
+import type { PickerProps, PickerValue } from './index';
+export declare function prompt(props: Omit<PickerProps, 'value' | 'visible' | 'children'>): Promise<PickerValue[] | null>;

package/cjs/components/picker/prompt.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prompt = prompt;
+var _react = _interopRequireWildcard(require("react"));
+var _renderToBody = require("../../utils/render-to-body");
+var _picker = require("./picker");
+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; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+function prompt(props) {
+  return new Promise(function (resolve) {
+    var Wrapper = function () {
+      var _a = (0, _react.useState)(false),
+        visible = _a[0],
+        setVisible = _a[1];
+      (0, _react.useEffect)(function () {
+        setVisible(true);
+      }, []);
+      return _react.default.createElement(_picker.Picker, __assign({}, props, {
+        visible: visible,
+        onConfirm: function (val, extend) {
+          var _a;
+          (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+          resolve(val);
+        },
+        onClose: function () {
+          var _a;
+          (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+          setVisible(false);
+          resolve(null);
+        },
+        afterClose: function () {
+          var _a;
+          (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+          unmount();
+        }
+      }));
+    };
+    var unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, null));
+  });
+}

package/cjs/components/picker-view/columns-extend.d.ts

@@ -0,0 +1,3 @@
+import type { PickerViewProps, PickerValue, PickerValueExtend } from './picker-view';
+export declare function generateColumnsExtend(rawColumns: PickerViewProps['columns'], val: PickerValue[]): PickerValueExtend;
+export declare function useColumnsExtend(rawColumns: PickerViewProps['columns'], value: PickerValue[]): PickerValueExtend;

package/cjs/components/picker-view/columns-extend.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateColumnsExtend = generateColumnsExtend;
+exports.useColumnsExtend = useColumnsExtend;
+var _react = require("react");
+var _withCache = require("../../utils/with-cache");
+function generateColumnsExtend(rawColumns, val) {
+  var columns = (0, _withCache.withCache)(function () {
+    var c = typeof rawColumns === 'function' ? rawColumns(val) : rawColumns;
+    return c.map(function (column) {
+      return column.map(function (item) {
+        return typeof item === 'string' ? {
+          label: item,
+          value: item
+        } : item;
+      });
+    });
+  });
+  var items = (0, _withCache.withCache)(function () {
+    return val.map(function (v, index) {
+      var _a;
+      var column = columns()[index];
+      if (!column) return null;
+      return (_a = column.find(function (item) {
+        return item.value === v;
+      })) !== null && _a !== void 0 ? _a : null;
+    });
+  });
+  var extend = {
+    get columns() {
+      return columns();
+    },
+    get items() {
+      return items();
+    }
+  };
+  return extend;
+}
+function useColumnsExtend(rawColumns, value) {
+  return (0, _react.useMemo)(function () {
+    return generateColumnsExtend(rawColumns, value);
+  }, [rawColumns, value]);
+}

package/cjs/components/picker-view/index.d.ts

@@ -0,0 +1,4 @@
+import { PickerView } from './picker-view';
+import './picker-view.less';
+export type { PickerViewProps, PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from './picker-view';
+export default PickerView;

package/cjs/components/picker-view/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _pickerView = require("./picker-view");
+require("./picker-view.css");
+var _default = exports.default = _pickerView.PickerView;

package/cjs/components/picker-view/picker-view.css

@@ -0,0 +1,129 @@
+.ebscn-picker-view {
+  --height: 240px;
+  --item-height: 34px;
+  --item-font-size: var(--ebscn-font-size-8);
+  height: var(--height);
+  width: 100%;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  background: var(--ebscn-color-background);
+}
+.ebscn-picker-view-column {
+  height: 100%;
+  flex: 1;
+  -webkit-user-select: none;
+          user-select: none;
+  touch-action: none;
+  position: relative;
+  z-index: 0;
+}
+.ebscn-picker-view-column-wheel {
+  width: 100%;
+  cursor: -webkit-grab;
+  cursor: grab;
+  position: absolute;
+  top: calc(50% - var(--item-height) / 2);
+  left: 0;
+}
+.ebscn-picker-view-column-wheel::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  top: -100vh;
+}
+.ebscn-picker-view-column-wheel::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  bottom: -100vh;
+}
+.ebscn-picker-view-column-item {
+  font-size: var(--item-font-size);
+  padding: 0 6px;
+  height: var(--item-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ebscn-picker-view-column-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ebscn-picker-view-column-accessible {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  top: calc(var(--item-height) * -1);
+  z-index: 0;
+  padding-bottom: 1px;
+}
+.ebscn-picker-view-column-accessible > * {
+  flex: 1;
+  text-overflow: ellipsis;
+}
+.ebscn-picker-view-column-accessible-current {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.ebscn-picker-view-column-accessible-button {
+  width: 100%;
+  height: 100%;
+}
+.ebscn-picker-view-mask {
+  position: absolute;
+  z-index: 10000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+}
+.ebscn-picker-view-mask-top,
+.ebscn-picker-view-mask-bottom {
+  flex: auto;
+}
+.ebscn-picker-view-mask-middle {
+  height: var(--item-height);
+  box-sizing: border-box;
+  flex: none;
+  background-color: rgba(0, 0, 0, 0.05);
+  z-index: 0;
+}
+.ebscn-picker-view-mask-top {
+  background: var(--ebscn-color-background);
+  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+          mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+}
+.ebscn-picker-view-mask-bottom {
+  background: var(--ebscn-color-background);
+  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+          mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+}
+.ebscn-picker-view-loading-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ebscn-picker-view-item-height-measure {
+  position: relative;
+  left: 0;
+  top: 0;
+  height: var(--item-height);
+  width: 0;
+  pointer-events: none;
+}

package/cjs/components/picker-view/picker-view.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PickerProps } from '../picker';
+export type PickerValue = string | number | null;
+export type PickerValueExtend = {
+    columns: PickerColumnItem[][];
+    items: (PickerColumnItem | null)[];
+};
+export type PickerColumnItem = {
+    label: ReactNode;
+    value: string | number;
+    key?: string | number;
+};
+export type PickerColumn = (string | PickerColumnItem)[];
+export type PickerViewProps = {
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[];
+    defaultValue?: PickerValue[];
+    mouseWheel?: boolean;
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
+} & Pick<PickerProps, 'renderLabel'> & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
+export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;