shineout 1.12.2 → 1.12.3

package/esm/Rate/Rate.js

@@ -0,0 +1,252 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import classnames from 'classnames';
+import { isRTL } from '../config';
+import { PureComponent } from '../component';
+import { range } from '../utils/numbers';
+import { defaultProps } from '../utils/proptypes';
+import { rateClass } from './styles';
+import getDataset from '../utils/dom/getDataset';
+var MIN_SIZE = 12;
+
+var DefaultProps = _objectSpread({}, defaultProps, {
+  repeat: true,
+  max: 5,
+  size: 20,
+  text: [],
+  value: 0
+});
+
+var Rate =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Rate, _PureComponent);
+
+  function Rate(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "highlightTimer", void 0);
+
+    _this.state = {
+      hover: 0,
+      highlight: -1
+    };
+    return _this;
+  }
+
+  var _proto = Rate.prototype;
+
+  _proto.getValue = function getValue() {
+    var hover = this.state.hover;
+    return Number(hover === 0 ? this.props.value : hover);
+  };
+
+  _proto.getStyle = function getStyle() {
+    var size = this.props.size;
+    if (!size) return undefined;
+    var parsed = Math.max(MIN_SIZE, parseFloat("" + size));
+    return {
+      width: parsed,
+      fontSize: parsed,
+      position: 'relative'
+    };
+  };
+
+  _proto.getScale = function getScale() {
+    var _this$props$size = this.props.size,
+        size = _this$props$size === void 0 ? DefaultProps.size : _this$props$size;
+    if (size >= MIN_SIZE) return undefined;
+    return {
+      transform: "scale(" + Number(size) / MIN_SIZE + ")"
+    };
+  };
+
+  _proto.getIcon = function getIcon(icons, i, isBg) {
+    var _this$props = this.props,
+        repeat = _this$props.repeat,
+        allowHalf = _this$props.allowHalf;
+    var value = this.getValue();
+    var remain = value - i;
+    var icon;
+
+    if (!Array.isArray(icons)) {
+      icon = icons;
+    } else {
+      icon = icons[repeat ? value - 1 : i];
+      if (!icon) icon = icons[icons.length - 1];
+    }
+
+    if (remain <= 0 || remain >= 1 || isBg) return icon;
+    var style = {
+      width: remain * 100 + "%",
+      display: 'block',
+      overflow: 'hidden',
+      fontSize: 'inherit'
+    };
+    return React.createElement("span", {
+      style: style,
+      className: allowHalf ? rateClass('allow-half') : undefined
+    }, icon);
+  };
+
+  _proto.handleClick = function handleClick(value, e) {
+    var _this2 = this;
+
+    var _this$props2 = this.props,
+        clearable = _this$props2.clearable,
+        allowHalf = _this$props2.allowHalf;
+
+    if (allowHalf && e.target.parentElement.querySelector("." + rateClass('allow-half'))) {
+      value -= 0.5;
+    }
+
+    if (clearable && this.props.value === value) {
+      value = 0;
+      this.setState({
+        hover: 0
+      });
+    }
+
+    this.props.onChange(value);
+    this.setState({
+      highlight: value
+    });
+    if (this.highlightTimer) clearTimeout(this.highlightTimer);
+    this.highlightTimer = setTimeout(function () {
+      _this2.setState({
+        highlight: -1
+      });
+    }, 300);
+  };
+
+  _proto.handleHover = function handleHover(hover) {
+    this.setState({
+      hover: hover
+    });
+  };
+
+  _proto.handleMove = function handleMove(hover, e) {
+    var _e$target$getBounding = e.target.getBoundingClientRect(),
+        x = _e$target$getBounding.x,
+        width = _e$target$getBounding.width;
+
+    var offset;
+
+    if (isRTL()) {
+      offset = x + width / 2 < e.clientX ? 0.5 : 0;
+    } else {
+      offset = x + width / 2 > e.clientX ? 0.5 : 0;
+    }
+
+    this.setState({
+      hover: hover - offset
+    });
+  };
+
+  _proto.renderBackground = function renderBackground() {
+    var _this3 = this;
+
+    var _this$props3 = this.props,
+        background = _this$props3.background,
+        _this$props3$max = _this$props3.max,
+        max = _this$props3$max === void 0 ? DefaultProps.max : _this$props3$max,
+        disabled = _this$props3.disabled;
+    var style = this.getStyle();
+    var value = this.getValue();
+    return React.createElement("div", {
+      className: rateClass('background')
+    }, range(max).map(function (v) {
+      return React.createElement("span", {
+        key: v // the allowHalf only for the front same as background
+        ,
+        style: Object.assign({
+          visibility: !disabled && Math.floor(value) > v ? 'hidden' : 'visible'
+        }, style)
+      }, _this3.getIcon(background, v, true));
+    }));
+  };
+
+  _proto.renderRate = function renderRate() {
+    var _this4 = this;
+
+    var _this$props4 = this.props,
+        front = _this$props4.front,
+        _this$props4$max = _this$props4.max,
+        max = _this$props4$max === void 0 ? DefaultProps.max : _this$props4$max,
+        _this$props4$text = _this$props4.text,
+        text = _this$props4$text === void 0 ? DefaultProps.text : _this$props4$text,
+        allowHalf = _this$props4.allowHalf;
+    var highlight = this.state.highlight;
+    var value = this.getValue();
+    var style = this.getStyle();
+    return React.createElement("div", {
+      className: rateClass('front')
+    }, range(max).map(function (v) {
+      return React.createElement("span", {
+        key: v,
+        onClick: _this4.handleClick.bind(_this4, v + 1),
+        onMouseMove: allowHalf ? _this4.handleMove.bind(_this4, v + 1) : undefined,
+        onMouseEnter: !allowHalf ? _this4.handleHover.bind(_this4, v + 1) : undefined,
+        style: style
+      }, React.createElement("div", {
+        style: {
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          left: 0,
+          bottom: 0
+        },
+        onMouseLeave: _this4.handleHover.bind(_this4, 0)
+      }), value > v ? _this4.getIcon(front, v) : React.createElement("span", null, "\xA0"), highlight === v + 1 && React.createElement("i", {
+        className: rateClass('highlight')
+      }, _this4.getIcon(front, v)));
+    }), React.createElement("span", {
+      className: rateClass('text')
+    }, text[Math.ceil(value) - 1]));
+  };
+
+  _proto.renderStatic = function renderStatic() {
+    var _this5 = this;
+
+    var _this$props5 = this.props,
+        front = _this$props5.front,
+        _this$props5$value = _this$props5.value,
+        value = _this$props5$value === void 0 ? DefaultProps.value : _this$props5$value,
+        _this$props5$max = _this$props5.max,
+        max = _this$props5$max === void 0 ? DefaultProps.max : _this$props5$max,
+        _this$props5$text = _this$props5.text,
+        text = _this$props5$text === void 0 ? DefaultProps.text : _this$props5$text;
+    var style = this.getStyle();
+    return React.createElement("div", {
+      className: rateClass('static')
+    }, range(max).map(function (v) {
+      return React.createElement("span", {
+        key: v,
+        style: style
+      }, value > v && _this5.getIcon(front, v));
+    }), React.createElement("span", {
+      className: rateClass('text')
+    }, text[Math.ceil(value) - 1]));
+  };
+
+  _proto.render = function render() {
+    var className = classnames(rateClass('_', isRTL() && 'rtl'), this.props.className);
+    var ms = Object.assign({}, this.props.style, this.getScale());
+    return React.createElement("div", _extends({
+      className: className,
+      style: ms
+    }, getDataset(this.props)), this.renderBackground(), this.props.disabled ? this.renderStatic() : this.renderRate());
+  };
+
+  return Rate;
+}(PureComponent);
+
+_defineProperty(Rate, "defaultProps", DefaultProps);
+
+export default Rate;

