@kne/react-form-antd 2.1.35 → 2.1.37

package/dist/index.css

@@ -138,4 +138,12 @@
     width: 16px;
     height: 16px; }
 
+.react-form-avatar-btn {
+  cursor: pointer; }
+
+.react-form-avatar-tips {
+  margin-bottom: 14px;
+  color: #999;
+  font-size: 12px; }
+
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,eAAe,EAAE;EACjB;IACE,WAAW,EAAE;EACf;IACE,eAAe;IACf,kBAAkB;IAClB,iBAAiB,EAAE;EACrB;IACE,kBAAkB;IAClB,iBAAiB,EAAE;EACrB;IACE,mBAAmB,EAAE;EACvB;IACE,sBAAsB,EAAE;EAC1B;IACE,gBAAgB,EAAE;EACpB;IACE,eAAe;IACf,gBAAgB;IAChB,iBAAiB;IACjB,cAAc;IACd,kBAAkB,EAAE;EACtB;IACE,eAAe;IACf,kBAAkB,EAAE;EACtB;IACE,sBAAsB,EAAE;IACxB;MACE,qBAAqB;MACrB,kBAAkB,EAAE;MACpB;QACE,eAAe,EAAE;IACrB;MACE,0BAA0B;MAC1B,eAAe,EAAE;MACjB;QACE,gBAAgB,EAAE;IACtB;MACE,eAAe;MACf,iBAAiB,EAAE;IACrB;MACE,kBAAkB,EAAE;EACxB;IACE,aAAa,EAAE;EACjB;IACE,iBAAiB;IACjB,kBAAkB;IAClB,iBAAiB;IACjB,iBAAiB;IACjB,kBAAkB,EAAE;IACpB;MACE,kBAAkB;MAClB,cAAc;MACd,iBAAiB;MACjB,YAAY;MACZ,iBAAiB;MACjB,4BAA4B,EAAE;EAClC;IACE,kBAAkB;IAClB,OAAO;IACP,kBAAkB,EAAE;EACtB;IACE,eAAe;IACf,cAAc;IACd,iBAAiB,EAAE;EACrB;IACE,mBAAmB;IACnB,8BAA8B,EAAE;IAChC;MACE,qBAAqB,EAAE;MACvB;QACE,4CAA4C,EAAE;MAChD;QACE,qBAAqB,EAAE;QACvB;UACE,4CAA4C,EAAE;MAClD;QACE,qBAAqB,EAAE;MACzB;QACE,gBAAgB,EAAE;MACpB;QACE,4CAA4C,EAAE;MAChD;QACE,qBAAqB,EAAE;MACzB;QACE,4CAA4C,EAAE;IAClD;MACE,cAAc;MACd,eAAe;MACf,kBAAkB;MAClB,qBAAqB;MACrB,OAAO,EAAE;;AAEf;EACE,UAAU,EAAE;;AAEd;EACE,aAAa,EAAE;;AAEjB;EACE,cAAc,EAAE;;AAElB;EACE,WAAW;EACX,YAAY;EACZ,gBAAgB;EAChB,aAAa;EACb,uBAAuB;EACvB,mBAAmB,EAAE;EACrB;IACE,eAAe;IACf,gBAAgB,EAAE;;AAEtB;EACE,0BAA0B;EAC1B,kBAAkB,EAAE;EACpB;IACE,kBAAkB;IAClB,iBAAiB;IACjB,eAAe;IACf,0BAA0B;IAC1B,iBAAiB;IACjB,oBAAoB,EAAE;EACxB;IACE,UAAU,EAAE;;AAEhB;EACE,kBAAkB,EAAE;;AAEtB;EACE,aAAa;EACb,mBAAmB;EACnB,yBAAyB;EACzB,aAAa,EAAE;EACf;IACE,WAAW;IACX,YAAY,EAAE","file":"index.css","sourcesContent":[".react-form, .react-form--large, .react-form--small, .react-form--inner, .react-form--inner--large, .react-form--inner--small, .react-form--inline, .react-form--inline--large, .react-form--inline--small {\n  text-align: left;\n  font-size: 12px; }\n  .react-form .ant-select, .react-form--large .ant-select, .react-form--small .ant-select, .react-form--inner .ant-select, .react-form--inner--large .ant-select, .react-form--inner--small .ant-select, .react-form--inline .ant-select, .react-form--inline--large .ant-select, .react-form--inline--small .ant-select {\n    width: 100%; }\n  .react-form--large .react-form__field-label {\n    font-size: 14px;\n    margin-right: 20px;\n    line-height: 34px; }\n  .react-form--small .react-form__field-label {\n    margin-right: 12px;\n    line-height: 24px; }\n  .react-form--inner .react-form__field, .react-form--inner--large .react-form__field, .react-form--inner--small .react-form__field {\n    margin-bottom: 22px; }\n  .react-form--inner .react-form__field-main, .react-form--inner--large .react-form__field-main, .react-form--inner--small .react-form__field-main {\n    flex-direction: column; }\n  .react-form--inner .react-form__field-input, .react-form--inner--large .react-form__field-input, .react-form--inner--small .react-form__field-input {\n    align-self: auto; }\n  .react-form--inner .react-form__field-label, .react-form--inner--large .react-form__field-label, .react-form--inner--small .react-form__field-label {\n    font-size: 14px;\n    text-align: left;\n    font-weight: bold;\n    margin-left: 0;\n    margin-bottom: 2px; }\n  .react-form--inner--small .react-form__field-label {\n    font-size: 12px;\n    margin-bottom: 1px; }\n  .react-form--inline, .react-form--inline--large, .react-form--inline--small {\n    padding: 30px 30px 6px; }\n    .react-form--inline .react-form__field, .react-form--inline--large .react-form__field, .react-form--inline--small .react-form__field {\n      display: inline-block;\n      margin-right: 40px; }\n      .react-form--inline .react-form__field:last-child, .react-form--inline--large .react-form__field:last-child, .react-form--inline--small .react-form__field:last-child {\n        margin-right: 0; }\n    .react-form--inline .react-form__field-label, .react-form--inline--large .react-form__field-label, .react-form--inline--small .react-form__field-label {\n      min-width: auto !important;\n      padding-left: 0; }\n      .react-form--inline .react-form__field-label.is-req:before, .react-form--inline--large .react-form__field-label.is-req:before, .react-form--inline--small .react-form__field-label.is-req:before {\n        position: static; }\n    .react-form--inline--large .react-form__field-label {\n      font-size: 14px;\n      line-height: 34px; }\n    .react-form--inline--small .react-form__field-label {\n      margin-right: 12px; }\n  .react-form__field-main {\n    display: flex; }\n  .react-form__field-label {\n    text-align: right;\n    margin-right: 16px;\n    line-height: 30px;\n    margin-left: 10px;\n    position: relative; }\n    .react-form__field-label.is-req:before {\n      position: absolute;\n      color: #fc3333;\n      font-weight: bold;\n      content: '*';\n      margin-right: 4px;\n      transform: translateX(-10px); }\n  .react-form__field-input {\n    align-self: center;\n    flex: 1;\n    position: relative; }\n  .react-form__field-describable {\n    font-size: 12px;\n    color: #999999;\n    line-height: 20px; }\n  .react-form__field {\n    margin-bottom: 24px;\n    transition: border-color 300ms; }\n    .react-form__field.is-req-error .react-form__field-component, .react-form__field.is-error .react-form__field-component {\n      border-color: #fc3333; }\n      .react-form__field.is-req-error .react-form__field-component:focus, .react-form__field.is-error .react-form__field-component:focus {\n        box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2); }\n      .react-form__field.is-req-error .react-form__field-component .ant-select-selection, .react-form__field.is-req-error .react-form__field-component .ant-input, .react-form__field.is-req-error .react-form__field-component .ant-radio-inner, .react-form__field.is-error .react-form__field-component .ant-select-selection, .react-form__field.is-error .react-form__field-component .ant-input, .react-form__field.is-error .react-form__field-component .ant-radio-inner {\n        border-color: #fc3333; }\n        .react-form__field.is-req-error .react-form__field-component .ant-select-selection:focus, .react-form__field.is-req-error .react-form__field-component .ant-input:focus, .react-form__field.is-req-error .react-form__field-component .ant-radio-inner:focus, .react-form__field.is-error .react-form__field-component .ant-select-selection:focus, .react-form__field.is-error .react-form__field-component .ant-input:focus, .react-form__field.is-error .react-form__field-component .ant-radio-inner:focus {\n          box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2); }\n      .react-form__field.is-req-error .react-form__field-component .ant-upload.ant-upload-select-picture-card, .react-form__field.is-error .react-form__field-component .ant-upload.ant-upload-select-picture-card {\n        border-color: #fc3333; }\n      .react-form__field.is-req-error .react-form__field-component.ant-input-affix-wrapper .ant-input, .react-form__field.is-error .react-form__field-component.ant-input-affix-wrapper .ant-input {\n        box-shadow: none; }\n      .react-form__field.is-req-error .react-form__field-component.ant-input-affix-wrapper-focused, .react-form__field.is-error .react-form__field-component.ant-input-affix-wrapper-focused {\n        box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2); }\n      .react-form__field.is-req-error .react-form__field-component.ant-select > .ant-select-selector, .react-form__field.is-error .react-form__field-component.ant-select > .ant-select-selector {\n        border-color: #fc3333; }\n      .react-form__field.is-req-error .react-form__field-component.ant-select.ant-select-focused > .ant-select-selector, .react-form__field.is-error .react-form__field-component.ant-select.ant-select-focused > .ant-select-selector {\n        box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2); }\n    .react-form__field-error {\n      color: #fc3333;\n      font-size: 12px;\n      position: absolute;\n      top: calc(100% + 1px);\n      left: 0; }\n\n.react-form-modal .ant-modal-content > .ant-modal-body {\n  padding: 0; }\n\n.react-form-modal .ant-modal-confirm-btns {\n  display: none; }\n\n.react-form-modal.ant-modal-confirm .ant-modal-header, .react-form-modal.ant-modal-confirm .ant-modal-close {\n  display: block; }\n\n.react-form-avatar .preview {\n  width: 85px;\n  height: 85px;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n  .react-form-avatar .preview img {\n    max-width: 100%;\n    max-height: 100%; }\n\n.data_range_picker {\n  color: rgba(0, 0, 0, 0.85);\n  position: relative; }\n  .data_range_picker .zhijin {\n    position: absolute;\n    line-height: 31px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 0.85);\n    margin-left: 12px;\n    pointer-events: auto; }\n  .data_range_picker .zhijin_show {\n    z-index: 9; }\n\n.data_range_picker_dis .ant-picker-input input {\n  color: transparent; }\n\n.svg_box {\n  display: flex;\n  align-items: center;\n  color: rgba(0, 0, 0, 0.5);\n  margin: 0 4px; }\n  .svg_box svg {\n    width: 16px;\n    height: 16px; }\n"]}
+{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA;EACE,gBAAgB;EAChB,eAAe,EAAE;EACjB;IACE,WAAW,EAAE;EACf;IACE,eAAe;IACf,kBAAkB;IAClB,iBAAiB,EAAE;EACrB;IACE,kBAAkB;IAClB,iBAAiB,EAAE;EACrB;IACE,mBAAmB,EAAE;EACvB;IACE,sBAAsB,EAAE;EAC1B;IACE,gBAAgB,EAAE;EACpB;IACE,eAAe;IACf,gBAAgB;IAChB,iBAAiB;IACjB,cAAc;IACd,kBAAkB,EAAE;EACtB;IACE,eAAe;IACf,kBAAkB,EAAE;EACtB;IACE,sBAAsB,EAAE;IACxB;MACE,qBAAqB;MACrB,kBAAkB,EAAE;MACpB;QACE,eAAe,EAAE;IACrB;MACE,0BAA0B;MAC1B,eAAe,EAAE;MACjB;QACE,gBAAgB,EAAE;IACtB;MACE,eAAe;MACf,iBAAiB,EAAE;IACrB;MACE,kBAAkB,EAAE;EACxB;IACE,aAAa,EAAE;EACjB;IACE,iBAAiB;IACjB,kBAAkB;IAClB,iBAAiB;IACjB,iBAAiB;IACjB,kBAAkB,EAAE;IACpB;MACE,kBAAkB;MAClB,cAAc;MACd,iBAAiB;MACjB,YAAY;MACZ,iBAAiB;MACjB,4BAA4B,EAAE;EAClC;IACE,kBAAkB;IAClB,OAAO;IACP,kBAAkB,EAAE;EACtB;IACE,eAAe;IACf,cAAc;IACd,iBAAiB,EAAE;EACrB;IACE,mBAAmB;IACnB,8BAA8B,EAAE;IAChC;MACE,qBAAqB,EAAE;MACvB;QACE,4CAA4C,EAAE;MAChD;QACE,qBAAqB,EAAE;QACvB;UACE,4CAA4C,EAAE;MAClD;QACE,qBAAqB,EAAE;MACzB;QACE,gBAAgB,EAAE;MACpB;QACE,4CAA4C,EAAE;MAChD;QACE,qBAAqB,EAAE;MACzB;QACE,4CAA4C,EAAE;IAClD;MACE,cAAc;MACd,eAAe;MACf,kBAAkB;MAClB,qBAAqB;MACrB,OAAO,EAAE;;AAEf;EACE,UAAU,EAAE;;AAEd;EACE,aAAa,EAAE;;AAEjB;EACE,cAAc,EAAE;;AAElB;EACE,WAAW;EACX,YAAY;EACZ,gBAAgB;EAChB,aAAa;EACb,uBAAuB;EACvB,mBAAmB,EAAE;EACrB;IACE,eAAe;IACf,gBAAgB,EAAE;;AAEtB;EACE,0BAA0B;EAC1B,kBAAkB,EAAE;EACpB;IACE,kBAAkB;IAClB,iBAAiB;IACjB,eAAe;IACf,0BAA0B;IAC1B,iBAAiB;IACjB,oBAAoB,EAAE;EACxB;IACE,UAAU,EAAE;;AAEhB;EACE,kBAAkB,EAAE;;AAEtB;EACE,aAAa;EACb,mBAAmB;EACnB,yBAAyB;EACzB,aAAa,EAAE;EACf;IACE,WAAW;IACX,YAAY,EAAE;;AAElB;EACE,eAAe,EAAE;;AAEnB;EACE,mBAAmB;EACnB,WAAW;EACX,eAAe,EAAE","file":"index.css","sourcesContent":[".react-form, .react-form--large, .react-form--small, .react-form--inner, .react-form--inner--large, .react-form--inner--small, .react-form--inline, .react-form--inline--large, .react-form--inline--small {\n  text-align: left;\n  font-size: 12px; }\n  .react-form .ant-select, .react-form--large .ant-select, .react-form--small .ant-select, .react-form--inner .ant-select, .react-form--inner--large .ant-select, .react-form--inner--small .ant-select, .react-form--inline .ant-select, .react-form--inline--large .ant-select, .react-form--inline--small .ant-select {\n    width: 100%; }\n  .react-form--large .react-form__field-label {\n    font-size: 14px;\n    margin-right: 20px;\n    line-height: 34px; }\n  .react-form--small .react-form__field-label {\n    margin-right: 12px;\n    line-height: 24px; }\n  .react-form--inner .react-form__field, .react-form--inner--large .react-form__field, .react-form--inner--small .react-form__field {\n    margin-bottom: 22px; }\n  .react-form--inner .react-form__field-main, .react-form--inner--large .react-form__field-main, .react-form--inner--small .react-form__field-main {\n    flex-direction: column; }\n  .react-form--inner .react-form__field-input, .react-form--inner--large .react-form__field-input, .react-form--inner--small .react-form__field-input {\n    align-self: auto; }\n  .react-form--inner .react-form__field-label, .react-form--inner--large .react-form__field-label, .react-form--inner--small .react-form__field-label {\n    font-size: 14px;\n    text-align: left;\n    font-weight: bold;\n    margin-left: 0;\n    margin-bottom: 2px; }\n  .react-form--inner--small .react-form__field-label {\n    font-size: 12px;\n    margin-bottom: 1px; }\n  .react-form--inline, .react-form--inline--large, .react-form--inline--small {\n    padding: 30px 30px 6px; }\n    .react-form--inline .react-form__field, .react-form--inline--large .react-form__field, .react-form--inline--small .react-form__field {\n      display: inline-block;\n      margin-right: 40px; }\n      .react-form--inline .react-form__field:last-child, .react-form--inline--large .react-form__field:last-child, .react-form--inline--small .react-form__field:last-child {\n        margin-right: 0; }\n    .react-form--inline .react-form__field-label, .react-form--inline--large .react-form__field-label, .react-form--inline--small .react-form__field-label {\n      min-width: auto !important;\n      padding-left: 0; }\n      .react-form--inline .react-form__field-label.is-req:before, .react-form--inline--large .react-form__field-label.is-req:before, .react-form--inline--small .react-form__field-label.is-req:before {\n        position: static; }\n    .react-form--inline--large .react-form__field-label {\n      font-size: 14px;\n      line-height: 34px; }\n    .react-form--inline--small .react-form__field-label {\n      margin-right: 12px; }\n  .react-form__field-main {\n    display: flex; }\n  .react-form__field-label {\n    text-align: right;\n    margin-right: 16px;\n    line-height: 30px;\n    margin-left: 10px;\n    position: relative; }\n    .react-form__field-label.is-req:before {\n      position: absolute;\n      color: #fc3333;\n      font-weight: bold;\n      content: '*';\n      margin-right: 4px;\n      transform: translateX(-10px); }\n  .react-form__field-input {\n    align-self: center;\n    flex: 1;\n    position: relative; }\n  .react-form__field-describable {\n    font-size: 12px;\n    color: #999999;\n    line-height: 20px; }\n  .react-form__field {\n    margin-bottom: 24px;\n    transition: border-color 300ms; }\n    .react-form__field.is-req-error .react-form__field-component, .react-form__field.is-error .react-form__field-component {\n      border-color: #fc3333; }\n      .react-form__field.is-req-error .react-form__field-component:focus, .react-form__field.is-error .react-form__field-component:focus {\n        box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2); }\n      .react-form__field.is-req-error .react-form__field-component .ant-select-selection, .react-form__field.is-req-error .react-form__field-component .ant-input, .react-form__field.is-req-error .react-form__field-component .ant-radio-inner, .react-form__field.is-error .react-form__field-component .ant-select-selection, .react-form__field.is-error .react-form__field-component .ant-input, .react-form__field.is-error .react-form__field-component .ant-radio-inner {\n        border-color: #fc3333; }\n        .react-form__field.is-req-error .react-form__field-component .ant-select-selection:focus, .react-form__field.is-req-error .react-form__field-component .ant-input:focus, .react-form__field.is-req-error .react-form__field-component .ant-radio-inner:focus, .react-form__field.is-error .react-form__field-component .ant-select-selection:focus, .react-form__field.is-error .react-form__field-component .ant-input:focus, .react-form__field.is-error .react-form__field-component .ant-radio-inner:focus {\n          box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2); }\n      .react-form__field.is-req-error .react-form__field-component .ant-upload.ant-upload-select-picture-card, .react-form__field.is-error .react-form__field-component .ant-upload.ant-upload-select-picture-card {\n        border-color: #fc3333; }\n      .react-form__field.is-req-error .react-form__field-component.ant-input-affix-wrapper .ant-input, .react-form__field.is-error .react-form__field-component.ant-input-affix-wrapper .ant-input {\n        box-shadow: none; }\n      .react-form__field.is-req-error .react-form__field-component.ant-input-affix-wrapper-focused, .react-form__field.is-error .react-form__field-component.ant-input-affix-wrapper-focused {\n        box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2); }\n      .react-form__field.is-req-error .react-form__field-component.ant-select > .ant-select-selector, .react-form__field.is-error .react-form__field-component.ant-select > .ant-select-selector {\n        border-color: #fc3333; }\n      .react-form__field.is-req-error .react-form__field-component.ant-select.ant-select-focused > .ant-select-selector, .react-form__field.is-error .react-form__field-component.ant-select.ant-select-focused > .ant-select-selector {\n        box-shadow: 0 0 0 2px rgba(252, 51, 51, 0.2); }\n    .react-form__field-error {\n      color: #fc3333;\n      font-size: 12px;\n      position: absolute;\n      top: calc(100% + 1px);\n      left: 0; }\n\n.react-form-modal .ant-modal-content > .ant-modal-body {\n  padding: 0; }\n\n.react-form-modal .ant-modal-confirm-btns {\n  display: none; }\n\n.react-form-modal.ant-modal-confirm .ant-modal-header, .react-form-modal.ant-modal-confirm .ant-modal-close {\n  display: block; }\n\n.react-form-avatar .preview {\n  width: 85px;\n  height: 85px;\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center; }\n  .react-form-avatar .preview img {\n    max-width: 100%;\n    max-height: 100%; }\n\n.data_range_picker {\n  color: rgba(0, 0, 0, 0.85);\n  position: relative; }\n  .data_range_picker .zhijin {\n    position: absolute;\n    line-height: 31px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 0.85);\n    margin-left: 12px;\n    pointer-events: auto; }\n  .data_range_picker .zhijin_show {\n    z-index: 9; }\n\n.data_range_picker_dis .ant-picker-input input {\n  color: transparent; }\n\n.svg_box {\n  display: flex;\n  align-items: center;\n  color: rgba(0, 0, 0, 0.5);\n  margin: 0 4px; }\n  .svg_box svg {\n    width: 16px;\n    height: 16px; }\n\n.react-form-avatar-btn {\n  cursor: pointer; }\n\n.react-form-avatar-tips {\n  margin-bottom: 14px;\n  color: #999;\n  font-size: 12px; }\n"]}

package/dist/index.js

@@ -6,6 +6,7 @@ var reactFormHelper = require('@kne/react-form-helper');
 var merge = require('lodash/merge');
 var get = require('lodash/get');
 var antd = require('antd');
+var withLayer = require('@kne/with-layer');
 var icons = require('@ant-design/icons');
 var AvatarEditor = require('react-avatar-editor');
 var omit = require('lodash/omit');
@@ -18,12 +19,32 @@ var uniqueId = require('lodash/uniqueId');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return n;
+}
+
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var ReactForm__default = /*#__PURE__*/_interopDefaultLegacy(ReactForm);
 var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
+var withLayer__default = /*#__PURE__*/_interopDefaultLegacy(withLayer);
 var AvatarEditor__default = /*#__PURE__*/_interopDefaultLegacy(AvatarEditor);
 var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
@@ -33,7 +54,7 @@ var groupBy__default = /*#__PURE__*/_interopDefaultLegacy(groupBy);
 var uniqueId__default = /*#__PURE__*/_interopDefaultLegacy(uniqueId);
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -46,7 +67,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -110,7 +130,7 @@ var preset = (function (props) {
   ReactForm.preset(globalParams.rules);
 });
 
-var _excluded$8 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
+var _excluded$9 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
 var ScrollToError = reactFormHelper.widget.ScrollToError,
     EnterSubmit = reactFormHelper.widget.EnterSubmit,
     FormStore = reactFormHelper.widget.FormStore,
@@ -123,7 +143,7 @@ var Form = React.forwardRef(function (originProps, ref) {
       scrollToError = originProps.scrollToError,
       scrollProps = originProps.scrollProps,
       children = originProps.children,
-      props = _objectWithoutPropertiesLoose(originProps, _excluded$8);
+      props = _objectWithoutPropertiesLoose(originProps, _excluded$9);
 
   var baseClass = 'react-form';
   var computedClass = baseClass;
@@ -182,35 +202,199 @@ Form.propTypes = {
   })
 };
 
+var RotateIcon = function RotateIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 14 14",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, props), /*#__PURE__*/React__namespace.createElement("title", null, "\u65CB\u8F6C"), /*#__PURE__*/React__namespace.createElement("g", {
+    id: "PC\\u7AEF",
+    stroke: "none",
+    strokeWidth: 1,
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__namespace.createElement("g", {
+    id: "\\u56FE\\u6807",
+    transform: "translate(-77.000000, -1567.000000)",
+    fill: "#222222",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React__namespace.createElement("g", {
+    id: "\\u65CB\\u8F6C",
+    transform: "translate(77.000000, 1567.000000)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M9.16414904,5.6345426 C9.35110931,5.6345426 9.53041217,5.70881228 9.66261304,5.84101315 C9.79481391,5.97321402 9.86908359,6.15251688 9.86908359,6.33947715 L9.86908359,12.683888 C9.86908359,13.0732126 9.55347364,13.3888226 9.16414904,13.3888226 L0.704934547,13.3888226 C0.315609953,13.3888226 1.8189894e-12,13.0732126 1.8189894e-12,12.683888 L1.8189894e-12,6.33947715 C1.8189894e-12,6.15251688 0.0742696765,5.97321402 0.206470548,5.84101315 C0.33867142,5.70881228 0.517974281,5.6345426 0.704934547,5.6345426 L9.16414904,5.6345426 Z M8.4592145,7.04441168 L1.40986909,7.04441168 L1.40986909,11.9789535 L8.4592145,11.9789535 L8.4592145,7.04441168 Z M7.58258803,0.714885198 C7.63035214,0.738767256 7.66052367,0.787585825 7.66052367,0.840987728 L7.66052367,2.02739256 C11.1625178,2.03011634 14,4.86980822 14,8.37180343 C14,8.62367799 13.8656872,8.85643618 13.6475639,8.98238459 C13.4294405,9.108333 13.1606904,9.108333 12.942567,8.98238459 C12.7244437,8.85643618 12.5900924,8.62367799 12.5901309,8.37180343 C12.5901323,5.64845715 10.3838686,3.43998499 7.66052367,3.43726164 L7.66052367,4.50664733 C7.66052367,4.56004923 7.63035214,4.6088678 7.58258803,4.63274986 C7.53482391,4.65663192 7.47766614,4.65147801 7.43494462,4.61943686 L4.99093655,2.78660706 C4.95543522,2.75998107 4.93454178,2.71819419 4.93454178,2.67381753 C4.93454178,2.62944087 4.95543522,2.58765399 4.99093655,2.561028 L7.43494462,0.728198195 C7.47766614,0.696157053 7.53482391,0.691003139 7.58258803,0.714885198 Z",
+    id: "\\u5F62\\u72B6\\u7ED3\\u5408"
+  })))));
+};
+
+var FullIcon = function FullIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 14 14",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, props), /*#__PURE__*/React__namespace.createElement("title", null, "\u5145\u6EE1"), /*#__PURE__*/React__namespace.createElement("g", {
+    id: "PC\\u7AEF",
+    stroke: "none",
+    strokeWidth: 1,
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__namespace.createElement("g", {
+    id: "\\u56FE\\u6807",
+    transform: "translate(-145.000000, -1567.000000)",
+    fill: "#222222",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React__namespace.createElement("g", {
+    id: "\\u5145\\u6EE1",
+    transform: "translate(145.000000, 1567.000000)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M12.09375,0 C12.35,0 12.6,0.05 12.8359375,0.15 C13.0640625,0.2453125 13.2671875,0.3828125 13.4421875,0.5578125 C13.6171875,0.7328125 13.7546875,0.9375 13.85,1.1640625 C13.95,1.4 14,1.65 14,1.90625 L14,1.90625 L14,12.09375 C14,12.35 13.95,12.6 13.85,12.8359375 C13.7546875,13.0640625 13.6171875,13.2671875 13.4421875,13.4421875 C13.2671875,13.6171875 13.0625,13.7546875 12.8359375,13.85 C12.6,13.95 12.35,14 12.09375,14 L12.09375,14 L1.90625,14 C1.65,14 1.4,13.95 1.1640625,13.85 C0.9359375,13.7546875 0.7328125,13.6171875 0.5578125,13.4421875 C0.3828125,13.2671875 0.2453125,13.0625 0.15,12.8359375 C0.05,12.6 0,12.35 0,12.09375 L0,12.09375 L0,1.90625 C0,1.65 0.05,1.4 0.15,1.1640625 C0.2453125,0.9359375 0.3828125,0.7328125 0.5578125,0.5578125 C0.7328125,0.3828125 0.9375,0.2453125 1.1640625,0.15 C1.4,0.05 1.65,0 1.90625,0 L1.90625,0 Z M12.09375,1.125 L1.90625,1.125 C1.475,1.125 1.125,1.475 1.125,1.90625 L1.125,1.90625 L1.125,12.09375 C1.125,12.525 1.475,12.875 1.90625,12.875 L1.90625,12.875 L12.09375,12.875 C12.525,12.875 12.875,12.525 12.875,12.09375 L12.875,12.09375 L12.875,1.90625 C12.875,1.475 12.525,1.125 12.09375,1.125 L12.09375,1.125 Z M2.5734375,7.484375 C2.878125,7.490625 3.125,7.740625 3.125,8.046875 L3.125,8.046875 L3.125,10.0640625 L5.1265625,8.0625 C5.3453125,7.84375 5.703125,7.84375 5.921875,8.0625 C6.140625,8.28125 6.140625,8.6390625 5.921875,8.8578125 L5.921875,8.8578125 L3.903125,10.875 L5.909375,10.875 C6.2265625,10.875 6.4890625,11.13125 6.484375,11.4484375 C6.478125,11.7546875 6.228125,12 5.921875,12 L5.921875,12 L2.5734375,12 C2.25625,12 2,11.74375 2,11.4265625 L2,11.4265625 L2,8.0578125 C2,7.740625 2.2578125,7.478125 2.5734375,7.484375 Z M11.4296875,2 C11.7453125,2 12,2.25625 12,2.5703125 L12,2.5703125 L12,5.940625 C12,6.2578125 11.7421875,6.5203125 11.4265625,6.5140625 C11.121875,6.5078125 10.875,6.2578125 10.875,5.9515625 L10.875,5.9515625 L10.875,3.9359375 L8.8734375,5.9375 C8.6546875,6.15625 8.296875,6.15625 8.078125,5.9375 C7.859375,5.71875 7.859375,5.3609375 8.078125,5.1421875 L8.078125,5.1421875 L10.0953125,3.125 L8.0890625,3.125 C7.771875,3.125 7.509375,2.86875 7.515625,2.5515625 C7.521875,2.2453125 7.771875,2 8.078125,2 L8.078125,2 Z",
+    id: "\\u5F62\\u72B6\\u7ED3\\u5408"
+  })))));
+};
+
+var getPopupContainer = function getPopupContainer(triggerNode) {
+  var findAntdPopupContainer = function findAntdPopupContainer(el) {
+    if (el === document.body || !el.parentElement) {
+      return document.body;
+    }
+
+    var targetEl = [].slice.call(el.classList, 0).find(function (className) {
+      return ['ant-modal-body', 'ant-modal-content', 'ant-popover-content'].indexOf(className) > -1;
+    });
+
+    if (targetEl) {
+      return el;
+    }
+
+    return findAntdPopupContainer(el.parentElement);
+  };
+
+  return findAntdPopupContainer(triggerNode);
+};
+
+var _excluded$8 = ["close", "file", "editor", "onComplete"];
 var useOnChange$d = reactFormHelper.hooks.useOnChange;
 var avatarParams = globalParams.field.avatar;
