shineout 1.12.2 → 1.12.3

package/esm/Select/utils.js

@@ -0,0 +1,7 @@
+import { isFunc } from '../utils/is';
+export var getCustomList = function getCustomList(list, renderOptionList, loading) {
+  if (renderOptionList && isFunc(renderOptionList)) return renderOptionList(list, {
+    loading: loading
+  });
+  return list;
+};

package/esm/Slider/Container.d.ts

@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react';
+import { ContainerProps } from './Props';
+interface ContainerState {
+}
+declare class Container<Value extends number | number[]> extends PureComponent<ContainerProps<Value>, ContainerState> {
+    static defaultProps: {
+        height: number;
+        scale: number[];
+        step: number;
+        vertical: boolean;
+        formatScale: (v: number) => number;
+    };
+    innerElement: HTMLDivElement;
+    constructor(props: ContainerProps<Value>);
+    getValue(): number | number[] | Value;
+    bindElement(el: HTMLDivElement): void;
+    handleClick(e: React.MouseEvent<HTMLDivElement>): void;
+    handleChange(index: 0 | 1, val: number): void;
+    renderScale(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export default Container;

package/esm/Slider/Container.js

@@ -0,0 +1,180 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import { isRTL } from '../config';
+import { sliderClass } from './styles';
+import Slider from './Slider';
+import { per2value } from './utils';
+import getDataset from '../utils/dom/getDataset';
+import { getDirectionClass } from '../utils/classname';
+import { isFunc, isArray } from '../utils/is';
+var DefaultValue = {
+  height: 200,
+  scale: [0, 100],
+  step: 1,
+  vertical: false,
+  formatScale: function formatScale(v) {
+    return v;
+  }
+};
+
+var Container =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Container, _PureComponent);
+
+  function Container(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "innerElement", void 0);
+
+    _this.state = {};
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this))); // this.handleFirstDrag = this.handleDrag.bind(this, 0)
+    // this.handleSecondDrag = this.handleDrag.bind(this, 1)
+
+    return _this;
+  }
+
+  var _proto = Container.prototype;
+
+  _proto.getValue = function getValue() {
+    var _this$props = this.props,
+        range = _this$props.range,
+        value = _this$props.value,
+        _this$props$scale = _this$props.scale,
+        scale = _this$props$scale === void 0 ? DefaultValue.scale : _this$props$scale;
+    var from = scale[0];
+    if (!range) return value || from;
+    var val = value;
+    if (range && !isArray(value)) val = [from, from];
+    if (isArray(val) && val[0] > val[1]) val = [val[1], val[0]];
+    return val;
+  };
+
+  _proto.bindElement = function bindElement(el) {
+    this.innerElement = el;
+  };
+
+  _proto.handleClick = function handleClick(e) {
+    if (e.target.className.indexOf(sliderClass('indicator')) >= 0) return;
+    if (this.props.disabled) return;
+    var _this$props2 = this.props,
+        _this$props2$scale = _this$props2.scale,
+        scale = _this$props2$scale === void 0 ? DefaultValue.scale : _this$props2$scale,
+        _this$props2$step = _this$props2.step,
+        step = _this$props2$step === void 0 ? DefaultValue.step : _this$props2$step,
+        vertical = _this$props2.vertical,
+        range = _this$props2.range;
+    var rect = this.innerElement.getBoundingClientRect();
+    var per = vertical ? 1 - (e.clientY - rect.top) / rect.height : (e.clientX - rect.left) / rect.width;
+
+    if (isRTL() && !vertical) {
+      per = 1 - per;
+    }
+
+    var val = per2value(per, scale, step);
+
+    if (!range) {
+      this.props.onChange(val);
+      return;
+    }
+
+    var values = this.getValue();
+    if (!isArray(values)) return;
+    var value = [].concat(values);
+    if (val < value[0]) value[0] = val;else value[1] = val;
+    this.props.onChange(value);
+  };
+
+  _proto.handleChange = function handleChange(index, val) {
+    var range = this.props.range;
+
+    if (!range) {
+      this.props.onChange(val);
+      return;
+    }
+
+    var values = this.getValue();
+    if (!isArray(values)) return;
+    var value = [].concat(values);
+    value[index] = val;
+    this.props.onChange(value);
+  } // handleDrag(index, value) {
+  //   const { range } = this.props
+  //   if (!range) this.props.onDrag(value)
+  // }
+  ;
+
+  _proto.renderScale = function renderScale() {
+    var _this$props3 = this.props,
+        autoHide = _this$props3.autoHide,
+        formatScale = _this$props3.formatScale,
+        _this$props3$scale = _this$props3.scale,
+        scale = _this$props3$scale === void 0 ? DefaultValue.scale : _this$props3$scale;
+    if (!formatScale || !isFunc(formatScale)) return null;
+    return React.createElement("div", {
+      className: sliderClass(getDirectionClass('scale'), !autoHide && 'show')
+    }, scale.map(function (s, i) {
+      return React.createElement("div", {
+        key: s
+      }, React.createElement("span", null, formatScale(s, i)));
+    }));
+  };
+
+  _proto.render = function render() {
+    var _this$props4 = this.props,
+        range = _this$props4.range,
+        height = _this$props4.height,
+        style = _this$props4.style,
+        vertical = _this$props4.vertical,
+        _this$props4$scale = _this$props4.scale,
+        scale = _this$props4$scale === void 0 ? DefaultValue.scale : _this$props4$scale,
+        other = _objectWithoutPropertiesLoose(_this$props4, ["range", "height", "style", "vertical", "scale"]);
+
+    var className = classnames(sliderClass('_', vertical && 'vertical', this.props.disabled && 'disabled', isRTL() && 'rtl'), this.props.className);
+    var value = this.getValue();
+    if (!Array.isArray(value)) value = [0, value];
+    var newStyle = style;
+    if (vertical) newStyle = Object.assign({
+      height: height
+    }, style);
+    return React.createElement("div", _extends({
+      style: newStyle,
+      className: className
+    }, getDataset(other)), React.createElement("div", {
+      className: sliderClass('background')
+    }), React.createElement("div", {
+      ref: this.bindElement,
+      onClick: this.handleClick,
+      className: sliderClass('inner')
+    }, range && React.createElement(Slider, _extends({}, other, {
+      index: 0,
+      scale: scale,
+      max: value[1],
+      onChange: this.handleChange,
+      value: value[0],
+      vertical: vertical
+    })), React.createElement(Slider, _extends({}, other, {
+      index: 1,
+      scale: scale,
+      min: value[0],
+      onChange: this.handleChange,
+      value: value[1],
+      vertical: vertical
+    }))), this.renderScale());
+  };
+
+  return Container;
+}(PureComponent);
+
+_defineProperty(Container, "defaultProps", DefaultValue);
+
+export default Container;

