@uni-sw/u-design 2.0.4

package/es/components/UFileSelect/index.js

@@ -0,0 +1,133 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { __rest } from "tslib";
+import React, { useState, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import UButton from "../UButton";
+import { getTheme, CUSTOM_PREFIX } from "../../globalVarious";
+import LocaleReceiver from "../locale-provider/LocaleReceiver";
+import "./style";
+var UFileSelect = function UFileSelect(props) {
+  var className = props.className,
+    _props$btnType = props.btnType,
+    btnType = _props$btnType === void 0 ? 'input' : _props$btnType,
+    disabled = props.disabled,
+    theme = props.theme,
+    value = props.value,
+    _props$fileType = props.fileType,
+    fileType = _props$fileType === void 0 ? 'image' : _props$fileType,
+    maxSize = props.maxSize,
+    accept = props.accept,
+    onChange = props.onChange,
+    resProps = __rest(props, ["className", "btnType", "disabled", "theme", "value", "fileType", "maxSize", "accept", "onChange"]);
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    fileValue = _useState2[0],
+    setFileValue = _useState2[1];
+  var fileRef = useRef(null);
+  var pictrueType = accept || (fileType === 'image' ? ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'bmp', 'BMP', 'ico'] : ['xlsx', 'docx', 'xls', 'doc']); //图片类型
+  var loadUploadBtn = function loadUploadBtn() {
+    return /*#__PURE__*/React.createElement(LocaleReceiver, {
+      componentName: "UFileSelect"
+    }, function (contextLocale) {
+      return /*#__PURE__*/React.createElement(UButton, {
+        theme: theme,
+        disabled: disabled,
+        className: "".concat(CUSTOM_PREFIX, "-file-select-button"),
+        opeType: "preview",
+        onClick: function onClick() {
+          var _a;
+          return disabled ? undefined : (_a = fileRef === null || fileRef === void 0 ? void 0 : fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        },
+        title: "".concat(contextLocale.onlySupported, " ").concat(pictrueType.join('、'))
+      }, contextLocale.selectFile);
+    });
+  };
+  /**
+   *@method 本地导入图片文件
+    *@param {object} event 选择图片的对象
+    */
+  var handleChange = function handleChange(event) {
+    var files = event.target.files;
+    if (Object.is(files.length, 0)) {
+      return;
+    }
+    if (!Object.is(files, null)) {
+      var file = files[0];
+      if (maxSize && file.size >= maxSize) {
+        console.log('文件大小不得超过: ', maxSize);
+        return;
+      }
+      var imgTypeString = file.name;
+      var index = imgTypeString.lastIndexOf('.');
+      imgTypeString = imgTypeString.substring(index + 1);
+      //限制图片格式
+      if (file.name && pictrueType.indexOf(imgTypeString) < 0) {
+        return;
+      }
+      if (fileType === 'image') {
+        var reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = function (e) {
+          var _a;
+          setFileValue("url(".concat((_a = e.target) === null || _a === void 0 ? void 0 : _a.result, ")"));
+        };
+      } else {
+        if (fileRef && fileRef.current) {
+          setFileValue(file.name);
+        }
+      }
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  };
+  var wrapClassnames = classnames("".concat(CUSTOM_PREFIX, "-file-select-wrap"), _defineProperty({}, "".concat(CUSTOM_PREFIX, "-file-select-theme-").concat(theme || getTheme()), theme || getTheme()), className, _defineProperty({}, "".concat(CUSTOM_PREFIX, "-file-select-wrap-disabled"), disabled));
+  var imageBase = 'data:image/';
+  useEffect(function () {
+    setFileValue(value && value.startsWith(imageBase) ? "url(".concat(value, ")") : value);
+  }, [value]);
+  return /*#__PURE__*/React.createElement(LocaleReceiver, {
+    componentName: "UFileSelect"
+  }, function (contextLocale) {
+    return /*#__PURE__*/React.createElement("div", Object.assign({}, resProps, {
+      className: wrapClassnames
+    }), btnType === 'input' && (/*#__PURE__*/React.createElement("span", {
+      className: "".concat(CUSTOM_PREFIX, "-file-select-file"),
+      style: {
+        backgroundImage: "".concat(fileType === 'image' ? fileValue : '')
+      },
+      title: fileType === 'image' ? '' : (fileValue || '') + ''
+    }, fileType === 'image' ? '' : (fileValue || '') + '')), btnType === 'input' && (/*#__PURE__*/React.createElement("span", {
+      title: "".concat(contextLocale.onlySupported, " ").concat(pictrueType.join('、')),
+      className: "".concat(CUSTOM_PREFIX, "-file-select-oper"),
+      onClick: function onClick() {
+        var _a;
+        return disabled ? undefined : (_a = fileRef === null || fileRef === void 0 ? void 0 : fileRef.current) === null || _a === void 0 ? void 0 : _a.click();
+      }
+    }, "...")), btnType === 'button' && loadUploadBtn(), /*#__PURE__*/React.createElement("input", {
+      ref: fileRef,
+      type: "file",
+      style: {
+        display: 'none'
+      },
+      accept: _toConsumableArray(new Set(pictrueType.map(function (item) {
+        return '.' + item.toLowerCase();
+      }))).join(','),
+      onChange: function onChange(e) {
+        return handleChange(e);
+      }
+    }));
+  });
+};
+export default UFileSelect;

package/es/components/UFileSelect/locale/en_US.d.ts

@@ -0,0 +1,3 @@
+import { UFileSelectLocal } from './locale';
+declare const locale: UFileSelectLocal;
+export default locale;

package/es/components/UFileSelect/locale/en_US.js

@@ -0,0 +1,5 @@
+var locale = {
+  onlySupported: 'Only supported',
+  selectFile: 'Select file'
+};
+export default locale;

package/es/components/UFileSelect/locale/locale.d.ts

@@ -0,0 +1,4 @@
+export interface UFileSelectLocal{
+    onlySupported: string
+    selectFile: string
+}

package/es/components/UFileSelect/locale/zh_CN.d.ts

@@ -0,0 +1,3 @@
+import { UFileSelectLocal } from './locale';
+declare const locale: UFileSelectLocal;
+export default locale;

package/es/components/UFileSelect/locale/zh_CN.js

@@ -0,0 +1,5 @@
+var locale = {
+  onlySupported: '仅支持',
+  selectFile: '选择文件'
+};
+export default locale;

package/es/components/UFileSelect/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/components/UFileSelect/style/index.js

@@ -0,0 +1 @@
+import "./index.less";

package/es/components/UFileSelect/style/index.less

@@ -0,0 +1,14 @@
+@import './mixin.less';
+
+//按照less变量的值进行样式配置
+.@{ud-default-prefix}-file-select-wrap{
+    .ud-file-select-style(@u-theme-name);
+}
+//兼容U-DESIGN的theme属性
+.@{ud-default-prefix}-file-select-theme-light{
+    .ud-file-select-style(light);
+}
+//兼容U-DESIGN的theme属性
+.@{ud-default-prefix}-file-select-theme-dark{
+    .ud-file-select-style(dark);
+}

package/es/components/UFileSelect/style/mixin.less

@@ -0,0 +1,65 @@
+@import '../../../style/global.less';
+@import './theme.less';
+
+.ud-file-select-style(@u-theme:light){
+    display: inline-block;
+    height: 30px;
+    background: ~'@{@{u-theme}-file-select-bg}';
+    .@{ud-default-prefix}-file-select-file {
+        display: inline-block;
+        height: 100%;
+        line-height: 30px;
+        min-width: 120px;
+        text-align: center;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        border: 1px solid ~'@{@{u-theme}-file-select-text-border}';
+        border-right-color: transparent;
+        width: calc(~'100% - 30px');
+        color: ~'@{@{u-theme}-file-select-text-color}';
+        padding: 0 6px;
+        border-radius:@u-border-radius 0 0 @u-border-radius;
+        &:hover {
+            border-color: ~'@{@{u-theme}-file-select-text-hover-border}';
+        }
+    }
+    .@{ud-default-prefix}-file-select-oper {
+        width: 30px;
+        height: 100%;
+        display: inline-block;
+        vertical-align: top;
+        text-align: center;
+        border: 1px solid ~'@{@{u-theme}-file-select-oper-border}';
+        color: ~'@{@{u-theme}-file-select-oper-color}';
+        cursor: pointer;
+        border-radius: 0px @u-border-radius @u-border-radius 0;
+        &:hover {
+            border-color: ~'@{@{u-theme}-file-select-oper-hover-border}';
+            color: ~'@{@{u-theme}-file-select-oper-hover-color}';
+        }
+    }
+    .@{ud-default-prefix}-file-select-button {
+        vertical-align: top;
+    }
+    &.@{ud-default-prefix}-file-select-wrap-disabled .@{ud-default-prefix}-file-select-oper,
+    &.@{ud-default-prefix}-file-select-wrap-disabled .@{ud-default-prefix}-file-select-oper:hover,
+    &.@{ud-default-prefix}-file-select-wrap-disabled .@{ud-default-prefix}-file-select-oper:focus {
+        cursor: not-allowed;
+        background: ~'@{@{u-theme}-file-select-disabled-bg}';
+        border-color: ~'@{@{u-theme}-file-select-disabled-border}';
+        color: ~'@{@{u-theme}-file-select-disabled-color}';
+    }
+    &.@{ud-default-prefix}-file-select-wrap-disabled .@{ud-default-prefix}-file-select-file,
+    &.@{ud-default-prefix}-file-select-wrap-disabled .@{ud-default-prefix}-file-select-file:hover
+    &.@{ud-default-prefix}-file-select-wrap-disabled .@{ud-default-prefix}-file-select-file:focus{
+        cursor: not-allowed;
+        background: ~'@{@{u-theme}-file-select-disabled-bg}';
+        border-color: ~'@{@{u-theme}-file-select-disabled-border}';
+        color: ~'@{@{u-theme}-file-select-disabled-color}';
+        border-right-color: transparent;
+    }
+}

package/es/components/UFileSelect/style/theme.less

@@ -0,0 +1,24 @@
+/** light theme **/
+@light-file-select-bg: transparent;
+@light-file-select-text-border: @u-border-color;
+@light-file-select-text-color: @u-text-color;
+@light-file-select-text-hover-border: @u-primary-color;
+@light-file-select-oper-color: @u-border-color;
+@light-file-select-oper-border: @u-border-color;
+@light-file-select-oper-hover-color: @u-primary-color;
+@light-file-select-oper-hover-border: @u-primary-color;
+@light-file-select-disabled-color: @u-text-color-scroll;
+@light-file-select-disabled-border: @u-border-color;
+@light-file-select-disabled-bg: @u-disabled-bg-color;
+/** dark theme **/
+@dark-file-select-bg: rgba(26, 28, 38, 0.2);
+@dark-file-select-text-border: rgba(22, 130, 230, 0.6);
+@dark-file-select-text-color: @u-second-white;
+@dark-file-select-text-hover-border: #1682e6;
+@dark-file-select-oper-color: @u-second-white;
+@dark-file-select-oper-border: rgba(22, 130, 230, 0.6);
+@dark-file-select-oper-hover-color: rgba(22, 130, 230, 0.6);
+@dark-file-select-oper-hover-border: #1682e6;
+@dark-file-select-disabled-color: rgba(255, 255, 255, 0.25);
+@dark-file-select-disabled-border: rgba(81, 90, 110, 0.8);
+@dark-file-select-disabled-bg: rgba(84, 94, 113, 0.4);

package/es/components/UForm/ErrorList.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { ValidateStatus } from './FormItem';
+export interface ErrorListProps {
+    fieldId?: string;
+    help?: React.ReactNode;
+    helpStatus?: ValidateStatus;
+    errors?: React.ReactNode[];
+    warnings?: React.ReactNode[];
+    className?: string;
+    onVisibleChanged?: (visible: boolean) => void;
+}
+export default function ErrorList({ help, helpStatus, errors, warnings, className: rootClassName, fieldId, onVisibleChanged }: ErrorListProps): JSX.Element;

package/es/components/UForm/ErrorList.js

@@ -0,0 +1,91 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import classNames from 'classnames';
+import CSSMotion, { CSSMotionList } from 'rc-motion';
+import * as React from 'react';
+import { ConfigContext } from "../UConfigProvider";
+import collapseMotion from "../_util/motion";
+import { FormItemPrefixContext } from "./context";
+import useDebounce from "./hooks/useDebounce";
+var EMPTY_LIST = [];
+function toErrorEntity(error, errorStatus, prefix) {
+  var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  return {
+    key: typeof error === 'string' ? error : "".concat(prefix, "-").concat(index),
+    error: error,
+    errorStatus: errorStatus
+  };
+}
+export default function ErrorList(_ref) {
+  var help = _ref.help,
+    helpStatus = _ref.helpStatus,
+    _ref$errors = _ref.errors,
+    errors = _ref$errors === void 0 ? EMPTY_LIST : _ref$errors,
+    _ref$warnings = _ref.warnings,
+    warnings = _ref$warnings === void 0 ? EMPTY_LIST : _ref$warnings,
+    rootClassName = _ref.className,
+    fieldId = _ref.fieldId,
+    onVisibleChanged = _ref.onVisibleChanged;
+  var _React$useContext = React.useContext(FormItemPrefixContext),
+    prefixCls = _React$useContext.prefixCls;
+  var _React$useContext2 = React.useContext(ConfigContext),
+    getPrefixCls = _React$useContext2.getPrefixCls;
+  var baseClassName = "".concat(prefixCls, "-item-explain");
+  var rootPrefixCls = getPrefixCls();
+  // We have to debounce here again since somewhere use ErrorList directly still need no shaking
+  // ref: https://github.com/ant-design/ant-design/issues/36336
+  var debounceErrors = useDebounce(errors);
+  var debounceWarnings = useDebounce(warnings);
+  var fullKeyList = React.useMemo(function () {
+    if (help !== undefined && help !== null) {
+      return [toErrorEntity(help, helpStatus, 'help')];
+    }
+    return [].concat(_toConsumableArray(debounceErrors.map(function (error, index) {
+      return toErrorEntity(error, 'error', 'error', index);
+    })), _toConsumableArray(debounceWarnings.map(function (warning, index) {
+      return toErrorEntity(warning, 'warning', 'warning', index);
+    })));
+  }, [help, helpStatus, debounceErrors, debounceWarnings]);
+  var helpProps = {};
+  if (fieldId) {
+    helpProps.id = "".concat(fieldId, "_help");
+  }
+  return /*#__PURE__*/React.createElement(CSSMotion, {
+    motionDeadline: collapseMotion.motionDeadline,
+    motionName: "".concat(rootPrefixCls, "-show-help"),
+    visible: !!fullKeyList.length,
+    onVisibleChanged: onVisibleChanged
+  }, function (holderProps) {
+    var holderClassName = holderProps.className,
+      holderStyle = holderProps.style;
+    return /*#__PURE__*/React.createElement("div", Object.assign({}, helpProps, {
+      className: classNames(baseClassName, holderClassName, rootClassName),
+      style: holderStyle,
+      role: "alert"
+    }), /*#__PURE__*/React.createElement(CSSMotionList, Object.assign({
+      keys: fullKeyList
+    }, collapseMotion, {
+      motionName: "".concat(rootPrefixCls, "-show-help-item"),
+      component: false
+    }), function (itemProps) {
+      var key = itemProps.key,
+        error = itemProps.error,
+        errorStatus = itemProps.errorStatus,
+        itemClassName = itemProps.className,
+        itemStyle = itemProps.style;
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        className: classNames(itemClassName, _defineProperty({}, "".concat(baseClassName, "-").concat(errorStatus), errorStatus)),
+        style: itemStyle
+      }, error);
+    }));
+  });
+}

