@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/form/hooks/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "useArrayFieldState", {
+  enumerable: true,
+  get: function () {
+    return _useArrayFieldState.default;
+  }
+});
+
+_Object$defineProperty(exports, "useFieldApi", {
+  enumerable: true,
+  get: function () {
+    return _useFieldApi.default;
+  }
+});
+
+_Object$defineProperty(exports, "useFieldState", {
+  enumerable: true,
+  get: function () {
+    return _useFieldState.default;
+  }
+});
+
+_Object$defineProperty(exports, "useFormApi", {
+  enumerable: true,
+  get: function () {
+    return _useFormApi.default;
+  }
+});
+
+_Object$defineProperty(exports, "useFormState", {
+  enumerable: true,
+  get: function () {
+    return _useFormState.default;
+  }
+});
+
+_Object$defineProperty(exports, "useFormUpdater", {
+  enumerable: true,
+  get: function () {
+    return _useFormUpdater.default;
+  }
+});
+
+_Object$defineProperty(exports, "useStateWithGetter", {
+  enumerable: true,
+  get: function () {
+    return _useStateWithGetter.default;
+  }
+});
+
+var _useFormApi = _interopRequireDefault(require("./useFormApi"));
+
+var _useFormState = _interopRequireDefault(require("./useFormState"));
+
+var _useFieldState = _interopRequireDefault(require("./useFieldState"));
+
+var _useFieldApi = _interopRequireDefault(require("./useFieldApi"));
+
+var _useFormUpdater = _interopRequireDefault(require("./useFormUpdater"));
+
+var _useStateWithGetter = _interopRequireDefault(require("./useStateWithGetter"));
+
+var _useArrayFieldState = _interopRequireDefault(require("./useArrayFieldState"));

package/lib/cjs/form/hooks/useArrayFieldState.d.ts

@@ -0,0 +1,4 @@
+declare function useArrayFieldState(): {
+    shouldUseInitValue: boolean;
+};
+export default useArrayFieldState;

package/lib/cjs/form/hooks/useArrayFieldState.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _react = require("react");
+
+var _context = require("../context");
+
+function useArrayFieldState() {
+  const arrayFieldContext = (0, _react.useContext)(_context.ArrayFieldContext);
+  return arrayFieldContext;
+}
+
+var _default = useArrayFieldState;
+exports.default = _default;

package/lib/cjs/form/hooks/useFieldApi.d.ts

@@ -0,0 +1,10 @@
+import { ReactFieldError as FieldError } from '../errorMessage';
+declare function useFieldApi(field: string): {
+    getError: () => any;
+    setError: (error: FieldError) => void;
+    getTouched: () => boolean;
+    setTouched: (isTouched: boolean) => void;
+    getValue: () => any;
+    setValue: (value: any) => void;
+};
+export default useFieldApi;

package/lib/cjs/form/hooks/useFieldApi.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _useFormApi = _interopRequireDefault(require("./useFormApi"));
+
+const buildFieldApi = (formApi, field) => ({
+  getError: () => formApi.getError(field),
+  setError: error => formApi.setError(field, error),
+  getTouched: () => formApi.getTouched(field),
+  setTouched: isTouched => formApi.setTouched(field, isTouched),
+  getValue: () => formApi.getValue(field),
+  setValue: value => formApi.setValue(field, value)
+});
+
+function useFieldApi(field) {
+  const formApi = (0, _useFormApi.default)();
+  const fieldApi = buildFieldApi(formApi, field);
+  return fieldApi;
+}
+
+var _default = useFieldApi;
+exports.default = _default;

package/lib/cjs/form/hooks/useFieldState.d.ts

@@ -0,0 +1,6 @@
+declare function useFieldState(field: string): {
+    value: any;
+    error: any;
+    touched: any;
+};
+export default useFieldState;

