doui-react 1.0.0

package/lib/index.js

@@ -0,0 +1,345 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Button: true,
+  Checkbox: true,
+  DatePicker: true,
+  RangePicker: true,
+  Empty: true,
+  Form: true,
+  useForm: true,
+  useFormContext: true,
+  useFormListContext: true,
+  useFormValue: true,
+  useFormValueChange: true,
+  useValidateForm: true,
+  useValidateNotExistValue: true,
+  Grid: true,
+  HighlightText: true,
+  Input: true,
+  openConfirm: true,
+  openError: true,
+  openLoading: true,
+  openSuccess: true,
+  Modal: true,
+  closeModal: true,
+  openModal: true,
+  useModal: true,
+  Portal: true,
+  Radio: true,
+  Select: true,
+  CenterStack: true,
+  HStack: true,
+  VStack: true,
+  Switch: true,
+  Table: true,
+  useSearchColumn: true,
+  useTableContext: true,
+  Tabs: true,
+  Text: true,
+  Tooltip: true,
+  Tree: true,
+  TreeSelect: true,
+  VirtualList: true
+};
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _button.Button;
+  }
+});
+Object.defineProperty(exports, "CenterStack", {
+  enumerable: true,
+  get: function get() {
+    return _stack.CenterStack;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _checkbox.Checkbox;
+  }
+});
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function get() {
+    return _datePicker.DatePicker;
+  }
+});
+Object.defineProperty(exports, "Empty", {
+  enumerable: true,
+  get: function get() {
+    return _empty.Empty;
+  }
+});
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function get() {
+    return _form.Form;
+  }
+});
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function get() {
+    return _grid.Grid;
+  }
+});
+Object.defineProperty(exports, "HStack", {
+  enumerable: true,
+  get: function get() {
+    return _stack.HStack;
+  }
+});
+Object.defineProperty(exports, "HighlightText", {
+  enumerable: true,
+  get: function get() {
+    return _highlightText.HighlightText;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _input.Input;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _openModal.Modal;
+  }
+});
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function get() {
+    return _portal.Portal;
+  }
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function get() {
+    return _radio.Radio;
+  }
+});
+Object.defineProperty(exports, "RangePicker", {
+  enumerable: true,
+  get: function get() {
+    return _datePicker.RangePicker;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _select.Select;
+  }
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function get() {
+    return _switch.Switch;
+  }
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _table.Table;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _tabs.Tabs;
+  }
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function get() {
+    return _text.Text;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function get() {
+    return _tooltip.Tooltip;
+  }
+});
+Object.defineProperty(exports, "Tree", {
+  enumerable: true,
+  get: function get() {
+    return _tree.Tree;
+  }
+});
+Object.defineProperty(exports, "TreeSelect", {
+  enumerable: true,
+  get: function get() {
+    return _treeSelect.TreeSelect;
+  }
+});
+Object.defineProperty(exports, "VStack", {
+  enumerable: true,
+  get: function get() {
+    return _stack.VStack;
+  }
+});
+Object.defineProperty(exports, "VirtualList", {
+  enumerable: true,
+  get: function get() {
+    return _virtualList.VirtualList;
+  }
+});
+Object.defineProperty(exports, "closeModal", {
+  enumerable: true,
+  get: function get() {
+    return _openModal.closeModal;
+  }
+});
+Object.defineProperty(exports, "openConfirm", {
+  enumerable: true,
+  get: function get() {
+    return _modalPrompt.openConfirm;
+  }
+});
+Object.defineProperty(exports, "openError", {
+  enumerable: true,
+  get: function get() {
+    return _modalPrompt.openError;
+  }
+});
+Object.defineProperty(exports, "openLoading", {
+  enumerable: true,
+  get: function get() {
+    return _modalPrompt.openLoading;
+  }
+});
+Object.defineProperty(exports, "openModal", {
+  enumerable: true,
+  get: function get() {
+    return _openModal.openModal;
+  }
+});
+Object.defineProperty(exports, "openSuccess", {
+  enumerable: true,
+  get: function get() {
+    return _modalPrompt.openSuccess;
+  }
+});
+Object.defineProperty(exports, "useForm", {
+  enumerable: true,
+  get: function get() {
+    return _form.useForm;
+  }
+});
+Object.defineProperty(exports, "useFormContext", {
+  enumerable: true,
+  get: function get() {
+    return _form.useFormContext;
+  }
+});
+Object.defineProperty(exports, "useFormListContext", {
+  enumerable: true,
+  get: function get() {
+    return _form.useFormListContext;
+  }
+});
+Object.defineProperty(exports, "useFormValue", {
+  enumerable: true,
+  get: function get() {
+    return _form.useFormValue;
+  }
+});
+Object.defineProperty(exports, "useFormValueChange", {
+  enumerable: true,
+  get: function get() {
+    return _form.useFormValueChange;
+  }
+});
+Object.defineProperty(exports, "useModal", {
+  enumerable: true,
+  get: function get() {
+    return _openModal.useModal;
+  }
+});
+Object.defineProperty(exports, "useSearchColumn", {
+  enumerable: true,
+  get: function get() {
+    return _table.useSearchColumn;
+  }
+});
+Object.defineProperty(exports, "useTableContext", {
+  enumerable: true,
+  get: function get() {
+    return _table.useTableContext;
+  }
+});
+Object.defineProperty(exports, "useValidateForm", {
+  enumerable: true,
+  get: function get() {
+    return _form.useValidateForm;
+  }
+});
+Object.defineProperty(exports, "useValidateNotExistValue", {
+  enumerable: true,
+  get: function get() {
+    return _form.useValidateNotExistValue;
+  }
+});
+var _api = require("./api");
+Object.keys(_api).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _api[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _api[key];
+    }
+  });
+});
+var _hooks = require("./hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _hooks[key];
+    }
+  });
+});
+var _icon = require("./icon");
+Object.keys(_icon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _icon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _icon[key];
+    }
+  });
+});
+var _button = require("./button");
+var _checkbox = require("./checkbox");
+var _datePicker = require("./date-picker");
+var _empty = require("./empty");
+var _form = require("./form");
+var _grid = require("./grid");
+var _highlightText = require("./highlight-text");
+var _input = require("./input");
+var _modalPrompt = require("./modal-prompt");
+var _openModal = require("./open-modal");
+var _portal = require("./portal");
+var _radio = require("./radio");
+var _select = require("./select");
+var _stack = require("./stack");
+var _switch = require("./switch");
+var _table = require("./table");
+var _tabs = require("./tabs");
+var _text = require("./text");
+var _tooltip = require("./tooltip");
+var _tree = require("./tree");
+var _treeSelect = require("./tree-select");
+var _virtualList = require("./virtual-list");