package/es/components/UForm/Form.d.ts

@@ -0,0 +1,59 @@
+import { List, useWatch } from 'rc-field-form';
+import type { FormProps as RcFormProps } from 'rc-field-form/lib/Form';
+import * as React from 'react';
+import type { Options } from 'scroll-into-view-if-needed';
+import type { SizeType } from '../UConfigProvider/SizeContext';
+import type { ColProps } from '../UGrid/col';
+import useForm, { FormInstance } from './hooks/useForm';
+import type { FormLabelAlign } from './interface';
+export type RequiredMark = boolean | 'optional';
+export type FormLayout = 'horizontal' | 'inline' | 'vertical';
+export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form'> {
+    theme?: 'dark' | 'light';
+    prefixCls?: string;
+    colon?: boolean;
+    name?: string;
+    layout?: FormLayout;
+    labelAlign?: FormLabelAlign;
+    labelWrap?: boolean;
+    labelCol?: ColProps;
+    wrapperCol?: ColProps;
+    form?: FormInstance<Values>;
+    size?: SizeType;
+    disabled?: boolean;
+    scrollToFirstError?: Options | boolean;
+    requiredMark?: RequiredMark;
+    onlyShow?: boolean;
+    /** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */
+    hideRequiredMark?: boolean;
+    /** 内部控件百分百适配子表单 */
+    itemAuto?: boolean;
+    /** 是否支持grid布局 */
+    grid?: {
+        /** 最大列数  默认4列 */
+        maxColumnNum: number;
+        /**
+         * 是否自适应列数  默认true
+         * true：当容器宽度不够时，会自适应减少列数
+         * false: 列数不变，缩小每列宽度
+         */
+        autoColumn?: boolean;
+        /** 每列label宽度 默认85px */
+        labelSize?: number | number[];
+        /** 输入框最大、最小值宽度 */
+        valueSize?: {
+            /** 输入框最小值宽度  默认160px */
+            min?: number;
+            /** 输入框最大宽度  默认210px */
+            max?: number;
+        };
+    } | boolean;
+}
+declare const Form: <Values = any>(props: FormProps<Values> & {
+    children?: React.ReactNode;
+} & {
+    ref?: React.Ref<FormInstance<Values>> | undefined;
+}) => React.ReactElement;
+export { useForm, List, useWatch };
+export type { FormInstance };
+export default Form;