package/esm/Rate/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { OriginRateProps, ArgProps } from './Props';
+declare type InnerProps = Omit<OriginRateProps, keyof ArgProps>;
+declare const _default: (background: ArgProps['background'], front: ArgProps['front'], opts?: Partial<InnerProps>) => React.ComponentType<import("../Form/Props").GetInputableProps<InnerProps, unknown>>;
+export default _default;

package/esm/Rate/index.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Component from './Rate';
+import inputable from '../Form/inputable';
+export default (function (background, front, opts) {
+  if (opts === void 0) {
+    opts = {};
+  }
+
+  var Rate = inputable(function (props) {
+    return React.createElement(Component, _extends({}, opts, props, {
+      background: background,
+      front: front || background
+    }));
+  });
+  Rate.displayName = 'ShineoutRate';
+  return Rate;
+});

package/esm/Rate/interface.d.ts

@@ -0,0 +1 @@
+export { RateProps as Props } from './Props';

package/esm/Rate/interface.js

@@ -0,0 +1 @@
+export {};

package/esm/Rate/styles/index.d.ts

@@ -0,0 +1,2 @@
+import '../../styles/normalize.less';
+export declare const rateClass: (...args: any) => string;

package/esm/Rate/styles/index.js

@@ -0,0 +1,4 @@
+import '../../styles/normalize.less';
+import rateLess from './rate.less';
+import genaration from '../../utils/classname';
+export var rateClass = genaration(rateLess, 'rate');