package/lib/input/component/index.d.ts

@@ -0,0 +1,12 @@
+import { InputProps } from '../type';
+import { Input as EInput } from './input';
+import { Number } from './number';
+import { Password } from './password';
+import { Textarea } from './text-area';
+export declare const inputMap: {
+    input: typeof EInput;
+    textarea: typeof Textarea;
+    number: typeof Number;
+    password: typeof Password;
+};
+export declare function Input({ type, placeholder, ...props }: InputProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/input/component/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = Input;
+exports.inputMap = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _input = require("./input");
+var _number = require("./number");
+var _password = require("./password");
+var _textArea = require("./text-area");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["type", "placeholder"];
+var inputMap = exports.inputMap = {
+  input: _input.Input,
+  textarea: _textArea.Textarea,
+  number: _number.Number,
+  password: _password.Password
+};
+function Input(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'input' : _ref$type,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Input' : _ref$placeholder,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var Component = inputMap[type];
+  return (0, _jsxRuntime.jsx)(Component, (0, _objectSpread2.default)({
+    placeholder: placeholder
+  }, props));
+}

package/lib/input/component/input.d.ts

@@ -0,0 +1,2 @@
+import { InputProps } from '../type';
+export declare function Input(props: InputProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/input/component/input.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = Input;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _antd = require("antd");
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function Input(props) {
+  var params = (0, _utils.useInputValidate)(props);
+  return (0, _jsxRuntime.jsx)(_antd.Input, (0, _objectSpread2.default)({}, params));
+}

package/lib/input/component/number.d.ts

@@ -0,0 +1,4 @@
+import { InputNumberProps } from 'antd/lib/input-number';
+import { InputProps } from '../type';
+export declare function useNumber({ validate, onBlur, refs, allowResetOnEmpty, ...props }: InputProps): InputNumberProps;
+export declare function Number(props: InputProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/input/component/number.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Number = Number;
+exports.useNumber = useNumber;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _antd = require("antd");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactUse = require("react-use");
+var _style = _interopRequireDefault(require("../style"));
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["validate", "onBlur", "refs", "allowResetOnEmpty"];
+/**
+ * 前提条件: 1. 输入的内容为 1.1.1    2. precision 为 0 时
+ * Bug: Blur 后 Antd 会自动将显示的值 format 为 1，但 value 还是 1.1，导致真实值和显示的值不同
+ */
+function useChangeWhenHasPrecision(_ref) {
+  var value = _ref.value,
+    precision = _ref.precision,
+    onChange = _ref.onChange;
+  var prevValue = (0, _reactUse.usePrevious)(value);
+  function onBlur() {
+    if (prevValue === value || _lodash.default.isNil(value) || _lodash.default.isNil(precision)) {
+      return;
+    }
+    var numberValue = (0, _utils.formatNumber)(+value, precision);
+    onChange === null || onChange === void 0 || onChange(numberValue);
+  }
+  return onBlur;
+}
+function useNumber(_ref2) {
+  var validate = _ref2.validate,
+    onBlur = _ref2.onBlur,
+    refs = _ref2.refs,
+    allowResetOnEmpty = _ref2.allowResetOnEmpty,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var changeOnBlur = useChangeWhenHasPrecision(props);
+  var resetOnEmpty = (0, _utils.useResetOnEmpty)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    allowResetOnEmpty: allowResetOnEmpty
+  }));
+  return (0, _objectSpread2.default)({
+    ref: refs,
+    onBlur: (0, _api.mergeFunction)(changeOnBlur, onBlur, resetOnEmpty)
+  }, props);
+}
+function Number(props) {
+  var params = useNumber(props);
+  return (0, _jsxRuntime.jsx)(_antd.InputNumber, (0, _objectSpread2.default)({
+    css: _style.default.number
+  }, params));
+}

