@ebscn/ui 0.0.11 → 1.0.0-beta.0

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>;

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

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerView = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _withDefaultProps = require("../../utils/with-default-props");
+var _wheel = require("./wheel");
+var _columnsExtend = require("./columns-extend");
+var _nativeProps = require("../../utils/native-props");
+var _ahooks = require("ahooks");
+var _pickerUtils = require("../picker/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; }
+var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+var classPrefix = "ebscn-picker-view";
+var defaultProps = {
+  defaultValue: [],
+  renderLabel: _pickerUtils.defaultRenderLabel,
+  mouseWheel: false,
+  loadingContent: _react.default.createElement(_react.default.Fragment, null)
+};
+var PickerView = exports.PickerView = (0, _react.memo)(function (p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var _a = (0, _react.useState)(props.value === undefined ? props.defaultValue : props.value),
+    innerValue = _a[0],
+    setInnerValue = _a[1];
+  // Sync `value` to `innerValue`
+  (0, _react.useEffect)(function () {
+    if (props.value === undefined) return; // Uncontrolled mode
+    if (props.value === innerValue) return;
+    setInnerValue(props.value);
+  }, [props.value]);
+  (0, _react.useEffect)(function () {
+    if (props.value === innerValue) return;
+    var timeout = window.setTimeout(function () {
+      if (props.value !== undefined && props.value !== innerValue) {
+        setInnerValue(props.value);
+      }
+    }, 1000);
+    return function () {
+      window.clearTimeout(timeout);
+    };
+  }, [props.value, innerValue]);
+  var extend = (0, _columnsExtend.useColumnsExtend)(props.columns, innerValue);
+  var columns = extend.columns;
+  (0, _ahooks.useDebounceEffect)(function () {
+    var _a;
+    if (props.value === innerValue) return;
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerValue, extend);
+  }, [innerValue], {
+    wait: 0,
+    leading: false,
+    trailing: true
+  });
+  var handleSelect = (0, _react.useCallback)(function (val, index) {
+    setInnerValue(function (prev) {
+      var next = __spreadArray([], prev, true);
+      next[index] = val;
+      return next;
+    });
+  }, []);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: "".concat(classPrefix)
+  }, props.loading ? props.loadingContent : _react.default.createElement(_react.default.Fragment, null, columns.map(function (column, index) {
+    return _react.default.createElement(_wheel.Wheel, {
+      key: index,
+      index: index,
+      column: column,
+      value: innerValue[index],
+      onSelect: handleSelect,
+      renderLabel: props.renderLabel,
+      mouseWheel: props.mouseWheel
+    });
+  }), _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-mask")
+  }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-mask-top")
+  }), _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-mask-middle")
+  }), _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-mask-bottom")
+  })))));
+});
+PickerView.displayName = 'PickerView';

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { PickerColumnItem, PickerValue } from './index';
+type Props = {
+    index: number;
+    column: PickerColumnItem[];
+    value: PickerValue;
+    onSelect: (value: PickerValue, index: number) => void;
+    renderLabel: (item: PickerColumnItem) => ReactNode;
+    mouseWheel: boolean;
+};
+export declare const Wheel: React.NamedExoticComponent<Props>;
+export {};