From 8677e38d1aea3423cf4053f6b71eb17c998562e9 Mon Sep 17 00:00:00 2001 From: janryWang Date: Fri, 22 Feb 2019 19:11:29 +0800 Subject: [PATCH] refactor(gitignore): remove lib --- .gitignore | 1 - packages/antd/lib/components/button.js | 41 + .../antd/lib/components/formButtonGroup.js | 173 +++++ packages/antd/lib/components/grid.js | 207 +++++ packages/antd/lib/components/layout.js | 233 ++++++ packages/antd/lib/fields/array.js | 285 +++++++ packages/antd/lib/fields/boolean.js | 12 + packages/antd/lib/fields/checkbox.js | 13 + packages/antd/lib/fields/date.js | 160 ++++ packages/antd/lib/fields/number.js | 12 + packages/antd/lib/fields/password.js | 328 ++++++++ packages/antd/lib/fields/radio.js | 13 + packages/antd/lib/fields/range.js | 60 ++ packages/antd/lib/fields/rating.js | 11 + packages/antd/lib/fields/string.js | 12 + packages/antd/lib/fields/table.js | 267 +++++++ packages/antd/lib/fields/time.js | 36 + packages/antd/lib/fields/transfer.js | 11 + packages/antd/lib/fields/upload.js | 267 +++++++ packages/antd/lib/form.js | 379 +++++++++ packages/antd/lib/index.js | 69 ++ packages/antd/lib/locale.js | 11 + packages/antd/lib/utils.js | 297 +++++++ packages/antd/package.json | 2 +- packages/core/lib/field.js | 328 ++++++++ packages/core/lib/form.js | 724 ++++++++++++++++++ packages/core/lib/index.js | 91 +++ packages/core/lib/path.js | 65 ++ packages/core/lib/utils.js | 123 +++ packages/core/package.json | 2 +- packages/next/lib/components/button.js | 49 ++ .../next/lib/components/formButtonGroup.js | 173 +++++ packages/next/lib/components/layout.js | 232 ++++++ packages/next/lib/fields/array.js | 261 +++++++ packages/next/lib/fields/boolean.js | 12 + packages/next/lib/fields/checkbox.js | 13 + packages/next/lib/fields/date.js | 53 ++ packages/next/lib/fields/number.js | 12 + packages/next/lib/fields/password.js | 326 ++++++++ packages/next/lib/fields/radio.js | 13 + packages/next/lib/fields/range.js | 16 + packages/next/lib/fields/rating.js | 11 + packages/next/lib/fields/string.js | 12 + packages/next/lib/fields/table.js | 267 +++++++ packages/next/lib/fields/time.js | 12 + packages/next/lib/fields/transfer.js | 11 + packages/next/lib/fields/upload.js | 215 ++++++ packages/next/lib/form.js | 373 +++++++++ packages/next/lib/index.js | 69 ++ packages/next/lib/locale.js | 11 + packages/next/lib/utils.js | 150 ++++ packages/next/package.json | 2 +- packages/react/lib/decorators/connect.js | 177 +++++ packages/react/lib/decorators/markup.js | 89 +++ packages/react/lib/index.js | 112 +++ packages/react/lib/shared/broadcast.js | 167 ++++ packages/react/lib/shared/context.js | 20 + packages/react/lib/shared/core.js | 174 +++++ packages/react/lib/shared/mutators.js | 80 ++ packages/react/lib/shared/object.js | 44 ++ packages/react/lib/shared/render.js | 39 + packages/react/lib/shared/virtualbox.js | 124 +++ packages/react/lib/state/field.js | 217 ++++++ packages/react/lib/state/form.js | 307 ++++++++ packages/react/lib/state/index.js | 10 + packages/react/lib/utils.js | 64 ++ packages/react/package.json | 2 +- packages/utils/lib/accessor.js | 540 +++++++++++++ packages/utils/lib/array.js | 130 ++++ packages/utils/lib/broadcast.js | 91 +++ packages/utils/lib/clone.js | 75 ++ packages/utils/lib/compare.js | 109 +++ packages/utils/lib/index.js | 66 ++ packages/utils/lib/isEmpty.js | 81 ++ packages/utils/lib/lru.js | 394 ++++++++++ packages/utils/lib/schema.js | 122 +++ packages/utils/lib/types.js | 27 + packages/utils/package.json | 2 +- packages/validator/lib/index.js | 119 +++ packages/validator/lib/locale/index.js | 43 ++ packages/validator/lib/message.js | 52 ++ packages/validator/lib/utils.js | 63 ++ packages/validator/lib/validators/custom.js | 14 + packages/validator/lib/validators/format.js | 30 + packages/validator/lib/validators/index.js | 58 ++ packages/validator/lib/validators/pattern.js | 24 + packages/validator/lib/validators/regexp.js | 55 ++ packages/validator/lib/validators/required.js | 16 + packages/validator/package.json | 2 +- 89 files changed, 10258 insertions(+), 7 deletions(-) create mode 100644 packages/antd/lib/components/button.js create mode 100644 packages/antd/lib/components/formButtonGroup.js create mode 100644 packages/antd/lib/components/grid.js create mode 100644 packages/antd/lib/components/layout.js create mode 100644 packages/antd/lib/fields/array.js create mode 100644 packages/antd/lib/fields/boolean.js create mode 100644 packages/antd/lib/fields/checkbox.js create mode 100644 packages/antd/lib/fields/date.js create mode 100644 packages/antd/lib/fields/number.js create mode 100644 packages/antd/lib/fields/password.js create mode 100644 packages/antd/lib/fields/radio.js create mode 100644 packages/antd/lib/fields/range.js create mode 100644 packages/antd/lib/fields/rating.js create mode 100644 packages/antd/lib/fields/string.js create mode 100644 packages/antd/lib/fields/table.js create mode 100644 packages/antd/lib/fields/time.js create mode 100644 packages/antd/lib/fields/transfer.js create mode 100644 packages/antd/lib/fields/upload.js create mode 100644 packages/antd/lib/form.js create mode 100644 packages/antd/lib/index.js create mode 100644 packages/antd/lib/locale.js create mode 100644 packages/antd/lib/utils.js create mode 100644 packages/core/lib/field.js create mode 100644 packages/core/lib/form.js create mode 100644 packages/core/lib/index.js create mode 100644 packages/core/lib/path.js create mode 100644 packages/core/lib/utils.js create mode 100644 packages/next/lib/components/button.js create mode 100644 packages/next/lib/components/formButtonGroup.js create mode 100644 packages/next/lib/components/layout.js create mode 100644 packages/next/lib/fields/array.js create mode 100644 packages/next/lib/fields/boolean.js create mode 100644 packages/next/lib/fields/checkbox.js create mode 100644 packages/next/lib/fields/date.js create mode 100644 packages/next/lib/fields/number.js create mode 100644 packages/next/lib/fields/password.js create mode 100644 packages/next/lib/fields/radio.js create mode 100644 packages/next/lib/fields/range.js create mode 100644 packages/next/lib/fields/rating.js create mode 100644 packages/next/lib/fields/string.js create mode 100644 packages/next/lib/fields/table.js create mode 100644 packages/next/lib/fields/time.js create mode 100644 packages/next/lib/fields/transfer.js create mode 100644 packages/next/lib/fields/upload.js create mode 100644 packages/next/lib/form.js create mode 100644 packages/next/lib/index.js create mode 100644 packages/next/lib/locale.js create mode 100644 packages/next/lib/utils.js create mode 100644 packages/react/lib/decorators/connect.js create mode 100644 packages/react/lib/decorators/markup.js create mode 100644 packages/react/lib/index.js create mode 100644 packages/react/lib/shared/broadcast.js create mode 100644 packages/react/lib/shared/context.js create mode 100644 packages/react/lib/shared/core.js create mode 100644 packages/react/lib/shared/mutators.js create mode 100644 packages/react/lib/shared/object.js create mode 100644 packages/react/lib/shared/render.js create mode 100644 packages/react/lib/shared/virtualbox.js create mode 100644 packages/react/lib/state/field.js create mode 100644 packages/react/lib/state/form.js create mode 100644 packages/react/lib/state/index.js create mode 100644 packages/react/lib/utils.js create mode 100644 packages/utils/lib/accessor.js create mode 100644 packages/utils/lib/array.js create mode 100644 packages/utils/lib/broadcast.js create mode 100644 packages/utils/lib/clone.js create mode 100644 packages/utils/lib/compare.js create mode 100644 packages/utils/lib/index.js create mode 100644 packages/utils/lib/isEmpty.js create mode 100644 packages/utils/lib/lru.js create mode 100644 packages/utils/lib/schema.js create mode 100644 packages/utils/lib/types.js create mode 100644 packages/validator/lib/index.js create mode 100644 packages/validator/lib/locale/index.js create mode 100644 packages/validator/lib/message.js create mode 100644 packages/validator/lib/utils.js create mode 100644 packages/validator/lib/validators/custom.js create mode 100644 packages/validator/lib/validators/format.js create mode 100644 packages/validator/lib/validators/index.js create mode 100644 packages/validator/lib/validators/pattern.js create mode 100644 packages/validator/lib/validators/regexp.js create mode 100644 packages/validator/lib/validators/required.js diff --git a/.gitignore b/.gitignore index 9f507b706c0..4f0e908337b 100644 --- a/.gitignore +++ b/.gitignore @@ -4,7 +4,6 @@ npm-debug.log lerna-debug.log npm-debug.log* -lib/ dist/ build/ coverage/ diff --git a/packages/antd/lib/components/button.js b/packages/antd/lib/components/button.js new file mode 100644 index 00000000000..cc702632971 --- /dev/null +++ b/packages/antd/lib/components/button.js @@ -0,0 +1,41 @@ +"use strict"; + +exports.__esModule = true; +exports.Reset = exports.Submit = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _antd = require("antd"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +var Submit = function Submit(props) { + return _react.default.createElement(_react2.FormConsumer, null, function (_ref) { + var status = _ref.status, + schema = _ref.schema; + return _react.default.createElement(_antd.Button, _extends({ + type: "primary", + htmlType: "submit" + }, props, { + loading: status === 'submitting' + }), props.children || '提交'); + }); +}; + +exports.Submit = Submit; + +var Reset = function Reset(props) { + return _react.default.createElement(_react2.FormConsumer, null, function (_ref2) { + var status = _ref2.status, + reset = _ref2.reset; + return _react.default.createElement(_antd.Button, _extends({}, props, { + onClick: reset + }), props.children || '重置'); + }); +}; + +exports.Reset = Reset; \ No newline at end of file diff --git a/packages/antd/lib/components/formButtonGroup.js b/packages/antd/lib/components/formButtonGroup.js new file mode 100644 index 00000000000..aa5ce1400aa --- /dev/null +++ b/packages/antd/lib/components/formButtonGroup.js @@ -0,0 +1,173 @@ +"use strict"; + +exports.__esModule = true; +exports.FormButtonGroup = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _reactDom = _interopRequireDefault(require("react-dom")); + +var _grid = require("./grid"); + +var _form = require("../form"); + +var _reactStikky = _interopRequireDefault(require("react-stikky")); + +var _classnames = _interopRequireDefault(require("classnames")); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +var _class, _temp2; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n ", "\n &.is-inline {\n display: inline-block;\n flex-grow: 3;\n }\n .button-group {\n .inline {\n display: inline-block;\n .inline-view {\n & > * {\n margin-right: 10px;\n margin-left: 0px;\n display: inline-block;\n }\n & > *:last-child {\n margin-right: 0 !important;\n }\n }\n }\n }\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +var getAlign = function getAlign(align) { + if (align === 'start' || align === 'end') return align; + if (align === 'left' || align === 'top') return 'start'; + if (align === 'right' || align === 'bottom') return 'end'; + return align; +}; + +var isElementInViewport = function isElementInViewport(rect, _temp) { + var _ref = _temp === void 0 ? {} : _temp, + _ref$offset = _ref.offset, + offset = _ref$offset === void 0 ? 0 : _ref$offset, + _ref$threshold = _ref.threshold, + threshold = _ref$threshold === void 0 ? 0 : _ref$threshold; + + var top = rect.top, + right = rect.right, + bottom = rect.bottom, + left = rect.left, + width = rect.width, + height = rect.height; + var intersection = { + t: bottom, + r: window.innerWidth - left, + b: window.innerHeight - top, + l: right + }; + var elementThreshold = { + x: threshold * width, + y: threshold * height + }; + return intersection.t >= (offset.top || offset + elementThreshold.y) && intersection.r >= (offset.right || offset + elementThreshold.x) && intersection.b >= (offset.bottom || offset + elementThreshold.y) && intersection.l >= (offset.left || offset + elementThreshold.x); +}; + +var FormButtonGroup = (0, _styledComponents.default)((_temp2 = _class = +/*#__PURE__*/ +function (_Component) { + _inheritsLoose(FormButtonGroup, _Component); + + function FormButtonGroup() { + return _Component.apply(this, arguments) || this; + } + + var _proto = FormButtonGroup.prototype; + + _proto.renderChildren = function renderChildren() { + var _this$props = this.props, + children = _this$props.children, + itemStyle = _this$props.itemStyle, + offset = _this$props.offset, + span = _this$props.span; + return _react.default.createElement("div", { + className: "button-group" + }, _react.default.createElement(_grid.Row, null, _react.default.createElement(_grid.Col, { + span: span + }, _react.default.createElement(_grid.Col, { + offset: offset, + className: "inline" + }, _react.default.createElement("div", { + className: "inline-view", + style: itemStyle + }, children))))); + }; + + _proto.getStickyBoundaryHandler = function getStickyBoundaryHandler(ref) { + var _this = this; + + return function () { + _this.formNode = _this.formNode || _reactDom.default.findDOMNode(ref.current); + + if (_this.formNode) { + return isElementInViewport(_this.formNode.getBoundingClientRect()); + } + + return true; + }; + }; + + _proto.render = function render() { + var _this2 = this; + + var _this$props2 = this.props, + sticky = _this$props2.sticky, + style = _this$props2.style, + className = _this$props2.className; + + var content = _react.default.createElement(_form.FormConsumer, null, function (_temp3) { + var _ref2 = _temp3 === void 0 ? {} : _temp3, + inline = _ref2.inline; + + return _react.default.createElement("div", { + className: (0, _classnames.default)(className, { + 'is-inline': !!inline + }), + style: style + }, _this2.renderChildren()); + }); + + if (sticky) { + return _react.default.createElement(_form.FormConsumer, null, function (_temp4) { + var _ref3 = _temp4 === void 0 ? {} : _temp4, + inline = _ref3.inline, + FormRef = _ref3.FormRef; + + if (!FormRef) return; + return _react.default.createElement(_reactStikky.default, { + edge: "bottom", + triggerDistance: _this2.props.triggerDistance, + offsetDistance: _this2.props.offsetDistance, + zIndex: _this2.props.zIndex, + getStickyBoundary: _this2.getStickyBoundaryHandler(FormRef), + style: { + borderTop: '1px solid #eee', + background: style && style.background || '#fff', + padding: style && style.padding || '20px 0' + } + }, _react.default.createElement("div", { + className: className, + style: style + }, content)); + }); + } + + return content; + }; + + return FormButtonGroup; +}(_react.Component), _defineProperty(_class, "defaultProps", { + span: 24 +}), _temp2))(_templateObject(), function (props) { + return props.align ? "display:flex;justify-content: " + getAlign(props.align) : ''; +}); +exports.FormButtonGroup = FormButtonGroup; \ No newline at end of file diff --git a/packages/antd/lib/components/grid.js b/packages/antd/lib/components/grid.js new file mode 100644 index 00000000000..bcd0043b3a3 --- /dev/null +++ b/packages/antd/lib/components/grid.js @@ -0,0 +1,207 @@ +"use strict"; + +exports.__esModule = true; +exports.Col = exports.Row = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _classnames = _interopRequireDefault(require("classnames")); + +var _utils = require("@uform/utils"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var Row = +/*#__PURE__*/ +function (_Component) { + _inheritsLoose(Row, _Component); + + function Row() { + return _Component.apply(this, arguments) || this; + } + + var _proto = Row.prototype; + + _proto.render = function render() { + var _extends2, _extends3; + + /* eslint-disable no-unused-vars */ + var _this$props = this.props, + prefix = _this$props.prefix, + pure = _this$props.pure, + wrap = _this$props.wrap, + fixed = _this$props.fixed, + gutter = _this$props.gutter, + fixedWidth = _this$props.fixedWidth, + align = _this$props.align, + justify = _this$props.justify, + hidden = _this$props.hidden, + className = _this$props.className, + Tag = _this$props.component, + children = _this$props.children, + others = _objectWithoutPropertiesLoose(_this$props, ["prefix", "pure", "wrap", "fixed", "gutter", "fixedWidth", "align", "justify", "hidden", "className", "component", "children"]); + /* eslint-enable no-unused-vars */ + + + var hiddenClassObj; + + if (hidden === true) { + var _hiddenClassObj; + + hiddenClassObj = (_hiddenClassObj = {}, _hiddenClassObj[prefix + "row-hidden"] = true, _hiddenClassObj); + } else if (typeof hidden === 'string') { + var _hiddenClassObj2; + + hiddenClassObj = (_hiddenClassObj2 = {}, _hiddenClassObj2[prefix + "row-" + hidden + "-hidden"] = !!hidden, _hiddenClassObj2); + } else if (Array.isArray(hidden)) { + hiddenClassObj = hidden.reduce(function (ret, point) { + ret[prefix + "row-" + point + "-hidden"] = !!point; + return ret; + }, {}); + } + + var newClassName = (0, _classnames.default)(_extends((_extends2 = {}, _extends2[prefix + "row"] = true, _extends2[prefix + "row-wrap"] = wrap, _extends2[prefix + "row-fixed"] = fixed, _extends2[prefix + "row-fixed-" + fixedWidth] = !!fixedWidth, _extends2[prefix + "row-justify-" + justify] = !!justify, _extends2[prefix + "row-align-" + align] = !!align, _extends2), hiddenClassObj, (_extends3 = {}, _extends3[className] = !!className, _extends3))); + var newChildren = (0, _utils.toArr)(children); + var gutterNumber = parseInt(gutter, 10); + + if (gutterNumber !== 0) { + var halfGutterString = gutterNumber / 2 + "px"; + others.style = _extends({ + marginLeft: "-" + halfGutterString, + marginRight: "-" + halfGutterString + }, others.style || {}); + newChildren = _react.Children.map(children, function (child, index) { + if (child && child.type && typeof child.type === 'function' && child.type.isNextCol) { + var newChild = (0, _react.cloneElement)(child, { + style: _extends({ + paddingLeft: halfGutterString, + paddingRight: halfGutterString + }, child.style || {}) + }); + return newChild; + } + + return child; + }); + } + + return _react.default.createElement(Tag, _extends({ + role: "row", + className: newClassName + }, others), newChildren); + }; + + return Row; +}(_react.Component); + +exports.Row = Row; + +_defineProperty(Row, "defaultProps", { + prefix: 'ant-', + pure: false, + fixed: false, + gutter: 0, + wrap: false, + component: 'div' +}); + +var breakPoints = ['xxs', 'xs', 's', 'm', 'l', 'xl']; + +var Col = +/*#__PURE__*/ +function (_Component2) { + _inheritsLoose(Col, _Component2); + + function Col() { + return _Component2.apply(this, arguments) || this; + } + + var _proto2 = Col.prototype; + + _proto2.render = function render() { + var _this = this, + _extends4, + _extends5; + + /* eslint-disable no-unused-vars */ + var _this$props2 = this.props, + prefix = _this$props2.prefix, + pure = _this$props2.pure, + span = _this$props2.span, + offset = _this$props2.offset, + fixedSpan = _this$props2.fixedSpan, + fixedOffset = _this$props2.fixedOffset, + hidden = _this$props2.hidden, + align = _this$props2.align, + xxs = _this$props2.xxs, + xs = _this$props2.xs, + s = _this$props2.s, + m = _this$props2.m, + l = _this$props2.l, + xl = _this$props2.xl, + Tag = _this$props2.component, + className = _this$props2.className, + children = _this$props2.children, + others = _objectWithoutPropertiesLoose(_this$props2, ["prefix", "pure", "span", "offset", "fixedSpan", "fixedOffset", "hidden", "align", "xxs", "xs", "s", "m", "l", "xl", "component", "className", "children"]); + /* eslint-enable no-unused-vars */ + + + var pointClassObj = breakPoints.reduce(function (ret, point) { + var pointProps = {}; + + if (typeof _this.props[point] === 'object') { + pointProps = _this.props[point]; + } else { + pointProps.span = _this.props[point]; + } + + ret[prefix + "col-" + point + "-" + pointProps.span] = !!pointProps.span; + ret[prefix + "col-" + point + "-offset-" + pointProps.offset] = !!pointProps.offset; + return ret; + }, {}); + var hiddenClassObj; + + if (hidden === true) { + var _hiddenClassObj3; + + hiddenClassObj = (_hiddenClassObj3 = {}, _hiddenClassObj3[prefix + "col-hidden"] = true, _hiddenClassObj3); + } else if (typeof hidden === 'string') { + var _hiddenClassObj4; + + hiddenClassObj = (_hiddenClassObj4 = {}, _hiddenClassObj4[prefix + "col-" + hidden + "-hidden"] = !!hidden, _hiddenClassObj4); + } else if (Array.isArray(hidden)) { + hiddenClassObj = hidden.reduce(function (ret, point) { + ret[prefix + "col-" + point + "-hidden"] = !!point; + return ret; + }, {}); + } + + var classes = (0, _classnames.default)(_extends((_extends4 = {}, _extends4[prefix + "col"] = true, _extends4[prefix + "col-" + span] = !!span, _extends4[prefix + "col-fixed-" + fixedSpan] = !!fixedSpan, _extends4[prefix + "col-offset-" + offset] = !!offset, _extends4[prefix + "col-offset-fixed-" + fixedOffset] = !!fixedOffset, _extends4[prefix + "col-" + align] = !!align, _extends4), pointClassObj, hiddenClassObj, (_extends5 = {}, _extends5[className] = className, _extends5))); + return _react.default.createElement(Tag, _extends({ + role: "gridcell", + className: classes + }, others), children); + }; + + return Col; +}(_react.Component); + +exports.Col = Col; + +_defineProperty(Col, "isNextCol", true); + +_defineProperty(Col, "defaultProps", { + prefix: 'ant-', + pure: false, + component: 'div' +}); \ No newline at end of file diff --git a/packages/antd/lib/components/layout.js b/packages/antd/lib/components/layout.js new file mode 100644 index 00000000000..5d2a7e630d3 --- /dev/null +++ b/packages/antd/lib/components/layout.js @@ -0,0 +1,233 @@ +"use strict"; + +exports.__esModule = true; +exports.FormBlock = exports.FormCard = exports.FormItemGrid = exports.FormLayout = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _react2 = require("@uform/react"); + +var _utils = require("@uform/utils"); + +var _grid = require("./grid"); + +var _antd = require("antd"); + +var _form = require("../form"); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +var _classnames = _interopRequireDefault(require("classnames")); + +var _class2, _temp, _class3, _temp2; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _templateObject2() { + var data = _taggedTemplateLiteralLoose(["\n margin-bottom: 0px;\n .ant-card-body {\n padding-top: 20px;\n padding-bottom: 0 !important;\n }\n &.ant-card {\n border: none;\n padding: 0 15px;\n padding-bottom: 15px;\n display: block;\n box-shadow: none;\n }\n .ant-card-head {\n padding: 0 !important;\n min-height: 24px;\n font-weight: normal;\n }\n .ant-card-head-title {\n padding: 0;\n }\n "]); + + _templateObject2 = function _templateObject2() { + return data; + }; + + return data; +} + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n margin-bottom: 30px;\n .ant-card-body {\n padding-top: 30px;\n padding-bottom: 0 !important;\n }\n &.ant-card {\n display: block;\n margin-bottom: 30px;\n }\n "]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +var normalizeCol = function normalizeCol(col, _default) { + if (_default === void 0) { + _default = 0; + } + + if (!col) return _default; + return typeof col === 'object' ? col : { + span: col + }; +}; + +var FormLayout = (0, _react2.createVirtualBox)('layout', function (_ref) { + var children = _ref.children, + props = _objectWithoutPropertiesLoose(_ref, ["children"]); + + return _react.default.createElement(_form.FormConsumer, null, function (value) { + var newValue = _extends({}, value, props); + + var child = newValue.inline || newValue.className || newValue.style ? _react.default.createElement("div", { + className: (0, _classnames.default)(newValue.className, { + 'ant-form ant-inline': !!newValue.inline + }), + style: newValue.style + }, children) : children; + return _react.default.createElement(_form.FormProvider, { + value: newValue + }, child); + }); +}); +exports.FormLayout = FormLayout; +var FormItemGrid = (0, _react2.createVirtualBox)('grid', +/*#__PURE__*/ +function (_Component) { + _inheritsLoose(_class, _Component); + + function _class() { + return _Component.apply(this, arguments) || this; + } + + var _proto = _class.prototype; + + _proto.renderFormItem = function renderFormItem(children) { + var _this$props = this.props, + title = _this$props.title, + description = _this$props.description, + name = _this$props.name, + help = _this$props.help, + extra = _this$props.extra, + others = _objectWithoutPropertiesLoose(_this$props, ["title", "description", "name", "help", "extra"]); + + return _react.default.createElement(_form.FormConsumer, {}, function (_ref2) { + var labelAlign = _ref2.labelAlign, + labelTextAlign = _ref2.labelTextAlign, + labelCol = _ref2.labelCol, + wrapperCol = _ref2.wrapperCol, + size = _ref2.size, + autoAddColon = _ref2.autoAddColon; + return _react.default.createElement(_form.FormItem, _extends({ + labelAlign: labelAlign, + labelTextAlign: labelTextAlign, + labelCol: labelCol, + wrapperCol: wrapperCol, + autoAddColon: autoAddColon, + size: size + }, others, { + label: title, + noMinHeight: true, + id: name, + extra: description, + help: help + }), children); + }); + }; + + _proto.renderGrid = function renderGrid() { + var _this$props2 = this.props, + children = _this$props2.children, + cols = _this$props2.cols, + title = _this$props2.title, + description = _this$props2.description, + help = _this$props2.help, + extra = _this$props2.extra, + props = _objectWithoutPropertiesLoose(_this$props2, ["children", "cols", "title", "description", "help", "extra"]); + + children = (0, _utils.toArr)(children); + cols = (0, _utils.toArr)(cols).map(function (col) { + return normalizeCol(col); + }); + var childNum = children.length; + + if (cols.length < childNum) { + var offset = childNum - cols.length; + var lastSpan = 24 - cols.reduce(function (buf, col) { + return buf + Number(col.span ? col.span : 0) + Number(col.offset ? col.offset : 0); + }, 0); + + for (var i = 0; i < offset; i++) { + cols.push(parseInt(lastSpan / offset)); + } + } + + cols = (0, _utils.toArr)(cols).map(function (col) { + return normalizeCol(col); + }); + return _react.default.createElement(_grid.Row, props, children.reduce(function (buf, child, key) { + return child ? buf.concat(_react.default.createElement(_grid.Col, _extends({ + key: key + }, cols[key]), child)) : buf; + }, [])); + }; + + _proto.render = function render() { + var title = this.props.title; + + if (title) { + return this.renderFormItem(this.renderGrid()); + } else { + return this.renderGrid(); + } + }; + + return _class; +}(_react.Component)); +exports.FormItemGrid = FormItemGrid; +var FormCard = (0, _react2.createVirtualBox)('card', (0, _styledComponents.default)((_temp = _class2 = +/*#__PURE__*/ +function (_Component2) { + _inheritsLoose(_class2, _Component2); + + function _class2() { + return _Component2.apply(this, arguments) || this; + } + + var _proto2 = _class2.prototype; + + _proto2.render = function render() { + var _this$props3 = this.props, + children = _this$props3.children, + className = _this$props3.className, + props = _objectWithoutPropertiesLoose(_this$props3, ["children", "className"]); + + return _react.default.createElement(_antd.Card, _extends({ + className: className + }, props), children); + }; + + return _class2; +}(_react.Component), _defineProperty(_class2, "defaultProps", {// bodyHeight: 'auto' +}), _temp))(_templateObject())); +exports.FormCard = FormCard; +var FormBlock = (0, _react2.createVirtualBox)('block', (0, _styledComponents.default)((_temp2 = _class3 = +/*#__PURE__*/ +function (_Component3) { + _inheritsLoose(_class3, _Component3); + + function _class3() { + return _Component3.apply(this, arguments) || this; + } + + var _proto3 = _class3.prototype; + + _proto3.render = function render() { + var _this$props4 = this.props, + children = _this$props4.children, + className = _this$props4.className, + props = _objectWithoutPropertiesLoose(_this$props4, ["children", "className"]); + + return _react.default.createElement(_antd.Card, _extends({ + className: className + }, props), children); + }; + + return _class3; +}(_react.Component), _defineProperty(_class3, "defaultProps", {// bodyHeight: 'auto' +}), _temp2))(_templateObject2())); +exports.FormBlock = FormBlock; \ No newline at end of file diff --git a/packages/antd/lib/fields/array.js b/packages/antd/lib/fields/array.js new file mode 100644 index 00000000000..088d9efc6e1 --- /dev/null +++ b/packages/antd/lib/fields/array.js @@ -0,0 +1,285 @@ +"use strict"; + +exports.__esModule = true; +exports.ArrayField = exports.TextButton = exports.CircleButton = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _utils = require("@uform/utils"); + +var _antd = require("antd"); + +var _styledComponents = _interopRequireWildcard(require("styled-components")); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _templateObject4() { + var data = _taggedTemplateLiteralLoose(["\n border: 1px solid #eee;\n min-width: 400px;\n .array-item {\n padding: 20px;\n padding-bottom: 0;\n padding-top: 30px;\n border-bottom: 1px solid #eee;\n position: relative;\n &:nth-child(even) {\n background: #fafafa;\n }\n .array-index {\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n span {\n position: absolute;\n color: rgb(255, 255, 255);\n z-index: 1;\n font-size: 12px;\n top: 3px;\n left: 3px;\n line-height: initial;\n }\n &::after {\n content: '';\n display: block;\n border-top: 20px solid transparent;\n border-left: 20px solid transparent;\n border-bottom: 20px solid transparent;\n border-right: 20px solid #888;\n transform: rotate(45deg);\n position: absolute;\n z-index: 0;\n top: -20px;\n left: -20px;\n }\n }\n .array-item-operator {\n display: flex;\n border-top: 1px solid #eee;\n padding-top: 20px;\n }\n }\n .array-empty-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n .array-empty {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 20px;\n img {\n display: block;\n height: 80px;\n }\n .ant-btn-text {\n color: #999;\n }\n }\n }\n .array-item-wrapper {\n margin: 0 -20px;\n }\n .array-item-addition {\n padding: 10px 20px;\n line-height: normal !important;\n background: #fbfbfb;\n .ant-btn-text {\n color: #888;\n }\n }\n "]); + + _templateObject4 = function _templateObject4() { + return data; + }; + + return data; +} + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _templateObject3() { + var data = _taggedTemplateLiteralLoose(["\n display: inline-block;\n width: auto;\n "]); + + _templateObject3 = function _templateObject3() { + return data; + }; + + return data; +} + +function _templateObject2() { + var data = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 20px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n ", "\n"]); + + _templateObject2 = function _templateObject2() { + return data; + }; + + return data; +} + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n width:30px;\n height:30px;\n margin-right:10px;\n border-radius: 100px;\n border: 1px solid #eee;\n margin-bottom:20px;\n cursor:pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n &:hover{\n background:#f7f4f4;\n }\n}\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +var CircleButton = _styledComponents.default.div(_templateObject()); + +exports.CircleButton = CircleButton; + +var TextButton = _styledComponents.default.div(_templateObject2(), function (props) { + return props.inline && (0, _styledComponents.css)(_templateObject3()); +}); + +exports.TextButton = TextButton; + +var ArrayField = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(ArrayField, _React$Component); + + function ArrayField() { + return _React$Component.apply(this, arguments) || this; + } + + var _proto = ArrayField.prototype; + + _proto.renderEmpty = function renderEmpty(disabled) { + var _this$props = this.props, + locale = _this$props.locale, + mutators = _this$props.mutators; + return _react.default.createElement("div", { + className: "array-empty-wrapper", + onClick: function onClick() { + mutators.push(); + } + }, _react.default.createElement("div", { + className: "array-empty" + }, _react.default.createElement("img", { + src: "//img.alicdn.com/tfs/TB1y2nwp_tYBeNjy1XdXXXXyVXa-200-200.png" + }), !disabled && _react.default.createElement(TextButton, null, _react.default.createElement(_antd.Icon, { + type: "plus" + }), locale.addItem || '添加'))); + }; + + _proto.renderAddition = function renderAddition() { + var locale = this.props.locale; + return _react.default.createElement("div", { + className: "array-item-addition" + }, _react.default.createElement(TextButton, { + inline: true, + onClick: this.onAddHandler() + }, _react.default.createElement(_antd.Icon, { + type: "plus" + }), locale.addItem || '添加')); + }; + + _proto.getDisabled = function getDisabled() { + var _this$props2 = this.props, + schema = _this$props2.schema, + editable = _this$props2.editable, + name = _this$props2.name; + var disabled = schema['x-props'] && schema['x-props'].disabled; + + if (editable !== undefined) { + if ((0, _utils.isFn)(editable)) { + if (!editable(name)) { + return true; + } + } else if (editable === false) { + return true; + } + } + + return disabled; + }; + + _proto.controllable = function controllable(key, value) { + var schema = this.props.schema; + var readOnly = schema['x-props'] && schema['x-props'].readOnly; + var disabled = this.getDisabled(); + + if ((0, _utils.isFn)(disabled)) { + return disabled(key, value); + } else if ((0, _utils.isFn)(readOnly)) { + return readOnly(key, value); + } else { + return !readOnly && !disabled; + } + }; + + _proto.onRemoveHandler = function onRemoveHandler(index) { + var _this$props3 = this.props, + value = _this$props3.value, + mutators = _this$props3.mutators, + schema = _this$props3.schema, + locale = _this$props3.locale; + var minItems = schema.minItems; + return function (e) { + e.stopPropagation(); + + if (minItems >= 0 && value.length - 1 < minItems) { + mutators.errors(locale.array_invalid_minItems, minItems); + } else { + mutators.remove(index); + } + }; + }; + + _proto.onMoveHandler = function onMoveHandler(_from, to) { + var mutators = this.props.mutators; + return function (e) { + e.stopPropagation(); + mutators.move(_from, to); + }; + }; + + _proto.onAddHandler = function onAddHandler() { + var _this$props4 = this.props, + value = _this$props4.value, + mutators = _this$props4.mutators, + schema = _this$props4.schema, + locale = _this$props4.locale; + var maxItems = schema.maxItems; + return function (e) { + e.stopPropagation(); + + if (maxItems >= 0 && value.length + 1 > maxItems) { + mutators.errors(locale.array_invalid_maxItems, maxItems); + } else { + mutators.push(); + } + }; + }; + + _proto.onClearErrorHandler = function onClearErrorHandler() { + var _this = this; + + return function () { + var _this$props5 = _this.props, + value = _this$props5.value, + mutators = _this$props5.mutators, + schema = _this$props5.schema; + var maxItems = schema.maxItems, + minItems = schema.minItems; + + if (maxItems >= 0 && value.length <= maxItems || minItems >= 0 && value.length >= minItems) { + mutators.errors(); + } + }; + }; + + _proto.componentDidMount = function componentDidMount() { + var _this$props6 = this.props, + value = _this$props6.value, + mutators = _this$props6.mutators, + schema = _this$props6.schema, + locale = _this$props6.locale; + var maxItems = schema.maxItems, + minItems = schema.minItems; + + if (value.length > maxItems) { + mutators.errors(locale.array_invalid_maxItems, maxItems); + } else if (value.length < minItems) { + mutators.errors(locale.array_invalid_minItems, minItems); + } + }; + + return ArrayField; +}(_react.default.Component); + +exports.ArrayField = ArrayField; +(0, _react2.registerFormField)('array', (0, _styledComponents.default)( +/*#__PURE__*/ +function (_ArrayField) { + _inheritsLoose(_class, _ArrayField); + + function _class() { + return _ArrayField.apply(this, arguments) || this; + } + + var _proto2 = _class.prototype; + + _proto2.render = function render() { + var _this2 = this; + + var _this$props7 = this.props, + className = _this$props7.className, + name = _this$props7.name, + schema = _this$props7.schema, + value = _this$props7.value, + renderField = _this$props7.renderField; + var style = schema['x-props'] && schema['x-props'].style || {}; + return _react.default.createElement("div", { + className: className, + style: style, + onClick: this.onClearErrorHandler() + }, value.map(function (item, index) { + return _react.default.createElement("div", { + className: "array-item", + key: name + "." + index + }, _react.default.createElement("div", { + className: "array-index" + }, _react.default.createElement("span", null, index + 1)), _react.default.createElement("div", { + className: "array-item-wrapper" + }, renderField(index)), _react.default.createElement("div", { + className: "array-item-operator" + }, _this2.controllable(index + ".remove", item) && _react.default.createElement(CircleButton, { + onClick: _this2.onRemoveHandler(index) + }, _react.default.createElement(_antd.Icon, { + size: "xs", + type: "delete" + })), value.length > 1 && _this2.controllable(index + ".moveDown", item) && _react.default.createElement(CircleButton, { + onClick: _this2.onMoveHandler(index, index + 1 > value.length - 1 ? 0 : index + 1) + }, _react.default.createElement(_antd.Icon, { + size: "xs", + type: "down" + })), value.length > 1 && _this2.controllable(index + ".moveUp", item) && _react.default.createElement(CircleButton, { + onClick: _this2.onMoveHandler(index, index - 1 < 0 ? value.length - 1 : index - 1) + }, _react.default.createElement(_antd.Icon, { + size: "xs", + type: "up" + })))); + }), value.length === 0 && this.renderEmpty(), value.length > 0 && this.controllable('addition', value) && this.renderAddition()); + }; + + return _class; +}(ArrayField))(_templateObject4())); \ No newline at end of file diff --git a/packages/antd/lib/fields/boolean.js b/packages/antd/lib/fields/boolean.js new file mode 100644 index 00000000000..7babd166449 --- /dev/null +++ b/packages/antd/lib/fields/boolean.js @@ -0,0 +1,12 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _utils = require("../utils"); + +var _antd = require("antd"); + +(0, _react.registerFormField)('boolean', (0, _react.connect)({ + valueName: 'checked', + getProps: _utils.mapLoadingProps +})((0, _utils.acceptEnum)(_antd.Switch))); \ No newline at end of file diff --git a/packages/antd/lib/fields/checkbox.js b/packages/antd/lib/fields/checkbox.js new file mode 100644 index 00000000000..d64e0ead1ee --- /dev/null +++ b/packages/antd/lib/fields/checkbox.js @@ -0,0 +1,13 @@ +"use strict"; + +var _react = require("uform/react"); + +var _antd = require("antd"); + +var _utils = require("../utils"); + +var CheckboxGroup = _antd.Checkbox.Group; +(0, _react.registerFormField)('checkbox', (0, _react.connect)({ + getProps: _utils.mapLoadingProps, + getComponent: _utils.mapTextComponent +})((0, _utils.transformDataSourceKey)(CheckboxGroup, 'options'))); \ No newline at end of file diff --git a/packages/antd/lib/fields/date.js b/packages/antd/lib/fields/date.js new file mode 100644 index 00000000000..285c65adffa --- /dev/null +++ b/packages/antd/lib/fields/date.js @@ -0,0 +1,160 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _moment = _interopRequireDefault(require("moment")); + +var _antd = require("antd"); + +var _utils = require("../utils"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +var AntRangePicker = _antd.DatePicker.RangePicker, + AntMonthPicker = _antd.DatePicker.MonthPicker; + +var AntYearPicker = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(AntYearPicker, _React$Component); + + function AntYearPicker() { + return _React$Component.apply(this, arguments) || this; + } + + var _proto = AntYearPicker.prototype; + + _proto.render = function render() { + return _react.default.createElement(_antd.DatePicker, _extends({}, this.props, { + mode: "year" + })); + }; + + return AntYearPicker; +}(_react.default.Component); + +var DatePicker = (0, _utils.StateLoading)(_antd.DatePicker); +var RangePicker = (0, _utils.StateLoading)(AntRangePicker); +var MonthPicker = (0, _utils.StateLoading)(AntMonthPicker); +var YearPicker = (0, _utils.StateLoading)(AntYearPicker); + +var transformMoment = function transformMoment(value, format) { + if (format === void 0) { + format = 'YYYY-MM-DD HH:mm:ss'; + } + + return value && value.format ? value.format(format) : value; +}; + +(0, _react2.registerFormField)('date', (0, _react2.connect)({ + getValueFromEvent: function getValueFromEvent(_, value) { + var props = this.props || {}; + return transformMoment(value, props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'); + }, + getProps: function getProps(props) { + var value = props.value, + _props$showTime = props.showTime, + showTime = _props$showTime === void 0 ? false : _props$showTime, + _props$disabled = props.disabled, + disabled = _props$disabled === void 0 ? false : _props$disabled, + others = _objectWithoutPropertiesLoose(props, ["value", "showTime", "disabled"]); + + try { + if (!disabled && value) { + props.value = (0, _moment.default)(value, showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'); + } + } catch (e) { + throw new Error(e); + } + + (0, _utils.mapLoadingProps)(props, others); + }, + getComponent: _utils.mapTextComponent +})(DatePicker)); +(0, _react2.registerFormField)('daterange', (0, _react2.connect)({ + getValueFromEvent: function getValueFromEvent(_, _ref) { + var startDate = _ref[0], + endDate = _ref[1]; + var props = this.props || {}; + var format = props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'; + return [transformMoment(startDate, format), transformMoment(endDate, format)]; + }, + getProps: function getProps(props) { + var _props$value = props.value, + value = _props$value === void 0 ? [] : _props$value, + _props$showTime2 = props.showTime, + showTime = _props$showTime2 === void 0 ? false : _props$showTime2, + _props$disabled2 = props.disabled, + disabled = _props$disabled2 === void 0 ? false : _props$disabled2, + others = _objectWithoutPropertiesLoose(props, ["value", "showTime", "disabled"]); + + try { + if (!disabled && value.length) { + props.value = value.map(function (item) { + return item && (0, _moment.default)(item, showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD') || ''; + }); + } + } catch (e) { + throw new Error(e); + } + + (0, _utils.mapLoadingProps)(props, others); + }, + getComponent: _utils.mapTextComponent +})(RangePicker)); +(0, _react2.registerFormField)('month', (0, _react2.connect)({ + getValueFromEvent: function getValueFromEvent(_, value) { + return transformMoment(value); + }, + getProps: function getProps(props) { + var value = props.value, + _props$showTime3 = props.showTime, + showTime = _props$showTime3 === void 0 ? false : _props$showTime3, + _props$disabled3 = props.disabled, + disabled = _props$disabled3 === void 0 ? false : _props$disabled3, + others = _objectWithoutPropertiesLoose(props, ["value", "showTime", "disabled"]); + + try { + if (!disabled && value) { + props.value = (0, _moment.default)(value, showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM'); + } + } catch (e) { + throw new Error(e); + } + + (0, _utils.mapLoadingProps)(props, others); + }, + getComponent: _utils.mapTextComponent +})(MonthPicker)); +(0, _react2.registerFormField)('year', (0, _react2.connect)({ + getValueFromEvent: function getValueFromEvent(_, value) { + return transformMoment(value); + }, + getProps: function getProps(props) { + var value = props.value, + _props$showTime4 = props.showTime, + showTime = _props$showTime4 === void 0 ? false : _props$showTime4, + _props$disabled4 = props.disabled, + disabled = _props$disabled4 === void 0 ? false : _props$disabled4, + others = _objectWithoutPropertiesLoose(props, ["value", "showTime", "disabled"]); + + try { + if (!disabled && value) { + props.value = (0, _moment.default)(value, showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM'); + } + } catch (e) { + throw new Error(e); + } + + (0, _utils.mapLoadingProps)(props, others); + }, + getComponent: _utils.mapTextComponent +})(YearPicker)); \ No newline at end of file diff --git a/packages/antd/lib/fields/number.js b/packages/antd/lib/fields/number.js new file mode 100644 index 00000000000..d164fc882d1 --- /dev/null +++ b/packages/antd/lib/fields/number.js @@ -0,0 +1,12 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _antd = require("antd"); + +var _utils = require("../utils"); + +(0, _react.registerFormField)('number', (0, _react.connect)({ + getProps: _utils.mapLoadingProps, + getComponent: _utils.mapTextComponent +})((0, _utils.acceptEnum)(_antd.InputNumber))); \ No newline at end of file diff --git a/packages/antd/lib/fields/password.js b/packages/antd/lib/fields/password.js new file mode 100644 index 00000000000..d3088c1ec58 --- /dev/null +++ b/packages/antd/lib/fields/password.js @@ -0,0 +1,328 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _antd = require("antd"); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +var _temp; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n .ant-input-prefix,\n .ant-input-suffix {\n z-index: 1000;\n .eye {\n position: absolute;\n max-width: initial;\n width: 20px;\n height: 20px;\n top: 50%;\n left: -5px;\n transform: translate(0, -50%);\n opacity: 0.3;\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n &:hover {\n opacity: 0.6;\n }\n }\n }\n .ant-input-suffix {\n right: 20px;\n }\n .ant-input {\n width: 100%;\n position: relative;\n &.input-password input {\n font-size: 16px;\n letter-spacing: 2px;\n }\n input {\n padding-right: 25px;\n }\n }\n .password-strength-wrapper {\n background: #e0e0e0;\n margin-bottom: 3px;\n position: relative;\n .div {\n position: absolute;\n z-index: 1;\n height: 8px;\n top: 0;\n background: #fff;\n width: 1px;\n transform: translate(-50%, 0);\n }\n .div-1 {\n left: 20%;\n }\n .div-2 {\n left: 40%;\n }\n .div-3 {\n left: 60%;\n }\n .div-4 {\n left: 80%;\n }\n .password-strength-bar {\n position: relative;\n background-image: -webkit-linear-gradient(left, #ff5500, #ff9300);\n transition: all 0.35s ease-in-out;\n height: 8px;\n width: 100%;\n margin-top: 5px;\n }\n }\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +var isNum = function isNum(c) { + return c >= 48 && c <= 57; +}; + +var isLower = function isLower(c) { + return c >= 97 && c <= 122; +}; + +var isUpper = function isUpper(c) { + return c >= 65 && c <= 90; +}; + +var isSymbol = function isSymbol(c) { + return !(isLower(c) || isUpper(c) || isNum(c)); +}; + +var isLetter = function isLetter(c) { + return isLower(c) || isUpper(c); +}; + +var getStrength = function getStrength(val) { + if (!val) return 0; + var num = 0; + var lower = 0; + var upper = 0; + var symbol = 0; + var MNS = 0; + var rep = 0; + var repC = 0; + var consecutive = 0; + var sequential = 0; + + var len = function len() { + return num + lower + upper + symbol; + }; + + var require = function require() { + var re = num > 0 ? 1 : 0; + re += lower > 0 ? 1 : 0; + re += upper > 0 ? 1 : 0; + re += symbol > 0 ? 1 : 0; + + if (re > 2 && len() >= 8) { + return re + 1; + } else { + return 0; + } + }; + + for (var i = 0; i < val.length; i++) { + var c = val.charCodeAt(i); + + if (isNum(c)) { + num++; + + if (i !== 0 && i !== val.length - 1) { + MNS++; + } + + if (i > 0 && isNum(val.charCodeAt(i - 1))) { + consecutive++; + } + } else if (isLower(c)) { + lower++; + + if (i > 0 && isLower(val.charCodeAt(i - 1))) { + consecutive++; + } + } else if (isUpper(c)) { + upper++; + + if (i > 0 && isUpper(val.charCodeAt(i - 1))) { + consecutive++; + } + } else { + symbol++; + + if (i !== 0 && i !== val.length - 1) { + MNS++; + } + } + + var exists = false; + + for (var j = 0; j < val.length; j++) { + if (val[i] === val[j] && i !== j) { + exists = true; + repC += Math.abs(val.length / (j - i)); + } + } + + if (exists) { + rep++; + var unique = val.length - rep; + repC = unique ? Math.ceil(repC / unique) : Math.ceil(repC); + } + + if (i > 1) { + var last1 = val.charCodeAt(i - 1); + var last2 = val.charCodeAt(i - 2); + + if (isLetter(c)) { + if (isLetter(last1) && isLetter(last2)) { + var v = val.toLowerCase(); + var vi = v.charCodeAt(i); + var vi1 = v.charCodeAt(i - 1); + var vi2 = v.charCodeAt(i - 2); + + if (vi - vi1 === vi1 - vi2 && Math.abs(vi - vi1) === 1) { + sequential++; + } + } + } else if (isNum(c)) { + if (isNum(last1) && isNum(last2)) { + if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) { + sequential++; + } + } + } else { + if (isSymbol(last1) && isSymbol(last2)) { + if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) { + sequential++; + } + } + } + } + } + + var sum = 0; + var length = len(); + sum += 4 * length; + + if (lower > 0) { + sum += 2 * (length - lower); + } + + if (upper > 0) { + sum += 2 * (length - upper); + } + + if (num !== length) { + sum += 4 * num; + } + + sum += 6 * symbol; + sum += 2 * MNS; + sum += 2 * require(); + + if (length === lower + upper) { + sum -= length; + } + + if (length === num) { + sum -= num; + } + + sum -= repC; + sum -= 2 * consecutive; + sum -= 3 * sequential; + sum = sum < 0 ? 0 : sum; + sum = sum > 100 ? 100 : sum; + + if (sum >= 80) { + return 100; + } else if (sum >= 60) { + return 80; + } else if (sum >= 40) { + return 60; + } else if (sum >= 20) { + return 40; + } else { + return 20; + } +}; + +var Password = (0, _styledComponents.default)((_temp = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(Password, _React$Component); + + function Password() { + var _this; + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; + + _defineProperty(_assertThisInitialized(_this), "state", { + value: _this.props.value || _this.props.defaultValue, + strength: 0, + eye: false + }); + + _defineProperty(_assertThisInitialized(_this), "onChangeHandler", function (e) { + var value = e.target.value; + + _this.setState({ + value: value, + strength: getStrength(value) + }, function () { + if (_this.props.onChange) { + _this.props.onChange(value); + } + }); + }); + + return _this; + } + + var _proto = Password.prototype; + + _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) { + if (prevProps.value !== this.props.value && this.props.value !== this.state.value) { + this.setState({ + value: this.props.value, + strength: getStrength(this.props.value) + }); + } + }; + + _proto.renderStrength = function renderStrength() { + var strength = this.state.strength; + return _react.default.createElement("div", { + className: "password-strength-wrapper" + }, _react.default.createElement("div", { + className: "div-1 div" + }), _react.default.createElement("div", { + className: "div-2 div" + }), _react.default.createElement("div", { + className: "div-3 div" + }), _react.default.createElement("div", { + className: "div-4 div" + }), _react.default.createElement("div", { + className: "password-strength-bar", + style: { + clipPath: "polygon(0 0," + strength + "% 0," + strength + "% 100%,0 100%)" + } + })); + }; + + _proto.switchEye = function switchEye() { + var _this2 = this; + + return function () { + _this2.setState({ + eye: !_this2.state.eye + }); + }; + }; + + _proto.renderEye = function renderEye() { + if (!this.state.eye) { + return _react.default.createElement("img", { + className: "eye", + onClick: this.switchEye(), + src: "//img.alicdn.com/tfs/TB1wyXlsVzqK1RjSZFvXXcB7VXa-200-200.svg" + }); + } else { + return _react.default.createElement("img", { + className: "eye", + onClick: this.switchEye(), + src: "//img.alicdn.com/tfs/TB1xiXlsVzqK1RjSZFvXXcB7VXa-200-200.svg" + }); + } + }; + + _proto.render = function render() { + var _this$props = this.props, + className = _this$props.className, + checkStrength = _this$props.checkStrength, + value = _this$props.value, + onChange = _this$props.onChange, + htmlType = _this$props.htmlType, + innerAfter = _this$props.innerAfter, + others = _objectWithoutPropertiesLoose(_this$props, ["className", "checkStrength", "value", "onChange", "htmlType", "innerAfter"]); + + return _react.default.createElement("div", { + className: className + }, _react.default.createElement(_antd.Input, _extends({ + type: this.state.eye ? 'text' : 'password', + className: "input-" + (this.state.eye ? 'text' : 'password'), + value: this.state.value, + onChange: this.onChangeHandler, + suffix: this.renderEye() + }, others)), checkStrength && this.renderStrength()); + }; + + return Password; +}(_react.default.Component), _temp))(_templateObject()); +(0, _react2.registerFormField)('password', (0, _react2.connect)()(Password)); \ No newline at end of file diff --git a/packages/antd/lib/fields/radio.js b/packages/antd/lib/fields/radio.js new file mode 100644 index 00000000000..705c167040e --- /dev/null +++ b/packages/antd/lib/fields/radio.js @@ -0,0 +1,13 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _antd = require("antd"); + +var _utils = require("../utils"); + +var RadioGroup = _antd.Radio.Group; +(0, _react.registerFormField)('radio', (0, _react.connect)({ + getProps: _utils.mapLoadingProps, + getComponent: _utils.mapTextComponent +})((0, _utils.transformDataSourceKey)(RadioGroup, 'options'))); \ No newline at end of file diff --git a/packages/antd/lib/fields/range.js b/packages/antd/lib/fields/range.js new file mode 100644 index 00000000000..8423c59c22d --- /dev/null +++ b/packages/antd/lib/fields/range.js @@ -0,0 +1,60 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _antd = require("antd"); + +var _utils = require("../utils"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +(0, _react2.registerFormField)('range', (0, _react2.connect)({ + defaultProps: { + style: { + width: 320 + } + }, + getProps: _utils.mapLoadingProps +})( +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(Component, _React$Component); + + function Component() { + return _React$Component.apply(this, arguments) || this; + } + + var _proto = Component.prototype; + + _proto.render = function render() { + var _this$props = this.props, + onChange = _this$props.onChange, + value = _this$props.value, + min = _this$props.min, + max = _this$props.max, + marks = _this$props.marks; + var newMarks = {}; + + if (Array.isArray(marks)) { + marks.forEach(function (mark) { + newMarks[mark] = mark; + }); + } else { + newMarks = marks; + } + + return _react.default.createElement(_antd.Slider, { + onChange: onChange, + value: value, + min: min, + max: max, + marks: newMarks + }); + }; + + return Component; +}(_react.default.Component))); \ No newline at end of file diff --git a/packages/antd/lib/fields/rating.js b/packages/antd/lib/fields/rating.js new file mode 100644 index 00000000000..ecec7c2cd7e --- /dev/null +++ b/packages/antd/lib/fields/rating.js @@ -0,0 +1,11 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _antd = require("antd"); + +var _utils = require("../utils"); + +(0, _react.registerFormField)('rating', (0, _react.connect)({ + getProps: _utils.mapLoadingProps +})(_antd.Rate)); \ No newline at end of file diff --git a/packages/antd/lib/fields/string.js b/packages/antd/lib/fields/string.js new file mode 100644 index 00000000000..24fefdd1373 --- /dev/null +++ b/packages/antd/lib/fields/string.js @@ -0,0 +1,12 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _antd = require("antd"); + +var _utils = require("../utils"); + +(0, _react.registerFormField)('string', (0, _react.connect)({ + getProps: _utils.mapLoadingProps, + getComponent: _utils.mapTextComponent +})((0, _utils.acceptEnum)(_antd.Input))); \ No newline at end of file diff --git a/packages/antd/lib/fields/table.js b/packages/antd/lib/fields/table.js new file mode 100644 index 00000000000..cc29cca8745 --- /dev/null +++ b/packages/antd/lib/fields/table.js @@ -0,0 +1,267 @@ +"use strict"; + +var _react = _interopRequireWildcard(require("react")); + +var _react2 = require("@uform/react"); + +var _utils = require("@uform/utils"); + +var _antd = require("antd"); + +var _array = require("./array"); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _templateObject2() { + var data = _taggedTemplateLiteralLoose(["\n display: inline-block;\n .array-item-addition {\n line-height: normal !important;\n padding: 10px 20px;\n background: #fbfbfb;\n border-left: 1px solid #dcdee3;\n border-right: 1px solid #dcdee3;\n border-bottom: 1px solid #dcdee3;\n .ant-btn-text {\n color: #888;\n }\n }\n .array-item-operator {\n display: flex;\n }\n "]); + + _templateObject2 = function _templateObject2() { + return data; + }; + + return data; +} + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n .ant-table {\n position: relative;\n }\n\n .ant-table,\n .ant-table *,\n .ant-table :after,\n .ant-table :before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n }\n\n .ant-table table {\n border-collapse: collapse;\n border-spacing: 0;\n width: 100%;\n background: #fff;\n display: table !important;\n margin: 0 !important;\n }\n\n .ant-table table tr:first-child td {\n border-top-width: 0;\n }\n\n .ant-table th {\n padding: 0;\n background: #ebecf0;\n color: #333;\n text-align: left;\n font-weight: 400;\n min-width: 200px;\n border: 1px solid #dcdee3;\n }\n\n .ant-table th .ant-table-cell-wrapper {\n padding: 12px 16px;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n }\n\n .ant-table td {\n padding: 0;\n border: 1px solid #dcdee3;\n }\n\n .ant-table td .ant-table-cell-wrapper {\n padding: 12px 16px;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n display: flex;\n }\n\n .ant-table.zebra tr:nth-child(odd) td {\n background: #fff;\n }\n\n .ant-table.zebra tr:nth-child(2n) td {\n background: #f7f8fa;\n }\n\n .ant-table-empty {\n color: #a0a2ad;\n padding: 32px 0;\n text-align: center;\n }\n\n .ant-table-row {\n -webkit-transition: all 0.3s ease;\n transition: all 0.3s ease;\n background: #fff;\n color: #333;\n border: none !important;\n }\n\n .ant-table-row.hidden {\n display: none;\n }\n\n .ant-table-row.hovered,\n .ant-table-row.selected {\n background: #f2f3f7;\n color: #333;\n }\n\n .ant-table-body,\n .ant-table-header {\n overflow: auto;\n font-size: 12px;\n }\n\n .ant-table-body {\n font-size: 12px;\n }\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +/** + * 轻量级Table + **/ +var Table = (0, _styledComponents.default)( +/*#__PURE__*/ +function (_Component) { + _inheritsLoose(Table, _Component); + + function Table() { + return _Component.apply(this, arguments) || this; + } + + var _proto = Table.prototype; + + _proto.renderCell = function renderCell(_ref) { + var record = _ref.record, + col = _ref.col, + rowIndex = _ref.rowIndex, + colIndex = _ref.colIndex; + return _react.default.createElement("div", { + className: "ant-table-cell-wrapper" + }, (0, _utils.isFn)(col.cell) ? col.cell(record ? record[col.dataIndex] : undefined, rowIndex, record) : record ? record[col.dataIndex] : undefined); + }; + + _proto.renderTable = function renderTable(columns, dataSource) { + var _this = this; + + return _react.default.createElement("div", { + className: "ant-table-body" + }, _react.default.createElement("table", null, _react.default.createElement("colgroup", null, columns.map(function (col, index) { + return _react.default.createElement("col", { + key: index, + style: { + width: col.width + } + }); + })), _react.default.createElement("thead", null, _react.default.createElement("tr", null, columns.map(function (col, index) { + return _react.default.createElement("th", { + key: index, + className: "ant-table-header-node" + }, _react.default.createElement("div", { + className: "ant-table-cell-wrapper" + }, col.title)); + }))), _react.default.createElement("tbody", null, dataSource.map(function (record, rowIndex) { + return _react.default.createElement("tr", { + key: rowIndex, + className: "ant-table-row" + }, columns.map(function (col, colIndex) { + return _react.default.createElement("td", { + key: colIndex, + className: "ant-table-cell" + }, _this.renderCell({ + record: record, + col: col, + rowIndex: rowIndex, + colIndex: colIndex + })); + })); + }), this.renderPlacehodler(dataSource, columns)))); + }; + + _proto.renderPlacehodler = function renderPlacehodler(dataSource, columns) { + if (dataSource.length === 0) { + return _react.default.createElement("tr", { + className: "ant-table-row" + }, _react.default.createElement("td", { + className: "ant-table-cell", + colSpan: columns.length + }, _react.default.createElement("div", { + className: "ant-table-empty", + style: { + padding: 10 + } + }, _react.default.createElement("img", { + src: "//img.alicdn.com/tfs/TB1y2nwp_tYBeNjy1XdXXXXyVXa-200-200.png", + style: { + height: 60 + } + })))); + } + }; + + _proto.getColumns = function getColumns(children) { + var columns = []; + + _react.default.Children.forEach(children, function (child) { + if (_react.default.isValidElement(child)) { + if (child.type === Column || child.type.displayName === '@schema-table-column') { + columns.push(child.props); + } + } + }); + + return columns; + }; + + _proto.render = function render() { + var columns = this.getColumns(this.props.children); + var dataSource = (0, _utils.toArr)(this.props.dataSource); + return _react.default.createElement("div", { + className: this.props.className + }, _react.default.createElement("div", { + className: "ant-table zebra" + }, _react.default.createElement("div", { + className: "ant-table-inner" + }, this.renderTable(columns, dataSource)))); + }; + + return Table; +}(_react.Component))(_templateObject()); + +var Column = +/*#__PURE__*/ +function (_Component2) { + _inheritsLoose(Column, _Component2); + + function Column() { + return _Component2.apply(this, arguments) || this; + } + + var _proto2 = Column.prototype; + + _proto2.render = function render() { + return this.props.children; + }; + + return Column; +}(_react.Component); + +_defineProperty(Column, "displayName", '@schema-table-column'); + +(0, _react2.registerFormField)('table', (0, _styledComponents.default)( +/*#__PURE__*/ +function (_ArrayField) { + _inheritsLoose(_class, _ArrayField); + + function _class() { + return _ArrayField.apply(this, arguments) || this; + } + + var _proto3 = _class.prototype; + + _proto3.createFilter = function createFilter(key, payload) { + var schema = this.props.schema; + var columnFilter = schema['x-props'] && schema['x-props'].columnFilter; + return function (render, otherwise) { + if ((0, _utils.isFn)(columnFilter)) { + return columnFilter(key, payload) ? (0, _utils.isFn)(render) ? render() : render : (0, _utils.isFn)(otherwise) ? otherwise() : otherwise; + } else { + return render(); + } + }; + }; + + _proto3.render = function render() { + var _this2 = this; + + var _this$props = this.props, + value = _this$props.value, + schema = _this$props.schema, + locale = _this$props.locale, + className = _this$props.className, + renderField = _this$props.renderField; + var style = schema['x-props'] && schema['x-props'].style; + var additionFilter = this.createFilter('addition', schema); + return _react.default.createElement("div", { + className: className, + style: style, + onClick: this.onClearErrorHandler() + }, _react.default.createElement("div", null, _react.default.createElement(Table, { + dataSource: value + }, Object.keys(schema.items && schema.items.properties || {}).reduce(function (buf, key) { + var itemSchema = schema.items.properties[key]; + + var filter = _this2.createFilter(key, itemSchema); + + var res = filter(function () { + return buf.concat(_react.default.createElement(Column, _extends({}, itemSchema, { + key: key, + title: itemSchema.title, + dataIndex: key, + cell: function cell(record, index) { + return renderField([index, key]); + } + }))); + }, function () { + return buf; + }); + return res; + }, []), additionFilter(function () { + return _react.default.createElement(Column, { + key: "operations", + title: locale.operations, + dataIndex: "operations", + width: 180, + cell: function cell(item, index) { + return _react.default.createElement("div", { + className: "array-item-operator" + }, _this2.controllable(index + ".remove", item) && _react.default.createElement(_array.CircleButton, { + onClick: _this2.onRemoveHandler(index) + }, _react.default.createElement(_antd.Icon, { + size: "xs", + type: "delete" + })), value.length > 1 && _this2.controllable(index + ".moveDown", item) && _react.default.createElement(_array.CircleButton, { + onClick: _this2.onMoveHandler(index, index + 1 > value.length - 1 ? 0 : index + 1) + }, _react.default.createElement(_antd.Icon, { + size: "xs", + type: "down" + })), value.length > 1 && _this2.controllable(index + ".moveUp", item) && _react.default.createElement(_array.CircleButton, { + onClick: _this2.onMoveHandler(index, index - 1 < 0 ? value.length - 1 : index - 1) + }, _react.default.createElement(_antd.Icon, { + size: "xs", + type: "up" + }))); + } + }); + })), this.controllable('addition', value) && this.renderAddition())); + }; + + return _class; +}(_array.ArrayField))(_templateObject2())); \ No newline at end of file diff --git a/packages/antd/lib/fields/time.js b/packages/antd/lib/fields/time.js new file mode 100644 index 00000000000..822595dacd9 --- /dev/null +++ b/packages/antd/lib/fields/time.js @@ -0,0 +1,36 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _moment = _interopRequireDefault(require("moment")); + +var _antd = require("antd"); + +var _utils = require("../utils"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +(0, _react.registerFormField)('time', (0, _react.connect)({ + getValueFromEvent: function getValueFromEvent(_, value) { + return value; + }, + getProps: function getProps(props) { + var value = props.value, + _props$disabled = props.disabled, + disabled = _props$disabled === void 0 ? false : _props$disabled, + others = _objectWithoutPropertiesLoose(props, ["value", "disabled"]); + + try { + if (!disabled && value) { + props.value = (0, _moment.default)(value, 'HH:mm:ss'); + } + } catch (e) { + throw new Error(e); + } + + (0, _utils.mapLoadingProps)(props, others); + }, + getComponent: _utils.mapTextComponent +})(_antd.TimePicker)); \ No newline at end of file diff --git a/packages/antd/lib/fields/transfer.js b/packages/antd/lib/fields/transfer.js new file mode 100644 index 00000000000..2af011d84f7 --- /dev/null +++ b/packages/antd/lib/fields/transfer.js @@ -0,0 +1,11 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _antd = require("antd"); + +var _utils = require("../utils"); + +(0, _react.registerFormField)('transfer', (0, _react.connect)({ + getProps: _utils.mapLoadingProps +})(_antd.Transfer)); \ No newline at end of file diff --git a/packages/antd/lib/fields/upload.js b/packages/antd/lib/fields/upload.js new file mode 100644 index 00000000000..9c9f5b99c44 --- /dev/null +++ b/packages/antd/lib/fields/upload.js @@ -0,0 +1,267 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _utils = require("../utils"); + +var _antd = require("antd"); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +var _class, _temp; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose([""]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +var UploadDragger = _antd.Upload.Dragger; +var exts = [{ + ext: /\.docx?/i, + icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png' +}, { + ext: /\.pptx?/i, + icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png' +}, { + ext: /\.jpe?g/i, + icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png' +}, { + ext: /pdf/i, + icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png' +}, { + ext: /\.png/i, + icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png' +}, { + ext: /\.eps/i, + icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png' +}, { + ext: /\.ai/i, + icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png' +}, { + ext: /\.gif/i, + icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png' +}, { + ext: /\.svg/i, + icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png' +}, { + ext: /\.xlsx?/i, + icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png' +}, { + ext: /\.psd?/i, + icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png' +}, { + ext: /\.(wav|aif|aiff|au|mp1|mp2|mp3|ra|rm|ram|mid|rmi)/i, + icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png' +}, { + ext: /\.(avi|wmv|mpg|mpeg|vob|dat|3gp|mp4|mkv|rm|rmvb|mov|flv)/i, + icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png' +}, { + ext: /\.(zip|rar|arj|z|gz|iso|jar|ace|tar|uue|dmg|pkg|lzh|cab)/i, + icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png' +}, { + ext: /\..+/i, + icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png' +}]; +var UploadPlaceholder = (0, _styledComponents.default)(function (props) { + return _react.default.createElement("div", null, _react.default.createElement(_antd.Icon, { + type: props.loading ? 'loading' : 'plus' + }), _react.default.createElement("div", { + className: "ant-upload-text" + }, "\u4E0A\u4F20")); +})(_templateObject()); + +var testOpts = function testOpts(ext, options) { + if (options && (0, _utils.isArr)(options.include)) { + return options.include.some(function (url) { + return ext.test(url); + }); + } + + if (options && (0, _utils.isArr)(options.exclude)) { + return !options.exclude.some(function (url) { + return ext.test(url); + }); + } + + return true; +}; + +var getImageByUrl = function getImageByUrl(url, options) { + for (var i = 0; i < exts.length; i++) { + if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) { + return exts[i].icon; + } + } + + return url; +}; + +var normalizeFileList = function normalizeFileList(fileList) { + if (fileList && fileList.length) { + return fileList.map(function (file) { + return _extends({ + name: file.name, + downloadURL: file.downloadURL || file.imgURL + }, file.response, { + imgURL: getImageByUrl(file.imgURL, { + exclude: ['.png', '.jpg', '.jpeg', '.gif'] + }) + }); + }); + } + + return []; +}; + +var shallowClone = function shallowClone(val) { + var result = (0, _utils.isArr)(val) ? [].concat(val) : typeof val === 'object' ? _extends({}, val) : val; + + if ((0, _utils.isArr)(result)) { + result = result.map(function (item) { + return _extends({}, item, { + // 必须要有一个不重复的uid + uid: item.uid || Math.random().toFixed(16).slice(2, 10) + }); + }); + } + + return result; +}; + +(0, _react2.registerFormField)('upload', (0, _react2.connect)({ + getProps: _utils.mapLoadingProps +})((_temp = _class = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(Uploader, _React$Component); + + function Uploader(props) { + var _this; + + _this = _React$Component.call(this, props) || this; + + _defineProperty(_assertThisInitialized(_this), "onRemoveHandler", function (file) { + var value = _this.state.value; + var fileList = []; + value.forEach(function (item) { + if (item.uid !== file.uid) { + fileList.push(item); + } + }); + + _this.props.onChange(fileList); + }); + + _defineProperty(_assertThisInitialized(_this), "onChangeHandler", function (_ref) { + var fileList = _ref.fileList, + file = _ref.file; + var onChange = _this.props.onChange; + fileList = (0, _utils.toArr)(fileList); + + if (fileList.every(function (file) { + return file.status === 'done' || file.imgURL || file.downloadURL; + }) && fileList.length) { + fileList = normalizeFileList(fileList); + + _this.setState({ + value: fileList + }, function () { + onChange(fileList.length > 0 ? fileList : undefined); + }); + } else if (file.status !== 'error' && file.status !== 'uploading') { + _this.setState({ + value: fileList + }); + } + }); + + _this.state = { + value: shallowClone((0, _utils.toArr)(props.value)) + }; + return _this; + } + + var _proto = Uploader.prototype; + + _proto.componentDidUpdate = function componentDidUpdate(preProps) { + if (this.props.value && !(0, _utils.isEqual)(this.props.value, preProps.value)) { + this.setState({ + value: shallowClone(this.props.value) + }); + } + }; + + _proto.render = function render() { + var _this$props = this.props, + listType = _this$props.listType, + locale = _this$props.locale, + onChange = _this$props.onChange, + value = _this$props.value, + others = _objectWithoutPropertiesLoose(_this$props, ["listType", "locale", "onChange", "value"]); + + if (listType.indexOf('card') > -1) { + return _react.default.createElement(_antd.Upload, _extends({}, others, { + fileList: this.state.value, + onChange: this.onChangeHandler, + onRemove: this.onRemoveHandler, + listType: "picture-card" + }), _react.default.createElement(UploadPlaceholder, null)); + } + + if (listType.indexOf('dragger') > -1) { + return _react.default.createElement(UploadDragger, _extends({}, others, { + fileList: this.state.value, + onChange: this.onChangeHandler, + onRemove: this.onRemoveHandler, + listType: listType.indexOf('image') > -1 ? 'image' : 'text' + }), _react.default.createElement("p", { + className: "ant-upload-drag-icon" + }, _react.default.createElement(_antd.Icon, { + type: "inbox" + })), _react.default.createElement("p", { + className: "ant-upload-text" + }, "\u62D6\u62FD\u4E0A\u4F20")); + } + + return _react.default.createElement(_antd.Upload, _extends({}, others, { + fileList: this.state.value, + onChange: this.onChangeHandler, + onRemove: this.onRemoveHandler, + listType: listType + }), _react.default.createElement(_antd.Button, { + style: { + margin: '0 0 10px' + } + }, _react.default.createElement(_antd.Icon, { + type: "upload" + }), locale && locale.uploadText || '上传文件')); + }; + + return Uploader; +}(_react.default.Component), _defineProperty(_class, "defaultProps", { + action: '//next-upload.shuttle.alibaba.net/upload', + listType: 'text', + multiple: true, + className: 'antd-uploader' +}), _temp))); \ No newline at end of file diff --git a/packages/antd/lib/form.js b/packages/antd/lib/form.js new file mode 100644 index 00000000000..9e24d5a1a91 --- /dev/null +++ b/packages/antd/lib/form.js @@ -0,0 +1,379 @@ +"use strict"; + +exports.__esModule = true; +exports.FormItem = exports.FormConsumer = exports.FormProvider = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _classnames = _interopRequireDefault(require("classnames")); + +var _antd = require("antd"); + +var _grid = require("./components/grid"); + +var _locale = _interopRequireDefault(require("./locale")); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +var _utils = require("./utils"); + +var _class, _temp; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _templateObject2() { + var data = _taggedTemplateLiteralLoose(["\n &.ant-inline,\n .ant-inline {\n display: flex;\n .rs-uform-content {\n margin-right: 15px;\n }\n .ant-form-item {\n display: inline-block;\n vertical-align: top;\n }\n .ant-form-item:not(:last-child) {\n margin-right: 20px;\n }\n .ant-form-item.ant-left .ant-form-item-control {\n display: inline-block;\n display: table-cell\0;\n vertical-align: top;\n line-height: 0;\n }\n }\n .ant-form-item-label {\n line-height: 32px;\n padding-right: 12px;\n text-align: right;\n }\n .ant-small {\n .ant-form-item-label {\n line-height: 24px;\n }\n .ant-radio-group,\n .ant-checkbox-group {\n line-height: 24px;\n min-height: 24px;\n }\n }\n .ant-large {\n .ant-form-item-label {\n line-height: 40px;\n }\n .ant-radio-group,\n .ant-checkbox-group {\n line-height: 40px;\n min-height: 40px;\n }\n }\n .ant-form-item-label label[required]:before {\n margin-right: 4px;\n content: '*';\n color: #ff3000;\n }\n .ant-form-item-help {\n margin-top: 4px;\n font-size: 12px;\n line-height: 1.5;\n color: #999;\n }\n .ant-form-item.has-error .ant-form-item-help {\n color: #ff3000;\n }\n .ant-radio-group,\n .ant-checkbox-group {\n line-height: 32px;\n & > label {\n margin-right: 15px;\n }\n }\n .ant-range {\n margin-top: 10px;\n }\n .ant-number-picker-normal {\n min-width: 62px;\n width: 100px;\n .ant-number-picker-input-wrap {\n width: calc(100% - 22px);\n .ant-number-picker-input {\n width: 100%;\n input {\n text-align: left;\n padding: 0 8px;\n }\n }\n }\n }\n .ant-table {\n table {\n table-layout: auto;\n }\n }\n .ant-rating-medium {\n min-height: 30px;\n line-height: 30px;\n }\n .ant-rating-small {\n min-height: 24px;\n line-height: 24px;\n }\n .ant-rating-large {\n min-height: 40px;\n line-height: 40px;\n }\n "], ["\n &.ant-inline,\n .ant-inline {\n display: flex;\n .rs-uform-content {\n margin-right: 15px;\n }\n .ant-form-item {\n display: inline-block;\n vertical-align: top;\n }\n .ant-form-item:not(:last-child) {\n margin-right: 20px;\n }\n .ant-form-item.ant-left .ant-form-item-control {\n display: inline-block;\n display: table-cell\\0;\n vertical-align: top;\n line-height: 0;\n }\n }\n .ant-form-item-label {\n line-height: 32px;\n padding-right: 12px;\n text-align: right;\n }\n .ant-small {\n .ant-form-item-label {\n line-height: 24px;\n }\n .ant-radio-group,\n .ant-checkbox-group {\n line-height: 24px;\n min-height: 24px;\n }\n }\n .ant-large {\n .ant-form-item-label {\n line-height: 40px;\n }\n .ant-radio-group,\n .ant-checkbox-group {\n line-height: 40px;\n min-height: 40px;\n }\n }\n .ant-form-item-label label[required]:before {\n margin-right: 4px;\n content: '*';\n color: #ff3000;\n }\n .ant-form-item-help {\n margin-top: 4px;\n font-size: 12px;\n line-height: 1.5;\n color: #999;\n }\n .ant-form-item.has-error .ant-form-item-help {\n color: #ff3000;\n }\n .ant-radio-group,\n .ant-checkbox-group {\n line-height: 32px;\n & > label {\n margin-right: 15px;\n }\n }\n .ant-range {\n margin-top: 10px;\n }\n .ant-number-picker-normal {\n min-width: 62px;\n width: 100px;\n .ant-number-picker-input-wrap {\n width: calc(100% - 22px);\n .ant-number-picker-input {\n width: 100%;\n input {\n text-align: left;\n padding: 0 8px;\n }\n }\n }\n }\n .ant-table {\n table {\n table-layout: auto;\n }\n }\n .ant-rating-medium {\n min-height: 30px;\n line-height: 30px;\n }\n .ant-rating-small {\n min-height: 24px;\n line-height: 24px;\n }\n .ant-rating-large {\n min-height: 40px;\n line-height: 40px;\n }\n "]); + + _templateObject2 = function _templateObject2() { + return data; + }; + + return data; +} + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n margin-bottom: 6px;\n .ant-form-item-control {\n display: block;\n line-height: 32px;\n }\n &.field-table {\n .ant-form-item-control {\n overflow: auto;\n }\n }\n .antd-uploader {\n display: block;\n }\n .ant-form-item-msg {\n &.ant-form-item-space {\n min-height: 20px;\n .ant-form-item-help,\n .ant-form-item-extra {\n margin-top: 0;\n line-height: 1.5;\n }\n }\n }\n .ant-form-item-extra {\n color: #888;\n font-size: 12px;\n line-height: 1.7;\n }\n &.ant-form-item.ant-row {\n display: flex;\n }\n .ant-col {\n padding-right: 0;\n }\n .ant-card-head {\n background: none;\n }\n .ant-form-item-label label:after {\n content: '';\n }\n .ant-form-item-label label {\n color: #666;\n font-size: 12px;\n }\n ul {\n padding: 0;\n li {\n margin: 0;\n & + li {\n margin: 0;\n }\n }\n }\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +/** + * 轻量级 Form，不包含任何数据管理能力 + * + */ +var _React$createContext = _react.default.createContext(), + FormProvider = _React$createContext.Provider, + FormConsumer = _React$createContext.Consumer; + +exports.FormConsumer = FormConsumer; +exports.FormProvider = FormProvider; + +var normalizeCol = function normalizeCol(col) { + return typeof col === 'object' ? col : { + span: col + }; +}; + +var getParentNode = function getParentNode(node, selector) { + if (!node || node && !node.matches) return; + if (node.matches(selector)) return node;else { + return getParentNode(node.parentNode || node.parentElement, selector); + } +}; + +var FormItem = (0, _styledComponents.default)((_temp = _class = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(FormItem, _React$Component); + + function FormItem() { + return _React$Component.apply(this, arguments) || this; + } + + var _proto = FormItem.prototype; + + _proto.getItemLabel = function getItemLabel() { + var _classNames; + + var _this$props = this.props, + id = _this$props.id, + required = _this$props.required, + label = _this$props.label, + labelCol = _this$props.labelCol, + wrapperCol = _this$props.wrapperCol, + prefix = _this$props.prefix, + extra = _this$props.extra, + labelAlign = _this$props.labelAlign, + labelTextAlign = _this$props.labelTextAlign, + autoAddColon = _this$props.autoAddColon, + isTableColItem = _this$props.isTableColItem; + + if (!label || isTableColItem) { + return null; + } + + var ele = _react.default.createElement("label", { + htmlFor: id, + required: required, + key: "label" + }, label, label === ' ' ? '' : autoAddColon ? '：' : ''); + + var cls = (0, _classnames.default)((_classNames = {}, _classNames[prefix + "form-item-label"] = true, _classNames[prefix + "left"] = labelTextAlign === 'left', _classNames)); + + if ((wrapperCol || labelCol) && labelAlign !== 'top') { + return _react.default.createElement(_grid.Col, _extends({}, normalizeCol(labelCol), { + className: cls + }), ele, (extra && extra.length > 20 || _react.default.isValidElement(extra)) && this.renderHelper()); + } + + return _react.default.createElement("div", { + className: cls + }, ele); + }; + + _proto.getItemWrapper = function getItemWrapper() { + var _this$props2 = this.props, + labelCol = _this$props2.labelCol, + wrapperCol = _this$props2.wrapperCol, + children = _this$props2.children, + extra = _this$props2.extra, + label = _this$props2.label, + labelAlign = _this$props2.labelAlign, + help = _this$props2.help, + prefix = _this$props2.prefix, + noMinHeight = _this$props2.noMinHeight, + size = _this$props2.size, + isTableColItem = _this$props2.isTableColItem; + + var message = _react.default.createElement("div", { + className: prefix + "form-item-msg " + (!noMinHeight ? prefix + "form-item-space" : '') + }, help && _react.default.createElement("div", { + className: prefix + "form-item-help" + }, help), !help && extra && extra.length <= 20 && _react.default.createElement("div", { + className: prefix + "form-item-extra" + }, extra)); + + if ((wrapperCol || labelCol) && labelAlign !== 'top' && !isTableColItem && label) { + return _react.default.createElement(_grid.Col, _extends({}, normalizeCol(wrapperCol), { + className: prefix + "form-item-control", + key: "item" + }), _react.default.cloneElement(children, { + size: size + }), message); + } + + return _react.default.createElement("div", { + className: prefix + "form-item-control" + }, _react.default.cloneElement(children, { + size: size + }), message); + }; + + _proto.renderHelper = function renderHelper() { + return _react.default.createElement(_antd.Popover, { + closable: false, + placement: "top", + content: this.props.extra + }, _react.default.createElement(_antd.Icon, { + type: "question-circle", + size: "small" + })); + }; + + _proto.render = function render() { + var _classNames2; + + var _this$props3 = this.props, + className = _this$props3.className, + labelAlign = _this$props3.labelAlign, + labelTextAlign = _this$props3.labelTextAlign, + style = _this$props3.style, + prefix = _this$props3.prefix, + wrapperCol = _this$props3.wrapperCol, + labelCol = _this$props3.labelCol, + size = _this$props3.size, + help = _this$props3.help, + extra = _this$props3.extra, + noMinHeight = _this$props3.noMinHeight, + isTableColItem = _this$props3.isTableColItem, + validateState = _this$props3.validateState, + autoAddColon = _this$props3.autoAddColon, + required = _this$props3.required, + type = _this$props3.type, + schema = _this$props3.schema, + others = _objectWithoutPropertiesLoose(_this$props3, ["className", "labelAlign", "labelTextAlign", "style", "prefix", "wrapperCol", "labelCol", "size", "help", "extra", "noMinHeight", "isTableColItem", "validateState", "autoAddColon", "required", "type", "schema"]); + + var itemClassName = (0, _classnames.default)((_classNames2 = {}, _classNames2[prefix + "form-item"] = true, _classNames2["" + prefix + labelAlign] = labelAlign, _classNames2["has-" + validateState] = !!validateState, _classNames2["" + prefix + size] = !!size, _classNames2["" + className] = !!className, _classNames2["field-" + type] = !!type, _classNames2)); // 垂直模式并且左对齐才用到 + + var Tag = (wrapperCol || labelCol) && labelAlign !== 'top' ? _grid.Row : 'div'; + var label = labelAlign === 'inset' ? null : this.getItemLabel(); + return _react.default.createElement(Tag, _extends({}, others, { + gutter: 0, + className: itemClassName, + style: style + }), label, this.getItemWrapper()); + }; + + return FormItem; +}(_react.default.Component), _defineProperty(_class, "defaultProps", { + prefix: 'ant-' +}), _temp))(_templateObject()); +exports.FormItem = FormItem; + +var toArr = function toArr(val) { + return Array.isArray(val) ? val : val ? [val] : []; +}; + +var hasRequired = function hasRequired(schema) { + if (schema.required) return true; + if (schema['x-rules'] && schema['x-rules'].required) return true; + return toArr(schema['x-rules']).some(function (v) { + return v && v.required; + }); +}; + +(0, _react2.registerFormWrapper)(function (OriginForm) { + OriginForm = (0, _styledComponents.default)(OriginForm)(_templateObject2()); + + var Form = + /*#__PURE__*/ + function (_React$Component2) { + _inheritsLoose(Form, _React$Component2); + + function Form() { + var _this; + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _React$Component2.call.apply(_React$Component2, [this].concat(args)) || this; + + _defineProperty(_assertThisInitialized(_this), "FormRef", _react.default.createRef()); + + return _this; + } + + var _proto2 = Form.prototype; + + _proto2.validateFailedHandler = function validateFailedHandler(onValidateFailed) { + var _this2 = this; + + return function () { + if ((0, _utils.isFn)(onValidateFailed)) { + onValidateFailed.apply(void 0, arguments); + } + + var container = _this2.FormRef.current; + + if (container) { + var errors = container.querySelectorAll('.ant-form-item-help'); + + if (errors && errors.length) { + var node = getParentNode(errors[0], '.ant-form-item'); + + if (node) { + (0, _utils.moveTo)(node); + } + } + } + }; + }; + + _proto2.render = function render() { + var _classNames3; + + var _this$props4 = this.props, + className = _this$props4.className, + inline = _this$props4.inline, + size = _this$props4.size, + labelAlign = _this$props4.labelAlign, + labelTextAlign = _this$props4.labelTextAlign, + autoAddColon = _this$props4.autoAddColon, + children = _this$props4.children, + component = _this$props4.component, + labelCol = _this$props4.labelCol, + wrapperCol = _this$props4.wrapperCol, + style = _this$props4.style, + prefix = _this$props4.prefix, + others = _objectWithoutPropertiesLoose(_this$props4, ["className", "inline", "size", "labelAlign", "labelTextAlign", "autoAddColon", "children", "component", "labelCol", "wrapperCol", "style", "prefix"]); + + var formClassName = (0, _classnames.default)((_classNames3 = {}, _classNames3[prefix + "form"] = true, _classNames3[prefix + "inline"] = inline, _classNames3["" + prefix + size] = size, _classNames3[prefix + "form-" + labelAlign] = !!labelAlign, _classNames3[className] = !!className, _classNames3)); + return _react.default.createElement(FormProvider, { + value: { + labelAlign: labelAlign, + labelTextAlign: labelTextAlign, + labelCol: labelCol, + wrapperCol: wrapperCol, + inline: inline, + size: size, + autoAddColon: autoAddColon, + FormRef: this.FormRef + } + }, _react.default.createElement(OriginForm, _extends({}, others, { + formRef: this.FormRef, + onValidateFailed: this.validateFailedHandler(others.onValidateFailed), + className: formClassName, + style: style + }), children)); + }; + + return Form; + }(_react.default.Component); + + _defineProperty(Form, "defaultProps", { + component: 'form', + prefix: 'ant-', + size: 'medium', + labelAlign: 'left', + locale: _locale.default, + autoAddColon: true + }); + + _defineProperty(Form, "displayName", 'SchemaForm'); + + Form.LOCALE = _locale.default; + return Form; +}); + +var isTableColItem = function isTableColItem(path, getSchema) { + var schema = getSchema(path); + return schema && schema.type === 'array' && schema['x-component'] === 'table'; +}; + +(0, _react2.registerFieldMiddleware)(function (Field) { + return function (props) { + var name = props.name, + errors = props.errors, + path = props.path, + editable = props.editable, + schema = props.schema, + getSchema = props.getSchema; + if (path.length === 0) return _react.default.createElement(Field, props); // 根节点是不需要包FormItem的 + + return _react.default.createElement(FormConsumer, {}, function (_ref) { + var labelAlign = _ref.labelAlign, + labelTextAlign = _ref.labelTextAlign, + labelCol = _ref.labelCol, + wrapperCol = _ref.wrapperCol, + size = _ref.size, + autoAddColon = _ref.autoAddColon; + return _react.default.createElement(FormItem, _extends({ + labelAlign: labelAlign, + labelTextAlign: labelTextAlign, + labelCol: labelCol, + wrapperCol: wrapperCol, + autoAddColon: autoAddColon, + size: size + }, schema['x-item-props'], { + label: schema.title || schema['x-props'] && schema['x-props'].title, + noMinHeight: schema.type === 'object', + isTableColItem: isTableColItem(path.slice(0, path.length - 2), getSchema), + type: schema['x-component'] || schema['type'], + id: name, + validateState: toArr(errors).length ? 'error' : undefined, + required: editable === false ? false : hasRequired(schema), + extra: schema.description, + help: toArr(errors).join(' , ') || schema['x-item-props'] && schema['x-item-props'].help + }), _react.default.createElement(Field, props)); + }); + }; +}); \ No newline at end of file diff --git a/packages/antd/lib/index.js b/packages/antd/lib/index.js new file mode 100644 index 00000000000..cbd2766f4c5 --- /dev/null +++ b/packages/antd/lib/index.js @@ -0,0 +1,69 @@ +"use strict"; + +exports.__esModule = true; +var _exportNames = {}; +exports.default = void 0; + +require("./form"); + +require("./fields/string"); + +require("./fields/number"); + +require("./fields/boolean"); + +require("./fields/date"); + +require("./fields/time"); + +require("./fields/range"); + +require("./fields/upload"); + +require("./fields/checkbox"); + +require("./fields/radio"); + +require("./fields/rating"); + +require("./fields/transfer"); + +require("./fields/array"); + +require("./fields/table"); + +require("./fields/password"); + +var _react = require("@uform/react"); + +Object.keys(_react).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _react[key]; +}); + +var _formButtonGroup = require("./components/formButtonGroup"); + +Object.keys(_formButtonGroup).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _formButtonGroup[key]; +}); + +var _button = require("./components/button"); + +Object.keys(_button).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _button[key]; +}); + +var _layout = require("./components/layout"); + +Object.keys(_layout).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _layout[key]; +}); +var _default = _react.SchemaForm; +exports.default = _default; \ No newline at end of file diff --git a/packages/antd/lib/locale.js b/packages/antd/lib/locale.js new file mode 100644 index 00000000000..c1fc6d9a1e5 --- /dev/null +++ b/packages/antd/lib/locale.js @@ -0,0 +1,11 @@ +"use strict"; + +exports.__esModule = true; +exports.default = void 0; +var _default = { + addItem: '添加', + array_invalid_minItems: '条目数不允许小于%s条', + array_invalid_maxItems: '条目数不允许大于%s条', + operations: '操作' +}; +exports.default = _default; \ No newline at end of file diff --git a/packages/antd/lib/utils.js b/packages/antd/lib/utils.js new file mode 100644 index 00000000000..077028d8d73 --- /dev/null +++ b/packages/antd/lib/utils.js @@ -0,0 +1,297 @@ +"use strict"; + +exports.__esModule = true; +var _exportNames = { + StateLoading: true, + acceptEnum: true, + mapLoadingProps: true, + mapTextComponent: true, + compose: true, + transformDataSourceKey: true, + moveTo: true +}; +exports.moveTo = exports.transformDataSourceKey = exports.compose = exports.mapTextComponent = exports.mapLoadingProps = exports.acceptEnum = exports.StateLoading = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _antd = require("antd"); + +var _reactDom = _interopRequireDefault(require("react-dom")); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +var _moveto = _interopRequireDefault(require("moveto")); + +var _utils = require("@uform/utils"); + +Object.keys(_utils).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _utils[key]; +}); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _templateObject2() { + var data = _taggedTemplateLiteralLoose(["\n height: 32px;\n line-height: 32px;\n vertical-align: middle;\n font-size: 13px;\n color: #333;\n &.small {\n height: 24px;\n line-height: 24px;\n }\n &.large {\n height: 40px;\n line-height: 40px;\n }\n"]); + + _templateObject2 = function _templateObject2() { + return data; + }; + + return data; +} + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n min-width: 200px;\n max-width: 300px;\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +var WrapSelect = (0, _styledComponents.default)( +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(_class, _React$Component); + + function _class() { + return _React$Component.apply(this, arguments) || this; + } + + var _proto = _class.prototype; + + _proto.render = function render() { + var _this$props = this.props, + _this$props$dataSourc = _this$props.dataSource, + dataSource = _this$props$dataSourc === void 0 ? [] : _this$props$dataSourc, + others = _objectWithoutPropertiesLoose(_this$props, ["dataSource"]); + + var children = dataSource.map(function (item) { + var label = item.label, + value = item.value, + others = _objectWithoutPropertiesLoose(item, ["label", "value"]); + + return _react.default.createElement(_antd.Select.Option, _extends({ + key: value + }, others, { + label: label, + value: value + }), label); + }); + return _react.default.createElement(_antd.Select, _extends({ + className: this.props.className + }, others), children); + }; + + return _class; +}(_react.default.Component))(_templateObject()); +var Text = (0, _styledComponents.default)(function (props) { + var value; + + if (props.dataSource && props.dataSource.length) { + var find = props.dataSource.filter(function (_ref) { + var value = _ref.value; + return Array.isArray(props.value) ? props.value.indexOf(value) > -1 : props.value === value; + }); + value = find.map(function (item) { + return item.label; + }).join(' , '); + } else { + value = Array.isArray(props.value) ? props.value.join(' ~ ') : String(props.value || ''); + } + + return _react.default.createElement("div", { + className: props.className + " " + (props.size || '') + " text-field" + }, value || 'N/A'); +})(_templateObject2()); + +var StateLoading = function StateLoading(Target) { + return ( + /*#__PURE__*/ + function (_React$Component2) { + _inheritsLoose(Select, _React$Component2); + + function Select() { + return _React$Component2.apply(this, arguments) || this; + } + + var _proto2 = Select.prototype; + + _proto2.componentDidMount = function componentDidMount() { + if (this.wrapper) { + this.wrapperDOM = _reactDom.default.findDOMNode(this.wrapper); + this.mapState(); + } + }; + + _proto2.componentDidUpdate = function componentDidUpdate() { + this.mapState(); + }; + + _proto2.mapState = function mapState() { + var _this = this; + + var state = this.props.state; + var loadingName = 'anticon-spin'; + var iconSizeClassNames = ['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl']; + this.classList = this.classList || []; + + if (this.wrapperDOM) { + var icon = this.wrapperDOM.querySelector('.anticon'); + if (!icon || !icon.classList) return; + + if (state === 'loading') { + icon.classList.forEach(function (className) { + if (className.indexOf('anticon-') > -1) { + if (className !== loadingName && iconSizeClassNames.every(function (val) { + return "anticon-" + val !== className; + })) { + icon.classList.remove(className); + + _this.classList.push(className); + } + } + }); + + if (!icon.classList.contains(loadingName)) { + icon.classList.add(loadingName); + } + } else { + icon.classList.remove(loadingName); + this.classList.forEach(function (className) { + icon.classList.add(className); + }); + this.classList = []; + } + } + }; + + _proto2.render = function render() { + var _this2 = this; + + return _react.default.createElement(Target, _extends({ + ref: function ref(inst) { + if (inst) { + _this2.wrapper = inst; + } + } + }, this.props)); + }; + + return Select; + }(_react.default.Component) + ); +}; + +exports.StateLoading = StateLoading; +var Select = StateLoading(WrapSelect); + +var acceptEnum = function acceptEnum(component) { + return function (_ref2) { + var dataSource = _ref2.dataSource, + others = _objectWithoutPropertiesLoose(_ref2, ["dataSource"]); + + if (dataSource || others.showSearch) { + return _react.default.createElement(Select, _extends({ + dataSource: dataSource + }, others)); + } else { + return _react.default.createElement(component, others); + } + }; +}; + +exports.acceptEnum = acceptEnum; + +var mapLoadingProps = function mapLoadingProps(props, _ref3) { + var loading = _ref3.loading, + size = _ref3.size; + + if (loading) { + props.state = props.state || 'loading'; + props.loading = !!props.state; + } + + if (size) { + props.size = size; + } +}; + +exports.mapLoadingProps = mapLoadingProps; + +var mapTextComponent = function mapTextComponent(Target, props, _ref4) { + var editable = _ref4.editable, + name = _ref4.name; + + if (editable !== undefined) { + if ((0, _utils.isFn)(editable)) { + if (!editable(name)) { + return Text; + } + } else if (editable === false) { + return Text; + } + } + + return Target; +}; + +exports.mapTextComponent = mapTextComponent; + +var compose = function compose() { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return function (payload) { + for (var _len2 = arguments.length, extra = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + extra[_key2 - 1] = arguments[_key2]; + } + + return args.reduce(function (buf, fn) { + return buf !== undefined ? fn.apply(void 0, [buf].concat(extra)) : fn.apply(void 0, [payload].concat(extra)); + }, payload); + }; +}; + +exports.compose = compose; + +var transformDataSourceKey = function transformDataSourceKey(component, dataSourceKey) { + return function (_ref5) { + var _extends2; + + var dataSource = _ref5.dataSource, + others = _objectWithoutPropertiesLoose(_ref5, ["dataSource"]); + + return _react.default.createElement(component, _extends((_extends2 = {}, _extends2[dataSourceKey] = dataSource, _extends2), others)); + }; +}; + +exports.transformDataSourceKey = transformDataSourceKey; + +var moveTo = function moveTo(element) { + if (!element) return; + + if (element.scrollIntoView) { + element.scrollIntoView({ + behavior: 'smooth', + inline: 'start', + block: 'start' + }); + } else { + new _moveto.default().move(element.getBoundingClientRect().top); + } +}; + +exports.moveTo = moveTo; \ No newline at end of file diff --git a/packages/antd/package.json b/packages/antd/package.json index 431dfd9c201..3694bfd0606 100644 --- a/packages/antd/package.json +++ b/packages/antd/package.json @@ -2,7 +2,7 @@ "name": "@uform/antd", "version": "0.1.0-alpha.1", "license": "MIT", - "main": "lib/index.js", + "main": "lib", "repository": { "type": "git", "url": "git+https://github.com/alibaba/uform.git" diff --git a/packages/core/lib/field.js b/packages/core/lib/field.js new file mode 100644 index 00000000000..b2284955daa --- /dev/null +++ b/packages/core/lib/field.js @@ -0,0 +1,328 @@ +"use strict"; + +exports.__esModule = true; +exports.Field = void 0; + +var _utils = require("./utils"); + +var _immer = _interopRequireWildcard(require("immer")); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +var filterSchema = function filterSchema(_, key) { + return key !== 'properties' && key !== 'items'; +}; + +(0, _immer.setAutoFreeze)(false); + +var isValid = function isValid(val) { + return val !== undefined; +}; + +var Field = +/*#__PURE__*/ +function () { + function Field(context, options) { + this.fieldbrd = new _utils.Broadcast(); + this.context = context; + this.dirty = false; + this.pristine = true; + this.valid = true; + this.invalid = false; + this.visible = true; + this.destructed = false; + this.loading = false; + this.errors = []; + this.effectErrors = []; + this.initialized = false; + this.initialize(options); + this.initialized = true; + } + + var _proto = Field.prototype; + + _proto.initialize = function initialize(options) { + if (this.initialized) { + this.value = options.value; + + if (isValid(options.initialValue)) { + this.initialValue = (0, _utils.clone)(options.initialValue); + } + } else { + this.value = options.value; + this.initialValue = options.initialValue; + } + + this.name = isValid(options.name) ? options.name : this.name; + this.namePath = (0, _utils.resolveFieldPath)(this.name); + this.editable = this.getEditable(options.editable); + this.path = (0, _utils.resolveFieldPath)(isValid(options.path) ? options.path : this.path); + this.rules = isValid(options.rules) ? (0, _utils.clone)(options.rules) : this.rules; + this.required = (0, _utils.hasRequired)(this.rules); + this.props = (0, _utils.clone)(isValid(options.props) ? options.props : this.props, filterSchema); + + if ((0, _utils.isFn)(options.onChange)) { + this.onChange(options.onChange); + } + }; + + _proto.getEditable = function getEditable(editable) { + if ((0, _utils.isFn)(editable)) return editable(this.name); + return editable; + }; + + _proto.onChange = function onChange(fn) { + if ((0, _utils.isFn)(fn)) { + if (this.unSubscribeOnChange) this.unSubscribeOnChange(); + fn(this.publishState()); + this.unSubscribeOnChange = this.subscribe(fn); + } + }; + + _proto.pathEqual = function pathEqual(path) { + if ((0, _utils.isStr)(path)) { + if (path === this.name) return true; + } + + path = (0, _utils.resolveFieldPath)(path); + + if (path.length === this.path.length) { + for (var i = 0; i < path.length; i++) { + if (path[i] !== this.path[i]) return false; + } + + return true; + } else if (path.length === this.namePath.length) { + for (var _i = 0; _i < path.length; _i++) { + if (path[_i] !== this.namePath[_i]) return false; + } + + return true; + } + + return false; + }; + + _proto.publishState = function publishState() { + return (0, _utils.publishFieldState)(this); + }; + + _proto.subscribe = function subscribe(callback) { + return this.fieldbrd.subscribe(callback); + }; + + _proto.notify = function notify(force) { + if (!this.dirty && !force) return; + this.fieldbrd.notify(this.publishState()); + this.dirty = false; + this.dirtyType = ''; + }; + + _proto.unsubscribe = function unsubscribe() { + this.fieldbrd.unsubscribe(); + }; + + _proto.changeEditable = function changeEditable(editable) { + editable = this.getEditable(editable); + + if (editable !== undefined && this.editable !== editable) { + this.editable = editable; + this.dirty = true; + this.notify(); + } + }; + + _proto.changeRules = function changeRules(rules) { + var lastRules = this.rules; + + if (!(0, _utils.isEqual)(lastRules, rules)) { + this.rules = (0, _utils.clone)(rules); + this.dirty = true; + this.notify(); + } + }; + + _proto.changeProps = function changeProps(props, force) { + var lastProps = this.props; + + if (force || !(0, _utils.isEqual)(lastProps, props, filterSchema)) { + this.props = (0, _utils.clone)(props, filterSchema); + this.dirty = true; + this.notify(); + } + }; + + _proto.changeValue = function changeValue(value) { + this.context.setValue(this.name, value); + }; + + _proto.setInitalValue = function setInitalValue() { + var lastValue = this.context.getValue(this.name); + + if (this.initialValue !== undefined && !(0, _utils.isEqual)(lastValue, this.initialValue)) { + var initialValue = (0, _utils.clone)(this.initialValue); + this.context.setIn(this.name, initialValue); + this.value = initialValue; + } + }; + + _proto.removeValue = function removeValue() { + this.value = undefined; + if (!this.context) return; + this.context.deleteIn(this.name); + + if (typeof this.value === 'object') { + this.context.updateChildrenVisible(this, false); + } + }; + + _proto.resetValue = function resetValue() { + if (this.initialValue !== undefined) { + var lastValue = this.value; + + if (!(0, _utils.isEqual)(lastValue, this.initialValue)) { + this.value = (0, _utils.clone)(this.initialValue); + this.context.setIn(this.name, this.value); + this.dirty = true; + } + } + }; + + _proto.checkState = function checkState(published) { + if (published === void 0) { + published = this.publishState(); + } + + if (!(0, _utils.isEqual)(published.value, this.value)) { + this.value = published.value; + this.pristine = false; + this.context.setIn(this.name, this.value); + this.context.updateChildrenValue(this); + this.dirtyType = 'value'; + this.dirty = true; + } + + if (!(0, _utils.isEqual)(published.initialValue, this.initialValue)) { + this.initialValue = published.initialValue; + this.context.setInitialValueIn(this.name, this.value); + this.context.updateChildrenInitalValue(this); + this.dirtyType = 'initialValue'; + this.dirty = true; + } + + var editable = this.getEditable(published.editable); + + if (!(0, _utils.isEqual)(editable, this.editable)) { + this.editable = editable; + this.dirtyType = 'editable'; + this.dirty = true; + } + + published.errors = (0, _utils.toArr)(published.errors).filter(function (v) { + return !!v; + }); + + if (!(0, _utils.isEqual)(published.errors, this.effectErrors)) { + this.effectErrors = published.errors; + this.valid = this.effectErrors.length > 0 && this.errors.length > 0; + this.invalid = !this.valid; + this.dirtyType = 'errors'; + this.dirty = true; + } + + if (!(0, _utils.isEqual)(published.rules, this.rules)) { + this.rules = published.rules; + this.errors = []; + this.valid = true; + this.invalid = false; + this.dirtyType = 'rules'; + this.dirty = true; + } + + if (!(0, _utils.isEqual)(published.required, this.required)) { + this.required = published.required; + + if (this.required) { + if (!(0, _utils.hasRequired)(this.rules)) { + this.rules = (0, _utils.toArr)(this.rules).concat({ + required: true + }); + } + } else { + this.rules = (0, _utils.toArr)(this.rules).filter(function (rule) { + if (rule && rule.required) return false; + return true; + }); + } + + this.dirty = true; + } + + if (published.loading !== this.loading) { + this.loading = published.loading; + this.dirtyType = 'loading'; + this.dirty = true; + } + + if (!(0, _utils.isEqual)(published.visible, this.visible)) { + this.visible = published.visible; + + if (this.visible) { + this.value = this.value !== undefined ? this.value : (0, _utils.clone)(this.initialValue); + if (this.value !== undefined) this.context.setIn(this.name, this.value); + this.context.updateChildrenVisible(this, true); + } else { + this.context.deleteIn(this.name); + this.context.updateChildrenVisible(this, false); + } + + this.dirtyType = 'visible'; + this.dirty = true; + } + + if (!(0, _utils.isEqual)(published.props, this.props, filterSchema)) { + this.props = (0, _utils.clone)(published.props, filterSchema); + this.dirtyType = 'props'; + this.dirty = true; + } + }; + + _proto.updateState = function updateState(reducer) { + if (!(0, _utils.isFn)(reducer)) return; + var published = (0, _immer.default)({ + name: this.name, + path: this.path, + props: (0, _utils.clone)(this.props, filterSchema), + value: (0, _utils.clone)(this.value), + initialValue: (0, _utils.clone)(this.initialValue), + valid: this.valid, + loading: this.loading, + invalid: this.invalid, + pristine: this.pristine, + rules: (0, _utils.clone)(this.rules), + errors: (0, _utils.clone)(this.effectErrors), + visible: this.visible, + required: this.required + }, reducer); + this.checkState(published); + }; + + _proto.destructor = function destructor() { + if (this.destructed) return; + this.destructed = true; + + if (this.value !== undefined) { + this.value = undefined; + this.context.deleteIn(this.name); + } + + this.context.updateChildrenVisible(this, false); + delete this.context; + this.unsubscribe(); + delete this.fieldbrd; + }; + + return Field; +}(); + +exports.Field = Field; \ No newline at end of file diff --git a/packages/core/lib/form.js b/packages/core/lib/form.js new file mode 100644 index 00000000000..785d6366ff7 --- /dev/null +++ b/packages/core/lib/form.js @@ -0,0 +1,724 @@ +"use strict"; + +exports.__esModule = true; +exports.Form = void 0; + +var _utils = require("./utils"); + +var _field3 = require("./field"); + +var _validator = require("@uform/validator"); + +var _rxjs = require("rxjs"); + +var _operators = require("rxjs/operators"); + +var _path = require("./path"); + +var _immer = _interopRequireDefault(require("immer")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +var defaults = function defaults(opts) { + return _extends({ + initialValues: {}, + onSubmit: function onSubmit(values) {}, + effects: function effects($) {} + }, opts); +}; + +var Form = +/*#__PURE__*/ +function () { + function Form(opts) { + var _this = this; + + _defineProperty(this, "triggerEffect", function (eventName) { + if (_this.subscribes[eventName]) { + var _this$subscribes$even; + + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + (_this$subscribes$even = _this.subscribes[eventName]).next.apply(_this$subscribes$even, args); + } + }); + + _defineProperty(this, "setFieldState", function (path, buffer, callback) { + if (_this.destructed) return; + + if ((0, _utils.isFn)(buffer)) { + callback = buffer; + buffer = false; + } + + if ((0, _utils.isStr)(path) || (0, _utils.isArr)(path) || (0, _utils.isFn)(path)) { + _this.updateQueue.push({ + path: path, + callback: callback + }); + } + + return new Promise(function (resolve) { + if (_this.syncUpdateMode) { + _this.updateFieldStateFromQueue(buffer); + + resolve(); + } + + if (_this.updateQueue.length > 0) { + if (_this.updateRafId) (0, _utils.caf)(_this.updateRafId); + _this.updateRafId = (0, _utils.raf)(function () { + if (_this.destructed) return; + + _this.updateFieldStateFromQueue(buffer); + + resolve(); + }); + } + }); + }); + + _defineProperty(this, "getFieldState", function (path, callback) { + var field; + (0, _utils.each)(_this.fields, function (_field) { + if (_field.pathEqual(path)) { + field = _field; + return false; + } + }); + + if (field) { + return (0, _utils.isFn)(callback) ? callback(field.publishState()) : field.publishState(); + } + }); + + _defineProperty(this, "getFormState", function (callback) { + return (0, _utils.isFn)(callback) ? callback(_this.publishState()) : _this.publishState(); + }); + + _defineProperty(this, "setFormState", function (reducer) { + if (!(0, _utils.isFn)(reducer)) return; + return new Promise(function (resolve) { + var published = (0, _immer.default)((0, _utils.clone)(_this.publishState()), reducer); + + _this.checkState(published); + + resolve(); + }); + }); + + this.options = defaults(opts); + this.formbrd = new _utils.Broadcast(); + this.initialized = false; + this.state = {}; + this.fields = {}; + this.subscribes = opts.subscribes || {}; + this.updateQueue = []; + this.updateBuffer = {}; + this.schema = opts.schema || {}; + this.initialize(this.options.initialValues); + this.initializeEffects(); + this.initialized = true; + this.destructed = false; + this.fieldSize = 0; + } + + var _proto = Form.prototype; + + _proto.initialize = function initialize(values) { + if (values === void 0) { + values = this.state.initialValues; + } + + var lastValues = this.state.values; + var lastDirty = this.state.dirty; + this.state = { + valid: true, + invalid: false, + errors: [], + pristine: true, + initialValues: (0, _utils.clone)(values) || {}, + values: values || {}, + dirty: lastDirty || (this.initialized ? !(0, _utils.isEqual)(values, lastValues) : false) + }; + + if (this.options.onFormChange && !this.initialized) { + this.subscribe(this.options.onFormChange); + this.options.onFormChange({ + formState: this.publishState() + }); + } + + this.updateFieldsValue(); + }; + + _proto.changeValues = function changeValues(values) { + var lastValues = this.state.values; + var lastDirty = this.state.dirty; + this.state.values = values || {}; + this.state.dirty = lastDirty || (this.initialized ? !(0, _utils.isEqual)(values, lastValues) : false); + this.updateFieldsValue(); + }; + + _proto.initializeEffects = function initializeEffects() { + var _this2 = this; + + var effects = this.options.effects; + + if ((0, _utils.isFn)(effects)) { + effects(function (eventName, $filter) { + if (!_this2.subscribes[eventName]) { + _this2.subscribes[eventName] = new _rxjs.Subject(); + } + + if ((0, _utils.isStr)($filter) || (0, _utils.isFn)($filter)) { + return _this2.subscribes[eventName].pipe((0, _operators.filter)((0, _utils.isStr)($filter) ? _path.FormPath.match($filter) : $filter)); + } + + return _this2.subscribes[eventName]; + }, { + setFieldState: this.setFieldState, + getFieldState: this.getFieldState, + getFormState: this.getFormState, + setFormState: this.setFormState + }); + } + }; + + _proto.checkState = function checkState(published) { + if (!(0, _utils.isEqual)(this.state.values, published.values)) { + this.state.values = published.values; + this.state.dirty = true; + this.updateFieldsValue(); + } + + if (!(0, _utils.isEqual)(this.state.initialValues, published.initialValues)) { + this.state.initialValues = published.initialValues; + this.state.dirty = true; + this.updateFieldInitialValue(); + } + }; + + _proto.syncUpdate = function syncUpdate(fn) { + if ((0, _utils.isFn)(fn)) { + this.syncUpdateMode = true; + fn(); + this.syncUpdateMode = false; + } + }; + + _proto.asyncUpdate = function asyncUpdate(fn) { + if ((0, _utils.isFn)(fn)) { + if (this.syncUpdateMode) { + this.syncUpdateMode = false; + fn(); + this.syncUpdateMode = true; + } else { + fn(); + } + } + }; + + _proto.updateFieldStateFromQueue = function updateFieldStateFromQueue(buffer) { + var _this3 = this; + + var failed = {}; + var rafIdMap = {}; + (0, _utils.each)(this.updateQueue, function (_ref, i) { + var path = _ref.path, + callback = _ref.callback; + (0, _utils.each)(_this3.fields, function (field) { + if (path && ((0, _utils.isFn)(path) || (0, _utils.isArr)(path) || (0, _utils.isStr)(path))) { + if ((0, _utils.isFn)(path) ? path(field) : field.pathEqual(path)) { + field.updateState(callback); + + if (_this3.syncUpdateMode) { + field.dirty = false; + } + + if (path.hasWildcard && !_this3.updateBuffer[path.string]) { + _this3.updateBuffer[path.string] = { + path: path, + callback: callback + }; + } + + if (field.dirty) { + var dirtyType = field.dirtyType; + field.notify(); + if (rafIdMap[field.name]) (0, _utils.caf)(rafIdMap[field.name]); + rafIdMap[field.name] = (0, _utils.raf)(function () { + if (dirtyType === 'value') { + _this3.internalValidate().then(function () { + _this3.formNotify(field.publishState()); + }); + } else { + _this3.formNotify(field.publishState()); + } + }); + } + } else { + failed[i] = failed[i] || 0; + failed[i]++; + + if (_this3.fieldSize <= failed[i] && (buffer || path.hasWildcard)) { + if ((0, _utils.isStr)(path) && !_this3.updateBuffer[path]) { + _this3.updateBuffer.set(path, { + path: path, + callback: callback + }); + } else if ((0, _utils.isFn)(path) && path.hasWildcard && !_this3.updateBuffer[path.string]) { + _this3.updateBuffer[path.string] = { + path: path, + callback: callback + }; + } + } + } + } + }); + }); + this.updateQueue = []; + }; + + _proto.updateFieldStateFromBuffer = function updateFieldStateFromBuffer(field) { + var _this4 = this; + + var rafIdMap = {}; + (0, _utils.each)(this.updateBuffer, function (_ref2, key) { + var path = _ref2.path, + callback = _ref2.callback; + + if ((0, _utils.isFn)(path) ? path(field) : field.pathEqual(path)) { + field.updateState(callback); + + if (_this4.syncUpdateMode) { + field.dirty = false; + } + + if (field.dirty) { + var dirtyType = field.dirtyType; + field.notify(); + if (rafIdMap[field.name]) (0, _utils.caf)(rafIdMap[field.name]); + rafIdMap[field.name] = (0, _utils.raf)(function () { + if (dirtyType === 'value') { + _this4.internalValidate().then(function () { + _this4.formNotify(field.publishState()); + }); + } else { + _this4.formNotify(field.publishState()); + } + }); + } + + if (!path.hasWildcard) { + delete _this4.updateBuffer[key]; + } + } + }); + }; + + _proto.internalValidate = function internalValidate(values, forceUpdate) { + var _this5 = this; + + if (values === void 0) { + values = this.state.values; + } + + if (this.destructed) return; + return new Promise(function (resolve) { + if (_this5.rafValidateId) (0, _utils.caf)(_this5.rafValidateId); + _this5.rafValidateId = (0, _utils.raf)(function () { + if (_this5.destructed) return resolve(); + return (0, _validator.runValidation)(values || _this5.state.values, _this5.fields, forceUpdate).then(function (response) { + var lastValid = _this5.state.valid; + var _errors = []; + _this5.state.valid = (0, _utils.every)(response, function (_ref3) { + var valid = _ref3.valid, + errors = _ref3.errors; + _errors = _errors.concat(errors); + return valid; + }); + _this5.state.invalid = !_this5.state.valid; + _this5.state.errors = _errors; + + if (_this5.state.valid !== lastValid) { + _this5.state.dirty = true; + } + + var lastPristine = _this5.state.pristine; + + if (!(0, _utils.isEqual)(_this5.state.values, _this5.state.initialValues)) { + _this5.state.pristine = false; + } else { + _this5.state.pristine = true; + } + + if (lastPristine !== _this5.state.pristine) { + _this5.state.dirty = true; + } + + return response; + }).then(resolve); + }); + }); + }; + + _proto.registerField = function registerField(name, options) { + var _this6 = this; + + var value = this.getValue(name); + var initialValue = this.getInitialValue(name, options.path); + var field = this.fields[name]; + + if (field) { + field.initialize(_extends({}, options, { + value: value, + initialValue: initialValue + })); + this.asyncUpdate(function () { + _this6.updateFieldStateFromBuffer(field); + }); + this.triggerEffect('onFieldChange', field.publishState()); + } else { + this.fields[name] = new _field3.Field(this, { + name: name, + value: value !== undefined ? value : initialValue, + path: options.path, + initialValue: initialValue, + rules: options.rules, + props: options.props + }); + var _field2 = this.fields[name]; + + if (options.onChange) { + this.asyncUpdate(function () { + _this6.updateFieldStateFromBuffer(_field2); + + _field2.onChange(options.onChange); + }); + this.triggerEffect('onFieldChange', _field2.publishState()); + } + + this.fieldSize++; + } + + return this.fields[name]; + }; + + _proto.setIn = function setIn(name, value) { + (0, _utils.setIn)(this.state.values, name, value); + }; + + _proto.setInitialValueIn = function setInitialValueIn(name, value) { + (0, _utils.setIn)(this.state.initialValues, name, value); + }; + + _proto.setValue = function setValue(name, value) { + var _this7 = this; + + var field = this.fields[name]; + + if (field) { + field.updateState(function (state) { + state.value = value; + }); + field.pristine = false; + + if (field.dirty) { + field.notify(); + this.internalValidate(this.state.values).then(function () { + _this7.formNotify(field.publishState()); + }); + } + } + }; + + _proto.removeValue = function removeValue(name) { + var field = this.fields[name]; + + if (field) { + field.removeValue(); + } + }; + + _proto.setErrors = function setErrors(name, errors) { + for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { + args[_key2 - 2] = arguments[_key2]; + } + + errors = (0, _utils.toArr)(errors); + var field = this.fields[name]; + + if (field) { + var lastErrors = field.errors; + + if (!(0, _utils.isEqual)(lastErrors, errors)) { + field.errors = errors.map(function (msg) { + return _validator.format.apply(void 0, [msg].concat(args)); + }); + + if (errors.length) { + field.invalid = true; + field.valid = false; + } else { + field.invalid = false; + field.valid = true; + } + + field.dirty = true; + field.notify(); + } + } + }; + + _proto.updateChildrenValue = function updateChildrenValue(parent) { + var _this8 = this; + + if (!parent.path) return; + (0, _utils.each)(this.fields, function (field, $name) { + if ((0, _utils.isChildField)(field, parent)) { + var newValue = _this8.getValue($name); + + if (!(0, _utils.isEqual)(field.value, newValue)) { + field.dirty = true; + field.value = newValue; + + _this8.triggerEffect('onFieldChange', field.publishState()); + } + } + }); + }; + + _proto.updateChildrenInitalValue = function updateChildrenInitalValue(parent) { + var _this9 = this; + + if (!parent.path) return; + (0, _utils.each)(this.fields, function (field, $name) { + if ((0, _utils.isChildField)(field, parent)) { + var newValue = _this9.getInitialValue($name); + + if (!(0, _utils.isEqual)(field.initialValue, newValue)) { + field.dirty = true; + field.initialValue = newValue; + } + } + }); + }; + + _proto.updateFieldInitialValue = function updateFieldInitialValue() { + var _this10 = this; + + if (this.state.dirty && this.initialized) { + (0, _utils.each)(this.fields, function (field, name) { + var newValue = _this10.getInitialValue(name); + + field.initialValue = (0, _utils.clone)(newValue); + }); + } + }; + + _proto.updateFieldsValue = function updateFieldsValue() { + var _this11 = this; + + if (this.state.dirty && this.initialized) { + this.internalValidate(this.state.values, true).then(function () { + _this11.formNotify(); + + (0, _utils.each)(_this11.fields, function (field, name) { + var newValue = _this11.getValue(name); + + field.updateState(function (state) { + state.value = (0, _utils.clone)(newValue); + }); + + if (field.dirty) { + (0, _utils.raf)(function () { + if (_this11.destructed) return; + field.notify(); + }); + } + }); + }); + } + }; + + _proto.updateChildrenVisible = function updateChildrenVisible(parent, visible) { + var _this12 = this; + + if (!parent.path) return; + (0, _utils.each)(this.fields, function (field, $name) { + if ($name === parent.name) return; + + if ((0, _utils.isChildField)(field, parent)) { + if (!visible) _this12.deleteIn($name);else { + var value = field.value !== undefined ? field.value : (0, _utils.clone)(field.initialValue); + if (field.value !== undefined) _this12.setIn($name, value); + } + + if (field.visible !== visible) { + field.visible = visible; + field.dirty = true; + } + } + }); + }; + + _proto.getInitialValue = function getInitialValue(name, path) { + var initialValue = (0, _utils.getIn)(this.state.initialValues, name); + var schema, schemaDefault; + + if (initialValue === undefined) { + schema = path ? (0, _utils.getSchemaNodeFromPath)(this.schema, path) : undefined; + schemaDefault = schema && schema.default; + + if (schemaDefault !== undefined) { + this.setIn(name, schemaDefault); + } + } + + return initialValue !== undefined ? initialValue : schemaDefault; + }; + + _proto.getValue = function getValue(name, copy) { + return copy ? (0, _utils.clone)((0, _utils.getIn)(this.state.values, name)) : (0, _utils.getIn)(this.state.values, name); + }; + + _proto.deleteIn = function deleteIn(name) { + (0, _utils.deleteIn)(this.state.values, name); + }; + + _proto.reset = function reset() { + var _this13 = this; + + (0, _utils.each)(this.fields, function (field, name) { + var value = _this13.getValue(name); + + var initialValue = _this13.getInitialValue(name, field.path); + + if (value === undefined && initialValue === undefined) return; + field.updateState(function (state) { + state.value = (0, _utils.clone)(initialValue); + }); + + if (field.dirty) { + (0, _utils.raf)(function () { + if (_this13.destructed) return; + field.notify(); + }); + } + }); + this.internalValidate(this.state.values, true).then(function () { + _this13.formNotify(); + + (0, _utils.raf)(function () { + var formState = _this13.publishState(); + + _this13.triggerEffect('onFormReset', formState); + + if ((0, _utils.isFn)(_this13.options.onReset)) { + _this13.options.onReset({ + formState: formState + }); + } + }); + }); + }; + + _proto.publishState = function publishState() { + return (0, _utils.publishFormState)(this.state); + }; + + _proto.formNotify = function formNotify(fieldState) { + var formState = this.publishState(); + + if ((0, _utils.isFn)(this.options.onFieldChange)) { + this.options.onFieldChange({ + formState: formState, + fieldState: fieldState + }); + } + + if (fieldState) this.triggerEffect('onFieldChange', fieldState); + + if (this.state.dirty) { + this.formbrd.notify({ + formState: formState, + fieldState: fieldState + }); + } + + this.state.dirty = false; + return formState; + }; + + _proto.validate = function validate() { + var _this14 = this; + + return this.internalValidate(this.state.values, true).then(function () { + return new Promise(function (resolve, reject) { + _this14.formNotify(); + + (0, _utils.raf)(function () { + if (_this14.state.valid) { + resolve(_this14.publishState()); + } else { + if (_this14.options.onValidateFailed) { + _this14.options.onValidateFailed(_this14.state.errors); + } + + reject(_this14.state.errors); + } + }); + }); + }); + }; + + _proto.submit = function submit() { + var _this15 = this; + + return this.validate().then(function (formState) { + _this15.triggerEffect('onFormSubmit', formState); + + if ((0, _utils.isFn)(_this15.options.onSubmit)) { + _this15.options.onSubmit({ + formState: formState + }); + } + + return formState; + }); + }; + + _proto.subscribe = function subscribe(callback) { + return this.formbrd.subscribe(callback); + }; + + _proto.destructor = function destructor() { + var _this16 = this; + + if (this.destructed) return; + this.destructed = true; + this.formbrd.unsubscribe(); + (0, _utils.each)(this.subscribes, function (effect) { + effect.unsubscribe(); + }); + (0, _utils.each)(this.fields, function (field, key) { + field.destructor(); + delete _this16.fields[key]; + }); + this.fieldSize = 0; + delete this.fields; + delete this.formbrd; + }; + + return Form; +}(); + +exports.Form = Form; \ No newline at end of file diff --git a/packages/core/lib/index.js b/packages/core/lib/index.js new file mode 100644 index 00000000000..a70ead45796 --- /dev/null +++ b/packages/core/lib/index.js @@ -0,0 +1,91 @@ +"use strict"; + +exports.__esModule = true; +var _exportNames = { + createForm: true, + setValidationLocale: true, + setValidationLanguage: true +}; +exports.default = exports.createForm = void 0; + +var _form = require("./form"); + +var _validator = require("@uform/validator"); + +exports.setValidationLocale = _validator.setLocale; +exports.setValidationLanguage = _validator.setLanguage; + +var _utils = require("./utils"); + +var _path = require("./path"); + +Object.keys(_path).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _path[key]; +}); + +var createForm = function createForm(_ref) { + var initialValues = _ref.initialValues, + onSubmit = _ref.onSubmit, + onReset = _ref.onReset, + schema = _ref.schema, + onFormChange = _ref.onFormChange, + onFieldChange = _ref.onFieldChange, + onFormWillInit = _ref.onFormWillInit, + subscribes = _ref.subscribes, + effects = _ref.effects, + onValidateFailed = _ref.onValidateFailed; + var fields = []; + initialValues = (0, _utils.caculateSchemaInitialValues)(schema, initialValues, function (_ref2, schema, value) { + var name = _ref2.name, + path = _ref2.path, + schemaPath = _ref2.schemaPath; + fields.push({ + name: name, + path: path, + schemaPath: schemaPath, + schema: schema, + value: value + }); + }); + var form = new _form.Form({ + initialValues: initialValues, + onSubmit: onSubmit, + onReset: onReset, + subscribes: subscribes, + onFormChange: onFormChange, + onFieldChange: onFieldChange, + effects: effects, + onValidateFailed: onValidateFailed, + schema: schema + }); + + if ((0, _utils.isFn)(onFormWillInit)) { + onFormWillInit(form); + } + + fields = fields.map(function (_ref3) { + var name = _ref3.name, + path = _ref3.path, + schemaPath = _ref3.schemaPath, + schema = _ref3.schema, + value = _ref3.value; + return form.registerField(name || schemaPath.join('.'), { + rules: schema['x-rules'], + path: schemaPath, + props: schema + }); + }); + form.syncUpdate(function () { + form.triggerEffect('onFormInit', form.publishState()); + fields.forEach(function (field) { + form.triggerEffect('onFieldChange', field.publishState()); + }); + }); + return form; +}; + +exports.createForm = createForm; +var _default = createForm; +exports.default = _default; \ No newline at end of file diff --git a/packages/core/lib/path.js b/packages/core/lib/path.js new file mode 100644 index 00000000000..0286bbc3044 --- /dev/null +++ b/packages/core/lib/path.js @@ -0,0 +1,65 @@ +"use strict"; + +exports.__esModule = true; +exports.FormPath = void 0; + +var _dotMatch = _interopRequireDefault(require("dot-match")); + +var _utils = require("./utils"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var withFilter = function withFilter(result, filter, payload) { + if ((0, _utils.isFn)(filter)) { + return result && filter(payload); + } + + return result; +}; + +var wildcardRE = /\.\s*\*\s*\.?/; +var FormPath = { + match: function match(matchLanguage, matchRealPath, filter) { + matchLanguage = matchLanguage + ''; + var match = (0, _dotMatch.default)(matchLanguage); + + if ((0, _utils.isFn)(matchRealPath)) { + filter = matchRealPath; + matchRealPath = false; + } + + var matcher = function matcher(payload) { + if (payload && payload.fieldState) { + return withFilter(match((0, _utils.resolveFieldPath)(matchRealPath ? payload.fieldState.path : payload.fieldState.name)), filter, payload.fieldState); + } else if (payload && payload.name && payload.path) { + return withFilter(match((0, _utils.resolveFieldPath)(matchRealPath ? payload.path : payload.name)), filter, payload); + } else if ((0, _utils.isStr)(payload)) { + return withFilter(match((0, _utils.resolveFieldPath)(payload)), filter, { + name: payload + }); + } else if ((0, _utils.isArr)(payload)) { + return withFilter(match(payload), filter, { + path: payload + }); + } + + return false; + }; + + matcher.hasWildcard = wildcardRE.test(matchLanguage); + matcher.string = matchLanguage; + return matcher; + }, + exclude: function exclude(matcher) { + return function (path) { + return (0, _utils.isFn)(matcher) ? !matcher(path) : (0, _utils.isStr)(matcher) ? !FormPath.match(matcher)(path) : false; + }; + }, + transform: function transform(path, regexp, calllback) { + var args = (0, _utils.reduce)((0, _utils.resolveFieldPath)(path), function (buf, key) { + return new RegExp(regexp).test(key) ? buf.concat(key) : buf; + }, []); + return calllback.apply(void 0, args); + } +}; +exports.FormPath = FormPath; \ No newline at end of file diff --git a/packages/core/lib/utils.js b/packages/core/lib/utils.js new file mode 100644 index 00000000000..82e052a412b --- /dev/null +++ b/packages/core/lib/utils.js @@ -0,0 +1,123 @@ +"use strict"; + +exports.__esModule = true; +var _exportNames = { + raf: true, + caf: true, + resolveFieldPath: true, + isChildField: true, + hasRequired: true, + publishFormState: true, + publishFieldState: true +}; +exports.publishFieldState = exports.publishFormState = exports.hasRequired = exports.isChildField = exports.resolveFieldPath = exports.caf = exports.raf = void 0; + +var _scheduler = require("scheduler"); + +var _utils = require("@uform/utils"); + +Object.keys(_utils).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _utils[key]; +}); + +/* eslint-disable camelcase */ + +/* eslint-disable camelcase */ +var self = void 0 || global || window; +var raf = self.requestAnimationFrame && (_scheduler.scheduleCallback || _scheduler.unstable_scheduleCallback || self.requestAnimationFrame) || self.setTimeout; +exports.raf = raf; +var caf = self.requestAnimationFrame && (_scheduler.cancelCallback || _scheduler.unstable_cancelCallback || self.cancelAnimationFrame) || self.clearTimeout; +exports.caf = caf; + +var resolveFieldPath = function resolveFieldPath(path) { + if (!(0, _utils.isArr)(path)) { + return (0, _utils.isStr)(path) ? resolveFieldPath((0, _utils.getPathSegments)(path)) : undefined; + } + + return path.reduce(function (buf, key) { + return buf.concat((0, _utils.getPathSegments)(key)); + }, []); +}; + +exports.resolveFieldPath = resolveFieldPath; + +var isChildField = function isChildField(field, parent) { + if (field && parent && field.path && parent.path) { + for (var i = 0; i < parent.path.length; i++) { + if (field.path[i] !== parent.path[i]) { + return false; + } + } + + return parent.path.length < field.path.length; + } + + return false; +}; + +exports.isChildField = isChildField; + +var hasRequired = function hasRequired(rules) { + return (0, _utils.toArr)(rules).some(function (rule) { + return rule && rule.required; + }); +}; + +exports.hasRequired = hasRequired; + +var publishFormState = function publishFormState(state) { + var values = state.values, + valid = state.valid, + invalid = state.invalid, + errors = state.errors, + pristine = state.pristine, + dirty = state.dirty; + return { + values: values, + valid: valid, + invalid: invalid, + errors: errors, + pristine: pristine, + dirty: dirty + }; +}; + +exports.publishFormState = publishFormState; + +var publishFieldState = function publishFieldState(state) { + var value = state.value, + valid = state.valid, + invalid = state.invalid, + errors = state.errors, + visible = state.visible, + editable = state.editable, + initialValue = state.initialValue, + name = state.name, + path = state.path, + props = state.props, + effectErrors = state.effectErrors, + loading = state.loading, + pristine = state.pristine, + required = state.required, + rules = state.rules; + return { + value: value, + valid: valid, + invalid: invalid, + editable: editable, + visible: visible, + loading: loading, + errors: errors.concat(effectErrors), + pristine: pristine, + initialValue: initialValue, + name: name, + path: path, + props: props, + required: required, + rules: rules + }; +}; + +exports.publishFieldState = publishFieldState; \ No newline at end of file diff --git a/packages/core/package.json b/packages/core/package.json index 458e10a07d2..5e7854eef32 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -2,7 +2,7 @@ "name": "@uform/core", "version": "0.1.0-alpha.1", "license": "MIT", - "main": "lib/index.js", + "main": "lib", "repository": { "type": "git", "url": "git+https://github.com/alibaba/uform.git" diff --git a/packages/next/lib/components/button.js b/packages/next/lib/components/button.js new file mode 100644 index 00000000000..d964e69a4d5 --- /dev/null +++ b/packages/next/lib/components/button.js @@ -0,0 +1,49 @@ +"use strict"; + +exports.__esModule = true; +exports.Reset = exports.Submit = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _next = require("@alifd/next"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +var Submit = function Submit(_ref) { + var showLoading = _ref.showLoading, + props = _objectWithoutPropertiesLoose(_ref, ["showLoading"]); + + return _react.default.createElement(_react2.FormConsumer, null, function (_ref2) { + var status = _ref2.status, + schema = _ref2.schema; + return _react.default.createElement(_next.Button, _extends({ + type: "primary", + htmlType: "submit" + }, props, { + loading: props.showLoading ? status === 'submitting' : undefined + }), props.children || '提交'); + }); +}; + +exports.Submit = Submit; +Submit.defaultProps = { + showLoading: true +}; + +var Reset = function Reset(props) { + return _react.default.createElement(_react2.FormConsumer, null, function (_ref3) { + var status = _ref3.status, + reset = _ref3.reset; + return _react.default.createElement(_next.Button, _extends({}, props, { + onClick: reset + }), props.children || '重置'); + }); +}; + +exports.Reset = Reset; \ No newline at end of file diff --git a/packages/next/lib/components/formButtonGroup.js b/packages/next/lib/components/formButtonGroup.js new file mode 100644 index 00000000000..2aa9af32e77 --- /dev/null +++ b/packages/next/lib/components/formButtonGroup.js @@ -0,0 +1,173 @@ +"use strict"; + +exports.__esModule = true; +exports.FormButtonGroup = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _reactDom = _interopRequireDefault(require("react-dom")); + +var _grid = require("@alifd/next/lib/grid"); + +var _form = require("../form"); + +var _reactStikky = _interopRequireDefault(require("react-stikky")); + +var _classnames = _interopRequireDefault(require("classnames")); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +var _class, _temp2; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n ", "\n &.is-inline {\n display: inline-block;\n flex-grow: 3;\n }\n .button-group {\n .inline {\n display: inline-block;\n .inline-view {\n & > * {\n margin-right: 10px;\n margin-left: 0px;\n display: inline-block;\n }\n & > *:last-child {\n margin-right: 0 !important;\n }\n }\n }\n }\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +var getAlign = function getAlign(align) { + if (align === 'start' || align === 'end') return align; + if (align === 'left' || align === 'top') return 'start'; + if (align === 'right' || align === 'bottom') return 'end'; + return align; +}; + +var isElementInViewport = function isElementInViewport(rect, _temp) { + var _ref = _temp === void 0 ? {} : _temp, + _ref$offset = _ref.offset, + offset = _ref$offset === void 0 ? 0 : _ref$offset, + _ref$threshold = _ref.threshold, + threshold = _ref$threshold === void 0 ? 0 : _ref$threshold; + + var top = rect.top, + right = rect.right, + bottom = rect.bottom, + left = rect.left, + width = rect.width, + height = rect.height; + var intersection = { + t: bottom, + r: window.innerWidth - left, + b: window.innerHeight - top, + l: right + }; + var elementThreshold = { + x: threshold * width, + y: threshold * height + }; + return intersection.t >= (offset.top || offset + elementThreshold.y) && intersection.r >= (offset.right || offset + elementThreshold.x) && intersection.b >= (offset.bottom || offset + elementThreshold.y) && intersection.l >= (offset.left || offset + elementThreshold.x); +}; + +var FormButtonGroup = (0, _styledComponents.default)((_temp2 = _class = +/*#__PURE__*/ +function (_Component) { + _inheritsLoose(FormButtonGroup, _Component); + + function FormButtonGroup() { + return _Component.apply(this, arguments) || this; + } + + var _proto = FormButtonGroup.prototype; + + _proto.renderChildren = function renderChildren() { + var _this$props = this.props, + children = _this$props.children, + itemStyle = _this$props.itemStyle, + offset = _this$props.offset, + span = _this$props.span; + return _react.default.createElement("div", { + className: "button-group" + }, _react.default.createElement(_grid.Row, null, _react.default.createElement(_grid.Col, { + span: span + }, _react.default.createElement(_grid.Col, { + offset: offset, + className: "inline" + }, _react.default.createElement("div", { + className: "inline-view", + style: itemStyle + }, children))))); + }; + + _proto.getStickyBoundaryHandler = function getStickyBoundaryHandler(ref) { + var _this = this; + + return function () { + _this.formNode = _this.formNode || _reactDom.default.findDOMNode(ref.current); + + if (_this.formNode) { + return isElementInViewport(_this.formNode.getBoundingClientRect()); + } + + return true; + }; + }; + + _proto.render = function render() { + var _this2 = this; + + var _this$props2 = this.props, + sticky = _this$props2.sticky, + style = _this$props2.style, + className = _this$props2.className; + + var content = _react.default.createElement(_form.FormConsumer, null, function (_temp3) { + var _ref2 = _temp3 === void 0 ? {} : _temp3, + inline = _ref2.inline; + + return _react.default.createElement("div", { + className: (0, _classnames.default)(className, { + 'is-inline': !!inline + }), + style: style + }, _this2.renderChildren()); + }); + + if (sticky) { + return _react.default.createElement(_form.FormConsumer, null, function (_temp4) { + var _ref3 = _temp4 === void 0 ? {} : _temp4, + inline = _ref3.inline, + FormRef = _ref3.FormRef; + + if (!FormRef) return; + return _react.default.createElement(_reactStikky.default, { + edge: "bottom", + triggerDistance: _this2.props.triggerDistance, + offsetDistance: _this2.props.offsetDistance, + zIndex: _this2.props.zIndex, + getStickyBoundary: _this2.getStickyBoundaryHandler(FormRef), + style: { + borderTop: '1px solid #eee', + background: style && style.background || '#fff', + padding: style && style.padding || '20px 0' + } + }, _react.default.createElement("div", { + className: className, + style: style + }, content)); + }); + } + + return content; + }; + + return FormButtonGroup; +}(_react.Component), _defineProperty(_class, "defaultProps", { + span: 24 +}), _temp2))(_templateObject(), function (props) { + return props.align ? "display:flex;justify-content: " + getAlign(props.align) : ''; +}); +exports.FormButtonGroup = FormButtonGroup; \ No newline at end of file diff --git a/packages/next/lib/components/layout.js b/packages/next/lib/components/layout.js new file mode 100644 index 00000000000..d288c9adf34 --- /dev/null +++ b/packages/next/lib/components/layout.js @@ -0,0 +1,232 @@ +"use strict"; + +exports.__esModule = true; +exports.FormBlock = exports.FormCard = exports.FormItemGrid = exports.FormLayout = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _react2 = require("@uform/react"); + +var _utils = require("@uform/utils"); + +var _grid = require("@alifd/next/lib/grid"); + +var _card = _interopRequireDefault(require("@alifd/next/lib/card")); + +var _form = require("../form"); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +var _classnames = _interopRequireDefault(require("classnames")); + +var _class2, _temp, _class3, _temp2; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _templateObject2() { + var data = _taggedTemplateLiteralLoose(["\n margin-bottom: 0px;\n .next-card-body {\n padding-top: 20px;\n padding-bottom: 0 !important;\n }\n &.next-card {\n border: none;\n padding: 0 15px;\n padding-bottom: 15px;\n }\n "]); + + _templateObject2 = function _templateObject2() { + return data; + }; + + return data; +} + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n margin-bottom: 30px;\n .next-card-body {\n padding-top: 30px;\n padding-bottom: 0 !important;\n }\n "]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +var normalizeCol = function normalizeCol(col, _default) { + if (_default === void 0) { + _default = 0; + } + + if (!col) return _default; + return typeof col === 'object' ? col : { + span: col + }; +}; + +var FormLayout = (0, _react2.createVirtualBox)('layout', function (_ref) { + var children = _ref.children, + props = _objectWithoutPropertiesLoose(_ref, ["children"]); + + return _react.default.createElement(_form.FormConsumer, null, function (value) { + var newValue = _extends({}, value, props); + + var child = newValue.inline || newValue.className || newValue.style ? _react.default.createElement("div", { + className: (0, _classnames.default)(newValue.className, { + 'next-form next-inline': !!newValue.inline + }), + style: newValue.style + }, children) : children; + return _react.default.createElement(_form.FormProvider, { + value: newValue + }, child); + }); +}); +exports.FormLayout = FormLayout; +var FormItemGrid = (0, _react2.createVirtualBox)('grid', +/*#__PURE__*/ +function (_Component) { + _inheritsLoose(_class, _Component); + + function _class() { + return _Component.apply(this, arguments) || this; + } + + var _proto = _class.prototype; + + _proto.renderFormItem = function renderFormItem(children) { + var _this$props = this.props, + title = _this$props.title, + description = _this$props.description, + help = _this$props.help, + name = _this$props.name, + extra = _this$props.extra, + others = _objectWithoutPropertiesLoose(_this$props, ["title", "description", "help", "name", "extra"]); + + return _react.default.createElement(_form.FormConsumer, {}, function (_ref2) { + var labelAlign = _ref2.labelAlign, + labelTextAlign = _ref2.labelTextAlign, + labelCol = _ref2.labelCol, + wrapperCol = _ref2.wrapperCol, + size = _ref2.size, + autoAddColon = _ref2.autoAddColon; + return _react.default.createElement(_form.FormItem, _extends({ + labelAlign: labelAlign, + labelTextAlign: labelTextAlign, + labelCol: labelCol, + wrapperCol: wrapperCol, + autoAddColon: autoAddColon, + size: size + }, others, { + label: title, + noMinHeight: true, + id: name, + extra: description, + help: help + }), children); + }); + }; + + _proto.renderGrid = function renderGrid() { + var _this$props2 = this.props, + children = _this$props2.children, + cols = _this$props2.cols, + title = _this$props2.title, + description = _this$props2.description, + help = _this$props2.help, + extra = _this$props2.extra, + props = _objectWithoutPropertiesLoose(_this$props2, ["children", "cols", "title", "description", "help", "extra"]); + + children = (0, _utils.toArr)(children); + cols = (0, _utils.toArr)(cols).map(function (col) { + return normalizeCol(col); + }); + var childNum = children.length; + + if (cols.length < childNum) { + var offset = childNum - cols.length; + var lastSpan = 24 - cols.reduce(function (buf, col) { + return buf + Number(col.span ? col.span : 0) + Number(col.offset ? col.offset : 0); + }, 0); + + for (var i = 0; i < offset; i++) { + cols.push(parseInt(offset / lastSpan)); + } + } + + return _react.default.createElement(_grid.Row, props, children.reduce(function (buf, child, key) { + return child ? buf.concat(_react.default.createElement(_grid.Col, _extends({ + key: key + }, cols[key]), child)) : buf; + }, [])); + }; + + _proto.render = function render() { + var title = this.props.title; + + if (title) { + return this.renderFormItem(this.renderGrid()); + } else { + return this.renderGrid(); + } + }; + + return _class; +}(_react.Component)); +exports.FormItemGrid = FormItemGrid; +var FormCard = (0, _react2.createVirtualBox)('card', (0, _styledComponents.default)((_temp = _class2 = +/*#__PURE__*/ +function (_Component2) { + _inheritsLoose(_class2, _Component2); + + function _class2() { + return _Component2.apply(this, arguments) || this; + } + + var _proto2 = _class2.prototype; + + _proto2.render = function render() { + var _this$props3 = this.props, + children = _this$props3.children, + className = _this$props3.className, + props = _objectWithoutPropertiesLoose(_this$props3, ["children", "className"]); + + return _react.default.createElement(_card.default, _extends({ + className: className + }, props), children); + }; + + return _class2; +}(_react.Component), _defineProperty(_class2, "defaultProps", { + contentHeight: 'auto' +}), _temp))(_templateObject())); +exports.FormCard = FormCard; +var FormBlock = (0, _react2.createVirtualBox)('block', (0, _styledComponents.default)((_temp2 = _class3 = +/*#__PURE__*/ +function (_Component3) { + _inheritsLoose(_class3, _Component3); + + function _class3() { + return _Component3.apply(this, arguments) || this; + } + + var _proto3 = _class3.prototype; + + _proto3.render = function render() { + var _this$props4 = this.props, + children = _this$props4.children, + className = _this$props4.className, + props = _objectWithoutPropertiesLoose(_this$props4, ["children", "className"]); + + return _react.default.createElement(_card.default, _extends({ + className: className + }, props), children); + }; + + return _class3; +}(_react.Component), _defineProperty(_class3, "defaultProps", { + contentHeight: 'auto' +}), _temp2))(_templateObject2())); +exports.FormBlock = FormBlock; \ No newline at end of file diff --git a/packages/next/lib/fields/array.js b/packages/next/lib/fields/array.js new file mode 100644 index 00000000000..da8be8c8a11 --- /dev/null +++ b/packages/next/lib/fields/array.js @@ -0,0 +1,261 @@ +"use strict"; + +exports.__esModule = true; +exports.ArrayField = exports.CircleButton = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _utils = require("@uform/utils"); + +var _next = require("@alifd/next"); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _templateObject2() { + var data = _taggedTemplateLiteralLoose(["\n border: 1px solid #eee;\n min-width: 400px;\n .array-item {\n padding: 20px;\n padding-bottom: 0;\n padding-top: 30px;\n border-bottom: 1px solid #eee;\n position: relative;\n &:nth-child(even) {\n background: #fafafa;\n }\n .array-index {\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n span {\n position: absolute;\n color: #fff;\n z-index: 1;\n font-size: 12px;\n top: 3px;\n left: 3px;\n }\n &::after {\n content: '';\n display: block;\n border-top: 20px solid transparent;\n border-left: 20px solid transparent;\n border-bottom: 20px solid transparent;\n border-right: 20px solid #888;\n transform: rotate(45deg);\n position: absolute;\n z-index: 0;\n top: -20px;\n left: -20px;\n }\n }\n .array-item-operator {\n display: flex;\n border-top: 1px solid #eee;\n padding-top: 20px;\n }\n }\n .array-empty-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n .array-empty {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 20px;\n img {\n display: block;\n height: 80px;\n }\n .next-btn-text {\n color: #999;\n }\n }\n }\n .array-item-wrapper {\n margin: 0 -20px;\n }\n .array-item-addition {\n padding: 10px 20px;\n background: #fbfbfb;\n .next-btn-text {\n color: #888;\n }\n }\n "]); + + _templateObject2 = function _templateObject2() { + return data; + }; + + return data; +} + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n width:30px;\n height:30px;\n margin-right:10px;\n border-radius: 100px;\n border: 1px solid #eee;\n margin-bottom:20px;\n cursor:pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n &:hover{\n background:#f7f4f4;\n }\n}\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +var CircleButton = _styledComponents.default.div(_templateObject()); + +exports.CircleButton = CircleButton; + +var ArrayField = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(ArrayField, _React$Component); + + function ArrayField() { + return _React$Component.apply(this, arguments) || this; + } + + var _proto = ArrayField.prototype; + + _proto.renderEmpty = function renderEmpty(disabled) { + var _this$props = this.props, + locale = _this$props.locale, + mutators = _this$props.mutators; + return _react.default.createElement("div", { + className: "array-empty-wrapper", + onClick: function onClick() { + mutators.push(); + } + }, _react.default.createElement("div", { + className: "array-empty" + }, _react.default.createElement("img", { + src: "//img.alicdn.com/tfs/TB1y2nwp_tYBeNjy1XdXXXXyVXa-200-200.png" + }), !disabled && _react.default.createElement(_next.Button, { + text: true, + size: "large" + }, _react.default.createElement(_next.Icon, { + type: "add" + }), locale.addItem || '添加'))); + }; + + _proto.renderAddition = function renderAddition() { + var locale = this.props.locale; + return _react.default.createElement("div", { + className: "array-item-addition" + }, _react.default.createElement(_next.Button, { + text: true, + size: "large", + onClick: this.onAddHandler() + }, _react.default.createElement(_next.Icon, { + type: "add" + }), locale.addItem || '添加')); + }; + + _proto.getDisabled = function getDisabled() { + var _this$props2 = this.props, + schema = _this$props2.schema, + editable = _this$props2.editable, + name = _this$props2.name; + var disabled = schema['x-props'] && schema['x-props'].disabled; + + if (editable !== undefined) { + if ((0, _utils.isFn)(editable)) { + if (!editable(name)) { + return true; + } + } else if (editable === false) { + return true; + } + } + + return disabled; + }; + + _proto.controllable = function controllable(key, value) { + var schema = this.props.schema; + var readOnly = schema['x-props'] && schema['x-props'].readOnly; + var disabled = this.getDisabled(); + + if ((0, _utils.isFn)(disabled)) { + return disabled(key, value); + } else if ((0, _utils.isFn)(readOnly)) { + return readOnly(key, value); + } else { + return !readOnly && !disabled; + } + }; + + _proto.onRemoveHandler = function onRemoveHandler(index) { + var _this$props3 = this.props, + value = _this$props3.value, + mutators = _this$props3.mutators, + schema = _this$props3.schema, + locale = _this$props3.locale; + var minItems = schema.minItems; + return function (e) { + e.stopPropagation(); + + if (minItems >= 0 && value.length - 1 < minItems) { + mutators.errors(locale.array_invalid_minItems, minItems); + } else { + mutators.remove(index); + } + }; + }; + + _proto.onMoveHandler = function onMoveHandler(_from, to) { + var mutators = this.props.mutators; + return function (e) { + e.stopPropagation(); + mutators.move(_from, to); + }; + }; + + _proto.onAddHandler = function onAddHandler() { + var _this$props4 = this.props, + value = _this$props4.value, + mutators = _this$props4.mutators, + schema = _this$props4.schema, + locale = _this$props4.locale; + var maxItems = schema.maxItems; + return function (e) { + e.stopPropagation(); + + if (maxItems >= 0 && value.length + 1 > maxItems) { + mutators.errors(locale.array_invalid_maxItems, maxItems); + } else { + mutators.push(); + } + }; + }; + + _proto.onClearErrorHandler = function onClearErrorHandler() { + var _this = this; + + return function () { + var _this$props5 = _this.props, + value = _this$props5.value, + mutators = _this$props5.mutators, + schema = _this$props5.schema; + var maxItems = schema.maxItems, + minItems = schema.minItems; + + if (maxItems >= 0 && value.length <= maxItems || minItems >= 0 && value.length >= minItems) { + mutators.errors(); + } + }; + }; + + _proto.componentDidMount = function componentDidMount() { + var _this$props6 = this.props, + value = _this$props6.value, + mutators = _this$props6.mutators, + schema = _this$props6.schema, + locale = _this$props6.locale; + var maxItems = schema.maxItems, + minItems = schema.minItems; + + if (value.length > maxItems) { + mutators.errors(locale.array_invalid_maxItems, maxItems); + } else if (value.length < minItems) { + mutators.errors(locale.array_invalid_minItems, minItems); + } + }; + + return ArrayField; +}(_react.default.Component); + +exports.ArrayField = ArrayField; +(0, _react2.registerFormField)('array', (0, _styledComponents.default)( +/*#__PURE__*/ +function (_ArrayField) { + _inheritsLoose(_class, _ArrayField); + + function _class() { + return _ArrayField.apply(this, arguments) || this; + } + + var _proto2 = _class.prototype; + + _proto2.render = function render() { + var _this2 = this; + + var _this$props7 = this.props, + className = _this$props7.className, + name = _this$props7.name, + schema = _this$props7.schema, + value = _this$props7.value, + renderField = _this$props7.renderField; + var style = schema['x-props'] && schema['x-props'].style || {}; + return _react.default.createElement("div", { + className: className, + style: style, + onClick: this.onClearErrorHandler() + }, value.map(function (item, index) { + return _react.default.createElement("div", { + className: "array-item", + key: name + "." + index + }, _react.default.createElement("div", { + className: "array-index" + }, _react.default.createElement("span", null, index + 1)), _react.default.createElement("div", { + className: "array-item-wrapper" + }, renderField(index)), _react.default.createElement("div", { + className: "array-item-operator" + }, _this2.controllable(index + ".remove", item) && _react.default.createElement(CircleButton, { + onClick: _this2.onRemoveHandler(index) + }, _react.default.createElement(_next.Icon, { + size: "xs", + type: "ashbin" + })), value.length > 1 && _this2.controllable(index + ".moveDown", item) && _react.default.createElement(CircleButton, { + onClick: _this2.onMoveHandler(index, index + 1 > value.length - 1 ? 0 : index + 1) + }, _react.default.createElement(_next.Icon, { + size: "xs", + type: "arrow-down" + })), value.length > 1 && _this2.controllable(index + ".moveUp", item) && _react.default.createElement(CircleButton, { + onClick: _this2.onMoveHandler(index, index - 1 < 0 ? value.length - 1 : index - 1) + }, _react.default.createElement(_next.Icon, { + size: "xs", + type: "arrow-up" + })))); + }), value.length === 0 && this.renderEmpty(), value.length > 0 && this.controllable('addition', value) && this.renderAddition()); + }; + + return _class; +}(ArrayField))(_templateObject2())); \ No newline at end of file diff --git a/packages/next/lib/fields/boolean.js b/packages/next/lib/fields/boolean.js new file mode 100644 index 00000000000..7a01f4dd2ae --- /dev/null +++ b/packages/next/lib/fields/boolean.js @@ -0,0 +1,12 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _utils = require("../utils"); + +var _next = require("@alifd/next"); + +(0, _react.registerFormField)('boolean', (0, _react.connect)({ + valueName: 'checked', + getProps: _utils.mapStyledProps +})((0, _utils.acceptEnum)(_next.Switch))); \ No newline at end of file diff --git a/packages/next/lib/fields/checkbox.js b/packages/next/lib/fields/checkbox.js new file mode 100644 index 00000000000..e2f349b5f6e --- /dev/null +++ b/packages/next/lib/fields/checkbox.js @@ -0,0 +1,13 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _next = require("@alifd/next"); + +var _utils = require("../utils"); + +var CheckboxGroup = _next.Checkbox.Group; +(0, _react.registerFormField)('checkbox', (0, _react.connect)({ + getProps: _utils.mapStyledProps, + getComponent: _utils.mapTextComponent +})(CheckboxGroup)); \ No newline at end of file diff --git a/packages/next/lib/fields/date.js b/packages/next/lib/fields/date.js new file mode 100644 index 00000000000..3ed6be133b3 --- /dev/null +++ b/packages/next/lib/fields/date.js @@ -0,0 +1,53 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _next = require("@alifd/next"); + +var _utils = require("../utils"); + +var RangePicker = _next.DatePicker.RangePicker, + MonthPicker = _next.DatePicker.MonthPicker, + YearPicker = _next.DatePicker.YearPicker; + +var transformMoment = function transformMoment(value, format) { + if (format === void 0) { + format = 'YYYY-MM-DD HH:mm:ss'; + } + + return value && value.format ? value.format(format) : value; +}; + +(0, _react.registerFormField)('date', (0, _react.connect)({ + getValueFromEvent: function getValueFromEvent(value) { + var props = this.props || {}; + return transformMoment(value, props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'); + }, + getProps: _utils.mapStyledProps, + getComponent: _utils.mapTextComponent +})(_next.DatePicker)); +(0, _react.registerFormField)('daterange', (0, _react.connect)({ + getValueFromEvent: function getValueFromEvent(_ref) { + var startDate = _ref[0], + endDate = _ref[1]; + var props = this.props || {}; + var format = props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'; + return [transformMoment(startDate, format), transformMoment(endDate, format)]; + }, + getProps: _utils.mapStyledProps, + getComponent: _utils.mapTextComponent +})(RangePicker)); +(0, _react.registerFormField)('month', (0, _react.connect)({ + getValueFromEvent: function getValueFromEvent(value) { + return transformMoment(value); + }, + getProps: _utils.mapStyledProps, + getComponent: _utils.mapTextComponent +})(MonthPicker)); +(0, _react.registerFormField)('year', (0, _react.connect)({ + getValueFromEvent: function getValueFromEvent(value) { + return transformMoment(value); + }, + getProps: _utils.mapStyledProps, + getComponent: _utils.mapTextComponent +})(YearPicker)); \ No newline at end of file diff --git a/packages/next/lib/fields/number.js b/packages/next/lib/fields/number.js new file mode 100644 index 00000000000..604a082daed --- /dev/null +++ b/packages/next/lib/fields/number.js @@ -0,0 +1,12 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _next = require("@alifd/next"); + +var _utils = require("../utils"); + +(0, _react.registerFormField)('number', (0, _react.connect)({ + getProps: _utils.mapStyledProps, + getComponent: _utils.mapTextComponent +})((0, _utils.acceptEnum)(_next.NumberPicker))); \ No newline at end of file diff --git a/packages/next/lib/fields/password.js b/packages/next/lib/fields/password.js new file mode 100644 index 00000000000..1c32f163ef9 --- /dev/null +++ b/packages/next/lib/fields/password.js @@ -0,0 +1,326 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _next = require("@alifd/next"); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +var _temp; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n .next-input {\n width: 100%;\n position: relative;\n &.input-password input {\n font-size: 16px;\n letter-spacing: 2px;\n }\n input {\n padding-right: 25px;\n }\n .eye {\n position: absolute;\n height: 20px;\n right: 5px;\n top: 50%;\n transform: translate(0, -50%);\n opacity: 0.3;\n cursor: pointer;\n transition: all 0.15s ease-in-out;\n &:hover {\n opacity: 0.6;\n }\n }\n }\n .password-strength-wrapper {\n background: #e0e0e0;\n margin-bottom: 3px;\n position: relative;\n .div {\n position: absolute;\n z-index: 1;\n height: 8px;\n top: 0;\n background: #fff;\n width: 1px;\n transform: translate(-50%, 0);\n }\n .div-1 {\n left: 20%;\n }\n .div-2 {\n left: 40%;\n }\n .div-3 {\n left: 60%;\n }\n .div-4 {\n left: 80%;\n }\n .password-strength-bar {\n position: relative;\n background-image: -webkit-linear-gradient(left, #ff5500, #ff9300);\n transition: all 0.35s ease-in-out;\n height: 8px;\n width: 100%;\n margin-top: 5px;\n }\n }\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +var isNum = function isNum(c) { + return c >= 48 && c <= 57; +}; + +var isLower = function isLower(c) { + return c >= 97 && c <= 122; +}; + +var isUpper = function isUpper(c) { + return c >= 65 && c <= 90; +}; + +var isSymbol = function isSymbol(c) { + return !(isLower(c) || isUpper(c) || isNum(c)); +}; + +var isLetter = function isLetter(c) { + return isLower(c) || isUpper(c); +}; + +var getStrength = function getStrength(val) { + if (!val) return 0; + var num = 0; + var lower = 0; + var upper = 0; + var symbol = 0; + var MNS = 0; + var rep = 0; + var repC = 0; + var consecutive = 0; + var sequential = 0; + + var len = function len() { + return num + lower + upper + symbol; + }; + + var callme = function callme() { + var re = num > 0 ? 1 : 0; + re += lower > 0 ? 1 : 0; + re += upper > 0 ? 1 : 0; + re += symbol > 0 ? 1 : 0; + + if (re > 2 && len() >= 8) { + return re + 1; + } else { + return 0; + } + }; + + for (var i = 0; i < val.length; i++) { + var c = val.charCodeAt(i); + + if (isNum(c)) { + num++; + + if (i !== 0 && i !== val.length - 1) { + MNS++; + } + + if (i > 0 && isNum(val.charCodeAt(i - 1))) { + consecutive++; + } + } else if (isLower(c)) { + lower++; + + if (i > 0 && isLower(val.charCodeAt(i - 1))) { + consecutive++; + } + } else if (isUpper(c)) { + upper++; + + if (i > 0 && isUpper(val.charCodeAt(i - 1))) { + consecutive++; + } + } else { + symbol++; + + if (i !== 0 && i !== val.length - 1) { + MNS++; + } + } + + var exists = false; + + for (var j = 0; j < val.length; j++) { + if (val[i] === val[j] && i !== j) { + exists = true; + repC += Math.abs(val.length / (j - i)); + } + } + + if (exists) { + rep++; + var unique = val.length - rep; + repC = unique ? Math.ceil(repC / unique) : Math.ceil(repC); + } + + if (i > 1) { + var last1 = val.charCodeAt(i - 1); + var last2 = val.charCodeAt(i - 2); + + if (isLetter(c)) { + if (isLetter(last1) && isLetter(last2)) { + var v = val.toLowerCase(); + var vi = v.charCodeAt(i); + var vi1 = v.charCodeAt(i - 1); + var vi2 = v.charCodeAt(i - 2); + + if (vi - vi1 === vi1 - vi2 && Math.abs(vi - vi1) === 1) { + sequential++; + } + } + } else if (isNum(c)) { + if (isNum(last1) && isNum(last2)) { + if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) { + sequential++; + } + } + } else { + if (isSymbol(last1) && isSymbol(last2)) { + if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) { + sequential++; + } + } + } + } + } + + var sum = 0; + var length = len(); + sum += 4 * length; + + if (lower > 0) { + sum += 2 * (length - lower); + } + + if (upper > 0) { + sum += 2 * (length - upper); + } + + if (num !== length) { + sum += 4 * num; + } + + sum += 6 * symbol; + sum += 2 * MNS; + sum += 2 * callme(); + + if (length === lower + upper) { + sum -= length; + } + + if (length === num) { + sum -= num; + } + + sum -= repC; + sum -= 2 * consecutive; + sum -= 3 * sequential; + sum = sum < 0 ? 0 : sum; + sum = sum > 100 ? 100 : sum; + + if (sum >= 80) { + return 100; + } else if (sum >= 60) { + return 80; + } else if (sum >= 40) { + return 60; + } else if (sum >= 20) { + return 40; + } else { + return 20; + } +}; + +var Password = (0, _styledComponents.default)((_temp = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(Password, _React$Component); + + function Password() { + var _this; + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; + + _defineProperty(_assertThisInitialized(_this), "state", { + value: _this.props.value || _this.props.defaultValue, + strength: 0, + eye: false + }); + + _defineProperty(_assertThisInitialized(_this), "onChangeHandler", function (value) { + _this.setState({ + value: value, + strength: getStrength(value) + }, function () { + if (_this.props.onChange) { + _this.props.onChange(value); + } + }); + }); + + return _this; + } + + var _proto = Password.prototype; + + _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) { + if (prevProps.value !== this.props.value && this.props.value !== this.state.value) { + this.setState({ + value: this.props.value, + strength: getStrength(this.props.value) + }); + } + }; + + _proto.renderStrength = function renderStrength() { + var strength = this.state.strength; + return _react.default.createElement("div", { + className: "password-strength-wrapper" + }, _react.default.createElement("div", { + className: "div-1 div" + }), _react.default.createElement("div", { + className: "div-2 div" + }), _react.default.createElement("div", { + className: "div-3 div" + }), _react.default.createElement("div", { + className: "div-4 div" + }), _react.default.createElement("div", { + className: "password-strength-bar", + style: { + clipPath: "polygon(0 0," + strength + "% 0," + strength + "% 100%,0 100%)" + } + })); + }; + + _proto.switchEye = function switchEye() { + var _this2 = this; + + return function () { + _this2.setState({ + eye: !_this2.state.eye + }); + }; + }; + + _proto.renderEye = function renderEye() { + if (!this.state.eye) { + return _react.default.createElement("img", { + className: "eye", + onClick: this.switchEye(), + src: "//img.alicdn.com/tfs/TB1wyXlsVzqK1RjSZFvXXcB7VXa-200-200.svg" + }); + } else { + return _react.default.createElement("img", { + className: "eye", + onClick: this.switchEye(), + src: "//img.alicdn.com/tfs/TB1xiXlsVzqK1RjSZFvXXcB7VXa-200-200.svg" + }); + } + }; + + _proto.render = function render() { + var _this$props = this.props, + className = _this$props.className, + checkStrength = _this$props.checkStrength, + value = _this$props.value, + onChange = _this$props.onChange, + htmlType = _this$props.htmlType, + innerAfter = _this$props.innerAfter, + others = _objectWithoutPropertiesLoose(_this$props, ["className", "checkStrength", "value", "onChange", "htmlType", "innerAfter"]); + + return _react.default.createElement("div", { + className: className + }, _react.default.createElement(_next.Input, _extends({ + htmlType: this.state.eye ? 'text' : 'password', + className: "input-" + (this.state.eye ? 'text' : 'password'), + value: this.state.value, + onChange: this.onChangeHandler, + innerAfter: this.renderEye() + }, others)), checkStrength && this.renderStrength()); + }; + + return Password; +}(_react.default.Component), _temp))(_templateObject()); +(0, _react2.registerFormField)('password', (0, _react2.connect)()(Password)); \ No newline at end of file diff --git a/packages/next/lib/fields/radio.js b/packages/next/lib/fields/radio.js new file mode 100644 index 00000000000..7ed5b75a990 --- /dev/null +++ b/packages/next/lib/fields/radio.js @@ -0,0 +1,13 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _next = require("@alifd/next"); + +var _utils = require("../utils"); + +var RadioGroup = _next.Radio.Group; +(0, _react.registerFormField)('radio', (0, _react.connect)({ + getProps: _utils.mapStyledProps, + getComponent: _utils.mapTextComponent +})(RadioGroup)); \ No newline at end of file diff --git a/packages/next/lib/fields/range.js b/packages/next/lib/fields/range.js new file mode 100644 index 00000000000..a2bb17c54e3 --- /dev/null +++ b/packages/next/lib/fields/range.js @@ -0,0 +1,16 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _next = require("@alifd/next"); + +var _utils = require("../utils"); + +(0, _react.registerFormField)('range', (0, _react.connect)({ + defaultProps: { + style: { + width: 320 + } + }, + getProps: _utils.mapStyledProps +})(_next.Range)); \ No newline at end of file diff --git a/packages/next/lib/fields/rating.js b/packages/next/lib/fields/rating.js new file mode 100644 index 00000000000..7f6423553fd --- /dev/null +++ b/packages/next/lib/fields/rating.js @@ -0,0 +1,11 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _next = require("@alifd/next"); + +var _utils = require("../utils"); + +(0, _react.registerFormField)('rating', (0, _react.connect)({ + getProps: _utils.mapStyledProps +})(_next.Rating)); \ No newline at end of file diff --git a/packages/next/lib/fields/string.js b/packages/next/lib/fields/string.js new file mode 100644 index 00000000000..3133a7b17b7 --- /dev/null +++ b/packages/next/lib/fields/string.js @@ -0,0 +1,12 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _next = require("@alifd/next"); + +var _utils = require("../utils"); + +(0, _react.registerFormField)('string', (0, _react.connect)({ + getProps: _utils.mapStyledProps, + getComponent: _utils.mapTextComponent +})((0, _utils.acceptEnum)(_next.Input))); \ No newline at end of file diff --git a/packages/next/lib/fields/table.js b/packages/next/lib/fields/table.js new file mode 100644 index 00000000000..08daf3dc8cf --- /dev/null +++ b/packages/next/lib/fields/table.js @@ -0,0 +1,267 @@ +"use strict"; + +var _react = _interopRequireWildcard(require("react")); + +var _react2 = require("@uform/react"); + +var _utils = require("@uform/utils"); + +var _next = require("@alifd/next"); + +var _array = require("./array"); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _templateObject2() { + var data = _taggedTemplateLiteralLoose(["\n display: inline-block;\n .array-item-addition {\n padding: 10px 20px;\n background: #fbfbfb;\n border-left: 1px solid #dcdee3;\n border-right: 1px solid #dcdee3;\n border-bottom: 1px solid #dcdee3;\n .next-btn-text {\n color: #888;\n }\n }\n .array-item-operator {\n display: flex;\n }\n "]); + + _templateObject2 = function _templateObject2() { + return data; + }; + + return data; +} + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n .next-table {\n position: relative;\n }\n\n .next-table,\n .next-table *,\n .next-table :after,\n .next-table :before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n }\n\n .next-table table {\n border-collapse: collapse;\n border-spacing: 0;\n width: 100%;\n background: #fff;\n display: table !important;\n margin: 0 !important;\n }\n\n .next-table table tr:first-child td {\n border-top-width: 0;\n }\n\n .next-table th {\n padding: 0;\n background: #ebecf0;\n color: #333;\n text-align: left;\n font-weight: 400;\n min-width: 200px;\n border: 1px solid #dcdee3;\n }\n\n .next-table th .next-table-cell-wrapper {\n padding: 12px 16px;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n }\n\n .next-table td {\n padding: 0;\n border: 1px solid #dcdee3;\n }\n\n .next-table td .next-table-cell-wrapper {\n padding: 12px 16px;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-all;\n display: flex;\n }\n\n .next-table.zebra tr:nth-child(odd) td {\n background: #fff;\n }\n\n .next-table.zebra tr:nth-child(2n) td {\n background: #f7f8fa;\n }\n\n .next-table-empty {\n color: #a0a2ad;\n padding: 32px 0;\n text-align: center;\n }\n\n .next-table-row {\n -webkit-transition: all 0.3s ease;\n transition: all 0.3s ease;\n background: #fff;\n color: #333;\n border: none !important;\n }\n\n .next-table-row.hidden {\n display: none;\n }\n\n .next-table-row.hovered,\n .next-table-row.selected {\n background: #f2f3f7;\n color: #333;\n }\n\n .next-table-body,\n .next-table-header {\n overflow: auto;\n font-size: 12px;\n }\n\n .next-table-body {\n font-size: 12px;\n }\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +/** + * 轻量级Table，用next table实在太重了 + **/ +var Table = (0, _styledComponents.default)( +/*#__PURE__*/ +function (_Component) { + _inheritsLoose(Table, _Component); + + function Table() { + return _Component.apply(this, arguments) || this; + } + + var _proto = Table.prototype; + + _proto.renderCell = function renderCell(_ref) { + var record = _ref.record, + col = _ref.col, + rowIndex = _ref.rowIndex, + colIndex = _ref.colIndex; + return _react.default.createElement("div", { + className: "next-table-cell-wrapper" + }, (0, _utils.isFn)(col.cell) ? col.cell(record ? record[col.dataIndex] : undefined, rowIndex, record) : record ? record[col.dataIndex] : undefined); + }; + + _proto.renderTable = function renderTable(columns, dataSource) { + var _this = this; + + return _react.default.createElement("div", { + className: "next-table-body" + }, _react.default.createElement("table", null, _react.default.createElement("colgroup", null, columns.map(function (col, index) { + return _react.default.createElement("col", { + key: index, + style: { + width: col.width + } + }); + })), _react.default.createElement("thead", null, _react.default.createElement("tr", null, columns.map(function (col, index) { + return _react.default.createElement("th", { + key: index, + className: "next-table-header-node" + }, _react.default.createElement("div", { + className: "next-table-cell-wrapper" + }, col.title)); + }))), _react.default.createElement("tbody", null, dataSource.map(function (record, rowIndex) { + return _react.default.createElement("tr", { + key: rowIndex, + className: "next-table-row" + }, columns.map(function (col, colIndex) { + return _react.default.createElement("td", { + key: colIndex, + className: "next-table-cell" + }, _this.renderCell({ + record: record, + col: col, + rowIndex: rowIndex, + colIndex: colIndex + })); + })); + }), this.renderPlacehodler(dataSource, columns)))); + }; + + _proto.renderPlacehodler = function renderPlacehodler(dataSource, columns) { + if (dataSource.length === 0) { + return _react.default.createElement("tr", { + className: "next-table-row" + }, _react.default.createElement("td", { + className: "next-table-cell", + colSpan: columns.length + }, _react.default.createElement("div", { + className: "next-table-empty", + style: { + padding: 10 + } + }, _react.default.createElement("img", { + src: "//img.alicdn.com/tfs/TB1y2nwp_tYBeNjy1XdXXXXyVXa-200-200.png", + style: { + height: 60 + } + })))); + } + }; + + _proto.getColumns = function getColumns(children) { + var columns = []; + + _react.default.Children.forEach(children, function (child) { + if (_react.default.isValidElement(child)) { + if (child.type === Column || child.type.displayName === '@schema-table-column') { + columns.push(child.props); + } + } + }); + + return columns; + }; + + _proto.render = function render() { + var columns = this.getColumns(this.props.children); + var dataSource = (0, _utils.toArr)(this.props.dataSource); + return _react.default.createElement("div", { + className: this.props.className + }, _react.default.createElement("div", { + className: "next-table zebra" + }, _react.default.createElement("div", { + className: "next-table-inner" + }, this.renderTable(columns, dataSource)))); + }; + + return Table; +}(_react.Component))(_templateObject()); + +var Column = +/*#__PURE__*/ +function (_Component2) { + _inheritsLoose(Column, _Component2); + + function Column() { + return _Component2.apply(this, arguments) || this; + } + + var _proto2 = Column.prototype; + + _proto2.render = function render() { + return this.props.children; + }; + + return Column; +}(_react.Component); + +_defineProperty(Column, "displayName", '@schema-table-column'); + +(0, _react2.registerFormField)('table', (0, _styledComponents.default)( +/*#__PURE__*/ +function (_ArrayField) { + _inheritsLoose(_class, _ArrayField); + + function _class() { + return _ArrayField.apply(this, arguments) || this; + } + + var _proto3 = _class.prototype; + + _proto3.createFilter = function createFilter(key, payload) { + var schema = this.props.schema; + var columnFilter = schema['x-props'] && schema['x-props'].columnFilter; + return function (render, otherwise) { + if ((0, _utils.isFn)(columnFilter)) { + return columnFilter(key, payload) ? (0, _utils.isFn)(render) ? render() : render : (0, _utils.isFn)(otherwise) ? otherwise() : otherwise; + } else { + return render(); + } + }; + }; + + _proto3.render = function render() { + var _this2 = this; + + var _this$props = this.props, + value = _this$props.value, + schema = _this$props.schema, + locale = _this$props.locale, + className = _this$props.className, + renderField = _this$props.renderField; + var style = schema['x-props'] && schema['x-props'].style; + var additionFilter = this.createFilter('addition', schema); + return _react.default.createElement("div", { + className: className, + style: style, + onClick: this.onClearErrorHandler() + }, _react.default.createElement("div", null, _react.default.createElement(Table, { + dataSource: value + }, Object.keys(schema.items && schema.items.properties || {}).reduce(function (buf, key) { + var itemSchema = schema.items.properties[key]; + + var filter = _this2.createFilter(key, itemSchema); + + var res = filter(function () { + return buf.concat(_react.default.createElement(Column, _extends({}, itemSchema, { + key: key, + title: itemSchema.title, + dataIndex: key, + cell: function cell(record, index) { + return renderField([index, key]); + } + }))); + }, function () { + return buf; + }); + return res; + }, []), additionFilter(function () { + return _react.default.createElement(Column, { + key: "operations", + title: locale.operations, + dataIndex: "operations", + width: 180, + cell: function cell(item, index) { + return _react.default.createElement("div", { + className: "array-item-operator" + }, _this2.controllable(index + ".remove", item) && _react.default.createElement(_array.CircleButton, { + onClick: _this2.onRemoveHandler(index) + }, _react.default.createElement(_next.Icon, { + size: "xs", + type: "ashbin" + })), value.length > 1 && _this2.controllable(index + ".moveDown", item) && _react.default.createElement(_array.CircleButton, { + onClick: _this2.onMoveHandler(index, index + 1 > value.length - 1 ? 0 : index + 1) + }, _react.default.createElement(_next.Icon, { + size: "xs", + type: "arrow-down" + })), value.length > 1 && _this2.controllable(index + ".moveUp", item) && _react.default.createElement(_array.CircleButton, { + onClick: _this2.onMoveHandler(index, index - 1 < 0 ? value.length - 1 : index - 1) + }, _react.default.createElement(_next.Icon, { + size: "xs", + type: "arrow-up" + }))); + } + }); + })), this.controllable('addition', value) && this.renderAddition())); + }; + + return _class; +}(_array.ArrayField))(_templateObject2())); \ No newline at end of file diff --git a/packages/next/lib/fields/time.js b/packages/next/lib/fields/time.js new file mode 100644 index 00000000000..ec819704ee5 --- /dev/null +++ b/packages/next/lib/fields/time.js @@ -0,0 +1,12 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _next = require("@alifd/next"); + +var _utils = require("../utils"); + +(0, _react.registerFormField)('time', (0, _react.connect)({ + getProps: _utils.mapStyledProps, + getComponent: _utils.mapTextComponent +})(_next.TimePicker)); \ No newline at end of file diff --git a/packages/next/lib/fields/transfer.js b/packages/next/lib/fields/transfer.js new file mode 100644 index 00000000000..309b49309dd --- /dev/null +++ b/packages/next/lib/fields/transfer.js @@ -0,0 +1,11 @@ +"use strict"; + +var _react = require("@uform/react"); + +var _next = require("@alifd/next"); + +var _utils = require("../utils"); + +(0, _react.registerFormField)('transfer', (0, _react.connect)({ + getProps: _utils.mapStyledProps +})(_next.Transfer)); \ No newline at end of file diff --git a/packages/next/lib/fields/upload.js b/packages/next/lib/fields/upload.js new file mode 100644 index 00000000000..9093d5eaa91 --- /dev/null +++ b/packages/next/lib/fields/upload.js @@ -0,0 +1,215 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _utils = require("../utils"); + +var _next = require("@alifd/next"); + +var _class, _temp; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +var UploadCard = _next.Upload.Card, + UploadDragger = _next.Upload.Dragger; +var exts = [{ + ext: /\.docx?/i, + icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png' +}, { + ext: /\.pptx?/i, + icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png' +}, { + ext: /\.jpe?g/i, + icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png' +}, { + ext: /pdf/i, + icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png' +}, { + ext: /\.png/i, + icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png' +}, { + ext: /\.eps/i, + icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png' +}, { + ext: /\.ai/i, + icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png' +}, { + ext: /\.gif/i, + icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png' +}, { + ext: /\.svg/i, + icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png' +}, { + ext: /\.xlsx?/i, + icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png' +}, { + ext: /\.psd?/i, + icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png' +}, { + ext: /\.(wav|aif|aiff|au|mp1|mp2|mp3|ra|rm|ram|mid|rmi)/i, + icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png' +}, { + ext: /\.(avi|wmv|mpg|mpeg|vob|dat|3gp|mp4|mkv|rm|rmvb|mov|flv)/i, + icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png' +}, { + ext: /\.(zip|rar|arj|z|gz|iso|jar|ace|tar|uue|dmg|pkg|lzh|cab)/i, + icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png' +}, { + ext: /\..+/i, + icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png' +}]; + +var testOpts = function testOpts(ext, options) { + if (options && (0, _utils.isArr)(options.include)) { + return options.include.some(function (url) { + return ext.test(url); + }); + } + + if (options && (0, _utils.isArr)(options.exclude)) { + return !options.exclude.some(function (url) { + return ext.test(url); + }); + } + + return true; +}; + +var getImageByUrl = function getImageByUrl(url, options) { + for (var i = 0; i < exts.length; i++) { + if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) { + return exts[i].icon; + } + } + + return url; +}; + +var normalizeFileList = function normalizeFileList(fileList) { + if (fileList && fileList.length) { + return fileList.map(function (file) { + return _extends({ + name: file.name, + downloadURL: file.downloadURL || file.imgURL + }, file.response, { + imgURL: getImageByUrl(file.imgURL, { + exclude: ['.png', '.jpg', '.jpeg', '.gif'] + }) + }); + }); + } + + return []; +}; + +var shallowClone = function shallowClone(val) { + return (0, _utils.isArr)(val) ? [].concat(val) : typeof val === 'object' ? _extends({}, val) : val; +}; + +(0, _react2.registerFormField)('upload', (0, _react2.connect)({ + getProps: _utils.mapStyledProps +})((_temp = _class = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(Uploader, _React$Component); + + function Uploader() { + var _this; + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; + + _defineProperty(_assertThisInitialized(_this), "state", { + value: (0, _utils.toArr)(_this.props.value) + }); + + _defineProperty(_assertThisInitialized(_this), "onChangeHandler", function (fileList) { + var onChange = _this.props.onChange; + fileList = (0, _utils.toArr)(fileList); + + if (fileList.every(function (file) { + return file.state === 'done' || file.imgURL || file.downloadURL; + })) { + fileList = normalizeFileList(fileList); + + _this.setState({ + value: fileList + }, function () { + onChange(fileList.length > 0 ? fileList : undefined); + }); + } else { + _this.setState({ + value: fileList + }); + } + }); + + return _this; + } + + var _proto = Uploader.prototype; + + _proto.componentDidUpdate = function componentDidUpdate(preProps) { + if (this.props.value && !(0, _utils.isEqual)(this.props.value, preProps.value)) { + this.setState({ + value: this.props.value + }); + } + }; + + _proto.render = function render() { + var _this$props = this.props, + listType = _this$props.listType, + locale = _this$props.locale, + onChange = _this$props.onChange, + value = _this$props.value, + others = _objectWithoutPropertiesLoose(_this$props, ["listType", "locale", "onChange", "value"]); + + if (listType.indexOf('card') > -1) { + return _react.default.createElement(UploadCard, _extends({}, others, { + value: shallowClone(this.state.value), + onChange: this.onChangeHandler, + listType: "card" + })); + } + + if (listType.indexOf('dragger') > -1) { + return _react.default.createElement(UploadDragger, _extends({}, others, { + value: shallowClone(this.state.value), + onChange: this.onChangeHandler, + listType: listType.indexOf('image') > -1 ? 'image' : 'text' + })); + } + + return _react.default.createElement(_next.Upload, _extends({}, others, { + value: shallowClone(this.state.value), + onChange: this.onChangeHandler, + listType: listType + }), _react.default.createElement(_next.Button, { + style: { + margin: '0 0 10px' + } + }, locale && locale.uploadText || '上传文件')); + }; + + return Uploader; +}(_react.default.Component), _defineProperty(_class, "defaultProps", { + action: '//www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload', + listType: 'text', + multiple: true +}), _temp))); \ No newline at end of file diff --git a/packages/next/lib/form.js b/packages/next/lib/form.js new file mode 100644 index 00000000000..a2337eaa0f6 --- /dev/null +++ b/packages/next/lib/form.js @@ -0,0 +1,373 @@ +"use strict"; + +exports.__esModule = true; +exports.FormItem = exports.FormConsumer = exports.FormProvider = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _react2 = require("@uform/react"); + +var _classnames = _interopRequireDefault(require("classnames")); + +var _next = require("@alifd/next"); + +var _grid = require("@alifd/next/lib/grid"); + +var _locale = _interopRequireDefault(require("./locale")); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +var _utils = require("./utils"); + +var _class, _temp; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _templateObject2() { + var data = _taggedTemplateLiteralLoose(["\n &.next-inline {\n display: flex;\n .rs-uform-content {\n margin-right: 15px;\n }\n }\n .next-radio-group,\n .next-checkbox-group {\n line-height: 28px;\n & > label {\n margin-right: 8px;\n }\n }\n .next-small {\n .next-radio-group,\n .next-checkbox-group {\n line-height: 20px;\n }\n }\n .next-small {\n .next-radio-group,\n .next-checkbox-group {\n line-height: 40px;\n }\n }\n .next-card-head {\n background: none;\n }\n .next-rating-medium {\n min-height: 28px;\n line-height: 28px;\n }\n .next-rating-small {\n min-height: 20px;\n line-height: 20px;\n }\n .next-rating-large {\n min-height: 40px;\n line-height: 40px;\n }\n "]); + + _templateObject2 = function _templateObject2() { + return data; + }; + + return data; +} + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n margin-bottom: 6px;\n &.field-table {\n .next-form-item-control {\n overflow: auto;\n }\n }\n .next-form-item-msg {\n &.next-form-item-space {\n min-height: 20px;\n .next-form-item-help,\n .next-form-item-extra {\n margin-top: 0;\n }\n }\n }\n .next-form-item-extra {\n color: #888;\n font-size: 12px;\n line-height: 1.7;\n }\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +/** + * 轻量级Next Form，不包含任何数据管理能力 + * + */ +var _React$createContext = _react.default.createContext(), + FormProvider = _React$createContext.Provider, + FormConsumer = _React$createContext.Consumer; + +exports.FormConsumer = FormConsumer; +exports.FormProvider = FormProvider; + +var normalizeCol = function normalizeCol(col) { + return typeof col === 'object' ? col : { + span: col + }; +}; + +var getParentNode = function getParentNode(node, selector) { + if (!node || node && !node.matches) return; + if (node.matches(selector)) return node;else { + return getParentNode(node.parentNode || node.parentElement, selector); + } +}; + +var FormItem = (0, _styledComponents.default)((_temp = _class = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(FormItem, _React$Component); + + function FormItem() { + return _React$Component.apply(this, arguments) || this; + } + + var _proto = FormItem.prototype; + + _proto.getItemLabel = function getItemLabel() { + var _classNames; + + var _this$props = this.props, + id = _this$props.id, + required = _this$props.required, + label = _this$props.label, + labelCol = _this$props.labelCol, + wrapperCol = _this$props.wrapperCol, + prefix = _this$props.prefix, + extra = _this$props.extra, + labelAlign = _this$props.labelAlign, + labelTextAlign = _this$props.labelTextAlign, + autoAddColon = _this$props.autoAddColon, + isTableColItem = _this$props.isTableColItem; + + if (!label || isTableColItem) { + return null; + } + + var ele = _react.default.createElement("label", { + htmlFor: id, + required: required, + key: "label" + }, label, label === ' ' ? '' : autoAddColon ? '：' : ''); + + var cls = (0, _classnames.default)((_classNames = {}, _classNames[prefix + "form-item-label"] = true, _classNames[prefix + "left"] = labelTextAlign === 'left', _classNames)); + + if ((wrapperCol || labelCol) && labelAlign !== 'top') { + return _react.default.createElement(_grid.Col, _extends({}, normalizeCol(labelCol), { + className: cls + }), ele, (extra && extra.length > 20 || _react.default.isValidElement(extra)) && this.renderHelper()); + } + + return _react.default.createElement("div", { + className: cls + }, ele); + }; + + _proto.getItemWrapper = function getItemWrapper() { + var _this$props2 = this.props, + labelCol = _this$props2.labelCol, + wrapperCol = _this$props2.wrapperCol, + children = _this$props2.children, + extra = _this$props2.extra, + label = _this$props2.label, + labelAlign = _this$props2.labelAlign, + help = _this$props2.help, + size = _this$props2.size, + prefix = _this$props2.prefix, + noMinHeight = _this$props2.noMinHeight, + isTableColItem = _this$props2.isTableColItem; + + var message = _react.default.createElement("div", { + className: prefix + "form-item-msg " + (!noMinHeight ? prefix + "form-item-space" : '') + }, help && _react.default.createElement("div", { + className: prefix + "form-item-help" + }, help), !help && extra && extra.length <= 20 && _react.default.createElement("div", { + className: prefix + "form-item-extra" + }, extra)); + + if ((wrapperCol || labelCol) && labelAlign !== 'top' && !isTableColItem && label) { + return _react.default.createElement(_grid.Col, _extends({}, normalizeCol(wrapperCol), { + className: prefix + "form-item-control", + key: "item" + }), _react.default.cloneElement(children, { + size: size + }), message); + } + + return _react.default.createElement("div", { + className: prefix + "form-item-control" + }, _react.default.cloneElement(children, { + size: size + }), message); + }; + + _proto.renderHelper = function renderHelper() { + return _react.default.createElement(_next.Balloon, { + closable: false, + align: "t", + trigger: _react.default.createElement(_next.Icon, { + type: "help", + size: "small" + }) + }, this.props.extra); + }; + + _proto.render = function render() { + var _classNames2; + + var _this$props3 = this.props, + className = _this$props3.className, + labelAlign = _this$props3.labelAlign, + labelTextAlign = _this$props3.labelTextAlign, + style = _this$props3.style, + prefix = _this$props3.prefix, + wrapperCol = _this$props3.wrapperCol, + labelCol = _this$props3.labelCol, + size = _this$props3.size, + help = _this$props3.help, + extra = _this$props3.extra, + noMinHeight = _this$props3.noMinHeight, + isTableColItem = _this$props3.isTableColItem, + validateState = _this$props3.validateState, + autoAddColon = _this$props3.autoAddColon, + required = _this$props3.required, + type = _this$props3.type, + schema = _this$props3.schema, + others = _objectWithoutPropertiesLoose(_this$props3, ["className", "labelAlign", "labelTextAlign", "style", "prefix", "wrapperCol", "labelCol", "size", "help", "extra", "noMinHeight", "isTableColItem", "validateState", "autoAddColon", "required", "type", "schema"]); + + var itemClassName = (0, _classnames.default)((_classNames2 = {}, _classNames2[prefix + "form-item"] = true, _classNames2["" + prefix + labelAlign] = labelAlign, _classNames2["has-" + validateState] = !!validateState, _classNames2["" + prefix + size] = !!size, _classNames2["" + className] = !!className, _classNames2["field-" + type] = !!type, _classNames2)); // 垂直模式并且左对齐才用到 + + var Tag = (wrapperCol || labelCol) && labelAlign !== 'top' ? _grid.Row : 'div'; + var label = labelAlign === 'inset' ? null : this.getItemLabel(); + return _react.default.createElement(Tag, _extends({}, others, { + gutter: 0, + className: itemClassName, + style: style + }), label, this.getItemWrapper()); + }; + + return FormItem; +}(_react.default.Component), _defineProperty(_class, "defaultProps", { + prefix: 'next-' +}), _temp))(_templateObject()); +exports.FormItem = FormItem; + +var toArr = function toArr(val) { + return Array.isArray(val) ? val : val ? [val] : []; +}; + +var hasRequired = function hasRequired(schema) { + if (schema.required) return true; + if (schema['x-rules'] && schema['x-rules'].required) return true; + return toArr(schema['x-rules']).some(function (v) { + return v && v.required; + }); +}; + +(0, _react2.registerFormWrapper)(function (OriginForm) { + var _class2, _temp2; + + OriginForm = (0, _styledComponents.default)(OriginForm)(_templateObject2()); + return _next.ConfigProvider.config((_temp2 = _class2 = + /*#__PURE__*/ + function (_React$Component2) { + _inheritsLoose(Form, _React$Component2); + + function Form() { + var _this; + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _React$Component2.call.apply(_React$Component2, [this].concat(args)) || this; + + _defineProperty(_assertThisInitialized(_this), "FormRef", _react.default.createRef()); + + return _this; + } + + var _proto2 = Form.prototype; + + _proto2.validateFailedHandler = function validateFailedHandler(onValidateFailed) { + var _this2 = this; + + return function () { + if ((0, _utils.isFn)(onValidateFailed)) { + onValidateFailed.apply(void 0, arguments); + } + + var container = _this2.FormRef.current; + + if (container) { + var errors = container.querySelectorAll('.next-form-item-help'); + + if (errors && errors.length) { + var node = getParentNode(errors[0], '.next-form-item'); + + if (node) { + (0, _utils.moveTo)(node); + } + } + } + }; + }; + + _proto2.render = function render() { + var _classNames3; + + var _this$props4 = this.props, + className = _this$props4.className, + inline = _this$props4.inline, + size = _this$props4.size, + labelAlign = _this$props4.labelAlign, + labelTextAlign = _this$props4.labelTextAlign, + autoAddColon = _this$props4.autoAddColon, + children = _this$props4.children, + component = _this$props4.component, + labelCol = _this$props4.labelCol, + wrapperCol = _this$props4.wrapperCol, + style = _this$props4.style, + prefix = _this$props4.prefix, + others = _objectWithoutPropertiesLoose(_this$props4, ["className", "inline", "size", "labelAlign", "labelTextAlign", "autoAddColon", "children", "component", "labelCol", "wrapperCol", "style", "prefix"]); + + var formClassName = (0, _classnames.default)((_classNames3 = {}, _classNames3[prefix + "form"] = true, _classNames3[prefix + "inline"] = inline, _classNames3["" + prefix + size] = size, _classNames3[className] = !!className, _classNames3)); + return _react.default.createElement(FormProvider, { + value: { + labelAlign: labelAlign, + labelTextAlign: labelTextAlign, + labelCol: labelCol, + wrapperCol: wrapperCol, + inline: inline, + size: size, + autoAddColon: autoAddColon, + FormRef: this.FormRef + } + }, _react.default.createElement(OriginForm, _extends({}, others, { + formRef: this.FormRef, + onValidateFailed: this.validateFailedHandler(others.onValidateFailed), + className: formClassName, + style: style + }), children)); + }; + + return Form; + }(_react.default.Component), _defineProperty(_class2, "defaultProps", { + component: 'form', + prefix: 'next-', + size: 'medium', + labelAlign: 'left', + locale: _locale.default, + autoAddColon: true + }), _defineProperty(_class2, "displayName", 'SchemaForm'), _temp2)); +}); + +var isTableColItem = function isTableColItem(path, getSchema) { + var schema = getSchema(path); + return schema && schema.type === 'array' && schema['x-component'] === 'table'; +}; + +(0, _react2.registerFieldMiddleware)(function (Field) { + return function (props) { + var name = props.name, + editable = props.editable, + errors = props.errors, + path = props.path, + schema = props.schema, + getSchema = props.getSchema; + if (path.length === 0) return _react.default.createElement(Field, props); // 根节点是不需要包FormItem的 + + return _react.default.createElement(FormConsumer, {}, function (_ref) { + var labelAlign = _ref.labelAlign, + labelTextAlign = _ref.labelTextAlign, + labelCol = _ref.labelCol, + wrapperCol = _ref.wrapperCol, + size = _ref.size, + autoAddColon = _ref.autoAddColon; + return _react.default.createElement(FormItem, _extends({ + labelAlign: labelAlign, + labelTextAlign: labelTextAlign, + labelCol: labelCol, + wrapperCol: wrapperCol, + autoAddColon: autoAddColon, + size: size + }, schema['x-item-props'], { + label: schema.title || schema['x-props'] && schema['x-props'].title, + noMinHeight: schema.type === 'object', + isTableColItem: isTableColItem(path.slice(0, path.length - 2), getSchema), + type: schema['x-component'] || schema['type'], + id: name, + validateState: toArr(errors).length ? 'error' : undefined, + required: editable === false ? false : hasRequired(schema), + extra: schema.description, + help: toArr(errors).join(' , ') || schema['x-item-props'] && schema['x-item-props'].help + }), _react.default.createElement(Field, props)); + }); + }; +}); \ No newline at end of file diff --git a/packages/next/lib/index.js b/packages/next/lib/index.js new file mode 100644 index 00000000000..cbd2766f4c5 --- /dev/null +++ b/packages/next/lib/index.js @@ -0,0 +1,69 @@ +"use strict"; + +exports.__esModule = true; +var _exportNames = {}; +exports.default = void 0; + +require("./form"); + +require("./fields/string"); + +require("./fields/number"); + +require("./fields/boolean"); + +require("./fields/date"); + +require("./fields/time"); + +require("./fields/range"); + +require("./fields/upload"); + +require("./fields/checkbox"); + +require("./fields/radio"); + +require("./fields/rating"); + +require("./fields/transfer"); + +require("./fields/array"); + +require("./fields/table"); + +require("./fields/password"); + +var _react = require("@uform/react"); + +Object.keys(_react).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _react[key]; +}); + +var _formButtonGroup = require("./components/formButtonGroup"); + +Object.keys(_formButtonGroup).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _formButtonGroup[key]; +}); + +var _button = require("./components/button"); + +Object.keys(_button).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _button[key]; +}); + +var _layout = require("./components/layout"); + +Object.keys(_layout).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _layout[key]; +}); +var _default = _react.SchemaForm; +exports.default = _default; \ No newline at end of file diff --git a/packages/next/lib/locale.js b/packages/next/lib/locale.js new file mode 100644 index 00000000000..c1fc6d9a1e5 --- /dev/null +++ b/packages/next/lib/locale.js @@ -0,0 +1,11 @@ +"use strict"; + +exports.__esModule = true; +exports.default = void 0; +var _default = { + addItem: '添加', + array_invalid_minItems: '条目数不允许小于%s条', + array_invalid_maxItems: '条目数不允许大于%s条', + operations: '操作' +}; +exports.default = _default; \ No newline at end of file diff --git a/packages/next/lib/utils.js b/packages/next/lib/utils.js new file mode 100644 index 00000000000..b2afb2d74d7 --- /dev/null +++ b/packages/next/lib/utils.js @@ -0,0 +1,150 @@ +"use strict"; + +exports.__esModule = true; +var _exportNames = { + acceptEnum: true, + mapStyledProps: true, + mapTextComponent: true, + compose: true, + moveTo: true +}; +exports.moveTo = exports.compose = exports.mapTextComponent = exports.mapStyledProps = exports.acceptEnum = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _next = require("@alifd/next"); + +var _styledComponents = _interopRequireDefault(require("styled-components")); + +var _utils = require("@uform/utils"); + +Object.keys(_utils).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _utils[key]; +}); + +var _moveto = _interopRequireDefault(require("moveto")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _templateObject() { + var data = _taggedTemplateLiteralLoose(["\n height: 28px;\n line-height: 28px;\n vertical-align: middle;\n font-size: 13px;\n color: #333;\n &.small {\n height: 20px;\n line-height: 20px;\n }\n &.large {\n height: 40px;\n line-height: 40px;\n }\n"]); + + _templateObject = function _templateObject() { + return data; + }; + + return data; +} + +function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; } + +var Text = (0, _styledComponents.default)(function (props) { + var value; + + if (props.dataSource && props.dataSource.length) { + var find = props.dataSource.filter(function (_ref) { + var value = _ref.value; + return Array.isArray(props.value) ? props.value.indexOf(value) > -1 : props.value === value; + }); + value = find.map(function (item) { + return item.label; + }).join(' , '); + } else { + value = Array.isArray(props.value) ? props.value.join(' ~ ') : String(props.value || ''); + } + + return _react.default.createElement("div", { + className: props.className + " " + (props.size || '') + " text-field" + }, value || 'N/A'); +})(_templateObject()); + +var acceptEnum = function acceptEnum(component) { + return function (_ref2) { + var dataSource = _ref2.dataSource, + others = _objectWithoutPropertiesLoose(_ref2, ["dataSource"]); + + if (dataSource) { + return _react.default.createElement(_next.Select, _extends({ + dataSource: dataSource + }, others)); + } else { + return _react.default.createElement(component, others); + } + }; +}; + +exports.acceptEnum = acceptEnum; + +var mapStyledProps = function mapStyledProps(props, _ref3) { + var loading = _ref3.loading, + size = _ref3.size; + + if (loading) { + props.state = props.state || 'loading'; + } + + if (size) { + props.size = size; + } +}; + +exports.mapStyledProps = mapStyledProps; + +var mapTextComponent = function mapTextComponent(Target, props, _ref4) { + var editable = _ref4.editable, + name = _ref4.name; + + if (editable !== undefined) { + if ((0, _utils.isFn)(editable)) { + if (!editable(name)) { + return Text; + } + } else if (editable === false) { + return Text; + } + } + + return Target; +}; + +exports.mapTextComponent = mapTextComponent; + +var compose = function compose() { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return function (payload) { + for (var _len2 = arguments.length, extra = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + extra[_key2 - 1] = arguments[_key2]; + } + + return args.reduce(function (buf, fn) { + return buf !== undefined ? fn.apply(void 0, [buf].concat(extra)) : fn.apply(void 0, [payload].concat(extra)); + }, payload); + }; +}; + +exports.compose = compose; + +var moveTo = function moveTo(element) { + if (!element) return; + + if (element.scrollIntoView) { + element.scrollIntoView({ + behavior: 'smooth', + inline: 'start', + block: 'start' + }); + } else { + new _moveto.default().move(element.getBoundingClientRect().top); + } +}; + +exports.moveTo = moveTo; \ No newline at end of file diff --git a/packages/next/package.json b/packages/next/package.json index 7bf3f982991..198f3afcf2b 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -2,7 +2,7 @@ "name": "@uform/next", "version": "0.1.0-alpha.1", "license": "MIT", - "main": "lib/index.js", + "main": "lib", "repository": { "type": "git", "url": "git+https://github.com/alibaba/uform.git" diff --git a/packages/react/lib/decorators/connect.js b/packages/react/lib/decorators/connect.js new file mode 100644 index 00000000000..ae26d82830e --- /dev/null +++ b/packages/react/lib/decorators/connect.js @@ -0,0 +1,177 @@ +"use strict"; + +exports.__esModule = true; +exports.connect = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _utils = require("../utils"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +var isEvent = function isEvent(candidate) { + return !!(candidate && candidate.stopPropagation && candidate.preventDefault); +}; + +var isReactNative = typeof window !== 'undefined' && window.navigator && window.navigator.product && window.navigator.product === 'ReactNative'; + +var getSelectedValues = function getSelectedValues(options) { + var result = []; + + if (options) { + for (var index = 0; index < options.length; index++) { + var option = options[index]; + + if (option.selected) { + result.push(option.value); + } + } + } + + return result; +}; + +var getValue = function getValue(event, isReactNative) { + if (isEvent(event)) { + if (!isReactNative && event.nativeEvent && event.nativeEvent.text !== undefined) { + return event.nativeEvent.text; + } + + if (isReactNative && event.nativeEvent !== undefined) { + return event.nativeEvent.text; + } + + var detypedEvent = event; + var _detypedEvent$target = detypedEvent.target, + type = _detypedEvent$target.type, + value = _detypedEvent$target.value, + checked = _detypedEvent$target.checked, + files = _detypedEvent$target.files, + dataTransfer = detypedEvent.dataTransfer; + + if (type === 'checkbox') { + return !!checked; + } + + if (type === 'file') { + return files || dataTransfer && dataTransfer.files; + } + + if (type === 'select-multiple') { + return getSelectedValues(event.target.options); + } + + return value; + } + + return event; +}; + +var createEnum = function createEnum(_enum, enumNames) { + if ((0, _utils.isArr)(_enum)) { + return _enum.map(function (item, index) { + if (typeof item === 'object') { + return _extends({}, item); + } else { + return _extends({}, item, { + label: (0, _utils.isArr)(enumNames) ? enumNames[index] || item : item, + value: item + }); + } + }); + } + + return []; +}; + +var bindEffects = function bindEffects(props, effect, dispatch) { + (0, _utils.each)(effect(dispatch, _extends({}, props)), function (event, key) { + var prevEvent = key === 'onChange' ? props[key] : undefined; + + props[key] = function () { + if ((0, _utils.isFn)(prevEvent)) prevEvent.apply(void 0, arguments); + if ((0, _utils.isFn)(event)) return event.apply(void 0, arguments); + }; + }); + return props; +}; + +var connect = function connect(opts) { + return function (Target) { + opts = _extends({ + valueName: 'value', + eventName: 'onChange' + }, opts); + return ( + /*#__PURE__*/ + function (_PureComponent) { + _inheritsLoose(_class, _PureComponent); + + function _class() { + return _PureComponent.apply(this, arguments) || this; + } + + var _proto = _class.prototype; + + _proto.render = function render() { + var _extends2; + + var _this$props = this.props, + value = _this$props.value, + name = _this$props.name, + mutators = _this$props.mutators, + schema = _this$props.schema, + editable = _this$props.editable; + + var props = _extends({}, opts.defaultProps, schema['x-props'], (_extends2 = {}, _extends2[opts.valueName] = value, _extends2[opts.eventName] = function (event) { + var _opts$getValueFromEve; + + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + mutators.change(opts.getValueFromEvent ? (_opts$getValueFromEve = opts.getValueFromEvent).call.apply(_opts$getValueFromEve, [{ + props: schema['x-props'] || {} + }, event].concat(args)) : getValue(event, isReactNative)); + }, _extends2)); + + if (editable !== undefined) { + if ((0, _utils.isFn)(editable)) { + if (!editable(name)) { + props.disabled = true; + } + } else if (editable === false) { + props.disabled = true; + } + } + + if ((0, _utils.isFn)(schema['x-effect'])) { + props = bindEffects(props, schema['x-effect'], mutators.dispatch); + } + + if ((0, _utils.isFn)(opts.getProps)) { + var newProps = opts.getProps(props, this.props); + + if (newProps !== undefined) { + props = newProps; + } + } + + if ((0, _utils.isArr)(schema['enum']) && !props.dataSource) { + props.dataSource = createEnum(schema['enum'], schema['enumNames']); + } + + return _react.default.createElement((0, _utils.isFn)(opts.getComponent) ? opts.getComponent(Target, props, this.props) : Target, props); + }; + + return _class; + }(_react.PureComponent) + ); + }; +}; + +exports.connect = connect; \ No newline at end of file diff --git a/packages/react/lib/decorators/markup.js b/packages/react/lib/decorators/markup.js new file mode 100644 index 00000000000..15a2b9d99db --- /dev/null +++ b/packages/react/lib/decorators/markup.js @@ -0,0 +1,89 @@ +"use strict"; + +exports.__esModule = true; +exports.SchemaMarkup = exports.SchemaField = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _utils = require("../utils"); + +var _context = require("../shared/context"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var nonameId = 0; + +var getRadomName = function getRadomName() { + return "RS_UFORM_NO_NAME_$" + nonameId++; +}; + +var SchemaField = function SchemaField(props, context) { + var parent = (0, _react.useContext)(_context.MarkupContext); + + if ((0, _utils.schemaIs)(parent, 'object')) { + var name = props.name || getRadomName(); + parent.properties = parent.properties || {}; + parent.properties[name] = (0, _utils.clone)(props, _utils.filterSchemaPropertiesAndReactChildren); + return _react.default.createElement(_context.MarkupContext.Provider, { + value: parent.properties[name] + }, props.children); + } else if ((0, _utils.schemaIs)(parent, 'array')) { + parent.items = (0, _utils.clone)(props, _utils.filterSchemaPropertiesAndReactChildren); + return _react.default.createElement(_context.MarkupContext.Provider, { + value: parent.items + }, props.children); + } else { + return props.children || _react.default.createElement(_react.default.Fragment, null); + } +}; + +exports.SchemaField = SchemaField; +var SchemaMarkup = (0, _utils.createHOC)(function (options, SchemaForm) { + var _class, _temp; + + return _temp = _class = + /*#__PURE__*/ + function (_Component) { + _inheritsLoose(_class, _Component); + + function _class() { + return _Component.apply(this, arguments) || this; + } + + var _proto = _class.prototype; + + _proto.render = function render() { + var _this$props = this.props, + children = _this$props.children, + initialValues = _this$props.initialValues, + defaultValue = _this$props.defaultValue, + value = _this$props.value, + schema = _this$props.schema, + others = _objectWithoutPropertiesLoose(_this$props, ["children", "initialValues", "defaultValue", "value", "schema"]); + + schema = schema || { + type: 'object' + }; + nonameId = 0; + return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("template", null, _react.default.createElement(_context.MarkupContext.Provider, { + value: schema + }, children)), _react.default.createElement(SchemaForm, _extends({}, others, { + defaultValue: value || defaultValue, + value: value, + initialValues: initialValues, + schema: schema + }), children)); + }; + + return _class; + }(_react.Component), _defineProperty(_class, "displayName", 'SchemaMarkupParser'), _temp; +}); +exports.SchemaMarkup = SchemaMarkup; \ No newline at end of file diff --git a/packages/react/lib/index.js b/packages/react/lib/index.js new file mode 100644 index 00000000000..6456f86c40a --- /dev/null +++ b/packages/react/lib/index.js @@ -0,0 +1,112 @@ +"use strict"; + +exports.__esModule = true; +var _exportNames = { + SchemaForm: true, + Field: true, + setValidationLocale: true, + setValidationLanguage: true, + createFormActions: true, + registerFieldMiddleware: true, + registerFormFieldPropsTransformer: true, + registerFormField: true, + registerFormFields: true, + registerFormWrapper: true, + caculateSchemaInitialValues: true, + FormPath: true +}; +exports.default = exports.createFormActions = exports.setValidationLanguage = exports.setValidationLocale = exports.Field = exports.SchemaForm = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _core = require("./shared/core"); + +exports.registerFieldMiddleware = _core.registerFieldMiddleware; +exports.registerFormFieldPropsTransformer = _core.registerFormFieldPropsTransformer; +exports.registerFormField = _core.registerFormField; +exports.registerFormFields = _core.registerFormFields; +exports.registerFormWrapper = _core.registerFormWrapper; + +var _utils = require("./utils"); + +exports.caculateSchemaInitialValues = _utils.caculateSchemaInitialValues; + +var _markup = require("./decorators/markup"); + +var _validator = require("@uform/validator"); + +var _core2 = require("@uform/core"); + +exports.FormPath = _core2.FormPath; + +var _reactEva = require("react-eva"); + +require("./state"); + +require("./shared/object"); + +require("./shared/render"); + +var _virtualbox = require("./shared/virtualbox"); + +Object.keys(_virtualbox).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _virtualbox[key]; +}); + +var _connect = require("./decorators/connect"); + +Object.keys(_connect).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _connect[key]; +}); + +var _broadcast = require("./shared/broadcast"); + +Object.keys(_broadcast).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _broadcast[key]; +}); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +var SchemaForm = (0, _markup.SchemaMarkup)()(_react.default.forwardRef(function (props, ref) { + var children = props.children, + className = props.className, + others = _objectWithoutPropertiesLoose(props, ["children", "className"]); + + return _react.default.createElement(_core.OriginForm, _extends({ + className: "rs-uform " + (className || '') + }, others, { + ref: ref + }), _react.default.createElement("div", { + className: "rs-uform-content" + }, _react.default.createElement(_core.FormField, { + name: "", + path: [], + schemaPath: [] + })), children); +})); +exports.SchemaForm = SchemaForm; +var Field = _markup.SchemaField; +exports.Field = Field; +var setValidationLocale = _validator.setLocale; +exports.setValidationLocale = setValidationLocale; +var setValidationLanguage = _validator.setLanguage; +exports.setValidationLanguage = setValidationLanguage; + +var createFormActions = function createFormActions() { + return (0, _reactEva.createActions)('getFormState', 'getFieldState', 'setFormState', 'setFieldState', 'getSchema', 'reset', 'submit', 'validate'); +}; + +exports.createFormActions = createFormActions; +SchemaForm.displayName = 'SchemaForm'; +var _default = SchemaForm; +exports.default = _default; \ No newline at end of file diff --git a/packages/react/lib/shared/broadcast.js b/packages/react/lib/shared/broadcast.js new file mode 100644 index 00000000000..f6b4a369681 --- /dev/null +++ b/packages/react/lib/shared/broadcast.js @@ -0,0 +1,167 @@ +"use strict"; + +exports.__esModule = true; +exports.FormConsumer = exports.useForm = exports.FormProvider = exports.FormBridge = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _utils = require("../utils"); + +var _context = require("./context"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +var FormBridge = function FormBridge() { + return function (Target) { + var Broadcast = function Broadcast(props) { + var broadcast = (0, _react.useContext)(_context.BroadcastContext); + + if (!broadcast) { + return _react.default.createElement(FormProvider, null, function (broadcast) { + return _react.default.createElement(Target, _extends({}, props, { + broadcast: broadcast + })); + }); + } + + return _react.default.createElement(Target, _extends({}, props, { + broadcast: broadcast + })); + }; + + Broadcast.displayName = 'FormBroadcast'; + return Broadcast; + }; +}; + +exports.FormBridge = FormBridge; + +var FormProvider = +/*#__PURE__*/ +function (_Component) { + _inheritsLoose(FormProvider, _Component); + + function FormProvider() { + var _this; + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + _this = _Component.call.apply(_Component, [this].concat(args)) || this; + + _defineProperty(_assertThisInitialized(_this), "broadcast", new _utils.Broadcast()); + + return _this; + } + + var _proto = FormProvider.prototype; + + _proto.componentWillUnmount = function componentWillUnmount() { + this.broadcast.unsubscribe(); + }; + + _proto.render = function render() { + var children = this.props.children; + return _react.default.createElement(_context.BroadcastContext.Provider, { + value: this.broadcast + }, (0, _utils.isFn)(children) ? children(this.broadcast) : children); + }; + + return FormProvider; +}(_react.Component); + +exports.FormProvider = FormProvider; + +_defineProperty(FormProvider, "displayName", 'FormProvider'); + +var useForm = function useForm() { + var _useState = (0, _react.useState)({}), + value = _useState[0], + setState = _useState[1]; + + var broadcast = (0, _react.useContext)(_context.BroadcastContext); + var initialized = false; + return (0, _react.useMemo)(function () { + if (broadcast) { + broadcast.subscribe(function (_ref) { + var type = _ref.type, + state = _ref.state, + schema = _ref.schema; + + if (type !== 'submit' && type !== 'reset') { + if (initialized) { + setState({ + status: type, + state: state, + schema: schema + }); + } else { + value = { + status: type, + state: state, + schema: schema + }; + } + } + }); + initialized = true; + var _value = value, + status = _value.status, + state = _value.state, + schema = _value.schema; + return { + status: status, + state: state, + schema: schema, + submit: function submit() { + if (broadcast) { + broadcast.notify({ + type: 'submit' + }); + } + }, + reset: function reset() { + if (broadcast) { + broadcast.notify({ + type: 'reset' + }); + } + }, + dispatch: function dispatch(name, payload) { + if (broadcast) { + broadcast.notify({ + type: 'dispatch', + name: name, + payload: payload + }); + } + } + }; + } + }, [broadcast]); +}; + +exports.useForm = useForm; + +var FormConsumer = function FormConsumer(_ref2) { + var children = _ref2.children; + var formApi = useForm(); + if (!formApi) return _react.default.createElement(_react.default.Fragment, null); + + if ((0, _utils.isFn)(children)) { + return children(formApi); + } else { + return children || _react.default.createElement(_react.default.Fragment, null); + } +}; + +exports.FormConsumer = FormConsumer; \ No newline at end of file diff --git a/packages/react/lib/shared/context.js b/packages/react/lib/shared/context.js new file mode 100644 index 00000000000..ec248f28574 --- /dev/null +++ b/packages/react/lib/shared/context.js @@ -0,0 +1,20 @@ +"use strict"; + +exports.__esModule = true; +exports.BroadcastContext = exports.StateContext = exports.MarkupContext = void 0; + +var _react = _interopRequireDefault(require("react")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var MarkupContext = _react.default.createContext(); + +exports.MarkupContext = MarkupContext; + +var StateContext = _react.default.createContext(); + +exports.StateContext = StateContext; + +var BroadcastContext = _react.default.createContext(); + +exports.BroadcastContext = BroadcastContext; \ No newline at end of file diff --git a/packages/react/lib/shared/core.js b/packages/react/lib/shared/core.js new file mode 100644 index 00000000000..33ac174900d --- /dev/null +++ b/packages/react/lib/shared/core.js @@ -0,0 +1,174 @@ +"use strict"; + +exports.__esModule = true; +exports.OriginForm = exports.FormField = exports.getFormFieldPropsTransformer = exports.registerFormFieldPropsTransformer = exports.registerFieldRenderer = exports.registerFormWrapper = exports.registerFieldMiddleware = exports.registerFormFields = exports.registerFormField = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _pascalCase = _interopRequireDefault(require("pascal-case")); + +var _utils = require("../utils"); + +var _context = require("./context"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +var FIELD_WRAPPERS = []; +var FORM_FIELDS = {}; +var FIELD_PROPS_TRANSFORMERS = {}; +var FIELD_RENDERER; + +var FORM_COMPONENT = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(FORM_COMPONENT, _React$Component); + + function FORM_COMPONENT() { + return _React$Component.apply(this, arguments) || this; + } + + var _proto = FORM_COMPONENT.prototype; + + _proto.render = function render() { + var _this$props = this.props, + formRef = _this$props.formRef, + props = _objectWithoutPropertiesLoose(_this$props, ["formRef"]); + + return _react.default.createElement('form', _extends({}, props, { + ref: formRef + })); + }; + + return FORM_COMPONENT; +}(_react.default.Component); + +FORM_COMPONENT.displayName = 'Form'; + +var registerFormField = function registerFormField(name, component, notWrapper) { + if ((0, _utils.isStr)(name) && name && ((0, _utils.isFn)(component) || typeof component.styledComponentId === 'string')) { + if (notWrapper) { + FORM_FIELDS[(0, _utils.lowercase)(name)] = component; + FORM_FIELDS[(0, _utils.lowercase)(name)].registerMiddlewares = []; + } else { + FORM_FIELDS[(0, _utils.lowercase)(name)] = (0, _utils.compose)(component, FIELD_WRAPPERS, true); + FORM_FIELDS[(0, _utils.lowercase)(name)].registerMiddlewares = FIELD_WRAPPERS; + } + + FORM_FIELDS[(0, _utils.lowercase)(name)].displayName = (0, _pascalCase.default)(name); + } +}; + +exports.registerFormField = registerFormField; + +var registerFormFields = function registerFormFields(object) { + (0, _utils.each)(object, function (component, name) { + registerFormField(name, component); + }); +}; + +exports.registerFormFields = registerFormFields; + +var registerFieldMiddleware = function registerFieldMiddleware() { + for (var _len = arguments.length, wrappers = new Array(_len), _key = 0; _key < _len; _key++) { + wrappers[_key] = arguments[_key]; + } + + FIELD_WRAPPERS = FIELD_WRAPPERS.concat(wrappers); + (0, _utils.each)(FORM_FIELDS, function (component, key) { + if (!component.registerMiddlewares.some(function (wrapper) { + return wrappers.indexOf(wrapper) > -1; + })) { + FORM_FIELDS[key] = (0, _utils.compose)(FORM_FIELDS[key], wrappers, true); + FORM_FIELDS[key].registerMiddlewares = FIELD_WRAPPERS; + } + }); +}; + +exports.registerFieldMiddleware = registerFieldMiddleware; + +var registerFormWrapper = function registerFormWrapper() { + for (var _len2 = arguments.length, wrappers = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + wrappers[_key2] = arguments[_key2]; + } + + FORM_COMPONENT = wrappers.reduce(function (buf, fn, index) { + var comp = (0, _utils.isFn)(fn) ? fn(buf) : buf; + comp.displayName = "FormWrapperLevel" + index; + return comp; + }, FORM_COMPONENT); +}; + +exports.registerFormWrapper = registerFormWrapper; + +var registerFieldRenderer = function registerFieldRenderer(renderer) { + FIELD_RENDERER = renderer; +}; + +exports.registerFieldRenderer = registerFieldRenderer; + +var registerFormFieldPropsTransformer = function registerFormFieldPropsTransformer(name, transformer) { + if ((0, _utils.isFn)(transformer)) { + FIELD_PROPS_TRANSFORMERS[name] = transformer; + } +}; + +exports.registerFormFieldPropsTransformer = registerFormFieldPropsTransformer; + +var getFormFieldPropsTransformer = function getFormFieldPropsTransformer(name) { + return FIELD_PROPS_TRANSFORMERS[name]; +}; + +exports.getFormFieldPropsTransformer = getFormFieldPropsTransformer; + +var FormField = function FormField(props) { + var _useContext = (0, _react.useContext)(_context.StateContext), + getSchema = _useContext.getSchema; + + var schema = getSchema(props.schemaPath || props.path) || {}; + var fieldName = (0, _utils.lowercase)(schema['x-component'] || schema.type); + var component = schema['x-render'] ? FIELD_RENDERER : FORM_FIELDS[fieldName]; + + if (component) { + return _react.default.createElement(component, _extends({}, props, { + schema: schema, + path: props.path, + name: props.name, + getSchema: getSchema, + renderComponent: schema['x-render'] ? function ($props) { + return _react.default.createElement(FORM_FIELDS[fieldName], _extends({}, props, $props, { + schema: schema, + path: props.path, + name: props.name + })); + } : undefined + })); + } else { + if (console && console.error) { + if (fieldName) { + console.error("The schema field `" + fieldName + "`'s component is not found."); + } else { + console.error("The schema field's component is not found, or field's schema is not defined."); + } + } + + return _react.default.createElement(_react.default.Fragment, null); + } +}; + +exports.FormField = FormField; + +var OriginForm = _react.default.forwardRef(function (props, ref) { + return _react.default.createElement(FORM_COMPONENT, _extends({}, props, { + ref: ref + })); +}); + +exports.OriginForm = OriginForm; \ No newline at end of file diff --git a/packages/react/lib/shared/mutators.js b/packages/react/lib/shared/mutators.js new file mode 100644 index 00000000000..d76c2a4e2f9 --- /dev/null +++ b/packages/react/lib/shared/mutators.js @@ -0,0 +1,80 @@ +"use strict"; + +exports.__esModule = true; +exports.createMutators = void 0; + +var _utils = require("../utils"); + +var flatArr = function flatArr(arr) { + return arr.reduce(function (buf, item) { + return (0, _utils.isArr)(item) ? buf.concat(flatArr(item)) : buf.concat(item); + }, []); +}; + +var createMutators = function createMutators(props) { + return { + change: function change(value) { + props.form.setValue(props.name, value); + }, + dispatch: function dispatch(name, payload) { + props.form.triggerEffect(name, { + name: props.name, + path: props.path, + payload: payload + }); + }, + errors: function errors(_errors) { + var _props$form; + + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + (_props$form = props.form).setErrors.apply(_props$form, [props.name, flatArr((0, _utils.toArr)(_errors))].concat(args)); + }, + push: function push(value) { + var arr = (0, _utils.toArr)(props.form.getValue(props.name)); + props.form.setValue(props.name, arr.concat(value)); + }, + pop: function pop() { + var arr = [].concat((0, _utils.toArr)(props.form.getValue(props.name))); + arr.pop(); + props.form.setValue(props.name, arr); + }, + insert: function insert(index, value) { + var arr = [].concat((0, _utils.toArr)(props.form.getValue(props.name))); + arr.splice(index, 0, value); + props.form.setValue(props.name, arr); + }, + remove: function remove(index) { + var val = props.form.getValue(props.name); + + if ((0, _utils.isNum)(index) && (0, _utils.isArr)(val)) { + val = [].concat(val); + val.splice(index, 1); + props.form.setValue(props.name, val); + } else { + props.form.removeValue(props.name); + } + }, + unshift: function unshift(value) { + var arr = [].concat((0, _utils.toArr)(props.form.getValue(props.name))); + arr.unshift(value); + props.form.setValue(props.name, arr); + }, + shift: function shift() { + var arr = [].concat((0, _utils.toArr)(props.form.getValue(props.name))); + arr.shift(); + props.form.setValue(props.name, arr); + }, + move: function move($from, $to) { + var arr = [].concat((0, _utils.toArr)(props.form.getValue(props.name))); + var item = arr[$from]; + arr.splice($from, 1); + arr.splice($to, 0, item); + props.form.setValue(props.name, arr); + } + }; +}; + +exports.createMutators = createMutators; \ No newline at end of file diff --git a/packages/react/lib/shared/object.js b/packages/react/lib/shared/object.js new file mode 100644 index 00000000000..ee300de8133 --- /dev/null +++ b/packages/react/lib/shared/object.js @@ -0,0 +1,44 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _core = require("./core"); + +var _utils = require("../utils"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +(0, _core.registerFormField)('object', +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(ObjectField, _React$Component); + + function ObjectField() { + return _React$Component.apply(this, arguments) || this; + } + + var _proto = ObjectField.prototype; + + _proto.renderProperties = function renderProperties() { + var _this$props = this.props, + renderField = _this$props.renderField, + getOrderProperties = _this$props.getOrderProperties; + var properties = getOrderProperties(this.props); + var children = []; + (0, _utils.each)(properties, function (_temp) { + var _ref = _temp === void 0 ? {} : _temp, + key = _ref.key; + + key && children.push(renderField(key, true)); + }); + return children; + }; + + _proto.render = function render() { + return this.renderProperties(); + }; + + return ObjectField; +}(_react.default.Component)); \ No newline at end of file diff --git a/packages/react/lib/shared/render.js b/packages/react/lib/shared/render.js new file mode 100644 index 00000000000..9bfc2812edb --- /dev/null +++ b/packages/react/lib/shared/render.js @@ -0,0 +1,39 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _field = require("../state/field"); + +var _core = require("./core"); + +var _utils = require("../utils"); + +var _class, _temp; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +(0, _core.registerFieldRenderer)((0, _field.StateField)()((_temp = _class = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(_class, _React$Component); + + function _class() { + return _React$Component.apply(this, arguments) || this; + } + + var _proto = _class.prototype; + + _proto.render = function render() { + if ((0, _utils.isFn)(this.props.schema['x-render'])) { + return this.props.schema['x-render'](this.props); + } + + return _react.default.createElement(_react.default.Fragment, null); + }; + + return _class; +}(_react.default.Component), _defineProperty(_class, "displayName", 'FieldXRenderer'), _temp))); \ No newline at end of file diff --git a/packages/react/lib/shared/virtualbox.js b/packages/react/lib/shared/virtualbox.js new file mode 100644 index 00000000000..7b51d312ce6 --- /dev/null +++ b/packages/react/lib/shared/virtualbox.js @@ -0,0 +1,124 @@ +"use strict"; + +exports.__esModule = true; +exports.FormSlot = exports.createVirtualBox = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _core = require("./core"); + +var _markup = require("../decorators/markup"); + +var _field = require("../state/field"); + +var _utils = require("../utils"); + +var _pascalCase = _interopRequireDefault(require("pascal-case")); + +var _class2, _temp2; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var createVirtualBox = function createVirtualBox(name, component) { + var _class, _temp; + + (0, _utils.registerVirtualbox)(name); + (0, _core.registerFormField)(name, (0, _field.StateField)()((_temp = _class = + /*#__PURE__*/ + function (_React$PureComponent) { + _inheritsLoose(_class, _React$PureComponent); + + function _class() { + return _React$PureComponent.apply(this, arguments) || this; + } + + var _proto = _class.prototype; + + _proto.render = function render() { + var _this$props = this.props, + schema = _this$props.schema, + schemaPath = _this$props.schemaPath, + path = _this$props.path, + getOrderProperties = _this$props.getOrderProperties; + var parentPath = path.slice(0, path.length - 1); + var properties = getOrderProperties(this.props); + var children = properties.map(function (_ref) { + var key = _ref.key; + var newPath = parentPath.concat(key); + var newName = newPath.join('.'); + var newSchemaPath = schemaPath.concat(key); + return _react.default.createElement(_core.FormField, { + key: newSchemaPath, + name: newName, + path: newPath, + schemaPath: newSchemaPath + }); + }); + return _react.default.createElement(component, schema['x-props'], children); + }; + + return _class; + }(_react.default.PureComponent), _defineProperty(_class, "displayName", 'VirtualBoxWrapper'), _temp)), true); + + var VirtualBox = function VirtualBox(_ref2) { + var children = _ref2.children, + fieldName = _ref2.name, + render = _ref2.render, + props = _objectWithoutPropertiesLoose(_ref2, ["children", "name", "render"]); + + return _react.default.createElement(_markup.SchemaField, { + type: "object", + name: fieldName, + "x-component": name, + "x-props": props, + "x-render": render + }, children); + }; + + if (component.defaultProps) { + VirtualBox.defaultProps = component.defaultProps; + } + + VirtualBox.displayName = (0, _pascalCase.default)(name); + return VirtualBox; +}; + +exports.createVirtualBox = createVirtualBox; +(0, _utils.registerVirtualbox)('slot'); +(0, _core.registerFormField)('slot', (0, _field.StateField)()((_temp2 = _class2 = +/*#__PURE__*/ +function (_React$Component) { + _inheritsLoose(_class2, _React$Component); + + function _class2() { + return _React$Component.apply(this, arguments) || this; + } + + var _proto2 = _class2.prototype; + + _proto2.render = function render() { + var schema = this.props.schema; + return _react.default.createElement(_react.default.Fragment, null, schema.renderChildren); + }; + + return _class2; +}(_react.default.Component), _defineProperty(_class2, "displayName", 'VirtualBoxWrapper'), _temp2))); + +var FormSlot = function FormSlot(_ref3) { + var name = _ref3.name, + children = _ref3.children; + return _react.default.createElement(_markup.SchemaField, { + type: "object", + name: name, + "x-component": "slot", + renderChildren: children + }); +}; + +exports.FormSlot = FormSlot; \ No newline at end of file diff --git a/packages/react/lib/state/field.js b/packages/react/lib/state/field.js new file mode 100644 index 00000000000..b7c2d072033 --- /dev/null +++ b/packages/react/lib/state/field.js @@ -0,0 +1,217 @@ +"use strict"; + +exports.__esModule = true; +exports.StateField = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _utils = require("../utils"); + +var _mutators = require("../shared/mutators"); + +var _context = require("../shared/context"); + +var _core = require("../shared/core"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var StateField = (0, _utils.createHOC)(function (options, Field) { + var StateField = + /*#__PURE__*/ + function (_Component) { + _inheritsLoose(StateField, _Component); + + function StateField(props) { + var _this; + + _this = _Component.call(this, props) || this; + + _defineProperty(_assertThisInitialized(_this), "renderField", function (key, addReactKey) { + var path = _this.props.path.concat(key); + + var schemaPath = _this.props.schemaPath.concat(key); + + var name = path.join('.'); + return _react.default.createElement(_core.FormField, { + key: addReactKey ? name : undefined, + path: path, + name: name, + schemaPath: schemaPath + }); + }); + + _defineProperty(_assertThisInitialized(_this), "getOrderProperties", function () { + var _this$props = _this.props, + schema = _this$props.schema, + path = _this$props.path; + if (!schema) return []; + var properties = []; + (0, _utils.each)(schema.properties, function (item, key) { + var index = item['x-index']; + var newPath = path.concat(key); + var newName = newPath.join('.'); + + if (typeof index === 'number') { + properties[index] = { + schema: item, + key: key, + path: newPath, + name: newName + }; + } else { + properties.push({ + schema: item, + key: key, + path: newPath, + name: newName + }); + } + }); + return properties; + }); + + _this.initialized = false; + _this.state = {}; + _this.field = props.form.registerField(props.name || props.schemaPath.join('.'), { + rules: _this.getValidateRules(props), + path: props.schemaPath, + onChange: _this.onChangeHandler(props), + editable: _this.getEditable(props), + props: props.schema + }); + _this.initialized = true; + _this.mutators = (0, _mutators.createMutators)(props); + return _this; + } + + var _proto = StateField.prototype; + + _proto.getEditable = function getEditable(props) { + props = props || this.props; + + if (props.schema['x-props'] && props.schema['x-props'].editable !== undefined) { + return props.schema['x-props'].editable; + } + + return props.editable; + }; + + _proto.getValidateRules = function getValidateRules(props) { + props = props || this.props; + var rules = []; + + if (props && props.schema) { + rules = (0, _utils.toArr)(props.schema['x-rules']); + + if (props.schema.required) { + rules.push({ + required: true + }); + } + } + + return rules; + }; + + _proto.onChangeHandler = function onChangeHandler() { + var _this2 = this; + + return function (fieldState) { + if (_this2.initialized) { + if (_this2.unmounted) return; + + _this2.setState(fieldState); + } else { + _this2.state = fieldState; + } + }; + }; + + _proto.componentWillUnmount = function componentWillUnmount() { + this.unmounted = true; + this.field.removeValue(); + }; + + _proto.componentDidUpdate = function componentDidUpdate(prevProps) { + this.unmounted = false; + + if (!(0, _utils.isEqual)(this.props.schema, prevProps.schema, _utils.filterSchema)) { + this.field.changeProps(this.props.schema); + } + + this.field.changeEditable(this.getEditable(this.props)); + }; + + _proto.render = function render() { + var _this$props2 = this.props, + name = _this$props2.name, + path = _this$props2.path, + schemaPath = _this$props2.schemaPath, + renderComponent = _this$props2.renderComponent, + locale = _this$props2.locale, + getSchema = _this$props2.getSchema; + var _this$state = this.state, + value = _this$state.value, + visible = _this$state.visible, + props = _this$state.props, + errors = _this$state.errors, + loading = _this$state.loading, + editable = _this$state.editable, + required = _this$state.required; + var newValue = (0, _utils.schemaIs)(props, 'object') ? value || {} : (0, _utils.schemaIs)(props, 'array') ? value || [] : value; + return visible === false ? _react.default.createElement(_react.default.Fragment, null) : _react.default.createElement(Field, { + name: name, + value: newValue, + errors: errors, + required: required, + path: path, + editable: editable, + locale: locale, + loading: loading, + schemaPath: schemaPath, + getSchema: getSchema, + renderField: this.renderField, + renderComponent: renderComponent, + getOrderProperties: this.getOrderProperties, + mutators: this.mutators, + schema: props + }); + }; + + return StateField; + }(_react.Component); + + _defineProperty(StateField, "displayName", 'StateField'); + + return function (_ref) { + var name = _ref.name, + path = _ref.path, + schemaPath = _ref.schemaPath, + renderComponent = _ref.renderComponent; + + var _useContext = (0, _react.useContext)(_context.StateContext), + form = _useContext.form, + getSchema = _useContext.getSchema, + locale = _useContext.locale, + editable = _useContext.editable; + + return _react.default.createElement(StateField, { + name: name, + path: path, + form: form, + schemaPath: schemaPath, + getSchema: getSchema, + locale: locale, + editable: editable, + renderComponent: renderComponent, + schema: getSchema(schemaPath || path) + }); + }; +}); +exports.StateField = StateField; \ No newline at end of file diff --git a/packages/react/lib/state/form.js b/packages/react/lib/state/form.js new file mode 100644 index 00000000000..2873aaf1d43 --- /dev/null +++ b/packages/react/lib/state/form.js @@ -0,0 +1,307 @@ +"use strict"; + +exports.__esModule = true; +exports.StateForm = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _utils = require("../utils"); + +var _core = require("@uform/core"); + +var _context = require("../shared/context"); + +var _core2 = require("../shared/core"); + +var _reactEva = require("react-eva"); + +var _broadcast = require("../shared/broadcast"); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var StateForm = (0, _utils.createHOC)(function (options, Form) { + var StateForm = + /*#__PURE__*/ + function (_Component) { + _inheritsLoose(StateForm, _Component); + + function StateForm(props) { + var _this; + + _this = _Component.call(this, props) || this; + + _defineProperty(_assertThisInitialized(_this), "getSchema", function (path) { + var schema = _this.props.schema; + var result = (0, _utils.getSchemaNodeFromPath)(schema, path); + var transformer = result && (0, _core2.getFormFieldPropsTransformer)(result['x-component'] || result['type']); + return transformer ? transformer(result) : result; + }); + + _defineProperty(_assertThisInitialized(_this), "onNativeSubmitHandler", function (e) { + if (e.preventDefault) { + e.stopPropagation(); + e.preventDefault(); + } + + _this.form.submit(); + }); + + _defineProperty(_assertThisInitialized(_this), "getValues", function () { + return _this.form.getValue(); + }); + + _defineProperty(_assertThisInitialized(_this), "submit", function () { + _this.form.submit(); + }); + + _defineProperty(_assertThisInitialized(_this), "reset", function () { + _this.form.reset(); + }); + + _defineProperty(_assertThisInitialized(_this), "validate", function () { + return _this.form.validate(); + }); + + _this.initialized = false; + _this.form = (0, _core.createForm)({ + initialValues: props.defaultValue || props.initialValues, + effects: props.effects, + subscribes: props.subscribes, + schema: props.schema, + onSubmit: _this.onSubmitHandler(props), + onFormChange: _this.onFormChangeHandler(props), + onFieldChange: _this.onFieldChangeHandler(props), + onValidateFailed: props.onValidateFailed, + onReset: _this.onResetHandler(props), + onFormWillInit: function onFormWillInit(form) { + props.implementActions({ + setFormState: form.setFormState, + getFormState: form.getFormState, + setFieldState: form.setFieldState, + getFieldState: form.getFieldState, + reset: _this.reset, + submit: _this.submit, + validate: _this.validate, + getSchema: _this.getSchema + }); + } + }); + _this.state = {}; + _this.initialized = true; + return _this; + } + + var _proto = StateForm.prototype; + + _proto.notify = function notify(payload) { + var _this$props = this.props, + broadcast = _this$props.broadcast, + schema = _this$props.schema; + + if (broadcast) { + payload.schema = schema; + broadcast.notify(payload); + } + }; + + _proto.onFormChangeHandler = function onFormChangeHandler(props) { + var _this2 = this; + + var lastState = this.state; + return function (_ref) { + var formState = _ref.formState; + if (_this2.unmounted) return; + + if (lastState && lastState.pristine !== formState.pristine) { + if (lastState.pristine) { + _this2.notify({ + type: 'changed', + state: formState + }); + } else { + _this2.notify({ + type: 'reseted', + state: formState + }); + } + } + + lastState = formState; + + if (_this2.initialized) { + if (formState.dirty) { + clearTimeout(_this2.timerId); + _this2.timerId = setTimeout(function () { + clearTimeout(_this2.timerId); + + _this2.setState(formState); + }, 60); + } + } else { + _this2.state = formState; + + _this2.notify({ + type: 'initialize', + state: formState + }); + } + }; + }; + + _proto.onFieldChangeHandler = function onFieldChangeHandler(props) { + var _this3 = this; + + return function (_ref2) { + var formState = _ref2.formState; + + if (props.onChange) { + var values = formState.values; + + if (!(0, _utils.isEqual)(_this3.lastFormValues, values)) { + props.onChange(values); + _this3.lastFormValues = (0, _utils.clone)(values); + } + } + }; + }; + + _proto.onSubmitHandler = function onSubmitHandler(props) { + var _this4 = this; + + return function (_ref3) { + var formState = _ref3.formState; + + if (props.onSubmit) { + var promise = props.onSubmit((0, _utils.clone)(formState.values)); + + if (promise && promise.then) { + _this4.notify({ + type: 'submitting', + state: _this4.state + }); + + promise.then(function () { + _this4.notify({ + type: 'submitted', + state: _this4.state + }); + }); + } + } + }; + }; + + _proto.onResetHandler = function onResetHandler(props) { + return function (_ref4) { + var formState = _ref4.formState; + + if (props.onReset) { + props.onReset((0, _utils.clone)(formState.values)); + } + }; + }; + + _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) { + return !(0, _utils.isEqual)(nextProps, this.props); + }; + + _proto.componentDidUpdate = function componentDidUpdate(prevProps) { + if (this.props.value && !(0, _utils.isEqual)(this.props.value, prevProps.value)) { + this.form.changeValues(this.props.value); + } + + if (this.props.initialValues && !(0, _utils.isEqual)(this.props.initialValues, prevProps.initialValues)) { + this.form.initialize(this.props.initialValues); + } + }; + + _proto.componentDidMount = function componentDidMount() { + var _this5 = this; + + this.unmounted = false; + this.form.triggerEffect('onFormMount', this.form.publishState()); + this.unsubscribe = this.props.broadcast.subscribe(function (_ref5) { + var type = _ref5.type, + name = _ref5.name, + payload = _ref5.payload; + + if (type === 'submit') { + _this5.submit(); + } else if (type === 'reset') { + _this5.reset(); + } else if (type === 'dispatch') { + _this5.form.triggerEffect(name, payload); + } + }); + }; + + _proto.componentWillUnmount = function componentWillUnmount() { + this.unmounted = true; + + if (this.form) { + this.form.destructor(); + this.unsubscribe(); + delete this.form; + } + }; + + _proto.render = function render() { + var _this$props2 = this.props, + onSubmit = _this$props2.onSubmit, + onChange = _this$props2.onChange, + onReset = _this$props2.onReset, + onValidateFailed = _this$props2.onValidateFailed, + initialValues = _this$props2.initialValues, + defaultValue = _this$props2.defaultValue, + actions = _this$props2.actions, + effects = _this$props2.effects, + implementActions = _this$props2.implementActions, + dispatch = _this$props2.dispatch, + editable = _this$props2.editable, + createEvents = _this$props2.createEvents, + subscribes = _this$props2.subscribes, + subscription = _this$props2.subscription, + children = _this$props2.children, + schema = _this$props2.schema, + broadcast = _this$props2.broadcast, + locale = _this$props2.locale, + value = _this$props2.value, + others = _objectWithoutPropertiesLoose(_this$props2, ["onSubmit", "onChange", "onReset", "onValidateFailed", "initialValues", "defaultValue", "actions", "effects", "implementActions", "dispatch", "editable", "createEvents", "subscribes", "subscription", "children", "schema", "broadcast", "locale", "value"]); + + return _react.default.createElement(_context.StateContext.Provider, { + value: { + form: this.form, + getSchema: this.getSchema, + locale: locale, + editable: editable, + broadcast: this.broadcast + } + }, _react.default.createElement(Form, _extends({}, others, { + onSubmit: this.onNativeSubmitHandler + }), children)); + }; + + return StateForm; + }(_react.Component); + + _defineProperty(StateForm, "displayName", 'StateForm'); + + _defineProperty(StateForm, "defaultProps", { + locale: {} + }); + + return (0, _reactEva.connect)({ + autoRun: false + })((0, _broadcast.FormBridge)()(StateForm)); +}); +exports.StateForm = StateForm; \ No newline at end of file diff --git a/packages/react/lib/state/index.js b/packages/react/lib/state/index.js new file mode 100644 index 00000000000..a2bb3ce2518 --- /dev/null +++ b/packages/react/lib/state/index.js @@ -0,0 +1,10 @@ +"use strict"; + +var _core = require("../shared/core"); + +var _form = require("./form"); + +var _field = require("./field"); + +(0, _core.registerFormWrapper)((0, _form.StateForm)()); +(0, _core.registerFieldMiddleware)((0, _field.StateField)()); \ No newline at end of file diff --git a/packages/react/lib/utils.js b/packages/react/lib/utils.js new file mode 100644 index 00000000000..e0a39648d9e --- /dev/null +++ b/packages/react/lib/utils.js @@ -0,0 +1,64 @@ +"use strict"; + +exports.__esModule = true; +var _exportNames = { + lowercase: true, + isNum: true, + compose: true, + createHOC: true, + filterSchema: true, + filterSchemaPropertiesAndReactChildren: true +}; +exports.filterSchemaPropertiesAndReactChildren = exports.filterSchema = exports.createHOC = exports.compose = exports.isNum = exports.lowercase = void 0; + +var _utils = require("@uform/utils"); + +Object.keys(_utils).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _utils[key]; +}); + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +var lowercase = function lowercase(str) { + return String(str || '').toLowerCase(); +}; + +exports.lowercase = lowercase; + +var isNum = function isNum(val) { + return typeof val === 'number'; +}; + +exports.isNum = isNum; + +var compose = function compose(payload, args, revert) { + return (0, _utils.reduce)(args, function (buf, fn) { + return (0, _utils.isFn)(fn) ? fn(buf) : buf; + }, payload, revert); +}; + +exports.compose = compose; + +var createHOC = function createHOC(wrapper) { + return function (options) { + return function (Target) { + return wrapper(_extends({}, options), Target); + }; + }; +}; + +exports.createHOC = createHOC; + +var filterSchema = function filterSchema(_, key) { + return key !== 'properties' && key !== 'items'; +}; + +exports.filterSchema = filterSchema; + +var filterSchemaPropertiesAndReactChildren = function filterSchemaPropertiesAndReactChildren(_, key) { + return key !== 'properties' && key !== 'items' && key !== 'children'; +}; + +exports.filterSchemaPropertiesAndReactChildren = filterSchemaPropertiesAndReactChildren; \ No newline at end of file diff --git a/packages/react/package.json b/packages/react/package.json index 2f1939bd09c..994a6e514f5 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -2,7 +2,7 @@ "name": "@uform/react", "version": "0.1.0-alpha.1", "license": "MIT", - "main": "lib/index.js", + "main": "lib", "repository": { "type": "git", "url": "git+https://github.com/alibaba/uform.git" diff --git a/packages/utils/lib/accessor.js b/packages/utils/lib/accessor.js new file mode 100644 index 00000000000..050012b67b3 --- /dev/null +++ b/packages/utils/lib/accessor.js @@ -0,0 +1,540 @@ +"use strict"; + +exports.__esModule = true; +exports.getPathSegments = getPathSegments; +exports.parsePaths = exports.parseDestruct = exports.parseDesturctPath = exports.existIn = exports.deleteIn = exports.setIn = exports.getIn = void 0; + +var _types = require("./types"); + +var _array = require("./array"); + +var _lru = require("./lru"); + +function whitespace(c) { + return c === ' ' || c === '\n' || c === '\t' || c === '\f' || c === '\r'; +} + +function toString(val) { + if (!val) return ''; + + if ((0, _types.isArr)(val)) { + return val.join('.'); + } + + return (0, _types.isStr)(val) ? val : ''; +} + +var PathCache = new _lru.LRUMap(1000); + +function getPathSegments(path) { + if ((0, _types.isArr)(path)) return path; + + if ((0, _types.isStr)(path) && path) { + var cached = PathCache.get(path); + if (cached) return cached; + var pathArr = path.split('.'); + var parts = []; + + for (var i = 0; i < pathArr.length; i++) { + var p = pathArr[i]; + + while (p[p.length - 1] === '\\' && pathArr[i + 1] !== undefined) { + p = p.slice(0, -1) + '.'; + p += pathArr[++i]; + } + + parts.push(p); + } + + PathCache.set(path, parts); + return parts; + } + + return []; +} + +var DestructTokenizer = +/*#__PURE__*/ +function () { + function DestructTokenizer(text, cbs) { + this.text = text; + this.index = 0; + this.cbs = cbs; + this.state = this.processNameStart; + this.declareNameStart = 0; + this.declareNameEnd = 0; + this.nbraceCount = 0; + this.nbracketCount = 0; + } + + var _proto = DestructTokenizer.prototype; + + _proto.goto = function goto(name) { + this.state = this.StateMap[name]; + }; + + _proto.parse = function parse() { + var char = ''; + var prev = ''; + var l = this.text.length; + + for (; this.index < l; this.index++) { + char = this.text.charAt(this.index); + this.EOF = l - 1 === this.index; + this.state(char, prev); + prev = char; + } + }; + + _proto.processNameStart = function processNameStart(char) { + if (char === '{' || char === '[') { + this.state = this.processDestructStart; + this.index--; + } else if (!whitespace(char)) { + this.declareNameStart = this.index; + this.state = this.processName; + } + }; + + _proto.processName = function processName(char, prev) { + if (whitespace(char)) { + this.declareNameEnd = this.index; + this.cbs.name(this.getName()); + } else if (this.EOF) { + this.declareNameEnd = this.index + 1; + this.cbs.name(this.getName()); + } + }; + + _proto.processDestructStart = function processDestructStart(char) { + if (char === '{') { + this.nbraceCount++; + this.cbs.destructObjectStart(); + } else if (char === '[') { + this.nbracketCount++; + this.cbs.destructArrayStart(); + } else if (!whitespace(char)) { + this.state = this.processDestructKey; + this.destructKeyStart = this.index; + this.index--; + } + }; + + _proto.processDestructKey = function processDestructKey(char, prev) { + if (char === '}') { + this.nbraceCount--; + + if (this.nbraceCount || this.nbracketCount) { + this.state = this.processDestructStart; + } + + if (!whitespace(prev)) { + this.destructKey = this.text.substring(this.destructKeyStart, this.index); + } + + this.cbs.destructKey(this.destructKey); + this.cbs.destructObjectEnd(); + + if (!this.nbraceCount && !this.nbracketCount) { + this.index = this.text.length; + } + } else if (char === ']') { + this.nbracketCount--; + + if (this.nbraceCount || this.nbracketCount) { + this.state = this.processDestructStart; + } + + if (!whitespace(prev)) { + this.destructKey = this.text.substring(this.destructKeyStart, this.index); + } + + this.cbs.destructKey(this.destructKey); + this.cbs.destructArrayEnd(); + + if (!this.nbraceCount && !this.nbracketCount) { + this.index = this.text.length; + } + } else if (whitespace(char) || char === ':' || char === ',') { + if (!whitespace(prev)) { + this.destructKey = this.text.substring(this.destructKeyStart, this.index); + } + + if (!whitespace(char)) { + this.state = this.processDestructStart; + this.cbs.destructKey(this.destructKey, char === ':'); + } + } + }; + + _proto.getName = function getName() { + return this.text.substring(this.declareNameStart, this.declareNameEnd); + }; + + return DestructTokenizer; +}(); + +var parseDestruct = function parseDestruct(string) { + if (!(0, _types.isStr)(string)) return string; + var destruct; + var stack = []; + var token = ''; + var realKey = ''; + var lastDestruct; + var root; + new DestructTokenizer(string, { + name: function name(key) { + root = key; + }, + destructKey: function destructKey(key, readyReplace) { + if (!key) return; + token = key; + + if (readyReplace) { + realKey = key; + lastDestruct = destruct; + return; + } + + if ((0, _types.isArr)(destruct)) { + destruct.push(key); + } else if ((0, _types.isPlainObj)(destruct)) { + destruct[realKey && lastDestruct === destruct ? realKey : key] = key; + } + + realKey = ''; + lastDestruct = destruct; + }, + destructArrayStart: function destructArrayStart() { + if (!destruct) { + root = []; + destruct = root; + } else { + destruct = []; + } + + var tail = stack[stack.length - 1]; + + if ((0, _types.isPlainObj)(tail)) { + tail[token] = destruct; + } else if ((0, _types.isArr)(tail)) { + tail.push(destruct); + } + + stack.push(destruct); + }, + destructObjectStart: function destructObjectStart() { + if (!destruct) { + root = {}; + destruct = root; + } else { + destruct = {}; + } + + var tail = stack[stack.length - 1]; + + if ((0, _types.isPlainObj)(tail)) { + tail[token] = destruct; + } else if ((0, _types.isArr)(tail)) { + tail.push(destruct); + } + + stack.push(destruct); + }, + destructArrayEnd: function destructArrayEnd() { + stack.pop(); + destruct = stack[stack.length - 1]; + }, + destructObjectEnd: function destructObjectEnd() { + stack.pop(); + destruct = stack[stack.length - 1]; + } + }).parse(); + return root; +}; + +exports.parseDestruct = parseDestruct; + +var traverse = function traverse(obj, callback) { + var _traverse = function _traverse(obj, path, callback) { + if ((0, _types.isStr)(obj)) return callback(obj, obj); + (0, _array.each)(obj, function (item, key) { + var _path = path.concat(key); + + if ((0, _types.isArr)(item) || (0, _types.isPlainObj)(item)) { + _traverse(item, _path, callback); + } else { + callback(_path, item); + } + }); + }; + + return _traverse(obj, [], callback); +}; + +var mapReduce = function mapReduce(obj, callback) { + var _traverse = function _traverse(obj, path, callback) { + return (0, _array.map)(obj, function (item, key) { + var _path = path.concat(key); + + if ((0, _types.isArr)(item) || (0, _types.isPlainObj)(item)) { + return _traverse(item, _path, callback); + } else { + return callback(_path, item); + } + }); + }; + + return _traverse(obj, [], callback); +}; + +var parseDesturctPath = function parseDesturctPath(path) { + var _path = getPathSegments(path); + + var lastKey = _path[_path.length - 1]; + + var startPath = _path.slice(0, _path.length - 1); + + var destruct = parseDestruct(lastKey); + return { + path: _path, + lastKey: lastKey, + startPath: startPath, + destruct: destruct + }; +}; + +exports.parseDesturctPath = parseDesturctPath; + +var parsePaths = function parsePaths(path) { + var result = []; + var parsed = parseDesturctPath(path); + + if ((0, _types.isStr)(parsed.destruct)) { + return path; + } else if (parsed.destruct) { + traverse(parsed.destruct, function (path, key) { + result.push({ + path: parsed.startPath.concat(path), + startPath: parsed.startPath, + endPath: path, + key: key + }); + }); + return result; + } else { + return path; + } +}; + +exports.parsePaths = parsePaths; + +var resolveGetIn = function resolveGetIn(get) { + var cache = new Map(); + return function (obj, path, value) { + var ast = null; + + if (!(ast = cache.get(path))) { + ast = parseDesturctPath(path); + cache.set(path, ast); + } + + if (!(0, _types.isArr)(ast.destruct) && !(0, _types.isPlainObj)(ast.destruct)) { + return get(obj, path, value); + } + + return mapReduce(ast.destruct, function (path, key) { + return get(obj, key); + }); + }; +}; + +var resolveUpdateIn = function resolveUpdateIn(update, getIn) { + var cache = new Map(); + return function (obj, path, value) { + var paths = []; + + if (!(paths = cache.get(path))) { + paths = parsePaths(path); + cache.set(path, paths); + } + + if (!(0, _types.isArr)(paths)) return update(obj, path, value); + + if (paths && paths.length) { + (0, _array.each)(paths, function (_ref) { + var path = _ref.path, + key = _ref.key, + startPath = _ref.startPath, + endPath = _ref.endPath; + update(obj, startPath.concat(key), getIn(value, endPath)); + }); + } + + return obj; + }; +}; + +var resolveExistIn = function resolveExistIn(has) { + var cache = new Map(); + return function (obj, path) { + var paths = []; + + if (!(paths = cache.get(path))) { + paths = parsePaths(path); + cache.set(path, paths); + } + + if (!(0, _types.isArr)(paths)) { + return has(obj, path); + } + + if (paths && paths.length) { + return (0, _array.every)(paths, function (_ref2) { + var startPath = _ref2.startPath, + key = _ref2.key; + return has(obj, startPath.concat(key)); + }); + } + + return false; + }; +}; + +function _getIn(obj, path, value) { + if (!(0, _types.isObj)(obj) || !path) { + return obj; + } + + path = toString(path); + + if (path in obj) { + return obj[path]; + } + + var pathArr = getPathSegments(path); + + for (var i = 0; i < pathArr.length; i++) { + if (!Object.prototype.propertyIsEnumerable.call(obj, pathArr[i])) { + return value; + } + + obj = obj[pathArr[i]]; + + if (obj === undefined || obj === null) { + // `obj` is either `undefined` or `null` so we want to stop the loop, and + // if this is not the last bit of the path, and + // if it did't return `undefined` + // it would return `null` if `obj` is `null` + // but we want `get({foo: null}, 'foo.bar')` to equal `undefined`, or the supplied value, not `null` + if (i !== pathArr.length - 1) { + return value; + } + + break; + } + } + + return obj; +} + +function _setIn(obj, path, value) { + if (!(0, _types.isObj)(obj) || !path) { + return; + } + + path = toString(path); + + if (path in obj) { + obj[path] = value; + return; + } + + var pathArr = getPathSegments(path); + + for (var i = 0; i < pathArr.length; i++) { + var p = pathArr[i]; + + if (!(0, _types.isObj)(obj[p])) { + obj[p] = {}; + } + + if (i === pathArr.length - 1) { + obj[p] = value; + } + + obj = obj[p]; + } +} + +function _deleteIn(obj, path) { + if (!(0, _types.isObj)(obj) || !path) { + return; + } + + path = toString(path); + + if (path in obj) { + delete obj[path]; + return; + } + + var pathArr = getPathSegments(path); + + for (var i = 0; i < pathArr.length; i++) { + var p = pathArr[i]; + + if (i === pathArr.length - 1) { + if ((0, _types.isArr)(obj)) { + obj.splice(p, 1); + } else { + delete obj[p]; + } + + return; + } + + obj = obj[p]; + + if (!(0, _types.isObj)(obj)) { + return; + } + } +} + +function _existIn(obj, path) { + if (!(0, _types.isObj)(obj) || !path) { + return false; + } + + path = toString(path); + + if (path in obj) { + return true; + } + + var pathArr = getPathSegments(path); + + for (var i = 0; i < pathArr.length; i++) { + if ((0, _types.isObj)(obj)) { + if (!(pathArr[i] in obj)) { + return false; + } + + obj = obj[pathArr[i]]; + } else { + return false; + } + } + + return true; +} + +var getIn = resolveGetIn(_getIn); +exports.getIn = getIn; +var setIn = resolveUpdateIn(_setIn, getIn); +exports.setIn = setIn; +var deleteIn = resolveUpdateIn(_deleteIn, getIn); +exports.deleteIn = deleteIn; +var existIn = resolveExistIn(_existIn); +exports.existIn = existIn; \ No newline at end of file diff --git a/packages/utils/lib/array.js b/packages/utils/lib/array.js new file mode 100644 index 00000000000..f6084cc57ea --- /dev/null +++ b/packages/utils/lib/array.js @@ -0,0 +1,130 @@ +"use strict"; + +exports.__esModule = true; +exports.includes = exports.find = exports.findIndex = exports.some = exports.every = exports.reduce = exports.map = exports.each = exports.toArr = void 0; + +var _types = require("./types"); + +var toArr = function toArr(val) { + return (0, _types.isArr)(val) ? val : val ? [val] : []; +}; + +exports.toArr = toArr; + +var each = function each(val, callback, revert) { + if ((0, _types.isArr)(val)) { + if (revert) { + for (var i = val.length - 1; i >= 0; i--) { + if (callback(val[i], i) === false) { + return; + } + } + } else { + for (var _i = 0, length = val.length; _i < length; _i++) { + if (callback(val[_i], _i) === false) { + return; + } + } + } + } else { + for (var key in val) { + if (Object.hasOwnProperty.call(val, key)) { + if (callback(val[key], key) === false) { + return; + } + } + } + } +}; + +exports.each = each; + +var map = function map(val, callback, revert) { + var res = (0, _types.isArr)(val) ? [] : {}; + each(val, function (item, key) { + var value = callback(item, key); + + if ((0, _types.isArr)(res)) { + res.push(value); + } else { + res[key] = value; + } + }, revert); + return res; +}; + +exports.map = map; + +var reduce = function reduce(val, callback, initial, revert) { + var res = initial; + each(val, function (item, key) { + res = callback(res, item, key); + }, revert); + return res; +}; + +exports.reduce = reduce; + +var every = function every(val, callback, revert) { + var res = false; + each(val, function (item, key) { + if (!callback(item, key)) { + res = false; + return false; + } else { + res = true; + } + }, revert); + return res; +}; + +exports.every = every; + +var some = function some(val, callback, revert) { + var res = true; + each(val, function (item, key) { + if (callback(item, key)) { + res = true; + return false; + } else { + res = false; + } + }, revert); + return res; +}; + +exports.some = some; + +var findIndex = function findIndex(val, callback, revert) { + var res = -1; + each(val, function (item, key) { + if (callback(item, key)) { + res = key; + return false; + } + }, revert); + return res; +}; + +exports.findIndex = findIndex; + +var find = function find(val, callback, revert) { + var res; + each(val, function (item, key) { + if (callback(item, key)) { + res = item; + return false; + } + }, revert); + return res; +}; + +exports.find = find; + +var includes = function includes(val, searchElement, revert) { + return some(val, function (item) { + return item === searchElement; + }, revert); +}; + +exports.includes = includes; \ No newline at end of file diff --git a/packages/utils/lib/broadcast.js b/packages/utils/lib/broadcast.js new file mode 100644 index 00000000000..f2e3a3b2c80 --- /dev/null +++ b/packages/utils/lib/broadcast.js @@ -0,0 +1,91 @@ +"use strict"; + +exports.__esModule = true; +exports.Broadcast = void 0; + +var _array = require("./array"); + +var _types = require("./types"); + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var Broadcast = +/*#__PURE__*/ +function () { + function Broadcast() { + _defineProperty(this, "entries", []); + + _defineProperty(this, "buffer", []); + } + + var _proto = Broadcast.prototype; + + _proto.subscribe = function subscribe(subscriber, subscription) { + var _this = this; + + if (!(0, _types.isFn)(subscriber)) return function () {}; + var index = this.entries.length; + this.entries.push({ + subscriber: subscriber, + subscription: subscription + }); + this.flushBuffer(this.entries[index]); + return function () { + _this.entries.splice(index, 1); + }; + }; + + _proto.unsubscribe = function unsubscribe() { + this.entries.length = 0; + this.buffer.length = 0; + }; + + _proto.flushBuffer = function flushBuffer(_ref) { + var subscriber = _ref.subscriber, + subscription = _ref.subscription; + (0, _array.each)(this.buffer, function (_ref2) { + var payload = _ref2.payload, + filter = _ref2.filter; + + if ((0, _types.isFn)(filter)) { + var notification; + + if (notification = filter(payload, subscription)) { + subscriber(notification); + } + } else { + subscriber(payload, subscription); + } + }); + }; + + _proto.notify = function notify(payload, filter) { + if (this.length === 0) { + this.buffer.push({ + payload: payload, + filter: filter + }); + return; + } + + (0, _array.each)(this.entries, function (_ref3) { + var subscriber = _ref3.subscriber, + subscription = _ref3.subscription; + + if ((0, _types.isFn)(filter)) { + var notification; + + if (notification = filter(payload, subscription)) { + subscriber(notification); + } + } else { + subscriber(payload, subscription); + } + }); + this.buffer.length = 0; + }; + + return Broadcast; +}(); + +exports.Broadcast = Broadcast; \ No newline at end of file diff --git a/packages/utils/lib/clone.js b/packages/utils/lib/clone.js new file mode 100644 index 00000000000..a5207aed5e2 --- /dev/null +++ b/packages/utils/lib/clone.js @@ -0,0 +1,75 @@ +"use strict"; + +exports.__esModule = true; +exports.clone = void 0; + +var _types = require("./types"); + +var self = void 0 || global || window; +var NATIVE_KEYS = [['Map', function (map) { + return new Map(map); +}], ['WeakMap', function (map) { + return new WeakMap(map); +}], ['WeakSet', function (set) { + return new WeakSet(set); +}], ['Set', function (set) { + return new Set(set); +}], 'FileList', 'File', 'URL', ['Promise', function (promise) { + return new Promise(function (resolve, reject) { + return promise.then(resolve, reject); + }); +}]]; + +var isNativeObject = function isNativeObject(values) { + for (var i = 0; i < NATIVE_KEYS.length; i++) { + var item = NATIVE_KEYS[i]; + + if (Array.isArray(item) && item[0]) { + if (self[item[0]] && values instanceof self[item[0]]) { + return item[1] ? item[1] : item[0]; + } + } else { + if (self[item] && values instanceof self[item]) { + return item; + } + } + } +}; + +var clone = function clone(values, filter) { + var _nativeClone; + + if (Array.isArray(values)) { + return values.map(function (item) { + return clone(item, filter); + }); + } else if (_nativeClone = isNativeObject(values)) { + return (0, _types.isFn)(_nativeClone) ? _nativeClone(values) : values; + } else if (typeof values === 'object' && !!values) { + if ('$$typeof' in values && '_owner' in values) { + return values; + } + + var res = {}; + + for (var key in values) { + if (Object.hasOwnProperty.call(values, key)) { + if ((0, _types.isFn)(filter)) { + if (filter(values[key], key)) { + res[key] = clone(values[key], filter); + } else { + res[key] = values[key]; + } + } else { + res[key] = clone(values[key], filter); + } + } + } + + return res; + } else { + return values; + } +}; + +exports.clone = clone; \ No newline at end of file diff --git a/packages/utils/lib/compare.js b/packages/utils/lib/compare.js new file mode 100644 index 00000000000..3ee1d48f4d1 --- /dev/null +++ b/packages/utils/lib/compare.js @@ -0,0 +1,109 @@ +"use strict"; + +exports.__esModule = true; +exports.isEqual = void 0; + +var _types = require("./types"); + +var isArray = _types.isArr; +var keyList = Object.keys; +var hasProp = Object.prototype.hasOwnProperty; +/* eslint-disable */ + +function equal(a, b, filter) { + // fast-deep-equal index.js 2.0.1 + if (a === b) return true; + + if (a && b && typeof a === 'object' && typeof b === 'object') { + var arrA = isArray(a); + var arrB = isArray(b); + var i; + var length; + var key; + + if (arrA && arrB) { + length = a.length; + if (length !== b.length) return false; + + for (i = length; i-- !== 0;) { + if (!equal(a[i], b[i], filter)) return false; + } + + return true; + } + + if (arrA != arrB) return false; + var dateA = a instanceof Date; + var dateB = b instanceof Date; + if (dateA != dateB) return false; + if (dateA && dateB) return a.getTime() == b.getTime(); + var regexpA = a instanceof RegExp; + var regexpB = b instanceof RegExp; + if (regexpA != regexpB) return false; + if (regexpA && regexpB) return a.toString() == b.toString(); + var keys = keyList(a); + length = keys.length; + if (length !== keyList(b).length) return false; + + for (i = length; i-- !== 0;) { + if (!hasProp.call(b, keys[i])) return false; + } // end fast-deep-equal + // Custom handling for React + + + for (i = length; i-- !== 0;) { + key = keys[i]; + + if (key === '_owner' && a.$$typeof) { + // React-specific: avoid traversing React elements' _owner. + // _owner contains circular references + // and is not needed when comparing the actual elements (and not their owners) + // .$$typeof and ._store on just reasonable markers of a react element + continue; + } else { + if ((0, _types.isFn)(filter)) { + if (filter({ + a: a[key], + b: b[key] + }, key)) { + if (!equal(a[key], b[key], filter)) return false; + } + } else { + // all other properties should be traversed as usual + if (!equal(a[key], b[key], filter)) return false; + } + } + } // fast-deep-equal index.js 2.0.1 + + + return true; + } + + if (a && b && typeof a === 'function' && typeof b === 'function') { + return a.toString() === b.toString(); + } + + return a !== a && b !== b; +} // end fast-deep-equal + + +var isEqual = function exportedEqual(a, b, filter) { + try { + return equal(a, b, filter); + } catch (error) { + if (error.message && error.message.match(/stack|recursion/i) || error.number === -2146828260) { + // warn on circular references, don't crash + // browsers give this different errors name and messages: + // chrome/safari: "RangeError", "Maximum call stack size exceeded" + // firefox: "InternalError", too much recursion" + // edge: "Error", "Out of stack space" + console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message); + return false; + } // some other error. we should definitely know about these + + + throw error; + } +}; + +exports.isEqual = isEqual; \ No newline at end of file diff --git a/packages/utils/lib/index.js b/packages/utils/lib/index.js new file mode 100644 index 00000000000..3674df10e6e --- /dev/null +++ b/packages/utils/lib/index.js @@ -0,0 +1,66 @@ +"use strict"; + +exports.__esModule = true; + +var _accessor = require("./accessor"); + +Object.keys(_accessor).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + exports[key] = _accessor[key]; +}); + +var _array = require("./array"); + +Object.keys(_array).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + exports[key] = _array[key]; +}); + +var _compare = require("./compare"); + +Object.keys(_compare).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + exports[key] = _compare[key]; +}); + +var _broadcast = require("./broadcast"); + +Object.keys(_broadcast).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + exports[key] = _broadcast[key]; +}); + +var _types = require("./types"); + +Object.keys(_types).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + exports[key] = _types[key]; +}); + +var _clone = require("./clone"); + +Object.keys(_clone).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + exports[key] = _clone[key]; +}); + +var _schema = require("./schema"); + +Object.keys(_schema).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + exports[key] = _schema[key]; +}); + +var _lru = require("./lru"); + +Object.keys(_lru).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + exports[key] = _lru[key]; +}); + +var _isEmpty = require("./isEmpty"); + +Object.keys(_isEmpty).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + exports[key] = _isEmpty[key]; +}); \ No newline at end of file diff --git a/packages/utils/lib/isEmpty.js b/packages/utils/lib/isEmpty.js new file mode 100644 index 00000000000..858943dd573 --- /dev/null +++ b/packages/utils/lib/isEmpty.js @@ -0,0 +1,81 @@ +"use strict"; + +exports.__esModule = true; +exports.isEmpty = isEmpty; + +/** + * copyright by https://github.com/ianstormtaylor/is-empty + */ + +/** + * Has own property. + * + * @type {Function} + */ +var has = Object.prototype.hasOwnProperty; +/** + * To string. + * + * @type {Function} + */ + +var toString = Object.prototype.toString; +/** + * Test whether a value is "empty". + * + * @param {Mixed} val + * @return {Boolean} + */ + +function isEmpty(val) { + // Null and Undefined... + if (val == null) return true; // Booleans... + + if (typeof val === 'boolean') return false; // Numbers... + + if (typeof val === 'number') return false; // Strings... + + if (typeof val === 'string') return val.length === 0; // Functions... + + if (typeof val === 'function') return val.length === 0; // Arrays... + + if (Array.isArray(val)) { + if (val.length === 0) return true; + + for (var i = 0; i < val.length; i++) { + if (!isEmpty(val[i])) { + return false; + } + } + + return true; + } // Errors... + + + if (val instanceof Error) return val.message === ''; // Objects... + + if (val.toString === toString) { + switch (val.toString()) { + // Maps, Sets, Files and Errors... + case '[object File]': + case '[object Map]': + case '[object Set]': + { + return val.size === 0; + } + // Plain objects... + + case '[object Object]': + { + for (var key in val) { + if (has.call(val, key)) return false; + } + + return true; + } + } + } // Anything else... + + + return false; +} \ No newline at end of file diff --git a/packages/utils/lib/lru.js b/packages/utils/lib/lru.js new file mode 100644 index 00000000000..1ebd1f8560c --- /dev/null +++ b/packages/utils/lib/lru.js @@ -0,0 +1,394 @@ +"use strict"; + +/** + * A doubly linked list-based Least Recently Used (LRU) cache. Will keep most + * recently used items while discarding least recently used items when its limit + * is reached. + * + * Licensed under MIT. Copyright (c) 2010 Rasmus Andersson + * See README.md for details. + * + * Illustration of the design: + * + * entry entry entry entry + * ______ ______ ______ ______ + * | head |.newer => | |.newer => | |.newer => | tail | + * | A | | B | | C | | D | + * |______| <= older.|______| <= older.|______| <= older.|______| + * + * removed <-- <-- <-- <-- <-- <-- <-- <-- <-- <-- <-- added + */ + +/* eslint-disable */ +; + +(function (g, f) { + var e = typeof exports === 'object' ? exports : typeof g === 'object' ? g : {}; + f(e); + + if (typeof define === 'function' && define.amd) { + define('lru', e); + } +})(void 0, function (exports) { + var NEWER = Symbol('newer'); + var OLDER = Symbol('older'); + + function LRUMap(limit, entries) { + if (typeof limit !== 'number') { + // called as (entries) + entries = limit; + limit = 0; + } + + this.size = 0; + this.limit = limit; + this.oldest = this.newest = undefined; + this._keymap = new Map(); + + if (entries) { + this.assign(entries); + + if (limit < 1) { + this.limit = this.size; + } + } + } + + exports.LRUMap = LRUMap; + + function Entry(key, value) { + this.key = key; + this.value = value; + this[NEWER] = undefined; + this[OLDER] = undefined; + } + + LRUMap.prototype._markEntryAsUsed = function (entry) { + if (entry === this.newest) { + // Already the most recenlty used entry, so no need to update the list + return; + } // HEAD--------------TAIL + // <.older .newer> + // <--- add direction -- + // A B C E + + + if (entry[NEWER]) { + if (entry === this.oldest) { + this.oldest = entry[NEWER]; + } + + entry[NEWER][OLDER] = entry[OLDER]; // C <-- E. + } + + if (entry[OLDER]) { + entry[OLDER][NEWER] = entry[NEWER]; // C. --> E + } + + entry[NEWER] = undefined; // D --x + + entry[OLDER] = this.newest; // D. --> E + + if (this.newest) { + this.newest[NEWER] = entry; // E. <-- D + } + + this.newest = entry; + }; + + LRUMap.prototype.assign = function (entries) { + var entry; + var limit = this.limit || Number.MAX_VALUE; + + this._keymap.clear(); + + var it = entries[Symbol.iterator](); + + for (var itv = it.next(); !itv.done; itv = it.next()) { + var e = new Entry(itv.value[0], itv.value[1]); + + this._keymap.set(e.key, e); + + if (!entry) { + this.oldest = e; + } else { + entry[NEWER] = e; + e[OLDER] = entry; + } + + entry = e; + + if (limit-- === 0) { + throw new Error('overflow'); + } + } + + this.newest = entry; + this.size = this._keymap.size; + }; + + LRUMap.prototype.get = function (key) { + // First, find our cache entry + var entry = this._keymap.get(key); + + if (!entry) return; // Not cached. Sorry. + // As was found in the cache, register it as being requested recently + + this._markEntryAsUsed(entry); + + return entry.value; + }; + + LRUMap.prototype.set = function (key, value) { + var entry = this._keymap.get(key); + + if (entry) { + // update existing + entry.value = value; + + this._markEntryAsUsed(entry); + + return this; + } // new entry + + + this._keymap.set(key, entry = new Entry(key, value)); + + if (this.newest) { + // link previous tail to the new tail (entry) + this.newest[NEWER] = entry; + entry[OLDER] = this.newest; + } else { + // we're first in -- yay + this.oldest = entry; + } // add new entry to the end of the linked list -- it's now the freshest entry. + + + this.newest = entry; + ++this.size; + + if (this.size > this.limit) { + // we hit the limit -- remove the head + this.shift(); + } + + return this; + }; + + LRUMap.prototype.shift = function () { + // todo: handle special case when limit == 1 + var entry = this.oldest; + + if (entry) { + if (this.oldest[NEWER]) { + // advance the list + this.oldest = this.oldest[NEWER]; + this.oldest[OLDER] = undefined; + } else { + // the cache is exhausted + this.oldest = undefined; + this.newest = undefined; + } // Remove last strong reference to and remove links from the purged + // entry being returned: + + + entry[NEWER] = entry[OLDER] = undefined; + + this._keymap.delete(entry.key); + + --this.size; + return [entry.key, entry.value]; + } + }; // ---------------------------------------------------------------------------- + // Following code is optional and can be removed without breaking the core + // functionality. + + + LRUMap.prototype.find = function (key) { + var e = this._keymap.get(key); + + return e ? e.value : undefined; + }; + + LRUMap.prototype.has = function (key) { + return this._keymap.has(key); + }; + + LRUMap.prototype['delete'] = function (key) { + var entry = this._keymap.get(key); + + if (!entry) return; + + this._keymap.delete(entry.key); + + if (entry[NEWER] && entry[OLDER]) { + // relink the older entry with the newer entry + entry[OLDER][NEWER] = entry[NEWER]; + entry[NEWER][OLDER] = entry[OLDER]; + } else if (entry[NEWER]) { + // remove the link to us + entry[NEWER][OLDER] = undefined; // link the newer entry to head + + this.oldest = entry[NEWER]; + } else if (entry[OLDER]) { + // remove the link to us + entry[OLDER][NEWER] = undefined; // link the newer entry to head + + this.newest = entry[OLDER]; + } else { + // if(entry[OLDER] === undefined && entry.newer === undefined) { + this.oldest = this.newest = undefined; + } + + this.size--; + return entry.value; + }; + + LRUMap.prototype.clear = function () { + // Not clearing links should be safe, as we don't expose live links to user + this.oldest = this.newest = undefined; + this.size = 0; + + this._keymap.clear(); + }; + + function EntryIterator(oldestEntry) { + this.entry = oldestEntry; + } + + EntryIterator.prototype[Symbol.iterator] = function () { + return this; + }; + + EntryIterator.prototype.next = function () { + var ent = this.entry; + + if (ent) { + this.entry = ent[NEWER]; + return { + done: false, + value: [ent.key, ent.value] + }; + } else { + return { + done: true, + value: undefined + }; + } + }; + + function KeyIterator(oldestEntry) { + this.entry = oldestEntry; + } + + KeyIterator.prototype[Symbol.iterator] = function () { + return this; + }; + + KeyIterator.prototype.next = function () { + var ent = this.entry; + + if (ent) { + this.entry = ent[NEWER]; + return { + done: false, + value: ent.key + }; + } else { + return { + done: true, + value: undefined + }; + } + }; + + function ValueIterator(oldestEntry) { + this.entry = oldestEntry; + } + + ValueIterator.prototype[Symbol.iterator] = function () { + return this; + }; + + ValueIterator.prototype.next = function () { + var ent = this.entry; + + if (ent) { + this.entry = ent[NEWER]; + return { + done: false, + value: ent.value + }; + } else { + return { + done: true, + value: undefined + }; + } + }; + + LRUMap.prototype.keys = function () { + return new KeyIterator(this.oldest); + }; + + LRUMap.prototype.values = function () { + return new ValueIterator(this.oldest); + }; + + LRUMap.prototype.entries = function () { + return this; + }; + + LRUMap.prototype[Symbol.iterator] = function () { + return new EntryIterator(this.oldest); + }; + + LRUMap.prototype.forEach = function (fun, thisObj) { + if (typeof thisObj !== 'object') { + thisObj = this; + } + + var entry = this.oldest; + + while (entry) { + fun.call(thisObj, entry.value, entry.key, this); + entry = entry[NEWER]; + } + }; + /** Returns a JSON (array) representation */ + + + LRUMap.prototype.toJSON = function () { + var s = new Array(this.size); + var i = 0; + var entry = this.oldest; + + while (entry) { + s[i++] = { + key: entry.key, + value: entry.value + }; + entry = entry[NEWER]; + } + + return s; + }; + /** Returns a String representation */ + + + LRUMap.prototype.toString = function () { + var s = ''; + var entry = this.oldest; + + while (entry) { + s += String(entry.key) + ':' + entry.value; + entry = entry[NEWER]; + + if (entry) { + s += ' < '; + } + } + + return s; + }; +}); \ No newline at end of file diff --git a/packages/utils/lib/schema.js b/packages/utils/lib/schema.js new file mode 100644 index 00000000000..82601b3dc0f --- /dev/null +++ b/packages/utils/lib/schema.js @@ -0,0 +1,122 @@ +"use strict"; + +exports.__esModule = true; +exports.caculateSchemaInitialValues = exports.registerVirtualbox = exports.isVirtualBox = exports.schemaIs = exports.getSchemaNodeFromPath = void 0; + +var _array = require("./array"); + +var _accessor = require("./accessor"); + +var _types = require("./types"); + +var _isEmpty = require("./isEmpty"); + +var numberRE = /^\d+$/; +var VIRTUAL_BOXES = {}; + +var getSchemaNodeFromPath = function getSchemaNodeFromPath(schema, path) { + var res = schema; + var suc = 0; + + for (var i = 0; i < path.length; i++) { + var key = path[i]; + + if (res && res.properties) { + res = res.properties[key]; + suc++; + } else if (res && res.items && numberRE.test(key)) { + res = res.items; + suc++; + } + } + + return suc === path.length ? res : undefined; +}; + +exports.getSchemaNodeFromPath = getSchemaNodeFromPath; + +var schemaIs = function schemaIs(schema, type) { + return schema && schema.type === type; +}; + +exports.schemaIs = schemaIs; + +var isVirtualBox = function isVirtualBox(name) { + return !!VIRTUAL_BOXES[name]; +}; + +exports.isVirtualBox = isVirtualBox; + +var registerVirtualbox = function registerVirtualbox(name) { + VIRTUAL_BOXES[name] = true; +}; + +exports.registerVirtualbox = registerVirtualbox; + +var schemaTraverse = function schemaTraverse(schema, callback, path, schemaPath) { + if (path === void 0) { + path = []; + } + + if (schemaPath === void 0) { + schemaPath = []; + } + + if (schema) { + if (isVirtualBox(schema['type']) || isVirtualBox(schema['x-component'])) { + path = path.slice(0, path.length - 1); + } + + callback(schema, { + path: path, + schemaPath: schemaPath + }); + + if (schemaIs(schema, 'object') || schema.properties) { + (0, _array.each)(schema.properties, function (schema, key) { + schemaTraverse(schema, callback, path.concat(key), schemaPath.concat(key)); + }); + } else if (schemaIs(schema, 'array') || schema.items) { + if (schema.items) { + callback(schema.items, function (index) { + schemaTraverse(schema.items, callback, path.concat(index), schemaPath.concat(index)); + }, path); + } + } + } +}; + +var caculateSchemaInitialValues = function caculateSchemaInitialValues(schema, initialValues, callback) { + initialValues = initialValues || schema.default || {}; + schemaTraverse(schema, function (schema, $path, parentPath) { + var defaultValue = schema.default; + + if ((0, _types.isFn)($path) && parentPath) { + (0, _array.each)((0, _array.toArr)((0, _accessor.getIn)(initialValues, parentPath)), function (value, index) { + $path(index); + }); + } else if ($path) { + var name = $path.path.join('.'); + var path = $path.path; + var schemaPath = $path.schemaPath; + var initialValue = (0, _accessor.getIn)(initialValues, name); + var value = !(0, _isEmpty.isEmpty)(initialValue) ? initialValue : defaultValue; + + if (!(0, _isEmpty.isEmpty)(value)) { + (0, _accessor.setIn)(initialValues, name, value); + } + + if ((0, _types.isFn)(callback)) { + var _path = { + name: name, + path: path, + schemaPath: schemaPath + }; + callback(_path, schema, value); + } + } + }); + return initialValues; +}; + +exports.caculateSchemaInitialValues = caculateSchemaInitialValues; \ No newline at end of file diff --git a/packages/utils/lib/types.js b/packages/utils/lib/types.js new file mode 100644 index 00000000000..4ed312e9d8b --- /dev/null +++ b/packages/utils/lib/types.js @@ -0,0 +1,27 @@ +"use strict"; + +exports.__esModule = true; +exports.isRegExp = exports.isObj = exports.isStr = exports.isPlainObj = exports.isArr = exports.isFn = void 0; + +var isType = function isType(type) { + return function (obj) { + return obj != null && Object.prototype.toString.call(obj) === "[object " + type + "]"; + }; +}; + +var isFn = isType('Function'); +exports.isFn = isFn; +var isArr = Array.isArray || isType('Array'); +exports.isArr = isArr; +var isPlainObj = isType('Object'); +exports.isPlainObj = isPlainObj; +var isStr = isType('String'); +exports.isStr = isStr; + +var isObj = function isObj(val) { + return typeof val === 'object'; +}; + +exports.isObj = isObj; +var isRegExp = isType('RegExp'); +exports.isRegExp = isRegExp; \ No newline at end of file diff --git a/packages/utils/package.json b/packages/utils/package.json index c02e855ee1c..a763ef16e0b 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -2,7 +2,7 @@ "name": "@uform/utils", "version": "0.1.0-alpha.1", "license": "MIT", - "main": "lib/index.js", + "main": "lib", "repository": { "type": "git", "url": "git+https://github.com/alibaba/uform.git" diff --git a/packages/validator/lib/index.js b/packages/validator/lib/index.js new file mode 100644 index 00000000000..d26d3fbd1d6 --- /dev/null +++ b/packages/validator/lib/index.js @@ -0,0 +1,119 @@ +"use strict"; + +exports.__esModule = true; +var _exportNames = { + runValidation: true, + format: true +}; +exports.default = exports.runValidation = void 0; + +var _utils = require("./utils"); + +exports.format = _utils.format; + +var _validators = require("./validators"); + +var _message = require("./message"); + +Object.keys(_message).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _message[key]; +}); + +var flatArr = function flatArr(arr) { + return (0, _utils.reduce)(arr, function (buf, item) { + return (0, _utils.isArr)(item) ? buf.concat(flatArr(item)) : item ? buf.concat(item) : buf; + }, []); +}; + +var runValidation = function runValidation(values, fieldMap, forceUpdate, callback) { + var queue = []; + + if ((0, _utils.isFn)(forceUpdate)) { + callback = forceUpdate; + forceUpdate = false; + } + + (0, _utils.each)(fieldMap, function (field, name) { + var value = (0, _utils.getIn)(values, name); + if (field.visible === false || field.editable === false) return; + if ((0, _utils.isEqual)(field.__lastValidateValue, value) && !forceUpdate) return; + var title = field.props && field.props.title; + var rafId = setTimeout(function () { + field.loading = true; + field.dirty = true; + if (field.notify) field.notify(); + }, 100); + queue.push(Promise.all((0, _utils.toArr)(field.rules).map(function (rule) { + return (0, _validators.validate)(value, rule, values, title || name); + })).then(function (errors) { + clearTimeout(rafId); + var lastFieldErrors = field.errors; + var lastValid = field.valid; + var lastLoading = field.loading; + field.loading = false; + + if (forceUpdate) { + if (errors) field.errors = flatArr((0, _utils.toArr)(errors)); + + if (field.errors.length) { + field.valid = false; + field.invalid = true; + } else { + field.valid = true; + field.invalid = false; + } + + if (field.errors && field.errors.length) { + field.dirty = true; + } + } else { + if (!field.pristine) { + if (errors) field.errors = flatArr((0, _utils.toArr)(errors)); + + if (field.errors.length) { + field.valid = false; + field.invalid = true; + } else { + field.valid = true; + field.invalid = false; + } + + if (!(0, _utils.isEqual)(lastValid, field.valid) || !(0, _utils.isEqual)(lastFieldErrors, field.errors)) { + field.dirty = true; + } + } + } + + if (field.loading !== lastLoading) { + field.dirty = true; + } + + if (field.dirty && field.notify) { + field.notify(); + } + + field.__lastValidateValue = (0, _utils.clone)(value); + return { + name: name, + value: value, + field: field, + invalid: field.invalid, + valid: field.valid, + errors: field.errors + }; + })); + }); + return Promise.all(queue).then(function (response) { + if ((0, _utils.isFn)(callback)) { + callback(response); + } + + return response; + }); +}; + +exports.runValidation = runValidation; +var _default = runValidation; +exports.default = _default; \ No newline at end of file diff --git a/packages/validator/lib/locale/index.js b/packages/validator/lib/locale/index.js new file mode 100644 index 00000000000..edc419320ef --- /dev/null +++ b/packages/validator/lib/locale/index.js @@ -0,0 +1,43 @@ +"use strict"; + +exports.__esModule = true; +exports.default = void 0; +var _default = { + en: { + pattern: '%s value %s does not match pattern %s', + required: '%s is required', + number: '%s is not a number', + integer: '%s is not an integer number', + url: '%s is a invalid url', + email: '%s is not a email format', + ipv6: '%s is not a ipv6 format', + ipv4: '%s is not a ipv4 format', + idcard: '%s is not an idcard format', + taodomain: '%s is not a taobao domain format', + qq: '%s is not a qq number format', + phone: '%s is not a phone number format', + money: '%s is not a currency format', + zh: '%s is not a chinese string', + date: '%s is not a valid date format', + zip: '%s is not a zip format' + }, + zh: { + pattern: '%s 不是一个合法的字段', + required: '%s 是必填字段', + number: '%s 不是合法的数字', + integer: '%s 不是合法的整型数字', + url: '%s 不是合法的url', + email: '%s 不是合法的邮箱格式', + ipv6: '%s 不是合法的ipv6格式', + ipv4: '%s 不是合法的ipv4格式', + idcard: '%s 不是合法的身份证格式', + taodomain: '%s 不符合淘系域名规则', + qq: '%s 不符合QQ号格式', + phone: '%s 不是有效的手机号', + money: '%s 不是有效货币格式', + zh: '%s 不是合法的中文字符串', + date: '%s 不是合法的日期格式', + zip: '%s 不是合法的邮编格式' + } +}; +exports.default = _default; \ No newline at end of file diff --git a/packages/validator/lib/message.js b/packages/validator/lib/message.js new file mode 100644 index 00000000000..ceba52d79ed --- /dev/null +++ b/packages/validator/lib/message.js @@ -0,0 +1,52 @@ +"use strict"; + +exports.__esModule = true; +exports.getMessage = exports.setLanguage = exports.setLocale = void 0; + +var _utils = require("./utils"); + +var _locale = _interopRequireDefault(require("./locale")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var self = void 0 || global || window; + +var getBrowserlanguage = function getBrowserlanguage() { + if (!self.navigator) return 'en'; + return self.navigator.browserlanguage || self.navigator.language || 'en'; +}; + +var LOCALE = { + messages: {}, + lang: getBrowserlanguage() +}; + +var getMatchLang = function getMatchLang(lang) { + var find = LOCALE.lang; + (0, _utils.each)(LOCALE.messages, function (messages, key) { + if (key.indexOf(lang) > -1 || String(lang).indexOf(key) > -1) { + find = key; + return false; + } + }); + return find; +}; + +var setLocale = function setLocale(locale) { + Object.assign(LOCALE.messages, locale); +}; + +exports.setLocale = setLocale; + +var setLanguage = function setLanguage(lang) { + LOCALE.lang = lang; +}; + +exports.setLanguage = setLanguage; + +var getMessage = function getMessage(path) { + return (0, _utils.getIn)(LOCALE.messages, getMatchLang(LOCALE.lang) + "." + path); +}; + +exports.getMessage = getMessage; +setLocale(_locale.default); \ No newline at end of file diff --git a/packages/validator/lib/utils.js b/packages/validator/lib/utils.js new file mode 100644 index 00000000000..919ea73ca0b --- /dev/null +++ b/packages/validator/lib/utils.js @@ -0,0 +1,63 @@ +"use strict"; + +exports.__esModule = true; +var _exportNames = { + format: true +}; +exports.format = format; + +var _utils = require("@uform/utils"); + +Object.keys(_utils).forEach(function (key) { + if (key === "default" || key === "__esModule") return; + if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; + exports[key] = _utils[key]; +}); +var formatRegExp = /%[sdj%]/g; + +function format() { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + var i = 1; + var f = args[0]; + var len = args.length; + + if (typeof f === 'function') { + return f.apply(null, args.slice(1)); + } + + if (typeof f === 'string') { + var str = String(f).replace(formatRegExp, function (x) { + if (x === '%%') { + return '%'; + } + + if (i >= len) { + return x; + } + + switch (x) { + case '%s': + return String(args[i++]); + + case '%d': + return Number(args[i++]); + + case '%j': + try { + return JSON.stringify(args[i++]); + } catch (_) { + return '[Circular]'; + } + + default: + return x; + } + }); + return str; + } + + return f; +} \ No newline at end of file diff --git a/packages/validator/lib/validators/custom.js b/packages/validator/lib/validators/custom.js new file mode 100644 index 00000000000..22e28e2c70b --- /dev/null +++ b/packages/validator/lib/validators/custom.js @@ -0,0 +1,14 @@ +"use strict"; + +exports.__esModule = true; +exports.default = void 0; + +var _utils = require("../utils"); + +var _default = function _default(value, rule, values, name) { + if ((0, _utils.isFn)(rule.validator)) { + return rule.validator(value, rule, values, name); + } +}; + +exports.default = _default; \ No newline at end of file diff --git a/packages/validator/lib/validators/format.js b/packages/validator/lib/validators/format.js new file mode 100644 index 00000000000..9a5b767bae6 --- /dev/null +++ b/packages/validator/lib/validators/format.js @@ -0,0 +1,30 @@ +"use strict"; + +exports.__esModule = true; +exports.default = void 0; + +var _utils = require("../utils"); + +var _message = require("../message"); + +var _pattern = require("./pattern"); + +var RegExpPatterns = _interopRequireWildcard(require("./regexp")); + +function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } + +var PatternKeys = Object.keys(RegExpPatterns); + +var batchValidate = function batchValidate(value, rule, values, name) { + for (var i = 0; i < PatternKeys.length; i++) { + if (PatternKeys[i] === rule.format) { + return (0, _pattern.patternValidate)(RegExpPatterns[PatternKeys[i]], value, (0, _utils.format)(rule.message || (0, _message.getMessage)(rule.format), name, value)); + } + } +}; + +var _default = function _default(value, rule, values, name) { + return batchValidate(value, rule, values, name); +}; + +exports.default = _default; \ No newline at end of file diff --git a/packages/validator/lib/validators/index.js b/packages/validator/lib/validators/index.js new file mode 100644 index 00000000000..1e922906c6d --- /dev/null +++ b/packages/validator/lib/validators/index.js @@ -0,0 +1,58 @@ +"use strict"; + +exports.__esModule = true; +exports.validate = void 0; + +var _utils = require("../utils"); + +var _format = _interopRequireDefault(require("./format")); + +var _required = _interopRequireDefault(require("./required")); + +var _pattern = _interopRequireDefault(require("./pattern")); + +var _custom = _interopRequireDefault(require("./custom")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +/* + * rule : { + format:"", + * required:true, + * message:"", + * pattern:"", + * validator(value,rule,callback,values){ + * } + * } + * +**/ +var batchInvoke = function batchInvoke() { + for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) { + fns[_key] = arguments[_key]; + } + + return function () { + for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + + return fns.map(function (fn) { + return Promise.resolve(fn.apply(void 0, args)); + }); + }; +}; + +var batchValidate = function batchValidate(value, rule, values, name) { + return Promise.all(batchInvoke(_format.default, _required.default, _pattern.default, _custom.default)(value, rule, values, name)); +}; + +var validate = function validate(value, rule, values, name) { + var newRule = (0, _utils.isObj)(rule) ? rule : (0, _utils.isStr)(rule) ? { + format: rule + } : (0, _utils.isFn)(rule) ? { + validator: rule + } : {}; + return batchValidate(value, newRule, values, name); +}; + +exports.validate = validate; \ No newline at end of file diff --git a/packages/validator/lib/validators/pattern.js b/packages/validator/lib/validators/pattern.js new file mode 100644 index 00000000000..cb1ae45456c --- /dev/null +++ b/packages/validator/lib/validators/pattern.js @@ -0,0 +1,24 @@ +"use strict"; + +exports.__esModule = true; +exports.default = exports.patternValidate = void 0; + +var _utils = require("../utils"); + +var _message = require("../message"); + +var patternValidate = function patternValidate(pattern, value, message) { + if ((0, _utils.isEmpty)(value)) return ''; + var valid = (0, _utils.isFn)(pattern) ? pattern(value) : (0, _utils.isRegExp)(pattern) ? pattern.test(String(value)) : new RegExp(String(pattern)).test(String(value)); + return !valid ? message : ''; +}; + +exports.patternValidate = patternValidate; + +var _default = function _default(value, rule, values, name) { + if (rule.pattern) { + return patternValidate(rule.pattern, value, (0, _utils.format)(rule.message || (0, _message.getMessage)('pattern'), name, value, rule.pattern)); + } +}; + +exports.default = _default; \ No newline at end of file diff --git a/packages/validator/lib/validators/regexp.js b/packages/validator/lib/validators/regexp.js new file mode 100644 index 00000000000..15136a563e7 --- /dev/null +++ b/packages/validator/lib/validators/regexp.js @@ -0,0 +1,55 @@ +"use strict"; + +exports.__esModule = true; +exports.zip = exports.date = exports.zh = exports.money = exports.taodomain = exports.idcard = exports.phone = exports.qq = exports.integer = exports.number = exports.ipv4 = exports.ipv6 = exports.email = exports.url = void 0; + +/* eslint-disable no-useless-escape */ +var url = new RegExp( // protocol identifier +'^(?:(?:(?:https?|ftp):)?//)' + // user:pass authentication +'(?:\\S+(?::\\S*)?@)?' + '(?:' + // IP address exclusion - private & local networks +// Reference: https://www.arin.net/knowledge/address_filters.html +// filter 10.*.*.* and 127.*.*.* adresses +'(?!(?:10|127)(?:\\.\\d{1,3}){3})' + // filter 169.254.*.* and 192.168.*.* +'(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})' + // filter 172.16.0.0 - 172.31.255.255 +// TODO: add test to validate that it invalides address in 16-31 range +'(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})' + // IP address dotted notation octets +// excludes loopback network 0.0.0.0 +// excludes reserved space >= 224.0.0.0 +// excludes network & broacast addresses +// (first & last IP address of each class) +// filter 1. part for 1-223 +'(?:22[0-3]|2[01]\\d|[1-9]\\d?|1\\d\\d)' + // filter 2. and 3. part for 0-255 +'(?:\\.(?:25[0-5]|2[0-4]\\d|1?\\d{1,2})){2}' + // filter 4. part for 1-254 +'(?:\\.(?:25[0-4]|2[0-4]\\d|1\\d\\d|[1-9]\\d?))' + '|' + // host name +"(?:(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)" + // domain name +"(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*" + // TLD identifier +"(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))" + ')' + // port number +'(?::\\d{2,5})?' + // resource path +'(?:/\\S*)?$'); +exports.url = url; +var email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; +exports.email = email; +var ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/; +exports.ipv6 = ipv6; +var ipv4 = /^((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){3}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})$/; +exports.ipv4 = ipv4; +var number = /^[+-]?\d+(\.\d+)?$/; +exports.number = number; +var integer = /^[+-]?\d+$/; +exports.integer = integer; +var qq = /^(\+?[1-9]\d*|0)$/; +exports.qq = qq; +var phone = /^\d{3}-\d{8}$|^\d{4}-\d{7}$|^\d{11}$/; +exports.phone = phone; +var idcard = /^\d{15}$|^\d{18}$/; +exports.idcard = idcard; +var taodomain = /^(https?\:)?\/\/[a-zA-Z0-9\.\-]+\.(taobao|tmall|alitrip|yao\.95095)(\.daily)?\.(com|net|hk(\/hk)?)/; +exports.taodomain = taodomain; +var money = /^([\u0024\u00A2\u00A3\u00A4\u20AC\u00A5\u20B1\20B9\uFFE5]\s*)(\d+,?)+\.?\d*\s*$/; +exports.money = money; +var zh = /^[\u4e00-\u9fa5]+$/; +exports.zh = zh; +var date = /^(?:(?:1[6-9]|[2-9][0-9])[0-9]{2}([-/.]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:(?:1[6-9]|[2-9][0-9])(?:0[48]|[2468][048]|[13579][26])|(?:16|[2468][048]|[3579][26])00)([-/.]?)0?2\2(?:29))(\s+([01][0-9]:|2[0-3]:)?[0-5][0-9]:[0-5][0-9])?$/; +exports.date = date; +var zip = /^[0-9]{6}$/; +exports.zip = zip; \ No newline at end of file diff --git a/packages/validator/lib/validators/required.js b/packages/validator/lib/validators/required.js new file mode 100644 index 00000000000..20283206fbd --- /dev/null +++ b/packages/validator/lib/validators/required.js @@ -0,0 +1,16 @@ +"use strict"; + +exports.__esModule = true; +exports.default = void 0; + +var _utils = require("../utils"); + +var _message = require("../message"); + +var _default = function _default(value, rule, values, name) { + if (rule.required) { + return (0, _utils.isEmpty)(value) ? (0, _utils.format)(rule.message || (0, _message.getMessage)('required'), name) : ''; + } +}; + +exports.default = _default; \ No newline at end of file diff --git a/packages/validator/package.json b/packages/validator/package.json index d74515e603a..30be14c677f 100644 --- a/packages/validator/package.json +++ b/packages/validator/package.json @@ -2,7 +2,7 @@ "name": "@uform/validator", "version": "0.1.0-alpha.1", "license": "MIT", - "main": "lib/index.js", + "main": "lib", "repository": { "type": "git", "url": "git+https://github.com/alibaba/uform.git"