+var createAvatarEditor = withLayer__default["default"](function (_ref) {
+  var close = _ref.close,
+      file = _ref.file,
+      editor = _ref.editor,
+      onComplete = _ref.onComplete,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+
+  var editorRef = React.useRef(null);
+
+  var _useState = React.useState(0),
+      rotate = _useState[0],
+      setRotate = _useState[1];
+
+  var _useState2 = React.useState(function () {
+    if (editor.width === editor.height) {
+      return 1;
+    }
 
-var _Avatar = function _Avatar(_ref) {
-  var className = _ref.className,
-      imageUrl = _ref.value,
-      propsChange = _ref.onChange,
-      onBeforeUpload = _ref.beforeUpload,
-      transformResponse = _ref.transformResponse,
-      action = _ref.action,
-      imageType = _ref.imageType,
-      size = _ref.fileSize,
-      children = _ref.children,
-      extraRender = _ref.extraRender,
-      onError = _ref.onError,
-      openEditor = _ref.openEditor,
-      targetEditor = _ref.editor,
-      previewImg = _ref.previewImg,
-      previewRender = _ref.previewRender;
-
-  var _useState = React.useState(false),
-      loading = _useState[0],
-      setLoading = _useState[1];
-
-  var _useState2 = React.useState(imageUrl),
-      showImageUrl = _useState2[0],
-      setImageUrl = _useState2[1];
-
-  var editorRef = React.useRef();
+    return 0.35;
+  }),
+      scale = _useState2[0],
+      setScale = _useState2[1];
+
+  return /*#__PURE__*/React__default["default"].createElement(antd.Modal, _extends({}, props, {
+    centered: true,
+    onOk: function onOk() {
+      onComplete && onComplete(editorRef.current.getImage().toDataURL());
+      close();
+    }
+  }), editor.tips ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "react-form-avatar-tips"
+  }, editor.tips) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      "width": editor.width,
+      "margin": "auto"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(AvatarEditor__default["default"], {
+    ref: editorRef,
+    image: file,
+    width: editor.width,
+    height: editor.height,
+    border: 1,
+    borderRadius: editor.borderRadius,
+    color: [24, 144, 255, 1] // RGBA
+    ,
+    scale: scale,
+    rotate: rotate
+  }), /*#__PURE__*/React__default["default"].createElement(antd.Row, {
+    gutter: 4,
+    align: "middle"
+  }, /*#__PURE__*/React__default["default"].createElement(antd.Col, {
+    span: 4
+  }, /*#__PURE__*/React__default["default"].createElement(antd.Tooltip, {
+    title: "\u65CB\u8F6C",
+    getPopupContainer: getPopupContainer
+  }, /*#__PURE__*/React__default["default"].createElement(RotateIcon, {
+    className: "react-form-avatar-btn",
+    onClick: function onClick() {
+      setRotate(function (rotate) {
+        return rotate + 90;
+      });
+    }
+  }))), /*#__PURE__*/React__default["default"].createElement(antd.Col, {
+    span: 4
+  }, /*#__PURE__*/React__default["default"].createElement(antd.Tooltip, {
+    title: "\u5145\u6EE1",
+    getPopupContainer: getPopupContainer
+  }, /*#__PURE__*/React__default["default"].createElement(FullIcon, {
+    className: "react-form-avatar-btn",
+    onClick: function onClick() {
+      setScale(1);
+    }
+  }))), /*#__PURE__*/React__default["default"].createElement(antd.Col, {
+    flex: 1
+  }, /*#__PURE__*/React__default["default"].createElement(antd.Slider, {
+    tooltip: {
+      formatter: function formatter() {
+        return '大小';
+      },
+      getPopupContainer: getPopupContainer
+    },
+    value: scale,
+    step: 0.05,
+    min: 0.2,
+    max: 3,
+    onChange: setScale
+  })))));
+});
+
+var _Avatar = function _Avatar(_ref2) {
+  var className = _ref2.className,
+      imageUrl = _ref2.value,
+      propsChange = _ref2.onChange,
+      onBeforeUpload = _ref2.beforeUpload,
+      transformResponse = _ref2.transformResponse,
+      action = _ref2.action,
+      imageType = _ref2.imageType,
+      size = _ref2.fileSize,
+      children = _ref2.children,
+      extraRender = _ref2.extraRender,
+      onError = _ref2.onError,
+      openEditor = _ref2.openEditor,
+      editorTips = _ref2.editorTips,
+      targetEditor = _ref2.editor,
+      previewImg = _ref2.previewImg,
+      previewRender = _ref2.previewRender;
+
+  var _useState3 = React.useState(false),
+      loading = _useState3[0],
+      setLoading = _useState3[1];
+
+  var _useState4 = React.useState(imageUrl),
+      showImageUrl = _useState4[0],
+      setImageUrl = _useState4[1];
+
+  React.useRef();
   var defaultEditor = {
     open: false,
     width: 250,
@@ -218,10 +402,12 @@ var _Avatar = function _Avatar(_ref) {
     borderRadius: 1,
     text: "确定",
     cancelText: '取消',
-    title: "裁剪图片"
+    title: "裁剪图片",
+    tips: null
   };
   var editor = merge__default["default"]({}, defaultEditor, {
-    open: openEditor
+    open: openEditor,
+    tips: editorTips
   }, targetEditor);
   React.useEffect(function () {
     setImageUrl(imageUrl);
@@ -247,75 +433,6 @@ var _Avatar = function _Avatar(_ref) {
     });
   };
 
-  var AvatarEditorBox = function AvatarEditorBox(_ref2) {
-    var file = _ref2.file;
-
-    var _useState3 = React.useState(0),
-        rotate = _useState3[0],
-        setRotate = _useState3[1];
-
-    var _useState4 = React.useState(function () {
-      if (editor.width === editor.height) {
-        return 1;
-      }
-
-      return 0.35;
-    }),
-        scale = _useState4[0],
-        setScale = _useState4[1];
-
-    var onChange = function onChange(v) {
-      setRotate(v);
-    };
-
-    var onChangeScale = function onChangeScale(v) {
-      setScale(v);
-    };
-
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        "width": editor.width,
-        "margin": "auto"
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(AvatarEditor__default["default"], {
-      ref: editorRef,
-      image: file,
-      width: editor.width,
-      height: editor.height,
-      border: 1,
-      borderRadius: editor.borderRadius,
-      color: [24, 144, 255, 1] // RGBA
-      ,
-      scale: scale,
-      rotate: rotate
-    }), /*#__PURE__*/React__default["default"].createElement(antd.Row, {
-      gutter: 4
-    }, /*#__PURE__*/React__default["default"].createElement(antd.Col, {
-      span: 4
-    }, /*#__PURE__*/React__default["default"].createElement("span", null, "\u65CB\u8F6C")), /*#__PURE__*/React__default["default"].createElement(antd.Col, {
-      span: 15
-    }, /*#__PURE__*/React__default["default"].createElement(antd.Slider, {
-      tooltipVisible: false,
-      defaultValue: rotate,
-      min: -180,
-      max: 180,
-      onChange: onChange
-    }))), /*#__PURE__*/React__default["default"].createElement(antd.Row, {
-      gutter: 4
-    }, /*#__PURE__*/React__default["default"].createElement(antd.Col, {
-      span: 4
-    }, /*#__PURE__*/React__default["default"].createElement("span", null, "\u653E\u5927")), /*#__PURE__*/React__default["default"].createElement(antd.Col, {
-      span: 15
-    }, /*#__PURE__*/React__default["default"].createElement(antd.Slider, {
-      tooltipVisible: false,
-      defaultValue: scale,
-      step: 0.05,
-      min: 0.2,
-      max: 3,
-      onChange: onChangeScale
-    }))));
-  };
-
   var uploadButton = /*#__PURE__*/React__default["default"].createElement("div", null, loading ? /*#__PURE__*/React__default["default"].createElement(icons.LoadingOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.PlusOutlined, null), children);
 
   var beforeUpload = function beforeUpload(file) {
@@ -349,17 +466,15 @@ var _Avatar = function _Avatar(_ref) {
 
 
         if (editor.open) {
-          antd.Modal.confirm({
+          createAvatarEditor({
+            editor: editor,
+            file: file,
             title: editor.title,
             icon: "",
             width: editor.width * 2,
-            content: /*#__PURE__*/React__default["default"].createElement(AvatarEditorBox, {
-              file: file
-            }),
             cancelText: editor.cancelText,
             okText: editor.text,
-            onOk: function onOk(close) {
-              var base64 = editorRef.current.getImage().toDataURL();
+            onComplete: function onComplete(base64) {
               setImageUrl(base64);
               var blob = dataURLtoBlob(base64);
               var files = new window.File([blob], file.name, {
@@ -367,7 +482,6 @@ var _Avatar = function _Avatar(_ref) {
               });
               onBeforeUpload && onBeforeUpload(files);
               resolve(files);
-              close();
             }
           });
         } else {
@@ -487,26 +601,6 @@ CheckboxGroup$1.defaultProps = {
   fieldName: 'checkboxGroup'
 };
 
-var getPopupContainer = function getPopupContainer(triggerNode) {
-  var findAntdPopupContainer = function findAntdPopupContainer(el) {
-    if (el === document.body || !el.parentElement) {
-      return document.body;
-    }
-
-    var targetEl = [].slice.call(el.classList, 0).find(function (className) {
-      return ['ant-modal-body', 'ant-modal-content', 'ant-popover-content'].indexOf(className) > -1;
-    });
-
-    if (targetEl) {
-      return el;
-    }
-
-    return findAntdPopupContainer(el.parentElement);
-  };
-
-  return findAntdPopupContainer(triggerNode);
-};
-
 var useOnChange$9 = reactFormHelper.hooks.useOnChange;
 var MonthPicker = antd.DatePicker.MonthPicker,
     RangePicker$1 = antd.DatePicker.RangePicker,