@yuntijs/ui 1.0.0-beta.14 → 1.0.0-beta.15

package/es/FormHelper/autoFocus.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type RefOrDomOrId<T> = HTMLElement | string | React.Ref<T>;
+type F = any;
+/**
+ * Passing a ref, id, or DOM element to obtain and set the focus state of the first non-disabled and non-readonly input or textarea.
+ * @param {RefOrDomOrId} refOrDomOrId - 支持类型 HTMLElement | string | React.Ref<T>
+ * @returns void
+ */
+export declare const useAutoFocus: (refOrDomOrId?: RefOrDomOrId<F>) => void;
+export {};

package/es/FormHelper/autoFocus.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+var getDom = function getDom(refOrDomOrId) {
+  return typeof refOrDomOrId === 'string' ? document.querySelector("#".concat(refOrDomOrId)) : (refOrDomOrId === null || refOrDomOrId === void 0 ? void 0 : refOrDomOrId.current) || refOrDomOrId;
+};
+
+// https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#input_%E7%B1%BB%E5%9E%8B
+var disabled = ':not([disabled]):not([readonly])';
+var queryInputTypes = ['text', 'password', 'search', 'tel', 'url', 'number', 'email', ''].map(function (item) {
+  return "input[type=\"".concat(item, "\"]").concat(disabled);
+}).join(', ') + ", input:not([type])".concat(disabled, ", textarea").concat(disabled);
+var setAutoFocus = function setAutoFocus(refOrDomOrId) {
+  var _dom$querySelector;
+  var dom = getDom(refOrDomOrId);
+  if (!dom) return;
+  var input = (_dom$querySelector = dom.querySelector) === null || _dom$querySelector === void 0 ? void 0 : _dom$querySelector.call(dom, queryInputTypes);
+  if (!(input !== null && input !== void 0 && input.focus)) return;
+  input.focus();
+  return true;
+};
+
+/**
+ * Passing a ref, id, or DOM element to obtain and set the focus state of the first non-disabled and non-readonly input or textarea.
+ * @param {RefOrDomOrId} refOrDomOrId - 支持类型 HTMLElement | string | React.Ref<T>
+ * @returns void
+ */
+export var useAutoFocus = function useAutoFocus(refOrDomOrId) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
+  React.useEffect(function () {
+    if (focused || !refOrDomOrId) return;
+    var setRes = setAutoFocus(refOrDomOrId);
+    if (!setRes) return;
+    setFocused(true);
+  }, [refOrDomOrId, focused, setFocused]);
+};

package/es/FormHelper/index.d.ts