package/esm/Rate/styles/rate.less

@@ -0,0 +1,105 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@rate-prefix: ~'@{so-prefix}-rate';
+
+.@{rate-prefix} {
+  &-rtl {
+    direction: rtl;
+    text-align: right;
+  }
+  @kf-highlight: ~'@{rate-prefix}-highlight';
+
+  @keyframes @kf-highlight {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale(1.6);
+    }
+  }
+
+  position: relative;
+  white-space: nowrap;
+  display: inline-block;
+
+  &-background {
+    position: relative;
+    z-index: 0;
+
+    & > span {
+      color: @rate-bg-color;
+    }
+  }
+
+  &-front,
+  &-static {
+    position: absolute;
+    z-index: 1;
+
+    & > span {
+      position: relative;
+      color: @rate-active-color;
+    }
+  }
+
+  &-front,
+  &-background {
+    span {
+      cursor: pointer;
+    }
+  }
+
+  &-front,
+  &-background,
+  &-static {
+    top: 0;
+    left: 0;
+    .@{rate-prefix}-rtl & {
+      left: auto;
+      right: 0;
+    }
+
+
+    & > span {
+      display: inline-block;
+      margin-right: @rate-space;
+      vertical-align: middle;
+      .@{rate-prefix}-rtl & {
+        margin-right: 0;
+        margin-left: @rate-space;
+      }
+      &:last-child {
+        margin-right: 0;
+        .@{rate-prefix}-rtl & {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &-highlight {
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: @kf-highlight 0.3s ease-out;
+    font-style: normal;
+    .@{rate-prefix}-rtl & {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  span&-text {
+    margin-left: 4px;
+    color: @gray-600;
+    font-size: 14px;
+    .@{rate-prefix}-rtl & {
+      margin-right: 4px;
+      margin-left: 0;
+    }
+  }
+}

package/esm/Rule/Props.d.ts

@@ -0,0 +1,172 @@
+import { ValueOf } from '../@types/common';
+export declare type RuleTypeEnum = 'email' | 'integer' | 'number' | 'url' | 'json' | 'hex' | 'rgb' | 'ipv4';
+export declare type MessageType = string | ((props: any) => string);
+export interface Required {
+    required?: boolean;
+    message?: MessageType;
+}
+export interface Max {
+    max?: number;
+    message?: MessageType;
+}
+export interface Min {
+    min?: number;
+    message?: MessageType;
+}
+export interface Range extends Min, Max {
+}
+export interface Type {
+    type?: RuleTypeEnum;
+    message?: MessageType;
+}
+export interface RegExpParams {
+    regExp?: RegExp | string;
+    message?: MessageType;
+}
+export interface ValidFunc {
+    (value: any, formData: any, callback: (cbArgs: (true | Error) | (true | Error)[]) => void, props: any): void | Promise<any>;
+}
+export interface RuleCommonResult {
+    /**
+     * whether to be required
+     *
+     * 是否必填
+     *
+     * default: -
+     */
+    required: InnerRuleFunc<(message?: MessageType) => Required>;
+    /**
+     * The minimum value. When type is 'number', validate the value. Otherwise, validate the value.length.
+     *
+     * 最小值，type 为 'number' 时，判断数值大小，其他类型判断 length
+     *
+     * default: -
+     */
+    min: InnerRuleFunc<(number?: number, message?: MessageType) => Min>;
+    /**
+     * The maximum value. When type is 'number', validate the value. Otherwise, validate the value.length.
+     *
+     * 最大值，type 为 'number' 时，判断数值大小，其他类型判断 length
+     *
+     * default: -
+     */
+    max: InnerRuleFunc<(number?: number, message?: MessageType) => Max>;
+    /**
+     * Range check, automatically determines whether the check type is a string, number, or option base on the field type.
+     *
+     * 数值范围校验，会根据 Field 的 type 自动判断校验类型为字符串、数字或选项
+     *
+     * default: -
+     */
+    range: InnerRuleFunc<(min?: number, max?: number, message?: MessageType) => Range>;
+    /**
+     * regular expression
+     *
+     * 正则表达式
+     *
+     * default: -
+     */
+    regExp: InnerRuleFunc<(reg?: RegExp | string, message?: MessageType) => RegExpParams>;
+    /**
+     * Email check
+     *
+     * 邮箱校验
+     *
+     * default: -
+     */
+    email: InnerRuleFunc<(message?: MessageType) => Type>;
+    /**
+     * Integer check
+     *
+     * 整数校验
+     *
+     * default: -
+     */
+    integer: InnerRuleFunc<(message?: MessageType) => Type>;
+    /**
+     * Number check
+     *
+     * 数值校验
+     *
+     * default: -
+     */
+    number: InnerRuleFunc<(message?: MessageType) => Type>;
+    /**
+     * Url check
+     *
+     * Url 校验
+     *
+     * default: -
+     */
+    url: InnerRuleFunc<(message?: MessageType) => Type>;
+    /**
+     * Json check
+     *
+     * Json 校验
+     *
+     * default: -
+     */
+    json: InnerRuleFunc<(message?: MessageType) => Type>;
+    /**
+     * Hex check
+     *
+     * Hex 校验
+     *
+     * default: -
+     */
+    hex: InnerRuleFunc<(message?: MessageType) => Type>;
+    /**
+     * Rgb check
+     *
+     * Rgb 校验
+     *
+     * default: -
+     */
+    rgb: InnerRuleFunc<(message?: MessageType) => Type>;
+    /**
+     * Ipv4 check
+     *
+     * Ipv4 校验
+     *
+     * default: -
+     */
+    ipv4: InnerRuleFunc<(message?: MessageType) => Type>;
+}
+export interface RuleFuncResult {
+    <U>(args?: U): {
+        args: U;
+        func: ValidFunc;
+        message?: MessageType;
+    };
+    isInnerValidator: true;
+}
+export declare type RuleResult = ({
+    [key: string]: RuleFuncResult;
+}) | RuleCommonResult;
+export declare type RuleResultValue = ValueOf<RuleResult>;
+export declare type FormItemObjectRule = Type & RegExpParams & Range & Min & Max & Required & {
+    func?: ValidFunc;
+};
+export declare type FormItemRule<Value, FormData = any, Props = any> = Array<RuleResultValue | FormItemObjectRule | ((value: Value, formData: FormData, callback: ((cbArgs: boolean | Error) => void), props?: Props) => void)>;
+export interface RuleParams {
+    required?: Required;
+    min?: Min;
+    max?: Max;
+    range?: Range;
+    regExp?: RegExpParams;
+    email?: Type;
+    integer?: Type;
+    number?: Type;
+    url?: Type;
+    json?: Type;
+    hex?: Type;
+    rgb?: Type;
+    ipv4?: Type;
+    [propName: string]: {
+        func?: ValidFunc;
+        message?: MessageType;
+    } | ValidFunc | undefined;
+}
+export declare type InnerRuleFunc<U> = U & {
+    isInnerValidator: true;
+};

package/esm/Rule/Props.js

@@ -0,0 +1 @@
+export {};

package/esm/Rule/index.d.ts

@@ -0,0 +1,15 @@
+import { RuleParams, RuleCommonResult, RuleFuncResult } from './Props';
+export declare const RULE_TYPE = "RULE_OBJECT";
+export default function Rule(): RuleCommonResult;
+export default function Rule<A extends RuleParams>(a: A): {
+    [P in keyof A]: RuleFuncResult;
+} & RuleCommonResult;
+export default function Rule<A extends RuleParams, B extends RuleParams>(a: A, b: B): {
+    [P in keyof (A & B)]: RuleFuncResult;
+} & RuleCommonResult;
+export default function Rule<A extends RuleParams, B extends RuleParams, C extends RuleParams>(a: A, b: B, c: C): {
+    [P in keyof (A & B & C)]: RuleFuncResult;
+} & RuleCommonResult;
+export default function Rule<A extends RuleParams, B extends RuleParams, C extends RuleParams, D extends RuleParams>(a: A, b: B, c: C, d: D): {
+    [P in keyof (A & B & C & D)]: RuleFuncResult;
+} & RuleCommonResult;

package/esm/Rule/index.js

@@ -0,0 +1,81 @@
+import { deepMerge, objectValues } from '../utils/objects';
+import { isObject } from '../utils/is';
+import required from './required';
+import length from './length';
+import _type from './type';
+import regExp from './regExp';
+export var RULE_TYPE = 'RULE_OBJECT';
+var innerType = ['email', 'integer', 'number', 'url', 'json', 'hex', 'rgb', 'ipv4'];
+
+var mergeOptions = function mergeOptions(opts) {
+  if (opts === void 0) {
+    opts = {};
+  }
+
+  if (!isObject(opts)) {
+    console.error(new Error("rules expect an object, got " + typeof opts));
+    return {};
+  }
+
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+
+  if (args.length === 0) return opts;
+  var arg = args.shift();
+  Object.keys(arg).forEach(function (k) {
+    if (typeof arg[k] === 'function') arg[k] = {
+      func: arg[k]
+    };
+  });
+  var a = deepMerge(opts, arg);
+  return mergeOptions.apply(void 0, [a].concat(args));
+};
+
+export default function Rule() {
+  for (var _len2 = arguments.length, opts = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    opts[_key2] = arguments[_key2];
+  }
+
+  var options = mergeOptions.apply(void 0, [{}].concat(opts));
+  var rules = {
+    required: required(options.required),
+    max: length('max', options.max),
+    min: length('min', options.min),
+    regExp: regExp(options.regExp),
+    type: function type(t) {
+      return _type(t, options.type);
+    }
+  };
+
+  rules.length = function (min, max, msg) {
+    return [rules.min(min, msg), rules.max(max, msg)];
+  };
+
+  rules.range = function (min, max, msg) {
+    return [rules.min(min, msg), rules.max(max, msg)];
+  };
+
+  innerType.forEach(function (k) {
+    rules[k] = _type(k, options[k] || options.type);
+  });
+  var ruleKeys = Object.keys(rules);
+  Object.keys(options).forEach(function (k) {
+    if (!ruleKeys.includes(k)) {
+      if (isObject(options[k])) {
+        rules[k] = function (args) {
+          return Object.assign({}, options[k], {
+            args: args
+          });
+        };
+      } else {
+        console.error(new Error("Rule " + k + " is invalid, expect a function or an object."));
+      }
+    }
+  });
+  objectValues(rules).forEach(function (rule) {
+    rule.isInnerValidator = true;
+  });
+  rules.$$type = RULE_TYPE;
+  return rules;
+}

package/esm/Rule/interface.d.ts

@@ -0,0 +1 @@
+export { ValidFunc, RuleParams as Params, FormItemRule } from './Props';

package/esm/Rule/interface.js

@@ -0,0 +1 @@
+export {};

package/esm/Rule/length.d.ts

@@ -0,0 +1,10 @@
+import { ObjectType } from '../@types/common';
+import { MessageType } from './Props';
+export declare const lengthMessage: {
+    max: (props: ObjectType) => any;
+    min: (props: ObjectType) => any;
+};
+declare const _default: (key: 'min' | 'max', { message }?: {
+    message?: MessageType | undefined;
+}) => (len: number, msg?: MessageType | undefined) => ObjectType<any> | null;
+export default _default;