package/esm/Slider/Indicator.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/esm/Slider/Indicator.js

@@ -0,0 +1,28 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import draggable from '../hoc/draggable';
+import { sliderClass } from './styles';
+
+var Indicator =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Indicator, _PureComponent);
+
+  function Indicator() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = Indicator.prototype;
+
+  _proto.render = function render() {
+    var event = this.props.disabled ? undefined : this.props.onDragStart;
+    return React.createElement("div", {
+      onMouseDown: event,
+      className: sliderClass('indicator')
+    });
+  };
+
+  return Indicator;
+}(PureComponent);
+
+export default draggable(Indicator);

package/esm/Slider/Props.d.ts

@@ -0,0 +1,128 @@
+import React from 'react';
+import { StandardProps } from '../@types/common';
+import { GetInputableProps } from '../Form/Props';
+export interface ContainerProps<Value extends number | number[]> extends StandardProps {
+    /**
+     * Automatically hides the current value and scale
+     *
+     * 是否自动隐藏当前值和刻度
+     *
+     * default: false
+     */
+    autoHide?: boolean;
+    /**
+     * Format displayed scale. When it is false, the scale is not displayed.
+     *
+     * 格式化显示刻度，为false时，不显示刻度
+     *
+     * default: v => v
+     */
+    formatScale?: ((value: number, index?: number) => string | number) | false;
+    /**
+     * Format displayed current value. When it is false, the current value is not displayed.
+     *
+     * 格式化显示当前值，为false时，不显示当前值
+     *
+     * default:
+     */
+    formatValue?: ((value: number) => string) | false;
+    /**
+     * height. Only effect when vertical is true
+     *
+     * 高度，仅在 vertical 为 true 情况下有效
+     *
+     * default: 200
+     */
+    height?: number;
+    /**
+     * Drag over the maximum event
+     *
+     * 值改变时回调函数
+     *
+     * default: [0, 100]
+     */
+    onChange: (value: Value) => void;
+    /**
+     * Value range. An array whose length is greater than 2.
+     *
+     * 取值范围，长度 >= 2 的数组
+     *
+     * default: [0, 100]
+     */
+    scale?: number[];
+    /**
+     * Step size. Must be greater than or equal to 0; When it is 0, only the value specified by scale can be selected.
+     *
+     * 步长，必须大于等于0；为0时，只能选取 scale 指定的值
+     *
+     * default: 1
+     */
+    step?: number;
+    /**
+     * current value
+     *
+     * 当前值
+     *
+     * default: -
+     */
+    value?: Value;
+    /**
+     * default value
+     *
+     * 默认值
+     *
+     * default: -
+     */
+    defaultValue?: Value;
+    /**
+     * Whether to be vertical
+     *
+     * 是否垂直
+     *
+     * default: false
+     */
+    vertical?: boolean;
+    /**
+     * Whether to display double slider
+     *
+     * 是否显示双滑块
+     *
+     * default: false
+     */
+    range?: boolean;
+    /**
+     * Disable component
+     *
+     * 是否禁用组件
+     *
+     * default: false
+     */
+    disabled?: boolean;
+    /**
+     * Drag over the maximum event
+     *
+     * 拖动超过最大值事件
+     *
+     * default: -
+     */
+    onIncrease?: () => void;
+}
+export interface BaseSliderProps<Value extends number | number[]> extends Pick<ContainerProps<Value>, 'disabled' | 'autoHide' | 'formatValue' | 'vertical' | 'onIncrease' | 'step'> {
+    index: 0 | 1;
+    min?: number;
+    max?: number;
+    onChange: (index: 0 | 1, val: number) => void;
+    onDrag?: any;
+    scale: number[];
+    value: number;
+}
+export interface IndicatorProps {
+    disabled?: boolean;
+    onDragStart: () => void;
+}
+export declare type SliderPropsWidthInputable<Value extends number | number[]> = GetInputableProps<ContainerProps<Value>, Value>;
+export declare type SliderProps<Value extends number | number[]> = SliderPropsWidthInputable<Value>;
+export declare class SliderClass<Value extends number | number[]> extends React.Component<SliderProps<Value>, {}> {
+    render(): JSX.Element;
+}
+export declare type SliderType = typeof SliderClass;