package/lib/cjs/form/hooks/useFieldState.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+
+var _useFormState = _interopRequireDefault(require("./useFormState"));
+
+var ObjectUtil = _interopRequireWildcard(require("@douyinfe/semi-foundation/lib/cjs/utils/object"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const buildFieldState = (formState, field) => ({
+  value: ObjectUtil.get((0, _values.default)(formState), field),
+  error: ObjectUtil.get(formState.errors, field),
+  touched: ObjectUtil.get(formState.touched, field)
+});
+
+function useFieldState(field) {
+  const formState = (0, _useFormState.default)();
+  const fieldState = buildFieldState(formState, field);
+  return fieldState;
+}
+
+var _default = useFieldState;
+exports.default = _default;

package/lib/cjs/form/hooks/useFormApi.d.ts

@@ -0,0 +1 @@
+export default function useFormApi(): import("@douyinfe/semi-foundation/lib/cjs/form/interface").BaseFormApi<any>;

package/lib/cjs/form/hooks/useFormApi.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = useFormApi;
+
+var _react = require("react");
+
+var _context = require("../context");
+
+function useFormApi() {
+  return (0, _react.useContext)(_context.FormApiContext);
+}

package/lib/cjs/form/hooks/useFormState.d.ts

@@ -0,0 +1,2 @@
+declare function useFormState(): import("@douyinfe/semi-foundation/lib/cjs/form/interface").FormState<any>;
+export default useFormState;

package/lib/cjs/form/hooks/useFormState.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _react = require("react");
+
+var _context = require("../context");
+
+function useFormState() {
+  const formState = (0, _react.useContext)(_context.FormStateContext);
+  return formState;
+}
+
+var _default = useFormState;
+exports.default = _default;

package/lib/cjs/form/hooks/useFormUpdater.d.ts

@@ -0,0 +1 @@
+export default function useFormUpdater(): import("@douyinfe/semi-foundation/lib/cjs/form/interface").FormUpdaterContextType;

package/lib/cjs/form/hooks/useFormUpdater.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = useFormUpdater;
+
+var _react = require("react");
+
+var _context = require("../context");
+
+function useFormUpdater() {
+  return (0, _react.useContext)(_context.FormUpdaterContext);
+}

package/lib/cjs/form/hooks/useStateWithGetter.d.ts

@@ -0,0 +1 @@
+export default function useStateWithGetter(initial?: any): any[];

package/lib/cjs/form/hooks/useStateWithGetter.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = useStateWithGetter;
+
+var _react = require("react");
+
+// https://github.com/facebook/react/issues/14543
+function useStateWithGetter(initial) {
+  const ref = (0, _react.useRef)();
+  const [state, setState] = (0, _react.useState)(initial);
+  ref.current = state;
+
+  const set = value => {
+    ref.current = value;
+    setState(value);
+  };
+
+  const get = () => ref.current;
+
+  return [state, set, get];
+}

package/lib/cjs/form/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The early design of Semi Form was inspired by informed （https://github.com/joepuzzo/informed） and formik（https://github.com/formium/formik）
+ * The informed API design is very concise, and formik has very clear naming of the form status.
+ * However, due to the requirements of convenient scalability (we need to split into F/A architecture), in additional they have their own binding verification library,
+ * we cannot directly reuse such libraries.
+ * So we fully absorbed these excellent api designs. Combining the technical principles of the two to implement our own code,
+ */
+import Form from './baseForm';
+import ArrayField from './arrayField';
+import { useFormApi, useFormState, useFieldState, useFieldApi } from './hooks/index';
+import withField from './hoc/withField';
+import withFormState from './hoc/withFormState';
+import withFormApi from './hoc/withFormApi';
+export * from './interface';
+export { Form, ArrayField, withField, useFormApi, useFormState, useFieldApi, useFieldState, withFormState, withFormApi };
+export * from './interface';
+export { ArrayFieldProps } from './arrayField';
+export { ReactFieldError, ErrorMessageProps } from './errorMessage';
+export { InputGroupProps } from './group';
+export { LabelProps } from './label';
+export { SectionProps } from './section';
+export { SlotProps } from './slot';

package/lib/cjs/form/index.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _context;
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _exportNames = {
+  Form: true,
+  ArrayField: true,
+  useFormApi: true,
+  useFormState: true,
+  useFieldState: true,
+  useFieldApi: true,
+  withField: true,
+  withFormState: true,
+  withFormApi: true
+};
+
+_Object$defineProperty(exports, "ArrayField", {
+  enumerable: true,
+  get: function () {
+    return _arrayField.default;
+  }
+});
+
+_Object$defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () {
+    return _baseForm.default;
+  }
+});
+
+_Object$defineProperty(exports, "useFieldApi", {
+  enumerable: true,
+  get: function () {
+    return _index.useFieldApi;
+  }
+});
+
+_Object$defineProperty(exports, "useFieldState", {
+  enumerable: true,
+  get: function () {
+    return _index.useFieldState;
+  }
+});
+
+_Object$defineProperty(exports, "useFormApi", {
+  enumerable: true,
+  get: function () {
+    return _index.useFormApi;
+  }
+});
+
+_Object$defineProperty(exports, "useFormState", {
+  enumerable: true,
+  get: function () {
+    return _index.useFormState;
+  }
+});
+
+_Object$defineProperty(exports, "withField", {
+  enumerable: true,
+  get: function () {
+    return _withField.default;
+  }
+});
+
+_Object$defineProperty(exports, "withFormApi", {
+  enumerable: true,
+  get: function () {
+    return _withFormApi.default;
+  }
+});
+
+_Object$defineProperty(exports, "withFormState", {
+  enumerable: true,
+  get: function () {
+    return _withFormState.default;
+  }
+});
+
+var _baseForm = _interopRequireDefault(require("./baseForm"));
+
+var _arrayField = _interopRequireDefault(require("./arrayField"));
+
+var _index = require("./hooks/index");
+
+var _withField = _interopRequireDefault(require("./hoc/withField"));
+
+var _withFormState = _interopRequireDefault(require("./hoc/withFormState"));
+
+var _withFormApi = _interopRequireDefault(require("./hoc/withFormApi"));
+
+var _interface = require("./interface");
+
+_forEachInstanceProperty(_context = _Object$keys(_interface)).call(_context, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _interface[key]) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _interface[key];
+    }
+  });
+});