package/lib/input/component/password.d.ts

@@ -0,0 +1,2 @@
+import { InputProps } from '../type';
+export declare function Password(props: InputProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/input/component/password.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Password = Password;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _antd = require("antd");
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+function Password(props) {
+  var params = (0, _utils.useInputValidate)(props);
+  return (0, _jsxRuntime.jsx)(_antd.Input.Password, (0, _objectSpread2.default)({}, params));
+}

package/lib/input/component/text-area.d.ts

@@ -0,0 +1,2 @@
+import { InputProps } from '../type';
+export declare function Textarea({ resize, ...props }: InputProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/input/component/text-area.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Textarea = Textarea;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _antd = require("antd");
+var _style = _interopRequireDefault(require("../style"));
+var _utils = require("./utils");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["resize"];
+function Textarea(_ref) {
+  var _ref$resize = _ref.resize,
+    resize = _ref$resize === void 0 ? true : _ref$resize,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var params = (0, _utils.useInputValidate)(props);
+  return (0, _jsxRuntime.jsx)(_antd.Input.TextArea, (0, _objectSpread2.default)({
+    css: _style.default.textArea(resize)
+  }, params));
+}

package/lib/input/component/utils.d.ts

@@ -0,0 +1,15 @@
+import { validateScript, validateString } from "../../api";
+import { InputProps } from "..";
+export declare const validateTypeMap: {
+    default: typeof validateString;
+    script: typeof validateScript;
+};
+export declare function validateInput(value: string, validate?: InputProps['validate']): boolean;
+export declare function validateEnter(value: any, allowEnter: boolean): boolean;
+export declare function useInputValidate({ value, onChange, onBlur, validate, refs, allowEnter, allowResetOnEmpty, ...props }: InputProps): any;
+export declare function formatNumber(value: number, precision: number): number;
+interface ResetOnEmptyProps extends InputProps {
+    validate?: (value: string | number) => boolean;
+}
+export declare function useResetOnEmpty({ name, allowResetOnEmpty, validate }: ResetOnEmptyProps): () => Promise<void>;
+export {};

package/lib/input/component/utils.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatNumber = formatNumber;
+exports.useInputValidate = useInputValidate;
+exports.useResetOnEmpty = useResetOnEmpty;
+exports.validateEnter = validateEnter;
+exports.validateInput = validateInput;
+exports.validateTypeMap = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _form = require("../../form");
+var _utils = require("../../form/component/utils");
+var _delay = _interopRequireDefault(require("delay"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _excluded = ["value", "onChange", "onBlur", "validate", "refs", "allowEnter", "allowResetOnEmpty"];
+var validateTypeMap = exports.validateTypeMap = {
+  default: _api.validateString,
+  script: _api.validateScript
+};
+function validateInput(value) {
+  var validate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
+  if (_lodash.default.isFunction(validate)) {
+    return validate(value);
+  }
+  if (_lodash.default.isRegExp(validate)) {
+    return validate.test(value);
+  }
+  var validateFn = validateTypeMap[validate] || validateTypeMap.default;
+  return validateFn(value);
+}
+function validateEnter(value, allowEnter) {
+  return allowEnter || !_lodash.default.includes(value, '\n');
+}
+function useInputValidate(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    validate = _ref.validate,
+    refs = _ref.refs,
+    _ref$allowEnter = _ref.allowEnter,
+    allowEnter = _ref$allowEnter === void 0 ? true : _ref$allowEnter,
+    allowResetOnEmpty = _ref.allowResetOnEmpty,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var resetOnEmpty = useResetOnEmpty((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    allowResetOnEmpty: allowResetOnEmpty,
+    validate: function validate(value) {
+      return !value;
+    }
+  }));
+  var handleChange = function handleChange(e) {
+    var value = e.target.value;
+    if (validateInput(value, validate) && validateEnter(value, allowEnter)) {
+      onChange === null || onChange === void 0 || onChange(value);
+    }
+  };
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    maxLength: 255
+  }, props), {}, {
+    ref: refs,
+    autoComplete: 'off',
+    value: _lodash.default.isNil(value) ? '' : value,
+    onChange: handleChange,
+    onBlur: (0, _api.mergeFunction)(onBlur, resetOnEmpty)
+  });
+}
+function formatNumber(value, precision) {
+  return +value.toFixed(precision);
+}
+function useResetOnEmpty(_ref2) {
+  var name = _ref2.name,
+    allowResetOnEmpty = _ref2.allowResetOnEmpty,
+    validate = _ref2.validate;
+  var _useFormContext = (0, _form.useFormContext)(),
+    form = _useFormContext.form;
+  function onBlur() {
+    return _onBlur.apply(this, arguments);
+  }
+  function _onBlur() {
+    _onBlur = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var namePath, value;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!form || !allowResetOnEmpty)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _context.next = 4;
+            return (0, _delay.default)(20);
+          case 4:
+            namePath = (0, _utils.transformPathToName)(name);
+            value = form.getValue(namePath);
+            if (_lodash.default.isNil(value) || validate !== null && validate !== void 0 && validate(value)) {
+              form.reset(namePath);
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return _onBlur.apply(this, arguments);
+  }
+  return onBlur;
+}

package/lib/input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from './component';
+export * from './type';

package/lib/input/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Input: true
+};
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _component.Input;
+  }
+});
+var _component = require("./component");
+var _type = require("./type");
+Object.keys(_type).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _type[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _type[key];
+    }
+  });
+});

package/lib/input/style/index.d.ts

@@ -0,0 +1,6 @@
+declare const style: {
+    wrapper: import("@emotion/react").SerializedStyles;
+    number: import("@emotion/react").SerializedStyles;
+    textArea: (resize: boolean) => import("@emotion/react").SerializedStyles;
+};
+export default style;