@@ -0,0 +1,13 @@
+import React, { ComponentType, FC } from 'react';
+export { useAutoFocus } from './autoFocus';
+export type FormHelperProps = {
+    children: React.ReactNode;
+    autoFocus?: boolean;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const FormHelper: React.FC<FormHelperProps>;
+type FormHelperConfig = Omit<FormHelperProps, 'children'>;
+export declare const withFormHelper: (formHelperConfig?: FormHelperConfig) => <P extends Record<string, never>>(WrappedComponent: React.ComponentType<P>) => React.FC<P>;
+export { FormHelper };

package/es/FormHelper/index.js

@@ -0,0 +1,41 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 React, { useRef } from 'react';
+import { useAutoFocus } from "./autoFocus";
+import { jsx as _jsx } from "react/jsx-runtime";
+export { useAutoFocus } from "./autoFocus";
+// Component
+
+var FormHelper = function FormHelper(props) {
+  var _props$style;
+  var _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus;
+  var ref = useRef(null);
+  useAutoFocus(autoFocus ? ref : undefined);
+  return /*#__PURE__*/_jsx("div", {
+    className: props.className,
+    id: props.id,
+    ref: ref,
+    style: (_props$style = props.style) !== null && _props$style !== void 0 ? _props$style : {
+      display: props.className ? undefined : 'contents'
+    },
+    children: props.children
+  });
+};
+
+// HOC
+
+export var withFormHelper = function withFormHelper(formHelperConfig) {
+  return function (WrappedComponent) {
+    var HocComponent = function HocComponent(props) {
+      return /*#__PURE__*/_jsx(FormHelper, _objectSpread(_objectSpread({}, formHelperConfig || {}), {}, {
+        children: /*#__PURE__*/_jsx(WrappedComponent, _objectSpread({}, props))
+      }));
+    };
+    var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    HocComponent.displayName = "withFormHelper(".concat(displayName, ")");
+    return HocComponent;
+  };
+};
+export { FormHelper };

package/es/index.d.ts

@@ -9,10 +9,11 @@ export * from './Card';
 export * from './Descriptions';
 export * from './Divider';
 export * from './Drawer';
+export * from './FormHelper';
 export * from './Modal';
 export { Affix, type AffixProps, Anchor, type AnchorProps, App, type AppProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, BackTop, type BackTopProps, Badge, // @todo composed type
 type BadgeProps, Button, // @todo dependence unifiedLink. link type, hover primary color, back button
 type ButtonProps, Calendar, type CalendarProps, Carousel, type CarouselProps, Cascader, type CascaderProps, Checkbox, type CheckboxProps, Col, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColProps, // @todo center style
-DatePicker, type DatePickerProps, Dropdown, type DropDownProps, Empty, type EmptyProps, Flex, type FlexProps, FloatButton, type FloatButtonProps, Form, type FormInstance, type FormItemProps, type FormListFieldData, type FormListOperation, type FormProps, type FormRule, Grid, Image, ImageProps, Input, InputNumber, type InputNumberProps, type InputProps, type InputRef, Layout, type LayoutProps, List, type ListProps, type MentionProps, Mentions, Menu, type MenuItemProps, type MenuProps, type MenuRef, type MenuTheme, message, type MessageArgsProps, Space, type SpaceProps, type SubMenuProps, } from 'antd';
+DatePicker, type DatePickerProps, Dropdown, type DropDownProps, Empty, type EmptyProps, Flex, type FlexProps, FloatButton, type FloatButtonProps, Form, type FormInstance, type FormItemProps, type FormListFieldData, type FormListOperation, type FormProps, type FormRule, Grid, Image, type ImageProps, Input, InputNumber, type InputNumberProps, type InputProps, type InputRef, Layout, type LayoutProps, List, type ListProps, type MentionProps, Mentions, Menu, type MenuItemProps, type MenuProps, type MenuRef, type MenuTheme, message, type MessageArgsProps, Space, type SpaceProps, type SubMenuProps, } from 'antd';
 export { Highlighter, type HighlighterProps, Markdown, type MarkdownProps, SyntaxHighlighter, type SyntaxHighlighterProps, } from '@lobehub/ui';
 export { useResponsive, useTheme, useThemeMode } from 'antd-style';

package/es/index.js

@@ -11,6 +11,7 @@ export * from "./Card";
 export * from "./Descriptions";
 export * from "./Divider";
 export * from "./Drawer";
+export * from "./FormHelper";
 export * from "./Modal";
 
 // ~ antd
@@ -18,7 +19,7 @@ export { Affix, Anchor, App, AutoComplete, Avatar, BackTop, Badge // @todo compo
 , Button // @todo dependence unifiedLink. link type, hover primary color, back button
 , Calendar, Carousel, Cascader, Checkbox, Col, Collapse, ColorPicker,
 // @todo center style
-DatePicker, Dropdown, Empty, Flex, FloatButton, Form, Grid, Image, ImageProps, Input, InputNumber, Layout, List, Mentions, Menu, message, Space } from 'antd';
+DatePicker, Dropdown, Empty, Flex, FloatButton, Form, Grid, Image, Input, InputNumber, Layout, List, Mentions, Menu, message, Space } from 'antd';
 
 // ~ @lobehub/ui
 export { Highlighter, Markdown, SyntaxHighlighter } from '@lobehub/ui';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.15",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",