package/lib/cjs/form/interface.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { Subtract } from 'utility-types';
+import type { RuleItem } from 'async-validator';
+import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
+import { BaseFormApi as FormApi, FormState, WithFieldOption } from '@douyinfe/semi-foundation/lib/cjs/form/interface';
+import { SelectProps } from '../select/index';
+import Option from '../select/option';
+import OptGroup from '../select/optionGroup';
+import { CheckboxProps } from '../checkbox/index';
+import { RadioProps } from '../radio/index';
+import { ReactFieldError as FieldError } from './errorMessage';
+import { LabelProps } from './label';
+export { FormState, FormApi, WithFieldOption };
+export declare type CommonFieldProps = {
+    /** Field is required (except Form. Checkbox within the Group, Form. Radio) */
+    field: string;
+    /** The label text of the form control is the same name as the field by default when it is not passed */
+    label?: string | LabelProps | React.ReactNode | number;
+    labelPosition?: 'top' | 'left' | 'inset';
+    labelAlign?: 'left' | 'right';
+    labelWidth?: number | string;
+    noLabel?: boolean;
+    noErrorMessage?: boolean;
+    name?: string;
+    fieldClassName?: string;
+    fieldStyle?: React.CSSProperties;
+    initValue?: any;
+    validate?: (fieldValue: any, values: Record<string, any>) => string | Promise<string>;
+    /** Check rules, check library based on async-validator */
+    rules?: Array<RuleItem>;
+    /** Check trigger timing */
+    trigger?: 'blur' | 'change' | 'custom' | 'mount' | Array<string>;
+    /** Converts form control values before validation */
+    transform?: (fieldValue: any) => any;
+    /** Make a second change to the component's value before the UI update */
+    convert?: (fieldValue: any) => any;
+    allowEmptyString?: boolean;
+    /** When true, use rules verification, after encountering the first rule that fails the test, the verification of subsequent rules will no longer be triggered */
+    stopValidateWithError?: boolean;
+    helpText?: React.ReactNode;
+    extraText?: React.ReactNode;
+    extraTextPosition?: 'middle' | 'bottom';
+    /** These declaration just hack for Subtract, not valid props in CommonFieldProps */
+    defaultValue?: any;
+    /** Whether to take over only the data stream, when true, it will not automatically insert modules such as ErrorMessage, Label, extraText, etc. The style and DOM structure are consistent with the original component */
+    pure?: boolean;
+};
+export declare type CommonexcludeType = {
+    defaultValue?: any;
+    value?: any;
+    checked?: boolean;
+    defaultChecked?: boolean;
+};
+export declare type RadioCheckboxExcludeProps = {
+    defaultValue?: any;
+    chekced?: boolean;
+    defaultChecked?: boolean;
+    field: string;
+};
+export declare type RCIncludeType = {
+    field?: string;
+};
+export declare class FormSelect extends React.Component<Subtract<SelectProps & CommonFieldProps, CommonexcludeType>> {
+    static Option: typeof Option;
+    static OptGroup: typeof OptGroup;
+}
+export interface SelectStatic {
+    Option: typeof Option;
+    OptGroup: typeof OptGroup;
+}
+export declare class Field<P> extends React.Component<Subtract<P & CommonFieldProps, CommonexcludeType>> {
+}
+export declare let FormSelectType: React.ComponentType<Subtract<SelectProps & CommonFieldProps, CommonexcludeType>> & SelectStatic;
+export declare let FormCheckboxType: React.ComponentType<Subtract<CommonFieldProps, RadioCheckboxExcludeProps> & CheckboxProps & RCIncludeType>;
+export declare let FormRadioType: React.ComponentType<Subtract<CommonFieldProps, RadioCheckboxExcludeProps> & RadioProps & RCIncludeType>;
+export interface ErrorMsg {
+    [optionalKey: string]: FieldError;
+}
+export interface FormFCChild<K extends Record<string, any> = any> {
+    formState: FormState<K>;
+    values: K;
+    formApi: FormApi<K>;
+}
+export interface BaseFormProps {
+    onSubmit?: (values: Record<string, any>) => void;
+    onSubmitFail?: (errors: Record<string, FieldError>, values: any) => void;
+    onReset?: () => void;
+    onValueChange?: (values: Record<string, any>, changedValue: Record<string, any>) => void;
+    onChange?: (formState: FormState) => void;
+    validateFields?: (values: Record<string, any>) => string | Record<string, any>;
+    /** Use this if you want to populate the form with initial values. */
+    initValues?: Record<string, any>;
+    /** getFormApi will be call once when Form mounted, u can save formApi reference in your component  */
+    getFormApi?: (formApi: FormApi) => void;
+    style?: React.CSSProperties;
+    className?: string;
+    layout?: 'horizontal' | 'vertical';
+    labelPosition?: 'top' | 'left' | 'inset';
+    labelWidth?: number | string;
+    labelAlign?: 'left' | 'right';
+    labelCol?: Record<string, any>;
+    wrapperCol?: Record<string, any>;
+    allowEmpty?: boolean;
+    render?: (internalProps: FormFCChild) => React.ReactNode;
+    component?: React.FC<any> | React.ComponentClass<any>;
+    children?: React.ReactNode | ((internalProps: FormFCChild) => React.ReactNode);
+    autoScrollToError?: boolean | scrollIntoViewOptions;
+    disabled?: boolean;
+    showValidateIcon?: boolean;
+    extraTextPosition?: 'middle' | 'bottom';
+}