package/esm/Slider/Props.js

@@ -0,0 +1 @@
+import React from 'react';

package/esm/Slider/Slider.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { PureComponent } from '../component';
+import { BaseSliderProps } from './Props';
+interface SliderState {
+    dragging: boolean;
+    length: number;
+}
+declare class Slider<Value extends number | number[]> extends PureComponent<BaseSliderProps<Value>, SliderState> {
+    static defaultProps: {
+        formatValue: (v: number) => number;
+    };
+    parentElement: HTMLElement;
+    constructor(props: BaseSliderProps<Value>);
+    componentDidUpdate(prevProps: BaseSliderProps<Value>): void;
+    bindElement(el: HTMLDivElement): void;
+    length2value(length: number): number;
+    handleDrag(mx: number, my: number): void;
+    handleDragEnd(): void;
+    renderResult(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export default Slider;

package/esm/Slider/Slider.js

@@ -0,0 +1,148 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { PureComponent } from '../component';
+import Indicator from './Indicator';
+import { sliderClass } from './styles';
+import { per2value, value2per } from './utils';
+import { isRTL } from '../config';
+import { isFunc } from '../utils/is';
+var DefaultValue = {
+  formatValue: function formatValue(v) {
+    return v;
+  }
+};
+
+var Slider =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Slider, _PureComponent);
+
+  function Slider(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "parentElement", void 0);
+
+    _this.state = {
+      dragging: false,
+      length: value2per(props.value, props.scale)
+    };
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleDrag = _this.handleDrag.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleDragEnd = _this.handleDragEnd.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Slider.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this$props = this.props,
+        value = _this$props.value,
+        scale = _this$props.scale;
+    var dragging = this.state.dragging;
+    var len = scale.length;
+
+    if (prevProps.value !== value || !dragging && prevProps.scale[len - 1] !== scale[len - 1]) {
+      // eslint-disable-next-line
+      this.setState({
+        length: value2per(value, scale)
+      });
+    }
+  };
+
+  _proto.bindElement = function bindElement(el) {
+    if (el && el.parentElement) this.parentElement = el.parentElement;
+  };
+
+  _proto.length2value = function length2value(length) {
+    var _this$props2 = this.props,
+        scale = _this$props2.scale,
+        step = _this$props2.step;
+    return per2value(length, scale, step);
+  };
+
+  _proto.handleDrag = function handleDrag(mx, my) {
+    var _this$props3 = this.props,
+        scale = _this$props3.scale,
+        onDrag = _this$props3.onDrag,
+        value = _this$props3.value,
+        vertical = _this$props3.vertical,
+        onIncrease = _this$props3.onIncrease;
+    var m = vertical ? my / this.parentElement.clientHeight : mx / this.parentElement.clientWidth * (isRTL() ? -1 : 1);
+    var length = this.state.length;
+    var min = this.props.min ? value2per(this.props.min, scale) : 0;
+    var max = this.props.max ? value2per(this.props.max, scale) : 1;
+    var newLength = length + (vertical ? -m : m);
+    var needIncrease = newLength > 1;
+    if (newLength < min) newLength = min;
+    if (newLength > max) newLength = max;
+    if (needIncrease && onIncrease) onIncrease();
+    this.setState({
+      length: newLength,
+      dragging: true
+    });
+
+    if (onDrag) {
+      var newValue = this.length2value(newLength);
+      if (newValue !== value) onDrag(newValue);
+    }
+  };
+
+  _proto.handleDragEnd = function handleDragEnd() {
+    var length = this.state.length;
+    var scale = this.props.scale;
+    var value = this.length2value(length);
+    this.setState({
+      length: value2per(value, scale),
+      dragging: false
+    });
+    this.props.onChange(this.props.index, value);
+  };
+
+  _proto.renderResult = function renderResult() {
+    var _this$props4 = this.props,
+        autoHide = _this$props4.autoHide,
+        _this$props4$formatVa = _this$props4.formatValue,
+        formatValue = _this$props4$formatVa === void 0 ? DefaultValue.formatValue : _this$props4$formatVa;
+    if (!formatValue || !isFunc(formatValue)) return null;
+    var dragging = this.state.dragging;
+    var className = sliderClass('result', (!autoHide || dragging) && 'show');
+    var value = formatValue(this.length2value(this.state.length));
+    return React.createElement("div", {
+      className: className
+    }, value);
+  };
+
+  _proto.render = function render() {
+    var _style;
+
+    var _this$props5 = this.props,
+        index = _this$props5.index,
+        disabled = _this$props5.disabled,
+        vertical = _this$props5.vertical;
+    var length = this.state.length;
+    if (index === 1) length = 1 - length;
+    var style = (_style = {}, _style[vertical ? 'height' : 'width'] = length * 100 + "%", _style);
+    var className = sliderClass('bar', vertical && (index === 1 ? 'top' : 'bottom'), !vertical && index === 1 && 'right');
+    return React.createElement("div", {
+      ref: this.bindElement,
+      style: style,
+      className: className
+    }, this.renderResult(), React.createElement("div", {
+      className: sliderClass('bar-bg')
+    }), React.createElement(Indicator, {
+      disabled: disabled,
+      onDrag: this.handleDrag,
+      onDragEnd: this.handleDragEnd
+    }));
+  };
+
+  return Slider;
+}(PureComponent);
+
+_defineProperty(Slider, "defaultProps", DefaultValue);
+
+export default Slider;

package/esm/Slider/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: typeof import("./Props").SliderClass;
+export default _default;

package/esm/Slider/index.js

@@ -0,0 +1,5 @@
+import inputable from '../Form/inputable';
+import Container from './Container';
+var Slider = inputable(Container);
+Slider.displayName = 'ShineoutSlider';
+export default Slider;

package/esm/Slider/interface.d.ts

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

package/esm/Slider/interface.js

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

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

@@ -0,0 +1 @@
+export const sliderClass: (...args: any) => string;

package/esm/Slider/styles/index.js

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