package/lib/cjs/form/interface.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.FormSelectType = exports.FormSelect = exports.FormRadioType = exports.FormCheckboxType = exports.Field = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable one-var */
+
+/* eslint-disable react/prefer-stateless-function, max-len */
+class FormSelect extends React.Component {}
+
+exports.FormSelect = FormSelect;
+
+class Field extends React.Component {}
+
+exports.Field = Field;
+let FormSelectType;
+exports.FormSelectType = FormSelectType;
+let FormCheckboxType;
+exports.FormCheckboxType = FormCheckboxType;
+let FormRadioType;
+exports.FormRadioType = FormRadioType;

package/lib/cjs/form/label.d.ts

@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+export interface LabelProps {
+    /** Whether to display the required * symbol */
+    required?: boolean;
+    /** Content of label */
+    text?: React.ReactNode;
+    disabled?: boolean;
+    /** Used to configure the htmlFor attribute of the label tag */
+    name?: string;
+    /** text-align of label */
+    align?: string;
+    /** width of label */
+    width?: number | string;
+    style?: React.CSSProperties;
+    className?: string;
+    extra?: React.ReactNode;
+}
+export default class Label extends PureComponent<LabelProps> {
+    static defaultProps: {
+        required: boolean;
+        name: string;
+        align: string;
+        className: string;
+    };
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        required: PropTypes.Requireable<boolean>;
+        text: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        name: PropTypes.Requireable<string>;
+        align: PropTypes.Requireable<string>;
+        width: PropTypes.Requireable<string | number>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        extra: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}